@carbon/react 1.60.3 → 1.61.0-rc.1

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/Pagination/Pagination.js

@@ -93,7 +93,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     [`${prefix}--pagination--${size}`]: size,
     [customClassName]: !!customClassName
   });
-  const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : NaN;
+  const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : 1;
   const backButtonDisabled = disabled || page === 1;
   const backButtonClasses = cx({
     [`${prefix}--pagination__button`]: true,
@@ -218,7 +218,7 @@ const Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_r
     text: String(sizeObj.text)
   }))), /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--pagination__text ${prefix}--pagination__items-count`
-  }, pagesUnknown || !totalItems ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default.createElement("div", {
+  }, pagesUnknown || !totalItems ? totalItems === 0 ? itemRangeText(0, 0, 0) : itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--pagination__right`
   }, pagesUnknown ? /*#__PURE__*/React__default.createElement("span", {
     className: `${prefix}--pagination__text ${prefix}--pagination__page-text ${prefix}--pagination__unknown-pages-text`

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/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 : () => {},

package/lib/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;