@fluentui/react-menu 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230322-0439.1

package/lib/components/MenuPopover/MenuPopover.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { useMenuPopover_unstable } from "./useMenuPopover";
-import { useMenuPopoverStyles_unstable } from "./useMenuPopoverStyles";
-import { renderMenuPopover_unstable } from "./renderMenuPopover";
-import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
+import * as React from 'react';
+import { useMenuPopover_unstable } from './useMenuPopover';
+import { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';
+import { renderMenuPopover_unstable } from './renderMenuPopover';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
  */
@@ -15,5 +15,5 @@ export const MenuPopover = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCustomStyles(state);
   return renderMenuPopover_unstable(state);
 });
-MenuPopover.displayName = "MenuPopover";
+MenuPopover.displayName = 'MenuPopover';
 //# sourceMappingURL=MenuPopover.js.map

package/lib/components/MenuPopover/index.js

@@ -1,6 +1,6 @@
-export * from "./MenuPopover";
-export * from "./MenuPopover.types";
-export * from "./renderMenuPopover";
-export * from "./useMenuPopover";
-export * from "./useMenuPopoverStyles";
+export * from './MenuPopover';
+export * from './MenuPopover.types';
+export * from './renderMenuPopover';
+export * from './useMenuPopover';
+export * from './useMenuPopoverStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/MenuPopover/renderMenuPopover.js

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { getSlots } from "@fluentui/react-utilities";
-import { Portal } from "@fluentui/react-portal";
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import { Portal } from '@fluentui/react-portal';
 /**
  * Render the final JSX of MenuPopover
  */

package/lib/components/MenuPopover/useMenuPopover.js

@@ -1,10 +1,10 @@
-import * as React from "react";
-import { ArrowLeft, Tab, ArrowRight, Escape } from "@fluentui/keyboard-keys";
-import { getNativeElementProps, useEventCallback, useMergedRefs } from "@fluentui/react-utilities";
-import { useMenuContext_unstable } from "../../contexts/menuContext";
-import { dispatchMenuEnterEvent } from "../../utils/index";
-import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
-import { useIsSubmenu } from "../../utils/useIsSubmenu";
+import * as React from 'react';
+import { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';
+import { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { useMenuContext_unstable } from '../../contexts/menuContext';
+import { dispatchMenuEnterEvent } from '../../utils/index';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useIsSubmenu } from '../../utils/useIsSubmenu';
 /**
  * Create the state required to render MenuPopover.
  *
@@ -25,7 +25,7 @@ export const useMenuPopover_unstable = (props, ref) => {
   const {
     dir
   } = useFluent();
-  const CloseArrowKey = dir === "ltr" ? ArrowLeft : ArrowRight;
+  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : 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 => {
@@ -33,7 +33,7 @@ export const useMenuPopover_unstable = (props, ref) => {
       // 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 => {
+      node.addEventListener('mouseover', e => {
         if (canDispatchCustomEventRef.current) {
           canDispatchCustomEventRef.current = false;
           dispatchMenuEnterEvent(popoverRef.current, e);
@@ -47,10 +47,11 @@ export const useMenuPopover_unstable = (props, ref) => {
   React.useEffect(() => {
     () => clearTimeout(throttleDispatchTimerRef.current);
   }, []);
-  const inline = useMenuContext_unstable(context => context.inline) ?? false;
+  var _useMenuContext_unstable;
+  const inline = (_useMenuContext_unstable = useMenuContext_unstable(context => context.inline)) !== null && _useMenuContext_unstable !== void 0 ? _useMenuContext_unstable : false;
   const mountNode = useMenuContext_unstable(context => context.mountNode);
-  const rootProps = getNativeElementProps("div", {
-    role: "presentation",
+  const rootProps = getNativeElementProps('div', {
+    role: 'presentation',
     ...props,
     ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef)
   });
@@ -63,20 +64,21 @@ export const useMenuPopover_unstable = (props, ref) => {
       setOpen(event, {
         open: true,
         keyboard: false,
-        type: "menuPopoverMouseEnter",
+        type: 'menuPopoverMouseEnter',
         event
       });
     }
-    onMouseEnterOriginal?.(event);
+    onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(event);
   });
   rootProps.onKeyDown = useEventCallback(event => {
     const key = event.key;
     if (key === Escape || isSubmenu && key === CloseArrowKey) {
-      if (open && popoverRef.current?.contains(event.target)) {
+      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",
+          type: 'menuPopoverKeyDown',
           event
         });
         // stop propagation to avoid conflicting with other elements that listen for `Escape`
@@ -88,17 +90,17 @@ export const useMenuPopover_unstable = (props, ref) => {
       setOpen(event, {
         open: false,
         keyboard: true,
-        type: "menuPopoverKeyDown",
+        type: 'menuPopoverKeyDown',
         event
       });
     }
-    onKeyDownOriginal?.(event);
+    onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(event);
   });
   return {
     inline,
     mountNode,
     components: {
-      root: "div"
+      root: 'div'
     },
     root: rootProps
   };

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

@@ -1 +1 @@
-{"version":3,"names":["React","ArrowLeft","Tab","ArrowRight","Escape","getNativeElementProps","useEventCallback","useMergedRefs","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","setTimeout","useEffect","clearTimeout","inline","mountNode","rootProps","role","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","contains","target","stopPropagation","components","root"],"sources":["../../../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 mountNode = useMenuContext_unstable(context => context.mountNode);\n\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    mountNode,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,SAAS,EAAEC,GAAG,EAAEC,UAAU,EAAEC,MAAM,QAAQ;AACnD,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ;AAEvE,SAASC,uBAAuB,QAAQ;AACxC,SAASC,sBAAsB,QAAQ;AACvC,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAChD,SAASC,YAAY,QAAQ;AAE7B;;;;;;;;;AASA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAyBC,GAAA,KAAkD;EACjH,MAAMC,UAAA,GAAaR,uBAAA,CAAwBS,OAAA,IAAWA,OAAA,CAAQC,cAAc;EAC5E,MAAMC,OAAA,GAAUX,uBAAA,CAAwBS,OAAA,IAAWA,OAAA,CAAQE,OAAO;EAClE,MAAMC,IAAA,GAAOZ,uBAAA,CAAwBS,OAAA,IAAWA,OAAA,CAAQG,IAAI;EAC5D,MAAMC,WAAA,GAAcb,uBAAA,CAAwBS,OAAA,IAAWA,OAAA,CAAQI,WAAW;EAC1E,MAAMC,SAAA,GAAYV,YAAA;EAClB,MAAMW,yBAAA,GAA4BvB,KAAA,CAAMwB,MAAM,CAAC,IAAI;EACnD,MAAMC,wBAAA,GAA2BzB,KAAA,CAAMwB,MAAM,CAAC;EAE9C,MAAM;IAAEE;EAAG,CAAE,GAAGf,SAAA;EAChB,MAAMgB,aAAA,GAAgBD,GAAA,KAAQ,QAAQzB,SAAA,GAAYE,UAAU;EAE5D;EACA;EACA,MAAMyB,4BAAA,GAA+B5B,KAAA,CAAM6B,WAAW,CACnDC,IAAA,IAAsB;IACrB,IAAIA,IAAA,EAAM;MACR;MACA;MACA;MACAA,IAAA,CAAKC,gBAAgB,CAAC,aAAaC,CAAA,IAAK;QACtC,IAAIT,yBAAA,CAA0BU,OAAO,EAAE;UACrCV,yBAAA,CAA0BU,OAAO,GAAG,KAAK;UACzCxB,sBAAA,CAAuBO,UAAA,CAAWiB,OAAO,EAAiBD,CAAA;UAC1D;UACA;UACAP,wBAAA,CAAyBQ,OAAO,GAAGC,UAAA,CAAW,MAAOX,yBAAA,CAA0BU,OAAO,GAAG,IAAI,EAAG;QAClG;MACF;IACF;EACF,GACA,CAACjB,UAAA,EAAYS,wBAAA,CAAyB;EAGxCzB,KAAA,CAAMmC,SAAS,CAAC,MAAM;IACpB,MAAMC,YAAA,CAAaX,wBAAA,CAAyBQ,OAAO;EACrD,GAAG,EAAE;EAEL,MAAMI,MAAA,GAAS7B,uBAAA,CAAwBS,OAAA,IAAWA,OAAA,CAAQoB,MAAM,KAAK,KAAK;EAC1E,MAAMC,SAAA,GAAY9B,uBAAA,CAAwBS,OAAA,IAAWA,OAAA,CAAQqB,SAAS;EAEtE,MAAMC,SAAA,GAAYlC,qBAAA,CAAsB,OAAO;IAC7CmC,IAAA,EAAM;IACN,GAAG1B,KAAK;IACRC,GAAA,EAAKR,aAAA,CAAcQ,GAAA,EAAKC,UAAA,EAAYY,4BAAA;EACtC;EAEA,MAAM;IAAEa,YAAA,EAAcC,oBAAA;IAAsBC,SAAA,EAAWC;EAAiB,CAAE,GAAGL,SAAA;EAE7EA,SAAA,CAAUE,YAAY,GAAGnC,gBAAA,CAAkBuC,KAAA,IAAyC;IAClF,IAAIxB,WAAA,EAAa;MACfF,OAAA,CAAQ0B,KAAA,EAAO;QAAEzB,IAAA,EAAM,IAAI;QAAE0B,QAAA,EAAU,KAAK;QAAEC,IAAA,EAAM;QAAyBF;MAAM;IACrF;IAEAH,oBAAA,GAAuBG,KAAA;EACzB;EAEAN,SAAA,CAAUI,SAAS,GAAGrC,gBAAA,CAAkBuC,KAAA,IAA4C;IAClF,MAAMG,GAAA,GAAMH,KAAA,CAAMG,GAAG;IAErB,IAAIA,GAAA,KAAQ5C,MAAA,IAAWkB,SAAA,IAAa0B,GAAA,KAAQrB,aAAA,EAAgB;MAC1D,IAAIP,IAAA,IAAQJ,UAAA,CAAWiB,OAAO,EAAEgB,QAAA,CAASJ,KAAA,CAAMK,MAAM,GAAkB;QACrE/B,OAAA,CAAQ0B,KAAA,EAAO;UAAEzB,IAAA,EAAM,KAAK;UAAE0B,QAAA,EAAU,IAAI;UAAEC,IAAA,EAAM;UAAsBF;QAAM;QAChF;QACA;QACAA,KAAA,CAAMM,eAAe;MACvB;IACF;IAEA,IAAIH,GAAA,KAAQ9C,GAAA,EAAK;MACfiB,OAAA,CAAQ0B,KAAA,EAAO;QAAEzB,IAAA,EAAM,KAAK;QAAE0B,QAAA,EAAU,IAAI;QAAEC,IAAA,EAAM;QAAsBF;MAAM;IAClF;IAEAD,iBAAA,GAAoBC,KAAA;EACtB;EAEA,OAAO;IACLR,MAAA;IACAC,SAAA;IACAc,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAMd;EACR;AACF"}
+{"version":3,"names":["React","ArrowLeft","Tab","ArrowRight","Escape","getNativeElementProps","useEventCallback","useMergedRefs","useMenuContext_unstable","dispatchMenuEnterEvent","useFluent_unstable","useFluent","useIsSubmenu","useMenuPopover_unstable","props","ref","popoverRef","context","menuPopoverRef","setOpen","open","openOnHover","isSubmenu","canDispatchCustomEventRef","useRef","throttleDispatchTimerRef","dir","CloseArrowKey","mouseOverListenerCallbackRef","useCallback","node","addEventListener","e","current","setTimeout","useEffect","clearTimeout","_useMenuContext_unstable","inline","mountNode","rootProps","role","onMouseEnter","onMouseEnterOriginal","onKeyDown","onKeyDownOriginal","event","keyboard","type","key","_popoverRef_current","contains","target","stopPropagation","components","root"],"sources":["../../../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 mountNode = useMenuContext_unstable(context => context.mountNode);\n\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    mountNode,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"mappings":"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"}

package/lib/components/MenuPopover/useMenuPopoverStyles.js

@@ -1,7 +1,7 @@
-import { shorthands, mergeClasses, __styles } from "@griffel/react";
-import { tokens, typographyStyles } from "@fluentui/react-theme";
+import { shorthands, mergeClasses, __styles } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const menuPopoverClassNames = {
-  root: "fui-MenuPopover"
+  root: 'fui-MenuPopover'
 };
 const useStyles = /*#__PURE__*/__styles({
   root: {

package/lib/components/MenuSplitGroup/MenuSplitGroup.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { useMenuSplitGroup_unstable } from "./useMenuSplitGroup";
-import { renderMenuSplitGroup_unstable } from "./renderMenuSplitGroup";
-import { useMenuSplitGroupStyles_unstable } from "./useMenuSplitGroupStyles";
-import { useCustomStyleHooks_unstable } from "@fluentui/react-shared-contexts";
+import * as React from 'react';
+import { useMenuSplitGroup_unstable } from './useMenuSplitGroup';
+import { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';
+import { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.
  */
@@ -15,5 +15,5 @@ export const MenuSplitGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   useCustomStyles(state);
   return renderMenuSplitGroup_unstable(state);
 });
-MenuSplitGroup.displayName = "MenuSplitGroup";
+MenuSplitGroup.displayName = 'MenuSplitGroup';
 //# sourceMappingURL=MenuSplitGroup.js.map

package/lib/components/MenuSplitGroup/index.js

@@ -1,6 +1,6 @@
-export * from "./MenuSplitGroup";
-export * from "./MenuSplitGroup.types";
-export * from "./renderMenuSplitGroup";
-export * from "./useMenuSplitGroup";
-export * from "./useMenuSplitGroupStyles";
+export * from './MenuSplitGroup';
+export * from './MenuSplitGroup.types';
+export * from './renderMenuSplitGroup';
+export * from './useMenuSplitGroup';
+export * from './useMenuSplitGroupStyles';
 //# sourceMappingURL=index.js.map

package/lib/components/MenuSplitGroup/renderMenuSplitGroup.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { getSlots } from "@fluentui/react-utilities";
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of MenuSplitGroup
  */

package/lib/components/MenuSplitGroup/useMenuSplitGroup.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { getNativeElementProps, getRTLSafeKey, useMergedRefs } from "@fluentui/react-utilities";
-import { useFocusFinders } from "@fluentui/react-tabster";
-import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
-import { ArrowRight, ArrowLeft } from "@fluentui/keyboard-keys";
+import * as React from 'react';
+import { getNativeElementProps, getRTLSafeKey, useMergedRefs } from '@fluentui/react-utilities';
+import { useFocusFinders } from '@fluentui/react-tabster';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
 /**
  * Create the state required to render MenuSplitGroup.
  *
@@ -25,32 +25,33 @@ export const useMenuSplitGroup_unstable = (props, ref) => {
     findPrevFocusable
   } = useFocusFinders();
   const onKeyDown = React.useCallback(e => {
-    const activeElement = targetDocument?.activeElement;
+    var _innerRef_current;
+    const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
     if (!activeElement) {
       return;
     }
-    if (!innerRef.current?.contains(activeElement)) {
+    if (!((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement))) {
       return;
     }
     if (e.key === nextArrowKey) {
       const next = findNextFocusable(activeElement, {
         container: innerRef.current
       });
-      next?.focus();
+      next === null || next === void 0 ? void 0 : next.focus();
     }
     if (e.key === prevArrowKey) {
       const prev = findPrevFocusable(activeElement, {
         container: innerRef.current
       });
-      prev?.focus();
+      prev === null || prev === void 0 ? void 0 : prev.focus();
     }
   }, [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey]);
   return {
     components: {
-      root: "div"
+      root: 'div'
     },
-    root: getNativeElementProps("div", {
-      role: "group",
+    root: getNativeElementProps('div', {
+      role: 'group',
       ref: useMergedRefs(ref, innerRef),
       onKeyDown,
       ...props

package/lib/components/MenuSplitGroup/useMenuSplitGroup.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","getRTLSafeKey","useMergedRefs","useFocusFinders","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","useMenuSplitGroup_unstable","props","ref","innerRef","useRef","dir","targetDocument","nextArrowKey","prevArrowKey","findNextFocusable","findPrevFocusable","onKeyDown","useCallback","e","activeElement","current","contains","key","next","container","focus","prev","components","root","role"],"sources":["../../../src/components/MenuSplitGroup/useMenuSplitGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, getRTLSafeKey, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */\nexport const useMenuSplitGroup_unstable = (\n  props: MenuSplitGroupProps,\n  ref: React.Ref<HTMLElement>,\n): MenuSplitGroupState => {\n  const innerRef = React.useRef<HTMLElement>();\n  const { dir, targetDocument } = useFluent();\n\n  const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n  const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const onKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const activeElement = targetDocument?.activeElement;\n      if (!activeElement) {\n        return;\n      }\n\n      if (!innerRef.current?.contains(activeElement)) {\n        return;\n      }\n\n      if (e.key === nextArrowKey) {\n        const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        next?.focus();\n      }\n\n      if (e.key === prevArrowKey) {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    },\n    [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey],\n  );\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      role: 'group',\n      ref: useMergedRefs(ref, innerRef),\n      onKeyDown,\n      ...props,\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,aAAa,QAAQ;AACpE,SAASC,eAAe,QAAQ;AAChC,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAEhD,SAASC,UAAU,EAAEC,SAAS,QAAQ;AAEtC;;;;;;;;;AASA,OAAO,MAAMC,0BAAA,GAA6BA,CACxCC,KAAA,EACAC,GAAA,KACwB;EACxB,MAAMC,QAAA,GAAWZ,KAAA,CAAMa,MAAM;EAC7B,MAAM;IAAEC,GAAA;IAAKC;EAAc,CAAE,GAAGT,SAAA;EAEhC,MAAMU,YAAA,GAAed,aAAA,CAAcK,UAAA,EAAYO,GAAA;EAC/C,MAAMG,YAAA,GAAef,aAAA,CAAcM,SAAA,EAAWM,GAAA;EAE9C,MAAM;IAAEI,iBAAA;IAAmBC;EAAiB,CAAE,GAAGf,eAAA;EAEjD,MAAMgB,SAAA,GAAYpB,KAAA,CAAMqB,WAAW,CAChCC,CAAA,IAAwC;IACvC,MAAMC,aAAA,GAAgBR,cAAA,EAAgBQ,aAAA;IACtC,IAAI,CAACA,aAAA,EAAe;MAClB;IACF;IAEA,IAAI,CAACX,QAAA,CAASY,OAAO,EAAEC,QAAA,CAASF,aAAA,GAAgB;MAC9C;IACF;IAEA,IAAID,CAAA,CAAEI,GAAG,KAAKV,YAAA,EAAc;MAC1B,MAAMW,IAAA,GAAOT,iBAAA,CAAkBK,aAAA,EAA8B;QAAEK,SAAA,EAAWhB,QAAA,CAASY;MAAQ;MAC3FG,IAAA,EAAME,KAAA;IACR;IAEA,IAAIP,CAAA,CAAEI,GAAG,KAAKT,YAAA,EAAc;MAC1B,MAAMa,IAAA,GAAOX,iBAAA,CAAkBI,aAAA,EAA8B;QAAEK,SAAA,EAAWhB,QAAA,CAASY;MAAQ;MAC3FM,IAAA,EAAMD,KAAA;IACR;EACF,GACA,CAACX,iBAAA,EAAmBC,iBAAA,EAAmBJ,cAAA,EAAgBC,YAAA,EAAcC,YAAA,CAAa;EAGpF,OAAO;IACLc,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAM/B,qBAAA,CAAsB,OAAO;MACjCgC,IAAA,EAAM;MACNtB,GAAA,EAAKR,aAAA,CAAcQ,GAAA,EAAKC,QAAA;MACxBQ,SAAA;MACA,GAAGV;IACL;EACF;AACF"}
+{"version":3,"names":["React","getNativeElementProps","getRTLSafeKey","useMergedRefs","useFocusFinders","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","useMenuSplitGroup_unstable","props","ref","innerRef","useRef","dir","targetDocument","nextArrowKey","prevArrowKey","findNextFocusable","findPrevFocusable","onKeyDown","useCallback","e","_innerRef_current","activeElement","current","contains","key","next","container","focus","prev","components","root","role"],"sources":["../../../src/components/MenuSplitGroup/useMenuSplitGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, getRTLSafeKey, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render MenuSplitGroup.\n *\n * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,\n * before being passed to renderMenuSplitGroup_unstable.\n *\n * @param props - props from this instance of MenuSplitGroup\n * @param ref - reference to root HTMLElement of MenuSplitGroup\n */\nexport const useMenuSplitGroup_unstable = (\n  props: MenuSplitGroupProps,\n  ref: React.Ref<HTMLElement>,\n): MenuSplitGroupState => {\n  const innerRef = React.useRef<HTMLElement>();\n  const { dir, targetDocument } = useFluent();\n\n  const nextArrowKey = getRTLSafeKey(ArrowRight, dir);\n  const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);\n\n  const { findNextFocusable, findPrevFocusable } = useFocusFinders();\n\n  const onKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>) => {\n      const activeElement = targetDocument?.activeElement;\n      if (!activeElement) {\n        return;\n      }\n\n      if (!innerRef.current?.contains(activeElement)) {\n        return;\n      }\n\n      if (e.key === nextArrowKey) {\n        const next = findNextFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        next?.focus();\n      }\n\n      if (e.key === prevArrowKey) {\n        const prev = findPrevFocusable(activeElement as HTMLElement, { container: innerRef.current });\n        prev?.focus();\n      }\n    },\n    [findNextFocusable, findPrevFocusable, targetDocument, nextArrowKey, prevArrowKey],\n  );\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      role: 'group',\n      ref: useMergedRefs(ref, innerRef),\n      onKeyDown,\n      ...props,\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,aAAa,QAAQ;AACpE,SAASC,eAAe,QAAQ;AAChC,SAASC,kBAAA,IAAsBC,SAAS,QAAQ;AAEhD,SAASC,UAAU,EAAEC,SAAS,QAAQ;AAEtC;;;;;;;;;AASA,OAAO,MAAMC,0BAAA,GAA6BA,CACxCC,KAAA,EACAC,GAAA,KACwB;EACxB,MAAMC,QAAA,GAAWZ,KAAA,CAAMa,MAAM;EAC7B,MAAM;IAAEC,GAAA;IAAKC;EAAc,CAAE,GAAGT,SAAA;EAEhC,MAAMU,YAAA,GAAed,aAAA,CAAcK,UAAA,EAAYO,GAAA;EAC/C,MAAMG,YAAA,GAAef,aAAA,CAAcM,SAAA,EAAWM,GAAA;EAE9C,MAAM;IAAEI,iBAAA;IAAmBC;EAAiB,CAAE,GAAGf,eAAA;EAEjD,MAAMgB,SAAA,GAAYpB,KAAA,CAAMqB,WAAW,CAChCC,CAAA,IAAwC;QAMlCC,iBAAA;IALL,MAAMC,aAAA,GAAgBT,cAAA,aAAAA,cAAA,uBAAAA,cAAA,CAAgBS,aAAa;IACnD,IAAI,CAACA,aAAA,EAAe;MAClB;IACF;IAEA,IAAI,EAAC,CAAAD,iBAAA,GAAAX,QAAA,CAASa,OAAO,cAAhBF,iBAAA,uBAAAA,iBAAA,CAAkBG,QAAA,CAASF,aAAA,IAAgB;MAC9C;IACF;IAEA,IAAIF,CAAA,CAAEK,GAAG,KAAKX,YAAA,EAAc;MAC1B,MAAMY,IAAA,GAAOV,iBAAA,CAAkBM,aAAA,EAA8B;QAAEK,SAAA,EAAWjB,QAAA,CAASa;MAAQ;MAC3FG,IAAA,aAAAA,IAAA,uBAAAA,IAAA,CAAME,KAAK;IACb;IAEA,IAAIR,CAAA,CAAEK,GAAG,KAAKV,YAAA,EAAc;MAC1B,MAAMc,IAAA,GAAOZ,iBAAA,CAAkBK,aAAA,EAA8B;QAAEK,SAAA,EAAWjB,QAAA,CAASa;MAAQ;MAC3FM,IAAA,aAAAA,IAAA,uBAAAA,IAAA,CAAMD,KAAK;IACb;EACF,GACA,CAACZ,iBAAA,EAAmBC,iBAAA,EAAmBJ,cAAA,EAAgBC,YAAA,EAAcC,YAAA,CAAa;EAGpF,OAAO;IACLe,UAAA,EAAY;MACVC,IAAA,EAAM;IACR;IACAA,IAAA,EAAMhC,qBAAA,CAAsB,OAAO;MACjCiC,IAAA,EAAM;MACNvB,GAAA,EAAKR,aAAA,CAAcQ,GAAA,EAAKC,QAAA;MACxBQ,SAAA;MACA,GAAGV;IACL;EACF;AACF"}

package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.js

@@ -1,8 +1,8 @@
-import { __styles, mergeClasses } from "@griffel/react";
-import { tokens } from "@fluentui/react-theme";
-import { menuItemClassNames } from "../MenuItem/useMenuItemStyles";
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { menuItemClassNames } from '../MenuItem/useMenuItemStyles';
 export const menuSplitGroupClassNames = {
-  root: "fui-MenuSplitGroup"
+  root: 'fui-MenuSplitGroup'
 };
 /**
  * Styles for the root slot

package/lib/components/MenuTrigger/MenuTrigger.js

@@ -1,6 +1,6 @@
-import * as React from "react";
-import { useMenuTrigger_unstable } from "./useMenuTrigger";
-import { renderMenuTrigger_unstable } from "./renderMenuTrigger";
+import * as React from 'react';
+import { useMenuTrigger_unstable } from './useMenuTrigger';
+import { renderMenuTrigger_unstable } from './renderMenuTrigger';
 /**
  * Wraps a trigger element as an only child
  * and adds the necessary event handling to open a popup menu
@@ -9,7 +9,7 @@ export const MenuTrigger = props => {
   const state = useMenuTrigger_unstable(props);
   return renderMenuTrigger_unstable(state);
 };
-MenuTrigger.displayName = "MenuTrigger";
+MenuTrigger.displayName = 'MenuTrigger';
 // type casting here is required to ensure internal type FluentTriggerComponent is not leaked
 MenuTrigger.isFluentTriggerComponent = true;
 //# sourceMappingURL=MenuTrigger.js.map

package/lib/components/MenuTrigger/MenuTrigger.types.js

@@ -1,2 +1,2 @@
-import * as React from "react";
+import * as React from 'react';
 //# sourceMappingURL=MenuTrigger.types.js.map

package/lib/components/MenuTrigger/index.js

@@ -1,5 +1,5 @@
-export * from "./MenuTrigger";
-export * from "./MenuTrigger.types";
-export * from "./renderMenuTrigger";
-export * from "./useMenuTrigger";
+export * from './MenuTrigger';
+export * from './MenuTrigger.types';
+export * from './renderMenuTrigger';
+export * from './useMenuTrigger';
 //# sourceMappingURL=index.js.map

package/lib/components/MenuTrigger/renderMenuTrigger.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { MenuTriggerContextProvider } from "../../contexts/menuTriggerContext";
+import * as React from 'react';
+import { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';
 /**
  * Render the final JSX of MenuTrigger
  *

package/lib/components/MenuTrigger/useMenuTrigger.js

@@ -1,11 +1,11 @@
-import * as React from "react";
-import { useMenuContext_unstable } from "../../contexts/menuContext";
-import { useIsSubmenu } from "../../utils/useIsSubmenu";
-import { useFocusFinders } from "@fluentui/react-tabster";
-import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
-import { ArrowRight, ArrowLeft, Escape, ArrowDown } from "@fluentui/keyboard-keys";
-import { applyTriggerPropsToChildren, getTriggerChild, isHTMLElement, mergeCallbacks, useEventCallback, useMergedRefs } from "@fluentui/react-utilities";
-import { useARIAButtonProps } from "@fluentui/react-aria";
+import * as React from 'react';
+import { useMenuContext_unstable } from '../../contexts/menuContext';
+import { useIsSubmenu } from '../../utils/useIsSubmenu';
+import { useFocusFinders } from '@fluentui/react-tabster';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';
+import { applyTriggerPropsToChildren, getTriggerChild, isHTMLElement, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { useARIAButtonProps } from '@fluentui/react-aria';
 /**
  * Create the state required to render MenuTrigger.
  * Clones the only child component and adds necessary event handling behaviours to open a popup menu
@@ -30,14 +30,14 @@ export const useMenuTrigger_unstable = props => {
   } = useFocusFinders();
   const focusFirst = React.useCallback(() => {
     const firstFocusable = findFirstFocusable(menuPopoverRef.current);
-    firstFocusable?.focus();
+    firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
   }, [findFirstFocusable, menuPopoverRef]);
   const openedWithKeyboardRef = React.useRef(false);
   const hasMouseMoved = React.useRef(false);
   const {
     dir
   } = useFluent();
-  const OpenArrowKey = dir === "ltr" ? ArrowRight : ArrowLeft;
+  const OpenArrowKey = dir === 'ltr' ? ArrowRight : ArrowLeft;
   const child = getTriggerChild(children);
   const onContextMenu = event => {
     if (isTargetDisabled(event)) {
@@ -48,7 +48,7 @@ export const useMenuTrigger_unstable = props => {
       setOpen(event, {
         open: true,
         keyboard: false,
-        type: "menuTriggerContextMenu",
+        type: 'menuTriggerContextMenu',
         event
       });
     }
@@ -61,7 +61,7 @@ export const useMenuTrigger_unstable = props => {
       setOpen(event, {
         open: !open,
         keyboard: openedWithKeyboardRef.current,
-        type: "menuTriggerClick",
+        type: 'menuTriggerClick',
         event
       });
       openedWithKeyboardRef.current = false;
@@ -76,7 +76,7 @@ export const useMenuTrigger_unstable = props => {
       setOpen(event, {
         open: true,
         keyboard: true,
-        type: "menuTriggerKeyDown",
+        type: 'menuTriggerKeyDown',
         event
       });
     }
@@ -84,7 +84,7 @@ export const useMenuTrigger_unstable = props => {
       setOpen(event, {
         open: false,
         keyboard: true,
-        type: "menuTriggerKeyDown",
+        type: 'menuTriggerKeyDown',
         event
       });
     }
@@ -101,7 +101,7 @@ export const useMenuTrigger_unstable = props => {
       setOpen(event, {
         open: true,
         keyboard: false,
-        type: "menuTriggerMouseEnter",
+        type: 'menuTriggerMouseEnter',
         event
       });
     }
@@ -117,7 +117,7 @@ export const useMenuTrigger_unstable = props => {
       setOpen(event, {
         open: true,
         keyboard: false,
-        type: "menuTriggerMouseMove",
+        type: 'menuTriggerMouseMove',
         event
       });
       hasMouseMoved.current = true;
@@ -131,35 +131,35 @@ export const useMenuTrigger_unstable = props => {
       setOpen(event, {
         open: false,
         keyboard: false,
-        type: "menuTriggerMouseLeave",
+        type: 'menuTriggerMouseLeave',
         event
       });
     }
   };
   const contextMenuProps = {
     id: triggerId,
-    ...child?.props,
-    ref: useMergedRefs(triggerRef, child?.ref),
-    onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),
-    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),
-    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),
-    onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove))
+    ...(child === null || child === void 0 ? void 0 : child.props),
+    ref: useMergedRefs(triggerRef, child === null || child === void 0 ? void 0 : child.ref),
+    onMouseEnter: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseEnter, onMouseEnter)),
+    onMouseLeave: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseLeave, onMouseLeave)),
+    onContextMenu: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onContextMenu, onContextMenu)),
+    onMouseMove: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onMouseMove, onMouseMove))
   };
   const triggerChildProps = {
-    "aria-haspopup": "menu",
-    "aria-expanded": !open && !isSubmenu ? undefined : open,
+    'aria-haspopup': 'menu',
+    'aria-expanded': !open && !isSubmenu ? undefined : open,
     ...contextMenuProps,
-    onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),
-    onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown))
+    onClick: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onClick, onClick)),
+    onKeyDown: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : child.props.onKeyDown, onKeyDown))
   };
-  const ariaButtonTriggerChildProps = useARIAButtonProps(child?.type === "button" || child?.type === "a" ? child.type : "div", triggerChildProps);
+  const ariaButtonTriggerChildProps = useARIAButtonProps((child === null || child === void 0 ? void 0 : child.type) === 'button' || (child === null || child === void 0 ? void 0 : child.type) === 'a' ? child.type : 'div', triggerChildProps);
   return {
     isSubmenu,
     children: applyTriggerPropsToChildren(children, openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps)
   };
 };
 const isTargetDisabled = event => {
-  const isDisabled = el => el.hasAttribute("disabled") || el.hasAttribute("aria-disabled") && el.getAttribute("aria-disabled") === "true";
+  const isDisabled = el => el.hasAttribute('disabled') || el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true';
   if (isHTMLElement(event.target) && isDisabled(event.target)) {
     return true;
   }

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

@@ -1 +1 @@
-{"version":3,"names":["React","useMenuContext_unstable","useIsSubmenu","useFocusFinders","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","Escape","ArrowDown","applyTriggerPropsToChildren","getTriggerChild","isHTMLElement","mergeCallbacks","useEventCallback","useMergedRefs","useARIAButtonProps","useMenuTrigger_unstable","props","children","disableButtonEnhancement","triggerRef","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","findFirstFocusable","focusFirst","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","hasMouseMoved","dir","OpenArrowKey","child","onContextMenu","event","isTargetDisabled","preventDefault","keyboard","type","onClick","onKeyDown","key","onMouseEnter","onMouseMove","onMouseLeave","contextMenuProps","id","ref","triggerChildProps","undefined","ariaButtonTriggerChildProps","isDisabled","el","hasAttribute","getAttribute","target","currentTarget"],"sources":["../../../src/components/MenuTrigger/useMenuTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  isHTMLElement,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\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_unstable = (props: MenuTriggerProps): MenuTriggerState => {\n  const { children, disableButtonEnhancement = false } = props;\n\n  const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n  const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n  const isSubmenu = useIsSubmenu();\n\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 = getTriggerChild(children);\n\n  const onContextMenu = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    if (openOnContext) {\n      event.preventDefault();\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerContextMenu', event });\n    }\n  };\n\n  const onClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    if (!openOnContext) {\n      setOpen(event, { open: !open, keyboard: openedWithKeyboardRef.current, type: 'menuTriggerClick', event });\n      openedWithKeyboardRef.current = false;\n    }\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    const key = event.key;\n\n    if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n      setOpen(event, { open: true, keyboard: true, type: 'menuTriggerKeyDown', event });\n    }\n\n    if (key === Escape && !isSubmenu) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuTriggerKeyDown', event });\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\n  const onMouseEnter = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover && hasMouseMoved.current) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\n    }\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 = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover && !hasMouseMoved.current) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n      hasMouseMoved.current = true;\n    }\n  };\n\n  const onMouseLeave = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover) {\n      setOpen(event, { open: false, keyboard: false, type: 'menuTriggerMouseLeave', event });\n    }\n  };\n\n  const contextMenuProps = {\n    id: triggerId,\n    ...child?.props,\n    ref: useMergedRefs(triggerRef, child?.ref),\n    onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),\n    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n    onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),\n  };\n\n  const triggerChildProps = {\n    'aria-haspopup': 'menu',\n    'aria-expanded': !open && !isSubmenu ? undefined : open,\n    ...contextMenuProps,\n    onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n    onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n  } as const;\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    triggerChildProps,\n  );\n\n  return {\n    isSubmenu,\n    children: applyTriggerPropsToChildren(\n      children,\n      openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n    ),\n  };\n};\n\nconst isTargetDisabled = (event: React.SyntheticEvent | Event) => {\n  const isDisabled = (el: HTMLElement) =>\n    el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n  if (isHTMLElement(event.target) && isDisabled(event.target)) {\n    return true;\n  }\n\n  return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","useMenuContext_unstable","useIsSubmenu","useFocusFinders","useFluent_unstable","useFluent","ArrowRight","ArrowLeft","Escape","ArrowDown","applyTriggerPropsToChildren","getTriggerChild","isHTMLElement","mergeCallbacks","useEventCallback","useMergedRefs","useARIAButtonProps","useMenuTrigger_unstable","props","children","disableButtonEnhancement","triggerRef","context","menuPopoverRef","setOpen","open","triggerId","openOnHover","openOnContext","isSubmenu","findFirstFocusable","focusFirst","useCallback","firstFocusable","current","focus","openedWithKeyboardRef","useRef","hasMouseMoved","dir","OpenArrowKey","child","onContextMenu","event","isTargetDisabled","preventDefault","keyboard","type","onClick","onKeyDown","key","onMouseEnter","onMouseMove","onMouseLeave","contextMenuProps","id","ref","triggerChildProps","undefined","ariaButtonTriggerChildProps","isDisabled","el","hasAttribute","getAttribute","target","currentTarget"],"sources":["../../../src/components/MenuTrigger/useMenuTrigger.ts"],"sourcesContent":["import * as React from 'react';\nimport { MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  isHTMLElement,\n  mergeCallbacks,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useARIAButtonProps } from '@fluentui/react-aria';\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_unstable = (props: MenuTriggerProps): MenuTriggerState => {\n  const { children, disableButtonEnhancement = false } = props;\n\n  const triggerRef = useMenuContext_unstable(context => context.triggerRef);\n  const menuPopoverRef = useMenuContext_unstable(context => context.menuPopoverRef);\n  const setOpen = useMenuContext_unstable(context => context.setOpen);\n  const open = useMenuContext_unstable(context => context.open);\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const openOnHover = useMenuContext_unstable(context => context.openOnHover);\n  const openOnContext = useMenuContext_unstable(context => context.openOnContext);\n\n  const isSubmenu = useIsSubmenu();\n\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 = getTriggerChild(children);\n\n  const onContextMenu = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    if (openOnContext) {\n      event.preventDefault();\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerContextMenu', event });\n    }\n  };\n\n  const onClick = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    if (!openOnContext) {\n      setOpen(event, { open: !open, keyboard: openedWithKeyboardRef.current, type: 'menuTriggerClick', event });\n      openedWithKeyboardRef.current = false;\n    }\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n\n    const key = event.key;\n\n    if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n      setOpen(event, { open: true, keyboard: true, type: 'menuTriggerKeyDown', event });\n    }\n\n    if (key === Escape && !isSubmenu) {\n      setOpen(event, { open: false, keyboard: true, type: 'menuTriggerKeyDown', event });\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\n  const onMouseEnter = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover && hasMouseMoved.current) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseEnter', event });\n    }\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 = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover && !hasMouseMoved.current) {\n      setOpen(event, { open: true, keyboard: false, type: 'menuTriggerMouseMove', event });\n      hasMouseMoved.current = true;\n    }\n  };\n\n  const onMouseLeave = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {\n    if (isTargetDisabled(event)) {\n      return;\n    }\n    if (openOnHover) {\n      setOpen(event, { open: false, keyboard: false, type: 'menuTriggerMouseLeave', event });\n    }\n  };\n\n  const contextMenuProps = {\n    id: triggerId,\n    ...child?.props,\n    ref: useMergedRefs(triggerRef, child?.ref),\n    onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)),\n    onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)),\n    onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)),\n    onMouseMove: useEventCallback(mergeCallbacks(child?.props.onMouseMove, onMouseMove)),\n  };\n\n  const triggerChildProps = {\n    'aria-haspopup': 'menu',\n    'aria-expanded': !open && !isSubmenu ? undefined : open,\n    ...contextMenuProps,\n    onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)),\n    onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)),\n  } as const;\n\n  const ariaButtonTriggerChildProps = useARIAButtonProps(\n    child?.type === 'button' || child?.type === 'a' ? child.type : 'div',\n    triggerChildProps,\n  );\n\n  return {\n    isSubmenu,\n    children: applyTriggerPropsToChildren(\n      children,\n      openOnContext ? contextMenuProps : disableButtonEnhancement ? triggerChildProps : ariaButtonTriggerChildProps,\n    ),\n  };\n};\n\nconst isTargetDisabled = (event: React.SyntheticEvent | Event) => {\n  const isDisabled = (el: HTMLElement) =>\n    el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n  if (isHTMLElement(event.target) && isDisabled(event.target)) {\n    return true;\n  }\n\n  return isHTMLElement(event.currentTarget) && isDisabled(event.currentTarget);\n};\n"],"mappings":"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"}

package/lib/components/index.js

@@ -1,3 +1,3 @@
-export * from "./MenuItem/index";
-export * from "./MenuList/index";
+export * from './MenuItem/index';
+export * from './MenuList/index';
 //# sourceMappingURL=index.js.map

package/lib/contexts/menuContext.js

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { createContext, useContextSelector } from "@fluentui/react-context-selector";
+import * as React from 'react';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 export const MenuContext = /*#__PURE__*/createContext(undefined);
 const menuContextDefaultValue = {
   open: false,
@@ -14,7 +14,7 @@ const menuContextDefaultValue = {
     current: null
   },
   mountNode: null,
-  triggerId: "",
+  triggerId: '',
   openOnContext: false,
   openOnHover: false,
   hasIcons: false,