@elliemae/ds-menu 2.0.0-alpha.10 → 2.0.0-alpha.14

package/cjs/Menu.js

@@ -5,6 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.some.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.some.js');
+require('core-js/modules/esnext.async-iterator.constructor.js');
+require('core-js/modules/esnext.async-iterator.to-array.js');
+require('core-js/modules/esnext.iterator.to-array.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.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 lodash = require('lodash');
@@ -45,13 +57,16 @@ const blockName = 'menu';
 
 const noop = () => {};
 
-const MenuComponent = dsClassnames.aggregatedClasses('div')(blockName, '', ({
-  menuComboBox,
-  type
-}) => ({
-  'menu-combo-box': menuComboBox,
-  [`type-${type}`]: type
-}));
+const MenuComponent = dsClassnames.aggregatedClasses('div')(blockName, '', _ref => {
+  let {
+    menuComboBox,
+    type
+  } = _ref;
+  return {
+    'menu-combo-box': menuComboBox,
+    ["type-".concat(type)]: type
+  };
+});
 /**
  * todo: -- IDEA -- each menu could have an overlay based on an overlay stack context so we can
  * capture the context of the clicks on very nested components
@@ -59,7 +74,7 @@ const MenuComponent = dsClassnames.aggregatedClasses('div')(blockName, '', ({
 
 const isChildOfType = (child, type) => child.type.name === type;
 
-function DSMenu(_ref) {
+function DSMenu(_ref2) {
   let {
     containerProps = {},
     innerRef,
@@ -75,8 +90,8 @@ function DSMenu(_ref) {
     maxWidth = undefined,
     closeMenu,
     responsiveHeight = false
-  } = _ref,
-      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+  } = _ref2,
+      otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
 
   const menuRef = React.useRef(null);
   const {
@@ -129,7 +144,7 @@ function DSMenu(_ref) {
         maxWidth
       }, responsiveHeight ? {
         overflowY: 'scroll',
-        maxHeight: responsiveHeight ? `${window.innerHeight - RESPONSIVE_HEIHGT_MARGIN}px` : undefined
+        maxHeight: responsiveHeight ? "".concat(window.innerHeight - RESPONSIVE_HEIHGT_MARGIN, "px") : undefined
       } : {})
     }, void 0, nextChildren)
   }))) : null;

package/cjs/MenuCombobox.js

@@ -1,5 +1,10 @@
 'use strict';
 
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');

package/cjs/MenuItems/CheckboxGroup.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
 var reactDesc = require('react-desc');

package/cjs/MenuItems/MenuItem.js

@@ -5,13 +5,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+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 lodash = require('lodash');
 var dsClassnames = require('@elliemae/ds-classnames');
-var system = require('@elliemae/ds-utilities/system');
+var dsUtilities = require('@elliemae/ds-utilities');
 var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
-var utils = require('@elliemae/ds-utilities/utils');
 var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var menuItemFactory = require('./menuItemFactory.js');
 var SubMenu = require('./SubMenu.js');
@@ -35,13 +42,16 @@ const noop = () => null;
 
 const blockName = 'menu-item';
 const Content = dsClassnames.aggregatedClasses('div')(blockName, 'content');
-const Addon = dsClassnames.aggregatedClasses('div')(blockName, 'addon', ({
-  empty,
-  fixedItem
-}) => ({
-  empty,
-  fixedItem
-}));
+const Addon = dsClassnames.aggregatedClasses('div')(blockName, 'addon', _ref => {
+  let {
+    empty,
+    fixedItem
+  } = _ref;
+  return {
+    empty,
+    fixedItem
+  };
+});
 
 const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx__default["default"](Addon, {
   classProps: {
@@ -51,21 +61,25 @@ const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx__default["d
 
 const renderAddons = (addons, fixedItem) => Array.isArray(addons) ? addons.map(renderAddon) : renderAddon(addons, fixedItem);
 
-const Wrapper = dsClassnames.aggregatedClasses('li')(blockName, null, ({
-  disabled,
-  disabledAddonInactive,
-  customRenderer,
-  fixedItem,
-  type
-}) => ({
-  disabled,
-  disabledAddonInactive,
-  customRenderer,
-  fixedItem,
-  [`menu-type-${type}`]: type
-}));
-
-const calculateSize = (length = 0) => {
+const Wrapper = dsClassnames.aggregatedClasses('li')(blockName, null, _ref2 => {
+  let {
+    disabled,
+    disabledAddonInactive,
+    customRenderer,
+    fixedItem,
+    type
+  } = _ref2;
+  return {
+    disabled,
+    disabledAddonInactive,
+    customRenderer,
+    fixedItem,
+    ["menu-type-".concat(type)]: type
+  };
+});
+
+const calculateSize = function () {
+  let length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   if (length > 45) return 45 * 7;
   return length * 7;
 };
@@ -105,11 +119,11 @@ function MenuItem(props) {
 
   const wrapperProps = React.useMemo(() => lodash.omit(otherProps, ['icon']), [otherProps]);
 
-  const onClick = (...args) => {
-    if (wrapperProps.onClick) wrapperProps.onClick(...args);
+  const onClick = function () {
+    if (wrapperProps.onClick) wrapperProps.onClick(...arguments);
 
     if (wrapperProps.closeOnClick && menuCxt.closeMenu) {
-      menuCxt.closeMenu(...args);
+      menuCxt.closeMenu(...arguments);
     }
   };
 
@@ -123,8 +137,8 @@ function MenuItem(props) {
       type: otherProps.type
     },
     id: otherProps.id,
-    innerRef: otherProps.type !== 'disabled' ? system.mergeRefs(innerRef, ref) : innerRef,
-    onKeyDown: !fixedItem && utils.runAll(e => {
+    innerRef: otherProps.type !== 'disabled' ? dsUtilities.mergeRefs(innerRef, ref) : innerRef,
+    onKeyDown: !fixedItem && dsUtilities.runAll(e => {
       if (e.key === ' ' || e.key === 'Enter') {
         e.preventDefault();
         e.target.dispatchEvent(new MouseEvent('click', {
@@ -141,8 +155,8 @@ function MenuItem(props) {
     onClick: onClick,
     children: [!noAddon && renderAddons(leftAddon, fixedItem), label && /*#__PURE__*/_jsx__default["default"](Content, {
       style: maxOption > 0 ? {
-        width: `${calculateSize(maxOption)}px`,
-        maxWidth: `${calculateSize(maxOption)}px`
+        width: "".concat(calculateSize(maxOption), "px"),
+        maxWidth: "".concat(calculateSize(maxOption), "px")
       } : undefined
     }, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
       value: label

package/cjs/MenuItems/MenuItemCheckable.js

@@ -2,13 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('react');
 var reactDesc = require('react-desc');
-var Checkmark = require('@elliemae/ds-icons/Checkmark');
-var utils = require('@elliemae/ds-utilities/utils');
+var dsIcons = require('@elliemae/ds-icons');
+var dsUtilities = require('@elliemae/ds-utilities');
 var MenuItem = require('./MenuItem.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -17,7 +22,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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;
 
@@ -27,9 +31,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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
-}) {
+function useCheckable(_ref) {
+  let {
+    checked
+  } = _ref;
   return {
     checked,
     'aria-checked': checked
@@ -49,27 +54,27 @@ function useCheckable({
  */
 
 
-function MenuItemCheckable(_ref) {
+function MenuItemCheckable(_ref2) {
   let {
     role = 'menuitemcheckbox',
     checked = false,
     name = '',
-    checkIcon = /*#__PURE__*/_jsx__default["default"](Checkmark__default["default"], {
+    checkIcon = /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
       color: ['brand-primary', 600]
     }),
     // eslint-disable-next-line react/prop-types
     children,
     leftAddon,
     item = undefined
-  } = _ref,
-      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+  } = _ref2,
+      otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
 
   const checkableProps = useCheckable({
     checked,
     name
   });
 
-  const handleClick = () => utils.runAll(otherProps.onClick, checkableProps.onClick)({
+  const handleClick = () => dsUtilities.runAll(otherProps.onClick, checkableProps.onClick)({
     target: {
       value: name,
       checked

package/cjs/MenuItems/MenuItemCheckbox.js

@@ -1,10 +1,15 @@
 'use strict';
 
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('react');
-var DSCheckbox = require('@elliemae/ds-form/Checkbox');
+var dsForm = require('@elliemae/ds-form');
 var MenuItemCheckable = require('./MenuItemCheckable.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -13,7 +18,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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"];
 
@@ -28,7 +32,7 @@ function MenuItemCheckbox(_ref) {
       rest = _objectWithoutProperties__default["default"](_ref, _excluded);
 
   return /*#__PURE__*/jsxRuntime.jsx(MenuItemCheckable["default"], _objectSpread(_objectSpread({}, rest), {}, {
-    leftAddon: /*#__PURE__*/_jsx__default["default"](DSCheckbox__default["default"], {
+    leftAddon: /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
       checked: checked
     }),
     role: "menuitemcheckbox"

package/cjs/MenuItems/MenuItemRadio.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
 var reactDesc = require('react-desc');

package/cjs/MenuItems/RadioGroup.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
 var reactDesc = require('react-desc');

package/cjs/MenuItems/SearchableGroup.js

@@ -3,6 +3,10 @@
 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');
@@ -20,15 +24,16 @@ 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({
-  children,
-  amountItemsInWindow = 5,
-  searchTerm: searchTermProp = '',
-  noOptionsText = 'No options',
-  height,
-  width,
-  focusOnOpen = false
-}) {
+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(() => {
@@ -48,9 +53,12 @@ function SearchableGroup({
   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),
+      onSearch: _ref2 => {
+        let {
+          value
+        } = _ref2;
+        return setSearchTerm(value);
+      },
       searchOnEnter: false,
       showIcon: false,
       value: searchTerm

package/cjs/MenuItems/SearchableList.js

@@ -3,16 +3,21 @@
 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 utils = require('@elliemae/ds-utilities/utils');
-var DSComboBox = require('@elliemae/ds-form/ComboBox');
+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);
-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; }
 
@@ -20,18 +25,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 const noop = () => {};
 
-function SearchableList({
-  onSelectMenuItem = noop,
-  components = {},
-  searchTerm: searchTermProp = '',
-  items = [],
-  dropdownFilterOptions = {},
-  returnValue,
-  extraListProps = {},
-  appendTermInList = false,
-  maxOptions = 10,
-  loading = false
-}) {
+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) => {
     const action = args ? args.action : null;
@@ -46,11 +52,11 @@ function SearchableList({
       handleFilterByText();
     }
   }, [searchTerm]);
-  const options = React.useMemo(() => searchTerm && appendTermInList ? utils.uniqBy([{
+  const options = React.useMemo(() => searchTerm && appendTermInList ? dsUtilities.uniqBy([{
     id: searchTerm,
     label: searchTerm
   }].concat(items), item => item.label) : items, [searchTerm, appendTermInList]);
-  return /*#__PURE__*/jsxRuntime.jsx(DSComboBox__default["default"], _objectSpread(_objectSpread({
+  return /*#__PURE__*/jsxRuntime.jsx(dsForm.DSComboBox, _objectSpread(_objectSpread({
     autoFocus: true,
     components: _objectSpread({
       DropdownIndicator: null

package/cjs/MenuItems/SelectionGroup.js

@@ -4,6 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.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 CheckableGroup = require('@elliemae/ds-shared/CheckableGroup');
@@ -22,17 +29,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 const noop = () => null;
 
-function SelectionGroup({
-  multi = false,
-  searchable = false,
-  focusOnOpen = false,
-  onSelect = noop,
-  children,
-  items = undefined,
-  active = multi ? [] : '',
-  width,
-  height
-}) {
+function SelectionGroup(_ref) {
+  let {
+    multi = false,
+    searchable = false,
+    focusOnOpen = false,
+    onSelect = noop,
+    children,
+    items = undefined,
+    active = multi ? [] : '',
+    width,
+    height,
+    maxOptions = 5
+  } = _ref;
   const renderedItems = React.useMemo(() => items && items.map(item => {
     const Component = menuItemFactory.menuItemFactory(multi ? 'checkbox' : 'radio');
     return /*#__PURE__*/React.createElement(Component, _objectSpread(_objectSpread({}, item), {}, {
@@ -60,7 +69,8 @@ function SelectionGroup({
   return /*#__PURE__*/_jsx__default["default"](VirtualMenuList, {
     height: height,
     items: decoratedGroupChildren,
-    width: width
+    width: width,
+    amountItemsInWindow: maxOptions
   });
 }
 

package/cjs/MenuItems/Separator.js

@@ -22,10 +22,13 @@ const Li = /*#__PURE__*/styled__default["default"].li.withConfig({
 })(["display:flex;align-items:flex-start;flex-direction:column;"]);
 const Title = dsClassnames.aggregatedClasses('h5')(blockName, 'title');
 
-const MenuSeparator = ({
-  title,
-  showSeparator = true
-}) => /*#__PURE__*/_jsx__default["default"](Li, {}, void 0, showSeparator && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {}))), title && /*#__PURE__*/_jsx__default["default"](Title, {}, void 0, title));
+const MenuSeparator = _ref => {
+  let {
+    title,
+    showSeparator = true
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](Li, {}, void 0, showSeparator && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {}))), title && /*#__PURE__*/_jsx__default["default"](Title, {}, void 0, title));
+};
 
 const props = {
   /** menu separator h5 title */

package/cjs/MenuItems/SubMenu.js

@@ -4,15 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 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');
+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 ChevronRight = require('@elliemae/ds-icons/ChevronSmallRight');
-var VerticalElipsis = require('@elliemae/ds-icons/MoreOptionsVert');
+var dsIcons = require('@elliemae/ds-icons');
 var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
 var dsHidden = require('@elliemae/ds-hidden');
 var DSButton = require('@elliemae/ds-button');
 var DSPopper = require('@elliemae/ds-popper');
-var interaction = require('@elliemae/ds-popper/interaction');
 var styled = require('styled-components');
 var Menu = require('../Menu.js');
 var MenuItem = require('./MenuItem.js');
@@ -22,8 +26,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var ChevronRight__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRight);
-var VerticalElipsis__default = /*#__PURE__*/_interopDefaultLegacy(VerticalElipsis);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
@@ -35,20 +37,21 @@ const ChevronRightComp = /*#__PURE__*/styled__default["default"].div.withConfig(
   componentId: "sc-1qhp1z-0"
 })(["display:flex;justify-content:center;align-items:center;width:28px;"]);
 
-function SubMenu({
-  noAddon,
-  leftAddon = undefined,
-  label = undefined,
-  interactionType = 'hover',
-  children: subitems,
-  rightAddonType,
-  disabledAddonInactive,
-  checkableProps = {},
-  customRenderer,
-  onClick,
-  closeMenu,
-  id
-}) {
+function SubMenu(_ref) {
+  let {
+    noAddon,
+    leftAddon = undefined,
+    label = undefined,
+    interactionType = 'hover',
+    children: subitems,
+    rightAddonType,
+    disabledAddonInactive,
+    checkableProps = {},
+    customRenderer,
+    onClick,
+    closeMenu,
+    id
+  } = _ref;
   const itemRef = React.useRef(null);
   const focusOnOpen = React.useRef(false);
   const [isAddonHovered, setIsAddonHovered] = React.useState(false);
@@ -104,7 +107,7 @@ function SubMenu({
     "aria-label": "vertical-elipsis",
     "data-testid": "vertical-elipsis",
     buttonType: "text",
-    leftIcon: /*#__PURE__*/_jsx__default["default"](VerticalElipsis__default["default"], {
+    leftIcon: /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {
       className: "submenu-arrow",
       color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
       size: "s"
@@ -112,7 +115,7 @@ function SubMenu({
     onClick: e => handleShowSubItemsWithMouse(e),
     size: "m",
     variant: DSButton.BUTTON_VARIANT.DEFAULT
-  }) : /*#__PURE__*/_jsx__default["default"](ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx__default["default"](ChevronRight__default["default"], {
+  }) : /*#__PURE__*/_jsx__default["default"](ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallRight, {
     "data-testid": "chevron-right",
     className: "submenu-arrow",
     color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
@@ -171,7 +174,7 @@ const props = {
   label: reactDesc.PropTypes.string.description('submenu label'),
 
   /** A type indicating how to open/close the tooltip */
-  interactionType: reactDesc.PropTypes.oneOf(interaction.interactions).description('A type indicating how to open/close the tooltip'),
+  interactionType: reactDesc.PropTypes.oneOf(DSPopper.interactions).description('A type indicating how to open/close the tooltip'),
 
   /** sub menu items */
   children: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.array, reactDesc.PropTypes.node]).description('sub menu items'),