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

package/lib-amd/components/MenuTrigger/MenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.js","sourceRoot":"../src/","sources":["components/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":";;;IAKA;;;;OAIG;IACU,QAAA,WAAW,GAAG,KAAK,CAAC,UAAU,CAAgC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAM,KAAK,GAAG,+BAAc,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAEzC,OAAO,qCAAiB,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenuTrigger } from './useMenuTrigger';\nimport { MenuTriggerProps } from './MenuTrigger.types';\nimport { renderMenuTrigger } from './renderMenuTrigger';\n\n/**\n * Wraps a trigger element as an only child\n * and adds the necessary event handling to open a popup menu\n * {@docCategory MenuTrigger }\n */\nexport const MenuTrigger = React.forwardRef<HTMLElement, MenuTriggerProps>((props, ref) => {\n  const state = useMenuTrigger(props, ref);\n\n  return renderMenuTrigger(state);\n});\n\nMenuTrigger.displayName = 'MenuTrigger';\n"]}
+{"version":3,"file":"MenuTrigger.js","sourceRoot":"../src/","sources":["components/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":";;;;IAKA;;;OAGG;IACI,IAAM,WAAW,GAA+B,UAAA,KAAK;QAC1D,IAAM,KAAK,GAAG,+BAAc,CAAC,KAAK,CAAC,CAAC;QAEpC,OAAO,qCAAiB,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;IAJW,QAAA,WAAW,eAItB;IAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport { useMenuTrigger } from './useMenuTrigger';\nimport { renderMenuTrigger } from './renderMenuTrigger';\nimport type { MenuTriggerProps } from './MenuTrigger.types';\n\n/**\n * Wraps a trigger element as an only child\n * and adds the necessary event handling to open a popup menu\n */\nexport const MenuTrigger: React.FC<MenuTriggerProps> = props => {\n  const state = useMenuTrigger(props);\n\n  return renderMenuTrigger(state);\n};\n\nMenuTrigger.displayName = 'MenuTrigger';\n"]}

package/lib-amd/components/MenuTrigger/MenuTrigger.types.d.ts

@@ -1,19 +1,16 @@
 import * as React from 'react';
-/**
- * {@docCategory MenuTrigger }
- */
-export interface MenuTriggerProps {
+export declare type MenuTriggerProps = {
     /**
-     * Explicitly require single child
+     * Explicitly require single child or render function
      */
-    children: React.ReactElement;
-}
+    children: (React.ReactElement & {
+        ref?: React.Ref<unknown>;
+    }) | ((props: MenuTriggerChildProps) => React.ReactNode);
+};
 /**
- * {@docCategory MenuTrigger }
+ * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu
  */
-export interface MenuTriggerState extends MenuTriggerProps {
-    /**
-     * Ref to the root slot
-     */
-    ref: React.MutableRefObject<HTMLElement>;
-}
+export declare type MenuTriggerChildProps = Required<Pick<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onMouseEnter' | 'onMouseLeave' | 'onContextMenu' | 'onKeyDown' | 'aria-haspopup' | 'aria-expanded' | 'id'>> & {
+    ref?: React.Ref<never>;
+};
+export declare type MenuTriggerState = MenuTriggerProps;

package/lib-amd/components/MenuTrigger/MenuTrigger.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"../src/","sources":["components/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\n/**\n * {@docCategory MenuTrigger }\n */\nexport interface MenuTriggerProps {\n  /**\n   * Explicitly require single child\n   */\n  children: React.ReactElement;\n}\n\n/**\n * {@docCategory MenuTrigger }\n */\nexport interface MenuTriggerState extends MenuTriggerProps {\n  /**\n   * Ref to the root slot\n   */\n  ref: React.MutableRefObject<HTMLElement>;\n}\n"]}
+{"version":3,"file":"MenuTrigger.types.js","sourceRoot":"../src/","sources":["components/MenuTrigger/MenuTrigger.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\nexport type MenuTriggerProps = {\n  /**\n   * Explicitly require single child or render function\n   */\n  children: (React.ReactElement & { ref?: React.Ref<unknown> }) | ((props: MenuTriggerChildProps) => React.ReactNode);\n};\n\n/**\n * Props that are passed to the child of the MenuTrigger when cloned to ensure correct behaviour for the Menu\n */\nexport type MenuTriggerChildProps = Required<\n  Pick<\n    React.HTMLAttributes<HTMLElement>,\n    | 'onClick'\n    | 'onMouseEnter'\n    | 'onMouseLeave'\n    | 'onContextMenu'\n    | 'onKeyDown'\n    | 'aria-haspopup'\n    | 'aria-expanded'\n    | 'id'\n  >\n> & {\n  ref?: React.Ref<never>;\n};\n\nexport type MenuTriggerState = MenuTriggerProps;\n"]}

package/lib-amd/components/MenuTrigger/index.js

@@ -1,7 +1,8 @@
-define(["require", "exports", "tslib", "./MenuTrigger", "./renderMenuTrigger", "./useMenuTrigger"], function (require, exports, tslib_1, MenuTrigger_1, renderMenuTrigger_1, useMenuTrigger_1) {
+define(["require", "exports", "tslib", "./MenuTrigger", "./MenuTrigger.types", "./renderMenuTrigger", "./useMenuTrigger"], function (require, exports, tslib_1, MenuTrigger_1, MenuTrigger_types_1, renderMenuTrigger_1, useMenuTrigger_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     tslib_1.__exportStar(MenuTrigger_1, exports);
+    tslib_1.__exportStar(MenuTrigger_types_1, exports);
     tslib_1.__exportStar(renderMenuTrigger_1, exports);
     tslib_1.__exportStar(useMenuTrigger_1, exports);
 });

package/lib-amd/components/MenuTrigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuTrigger/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAE9B,mDAAoC;IACpC,gDAAiC","sourcesContent":["export * from './MenuTrigger';\nexport * from './MenuTrigger.types';\nexport * from './renderMenuTrigger';\nexport * from './useMenuTrigger';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/MenuTrigger/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAC9B,mDAAoC;IACpC,mDAAoC;IACpC,gDAAiC","sourcesContent":["export * from './MenuTrigger';\nexport * from './MenuTrigger.types';\nexport * from './renderMenuTrigger';\nexport * from './useMenuTrigger';\n"]}

package/lib-amd/components/MenuTrigger/renderMenuTrigger.d.ts

@@ -1,8 +1,7 @@
-import { MenuTriggerState } from './MenuTrigger.types';
+import type { MenuTriggerState } from './MenuTrigger.types';
 /**
  * Render the final JSX of MenuTrigger
  *
  * Only renders children
- * {@docCategory MenuTrigger }
  */
 export declare const renderMenuTrigger: (state: MenuTriggerState) => JSX.Element;

package/lib-amd/components/MenuTrigger/renderMenuTrigger.js

@@ -1,14 +1,15 @@
 define(["require", "exports", "react", "../../contexts/menuTriggerContext"], function (require, exports, React, menuTriggerContext_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderMenuTrigger = void 0;
     /**
      * Render the final JSX of MenuTrigger
      *
      * Only renders children
-     * {@docCategory MenuTrigger }
      */
-    exports.renderMenuTrigger = function (state) {
+    var renderMenuTrigger = function (state) {
         return React.createElement(menuTriggerContext_1.MenuTriggerContextProvider, { value: true }, state.children);
     };
+    exports.renderMenuTrigger = renderMenuTrigger;
 });
 //# sourceMappingURL=renderMenuTrigger.js.map

package/lib-amd/components/MenuTrigger/renderMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderMenuTrigger.js","sourceRoot":"../src/","sources":["components/MenuTrigger/renderMenuTrigger.tsx"],"names":[],"mappings":";;;IAIA;;;;;OAKG;IACU,QAAA,iBAAiB,GAAG,UAAC,KAAuB;QACvD,OAAO,oBAAC,+CAA0B,IAAC,KAAK,EAAE,IAAI,IAAG,KAAK,CAAC,QAAQ,CAA8B,CAAC;IAChG,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { MenuTriggerState } from './MenuTrigger.types';\nimport { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n * {@docCategory MenuTrigger }\n */\nexport const renderMenuTrigger = (state: MenuTriggerState) => {\n  return <MenuTriggerContextProvider value={true}>{state.children}</MenuTriggerContextProvider>;\n};\n"]}
+{"version":3,"file":"renderMenuTrigger.js","sourceRoot":"../src/","sources":["components/MenuTrigger/renderMenuTrigger.tsx"],"names":[],"mappings":";;;;IAIA;;;;OAIG;IACI,IAAM,iBAAiB,GAAG,UAAC,KAAuB;QACvD,OAAO,oBAAC,+CAA0B,IAAC,KAAK,EAAE,IAAI,IAAG,KAAK,CAAC,QAAQ,CAA8B,CAAC;IAChG,CAAC,CAAC;IAFW,QAAA,iBAAiB,qBAE5B","sourcesContent":["import * as React from 'react';\nimport { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';\nimport type { MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderMenuTrigger = (state: MenuTriggerState) => {\n  return <MenuTriggerContextProvider value={true}>{state.children}</MenuTriggerContextProvider>;\n};\n"]}

package/lib-amd/components/MenuTrigger/useMenuTrigger.d.ts

@@ -1,14 +1,8 @@
-import * as React from 'react';
-import { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
-export declare const menuTriggerShorthandProps: (keyof MenuTriggerProps)[];
+import type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';
 /**
  * Create the state required to render MenuTrigger.
  * Clones the only child component and adds necessary event handling behaviours to open a popup menu
  *
  * @param props - props from this instance of MenuTrigger
- * @param ref - reference to root HTMLElement of MenuTrigger
- * @param defaultProps - (optional) default prop values provided by the implementing type
- *
- * {@docCategory MenuTrigger }
  */
-export declare const useMenuTrigger: (props: MenuTriggerProps, ref: React.Ref<HTMLElement>, defaultProps?: MenuTriggerProps | undefined) => MenuTriggerState;
+export declare const useMenuTrigger: (props: MenuTriggerProps) => MenuTriggerState;

package/lib-amd/components/MenuTrigger/useMenuTrigger.js

@@ -1,24 +1,18 @@
-define(["require", "exports", "react", "@fluentui/react-utilities", "./useTriggerElement"], function (require, exports, React, react_utilities_1, useTriggerElement_1) {
+define(["require", "exports", "tslib", "./useTriggerElement"], function (require, exports, tslib_1, useTriggerElement_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.menuTriggerShorthandProps = [];
-    // eslint-disable-next-line deprecation/deprecation
-    var mergeProps = react_utilities_1.makeMergePropsCompat({ deepMerge: exports.menuTriggerShorthandProps });
+    exports.useMenuTrigger = void 0;
     /**
      * Create the state required to render MenuTrigger.
      * Clones the only child component and adds necessary event handling behaviours to open a popup menu
      *
      * @param props - props from this instance of MenuTrigger
-     * @param ref - reference to root HTMLElement of MenuTrigger
-     * @param defaultProps - (optional) default prop values provided by the implementing type
-     *
-     * {@docCategory MenuTrigger }
      */
-    exports.useMenuTrigger = function (props, ref, defaultProps) {
-        var state = mergeProps({
-            ref: react_utilities_1.useMergedRefs(ref, React.useRef(null)),
-        }, defaultProps, react_utilities_1.resolveShorthandProps(props, exports.menuTriggerShorthandProps));
+    var useMenuTrigger = function (props) {
+        var state = tslib_1.__assign({}, props);
+        // TODO just move the contents of this hook here
         return useTriggerElement_1.useTriggerElement(state);
     };
+    exports.useMenuTrigger = useMenuTrigger;
 });
 //# sourceMappingURL=useMenuTrigger.js.map

package/lib-amd/components/MenuTrigger/useMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuTrigger.js","sourceRoot":"../src/","sources":["components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":";;;IAKa,QAAA,yBAAyB,GAA+B,EAAE,CAAC;IAExE,mDAAmD;IACnD,IAAM,UAAU,GAAG,sCAAoB,CAAmB,EAAE,SAAS,EAAE,iCAAyB,EAAE,CAAC,CAAC;IAEpG;;;;;;;;;OASG;IACU,QAAA,cAAc,GAAG,UAC5B,KAAuB,EACvB,GAA2B,EAC3B,YAA+B;QAE/B,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;SAC5C,EACD,YAAY,EACZ,uCAAqB,CAAC,KAAK,EAAE,iCAAyB,CAAC,CACxD,CAAC;QAEF,OAAO,qCAAiB,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeMergePropsCompat, resolveShorthandProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useTriggerElement } from './useTriggerElement';\n\nexport const menuTriggerShorthandProps: (keyof MenuTriggerProps)[] = [];\n\n// eslint-disable-next-line deprecation/deprecation\nconst mergeProps = makeMergePropsCompat<MenuTriggerState>({ deepMerge: menuTriggerShorthandProps });\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n * @param ref - reference to root HTMLElement of MenuTrigger\n * @param defaultProps - (optional) default prop values provided by the implementing type\n *\n * {@docCategory MenuTrigger }\n */\nexport const useMenuTrigger = (\n  props: MenuTriggerProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: MenuTriggerProps,\n): MenuTriggerState => {\n  const state = mergeProps(\n    {\n      ref: useMergedRefs(ref, React.useRef(null)),\n    },\n    defaultProps,\n    resolveShorthandProps(props, menuTriggerShorthandProps),\n  );\n\n  return useTriggerElement(state);\n};\n"]}
+{"version":3,"file":"useMenuTrigger.js","sourceRoot":"../src/","sources":["components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":";;;;IAGA;;;;;OAKG;IACI,IAAM,cAAc,GAAG,UAAC,KAAuB;QACpD,IAAM,KAAK,wBAAQ,KAAK,CAAE,CAAC;QAE3B,gDAAgD;QAChD,OAAO,qCAAiB,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;IALW,QAAA,cAAc,kBAKzB","sourcesContent":["import { useTriggerElement } from './useTriggerElement';\nimport type { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Create the state required to render MenuTrigger.\n * Clones the only child component and adds necessary event handling behaviours to open a popup menu\n *\n * @param props - props from this instance of MenuTrigger\n */\nexport const useMenuTrigger = (props: MenuTriggerProps): MenuTriggerState => {\n  const state = { ...props };\n\n  // TODO just move the contents of this hook here\n  return useTriggerElement(state);\n};\n"]}

package/lib-amd/components/MenuTrigger/useTriggerElement.d.ts

@@ -1,8 +1,5 @@
-import { MenuTriggerState } from './MenuTrigger.types';
+import type { MenuTriggerState } from './MenuTrigger.types';
 /**
  * Adds the necessary props to the trigger element
- *
- * openOnHover -> adds mouseenter/mouseleave events
- * openOnContextMenu -> removes all events except for openOnContextMenu
  */
-export declare const useTriggerElement: (state: Pick<MenuTriggerState, "children">) => MenuTriggerState;
+export declare const useTriggerElement: (state: MenuTriggerState) => MenuTriggerState;

package/lib-amd/components/MenuTrigger/useTriggerElement.js

@@ -1,95 +1,115 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/keyboard-key", "@fluentui/react-tabster", "../../contexts/menuContext", "../../utils/index"], function (require, exports, tslib_1, React, react_utilities_1, keyboard_key_1, react_tabster_1, menuContext_1, index_1) {
+define(["require", "exports", "tslib", "react", "@fluentui/keyboard-keys", "@fluentui/react-utilities", "@fluentui/react-tabster", "../../contexts/menuContext", "@fluentui/react-shared-contexts", "../../utils/useIsSubmenu"], function (require, exports, tslib_1, React, keyboard_keys_1, react_utilities_1, react_tabster_1, menuContext_1, react_shared_contexts_1, useIsSubmenu_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTriggerElement = void 0;
+    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
      */
-    exports.useTriggerElement = function (state) {
-        var _a;
+    var useTriggerElement = function (state) {
+        var _a, _b;
         var triggerRef = menuContext_1.useMenuContext(function (context) { return context.triggerRef; });
-        var menuPopupRef = menuContext_1.useMenuContext(function (context) { return context.menuPopupRef; });
+        var menuPopoverRef = menuContext_1.useMenuContext(function (context) { return context.menuPopoverRef; });
         var setOpen = menuContext_1.useMenuContext(function (context) { return context.setOpen; });
         var open = menuContext_1.useMenuContext(function (context) { return context.open; });
         var triggerId = menuContext_1.useMenuContext(function (context) { return context.triggerId; });
         var openOnHover = menuContext_1.useMenuContext(function (context) { return context.openOnHover; });
         var openOnContext = menuContext_1.useMenuContext(function (context) { return context.openOnContext; });
-        var isSubmenu = menuContext_1.useMenuContext(function (context) { return context.isSubmenu; });
+        var isSubmenu = useIsSubmenu_1.useIsSubmenu();
         var findFirstFocusable = react_tabster_1.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);
-        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 hasMouseMoved = React.useRef(false);
+        var dir = react_shared_contexts_1.useFluent().dir;
+        var OpenArrowKey = dir === 'ltr' ? keyboard_keys_1.ArrowRight : keyboard_keys_1.ArrowLeft;
+        var child = React.isValidElement(state.children) ? react_utilities_1.onlyChild(state.children) : undefined;
         var onContextMenu = react_utilities_1.useEventCallback(function (e) {
-            var _a, _b, _c;
+            var _a, _b;
             if (openOnContext) {
                 e.preventDefault();
-                setOpen(e, true);
+                setOpen(e, { open: true, keyboard: false });
             }
-            (_c = (_a = child.props) === null || _a === void 0 ? void 0 : (_b = _a).onContextMenu) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+            (_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 = react_utilities_1.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();
-            }
+            var _a, _b;
             if (!openOnContext) {
-                setOpen(e, !open);
+                setOpen(e, { open: !open, keyboard: openedWithKeyboardRef.current });
+                openedWithKeyboardRef.current = false;
             }
-            (_c = (_a = child.props) === null || _a === void 0 ? void 0 : (_b = _a).onClick) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+            (_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 = react_utilities_1.useEventCallback(function (e) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c;
             if (react_utilities_1.shouldPreventDefaultOnKeyDown(e)) {
                 e.preventDefault();
                 openedWithKeyboardRef.current = true;
                 (_a = e.target) === null || _a === void 0 ? void 0 : _a.click();
             }
-            var keyCode = keyboard_key_1.getCode(e);
-            if (!openOnContext &&
-                ((isSubmenu && keyCode === keyboard_key_1.keyboardKey.ArrowRight) || (!isSubmenu && keyCode === keyboard_key_1.keyboardKey.ArrowDown))) {
-                openedWithKeyboardRef.current = true;
-                setOpen(e, true);
+            var key = e.key;
+            if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === keyboard_keys_1.ArrowDown))) {
+                setOpen(e, { open: true, keyboard: true });
+            }
+            if (key === keyboard_keys_1.Escape && !isSubmenu) {
+                setOpen(e, { open: false, keyboard: true });
             }
-            (_d = (_b = child.props) === null || _b === void 0 ? void 0 : (_c = _b).onKeyDown) === null || _d === void 0 ? void 0 : _d.call(_c, e);
+            // if menu is already open, can't rely on effects to focus
+            if (open && key === OpenArrowKey && isSubmenu) {
+                focusFirst();
+            }
+            if (open && key === keyboard_keys_1.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 = react_utilities_1.useEventCallback(function (e) {
-            var _a, _b, _c;
-            if (openOnHover && !openOnContext) {
-                setOpen(e, true);
+            var _a, _b;
+            if (openOnHover && hasMouseMoved.current) {
+                setOpen(e, { open: true, keyboard: false });
             }
-            (_c = (_a = child.props) === null || _a === void 0 ? void 0 : (_b = _a).onMouseEnter) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+            (_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);
         });
-        // no mouse leave, since mouse enter sets focus for menu items
-        var onBlur = react_utilities_1.useEventCallback(function (e) {
-            var _a, _b, _c;
-            if (index_1.isOutsideMenu({ menuPopupRef: menuPopupRef, triggerRef: triggerRef, event: e })) {
-                setOpen(e, false);
+        // 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 = react_utilities_1.useEventCallback(function (e) {
+            if (openOnHover && !hasMouseMoved.current) {
+                setOpen(e, { open: true, keyboard: false });
+                hasMouseMoved.current = true;
             }
-            (_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 = tslib_1.__assign(tslib_1.__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, tslib_1.__assign(tslib_1.__assign({}, triggerProps), { ref: react_utilities_1.useMergedRefs(child.props.ref, triggerRef) }));
+        var onMouseLeave = react_utilities_1.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 = tslib_1.__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 = react_utilities_1.applyTriggerPropsToChildren(state.children, tslib_1.__assign(tslib_1.__assign({}, triggerProps), { ref: react_utilities_1.useMergedRefs((typeof state.children !== 'function' && state.children.ref) || null, triggerRef) }));
         return state;
     };
+    exports.useTriggerElement = useTriggerElement;
 });
 //# sourceMappingURL=useTriggerElement.js.map

package/lib-amd/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,"file":"useTriggerElement.js","sourceRoot":"../src/","sources":["components/MenuTrigger/useTriggerElement.ts"],"names":[],"mappings":";;;;IAeA,IAAM,IAAI,GAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,CAAC;IAExB;;OAEG;IACI,IAAM,iBAAiB,GAAG,UAAC,KAAuB;;QACvD,IAAM,UAAU,GAAG,4BAAc,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,UAAU,EAAlB,CAAkB,CAAC,CAAC;QACjE,IAAM,cAAc,GAAG,4BAAc,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,cAAc,EAAtB,CAAsB,CAAC,CAAC;QACzE,IAAM,OAAO,GAAG,4BAAc,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,OAAO,EAAf,CAAe,CAAC,CAAC;QAC3D,IAAM,IAAI,GAAG,4BAAc,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,IAAI,EAAZ,CAAY,CAAC,CAAC;QACrD,IAAM,SAAS,GAAG,4BAAc,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,SAAS,EAAjB,CAAiB,CAAC,CAAC;QAC/D,IAAM,WAAW,GAAG,4BAAc,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,WAAW,EAAnB,CAAmB,CAAC,CAAC;QACnE,IAAM,aAAa,GAAG,4BAAc,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,aAAa,EAArB,CAAqB,CAAC,CAAC;QACvE,IAAM,SAAS,GAAG,2BAAY,EAAE,CAAC;QACzB,IAAA,kBAAkB,GAAK,+BAAe,EAAE,mBAAtB,CAAuB;QACjD,IAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC;YACnC,IAAM,cAAc,GAAG,kBAAkB,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;YAClE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,GAAG;QAC1B,CAAC,EAAE,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC,CAAC;QAEzC,IAAM,qBAAqB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAClD,IAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAElC,IAAA,GAAG,GAAK,iCAAS,EAAE,IAAhB,CAAiB;QAC5B,IAAM,YAAY,GAAG,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,0BAAU,CAAC,CAAC,CAAC,yBAAS,CAAC;QAE5D,IAAM,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,2BAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAE3F,IAAM,aAAa,GAAG,kCAAgB,CAAC,UAAC,CAAgC;;YACtE,IAAI,aAAa,EAAE;gBACjB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,OAAO,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;aAC7C;YAED,YAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,aAAa,mDAAG,CAAC,EAAE;QACnC,CAAC,CAAC,CAAC;QAEH,IAAM,OAAO,GAAG,kCAAgB,CAAC,UAAC,CAAgC;;YAChE,IAAI,CAAC,aAAa,EAAE;gBAClB,OAAO,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,qBAAqB,CAAC,OAAO,EAAE,CAAC,CAAC;gBACrE,qBAAqB,CAAC,OAAO,GAAG,KAAK,CAAC;aACvC;YAED,YAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,OAAO,mDAAG,CAAC,EAAE;QAC7B,CAAC,CAAC,CAAC;QAEH,IAAM,SAAS,GAAG,kCAAgB,CAAC,UAAC,CAAmC;;YACrE,IAAI,+CAA6B,CAAC,CAAC,CAAC,EAAE;gBACpC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;gBACrC,MAAC,CAAC,CAAC,MAAsB,0CAAE,KAAK,GAAG;aACpC;YAED,IAAM,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC;YAElB,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,SAAS,IAAI,GAAG,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC,SAAS,IAAI,GAAG,KAAK,yBAAS,CAAC,CAAC,EAAE;gBAChG,OAAO,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;aAC5C;YAED,IAAI,GAAG,KAAK,sBAAM,IAAI,CAAC,SAAS,EAAE;gBAChC,OAAO,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;aAC7C;YAED,0DAA0D;YAC1D,IAAI,IAAI,IAAI,GAAG,KAAK,YAAY,IAAI,SAAS,EAAE;gBAC7C,UAAU,EAAE,CAAC;aACd;YAED,IAAI,IAAI,IAAI,GAAG,KAAK,yBAAS,IAAI,CAAC,SAAS,EAAE;gBAC3C,UAAU,EAAE,CAAC;aACd;YAED,YAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,SAAS,mDAAG,CAAC,EAAE;QAC/B,CAAC,CAAC,CAAC;QAEH,IAAM,YAAY,GAAG,kCAAgB,CAAC,UAAC,CAAgC;;YACrE,IAAI,WAAW,IAAI,aAAa,CAAC,OAAO,EAAE;gBACxC,OAAO,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;aAC7C;YAED,YAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,YAAY,mDAAG,CAAC,EAAE;QAClC,CAAC,CAAC,CAAC;QAEH,kGAAkG;QAClG,8EAA8E;QAC9E,uGAAuG;QACvG,IAAM,WAAW,GAAG,kCAAgB,CAAC,UAAC,CAAgC;YACpE,IAAI,WAAW,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE;gBACzC,OAAO,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;gBAC5C,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;aAC9B;QACH,CAAC,CAAC,CAAC;QAEH,IAAM,YAAY,GAAG,kCAAgB,CAAC,UAAC,CAAgC;;YACrE,IAAI,WAAW,EAAE;gBACf,OAAO,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;aAC9C;YAED,YAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,YAAY,mDAAG,CAAC,EAAE;QAClC,CAAC,CAAC,CAAC;QAEH,IAAM,QAAQ,SAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,QAAQ,CAAC;QACxC,IAAM,YAAY,sBAChB,eAAe,EAAE,IAAI,EACrB,eAAe,EAAE,IAAI,EACrB,EAAE,EAAE,OAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,EAAE,KAAI,SAAS,IAE9B,CAAC,CAAC,QAAQ;YACX,CAAC,CAAC;gBACE,OAAO,SAAA;gBACP,YAAY,cAAA;gBACZ,YAAY,cAAA;gBACZ,aAAa,eAAA;gBACb,SAAS,WAAA;gBACT,WAAW,aAAA;aACZ;YACH,CAAC,CAAC,qGAAqG;gBACrG;oBACE,OAAO,EAAE,IAAI;oBACb,YAAY,EAAE,IAAI;oBAClB,YAAY,EAAE,IAAI;oBAClB,aAAa,EAAE,IAAI;oBACnB,SAAS,EAAE,IAAI;oBACf,WAAW,EAAE,IAAI;iBAClB,CAAC,CACP,CAAC;QAEF,KAAK,CAAC,QAAQ,GAAG,6CAA2B,CAAC,KAAK,CAAC,QAAQ,wCACtD,YAAY,KACf,GAAG,EAAE,+BAAa,CAAC,CAAC,OAAO,KAAK,CAAC,QAAQ,KAAK,UAAU,IAAI,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI,EAAE,UAAU,CAAC,IAC9E,CAAC;QAEzB,OAAO,KAAyB,CAAC;IACnC,CAAC,CAAC;IAhIW,QAAA,iBAAiB,qBAgI5B","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"]}

package/lib-amd/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-amd/contexts/menuContext.js

@@ -1,25 +1,26 @@
 define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var MenuContext = react_context_selector_1.createContext({
+    exports.useMenuContext = exports.MenuProvider = exports.MenuContext = void 0;
+    exports.MenuContext = react_context_selector_1.createContext({
         open: false,
         setOpen: function () { return false; },
         checkedValues: {},
         onCheckedValueChange: function () { return null; },
         defaultCheckedValues: {},
-        hasMenuContext: false,
         isSubmenu: false,
         triggerRef: { current: null },
-        menuPopupRef: { current: null },
+        menuPopoverRef: { current: null },
         triggerId: '',
         openOnContext: false,
         openOnHover: false,
         hasIcons: false,
         hasCheckmarks: false,
     });
-    exports.MenuProvider = MenuContext.Provider;
-    exports.useMenuContext = function (selector) {
-        return react_context_selector_1.useContextSelector(MenuContext, selector);
+    exports.MenuProvider = exports.MenuContext.Provider;
+    var useMenuContext = function (selector) {
+        return react_context_selector_1.useContextSelector(exports.MenuContext, selector);
     };
+    exports.useMenuContext = useMenuContext;
 });
 //# sourceMappingURL=menuContext.js.map

package/lib-amd/contexts/menuContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuContext.js","sourceRoot":"../src/","sources":["contexts/menuContext.ts"],"names":[],"mappings":";;;IAKA,IAAM,WAAW,GAAG,sCAAa,CAAmB;QAClD,IAAI,EAAE,KAAK;QACX,OAAO,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;QACpB,aAAa,EAAE,EAAE;QACjB,oBAAoB,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QAChC,oBAAoB,EAAE,EAAE;QACxB,cAAc,EAAE,KAAK;QACrB,SAAS,EAAE,KAAK;QAChB,UAAU,EAAG,EAAE,OAAO,EAAE,IAAI,EAAqD;QACjF,YAAY,EAAG,EAAE,OAAO,EAAE,IAAI,EAAqD;QACnF,SAAS,EAAE,EAAE;QACb,aAAa,EAAE,KAAK;QACpB,WAAW,EAAE,KAAK;QAClB,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,KAAK;KACrB,CAAC,CAAC;IA0BU,QAAA,YAAY,GAAG,WAAW,CAAC,QAAQ,CAAC;IAEpC,QAAA,cAAc,GAAG,UAAI,QAA8C;QAC9E,OAAA,2CAAkB,CAAC,WAAW,EAAE,QAAQ,CAAC;IAAzC,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,"file":"menuContext.js","sourceRoot":"../src/","sources":["contexts/menuContext.ts"],"names":[],"mappings":";;;;IAMa,QAAA,WAAW,GAA8B,sCAAa,CAAmB;QACpF,IAAI,EAAE,KAAK;QACX,OAAO,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;QACpB,aAAa,EAAE,EAAE;QACjB,oBAAoB,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QAChC,oBAAoB,EAAE,EAAE;QACxB,SAAS,EAAE,KAAK;QAChB,UAAU,EAAG,EAAE,OAAO,EAAE,IAAI,EAAqD;QACjF,cAAc,EAAG,EAAE,OAAO,EAAE,IAAI,EAAqD;QACrF,SAAS,EAAE,EAAE;QACb,aAAa,EAAE,KAAK;QACpB,WAAW,EAAE,KAAK;QAClB,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,KAAK;KACrB,CAAC,CAAC;IA0BU,QAAA,YAAY,GAAG,mBAAW,CAAC,QAAQ,CAAC;IAE1C,IAAM,cAAc,GAAG,UAAI,QAA8C;QAC9E,OAAA,2CAAkB,CAAC,mBAAW,EAAE,QAAQ,CAAC;IAAzC,CAAyC,CAAC;IAD/B,QAAA,cAAc,kBACiB","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"]}

package/lib-amd/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-amd/contexts/menuGroupContext.js

@@ -1,8 +1,10 @@
 define(["require", "exports", "react"], function (require, exports, React) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuGroupContext = exports.MenuGroupContextProvider = void 0;
     var MenuGroupContext = React.createContext({ headerId: '' });
     exports.MenuGroupContextProvider = MenuGroupContext.Provider;
-    exports.useMenuGroupContext = function () { return React.useContext(MenuGroupContext); };
+    var useMenuGroupContext = function () { return React.useContext(MenuGroupContext); };
+    exports.useMenuGroupContext = useMenuGroupContext;
 });
 //# sourceMappingURL=menuGroupContext.js.map

package/lib-amd/contexts/menuGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuGroupContext.js","sourceRoot":"../src/","sources":["contexts/menuGroupContext.ts"],"names":[],"mappings":";;;IAEA,IAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAwB,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAazE,QAAA,wBAAwB,GAAG,gBAAgB,CAAC,QAAQ,CAAC;IACrD,QAAA,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,"file":"menuGroupContext.js","sourceRoot":"../src/","sources":["contexts/menuGroupContext.ts"],"names":[],"mappings":";;;;IAEA,IAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAwB,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAazE,QAAA,wBAAwB,GAAG,gBAAgB,CAAC,QAAQ,CAAC;IAC3D,IAAM,mBAAmB,GAAG,cAAM,OAAA,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,EAAlC,CAAkC,CAAC;IAA/D,QAAA,mBAAmB,uBAA4C","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"]}

package/lib-amd/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-amd/contexts/menuListContext.js

@@ -1,7 +1,8 @@
 define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    var MenuListContext = react_context_selector_1.createContext({
+    exports.useMenuListContext = exports.MenuListProvider = exports.MenuListContext = void 0;
+    exports.MenuListContext = react_context_selector_1.createContext({
         checkedValues: {},
         onCheckedValueChange: function () { return null; },
         setFocusByFirstCharacter: function () { return null; },
@@ -10,9 +11,10 @@ define(["require", "exports", "@fluentui/react-context-selector"], function (req
         hasIcons: false,
         hasCheckmarks: false,
     });
-    exports.MenuListProvider = MenuListContext.Provider;
-    exports.useMenuListContext = function (selector) {
-        return react_context_selector_1.useContextSelector(MenuListContext, selector);
+    exports.MenuListProvider = exports.MenuListContext.Provider;
+    var useMenuListContext = function (selector) {
+        return react_context_selector_1.useContextSelector(exports.MenuListContext, selector);
     };
+    exports.useMenuListContext = useMenuListContext;
 });
 //# sourceMappingURL=menuListContext.js.map

package/lib-amd/contexts/menuListContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuListContext.js","sourceRoot":"../src/","sources":["contexts/menuListContext.tsx"],"names":[],"mappings":";;;IAKA,IAAM,eAAe,GAAG,sCAAa,CAAuB;QAC1D,aAAa,EAAE,EAAE;QACjB,oBAAoB,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QAChC,wBAAwB,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QACpC,cAAc,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QAC1B,WAAW,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QACvB,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,KAAK;KACrB,CAAC,CAAC;IAYU,QAAA,gBAAgB,GAAG,eAAe,CAAC,QAAQ,CAAC;IAE5C,QAAA,kBAAkB,GAAG,UAAK,QAAkD;QACvF,OAAA,2CAAkB,CAAC,eAAe,EAAE,QAAQ,CAAC;IAA7C,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,"file":"menuListContext.js","sourceRoot":"../src/","sources":["contexts/menuListContext.tsx"],"names":[],"mappings":";;;;IAMa,QAAA,eAAe,GAAkC,sCAAa,CAAuB;QAChG,aAAa,EAAE,EAAE;QACjB,oBAAoB,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QAChC,wBAAwB,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QACpC,cAAc,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QAC1B,WAAW,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;QACvB,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,KAAK;KACrB,CAAC,CAAC;IAcU,QAAA,gBAAgB,GAAG,uBAAe,CAAC,QAAQ,CAAC;IAElD,IAAM,kBAAkB,GAAG,UAAK,QAAkD;QACvF,OAAA,2CAAkB,CAAC,uBAAe,EAAE,QAAQ,CAAC;IAA7C,CAA6C,CAAC;IADnC,QAAA,kBAAkB,sBACiB","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"]}

package/lib-amd/contexts/menuTriggerContext.js

@@ -1,11 +1,13 @@
 define(["require", "exports", "react"], function (require, exports, React) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useMenuTriggerContext = exports.MenuTriggerContextProvider = void 0;
     /**
      * Context used communicate with child that it is a trigger for a menu
      */
     var MenuTriggerContext = React.createContext(false);
     exports.MenuTriggerContextProvider = MenuTriggerContext.Provider;
-    exports.useMenuTriggerContext = function () { return React.useContext(MenuTriggerContext); };
+    var useMenuTriggerContext = function () { return React.useContext(MenuTriggerContext); };
+    exports.useMenuTriggerContext = useMenuTriggerContext;
 });
 //# sourceMappingURL=menuTriggerContext.js.map