@carbon/react 1.17.0 → 1.18.0

package/lib/components/Notification/Notification.js

@@ -14,13 +14,14 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
+require('../Button/Button.Skeleton.js');
 var Button = require('../Button/Button.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.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 }; }
 

package/lib/components/NumberInput/NumberInput.js

@@ -127,7 +127,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
       incrementNumLabel = _ref[0],
       decrementNumLabel = _ref[1];
   var wrapperClasses = cx__default["default"]("".concat(prefix, "--number__input-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--number__input-wrapper--warning"), normalizedProps.warn));
-  var iconClasses = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__invalid"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__invalid--warning"), normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__readonly-icon"), readOnly), _cx3));
+  var iconClasses = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__invalid"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--number__invalid--warning"), normalizedProps.warn), _cx3));
 
   if (controlledValue !== prevControlledValue) {
     setValue(controlledValue);
@@ -214,7 +214,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
   }, /*#__PURE__*/React__default["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),
@@ -240,7 +240,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function Num
   }), /*#__PURE__*/React__default["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/lib/components/OrderedList/OrderedList.js

@@ -71,6 +71,5 @@ OrderedList.defaultProps = {
   native: false,
   isExpressive: false
 };
-var OrderedList$1 = OrderedList;
 
-exports["default"] = OrderedList$1;
+exports["default"] = OrderedList;

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -17,12 +17,12 @@ var cx = require('classnames');
 var ClickListener = require('../../internal/ClickListener.js');
 var FloatingMenu = require('../../internal/FloatingMenu.js');
 var iconsReact = require('@carbon/icons-react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FeatureFlags = require('@carbon/feature-flags');
 var deprecate = require('../../prop-types/deprecate.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 }; }
 
@@ -541,6 +541,16 @@ _rollupPluginBabelHelpers.defineProperty(OverflowMenu, "defaultProps", {
   menuOffsetFlip: getMenuOffset,
   selectorPrimaryFocus: '[data-overflow-menu-primary-focus]'
 });
+((function () {
+  var forwardRef = function forwardRef(props, ref) {
+    return /*#__PURE__*/React__default["default"].createElement(OverflowMenu, _rollupPluginBabelHelpers["extends"]({}, props, {
+      innerRef: ref
+    }));
+  };
+
+  forwardRef.displayName = 'OverflowMenu';
+  return /*#__PURE__*/React__default["default"].forwardRef(forwardRef);
+}))();
 
 exports.OverflowMenu = OverflowMenu;
 exports.getMenuOffset = getMenuOffset;

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -13,11 +13,11 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var warning = require('../../internal/warning.js');
 var FeatureFlags = require('@carbon/feature-flags');
 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 }; }
 

package/lib/components/OverflowMenuItem/index.js

@@ -9,8 +9,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var OverflowMenuItem$1 = require('./OverflowMenuItem.js');
+var OverflowMenuItem = require('./OverflowMenuItem.js');
 
-var OverflowMenuItem = OverflowMenuItem$1["default"];
 
-exports["default"] = OverflowMenuItem;
+
+exports["default"] = OverflowMenuItem["default"];

package/lib/components/OverflowMenuV2/index.js

@@ -16,10 +16,10 @@ var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var useId = require('../../internal/useId.js');
 require('../Menu/index.js');
-var usePrefix = require('../../internal/usePrefix.js');
+var keys = require('../../internal/keyboard/keys.js');
 var match = require('../../internal/keyboard/match.js');
+var usePrefix = require('../../internal/usePrefix.js');
 var Menu = require('../Menu/Menu.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/Pagination/Pagination.js

@@ -14,6 +14,7 @@ var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+require('../Select/Select.Skeleton.js');
 var Select = require('../Select/Select.js');
 var SelectItem = require('../SelectItem/SelectItem.js');
 var array = require('../../tools/array.js');
@@ -106,8 +107,8 @@ var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagi
       pageSizeInputDisabled = _ref.pageSizeInputDisabled,
       controlledPageSizes = _ref.pageSizes,
       _ref$pageText = _ref.pageText,
-      pageText = _ref$pageText === void 0 ? function (page) {
-    return "page ".concat(page);
+      pageText = _ref$pageText === void 0 ? function (page, pagesUnknown) {
+    return "page ".concat(pagesUnknown ? '' : page);
   } : _ref$pageText,
       _ref$pagesUnknown = _ref.pagesUnknown,
       pagesUnknown = _ref$pagesUnknown === void 0 ? false : _ref$pagesUnknown,
@@ -288,7 +289,9 @@ var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagi
     className: "".concat(prefix, "--pagination__text ").concat(prefix, "--pagination__items-count")
   }, pagesUnknown ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--pagination__right")
-  }, /*#__PURE__*/React__default["default"].createElement(Select["default"], {
+  }, pagesUnknown ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--pagination__text ").concat(prefix, "--pagination__page-text")
+  }, pagesUnknown ? pageText(page, pagesUnknown) : pageRangeText(page, totalPages)) : null, /*#__PURE__*/React__default["default"].createElement(Select["default"], {
     id: "".concat(prefix, "-pagination-select-").concat(inputId, "-right"),
     className: "".concat(prefix, "--select__page-number"),
     labelText: "Page number, of ".concat(totalPages, " pages"),
@@ -297,9 +300,9 @@ var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagi
     onChange: handlePageInputChange,
     value: page,
     disabled: pageInputDisabled || disabled
-  }, selectItems), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, selectItems), pagesUnknown ? null : /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--pagination__text")
-  }, pagesUnknown ? pageText(page) : pageRangeText(page, totalPages)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, pagesUnknown ? pageText(page, pagesUnknown) : pageRangeText(page, totalPages)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--pagination__control-buttons")
   }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     align: "top",
@@ -426,6 +429,5 @@ Pagination.propTypes = {
    */
   totalItems: PropTypes__default["default"].number
 };
-var Pagination$1 = Pagination;
 
-exports["default"] = Pagination$1;
+exports["default"] = Pagination;

package/lib/components/Pagination/experimental/PageSelector.js

@@ -14,6 +14,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var setupGetInstanceId = require('../../../tools/setupGetInstanceId.js');
+require('../../Select/Select.Skeleton.js');
 var Select = require('../../Select/Select.js');
 var SelectItem = require('../../SelectItem/SelectItem.js');
 var usePrefix = require('../../../internal/usePrefix.js');

package/lib/components/Pagination/experimental/Pagination.js

@@ -14,7 +14,9 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
+require('../../Button/Button.Skeleton.js');
 var Button = require('../../Button/Button.js');
+require('../../Select/Select.Skeleton.js');
 var Select = require('../../Select/Select.js');
 var SelectItem = require('../../SelectItem/SelectItem.js');
 var index = require('../../IconButton/index.js');

package/lib/components/Pagination/index.js

@@ -10,6 +10,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Pagination = require('./Pagination.js');
+require('./Pagination.Skeleton.js');
 
 
 

package/lib/components/PaginationNav/PaginationNav.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
+require('../Button/Button.Skeleton.js');
 var Button = require('../Button/Button.js');
 var index = require('../IconButton/index.js');
 var FeatureFlags = require('@carbon/feature-flags');
@@ -460,6 +461,5 @@ PaginationNav.propTypes = {
    */
   translateWithId: PropTypes__default["default"].func
 };
-var PaginationNav$1 = PaginationNav;
 
-exports["default"] = PaginationNav$1;
+exports["default"] = PaginationNav;

package/lib/components/PrimaryButton/PrimaryButton.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+require('../Button/Button.Skeleton.js');
 var Button = require('../Button/Button.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -23,6 +24,4 @@ var PrimaryButton = function PrimaryButton(props) {
   }, props));
 };
 
-var PrimaryButton$1 = PrimaryButton;
-
-exports["default"] = PrimaryButton$1;
+exports["default"] = PrimaryButton;

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -13,10 +13,10 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 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 }; }
 
@@ -212,9 +212,7 @@ function ProgressStep(_ref2) {
     onClick: !current ? onClick : undefined,
     onKeyDown: handleKeyDown,
     title: label
-  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--assistive-text")
-  }, message), /*#__PURE__*/React__default["default"].createElement(SVGIcon, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement(SVGIcon, {
     complete: complete,
     current: current,
     description: description,
@@ -227,6 +225,8 @@ function ProgressStep(_ref2) {
   }, label), secondaryLabel !== null && secondaryLabel !== undefined ? /*#__PURE__*/React__default["default"].createElement("p", {
     className: "".concat(prefix, "--progress-optional")
   }, secondaryLabel) : null), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--assistive-text")
+  }, message), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--progress-line")
   })));
 }

package/lib/components/RadioButton/RadioButton.js

@@ -49,7 +49,7 @@ var RadioButton = /*#__PURE__*/React__default["default"].forwardRef(function Rad
     onChange(value, name, event);
   }
 
-  var innerLabelClasses = cx__default["default"](_rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
+  var innerLabelClasses = cx__default["default"]("".concat(prefix, "--radio-button__label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var wrapperClasses = cx__default["default"](className, "".concat(prefix, "--radio-button-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--radio-button-wrapper--label-").concat(labelPosition), labelPosition !== 'right'));
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
@@ -136,6 +136,5 @@ RadioButton.propTypes = {
    */
   value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 };
-var RadioButton$1 = RadioButton;
 
-exports["default"] = RadioButton$1;
+exports["default"] = RadioButton;

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -37,6 +37,7 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
       onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
       _ref$orientation = _ref.orientation,
       orientation = _ref$orientation === void 0 ? 'horizontal' : _ref$orientation,
+      readOnly = _ref.readOnly,
       valueSelected = _ref.valueSelected;
   var prefix = usePrefix.usePrefix();
 
@@ -81,20 +82,23 @@ var RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(functio
   }
 
   function handleOnChange(newSelection, value, evt) {
-    if (newSelection !== selected) {
-      setSelected(newSelection);
-      onChange(newSelection, name, evt);
+    if (!readOnly) {
+      if (newSelection !== selected) {
+        setSelected(newSelection);
+        onChange(newSelection, name, evt);
+      }
     }
   }
 
-  var fieldsetClasses = cx__default["default"]("".concat(prefix, "--radio-button-group"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _classNames));
+  var fieldsetClasses = cx__default["default"]("".concat(prefix, "--radio-button-group"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--radio-button-group--readonly"), readOnly), _classNames));
   var wrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), className);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses,
     ref: ref
   }, /*#__PURE__*/React__default["default"].createElement("fieldset", {
     className: fieldsetClasses,
-    disabled: disabled
+    disabled: disabled,
+    "aria-readonly": readOnly
   }, legendText && /*#__PURE__*/React__default["default"].createElement(index.Legend, {
     className: "".concat(prefix, "--label")
   }, legendText), getRadioButtons()));
@@ -147,11 +151,15 @@ RadioButtonGroup.propTypes = {
    */
   orientation: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
 
+  /**
+   * Whether the RadioButtonGroup should be read-only
+   */
+  readOnly: PropTypes__default["default"].bool,
+
   /**
    * Specify the value that is currently selected in the group
    */
   valueSelected: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 };
-var RadioButtonGroup$1 = RadioButtonGroup;
 
-exports["default"] = RadioButtonGroup$1;
+exports["default"] = RadioButtonGroup;

package/lib/components/RadioTile/RadioTile.js

@@ -14,11 +14,11 @@ var iconsReact = require('@carbon/icons-react');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.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 }; }
 

package/lib/components/Search/Search.Skeleton.js

@@ -55,6 +55,5 @@ SearchSkeleton.propTypes = {
 SearchSkeleton.defaultProps = {
   small: false
 };
-var SearchSkeleton$1 = SearchSkeleton;
 
-exports["default"] = SearchSkeleton$1;
+exports["default"] = SearchSkeleton;

package/lib/components/Search/Search.js

@@ -15,13 +15,13 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var index = require('../../internal/focus/index.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var deprecate = require('../../prop-types/deprecate.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 }; }
 
@@ -271,6 +271,5 @@ CustomSearchIcon.propTypes = {
    */
   icon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
-var Search$1 = Search;
 
-exports["default"] = Search$1;
+exports["default"] = Search;

package/lib/components/Search/index.js

@@ -10,7 +10,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Search = require('./Search.js');
+var Search_Skeleton = require('./Search.Skeleton.js');
 
 
 
 exports["default"] = Search["default"];
+exports.SearchSkeleton = Search_Skeleton["default"];

package/lib/components/SecondaryButton/SecondaryButton.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+require('../Button/Button.Skeleton.js');
 var Button = require('../Button/Button.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -23,6 +24,4 @@ var SecondaryButton = function SecondaryButton(props) {
   }, props));
 };
 
-var SecondaryButton$1 = SecondaryButton;
-
-exports["default"] = SecondaryButton$1;
+exports["default"] = SecondaryButton;

package/lib/components/Select/Select.Skeleton.js

@@ -51,6 +51,5 @@ SelectSkeleton.propTypes = {
    */
   hideLabel: PropTypes__default["default"].bool
 };
-var SelectSkeleton$1 = SelectSkeleton;
 
-exports["default"] = SelectSkeleton$1;
+exports["default"] = SelectSkeleton;

package/lib/components/Select/Select.js

@@ -17,6 +17,7 @@ var iconsReact = require('@carbon/icons-react');
 var deprecate = require('../../prop-types/deprecate.js');
 var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,7 +26,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "id", "inline", "labelText", "disabled", "children", "noLabel", "hideLabel", "invalid", "invalidText", "helperText", "light", "size", "warn", "warnText"];
+var _excluded = ["className", "id", "inline", "labelText", "disabled", "children", "noLabel", "hideLabel", "invalid", "invalidText", "helperText", "light", "readOnly", "size", "warn", "warnText"];
 var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_ref, ref) {
   var _classNames, _classNames2, _classNames3;
 
@@ -47,6 +48,7 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
       helperText = _ref.helperText,
       _ref$light = _ref.light,
       light = _ref$light === void 0 ? false : _ref$light,
+      readOnly = _ref.readOnly,
       size = _ref.size,
       _ref$warn = _ref.warn,
       warn = _ref$warn === void 0 ? false : _ref$warn,
@@ -64,7 +66,7 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
       isFocused = _useState2[0],
       setIsFocused = _useState2[1];
 
-  var selectClasses = cx__default["default"]((_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--warning"), warn), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--fluid--focus"), isFluid && isFocused), _classNames), [enabled ? null : className]);
+  var selectClasses = cx__default["default"]((_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select"), true), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--warning"), warn), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--fluid--invalid"), isFluid && invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--select--fluid--focus"), isFluid && isFocused), _classNames), [enabled ? null : className]);
   var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--label--disabled"), disabled), _classNames2));
   var inputClasses = cx__default["default"]((_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--select-input"), true), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--select-input--").concat(size), size), _classNames3));
   var errorId = "".concat(id, "-error-msg");
@@ -97,12 +99,32 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
     setIsFocused(evt.type === 'focus' ? true : false);
   };
 
+  var readOnlyEventHandlers = {
+    onMouseDown: function onMouseDown(evt) {
+      // NOTE: does not prevent click
+      if (readOnly) {
+        evt.preventDefault(); // focus on the element as per readonly input behavior
+
+        evt.target.focus();
+      }
+    },
+    onKeyDown: function onKeyDown(evt) {
+      var selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ']; // This prevents the select from opening for the above keys
+
+      if (readOnly && selectAccessKeys.includes(evt.key)) {
+        evt.preventDefault();
+      }
+    }
+  };
+
   var input = function () {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("select", _rollupPluginBabelHelpers["extends"]({}, other, ariaProps, {
       id: id,
       className: inputClasses,
       disabled: disabled || undefined,
       "aria-invalid": invalid || undefined,
+      "aria-readonly": readOnly || undefined
+    }, readOnlyEventHandlers, {
       ref: ref
     }), children), /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronDown, {
       className: "".concat(prefix, "--select__arrow")
@@ -130,9 +152,9 @@ var Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_
     "data-invalid": invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
-  }, input), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+  }, input, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: "".concat(prefix, "--select__divider")
-  }), !inline && error ? error : helper));
+  }), isFluid && error ? error : null), !inline && !isFluid && error ? error : helper));
 });
 Select.displayName = 'Select';
 Select.propTypes = {
@@ -210,6 +232,11 @@ Select.propTypes = {
    */
   onChange: PropTypes__default["default"].func,
 
+  /**
+   * Whether the select should be read-only
+   */
+  readOnly: PropTypes__default["default"].bool,
+
   /**
    * Specify the size of the Select Input.
    */
@@ -233,6 +260,5 @@ Select.defaultProps = {
   invalidText: '',
   helperText: ''
 };
-var Select$1 = Select;
 
-exports["default"] = Select$1;
+exports["default"] = Select;

package/lib/components/SelectItem/SelectItem.js

@@ -75,6 +75,5 @@ SelectItem.defaultProps = {
   value: '',
   text: ''
 };
-var SelectItem$1 = SelectItem;
 
-exports["default"] = SelectItem$1;
+exports["default"] = SelectItem;

package/lib/components/SelectItemGroup/SelectItemGroup.js

@@ -84,6 +84,5 @@ SelectItemGroup.defaultProps = {
   disabled: false,
   label: FeatureFlags__namespace.enabled('enable-v11-release') ? undefined : 'Provide label'
 };
-var SelectItemGroup$1 = SelectItemGroup;
 
-exports["default"] = SelectItemGroup$1;
+exports["default"] = SelectItemGroup;

package/lib/components/SkeletonIcon/SkeletonIcon.js

@@ -47,6 +47,5 @@ SkeletonIcon.propTypes = {
    */
   style: PropTypes__default["default"].object
 };
-var SkeletonIcon$1 = SkeletonIcon;
 
-exports["default"] = SkeletonIcon$1;
+exports["default"] = SkeletonIcon;

package/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.js

@@ -43,6 +43,5 @@ SkeletonPlaceholder.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var SkeletonPlaceholder$1 = SkeletonPlaceholder;
 
-exports["default"] = SkeletonPlaceholder$1;
+exports["default"] = SkeletonPlaceholder;

package/lib/components/SkeletonText/SkeletonText.js

@@ -119,6 +119,5 @@ SkeletonText.defaultProps = {
   heading: false,
   lineCount: 3
 };
-var SkeletonText$1 = SkeletonText;
 
-exports["default"] = SkeletonText$1;
+exports["default"] = SkeletonText;

package/lib/components/Slider/Slider.Skeleton.js

@@ -61,6 +61,5 @@ SliderSkeleton.propTypes = {
    */
   hideLabel: PropTypes__default["default"].bool
 };
-var SliderSkeleton$1 = SliderSkeleton;
 
-exports["default"] = SliderSkeleton$1;
+exports["default"] = SliderSkeleton;