@carbon/react 0.16.2 → 1.0.0-rc.0

package/es/components/TextInput/PasswordInput.js

@@ -0,0 +1,286 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useContext, useEffect } from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { ViewOff, View } from '@carbon/icons-react';
+import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
+import { textInputProps } from './util.js';
+import * as FeatureFlags from '@carbon/feature-flags';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+var _excluded = ["className", "disabled", "helperText", "hideLabel", "hidePasswordLabel", "id", "inline", "invalid", "invalidText", "labelText", "light", "onChange", "onClick", "onTogglePasswordVisibility", "placeholder", "size", "showPasswordLabel", "tooltipPosition", "tooltipAlignment", "type", "warn", "warnText"];
+var PasswordInput = /*#__PURE__*/React__default.forwardRef(function PasswordInput(_ref, ref) {
+  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 = _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
+  });
+
+  var handleTogglePasswordVisibility = function 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) {
+      if (!disabled) {
+        _onChange(evt);
+      }
+    },
+    onClick: function onClick(evt) {
+      if (!disabled) {
+        _onClick(evt);
+      }
+    },
+    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), _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", {
+    htmlFor: id,
+    className: labelClasses
+  }, labelText) : null;
+  var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+    className: helperTextClasses
+  }, helperText) : null;
+  var passwordIsVisible = inputType === 'text';
+  var passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React__default.createElement(ViewOff, {
+    className: "".concat(prefix, "--icon-visibility-off")
+  }) : /*#__PURE__*/React__default.createElement(View, {
+    className: "".concat(prefix, "--icon-visibility-on")
+  });
+  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,
+    invalid: normalizedProps.invalid,
+    invalidId: normalizedProps.invalidId,
+    warn: normalizedProps.warn,
+    warnId: normalizedProps.warnId
+  }), {
+    disabled: disabled,
+    "data-toggle-password-visibility": inputType === 'password'
+  })), /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: passwordVisibilityToggleClasses,
+    disabled: disabled,
+    onClick: handleTogglePasswordVisibility
+  }, !disabled && /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--assistive-text")
+  }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
+
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
+  useEffect(function () {
+    setInputType(type);
+  }, [type]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: inputWrapperClasses
+  }, !inline ? label : /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--text-input__label-helper-wrapper")
+  }, label, !isFluid && helper), /*#__PURE__*/React__default.createElement("div", {
+    className: fieldOuterWrapperClasses
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: fieldWrapperClasses,
+    "data-invalid": normalizedProps.invalid || null
+  }, normalizedProps.icon && /*#__PURE__*/React__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.string,
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes.node,
+
+  /**
+   * Specify whether or not the underlying label is visually hidden
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * "Hide password" tooltip text on password visibility toggle
+   */
+  hidePasswordLabel: PropTypes.string,
+
+  /**
+   * Provide a unique identifier for the input field
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * `true` to use the inline version.
+   */
+  inline: PropTypes.bool,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes.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.bool,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<input>`
+   * is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Callback function that is called whenever the toggle password visibility
+   * button is clicked
+   */
+  onTogglePasswordVisibility: PropTypes.func,
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * "Show password" tooltip text on password visibility toggle
+   */
+  showPasswordLabel: PropTypes.string,
+
+  /**
+   * Specify the size of the Text Input. Supports `sm`, `md`, or `lg`.
+   */
+  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg']) : PropTypes.string,
+
+  /**
+   * Specify the alignment of the tooltip to the icon-only button.
+   * Can be one of: start, center, or end.
+   */
+  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
+
+  /**
+   * Specify the direction of the tooltip for icon-only buttons.
+   * Can be either top, right, bottom, or left.
+   */
+  tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+
+  /**
+   * The input type, either password or text
+   */
+  type: PropTypes.oneOf(['password', 'text']),
+
+  /**
+   * Provide the current value of the `<input>`
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
+};
+var PasswordInput$1 = PasswordInput;
+
+export { PasswordInput$1 as default };

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

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, 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();
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: cx("".concat(prefix, "--form-item"), className)
+  }, rest), !hideLabel && /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--label ").concat(prefix, "--skeleton")
+  }), /*#__PURE__*/React__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.string,
+
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  hideLabel: PropTypes.bool
+};
+var TextInputSkeleton$1 = TextInputSkeleton;
+
+export { TextInputSkeleton$1 as default };

package/es/components/TextInput/TextInput.js

@@ -0,0 +1,239 @@
+/**
+ * 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.
+ */
+
+import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { useContext } from 'react';
+import cx from 'classnames';
+import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
+import PasswordInput from './PasswordInput.js';
+import ControlledPasswordInput from './ControlledPasswordInput.js';
+import { textInputProps } from './util.js';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
+import * as FeatureFlags from '@carbon/feature-flags';
+import { usePrefix } from '../../internal/usePrefix.js';
+import { FormContext } from '../FluidForm/FormContext.js';
+
+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.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 = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var enabled = useFeatureFlag('enable-v11-release');
+  var normalizedProps = 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("".concat(prefix, "--text-input"), [enabled ? null : className], (_classNames = {}, _defineProperty(_classNames, customClassName, enabled), _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) {
+      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([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), _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), _defineProperty(_classNames7, "".concat(prefix, "--text-input__readonly-icon"), readOnly), _classNames7));
+  var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
+    className: labelClasses
+  }, labelText) : null;
+  var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+    id: normalizedProps.helperId,
+    className: helperTextClasses
+  }, helperText) : null;
+  var input = /*#__PURE__*/React__default.createElement("input", textInputProps({
+    sharedTextInputProps: sharedTextInputProps,
+    invalid: normalizedProps.invalid,
+    invalidId: normalizedProps.invalidId,
+    warn: normalizedProps.warn,
+    warnId: normalizedProps.warnId
+  }));
+
+  var _useContext = useContext(FormContext),
+      isFluid = _useContext.isFluid;
+
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: inputWrapperClasses
+  }, !inline ? label : /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--text-input__label-helper-wrapper")
+  }, label, !isFluid && helper), /*#__PURE__*/React__default.createElement("div", {
+    className: fieldOuterWrapperClasses
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: fieldWrapperClasses,
+    "data-invalid": normalizedProps.invalid || null
+  }, normalizedProps.icon && /*#__PURE__*/React__default.createElement(normalizedProps.icon, {
+    className: iconClasses
+  }), input, isFluid && /*#__PURE__*/React__default.createElement("hr", {
+    className: "".concat(prefix, "--text-input__divider")
+  }), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));
+});
+TextInput.displayName = 'TextInput';
+TextInput.PasswordInput = PasswordInput;
+TextInput.ControlledPasswordInput = ControlledPasswordInput;
+TextInput.propTypes = {
+  /**
+   * Specify an optional className to be applied to the `<input>` node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Provide text that is used alongside the control label for additional help
+   */
+  helperText: PropTypes.node,
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  hideLabel: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the `<input>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * `true` to use the inline version.
+   */
+  inline: PropTypes.bool,
+
+  /**
+   * Specify whether the control is currently invalid
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in an invalid state
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide the text that will be read by a screen reader when visiting this
+   * control
+   */
+  labelText: PropTypes.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.bool,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<input>`
+   * is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<input>` is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the placeholder attribute for the `<input>`
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Whether the input should be read-only
+   */
+  readOnly: PropTypes.bool,
+
+  /**
+   * Specify the size of the Text Input. Currently supports the following:
+   */
+  size: FeatureFlags.enabled('enable-v11-release') ? PropTypes.oneOf(['sm', 'md', 'lg']) : PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+
+  /**
+   * Specify the type of the `<input>`
+   */
+  type: PropTypes.string,
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node
+};
+var TextInput$1 = TextInput;
+
+export { TextInput$1 as default };

package/es/components/TextInput/index.js

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+import { deprecateFieldOnObject } from '../../internal/deprecateFieldOnObject.js';
+import ControlledPasswordInput from './ControlledPasswordInput.js';
+import PasswordInput from './PasswordInput.js';
+import TextInput from './TextInput.js';
+export { default } from './TextInput.js';
+
+TextInput.ControlledPasswordInput = ControlledPasswordInput;
+TextInput.PasswordInput = PasswordInput;
+
+if (process.env.NODE_ENV !== "production") {
+  deprecateFieldOnObject(TextInput, 'ControlledPasswordInput', ControlledPasswordInput);
+  deprecateFieldOnObject(TextInput, 'PasswordInput', PasswordInput);
+}

package/es/components/TextInput/util.js

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+
+import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+
+var invalidProps = function invalidProps(invalidId) {
+  return {
+    'data-invalid': true,
+    'aria-invalid': true,
+    'aria-describedby': invalidId
+  };
+};
+
+var warnProps = function warnProps(warnId) {
+  return {
+    'aria-describedby': warnId
+  };
+};
+
+var textInputProps = function textInputProps(_ref) {
+  var sharedTextInputProps = _ref.sharedTextInputProps,
+      invalid = _ref.invalid,
+      invalidId = _ref.invalidId,
+      warn = _ref.warn,
+      warnId = _ref.warnId;
+  return _objectSpread2(_objectSpread2(_objectSpread2({}, sharedTextInputProps), invalid ? invalidProps(invalidId) : {}), warn ? warnProps(warnId) : {});
+};
+
+export { textInputProps };