@carbon/react 1.17.0-rc.2 → 1.18.0-rc.0

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -146,6 +146,5 @@ FluidMultiSelect.propTypes = {
    */
   warnText: PropTypes.node
 };
-var FluidMultiSelect$1 = FluidMultiSelect;
 
-export { FluidMultiSelect$1 as default };
+export { FluidMultiSelect as default };

package/es/components/FluidSelect/FluidSelect.Skeleton.js

@@ -36,6 +36,5 @@ FluidSelectSkeleton.propTypes = {
    */
   className: PropTypes.string
 };
-var FluidSelectSkeleton$1 = FluidSelectSkeleton;
 
-export { FluidSelectSkeleton$1 as default };
+export { FluidSelectSkeleton as default };

package/es/components/FluidSelect/FluidSelect.js

@@ -9,6 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
+import '../Select/Select.Skeleton.js';
 import Select from '../Select/Select.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';
@@ -88,6 +89,5 @@ FluidSelect.propTypes = {
    */
   warnText: PropTypes.node
 };
-var FluidSelect$1 = FluidSelect;
 
-export { FluidSelect$1 as default };
+export { FluidSelect as default };

package/es/components/FluidTextArea/FluidTextArea.js

@@ -9,6 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
+import '../TextArea/TextArea.Skeleton.js';
 import TextArea from '../TextArea/TextArea.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';

package/es/components/FluidTextInput/FluidTextInput.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import '../TextInput/index.js';
+import '../TextInput/ControlledPasswordInput.js';
 import PasswordInput from '../TextInput/PasswordInput.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { FormContext } from '../FluidForm/FormContext.js';

package/es/components/Form/Form.js

@@ -36,6 +36,5 @@ Form.propTypes = {
    */
   className: PropTypes.string
 };
-var Form$1 = Form;
 
-export { Form$1 as default };
+export { Form as default };

package/es/components/FormGroup/FormGroup.js

@@ -81,6 +81,5 @@ FormGroup.defaultProps = {
   message: false,
   messageText: ''
 };
-var FormGroup$1 = FormGroup;
 
-export { FormGroup$1 as default };
+export { FormGroup as default };

package/es/components/Icon/Icon.Skeleton.js

@@ -32,6 +32,5 @@ IconSkeleton.propTypes = {
    */
   className: PropTypes.string
 };
-var IconSkeleton$1 = IconSkeleton;
 
-export { IconSkeleton$1 as default };
+export { IconSkeleton as default };

package/es/components/IconButton/index.js

@@ -8,8 +8,10 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
+import '../Button/Button.Skeleton.js';
 import Button from '../Button/Button.js';
-import { Tooltip } from '../Tooltip/next/Tooltip.js';
+import '../Tooltip/DefinitionTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import cx from 'classnames';
 

package/es/components/IdPrefix/index.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright IBM Corp. 2016, 2022
+ *
+ * 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__default from 'react';
+import { IdPrefixContext } from '../../internal/useIdPrefix.js';
+
+function IdPrefix(_ref) {
+  var children = _ref.children,
+      prefix = _ref.prefix;
+  return /*#__PURE__*/React__default.createElement(IdPrefixContext.Provider, {
+    value: prefix
+  }, children);
+}
+
+IdPrefix.propTypes = {
+  children: PropTypes.node,
+
+  /**
+   * The value used to prefix the auto-generated id placed on some DOM elements
+   */
+  prefix: PropTypes.string
+};
+
+export { IdPrefix };

package/es/components/InlineCheckbox/InlineCheckbox.js

@@ -116,6 +116,5 @@ InlineCheckbox.propTypes = {
    */
   title: PropTypes.string
 };
-var InlineCheckbox$1 = InlineCheckbox;
 
-export { InlineCheckbox$1 as default };
+export { InlineCheckbox as default };

package/es/components/Link/Link.js

@@ -93,6 +93,5 @@ Link.propTypes = {
    */
   visited: PropTypes.bool
 };
-var Link$1 = Link;
 
-export { Link$1 as default };
+export { Link as default };

package/es/components/ListBox/ListBox.js

@@ -17,6 +17,7 @@ import ListBoxMenu from './ListBoxMenu.js';
 import ListBoxMenuIcon from './ListBoxMenuIcon.js';
 import ListBoxMenuItem from './ListBoxMenuItem.js';
 import ListBoxSelection from './ListBoxSelection.js';
+import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
 var _excluded = ["children", "className", "disabled", "type", "size", "invalid", "invalidText", "warn", "warnText", "light", "isOpen"];
@@ -142,6 +143,5 @@ ListBox.Menu = ListBoxMenu;
 ListBox.MenuIcon = ListBoxMenuIcon;
 ListBox.MenuItem = ListBoxMenuItem;
 ListBox.Selection = ListBoxSelection;
-var ListBox$1 = ListBox;
 
-export { ListBox$1 as default };
+export { ListBox as default };

package/es/components/ListBox/ListBoxMenu.js

@@ -51,6 +51,5 @@ ListBoxMenu.propTypes = {
    */
   id: PropTypes.string.isRequired
 };
-var ListBoxMenu$1 = ListBoxMenu;
 
-export { ListBoxMenu$1 as default };
+export { ListBoxMenu as default };

package/es/components/ListBox/ListBoxMenuIcon.js

@@ -56,6 +56,5 @@ ListBoxMenuIcon.defaultProps = {
     return defaultTranslations[id];
   }
 };
-var ListBoxMenuIcon$1 = ListBoxMenuIcon;
 
-export { ListBoxMenuIcon$1 as default, translationIds };
+export { ListBoxMenuIcon as default, translationIds };

package/es/components/ListBox/ListBoxMenuItem.js

@@ -83,6 +83,5 @@ ListBoxMenuItem.defaultProps = {
   isActive: false,
   isHighlighted: false
 };
-var ListBoxMenuItem$1 = ListBoxMenuItem;
 
-export { ListBoxMenuItem$1 as default };
+export { ListBoxMenuItem as default };

package/es/components/ListBox/ListBoxSelection.js

@@ -10,9 +10,9 @@ import cx from 'classnames';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import { Close } from '@carbon/icons-react';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { match } from '../../internal/keyboard/match.js';
 import { Enter } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
+import { usePrefix } from '../../internal/usePrefix.js';
 
 var _Close, _Close2, _defaultTranslations;
 /**
@@ -28,14 +28,15 @@ function ListBoxSelection(_ref) {
       selectionCount = _ref.selectionCount,
       t = _ref.translateWithId,
       disabled = _ref.disabled,
-      onClearSelection = _ref.onClearSelection;
+      onClearSelection = _ref.onClearSelection,
+      readOnly = _ref.readOnly;
   var prefix = usePrefix();
   var className = cx("".concat(prefix, "--list-box__selection"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tag--filter"), selectionCount), _defineProperty(_cx, "".concat(prefix, "--list-box__selection--multi"), selectionCount), _cx));
 
   var handleOnClick = function handleOnClick(event) {
     event.stopPropagation();
 
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     }
 
@@ -49,7 +50,7 @@ function ListBoxSelection(_ref) {
   var handleOnKeyDown = function handleOnKeyDown(event) {
     event.stopPropagation();
 
-    if (disabled) {
+    if (disabled || readOnly) {
       return;
     } // When a user hits ENTER, we'll clear the selection
 
@@ -78,7 +79,8 @@ function ListBoxSelection(_ref) {
     onKeyDown: handleOnKeyDown,
     disabled: disabled,
     "aria-label": t('clear.all'),
-    title: description
+    title: description,
+    "aria-disabled": readOnly ? true : undefined
   }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, null)))) : /*#__PURE__*/React__default.createElement("div", {
     role: "button",
     className: className,
@@ -125,6 +127,11 @@ ListBoxSelection.propTypes = {
    */
   onKeyDown: PropTypes.func,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify an optional `selectionCount` value that will be used to determine
    * whether the selection should display a badge or a single clear icon.

package/es/components/ListBox/index.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import './ListBoxPropTypes.js';
 import ListBox from './ListBox.js';
 export { default } from './ListBox.js';
 import ListBoxField from './ListBoxField.js';

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

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import { Close } from '@carbon/icons-react';
-import { usePrefix } from '../../../internal/usePrefix.js';
-import { match } from '../../../internal/keyboard/match.js';
 import { Enter } from '../../../internal/keyboard/keys.js';
+import { match } from '../../../internal/keyboard/match.js';
+import { usePrefix } from '../../../internal/usePrefix.js';
 
 var _Close, _Close2, _defaultTranslations;
 

package/es/components/ListBox/next/ListBoxTrigger.js

@@ -63,6 +63,5 @@ ListBoxTrigger.defaultProps = {
     return defaultTranslations[id];
   }
 };
-var ListBoxTrigger$1 = ListBoxTrigger;
 
-export { ListBoxTrigger$1 as default, translationIds };
+export { ListBoxTrigger as default, translationIds };

package/es/components/ListItem/ListItem.js

@@ -36,6 +36,5 @@ ListItem.propTypes = {
    */
   className: PropTypes.string
 };
-var ListItem$1 = ListItem;
 
-export { ListItem$1 as default };
+export { ListItem as default };

package/es/components/Menu/Menu.js

@@ -10,14 +10,14 @@ import React__default, { useRef, useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import { Tab, Enter, Space, Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { getParentMenu, getNextNode, getParentNode, getValidNodes, clickedElementHasSubnodes, capWithinRange, getPosition, resetFocus, focusNode } from './_utils.js';
+import { getParentMenu, getNextNode, getParentNode, getValidNodes, clickedElementHasSubnodes, getPosition, capWithinRange, resetFocus, focusNode } from './_utils.js';
 import MenuGroup from './MenuGroup.js';
 import MenuRadioGroup from './MenuRadioGroup.js';
 import MenuRadioGroupOptions from './MenuRadioGroupOptions.js';
 import MenuSelectableItem from './MenuSelectableItem.js';
-import { match } from '../../internal/keyboard/match.js';
-import { Tab, Enter, Space, Escape, ArrowLeft, ArrowUp, ArrowDown } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["children", "className", "id", "level", "open", "size", "target", "x", "y", "onClose"];
 var margin = 16; // distance to keep to body edges, in px
@@ -323,6 +323,5 @@ Menu.propTypes = {
    */
   y: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])
 };
-var Menu$1 = Menu;
 
-export { Menu$1 as default };
+export { Menu as default };

package/es/components/Menu/MenuOption.js

@@ -10,11 +10,11 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { CaretRight } from '@carbon/icons-react';
+import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { getFirstSubNode, focusNode, clickedElementHasSubnodes, getParentMenu } from './_utils.js';
 import Menu from './Menu.js';
-import { match } from '../../internal/keyboard/match.js';
-import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _CaretRight;
 

package/es/components/Modal/Modal.js

@@ -5,12 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useEffect } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import toggleClass from '../../tools/toggleClass.js';
+import '../Button/Button.Skeleton.js';
 import Button from '../Button/Button.js';
 import ButtonSet from '../ButtonSet/ButtonSet.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
@@ -270,6 +271,5 @@ Modal.defaultProps = {
   selectorPrimaryFocus: '[data-modal-primary-focus]',
   hasScrollingContent: false
 };
-var Modal$1 = Modal;
 
-export { Modal$1 as default };
+export { Modal as default };

package/es/components/ModalWrapper/ModalWrapper.js

@@ -5,10 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, defineProperty as _defineProperty, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import Modal from '../Modal/Modal.js';
+import '../Button/Button.Skeleton.js';
 import Button from '../Button/Button.js';
 import { ButtonKinds } from '../../prop-types/types.js';
 import { warning } from '../../internal/warning.js';

package/es/components/ModalWrapper/index.js

@@ -5,8 +5,5 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ModalWrapper$1 from './ModalWrapper.js';
-
-var ModalWrapper = ModalWrapper$1;
-
-export { ModalWrapper as default };
+import ModalWrapper from './ModalWrapper.js';
+export { default } from './ModalWrapper.js';

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -5,7 +5,7 @@
  * 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 { objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import Downshift from 'downshift';
@@ -15,6 +15,10 @@ import React__default, { useContext, useState, useRef } from 'react';
 import { defaultFilterItems } from '../ComboBox/tools/filter.js';
 import { sortingPropTypes } from './MultiSelectPropTypes.js';
 import '../ListBox/index.js';
+import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
+import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
+import { Space, Tab } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import Selection from '../../internal/Selection.js';
 import { defaultItemToString } from './tools/itemToString.js';
 import mergeRefs from '../../tools/mergeRefs.js';
@@ -23,13 +27,10 @@ import { useId } from '../../internal/useId.js';
 import { defaultCompareItems, defaultSortItems } from './tools/sorting.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import { match } from '../../internal/keyboard/match.js';
-import ListBoxSelection from '../ListBox/next/ListBoxSelection.js';
-import ListBoxTrigger from '../ListBox/next/ListBoxTrigger.js';
-import ListBox from '../ListBox/ListBox.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
-import { Space, Tab } from '../../internal/keyboard/keys.js';
+import ListBox from '../ListBox/ListBox.js';
 
 var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
   var _cx, _cx2, _cx3, _cx4;
@@ -563,6 +564,5 @@ FilterableMultiSelect.defaultProps = {
   open: false,
   selectionFeedback: 'top-after-reopen'
 };
-var FilterableMultiSelect$1 = FilterableMultiSelect;
 
-export { FilterableMultiSelect$1 as default };
+export { FilterableMultiSelect as default };

package/es/components/MultiSelect/MultiSelect.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import Downshift, { useSelect } from 'downshift';
@@ -20,13 +20,14 @@ import { useSelection } from '../../internal/Selection.js';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
+import { Delete } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import { match } from '../../internal/keyboard/match.js';
-import ListBox from '../ListBox/ListBox.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
-import { Delete } from '../../internal/keyboard/keys.js';
+import ListBox from '../ListBox/ListBox.js';
 
 var noop = function noop() {};
 
@@ -73,7 +74,8 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
       onChange = _ref.onChange,
       onMenuChange = _ref.onMenuChange,
       direction = _ref.direction,
-      selected = _ref.selectedItems;
+      selected = _ref.selectedItems,
+      readOnly = _ref.readOnly;
   var prefix = usePrefix();
 
   var _useContext = useContext(FormContext),
@@ -164,7 +166,7 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
   var helperId = !helperText ? undefined : "multiselect-helper-text-".concat(multiSelectInstanceId);
   var fieldLabelId = "multiselect-field-label-".concat(multiSelectInstanceId);
   var helperClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
-  var className = cx("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _cx4)); // needs to be capitalized for react to render it correctly
+  var className = cx("".concat(prefix, "--multi-select"), [enabled ? null : containerClassName], (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--multi-select--invalid"), invalid), _defineProperty(_cx4, "".concat(prefix, "--multi-select--warning"), showWarning), _defineProperty(_cx4, "".concat(prefix, "--multi-select--inline"), inline), _defineProperty(_cx4, "".concat(prefix, "--multi-select--selected"), selectedItems && selectedItems.length > 0), _defineProperty(_cx4, "".concat(prefix, "--list-box--up"), direction === 'top'), _defineProperty(_cx4, "".concat(prefix, "--multi-select--readonly"), readOnly), _cx4)); // needs to be capitalized for react to render it correctly
 
   var ItemToElement = itemToElement;
   var sortOptions = {
@@ -229,6 +231,21 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     evt.target.classList.contains("".concat(prefix, "--tag__close-icon")) ? setIsFocused(false) : setIsFocused(evt.type === 'focus' ? true : false);
   };
 
+  var readOnlyEventHandlers = readOnly ? {
+    onClick: function onClick(evt) {
+      // NOTE: does not prevent click
+      evt.preventDefault(); // focus on the element as per readonly input behavior
+
+      evt.target.focus();
+    },
+    onKeyDown: function onKeyDown(evt) {
+      var selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter']; // This prevents the select from opening for the above keys
+
+      if (selectAccessKeys.includes(evt.key)) {
+        evt.preventDefault();
+      }
+    }
+  } : {};
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("label", _extends({
@@ -242,6 +259,7 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     size: size,
     className: className,
     disabled: disabled,
+    readOnly: readOnly,
     light: light,
     invalid: invalid,
     invalidText: invalidText,
@@ -257,12 +275,13 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
     type: "button",
     className: "".concat(prefix, "--list-box__field"),
     disabled: disabled,
-    "aria-disabled": disabled
+    "aria-disabled": disabled || readOnly
   }, toggleButtonProps, {
     ref: mergeRefs(toggleButtonProps.ref, ref),
     onKeyDown: onKeyDown
-  }), selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
-    clearSelection: !disabled ? clearSelection : noop,
+  }, readOnlyEventHandlers), selectedItems.length > 0 && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
+    readOnly: readOnly,
+    clearSelection: !disabled && !readOnly ? clearSelection : noop,
     selectionCount: selectedItems.length,
     translateWithId: translateWithId,
     disabled: disabled
@@ -413,6 +432,11 @@ MultiSelect.propTypes = _objectSpread2(_objectSpread2({}, sortingPropTypes), {},
    */
   open: PropTypes.bool,
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * For full control of the selected items
    */
@@ -478,6 +502,5 @@ MultiSelect.defaultProps = {
   clearSelectionDescription: 'Total items selected: ',
   selectedItems: null
 };
-var MultiSelect$1 = MultiSelect;
 
-export { MultiSelect$1 as default };
+export { MultiSelect as default };

package/es/components/Notification/Notification.js

@@ -5,18 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, extends as _extends, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useState, useRef, useEffect } from 'react';
 import cx from 'classnames';
-import { Close, WarningAltFilled, InformationFilled, InformationSquareFilled, ErrorFilled, CheckmarkFilled, WarningFilled } from '@carbon/icons-react';
+import { Close, ErrorFilled, CheckmarkFilled, WarningFilled, WarningAltFilled, InformationFilled, InformationSquareFilled } from '@carbon/icons-react';
+import '../Button/Button.Skeleton.js';
 import Button from '../Button/Button.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildren.js';
+import { Escape } from '../../internal/keyboard/keys.js';
+import { matches } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
-import { matches } from '../../internal/keyboard/match.js';
-import { Escape } from '../../internal/keyboard/keys.js';
 
 var _iconTypes;
 

package/es/components/NumberInput/NumberInput.js

@@ -117,7 +117,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
       incrementNumLabel = _ref[0],
       decrementNumLabel = _ref[1];
   var wrapperClasses = cx("".concat(prefix, "--number__input-wrapper"), _defineProperty({}, "".concat(prefix, "--number__input-wrapper--warning"), normalizedProps.warn));
-  var iconClasses = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--number__invalid"), normalizedProps.invalid || normalizedProps.warn), _defineProperty(_cx3, "".concat(prefix, "--number__invalid--warning"), normalizedProps.warn), _defineProperty(_cx3, "".concat(prefix, "--number__readonly-icon"), readOnly), _cx3));
+  var iconClasses = cx((_cx3 = {}, _defineProperty(_cx3, "".concat(prefix, "--number__invalid"), normalizedProps.invalid || normalizedProps.warn), _defineProperty(_cx3, "".concat(prefix, "--number__invalid--warning"), normalizedProps.warn), _cx3));
 
   if (controlledValue !== prevControlledValue) {
     setValue(controlledValue);
@@ -204,7 +204,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
   }, /*#__PURE__*/React__default.createElement("button", {
     "aria-label": decrementNumLabel || iconDescription,
     className: "".concat(prefix, "--number__control-btn down-icon"),
-    disabled: disabled,
+    disabled: disabled || readOnly,
     onClick: function onClick(event) {
       var state = {
         value: clamp(max, min, parseInt(value) - step),
@@ -230,7 +230,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(pr
   }), /*#__PURE__*/React__default.createElement("button", {
     "aria-label": incrementNumLabel || iconDescription,
     className: "".concat(prefix, "--number__control-btn up-icon"),
-    disabled: disabled,
+    disabled: disabled || readOnly,
     onClick: function onClick(event) {
       var state = {
         value: clamp(max, min, parseInt(value) + step),

package/es/components/OrderedList/OrderedList.js

@@ -61,6 +61,5 @@ OrderedList.defaultProps = {
   native: false,
   isExpressive: false
 };
-var OrderedList$1 = OrderedList;
 
-export { OrderedList$1 as default };
+export { OrderedList as default };

package/es/components/OverflowMenu/OverflowMenu.js

@@ -13,12 +13,12 @@ import cx from 'classnames';
 import ClickListener from '../../internal/ClickListener.js';
 import FloatingMenu, { DIRECTION_TOP, DIRECTION_BOTTOM } from '../../internal/FloatingMenu.js';
 import { OverflowMenuVertical } from '@carbon/icons-react';
+import { ArrowDown, ArrowUp, ArrowRight, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
+import { matches } from '../../internal/keyboard/match.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { PrefixContext } from '../../internal/usePrefix.js';
 import * as FeatureFlags from '@carbon/feature-flags';
 import deprecate from '../../prop-types/deprecate.js';
-import { matches } from '../../internal/keyboard/match.js';
-import { ArrowDown, ArrowUp, ArrowRight, ArrowLeft, Escape } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["id", "ariaLabel", "children", "iconDescription", "direction", "flipped", "focusTrap", "menuOffset", "menuOffsetFlip", "iconClass", "onClick", "onOpen", "selectorPrimaryFocus", "renderIcon", "innerRef", "menuOptionsClass", "light", "size"];
 
@@ -511,5 +511,15 @@ _defineProperty(OverflowMenu, "defaultProps", {
   menuOffsetFlip: getMenuOffset,
   selectorPrimaryFocus: '[data-overflow-menu-primary-focus]'
 });
+((function () {
+  var forwardRef = function forwardRef(props, ref) {
+    return /*#__PURE__*/React__default.createElement(OverflowMenu, _extends({}, props, {
+      innerRef: ref
+    }));
+  };
+
+  forwardRef.displayName = 'OverflowMenu';
+  return /*#__PURE__*/React__default.forwardRef(forwardRef);
+}))();
 
 export { OverflowMenu, getMenuOffset };