@elliemae/ds-form 2.3.0-next.0 → 3.0.0-alpha.0

package/cjs/Input/InputImpl.js

@@ -1,418 +0,0 @@
-'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
-  };
-});
-const ClearableButton = dsClassnames.aggregatedClasses(DSButton__default["default"])(blockName, 'clearable');
-
-const getValidComponents = component => component;
-
-const noop = () => null;
-
-class InputImpl extends 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);
-
-      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 !== '') {
-        onChange({
-          target: {
-            value: min.toString()
-          }
-        });
-      }
-
-      onBlur(e);
-      this.setState({
-        active: false
-      });
-    };
-
-    this.handleFocus = e => {
-      const {
-        onFocus
-      } = this.props;
-      onFocus(e);
-      this.setState({
-        active: true
-      });
-    };
-
-    this.handleMouseEnter = () => {
-      if (!this.state.showTooltip) {
-        this.setState({
-          showTooltip: true
-        });
-      }
-    };
-
-    this.handleMouseLeave = () => {
-      if (this.state.showTooltip) {
-        this.setState({
-          showTooltip: false
-        });
-      }
-    };
-
-    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.handleClear = this.handleClear.bind(this);
-  }
-
-  componentDidMount() {
-    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);
-  }
-
-  handleClear() {
-    const {
-      onClear,
-      onChange,
-      clearable
-    } = this.props;
-
-    if (clearable && onClear) {
-      onClear();
-    } else {
-      onChange({
-        target: {
-          value: ''
-        }
-      });
-    }
-
-    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, {
-      buttonType: "text",
-      "data-testid": "ds-input_clearable-btn",
-      disabled: disabled,
-      icon: _CloseCircle || (_CloseCircle = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseCircle, {})),
-      onClick: this.handleClear
-    }) : null;
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      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
-    } = _this$props,
-          rest = _objectWithoutProperties__default["default"](_this$props, _excluded);
-
-    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'],
-      role,
-      id,
-      innerRef: _ref => {
-        this.ref = {
-          current: _ref
-        };
-
-        if (innerRef) {
-          if (typeof innerRef === 'function') innerRef(_ref);else innerRef.current = _ref;
-        }
-      },
-      className,
-      autoFocus,
-      disabled: disabled || readOnly,
-      maxLength,
-      minLength,
-      name,
-      onBlur,
-      onChange,
-      onClick,
-      onFocus,
-      onKeyDown,
-      onKeyUp,
-      onPaste,
-      onMouseLeave,
-      disableTooltip,
-      onMouseOut,
-      placeholder,
-      required,
-      type,
-      value,
-      min,
-      max,
-      style,
-      tabIndex
-    }, containerProps);
-
-    let InputComponent = /*#__PURE__*/jsxRuntime.jsx(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))
-      }))
-    });
-
-    if (isShowElipsisActive) {
-      InputComponent = /*#__PURE__*/_jsx__default["default"](DSTooltip__default["default"], {
-        isOpen: !disableTooltip && isEllipsisOn && !active && showTooltip && width,
-        title: String(value),
-        zIndex: 11,
-        triggerComponent: /*#__PURE__*/_jsx__default["default"](WrapperForTooltipInput, {
-          style: {
-            width: '100%'
-          }
-        }, void 0, 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;
-    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
-  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`.');
-    }
-  }
-
-});
-
-module.exports = InputImpl;

package/cjs/Input/index.js

@@ -1,11 +0,0 @@
-'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;

package/cjs/InputGroup/AddonWrapper.js

@@ -1,51 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-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 dsClassnames = require('@elliemae/ds-classnames');
-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 blockName = 'input-addon-group';
-const Container = dsClassnames.aggregatedClasses('div')(blockName);
-const InputAddon = dsClassnames.aggregatedClasses('span')(blockName, 'addon');
-class AddonWrapper extends React.Component {
-  constructor() {
-    super(...arguments);
-    this.state = {};
-  }
-
-  render() {
-    const {
-      leftAddon,
-      rightAddon,
-      children: inputComponent,
-      className,
-      containerProps
-    } = this.props;
-    const childType = inputComponent && inputComponent.type && inputComponent.type.name ? inputComponent.type.name.toLowerCase() : 'default';
-    return /*#__PURE__*/jsxRuntime.jsxs(Container, _objectSpread(_objectSpread({
-      className: "".concat(className, " ").concat(blockName, "--").concat(childType)
-    }, containerProps), {}, {
-      children: [leftAddon && /*#__PURE__*/_jsx__default["default"](InputAddon, {}, void 0, leftAddon), inputComponent, rightAddon && /*#__PURE__*/_jsx__default["default"](InputAddon, {}, void 0, rightAddon)]
-    }));
-  }
-
-}
-AddonWrapper.defaultProps = {};
-
-module.exports = AddonWrapper;

package/cjs/InputGroup/DSInputGroup.js

@@ -1,39 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('react');
-var reactDesc = require('react-desc');
-var AddonWrapper = require('./AddonWrapper.js');
-var props = require('./props.js');
-var defaultProps = require('./defaultProps.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-const DSInputGroup = _ref => {
-  let {
-    containerProps,
-    innerRef,
-    className,
-    style,
-    leftAddon,
-    rightAddon,
-    children: InputComponents // as InputComponents,
-
-  } = _ref;
-  return /*#__PURE__*/jsxRuntime.jsx(AddonWrapper, {
-    ref: innerRef,
-    className: className,
-    containerProps: containerProps,
-    leftAddon: leftAddon,
-    rightAddon: rightAddon,
-    style: style,
-    children: InputComponents
-  });
-};
-
-DSInputGroup.defaultProps = defaultProps.defaultProps;
-const DSInputGroupWithSchema = reactDesc.describe(DSInputGroup);
-DSInputGroupWithSchema.propTypes = props.props;
-
-exports.DSInputGroupWithSchema = DSInputGroupWithSchema;
-exports["default"] = DSInputGroup;

package/cjs/InputGroup/defaultProps.js

@@ -1,14 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const defaultProps = {
-  containerProps: {},
-  innerRef: null,
-  className: '',
-  style: {},
-  leftAddon: null,
-  rightAddon: null
-};
-
-exports.defaultProps = defaultProps;

package/cjs/InputGroup/index.js

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

package/cjs/InputGroup/props.js

@@ -1,40 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDesc = require('react-desc');
-
-const props = {
-  /** props injected to wrapper of page header */
-  containerProps: reactDesc.PropTypes.shape({}).description('props injected to wrapper of page header'),
-
-  /** inner ref for input group wrapper */
-  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.shape({
-    current: reactDesc.PropTypes.any
-  })]).description('inner ref for input group wrapper'),
-
-  /** class for input group wrapper */
-  className: reactDesc.PropTypes.string.description('class for input group wrapper'),
-
-  /**
-   * Set style for the input group
-   */
-  style: reactDesc.PropTypes.object.description('Set style for the input group'),
-
-  /**
-   * Component to be added at the left side of the input
-   */
-  leftAddon: reactDesc.PropTypes.element.description('Component to be added at the left side of the input'),
-
-  /**
-   * Component to be added at the right side of the input
-   */
-  rightAddon: reactDesc.PropTypes.element.description('Component to be added at the right side of the input'),
-
-  /**
-   * Input components to show
-   */
-  children: reactDesc.PropTypes.element.description('Input components to show')
-};
-
-exports.props = props;