@carbon/react 1.60.3 → 1.61.0-rc.1

package/es/components/ComposedModal/ComposedModal.js

@@ -9,6 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import React__default, { useRef, useState, useEffect } from 'react';
 import { isElement } from 'react-is';
 import PropTypes from 'prop-types';
+import { Layer } from '../Layer/index.js';
 import { ModalHeader } from './ModalHeader.js';
 import { ModalFooter } from './ModalFooter.js';
 import debounce from 'lodash.debounce';
@@ -59,7 +60,7 @@ const ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref
     tabIndex: 0,
     role: 'region'
   } : {};
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement(Layer, _extends({
     className: contentClass
   }, hasScrollingContentProps, rest, {
     ref: mergeRefs(contentRef, ref)
@@ -249,7 +250,8 @@ const ComposedModal = /*#__PURE__*/React__default.forwardRef(function ComposedMo
       size: 'sm'
     });
   }
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React__default.createElement(Layer, _extends({}, rest, {
+    level: 0,
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,

package/es/components/DatePicker/DatePicker.js

@@ -176,6 +176,8 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
 
   // fix datepicker deleting the selectedDate when the calendar closes
   const onCalendarClose = (selectedDates, dateStr) => {
+    endInputField?.current?.focus();
+    calendarRef?.current?.calendarContainer?.classList.remove('open');
     setTimeout(() => {
       if (lastStartValue.current && selectedDates[0] && !startInputField.current.value) {
         startInputField.current.value = lastStartValue.current;
@@ -355,9 +357,12 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     calendarRef.current = calendar;
     function handleArrowDown(event) {
       if (match(event, Escape)) {
-        calendar.calendarContainer.classList.remove('open');
+        calendar?.calendarContainer?.classList.remove('open');
       }
       if (match(event, ArrowDown)) {
+        if (event.target == endInputField.current) {
+          calendar?.calendarContainer?.classList.add('open');
+        }
         const {
           calendarContainer,
           selectedDateElem: fpSelectedDateElem,

package/es/components/Dropdown/Dropdown.d.ts

@@ -23,6 +23,10 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * Specify a label to be read by screen readers on the container note.
      */
     ariaLabel?: string;
+    /**
+     * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+     */
+    autoAlign?: boolean;
     /**
      * Specify the direction of the dropdown. Can be either top or bottom.
      */

package/es/components/Dropdown/Dropdown.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useRef, useState } from 'react';
+import React__default, { useEffect, useContext, useRef, useState } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -18,6 +18,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useFloating, size, flip, autoUpdate } from '@floating-ui/react';
 import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
 const getInstanceId = setupGetInstanceId();
@@ -43,6 +44,7 @@ const defaultItemToString = item => {
 };
 const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
+    autoAlign = false,
     className: containerClassName,
     disabled = false,
     direction = 'bottom',
@@ -54,7 +56,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     itemToElement = null,
     renderSelectedItem,
     type = 'default',
-    size,
+    size: size$1,
     onChange,
     id,
     titleText = '',
@@ -73,6 +75,40 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     slug,
     ...other
   } = _ref;
+  const {
+    refs,
+    floatingStyles
+  } = useFloating(autoAlign ? {
+    placement: direction,
+    // The floating element is positioned relative to its nearest
+    // containing block (usually the viewport). It will in many cases also
+    // “break” the floating element out of a clipping ancestor.
+    // https://floating-ui.com/docs/misc#clipping
+    strategy: 'fixed',
+    // Middleware order matters, arrow should be last
+    middleware: [size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    }), flip()],
+    whileElementsMounted: autoUpdate
+  } : {} // When autoAlign is turned off, floating-ui will not be used
+  );
+  useEffect(() => {
+    if (autoAlign) {
+      Object.keys(floatingStyles).forEach(style => {
+        if (refs.floating.current) {
+          refs.floating.current.style[style] = floatingStyles[style];
+        }
+      });
+    }
+  }, [floatingStyles, autoAlign, refs.floating]);
   const prefix = usePrefix();
   const {
     isFluid
@@ -146,8 +182,9 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     [`${prefix}--dropdown--disabled`]: disabled,
     [`${prefix}--dropdown--light`]: light,
     [`${prefix}--dropdown--readonly`]: readOnly,
-    [`${prefix}--dropdown--${size}`]: size,
-    [`${prefix}--list-box--up`]: direction === 'top'
+    [`${prefix}--dropdown--${size$1}`]: size$1,
+    [`${prefix}--list-box--up`]: direction === 'top',
+    [`${prefix}--dropdown--autoalign`]: autoAlign
   });
   const titleClasses = cx(`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
@@ -174,10 +211,10 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     id: helperId,
     className: helperClasses
   }, helperText) : null;
-  function onSelectedItemChange(_ref2) {
+  function onSelectedItemChange(_ref3) {
     let {
       selectedItem
-    } = _ref2;
+    } = _ref3;
     if (onChange) {
       onChange({
         selectedItem: selectedItem ?? null
@@ -227,6 +264,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     }
   };
   const menuProps = getMenuProps();
+  const menuRef = mergeRefs(menuProps.ref, refs.setFloating);
 
   // Slug is always size `mini`
   let normalizedSlug;
@@ -243,7 +281,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     onFocus: handleFocus,
     onBlur: handleFocus,
     "aria-label": deprecatedAriaLabel || ariaLabel,
-    size: size,
+    size: size$1,
     className: className,
     invalid: invalid,
     invalidText: invalidText,
@@ -251,6 +289,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     warnText: warnText,
     light: light,
     isOpen: isOpen,
+    ref: refs.setReference,
     id: id
   }, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
@@ -273,7 +312,9 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && items.map((item, index) => {
+  })), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, _extends({}, menuProps, {
+    ref: menuRef
+  }), isOpen && items.map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const itemProps = getItemProps({
       item,
@@ -308,6 +349,10 @@ Dropdown.propTypes = {
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
+  /**
+   * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+   */
+  autoAlign: PropTypes.bool,
   /**
    * Provide a custom className to be applied on the cds--dropdown node
    */

package/es/components/Modal/Modal.js

@@ -15,6 +15,7 @@ import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
 import ButtonSet from '../ButtonSet/ButtonSet.js';
 import InlineLoading from '../InlineLoading/InlineLoading.js';
+import { Layer } from '../Layer/index.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
 import wrapFocus, { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import debounce from 'lodash.debounce';
@@ -266,7 +267,7 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     as: "h3",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
-  }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default.createElement("div", _extends({
+  }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default.createElement(Layer, _extends({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
@@ -301,7 +302,8 @@ const Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
   }))));
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React__default.createElement(Layer, _extends({}, rest, {
+    level: 0,
     onKeyDown: handleKeyDown,
     onMouseDown: handleMousedown,
     onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -6,8 +6,8 @@
  */
 import { type UseComboboxProps, type UseMultipleSelectionProps } from 'downshift';
 import { ReactNode, FunctionComponent, ReactElement } from 'react';
-import { type ItemBase, type SortingPropTypes } from './MultiSelectPropTypes';
-export interface FilterableMultiSelectProps<Item extends ItemBase> extends SortingPropTypes<Item> {
+import { type MultiSelectSortingProps } from './MultiSelectPropTypes';
+export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType> {
     /**
      * Specify a label to be read by screen readers on the container node
      * @deprecated
@@ -15,6 +15,12 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
     'aria-label'?: string;
     /** @deprecated */
     ariaLabel?: string;
+    /**
+     * **Experimental**: Will attempt to automatically align the floating
+     * element to avoid collisions with the viewport and being clipped by
+     * ancestor elements.
+     */
+    autoAlign?: boolean;
     className?: string;
     /**
      * Specify the text that should be read for screen readers that describes total items selected
@@ -35,14 +41,14 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
     /**
      * Additional props passed to Downshift
      */
-    downshiftProps?: UseMultipleSelectionProps<Item>;
+    downshiftProps?: UseMultipleSelectionProps<ItemType>;
     /**
      * Default sorter is assigned if not provided.
      */
-    filterItems(items: readonly Item[], extra: {
+    filterItems(items: readonly ItemType[], extra: {
         inputValue: string | null;
-        itemToString: NonNullable<UseMultipleSelectionProps<Item>['itemToString']>;
-    }): Item[];
+        itemToString: NonNullable<UseMultipleSelectionProps<ItemType>['itemToString']>;
+    }): ItemType[];
     /**
      * Specify whether the title text should be hidden or not
      */
@@ -60,7 +66,7 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
      * Allow users to pass in arbitrary items from their collection that are
      * pre-selected
      */
-    initialSelectedItems?: Item[];
+    initialSelectedItems?: ItemType[];
     /**
      * Is the current selection invalid?
      */
@@ -73,7 +79,7 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
      * Function to render items as custom components instead of strings.
      * Defaults to null and is overridden by a getter
      */
-    itemToElement?: FunctionComponent<Item>;
+    itemToElement?: FunctionComponent<ItemType>;
     /**
      * Helper function passed to downshift that allows the library to render
      * a given item to a string label.
@@ -81,12 +87,12 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
      * By default, it extracts the `label` field from a given item
      * to serve as the item label in the list.
      */
-    itemToString?(item: Item | null): string;
+    itemToString?(item: ItemType | null): string;
     /**
      * We try to stay as generic as possible here to allow individuals to pass
      * in a collection of whatever kind of data structure they prefer
      */
-    items: Item[];
+    items: ItemType[];
     /**
      * @deprecated `true` to use the light version.
      */
@@ -102,13 +108,13 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
      * consuming component what kind of internal state changes are occurring.
      */
     onChange?(changes: {
-        selectedItems: Item[];
+        selectedItems: ItemType[];
     }): void;
     /**
      * A utility for this controlled component
      * to communicate to the currently typed input.
      */
-    onInputValueChange?: UseComboboxProps<Item>['onInputValueChange'];
+    onInputValueChange?: UseComboboxProps<ItemType>['onInputValueChange'];
     /**
      * `onMenuChange` is a utility for this controlled component to communicate to a
      * consuming component that the menu was opened(`true`)/closed(`false`).
@@ -133,7 +139,7 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
     /**
      * For full control of the selected items
      */
-    selectedItems?: Item[];
+    selectedItems?: ItemType[];
     /**
      * Specify the size of the ListBox.
      * Currently, supports either `sm`, `md` or `lg` as an option.
@@ -167,7 +173,7 @@ export interface FilterableMultiSelectProps<Item extends ItemBase> extends Sorti
     warnText?: ReactNode;
 }
 declare const FilterableMultiSelect: {
-    <Item extends ItemBase>(props: FilterableMultiSelectProps<Item>): ReactElement;
+    <ItemType>(props: FilterableMultiSelectProps<ItemType>): ReactElement;
     propTypes?: any;
     contextTypes?: any;
     defaultProps?: any;

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState, useRef, useEffect } from 'react';
+import React__default, { useContext, useState, useLayoutEffect, useRef, useEffect } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
@@ -24,6 +24,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useSelection } from '../../internal/Selection.js';
+import { useFloating, flip, size, autoUpdate } from '@floating-ui/react';
 import { match } from '../../internal/keyboard/match.js';
 import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
@@ -53,6 +54,7 @@ const {
 } = useMultipleSelection.stateChangeTypes;
 const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
+    autoAlign = false,
     className: containerClassName,
     clearSelectionDescription = 'Total items selected: ',
     clearSelectionText = 'To clear selection, press Delete or Backspace',
@@ -82,7 +84,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     type,
     selectionFeedback = 'top-after-reopen',
     selectedItems: selected,
-    size,
+    size: size$1,
     sortItems = defaultSortItems,
     translateWithId,
     useTitleInItem,
@@ -109,6 +111,42 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     onChange,
     selectedItems: selected
   });
+  const {
+    refs,
+    floatingStyles,
+    middlewareData
+  } = useFloating(autoAlign ? {
+    placement: direction,
+    // The floating element is positioned relative to its nearest
+    // containing block (usually the viewport). It will in many cases also
+    // “break” the floating element out of a clipping ancestor.
+    // https://floating-ui.com/docs/misc#clipping
+    strategy: 'fixed',
+    // Middleware order matters, arrow should be last
+    middleware: [flip({
+      crossAxis: false
+    }), size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    })],
+    whileElementsMounted: autoUpdate
+  } : {});
+  useLayoutEffect(() => {
+    if (autoAlign) {
+      Object.keys(floatingStyles).forEach(style => {
+        if (refs.floating.current) {
+          refs.floating.current.style[style] = floatingStyles[style];
+        }
+      });
+    }
+  }, [autoAlign, floatingStyles, refs.floating, middlewareData, open]);
   const textInput = useRef(null);
   const filterableMultiSelectInstanceId = useId();
   const prefix = usePrefix();
@@ -116,6 +154,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     setIsOpen(open);
     setPrevOpen(open);
   }
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const sortedItems = sortItems(filterItems(items, {
     itemToString,
     inputValue
@@ -453,9 +493,10 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     warn: warn,
     warnText: warnText,
     isOpen: isOpen,
-    size: size
+    size: size$1
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${prefix}--list-box__field`
+    className: `${prefix}--list-box__field`,
+    ref: refs.setReference
   }, controlledSelectedItems.length > 0 &&
   /*#__PURE__*/
   // @ts-expect-error: It is expecting a non-required prop called: "onClearSelection"
@@ -496,7 +537,9 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
     // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
+  }))), normalizedSlug, /*#__PURE__*/React__default.createElement(ListBox.Menu, _extends({}, menuProps, {
+    ref: refs.setFloating
+  }), isOpen ? sortedItems.map((item, index) => {
     const isChecked = controlledSelectedItems.filter(selected => isEqual(selected, item)).length > 0;
     const itemProps = getItemProps({
       item,
@@ -544,6 +587,12 @@ FilterableMultiSelect.propTypes = {
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate(PropTypes.string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
+  /**
+   * **Experimental**: Will attempt to automatically align the floating
+   * element to avoid collisions with the viewport and being clipped by
+   * ancestor elements.
+   */
+  autoAlign: PropTypes.bool,
   /**
    * Specify the text that should be read for screen readers that describes total items selected
    */

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -7,50 +7,19 @@
 import { UseSelectProps } from 'downshift';
 import React, { ReactNode } from 'react';
 import { ListBoxSize, ListBoxType } from '../ListBox';
+import { MultiSelectSortingProps } from './MultiSelectPropTypes';
 import { ListBoxProps } from '../ListBox/ListBox';
 import type { InternationalProps } from '../../types/common';
-interface SharedOptions {
-    locale: string;
-}
-interface DownshiftTypedProps<ItemType> {
-    itemToString?(item: ItemType): string;
-}
-interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
-    compareItems(item1: ItemType, item2: ItemType, options: SharedOptions): number;
-    selectedItems: ItemType[];
-}
-interface MultiSelectSortingProps<ItemType> {
-    /**
-     * Provide a compare function that is used to determine the ordering of
-     * options. See 'sortItems' for more control.
-     */
-    compareItems?(item1: ItemType, item2: ItemType, options: SharedOptions): number;
-    /**
-     * Provide a method that sorts all options in the control. Overriding this
-     * prop means that you also have to handle the sort logic for selected versus
-     * un-selected items. If you just want to control ordering, consider the
-     * `compareItems` prop instead.
-     *
-     * The return value should be a number whose sign indicates the relative order
-     * of the two elements: negative if a is less than b, positive if a is greater
-     * than b, and zero if they are equal.
-     *
-     * sortItems :
-     *   (items: Array<Item>, {
-     *     selectedItems: Array<Item>,
-     *     itemToString: Item => string,
-     *     compareItems: (itemA: string, itemB: string, {
-     *       locale: string
-     *     }) => number,
-     *     locale: string,
-     *   }) => Array<Item>
-     */
-    sortItems?(items: ReadonlyArray<ItemType>, options: SortItemsOptions<ItemType>): ItemType[];
-}
 interface OnChangeData<ItemType> {
     selectedItems: ItemType[] | null;
 }
 export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, InternationalProps<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
+    /**
+     * **Experimental**: Will attempt to automatically align the floating
+     * element to avoid collisions with the viewport and being clipped by
+     * ancestor elements.
+     */
+    autoAlign?: boolean;
     className?: string;
     /**
      * Specify the text that should be read for screen readers that describes that all items are deleted

package/es/components/MultiSelect/MultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { useSelect } from 'downshift';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useRef, useState, useMemo } from 'react';
+import React__default, { useContext, useRef, useState, useLayoutEffect, useMemo } from 'react';
 import ListBox from '../ListBox/index.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
@@ -23,6 +23,7 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { noopFn } from '../../internal/noopFn.js';
+import { useFloating, flip, size, autoUpdate } from '@floating-ui/react';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
 import { Delete, Escape, Space, ArrowDown, Enter } from '../../internal/keyboard/keys.js';
@@ -57,6 +58,7 @@ const defaultItemToString = item => {
 };
 const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
+    autoAlign = false,
     className: containerClassName,
     id,
     items,
@@ -67,7 +69,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     helperText,
     label,
     type = 'default',
-    size,
+    size: size$1,
     disabled = false,
     initialSelectedItems = [],
     sortItems = defaultSortItems,
@@ -116,6 +118,42 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     onChange,
     selectedItems: selected
   });
+  const {
+    refs,
+    floatingStyles,
+    middlewareData
+  } = useFloating(autoAlign ? {
+    placement: direction,
+    // The floating element is positioned relative to its nearest
+    // containing block (usually the viewport). It will in many cases also
+    // “break” the floating element out of a clipping ancestor.
+    // https://floating-ui.com/docs/misc#clipping
+    strategy: 'fixed',
+    // Middleware order matters, arrow should be last
+    middleware: [flip({
+      crossAxis: false
+    }), size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    })],
+    whileElementsMounted: autoUpdate
+  } : {});
+  useLayoutEffect(() => {
+    if (autoAlign) {
+      Object.keys(floatingStyles).forEach(style => {
+        if (refs.floating.current) {
+          refs.floating.current.style[style] = floatingStyles[style];
+        }
+      });
+    }
+  }, [autoAlign, floatingStyles, refs.floating, middlewareData, open]);
 
   // Filter out items with an object having undefined values
   const filteredItems = useMemo(() => {
@@ -367,7 +405,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     onFocus: isFluid ? handleFocus : undefined,
     onBlur: isFluid ? handleFocus : undefined,
     type: type,
-    size: size,
+    size: size$1,
     className: className,
     disabled: disabled,
     light: light,
@@ -382,7 +420,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }), showWarning && /*#__PURE__*/React__default.createElement(WarningAltFilled, {
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: multiSelectFieldWrapperClasses
+    className: multiSelectFieldWrapperClasses,
+    ref: refs.setReference
   }, selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn,
@@ -405,7 +444,9 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps(), isOpen &&
+  })), normalizedSlug), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps({
+    ref: refs.setFloating
+  }), isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(filteredItems, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
@@ -444,6 +485,12 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 MultiSelect.displayName = 'MultiSelect';
 MultiSelect.propTypes = {
   ...sortingPropTypes,
+  /**
+   * **Experimental**: Will attempt to automatically align the floating
+   * element to avoid collisions with the viewport and being clipped by
+   * ancestor elements.
+   */
+  autoAlign: PropTypes.bool,
   /**
    * Provide a custom class name to be added to the outermost node in the
    * component