@elliemae/ds-search-field 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/DSSearchField.js

@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var dsTabs = require('@elliemae/ds-tabs');
+var DSSeachFieldImpl = require('./impl/DSSeachFieldImpl.js');
+var ModalSearchField = require('./impl/components/ModalSearchField/ModalSearchField.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+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 = {
+  /*
+    Enable the user to search on combobox
+  */
+  searchable: reactDesc.PropTypes.bool.description('Enable the user to search on combobox'),
+
+  /** inject props to wrapper */
+  containerProps: reactDesc.PropTypes.object.description('inject props to wrapper'),
+
+  /** change handler */
+  onChange: reactDesc.PropTypes.func.description('change handler'),
+
+  /** search option label */
+  searchOptionLabel: reactDesc.PropTypes.string.description('search option label'),
+
+  /** placeholder for search input */
+  placeholder: reactDesc.PropTypes.string.description('placeholder for search input'),
+
+  /** search modal size */
+  modalSize: reactDesc.PropTypes.oneOf(['x-large', 'large', 'medium']).description('search modal size'),
+
+  /** search modal title */
+  modalTitle: reactDesc.PropTypes.string.description('search modal title'),
+
+  /** animate modal tabs */
+  tabsAnimated: reactDesc.PropTypes.bool.description('animate modal tabs'),
+
+  /** enable mouse event on tabs */
+  tabsEnableMouseEvents: reactDesc.PropTypes.bool.description('enable mouse event on tabs'),
+
+  /** 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'),
+
+  /** use search grid */
+  searchGrid: reactDesc.PropTypes.bool.description('use search grid'),
+
+  /** add search filters */
+  searchFilters: reactDesc.PropTypes.bool.description('add search filters'),
+
+  /** confirm modal label */
+  confirmLabel: reactDesc.PropTypes.string.description('confirm modal label'),
+
+  /** reject modal label */
+  rejectLabel: reactDesc.PropTypes.string.description('reject modal label'),
+
+  /** modal type */
+  modalType: reactDesc.PropTypes.oneOf(['alert', 'confirm']).description('modal type'),
+
+  /** on confirm handler */
+  onConfirmField: reactDesc.PropTypes.func.description('on confirm handler'),
+
+  /** on cancel handler */
+  onRejectField: reactDesc.PropTypes.func.description('on cancel handler'),
+
+  /** tab change handler */
+  onTabChange: reactDesc.PropTypes.func.description('tab change handler'),
+
+  /** app element */
+  appElement: reactDesc.PropTypes.string.description('app element'),
+
+  /** value for search */
+  value: reactDesc.PropTypes.string.description('value for search'),
+
+  /** additional info */
+  additionalInfo: reactDesc.PropTypes.object.description('additional info'),
+
+  /** display property */
+  displayProperty: reactDesc.PropTypes.string.description('display property'),
+
+  /** options for dropdown */
+  dropdownOptions: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
+    label: reactDesc.PropTypes.string,
+    value: reactDesc.PropTypes.string
+  })).description('options for dropdown'),
+
+  /** pass down props for datagrid in modal */
+  customDataGridOptions: reactDesc.PropTypes.object.description('pass down props for datagrid in modal'),
+
+  /** custom props for dropdown */
+  customDropdownOptions: reactDesc.PropTypes.object.description('custom props for dropdown'),
+
+  /** enable lookup */
+  useLookupIndicator: reactDesc.PropTypes.bool.description('enable lookup')
+};
+const DSSearchFieldWithSchema = reactDesc.describe(DSSearchField);
+DSSearchFieldWithSchema.propTypes = props;
+
+exports.DSModalSearchField = ModalSearchField;
+exports.DSSearchFieldWithSchema = DSSearchFieldWithSchema;
+exports["default"] = DSSearchField;

package/cjs/impl/DSSeachFieldImpl.js

@@ -0,0 +1,243 @@
+'use strict';
+
+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 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');
+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 _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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 advanceOption = {
+  className: 'advanced-search-option',
+  label: 'Advanced search',
+  value: 'search-field-advance-option',
+  isAdvance: true
+};
+const {
+  cssClassName,
+  classNameElement,
+  classNameModifier,
+  classNameBlock
+} = dsClassnames.convertPropToCssClassName('query-builder-addon-search-field');
+
+class DSSearchFieldImpl extends react.Component {
+  constructor(props) {
+    super(props);
+
+    this.onChange = () => {
+      const {
+        selected: id,
+        additionalInfo: [row]
+      } = this.state;
+      const {
+        onChange
+      } = this.props;
+      onChange(id, row);
+    };
+
+    this.onChangeDropdown = value => {
+      const {
+        dropdownOptions
+      } = this.props;
+      const selected = dropdownOptions.find(op => op.value === value);
+      const {
+        onChange,
+        displayProperty
+      } = this.props;
+      if (selected) onChange(value, {
+        [displayProperty]: selected.label
+      });
+    };
+
+    this.onKeyDown = event => {
+      setTimeout(() => {
+        const {
+          keycode
+        } = event;
+        const {
+          value
+        } = this.props;
+        if (value && keycode === 13) this.handleCloseModal();
+      }, 0);
+    };
+
+    this.handleSelect = (selectedRow, rows) => {
+      let selected = selectedRow; // fix new datagrid callback format
+
+      if (!selected) return;
+      if (selected.id) selected = selected.id;else if (selected[0] && selected[0].id) selected = selected[0].id;
+      const additionalInfo = rows.filter(row => selected === row.id);
+      this.setState({
+        selected,
+        additionalInfo
+      });
+    };
+
+    this.handleConfirm = () => {
+      const {
+        onConfirmField
+      } = this.props;
+      this.onChange();
+      this.handleCloseModal();
+      onConfirmField();
+    };
+
+    this.handleReject = () => {
+      const {
+        onRejectField
+      } = this.props;
+      this.handleCloseModal();
+      onRejectField();
+    };
+
+    this.handleOpenModal = () => {
+      this.setState({
+        openModal: true
+      });
+    };
+
+    this.handleCloseModal = () => this.setState({
+      openModal: false,
+      selected: [],
+      additionalInfo: []
+    });
+
+    advanceOption.label = props.searchOptionLabel;
+    this.state = {
+      openModal: false,
+      selected: null,
+      additionalInfo: []
+    };
+  }
+
+  render() {
+    const {
+      placeholder,
+      modalTitle,
+      modalSize,
+      tabsAnimated,
+      tabsEnableMouseEvents,
+      tabType,
+      tabData,
+      searchFilters,
+      searchGrid,
+      confirmLabel,
+      rejectLabel,
+      modalType,
+      appElement,
+      value,
+      additionalInfo,
+      displayProperty,
+      dropdownOptions,
+      searchOptionLabel,
+      customDataGridOptions,
+      customDropdownOptions,
+      useLookupIndicator,
+      onTabChange,
+      containerProps,
+      searchable
+    } = this.props;
+    const {
+      openModal
+    } = this.state;
+    let options = [...dropdownOptions, advanceOption];
+    let displayValue = !value ? placeholder : value;
+    if (additionalInfo && additionalInfo[displayProperty]) displayValue = additionalInfo[displayProperty];
+    const defaultoption = {
+      value,
+      label: displayValue
+    };
+    const customComponents = {
+      Option: props => {
+        // return <AdvanceSearchOption onAdvanceSearchClick={this.handleOpenModal} />
+        props.innerProps.className = 'em-ds-combobox__option';
+
+        if (props.data.isAdvance) {
+          props.innerProps.onClick = this.handleOpenModal;
+          props.innerProps.className = "".concat(props.innerProps.className, " ").concat(advanceOption.className);
+        }
+
+        return /*#__PURE__*/jsxRuntime.jsx(reactSelect.components.Option, _objectSpread({}, props));
+      },
+      IndicatorSeparator: () => null,
+      NoOptionsMessage: props => /*#__PURE__*/jsxRuntime.jsx(AdvanceSearchOption, _objectSpread({
+        advanceSearchLabel: searchOptionLabel,
+        onAdvanceSearchClick: this.handleOpenModal
+      }, props))
+    };
+
+    if (useLookupIndicator) {
+      customComponents.DropdownIndicator = () => null;
+    }
+
+    if (!options.find(o => o.value === defaultoption.value)) {
+      options = [defaultoption, ...options];
+    }
+
+    return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+      className: "".concat(cssClassName),
+      children: [/*#__PURE__*/_jsx__default["default"]("div", {
+        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,
+        options: options,
+        value: value,
+        searchable: searchable
+      }, customDropdownOptions)), useLookupIndicator && /*#__PURE__*/_jsx__default["default"](LookupIndicator, {
+        buttonType: "text",
+        className: "".concat(classNameElement('btn-selector'), " ").concat(!value ? classNameModifier('btn-placeholder', 'btn-selector') : ''),
+        onAdvanceSearchClick: this.handleOpenModal
+      })), /*#__PURE__*/_jsx__default["default"](ModalSearchField, {
+        appElement: appElement,
+        confirmLabel: confirmLabel,
+        customDataGridOptions: customDataGridOptions,
+        handleSelect: this.handleSelect,
+        isOpen: openModal,
+        modalSize: modalSize,
+        modalTitle: modalTitle,
+        modalType: modalType,
+        onClose: this.handleCloseModal,
+        onConfirmField: this.handleConfirm,
+        onRejectField: this.handleReject,
+        onTabChange: onTabChange,
+        placeholder: placeholder,
+        rejectLabel: rejectLabel,
+        searchFilters: searchFilters,
+        searchGrid: searchGrid,
+        tabData: tabData,
+        tabsAnimated: tabsAnimated,
+        tabsEnableMouseEvents: tabsEnableMouseEvents,
+        tabType: tabType
+      })]
+    }));
+  }
+
+}
+
+exports.DSModalSearchField = ModalSearchField;
+exports["default"] = DSSearchFieldImpl;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+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 = _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

@@ -0,0 +1,34 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+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 DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _Search;
+
+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

@@ -0,0 +1,117 @@
+'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 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');
+
+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 DSToolbar__default = /*#__PURE__*/_interopDefaultLegacy(DSToolbar);
+
+const _excluded = ["onFiltersChange"];
+
+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; }
+class DataGridSearch extends react.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      filters: props.filters || []
+    };
+    this.handleSearch = this.handleSearch.bind(this);
+    this.handleFiltersChange = this.handleFiltersChange.bind(this);
+  }
+
+  handleSearch() {
+    const {
+      customDataGridOptions
+    } = this.props;
+    const {
+      property,
+      value
+    } = arguments.length <= 0 ? undefined : arguments[0];
+    const {
+      filters
+    } = this.state;
+    this.setState({
+      filters: [...filters, {
+        group: property,
+        label: 'All',
+        value,
+        id: uid.uid(16)
+      }]
+    });
+    if (customDataGridOptions.onFiltersChange) customDataGridOptions.onFiltersChange(...arguments);
+  }
+
+  handleFiltersChange(nextFilters) {
+    const {
+      customDataGridOptions
+    } = this.props;
+    this.setState({
+      filters: nextFilters
+    });
+    if (customDataGridOptions.onFiltersChange) customDataGridOptions.onFiltersChange(nextFilters);
+  }
+
+  render() {
+    const {
+      id,
+      rows,
+      columns,
+      boundFetchRows,
+      searchFilters,
+      searchGrid = true,
+      customDataGridOptions,
+      handleSelect
+    } = this.props;
+
+    const restCustomDataGridOptions = _objectWithoutProperties__default["default"](customDataGridOptions, _excluded);
+
+    const {
+      filters
+    } = this.state;
+    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"](dsForm.DSSearchBox, {
+        cleanOnSearch: true,
+        onSearch: this.handleSearch,
+        placeholder: "Search all"
+      }))), /*#__PURE__*/_jsx__default["default"]("div", {
+        className: "datagrid-tab-content"
+      }, void 0, /*#__PURE__*/jsxRuntime.jsx(dsDatagrids.DSDataGrid, _objectSpread({
+        columns: columns,
+        filters: filters,
+        fluidHeight: true,
+        getData: boundFetchRows,
+        id: id,
+        onFiltersChange: this.handleFiltersChange,
+        onSelectRow: rowId => handleSelect(rowId, rows),
+        rows: rows,
+        searchFilters: searchFilters,
+        searchGrid: searchGrid,
+        selectable: true
+      }, restCustomDataGridOptions)))]
+    });
+  }
+
+}
+
+module.exports = DataGridSearch;

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

@@ -0,0 +1,83 @@
+'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 dsTabs = require('@elliemae/ds-tabs');
+var DataGridSearch = require('./DataGridSearch.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var DSModal__default = /*#__PURE__*/_interopDefaultLegacy(DSModal);
+
+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/cjs/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSSearchField = require('./DSSearchField.js');
+var ModalSearchField = require('./impl/components/ModalSearchField/ModalSearchField.js');
+
+
+
+exports.DSSearchFieldWithSchema = DSSearchField.DSSearchFieldWithSchema;
+exports["default"] = DSSearchField["default"];
+exports.DSModalSearchField = ModalSearchField;