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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"renderMenuTrigger.js","sourceRoot":"../src/","sources":["components/MenuTrigger/renderMenuTrigger.tsx"],"names":[],"mappings":";;AAAA,6BAA+B;AAE/B,wEAA+E;AAE/E;;;;;GAKG;AACU,QAAA,iBAAiB,GAAG,UAAC,KAAuB;IACvD,OAAO,oBAAC,+CAA0B,IAAC,KAAK,EAAE,IAAI,IAAG,KAAK,CAAC,QAAQ,CAA8B,CAAC;AAChG,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,"sources":["components/MenuTrigger/renderMenuTrigger.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,oBAAA,gBAAA,OAAA,CAAA,mCAAA,CAAA;AAGA;;;;AAIG;;;AACI,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;AACvD,SAAO,KAAA,CAAA,aAAA,CAAC,oBAAA,CAAA,0BAAD,EAA2B;AAAC,IAAA,KAAK,EAAE;AAAR,GAA3B,EAA0C,KAAK,CAAC,QAAhD,CAAP;AACD,CAFM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","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"],"sourceRoot":"../src/"}

package/lib-commonjs/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-commonjs/components/MenuTrigger/useMenuTrigger.js

@@ -1,25 +1,27 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var useTriggerElement_1 = require("./useTriggerElement");
-exports.menuTriggerShorthandProps = [];
-// eslint-disable-next-line deprecation/deprecation
-var mergeProps = react_utilities_1.makeMergePropsCompat({ deepMerge: exports.menuTriggerShorthandProps });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuTrigger = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var useTriggerElement_1 = /*#__PURE__*/require("./useTriggerElement");
 /**
  * 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));
-    return useTriggerElement_1.useTriggerElement(state);
+
+
+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-commonjs/components/MenuTrigger/useMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMenuTrigger.js","sourceRoot":"../src/","sources":["components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,6DAAuG;AAEvG,yDAAwD;AAE3C,QAAA,yBAAyB,GAA+B,EAAE,CAAC;AAExE,mDAAmD;AACnD,IAAM,UAAU,GAAG,sCAAoB,CAAmB,EAAE,SAAS,EAAE,iCAAyB,EAAE,CAAC,CAAC;AAEpG;;;;;;;;;GASG;AACU,QAAA,cAAc,GAAG,UAC5B,KAAuB,EACvB,GAA2B,EAC3B,YAA+B;IAE/B,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;KAC5C,EACD,YAAY,EACZ,uCAAqB,CAAC,KAAK,EAAE,iCAAyB,CAAC,CACxD,CAAC;IAEF,OAAO,qCAAiB,CAAC,KAAK,CAAC,CAAC;AAClC,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,"sources":["components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;AAGA;;;;;AAKG;;;AACI,IAAM,cAAc,GAAG,UAAC,KAAD,EAAwB;AACpD,MAAM,KAAK,GAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EAAQ,KAAR,CAAX,CADoD,CAGpD;;;AACA,SAAO,mBAAA,CAAA,iBAAA,CAAkB,KAAlB,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","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"],"sourceRoot":"../src/"}

package/lib-commonjs/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-commonjs/components/MenuTrigger/useTriggerElement.js

@@ -1,100 +1,195 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var keyboard_key_1 = require("@fluentui/keyboard-key");
-var react_tabster_1 = require("@fluentui/react-tabster");
-var menuContext_1 = require("../../contexts/menuContext");
-var index_1 = require("../../utils/index");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTriggerElement = void 0;
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var React = /*#__PURE__*/require("react");
+
+var keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
+var menuContext_1 = /*#__PURE__*/require("../../contexts/menuContext");
+
+var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+
+var useIsSubmenu_1 = /*#__PURE__*/require("../../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
  */
-exports.useTriggerElement = function (state) {
-    var _a;
-    var triggerRef = menuContext_1.useMenuContext(function (context) { return context.triggerRef; });
-    var menuPopupRef = menuContext_1.useMenuContext(function (context) { return context.menuPopupRef; });
-    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 findFirstFocusable = react_tabster_1.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 = react_utilities_1.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 = 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();
-        }
-        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 = react_utilities_1.useEventCallback(function (e) {
-        var _a, _b, _c, _d;
-        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);
-        }
-        (_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 = react_utilities_1.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 = react_utilities_1.useEventCallback(function (e) {
-        var _a, _b, _c;
-        if (index_1.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 = 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) }));
-    return state;
+
+
+var useTriggerElement = function (state) {
+  var _a, _b;
+
+  var triggerRef = menuContext_1.useMenuContext(function (context) {
+    return context.triggerRef;
+  });
+  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 = 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);
+  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;
+
+    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 = react_utilities_1.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 = react_utilities_1.useEventCallback(function (e) {
+    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 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
+      });
+    } // 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;
+
+    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 = react_utilities_1.useEventCallback(function (e) {
+    if (openOnHover && !hasMouseMoved.current) {
+      setOpen(e, {
+        open: true,
+        keyboard: false
+      });
+      hasMouseMoved.current = true;
+    }
+  });
+  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-commonjs/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":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAOA,IAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,IAAA,aAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AACA,IAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,IAAA,cAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AAGA,IAAM,IAAI,GAAG,YAAA;AAAM,SAAA,IAAA;AAAI,CAAvB;AAEA;;AAEG;;;AACI,IAAM,iBAAiB,GAAG,UAAC,KAAD,EAAwB;;;AACvD,MAAM,UAAU,GAAG,aAAA,CAAA,cAAA,CAAe,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,UAAA;AAAkB,GAA5C,CAAnB;AACA,MAAM,cAAc,GAAG,aAAA,CAAA,cAAA,CAAe,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,cAAA;AAAsB,GAAhD,CAAvB;AACA,MAAM,OAAO,GAAG,aAAA,CAAA,cAAA,CAAe,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,OAAA;AAAe,GAAzC,CAAhB;AACA,MAAM,IAAI,GAAG,aAAA,CAAA,cAAA,CAAe,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,IAAA;AAAY,GAAtC,CAAb;AACA,MAAM,SAAS,GAAG,aAAA,CAAA,cAAA,CAAe,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,SAAA;AAAiB,GAA3C,CAAlB;AACA,MAAM,WAAW,GAAG,aAAA,CAAA,cAAA,CAAe,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,WAAA;AAAmB,GAA7C,CAApB;AACA,MAAM,aAAa,GAAG,aAAA,CAAA,cAAA,CAAe,UAAA,OAAA,EAAO;AAAI,WAAA,OAAO,CAAP,aAAA;AAAqB,GAA/C,CAAtB;AACA,MAAM,SAAS,GAAG,cAAA,CAAA,YAAA,EAAlB;AACQ,MAAA,kBAAkB,GAAK,eAAA,CAAA,eAAA,GAAL,kBAAlB;AACR,MAAM,UAAU,GAAG,KAAK,CAAC,WAAN,CAAkB,YAAA;AACnC,QAAM,cAAc,GAAG,kBAAkB,CAAC,cAAc,CAAC,OAAhB,CAAzC;AACA,IAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,KAAhB,EAAA;AACD,GAHkB,EAGhB,CAAC,kBAAD,EAAqB,cAArB,CAHgB,CAAnB;AAKA,MAAM,qBAAqB,GAAG,KAAK,CAAC,MAAN,CAAa,KAAb,CAA9B;AACA,MAAM,aAAa,GAAG,KAAK,CAAC,MAAN,CAAa,KAAb,CAAtB;AAEQ,MAAA,GAAG,GAAK,uBAAA,CAAA,SAAA,GAAL,GAAH;AACR,MAAM,YAAY,GAAG,GAAG,KAAK,KAAR,GAAgB,eAAA,CAAA,UAAhB,GAA6B,eAAA,CAAA,SAAlD;AAEA,MAAM,KAAK,GAAG,KAAK,CAAC,cAAN,CAAqB,KAAK,CAAC,QAA3B,IAAuC,iBAAA,CAAA,SAAA,CAAU,KAAK,CAAC,QAAhB,CAAvC,GAAmE,SAAjF;AAEA,MAAM,aAAa,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAC,CAAD,EAAiC;;;AACtE,QAAI,aAAJ,EAAmB;AACjB,MAAA,CAAC,CAAC,cAAF;AACA,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,IAAR;AAAc,QAAA,QAAQ,EAAE;AAAxB,OAAJ,CAAP;AACD;;AAED,KAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,aAAd,MAA2B,IAA3B,IAA2B,EAAA,KAAA,KAAA,CAA3B,GAA2B,KAAA,CAA3B,GAA2B,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,CAAH,CAA3B;AACD,GAPqB,CAAtB;AASA,MAAM,OAAO,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAC,CAAD,EAAiC;;;AAChE,QAAI,CAAC,aAAL,EAAoB;AAClB,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,CAAC,IAAT;AAAe,QAAA,QAAQ,EAAE,qBAAqB,CAAC;AAA/C,OAAJ,CAAP;AACA,MAAA,qBAAqB,CAAC,OAAtB,GAAgC,KAAhC;AACD;;AAED,KAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,OAAd,MAAqB,IAArB,IAAqB,EAAA,KAAA,KAAA,CAArB,GAAqB,KAAA,CAArB,GAAqB,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,CAAH,CAArB;AACD,GAPe,CAAhB;AASA,MAAM,SAAS,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAC,CAAD,EAAoC;;;AACrE,QAAI,iBAAA,CAAA,6BAAA,CAA8B,CAA9B,CAAJ,EAAsC;AACpC,MAAA,CAAC,CAAC,cAAF;AACA,MAAA,qBAAqB,CAAC,OAAtB,GAAgC,IAAhC;AACA,OAAA,EAAA,GAAC,CAAC,CAAC,MAAH,MAAyB,IAAzB,IAAyB,EAAA,KAAA,KAAA,CAAzB,GAAyB,KAAA,CAAzB,GAAyB,EAAA,CAAE,KAAF,EAAzB;AACD;;AAED,QAAM,GAAG,GAAG,CAAC,CAAC,GAAd;;AAEA,QAAI,CAAC,aAAD,KAAoB,SAAS,IAAI,GAAG,KAAK,YAAtB,IAAwC,CAAC,SAAD,IAAc,GAAG,KAAK,eAAA,CAAA,SAAjF,CAAJ,EAAkG;AAChG,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,IAAR;AAAc,QAAA,QAAQ,EAAE;AAAxB,OAAJ,CAAP;AACD;;AAED,QAAI,GAAG,KAAK,eAAA,CAAA,MAAR,IAAkB,CAAC,SAAvB,EAAkC;AAChC,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,KAAR;AAAe,QAAA,QAAQ,EAAE;AAAzB,OAAJ,CAAP;AACD,KAfoE,CAiBrE;;;AACA,QAAI,IAAI,IAAI,GAAG,KAAK,YAAhB,IAAgC,SAApC,EAA+C;AAC7C,MAAA,UAAU;AACX;;AAED,QAAI,IAAI,IAAI,GAAG,KAAK,eAAA,CAAA,SAAhB,IAA6B,CAAC,SAAlC,EAA6C;AAC3C,MAAA,UAAU;AACX;;AAED,KAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,SAAd,MAAuB,IAAvB,IAAuB,EAAA,KAAA,KAAA,CAAvB,GAAuB,KAAA,CAAvB,GAAuB,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,CAAH,CAAvB;AACD,GA3BiB,CAAlB;AA6BA,MAAM,YAAY,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAC,CAAD,EAAiC;;;AACrE,QAAI,WAAW,IAAI,aAAa,CAAC,OAAjC,EAA0C;AACxC,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,IAAR;AAAc,QAAA,QAAQ,EAAE;AAAxB,OAAJ,CAAP;AACD;;AAED,KAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,YAAd,MAA0B,IAA1B,IAA0B,EAAA,KAAA,KAAA,CAA1B,GAA0B,KAAA,CAA1B,GAA0B,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,CAAH,CAA1B;AACD,GANoB,CAArB,CAtEuD,CA8EvD;AACA;AACA;;AACA,MAAM,WAAW,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAC,CAAD,EAAiC;AACpE,QAAI,WAAW,IAAI,CAAC,aAAa,CAAC,OAAlC,EAA2C;AACzC,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,IAAR;AAAc,QAAA,QAAQ,EAAE;AAAxB,OAAJ,CAAP;AACA,MAAA,aAAa,CAAC,OAAd,GAAwB,IAAxB;AACD;AACF,GALmB,CAApB;AAOA,MAAM,YAAY,GAAG,iBAAA,CAAA,gBAAA,CAAiB,UAAC,CAAD,EAAiC;;;AACrE,QAAI,WAAJ,EAAiB;AACf,MAAA,OAAO,CAAC,CAAD,EAAI;AAAE,QAAA,IAAI,EAAE,KAAR;AAAe,QAAA,QAAQ,EAAE;AAAzB,OAAJ,CAAP;AACD;;AAED,KAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,YAAd,MAA0B,IAA1B,IAA0B,EAAA,KAAA,KAAA,CAA1B,GAA0B,KAAA,CAA1B,GAA0B,EAAA,CAAA,IAAA,CAAA,EAAA,EAAG,CAAH,CAA1B;AACD,GANoB,CAArB;AAQA,MAAM,QAAQ,GAAA,CAAA,EAAA,GAAG,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAV,MAAe,IAAf,IAAe,EAAA,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAe,EAAA,CAAE,QAA/B;;AACA,MAAM,YAAY,GAAA,OAAA,CAAA,QAAA,CAAA;AAChB,qBAAiB,IADD;AAEhB,qBAAiB,IAFD;AAGhB,IAAA,EAAE,EAAE,CAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,EAAd,KAAoB;AAHR,GAAA,EAKZ,CAAC,QAAD,GACA;AACE,IAAA,OAAO,EAAA,OADT;AAEE,IAAA,YAAY,EAAA,YAFd;AAGE,IAAA,YAAY,EAAA,YAHd;AAIE,IAAA,aAAa,EAAA,aAJf;AAKE,IAAA,SAAS,EAAA,SALX;AAME,IAAA,WAAW,EAAA;AANb,GADA,GASA;AACA;AACE,IAAA,OAAO,EAAE,IADX;AAEE,IAAA,YAAY,EAAE,IAFhB;AAGE,IAAA,YAAY,EAAE,IAHhB;AAIE,IAAA,aAAa,EAAE,IAJjB;AAKE,IAAA,SAAS,EAAE,IALb;AAME,IAAA,WAAW,EAAE;AANf,GAfY,CAAlB;;AAyBA,EAAA,KAAK,CAAC,QAAN,GAAiB,iBAAA,CAAA,2BAAA,CAA4B,KAAK,CAAC,QAAlC,EAA0C,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EACtD,YADsD,CAAA,EAC1C;AACf,IAAA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAe,OAAO,KAAK,CAAC,QAAb,KAA0B,UAA1B,IAAwC,KAAK,CAAC,QAAN,CAAe,GAAxD,IAAgE,IAA9E,EAAoF,UAApF;AADU,GAD0C,CAA1C,CAAjB;AAKA,SAAO,KAAP;AACD,CAhIM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","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-commonjs/components/index.js

@@ -1,6 +1,12 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./MenuItem/index"), exports);
+
 tslib_1.__exportStar(require("./MenuList/index"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/index.ts"],"names":[],"mappings":";;;AAAA,2DAAiC;AACjC,2DAAiC","sourcesContent":["export * from './MenuItem/index';\nexport * from './MenuList/index';\n"]}
+{"version":3,"sources":["components/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './MenuItem/index';\nexport * from './MenuList/index';\n"],"sourceRoot":"../src/"}

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

@@ -1,24 +1,40 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_context_selector_1 = require("@fluentui/react-context-selector");
-var 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 },
-    triggerId: '',
-    openOnContext: false,
-    openOnHover: false,
-    hasIcons: false,
-    hasCheckmarks: false,
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-exports.MenuProvider = MenuContext.Provider;
-exports.useMenuContext = function (selector) {
-    return react_context_selector_1.useContextSelector(MenuContext, selector);
+exports.useMenuContext = exports.MenuProvider = exports.MenuContext = void 0;
+
+var react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+
+exports.MenuContext = /*#__PURE__*/react_context_selector_1.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
+});
+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-commonjs/contexts/menuContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"menuContext.js","sourceRoot":"../src/","sources":["contexts/menuContext.ts"],"names":[],"mappings":";;AACA,2EAAsG;AAItG,IAAM,WAAW,GAAG,sCAAa,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;AA0BU,QAAA,YAAY,GAAG,WAAW,CAAC,QAAQ,CAAC;AAEpC,QAAA,cAAc,GAAG,UAAI,QAA8C;IAC9E,OAAA,2CAAkB,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,IAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAKa,OAAA,CAAA,WAAA,gBAAyC,wBAAA,CAAA,aAAA,CAAgC;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,CAAhC,CAAzC;AAwCA,OAAA,CAAA,YAAA,GAAe,OAAA,CAAA,WAAA,CAAY,QAA3B;;AAEN,IAAM,cAAc,GAAG,UAAI,QAAJ,EAAkD;AAC9E,SAAA,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,WAAnB,EAAgC,QAAhC,CAAA;AAAyC,CADpC;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","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-commonjs/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;