@elliemae/ds-menu 2.3.0-alpha.9 → 2.3.0-next.11

package/cjs/MenuItems/menuItemFactory.js

@@ -0,0 +1,73 @@
+'use strict';
+
+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 dsUtilities = require('@elliemae/ds-utilities');
+var Separator = require('./Separator.js');
+var MenuItem = require('./MenuItem.js');
+var SubMenu = require('./SubMenu.js');
+var SelectionGroup = require('./SelectionGroup.js');
+var MenuItemCheckbox = require('./MenuItemCheckbox.js');
+var MenuItemRadio = require('./MenuItemRadio.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const itemTypes = () => ({
+  separator: Separator["default"],
+  menuitem: MenuItem["default"],
+  radio: MenuItemRadio["default"],
+  checkbox: MenuItemCheckbox,
+  submenu: SubMenu["default"],
+  'selection-group': SelectionGroup["default"]
+});
+
+const fallback = {
+  SelectionGroup: 'selection-group'
+};
+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) {
+  let factory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : menuItemFactory;
+  return options.map((option, index) => {
+    if (dsUtilities.isFunction(option.renderer)) {
+      return option.renderer({
+        key: option.id,
+        item: option
+      });
+    }
+
+    const ItemComponent = factory(option.type);
+    const children = option.subItems && renderMenuItems(option.subItems, factory);
+    return /*#__PURE__*/React.createElement(ItemComponent, _objectSpread(_objectSpread({}, option), {}, {
+      key: option.id || index,
+      item: option,
+      onClick: null,
+      onMouseDown: option.onClick // onClick callback called in onMouseDown due to events order issue
+
+    }), children);
+  });
+}
+
+exports.menuItemFactory = menuItemFactory;
+exports.renderMenuItems = renderMenuItems;

package/cjs/VirtualMenuList.js

@@ -0,0 +1,48 @@
+'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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+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(_ref2) {
+  let {
+    items,
+    itemHeight = 32,
+    amountItemsInWindow = 5,
+    width,
+    height
+  } = _ref2;
+  const computedListHeight = useHeightByAmountOfItems({
+    amountItems: amountItemsInWindow,
+    itemHeight,
+    items
+  });
+  return /*#__PURE__*/_jsx__default["default"](reactWindow.FixedSizeList, {
+    height: height || computedListHeight,
+    itemCount: items.length,
+    itemData: items,
+    itemSize: itemHeight,
+    width: width
+  }, void 0, MenuItem);
+}
+
+module.exports = VirtualMenuList;

package/cjs/index.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Menu = require('./Menu.js');
+var MenuItem = require('./MenuItems/MenuItem.js');
+var SubMenu = require('./MenuItems/SubMenu.js');
+var CheckboxGroup = require('./MenuItems/CheckboxGroup.js');
+var MenuItemCheckable = require('./MenuItems/MenuItemCheckable.js');
+var MenuItemRadio = require('./MenuItems/MenuItemRadio.js');
+var RadioGroup = require('./MenuItems/RadioGroup.js');
+var SearchableGroup = require('./MenuItems/SearchableGroup.js');
+var SearchableList = require('./MenuItems/SearchableList.js');
+var Separator = require('./MenuItems/Separator.js');
+var SelectionGroup = require('./MenuItems/SelectionGroup.js');
+var MenuCombobox = require('./MenuCombobox.js');
+var menuItemFactory = require('./MenuItems/menuItemFactory.js');
+
+
+
+exports.DSMenuWithSchema = Menu.DSMenuWithSchema;
+exports.Menu = Menu.Menu;
+exports["default"] = Menu.Menu;
+exports.DSMenuItemWithSchema = MenuItem.DSMenuItemWithSchema;
+exports.DSSubMenuWithSchema = SubMenu.DSSubMenuWithSchema;
+exports.DSMenuCheckboxGroupWithSchema = CheckboxGroup.DSMenuCheckboxGroupWithSchema;
+exports.DSMenuItemCheckeableWithSchema = MenuItemCheckable.DSMenuItemCheckeableWithSchema;
+exports.DSMenuItemRadioWithSchema = MenuItemRadio.DSMenuItemRadioWithSchema;
+exports.DSMenuRadioGroupWithSchema = RadioGroup.DSMenuRadioGroupWithSchema;
+exports.DSMenuSearchableGroupWithSchema = SearchableGroup.DSMenuSearchableGroupWithSchema;
+exports.DSMenuSearchableListWithSchema = SearchableList.DSMenuSearchableListWithSchema;
+exports.DSMenuSeparatorWithSchema = Separator.DSMenuSeparatorWithSchema;
+exports.DSMenuSelectionGroupWithSchema = SelectionGroup.DSMenuSelectionGroupWithSchema;
+exports.MenuCombobox = MenuCombobox;
+exports.menuItemFactory = menuItemFactory.menuItemFactory;
+exports.renderMenuItems = menuItemFactory.renderMenuItems;

package/cjs/utils/useHeightByAmountOfItems.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+
+const calculateHeight = (itemHeight, amountItemsInWindow, itemsLength) => {
+  const realAmountItemsInWindow = itemsLength < amountItemsInWindow ? itemsLength : amountItemsInWindow;
+  return itemHeight * realAmountItemsInWindow;
+};
+
+function useHeightByAmountOfItems(_ref) {
+  let {
+    itemHeight,
+    amountItems,
+    items
+  } = _ref;
+  const calculatedHeight = React.useMemo(() => calculateHeight(itemHeight, amountItems, items.length), [amountItems, items]);
+  return calculatedHeight;
+}
+
+module.exports = useHeightByAmountOfItems;

package/esm/Menu.js

@@ -0,0 +1,180 @@
+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';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import { animated } from 'react-spring/web';
+import { useOnClickOutside } from '@elliemae/ds-utilities/hooks';
+import { mergeRefs } from '@elliemae/ds-utilities/system';
+import { focusGroupManagerHoc, FocusGroupContext } from '@elliemae/ds-shared/FocusGroup';
+import { useHiddenTransition } from '@elliemae/ds-hidden';
+import MenuItemRadio from './MenuItems/MenuItemRadio.js';
+import MenuItemCheckbox from './MenuItems/MenuItemCheckbox.js';
+import CheckboxGroup from './MenuItems/CheckboxGroup.js';
+import RadioGroup from './MenuItems/RadioGroup.js';
+import MenuSeparator from './MenuItems/Separator.js';
+import MenuItem from './MenuItems/MenuItem.js';
+import SubMenu from './MenuItems/SubMenu.js';
+import SearchableGroup from './MenuItems/SearchableGroup.js';
+import SelectionGroup from './MenuItems/SelectionGroup.js';
+export { menuItemFactory, renderMenuItems } from './MenuItems/menuItemFactory.js';
+import MenuContext from './MenuContext.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const RESPONSIVE_HEIHGT_MARGIN = 120;
+const blockName = 'menu';
+
+const noop = () => {};
+
+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
+ */
+
+const isChildOfType = (child, type) => child.type.name === type;
+
+function DSMenu(_ref2) {
+  let {
+    containerProps = {},
+    innerRef,
+    as: MenuTag = animated.ul,
+    children = undefined,
+    onClickOutside = noop,
+    // handlers from hidden
+    visible = undefined,
+    focusOnOpen = false,
+    maxOption = 0,
+    style = {},
+    minWidth = undefined,
+    maxWidth = undefined,
+    closeMenu,
+    responsiveHeight = false
+  } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
+
+  const menuRef = useRef(null);
+  const {
+    focusFirst
+  } = useContext(FocusGroupContext);
+
+  const _useHiddenTransition = useHiddenTransition({
+    visible,
+    style
+  }),
+        hiddenProps = _objectWithoutProperties(_useHiddenTransition, _excluded2); // force no addon to the children if the menu doesn't have any item with leftAddon like SelectionGroup
+
+
+  const nextChildren = useMemo(() => {
+    const forceLeftAddon = React.Children.toArray(children).some(child => isChildOfType(child, 'SelectionGroup') || isChildOfType(child, 'MenuItemCheckbox') || isChildOfType(child, 'MenuItemRadio') || child.props.leftAddon);
+    return React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
+      noAddon: !forceLeftAddon ? true : undefined,
+      maxOption,
+      closeMenu
+    })));
+  }, [children]);
+  useOnClickOutside(menuRef, onClickOutside);
+  useEffect(() => {
+    if (focusOnOpen && visible) {
+      setTimeout(() => {
+        focusFirst();
+      }, 0);
+    }
+  }, [visible, focusOnOpen]); // todo: find out a better approach to this
+
+  return !hiddenProps.destroyed ? /*#__PURE__*/_jsx(MenuContext.Provider, {
+    value: {
+      visible,
+      closeMenu
+    }
+  }, void 0, /*#__PURE__*/jsx(MenuComponent, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    "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), {}, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: "menu-component-internal-wrapper",
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        minWidth,
+        maxWidth
+      }, responsiveHeight ? {
+        overflowY: 'scroll',
+        maxHeight: responsiveHeight ? "".concat(window.innerHeight - RESPONSIVE_HEIHGT_MARGIN, "px") : undefined
+      } : {})
+    }, void 0, nextChildren)
+  }))) : null;
+}
+
+const Menu = focusGroupManagerHoc(DSMenu, {
+  loop: true
+});
+const props = {
+  /** 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'")
+};
+const DSMenuWithSchema = describe(DSMenu);
+DSMenuWithSchema.propTypes = props; // 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;
+
+export { DSMenuWithSchema, Menu, Menu as default };

package/esm/MenuCombobox.js

@@ -0,0 +1,48 @@
+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 SearchableList from './MenuItems/SearchableList.js';
+import { Menu } from './Menu.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["dropdownFilterOptions", "options", "onSelectMenuItem", "innerRef", "maxOptions", "loading"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function MenuCombobox(_ref) {
+  let {
+    dropdownFilterOptions = {},
+    options = [],
+    onSelectMenuItem = () => null,
+    innerRef,
+    maxOptions = 10,
+    loading = false
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(Menu, _objectSpread(_objectSpread({}, rest), {}, {
+    classProps: {
+      menuComboBox: true
+    },
+    innerRef: innerRef,
+    visible: true,
+    children: /*#__PURE__*/_jsx(SearchableList, {
+      appendTermInList: true,
+      extraListProps: dropdownFilterOptions,
+      items: options,
+      onSelectMenuItem: onSelectMenuItem,
+      maxOptions: maxOptions,
+      loading: loading
+    })
+  }));
+}
+
+export { MenuCombobox as default };

package/esm/MenuContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+var MenuContext = /*#__PURE__*/React.createContext();
+
+export { MenuContext as default };

package/esm/MenuItems/CheckboxGroup.js

@@ -0,0 +1,35 @@
+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';
+import CheckableGroup from '@elliemae/ds-shared/CheckableGroup';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function CheckboxGroup(props) {
+  return /*#__PURE__*/jsx(CheckableGroup, _objectSpread(_objectSpread({}, props), {}, {
+    multi: true
+  }));
+}
+
+const props = {
+  /* The item (if multi false) or items (if multi true) selected */
+  active: PropTypes.arrayOf(PropTypes.string).description('The item (if multi false) or items (if multi true) selected'),
+
+  /* Whether is multi select or not */
+  multi: PropTypes.bool.description('Whether is multi select or not'),
+
+  /* Handler when a user checks an item */
+  onCheck: PropTypes.func.description('Handler when a user checks an item')
+};
+const DSMenuCheckboxGroupWithSchema = describe(CheckboxGroup);
+DSMenuCheckboxGroupWithSchema.propTypes = props;
+
+export { DSMenuCheckboxGroupWithSchema, CheckboxGroup as default };

package/esm/MenuItems/MenuItem.js

@@ -0,0 +1,191 @@
+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, runAll } from '@elliemae/ds-utilities';
+import { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
+import { renderMenuItems } from './menuItemFactory.js';
+import SubMenu from './SubMenu.js';
+import MenuContext from '../MenuContext.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const _excluded = ["innerRef", "as", "role", "leftAddon", "rightAddon", "disabledAddonInactive", "label", "children", "tabIndex", "onKeyDown", "fixedItem", "noAddon", "disabled", "customRenderer", "maxOption", "closeMenu", "style"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const noop = () => null;
+
+const blockName = 'menu-item';
+const Content = aggregatedClasses('div')(blockName, 'content');
+const Addon = aggregatedClasses('div')(blockName, 'addon', _ref => {
+  let {
+    empty,
+    fixedItem
+  } = _ref;
+  return {
+    empty,
+    fixedItem
+  };
+});
+
+const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx(Addon, {
+  classProps: {
+    fixedItem
+  }
+}, addonId, addon);
+
+const renderAddons = (addons, fixedItem) => Array.isArray(addons) ? addons.map(renderAddon) : renderAddon(addons, fixedItem);
+
+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;
+};
+
+function MenuItem(props) {
+  const {
+    innerRef,
+    as = 'li',
+    role = 'menuitem',
+    leftAddon = null,
+    rightAddon = undefined,
+    disabledAddonInactive = undefined,
+    label = undefined,
+    children,
+    tabIndex = -1,
+    onKeyDown = noop,
+    fixedItem = false,
+    noAddon,
+    disabled = false,
+    customRenderer,
+    maxOption,
+    closeMenu,
+    style
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded);
+
+  const menuCxt = useContext(MenuContext);
+  const ref = useRef(null);
+  useFocusGroupItem(ref);
+
+  if (otherProps.subItems) {
+    return /*#__PURE__*/jsx(SubMenu, _objectSpread(_objectSpread({}, props), {}, {
+      closeMenu: menuCxt.closeMenu,
+      children: renderMenuItems(otherProps.subItems)
+    }));
+  }
+
+  const wrapperProps = useMemo(() => omit(otherProps, ['icon']), [otherProps]);
+
+  const onClick = function () {
+    if (wrapperProps.onClick) wrapperProps.onClick(...arguments);
+
+    if (wrapperProps.closeOnClick && menuCxt.closeMenu) {
+      menuCxt.closeMenu(...arguments);
+    }
+  };
+
+  return /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({
+    as: as,
+    classProps: {
+      disabled,
+      disabledAddonInactive,
+      customRenderer,
+      fixedItem,
+      type: otherProps.type
+    },
+    id: otherProps.id,
+    innerRef: otherProps.type !== 'disabled' ? mergeRefs(innerRef, ref) : innerRef,
+    onKeyDown: !fixedItem && runAll(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,
+    children: [!noAddon && renderAddons(leftAddon, fixedItem), label && /*#__PURE__*/_jsx(Content, {
+      style: maxOption > 0 ? {
+        width: "".concat(calculateSize(maxOption), "px"),
+        maxWidth: "".concat(calculateSize(maxOption), "px")
+      } : undefined
+    }, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+      value: label
+    })), customRenderer, rightAddon && renderAddons(rightAddon), children]
+  }));
+}
+
+const props = {
+  /** 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')
+};
+const DSMenuItemWithSchema = describe(MenuItem);
+DSMenuItemWithSchema.propTypes = props;
+
+export { DSMenuItemWithSchema, MenuItem as default };