@elliemae/ds-form 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/Input/InputAddonWrapper.js

@@ -1,40 +1,77 @@
-import * as React from "react";
-import React2, { Component } from "react";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-const blockName = "input-addon-wrapper";
-const InputWrapper = aggregatedClasses("div")(blockName);
-const InputAddon = aggregatedClasses("span")(blockName, "addon", ({ left, right, variant, hasError }) => ({
-  left,
-  right,
-  error: hasError,
-  [variant]: variant
-}));
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { Component } from 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+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(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-addon-wrapper';
+const InputWrapper = aggregatedClasses('div')(blockName);
+const InputAddon = aggregatedClasses('span')(blockName, 'addon', _ref => {
+  let {
+    left,
+    right,
+    variant,
+    hasError
+  } = _ref;
+  return {
+    left,
+    right,
+    error: hasError,
+    [variant]: variant
+  };
+});
 class InputAddonWrapper extends Component {
   constructor(props) {
     super(props);
     this.renderAddonComponent = this.renderAddonComponent.bind(this);
   }
+
   getLeftAddon(components) {
     return this.renderAddonComponent(true, components);
   }
+
   getRightAddon(components) {
     return this.renderAddonComponent(false, components);
   }
-  renderAddonComponent(left = true, components) {
-    if (!components)
-      return null;
+
+  renderAddonComponent() {
+    let left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    let components = arguments.length > 1 ? arguments[1] : undefined;
+    if (!components) return null;
+
     if (Array.isArray(components)) {
-      if (!components.filter((comp) => comp).length)
-        return null;
+      if (!components.filter(comp => comp).length) return null;
     }
-    const { containerProps, hasError } = this.props;
-    const classProps = left ? { left: true } : { right: true };
-    return /* @__PURE__ */ React2.createElement(InputAddon, {
-      classProps,
-      hasError,
-      ...containerProps
-    }, components.map((component, index) => component && React2.cloneElement(component, { ...component.props, key: index })));
+
+    const {
+      containerProps,
+      hasError
+    } = this.props;
+    const classProps = left ? {
+      left: true
+    } : {
+      right: true
+    };
+    return /*#__PURE__*/jsx(InputAddon, _objectSpread(_objectSpread({
+      classProps: classProps,
+      hasError: hasError
+    }, containerProps), {}, {
+      children: components.map((component, index) => component && /*#__PURE__*/React.cloneElement(component, _objectSpread(_objectSpread({}, component.props), {}, {
+        key: index
+      })))
+    }));
   }
+
   render() {
     const {
       className,
@@ -45,31 +82,33 @@ class InputAddonWrapper extends Component {
       variant,
       containerProps
     } = this.props;
-    const InputComponent = React2.Children.only(children);
-    const { hasError, readOnly, disabled } = InputComponent.props;
+    const InputComponent = React.Children.only(children);
+    const {
+      hasError,
+      readOnly,
+      disabled
+    } = InputComponent.props;
     const rightAddon = this.getRightAddon([...rightComponents]);
     const leftAddon = this.getLeftAddon([...leftComponents]);
-    return /* @__PURE__ */ React2.createElement(InputWrapper, {
-      className,
+    return /*#__PURE__*/jsxs(InputWrapper, _objectSpread(_objectSpread({
+      className: className,
       classProps: {
         hasError,
         readOnly,
         disabled,
         variant
       },
-      innerRef,
-      ...containerProps
-    }, leftAddon, InputComponent, rightAddon);
+      innerRef: innerRef
+    }, containerProps), {}, {
+      children: [leftAddon, InputComponent, rightAddon]
+    }));
   }
+
 }
 InputAddonWrapper.defaultProps = {
   rightComponents: [],
   leftComponents: [],
   containerProps: {}
 };
-var InputAddonWrapper_default = InputAddonWrapper;
-export {
-  InputAddonWrapper,
-  InputAddonWrapper_default as default
-};
-//# sourceMappingURL=InputAddonWrapper.js.map
+
+export { InputAddonWrapper as default };

package/esm/Input/InputImpl.js

@@ -1,63 +1,114 @@
-import * as React from "react";
-import React2, { Component } from "react";
-import PropTypes from "prop-types";
-import { omit } from "lodash";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { CloseCircle } from "@elliemae/ds-icons";
-import { DSButton } from "@elliemae/ds-button";
-import { DSTooltip } from "@elliemae/ds-tooltip";
-import { InputAddonWrapper } from "./InputAddonWrapper";
-const blockName = "input";
-const Input = aggregatedClasses("input")(blockName, null, ({ clearable, value }) => ({
-  clearable,
-  value
-}));
-const WrapperForTooltipInput = aggregatedClasses("div")(blockName, "tooltip-ref");
-const InputCustomWrapper = aggregatedClasses("div")(blockName, null, ({ clearable, value }) => ({
-  clearable,
-  value
-}));
-const ClearableButton = aggregatedClasses(DSButton)(blockName, "clearable");
-const getValidComponents = (component) => component;
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { omit } from 'lodash';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { CloseCircle } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import DSTooltip from '@elliemae/ds-tooltip';
+import InputAddonWrapper from './InputAddonWrapper.js';
+import { jsx } from 'react/jsx-runtime';
+
+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(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 = aggregatedClasses('input')(blockName, null, _ref2 => {
+  let {
+    clearable,
+    value
+  } = _ref2;
+  return {
+    clearable,
+    value
+  };
+});
+const WrapperForTooltipInput = aggregatedClasses('div')(blockName, 'tooltip-ref');
+const InputCustomWrapper = aggregatedClasses('div')(blockName, null, _ref3 => {
+  let {
+    clearable,
+    value
+  } = _ref3;
+  return {
+    clearable,
+    value
+  };
+});
+const ClearableButton = aggregatedClasses(DSButton)(blockName, 'clearable');
+
+const getValidComponents = component => component;
+
 const noop = () => null;
+
 class InputImpl extends Component {
   constructor(props) {
     super(props);
-    this.handleOnChange = (e) => {
-      const { onChange, max } = this.props;
-      const { value } = e.target;
-      if (max && value > max)
-        return;
-      if (onChange)
-        onChange(e);
+    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);
+
       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({
@@ -65,6 +116,7 @@ class InputImpl extends Component {
         });
       }
     };
+
     this.handleMouseLeave = () => {
       if (this.state.showTooltip) {
         this.setState({
@@ -72,56 +124,76 @@ class InputImpl extends 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 = React2.createRef();
-    this.refTooltip = React2.createRef();
+    this.ref = /*#__PURE__*/React.createRef();
+    this.refTooltip = /*#__PURE__*/React.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__ */ React2.createElement(ClearableButton, {
+    const {
+      clearable,
+      value,
+      disabled
+    } = this.props;
+    if (disabled) return null;
+    return clearable && value ? /*#__PURE__*/_jsx(ClearableButton, {
       buttonType: "text",
       "data-testid": "ds-input_clearable-btn",
-      disabled,
-      icon: /* @__PURE__ */ React2.createElement(CloseCircle, null),
+      disabled: disabled,
+      icon: _CloseCircle || (_CloseCircle = /*#__PURE__*/_jsx(CloseCircle, {})),
       onClick: this.handleClear
     }) : null;
   }
+
   render() {
-    const {
+    const _this$props = this.props,
+          {
       role,
       id,
       isShowElipsisActive,
@@ -156,30 +228,37 @@ class InputImpl extends Component {
       style,
       containerProps,
       tabIndex,
-      hasError,
-      ...rest
-    } = this.props;
-    const { width, active, showTooltip, isEllipsisOn } = this.state;
+      hasError
+    } = _this$props,
+          rest = _objectWithoutProperties(_this$props, _excluded);
+
+    const {
+      width,
+      active,
+      showTooltip,
+      isEllipsisOn
+    } = this.state;
     const rightComponents = [this.renderClearableComponent(), rightComponent].filter(getValidComponents);
     const leftComponents = [leftComponent].filter(getValidComponents);
-    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"],
+
+    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'],
       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,
@@ -205,55 +284,67 @@ class InputImpl extends Component {
       min,
       max,
       style,
-      tabIndex,
-      ...containerProps
-    };
-    let InputComponent = /* @__PURE__ */ React2.createElement(WrapperForTooltipInput, {
+      tabIndex
+    }, containerProps);
+
+    let InputComponent = /*#__PURE__*/jsx(WrapperForTooltipInput, {
       ref: this.refTooltip,
-      style: { width: "100%" }
-    }, !customInputType ? /* @__PURE__ */ React2.createElement(Input, {
-      ...omit(inputProps, ["disableTooltip"]),
-      autoComplete: "off",
-      clearable: `${clearable}`,
-      onChange: this.handleOnChange,
-      onBlur: this.handleBlur,
-      onFocus: this.handleFocus,
-      onMouseOver: this.handleMouseEnter,
-      onMouseOut: this.handleMouseLeave,
-      value
-    }) : /* @__PURE__ */ React2.createElement(InputCustomWrapper, {
-      className,
-      ...containerProps,
-      clearable,
-      value
-    }, customInputType({
-      ...inputProps
-    })));
+      style: {
+        width: '100%'
+      },
+      children: !customInputType ? /*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({}, 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__*/jsx(InputCustomWrapper, _objectSpread(_objectSpread({
+        className: className
+      }, containerProps), {}, {
+        clearable: clearable,
+        value: value,
+        children: customInputType(_objectSpread({}, inputProps))
+      }))
+    });
+
     if (isShowElipsisActive) {
-      InputComponent = /* @__PURE__ */ React2.createElement(DSTooltip, {
+      InputComponent = /*#__PURE__*/_jsx(DSTooltip, {
         isOpen: !disableTooltip && isEllipsisOn && !active && showTooltip && width,
         title: String(value),
         zIndex: 11,
-        triggerComponent: /* @__PURE__ */ React2.createElement(WrapperForTooltipInput, {
-          style: { width: "100%" }
-        }, InputComponent)
+        triggerComponent: /*#__PURE__*/_jsx(WrapperForTooltipInput, {
+          style: {
+            width: '100%'
+          }
+        }, void 0, InputComponent)
       });
     }
-    const renderInput = rightComponents.length || leftComponents.length || clearable ? /* @__PURE__ */ React2.createElement(InputAddonWrapper, {
-      className,
-      leftComponents,
-      rightComponents,
-      hasError,
-      ...containerProps
-    }, InputComponent) : InputComponent;
+
+    const renderInput = rightComponents.length || leftComponents.length || clearable ? /*#__PURE__*/jsx(InputAddonWrapper, _objectSpread(_objectSpread({
+      className: className,
+      leftComponents: leftComponents,
+      rightComponents: rightComponents,
+      hasError: hasError
+    }, containerProps), {}, {
+      children: InputComponent
+    })) : InputComponent;
     return renderInput;
   }
+
 }
+
 InputImpl.defaultProps = {
   onBlur: noop,
   onFocus: noop
 };
-const propTypes = {
+({
   className: PropTypes.string,
   customInputType: PropTypes.func,
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -274,7 +365,9 @@ const propTypes = {
   placeholder: PropTypes.string,
   required: PropTypes.bool,
   role: PropTypes.string,
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
   maxLength: PropTypes.number,
   minLength: PropTypes.number,
   leftComponent: PropTypes.element,
@@ -287,18 +380,27 @@ const propTypes = {
   type: PropTypes.string,
   clearable: PropTypes.bool,
   containerProps: PropTypes.object,
+  // eslint-disable-next-line react/forbid-prop-types
   style: PropTypes.object,
   tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.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
   value(props, propName, componentName) {
-    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\`.`);
+    // 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`.');
     }
   }
-};
-InputImpl.propTypes = propTypes;
-var InputImpl_default = InputImpl;
-export {
-  InputImpl,
-  InputImpl_default as default
-};
-//# sourceMappingURL=InputImpl.js.map
+
+});
+
+export { InputImpl as default };

package/esm/Input/index.js

@@ -1,3 +1,2 @@
-import * as React from "react";
-export * from "./DSInput";
-//# sourceMappingURL=index.js.map
+export { default } from './DSInput.js';
+export { default as InputAddonWrapper } from './InputAddonWrapper.js';