@carbon/react 1.17.0 → 1.18.0-rc.0

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")
@@ -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;

package/lib/components/Slider/Slider.js

@@ -47,7 +47,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var _excluded = ["ariaLabelInput", "className", "hideTextInput", "id", "min", "minLabel", "max", "maxLabel", "formatLabel", "labelText", "step", "stepMultiplier", "inputType", "required", "disabled", "name", "light"];
+var _excluded = ["ariaLabelInput", "className", "hideTextInput", "id", "min", "minLabel", "max", "maxLabel", "formatLabel", "labelText", "step", "stepMultiplier", "inputType", "required", "disabled", "name", "light", "readOnly"];
 
 var defaultFormatLabel = function defaultFormatLabel(value, label) {
   return typeof label === 'function' ? label(value) : "".concat(value).concat(label);
@@ -95,7 +95,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onDragStart", function (evt) {
       // Do nothing if component is disabled
-      if (_this.props.disabled) {
+      if (_this.props.disabled || _this.props.readOnly) {
         return;
       } // Register drag stop handlers
 
@@ -114,7 +114,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onDragStop", function () {
       // Do nothing if component is disabled
-      if (_this.props.disabled) {
+      if (_this.props.disabled || _this.props.readOnly) {
         return;
       } // Remove drag stop handlers
 
@@ -135,7 +135,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "_onDrag", function (evt) {
       // Do nothing if component is disabled or we have no event
-      if (_this.props.disabled || !evt) {
+      if (_this.props.disabled || _this.props.readOnly || !evt) {
         return;
       }
 
@@ -170,7 +170,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onKeyDown", function (evt) {
       // Do nothing if component is disabled or we don't have a valid event
-      if (_this.props.disabled || !('which' in evt)) {
+      if (_this.props.disabled || _this.props.readOnly || !('which' in evt)) {
         return;
       }
 
@@ -211,7 +211,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onChange", function (evt) {
       // Do nothing if component is disabled
-      if (_this.props.disabled) {
+      if (_this.props.disabled || _this.props.readOnly) {
         return;
       } // Do nothing if we have no valid event, target, or value
 
@@ -428,6 +428,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           disabled = _this$props2.disabled,
           name = _this$props2.name,
           light = _this$props2.light,
+          readOnly = _this$props2.readOnly,
           other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props2, _excluded);
 
       delete other.onRelease;
@@ -444,12 +445,12 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
       }
 
       return /*#__PURE__*/React__default["default"].createElement(usePrefix.PrefixContext.Consumer, null, function (prefix) {
-        var _classNames3;
+        var _classNames4;
 
         var labelId = "".concat(id, "-label");
         var labelClasses = cx__default["default"]("".concat(prefix, "--label"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
-        var sliderClasses = cx__default["default"]("".concat(prefix, "--slider"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--slider--disabled"), disabled), [enabled ? null : className]);
-        var inputClasses = cx__default["default"]("".concat(prefix, "--text-input"), "".concat(prefix, "--slider-text-input"), (_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--text-input--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--text-input--invalid"), isValid === false), _classNames3));
+        var sliderClasses = cx__default["default"]("".concat(prefix, "--slider"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--slider--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--slider--readonly"), readOnly), [enabled ? null : className]);
+        var inputClasses = cx__default["default"]("".concat(prefix, "--text-input"), "".concat(prefix, "--slider-text-input"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-input--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-input--invalid"), isValid === false), _classNames4));
         var filledTrackStyle = {
           transform: "translate(0%, -50%) scaleX(".concat(left / 100, ")")
         };
@@ -484,7 +485,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           className: "".concat(prefix, "--slider__thumb"),
           role: "slider",
           id: id,
-          tabIndex: 0,
+          tabIndex: !readOnly ? 0 : -1,
           "aria-valuemax": max,
           "aria-valuemin": min,
           "aria-valuenow": value,
@@ -518,7 +519,8 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           onBlur: _this2.onBlur,
           onKeyUp: _this2.onInputKeyUp,
           "data-invalid": isValid ? null : true,
-          "aria-invalid": isValid ? null : true
+          "aria-invalid": isValid ? null : true,
+          readOnly: readOnly
         })));
       });
     }
@@ -650,6 +652,11 @@ _rollupPluginBabelHelpers.defineProperty(Slider, "propTypes", {
    */
   onRelease: PropTypes__default["default"].func,
 
+  /**
+   * Whether the slider should be read-only
+   */
+  readOnly: PropTypes__default["default"].bool,
+
   /**
    * `true` to specify if the control is required.
    */
@@ -680,7 +687,8 @@ _rollupPluginBabelHelpers.defineProperty(Slider, "defaultProps", {
   minLabel: '',
   maxLabel: '',
   inputType: 'number',
-  ariaLabelInput: FeatureFlags__namespace.enabled('enable-v11-release') ? undefined : 'Slider number input'
+  ariaLabelInput: FeatureFlags__namespace.enabled('enable-v11-release') ? undefined : 'Slider number input',
+  readOnly: false
 });
 
 _rollupPluginBabelHelpers.defineProperty(Slider, "contextType", index.FeatureFlagContext);

package/lib/components/Slider/index.js

@@ -9,30 +9,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FeatureFlags = require('@carbon/feature-flags');
 var Slider = require('./Slider.js');
 var createClassWrapper = require('../../internal/createClassWrapper.js');
+var Slider_Skeleton = require('./Slider.Skeleton.js');
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
-
-var index = FeatureFlags__namespace.enabled('enable-v11-release') ? createClassWrapper.createClassWrapper(Slider["default"]) : Slider["default"];
+var index = createClassWrapper.createClassWrapper(Slider["default"]);
 
+exports.SliderSkeleton = Slider_Skeleton["default"];
 exports["default"] = index;

package/lib/components/StructuredList/StructuredList.Skeleton.js

@@ -87,6 +87,5 @@ StructuredListSkeleton.defaultProps = {
   rowCount: 5,
   border: false
 };
-var StructuredListSkeleton$1 = StructuredListSkeleton;
 
-exports["default"] = StructuredListSkeleton$1;
+exports["default"] = StructuredListSkeleton;

package/lib/components/Switch/Switch.js

@@ -128,6 +128,5 @@ Switch.defaultProps = {
   onClick: function onClick() {},
   onKeyDown: function onKeyDown() {}
 };
-var Switch$1 = Switch;
 
-exports["default"] = Switch$1;
+exports["default"] = Switch;

package/lib/components/Tab/index.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var FeatureFlags = require('@carbon/feature-flags');
 var Tabs = require('../Tabs/Tabs.js');
-var Tab$2 = require('./Tab.js');
+var Tab$1 = require('./Tab.js');
 
 function _interopNamespace(e) {
 	if (e && e.__esModule) return e;
@@ -33,7 +33,6 @@ function _interopNamespace(e) {
 
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var Tab = FeatureFlags__namespace.enabled('enable-v11-release') ? Tabs.Tab : Tab$2["default"];
-var Tab$1 = Tab;
+var Tab = FeatureFlags__namespace.enabled('enable-v11-release') ? Tabs.Tab : Tab$1["default"];
 
-exports["default"] = Tab$1;
+exports["default"] = Tab;

package/lib/components/TabContent/TabContent.js

@@ -83,6 +83,5 @@ TabContent.propTypes = {
 TabContent.defaultProps = {
   selected: false
 };
-var TabContent$1 = TabContent;
 
-exports["default"] = TabContent$1;
+exports["default"] = TabContent;

package/lib/components/Tabs/Tabs.js

@@ -15,7 +15,8 @@ var cx = require('classnames');
 var debounce = require('lodash.debounce');
 var PropTypes = require('prop-types');
 var React = require('react');
-var Tooltip = require('../Tooltip/next/Tooltip.js');
+require('../Tooltip/DefinitionTooltip.js');
+var Tooltip = require('../Tooltip/Tooltip.js');
 var useControllableState = require('../../internal/useControllableState.js');
 var useEffectOnce = require('../../internal/useEffectOnce.js');
 var useId = require('../../internal/useId.js');
@@ -23,9 +24,9 @@ var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var usePressable = require('./usePressable.js');
-var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
+var usePressable = require('./usePressable.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/Tabs/index.js

@@ -10,6 +10,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var Tabs = require('./Tabs.js');
+var Tabs_Skeleton = require('./Tabs.Skeleton.js');
 
 
 
@@ -19,3 +20,4 @@ exports.TabList = Tabs.TabList;
 exports.TabPanel = Tabs.TabPanel;
 exports.TabPanels = Tabs.TabPanels;
 exports["default"] = Tabs.Tabs;
+exports.TabsSkeleton = Tabs_Skeleton["default"];

package/lib/components/Tag/Tag.js

@@ -151,6 +151,5 @@ Tag.propTypes = {
    */
   type: PropTypes__default["default"].oneOf(Object.keys(TYPES))
 };
-var Tag$1 = Tag;
 
-exports["default"] = Tag$1;
+exports["default"] = Tag;

package/lib/components/TextArea/TextArea.Skeleton.js

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