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

package/esm/Input/InputImpl.js

@@ -1,406 +0,0 @@
-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.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.createRef();
-    this.refTooltip = /*#__PURE__*/React.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(ClearableButton, {
-      buttonType: "text",
-      "data-testid": "ds-input_clearable-btn",
-      disabled: disabled,
-      icon: _CloseCircle || (_CloseCircle = /*#__PURE__*/_jsx(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(_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__*/jsx(WrapperForTooltipInput, {
-      ref: this.refTooltip,
-      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__*/_jsx(DSTooltip, {
-        isOpen: !disableTooltip && isEllipsisOn && !active && showTooltip && width,
-        title: String(value),
-        zIndex: 11,
-        triggerComponent: /*#__PURE__*/_jsx(WrapperForTooltipInput, {
-          style: {
-            width: '100%'
-          }
-        }, void 0, 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
-};
-({
-  className: PropTypes.string,
-  customInputType: PropTypes.func,
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  isShowElipsisActive: PropTypes.bool,
-  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  name: PropTypes.string,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onKeyUp: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onMouseOut: PropTypes.func,
-  onPaste: PropTypes.func,
-  onClear: PropTypes.func,
-  placeholder: PropTypes.string,
-  required: PropTypes.bool,
-  role: PropTypes.string,
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
-  maxLength: PropTypes.number,
-  minLength: PropTypes.number,
-  leftComponent: PropTypes.element,
-  rightComponent: PropTypes.element,
-  hasError: PropTypes.bool,
-  disableTooltip: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  disabled: PropTypes.bool,
-  autoFocus: PropTypes.bool,
-  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) {
-    // 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`.');
-    }
-  }
-
-});
-
-export { InputImpl as default };

package/esm/Input/index.js

@@ -1,2 +0,0 @@
-export { default } from './DSInput.js';
-export { default as InputAddonWrapper } from './InputAddonWrapper.js';

package/esm/InputGroup/AddonWrapper.js

@@ -1,44 +0,0 @@
-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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { Component } from 'react';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import { 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-group';
-const Container = aggregatedClasses('div')(blockName);
-const InputAddon = aggregatedClasses('span')(blockName, 'addon');
-class AddonWrapper extends 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__*/jsxs(Container, _objectSpread(_objectSpread({
-      className: "".concat(className, " ").concat(blockName, "--").concat(childType)
-    }, containerProps), {}, {
-      children: [leftAddon && /*#__PURE__*/_jsx(InputAddon, {}, void 0, leftAddon), inputComponent, rightAddon && /*#__PURE__*/_jsx(InputAddon, {}, void 0, rightAddon)]
-    }));
-  }
-
-}
-AddonWrapper.defaultProps = {};
-
-export { AddonWrapper as default };

package/esm/InputGroup/DSInputGroup.js

@@ -1,34 +0,0 @@
-import 'react';
-import { describe } from 'react-desc';
-import AddonWrapper from './AddonWrapper.js';
-import { props } from './props.js';
-import { defaultProps } from './defaultProps.js';
-import { jsx } from 'react/jsx-runtime';
-
-const DSInputGroup = _ref => {
-  let {
-    containerProps,
-    innerRef,
-    className,
-    style,
-    leftAddon,
-    rightAddon,
-    children: InputComponents // as InputComponents,
-
-  } = _ref;
-  return /*#__PURE__*/jsx(AddonWrapper, {
-    ref: innerRef,
-    className: className,
-    containerProps: containerProps,
-    leftAddon: leftAddon,
-    rightAddon: rightAddon,
-    style: style,
-    children: InputComponents
-  });
-};
-
-DSInputGroup.defaultProps = defaultProps;
-const DSInputGroupWithSchema = describe(DSInputGroup);
-DSInputGroupWithSchema.propTypes = props;
-
-export { DSInputGroupWithSchema, DSInputGroup as default };

package/esm/InputGroup/defaultProps.js

@@ -1,10 +0,0 @@
-const defaultProps = {
-  containerProps: {},
-  innerRef: null,
-  className: '',
-  style: {},
-  leftAddon: null,
-  rightAddon: null
-};
-
-export { defaultProps };

package/esm/InputGroup/index.js

@@ -1 +0,0 @@
-export { DSInputGroupWithSchema, default } from './DSInputGroup.js';

package/esm/InputGroup/props.js

@@ -1,36 +0,0 @@
-import { PropTypes } from 'react-desc';
-
-const props = {
-  /** props injected to wrapper of page header */
-  containerProps: PropTypes.shape({}).description('props injected to wrapper of page header'),
-
-  /** inner ref for input group wrapper */
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]).description('inner ref for input group wrapper'),
-
-  /** class for input group wrapper */
-  className: PropTypes.string.description('class for input group wrapper'),
-
-  /**
-   * Set style for the input group
-   */
-  style: PropTypes.object.description('Set style for the input group'),
-
-  /**
-   * Component to be added at the left side of the input
-   */
-  leftAddon: 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: PropTypes.element.description('Component to be added at the right side of the input'),
-
-  /**
-   * Input components to show
-   */
-  children: PropTypes.element.description('Input components to show')
-};
-
-export { props };

package/esm/InputMask/DSInputMask.js

@@ -1,129 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/web.dom-collections.iterator.js';
-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 { useState, useEffect, useCallback } from 'react';
-import { describe } from 'react-desc';
-import { MASK_TYPES } from './MaskTypes.js';
-export { MASK_TYPES } from './MaskTypes.js';
-export { MASK_PIPES } from './MaskPipes.js';
-import DSInputMaskDeprecated from './DSInputMaskDeprecated.js';
-import { inputProps } from './props.js';
-import { defaultProps } from './defaultProps.js';
-import { OutOfTheBoxMaskTypes } from './mask_types/index.js';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["aria-label", "autoFocus", "innerRef", "mask", "pipe", "value"];
-
-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 isStringMask = mask => typeof mask === 'string';
-
-const isObjectMask = mask => typeof mask === 'object' && mask.type;
-
-const getRawMask = (mask, rawValue) => typeof mask === 'function' ? mask(rawValue) : mask;
-
-const getValueFromEventOrString = e => {
-  let value = e;
-
-  if (e && e.target) {
-    const {
-      target: {
-        value: eValue
-      }
-    } = e;
-    value = eValue;
-  }
-
-  return value;
-};
-
-const DSInputMask = _ref => {
-  let {
-    'aria-label': ariaLabel = 'Input Mask',
-    autoFocus,
-    innerRef,
-    mask,
-    pipe,
-    value: valueOrEvent
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  const [rawValue, setRawValue] = useState(getValueFromEventOrString(valueOrEvent));
-  useEffect(() => {
-    setRawValue(getValueFromEventOrString(valueOrEvent));
-  }, [valueOrEvent]);
-  const [rawMask, setRawMask] = useState(getRawMask(mask, rawValue));
-  const [focus, setFocus] = useState(autoFocus);
-  const [lastkey, setLastkey] = useState({
-    code: null,
-    key: null
-  });
-  const [cursorPosition, setCursorPosition] = useState({
-    current: 0
-  });
-  const handleSetMask = useCallback(newValue => {
-    setRawMask(getRawMask(mask, newValue));
-  }, [mask]);
-
-  if (!pipe && isStringMask(rawMask)) {
-    return OutOfTheBoxMaskTypes[rawMask](_objectSpread(_objectSpread({}, rest), {}, {
-      'aria-label': ariaLabel,
-      innerRef,
-      value: rawValue,
-      focus,
-      setFocus,
-      setRawMask: handleSetMask,
-      cursorPosition,
-      setCursorPosition,
-      lastkey,
-      setLastkey,
-      setRawValue
-    }));
-  }
-
-  if (!pipe && isObjectMask(rawMask)) {
-    // we should change rawMask.type to rawMask.maskType
-    // to avoid override standard props
-    return OutOfTheBoxMaskTypes[rawMask.type](_objectSpread(_objectSpread(_objectSpread({}, rawMask), rest), {}, {
-      'aria-label': ariaLabel,
-      innerRef,
-      value: rawValue,
-      focus,
-      setFocus,
-      setRawMask: handleSetMask,
-      cursorPosition,
-      setCursorPosition,
-      lastkey,
-      setLastkey,
-      setRawValue
-    }));
-  }
-
-  const getDeprecatedMask = () => {
-    if (mask === MASK_TYPES.DATE) return MASK_TYPES.DATE_DEPRECATED;
-    if (mask === MASK_TYPES.DATE_TIME) return MASK_TYPES.DATE_TIME_DEPRECATED;
-    return mask;
-  };
-
-  return /*#__PURE__*/jsx(DSInputMaskDeprecated, _objectSpread(_objectSpread({}, rest), {}, {
-    "aria-label": ariaLabel,
-    autoFocus: autoFocus,
-    innerRef: innerRef,
-    mask: getDeprecatedMask(),
-    pipe: pipe,
-    value: rawValue
-  }));
-};
-
-DSInputMask.defaultProps = defaultProps;
-const DSInputMaskWithSchema = describe(DSInputMask).description('Masking input for custom formats');
-DSInputMaskWithSchema.propTypes = inputProps;
-
-export { DSInputMask, DSInputMaskWithSchema, DSInputMask as default };