@carbon/react 0.17.0 → 1.0.0-rc.0

package/es/components/TextArea/TextArea.js

@@ -0,0 +1,220 @@
+/**
+ * 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, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default, { useState } from 'react';
+import cx from 'classnames';
+import { WarningFilled } from '@carbon/icons-react';
+import { useFeatureFlag } from '../FeatureFlags/index.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["className", "id", "labelText", "hideLabel", "onChange", "onClick", "invalid", "invalidText", "helperText", "light", "placeholder", "enableCounter", "maxCount"];
+var TextArea = /*#__PURE__*/React__default.forwardRef(function TextArea(_ref, ref) {
+  var _classNames, _classNames4;
+
+  var className = _ref.className,
+      id = _ref.id,
+      labelText = _ref.labelText,
+      hideLabel = _ref.hideLabel,
+      _onChange = _ref.onChange,
+      _onClick = _ref.onClick,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      helperText = _ref.helperText,
+      light = _ref.light,
+      placeholder = _ref.placeholder,
+      enableCounter = _ref.enableCounter,
+      maxCount = _ref.maxCount,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+  var enabled = useFeatureFlag('enable-v11-release');
+  var defaultValue = other.defaultValue,
+      value = other.value,
+      disabled = other.disabled;
+
+  var _useState = useState((defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.length) || (value === null || value === void 0 ? void 0 : value.length) || 0),
+      _useState2 = _slicedToArray(_useState, 2),
+      textCount = _useState2[0],
+      setTextCount = _useState2[1];
+
+  var textareaProps = {
+    id: id,
+    onChange: function onChange(evt) {
+      if (!other.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);
+      }
+    },
+    onClick: function onClick(evt) {
+      if (!other.disabled) {
+        _onClick(evt);
+      }
+    },
+    ref: ref
+  };
+
+  if (enableCounter) {
+    textareaProps.maxLength = maxCount;
+  }
+
+  var labelClasses = cx("".concat(prefix, "--label"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames, "".concat(prefix, "--label--disabled"), disabled), _classNames));
+  var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
+    className: labelClasses
+  }, labelText) : null;
+  var counterClasses = cx("".concat(prefix, "--label"), _defineProperty({}, "".concat(prefix, "--label--disabled"), disabled));
+  var counter = enableCounter && maxCount ? /*#__PURE__*/React__default.createElement("div", {
+    className: counterClasses
+  }, "".concat(textCount, "/").concat(maxCount)) : null;
+  var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), other.disabled));
+  var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+    className: helperTextClasses
+  }, helperText) : null;
+  var errorId = id + '-error-msg';
+  var error = invalid ? /*#__PURE__*/React__default.createElement("div", {
+    role: "alert",
+    className: "".concat(prefix, "--form-requirement"),
+    id: errorId
+  }, invalidText) : null;
+  var textareaClasses = cx("".concat(prefix, "--text-area"), [enabled ? null : className], (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--text-area--light"), light), _defineProperty(_classNames4, "".concat(prefix, "--text-area--invalid"), invalid), _classNames4));
+  var input = /*#__PURE__*/React__default.createElement("textarea", _extends({}, other, textareaProps, {
+    placeholder: placeholder || null,
+    className: textareaClasses,
+    "aria-invalid": invalid || null,
+    "aria-describedby": invalid ? errorId : null,
+    disabled: other.disabled
+  }));
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: enabled ? cx("".concat(prefix, "--form-item"), className) : "".concat(prefix, "--form-item")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--text-area__label-wrapper")
+  }, label, counter), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--text-area__wrapper"),
+    "data-invalid": invalid || null
+  }, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
+    className: "".concat(prefix, "--text-area__invalid-icon")
+  }), input), invalid ? error : helper);
+});
+TextArea.displayName = 'TextArea';
+TextArea.propTypes = {
+  /**
+   * Provide a custom className that is applied directly to the underlying
+   * `<textarea>` node
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the `cols` attribute for the underlying `<textarea>` node
+   */
+  cols: PropTypes.number,
+
+  /**
+   * Optionally provide the default value of the `<textarea>`
+   */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify whether to display the character counter
+   */
+  enableCounter: 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,
+
+  /**
+   * Provide a unique identifier for the control
+   */
+  id: PropTypes.string,
+
+  /**
+   * 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,
+
+  /**
+   * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+   */
+  maxCount: PropTypes.number,
+
+  /**
+   * Optionally provide an `onChange` handler that is called whenever `<textarea>`
+   * is updated
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Optionally provide an `onClick` handler that is called whenever the
+   * `<textarea>` is clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Specify the placeholder attribute for the `<textarea>`
+   */
+  placeholder: PropTypes.string,
+
+  /**
+   * Specify the rows attribute for the `<textarea>`
+   */
+  rows: PropTypes.number,
+
+  /**
+   * Provide the current value of the `<textarea>`
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+TextArea.defaultProps = {
+  disabled: false,
+  onChange: function onChange() {},
+  onClick: function onClick() {},
+  placeholder: '',
+  rows: 4,
+  cols: 50,
+  invalid: false,
+  invalidText: '',
+  helperText: '',
+  light: false,
+  enableCounter: false,
+  maxCount: undefined
+};
+var TextArea$1 = TextArea;
+
+export { TextArea$1 as default };

package/es/components/TextInput/ControlledPasswordInput.js

@@ -0,0 +1,234 @@
+/**
+ * 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, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import { WarningFilled, ViewOff, View } from '@carbon/icons-react';
+import { textInputProps } from './util.js';
+import { warning } from '../../internal/warning.js';
+import { usePrefix } from '../../internal/usePrefix.js';
+
+var _excluded = ["labelText", "className", "id", "placeholder", "onChange", "onClick", "hideLabel", "invalid", "invalidText", "helperText", "light", "type", "togglePasswordVisibility", "tooltipPosition", "tooltipAlignment", "hidePasswordLabel", "showPasswordLabel", "size"];
+var didWarnAboutDeprecation = false;
+var ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function ControlledPasswordInput(_ref, ref) {
+  var _classNames, _classNames2, _classNames4;
+
+  var labelText = _ref.labelText,
+      className = _ref.className,
+      id = _ref.id,
+      placeholder = _ref.placeholder,
+      _onChange = _ref.onChange,
+      _onClick = _ref.onClick,
+      hideLabel = _ref.hideLabel,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      helperText = _ref.helperText,
+      light = _ref.light,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'password' : _ref$type,
+      togglePasswordVisibility = _ref.togglePasswordVisibility,
+      _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$hidePasswordLabe = _ref.hidePasswordLabel,
+      hidePasswordLabel = _ref$hidePasswordLabe === void 0 ? 'Hide password' : _ref$hidePasswordLabe,
+      _ref$showPasswordLabe = _ref.showPasswordLabel,
+      showPasswordLabel = _ref$showPasswordLabe === void 0 ? 'Show password' : _ref$showPasswordLabe,
+      size = _ref.size,
+      other = _objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix();
+
+  if (process.env.NODE_ENV !== "production") {
+    process.env.NODE_ENV !== "production" ? warning(didWarnAboutDeprecation, '`<TextInput.ControlledPasswordInput>` has been deprecated in favor of `<TextInput.PasswordInput />` and will be removed in the next major release of `carbon-components-react`') : void 0;
+    didWarnAboutDeprecation = true;
+  }
+
+  var errorId = id + '-error-msg';
+  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"), invalid), _defineProperty(_classNames, "".concat(prefix, "--text-input--").concat(size), size), _classNames));
+
+  var sharedTextInputProps = _objectSpread2({
+    id: id,
+    onChange: function onChange(evt) {
+      if (!other.disabled) {
+        _onChange(evt);
+      }
+    },
+    onClick: function onClick(evt) {
+      if (!other.disabled) {
+        _onClick(evt);
+      }
+    },
+    placeholder: placeholder,
+    type: type,
+    ref: ref,
+    className: textInputClasses
+  }, other);
+
+  var labelClasses = cx("".concat(prefix, "--label"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--visually-hidden"), hideLabel), _defineProperty(_classNames2, "".concat(prefix, "--label--disabled"), other.disabled), _classNames2));
+  var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), other.disabled));
+  var label = labelText ? /*#__PURE__*/React__default.createElement("label", {
+    htmlFor: id,
+    className: labelClasses
+  }, labelText) : null;
+  var error = invalid ? /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form-requirement"),
+    id: errorId
+  }, invalidText) : null;
+  var passwordIsVisible = type === '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"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefix, "--tooltip--").concat(tooltipPosition), tooltipPosition), _defineProperty(_classNames4, "".concat(prefix, "--tooltip--align-").concat(tooltipAlignment), tooltipAlignment), _classNames4));
+  var input = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", _extends({}, textInputProps({
+    invalid: invalid,
+    sharedTextInputProps: sharedTextInputProps,
+    invalidId: errorId
+  }), {
+    "data-toggle-password-visibility": type === 'password'
+  })), /*#__PURE__*/React__default.createElement("button", {
+    type: "button",
+    className: passwordVisibilityToggleClasses,
+    onClick: togglePasswordVisibility
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "".concat(prefix, "--assistive-text")
+  }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
+  var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+    className: helperTextClasses
+  }, helperText) : null;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--form-item ").concat(prefix, "--text-input-wrapper ").concat(prefix, "--password-input-wrapper")
+  }, label, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--text-input__field-wrapper"),
+    "data-invalid": invalid || null
+  }, invalid && /*#__PURE__*/React__default.createElement(WarningFilled, {
+    className: "".concat(prefix, "--text-input__invalid-icon")
+  }), input), error ? error : helper);
+});
+ControlledPasswordInput.displayName = 'ControlledPasswordInput';
+ControlledPasswordInput.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,
+
+  /**
+   * 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,
+
+  /**
+   * "Show password" tooltip text on password visibility toggle
+   */
+  showPasswordLabel: PropTypes.string,
+
+  /**
+   * Specify the size of the Text Input. Currently supports either `small` or `large` as an option. If omitted, defaults to standard size
+   */
+  size: 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']),
+
+  /**
+   * Provide the current value of the `<input>`
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+ControlledPasswordInput.defaultProps = {
+  className: '${prefix}--text__input',
+  disabled: false,
+  onChange: function onChange() {},
+  onClick: function onClick() {},
+  invalid: false,
+  invalidText: '',
+  helperText: '',
+  light: false,
+  size: ''
+};
+var ControlledPasswordInput$1 = ControlledPasswordInput;
+
+export { ControlledPasswordInput$1 as default };