@fluentui/react-menu 9.0.0-alpha.8 → 9.0.0-alpha.80

package/lib/components/MenuTrigger/useTriggerElement.js

@@ -1,98 +1,179 @@
 import { __assign } from "tslib";
 import * as React from 'react';
-import { useMergedRefs, useEventCallback, shouldPreventDefaultOnKeyDown } from '@fluentui/react-utilities';
-import { getCode, keyboardKey } from '@fluentui/keyboard-key';
+import { ArrowRight, ArrowDown, ArrowLeft, Escape } from '@fluentui/keyboard-keys';
+import { applyTriggerPropsToChildren, onlyChild, shouldPreventDefaultOnKeyDown, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { useFocusFinders } from '@fluentui/react-tabster';
 import { useMenuContext } from '../../contexts/menuContext';
-import { isOutsideMenu } from '../../utils/index';
+import { useFluent } from '@fluentui/react-shared-contexts';
+import { useIsSubmenu } from '../../utils/useIsSubmenu';
+
+var noop = function () {
+  return null;
+};
 /**
  * Adds the necessary props to the trigger element
- *
- * openOnHover -> adds mouseenter/mouseleave events
- * openOnContextMenu -> removes all events except for openOnContextMenu
  */
+
+
 export var useTriggerElement = function (state) {
-    var _a;
-    var triggerRef = useMenuContext(function (context) { return context.triggerRef; });
-    var menuPopupRef = useMenuContext(function (context) { return context.menuPopupRef; });
-    var setOpen = useMenuContext(function (context) { return context.setOpen; });
-    var open = useMenuContext(function (context) { return context.open; });
-    var triggerId = useMenuContext(function (context) { return context.triggerId; });
-    var openOnHover = useMenuContext(function (context) { return context.openOnHover; });
-    var openOnContext = useMenuContext(function (context) { return context.openOnContext; });
-    var isSubmenu = useMenuContext(function (context) { return context.isSubmenu; });
-    var findFirstFocusable = useFocusFinders().findFirstFocusable;
-    var openedWithKeyboardRef = React.useRef(false);
-    React.useEffect(function () {
-        var _a;
-        if ((openedWithKeyboardRef.current && open) || (!isSubmenu && open)) {
-            var firstFocusable = findFirstFocusable(menuPopupRef.current);
-            (_a = firstFocusable) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        openedWithKeyboardRef.current = false;
-    }, [openedWithKeyboardRef, findFirstFocusable, menuPopupRef, open, isSubmenu]);
-    // TODO also need to warn on React.Fragment usage
-    var child = React.Children.only(state.children);
-    var onContextMenu = useEventCallback(function (e) {
-        var _a, _b, _c;
-        if (openOnContext) {
-            e.preventDefault();
-            setOpen(e, true);
-        }
-        (_c = (_a = child.props) === null || _a === void 0 ? void 0 : (_b = _a).onContextMenu) === null || _c === void 0 ? void 0 : _c.call(_b, e);
-    });
-    var onClick = useEventCallback(function (e) {
-        var _a, _b, _c;
-        // Click event will close the menu popup
-        // Therefore, do not propagate click events to parent popup for nested menu trigger
-        if (isSubmenu) {
-            e.stopPropagation();
-        }
-        if (!openOnContext) {
-            setOpen(e, !open);
-        }
-        (_c = (_a = child.props) === null || _a === void 0 ? void 0 : (_b = _a).onClick) === null || _c === void 0 ? void 0 : _c.call(_b, e);
-    });
-    var onKeyDown = useEventCallback(function (e) {
-        var _a, _b, _c, _d;
-        if (shouldPreventDefaultOnKeyDown(e)) {
-            e.preventDefault();
-            openedWithKeyboardRef.current = true;
-            (_a = e.target) === null || _a === void 0 ? void 0 : _a.click();
-        }
-        var keyCode = getCode(e);
-        if (!openOnContext &&
-            ((isSubmenu && keyCode === keyboardKey.ArrowRight) || (!isSubmenu && keyCode === keyboardKey.ArrowDown))) {
-            openedWithKeyboardRef.current = true;
-            setOpen(e, true);
-        }
-        (_d = (_b = child.props) === null || _b === void 0 ? void 0 : (_c = _b).onKeyDown) === null || _d === void 0 ? void 0 : _d.call(_c, e);
-    });
-    var onMouseEnter = useEventCallback(function (e) {
-        var _a, _b, _c;
-        if (openOnHover && !openOnContext) {
-            setOpen(e, true);
-        }
-        (_c = (_a = child.props) === null || _a === void 0 ? void 0 : (_b = _a).onMouseEnter) === null || _c === void 0 ? void 0 : _c.call(_b, e);
-    });
-    // no mouse leave, since mouse enter sets focus for menu items
-    var onBlur = useEventCallback(function (e) {
-        var _a, _b, _c;
-        if (isOutsideMenu({ menuPopupRef: menuPopupRef, triggerRef: triggerRef, event: e })) {
-            setOpen(e, false);
-        }
-        (_c = (_a = child.props) === null || _a === void 0 ? void 0 : (_b = _a).onBlur) === null || _c === void 0 ? void 0 : _c.call(_b, e);
-    });
-    var disabled = (_a = child.props) === null || _a === void 0 ? void 0 : _a.disabled;
-    var triggerProps = __assign(__assign({ 'aria-haspopup': true, 'aria-expanded': open, id: triggerId }, (child.props || {})), (!disabled && {
-        // These handlers should always handle the child's original handlers
-        onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        onContextMenu: onContextMenu,
-        onKeyDown: onKeyDown,
-        onBlur: onBlur,
-    }));
-    state.children = React.cloneElement(child, __assign(__assign({}, triggerProps), { ref: useMergedRefs(child.props.ref, triggerRef) }));
-    return state;
+  var _a, _b;
+
+  var triggerRef = useMenuContext(function (context) {
+    return context.triggerRef;
+  });
+  var menuPopoverRef = useMenuContext(function (context) {
+    return context.menuPopoverRef;
+  });
+  var setOpen = useMenuContext(function (context) {
+    return context.setOpen;
+  });
+  var open = useMenuContext(function (context) {
+    return context.open;
+  });
+  var triggerId = useMenuContext(function (context) {
+    return context.triggerId;
+  });
+  var openOnHover = useMenuContext(function (context) {
+    return context.openOnHover;
+  });
+  var openOnContext = useMenuContext(function (context) {
+    return context.openOnContext;
+  });
+  var isSubmenu = useIsSubmenu();
+  var findFirstFocusable = useFocusFinders().findFirstFocusable;
+  var focusFirst = React.useCallback(function () {
+    var firstFocusable = findFirstFocusable(menuPopoverRef.current);
+    firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+  }, [findFirstFocusable, menuPopoverRef]);
+  var openedWithKeyboardRef = React.useRef(false);
+  var hasMouseMoved = React.useRef(false);
+  var dir = useFluent().dir;
+  var OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;
+  var child = /*#__PURE__*/React.isValidElement(state.children) ? onlyChild(state.children) : undefined;
+  var onContextMenu = useEventCallback(function (e) {
+    var _a, _b;
+
+    if (openOnContext) {
+      e.preventDefault();
+      setOpen(e, {
+        open: true,
+        keyboard: false
+      });
+    }
+
+    (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onContextMenu) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+  });
+  var onClick = useEventCallback(function (e) {
+    var _a, _b;
+
+    if (!openOnContext) {
+      setOpen(e, {
+        open: !open,
+        keyboard: openedWithKeyboardRef.current
+      });
+      openedWithKeyboardRef.current = false;
+    }
+
+    (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+  });
+  var onKeyDown = useEventCallback(function (e) {
+    var _a, _b, _c;
+
+    if (shouldPreventDefaultOnKeyDown(e)) {
+      e.preventDefault();
+      openedWithKeyboardRef.current = true;
+      (_a = e.target) === null || _a === void 0 ? void 0 : _a.click();
+    }
+
+    var key = e.key;
+
+    if (!openOnContext && (isSubmenu && key === OpenArrowKey || !isSubmenu && key === ArrowDown)) {
+      setOpen(e, {
+        open: true,
+        keyboard: true
+      });
+    }
+
+    if (key === Escape && !isSubmenu) {
+      setOpen(e, {
+        open: false,
+        keyboard: true
+      });
+    } // if menu is already open, can't rely on effects to focus
+
+
+    if (open && key === OpenArrowKey && isSubmenu) {
+      focusFirst();
+    }
+
+    if (open && key === ArrowDown && !isSubmenu) {
+      focusFirst();
+    }
+
+    (_c = (_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+  });
+  var onMouseEnter = useEventCallback(function (e) {
+    var _a, _b;
+
+    if (openOnHover && hasMouseMoved.current) {
+      setOpen(e, {
+        open: true,
+        keyboard: false
+      });
+    }
+
+    (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+  }); // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience
+  // First time open the mouse using mousemove and then continue with mouseenter
+  // Only use once to determine that the user is using the mouse since it is an expensive event to handle
+
+  var onMouseMove = useEventCallback(function (e) {
+    if (openOnHover && !hasMouseMoved.current) {
+      setOpen(e, {
+        open: true,
+        keyboard: false
+      });
+      hasMouseMoved.current = true;
+    }
+  });
+  var onMouseLeave = useEventCallback(function (e) {
+    var _a, _b;
+
+    if (openOnHover) {
+      setOpen(e, {
+        open: false,
+        keyboard: false
+      });
+    }
+
+    (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+  });
+  var disabled = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.disabled;
+
+  var triggerProps = __assign({
+    'aria-haspopup': true,
+    'aria-expanded': open,
+    id: ((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.id) || triggerId
+  }, !disabled ? {
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onContextMenu: onContextMenu,
+    onKeyDown: onKeyDown,
+    onMouseMove: onMouseMove
+  } : // Spread disabled event handlers to implement contract and avoid specific disabled logic in handlers
+  {
+    onClick: noop,
+    onMouseEnter: noop,
+    onMouseLeave: noop,
+    onContextMenu: noop,
+    onKeyDown: noop,
+    onMouseMove: noop
+  });
+
+  state.children = applyTriggerPropsToChildren(state.children, __assign(__assign({}, triggerProps), {
+    ref: useMergedRefs(typeof state.children !== 'function' && state.children.ref || null, triggerRef)
+  }));
+  return state;
 };
 //# sourceMappingURL=useTriggerElement.js.map

package/lib/components/MenuTrigger/useTriggerElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTriggerElement.js","sourceRoot":"../src/","sources":["components/MenuTrigger/useTriggerElement.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useMergedRefs, useEventCallback, shouldPreventDefaultOnKeyDown } from '@fluentui/react-utilities';\nimport { getCode, keyboardKey } from '@fluentui/keyboard-key';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext } from '../../contexts/menuContext';\nimport { isOutsideMenu } from '../../utils/index';\n\n// Helper type to select on parts of state the hook uses\ntype UseTriggerElementState = Pick<MenuTriggerState, 'children'>;\n\n/**\n * Adds the necessary props to the trigger element\n *\n * openOnHover -> adds mouseenter/mouseleave events\n * openOnContextMenu -> removes all events except for openOnContextMenu\n */\nexport const useTriggerElement = (state: UseTriggerElementState): MenuTriggerState => {\n  const triggerRef = useMenuContext(context => context.triggerRef);\n  const menuPopupRef = useMenuContext(context => context.menuPopupRef);\n  const setOpen = useMenuContext(context => context.setOpen);\n  const open = useMenuContext(context => context.open);\n  const triggerId = useMenuContext(context => context.triggerId);\n  const openOnHover = useMenuContext(context => context.openOnHover);\n  const openOnContext = useMenuContext(context => context.openOnContext);\n  const isSubmenu = useMenuContext(context => context.isSubmenu);\n\n  const { findFirstFocusable } = useFocusFinders();\n  const openedWithKeyboardRef = React.useRef(false);\n  React.useEffect(() => {\n    if ((openedWithKeyboardRef.current && open) || (!isSubmenu && open)) {\n      const firstFocusable = findFirstFocusable(menuPopupRef.current);\n      firstFocusable?.focus();\n    }\n\n    openedWithKeyboardRef.current = false;\n  }, [openedWithKeyboardRef, findFirstFocusable, menuPopupRef, open, isSubmenu]);\n\n  // TODO also need to warn on React.Fragment usage\n  const child = React.Children.only(state.children);\n\n  const onContextMenu = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, true);\n    }\n    child.props?.onContextMenu?.(e);\n  });\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    // Click event will close the menu popup\n    // Therefore, do not propagate click events to parent popup for nested menu trigger\n    if (isSubmenu) {\n      e.stopPropagation();\n    }\n\n    if (!openOnContext) {\n      setOpen(e, !open);\n    }\n    child.props?.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    if (shouldPreventDefaultOnKeyDown(e)) {\n      e.preventDefault();\n      openedWithKeyboardRef.current = true;\n      (e.target as HTMLElement)?.click();\n    }\n\n    const keyCode = getCode(e);\n    if (\n      !openOnContext &&\n      ((isSubmenu && keyCode === keyboardKey.ArrowRight) || (!isSubmenu && keyCode === keyboardKey.ArrowDown))\n    ) {\n      openedWithKeyboardRef.current = true;\n      setOpen(e, true);\n    }\n\n    child.props?.onKeyDown?.(e);\n  });\n\n  const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover && !openOnContext) {\n      setOpen(e, true);\n    }\n    child.props?.onMouseEnter?.(e);\n  });\n\n  // no mouse leave, since mouse enter sets focus for menu items\n  const onBlur = useEventCallback((e: React.FocusEvent<HTMLElement>) => {\n    if (isOutsideMenu({ menuPopupRef, triggerRef, event: e })) {\n      setOpen(e, false);\n    }\n\n    child.props?.onBlur?.(e);\n  });\n\n  const disabled = child.props?.disabled;\n  const triggerProps: Partial<React.HTMLAttributes<HTMLElement>> = {\n    'aria-haspopup': true,\n    'aria-expanded': open,\n    id: triggerId,\n    ...(child.props || {}),\n\n    // These handlers should always handle the child's props\n    ...(!disabled && {\n      // These handlers should always handle the child's original handlers\n      onClick,\n      onMouseEnter,\n      onContextMenu,\n      onKeyDown,\n      onBlur,\n    }),\n  };\n\n  state.children = React.cloneElement(child, {\n    ...triggerProps,\n    ref: useMergedRefs(child.props.ref, triggerRef),\n  });\n\n  return state as MenuTriggerState;\n};\n"]}
+{"version":3,"sources":["components/MenuTrigger/useTriggerElement.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ArrowRight, ArrowDown, ArrowLeft, Escape } from '@fluentui/keyboard-keys';\nimport {\n  applyTriggerPropsToChildren,\n  onlyChild,\n  shouldPreventDefaultOnKeyDown,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useMenuContext } from '../../contexts/menuContext';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport type { MenuTriggerChildProps, MenuTriggerState } from './MenuTrigger.types';\n\nconst noop = () => null;\n\n/**\n * Adds the necessary props to the trigger element\n */\nexport const useTriggerElement = (state: MenuTriggerState): MenuTriggerState => {\n  const triggerRef = useMenuContext(context => context.triggerRef);\n  const menuPopoverRef = useMenuContext(context => context.menuPopoverRef);\n  const setOpen = useMenuContext(context => context.setOpen);\n  const open = useMenuContext(context => context.open);\n  const triggerId = useMenuContext(context => context.triggerId);\n  const openOnHover = useMenuContext(context => context.openOnHover);\n  const openOnContext = useMenuContext(context => context.openOnContext);\n  const isSubmenu = useIsSubmenu();\n  const { findFirstFocusable } = useFocusFinders();\n  const focusFirst = React.useCallback(() => {\n    const firstFocusable = findFirstFocusable(menuPopoverRef.current);\n    firstFocusable?.focus();\n  }, [findFirstFocusable, menuPopoverRef]);\n\n  const openedWithKeyboardRef = React.useRef(false);\n  const hasMouseMoved = React.useRef(false);\n\n  const { dir } = useFluent();\n  const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;\n\n  const child = React.isValidElement(state.children) ? onlyChild(state.children) : undefined;\n\n  const onContextMenu = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, { open: true, keyboard: false });\n    }\n\n    child?.props?.onContextMenu?.(e);\n  });\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (!openOnContext) {\n      setOpen(e, { open: !open, keyboard: openedWithKeyboardRef.current });\n      openedWithKeyboardRef.current = false;\n    }\n\n    child?.props?.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    if (shouldPreventDefaultOnKeyDown(e)) {\n      e.preventDefault();\n      openedWithKeyboardRef.current = true;\n      (e.target as HTMLElement)?.click();\n    }\n\n    const key = e.key;\n\n    if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n      setOpen(e, { open: true, keyboard: true });\n    }\n\n    if (key === Escape && !isSubmenu) {\n      setOpen(e, { open: false, keyboard: true });\n    }\n\n    // if menu is already open, can't rely on effects to focus\n    if (open && key === OpenArrowKey && isSubmenu) {\n      focusFirst();\n    }\n\n    if (open && key === ArrowDown && !isSubmenu) {\n      focusFirst();\n    }\n\n    child?.props?.onKeyDown?.(e);\n  });\n\n  const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover && hasMouseMoved.current) {\n      setOpen(e, { open: true, keyboard: false });\n    }\n\n    child?.props?.onMouseEnter?.(e);\n  });\n\n  // Opening a menu when a mouse hasn't moved and just entering the trigger is a bad a11y experience\n  // First time open the mouse using mousemove and then continue with mouseenter\n  // Only use once to determine that the user is using the mouse since it is an expensive event to handle\n  const onMouseMove = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover && !hasMouseMoved.current) {\n      setOpen(e, { open: true, keyboard: false });\n      hasMouseMoved.current = true;\n    }\n  });\n\n  const onMouseLeave = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, { open: false, keyboard: false });\n    }\n\n    child?.props?.onMouseLeave?.(e);\n  });\n\n  const disabled = child?.props?.disabled;\n  const triggerProps: MenuTriggerChildProps = {\n    'aria-haspopup': true,\n    'aria-expanded': open,\n    id: child?.props?.id || triggerId,\n\n    ...(!disabled\n      ? {\n          onClick,\n          onMouseEnter,\n          onMouseLeave,\n          onContextMenu,\n          onKeyDown,\n          onMouseMove,\n        }\n      : // Spread disabled event handlers to implement contract and avoid specific disabled logic in handlers\n        {\n          onClick: noop,\n          onMouseEnter: noop,\n          onMouseLeave: noop,\n          onContextMenu: noop,\n          onKeyDown: noop,\n          onMouseMove: noop,\n        }),\n  };\n\n  state.children = applyTriggerPropsToChildren(state.children, {\n    ...triggerProps,\n    ref: useMergedRefs((typeof state.children !== 'function' && state.children.ref) || null, triggerRef),\n  }) as React.ReactElement;\n\n  return state as MenuTriggerState;\n};\n"],"sourceRoot":"../src/"}

package/lib/contexts/menuContext.d.ts

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import { ContextSelector } from '@fluentui/react-context-selector';
-import { MenuListProps } from '../components/index';
-import { MenuState } from '../components/Menu/index';
+import type { ContextSelector, Context } from '@fluentui/react-context-selector';
+import type { MenuListProps } from '../components/index';
+import type { MenuState } from '../components/Menu/index';
+export declare const MenuContext: Context<MenuContextValue>;
 /**
  * Context shared between Menu and its children components
  *
  * Extends and drills down MenuList props to simplify API
  */
-export interface MenuContextValue extends MenuListProps, Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopupRef' | 'setOpen' | 'isSubmenu' | 'triggerId' | 'hasIcons' | 'hasCheckmarks'> {
+export declare type MenuContextValue = MenuListProps & Pick<MenuState, 'openOnHover' | 'openOnContext' | 'triggerRef' | 'menuPopoverRef' | 'setOpen' | 'isSubmenu' | 'triggerId' | 'hasIcons' | 'hasCheckmarks' | 'persistOnItemClick' | 'inline'> & {
     open: boolean;
-    hasMenuContext: boolean;
     triggerId: string;
-}
+};
 export declare const MenuProvider: React.Provider<MenuContextValue> & React.FC<React.ProviderProps<MenuContextValue>>;
 export declare const useMenuContext: <T>(selector: ContextSelector<MenuContextValue, T>) => T;

package/lib/contexts/menuContext.js

@@ -1,22 +1,29 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
-var MenuContext = createContext({
-    open: false,
-    setOpen: function () { return false; },
-    checkedValues: {},
-    onCheckedValueChange: function () { return null; },
-    defaultCheckedValues: {},
-    hasMenuContext: false,
-    isSubmenu: false,
-    triggerRef: { current: null },
-    menuPopupRef: { current: null },
-    triggerId: '',
-    openOnContext: false,
-    openOnHover: false,
-    hasIcons: false,
-    hasCheckmarks: false,
+export var MenuContext = /*#__PURE__*/createContext({
+  open: false,
+  setOpen: function () {
+    return false;
+  },
+  checkedValues: {},
+  onCheckedValueChange: function () {
+    return null;
+  },
+  defaultCheckedValues: {},
+  isSubmenu: false,
+  triggerRef: {
+    current: null
+  },
+  menuPopoverRef: {
+    current: null
+  },
+  triggerId: '',
+  openOnContext: false,
+  openOnHover: false,
+  hasIcons: false,
+  hasCheckmarks: false
 });
 export var MenuProvider = MenuContext.Provider;
 export var useMenuContext = function (selector) {
-    return useContextSelector(MenuContext, selector);
+  return useContextSelector(MenuContext, selector);
 };
 //# sourceMappingURL=menuContext.js.map

package/lib/contexts/menuContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuContext.js","sourceRoot":"../src/","sources":["contexts/menuContext.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAmB,MAAM,kCAAkC,CAAC;AAItG,IAAM,WAAW,GAAG,aAAa,CAAmB;IAClD,IAAI,EAAE,KAAK;IACX,OAAO,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;IACpB,aAAa,EAAE,EAAE;IACjB,oBAAoB,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;IAChC,oBAAoB,EAAE,EAAE;IACxB,cAAc,EAAE,KAAK;IACrB,SAAS,EAAE,KAAK;IAChB,UAAU,EAAG,EAAE,OAAO,EAAE,IAAI,EAAqD;IACjF,YAAY,EAAG,EAAE,OAAO,EAAE,IAAI,EAAqD;IACnF,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,KAAK;IACpB,WAAW,EAAE,KAAK;IAClB,QAAQ,EAAE,KAAK;IACf,aAAa,EAAE,KAAK;CACrB,CAAC,CAAC;AA0BH,MAAM,CAAC,IAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,CAAC;AAEjD,MAAM,CAAC,IAAM,cAAc,GAAG,UAAI,QAA8C;IAC9E,OAAA,kBAAkB,CAAC,WAAW,EAAE,QAAQ,CAAC;AAAzC,CAAyC,CAAC","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport { MenuListProps } from '../components/index';\nimport { MenuState } from '../components/Menu/index';\n\nconst MenuContext = createContext<MenuContextValue>({\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  defaultCheckedValues: {},\n  hasMenuContext: false,\n  isSubmenu: false,\n  triggerRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  menuPopupRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport interface MenuContextValue\n  extends MenuListProps,\n    Pick<\n      MenuState,\n      | 'openOnHover'\n      | 'openOnContext'\n      | 'triggerRef'\n      | 'menuPopupRef'\n      | 'setOpen'\n      | 'isSubmenu'\n      | 'triggerId'\n      | 'hasIcons'\n      | 'hasCheckmarks'\n    > {\n  open: boolean;\n  hasMenuContext: boolean;\n  triggerId: string;\n}\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, selector);\n"]}
+{"version":3,"sources":["contexts/menuContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,IAAM,WAAW,gBAA8B,aAAa,CAAmB;AACpF,EAAA,IAAI,EAAE,KAD8E;AAEpF,EAAA,OAAO,EAAE,YAAA;AAAM,WAAA,KAAA;AAAK,GAFgE;AAGpF,EAAA,aAAa,EAAE,EAHqE;AAIpF,EAAA,oBAAoB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAJoD;AAKpF,EAAA,oBAAoB,EAAE,EAL8D;AAMpF,EAAA,SAAS,EAAE,KANyE;AAOpF,EAAA,UAAU,EAAG;AAAE,IAAA,OAAO,EAAE;AAAX,GAPuE;AAQpF,EAAA,cAAc,EAAG;AAAE,IAAA,OAAO,EAAE;AAAX,GARmE;AASpF,EAAA,SAAS,EAAE,EATyE;AAUpF,EAAA,aAAa,EAAE,KAVqE;AAWpF,EAAA,WAAW,EAAE,KAXuE;AAYpF,EAAA,QAAQ,EAAE,KAZ0E;AAapF,EAAA,aAAa,EAAE;AAbqE,CAAnB,CAA5D;AAwCP,OAAO,IAAM,YAAY,GAAG,WAAW,CAAC,QAAjC;AAEP,OAAO,IAAM,cAAc,GAAG,UAAI,QAAJ,EAAkD;AAC9E,SAAA,kBAAkB,CAAC,WAAD,EAAc,QAAd,CAAlB;AAAyC,CADpC","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuListProps } from '../components/index';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue>({\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  defaultCheckedValues: {},\n  isSubmenu: false,\n  triggerRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  menuPopoverRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = MenuListProps &\n  Pick<\n    MenuState,\n    | 'openOnHover'\n    | 'openOnContext'\n    | 'triggerRef'\n    | 'menuPopoverRef'\n    | 'setOpen'\n    | 'isSubmenu'\n    | 'triggerId'\n    | 'hasIcons'\n    | 'hasCheckmarks'\n    | 'persistOnItemClick'\n    | 'inline'\n  > & {\n    open: boolean;\n    triggerId: string;\n  };\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, selector);\n"],"sourceRoot":"../src/"}

package/lib/contexts/menuGroupContext.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
  * Context used to guarantee correct aria-relationship between header
  * and group information
  */
-export interface MenuGroupContextValue {
+export declare type MenuGroupContextValue = {
     /**
      * Element id applied to the `MenuGroupHeader` component
      */
     headerId: string;
-}
+};
 export declare const MenuGroupContextProvider: React.Provider<MenuGroupContextValue>;
 export declare const useMenuGroupContext: () => MenuGroupContextValue;

package/lib/contexts/menuGroupContext.js

@@ -1,5 +1,9 @@
 import * as React from 'react';
-var MenuGroupContext = React.createContext({ headerId: '' });
+var MenuGroupContext = /*#__PURE__*/React.createContext({
+  headerId: ''
+});
 export var MenuGroupContextProvider = MenuGroupContext.Provider;
-export var useMenuGroupContext = function () { return React.useContext(MenuGroupContext); };
+export var useMenuGroupContext = function () {
+  return React.useContext(MenuGroupContext);
+};
 //# sourceMappingURL=menuGroupContext.js.map

package/lib/contexts/menuGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuGroupContext.js","sourceRoot":"../src/","sources":["contexts/menuGroupContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,IAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAwB,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;AAatF,MAAM,CAAC,IAAM,wBAAwB,GAAG,gBAAgB,CAAC,QAAQ,CAAC;AAClE,MAAM,CAAC,IAAM,mBAAmB,GAAG,cAAM,OAAA,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAlC,CAAkC,CAAC","sourcesContent":["import * as React from 'react';\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue>({ headerId: '' });\n\n/**\n * Context used to guarantee correct aria-relationship between header\n * and group information\n */\nexport interface MenuGroupContextValue {\n  /**\n   * Element id applied to the `MenuGroupHeader` component\n   */\n  headerId: string;\n}\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\nexport const useMenuGroupContext = () => React.useContext(MenuGroupContext);\n"]}
+{"version":3,"sources":["contexts/menuGroupContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,IAAM,gBAAgB,gBAAG,KAAK,CAAC,aAAN,CAA2C;AAAE,EAAA,QAAQ,EAAE;AAAZ,CAA3C,CAAzB;AAaA,OAAO,IAAM,wBAAwB,GAAG,gBAAgB,CAAC,QAAlD;AACP,OAAO,IAAM,mBAAmB,GAAG,YAAA;AAAM,SAAA,KAAK,CAAC,UAAN,CAAA,gBAAA,CAAA;AAAkC,CAApE","sourcesContent":["import * as React from 'react';\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue>({ headerId: '' });\n\n/**\n * Context used to guarantee correct aria-relationship between header\n * and group information\n */\nexport type MenuGroupContextValue = {\n  /**\n   * Element id applied to the `MenuGroupHeader` component\n   */\n  headerId: string;\n};\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\nexport const useMenuGroupContext = () => React.useContext(MenuGroupContext);\n"],"sourceRoot":"../src/"}

package/lib/contexts/menuListContext.d.ts

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { ContextSelector } from '@fluentui/react-context-selector';
-import { SelectableHandler } from '../selectable/index';
-import { MenuListProps } from '../components/index';
+import type { ContextSelector, Context } from '@fluentui/react-context-selector';
+import type { SelectableHandler } from '../selectable/index';
+import type { MenuListProps } from '../components/index';
+export declare const MenuListContext: Context<MenuListContextValue>;
 /**
  * Context shared between MenuList and its children components
  */
-export interface MenuListContextValue extends Pick<MenuListProps, 'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'> {
+export declare type MenuListContextValue = Pick<MenuListProps, 'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'> & {
     setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;
     toggleCheckbox?: SelectableHandler;
     selectRadio?: SelectableHandler;
-}
+};
 export declare const MenuListProvider: React.Provider<MenuListContextValue> & React.FC<React.ProviderProps<MenuListContextValue>>;
 export declare const useMenuListContext: <T>(selector: ContextSelector<MenuListContextValue, T>) => T;

package/lib/contexts/menuListContext.js

@@ -1,15 +1,23 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
-var MenuListContext = createContext({
-    checkedValues: {},
-    onCheckedValueChange: function () { return null; },
-    setFocusByFirstCharacter: function () { return null; },
-    toggleCheckbox: function () { return null; },
-    selectRadio: function () { return null; },
-    hasIcons: false,
-    hasCheckmarks: false,
+export var MenuListContext = /*#__PURE__*/createContext({
+  checkedValues: {},
+  onCheckedValueChange: function () {
+    return null;
+  },
+  setFocusByFirstCharacter: function () {
+    return null;
+  },
+  toggleCheckbox: function () {
+    return null;
+  },
+  selectRadio: function () {
+    return null;
+  },
+  hasIcons: false,
+  hasCheckmarks: false
 });
 export var MenuListProvider = MenuListContext.Provider;
 export var useMenuListContext = function (selector) {
-    return useContextSelector(MenuListContext, selector);
+  return useContextSelector(MenuListContext, selector);
 };
 //# sourceMappingURL=menuListContext.js.map

package/lib/contexts/menuListContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuListContext.js","sourceRoot":"../src/","sources":["contexts/menuListContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAmB,MAAM,kCAAkC,CAAC;AAItG,IAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,aAAa,EAAE,EAAE;IACjB,oBAAoB,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;IAChC,wBAAwB,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;IACpC,cAAc,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;IAC1B,WAAW,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;IACvB,QAAQ,EAAE,KAAK;IACf,aAAa,EAAE,KAAK;CACrB,CAAC,CAAC;AAYH,MAAM,CAAC,IAAM,gBAAgB,GAAG,eAAe,CAAC,QAAQ,CAAC;AAEzD,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAK,QAAkD;IACvF,OAAA,kBAAkB,CAAC,eAAe,EAAE,QAAQ,CAAC;AAA7C,CAA6C,CAAC","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector, ContextSelector } from '@fluentui/react-context-selector';\nimport { SelectableHandler } from '../selectable/index';\nimport { MenuListProps } from '../components/index';\n\nconst MenuListContext = createContext<MenuListContextValue>({\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  setFocusByFirstCharacter: () => null,\n  toggleCheckbox: () => null,\n  selectRadio: () => null,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between MenuList and its children components\n */\nexport interface MenuListContextValue\n  extends Pick<MenuListProps, 'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'> {\n  setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n  toggleCheckbox?: SelectableHandler;\n  selectRadio?: SelectableHandler;\n}\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext = <T,>(selector: ContextSelector<MenuListContextValue, T>) =>\n  useContextSelector(MenuListContext, selector);\n"]}
+{"version":3,"sources":["contexts/menuListContext.tsx"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,IAAM,eAAe,gBAAkC,aAAa,CAAuB;AAChG,EAAA,aAAa,EAAE,EADiF;AAEhG,EAAA,oBAAoB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAFgE;AAGhG,EAAA,wBAAwB,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAH4D;AAIhG,EAAA,cAAc,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GAJsE;AAKhG,EAAA,WAAW,EAAE,YAAA;AAAM,WAAA,IAAA;AAAI,GALyE;AAMhG,EAAA,QAAQ,EAAE,KANsF;AAOhG,EAAA,aAAa,EAAE;AAPiF,CAAvB,CAApE;AAsBP,OAAO,IAAM,gBAAgB,GAAG,eAAe,CAAC,QAAzC;AAEP,OAAO,IAAM,kBAAkB,GAAG,UAAK,QAAL,EAAuD;AACvF,SAAA,kBAAkB,CAAC,eAAD,EAAkB,QAAlB,CAAlB;AAA6C,CADxC","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SelectableHandler } from '../selectable/index';\nimport type { MenuListProps } from '../components/index';\n\nexport const MenuListContext: Context<MenuListContextValue> = createContext<MenuListContextValue>({\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  setFocusByFirstCharacter: () => null,\n  toggleCheckbox: () => null,\n  selectRadio: () => null,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between MenuList and its children components\n */\nexport type MenuListContextValue = Pick<\n  MenuListProps,\n  'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'\n> & {\n  setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n  toggleCheckbox?: SelectableHandler;\n  selectRadio?: SelectableHandler;\n};\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext = <T,>(selector: ContextSelector<MenuListContextValue, T>) =>\n  useContextSelector(MenuListContext, selector);\n"],"sourceRoot":"../src/"}

package/lib/contexts/menuTriggerContext.js

@@ -2,7 +2,10 @@ import * as React from 'react';
 /**
  * Context used communicate with child that it is a trigger for a menu
  */
-var MenuTriggerContext = React.createContext(false);
+
+var MenuTriggerContext = /*#__PURE__*/React.createContext(false);
 export var MenuTriggerContextProvider = MenuTriggerContext.Provider;
-export var useMenuTriggerContext = function () { return React.useContext(MenuTriggerContext); };
+export var useMenuTriggerContext = function () {
+  return React.useContext(MenuTriggerContext);
+};
 //# sourceMappingURL=menuTriggerContext.js.map

package/lib/contexts/menuTriggerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuTriggerContext.js","sourceRoot":"../src/","sources":["contexts/menuTriggerContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,IAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAU,KAAK,CAAC,CAAC;AAE/D,MAAM,CAAC,IAAM,0BAA0B,GAAG,kBAAkB,CAAC,QAAQ,CAAC;AACtE,MAAM,CAAC,IAAM,qBAAqB,GAAG,cAAM,OAAA,KAAK,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAApC,CAAoC,CAAC","sourcesContent":["import * as React from 'react';\n\n/**\n * Context used communicate with child that it is a trigger for a menu\n */\nconst MenuTriggerContext = React.createContext<boolean>(false);\n\nexport const MenuTriggerContextProvider = MenuTriggerContext.Provider;\nexport const useMenuTriggerContext = () => React.useContext(MenuTriggerContext);\n"]}
+{"version":3,"sources":["contexts/menuTriggerContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA;;AAEG;;AACH,IAAM,kBAAkB,gBAAG,KAAK,CAAC,aAAN,CAA6B,KAA7B,CAA3B;AAEA,OAAO,IAAM,0BAA0B,GAAG,kBAAkB,CAAC,QAAtD;AACP,OAAO,IAAM,qBAAqB,GAAG,YAAA;AAAM,SAAA,KAAK,CAAC,UAAN,CAAA,kBAAA,CAAA;AAAoC,CAAxE","sourcesContent":["import * as React from 'react';\n\n/**\n * Context used communicate with child that it is a trigger for a menu\n */\nconst MenuTriggerContext = React.createContext<boolean>(false);\n\nexport const MenuTriggerContextProvider = MenuTriggerContext.Provider;\nexport const useMenuTriggerContext = () => React.useContext(MenuTriggerContext);\n"],"sourceRoot":"../src/"}

package/lib/index.d.ts

@@ -12,3 +12,4 @@ export * from './contexts/menuContext';
 export * from './contexts/menuTriggerContext';
 export * from './contexts/menuGroupContext';
 export * from './contexts/menuListContext';
+export * from './MenuPopover';

package/lib/index.js

@@ -12,4 +12,5 @@ export * from './contexts/menuContext';
 export * from './contexts/menuTriggerContext';
 export * from './contexts/menuGroupContext';
 export * from './contexts/menuListContext';
+export * from './MenuPopover';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './MenuItem';\nexport * from './MenuList';\nexport * from './MenuItemCheckbox';\nexport * from './MenuItemRadio';\nexport * from './MenuDivider';\nexport * from './MenuGroupHeader';\nexport * from './MenuGroup';\nexport * from './selectable/index';\nexport * from './MenuTrigger';\nexport * from './Menu';\nexport * from './contexts/menuContext';\nexport * from './contexts/menuTriggerContext';\nexport * from './contexts/menuGroupContext';\nexport * from './contexts/menuListContext';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC","sourcesContent":["export * from './MenuItem';\nexport * from './MenuList';\nexport * from './MenuItemCheckbox';\nexport * from './MenuItemRadio';\nexport * from './MenuDivider';\nexport * from './MenuGroupHeader';\nexport * from './MenuGroup';\nexport * from './selectable/index';\nexport * from './MenuTrigger';\nexport * from './Menu';\nexport * from './contexts/menuContext';\nexport * from './contexts/menuTriggerContext';\nexport * from './contexts/menuGroupContext';\nexport * from './contexts/menuListContext';\nexport * from './MenuPopover';\n"]}

package/lib/selectable/index.js

@@ -1,2 +1,3 @@
 export * from './useCheckmarkStyles';
+export * from './types';
 //# sourceMappingURL=index.js.map

package/lib/selectable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["selectable/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './useCheckmarkStyles';\nexport * from './types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["selectable/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC","sourcesContent":["export * from './useCheckmarkStyles';\nexport * from './types';\n"]}

package/lib/selectable/types.d.ts

@@ -3,7 +3,7 @@ export declare type SelectableHandler = (e: React.MouseEvent | React.KeyboardEve
 /**
  * Props for selecatble menu items
  */
-export interface MenuItemSelectableProps extends React.HTMLAttributes<HTMLElement> {
+export declare type MenuItemSelectableProps = {
     /**
      * Follows input convention
      * https://www.w3schools.com/jsref/prop_checkbox_name.asp
@@ -14,15 +14,11 @@ export interface MenuItemSelectableProps extends React.HTMLAttributes<HTMLElemen
      * https://www.w3schools.com/jsref/prop_checkbox_value.asp
      */
     value: string;
-    /**
-     * Whether the selectable item is disabled
-     */
-    disabled?: boolean;
-}
+};
 /**
  * State for selectable menu items
  */
-export interface MenuItemSelectableState extends MenuItemSelectableProps {
+export declare type MenuItemSelectableState = MenuItemSelectableProps & {
     /**
      * Checked items for a value with `name`
      */
@@ -35,4 +31,4 @@ export interface MenuItemSelectableState extends MenuItemSelectableProps {
      * Selectable is checked
      */
     checked: boolean;
-}
+};

package/lib/selectable/types.js

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=types.js.map

package/lib/selectable/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["selectable/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type SelectableHandler = (\n  e: React.MouseEvent | React.KeyboardEvent,\n  name: string,\n  value: string,\n  checked: boolean,\n) => void;\n\n/**\n * Props for selecatble menu items\n */\nexport interface MenuItemSelectableProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Follows input convention\n   * https://www.w3schools.com/jsref/prop_checkbox_name.asp\n   */\n  name: string;\n\n  /**\n   * Follows input convention\n   * https://www.w3schools.com/jsref/prop_checkbox_value.asp\n   */\n  value: string;\n\n  /**\n   * Whether the selectable item is disabled\n   */\n  disabled?: boolean;\n}\n\n/**\n * State for selectable menu items\n */\nexport interface MenuItemSelectableState extends MenuItemSelectableProps {\n  /**\n   * Checked items for a value with `name`\n   */\n  checkedItems: string[];\n\n  /**\n   * Callback when checked items changes for a given value with `name`\n   */\n  onCheckedValueChange: (e: React.MouseEvent | React.KeyboardEvent, name: string, checkedItems: string[]) => void;\n\n  /**\n   * Selectable is checked\n   */\n  checked: boolean;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["selectable/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type SelectableHandler = (\n  e: React.MouseEvent | React.KeyboardEvent,\n  name: string,\n  value: string,\n  checked: boolean,\n) => void;\n\n/**\n * Props for selecatble menu items\n */\nexport type MenuItemSelectableProps = {\n  /**\n   * Follows input convention\n   * https://www.w3schools.com/jsref/prop_checkbox_name.asp\n   */\n  name: string;\n\n  /**\n   * Follows input convention\n   * https://www.w3schools.com/jsref/prop_checkbox_value.asp\n   */\n  value: string;\n};\n\n/**\n * State for selectable menu items\n */\nexport type MenuItemSelectableState = MenuItemSelectableProps & {\n  /**\n   * Checked items for a value with `name`\n   */\n  checkedItems: string[];\n\n  /**\n   * Callback when checked items changes for a given value with `name`\n   */\n  onCheckedValueChange: (e: React.MouseEvent | React.KeyboardEvent, name: string, checkedItems: string[]) => void;\n\n  /**\n   * Selectable is checked\n   */\n  checked: boolean;\n};\n"]}