@carbon/react 1.24.0 → 1.26.0-rc.0

package/es/components/Menu/Menu.js

@@ -16,7 +16,7 @@ import { MenuContext, menuReducer } from './MenuContext.js';
 import { match } from '../../internal/keyboard/match.js';
 import { Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
 
-var _excluded = ["children", "className", "label", "onClose", "open", "size", "target", "x", "y"];
+var _excluded = ["children", "className", "label", "onClose", "onOpen", "open", "size", "target", "x", "y"];
 var spacing = 8; // distance to keep to window edges, in px
 
 var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef) {
@@ -26,6 +26,7 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
       className = _ref.className,
       label = _ref.label,
       onClose = _ref.onClose,
+      onOpen = _ref.onOpen,
       open = _ref.open,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'sm' : _ref$size,
@@ -67,7 +68,7 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
       setPosition = _useState2[1];
 
   var focusableItems = childContext.state.items.filter(function (item) {
-    return !item.disabled;
+    return !item.disabled && item.ref.current;
   });
 
   function returnFocus() {
@@ -79,8 +80,15 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
   function handleOpen() {
     if (menu.current) {
       focusReturn.current = document.activeElement;
-      setPosition(calculatePosition());
+      var pos = calculatePosition();
+      menu.current.style.left = "".concat(pos[0], "px");
+      menu.current.style.top = "".concat(pos[1], "px");
+      setPosition(pos);
       menu.current.focus();
+
+      if (onOpen) {
+        onOpen();
+      }
     }
   }
 
@@ -103,39 +111,46 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
   }
 
   function handleKeyDown(e) {
-    e.stopPropagation();
-    var currentItem = focusableItems.findIndex(function (item) {
-      return item.ref.current.contains(document.activeElement);
-    });
-    var indexToFocus = currentItem; // if the user presses escape or this is a submenu
+    e.stopPropagation(); // if the user presses escape or this is a submenu
     // and the user presses ArrowLeft, close it
 
     if ((match(e, Escape) || !isRoot && match(e, ArrowLeft)) && onClose) {
       handleClose(e);
     } else {
-      // if currentItem is -1, the menu itself is focused.
-      // in this case, the arrow keys define the first item
-      // to be focused.
+      focusItem(e);
+    }
+  }
+
+  function focusItem(e) {
+    var currentItem = focusableItems.findIndex(function (item) {
+      return item.ref.current.contains(document.activeElement);
+    });
+    var indexToFocus = currentItem; // if currentItem is -1, no menu item is focused yet.
+    // in this case, the first item should receive focus.
+
+    if (currentItem === -1) {
+      indexToFocus = 0;
+    } else if (e) {
       if (match(e, ArrowUp)) {
-        indexToFocus = currentItem === -1 ? focusableItems.length - 1 : indexToFocus - 1;
+        indexToFocus = indexToFocus - 1;
       }
 
       if (match(e, ArrowDown)) {
-        indexToFocus = currentItem === -1 ? 0 : indexToFocus + 1;
+        indexToFocus = indexToFocus + 1;
       }
+    }
 
-      if (indexToFocus < 0) {
-        indexToFocus = 0;
-      }
+    if (indexToFocus < 0) {
+      indexToFocus = focusableItems.length - 1;
+    }
 
-      if (indexToFocus >= focusableItems.length) {
-        indexToFocus = focusableItems.length - 1;
-      }
+    if (indexToFocus >= focusableItems.length) {
+      indexToFocus = 0;
+    }
 
-      if (indexToFocus !== currentItem) {
-        var nodeToFocus = focusableItems[indexToFocus];
-        nodeToFocus.ref.current.focus();
-      }
+    if (indexToFocus !== currentItem) {
+      var nodeToFocus = focusableItems[indexToFocus];
+      nodeToFocus.ref.current.focus();
     }
   }
 
@@ -197,6 +212,12 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
     return [-1, -1];
   }
 
+  useEffect(function () {
+    if (open && focusableItems.length > 0) {
+      focusItem();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [open, focusableItems]);
   useEffect(function () {
     if (open) {
       handleOpen();
@@ -217,12 +238,7 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
     "aria-label": label,
     tabIndex: -1,
     onKeyDown: handleKeyDown,
-    onBlur: handleBlur // eslint-disable-next-line react/forbid-dom-props
-    ,
-    style: {
-      left: "".concat(position[0], "px"),
-      top: "".concat(position[1], "px")
-    }
+    onBlur: handleBlur
   }), children));
   return isRoot ? open && /*#__PURE__*/createPortal(rendered, target) || null : rendered;
 });
@@ -247,6 +263,11 @@ Menu.propTypes = {
    */
   onClose: PropTypes.func,
 
+  /**
+   * Provide an optional function to be called when the Menu is opened.
+   */
+  onOpen: PropTypes.func,
+
   /**
    * Whether the Menu is open or not.
    */

package/es/components/Menu/MenuItem.js

@@ -126,6 +126,7 @@ var MenuItem = /*#__PURE__*/React__default.forwardRef(function MenuItem(_ref, fo
   function handleKeyDown(e) {
     if (hasChildren && match(e, ArrowRight)) {
       openSubmenu();
+      e.stopPropagation();
     }
 
     if (match(e, Enter) || match(e, Space)) {

package/es/components/MenuButton/index.js

@@ -0,0 +1,127 @@
+/**
+ * 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 { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { ChevronDown } from '@carbon/icons-react';
+import Button from '../Button/Button.js';
+import { Menu } from '../Menu/Menu.js';
+import { useAttachedMenu } from '../../internal/useAttachedMenu.js';
+import { useId } from '../../internal/useId.js';
+import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["children", "className", "disabled", "kind", "label", "size"];
+var spacing = 4; // top and bottom spacing between the button and the menu. in px
+
+var validButtonKinds = ['primary', 'tertiary', 'ghost'];
+var defaultButtonKind = 'primary';
+var MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_ref, forwardRef) {
+  var children = _ref.children,
+      className = _ref.className,
+      disabled = _ref.disabled,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? defaultButtonKind : _ref$kind,
+      label = _ref.label,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'lg' : _ref$size,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var id = useId('MenuButton');
+  var prefix = usePrefix();
+  var triggerRef = useRef(null);
+  var menuRef = useRef(null);
+  var ref = useMergedRefs([forwardRef, triggerRef]);
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useAttachedMenu = useAttachedMenu(triggerRef),
+      open = _useAttachedMenu.open,
+      x = _useAttachedMenu.x,
+      y = _useAttachedMenu.y,
+      hookOnClick = _useAttachedMenu.handleClick,
+      handleMousedown = _useAttachedMenu.handleMousedown,
+      handleClose = _useAttachedMenu.handleClose;
+
+  function handleClick() {
+    if (triggerRef.current) {
+      var _triggerRef$current$g = triggerRef.current.getBoundingClientRect(),
+          w = _triggerRef$current$g.width;
+
+      setWidth(w);
+      hookOnClick();
+    }
+  }
+
+  function handleOpen() {
+    menuRef.current.style.width = "".concat(width, "px");
+  }
+
+  var triggerClasses = cx("".concat(prefix, "--menu-button__trigger"), _defineProperty({}, "".concat(prefix, "--menu-button__trigger--open"), open), className);
+  var buttonKind = validButtonKinds.includes(kind) ? kind : defaultButtonKind;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
+    ref: ref,
+    className: triggerClasses,
+    size: size,
+    kind: buttonKind,
+    renderIcon: ChevronDown,
+    disabled: disabled,
+    "aria-haspopup": true,
+    "aria-expanded": open,
+    onClick: handleClick,
+    onMouseDown: handleMousedown,
+    "aria-owns": open ? id : null
+  }), label), /*#__PURE__*/React__default.createElement(Menu, {
+    ref: menuRef,
+    id: id,
+    label: label,
+    size: size,
+    open: open,
+    onClose: handleClose,
+    onOpen: handleOpen,
+    x: x,
+    y: [y[0] - spacing, y[1] + spacing]
+  }, children));
+});
+MenuButton.propTypes = {
+  /**
+   * A collection of MenuItems to be rendered as actions for this MenuButton.
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the MenuButton should be disabled, or not.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify the type of button to be used as the base for the trigger button.
+   */
+  kind: PropTypes.oneOf(validButtonKinds),
+
+  /**
+   * Provide the label to be renderd on the trigger button.
+   */
+  label: PropTypes.string.isRequired,
+
+  /**
+   * Specify the size of the button and menu.
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+};
+
+export { MenuButton };

package/es/components/Modal/Modal.js

@@ -20,12 +20,13 @@ import { usePrefix } from '../../internal/usePrefix.js';
 
 var _Modal$propTypes;
 
-var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside", "isFullWidth"];
+var _excluded = ["aria-label", "children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside", "isFullWidth"];
 var getInstanceId = setupGetInstanceId();
 var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
   var _classNames, _classNames2;
 
-  var children = _ref.children,
+  var ariaLabelProp = _ref['aria-label'],
+      children = _ref.children,
       className = _ref.className,
       modalHeading = _ref.modalHeading,
       modalLabel = _ref.modalLabel,
@@ -122,7 +123,7 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
     tabIndex: "-1",
     className: "".concat(modalCloseButtonClass, "__icon")
   }));
-  var ariaLabel = modalLabel || rest['aria-label'] || modalAriaLabel || modalHeading;
+  var ariaLabel = modalLabel || ariaLabelProp || modalAriaLabel || modalHeading;
   var getAriaLabelledBy = modalLabel ? modalLabelId : modalHeadingId;
   var hasScrollingContentProps = hasScrollingContent ? {
     tabIndex: 0,

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, objectSpread2 as _objectSpread2$1 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 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';
@@ -29,12 +29,14 @@ import { match } from '../../internal/keyboard/match.js';
 import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
 import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
-import { Space, Tab } from '../../internal/keyboard/keys.js';
+import { Space, Enter, Delete, Escape, Tab } from '../../internal/keyboard/keys.js';
 
+var _objectSpread2, _FilterableMultiSelec;
 var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
   var _cx, _cx2, _cx3, _cx4;
 
-  var ariaLabel = _ref.ariaLabel,
+  var ariaLabel = _ref['aria-label'],
+      deprecatedAriaLabel = _ref.ariaLabel,
       containerClassName = _ref.className,
       compareItems = _ref.compareItems,
       direction = _ref.direction,
@@ -90,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];
@@ -105,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');
@@ -117,7 +124,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
 
   var inline = type === 'inline';
   var showWarning = !invalid && warn;
-  var wrapperClasses = cx("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused), _cx));
+  var wrapperClasses = cx("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--multi-select--filterable__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused), _cx));
   var helperId = !helperText ? undefined : "filterablemultiselect-helper-text-".concat(filterableMultiSelectInstanceId);
   var labelId = "".concat(id, "-label");
   var titleClasses = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--label"), true), _defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
@@ -129,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);
     }
@@ -149,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;
 
@@ -246,7 +256,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
             isOpen = _ref4.isOpen,
             inputValue = _ref4.inputValue,
             selectedItem = _ref4.selectedItem;
-        var className = cx("".concat(prefix, "--multi-select"), "".concat(prefix, "--combo-box"), "".concat(prefix, "--multi-select--filterable"), [enabled ? null : containerClassName], (_cx5 = {}, _defineProperty(_cx5, "".concat(prefix, "--multi-select--invalid"), invalid), _defineProperty(_cx5, "".concat(prefix, "--multi-select--open"), isOpen), _defineProperty(_cx5, "".concat(prefix, "--multi-select--inline"), inline), _defineProperty(_cx5, "".concat(prefix, "--multi-select--selected"), selectedItem.length > 0), _defineProperty(_cx5, "".concat(prefix, "--multi-select--filterable--input-focused"), inputFocused), _cx5));
+        var className = cx("".concat(prefix, "--multi-select"), "".concat(prefix, "--combo-box"), "".concat(prefix, "--multi-select--filterable"), [enabled ? null : containerClassName], (_cx5 = {}, _defineProperty(_cx5, "".concat(prefix, "--multi-select--invalid"), invalid), _defineProperty(_cx5, "".concat(prefix, "--multi-select--invalid--focused"), invalid && inputFocused), _defineProperty(_cx5, "".concat(prefix, "--multi-select--open"), isOpen), _defineProperty(_cx5, "".concat(prefix, "--multi-select--inline"), inline), _defineProperty(_cx5, "".concat(prefix, "--multi-select--selected"), selectedItem.length > 0), _defineProperty(_cx5, "".concat(prefix, "--multi-select--filterable--input-focused"), inputFocused), _cx5));
         var rootProps = getRootProps({}, {
           suppressRefError: true
         });
@@ -291,6 +301,26 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
               event.stopPropagation();
             }
 
+            if (match(event, Enter)) {
+              handleOnMenuChange(true);
+            }
+
+            if (!disabled) {
+              if (match(event, Delete) || match(event, Escape)) {
+                if (isOpen) {
+                  handleOnMenuChange(true);
+                  clearInputValue();
+                  event.stopPropagation();
+                } else if (!isOpen) {
+                  clearInputValue();
+
+                  _clearSelection();
+
+                  event.stopPropagation();
+                }
+              }
+            }
+
             if (match(event, Tab)) {
               handleOnMenuChange(false);
             }
@@ -300,6 +330,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
           },
           onBlur: function onBlur() {
             setInputFocused(false);
+            setInputValue('');
           }
         });
         var menuProps = getMenuProps({
@@ -321,6 +352,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
         }, titleText ? /*#__PURE__*/React__default.createElement("label", _extends({
           className: titleClasses
         }, labelProps), titleText) : null, /*#__PURE__*/React__default.createElement(ListBox, {
+          "aria-label": deprecatedAriaLabel || ariaLabel,
           onFocus: isFluid ? handleFocus : null,
           onBlur: isFluid ? handleFocus : null,
           className: className,
@@ -411,125 +443,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
     }
   });
 });
-FilterableMultiSelect.propTypes = _objectSpread2(_objectSpread2({
-  /**
-   * 'aria-label' of the ListBox component.
-   */
-  ariaLabel: PropTypes.string,
-
-  /**
-   * Specify the direction of the multiselect dropdown. Can be either top or bottom.
-   */
-  direction: PropTypes.oneOf(['top', 'bottom']),
-
-  /**
-   * Disable the control
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Additional props passed to Downshift
-   */
-  downshiftProps: PropTypes.shape(Downshift.propTypes),
-
-  /**
-   * Specify whether the title text should be hidden or not
-   */
-  hideLabel: PropTypes.bool,
-
-  /**
-   * Specify a custom `id`
-   */
-  id: PropTypes.string.isRequired,
-
-  /**
-   * Allow users to pass in arbitrary items from their collection that are
-   * pre-selected
-   */
-  initialSelectedItems: PropTypes.array,
-
-  /**
-   * Is the current selection invalid?
-   */
-  invalid: PropTypes.bool,
-
-  /**
-   * If invalid, what is the error?
-   */
-  invalidText: PropTypes.node,
-
-  /**
-   * Function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
-   */
-  itemToElement: PropTypes.func,
-
-  /**
-   * Helper function passed to downshift that allows the library to render a
-   * given item to a string label. By default, it extracts the `label` field
-   * from a given item to serve as the item label in the list.
-   */
-  itemToString: PropTypes.func,
-
-  /**
-   * We try to stay as generic as possible here to allow individuals to pass
-   * in a collection of whatever kind of data structure they prefer
-   */
-  items: PropTypes.array.isRequired,
-
-  /**
-   * `true` to use the light version.
-   */
-  light: deprecate(PropTypes.bool, 'The `light` prop for `FilterableMultiSelect` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
-
-  /**
-   * Specify the locale of the control. Used for the default `compareItems`
-   * used for sorting the list of items in the control.
-   */
-  locale: PropTypes.string,
-
-  /**
-   * `onChange` is a utility for this controlled component to communicate to a
-   * consuming component what kind of internal state changes are occurring.
-   */
-  onChange: PropTypes.func,
-
-  /**
-   * `onInputValueChange` is a utility for this controlled component to communicate to
-   * the currently typed input.
-   */
-  onInputValueChange: PropTypes.func,
-
-  /**
-   * `onMenuChange` is a utility for this controlled component to communicate to a
-   * consuming component that the menu was opened(`true`)/closed(`false`).
-   */
-  onMenuChange: PropTypes.func,
-
-  /**
-   * Initialize the component with an open(`true`)/closed(`false`) menu.
-   */
-  open: PropTypes.bool,
-
-  /**
-   * Generic `placeholder` that will be used as the textual representation of
-   * what this field is for
-   */
-  placeholder: PropTypes.string,
-
-  /**
-   * Specify feedback (mode) of the selection.
-   * `top`: selected item jumps to top
-   * `fixed`: selected item stays at it's position
-   * `top-after-reopen`: selected item jump to top after reopen dropdown
-   */
-  selectionFeedback: PropTypes.oneOf(['top', 'fixed', 'top-after-reopen']),
-
-  /**
-   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
-   */
-  size: ListBoxSize
-}, sortingPropTypes), {}, {
+FilterableMultiSelect.propTypes = _objectSpread2$1(_objectSpread2$1((_objectSpread2 = {}, _defineProperty(_objectSpread2, 'aria-label', PropTypes.string), _defineProperty(_objectSpread2, "ariaLabel", deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _defineProperty(_objectSpread2, "direction", PropTypes.oneOf(['top', 'bottom'])), _defineProperty(_objectSpread2, "disabled", PropTypes.bool), _defineProperty(_objectSpread2, "downshiftProps", PropTypes.shape(Downshift.propTypes)), _defineProperty(_objectSpread2, "hideLabel", PropTypes.bool), _defineProperty(_objectSpread2, "id", PropTypes.string.isRequired), _defineProperty(_objectSpread2, "initialSelectedItems", PropTypes.array), _defineProperty(_objectSpread2, "invalid", PropTypes.bool), _defineProperty(_objectSpread2, "invalidText", PropTypes.node), _defineProperty(_objectSpread2, "itemToElement", PropTypes.func), _defineProperty(_objectSpread2, "itemToString", PropTypes.func), _defineProperty(_objectSpread2, "items", PropTypes.array.isRequired), _defineProperty(_objectSpread2, "light", deprecate(PropTypes.bool, 'The `light` prop for `FilterableMultiSelect` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.')), _defineProperty(_objectSpread2, "locale", PropTypes.string), _defineProperty(_objectSpread2, "onChange", PropTypes.func), _defineProperty(_objectSpread2, "onInputValueChange", PropTypes.func), _defineProperty(_objectSpread2, "onMenuChange", PropTypes.func), _defineProperty(_objectSpread2, "open", PropTypes.bool), _defineProperty(_objectSpread2, "placeholder", PropTypes.string), _defineProperty(_objectSpread2, "selectionFeedback", PropTypes.oneOf(['top', 'fixed', 'top-after-reopen'])), _defineProperty(_objectSpread2, "size", ListBoxSize), _objectSpread2), sortingPropTypes), {}, {
   /**
    * Callback function for translating ListBoxMenuIcon SVG title
    */
@@ -550,19 +464,7 @@ FilterableMultiSelect.propTypes = _objectSpread2(_objectSpread2({
    */
   warnText: PropTypes.node
 });
-FilterableMultiSelect.defaultProps = {
-  ariaLabel: 'Choose an item',
-  compareItems: defaultCompareItems,
-  direction: 'bottom',
-  disabled: false,
-  filterItems: defaultFilterItems,
-  initialSelectedItems: [],
-  itemToString: defaultItemToString,
-  locale: 'en',
-  sortItems: defaultSortItems,
-  open: false,
-  selectionFeedback: 'top-after-reopen'
-};
+FilterableMultiSelect.defaultProps = (_FilterableMultiSelec = {}, _defineProperty(_FilterableMultiSelec, 'aria-label', 'Choose an item'), _defineProperty(_FilterableMultiSelec, "compareItems", defaultCompareItems), _defineProperty(_FilterableMultiSelec, "direction", 'bottom'), _defineProperty(_FilterableMultiSelec, "disabled", false), _defineProperty(_FilterableMultiSelec, "filterItems", defaultFilterItems), _defineProperty(_FilterableMultiSelec, "initialSelectedItems", []), _defineProperty(_FilterableMultiSelec, "itemToString", defaultItemToString), _defineProperty(_FilterableMultiSelec, "locale", 'en'), _defineProperty(_FilterableMultiSelec, "sortItems", defaultSortItems), _defineProperty(_FilterableMultiSelec, "open", false), _defineProperty(_FilterableMultiSelec, "selectionFeedback", 'top-after-reopen'), _FilterableMultiSelec);
 var FilterableMultiSelect$1 = FilterableMultiSelect;
 
 export { FilterableMultiSelect$1 as default };

package/es/components/MultiSelect/MultiSelect.d.ts

@@ -114,7 +114,7 @@ export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<Item
     onChange?(data: OnChangeData<ItemType>): void;
     /**
      * `onMenuChange` is a utility for this controlled component to communicate to a
-     * consuming component that the menu was opend(`true`)/closed(`false`).
+     * consuming component that the menu was open(`true`)/closed(`false`).
      */
     onMenuChange?(open: boolean): void;
     /**