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

package/cjs/SearchBox/NavSearchBox.js

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

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

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

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

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

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

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

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