@elliemae/ds-search-field 2.2.0-alpha.2 → 2.2.0-beta.0

package/esm/DSSearchField.js

@@ -1,104 +1,159 @@
-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
-});
+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
+  });
+};
+
 const props = {
-  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"),
+  /*
+    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 */
   dropdownOptions: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     value: PropTypes.string
-  })).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")
+  })).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')
 };
-DSSearchField.propTypes = props;
 const DSSearchFieldWithSchema = describe(DSSearchField);
 DSSearchFieldWithSchema.propTypes = props;
-var DSSearchField_default = DSSearchField;
-export {
-  DSModalSearchField,
-  DSSearchFieldWithSchema,
-  DSSearchField_default as default
-};
-//# sourceMappingURL=DSSearchField.js.map
+
+export { DSSearchFieldWithSchema, DSSearchField as default };

package/esm/impl/DSSeachFieldImpl.js

@@ -1,74 +1,121 @@
-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";
+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; }
 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;
-      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,
@@ -76,6 +123,7 @@ class DSSearchFieldImpl extends Component {
       additionalInfo: []
     };
   }
+
   render() {
     const {
       placeholder,
@@ -103,81 +151,84 @@ 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) => {
-        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__ */ React2.createElement(components.Option, {
-          ...props
-        });
+
+        return /*#__PURE__*/jsx(components.Option, _objectSpread({}, props));
       },
       IndicatorSeparator: () => null,
-      NoOptionsMessage: (props) => /* @__PURE__ */ React2.createElement(AdvanceSearchOption, {
+      NoOptionsMessage: props => /*#__PURE__*/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__ */ 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
+
+    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
+      })]
     }));
   }
+
 }
-var DSSeachFieldImpl_default = DSSearchFieldImpl;
-export {
-  DSModalSearchField,
-  DSSeachFieldImpl_default as default
-};
-//# sourceMappingURL=DSSeachFieldImpl.js.map
+
+export { DSSearchFieldImpl as default };

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

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

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

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