@carbon/react 1.24.0-rc.0 → 1.25.0

package/lib/components/Slider/Slider.js

@@ -89,6 +89,16 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
       isValid: true
     });
 
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "thumbRef", void 0);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "filledTrackRef", void 0);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "element", null);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "inputId", '');
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "track", void 0);
+
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onDragStart", function (evt) {
       // Do nothing if component is disabled
       if (_this.props.disabled || _this.props.readOnly) {
@@ -97,11 +107,15 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
 
       DRAG_STOP_EVENT_TYPES.forEach(function (element) {
-        _this.element.ownerDocument.addEventListener(element, _this.onDragStop);
+        var _this$element;
+
+        (_this$element = _this.element) === null || _this$element === void 0 ? void 0 : _this$element.ownerDocument.addEventListener(element, _this.onDragStop);
       }); // Register drag handlers
 
       DRAG_EVENT_TYPES.forEach(function (element) {
-        _this.element.ownerDocument.addEventListener(element, _this.onDrag);
+        var _this$element2;
+
+        (_this$element2 = _this.element) === null || _this$element2 === void 0 ? void 0 : _this$element2.ownerDocument.addEventListener(element, _this.onDrag);
       }); // Perform first recalculation since we probably didn't click exactly in the
       // middle of the thumb
 
@@ -116,11 +130,15 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
 
       DRAG_STOP_EVENT_TYPES.forEach(function (element) {
-        _this.element.ownerDocument.removeEventListener(element, _this.onDragStop);
+        var _this$element3;
+
+        (_this$element3 = _this.element) === null || _this$element3 === void 0 ? void 0 : _this$element3.ownerDocument.removeEventListener(element, _this.onDragStop);
       }); // Remove drag handlers
 
       DRAG_EVENT_TYPES.forEach(function (element) {
-        _this.element.ownerDocument.removeEventListener(element, _this.onDrag);
+        var _this$element4;
+
+        (_this$element4 = _this.element) === null || _this$element4 === void 0 ? void 0 : _this$element4.ownerDocument.removeEventListener(element, _this.onDrag);
       }); // Set needsOnRelease flag so event fires on next update
 
       _this.setState({
@@ -165,18 +183,23 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
     }));
 
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "onKeyDown", function (evt) {
+      var _this$props$step3, _this$props$step4, _this$props$step5, _this$props$step6;
+
       // Do nothing if component is disabled or we don't have a valid event
       if (_this.props.disabled || _this.props.readOnly || !('which' in evt)) {
         return;
       }
 
-      var which = Number.parseInt(evt.which);
       var delta = 0;
 
-      if (match.matches(which, [keys.ArrowDown, keys.ArrowLeft])) {
-        delta = -_this.props.step;
-      } else if (match.matches(which, [keys.ArrowUp, keys.ArrowRight])) {
-        delta = _this.props.step;
+      if (match.matches(evt.which, [keys.ArrowDown, keys.ArrowLeft])) {
+        var _this$props$step;
+
+        delta = -((_this$props$step = _this.props.step) !== null && _this$props$step !== void 0 ? _this$props$step : Slider.defaultProps.step);
+      } else if (match.matches(evt.which, [keys.ArrowUp, keys.ArrowRight])) {
+        var _this$props$step2;
+
+        delta = (_this$props$step2 = _this.props.step) !== null && _this$props$step2 !== void 0 ? _this$props$step2 : Slider.defaultProps.step;
       } else {
         // Ignore keys we don't want to handle
         return;
@@ -185,15 +208,15 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
 
       if (evt.shiftKey) {
         var stepMultiplier = _this.props.stepMultiplier;
-        delta *= stepMultiplier;
+        delta *= stepMultiplier !== null && stepMultiplier !== void 0 ? stepMultiplier : Slider.defaultProps.stepMultiplier;
       }
 
-      Math.floor(_this.state.value / _this.props.step) * _this.props.step;
+      Math.floor(_this.state.value / ((_this$props$step3 = _this.props.step) !== null && _this$props$step3 !== void 0 ? _this$props$step3 : Slider.defaultProps.step)) * ((_this$props$step4 = _this.props.step) !== null && _this$props$step4 !== void 0 ? _this$props$step4 : Slider.defaultProps.step);
 
       var _this$calcValue2 = _this.calcValue({
         // Ensures custom value from `<input>` won't cause skipping next stepping point with right arrow key,
         // e.g. Typing 51 in `<input>`, moving focus onto the thumb and the hitting right arrow key should yield 52 instead of 54
-        value: (delta > 0 ? Math.floor(_this.state.value / _this.props.step) * _this.props.step : _this.state.value) + delta
+        value: (delta > 0 ? Math.floor(_this.state.value / ((_this$props$step5 = _this.props.step) !== null && _this$props$step5 !== void 0 ? _this$props$step5 : Slider.defaultProps.step)) * ((_this$props$step6 = _this.props.step) !== null && _this$props$step6 !== void 0 ? _this$props$step6 : Slider.defaultProps.step) : _this.state.value) + delta
       }),
           value = _this$calcValue2.value,
           left = _this$calcValue2.left;
@@ -227,11 +250,11 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           value: targetValue,
           useRawValue: true
         }),
-            value = _this$calcValue3.value,
+            _value = _this$calcValue3.value,
             left = _this$calcValue3.left;
 
         _this.setState({
-          value: value,
+          value: _value,
           left: left
         });
       }
@@ -259,18 +282,16 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
     });
 
     _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "calcValue", function (_ref) {
-      var _ref$clientX = _ref.clientX,
-          clientX = _ref$clientX === void 0 ? null : _ref$clientX,
-          _ref$value = _ref.value,
-          value = _ref$value === void 0 ? null : _ref$value,
+      var _this$element5, _this$element5$getBou, _this$props$step7, _this$props$step8;
+
+      var clientX = _ref.clientX,
+          value = _ref.value,
           _ref$useRawValue = _ref.useRawValue,
           useRawValue = _ref$useRawValue === void 0 ? false : _ref$useRawValue;
       var range = _this.props.max - _this.props.min;
-
-      var boundingRect = _this.element.getBoundingClientRect();
-
-      var totalSteps = range / _this.props.step;
-      var width = boundingRect.right - boundingRect.left; // Enforce a minimum width of at least 1 for calculations
+      var boundingRect = (_this$element5 = _this.element) === null || _this$element5 === void 0 ? void 0 : (_this$element5$getBou = _this$element5.getBoundingClientRect) === null || _this$element5$getBou === void 0 ? void 0 : _this$element5$getBou.call(_this$element5);
+      var totalSteps = range / ((_this$props$step7 = _this.props.step) !== null && _this$props$step7 !== void 0 ? _this$props$step7 : Slider.defaultProps.step);
+      var width = boundingRect ? boundingRect.right - boundingRect.left : 0; // Enforce a minimum width of at least 1 for calculations
 
       if (width <= 0) {
         width = 1;
@@ -281,7 +302,9 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
       var leftPercent;
 
       if (clientX != null) {
-        var leftOffset = clientX - boundingRect.left;
+        var _boundingRect$left;
+
+        var leftOffset = clientX - ((_boundingRect$left = boundingRect === null || boundingRect === void 0 ? void 0 : boundingRect.left) !== null && _boundingRect$left !== void 0 ? _boundingRect$left : 0);
         leftPercent = leftOffset / width;
       } else {
         if (value == null) {
@@ -300,7 +323,7 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
         };
       }
 
-      var steppedValue = Math.round(leftPercent * totalSteps) * _this.props.step;
+      var steppedValue = Math.round(leftPercent * totalSteps) * ((_this$props$step8 = _this.props.step) !== null && _this$props$step8 !== void 0 ? _this$props$step8 : Slider.defaultProps.step);
 
       var steppedPercent = _this.clamp(steppedValue / range, 0, 1);
 
@@ -327,11 +350,11 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
         var _this$calcValue4 = this.calcValue({
           useRawValue: true
         }),
-            value = _this$calcValue4.value,
+            _value2 = _this$calcValue4.value,
             left = _this$calcValue4.left;
 
         this.setState({
-          value: value,
+          value: _value2,
           left: left
         });
       }
@@ -350,10 +373,15 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
     value: function componentDidUpdate(prevProps, prevState) {
       // Fire onChange event handler if present, if there's a usable value, and
       // if the value is different from the last one
-      this.thumbRef.current.style.left = "".concat(this.state.left, "%");
-      this.filledTrackRef.current.style.transform = "translate(0%, -50%) scaleX(".concat(this.state.left / 100, ")");
+      if (this.thumbRef.current) {
+        this.thumbRef.current.style.left = "".concat(this.state.left, "%");
+      }
+
+      if (this.filledTrackRef.current) {
+        this.filledTrackRef.current.style.transform = "translate(0%, -50%) scaleX(".concat(this.state.left / 100, ")");
+      }
 
-      if (this.state.value !== '' && prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
+      if (prevState.value !== this.state.value && typeof this.props.onChange === 'function') {
         this.props.onChange({
           value: this.state.value
         });
@@ -498,8 +526,8 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           name: name,
           className: inputClasses,
           value: value,
-          "aria-labelledby": !ariaLabelInput ? labelId : null,
-          "aria-label": ariaLabelInput ? ariaLabelInput : null,
+          "aria-labelledby": !ariaLabelInput ? labelId : undefined,
+          "aria-label": ariaLabelInput ? ariaLabelInput : undefined,
           disabled: disabled,
           required: required,
           min: min,
@@ -507,9 +535,9 @@ var Slider = /*#__PURE__*/function (_PureComponent) {
           step: step,
           onChange: _this2.onChange,
           onBlur: _this2.onBlur,
-          onKeyUp: _this2.onInputKeyUp,
+          onKeyUp: _this2.props.onInputKeyUp,
           "data-invalid": isValid ? null : true,
-          "aria-invalid": isValid ? null : true,
+          "aria-invalid": isValid ? undefined : true,
           readOnly: readOnly
         })));
       });

package/lib/components/StructuredList/StructuredList.js

@@ -23,7 +23,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["children", "selection", "className", "ariaLabel", "isCondensed", "isFlush"],
+var _StructuredListWrappe;
+
+var _excluded = ["children", "selection", "className", "aria-label", "ariaLabel", "isCondensed", "isFlush"],
     _excluded2 = ["children", "className"],
     _excluded3 = ["children", "className"],
     _excluded4 = ["onKeyDown", "children", "className", "head"],
@@ -37,7 +39,8 @@ function StructuredListWrapper(props) {
   var children = props.children,
       selection = props.selection,
       className = props.className,
-      ariaLabel = props.ariaLabel,
+      ariaLabel = props['aria-label'],
+      deprecatedAriaLabel = props.ariaLabel,
       isCondensed = props.isCondensed,
       isFlush = props.isFlush,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
@@ -58,46 +61,15 @@ function StructuredListWrapper(props) {
     role: "table",
     className: classes
   }, other, {
-    "aria-label": ariaLabel
+    "aria-label": deprecatedAriaLabel || ariaLabel
   }), children)));
 }
-StructuredListWrapper.propTypes = {
-  /**
-   * Specify a label to be read by screen readers on the container node
-   */
-  ariaLabel: PropTypes__default["default"].string,
-
-  /**
-   * Provide the contents of your StructuredListWrapper
-   */
-  children: PropTypes__default["default"].node,
-
-  /**
-   * Specify an optional className to be applied to the container node
-   */
-  className: PropTypes__default["default"].string,
-
-  /**
-   * Specify if structured list is condensed, default is false
-   */
-  isCondensed: PropTypes__default["default"].bool,
-
-  /**
-   * Specify if structured list is flush, default is false
-   */
-  isFlush: PropTypes__default["default"].bool,
-
-  /**
-   * Specify whether your StructuredListWrapper should have selections
-   */
-  selection: PropTypes__default["default"].bool
-};
-StructuredListWrapper.defaultProps = {
+StructuredListWrapper.propTypes = (_StructuredListWrappe = {}, _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, 'aria-label', PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "ariaLabel", deprecate["default"](PropTypes__default["default"].string, 'This prop syntax has been deprecated. Please use the new `aria-label`.')), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "children", PropTypes__default["default"].node), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "className", PropTypes__default["default"].string), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "isCondensed", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "isFlush", PropTypes__default["default"].bool), _rollupPluginBabelHelpers.defineProperty(_StructuredListWrappe, "selection", PropTypes__default["default"].bool), _StructuredListWrappe);
+StructuredListWrapper.defaultProps = _rollupPluginBabelHelpers.defineProperty({
   selection: false,
   isCondensed: false,
-  isFlush: false,
-  ariaLabel: 'Structured list section'
-};
+  isFlush: false
+}, 'aria-label', 'Structured list section');
 function StructuredListHead(props) {
   var children = props.children,
       className = props.className,

package/lib/components/Tabs/Tabs.js

@@ -15,6 +15,7 @@ var cx = require('classnames');
 var debounce = require('lodash.debounce');
 var PropTypes = require('prop-types');
 var React = require('react');
+require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
 var useControllableState = require('../../internal/useControllableState.js');
 var useEffectOnce = require('../../internal/useEffectOnce.js');
@@ -24,6 +25,7 @@ var useMergedRefs = require('../../internal/useMergedRefs.js');
 var useNoInteractiveChildren = require('../../internal/useNoInteractiveChildren.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var usePressable = require('./usePressable.js');
+var deprecate = require('../../prop-types/deprecate.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -388,7 +390,7 @@ TabList.propTypes = {
   /**
    * Specify whether or not to use the light component variant
    */
-  light: PropTypes__default["default"].bool,
+  light: deprecate["default"](PropTypes__default["default"].bool, 'The `light` prop for `TabList` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
   /**
    * Provide the props that describe the right overflow button

package/lib/components/TextArea/TextArea.Skeleton.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import PropTypes from 'prop-types';
+import React from 'react';
+export interface TextAreaSkeletonProps extends React.InputHTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add to the form item wrapper.
+     */
+    className?: string;
+    /**
+     * Specify whether the label should be hidden, or not
+     */
+    hideLabel?: boolean;
+}
+declare const TextAreaSkeleton: {
+    (props: TextAreaSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add to the form item wrapper.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the label should be hidden, or not
+         */
+        hideLabel: PropTypes.Requireable<boolean>;
+    };
+};
+export default TextAreaSkeleton;
+export { TextAreaSkeleton };

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

@@ -21,12 +21,12 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["hideLabel", "className"];
+var _excluded = ["className", "hideLabel"];
 
-var TextAreaSkeleton = function TextAreaSkeleton(_ref) {
-  var hideLabel = _ref.hideLabel,
-      className = _ref.className,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+var TextAreaSkeleton = function TextAreaSkeleton(props) {
+  var className = props.className,
+      hideLabel = props.hideLabel,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({

package/lib/components/TextArea/TextArea.d.ts

@@ -6,8 +6,7 @@
  */
 import { ReactNodeLike } from 'prop-types';
 import React from 'react';
-type ExcludedAttributes = '';
-export interface TextAreaProps extends Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, ExcludedAttributes> {
+export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaElement> {
     /**
      * Provide a custom className that is applied directly to the underlying
      * `<textarea>` node
@@ -90,6 +89,14 @@ export interface TextAreaProps extends Omit<React.InputHTMLAttributes<HTMLTextAr
      * Provide the current value of the `<textarea>`
      */
     value?: string | number;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNodeLike;
 }
 declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<unknown>>;
 export default TextArea;

package/lib/components/TextArea/TextArea.js

@@ -29,9 +29,9 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount"];
+var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount", "warn", "warnText"];
 var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props, forwardRef) {
-  var _classNames, _classNames4;
+  var _classNames, _classNames4, _classNames5;
 
   var className = props.className,
       id = props.id,
@@ -46,6 +46,9 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props
       placeholder = props.placeholder,
       enableCounter = props.enableCounter,
       maxCount = props.maxCount,
+      _props$warn = props.warn,
+      warn = _props$warn === void 0 ? false : _props$warn,
+      warnText = props.warnText,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
 
   var prefix = usePrefix.usePrefix();
@@ -107,7 +110,13 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props
   }, invalidText, isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
   })) : null;
-  var textareaClasses = cx__default["default"]("".concat(prefix, "--text-area"), [enabled ? null : className], (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--invalid"), invalid), _classNames4));
+  var warning = warn ? /*#__PURE__*/React__default["default"].createElement("div", {
+    role: "alert",
+    className: "".concat(prefix, "--form-requirement")
+  }, warnText, isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+    className: "".concat(prefix, "--text-area__invalid-icon ").concat(prefix, "--text-area__invalid-icon--warning")
+  })) : null;
+  var textareaClasses = cx__default["default"]("".concat(prefix, "--text-area"), [enabled ? null : className], (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--invalid"), invalid), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--text-area--warn"), warn), _classNames4));
   var textareaRef = React.useRef(null);
   var ref = useMergedRefs.useMergedRefs([forwardRef, textareaRef]);
   useIsomorphicEffect["default"](function () {
@@ -132,16 +141,18 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (props
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--text-area__label-wrapper")
   }, label, counter), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cx__default["default"]("".concat(prefix, "--text-area__wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-area__wrapper--readonly"), other.readOnly)),
+    className: cx__default["default"]("".concat(prefix, "--text-area__wrapper"), (_classNames5 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames5, "".concat(prefix, "--text-area__wrapper--readonly"), other.readOnly), _rollupPluginBabelHelpers.defineProperty(_classNames5, "".concat(prefix, "--text-area__wrapper--warn"), warn), _classNames5)),
     "data-invalid": invalid || null
   }, invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
+  }), warn && !invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningAltFilled, {
+    className: "".concat(prefix, "--text-area__invalid-icon ").concat(prefix, "--text-area__invalid-icon--warning")
   }), input, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--text-area__counter-alert"),
     role: "alert"
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: "".concat(prefix, "--text-area__divider")
-  }), isFluid && invalid ? error : null), invalid && !isFluid ? error : helper);
+  }), isFluid && invalid ? error : null, isFluid && warn && !invalid ? warning : null), !invalid && !warn && !isFluid ? helper : null, invalid && !isFluid ? error : null, warn && !invalid && !isFluid ? warning : null);
 });
 TextArea.displayName = 'TextArea';
 TextArea.propTypes = {
@@ -243,7 +254,17 @@ TextArea.propTypes = {
   /**
    * Provide the current value of the `<textarea>`
    */
-  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes__default["default"].node
 };
 TextArea.defaultProps = {
   disabled: false,
@@ -255,7 +276,9 @@ TextArea.defaultProps = {
   invalidText: '',
   helperText: '',
   enableCounter: false,
-  maxCount: undefined
+  maxCount: undefined,
+  warn: false,
+  warnText: ''
 };
 var TextArea$1 = TextArea;
 

package/lib/components/TextArea/index.js

@@ -10,8 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var TextArea = require('./TextArea.js');
+var TextArea_Skeleton = require('./TextArea.Skeleton.js');
 
 
 
 exports.TextArea = TextArea["default"];
 exports["default"] = TextArea["default"];
+exports.TextAreaSkeleton = TextArea_Skeleton["default"];

package/lib/components/TextInput/TextInput.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+type ExcludedAttributes = 'defaultValue' | 'id' | 'size' | 'value';
+export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * Specify an optional className to be applied to the `<input>` node
+     */
+    className?: string;
+    /**
+     * Optionally provide the default value of the `<input>`
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether to display the character counter
+     */
+    enableCounter?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * `true` to use the inline version.
+     */
+    inline?: boolean;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: ReactNode;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText: ReactNode;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make tile background color same as container background color.
+     * 'The `light` prop for `TextInput` has ' +
+        'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'
+     */
+    light?: boolean;
+    /**
+     * Max character count allowed for the input. This is needed in order for enableCounter to display
+     */
+    maxCount?: number;
+    /**
+     * Optionally provide an `onChange` handler that is called whenever `<input>`
+     * is updated
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Optionally provide an `onClick` handler that is called whenever the
+     * `<input>` is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Specify the placeholder attribute for the `<input>`
+     */
+    placeholder?: string;
+    /**
+     * Whether the input should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the size of the Text Input. Currently supports the following:
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Specify the type of the `<input>`
+     */
+    type?: string;
+    /**
+     * Specify the value of the `<input>`
+     */
+    value?: string | number | undefined;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNode;
+}
+declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<unknown>>;
+export default TextInput;

package/lib/components/TextInput/TextInput.js

@@ -90,7 +90,7 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
   var defaultValue = rest.defaultValue,
       value = rest.value;
 
-  var _useState = React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) || 0),
+  var _useState = React.useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString().length) || (value === null || value === void 0 ? void 0 : value.toString().length) || 0),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
       textCount = _useState2[0],
       setTextCount = _useState2[1];
@@ -168,6 +168,7 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
       isFluid = _useContext.isFluid;
 
   var ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
+  var Icon = normalizedProps.icon;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default["default"].createElement("div", {
@@ -177,7 +178,7 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: fieldWrapperClasses,
     "data-invalid": normalizedProps.invalid || null
-  }, normalizedProps.icon && /*#__PURE__*/React__default["default"].createElement(normalizedProps.icon, {
+  }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: iconClasses
   }), input, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--text-input__counter-alert"),