@elliemae/ds-menu 2.2.0-alpha.2 → 2.2.0-beta.0

package/esm/MenuItems/SubMenu.js

@@ -1,35 +1,45 @@
-import * as React from "react";
-import React2, { useCallback, useRef, useState } from "react";
-import { PropTypes, describe } from "react-desc";
-import { ChevronSmallRight, MoreOptionsVert } from "@elliemae/ds-icons";
-import { useFocusGroupItem } from "@elliemae/ds-shared/FocusGroup";
-import { useHiddenController } from "@elliemae/ds-hidden";
-import { DSButton, BUTTON_VARIANT } from "@elliemae/ds-button";
-import { DSPopper, interactions } from "@elliemae/ds-popper";
-import styled from "styled-components";
-import { Menu } from "../Menu";
-import { MenuItem } from "./MenuItem";
-import { registerMenuItem } from "./menuItemFactory";
-const ChevronRightComp = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 28px; // same width as the ellipsis button
-`;
-const SubMenu = ({
-  noAddon,
-  leftAddon = void 0,
-  label = void 0,
-  interactionType = "hover",
-  children: subitems,
-  rightAddonType,
-  disabledAddonInactive,
-  checkableProps = {},
-  customRenderer,
-  onClick,
-  closeMenu,
-  id
-}) => {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState, useCallback } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import { MoreOptionsVert, ChevronSmallRight } from '@elliemae/ds-icons';
+import { useFocusGroupItem } from '@elliemae/ds-shared/FocusGroup';
+import { useHiddenController } from '@elliemae/ds-hidden';
+import DSButton, { BUTTON_VARIANT } from '@elliemae/ds-button';
+import DSPopper, { interactions } from '@elliemae/ds-popper';
+import styled from 'styled-components';
+import { Menu } from '../Menu.js';
+import MenuItem from './MenuItem.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const ChevronRightComp = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1qhp1z-0"
+})(["display:flex;justify-content:center;align-items:center;width:28px;"]);
+
+function SubMenu(_ref) {
+  let {
+    noAddon,
+    leftAddon = undefined,
+    label = undefined,
+    interactionType = 'hover',
+    children: subitems,
+    rightAddonType,
+    disabledAddonInactive,
+    checkableProps = {},
+    customRenderer,
+    onClick,
+    closeMenu,
+    id
+  } = _ref;
   const itemRef = useRef(null);
   const focusOnOpen = useRef(false);
   const [isAddonHovered, setIsAddonHovered] = useState(false);
@@ -37,121 +47,144 @@ const SubMenu = ({
     visible = false,
     onShow,
     onHide
-  } = useHiddenController(void 0, {
-    interaction: "click"
+  } = useHiddenController(undefined, {
+    interaction: 'click'
   });
-  const interaction = rightAddonType === "elipsis" ? "click" : "hover";
-  const { focusItemByNode } = useFocusGroupItem();
-  const handleShowSubItemsWithMouse = (e) => {
+  const interaction = rightAddonType === 'elipsis' ? 'click' : 'hover';
+  const {
+    focusItemByNode
+  } = useFocusGroupItem(); // todo: create a menu state to handle all related menu things
+
+  const handleShowSubItemsWithMouse = e => {
     e.stopPropagation();
     onShow();
     focusOnOpen.current = true;
   };
-  const handleShowWithMouse = (e) => {
-    if (onClick)
-      onClick(e);
+
+  const handleShowWithMouse = e => {
+    if (onClick) onClick(e);
   };
+
   const handleShowWithMouseHover = () => {
     setIsAddonHovered(true);
     onShow();
     focusOnOpen.current = false;
   };
+
   const handleShowWithKeyboard = () => {
     onShow();
     focusOnOpen.current = true;
   };
+
   const handleOnMouseEnter = useCallback(() => {
     setIsAddonHovered(true);
   }, []);
   const handleOnMouseLeave = useCallback(() => {
     setIsAddonHovered(false);
   }, []);
-  const hoverHandlers = interaction === "hover" ? {
+  const hoverHandlers = interaction === 'hover' ? {
     onMouseEnter: handleShowWithMouseHover,
     onMouseLeave: () => {
       onHide();
       setIsAddonHovered(false);
     }
-  } : { onClick: handleShowWithMouse };
-  const rightAddon = rightAddonType === "elipsis" ? /* @__PURE__ */ React2.createElement(DSButton, {
+  } : {
+    onClick: handleShowWithMouse
+  };
+  const rightAddon = rightAddonType === 'elipsis' ? /*#__PURE__*/_jsx(DSButton, {
     "aria-label": "vertical-elipsis",
     "data-testid": "vertical-elipsis",
     buttonType: "text",
-    leftIcon: /* @__PURE__ */ React2.createElement(MoreOptionsVert, {
+    leftIcon: /*#__PURE__*/_jsx(MoreOptionsVert, {
       className: "submenu-arrow",
-      color: visible || isAddonHovered ? ["brand-primary", 800] : ["neutral", 500],
+      color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
       size: "s"
     }),
-    onClick: (e) => handleShowSubItemsWithMouse(e),
+    onClick: e => handleShowSubItemsWithMouse(e),
     size: "m",
     variant: BUTTON_VARIANT.DEFAULT
-  }) : /* @__PURE__ */ React2.createElement(ChevronRightComp, null, /* @__PURE__ */ React2.createElement(ChevronSmallRight, {
+  }) : /*#__PURE__*/_jsx(ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx(ChevronSmallRight, {
     "data-testid": "chevron-right",
     className: "submenu-arrow",
-    color: visible || isAddonHovered ? ["brand-primary", 800] : ["neutral", 500],
+    color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
     size: "sm"
   }));
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DSPopper, {
-    contentComponent: /* @__PURE__ */ React2.createElement(Menu, {
-      focusKeyBindings: {
-        ArrowLeft: [() => focusItemByNode(itemRef.current), "exit"]
-      },
-      focusOnOpen: focusOnOpen.current,
-      onExitFocusGroup: onHide,
-      ...hoverHandlers,
-      closeMenu,
-      visible
-    }, subitems),
-    interactionType,
-    isOpen: visible,
-    onOpen: (opening) => opening ? onShow() : onHide(),
-    placement: "right-start",
-    showArrow: false,
-    triggerComponent: /* @__PURE__ */ React2.createElement(MenuItem, {
-      customRenderer,
-      disabledAddonInactive,
-      id,
-      innerRef: itemRef,
-      label,
-      leftAddon,
-      noAddon,
-      onFocus: handleOnMouseEnter,
-      onBlur: handleOnMouseLeave,
-      onMouseEnter: handleOnMouseEnter,
-      onMouseLeave: handleOnMouseLeave,
-      ...hoverHandlers,
-      onKeyDown: (e) => {
-        if (e.key === "ArrowRight" || e.key === "Enter" || e.keyCode === 32) {
-          handleShowWithKeyboard();
-        }
-      },
-      rightAddon,
-      ...checkableProps
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/_jsx(DSPopper, {
+      contentComponent: /*#__PURE__*/jsx(Menu, _objectSpread(_objectSpread({
+        focusKeyBindings: {
+          ArrowLeft: [() => focusItemByNode(itemRef.current), 'exit']
+        },
+        focusOnOpen: focusOnOpen.current,
+        onExitFocusGroup: onHide
+      }, hoverHandlers), {}, {
+        closeMenu: closeMenu,
+        visible: visible,
+        children: subitems
+      })),
+      interactionType: interactionType,
+      isOpen: visible,
+      onOpen: opening => opening ? onShow() : onHide(),
+      placement: "right-start",
+      showArrow: false,
+      triggerComponent: /*#__PURE__*/jsx(MenuItem, _objectSpread(_objectSpread({
+        customRenderer: customRenderer,
+        disabledAddonInactive: disabledAddonInactive,
+        id: id,
+        innerRef: itemRef,
+        label: label,
+        leftAddon: leftAddon,
+        noAddon: noAddon,
+        onFocus: handleOnMouseEnter,
+        onBlur: handleOnMouseLeave,
+        onMouseEnter: handleOnMouseEnter,
+        onMouseLeave: handleOnMouseLeave
+      }, hoverHandlers), {}, {
+        onKeyDown: e => {
+          if (e.key === 'ArrowRight' || e.key === 'Enter' || e.keyCode === 32) {
+            handleShowWithKeyboard();
+          }
+        },
+        rightAddon: rightAddon
+      }, checkableProps))
     })
-  }));
-};
+  });
+}
+
 const props = {
-  noAddon: PropTypes.bool.description("dont show addon for submenu"),
-  leftAddon: PropTypes.node.description("left addon"),
-  label: PropTypes.string.description("submenu label"),
-  interactionType: PropTypes.oneOf(interactions).description("A type indicating how to open/close the tooltip"),
-  children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]).description("sub menu items"),
-  rightAddonType: PropTypes.oneOf(["ellipsis"]).description("right addon, ellipsis or undefined"),
-  disabledAddonInactive: PropTypes.bool.description(""),
-  checkableProps: PropTypes.object.description("props passed to MenuItem component"),
-  customRenderer: PropTypes.func.description("custom renderer for menu item"),
-  onClick: PropTypes.func.description("on click handler"),
-  closeMenu: PropTypes.any.description(""),
-  id: PropTypes.string.description("component id")
+  /** dont show addon for submenu */
+  noAddon: PropTypes.bool.description('dont show addon for submenu'),
+
+  /** left addon */
+  leftAddon: PropTypes.node.description('left addon'),
+
+  /** submenu label */
+  label: PropTypes.string.description('submenu label'),
+
+  /** A type indicating how to open/close the tooltip */
+  interactionType: PropTypes.oneOf(interactions).description('A type indicating how to open/close the tooltip'),
+
+  /** sub menu items */
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.node]).description('sub menu items'),
+
+  /** right addon, ellipsis or undefined */
+  rightAddonType: PropTypes.oneOf(['ellipsis']).description('right addon, ellipsis or undefined'),
+  disabledAddonInactive: PropTypes.bool.description(''),
+
+  /** props passed to MenuItem component */
+  checkableProps: PropTypes.object.description('props passed to MenuItem component'),
+
+  /** custom renderer for menu item */
+  customRenderer: PropTypes.func.description('custom renderer for menu item'),
+
+  /** on click handler */
+  onClick: PropTypes.func.description('on click handler'),
+  closeMenu: PropTypes.any.description(''),
+
+  /** component id */
+  id: PropTypes.string.description('component id')
 };
-SubMenu.propTypes = props;
-registerMenuItem("submenu", SubMenu);
 const DSSubMenuWithSchema = describe(SubMenu);
 DSSubMenuWithSchema.propTypes = props;
-var SubMenu_default = SubMenu;
-export {
-  DSSubMenuWithSchema,
-  SubMenu,
-  SubMenu_default as default
-};
-//# sourceMappingURL=SubMenu.js.map
+
+export { DSSubMenuWithSchema, SubMenu as default };

package/esm/MenuItems/menuItemFactory.js

@@ -1,12 +1,64 @@
-import * as React from "react";
-const itemTypes = {};
-const menuItemFactory = (type = "", items, defaultItem = itemTypes.menuitem) => {
-  const itemsObject = items || itemTypes;
-  return itemsObject[type] || itemsObject[type.toLowerCase()] || defaultItem;
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { createElement } from 'react';
+import { isFunction } from '@elliemae/ds-utilities';
+import MenuSeparator from './Separator.js';
+import MenuItem from './MenuItem.js';
+import SubMenu from './SubMenu.js';
+import SelectionGroup from './SelectionGroup.js';
+import MenuItemCheckbox from './MenuItemCheckbox.js';
+import MenuItemRadio from './MenuItemRadio.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const itemTypes = () => ({
+  separator: MenuSeparator,
+  menuitem: MenuItem,
+  radio: MenuItemRadio,
+  checkbox: MenuItemCheckbox,
+  submenu: SubMenu,
+  'selection-group': SelectionGroup
+});
+
+const fallback = {
+  SelectionGroup: 'selection-group'
 };
-const registerMenuItem = (type, item) => itemTypes[type] = item;
-export {
-  menuItemFactory,
-  registerMenuItem
-};
-//# sourceMappingURL=menuItemFactory.js.map
+function menuItemFactory() {
+  let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let items = arguments.length > 1 ? arguments[1] : undefined;
+  let defaultItem = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : itemTypes().menuitem;
+  const itemsObject = items || itemTypes();
+  const parsedType = fallback[type] || type.toLowerCase();
+  return itemsObject[parsedType] || defaultItem;
+}
+function renderMenuItems(options) {
+  let factory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : menuItemFactory;
+  return options.map((option, index) => {
+    if (isFunction(option.renderer)) {
+      return option.renderer({
+        key: option.id,
+        item: option
+      });
+    }
+
+    const ItemComponent = factory(option.type);
+    const children = option.subItems && renderMenuItems(option.subItems, factory);
+    return /*#__PURE__*/createElement(ItemComponent, _objectSpread(_objectSpread({}, option), {}, {
+      key: option.id || index,
+      item: option,
+      onClick: null,
+      onMouseDown: option.onClick // onClick callback called in onMouseDown due to events order issue
+
+    }), children);
+  });
+}
+
+export { menuItemFactory, renderMenuItems };

package/esm/VirtualMenuList.js

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

package/esm/index.js

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

package/esm/utils/useHeightByAmountOfItems.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-menu",
-  "version": "2.2.0-alpha.2",
+  "version": "2.2.0-beta.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Menu",
   "module": "./esm/index.js",
@@ -39,10 +39,6 @@
       "import": "./esm/MenuItems/SearchableGroup.js",
       "require": "./cjs/MenuItems/SearchableGroup.js"
     },
-    "./MenuItems/renderMenuItems": {
-      "import": "./esm/MenuItems/renderMenuItems.js",
-      "require": "./cjs/MenuItems/renderMenuItems.js"
-    },
     "./MenuItems/RadioGroup": {
       "import": "./esm/MenuItems/RadioGroup.js",
       "require": "./cjs/MenuItems/RadioGroup.js"
@@ -71,10 +67,6 @@
       "import": "./esm/MenuItems/CheckboxGroup.js",
       "require": "./cjs/MenuItems/CheckboxGroup.js"
     },
-    "./MenuExports": {
-      "import": "./esm/MenuExports.js",
-      "require": "./cjs/MenuExports.js"
-    },
     "./MenuContext": {
       "import": "./esm/MenuContext.js",
       "require": "./cjs/MenuContext.js"
@@ -108,16 +100,16 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0-alpha.2",
-    "@elliemae/ds-classnames": "2.2.0-alpha.2",
-    "@elliemae/ds-form": "2.2.0-alpha.2",
-    "@elliemae/ds-hidden": "2.2.0-alpha.2",
-    "@elliemae/ds-icons": "2.2.0-alpha.2",
-    "@elliemae/ds-popper": "2.2.0-alpha.2",
-    "@elliemae/ds-separator": "2.2.0-alpha.2",
-    "@elliemae/ds-shared": "2.2.0-alpha.2",
-    "@elliemae/ds-truncated-tooltip-text": "2.2.0-alpha.2",
-    "@elliemae/ds-utilities": "2.2.0-alpha.2",
+    "@elliemae/ds-button": "2.2.0-beta.0",
+    "@elliemae/ds-classnames": "2.2.0-beta.0",
+    "@elliemae/ds-form": "2.2.0-beta.0",
+    "@elliemae/ds-hidden": "2.2.0-beta.0",
+    "@elliemae/ds-icons": "2.2.0-beta.0",
+    "@elliemae/ds-popper": "2.2.0-beta.0",
+    "@elliemae/ds-separator": "2.2.0-beta.0",
+    "@elliemae/ds-shared": "2.2.0-beta.0",
+    "@elliemae/ds-truncated-tooltip-text": "2.2.0-beta.0",
+    "@elliemae/ds-utilities": "2.2.0-beta.0",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-spring": "~8.0.27",

package/types/Menu.d.ts

@@ -1,29 +1,11 @@
 /// <reference path="../../../../shared/typings/react-desc.d.ts" />
-import React from 'react';
-import { menuItemFactory } from './MenuItems/menuItemFactory';
-import { renderMenuItems } from './MenuItems/renderMenuItems';
+/// <reference types="react" />
+import { renderMenuItems, menuItemFactory } from './MenuItems/menuItemFactory';
 declare const Menu: any;
 declare const DSMenuWithSchema: {
-    (props?: {
-        [x: string]: any;
-        containerProps?: {} | undefined;
-        innerRef: any;
-        as?: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "key" | keyof React.HTMLAttributes<HTMLUListElement>> & {
-            ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
-        }> | undefined;
-        children?: undefined;
-        onClickOutside?: (() => void) | undefined;
-        visible?: undefined;
-        focusOnOpen?: boolean | undefined;
-        maxOption?: number | undefined;
-        style?: {} | undefined;
-        minWidth?: undefined;
-        maxWidth?: undefined;
-        closeMenu: any;
-        responsiveHeight?: boolean | undefined;
-    } | undefined): JSX.Element;
+    (props?: unknown): JSX.Element;
     propTypes: unknown;
     toTypescript: () => import("react-desc").TypescriptSchema;
 };
-export { menuItemFactory, renderMenuItems, DSMenuWithSchema, Menu };
+export { Menu, menuItemFactory, renderMenuItems, DSMenuWithSchema };
 export default Menu;

package/types/MenuContext.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-declare const MenuContext: React.Context<unknown>;
-export { MenuContext };
-export default MenuContext;
+declare const _default: React.Context<unknown>;
+export default _default;