@carbon/react 1.17.0 → 1.18.0

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 };

package/es/components/OverflowMenuItem/OverflowMenuItem.js

@@ -5,15 +5,15 @@
  * 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, 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, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
+import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import { warning } from '../../internal/warning.js';
 import * as FeatureFlags from '@carbon/feature-flags';
 import { PrefixContext } from '../../internal/usePrefix.js';
-import { match } from '../../internal/keyboard/match.js';
-import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["href", "className", "itemText", "hasDivider", "isDelete", "disabled", "closeMenu", "onClick", "handleOverflowMenuItemFocus", "onKeyDown", "wrapperClassName", "requireTitle", "index", "title"];
 

package/es/components/OverflowMenuItem/index.js

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

package/es/components/OverflowMenuV2/index.js

@@ -12,10 +12,10 @@ import cx from 'classnames';
 import { OverflowMenuVertical } from '@carbon/icons-react';
 import { useId } from '../../internal/useId.js';
 import '../Menu/index.js';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft } from '../../internal/keyboard/keys.js';
 import { matches } from '../../internal/keyboard/match.js';
+import { usePrefix } from '../../internal/usePrefix.js';
 import Menu from '../Menu/Menu.js';
-import { ArrowUp, ArrowRight, ArrowDown, ArrowLeft } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["children", "className", "renderIcon", "size"];
 var defaultSize = 'md';

package/es/components/Pagination/Pagination.js

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, typeof as _typeof, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends, typeof as _typeof } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { CaretLeft, CaretRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState } from 'react';
+import '../Select/Select.Skeleton.js';
 import Select from '../Select/Select.js';
 import SelectItem from '../SelectItem/SelectItem.js';
 import { equals } from '../../tools/array.js';
@@ -96,8 +97,8 @@ var Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_ref
       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,
@@ -278,7 +279,9 @@ var Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_ref
     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.createElement("div", {
     className: "".concat(prefix, "--pagination__right")
-  }, /*#__PURE__*/React__default.createElement(Select, {
+  }, pagesUnknown ? /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--pagination__text ").concat(prefix, "--pagination__page-text")
+  }, pagesUnknown ? pageText(page, pagesUnknown) : pageRangeText(page, totalPages)) : null, /*#__PURE__*/React__default.createElement(Select, {
     id: "".concat(prefix, "-pagination-select-").concat(inputId, "-right"),
     className: "".concat(prefix, "--select__page-number"),
     labelText: "Page number, of ".concat(totalPages, " pages"),
@@ -287,9 +290,9 @@ var Pagination = /*#__PURE__*/React__default.forwardRef(function Pagination(_ref
     onChange: handlePageInputChange,
     value: page,
     disabled: pageInputDisabled || disabled
-  }, selectItems), /*#__PURE__*/React__default.createElement("span", {
+  }, selectItems), pagesUnknown ? null : /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--pagination__text")
-  }, pagesUnknown ? pageText(page) : pageRangeText(page, totalPages)), /*#__PURE__*/React__default.createElement("div", {
+  }, pagesUnknown ? pageText(page, pagesUnknown) : pageRangeText(page, totalPages)), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(prefix, "--pagination__control-buttons")
   }, /*#__PURE__*/React__default.createElement(IconButton, {
     align: "top",
@@ -416,6 +419,5 @@ Pagination.propTypes = {
    */
   totalItems: PropTypes.number
 };
-var Pagination$1 = Pagination;
 
-export { Pagination$1 as default };
+export { Pagination as default };

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

@@ -10,6 +10,7 @@ import React__default from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import setupGetInstanceId from '../../../tools/setupGetInstanceId.js';
+import '../../Select/Select.Skeleton.js';
 import Select from '../../Select/Select.js';
 import SelectItem from '../../SelectItem/SelectItem.js';
 import { usePrefix } from '../../../internal/usePrefix.js';

package/es/components/Pagination/experimental/Pagination.js

@@ -10,7 +10,9 @@ import React__default, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { CaretLeft, CaretRight } from '@carbon/icons-react';
+import '../../Button/Button.Skeleton.js';
 import Button from '../../Button/Button.js';
+import '../../Select/Select.Skeleton.js';
 import Select from '../../Select/Select.js';
 import SelectItem from '../../SelectItem/SelectItem.js';
 import { IconButton } from '../../IconButton/index.js';

package/es/components/Pagination/index.js

@@ -7,3 +7,4 @@
 
 import Pagination from './Pagination.js';
 export { default } from './Pagination.js';
+import './Pagination.Skeleton.js';

package/es/components/PaginationNav/PaginationNav.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React__default, { useState, useEffect, useRef } from 'react';
 import cx from 'classnames';
 import { CaretRight, CaretLeft, OverflowMenuHorizontal } from '@carbon/icons-react';
+import '../Button/Button.Skeleton.js';
 import Button from '../Button/Button.js';
 import { IconButton } from '../IconButton/index.js';
 import * as FeatureFlags from '@carbon/feature-flags';
@@ -431,6 +432,5 @@ PaginationNav.propTypes = {
    */
   translateWithId: PropTypes.func
 };
-var PaginationNav$1 = PaginationNav;
 
-export { PaginationNav$1 as default };
+export { PaginationNav as default };

package/es/components/PrimaryButton/PrimaryButton.js

@@ -7,6 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
+import '../Button/Button.Skeleton.js';
 import Button from '../Button/Button.js';
 
 var PrimaryButton = function PrimaryButton(props) {
@@ -15,6 +16,4 @@ var PrimaryButton = function PrimaryButton(props) {
   }, props));
 };
 
-var PrimaryButton$1 = PrimaryButton;
-
-export { PrimaryButton$1 as default };
+export { PrimaryButton as default };

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -9,10 +9,10 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useState } from 'react';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
+import { matches } from '../../internal/keyboard/match.js';
 import { Warning, Incomplete, CheckmarkOutline, CircleDash } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { matches } from '../../internal/keyboard/match.js';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _excluded = ["children", "className", "currentIndex", "onChange", "spaceEqually", "vertical"],
     _excluded2 = ["label", "description", "className", "current", "complete", "invalid", "secondaryLabel", "disabled", "onClick", "translateWithId"];
@@ -202,9 +202,7 @@ function ProgressStep(_ref2) {
     onClick: !current ? onClick : undefined,
     onKeyDown: handleKeyDown,
     title: label
-  }, rest), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--assistive-text")
-  }, message), /*#__PURE__*/React__default.createElement(SVGIcon, {
+  }, rest), /*#__PURE__*/React__default.createElement(SVGIcon, {
     complete: complete,
     current: current,
     description: description,
@@ -217,6 +215,8 @@ function ProgressStep(_ref2) {
   }, label), secondaryLabel !== null && secondaryLabel !== undefined ? /*#__PURE__*/React__default.createElement("p", {
     className: "".concat(prefix, "--progress-optional")
   }, secondaryLabel) : null), /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--assistive-text")
+  }, message), /*#__PURE__*/React__default.createElement("span", {
     className: "".concat(prefix, "--progress-line")
   })));
 }

package/es/components/RadioButton/RadioButton.js

@@ -39,7 +39,7 @@ var RadioButton = /*#__PURE__*/React__default.forwardRef(function RadioButton(_r
     onChange(value, name, event);
   }
 
-  var innerLabelClasses = cx(_defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
+  var innerLabelClasses = cx("".concat(prefix, "--radio-button__label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
   var wrapperClasses = cx(className, "".concat(prefix, "--radio-button-wrapper"), _defineProperty({}, "".concat(prefix, "--radio-button-wrapper--label-").concat(labelPosition), labelPosition !== 'right'));
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
@@ -126,6 +126,5 @@ RadioButton.propTypes = {
    */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-var RadioButton$1 = RadioButton;
 
-export { RadioButton$1 as default };
+export { RadioButton as default };

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -27,6 +27,7 @@ var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function RadioButt
       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();
 
@@ -71,20 +72,23 @@ var RadioButtonGroup = /*#__PURE__*/React__default.forwardRef(function RadioButt
   }
 
   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("".concat(prefix, "--radio-button-group"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _classNames));
+  var fieldsetClasses = cx("".concat(prefix, "--radio-button-group"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--").concat(orientation), orientation === 'vertical'), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--label-").concat(labelPosition), labelPosition), _defineProperty(_classNames, "".concat(prefix, "--radio-button-group--readonly"), readOnly), _classNames));
   var wrapperClasses = cx("".concat(prefix, "--form-item"), className);
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses,
     ref: ref
   }, /*#__PURE__*/React__default.createElement("fieldset", {
     className: fieldsetClasses,
-    disabled: disabled
+    disabled: disabled,
+    "aria-readonly": readOnly
   }, legendText && /*#__PURE__*/React__default.createElement(Legend, {
     className: "".concat(prefix, "--label")
   }, legendText), getRadioButtons()));
@@ -137,11 +141,15 @@ RadioButtonGroup.propTypes = {
    */
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
 
+  /**
+   * Whether the RadioButtonGroup should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify the value that is currently selected in the group
    */
   valueSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-var RadioButtonGroup$1 = RadioButtonGroup;
 
-export { RadioButtonGroup$1 as default };
+export { RadioButtonGroup as default };

package/es/components/RadioTile/RadioTile.js

@@ -10,11 +10,11 @@ import { CheckmarkFilled } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
+import { matches } from '../../internal/keyboard/match.js';
 import { useFallbackId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
-import { matches } from '../../internal/keyboard/match.js';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _CheckmarkFilled;
 

package/es/components/Search/Search.Skeleton.js

@@ -45,6 +45,5 @@ SearchSkeleton.propTypes = {
 SearchSkeleton.defaultProps = {
   small: false
 };
-var SearchSkeleton$1 = SearchSkeleton;
 
-export { SearchSkeleton$1 as default };
+export { SearchSkeleton as default };

package/es/components/Search/Search.js

@@ -6,18 +6,18 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { Close, Search as Search$2 } from '@carbon/icons-react';
+import { Close, Search as Search$1 } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState } from 'react';
 import { focus } from '../../internal/focus/index.js';
+import { Escape } from '../../internal/keyboard/keys.js';
+import { match } from '../../internal/keyboard/match.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import deprecate from '../../prop-types/deprecate.js';
-import { match } from '../../internal/keyboard/match.js';
-import { Escape } from '../../internal/keyboard/keys.js';
 
 var _Close;
 
@@ -250,7 +250,7 @@ function CustomSearchIcon(_ref2) {
     });
   }
 
-  return /*#__PURE__*/React__default.createElement(Search$2, {
+  return /*#__PURE__*/React__default.createElement(Search$1, {
     className: "".concat(prefix, "--search-magnifier-icon")
   });
 }
@@ -261,6 +261,5 @@ CustomSearchIcon.propTypes = {
    */
   icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
-var Search$1 = Search;
 
-export { Search$1 as default };
+export { Search as default };

package/es/components/Search/index.js

@@ -7,3 +7,4 @@
 
 import Search from './Search.js';
 export { default } from './Search.js';
+export { default as SearchSkeleton } from './Search.Skeleton.js';

package/es/components/SecondaryButton/SecondaryButton.js

@@ -7,6 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
+import '../Button/Button.Skeleton.js';
 import Button from '../Button/Button.js';
 
 var SecondaryButton = function SecondaryButton(props) {
@@ -15,6 +16,4 @@ var SecondaryButton = function SecondaryButton(props) {
   }, props));
 };
 
-var SecondaryButton$1 = SecondaryButton;
-
-export { SecondaryButton$1 as default };
+export { SecondaryButton as default };

package/es/components/Select/Select.Skeleton.js

@@ -41,6 +41,5 @@ SelectSkeleton.propTypes = {
    */
   hideLabel: PropTypes.bool
 };
-var SelectSkeleton$1 = SelectSkeleton;
 
-export { SelectSkeleton$1 as default };
+export { SelectSkeleton as default };

package/es/components/Select/Select.js

@@ -13,9 +13,10 @@ import { ChevronDown, WarningFilled, WarningAltFilled } from '@carbon/icons-reac
 import deprecate from '../../prop-types/deprecate.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-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.forwardRef(function Select(_ref, ref) {
   var _classNames, _classNames2, _classNames3;
 
@@ -37,6 +38,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
       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,
@@ -54,7 +56,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
       isFocused = _useState2[0],
       setIsFocused = _useState2[1];
 
-  var selectClasses = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--select"), true), _defineProperty(_classNames, "".concat(prefix, "--select--inline"), inline), _defineProperty(_classNames, "".concat(prefix, "--select--light"), light), _defineProperty(_classNames, "".concat(prefix, "--select--invalid"), invalid), _defineProperty(_classNames, "".concat(prefix, "--select--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--select--warning"), warn), _defineProperty(_classNames, "".concat(prefix, "--select--fluid--invalid"), isFluid && invalid), _defineProperty(_classNames, "".concat(prefix, "--select--fluid--focus"), isFluid && isFocused), _classNames), [enabled ? null : className]);
+  var selectClasses = cx((_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--select"), true), _defineProperty(_classNames, "".concat(prefix, "--select--inline"), inline), _defineProperty(_classNames, "".concat(prefix, "--select--light"), light), _defineProperty(_classNames, "".concat(prefix, "--select--invalid"), invalid), _defineProperty(_classNames, "".concat(prefix, "--select--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--select--readonly"), readOnly), _defineProperty(_classNames, "".concat(prefix, "--select--warning"), warn), _defineProperty(_classNames, "".concat(prefix, "--select--fluid--invalid"), isFluid && invalid), _defineProperty(_classNames, "".concat(prefix, "--select--fluid--focus"), isFluid && isFocused), _classNames), [enabled ? null : className]);
   var labelClasses = cx("".concat(prefix, "--label"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames2, "".concat(prefix, "--label--disabled"), disabled), _classNames2));
   var inputClasses = cx((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--select-input"), true), _defineProperty(_classNames3, "".concat(prefix, "--select-input--").concat(size), size), _classNames3));
   var errorId = "".concat(id, "-error-msg");
@@ -87,12 +89,32 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
     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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("select", _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.createElement(ChevronDown, {
       className: "".concat(prefix, "--select__arrow")
@@ -120,9 +142,9 @@ var Select = /*#__PURE__*/React__default.forwardRef(function Select(_ref, ref) {
     "data-invalid": invalid || null,
     onFocus: handleFocus,
     onBlur: handleFocus
-  }, input), isFluid && /*#__PURE__*/React__default.createElement("hr", {
+  }, input, isFluid && /*#__PURE__*/React__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 = {
@@ -200,6 +222,11 @@ Select.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * Whether the select should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify the size of the Select Input.
    */
@@ -223,6 +250,5 @@ Select.defaultProps = {
   invalidText: '',
   helperText: ''
 };
-var Select$1 = Select;
 
-export { Select$1 as default };
+export { Select as default };

package/es/components/SelectItem/SelectItem.js

@@ -65,6 +65,5 @@ SelectItem.defaultProps = {
   value: '',
   text: ''
 };
-var SelectItem$1 = SelectItem;
 
-export { SelectItem$1 as default };
+export { SelectItem as default };

package/es/components/SelectItemGroup/SelectItemGroup.js

@@ -55,6 +55,5 @@ SelectItemGroup.defaultProps = {
   disabled: false,
   label: FeatureFlags.enabled('enable-v11-release') ? undefined : 'Provide label'
 };
-var SelectItemGroup$1 = SelectItemGroup;
 
-export { SelectItemGroup$1 as default };
+export { SelectItemGroup as default };

package/es/components/SkeletonIcon/SkeletonIcon.js

@@ -37,6 +37,5 @@ SkeletonIcon.propTypes = {
    */
   style: PropTypes.object
 };
-var SkeletonIcon$1 = SkeletonIcon;
 
-export { SkeletonIcon$1 as default };
+export { SkeletonIcon as default };

package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js

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

package/es/components/SkeletonText/SkeletonText.js

@@ -109,6 +109,5 @@ SkeletonText.defaultProps = {
   heading: false,
   lineCount: 3
 };
-var SkeletonText$1 = SkeletonText;
 
-export { SkeletonText$1 as default };
+export { SkeletonText as default };

package/es/components/Slider/Slider.Skeleton.js

@@ -51,6 +51,5 @@ SliderSkeleton.propTypes = {
    */
   hideLabel: PropTypes.bool
 };
-var SliderSkeleton$1 = SliderSkeleton;
 
-export { SliderSkeleton$1 as default };
+export { SliderSkeleton as default };