@fluentui/react-menu 0.0.0-nightly-20230303-0424.1 → 0.0.0-nightly-20230307-0423.1

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

@@ -9,6 +9,7 @@ const useMenuList_1 = /*#__PURE__*/require("./useMenuList");
 const renderMenuList_1 = /*#__PURE__*/require("./renderMenuList");
 const useMenuListContextValues_1 = /*#__PURE__*/require("./useMenuListContextValues");
 const useMenuListStyles_1 = /*#__PURE__*/require("./useMenuListStyles");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * Define a styled MenuList, using the `useMenuList_unstable` hook.
  */
@@ -16,6 +17,10 @@ exports.MenuList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuList_1.useMenuList_unstable(props, ref);
   const contextValues = useMenuListContextValues_1.useMenuListContextValues_unstable(state);
   useMenuListStyles_1.useMenuListStyles_unstable(state);
+  const {
+    useMenuListStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderMenuList_1.renderMenuList_unstable(state, contextValues);
 });
 exports.MenuList.displayName = 'MenuList';

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","useMenuList_1","renderMenuList_1","useMenuListContextValues_1","useMenuListStyles_1","exports","MenuList","forwardRef","props","ref","state","useMenuList_unstable","contextValues","useMenuListContextValues_unstable","useMenuListStyles_unstable","renderMenuList_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/MenuList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuList_unstable } from './useMenuList';\nimport { renderMenuList_unstable } from './renderMenuList';\nimport { useMenuListContextValues_unstable } from './useMenuListContextValues';\nimport { useMenuListStyles_unstable } from './useMenuListStyles';\nimport type { MenuListProps } from './MenuList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled MenuList, using the `useMenuList_unstable` hook.\n */\nexport const MenuList: ForwardRefComponent<MenuListProps> = React.forwardRef((props, ref) => {\n  const state = useMenuList_unstable(props, ref);\n  const contextValues = useMenuListContextValues_unstable(state);\n  useMenuListStyles_unstable(state);\n\n  return renderMenuList_unstable(state, contextValues);\n});\n\nMenuList.displayName = 'MenuList';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,gBAAA,gBAAAF,OAAA;AACA,MAAAG,0BAAA,gBAAAH,OAAA;AACA,MAAAI,mBAAA,gBAAAJ,OAAA;AAIA;;;AAGaK,OAAA,CAAAC,QAAQ,gBAAuCP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGT,aAAA,CAAAU,oBAAoB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC9C,MAAMG,aAAa,GAAGT,0BAAA,CAAAU,iCAAiC,CAACH,KAAK,CAAC;EAC9DN,mBAAA,CAAAU,0BAA0B,CAACJ,KAAK,CAAC;EAEjC,OAAOR,gBAAA,CAAAa,uBAAuB,CAACL,KAAK,EAAEE,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFP,OAAA,CAAAC,QAAQ,CAACU,WAAW,GAAG,UAAU"}
+{"version":3,"names":["React","require","useMenuList_1","renderMenuList_1","useMenuListContextValues_1","useMenuListStyles_1","react_shared_contexts_1","exports","MenuList","forwardRef","props","ref","state","useMenuList_unstable","contextValues","useMenuListContextValues_unstable","useMenuListStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderMenuList_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuList/MenuList.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuList_unstable } from './useMenuList';\nimport { renderMenuList_unstable } from './renderMenuList';\nimport { useMenuListContextValues_unstable } from './useMenuListContextValues';\nimport { useMenuListStyles_unstable } from './useMenuListStyles';\nimport type { MenuListProps } from './MenuList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuList, using the `useMenuList_unstable` hook.\n */\nexport const MenuList: ForwardRefComponent<MenuListProps> = React.forwardRef((props, ref) => {\n  const state = useMenuList_unstable(props, ref);\n  const contextValues = useMenuListContextValues_unstable(state);\n\n  useMenuListStyles_unstable(state);\n\n  const { useMenuListStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuList_unstable(state, contextValues);\n});\n\nMenuList.displayName = 'MenuList';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,gBAAA,gBAAAF,OAAA;AACA,MAAAG,0BAAA,gBAAAH,OAAA;AACA,MAAAI,mBAAA,gBAAAJ,OAAA;AAGA,MAAAK,uBAAA,gBAAAL,OAAA;AAEA;;;AAGaM,OAAA,CAAAC,QAAQ,gBAAuCR,KAAK,CAACS,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGV,aAAA,CAAAW,oBAAoB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAC9C,MAAMG,aAAa,GAAGV,0BAAA,CAAAW,iCAAiC,CAACH,KAAK,CAAC;EAE9DP,mBAAA,CAAAW,0BAA0B,CAACJ,KAAK,CAAC;EAEjC,MAAM;IAAEI,0BAA0B,EAAEC;EAAe,CAAE,GAAGX,uBAAA,CAAAY,4BAA4B,EAAE;EACtFD,eAAe,CAACL,KAAK,CAAC;EAEtB,OAAOT,gBAAA,CAAAgB,uBAAuB,CAACP,KAAK,EAAEE,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFP,OAAA,CAAAC,QAAQ,CAACY,WAAW,GAAG,UAAU"}

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

@@ -8,12 +8,17 @@ const React = /*#__PURE__*/require("react");
 const useMenuPopover_1 = /*#__PURE__*/require("./useMenuPopover");
 const useMenuPopoverStyles_1 = /*#__PURE__*/require("./useMenuPopoverStyles");
 const renderMenuPopover_1 = /*#__PURE__*/require("./renderMenuPopover");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus
  */
 exports.MenuPopover = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuPopover_1.useMenuPopover_unstable(props, ref);
   useMenuPopoverStyles_1.useMenuPopoverStyles_unstable(state);
+  const {
+    useMenuPopoverStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderMenuPopover_1.renderMenuPopover_unstable(state);
 });
 exports.MenuPopover.displayName = 'MenuPopover';

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","useMenuPopover_1","useMenuPopoverStyles_1","renderMenuPopover_1","exports","MenuPopover","forwardRef","props","ref","state","useMenuPopover_unstable","useMenuPopoverStyles_unstable","renderMenuPopover_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n  const state = useMenuPopover_unstable(props, ref);\n\n  useMenuPopoverStyles_unstable(state);\n  return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,gBAAA,gBAAAD,OAAA;AACA,MAAAE,sBAAA,gBAAAF,OAAA;AACA,MAAAG,mBAAA,gBAAAH,OAAA;AAIA;;;AAGaI,OAAA,CAAAC,WAAW,gBAA0CN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGR,gBAAA,CAAAS,uBAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDN,sBAAA,CAAAS,6BAA6B,CAACF,KAAK,CAAC;EACpC,OAAON,mBAAA,CAAAS,0BAA0B,CAACH,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFL,OAAA,CAAAC,WAAW,CAACQ,WAAW,GAAG,aAAa"}
+{"version":3,"names":["React","require","useMenuPopover_1","useMenuPopoverStyles_1","renderMenuPopover_1","react_shared_contexts_1","exports","MenuPopover","forwardRef","props","ref","state","useMenuPopover_unstable","useMenuPopoverStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderMenuPopover_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuPopover_unstable } from './useMenuPopover';\nimport { useMenuPopoverStyles_unstable } from './useMenuPopoverStyles';\nimport { renderMenuPopover_unstable } from './renderMenuPopover';\nimport type { MenuPopoverProps } from './MenuPopover.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Popover intended to wrap `MenuList` and adds styling and interaction support specific to menus\n */\nexport const MenuPopover: ForwardRefComponent<MenuPopoverProps> = React.forwardRef((props, ref) => {\n  const state = useMenuPopover_unstable(props, ref);\n\n  useMenuPopoverStyles_unstable(state);\n\n  const { useMenuPopoverStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuPopover_unstable(state);\n});\n\nMenuPopover.displayName = 'MenuPopover';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,gBAAA,gBAAAD,OAAA;AACA,MAAAE,sBAAA,gBAAAF,OAAA;AACA,MAAAG,mBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,WAAW,gBAA0CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGT,gBAAA,CAAAU,uBAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDP,sBAAA,CAAAU,6BAA6B,CAACF,KAAK,CAAC;EAEpC,MAAM;IAAEE,6BAA6B,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EACzFD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOP,mBAAA,CAAAY,0BAA0B,CAACL,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFL,OAAA,CAAAC,WAAW,CAACU,WAAW,GAAG,aAAa"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> & {\n  /**\n   * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n   * This option is disregarded for submenus\n   */\n  inline: boolean;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/MenuPopover.types.ts"],"sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type MenuPopoverSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * MenuPopover Props\n */\nexport type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;\n\n/**\n * State used in rendering MenuPopover\n */\nexport type MenuPopoverState = ComponentState<MenuPopoverSlots> &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Root menus are rendered out of DOM order on `document.body`, use this to render the menu in DOM order\n     * This option is disregarded for submenus\n     */\n    inline: boolean;\n  };\n"],"mappings":""}

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

@@ -20,7 +20,9 @@ const renderMenuPopover_unstable = state => {
       ...slotProps.root
     });
   }
-  return React.createElement(react_portal_1.Portal, null, React.createElement(slots.root, {
+  return React.createElement(react_portal_1.Portal, {
+    mountNode: state.mountNode
+  }, React.createElement(slots.root, {
     ...slotProps.root
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","react_utilities_1","react_portal_1","renderMenuPopover_unstable","state","slots","slotProps","getSlots","inline","createElement","root","Portal","exports"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA,MAAAE,cAAA,gBAAAF,OAAA;AAEA;;;AAGO,MAAMG,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,iBAAA,CAAAM,QAAQ,CAAmBH,KAAK,CAAC;EAE9D,IAAIA,KAAK,CAACI,MAAM,EAAE;IAChB,OAAOT,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACK,IAAI;MAAA,GAAKJ,SAAS,CAACI;IAAI,EAAI;;EAG3C,OACEX,KAAA,CAAAU,aAAA,CAACP,cAAA,CAAAS,MAAM,QACLZ,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CAC3B;AAEb,CAAC;AAZYE,OAAA,CAAAT,0BAA0B,GAAAA,0BAAA"}
+{"version":3,"names":["React","require","react_utilities_1","react_portal_1","renderMenuPopover_unstable","state","slots","slotProps","getSlots","inline","createElement","root","Portal","mountNode","exports"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuPopover/renderMenuPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of MenuPopover\n */\nexport const renderMenuPopover_unstable = (state: MenuPopoverState) => {\n  const { slots, slotProps } = getSlots<MenuPopoverSlots>(state);\n\n  if (state.inline) {\n    return <slots.root {...slotProps.root} />;\n  }\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      <slots.root {...slotProps.root} />\n    </Portal>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA,MAAAE,cAAA,gBAAAF,OAAA;AAEA;;;AAGO,MAAMG,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,iBAAA,CAAAM,QAAQ,CAAmBH,KAAK,CAAC;EAE9D,IAAIA,KAAK,CAACI,MAAM,EAAE;IAChB,OAAOT,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACK,IAAI;MAAA,GAAKJ,SAAS,CAACI;IAAI,EAAI;;EAG3C,OACEX,KAAA,CAAAU,aAAA,CAACP,cAAA,CAAAS,MAAM;IAACC,SAAS,EAAER,KAAK,CAACQ;EAAS,GAChCb,KAAA,CAAAU,aAAA,CAACJ,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,EAAI,CAC3B;AAEb,CAAC;AAZYG,OAAA,CAAAV,0BAA0B,GAAAA,0BAAA"}

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

@@ -55,6 +55,7 @@ const useMenuPopover_unstable = (props, ref) => {
     () => clearTimeout(throttleDispatchTimerRef.current);
   }, []);
   const inline = (_a = menuContext_1.useMenuContext_unstable(context => context.inline)) !== null && _a !== void 0 ? _a : false;
+  const mountNode = menuContext_1.useMenuContext_unstable(context => context.mountNode);
   const rootProps = react_utilities_1.getNativeElementProps('div', {
     role: 'presentation',
     ...props,
@@ -103,6 +104,7 @@ const useMenuPopover_unstable = (props, ref) => {
   });
   return {
     inline,
+    mountNode,
     components: {
       root: 'div'
     },

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

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

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

@@ -8,12 +8,17 @@ const React = /*#__PURE__*/require("react");
 const useMenuSplitGroup_1 = /*#__PURE__*/require("./useMenuSplitGroup");
 const renderMenuSplitGroup_1 = /*#__PURE__*/require("./renderMenuSplitGroup");
 const useMenuSplitGroupStyles_1 = /*#__PURE__*/require("./useMenuSplitGroupStyles");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.
  */
 exports.MenuSplitGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useMenuSplitGroup_1.useMenuSplitGroup_unstable(props, ref);
   useMenuSplitGroupStyles_1.useMenuSplitGroupStyles_unstable(state);
+  const {
+    useMenuSplitGroupStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderMenuSplitGroup_1.renderMenuSplitGroup_unstable(state);
 });
 exports.MenuSplitGroup.displayName = 'MenuSplitGroup';

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","useMenuSplitGroup_1","renderMenuSplitGroup_1","useMenuSplitGroupStyles_1","exports","MenuSplitGroup","forwardRef","props","ref","state","useMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","renderMenuSplitGroup_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx"],"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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,mBAAA,gBAAAD,OAAA;AACA,MAAAE,sBAAA,gBAAAF,OAAA;AACA,MAAAG,yBAAA,gBAAAH,OAAA;AAIA;;;AAGaI,OAAA,CAAAC,cAAc,gBAA6CN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGR,mBAAA,CAAAS,0BAA0B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEpDL,yBAAA,CAAAQ,gCAAgC,CAACF,KAAK,CAAC;EACvC,OAAOP,sBAAA,CAAAU,6BAA6B,CAACH,KAAK,CAAC;AAC7C,CAAC,CAAC;AAEFL,OAAA,CAAAC,cAAc,CAACQ,WAAW,GAAG,gBAAgB"}
+{"version":3,"names":["React","require","useMenuSplitGroup_1","renderMenuSplitGroup_1","useMenuSplitGroupStyles_1","react_shared_contexts_1","exports","MenuSplitGroup","forwardRef","props","ref","state","useMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderMenuSplitGroup_unstable","displayName"],"sources":["../../../../../../../../../packages/react-components/react-menu/src/components/MenuSplitGroup/MenuSplitGroup.tsx"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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\n  const { useMenuSplitGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderMenuSplitGroup_unstable(state);\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,mBAAA,gBAAAD,OAAA;AACA,MAAAE,sBAAA,gBAAAF,OAAA;AACA,MAAAG,yBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,cAAc,gBAA6CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtG,MAAMC,KAAK,GAAGT,mBAAA,CAAAU,0BAA0B,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEpDN,yBAAA,CAAAS,gCAAgC,CAACF,KAAK,CAAC;EAEvC,MAAM;IAAEE,gCAAgC,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EAC5FD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOR,sBAAA,CAAAa,6BAA6B,CAACL,KAAK,CAAC;AAC7C,CAAC,CAAC;AAEFL,OAAA,CAAAC,cAAc,CAACU,WAAW,GAAG,gBAAgB"}

package/lib-commonjs/contexts/menuContext.js

@@ -18,6 +18,7 @@ const menuContextDefaultValue = {
   menuPopoverRef: {
     current: null
   },
+  mountNode: null,
   triggerId: '',
   openOnContext: false,
   openOnHover: false,

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

@@ -1 +1 @@
-{"version":3,"names":["react_context_selector_1","require","exports","MenuContext","createContext","undefined","menuContextDefaultValue","open","setOpen","checkedValues","onCheckedValueChange","isSubmenu","triggerRef","current","menuPopoverRef","triggerId","openOnContext","openOnHover","hasIcons","hasCheckmarks","inline","persistOnItemClick","MenuProvider","Provider","useMenuContext_unstable","selector","useContextSelector","ctx"],"sources":["../../../../../../../../packages/react-components/react-menu/src/contexts/menuContext.ts"],"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 { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(\n  undefined,\n) as Context<MenuContextValue>;\n\nconst menuContextDefaultValue: MenuContextValue = {\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\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  inline: false,\n  persistOnItemClick: 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 = 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  | 'checkedValues'\n  | 'onCheckedValueChange'\n> & {\n  open: boolean;\n  triggerId: string;\n  /**\n   * Default values to be checked on mount\n   * @deprecated this property is not used internally anymore,\n   * the signature remains just to avoid breaking changes\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n};\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));\n"],"mappings":";;;;;;AACA,MAAAA,wBAAA,gBAAAC,OAAA;AAIaC,OAAA,CAAAC,WAAW,gBAA8BH,wBAAA,CAAAI,aAAa,CACjEC,SAAS,CACmB;AAE9B,MAAMC,uBAAuB,GAAqB;EAChDC,IAAI,EAAE,KAAK;EACXC,OAAO,EAAEA,CAAA,KAAM,KAAK;EACpBC,aAAa,EAAE,EAAE;EACjBC,oBAAoB,EAAEA,CAAA,KAAM,IAAI;EAChCC,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAE;IAAEC,OAAO,EAAE;EAAI,CAAoD;EAC/EC,cAAc,EAAE;IAAED,OAAO,EAAE;EAAI,CAAoD;EACnFE,SAAS,EAAE,EAAE;EACbC,aAAa,EAAE,KAAK;EACpBC,WAAW,EAAE,KAAK;EAClBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE,KAAK;EACpBC,MAAM,EAAE,KAAK;EACbC,kBAAkB,EAAE;CACrB;AAiCYnB,OAAA,CAAAoB,YAAY,GAAGpB,OAAA,CAAAC,WAAW,CAACoB,QAAQ;AAEzC,MAAMC,uBAAuB,GAAOC,QAA8C,IACvFzB,wBAAA,CAAA0B,kBAAkB,CAACxB,OAAA,CAAAC,WAAW,EAAE,CAACwB,GAAG,GAAGrB,uBAAuB,KAAKmB,QAAQ,CAACE,GAAG,CAAC,CAAC;AADtEzB,OAAA,CAAAsB,uBAAuB,GAAAA,uBAAA"}
+{"version":3,"names":["react_context_selector_1","require","exports","MenuContext","createContext","undefined","menuContextDefaultValue","open","setOpen","checkedValues","onCheckedValueChange","isSubmenu","triggerRef","current","menuPopoverRef","mountNode","triggerId","openOnContext","openOnHover","hasIcons","hasCheckmarks","inline","persistOnItemClick","MenuProvider","Provider","useMenuContext_unstable","selector","useContextSelector","ctx"],"sources":["../../../../../../../../packages/react-components/react-menu/src/contexts/menuContext.ts"],"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 { MenuState } from '../components/Menu/index';\n\nexport const MenuContext: Context<MenuContextValue> = createContext<MenuContextValue | undefined>(\n  undefined,\n) as Context<MenuContextValue>;\n\nconst menuContextDefaultValue: MenuContextValue = {\n  open: false,\n  setOpen: () => false,\n  checkedValues: {},\n  onCheckedValueChange: () => null,\n  isSubmenu: false,\n  triggerRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n  menuPopoverRef: { current: null } as unknown as React.MutableRefObject<HTMLElement>,\n  mountNode: null,\n  triggerId: '',\n  openOnContext: false,\n  openOnHover: false,\n  hasIcons: false,\n  hasCheckmarks: false,\n  inline: false,\n  persistOnItemClick: 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 = Pick<\n  MenuState,\n  | 'openOnHover'\n  | 'openOnContext'\n  | 'triggerRef'\n  | 'menuPopoverRef'\n  | 'setOpen'\n  | 'isSubmenu'\n  | 'mountNode'\n  | 'triggerId'\n  | 'hasIcons'\n  | 'hasCheckmarks'\n  | 'persistOnItemClick'\n  | 'inline'\n  | 'checkedValues'\n  | 'onCheckedValueChange'\n> & {\n  open: boolean;\n  triggerId: string;\n  /**\n   * Default values to be checked on mount\n   * @deprecated this property is not used internally anymore,\n   * the signature remains just to avoid breaking changes\n   */\n  defaultCheckedValues?: Record<string, string[]>;\n};\n\nexport const MenuProvider = MenuContext.Provider;\n\nexport const useMenuContext_unstable = <T>(selector: ContextSelector<MenuContextValue, T>) =>\n  useContextSelector(MenuContext, (ctx = menuContextDefaultValue) => selector(ctx));\n"],"mappings":";;;;;;AACA,MAAAA,wBAAA,gBAAAC,OAAA;AAIaC,OAAA,CAAAC,WAAW,gBAA8BH,wBAAA,CAAAI,aAAa,CACjEC,SAAS,CACmB;AAE9B,MAAMC,uBAAuB,GAAqB;EAChDC,IAAI,EAAE,KAAK;EACXC,OAAO,EAAEA,CAAA,KAAM,KAAK;EACpBC,aAAa,EAAE,EAAE;EACjBC,oBAAoB,EAAEA,CAAA,KAAM,IAAI;EAChCC,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAE;IAAEC,OAAO,EAAE;EAAI,CAAoD;EAC/EC,cAAc,EAAE;IAAED,OAAO,EAAE;EAAI,CAAoD;EACnFE,SAAS,EAAE,IAAI;EACfC,SAAS,EAAE,EAAE;EACbC,aAAa,EAAE,KAAK;EACpBC,WAAW,EAAE,KAAK;EAClBC,QAAQ,EAAE,KAAK;EACfC,aAAa,EAAE,KAAK;EACpBC,MAAM,EAAE,KAAK;EACbC,kBAAkB,EAAE;CACrB;AAkCYpB,OAAA,CAAAqB,YAAY,GAAGrB,OAAA,CAAAC,WAAW,CAACqB,QAAQ;AAEzC,MAAMC,uBAAuB,GAAOC,QAA8C,IACvF1B,wBAAA,CAAA2B,kBAAkB,CAACzB,OAAA,CAAAC,WAAW,EAAE,CAACyB,GAAG,GAAGtB,uBAAuB,KAAKoB,QAAQ,CAACE,GAAG,CAAC,CAAC;AADtE1B,OAAA,CAAAuB,uBAAuB,GAAAA,uBAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu",
-  "version": "0.0.0-nightly-20230303-0424.1",
+  "version": "0.0.0-nightly-20230307-0423.1",
   "description": "Fluent UI menu component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -29,22 +29,22 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230303-0424.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20230307-0423.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-cypress": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-aria": "0.0.0-nightly-20230303-0424.1",
-    "@fluentui/keyboard-keys": "0.0.0-nightly-20230303-0424.1",
-    "@fluentui/react-context-selector": "0.0.0-nightly-20230303-0424.1",
+    "@fluentui/react-aria": "0.0.0-nightly-20230307-0423.1",
+    "@fluentui/keyboard-keys": "0.0.0-nightly-20230307-0423.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20230307-0423.1",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-portal": "0.0.0-nightly-20230303-0424.1",
-    "@fluentui/react-positioning": "0.0.0-nightly-20230303-0424.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230303-0424.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20230303-0424.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20230303-0424.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20230303-0424.1",
+    "@fluentui/react-portal": "0.0.0-nightly-20230307-0423.1",
+    "@fluentui/react-positioning": "0.0.0-nightly-20230307-0423.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20230307-0423.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20230307-0423.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20230307-0423.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20230307-0423.1",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },