@elliemae/ds-menu 1.57.1-rc.0 → 2.0.0-alpha.11

package/cjs/MenuItems/MenuItemCheckable.js

@@ -2,39 +2,113 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('react');
-require('react-desc');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-utilities');
-var MenuItems_SelectionGroup = require('../SubMenu-22be0a18.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('@elliemae/ds-shared/FocusGroup');
-require('@elliemae/ds-hidden');
-require('@elliemae/ds-button');
-require('@elliemae/ds-popper');
-require('styled-components');
-require('@babel/runtime/helpers/defineProperty');
-require('lodash');
-require('@elliemae/ds-classnames');
-require('react-spring/web.cjs');
-require('@elliemae/ds-truncated-tooltip-text');
-require('./Separator.js');
-require('@elliemae/ds-separator');
-require('@elliemae/ds-shared/CheckableGroup');
-require('./SearchableGroup.js');
-require('@elliemae/ds-form/SearchBox');
-require('../VirtualMenuList.js');
-require('react-window');
-require('../utils/useHeightByAmountOfItems.js');
-require('../MenuContext.js');
-require('@elliemae/ds-form');
-require('./CheckboxGroup.js');
-require('./RadioGroup.js');
-
-
-
-exports.DSMenuItemCheckeableWithSchema = MenuItems_SelectionGroup.DSMenuItemCheckeableWithSchema;
-exports.default = MenuItems_SelectionGroup.MenuItemCheckable;
-//# sourceMappingURL=MenuItemCheckable.js.map
+var reactDesc = require('react-desc');
+var Checkmark = require('@elliemae/ds-icons/Checkmark');
+var utils = require('@elliemae/ds-utilities/utils');
+var MenuItem = require('./MenuItem.js');
+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);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var Checkmark__default = /*#__PURE__*/_interopDefaultLegacy(Checkmark);
+
+var _div;
+
+const _excluded = ["role", "checked", "name", "checkIcon", "children", "leftAddon", "item"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function useCheckable({
+  checked
+}) {
+  return {
+    checked,
+    'aria-checked': checked
+  };
+}
+/**
+ * Reuses the same props as the MenuItem
+ *
+ * @param root0
+ * @param root0.role
+ * @param root0.checked
+ * @param root0.name
+ * @param root0.checkIcon
+ * @param root0.children
+ * @param root0.leftAddon
+ * @param root0.item
+ */
+
+
+function MenuItemCheckable(_ref) {
+  let {
+    role = 'menuitemcheckbox',
+    checked = false,
+    name = '',
+    checkIcon = /*#__PURE__*/_jsx__default["default"](Checkmark__default["default"], {
+      color: ['brand-primary', 600]
+    }),
+    // eslint-disable-next-line react/prop-types
+    children,
+    leftAddon,
+    item = undefined
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const checkableProps = useCheckable({
+    checked,
+    name
+  });
+
+  const handleClick = () => utils.runAll(otherProps.onClick, checkableProps.onClick)({
+    target: {
+      value: name,
+      checked
+    }
+  }, item);
+
+  const checkAddon = leftAddon || (checkableProps.checked ? /*#__PURE__*/_jsx__default["default"]("div", {
+    className: "checkable-mark"
+  }, void 0, checkIcon) : _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})));
+  return /*#__PURE__*/jsxRuntime.jsx(MenuItem["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, item), otherProps), checkableProps), {}, {
+    customRenderer: item && item.customRenderer ? item.customRenderer : () => {},
+    items: otherProps.subItems,
+    leftAddon: checkAddon,
+    onClick: handleClick,
+    role: role
+  }));
+}
+
+const props = {
+  /** Whether the item is checked or not */
+  checked: reactDesc.PropTypes.bool.description('Whether the item is checked or not'),
+
+  /** A custom item when the item is checked */
+  checkIcon: reactDesc.PropTypes.element.description('A custom item when the item is checked'),
+
+  /** form field name */
+  name: reactDesc.PropTypes.string.description('form field name'),
+
+  /** menu item object props */
+  item: reactDesc.PropTypes.object.description('menu item object props'),
+
+  /** a11y role */
+  role: reactDesc.PropTypes.string.description('a11y role'),
+
+  /** left addon component */
+  leftAddon: reactDesc.PropTypes.node.description('left addon component')
+};
+const DSMenuItemCheckeableWithSchema = reactDesc.describe(MenuItemCheckable);
+DSMenuItemCheckeableWithSchema.propTypes = props;
+
+exports.DSMenuItemCheckeableWithSchema = DSMenuItemCheckeableWithSchema;
+exports["default"] = MenuItemCheckable;

package/cjs/MenuItems/MenuItemCheckbox.js

@@ -1,37 +1,38 @@
 'use strict';
 
-require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/objectWithoutProperties');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('react');
-require('@elliemae/ds-form');
-var MenuItems_SelectionGroup = require('../SubMenu-22be0a18.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('react-desc');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-shared/FocusGroup');
-require('@elliemae/ds-hidden');
-require('@elliemae/ds-button');
-require('@elliemae/ds-popper');
-require('styled-components');
-require('@babel/runtime/helpers/defineProperty');
-require('lodash');
-require('@elliemae/ds-classnames');
-require('react-spring/web.cjs');
-require('@elliemae/ds-utilities');
-require('@elliemae/ds-truncated-tooltip-text');
-require('./Separator.js');
-require('@elliemae/ds-separator');
-require('@elliemae/ds-shared/CheckableGroup');
-require('./SearchableGroup.js');
-require('@elliemae/ds-form/SearchBox');
-require('../VirtualMenuList.js');
-require('react-window');
-require('../utils/useHeightByAmountOfItems.js');
-require('../MenuContext.js');
-require('./CheckboxGroup.js');
-require('./RadioGroup.js');
-
-
-
-module.exports = MenuItems_SelectionGroup.MenuItemCheckbox;
-//# sourceMappingURL=MenuItemCheckbox.js.map
+var DSCheckbox = require('@elliemae/ds-form/Checkbox');
+var MenuItemCheckable = require('./MenuItemCheckable.js');
+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);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var DSCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(DSCheckbox);
+
+const _excluded = ["checked"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function MenuItemCheckbox(_ref) {
+  let {
+    checked
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(MenuItemCheckable["default"], _objectSpread(_objectSpread({}, rest), {}, {
+    leftAddon: /*#__PURE__*/_jsx__default["default"](DSCheckbox__default["default"], {
+      checked: checked
+    }),
+    role: "menuitemcheckbox"
+  }));
+}
+
+module.exports = MenuItemCheckbox;

package/cjs/MenuItems/MenuItemRadio.js

@@ -2,39 +2,35 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('@babel/runtime/helpers/extends');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
-require('react-desc');
-var MenuItems_SelectionGroup = require('../SubMenu-22be0a18.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-shared/FocusGroup');
-require('@elliemae/ds-hidden');
-require('@elliemae/ds-button');
-require('@elliemae/ds-popper');
-require('styled-components');
-require('@babel/runtime/helpers/objectWithoutProperties');
-require('@babel/runtime/helpers/defineProperty');
-require('lodash');
-require('@elliemae/ds-classnames');
-require('react-spring/web.cjs');
-require('@elliemae/ds-utilities');
-require('@elliemae/ds-truncated-tooltip-text');
-require('./Separator.js');
-require('@elliemae/ds-separator');
-require('@elliemae/ds-shared/CheckableGroup');
-require('./SearchableGroup.js');
-require('@elliemae/ds-form/SearchBox');
-require('../VirtualMenuList.js');
-require('react-window');
-require('../utils/useHeightByAmountOfItems.js');
-require('../MenuContext.js');
-require('@elliemae/ds-form');
-require('./CheckboxGroup.js');
-require('./RadioGroup.js');
-
-
-
-exports.DSMenuItemRadioWithSchema = MenuItems_SelectionGroup.DSMenuItemRadioWithSchema;
-exports.default = MenuItems_SelectionGroup.MenuItemRadio;
-//# sourceMappingURL=MenuItemRadio.js.map
+var reactDesc = require('react-desc');
+var MenuItemCheckable = require('./MenuItemCheckable.js');
+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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function MenuItemRadio(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(MenuItemCheckable["default"], _objectSpread(_objectSpread({}, props), {}, {
+    role: "menuitemradio"
+  }));
+}
+
+const props = {
+  /** Whether the item is checked or not */
+  checked: reactDesc.PropTypes.bool.description('Whether the item is checked or not'),
+
+  /** A custom item when the item is checked */
+  checkIcon: reactDesc.PropTypes.element.description('A custom item when the item is checked')
+};
+const DSMenuItemRadioWithSchema = reactDesc.describe(MenuItemCheckable["default"]);
+DSMenuItemRadioWithSchema.propTypes = props;
+
+exports.DSMenuItemRadioWithSchema = DSMenuItemRadioWithSchema;
+exports["default"] = MenuItemRadio;

package/cjs/MenuItems/RadioGroup.js

@@ -2,34 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
-var React = require('react');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
 var reactDesc = require('react-desc');
 var CheckableGroup = require('@elliemae/ds-shared/CheckableGroup');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var CheckableGroup__default = /*#__PURE__*/_interopDefaultLegacy(CheckableGroup);
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function RadioGroup(props) {
-  return /*#__PURE__*/React__default['default'].createElement(CheckableGroup__default['default'], _extends__default['default']({}, props, {
+  return /*#__PURE__*/jsxRuntime.jsx(CheckableGroup__default["default"], _objectSpread(_objectSpread({}, props), {}, {
     multi: false
   }));
 }
 
-var props = {
+const props = {
   /* The item selected */
   active: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('the item selected'),
 
   /* Handler when a user checks an item */
   onCheck: reactDesc.PropTypes.func.description('Handler when a user checks an item')
 };
-RadioGroup.propTypes = props;
-var DSMenuRadioGroupWithSchema = reactDesc.describe(RadioGroup);
+const DSMenuRadioGroupWithSchema = reactDesc.describe(RadioGroup);
 DSMenuRadioGroupWithSchema.propTypes = props;
 
 exports.DSMenuRadioGroupWithSchema = DSMenuRadioGroupWithSchema;
-exports['default'] = RadioGroup;
-//# sourceMappingURL=RadioGroup.js.map
+exports["default"] = RadioGroup;

package/cjs/MenuItems/SearchableGroup.js

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var dsClassnames = require('@elliemae/ds-classnames');
 var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
@@ -10,74 +11,60 @@ var DSSearchBox = require('@elliemae/ds-form/SearchBox');
 var reactDesc = require('react-desc');
 var VirtualMenuList = require('../VirtualMenuList.js');
 var MenuContext = require('../MenuContext.js');
-require('react-window');
-require('../utils/useHeightByAmountOfItems.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSSearchBox__default = /*#__PURE__*/_interopDefaultLegacy(DSSearchBox);
 
-var SearchBoxWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'search-wrapper');
-var NoOptionsWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'no-options');
-
-function SearchableGroup(_ref) {
-  var children = _ref.children,
-      _ref$amountItemsInWin = _ref.amountItemsInWindow,
-      amountItemsInWindow = _ref$amountItemsInWin === void 0 ? 5 : _ref$amountItemsInWin,
-      _ref$searchTerm = _ref.searchTerm,
-      searchTermProp = _ref$searchTerm === void 0 ? '' : _ref$searchTerm,
-      _ref$noOptionsText = _ref.noOptionsText,
-      noOptionsText = _ref$noOptionsText === void 0 ? 'No options' : _ref$noOptionsText,
-      height = _ref.height,
-      width = _ref.width,
-      _ref$focusOnOpen = _ref.focusOnOpen,
-      focusOnOpen = _ref$focusOnOpen === void 0 ? false : _ref$focusOnOpen;
-  var searchRef = React.useRef(null);
-
-  var _useState = React.useState(searchTermProp),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      searchTerm = _useState2[0],
-      setSearchTerm = _useState2[1];
-
-  React.useEffect(function () {
+const SearchBoxWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'search-wrapper');
+const NoOptionsWrapper = dsClassnames.aggregatedClasses('div')('menu-search-group', 'no-options');
+
+function SearchableGroup({
+  children,
+  amountItemsInWindow = 5,
+  searchTerm: searchTermProp = '',
+  noOptionsText = 'No options',
+  height,
+  width,
+  focusOnOpen = false
+}) {
+  const searchRef = React.useRef(null);
+  const [searchTerm, setSearchTerm] = React.useState(searchTermProp);
+  React.useEffect(() => {
     if (searchRef.current) searchRef.current.focus();
   }, []);
-
-  var _ref2 = React.useContext(MenuContext) || {},
-      visible = _ref2.visible;
-
-  React.useEffect(function () {
+  const {
+    visible
+  } = React.useContext(MenuContext) || {};
+  React.useEffect(() => {
     if (focusOnOpen && visible) {
-      setTimeout(function () {
+      setTimeout(() => {
         if (searchRef.current) searchRef.current.focus();
       }, 0);
     }
   }, [focusOnOpen, visible]);
-  var filteredChildren = React.useMemo(function () {
-    return children.filter(function (child) {
-      return !searchTerm || child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase());
-    });
-  }, [children, searchTerm]);
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(SearchBoxWrapper, null, /*#__PURE__*/React__default['default'].createElement(DSSearchBox__default['default'], {
-    innerRef: searchRef,
-    onSearch: function onSearch(_ref3) {
-      var value = _ref3.value;
-      return setSearchTerm(value);
-    },
-    searchOnEnter: false,
-    showIcon: false,
-    value: searchTerm
-  })), !filteredChildren.length && /*#__PURE__*/React__default['default'].createElement(NoOptionsWrapper, null, noOptionsText), /*#__PURE__*/React__default['default'].createElement(VirtualMenuList, {
-    amountItemsInWindow: amountItemsInWindow,
-    height: height,
-    items: filteredChildren,
-    width: width
-  }));
+  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: ({
+        value
+      }) => 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
+    })]
+  });
 }
 
-var props = {
+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'),
 
@@ -99,11 +86,9 @@ var props = {
   /** weather to focus on searchable group on open */
   focusOnOpen: reactDesc.PropTypes.bool.description('weather to focus on searchable group on open')
 };
-SearchableGroup.propTypes = props;
-var DSMenuSearchableGroupWithSchema = reactDesc.describe(SearchableGroup);
+const DSMenuSearchableGroupWithSchema = reactDesc.describe(SearchableGroup);
 DSMenuSearchableGroupWithSchema.propTypes = props;
 var SearchableGroup$1 = FocusGroup.focusGroupManagerHoc(SearchableGroup);
 
 exports.DSMenuSearchableGroupWithSchema = DSMenuSearchableGroupWithSchema;
-exports['default'] = SearchableGroup$1;
-//# sourceMappingURL=SearchableGroup.js.map
+exports["default"] = SearchableGroup$1;

package/cjs/MenuItems/SearchableList.js

@@ -2,75 +2,56 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _extends = require('@babel/runtime/helpers/extends');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactDesc = require('react-desc');
-var dsUtilities = require('@elliemae/ds-utilities');
-var dsForm = require('@elliemae/ds-form');
+var utils = require('@elliemae/ds-utilities/utils');
+var DSComboBox = require('@elliemae/ds-form/ComboBox');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var DSComboBox__default = /*#__PURE__*/_interopDefaultLegacy(DSComboBox);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var noop = function noop() {};
-
-function SearchableList(_ref) {
-  var _ref$onSelectMenuItem = _ref.onSelectMenuItem,
-      onSelectMenuItem = _ref$onSelectMenuItem === void 0 ? noop : _ref$onSelectMenuItem,
-      _ref$components = _ref.components,
-      components = _ref$components === void 0 ? {} : _ref$components,
-      _ref$searchTerm = _ref.searchTerm,
-      searchTermProp = _ref$searchTerm === void 0 ? '' : _ref$searchTerm,
-      _ref$items = _ref.items,
-      items = _ref$items === void 0 ? [] : _ref$items,
-      _ref$dropdownFilterOp = _ref.dropdownFilterOptions,
-      dropdownFilterOptions = _ref$dropdownFilterOp === void 0 ? {} : _ref$dropdownFilterOp,
-      returnValue = _ref.returnValue,
-      _ref$extraListProps = _ref.extraListProps,
-      extraListProps = _ref$extraListProps === void 0 ? {} : _ref$extraListProps,
-      _ref$appendTermInList = _ref.appendTermInList,
-      appendTermInList = _ref$appendTermInList === void 0 ? false : _ref$appendTermInList,
-      _ref$maxOptions = _ref.maxOptions,
-      maxOptions = _ref$maxOptions === void 0 ? 10 : _ref$maxOptions,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading;
-
-  var _useState = React.useState(searchTermProp),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      searchTerm = _useState2[0],
-      setInputValue = _useState2[1];
-
-  var handleInputChange = React.useCallback(function (value, args) {
-    var action = args ? args.action : null;
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const noop = () => {};
+
+function SearchableList({
+  onSelectMenuItem = noop,
+  components = {},
+  searchTerm: searchTermProp = '',
+  items = [],
+  dropdownFilterOptions = {},
+  returnValue,
+  extraListProps = {},
+  appendTermInList = false,
+  maxOptions = 10,
+  loading = false
+}) {
+  const [searchTerm, setInputValue] = React.useState(searchTermProp);
+  const handleInputChange = React.useCallback((value, args) => {
+    const action = args ? args.action : null;
     if (action === 'input-blur' || action === 'menu-close') return;
     setInputValue(value);
   }, [searchTerm]);
-  var handleFilterByText = React.useCallback(function () {
+  const handleFilterByText = React.useCallback(() => {
     if (searchTerm) onSelectMenuItem(searchTerm);
   }, [searchTerm]);
-  var handleKeyDown = React.useCallback(function (e) {
+  const handleKeyDown = React.useCallback(e => {
     if (e.key === 'ArrowRight') {
       handleFilterByText();
     }
   }, [searchTerm]);
-  var options = React.useMemo(function () {
-    return searchTerm && appendTermInList ? dsUtilities.uniqBy([{
-      id: searchTerm,
-      label: searchTerm
-    }].concat(items), function (item) {
-      return item.label;
-    }) : items;
-  }, [searchTerm, appendTermInList]);
-  return /*#__PURE__*/React__default['default'].createElement(dsForm.DSComboBox, _extends__default['default']({
+  const options = React.useMemo(() => searchTerm && appendTermInList ? utils.uniqBy([{
+    id: searchTerm,
+    label: searchTerm
+  }].concat(items), item => item.label) : items, [searchTerm, appendTermInList]);
+  return /*#__PURE__*/jsxRuntime.jsx(DSComboBox__default["default"], _objectSpread(_objectSpread({
     autoFocus: true,
     components: _objectSpread({
       DropdownIndicator: null
@@ -90,10 +71,10 @@ function SearchableList(_ref) {
     valueProperty: "id",
     maxOptions: maxOptions,
     loading: loading
-  }, extraListProps, dropdownFilterOptions));
+  }, extraListProps), dropdownFilterOptions));
 }
 
-var props = {
+const props = {
   /** callback after item gets selected */
   onSelectMenuItem: reactDesc.PropTypes.func.description('callback after item gets selected'),
 
@@ -124,10 +105,8 @@ var props = {
   /**  loading flag */
   loading: reactDesc.PropTypes.bool.description('loading flag')
 };
-SearchableList.propTypes = props;
-var DSMenuSearchableListWithSchema = reactDesc.describe(SearchableList);
+const DSMenuSearchableListWithSchema = reactDesc.describe(SearchableList);
 DSMenuSearchableListWithSchema.propTypes = props;
 
 exports.DSMenuSearchableListWithSchema = DSMenuSearchableListWithSchema;
-exports['default'] = SearchableList;
-//# sourceMappingURL=SearchableList.js.map
+exports["default"] = SearchableList;