@carbon/react 1.25.0 → 1.26.0-rc.0

package/es/components/Button/Button.js

@@ -17,7 +17,7 @@ import { useId } from '../../internal/useId.js';
 
 var _excluded = ["as", "children", "className", "dangerDescription", "disabled", "hasIconOnly", "href", "iconDescription", "isExpressive", "isSelected", "kind", "onBlur", "onClick", "onFocus", "onMouseEnter", "onMouseLeave", "renderIcon", "size", "tabIndex", "tooltipAlignment", "tooltipPosition", "type"];
 var Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
-  var _classNames;
+  var _classNames, _rest$ariaPressed;
 
   var as = _ref.as,
       children = _ref.children,
@@ -82,7 +82,7 @@ var Button = /*#__PURE__*/React__default.forwardRef(function Button(_ref, ref) {
     disabled: disabled,
     type: type,
     'aria-describedby': dangerButtonVariants.includes(kind) ? assistiveId : null,
-    'aria-pressed': hasIconOnly && kind === 'ghost' ? isSelected : null
+    'aria-pressed': (_rest$ariaPressed = rest['aria-pressed']) !== null && _rest$ariaPressed !== void 0 ? _rest$ariaPressed : hasIconOnly && kind === 'ghost' ? isSelected : null
   };
   var anchorProps = {
     href: href

package/es/components/DataTable/Table.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { PropsWithChildren } from 'react';
+import PropTypes from 'prop-types';
+interface TableProps {
+    className?: string;
+    /**
+     * `false` If true, will apply sorting styles
+     */
+    isSortable?: boolean;
+    /**
+     * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+     */
+    overflowMenuOnHover?: boolean;
+    /**
+     *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * `false` If true, will keep the header sticky (only data rows will scroll)
+     */
+    stickyHeader?: boolean;
+    /**
+     * `false` If true, will use a width of 'auto' instead of 100%
+     */
+    useStaticWidth?: boolean;
+    /**
+     * `true` to add useZebraStyles striping.
+     */
+    useZebraStyles?: boolean;
+}
+export declare const Table: {
+    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, ...other }: PropsWithChildren<TableProps>): JSX.Element;
+    propTypes: {
+        /**
+         * Pass in the children that will be rendered within the Table
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        /**
+         * `false` If true, will apply sorting styles
+         */
+        isSortable: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+         */
+        overflowMenuOnHover: PropTypes.Requireable<boolean>;
+        /**
+         *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * `false` If true, will keep the header sticky (only data rows will scroll)
+         */
+        stickyHeader: PropTypes.Requireable<boolean>;
+        /**
+         * `false` If true, will use a width of 'auto' instead of 100%
+         */
+        useStaticWidth: PropTypes.Requireable<boolean>;
+        /**
+         * `true` to add useZebraStyles striping.
+         */
+        useZebraStyles: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        isSortable: boolean;
+        overflowMenuOnHover: boolean;
+    };
+};
+export default Table;

package/es/components/DataTable/Table.js

@@ -20,10 +20,12 @@ var Table = function Table(_ref) {
       children = _ref.children,
       useZebraStyles = _ref.useZebraStyles,
       size = _ref.size,
-      isSortable = _ref.isSortable,
+      _ref$isSortable = _ref.isSortable,
+      isSortable = _ref$isSortable === void 0 ? false : _ref$isSortable,
       useStaticWidth = _ref.useStaticWidth,
       stickyHeader = _ref.stickyHeader,
-      overflowMenuOnHover = _ref.overflowMenuOnHover,
+      _ref$overflowMenuOnHo = _ref.overflowMenuOnHover,
+      overflowMenuOnHover = _ref$overflowMenuOnHo === void 0 ? true : _ref$overflowMenuOnHo,
       other = _objectWithoutProperties(_ref, _excluded);
 
   var _useContext = useContext(TableContext),

package/es/components/DataTable/TableCell.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { TdHTMLAttributes } from 'react';
+export type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+declare const TableCell: React.FC<TableCellProps>;
+export default TableCell;

package/es/components/DataTable/TableContext.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="react" />
+interface TableContextType {
+    titleId?: string;
+    descriptionId?: string;
+}
+export declare const TableContext: import("react").Context<TableContextType>;
+export {};

package/es/components/DataTable/TableContext.js

@@ -8,8 +8,8 @@
 import { createContext } from 'react';
 
 var TableContext = /*#__PURE__*/createContext({
-  titleId: null,
-  descriptionId: null
+  titleId: undefined,
+  descriptionId: undefined
 });
 
 export { TableContext };

package/es/components/DataTable/TableExpandRow.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import { MouseEventHandler, PropsWithChildren } from 'react';
+import { TableRowProps } from './TableRow';
+interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
+    /**
+     * Specify the string read by a voice reader when the expand trigger is
+     * focused
+     */
+    ariaLabel: string;
+    /**
+     * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+     */
+    expandHeader?: string;
+    /**
+     * The description of the chevron right icon, to be put in its SVG `<title>` element.
+     */
+    expandIconDescription?: string;
+    /**
+     * Specify whether this row is expanded or not. This helps coordinate data
+     * attributes so that `TableExpandRow` and `TableExpandedRow` work together
+     */
+    isExpanded: boolean;
+    /**
+     * Hook for when a listener initiates a request to expand the given row
+     */
+    onExpand: MouseEventHandler<HTMLButtonElement>;
+}
+declare const TableExpandRow: {
+    ({ ariaLabel, className: rowClassName, children, isExpanded, onExpand, expandIconDescription, isSelected, expandHeader, ...rest }: TableExpandRowProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify the string read by a voice reader when the expand trigger is
+         * focused
+         */
+        ariaLabel: PropTypes.Validator<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        /**
+         * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+         */
+        expandHeader: PropTypes.Requireable<string>;
+        /**
+         * The description of the chevron right icon, to be put in its SVG `<title>` element.
+         */
+        expandIconDescription: PropTypes.Requireable<string>;
+        /**
+         * Specify whether this row is expanded or not. This helps coordinate data
+         * attributes so that `TableExpandRow` and `TableExpandedRow` work together
+         */
+        isExpanded: PropTypes.Validator<boolean>;
+        /**
+         * Specify if the row is selected
+         */
+        isSelected: PropTypes.Requireable<boolean>;
+        /**
+         * Hook for when a listener initiates a request to expand the given row
+         */
+        onExpand: PropTypes.Validator<(...args: any[]) => any>;
+    };
+};
+export default TableExpandRow;

package/es/components/DataTable/TableExpandedRow.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import { ReactAttr } from '../../types/common';
+interface TableExpandedRowProps extends ReactAttr<HTMLTableRowElement> {
+    /**
+     * The width of the expanded row's internal cell
+     */
+    colSpan: number;
+}
+declare const TableExpandedRow: {
+    ({ className: customClassName, children, colSpan, ...rest }: TableExpandedRowProps): JSX.Element;
+    propTypes: {
+        /**
+         * Pass in the contents for your TableExpandedRow
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The width of the expanded row's internal cell
+         */
+        colSpan: PropTypes.Validator<number>;
+    };
+};
+export default TableExpandedRow;

package/es/components/DataTable/TableHead.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ThHTMLAttributes } from 'react';
+export type TableHeadProps = ThHTMLAttributes<HTMLTableSectionElement>;
+declare const TableHead: React.FC<TableHeadProps>;
+export default TableHead;

package/es/components/DataTable/TableHeader.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { MouseEventHandler } from 'react';
+import { ReactAttr } from '../../types/common';
+interface TableHeaderProps extends ReactAttr<HTMLTableCellElement & HTMLButtonElement> {
+    /**
+     * Pass in children that will be embedded in the table header label
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify `colSpan` as a non-negative integer value to indicate how
+     * many columns the TableHeader cell extends in a table
+     */
+    colSpan?: number;
+    /**
+     * Supply an id to the th element.
+     */
+    id?: string;
+    /**
+     * Specify whether this header is the header by which a table is being sorted
+     * by
+     */
+    isSortHeader?: boolean;
+    /**
+     * Specify whether this header is one through which a user can sort the table
+     */
+    isSortable?: boolean;
+    /**
+     * Hook that is invoked when the header is clicked
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Specify the scope of this table header. You can find more info about this
+     * attribute at the following URL:
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th#attr-scope
+     */
+    scope: string;
+    /**
+     * Specify which direction we are currently sorting by, should be one of DESC,
+     * NONE, or ASC.
+     */
+    sortDirection?: string;
+    /**
+     * Supply a method to translate internal strings with your i18n tool of
+     * choice. Translation keys are available on the `translationKeys` field for
+     * this component.
+     */
+    translateWithId?: (key: string, { header, sortDirection, isSortHeader, sortStates }: {
+        header: any;
+        sortDirection: any;
+        isSortHeader: any;
+        sortStates: any;
+    }) => string;
+}
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
+export default TableHeader;

package/es/components/DataTable/TableHeader.js

@@ -22,48 +22,43 @@ var translationKeys = {
   buttonDescription: 'carbon.table.header.icon.description'
 };
 
-var translateWithId = function translateWithId(key, _ref) {
-  var header = _ref.header,
-      sortDirection = _ref.sortDirection,
-      isSortHeader = _ref.isSortHeader,
-      sortStates = _ref.sortStates;
-
-  if (key === translationKeys.buttonDescription) {
-    if (isSortHeader) {
+var translateWithId = function translateWithId(key, args) {
+  if (args && key === translationKeys.buttonDescription) {
+    if (args.isSortHeader && sortStates) {
       // When transitioning, we know that the sequence of states is as follows:
       // NONE -> ASC -> DESC -> NONE
-      if (sortDirection === sortStates.NONE) {
-        return "Click to sort rows by ".concat(header, " header in ascending order");
+      if (args.sortDirection === sortStates.NONE) {
+        return "Click to sort rows by ".concat(args.header, " header in ascending order");
       }
 
-      if (sortDirection === sortStates.ASC) {
-        return "Click to sort rows by ".concat(header, " header in descending order");
+      if (args.sortDirection === sortStates.ASC) {
+        return "Click to sort rows by ".concat(args.header, " header in descending order");
       }
 
-      return "Click to unsort rows by ".concat(header, " header");
+      return "Click to unsort rows by ".concat(args.header, " header");
     }
 
-    return "Click to sort rows by ".concat(header, " header in ascending order");
+    return "Click to sort rows by ".concat(args.header, " header in ascending order");
   }
 
   return '';
 };
 
 var sortDirections = (_sortDirections = {}, _defineProperty(_sortDirections, sortStates.NONE, 'none'), _defineProperty(_sortDirections, sortStates.ASC, 'ascending'), _defineProperty(_sortDirections, sortStates.DESC, 'descending'), _sortDirections);
-var TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_ref2, ref) {
+var TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_ref, ref) {
   var _cx;
 
-  var headerClassName = _ref2.className,
-      children = _ref2.children,
-      colSpan = _ref2.colSpan,
-      isSortable = _ref2.isSortable,
-      isSortHeader = _ref2.isSortHeader,
-      onClick = _ref2.onClick,
-      scope = _ref2.scope,
-      sortDirection = _ref2.sortDirection,
-      t = _ref2.translateWithId,
-      id = _ref2.id,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+  var headerClassName = _ref.className,
+      children = _ref.children,
+      colSpan = _ref.colSpan,
+      isSortable = _ref.isSortable,
+      isSortHeader = _ref.isSortHeader,
+      onClick = _ref.onClick,
+      scope = _ref.scope,
+      sortDirection = _ref.sortDirection,
+      t = _ref.translateWithId,
+      id = _ref.id,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
   var uniqueId = useId('table-sort');
@@ -81,8 +76,8 @@ var TableHeader = /*#__PURE__*/React__default.forwardRef(function TableHeader(_r
   }
 
   var className = cx(headerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--table-sort"), true), _defineProperty(_cx, "".concat(prefix, "--table-sort--active"), isSortHeader && sortDirection !== sortStates.NONE), _defineProperty(_cx, "".concat(prefix, "--table-sort--descending"), isSortHeader && sortDirection === sortStates.DESC), _cx));
-  var ariaSort = !isSortHeader ? 'none' : sortDirections[sortDirection];
-  var sortDescription = t('carbon.table.header.icon.description', {
+  var ariaSort = !isSortHeader || !sortDirection ? 'none' : sortDirections[sortDirection];
+  var sortDescription = t && t('carbon.table.header.icon.description', {
     header: children,
     sortDirection: sortDirection,
     isSortHeader: isSortHeader,

package/es/components/DataTable/TableRow.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import { ReactAttr } from '../../types/common';
+export interface TableRowProps extends ReactAttr<HTMLTableRowElement> {
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify if the row is selected
+     */
+    isSelected?: boolean;
+}
+declare const TableRow: {
+    (props: TableRowProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify if the row is selected
+         */
+        isSelected: PropTypes.Requireable<boolean>;
+    };
+};
+export default TableRow;

package/es/components/DataTable/TableSelectAll.js

@@ -25,7 +25,7 @@ var TableSelectAll = function TableSelectAll(_ref) {
     scope: "col",
     className: cx("".concat(prefix, "--table-column-checkbox"), className)
   }, /*#__PURE__*/React__default.createElement(InlineCheckbox, {
-    ariaLabel: ariaLabel,
+    "aria-label": ariaLabel,
     checked: checked,
     id: id,
     indeterminate: indeterminate,

package/es/components/DataTable/TableSelectRow.js

@@ -39,9 +39,7 @@ var TableSelectRow = function TableSelectRow(_ref) {
   }, /*#__PURE__*/React__default.createElement(InlineInputComponent, _extends({}, selectionInputProps, radio && {
     labelText: ariaLabel,
     hideLabel: true
-  }, !radio && {
-    ariaLabel: ariaLabel
-  })));
+  }, !radio && _defineProperty({}, 'aria-label', ariaLabel))));
 };
 
 TableSelectRow.propTypes = {

package/es/components/DataTable/TableToolbarContent.d.ts

@@ -7,13 +7,11 @@
 declare const TableToolbarContent: {
     ({ className: baseClassName, ...other }: {
         [x: string]: any;
-        className: any;
-    }): import("react").CElement<{
+        className?: string | undefined;
+    }): import("react").ReactElement<{
         className: string | undefined;
-    }, import("react").Component<{
-        className: string | undefined;
-    }, any, any>>;
-    displayName: any;
+    }, string | import("react").JSXElementConstructor<any>>;
+    displayName: string;
     propTypes: {
         className: import("prop-types").Requireable<string>;
     };

package/es/components/DataTable/TableToolbarSearch.js

@@ -10,6 +10,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useMemo, useEffect } from 'react';
 import Search from '../Search/Search.js';
+import '../Search/Search.Skeleton.js';
 import setupGetInstanceId from './tools/instanceId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 

package/es/components/ExpandableSearch/ExpandableSearch.js

@@ -9,6 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import React__default, { useState, useRef } from 'react';
 import cx from 'classnames';
 import Search from '../Search/Search.js';
+import '../Search/Search.Skeleton.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
 

package/es/components/FileUploader/FileUploaderButton.js

@@ -70,11 +70,13 @@ function FileUploaderButton(_ref) {
 
   function onClick(event) {
     event.target.value = null;
+    inputNode.current.value = '';
     inputNode.current.click();
   }
 
   function onKeyDown(event) {
     if (matches(event, [Enter, Space])) {
+      inputNode.current.value = '';
       inputNode.current.click();
     }
   }

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -5,15 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useEffect } from 'react';
+import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 
+var _InlineCheckbox$propT;
 /** @type any */
 
 var InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineCheckbox(props, forwardRef) {
-  var ariaLabel = props.ariaLabel,
+  var ariaLabel = props['aria-label'],
+      deprecatedAriaLabel = props.ariaLabel,
       _props$checked = props.checked,
       checked = _props$checked === void 0 ? false : _props$checked,
       disabled = props.disabled,
@@ -60,64 +64,14 @@ var InlineCheckbox = /*#__PURE__*/React__default.forwardRef(function InlineCheck
   React__default.createElement("label", {
     htmlFor: id,
     className: "".concat(prefix, "--checkbox-label"),
-    "aria-label": ariaLabel,
+    "aria-label": deprecatedAriaLabel || ariaLabel,
     title: title,
     onClick: function onClick(evt) {
       evt.stopPropagation();
     }
   }));
 });
-InlineCheckbox.propTypes = {
-  /**
-   * Specify the label for the control
-   */
-  ariaLabel: PropTypes.string.isRequired,
-
-  /**
-   * Specify whether the underlying control is checked, or not
-   */
-  checked: PropTypes.bool,
-
-  /**
-   * Specify whether the underlying input control should be disabled
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Provide an `id` for the underlying input control
-   */
-  id: PropTypes.string.isRequired,
-
-  /**
-   * Specify whether the control is in an indterminate state
-   */
-  indeterminate: PropTypes.bool,
-
-  /**
-   * Provide a `name` for the underlying input control
-   */
-  name: PropTypes.string.isRequired,
-
-  /**
-   * Provide an optional hook that is called each time the input is updated
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * Provide a handler that is invoked when a user clicks on the control
-   */
-  onClick: PropTypes.func,
-
-  /**
-   * Provide a handler that is invoked on the key down event for the control
-   */
-  onKeyDown: PropTypes.func,
-
-  /**
-   * Provide an optional tooltip for the InlineCheckbox
-   */
-  title: PropTypes.string
-};
+InlineCheckbox.propTypes = (_InlineCheckbox$propT = {}, _defineProperty(_InlineCheckbox$propT, 'aria-label', PropTypes.string.isRequired), _defineProperty(_InlineCheckbox$propT, "ariaLabel", deprecate(PropTypes.string.isRequired, 'The `ariaLabel` prop has been deprecated in favor of `aria-label`. This prop will be removed in the next major release.')), _defineProperty(_InlineCheckbox$propT, "checked", PropTypes.bool), _defineProperty(_InlineCheckbox$propT, "disabled", PropTypes.bool), _defineProperty(_InlineCheckbox$propT, "id", PropTypes.string.isRequired), _defineProperty(_InlineCheckbox$propT, "indeterminate", PropTypes.bool), _defineProperty(_InlineCheckbox$propT, "name", PropTypes.string.isRequired), _defineProperty(_InlineCheckbox$propT, "onChange", PropTypes.func), _defineProperty(_InlineCheckbox$propT, "onClick", PropTypes.func), _defineProperty(_InlineCheckbox$propT, "onKeyDown", PropTypes.func), _defineProperty(_InlineCheckbox$propT, "title", PropTypes.string), _InlineCheckbox$propT);
 var InlineCheckbox$1 = InlineCheckbox;
 
 export { InlineCheckbox$1 as default };

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import Downshift from 'downshift';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState, useRef } from 'react';
+import React__default, { useContext, useState, useRef, useEffect } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import ListBox from '../ListBox/index.js';
@@ -92,7 +92,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
       inputValue = _useState8[0],
       setInputValue = _useState8[1];
 
-  var _useState9 = useState([]),
+  var _useState9 = useState(initialSelectedItems !== null && initialSelectedItems !== void 0 ? initialSelectedItems : []),
       _useState10 = _slicedToArray(_useState9, 2),
       topItems = _useState10[0],
       setTopItems = _useState10[1];
@@ -107,6 +107,11 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
       highlightedIndex = _useState14[0],
       setHighlightedIndex = _useState14[1];
 
+  var _useState15 = useState(initialSelectedItems !== null && initialSelectedItems !== void 0 ? initialSelectedItems : []),
+      _useState16 = _slicedToArray(_useState15, 2),
+      currentSelectedItems = _useState16[0],
+      setCurrentSelectedItems = _useState16[1];
+
   var textInput = useRef();
   var filterableMultiSelectInstanceId = useId();
   var enabled = useFeatureFlag('enable-v11-release');
@@ -131,8 +136,15 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
   }, helperText) : null;
   var menuId = "".concat(id, "__menu");
   var inputId = "".concat(id, "-input");
+  useEffect(function () {
+    if (!isOpen) {
+      setTopItems(currentSelectedItems);
+    }
+  }, [currentSelectedItems, isOpen, setTopItems]);
 
   function handleOnChange(changes) {
+    setCurrentSelectedItems(changes.selectedItems);
+
     if (onChange) {
       onChange(changes);
     }
@@ -151,11 +163,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
     handleOnMenuChange(false);
   }
 
-  function handleOnStateChange(changes, downshift) {
-    if (changes.isOpen && !isOpen) {
-      setTopItems(downshift.selectedItem);
-    }
-
+  function handleOnStateChange(changes) {
     var type = changes.type;
     var stateChangeTypes = Downshift.stateChangeTypes;