@carbon/react 1.17.0 → 1.18.0

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;

package/lib/components/TextArea/TextArea.js

@@ -17,7 +17,9 @@ var deprecate = require('../../prop-types/deprecate.js');
 var iconsReact = require('@carbon/icons-react');
 var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
+require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
+var useAnnouncer = require('../../internal/useAnnouncer.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -59,11 +61,6 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
       textCount = _useState2[0],
       setTextCount = _useState2[1];
 
-  var _useState3 = React.useState(''),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      ariaAnnouncement = _useState4[0],
-      setAriaAnnouncement = _useState4[1];
-
   var textareaProps = {
     id: id,
     onChange: function onChange(evt) {
@@ -87,15 +84,7 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
     textareaProps.maxLength = maxCount;
   }
 
-  React.useEffect(function () {
-    var lastTen = maxCount - 10;
-
-    if (textCount >= lastTen) {
-      setAriaAnnouncement("".concat(maxCount - textCount, " characters left."));
-    } else {
-      setAriaAnnouncement('');
-    }
-  }, [textCount, maxCount]);
+  var ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
   var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel && !isFluid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
   var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
@@ -253,6 +242,5 @@ TextArea.defaultProps = {
   enableCounter: false,
   maxCount: undefined
 };
-var TextArea$1 = TextArea;
 
-exports["default"] = TextArea$1;
+exports["default"] = TextArea;

package/lib/components/TextInput/ControlledPasswordInput.js

@@ -238,6 +238,5 @@ ControlledPasswordInput.defaultProps = {
   helperText: '',
   size: ''
 };
-var ControlledPasswordInput$1 = ControlledPasswordInput;
 
-exports["default"] = ControlledPasswordInput$1;
+exports["default"] = ControlledPasswordInput;

package/lib/components/TextInput/PasswordInput.js

@@ -16,10 +16,11 @@ var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
 var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
 var util = require('./util.js');
+require('../FluidForm/FluidForm.js');
+var FormContext = require('../FluidForm/FormContext.js');
 var FeatureFlags = require('@carbon/feature-flags');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var FormContext = require('../FluidForm/FormContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -311,6 +312,5 @@ PasswordInput.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var PasswordInput$1 = PasswordInput;
 
-exports["default"] = PasswordInput$1;
+exports["default"] = PasswordInput;

package/lib/components/TextInput/TextInput.Skeleton.js

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

package/lib/components/TextInput/TextInput.js

@@ -18,10 +18,12 @@ var PasswordInput = require('./PasswordInput.js');
 var ControlledPasswordInput = require('./ControlledPasswordInput.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var util = require('./util.js');
+require('../FluidForm/FluidForm.js');
+var FormContext = require('../FluidForm/FormContext.js');
 var index = require('../FeatureFlags/index.js');
 var FeatureFlags = require('@carbon/feature-flags');
 var usePrefix = require('../../internal/usePrefix.js');
-var FormContext = require('../FluidForm/FormContext.js');
+var useAnnouncer = require('../../internal/useAnnouncer.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -165,6 +167,7 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
   var _useContext = React.useContext(FormContext.FormContext),
       isFluid = _useContext.isFluid;
 
+  var ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default["default"].createElement("div", {
@@ -176,7 +179,10 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
     "data-invalid": normalizedProps.invalid || null
   }, normalizedProps.icon && /*#__PURE__*/React__default["default"].createElement(normalizedProps.icon, {
     className: iconClasses
-  }), input, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+  }), input, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--text-input__counter-alert"),
+    role: "alert"
+  }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: "".concat(prefix, "--text-input__divider")
   }), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
 });
@@ -298,6 +304,5 @@ TextInput.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var TextInput$1 = TextInput;
 
-exports["default"] = TextInput$1;
+exports["default"] = TextInput;

package/lib/components/TextInput/index.js

@@ -13,6 +13,7 @@ var deprecateFieldOnObject = require('../../internal/deprecateFieldOnObject.js')
 var ControlledPasswordInput = require('./ControlledPasswordInput.js');
 var PasswordInput = require('./PasswordInput.js');
 var TextInput = require('./TextInput.js');
+var TextInput_Skeleton = require('./TextInput.Skeleton.js');
 
 TextInput["default"].ControlledPasswordInput = ControlledPasswordInput["default"];
 TextInput["default"].PasswordInput = PasswordInput["default"];
@@ -23,3 +24,4 @@ if (process.env.NODE_ENV !== "production") {
 }
 
 exports["default"] = TextInput["default"];
+exports.TextInputSkeleton = TextInput_Skeleton["default"];

package/lib/components/Tile/Tile.js

@@ -15,13 +15,13 @@ var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var Link = require('../Link/Link.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var events = require('../../tools/events.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.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 }; }