@elliemae/ds-search-field 2.3.1 → 3.0.0-alpha.3

package/dist/cjs/DSSearchField.js

@@ -0,0 +1,133 @@
+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 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 = require("react-desc");
+var import_ds_tabs = 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")
+};
+DSSearchField.propTypes = props;
+const DSSearchFieldWithSchema = (0, import_react_desc.describe)(DSSearchField);
+DSSearchFieldWithSchema.propTypes = props;
+var DSSearchField_default = DSSearchField;
+module.exports = __toCommonJS(DSSearchField_exports);
+//# sourceMappingURL=DSSearchField.js.map

package/dist/cjs/DSSearchField.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSSearchField.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { TabTypes } from '@elliemae/ds-tabs';\nimport DSSeachFieldImpl, { DSModalSearchField } from './impl/DSSeachFieldImpl';\n\nconst DSSearchField = ({\n  containerProps = {},\n  onChange = () => null,\n  searchOptionLabel = 'Advanced Search',\n  placeholder = 'Select field',\n  modalSize = 'x-large',\n  modalTitle = 'Search Field ID',\n  tabsAnimated = true,\n  tabsEnableMouseEvents = true,\n  tabType = TabTypes.NORMAL,\n  tabData = [],\n  searchGrid = false,\n  searchFilters = true,\n  confirmLabel = 'Apply',\n  rejectLabel = 'Cancel',\n  modalType = 'confirm',\n  onConfirmField = () => null,\n  onRejectField = () => null,\n  onTabChange = () => null,\n  appElement = '#root',\n  value = null,\n  additionalInfo = null,\n  displayProperty = 'name',\n  dropdownOptions = [],\n  customDataGridOptions = {},\n  customDropdownOptions = {},\n  useLookupIndicator = true,\n  searchable = false,\n}) => (\n  <DSSeachFieldImpl\n    additionalInfo={additionalInfo}\n    appElement={appElement}\n    searchable={searchable}\n    confirmLabel={confirmLabel}\n    containerProps={containerProps}\n    customDataGridOptions={customDataGridOptions}\n    customDropdownOptions={customDropdownOptions}\n    displayProperty={displayProperty}\n    dropdownOptions={dropdownOptions}\n    modalSize={modalSize}\n    modalTitle={modalTitle}\n    modalType={modalType}\n    onChange={onChange}\n    onConfirmField={onConfirmField}\n    onRejectField={onRejectField}\n    onTabChange={onTabChange}\n    placeholder={placeholder}\n    rejectLabel={rejectLabel}\n    searchFilters={searchFilters}\n    searchGrid={searchGrid}\n    searchOptionLabel={searchOptionLabel}\n    tabData={tabData}\n    tabsAnimated={tabsAnimated}\n    tabsEnableMouseEvents={tabsEnableMouseEvents}\n    tabType={tabType}\n    useLookupIndicator={useLookupIndicator}\n    value={value}\n  />\n);\n\nconst props = {\n  /*\n    Enable the user to search on combobox\n  */\n  searchable: PropTypes.bool.description('Enable the user to search on combobox'),\n  /** inject props to wrapper */\n  containerProps: PropTypes.object.description('inject props to wrapper'),\n  /** change handler */\n  onChange: PropTypes.func.description('change handler'),\n  /** search option label */\n  searchOptionLabel: PropTypes.string.description('search option label'),\n  /** placeholder for search input */\n  placeholder: PropTypes.string.description('placeholder for search input'),\n  /** search modal size */\n  modalSize: PropTypes.oneOf(['x-large', 'large', 'medium']).description('search modal size'),\n  /** search modal title */\n  modalTitle: PropTypes.string.description('search modal title'),\n  /** animate modal tabs */\n  tabsAnimated: PropTypes.bool.description('animate modal tabs'),\n  /** enable mouse event on tabs */\n  tabsEnableMouseEvents: PropTypes.bool.description('enable mouse event on tabs'),\n  /** tab types on modal */\n  tabType: PropTypes.oneOf([TabTypes.NORMAL, TabTypes.SUBTABS]).description('tab types on modal'),\n  /** data for modal tabs */\n  tabData: PropTypes.array.description('data for modal tabs'),\n  /** use search grid */\n  searchGrid: PropTypes.bool.description('use search grid'),\n  /** add search filters */\n  searchFilters: PropTypes.bool.description('add search filters'),\n  /** confirm modal label */\n  confirmLabel: PropTypes.string.description('confirm modal label'),\n  /** reject modal label */\n  rejectLabel: PropTypes.string.description('reject modal label'),\n  /** modal type */\n  modalType: PropTypes.oneOf(['alert', 'confirm']).description('modal type'),\n  /** on confirm handler */\n  onConfirmField: PropTypes.func.description('on confirm handler'),\n  /** on cancel handler */\n  onRejectField: PropTypes.func.description('on cancel handler'),\n  /** tab change handler */\n  onTabChange: PropTypes.func.description('tab change handler'),\n  /** app element */\n  appElement: PropTypes.string.description('app element'),\n  /** value for search */\n  value: PropTypes.string.description('value for search'),\n  /** additional info */\n  additionalInfo: PropTypes.object.description('additional info'),\n  /** display property */\n  displayProperty: PropTypes.string.description('display property'),\n  /** options for dropdown */\n  dropdownOptions: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string,\n      value: PropTypes.string,\n    }),\n  ).description('options for dropdown'),\n  /** pass down props for datagrid in modal */\n  customDataGridOptions: PropTypes.object.description('pass down props for datagrid in modal'),\n  /** custom props for dropdown */\n  customDropdownOptions: PropTypes.object.description('custom props for dropdown'),\n  /** enable lookup */\n  useLookupIndicator: PropTypes.bool.description('enable lookup'),\n};\n\nDSSearchField.propTypes = props;\n\nconst DSSearchFieldWithSchema = describe(DSSearchField);\nDSSearchFieldWithSchema.propTypes = props;\n\nexport { DSModalSearchField, DSSearchFieldWithSchema };\nexport default DSSearchField;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/impl/DSSeachFieldImpl.js

@@ -0,0 +1,224 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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 = require("react-select");
+var import_ds_classnames = require("@elliemae/ds-classnames");
+var import_ds_form = 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"));
+const advanceOption = {
+  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 {
+  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;
+      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) => {
+        props.innerProps.className = "em-ds-combobox__option";
+        if (props.data.isAdvance) {
+          props.innerProps.onClick = this.handleOpenModal;
+          props.innerProps.className = `${props.innerProps.className} ${advanceOption.className}`;
+        }
+        return /* @__PURE__ */ import_react.default.createElement(import_react_select.components.Option, __spreadValues({}, props));
+      },
+      IndicatorSeparator: () => null,
+      NoOptionsMessage: (props) => /* @__PURE__ */ import_react.default.createElement(import_AdvanceSearchOption.default, __spreadValues({
+        advanceSearchLabel: searchOptionLabel,
+        onAdvanceSearchClick: this.handleOpenModal
+      }, props))
+    };
+    if (useLookupIndicator) {
+      customComponents.DropdownIndicator = () => null;
+    }
+    if (!options.find((o) => o.value === defaultoption.value)) {
+      options = [defaultoption, ...options];
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({}, containerProps), {
+      className: `${cssClassName}`
+    }), /* @__PURE__ */ import_react.default.createElement("div", {
+      className: `${classNameBlock("container-selector")}`
+    }, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSComboBox2, __spreadValues({
+      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
+    }));
+  }
+}
+var DSSeachFieldImpl_default = DSSearchFieldImpl;
+module.exports = __toCommonJS(DSSeachFieldImpl_exports);
+//# sourceMappingURL=DSSeachFieldImpl.js.map

package/dist/cjs/impl/DSSeachFieldImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/impl/DSSeachFieldImpl.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable react/prop-types */\nimport React, { Component } from 'react';\nimport { components } from 'react-select';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSComboBox2 } from '@elliemae/ds-form';\n\nimport DSModalSearchField from './components/ModalSearchField/ModalSearchField';\nimport AdvanceSearchOption from './components/AdvanceSearchOption/AdvanceSearchOption';\nimport LookupIndicator from './components/LookupIndicator/LookupIndicator';\n\nconst advanceOption = {\n  className: 'advanced-search-option',\n  label: 'Advanced search',\n  value: 'search-field-advance-option',\n  isAdvance: true,\n};\nconst { cssClassName, classNameElement, classNameModifier, classNameBlock } = convertPropToCssClassName(\n  'query-builder-addon-search-field',\n);\n\nclass DSSearchFieldImpl extends Component {\n  constructor(props) {\n    super(props);\n    advanceOption.label = props.searchOptionLabel;\n    this.state = {\n      openModal: false,\n      selected: null,\n      additionalInfo: [],\n    };\n  }\n\n  onChange = () => {\n    const {\n      selected: id,\n      additionalInfo: [row],\n    } = this.state;\n    const { onChange } = this.props;\n    onChange(id, row);\n  };\n\n  onChangeDropdown = (value) => {\n    const { dropdownOptions } = this.props;\n    const selected = dropdownOptions.find((op) => op.value === value);\n    const { onChange, displayProperty } = this.props;\n    if (selected) onChange(value, { [displayProperty]: selected.label });\n  };\n\n  onKeyDown = (event) => {\n    setTimeout(() => {\n      const { keycode } = event;\n      const { value } = this.props;\n      if (value && keycode === 13) this.handleCloseModal();\n    }, 0);\n  };\n\n  handleSelect = (selectedRow, rows) => {\n    let selected = selectedRow;\n    // fix new datagrid callback format\n    if (!selected) return;\n    if (selected.id) selected = selected.id;\n    else if (selected[0] && selected[0].id) selected = selected[0].id;\n    const additionalInfo = rows.filter((row) => selected === row.id);\n    this.setState({ selected, additionalInfo });\n  };\n\n  handleConfirm = () => {\n    const { onConfirmField } = this.props;\n    this.onChange();\n    this.handleCloseModal();\n    onConfirmField();\n  };\n\n  handleReject = () => {\n    const { onRejectField } = this.props;\n    this.handleCloseModal();\n    onRejectField();\n  };\n\n  handleOpenModal = () => {\n    this.setState({ openModal: true });\n  };\n\n  handleCloseModal = () =>\n    this.setState({\n      openModal: false,\n      selected: [],\n      additionalInfo: [],\n    });\n\n  render() {\n    const {\n      placeholder,\n      modalTitle,\n      modalSize,\n      tabsAnimated,\n      tabsEnableMouseEvents,\n      tabType,\n      tabData,\n      searchFilters,\n      searchGrid,\n      confirmLabel,\n      rejectLabel,\n      modalType,\n      appElement,\n      value,\n      additionalInfo,\n      displayProperty,\n      dropdownOptions,\n      searchOptionLabel,\n      customDataGridOptions,\n      customDropdownOptions,\n      useLookupIndicator,\n      onTabChange,\n      containerProps,\n      searchable,\n    } = this.props;\n    const { openModal } = this.state;\n\n    let options = [...dropdownOptions, advanceOption];\n    let displayValue = !value ? placeholder : value;\n    if (additionalInfo && additionalInfo[displayProperty]) displayValue = additionalInfo[displayProperty];\n\n    const defaultoption = { value, label: displayValue };\n\n    const customComponents = {\n      Option: (props) => {\n        // return <AdvanceSearchOption onAdvanceSearchClick={this.handleOpenModal} />\n        props.innerProps.className = 'em-ds-combobox__option';\n        if (props.data.isAdvance) {\n          props.innerProps.onClick = this.handleOpenModal;\n          props.innerProps.className = `${props.innerProps.className} ${advanceOption.className}`;\n        }\n        return <components.Option {...props} />;\n      },\n      IndicatorSeparator: () => null,\n      NoOptionsMessage: (props) => (\n        <AdvanceSearchOption\n          advanceSearchLabel={searchOptionLabel}\n          onAdvanceSearchClick={this.handleOpenModal}\n          {...props}\n        />\n      ),\n    };\n    if (useLookupIndicator) {\n      customComponents.DropdownIndicator = () => null;\n    }\n\n    if (!options.find((o) => o.value === defaultoption.value)) {\n      options = [defaultoption, ...options];\n    }\n    return (\n      <div {...containerProps} className={`${cssClassName}`}>\n        <div className={`${classNameBlock('container-selector')}`}>\n          <DSComboBox2\n            className={`${classNameElement('dropdown-field-selector')}`}\n            components={customComponents}\n            onChange={this.onChangeDropdown}\n            onKeyDown={this.onKeyDown}\n            options={options}\n            value={value}\n            searchable={searchable}\n            {...customDropdownOptions}\n          />\n          {useLookupIndicator && (\n            <LookupIndicator\n              buttonType=\"text\"\n              className={`${classNameElement('btn-selector')} ${\n                !value ? classNameModifier('btn-placeholder', 'btn-selector') : ''\n              }`}\n              onAdvanceSearchClick={this.handleOpenModal}\n            />\n          )}\n        </div>\n        <DSModalSearchField\n          appElement={appElement}\n          confirmLabel={confirmLabel}\n          customDataGridOptions={customDataGridOptions}\n          handleSelect={this.handleSelect}\n          isOpen={openModal}\n          modalSize={modalSize}\n          modalTitle={modalTitle}\n          modalType={modalType}\n          onClose={this.handleCloseModal}\n          onConfirmField={this.handleConfirm}\n          onRejectField={this.handleReject}\n          onTabChange={onTabChange}\n          placeholder={placeholder}\n          rejectLabel={rejectLabel}\n          searchFilters={searchFilters}\n          searchGrid={searchGrid}\n          tabData={tabData}\n          tabsAnimated={tabsAnimated}\n          tabsEnableMouseEvents={tabsEnableMouseEvents}\n          tabType={tabType}\n        />\n      </div>\n    );\n  }\n}\n\nexport { DSModalSearchField };\nexport default DSSearchFieldImpl;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,44 @@
+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 AdvanceSearchOption_exports = {};
+__export(AdvanceSearchOption_exports, {
+  default: () => AdvanceSearchOption_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_button = __toESM(require("@elliemae/ds-button"));
+const AdvanceSearchOption = ({ advanceSearchLabel = "Advanced Search", onAdvanceSearchClick = () => null }) => /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
+  className: "advance-search-option-btn",
+  labelText: advanceSearchLabel,
+  onClick: onAdvanceSearchClick,
+  tabIndex: -1,
+  type: "button"
+});
+var AdvanceSearchOption_default = AdvanceSearchOption;
+module.exports = __toCommonJS(AdvanceSearchOption_exports);
+//# sourceMappingURL=AdvanceSearchOption.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/impl/components/AdvanceSearchOption/AdvanceSearchOption.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport DSButton from '@elliemae/ds-button';\n\nconst AdvanceSearchOption = ({ advanceSearchLabel = 'Advanced Search', onAdvanceSearchClick = () => null }) => (\n  <DSButton\n    className=\"advance-search-option-btn\"\n    labelText={advanceSearchLabel}\n    onClick={onAdvanceSearchClick}\n    tabIndex={-1}\n    type=\"button\"\n  />\n);\n\nexport default AdvanceSearchOption;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAqB;AAErB,MAAM,sBAAsB,CAAC,EAAE,qBAAqB,mBAAmB,uBAAuB,MAAM,WAClG,mDAAC,0BAAD;AAAA,EACE,WAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAK;AAAA;AAIT,IAAO,8BAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,50 @@
+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 LookupIndicator_exports = {};
+__export(LookupIndicator_exports, {
+  default: () => LookupIndicator_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_button = __toESM(require("@elliemae/ds-button"));
+const LookupIndicator = ({ onAdvanceSearchClick = () => null, className = "" }) => /* @__PURE__ */ import_react.default.createElement(import_ds_button.default, {
+  "data-testid": "ds-searchfield-search-btn",
+  buttonType: "secondary",
+  className,
+  icon: /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Search, null),
+  iconSize: "s",
+  onClick: (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onAdvanceSearchClick();
+  }
+});
+var LookupIndicator_default = LookupIndicator;
+module.exports = __toCommonJS(LookupIndicator_exports);
+//# sourceMappingURL=LookupIndicator.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/impl/components/LookupIndicator/LookupIndicator.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\n\nconst LookupIndicator = ({ onAdvanceSearchClick = () => null, className = '' }) => (\n  <DSButton\n    data-testid=\"ds-searchfield-search-btn\"\n    buttonType=\"secondary\"\n    className={className}\n    icon={<Search />}\n    iconSize=\"s\"\n    onClick={(e) => {\n      e.stopPropagation();\n      e.preventDefault();\n      onAdvanceSearchClick();\n    }}\n  />\n);\n\nexport default LookupIndicator;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAAuB;AACvB,uBAAqB;AAErB,MAAM,kBAAkB,CAAC,EAAE,uBAAuB,MAAM,MAAM,YAAY,SACxE,mDAAC,0BAAD;AAAA,EACE,eAAY;AAAA,EACZ,YAAW;AAAA,EACX;AAAA,EACA,MAAM,mDAAC,wBAAD;AAAA,EACN,UAAS;AAAA,EACT,SAAS,CAAC,MAAM;AACd,MAAE;AACF,MAAE;AACF;AAAA;AAAA;AAKN,IAAO,0BAAQ;",
+  "names": []
+}

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

@@ -0,0 +1,132 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 DataGridSearch_exports = {};
+__export(DataGridSearch_exports, {
+  default: () => DataGridSearch
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_toolbar = __toESM(require("@elliemae/ds-toolbar"));
+var import_ds_form = require("@elliemae/ds-form");
+var import_ds_datagrids = require("@elliemae/ds-datagrids");
+var import_uid = require("uid");
+class DataGridSearch extends import_react.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      filters: props.filters || []
+    };
+  }
+  handleSearch(...args) {
+    const { customDataGridOptions } = this.props;
+    const { property, value } = args[0];
+    const { filters } = this.state;
+    this.setState({
+      filters: [
+        ...filters,
+        {
+          group: property,
+          label: "All",
+          value,
+          id: (0, import_uid.uid)(16)
+        }
+      ]
+    });
+    if (customDataGridOptions.onFiltersChange)
+      customDataGridOptions.onFiltersChange(...args);
+  }
+  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 _a = customDataGridOptions, { onFiltersChange } = _a, restCustomDataGridOptions = __objRest(_a, ["onFiltersChange"]);
+    const { filters } = this.state;
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_ds_toolbar.default, {
+      withDepth: false
+    }, /* @__PURE__ */ import_react.default.createElement(import_ds_toolbar.ToolbarGroup, null, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSSearchBox, {
+      cleanOnSearch: true,
+      onSearch: this.handleSearch,
+      placeholder: "Search all"
+    }))), /* @__PURE__ */ import_react.default.createElement("div", {
+      className: "datagrid-tab-content"
+    }, /* @__PURE__ */ import_react.default.createElement(import_ds_datagrids.DSDataGrid, __spreadValues({
+      columns,
+      filters,
+      fluidHeight: true,
+      getData: boundFetchRows,
+      id,
+      onFiltersChange: this.handleFiltersChange,
+      onSelectRow: (rowId) => handleSelect(rowId, rows),
+      rows,
+      searchFilters,
+      searchGrid,
+      selectable: true
+    }, restCustomDataGridOptions))));
+  }
+}
+module.exports = __toCommonJS(DataGridSearch_exports);
+//# sourceMappingURL=DataGridSearch.js.map