@elliemae/ds-form 3.0.0-next.2 → 3.0.0-next.6

package/cjs/SearchBox/NavSearchBox.js

@@ -1,187 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var styled = require('styled-components');
-var reactDesc = require('react-desc');
-var dsIcons = require('@elliemae/ds-icons');
-var DSButton = require('@elliemae/ds-button');
-var DSTextBox = require('../TextBox/DSTextBox.js');
-var props = require('./props.js');
-var defaultProps = require('./defaultProps.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-
-var _StyledVerticalSepara, _VerticalSeparator;
-const StyledResultTracker = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-sbwvud-0"
-})(["padding:0 8px;color:#a2a9b6;white-space:nowrap;word-spacing:2px;"]);
-const StyledVerticalSeparator = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-sbwvud-1"
-})(["height:60%;border-right:1px solid #a2a9b6;"]);
-const StyledToolbarRightAddonsWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-sbwvud-2"
-})(["display:flex;align-items:center;justify-content:flex-end;"]);
-const NavBtn = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
-  componentId: "sc-sbwvud-3"
-})(["height:calc(100% - 2px);border:none;border-radius:", ";"], _ref => {
-  let {
-    last
-  } = _ref;
-  return last ? '2px  2px 0px 0px' : '0px';
-});
-
-const RightButtonsGroup = props => {
-  const {
-    onNext,
-    onPrevious,
-    onClear,
-    hideNavs,
-    showClear
-  } = props;
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [!hideNavs && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/_jsx__default["default"](NavBtn, {
-        buttonType: "text",
-        containerProps: {
-          'data-testid': 'ds-navsearchbox-next'
-        },
-        icon: /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronDown, {
-          color: ['brand-primary', '800']
-        }),
-        onClick: onNext
-      }), /*#__PURE__*/_jsx__default["default"](NavBtn, {
-        buttonType: "text",
-        containerProps: {
-          'data-testid': 'ds-navsearchbox-prev'
-        },
-        icon: /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronUp, {
-          color: ['brand-primary', '800']
-        }),
-        onClick: onPrevious
-      })]
-    }), showClear ? /*#__PURE__*/_jsx__default["default"](NavBtn, {
-      containerProps: {
-        'data-testid': 'ds-navsearchbox-clear'
-      },
-      buttonType: "text",
-      icon: /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
-        color: ['brand-primary', '800']
-      }),
-      onClick: onClear,
-      last: true
-    }) : /*#__PURE__*/_jsx__default["default"](NavBtn, {
-      containerProps: {
-        'data-testid': 'ds-navsearchbox-clear'
-      },
-      buttonType: "text",
-      icon: /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
-        color: ['brand-primary', '800']
-      }),
-      last: true
-    })]
-  });
-};
-
-const ResultTracker = props => {
-  const {
-    currentResultIndex,
-    totalResults
-  } = props;
-  if (currentResultIndex === -1 && !totalResults) return null;
-  if (currentResultIndex === -1 && totalResults) return /*#__PURE__*/_jsx__default["default"](StyledResultTracker, {}, void 0, totalResults);
-  return /*#__PURE__*/_jsx__default["default"](StyledResultTracker, {}, void 0, "".concat(currentResultIndex + 1, " / ").concat(totalResults));
-};
-
-const VerticalSeparator = () => _StyledVerticalSepara || (_StyledVerticalSepara = /*#__PURE__*/_jsx__default["default"](StyledVerticalSeparator, {}));
-
-const ToolbarRightAddons = props => {
-  const {
-    onNext,
-    onPrevious,
-    onClear,
-    currentResultIndex,
-    totalResults,
-    showClear
-  } = props;
-  return /*#__PURE__*/_jsx__default["default"](StyledToolbarRightAddonsWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](ResultTracker, {
-    currentResultIndex: currentResultIndex,
-    totalResults: totalResults
-  }), currentResultIndex !== -1 || totalResults ? _VerticalSeparator || (_VerticalSeparator = /*#__PURE__*/_jsx__default["default"](VerticalSeparator, {})) : null, /*#__PURE__*/_jsx__default["default"](RightButtonsGroup, {
-    onNext: onNext,
-    hideNavs: currentResultIndex === -1 && !totalResults,
-    onPrevious: onPrevious,
-    showClear: showClear,
-    onClear: onClear
-  }));
-};
-
-const NavSearchBox = props => {
-  const {
-    currentResultIndex,
-    onChange,
-    onClear,
-    onNext,
-    onPrevious,
-    totalResults,
-    value,
-    onBlur,
-    placeholder,
-    autoFocus,
-    innerRef
-  } = props;
-
-  const handleChange = e => {
-    if (onChange) onChange(e.target.value);
-  };
-
-  const handleKeyDown = e => {
-    // SHIFT + ENTER
-    if (e.shiftKey) {
-      if (e.key === 'Enter' || e.keyCode === 13) {
-        onPrevious();
-      }
-    } // ESCAPE
-    else if (e.key === 'Escape' || e.keyCode === 27) {
-      onClear();
-    } // ENTER
-    else if (e.key === 'Enter' || e.keyCode === 13) {
-      onNext();
-    }
-  };
-
-  return /*#__PURE__*/_jsx__default["default"](DSTextBox["default"], {
-    onChange: handleChange,
-    containerProps: {
-      'data-testid': 'ds-nav-searchbox-input'
-    },
-    onBlur: onBlur,
-    onKeyDown: handleKeyDown,
-    placeholder: placeholder,
-    value: value,
-    autoFocus: autoFocus,
-    innerRef: innerRef,
-    rightComponent: /*#__PURE__*/_jsx__default["default"](ToolbarRightAddons, {
-      showClear: !!value,
-      onNext: onNext,
-      onPrevious: onPrevious,
-      onClear: onClear,
-      currentResultIndex: currentResultIndex,
-      totalResults: totalResults
-    })
-  });
-};
-
-NavSearchBox.defaultProps = defaultProps.navSearchBoxDefaultProps;
-const DSNavSearchBoxWithSchema = reactDesc.describe(NavSearchBox);
-DSNavSearchBoxWithSchema.propTypes = props.navSearchBoxProps;
-
-exports.DSNavSearchBoxWithSchema = DSNavSearchBoxWithSchema;
-exports.NavSearchBox = NavSearchBox;

package/cjs/SearchBox/SButton.js

@@ -1,34 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var styled = require('styled-components');
-var dsSystem = require('@elliemae/ds-system');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const Button = /*#__PURE__*/styled__default["default"].button.withConfig({
-  componentId: "sc-15udc15-0"
-})(["all:unset;position:absolute;height:calc(100% - 2px);width:28px;top:1px;right:1px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;cursor:pointer;z-index:1;svg{fill:", ";}&:disabled{color:#5d6775;cursor:not-allowed;svg{fill:#5d6775;}}&:focus{", "}"], props => props.theme.colors.brand['600'], dsSystem.focus());
-
-const SButton = _ref => {
-  let {
-    icon,
-    disabled,
-    onClick,
-    dataTestid = "ds-searchbox-button"
-  } = _ref;
-  return /*#__PURE__*/_jsx__default["default"](Button, {
-    "data-testid": dataTestid,
-    onClick: onClick,
-    disabled: disabled,
-    type: "button"
-  }, void 0, icon);
-};
-
-exports.SButton = SButton;

package/cjs/SearchBox/SearchBoxToggle.js

@@ -1,78 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-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 styled = require('styled-components');
-var dsIcons = require('@elliemae/ds-icons');
-var DSButton = require('@elliemae/ds-button');
-var DSSearchBox = require('./DSSearchBox.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 _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-
-var _Search;
-
-const _excluded = ["onSearchButtonClick", "width"];
-
-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 SEARCH_BUTTON_WIDTH = 26;
-const SearchWrap = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-xt33wm-0"
-})(["transition:width 200ms ease;width:", "px;height:0;", " ", ""], SEARCH_BUTTON_WIDTH, props => !props.show ? "\n        opacity:0;\n\n        & * {\n          width: ".concat(SEARCH_BUTTON_WIDTH, "px;\n          height: 0;\n          border: 0;\n        }\n      ") : '', props => props.isOpen ? "width: ".concat(props.width, ";opacity: 1;height: auto;") : ''); // eslint-disable-next-line react/prop-types
-
-const SearchBoxToggle = _ref => {
-  let {
-    onSearchButtonClick,
-    width
-  } = _ref,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
-
-  const [isOpen, setOpen] = React.useState(false);
-  const [show, setShow] = React.useState(true);
-  const computedWidth = typeof width === 'number' ? "".concat(width, "px") : width;
-
-  const button = /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
-    onClick: () => {
-      setOpen(true);
-    },
-    buttonType: "text",
-    icon: _Search || (_Search = /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {}))
-  });
-
-  return /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, show && !isOpen && button, /*#__PURE__*/_jsx__default["default"](SearchWrap, {
-    show: !show || isOpen,
-    isOpen: isOpen,
-    width: computedWidth,
-    onTransitionEnd: () => {
-      setShow(!isOpen);
-    }
-  }, void 0, /*#__PURE__*/jsxRuntime.jsx(DSSearchBox["default"], _objectSpread(_objectSpread({}, rest), {}, {
-    onSearchButtonClick: () => {
-      onSearchButtonClick();
-      setOpen(false);
-    }
-  }))));
-};
-
-SearchBoxToggle.defaultProps = {
-  onSearchButtonClick: () => null,
-  width: 300
-};
-
-module.exports = SearchBoxToggle;

package/cjs/SearchBox/defaultProps.js

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const defaultProps = {
-  className: '',
-  clearable: false,
-  clearOnSearch: false,
-  containerProps: {},
-  disableButton: false,
-  disabled: false,
-  innerRef: undefined,
-  onBlur: () => null,
-  onChange: () => null,
-  onKeyUp: () => null,
-  onSearch: () => null,
-  onSearchButtonClick: () => null,
-  onClearButtonClick: () => null,
-  placeholder: 'Search all',
-  property: 'all',
-  readOnly: false,
-  searchOnEnter: true,
-  showIcon: true,
-  style: {},
-  value: undefined
-};
-const navSearchBoxDefaultProps = {
-  placeholder: 'Search...',
-  currentResultIndex: -1
-};
-
-exports.defaultProps = defaultProps;
-exports.navSearchBoxDefaultProps = navSearchBoxDefaultProps;

package/cjs/SearchBox/index.js

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var SearchBoxToggle = require('./SearchBoxToggle.js');
-var DSSearchBox = require('./DSSearchBox.js');
-var NavSearchBox = require('./NavSearchBox.js');
-
-
-
-exports.SearchBoxToggle = SearchBoxToggle;
-exports.SearchBoxWithSchema = DSSearchBox.SearchBoxWithSchema;
-exports["default"] = DSSearchBox["default"];
-exports.DSNavSearchBox = NavSearchBox.NavSearchBox;
-exports.DSNavSearchBoxWithSchema = NavSearchBox.DSNavSearchBoxWithSchema;

package/cjs/SearchBox/props.js

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

package/cjs/SearchBox/styled.js

@@ -1,16 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var DSTextBox = require('../TextBox/DSTextBox.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const SearchBoxTextBox = /*#__PURE__*/styled__default["default"](DSTextBox["default"]).withConfig({
-  componentId: "sc-44ofm-0"
-})(["padding-right:33px;"]);
-
-exports.SearchBoxTextBox = SearchBoxTextBox;

package/cjs/SearchBox/useSearch.js

@@ -1,104 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/web.dom-collections.iterator.js');
-var React = require('react');
-var dsUtilities = require('@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] = React.useState(params.value);
-  const debouncedSearch = React.useCallback(dsUtilities.debounce(handleSearch, 200), []); // update state if prop changes
-
-  React.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
-  };
-}
-
-exports.useSearch = useSearch;