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

package/esm/SearchBox/props.js

@@ -1,93 +0,0 @@
-import { PropTypes } from 'react-desc';
-
-const searchBoxProps = {
-  /** Set of Properties attached to the main container */
-  containerProps: PropTypes.object.description('Set of Properties attached to the main container'),
-
-  /** html class attribute */
-  className: PropTypes.string.description('html class attribute'),
-
-  /** ref to the components container */
-  innerRef: PropTypes.object.description('ref to the components container'),
-
-  /** Set style to the search box */
-  style: PropTypes.object.description('Set style to the search box'),
-
-  /** search property */
-  property: PropTypes.string.description('search property'),
-
-  /** Placeholder for the search box */
-  placeholder: PropTypes.string.description('Placeholder for the search box'),
-
-  /** Whether to trigger the search once the enter is pressed */
-  searchOnEnter: PropTypes.bool.description('Whether to trigger the search once the enter is pressed'),
-
-  /** Whether to clear the input on search */
-  clearOnSearch: PropTypes.bool.description('Whether to clear the input on search'),
-
-  /** function triggered once in the clear button is clicked */
-  onClearButtonClick: PropTypes.func.description('function triggered once in the clear button is clicked'),
-
-  /** function triggered once in the search box a keyboard key is released */
-  onKeyUp: PropTypes.func.description('function triggered once in the search box a keyboard key is released'),
-
-  /** function triggered once the search action begins (search icon click/ enter keypress) */
-  onSearch: PropTypes.func.description('unction triggered once the search action begins (search icon click/ enter keypress)'),
-
-  /** function triggered once the search icon is clicked */
-  onSearchButtonClick: PropTypes.func.description('function triggered once the search icon is clicked'),
-
-  /** function that is triggered on change */
-  onChange: PropTypes.func.description('function that is triggered on change'),
-
-  /** Function that is triggered on blur */
-  onBlur: PropTypes.func.description('Function that is triggered on blur'),
-
-  /** searchbox input value */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('searchbox input value'),
-
-  /** Whether to show an icon or not */
-  showIcon: PropTypes.bool.description('Whether to show an icon or not'),
-
-  /** Disables the search input and button */
-  disabled: PropTypes.bool.description('Disables the search input and button'),
-
-  /** Disables the search button */
-  disableButton: PropTypes.bool.description('Disables the search button'),
-
-  /** whether the input is read only or not */
-  readOnly: PropTypes.bool.description('whether the input is read only or not'),
-
-  /** Show clearable button */
-  clearable: PropTypes.bool.description('Show clearable button')
-};
-const navSearchBoxProps = {
-  /** searchbox input value */
-  value: PropTypes.string.isRequired.description('searchbox input value'),
-
-  /** function that is triggered on change */
-  onChange: PropTypes.func.isRequired.description('function that is triggered on change'),
-
-  /** Function that is triggered on blur */
-  onBlur: PropTypes.func.description('Function that is triggered on blur'),
-
-  /** triggered on next chevron click */
-  onNext: PropTypes.func.isRequired.description('triggered on next chevron click'),
-
-  /** triggered on prev chevron click */
-  onPrevious: PropTypes.func.isRequired.description('triggered on prev chevron click'),
-
-  /** function that is triggered on clear button press */
-  onClear: PropTypes.func.isRequired.description('function that is triggered on clear button press'),
-
-  /** zero based index to show on search box, -1 hides navigation */
-  currentResultIndex: PropTypes.number.isRequired.description('zero based index to show on search box, -1 hides navigation'),
-
-  /** total items to navigate */
-  totalResults: PropTypes.number.isRequired.description('total items to navigate'),
-
-  /** Placeholder for the search box */
-  placeholder: PropTypes.string.description('Placeholder for the search box')
-};
-
-export { navSearchBoxProps, searchBoxProps };

package/esm/SearchBox/styled.js

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-import DSTextBox from '../TextBox/DSTextBox.js';
-
-const SearchBoxTextBox = /*#__PURE__*/styled(DSTextBox).withConfig({
-  componentId: "sc-44ofm-0"
-})(["padding-right:33px;"]);
-
-export { SearchBoxTextBox };

package/esm/SearchBox/useSearch.js

@@ -1,100 +0,0 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useState, useCallback, useEffect } from 'react';
-import { debounce } from '@elliemae/ds-utilities';
-
-function handleSearch(clearOnSearch, setValue, searchOnEnter, value, onSearch, property, clickTrigger, onSearchButtonClick) {
-  if (clickTrigger) {
-    onSearchButtonClick();
-  }
-
-  if (clearOnSearch) setValue('');
-  if (searchOnEnter && !value) return;
-  onSearch({
-    query: {
-      [property]: value
-    },
-    property,
-    value
-  });
-}
-
-function useSearch() {
-  let params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const {
-    onKeyUp,
-    onSearch,
-    onSearchButtonClick,
-    property,
-    clearOnSearch,
-    searchOnEnter,
-    onChange,
-    onClearButtonClick
-  } = params;
-  const [value, setValue] = useState(params.value);
-  const debouncedSearch = useCallback(debounce(handleSearch, 200), []); // update state if prop changes
-
-  useEffect(() => {
-    if (value !== params.value) {
-      setValue(params.value);
-    }
-  }, [params.value]);
-
-  const searchWithParams = function () {
-    let clickedSearchButton = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    return handleSearch(clearOnSearch, setValue, searchOnEnter, value, onSearch, property, clickedSearchButton, onSearchButtonClick);
-  };
-
-  const handleChange = _ref => {
-    let {
-      target
-    } = _ref;
-    onChange(target.value);
-    setValue(target.value);
-
-    if (!searchOnEnter) {
-      // Functional update to get latest value state, similar to this.setState callback
-      setValue(prevValue => {
-        debouncedSearch(clearOnSearch, setValue, searchOnEnter, prevValue, onSearch, property);
-        return prevValue;
-      });
-    }
-  };
-
-  const handleClear = () => {
-    onClearButtonClick();
-    onChange('');
-    setValue('');
-
-    if (!searchOnEnter) {
-      // Functional update to get latest value state, similar to this.setState callback
-      setValue(prevValue => {
-        debouncedSearch(clearOnSearch, setValue, searchOnEnter, prevValue, onSearch, property);
-        return prevValue;
-      });
-    }
-
-    debouncedSearch(clearOnSearch, setValue, searchOnEnter, value, onSearch, property);
-  };
-
-  const handleKeyUp = e => {
-    const {
-      key
-    } = e;
-
-    if (searchOnEnter && key === 'Enter') {
-      searchWithParams();
-    }
-
-    onKeyUp(e);
-  };
-
-  return {
-    searchValue: value,
-    handleChange,
-    handleSearch: searchWithParams,
-    handleKeyUp,
-    handleClear
-  };
-}
-
-export { useSearch };

package/esm/SearchBox/withSearchable.js

@@ -1,143 +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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import React, { Component } from 'react';
-import { debounce } from '@elliemae/ds-utilities';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["containerProps"];
-
-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 withSearchable = WrappedComponent => {
-  class Searchable extends Component {
-    constructor(props) {
-      super(props);
-      this.debouncedSearch = debounce(this.handleSearch, 200);
-      this.state = {
-        value: props.value
-      };
-      this.handleSearch = this.handleSearch.bind(this);
-      this.handleKeyUp = this.handleKeyUp.bind(this);
-      this.handleChange = this.handleChange.bind(this);
-      this.buttonRef = /*#__PURE__*/React.createRef();
-      this.handleChange = this.handleChange.bind(this);
-      this.handleKeyUp = this.handleKeyUp.bind(this);
-      this.handleSearch = this.handleSearch.bind(this);
-    }
-
-    static getDerivedStateFromProps(nextProps, _ref) {
-      let {
-        prevPropValue
-      } = _ref;
-
-      if (nextProps.value !== prevPropValue) {
-        return {
-          value: nextProps.value,
-          prevPropValue: nextProps.value
-        };
-      }
-
-      return null;
-    }
-
-    handleKeyUp(e) {
-      const {
-        onKeyUp,
-        searchOnEnter
-      } = this.props;
-      const {
-        key
-      } = e;
-
-      if (searchOnEnter && key === 'Enter') {
-        this.handleSearch();
-      }
-
-      onKeyUp(e);
-    }
-
-    handleSearch() {
-      const {
-        onSearch,
-        property,
-        clearOnSearch,
-        searchOnEnter
-      } = this.props;
-      const {
-        value
-      } = this.state;
-      if (clearOnSearch) this.setState({
-        value: ''
-      });
-      if (searchOnEnter && !value) return;
-      onSearch({
-        query: {
-          [property]: value
-        },
-        property,
-        value
-      });
-    }
-
-    handleChange(_ref2) {
-      let {
-        target
-      } = _ref2;
-      const {
-        value
-      } = target;
-      const {
-        searchOnEnter,
-        onChange
-      } = this.props;
-      onChange(value);
-      this.setState({
-        value
-      }, () => {
-        if (!searchOnEnter) this.debouncedSearch();
-      });
-    }
-
-    render() {
-      const {
-        value
-      } = this.state;
-
-      const _this$props = this.props,
-            {
-        containerProps
-      } = _this$props,
-            rest = _objectWithoutProperties(_this$props, _excluded);
-
-      return /*#__PURE__*/jsx(WrappedComponent, _objectSpread(_objectSpread({}, rest), {}, {
-        buttonRef: this.buttonRef,
-        containerProps: containerProps,
-        onChange: this.handleChange,
-        onKeyUp: this.handleKeyUp,
-        onSearch: this.handleSearch,
-        value: value
-      }));
-    }
-
-  }
-
-  Searchable.defaultProps = {
-    onChange: () => null,
-    onSearch: () => null,
-    onKeyUp: () => null,
-    property: 'all',
-    searchOnEnter: true,
-    clearOnSearch: false,
-    containerProps: {}
-  };
-  return Searchable;
-};
-
-export { withSearchable as default };

package/esm/TextBox/DSTextBox.js

@@ -1,170 +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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react';
-import { PropTypes, describe } from 'react-desc';
-import DSInput from '../Input/DSInput.js';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["containerProps", "autoFocus", "disabled", "maxLength", "minLength", "fluidWidth", "placeholder", "value", "hasError", "readOnly", "innerRef", "type", "min", "max", "clearable", "leftComponent", "rightComponent", "required", "variant", "disableTooltip", "id"];
-
-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 DSTextBox = _ref => {
-  let {
-    containerProps = {},
-    autoFocus = false,
-    disabled = false,
-    maxLength = 255,
-    minLength = 0,
-    fluidWidth = false,
-    placeholder,
-    value = '',
-    hasError = false,
-    readOnly = false,
-    innerRef = null,
-    type = 'text',
-    min = undefined,
-    max = undefined,
-    clearable = false,
-    leftComponent = null,
-    rightComponent = null,
-    required = false,
-    variant,
-    disableTooltip,
-    id
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/jsx(DSInput, _objectSpread(_objectSpread({}, otherProps), {}, {
-    "aria-label": !id ? otherProps['aria-label'] || 'Text Box' : undefined,
-    "aria-describedby": otherProps['aria-describedby'] || "".concat(id, "_feedback_message"),
-    autoFocus: autoFocus,
-    clearable: clearable,
-    containerProps: containerProps,
-    disabled: disabled,
-    fluidWidth: fluidWidth,
-    hasError: hasError,
-    innerRef: innerRef,
-    leftComponent: leftComponent,
-    max: max,
-    maxLength: maxLength,
-    min: min,
-    minLength: minLength,
-    placeholder: placeholder,
-    readOnly: readOnly,
-    required: required,
-    rightComponent: rightComponent,
-    role: "textbox",
-    type: type,
-    value: value,
-    variant: variant,
-    disableTooltip: disableTooltip,
-    id: id
-  }));
-};
-
-const props = {
-  /** inject props at textbox wrapper */
-  containerProps: PropTypes.shape({}).description('inject props at textbox wrapper'),
-
-  /**
-   * Whether the text box uses auto focus or not
-   */
-  autoFocus: PropTypes.bool.description('Whether the text box uses auto focus or not'),
-
-  /**
-   * Whether the text box is disabled or not
-   */
-  disabled: PropTypes.bool.description('Whether the text box is disabled or not'),
-
-  /**
-   * Max length for the text box
-   */
-  maxLength: PropTypes.number.description('Max length for the text box'),
-
-  /**
-   * Min length for the text box
-   */
-  minLength: PropTypes.number.description('Min length for the text box'),
-
-  /**
-   * Make the content of the text box fit the container or not
-   */
-  fluidWidth: PropTypes.bool.description('Make the content of the text box fit the container or not'),
-
-  /**
-   * Placeholder for the text box
-   */
-  placeholder: PropTypes.string.description('Placeholder for the text box'),
-
-  /**
-   * Default value once the component is initialized
-   */
-  value: PropTypes.string.description('Default value once the component is initialized'),
-
-  /**
-   * Whether the text box has error or not
-   */
-  hasError: PropTypes.bool.description('Whether the text box has error or not'),
-
-  /**
-   * Whether the text box is read only or not
-   */
-  readOnly: PropTypes.bool.description('Whether the text box is read only or not'),
-
-  /** html min prop for input */
-  min: PropTypes.number.description('html min prop for input'),
-
-  /** html max prop for input */
-  max: PropTypes.number.description('html max prop for input'),
-
-  /**
-   * Whether the text box is clearable or not
-   */
-  clearable: PropTypes.bool.description('Whether the text box is clearable or not'),
-
-  /**
-   * Component to be added at the left side of the text box
-   */
-  leftComponent: PropTypes.element.description('Component to be added at the left side of the text box'),
-
-  /**
-   * Component to be added at the right side of the text box
-   */
-  rightComponent: PropTypes.element.description('Component to be added at the right side of the text box'),
-
-  /**
-   * Whether the text box is required or not
-   */
-  required: PropTypes.bool.description('Whether the text box is required or not'),
-
-  /**
-   * [
-   *  'variant-default',
-   *  'variant-focus',
-   *  'variant-active',
-   *  'variant-disabled',
-   * ]
-   */
-  variant: PropTypes.string.description("variant-default','variant-focus','variant-active','variant-disabled'"),
-
-  /** html input type */
-  type: PropTypes.string.description('html input type'),
-
-  /** Internal ref */
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('internal ref'),
-
-  /** disableTooltip */
-  disableTooltip: PropTypes.bool.description('Whether to show a tooltip or not when text does not fit').defaultValue(true)
-};
-const DSTextBoxWithSchema = describe(DSTextBox);
-DSTextBoxWithSchema.propTypes = props;
-
-export { DSTextBoxWithSchema, DSTextBox as default };

package/esm/TextBox/index.js

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

package/esm/TimeInput/DSTimeInput.js

@@ -1,119 +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 _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'react';
-import { PropTypes, describe } from 'react-desc';
-import DSInput from '../Input/DSInput.js';
-import TimeInputImpl from './TimeInputImpl.js';
-export { default as TimeInputImpl } from './TimeInputImpl.js';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["onChange"];
-
-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 DSTimeInput = _ref => {
-  let {
-    containerProps = {},
-    innerRef,
-    className = '',
-    style = {},
-    onChange = () => null,
-    format,
-    value = '',
-    clearable = false,
-    disabled = false,
-    ariaLabel = 'Time input'
-  } = _ref;
-  return /*#__PURE__*/_jsx(DSInput, {
-    className: className,
-    clearable: clearable,
-    containerProps: containerProps,
-    customInputType: _ref2 => {
-      let {
-        onChange: inputOnChange
-      } = _ref2,
-          restInputProps = _objectWithoutProperties(_ref2, _excluded);
-
-      return /*#__PURE__*/jsx(TimeInputImpl, _objectSpread(_objectSpread({
-        "aria-label": ariaLabel,
-        disabled: disabled,
-        format: format,
-        onChange: time => inputOnChange(time)
-      }, restInputProps), {}, {
-        style: style
-      }));
-    },
-    disabled: disabled,
-    innerRef: innerRef,
-    isShowElipsisActive: false,
-    onChange: onChange,
-    onClear: () => onChange(null),
-    value: value
-  });
-};
-
-DSTimeInput.defaultProps = {
-  format: 'hh:mm:ss',
-  disabled: false,
-  clearable: true
-};
-const props = {
-  /** Injected props to wrapper element of component */
-  containerProps: PropTypes.object.description('Injected props to wrapper element of component'),
-
-  /**
-   * Allows a function that is triggered once the time input changes
-   */
-  onChange: PropTypes.func.description('Allows a function that is triggered once the time input changes'),
-
-  /** a11y aria label */
-  'aria-label': PropTypes.string.description('a11y aria label'),
-
-  /** style object for time input wrapper */
-  style: PropTypes.object.description('style object for time input wrapper'),
-
-  /** inner ref for time inpot wrapper */
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]).description('inner ref for time input wrapper'),
-
-  /** class for time input */
-  className: PropTypes.string.description('class for time input'),
-
-  /**
-   * Valid time format
-   */
-  format: PropTypes.string.description('Valid time format'),
-
-  /**
-   * Default value once the component is initialized
-   */
-  value: PropTypes.string.description('Default value once the component is initialized'),
-
-  /**
-   * Whether the time input is clearable or not
-   */
-  clearable: PropTypes.bool.description('Whether the time input is clearable or not'),
-
-  /**
-   * Whether the time input is disabled or not
-   */
-  disabled: PropTypes.bool.description('Whether the time input is disabled or not'),
-
-  /**
-   * Aria label
-   */
-  ariaLabel: PropTypes.string.description('Aria label')
-};
-const DSTimeInputWithSchema = describe(DSTimeInput);
-DSTimeInputWithSchema.propTypes = props;
-
-export { DSTimeInputWithSchema, DSTimeInput as default };