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

package/esm/SubMenu-a25e69ec.js

@@ -1,778 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useMemo, useContext, useRef, useEffect, useState, useCallback } from 'react';
-import { PropTypes, describe } from 'react-desc';
-import { Checkmark, MoreOptionsVert, ChevronSmallRight } from '@elliemae/ds-icons';
-import { useFocusGroupItem, focusGroupManagerHoc, FocusGroupContext } from '@elliemae/ds-shared/FocusGroup';
-import { useHiddenTransition, useHiddenController } from '@elliemae/ds-hidden';
-import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-button';
-import DSPopper, { interactions } from '@elliemae/ds-popper';
-import styled from 'styled-components';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { omit } from 'lodash';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import { animated } from 'react-spring/web.cjs';
-import { isFunction, mergeRefs, runAll, useOnClickOutside } from '@elliemae/ds-utilities';
-import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
-import MenuSeparator from './MenuItems/Separator.js';
-import { useCheckableGroup } from '@elliemae/ds-shared/CheckableGroup';
-import SearchableGroup from './MenuItems/SearchableGroup.js';
-import VirtualMenuList from './VirtualMenuList.js';
-import { DSCheckbox } from '@elliemae/ds-form';
-import MenuContext from './MenuContext.js';
-import CheckboxGroup from './MenuItems/CheckboxGroup.js';
-import RadioGroup from './MenuItems/RadioGroup.js';
-
-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 = useMemo(function () {
-    return items && items.map(function (item) {
-      var Component = menuItemFactory(multi ? 'checkbox' : 'radio');
-      return /*#__PURE__*/React.createElement(Component, _extends({}, item, {
-        key: item.name || item.id || item.key,
-        item: item,
-        name: item.id || item.name
-      }));
-    });
-  }, [items]);
-  var decoratedGroupChildren = useCheckableGroup({
-    children: renderedItems || children,
-    multi: multi,
-    active: active,
-    onCheck: onSelect
-  });
-
-  if (searchable) {
-    return /*#__PURE__*/React.createElement(SearchableGroup, {
-      focusOnOpen: focusOnOpen,
-      height: height,
-      items: items,
-      width: width
-    }, decoratedGroupChildren);
-  }
-
-  return /*#__PURE__*/React.createElement(VirtualMenuList, {
-    height: height,
-    items: decoratedGroupChildren,
-    width: width
-  });
-}
-
-var props$5 = {
-  /** toggle on multi select */
-  multi: PropTypes.bool.description('toggle on multi select'),
-
-  /** toggle on searchable behavior */
-  searchable: PropTypes.bool.description('toggle on searchable behavior'),
-
-  /** toggle to focus component on open */
-  focusOnOpen: PropTypes.bool.description('toggle to focus component on open'),
-
-  /** callback that triggers when select happens */
-  onSelect: PropTypes.func.description('callback that triggers when select happens'),
-  children: PropTypes.node.description(''),
-
-  /** selection group items  */
-  items: PropTypes.array.description('selection group items'),
-
-  /** array of values for multi and string for single selection */
-  active: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).description('array of values for multi and string for single selection'),
-
-  /** selection group width */
-  width: PropTypes.number.description('selection group width'),
-
-  /** selection group height */
-  height: PropTypes.number.description('selection group height')
-};
-SelectionGroup.propTypes = props$5;
-var DSMenuSelectionGroupWithSchema = describe(SelectionGroup);
-DSMenuSelectionGroupWithSchema.propTypes = props$5;
-
-var _excluded$3 = ["checked"];
-
-function MenuItemCheckbox(_ref) {
-  var checked = _ref.checked,
-      rest = _objectWithoutProperties(_ref, _excluded$3);
-
-  return /*#__PURE__*/React.createElement(MenuItemCheckable, _extends({}, rest, {
-    leftAddon: /*#__PURE__*/React.createElement(DSCheckbox, {
-      checked: checked
-    }),
-    role: "menuitemcheckbox"
-  }));
-}
-
-var itemTypes = {
-  separator: MenuSeparator,
-  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 (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.createElement(ItemComponent, _extends({}, 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 = aggregatedClasses('div')(blockName$1, 'content');
-var Addon = 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.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 = 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({
-    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(props, _excluded$2);
-
-  var menuCxt = useContext(MenuContext);
-  var ref = useRef(null);
-  useFocusGroupItem(ref);
-
-  if (otherProps.subItems) {
-    return /*#__PURE__*/React.createElement(SubMenu, _extends({}, props, {
-      closeMenu: menuCxt.closeMenu
-    }), renderMenuItems(otherProps.subItems));
-  }
-
-  var wrapperProps = useMemo(function () {
-    return 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.createElement(Wrapper, _extends({
-    as: as,
-    classProps: {
-      disabled: disabled,
-      disabledAddonInactive: disabledAddonInactive,
-      customRenderer: customRenderer,
-      fixedItem: fixedItem,
-      type: otherProps.type
-    },
-    id: otherProps.id,
-    innerRef: otherProps.type !== 'disabled' ? mergeRefs(innerRef, ref) : innerRef,
-    onKeyDown: !fixedItem && 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.createElement(Content, {
-    style: maxOption > 0 ? {
-      width: "".concat(calculateSize(maxOption), "px"),
-      maxWidth: "".concat(calculateSize(maxOption), "px")
-    } : undefined
-  }, /*#__PURE__*/React.createElement(DSTruncatedTooltipText, {
-    value: label
-  })), customRenderer, rightAddon && renderAddons(rightAddon), children);
-}
-
-var props$4 = {
-  /** Renders the MenuItem with a specific html element */
-  as: PropTypes.element.description('Renders the MenuItem with a specific html element'),
-
-  /**
-   * reference to the component
-   */
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]).description('reference to the component'),
-
-  /** Renders the passed element to the left */
-  leftAddon: PropTypes.element.description('Renders the passed element to the left'),
-
-  /** Renders the passed element to the right */
-  rightAddon: PropTypes.element.description('Renders the passed element to the right'),
-
-  /** Label for the menu item */
-  label: PropTypes.string.description('Label for the menu item'),
-
-  /** style object for menu item wrapper */
-  style: PropTypes.object.description('style object for menu item wrapper'),
-
-  /** disable menu item */
-  disabled: PropTypes.bool.description('disable menu item'),
-
-  /** HTML tabindex to manage focus order */
-  tabindex: PropTypes.number.description('HTML tabindex to manage focus order'),
-
-  /** a11y role */
-  role: PropTypes.string.description('a11y role')
-};
-MenuItem.propTypes = props$4;
-var DSMenuItemWithSchema = 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.createElement(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(_ref2, _excluded$1);
-
-  var checkableProps = useCheckable({
-    checked: checked,
-    name: name
-  });
-
-  var handleClick = function handleClick() {
-    return runAll(otherProps.onClick, checkableProps.onClick)({
-      target: {
-        value: name,
-        checked: checked
-      }
-    }, item);
-  };
-
-  var checkAddon = leftAddon || (checkableProps.checked ? /*#__PURE__*/React.createElement("div", {
-    className: "checkable-mark"
-  }, checkIcon) : /*#__PURE__*/React.createElement("div", null));
-  return /*#__PURE__*/React.createElement(MenuItem, _extends({}, 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: PropTypes.bool.description('Whether the item is checked or not'),
-
-  /** A custom item when the item is checked */
-  checkIcon: PropTypes.element.description('A custom item when the item is checked'),
-
-  /** form field name */
-  name: PropTypes.string.description('form field name'),
-
-  /** menu item object props */
-  item: PropTypes.object.description('menu item object props'),
-
-  /** a11y role */
-  role: PropTypes.string.description('a11y role'),
-
-  /** left addon component */
-  leftAddon: PropTypes.node.description('left addon component')
-};
-MenuItemCheckable.propTypes = props$3;
-var DSMenuItemCheckeableWithSchema = describe(MenuItemCheckable);
-DSMenuItemCheckeableWithSchema.propTypes = props$3;
-
-function MenuItemRadio(props) {
-  return /*#__PURE__*/React.createElement(MenuItemCheckable, _extends({}, props, {
-    role: "menuitemradio"
-  }));
-}
-
-var props$2 = {
-  /** Whether the item is checked or not */
-  checked: PropTypes.bool.description('Whether the item is checked or not'),
-
-  /** A custom item when the item is checked */
-  checkIcon: PropTypes.element.description('A custom item when the item is checked')
-};
-MenuItemRadio.propTypes = props$2;
-var DSMenuItemRadioWithSchema = 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(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 = aggregatedClasses('div')(blockName, '', function (_ref) {
-  var menuComboBox = _ref.menuComboBox,
-      type = _ref.type;
-  return _defineProperty({
-    '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 ? 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(_ref3, _excluded);
-
-  var menuRef = useRef(null);
-
-  var _useContext = useContext(FocusGroupContext),
-      focusFirst = _useContext.focusFirst;
-
-  var _useHiddenTransition = useHiddenTransition({
-    visible: visible,
-    style: style
-  });
-      _useHiddenTransition.destroyed;
-      var hiddenProps = _objectWithoutProperties(_useHiddenTransition, _excluded2); // force no addon to the children if the menu doesn't have any item with leftAddon like SelectionGroup
-
-
-  var nextChildren = useMemo(function () {
-    var forceLeftAddon = React.Children.toArray(children).some(function (child) {
-      return isChildOfType(child, 'SelectionGroup') || isChildOfType(child, 'MenuItemCheckbox') || isChildOfType(child, 'MenuItemRadio') || child.props.leftAddon;
-    });
-    return React.Children.map(children, function (child) {
-      return child && /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
-        noAddon: !forceLeftAddon ? true : undefined,
-        maxOption: maxOption,
-        closeMenu: closeMenu
-      }));
-    });
-  }, [children]);
-  useOnClickOutside(menuRef, onClickOutside);
-  useEffect(function () {
-    if (focusOnOpen && visible) {
-      setTimeout(function () {
-        focusFirst();
-      }, 0);
-    }
-  }, [visible, focusOnOpen]); // todo: find out a better approach to this
-
-  return !hiddenProps.destroyed ? /*#__PURE__*/React.createElement(MenuContext.Provider, {
-    value: {
-      visible: visible,
-      closeMenu: closeMenu
-    }
-  }, /*#__PURE__*/React.createElement(MenuComponent, _extends({
-    "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: mergeRefs(innerRef, menuRef),
-    role: "menu"
-  }, omit(otherProps, ['scheduleUpdate']), hiddenProps), /*#__PURE__*/React.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 = focusGroupManagerHoc(DSMenu, {
-  loop: true
-});
-var props$1 = {
-  /** Injected props to wrapper element of component */
-  containerProps: PropTypes.object.description('Injected props to wrapper element of component'),
-
-  /** Renders the menu with a specific html element */
-  as: PropTypes.element.description('Renders the menu with a specific html element'),
-
-  /** Handler when a user clicks outside the menu */
-  onClickOutside: PropTypes.func.description('Handler when a user clicks outside the menu'),
-
-  /** Whether the menu is visible or not */
-  visible: PropTypes.bool.description('Whether the menu is visible or not'),
-
-  /** When set to true, it's going to focus the first item */
-  focusOnOpen: PropTypes.bool.description("When set to true, it's going to focus the first item"),
-
-  /** Customize menu minWidth. Can be undefined or 'number' */
-  minWidth: PropTypes.number.description("Customize menu minWidth. Can be undefined or 'number'"),
-
-  /** Customize menu maxWidth. Can be undefined or 'number' */
-  maxWidth: PropTypes.number.description("Customize menu maxWidth. Can be undefined or 'number'")
-};
-DSMenu.propTypes = props$1;
-var DSMenuWithSchema = 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 = MenuSeparator;
-Menu.CheckboxGroup = CheckboxGroup;
-Menu.RadioGroup = RadioGroup;
-Menu.SearchableGroup = SearchableGroup;
-Menu.SelectionGroup = SelectionGroup;
-
-var ChevronRightComp = /*#__PURE__*/styled.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 = useRef(null);
-  var focusOnOpen = useRef(false);
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isAddonHovered = _useState2[0],
-      setIsAddonHovered = _useState2[1];
-
-  var _useHiddenController = 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 = 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 = useCallback(function () {
-    setIsAddonHovered(true);
-  }, []);
-  var handleOnMouseLeave = useCallback(function () {
-    setIsAddonHovered(false);
-  }, []);
-  var hoverHandlers = interaction === 'hover' ? {
-    onMouseEnter: handleShowWithMouseHover,
-    onMouseLeave: function onMouseLeave() {
-      onHide();
-      setIsAddonHovered(false);
-    }
-  } : {
-    onClick: handleShowWithMouse
-  };
-  var rightAddon = rightAddonType === 'elipsis' ? /*#__PURE__*/React.createElement(DSButton, {
-    "aria-label": "vertical-elipsis",
-    "data-testid": "vertical-elipsis",
-    buttonType: "text",
-    leftIcon: /*#__PURE__*/React.createElement(MoreOptionsVert, {
-      className: "submenu-arrow",
-      color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
-      size: "s"
-    }),
-    onClick: function onClick(e) {
-      return handleShowSubItemsWithMouse(e);
-    },
-    size: "m",
-    variant: BUTTON_VARIANT.DEFAULT
-  }) : /*#__PURE__*/React.createElement(ChevronRightComp, null, /*#__PURE__*/React.createElement(ChevronSmallRight, {
-    "data-testid": "chevron-right",
-    className: "submenu-arrow",
-    color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
-    size: "sm"
-  }));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DSPopper, {
-    contentComponent: /*#__PURE__*/React.createElement(Menu, _extends({
-      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.createElement(MenuItem, _extends({
-      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: PropTypes.bool.description('dont show addon for submenu'),
-
-  /** left addon */
-  leftAddon: PropTypes.node.description('left addon'),
-
-  /** submenu label */
-  label: PropTypes.string.description('submenu label'),
-
-  /** A type indicating how to open/close the tooltip */
-  interactionType: PropTypes.oneOf(interactions).description('A type indicating how to open/close the tooltip'),
-
-  /** sub menu items */
-  children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]).description('sub menu items'),
-
-  /** right addon, ellipsis or undefined */
-  rightAddonType: PropTypes.oneOf(['ellipsis']).description('right addon, ellipsis or undefined'),
-  disabledAddonInactive: PropTypes.bool.description(''),
-
-  /** props passed to MenuItem component */
-  checkableProps: PropTypes.object.description('props passed to MenuItem component'),
-
-  /** custom renderer for menu item */
-  customRenderer: PropTypes.func.description('custom renderer for menu item'),
-
-  /** on click handler */
-  onClick: PropTypes.func.description('on click handler'),
-  closeMenu: PropTypes.any.description(''),
-
-  /** component id */
-  id: PropTypes.string.description('component id')
-};
-SubMenu.propTypes = props;
-var DSSubMenuWithSchema = describe(SubMenu);
-DSSubMenuWithSchema.propTypes = props;
-
-export { DSMenuItemWithSchema as D, Menu as M, SelectionGroup as S, DSSubMenuWithSchema as a, DSMenuItemCheckeableWithSchema as b, DSMenuItemRadioWithSchema as c, DSMenuSelectionGroupWithSchema as d, DSMenuWithSchema as e, MenuItemCheckbox as f, MenuItem as g, MenuItemCheckable as h, MenuItemRadio as i, SubMenu as j, menuItemFactory as m, renderMenuItems as r };
-//# sourceMappingURL=SubMenu-a25e69ec.js.map