16879 collision boundary in auto align components (#17139)

* feat: added hide to useFloating hook * feat: added hide to useFloating hook in Multiselect * feat: added hide to useFloating hook in FilterableMultiselect * feat: added hide to useFloating hook in Popover * feat: added hide to useFloating hook in Combobutton * fix: text case * fix: test case * fix: test case --------- Co-authored-by: Nikhil Tomar <[email protected]>
carbon-design-system · Aug 29, 2024 · bc4acdc · bc4acdc
1 parent dbe5402
commit bc4acdc
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 19 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -45,6 +45,7 @@ import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 import { useFloating, flip, autoUpdate } from '@floating-ui/react';
+import { hide } from '@floating-ui/dom';
 import { TranslateWithId } from '../../types/common';
 
 const {
@@ -381,12 +382,12 @@ const ComboBox = forwardRef(
       slug,
       ...rest
     } = props;
-    const { refs, floatingStyles } = useFloating(
+    const { refs, floatingStyles, middlewareData } = useFloating(
       autoAlign
         ? {
             placement: direction,
             strategy: 'fixed',
-            middleware: [flip()],
+            middleware: [flip(), hide()],
             whileElementsMounted: autoUpdate,
           }
         : {}
@@ -395,9 +396,15 @@ const ComboBox = forwardRef(
 
     useEffect(() => {
       if (autoAlign) {
-        Object.keys(floatingStyles).forEach((style) => {
+        const updatedFloatingStyles = {
+          ...floatingStyles,
+          visibility: middlewareData.hide?.referenceHidden
+            ? 'hidden'
+            : 'visible',
+        };
+        Object.keys(updatedFloatingStyles).forEach((style) => {
           if (refs.floating.current) {
-            refs.floating.current.style[style] = floatingStyles[style];
+            refs.floating.current.style[style] = updatedFloatingStyles[style];
           }
         });
         if (parentWidth && refs.floating.current) {

diff --git a/packages/react/src/components/ComboButton/ComboButton-test.js b/packages/react/src/components/ComboButton/ComboButton-test.js
@@ -133,8 +133,7 @@ describe('ComboButton', () => {
           );
 
           await userEvent.click(screen.getAllByRole('button')[1]);
-
-          expect(screen.getByRole('menu')).toHaveClass(
+          expect(document.querySelector('ul.cds--menu')).toHaveClass(
             `${prefix}--combo-button__${alignment}`
           );
         });
@@ -181,10 +180,10 @@ describe('ComboButton', () => {
 
       await userEvent.click(screen.getAllByRole('button')[1]);
 
-      expect(screen.getByRole('menu')).toBeInTheDocument();
-      expect(screen.getByRole('menuitem')).toHaveTextContent(
-        /^Additional action$/
-      );
+      expect(document.querySelector('ul.cds--menu')).toBeInTheDocument();
+      expect(
+        document.querySelector('.cds--menu-item__label')
+      ).toHaveTextContent(/^Additional action$/);
     });
 
     it('warns when MenuItemSelectable is used in children', async () => {

diff --git a/packages/react/src/components/ComboButton/index.tsx b/packages/react/src/components/ComboButton/index.tsx
@@ -21,6 +21,7 @@ import {
   size as floatingSize,
   autoUpdate,
 } from '@floating-ui/react';
+import { hide } from '@floating-ui/dom';
 import mergeRefs from '../../tools/mergeRefs';
 import { MenuAlignment } from '../MenuButton';
 import { TranslateWithId } from '../../types/common';
@@ -99,7 +100,7 @@ const ComboButton = React.forwardRef<HTMLDivElement, ComboButtonProps>(
     const id = useId('combobutton');
     const prefix = usePrefix();
     const containerRef = useRef<HTMLDivElement>(null);
-    const middlewares = [flip({ crossAxis: false })];
+    const middlewares = [flip({ crossAxis: false }), hide()];
 
     if (menuAlignment === 'bottom' || menuAlignment === 'top') {
       middlewares.push(
@@ -134,9 +135,13 @@ const ComboButton = React.forwardRef<HTMLDivElement, ComboButtonProps>(
     } = useAttachedMenu(containerRef);
 
     useLayoutEffect(() => {
-      Object.keys(floatingStyles).forEach((style) => {
+      const updatedFloatingStyles = {
+        ...floatingStyles,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible',
+      };
+      Object.keys(updatedFloatingStyles).forEach((style) => {
         if (refs.floating.current) {
-          refs.floating.current.style[style] = floatingStyles[style];
+          refs.floating.current.style[style] = updatedFloatingStyles[style];
         }
       });
     }, [floatingStyles, refs.floating, middlewareData, placement, open]);

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -57,6 +57,7 @@ import {
   size as floatingSize,
   autoUpdate,
 } from '@floating-ui/react';
+import { hide } from '@floating-ui/dom';
 import { TranslateWithId } from '../../types/common';
 
 const {
@@ -388,6 +389,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
                 });
               },
             }),
+            hide(),
           ],
           whileElementsMounted: autoUpdate,
         }
@@ -396,9 +398,13 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
 
   useLayoutEffect(() => {
     if (autoAlign) {
-      Object.keys(floatingStyles).forEach((style) => {
+      const updatedFloatingStyles = {
+        ...floatingStyles,
+        visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible',
+      };
+      Object.keys(updatedFloatingStyles).forEach((style) => {
         if (refs.floating.current) {
-          refs.floating.current.style[style] = floatingStyles[style];
+          refs.floating.current.style[style] = updatedFloatingStyles[style];
         }
       });
     }

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx
@@ -51,6 +51,7 @@ import {
   size as floatingSize,
   autoUpdate,
 } from '@floating-ui/react';
+import { hide } from '@floating-ui/dom';
 
 const {
   ItemClick,
@@ -371,6 +372,7 @@ const MultiSelect = React.forwardRef(
                   });
                 },
               }),
+              hide(),
             ],
             whileElementsMounted: autoUpdate,
           }
@@ -379,9 +381,15 @@ const MultiSelect = React.forwardRef(
 
     useLayoutEffect(() => {
       if (autoAlign) {
-        Object.keys(floatingStyles).forEach((style) => {
+        const updatedFloatingStyles = {
+          ...floatingStyles,
+          visibility: middlewareData.hide?.referenceHidden
+            ? 'hidden'
+            : 'visible',
+        };
+        Object.keys(updatedFloatingStyles).forEach((style) => {
           if (refs.floating.current) {
-            refs.floating.current.style[style] = floatingStyles[style];
+            refs.floating.current.style[style] = updatedFloatingStyles[style];
           }
         });
       }

diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
@@ -29,6 +29,7 @@ import {
   arrow,
   offset,
 } from '@floating-ui/react';
+import { hide } from '@floating-ui/dom';
 
 interface PopoverContext {
   setFloating: React.Ref<HTMLSpanElement>;
@@ -258,6 +259,7 @@ export const Popover: PopoverComponent = React.forwardRef(
               arrow({
                 element: caretRef,
               }),
+              hide(),
             ],
             whileElementsMounted: autoUpdate,
           }
@@ -286,9 +288,15 @@ export const Popover: PopoverComponent = React.forwardRef(
 
     useEffect(() => {
       if (autoAlign) {
-        Object.keys(floatingStyles).forEach((style) => {
+        const updatedFloatingStyles = {
+          ...floatingStyles,
+          visibility: middlewareData.hide?.referenceHidden
+            ? 'hidden'
+            : 'visible',
+        };
+        Object.keys(updatedFloatingStyles).forEach((style) => {
           if (refs.floating.current) {
-            refs.floating.current.style[style] = floatingStyles[style];
+            refs.floating.current.style[style] = updatedFloatingStyles[style];
           }
         });