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

package/esm/DSSearchField.js

@@ -1,159 +1,104 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import { PropTypes, describe } from 'react-desc';
-import { TabTypes } from '@elliemae/ds-tabs';
-import DSSearchFieldImpl from './impl/DSSeachFieldImpl.js';
-export { default as DSModalSearchField } from './impl/components/ModalSearchField/ModalSearchField.js';
-
-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
-  });
-};
-
+import * as React from "react";
+import React2 from "react";
+import { describe, PropTypes } from "react-desc";
+import { TabTypes } from "@elliemae/ds-tabs";
+import DSSeachFieldImpl, { DSModalSearchField } from "./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 = 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__ */ React2.createElement(DSSeachFieldImpl, {
+  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 = {
-  /*
-    Enable the user to search on combobox
-  */
-  searchable: PropTypes.bool.description('Enable the user to search on combobox'),
-
-  /** inject props to wrapper */
-  containerProps: PropTypes.object.description('inject props to wrapper'),
-
-  /** change handler */
-  onChange: PropTypes.func.description('change handler'),
-
-  /** search option label */
-  searchOptionLabel: PropTypes.string.description('search option label'),
-
-  /** placeholder for search input */
-  placeholder: PropTypes.string.description('placeholder for search input'),
-
-  /** search modal size */
-  modalSize: PropTypes.oneOf(['x-large', 'large', 'medium']).description('search modal size'),
-
-  /** search modal title */
-  modalTitle: PropTypes.string.description('search modal title'),
-
-  /** animate modal tabs */
-  tabsAnimated: PropTypes.bool.description('animate modal tabs'),
-
-  /** enable mouse event on tabs */
-  tabsEnableMouseEvents: PropTypes.bool.description('enable mouse event on tabs'),
-
-  /** tab types on modal */
-  tabType: PropTypes.oneOf([TabTypes.NORMAL, TabTypes.SUBTABS]).description('tab types on modal'),
-
-  /** data for modal tabs */
-  tabData: PropTypes.array.description('data for modal tabs'),
-
-  /** use search grid */
-  searchGrid: PropTypes.bool.description('use search grid'),
-
-  /** add search filters */
-  searchFilters: PropTypes.bool.description('add search filters'),
-
-  /** confirm modal label */
-  confirmLabel: PropTypes.string.description('confirm modal label'),
-
-  /** reject modal label */
-  rejectLabel: PropTypes.string.description('reject modal label'),
-
-  /** modal type */
-  modalType: PropTypes.oneOf(['alert', 'confirm']).description('modal type'),
-
-  /** on confirm handler */
-  onConfirmField: PropTypes.func.description('on confirm handler'),
-
-  /** on cancel handler */
-  onRejectField: PropTypes.func.description('on cancel handler'),
-
-  /** tab change handler */
-  onTabChange: PropTypes.func.description('tab change handler'),
-
-  /** app element */
-  appElement: PropTypes.string.description('app element'),
-
-  /** value for search */
-  value: PropTypes.string.description('value for search'),
-
-  /** additional info */
-  additionalInfo: PropTypes.object.description('additional info'),
-
-  /** display property */
-  displayProperty: PropTypes.string.description('display property'),
-
-  /** options for dropdown */
+  searchable: PropTypes.bool.description("Enable the user to search on combobox"),
+  containerProps: PropTypes.object.description("inject props to wrapper"),
+  onChange: PropTypes.func.description("change handler"),
+  searchOptionLabel: PropTypes.string.description("search option label"),
+  placeholder: PropTypes.string.description("placeholder for search input"),
+  modalSize: PropTypes.oneOf(["x-large", "large", "medium"]).description("search modal size"),
+  modalTitle: PropTypes.string.description("search modal title"),
+  tabsAnimated: PropTypes.bool.description("animate modal tabs"),
+  tabsEnableMouseEvents: PropTypes.bool.description("enable mouse event on tabs"),
+  tabType: PropTypes.oneOf([TabTypes.NORMAL, TabTypes.SUBTABS]).description("tab types on modal"),
+  tabData: PropTypes.array.description("data for modal tabs"),
+  searchGrid: PropTypes.bool.description("use search grid"),
+  searchFilters: PropTypes.bool.description("add search filters"),
+  confirmLabel: PropTypes.string.description("confirm modal label"),
+  rejectLabel: PropTypes.string.description("reject modal label"),
+  modalType: PropTypes.oneOf(["alert", "confirm"]).description("modal type"),
+  onConfirmField: PropTypes.func.description("on confirm handler"),
+  onRejectField: PropTypes.func.description("on cancel handler"),
+  onTabChange: PropTypes.func.description("tab change handler"),
+  appElement: PropTypes.string.description("app element"),
+  value: PropTypes.string.description("value for search"),
+  additionalInfo: PropTypes.object.description("additional info"),
+  displayProperty: PropTypes.string.description("display property"),
   dropdownOptions: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     value: PropTypes.string
-  })).description('options for dropdown'),
-
-  /** pass down props for datagrid in modal */
-  customDataGridOptions: PropTypes.object.description('pass down props for datagrid in modal'),
-
-  /** custom props for dropdown */
-  customDropdownOptions: PropTypes.object.description('custom props for dropdown'),
-
-  /** enable lookup */
-  useLookupIndicator: PropTypes.bool.description('enable lookup')
+  })).description("options for dropdown"),
+  customDataGridOptions: PropTypes.object.description("pass down props for datagrid in modal"),
+  customDropdownOptions: PropTypes.object.description("custom props for dropdown"),
+  useLookupIndicator: PropTypes.bool.description("enable lookup")
 };
+DSSearchField.propTypes = props;
 const DSSearchFieldWithSchema = describe(DSSearchField);
 DSSearchFieldWithSchema.propTypes = props;
-
-export { DSSearchFieldWithSchema, DSSearchField as default };
+var DSSearchField_default = DSSearchField;
+export {
+  DSModalSearchField,
+  DSSearchFieldWithSchema,
+  DSSearchField_default as default
+};
+//# sourceMappingURL=DSSearchField.js.map

package/esm/DSSearchField.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSSearchField.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB,iBAAiB;AAAA,EACjB,WAAW,MAAM;AAAA,EACjB,oBAAoB;AAAA,EACpB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA,EACf,wBAAwB;AAAA,EACxB,UAAU,SAAS;AAAA,EACnB,UAAU;AAAA,EACV,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,iBAAiB,MAAM;AAAA,EACvB,gBAAgB,MAAM;AAAA,EACtB,cAAc,MAAM;AAAA,EACpB,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,qBAAqB;AAAA,EACrB,aAAa;AAAA,MAEb,qCAAC,kBAAD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAIJ,MAAM,QAAQ;AAAA,EAIZ,YAAY,UAAU,KAAK,YAAY;AAAA,EAEvC,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAE7C,UAAU,UAAU,KAAK,YAAY;AAAA,EAErC,mBAAmB,UAAU,OAAO,YAAY;AAAA,EAEhD,aAAa,UAAU,OAAO,YAAY;AAAA,EAE1C,WAAW,UAAU,MAAM,CAAC,WAAW,SAAS,WAAW,YAAY;AAAA,EAEvE,YAAY,UAAU,OAAO,YAAY;AAAA,EAEzC,cAAc,UAAU,KAAK,YAAY;AAAA,EAEzC,uBAAuB,UAAU,KAAK,YAAY;AAAA,EAElD,SAAS,UAAU,MAAM,CAAC,SAAS,QAAQ,SAAS,UAAU,YAAY;AAAA,EAE1E,SAAS,UAAU,MAAM,YAAY;AAAA,EAErC,YAAY,UAAU,KAAK,YAAY;AAAA,EAEvC,eAAe,UAAU,KAAK,YAAY;AAAA,EAE1C,cAAc,UAAU,OAAO,YAAY;AAAA,EAE3C,aAAa,UAAU,OAAO,YAAY;AAAA,EAE1C,WAAW,UAAU,MAAM,CAAC,SAAS,YAAY,YAAY;AAAA,EAE7D,gBAAgB,UAAU,KAAK,YAAY;AAAA,EAE3C,eAAe,UAAU,KAAK,YAAY;AAAA,EAE1C,aAAa,UAAU,KAAK,YAAY;AAAA,EAExC,YAAY,UAAU,OAAO,YAAY;AAAA,EAEzC,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAE7C,iBAAiB,UAAU,OAAO,YAAY;AAAA,EAE9C,iBAAiB,UAAU,QACzB,UAAU,MAAM;AAAA,IACd,OAAO,UAAU;AAAA,IACjB,OAAO,UAAU;AAAA,MAEnB,YAAY;AAAA,EAEd,uBAAuB,UAAU,OAAO,YAAY;AAAA,EAEpD,uBAAuB,UAAU,OAAO,YAAY;AAAA,EAEpD,oBAAoB,UAAU,KAAK,YAAY;AAAA;AAGjD,cAAc,YAAY;AAE1B,MAAM,0BAA0B,SAAS;AACzC,wBAAwB,YAAY;AAGpC,IAAO,wBAAQ;",
+  "names": []
+}

package/esm/impl/DSSeachFieldImpl.js

@@ -1,121 +1,74 @@
-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-form';
-import ModalSearchField from './components/ModalSearchField/ModalSearchField.js';
-export { default as DSModalSearchField } from './components/ModalSearchField/ModalSearchField.js';
-import AdvanceSearchOption from './components/AdvanceSearchOption/AdvanceSearchOption.js';
-import LookupIndicator from './components/LookupIndicator/LookupIndicator.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-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(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; }
+import * as React from "react";
+import React2, { Component } from "react";
+import { components } from "react-select";
+import { convertPropToCssClassName } from "@elliemae/ds-classnames";
+import { DSComboBox2 } from "@elliemae/ds-form";
+import DSModalSearchField from "./components/ModalSearchField/ModalSearchField";
+import AdvanceSearchOption from "./components/AdvanceSearchOption/AdvanceSearchOption";
+import LookupIndicator from "./components/LookupIndicator/LookupIndicator";
 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
-} = convertPropToCssClassName('query-builder-addon-search-field');
-
+const { cssClassName, classNameElement, classNameModifier, classNameBlock } = convertPropToCssClassName("query-builder-addon-search-field");
 class DSSearchFieldImpl extends 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; // 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
-      });
+      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;
+      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,
@@ -123,7 +76,6 @@ class DSSearchFieldImpl extends Component {
       additionalInfo: []
     };
   }
-
   render() {
     const {
       placeholder,
@@ -151,84 +103,81 @@ class DSSearchFieldImpl extends 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 => {
-        // return <AdvanceSearchOption onAdvanceSearchClick={this.handleOpenModal} />
-        props.innerProps.className = 'em-ds-combobox__option';
-
+      Option: (props) => {
+        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);
+          props.innerProps.className = `${props.innerProps.className} ${advanceOption.className}`;
         }
-
-        return /*#__PURE__*/jsx(components.Option, _objectSpread({}, props));
+        return /* @__PURE__ */ React2.createElement(components.Option, {
+          ...props
+        });
       },
       IndicatorSeparator: () => null,
-      NoOptionsMessage: props => /*#__PURE__*/jsx(AdvanceSearchOption, _objectSpread({
+      NoOptionsMessage: (props) => /* @__PURE__ */ React2.createElement(AdvanceSearchOption, {
         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__*/jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
-      className: "".concat(cssClassName),
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "".concat(classNameBlock('container-selector'))
-      }, void 0, /*#__PURE__*/jsx(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(LookupIndicator, {
-        buttonType: "text",
-        className: "".concat(classNameElement('btn-selector'), " ").concat(!value ? classNameModifier('btn-placeholder', 'btn-selector') : ''),
-        onAdvanceSearchClick: this.handleOpenModal
-      })), /*#__PURE__*/_jsx(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
-      })]
+    return /* @__PURE__ */ React2.createElement("div", {
+      ...containerProps,
+      className: `${cssClassName}`
+    }, /* @__PURE__ */ React2.createElement("div", {
+      className: `${classNameBlock("container-selector")}`
+    }, /* @__PURE__ */ React2.createElement(DSComboBox2, {
+      className: `${classNameElement("dropdown-field-selector")}`,
+      components: customComponents,
+      onChange: this.onChangeDropdown,
+      onKeyDown: this.onKeyDown,
+      options,
+      value,
+      searchable,
+      ...customDropdownOptions
+    }), useLookupIndicator && /* @__PURE__ */ React2.createElement(LookupIndicator, {
+      buttonType: "text",
+      className: `${classNameElement("btn-selector")} ${!value ? classNameModifier("btn-placeholder", "btn-selector") : ""}`,
+      onAdvanceSearchClick: this.handleOpenModal
+    })), /* @__PURE__ */ React2.createElement(DSModalSearchField, {
+      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
     }));
   }
-
 }
-
-export { DSSearchFieldImpl as default };
+var DSSeachFieldImpl_default = DSSearchFieldImpl;
+export {
+  DSModalSearchField,
+  DSSeachFieldImpl_default as default
+};
+//# sourceMappingURL=DSSeachFieldImpl.js.map

package/esm/impl/DSSeachFieldImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/impl/DSSeachFieldImpl.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
+  "names": []
+}