@carbon/react 1.87.1-rc.0 → 1.88.0

package/es/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/es/components/AILabel/index.js

@@ -186,7 +186,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/es/components/Button/Button.js

@@ -109,7 +109,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/es/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/es/components/CodeSnippet/CodeSnippet.js

@@ -268,7 +268,9 @@ CodeSnippet.propTypes = {
    */
   ariaLabel: 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/es/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/es/components/ComboBox/ComboBox.js

@@ -776,7 +776,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/es/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/es/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/es/components/Copy/Copy.js

@@ -90,7 +90,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),
   /**
-   * **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/es/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/es/components/CopyButton/CopyButton.js

@@ -72,7 +72,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),
   /**
-   * **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/es/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/es/components/Dropdown/Dropdown.js

@@ -396,7 +396,10 @@ Dropdown.propTypes = {
    */
   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.
+   * **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/es/components/FileUploader/FileUploaderButton.js

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

package/es/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/es/components/IconButton/index.js

@@ -99,7 +99,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),
   /**
-   * **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,
   /**
@@ -154,9 +156,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/es/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/es/components/MultiSelect/FilterableMultiSelect.js

@@ -11,10 +11,12 @@ import cx from 'classnames';
 import Downshift, { useCombobox, useMultipleSelection } from 'downshift';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
-import React, { forwardRef, useContext, useRef, useState, useLayoutEffect, useMemo, useEffect, cloneElement } from 'react';
+import React, { forwardRef, useContext, useRef, useState, useMemo, useCallback, useLayoutEffect, useEffect, cloneElement } from 'react';
 import { defaultFilterItems } from './filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
+import Checkbox from '../Checkbox/Checkbox.js';
+import '../Checkbox/Checkbox.Skeleton.js';
 import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { Space, Enter, Delete, Escape, Tab, Home, End } from '../../internal/keyboard/keys.js';
@@ -115,16 +117,56 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   const [inputValue, setInputValue] = useState('');
   const [topItems, setTopItems] = useState(initialSelectedItems ?? []);
   const [inputFocused, setInputFocused] = useState(false);
+  const filteredItems = useMemo(() => filterItems(items, {
+    itemToString,
+    inputValue
+  }), [items, inputValue, itemToString, filterItems]);
+  const nonSelectAllItems = 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
   } = useSelection({
     disabled,
     initialSelectedItems,
     onChange,
-    selectedItems: selected
+    selectedItems: selected,
+    selectAll,
+    filteredItems
   });
+  const selectAllStatus = 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 = 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,
@@ -175,10 +217,11 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   // memoize sorted items to reduce unnecessary expensive sort on rerender
   const sortedItems = useMemo(() => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return sortItems(filterItems(items, {
-      itemToString,
-      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: [],
@@ -188,7 +231,13 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       compareItems,
       locale
     });
-  }, [items, inputValue, controlledSelectedItems, topItems, selectionFeedback, itemToString, 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, 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, {
@@ -311,8 +360,15 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     }
     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 {
@@ -320,7 +376,9 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
           highlightedIndex: state.highlightedIndex
         };
       case ItemClick:
-        if (changes.selectedItem) {
+        if (changes.selectedItem.isSelectAll) {
+          handleSelectAllClick();
+        } else {
           onItemChange(changes.selectedItem);
         }
         setHighlightedIndex(changes.selectedItem);
@@ -453,6 +511,9 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/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,
@@ -460,7 +521,8 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     [`${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({
@@ -598,7 +660,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
         textInput.current.focus();
       }
     },
-    selectionCount: controlledSelectedItems.length,
+    selectionCount: selectedItemsLength,
     translateWithId: translateWithId,
     disabled: disabled
   }), /*#__PURE__*/React.createElement("input", _extends({
@@ -630,7 +692,14 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   }))), slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--list-box__inner-wrapper--decorator`
   }, normalizedDecorator) : '', /*#__PURE__*/React.createElement(ListBox.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
@@ -650,20 +719,23 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     return /*#__PURE__*/React.createElement(ListBox.MenuItem, _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, {
+      id: `${itemProps.id}-item`,
+      labelText: ItemToElement ? /*#__PURE__*/React.createElement(ItemToElement, _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, _extends({
-      key: itemProps.id
-    }, item)) : itemText)));
+      indeterminate: isIndeterminate,
+      disabled: disabled,
+      tabIndex: -1
+    })));
   }) : null)), !inline && !invalid && !warn ? helper : null);
 });
 FilterableMultiSelect.displayName = 'FilterableMultiSelect';
@@ -681,7 +753,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,
   /**
@@ -696,6 +769,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/es/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/es/components/MultiSelect/MultiSelect.js

@@ -536,7 +536,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,
   /**

package/es/components/Notification/Notification.d.ts

@@ -367,6 +367,10 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
      * Provide a description for "close" icon button that can be read by screen readers
      */
     'aria-label'?: string;
+    /**
+     * Specify the caption
+     */
+    caption?: string;
     /**
      * Specify the content
      */
@@ -430,7 +434,7 @@ export interface ActionableNotificationProps extends HTMLAttributes<HTMLDivEleme
      */
     title?: string;
 }
-export declare function ActionableNotification({ actionButtonLabel, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, children, role, onActionButtonClick, onClose, onCloseButtonClick, statusIconDescription, className, inline, kind, lowContrast, hideCloseButton, hasFocus, closeOnEscape, title, subtitle, ...rest }: ActionableNotificationProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ActionableNotification({ actionButtonLabel, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, caption, children, role, onActionButtonClick, onClose, onCloseButtonClick, statusIconDescription, className, inline, kind, lowContrast, hideCloseButton, hasFocus, closeOnEscape, title, subtitle, ...rest }: ActionableNotificationProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace ActionableNotification {
     var propTypes: {
         /**
@@ -446,6 +450,10 @@ export declare namespace ActionableNotification {
          * Provide a description for "close" icon button that can be read by screen readers
          */
         ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
+        /**
+         * Specify the caption
+         */
+        caption: PropTypes.Requireable<string>;
         /**
          * Specify the content
          */