@carbon/react 1.36.0 → 1.37.0-rc.1

package/lib/components/Dropdown/Dropdown.js

@@ -32,11 +32,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 const getInstanceId = setupGetInstanceId["default"]();
 const {
-  MenuBlur,
-  MenuKeyDownArrowDown,
-  MenuKeyDownArrowUp,
-  MenuKeyDownEscape,
-  ToggleButtonClick
+  ToggleButtonKeyDownArrowDown,
+  ToggleButtonKeyDownArrowUp,
+  ToggleButtonKeyDownHome,
+  ToggleButtonKeyDownEnd,
+  ItemMouseMove
 } = Downshift.useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -82,7 +82,6 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const [highlightedIndex, setHighlightedIndex] = React.useState();
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
@@ -90,31 +89,43 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     ...downshiftProps,
     items,
     itemToString,
-    highlightedIndex,
     initialSelectedItem,
     onSelectedItemChange,
-    onStateChange
+    stateReducer,
+    isItemDisabled(item, _index) {
+      const isObject = item !== null && typeof item === 'object';
+      return isObject && 'disabled' in item && item.disabled === true;
+    }
   };
   const {
     current: dropdownInstanceId
   } = React.useRef(getInstanceId());
-  function onStateChange(changes) {
+  function stateReducer(state, actionAndChanges) {
     const {
+      changes,
+      props,
       type
+    } = actionAndChanges;
+    const {
+      highlightedIndex
     } = changes;
     switch (type) {
-      case MenuKeyDownArrowDown:
-      case MenuKeyDownArrowUp:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
-      case MenuBlur:
-      case MenuKeyDownEscape:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
-      case ToggleButtonClick:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
+      case ToggleButtonKeyDownArrowDown:
+      case ToggleButtonKeyDownArrowUp:
+      case ToggleButtonKeyDownHome:
+      case ToggleButtonKeyDownEnd:
+        if (highlightedIndex > -1) {
+          const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
+          props.scrollIntoView(itemArray[highlightedIndex]);
+        }
+        return changes;
+      case ItemMouseMove:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
     }
+    return changes;
   }
 
   // only set selectedItem if the prop is defined. Setting if it is undefined
@@ -128,7 +139,8 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     getLabelProps,
     getMenuProps,
     getItemProps,
-    selectedItem
+    selectedItem,
+    highlightedIndex
   } = Downshift.useSelect(selectProps);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
@@ -172,14 +184,12 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     let {
       selectedItem
     } = _ref2;
-    setIsFocused(false);
     if (onChange) {
       onChange({
         selectedItem: selectedItem ?? null
       });
     }
   }
-  const menuItemOptionRefs = React.useRef(items.map(_ => /*#__PURE__*/React__default["default"].createRef()));
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
   };
@@ -210,10 +220,6 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
         setIsTyping(true);
       }
       if (isTyping && evt.code === 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
-        if (evt.code === 'Space') {
-          evt.preventDefault();
-          return;
-        }
         if (currTimer) {
           clearTimeout(currTimer);
         }
@@ -221,7 +227,9 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
           setIsTyping(false);
         }, 3000));
       }
-      toggleButtonProps.onKeyDown(evt);
+      if (toggleButtonProps.onKeyDown) {
+        toggleButtonProps.onKeyDown(evt);
+      }
     }
   };
   const menuProps = getMenuProps();
@@ -250,16 +258,12 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     type: "button"
     // aria-expanded is already being passed through {...toggleButtonProps}
     ,
-    role: "combobox" // eslint-disable-line jsx-a11y/role-has-required-aria-props
-    ,
-    "aria-owns": getMenuProps().id,
-    "aria-controls": getMenuProps().id,
     className: `${prefix}--list-box__field`,
     disabled: disabled,
     "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
     ,
     "aria-describedby": !inline && !invalid && !warn && helper ? helperId : undefined,
-    title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : label
+    title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : defaultItemToString(label)
   }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergedRef
   }), /*#__PURE__*/React__default["default"].createElement("span", {
@@ -269,11 +273,9 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     translateWithId: translateWithId
   })), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen && items.map((item, index$1) => {
     const isObject = item !== null && typeof item === 'object';
-    const disabled = isObject && 'disabled' in item && item.disabled === true;
     const itemProps = getItemProps({
       item,
-      index: index$1,
-      disabled
+      index: index$1
     });
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
     return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
@@ -281,9 +283,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       isActive: selectedItem === item,
       isHighlighted: highlightedIndex === index$1,
       title: title,
-      ref: {
-        menuItemOptionRef: menuItemOptionRefs.current[index$1]
-      }
+      disabled: itemProps['aria-disabled']
     }, itemProps), typeof item === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id
     }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {

package/lib/components/FileUploader/FileUploader.Skeleton.d.ts

@@ -13,10 +13,7 @@ export interface FileUploaderSkeletonProps extends ReactAttr<HTMLDivElement> {
      */
     className?: string;
 }
-declare function FileUploaderSkeleton({ className, ...rest }: {
-    [x: string]: any;
-    className: any;
-}): JSX.Element;
+declare function FileUploaderSkeleton({ className, ...rest }: FileUploaderSkeletonProps): JSX.Element;
 declare namespace FileUploaderSkeleton {
     var propTypes: {
         /**

package/lib/components/FileUploader/FileUploaderDropContainer.d.ts

@@ -4,7 +4,7 @@
  * 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" />
+import React from 'react';
 import PropTypes from 'prop-types';
 import { ReactAttr } from '../../types/common';
 export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButtonElement>, 'tabIndex'> {
@@ -39,9 +39,10 @@ export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButto
     name?: string;
     /**
      * Event handler that is called after files are added to the uploader
-     * The event handler signature looks like `onAddFiles(evt, { addedFiles })`
      */
-    onAddFiles?: () => void;
+    onAddFiles?: (event: React.SyntheticEvent<HTMLElement>, content: {
+        addedFiles: File[];
+    }) => void;
     /**
      * Provide an optional function to be called when the button element
      * is clicked
@@ -51,6 +52,10 @@ export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButto
      * Provide a custom regex pattern for the acceptedTypes
      */
     pattern?: string;
+    /**
+     * Ref to pass to the inner button element
+     */
+    innerRef?: React.LegacyRef<HTMLButtonElement>;
     /**
      * @deprecated The `role` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default, and has an implicit role of button.
      */
@@ -60,20 +65,7 @@ export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButto
      */
     tabIndex?: number | string;
 }
-declare function FileUploaderDropContainer({ accept, className, id, disabled, labelText, multiple, name, onAddFiles, onClick, pattern, innerRef, ...rest }: {
-    [x: string]: any;
-    accept: any;
-    className: any;
-    id: any;
-    disabled: any;
-    labelText: any;
-    multiple: any;
-    name: any;
-    onAddFiles: any;
-    onClick: any;
-    pattern: any;
-    innerRef: any;
-}): JSX.Element;
+declare function FileUploaderDropContainer({ accept, className, id, disabled, labelText, multiple, name, onAddFiles, onClick, pattern, innerRef, ...rest }: FileUploaderDropContainerProps): JSX.Element;
 declare namespace FileUploaderDropContainer {
     var propTypes: {
         /**

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -28,16 +28,16 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 function FileUploaderDropContainer(_ref) {
   let {
-    accept,
+    accept = [],
     className,
     id,
     disabled,
-    labelText,
-    multiple,
+    labelText = 'Add file',
+    multiple = false,
     name,
-    onAddFiles,
+    onAddFiles = () => {},
     onClick,
-    pattern,
+    pattern = '.[0-9a-z]+$',
     // eslint-disable-next-line react/prop-types
     innerRef,
     ...rest
@@ -50,16 +50,13 @@ function FileUploaderDropContainer(_ref) {
   const [isActive, setActive] = React.useState(false);
   const dropareaClasses = cx__default["default"](`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
     [`${prefix}--file__drop-container--drag-over`]: isActive,
-    [`${prefix}--file-browse-btn--disabled`]: disabled,
-    [className]: className
-  });
+    [`${prefix}--file-browse-btn--disabled`]: disabled
+  }, className);
 
   /**
    * Filters the array of added files based on file type restrictions
-   * @param {Event} event - Event object, used to get the list of files added
    */
-  function validateFiles(event) {
-    const transferredFiles = event.type === 'drop' ? [...event.dataTransfer.files] : [...event.target.files];
+  function validateFiles(transferredFiles) {
     if (!accept.length) {
       return transferredFiles;
     }
@@ -70,11 +67,10 @@ function FileUploaderDropContainer(_ref) {
         type: mimeType = ''
       } = curr;
       const fileExtensionRegExp = new RegExp(pattern, 'i');
-      const hasFileExtension = fileExtensionRegExp.test(name);
-      if (!hasFileExtension) {
+      const [fileExtension] = name.match(fileExtensionRegExp) ?? [];
+      if (fileExtension === undefined) {
         return acc;
       }
-      const [fileExtension] = name.match(fileExtensionRegExp);
       if (acceptedTypes.has(mimeType) || acceptedTypes.has(fileExtension.toLowerCase())) {
         return acc.concat([curr]);
       }
@@ -83,7 +79,15 @@ function FileUploaderDropContainer(_ref) {
     }, []);
   }
   function handleChange(event) {
-    const addedFiles = validateFiles(event);
+    const files = [...(event.target.files ?? [])];
+    const addedFiles = validateFiles(files);
+    return onAddFiles(event, {
+      addedFiles
+    });
+  }
+  function handleDrop(event) {
+    const files = [...event.dataTransfer.files];
+    const addedFiles = validateFiles(files);
     return onAddFiles(event, {
       addedFiles
     });
@@ -120,7 +124,7 @@ function FileUploaderDropContainer(_ref) {
         return;
       }
       setActive(false);
-      handleChange(evt);
+      handleDrop(evt);
     }
   }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     type: "button",
@@ -143,7 +147,7 @@ function FileUploaderDropContainer(_ref) {
     ref: inputRef,
     tabIndex: -1,
     disabled: disabled,
-    accept: accept,
+    accept: accept.join(','),
     name: name,
     multiple: multiple,
     onChange: handleChange,

package/lib/components/FileUploader/FileUploaderItem.d.ts

@@ -4,8 +4,8 @@
  * 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" />
 import PropTypes from 'prop-types';
+import React from 'react';
 import { ReactAttr } from '../../types/common';
 export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
     /**
@@ -32,7 +32,7 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
      * Event handler that is called after removing a file from the file uploader
      * The event handler signature looks like `onDelete(evt, { uuid })`
      */
-    onDelete?: (event: any, opts: {
+    onDelete?: (event: React.SyntheticEvent<HTMLElement>, opts: {
         uuid: string;
     }) => void;
     /**
@@ -49,18 +49,7 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
      */
     uuid?: string;
 }
-declare function FileUploaderItem({ uuid, name, status, iconDescription, onDelete, invalid, errorSubject, errorBody, size, ...other }: {
-    [x: string]: any;
-    uuid: any;
-    name: any;
-    status: any;
-    iconDescription: any;
-    onDelete: any;
-    invalid: any;
-    errorSubject: any;
-    errorBody: any;
-    size: any;
-}): JSX.Element;
+declare function FileUploaderItem({ uuid, name, status, iconDescription, onDelete, invalid, errorSubject, errorBody, size, ...other }: FileUploaderItemProps): JSX.Element;
 declare namespace FileUploaderItem {
     var propTypes: {
         /**

package/lib/components/FileUploader/FileUploaderItem.js

@@ -29,9 +29,9 @@ function FileUploaderItem(_ref) {
   let {
     uuid,
     name,
-    status,
+    status = 'uploading',
     iconDescription,
-    onDelete,
+    onDelete = () => {},
     invalid,
     errorSubject,
     errorBody,
@@ -44,8 +44,8 @@ function FileUploaderItem(_ref) {
   } = React.useRef(uuid || uniqueId["default"]());
   const classes = cx__default["default"](`${prefix}--file__selected-file`, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
-    [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
-    [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
+    [`${prefix}--file__selected-file--md`]: size === 'md',
+    [`${prefix}--file__selected-file--sm`]: size === 'sm'
   });
   return /*#__PURE__*/React__default["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
     className: classes

package/lib/components/FormLabel/FormLabel.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 React from 'react';
+export interface FormLabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'> {
+    /**
+     * Specify the content of the form label
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom className to be applied to the containing <label> node
+     */
+    className?: string;
+    /**
+     * Provide a unique id for the given <FormLabel>
+     */
+    id?: string;
+}
+declare function FormLabel({ className: customClassName, children, id, ...rest }: FormLabelProps): JSX.Element;
+declare namespace FormLabel {
+    var propTypes: {
+        /**
+         * Specify the content of the form label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className to be applied to the containing <label> node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide a unique id for the given <FormLabel>
+         */
+        id: PropTypes.Requireable<string>;
+    };
+}
+export default FormLabel;

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

@@ -0,0 +1,9 @@
+/**
+ * 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 FormLabel from './FormLabel';
+export default FormLabel;
+export { FormLabel };

package/lib/components/ListBox/ListBoxMenu.d.ts

@@ -6,13 +6,13 @@
  */
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id';
-export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLUListElement>, ExcludedAttributes> {
     /**
      * Specify a custom `id`
      */
     id: string;
 }
-export type ListBoxMenuComponent = ForwardRefReturn<HTMLDivElement, ListBoxMenuProps>;
+export type ListBoxMenuComponent = ForwardRefReturn<HTMLUListElement, ListBoxMenuProps>;
 /**
  * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
  * class into a single component. It is also being used to validate given

package/lib/components/ListBox/ListBoxMenu.js

@@ -32,7 +32,7 @@ const ListBoxMenu = /*#__PURE__*/React__default["default"].forwardRef(function L
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     id: id,
     className: `${prefix}--list-box__menu`,

package/lib/components/ListBox/ListBoxMenuItem.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { ForwardedRef } from 'react';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
-export interface ListBoxMenuItemProps extends ReactAttr<HTMLDivElement> {
+export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     /**
      * Specify whether the current menu item is "active".
      */
@@ -15,8 +15,12 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLDivElement> {
      * Specify whether the current menu item is "highlighted".
      */
     isHighlighted?: boolean;
+    /**
+     * Specify whether the item should be disabled
+     */
+    disabled?: boolean;
 }
-export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLDivElement> & {
+export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
     menuItemOptionRef?: React.Ref<HTMLDivElement>;
 }) | null;
 export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;

package/lib/components/ListBox/ListBoxMenuItem.js

@@ -52,10 +52,9 @@ const ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
     [`${prefix}--list-box__menu-item--active`]: isActive,
     [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
   });
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
-    title: isTruncated ? title : undefined,
-    tabIndex: -1
+    title: isTruncated ? title : undefined
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__menu-item__option`,
     ref: forwardedRef?.menuItemOptionRef || ref
@@ -68,6 +67,10 @@ ListBoxMenuItem.propTypes = {
    * Menu Item
    */
   children: PropTypes__default["default"].node,
+  /**
+   * Specify if the item should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
   /**
    * Specify whether the current menu item is "active".
    */

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -45,6 +45,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
     className: containerClassName,
+    clearSelectionDescription,
+    clearSelectionText,
     compareItems,
     direction,
     disabled,
@@ -332,11 +334,18 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
             setIsFocused(evt.type === 'focus' ? true : false);
           }
         };
+        const clearSelectionContent = selectedItems.length > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
+          className: `${prefix}--visually-hidden`
+        }, clearSelectionDescription, " ", selectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default["default"].createElement("span", {
+          className: `${prefix}--visually-hidden`
+        }, clearSelectionDescription, ": 0");
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: wrapperClasses
         }, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
           className: titleClasses
-        }, labelProps), titleText) : null, /*#__PURE__*/React__default["default"].createElement(index["default"], {
+        }, labelProps), titleText, /*#__PURE__*/React__default["default"].createElement("span", {
+          className: `${prefix}--visually-hidden`
+        }, clearSelectionContent)) : null, /*#__PURE__*/React__default["default"].createElement(index["default"], {
           onFocus: isFluid ? handleFocus : null,
           onBlur: isFluid ? handleFocus : null,
           className: className,
@@ -397,12 +406,13 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
           compareItems,
           locale
         }).map((item, index$1) => {
+          const isChecked = selectedItem.filter(selected => isEqual__default["default"](selected, item)).length > 0;
           const itemProps = getItemProps({
             item,
-            disabled: item.disabled
+            disabled: item.disabled,
+            ['aria-selected']: isChecked
           });
           const itemText = itemToString(item);
-          const isChecked = selectedItem.filter(selected => isEqual__default["default"](selected, item)).length > 0;
           return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
             key: itemProps.id,
             "aria-label": itemText,
@@ -435,6 +445,14 @@ FilterableMultiSelect.propTypes = {
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
+  /**
+   * Specify the text that should be read for screen readers that describes total items selected
+   */
+  clearSelectionDescription: PropTypes__default["default"].string,
+  /**
+   * Specify the text that should be read for screen readers to clear selection.
+   */
+  clearSelectionText: PropTypes__default["default"].string,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -556,7 +574,9 @@ FilterableMultiSelect.defaultProps = {
   locale: 'en',
   sortItems: sorting.defaultSortItems,
   open: false,
-  selectionFeedback: 'top-after-reopen'
+  selectionFeedback: 'top-after-reopen',
+  clearSelectionText: 'To clear selection, press Delete or Backspace,',
+  clearSelectionDescription: 'Total items selected: '
 };
 var FilterableMultiSelect$1 = FilterableMultiSelect;
 

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

@@ -9,15 +9,13 @@ import React from 'react';
 import { ListBoxSize, ListBoxType } from '../ListBox';
 import { ListBoxProps } from '../ListBox/ListBox';
 import { OnChangeData } from '../Dropdown';
+import type { InternationalProps } from '../../types/common';
 interface SharedOptions {
     locale: string;
 }
 interface DownshiftTypedProps<ItemType> {
     itemToString?(item: ItemType): string;
 }
-interface InternationalProps<MID = string, ARGS = Record<string, unknown>> {
-    translateWithId?(messageId: MID, args?: ARGS): string;
-}
 interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
     compareItems(item1: ItemType, item2: ItemType, options: SharedOptions): number;
     selectedItems: ItemType[];