@elliemae/ds-menu 2.2.0 → 2.3.0-alpha.3

package/esm/MenuItems/SubMenu.js

@@ -1,45 +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 _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 { MoreOptionsVert, ChevronSmallRight } from '@elliemae/ds-icons';
-import { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';
-import { useHiddenController } from '@elliemae/ds-hidden';
-import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-button';
-import DSPopper, { interactions } from '@elliemae/ds-popper';
-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); 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 ChevronRightComp = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1qhp1z-0"
-})(["display:flex;justify-content:center;align-items:center;width:28px;"]);
-
-function SubMenu(_ref) {
-  let {
-    noAddon,
-    leftAddon = undefined,
-    label = undefined,
-    interactionType = 'hover',
-    children: subitems,
-    rightAddonType,
-    disabledAddonInactive,
-    checkableProps = {},
-    customRenderer,
-    onClick,
-    closeMenu,
-    id
-  } = _ref;
+import * as React from "react";
+import React2, { useCallback, useRef, useState } from "react";
+import { PropTypes, describe } from "react-desc";
+import { ChevronSmallRight, MoreOptionsVert } from "@elliemae/ds-icons";
+import { useFocusGroupItem } from "@elliemae/ds-shared/FocusGroup";
+import { useHiddenController } from "@elliemae/ds-hidden";
+import { DSButton, BUTTON_VARIANT } from "@elliemae/ds-button";
+import { DSPopper, interactions } from "@elliemae/ds-popper";
+import styled from "styled-components";
+import { Menu } from "../Menu";
+import { MenuItem } from "./MenuItem";
+import { registerMenuItem } from "./menuItemFactory";
+const ChevronRightComp = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 28px; // same width as the ellipsis button
+`;
+const SubMenu = ({
+  noAddon,
+  leftAddon = void 0,
+  label = void 0,
+  interactionType = "hover",
+  children: subitems,
+  rightAddonType,
+  disabledAddonInactive,
+  checkableProps = {},
+  customRenderer,
+  onClick,
+  closeMenu,
+  id
+}) => {
   const itemRef = useRef(null);
   const focusOnOpen = useRef(false);
   const [isAddonHovered, setIsAddonHovered] = useState(false);
@@ -47,144 +37,121 @@ function SubMenu(_ref) {
     visible = false,
     onShow,
     onHide
-  } = useHiddenController(undefined, {
-    interaction: 'click'
+  } = useHiddenController(void 0, {
+    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 => {
+  const interaction = rightAddonType === "elipsis" ? "click" : "hover";
+  const { focusItemByNode } = useFocusGroupItem();
+  const handleShowSubItemsWithMouse = (e) => {
     e.stopPropagation();
     onShow();
     focusOnOpen.current = true;
   };
-
-  const handleShowWithMouse = e => {
-    if (onClick) onClick(e);
+  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' ? {
+  const hoverHandlers = interaction === "hover" ? {
     onMouseEnter: handleShowWithMouseHover,
     onMouseLeave: () => {
       onHide();
       setIsAddonHovered(false);
     }
-  } : {
-    onClick: handleShowWithMouse
-  };
-  const rightAddon = rightAddonType === 'elipsis' ? /*#__PURE__*/_jsx(DSButton, {
+  } : { onClick: handleShowWithMouse };
+  const rightAddon = rightAddonType === "elipsis" ? /* @__PURE__ */ React2.createElement(DSButton, {
     "aria-label": "vertical-elipsis",
     "data-testid": "vertical-elipsis",
     buttonType: "text",
-    leftIcon: /*#__PURE__*/_jsx(MoreOptionsVert, {
+    leftIcon: /* @__PURE__ */ React2.createElement(MoreOptionsVert, {
       className: "submenu-arrow",
-      color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
+      color: visible || isAddonHovered ? ["brand-primary", 800] : ["neutral", 500],
       size: "s"
     }),
-    onClick: e => handleShowSubItemsWithMouse(e),
+    onClick: (e) => handleShowSubItemsWithMouse(e),
     size: "m",
     variant: BUTTON_VARIANT.DEFAULT
-  }) : /*#__PURE__*/_jsx(ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx(ChevronSmallRight, {
+  }) : /* @__PURE__ */ React2.createElement(ChevronRightComp, null, /* @__PURE__ */ React2.createElement(ChevronSmallRight, {
     "data-testid": "chevron-right",
     className: "submenu-arrow",
-    color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
+    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))
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DSPopper, {
+    contentComponent: /* @__PURE__ */ React2.createElement(Menu, {
+      focusKeyBindings: {
+        ArrowLeft: [() => focusItemByNode(itemRef.current), "exit"]
+      },
+      focusOnOpen: focusOnOpen.current,
+      onExitFocusGroup: onHide,
+      ...hoverHandlers,
+      closeMenu,
+      visible
+    }, subitems),
+    interactionType,
+    isOpen: visible,
+    onOpen: (opening) => opening ? onShow() : onHide(),
+    placement: "right-start",
+    showArrow: false,
+    triggerComponent: /* @__PURE__ */ React2.createElement(MenuItem, {
+      customRenderer,
+      disabledAddonInactive,
+      id,
+      innerRef: itemRef,
+      label,
+      leftAddon,
+      noAddon,
+      onFocus: handleOnMouseEnter,
+      onBlur: handleOnMouseLeave,
+      onMouseEnter: handleOnMouseEnter,
+      onMouseLeave: handleOnMouseLeave,
+      ...hoverHandlers,
+      onKeyDown: (e) => {
+        if (e.key === "ArrowRight" || e.key === "Enter" || e.keyCode === 32) {
+          handleShowWithKeyboard();
+        }
+      },
+      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')
+  noAddon: PropTypes.bool.description("dont show addon for submenu"),
+  leftAddon: PropTypes.node.description("left addon"),
+  label: PropTypes.string.description("submenu label"),
+  interactionType: PropTypes.oneOf(interactions).description("A type indicating how to open/close the tooltip"),
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]).description("sub menu items"),
+  rightAddonType: PropTypes.oneOf(["ellipsis"]).description("right addon, ellipsis or undefined"),
+  disabledAddonInactive: PropTypes.bool.description(""),
+  checkableProps: PropTypes.object.description("props passed to MenuItem component"),
+  customRenderer: PropTypes.func.description("custom renderer for menu item"),
+  onClick: PropTypes.func.description("on click handler"),
+  closeMenu: PropTypes.any.description(""),
+  id: PropTypes.string.description("component id")
 };
+SubMenu.propTypes = props;
+registerMenuItem("submenu", SubMenu);
 const DSSubMenuWithSchema = describe(SubMenu);
 DSSubMenuWithSchema.propTypes = props;
-
-export { DSSubMenuWithSchema, SubMenu as default };
+var SubMenu_default = SubMenu;
+export {
+  DSSubMenuWithSchema,
+  SubMenu,
+  SubMenu_default as default
+};
+//# sourceMappingURL=SubMenu.js.map

package/esm/MenuItems/SubMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SubMenu.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\n/* eslint-disable import/no-cycle */\nimport React, { useCallback, useRef, useState } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { ChevronSmallRight, MoreOptionsVert } from '@elliemae/ds-icons';\nimport { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';\nimport { useHiddenController } from '@elliemae/ds-hidden';\nimport { DSButton, BUTTON_VARIANT } from '@elliemae/ds-button';\nimport { DSPopper, interactions } from '@elliemae/ds-popper';\nimport styled from 'styled-components';\nimport { Menu } from '../Menu';\nimport { MenuItem } from './MenuItem';\nimport { registerMenuItem } from './menuItemFactory';\n\nconst ChevronRightComp = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 28px; // same width as the ellipsis button\n`;\n\nconst SubMenu = ({\n  noAddon,\n  leftAddon = undefined,\n  label = undefined,\n  interactionType = 'hover',\n  children: subitems,\n  rightAddonType,\n  disabledAddonInactive,\n  checkableProps = {},\n  customRenderer,\n  onClick,\n  closeMenu,\n  id,\n}) => {\n  const itemRef = useRef(null);\n  const focusOnOpen = useRef(false);\n  const [isAddonHovered, setIsAddonHovered] = useState<boolean>(false);\n  const {\n    visible = false,\n    onShow,\n    onHide,\n  } = useHiddenController(undefined, {\n    interaction: 'click',\n  });\n\n  const interaction = rightAddonType === 'elipsis' ? 'click' : 'hover';\n\n  const { focusItemByNode } = useFocusGroupItem();\n  // todo: create a menu state to handle all related menu things\n  const handleShowSubItemsWithMouse = (e) => {\n    e.stopPropagation();\n    onShow();\n    focusOnOpen.current = true;\n  };\n  const handleShowWithMouse = (e) => {\n    if (onClick) onClick(e);\n  };\n  const handleShowWithMouseHover = () => {\n    setIsAddonHovered(true);\n    onShow();\n    focusOnOpen.current = false;\n  };\n\n  const handleShowWithKeyboard = () => {\n    onShow();\n    focusOnOpen.current = true;\n  };\n\n  const handleOnMouseEnter = useCallback(() => {\n    setIsAddonHovered(true);\n  }, []);\n\n  const handleOnMouseLeave = useCallback(() => {\n    setIsAddonHovered(false);\n  }, []);\n\n  const hoverHandlers =\n    interaction === 'hover'\n      ? {\n          onMouseEnter: handleShowWithMouseHover,\n          onMouseLeave: () => {\n            onHide();\n            setIsAddonHovered(false);\n          },\n        }\n      : { onClick: handleShowWithMouse };\n\n  const rightAddon =\n    rightAddonType === 'elipsis' ? (\n      <DSButton\n        aria-label=\"vertical-elipsis\"\n        data-testid=\"vertical-elipsis\"\n        buttonType=\"text\"\n        leftIcon={\n          <MoreOptionsVert\n            className=\"submenu-arrow\"\n            color={visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500]}\n            size=\"s\"\n          />\n        }\n        onClick={(e) => handleShowSubItemsWithMouse(e)}\n        size=\"m\"\n        variant={BUTTON_VARIANT.DEFAULT}\n      />\n    ) : (\n      <ChevronRightComp>\n        <ChevronSmallRight\n          data-testid=\"chevron-right\"\n          className=\"submenu-arrow\"\n          color={visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500]}\n          size=\"sm\"\n        />\n      </ChevronRightComp>\n    );\n\n  return (\n    <>\n      <DSPopper\n        contentComponent={\n          <Menu\n            focusKeyBindings={{\n              ArrowLeft: [() => focusItemByNode(itemRef.current), 'exit'],\n            }}\n            focusOnOpen={focusOnOpen.current}\n            onExitFocusGroup={onHide}\n            {...hoverHandlers}\n            closeMenu={closeMenu}\n            visible={visible}\n          >\n            {subitems}\n          </Menu>\n        }\n        interactionType={interactionType}\n        isOpen={visible}\n        onOpen={(opening) => (opening ? onShow() : onHide())}\n        placement=\"right-start\"\n        showArrow={false}\n        triggerComponent={\n          <MenuItem\n            customRenderer={customRenderer}\n            disabledAddonInactive={disabledAddonInactive}\n            id={id}\n            innerRef={itemRef}\n            label={label}\n            leftAddon={leftAddon}\n            noAddon={noAddon}\n            onFocus={handleOnMouseEnter}\n            onBlur={handleOnMouseLeave}\n            onMouseEnter={handleOnMouseEnter}\n            onMouseLeave={handleOnMouseLeave}\n            {...hoverHandlers}\n            onKeyDown={(e) => {\n              if (e.key === 'ArrowRight' || e.key === 'Enter' || e.keyCode === 32) {\n                handleShowWithKeyboard();\n              }\n            }}\n            rightAddon={rightAddon}\n            {...checkableProps}\n          />\n        }\n      />\n    </>\n  );\n};\n\nconst props = {\n  /** dont show addon for submenu */\n  noAddon: PropTypes.bool.description('dont show addon for submenu'),\n  /** left addon */\n  leftAddon: PropTypes.node.description('left addon'),\n  /** submenu label */\n  label: PropTypes.string.description('submenu label'),\n  /** A type indicating how to open/close the tooltip */\n  interactionType: PropTypes.oneOf(interactions).description('A type indicating how to open/close the tooltip'),\n  /** sub menu items */\n  children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]).description('sub menu items'),\n  /** right addon, ellipsis or undefined */\n  rightAddonType: PropTypes.oneOf(['ellipsis']).description('right addon, ellipsis or undefined'),\n  disabledAddonInactive: PropTypes.bool.description(''),\n  /** props passed to MenuItem component */\n  checkableProps: PropTypes.object.description('props passed to MenuItem component'),\n  /** custom renderer for menu item */\n  customRenderer: PropTypes.func.description('custom renderer for menu item'),\n  /** on click handler */\n  onClick: PropTypes.func.description('on click handler'),\n  closeMenu: PropTypes.any.description(''),\n  /** component id */\n  id: PropTypes.string.description('component id'),\n};\n\nSubMenu.propTypes = props;\nregisterMenuItem('submenu', SubMenu);\n\nconst DSSubMenuWithSchema = describe(SubMenu);\n\nDSSubMenuWithSchema.propTypes = props;\n\nexport { DSSubMenuWithSchema, SubMenu };\nexport default SubMenu;\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/MenuItems/menuItemFactory.js

@@ -1,64 +1,12 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import { createElement } from 'react';
-import { isFunction } from '@elliemae/ds-utilities';
-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); 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 itemTypes = () => ({
-  separator: MenuSeparator,
-  menuitem: MenuItem,
-  radio: MenuItemRadio,
-  checkbox: MenuItemCheckbox,
-  submenu: SubMenu,
-  'selection-group': SelectionGroup
-});
-
-const fallback = {
-  SelectionGroup: 'selection-group'
+import * as React from "react";
+const itemTypes = {};
+const menuItemFactory = (type = "", items, defaultItem = itemTypes.menuitem) => {
+  const itemsObject = items || itemTypes;
+  return itemsObject[type] || itemsObject[type.toLowerCase()] || defaultItem;
 };
-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 (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 };
+const registerMenuItem = (type, item) => itemTypes[type] = item;
+export {
+  menuItemFactory,
+  registerMenuItem
+};
+//# sourceMappingURL=menuItemFactory.js.map

package/esm/MenuItems/menuItemFactory.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/menuItemFactory.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\nconst itemTypes = {};\n\nexport const menuItemFactory = (type = '', items, defaultItem = itemTypes.menuitem) => {\n  const itemsObject = items || itemTypes;\n  return itemsObject[type] || itemsObject[type.toLowerCase()] || defaultItem;\n};\n\nexport const registerMenuItem = (type, item) => (itemTypes[type] = item);\n"],
+  "mappings": "AAAA;ACEA,MAAM,YAAY;AAEX,MAAM,kBAAkB,CAAC,OAAO,IAAI,OAAO,cAAc,UAAU,aAAa;AACrF,QAAM,cAAc,SAAS;AAC7B,SAAO,YAAY,SAAS,YAAY,KAAK,kBAAkB;AAAA;AAG1D,MAAM,mBAAmB,CAAC,MAAM,SAAU,UAAU,QAAQ;",
+  "names": []
+}

package/esm/MenuItems/renderMenuItems.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+import React2 from "react";
+import { isFunction } from "@elliemae/ds-utilities";
+const renderMenuItems = (options, factory) => 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__ */ React2.createElement(ItemComponent, {
+    ...option,
+    key: option.id || index,
+    item: option,
+    onClick: null,
+    onMouseDown: option.onClick
+  }, children);
+});
+export {
+  renderMenuItems
+};
+//# sourceMappingURL=renderMenuItems.js.map

package/esm/MenuItems/renderMenuItems.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/renderMenuItems.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\nimport React from 'react';\nimport { isFunction } from '@elliemae/ds-utilities';\n\nexport const renderMenuItems = (options, factory) =>\n  options.map((option, index) => {\n    if (isFunction(option.renderer)) {\n      return option.renderer({\n        key: option.id,\n        item: option,\n      });\n    }\n    const ItemComponent = factory(option.type);\n    const children = option.subItems && renderMenuItems(option.subItems, factory);\n    return (\n      <ItemComponent\n        {...option}\n        key={option.id || index}\n        item={option}\n        onClick={null}\n        onMouseDown={option.onClick}\n        // onClick callback called in onMouseDown due to events order issue\n      >\n        {children}\n      </ItemComponent>\n    );\n  });\n"],
+  "mappings": "AAAA;ACCA;AACA;AAEO,MAAM,kBAAkB,CAAC,SAAS,YACvC,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC7B,MAAI,WAAW,OAAO,WAAW;AAC/B,WAAO,OAAO,SAAS;AAAA,MACrB,KAAK,OAAO;AAAA,MACZ,MAAM;AAAA;AAAA;AAGV,QAAM,gBAAgB,QAAQ,OAAO;AACrC,QAAM,WAAW,OAAO,YAAY,gBAAgB,OAAO,UAAU;AACrE,SACE,qCAAC,eAAD;AAAA,OACM;AAAA,IACJ,KAAK,OAAO,MAAM;AAAA,IAClB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,aAAa,OAAO;AAAA,KAGnB;AAAA;",
+  "names": []
+}

package/esm/VirtualMenuList.js

@@ -1,42 +1,49 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import 'react';
-import { FixedSizeList } from 'react-window';
-import useHeightByAmountOfItems from './utils/useHeightByAmountOfItems.js';
-
-const MenuItem = _ref => {
-  let {
-    data,
-    index,
-    style
-  } = _ref;
-  return /*#__PURE__*/_jsx("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;
+import * as React from "react";
+import React2 from "react";
+import { FixedSizeList as List } from "react-window";
+import { useHeightByAmountOfItems } from "./utils/useHeightByAmountOfItems";
+const MenuItem = ({ data, index, style }) => /* @__PURE__ */ React2.createElement("div", {
+  key: index,
+  style
+}, data && data[index] ? data[index] : "");
+function resolveComputation(items, cb, timeout = 1e3) {
+  return () => new Promise((resolve) => {
+    const doResolve = (result2) => {
+      cb(result2);
+      resolve(result2);
+    };
+    let result = 0;
+    const timer = setTimeout(() => doResolve(result), timeout);
+    items.forEach((option) => {
+      result = option.props.label.length > result ? option.props.label.length : result;
+    });
+    clearTimeout(timer);
+    doResolve(result);
+  });
+}
+function VirtualMenuList({
+  items,
+  itemHeight = 32,
+  amountItemsInWindow = 5,
+  width,
+  height
+}) {
   const computedListHeight = useHeightByAmountOfItems({
     amountItems: amountItemsInWindow,
     itemHeight,
     items
   });
-  return /*#__PURE__*/_jsx(FixedSizeList, {
+  return /* @__PURE__ */ React2.createElement(List, {
     height: height || computedListHeight,
     itemCount: items.length,
     itemData: items,
     itemSize: itemHeight,
-    width: width
-  }, void 0, MenuItem);
+    width
+  }, MenuItem);
 }
-
-export { VirtualMenuList as default };
+var VirtualMenuList_default = VirtualMenuList;
+export {
+  VirtualMenuList,
+  VirtualMenuList_default as default
+};
+//# sourceMappingURL=VirtualMenuList.js.map

package/esm/VirtualMenuList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/VirtualMenuList.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { FixedSizeList as List } from 'react-window';\nimport { useHeightByAmountOfItems } from './utils/useHeightByAmountOfItems';\n\nconst MenuItem = ({ data, index, style }) => (\n  <div key={index} style={style}>\n    {data && data[index] ? data[index] : ''}\n  </div>\n);\n\n// eslint-disable-next-line no-unused-vars\nfunction resolveComputation(items, cb, timeout = 1000) {\n  return () =>\n    new Promise(resolve => {\n      const doResolve = result => {\n        cb(result);\n        resolve(result);\n      };\n      let result = 0;\n      const timer = setTimeout(() => doResolve(result), timeout);\n      items.forEach(option => {\n        result =\n          option.props.label.length > result\n            ? option.props.label.length\n            : result;\n      });\n\n      clearTimeout(timer);\n      doResolve(result);\n    });\n}\n\nfunction VirtualMenuList({\n  items,\n  itemHeight = 32,\n  amountItemsInWindow = 5,\n  width,\n  height,\n}) {\n  const computedListHeight = useHeightByAmountOfItems({\n    amountItems: amountItemsInWindow,\n    itemHeight,\n    items,\n  });\n\n  return (\n    <List\n      height={height || computedListHeight}\n      itemCount={items.length}\n      itemData={items}\n      itemSize={itemHeight}\n      width={width}\n    >\n      {MenuItem}\n    </List>\n  );\n}\n\nexport { VirtualMenuList };\nexport default VirtualMenuList;"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,WAAW,CAAC,EAAE,MAAM,OAAO,YAC/B,qCAAC,OAAD;AAAA,EAAK,KAAK;AAAA,EAAO;AAAA,GACd,QAAQ,KAAK,SAAS,KAAK,SAAS;AAKzC,4BAA4B,OAAO,IAAI,UAAU,KAAM;AACrD,SAAO,MACL,IAAI,QAAQ,aAAW;AACrB,UAAM,YAAY,aAAU;AAC1B,SAAG;AACH,cAAQ;AAAA;AAEV,QAAI,SAAS;AACb,UAAM,QAAQ,WAAW,MAAM,UAAU,SAAS;AAClD,UAAM,QAAQ,YAAU;AACtB,eACE,OAAO,MAAM,MAAM,SAAS,SACxB,OAAO,MAAM,MAAM,SACnB;AAAA;AAGR,iBAAa;AACb,cAAU;AAAA;AAAA;AAIhB,yBAAyB;AAAA,EACvB;AAAA,EACA,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB;AAAA,EACA;AAAA,GACC;AACD,QAAM,qBAAqB,yBAAyB;AAAA,IAClD,aAAa;AAAA,IACb;AAAA,IACA;AAAA;AAGF,SACE,qCAAC,MAAD;AAAA,IACE,QAAQ,UAAU;AAAA,IAClB,WAAW,MAAM;AAAA,IACjB,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,KAEC;AAAA;AAMP,IAAO,0BAAQ;",
+  "names": []
+}

package/esm/index.js

@@ -1,13 +1,34 @@
-export { DSMenuWithSchema, Menu, Menu as default } from './Menu.js';
-export { DSMenuItemWithSchema } from './MenuItems/MenuItem.js';
-export { DSSubMenuWithSchema } from './MenuItems/SubMenu.js';
-export { DSMenuCheckboxGroupWithSchema } from './MenuItems/CheckboxGroup.js';
-export { DSMenuItemCheckeableWithSchema } from './MenuItems/MenuItemCheckable.js';
-export { DSMenuItemRadioWithSchema } from './MenuItems/MenuItemRadio.js';
-export { DSMenuRadioGroupWithSchema } from './MenuItems/RadioGroup.js';
-export { DSMenuSearchableGroupWithSchema } from './MenuItems/SearchableGroup.js';
-export { DSMenuSearchableListWithSchema } from './MenuItems/SearchableList.js';
-export { DSMenuSeparatorWithSchema } from './MenuItems/Separator.js';
-export { DSMenuSelectionGroupWithSchema } from './MenuItems/SelectionGroup.js';
-export { default as MenuCombobox } from './MenuCombobox.js';
-export { menuItemFactory, renderMenuItems } from './MenuItems/menuItemFactory.js';
+import * as React from "react";
+import { DSMenuItemWithSchema } from "./MenuItems/MenuItem";
+import { DSSubMenuWithSchema } from "./MenuItems/SubMenu";
+import { DSMenuCheckboxGroupWithSchema } from "./MenuItems/CheckboxGroup";
+import { DSMenuItemCheckeableWithSchema } from "./MenuItems/MenuItemCheckable";
+import { DSMenuItemRadioWithSchema } from "./MenuItems/MenuItemRadio";
+import { DSMenuRadioGroupWithSchema } from "./MenuItems/RadioGroup";
+import { DSMenuSearchableGroupWithSchema } from "./MenuItems/SearchableGroup";
+import { DSMenuSearchableListWithSchema } from "./MenuItems/SearchableList";
+import { DSMenuSeparatorWithSchema } from "./MenuItems/Separator";
+import { DSMenuSelectionGroupWithSchema } from "./MenuItems/SelectionGroup";
+import { default as default2 } from "./MenuCombobox";
+import { menuItemFactory } from "./MenuItems/menuItemFactory";
+import { renderMenuItems } from "./MenuItems/renderMenuItems";
+import { DSMenuWithSchema, Menu, Menu as Menu2 } from "./Menu";
+export {
+  DSMenuCheckboxGroupWithSchema,
+  DSMenuItemCheckeableWithSchema,
+  DSMenuItemRadioWithSchema,
+  DSMenuItemWithSchema,
+  DSMenuRadioGroupWithSchema,
+  DSMenuSearchableGroupWithSchema,
+  DSMenuSearchableListWithSchema,
+  DSMenuSelectionGroupWithSchema,
+  DSMenuSeparatorWithSchema,
+  DSMenuWithSchema,
+  DSSubMenuWithSchema,
+  Menu,
+  default2 as MenuCombobox,
+  Menu2 as default,
+  menuItemFactory,
+  renderMenuItems
+};
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSMenuItemWithSchema } from './MenuItems/MenuItem';\nexport { DSSubMenuWithSchema } from './MenuItems/SubMenu';\nexport { DSMenuCheckboxGroupWithSchema } from './MenuItems/CheckboxGroup';\nexport { DSMenuItemCheckeableWithSchema } from './MenuItems/MenuItemCheckable';\nexport { DSMenuItemRadioWithSchema } from './MenuItems/MenuItemRadio';\nexport { DSMenuRadioGroupWithSchema } from './MenuItems/RadioGroup';\nexport { DSMenuSearchableGroupWithSchema } from './MenuItems/SearchableGroup';\nexport { DSMenuSearchableListWithSchema } from './MenuItems/SearchableList';\nexport { DSMenuSeparatorWithSchema } from './MenuItems/Separator';\nexport { DSMenuSelectionGroupWithSchema } from './MenuItems/SelectionGroup';\n\nexport { default as MenuCombobox } from './MenuCombobox';\nexport { menuItemFactory } from './MenuItems/menuItemFactory';\nexport { renderMenuItems } from './MenuItems/renderMenuItems';\nexport { DSMenuWithSchema, Menu, Menu as default } from './Menu';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;",
+  "names": []
+}

package/esm/utils/useHeightByAmountOfItems.js

@@ -1,18 +1,20 @@
-import { useMemo } from 'react';
-
+import * as React from "react";
+import { useMemo } from "react";
 const calculateHeight = (itemHeight, amountItemsInWindow, itemsLength) => {
   const realAmountItemsInWindow = itemsLength < amountItemsInWindow ? itemsLength : amountItemsInWindow;
   return itemHeight * realAmountItemsInWindow;
 };
-
-function useHeightByAmountOfItems(_ref) {
-  let {
-    itemHeight,
-    amountItems,
-    items
-  } = _ref;
+function useHeightByAmountOfItems({
+  itemHeight,
+  amountItems,
+  items
+}) {
   const calculatedHeight = useMemo(() => calculateHeight(itemHeight, amountItems, items.length), [amountItems, items]);
   return calculatedHeight;
 }
-
-export { useHeightByAmountOfItems as default };
+var useHeightByAmountOfItems_default = useHeightByAmountOfItems;
+export {
+  useHeightByAmountOfItems_default as default,
+  useHeightByAmountOfItems
+};
+//# sourceMappingURL=useHeightByAmountOfItems.js.map