@fluentui/react-menu 0.0.0-nightlyff78d1e27a20220217.1 → 0.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuPopover/renderMenuPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,MAAT,QAAuB,wBAAvB;AAEA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAmB,KAAnB,CAArC;;AAEA,MAAI,KAAK,CAAC,MAAV,EAAkB;AAChB,wBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,KAAX,CAAP;AACD;;AAED,sBACE,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CADF,CADF;AAKD,CAZM","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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuPopover/renderMenuPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,MAAT,QAAuB,wBAAvB;AAEA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;;EAEA,IAAI,KAAK,CAAC,MAAV,EAAkB;IAChB,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;IAAf,CAAX,CAAP;EACD;;EAED,oBACE,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CAZM","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"],"sourceRoot":"../src/"}

package/lib/components/MenuPopover/useMenuPopover.js

@@ -3,7 +3,7 @@ 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 } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useIsSubmenu } from '../../utils/useIsSubmenu';
 /**
  * Create the state required to render MenuPopover.

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"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","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 } 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 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((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, { open: true, keyboard: false });\n    }\n\n    onMouseEnterOriginal?.(e);\n  });\n\n  rootProps.onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    const key = e.key;\n\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (popoverRef.current?.contains(e.target as HTMLElement)) {\n        setOpen(e, { open: false, keyboard: true });\n      }\n    }\n\n    if (key === Tab) {\n      setOpen(e, { open: false, keyboard: true });\n      e.preventDefault();\n    }\n\n    onKeyDownOriginal?.(e);\n  });\n\n  return {\n    inline,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuPopover/useMenuPopover.ts"],"names":[],"mappings":"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","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 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((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, { open: true, keyboard: false });\n    }\n\n    onMouseEnterOriginal?.(e);\n  });\n\n  rootProps.onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    const key = e.key;\n\n    if (key === Escape || (isSubmenu && key === CloseArrowKey)) {\n      if (popoverRef.current?.contains(e.target as HTMLElement)) {\n        setOpen(e, { open: false, keyboard: true });\n      }\n    }\n\n    if (key === Tab) {\n      setOpen(e, { open: false, keyboard: true });\n      e.preventDefault();\n    }\n\n    onKeyDownOriginal?.(e);\n  });\n\n  return {\n    inline,\n    components: {\n      root: 'div',\n    },\n    root: rootProps,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuPopover/useMenuPopoverStyles.js

@@ -1,6 +1,8 @@
 import { shorthands, mergeClasses, __styles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-export const menuPopoverClassName = 'fui-MenuPopover';
+export const menuPopoverClassNames = {
+  root: 'fui-MenuPopover'
+};
 
 const useStyles = /*#__PURE__*/__styles({
   "root": {
@@ -40,7 +42,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const useMenuPopoverStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuPopoverClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);
   return state;
 };
 //# sourceMappingURL=useMenuPopoverStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,oBAAoB,GAAG,iBAA7B;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAaA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;AACzF,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAD,EAAuB,MAAM,CAAC,IAA9B,EAAoC,KAAK,CAAC,IAAN,CAAW,SAA/C,CAAnC;AACA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuPopoverState } from './MenuPopover.types';\n\nexport const menuPopoverClassName = 'fui-MenuPopover';\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    backgroundColor: tokens.colorNeutralBackground1,\n    minWidth: '128px',\n    maxWidth: '300px',\n    width: 'max-content',\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.padding('4px'),\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuPopoverClassName, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuPopover/useMenuPopoverStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,EAAqB,YAArB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE;AAD+D,CAAhE;;AAIP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAaA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,qBAAqB,CAAC,IAAvB,EAA6B,MAAM,CAAC,IAApC,EAA0C,KAAK,CAAC,IAAN,CAAW,SAArD,CAAnC;EACA,OAAO,KAAP;AACD,CAJM","sourcesContent":["import { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {\n  root: 'fui-MenuPopover',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    backgroundColor: tokens.colorNeutralBackground1,\n    minWidth: '128px',\n    maxWidth: '300px',\n    width: 'max-content',\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.padding('4px'),\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuSplitGroup/MenuSplitGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;AAEA,EAAA,gCAAgC,CAAC,KAAD,CAAhC;AACA,SAAO,6BAA6B,CAAC,KAAD,CAApC;AACD,CALuE,CAAjE;AAOP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nimport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nimport { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.\n */\nexport const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuSplitGroup_unstable(props, ref);\n\n  useMenuSplitGroupStyles_unstable(state);\n  return renderMenuSplitGroup_unstable(state);\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuSplitGroup/MenuSplitGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtG,MAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;EAEA,gCAAgC,CAAC,KAAD,CAAhC;EACA,OAAO,6BAA6B,CAAC,KAAD,CAApC;AACD,CALuE,CAAjE;AAOP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nimport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nimport { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.\n */\nexport const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuSplitGroup_unstable(props, ref);\n\n  useMenuSplitGroupStyles_unstable(state);\n  return renderMenuSplitGroup_unstable(state);\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"MenuSplitGroup.types.js","sourceRoot":"../src/","sources":["components/MenuSplitGroup/MenuSplitGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuSplitGroupSlots = {\n  root: Slot<'div'>;\n};\n\ntype MenuSplitGroupCommons = {};\n\n/**\n * MenuSplitGroup Props\n */\nexport type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots> & MenuSplitGroupCommons;\n\n/**\n * State used in rendering MenuSplitGroup\n */\nexport type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> & MenuSplitGroupCommons;\n"]}
+{"version":3,"file":"MenuSplitGroup.types.js","sourceRoot":"../src/","sources":["components/MenuSplitGroup/MenuSplitGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuSplitGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuSplitGroup Props\n */\nexport type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;\n\n/**\n * State used in rendering MenuSplitGroup\n */\nexport type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots>;\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuSplitGroup/renderMenuSplitGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAsB,KAAtB,CAArC;AAEA,sBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuSplitGroupState, MenuSplitGroupSlots } from './MenuSplitGroup.types';\n\n/**\n * Render the final JSX of MenuSplitGroup\n */\nexport const renderMenuSplitGroup_unstable = (state: MenuSplitGroupState) => {\n  const { slots, slotProps } = getSlots<MenuSplitGroupSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuSplitGroup/renderMenuSplitGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA+B;EAC1E,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAsB,KAAtB,CAArC;EAEA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CAJM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { MenuSplitGroupState, MenuSplitGroupSlots } from './MenuSplitGroup.types';\n\n/**\n * Render the final JSX of MenuSplitGroup\n */\nexport const renderMenuSplitGroup_unstable = (state: MenuSplitGroupState) => {\n  const { slots, slotProps } = getSlots<MenuSplitGroupSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuSplitGroup/useMenuSplitGroup.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getNativeElementProps, getRTLSafeKey, useMergedRefs } from '@fluentui/react-utilities';
 import { useFocusFinders } from '@fluentui/react-tabster';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
 /**
  * Create the state required to render MenuSplitGroup.

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuSplitGroup/useMenuSplitGroup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,aAAhC,EAA+C,aAA/C,QAAoE,2BAApE;AACA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SAAS,SAAT,QAA0B,iCAA1B;AAEA,SAAS,UAAT,EAAqB,SAArB,QAAsC,yBAAtC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,EAAjB;AACA,QAAM;AAAE,IAAA,GAAF;AAAO,IAAA;AAAP,MAA0B,SAAS,EAAzC;AAEA,QAAM,YAAY,GAAG,aAAa,CAAC,UAAD,EAAa,GAAb,CAAlC;AACA,QAAM,YAAY,GAAG,aAAa,CAAC,SAAD,EAAY,GAAZ,CAAlC;AAEA,QAAM;AAAE,IAAA,iBAAF;AAAqB,IAAA;AAArB,MAA2C,eAAe,EAAhE;AAEA,QAAM,SAAS,GAAG,KAAK,CAAC,WAAN,CACf,CAAD,IAAwC;;;AACtC,UAAM,aAAa,GAAG,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,aAAtC;;AACA,QAAI,CAAC,aAAL,EAAoB;AAClB;AACD;;AAED,QAAI,EAAC,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAT,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,QAAF,CAAW,aAAX,CAAjB,CAAJ,EAAgD;AAC9C;AACD;;AAED,QAAI,CAAC,CAAC,GAAF,KAAU,YAAd,EAA4B;AAC1B,YAAM,IAAI,GAAG,iBAAiB,CAAC,aAAD,EAA+B;AAAE,QAAA,SAAS,EAAE,QAAQ,CAAC;AAAtB,OAA/B,CAA9B;AACA,MAAA,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,KAAN,EAAA;AACD;;AAED,QAAI,CAAC,CAAC,GAAF,KAAU,YAAd,EAA4B;AAC1B,YAAM,IAAI,GAAG,iBAAiB,CAAC,aAAD,EAA+B;AAAE,QAAA,SAAS,EAAE,QAAQ,CAAC;AAAtB,OAA/B,CAA9B;AACA,MAAA,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,KAAN,EAAA;AACD;AACF,GApBe,EAqBhB,CAAC,iBAAD,EAAoB,iBAApB,EAAuC,cAAvC,EAAuD,YAAvD,EAAqE,YAArE,CArBgB,CAAlB;AAwBA,SAAO;AACL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KADP;AAIL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;AACjC,MAAA,IAAI,EAAE,OAD2B;AAEjC,MAAA,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,QAAN,CAFe;AAGjC,MAAA,SAHiC;AAIjC,SAAG;AAJ8B,KAAR;AAJtB,GAAP;AAWD,CA/CM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, getRTLSafeKey, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { 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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuSplitGroup/useMenuSplitGroup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,aAAhC,EAA+C,aAA/C,QAAoE,2BAApE;AACA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AAEA,SAAS,UAAT,EAAqB,SAArB,QAAsC,yBAAtC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,EAAjB;EACA,MAAM;IAAE,GAAF;IAAO;EAAP,IAA0B,SAAS,EAAzC;EAEA,MAAM,YAAY,GAAG,aAAa,CAAC,UAAD,EAAa,GAAb,CAAlC;EACA,MAAM,YAAY,GAAG,aAAa,CAAC,SAAD,EAAY,GAAZ,CAAlC;EAEA,MAAM;IAAE,iBAAF;IAAqB;EAArB,IAA2C,eAAe,EAAhE;EAEA,MAAM,SAAS,GAAG,KAAK,CAAC,WAAN,CACf,CAAD,IAAwC;;;IACtC,MAAM,aAAa,GAAG,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,aAAtC;;IACA,IAAI,CAAC,aAAL,EAAoB;MAClB;IACD;;IAED,IAAI,EAAC,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAT,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,QAAF,CAAW,aAAX,CAAjB,CAAJ,EAAgD;MAC9C;IACD;;IAED,IAAI,CAAC,CAAC,GAAF,KAAU,YAAd,EAA4B;MAC1B,MAAM,IAAI,GAAG,iBAAiB,CAAC,aAAD,EAA+B;QAAE,SAAS,EAAE,QAAQ,CAAC;MAAtB,CAA/B,CAA9B;MACA,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,KAAN,EAAA;IACD;;IAED,IAAI,CAAC,CAAC,GAAF,KAAU,YAAd,EAA4B;MAC1B,MAAM,IAAI,GAAG,iBAAiB,CAAC,aAAD,EAA+B;QAAE,SAAS,EAAE,QAAQ,CAAC;MAAtB,CAA/B,CAA9B;MACA,IAAI,KAAA,IAAJ,IAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAA,IAAI,CAAE,KAAN,EAAA;IACD;EACF,CApBe,EAqBhB,CAAC,iBAAD,EAAoB,iBAApB,EAAuC,cAAvC,EAAuD,YAAvD,EAAqE,YAArE,CArBgB,CAAlB;EAwBA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,IAAI,EAAE,OAD2B;MAEjC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,QAAN,CAFe;MAGjC,SAHiC;MAIjC,GAAG;IAJ8B,CAAR;EAJtB,CAAP;AAWD,CA/CM","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"],"sourceRoot":"../src/"}

package/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.js

@@ -1,7 +1,9 @@
 import { __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { menuItemClassName } from '../MenuItem/useMenuItemStyles';
-export const menuSplitGroupClassName = 'fui-MenuSplitGroup';
+import { menuItemClassNames } from '../MenuItem/useMenuItemStyles';
+export const menuSplitGroupClassNames = {
+  root: 'fui-MenuSplitGroup'
+};
 /**
  * Styles for the root slot
  */
@@ -14,13 +16,13 @@ const useStyles = /*#__PURE__*/__styles({
     "Bhkyaub": ["fgqgg70", "fqo1hry"],
     "J9ixe0": ["fh1zedf", "f1auaj6e"],
     "rj29m3": ["fokbbcd", "f1xlvh9o"],
-    "lispf9": "f1et5qag",
-    "B9hwub1": "f13ngu1f",
-    "dvf9w6": "f1db9j62",
-    "Hjn5ok": "f92z21p"
+    "B2knx3v": "f1mf2v5d",
+    "Bl7aesu": "fi8lk9b",
+    "e82tai": "f1tc32yi",
+    "Bnkcs84": "f1kve8m0"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f168awwq>.fui-MenuItem:nth-child(1){width:100%;}", ".f1om2jlk>.fui-MenuItem:nth-child(2){border-top-left-radius:0;}", ".fcyhg04>.fui-MenuItem:nth-child(2){border-top-right-radius:0;}", ".fgqgg70>.fui-MenuItem:nth-child(2){border-bottom-left-radius:0;}", ".fqo1hry>.fui-MenuItem:nth-child(2){border-bottom-right-radius:0;}", ".fh1zedf>.fui-MenuItem:nth-child(2){padding-left:0;}", ".f1auaj6e>.fui-MenuItem:nth-child(2){padding-right:0;}", ".fokbbcd>.fui-MenuItem:nth-child(2){margin-left:auto;}", ".f1xlvh9o>.fui-MenuItem:nth-child(2){margin-right:auto;}", ".f1et5qag>.fui-MenuItem:nth-child(2):before{content:\"\";}", ".f13ngu1f>.fui-MenuItem:nth-child(2):before{width:var(--strokeWidthThin);}", ".f1db9j62>.fui-MenuItem:nth-child(2):before{height:24px;}", ".f92z21p>.fui-MenuItem:nth-child(2):before{background-color:var(--colorNeutralStroke1);}"]
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f168awwq>.fui-MenuItem:nth-child(1){width:100%;}", ".f1om2jlk>.fui-MenuItem:nth-child(2){border-top-left-radius:0;}", ".fcyhg04>.fui-MenuItem:nth-child(2){border-top-right-radius:0;}", ".fgqgg70>.fui-MenuItem:nth-child(2){border-bottom-left-radius:0;}", ".fqo1hry>.fui-MenuItem:nth-child(2){border-bottom-right-radius:0;}", ".fh1zedf>.fui-MenuItem:nth-child(2){padding-left:0;}", ".f1auaj6e>.fui-MenuItem:nth-child(2){padding-right:0;}", ".fokbbcd>.fui-MenuItem:nth-child(2){margin-left:auto;}", ".f1xlvh9o>.fui-MenuItem:nth-child(2){margin-right:auto;}", ".f1mf2v5d>.fui-MenuItem:nth-child(2)::before{content:\"\";}", ".fi8lk9b>.fui-MenuItem:nth-child(2)::before{width:var(--strokeWidthThin);}", ".f1tc32yi>.fui-MenuItem:nth-child(2)::before{height:24px;}", ".f1kve8m0>.fui-MenuItem:nth-child(2)::before{background-color:var(--colorNeutralStroke1);}"]
 });
 /**
  * Apply styling to the MenuSplitGroup slots based on the state
@@ -29,7 +31,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const useMenuSplitGroupStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuSplitGroupClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);
   return state;
 };
 //# sourceMappingURL=useMenuSplitGroupStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuSplitGroup/useMenuSplitGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,iBAAT,QAAkC,+BAAlC;AAGA,OAAO,MAAM,uBAAuB,GAAG,oBAAhC;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACH,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAAoD;AAClG,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAD,EAA0B,MAAM,CAAC,IAAjC,EAAuC,KAAK,CAAC,IAAN,CAAW,SAAlD,CAAnC;AACA,SAAO,KAAP;AACD,CAJM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassName } from '../MenuItem/useMenuItemStyles';\nimport type { MenuSplitGroupState } from './MenuSplitGroup.types';\n\nexport const menuSplitGroupClassName = 'fui-MenuSplitGroup';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    [`& > .${menuItemClassName}:nth-child(1)`]: {\n      width: '100%',\n    },\n    [`& > .${menuItemClassName}:nth-child(2)`]: {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      paddingLeft: 0,\n      marginLeft: 'auto',\n      ':before': {\n        content: '\"\"',\n        width: tokens.strokeWidthThin,\n        height: '24px',\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuSplitGroupClassName, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuSplitGroup/useMenuSplitGroupStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,kBAAT,QAAmC,+BAAnC;AAIA,OAAO,MAAM,wBAAwB,GAAwC;EAC3E,IAAI,EAAE;AADqE,CAAtE;AAGP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACH,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAAoD;EAClG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,wBAAwB,CAAC,IAA1B,EAAgC,MAAM,CAAC,IAAvC,EAA6C,KAAK,CAAC,IAAN,CAAW,SAAxD,CAAnC;EACA,OAAO,KAAP;AACD,CAJM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles';\nimport type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {\n  root: 'fui-MenuSplitGroup',\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    [`& > .${menuItemClassNames.root}:nth-child(1)`]: {\n      width: '100%',\n    },\n    [`& > .${menuItemClassNames.root}:nth-child(2)`]: {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      paddingLeft: 0,\n      marginLeft: 'auto',\n      '::before': {\n        content: '\"\"',\n        width: tokens.strokeWidthThin,\n        height: '24px',\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":"AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,GAAwD,KAAK,IAAG;AACtF,QAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,CAArC;AAEA,SAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CAJM;AAMP,WAAW,CAAC,WAAZ,GAA0B,aAA1B;AACA,WAAW,CAAC,wBAAZ,GAAuC,IAAvC","sourcesContent":["import * as React from 'react';\nimport { useMenuTrigger_unstable } from './useMenuTrigger';\nimport { renderMenuTrigger_unstable } from './renderMenuTrigger';\nimport type { MenuTriggerProps } from './MenuTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * Wraps a trigger element as an only child\n * and adds the necessary event handling to open a popup menu\n */\nexport const MenuTrigger: React.FC<MenuTriggerProps> & FluentTriggerComponent = props => {\n  const state = useMenuTrigger_unstable(props);\n\n  return renderMenuTrigger_unstable(state);\n};\n\nMenuTrigger.displayName = 'MenuTrigger';\nMenuTrigger.isFluentTriggerComponent = true;\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuTrigger/MenuTrigger.tsx"],"names":[],"mappings":"AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AAIA;;;AAGG;;AACH,OAAO,MAAM,WAAW,GAAwD,KAAK,IAAG;EACtF,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,CAArC;EAEA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CAJM;AAMP,WAAW,CAAC,WAAZ,GAA0B,aAA1B;AACA,WAAW,CAAC,wBAAZ,GAAuC,IAAvC","sourcesContent":["import * as React from 'react';\nimport { useMenuTrigger_unstable } from './useMenuTrigger';\nimport { renderMenuTrigger_unstable } from './renderMenuTrigger';\nimport type { MenuTriggerProps } from './MenuTrigger.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * Wraps a trigger element as an only child\n * and adds the necessary event handling to open a popup menu\n */\nexport const MenuTrigger: React.FC<MenuTriggerProps> & FluentTriggerComponent = props => {\n  const state = useMenuTrigger_unstable(props);\n\n  return renderMenuTrigger_unstable(state);\n};\n\nMenuTrigger.displayName = 'MenuTrigger';\nMenuTrigger.isFluentTriggerComponent = true;\n"],"sourceRoot":"../src/"}

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

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

package/lib/components/MenuTrigger/renderMenuTrigger.js

@@ -8,7 +8,7 @@ import { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';
 
 export const renderMenuTrigger_unstable = state => {
   return /*#__PURE__*/React.createElement(MenuTriggerContextProvider, {
-    value: true
+    value: state.isSubmenu
   }, state.children);
 };
 //# sourceMappingURL=renderMenuTrigger.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuTrigger/renderMenuTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,mCAA3C;AAGA;;;;AAIG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;AACpE,sBAAO,KAAA,CAAA,aAAA,CAAC,0BAAD,EAA2B;AAAC,IAAA,KAAK,EAAE;AAAR,GAA3B,EAA0C,KAAK,CAAC,QAAhD,CAAP;AACD,CAFM","sourcesContent":["import * as React from 'react';\nimport { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';\nimport type { MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderMenuTrigger_unstable = (state: MenuTriggerState) => {\n  return <MenuTriggerContextProvider value={true}>{state.children}</MenuTriggerContextProvider>;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuTrigger/renderMenuTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,0BAAT,QAA2C,mCAA3C;AAGA;;;;AAIG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,oBAAO,KAAA,CAAA,aAAA,CAAC,0BAAD,EAA2B;IAAC,KAAK,EAAE,KAAK,CAAC;EAAd,CAA3B,EAAqD,KAAK,CAAC,QAA3D,CAAP;AACD,CAFM","sourcesContent":["import * as React from 'react';\nimport { MenuTriggerContextProvider } from '../../contexts/menuTriggerContext';\nimport type { MenuTriggerState } from './MenuTrigger.types';\n\n/**\n * Render the final JSX of MenuTrigger\n *\n * Only renders children\n */\nexport const renderMenuTrigger_unstable = (state: MenuTriggerState) => {\n  return <MenuTriggerContextProvider value={state.isSubmenu}>{state.children}</MenuTriggerContextProvider>;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/MenuTrigger/useMenuTrigger.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { useIsSubmenu } from '../../utils/useIsSubmenu';
 import { useFocusFinders } from '@fluentui/react-tabster';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';
 import { applyTriggerPropsToChildren, getTriggerChild, useMergedEventCallbacks, useMergedRefs } from '@fluentui/react-utilities';
 import { shouldPreventDefaultOnKeyDown } from '@fluentui/react-utilities';
@@ -149,6 +149,7 @@ export const useMenuTrigger_unstable = props => {
   };
 
   return {
+    isSubmenu,
     children: applyTriggerPropsToChildren(children, {
       'aria-haspopup': 'menu',
       'aria-expanded': !open && !isSubmenu ? undefined : open,

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

@@ -1 +1 @@
-{"version":3,"sources":["components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState } from './MenuTrigger.types';\nimport { useMenuContext_unstable } from '../../contexts/menuContext';\nimport { useIsSubmenu } from '../../utils/useIsSubmenu';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowRight, ArrowLeft, Escape, ArrowDown } from '@fluentui/keyboard-keys';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  useMergedEventCallbacks,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { shouldPreventDefaultOnKeyDown } from '@fluentui/react-utilities';\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 } = 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 = React.isValidElement(children) ? getTriggerChild(children) : undefined;\n\n  const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, { open: true, keyboard: false });\n    }\n  };\n\n  const onClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n\n    if (!openOnContext) {\n      setOpen(e, { open: !open, keyboard: openedWithKeyboardRef.current });\n      openedWithKeyboardRef.current = false;\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n\n    if (shouldPreventDefaultOnKeyDown(e)) {\n      e.preventDefault();\n      openedWithKeyboardRef.current = true;\n      (e.target as HTMLElement)?.click();\n    }\n\n    const key = e.key;\n\n    if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n      setOpen(e, { open: true, keyboard: true });\n    }\n\n    if (key === Escape && !isSubmenu) {\n      setOpen(e, { open: false, keyboard: true });\n    }\n\n    // if menu is already open, can't rely on effects to focus\n    if (open && key === OpenArrowKey && isSubmenu) {\n      focusFirst();\n    }\n  };\n\n  const onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n    if (openOnHover && hasMouseMoved.current) {\n      setOpen(e, { open: true, keyboard: false });\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 = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n    if (openOnHover && !hasMouseMoved.current) {\n      setOpen(e, { open: true, keyboard: false });\n      hasMouseMoved.current = true;\n    }\n  };\n\n  const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n    if (openOnHover) {\n      setOpen(e, { open: false, keyboard: false });\n    }\n  };\n\n  return {\n    children: applyTriggerPropsToChildren<MenuTriggerChildProps>(children, {\n      'aria-haspopup': 'menu',\n      'aria-expanded': !open && !isSubmenu ? undefined : open,\n      id: triggerId,\n      ...child?.props,\n      ref: useMergedRefs(triggerRef, child?.ref),\n      onClick: useMergedEventCallbacks(child?.props?.onClick, onClick),\n      onMouseEnter: useMergedEventCallbacks(child?.props?.onMouseEnter, onMouseEnter),\n      onMouseLeave: useMergedEventCallbacks(child?.props?.onMouseLeave, onMouseLeave),\n      onKeyDown: useMergedEventCallbacks(child?.props?.onKeyDown, onKeyDown),\n      onContextMenu: useMergedEventCallbacks(child?.props?.onContextMenu, onContextMenu),\n      onMouseMove: useMergedEventCallbacks(child?.props?.onMouseMove, onMouseMove),\n    }),\n  };\n};\n\nconst isTargetDisabled = (e: React.SyntheticEvent | Event) => {\n  const isDisabled = (el: HTMLElement) =>\n    el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n  if (e.target instanceof HTMLElement && isDisabled(e.target)) {\n    return true;\n  }\n\n  return e.currentTarget instanceof HTMLElement && isDisabled(e.currentTarget);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/MenuTrigger/useMenuTrigger.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { MenuTriggerChildProps, 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  useMergedEventCallbacks,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { shouldPreventDefaultOnKeyDown } from '@fluentui/react-utilities';\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 } = 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 = React.isValidElement(children) ? getTriggerChild<Partial<MenuTriggerChildProps>>(children) : undefined;\n\n  const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, { open: true, keyboard: false });\n    }\n  };\n\n  const onClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n\n    if (!openOnContext) {\n      setOpen(e, { open: !open, keyboard: openedWithKeyboardRef.current });\n      openedWithKeyboardRef.current = false;\n    }\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n\n    if (shouldPreventDefaultOnKeyDown(e)) {\n      e.preventDefault();\n      openedWithKeyboardRef.current = true;\n      (e.target as HTMLElement)?.click();\n    }\n\n    const key = e.key;\n\n    if (!openOnContext && ((isSubmenu && key === OpenArrowKey) || (!isSubmenu && key === ArrowDown))) {\n      setOpen(e, { open: true, keyboard: true });\n    }\n\n    if (key === Escape && !isSubmenu) {\n      setOpen(e, { open: false, keyboard: true });\n    }\n\n    // if menu is already open, can't rely on effects to focus\n    if (open && key === OpenArrowKey && isSubmenu) {\n      focusFirst();\n    }\n  };\n\n  const onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n    if (openOnHover && hasMouseMoved.current) {\n      setOpen(e, { open: true, keyboard: false });\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 = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n    if (openOnHover && !hasMouseMoved.current) {\n      setOpen(e, { open: true, keyboard: false });\n      hasMouseMoved.current = true;\n    }\n  };\n\n  const onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    if (isTargetDisabled(e)) {\n      return;\n    }\n    if (openOnHover) {\n      setOpen(e, { open: false, keyboard: false });\n    }\n  };\n\n  return {\n    isSubmenu,\n    children: applyTriggerPropsToChildren<MenuTriggerChildProps>(children, {\n      'aria-haspopup': 'menu',\n      'aria-expanded': !open && !isSubmenu ? undefined : open,\n      id: triggerId,\n      ...child?.props,\n      ref: useMergedRefs(triggerRef, child?.ref),\n      onClick: useMergedEventCallbacks(child?.props?.onClick, onClick),\n      onMouseEnter: useMergedEventCallbacks(child?.props?.onMouseEnter, onMouseEnter),\n      onMouseLeave: useMergedEventCallbacks(child?.props?.onMouseLeave, onMouseLeave),\n      onKeyDown: useMergedEventCallbacks(child?.props?.onKeyDown, onKeyDown),\n      onContextMenu: useMergedEventCallbacks(child?.props?.onContextMenu, onContextMenu),\n      onMouseMove: useMergedEventCallbacks(child?.props?.onMouseMove, onMouseMove),\n    }),\n  };\n};\n\nconst isTargetDisabled = (e: React.SyntheticEvent | Event) => {\n  const isDisabled = (el: HTMLElement) =>\n    el.hasAttribute('disabled') || (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') === 'true');\n  if (e.target instanceof HTMLElement && isDisabled(e.target)) {\n    return true;\n  }\n\n  return e.currentTarget instanceof HTMLElement && isDisabled(e.currentTarget);\n};\n"],"sourceRoot":"../src/"}

package/lib/contexts/menuContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/menuContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,MAAM,WAAW,gBAA8B,aAAa,CAAmB;AACpF,EAAA,IAAI,EAAE,KAD8E;AAEpF,EAAA,OAAO,EAAE,MAAM,KAFqE;AAGpF,EAAA,aAAa,EAAE,EAHqE;AAIpF,EAAA,oBAAoB,EAAE,MAAM,IAJwD;AAKpF,EAAA,oBAAoB,EAAE,EAL8D;AAMpF,EAAA,SAAS,EAAE,KANyE;AAOpF,EAAA,UAAU,EAAG;AAAE,IAAA,OAAO,EAAE;AAAX,GAPuE;AAQpF,EAAA,cAAc,EAAG;AAAE,IAAA,OAAO,EAAE;AAAX,GARmE;AASpF,EAAA,SAAS,EAAE,EATyE;AAUpF,EAAA,aAAa,EAAE,KAVqE;AAWpF,EAAA,WAAW,EAAE,KAXuE;AAYpF,EAAA,QAAQ,EAAE,KAZ0E;AAapF,EAAA,aAAa,EAAE;AAbqE,CAAnB,CAA5D;AAwCP,OAAO,MAAM,YAAY,GAAG,WAAW,CAAC,QAAjC;AAEP,OAAO,MAAM,uBAAuB,GAAO,QAAJ,IACrC,kBAAkB,CAAC,WAAD,EAAc,QAAd,CADb","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuListProps } from '../components/index';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue>({\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  defaultCheckedValues: {},\n  isSubmenu: false,\n  triggerRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  menuPopoverRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = MenuListProps &\n  Pick<\n    MenuState,\n    | 'openOnHover'\n    | 'openOnContext'\n    | 'triggerRef'\n    | 'menuPopoverRef'\n    | 'setOpen'\n    | 'isSubmenu'\n    | 'triggerId'\n    | 'hasIcons'\n    | 'hasCheckmarks'\n    | 'persistOnItemClick'\n    | 'inline'\n  > & {\n    open: boolean;\n    triggerId: string;\n  };\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, selector);\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["contexts/menuContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,MAAM,WAAW,gBAA8B,aAAa,CAAmB;EACpF,IAAI,EAAE,KAD8E;EAEpF,OAAO,EAAE,MAAM,KAFqE;EAGpF,aAAa,EAAE,EAHqE;EAIpF,oBAAoB,EAAE,MAAM,IAJwD;EAKpF,oBAAoB,EAAE,EAL8D;EAMpF,SAAS,EAAE,KANyE;EAOpF,UAAU,EAAG;IAAE,OAAO,EAAE;EAAX,CAPuE;EAQpF,cAAc,EAAG;IAAE,OAAO,EAAE;EAAX,CARmE;EASpF,SAAS,EAAE,EATyE;EAUpF,aAAa,EAAE,KAVqE;EAWpF,WAAW,EAAE,KAXuE;EAYpF,QAAQ,EAAE,KAZ0E;EAapF,aAAa,EAAE;AAbqE,CAAnB,CAA5D;AAwCP,OAAO,MAAM,YAAY,GAAG,WAAW,CAAC,QAAjC;AAEP,OAAO,MAAM,uBAAuB,GAAO,QAAJ,IACrC,kBAAkB,CAAC,WAAD,EAAc,QAAd,CADb","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { MenuListProps } from '../components/index';\nimport type { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue>({\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  defaultCheckedValues: {},\n  isSubmenu: false,\n  triggerRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  menuPopoverRef: ({ current: null } as unknown) as React.MutableRefObject<HTMLElement>,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between Menu and its children components\n *\n * Extends and drills down MenuList props to simplify API\n */\nexport type MenuContextValue = MenuListProps &\n  Pick<\n    MenuState,\n    | 'openOnHover'\n    | 'openOnContext'\n    | 'triggerRef'\n    | 'menuPopoverRef'\n    | 'setOpen'\n    | 'isSubmenu'\n    | 'triggerId'\n    | 'hasIcons'\n    | 'hasCheckmarks'\n    | 'persistOnItemClick'\n    | 'inline'\n  > & {\n    open: boolean;\n    triggerId: string;\n  };\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, selector);\n"],"sourceRoot":"../src/"}

package/lib/contexts/menuGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/menuGroupContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,MAAM,gBAAgB,gBAAG,KAAK,CAAC,aAAN,CAA2C;AAAE,EAAA,QAAQ,EAAE;AAAZ,CAA3C,CAAzB;AAaA,OAAO,MAAM,wBAAwB,GAAG,gBAAgB,CAAC,QAAlD;AACP,OAAO,MAAM,4BAA4B,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,gBAAjB,CAA3C","sourcesContent":["import * as React from 'react';\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue>({ headerId: '' });\n\n/**\n * Context used to guarantee correct aria-relationship between header\n * and group information\n */\nexport type MenuGroupContextValue = {\n  /**\n   * Element id applied to the `MenuGroupHeader` component\n   */\n  headerId: string;\n};\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\nexport const useMenuGroupContext_unstable = () => React.useContext(MenuGroupContext);\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["contexts/menuGroupContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,MAAM,gBAAgB,gBAAG,KAAK,CAAC,aAAN,CAA2C;EAAE,QAAQ,EAAE;AAAZ,CAA3C,CAAzB;AAaA,OAAO,MAAM,wBAAwB,GAAG,gBAAgB,CAAC,QAAlD;AACP,OAAO,MAAM,4BAA4B,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,gBAAjB,CAA3C","sourcesContent":["import * as React from 'react';\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue>({ headerId: '' });\n\n/**\n * Context used to guarantee correct aria-relationship between header\n * and group information\n */\nexport type MenuGroupContextValue = {\n  /**\n   * Element id applied to the `MenuGroupHeader` component\n   */\n  headerId: string;\n};\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\nexport const useMenuGroupContext_unstable = () => React.useContext(MenuGroupContext);\n"],"sourceRoot":"../src/"}

package/lib/contexts/menuListContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/menuListContext.tsx"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,MAAM,eAAe,gBAAkC,aAAa,CAAuB;AAChG,EAAA,aAAa,EAAE,EADiF;AAEhG,EAAA,oBAAoB,EAAE,MAAM,IAFoE;AAGhG,EAAA,wBAAwB,EAAE,MAAM,IAHgE;AAIhG,EAAA,cAAc,EAAE,MAAM,IAJ0E;AAKhG,EAAA,WAAW,EAAE,MAAM,IAL6E;AAMhG,EAAA,QAAQ,EAAE,KANsF;AAOhG,EAAA,aAAa,EAAE;AAPiF,CAAvB,CAApE;AAsBP,OAAO,MAAM,gBAAgB,GAAG,eAAe,CAAC,QAAzC;AAEP,OAAO,MAAM,2BAA2B,GAAQ,QAAL,IACzC,kBAAkB,CAAC,eAAD,EAAkB,QAAlB,CADb","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SelectableHandler } from '../selectable/index';\nimport type { MenuListProps } from '../components/index';\n\nexport const MenuListContext: Context<MenuListContextValue> = createContext<MenuListContextValue>({\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  setFocusByFirstCharacter: () => null,\n  toggleCheckbox: () => null,\n  selectRadio: () => null,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between MenuList and its children components\n */\nexport type MenuListContextValue = Pick<\n  MenuListProps,\n  'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'\n> & {\n  setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n  toggleCheckbox?: SelectableHandler;\n  selectRadio?: SelectableHandler;\n};\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext_unstable = <T,>(selector: ContextSelector<MenuListContextValue, T>) =>\n  useContextSelector(MenuListContext, selector);\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["contexts/menuListContext.tsx"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAKA,OAAO,MAAM,eAAe,gBAAkC,aAAa,CAAuB;EAChG,aAAa,EAAE,EADiF;EAEhG,oBAAoB,EAAE,MAAM,IAFoE;EAGhG,wBAAwB,EAAE,MAAM,IAHgE;EAIhG,cAAc,EAAE,MAAM,IAJ0E;EAKhG,WAAW,EAAE,MAAM,IAL6E;EAMhG,QAAQ,EAAE,KANsF;EAOhG,aAAa,EAAE;AAPiF,CAAvB,CAApE;AAsBP,OAAO,MAAM,gBAAgB,GAAG,eAAe,CAAC,QAAzC;AAEP,OAAO,MAAM,2BAA2B,GAAQ,QAAL,IACzC,kBAAkB,CAAC,eAAD,EAAkB,QAAlB,CADb","sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SelectableHandler } from '../selectable/index';\nimport type { MenuListProps } from '../components/index';\n\nexport const MenuListContext: Context<MenuListContextValue> = createContext<MenuListContextValue>({\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  setFocusByFirstCharacter: () => null,\n  toggleCheckbox: () => null,\n  selectRadio: () => null,\n  hasIcons: false,\n  hasCheckmarks: false,\n});\n\n/**\n * Context shared between MenuList and its children components\n */\nexport type MenuListContextValue = Pick<\n  MenuListProps,\n  'checkedValues' | 'onCheckedValueChange' | 'hasIcons' | 'hasCheckmarks'\n> & {\n  setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n  toggleCheckbox?: SelectableHandler;\n  selectRadio?: SelectableHandler;\n};\n\nexport const MenuListProvider = MenuListContext.Provider;\n\nexport const useMenuListContext_unstable = <T,>(selector: ContextSelector<MenuListContextValue, T>) =>\n  useContextSelector(MenuListContext, selector);\n"],"sourceRoot":"../src/"}

package/lib/contexts/menuTriggerContext.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 /**
- * Context used communicate with child that it is a trigger for a menu
+ * Context used communicate with a child menu item that it is a trigger for a submenu
  */
 
 const MenuTriggerContext = /*#__PURE__*/React.createContext(false);

package/lib/contexts/menuTriggerContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/menuTriggerContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA;;AAEG;;AACH,MAAM,kBAAkB,gBAAG,KAAK,CAAC,aAAN,CAA6B,KAA7B,CAA3B;AAEA,OAAO,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,QAAtD;AACP,OAAO,MAAM,8BAA8B,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,kBAAjB,CAA7C","sourcesContent":["import * as React from 'react';\n\n/**\n * Context used communicate with child that it is a trigger for a menu\n */\nconst MenuTriggerContext = React.createContext<boolean>(false);\n\nexport const MenuTriggerContextProvider = MenuTriggerContext.Provider;\nexport const useMenuTriggerContext_unstable = () => React.useContext(MenuTriggerContext);\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["contexts/menuTriggerContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA;;AAEG;;AACH,MAAM,kBAAkB,gBAAG,KAAK,CAAC,aAAN,CAA6B,KAA7B,CAA3B;AAEA,OAAO,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,QAAtD;AACP,OAAO,MAAM,8BAA8B,GAAG,MAAM,KAAK,CAAC,UAAN,CAAiB,kBAAjB,CAA7C","sourcesContent":["import * as React from 'react';\n\n/**\n * Context used communicate with a child menu item that it is a trigger for a submenu\n */\nconst MenuTriggerContext = React.createContext<boolean>(false);\n\nexport const MenuTriggerContextProvider = MenuTriggerContext.Provider;\nexport const useMenuTriggerContext_unstable = () => React.useContext(MenuTriggerContext);\n"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -1,17 +1,17 @@
-export * from './contexts/menuContext';
-export * from './contexts/menuTriggerContext';
-export * from './contexts/menuGroupContext';
-export * from './contexts/menuListContext';
-export * from './Menu';
-export * from './MenuDivider';
-export * from './MenuGroup';
-export * from './MenuGroupHeader';
-export * from './MenuItem';
-export * from './MenuItemCheckbox';
-export * from './MenuItemRadio';
-export * from './MenuList';
-export * from './MenuPopover';
-export * from './MenuSplitGroup';
-export * from './MenuTrigger';
-export * from './selectable/index';
+export { MenuProvider, useMenuContext_unstable } from './contexts/menuContext';
+export { MenuTriggerContextProvider, useMenuTriggerContext_unstable } from './contexts/menuTriggerContext';
+export { MenuGroupContextProvider, useMenuGroupContext_unstable } from './contexts/menuGroupContext';
+export { MenuListProvider, useMenuListContext_unstable } from './contexts/menuListContext';
+export { Menu, renderMenu_unstable, useMenuContextValues_unstable, useMenu_unstable } from './Menu';
+export { MenuDivider, menuDividerClassNames, renderMenuDivider_unstable, useMenuDividerStyles_unstable, useMenuDivider_unstable } from './MenuDivider';
+export { MenuGroup, menuGroupClassNames, renderMenuGroup_unstable, useMenuGroupContextValues_unstable, useMenuGroupStyles_unstable, useMenuGroup_unstable } from './MenuGroup';
+export { MenuGroupHeader, menuGroupHeaderClassNames, renderMenuGroupHeader_unstable, useMenuGroupHeaderStyles_unstable, useMenuGroupHeader_unstable } from './MenuGroupHeader';
+export { MenuItem, menuItemClassNames, renderMenuItem_unstable, useMenuItemStyles_unstable, useMenuItem_unstable } from './MenuItem';
+export { MenuItemCheckbox, menuItemCheckboxClassNames, renderMenuItemCheckbox_unstable, useMenuItemCheckboxStyles_unstable, useMenuItemCheckbox_unstable } from './MenuItemCheckbox';
+export { MenuItemRadio, menuItemRadioClassNames, renderMenuItemRadio_unstable, useMenuItemRadioStyles_unstable, useMenuItemRadio_unstable } from './MenuItemRadio';
+export { MenuList, menuListClassNames, renderMenuList_unstable, useMenuListContextValues_unstable, useMenuListStyles_unstable, useMenuList_unstable } from './MenuList';
+export { MenuPopover, menuPopoverClassNames, renderMenuPopover_unstable, useMenuPopoverStyles_unstable, useMenuPopover_unstable } from './MenuPopover';
+export { MenuSplitGroup, menuSplitGroupClassNames, renderMenuSplitGroup_unstable, useMenuSplitGroupStyles_unstable, useMenuSplitGroup_unstable } from './MenuSplitGroup';
+export { MenuTrigger, renderMenuTrigger_unstable, useMenuTrigger_unstable } from './MenuTrigger';
+export { useCheckmarkStyles_unstable } from './selectable/index';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAE3C,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAE9B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './contexts/menuContext';\nexport * from './contexts/menuTriggerContext';\nexport * from './contexts/menuGroupContext';\nexport * from './contexts/menuListContext';\n\nexport * from './Menu';\nexport * from './MenuDivider';\nexport * from './MenuGroup';\nexport * from './MenuGroupHeader';\nexport * from './MenuItem';\nexport * from './MenuItemCheckbox';\nexport * from './MenuItemRadio';\nexport * from './MenuList';\nexport * from './MenuPopover';\nexport * from './MenuSplitGroup';\nexport * from './MenuTrigger';\n\nexport * from './selectable/index';\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,EAAuB,uBAAvB,QAAsD,wBAAtD;AAEA,SAAS,0BAAT,EAAqC,8BAArC,QAA2E,+BAA3E;AACA,SAAS,wBAAT,EAAmC,4BAAnC,QAAuE,6BAAvE;AAEA,SAAS,gBAAT,EAA2B,2BAA3B,QAA8D,4BAA9D;AAGA,SAAS,IAAT,EAAe,mBAAf,EAAoC,6BAApC,EAAmE,gBAAnE,QAA2F,QAA3F;AAEA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP;AAQA,SACE,SADF,EAEE,mBAFF,EAGE,wBAHF,EAIE,kCAJF,EAKE,2BALF,EAME,qBANF,QAOO,aAPP;AASA,SACE,eADF,EAEE,yBAFF,EAGE,8BAHF,EAIE,iCAJF,EAKE,2BALF,QAMO,mBANP;AAQA,SACE,QADF,EAEE,kBAFF,EAGE,uBAHF,EAIE,0BAJF,EAKE,oBALF,QAMO,YANP;AAQA,SACE,gBADF,EAEE,0BAFF,EAGE,+BAHF,EAIE,kCAJF,EAKE,4BALF,QAMO,oBANP;AAQA,SACE,aADF,EAEE,uBAFF,EAGE,4BAHF,EAIE,+BAJF,EAKE,yBALF,QAMO,iBANP;AAQA,SACE,QADF,EAEE,kBAFF,EAGE,uBAHF,EAIE,iCAJF,EAKE,0BALF,EAME,oBANF,QAOO,YAPP;AAiBA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP;AAQA,SACE,cADF,EAEE,wBAFF,EAGE,6BAHF,EAIE,gCAJF,EAKE,0BALF,QAMO,kBANP;AAQA,SAAS,WAAT,EAAsB,0BAAtB,EAAkD,uBAAlD,QAAiF,eAAjF;AAGA,SAAS,2BAAT,QAA4C,oBAA5C","sourcesContent":["export { MenuProvider, useMenuContext_unstable } from './contexts/menuContext';\nexport type { MenuContextValue } from './contexts/menuContext';\nexport { MenuTriggerContextProvider, useMenuTriggerContext_unstable } from './contexts/menuTriggerContext';\nexport { MenuGroupContextProvider, useMenuGroupContext_unstable } from './contexts/menuGroupContext';\nexport type { MenuGroupContextValue } from './contexts/menuGroupContext';\nexport { MenuListProvider, useMenuListContext_unstable } from './contexts/menuListContext';\nexport type { MenuListContextValue } from './contexts/menuListContext';\n\nexport { Menu, renderMenu_unstable, useMenuContextValues_unstable, useMenu_unstable } from './Menu';\nexport type { MenuContextValues, MenuOpenChangeData, MenuOpenEvents, MenuProps, MenuSlots, MenuState } from './Menu';\nexport {\n  MenuDivider,\n  menuDividerClassNames,\n  renderMenuDivider_unstable,\n  useMenuDividerStyles_unstable,\n  useMenuDivider_unstable,\n} from './MenuDivider';\nexport type { MenuDividerProps, MenuDividerSlots, MenuDividerState } from './MenuDivider';\nexport {\n  MenuGroup,\n  menuGroupClassNames,\n  renderMenuGroup_unstable,\n  useMenuGroupContextValues_unstable,\n  useMenuGroupStyles_unstable,\n  useMenuGroup_unstable,\n} from './MenuGroup';\nexport type { MenuGroupContextValues, MenuGroupProps, MenuGroupSlots, MenuGroupState } from './MenuGroup';\nexport {\n  MenuGroupHeader,\n  menuGroupHeaderClassNames,\n  renderMenuGroupHeader_unstable,\n  useMenuGroupHeaderStyles_unstable,\n  useMenuGroupHeader_unstable,\n} from './MenuGroupHeader';\nexport type { MenuGroupHeaderProps, MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader';\nexport {\n  MenuItem,\n  menuItemClassNames,\n  renderMenuItem_unstable,\n  useMenuItemStyles_unstable,\n  useMenuItem_unstable,\n} from './MenuItem';\nexport type { MenuItemProps, MenuItemSlots, MenuItemState } from './MenuItem';\nexport {\n  MenuItemCheckbox,\n  menuItemCheckboxClassNames,\n  renderMenuItemCheckbox_unstable,\n  useMenuItemCheckboxStyles_unstable,\n  useMenuItemCheckbox_unstable,\n} from './MenuItemCheckbox';\nexport type { MenuItemCheckboxProps, MenuItemCheckboxState } from './MenuItemCheckbox';\nexport {\n  MenuItemRadio,\n  menuItemRadioClassNames,\n  renderMenuItemRadio_unstable,\n  useMenuItemRadioStyles_unstable,\n  useMenuItemRadio_unstable,\n} from './MenuItemRadio';\nexport type { MenuItemRadioProps, MenuItemRadioState } from './MenuItemRadio';\nexport {\n  MenuList,\n  menuListClassNames,\n  renderMenuList_unstable,\n  useMenuListContextValues_unstable,\n  useMenuListStyles_unstable,\n  useMenuList_unstable,\n} from './MenuList';\nexport type {\n  MenuCheckedValueChangeData,\n  MenuCheckedValueChangeEvent,\n  MenuListContextValues,\n  MenuListProps,\n  MenuListSlots,\n  MenuListState,\n  UninitializedMenuListState,\n} from './MenuList';\nexport {\n  MenuPopover,\n  menuPopoverClassNames,\n  renderMenuPopover_unstable,\n  useMenuPopoverStyles_unstable,\n  useMenuPopover_unstable,\n} from './MenuPopover';\nexport type { MenuPopoverProps, MenuPopoverSlots, MenuPopoverState } from './MenuPopover';\nexport {\n  MenuSplitGroup,\n  menuSplitGroupClassNames,\n  renderMenuSplitGroup_unstable,\n  useMenuSplitGroupStyles_unstable,\n  useMenuSplitGroup_unstable,\n} from './MenuSplitGroup';\nexport type { MenuSplitGroupProps, MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup';\nexport { MenuTrigger, renderMenuTrigger_unstable, useMenuTrigger_unstable } from './MenuTrigger';\nexport type { MenuTriggerChildProps, MenuTriggerProps, MenuTriggerState } from './MenuTrigger';\n\nexport { useCheckmarkStyles_unstable } from './selectable/index';\nexport type { MenuItemSelectableProps, MenuItemSelectableState, SelectableHandler } from './selectable/index';\n"],"sourceRoot":"../src/"}

package/lib/selectable/useCheckmarkStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["selectable/useCheckmarkStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;;AAIA,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAWA;;;;AAIG;;;AACH,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAAsE;AAC/G,QAAM,MAAM,GAAG,SAAS,EAAxB;;AACA,MAAI,KAAK,CAAC,SAAV,EAAqB;AACnB,IAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,MAAM,CAAC,IAD+B,EAEtC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAFc,EAGtC,KAAK,CAAC,SAAN,CAAgB,SAHsB,CAAxC;AAKD;AACF,CATM","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuItemSelectableState } from './types';\nimport type { MenuItemState } from '../components/MenuItem/MenuItem.types';\n\nconst useStyles = makeStyles({\n  root: {\n    width: '16px',\n    height: '16px',\n    visibility: 'hidden',\n  },\n  rootChecked: {\n    visibility: 'visible',\n  },\n});\n\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */\nexport const useCheckmarkStyles_unstable = (state: MenuItemSelectableState & Pick<MenuItemState, 'checkmark'>) => {\n  const styles = useStyles();\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(\n      styles.root,\n      state.checked && styles.rootChecked,\n      state.checkmark.className,\n    );\n  }\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["selectable/useCheckmarkStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,kBAAyC,gBAAzC;;AAIA,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAWA;;;;AAIG;;;AACH,OAAO,MAAM,2BAA2B,GAAI,KAAD,IAAsE;EAC/G,MAAM,MAAM,GAAG,SAAS,EAAxB;;EACA,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CACtC,MAAM,CAAC,IAD+B,EAEtC,KAAK,CAAC,OAAN,IAAiB,MAAM,CAAC,WAFc,EAGtC,KAAK,CAAC,SAAN,CAAgB,SAHsB,CAAxC;EAKD;AACF,CATM","sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuItemSelectableState } from './types';\nimport type { MenuItemState } from '../components/MenuItem/MenuItem.types';\n\nconst useStyles = makeStyles({\n  root: {\n    width: '16px',\n    height: '16px',\n    visibility: 'hidden',\n  },\n  rootChecked: {\n    visibility: 'visible',\n  },\n});\n\n/**\n * Applies styles to a checkmark slot for selectable menu items\n *\n * @param state - should contain a `checkmark` slot\n */\nexport const useCheckmarkStyles_unstable = (state: MenuItemSelectableState & Pick<MenuItemState, 'checkmark'>) => {\n  const styles = useStyles();\n  if (state.checkmark) {\n    state.checkmark.className = mergeClasses(\n      styles.root,\n      state.checked && styles.rootChecked,\n      state.checkmark.className,\n    );\n  }\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/useIsSubmenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/useIsSubmenu.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,QAAoC,kCAApC;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;AAOG;;AACH,OAAM,SAAU,YAAV,GAAsB;AAC1B,QAAM,gBAAgB,GAAG,uBAAuB,CAAC,OAAO,IAAI,OAAO,CAAC,SAApB,CAAhD;AACA,QAAM,kBAAkB,GAAG,mBAAmB,CAAC,eAAD,CAA9C;AAEA,SAAO,gBAAgB,IAAI,kBAA3B;AACD","sourcesContent":["import { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../contexts/menuContext';\nimport { MenuListContext } from '../contexts/menuListContext';\n\n/**\n * A component can be a part of a submenu whether its menu context `isSubmenu` flag is true\n * or whether it is a part of a `MenuList`\n *\n * A simple hook to check box contexts easily\n *\n * @returns whether the component is part of a submenu\n */\nexport function useIsSubmenu() {\n  const menuContextValue = useMenuContext_unstable(context => context.isSubmenu);\n  const hasMenuListContext = useHasParentContext(MenuListContext);\n\n  return menuContextValue || hasMenuListContext;\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/useIsSubmenu.ts"],"names":[],"mappings":"AAAA,SAAS,mBAAT,QAAoC,kCAApC;AACA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;AAOG;;AACH,OAAM,SAAU,YAAV,GAAsB;EAC1B,MAAM,gBAAgB,GAAG,uBAAuB,CAAC,OAAO,IAAI,OAAO,CAAC,SAApB,CAAhD;EACA,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,eAAD,CAA9C;EAEA,OAAO,gBAAgB,IAAI,kBAA3B;AACD","sourcesContent":["import { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useMenuContext_unstable } from '../contexts/menuContext';\nimport { MenuListContext } from '../contexts/menuListContext';\n\n/**\n * A component can be a part of a submenu whether its menu context `isSubmenu` flag is true\n * or whether it is a part of a `MenuList`\n *\n * A simple hook to check box contexts easily\n *\n * @returns whether the component is part of a submenu\n */\nexport function useIsSubmenu() {\n  const menuContextValue = useMenuContext_unstable(context => context.isSubmenu);\n  const hasMenuListContext = useHasParentContext(MenuListContext);\n\n  return menuContextValue || hasMenuListContext;\n}\n"],"sourceRoot":"../src/"}

package/lib/utils/useOnMenuEnter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/useOnMenuEnter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,eAAT,QAAgC,wBAAhC;AAGA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAG,cAAzB;AAEP;;;;;;;;;;AAUG;;AACH,OAAO,MAAM,mBAAmB,GAAI,OAAD,IAA8C;AAC/E,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,QAAR;AAAkB,IAAA,OAAlB;AAA2B,IAAA;AAA3B,MAAwC,OAA9C,CAD+E,CAG/E;;AACA,QAAM,QAAQ,GAAG,gBAAgB,CAAE,EAAD,IAAmB;;;AACnD,UAAM,UAAU,GAAG,IAAI,CAAC,CAAD,CAAvB;AACA,UAAM,eAAe,GAAG,EAAE,CAAC,MAA3B,CAFmD,CAInD;AACA;AACA;;AACA,UAAM,gBAAgB,GAAG,CAAC,eAAe,CAAC,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,EAAlB,GAAsB,IAAvB,EAA6B,eAA7B,CAAzC;;AACA,QAAI,gBAAgB,IAAI,CAAC,QAAzB,EAAmC;AACjC,MAAA,QAAQ,CAAC,EAAD,CAAR;AACD;AACF,GAXgC,CAAjC;AAaA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB;AACA,QAAI,OAAO,IAAI,IAAf,EAAqB;AACnB;AACD;;AAUD,QAAI,CAAC,QAAL,EAAe;AACb,MAAA,OAAO,CAAC,gBAAR,CAAyB,gBAAzB,EAA2C,QAA3C;AACD;;AAED,WAAO,MAAK;AACV,MAAA,OAAO,CAAC,mBAAR,CAA4B,gBAA5B,EAA8C,QAA9C;AACD,KAFD;AAGD,GArBD,EAqBG,CAAC,QAAD,EAAW,OAAX,EAAoB,QAApB,CArBH;AAsBD,CAvCM;AAyCP;;;;AAIG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,EAAD,EAAkB,WAAlB,KAA6C;AACjF,EAAA,EAAE,CAAC,aAAH,CAAiB,IAAI,WAAJ,CAAgB,gBAAhB,EAAkC;AAAE,IAAA,OAAO,EAAE,IAAX;AAAiB,IAAA,MAAM,EAAE;AAAE,MAAA;AAAF;AAAzB,GAAlC,CAAjB;AACD,CAFM","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { UseOnClickOrScrollOutsideOptions } from '@fluentui/react-utilities';\n\n/**\n * Name of the custom event\n */\nexport const MENU_ENTER_EVENT = 'fuimenuenter';\n\n/**\n * This hook works similarly to @see {useOnClickOutside}\n *\n * Problem: Trying to behave the same as system menus:\n * When the mouse leaves a stack of nested menus the stack should not dismiss.\n * However if the mouse leaves a stack of menus and enters a parent menu all its children menu should dismiss.\n *\n * We don't use the native mouseenter event because it would trigger too many times in the document\n * Instead, dispatch custom DOM event from the menu so that it can bubble\n * Each nested menu can use the listener to check if the event is from a child or parent menu\n */\nexport const useOnMenuMouseEnter = (options: UseOnClickOrScrollOutsideOptions) => {\n  const { refs, callback, element, disabled } = options;\n\n  // Keep mouse event here because this is essentially a custom 'mouseenter' event\n  const listener = useEventCallback((ev: MouseEvent) => {\n    const popoverRef = refs[0];\n    const someMenuPopover = ev.target as HTMLElement;\n\n    // someMenu is a child -> will always be contained because of vParents\n    // someMenu is a parent -> will always not be contained because no vParent\n    // someMenu is the current popover -> it will contain itself\n    const isOutsidePopover = !elementContains(popoverRef.current ?? null, someMenuPopover);\n    if (isOutsidePopover && !disabled) {\n      callback(ev);\n    }\n  });\n\n  React.useEffect(() => {\n    // eslint-disable-next-line eqeqeq\n    if (element == null) {\n      return;\n    }\n\n    /**\n     * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n     * evt is being typed as a base class of MouseEvent -> `Event`.\n     * This type is used to override `listener` calls to make TS happy\n     */\n\n    type ListenerOverride = (evt: Event) => void;\n\n    if (!disabled) {\n      element.addEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);\n    }\n\n    return () => {\n      element.removeEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);\n    };\n  }, [listener, element, disabled]);\n};\n\n/**\n * Dispatches the custom MouseEvent enter event. Similar to calling `el.click()`\n * @param el element for the event target\n * @param nativeEvent the native mouse event this is mapped to\n */\nexport const dispatchMenuEnterEvent = (el: HTMLElement, nativeEvent: MouseEvent) => {\n  el.dispatchEvent(new CustomEvent(MENU_ENTER_EVENT, { bubbles: true, detail: { nativeEvent } }));\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/useOnMenuEnter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,eAAT,QAAgC,wBAAhC;AAGA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAG,cAAzB;AAEP;;;;;;;;;;AAUG;;AACH,OAAO,MAAM,mBAAmB,GAAI,OAAD,IAA8C;EAC/E,MAAM;IAAE,IAAF;IAAQ,QAAR;IAAkB,OAAlB;IAA2B;EAA3B,IAAwC,OAA9C,CAD+E,CAG/E;;EACA,MAAM,QAAQ,GAAG,gBAAgB,CAAE,EAAD,IAAmB;;;IACnD,MAAM,UAAU,GAAG,IAAI,CAAC,CAAD,CAAvB;IACA,MAAM,eAAe,GAAG,EAAE,CAAC,MAA3B,CAFmD,CAInD;IACA;IACA;;IACA,MAAM,gBAAgB,GAAG,CAAC,eAAe,CAAC,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,EAAlB,GAAsB,IAAvB,EAA6B,eAA7B,CAAzC;;IACA,IAAI,gBAAgB,IAAI,CAAC,QAAzB,EAAmC;MACjC,QAAQ,CAAC,EAAD,CAAR;IACD;EACF,CAXgC,CAAjC;EAaA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB;IACA,IAAI,OAAO,IAAI,IAAf,EAAqB;MACnB;IACD;;IAUD,IAAI,CAAC,QAAL,EAAe;MACb,OAAO,CAAC,gBAAR,CAAyB,gBAAzB,EAA2C,QAA3C;IACD;;IAED,OAAO,MAAK;MACV,OAAO,CAAC,mBAAR,CAA4B,gBAA5B,EAA8C,QAA9C;IACD,CAFD;EAGD,CArBD,EAqBG,CAAC,QAAD,EAAW,OAAX,EAAoB,QAApB,CArBH;AAsBD,CAvCM;AAyCP;;;;AAIG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,EAAD,EAAkB,WAAlB,KAA6C;EACjF,EAAE,CAAC,aAAH,CAAiB,IAAI,WAAJ,CAAgB,gBAAhB,EAAkC;IAAE,OAAO,EAAE,IAAX;IAAiB,MAAM,EAAE;MAAE;IAAF;EAAzB,CAAlC,CAAjB;AACD,CAFM","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { UseOnClickOrScrollOutsideOptions } from '@fluentui/react-utilities';\n\n/**\n * Name of the custom event\n */\nexport const MENU_ENTER_EVENT = 'fuimenuenter';\n\n/**\n * This hook works similarly to @see {useOnClickOutside}\n *\n * Problem: Trying to behave the same as system menus:\n * When the mouse leaves a stack of nested menus the stack should not dismiss.\n * However if the mouse leaves a stack of menus and enters a parent menu all its children menu should dismiss.\n *\n * We don't use the native mouseenter event because it would trigger too many times in the document\n * Instead, dispatch custom DOM event from the menu so that it can bubble\n * Each nested menu can use the listener to check if the event is from a child or parent menu\n */\nexport const useOnMenuMouseEnter = (options: UseOnClickOrScrollOutsideOptions) => {\n  const { refs, callback, element, disabled } = options;\n\n  // Keep mouse event here because this is essentially a custom 'mouseenter' event\n  const listener = useEventCallback((ev: MouseEvent) => {\n    const popoverRef = refs[0];\n    const someMenuPopover = ev.target as HTMLElement;\n\n    // someMenu is a child -> will always be contained because of vParents\n    // someMenu is a parent -> will always not be contained because no vParent\n    // someMenu is the current popover -> it will contain itself\n    const isOutsidePopover = !elementContains(popoverRef.current ?? null, someMenuPopover);\n    if (isOutsidePopover && !disabled) {\n      callback(ev);\n    }\n  });\n\n  React.useEffect(() => {\n    // eslint-disable-next-line eqeqeq\n    if (element == null) {\n      return;\n    }\n\n    /**\n     * Because `addEventListener` type override falls back to 2nd definition (evt name is unknown string literal)\n     * evt is being typed as a base class of MouseEvent -> `Event`.\n     * This type is used to override `listener` calls to make TS happy\n     */\n\n    type ListenerOverride = (evt: Event) => void;\n\n    if (!disabled) {\n      element.addEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);\n    }\n\n    return () => {\n      element.removeEventListener(MENU_ENTER_EVENT, listener as ListenerOverride);\n    };\n  }, [listener, element, disabled]);\n};\n\n/**\n * Dispatches the custom MouseEvent enter event. Similar to calling `el.click()`\n * @param el element for the event target\n * @param nativeEvent the native mouse event this is mapped to\n */\nexport const dispatchMenuEnterEvent = (el: HTMLElement, nativeEvent: MouseEvent) => {\n  el.dispatchEvent(new CustomEvent(MENU_ENTER_EVENT, { bubbles: true, detail: { nativeEvent } }));\n};\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Menu/Menu.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,IAAI,GAAwB,KAAK,IAAG;AAC/C,QAAM,KAAK,GAAG,SAAA,CAAA,gBAAA,CAAiB,KAAjB,CAAd;AACA,QAAM,aAAa,GAAG,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,CAAtB;AAEA,SAAO,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,aAA3B,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,IAAA,GAAI,IAAJ;AAOb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useMenu_unstable } from './useMenu';\nimport { useMenuContextValues_unstable } from './useMenuContextValues';\nimport { renderMenu_unstable } from './renderMenu';\nimport type { MenuProps } from './Menu.types';\n\n/**\n * Wrapper component that manages state for a popup MenuList and a MenuTrigger\n */\nexport const Menu: React.FC<MenuProps> = props => {\n  const state = useMenu_unstable(props);\n  const contextValues = useMenuContextValues_unstable(state);\n\n  return renderMenu_unstable(state, contextValues);\n};\n\nMenu.displayName = 'Menu';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Menu/Menu.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,IAAI,GAAwB,KAAK,IAAG;EAC/C,MAAM,KAAK,GAAG,SAAA,CAAA,gBAAA,CAAiB,KAAjB,CAAd;EACA,MAAM,aAAa,GAAG,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,CAAtB;EAEA,OAAO,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,aAA3B,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,IAAA,GAAI,IAAJ;AAOb,OAAA,CAAA,IAAA,CAAK,WAAL,GAAmB,MAAnB","sourcesContent":["import * as React from 'react';\nimport { useMenu_unstable } from './useMenu';\nimport { useMenuContextValues_unstable } from './useMenuContextValues';\nimport { renderMenu_unstable } from './renderMenu';\nimport type { MenuProps } from './Menu.types';\n\n/**\n * Wrapper component that manages state for a popup MenuList and a MenuTrigger\n */\nexport const Menu: React.FC<MenuProps> = props => {\n  const state = useMenu_unstable(props);\n  const contextValues = useMenuContextValues_unstable(state);\n\n  return renderMenu_unstable(state, contextValues);\n};\n\nMenu.displayName = 'Menu';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Menu/renderMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Menu/renderMenu.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAmB,aAAnB,KAAuD;AACxF,SACE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,YAAD,EAAa;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAb,EACG,KAAK,CAAC,WADT,EAEG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,WAFvB,CADF;AAMD,CAPM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\nimport { MenuProvider } from '../../contexts/menuContext';\nimport type { MenuContextValues, MenuState } from './Menu.types';\n\n/**\n * Render the final JSX of Menu\n */\nexport const renderMenu_unstable = (state: MenuState, contextValues: MenuContextValues) => {\n  return (\n    <MenuProvider value={contextValues.menu}>\n      {state.menuTrigger}\n      {state.open && state.menuPopover}\n    </MenuProvider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Menu/renderMenu.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAmB,aAAnB,KAAuD;EACxF,OACE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,YAAD,EAAa;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAb,EACG,KAAK,CAAC,WADT,EAEG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,WAFvB,CADF;AAMD,CAPM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\nimport { MenuProvider } from '../../contexts/menuContext';\nimport type { MenuContextValues, MenuState } from './Menu.types';\n\n/**\n * Render the final JSX of Menu\n */\nexport const renderMenu_unstable = (state: MenuState, contextValues: MenuContextValues) => {\n  return (\n    <MenuProvider value={contextValues.menu}>\n      {state.menuTrigger}\n      {state.open && state.menuPopover}\n    </MenuProvider>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Menu/useMenu.js

@@ -33,10 +33,12 @@ const useIsSubmenu_1 = /*#__PURE__*/require("../../utils/useIsSubmenu");
 
 
 const useMenu_unstable = props => {
+  var _a;
+
   const triggerId = react_utilities_1.useId('menu');
   const isSubmenu = useIsSubmenu_1.useIsSubmenu();
-  const [contextTarget, setContextTarget] = react_positioning_1.usePopperMouseTarget();
-  const popperState = {
+  const [contextTarget, setContextTarget] = react_positioning_1.usePositioningMouseTarget();
+  const positioningState = {
     position: isSubmenu ? 'after' : 'below',
     align: isSubmenu ? 'top' : 'start',
     target: props.openOnContext ? contextTarget : undefined,
@@ -69,7 +71,7 @@ const useMenu_unstable = props => {
   const {
     targetRef: triggerRef,
     containerRef: menuPopoverRef
-  } = react_positioning_1.usePopper(popperState);
+  } = react_positioning_1.usePositioning(positioningState);
   const initialState = {
     hoverDelay: 500,
     triggerId,
@@ -78,6 +80,7 @@ const useMenu_unstable = props => {
     contextTarget,
     setContextTarget,
     ...props,
+    closeOnScroll: (_a = props.closeOnScroll) !== null && _a !== void 0 ? _a : false,
     menuTrigger,
     menuPopover,
     triggerRef,
@@ -135,7 +138,7 @@ const useMenuSelectableState = state => {
 const useMenuOpenState = state => {
   const {
     targetDocument
-  } = react_shared_contexts_1.useFluent();
+  } = react_shared_contexts_1.useFluent_unstable();
   const parentSetOpen = menuContext_1.useMenuContext_unstable(context => context.setOpen);
   const onOpenChange = react_utilities_1.useEventCallback((e, data) => {
     var _a;
@@ -205,10 +208,21 @@ const useMenuOpenState = state => {
     contains: react_portal_1.elementContains,
     disabled: !open,
     element: targetDocument,
-    refs: [state.menuPopoverRef, state.triggerRef],
+    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(Boolean),
     callback: e => setOpen(e, {
       open: false
     })
+  }); // only close on scroll for context, or when closeOnScroll is specified
+
+  const closeOnScroll = state.openOnContext || state.closeOnScroll;
+  react_utilities_1.useOnScrollOutside({
+    contains: react_portal_1.elementContains,
+    element: targetDocument,
+    callback: ev => setOpen(ev, {
+      open: false
+    }),
+    refs: [state.menuPopoverRef, !state.openOnContext && state.triggerRef].filter(Boolean),
+    disabled: !open || !closeOnScroll
   });
   index_1.useOnMenuMouseEnter({
     element: targetDocument,