@carbon/react 1.60.2 → 1.61.0-rc.0

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

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

@@ -34,29 +34,32 @@ export declare const sortingPropTypes: {
      */
     sortItems: PropTypes.Requireable<(...args: any[]) => any>;
 };
-export interface ItemBase {
-    disabled?: boolean;
+interface DownshiftTypedProps<ItemType> {
+    itemToString?(item: ItemType): string;
 }
-export interface SortingPropTypes<Item extends ItemBase> {
+interface SharedOptions {
+    locale: string;
+}
+export interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
+    compareItems(item1: ItemType, item2: ItemType, options: SharedOptions): number;
+    selectedItems: ItemType[];
+}
+export interface MultiSelectSortingProps<ItemType> {
     /**
-     * Provide a compare function that is used
-     * to determine the ordering of options.
+     * Provide a compare function that is used to determine the ordering of
+     * options. See 'sortItems' for more control.
      */
-    compareItems(itemA: string, itemB: string, ctx: {
-        locale: string;
-    }): number;
+    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: Item[], state: {
-        selectedItems: Item[];
-        itemToString(item: Item): string;
-        compareItems(itemA: string, itemB: string, ctx: {
-            locale: string;
-        }): number;
-        locale: string;
-    }): Item[];
+    sortItems?(items: ReadonlyArray<ItemType>, options: SortItemsOptions<ItemType>): ItemType[];
 }
+export {};

package/es/components/OverflowMenu/OverflowMenu.js

@@ -127,7 +127,6 @@ class OverflowMenu extends React__default.Component {
       this.setState({
         click: true
       });
-      evt.stopPropagation();
       if (!this._menuBody || !this._menuBody.contains(evt.target)) {
         this.setState({
           open: !this.state.open

package/es/components/OverflowMenu/next/index.d.ts

@@ -6,6 +6,10 @@
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
 interface OverflowMenuProps {
+    /**
+     * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+     */
+    autoAlign?: boolean;
     /**
      * A collection of MenuItems to be rendered within this OverflowMenu.
      */

package/es/components/OverflowMenu/next/index.js

@@ -6,13 +6,15 @@
  */
 
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef } from 'react';
+import React__default, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { OverflowMenuVertical } from '@carbon/icons-react';
+import { useFloating, flip, autoUpdate } from '@floating-ui/react';
 import { IconButton } from '../../IconButton/index.js';
 import { Menu } from '../../Menu/Menu.js';
 import '../../Menu/MenuItem.js';
+import mergeRefs from '../../../tools/mergeRefs.js';
 import { useId } from '../../../internal/useId.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 import { useAttachedMenu } from '../../../internal/useAttachedMenu.js';
@@ -20,6 +22,7 @@ import { useAttachedMenu } from '../../../internal/useAttachedMenu.js';
 const defaultSize = 'md';
 const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMenu(_ref, forwardRef) {
   let {
+    autoAlign = false,
     children,
     className,
     label = 'Options',
@@ -29,6 +32,26 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     tooltipAlignment,
     ...rest
   } = _ref;
+  const {
+    refs,
+    floatingStyles,
+    placement,
+    middlewareData
+  } = useFloating(autoAlign ? {
+    placement: menuAlignment,
+    // 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({
+      fallbackAxisSideDirection: 'start',
+      fallbackPlacements: ['top-start', 'top-end', 'bottom-start', 'bottom-end']
+    })],
+    whileElementsMounted: autoUpdate
+  } : {} // When autoAlign is turned off, floating-ui will not be used
+  );
   const id = useId('overflowmenu');
   const prefix = usePrefix();
   const triggerRef = useRef(null);
@@ -40,6 +63,15 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     handleMousedown,
     handleClose
   } = useAttachedMenu(triggerRef);
+  useEffect(() => {
+    if (autoAlign) {
+      Object.keys(floatingStyles).forEach(style => {
+        if (refs.floating.current) {
+          refs.floating.current.style[style] = floatingStyles[style];
+        }
+      });
+    }
+  }, [floatingStyles, autoAlign, refs.floating, open, placement, middlewareData]);
   function handleTriggerClick() {
     if (triggerRef.current) {
       hookOnClick();
@@ -50,6 +82,7 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
   const triggerClasses = cx(`${prefix}--overflow-menu`, {
     [`${prefix}--overflow-menu--open`]: open
   }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
+  const floatingRef = mergeRefs(triggerRef, refs.setReference);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: containerClasses,
     "aria-owns": open ? id : undefined,
@@ -61,17 +94,19 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
     className: triggerClasses,
     onClick: handleTriggerClick,
     onMouseDown: handleMousedown,
-    ref: triggerRef,
+    ref: floatingRef,
     label: label,
     align: tooltipAlignment
   }, /*#__PURE__*/React__default.createElement(IconElement, {
     className: `${prefix}--overflow-menu__icon`
   })), /*#__PURE__*/React__default.createElement(Menu, {
     containerRef: triggerRef,
+    ref: refs.setFloating,
     menuAlignment: menuAlignment,
     className: menuClasses,
     id: id,
     size: size,
+    legacyAutoalign: !autoAlign,
     open: open,
     onClose: handleClose,
     x: x,
@@ -80,6 +115,10 @@ const OverflowMenu = /*#__PURE__*/React__default.forwardRef(function OverflowMen
   }, children));
 });
 OverflowMenu.propTypes = {
+  /**
+   * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+   */
+  autoAlign: PropTypes.bool,
   /**
    * A collection of MenuItems to be rendered within this OverflowMenu.
    */

package/es/components/UIShell/HeaderContainer.d.ts

@@ -6,15 +6,17 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
-interface HeaderContainerRenderProps {
+export interface HeaderContainerRenderProps {
     isSideNavExpanded: boolean;
     onClickSideNavExpand: () => void;
 }
-export interface HeaderContainerProps {
+export type HeaderContainerProps<P extends HeaderContainerRenderProps> = {
     isSideNavExpanded?: boolean;
-    render: React.ComponentType<HeaderContainerRenderProps>;
-}
-declare function HeaderContainer({ render: Children, isSideNavExpanded, }: HeaderContainerProps): import("react/jsx-runtime").JSX.Element;
+    render: React.ComponentType<P>;
+} & {
+    [K in keyof Omit<P, keyof HeaderContainerRenderProps>]: P[K];
+};
+declare function HeaderContainer<P extends HeaderContainerRenderProps>({ render: Children, isSideNavExpanded, ...rest }: HeaderContainerProps<P>): import("react/jsx-runtime").JSX.Element;
 declare namespace HeaderContainer {
     var propTypes: {
         /**
@@ -22,10 +24,10 @@ declare namespace HeaderContainer {
          */
         isSideNavExpanded: PropTypes.Requireable<boolean>;
         /**
-         * A function or component that is passed an object parameter with two
-         * properties: `isSideNavExpanded` and `onClickSideNavExpand`. The function or
-         * component can then use those properties to within the components it
-         * returns, such as with the HeaderMenuButton and SideNav components.
+         * A function or a component that is invoked with `isSideNavExpanded` and `onClickSideNavExpand`.
+         * The function or component can then use those properties to within the components it
+         * returns, such as with the HeaderMenuButton and SideNav components. Additional props will also be passed
+         * into this component for convenience.
          */
         render: PropTypes.Validator<NonNullable<PropTypes.ReactComponentLike>>;
     };

package/es/components/UIShell/HeaderContainer.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useState, useCallback } from 'react';
 import { useWindowEvent } from '../../internal/useEvent.js';
@@ -14,7 +15,8 @@ import { Escape } from '../../internal/keyboard/keys.js';
 function HeaderContainer(_ref) {
   let {
     render: Children,
-    isSideNavExpanded = false
+    isSideNavExpanded = false,
+    ...rest
   } = _ref;
   //state for expandable sidenav
   const [isSideNavExpandedState, setIsSideNavExpandedState] = useState(isSideNavExpanded);
@@ -26,10 +28,10 @@ function HeaderContainer(_ref) {
   const handleHeaderMenuButtonClick = useCallback(() => {
     setIsSideNavExpandedState(prevIsSideNavExpanded => !prevIsSideNavExpanded);
   }, [setIsSideNavExpandedState]);
-  return /*#__PURE__*/React__default.createElement(Children, {
+  return /*#__PURE__*/React__default.createElement(Children, _extends({}, rest, {
     isSideNavExpanded: isSideNavExpandedState,
     onClickSideNavExpand: handleHeaderMenuButtonClick
-  });
+  }));
 }
 HeaderContainer.propTypes = {
   /**
@@ -37,10 +39,10 @@ HeaderContainer.propTypes = {
    */
   isSideNavExpanded: PropTypes.bool,
   /**
-   * A function or component that is passed an object parameter with two
-   * properties: `isSideNavExpanded` and `onClickSideNavExpand`. The function or
-   * component can then use those properties to within the components it
-   * returns, such as with the HeaderMenuButton and SideNav components.
+   * A function or a component that is invoked with `isSideNavExpanded` and `onClickSideNavExpand`.
+   * The function or component can then use those properties to within the components it
+   * returns, such as with the HeaderMenuButton and SideNav components. Additional props will also be passed
+   * into this component for convenience.
    */
   render: PropTypes.elementType.isRequired
 };

package/lib/components/ComboBox/ComboBox.js

@@ -392,6 +392,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   // when both the message is supplied *and* when the component is in
   // the matching state (invalid, warn, etc).
   const ariaDescribedBy = invalid && invalidText && invalidTextId || warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
+  const menuProps = React.useMemo(() => getMenuProps({
+    'aria-label': deprecatedAriaLabel || ariaLabel,
+    ref: autoAlign ? refs.setFloating : null
+  }), [autoAlign, deprecatedAriaLabel, ariaLabel]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
@@ -409,7 +413,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     light: light,
     size: size,
     warn: warn,
-    ref: refs.setReference,
+    ref: autoAlign ? refs.setReference : null,
     warnText: warnText,
     warnTextId: warnTextId
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -422,7 +426,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-haspopup": "listbox",
     title: textInput?.current?.value
   }, getInputProps({
-    'aria-controls': isOpen ? undefined : getMenuProps().id,
+    'aria-controls': isOpen ? undefined : menuProps.id,
     placeholder,
     ref: {
       ...mergeRefs["default"](textInput, ref)
@@ -484,11 +488,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, _rollupPluginBabelHelpers["extends"]({}, getMenuProps({
-    'aria-label': deprecatedAriaLabel || ariaLabel
-  }), {
-    ref: mergeRefs["default"](getMenuProps().ref, refs.setFloating)
-  }), isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {
+  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {
     const isObject = item !== null && typeof item === 'object';
     const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
     const itemProps = getItemProps({

package/lib/components/ComposedModal/ComposedModal.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var reactIs = require('react-is');
 var PropTypes = require('prop-types');
+var index = require('../Layer/index.js');
 var ModalHeader = require('./ModalHeader.js');
 var ModalFooter = require('./ModalFooter.js');
 var debounce = require('lodash.debounce');
@@ -23,7 +24,7 @@ var toggleClass = require('../../tools/toggleClass.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var index = require('../FeatureFlags/index.js');
+var index$1 = require('../FeatureFlags/index.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -70,7 +71,7 @@ const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function Mod
     tabIndex: 0,
     role: 'region'
   } : {};
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__default["default"].createElement(index.Layer, _rollupPluginBabelHelpers["extends"]({
     className: contentClass
   }, hasScrollingContentProps, rest, {
     ref: mergeRefs["default"](contentRef, ref)
@@ -126,7 +127,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   const button = React.useRef(null);
   const startSentinel = React.useRef(null);
   const endSentinel = React.useRef(null);
-  const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
+  const focusTrapWithoutSentinels = index$1.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
 
   // Keep track of modal open/close state
   // and propagate it to the document.body
@@ -260,7 +261,8 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
       size: 'sm'
     });
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement(index.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    level: 0,
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,

package/lib/components/DatePicker/DatePicker.js

@@ -188,6 +188,8 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
 
   // 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;
@@ -367,9 +369,12 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     calendarRef.current = calendar;
     function handleArrowDown(event) {
       if (match.match(event, keys.Escape)) {
-        calendar.calendarContainer.classList.remove('open');
+        calendar?.calendarContainer?.classList.remove('open');
       }
       if (match.match(event, keys.ArrowDown)) {
+        if (event.target == endInputField.current) {
+          calendar?.calendarContainer?.classList.add('open');
+        }
         const {
           calendarContainer,
           selectedDateElem: fpSelectedDateElem,

package/lib/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/lib/components/Dropdown/Dropdown.js

@@ -22,6 +22,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var react = require('@floating-ui/react');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -53,6 +54,7 @@ const defaultItemToString = item => {
 };
 const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
+    autoAlign = false,
     className: containerClassName,
     disabled = false,
     direction = 'bottom',
@@ -83,6 +85,40 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     slug,
     ...other
   } = _ref;
+  const {
+    refs,
+    floatingStyles
+  } = react.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: [react.size({
+      apply(_ref2) {
+        let {
+          rects,
+          elements
+        } = _ref2;
+        Object.assign(elements.floating.style, {
+          width: `${rects.reference.width}px`
+        });
+      }
+    }), react.flip()],
+    whileElementsMounted: react.autoUpdate
+  } : {} // When autoAlign is turned off, floating-ui will not be used
+  );
+  React.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.usePrefix();
   const {
     isFluid
@@ -157,7 +193,8 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     [`${prefix}--dropdown--light`]: light,
     [`${prefix}--dropdown--readonly`]: readOnly,
     [`${prefix}--dropdown--${size}`]: size,
-    [`${prefix}--list-box--up`]: direction === 'top'
+    [`${prefix}--list-box--up`]: direction === 'top',
+    [`${prefix}--dropdown--autoalign`]: autoAlign
   });
   const titleClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,
@@ -184,10 +221,10 @@ const Dropdown = /*#__PURE__*/React__default["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
@@ -237,6 +274,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     }
   };
   const menuProps = getMenuProps();
+  const menuRef = mergeRefs["default"](menuProps.ref, refs.setFloating);
 
   // Slug is always size `mini`
   let normalizedSlug;
@@ -261,6 +299,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     warnText: warnText,
     light: light,
     isOpen: isOpen,
+    ref: refs.setReference,
     id: id
   }, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
@@ -283,7 +322,9 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen && items.map((item, index$1) => {
+  })), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, _rollupPluginBabelHelpers["extends"]({}, menuProps, {
+    ref: menuRef
+  }), isOpen && items.map((item, index$1) => {
     const isObject = item !== null && typeof item === 'object';
     const itemProps = getItemProps({
       item,
@@ -318,6 +359,10 @@ Dropdown.propTypes = {
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].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__default["default"].bool,
   /**
    * Provide a custom className to be applied on the cds--dropdown node
    */

package/lib/components/Modal/Modal.js

@@ -19,13 +19,14 @@ var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var ButtonSet = require('../ButtonSet/ButtonSet.js');
 var InlineLoading = require('../InlineLoading/InlineLoading.js');
+var index$1 = require('../Layer/index.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
 var debounce = require('lodash.debounce');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var index$1 = require('../IconButton/index.js');
+var index$2 = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var index = require('../FeatureFlags/index.js');
@@ -246,7 +247,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   }
   const modalButton = /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, {
+  }, /*#__PURE__*/React__default["default"].createElement(index$2.IconButton, {
     className: modalCloseButtonClass,
     label: closeButtonLabel,
     onClick: onRequestClose,
@@ -277,7 +278,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     as: "h3",
     id: modalHeadingId,
     className: `${prefix}--modal-header__heading`
-  }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  }, modalHeading), normalizedSlug, !passiveModal && modalButton), /*#__PURE__*/React__default["default"].createElement(index$1.Layer, _rollupPluginBabelHelpers["extends"]({
     ref: contentRef,
     id: modalBodyId,
     className: contentClasses
@@ -312,7 +313,8 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     className: `${prefix}--inline-loading--btn`,
     onSuccess: onLoadingSuccess
   }))));
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement(index$1.Layer, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    level: 0,
     onKeyDown: handleKeyDown,
     onMouseDown: handleMousedown,
     onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},