feat: Added floating-ui hook usage for ComboBox

packages/react/src/components/ComboBox/ComboBox.stories.js

@@ -92,6 +92,21 @@ export const AllowCustomValue = () => {
     </div>
   );
 };
+export const ExperimentalAutoAlign = () => (
+  <div style={{ width: 400 }}>
+    <div style={{ height: 300 }}></div>
+    <ComboBox
+      onChange={() => {}}
+      id="carbon-combobox"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+      titleText="ComboBox title"
+      helperText="Combobox helper text"
+      autoAlign={true}
+    />
+    <div style={{ height: 800 }}></div>
+  </div>
+);
 
 export const _WithLayer = () => (
   <WithLayer>

packages/react/src/components/ComboBox/ComboBox.tsx

@@ -43,6 +43,7 @@ import mergeRefs from '../../tools/mergeRefs';
 import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
+import { useFloating, flip, autoUpdate } from '@floating-ui/react';
 
 const {
   InputBlur,
@@ -150,6 +151,11 @@ export interface ComboBoxProps<ItemType>
    */
   ariaLabel?: string;
 
+  /**
+   * Will auto-align the dropdown on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign?: boolean;
+
   /**
    * An optional className to add to the container node
    */
@@ -313,6 +319,7 @@ const ComboBox = forwardRef(
     const {
       ['aria-label']: ariaLabel = 'Choose an item',
       ariaLabel: deprecatedAriaLabel,
+      autoAlign = false,
       className: containerClassName,
       direction = 'bottom',
       disabled = false,
@@ -342,6 +349,33 @@ const ComboBox = forwardRef(
       slug,
       ...rest
     } = props;
+    const { refs, floatingStyles } = useFloating(
+      autoAlign
+        ? {
+            strategy: 'fixed',
+            middleware: [
+              flip({
+                fallbackAxisSideDirection: 'none',
+              }),
+            ],
+            whileElementsMounted: autoUpdate,
+          }
+        : {}
+    );
+    const parentWidth = (refs?.reference?.current as HTMLElement)?.clientWidth;
+
+    useEffect(() => {
+      if (autoAlign) {
+        Object.keys(floatingStyles).forEach((style) => {
+          if (refs.floating.current) {
+            refs.floating.current.style[style] = floatingStyles[style];
+          }
+        });
+        if (parentWidth && refs.floating.current) {
+          refs.floating.current.style.width = parentWidth + 'px';
+        }
+      }
+    }, [autoAlign, floatingStyles, refs.floating, parentWidth]);
     const prefix = usePrefix();
     const { isFluid } = useContext(FormContext);
     const textInput = useRef<HTMLInputElement>(null);
@@ -630,6 +664,7 @@ const ComboBox = forwardRef(
           light={light}
           size={size}
           warn={warn}
+          ref={refs.setReference}
           warnText={warnText}
           warnTextId={warnTextId}>
           <div className={`${prefix}--list-box__field`}>
@@ -739,7 +774,8 @@ const ComboBox = forwardRef(
           <ListBox.Menu
             {...getMenuProps({
               'aria-label': deprecatedAriaLabel || ariaLabel,
-            })}>
+            })}
+            ref={mergeRefs(getMenuProps().ref, refs.setFloating)}>
             {isOpen
               ? filterItems(items, itemToString, inputValue).map(
                   (item, index) => {
@@ -821,6 +857,10 @@ ComboBox.propTypes = {
     PropTypes.string,
     'This prop syntax has been deprecated. Please use the new `aria-label`.'
   ),
+  /**
+   * Will auto-align the dropdown on first render if it is not visible. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes.bool,
 
   /**
    * An optional className to add to the container node