@elliemae/ds-menu 2.2.1 → 2.3.0-alpha.4

package/cjs/VirtualMenuList.js

@@ -1,48 +1,78 @@
-'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({
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var VirtualMenuList_exports = {};
+__export(VirtualMenuList_exports, {
+  VirtualMenuList: () => VirtualMenuList,
+  default: () => VirtualMenuList_default
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_window = require("react-window");
+var import_useHeightByAmountOfItems = require("./utils/useHeightByAmountOfItems");
+const MenuItem = ({ data, index, style }) => /* @__PURE__ */ import_react.default.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 = (0, import_useHeightByAmountOfItems.useHeightByAmountOfItems)({
     amountItems: amountItemsInWindow,
     itemHeight,
     items
   });
-  return /*#__PURE__*/_jsx__default["default"](reactWindow.FixedSizeList, {
+  return /* @__PURE__ */ import_react.default.createElement(import_react_window.FixedSizeList, {
     height: height || computedListHeight,
     itemCount: items.length,
     itemData: items,
     itemSize: itemHeight,
-    width: width
-  }, void 0, MenuItem);
+    width
+  }, MenuItem);
 }
-
-module.exports = VirtualMenuList;
+var VirtualMenuList_default = VirtualMenuList;
+module.exports = __toCommonJS(VirtualMenuList_exports);
+//# sourceMappingURL=VirtualMenuList.js.map

package/cjs/VirtualMenuList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/VirtualMenuList.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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;", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAsC;AACtC,sCAAyC;AAEzC,MAAM,WAAW,CAAC,EAAE,MAAM,OAAO,YAC/B,mDAAC,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,8DAAyB;AAAA,IAClD,aAAa;AAAA,IACb;AAAA,IACA;AAAA;AAGF,SACE,mDAAC,mCAAD;AAAA,IACE,QAAQ,UAAU;AAAA,IAClB,WAAW,MAAM;AAAA,IACjB,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,KAEC;AAAA;AAMP,IAAO,0BAAQ;",
+  "names": []
+}

package/cjs/index.js

@@ -1,36 +1,63 @@
-'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;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var src_exports = {};
+__export(src_exports, {
+  DSMenuCheckboxGroupWithSchema: () => import_CheckboxGroup.DSMenuCheckboxGroupWithSchema,
+  DSMenuItemCheckeableWithSchema: () => import_MenuItemCheckable.DSMenuItemCheckeableWithSchema,
+  DSMenuItemRadioWithSchema: () => import_MenuItemRadio.DSMenuItemRadioWithSchema,
+  DSMenuItemWithSchema: () => import_MenuItem.DSMenuItemWithSchema,
+  DSMenuRadioGroupWithSchema: () => import_RadioGroup.DSMenuRadioGroupWithSchema,
+  DSMenuSearchableGroupWithSchema: () => import_SearchableGroup.DSMenuSearchableGroupWithSchema,
+  DSMenuSearchableListWithSchema: () => import_SearchableList.DSMenuSearchableListWithSchema,
+  DSMenuSelectionGroupWithSchema: () => import_SelectionGroup.DSMenuSelectionGroupWithSchema,
+  DSMenuSeparatorWithSchema: () => import_Separator.DSMenuSeparatorWithSchema,
+  DSMenuWithSchema: () => import_Menu.DSMenuWithSchema,
+  DSSubMenuWithSchema: () => import_SubMenu.DSSubMenuWithSchema,
+  Menu: () => import_Menu.Menu,
+  MenuCombobox: () => import_MenuCombobox.default,
+  default: () => import_Menu.Menu,
+  menuItemFactory: () => import_menuItemFactory.menuItemFactory,
+  renderMenuItems: () => import_renderMenuItems.renderMenuItems
+});
+var React = __toESM(require("react"));
+var import_MenuItem = require("./MenuItems/MenuItem");
+var import_SubMenu = require("./MenuItems/SubMenu");
+var import_CheckboxGroup = require("./MenuItems/CheckboxGroup");
+var import_MenuItemCheckable = require("./MenuItems/MenuItemCheckable");
+var import_MenuItemRadio = require("./MenuItems/MenuItemRadio");
+var import_RadioGroup = require("./MenuItems/RadioGroup");
+var import_SearchableGroup = require("./MenuItems/SearchableGroup");
+var import_SearchableList = require("./MenuItems/SearchableList");
+var import_Separator = require("./MenuItems/Separator");
+var import_SelectionGroup = require("./MenuItems/SelectionGroup");
+var import_MenuCombobox = __toESM(require("./MenuCombobox"));
+var import_menuItemFactory = require("./MenuItems/menuItemFactory");
+var import_renderMenuItems = require("./MenuItems/renderMenuItems");
+var import_Menu = require("./Menu");
+module.exports = __toCommonJS(src_exports);
+//# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,sBAAqC;AACrC,qBAAoC;AACpC,2BAA8C;AAC9C,+BAA+C;AAC/C,2BAA0C;AAC1C,wBAA2C;AAC3C,6BAAgD;AAChD,4BAA+C;AAC/C,uBAA0C;AAC1C,4BAA+C;AAE/C,0BAAwC;AACxC,6BAAgC;AAChC,6BAAgC;AAChC,kBAAwD;",
+  "names": []
+}

package/cjs/utils/useHeightByAmountOfItems.js

@@ -1,20 +1,49 @@
-'use strict';
-
-var React = require('react');
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var useHeightByAmountOfItems_exports = {};
+__export(useHeightByAmountOfItems_exports, {
+  default: () => useHeightByAmountOfItems_default,
+  useHeightByAmountOfItems: () => useHeightByAmountOfItems
+});
+var React = __toESM(require("react"));
+var import_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]);
+function useHeightByAmountOfItems({
+  itemHeight,
+  amountItems,
+  items
+}) {
+  const calculatedHeight = (0, import_react.useMemo)(() => calculateHeight(itemHeight, amountItems, items.length), [amountItems, items]);
   return calculatedHeight;
 }
-
-module.exports = useHeightByAmountOfItems;
+var useHeightByAmountOfItems_default = useHeightByAmountOfItems;
+module.exports = __toCommonJS(useHeightByAmountOfItems_exports);
+//# sourceMappingURL=useHeightByAmountOfItems.js.map

package/cjs/utils/useHeightByAmountOfItems.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/utils/useHeightByAmountOfItems.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useMemo } from 'react';\n\nconst calculateHeight = (itemHeight, amountItemsInWindow, itemsLength) => {\n  const realAmountItemsInWindow =\n    itemsLength < amountItemsInWindow ? itemsLength : amountItemsInWindow;\n  return itemHeight * realAmountItemsInWindow;\n};\n\nfunction useHeightByAmountOfItems({\n  itemHeight,\n  amountItems,\n  items,\n}) {\n  const calculatedHeight = useMemo(\n    () => calculateHeight(itemHeight, amountItems, items.length),\n    [amountItems, items],\n  );\n\n  return calculatedHeight;\n}\n\nexport { useHeightByAmountOfItems };\nexport default useHeightByAmountOfItems;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAExB,MAAM,kBAAkB,CAAC,YAAY,qBAAqB,gBAAgB;AACxE,QAAM,0BACJ,cAAc,sBAAsB,cAAc;AACpD,SAAO,aAAa;AAAA;AAGtB,kCAAkC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,GACC;AACD,QAAM,mBAAmB,0BACvB,MAAM,gBAAgB,YAAY,aAAa,MAAM,SACrD,CAAC,aAAa;AAGhB,SAAO;AAAA;AAIT,IAAO,mCAAQ;",
+  "names": []
+}

package/esm/DSMenu.js

@@ -0,0 +1,98 @@
+import * as React from "react";
+import React2, { useContext, useEffect, useMemo, useRef } 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 { MenuContext } from "./MenuContext";
+const RESPONSIVE_HEIHGT_MARGIN = 120;
+const blockName = "menu";
+const noop = () => {
+};
+const MenuComponent = aggregatedClasses("div")(blockName, "", ({ menuComboBox, type }) => ({
+  "menu-combo-box": menuComboBox,
+  [`type-${type}`]: type
+}));
+const isChildOfType = (child, type) => child.type.name === type;
+const DSMenu = ({
+  containerProps = {},
+  innerRef,
+  as: MenuTag = animated.ul,
+  children = void 0,
+  onClickOutside = noop,
+  visible = void 0,
+  focusOnOpen = false,
+  maxOption = 0,
+  style = {},
+  minWidth = void 0,
+  maxWidth = void 0,
+  closeMenu,
+  responsiveHeight = false,
+  ...otherProps
+}) => {
+  const menuRef = useRef(null);
+  const { focusFirst } = useContext(FocusGroupContext);
+  const { destroyed, ...hiddenProps } = useHiddenTransition({ visible, style });
+  const nextChildren = useMemo(() => {
+    const forceLeftAddon = React2.Children.toArray(children).some((child) => isChildOfType(child, "SelectionGroup") || isChildOfType(child, "MenuItemCheckbox") || isChildOfType(child, "MenuItemRadio") || child.props.leftAddon);
+    return React2.Children.map(children, (child) => child && React2.cloneElement(child, {
+      ...child.props,
+      noAddon: !forceLeftAddon ? true : void 0,
+      maxOption,
+      closeMenu
+    }));
+  }, [children]);
+  useOnClickOutside(menuRef, onClickOutside);
+  useEffect(() => {
+    if (focusOnOpen && visible) {
+      setTimeout(() => {
+        focusFirst();
+      }, 0);
+    }
+  }, [visible, focusOnOpen]);
+  return !hiddenProps.destroyed ? /* @__PURE__ */ React2.createElement(MenuContext.Provider, {
+    value: { visible, closeMenu }
+  }, /* @__PURE__ */ React2.createElement(MenuComponent, {
+    "data-testid": containerProps?.["data-testid"] ? containerProps["data-testid"] : "em-ds-menu",
+    ...containerProps,
+    as: MenuTag,
+    classProps: { ...otherProps.classProps || {}, type: otherProps.type },
+    innerRef: mergeRefs(innerRef, menuRef),
+    role: "menu",
+    ...omit(otherProps, ["scheduleUpdate"]),
+    ...hiddenProps
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "menu-component-internal-wrapper",
+    style: {
+      ...style,
+      minWidth,
+      maxWidth,
+      ...responsiveHeight ? {
+        overflowY: "scroll",
+        maxHeight: responsiveHeight ? `${window.innerHeight - RESPONSIVE_HEIHGT_MARGIN}px` : void 0
+      } : {}
+    }
+  }, nextChildren))) : null;
+};
+const Menu = focusGroupManagerHoc(DSMenu, { loop: true });
+const props = {
+  containerProps: PropTypes.object.description("Injected props to wrapper element of component"),
+  as: PropTypes.element.description("Renders the menu with a specific html element"),
+  onClickOutside: PropTypes.func.description("Handler when a user clicks outside the menu"),
+  visible: PropTypes.bool.description("Whether the menu is visible or not"),
+  focusOnOpen: PropTypes.bool.description("When set to true, it's going to focus the first item"),
+  minWidth: PropTypes.number.description("Customize menu minWidth. Can be undefined or 'number'"),
+  maxWidth: PropTypes.number.description("Customize menu maxWidth. Can be undefined or 'number'")
+};
+DSMenu.propTypes = props;
+const DSMenuWithSchema = describe(DSMenu);
+DSMenuWithSchema.propTypes = props;
+export {
+  DSMenuWithSchema,
+  Menu
+};
+//# sourceMappingURL=DSMenu.js.map

package/esm/DSMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSMenu.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useContext, useEffect, useMemo, useRef } from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { omit } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { animated } from 'react-spring/web';\nimport { useOnClickOutside } from '@elliemae/ds-utilities/hooks';\nimport { mergeRefs } from '@elliemae/ds-utilities/system';\nimport { focusGroupManagerHoc, FocusGroupContext } from '@elliemae/ds-shared/FocusGroup';\nimport { useHiddenTransition } from '@elliemae/ds-hidden';\nimport { MenuContext } from './MenuContext';\n\nconst RESPONSIVE_HEIHGT_MARGIN = 120;\n\nconst blockName = 'menu';\n\nconst noop = () => {};\n\nconst MenuComponent = aggregatedClasses('div')(blockName, '', ({ menuComboBox, type }) => ({\n  'menu-combo-box': menuComboBox,\n  [`type-${type}`]: type,\n}));\n\n/**\n * todo: -- IDEA -- each menu could have an overlay based on an overlay stack context so we can\n * capture the context of the clicks on very nested components\n */\n\nconst isChildOfType = (child, type) => child.type.name === type;\n\nconst DSMenu = ({\n  containerProps = {},\n  innerRef,\n  as: MenuTag = animated.ul,\n  children = undefined,\n  onClickOutside = noop,\n  // handlers from hidden\n  visible = undefined,\n  focusOnOpen = false,\n  maxOption = 0,\n  style = {},\n  minWidth = undefined,\n  maxWidth = undefined,\n  closeMenu,\n  responsiveHeight = false,\n  ...otherProps\n}) => {\n  const menuRef = useRef(null);\n  const { focusFirst } = useContext(FocusGroupContext);\n  const { destroyed, ...hiddenProps } = useHiddenTransition({ visible, style });\n\n  // force no addon to the children if the menu doesn't have any item with leftAddon like SelectionGroup\n  const nextChildren = useMemo(() => {\n    const forceLeftAddon = React.Children.toArray(children).some(\n      (child) =>\n        isChildOfType(child, 'SelectionGroup') ||\n        isChildOfType(child, 'MenuItemCheckbox') ||\n        isChildOfType(child, 'MenuItemRadio') ||\n        child.props.leftAddon,\n    );\n\n    return React.Children.map(\n      children,\n      (child) =>\n        child &&\n        React.cloneElement(child, {\n          ...child.props,\n          noAddon: !forceLeftAddon ? true : undefined,\n          maxOption,\n          closeMenu,\n        }),\n    );\n  }, [children]);\n\n  useOnClickOutside(menuRef, onClickOutside);\n\n  useEffect(() => {\n    if (focusOnOpen && visible) {\n      setTimeout(() => {\n        focusFirst();\n      }, 0);\n    }\n  }, [visible, focusOnOpen]);\n  // todo: find out a better approach to this\n  return !hiddenProps.destroyed ? (\n    <MenuContext.Provider value={{ visible, closeMenu }}>\n      <MenuComponent\n        data-testid={containerProps?.['data-testid'] ? containerProps['data-testid'] : 'em-ds-menu'}\n        {...containerProps}\n        as={MenuTag}\n        classProps={{ ...(otherProps.classProps || {}), type: otherProps.type }}\n        innerRef={mergeRefs(innerRef, menuRef)}\n        role=\"menu\"\n        {...omit(otherProps, ['scheduleUpdate'])}\n        {...hiddenProps}\n      >\n        {/* eslint-disable indent */}\n        <div\n          className=\"menu-component-internal-wrapper\"\n          style={{\n            ...style,\n            minWidth,\n            maxWidth,\n            ...(responsiveHeight\n              ? {\n                  overflowY: 'scroll',\n                  maxHeight: responsiveHeight ? `${window.innerHeight - RESPONSIVE_HEIHGT_MARGIN}px` : undefined,\n                }\n              : {}),\n          }}\n        >\n          {/* eslint-enable indent */}\n          {nextChildren}\n        </div>\n      </MenuComponent>\n    </MenuContext.Provider>\n  ) : null;\n};\n\nconst Menu = focusGroupManagerHoc(DSMenu, { loop: true });\n\nconst props = {\n  /** Injected props to wrapper element of component */\n  containerProps: PropTypes.object.description('Injected props to wrapper element of component'),\n  /** Renders the menu with a specific html element */\n  as: PropTypes.element.description('Renders the menu with a specific html element'),\n  /** Handler when a user clicks outside the menu */\n  onClickOutside: PropTypes.func.description('Handler when a user clicks outside the menu'),\n  /** Whether the menu is visible or not */\n  visible: PropTypes.bool.description('Whether the menu is visible or not'),\n  /** When set to true, it's going to focus the first item */\n  focusOnOpen: PropTypes.bool.description(\"When set to true, it's going to focus the first item\"),\n  /** Customize menu minWidth. Can be undefined or 'number' */\n  minWidth: PropTypes.number.description(\"Customize menu minWidth. Can be undefined or 'number'\"),\n  /** Customize menu maxWidth. Can be undefined or 'number' */\n  maxWidth: PropTypes.number.description(\"Customize menu maxWidth. Can be undefined or 'number'\"),\n};\n\nDSMenu.propTypes = props;\n\nconst DSMenuWithSchema = describe(DSMenu);\n\nDSMenuWithSchema.propTypes = props;\n\nexport { DSMenuWithSchema, Menu };\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,2BAA2B;AAEjC,MAAM,YAAY;AAElB,MAAM,OAAO,MAAM;AAAA;AAEnB,MAAM,gBAAgB,kBAAkB,OAAO,WAAW,IAAI,CAAC,EAAE,cAAc,WAAY;AAAA,EACzF,kBAAkB;AAAA,GACjB,QAAQ,SAAS;AAAA;AAQpB,MAAM,gBAAgB,CAAC,OAAO,SAAS,MAAM,KAAK,SAAS;AAE3D,MAAM,SAAS,CAAC;AAAA,EACd,iBAAiB;AAAA,EACjB;AAAA,EACA,IAAI,UAAU,SAAS;AAAA,EACvB,WAAW;AAAA,EACX,iBAAiB;AAAA,EAEjB,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,KAChB;AAAA,MACC;AACJ,QAAM,UAAU,OAAO;AACvB,QAAM,EAAE,eAAe,WAAW;AAClC,QAAM,EAAE,cAAc,gBAAgB,oBAAoB,EAAE,SAAS;AAGrE,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,iBAAiB,OAAM,SAAS,QAAQ,UAAU,KACtD,CAAC,UACC,cAAc,OAAO,qBACrB,cAAc,OAAO,uBACrB,cAAc,OAAO,oBACrB,MAAM,MAAM;AAGhB,WAAO,OAAM,SAAS,IACpB,UACA,CAAC,UACC,SACA,OAAM,aAAa,OAAO;AAAA,SACrB,MAAM;AAAA,MACT,SAAS,CAAC,iBAAiB,OAAO;AAAA,MAClC;AAAA,MACA;AAAA;AAAA,KAGL,CAAC;AAEJ,oBAAkB,SAAS;AAE3B,YAAU,MAAM;AACd,QAAI,eAAe,SAAS;AAC1B,iBAAW,MAAM;AACf;AAAA,SACC;AAAA;AAAA,KAEJ,CAAC,SAAS;AAEb,SAAO,CAAC,YAAY,YAClB,qCAAC,YAAY,UAAb;AAAA,IAAsB,OAAO,EAAE,SAAS;AAAA,KACtC,qCAAC,eAAD;AAAA,IACE,eAAa,iBAAiB,iBAAiB,eAAe,iBAAiB;AAAA,OAC3E;AAAA,IACJ,IAAI;AAAA,IACJ,YAAY,KAAM,WAAW,cAAc,IAAK,MAAM,WAAW;AAAA,IACjE,UAAU,UAAU,UAAU;AAAA,IAC9B,MAAK;AAAA,OACD,KAAK,YAAY,CAAC;AAAA,OAClB;AAAA,KAGJ,qCAAC,OAAD;AAAA,IACE,WAAU;AAAA,IACV,OAAO;AAAA,SACF;AAAA,MACH;AAAA,MACA;AAAA,SACI,mBACA;AAAA,QACE,WAAW;AAAA,QACX,WAAW,mBAAmB,GAAG,OAAO,cAAc,+BAA+B;AAAA,UAEvF;AAAA;AAAA,KAIL,kBAIL;AAAA;AAGN,MAAM,OAAO,qBAAqB,QAAQ,EAAE,MAAM;AAElD,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAE7C,IAAI,UAAU,QAAQ,YAAY;AAAA,EAElC,gBAAgB,UAAU,KAAK,YAAY;AAAA,EAE3C,SAAS,UAAU,KAAK,YAAY;AAAA,EAEpC,aAAa,UAAU,KAAK,YAAY;AAAA,EAExC,UAAU,UAAU,OAAO,YAAY;AAAA,EAEvC,UAAU,UAAU,OAAO,YAAY;AAAA;AAGzC,OAAO,YAAY;AAEnB,MAAM,mBAAmB,SAAS;AAElC,iBAAiB,YAAY;",
+  "names": []
+}

package/esm/Menu.js

@@ -1,172 +1,16 @@
-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
-
+import * as React from "react";
+import { MenuItemRadio } from "./MenuItems/MenuItemRadio";
+import { MenuItemCheckbox } from "./MenuItems/MenuItemCheckbox";
+import { CheckboxGroup } from "./MenuItems/CheckboxGroup";
+import { RadioGroup } from "./MenuItems/RadioGroup";
+import { MenuSeparator } from "./MenuItems/Separator";
+import { MenuItem } from "./MenuItems/MenuItem";
+import { SubMenu } from "./MenuItems/SubMenu";
+import { SearchableGroup } from "./MenuItems/SearchableGroup";
+import { SelectionGroup } from "./MenuItems/SelectionGroup";
+import { menuItemFactory } from "./MenuItems/menuItemFactory";
+import { renderMenuItems } from "./MenuItems/renderMenuItems";
+import { DSMenuWithSchema, Menu } from "./DSMenu";
 Menu.Item = MenuItem;
 Menu.ItemCheckbox = MenuItemCheckbox;
 Menu.ItemRadio = MenuItemRadio;
@@ -176,5 +20,12 @@ Menu.CheckboxGroup = CheckboxGroup;
 Menu.RadioGroup = RadioGroup;
 Menu.SearchableGroup = SearchableGroup;
 Menu.SelectionGroup = SelectionGroup;
-
-export { DSMenuWithSchema, Menu, Menu as default };
+var Menu_default = Menu;
+export {
+  DSMenuWithSchema,
+  Menu,
+  Menu_default as default,
+  menuItemFactory,
+  renderMenuItems
+};
+//# sourceMappingURL=Menu.js.map