@carbon/react 0.17.0 → 1.0.0-rc.0

package/lib/components/TextInput/PasswordInput.js

@@ -0,0 +1,315 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var iconsReact = require('@carbon/icons-react');
+var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
+var util = require('./util.js');
+var FeatureFlags = require('@carbon/feature-flags');
+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 }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var _excluded = ["className", "disabled", "helperText", "hideLabel", "hidePasswordLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "onTogglePasswordVisibility", "placeholder", "size", "showPasswordLabel", "tooltipPosition", "tooltipAlignment", "type", "warn", "warnText"];
+var PasswordInput = /*#__PURE__*/React__default["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,
+      _ref$light = _ref.light,
+      light = _ref$light === void 0 ? false : _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,
+      _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,
+      warn = _ref.warn,
+      warnText = _ref.warnText,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var _useState = React.useState(type),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      inputType = _useState2[0],
+      setInputType = _useState2[1];
+
+  var prefix = usePrefix.usePrefix();
+  var normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id: id,
+    invalid: invalid,
+    invalidText: invalidText,
+    warn: warn,
+    warnText: warnText
+  });
+
+  var handleTogglePasswordVisibility = function handleTogglePasswordVisibility(event) {
+    setInputType(inputType === 'password' ? 'text' : 'password');
+    onTogglePasswordVisibility && onTogglePasswordVisibility(event);
+  };
+
+  var textInputClasses = cx__default["default"]("".concat(prefix, "--text-input"), "".concat(prefix, "--password-input"), className, (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--invalid"), normalizedProps.invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--warning"), normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--").concat(size), size), _classNames));
+
+  var sharedTextInputProps = _rollupPluginBabelHelpers.objectSpread2({
+    id: id,
+    onChange: function onChange(evt) {
+      if (!disabled) {
+        _onChange(evt);
+      }
+    },
+    onClick: function onClick(evt) {
+      if (!disabled) {
+        _onClick(evt);
+      }
+    },
+    placeholder: placeholder,
+    type: inputType,
+    className: textInputClasses,
+    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 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));
+  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), _classNames7));
+  var label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: id,
+    className: labelClasses
+  }, labelText) : null;
+  var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: helperTextClasses
+  }, helperText) : null;
+  var passwordIsVisible = inputType === 'text';
+  var passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React__default["default"].createElement(iconsReact.ViewOff, {
+    className: "".concat(prefix, "--icon-visibility-off")
+  }) : /*#__PURE__*/React__default["default"].createElement(iconsReact.View, {
+    className: "".concat(prefix, "--icon-visibility-on")
+  });
+  var passwordVisibilityToggleClasses = cx__default["default"]("".concat(prefix, "--text-input--password__visibility__toggle"), "".concat(prefix, "--btn"), "".concat(prefix, "--btn--icon-only"), "".concat(prefix, "--tooltip__trigger"), "".concat(prefix, "--tooltip--a11y"), (_classNames8 = {}, _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--btn--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--tooltip--").concat(tooltipPosition), tooltipPosition), _rollupPluginBabelHelpers.defineProperty(_classNames8, "".concat(prefix, "--tooltip--align-").concat(tooltipAlignment), tooltipAlignment), _classNames8));
+  var input = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", _rollupPluginBabelHelpers["extends"]({}, util.textInputProps({
+    sharedTextInputProps: sharedTextInputProps,
+    invalid: normalizedProps.invalid,
+    invalidId: normalizedProps.invalidId,
+    warn: normalizedProps.warn,
+    warnId: normalizedProps.warnId
+  }), {
+    disabled: disabled,
+    "data-toggle-password-visibility": inputType === 'password'
+  })), /*#__PURE__*/React__default["default"].createElement("button", {
+    type: "button",
+    className: passwordVisibilityToggleClasses,
+    disabled: disabled,
+    onClick: handleTogglePasswordVisibility
+  }, !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]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: inputWrapperClasses
+  }, !inline ? label : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--text-input__label-helper-wrapper")
+  }, label, !isFluid && helper), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: fieldOuterWrapperClasses
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: fieldWrapperClasses,
+    "data-invalid": normalizedProps.invalid || null
+  }, normalizedProps.icon && /*#__PURE__*/React__default["default"].createElement(normalizedProps.icon, {
+    className: iconClasses
+  }), input, isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
+});
+PasswordInput.displayName = 'PasswordInput';
+PasswordInput.propTypes = {
+  /**
+   * Provide a custom className that is applied directly to the underlying
+   * `<input>` node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes__default["default"].node,
+
+  /**
+   * Specify whether or not the underlying label is visually hidden
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * "Hide password" tooltip text on password visibility toggle
+   */
+  hidePasswordLabel: PropTypes__default["default"].string,
+
+  /**
+   * Provide a unique identifier for the input field
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * `true` to use the inline version.
+   */
+  inline: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * `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.
+   */
+  light: PropTypes__default["default"].bool,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<input>`
+   * is updated
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Callback function that is called whenever the toggle password visibility
+   * button is clicked
+   */
+  onTogglePasswordVisibility: PropTypes__default["default"].func,
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder: PropTypes__default["default"].string,
+
+  /**
+   * "Show password" tooltip text on password visibility toggle
+   */
+  showPasswordLabel: PropTypes__default["default"].string,
+
+  /**
+   * Specify the size of the Text Input. Supports `sm`, `md`, or `lg`.
+   */
+  size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['sm', 'md', 'lg']) : PropTypes__default["default"].string,
+
+  /**
+   * Specify the alignment of the tooltip to the icon-only button.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment: PropTypes__default["default"].oneOf(['start', 'center', 'end']),
+
+  /**
+   * Specify the direction of the tooltip for icon-only buttons.
+   * Can be either top, right, bottom, or left.
+   */
+  tooltipPosition: PropTypes__default["default"].oneOf(['top', 'right', 'bottom', 'left']),
+
+  /**
+   * The input type, either password or text
+   */
+  type: PropTypes__default["default"].oneOf(['password', 'text']),
+
+  /**
+   * Provide the current value of the `<input>`
+   */
+  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
+};
+var PasswordInput$1 = PasswordInput;
+
+exports["default"] = PasswordInput$1;

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

@@ -0,0 +1,54 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["hideLabel", "className"];
+
+var TextInputSkeleton = function TextInputSkeleton(_ref) {
+  var hideLabel = _ref.hideLabel,
+      className = _ref.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"]("".concat(prefix, "--form-item"), className)
+  }, rest), !hideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--skeleton ").concat(prefix, "--text-input")
+  }));
+};
+
+TextInputSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add to the form item wrapper.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel: PropTypes__default["default"].bool
+};
+var TextInputSkeleton$1 = TextInputSkeleton;
+
+exports["default"] = TextInputSkeleton$1;

package/lib/components/TextInput/TextInput.js

@@ -0,0 +1,268 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var useNormalizedInputProps = require('../../internal/useNormalizedInputProps.js');
+var PasswordInput = require('./PasswordInput.js');
+var ControlledPasswordInput = require('./ControlledPasswordInput.js');
+var util = require('./util.js');
+var index = require('../FeatureFlags/index.js');
+var FeatureFlags = require('@carbon/feature-flags');
+var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+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 TextInput = /*#__PURE__*/React__default["default"].forwardRef(function TextInput(_ref, ref) {
+  var _classNames, _classNames2, _classNames3, _classNames4, _classNames7;
+
+  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,
+      _ref$light = _ref.light,
+      light = _ref$light === void 0 ? false : _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,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var enabled = index.useFeatureFlag('enable-v11-release');
+  var normalizedProps = useNormalizedInputProps.useNormalizedInputProps({
+    id: id,
+    readOnly: readOnly,
+    disabled: disabled,
+    invalid: invalid,
+    invalidText: invalidText,
+    warn: warn,
+    warnText: warnText
+  });
+  var customClassName = className !== null && className !== void 0 ? className : "".concat(prefix, "--text__input");
+  var textInputClasses = cx__default["default"]("".concat(prefix, "--text-input"), [enabled ? null : className], (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, customClassName, enabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--light"), light), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--invalid"), normalizedProps.invalid), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--warning"), normalizedProps.warn), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--text-input--").concat(size), size), _classNames));
+
+  var sharedTextInputProps = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.defineProperty({
+    id: id,
+    onChange: function onChange(evt) {
+      if (!normalizedProps.disabled) {
+        _onChange(evt);
+      }
+    },
+    onClick: function onClick(evt) {
+      if (!normalizedProps.disabled) {
+        _onClick(evt);
+      }
+    },
+    placeholder: placeholder,
+    type: type,
+    ref: ref,
+    className: textInputClasses,
+    title: placeholder,
+    disabled: normalizedProps.disabled,
+    readOnly: readOnly
+  }, 'aria-describedby', helperText && normalizedProps.helperId), rest);
+
+  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 label = labelText ? /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: id,
+    className: labelClasses
+  }, labelText) : null;
+  var helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
+    id: normalizedProps.helperId,
+    className: helperTextClasses
+  }, helperText) : null;
+  var input = /*#__PURE__*/React__default["default"].createElement("input", util.textInputProps({
+    sharedTextInputProps: sharedTextInputProps,
+    invalid: normalizedProps.invalid,
+    invalidId: normalizedProps.invalidId,
+    warn: normalizedProps.warn,
+    warnId: normalizedProps.warnId
+  }));
+
+  var _useContext = React.useContext(FormContext.FormContext),
+      isFluid = _useContext.isFluid;
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: inputWrapperClasses
+  }, !inline ? label : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--text-input__label-helper-wrapper")
+  }, label, !isFluid && helper), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: fieldOuterWrapperClasses
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: fieldWrapperClasses,
+    "data-invalid": normalizedProps.invalid || null
+  }, normalizedProps.icon && /*#__PURE__*/React__default["default"].createElement(normalizedProps.icon, {
+    className: iconClasses
+  }), input, isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
+    className: "".concat(prefix, "--text-input__divider")
+  }), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
+});
+TextInput.displayName = 'TextInput';
+TextInput.PasswordInput = PasswordInput["default"];
+TextInput.ControlledPasswordInput = ControlledPasswordInput["default"];
+TextInput.propTypes = {
+  /**
+   * Specify an optional className to be applied to the `<input>` node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes__default["default"].node,
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * `true` to use the inline version.
+   */
+  inline: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes__default["default"].node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * `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.
+   */
+  light: PropTypes__default["default"].bool,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<input>`
+   * is updated
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder: PropTypes__default["default"].string,
+
+  /**
+   * Whether the input should be read-only
+   */
+  readOnly: PropTypes__default["default"].bool,
+
+  /**
+   * Specify the size of the Text Input. Currently supports the following:
+   */
+  size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['sm', 'md', 'lg']) : PropTypes__default["default"].oneOf(['sm', 'md', 'lg', 'xl']),
+
+  /**
+   * Specify the type of the `<input>`
+   */
+  type: PropTypes__default["default"].string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  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
+};
+var TextInput$1 = TextInput;
+
+exports["default"] = TextInput$1;

package/lib/components/TextInput/index.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var deprecateFieldOnObject = require('../../internal/deprecateFieldOnObject.js');
+var ControlledPasswordInput = require('./ControlledPasswordInput.js');
+var PasswordInput = require('./PasswordInput.js');
+var TextInput = require('./TextInput.js');
+
+TextInput["default"].ControlledPasswordInput = ControlledPasswordInput["default"];
+TextInput["default"].PasswordInput = PasswordInput["default"];
+
+if (process.env.NODE_ENV !== "production") {
+  deprecateFieldOnObject.deprecateFieldOnObject(TextInput["default"], 'ControlledPasswordInput', ControlledPasswordInput["default"]);
+  deprecateFieldOnObject.deprecateFieldOnObject(TextInput["default"], 'PasswordInput', PasswordInput["default"]);
+}
+
+exports["default"] = TextInput["default"];