fix: Hide disabled reason tooltip when the option is scrolled away (#…

…2791)
cloudscape-design · Oct 1, 2024 · a2e7df7 · a2e7df7
1 parent 1686229
commit a2e7df7
Show file tree

Hide file tree

Showing 14 changed files with 413 additions and 156 deletions.
diff --git a/pages/multiselect/disabled-reason.page.tsx b/pages/multiselect/disabled-reason.page.tsx
@@ -7,6 +7,14 @@ import Multiselect, { MultiselectProps } from '~components/multiselect';
 
 import ScreenshotArea from '../utils/screenshot-area';
 
+const extraOptions = [...Array(30).keys()].map(n => {
+  const numberToDisplay = (n + 5).toString();
+  return {
+    value: numberToDisplay,
+    label: `Option ${n + 5}`,
+  };
+});
+
 const options: MultiselectProps.Options = [
   { value: 'first', label: 'Simple' },
   { value: 'second', label: 'With small icon', iconName: 'folder' },
@@ -24,6 +32,8 @@ const options: MultiselectProps.Options = [
     disabled: true,
     disabledReason: 'disabled reason',
   },
+  ...extraOptions,
+  { label: 'Last option', disabled: true, disabledReason: 'disabled reason' },
 ];
 
 export default function MultiselectPage() {

diff --git a/pages/select/disabled-reason.page.tsx b/pages/select/disabled-reason.page.tsx
@@ -7,18 +7,17 @@ import Select from '~components/select';
 
 import ScreenshotArea from '../utils/screenshot-area';
 
-const options = [
-  {
-    value: '1',
-    label: 'Option 1',
-    disabled: true,
-    disabledReason: 'disabled reason',
-  },
-  {
-    value: '2',
-    label: 'Option 2',
-  },
-];
+const options = [...Array(50).keys()].map(n => {
+  const numberToDisplay = (n + 1).toString();
+  const baseOption = {
+    value: numberToDisplay,
+    label: `Option ${numberToDisplay}`,
+  };
+  if (n === 0 || n === 24 || n === 49) {
+    return { ...baseOption, disabled: true, disabledReason: 'disabled reason' };
+  }
+  return baseOption;
+});
 
 export default function SelectPage() {
   return (

diff --git a/src/internal/components/tooltip/index.tsx b/src/internal/components/tooltip/index.tsx
@@ -20,6 +20,7 @@ export interface TooltipProps {
   className?: string;
   contentAttributes?: React.HTMLAttributes<HTMLDivElement>;
   size?: PopoverProps['size'];
+  hideOnOverscroll?: boolean;
 }
 
 export default function Tooltip({
@@ -30,6 +31,7 @@ export default function Tooltip({
   contentAttributes = {},
   position = 'top',
   size = 'small',
+  hideOnOverscroll,
 }: TooltipProps) {
   if (!trackKey && (typeof value === 'string' || typeof value === 'number')) {
     trackKey = value;
@@ -48,6 +50,7 @@ export default function Tooltip({
               position={position}
               zIndex={7000}
               arrow={position => <PopoverArrow position={position} />}
+              hideOnOverscroll={hideOnOverscroll}
             >
               <PopoverBody dismissButton={false} dismissAriaLabel={undefined} onDismiss={undefined} header={undefined}>
                 {value}

diff --git a/src/popover/__tests__/positions.test.ts b/src/popover/__tests__/positions.test.ts
@@ -3,6 +3,7 @@
 import {
   calculatePosition,
   intersectRectangles,
+  isCenterOutside,
   PRIORITY_MAPPING,
 } from '../../../lib/components/popover/utils/positions';
 
@@ -199,3 +200,62 @@ describe('intersectRectangles', () => {
     expect(intersectRectangles([])).toEqual(null);
   });
 });
+
+describe('isCenterOutside', () => {
+  const parentRect = {
+    blockSize: 50,
+    inlineSize: 10,
+    insetBlockStart: 15,
+    insetBlockEnd: 65,
+    insetInlineStart: 0,
+    insetInlineEnd: 10,
+  };
+
+  test('returns true if the block-level center of the first rect is smaller than the block-level start of the second rect', () => {
+    expect(
+      isCenterOutside(
+        {
+          blockSize: 20,
+          inlineSize: 10,
+          insetBlockStart: 0,
+          insetBlockEnd: 20,
+          insetInlineStart: 0,
+          insetInlineEnd: 10,
+        },
+        parentRect
+      )
+    ).toBe(true);
+  });
+
+  test('returns true if the block-level center of the first rect is bigger than the block-level start of the second rect', () => {
+    expect(
+      isCenterOutside(
+        {
+          blockSize: 20,
+          inlineSize: 10,
+          insetBlockStart: 60,
+          insetBlockEnd: 80,
+          insetInlineStart: 0,
+          insetInlineEnd: 10,
+        },
+        parentRect
+      )
+    ).toBe(true);
+  });
+
+  test('returns false if the block-level center of the first rect is between the block-level start and the block-level end of the second rect', () => {
+    expect(
+      isCenterOutside(
+        {
+          blockSize: 20,
+          inlineSize: 10,
+          insetBlockStart: 10,
+          insetBlockEnd: 30,
+          insetInlineStart: 0,
+          insetInlineEnd: 10,
+        },
+        parentRect
+      )
+    ).toBe(false);
+  });
+});
diff --git a/src/popover/container.tsx b/src/popover/container.tsx
@@ -39,6 +39,8 @@ export interface PopoverContainerProps {
   // Do not use this if the popover is open on hover, in order to avoid unexpected movement.
   allowScrollToFit?: boolean;
   allowVerticalOverflow?: boolean;
+  // Whether the popover should be hidden when the trigger is scrolled away.
+  hideOnOverscroll?: boolean;
 }
 
 export default function PopoverContainer({
@@ -55,6 +57,7 @@ export default function PopoverContainer({
   keepPosition,
   allowScrollToFit,
   allowVerticalOverflow,
+  hideOnOverscroll,
 }: PopoverContainerProps) {
   const bodyRef = useRef<HTMLDivElement | null>(null);
   const contentRef = useRef<HTMLDivElement | null>(null);
@@ -64,18 +67,20 @@ export default function PopoverContainer({
   const isRefresh = useVisualRefresh();
 
   // Updates the position handler.
-  const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef } = usePopoverPosition({
-    popoverRef,
-    bodyRef,
-    arrowRef,
-    trackRef,
-    contentRef,
-    allowScrollToFit,
-    allowVerticalOverflow,
-    preferredPosition: position,
-    renderWithPortal,
-    keepPosition,
-  });
+  const { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling } =
+    usePopoverPosition({
+      popoverRef,
+      bodyRef,
+      arrowRef,
+      trackRef,
+      contentRef,
+      allowScrollToFit,
+      allowVerticalOverflow,
+      preferredPosition: position,
+      renderWithPortal,
+      keepPosition,
+      hideOnOverscroll,
+    });
 
   // Recalculate position when properties change.
   useLayoutEffect(() => {
@@ -124,9 +129,9 @@ export default function PopoverContainer({
       window.removeEventListener('resize', updatePositionOnResize);
       window.removeEventListener('scroll', refreshPosition, true);
     };
-  }, [keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);
+  }, [hideOnOverscroll, keepPosition, positionHandlerRef, trackRef, updatePositionHandler]);
 
-  return (
+  return isOverscrolling ? null : (
     <div
       ref={popoverRef}
       style={{ ...popoverStyle, zIndex }}

diff --git a/src/popover/interfaces.ts b/src/popover/interfaces.ts
@@ -106,6 +106,11 @@ export interface Dimensions {
 
 export type BoundingBox = Dimensions & Offset;
 
+export type Rect = BoundingBox & {
+  insetBlockEnd: number;
+  insetInlineEnd: number;
+};
+
 export namespace PopoverProps {
   export type Position = 'top' | 'right' | 'bottom' | 'left';
   export type Size = 'small' | 'medium' | 'large';

diff --git a/src/popover/use-popover-position.ts b/src/popover/use-popover-position.ts
@@ -12,8 +12,8 @@ import {
   getFirstScrollableParent,
   scrollRectangleIntoView,
 } from '../internal/utils/scrollable-containers';
-import { BoundingBox, InternalPosition, Offset, PopoverProps } from './interfaces';
-import { calculatePosition, getDimensions, getOffsetDimensions } from './utils/positions';
+import { BoundingBox, InternalPosition, Offset, PopoverProps, Rect } from './interfaces';
+import { calculatePosition, getDimensions, getOffsetDimensions, isCenterOutside } from './utils/positions';
 
 export default function usePopoverPosition({
   popoverRef,
@@ -26,6 +26,7 @@ export default function usePopoverPosition({
   preferredPosition,
   renderWithPortal,
   keepPosition,
+  hideOnOverscroll,
 }: {
   popoverRef: React.RefObject<HTMLDivElement | null>;
   bodyRef: React.RefObject<HTMLDivElement | null>;
@@ -37,14 +38,18 @@ export default function usePopoverPosition({
   preferredPosition: PopoverProps.Position;
   renderWithPortal?: boolean;
   keepPosition?: boolean;
+  hideOnOverscroll?: boolean;
 }) {
   const previousInternalPositionRef = useRef<InternalPosition | null>(null);
   const [popoverStyle, setPopoverStyle] = useState<Partial<Offset>>({});
   const [internalPosition, setInternalPosition] = useState<InternalPosition | null>(null);
+  const [isOverscrolling, setIsOverscrolling] = useState(false);
 
   // Store the handler in a ref so that it can still be replaced from outside of the listener closure.
   const positionHandlerRef = useRef<() => void>(() => {});
 
+  const scrollableContainerRectRef = useRef<Rect | null>(null);
+
   const updatePositionHandler = useCallback(
     (onContentResize = false) => {
       if (!trackRef.current || !popoverRef.current || !bodyRef.current || !contentRef.current || !arrowRef.current) {
@@ -152,15 +157,32 @@ export default function usePopoverPosition({
         scrollRectangleIntoView(rect, scrollableParent);
       }
 
+      if (hideOnOverscroll && trackRef.current instanceof HTMLElement) {
+        const scrollableContainer = getFirstScrollableParent(trackRef.current);
+        if (scrollableContainer) {
+          scrollableContainerRectRef.current = getLogicalBoundingClientRect(scrollableContainer);
+        }
+      }
+
       positionHandlerRef.current = () => {
+        const trackRect = getLogicalBoundingClientRect(track);
+
         const newTrackOffset = toRelativePosition(
-          getLogicalBoundingClientRect(track),
+          trackRect,
           containingBlock ? getLogicalBoundingClientRect(containingBlock) : viewportRect
         );
+
         setPopoverStyle({
           insetBlockStart: newTrackOffset.insetBlockStart + trackRelativeOffset.insetBlockStart,
           insetInlineStart: newTrackOffset.insetInlineStart + trackRelativeOffset.insetInlineStart,
         });
+
+        if (hideOnOverscroll && scrollableContainerRectRef.current) {
+          // Assuming the arrow tip is at the vertical center of the popover trigger.
+          // This is good enough for disabled reason tooltip in select and multiselect.
+          // Can be further refined to take the exact arrow position into account if hideOnOverscroll is to be used in other cases.
+          setIsOverscrolling(isCenterOutside(trackRect, scrollableContainerRectRef.current));
+        }
       };
     },
     [
@@ -170,13 +192,14 @@ export default function usePopoverPosition({
       contentRef,
       arrowRef,
       keepPosition,
-      allowScrollToFit,
       preferredPosition,
       renderWithPortal,
       allowVerticalOverflow,
+      allowScrollToFit,
+      hideOnOverscroll,
     ]
   );
-  return { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef };
+  return { updatePositionHandler, popoverStyle, internalPosition, positionHandlerRef, isOverscrolling };
 }
 
 function getBorderWidth(element: HTMLElement) {

diff --git a/src/popover/utils/positions.ts b/src/popover/utils/positions.ts
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { BoundingBox, Dimensions, InternalPosition, PopoverProps } from '../interfaces';
+import { BoundingBox, Dimensions, InternalPosition, PopoverProps, Rect } from '../interfaces';
 
 // A structure describing how the popover should be positioned
 interface CalculatedPosition {
@@ -336,3 +336,10 @@ export function getDimensions(element: HTMLElement) {
 function isTopOrBottom(internalPosition: InternalPosition) {
   return ['top', 'bottom'].includes(internalPosition.split('-')[0]);
 }
+
+export function isCenterOutside(child: Rect, parent: Rect) {
+  const childCenter = child.insetBlockStart + child.blockSize / 2;
+  const overflowsBlockStart = childCenter < parent.insetBlockStart;
+  const overflowsBlockEnd = childCenter > parent.insetBlockEnd;
+  return overflowsBlockStart || overflowsBlockEnd;
+}