@fluentui/react-menu 0.0.0-nightly-20230223-2115.1 → 0.0.0-nightly-20230227-0424.1

package/lib-commonjs/components/MenuList/useMenuListStyles.js

@@ -1,40 +1,30 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    menuListClassNames: ()=>menuListClassNames,
-    useMenuListStyles_unstable: ()=>useMenuListStyles_unstable
+  value: true
 });
-const _react = require("@griffel/react");
-const menuListClassNames = {
-    root: 'fui-MenuList'
+exports.useMenuListStyles_unstable = exports.menuListClassNames = void 0;
+const react_1 = /*#__PURE__*/require("@griffel/react");
+exports.menuListClassNames = {
+  root: 'fui-MenuList'
 };
-const useStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    root: {
-        mc9l5x: "f22iagw",
-        Beiy3e4: "f1vx9l62",
-        i8kkvl: "f16mnhsx",
-        Belr9w4: "fbi42co"
-    }
+const useStyles = /*#__PURE__*/react_1.__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    i8kkvl: "f16mnhsx",
+    Belr9w4: "fbi42co"
+  }
 }, {
-    d: [
-        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
-        ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}",
-        ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}",
-        ".fbi42co{row-gap:2px;}"
-    ]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}"]
 });
-const useMenuListStyles_unstable = (state)=>{
-    const styles = useStyles();
-    state.root.className = (0, _react.mergeClasses)(menuListClassNames.root, styles.root, state.root.className);
-    return state;
-}; //# sourceMappingURL=useMenuListStyles.js.map
-
+/**
+ * Apply styling to the Menu slots based on the state
+ */
+const useMenuListStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = react_1.mergeClasses(exports.menuListClassNames.root, styles.root, state.root.className);
+  return state;
+};
+exports.useMenuListStyles_unstable = useMenuListStyles_unstable;
 //# sourceMappingURL=useMenuListStyles.js.map

package/lib-commonjs/components/MenuList/useMenuListStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/MenuList/useMenuListStyles.js"],"sourcesContent":["import { mergeClasses, __styles, shorthands } from '@griffel/react';\nexport const menuListClassNames = {\n  root: 'fui-MenuList'\n};\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    i8kkvl: \"f16mnhsx\",\n    Belr9w4: \"fbi42co\"\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}\", \".fbi42co{row-gap:2px;}\"]\n});\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useMenuListStyles.js.map"],"names":["menuListClassNames","useMenuListStyles_unstable","root","useStyles","__styles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","d","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,kBAAkB,MAAlBA;IAgBAC,0BAA0B,MAA1BA;;uBAjBsC;AAC5C,MAAMD,qBAAqB;IAChCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAwF;QAA6F;QAAqD;KAAyB;AACzQ;AAIO,MAAMR,6BAA6BS,CAAAA,QAAS;IACjD,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGC,IAAAA,mBAAY,EAACb,mBAAmBE,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAC9F,OAAOF;AACT,GACA,6CAA6C"}
+{"version":3,"mappings":";;;;;;AACA;AAGaA,0BAAkB,GAAkC;EAC/DC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAM1B;AAEF;;;AAGO,MAAMC,0BAA0B,GAAIC,KAAoB,IAAmB;EAChF,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGJ,oBAAY,CAACH,0BAAkB,CAACC,IAAI,EAAEK,MAAM,CAACL,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAC/F,OAAOF,KAAK;AACd,CAAC;AAJYL,kCAA0B","names":["exports","root","useStyles","react_1","useMenuListStyles_unstable","state","styles","className"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/useMenuListStyles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport type { MenuListSlots, MenuListState } from './MenuList.types';\n\nexport const menuListClassNames: SlotClassNames<MenuListSlots> = {\n  root: 'fui-MenuList',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.gap('2px'),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"]}

package/lib-commonjs/components/MenuPopover/MenuPopover.js

@@ -1,21 +1,20 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "MenuPopover", {
-    enumerable: true,
-    get: ()=>MenuPopover
+  value: true
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _useMenuPopover = require("./useMenuPopover");
-const _useMenuPopoverStyles = require("./useMenuPopoverStyles");
-const _renderMenuPopover = require("./renderMenuPopover");
-const MenuPopover = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
-    const state = (0, _useMenuPopover.useMenuPopover_unstable)(props, ref);
-    (0, _useMenuPopoverStyles.useMenuPopoverStyles_unstable)(state);
-    return (0, _renderMenuPopover.renderMenuPopover_unstable)(state);
+exports.MenuPopover = void 0;
+const React = /*#__PURE__*/require("react");
+const useMenuPopover_1 = /*#__PURE__*/require("./useMenuPopover");
+const useMenuPopoverStyles_1 = /*#__PURE__*/require("./useMenuPopoverStyles");
+const renderMenuPopover_1 = /*#__PURE__*/require("./renderMenuPopover");
+/**
+ * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
+ */
+exports.MenuPopover = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useMenuPopover_1.useMenuPopover_unstable(props, ref);
+  useMenuPopoverStyles_1.useMenuPopoverStyles_unstable(state);
+  return renderMenuPopover_1.renderMenuPopover_unstable(state);
 });
-MenuPopover.displayName = 'MenuPopover'; //# sourceMappingURL=MenuPopover.js.map
-
+exports.MenuPopover.displayName = 'MenuPopover';
 //# sourceMappingURL=MenuPopover.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/MenuPopover/MenuPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useMenuPopover_unstable(props, ref);\n  useMenuPopoverStyles_unstable(state);\n  return renderMenuPopover_unstable(state);\n});\nMenuPopover.displayName = 'MenuPopover';\n//# sourceMappingURL=MenuPopover.js.map"],"names":["MenuPopover","React","forwardRef","props","ref","state","useMenuPopover_unstable","useMenuPopoverStyles_unstable","renderMenuPopover_unstable","displayName"],"mappings":";;;;+BAOaA;;aAAAA;;;6DAPU;gCACiB;sCACM;mCACH;AAIpC,MAAMA,cAAc,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACvE,MAAMC,QAAQC,IAAAA,uCAAuB,EAACH,OAAOC;IAC7CG,IAAAA,mDAA6B,EAACF;IAC9B,OAAOG,IAAAA,6CAA0B,EAACH;AACpC;AACAL,YAAYS,WAAW,GAAG,eAC1B,uCAAuC"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,mBAAW,gBAA0CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGC,wCAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDG,oDAA6B,CAACF,KAAK,CAAC;EACpC,OAAOG,8CAA0B,CAACH,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFL,mBAAW,CAACS,WAAW,GAAG,aAAa","names":["exports","React","forwardRef","props","ref","state","useMenuPopover_1","useMenuPopoverStyles_1","renderMenuPopover_1","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n  const state = useMenuPopover_unstable(props, ref);\n\n  useMenuPopoverStyles_unstable(state);\n  return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"]}

package/lib-commonjs/components/MenuPopover/MenuPopover.types.js

@@ -1,7 +1,6 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
- //# sourceMappingURL=MenuPopover.types.js.map
-
 //# sourceMappingURL=MenuPopover.types.js.map

package/lib-commonjs/components/MenuPopover/MenuPopover.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/MenuPopover/MenuPopover.types.js"],"sourcesContent":["export {};\n//# sourceMappingURL=MenuPopover.types.js.map"],"names":[],"mappings":";;;;CACA,6CAA6C"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"","sources":[],"sourcesContent":[]}

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

@@ -1,13 +1,12 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./MenuPopover"), exports);
-_exportStar(require("./MenuPopover.types"), exports);
-_exportStar(require("./renderMenuPopover"), exports);
-_exportStar(require("./useMenuPopover"), exports);
-_exportStar(require("./useMenuPopoverStyles"), exports);
- //# sourceMappingURL=index.js.map
-
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./MenuPopover"), exports);
+tslib_1.__exportStar(require("./MenuPopover.types"), exports);
+tslib_1.__exportStar(require("./renderMenuPopover"), exports);
+tslib_1.__exportStar(require("./useMenuPopover"), exports);
+tslib_1.__exportStar(require("./useMenuPopoverStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/MenuPopover/index.js"],"sourcesContent":["export * from './MenuPopover';\nexport * from './MenuPopover.types';\nexport * from './renderMenuPopover';\nexport * from './useMenuPopover';\nexport * from './useMenuPopoverStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/index.ts"],"sourcesContent":["export * from './MenuPopover';\nexport * from './MenuPopover.types';\nexport * from './renderMenuPopover';\nexport * from './useMenuPopover';\nexport * from './useMenuPopoverStyles';\n"]}

package/lib-commonjs/components/MenuPopover/renderMenuPopover.js

@@ -1,23 +1,28 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "renderMenuPopover_unstable", {
-    enumerable: true,
-    get: ()=>renderMenuPopover_unstable
+  value: true
 });
-const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _extends = require("@swc/helpers/lib/_extends.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactUtilities = require("@fluentui/react-utilities");
-const _reactPortal = require("@fluentui/react-portal");
-const renderMenuPopover_unstable = (state)=>{
-    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
-    if (state.inline) {
-        return /*#__PURE__*/ _react.createElement(slots.root, _extends({}, slotProps.root));
-    }
-    return /*#__PURE__*/ _react.createElement(_reactPortal.Portal, null, /*#__PURE__*/ _react.createElement(slots.root, _extends({}, slotProps.root)));
-}; //# sourceMappingURL=renderMenuPopover.js.map
-
+exports.renderMenuPopover_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
+/**
+ * Render the final JSX of MenuPopover
+ */
+const renderMenuPopover_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  if (state.inline) {
+    return React.createElement(slots.root, {
+      ...slotProps.root
+    });
+  }
+  return React.createElement(react_portal_1.Portal, null, React.createElement(slots.root, {
+    ...slotProps.root
+  }));
+};
+exports.renderMenuPopover_unstable = renderMenuPopover_unstable;
 //# sourceMappingURL=renderMenuPopover.js.map

package/lib-commonjs/components/MenuPopover/renderMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/MenuPopover/renderMenuPopover.js"],"sourcesContent":["import _extends from \"@swc/helpers/src/_extends.mjs\";\nimport * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = state => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  if (state.inline) {\n    return /*#__PURE__*/React.createElement(slots.root, _extends({}, slotProps.root));\n  }\n  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.root, _extends({}, slotProps.root)));\n};\n//# sourceMappingURL=renderMenuPopover.js.map"],"names":["renderMenuPopover_unstable","state","slots","slotProps","getSlots","inline","React","createElement","root","_extends","Portal"],"mappings":";;;;+BAOaA;;aAAAA;;;;yBAPQ;6DACE;gCACE;6BACF;AAIhB,MAAMA,6BAA6BC,CAAAA,QAAS;IACjD,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,IAAIA,MAAMI,MAAM,EAAE;QAChB,OAAO,WAAW,GAAEC,OAAMC,aAAa,CAACL,MAAMM,IAAI,EAAEC,SAAS,CAAC,GAAGN,UAAUK,IAAI;IACjF,CAAC;IACD,OAAO,WAAW,GAAEF,OAAMC,aAAa,CAACG,mBAAM,EAAE,IAAI,EAAE,WAAW,GAAEJ,OAAMC,aAAa,CAACL,MAAMM,IAAI,EAAEC,SAAS,CAAC,GAAGN,UAAUK,IAAI;AAChI,GACA,6CAA6C"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAEA;;;AAGO,MAAMA,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAmBH,KAAK,CAAC;EAE9D,IAAIA,KAAK,CAACI,MAAM,EAAE;IAChB,OAAOC,oBAACJ,KAAK,CAACK,IAAI;MAAA,GAAKJ,SAAS,CAACI;IAAI,EAAI;;EAG3C,OACED,oBAACE,qBAAM,QACLF,oBAACJ,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CAC3B;AAEb,CAAC;AAZYE,kCAA0B","names":["renderMenuPopover_unstable","state","slots","slotProps","react_utilities_1","inline","React","root","react_portal_1","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"]}

package/lib-commonjs/components/MenuPopover/useMenuPopover.js

@@ -1,104 +1,113 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useMenuPopover_unstable", {
-    enumerable: true,
-    get: ()=>useMenuPopover_unstable
+  value: true
 });
-const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _keyboardKeys = require("@fluentui/keyboard-keys");
-const _reactUtilities = require("@fluentui/react-utilities");
-const _menuContext = require("../../contexts/menuContext");
-const _index = require("../../utils/index");
-const _reactSharedContexts = require("@fluentui/react-shared-contexts");
-const _useIsSubmenu = require("../../utils/useIsSubmenu");
-const useMenuPopover_unstable = (props, ref)=>{
-    const popoverRef = (0, _menuContext.useMenuContext_unstable)((context)=>context.menuPopoverRef);
-    const setOpen = (0, _menuContext.useMenuContext_unstable)((context)=>context.setOpen);
-    const open = (0, _menuContext.useMenuContext_unstable)((context)=>context.open);
-    const openOnHover = (0, _menuContext.useMenuContext_unstable)((context)=>context.openOnHover);
-    const isSubmenu = (0, _useIsSubmenu.useIsSubmenu)();
-    const canDispatchCustomEventRef = _react.useRef(true);
-    const throttleDispatchTimerRef = _react.useRef(0);
-    const { dir  } = (0, _reactSharedContexts.useFluent_unstable)();
-    const CloseArrowKey = dir === 'ltr' ? _keyboardKeys.ArrowLeft : _keyboardKeys.ArrowRight;
-    // use DOM listener since react events propagate up the react tree
-    // no need to do `contains` logic as menus are all positioned in different portals
-    const mouseOverListenerCallbackRef = _react.useCallback((node)=>{
-        if (node) {
-            // Dispatches the custom menu mouse enter event with throttling
-            // Needs to trigger on mouseover to support keyboard + mouse together
-            // i.e. keyboard opens submenus while cursor is still on the parent
-            node.addEventListener('mouseover', (e)=>{
-                if (canDispatchCustomEventRef.current) {
-                    canDispatchCustomEventRef.current = false;
-                    (0, _index.dispatchMenuEnterEvent)(popoverRef.current, e);
-                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                    // @ts-ignore #16889 Node setTimeout type leaking
-                    throttleDispatchTimerRef.current = setTimeout(()=>canDispatchCustomEventRef.current = true, 250);
-                }
-            });
-        }
-    }, [
-        popoverRef,
-        throttleDispatchTimerRef
-    ]);
-    _react.useEffect(()=>{
-        ()=>clearTimeout(throttleDispatchTimerRef.current);
-    }, []);
-    const inline = (0, _menuContext.useMenuContext_unstable)((context)=>context.inline) ?? false;
-    const rootProps = (0, _reactUtilities.getNativeElementProps)('div', {
-        role: 'presentation',
-        ...props,
-        ref: (0, _reactUtilities.useMergedRefs)(ref, popoverRef, mouseOverListenerCallbackRef)
-    });
-    const { onMouseEnter: onMouseEnterOriginal , onKeyDown: onKeyDownOriginal  } = rootProps;
-    rootProps.onMouseEnter = (0, _reactUtilities.useEventCallback)((event)=>{
-        if (openOnHover) {
-            setOpen(event, {
-                open: true,
-                keyboard: false,
-                type: 'menuPopoverMouseEnter',
-                event
-            });
+exports.useMenuPopover_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const menuContext_1 = /*#__PURE__*/require("../../contexts/menuContext");
+const index_1 = /*#__PURE__*/require("../../utils/index");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+const useIsSubmenu_1 = /*#__PURE__*/require("../../utils/useIsSubmenu");
+/**
+ * Create the state required to render MenuPopover.
+ *
+ * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,
+ * before being passed to renderMenuPopover_unstable.
+ *
+ * @param props - props from this instance of MenuPopover
+ * @param ref - reference to root HTMLElement of MenuPopover
+ */
+const useMenuPopover_unstable = (props, ref) => {
+  var _a;
+  const popoverRef = menuContext_1.useMenuContext_unstable(context => context.menuPopoverRef);
+  const setOpen = menuContext_1.useMenuContext_unstable(context => context.setOpen);
+  const open = menuContext_1.useMenuContext_unstable(context => context.open);
+  const openOnHover = menuContext_1.useMenuContext_unstable(context => context.openOnHover);
+  const isSubmenu = useIsSubmenu_1.useIsSubmenu();
+  const canDispatchCustomEventRef = React.useRef(true);
+  const throttleDispatchTimerRef = React.useRef(0);
+  const {
+    dir
+  } = react_shared_contexts_1.useFluent_unstable();
+  const CloseArrowKey = dir === 'ltr' ? keyboard_keys_1.ArrowLeft : keyboard_keys_1.ArrowRight;
+  // use DOM listener since react events propagate up the react tree
+  // no need to do `contains` logic as menus are all positioned in different portals
+  const mouseOverListenerCallbackRef = React.useCallback(node => {
+    if (node) {
+      // Dispatches the custom menu mouse enter event with throttling
+      // Needs to trigger on mouseover to support keyboard + mouse together
+      // i.e. keyboard opens submenus while cursor is still on the parent
+      node.addEventListener('mouseover', e => {
+        if (canDispatchCustomEventRef.current) {
+          canDispatchCustomEventRef.current = false;
+          index_1.dispatchMenuEnterEvent(popoverRef.current, e);
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore #16889 Node setTimeout type leaking
+          throttleDispatchTimerRef.current = setTimeout(() => canDispatchCustomEventRef.current = true, 250);
         }
-        onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);
-    });
-    rootProps.onKeyDown = (0, _reactUtilities.useEventCallback)((event)=>{
-        const key = event.key;
-        if (key === _keyboardKeys.Escape || isSubmenu && key === CloseArrowKey) {
-            var _popoverRef_current;
-            if (open && ((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(event.target))) {
-                setOpen(event, {
-                    open: false,
-                    keyboard: true,
-                    type: 'menuPopoverKeyDown',
-                    event
-                });
-                // stop propagation to avoid conflicting with other elements that listen for `Escape`
-                // e,g: Dialog, Popover and Tooltip
-                event.stopPropagation();
-            }
-        }
-        if (key === _keyboardKeys.Tab) {
-            setOpen(event, {
-                open: false,
-                keyboard: true,
-                type: 'menuPopoverKeyDown',
-                event
-            });
-        }
-        onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);
-    });
-    return {
-        inline,
-        components: {
-            root: 'div'
-        },
-        root: rootProps
-    };
-}; //# sourceMappingURL=useMenuPopover.js.map
-
+      });
+    }
+  }, [popoverRef, throttleDispatchTimerRef]);
+  React.useEffect(() => {
+    () => clearTimeout(throttleDispatchTimerRef.current);
+  }, []);
+  const inline = (_a = menuContext_1.useMenuContext_unstable(context => context.inline)) !== null && _a !== void 0 ? _a : false;
+  const rootProps = react_utilities_1.getNativeElementProps('div', {
+    role: 'presentation',
+    ...props,
+    ref: react_utilities_1.useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)
+  });
+  const {
+    onMouseEnter: onMouseEnterOriginal,
+    onKeyDown: onKeyDownOriginal
+  } = rootProps;
+  rootProps.onMouseEnter = react_utilities_1.useEventCallback(event => {
+    if (openOnHover) {
+      setOpen(event, {
+        open: true,
+        keyboard: false,
+        type: 'menuPopoverMouseEnter',
+        event
+      });
+    }
+    onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);
+  });
+  rootProps.onKeyDown = react_utilities_1.useEventCallback(event => {
+    var _a;
+    const key = event.key;
+    if (key === keyboard_keys_1.Escape || isSubmenu && key === CloseArrowKey) {
+      if (open && ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+        setOpen(event, {
+          open: false,
+          keyboard: true,
+          type: 'menuPopoverKeyDown',
+          event
+        });
+        // stop propagation to avoid conflicting with other elements that listen for `Escape`
+        // e,g: Dialog, Popover and Tooltip
+        event.stopPropagation();
+      }
+    }
+    if (key === keyboard_keys_1.Tab) {
+      setOpen(event, {
+        open: false,
+        keyboard: true,
+        type: 'menuPopoverKeyDown',
+        event
+      });
+    }
+    onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);
+  });
+  return {
+    inline,
+    components: {
+      root: 'div'
+    },
+    root: rootProps
+  };
+};
+exports.useMenuPopover_unstable = useMenuPopover_unstable;
 //# sourceMappingURL=useMenuPopover.js.map

package/lib-commonjs/components/MenuPopover/useMenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/MenuPopover/useMenuPopover.js"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props, ref) => {\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\n  const {\n    dir\n  } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(node => {\n    if (node) {\n      // Dispatches the custom menu mouse enter event with throttling\n      // Needs to trigger on mouseover to support keyboard + mouse together\n      // i.e. keyboard opens submenus while cursor is still on the parent\n      node.addEventListener('mouseover', e => {\n        if (canDispatchCustomEventRef.current) {\n          canDispatchCustomEventRef.current = false;\n          dispatchMenuEnterEvent(popoverRef.current, e);\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore #16889 Node setTimeout type leaking\n          throttleDispatchTimerRef.current = setTimeout(() => canDispatchCustomEventRef.current = true, 250);\n        }\n      });\n    }\n  }, [popoverRef, throttleDispatchTimerRef]);\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const rootProps = getNativeElementProps('div', {\n    role: 'presentation',\n    ...props,\n    ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)\n  });\n  const {\n    onMouseEnter: onMouseEnterOriginal,\n    onKeyDown: onKeyDownOriginal\n  } = rootProps;\n  rootProps.onMouseEnter = useEventCallback(event => {\n    if (openOnHover) {\n      setOpen(event, {\n        open: true,\n        keyboard: false,\n        type: 'menuPopoverMouseEnter',\n        event\n      });\n    }\n    onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);\n  });\n  rootProps.onKeyDown = useEventCallback(event => {\n    const key = event.key;\n    if (key === Escape || isSubmenu && key === CloseArrowKey) {\n      var _popoverRef_current;\n      if (open && ((_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.contains(event.target))) {\n        setOpen(event, {\n          open: false,\n          keyboard: true,\n          type: 'menuPopoverKeyDown',\n          event\n        });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover and Tooltip\n        event.stopPropagation();\n      }\n    }\n    if (key === Tab) {\n      setOpen(event, {\n        open: false,\n        keyboard: true,\n        type: 'menuPopoverKeyDown',\n        event\n      });\n    }\n    onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);\n  });\n  return {\n    inline,\n    components: {\n      root: 'div'\n    },\n    root: rootProps\n  };\n};\n//# sourceMappingURL=useMenuPopover.js.map"],"names":["useMenuPopover_unstable","props","ref","popoverRef","useMenuContext_unstable","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","useIsSubmenu","canDispatchCustomEventRef","React","useRef","throttleDispatchTimerRef","dir","useFluent","CloseArrowKey","ArrowLeft","ArrowRight","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","dispatchMenuEnterEvent","setTimeout","useEffect","clearTimeout","inline","rootProps","getNativeElementProps","role","useMergedRefs","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","useEventCallback","event","keyboard","type","key","Escape","_popoverRef_current","contains","target","stopPropagation","Tab","components","root"],"mappings":"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"}
+{"version":3,"mappings":"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","names":["useMenuPopover_unstable","props","ref","popoverRef","menuContext_1","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","useIsSubmenu_1","canDispatchCustomEventRef","React","useRef","throttleDispatchTimerRef","dir","react_shared_contexts_1","CloseArrowKey","keyboard_keys_1","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","index_1","setTimeout","useEffect","clearTimeout","inline","rootProps","react_utilities_1","role","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","stopPropagation","components","root","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';\nimport { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { dispatchMenuEnterEvent } from '../../utils/index';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\n\n/**\n * Create the state required to render MenuPopover.\n *\n * The returned state can be modified with hooks such as useMenuPopoverStyles_unstable,\n * before being passed to renderMenuPopover_unstable.\n *\n * @param props - props from this instance of MenuPopover\n * @param ref - reference to root HTMLElement of MenuPopover\n */\nexport const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<HTMLElement>): MenuPopoverState => {\n  const popoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const isSubmenu = useIsSubmenu();\n  const canDispatchCustomEventRef = React.useRef(true);\n  const throttleDispatchTimerRef = React.useRef(0);\n\n  const { dir } = useFluent();\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n  // use DOM listener since react events propagate up the react tree\n  // no need to do `contains` logic as menus are all positioned in different portals\n  const mouseOverListenerCallbackRef = React.useCallback(\n    (node: HTMLElement) => {\n      if (node) {\n        // Dispatches the custom menu mouse enter event with throttling\n        // Needs to trigger on mouseover to support keyboard + mouse together\n        // i.e. keyboard opens submenus while cursor is still on the parent\n        node.addEventListener('mouseover', e => {\n          if (canDispatchCustomEventRef.current) {\n            canDispatchCustomEventRef.current = false;\n            dispatchMenuEnterEvent(popoverRef.current as HTMLElement, e);\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore #16889 Node setTimeout type leaking\n            throttleDispatchTimerRef.current = setTimeout(() => (canDispatchCustomEventRef.current = true), 250);\n          }\n        });\n      }\n    },\n    [popoverRef, throttleDispatchTimerRef],\n  );\n\n  React.useEffect(() => {\n    () => clearTimeout(throttleDispatchTimerRef.current);\n  }, []);\n\n  const inline = useMenuContext_unstable(context => context.inline) ?? false;\n  const rootProps = getNativeElementProps('div', {\n    role: 'presentation',\n    ...props,\n    ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),\n  });\n\n  const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;\n\n  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });\n    }\n\n    onMouseEnterOriginal?.(event);\n  });\n\n  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const key = event.key;\n\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (open && popoverRef.current?.contains(event.target as HTMLElement)) {\n        setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n        // stop propagation to avoid conflicting with other elements that listen for `Escape`\n        // e,g: Dialog, Popover and Tooltip\n        event.stopPropagation();\n      }\n    }\n\n    if (key === Tab) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuPopoverKeyDown', event });\n    }\n\n    onKeyDownOriginal?.(event);\n  });\n\n  return {\n    inline,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"]}