@carbon/react 1.24.0 → 1.25.0

package/lib/components/Dropdown/Dropdown.js

@@ -30,7 +30,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-var _excluded = ["className", "disabled", "direction", "items", "label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps", "readOnly"];
+var _Dropdown$propTypes;
+
+var _excluded = ["className", "disabled", "direction", "items", "label", "aria-label", "ariaLabel", "itemToString", "itemToElement", "renderSelectedItem", "type", "size", "onChange", "id", "titleText", "hideLabel", "helperText", "translateWithId", "light", "invalid", "invalidText", "warn", "warnText", "initialSelectedItem", "selectedItem", "downshiftProps", "readOnly"];
 
 var defaultItemToString = function defaultItemToString(item) {
   if (typeof item === 'string') {
@@ -56,7 +58,8 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       direction = _ref.direction,
       items = _ref.items,
       label = _ref.label,
-      ariaLabel = _ref.ariaLabel,
+      ariaLabel = _ref['aria-label'],
+      deprecatedAriaLabel = _ref.ariaLabel,
       _ref$itemToString = _ref.itemToString,
       itemToString = _ref$itemToString === void 0 ? defaultItemToString : _ref$itemToString,
       itemToElement = _ref.itemToElement,
@@ -171,7 +174,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
     onFocus: handleFocus,
     onBlur: handleFocus,
-    "aria-label": ariaLabel,
+    "aria-label": deprecatedAriaLabel || ariaLabel,
     size: size,
     className: className,
     invalid: invalid,
@@ -224,147 +227,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   }))), !inline && !invalid && !warn && helper);
 });
 Dropdown.displayName = 'Dropdown';
-Dropdown.propTypes = {
-  /**
-   * 'aria-label' of the ListBox component.
-   */
-  ariaLabel: PropTypes__default["default"].string,
-
-  /**
-   * Provide a custom className to be applied on the bx--dropdown node
-   */
-  className: PropTypes__default["default"].string,
-
-  /**
-   * Specify the direction of the 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"].object,
-
-  /**
-   * Provide helper text that is used alongside the control label for
-   * additional help
-   */
-  helperText: PropTypes__default["default"].node,
-
-  /**
-   * 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 an arbitrary item or a string (in case their items are an array of strings)
-   * from their collection that are pre-selected
-   */
-  initialSelectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
-
-  /**
-   * Specify if the currently selected value is invalid.
-   */
-  invalid: PropTypes__default["default"].bool,
-
-  /**
-   * Message which is displayed if the value is invalid.
-   */
-  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,
-
-  /**
-   * Generic `label` that will be used as the textual representation of what
-   * this field is for
-   */
-  label: PropTypes__default["default"].node.isRequired,
-
-  /**
-   * `true` to use the light version.
-   */
-  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Dropdown` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
-
-  /**
-   * `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,
-
-  /**
-   * Whether or not the Dropdown is readonly
-   */
-  readOnly: PropTypes__default["default"].bool,
-
-  /**
-   * An optional callback to render the currently selected item as a react element instead of only
-   * as a string.
-   */
-  renderSelectedItem: PropTypes__default["default"].func,
-
-  /**
-   * In the case you want to control the dropdown selection entirely.
-   */
-  selectedItem: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number]),
-
-  /**
-   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
-   */
-  size: ListBoxPropTypes.ListBoxSize,
-
-  /**
-   * Provide the title text that will be read by a screen reader when
-   * visiting this control
-   */
-  titleText: PropTypes__default["default"].node.isRequired,
-
-  /**
-   * Callback function for translating ListBoxMenuIcon SVG title
-   */
-  translateWithId: PropTypes__default["default"].func,
-
-  /**
-   * The dropdown type, `default` or `inline`
-   */
-  type: ListBoxPropTypes.ListBoxType,
-
-  /**
-   * Specify whether the control is currently in warning state
-   */
-  warn: PropTypes__default["default"].bool,
-
-  /**
-   * Provide the text that is displayed when the control is in warning state
-   */
-  warnText: PropTypes__default["default"].node
-};
+Dropdown.propTypes = (_Dropdown$propTypes = {}, _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "direction", PropTypes__default["default"].oneOf(['top', 'bottom'])), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "disabled", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "downshiftProps", PropTypes__default["default"].object), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "helperText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "hideLabel", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "id", PropTypes__default["default"].string.isRequired), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "initialSelectedItem", PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number])), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "invalid", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "invalidText", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "itemToElement", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "itemToString", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "items", PropTypes__default["default"].array.isRequired), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "label", PropTypes__default["default"].node.isRequired), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "light", deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `Dropdown` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.')), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "onChange", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "readOnly", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "renderSelectedItem", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "selectedItem", PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string, PropTypes__default["default"].number])), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "size", ListBoxPropTypes.ListBoxSize), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "titleText", PropTypes__default["default"].node.isRequired), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "translateWithId", PropTypes__default["default"].func), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "type", ListBoxPropTypes.ListBoxType), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "warn", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_Dropdown$propTypes, "warnText", PropTypes__default["default"].node), _Dropdown$propTypes);
 Dropdown.defaultProps = {
   disabled: false,
   type: 'default',

package/lib/components/FileUploader/FileUploader.js

@@ -187,8 +187,8 @@ var FileUploader = /*#__PURE__*/function (_React$Component) {
         }, name), /*#__PURE__*/React__default["default"].createElement("span", {
           className: "".concat(prefix, "--file__state-container")
         }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
+          name: name,
           iconDescription: iconDescription,
-          "aria-describedby": name,
           status: filenameStatus,
           onKeyDown: function onKeyDown(evt) {
             if (match.matches(evt, [keys.Enter, keys.Space])) {

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -15,6 +15,8 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var events = require('../../tools/events.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -24,10 +26,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["accept", "className", "id", "disabled", "labelText", "multiple", "name", "onAddFiles", "pattern", "role", "tabIndex", "innerRef"];
+var _excluded = ["accept", "className", "id", "disabled", "labelText", "multiple", "name", "onAddFiles", "onClick", "pattern", "innerRef"];
 
 function FileUploaderDropContainer(_ref) {
-  var _classNames2;
+  var _classNames;
 
   var accept = _ref.accept,
       className = _ref.className,
@@ -37,9 +39,8 @@ function FileUploaderDropContainer(_ref) {
       multiple = _ref.multiple,
       name = _ref.name,
       onAddFiles = _ref.onAddFiles,
+      onClick = _ref.onClick,
       pattern = _ref.pattern,
-      role = _ref.role,
-      tabIndex = _ref.tabIndex,
       innerRef = _ref.innerRef,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
@@ -54,8 +55,7 @@ function FileUploaderDropContainer(_ref) {
       isActive = _useState2[0],
       setActive = _useState2[1];
 
-  var labelClasses = cx__default["default"]("".concat(prefix, "--file-browse-btn"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--file-browse-btn--disabled"), disabled));
-  var dropareaClasses = cx__default["default"]("".concat(prefix, "--file__drop-container"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--file__drop-container--drag-over"), isActive), _rollupPluginBabelHelpers.defineProperty(_classNames2, className, className), _classNames2));
+  var dropareaClasses = cx__default["default"]("".concat(prefix, "--file__drop-container"), "".concat(prefix, "--file-browse-btn"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--file__drop-container--drag-over"), isActive), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--file-browse-btn--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames));
   /**
    * Filters the array of added files based on file type restrictions
    * @param {Event} event - Event object, used to get the list of files added
@@ -100,6 +100,12 @@ function FileUploaderDropContainer(_ref) {
     });
   }
 
+  var handleClick = function handleClick() {
+    if (!disabled) {
+      inputRef.current.click();
+    }
+  };
+
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--file"),
     onDragOver: function onDragOver(evt) {
@@ -135,20 +141,21 @@ function FileUploaderDropContainer(_ref) {
       setActive(false);
       handleChange(evt);
     }
-  }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    type: "button",
+    className: dropareaClasses,
     ref: innerRef,
-    className: labelClasses,
-    htmlFor: uid,
-    tabIndex: tabIndex || 0,
     onKeyDown: function onKeyDown(evt) {
       if (match.matches(evt, [keys.Enter, keys.Space])) {
+        evt.preventDefault();
         inputRef.current.click();
       }
-    }
-  }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: dropareaClasses,
-    role: role || 'button'
-  }, labelText)), /*#__PURE__*/React__default["default"].createElement("input", {
+    },
+    onClick: events.composeEventHandlers([onClick, handleClick])
+  }, rest), labelText), /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: uid,
+    className: "".concat(prefix, "--visually-hidden")
+  }, labelText), /*#__PURE__*/React__default["default"].createElement("input", {
     type: "file",
     id: uid,
     className: "".concat(prefix, "--file-input"),
@@ -208,6 +215,12 @@ FileUploaderDropContainer.propTypes = {
    */
   onAddFiles: PropTypes__default["default"].func,
 
+  /**
+   * Provide an optional function to be called when the button element
+   * is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
   /**
    * Provide a custom regex pattern for the acceptedTypes
    */
@@ -216,15 +229,14 @@ FileUploaderDropContainer.propTypes = {
   /**
    * Provide an accessibility role for the `<FileUploaderButton>`
    */
-  role: PropTypes__default["default"].string,
+  role: deprecate["default"](PropTypes__default["default"].number, 'The `role` prop for `FileUploaderButton` has ' + 'been deprecated since it now renders a button element by default, and has an implicit role of button.'),
 
   /**
    * Provide a custom tabIndex value for the `<FileUploaderButton>`
    */
-  tabIndex: PropTypes__default["default"].number
+  tabIndex: deprecate["default"](PropTypes__default["default"].number, 'The `tabIndex` prop for `FileUploaderButton` has ' + 'been deprecated since it now renders a button element by default.')
 };
 FileUploaderDropContainer.defaultProps = {
-  tabIndex: 0,
   labelText: 'Add file',
   multiple: false,
   onAddFiles: function onAddFiles() {},

package/lib/components/FileUploader/FileUploaderItem.js

@@ -76,13 +76,14 @@ function FileUploaderItem(_ref) {
   }, name), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--file__state-container")
   }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
+    name: name,
     iconDescription: iconDescription,
-    "aria-describedby": name,
     status: status,
     invalid: invalid,
     onKeyDown: function onKeyDown(evt) {
       if (match.matches(evt, [keys.Enter, keys.Space])) {
         if (status === 'edit') {
+          evt.preventDefault();
           onDelete(evt, {
             uuid: id
           });

package/lib/components/FileUploader/Filename.js

@@ -23,12 +23,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _Close;
 
-var _excluded = ["iconDescription", "status", "invalid"];
+var _excluded = ["iconDescription", "status", "invalid", "name"];
 
 function Filename(_ref) {
   var iconDescription = _ref.iconDescription,
       status = _ref.status,
       invalid = _ref.invalid,
+      name = _ref.name,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
@@ -45,7 +46,7 @@ function Filename(_ref) {
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
         className: "".concat(prefix, "--file-invalid")
       }), /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
-        "aria-label": iconDescription,
+        "aria-label": "".concat(iconDescription, " - ").concat(name),
         className: "".concat(prefix, "--file-close"),
         type: "button"
       }, rest), _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
@@ -74,6 +75,11 @@ Filename.propTypes = {
    */
   invalid: PropTypes__default["default"].bool,
 
+  /**
+   * Name of the uploaded file
+   */
+  name: PropTypes__default["default"].string,
+
   /**
    * Status of the file upload
    */

package/lib/components/FluidTextArea/FluidTextArea.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var TextArea = require('../TextArea/TextArea.js');
+require('../TextArea/TextArea.Skeleton.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
@@ -135,7 +136,17 @@ FluidTextArea.propTypes = {
   /**
    * Provide the current value of the `<textarea>`
    */
-  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes__default["default"].node
 };
 
 exports["default"] = FluidTextArea;

package/lib/components/IconButton/index.js

@@ -13,6 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var Button = require('../Button/Button.js');
+require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var cx = require('classnames');

package/lib/components/ListBox/ListBoxSelection.js

@@ -15,8 +15,6 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -57,25 +55,10 @@ var ListBoxSelection = function ListBoxSelection(_ref) {
     }
   };
 
-  var handleOnKeyDown = function handleOnKeyDown(event) {
-    event.stopPropagation();
-
-    if (disabled || readOnly) {
-      return;
-    } // When a user hits ENTER, we'll clear the selection
-
-
-    if (match.match(event.code, keys.Enter)) {
-      clearSelection(event);
-
-      if (onClearSelection) {
-        onClearSelection(event);
-      }
-    }
-  };
-
   var description = selectionCount ? t('clear.all') : t('clear.selection');
   var tagClasses = cx__default["default"]("".concat(prefix, "--tag"), "".concat(prefix, "--tag--filter"), "".concat(prefix, "--tag--high-contrast"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--tag--disabled"), disabled));
+  /* eslint-disable jsx-a11y/click-events-have-key-events */
+
   return selectionCount ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: tagClasses
   }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -83,19 +66,17 @@ var ListBoxSelection = function ListBoxSelection(_ref) {
     title: "".concat(selectionCount)
   }, selectionCount), /*#__PURE__*/React__default["default"].createElement("div", {
     role: "button",
-    tabIndex: disabled ? -1 : 0,
+    tabIndex: -1,
     className: "".concat(prefix, "--tag__close-icon"),
     onClick: handleOnClick,
-    onKeyDown: handleOnKeyDown,
     "aria-label": t('clear.all'),
     title: description,
     "aria-disabled": readOnly ? true : undefined
   }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)))) : /*#__PURE__*/React__default["default"].createElement("div", {
     role: "button",
     className: className,
-    tabIndex: disabled ? -1 : 0,
+    tabIndex: -1,
     onClick: handleOnClick,
-    onKeyDown: handleOnKeyDown,
     "aria-label": description,
     title: description
   }, selectionCount, _Close2 || (_Close2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));

package/lib/components/ListBox/next/ListBoxSelection.js

@@ -15,8 +15,6 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../../internal/usePrefix.js');
-var match = require('../../../internal/keyboard/match.js');
-var keys = require('../../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -62,23 +60,6 @@ function ListBoxSelection(_ref) {
     }
   }
 
-  function onKeyDown(event) {
-    event.stopPropagation();
-
-    if (disabled) {
-      return;
-    } // When a user hits ENTER, we'll clear the selection
-
-
-    if (match.match(event, keys.Enter)) {
-      clearSelection(event);
-
-      if (onClearSelection) {
-        onClearSelection(event);
-      }
-    }
-  }
-
   if (selectionCount) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: tagClasses
@@ -90,8 +71,7 @@ function ListBoxSelection(_ref) {
       className: "".concat(prefix, "--tag__close-icon"),
       disabled: disabled,
       onClick: onClick,
-      onKeyDown: onKeyDown,
-      tabIndex: disabled ? -1 : 0,
+      tabIndex: -1,
       title: description,
       type: "button"
     }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null))));
@@ -102,8 +82,7 @@ function ListBoxSelection(_ref) {
     className: className,
     disabled: disabled,
     onClick: onClick,
-    onKeyDown: onKeyDown,
-    tabIndex: disabled ? -1 : 0,
+    tabIndex: -1,
     title: description,
     type: "button"
   }), _Close2 || (_Close2 = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)));

package/lib/components/Menu/Menu.js

@@ -26,7 +26,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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["default"].forwardRef(function Menu(_ref, forwardRef) {
@@ -36,6 +36,7 @@ var Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_ref,
       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,
@@ -77,7 +78,7 @@ var Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_ref,
       setPosition = _useState2[1];
 
   var focusableItems = childContext.state.items.filter(function (item) {
-    return !item.disabled;
+    return !item.disabled && item.ref.current;
   });
 
   function returnFocus() {
@@ -89,8 +90,15 @@ var Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_ref,
   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();
+      }
     }
   }
 
@@ -113,39 +121,46 @@ var Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_ref,
   }
 
   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.match(e, keys.Escape) || !isRoot && match.match(e, keys.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.match(e, keys.ArrowUp)) {
-        indexToFocus = currentItem === -1 ? focusableItems.length - 1 : indexToFocus - 1;
+        indexToFocus = indexToFocus - 1;
       }
 
       if (match.match(e, keys.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();
     }
   }
 
@@ -207,6 +222,12 @@ var Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_ref,
     return [-1, -1];
   }
 
+  React.useEffect(function () {
+    if (open && focusableItems.length > 0) {
+      focusItem();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [open, focusableItems]);
   React.useEffect(function () {
     if (open) {
       handleOpen();
@@ -227,12 +248,7 @@ var Menu = /*#__PURE__*/React__default["default"].forwardRef(function Menu(_ref,
     "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__*/ReactDOM.createPortal(rendered, target) || null : rendered;
 });
@@ -257,6 +273,11 @@ Menu.propTypes = {
    */
   onClose: PropTypes__default["default"].func,
 
+  /**
+   * Provide an optional function to be called when the Menu is opened.
+   */
+  onOpen: PropTypes__default["default"].func,
+
   /**
    * Whether the Menu is open or not.
    */

package/lib/components/Menu/MenuItem.js

@@ -136,6 +136,7 @@ var MenuItem = /*#__PURE__*/React__default["default"].forwardRef(function MenuIt
   function handleKeyDown(e) {
     if (hasChildren && match.match(e, keys.ArrowRight)) {
       openSubmenu();
+      e.stopPropagation();
     }
 
     if (match.match(e, keys.Enter) || match.match(e, keys.Space)) {