@elliemae/ds-menu 2.0.0-next.8 → 2.0.0-rc.11

package/cjs/MenuItems/menuItemFactory.js

@@ -3,8 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 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 utils = require('@elliemae/ds-utilities/utils');
+var dsUtilities = require('@elliemae/ds-utilities');
 var Separator = require('./Separator.js');
 var MenuItem = require('./MenuItem.js');
 var SubMenu = require('./SubMenu.js');
@@ -30,14 +37,18 @@ const itemTypes = {
 const fallback = {
   SelectionGroup: 'selection-group'
 };
-function menuItemFactory(type = '', items, defaultItem = itemTypes.menuitem) {
+function menuItemFactory() {
+  let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let items = arguments.length > 1 ? arguments[1] : undefined;
+  let defaultItem = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : itemTypes.menuitem;
   const itemsObject = items || itemTypes;
   const parsedType = fallback[type] || type.toLowerCase();
   return itemsObject[parsedType] || defaultItem;
 }
-function renderMenuItems(options, factory = menuItemFactory) {
+function renderMenuItems(options) {
+  let factory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : menuItemFactory;
   return options.map((option, index) => {
-    if (utils.isFunction(option.renderer)) {
+    if (dsUtilities.isFunction(option.renderer)) {
       return option.renderer({
         key: option.id,
         item: option

package/cjs/VirtualMenuList.js

@@ -1,6 +1,9 @@
 'use strict';
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('react');
 var reactWindow = require('react-window');
 var useHeightByAmountOfItems = require('./utils/useHeightByAmountOfItems.js');
@@ -9,21 +12,25 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const MenuItem = ({
-  data,
-  index,
-  style
-}) => /*#__PURE__*/_jsx__default["default"]("div", {
-  style: style
-}, index, data && data[index] ? data[index] : ''); // eslint-disable-next-line no-unused-vars
+const MenuItem = _ref => {
+  let {
+    data,
+    index,
+    style
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("div", {
+    style: style
+  }, index, data && data[index] ? data[index] : '');
+}; // eslint-disable-next-line no-unused-vars
 
-function VirtualMenuList({
-  items,
-  itemHeight = 32,
-  amountItemsInWindow = 5,
-  width,
-  height
-}) {
+function VirtualMenuList(_ref2) {
+  let {
+    items,
+    itemHeight = 32,
+    amountItemsInWindow = 5,
+    width,
+    height
+  } = _ref2;
   const computedListHeight = useHeightByAmountOfItems({
     amountItems: amountItemsInWindow,
     itemHeight,

package/cjs/utils/useHeightByAmountOfItems.js

@@ -7,11 +7,12 @@ const calculateHeight = (itemHeight, amountItemsInWindow, itemsLength) => {
   return itemHeight * realAmountItemsInWindow;
 };
 
-function useHeightByAmountOfItems({
-  itemHeight,
-  amountItems,
-  items
-}) {
+function useHeightByAmountOfItems(_ref) {
+  let {
+    itemHeight,
+    amountItems,
+    items
+  } = _ref;
   const calculatedHeight = React.useMemo(() => calculateHeight(itemHeight, amountItems, items.length), [amountItems, items]);
   return calculatedHeight;
 }

package/esm/Menu.js

@@ -1,6 +1,18 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import 'core-js/modules/esnext.async-iterator.constructor.js';
+import 'core-js/modules/esnext.async-iterator.to-array.js';
+import 'core-js/modules/esnext.iterator.to-array.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.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 React, { useRef, useContext, useMemo, useEffect } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import { omit } from 'lodash';
@@ -34,13 +46,16 @@ const blockName = 'menu';
 
 const noop = () => {};
 
-const MenuComponent = aggregatedClasses('div')(blockName, '', ({
-  menuComboBox,
-  type
-}) => ({
-  'menu-combo-box': menuComboBox,
-  ["type-".concat(type)]: type
-}));
+const MenuComponent = 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
@@ -48,7 +63,7 @@ const MenuComponent = aggregatedClasses('div')(blockName, '', ({
 
 const isChildOfType = (child, type) => child.type.name === type;
 
-function DSMenu(_ref) {
+function DSMenu(_ref2) {
   let {
     containerProps = {},
     innerRef,
@@ -64,8 +79,8 @@ function DSMenu(_ref) {
     maxWidth = undefined,
     closeMenu,
     responsiveHeight = false
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
 
   const menuRef = useRef(null);
   const {

package/esm/MenuCombobox.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';

package/esm/MenuItems/CheckboxGroup.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import { PropTypes, describe } from 'react-desc';

package/esm/MenuItems/MenuItem.js

@@ -1,14 +1,20 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useRef, useMemo } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import { omit } from 'lodash';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
-import { mergeRefs } from '@elliemae/ds-utilities/system';
+import { mergeRefs, runAll } from '@elliemae/ds-utilities';
 import { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';
-import { runAll } from '@elliemae/ds-utilities/utils';
 import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
 import { renderMenuItems } from './menuItemFactory.js';
 import SubMenu from './SubMenu.js';
@@ -25,13 +31,16 @@ const noop = () => null;
 
 const blockName = 'menu-item';
 const Content = aggregatedClasses('div')(blockName, 'content');
-const Addon = aggregatedClasses('div')(blockName, 'addon', ({
-  empty,
-  fixedItem
-}) => ({
-  empty,
-  fixedItem
-}));
+const Addon = aggregatedClasses('div')(blockName, 'addon', _ref => {
+  let {
+    empty,
+    fixedItem
+  } = _ref;
+  return {
+    empty,
+    fixedItem
+  };
+});
 
 const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx(Addon, {
   classProps: {
@@ -41,21 +50,25 @@ const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx(Addon, {
 
 const renderAddons = (addons, fixedItem) => Array.isArray(addons) ? addons.map(renderAddon) : renderAddon(addons, fixedItem);
 
-const Wrapper = aggregatedClasses('li')(blockName, null, ({
-  disabled,
-  disabledAddonInactive,
-  customRenderer,
-  fixedItem,
-  type
-}) => ({
-  disabled,
-  disabledAddonInactive,
-  customRenderer,
-  fixedItem,
-  ["menu-type-".concat(type)]: type
-}));
-
-const calculateSize = (length = 0) => {
+const Wrapper = 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;
 };
@@ -95,11 +108,11 @@ function MenuItem(props) {
 
   const wrapperProps = useMemo(() => 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);
     }
   };
 

package/esm/MenuItems/MenuItemCheckable.js

@@ -1,10 +1,15 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
-import Checkmark from '@elliemae/ds-icons/Checkmark';
-import { runAll } from '@elliemae/ds-utilities/utils';
+import { Checkmark } from '@elliemae/ds-icons';
+import { runAll } from '@elliemae/ds-utilities';
 import MenuItem from './MenuItem.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -16,9 +21,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(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
@@ -38,7 +44,7 @@ function useCheckable({
  */
 
 
-function MenuItemCheckable(_ref) {
+function MenuItemCheckable(_ref2) {
   let {
     role = 'menuitemcheckbox',
     checked = false,
@@ -50,8 +56,8 @@ function MenuItemCheckable(_ref) {
     children,
     leftAddon,
     item = undefined
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
 
   const checkableProps = useCheckable({
     checked,

package/esm/MenuItems/MenuItemCheckbox.js

@@ -1,8 +1,13 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';
-import DSCheckbox from '@elliemae/ds-form/Checkbox';
+import { DSCheckbox } from '@elliemae/ds-form';
 import MenuItemCheckable from './MenuItemCheckable.js';
 import { jsx } from 'react/jsx-runtime';
 

package/esm/MenuItems/MenuItemRadio.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import { PropTypes, describe } from 'react-desc';

package/esm/MenuItems/RadioGroup.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import { PropTypes, describe } from 'react-desc';

package/esm/MenuItems/SearchableGroup.js

@@ -1,5 +1,8 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import { useRef, useState, useEffect, useContext, useMemo } from 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import { focusGroupManagerHoc } from '@elliemae/ds-shared/FocusGroup';
@@ -12,15 +15,16 @@ import { jsxs, Fragment } from 'react/jsx-runtime';
 const SearchBoxWrapper = aggregatedClasses('div')('menu-search-group', 'search-wrapper');
 const NoOptionsWrapper = 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 = useRef(null);
   const [searchTerm, setSearchTerm] = useState(searchTermProp);
   useEffect(() => {
@@ -40,9 +44,12 @@ function SearchableGroup({
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/_jsx(SearchBoxWrapper, {}, void 0, /*#__PURE__*/_jsx(DSSearchBox, {
       innerRef: searchRef,
-      onSearch: ({
-        value
-      }) => setSearchTerm(value),
+      onSearch: _ref2 => {
+        let {
+          value
+        } = _ref2;
+        return setSearchTerm(value);
+      },
       searchOnEnter: false,
       showIcon: false,
       value: searchTerm

package/esm/MenuItems/SearchableList.js

@@ -1,9 +1,14 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useCallback, useMemo } from 'react';
 import { PropTypes, describe } from 'react-desc';
-import { uniqBy } from '@elliemae/ds-utilities/utils';
-import DSComboBox from '@elliemae/ds-form/ComboBox';
+import { uniqBy } from '@elliemae/ds-utilities';
+import { DSComboBox } from '@elliemae/ds-form';
 import { jsx } from 'react/jsx-runtime';
 
 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; }
@@ -12,18 +17,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] = useState(searchTermProp);
   const handleInputChange = useCallback((value, args) => {
     const action = args ? args.action : null;

package/esm/MenuItems/SelectionGroup.js

@@ -1,5 +1,12 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.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 { useMemo, createElement } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import { useCheckableGroup } from '@elliemae/ds-shared/CheckableGroup';
@@ -13,17 +20,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 = useMemo(() => items && items.map(item => {
     const Component = menuItemFactory(multi ? 'checkbox' : 'radio');
     return /*#__PURE__*/createElement(Component, _objectSpread(_objectSpread({}, item), {}, {
@@ -51,7 +60,8 @@ function SelectionGroup({
   return /*#__PURE__*/_jsx(VirtualMenuList, {
     height: height,
     items: decoratedGroupChildren,
-    width: width
+    width: width,
+    amountItemsInWindow: maxOptions
   });
 }
 

package/esm/MenuItems/Separator.js

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

package/esm/MenuItems/SubMenu.js

@@ -1,15 +1,18 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useCallback } from 'react';
 import { PropTypes, describe } from 'react-desc';
-import ChevronRight from '@elliemae/ds-icons/ChevronSmallRight';
-import VerticalElipsis from '@elliemae/ds-icons/MoreOptionsVert';
+import { MoreOptionsVert, ChevronSmallRight } from '@elliemae/ds-icons';
 import { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';
 import { useHiddenController } from '@elliemae/ds-hidden';
 import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-button';
-import DSPopper from '@elliemae/ds-popper';
-import { interactions } from '@elliemae/ds-popper/interaction';
+import DSPopper, { interactions } from '@elliemae/ds-popper';
 import styled from 'styled-components';
 import { Menu } from '../Menu.js';
 import MenuItem from './MenuItem.js';
@@ -22,20 +25,21 @@ const ChevronRightComp = /*#__PURE__*/styled.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 = useRef(null);
   const focusOnOpen = useRef(false);
   const [isAddonHovered, setIsAddonHovered] = useState(false);
@@ -91,7 +95,7 @@ function SubMenu({
     "aria-label": "vertical-elipsis",
     "data-testid": "vertical-elipsis",
     buttonType: "text",
-    leftIcon: /*#__PURE__*/_jsx(VerticalElipsis, {
+    leftIcon: /*#__PURE__*/_jsx(MoreOptionsVert, {
       className: "submenu-arrow",
       color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
       size: "s"
@@ -99,7 +103,7 @@ function SubMenu({
     onClick: e => handleShowSubItemsWithMouse(e),
     size: "m",
     variant: BUTTON_VARIANT.DEFAULT
-  }) : /*#__PURE__*/_jsx(ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx(ChevronRight, {
+  }) : /*#__PURE__*/_jsx(ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx(ChevronSmallRight, {
     "data-testid": "chevron-right",
     className: "submenu-arrow",
     color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],