@fluentui/react-menu-grid-preview 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @fluentui/react-menu-grid-preview
 
-This log was last generated on Mon, 08 Sep 2025 12:41:45 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:13 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.2.0)
+
+Thu, 02 Oct 2025 15:07:13 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.1.1..@fluentui/react-menu-grid-preview_v0.2.0)
+
+### Minor changes
+
+- Feat(react-menu-grid-preview): Detect invalid MenuGrid nesting ([PR #35128](https://github.com/microsoft/fluentui/pull/35128) by lingfangao@hotmail.com)
+- Bump @fluentui/react-menu to v9.20.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-table to v9.19.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+
+### Patches
+
+- Allow navigation in MenuGrid submenu of MenuList ([PR #35223](https://github.com/microsoft/fluentui/pull/35223) by adam.samec@gmail.com)
+- Merge onKeyDown handlers for MenuGrid component ([PR #35216](https://github.com/microsoft/fluentui/pull/35216) by adam.samec@gmail.com)
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- fix: useValidateNesting ref type React 19 issue ([PR #35221](https://github.com/microsoft/fluentui/pull/35221) by dmytrokirpa@microsoft.com)
+
 ## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.1.1)
 
-Mon, 08 Sep 2025 12:41:45 GMT 
+Mon, 08 Sep 2025 12:51:06 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.1.0..@fluentui/react-menu-grid-preview_v0.1.1)
 
 ### Patches

package/lib/components/MenuGrid/MenuGrid.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useMenuGrid_unstable } from './useMenuGrid';
 import { renderMenuGrid_unstable } from './renderMenuGrid';

package/lib/components/MenuGrid/MenuGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/MenuGrid.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGrid_unstable } from './useMenuGrid';\nimport { renderMenuGrid_unstable } from './renderMenuGrid';\nimport { useMenuGridContextValues_unstable } from './useMenuGridContextValues';\nimport { useMenuGridStyles_unstable } from './useMenuGridStyles.styles';\nimport type { MenuGridProps } from './MenuGrid.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuGrid, using the `useMenuGrid_unstable` hook.\n */\nexport const MenuGrid: ForwardRefComponent<MenuGridProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGrid_unstable(props, ref);\n  const contextValues = useMenuGridContextValues_unstable(state);\n\n  useMenuGridStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridStyles_unstable')(state);\n\n  return renderMenuGrid_unstable(state, contextValues);\n});\n\nMenuGrid.displayName = 'MenuGrid';\n"],"names":["React","useMenuGrid_unstable","renderMenuGrid_unstable","useMenuGridContextValues_unstable","useMenuGridStyles_unstable","MenuGrid","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,iFAAiF;AAEjF;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAC1C,MAAME,gBAAgBP,kCAAkCM;IAExDL,2BAA2BK;IAE3B,oEAAoE;IAEpE,OAAOP,wBAAwBO,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGrid/MenuGrid.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGrid_unstable } from './useMenuGrid';\nimport { renderMenuGrid_unstable } from './renderMenuGrid';\nimport { useMenuGridContextValues_unstable } from './useMenuGridContextValues';\nimport { useMenuGridStyles_unstable } from './useMenuGridStyles.styles';\nimport type { MenuGridProps } from './MenuGrid.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuGrid, using the `useMenuGrid_unstable` hook.\n */\nexport const MenuGrid: ForwardRefComponent<MenuGridProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGrid_unstable(props, ref);\n  const contextValues = useMenuGridContextValues_unstable(state);\n\n  useMenuGridStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridStyles_unstable')(state);\n\n  return renderMenuGrid_unstable(state, contextValues);\n});\n\nMenuGrid.displayName = 'MenuGrid';\n"],"names":["React","useMenuGrid_unstable","renderMenuGrid_unstable","useMenuGridContextValues_unstable","useMenuGridStyles_unstable","MenuGrid","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,iCAAiC,QAAQ,6BAA6B;AAC/E,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,iFAAiF;AAEjF;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQR,qBAAqBM,OAAOC;IAC1C,MAAME,gBAAgBP,kCAAkCM;IAExDL,2BAA2BK;IAE3B,oEAAoE;IAEpE,OAAOP,wBAAwBO,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib/components/MenuGrid/useMenuGrid.js

@@ -1,23 +1,27 @@
+'use client';
 import * as React from 'react';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useMergedRefs, useEventCallback, mergeCallbacks, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useTableCompositeNavigation } from '@fluentui/react-table';
 import { useMenuContext_unstable } from '@fluentui/react-menu';
+import { useValidateNesting } from '../../utils/useValidateNesting';
 /**
  * Returns the props and state required to render the component
  */ export const useMenuGrid_unstable = (props, ref)=>{
+    const validateNestingRef = useValidateNesting('MenuGrid');
     const triggerId = useMenuContext_unstable((context)=>context.triggerId);
     const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();
+    const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));
     return {
         components: {
             root: 'div'
         },
         root: slot.always(getIntrinsicElementProps('div', {
-            ref,
+            ref: useMergedRefs(ref, validateNestingRef),
             role: 'grid',
             'aria-labelledby': triggerId,
-            onKeyDown: onTableKeyDown,
             ...tableTabsterAttribute,
-            ...props
+            ...props,
+            onKeyDown
         }), {
             elementType: 'div'
         }),

package/lib/components/MenuGrid/useMenuGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/useMenuGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useTableCompositeNavigation } from '@fluentui/react-table';\nimport type { MenuGridProps, MenuGridState } from './MenuGrid.types';\nimport { useMenuContext_unstable } from '@fluentui/react-menu';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuGrid_unstable = (props: MenuGridProps, ref: React.Ref<HTMLDivElement>): MenuGridState => {\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'grid',\n        'aria-labelledby': triggerId,\n        onKeyDown: onTableKeyDown,\n        ...tableTabsterAttribute,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    tableRowTabsterAttribute,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTableCompositeNavigation","useMenuContext_unstable","useMenuGrid_unstable","props","ref","triggerId","context","tableRowTabsterAttribute","tableTabsterAttribute","onTableKeyDown","components","root","always","role","onKeyDown","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,2BAA2B,QAAQ,wBAAwB;AAEpE,SAASC,uBAAuB,QAAQ,uBAAuB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,YAAYJ,wBAAwBK,CAAAA,UAAWA,QAAQD,SAAS;IACtE,MAAM,EAAEE,wBAAwB,EAAEC,qBAAqB,EAAEC,cAAc,EAAE,GAAGT;IAE5E,OAAO;QACLU,YAAY;YACVC,MAAM;QACR;QACAA,MAAMZ,KAAKa,MAAM,CACfd,yBAAyB,OAAO;YAC9BM;YACAS,MAAM;YACN,mBAAmBR;YACnBS,WAAWL;YACX,GAAGD,qBAAqB;YACxB,GAAGL,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;QAEvBR;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuGrid/useMenuGrid.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  mergeCallbacks,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\n\nimport { useTableCompositeNavigation } from '@fluentui/react-table';\nimport type { MenuGridProps, MenuGridState } from './MenuGrid.types';\nimport { useMenuContext_unstable } from '@fluentui/react-menu';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuGrid_unstable = (props: MenuGridProps, ref: React.Ref<HTMLDivElement>): MenuGridState => {\n  const validateNestingRef = useValidateNesting('MenuGrid');\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'grid',\n        'aria-labelledby': triggerId,\n        ...tableTabsterAttribute,\n        ...props,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n    tableRowTabsterAttribute,\n  };\n};\n"],"names":["React","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useTableCompositeNavigation","useMenuContext_unstable","useValidateNesting","useMenuGrid_unstable","props","ref","validateNestingRef","triggerId","context","tableRowTabsterAttribute","tableTabsterAttribute","onTableKeyDown","onKeyDown","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,wBAAwB,EACxBC,IAAI,QACC,4BAA4B;AAEnC,SAASC,2BAA2B,QAAQ,wBAAwB;AAEpE,SAASC,uBAAuB,QAAQ,uBAAuB;AAC/D,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,qBAAqBJ,mBAAmB;IAC9C,MAAMK,YAAYN,wBAAwBO,CAAAA,UAAWA,QAAQD,SAAS;IACtE,MAAM,EAAEE,wBAAwB,EAAEC,qBAAqB,EAAEC,cAAc,EAAE,GAAGX;IAC5E,MAAMY,YAAYhB,iBAAiBC,eAAeO,MAAMQ,SAAS,EAAED;IAEnE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,KAAKgB,MAAM,CACfjB,yBAAyB,OAAO;YAC9BO,KAAKV,cAAcU,KAAKC;YACxBU,MAAM;YACN,mBAAmBT;YACnB,GAAGG,qBAAqB;YACxB,GAAGN,KAAK;YACRQ;QACF,IACA;YAAEK,aAAa;QAAM;QAEvBR;IACF;AACF,EAAE"}

package/lib/components/MenuGrid/useMenuGridContextValues.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export function useMenuGridContextValues_unstable(state) {
     const { tableRowTabsterAttribute } = state;

package/lib/components/MenuGrid/useMenuGridContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/useMenuGridContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { MenuGridContextValues, MenuGridState } from './MenuGrid.types';\n\nexport function useMenuGridContextValues_unstable(state: MenuGridState): MenuGridContextValues {\n  const { tableRowTabsterAttribute } = state;\n  const menuGrid = React.useMemo(() => ({ tableRowTabsterAttribute }), [tableRowTabsterAttribute]);\n\n  return { menuGrid };\n}\n"],"names":["React","useMenuGridContextValues_unstable","state","tableRowTabsterAttribute","menuGrid","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,wBAAwB,EAAE,GAAGD;IACrC,MAAME,WAAWJ,MAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;QAAyB,CAAA,GAAI;QAACA;KAAyB;IAE/F,OAAO;QAAEC;IAAS;AACpB"}
+{"version":3,"sources":["../src/components/MenuGrid/useMenuGridContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MenuGridContextValues, MenuGridState } from './MenuGrid.types';\n\nexport function useMenuGridContextValues_unstable(state: MenuGridState): MenuGridContextValues {\n  const { tableRowTabsterAttribute } = state;\n  const menuGrid = React.useMemo(() => ({ tableRowTabsterAttribute }), [tableRowTabsterAttribute]);\n\n  return { menuGrid };\n}\n"],"names":["React","useMenuGridContextValues_unstable","state","tableRowTabsterAttribute","menuGrid","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,wBAAwB,EAAE,GAAGD;IACrC,MAAME,WAAWJ,MAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;QAAyB,CAAA,GAAI;QAACA;KAAyB;IAE/F,OAAO;QAAEC;IAAS;AACpB"}

package/lib/components/MenuGrid/useMenuGridStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { mergeClasses, __styles } from '@griffel/react';
 export const menuGridClassNames = {
   root: 'fui-MenuGrid'

package/lib/components/MenuGrid/useMenuGridStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","menuGridClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","hasMenuContext","Bqenvij","d","p","useMenuGridStyles_unstable","state","styles","className"],"sources":["useMenuGridStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuGridClassNames = {\n    root: 'fui-MenuGrid'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '2px'\n    },\n    hasMenuContext: {\n        height: '100%'\n    }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuGridStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuGridClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGH,QAAA;EAAAE,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGjB,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","menuGridClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","hasMenuContext","Bqenvij","d","p","useMenuGridStyles_unstable","state","styles","className"],"sources":["useMenuGridStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuGridClassNames = {\n    root: 'fui-MenuGrid'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: '2px'\n    },\n    hasMenuContext: {\n        height: '100%'\n    }\n});\n/**\n * Apply styling to the Menu slots based on the state\n */ export const useMenuGridStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuGridClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGH,QAAA;EAAAE,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGjB,YAAY,CAACE,kBAAkB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAC/F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MenuGrid/useMenuGridStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses, makeStyles } from '@griffel/react';
 export const menuGridClassNames = {
     root: 'fui-MenuGrid'

package/lib/components/MenuGrid/useMenuGridStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/useMenuGridStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuGridSlots, MenuGridState } from './MenuGrid.types';\n\nexport const menuGridClassNames: SlotClassNames<MenuGridSlots> = {\n  root: 'fui-MenuGrid',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '2px',\n  },\n  hasMenuContext: {\n    height: '100%',\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuGridStyles_unstable = (state: MenuGridState): MenuGridState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGridClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuGridClassNames","root","useStyles","display","flexDirection","gap","hasMenuContext","height","useMenuGridStyles_unstable","state","styles","className"],"mappings":"AACA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYH,WAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGb,aAAaE,mBAAmBC,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAC9F,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGrid/useMenuGridStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuGridSlots, MenuGridState } from './MenuGrid.types';\n\nexport const menuGridClassNames: SlotClassNames<MenuGridSlots> = {\n  root: 'fui-MenuGrid',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '2px',\n  },\n  hasMenuContext: {\n    height: '100%',\n  },\n});\n\n/**\n * Apply styling to the Menu slots based on the state\n */\nexport const useMenuGridStyles_unstable = (state: MenuGridState): MenuGridState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGridClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuGridClassNames","root","useStyles","display","flexDirection","gap","hasMenuContext","height","useMenuGridStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYH,WAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,GAAGb,aAAaE,mBAAmBC,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAC9F,OAAOF;AACT,EAAE"}

package/lib/components/MenuGridCell/MenuGridCell.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useMenuGridCell_unstable } from './useMenuGridCell';
 import { renderMenuGridCell_unstable } from './renderMenuGridCell';

package/lib/components/MenuGridCell/MenuGridCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridCell/MenuGridCell.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGridCell_unstable } from './useMenuGridCell';\nimport { renderMenuGridCell_unstable } from './renderMenuGridCell';\nimport type { MenuGridCellProps } from './MenuGridCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridCellStyles_unstable } from './useMenuGridCellStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridCell, using the `useMenuGridCell_unstable` hook.\n */\nexport const MenuGridCell: ForwardRefComponent<MenuGridCellProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridCell_unstable(props, ref);\n\n  useMenuGridCellStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridCellStyles_unstable')(state);\n\n  return renderMenuGridCell_unstable(state);\n});\n\nMenuGridCell.displayName = 'MenuGridCell';\n"],"names":["React","useMenuGridCell_unstable","renderMenuGridCell_unstable","useMenuGridCellStyles_unstable","MenuGridCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AAGnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAChF,iFAAiF;AAEjF;;CAEC,GACD,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAE/B,wEAAwE;IAExE,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGridCell/MenuGridCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridCell_unstable } from './useMenuGridCell';\nimport { renderMenuGridCell_unstable } from './renderMenuGridCell';\nimport type { MenuGridCellProps } from './MenuGridCell.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridCellStyles_unstable } from './useMenuGridCellStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridCell, using the `useMenuGridCell_unstable` hook.\n */\nexport const MenuGridCell: ForwardRefComponent<MenuGridCellProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridCell_unstable(props, ref);\n\n  useMenuGridCellStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridCellStyles_unstable')(state);\n\n  return renderMenuGridCell_unstable(state);\n});\n\nMenuGridCell.displayName = 'MenuGridCell';\n"],"names":["React","useMenuGridCell_unstable","renderMenuGridCell_unstable","useMenuGridCellStyles_unstable","MenuGridCell","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AAGnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAChF,iFAAiF;AAEjF;;CAEC,GACD,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAE/B,wEAAwE;IAExE,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib/components/MenuGridCell/useMenuGridCell.js

@@ -1,18 +1,32 @@
+'use client';
 import * as React from 'react';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';
+import { useMergedRefs, useEventCallback, mergeCallbacks, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useValidateNesting } from '../../utils/useValidateNesting';
 /**
  * Given user props, returns state and render function for a MenuGridCell.
  */ export function useMenuGridCell_unstable(props, ref) {
     const { visuallyHidden } = props;
+    const validateNestingRef = useValidateNesting('MenuGridCell');
+    const { dir } = useFluent();
+    const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;
+    const onKeyDownWithPrevent = useEventCallback((event)=>{
+        if (event.key === CloseArrowKey) {
+            event.preventDefault();
+        }
+    });
+    const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onKeyDownWithPrevent));
     return {
         visuallyHidden,
         components: {
             root: 'div'
         },
         root: slot.always(getIntrinsicElementProps('div', {
-            ref,
+            ref: useMergedRefs(ref, validateNestingRef),
             role: 'gridcell',
-            ...props
+            ...props,
+            onKeyDown
         }), {
             elementType: 'div'
         })

package/lib/components/MenuGridCell/useMenuGridCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { MenuGridCellProps, MenuGridCellState } from './MenuGridCell.types';\n\n/**\n * Given user props, returns state and render function for a MenuGridCell.\n */\nexport function useMenuGridCell_unstable(props: MenuGridCellProps, ref: React.Ref<HTMLDivElement>): MenuGridCellState {\n  const { visuallyHidden } = props;\n\n  return {\n    visuallyHidden,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'gridcell',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","getIntrinsicElementProps","slot","useMenuGridCell_unstable","props","ref","visuallyHidden","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAG3E;;CAEC,GACD,OAAO,SAASC,yBAAyBC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAE3B,OAAO;QACLE;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,KAAKO,MAAM,CACfR,yBAAyB,OAAO;YAC9BI;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCell.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  mergeCallbacks,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\nimport { MenuGridCellProps, MenuGridCellState } from './MenuGridCell.types';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Given user props, returns state and render function for a MenuGridCell.\n */\nexport function useMenuGridCell_unstable(props: MenuGridCellProps, ref: React.Ref<HTMLDivElement>): MenuGridCellState {\n  const { visuallyHidden } = props;\n  const validateNestingRef = useValidateNesting('MenuGridCell');\n  const { dir } = useFluent();\n\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n  const onKeyDownWithPrevent = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    if (event.key === CloseArrowKey) {\n      event.preventDefault();\n    }\n  });\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onKeyDownWithPrevent));\n\n  return {\n    visuallyHidden,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'gridcell',\n        ...props,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","ArrowLeft","ArrowRight","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useValidateNesting","useMenuGridCell_unstable","props","ref","visuallyHidden","validateNestingRef","dir","CloseArrowKey","onKeyDownWithPrevent","event","key","preventDefault","onKeyDown","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,UAAU,QAAQ,0BAA0B;AAChE,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,wBAAwB,EACxBC,IAAI,QACC,4BAA4B;AAEnC,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;CAEC,GACD,OAAO,SAASC,yBAAyBC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,qBAAqBL,mBAAmB;IAC9C,MAAM,EAAEM,GAAG,EAAE,GAAGd;IAEhB,MAAMe,gBAAgBD,QAAQ,QAAQb,YAAYC;IAClD,MAAMc,uBAAuBZ,iBAAiB,CAACa;QAC7C,IAAIA,MAAMC,GAAG,KAAKH,eAAe;YAC/BE,MAAME,cAAc;QACtB;IACF;IACA,MAAMC,YAAYhB,iBAAiBC,eAAeK,MAAMU,SAAS,EAAEJ;IAEnE,OAAO;QACLJ;QACAS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,KAAKgB,MAAM,CACfjB,yBAAyB,OAAO;YAC9BK,KAAKR,cAAcQ,KAAKE;YACxBW,MAAM;YACN,GAAGd,KAAK;YACRU;QACF,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF"}

package/lib/components/MenuGridCell/useMenuGridCellStyles.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { mergeClasses, __styles } from '@griffel/react';
 export const menuGridCellClassNames = {
   root: 'fui-MenuGridCell'

package/lib/components/MenuGridCell/useMenuGridCellStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__styles","menuGridCellClassNames","root","useRootStyles","visuallyHidden","qhf8xq","d","useMenuGridCellStyles_unstable","state","rootStyles","className"],"sources":["useMenuGridCellStyles.styles.js"],"sourcesContent":["import { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuGridCellClassNames = {\n    root: 'fui-MenuGridCell'\n};\nconst useRootStyles = makeStyles({\n    visuallyHidden: {\n        position: 'absolute'\n    }\n});\nexport const useMenuGridCellStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    state.root.className = mergeClasses(menuGridCellClassNames.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,cAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIrB,CAAC;AACF,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,UAAU,GAAGN,aAAa,CAAC,CAAC;EAClCK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGX,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEM,KAAK,CAACJ,cAAc,IAAIK,UAAU,CAACL,cAAc,EAAEI,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EACzI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__styles","menuGridCellClassNames","root","useRootStyles","visuallyHidden","qhf8xq","d","useMenuGridCellStyles_unstable","state","rootStyles","className"],"sources":["useMenuGridCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuGridCellClassNames = {\n    root: 'fui-MenuGridCell'\n};\nconst useRootStyles = makeStyles({\n    visuallyHidden: {\n        position: 'absolute'\n    }\n});\nexport const useMenuGridCellStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    state.root.className = mergeClasses(menuGridCellClassNames.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AACzD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGH,QAAA;EAAAI,cAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIrB,CAAC;AACF,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,UAAU,GAAGN,aAAa,CAAC,CAAC;EAClCK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGX,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEM,KAAK,CAACJ,cAAc,IAAIK,UAAU,CAACL,cAAc,EAAEI,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EACzI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MenuGridCell/useMenuGridCellStyles.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { mergeClasses, makeStyles } from '@griffel/react';
 export const menuGridCellClassNames = {
     root: 'fui-MenuGridCell'

package/lib/components/MenuGridCell/useMenuGridCellStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCellStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuGridCellSlots, MenuGridCellState } from './MenuGridCell.types';\n\nexport const menuGridCellClassNames: SlotClassNames<MenuGridCellSlots> = {\n  root: 'fui-MenuGridCell',\n};\n\nconst useRootStyles = makeStyles({\n  visuallyHidden: {\n    position: 'absolute',\n  },\n});\n\nexport const useMenuGridCellStyles_unstable = (state: MenuGridCellState): MenuGridCellState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    menuGridCellClassNames.root,\n    state.visuallyHidden && rootStyles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuGridCellClassNames","root","useRootStyles","visuallyHidden","position","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":"AACA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBH,WAAW;IAC/BI,gBAAgB;QACdC,UAAU;IACZ;AACF;AAEA,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,aAAaL;IACnBI,MAAML,IAAI,CAACO,SAAS,GAAGV,aACrBE,uBAAuBC,IAAI,EAC3BK,MAAMH,cAAc,IAAII,WAAWJ,cAAc,EACjDG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCellStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuGridCellSlots, MenuGridCellState } from './MenuGridCell.types';\n\nexport const menuGridCellClassNames: SlotClassNames<MenuGridCellSlots> = {\n  root: 'fui-MenuGridCell',\n};\n\nconst useRootStyles = makeStyles({\n  visuallyHidden: {\n    position: 'absolute',\n  },\n});\n\nexport const useMenuGridCellStyles_unstable = (state: MenuGridCellState): MenuGridCellState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    menuGridCellClassNames.root,\n    state.visuallyHidden && rootStyles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuGridCellClassNames","root","useRootStyles","visuallyHidden","position","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;AAGA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBH,WAAW;IAC/BI,gBAAgB;QACdC,UAAU;IACZ;AACF;AAEA,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,aAAaL;IACnBI,MAAML,IAAI,CAACO,SAAS,GAAGV,aACrBE,uBAAuBC,IAAI,EAC3BK,MAAMH,cAAc,IAAII,WAAWJ,cAAc,EACjDG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib/components/MenuGridGroup/MenuGridGroup.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useMenuGridGroup_unstable } from './useMenuGridGroup';
 import { renderMenuGridGroup_unstable } from './renderMenuGridGroup';

package/lib/components/MenuGridGroup/MenuGridGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridGroup/MenuGridGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGridGroup_unstable } from './useMenuGridGroup';\nimport { renderMenuGridGroup_unstable } from './renderMenuGridGroup';\nimport { useMenuGridGroupContextValues_unstable } from './useMenuGridGroupContextValues';\nimport type { MenuGridGroupProps } from './MenuGridGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridGroupStyles_unstable } from './useMenuGridGroupStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridGroup, using the `useMenuGridGroup_unstable` hook.\n */\nexport const MenuGridGroup: ForwardRefComponent<MenuGridGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridGroup_unstable(props, ref);\n  const contextValues = useMenuGridGroupContextValues_unstable(state);\n\n  useMenuGridGroupStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridGroupStyles_unstable')(state);\n\n  return renderMenuGridGroup_unstable(state, contextValues);\n});\n\nMenuGridGroup.displayName = 'MenuGridGroup';\n"],"names":["React","useMenuGridGroup_unstable","renderMenuGridGroup_unstable","useMenuGridGroupContextValues_unstable","useMenuGridGroupStyles_unstable","MenuGridGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,sCAAsC,QAAQ,kCAAkC;AAGzF,SAASC,+BAA+B,QAAQ,kCAAkC;AAClF,iFAAiF;AAEjF;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAC/C,MAAME,gBAAgBP,uCAAuCM;IAE7DL,gCAAgCK;IAEhC,yEAAyE;IAEzE,OAAOP,6BAA6BO,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGridGroup/MenuGridGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridGroup_unstable } from './useMenuGridGroup';\nimport { renderMenuGridGroup_unstable } from './renderMenuGridGroup';\nimport { useMenuGridGroupContextValues_unstable } from './useMenuGridGroupContextValues';\nimport type { MenuGridGroupProps } from './MenuGridGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridGroupStyles_unstable } from './useMenuGridGroupStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridGroup, using the `useMenuGridGroup_unstable` hook.\n */\nexport const MenuGridGroup: ForwardRefComponent<MenuGridGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridGroup_unstable(props, ref);\n  const contextValues = useMenuGridGroupContextValues_unstable(state);\n\n  useMenuGridGroupStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridGroupStyles_unstable')(state);\n\n  return renderMenuGridGroup_unstable(state, contextValues);\n});\n\nMenuGridGroup.displayName = 'MenuGridGroup';\n"],"names":["React","useMenuGridGroup_unstable","renderMenuGridGroup_unstable","useMenuGridGroupContextValues_unstable","useMenuGridGroupStyles_unstable","MenuGridGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,sCAAsC,QAAQ,kCAAkC;AAGzF,SAASC,+BAA+B,QAAQ,kCAAkC;AAClF,iFAAiF;AAEjF;;CAEC,GACD,OAAO,MAAMC,8BAAyDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7F,MAAMC,QAAQR,0BAA0BM,OAAOC;IAC/C,MAAME,gBAAgBP,uCAAuCM;IAE7DL,gCAAgCK;IAEhC,yEAAyE;IAEzE,OAAOP,6BAA6BO,OAAOC;AAC7C,GAAG;AAEHL,cAAcM,WAAW,GAAG"}

package/lib/components/MenuGridGroup/useMenuGridGroupContextValues.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export function useMenuGridGroupContextValues_unstable(state) {
     const { headerId } = state;

package/lib/components/MenuGridGroup/useMenuGridGroupContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridGroup/useMenuGridGroupContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { MenuGridGroupContextValues, MenuGridGroupState } from './MenuGridGroup.types';\n\nexport function useMenuGridGroupContextValues_unstable(state: MenuGridGroupState): MenuGridGroupContextValues {\n  const { headerId } = state;\n  const MenuGridGroup = React.useMemo(() => ({ headerId }), [headerId]);\n\n  return { MenuGridGroup };\n}\n"],"names":["React","useMenuGridGroupContextValues_unstable","state","headerId","MenuGridGroup","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,uCAAuCC,KAAyB;IAC9E,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,gBAAgBJ,MAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;QAAS,CAAA,GAAI;QAACA;KAAS;IAEpE,OAAO;QAAEC;IAAc;AACzB"}
+{"version":3,"sources":["../src/components/MenuGridGroup/useMenuGridGroupContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MenuGridGroupContextValues, MenuGridGroupState } from './MenuGridGroup.types';\n\nexport function useMenuGridGroupContextValues_unstable(state: MenuGridGroupState): MenuGridGroupContextValues {\n  const { headerId } = state;\n  const MenuGridGroup = React.useMemo(() => ({ headerId }), [headerId]);\n\n  return { MenuGridGroup };\n}\n"],"names":["React","useMenuGridGroupContextValues_unstable","state","headerId","MenuGridGroup","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,uCAAuCC,KAAyB;IAC9E,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,gBAAgBJ,MAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;QAAS,CAAA,GAAI;QAACA;KAAS;IAEpE,OAAO;QAAEC;IAAc;AACzB"}

package/lib/components/MenuGridGroupHeader/MenuGridGroupHeader.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useMenuGridGroupHeader_unstable } from './useMenuGridGroupHeader';
 import { renderMenuGridGroupHeader_unstable } from './renderMenuGridGroupHeader';

package/lib/components/MenuGridGroupHeader/MenuGridGroupHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridGroupHeader/MenuGridGroupHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGridGroupHeader_unstable } from './useMenuGridGroupHeader';\nimport { renderMenuGridGroupHeader_unstable } from './renderMenuGridGroupHeader';\nimport type { MenuGridGroupHeaderProps } from './MenuGridGroupHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridGroupHeaderStyles_unstable } from './useMenuGridGroupHeaderStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridGroupHeader, using the `useMenuGridGroupHeader_unstable` hook.\n */\nexport const MenuGridGroupHeader: ForwardRefComponent<MenuGridGroupHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridGroupHeader_unstable(props, ref);\n\n  useMenuGridGroupHeaderStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridGroupHeaderStyles_unstable')(state);\n\n  return renderMenuGridGroupHeader_unstable(state);\n});\n\nMenuGridGroupHeader.displayName = 'MenuGridGroupHeader';\n"],"names":["React","useMenuGridGroupHeader_unstable","renderMenuGridGroupHeader_unstable","useMenuGridGroupHeaderStyles_unstable","MenuGridGroupHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,8BAA8B;AAGjF,SAASC,qCAAqC,QAAQ,wCAAwC;AAC9F,iFAAiF;AAEjF;;CAEC,GACD,OAAO,MAAMC,oCAAqEJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACzG,MAAMC,QAAQP,gCAAgCK,OAAOC;IAErDJ,sCAAsCK;IAEtC,+EAA+E;IAE/E,OAAON,mCAAmCM;AAC5C,GAAG;AAEHJ,oBAAoBK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGridGroupHeader/MenuGridGroupHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridGroupHeader_unstable } from './useMenuGridGroupHeader';\nimport { renderMenuGridGroupHeader_unstable } from './renderMenuGridGroupHeader';\nimport type { MenuGridGroupHeaderProps } from './MenuGridGroupHeader.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridGroupHeaderStyles_unstable } from './useMenuGridGroupHeaderStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridGroupHeader, using the `useMenuGridGroupHeader_unstable` hook.\n */\nexport const MenuGridGroupHeader: ForwardRefComponent<MenuGridGroupHeaderProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridGroupHeader_unstable(props, ref);\n\n  useMenuGridGroupHeaderStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridGroupHeaderStyles_unstable')(state);\n\n  return renderMenuGridGroupHeader_unstable(state);\n});\n\nMenuGridGroupHeader.displayName = 'MenuGridGroupHeader';\n"],"names":["React","useMenuGridGroupHeader_unstable","renderMenuGridGroupHeader_unstable","useMenuGridGroupHeaderStyles_unstable","MenuGridGroupHeader","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,8BAA8B;AAGjF,SAASC,qCAAqC,QAAQ,wCAAwC;AAC9F,iFAAiF;AAEjF;;CAEC,GACD,OAAO,MAAMC,oCAAqEJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACzG,MAAMC,QAAQP,gCAAgCK,OAAOC;IAErDJ,sCAAsCK;IAEtC,+EAA+E;IAE/E,OAAON,mCAAmCM;AAC5C,GAAG;AAEHJ,oBAAoBK,WAAW,GAAG"}

package/lib/components/MenuGridGroupHeader/useMenuGridGroupHeader.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useMenuGridGroupContext_unstable } from '../../contexts/menuGridGroupContext';

package/lib/components/MenuGridGroupHeader/useMenuGridGroupHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridGroupHeader/useMenuGridGroupHeader.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useMenuGridGroupContext_unstable } from '../../contexts/menuGridGroupContext';\nimport { MenuGridGroupHeaderProps, MenuGridGroupHeaderState } from './MenuGridGroupHeader.types';\n\n/**\n * Given user props, returns state and render function for a MenuGridGroupHeader.\n */\nexport function useMenuGridGroupHeader_unstable(\n  props: MenuGridGroupHeaderProps,\n  ref: React.Ref<HTMLDivElement>,\n): MenuGridGroupHeaderState {\n  const { headerId: id } = useMenuGridGroupContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'presentation',\n        id,\n        'aria-hidden': true,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","getIntrinsicElementProps","slot","useMenuGridGroupContext_unstable","useMenuGridGroupHeader_unstable","props","ref","headerId","id","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,gCAAgC,QAAQ,sCAAsC;AAGvF;;CAEC,GACD,OAAO,SAASC,gCACdC,KAA+B,EAC/BC,GAA8B;IAE9B,MAAM,EAAEC,UAAUC,EAAE,EAAE,GAAGL;IAEzB,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,KAAKS,MAAM,CACfV,yBAAyB,OAAO;YAC9BK;YACAM,MAAM;YACNJ;YACA,eAAe;YACf,GAAGH,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["../src/components/MenuGridGroupHeader/useMenuGridGroupHeader.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useMenuGridGroupContext_unstable } from '../../contexts/menuGridGroupContext';\nimport { MenuGridGroupHeaderProps, MenuGridGroupHeaderState } from './MenuGridGroupHeader.types';\n\n/**\n * Given user props, returns state and render function for a MenuGridGroupHeader.\n */\nexport function useMenuGridGroupHeader_unstable(\n  props: MenuGridGroupHeaderProps,\n  ref: React.Ref<HTMLDivElement>,\n): MenuGridGroupHeaderState {\n  const { headerId: id } = useMenuGridGroupContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'presentation',\n        id,\n        'aria-hidden': true,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","getIntrinsicElementProps","slot","useMenuGridGroupContext_unstable","useMenuGridGroupHeader_unstable","props","ref","headerId","id","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,gCAAgC,QAAQ,sCAAsC;AAGvF;;CAEC,GACD,OAAO,SAASC,gCACdC,KAA+B,EAC/BC,GAA8B;IAE9B,MAAM,EAAEC,UAAUC,EAAE,EAAE,GAAGL;IAEzB,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,KAAKS,MAAM,CACfV,yBAAyB,OAAO;YAC9BK;YACAM,MAAM;YACNJ;YACA,eAAe;YACf,GAAGH,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF"}

package/lib/components/MenuGridItem/MenuGridItem.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useMenuGridItem_unstable } from './useMenuGridItem';
 import { renderMenuGridItem_unstable } from './renderMenuGridItem';

package/lib/components/MenuGridItem/MenuGridItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridItem/MenuGridItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGridItem_unstable } from './useMenuGridItem';\nimport { renderMenuGridItem_unstable } from './renderMenuGridItem';\nimport type { MenuGridItemProps } from './MenuGridItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridItemStyles_unstable } from './useMenuGridItemStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridItem, using the `useMenuGridItem_unstable` hook.\n */\nexport const MenuGridItem: ForwardRefComponent<MenuGridItemProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridItem_unstable(props, ref);\n\n  useMenuGridItemStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridItemStyles_unstable')(state);\n\n  return renderMenuGridItem_unstable(state);\n});\n\nMenuGridItem.displayName = 'MenuGridItem';\n"],"names":["React","useMenuGridItem_unstable","renderMenuGridItem_unstable","useMenuGridItemStyles_unstable","MenuGridItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AAGnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAChF,iFAAiF;AAEjF;;CAEC,GACD,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAE/B,wEAAwE;IAExE,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGridItem/MenuGridItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridItem_unstable } from './useMenuGridItem';\nimport { renderMenuGridItem_unstable } from './renderMenuGridItem';\nimport type { MenuGridItemProps } from './MenuGridItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridItemStyles_unstable } from './useMenuGridItemStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridItem, using the `useMenuGridItem_unstable` hook.\n */\nexport const MenuGridItem: ForwardRefComponent<MenuGridItemProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridItem_unstable(props, ref);\n\n  useMenuGridItemStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridItemStyles_unstable')(state);\n\n  return renderMenuGridItem_unstable(state);\n});\n\nMenuGridItem.displayName = 'MenuGridItem';\n"],"names":["React","useMenuGridItem_unstable","renderMenuGridItem_unstable","useMenuGridItemStyles_unstable","MenuGridItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AAGnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAChF,iFAAiF;AAEjF;;CAEC,GACD,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAE/B,wEAAwE;IAExE,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

package/lib/components/MenuGridItem/useMenuGridItem.js

@@ -1,11 +1,14 @@
+'use client';
 import * as React from 'react';
-import { slot } from '@fluentui/react-utilities';
+import { useMergedRefs, slot } from '@fluentui/react-utilities';
 import { MenuGridCell } from './../MenuGridCell/MenuGridCell';
 import { MenuGridRow } from './../MenuGridRow/MenuGridRow';
+import { useValidateNesting } from '../../utils/useValidateNesting';
 /**
  * Given user props, returns state and render function for a MenuGridItem.
  */ export function useMenuGridItem_unstable(props, ref) {
     const { icon, content: _content, subText, firstSubAction, secondSubAction, ...rest } = props;
+    const validateNestingRef = useValidateNesting('MenuGridItem');
     return {
         components: {
             root: MenuGridRow,
@@ -16,7 +19,7 @@ import { MenuGridRow } from './../MenuGridRow/MenuGridRow';
             secondSubAction: MenuGridCell
         },
         root: slot.always({
-            ref,
+            ref: useMergedRefs(ref, validateNestingRef),
             ...rest
         }, {
             elementType: MenuGridRow

package/lib/components/MenuGridItem/useMenuGridItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridItem/useMenuGridItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { slot } from '@fluentui/react-utilities';\n\nimport { MenuGridItemProps, MenuGridItemState } from './MenuGridItem.types';\nimport { MenuGridCell } from './../MenuGridCell/MenuGridCell';\nimport { MenuGridRow } from './../MenuGridRow/MenuGridRow';\n\n/**\n * Given user props, returns state and render function for a MenuGridItem.\n */\nexport function useMenuGridItem_unstable(props: MenuGridItemProps, ref: React.Ref<HTMLDivElement>): MenuGridItemState {\n  const {\n    icon,\n    content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n    subText,\n    firstSubAction,\n    secondSubAction,\n    ...rest\n  } = props;\n\n  return {\n    components: {\n      root: MenuGridRow,\n      icon: MenuGridCell,\n      content: MenuGridCell,\n      subText: 'span',\n      firstSubAction: MenuGridCell,\n      secondSubAction: MenuGridCell,\n    },\n    root: slot.always(\n      {\n        ref,\n        ...rest,\n      },\n      { elementType: MenuGridRow },\n    ),\n    icon: slot.optional(props.icon, { elementType: MenuGridCell }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.children,\n      defaultProps: { children: props.children },\n      elementType: MenuGridCell,\n    }),\n    subText: slot.optional(props.subText, { elementType: 'span' }),\n    firstSubAction: slot.optional(props.firstSubAction, { elementType: MenuGridCell }),\n    secondSubAction: slot.optional(props.secondSubAction, { elementType: MenuGridCell }),\n  };\n}\n"],"names":["React","slot","MenuGridCell","MenuGridRow","useMenuGridItem_unstable","props","ref","icon","content","_content","subText","firstSubAction","secondSubAction","rest","components","root","always","elementType","optional","renderByDefault","children","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAGjD,SAASC,YAAY,QAAQ,iCAAiC;AAC9D,SAASC,WAAW,QAAQ,+BAA+B;AAE3D;;CAEC,GACD,OAAO,SAASC,yBAAyBC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EACJC,IAAI,EACJC,SAASC,QAAQ,EACjBC,OAAO,EACPC,cAAc,EACdC,eAAe,EACf,GAAGC,MACJ,GAAGR;IAEJ,OAAO;QACLS,YAAY;YACVC,MAAMZ;YACNI,MAAML;YACNM,SAASN;YACTQ,SAAS;YACTC,gBAAgBT;YAChBU,iBAAiBV;QACnB;QACAa,MAAMd,KAAKe,MAAM,CACf;YACEV;YACA,GAAGO,IAAI;QACT,GACA;YAAEI,aAAad;QAAY;QAE7BI,MAAMN,KAAKiB,QAAQ,CAACb,MAAME,IAAI,EAAE;YAAEU,aAAaf;QAAa;QAC5DM,SAASP,KAAKiB,QAAQ,CAACb,MAAMG,OAAO,EAAE;YACpCW,iBAAiB,CAAC,CAACd,MAAMe,QAAQ;YACjCC,cAAc;gBAAED,UAAUf,MAAMe,QAAQ;YAAC;YACzCH,aAAaf;QACf;QACAQ,SAAST,KAAKiB,QAAQ,CAACb,MAAMK,OAAO,EAAE;YAAEO,aAAa;QAAO;QAC5DN,gBAAgBV,KAAKiB,QAAQ,CAACb,MAAMM,cAAc,EAAE;YAAEM,aAAaf;QAAa;QAChFU,iBAAiBX,KAAKiB,QAAQ,CAACb,MAAMO,eAAe,EAAE;YAAEK,aAAaf;QAAa;IACpF;AACF"}
+{"version":3,"sources":["../src/components/MenuGridItem/useMenuGridItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMergedRefs, slot } from '@fluentui/react-utilities';\n\nimport { MenuGridItemProps, MenuGridItemState } from './MenuGridItem.types';\nimport { MenuGridCell } from './../MenuGridCell/MenuGridCell';\nimport { MenuGridRow } from './../MenuGridRow/MenuGridRow';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Given user props, returns state and render function for a MenuGridItem.\n */\nexport function useMenuGridItem_unstable(props: MenuGridItemProps, ref: React.Ref<HTMLDivElement>): MenuGridItemState {\n  const {\n    icon,\n    content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute\n    subText,\n    firstSubAction,\n    secondSubAction,\n    ...rest\n  } = props;\n  const validateNestingRef = useValidateNesting('MenuGridItem');\n\n  return {\n    components: {\n      root: MenuGridRow,\n      icon: MenuGridCell,\n      content: MenuGridCell,\n      subText: 'span',\n      firstSubAction: MenuGridCell,\n      secondSubAction: MenuGridCell,\n    },\n    root: slot.always(\n      {\n        ref: useMergedRefs(ref, validateNestingRef),\n        ...rest,\n      },\n      { elementType: MenuGridRow },\n    ),\n    icon: slot.optional(props.icon, { elementType: MenuGridCell }),\n    content: slot.optional(props.content, {\n      renderByDefault: !!props.children,\n      defaultProps: { children: props.children },\n      elementType: MenuGridCell,\n    }),\n    subText: slot.optional(props.subText, { elementType: 'span' }),\n    firstSubAction: slot.optional(props.firstSubAction, { elementType: MenuGridCell }),\n    secondSubAction: slot.optional(props.secondSubAction, { elementType: MenuGridCell }),\n  };\n}\n"],"names":["React","useMergedRefs","slot","MenuGridCell","MenuGridRow","useValidateNesting","useMenuGridItem_unstable","props","ref","icon","content","_content","subText","firstSubAction","secondSubAction","rest","validateNestingRef","components","root","always","elementType","optional","renderByDefault","children","defaultProps"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAGhE,SAASC,YAAY,QAAQ,iCAAiC;AAC9D,SAASC,WAAW,QAAQ,+BAA+B;AAC3D,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;CAEC,GACD,OAAO,SAASC,yBAAyBC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EACJC,IAAI,EACJC,SAASC,QAAQ,EACjBC,OAAO,EACPC,cAAc,EACdC,eAAe,EACf,GAAGC,MACJ,GAAGR;IACJ,MAAMS,qBAAqBX,mBAAmB;IAE9C,OAAO;QACLY,YAAY;YACVC,MAAMd;YACNK,MAAMN;YACNO,SAASP;YACTS,SAAS;YACTC,gBAAgBV;YAChBW,iBAAiBX;QACnB;QACAe,MAAMhB,KAAKiB,MAAM,CACf;YACEX,KAAKP,cAAcO,KAAKQ;YACxB,GAAGD,IAAI;QACT,GACA;YAAEK,aAAahB;QAAY;QAE7BK,MAAMP,KAAKmB,QAAQ,CAACd,MAAME,IAAI,EAAE;YAAEW,aAAajB;QAAa;QAC5DO,SAASR,KAAKmB,QAAQ,CAACd,MAAMG,OAAO,EAAE;YACpCY,iBAAiB,CAAC,CAACf,MAAMgB,QAAQ;YACjCC,cAAc;gBAAED,UAAUhB,MAAMgB,QAAQ;YAAC;YACzCH,aAAajB;QACf;QACAS,SAASV,KAAKmB,QAAQ,CAACd,MAAMK,OAAO,EAAE;YAAEQ,aAAa;QAAO;QAC5DP,gBAAgBX,KAAKmB,QAAQ,CAACd,MAAMM,cAAc,EAAE;YAAEO,aAAajB;QAAa;QAChFW,iBAAiBZ,KAAKmB,QAAQ,CAACd,MAAMO,eAAe,EAAE;YAAEM,aAAajB;QAAa;IACpF;AACF"}

package/lib/components/MenuGridRow/MenuGridRow.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useMenuGridRow_unstable } from './useMenuGridRow';
 import { renderMenuGridRow_unstable } from './renderMenuGridRow';

package/lib/components/MenuGridRow/MenuGridRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridRow/MenuGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useMenuGridRow_unstable } from './useMenuGridRow';\nimport { renderMenuGridRow_unstable } from './renderMenuGridRow';\nimport type { MenuGridRowProps } from './MenuGridRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridRowStyles_unstable } from './useMenuGridRowStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridRow, using the `useMenuGridRow_unstable` hook.\n */\nexport const MenuGridRow: ForwardRefComponent<MenuGridRowProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridRow_unstable(props, ref);\n\n  useMenuGridRowStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridRowStyles_unstable')(state);\n\n  return renderMenuGridRow_unstable(state);\n});\n\nMenuGridRow.displayName = 'MenuGridRow';\n"],"names":["React","useMenuGridRow_unstable","renderMenuGridRow_unstable","useMenuGridRowStyles_unstable","MenuGridRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AAGjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAC9E,iFAAiF;AAEjF;;CAEC,GACD,OAAO,MAAMC,4BAAqDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQP,wBAAwBK,OAAOC;IAE7CJ,8BAA8BK;IAE9B,uEAAuE;IAEvE,OAAON,2BAA2BM;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/MenuGridRow/MenuGridRow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridRow_unstable } from './useMenuGridRow';\nimport { renderMenuGridRow_unstable } from './renderMenuGridRow';\nimport type { MenuGridRowProps } from './MenuGridRow.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGridRowStyles_unstable } from './useMenuGridRowStyles.styles';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a MenuGridRow, using the `useMenuGridRow_unstable` hook.\n */\nexport const MenuGridRow: ForwardRefComponent<MenuGridRowProps> = React.forwardRef((props, ref) => {\n  const state = useMenuGridRow_unstable(props, ref);\n\n  useMenuGridRowStyles_unstable(state);\n\n  // useCustomStyleHook_unstable('useMenuGridRowStyles_unstable')(state);\n\n  return renderMenuGridRow_unstable(state);\n});\n\nMenuGridRow.displayName = 'MenuGridRow';\n"],"names":["React","useMenuGridRow_unstable","renderMenuGridRow_unstable","useMenuGridRowStyles_unstable","MenuGridRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AAGjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAC9E,iFAAiF;AAEjF;;CAEC,GACD,OAAO,MAAMC,4BAAqDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQP,wBAAwBK,OAAOC;IAE7CJ,8BAA8BK;IAE9B,uEAAuE;IAEvE,OAAON,2BAA2BM;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/MenuGridRow/useMenuGridRow.js

@@ -1,16 +1,19 @@
+'use client';
 import * as React from 'react';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useMenuGridContext_unstable } from '../../contexts/menuGridContext';
+import { useValidateNesting } from '../../utils/useValidateNesting';
 /**
  * Given user props, returns state and render function for a MenuGridRow.
  */ export function useMenuGridRow_unstable(props, ref) {
+    const validateNestingRef = useValidateNesting('MenuGridRow');
     const { tableRowTabsterAttribute } = useMenuGridContext_unstable();
     return {
         components: {
             root: 'div'
         },
         root: slot.always(getIntrinsicElementProps('div', {
-            ref,
+            ref: useMergedRefs(ref, validateNestingRef),
             role: 'row',
             tabIndex: 0,
             ...tableRowTabsterAttribute,

package/lib/components/MenuGridRow/useMenuGridRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRow.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useMenuGridContext_unstable } from '../../contexts/menuGridContext';\nimport { MenuGridRowProps, MenuGridRowState } from './MenuGridRow.types';\n\n/**\n * Given user props, returns state and render function for a MenuGridRow.\n */\nexport function useMenuGridRow_unstable(props: MenuGridRowProps, ref: React.Ref<HTMLDivElement>): MenuGridRowState {\n  const { tableRowTabsterAttribute } = useMenuGridContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'row',\n        tabIndex: 0,\n        ...tableRowTabsterAttribute,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","getIntrinsicElementProps","slot","useMenuGridContext_unstable","useMenuGridRow_unstable","props","ref","tableRowTabsterAttribute","components","root","always","role","tabIndex","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,2BAA2B,QAAQ,iCAAiC;AAG7E;;CAEC,GACD,OAAO,SAASC,wBAAwBC,KAAuB,EAAEC,GAA8B;IAC7F,MAAM,EAAEC,wBAAwB,EAAE,GAAGJ;IAErC,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9BK;YACAK,MAAM;YACNC,UAAU;YACV,GAAGL,wBAAwB;YAC3B,GAAGF,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useMenuGridContext_unstable } from '../../contexts/menuGridContext';\nimport { MenuGridRowProps, MenuGridRowState } from './MenuGridRow.types';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Given user props, returns state and render function for a MenuGridRow.\n */\nexport function useMenuGridRow_unstable(props: MenuGridRowProps, ref: React.Ref<HTMLDivElement>): MenuGridRowState {\n  const validateNestingRef = useValidateNesting('MenuGridRow');\n  const { tableRowTabsterAttribute } = useMenuGridContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'row',\n        tabIndex: 0,\n        ...tableRowTabsterAttribute,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useMergedRefs","getIntrinsicElementProps","slot","useMenuGridContext_unstable","useValidateNesting","useMenuGridRow_unstable","props","ref","validateNestingRef","tableRowTabsterAttribute","components","root","always","role","tabIndex","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE1F,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;CAEC,GACD,OAAO,SAASC,wBAAwBC,KAAuB,EAAEC,GAA8B;IAC7F,MAAMC,qBAAqBJ,mBAAmB;IAC9C,MAAM,EAAEK,wBAAwB,EAAE,GAAGN;IAErC,OAAO;QACLO,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,KAAKU,MAAM,CACfX,yBAAyB,OAAO;YAC9BM,KAAKP,cAAcO,KAAKC;YACxBK,MAAM;YACNC,UAAU;YACV,GAAGL,wBAAwB;YAC3B,GAAGH,KAAK;QACV,IACA;YAAES,aAAa;QAAM;IAEzB;AACF"}

package/lib/contexts/menuGridContext.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export const MenuGridContext = React.createContext(undefined);
 const menuGridContextDefaultValue = {

package/lib/contexts/menuGridContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/menuGridContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\n\nexport const MenuGridContext = React.createContext<MenuGridContextValue | undefined>(\n  undefined,\n) as React.Context<MenuGridContextValue>;\n\nconst menuGridContextDefaultValue: MenuGridContextValue = {\n  tableRowTabsterAttribute: null,\n};\n\n/**\n * Context shared between MenuGrid and its children components\n */\nexport type MenuGridContextValue = {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n};\n\nexport const MenuGridContextProvider = MenuGridContext.Provider;\n\nexport const useMenuGridContext_unstable = (): MenuGridContextValue =>\n  React.useContext(MenuGridContext) ?? menuGridContextDefaultValue;\n"],"names":["React","MenuGridContext","createContext","undefined","menuGridContextDefaultValue","tableRowTabsterAttribute","MenuGridContextProvider","Provider","useMenuGridContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,kBAAkBD,MAAME,aAAa,CAChDC,WACuC;AAEzC,MAAMC,8BAAoD;IACxDC,0BAA0B;AAC5B;AAYA,OAAO,MAAMC,0BAA0BL,gBAAgBM,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QACzCR;WAAAA,CAAAA,oBAAAA,MAAMS,UAAU,CAACR,8BAAjBD,+BAAAA,oBAAqCI;EAA4B"}
+{"version":3,"sources":["../src/contexts/menuGridContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\n\nexport const MenuGridContext = React.createContext<MenuGridContextValue | undefined>(\n  undefined,\n) as React.Context<MenuGridContextValue>;\n\nconst menuGridContextDefaultValue: MenuGridContextValue = {\n  tableRowTabsterAttribute: null,\n};\n\n/**\n * Context shared between MenuGrid and its children components\n */\nexport type MenuGridContextValue = {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n};\n\nexport const MenuGridContextProvider = MenuGridContext.Provider;\n\nexport const useMenuGridContext_unstable = (): MenuGridContextValue =>\n  React.useContext(MenuGridContext) ?? menuGridContextDefaultValue;\n"],"names":["React","MenuGridContext","createContext","undefined","menuGridContextDefaultValue","tableRowTabsterAttribute","MenuGridContextProvider","Provider","useMenuGridContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,kBAAkBD,MAAME,aAAa,CAChDC,WACuC;AAEzC,MAAMC,8BAAoD;IACxDC,0BAA0B;AAC5B;AAYA,OAAO,MAAMC,0BAA0BL,gBAAgBM,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QACzCR;WAAAA,CAAAA,oBAAAA,MAAMS,UAAU,CAACR,8BAAjBD,+BAAAA,oBAAqCI;EAA4B"}

package/lib/contexts/menuGridGroupContext.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 const MenuGridGroupContext = React.createContext(undefined);
 const MenuGridGroupContextDefaultValue = {

package/lib/contexts/menuGridGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/menuGridGroupContext.ts"],"sourcesContent":["import * as React from 'react';\n\nconst MenuGridGroupContext = React.createContext<MenuGridGroupContextValue | undefined>(\n  undefined,\n) as React.Context<MenuGridGroupContextValue>;\n\nconst MenuGridGroupContextDefaultValue: MenuGridGroupContextValue = {\n  headerId: '',\n};\n\n/**\n * Context used to guarantee correct aria-relationship between row group and header\n */\nexport type MenuGridGroupContextValue = {\n  /**\n   * Element id applied to the `MenuGridGroupHeader` component\n   */\n  headerId: string;\n};\n\nexport const MenuGridGroupContextProvider = MenuGridGroupContext.Provider;\nexport const useMenuGridGroupContext_unstable = (): MenuGridGroupContextValue =>\n  React.useContext(MenuGridGroupContext) ?? MenuGridGroupContextDefaultValue;\n"],"names":["React","MenuGridGroupContext","createContext","undefined","MenuGridGroupContextDefaultValue","headerId","MenuGridGroupContextProvider","Provider","useMenuGridGroupContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,uBAAuBD,MAAME,aAAa,CAC9CC;AAGF,MAAMC,mCAA8D;IAClEC,UAAU;AACZ;AAYA,OAAO,MAAMC,+BAA+BL,qBAAqBM,QAAQ,CAAC;AAC1E,OAAO,MAAMC,mCAAmC;QAC9CR;WAAAA,CAAAA,oBAAAA,MAAMS,UAAU,CAACR,mCAAjBD,+BAAAA,oBAA0CI;EAAiC"}
+{"version":3,"sources":["../src/contexts/menuGridGroupContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst MenuGridGroupContext = React.createContext<MenuGridGroupContextValue | undefined>(\n  undefined,\n) as React.Context<MenuGridGroupContextValue>;\n\nconst MenuGridGroupContextDefaultValue: MenuGridGroupContextValue = {\n  headerId: '',\n};\n\n/**\n * Context used to guarantee correct aria-relationship between row group and header\n */\nexport type MenuGridGroupContextValue = {\n  /**\n   * Element id applied to the `MenuGridGroupHeader` component\n   */\n  headerId: string;\n};\n\nexport const MenuGridGroupContextProvider = MenuGridGroupContext.Provider;\nexport const useMenuGridGroupContext_unstable = (): MenuGridGroupContextValue =>\n  React.useContext(MenuGridGroupContext) ?? MenuGridGroupContextDefaultValue;\n"],"names":["React","MenuGridGroupContext","createContext","undefined","MenuGridGroupContextDefaultValue","headerId","MenuGridGroupContextProvider","Provider","useMenuGridGroupContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,uBAAuBD,MAAME,aAAa,CAC9CC;AAGF,MAAMC,mCAA8D;IAClEC,UAAU;AACZ;AAYA,OAAO,MAAMC,+BAA+BL,qBAAqBM,QAAQ,CAAC;AAC1E,OAAO,MAAMC,mCAAmC;QAC9CR;WAAAA,CAAAA,oBAAAA,MAAMS,UAAU,CAACR,mCAAjBD,+BAAAA,oBAA0CI;EAAiC"}

package/lib/utils/index.js

@@ -0,0 +1 @@
+export { useValidateNesting } from './useValidateNesting';

package/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { useValidateNesting } from './useValidateNesting';\n"],"names":["useValidateNesting"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB"}

package/lib/utils/useValidateNesting.js

@@ -0,0 +1,91 @@
+'use client';
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useMenuContext_unstable } from '@fluentui/react-menu';
+const menuItemRoleToNameMapping = {
+    menuitem: 'MenuItem',
+    menuitemcheckbox: 'MenuItemCheckbox',
+    menuitemradio: 'MenuItemRadio'
+};
+export const useValidateNesting = (componentName)=>{
+    'use no memo';
+    const { targetDocument } = useFluent();
+    const triggerRef = useMenuContext_unstable((context)=>context.triggerRef);
+    const inline = useMenuContext_unstable((context)=>context.inline);
+    const ref = React.useRef(null);
+    if (process.env.NODE_ENV !== 'production') {
+        // This check should run only in development mode
+        // It's okay to disable the ESLint rule because we ar checking env variable statically (not at runtime)
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useEffect(()=>{
+            let ancestor = ref.current;
+            let ancestorRole;
+            do {
+                var _ancestor_parentElement;
+                ancestor = (_ancestor_parentElement = ancestor === null || ancestor === void 0 ? void 0 : ancestor.parentElement) !== null && _ancestor_parentElement !== void 0 ? _ancestor_parentElement : null;
+                ancestorRole = ancestor === null || ancestor === void 0 ? void 0 : ancestor.getAttribute('role');
+                if (ancestor === null || ancestor === void 0 ? void 0 : ancestor.classList.contains('fui-MenuGrid')) {
+                    if (componentName === 'MenuGridCell') {
+                        throw new Error('MenuGridCell is incorrectly nested within MenuGrid. You probably want to wrap it in a MenuGridRow.');
+                    }
+                    break;
+                }
+                if ((ancestor === null || ancestor === void 0 ? void 0 : ancestor.classList.contains('fui-MenuGridRow')) && componentName === 'MenuGridCell') {
+                    break;
+                }
+                if ([
+                    'menuitem',
+                    'menuitemcheckbox',
+                    'menuitemradio'
+                ].includes(ancestorRole !== null && ancestorRole !== void 0 ? ancestorRole : '')) {
+                    throw new Error(`${componentName} is incorrectly nested within ${menuItemRoleToNameMapping[ancestorRole]} or within an element with the "${ancestorRole}" role.`);
+                }
+                if (ancestorRole === 'menu') {
+                    let message = '';
+                    let breakAncestorTraversal = false;
+                    switch(componentName){
+                        case 'MenuGrid':
+                            if (inline && getMenuOfTrigger(triggerRef.current, targetDocument) === ancestor) {
+                                // Handle the case when MenuGrid is inline next to its menu trigger which is a submenu item of the parent menu
+                                breakAncestorTraversal = true;
+                                break;
+                            }
+                            message = 'MenuGrid is incorrectly nested within MenuList or within an element with the "menu" role.';
+                            break;
+                        case 'MenuGridCell':
+                            message = 'MenuGridCell is incorrectly nested within MenuList or within an element with the "menu" role. You probably want to wrap it in a MenuGridRow.';
+                            break;
+                        case 'MenuGridItem':
+                            message = 'MenuGridItem is incorrectly nested within MenuList or within an element with the "menu" role. You probably want to wrap it in a MenuGrid instead.';
+                            break;
+                        case 'MenuGridRow':
+                            message = 'MenuGridRow is incorrectly nested within MenuList or within an element with the "menu" role. You probably want to wrap it in a MenuGrid instead.';
+                            break;
+                    }
+                    if (breakAncestorTraversal) {
+                        break;
+                    }
+                    throw new Error(message);
+                }
+            }while (ancestor && ancestor !== (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body))
+        }, [
+            componentName,
+            ref,
+            triggerRef,
+            inline,
+            targetDocument
+        ]);
+    }
+    return ref;
+};
+const getMenuOfTrigger = (trigger, targetDocument)=>{
+    let ancestor = trigger === null || trigger === void 0 ? void 0 : trigger.parentElement;
+    while(ancestor && ancestor !== (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body)){
+        if ((ancestor === null || ancestor === void 0 ? void 0 : ancestor.getAttribute('role')) === 'menu') {
+            return ancestor;
+        }
+        var _ancestor_parentElement;
+        ancestor = (_ancestor_parentElement = ancestor === null || ancestor === void 0 ? void 0 : ancestor.parentElement) !== null && _ancestor_parentElement !== void 0 ? _ancestor_parentElement : null;
+    }
+    return null;
+};