@carbon/react 1.13.0 → 1.14.0

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -10,9 +10,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
-var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var usePrefix = require('../../internal/usePrefix.js');
 var match = require('../../internal/keyboard/match.js');
@@ -20,12 +20,12 @@ var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["label", "description", "className", "current", "complete", "invalid", "secondaryLabel", "disabled", "onClick", "translateWithId"],
-    _excluded2 = ["className", "currentIndex", "vertical", "spaceEqually"];
+var _excluded = ["children", "className", "currentIndex", "onChange", "spaceEqually", "vertical"],
+    _excluded2 = ["label", "description", "className", "current", "complete", "invalid", "secondaryLabel", "disabled", "onClick", "translateWithId"];
 var defaultTranslations = {
   'carbon.progress-step.complete': 'Complete',
   'carbon.progress-step.incomplete': 'Incomplete',
@@ -37,23 +37,124 @@ function translateWithId(messageId) {
   return defaultTranslations[messageId];
 }
 
-function ProgressStep(_ref) {
-  var _classnames;
-
-  var label = _ref.label,
-      description = _ref.description,
-      className = _ref.className,
-      current = _ref.current,
-      complete = _ref.complete,
-      invalid = _ref.invalid,
-      secondaryLabel = _ref.secondaryLabel,
-      disabled = _ref.disabled,
-      onClick = _ref.onClick,
-      t = _ref.translateWithId,
+function ProgressIndicator(_ref) {
+  var _cx;
+
+  var children = _ref.children,
+      customClassName = _ref.className,
+      _ref$currentIndex = _ref.currentIndex,
+      controlledIndex = _ref$currentIndex === void 0 ? 0 : _ref$currentIndex,
+      onChange = _ref.onChange,
+      spaceEqually = _ref.spaceEqually,
+      vertical = _ref.vertical,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var classes = cx__default["default"]((_classnames = {}, _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step"), true), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step--current"), current), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step--complete"), complete), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step--incomplete"), !complete && !current), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classnames, className, className), _classnames));
+
+  var _useState = React.useState(controlledIndex),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      currentIndex = _useState2[0],
+      setCurrentIndex = _useState2[1];
+
+  var _useState3 = React.useState(controlledIndex),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      prevControlledIndex = _useState4[0],
+      setPrevControlledIndex = _useState4[1];
+
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--progress"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--progress--vertical"), vertical), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--progress--space-equal"), spaceEqually && !vertical), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, customClassName), _cx));
+
+  if (controlledIndex !== prevControlledIndex) {
+    setCurrentIndex(controlledIndex);
+    setPrevControlledIndex(controlledIndex);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
+    className: className
+  }, rest), React__default["default"].Children.map(children, function (child, index) {
+    // only setup click handlers if onChange event is passed
+    var onClick = onChange ? function () {
+      return onChange(index);
+    } : undefined;
+
+    if (index === currentIndex) {
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        complete: child.props.complete,
+        current: child.props.complete ? false : true,
+        index: index,
+        onClick: onClick
+      });
+    }
+
+    if (index < currentIndex) {
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        complete: true,
+        index: index,
+        onClick: onClick
+      });
+    }
+
+    if (index > currentIndex) {
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        complete: child.props.complete || false,
+        index: index,
+        onClick: onClick
+      });
+    }
+
+    return null;
+  }));
+}
+
+ProgressIndicator.propTypes = {
+  /**
+   * Provide `<ProgressStep>` components to be rendered in the
+   * `<ProgressIndicator>`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide an optional className to be applied to the containing node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally specify the current step array index
+   */
+  currentIndex: PropTypes__default["default"].number,
+
+  /**
+   * Optional callback called if a ProgressStep is clicked on.  Returns the index of the step.
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Specify whether the progress steps should be split equally in size in the div
+   */
+  spaceEqually: PropTypes__default["default"].bool,
+
+  /**
+   * Determines whether or not the ProgressIndicator should be rendered vertically.
+   */
+  vertical: PropTypes__default["default"].bool
+};
+
+function ProgressStep(_ref2) {
+  var _cx2;
+
+  var label = _ref2.label,
+      description = _ref2.description,
+      className = _ref2.className,
+      current = _ref2.current,
+      complete = _ref2.complete,
+      invalid = _ref2.invalid,
+      secondaryLabel = _ref2.secondaryLabel,
+      disabled = _ref2.disabled,
+      onClick = _ref2.onClick,
+      t = _ref2.translateWithId,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+
+  var prefix = usePrefix.usePrefix();
+  var classes = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--progress-step"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--progress-step--current"), current), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--progress-step--complete"), complete), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--progress-step--incomplete"), !complete && !current), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--progress-step--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_cx2, className, className), _cx2));
 
   var handleKeyDown = function handleKeyDown(e) {
     if (match.matches(e, [keys.Enter, keys.Space])) {
@@ -62,12 +163,12 @@ function ProgressStep(_ref) {
   }; // eslint-disable-next-line react/prop-types
 
 
-  var SVGIcon = function SVGIcon(_ref2) {
-    var complete = _ref2.complete,
-        current = _ref2.current,
-        description = _ref2.description,
-        invalid = _ref2.invalid,
-        prefix = _ref2.prefix;
+  var SVGIcon = function SVGIcon(_ref3) {
+    var complete = _ref3.complete,
+        current = _ref3.current,
+        description = _ref3.description,
+        invalid = _ref3.invalid,
+        prefix = _ref3.prefix;
 
     if (invalid) {
       return /*#__PURE__*/React__default["default"].createElement(iconsReact.Warning, {
@@ -129,6 +230,7 @@ function ProgressStep(_ref) {
     className: "".concat(prefix, "--progress-line")
   })));
 }
+
 ProgressStep.propTypes = {
   /**
    * Provide an optional className to be applied to the containing `<li>` node
@@ -199,134 +301,6 @@ ProgressStep.propTypes = {
 ProgressStep.defaultProps = {
   translateWithId: translateWithId
 };
-var ProgressIndicator = /*#__PURE__*/function (_Component) {
-  _rollupPluginBabelHelpers.inherits(ProgressIndicator, _Component);
-
-  var _super = _rollupPluginBabelHelpers.createSuper(ProgressIndicator);
-
-  function ProgressIndicator() {
-    var _this;
-
-    _rollupPluginBabelHelpers.classCallCheck(this, ProgressIndicator);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {});
-
-    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "renderSteps", function () {
-      var onChange = _this.props.onChange;
-      return React__default["default"].Children.map(_this.props.children, function (child, index) {
-        // only setup click handlers if onChange event is passed
-        var onClick = onChange ? function () {
-          return onChange(index);
-        } : undefined;
-
-        if (index === _this.state.currentIndex) {
-          return /*#__PURE__*/React__default["default"].cloneElement(child, {
-            current: true,
-            index: index,
-            onClick: onClick
-          });
-        }
-
-        if (index < _this.state.currentIndex) {
-          return /*#__PURE__*/React__default["default"].cloneElement(child, {
-            complete: true,
-            index: index,
-            onClick: onClick
-          });
-        }
-
-        if (index > _this.state.currentIndex) {
-          return /*#__PURE__*/React__default["default"].cloneElement(child, {
-            complete: child.props.complete || false,
-            index: index,
-            onClick: onClick
-          });
-        }
-
-        return null;
-      });
-    });
-
-    return _this;
-  }
-
-  _rollupPluginBabelHelpers.createClass(ProgressIndicator, [{
-    key: "render",
-    value: function render() {
-      var _classnames3;
-
-      var _this$props = this.props,
-          className = _this$props.className;
-          _this$props.currentIndex;
-          var vertical = _this$props.vertical,
-          spaceEqually = _this$props.spaceEqually,
-          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded2);
-
-      var prefix = this.context;
-      var classes = cx__default["default"]((_classnames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classnames3, "".concat(prefix, "--progress"), true), _rollupPluginBabelHelpers.defineProperty(_classnames3, "".concat(prefix, "--progress--vertical"), vertical), _rollupPluginBabelHelpers.defineProperty(_classnames3, "".concat(prefix, "--progress--space-equal"), spaceEqually && !vertical), _rollupPluginBabelHelpers.defineProperty(_classnames3, className, className), _classnames3));
-      return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
-        className: classes
-      }, other), this.renderSteps());
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(_ref3, state) {
-      var currentIndex = _ref3.currentIndex;
-      var prevCurrentIndex = state.prevCurrentIndex;
-      return prevCurrentIndex === currentIndex ? null : {
-        currentIndex: currentIndex,
-        prevCurrentIndex: currentIndex
-      };
-    }
-  }]);
-
-  return ProgressIndicator;
-}(React.Component);
-
-_rollupPluginBabelHelpers.defineProperty(ProgressIndicator, "propTypes", {
-  /**
-   * Provide `<ProgressStep>` components to be rendered in the
-   * `<ProgressIndicator>`
-   */
-  children: PropTypes__default["default"].node,
-
-  /**
-   * Provide an optional className to be applied to the containing node
-   */
-  className: PropTypes__default["default"].string,
-
-  /**
-   * Optionally specify the current step array index
-   */
-  currentIndex: PropTypes__default["default"].number,
-
-  /**
-   * Optional callback called if a ProgressStep is clicked on.  Returns the index of the step.
-   */
-  onChange: PropTypes__default["default"].func,
-
-  /**
-   * Specify whether the progress steps should be split equally in size in the div
-   */
-  spaceEqually: PropTypes__default["default"].bool,
-
-  /**
-   * Determines whether or not the ProgressIndicator should be rendered vertically.
-   */
-  vertical: PropTypes__default["default"].bool
-});
-
-_rollupPluginBabelHelpers.defineProperty(ProgressIndicator, "contextType", usePrefix.PrefixContext);
-
-_rollupPluginBabelHelpers.defineProperty(ProgressIndicator, "defaultProps", {
-  currentIndex: 0
-});
 
 exports.ProgressIndicator = ProgressIndicator;
 exports.ProgressStep = ProgressStep;

package/lib/components/RadioTile/RadioTile.js

@@ -15,7 +15,6 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var useId = require('../../internal/useId.js');
-var index = require('../FeatureFlags/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var match = require('../../internal/keyboard/match.js');
@@ -48,10 +47,7 @@ function RadioTile(_ref) {
 
   var prefix = usePrefix.usePrefix();
   var inputId = useId.useFallbackId(id);
-  var enabled = index.useFeatureFlag('enable-v11-release');
   var className = cx__default["default"](customClassName, "".concat(prefix, "--tile"), "".concat(prefix, "--tile--selectable"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tile--is-selected"), checked), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tile--light"), light), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--tile--disabled"), disabled), _cx));
-  var inputProps = enabled ? {} : rest;
-  var labelProps = enabled ? rest : {};
 
   function handleOnChange(evt) {
     onChange(value, name, evt);
@@ -64,7 +60,7 @@ function RadioTile(_ref) {
     }
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, inputProps, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", {
     checked: checked,
     className: "".concat(prefix, "--tile-input"),
     disabled: disabled,
@@ -75,7 +71,7 @@ function RadioTile(_ref) {
     tabIndex: !disabled ? tabIndex : null,
     type: "radio",
     value: value
-  })), /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({}, labelProps, {
+  }), /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({}, rest, {
     htmlFor: inputId,
     className: className
   }), /*#__PURE__*/React__default["default"].createElement("span", {
@@ -101,11 +97,6 @@ RadioTile.propTypes = {
    */
   className: PropTypes__default["default"].string,
 
-  /**
-   * `true` if the `<input>` should be checked at initialization.
-   */
-  defaultChecked: PropTypes__default["default"].bool,
-
   /**
    * Specify whether the RadioTile should be disabled
    */

package/lib/components/TextArea/TextArea.js

@@ -16,6 +16,7 @@ var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
 var index = require('../FeatureFlags/index.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 }; }
 
@@ -43,6 +44,10 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
+
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
   var enabled = index.useFeatureFlag('enable-v11-release');
   var defaultValue = other.defaultValue,
       value = other.value,
@@ -76,7 +81,7 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
     textareaProps.maxLength = maxCount;
   }
 
-  var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
+  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,
     className: labelClasses
@@ -94,7 +99,9 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
     role: "alert",
     className: "".concat(prefix, "--form-requirement"),
     id: errorId
-  }, invalidText) : null;
+  }, 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 input = /*#__PURE__*/React__default["default"].createElement("textarea", _rollupPluginBabelHelpers["extends"]({}, other, textareaProps, {
     placeholder: placeholder || null,
@@ -110,9 +117,11 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAr
   }, label, counter), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--text-area__wrapper"),
     "data-invalid": invalid || null
-  }, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
+  }, invalid && !isFluid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: "".concat(prefix, "--text-area__invalid-icon")
-  }), input), invalid ? error : helper);
+  }), input, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+    className: "".concat(prefix, "--text-area__divider")
+  }), isFluid && invalid ? error : null), invalid && !isFluid ? error : helper);
 });
 TextArea.displayName = 'TextArea';
 TextArea.propTypes = {

package/lib/components/TextInput/PasswordInput.js

@@ -98,6 +98,9 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
     warnText: warnText
   });
 
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
   var handleTogglePasswordVisibility = function handleTogglePasswordVisibility(event) {
     setInputType(inputType === 'password' ? 'text' : 'password');
     onTogglePasswordVisibility && onTogglePasswordVisibility(event);
@@ -123,7 +126,7 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
     ref: ref
   }, rest);
 
-  var inputWrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), "".concat(prefix, "--text-input-wrapper"), "".concat(prefix, "--password-input-wrapper"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _classNames2));
+  var inputWrapperClasses = cx__default["default"]("".concat(prefix, "--form-item"), "".concat(prefix, "--text-input-wrapper"), "".concat(prefix, "--password-input-wrapper"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input--fluid"), isFluid), _classNames2));
   var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--inline--").concat(size), inline && !!size), _classNames3));
   var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
   var fieldOuterWrapperClasses = cx__default["default"]("".concat(prefix, "--text-input__field-outer-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
@@ -152,7 +155,9 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
   }), {
     disabled: disabled,
     "data-toggle-password-visibility": inputType === 'password'
-  })), /*#__PURE__*/React__default["default"].createElement("button", {
+  })), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+    className: "".concat(prefix, "--text-input__divider")
+  }), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
     disabled: disabled,
@@ -160,10 +165,6 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function P
   }, !disabled && /*#__PURE__*/React__default["default"].createElement("span", {
     className: "".concat(prefix, "--assistive-text")
   }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
-
-  var _useContext = React.useContext(FormContext.FormContext),
-      isFluid = _useContext.isFluid;
-
   React.useEffect(function () {
     setInputType(type);
   }, [type]);

package/lib/components/TextInput/TextInput.js

@@ -47,9 +47,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var _excluded = ["className", "disabled", "helperText", "hideLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "placeholder", "readOnly", "size", "type", "warn", "warnText"];
+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["default"].forwardRef(function TextInput(_ref, ref) {
-  var _classNames, _classNames2, _classNames3, _classNames4, _classNames7;
+  var _classNames, _classNames2, _classNames3, _classNames4, _classNames7, _classNames8;
 
   var className = _ref.className,
       _ref$disabled = _ref.disabled,
@@ -78,10 +78,21 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
       _ref$warn = _ref.warn,
       warn = _ref$warn === void 0 ? false : _ref$warn,
       warnText = _ref.warnText,
+      _ref$enableCounter = _ref.enableCounter,
+      enableCounter = _ref$enableCounter === void 0 ? false : _ref$enableCounter,
+      maxCount = _ref.maxCount,
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
   var enabled = index.useFeatureFlag('enable-v11-release');
+  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),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      textCount = _useState2[0],
+      setTextCount = _useState2[1];
+
   var normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
     id: id,
     readOnly: readOnly,
@@ -98,6 +109,10 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
     id: id,
     onChange: function onChange(evt) {
       if (!normalizedProps.disabled) {
+        var _evt$target$value;
+
+        setTextCount((_evt$target$value = evt.target.value) === null || _evt$target$value === void 0 ? void 0 : _evt$target$value.length);
+
         _onChange(evt);
       }
     },
@@ -115,16 +130,27 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
     readOnly: readOnly
   }, 'aria-describedby', helperText && normalizedProps.helperId), rest);
 
+  if (enableCounter) {
+    sharedTextInputProps.maxLength = maxCount;
+  }
+
   var inputWrapperClasses = cx__default["default"]([enabled ? cx__default["default"]("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")], "".concat(prefix, "--text-input-wrapper"), (_classNames2 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--readonly"), readOnly), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _classNames2));
   var labelClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), normalizedProps.disabled), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--inline"), inline), _rollupPluginBabelHelpers.defineProperty(_classNames3, "".concat(prefix, "--label--inline--").concat(size), inline && !!size), _classNames3));
   var helperTextClasses = cx__default["default"]("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), normalizedProps.disabled), _rollupPluginBabelHelpers.defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
   var fieldOuterWrapperClasses = cx__default["default"]("".concat(prefix, "--text-input__field-outer-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
   var fieldWrapperClasses = cx__default["default"]("".concat(prefix, "--text-input__field-wrapper"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--text-input__field-wrapper--warning"), normalizedProps.warn));
   var iconClasses = cx__default["default"]((_classNames7 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon"), normalizedProps.invalid || normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon--warning"), normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames7, "".concat(prefix, "--text-input__readonly-icon"), readOnly), _classNames7));
+  var counterClasses = cx__default["default"]("".concat(prefix, "--label"), (_classNames8 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--label--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--text-input__label-counter"), true), _classNames8));
+  var counter = enableCounter && maxCount ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: counterClasses
+  }, "".concat(textCount, "/").concat(maxCount)) : null;
   var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
+  var labelWrapper = /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--text-input__label-wrapper")
+  }, label, counter);
   var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
     id: normalizedProps.helperId,
     className: helperTextClasses
@@ -142,9 +168,9 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextI
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: inputWrapperClasses
-  }, !inline ? label : /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !inline ? labelWrapper : /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(prefix, "--text-input__label-helper-wrapper")
-  }, label, !isFluid && helper), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, labelWrapper, !isFluid && helper), /*#__PURE__*/React__default["default"].createElement("div", {
     className: fieldOuterWrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: fieldWrapperClasses,
@@ -174,6 +200,11 @@ TextInput.propTypes = {
    */
   disabled: PropTypes__default["default"].bool,
 
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter: PropTypes__default["default"].bool,
+
   /**
    * Provide text that is used alongside the control label for additional help
    */
@@ -216,6 +247,11 @@ TextInput.propTypes = {
    */
   light: PropTypes__default["default"].bool,
 
+  /**
+   * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+   */
+  maxCount: PropTypes__default["default"].number,
+
   /**
    * Optionally provide an `onChange` handler that is called whenever `<input>`
    * is updated