@elliemae/ds-form 2.3.0-alpha.8 → 2.3.0-next.10

package/cjs/InputMask/props.js

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const inputProps = {
+  /** Should component focus automatically */
+  autoFocus: reactDesc.PropTypes.bool.description('Should component focus automatically'),
+
+  /**
+   * Set style for the input mask
+   */
+  style: reactDesc.PropTypes.object.description('Set style for the input mask'),
+
+  /**
+   * Whether the input mask is disabled or not
+   */
+  disabled: reactDesc.PropTypes.bool.description('Whether the input mask is disabled or not'),
+
+  /** disableTooltip */
+  disableTooltip: reactDesc.PropTypes.bool.description('Whether to show a tooltip or not when text does not fit').defaultValue(true),
+
+  /** css class */
+  className: reactDesc.PropTypes.string.description('css class'),
+
+  /** html name prop for form */
+  name: reactDesc.PropTypes.string.description('html name prop for form'),
+
+  /**
+   * Max length for the input mask
+   */
+  maxLength: reactDesc.PropTypes.number.description('Max length for the input mask'),
+
+  /**
+   * Min length for the input mask
+   */
+  minLength: reactDesc.PropTypes.number.description('Min length for the input mask'),
+
+  /**
+   * Whether to make the content of the input mask fit the container or not
+   */
+  fluidWidth: reactDesc.PropTypes.bool.description('Whether to make the content of the input mask fit the container or not'),
+
+  /** isShowElipsisActive */
+  isShowElipsisActive: reactDesc.PropTypes.bool.description('Wheter to enable the ellipsis and tooltip functionality or not').defaultValue(true),
+
+  /**
+   * Component that works as placeholder
+   */
+  placeholder: reactDesc.PropTypes.node.description('Component that works as placeholder'),
+
+  /**
+   * Allows a function that is triggered once a key is being pressed
+   */
+  onKeyDown: reactDesc.PropTypes.func.description('Allows a function that is triggered once a key is being pressed'),
+
+  /**
+   * Allows a function that is triggered once the input mask is clicked
+   */
+  onClick: reactDesc.PropTypes.func.description('Allows a function that is triggered once the input mask is clicked'),
+
+  /**
+   * Allows a function that is triggered once the input mask changes
+   */
+  onChange: reactDesc.PropTypes.func.description('Allows a function that is triggered once the input mask changes'),
+
+  /**
+   * Allows a function that is triggered once the input mask is focused
+   */
+  onFocus: reactDesc.PropTypes.func.description('Allows a function that is triggered once the input mask is focused'),
+
+  /**
+   * Allows a function that is triggered once the input mask loses focus
+   */
+  onBlur: reactDesc.PropTypes.func.description('Allows a function that is triggered once the input mask loses focus'),
+
+  /**
+   * Allows a function that is triggered once the input mask is pasted
+   */
+  onPaste: reactDesc.PropTypes.func.description('Allows a function that is triggered once the input mask is pasted'),
+
+  /**
+   * Allows a function that is triggered once in the input mask a keyboard key is released
+   */
+  onKeyUp: reactDesc.PropTypes.func.description('Allows a function that is triggered once in the input mask a keyboard key is released'),
+
+  /**
+   * Default value once the component is initialized
+   */
+  value: reactDesc.PropTypes.string.description('Default value once the component is initialized'),
+
+  /**
+   * Whether the input mask has error or not
+   */
+  hasError: reactDesc.PropTypes.bool.description('Whether the input mask has error or not'),
+
+  /**
+   * Whether the input mask is read only or not
+   */
+  readOnly: reactDesc.PropTypes.bool.description('Whether the input mask is read only or not'),
+  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.shape({
+    current: reactDesc.PropTypes.any
+  })]).description('Whether the input mask is read only or not'),
+
+  /**
+   * Type of input. Ex: 'text'
+   */
+  type: reactDesc.PropTypes.string.description("Type of input. Ex: 'text'"),
+
+  /**
+   * Whether the input mask is clearable or not
+   */
+  clearable: reactDesc.PropTypes.bool.description('Whether the input mask is clearable or not'),
+
+  /**
+   * Component to be added at the right side of the input
+   */
+  leftComponent: reactDesc.PropTypes.node.description('Component to be added at the right side of the input'),
+
+  /**
+   * Component to be added at the right side of the input
+   */
+  rightComponent: reactDesc.PropTypes.node.description('Component to be added at the right side of the input'),
+
+  /**
+   * Mask that has to match with the input information entered
+   * ['DATE', 'PHONE', 'PHONE_INTENATIONAL', 'SSN', 'US_ZIP_CODE', 'NUMBER', 'PERCENT']
+   */
+  mask: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.array, reactDesc.PropTypes.string, reactDesc.PropTypes.func]).description("Mask that has to match with the input information entered. ['DATE', 'PHONE', 'PHONE_INTENATIONAL', 'SSN', 'US_ZIP_CODE', 'NUMBER', 'PERCENT', 'ZIP_CODE_SEARCH']"),
+
+  /**
+    Expects pipe functions. i.e. autoCorrectedDatePipe
+    link a docu de text-mask
+   */
+  pipe: reactDesc.PropTypes.func.description('Expects pipe functions. i.e. autoCorrectedDatePipe'),
+
+  /**
+   * Put a sufix after the input mask
+   */
+  useSubfix: reactDesc.PropTypes.string.description('Put a sufix after the input mask'),
+
+  /**
+   * The placeholder character represents the fillable spot in the mask.
+   * The default placeholder character is underscore, _
+   */
+  placeholderChar: reactDesc.PropTypes.string.description("The placeholder character represents the fillable spot in the mask.\n The default placeholder character is underscore, _.").defaultValue('_')
+};
+
+exports.inputProps = inputProps;

package/cjs/InputMask/types/index.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/InputMask/utils/setCaretPosition.js

@@ -0,0 +1,17 @@
+'use strict';
+
+const setCaretPosition = (ctrl, pos) => {
+  // Modern browsers
+  if (ctrl !== null && ctrl !== void 0 && ctrl.setSelectionRange) {
+    ctrl === null || ctrl === void 0 ? void 0 : ctrl.focus();
+    ctrl === null || ctrl === void 0 ? void 0 : ctrl.setSelectionRange(pos, pos); // IE8 and below
+  } else if (ctrl !== null && ctrl !== void 0 && ctrl.createTextRange) {
+    const range = ctrl === null || ctrl === void 0 ? void 0 : ctrl.createTextRange();
+    range === null || range === void 0 ? void 0 : range.collapse(true);
+    range === null || range === void 0 ? void 0 : range.moveEnd('character', pos);
+    range === null || range === void 0 ? void 0 : range.moveStart('character', pos);
+    range === null || range === void 0 ? void 0 : range.select();
+  }
+};
+
+module.exports = setCaretPosition;

package/cjs/InputProtected/DSInputProtected.js

@@ -0,0 +1,104 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var reactDesc = require('react-desc');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var DSInputGroup = require('../InputGroup/DSInputGroup.js');
+var DSInputMask = require('../InputMask/DSInputMask.js');
+var props = require('./props.js');
+var defaultProps = require('./defaultProps.js');
+var options = require('./options.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+const _excluded = ["leftAddon", "rightAddon", "onChange", "value", "readOnly", "mask", "type", "placeholderChar"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const ADDON_ICON_OPTIONS = {
+  LockUnlocked: /*#__PURE__*/_jsx__default["default"](dsIcons.LockUnlocked, {}),
+  LockLocked: /*#__PURE__*/_jsx__default["default"](dsIcons.LockLocked, {}),
+  VisibleView: /*#__PURE__*/_jsx__default["default"](dsIcons.VisibleView, {}),
+  InvisibleHide: /*#__PURE__*/_jsx__default["default"](dsIcons.InvisibleHide, {})
+};
+
+const DSInputProtected = _ref => {
+  let {
+    leftAddon,
+    rightAddon,
+    onChange,
+    value,
+    readOnly,
+    mask,
+    type,
+    placeholderChar = undefined
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const left = leftAddon && ADDON_ICON_OPTIONS[leftAddon];
+  const right = rightAddon && ADDON_ICON_OPTIONS[rightAddon];
+  const [inputLocked, setLocked] = React.useState(leftAddon === options.LEFT_ADDON_OPTIONS.LockLocked);
+  const [inputHidden, setHidden] = React.useState(rightAddon === options.RIGHT_ADDON_OPTIONS.InvisibleHide);
+  React.useEffect(() => {
+    setLocked(leftAddon === options.LEFT_ADDON_OPTIONS.LockLocked);
+    setHidden(rightAddon === options.RIGHT_ADDON_OPTIONS.InvisibleHide);
+  }, [leftAddon, rightAddon]);
+  const handleLeft = React.useCallback(() => {
+    setLocked(!inputLocked);
+  }, [leftAddon, inputLocked]);
+  const handleRight = React.useCallback(() => {
+    setHidden(!inputHidden);
+  }, [rightAddon, inputHidden]);
+  return /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/_jsx__default["default"](DSInputGroup["default"], {
+    leftAddon: left ? /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      "aria-label": "".concat(inputLocked ? 'Allow' : 'Disallow', " Edition"),
+      buttonType: "secondary",
+      icon: ADDON_ICON_OPTIONS[inputLocked ? options.LEFT_ADDON_OPTIONS.LockUnlocked : options.LEFT_ADDON_OPTIONS.LockLocked],
+      onClick: handleLeft
+    }) : undefined,
+    readOnly: left ? inputLocked : readOnly,
+    rightAddon: right ? /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      "aria-label": "".concat(inputHidden ? 'Show' : 'Hide', " Characters"),
+      buttonType: "secondary",
+      icon: ADDON_ICON_OPTIONS[inputHidden ? options.RIGHT_ADDON_OPTIONS.VisibleView : options.RIGHT_ADDON_OPTIONS.InvisibleHide],
+      onClick: handleRight,
+      containerProps: {
+        'data-testid': 'inputprotected-show-hide-button'
+      }
+    }) : undefined
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(DSInputMask.DSInputMask, _objectSpread(_objectSpread({}, rest), {}, {
+    mask: mask,
+    placeholderChar: placeholderChar,
+    onChange: onChange,
+    readOnly: left ? inputLocked : readOnly,
+    type: right && inputHidden ? 'password' : type,
+    value: value
+  }))));
+};
+
+DSInputProtected.defaultProps = defaultProps.defaultProps;
+const DSInputProtectedWithSchema = reactDesc.describe(DSInputProtected);
+DSInputProtectedWithSchema.propTypes = props.inputProtectedProps;
+
+exports.DSInputProtected = DSInputProtected;
+exports.DSInputProtectedWithSchema = DSInputProtectedWithSchema;
+exports["default"] = DSInputProtected;

package/cjs/InputProtected/defaultProps.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var options = require('./options.js');
+
+const defaultProps = {
+  rightAddon: options.RIGHT_ADDON_OPTIONS.InvisibleHide,
+  mask: data => new Array(data.length).fill(/./)
+};
+
+exports.defaultProps = defaultProps;

package/cjs/InputProtected/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSInputProtected = require('./DSInputProtected.js');
+var options = require('./options.js');
+
+
+
+exports.DSInputProtected = DSInputProtected.DSInputProtected;
+exports.DSInputProtectedWithSchema = DSInputProtected.DSInputProtectedWithSchema;
+exports["default"] = DSInputProtected.DSInputProtected;
+exports.LEFT_ADDON_OPTIONS = options.LEFT_ADDON_OPTIONS;
+exports.RIGHT_ADDON_OPTIONS = options.RIGHT_ADDON_OPTIONS;

package/cjs/InputProtected/options.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const LEFT_ADDON_OPTIONS = {
+  LockUnlocked: 'LockUnlocked',
+  LockLocked: 'LockLocked'
+};
+const RIGHT_ADDON_OPTIONS = {
+  VisibleView: 'VisibleView',
+  InvisibleHide: 'InvisibleHide'
+};
+
+exports.LEFT_ADDON_OPTIONS = LEFT_ADDON_OPTIONS;
+exports.RIGHT_ADDON_OPTIONS = RIGHT_ADDON_OPTIONS;

package/cjs/InputProtected/props.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+var options = require('./options.js');
+
+const inputProtectedProps = {
+  leftAddon: reactDesc.PropTypes.oneOf([options.LEFT_ADDON_OPTIONS.LockLocked, options.LEFT_ADDON_OPTIONS.LockUnlocked]).description('left addon component to display'),
+  rightAddon: reactDesc.PropTypes.oneOf([options.RIGHT_ADDON_OPTIONS.VisibleView, options.RIGHT_ADDON_OPTIONS.InvisibleHide]).description('right addon component to display').defaultValue(options.RIGHT_ADDON_OPTIONS.InvisibleHide),
+  onChange: reactDesc.PropTypes.func.description('Function executed when input s value changes'),
+  value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('input s value'),
+  readOnly: reactDesc.PropTypes.bool.description('Whether the input is read-only or not').defaultValue(false),
+  mask: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string), reactDesc.PropTypes.func]).description('mask to apply'),
+  type: reactDesc.PropTypes.oneOf(['password', 'number', 'text']).description('type of input'),
+
+  /**
+   * PlaceholderChar: The placeholder character represents the fillable spot in the mask.
+   * The default placeholder character is underscore, _.
+   */
+  placeholderChar: reactDesc.PropTypes.string.description("The placeholder character represents the fillable spot in the mask.\n  * The default placeholder character is underscore, _.")
+};
+
+exports.inputProtectedProps = inputProtectedProps;

package/cjs/LargeInputText/DSLargeInputText.js

@@ -0,0 +1,136 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var reactDesc = require('react-desc');
+var dsClassnames = require('@elliemae/ds-classnames');
+var props = require('./props.js');
+var defaultProps = require('./defaultProps.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const CounterArea = dsClassnames.aggregatedClasses('div')('counter', 'textarea', _ref => {
+  let {
+    limitError
+  } = _ref;
+  return {
+    'limit-error': limitError
+  };
+});
+
+const DSLargeInputText = _ref2 => {
+  let {
+    containerProps,
+    autoFocus,
+    className,
+    disabled,
+    name,
+    id,
+    maxLength,
+    minLength,
+    placeholder,
+    onClick,
+    onChange,
+    onFocus,
+    onBlur,
+    onKeyUp,
+    onKeyDown,
+    onPaste,
+    value,
+    hasError,
+    required,
+    readOnly,
+    resize,
+    innerRef,
+    ariaLabel,
+    ariaAutocomplete,
+    role,
+    characterLimitCounter,
+    rows,
+    errorLimit,
+    tabIndex
+  } = _ref2;
+  const limitError = React.useMemo(() => characterLimitCounter < String(value).length && characterLimitCounter > 0, [characterLimitCounter, value]);
+  const {
+    cssClassName,
+    classNameElement,
+    classNameBlock
+  } = dsClassnames.convertPropToCssClassName('form-element-textarea', 'text', {
+    hasError: limitError || hasError,
+    readOnly,
+    disabled
+  }); // auto size when user types
+
+  const handleKeyUp = e => {
+    // const { target } = e
+    onKeyUp(e); // if (e.key !== 'Enter') return
+    // target.style.cssText = 'height:auto; padding:0'
+    // target.style.cssText = `height: ${target.scrollHeight}px`
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+      className: "".concat(cssClassName, " ").concat(className),
+      children: /*#__PURE__*/_jsx__default["default"]("div", {
+        className: classNameBlock('wrapper')
+      }, void 0, /*#__PURE__*/jsxRuntime.jsx("textarea", {
+        ref: innerRef,
+        "aria-autocomplete": ariaAutocomplete,
+        "aria-label": ariaLabel,
+        "aria-multiline": true,
+        "aria-placeholder": placeholder,
+        "aria-required": required,
+        autoFocus: autoFocus,
+        className: classNameElement('textarea'),
+        "data-testid": "ds-large-input_main-component",
+        disabled: disabled,
+        id: id,
+        maxLength: maxLength,
+        minLength: minLength,
+        name: name,
+        onBlur: onBlur,
+        onChange: onChange,
+        onClick: onClick,
+        onFocus: onFocus,
+        onKeyDown: onKeyDown,
+        onKeyUp: handleKeyUp,
+        onPaste: onPaste,
+        placeholder: placeholder,
+        role: role,
+        rows: String(rows),
+        style: {
+          resize
+        },
+        value: value,
+        tabIndex: tabIndex
+      }))
+    })), characterLimitCounter > 0 && /*#__PURE__*/_jsx__default["default"](CounterArea, {
+      classProps: {
+        limitError
+      },
+      "data-testid": "counter-area"
+    }, void 0, "".concat(limitError ? "".concat(errorLimit, " ").concat(characterLimitCounter, " characters.   ") : '').concat(String(value).length, " / ").concat(characterLimitCounter))]
+  });
+};
+
+DSLargeInputText.defaultProps = defaultProps.defaultProps;
+const DSLargeInputTextWithSchema = reactDesc.describe(DSLargeInputText).description('A large input');
+DSLargeInputTextWithSchema.propTypes = props.props;
+
+exports.DSLargeInputTextWithSchema = DSLargeInputTextWithSchema;
+exports["default"] = DSLargeInputText;

package/cjs/LargeInputText/defaultProps.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const defaultProps = {
+  containerProps: {},
+  autoFocus: false,
+  className: '',
+  disabled: false,
+  name: '',
+  id: null,
+  maxLength: null,
+  minLength: 0,
+  placeholder: '',
+  onClick: () => null,
+  onChange: () => null,
+  onFocus: () => null,
+  onBlur: () => null,
+  onKeyUp: () => null,
+  onKeyDown: () => null,
+  onPaste: () => null,
+  value: '',
+  hasError: false,
+  required: false,
+  readOnly: false,
+  resize: 'vertical',
+  innerRef: null,
+  ariaLabel: 'Enter text',
+  ariaAutocomplete: 'none',
+  role: 'textbox',
+  characterLimitCounter: 0,
+  rows: 3,
+  errorLimit: 'Please limit your entry to',
+  tabIndex: ''
+};
+
+exports.defaultProps = defaultProps;

package/cjs/LargeInputText/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSLargeInputText = require('./DSLargeInputText.js');
+
+
+
+exports.DSLargeInputTextWithSchema = DSLargeInputText.DSLargeInputTextWithSchema;
+exports["default"] = DSLargeInputText["default"];

package/cjs/LargeInputText/props.js

@@ -0,0 +1,128 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const props = {
+  /** Injected props to wrapper element of component */
+  containerProps: reactDesc.PropTypes.object.description('Injected props to wrapper element of component'),
+
+  /**
+   * Whether uses auto focus or not
+   */
+  autoFocus: reactDesc.PropTypes.bool.description('Whether uses auto focus or not'),
+
+  /** CSS class */
+  className: reactDesc.PropTypes.string.description('CSS class'),
+
+  /**
+   * Whether is disabled or not
+   */
+  disabled: reactDesc.PropTypes.bool.description('Whether is disabled or not'),
+
+  /** HTML form name property */
+  name: reactDesc.PropTypes.string.description('HTML form name property'),
+
+  /** HTML id */
+  id: reactDesc.PropTypes.number.description('HTML id'),
+
+  /**
+   * Max length for text to be entered
+   */
+  maxLength: reactDesc.PropTypes.number.description('Max length for text to be entered'),
+
+  /**
+   * Min length for text to be entered
+   */
+  minLength: reactDesc.PropTypes.number.description('Min length for text to be entered'),
+
+  /**
+   * Placeholder for the text
+   */
+  placeholder: reactDesc.PropTypes.string.description('Placeholder for the text'),
+
+  /**
+   * Allows a function that is triggered once the input text is clicked
+   */
+  onClick: reactDesc.PropTypes.func.description('Allows a function that is triggered once the input text is clicked'),
+
+  /**
+   * Allows a function that is triggered once the input text changes
+   */
+  onChange: reactDesc.PropTypes.func.description('Allows a function that is triggered once the input text changes'),
+
+  /**
+   * Allows a function that is triggered once the input text is focused
+   */
+  onFocus: reactDesc.PropTypes.func.description('Allows a function that is triggered once the input text is focused'),
+
+  /**
+   * Allows a function that is triggered once the input text loses focus
+   */
+  onBlur: reactDesc.PropTypes.func.description('Allows a function that is triggered once the input text loses focus'),
+
+  /**
+   * Allows a function that is triggered once in the input a keyboard key is released
+   */
+  onKeyUp: reactDesc.PropTypes.func.description('Allows a function that is triggered once in the input a keyboard key is released'),
+
+  /**
+   * Allows a function that is triggered once a key is being pressed
+   */
+  onKeyDown: reactDesc.PropTypes.func.description('Allows a function that is triggered once a key is being pressed'),
+
+  /**
+   * Allows a function that is triggered once the input text is pasted
+   */
+  onPaste: reactDesc.PropTypes.func.description('Allows a function that is triggered once the input text is pasted'),
+
+  /**
+   * Default value once the component is initialized
+   */
+  value: reactDesc.PropTypes.string.description('Default value once the component is initialized'),
+
+  /**
+   * Whether the input text has error or not
+   */
+  hasError: reactDesc.PropTypes.bool.description('Whether the input text has error or not'),
+
+  /**
+   * Whether the input text is required or not
+   */
+  required: reactDesc.PropTypes.bool.description('Whether the input text is required or not'),
+
+  /**
+   * Whether the input text is read only or not
+   */
+  readOnly: reactDesc.PropTypes.bool.description('Whether the input text is read only or not'),
+
+  /**
+   * Whether the input text style is vertical or not
+   */
+  resize: reactDesc.PropTypes.string.description('Whether the input text style is vertical or not'),
+
+  /** ref forwarded to component */
+  innerRef: reactDesc.PropTypes.func.description('ref forwarded to component'),
+
+  /** a11y aria label */
+  ariaLabel: reactDesc.PropTypes.string.description('a11y aria label'),
+  ariaAutocomplete: reactDesc.PropTypes.string.description(''),
+
+  /**
+   * Type of input. Ex: textbox
+   */
+  role: reactDesc.PropTypes.string.description('Type of input. Ex: textbox'),
+
+  /**
+   * it will show a counter/limit if the value is greater than 0
+   */
+  characterLimitCounter: reactDesc.PropTypes.number.description('it will show a counter/limit if the value is greater than 0'),
+
+  /**
+   * Tab index html property.
+   */
+  tabIndex: reactDesc.PropTypes.string.description('Tab index html property.')
+};
+
+exports.props = props;