@carbon/react 1.24.0 → 1.25.0

package/lib/components/MenuButton/index.js

@@ -0,0 +1,137 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
+var iconsReact = require('@carbon/icons-react');
+var Button = require('../Button/Button.js');
+var Menu = require('../Menu/Menu.js');
+var useAttachedMenu = require('../../internal/useAttachedMenu.js');
+var useId = require('../../internal/useId.js');
+var useMergedRefs = require('../../internal/useMergedRefs.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+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["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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var id = useId.useId('MenuButton');
+  var prefix = usePrefix.usePrefix();
+  var triggerRef = React.useRef(null);
+  var menuRef = React.useRef(null);
+  var ref = useMergedRefs.useMergedRefs([forwardRef, triggerRef]);
+
+  var _useState = React.useState(0),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var _useAttachedMenu = 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__default["default"]("".concat(prefix, "--menu-button__trigger"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--menu-button__trigger--open"), open), className);
+  var buttonKind = validButtonKinds.includes(kind) ? kind : defaultButtonKind;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({}, rest, {
+    ref: ref,
+    className: triggerClasses,
+    size: size,
+    kind: buttonKind,
+    renderIcon: iconsReact.ChevronDown,
+    disabled: disabled,
+    "aria-haspopup": true,
+    "aria-expanded": open,
+    onClick: handleClick,
+    onMouseDown: handleMousedown,
+    "aria-owns": open ? id : null
+  }), label), /*#__PURE__*/React__default["default"].createElement(Menu.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__default["default"].node.isRequired,
+
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the MenuButton should be disabled, or not.
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the type of button to be used as the base for the trigger button.
+   */
+  kind: PropTypes__default["default"].oneOf(validButtonKinds),
+
+  /**
+   * Provide the label to be renderd on the trigger button.
+   */
+  label: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Specify the size of the button and menu.
+   */
+  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg'])
+};
+
+exports.MenuButton = MenuButton;

package/lib/components/Modal/Modal.js

@@ -30,12 +30,13 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 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["default"]();
 var Modal = /*#__PURE__*/React__default["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,
@@ -132,7 +133,7 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_re
     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/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -43,10 +43,12 @@ var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var _objectSpread2, _FilterableMultiSelec;
 var FilterableMultiSelect = /*#__PURE__*/React__default["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,
@@ -129,7 +131,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
 
   var inline = type === 'inline';
   var showWarning = !invalid && warn;
-  var wrapperClasses = cx__default["default"]("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--focus"), isFluid && isFocused), _cx));
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--multi-select__wrapper"), "".concat(prefix, "--multi-select--filterable__wrapper"), "".concat(prefix, "--list-box__wrapper"), [enabled ? containerClassName : null], (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--multi-select__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--inline--invalid"), inline && invalid), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--list-box__wrapper--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.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__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--visually-hidden"), hideLabel), _cx2));
@@ -258,7 +260,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
             isOpen = _ref4.isOpen,
             inputValue = _ref4.inputValue,
             selectedItem = _ref4.selectedItem;
-        var className = cx__default["default"]("".concat(prefix, "--multi-select"), "".concat(prefix, "--combo-box"), "".concat(prefix, "--multi-select--filterable"), [enabled ? null : containerClassName], (_cx5 = {}, _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--open"), isOpen), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--selected"), selectedItem.length > 0), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--filterable--input-focused"), inputFocused), _cx5));
+        var className = cx__default["default"]("".concat(prefix, "--multi-select"), "".concat(prefix, "--combo-box"), "".concat(prefix, "--multi-select--filterable"), [enabled ? null : containerClassName], (_cx5 = {}, _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--invalid--focused"), invalid && inputFocused), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--open"), isOpen), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--selected"), selectedItem.length > 0), _rollupPluginBabelHelpers.defineProperty(_cx5, "".concat(prefix, "--multi-select--filterable--input-focused"), inputFocused), _cx5));
         var rootProps = getRootProps({}, {
           suppressRefError: true
         });
@@ -303,6 +305,26 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
               event.stopPropagation();
             }
 
+            if (match.match(event, keys.Enter)) {
+              handleOnMenuChange(true);
+            }
+
+            if (!disabled) {
+              if (match.match(event, keys.Delete) || match.match(event, keys.Escape)) {
+                if (isOpen) {
+                  handleOnMenuChange(true);
+                  clearInputValue();
+                  event.stopPropagation();
+                } else if (!isOpen) {
+                  clearInputValue();
+
+                  _clearSelection();
+
+                  event.stopPropagation();
+                }
+              }
+            }
+
             if (match.match(event, keys.Tab)) {
               handleOnMenuChange(false);
             }
@@ -312,6 +334,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
           },
           onBlur: function onBlur() {
             setInputFocused(false);
+            setInputValue('');
           }
         });
         var menuProps = getMenuProps({
@@ -333,6 +356,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
         }, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
           className: titleClasses
         }, labelProps), titleText) : null, /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
+          "aria-label": deprecatedAriaLabel || ariaLabel,
           onFocus: isFluid ? handleFocus : null,
           onBlur: isFluid ? handleFocus : null,
           className: className,
@@ -423,125 +447,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(fu
     }
   });
 });
-FilterableMultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
-  /**
-   * 'aria-label' of the ListBox component.
-   */
-  ariaLabel: PropTypes__default["default"].string,
-
-  /**
-   * Specify the direction of the multiselect dropdown. Can be either top or bottom.
-   */
-  direction: PropTypes__default["default"].oneOf(['top', 'bottom']),
-
-  /**
-   * Disable the control
-   */
-  disabled: PropTypes__default["default"].bool,
-
-  /**
-   * Additional props passed to Downshift
-   */
-  downshiftProps: PropTypes__default["default"].shape(Downshift__default["default"].propTypes),
-
-  /**
-   * Specify whether the title text should be hidden or not
-   */
-  hideLabel: PropTypes__default["default"].bool,
-
-  /**
-   * Specify a custom `id`
-   */
-  id: PropTypes__default["default"].string.isRequired,
-
-  /**
-   * Allow users to pass in arbitrary items from their collection that are
-   * pre-selected
-   */
-  initialSelectedItems: PropTypes__default["default"].array,
-
-  /**
-   * Is the current selection invalid?
-   */
-  invalid: PropTypes__default["default"].bool,
-
-  /**
-   * If invalid, what is the error?
-   */
-  invalidText: PropTypes__default["default"].node,
-
-  /**
-   * Function to render items as custom components instead of strings.
-   * Defaults to null and is overridden by a getter
-   */
-  itemToElement: PropTypes__default["default"].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__default["default"].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__default["default"].array.isRequired,
-
-  /**
-   * `true` to use the light version.
-   */
-  light: deprecate["default"](PropTypes__default["default"].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__default["default"].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__default["default"].func,
-
-  /**
-   * `onInputValueChange` is a utility for this controlled component to communicate to
-   * the currently typed input.
-   */
-  onInputValueChange: PropTypes__default["default"].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__default["default"].func,
-
-  /**
-   * Initialize the component with an open(`true`)/closed(`false`) menu.
-   */
-  open: PropTypes__default["default"].bool,
-
-  /**
-   * Generic `placeholder` that will be used as the textual representation of
-   * what this field is for
-   */
-  placeholder: PropTypes__default["default"].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__default["default"].oneOf(['top', 'fixed', 'top-after-reopen']),
-
-  /**
-   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
-   */
-  size: ListBoxPropTypes.ListBoxSize
-}, MultiSelectPropTypes.sortingPropTypes), {}, {
+FilterableMultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2((_objectSpread2 = {}, _rollupPluginBabelHelpers.defineProperty(_objectSpread2, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "direction", PropTypes__default["default"].oneOf(['top', 'bottom'])), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "disabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "downshiftProps", PropTypes__default["default"].shape(Downshift__default["default"].propTypes)), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "hideLabel", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "id", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "initialSelectedItems", PropTypes__default["default"].array), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "invalid", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "invalidText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "itemToElement", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "itemToString", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "items", PropTypes__default["default"].array.isRequired), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "light", deprecate["default"](PropTypes__default["default"].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.')), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "locale", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "onChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "onInputValueChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "onMenuChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "open", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "placeholder", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "selectionFeedback", PropTypes__default["default"].oneOf(['top', 'fixed', 'top-after-reopen'])), _rollupPluginBabelHelpers.defineProperty(_objectSpread2, "size", ListBoxPropTypes.ListBoxSize), _objectSpread2), MultiSelectPropTypes.sortingPropTypes), {}, {
   /**
    * Callback function for translating ListBoxMenuIcon SVG title
    */
@@ -562,19 +468,7 @@ FilterableMultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollu
    */
   warnText: PropTypes__default["default"].node
 });
-FilterableMultiSelect.defaultProps = {
-  ariaLabel: 'Choose an item',
-  compareItems: sorting.defaultCompareItems,
-  direction: 'bottom',
-  disabled: false,
-  filterItems: filter.defaultFilterItems,
-  initialSelectedItems: [],
-  itemToString: itemToString.defaultItemToString,
-  locale: 'en',
-  sortItems: sorting.defaultSortItems,
-  open: false,
-  selectionFeedback: 'top-after-reopen'
-};
+FilterableMultiSelect.defaultProps = (_FilterableMultiSelec = {}, _rollupPluginBabelHelpers.defineProperty(_FilterableMultiSelec, 'aria-label', 'Choose an item'), _rollupPluginBabelHelpers.defineProperty(_FilterableMultiSelec, "compareItems", sorting.defaultCompareItems), _rollupPluginBabelHelpers.defineProperty(_FilterableMultiSelec, "direction", 'bottom'), _rollupPluginBabelHelpers.defineProperty(_FilterableMultiSelec, "disabled", false), _rollupPluginBabelHelpers.defineProperty(_FilterableMultiSelec, "filterItems", filter.defaultFilterItems), _rollupPluginBabelHelpers.defineProperty(_FilterableMultiSelec, "initialSelectedItems", []), _rollupPluginBabelHelpers.defineProperty(_FilterableMultiSelec, "itemToString", itemToString.defaultItemToString), _rollupPluginBabelHelpers.defineProperty(_FilterableMultiSelec, "locale", 'en'), _rollupPluginBabelHelpers.defineProperty(_FilterableMultiSelec, "sortItems", sorting.defaultSortItems), _rollupPluginBabelHelpers.defineProperty(_FilterableMultiSelec, "open", false), _rollupPluginBabelHelpers.defineProperty(_FilterableMultiSelec, "selectionFeedback", 'top-after-reopen'), _FilterableMultiSelec);
 var FilterableMultiSelect$1 = FilterableMultiSelect;
 
 exports["default"] = FilterableMultiSelect$1;

package/lib/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;
     /**

package/lib/components/MultiSelect/MultiSelect.js

@@ -123,20 +123,25 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
       isFocused = _useState4[0],
       setIsFocused = _useState4[1];
 
-  var _useState5 = React.useState(open),
+  var _useState5 = React.useState(false),
       _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      isOpen = _useState6[0],
-      setIsOpen = _useState6[1];
+      inputFocused = _useState6[0],
+      setInputFocused = _useState6[1];
 
-  var _useState7 = React.useState(open),
+  var _useState7 = React.useState(open || false),
       _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      prevOpenProp = _useState8[0],
-      setPrevOpenProp = _useState8[1];
+      isOpen = _useState8[0],
+      setIsOpen = _useState8[1];
 
-  var _useState9 = React.useState([]),
+  var _useState9 = React.useState(open),
       _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-      topItems = _useState10[0],
-      setTopItems = _useState10[1];
+      prevOpenProp = _useState10[0],
+      setPrevOpenProp = _useState10[1];
+
+  var _useState11 = React.useState([]),
+      _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
+      topItems = _useState12[0],
+      setTopItems = _useState12[1];
 
   var _useSelection = Selection.useSelection({
     disabled: disabled,
@@ -176,7 +181,14 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
       getItemProps = _useSelect.getItemProps,
       selectedItem = _useSelect.selectedItem;
 
-  var toggleButtonProps = getToggleButtonProps();
+  var toggleButtonProps = getToggleButtonProps({
+    onFocus: function onFocus() {
+      setInputFocused(true);
+    },
+    onBlur: function onBlur() {
+      setInputFocused(false);
+    }
+  });
   var mergedRef = mergeRefs["default"](toggleButtonProps.ref, ref);
   var selectedItems = selectedItem;
   /**
@@ -208,7 +220,7 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
   var helperId = !helperText ? undefined : "multiselect-helper-text-".concat(multiSelectInstanceId);
   var fieldLabelId = "multiselect-field-label-".concat(multiSelectInstanceId);
   var helperClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var className = cx__default["default"]("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--readonly"), readOnly), _cx4)); // needs to be capitalized for react to render it correctly
+  var className = cx__default["default"]("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid--focused"), invalid && inputFocused), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--multi-select--readonly"), readOnly), _cx4)); // needs to be capitalized for react to render it correctly
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
   var ItemToElement = itemToElement;
@@ -262,12 +274,20 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
   }
 
   var onKeyDown = function onKeyDown(e) {
-    if (match.match(e, keys.Delete) && !disabled) {
-      clearSelection();
-      e.stopPropagation();
+    if (!disabled) {
+      if (match.match(e, keys.Delete) || match.match(e, keys.Escape)) {
+        clearSelection();
+        e.stopPropagation();
+      }
+
+      if (match.match(e, keys.Space) || match.match(e, keys.ArrowDown)) {
+        setIsOpenWrapper(true);
+      }
     }
   };
 
+  var multiSelectFieldWrapperClasses = cx__default["default"]("".concat(prefix, "--list-box__field--wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--list-box__field--wrapper--input-focused"), inputFocused));
+
   var handleFocus = function handleFocus(evt) {
     evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
   };
@@ -313,6 +333,15 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
     className: "".concat(prefix, "--list-box__invalid-icon")
   }), showWarning && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
     className: "".concat(prefix, "--list-box__invalid-icon ").concat(prefix, "--list-box__invalid-icon--warning")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: multiSelectFieldWrapperClasses
+  }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index$1["default"].Selection, {
+    readOnly: readOnly,
+    clearSelection: !disabled && !readOnly ? clearSelection : noop,
+    selectionCount: selectedItems.length // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    ,
+    translateWithId: translateWithId,
+    disabled: disabled
   }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
     type: "button",
     className: "".concat(prefix, "--list-box__field"),
@@ -321,20 +350,13 @@ var MultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function Mul
   }, toggleButtonProps, {
     ref: mergedRef,
     onKeyDown: onKeyDown
-  }, readOnlyEventHandlers), selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index$1["default"].Selection, {
-    readOnly: readOnly,
-    clearSelection: !disabled && !readOnly ? clearSelection : noop,
-    selectionCount: selectedItems.length // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    ,
-    translateWithId: translateWithId,
-    disabled: disabled
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, readOnlyEventHandlers), /*#__PURE__*/React__default["default"].createElement("span", {
     id: fieldLabelId,
     className: "".concat(prefix, "--list-box__label")
   }, label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
-    isOpen: !!isOpen,
+    isOpen: isOpen,
     translateWithId: translateWithId
-  })), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, _rollupPluginBabelHelpers["extends"]({
+  }))), /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, _rollupPluginBabelHelpers["extends"]({
     "aria-multiselectable": "true"
   }, getMenuProps()), isOpen && // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(items, sortOptions).map(function (item, index) {
@@ -478,7 +500,7 @@ MultiSelect.propTypes = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBab
 
   /**
    * `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: PropTypes__default["default"].func,