@carbon/react 1.27.0 → 1.28.0

package/es/components/TextInput/PasswordInput.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState, useContext, useEffect } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -17,113 +17,123 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["className", "disabled", "helperText", "hideLabel", "hidePasswordLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "onTogglePasswordVisibility", "placeholder", "readOnly", "size", "showPasswordLabel", "tooltipPosition", "tooltipAlignment", "type", "warn", "warnText"];
-var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInput(_ref, ref) {
-  var _classNames, _classNames2, _classNames3, _classNames4, _classNames7, _classNames8;
-
-  var className = _ref.className,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      helperText = _ref.helperText,
-      hideLabel = _ref.hideLabel,
-      _ref$hidePasswordLabe = _ref.hidePasswordLabel,
-      hidePasswordLabel = _ref$hidePasswordLabe === void 0 ? 'Hide password' : _ref$hidePasswordLabe,
-      id = _ref.id,
-      inline = _ref.inline,
-      _ref$invalid = _ref.invalid,
-      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-      invalidText = _ref.invalidText,
-      labelText = _ref.labelText,
-      light = _ref.light,
-      _ref$onChange = _ref.onChange,
-      _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$onClick = _ref.onClick,
-      _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      onTogglePasswordVisibility = _ref.onTogglePasswordVisibility,
-      placeholder = _ref.placeholder,
-      readOnly = _ref.readOnly,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
-      _ref$showPasswordLabe = _ref.showPasswordLabel,
-      showPasswordLabel = _ref$showPasswordLabe === void 0 ? 'Show password' : _ref$showPasswordLabe,
-      _ref$tooltipPosition = _ref.tooltipPosition,
-      tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition,
-      _ref$tooltipAlignment = _ref.tooltipAlignment,
-      tooltipAlignment = _ref$tooltipAlignment === void 0 ? 'center' : _ref$tooltipAlignment,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'password' : _ref$type,
-      _ref$warn = _ref.warn,
-      warn = _ref$warn === void 0 ? false : _ref$warn,
-      warnText = _ref.warnText,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var _useState = useState(type),
-      _useState2 = _slicedToArray(_useState, 2),
-      inputType = _useState2[0],
-      setInputType = _useState2[1];
-
-  var prefix = usePrefix();
-  var normalizedProps = useNormalizedInputProps({
-    id: id,
-    invalid: invalid,
-    invalidText: invalidText,
-    warn: warn,
-    warnText: warnText,
-    readOnly: readOnly,
-    disabled: disabled
+const PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInput(_ref, ref) {
+  let {
+    className,
+    disabled = false,
+    helperText,
+    hideLabel,
+    hidePasswordLabel = 'Hide password',
+    id,
+    inline,
+    invalid = false,
+    invalidText,
+    labelText,
+    light,
+    onChange = () => {},
+    onClick = () => {},
+    onTogglePasswordVisibility,
+    placeholder,
+    readOnly,
+    size = 'md',
+    showPasswordLabel = 'Show password',
+    tooltipPosition = 'bottom',
+    tooltipAlignment = 'center',
+    type = 'password',
+    warn = false,
+    warnText,
+    ...rest
+  } = _ref;
+  const [inputType, setInputType] = useState(type);
+  const prefix = usePrefix();
+  const normalizedProps = useNormalizedInputProps({
+    id,
+    invalid,
+    invalidText,
+    warn,
+    warnText,
+    readOnly,
+    disabled
   });
+  const {
+    isFluid
+  } = useContext(FormContext);
 
-  var _useContext = useContext(FormContext),
-      isFluid = _useContext.isFluid;
-
-  var handleTogglePasswordVisibility = function handleTogglePasswordVisibility(event) {
+  const handleTogglePasswordVisibility = event => {
     setInputType(inputType === 'password' ? 'text' : 'password');
     onTogglePasswordVisibility && onTogglePasswordVisibility(event);
   };
 
-  var textInputClasses = cx("".concat(prefix, "--text-input"), "".concat(prefix, "--password-input"), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--text-input--light"), light), _defineProperty(_classNames, "".concat(prefix, "--text-input--invalid"), normalizedProps.invalid), _defineProperty(_classNames, "".concat(prefix, "--text-input--warning"), normalizedProps.warn), _defineProperty(_classNames, "".concat(prefix, "--text-input--").concat(size), size), _classNames));
-
-  var sharedTextInputProps = _objectSpread2({
-    id: id,
-    onChange: function onChange(evt) {
+  const textInputClasses = cx(`${prefix}--text-input`, `${prefix}--password-input`, className, {
+    [`${prefix}--text-input--light`]: light,
+    [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
+    [`${prefix}--text-input--warning`]: normalizedProps.warn,
+    [`${prefix}--text-input--${size}`]: size
+  });
+  const sharedTextInputProps = {
+    id,
+    onChange: evt => {
       if (!disabled) {
-        _onChange(evt);
+        onChange(evt);
       }
     },
-    onClick: function onClick(evt) {
+    onClick: evt => {
       if (!disabled) {
-        _onClick(evt);
+        onClick(evt);
       }
     },
-    placeholder: placeholder,
+    placeholder,
     type: inputType,
     className: textInputClasses,
-    ref: ref
-  }, rest);
-
-  var inputWrapperClasses = cx("".concat(prefix, "--form-item"), "".concat(prefix, "--text-input-wrapper"), "".concat(prefix, "--password-input-wrapper"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _defineProperty(_classNames2, "".concat(prefix, "--text-input--fluid"), isFluid), _classNames2));
-  var labelClasses = cx("".concat(prefix, "--label"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_classNames3, "".concat(prefix, "--label--inline"), inline), _defineProperty(_classNames3, "".concat(prefix, "--label--inline--").concat(size), inline && !!size), _classNames3));
-  var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), disabled), _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
-  var fieldOuterWrapperClasses = cx("".concat(prefix, "--text-input__field-outer-wrapper"), _defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
-  var fieldWrapperClasses = cx("".concat(prefix, "--text-input__field-wrapper"), _defineProperty({}, "".concat(prefix, "--text-input__field-wrapper--warning"), normalizedProps.warn));
-  var iconClasses = cx((_classNames7 = {}, _defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon"), normalizedProps.invalid || normalizedProps.warn), _defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon--warning"), normalizedProps.warn), _classNames7));
-  var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
+    ref,
+    ...rest
+  };
+  const inputWrapperClasses = cx(`${prefix}--form-item`, `${prefix}--text-input-wrapper`, `${prefix}--password-input-wrapper`, {
+    [`${prefix}--text-input-wrapper--light`]: light,
+    [`${prefix}--text-input-wrapper--inline`]: inline,
+    [`${prefix}--text-input--fluid`]: isFluid
+  });
+  const labelClasses = cx(`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--label--inline`]: inline,
+    [`${prefix}--label--inline--${size}`]: inline && !!size
+  });
+  const helperTextClasses = cx(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled,
+    [`${prefix}--form__helper-text--inline`]: inline
+  });
+  const fieldOuterWrapperClasses = cx(`${prefix}--text-input__field-outer-wrapper`, {
+    [`${prefix}--text-input__field-outer-wrapper--inline`]: inline
+  });
+  const fieldWrapperClasses = cx(`${prefix}--text-input__field-wrapper`, {
+    [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn
+  });
+  const iconClasses = cx({
+    [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
+    [`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
+  });
+  const label = labelText ? /*#__PURE__*/React__default.createElement("label", {
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
-  var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+  const helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
     id: normalizedProps.helperId,
     className: helperTextClasses
   }, helperText) : null;
-  var passwordIsVisible = inputType === 'text';
-  var passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React__default.createElement(ViewOff, {
-    className: "".concat(prefix, "--icon-visibility-off")
+  const passwordIsVisible = inputType === 'text';
+  const passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React__default.createElement(ViewOff, {
+    className: `${prefix}--icon-visibility-off`
   }) : /*#__PURE__*/React__default.createElement(View, {
-    className: "".concat(prefix, "--icon-visibility-on")
+    className: `${prefix}--icon-visibility-on`
+  });
+  const passwordVisibilityToggleClasses = cx(`${prefix}--text-input--password__visibility__toggle`, `${prefix}--btn`, `${prefix}--btn--icon-only`, `${prefix}--tooltip__trigger`, `${prefix}--tooltip--a11y`, {
+    [`${prefix}--btn--disabled`]: disabled,
+    [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
+    [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
   });
-  var passwordVisibilityToggleClasses = cx("".concat(prefix, "--text-input--password__visibility__toggle"), "".concat(prefix, "--btn"), "".concat(prefix, "--btn--icon-only"), "".concat(prefix, "--tooltip__trigger"), "".concat(prefix, "--tooltip--a11y"), (_classNames8 = {}, _defineProperty(_classNames8, "".concat(prefix, "--btn--disabled"), disabled), _defineProperty(_classNames8, "".concat(prefix, "--tooltip--").concat(tooltipPosition), tooltipPosition), _defineProperty(_classNames8, "".concat(prefix, "--tooltip--align-").concat(tooltipAlignment), tooltipAlignment), _classNames8));
-  var input = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", _extends({}, textInputProps({
-    sharedTextInputProps: sharedTextInputProps,
+  const input = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", _extends({}, textInputProps({
+    sharedTextInputProps,
     invalid: normalizedProps.invalid,
     invalidId: normalizedProps.invalidId,
     warn: normalizedProps.warn,
@@ -134,23 +144,23 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInpu
     disabled: disabled,
     "data-toggle-password-visibility": inputType === 'password'
   })), isFluid && /*#__PURE__*/React__default.createElement("hr", {
-    className: "".concat(prefix, "--text-input__divider")
+    className: `${prefix}--text-input__divider`
   }), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: passwordVisibilityToggleClasses,
     disabled: disabled,
     onClick: handleTogglePasswordVisibility
   }, !disabled && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--assistive-text")
+    className: `${prefix}--assistive-text`
   }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
-  useEffect(function () {
+  useEffect(() => {
     setInputType(type);
   }, [type]);
-  var Icon = normalizedProps.icon;
+  const Icon = normalizedProps.icon;
   return /*#__PURE__*/React__default.createElement("div", {
     className: inputWrapperClasses
   }, !inline ? label : /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--text-input__label-helper-wrapper")
+    className: `${prefix}--text-input__label-helper-wrapper`
   }, label, !isFluid && helper), /*#__PURE__*/React__default.createElement("div", {
     className: fieldOuterWrapperClasses
   }, /*#__PURE__*/React__default.createElement("div", {

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

@@ -5,26 +5,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["hideLabel", "className"];
-
-var TextInputSkeleton = function TextInputSkeleton(_ref) {
-  var hideLabel = _ref.hideLabel,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
+const TextInputSkeleton = _ref => {
+  let {
+    hideLabel,
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: cx("".concat(prefix, "--form-item"), className)
+    className: cx(`${prefix}--form-item`, className)
   }, rest), !hideLabel && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+    className: `${prefix}--label ${prefix}--skeleton`
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+    className: `${prefix}--skeleton ${prefix}--text-input`
   }));
 };
 

package/es/components/TextInput/TextInput.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useState, useContext } from 'react';
 import cx from 'classnames';
@@ -21,129 +20,142 @@ import * as FeatureFlags from '@carbon/feature-flags';
 import { usePrefix } from '../../internal/usePrefix.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) {
-  var _classNames, _classNames2, _classNames3, _classNames4, _classNames7, _classNames8;
-
-  var className = _ref.className,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      helperText = _ref.helperText,
-      hideLabel = _ref.hideLabel,
-      id = _ref.id,
-      _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline,
-      _ref$invalid = _ref.invalid,
-      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-      invalidText = _ref.invalidText,
-      labelText = _ref.labelText,
-      light = _ref.light,
-      _ref$onChange = _ref.onChange,
-      _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      _ref$onClick = _ref.onClick,
-      _onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      placeholder = _ref.placeholder,
-      readOnly = _ref.readOnly,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      _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 = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var enabled = useFeatureFlag('enable-v11-release');
-  var defaultValue = rest.defaultValue,
-      value = rest.value;
-
-  var _useState = useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString().length) || (value === null || value === void 0 ? void 0 : value.toString().length) || 0),
-      _useState2 = _slicedToArray(_useState, 2),
-      textCount = _useState2[0],
-      setTextCount = _useState2[1];
-
-  var normalizedProps = useNormalizedInputProps({
-    id: id,
-    readOnly: readOnly,
-    disabled: disabled,
-    invalid: invalid,
-    invalidText: invalidText,
-    warn: warn,
-    warnText: warnText
+const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref, ref) {
+  let {
+    className,
+    disabled = false,
+    helperText,
+    hideLabel,
+    id,
+    inline = false,
+    invalid = false,
+    invalidText,
+    labelText,
+    light,
+    onChange = () => {},
+    onClick = () => {},
+    placeholder,
+    readOnly,
+    size = 'md',
+    type = 'text',
+    warn = false,
+    warnText,
+    enableCounter = false,
+    maxCount,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const enabled = useFeatureFlag('enable-v11-release');
+  const {
+    defaultValue,
+    value
+  } = rest;
+  const [textCount, setTextCount] = useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.toString().length) || (value === null || value === void 0 ? void 0 : value.toString().length) || 0);
+  const normalizedProps = useNormalizedInputProps({
+    id,
+    readOnly,
+    disabled,
+    invalid,
+    invalidText,
+    warn,
+    warnText
   });
-  var textInputClasses = cx("".concat(prefix, "--text-input"), [enabled ? null : className], (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--text-input--light"), light), _defineProperty(_classNames, "".concat(prefix, "--text-input--invalid"), normalizedProps.invalid), _defineProperty(_classNames, "".concat(prefix, "--text-input--warning"), normalizedProps.warn), _defineProperty(_classNames, "".concat(prefix, "--text-input--").concat(size), size), _classNames));
-
-  var sharedTextInputProps = _objectSpread2(_defineProperty({
-    id: id,
-    onChange: function onChange(evt) {
+  const textInputClasses = cx(`${prefix}--text-input`, [enabled ? null : className], {
+    [`${prefix}--text-input--light`]: light,
+    [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
+    [`${prefix}--text-input--warning`]: normalizedProps.warn,
+    [`${prefix}--text-input--${size}`]: size
+  });
+  const sharedTextInputProps = {
+    id,
+    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);
+        onChange(evt);
       }
     },
-    onClick: function onClick(evt) {
+    onClick: evt => {
       if (!normalizedProps.disabled) {
-        _onClick(evt);
+        onClick(evt);
       }
     },
-    placeholder: placeholder,
-    type: type,
-    ref: ref,
+    placeholder,
+    type,
+    ref,
     className: textInputClasses,
     title: placeholder,
     disabled: normalizedProps.disabled,
-    readOnly: readOnly
-  }, 'aria-describedby', helperText && normalizedProps.helperId), rest);
+    readOnly,
+    ['aria-describedby']: helperText && normalizedProps.helperId,
+    ...rest
+  };
 
   if (enableCounter) {
     sharedTextInputProps.maxLength = maxCount;
   }
 
-  var inputWrapperClasses = cx([enabled ? cx("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")], "".concat(prefix, "--text-input-wrapper"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--readonly"), readOnly), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--light"), light), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline"), inline), _defineProperty(_classNames2, "".concat(prefix, "--text-input-wrapper--inline--invalid"), inline && normalizedProps.invalid), _classNames2));
-  var labelClasses = cx("".concat(prefix, "--label"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames3, "".concat(prefix, "--label--disabled"), normalizedProps.disabled), _defineProperty(_classNames3, "".concat(prefix, "--label--inline"), inline), _defineProperty(_classNames3, "".concat(prefix, "--label--inline--").concat(size), inline && !!size), _classNames3));
-  var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--disabled"), normalizedProps.disabled), _defineProperty(_classNames4, "".concat(prefix, "--form__helper-text--inline"), inline), _classNames4));
-  var fieldOuterWrapperClasses = cx("".concat(prefix, "--text-input__field-outer-wrapper"), _defineProperty({}, "".concat(prefix, "--text-input__field-outer-wrapper--inline"), inline));
-  var fieldWrapperClasses = cx("".concat(prefix, "--text-input__field-wrapper"), _defineProperty({}, "".concat(prefix, "--text-input__field-wrapper--warning"), normalizedProps.warn));
-  var iconClasses = cx((_classNames7 = {}, _defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon"), normalizedProps.invalid || normalizedProps.warn), _defineProperty(_classNames7, "".concat(prefix, "--text-input__invalid-icon--warning"), normalizedProps.warn), _classNames7));
-  var counterClasses = cx("".concat(prefix, "--label"), (_classNames8 = {}, _defineProperty(_classNames8, "".concat(prefix, "--label--disabled"), disabled), _defineProperty(_classNames8, "".concat(prefix, "--text-input__label-counter"), true), _classNames8));
-  var counter = enableCounter && maxCount ? /*#__PURE__*/React__default.createElement("div", {
+  const inputWrapperClasses = cx([enabled ? cx(`${prefix}--form-item`, className) : `${prefix}--form-item`], `${prefix}--text-input-wrapper`, {
+    [`${prefix}--text-input-wrapper--readonly`]: readOnly,
+    [`${prefix}--text-input-wrapper--light`]: light,
+    [`${prefix}--text-input-wrapper--inline`]: inline,
+    [`${prefix}--text-input-wrapper--inline--invalid`]: inline && normalizedProps.invalid
+  });
+  const labelClasses = cx(`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: normalizedProps.disabled,
+    [`${prefix}--label--inline`]: inline,
+    [`${prefix}--label--inline--${size}`]: inline && !!size
+  });
+  const helperTextClasses = cx(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,
+    [`${prefix}--form__helper-text--inline`]: inline
+  });
+  const fieldOuterWrapperClasses = cx(`${prefix}--text-input__field-outer-wrapper`, {
+    [`${prefix}--text-input__field-outer-wrapper--inline`]: inline
+  });
+  const fieldWrapperClasses = cx(`${prefix}--text-input__field-wrapper`, {
+    [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn
+  });
+  const iconClasses = cx({
+    [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
+    [`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
+  });
+  const counterClasses = cx(`${prefix}--label`, {
+    [`${prefix}--label--disabled`]: disabled,
+    [`${prefix}--text-input__label-counter`]: true
+  });
+  const counter = enableCounter && maxCount ? /*#__PURE__*/React__default.createElement("div", {
     className: counterClasses
-  }, "".concat(textCount, "/").concat(maxCount)) : null;
-  var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
+  }, `${textCount}/${maxCount}`) : null;
+  const label = labelText ? /*#__PURE__*/React__default.createElement("label", {
     htmlFor: id,
     className: labelClasses
   }, labelText) : null;
-  var labelWrapper = /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--text-input__label-wrapper")
+  const labelWrapper = /*#__PURE__*/React__default.createElement("div", {
+    className: `${prefix}--text-input__label-wrapper`
   }, label, counter);
-  var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+  const helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
     id: normalizedProps.helperId,
     className: helperTextClasses
   }, helperText) : null;
-  var input = /*#__PURE__*/React__default.createElement("input", textInputProps({
-    sharedTextInputProps: sharedTextInputProps,
+  const input = /*#__PURE__*/React__default.createElement("input", textInputProps({
+    sharedTextInputProps,
     invalid: normalizedProps.invalid,
     invalidId: normalizedProps.invalidId,
     warn: normalizedProps.warn,
     warnId: normalizedProps.warnId
   }));
-
-  var _useContext = useContext(FormContext),
-      isFluid = _useContext.isFluid;
-
-  var ariaAnnouncement = useAnnouncer(textCount, maxCount);
-  var Icon = normalizedProps.icon;
+  const {
+    isFluid
+  } = useContext(FormContext);
+  const ariaAnnouncement = useAnnouncer(textCount, maxCount);
+  const Icon = normalizedProps.icon;
   return /*#__PURE__*/React__default.createElement("div", {
     className: inputWrapperClasses
   }, !inline ? labelWrapper : /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--text-input__label-helper-wrapper")
+    className: `${prefix}--text-input__label-helper-wrapper`
   }, labelWrapper, !isFluid && (normalizedProps.validation || helper)), /*#__PURE__*/React__default.createElement("div", {
     className: fieldOuterWrapperClasses
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -152,10 +164,10 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref,
   }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
     className: iconClasses
   }), input, /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--text-input__counter-alert"),
+    className: `${prefix}--text-input__counter-alert`,
     role: "alert"
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default.createElement("hr", {
-    className: "".concat(prefix, "--text-input__divider")
+    className: `${prefix}--text-input__divider`
   }), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
 });
 TextInput.displayName = 'TextInput';

package/es/components/TextInput/util.js

@@ -5,42 +5,40 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+const invalidProps = invalidId => ({
+  'data-invalid': true,
+  'aria-invalid': true,
+  'aria-describedby': invalidId
+});
 
-var invalidProps = function invalidProps(invalidId) {
-  return {
-    'data-invalid': true,
-    'aria-invalid': true,
-    'aria-describedby': invalidId
-  };
-};
-
-var warnProps = function warnProps(warnId) {
-  return {
-    'aria-describedby': warnId
-  };
-};
+const warnProps = warnId => ({
+  'aria-describedby': warnId
+});
 
-var helperProps = function helperProps(helperId) {
-  return {
-    'aria-describedby': helperId
-  };
-};
+const helperProps = helperId => ({
+  'aria-describedby': helperId
+});
 /**
  * @param {{sharedTextInputProps: object, invalid?: boolean, invalidId?: string, warn?: boolean, warnId?: string, hasHelper?: boolean, helperId?: string}} config
  * @returns {object}
  */
 
 
-var textInputProps = function textInputProps(_ref) {
-  var sharedTextInputProps = _ref.sharedTextInputProps,
-      invalid = _ref.invalid,
-      invalidId = _ref.invalidId,
-      warn = _ref.warn,
-      warnId = _ref.warnId,
-      hasHelper = _ref.hasHelper,
-      helperId = _ref.helperId;
-  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, sharedTextInputProps), invalid ? invalidProps(invalidId) : {}), warn ? warnProps(warnId) : {}), hasHelper ? helperProps(helperId) : {});
+const textInputProps = _ref => {
+  let {
+    sharedTextInputProps,
+    invalid,
+    invalidId,
+    warn,
+    warnId,
+    hasHelper,
+    helperId
+  } = _ref;
+  return { ...sharedTextInputProps,
+    ...(invalid ? invalidProps(invalidId) : {}),
+    ...(warn ? warnProps(warnId) : {}),
+    ...(hasHelper ? helperProps(helperId) : {})
+  };
 };
 
 export { textInputProps };