@elliemae/ds-form 2.2.0-alpha.1 → 2.2.0-alpha.2

package/cjs/Input/InputImpl.js

@@ -1,126 +1,95 @@
-'use strict';
-
-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/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 PropTypes = require('prop-types');
-var lodash = require('lodash');
-var dsClassnames = require('@elliemae/ds-classnames');
-var dsIcons = require('@elliemae/ds-icons');
-var DSButton = require('@elliemae/ds-button');
-var DSTooltip = require('@elliemae/ds-tooltip');
-var InputAddonWrapper = require('./InputAddonWrapper.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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-var DSTooltip__default = /*#__PURE__*/_interopDefaultLegacy(DSTooltip);
-
-const _excluded = ["role", "id", "isShowElipsisActive", "autoFocus", "className", "name", "innerRef", "maxLength", "minLength", "placeholder", "leftComponent", "rightComponent", "disableTooltip", "readOnly", "disabled", "value", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "onPaste", "required", "type", "customInputType", "min", "max", "clearable", "onMouseLeave", "onMouseOut", "style", "containerProps", "tabIndex", "hasError"];
-
-var _CloseCircle;
-
-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 blockName = 'input';
-const Input = dsClassnames.aggregatedClasses('input')(blockName, null, _ref2 => {
-  let {
-    clearable,
-    value
-  } = _ref2;
-  return {
-    clearable,
-    value
-  };
-});
-const WrapperForTooltipInput = dsClassnames.aggregatedClasses('div')(blockName, 'tooltip-ref');
-const InputCustomWrapper = dsClassnames.aggregatedClasses('div')(blockName, null, _ref3 => {
-  let {
-    clearable,
-    value
-  } = _ref3;
-  return {
-    clearable,
-    value
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
   };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var InputImpl_exports = {};
+__export(InputImpl_exports, {
+  InputImpl: () => InputImpl,
+  default: () => InputImpl_default
 });
-const ClearableButton = dsClassnames.aggregatedClasses(DSButton__default["default"])(blockName, 'clearable');
-
-const getValidComponents = component => component;
-
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_prop_types = __toESM(require("prop-types"));
+var import_lodash = __toESM(require("lodash"));
+var import_ds_classnames = __toESM(require("@elliemae/ds-classnames"));
+var import_ds_icons = __toESM(require("@elliemae/ds-icons"));
+var import_ds_button = __toESM(require("@elliemae/ds-button"));
+var import_ds_tooltip = __toESM(require("@elliemae/ds-tooltip"));
+var import_InputAddonWrapper = __toESM(require("./InputAddonWrapper"));
+const blockName = "input";
+const Input = (0, import_ds_classnames.aggregatedClasses)("input")(blockName, null, ({ clearable, value }) => ({
+  clearable,
+  value
+}));
+const WrapperForTooltipInput = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "tooltip-ref");
+const InputCustomWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, null, ({ clearable, value }) => ({
+  clearable,
+  value
+}));
+const ClearableButton = (0, import_ds_classnames.aggregatedClasses)(import_ds_button.DSButton)(blockName, "clearable");
+const getValidComponents = (component) => component;
 const noop = () => null;
-
-class InputImpl extends React.Component {
+class InputImpl extends import_react.Component {
   constructor(props) {
     super(props);
-    this.ref = void 0;
-    this.refTooltip = void 0;
-
-    this.handleOnChange = e => {
-      const {
-        onChange,
-        max
-      } = this.props;
-      const {
-        value
-      } = e.target;
-      if (max && value > max) return;
-      if (onChange) onChange(e);
-
+    this.handleOnChange = (e) => {
+      const { onChange, max } = this.props;
+      const { value } = e.target;
+      if (max && value > max)
+        return;
+      if (onChange)
+        onChange(e);
       if (this.ref.current) {
         this.setState({
           isEllipsisOn: this.ref.current.offsetWidth < this.ref.current.scrollWidth
         });
       }
     };
-
-    this.handleBlur = e => {
-      const {
-        onBlur,
-        onChange,
-        min
-      } = this.props;
-      const {
-        value
-      } = e.target;
-
-      if (min && value < min && value !== '') {
+    this.handleBlur = (e) => {
+      const { onBlur, onChange, min } = this.props;
+      const { value } = e.target;
+      if (min && value < min && value !== "") {
         onChange({
           target: {
             value: min.toString()
           }
         });
       }
-
       onBlur(e);
       this.setState({
         active: false
       });
     };
-
-    this.handleFocus = e => {
-      const {
-        onFocus
-      } = this.props;
+    this.handleFocus = (e) => {
+      const { onFocus } = this.props;
       onFocus(e);
       this.setState({
         active: true
       });
     };
-
     this.handleMouseEnter = () => {
       if (!this.state.showTooltip) {
         this.setState({
@@ -128,7 +97,6 @@ class InputImpl extends React.Component {
         });
       }
     };
-
     this.handleMouseLeave = () => {
       if (this.state.showTooltip) {
         this.setState({
@@ -136,76 +104,56 @@ class InputImpl extends React.Component {
         });
       }
     };
-
     this.setWidth = () => {
       const client = this.refTooltip.current.getBoundingClientRect();
       this.setState({
         width: client.width
       });
     };
-
     this.state = {
       width: -1,
       isEllipsisOn: false,
       active: false,
       showTooltip: false
     };
-    this.ref = /*#__PURE__*/React__default["default"].createRef();
-    this.refTooltip = /*#__PURE__*/React__default["default"].createRef();
+    this.ref = import_react.default.createRef();
+    this.refTooltip = import_react.default.createRef();
     this.handleClear = this.handleClear.bind(this);
   }
-
   componentDidMount() {
     this.setWidth();
-    window.addEventListener('resize', this.setWidth);
+    window.addEventListener("resize", this.setWidth);
     this.setState({
       isEllipsisOn: this.ref.current ? this.ref.current.offsetWidth < this.ref.current.scrollWidth : false
     });
   }
-
   componentWillUnmount() {
-    window.removeEventListener('resize', this.setWidth);
+    window.removeEventListener("resize", this.setWidth);
   }
-
   handleClear() {
-    const {
-      onClear,
-      onChange,
-      clearable
-    } = this.props;
-
+    const { onClear, onChange, clearable } = this.props;
     if (clearable && onClear) {
       onClear();
     } else {
-      onChange({
-        target: {
-          value: ''
-        }
-      });
+      onChange({ target: { value: "" } });
     }
-
-    if ((this.ref || {}).current) this.ref.current.focus();
+    if ((this.ref || {}).current)
+      this.ref.current.focus();
   }
-
   renderClearableComponent() {
-    const {
-      clearable,
-      value,
-      disabled
-    } = this.props;
-    if (disabled) return null;
-    return clearable && value ? /*#__PURE__*/_jsx__default["default"](ClearableButton, {
+    const { clearable, value, disabled } = this.props;
+    if (disabled)
+      return null;
+    return clearable && value ? /* @__PURE__ */ import_react.default.createElement(ClearableButton, {
       buttonType: "text",
       "data-testid": "ds-input_clearable-btn",
-      disabled: disabled,
-      icon: _CloseCircle || (_CloseCircle = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseCircle, {})),
+      disabled,
+      icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.CloseCircle, null),
       onClick: this.handleClear
     }) : null;
   }
-
   render() {
-    const _this$props = this.props,
-          {
+    const {
       role,
       id,
       isShowElipsisActive,
@@ -240,37 +188,30 @@ class InputImpl extends React.Component {
       style,
       containerProps,
       tabIndex,
-      hasError
-    } = _this$props,
-          rest = _objectWithoutProperties__default["default"](_this$props, _excluded);
-
-    const {
-      width,
-      active,
-      showTooltip,
-      isEllipsisOn
-    } = this.state;
+      hasError,
+      ...rest
+    } = this.props;
+    const { width, active, showTooltip, isEllipsisOn } = this.state;
     const rightComponents = [this.renderClearableComponent(), rightComponent].filter(getValidComponents);
     const leftComponents = [leftComponent].filter(getValidComponents);
-
-    const inputProps = _objectSpread({
-      'aria-label': rest['aria-label'],
-      'aria-invalid': rest['aria-invalid'],
-      'aria-placeholder': placeholder,
-      'aria-required': required,
-      'aria-multiline': false,
-      'aria-autocomplete': 'none',
-      'data-testid': rest['data-testid'],
-      'aria-describedby': rest['aria-describedby'],
+    const inputProps = {
+      "aria-label": rest["aria-label"],
+      "aria-invalid": rest["aria-invalid"],
+      "aria-placeholder": placeholder,
+      "aria-required": required,
+      "aria-multiline": false,
+      "aria-autocomplete": "none",
+      "data-testid": rest["data-testid"],
+      "aria-describedby": rest["aria-describedby"],
       role,
       id,
-      innerRef: _ref => {
-        this.ref = {
-          current: _ref
-        };
-
+      innerRef: (_ref) => {
+        this.ref = { current: _ref };
         if (innerRef) {
-          if (typeof innerRef === 'function') innerRef(_ref);else innerRef.current = _ref;
+          if (typeof innerRef === "function")
+            innerRef(_ref);
+          else
+            innerRef.current = _ref;
         }
       },
       className,
@@ -296,123 +237,97 @@ class InputImpl extends React.Component {
       min,
       max,
       style,
-      tabIndex
-    }, containerProps);
-
-    let InputComponent = /*#__PURE__*/jsxRuntime.jsx(WrapperForTooltipInput, {
+      tabIndex,
+      ...containerProps
+    };
+    let InputComponent = /* @__PURE__ */ import_react.default.createElement(WrapperForTooltipInput, {
       ref: this.refTooltip,
-      style: {
-        width: '100%'
-      },
-      children: !customInputType ? /*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread(_objectSpread({}, lodash.omit(inputProps, ['disableTooltip'])), {}, {
-        autoComplete: "off",
-        clearable: "".concat(clearable),
-        onChange: this.handleOnChange,
-        onBlur: this.handleBlur,
-        onFocus: this.handleFocus // using mouseOver instead of mouseEnter (doesn't trigger on disabled inputs)
-        // https://github.com/facebook/react/issues/4251
-        ,
-        onMouseOver: this.handleMouseEnter // using mouseOut instead of mouseLeave (doesn't trigger on disabled inputs)
-        // https://github.com/facebook/react/issues/4251
-        ,
-        onMouseOut: this.handleMouseLeave,
-        value: value
-      })) : /*#__PURE__*/jsxRuntime.jsx(InputCustomWrapper, _objectSpread(_objectSpread({
-        className: className
-      }, containerProps), {}, {
-        clearable: clearable,
-        value: value,
-        children: customInputType(_objectSpread({}, inputProps))
-      }))
-    });
-
+      style: { width: "100%" }
+    }, !customInputType ? /* @__PURE__ */ import_react.default.createElement(Input, {
+      ...(0, import_lodash.omit)(inputProps, ["disableTooltip"]),
+      autoComplete: "off",
+      clearable: `${clearable}`,
+      onChange: this.handleOnChange,
+      onBlur: this.handleBlur,
+      onFocus: this.handleFocus,
+      onMouseOver: this.handleMouseEnter,
+      onMouseOut: this.handleMouseLeave,
+      value
+    }) : /* @__PURE__ */ import_react.default.createElement(InputCustomWrapper, {
+      className,
+      ...containerProps,
+      clearable,
+      value
+    }, customInputType({
+      ...inputProps
+    })));
     if (isShowElipsisActive) {
-      InputComponent = /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
+      InputComponent = /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.DSTooltip, {
         isOpen: !disableTooltip && isEllipsisOn && !active && showTooltip && width,
         title: String(value),
         zIndex: 11,
-        triggerComponent: /*#__PURE__*/_jsx__default["default"](WrapperForTooltipInput, {
-          style: {
-            width: '100%'
-          }
-        }, void 0, InputComponent)
+        triggerComponent: /* @__PURE__ */ import_react.default.createElement(WrapperForTooltipInput, {
+          style: { width: "100%" }
+        }, InputComponent)
       });
     }
-
-    const renderInput = rightComponents.length || leftComponents.length || clearable ? /*#__PURE__*/jsxRuntime.jsx(InputAddonWrapper, _objectSpread(_objectSpread({
-      className: className,
-      leftComponents: leftComponents,
-      rightComponents: rightComponents,
-      hasError: hasError
-    }, containerProps), {}, {
-      children: InputComponent
-    })) : InputComponent;
+    const renderInput = rightComponents.length || leftComponents.length || clearable ? /* @__PURE__ */ import_react.default.createElement(import_InputAddonWrapper.InputAddonWrapper, {
+      className,
+      leftComponents,
+      rightComponents,
+      hasError,
+      ...containerProps
+    }, InputComponent) : InputComponent;
     return renderInput;
   }
-
 }
-
 InputImpl.defaultProps = {
   onBlur: noop,
   onFocus: noop
 };
-({
-  className: PropTypes__default["default"].string,
-  customInputType: PropTypes__default["default"].func,
-  id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  isShowElipsisActive: PropTypes__default["default"].bool,
-  max: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  min: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  name: PropTypes__default["default"].string,
-  onBlur: PropTypes__default["default"].func,
-  onChange: PropTypes__default["default"].func,
-  onClick: PropTypes__default["default"].func,
-  onFocus: PropTypes__default["default"].func,
-  onKeyDown: PropTypes__default["default"].func,
-  onKeyUp: PropTypes__default["default"].func,
-  onMouseLeave: PropTypes__default["default"].func,
-  onMouseOut: PropTypes__default["default"].func,
-  onPaste: PropTypes__default["default"].func,
-  onClear: PropTypes__default["default"].func,
-  placeholder: PropTypes__default["default"].string,
-  required: PropTypes__default["default"].bool,
-  role: PropTypes__default["default"].string,
-  innerRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].any
-  })]),
-  maxLength: PropTypes__default["default"].number,
-  minLength: PropTypes__default["default"].number,
-  leftComponent: PropTypes__default["default"].element,
-  rightComponent: PropTypes__default["default"].element,
-  hasError: PropTypes__default["default"].bool,
-  disableTooltip: PropTypes__default["default"].bool,
-  readOnly: PropTypes__default["default"].bool,
-  disabled: PropTypes__default["default"].bool,
-  autoFocus: PropTypes__default["default"].bool,
-  type: PropTypes__default["default"].string,
-  clearable: PropTypes__default["default"].bool,
-  containerProps: PropTypes__default["default"].object,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes__default["default"].object,
-  tabIndex: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-
-  // eslint-disable-next-line jsdoc/require-returns
-
-  /**
-   * Should be of type string if using ellipsis tooltip [isShowElipsisActive] prop
-   *
-   * @param props
-   * @param propName
-   * @param componentName
-   */
-  // eslint-disable-next-line consistent-return
+const propTypes = {
+  className: import_prop_types.default.string,
+  customInputType: import_prop_types.default.func,
+  id: import_prop_types.default.oneOfType([import_prop_types.default.string, import_prop_types.default.number]),
+  isShowElipsisActive: import_prop_types.default.bool,
+  max: import_prop_types.default.oneOfType([import_prop_types.default.string, import_prop_types.default.number]),
+  min: import_prop_types.default.oneOfType([import_prop_types.default.string, import_prop_types.default.number]),
+  name: import_prop_types.default.string,
+  onBlur: import_prop_types.default.func,
+  onChange: import_prop_types.default.func,
+  onClick: import_prop_types.default.func,
+  onFocus: import_prop_types.default.func,
+  onKeyDown: import_prop_types.default.func,
+  onKeyUp: import_prop_types.default.func,
+  onMouseLeave: import_prop_types.default.func,
+  onMouseOut: import_prop_types.default.func,
+  onPaste: import_prop_types.default.func,
+  onClear: import_prop_types.default.func,
+  placeholder: import_prop_types.default.string,
+  required: import_prop_types.default.bool,
+  role: import_prop_types.default.string,
+  innerRef: import_prop_types.default.oneOfType([import_prop_types.default.func, import_prop_types.default.shape({ current: import_prop_types.default.any })]),
+  maxLength: import_prop_types.default.number,
+  minLength: import_prop_types.default.number,
+  leftComponent: import_prop_types.default.element,
+  rightComponent: import_prop_types.default.element,
+  hasError: import_prop_types.default.bool,
+  disableTooltip: import_prop_types.default.bool,
+  readOnly: import_prop_types.default.bool,
+  disabled: import_prop_types.default.bool,
+  autoFocus: import_prop_types.default.bool,
+  type: import_prop_types.default.string,
+  clearable: import_prop_types.default.bool,
+  containerProps: import_prop_types.default.object,
+  style: import_prop_types.default.object,
+  tabIndex: import_prop_types.default.oneOfType([import_prop_types.default.string, import_prop_types.default.number]),
   value(props, propName, componentName) {
-    // eslint-disable-line consistent-return
-    if (!!props.isShowElipsisActive && typeof props[propName] !== 'string') {
-      return new Error("Invalid prop `".concat(propName, "` of type `").concat(typeof props[propName], "` supplied to") + " `".concat(componentName, "`. Prop `value` should be of type `string` if prop `isShowElipsisActive` is set to `true`.") + ' Either set `isShowElipsisActive` to `false`, or properly format your `value` prop to `string`.');
+    if (!!props.isShowElipsisActive && typeof props[propName] !== "string") {
+      return new Error(`Invalid prop \`${propName}\` of type \`${typeof props[propName]}\` supplied to \`${componentName}\`. Prop \`value\` should be of type \`string\` if prop \`isShowElipsisActive\` is set to \`true\`. Either set \`isShowElipsisActive\` to \`false\`, or properly format your \`value\` prop to \`string\`.`);
     }
   }
-
-});
-
-module.exports = InputImpl;
+};
+InputImpl.propTypes = propTypes;
+var InputImpl_default = InputImpl;
+module.exports = __toCommonJS(InputImpl_exports);
+//# sourceMappingURL=InputImpl.js.map

package/cjs/Input/InputImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/Input/InputImpl.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { omit } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { CloseCircle } from '@elliemae/ds-icons';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSTooltip } from '@elliemae/ds-tooltip';\nimport { InputAddonWrapper } from './InputAddonWrapper';\n\nconst blockName = 'input';\nconst Input = aggregatedClasses('input')(blockName, null, ({ clearable, value }) => ({\n  clearable,\n  value,\n}));\nconst WrapperForTooltipInput = aggregatedClasses('div')(blockName, 'tooltip-ref');\nconst InputCustomWrapper = aggregatedClasses('div')(blockName, null, ({ clearable, value }) => ({\n  clearable,\n  value,\n}));\nconst ClearableButton = aggregatedClasses(DSButton)(blockName, 'clearable');\n\nconst getValidComponents = (component) => component;\n\nconst noop = () => null;\ninterface InputImplStateT {\n  width: number;\n  active: boolean;\n  showTooltip: boolean;\n  isEllipsisOn: boolean;\n}\nclass InputImpl extends Component<InputImplPropsT, InputImplStateT> {\n  ref: React.RefObject<HTMLElement>;\n\n  refTooltip: React.RefObject<HTMLElement>;\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      width: -1,\n      isEllipsisOn: false,\n      active: false,\n      showTooltip: false,\n    };\n    this.ref = React.createRef();\n    this.refTooltip = React.createRef();\n    this.handleClear = this.handleClear.bind(this);\n  }\n\n  componentDidMount() {\n    this.setWidth();\n    window.addEventListener('resize', this.setWidth);\n    this.setState({\n      isEllipsisOn: this.ref.current ? this.ref.current.offsetWidth < this.ref.current.scrollWidth : false,\n    });\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener('resize', this.setWidth);\n  }\n\n  handleOnChange = (e) => {\n    const { onChange, max } = this.props;\n    const { value } = e.target;\n    if (max && value > max) return;\n    if (onChange) onChange(e);\n    if (this.ref.current) {\n      this.setState({\n        isEllipsisOn: this.ref.current.offsetWidth < this.ref.current.scrollWidth,\n      });\n    }\n  };\n\n  handleBlur = (e) => {\n    const { onBlur, onChange, min } = this.props;\n    const { value } = e.target;\n    if (min && value < min && value !== '') {\n      onChange({\n        target: {\n          value: min.toString(),\n        },\n      });\n    }\n    onBlur(e);\n    this.setState({\n      active: false,\n    });\n  };\n\n  handleFocus = (e) => {\n    const { onFocus } = this.props;\n    onFocus(e);\n    this.setState({\n      active: true,\n    });\n  };\n\n  handleMouseEnter = () => {\n    if (!this.state.showTooltip) {\n      this.setState({\n        showTooltip: true,\n      });\n    }\n  };\n\n  handleMouseLeave = () => {\n    if (this.state.showTooltip) {\n      this.setState({\n        showTooltip: false,\n      });\n    }\n  };\n\n  setWidth = () => {\n    const client = this.refTooltip.current.getBoundingClientRect();\n    this.setState({\n      width: client.width,\n    });\n  };\n\n  handleClear() {\n    const { onClear, onChange, clearable } = this.props;\n    if (clearable && onClear) {\n      onClear();\n    } else {\n      onChange({ target: { value: '' } });\n    }\n\n    if ((this.ref || {}).current) this.ref.current.focus();\n  }\n\n  renderClearableComponent() {\n    const { clearable, value, disabled } = this.props;\n    if (disabled) return null;\n    return clearable && value ? (\n      <ClearableButton\n        buttonType=\"text\"\n        data-testid=\"ds-input_clearable-btn\"\n        disabled={disabled}\n        icon={<CloseCircle />}\n        onClick={this.handleClear}\n      />\n    ) : null;\n  }\n\n  render() {\n    const {\n      role,\n      id,\n      isShowElipsisActive,\n      autoFocus,\n      className,\n      name,\n      innerRef,\n      maxLength,\n      minLength,\n      placeholder,\n      leftComponent,\n      rightComponent,\n      disableTooltip,\n      readOnly,\n      disabled,\n      value,\n      onClick,\n      onChange,\n      onKeyDown,\n      onKeyUp,\n      onFocus,\n      onBlur,\n      onPaste,\n      required,\n      type,\n      customInputType,\n      min,\n      max,\n      clearable,\n      onMouseLeave,\n      onMouseOut,\n      style,\n      containerProps,\n      tabIndex,\n      hasError,\n      ...rest\n    } = this.props;\n    const { width, active, showTooltip, isEllipsisOn } = this.state;\n    const rightComponents = [this.renderClearableComponent(), rightComponent].filter(getValidComponents);\n    const leftComponents = [leftComponent].filter(getValidComponents);\n\n    const inputProps = {\n      'aria-label': rest['aria-label'],\n      'aria-invalid': rest['aria-invalid'],\n      'aria-placeholder': placeholder,\n      'aria-required': required,\n      'aria-multiline': false,\n      'aria-autocomplete': 'none',\n      'data-testid': rest['data-testid'],\n      'aria-describedby': rest['aria-describedby'],\n      role,\n      id,\n      innerRef: (_ref) => {\n        this.ref = { current: _ref };\n        if (innerRef) {\n          if (typeof innerRef === 'function') innerRef(_ref);\n          else innerRef.current = _ref;\n        }\n      },\n      className,\n      autoFocus,\n      disabled: disabled || readOnly,\n      maxLength,\n      minLength,\n      name,\n      onBlur,\n      onChange,\n      onClick,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n      onPaste,\n      onMouseLeave,\n      disableTooltip,\n      onMouseOut,\n      placeholder,\n      required,\n      type,\n      value,\n      min,\n      max,\n      style,\n      tabIndex,\n      ...containerProps,\n    };\n\n    let InputComponent = (\n      <WrapperForTooltipInput ref={this.refTooltip} style={{ width: '100%' }}>\n        {!customInputType ? (\n          <Input\n            {...omit(inputProps, ['disableTooltip'])}\n            autoComplete=\"off\"\n            clearable={`${clearable}`}\n            onChange={this.handleOnChange}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            // using mouseOver instead of mouseEnter (doesn't trigger on disabled inputs)\n            // https://github.com/facebook/react/issues/4251\n            onMouseOver={this.handleMouseEnter}\n            // using mouseOut instead of mouseLeave (doesn't trigger on disabled inputs)\n            // https://github.com/facebook/react/issues/4251\n            onMouseOut={this.handleMouseLeave}\n            value={value}\n          />\n        ) : (\n          <InputCustomWrapper className={className} {...containerProps} clearable={clearable} value={value}>\n            {customInputType({\n              ...inputProps,\n            })}\n          </InputCustomWrapper>\n        )}\n      </WrapperForTooltipInput>\n    );\n    if (isShowElipsisActive) {\n      InputComponent = (\n        <DSTooltip\n          isOpen={!disableTooltip && isEllipsisOn && !active && showTooltip && width}\n          title={String(value)}\n          zIndex={11}\n          triggerComponent={<WrapperForTooltipInput style={{ width: '100%' }}>{InputComponent}</WrapperForTooltipInput>}\n        />\n      );\n    }\n\n    const renderInput =\n      rightComponents.length || leftComponents.length || clearable ? (\n        <InputAddonWrapper\n          className={className}\n          leftComponents={leftComponents}\n          rightComponents={rightComponents}\n          hasError={hasError}\n          {...containerProps}\n        >\n          {InputComponent}\n        </InputAddonWrapper>\n      ) : (\n        InputComponent\n      );\n\n    return renderInput;\n  }\n}\n\nInputImpl.defaultProps = {\n  onBlur: noop,\n  onFocus: noop,\n};\nconst propTypes = {\n  className: PropTypes.string,\n  customInputType: PropTypes.func,\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  isShowElipsisActive: PropTypes.bool,\n  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  name: PropTypes.string,\n  onBlur: PropTypes.func,\n  onChange: PropTypes.func,\n  onClick: PropTypes.func,\n  onFocus: PropTypes.func,\n  onKeyDown: PropTypes.func,\n  onKeyUp: PropTypes.func,\n  onMouseLeave: PropTypes.func,\n  onMouseOut: PropTypes.func,\n  onPaste: PropTypes.func,\n  onClear: PropTypes.func,\n  placeholder: PropTypes.string,\n  required: PropTypes.bool,\n  role: PropTypes.string,\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),\n  maxLength: PropTypes.number,\n  minLength: PropTypes.number,\n  leftComponent: PropTypes.element,\n  rightComponent: PropTypes.element,\n  hasError: PropTypes.bool,\n  disableTooltip: PropTypes.bool,\n  readOnly: PropTypes.bool,\n  disabled: PropTypes.bool,\n  autoFocus: PropTypes.bool,\n  type: PropTypes.string,\n  clearable: PropTypes.bool,\n  containerProps: PropTypes.object,\n  // eslint-disable-next-line react/forbid-prop-types\n  style: PropTypes.object,\n  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  // eslint-disable-next-line jsdoc/require-returns\n  /**\n   * Should be of type string if using ellipsis tooltip [isShowElipsisActive] prop\n   *\n   * @param props\n   * @param propName\n   * @param componentName\n   */\n  // eslint-disable-next-line consistent-return\n  value(props, propName, componentName) {\n    // eslint-disable-line consistent-return\n    if (!!props.isShowElipsisActive && typeof props[propName] !== 'string') {\n      return new Error(\n        `Invalid prop \\`${propName}\\` of type \\`${typeof props[propName]}\\` supplied to` +\n          ` \\`${componentName}\\`. Prop \\`value\\` should be of type \\`string\\` if prop \\`isShowElipsisActive\\` is set to \\`true\\`.` +\n          ' Either set `isShowElipsisActive` to `false`, or properly format your `value` prop to `string`.',\n      );\n    }\n  },\n};\n\ntype InputImplPropsT = PropTypes.InferProps<typeof propTypes>;\nInputImpl.propTypes = propTypes;\n\nexport { InputImpl };\nexport default InputImpl;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAiC;AACjC,wBAAsB;AACtB,oBAAqB;AACrB,2BAAkC;AAClC,sBAA4B;AAC5B,uBAAyB;AACzB,wBAA0B;AAC1B,+BAAkC;AAElC,MAAM,YAAY;AAClB,MAAM,QAAQ,4CAAkB,SAAS,WAAW,MAAM,CAAC,EAAE,WAAW,YAAa;AAAA,EACnF;AAAA,EACA;AAAA;AAEF,MAAM,yBAAyB,4CAAkB,OAAO,WAAW;AACnE,MAAM,qBAAqB,4CAAkB,OAAO,WAAW,MAAM,CAAC,EAAE,WAAW,YAAa;AAAA,EAC9F;AAAA,EACA;AAAA;AAEF,MAAM,kBAAkB,4CAAkB,2BAAU,WAAW;AAE/D,MAAM,qBAAqB,CAAC,cAAc;AAE1C,MAAM,OAAO,MAAM;AAOnB,wBAAwB,uBAA4C;AAAA,EAKlE,YAAY,OAAO;AACjB,UAAM;AAwBR,0BAAiB,CAAC,MAAM;AACtB,YAAM,EAAE,UAAU,QAAQ,KAAK;AAC/B,YAAM,EAAE,UAAU,EAAE;AACpB,UAAI,OAAO,QAAQ;AAAK;AACxB,UAAI;AAAU,iBAAS;AACvB,UAAI,KAAK,IAAI,SAAS;AACpB,aAAK,SAAS;AAAA,UACZ,cAAc,KAAK,IAAI,QAAQ,cAAc,KAAK,IAAI,QAAQ;AAAA;AAAA;AAAA;AAKpE,sBAAa,CAAC,MAAM;AAClB,YAAM,EAAE,QAAQ,UAAU,QAAQ,KAAK;AACvC,YAAM,EAAE,UAAU,EAAE;AACpB,UAAI,OAAO,QAAQ,OAAO,UAAU,IAAI;AACtC,iBAAS;AAAA,UACP,QAAQ;AAAA,YACN,OAAO,IAAI;AAAA;AAAA;AAAA;AAIjB,aAAO;AACP,WAAK,SAAS;AAAA,QACZ,QAAQ;AAAA;AAAA;AAIZ,uBAAc,CAAC,MAAM;AACnB,YAAM,EAAE,YAAY,KAAK;AACzB,cAAQ;AACR,WAAK,SAAS;AAAA,QACZ,QAAQ;AAAA;AAAA;AAIZ,4BAAmB,MAAM;AACvB,UAAI,CAAC,KAAK,MAAM,aAAa;AAC3B,aAAK,SAAS;AAAA,UACZ,aAAa;AAAA;AAAA;AAAA;AAKnB,4BAAmB,MAAM;AACvB,UAAI,KAAK,MAAM,aAAa;AAC1B,aAAK,SAAS;AAAA,UACZ,aAAa;AAAA;AAAA;AAAA;AAKnB,oBAAW,MAAM;AACf,YAAM,SAAS,KAAK,WAAW,QAAQ;AACvC,WAAK,SAAS;AAAA,QACZ,OAAO,OAAO;AAAA;AAAA;AA9EhB,SAAK,QAAQ;AAAA,MACX,OAAO;AAAA,MACP,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,aAAa;AAAA;AAEf,SAAK,MAAM,qBAAM;AACjB,SAAK,aAAa,qBAAM;AACxB,SAAK,cAAc,KAAK,YAAY,KAAK;AAAA;AAAA,EAG3C,oBAAoB;AAClB,SAAK;AACL,WAAO,iBAAiB,UAAU,KAAK;AACvC,SAAK,SAAS;AAAA,MACZ,cAAc,KAAK,IAAI,UAAU,KAAK,IAAI,QAAQ,cAAc,KAAK,IAAI,QAAQ,cAAc;AAAA;AAAA;AAAA,EAInG,uBAAuB;AACrB,WAAO,oBAAoB,UAAU,KAAK;AAAA;AAAA,EA8D5C,cAAc;AACZ,UAAM,EAAE,SAAS,UAAU,cAAc,KAAK;AAC9C,QAAI,aAAa,SAAS;AACxB;AAAA,WACK;AACL,eAAS,EAAE,QAAQ,EAAE,OAAO;AAAA;AAG9B,QAAK,MAAK,OAAO,IAAI;AAAS,WAAK,IAAI,QAAQ;AAAA;AAAA,EAGjD,2BAA2B;AACzB,UAAM,EAAE,WAAW,OAAO,aAAa,KAAK;AAC5C,QAAI;AAAU,aAAO;AACrB,WAAO,aAAa,QAClB,mDAAC,iBAAD;AAAA,MACE,YAAW;AAAA,MACX,eAAY;AAAA,MACZ;AAAA,MACA,MAAM,mDAAC,6BAAD;AAAA,MACN,SAAS,KAAK;AAAA,SAEd;AAAA;AAAA,EAGN,SAAS;AACP,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,SACG;AAAA,QACD,KAAK;AACT,UAAM,EAAE,OAAO,QAAQ,aAAa,iBAAiB,KAAK;AAC1D,UAAM,kBAAkB,CAAC,KAAK,4BAA4B,gBAAgB,OAAO;AACjF,UAAM,iBAAiB,CAAC,eAAe,OAAO;AAE9C,UAAM,aAAa;AAAA,MACjB,cAAc,KAAK;AAAA,MACnB,gBAAgB,KAAK;AAAA,MACrB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,kBAAkB;AAAA,MAClB,qBAAqB;AAAA,MACrB,eAAe,KAAK;AAAA,MACpB,oBAAoB,KAAK;AAAA,MACzB;AAAA,MACA;AAAA,MACA,UAAU,CAAC,SAAS;AAClB,aAAK,MAAM,EAAE,SAAS;AACtB,YAAI,UAAU;AACZ,cAAI,OAAO,aAAa;AAAY,qBAAS;AAAA;AACxC,qBAAS,UAAU;AAAA;AAAA;AAAA,MAG5B;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,SACG;AAAA;AAGL,QAAI,iBACF,mDAAC,wBAAD;AAAA,MAAwB,KAAK,KAAK;AAAA,MAAY,OAAO,EAAE,OAAO;AAAA,OAC3D,CAAC,kBACA,mDAAC,OAAD;AAAA,SACM,wBAAK,YAAY,CAAC;AAAA,MACtB,cAAa;AAAA,MACb,WAAW,GAAG;AAAA,MACd,UAAU,KAAK;AAAA,MACf,QAAQ,KAAK;AAAA,MACb,SAAS,KAAK;AAAA,MAGd,aAAa,KAAK;AAAA,MAGlB,YAAY,KAAK;AAAA,MACjB;AAAA,SAGF,mDAAC,oBAAD;AAAA,MAAoB;AAAA,SAA0B;AAAA,MAAgB;AAAA,MAAsB;AAAA,OACjF,gBAAgB;AAAA,SACZ;AAAA;AAMb,QAAI,qBAAqB;AACvB,uBACE,mDAAC,6BAAD;AAAA,QACE,QAAQ,CAAC,kBAAkB,gBAAgB,CAAC,UAAU,eAAe;AAAA,QACrE,OAAO,OAAO;AAAA,QACd,QAAQ;AAAA,QACR,kBAAkB,mDAAC,wBAAD;AAAA,UAAwB,OAAO,EAAE,OAAO;AAAA,WAAW;AAAA;AAAA;AAK3E,UAAM,cACJ,gBAAgB,UAAU,eAAe,UAAU,YACjD,mDAAC,4CAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,SACI;AAAA,OAEH,kBAGH;AAGJ,WAAO;AAAA;AAAA;AAIX,UAAU,eAAe;AAAA,EACvB,QAAQ;AAAA,EACR,SAAS;AAAA;AAEX,MAAM,YAAY;AAAA,EAChB,WAAW,0BAAU;AAAA,EACrB,iBAAiB,0BAAU;AAAA,EAC3B,IAAI,0BAAU,UAAU,CAAC,0BAAU,QAAQ,0BAAU;AAAA,EACrD,qBAAqB,0BAAU;AAAA,EAC/B,KAAK,0BAAU,UAAU,CAAC,0BAAU,QAAQ,0BAAU;AAAA,EACtD,KAAK,0BAAU,UAAU,CAAC,0BAAU,QAAQ,0BAAU;AAAA,EACtD,MAAM,0BAAU;AAAA,EAChB,QAAQ,0BAAU;AAAA,EAClB,UAAU,0BAAU;AAAA,EACpB,SAAS,0BAAU;AAAA,EACnB,SAAS,0BAAU;AAAA,EACnB,WAAW,0BAAU;AAAA,EACrB,SAAS,0BAAU;AAAA,EACnB,cAAc,0BAAU;AAAA,EACxB,YAAY,0BAAU;AAAA,EACtB,SAAS,0BAAU;AAAA,EACnB,SAAS,0BAAU;AAAA,EACnB,aAAa,0BAAU;AAAA,EACvB,UAAU,0BAAU;AAAA,EACpB,MAAM,0BAAU;AAAA,EAChB,UAAU,0BAAU,UAAU,CAAC,0BAAU,MAAM,0BAAU,MAAM,EAAE,SAAS,0BAAU;AAAA,EACpF,WAAW,0BAAU;AAAA,EACrB,WAAW,0BAAU;AAAA,EACrB,eAAe,0BAAU;AAAA,EACzB,gBAAgB,0BAAU;AAAA,EAC1B,UAAU,0BAAU;AAAA,EACpB,gBAAgB,0BAAU;AAAA,EAC1B,UAAU,0BAAU;AAAA,EACpB,UAAU,0BAAU;AAAA,EACpB,WAAW,0BAAU;AAAA,EACrB,MAAM,0BAAU;AAAA,EAChB,WAAW,0BAAU;AAAA,EACrB,gBAAgB,0BAAU;AAAA,EAE1B,OAAO,0BAAU;AAAA,EACjB,UAAU,0BAAU,UAAU,CAAC,0BAAU,QAAQ,0BAAU;AAAA,EAU3D,MAAM,OAAO,UAAU,eAAe;AAEpC,QAAI,CAAC,CAAC,MAAM,uBAAuB,OAAO,MAAM,cAAc,UAAU;AACtE,aAAO,IAAI,MACT,kBAAkB,wBAAwB,OAAO,MAAM,6BAC/C;AAAA;AAAA;AAAA;AAQhB,UAAU,YAAY;AAGtB,IAAO,oBAAQ;",
+  "names": []
+}

package/cjs/Input/index.js

@@ -1,11 +1,28 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var DSInput = require('./DSInput.js');
-var InputAddonWrapper = require('./InputAddonWrapper.js');
-
-
-
-exports["default"] = DSInput["default"];
-exports.InputAddonWrapper = InputAddonWrapper;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var Input_exports = {};
+var React = __toESM(require("react"));
+__reExport(Input_exports, __toESM(require("./DSInput")));
+module.exports = __toCommonJS(Input_exports);
+//# sourceMappingURL=index.js.map

package/cjs/Input/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/Input/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './DSInput';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,0BAAc;",
+  "names": []
+}