@elliemae/ds-menu 2.2.1 → 2.3.0-alpha.4

package/cjs/MenuItems/SearchableGroup.js

@@ -1,101 +1,97 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-var React = require('react');
-var dsClassnames = require('@elliemae/ds-classnames');
-var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
-var DSSearchBox = require('@elliemae/ds-form/SearchBox');
-var reactDesc = require('react-desc');
-var VirtualMenuList = require('../VirtualMenuList.js');
-var MenuContext = require('../MenuContext.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DSSearchBox__default = /*#__PURE__*/_interopDefaultLegacy(DSSearchBox);
-
-const SearchBoxWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'search-wrapper');
-const NoOptionsWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'no-options');
-
-function SearchableGroup(_ref) {
-  let {
-    children,
-    amountItemsInWindow = 5,
-    searchTerm: searchTermProp = '',
-    noOptionsText = 'No options',
-    height,
-    width,
-    focusOnOpen = false
-  } = _ref;
-  const searchRef = React.useRef(null);
-  const [searchTerm, setSearchTerm] = React.useState(searchTermProp);
-  React.useEffect(() => {
-    if (searchRef.current) searchRef.current.focus();
+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 SearchableGroup_exports = {};
+__export(SearchableGroup_exports, {
+  DSMenuSearchableGroupWithSchema: () => DSMenuSearchableGroupWithSchema,
+  SearchableGroup: () => SearchableGroupHOC,
+  default: () => SearchableGroup_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_classnames = require("@elliemae/ds-classnames");
+var import_FocusGroup = require("@elliemae/ds-shared/FocusGroup");
+var import_SearchBox = require("@elliemae/ds-form/SearchBox");
+var import_react_desc = require("react-desc");
+var import_VirtualMenuList = require("../VirtualMenuList");
+var import_MenuContext = require("../MenuContext");
+const SearchBoxWrapper = (0, import_ds_classnames.aggregatedClasses)("div")("menu-search-group", "search-wrapper");
+const NoOptionsWrapper = (0, import_ds_classnames.aggregatedClasses)("div")("menu-search-group", "no-options");
+const SearchableGroup = ({
+  children,
+  amountItemsInWindow = 5,
+  searchTerm: searchTermProp = "",
+  noOptionsText = "No options",
+  height,
+  width,
+  focusOnOpen = false
+}) => {
+  const searchRef = (0, import_react.useRef)(null);
+  const [searchTerm, setSearchTerm] = (0, import_react.useState)(searchTermProp);
+  (0, import_react.useEffect)(() => {
+    if (searchRef.current)
+      searchRef.current.focus();
   }, []);
-  const {
-    visible
-  } = React.useContext(MenuContext) || {};
-  React.useEffect(() => {
+  const { visible } = (0, import_react.useContext)(import_MenuContext.MenuContext) || {};
+  (0, import_react.useEffect)(() => {
     if (focusOnOpen && visible) {
       setTimeout(() => {
-        if (searchRef.current) searchRef.current.focus();
+        if (searchRef.current)
+          searchRef.current.focus();
       }, 0);
     }
   }, [focusOnOpen, visible]);
-  const filteredChildren = React.useMemo(() => children.filter(child => !searchTerm || child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase())), [children, searchTerm]);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/_jsx__default["default"](SearchBoxWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](DSSearchBox__default["default"], {
-      innerRef: searchRef,
-      onSearch: _ref2 => {
-        let {
-          value
-        } = _ref2;
-        return setSearchTerm(value);
-      },
-      searchOnEnter: false,
-      showIcon: false,
-      value: searchTerm
-    })), !filteredChildren.length && /*#__PURE__*/_jsx__default["default"](NoOptionsWrapper, {}, void 0, noOptionsText), /*#__PURE__*/_jsx__default["default"](VirtualMenuList, {
-      amountItemsInWindow: amountItemsInWindow,
-      height: height,
-      items: filteredChildren,
-      width: width
-    })]
-  });
-}
-
+  const filteredChildren = (0, import_react.useMemo)(() => children.filter((child) => !searchTerm || child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase())), [children, searchTerm]);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(SearchBoxWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_SearchBox.DSSearchBox, {
+    innerRef: searchRef,
+    onSearch: ({ value }) => setSearchTerm(value),
+    searchOnEnter: false,
+    showIcon: false,
+    value: searchTerm
+  })), !filteredChildren.length && /* @__PURE__ */ import_react.default.createElement(NoOptionsWrapper, null, noOptionsText), /* @__PURE__ */ import_react.default.createElement(import_VirtualMenuList.VirtualMenuList, {
+    amountItemsInWindow,
+    height,
+    items: filteredChildren,
+    width
+  }));
+};
 const props = {
-  /** The amount of items that are going to be rendered in the group */
-  amountItemsInWindow: reactDesc.PropTypes.number.description('The amount of items that are going to be rendered in the group'),
-
-  /** A search term */
-  searchTerm: reactDesc.PropTypes.string.description('A search term'),
-
-  /** Text to show when there's no options to show */
-  noOptionsText: reactDesc.PropTypes.string.description("Text to show when there's no options to show"),
-
-  /** array of children for search list */
-  children: reactDesc.PropTypes.array.description('array of children for search list'),
-
-  /** height for virtual list wrapper */
-  height: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('height for virtual list wrapper'),
-
-  /** width for virtual list wrapper */
-  width: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('width for virtual list wrapper'),
-
-  /** weather to focus on searchable group on open */
-  focusOnOpen: reactDesc.PropTypes.bool.description('weather to focus on searchable group on open')
+  amountItemsInWindow: import_react_desc.PropTypes.number.description("The amount of items that are going to be rendered in the group"),
+  searchTerm: import_react_desc.PropTypes.string.description("A search term"),
+  noOptionsText: import_react_desc.PropTypes.string.description("Text to show when there's no options to show"),
+  children: import_react_desc.PropTypes.array.description("array of children for search list"),
+  height: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("height for virtual list wrapper"),
+  width: import_react_desc.PropTypes.oneOfType([import_react_desc.PropTypes.string, import_react_desc.PropTypes.number]).description("width for virtual list wrapper"),
+  focusOnOpen: import_react_desc.PropTypes.bool.description("weather to focus on searchable group on open")
 };
-const DSMenuSearchableGroupWithSchema = reactDesc.describe(SearchableGroup);
+SearchableGroup.propTypes = props;
+const DSMenuSearchableGroupWithSchema = (0, import_react_desc.describe)(SearchableGroup);
 DSMenuSearchableGroupWithSchema.propTypes = props;
-var SearchableGroup$1 = FocusGroup.focusGroupManagerHoc(SearchableGroup);
-
-exports.DSMenuSearchableGroupWithSchema = DSMenuSearchableGroupWithSchema;
-exports["default"] = SearchableGroup$1;
+const SearchableGroupHOC = (0, import_FocusGroup.focusGroupManagerHoc)(SearchableGroup);
+var SearchableGroup_default = SearchableGroupHOC;
+module.exports = __toCommonJS(SearchableGroup_exports);
+//# sourceMappingURL=SearchableGroup.js.map

package/cjs/MenuItems/SearchableGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MenuItems/SearchableGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useEffect, useMemo, useState, useRef, useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { focusGroupManagerHoc } from '@elliemae/ds-shared/FocusGroup';\nimport { DSSearchBox } from '@elliemae/ds-form/SearchBox';\nimport { PropTypes, describe } from 'react-desc';\nimport { VirtualMenuList } from '../VirtualMenuList';\nimport { MenuContext } from '../MenuContext';\n\nconst SearchBoxWrapper = aggregatedClasses('div')(\n  'menu-search-group',\n  'search-wrapper',\n);\nconst NoOptionsWrapper = aggregatedClasses('div')(\n  'menu-search-group',\n  'no-options',\n);\n\nconst SearchableGroup = ({\n  children,\n  amountItemsInWindow = 5,\n  searchTerm: searchTermProp = '',\n  noOptionsText = 'No options',\n  height,\n  width,\n  focusOnOpen = false,\n}) => {\n  const searchRef = useRef(null);\n  const [searchTerm, setSearchTerm] = useState(searchTermProp);\n\n  useEffect(() => {\n    if (searchRef.current) searchRef.current.focus();\n  }, []);\n\n  const { visible } = useContext(MenuContext) || {};\n\n  useEffect(() => {\n    if (focusOnOpen && visible) {\n      setTimeout(() => {\n        if (searchRef.current) searchRef.current.focus();\n      }, 0);\n    }\n  }, [focusOnOpen, visible]);\n\n  const filteredChildren = useMemo(\n    () =>\n      children.filter(\n        (child) =>\n          !searchTerm ||\n          child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase()),\n      ),\n    [children, searchTerm],\n  );\n\n  return (\n    <>\n      <SearchBoxWrapper>\n        <DSSearchBox\n          innerRef={searchRef}\n          onSearch={({ value }) => setSearchTerm(value)}\n          searchOnEnter={false}\n          showIcon={false}\n          value={searchTerm}\n        />\n      </SearchBoxWrapper>\n      {!filteredChildren.length && (\n        <NoOptionsWrapper>{noOptionsText}</NoOptionsWrapper>\n      )}\n      <VirtualMenuList\n        amountItemsInWindow={amountItemsInWindow}\n        height={height}\n        items={filteredChildren}\n        width={width}\n      />\n    </>\n  );\n};\n\nconst props = {\n  /** The amount of items that are going to be rendered in the group */\n  amountItemsInWindow: PropTypes.number.description(\n    'The amount of items that are going to be rendered in the group',\n  ),\n  /** A search term */\n  searchTerm: PropTypes.string.description('A search term'),\n  /** Text to show when there's no options to show */\n  noOptionsText: PropTypes.string.description(\n    \"Text to show when there's no options to show\",\n  ),\n  /** array of children for search list */\n  children: PropTypes.array.description('array of children for search list'),\n  /** height for virtual list wrapper */\n  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'height for virtual list wrapper',\n  ),\n  /** width for virtual list wrapper */\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'width for virtual list wrapper',\n  ),\n  /** weather to focus on searchable group on open */\n  focusOnOpen: PropTypes.bool.description(\n    'weather to focus on searchable group on open',\n  ),\n};\n\nSearchableGroup.propTypes = props;\n\nconst DSMenuSearchableGroupWithSchema = describe(SearchableGroup);\nDSMenuSearchableGroupWithSchema.propTypes = props;\n\nconst SearchableGroupHOC = focusGroupManagerHoc(SearchableGroup);\n\nexport { DSMenuSearchableGroupWithSchema, SearchableGroupHOC as SearchableGroup };\nexport default SearchableGroupHOC;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwE;AACxE,2BAAkC;AAClC,wBAAqC;AACrC,uBAA4B;AAC5B,wBAAoC;AACpC,6BAAgC;AAChC,yBAA4B;AAE5B,MAAM,mBAAmB,4CAAkB,OACzC,qBACA;AAEF,MAAM,mBAAmB,4CAAkB,OACzC,qBACA;AAGF,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA,sBAAsB;AAAA,EACtB,YAAY,iBAAiB;AAAA,EAC7B,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,MACV;AACJ,QAAM,YAAY,yBAAO;AACzB,QAAM,CAAC,YAAY,iBAAiB,2BAAS;AAE7C,8BAAU,MAAM;AACd,QAAI,UAAU;AAAS,gBAAU,QAAQ;AAAA,KACxC;AAEH,QAAM,EAAE,YAAY,6BAAW,mCAAgB;AAE/C,8BAAU,MAAM;AACd,QAAI,eAAe,SAAS;AAC1B,iBAAW,MAAM;AACf,YAAI,UAAU;AAAS,oBAAU,QAAQ;AAAA,SACxC;AAAA;AAAA,KAEJ,CAAC,aAAa;AAEjB,QAAM,mBAAmB,0BACvB,MACE,SAAS,OACP,CAAC,UACC,CAAC,cACD,MAAM,MAAM,MAAM,cAAc,WAAW,WAAW,iBAE5D,CAAC,UAAU;AAGb,SACE,wFACE,mDAAC,kBAAD,MACE,mDAAC,8BAAD;AAAA,IACE,UAAU;AAAA,IACV,UAAU,CAAC,EAAE,YAAY,cAAc;AAAA,IACvC,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,OAGV,CAAC,iBAAiB,UACjB,mDAAC,kBAAD,MAAmB,gBAErB,mDAAC,wCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA;AAAA;AAMR,MAAM,QAAQ;AAAA,EAEZ,qBAAqB,4BAAU,OAAO,YACpC;AAAA,EAGF,YAAY,4BAAU,OAAO,YAAY;AAAA,EAEzC,eAAe,4BAAU,OAAO,YAC9B;AAAA,EAGF,UAAU,4BAAU,MAAM,YAAY;AAAA,EAEtC,QAAQ,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAChE;AAAA,EAGF,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAC/D;AAAA,EAGF,aAAa,4BAAU,KAAK,YAC1B;AAAA;AAIJ,gBAAgB,YAAY;AAE5B,MAAM,kCAAkC,gCAAS;AACjD,gCAAgC,YAAY;AAE5C,MAAM,qBAAqB,4CAAqB;AAGhD,IAAO,0BAAQ;",
+  "names": []
+}

package/cjs/MenuItems/SearchableList.js

@@ -1,66 +1,80 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var React = require('react');
-var reactDesc = require('react-desc');
-var dsUtilities = require('@elliemae/ds-utilities');
-var dsForm = require('@elliemae/ds-form');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-const noop = () => {};
-
-function SearchableList(_ref) {
-  let {
-    onSelectMenuItem = noop,
-    components = {},
-    searchTerm: searchTermProp = '',
-    items = [],
-    dropdownFilterOptions = {},
-    returnValue,
-    extraListProps = {},
-    appendTermInList = false,
-    maxOptions = 10,
-    loading = false
-  } = _ref;
-  const [searchTerm, setInputValue] = React.useState(searchTermProp);
-  const handleInputChange = React.useCallback((value, args) => {
+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 SearchableList_exports = {};
+__export(SearchableList_exports, {
+  DSMenuSearchableListWithSchema: () => DSMenuSearchableListWithSchema,
+  SearchableList: () => SearchableList,
+  default: () => SearchableList_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_Combobox = require("@elliemae/ds-form/ComboBox/v2/Combobox");
+const noop = () => {
+};
+const SearchableList = ({
+  onSelectMenuItem = noop,
+  components = {},
+  searchTerm: searchTermProp = "",
+  items = [],
+  dropdownFilterOptions = {},
+  returnValue,
+  extraListProps = {},
+  appendTermInList = false,
+  maxOptions = 10,
+  loading = false
+}) => {
+  const [searchTerm, setInputValue] = (0, import_react.useState)(searchTermProp);
+  const handleInputChange = (0, import_react.useCallback)((value, args) => {
     const action = args ? args.action : null;
-    if (action === 'input-blur' || action === 'menu-close') return;
+    if (action === "input-blur" || action === "menu-close")
+      return;
     setInputValue(value);
   }, [searchTerm]);
-  const handleFilterByText = React.useCallback(() => {
-    if (searchTerm) onSelectMenuItem(searchTerm);
+  const handleFilterByText = (0, import_react.useCallback)(() => {
+    if (searchTerm)
+      onSelectMenuItem(searchTerm);
   }, [searchTerm]);
-  const handleKeyDown = React.useCallback(e => {
-    if (e.key === 'ArrowRight') {
+  const handleKeyDown = (0, import_react.useCallback)((e) => {
+    if (e.key === "ArrowRight") {
       handleFilterByText();
     }
   }, [searchTerm]);
-  const options = React.useMemo(() => searchTerm && appendTermInList ? dsUtilities.uniqBy([{
-    id: searchTerm,
-    label: searchTerm
-  }].concat(items), item => item.label) : items, [searchTerm, appendTermInList]);
-  return /*#__PURE__*/jsxRuntime.jsx(dsForm.DSComboBox, _objectSpread(_objectSpread({
+  const options = (0, import_react.useMemo)(() => searchTerm && appendTermInList ? (0, import_ds_utilities.uniqBy)([
+    {
+      id: searchTerm,
+      label: searchTerm
+    }
+  ].concat(items), (item) => item.label) : items, [searchTerm, appendTermInList]);
+  return /* @__PURE__ */ import_react.default.createElement(import_Combobox.DSComboBox2, {
     autoFocus: true,
-    components: _objectSpread({
-      DropdownIndicator: null
-    }, components),
+    components: { DropdownIndicator: null, ...components },
     customMenuItemOptions: {
       useTruncatedText: true
     },
@@ -71,47 +85,30 @@ function SearchableList(_ref) {
     onFilterByInputText: handleFilterByText,
     onInputChange: handleInputChange,
     onKeyDown: handleKeyDown,
-    options: options,
-    returnValue: returnValue,
+    options,
+    returnValue,
     valueProperty: "id",
-    maxOptions: maxOptions,
-    loading: loading
-  }, extraListProps), dropdownFilterOptions));
-}
-
+    maxOptions,
+    loading,
+    ...extraListProps,
+    ...dropdownFilterOptions
+  });
+};
 const props = {
-  /** callback after item gets selected */
-  onSelectMenuItem: reactDesc.PropTypes.func.description('callback after item gets selected'),
-
-  /** Object with custom components for react-select */
-  components: reactDesc.PropTypes.shape({}).description('Object with custom components for react-select'),
-
-  /** search term to filter for */
-  searchTerm: reactDesc.PropTypes.string.description('search term to filter for'),
-
-  /** item options */
-  items: reactDesc.PropTypes.array.description('item options'),
-
-  /** options */
-  dropdownFilterOptions: reactDesc.PropTypes.shape({}).description('options'),
-
-  /** Whether the combo box is has value to return or not */
-  returnValue: reactDesc.PropTypes.bool.description('Whether the combo box is has value to return or not'),
-
-  /** extra props to pass down to combo */
-  extraListProps: reactDesc.PropTypes.shape({}).description('extra props to pass down to combo'),
-
-  /** append search term as item on the list */
-  appendTermInList: reactDesc.PropTypes.bool.description('append search term as item on the list'),
-
-  /** maxoptions for combobox */
-  maxOptions: reactDesc.PropTypes.number.description('maxoptions for combobox'),
-
-  /**  loading flag */
-  loading: reactDesc.PropTypes.bool.description('loading flag')
+  onSelectMenuItem: import_react_desc.PropTypes.func.description("callback after item gets selected"),
+  components: import_react_desc.PropTypes.shape({}).description("Object with custom components for react-select"),
+  searchTerm: import_react_desc.PropTypes.string.description("search term to filter for"),
+  items: import_react_desc.PropTypes.array.description("item options"),
+  dropdownFilterOptions: import_react_desc.PropTypes.shape({}).description("options"),
+  returnValue: import_react_desc.PropTypes.bool.description("Whether the combo box is has value to return or not"),
+  extraListProps: import_react_desc.PropTypes.shape({}).description("extra props to pass down to combo"),
+  appendTermInList: import_react_desc.PropTypes.bool.description("append search term as item on the list"),
+  maxOptions: import_react_desc.PropTypes.number.description("maxoptions for combobox"),
+  loading: import_react_desc.PropTypes.bool.description("loading flag")
 };
-const DSMenuSearchableListWithSchema = reactDesc.describe(SearchableList);
+SearchableList.propTypes = props;
+const DSMenuSearchableListWithSchema = (0, import_react_desc.describe)(SearchableList);
 DSMenuSearchableListWithSchema.propTypes = props;
-
-exports.DSMenuSearchableListWithSchema = DSMenuSearchableListWithSchema;
-exports["default"] = SearchableList;
+var SearchableList_default = SearchableList;
+module.exports = __toCommonJS(SearchableList_exports);
+//# sourceMappingURL=SearchableList.js.map

package/cjs/MenuItems/SearchableList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/MenuItems/SearchableList.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback, useMemo, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { uniqBy } from '@elliemae/ds-utilities';\nimport { DSComboBox2 as DSComboBox } from '@elliemae/ds-form/ComboBox/v2/Combobox';\n\nconst noop = () => {};\n\nconst SearchableList = ({\n  onSelectMenuItem = noop,\n  components = {},\n  searchTerm: searchTermProp = '',\n  items = [],\n  dropdownFilterOptions = {},\n  returnValue,\n  extraListProps = {},\n  appendTermInList = false,\n  maxOptions = 10,\n  loading = false,\n}) => {\n  const [searchTerm, setInputValue] = useState(searchTermProp);\n\n  const handleInputChange = useCallback(\n    (value, args) => {\n      const action = args ? args.action : null;\n      if (action === 'input-blur' || action === 'menu-close') return;\n      setInputValue(value);\n    },\n    [searchTerm],\n  );\n\n  const handleFilterByText = useCallback(() => {\n    if (searchTerm) onSelectMenuItem(searchTerm);\n  }, [searchTerm]);\n\n  const handleKeyDown = useCallback(\n    (e) => {\n      if (e.key === 'ArrowRight') {\n        handleFilterByText();\n      }\n    },\n    [searchTerm],\n  );\n\n  const options = useMemo(\n    () =>\n      searchTerm && appendTermInList\n        ? uniqBy(\n            [\n              {\n                id: searchTerm,\n                label: searchTerm,\n              },\n            ].concat(items),\n            (item) => item.label,\n          )\n        : items,\n    [searchTerm, appendTermInList],\n  );\n\n  return (\n    <DSComboBox\n      autoFocus\n      components={{ DropdownIndicator: null, ...components }}\n      customMenuItemOptions={{\n        useTruncatedText: true,\n      }}\n      inlineMenu\n      inputValue={searchTerm}\n      menuIsOpen\n      onChange={onSelectMenuItem}\n      onFilterByInputText={handleFilterByText}\n      onInputChange={handleInputChange}\n      onKeyDown={handleKeyDown}\n      options={options}\n      returnValue={returnValue}\n      valueProperty=\"id\"\n      maxOptions={maxOptions}\n      loading={loading}\n      {...extraListProps}\n      {...dropdownFilterOptions}\n    />\n  );\n};\n\nconst props = {\n  /** callback after item gets selected */\n  onSelectMenuItem: PropTypes.func.description('callback after item gets selected'),\n  /** Object with custom components for react-select */\n  components: PropTypes.shape({}).description('Object with custom components for react-select'),\n  /** search term to filter for */\n  searchTerm: PropTypes.string.description('search term to filter for'),\n  /** item options */\n  items: PropTypes.array.description('item options'),\n  /** options */\n  dropdownFilterOptions: PropTypes.shape({}).description('options'),\n  /** Whether the combo box is has value to return or not */\n  returnValue: PropTypes.bool.description('Whether the combo box is has value to return or not'),\n  /** extra props to pass down to combo */\n  extraListProps: PropTypes.shape({}).description('extra props to pass down to combo'),\n  /** append search term as item on the list */\n  appendTermInList: PropTypes.bool.description('append search term as item on the list'),\n  /** maxoptions for combobox */\n  maxOptions: PropTypes.number.description('maxoptions for combobox'),\n  /**  loading flag */\n  loading: PropTypes.bool.description('loading flag'),\n};\n\nSearchableList.propTypes = props;\n\nconst DSMenuSearchableListWithSchema = describe(SearchableList);\n\nDSMenuSearchableListWithSchema.propTypes = props;\n\nexport { DSMenuSearchableListWithSchema, SearchableList };\nexport default SearchableList;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsD;AACtD,wBAAoC;AACpC,0BAAuB;AACvB,sBAA0C;AAE1C,MAAM,OAAO,MAAM;AAAA;AAEnB,MAAM,iBAAiB,CAAC;AAAA,EACtB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,YAAY,iBAAiB;AAAA,EAC7B,QAAQ;AAAA,EACR,wBAAwB;AAAA,EACxB;AAAA,EACA,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,UAAU;AAAA,MACN;AACJ,QAAM,CAAC,YAAY,iBAAiB,2BAAS;AAE7C,QAAM,oBAAoB,8BACxB,CAAC,OAAO,SAAS;AACf,UAAM,SAAS,OAAO,KAAK,SAAS;AACpC,QAAI,WAAW,gBAAgB,WAAW;AAAc;AACxD,kBAAc;AAAA,KAEhB,CAAC;AAGH,QAAM,qBAAqB,8BAAY,MAAM;AAC3C,QAAI;AAAY,uBAAiB;AAAA,KAChC,CAAC;AAEJ,QAAM,gBAAgB,8BACpB,CAAC,MAAM;AACL,QAAI,EAAE,QAAQ,cAAc;AAC1B;AAAA;AAAA,KAGJ,CAAC;AAGH,QAAM,UAAU,0BACd,MACE,cAAc,mBACV,gCACE;AAAA,IACE;AAAA,MACE,IAAI;AAAA,MACJ,OAAO;AAAA;AAAA,IAET,OAAO,QACT,CAAC,SAAS,KAAK,SAEjB,OACN,CAAC,YAAY;AAGf,SACE,mDAAC,6BAAD;AAAA,IACE,WAAS;AAAA,IACT,YAAY,EAAE,mBAAmB,SAAS;AAAA,IAC1C,uBAAuB;AAAA,MACrB,kBAAkB;AAAA;AAAA,IAEpB,YAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAU;AAAA,IACV,UAAU;AAAA,IACV,qBAAqB;AAAA,IACrB,eAAe;AAAA,IACf,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,eAAc;AAAA,IACd;AAAA,IACA;AAAA,OACI;AAAA,OACA;AAAA;AAAA;AAKV,MAAM,QAAQ;AAAA,EAEZ,kBAAkB,4BAAU,KAAK,YAAY;AAAA,EAE7C,YAAY,4BAAU,MAAM,IAAI,YAAY;AAAA,EAE5C,YAAY,4BAAU,OAAO,YAAY;AAAA,EAEzC,OAAO,4BAAU,MAAM,YAAY;AAAA,EAEnC,uBAAuB,4BAAU,MAAM,IAAI,YAAY;AAAA,EAEvD,aAAa,4BAAU,KAAK,YAAY;AAAA,EAExC,gBAAgB,4BAAU,MAAM,IAAI,YAAY;AAAA,EAEhD,kBAAkB,4BAAU,KAAK,YAAY;AAAA,EAE7C,YAAY,4BAAU,OAAO,YAAY;AAAA,EAEzC,SAAS,4BAAU,KAAK,YAAY;AAAA;AAGtC,eAAe,YAAY;AAE3B,MAAM,iCAAiC,gCAAS;AAEhD,+BAA+B,YAAY;AAG3C,IAAO,yBAAQ;",
+  "names": []
+}