@elliemae/ds-search-field 2.2.0-alpha.3 → 2.2.0-next.2

package/cjs/DSSearchField.js

@@ -1,133 +1,169 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+'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
+  });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSSearchField_exports = {};
-__export(DSSearchField_exports, {
-  DSModalSearchField: () => import_DSSeachFieldImpl.DSModalSearchField,
-  DSSearchFieldWithSchema: () => DSSearchFieldWithSchema,
-  default: () => DSSearchField_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = __toESM(require("react-desc"));
-var import_ds_tabs = __toESM(require("@elliemae/ds-tabs"));
-var import_DSSeachFieldImpl = __toESM(require("./impl/DSSeachFieldImpl"));
-const DSSearchField = ({
-  containerProps = {},
-  onChange = () => null,
-  searchOptionLabel = "Advanced Search",
-  placeholder = "Select field",
-  modalSize = "x-large",
-  modalTitle = "Search Field ID",
-  tabsAnimated = true,
-  tabsEnableMouseEvents = true,
-  tabType = import_ds_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__ */ import_react.default.createElement(import_DSSeachFieldImpl.default, {
-  additionalInfo,
-  appElement,
-  searchable,
-  confirmLabel,
-  containerProps,
-  customDataGridOptions,
-  customDropdownOptions,
-  displayProperty,
-  dropdownOptions,
-  modalSize,
-  modalTitle,
-  modalType,
-  onChange,
-  onConfirmField,
-  onRejectField,
-  onTabChange,
-  placeholder,
-  rejectLabel,
-  searchFilters,
-  searchGrid,
-  searchOptionLabel,
-  tabData,
-  tabsAnimated,
-  tabsEnableMouseEvents,
-  tabType,
-  useLookupIndicator,
-  value
-});
+
 const props = {
-  searchable: import_react_desc.PropTypes.bool.description("Enable the user to search on combobox"),
-  containerProps: import_react_desc.PropTypes.object.description("inject props to wrapper"),
-  onChange: import_react_desc.PropTypes.func.description("change handler"),
-  searchOptionLabel: import_react_desc.PropTypes.string.description("search option label"),
-  placeholder: import_react_desc.PropTypes.string.description("placeholder for search input"),
-  modalSize: import_react_desc.PropTypes.oneOf(["x-large", "large", "medium"]).description("search modal size"),
-  modalTitle: import_react_desc.PropTypes.string.description("search modal title"),
-  tabsAnimated: import_react_desc.PropTypes.bool.description("animate modal tabs"),
-  tabsEnableMouseEvents: import_react_desc.PropTypes.bool.description("enable mouse event on tabs"),
-  tabType: import_react_desc.PropTypes.oneOf([import_ds_tabs.TabTypes.NORMAL, import_ds_tabs.TabTypes.SUBTABS]).description("tab types on modal"),
-  tabData: import_react_desc.PropTypes.array.description("data for modal tabs"),
-  searchGrid: import_react_desc.PropTypes.bool.description("use search grid"),
-  searchFilters: import_react_desc.PropTypes.bool.description("add search filters"),
-  confirmLabel: import_react_desc.PropTypes.string.description("confirm modal label"),
-  rejectLabel: import_react_desc.PropTypes.string.description("reject modal label"),
-  modalType: import_react_desc.PropTypes.oneOf(["alert", "confirm"]).description("modal type"),
-  onConfirmField: import_react_desc.PropTypes.func.description("on confirm handler"),
-  onRejectField: import_react_desc.PropTypes.func.description("on cancel handler"),
-  onTabChange: import_react_desc.PropTypes.func.description("tab change handler"),
-  appElement: import_react_desc.PropTypes.string.description("app element"),
-  value: import_react_desc.PropTypes.string.description("value for search"),
-  additionalInfo: import_react_desc.PropTypes.object.description("additional info"),
-  displayProperty: import_react_desc.PropTypes.string.description("display property"),
-  dropdownOptions: import_react_desc.PropTypes.arrayOf(import_react_desc.PropTypes.shape({
-    label: import_react_desc.PropTypes.string,
-    value: import_react_desc.PropTypes.string
-  })).description("options for dropdown"),
-  customDataGridOptions: import_react_desc.PropTypes.object.description("pass down props for datagrid in modal"),
-  customDropdownOptions: import_react_desc.PropTypes.object.description("custom props for dropdown"),
-  useLookupIndicator: import_react_desc.PropTypes.bool.description("enable lookup")
+  /*
+    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')
 };
-DSSearchField.propTypes = props;
-const DSSearchFieldWithSchema = (0, import_react_desc.describe)(DSSearchField);
+const DSSearchFieldWithSchema = reactDesc.describe(DSSearchField);
 DSSearchFieldWithSchema.propTypes = props;
-var DSSearchField_default = DSSearchField;
-module.exports = __toCommonJS(DSSearchField_exports);
-//# sourceMappingURL=DSSearchField.js.map
+
+exports.DSModalSearchField = ModalSearchField;
+exports.DSSearchFieldWithSchema = DSSearchFieldWithSchema;
+exports["default"] = DSSearchField;

package/cjs/impl/DSSeachFieldImpl.js

@@ -1,106 +1,129 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var DSSeachFieldImpl_exports = {};
-__export(DSSeachFieldImpl_exports, {
-  DSModalSearchField: () => import_ModalSearchField.default,
-  default: () => DSSeachFieldImpl_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_select = __toESM(require("react-select"));
-var import_ds_classnames = __toESM(require("@elliemae/ds-classnames"));
-var import_ds_form = __toESM(require("@elliemae/ds-form"));
-var import_ModalSearchField = __toESM(require("./components/ModalSearchField/ModalSearchField"));
-var import_AdvanceSearchOption = __toESM(require("./components/AdvanceSearchOption/AdvanceSearchOption"));
-var import_LookupIndicator = __toESM(require("./components/LookupIndicator/LookupIndicator"));
+'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",
+  className: 'advanced-search-option',
+  label: 'Advanced search',
+  value: 'search-field-advance-option',
   isAdvance: true
 };
-const { cssClassName, classNameElement, classNameModifier, classNameBlock } = (0, import_ds_classnames.convertPropToCssClassName)("query-builder-addon-search-field");
-class DSSearchFieldImpl extends import_react.Component {
+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;
+      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.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) => {
+
+    this.onKeyDown = event => {
       setTimeout(() => {
-        const { keycode } = event;
-        const { value } = this.props;
-        if (value && keycode === 13)
-          this.handleCloseModal();
+        const {
+          keycode
+        } = event;
+        const {
+          value
+        } = this.props;
+        if (value && keycode === 13) this.handleCloseModal();
       }, 0);
     };
+
     this.handleSelect = (selectedRow, rows) => {
-      let selected = selectedRow;
-      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 });
+      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;
+      const {
+        onConfirmField
+      } = this.props;
       this.onChange();
       this.handleCloseModal();
       onConfirmField();
     };
+
     this.handleReject = () => {
-      const { onRejectField } = this.props;
+      const {
+        onRejectField
+      } = this.props;
       this.handleCloseModal();
       onRejectField();
     };
+
     this.handleOpenModal = () => {
-      this.setState({ openModal: true });
+      this.setState({
+        openModal: true
+      });
     };
+
     this.handleCloseModal = () => this.setState({
       openModal: false,
       selected: [],
       additionalInfo: []
     });
+
     advanceOption.label = props.searchOptionLabel;
     this.state = {
       openModal: false,
@@ -108,6 +131,7 @@ class DSSearchFieldImpl extends import_react.Component {
       additionalInfo: []
     };
   }
+
   render() {
     const {
       placeholder,
@@ -135,78 +159,85 @@ class DSSearchFieldImpl extends import_react.Component {
       containerProps,
       searchable
     } = this.props;
-    const { openModal } = this.state;
+    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 };
+    if (additionalInfo && additionalInfo[displayProperty]) displayValue = additionalInfo[displayProperty];
+    const defaultoption = {
+      value,
+      label: displayValue
+    };
     const customComponents = {
-      Option: (props) => {
-        props.innerProps.className = "em-ds-combobox__option";
+      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 = `${props.innerProps.className} ${advanceOption.className}`;
+          props.innerProps.className = "".concat(props.innerProps.className, " ").concat(advanceOption.className);
         }
-        return /* @__PURE__ */ import_react.default.createElement(import_react_select.components.Option, {
-          ...props
-        });
+
+        return /*#__PURE__*/jsxRuntime.jsx(reactSelect.components.Option, _objectSpread({}, props));
       },
       IndicatorSeparator: () => null,
-      NoOptionsMessage: (props) => /* @__PURE__ */ import_react.default.createElement(import_AdvanceSearchOption.default, {
+      NoOptionsMessage: props => /*#__PURE__*/jsxRuntime.jsx(AdvanceSearchOption, _objectSpread({
         advanceSearchLabel: searchOptionLabel,
-        onAdvanceSearchClick: this.handleOpenModal,
-        ...props
-      })
+        onAdvanceSearchClick: this.handleOpenModal
+      }, props))
     };
+
     if (useLookupIndicator) {
       customComponents.DropdownIndicator = () => null;
     }
-    if (!options.find((o) => o.value === defaultoption.value)) {
+
+    if (!options.find(o => o.value === defaultoption.value)) {
       options = [defaultoption, ...options];
     }
-    return /* @__PURE__ */ import_react.default.createElement("div", {
-      ...containerProps,
-      className: `${cssClassName}`
-    }, /* @__PURE__ */ import_react.default.createElement("div", {
-      className: `${classNameBlock("container-selector")}`
-    }, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSComboBox2, {
-      className: `${classNameElement("dropdown-field-selector")}`,
-      components: customComponents,
-      onChange: this.onChangeDropdown,
-      onKeyDown: this.onKeyDown,
-      options,
-      value,
-      searchable,
-      ...customDropdownOptions
-    }), useLookupIndicator && /* @__PURE__ */ import_react.default.createElement(import_LookupIndicator.default, {
-      buttonType: "text",
-      className: `${classNameElement("btn-selector")} ${!value ? classNameModifier("btn-placeholder", "btn-selector") : ""}`,
-      onAdvanceSearchClick: this.handleOpenModal
-    })), /* @__PURE__ */ import_react.default.createElement(import_ModalSearchField.default, {
-      appElement,
-      confirmLabel,
-      customDataGridOptions,
-      handleSelect: this.handleSelect,
-      isOpen: openModal,
-      modalSize,
-      modalTitle,
-      modalType,
-      onClose: this.handleCloseModal,
-      onConfirmField: this.handleConfirm,
-      onRejectField: this.handleReject,
-      onTabChange,
-      placeholder,
-      rejectLabel,
-      searchFilters,
-      searchGrid,
-      tabData,
-      tabsAnimated,
-      tabsEnableMouseEvents,
-      tabType
+
+    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
+      })]
     }));
   }
+
 }
-var DSSeachFieldImpl_default = DSSearchFieldImpl;
-module.exports = __toCommonJS(DSSeachFieldImpl_exports);
-//# sourceMappingURL=DSSeachFieldImpl.js.map
+
+exports.DSModalSearchField = ModalSearchField;
+exports["default"] = DSSearchFieldImpl;