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

package/esm/Input/InputImpl.js

@@ -0,0 +1,406 @@
+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

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

package/esm/InputGroup/AddonWrapper.js

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,34 @@
+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

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

package/esm/InputGroup/index.js

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

package/esm/InputGroup/props.js

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,129 @@
+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 };