@carbon/react 1.17.0 → 1.18.0

package/es/components/Slider/Slider.js

@@ -5,7 +5,7 @@
  * 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 { defineProperty as _defineProperty, inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -17,7 +17,7 @@ import { PrefixContext } from '../../internal/usePrefix.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { FeatureFlagContext } from '../FeatureFlags/index.js';
 
-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);
@@ -65,7 +65,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_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
 
@@ -84,7 +84,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_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
 
@@ -105,7 +105,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_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;
       }
 
@@ -140,7 +140,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_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;
       }
 
@@ -181,7 +181,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_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
 
@@ -398,6 +398,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           disabled = _this$props2.disabled,
           name = _this$props2.name,
           light = _this$props2.light,
+          readOnly = _this$props2.readOnly,
           other = _objectWithoutProperties(_this$props2, _excluded);
 
       delete other.onRelease;
@@ -414,12 +415,12 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
       }
 
       return /*#__PURE__*/React__default.createElement(PrefixContext.Consumer, null, function (prefix) {
-        var _classNames3;
+        var _classNames4;
 
         var labelId = "".concat(id, "-label");
         var labelClasses = cx("".concat(prefix, "--label"), _defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
-        var sliderClasses = cx("".concat(prefix, "--slider"), _defineProperty({}, "".concat(prefix, "--slider--disabled"), disabled), [enabled ? null : className]);
-        var inputClasses = cx("".concat(prefix, "--text-input"), "".concat(prefix, "--slider-text-input"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--text-input--light"), light), _defineProperty(_classNames3, "".concat(prefix, "--text-input--invalid"), isValid === false), _classNames3));
+        var sliderClasses = cx("".concat(prefix, "--slider"), _defineProperty({}, "".concat(prefix, "--slider--disabled"), disabled), _defineProperty({}, "".concat(prefix, "--slider--readonly"), readOnly), [enabled ? null : className]);
+        var inputClasses = cx("".concat(prefix, "--text-input"), "".concat(prefix, "--slider-text-input"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--text-input--light"), light), _defineProperty(_classNames4, "".concat(prefix, "--text-input--invalid"), isValid === false), _classNames4));
         var filledTrackStyle = {
           transform: "translate(0%, -50%) scaleX(".concat(left / 100, ")")
         };
@@ -454,7 +455,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,
@@ -488,7 +489,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
         })));
       });
     }
@@ -620,6 +622,11 @@ _defineProperty(Slider, "propTypes", {
    */
   onRelease: PropTypes.func,
 
+  /**
+   * Whether the slider should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * `true` to specify if the control is required.
    */
@@ -650,7 +657,8 @@ _defineProperty(Slider, "defaultProps", {
   minLabel: '',
   maxLabel: '',
   inputType: 'number',
-  ariaLabelInput: FeatureFlags.enabled('enable-v11-release') ? undefined : 'Slider number input'
+  ariaLabelInput: FeatureFlags.enabled('enable-v11-release') ? undefined : 'Slider number input',
+  readOnly: false
 });
 
 _defineProperty(Slider, "contextType", FeatureFlagContext);

package/es/components/Slider/index.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import * as FeatureFlags from '@carbon/feature-flags';
 import Slider from './Slider.js';
 import { createClassWrapper } from '../../internal/createClassWrapper.js';
+export { default as SliderSkeleton } from './Slider.Skeleton.js';
 
-var index = FeatureFlags.enabled('enable-v11-release') ? createClassWrapper(Slider) : Slider;
+var index = createClassWrapper(Slider);
 
 export { index as default };

package/es/components/StructuredList/StructuredList.Skeleton.js

@@ -77,6 +77,5 @@ StructuredListSkeleton.defaultProps = {
   rowCount: 5,
   border: false
 };
-var StructuredListSkeleton$1 = StructuredListSkeleton;
 
-export { StructuredListSkeleton$1 as default };
+export { StructuredListSkeleton as default };

package/es/components/Switch/Switch.js

@@ -118,6 +118,5 @@ Switch.defaultProps = {
   onClick: function onClick() {},
   onKeyDown: function onKeyDown() {}
 };
-var Switch$1 = Switch;
 
-export { Switch$1 as default };
+export { Switch as default };

package/es/components/Tab/Tab.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, createClass as _createClass, objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, defineProperty as _defineProperty, classCallCheck as _classCallCheck, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';

package/es/components/Tab/index.js

@@ -6,10 +6,9 @@
  */
 
 import * as FeatureFlags from '@carbon/feature-flags';
-import { Tab as Tab$2 } from '../Tabs/Tabs.js';
-import Tab$3 from './Tab.js';
+import { Tab as Tab$1 } from '../Tabs/Tabs.js';
+import Tab$2 from './Tab.js';
 
-var Tab = FeatureFlags.enabled('enable-v11-release') ? Tab$2 : Tab$3;
-var Tab$1 = Tab;
+var Tab = FeatureFlags.enabled('enable-v11-release') ? Tab$1 : Tab$2;
 
-export { Tab$1 as default };
+export { Tab as default };

package/es/components/TabContent/TabContent.js

@@ -73,6 +73,5 @@ TabContent.propTypes = {
 TabContent.defaultProps = {
   selected: false
 };
-var TabContent$1 = TabContent;
 
-export { TabContent$1 as default };
+export { TabContent as default };

package/es/components/Tabs/Tabs.js

@@ -11,7 +11,8 @@ import cx from 'classnames';
 import debounce from 'lodash.debounce';
 import PropTypes from 'prop-types';
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
-import { Tooltip } from '../Tooltip/next/Tooltip.js';
+import '../Tooltip/DefinitionTooltip.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { useControllableState } from '../../internal/useControllableState.js';
 import { useEffectOnce } from '../../internal/useEffectOnce.js';
 import { useId } from '../../internal/useId.js';
@@ -19,9 +20,9 @@ import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { getInteractiveContent } from '../../internal/useNoInteractiveChildren.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { usePressable } from './usePressable.js';
-import { matches, match } from '../../internal/keyboard/match.js';
 import { ArrowRight, ArrowLeft, Home, End } from '../../internal/keyboard/keys.js';
+import { matches, match } from '../../internal/keyboard/match.js';
+import { usePressable } from './usePressable.js';
 
 var _ChevronLeft, _ChevronRight;
 

package/es/components/Tabs/index.js

@@ -7,3 +7,4 @@
 
 import { Tabs } from './Tabs.js';
 export { IconTab, Tab, TabList, TabPanel, TabPanels, Tabs as default } from './Tabs.js';
+export { default as TabsSkeleton } from './Tabs.Skeleton.js';

package/es/components/Tag/Tag.js

@@ -141,6 +141,5 @@ Tag.propTypes = {
    */
   type: PropTypes.oneOf(Object.keys(TYPES))
 };
-var Tag$1 = Tag;
 
-export { Tag$1 as default };
+export { Tag as default };

package/es/components/TextArea/TextArea.Skeleton.js

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

package/es/components/TextArea/TextArea.js

@@ -7,13 +7,15 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default, { useContext, useState, useEffect } from 'react';
+import React__default, { useContext, useState } from 'react';
 import cx from 'classnames';
 import deprecate from '../../prop-types/deprecate.js';
 import { WarningFilled } from '@carbon/icons-react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
+import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
+import { useAnnouncer } from '../../internal/useAnnouncer.js';
 
 var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount"];
 var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, ref) {
@@ -49,11 +51,6 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
       textCount = _useState2[0],
       setTextCount = _useState2[1];
 
-  var _useState3 = useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      ariaAnnouncement = _useState4[0],
-      setAriaAnnouncement = _useState4[1];
-
   var textareaProps = {
     id: id,
     onChange: function onChange(evt) {
@@ -77,15 +74,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, re
     textareaProps.maxLength = maxCount;
   }
 
-  useEffect(function () {
-    var lastTen = maxCount - 10;
-
-    if (textCount >= lastTen) {
-      setAriaAnnouncement("".concat(maxCount - textCount, " characters left."));
-    } else {
-      setAriaAnnouncement('');
-    }
-  }, [textCount, maxCount]);
+  var ariaAnnouncement = useAnnouncer(textCount, maxCount);
   var labelClasses = cx("".concat(prefix, "--label"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel && !isFluid), _defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
   var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
     htmlFor: id,
@@ -243,6 +232,5 @@ TextArea.defaultProps = {
   enableCounter: false,
   maxCount: undefined
 };
-var TextArea$1 = TextArea;
 
-export { TextArea$1 as default };
+export { TextArea as default };

package/es/components/TextInput/ControlledPasswordInput.js

@@ -228,6 +228,5 @@ ControlledPasswordInput.defaultProps = {
   helperText: '',
   size: ''
 };
-var ControlledPasswordInput$1 = ControlledPasswordInput;
 
-export { ControlledPasswordInput$1 as default };
+export { ControlledPasswordInput as default };

package/es/components/TextInput/PasswordInput.js

@@ -12,10 +12,11 @@ import PropTypes from 'prop-types';
 import { ViewOff, View } from '@carbon/icons-react';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import { textInputProps } from './util.js';
+import '../FluidForm/FluidForm.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 import * as FeatureFlags from '@carbon/feature-flags';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { FormContext } from '../FluidForm/FormContext.js';
 
 var _excluded = ["className", "disabled", "helperText", "hideLabel", "hidePasswordLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "onTogglePasswordVisibility", "placeholder", "size", "showPasswordLabel", "tooltipPosition", "tooltipAlignment", "type", "warn", "warnText"];
 var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInput(_ref, ref) {
@@ -282,6 +283,5 @@ PasswordInput.propTypes = {
    */
   warnText: PropTypes.node
 };
-var PasswordInput$1 = PasswordInput;
 
-export { PasswordInput$1 as default };
+export { PasswordInput as default };

package/es/components/TextInput/TextInput.Skeleton.js

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

package/es/components/TextInput/TextInput.js

@@ -14,10 +14,12 @@ import PasswordInput from './PasswordInput.js';
 import ControlledPasswordInput from './ControlledPasswordInput.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { textInputProps } from './util.js';
+import '../FluidForm/FluidForm.js';
+import { FormContext } from '../FluidForm/FormContext.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import * as FeatureFlags from '@carbon/feature-flags';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { FormContext } from '../FluidForm/FormContext.js';
+import { useAnnouncer } from '../../internal/useAnnouncer.js';
 
 var _excluded = ["className", "disabled", "helperText", "hideLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "placeholder", "readOnly", "size", "type", "warn", "warnText", "enableCounter", "maxCount"];
 var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref, ref) {
@@ -136,6 +138,7 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
   var _useContext = useContext(FormContext),
       isFluid = _useContext.isFluid;
 
+  var ariaAnnouncement = useAnnouncer(textCount, maxCount);
   return /*#__PURE__*/React__default.createElement("div", {
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default.createElement("div", {
@@ -147,7 +150,10 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
     "data-invalid": normalizedProps.invalid || null
   }, normalizedProps.icon && /*#__PURE__*/React__default.createElement(normalizedProps.icon, {
     className: iconClasses
-  }), input, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+  }), input, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--text-input__counter-alert"),
+    role: "alert"
+  }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default.createElement("hr", {
     className: "".concat(prefix, "--text-input__divider")
   }), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
 });
@@ -269,6 +275,5 @@ TextInput.propTypes = {
    */
   warnText: PropTypes.node
 };
-var TextInput$1 = TextInput;
 
-export { TextInput$1 as default };
+export { TextInput as default };

package/es/components/TextInput/index.js

@@ -10,6 +10,7 @@ import ControlledPasswordInput from './ControlledPasswordInput.js';
 import PasswordInput from './PasswordInput.js';
 import TextInput from './TextInput.js';
 export { default } from './TextInput.js';
+export { default as TextInputSkeleton } from './TextInput.Skeleton.js';
 
 TextInput.ControlledPasswordInput = ControlledPasswordInput;
 TextInput.PasswordInput = PasswordInput;

package/es/components/Tile/Tile.js

@@ -11,13 +11,13 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { CheckboxCheckedFilled, Checkbox, ChevronDown } from '@carbon/icons-react';
 import Link from '../Link/Link.js';
+import { Enter, Space } from '../../internal/keyboard/keys.js';
+import { matches } from '../../internal/keyboard/match.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { composeEventHandlers } from '../../tools/events.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { getInteractiveContent } from '../../internal/useNoInteractiveChildren.js';
-import { matches } from '../../internal/keyboard/match.js';
-import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 var _CheckboxCheckedFille, _Checkbox, _ChevronDown, _ChevronDown2;
 

package/es/components/TileGroup/TileGroup.js

@@ -5,7 +5,7 @@
  * 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, objectWithoutProperties as _objectWithoutProperties, extends as _extends, createClass as _createClass } 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 PropTypes from 'prop-types';
 import React__default from 'react';
 import RadioTile from '../RadioTile/RadioTile.js';