@elliemae/ds-search-field 2.0.0-next.0 → 2.0.0-next.13

package/cjs/DSSearchField.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
 var reactDesc = require('react-desc');
-var Tabs = require('@elliemae/ds-basic/Tabs');
+var dsTabs = require('@elliemae/ds-tabs');
 var DSSeachFieldImpl = require('./impl/DSSeachFieldImpl.js');
 var ModalSearchField = require('./impl/components/ModalSearchField/ModalSearchField.js');
 
@@ -13,63 +13,66 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const DSSearchField = ({
-  containerProps = {},
-  onChange = () => null,
-  searchOptionLabel = 'Advanced Search',
-  placeholder = 'Select field',
-  modalSize = 'x-large',
-  modalTitle = 'Search Field ID',
-  tabsAnimated = true,
-  tabsEnableMouseEvents = true,
-  tabType = Tabs.TabTypes.NORMAL,
-  tabData = [],
-  searchGrid = false,
-  searchFilters = true,
-  confirmLabel = 'Apply',
-  rejectLabel = 'Cancel',
-  modalType = 'confirm',
-  onConfirmField = () => null,
-  onRejectField = () => null,
-  onTabChange = () => null,
-  appElement = '#root',
-  value = null,
-  additionalInfo = null,
-  displayProperty = 'name',
-  dropdownOptions = [],
-  customDataGridOptions = {},
-  customDropdownOptions = {},
-  useLookupIndicator = true,
-  searchable = false
-}) => /*#__PURE__*/_jsx__default["default"](DSSeachFieldImpl["default"], {
-  additionalInfo: additionalInfo,
-  appElement: appElement,
-  searchable: searchable,
-  confirmLabel: confirmLabel,
-  containerProps: containerProps,
-  customDataGridOptions: customDataGridOptions,
-  customDropdownOptions: customDropdownOptions,
-  displayProperty: displayProperty,
-  dropdownOptions: dropdownOptions,
-  modalSize: modalSize,
-  modalTitle: modalTitle,
-  modalType: modalType,
-  onChange: onChange,
-  onConfirmField: onConfirmField,
-  onRejectField: onRejectField,
-  onTabChange: onTabChange,
-  placeholder: placeholder,
-  rejectLabel: rejectLabel,
-  searchFilters: searchFilters,
-  searchGrid: searchGrid,
-  searchOptionLabel: searchOptionLabel,
-  tabData: tabData,
-  tabsAnimated: tabsAnimated,
-  tabsEnableMouseEvents: tabsEnableMouseEvents,
-  tabType: tabType,
-  useLookupIndicator: useLookupIndicator,
-  value: value
-});
+const DSSearchField = _ref => {
+  let {
+    containerProps = {},
+    onChange = () => null,
+    searchOptionLabel = 'Advanced Search',
+    placeholder = 'Select field',
+    modalSize = 'x-large',
+    modalTitle = 'Search Field ID',
+    tabsAnimated = true,
+    tabsEnableMouseEvents = true,
+    tabType = dsTabs.TabTypes.NORMAL,
+    tabData = [],
+    searchGrid = false,
+    searchFilters = true,
+    confirmLabel = 'Apply',
+    rejectLabel = 'Cancel',
+    modalType = 'confirm',
+    onConfirmField = () => null,
+    onRejectField = () => null,
+    onTabChange = () => null,
+    appElement = '#root',
+    value = null,
+    additionalInfo = null,
+    displayProperty = 'name',
+    dropdownOptions = [],
+    customDataGridOptions = {},
+    customDropdownOptions = {},
+    useLookupIndicator = true,
+    searchable = false
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](DSSeachFieldImpl["default"], {
+    additionalInfo: additionalInfo,
+    appElement: appElement,
+    searchable: searchable,
+    confirmLabel: confirmLabel,
+    containerProps: containerProps,
+    customDataGridOptions: customDataGridOptions,
+    customDropdownOptions: customDropdownOptions,
+    displayProperty: displayProperty,
+    dropdownOptions: dropdownOptions,
+    modalSize: modalSize,
+    modalTitle: modalTitle,
+    modalType: modalType,
+    onChange: onChange,
+    onConfirmField: onConfirmField,
+    onRejectField: onRejectField,
+    onTabChange: onTabChange,
+    placeholder: placeholder,
+    rejectLabel: rejectLabel,
+    searchFilters: searchFilters,
+    searchGrid: searchGrid,
+    searchOptionLabel: searchOptionLabel,
+    tabData: tabData,
+    tabsAnimated: tabsAnimated,
+    tabsEnableMouseEvents: tabsEnableMouseEvents,
+    tabType: tabType,
+    useLookupIndicator: useLookupIndicator,
+    value: value
+  });
+};
 
 const props = {
   /*
@@ -102,7 +105,7 @@ const props = {
   tabsEnableMouseEvents: reactDesc.PropTypes.bool.description('enable mouse event on tabs'),
 
   /** tab types on modal */
-  tabType: reactDesc.PropTypes.oneOf([Tabs.TabTypes.NORMAL, Tabs.TabTypes.SUBTABS]).description('tab types on modal'),
+  tabType: reactDesc.PropTypes.oneOf([dsTabs.TabTypes.NORMAL, dsTabs.TabTypes.SUBTABS]).description('tab types on modal'),
 
   /** data for modal tabs */
   tabData: reactDesc.PropTypes.array.description('data for modal tabs'),

package/cjs/impl/DSSeachFieldImpl.js

@@ -4,10 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/esnext.async-iterator.filter.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 reactSelect = require('react-select');
 var dsClassnames = require('@elliemae/ds-classnames');
-var ComboBox = require('@elliemae/ds-basic/form/ComboBox');
+var dsForm = require('@elliemae/ds-form');
 var ModalSearchField = require('./components/ModalSearchField/ModalSearchField.js');
 var AdvanceSearchOption = require('./components/AdvanceSearchOption/AdvanceSearchOption.js');
 var LookupIndicator = require('./components/LookupIndicator/LookupIndicator.js');
@@ -168,7 +176,7 @@ class DSSearchFieldImpl extends react.Component {
 
         if (props.data.isAdvance) {
           props.innerProps.onClick = this.handleOpenModal;
-          props.innerProps.className = `${props.innerProps.className} ${advanceOption.className}`;
+          props.innerProps.className = "".concat(props.innerProps.className, " ").concat(advanceOption.className);
         }
 
         return /*#__PURE__*/jsxRuntime.jsx(reactSelect.components.Option, _objectSpread({}, props));
@@ -189,11 +197,11 @@ class DSSearchFieldImpl extends react.Component {
     }
 
     return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
-      className: `${cssClassName}`,
+      className: "".concat(cssClassName),
       children: [/*#__PURE__*/_jsx__default["default"]("div", {
-        className: `${classNameBlock('container-selector')}`
-      }, void 0, /*#__PURE__*/jsxRuntime.jsx(ComboBox.DSComboBox2, _objectSpread({
-        className: `${classNameElement('dropdown-field-selector')}`,
+        className: "".concat(classNameBlock('container-selector'))
+      }, void 0, /*#__PURE__*/jsxRuntime.jsx(dsForm.DSComboBox2, _objectSpread({
+        className: "".concat(classNameElement('dropdown-field-selector')),
         components: customComponents,
         onChange: this.onChangeDropdown,
         onKeyDown: this.onKeyDown,
@@ -202,7 +210,7 @@ class DSSearchFieldImpl extends react.Component {
         searchable: searchable
       }, customDropdownOptions)), useLookupIndicator && /*#__PURE__*/_jsx__default["default"](LookupIndicator, {
         buttonType: "text",
-        className: `${classNameElement('btn-selector')} ${!value ? classNameModifier('btn-placeholder', 'btn-selector') : ''}`,
+        className: "".concat(classNameElement('btn-selector'), " ").concat(!value ? classNameModifier('btn-placeholder', 'btn-selector') : ''),
         onAdvanceSearchClick: this.handleOpenModal
       })), /*#__PURE__*/_jsx__default["default"](ModalSearchField, {
         appElement: appElement,

package/cjs/impl/components/AdvanceSearchOption/AdvanceSearchOption.js

@@ -2,22 +2,25 @@
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
-var DSButton = require('@elliemae/ds-basic/Button');
+var DSButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
-const AdvanceSearchOption = ({
-  advanceSearchLabel = 'Advanced Search',
-  onAdvanceSearchClick = () => null
-}) => /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
-  className: "advance-search-option-btn",
-  labelText: advanceSearchLabel,
-  onClick: onAdvanceSearchClick,
-  tabIndex: -1,
-  type: "button"
-});
+const AdvanceSearchOption = _ref => {
+  let {
+    advanceSearchLabel = 'Advanced Search',
+    onAdvanceSearchClick = () => null
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+    className: "advance-search-option-btn",
+    labelText: advanceSearchLabel,
+    onClick: onAdvanceSearchClick,
+    tabIndex: -1,
+    type: "button"
+  });
+};
 
 module.exports = AdvanceSearchOption;

package/cjs/impl/components/LookupIndicator/LookupIndicator.js

@@ -2,31 +2,33 @@
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
-var Search = require('@elliemae/ds-icons/Search');
-var DSButton = require('@elliemae/ds-basic/Button');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
 var _Search;
 
-const LookupIndicator = ({
-  onAdvanceSearchClick = () => null,
-  className = ''
-}) => /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
-  "data-testid": "ds-searchfield-search-btn",
-  buttonType: "secondary",
-  className: className,
-  icon: _Search || (_Search = /*#__PURE__*/_jsx__default["default"](Search__default["default"], {})),
-  iconSize: "s",
-  onClick: e => {
-    e.stopPropagation();
-    e.preventDefault();
-    onAdvanceSearchClick();
-  }
-});
+const LookupIndicator = _ref => {
+  let {
+    onAdvanceSearchClick = () => null,
+    className = ''
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+    "data-testid": "ds-searchfield-search-btn",
+    buttonType: "secondary",
+    className: className,
+    icon: _Search || (_Search = /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {})),
+    iconSize: "s",
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
+      onAdvanceSearchClick();
+    }
+  });
+};
 
 module.exports = LookupIndicator;

package/cjs/impl/components/ModalSearchField/DataGridSearch.js

@@ -3,9 +3,15 @@
 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 DSToolbar = require('@elliemae/ds-basic/Toolbar');
-var DSSearchBox = require('@elliemae/ds-basic/form/SearchBox');
+var DSToolbar = require('@elliemae/ds-toolbar');
+var dsForm = require('@elliemae/ds-form');
 var dsDatagrids = require('@elliemae/ds-datagrids');
 var uid = require('uid');
 var jsxRuntime = require('react/jsx-runtime');
@@ -16,7 +22,6 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var DSToolbar__default = /*#__PURE__*/_interopDefaultLegacy(DSToolbar);
-var DSSearchBox__default = /*#__PURE__*/_interopDefaultLegacy(DSSearchBox);
 
 const _excluded = ["onFiltersChange"];
 
@@ -33,14 +38,14 @@ class DataGridSearch extends react.Component {
     this.handleFiltersChange = this.handleFiltersChange.bind(this);
   }
 
-  handleSearch(...args) {
+  handleSearch() {
     const {
       customDataGridOptions
     } = this.props;
     const {
       property,
       value
-    } = args[0];
+    } = arguments.length <= 0 ? undefined : arguments[0];
     const {
       filters
     } = this.state;
@@ -52,7 +57,7 @@ class DataGridSearch extends react.Component {
         id: uid.uid(16)
       }]
     });
-    if (customDataGridOptions.onFiltersChange) customDataGridOptions.onFiltersChange(...args);
+    if (customDataGridOptions.onFiltersChange) customDataGridOptions.onFiltersChange(...arguments);
   }
 
   handleFiltersChange(nextFilters) {
@@ -85,7 +90,7 @@ class DataGridSearch extends react.Component {
     return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/_jsx__default["default"](DSToolbar__default["default"], {
         withDepth: false
-      }, void 0, /*#__PURE__*/_jsx__default["default"](DSToolbar.ToolbarGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSSearchBox__default["default"], {
+      }, void 0, /*#__PURE__*/_jsx__default["default"](DSToolbar.ToolbarGroup, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSSearchBox, {
         cleanOnSearch: true,
         onSearch: this.handleSearch,
         placeholder: "Search all"

package/cjs/impl/components/ModalSearchField/ModalSearchField.js

@@ -1,9 +1,11 @@
 'use strict';
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('react');
 var DSModal = require('@elliemae/ds-modal');
-var Tabs = require('@elliemae/ds-basic/Tabs');
+var dsTabs = require('@elliemae/ds-tabs');
 var DataGridSearch = require('./DataGridSearch.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -11,65 +13,71 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
 
-const ModalSearchField = ({
-  isOpen = false,
-  onClose = () => null,
-  modalTitle = 'Search Field ID',
-  modalSize = 'x-large',
-  tabsAnimated = true,
-  tabsEnableMouseEvents = true,
-  tabType = Tabs.TabTypes.NORMAL,
-  tabData = [],
-  searchFilters = true,
-  searchGrid = false,
-  confirmLabel = 'Apply',
-  rejectLabel = 'Cancel',
-  modalType = 'confirm',
-  onConfirmField = () => null,
-  onRejectField = () => null,
-  handleSelect = () => null,
-  onTabChange = () => null,
-  appElement = null,
-  customDataGridOptions = {}
-}) => /*#__PURE__*/_jsx__default["default"](DSModal__default["default"], {
-  dataTestId: "ds-searchfield-modal",
-  appElement: appElement,
-  centered: false,
-  className: "modal-search-field",
-  confirmLabel: confirmLabel,
-  isOpen: isOpen,
-  modalTitle: modalTitle,
-  modalType: modalType,
-  onClose: onClose,
-  onConfirm: onConfirmField,
-  onReject: onRejectField,
-  rejectLabel: rejectLabel,
-  size: modalSize
-}, void 0, tabData.length > 0 && /*#__PURE__*/_jsx__default["default"](Tabs.DSTabs, {
-  animated: tabsAnimated,
-  enableMouseEvents: tabsEnableMouseEvents,
-  onlyRenderActiveTab: true,
-  onTabChange: onTabChange,
-  type: tabType
-}, void 0, tabData.map(({
-  tabId,
-  tabTitle,
-  columns,
-  rows,
-  boundFetchRows
-}) => /*#__PURE__*/_jsx__default["default"](Tabs.DSTab, {
-  className: "tab-content",
-  tabId: tabId,
-  title: tabTitle
-}, tabId, /*#__PURE__*/_jsx__default["default"](DataGridSearch, {
-  boundFetchRows: boundFetchRows,
-  columns: columns,
-  customDataGridOptions: customDataGridOptions,
-  handleSelect: handleSelect,
-  id: `datagrid_search_field_${tabId}`,
-  rows: rows,
-  searchFilters: searchFilters,
-  searchGrid: searchGrid
-})))));
+const ModalSearchField = _ref => {
+  let {
+    isOpen = false,
+    onClose = () => null,
+    modalTitle = 'Search Field ID',
+    modalSize = 'x-large',
+    tabsAnimated = true,
+    tabsEnableMouseEvents = true,
+    tabType = dsTabs.TabTypes.NORMAL,
+    tabData = [],
+    searchFilters = true,
+    searchGrid = false,
+    confirmLabel = 'Apply',
+    rejectLabel = 'Cancel',
+    modalType = 'confirm',
+    onConfirmField = () => null,
+    onRejectField = () => null,
+    handleSelect = () => null,
+    onTabChange = () => null,
+    appElement = null,
+    customDataGridOptions = {}
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](DSModal__default["default"], {
+    dataTestId: "ds-searchfield-modal",
+    appElement: appElement,
+    centered: false,
+    className: "modal-search-field",
+    confirmLabel: confirmLabel,
+    isOpen: isOpen,
+    modalTitle: modalTitle,
+    modalType: modalType,
+    onClose: onClose,
+    onConfirm: onConfirmField,
+    onReject: onRejectField,
+    rejectLabel: rejectLabel,
+    size: modalSize
+  }, void 0, tabData.length > 0 && /*#__PURE__*/_jsx__default["default"](dsTabs.DSTabs, {
+    animated: tabsAnimated,
+    enableMouseEvents: tabsEnableMouseEvents,
+    onlyRenderActiveTab: true,
+    onTabChange: onTabChange,
+    type: tabType
+  }, void 0, tabData.map(_ref2 => {
+    let {
+      tabId,
+      tabTitle,
+      columns,
+      rows,
+      boundFetchRows
+    } = _ref2;
+    return /*#__PURE__*/_jsx__default["default"](dsTabs.DSTab, {
+      className: "tab-content",
+      tabId: tabId,
+      title: tabTitle
+    }, tabId, /*#__PURE__*/_jsx__default["default"](DataGridSearch, {
+      boundFetchRows: boundFetchRows,
+      columns: columns,
+      customDataGridOptions: customDataGridOptions,
+      handleSelect: handleSelect,
+      id: "datagrid_search_field_".concat(tabId),
+      rows: rows,
+      searchFilters: searchFilters,
+      searchGrid: searchGrid
+    }));
+  })));
+};
 
 module.exports = ModalSearchField;

package/esm/DSSearchField.js

@@ -1,67 +1,70 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
-import { TabTypes } from '@elliemae/ds-basic/Tabs';
+import { TabTypes } from '@elliemae/ds-tabs';
 import DSSearchFieldImpl from './impl/DSSeachFieldImpl.js';
 export { default as DSModalSearchField } from './impl/components/ModalSearchField/ModalSearchField.js';
 
-const DSSearchField = ({
-  containerProps = {},
-  onChange = () => null,
-  searchOptionLabel = 'Advanced Search',
-  placeholder = 'Select field',
-  modalSize = 'x-large',
-  modalTitle = 'Search Field ID',
-  tabsAnimated = true,
-  tabsEnableMouseEvents = true,
-  tabType = TabTypes.NORMAL,
-  tabData = [],
-  searchGrid = false,
-  searchFilters = true,
-  confirmLabel = 'Apply',
-  rejectLabel = 'Cancel',
-  modalType = 'confirm',
-  onConfirmField = () => null,
-  onRejectField = () => null,
-  onTabChange = () => null,
-  appElement = '#root',
-  value = null,
-  additionalInfo = null,
-  displayProperty = 'name',
-  dropdownOptions = [],
-  customDataGridOptions = {},
-  customDropdownOptions = {},
-  useLookupIndicator = true,
-  searchable = false
-}) => /*#__PURE__*/_jsx(DSSearchFieldImpl, {
-  additionalInfo: additionalInfo,
-  appElement: appElement,
-  searchable: searchable,
-  confirmLabel: confirmLabel,
-  containerProps: containerProps,
-  customDataGridOptions: customDataGridOptions,
-  customDropdownOptions: customDropdownOptions,
-  displayProperty: displayProperty,
-  dropdownOptions: dropdownOptions,
-  modalSize: modalSize,
-  modalTitle: modalTitle,
-  modalType: modalType,
-  onChange: onChange,
-  onConfirmField: onConfirmField,
-  onRejectField: onRejectField,
-  onTabChange: onTabChange,
-  placeholder: placeholder,
-  rejectLabel: rejectLabel,
-  searchFilters: searchFilters,
-  searchGrid: searchGrid,
-  searchOptionLabel: searchOptionLabel,
-  tabData: tabData,
-  tabsAnimated: tabsAnimated,
-  tabsEnableMouseEvents: tabsEnableMouseEvents,
-  tabType: tabType,
-  useLookupIndicator: useLookupIndicator,
-  value: value
-});
+const DSSearchField = _ref => {
+  let {
+    containerProps = {},
+    onChange = () => null,
+    searchOptionLabel = 'Advanced Search',
+    placeholder = 'Select field',
+    modalSize = 'x-large',
+    modalTitle = 'Search Field ID',
+    tabsAnimated = true,
+    tabsEnableMouseEvents = true,
+    tabType = TabTypes.NORMAL,
+    tabData = [],
+    searchGrid = false,
+    searchFilters = true,
+    confirmLabel = 'Apply',
+    rejectLabel = 'Cancel',
+    modalType = 'confirm',
+    onConfirmField = () => null,
+    onRejectField = () => null,
+    onTabChange = () => null,
+    appElement = '#root',
+    value = null,
+    additionalInfo = null,
+    displayProperty = 'name',
+    dropdownOptions = [],
+    customDataGridOptions = {},
+    customDropdownOptions = {},
+    useLookupIndicator = true,
+    searchable = false
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSSearchFieldImpl, {
+    additionalInfo: additionalInfo,
+    appElement: appElement,
+    searchable: searchable,
+    confirmLabel: confirmLabel,
+    containerProps: containerProps,
+    customDataGridOptions: customDataGridOptions,
+    customDropdownOptions: customDropdownOptions,
+    displayProperty: displayProperty,
+    dropdownOptions: dropdownOptions,
+    modalSize: modalSize,
+    modalTitle: modalTitle,
+    modalType: modalType,
+    onChange: onChange,
+    onConfirmField: onConfirmField,
+    onRejectField: onRejectField,
+    onTabChange: onTabChange,
+    placeholder: placeholder,
+    rejectLabel: rejectLabel,
+    searchFilters: searchFilters,
+    searchGrid: searchGrid,
+    searchOptionLabel: searchOptionLabel,
+    tabData: tabData,
+    tabsAnimated: tabsAnimated,
+    tabsEnableMouseEvents: tabsEnableMouseEvents,
+    tabType: tabType,
+    useLookupIndicator: useLookupIndicator,
+    value: value
+  });
+};
 
 const props = {
   /*

package/esm/impl/DSSeachFieldImpl.js

@@ -1,9 +1,17 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.filter.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 { Component } from 'react';
 import { components } from 'react-select';
 import { convertPropToCssClassName } from '@elliemae/ds-classnames';
-import { DSComboBox2 } from '@elliemae/ds-basic/form/ComboBox';
+import { DSComboBox2 } from '@elliemae/ds-form';
 import ModalSearchField from './components/ModalSearchField/ModalSearchField.js';
 export { default as DSModalSearchField } from './components/ModalSearchField/ModalSearchField.js';
 import AdvanceSearchOption from './components/AdvanceSearchOption/AdvanceSearchOption.js';
@@ -160,7 +168,7 @@ class DSSearchFieldImpl extends Component {
 
         if (props.data.isAdvance) {
           props.innerProps.onClick = this.handleOpenModal;
-          props.innerProps.className = `${props.innerProps.className} ${advanceOption.className}`;
+          props.innerProps.className = "".concat(props.innerProps.className, " ").concat(advanceOption.className);
         }
 
         return /*#__PURE__*/jsx(components.Option, _objectSpread({}, props));
@@ -181,11 +189,11 @@ class DSSearchFieldImpl extends Component {
     }
 
     return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
-      className: `${cssClassName}`,
+      className: "".concat(cssClassName),
       children: [/*#__PURE__*/_jsx("div", {
-        className: `${classNameBlock('container-selector')}`
+        className: "".concat(classNameBlock('container-selector'))
       }, void 0, /*#__PURE__*/jsx(DSComboBox2, _objectSpread({
-        className: `${classNameElement('dropdown-field-selector')}`,
+        className: "".concat(classNameElement('dropdown-field-selector')),
         components: customComponents,
         onChange: this.onChangeDropdown,
         onKeyDown: this.onKeyDown,
@@ -194,7 +202,7 @@ class DSSearchFieldImpl extends Component {
         searchable: searchable
       }, customDropdownOptions)), useLookupIndicator && /*#__PURE__*/_jsx(LookupIndicator, {
         buttonType: "text",
-        className: `${classNameElement('btn-selector')} ${!value ? classNameModifier('btn-placeholder', 'btn-selector') : ''}`,
+        className: "".concat(classNameElement('btn-selector'), " ").concat(!value ? classNameModifier('btn-placeholder', 'btn-selector') : ''),
         onAdvanceSearchClick: this.handleOpenModal
       })), /*#__PURE__*/_jsx(ModalSearchField, {
         appElement: appElement,

package/esm/impl/components/AdvanceSearchOption/AdvanceSearchOption.js

@@ -1,16 +1,19 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import DSButton from '@elliemae/ds-basic/Button';
+import DSButton from '@elliemae/ds-button';
 
-const AdvanceSearchOption = ({
-  advanceSearchLabel = 'Advanced Search',
-  onAdvanceSearchClick = () => null
-}) => /*#__PURE__*/_jsx(DSButton, {
-  className: "advance-search-option-btn",
-  labelText: advanceSearchLabel,
-  onClick: onAdvanceSearchClick,
-  tabIndex: -1,
-  type: "button"
-});
+const AdvanceSearchOption = _ref => {
+  let {
+    advanceSearchLabel = 'Advanced Search',
+    onAdvanceSearchClick = () => null
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSButton, {
+    className: "advance-search-option-btn",
+    labelText: advanceSearchLabel,
+    onClick: onAdvanceSearchClick,
+    tabIndex: -1,
+    type: "button"
+  });
+};
 
 export { AdvanceSearchOption as default };

package/esm/impl/components/LookupIndicator/LookupIndicator.js

@@ -1,24 +1,27 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import Search from '@elliemae/ds-icons/Search';
-import DSButton from '@elliemae/ds-basic/Button';
+import { Search } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
 
 var _Search;
 
-const LookupIndicator = ({
-  onAdvanceSearchClick = () => null,
-  className = ''
-}) => /*#__PURE__*/_jsx(DSButton, {
-  "data-testid": "ds-searchfield-search-btn",
-  buttonType: "secondary",
-  className: className,
-  icon: _Search || (_Search = /*#__PURE__*/_jsx(Search, {})),
-  iconSize: "s",
-  onClick: e => {
-    e.stopPropagation();
-    e.preventDefault();
-    onAdvanceSearchClick();
-  }
-});
+const LookupIndicator = _ref => {
+  let {
+    onAdvanceSearchClick = () => null,
+    className = ''
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSButton, {
+    "data-testid": "ds-searchfield-search-btn",
+    buttonType: "secondary",
+    className: className,
+    icon: _Search || (_Search = /*#__PURE__*/_jsx(Search, {})),
+    iconSize: "s",
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
+      onAdvanceSearchClick();
+    }
+  });
+};
 
 export { LookupIndicator as default };

package/esm/impl/components/ModalSearchField/DataGridSearch.js

@@ -1,9 +1,15 @@
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { Component } from 'react';
-import DSToolbar, { ToolbarGroup } from '@elliemae/ds-basic/Toolbar';
-import DSSearchBox from '@elliemae/ds-basic/form/SearchBox';
+import DSToolbar, { ToolbarGroup } from '@elliemae/ds-toolbar';
+import { DSSearchBox } from '@elliemae/ds-form';
 import { DSDataGrid } from '@elliemae/ds-datagrids';
 import { uid } from 'uid';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -23,14 +29,14 @@ class DataGridSearch extends Component {
     this.handleFiltersChange = this.handleFiltersChange.bind(this);
   }
 
-  handleSearch(...args) {
+  handleSearch() {
     const {
       customDataGridOptions
     } = this.props;
     const {
       property,
       value
-    } = args[0];
+    } = arguments.length <= 0 ? undefined : arguments[0];
     const {
       filters
     } = this.state;
@@ -42,7 +48,7 @@ class DataGridSearch extends Component {
         id: uid(16)
       }]
     });
-    if (customDataGridOptions.onFiltersChange) customDataGridOptions.onFiltersChange(...args);
+    if (customDataGridOptions.onFiltersChange) customDataGridOptions.onFiltersChange(...arguments);
   }
 
   handleFiltersChange(nextFilters) {

package/esm/impl/components/ModalSearchField/ModalSearchField.js

@@ -1,68 +1,76 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import 'react';
 import DSModal from '@elliemae/ds-modal';
-import { TabTypes, DSTabs, DSTab } from '@elliemae/ds-basic/Tabs';
+import { TabTypes, DSTabs, DSTab } from '@elliemae/ds-tabs';
 import DataGridSearch from './DataGridSearch.js';
 
-const ModalSearchField = ({
-  isOpen = false,
-  onClose = () => null,
-  modalTitle = 'Search Field ID',
-  modalSize = 'x-large',
-  tabsAnimated = true,
-  tabsEnableMouseEvents = true,
-  tabType = TabTypes.NORMAL,
-  tabData = [],
-  searchFilters = true,
-  searchGrid = false,
-  confirmLabel = 'Apply',
-  rejectLabel = 'Cancel',
-  modalType = 'confirm',
-  onConfirmField = () => null,
-  onRejectField = () => null,
-  handleSelect = () => null,
-  onTabChange = () => null,
-  appElement = null,
-  customDataGridOptions = {}
-}) => /*#__PURE__*/_jsx(DSModal, {
-  dataTestId: "ds-searchfield-modal",
-  appElement: appElement,
-  centered: false,
-  className: "modal-search-field",
-  confirmLabel: confirmLabel,
-  isOpen: isOpen,
-  modalTitle: modalTitle,
-  modalType: modalType,
-  onClose: onClose,
-  onConfirm: onConfirmField,
-  onReject: onRejectField,
-  rejectLabel: rejectLabel,
-  size: modalSize
-}, void 0, tabData.length > 0 && /*#__PURE__*/_jsx(DSTabs, {
-  animated: tabsAnimated,
-  enableMouseEvents: tabsEnableMouseEvents,
-  onlyRenderActiveTab: true,
-  onTabChange: onTabChange,
-  type: tabType
-}, void 0, tabData.map(({
-  tabId,
-  tabTitle,
-  columns,
-  rows,
-  boundFetchRows
-}) => /*#__PURE__*/_jsx(DSTab, {
-  className: "tab-content",
-  tabId: tabId,
-  title: tabTitle
-}, tabId, /*#__PURE__*/_jsx(DataGridSearch, {
-  boundFetchRows: boundFetchRows,
-  columns: columns,
-  customDataGridOptions: customDataGridOptions,
-  handleSelect: handleSelect,
-  id: `datagrid_search_field_${tabId}`,
-  rows: rows,
-  searchFilters: searchFilters,
-  searchGrid: searchGrid
-})))));
+const ModalSearchField = _ref => {
+  let {
+    isOpen = false,
+    onClose = () => null,
+    modalTitle = 'Search Field ID',
+    modalSize = 'x-large',
+    tabsAnimated = true,
+    tabsEnableMouseEvents = true,
+    tabType = TabTypes.NORMAL,
+    tabData = [],
+    searchFilters = true,
+    searchGrid = false,
+    confirmLabel = 'Apply',
+    rejectLabel = 'Cancel',
+    modalType = 'confirm',
+    onConfirmField = () => null,
+    onRejectField = () => null,
+    handleSelect = () => null,
+    onTabChange = () => null,
+    appElement = null,
+    customDataGridOptions = {}
+  } = _ref;
+  return /*#__PURE__*/_jsx(DSModal, {
+    dataTestId: "ds-searchfield-modal",
+    appElement: appElement,
+    centered: false,
+    className: "modal-search-field",
+    confirmLabel: confirmLabel,
+    isOpen: isOpen,
+    modalTitle: modalTitle,
+    modalType: modalType,
+    onClose: onClose,
+    onConfirm: onConfirmField,
+    onReject: onRejectField,
+    rejectLabel: rejectLabel,
+    size: modalSize
+  }, void 0, tabData.length > 0 && /*#__PURE__*/_jsx(DSTabs, {
+    animated: tabsAnimated,
+    enableMouseEvents: tabsEnableMouseEvents,
+    onlyRenderActiveTab: true,
+    onTabChange: onTabChange,
+    type: tabType
+  }, void 0, tabData.map(_ref2 => {
+    let {
+      tabId,
+      tabTitle,
+      columns,
+      rows,
+      boundFetchRows
+    } = _ref2;
+    return /*#__PURE__*/_jsx(DSTab, {
+      className: "tab-content",
+      tabId: tabId,
+      title: tabTitle
+    }, tabId, /*#__PURE__*/_jsx(DataGridSearch, {
+      boundFetchRows: boundFetchRows,
+      columns: columns,
+      customDataGridOptions: customDataGridOptions,
+      handleSelect: handleSelect,
+      id: "datagrid_search_field_".concat(tabId),
+      rows: rows,
+      searchFilters: searchFilters,
+      searchGrid: searchGrid
+    }));
+  })));
+};
 
 export { ModalSearchField as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-search-field",
-  "version": "2.0.0-next.0",
+  "version": "2.0.0-next.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Search Field",
   "module": "./esm/index.js",
@@ -56,19 +56,14 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-basic": "2.0.0-next.0",
-    "@elliemae/ds-classnames": "2.0.0-next.0",
-    "@elliemae/ds-utilities": "2.0.0-next.0",
-    "react-edit": "~6.4.1",
-    "react-scroll-sync": "~0.8.0",
-    "react-select": "4.3.1",
-    "reactabular": "~8.3.0",
-    "reactabular-resizable": "~8.18.0",
-    "reactabular-table": "~8.14.0",
-    "searchtabular": "~1.9.0",
-    "sortabular": "~1.6.0",
-    "table-resolver": "~4.1.1",
-    "treetabular": "~3.6.0",
+    "@elliemae/ds-basic": "2.0.0-next.13",
+    "@elliemae/ds-classnames": "2.0.0-next.13",
+    "@elliemae/ds-datagrids": "2.0.0-next.13",
+    "@elliemae/ds-icons": "2.0.0-next.13",
+    "@elliemae/ds-modal": "2.0.0-next.13",
+    "@elliemae/ds-utilities": "2.0.0-next.13",
+    "react-desc": "~4.1.3",
+    "react-select": "~4.3.0",
     "uid": "~2.0.0"
   },
   "publishConfig": {

package/types/DSSearchField.d.ts

@@ -10,7 +10,7 @@ declare const DSSearchField: {
         modalTitle?: string | undefined;
         tabsAnimated?: boolean | undefined;
         tabsEnableMouseEvents?: boolean | undefined;
-        tabType?: any;
+        tabType?: string | undefined;
         tabData?: never[] | undefined;
         searchGrid?: boolean | undefined;
         searchFilters?: boolean | undefined;

package/types/impl/components/AdvanceSearchOption/AdvanceSearchOption.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const AdvanceSearchOption: ({ advanceSearchLabel, onAdvanceSearchClick, }: {
+declare const AdvanceSearchOption: ({ advanceSearchLabel, onAdvanceSearchClick }: {
     advanceSearchLabel?: string | undefined;
     onAdvanceSearchClick?: (() => null) | undefined;
 }) => JSX.Element;

package/types/impl/components/LookupIndicator/LookupIndicator.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const LookupIndicator: ({ onAdvanceSearchClick, className, }: {
+declare const LookupIndicator: ({ onAdvanceSearchClick, className }: {
     onAdvanceSearchClick?: (() => null) | undefined;
     className?: string | undefined;
 }) => JSX.Element;

package/types/impl/components/ModalSearchField/ModalSearchField.d.ts

@@ -6,7 +6,7 @@ declare const ModalSearchField: ({ isOpen, onClose, modalTitle, modalSize, tabsA
     modalSize?: string | undefined;
     tabsAnimated?: boolean | undefined;
     tabsEnableMouseEvents?: boolean | undefined;
-    tabType?: any;
+    tabType?: string | undefined;
     tabData?: never[] | undefined;
     searchFilters?: boolean | undefined;
     searchGrid?: boolean | undefined;

package/cjs/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "commonjs",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}

package/esm/package.json

@@ -1,7 +0,0 @@
-{
-  "type": "module",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ]
-}