@elliemae/ds-menu 1.57.1-rc.0 → 2.0.0-alpha.11

package/esm/MenuItems/SearchableList.js

@@ -1,65 +1,48 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState, useCallback, useMemo } from 'react';
+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';
-import { DSComboBox } from '@elliemae/ds-form';
+import { uniqBy } from '@elliemae/ds-utilities/utils';
+import DSComboBox from '@elliemae/ds-form/ComboBox';
+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; }
 
 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 noop = function noop() {};
-
-function SearchableList(_ref) {
-  var _ref$onSelectMenuItem = _ref.onSelectMenuItem,
-      onSelectMenuItem = _ref$onSelectMenuItem === void 0 ? noop : _ref$onSelectMenuItem,
-      _ref$components = _ref.components,
-      components = _ref$components === void 0 ? {} : _ref$components,
-      _ref$searchTerm = _ref.searchTerm,
-      searchTermProp = _ref$searchTerm === void 0 ? '' : _ref$searchTerm,
-      _ref$items = _ref.items,
-      items = _ref$items === void 0 ? [] : _ref$items,
-      _ref$dropdownFilterOp = _ref.dropdownFilterOptions,
-      dropdownFilterOptions = _ref$dropdownFilterOp === void 0 ? {} : _ref$dropdownFilterOp,
-      returnValue = _ref.returnValue,
-      _ref$extraListProps = _ref.extraListProps,
-      extraListProps = _ref$extraListProps === void 0 ? {} : _ref$extraListProps,
-      _ref$appendTermInList = _ref.appendTermInList,
-      appendTermInList = _ref$appendTermInList === void 0 ? false : _ref$appendTermInList,
-      _ref$maxOptions = _ref.maxOptions,
-      maxOptions = _ref$maxOptions === void 0 ? 10 : _ref$maxOptions,
-      _ref$loading = _ref.loading,
-      loading = _ref$loading === void 0 ? false : _ref$loading;
-
-  var _useState = useState(searchTermProp),
-      _useState2 = _slicedToArray(_useState, 2),
-      searchTerm = _useState2[0],
-      setInputValue = _useState2[1];
-
-  var handleInputChange = useCallback(function (value, args) {
-    var action = args ? args.action : null;
+const noop = () => {};
+
+function SearchableList({
+  onSelectMenuItem = noop,
+  components = {},
+  searchTerm: searchTermProp = '',
+  items = [],
+  dropdownFilterOptions = {},
+  returnValue,
+  extraListProps = {},
+  appendTermInList = false,
+  maxOptions = 10,
+  loading = false
+}) {
+  const [searchTerm, setInputValue] = useState(searchTermProp);
+  const handleInputChange = useCallback((value, args) => {
+    const action = args ? args.action : null;
     if (action === 'input-blur' || action === 'menu-close') return;
     setInputValue(value);
   }, [searchTerm]);
-  var handleFilterByText = useCallback(function () {
+  const handleFilterByText = useCallback(() => {
     if (searchTerm) onSelectMenuItem(searchTerm);
   }, [searchTerm]);
-  var handleKeyDown = useCallback(function (e) {
+  const handleKeyDown = useCallback(e => {
     if (e.key === 'ArrowRight') {
       handleFilterByText();
     }
   }, [searchTerm]);
-  var options = useMemo(function () {
-    return searchTerm && appendTermInList ? uniqBy([{
-      id: searchTerm,
-      label: searchTerm
-    }].concat(items), function (item) {
-      return item.label;
-    }) : items;
-  }, [searchTerm, appendTermInList]);
-  return /*#__PURE__*/React.createElement(DSComboBox, _extends({
+  const options = useMemo(() => searchTerm && appendTermInList ? uniqBy([{
+    id: searchTerm,
+    label: searchTerm
+  }].concat(items), item => item.label) : items, [searchTerm, appendTermInList]);
+  return /*#__PURE__*/jsx(DSComboBox, _objectSpread(_objectSpread({
     autoFocus: true,
     components: _objectSpread({
       DropdownIndicator: null
@@ -79,10 +62,10 @@ function SearchableList(_ref) {
     valueProperty: "id",
     maxOptions: maxOptions,
     loading: loading
-  }, extraListProps, dropdownFilterOptions));
+  }, extraListProps), dropdownFilterOptions));
 }
 
-var props = {
+const props = {
   /** callback after item gets selected */
   onSelectMenuItem: PropTypes.func.description('callback after item gets selected'),
 
@@ -113,9 +96,7 @@ var props = {
   /**  loading flag */
   loading: PropTypes.bool.description('loading flag')
 };
-SearchableList.propTypes = props;
-var DSMenuSearchableListWithSchema = describe(SearchableList);
+const DSMenuSearchableListWithSchema = describe(SearchableList);
 DSMenuSearchableListWithSchema.propTypes = props;
 
 export { DSMenuSearchableListWithSchema, SearchableList as default };
-//# sourceMappingURL=SearchableList.js.map

package/esm/MenuItems/SelectionGroup.js

@@ -1,31 +1,87 @@
-import '@babel/runtime/helpers/esm/extends';
-import 'react';
-import 'react-desc';
-import '@elliemae/ds-shared/CheckableGroup';
-import './SearchableGroup.js';
-export { d as DSMenuSelectionGroupWithSchema, S as default } from '../SubMenu-a25e69ec.js';
-import '../VirtualMenuList.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-shared/FocusGroup';
-import '@elliemae/ds-form/SearchBox';
-import '../MenuContext.js';
-import 'react-window';
-import '../utils/useHeightByAmountOfItems.js';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-hidden';
-import '@elliemae/ds-button';
-import '@elliemae/ds-popper';
-import 'styled-components';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'lodash';
-import 'react-spring/web.cjs';
-import '@elliemae/ds-utilities';
-import '@elliemae/ds-truncated-tooltip-text';
-import './Separator.js';
-import '@elliemae/ds-separator';
-import '@elliemae/ds-form';
-import './CheckboxGroup.js';
-import './RadioGroup.js';
-//# sourceMappingURL=SelectionGroup.js.map
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useMemo, createElement } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import { useCheckableGroup } from '@elliemae/ds-shared/CheckableGroup';
+import SearchableGroup from './SearchableGroup.js';
+import { menuItemFactory } from './menuItemFactory.js';
+import VirtualMenuList from '../VirtualMenuList.js';
+
+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; }
+
+const noop = () => null;
+
+function SelectionGroup({
+  multi = false,
+  searchable = false,
+  focusOnOpen = false,
+  onSelect = noop,
+  children,
+  items = undefined,
+  active = multi ? [] : '',
+  width,
+  height
+}) {
+  const renderedItems = useMemo(() => items && items.map(item => {
+    const Component = menuItemFactory(multi ? 'checkbox' : 'radio');
+    return /*#__PURE__*/createElement(Component, _objectSpread(_objectSpread({}, item), {}, {
+      key: item.name || item.id || item.key,
+      item: item,
+      name: item.id || item.name
+    }));
+  }), [items]);
+  const decoratedGroupChildren = useCheckableGroup({
+    children: renderedItems || children,
+    multi,
+    active,
+    onCheck: onSelect
+  });
+
+  if (searchable) {
+    return /*#__PURE__*/_jsx(SearchableGroup, {
+      focusOnOpen: focusOnOpen,
+      height: height,
+      items: items,
+      width: width
+    }, void 0, decoratedGroupChildren);
+  }
+
+  return /*#__PURE__*/_jsx(VirtualMenuList, {
+    height: height,
+    items: decoratedGroupChildren,
+    width: width
+  });
+}
+
+const props = {
+  /** 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')
+};
+const DSMenuSelectionGroupWithSchema = describe(SelectionGroup);
+DSMenuSelectionGroupWithSchema.propTypes = props;
+
+export { DSMenuSelectionGroupWithSchema, SelectionGroup as default };

package/esm/MenuItems/Separator.js

@@ -1,32 +1,30 @@
-import React from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import { PropTypes, describe } from 'react-desc';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
 import DSSeparator from '@elliemae/ds-separator';
 import styled from 'styled-components';
 
-var blockName = 'menu-separator';
-var Li = /*#__PURE__*/styled.li.withConfig({
+var _DSSeparator;
+const blockName = 'menu-separator';
+const Li = /*#__PURE__*/styled.li.withConfig({
   componentId: "sc-aysbq3-0"
 })(["display:flex;align-items:flex-start;flex-direction:column;"]);
-var Title = aggregatedClasses('h5')(blockName, 'title');
+const Title = aggregatedClasses('h5')(blockName, 'title');
 
-var MenuSeparator = function MenuSeparator(_ref) {
-  var title = _ref.title,
-      _ref$showSeparator = _ref.showSeparator,
-      showSeparator = _ref$showSeparator === void 0 ? true : _ref$showSeparator;
-  return /*#__PURE__*/React.createElement(Li, null, showSeparator && /*#__PURE__*/React.createElement(DSSeparator, null), title && /*#__PURE__*/React.createElement(Title, null, title));
-};
+const MenuSeparator = ({
+  title,
+  showSeparator = true
+}) => /*#__PURE__*/_jsx(Li, {}, void 0, showSeparator && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx(DSSeparator, {}))), title && /*#__PURE__*/_jsx(Title, {}, void 0, title));
 
-var props = {
+const props = {
   /** menu separator h5 title */
   title: PropTypes.string.description('menu separator h5 title'),
 
   /** toggle separator on and off */
   showSeparator: PropTypes.bool.description('toggle separator on and off')
 };
-MenuSeparator.propTypes = props;
-var DSMenuSeparatorWithSchema = describe(MenuSeparator);
+const DSMenuSeparatorWithSchema = describe(MenuSeparator);
 DSMenuSeparatorWithSchema.propTypes = props;
 
 export { DSMenuSeparatorWithSchema, MenuSeparator as default };
-//# sourceMappingURL=Separator.js.map

package/esm/MenuItems/SubMenu.js

@@ -1,31 +1,186 @@
-import '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react';
-import 'react-desc';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-shared/FocusGroup';
-import '@elliemae/ds-hidden';
-import '@elliemae/ds-button';
-import '@elliemae/ds-popper';
-import 'styled-components';
-export { a as DSSubMenuWithSchema, j as default } from '../SubMenu-a25e69ec.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'lodash';
-import '@elliemae/ds-classnames';
-import 'react-spring/web.cjs';
-import '@elliemae/ds-utilities';
-import '@elliemae/ds-truncated-tooltip-text';
-import './Separator.js';
-import '@elliemae/ds-separator';
-import '@elliemae/ds-shared/CheckableGroup';
-import './SearchableGroup.js';
-import '@elliemae/ds-form/SearchBox';
-import '../VirtualMenuList.js';
-import 'react-window';
-import '../utils/useHeightByAmountOfItems.js';
-import '../MenuContext.js';
-import '@elliemae/ds-form';
-import './CheckboxGroup.js';
-import './RadioGroup.js';
-//# sourceMappingURL=SubMenu.js.map
+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 { 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 styled from 'styled-components';
+import { Menu } from '../Menu.js';
+import MenuItem from './MenuItem.js';
+import { jsx, Fragment } 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; }
+
+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; }
+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
+}) {
+  const itemRef = useRef(null);
+  const focusOnOpen = useRef(false);
+  const [isAddonHovered, setIsAddonHovered] = useState(false);
+  const {
+    visible = false,
+    onShow,
+    onHide
+  } = useHiddenController(undefined, {
+    interaction: 'click'
+  });
+  const interaction = rightAddonType === 'elipsis' ? 'click' : 'hover';
+  const {
+    focusItemByNode
+  } = useFocusGroupItem(); // todo: create a menu state to handle all related menu things
+
+  const handleShowSubItemsWithMouse = e => {
+    e.stopPropagation();
+    onShow();
+    focusOnOpen.current = true;
+  };
+
+  const handleShowWithMouse = e => {
+    if (onClick) onClick(e);
+  };
+
+  const handleShowWithMouseHover = () => {
+    setIsAddonHovered(true);
+    onShow();
+    focusOnOpen.current = false;
+  };
+
+  const handleShowWithKeyboard = () => {
+    onShow();
+    focusOnOpen.current = true;
+  };
+
+  const handleOnMouseEnter = useCallback(() => {
+    setIsAddonHovered(true);
+  }, []);
+  const handleOnMouseLeave = useCallback(() => {
+    setIsAddonHovered(false);
+  }, []);
+  const hoverHandlers = interaction === 'hover' ? {
+    onMouseEnter: handleShowWithMouseHover,
+    onMouseLeave: () => {
+      onHide();
+      setIsAddonHovered(false);
+    }
+  } : {
+    onClick: handleShowWithMouse
+  };
+  const rightAddon = rightAddonType === 'elipsis' ? /*#__PURE__*/_jsx(DSButton, {
+    "aria-label": "vertical-elipsis",
+    "data-testid": "vertical-elipsis",
+    buttonType: "text",
+    leftIcon: /*#__PURE__*/_jsx(VerticalElipsis, {
+      className: "submenu-arrow",
+      color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
+      size: "s"
+    }),
+    onClick: e => handleShowSubItemsWithMouse(e),
+    size: "m",
+    variant: BUTTON_VARIANT.DEFAULT
+  }) : /*#__PURE__*/_jsx(ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx(ChevronRight, {
+    "data-testid": "chevron-right",
+    className: "submenu-arrow",
+    color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
+    size: "sm"
+  }));
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/_jsx(DSPopper, {
+      contentComponent: /*#__PURE__*/jsx(Menu, _objectSpread(_objectSpread({
+        focusKeyBindings: {
+          ArrowLeft: [() => focusItemByNode(itemRef.current), 'exit']
+        },
+        focusOnOpen: focusOnOpen.current,
+        onExitFocusGroup: onHide
+      }, hoverHandlers), {}, {
+        closeMenu: closeMenu,
+        visible: visible,
+        children: subitems
+      })),
+      interactionType: interactionType,
+      isOpen: visible,
+      onOpen: opening => opening ? onShow() : onHide(),
+      placement: "right-start",
+      showArrow: false,
+      triggerComponent: /*#__PURE__*/jsx(MenuItem, _objectSpread(_objectSpread({
+        customRenderer: customRenderer,
+        disabledAddonInactive: disabledAddonInactive,
+        id: id,
+        innerRef: itemRef,
+        label: label,
+        leftAddon: leftAddon,
+        noAddon: noAddon,
+        onFocus: handleOnMouseEnter,
+        onBlur: handleOnMouseLeave,
+        onMouseEnter: handleOnMouseEnter,
+        onMouseLeave: handleOnMouseLeave
+      }, hoverHandlers), {}, {
+        onKeyDown: e => {
+          if (e.key === 'ArrowRight' || e.key === 'Enter' || e.keyCode === 32) {
+            handleShowWithKeyboard();
+          }
+        },
+        rightAddon: rightAddon
+      }, checkableProps))
+    })
+  });
+}
+
+const 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')
+};
+const DSSubMenuWithSchema = describe(SubMenu);
+DSSubMenuWithSchema.propTypes = props;
+
+export { DSSubMenuWithSchema, SubMenu as default };

package/esm/MenuItems/menuItemFactory.js

@@ -1,31 +1,51 @@
-import '@babel/runtime/helpers/esm/extends';
-import 'react';
-import '@elliemae/ds-utilities';
-import './Separator.js';
-export { m as menuItemFactory, r as renderMenuItems } from '../SubMenu-a25e69ec.js';
-import 'react-desc';
-import '@elliemae/ds-classnames';
-import '@elliemae/ds-separator';
-import 'styled-components';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-shared/FocusGroup';
-import '@elliemae/ds-hidden';
-import '@elliemae/ds-button';
-import '@elliemae/ds-popper';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'lodash';
-import 'react-spring/web.cjs';
-import '@elliemae/ds-truncated-tooltip-text';
-import '@elliemae/ds-shared/CheckableGroup';
-import './SearchableGroup.js';
-import '@elliemae/ds-form/SearchBox';
-import '../VirtualMenuList.js';
-import 'react-window';
-import '../utils/useHeightByAmountOfItems.js';
-import '../MenuContext.js';
-import '@elliemae/ds-form';
-import './CheckboxGroup.js';
-import './RadioGroup.js';
-//# sourceMappingURL=menuItemFactory.js.map
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { createElement } from 'react';
+import { isFunction } from '@elliemae/ds-utilities/utils';
+import MenuSeparator from './Separator.js';
+import MenuItem from './MenuItem.js';
+import SubMenu from './SubMenu.js';
+import SelectionGroup from './SelectionGroup.js';
+import MenuItemCheckbox from './MenuItemCheckbox.js';
+import MenuItemRadio from './MenuItemRadio.js';
+
+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; }
+const itemTypes = {
+  separator: MenuSeparator,
+  menuitem: MenuItem,
+  radio: MenuItemRadio,
+  checkbox: MenuItemCheckbox,
+  submenu: SubMenu,
+  'selection-group': SelectionGroup
+};
+const fallback = {
+  SelectionGroup: 'selection-group'
+};
+function menuItemFactory(type = '', items, defaultItem = itemTypes.menuitem) {
+  const itemsObject = items || itemTypes;
+  const parsedType = fallback[type] || type.toLowerCase();
+  return itemsObject[parsedType] || defaultItem;
+}
+function renderMenuItems(options, factory = menuItemFactory) {
+  return options.map((option, index) => {
+    if (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__*/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);
+  });
+}
+
+export { menuItemFactory, renderMenuItems };

package/esm/VirtualMenuList.js

@@ -1,38 +1,35 @@
-import React from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import { FixedSizeList } from 'react-window';
 import useHeightByAmountOfItems from './utils/useHeightByAmountOfItems.js';
 
-var MenuItem = function MenuItem(_ref) {
-  var data = _ref.data,
-      index = _ref.index,
-      style = _ref.style;
-  return /*#__PURE__*/React.createElement("div", {
-    key: index,
-    style: style
-  }, data[index]);
-}; // eslint-disable-next-line no-unused-vars
+const MenuItem = ({
+  data,
+  index,
+  style
+}) => /*#__PURE__*/_jsx("div", {
+  style: style
+}, index, data && data[index] ? data[index] : ''); // eslint-disable-next-line no-unused-vars
 
-function VirtualMenuList(_ref2) {
-  var items = _ref2.items,
-      _ref2$itemHeight = _ref2.itemHeight,
-      itemHeight = _ref2$itemHeight === void 0 ? 32 : _ref2$itemHeight,
-      _ref2$amountItemsInWi = _ref2.amountItemsInWindow,
-      amountItemsInWindow = _ref2$amountItemsInWi === void 0 ? 5 : _ref2$amountItemsInWi,
-      width = _ref2.width,
-      height = _ref2.height;
-  var computedListHeight = useHeightByAmountOfItems({
+function VirtualMenuList({
+  items,
+  itemHeight = 32,
+  amountItemsInWindow = 5,
+  width,
+  height
+}) {
+  const computedListHeight = useHeightByAmountOfItems({
     amountItems: amountItemsInWindow,
-    itemHeight: itemHeight,
-    items: items
+    itemHeight,
+    items
   });
-  return /*#__PURE__*/React.createElement(FixedSizeList, {
+  return /*#__PURE__*/_jsx(FixedSizeList, {
     height: height || computedListHeight,
     itemCount: items.length,
     itemData: items,
     itemSize: itemHeight,
     width: width
-  }, MenuItem);
+  }, void 0, MenuItem);
 }
 
 export { VirtualMenuList as default };
-//# sourceMappingURL=VirtualMenuList.js.map