@elliemae/ds-menu 1.60.0 → 2.0.0-alpha.12

package/cjs/SubMenu-22be0a18.js

@@ -1,806 +0,0 @@
-'use strict';
-
-var _extends = require('@babel/runtime/helpers/extends');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var React = require('react');
-var reactDesc = require('react-desc');
-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 styled = require('styled-components');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var lodash = require('lodash');
-var dsClassnames = require('@elliemae/ds-classnames');
-var web_cjs = require('react-spring/web.cjs');
-var dsUtilities = require('@elliemae/ds-utilities');
-var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
-var MenuItems_Separator = require('./MenuItems/Separator.js');
-var CheckableGroup = require('@elliemae/ds-shared/CheckableGroup');
-var MenuItems_SearchableGroup = require('./MenuItems/SearchableGroup.js');
-var VirtualMenuList = require('./VirtualMenuList.js');
-var dsForm = require('@elliemae/ds-form');
-var MenuContext = require('./MenuContext.js');
-var MenuItems_CheckboxGroup = require('./MenuItems/CheckboxGroup.js');
-var MenuItems_RadioGroup = require('./MenuItems/RadioGroup.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
-
-var noop$2 = function noop() {
-  return null;
-};
-
-function SelectionGroup(_ref) {
-  var _ref$multi = _ref.multi,
-      multi = _ref$multi === void 0 ? false : _ref$multi,
-      _ref$searchable = _ref.searchable,
-      searchable = _ref$searchable === void 0 ? false : _ref$searchable,
-      _ref$focusOnOpen = _ref.focusOnOpen,
-      focusOnOpen = _ref$focusOnOpen === void 0 ? false : _ref$focusOnOpen,
-      _ref$onSelect = _ref.onSelect,
-      onSelect = _ref$onSelect === void 0 ? noop$2 : _ref$onSelect,
-      children = _ref.children,
-      _ref$items = _ref.items,
-      items = _ref$items === void 0 ? undefined : _ref$items,
-      _ref$active = _ref.active,
-      active = _ref$active === void 0 ? multi ? [] : '' : _ref$active,
-      width = _ref.width,
-      height = _ref.height;
-  var renderedItems = React.useMemo(function () {
-    return items && items.map(function (item) {
-      var Component = menuItemFactory(multi ? 'checkbox' : 'radio');
-      return /*#__PURE__*/React__default['default'].createElement(Component, _extends__default['default']({}, item, {
-        key: item.name || item.id || item.key,
-        item: item,
-        name: item.id || item.name
-      }));
-    });
-  }, [items]);
-  var decoratedGroupChildren = CheckableGroup.useCheckableGroup({
-    children: renderedItems || children,
-    multi: multi,
-    active: active,
-    onCheck: onSelect
-  });
-
-  if (searchable) {
-    return /*#__PURE__*/React__default['default'].createElement(MenuItems_SearchableGroup['default'], {
-      focusOnOpen: focusOnOpen,
-      height: height,
-      items: items,
-      width: width
-    }, decoratedGroupChildren);
-  }
-
-  return /*#__PURE__*/React__default['default'].createElement(VirtualMenuList, {
-    height: height,
-    items: decoratedGroupChildren,
-    width: width
-  });
-}
-
-var props$5 = {
-  /** toggle on multi select */
-  multi: reactDesc.PropTypes.bool.description('toggle on multi select'),
-
-  /** toggle on searchable behavior */
-  searchable: reactDesc.PropTypes.bool.description('toggle on searchable behavior'),
-
-  /** toggle to focus component on open */
-  focusOnOpen: reactDesc.PropTypes.bool.description('toggle to focus component on open'),
-
-  /** callback that triggers when select happens */
-  onSelect: reactDesc.PropTypes.func.description('callback that triggers when select happens'),
-  children: reactDesc.PropTypes.node.description(''),
-
-  /** selection group items  */
-  items: reactDesc.PropTypes.array.description('selection group items'),
-
-  /** array of values for multi and string for single selection */
-  active: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.array]).description('array of values for multi and string for single selection'),
-
-  /** selection group width */
-  width: reactDesc.PropTypes.number.description('selection group width'),
-
-  /** selection group height */
-  height: reactDesc.PropTypes.number.description('selection group height')
-};
-SelectionGroup.propTypes = props$5;
-var DSMenuSelectionGroupWithSchema = reactDesc.describe(SelectionGroup);
-DSMenuSelectionGroupWithSchema.propTypes = props$5;
-
-var _excluded$3 = ["checked"];
-
-function MenuItemCheckbox(_ref) {
-  var checked = _ref.checked,
-      rest = _objectWithoutProperties__default['default'](_ref, _excluded$3);
-
-  return /*#__PURE__*/React__default['default'].createElement(MenuItemCheckable, _extends__default['default']({}, rest, {
-    leftAddon: /*#__PURE__*/React__default['default'].createElement(dsForm.DSCheckbox, {
-      checked: checked
-    }),
-    role: "menuitemcheckbox"
-  }));
-}
-
-var itemTypes = {
-  separator: MenuItems_Separator['default'],
-  menuitem: MenuItem,
-  radio: MenuItemRadio,
-  checkbox: MenuItemCheckbox,
-  submenu: SubMenu,
-  'selection-group': SelectionGroup
-};
-var fallback = {
-  SelectionGroup: 'selection-group'
-};
-function menuItemFactory() {
-  var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  var items = arguments.length > 1 ? arguments[1] : undefined;
-  var defaultItem = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : itemTypes.menuitem;
-  var itemsObject = items || itemTypes;
-  var parsedType = fallback[type] || type.toLowerCase();
-  return itemsObject[parsedType] || defaultItem;
-}
-function renderMenuItems(options) {
-  var factory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : menuItemFactory;
-  return options.map(function (option, index) {
-    if (dsUtilities.isFunction(option.renderer)) {
-      return option.renderer({
-        key: option.id,
-        item: option
-      });
-    }
-
-    var ItemComponent = factory(option.type);
-    var children = option.subItems && renderMenuItems(option.subItems, factory);
-    return /*#__PURE__*/React__default['default'].createElement(ItemComponent, _extends__default['default']({}, option, {
-      key: option.id || index,
-      item: option,
-      onClick: null,
-      onMouseDown: option.onClick // onClick callback called in onMouseDown due to events order issue
-
-    }), children);
-  });
-}
-
-var _excluded$2 = ["innerRef", "as", "role", "leftAddon", "rightAddon", "disabledAddonInactive", "label", "children", "tabIndex", "onKeyDown", "fixedItem", "noAddon", "disabled", "customRenderer", "maxOption", "closeMenu", "style"];
-
-var noop$1 = function noop() {
-  return null;
-};
-
-var blockName$1 = 'menu-item';
-var Content = dsClassnames.aggregatedClasses('div')(blockName$1, 'content');
-var Addon = dsClassnames.aggregatedClasses('div')(blockName$1, 'addon', function (_ref) {
-  var empty = _ref.empty,
-      fixedItem = _ref.fixedItem;
-  return {
-    empty: empty,
-    fixedItem: fixedItem
-  };
-});
-
-var renderAddon = function renderAddon(addon, fixedItem, addonId) {
-  return /*#__PURE__*/React__default['default'].createElement(Addon, {
-    key: addonId,
-    classProps: {
-      fixedItem: fixedItem
-    }
-  }, addon);
-};
-
-var renderAddons = function renderAddons(addons, fixedItem) {
-  return Array.isArray(addons) ? addons.map(renderAddon) : renderAddon(addons, fixedItem);
-};
-
-var Wrapper = dsClassnames.aggregatedClasses('li')(blockName$1, null, function (_ref2) {
-  var disabled = _ref2.disabled,
-      disabledAddonInactive = _ref2.disabledAddonInactive,
-      customRenderer = _ref2.customRenderer,
-      fixedItem = _ref2.fixedItem,
-      type = _ref2.type;
-  return _defineProperty__default['default']({
-    disabled: disabled,
-    disabledAddonInactive: disabledAddonInactive,
-    customRenderer: customRenderer,
-    fixedItem: fixedItem
-  }, "menu-type-".concat(type), type);
-});
-
-var calculateSize = function calculateSize() {
-  var length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  if (length > 45) return 45 * 7;
-  return length * 7;
-};
-
-function MenuItem(props) {
-  var innerRef = props.innerRef,
-      _props$as = props.as,
-      as = _props$as === void 0 ? 'li' : _props$as,
-      _props$role = props.role,
-      role = _props$role === void 0 ? 'menuitem' : _props$role,
-      _props$leftAddon = props.leftAddon,
-      leftAddon = _props$leftAddon === void 0 ? null : _props$leftAddon,
-      _props$rightAddon = props.rightAddon,
-      rightAddon = _props$rightAddon === void 0 ? undefined : _props$rightAddon,
-      _props$disabledAddonI = props.disabledAddonInactive,
-      disabledAddonInactive = _props$disabledAddonI === void 0 ? undefined : _props$disabledAddonI,
-      _props$label = props.label,
-      label = _props$label === void 0 ? undefined : _props$label,
-      children = props.children,
-      _props$tabIndex = props.tabIndex,
-      tabIndex = _props$tabIndex === void 0 ? -1 : _props$tabIndex,
-      _props$onKeyDown = props.onKeyDown,
-      onKeyDown = _props$onKeyDown === void 0 ? noop$1 : _props$onKeyDown,
-      _props$fixedItem = props.fixedItem,
-      fixedItem = _props$fixedItem === void 0 ? false : _props$fixedItem,
-      noAddon = props.noAddon,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      customRenderer = props.customRenderer,
-      maxOption = props.maxOption;
-      props.closeMenu;
-      var style = props.style,
-      otherProps = _objectWithoutProperties__default['default'](props, _excluded$2);
-
-  var menuCxt = React.useContext(MenuContext);
-  var ref = React.useRef(null);
-  FocusGroup.useFocusGroupItem(ref);
-
-  if (otherProps.subItems) {
-    return /*#__PURE__*/React__default['default'].createElement(SubMenu, _extends__default['default']({}, props, {
-      closeMenu: menuCxt.closeMenu
-    }), renderMenuItems(otherProps.subItems));
-  }
-
-  var wrapperProps = React.useMemo(function () {
-    return lodash.omit(otherProps, ['icon']);
-  }, [otherProps]);
-
-  var onClick = function onClick() {
-    if (wrapperProps.onClick) wrapperProps.onClick.apply(wrapperProps, arguments);
-
-    if (wrapperProps.closeOnClick && menuCxt.closeMenu) {
-      menuCxt.closeMenu.apply(menuCxt, arguments);
-    }
-  };
-
-  return /*#__PURE__*/React__default['default'].createElement(Wrapper, _extends__default['default']({
-    as: as,
-    classProps: {
-      disabled: disabled,
-      disabledAddonInactive: disabledAddonInactive,
-      customRenderer: customRenderer,
-      fixedItem: fixedItem,
-      type: otherProps.type
-    },
-    id: otherProps.id,
-    innerRef: otherProps.type !== 'disabled' ? dsUtilities.mergeRefs(innerRef, ref) : innerRef,
-    onKeyDown: !fixedItem && dsUtilities.runAll(function (e) {
-      if (e.key === ' ' || e.key === 'Enter') {
-        e.preventDefault();
-        e.target.dispatchEvent(new MouseEvent('click', {
-          view: window,
-          bubbles: true,
-          cancelable: false
-        }));
-      }
-    }, onKeyDown),
-    role: role,
-    style: style,
-    tabIndex: tabIndex
-  }, wrapperProps, {
-    onClick: onClick
-  }), !noAddon && renderAddons(leftAddon, fixedItem), label && /*#__PURE__*/React__default['default'].createElement(Content, {
-    style: maxOption > 0 ? {
-      width: "".concat(calculateSize(maxOption), "px"),
-      maxWidth: "".concat(calculateSize(maxOption), "px")
-    } : undefined
-  }, /*#__PURE__*/React__default['default'].createElement(DSTruncatedTooltipText__default['default'], {
-    value: label
-  })), customRenderer, rightAddon && renderAddons(rightAddon), children);
-}
-
-var props$4 = {
-  /** Renders the MenuItem with a specific html element */
-  as: reactDesc.PropTypes.element.description('Renders the MenuItem with a specific html element'),
-
-  /**
-   * reference to the component
-   */
-  innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.shape({
-    current: reactDesc.PropTypes.any
-  })]).description('reference to the component'),
-
-  /** Renders the passed element to the left */
-  leftAddon: reactDesc.PropTypes.element.description('Renders the passed element to the left'),
-
-  /** Renders the passed element to the right */
-  rightAddon: reactDesc.PropTypes.element.description('Renders the passed element to the right'),
-
-  /** Label for the menu item */
-  label: reactDesc.PropTypes.string.description('Label for the menu item'),
-
-  /** style object for menu item wrapper */
-  style: reactDesc.PropTypes.object.description('style object for menu item wrapper'),
-
-  /** disable menu item */
-  disabled: reactDesc.PropTypes.bool.description('disable menu item'),
-
-  /** HTML tabindex to manage focus order */
-  tabindex: reactDesc.PropTypes.number.description('HTML tabindex to manage focus order'),
-
-  /** a11y role */
-  role: reactDesc.PropTypes.string.description('a11y role')
-};
-MenuItem.propTypes = props$4;
-var DSMenuItemWithSchema = reactDesc.describe(MenuItem);
-DSMenuItemWithSchema.propTypes = props$4;
-
-var _excluded$1 = ["role", "checked", "name", "checkIcon", "children", "leftAddon", "item"];
-
-function useCheckable(_ref) {
-  var checked = _ref.checked;
-  return {
-    checked: 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(_ref2) {
-  var _ref2$role = _ref2.role,
-      role = _ref2$role === void 0 ? 'menuitemcheckbox' : _ref2$role,
-      _ref2$checked = _ref2.checked,
-      checked = _ref2$checked === void 0 ? false : _ref2$checked,
-      _ref2$name = _ref2.name,
-      name = _ref2$name === void 0 ? '' : _ref2$name,
-      _ref2$checkIcon = _ref2.checkIcon,
-      checkIcon = _ref2$checkIcon === void 0 ? /*#__PURE__*/React__default['default'].createElement(dsIcons.Checkmark, {
-    color: ['brand-primary', 600]
-  }) : _ref2$checkIcon;
-      _ref2.children;
-      var leftAddon = _ref2.leftAddon,
-      _ref2$item = _ref2.item,
-      item = _ref2$item === void 0 ? undefined : _ref2$item,
-      otherProps = _objectWithoutProperties__default['default'](_ref2, _excluded$1);
-
-  var checkableProps = useCheckable({
-    checked: checked,
-    name: name
-  });
-
-  var handleClick = function handleClick() {
-    return dsUtilities.runAll(otherProps.onClick, checkableProps.onClick)({
-      target: {
-        value: name,
-        checked: checked
-      }
-    }, item);
-  };
-
-  var checkAddon = leftAddon || (checkableProps.checked ? /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "checkable-mark"
-  }, checkIcon) : /*#__PURE__*/React__default['default'].createElement("div", null));
-  return /*#__PURE__*/React__default['default'].createElement(MenuItem, _extends__default['default']({}, item, otherProps, checkableProps, {
-    customRenderer: item && item.customRenderer ? item.customRenderer : function () {},
-    items: otherProps.subItems,
-    leftAddon: checkAddon,
-    onClick: handleClick,
-    role: role
-  }));
-}
-
-var props$3 = {
-  /** 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')
-};
-MenuItemCheckable.propTypes = props$3;
-var DSMenuItemCheckeableWithSchema = reactDesc.describe(MenuItemCheckable);
-DSMenuItemCheckeableWithSchema.propTypes = props$3;
-
-function MenuItemRadio(props) {
-  return /*#__PURE__*/React__default['default'].createElement(MenuItemCheckable, _extends__default['default']({}, props, {
-    role: "menuitemradio"
-  }));
-}
-
-var props$2 = {
-  /** 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')
-};
-MenuItemRadio.propTypes = props$2;
-var DSMenuItemRadioWithSchema = reactDesc.describe(MenuItemCheckable);
-DSMenuItemRadioWithSchema.propTypes = props$2;
-
-var _excluded = ["containerProps", "innerRef", "as", "children", "onClickOutside", "visible", "focusOnOpen", "maxOption", "style", "minWidth", "maxWidth", "closeMenu", "responsiveHeight"],
-    _excluded2 = ["destroyed"];
-
-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 RESPONSIVE_HEIHGT_MARGIN = 120;
-var blockName = 'menu';
-
-var noop = function noop() {};
-
-var MenuComponent = dsClassnames.aggregatedClasses('div')(blockName, '', function (_ref) {
-  var menuComboBox = _ref.menuComboBox,
-      type = _ref.type;
-  return _defineProperty__default['default']({
-    '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
- */
-
-var isChildOfType = function isChildOfType(child, type) {
-  return child.type.name === type;
-};
-
-function DSMenu(_ref3) {
-  var _ref3$containerProps = _ref3.containerProps,
-      containerProps = _ref3$containerProps === void 0 ? {} : _ref3$containerProps,
-      innerRef = _ref3.innerRef,
-      _ref3$as = _ref3.as,
-      MenuTag = _ref3$as === void 0 ? web_cjs.animated.ul : _ref3$as,
-      _ref3$children = _ref3.children,
-      children = _ref3$children === void 0 ? undefined : _ref3$children,
-      _ref3$onClickOutside = _ref3.onClickOutside,
-      onClickOutside = _ref3$onClickOutside === void 0 ? noop : _ref3$onClickOutside,
-      _ref3$visible = _ref3.visible,
-      visible = _ref3$visible === void 0 ? undefined : _ref3$visible,
-      _ref3$focusOnOpen = _ref3.focusOnOpen,
-      focusOnOpen = _ref3$focusOnOpen === void 0 ? false : _ref3$focusOnOpen,
-      _ref3$maxOption = _ref3.maxOption,
-      maxOption = _ref3$maxOption === void 0 ? 0 : _ref3$maxOption,
-      _ref3$style = _ref3.style,
-      style = _ref3$style === void 0 ? {} : _ref3$style,
-      _ref3$minWidth = _ref3.minWidth,
-      minWidth = _ref3$minWidth === void 0 ? undefined : _ref3$minWidth,
-      _ref3$maxWidth = _ref3.maxWidth,
-      maxWidth = _ref3$maxWidth === void 0 ? undefined : _ref3$maxWidth,
-      closeMenu = _ref3.closeMenu,
-      _ref3$responsiveHeigh = _ref3.responsiveHeight,
-      responsiveHeight = _ref3$responsiveHeigh === void 0 ? false : _ref3$responsiveHeigh,
-      otherProps = _objectWithoutProperties__default['default'](_ref3, _excluded);
-
-  var menuRef = React.useRef(null);
-
-  var _useContext = React.useContext(FocusGroup.FocusGroupContext),
-      focusFirst = _useContext.focusFirst;
-
-  var _useHiddenTransition = dsHidden.useHiddenTransition({
-    visible: visible,
-    style: style
-  });
-      _useHiddenTransition.destroyed;
-      var hiddenProps = _objectWithoutProperties__default['default'](_useHiddenTransition, _excluded2); // force no addon to the children if the menu doesn't have any item with leftAddon like SelectionGroup
-
-
-  var nextChildren = React.useMemo(function () {
-    var forceLeftAddon = React__default['default'].Children.toArray(children).some(function (child) {
-      return isChildOfType(child, 'SelectionGroup') || isChildOfType(child, 'MenuItemCheckbox') || isChildOfType(child, 'MenuItemRadio') || child.props.leftAddon;
-    });
-    return React__default['default'].Children.map(children, function (child) {
-      return child && /*#__PURE__*/React__default['default'].cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
-        noAddon: !forceLeftAddon ? true : undefined,
-        maxOption: maxOption,
-        closeMenu: closeMenu
-      }));
-    });
-  }, [children]);
-  dsUtilities.useOnClickOutside(menuRef, onClickOutside);
-  React.useEffect(function () {
-    if (focusOnOpen && visible) {
-      setTimeout(function () {
-        focusFirst();
-      }, 0);
-    }
-  }, [visible, focusOnOpen]); // todo: find out a better approach to this
-
-  return !hiddenProps.destroyed ? /*#__PURE__*/React__default['default'].createElement(MenuContext.Provider, {
-    value: {
-      visible: visible,
-      closeMenu: closeMenu
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(MenuComponent, _extends__default['default']({
-    "data-testid": containerProps !== null && containerProps !== void 0 && containerProps['data-testid'] ? containerProps['data-testid'] : "em-ds-menu"
-  }, containerProps, {
-    as: MenuTag,
-    classProps: _objectSpread(_objectSpread({}, otherProps.classProps || {}), {}, {
-      type: otherProps.type
-    }),
-    innerRef: dsUtilities.mergeRefs(innerRef, menuRef),
-    role: "menu"
-  }, lodash.omit(otherProps, ['scheduleUpdate']), hiddenProps), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "menu-component-internal-wrapper",
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      minWidth: minWidth,
-      maxWidth: maxWidth
-    }, responsiveHeight ? {
-      overflowY: 'scroll',
-      maxHeight: responsiveHeight ? "".concat(window.innerHeight - RESPONSIVE_HEIHGT_MARGIN, "px") : undefined
-    } : {})
-  }, nextChildren))) : null;
-}
-
-var Menu = FocusGroup.focusGroupManagerHoc(DSMenu, {
-  loop: true
-});
-var props$1 = {
-  /** Injected props to wrapper element of component */
-  containerProps: reactDesc.PropTypes.object.description('Injected props to wrapper element of component'),
-
-  /** Renders the menu with a specific html element */
-  as: reactDesc.PropTypes.element.description('Renders the menu with a specific html element'),
-
-  /** Handler when a user clicks outside the menu */
-  onClickOutside: reactDesc.PropTypes.func.description('Handler when a user clicks outside the menu'),
-
-  /** Whether the menu is visible or not */
-  visible: reactDesc.PropTypes.bool.description('Whether the menu is visible or not'),
-
-  /** When set to true, it's going to focus the first item */
-  focusOnOpen: reactDesc.PropTypes.bool.description("When set to true, it's going to focus the first item"),
-
-  /** Customize menu minWidth. Can be undefined or 'number' */
-  minWidth: reactDesc.PropTypes.number.description("Customize menu minWidth. Can be undefined or 'number'"),
-
-  /** Customize menu maxWidth. Can be undefined or 'number' */
-  maxWidth: reactDesc.PropTypes.number.description("Customize menu maxWidth. Can be undefined or 'number'")
-};
-DSMenu.propTypes = props$1;
-var DSMenuWithSchema = reactDesc.describe(DSMenu);
-DSMenuWithSchema.propTypes = props$1; // todo: add a handler to get this kind of exports for documentation
-
-Menu.Item = MenuItem;
-Menu.ItemCheckbox = MenuItemCheckbox;
-Menu.ItemRadio = MenuItemRadio;
-Menu.SubMenu = SubMenu;
-Menu.Separator = MenuItems_Separator['default'];
-Menu.CheckboxGroup = MenuItems_CheckboxGroup['default'];
-Menu.RadioGroup = MenuItems_RadioGroup['default'];
-Menu.SearchableGroup = MenuItems_SearchableGroup['default'];
-Menu.SelectionGroup = SelectionGroup;
-
-var ChevronRightComp = /*#__PURE__*/styled__default['default'].div.withConfig({
-  componentId: "sc-1qhp1z-0"
-})(["display:flex;justify-content:center;align-items:center;width:28px;"]);
-
-function SubMenu(_ref) {
-  var noAddon = _ref.noAddon,
-      _ref$leftAddon = _ref.leftAddon,
-      leftAddon = _ref$leftAddon === void 0 ? undefined : _ref$leftAddon,
-      _ref$label = _ref.label,
-      label = _ref$label === void 0 ? undefined : _ref$label,
-      _ref$interactionType = _ref.interactionType,
-      interactionType = _ref$interactionType === void 0 ? 'hover' : _ref$interactionType,
-      subitems = _ref.children,
-      rightAddonType = _ref.rightAddonType,
-      disabledAddonInactive = _ref.disabledAddonInactive,
-      _ref$checkableProps = _ref.checkableProps,
-      checkableProps = _ref$checkableProps === void 0 ? {} : _ref$checkableProps,
-      customRenderer = _ref.customRenderer,
-      onClick = _ref.onClick,
-      closeMenu = _ref.closeMenu,
-      id = _ref.id;
-  var itemRef = React.useRef(null);
-  var focusOnOpen = React.useRef(false);
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      isAddonHovered = _useState2[0],
-      setIsAddonHovered = _useState2[1];
-
-  var _useHiddenController = dsHidden.useHiddenController(undefined, {
-    interaction: 'click'
-  }),
-      _useHiddenController$ = _useHiddenController.visible,
-      visible = _useHiddenController$ === void 0 ? false : _useHiddenController$,
-      onShow = _useHiddenController.onShow,
-      onHide = _useHiddenController.onHide;
-
-  var interaction = rightAddonType === 'elipsis' ? 'click' : 'hover';
-
-  var _useFocusGroupItem = FocusGroup.useFocusGroupItem(),
-      focusItemByNode = _useFocusGroupItem.focusItemByNode; // todo: create a menu state to handle all related menu things
-
-
-  var handleShowSubItemsWithMouse = function handleShowSubItemsWithMouse(e) {
-    e.stopPropagation();
-    onShow();
-    focusOnOpen.current = true;
-  };
-
-  var handleShowWithMouse = function handleShowWithMouse(e) {
-    if (onClick) onClick(e);
-  };
-
-  var handleShowWithMouseHover = function handleShowWithMouseHover() {
-    setIsAddonHovered(true);
-    onShow();
-    focusOnOpen.current = false;
-  };
-
-  var handleShowWithKeyboard = function handleShowWithKeyboard() {
-    onShow();
-    focusOnOpen.current = true;
-  };
-
-  var handleOnMouseEnter = React.useCallback(function () {
-    setIsAddonHovered(true);
-  }, []);
-  var handleOnMouseLeave = React.useCallback(function () {
-    setIsAddonHovered(false);
-  }, []);
-  var hoverHandlers = interaction === 'hover' ? {
-    onMouseEnter: handleShowWithMouseHover,
-    onMouseLeave: function onMouseLeave() {
-      onHide();
-      setIsAddonHovered(false);
-    }
-  } : {
-    onClick: handleShowWithMouse
-  };
-  var rightAddon = rightAddonType === 'elipsis' ? /*#__PURE__*/React__default['default'].createElement(DSButton__default['default'], {
-    "aria-label": "vertical-elipsis",
-    "data-testid": "vertical-elipsis",
-    buttonType: "text",
-    leftIcon: /*#__PURE__*/React__default['default'].createElement(dsIcons.MoreOptionsVert, {
-      className: "submenu-arrow",
-      color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
-      size: "s"
-    }),
-    onClick: function onClick(e) {
-      return handleShowSubItemsWithMouse(e);
-    },
-    size: "m",
-    variant: DSButton.BUTTON_VARIANT.DEFAULT
-  }) : /*#__PURE__*/React__default['default'].createElement(ChevronRightComp, null, /*#__PURE__*/React__default['default'].createElement(dsIcons.ChevronSmallRight, {
-    "data-testid": "chevron-right",
-    className: "submenu-arrow",
-    color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
-    size: "sm"
-  }));
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(DSPopper__default['default'], {
-    contentComponent: /*#__PURE__*/React__default['default'].createElement(Menu, _extends__default['default']({
-      focusKeyBindings: {
-        ArrowLeft: [function () {
-          return focusItemByNode(itemRef.current);
-        }, 'exit']
-      },
-      focusOnOpen: focusOnOpen.current,
-      onExitFocusGroup: onHide
-    }, hoverHandlers, {
-      closeMenu: closeMenu,
-      visible: visible
-    }), subitems),
-    interactionType: interactionType,
-    isOpen: visible,
-    onOpen: function onOpen(opening) {
-      return opening ? onShow() : onHide();
-    },
-    placement: "right-start",
-    showArrow: false,
-    triggerComponent: /*#__PURE__*/React__default['default'].createElement(MenuItem, _extends__default['default']({
-      customRenderer: customRenderer,
-      disabledAddonInactive: disabledAddonInactive,
-      id: id,
-      innerRef: itemRef,
-      label: label,
-      leftAddon: leftAddon,
-      noAddon: noAddon,
-      onFocus: handleOnMouseEnter,
-      onBlur: handleOnMouseLeave,
-      onMouseEnter: handleOnMouseEnter,
-      onMouseLeave: handleOnMouseLeave
-    }, hoverHandlers, {
-      onKeyDown: function onKeyDown(e) {
-        if (e.key === 'ArrowRight' || e.key === 'Enter' || e.keyCode === 32) {
-          handleShowWithKeyboard();
-        }
-      },
-      rightAddon: rightAddon
-    }, checkableProps))
-  }));
-}
-
-var props = {
-  /** dont show addon for submenu */
-  noAddon: reactDesc.PropTypes.bool.description('dont show addon for submenu'),
-
-  /** left addon */
-  leftAddon: reactDesc.PropTypes.node.description('left addon'),
-
-  /** submenu label */
-  label: reactDesc.PropTypes.string.description('submenu label'),
-
-  /** 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'),
-
-  /** right addon, ellipsis or undefined */
-  rightAddonType: reactDesc.PropTypes.oneOf(['ellipsis']).description('right addon, ellipsis or undefined'),
-  disabledAddonInactive: reactDesc.PropTypes.bool.description(''),
-
-  /** props passed to MenuItem component */
-  checkableProps: reactDesc.PropTypes.object.description('props passed to MenuItem component'),
-
-  /** custom renderer for menu item */
-  customRenderer: reactDesc.PropTypes.func.description('custom renderer for menu item'),
-
-  /** on click handler */
-  onClick: reactDesc.PropTypes.func.description('on click handler'),
-  closeMenu: reactDesc.PropTypes.any.description(''),
-
-  /** component id */
-  id: reactDesc.PropTypes.string.description('component id')
-};
-SubMenu.propTypes = props;
-var DSSubMenuWithSchema = reactDesc.describe(SubMenu);
-DSSubMenuWithSchema.propTypes = props;
-
-exports.DSMenuItemCheckeableWithSchema = DSMenuItemCheckeableWithSchema;
-exports.DSMenuItemRadioWithSchema = DSMenuItemRadioWithSchema;
-exports.DSMenuItemWithSchema = DSMenuItemWithSchema;
-exports.DSMenuSelectionGroupWithSchema = DSMenuSelectionGroupWithSchema;
-exports.DSMenuWithSchema = DSMenuWithSchema;
-exports.DSSubMenuWithSchema = DSSubMenuWithSchema;
-exports.Menu = Menu;
-exports.MenuItem = MenuItem;
-exports.MenuItemCheckable = MenuItemCheckable;
-exports.MenuItemCheckbox = MenuItemCheckbox;
-exports.MenuItemRadio = MenuItemRadio;
-exports.SelectionGroup = SelectionGroup;
-exports.SubMenu = SubMenu;
-exports.menuItemFactory = menuItemFactory;
-exports.renderMenuItems = renderMenuItems;
-//# sourceMappingURL=SubMenu-22be0a18.js.map