@carbon/react 1.87.1 → 1.89.0-rc.0

package/es/internal/Selection.d.ts

@@ -18,6 +18,7 @@ interface UseSelectionProps<ItemType> {
 export declare const useSelection: <ItemType>({ disabled, onChange, initialSelectedItems, selectedItems: controlledItems, selectAll, filteredItems, }: UseSelectionProps<ItemType>) => {
     clearSelection: () => void;
     onItemChange: (item: ItemType) => void;
+    toggleAll: (items: ItemType[]) => void;
     selectedItems: ItemType[];
 };
 interface SelectionRenderProps<ItemType> {

package/es/internal/Selection.js

@@ -90,6 +90,15 @@ const useSelection = ({
       selectedItems: []
     });
   }, [disabled, isControlled]);
+  const toggleAll = useCallback(items => {
+    callOnChangeHandler({
+      isControlled,
+      isMounted: isMounted.current,
+      onChangeHandlerControlled: savedOnChange.current,
+      onChangeHandlerUncontrolled: setUncontrolledItems,
+      selectedItems: items
+    });
+  }, [isControlled]);
   useEffect(() => {
     savedOnChange.current = onChange;
   }, [onChange]);
@@ -109,6 +118,7 @@ const useSelection = ({
   return {
     clearSelection,
     onItemChange,
+    toggleAll,
     selectedItems
   };
 };

package/lib/components/AILabel/index.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
 export type AILabelContentProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const AILabelContent: React.ForwardRefExoticComponent<AILabelContentProps & React.RefAttributes<unknown>>;
 export type AILabelActionsProps = React.HTMLAttributes<HTMLSpanElement>;
@@ -13,9 +14,9 @@ export declare const AILabelActions: React.ForwardRefExoticComponent<AILabelActi
  * Deprecated popover alignment values.
  * @deprecated Use NewPopoverAlignment instead.
  */
-export type DeprecatedAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
-export type NewAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
-export type Alignment = DeprecatedAlignment | NewAlignment;
+export type DeprecatedAlignment = DeprecatedPopoverAlignment;
+export type NewAlignment = NewPopoverAlignment;
+export type Alignment = PopoverAlignment;
 export interface AILabelProps {
     AILabelContent?: React.ReactNode;
     aiText?: string;

package/lib/components/AILabel/index.js

@@ -188,7 +188,9 @@ AILabel.propTypes = {
    */
   'aria-label': PropTypes.string,
   /**
-   * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
+   * Will auto-align the popover. This prop is currently experimental and is
+   * subject to future changes. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/lib/components/Button/Button.js

@@ -113,7 +113,9 @@ Button.propTypes = {
    */
   as: PropTypes.oneOfType([PropTypes.func, PropTypes.string, PropTypes.elementType]),
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/lib/components/CodeSnippet/CodeSnippet.d.ts

@@ -6,16 +6,18 @@
  */
 import PropTypes from 'prop-types';
 import { PropsWithChildren } from 'react';
-export type DeprecatedCodeSnippetAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
-export type NewCodeSnippetAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
-export type CodeSnippetAlignment = DeprecatedCodeSnippetAlignment | NewCodeSnippetAlignment;
+import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
+export type DeprecatedCodeSnippetAlignment = DeprecatedPopoverAlignment;
+export type NewCodeSnippetAlignment = NewPopoverAlignment;
+export type CodeSnippetAlignment = PopoverAlignment;
 export interface CodeSnippetProps {
     /**
      * Specify how the trigger should align with the tooltip
      */
     align?: CodeSnippetAlignment;
     /**
-     * **Experimental**: Will attempt to automatically align the tooltip
+     * **Experimental**: Will attempt to automatically align the tooltip. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**
@@ -122,7 +124,9 @@ declare namespace CodeSnippet {
          */
         ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
         /**
-         * **Experimental**: Will attempt to automatically align the tooltip
+         * **Experimental**: Will attempt to automatically align the tooltip. Requires
+         * React v17+
+         * @see https://github.com/carbon-design-system/carbon/issues/18714
          */
         autoAlign: PropTypes.Requireable<boolean>;
         /**

package/lib/components/CodeSnippet/CodeSnippet.js

@@ -272,7 +272,9 @@ CodeSnippet.propTypes = {
    */
   ariaLabel: deprecate.deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/lib/components/ComboBox/ComboBox.d.ts

@@ -41,7 +41,8 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
     /**
      * **Experimental**: Will attempt to automatically align the floating
      * element to avoid collisions with the viewport and being clipped by
-     * ancestor elements.
+     * ancestor elements. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**

package/lib/components/ComboBox/ComboBox.js

@@ -780,7 +780,8 @@ ComboBox.propTypes = {
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements.
+   * ancestor elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/lib/components/ContainedList/ContainedList.d.ts

@@ -7,9 +7,9 @@
 import React, { ReactNode } from 'react';
 import ContainedListItem from './ContainedListItem';
 declare const variants: readonly ["on-page", "disclosed"];
-export interface ContainedListType extends React.FC<ContainedListProps> {
+export type ContainedListType = React.FC<ContainedListProps> & {
     ContainedListItem: typeof ContainedListItem;
-}
+};
 export type Variants = (typeof variants)[number];
 export interface ContainedListProps {
     /**

package/lib/components/ContentSwitcher/ContentSwitcher.d.ts

@@ -6,12 +6,7 @@
  */
 import PropTypes from 'prop-types';
 import { type HTMLAttributes, type ReactElement } from 'react';
-export interface SwitchEventHandlersParams {
-    index?: number;
-    name?: string | number;
-    text?: string;
-    key?: string | number;
-}
+import type { SwitchEventHandlersParams } from '../Switch/Switch';
 export interface ContentSwitcherProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
     /**
      * Pass in Switch components to be rendered in the ContentSwitcher

package/lib/components/Copy/Copy.d.ts

@@ -6,16 +6,18 @@
  */
 import PropTypes from 'prop-types';
 import React, { AnimationEventHandler, MouseEventHandler, PropsWithChildren } from 'react';
-export type DeprecatedCopyAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
-export type NewCopyAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
-export type CopyAlignment = DeprecatedCopyAlignment | NewCopyAlignment;
+import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
+export type DeprecatedCopyAlignment = DeprecatedPopoverAlignment;
+export type NewCopyAlignment = NewPopoverAlignment;
+export type CopyAlignment = PopoverAlignment;
 export interface CopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Specify how the trigger should align with the tooltip
      */
     align?: CopyAlignment;
     /**
-     * **Experimental**: Will attempt to automatically align the tooltip
+     * **Experimental**: Will attempt to automatically align the tooltip. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**
@@ -50,7 +52,9 @@ declare namespace Copy {
          */
         align: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
-         * **Experimental**: Will attempt to automatically align the tooltip
+         * **Experimental**: Will attempt to automatically align the tooltip. Requires
+         * React v17+
+         * @see https://github.com/carbon-design-system/carbon/issues/18714
          */
         autoAlign: PropTypes.Requireable<boolean>;
         /**

package/lib/components/Copy/Copy.js

@@ -94,7 +94,9 @@ Copy.propTypes = {
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/lib/components/CopyButton/CopyButton.d.ts

@@ -7,16 +7,18 @@
 import PropTypes from 'prop-types';
 import { MouseEventHandler } from 'react';
 import { ButtonProps } from '../Button';
-export type DeprecatedCopyButtonAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
-export type NewCopyButtonAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
-export type CopyButtonAlignment = DeprecatedCopyButtonAlignment | NewCopyButtonAlignment;
+import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
+export type DeprecatedCopyButtonAlignment = DeprecatedPopoverAlignment;
+export type NewCopyButtonAlignment = NewPopoverAlignment;
+export type CopyButtonAlignment = PopoverAlignment;
 export interface CopyButtonProps extends ButtonProps<'button'> {
     /**
      * Specify how the trigger should align with the tooltip
      */
     align?: CopyButtonAlignment;
     /**
-     * **Experimental**: Will attempt to automatically align the tooltip
+     * **Experimental**: Will attempt to automatically align the tooltip. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**
@@ -51,7 +53,9 @@ declare namespace CopyButton {
          */
         align: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
         /**
-         * **Experimental**: Will attempt to automatically align the tooltip
+         * **Experimental**: Will attempt to automatically align the tooltip. Requires
+         * React v17+
+         * @see https://github.com/carbon-design-system/carbon/issues/18714
          */
         autoAlign: PropTypes.Requireable<boolean>;
         /**

package/lib/components/CopyButton/CopyButton.js

@@ -76,7 +76,9 @@ CopyButton.propTypes = {
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/lib/components/Dropdown/Dropdown.d.ts

@@ -24,7 +24,10 @@ export interface DropdownProps<ItemType> extends Omit<HTMLAttributes<HTMLDivElem
      */
     ariaLabel?: string;
     /**
-     * **Experimental**: Will attempt to automatically align the floating element to avoid collisions with the viewport and being clipped by ancestor elements.
+     * **Experimental**: Will attempt to automatically align the floating element
+     * to avoid collisions with the viewport and being clipped by ancestor
+     * elements. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**

package/lib/components/Dropdown/Dropdown.js

@@ -400,7 +400,10 @@ Dropdown.propTypes = {
    */
   ariaLabel: deprecate.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.
+   * **Experimental**: Will attempt to automatically align the floating element
+   * to avoid collisions with the viewport and being clipped by ancestor
+   * elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**

package/lib/components/FileUploader/FileUploaderButton.js

@@ -67,9 +67,12 @@ function FileUploaderButton({
     }
   }
   function onKeyDown(event) {
-    if (match.matches(event, [keys.Enter, keys.Space]) && inputNode.current) {
-      inputNode.current.value = '';
-      inputNode.current.click();
+    if (match.matches(event, [keys.Enter, keys.Space])) {
+      event.preventDefault();
+      if (inputNode.current) {
+        inputNode.current.value = '';
+        inputNode.current.click();
+      }
     }
   }
   function handleOnChange(event) {

package/lib/components/IconButton/index.d.ts

@@ -6,18 +6,20 @@
  */
 import React, { ReactNode } from 'react';
 import { ButtonSize } from '../Button';
+import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
 export declare const IconButtonKinds: readonly ["primary", "secondary", "ghost", "tertiary"];
 export type IconButtonKind = (typeof IconButtonKinds)[number];
-export type DeprecatedIconButtonAlignment = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'left-bottom' | 'left-top' | 'right-bottom' | 'right-top';
-export type NewIconButtonAlignment = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-end' | 'left-start' | 'right-end' | 'right-start';
-export type IconButtonAlignment = DeprecatedIconButtonAlignment | NewIconButtonAlignment;
+export type DeprecatedIconButtonAlignment = DeprecatedPopoverAlignment;
+export type NewIconButtonAlignment = NewPopoverAlignment;
+export type IconButtonAlignment = PopoverAlignment;
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Specify how the trigger should align with the tooltip
      */
     align?: IconButtonAlignment;
     /**
-     * **Experimental**: Will attempt to automatically align the tooltip
+     * **Experimental**: Will attempt to automatically align the tooltip. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     /**

package/lib/components/IconButton/index.js

@@ -101,7 +101,9 @@ IconButton.propTypes = {
   // new values to match floating-ui
   'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-end', 'left-start', 'right-end', 'right-start']), ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'], mapPopoverAlign.mapPopoverAlign),
   /**
-   * **Experimental**: Will attempt to automatically align the tooltip
+   * **Experimental**: Will attempt to automatically align the tooltip. Requires
+   * React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**
@@ -156,9 +158,6 @@ IconButton.propTypes = {
   /**
    * Provide the label to be rendered inside of the Tooltip. The label will use
    * `aria-labelledby` and will fully describe the child node that is provided.
-   * If the child node already has an `aria-label`, the tooltip will not apply
-   * `aria-labelledby`. If the child node has `aria-labelledby`, that value will
-   * be used instead. Otherwise, the tooltip will use its own ID as the label.
    * This means that if you have text in the child node it will not be
    * announced to the screen reader.
    * If using `badgeCount={0}`, make sure the label explains that there is a

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

@@ -28,7 +28,8 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
     /**
      * **Experimental**: Will attempt to automatically align the floating
      * element to avoid collisions with the viewport and being clipped by
-     * ancestor elements.
+     * ancestor elements. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     className?: string;
@@ -62,7 +63,9 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      */
     downshiftProps?: UseMultipleSelectionProps<ItemType>;
     /**
-     * Default sorter is assigned if not provided.
+     * Provide a method that filters the dropdown options based on the current input. Overriding this
+     * prop means that you have to handle the filtering logic when the user types in the text input.
+     * Otherwise, a default built-in filtering function will be used.
      */
     filterItems?(items: readonly ItemType[], extra: {
         inputValue: string | null;

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -17,6 +17,8 @@ var React = require('react');
 var filter = require('./filter.js');
 var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
 var index$1 = require('../ListBox/index.js');
+var Checkbox = require('../Checkbox/Checkbox.js');
+require('../Checkbox/Checkbox.Skeleton.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -117,16 +119,56 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   const [inputValue, setInputValue] = React.useState('');
   const [topItems, setTopItems] = React.useState(initialSelectedItems ?? []);
   const [inputFocused, setInputFocused] = React.useState(false);
+  const filteredItems = React.useMemo(() => filterItems(items, {
+    itemToString: itemToString$1,
+    inputValue
+  }), [items, inputValue, itemToString$1, filterItems]);
+  const nonSelectAllItems = React.useMemo(() => filteredItems.filter(item => !item.isSelectAll), [filteredItems]);
+  let selectAll = filteredItems.some(item => item.isSelectAll);
+  if ((selected ?? []).length > 0 && selectAll) {
+    console.warn('Warning: `selectAll` should not be used when `selectedItems` is provided. Please pass either `selectAll` or `selectedItems`, not both.');
+    selectAll = false;
+  }
   const {
     selectedItems: controlledSelectedItems,
     onItemChange,
-    clearSelection
+    clearSelection,
+    toggleAll
   } = Selection.useSelection({
     disabled,
     initialSelectedItems,
     onChange,
-    selectedItems: selected
+    selectedItems: selected,
+    selectAll,
+    filteredItems
   });
+  const selectAllStatus = React.useMemo(() => {
+    const selectable = nonSelectAllItems.filter(item => !item.disabled);
+    const nonSelectedCount = selectable.filter(item => !controlledSelectedItems.some(sel => isEqual(sel, item))).length;
+    const totalCount = selectable.length;
+    return {
+      checked: totalCount > 0 && nonSelectedCount === 0,
+      indeterminate: nonSelectedCount > 0 && nonSelectedCount < totalCount
+    };
+  }, [controlledSelectedItems, nonSelectAllItems]);
+  const handleSelectAllClick = React.useCallback(() => {
+    const selectable = nonSelectAllItems.filter(i => !i.disabled);
+    const {
+      checked,
+      indeterminate
+    } = selectAllStatus;
+
+    // clear all options if select-all state is checked or indeterminate
+    if (checked || indeterminate) {
+      const remainingSelectedItems = controlledSelectedItems.filter(sel => !filteredItems.some(e => isEqual(e, sel)));
+      toggleAll(remainingSelectedItems);
+
+      // select all options if select-all state is empty
+    } else {
+      const toSelect = selectable.filter(e => !controlledSelectedItems.some(sel => isEqual(sel, e)));
+      toggleAll([...controlledSelectedItems, ...toSelect]);
+    }
+  }, [nonSelectAllItems, selectAllStatus, controlledSelectedItems, toggleAll]);
   const {
     refs,
     floatingStyles,
@@ -177,10 +219,11 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   // memoize sorted items to reduce unnecessary expensive sort on rerender
   const sortedItems = React.useMemo(() => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return sortItems(filterItems(items, {
-      itemToString: itemToString$1,
-      inputValue
-    }), {
+    const selectAllItem = items.find(item => item.isSelectAll);
+    const selectableRealItems = nonSelectAllItems.filter(item => !item.disabled);
+
+    // Sort only non-select-all items, select-all item must stay at the top
+    const sortedReal = sortItems(nonSelectAllItems, {
       selectedItems: {
         top: controlledSelectedItems,
         fixed: [],
@@ -190,7 +233,13 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
       compareItems,
       locale
     });
-  }, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString$1, compareItems, locale]);
+
+    // Only show select-all-item if there exist non-disabled filtered items to select
+    if (selectAllItem && selectableRealItems.length > 0) {
+      return [selectAllItem, ...sortedReal];
+    }
+    return sortedReal;
+  }, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString$1, compareItems, locale, sortItems, nonSelectAllItems]);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
   const wrapperClasses = cx(`${prefix}--multi-select__wrapper`, `${prefix}--multi-select--filterable__wrapper`, `${prefix}--list-box__wrapper`, containerClassName, {
@@ -313,8 +362,15 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     }
     switch (type) {
       case InputKeyDownEnter:
+        if (sortedItems.length === 0) {
+          return changes;
+        }
         if (changes.selectedItem && changes.selectedItem.disabled !== true) {
-          onItemChange(changes.selectedItem);
+          if (changes.selectedItem.isSelectAll) {
+            handleSelectAllClick();
+          } else {
+            onItemChange(changes.selectedItem);
+          }
         }
         setHighlightedIndex(changes.selectedItem);
         return {
@@ -322,7 +378,9 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
           highlightedIndex: state.highlightedIndex
         };
       case ItemClick:
-        if (changes.selectedItem) {
+        if (changes.selectedItem.isSelectAll) {
+          handleSelectAllClick();
+        } else {
           onItemChange(changes.selectedItem);
         }
         setHighlightedIndex(changes.selectedItem);
@@ -455,6 +513,9 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/React.cloneElement(candidate, {
     size: 'mini'
   }) : null;
+
+  // exclude the select-all item from the count
+  const selectedItemsLength = controlledSelectedItems.filter(item => !item.isSelectAll).length;
   const className = cx(`${prefix}--multi-select`, `${prefix}--combo-box`, `${prefix}--multi-select--filterable`, {
     [`${prefix}--multi-select--invalid`]: invalid,
     [`${prefix}--multi-select--invalid--focused`]: invalid && inputFocused,
@@ -462,7 +523,8 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     [`${prefix}--multi-select--inline`]: inline,
     [`${prefix}--multi-select--selected`]: controlledSelectedItems?.length > 0,
     [`${prefix}--multi-select--filterable--input-focused`]: inputFocused,
-    [`${prefix}--multi-select--readonly`]: readOnly
+    [`${prefix}--multi-select--readonly`]: readOnly,
+    [`${prefix}--multi-select--selectall`]: selectAll
   });
   const labelProps = getLabelProps();
   const buttonProps = getToggleButtonProps({
@@ -600,7 +662,7 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
         textInput.current.focus();
       }
     },
-    selectionCount: controlledSelectedItems.length,
+    selectionCount: selectedItemsLength,
     translateWithId: translateWithId,
     disabled: disabled
   }), /*#__PURE__*/React.createElement("input", _rollupPluginBabelHelpers.extends({
@@ -632,7 +694,14 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
   }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(index$1.default.Menu, menuProps, isOpen ? sortedItems.map((item, index) => {
-    const isChecked = controlledSelectedItems.filter(selected => isEqual(selected, item)).length > 0;
+    let isChecked;
+    let isIndeterminate = false;
+    if (item.isSelectAll) {
+      isChecked = selectAllStatus.checked;
+      isIndeterminate = selectAllStatus.indeterminate;
+    } else {
+      isChecked = controlledSelectedItems.filter(selected => isEqual(selected, item)).length > 0;
+    }
     const itemProps = getItemProps({
       item,
       ['aria-selected']: isChecked
@@ -652,20 +721,23 @@ const FilterableMultiSelect = /*#__PURE__*/React.forwardRef(function FilterableM
     return /*#__PURE__*/React.createElement(index$1.default.MenuItem, _rollupPluginBabelHelpers.extends({
       key: itemProps.id,
       "aria-label": itemText,
-      isActive: isChecked,
+      isActive: isChecked && !item['isSelectAll'],
       isHighlighted: highlightedIndex === index,
       title: itemText,
       disabled: disabled
     }, modifiedItemProps), /*#__PURE__*/React.createElement("div", {
       className: `${prefix}--checkbox-wrapper`
-    }, /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement(Checkbox.default, {
+      id: `${itemProps.id}-item`,
+      labelText: ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
+        key: itemProps.id
+      }, item)) : itemText,
+      checked: isChecked,
       title: useTitleInItem ? itemText : undefined,
-      className: `${prefix}--checkbox-label`,
-      "data-contained-checkbox-state": isChecked,
-      id: `${itemProps.id}-item`
-    }, ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _rollupPluginBabelHelpers.extends({
-      key: itemProps.id
-    }, item)) : itemText)));
+      indeterminate: isIndeterminate,
+      disabled: disabled,
+      tabIndex: -1
+    })));
   }) : null)), !inline && !invalid && !warn ? helper : null);
 });
 FilterableMultiSelect.displayName = 'FilterableMultiSelect';
@@ -683,7 +755,8 @@ FilterableMultiSelect.propTypes = {
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements.
+   * ancestor elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**
@@ -698,6 +771,12 @@ FilterableMultiSelect.propTypes = {
    * **Experimental**: Provide a decorator component to be rendered inside the `FilterableMultiSelect` component
    */
   decorator: PropTypes.node,
+  /**
+   * Provide a method that filters the dropdown options based on the current input. Overriding this
+   * prop means that you have to handle the filtering logic when the user types in the text input.
+   * Otherwise, a default built-in filtering function will be used.
+   */
+  filterItems: PropTypes.func,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -17,7 +17,8 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
     /**
      * **Experimental**: Will attempt to automatically align the floating
      * element to avoid collisions with the viewport and being clipped by
-     * ancestor elements.
+     * ancestor elements. Requires React v17+
+     * @see https://github.com/carbon-design-system/carbon/issues/18714
      */
     autoAlign?: boolean;
     className?: string;

package/lib/components/MultiSelect/MultiSelect.js

@@ -538,7 +538,8 @@ MultiSelect.propTypes = {
   /**
    * **Experimental**: Will attempt to automatically align the floating
    * element to avoid collisions with the viewport and being clipped by
-   * ancestor elements.
+   * ancestor elements. Requires React v17+
+   * @see https://github.com/carbon-design-system/carbon/issues/18714
    */
   autoAlign: PropTypes.bool,
   /**