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

package/cjs/DSMenu.js

@@ -0,0 +1,127 @@
+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 DSMenu_exports = {};
+__export(DSMenu_exports, {
+  DSMenuWithSchema: () => DSMenuWithSchema,
+  Menu: () => Menu
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+var import_lodash = require("lodash");
+var import_ds_classnames = require("@elliemae/ds-classnames");
+var import_web = require("react-spring/web");
+var import_hooks = require("@elliemae/ds-utilities/hooks");
+var import_system = require("@elliemae/ds-utilities/system");
+var import_FocusGroup = require("@elliemae/ds-shared/FocusGroup");
+var import_ds_hidden = require("@elliemae/ds-hidden");
+var import_MenuContext = require("./MenuContext");
+const RESPONSIVE_HEIHGT_MARGIN = 120;
+const blockName = "menu";
+const noop = () => {
+};
+const MenuComponent = (0, import_ds_classnames.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 = import_web.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 = (0, import_react.useRef)(null);
+  const { focusFirst } = (0, import_react.useContext)(import_FocusGroup.FocusGroupContext);
+  const { destroyed, ...hiddenProps } = (0, import_ds_hidden.useHiddenTransition)({ visible, style });
+  const nextChildren = (0, import_react.useMemo)(() => {
+    const forceLeftAddon = import_react.default.Children.toArray(children).some((child) => isChildOfType(child, "SelectionGroup") || isChildOfType(child, "MenuItemCheckbox") || isChildOfType(child, "MenuItemRadio") || child.props.leftAddon);
+    return import_react.default.Children.map(children, (child) => child && import_react.default.cloneElement(child, {
+      ...child.props,
+      noAddon: !forceLeftAddon ? true : void 0,
+      maxOption,
+      closeMenu
+    }));
+  }, [children]);
+  (0, import_hooks.useOnClickOutside)(menuRef, onClickOutside);
+  (0, import_react.useEffect)(() => {
+    if (focusOnOpen && visible) {
+      setTimeout(() => {
+        focusFirst();
+      }, 0);
+    }
+  }, [visible, focusOnOpen]);
+  return !hiddenProps.destroyed ? /* @__PURE__ */ import_react.default.createElement(import_MenuContext.MenuContext.Provider, {
+    value: { visible, closeMenu }
+  }, /* @__PURE__ */ import_react.default.createElement(MenuComponent, {
+    "data-testid": containerProps?.["data-testid"] ? containerProps["data-testid"] : "em-ds-menu",
+    ...containerProps,
+    as: MenuTag,
+    classProps: { ...otherProps.classProps || {}, type: otherProps.type },
+    innerRef: (0, import_system.mergeRefs)(innerRef, menuRef),
+    role: "menu",
+    ...(0, import_lodash.omit)(otherProps, ["scheduleUpdate"]),
+    ...hiddenProps
+  }, /* @__PURE__ */ import_react.default.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 = (0, import_FocusGroup.focusGroupManagerHoc)(DSMenu, { loop: true });
+const props = {
+  containerProps: import_react_desc.PropTypes.object.description("Injected props to wrapper element of component"),
+  as: import_react_desc.PropTypes.element.description("Renders the menu with a specific html element"),
+  onClickOutside: import_react_desc.PropTypes.func.description("Handler when a user clicks outside the menu"),
+  visible: import_react_desc.PropTypes.bool.description("Whether the menu is visible or not"),
+  focusOnOpen: import_react_desc.PropTypes.bool.description("When set to true, it's going to focus the first item"),
+  minWidth: import_react_desc.PropTypes.number.description("Customize menu minWidth. Can be undefined or 'number'"),
+  maxWidth: import_react_desc.PropTypes.number.description("Customize menu maxWidth. Can be undefined or 'number'")
+};
+DSMenu.propTypes = props;
+const DSMenuWithSchema = (0, import_react_desc.describe)(DSMenu);
+DSMenuWithSchema.propTypes = props;
+module.exports = __toCommonJS(DSMenu_exports);
+//# sourceMappingURL=DSMenu.js.map

package/cjs/DSMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSMenu.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA8D;AAC9D,wBAAoC;AACpC,oBAAqB;AACrB,2BAAkC;AAClC,iBAAyB;AACzB,mBAAkC;AAClC,oBAA0B;AAC1B,wBAAwD;AACxD,uBAAoC;AACpC,yBAA4B;AAE5B,MAAM,2BAA2B;AAEjC,MAAM,YAAY;AAElB,MAAM,OAAO,MAAM;AAAA;AAEnB,MAAM,gBAAgB,4CAAkB,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,oBAAS;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,yBAAO;AACvB,QAAM,EAAE,eAAe,6BAAW;AAClC,QAAM,EAAE,cAAc,gBAAgB,0CAAoB,EAAE,SAAS;AAGrE,QAAM,eAAe,0BAAQ,MAAM;AACjC,UAAM,iBAAiB,qBAAM,SAAS,QAAQ,UAAU,KACtD,CAAC,UACC,cAAc,OAAO,qBACrB,cAAc,OAAO,uBACrB,cAAc,OAAO,oBACrB,MAAM,MAAM;AAGhB,WAAO,qBAAM,SAAS,IACpB,UACA,CAAC,UACC,SACA,qBAAM,aAAa,OAAO;AAAA,SACrB,MAAM;AAAA,MACT,SAAS,CAAC,iBAAiB,OAAO;AAAA,MAClC;AAAA,MACA;AAAA;AAAA,KAGL,CAAC;AAEJ,sCAAkB,SAAS;AAE3B,8BAAU,MAAM;AACd,QAAI,eAAe,SAAS;AAC1B,iBAAW,MAAM;AACf;AAAA,SACC;AAAA;AAAA,KAEJ,CAAC,SAAS;AAEb,SAAO,CAAC,YAAY,YAClB,mDAAC,+BAAY,UAAb;AAAA,IAAsB,OAAO,EAAE,SAAS;AAAA,KACtC,mDAAC,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,6BAAU,UAAU;AAAA,IAC9B,MAAK;AAAA,OACD,wBAAK,YAAY,CAAC;AAAA,OAClB;AAAA,KAGJ,mDAAC,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,4CAAqB,QAAQ,EAAE,MAAM;AAElD,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAE7C,IAAI,4BAAU,QAAQ,YAAY;AAAA,EAElC,gBAAgB,4BAAU,KAAK,YAAY;AAAA,EAE3C,SAAS,4BAAU,KAAK,YAAY;AAAA,EAEpC,aAAa,4BAAU,KAAK,YAAY;AAAA,EAExC,UAAU,4BAAU,OAAO,YAAY;AAAA,EAEvC,UAAU,4BAAU,OAAO,YAAY;AAAA;AAGzC,OAAO,YAAY;AAEnB,MAAM,mBAAmB,gCAAS;AAElC,iBAAiB,YAAY;",
+  "names": []
+}

package/cjs/Menu.js

@@ -27,22 +27,13 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 var Menu_exports = {};
 __export(Menu_exports, {
-  DSMenuWithSchema: () => DSMenuWithSchema,
-  Menu: () => Menu,
+  DSMenuWithSchema: () => import_DSMenu.DSMenuWithSchema,
+  Menu: () => import_DSMenu.Menu,
   default: () => Menu_default,
   menuItemFactory: () => import_menuItemFactory.menuItemFactory,
   renderMenuItems: () => import_renderMenuItems.renderMenuItems
 });
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_desc = require("react-desc");
-var import_lodash = require("lodash");
-var import_ds_classnames = require("@elliemae/ds-classnames");
-var import_web = require("react-spring/web");
-var import_hooks = require("@elliemae/ds-utilities/hooks");
-var import_system = require("@elliemae/ds-utilities/system");
-var import_FocusGroup = require("@elliemae/ds-shared/FocusGroup");
-var import_ds_hidden = require("@elliemae/ds-hidden");
 var import_MenuItemRadio = require("./MenuItems/MenuItemRadio");
 var import_MenuItemCheckbox = require("./MenuItems/MenuItemCheckbox");
 var import_CheckboxGroup = require("./MenuItems/CheckboxGroup");
@@ -54,98 +45,16 @@ var import_SearchableGroup = require("./MenuItems/SearchableGroup");
 var import_SelectionGroup = require("./MenuItems/SelectionGroup");
 var import_menuItemFactory = require("./MenuItems/menuItemFactory");
 var import_renderMenuItems = require("./MenuItems/renderMenuItems");
-var import_MenuContext = require("./MenuContext");
-const RESPONSIVE_HEIHGT_MARGIN = 120;
-const blockName = "menu";
-const noop = () => {
-};
-const MenuComponent = (0, import_ds_classnames.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 = import_web.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 = (0, import_react.useRef)(null);
-  const { focusFirst } = (0, import_react.useContext)(import_FocusGroup.FocusGroupContext);
-  const { destroyed, ...hiddenProps } = (0, import_ds_hidden.useHiddenTransition)({ visible, style });
-  const nextChildren = (0, import_react.useMemo)(() => {
-    const forceLeftAddon = import_react.default.Children.toArray(children).some((child) => isChildOfType(child, "SelectionGroup") || isChildOfType(child, "MenuItemCheckbox") || isChildOfType(child, "MenuItemRadio") || child.props.leftAddon);
-    return import_react.default.Children.map(children, (child) => child && import_react.default.cloneElement(child, {
-      ...child.props,
-      noAddon: !forceLeftAddon ? true : void 0,
-      maxOption,
-      closeMenu
-    }));
-  }, [children]);
-  (0, import_hooks.useOnClickOutside)(menuRef, onClickOutside);
-  (0, import_react.useEffect)(() => {
-    if (focusOnOpen && visible) {
-      setTimeout(() => {
-        focusFirst();
-      }, 0);
-    }
-  }, [visible, focusOnOpen]);
-  return !hiddenProps.destroyed ? /* @__PURE__ */ import_react.default.createElement(import_MenuContext.MenuContext.Provider, {
-    value: { visible, closeMenu }
-  }, /* @__PURE__ */ import_react.default.createElement(MenuComponent, {
-    "data-testid": containerProps?.["data-testid"] ? containerProps["data-testid"] : "em-ds-menu",
-    ...containerProps,
-    as: MenuTag,
-    classProps: { ...otherProps.classProps || {}, type: otherProps.type },
-    innerRef: (0, import_system.mergeRefs)(innerRef, menuRef),
-    role: "menu",
-    ...(0, import_lodash.omit)(otherProps, ["scheduleUpdate"]),
-    ...hiddenProps
-  }, /* @__PURE__ */ import_react.default.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 = (0, import_FocusGroup.focusGroupManagerHoc)(DSMenu, { loop: true });
-const props = {
-  containerProps: import_react_desc.PropTypes.object.description("Injected props to wrapper element of component"),
-  as: import_react_desc.PropTypes.element.description("Renders the menu with a specific html element"),
-  onClickOutside: import_react_desc.PropTypes.func.description("Handler when a user clicks outside the menu"),
-  visible: import_react_desc.PropTypes.bool.description("Whether the menu is visible or not"),
-  focusOnOpen: import_react_desc.PropTypes.bool.description("When set to true, it's going to focus the first item"),
-  minWidth: import_react_desc.PropTypes.number.description("Customize menu minWidth. Can be undefined or 'number'"),
-  maxWidth: import_react_desc.PropTypes.number.description("Customize menu maxWidth. Can be undefined or 'number'")
-};
-DSMenu.propTypes = props;
-const DSMenuWithSchema = (0, import_react_desc.describe)(DSMenu);
-DSMenuWithSchema.propTypes = props;
-Menu.Item = import_MenuItem.MenuItem;
-Menu.ItemCheckbox = import_MenuItemCheckbox.MenuItemCheckbox;
-Menu.ItemRadio = import_MenuItemRadio.MenuItemRadio;
-Menu.SubMenu = import_SubMenu.SubMenu;
-Menu.Separator = import_Separator.MenuSeparator;
-Menu.CheckboxGroup = import_CheckboxGroup.CheckboxGroup;
-Menu.RadioGroup = import_RadioGroup.RadioGroup;
-Menu.SearchableGroup = import_SearchableGroup.SearchableGroup;
-Menu.SelectionGroup = import_SelectionGroup.SelectionGroup;
-var Menu_default = Menu;
+var import_DSMenu = require("./DSMenu");
+import_DSMenu.Menu.Item = import_MenuItem.MenuItem;
+import_DSMenu.Menu.ItemCheckbox = import_MenuItemCheckbox.MenuItemCheckbox;
+import_DSMenu.Menu.ItemRadio = import_MenuItemRadio.MenuItemRadio;
+import_DSMenu.Menu.SubMenu = import_SubMenu.SubMenu;
+import_DSMenu.Menu.Separator = import_Separator.MenuSeparator;
+import_DSMenu.Menu.CheckboxGroup = import_CheckboxGroup.CheckboxGroup;
+import_DSMenu.Menu.RadioGroup = import_RadioGroup.RadioGroup;
+import_DSMenu.Menu.SearchableGroup = import_SearchableGroup.SearchableGroup;
+import_DSMenu.Menu.SelectionGroup = import_SelectionGroup.SelectionGroup;
+var Menu_default = import_DSMenu.Menu;
 module.exports = __toCommonJS(Menu_exports);
 //# sourceMappingURL=Menu.js.map

package/cjs/Menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Menu.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\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 { MenuItemRadio } from './MenuItems/MenuItemRadio';\nimport { MenuItemCheckbox } from './MenuItems/MenuItemCheckbox';\nimport { CheckboxGroup } from './MenuItems/CheckboxGroup';\nimport { RadioGroup } from './MenuItems/RadioGroup';\nimport { MenuSeparator } from './MenuItems/Separator';\nimport { MenuItem } from './MenuItems/MenuItem';\nimport { SubMenu } from './MenuItems/SubMenu';\nimport { SearchableGroup } from './MenuItems/SearchableGroup';\nimport { SelectionGroup } from './MenuItems/SelectionGroup';\nimport { menuItemFactory } from './MenuItems/menuItemFactory';\nimport { renderMenuItems } from './MenuItems/renderMenuItems';\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// todo: add a handler to get this kind of exports for documentation\nMenu.Item = MenuItem;\nMenu.ItemCheckbox = MenuItemCheckbox;\nMenu.ItemRadio = MenuItemRadio;\nMenu.SubMenu = SubMenu;\nMenu.Separator = MenuSeparator;\nMenu.CheckboxGroup = CheckboxGroup;\nMenu.RadioGroup = RadioGroup;\nMenu.SearchableGroup = SearchableGroup;\nMenu.SelectionGroup = SelectionGroup;\n\nexport { menuItemFactory, renderMenuItems, DSMenuWithSchema, Menu };\nexport default Menu;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport { MenuItemRadio } from './MenuItems/MenuItemRadio';\nimport { MenuItemCheckbox } from './MenuItems/MenuItemCheckbox';\nimport { CheckboxGroup } from './MenuItems/CheckboxGroup';\nimport { RadioGroup } from './MenuItems/RadioGroup';\nimport { MenuSeparator } from './MenuItems/Separator';\nimport { MenuItem } from './MenuItems/MenuItem';\nimport { SubMenu } from './MenuItems/SubMenu';\nimport { SearchableGroup } from './MenuItems/SearchableGroup';\nimport { SelectionGroup } from './MenuItems/SelectionGroup';\nimport { menuItemFactory } from './MenuItems/menuItemFactory';\nimport { renderMenuItems } from './MenuItems/renderMenuItems';\nimport { DSMenuWithSchema, Menu } from './DSMenu';\n\n\nMenu.Item = MenuItem;\nMenu.ItemCheckbox = MenuItemCheckbox;\nMenu.ItemRadio = MenuItemRadio;\nMenu.SubMenu = SubMenu;\nMenu.Separator = MenuSeparator;\nMenu.CheckboxGroup = CheckboxGroup;\nMenu.RadioGroup = RadioGroup;\nMenu.SearchableGroup = SearchableGroup;\nMenu.SelectionGroup = SelectionGroup;\n\nexport { menuItemFactory, renderMenuItems, DSMenuWithSchema, Menu };\nexport default Menu;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,2BAA8B;AAC9B,8BAAiC;AACjC,2BAA8B;AAC9B,wBAA2B;AAC3B,uBAA8B;AAC9B,sBAAyB;AACzB,qBAAwB;AACxB,6BAAgC;AAChC,4BAA+B;AAC/B,6BAAgC;AAChC,6BAAgC;AAChC,oBAAuC;AAGvC,mBAAK,OAAO;AACZ,mBAAK,eAAe;AACpB,mBAAK,YAAY;AACjB,mBAAK,UAAU;AACf,mBAAK,YAAY;AACjB,mBAAK,gBAAgB;AACrB,mBAAK,aAAa;AAClB,mBAAK,kBAAkB;AACvB,mBAAK,iBAAiB;AAGtB,IAAO,eAAQ;",
   "names": []
 }

package/cjs/MenuCombobox.js

@@ -33,7 +33,7 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_prop_types = __toESM(require("prop-types"));
 var import_SearchableList = require("./MenuItems/SearchableList");
-var import_Menu = require("./Menu");
+var import_DSMenu = require("./DSMenu");
 function MenuCombobox({
   dropdownFilterOptions = {},
   options = [],
@@ -43,7 +43,7 @@ function MenuCombobox({
   loading = false,
   ...rest
 }) {
-  return /* @__PURE__ */ import_react.default.createElement(import_Menu.Menu, {
+  return /* @__PURE__ */ import_react.default.createElement(import_DSMenu.Menu, {
     ...rest,
     classProps: { menuComboBox: true },
     innerRef,

package/cjs/MenuCombobox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/MenuCombobox.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SearchableList } from './MenuItems/SearchableList';\nimport { Menu } from './Menu';\n\nfunction MenuCombobox({\n  dropdownFilterOptions = {},\n  options = [],\n  onSelectMenuItem = () => null,\n  innerRef,\n  maxOptions = 10,\n  loading = false,\n  ...rest\n}) {\n  return (\n    <Menu\n      {...rest}\n      classProps={{ menuComboBox: true }}\n      innerRef={innerRef}\n      visible\n    >\n      <SearchableList\n        appendTermInList\n        extraListProps={dropdownFilterOptions}\n        items={options}\n        onSelectMenuItem={onSelectMenuItem}\n        maxOptions={maxOptions}\n        loading={loading}\n      />\n    </Menu>\n  );\n}\n\nMenuCombobox.propTypes = {\n  /** Options */\n  dropdownFilterOptions: PropTypes.shape({}),\n  /** The option or menu items to render */\n  options: PropTypes.arrayOf(PropTypes.object),\n  /** Handler when a menu item is selected */\n  onSelectMenuItem: PropTypes.func,\n  /** Internal ref */\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n  /** Max options to display in the list */\n  maxOptions: PropTypes.number,\n  /** Is loading */\n  loading: PropTypes.bool,\n};\n\nexport default MenuCombobox;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,4BAA+B;AAC/B,kBAAqB;AAErB,sBAAsB;AAAA,EACpB,wBAAwB;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB,MAAM;AAAA,EACzB;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,KACP;AAAA,GACF;AACD,SACE,mDAAC,kBAAD;AAAA,OACM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,IAC5B;AAAA,IACA,SAAO;AAAA,KAEP,mDAAC,sCAAD;AAAA,IACE,kBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAMR,aAAa,YAAY;AAAA,EAEvB,uBAAuB,0BAAU,MAAM;AAAA,EAEvC,SAAS,0BAAU,QAAQ,0BAAU;AAAA,EAErC,kBAAkB,0BAAU;AAAA,EAE5B,UAAU,0BAAU,UAAU,CAAC,0BAAU,MAAM,0BAAU;AAAA,EAEzD,YAAY,0BAAU;AAAA,EAEtB,SAAS,0BAAU;AAAA;AAGrB,IAAO,uBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SearchableList } from './MenuItems/SearchableList';\nimport { Menu } from './DSMenu';\n\nfunction MenuCombobox({\n  dropdownFilterOptions = {},\n  options = [],\n  onSelectMenuItem = () => null,\n  innerRef,\n  maxOptions = 10,\n  loading = false,\n  ...rest\n}) {\n  return (\n    <Menu\n      {...rest}\n      classProps={{ menuComboBox: true }}\n      innerRef={innerRef}\n      visible\n    >\n      <SearchableList\n        appendTermInList\n        extraListProps={dropdownFilterOptions}\n        items={options}\n        onSelectMenuItem={onSelectMenuItem}\n        maxOptions={maxOptions}\n        loading={loading}\n      />\n    </Menu>\n  );\n}\n\nMenuCombobox.propTypes = {\n  /** Options */\n  dropdownFilterOptions: PropTypes.shape({}),\n  /** The option or menu items to render */\n  options: PropTypes.arrayOf(PropTypes.object),\n  /** Handler when a menu item is selected */\n  onSelectMenuItem: PropTypes.func,\n  /** Internal ref */\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n  /** Max options to display in the list */\n  maxOptions: PropTypes.number,\n  /** Is loading */\n  loading: PropTypes.bool,\n};\n\nexport default MenuCombobox;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,wBAAsB;AACtB,4BAA+B;AAC/B,oBAAqB;AAErB,sBAAsB;AAAA,EACpB,wBAAwB;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB,MAAM;AAAA,EACzB;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,KACP;AAAA,GACF;AACD,SACE,mDAAC,oBAAD;AAAA,OACM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,IAC5B;AAAA,IACA,SAAO;AAAA,KAEP,mDAAC,sCAAD;AAAA,IACE,kBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAMR,aAAa,YAAY;AAAA,EAEvB,uBAAuB,0BAAU,MAAM;AAAA,EAEvC,SAAS,0BAAU,QAAQ,0BAAU;AAAA,EAErC,kBAAkB,0BAAU;AAAA,EAE5B,UAAU,0BAAU,UAAU,CAAC,0BAAU,MAAM,0BAAU;AAAA,EAEzD,YAAY,0BAAU;AAAA,EAEtB,SAAS,0BAAU;AAAA;AAGrB,IAAO,uBAAQ;",
   "names": []
 }

package/cjs/MenuExports.js

@@ -5,6 +5,10 @@ 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))
@@ -22,7 +26,11 @@ var __toCommonJS = /* @__PURE__ */ ((cache) => {
   };
 })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 var MenuExports_exports = {};
+__export(MenuExports_exports, {
+  DSMenuWithSchema: () => import_Menu.DSMenuWithSchema,
+  Menu: () => import_Menu.Menu
+});
 var React = __toESM(require("react"));
-__reExport(MenuExports_exports, require("./Menu"));
+var import_Menu = require("./Menu");
 module.exports = __toCommonJS(MenuExports_exports);
 //# sourceMappingURL=MenuExports.js.map

package/cjs/MenuExports.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/MenuExports.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './Menu';", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,gCAAc;",
+  "sourcesContent": ["export { DSMenuWithSchema, Menu } from './Menu';", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,kBAAuC;",
   "names": []
 }

package/cjs/MenuItems/MenuItemCheckbox.js

@@ -32,12 +32,12 @@ __export(MenuItemCheckbox_exports, {
 });
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
-var import_ds_form = require("@elliemae/ds-form");
+var import_Checkbox = require("@elliemae/ds-form/Checkbox");
 var import_MenuItemCheckable = require("./MenuItemCheckable");
 var import_menuItemFactory = require("./menuItemFactory");
 const MenuItemCheckbox = ({ checked, ...rest }) => /* @__PURE__ */ import_react.default.createElement(import_MenuItemCheckable.MenuItemCheckable, {
   ...rest,
-  leftAddon: /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSCheckbox, {
+  leftAddon: /* @__PURE__ */ import_react.default.createElement(import_Checkbox.DSCheckbox, {
     checked
   }),
   role: "menuitemcheckbox"

package/cjs/MenuItems/MenuItemCheckbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MenuItems/MenuItemCheckbox.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { MenuItemCheckable } from './MenuItemCheckable';\nimport { registerMenuItem } from './menuItemFactory';\n\nconst MenuItemCheckbox = ({ checked, ...rest }) => (\n  <MenuItemCheckable {...rest} leftAddon={<DSCheckbox checked={checked} />} role=\"menuitemcheckbox\" />\n);\n\nregisterMenuItem('checkbox', MenuItemCheckbox);\nexport { MenuItemCheckbox };\nexport default MenuItemCheckbox;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,qBAA2B;AAC3B,+BAAkC;AAClC,6BAAiC;AAEjC,MAAM,mBAAmB,CAAC,EAAE,YAAY,WACtC,mDAAC,4CAAD;AAAA,KAAuB;AAAA,EAAM,WAAW,mDAAC,2BAAD;AAAA,IAAY;AAAA;AAAA,EAAsB,MAAK;AAAA;AAGjF,6CAAiB,YAAY;AAE7B,IAAO,2BAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form/Checkbox';\nimport { MenuItemCheckable } from './MenuItemCheckable';\nimport { registerMenuItem } from './menuItemFactory';\n\nconst MenuItemCheckbox = ({ checked, ...rest }) => (\n  <MenuItemCheckable {...rest} leftAddon={<DSCheckbox checked={checked} />} role=\"menuitemcheckbox\" />\n);\n\nregisterMenuItem('checkbox', MenuItemCheckbox);\nexport { MenuItemCheckbox };\nexport default MenuItemCheckbox;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,sBAA2B;AAC3B,+BAAkC;AAClC,6BAAiC;AAEjC,MAAM,mBAAmB,CAAC,EAAE,YAAY,WACtC,mDAAC,4CAAD;AAAA,KAAuB;AAAA,EAAM,WAAW,mDAAC,4BAAD;AAAA,IAAY;AAAA;AAAA,EAAsB,MAAK;AAAA;AAGjF,6CAAiB,YAAY;AAE7B,IAAO,2BAAQ;",
   "names": []
 }

package/cjs/MenuItems/SearchableGroup.js

@@ -35,7 +35,7 @@ var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_classnames = require("@elliemae/ds-classnames");
 var import_FocusGroup = require("@elliemae/ds-shared/FocusGroup");
-var import_ds_form = require("@elliemae/ds-form");
+var import_SearchBox = require("@elliemae/ds-form/SearchBox");
 var import_react_desc = require("react-desc");
 var import_VirtualMenuList = require("../VirtualMenuList");
 var import_MenuContext = require("../MenuContext");
@@ -66,7 +66,7 @@ const SearchableGroup = ({
     }
   }, [focusOnOpen, visible]);
   const filteredChildren = (0, import_react.useMemo)(() => children.filter((child) => !searchTerm || child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase())), [children, searchTerm]);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(SearchBoxWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSSearchBox, {
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(SearchBoxWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_SearchBox.DSSearchBox, {
     innerRef: searchRef,
     onSearch: ({ value }) => setSearchTerm(value),
     searchOnEnter: false,

package/cjs/MenuItems/SearchableGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MenuItems/SearchableGroup.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useEffect, useMemo, useState, useRef, useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { focusGroupManagerHoc } from '@elliemae/ds-shared/FocusGroup';\nimport { DSSearchBox } from '@elliemae/ds-form';\nimport { PropTypes, describe } from 'react-desc';\nimport { VirtualMenuList } from '../VirtualMenuList';\nimport { MenuContext } from '../MenuContext';\n\nconst SearchBoxWrapper = aggregatedClasses('div')(\n  'menu-search-group',\n  'search-wrapper',\n);\nconst NoOptionsWrapper = aggregatedClasses('div')(\n  'menu-search-group',\n  'no-options',\n);\n\nconst SearchableGroup = ({\n  children,\n  amountItemsInWindow = 5,\n  searchTerm: searchTermProp = '',\n  noOptionsText = 'No options',\n  height,\n  width,\n  focusOnOpen = false,\n}) => {\n  const searchRef = useRef(null);\n  const [searchTerm, setSearchTerm] = useState(searchTermProp);\n\n  useEffect(() => {\n    if (searchRef.current) searchRef.current.focus();\n  }, []);\n\n  const { visible } = useContext(MenuContext) || {};\n\n  useEffect(() => {\n    if (focusOnOpen && visible) {\n      setTimeout(() => {\n        if (searchRef.current) searchRef.current.focus();\n      }, 0);\n    }\n  }, [focusOnOpen, visible]);\n\n  const filteredChildren = useMemo(\n    () =>\n      children.filter(\n        (child) =>\n          !searchTerm ||\n          child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase()),\n      ),\n    [children, searchTerm],\n  );\n\n  return (\n    <>\n      <SearchBoxWrapper>\n        <DSSearchBox\n          innerRef={searchRef}\n          onSearch={({ value }) => setSearchTerm(value)}\n          searchOnEnter={false}\n          showIcon={false}\n          value={searchTerm}\n        />\n      </SearchBoxWrapper>\n      {!filteredChildren.length && (\n        <NoOptionsWrapper>{noOptionsText}</NoOptionsWrapper>\n      )}\n      <VirtualMenuList\n        amountItemsInWindow={amountItemsInWindow}\n        height={height}\n        items={filteredChildren}\n        width={width}\n      />\n    </>\n  );\n};\n\nconst props = {\n  /** The amount of items that are going to be rendered in the group */\n  amountItemsInWindow: PropTypes.number.description(\n    'The amount of items that are going to be rendered in the group',\n  ),\n  /** A search term */\n  searchTerm: PropTypes.string.description('A search term'),\n  /** Text to show when there's no options to show */\n  noOptionsText: PropTypes.string.description(\n    \"Text to show when there's no options to show\",\n  ),\n  /** array of children for search list */\n  children: PropTypes.array.description('array of children for search list'),\n  /** height for virtual list wrapper */\n  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'height for virtual list wrapper',\n  ),\n  /** width for virtual list wrapper */\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'width for virtual list wrapper',\n  ),\n  /** weather to focus on searchable group on open */\n  focusOnOpen: PropTypes.bool.description(\n    'weather to focus on searchable group on open',\n  ),\n};\n\nSearchableGroup.propTypes = props;\n\nconst DSMenuSearchableGroupWithSchema = describe(SearchableGroup);\nDSMenuSearchableGroupWithSchema.propTypes = props;\n\nconst SearchableGroupHOC = focusGroupManagerHoc(SearchableGroup);\n\nexport { DSMenuSearchableGroupWithSchema, SearchableGroupHOC as SearchableGroup };\nexport default SearchableGroupHOC;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwE;AACxE,2BAAkC;AAClC,wBAAqC;AACrC,qBAA4B;AAC5B,wBAAoC;AACpC,6BAAgC;AAChC,yBAA4B;AAE5B,MAAM,mBAAmB,4CAAkB,OACzC,qBACA;AAEF,MAAM,mBAAmB,4CAAkB,OACzC,qBACA;AAGF,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA,sBAAsB;AAAA,EACtB,YAAY,iBAAiB;AAAA,EAC7B,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,MACV;AACJ,QAAM,YAAY,yBAAO;AACzB,QAAM,CAAC,YAAY,iBAAiB,2BAAS;AAE7C,8BAAU,MAAM;AACd,QAAI,UAAU;AAAS,gBAAU,QAAQ;AAAA,KACxC;AAEH,QAAM,EAAE,YAAY,6BAAW,mCAAgB;AAE/C,8BAAU,MAAM;AACd,QAAI,eAAe,SAAS;AAC1B,iBAAW,MAAM;AACf,YAAI,UAAU;AAAS,oBAAU,QAAQ;AAAA,SACxC;AAAA;AAAA,KAEJ,CAAC,aAAa;AAEjB,QAAM,mBAAmB,0BACvB,MACE,SAAS,OACP,CAAC,UACC,CAAC,cACD,MAAM,MAAM,MAAM,cAAc,WAAW,WAAW,iBAE5D,CAAC,UAAU;AAGb,SACE,wFACE,mDAAC,kBAAD,MACE,mDAAC,4BAAD;AAAA,IACE,UAAU;AAAA,IACV,UAAU,CAAC,EAAE,YAAY,cAAc;AAAA,IACvC,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,OAGV,CAAC,iBAAiB,UACjB,mDAAC,kBAAD,MAAmB,gBAErB,mDAAC,wCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA;AAAA;AAMR,MAAM,QAAQ;AAAA,EAEZ,qBAAqB,4BAAU,OAAO,YACpC;AAAA,EAGF,YAAY,4BAAU,OAAO,YAAY;AAAA,EAEzC,eAAe,4BAAU,OAAO,YAC9B;AAAA,EAGF,UAAU,4BAAU,MAAM,YAAY;AAAA,EAEtC,QAAQ,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAChE;AAAA,EAGF,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAC/D;AAAA,EAGF,aAAa,4BAAU,KAAK,YAC1B;AAAA;AAIJ,gBAAgB,YAAY;AAE5B,MAAM,kCAAkC,gCAAS;AACjD,gCAAgC,YAAY;AAE5C,MAAM,qBAAqB,4CAAqB;AAGhD,IAAO,0BAAQ;",
+  "sourcesContent": ["import React, { useEffect, useMemo, useState, useRef, useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { focusGroupManagerHoc } from '@elliemae/ds-shared/FocusGroup';\nimport { DSSearchBox } from '@elliemae/ds-form/SearchBox';\nimport { PropTypes, describe } from 'react-desc';\nimport { VirtualMenuList } from '../VirtualMenuList';\nimport { MenuContext } from '../MenuContext';\n\nconst SearchBoxWrapper = aggregatedClasses('div')(\n  'menu-search-group',\n  'search-wrapper',\n);\nconst NoOptionsWrapper = aggregatedClasses('div')(\n  'menu-search-group',\n  'no-options',\n);\n\nconst SearchableGroup = ({\n  children,\n  amountItemsInWindow = 5,\n  searchTerm: searchTermProp = '',\n  noOptionsText = 'No options',\n  height,\n  width,\n  focusOnOpen = false,\n}) => {\n  const searchRef = useRef(null);\n  const [searchTerm, setSearchTerm] = useState(searchTermProp);\n\n  useEffect(() => {\n    if (searchRef.current) searchRef.current.focus();\n  }, []);\n\n  const { visible } = useContext(MenuContext) || {};\n\n  useEffect(() => {\n    if (focusOnOpen && visible) {\n      setTimeout(() => {\n        if (searchRef.current) searchRef.current.focus();\n      }, 0);\n    }\n  }, [focusOnOpen, visible]);\n\n  const filteredChildren = useMemo(\n    () =>\n      children.filter(\n        (child) =>\n          !searchTerm ||\n          child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase()),\n      ),\n    [children, searchTerm],\n  );\n\n  return (\n    <>\n      <SearchBoxWrapper>\n        <DSSearchBox\n          innerRef={searchRef}\n          onSearch={({ value }) => setSearchTerm(value)}\n          searchOnEnter={false}\n          showIcon={false}\n          value={searchTerm}\n        />\n      </SearchBoxWrapper>\n      {!filteredChildren.length && (\n        <NoOptionsWrapper>{noOptionsText}</NoOptionsWrapper>\n      )}\n      <VirtualMenuList\n        amountItemsInWindow={amountItemsInWindow}\n        height={height}\n        items={filteredChildren}\n        width={width}\n      />\n    </>\n  );\n};\n\nconst props = {\n  /** The amount of items that are going to be rendered in the group */\n  amountItemsInWindow: PropTypes.number.description(\n    'The amount of items that are going to be rendered in the group',\n  ),\n  /** A search term */\n  searchTerm: PropTypes.string.description('A search term'),\n  /** Text to show when there's no options to show */\n  noOptionsText: PropTypes.string.description(\n    \"Text to show when there's no options to show\",\n  ),\n  /** array of children for search list */\n  children: PropTypes.array.description('array of children for search list'),\n  /** height for virtual list wrapper */\n  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'height for virtual list wrapper',\n  ),\n  /** width for virtual list wrapper */\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'width for virtual list wrapper',\n  ),\n  /** weather to focus on searchable group on open */\n  focusOnOpen: PropTypes.bool.description(\n    'weather to focus on searchable group on open',\n  ),\n};\n\nSearchableGroup.propTypes = props;\n\nconst DSMenuSearchableGroupWithSchema = describe(SearchableGroup);\nDSMenuSearchableGroupWithSchema.propTypes = props;\n\nconst SearchableGroupHOC = focusGroupManagerHoc(SearchableGroup);\n\nexport { DSMenuSearchableGroupWithSchema, SearchableGroupHOC as SearchableGroup };\nexport default SearchableGroupHOC;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwE;AACxE,2BAAkC;AAClC,wBAAqC;AACrC,uBAA4B;AAC5B,wBAAoC;AACpC,6BAAgC;AAChC,yBAA4B;AAE5B,MAAM,mBAAmB,4CAAkB,OACzC,qBACA;AAEF,MAAM,mBAAmB,4CAAkB,OACzC,qBACA;AAGF,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA,sBAAsB;AAAA,EACtB,YAAY,iBAAiB;AAAA,EAC7B,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,MACV;AACJ,QAAM,YAAY,yBAAO;AACzB,QAAM,CAAC,YAAY,iBAAiB,2BAAS;AAE7C,8BAAU,MAAM;AACd,QAAI,UAAU;AAAS,gBAAU,QAAQ;AAAA,KACxC;AAEH,QAAM,EAAE,YAAY,6BAAW,mCAAgB;AAE/C,8BAAU,MAAM;AACd,QAAI,eAAe,SAAS;AAC1B,iBAAW,MAAM;AACf,YAAI,UAAU;AAAS,oBAAU,QAAQ;AAAA,SACxC;AAAA;AAAA,KAEJ,CAAC,aAAa;AAEjB,QAAM,mBAAmB,0BACvB,MACE,SAAS,OACP,CAAC,UACC,CAAC,cACD,MAAM,MAAM,MAAM,cAAc,WAAW,WAAW,iBAE5D,CAAC,UAAU;AAGb,SACE,wFACE,mDAAC,kBAAD,MACE,mDAAC,8BAAD;AAAA,IACE,UAAU;AAAA,IACV,UAAU,CAAC,EAAE,YAAY,cAAc;AAAA,IACvC,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,OAGV,CAAC,iBAAiB,UACjB,mDAAC,kBAAD,MAAmB,gBAErB,mDAAC,wCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA;AAAA;AAMR,MAAM,QAAQ;AAAA,EAEZ,qBAAqB,4BAAU,OAAO,YACpC;AAAA,EAGF,YAAY,4BAAU,OAAO,YAAY;AAAA,EAEzC,eAAe,4BAAU,OAAO,YAC9B;AAAA,EAGF,UAAU,4BAAU,MAAM,YAAY;AAAA,EAEtC,QAAQ,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAChE;AAAA,EAGF,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,SAAS,YAC/D;AAAA,EAGF,aAAa,4BAAU,KAAK,YAC1B;AAAA;AAIJ,gBAAgB,YAAY;AAE5B,MAAM,kCAAkC,gCAAS;AACjD,gCAAgC,YAAY;AAE5C,MAAM,qBAAqB,4CAAqB;AAGhD,IAAO,0BAAQ;",
   "names": []
 }

package/cjs/MenuItems/SubMenu.js

@@ -40,7 +40,7 @@ var import_ds_hidden = require("@elliemae/ds-hidden");
 var import_ds_button = require("@elliemae/ds-button");
 var import_ds_popper = require("@elliemae/ds-popper");
 var import_styled_components = __toESM(require("styled-components"));
-var import_Menu = require("../Menu");
+var import_DSMenu = require("../DSMenu");
 var import_MenuItem = require("./MenuItem");
 var import_menuItemFactory = require("./menuItemFactory");
 const ChevronRightComp = import_styled_components.default.div`
@@ -125,7 +125,7 @@ const SubMenu = ({
     size: "sm"
   }));
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_ds_popper.DSPopper, {
-    contentComponent: /* @__PURE__ */ import_react.default.createElement(import_Menu.Menu, {
+    contentComponent: /* @__PURE__ */ import_react.default.createElement(import_DSMenu.Menu, {
       focusKeyBindings: {
         ArrowLeft: [() => focusItemByNode(itemRef.current), "exit"]
       },

package/cjs/MenuItems/SubMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/MenuItems/SubMenu.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAqD;AACrD,wBAAoC;AACpC,sBAAmD;AACnD,wBAAkC;AAClC,uBAAoC;AACpC,uBAAyC;AACzC,uBAAuC;AACvC,+BAAmB;AACnB,kBAAqB;AACrB,sBAAyB;AACzB,6BAAiC;AAEjC,MAAM,mBAAmB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,UAAU,yBAAO;AACvB,QAAM,cAAc,yBAAO;AAC3B,QAAM,CAAC,gBAAgB,qBAAqB,2BAAkB;AAC9D,QAAM;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA;AAAA,MACE,0CAAoB,QAAW;AAAA,IACjC,aAAa;AAAA;AAGf,QAAM,cAAc,mBAAmB,YAAY,UAAU;AAE7D,QAAM,EAAE,oBAAoB;AAE5B,QAAM,8BAA8B,CAAC,MAAM;AACzC,MAAE;AACF;AACA,gBAAY,UAAU;AAAA;AAExB,QAAM,sBAAsB,CAAC,MAAM;AACjC,QAAI;AAAS,cAAQ;AAAA;AAEvB,QAAM,2BAA2B,MAAM;AACrC,sBAAkB;AAClB;AACA,gBAAY,UAAU;AAAA;AAGxB,QAAM,yBAAyB,MAAM;AACnC;AACA,gBAAY,UAAU;AAAA;AAGxB,QAAM,qBAAqB,8BAAY,MAAM;AAC3C,sBAAkB;AAAA,KACjB;AAEH,QAAM,qBAAqB,8BAAY,MAAM;AAC3C,sBAAkB;AAAA,KACjB;AAEH,QAAM,gBACJ,gBAAgB,UACZ;AAAA,IACE,cAAc;AAAA,IACd,cAAc,MAAM;AAClB;AACA,wBAAkB;AAAA;AAAA,MAGtB,EAAE,SAAS;AAEjB,QAAM,aACJ,mBAAmB,YACjB,mDAAC,2BAAD;AAAA,IACE,cAAW;AAAA,IACX,eAAY;AAAA,IACZ,YAAW;AAAA,IACX,UACE,mDAAC,iCAAD;AAAA,MACE,WAAU;AAAA,MACV,OAAO,WAAW,iBAAiB,CAAC,iBAAiB,OAAO,CAAC,WAAW;AAAA,MACxE,MAAK;AAAA;AAAA,IAGT,SAAS,CAAC,MAAM,4BAA4B;AAAA,IAC5C,MAAK;AAAA,IACL,SAAS,gCAAe;AAAA,OAG1B,mDAAC,kBAAD,MACE,mDAAC,mCAAD;AAAA,IACE,eAAY;AAAA,IACZ,WAAU;AAAA,IACV,OAAO,WAAW,iBAAiB,CAAC,iBAAiB,OAAO,CAAC,WAAW;AAAA,IACxE,MAAK;AAAA;AAKb,SACE,wFACE,mDAAC,2BAAD;AAAA,IACE,kBACE,mDAAC,kBAAD;AAAA,MACE,kBAAkB;AAAA,QAChB,WAAW,CAAC,MAAM,gBAAgB,QAAQ,UAAU;AAAA;AAAA,MAEtD,aAAa,YAAY;AAAA,MACzB,kBAAkB;AAAA,SACd;AAAA,MACJ;AAAA,MACA;AAAA,OAEC;AAAA,IAGL;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ,CAAC,YAAa,UAAU,WAAW;AAAA,IAC3C,WAAU;AAAA,IACV,WAAW;AAAA,IACX,kBACE,mDAAC,0BAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,cAAc;AAAA,SACV;AAAA,MACJ,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,WAAW,EAAE,YAAY,IAAI;AACnE;AAAA;AAAA;AAAA,MAGJ;AAAA,SACI;AAAA;AAAA;AAAA;AAQhB,MAAM,QAAQ;AAAA,EAEZ,SAAS,4BAAU,KAAK,YAAY;AAAA,EAEpC,WAAW,4BAAU,KAAK,YAAY;AAAA,EAEtC,OAAO,4BAAU,OAAO,YAAY;AAAA,EAEpC,iBAAiB,4BAAU,MAAM,+BAAc,YAAY;AAAA,EAE3D,UAAU,4BAAU,UAAU,CAAC,4BAAU,OAAO,4BAAU,OAAO,YAAY;AAAA,EAE7E,gBAAgB,4BAAU,MAAM,CAAC,aAAa,YAAY;AAAA,EAC1D,uBAAuB,4BAAU,KAAK,YAAY;AAAA,EAElD,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAE7C,gBAAgB,4BAAU,KAAK,YAAY;AAAA,EAE3C,SAAS,4BAAU,KAAK,YAAY;AAAA,EACpC,WAAW,4BAAU,IAAI,YAAY;AAAA,EAErC,IAAI,4BAAU,OAAO,YAAY;AAAA;AAGnC,QAAQ,YAAY;AACpB,6CAAiB,WAAW;AAE5B,MAAM,sBAAsB,gCAAS;AAErC,oBAAoB,YAAY;AAGhC,IAAO,kBAAQ;",
+  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\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 '../DSMenu';\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "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,13 +1,4 @@
 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 { MenuItemRadio } from "./MenuItems/MenuItemRadio";
 import { MenuItemCheckbox } from "./MenuItems/MenuItemCheckbox";
 import { CheckboxGroup } from "./MenuItems/CheckboxGroup";
@@ -19,89 +10,7 @@ import { SearchableGroup } from "./MenuItems/SearchableGroup";
 import { SelectionGroup } from "./MenuItems/SelectionGroup";
 import { menuItemFactory } from "./MenuItems/menuItemFactory";
 import { renderMenuItems } from "./MenuItems/renderMenuItems";
-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;
+import { DSMenuWithSchema, Menu } from "./DSMenu";
 Menu.Item = MenuItem;
 Menu.ItemCheckbox = MenuItemCheckbox;
 Menu.ItemRadio = MenuItemRadio;

package/esm/Menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Menu.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable import/no-cycle */\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 { MenuItemRadio } from './MenuItems/MenuItemRadio';\nimport { MenuItemCheckbox } from './MenuItems/MenuItemCheckbox';\nimport { CheckboxGroup } from './MenuItems/CheckboxGroup';\nimport { RadioGroup } from './MenuItems/RadioGroup';\nimport { MenuSeparator } from './MenuItems/Separator';\nimport { MenuItem } from './MenuItems/MenuItem';\nimport { SubMenu } from './MenuItems/SubMenu';\nimport { SearchableGroup } from './MenuItems/SearchableGroup';\nimport { SelectionGroup } from './MenuItems/SelectionGroup';\nimport { menuItemFactory } from './MenuItems/menuItemFactory';\nimport { renderMenuItems } from './MenuItems/renderMenuItems';\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// todo: add a handler to get this kind of exports for documentation\nMenu.Item = MenuItem;\nMenu.ItemCheckbox = MenuItemCheckbox;\nMenu.ItemRadio = MenuItemRadio;\nMenu.SubMenu = SubMenu;\nMenu.Separator = MenuSeparator;\nMenu.CheckboxGroup = CheckboxGroup;\nMenu.RadioGroup = RadioGroup;\nMenu.SearchableGroup = SearchableGroup;\nMenu.SelectionGroup = SelectionGroup;\n\nexport { menuItemFactory, renderMenuItems, DSMenuWithSchema, Menu };\nexport default Menu;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { MenuItemRadio } from './MenuItems/MenuItemRadio';\nimport { MenuItemCheckbox } from './MenuItems/MenuItemCheckbox';\nimport { CheckboxGroup } from './MenuItems/CheckboxGroup';\nimport { RadioGroup } from './MenuItems/RadioGroup';\nimport { MenuSeparator } from './MenuItems/Separator';\nimport { MenuItem } from './MenuItems/MenuItem';\nimport { SubMenu } from './MenuItems/SubMenu';\nimport { SearchableGroup } from './MenuItems/SearchableGroup';\nimport { SelectionGroup } from './MenuItems/SelectionGroup';\nimport { menuItemFactory } from './MenuItems/menuItemFactory';\nimport { renderMenuItems } from './MenuItems/renderMenuItems';\nimport { DSMenuWithSchema, Menu } from './DSMenu';\n\n\nMenu.Item = MenuItem;\nMenu.ItemCheckbox = MenuItemCheckbox;\nMenu.ItemRadio = MenuItemRadio;\nMenu.SubMenu = SubMenu;\nMenu.Separator = MenuSeparator;\nMenu.CheckboxGroup = CheckboxGroup;\nMenu.RadioGroup = RadioGroup;\nMenu.SearchableGroup = SearchableGroup;\nMenu.SelectionGroup = SelectionGroup;\n\nexport { menuItemFactory, renderMenuItems, DSMenuWithSchema, Menu };\nexport default Menu;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,KAAK,OAAO;AACZ,KAAK,eAAe;AACpB,KAAK,YAAY;AACjB,KAAK,UAAU;AACf,KAAK,YAAY;AACjB,KAAK,gBAAgB;AACrB,KAAK,aAAa;AAClB,KAAK,kBAAkB;AACvB,KAAK,iBAAiB;AAGtB,IAAO,eAAQ;",
   "names": []
 }

package/esm/MenuCombobox.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import React2 from "react";
 import PropTypes from "prop-types";
 import { SearchableList } from "./MenuItems/SearchableList";
-import { Menu } from "./Menu";
+import { Menu } from "./DSMenu";
 function MenuCombobox({
   dropdownFilterOptions = {},
   options = [],

package/esm/MenuCombobox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/MenuCombobox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SearchableList } from './MenuItems/SearchableList';\nimport { Menu } from './Menu';\n\nfunction MenuCombobox({\n  dropdownFilterOptions = {},\n  options = [],\n  onSelectMenuItem = () => null,\n  innerRef,\n  maxOptions = 10,\n  loading = false,\n  ...rest\n}) {\n  return (\n    <Menu\n      {...rest}\n      classProps={{ menuComboBox: true }}\n      innerRef={innerRef}\n      visible\n    >\n      <SearchableList\n        appendTermInList\n        extraListProps={dropdownFilterOptions}\n        items={options}\n        onSelectMenuItem={onSelectMenuItem}\n        maxOptions={maxOptions}\n        loading={loading}\n      />\n    </Menu>\n  );\n}\n\nMenuCombobox.propTypes = {\n  /** Options */\n  dropdownFilterOptions: PropTypes.shape({}),\n  /** The option or menu items to render */\n  options: PropTypes.arrayOf(PropTypes.object),\n  /** Handler when a menu item is selected */\n  onSelectMenuItem: PropTypes.func,\n  /** Internal ref */\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n  /** Max options to display in the list */\n  maxOptions: PropTypes.number,\n  /** Is loading */\n  loading: PropTypes.bool,\n};\n\nexport default MenuCombobox;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\nimport { SearchableList } from './MenuItems/SearchableList';\nimport { Menu } from './DSMenu';\n\nfunction MenuCombobox({\n  dropdownFilterOptions = {},\n  options = [],\n  onSelectMenuItem = () => null,\n  innerRef,\n  maxOptions = 10,\n  loading = false,\n  ...rest\n}) {\n  return (\n    <Menu\n      {...rest}\n      classProps={{ menuComboBox: true }}\n      innerRef={innerRef}\n      visible\n    >\n      <SearchableList\n        appendTermInList\n        extraListProps={dropdownFilterOptions}\n        items={options}\n        onSelectMenuItem={onSelectMenuItem}\n        maxOptions={maxOptions}\n        loading={loading}\n      />\n    </Menu>\n  );\n}\n\nMenuCombobox.propTypes = {\n  /** Options */\n  dropdownFilterOptions: PropTypes.shape({}),\n  /** The option or menu items to render */\n  options: PropTypes.arrayOf(PropTypes.object),\n  /** Handler when a menu item is selected */\n  onSelectMenuItem: PropTypes.func,\n  /** Internal ref */\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),\n  /** Max options to display in the list */\n  maxOptions: PropTypes.number,\n  /** Is loading */\n  loading: PropTypes.bool,\n};\n\nexport default MenuCombobox;\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,sBAAsB;AAAA,EACpB,wBAAwB;AAAA,EACxB,UAAU;AAAA,EACV,mBAAmB,MAAM;AAAA,EACzB;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,KACP;AAAA,GACF;AACD,SACE,qCAAC,MAAD;AAAA,OACM;AAAA,IACJ,YAAY,EAAE,cAAc;AAAA,IAC5B;AAAA,IACA,SAAO;AAAA,KAEP,qCAAC,gBAAD;AAAA,IACE,kBAAgB;AAAA,IAChB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAMR,aAAa,YAAY;AAAA,EAEvB,uBAAuB,UAAU,MAAM;AAAA,EAEvC,SAAS,UAAU,QAAQ,UAAU;AAAA,EAErC,kBAAkB,UAAU;AAAA,EAE5B,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU;AAAA,EAEzD,YAAY,UAAU;AAAA,EAEtB,SAAS,UAAU;AAAA;AAGrB,IAAO,uBAAQ;",
   "names": []
 }

package/esm/MenuExports.js

@@ -1,3 +1,7 @@
 import * as React from "react";
-export * from "./Menu";
+import { DSMenuWithSchema, Menu } from "./Menu";
+export {
+  DSMenuWithSchema,
+  Menu
+};
 //# sourceMappingURL=MenuExports.js.map

package/esm/MenuExports.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/MenuExports.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Menu';"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSMenuWithSchema, Menu } from './Menu';"],
   "mappings": "AAAA;ACAA;",
   "names": []
 }

package/esm/MenuItems/MenuItemCheckbox.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React2 from "react";
-import { DSCheckbox } from "@elliemae/ds-form";
+import { DSCheckbox } from "@elliemae/ds-form/Checkbox";
 import { MenuItemCheckable } from "./MenuItemCheckable";
 import { registerMenuItem } from "./menuItemFactory";
 const MenuItemCheckbox = ({ checked, ...rest }) => /* @__PURE__ */ React2.createElement(MenuItemCheckable, {

package/esm/MenuItems/MenuItemCheckbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/MenuItemCheckbox.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { MenuItemCheckable } from './MenuItemCheckable';\nimport { registerMenuItem } from './menuItemFactory';\n\nconst MenuItemCheckbox = ({ checked, ...rest }) => (\n  <MenuItemCheckable {...rest} leftAddon={<DSCheckbox checked={checked} />} role=\"menuitemcheckbox\" />\n);\n\nregisterMenuItem('checkbox', MenuItemCheckbox);\nexport { MenuItemCheckbox };\nexport default MenuItemCheckbox;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form/Checkbox';\nimport { MenuItemCheckable } from './MenuItemCheckable';\nimport { registerMenuItem } from './menuItemFactory';\n\nconst MenuItemCheckbox = ({ checked, ...rest }) => (\n  <MenuItemCheckable {...rest} leftAddon={<DSCheckbox checked={checked} />} role=\"menuitemcheckbox\" />\n);\n\nregisterMenuItem('checkbox', MenuItemCheckbox);\nexport { MenuItemCheckbox };\nexport default MenuItemCheckbox;\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,CAAC,EAAE,YAAY,WACtC,qCAAC,mBAAD;AAAA,KAAuB;AAAA,EAAM,WAAW,qCAAC,YAAD;AAAA,IAAY;AAAA;AAAA,EAAsB,MAAK;AAAA;AAGjF,iBAAiB,YAAY;AAE7B,IAAO,2BAAQ;",
   "names": []
 }

package/esm/MenuItems/SearchableGroup.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import React2, { useEffect, useMemo, useState, useRef, useContext } from "react";
 import { aggregatedClasses } from "@elliemae/ds-classnames";
 import { focusGroupManagerHoc } from "@elliemae/ds-shared/FocusGroup";
-import { DSSearchBox } from "@elliemae/ds-form";
+import { DSSearchBox } from "@elliemae/ds-form/SearchBox";
 import { PropTypes, describe } from "react-desc";
 import { VirtualMenuList } from "../VirtualMenuList";
 import { MenuContext } from "../MenuContext";

package/esm/MenuItems/SearchableGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/MenuItems/SearchableGroup.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useMemo, useState, useRef, useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { focusGroupManagerHoc } from '@elliemae/ds-shared/FocusGroup';\nimport { DSSearchBox } from '@elliemae/ds-form';\nimport { PropTypes, describe } from 'react-desc';\nimport { VirtualMenuList } from '../VirtualMenuList';\nimport { MenuContext } from '../MenuContext';\n\nconst SearchBoxWrapper = aggregatedClasses('div')(\n  'menu-search-group',\n  'search-wrapper',\n);\nconst NoOptionsWrapper = aggregatedClasses('div')(\n  'menu-search-group',\n  'no-options',\n);\n\nconst SearchableGroup = ({\n  children,\n  amountItemsInWindow = 5,\n  searchTerm: searchTermProp = '',\n  noOptionsText = 'No options',\n  height,\n  width,\n  focusOnOpen = false,\n}) => {\n  const searchRef = useRef(null);\n  const [searchTerm, setSearchTerm] = useState(searchTermProp);\n\n  useEffect(() => {\n    if (searchRef.current) searchRef.current.focus();\n  }, []);\n\n  const { visible } = useContext(MenuContext) || {};\n\n  useEffect(() => {\n    if (focusOnOpen && visible) {\n      setTimeout(() => {\n        if (searchRef.current) searchRef.current.focus();\n      }, 0);\n    }\n  }, [focusOnOpen, visible]);\n\n  const filteredChildren = useMemo(\n    () =>\n      children.filter(\n        (child) =>\n          !searchTerm ||\n          child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase()),\n      ),\n    [children, searchTerm],\n  );\n\n  return (\n    <>\n      <SearchBoxWrapper>\n        <DSSearchBox\n          innerRef={searchRef}\n          onSearch={({ value }) => setSearchTerm(value)}\n          searchOnEnter={false}\n          showIcon={false}\n          value={searchTerm}\n        />\n      </SearchBoxWrapper>\n      {!filteredChildren.length && (\n        <NoOptionsWrapper>{noOptionsText}</NoOptionsWrapper>\n      )}\n      <VirtualMenuList\n        amountItemsInWindow={amountItemsInWindow}\n        height={height}\n        items={filteredChildren}\n        width={width}\n      />\n    </>\n  );\n};\n\nconst props = {\n  /** The amount of items that are going to be rendered in the group */\n  amountItemsInWindow: PropTypes.number.description(\n    'The amount of items that are going to be rendered in the group',\n  ),\n  /** A search term */\n  searchTerm: PropTypes.string.description('A search term'),\n  /** Text to show when there's no options to show */\n  noOptionsText: PropTypes.string.description(\n    \"Text to show when there's no options to show\",\n  ),\n  /** array of children for search list */\n  children: PropTypes.array.description('array of children for search list'),\n  /** height for virtual list wrapper */\n  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'height for virtual list wrapper',\n  ),\n  /** width for virtual list wrapper */\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'width for virtual list wrapper',\n  ),\n  /** weather to focus on searchable group on open */\n  focusOnOpen: PropTypes.bool.description(\n    'weather to focus on searchable group on open',\n  ),\n};\n\nSearchableGroup.propTypes = props;\n\nconst DSMenuSearchableGroupWithSchema = describe(SearchableGroup);\nDSMenuSearchableGroupWithSchema.propTypes = props;\n\nconst SearchableGroupHOC = focusGroupManagerHoc(SearchableGroup);\n\nexport { DSMenuSearchableGroupWithSchema, SearchableGroupHOC as SearchableGroup };\nexport default SearchableGroupHOC;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useMemo, useState, useRef, useContext } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { focusGroupManagerHoc } from '@elliemae/ds-shared/FocusGroup';\nimport { DSSearchBox } from '@elliemae/ds-form/SearchBox';\nimport { PropTypes, describe } from 'react-desc';\nimport { VirtualMenuList } from '../VirtualMenuList';\nimport { MenuContext } from '../MenuContext';\n\nconst SearchBoxWrapper = aggregatedClasses('div')(\n  'menu-search-group',\n  'search-wrapper',\n);\nconst NoOptionsWrapper = aggregatedClasses('div')(\n  'menu-search-group',\n  'no-options',\n);\n\nconst SearchableGroup = ({\n  children,\n  amountItemsInWindow = 5,\n  searchTerm: searchTermProp = '',\n  noOptionsText = 'No options',\n  height,\n  width,\n  focusOnOpen = false,\n}) => {\n  const searchRef = useRef(null);\n  const [searchTerm, setSearchTerm] = useState(searchTermProp);\n\n  useEffect(() => {\n    if (searchRef.current) searchRef.current.focus();\n  }, []);\n\n  const { visible } = useContext(MenuContext) || {};\n\n  useEffect(() => {\n    if (focusOnOpen && visible) {\n      setTimeout(() => {\n        if (searchRef.current) searchRef.current.focus();\n      }, 0);\n    }\n  }, [focusOnOpen, visible]);\n\n  const filteredChildren = useMemo(\n    () =>\n      children.filter(\n        (child) =>\n          !searchTerm ||\n          child.props.label.toLowerCase().startsWith(searchTerm.toLowerCase()),\n      ),\n    [children, searchTerm],\n  );\n\n  return (\n    <>\n      <SearchBoxWrapper>\n        <DSSearchBox\n          innerRef={searchRef}\n          onSearch={({ value }) => setSearchTerm(value)}\n          searchOnEnter={false}\n          showIcon={false}\n          value={searchTerm}\n        />\n      </SearchBoxWrapper>\n      {!filteredChildren.length && (\n        <NoOptionsWrapper>{noOptionsText}</NoOptionsWrapper>\n      )}\n      <VirtualMenuList\n        amountItemsInWindow={amountItemsInWindow}\n        height={height}\n        items={filteredChildren}\n        width={width}\n      />\n    </>\n  );\n};\n\nconst props = {\n  /** The amount of items that are going to be rendered in the group */\n  amountItemsInWindow: PropTypes.number.description(\n    'The amount of items that are going to be rendered in the group',\n  ),\n  /** A search term */\n  searchTerm: PropTypes.string.description('A search term'),\n  /** Text to show when there's no options to show */\n  noOptionsText: PropTypes.string.description(\n    \"Text to show when there's no options to show\",\n  ),\n  /** array of children for search list */\n  children: PropTypes.array.description('array of children for search list'),\n  /** height for virtual list wrapper */\n  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'height for virtual list wrapper',\n  ),\n  /** width for virtual list wrapper */\n  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n    'width for virtual list wrapper',\n  ),\n  /** weather to focus on searchable group on open */\n  focusOnOpen: PropTypes.bool.description(\n    'weather to focus on searchable group on open',\n  ),\n};\n\nSearchableGroup.propTypes = props;\n\nconst DSMenuSearchableGroupWithSchema = describe(SearchableGroup);\nDSMenuSearchableGroupWithSchema.propTypes = props;\n\nconst SearchableGroupHOC = focusGroupManagerHoc(SearchableGroup);\n\nexport { DSMenuSearchableGroupWithSchema, SearchableGroupHOC as SearchableGroup };\nexport default SearchableGroupHOC;\n"],
   "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,kBAAkB,OACzC,qBACA;AAEF,MAAM,mBAAmB,kBAAkB,OACzC,qBACA;AAGF,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA,sBAAsB;AAAA,EACtB,YAAY,iBAAiB;AAAA,EAC7B,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,MACV;AACJ,QAAM,YAAY,OAAO;AACzB,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAE7C,YAAU,MAAM;AACd,QAAI,UAAU;AAAS,gBAAU,QAAQ;AAAA,KACxC;AAEH,QAAM,EAAE,YAAY,WAAW,gBAAgB;AAE/C,YAAU,MAAM;AACd,QAAI,eAAe,SAAS;AAC1B,iBAAW,MAAM;AACf,YAAI,UAAU;AAAS,oBAAU,QAAQ;AAAA,SACxC;AAAA;AAAA,KAEJ,CAAC,aAAa;AAEjB,QAAM,mBAAmB,QACvB,MACE,SAAS,OACP,CAAC,UACC,CAAC,cACD,MAAM,MAAM,MAAM,cAAc,WAAW,WAAW,iBAE5D,CAAC,UAAU;AAGb,SACE,4DACE,qCAAC,kBAAD,MACE,qCAAC,aAAD;AAAA,IACE,UAAU;AAAA,IACV,UAAU,CAAC,EAAE,YAAY,cAAc;AAAA,IACvC,eAAe;AAAA,IACf,UAAU;AAAA,IACV,OAAO;AAAA,OAGV,CAAC,iBAAiB,UACjB,qCAAC,kBAAD,MAAmB,gBAErB,qCAAC,iBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA;AAAA;AAMR,MAAM,QAAQ;AAAA,EAEZ,qBAAqB,UAAU,OAAO,YACpC;AAAA,EAGF,YAAY,UAAU,OAAO,YAAY;AAAA,EAEzC,eAAe,UAAU,OAAO,YAC9B;AAAA,EAGF,UAAU,UAAU,MAAM,YAAY;AAAA,EAEtC,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAChE;AAAA,EAGF,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,SAAS,YAC/D;AAAA,EAGF,aAAa,UAAU,KAAK,YAC1B;AAAA;AAIJ,gBAAgB,YAAY;AAE5B,MAAM,kCAAkC,SAAS;AACjD,gCAAgC,YAAY;AAE5C,MAAM,qBAAqB,qBAAqB;AAGhD,IAAO,0BAAQ;",
   "names": []
 }

package/esm/MenuItems/SubMenu.js

@@ -7,7 +7,7 @@ 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 { Menu } from "../DSMenu";
 import { MenuItem } from "./MenuItem";
 import { registerMenuItem } from "./menuItemFactory";
 const ChevronRightComp = styled.div`

package/esm/MenuItems/SubMenu.js.map

@@ -1,7 +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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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\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 '../DSMenu';\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": "AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,UAAU,CAAC;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,UAAU,OAAO;AACvB,QAAM,cAAc,OAAO;AAC3B,QAAM,CAAC,gBAAgB,qBAAqB,SAAkB;AAC9D,QAAM;AAAA,IACJ,UAAU;AAAA,IACV;AAAA,IACA;AAAA,MACE,oBAAoB,QAAW;AAAA,IACjC,aAAa;AAAA;AAGf,QAAM,cAAc,mBAAmB,YAAY,UAAU;AAE7D,QAAM,EAAE,oBAAoB;AAE5B,QAAM,8BAA8B,CAAC,MAAM;AACzC,MAAE;AACF;AACA,gBAAY,UAAU;AAAA;AAExB,QAAM,sBAAsB,CAAC,MAAM;AACjC,QAAI;AAAS,cAAQ;AAAA;AAEvB,QAAM,2BAA2B,MAAM;AACrC,sBAAkB;AAClB;AACA,gBAAY,UAAU;AAAA;AAGxB,QAAM,yBAAyB,MAAM;AACnC;AACA,gBAAY,UAAU;AAAA;AAGxB,QAAM,qBAAqB,YAAY,MAAM;AAC3C,sBAAkB;AAAA,KACjB;AAEH,QAAM,qBAAqB,YAAY,MAAM;AAC3C,sBAAkB;AAAA,KACjB;AAEH,QAAM,gBACJ,gBAAgB,UACZ;AAAA,IACE,cAAc;AAAA,IACd,cAAc,MAAM;AAClB;AACA,wBAAkB;AAAA;AAAA,MAGtB,EAAE,SAAS;AAEjB,QAAM,aACJ,mBAAmB,YACjB,qCAAC,UAAD;AAAA,IACE,cAAW;AAAA,IACX,eAAY;AAAA,IACZ,YAAW;AAAA,IACX,UACE,qCAAC,iBAAD;AAAA,MACE,WAAU;AAAA,MACV,OAAO,WAAW,iBAAiB,CAAC,iBAAiB,OAAO,CAAC,WAAW;AAAA,MACxE,MAAK;AAAA;AAAA,IAGT,SAAS,CAAC,MAAM,4BAA4B;AAAA,IAC5C,MAAK;AAAA,IACL,SAAS,eAAe;AAAA,OAG1B,qCAAC,kBAAD,MACE,qCAAC,mBAAD;AAAA,IACE,eAAY;AAAA,IACZ,WAAU;AAAA,IACV,OAAO,WAAW,iBAAiB,CAAC,iBAAiB,OAAO,CAAC,WAAW;AAAA,IACxE,MAAK;AAAA;AAKb,SACE,4DACE,qCAAC,UAAD;AAAA,IACE,kBACE,qCAAC,MAAD;AAAA,MACE,kBAAkB;AAAA,QAChB,WAAW,CAAC,MAAM,gBAAgB,QAAQ,UAAU;AAAA;AAAA,MAEtD,aAAa,YAAY;AAAA,MACzB,kBAAkB;AAAA,SACd;AAAA,MACJ;AAAA,MACA;AAAA,OAEC;AAAA,IAGL;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ,CAAC,YAAa,UAAU,WAAW;AAAA,IAC3C,WAAU;AAAA,IACV,WAAW;AAAA,IACX,kBACE,qCAAC,UAAD;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,cAAc;AAAA,SACV;AAAA,MACJ,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,gBAAgB,EAAE,QAAQ,WAAW,EAAE,YAAY,IAAI;AACnE;AAAA;AAAA;AAAA,MAGJ;AAAA,SACI;AAAA;AAAA;AAAA;AAQhB,MAAM,QAAQ;AAAA,EAEZ,SAAS,UAAU,KAAK,YAAY;AAAA,EAEpC,WAAW,UAAU,KAAK,YAAY;AAAA,EAEtC,OAAO,UAAU,OAAO,YAAY;AAAA,EAEpC,iBAAiB,UAAU,MAAM,cAAc,YAAY;AAAA,EAE3D,UAAU,UAAU,UAAU,CAAC,UAAU,OAAO,UAAU,OAAO,YAAY;AAAA,EAE7E,gBAAgB,UAAU,MAAM,CAAC,aAAa,YAAY;AAAA,EAC1D,uBAAuB,UAAU,KAAK,YAAY;AAAA,EAElD,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAE7C,gBAAgB,UAAU,KAAK,YAAY;AAAA,EAE3C,SAAS,UAAU,KAAK,YAAY;AAAA,EACpC,WAAW,UAAU,IAAI,YAAY;AAAA,EAErC,IAAI,UAAU,OAAO,YAAY;AAAA;AAGnC,QAAQ,YAAY;AACpB,iBAAiB,WAAW;AAE5B,MAAM,sBAAsB,SAAS;AAErC,oBAAoB,YAAY;AAGhC,IAAO,kBAAQ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-menu",
-  "version": "2.3.0-alpha.3",
+  "version": "2.3.0-alpha.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Menu",
   "module": "./esm/index.js",
@@ -86,6 +86,10 @@
     "./Menu": {
       "import": "./esm/Menu.js",
       "require": "./cjs/Menu.js"
+    },
+    "./DSMenu": {
+      "import": "./esm/DSMenu.js",
+      "require": "./cjs/DSMenu.js"
     }
   },
   "sideEffects": [
@@ -108,16 +112,16 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.0-alpha.3",
-    "@elliemae/ds-classnames": "2.3.0-alpha.3",
-    "@elliemae/ds-form": "2.3.0-alpha.3",
-    "@elliemae/ds-hidden": "2.3.0-alpha.3",
-    "@elliemae/ds-icons": "2.3.0-alpha.3",
-    "@elliemae/ds-popper": "2.3.0-alpha.3",
-    "@elliemae/ds-separator": "2.3.0-alpha.3",
-    "@elliemae/ds-shared": "2.3.0-alpha.3",
-    "@elliemae/ds-truncated-tooltip-text": "2.3.0-alpha.3",
-    "@elliemae/ds-utilities": "2.3.0-alpha.3",
+    "@elliemae/ds-button": "2.3.0-alpha.4",
+    "@elliemae/ds-classnames": "2.3.0-alpha.4",
+    "@elliemae/ds-form": "2.3.0-alpha.4",
+    "@elliemae/ds-hidden": "2.3.0-alpha.4",
+    "@elliemae/ds-icons": "2.3.0-alpha.4",
+    "@elliemae/ds-popper": "2.3.0-alpha.4",
+    "@elliemae/ds-separator": "2.3.0-alpha.4",
+    "@elliemae/ds-shared": "2.3.0-alpha.4",
+    "@elliemae/ds-truncated-tooltip-text": "2.3.0-alpha.4",
+    "@elliemae/ds-utilities": "2.3.0-alpha.4",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-spring": "~8.0.27",

package/types/DSMenu.d.ts

@@ -0,0 +1,9 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+declare const Menu: any;
+declare const DSMenuWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export { DSMenuWithSchema, Menu };

package/types/Menu.d.ts

@@ -1,12 +1,5 @@
-/// <reference path="../../../../shared/typings/react-desc.d.ts" />
-/// <reference types="react" />
 import { menuItemFactory } from './MenuItems/menuItemFactory';
 import { renderMenuItems } from './MenuItems/renderMenuItems';
-declare const Menu: any;
-declare const DSMenuWithSchema: {
-    (props?: unknown): JSX.Element;
-    propTypes: unknown;
-    toTypescript: () => import("react-desc").TypescriptSchema;
-};
+import { DSMenuWithSchema, Menu } from './DSMenu';
 export { menuItemFactory, renderMenuItems, DSMenuWithSchema, Menu };
 export default Menu;

package/types/MenuExports.d.ts

@@ -1 +1 @@
-export * from './Menu';
+export { DSMenuWithSchema, Menu } from './Menu';