@fluentui/react-menu-grid-preview 0.0.0-nightly-20250918-0406.1 → 0.0.0-nightly-20250922-0406.1

package/CHANGELOG.md

@@ -1,26 +1,26 @@
 # Change Log - @fluentui/react-menu-grid-preview
 
-This log was last generated on Thu, 18 Sep 2025 04:21:39 GMT and should not be manually modified.
+This log was last generated on Mon, 22 Sep 2025 04:21:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20250918-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.0.0-nightly-20250918-0406.1)
+## [0.0.0-nightly-20250922-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.0.0-nightly-20250922-0406.1)
 
-Thu, 18 Sep 2025 04:21:39 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.1.1..@fluentui/react-menu-grid-preview_v0.0.0-nightly-20250918-0406.1)
+Mon, 22 Sep 2025 04:21:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.1.1..@fluentui/react-menu-grid-preview_v0.0.0-nightly-20250922-0406.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-menu to v0.0.0-nightly-20250918-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/52f253b6e76a0f105dd37ddbdd3fa42183137ec3) by beachball)
-- Bump @fluentui/react-table to v0.0.0-nightly-20250918-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/52f253b6e76a0f105dd37ddbdd3fa42183137ec3) by beachball)
-- Bump @fluentui/react-tabster to v0.0.0-nightly-20250918-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/52f253b6e76a0f105dd37ddbdd3fa42183137ec3) by beachball)
-- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250918-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/52f253b6e76a0f105dd37ddbdd3fa42183137ec3) by beachball)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250918-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/52f253b6e76a0f105dd37ddbdd3fa42183137ec3) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20250918-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/52f253b6e76a0f105dd37ddbdd3fa42183137ec3) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20250918-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/52f253b6e76a0f105dd37ddbdd3fa42183137ec3) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20250918-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/52f253b6e76a0f105dd37ddbdd3fa42183137ec3) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250918-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/52f253b6e76a0f105dd37ddbdd3fa42183137ec3) by beachball)
+- Bump @fluentui/react-menu to v0.0.0-nightly-20250922-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/9f05569c664ddc5fbbd632f9376f9c3e00f44b96) by beachball)
+- Bump @fluentui/react-table to v0.0.0-nightly-20250922-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/9f05569c664ddc5fbbd632f9376f9c3e00f44b96) by beachball)
+- Bump @fluentui/react-tabster to v0.0.0-nightly-20250922-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/9f05569c664ddc5fbbd632f9376f9c3e00f44b96) by beachball)
+- Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250922-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/9f05569c664ddc5fbbd632f9376f9c3e00f44b96) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250922-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/9f05569c664ddc5fbbd632f9376f9c3e00f44b96) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20250922-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/9f05569c664ddc5fbbd632f9376f9c3e00f44b96) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20250922-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/9f05569c664ddc5fbbd632f9376f9c3e00f44b96) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20250922-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/9f05569c664ddc5fbbd632f9376f9c3e00f44b96) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250922-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/9f05569c664ddc5fbbd632f9376f9c3e00f44b96) by beachball)
 
 ## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.1.1)
 

package/lib/components/MenuGrid/useMenuGrid.js

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useMergedRefs, 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();
     return {
@@ -12,7 +14,7 @@ import { useMenuContext_unstable } from '@fluentui/react-menu';
             root: 'div'
         },
         root: slot.always(getIntrinsicElementProps('div', {
-            ref,
+            ref: useMergedRefs(ref, validateNestingRef),
             role: 'grid',
             'aria-labelledby': triggerId,
             onKeyDown: onTableKeyDown,

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":["import * as React from 'react';\nimport { useMergedRefs, getIntrinsicElementProps, slot } 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\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        onKeyDown: onTableKeyDown,\n        ...tableTabsterAttribute,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    tableRowTabsterAttribute,\n  };\n};\n"],"names":["React","useMergedRefs","getIntrinsicElementProps","slot","useTableCompositeNavigation","useMenuContext_unstable","useValidateNesting","useMenuGrid_unstable","props","ref","validateNestingRef","triggerId","context","tableRowTabsterAttribute","tableTabsterAttribute","onTableKeyDown","components","root","always","role","onKeyDown","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE1F,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;IAE5E,OAAO;QACLY,YAAY;YACVC,MAAM;QACR;QACAA,MAAMd,KAAKe,MAAM,CACfhB,yBAAyB,OAAO;YAC9BO,KAAKR,cAAcQ,KAAKC;YACxBS,MAAM;YACN,mBAAmBR;YACnBS,WAAWL;YACX,GAAGD,qBAAqB;YACxB,GAAGN,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;QAEvBR;IACF;AACF,EAAE"}

package/lib/components/MenuGridCell/useMenuGridCell.js

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useMergedRefs, 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 validateNestingRef = useValidateNesting('MenuGridCell');
     const { visuallyHidden } = props;
     return {
         visuallyHidden,
@@ -10,7 +12,7 @@ import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
             root: 'div'
         },
         root: slot.always(getIntrinsicElementProps('div', {
-            ref,
+            ref: useMergedRefs(ref, validateNestingRef),
             role: 'gridcell',
             ...props
         }), {

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":["import * as React from 'react';\nimport { useMergedRefs, getIntrinsicElementProps, slot } 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 validateNestingRef = useValidateNesting('MenuGridCell');\n  const { visuallyHidden } = props;\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      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useMergedRefs","getIntrinsicElementProps","slot","useValidateNesting","useMenuGridCell_unstable","props","ref","validateNestingRef","visuallyHidden","components","root","always","role","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE1F,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;CAEC,GACD,OAAO,SAASC,yBAAyBC,KAAwB,EAAEC,GAA8B;IAC/F,MAAMC,qBAAqBJ,mBAAmB;IAC9C,MAAM,EAAEK,cAAc,EAAE,GAAGH;IAE3B,OAAO;QACLG;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,KAAKS,MAAM,CACfV,yBAAyB,OAAO;YAC9BK,KAAKN,cAAcM,KAAKC;YACxBK,MAAM;YACN,GAAGP,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF"}

package/lib/components/MenuGridItem/useMenuGridItem.js

@@ -1,11 +1,13 @@
 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 +18,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":["import * 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,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/useMenuGridRow.js

@@ -1,16 +1,18 @@
 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":["import * 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,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/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,90 @@
+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;
+};

package/lib/utils/useValidateNesting.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/useValidateNesting.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport type { MenuContextValue } from '@fluentui/react-menu';\nimport { useMenuContext_unstable } from '@fluentui/react-menu';\n\ntype NestingComponentName = 'MenuGrid' | 'MenuGridCell' | 'MenuGridItem' | 'MenuGridRow';\ntype MenuItemRoles = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';\n\nconst menuItemRoleToNameMapping = {\n  menuitem: 'MenuItem',\n  menuitemcheckbox: 'MenuItemCheckbox',\n  menuitemradio: 'MenuItemRadio',\n};\n\nexport const useValidateNesting = (componentName: NestingComponentName): React.RefObject<HTMLElement> => {\n  'use no memo';\n\n  const { targetDocument } = useFluent();\n  const triggerRef = useMenuContext_unstable((context: MenuContextValue) => context.triggerRef);\n  const inline = useMenuContext_unstable((context: MenuContextValue) => context.inline);\n  const ref = React.useRef<HTMLElement>(null);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // This check should run only in development mode\n    // It's okay to disable the ESLint rule because we ar checking env variable statically (not at runtime)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      let ancestor = ref.current;\n      let ancestorRole;\n\n      do {\n        ancestor = ancestor?.parentElement ?? null;\n        ancestorRole = ancestor?.getAttribute('role');\n        if (ancestor?.classList.contains('fui-MenuGrid')) {\n          if (componentName === 'MenuGridCell') {\n            throw new Error(\n              'MenuGridCell is incorrectly nested within MenuGrid. You probably want to wrap it in a MenuGridRow.',\n            );\n          }\n          break;\n        }\n        if (ancestor?.classList.contains('fui-MenuGridRow') && componentName === 'MenuGridCell') {\n          break;\n        }\n        if (['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(ancestorRole ?? '')) {\n          throw new Error(\n            `${componentName} is incorrectly nested within ${\n              menuItemRoleToNameMapping[ancestorRole as MenuItemRoles]\n            } or within an element with the \"${ancestorRole}\" role.`,\n          );\n        }\n        if (ancestorRole === 'menu') {\n          let message = '';\n          let breakAncestorTraversal = false;\n          switch (componentName) {\n            case 'MenuGrid':\n              if (inline && getMenuOfTrigger(triggerRef.current, targetDocument) === ancestor) {\n                // Handle the case when MenuGrid is inline next to its menu trigger which is a submenu item of the parent menu\n                breakAncestorTraversal = true;\n                break;\n              }\n              message = 'MenuGrid is incorrectly nested within MenuList or within an element with the \"menu\" role.';\n              break;\n            case 'MenuGridCell':\n              message =\n                'MenuGridCell is incorrectly nested within MenuList or within an element with the \"menu\" role. You probably want to wrap it in a MenuGridRow.';\n              break;\n            case 'MenuGridItem':\n              message =\n                'MenuGridItem is incorrectly nested within MenuList or within an element with the \"menu\" role. You probably want to wrap it in a MenuGrid instead.';\n              break;\n            case 'MenuGridRow':\n              message =\n                'MenuGridRow is incorrectly nested within MenuList or within an element with the \"menu\" role. You probably want to wrap it in a MenuGrid instead.';\n              break;\n          }\n          if (breakAncestorTraversal) {\n            break;\n          }\n          throw new Error(message);\n        }\n      } while (ancestor && ancestor !== targetDocument?.body);\n    }, [componentName, ref, triggerRef, inline, targetDocument]);\n  }\n  return ref;\n};\n\nconst getMenuOfTrigger = (trigger: HTMLElement | null, targetDocument?: Document): HTMLElement | null => {\n  let ancestor = trigger?.parentElement;\n  while (ancestor && ancestor !== targetDocument?.body) {\n    if (ancestor?.getAttribute('role') === 'menu') {\n      return ancestor;\n    }\n    ancestor = ancestor?.parentElement ?? null;\n  }\n  return null;\n};\n"],"names":["React","useFluent_unstable","useFluent","useMenuContext_unstable","menuItemRoleToNameMapping","menuitem","menuitemcheckbox","menuitemradio","useValidateNesting","componentName","targetDocument","triggerRef","context","inline","ref","useRef","process","env","NODE_ENV","useEffect","ancestor","current","ancestorRole","parentElement","getAttribute","classList","contains","Error","includes","message","breakAncestorTraversal","getMenuOfTrigger","body","trigger"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAGlF,SAASC,uBAAuB,QAAQ,uBAAuB;AAK/D,MAAMC,4BAA4B;IAChCC,UAAU;IACVC,kBAAkB;IAClBC,eAAe;AACjB;AAEA,OAAO,MAAMC,qBAAqB,CAACC;IACjC;IAEA,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAC3B,MAAMS,aAAaR,wBAAwB,CAACS,UAA8BA,QAAQD,UAAU;IAC5F,MAAME,SAASV,wBAAwB,CAACS,UAA8BA,QAAQC,MAAM;IACpF,MAAMC,MAAMd,MAAMe,MAAM,CAAc;IAEtC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,iDAAiD;QACjD,uGAAuG;QACvG,sDAAsD;QACtDlB,MAAMmB,SAAS,CAAC;YACd,IAAIC,WAAWN,IAAIO,OAAO;YAC1B,IAAIC;YAEJ,GAAG;oBACUF;gBAAXA,WAAWA,CAAAA,0BAAAA,qBAAAA,+BAAAA,SAAUG,aAAa,cAAvBH,qCAAAA,0BAA2B;gBACtCE,eAAeF,qBAAAA,+BAAAA,SAAUI,YAAY,CAAC;gBACtC,IAAIJ,qBAAAA,+BAAAA,SAAUK,SAAS,CAACC,QAAQ,CAAC,iBAAiB;oBAChD,IAAIjB,kBAAkB,gBAAgB;wBACpC,MAAM,IAAIkB,MACR;oBAEJ;oBACA;gBACF;gBACA,IAAIP,CAAAA,qBAAAA,+BAAAA,SAAUK,SAAS,CAACC,QAAQ,CAAC,uBAAsBjB,kBAAkB,gBAAgB;oBACvF;gBACF;gBACA,IAAI;oBAAC;oBAAY;oBAAoB;iBAAgB,CAACmB,QAAQ,CAACN,yBAAAA,0BAAAA,eAAgB,KAAK;oBAClF,MAAM,IAAIK,MACR,GAAGlB,cAAc,8BAA8B,EAC7CL,yBAAyB,CAACkB,aAA8B,CACzD,gCAAgC,EAAEA,aAAa,OAAO,CAAC;gBAE5D;gBACA,IAAIA,iBAAiB,QAAQ;oBAC3B,IAAIO,UAAU;oBACd,IAAIC,yBAAyB;oBAC7B,OAAQrB;wBACN,KAAK;4BACH,IAAII,UAAUkB,iBAAiBpB,WAAWU,OAAO,EAAEX,oBAAoBU,UAAU;gCAC/E,8GAA8G;gCAC9GU,yBAAyB;gCACzB;4BACF;4BACAD,UAAU;4BACV;wBACF,KAAK;4BACHA,UACE;4BACF;wBACF,KAAK;4BACHA,UACE;4BACF;wBACF,KAAK;4BACHA,UACE;4BACF;oBACJ;oBACA,IAAIC,wBAAwB;wBAC1B;oBACF;oBACA,MAAM,IAAIH,MAAME;gBAClB;YACF,QAAST,YAAYA,cAAaV,2BAAAA,qCAAAA,eAAgBsB,IAAI,EAAE;QAC1D,GAAG;YAACvB;YAAeK;YAAKH;YAAYE;YAAQH;SAAe;IAC7D;IACA,OAAOI;AACT,EAAE;AAEF,MAAMiB,mBAAmB,CAACE,SAA6BvB;IACrD,IAAIU,WAAWa,oBAAAA,8BAAAA,QAASV,aAAa;IACrC,MAAOH,YAAYA,cAAaV,2BAAAA,qCAAAA,eAAgBsB,IAAI,EAAE;QACpD,IAAIZ,CAAAA,qBAAAA,+BAAAA,SAAUI,YAAY,CAAC,aAAY,QAAQ;YAC7C,OAAOJ;QACT;YACWA;QAAXA,WAAWA,CAAAA,0BAAAA,qBAAAA,+BAAAA,SAAUG,aAAa,cAAvBH,qCAAAA,0BAA2B;IACxC;IACA,OAAO;AACT"}

package/lib-commonjs/components/MenuGrid/useMenuGrid.js

@@ -13,7 +13,9 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reacttable = require("@fluentui/react-table");
 const _reactmenu = require("@fluentui/react-menu");
+const _useValidateNesting = require("../../utils/useValidateNesting");
 const useMenuGrid_unstable = (props, ref)=>{
+    const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGrid');
     const triggerId = (0, _reactmenu.useMenuContext_unstable)((context)=>context.triggerId);
     const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = (0, _reacttable.useTableCompositeNavigation)();
     return {
@@ -21,7 +23,7 @@ const useMenuGrid_unstable = (props, ref)=>{
             root: 'div'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            ref,
+            ref: (0, _reactutilities.useMergedRefs)(ref, validateNestingRef),
             role: 'grid',
             'aria-labelledby': triggerId,
             onKeyDown: onTableKeyDown,

package/lib-commonjs/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":";;;;+BASaK;;;;;;;iEATU,QAAQ;gCACgB,4BAA4B;4BAC/B,wBAAwB;2BAE5B,uBAAuB;AAKxD,6BAA6B,CAACC,OAAsBC;IACzD,MAAMC,gBAAYJ,kCAAAA,EAAwBK,CAAAA,UAAWA,QAAQD,SAAS;IACtE,MAAM,EAAEE,wBAAwB,EAAEC,qBAAqB,EAAEC,cAAc,EAAE,OAAGT,uCAAAA;IAE5E,OAAO;QACLU,YAAY;YACVC,MAAM;QACR;QACAA,MAAMZ,oBAAAA,CAAKa,MAAM,KACfd,wCAAAA,EAAyB,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":["import * as React from 'react';\nimport { useMergedRefs, getIntrinsicElementProps, slot } 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\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        onKeyDown: onTableKeyDown,\n        ...tableTabsterAttribute,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    tableRowTabsterAttribute,\n  };\n};\n"],"names":["React","useMergedRefs","getIntrinsicElementProps","slot","useTableCompositeNavigation","useMenuContext_unstable","useValidateNesting","useMenuGrid_unstable","props","ref","validateNestingRef","triggerId","context","tableRowTabsterAttribute","tableTabsterAttribute","onTableKeyDown","components","root","always","role","onKeyDown","elementType"],"mappings":";;;;+BAWaO;;;;;;;iEAXU,QAAQ;gCAC+B,4BAA4B;4BAE9C,wBAAwB;2BAE5B,uBAAuB;oCAC5B,iCAAiC;AAK7D,6BAA6B,CAACC,OAAsBC;IACzD,MAAMC,yBAAqBJ,sCAAAA,EAAmB;IAC9C,MAAMK,YAAYN,sCAAAA,EAAwBO,CAAAA,UAAWA,QAAQD,SAAS;IACtE,MAAM,EAAEE,wBAAwB,EAAEC,qBAAqB,EAAEC,cAAc,EAAE,OAAGX,uCAAAA;IAE5E,OAAO;QACLY,YAAY;YACVC,MAAM;QACR;QACAA,MAAMd,oBAAAA,CAAKe,MAAM,KACfhB,wCAAAA,EAAyB,OAAO;YAC9BO,SAAKR,6BAAAA,EAAcQ,KAAKC;YACxBS,MAAM;YACN,mBAAmBR;YACnBS,WAAWL;YACX,GAAGD,qBAAqB;YACxB,GAAGN,KAAK;QACV,IACA;YAAEa,aAAa;QAAM;QAEvBR;IACF;AACF,EAAE"}

package/lib-commonjs/components/MenuGridCell/useMenuGridCell.js

@@ -11,7 +11,9 @@ Object.defineProperty(exports, "useMenuGridCell_unstable", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
+const _useValidateNesting = require("../../utils/useValidateNesting");
 function useMenuGridCell_unstable(props, ref) {
+    const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGridCell');
     const { visuallyHidden } = props;
     return {
         visuallyHidden,
@@ -19,7 +21,7 @@ function useMenuGridCell_unstable(props, ref) {
             root: 'div'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            ref,
+            ref: (0, _reactutilities.useMergedRefs)(ref, validateNestingRef),
             role: 'gridcell',
             ...props
         }), {

package/lib-commonjs/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":";;;;+BAOgBG;;;;;;;iEAPO,QAAQ;gCACgB,4BAA4B;AAMpE,kCAAkCC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAE3B,OAAO;QACLE;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,oBAAAA,CAAKO,MAAM,KACfR,wCAAAA,EAAyB,OAAO;YAC9BI;YACAK,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs, getIntrinsicElementProps, slot } 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 validateNestingRef = useValidateNesting('MenuGridCell');\n  const { visuallyHidden } = props;\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      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useMergedRefs","getIntrinsicElementProps","slot","useValidateNesting","useMenuGridCell_unstable","props","ref","validateNestingRef","visuallyHidden","components","root","always","role","elementType"],"mappings":";;;;+BAQgBK;;;;;;;iEARO,QAAQ;gCAC+B,4BAA4B;oCAEvD,iCAAiC;AAK7D,kCAAkCC,KAAwB,EAAEC,GAA8B;IAC/F,MAAMC,yBAAqBJ,sCAAAA,EAAmB;IAC9C,MAAM,EAAEK,cAAc,EAAE,GAAGH;IAE3B,OAAO;QACLG;QACAC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMR,oBAAAA,CAAKS,MAAM,KACfV,wCAAAA,EAAyB,OAAO;YAC9BK,SAAKN,6BAAAA,EAAcM,KAAKC;YACxBK,MAAM;YACN,GAAGP,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF"}

package/lib-commonjs/components/MenuGridItem/useMenuGridItem.js

@@ -13,8 +13,10 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _MenuGridCell = require("./../MenuGridCell/MenuGridCell");
 const _MenuGridRow = require("./../MenuGridRow/MenuGridRow");
+const _useValidateNesting = require("../../utils/useValidateNesting");
 function useMenuGridItem_unstable(props, ref) {
     const { icon, content: _content, subText, firstSubAction, secondSubAction, ...rest } = props;
+    const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGridItem');
     return {
         components: {
             root: _MenuGridRow.MenuGridRow,
@@ -25,7 +27,7 @@ function useMenuGridItem_unstable(props, ref) {
             secondSubAction: _MenuGridCell.MenuGridCell
         },
         root: _reactutilities.slot.always({
-            ref,
+            ref: (0, _reactutilities.useMergedRefs)(ref, validateNestingRef),
             ...rest
         }, {
             elementType: _MenuGridRow.MenuGridRow

package/lib-commonjs/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":";;;;+BAUgBI;;;;;;;iEAVO,QAAQ;gCACV,4BAA4B;8BAGpB,iCAAiC;6BAClC,+BAA+B;AAKpD,kCAAkCC,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,wBAAAA;YACNI,MAAML,0BAAAA;YACNM,SAASN,0BAAAA;YACTQ,SAAS;YACTC,gBAAgBT,0BAAAA;YAChBU,iBAAiBV,0BAAAA;QACnB;QACAa,MAAMd,oBAAAA,CAAKe,MAAM,CACf;YACEV;YACA,GAAGO,IAAI;QACT,GACA;YAAEI,aAAad,wBAAAA;QAAY;QAE7BI,MAAMN,oBAAAA,CAAKiB,QAAQ,CAACb,MAAME,IAAI,EAAE;YAAEU,aAAaf,0BAAAA;QAAa;QAC5DM,SAASP,oBAAAA,CAAKiB,QAAQ,CAACb,MAAMG,OAAO,EAAE;YACpCW,iBAAiB,CAAC,CAACd,MAAMe,QAAQ;YACjCC,cAAc;gBAAED,UAAUf,MAAMe,QAAQ;YAAC;YACzCH,aAAaf,0BAAAA;QACf;QACAQ,SAAST,oBAAAA,CAAKiB,QAAQ,CAACb,MAAMK,OAAO,EAAE;YAAEO,aAAa;QAAO;QAC5DN,gBAAgBV,oBAAAA,CAAKiB,QAAQ,CAACb,MAAMM,cAAc,EAAE;YAAEM,aAAaf,0BAAAA;QAAa;QAChFU,iBAAiBX,oBAAAA,CAAKiB,QAAQ,CAACb,MAAMO,eAAe,EAAE;YAAEK,aAAaf,0BAAAA;QAAa;IACpF;AACF"}
+{"version":3,"sources":["../src/components/MenuGridItem/useMenuGridItem.ts"],"sourcesContent":["import * 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":";;;;+BAWgBM;;;;;;;iEAXO,QAAQ;gCACK,4BAA4B;8BAGnC,iCAAiC;6BAClC,+BAA+B;oCACxB,iCAAiC;AAK7D,kCAAkCC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EACJC,IAAI,EACJC,SAASC,QAAQ,EACjBC,OAAO,EACPC,cAAc,EACdC,eAAe,EACf,GAAGC,MACJ,GAAGR;IACJ,MAAMS,yBAAqBX,sCAAAA,EAAmB;IAE9C,OAAO;QACLY,YAAY;YACVC,MAAMd,wBAAAA;YACNK,MAAMN,0BAAAA;YACNO,SAASP,0BAAAA;YACTS,SAAS;YACTC,gBAAgBV,0BAAAA;YAChBW,iBAAiBX,0BAAAA;QACnB;QACAe,MAAMhB,oBAAAA,CAAKiB,MAAM,CACf;YACEX,SAAKP,6BAAAA,EAAcO,KAAKQ;YACxB,GAAGD,IAAI;QACT,GACA;YAAEK,aAAahB,wBAAAA;QAAY;QAE7BK,MAAMP,oBAAAA,CAAKmB,QAAQ,CAACd,MAAME,IAAI,EAAE;YAAEW,aAAajB,0BAAAA;QAAa;QAC5DO,SAASR,oBAAAA,CAAKmB,QAAQ,CAACd,MAAMG,OAAO,EAAE;YACpCY,iBAAiB,CAAC,CAACf,MAAMgB,QAAQ;YACjCC,cAAc;gBAAED,UAAUhB,MAAMgB,QAAQ;YAAC;YACzCH,aAAajB,0BAAAA;QACf;QACAS,SAASV,oBAAAA,CAAKmB,QAAQ,CAACd,MAAMK,OAAO,EAAE;YAAEQ,aAAa;QAAO;QAC5DP,gBAAgBX,oBAAAA,CAAKmB,QAAQ,CAACd,MAAMM,cAAc,EAAE;YAAEO,aAAajB,0BAAAA;QAAa;QAChFW,iBAAiBZ,oBAAAA,CAAKmB,QAAQ,CAACd,MAAMO,eAAe,EAAE;YAAEM,aAAajB,0BAAAA;QAAa;IACpF;AACF"}

package/lib-commonjs/components/MenuGridRow/useMenuGridRow.js

@@ -12,14 +12,16 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _menuGridContext = require("../../contexts/menuGridContext");
+const _useValidateNesting = require("../../utils/useValidateNesting");
 function useMenuGridRow_unstable(props, ref) {
+    const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGridRow');
     const { tableRowTabsterAttribute } = (0, _menuGridContext.useMenuGridContext_unstable)();
     return {
         components: {
             root: 'div'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            ref,
+            ref: (0, _reactutilities.useMergedRefs)(ref, validateNestingRef),
             role: 'row',
             tabIndex: 0,
             ...tableRowTabsterAttribute,

package/lib-commonjs/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":";;;;+BASgBI;;;;;;;iEATO,QAAQ;gCACgB,4BAA4B;iCAE/B,iCAAiC;AAMtE,iCAAiCC,KAAuB,EAAEC,GAA8B;IAC7F,MAAM,EAAEC,wBAAwB,EAAE,OAAGJ,4CAAAA;IAErC,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMP,oBAAAA,CAAKQ,MAAM,KACfT,wCAAAA,EAAyB,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":["import * 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":";;;;+BAUgBM;;;;;;;iEAVO,QAAQ;gCAC+B,4BAA4B;iCAE9C,iCAAiC;oCAE1C,iCAAiC;AAK7D,iCAAiCC,KAAuB,EAAEC,GAA8B;IAC7F,MAAMC,yBAAqBJ,sCAAAA,EAAmB;IAC9C,MAAM,EAAEK,wBAAwB,EAAE,OAAGN,4CAAAA;IAErC,OAAO;QACLO,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,oBAAAA,CAAKU,MAAM,KACfX,wCAAAA,EAAyB,OAAO;YAC9BM,SAAKP,6BAAAA,EAAcO,KAAKC;YACxBK,MAAM;YACNC,UAAU;YACV,GAAGL,wBAAwB;YAC3B,GAAGH,KAAK;QACV,IACA;YAAES,aAAa;QAAM;IAEzB;AACF"}

package/lib-commonjs/utils/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useValidateNesting", {
+    enumerable: true,
+    get: function() {
+        return _useValidateNesting.useValidateNesting;
+    }
+});
+const _useValidateNesting = require("./useValidateNesting");

package/lib-commonjs/utils/index.js.map

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

package/lib-commonjs/utils/useValidateNesting.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useValidateNesting", {
+    enumerable: true,
+    get: function() {
+        return useValidateNesting;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _reactmenu = require("@fluentui/react-menu");
+const menuItemRoleToNameMapping = {
+    menuitem: 'MenuItem',
+    menuitemcheckbox: 'MenuItemCheckbox',
+    menuitemradio: 'MenuItemRadio'
+};
+const useValidateNesting = (componentName)=>{
+    'use no memo';
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const triggerRef = (0, _reactmenu.useMenuContext_unstable)((context)=>context.triggerRef);
+    const inline = (0, _reactmenu.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;
+};

package/lib-commonjs/utils/useValidateNesting.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/useValidateNesting.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nimport type { MenuContextValue } from '@fluentui/react-menu';\nimport { useMenuContext_unstable } from '@fluentui/react-menu';\n\ntype NestingComponentName = 'MenuGrid' | 'MenuGridCell' | 'MenuGridItem' | 'MenuGridRow';\ntype MenuItemRoles = 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';\n\nconst menuItemRoleToNameMapping = {\n  menuitem: 'MenuItem',\n  menuitemcheckbox: 'MenuItemCheckbox',\n  menuitemradio: 'MenuItemRadio',\n};\n\nexport const useValidateNesting = (componentName: NestingComponentName): React.RefObject<HTMLElement> => {\n  'use no memo';\n\n  const { targetDocument } = useFluent();\n  const triggerRef = useMenuContext_unstable((context: MenuContextValue) => context.triggerRef);\n  const inline = useMenuContext_unstable((context: MenuContextValue) => context.inline);\n  const ref = React.useRef<HTMLElement>(null);\n\n  if (process.env.NODE_ENV !== 'production') {\n    // This check should run only in development mode\n    // It's okay to disable the ESLint rule because we ar checking env variable statically (not at runtime)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useEffect(() => {\n      let ancestor = ref.current;\n      let ancestorRole;\n\n      do {\n        ancestor = ancestor?.parentElement ?? null;\n        ancestorRole = ancestor?.getAttribute('role');\n        if (ancestor?.classList.contains('fui-MenuGrid')) {\n          if (componentName === 'MenuGridCell') {\n            throw new Error(\n              'MenuGridCell is incorrectly nested within MenuGrid. You probably want to wrap it in a MenuGridRow.',\n            );\n          }\n          break;\n        }\n        if (ancestor?.classList.contains('fui-MenuGridRow') && componentName === 'MenuGridCell') {\n          break;\n        }\n        if (['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(ancestorRole ?? '')) {\n          throw new Error(\n            `${componentName} is incorrectly nested within ${\n              menuItemRoleToNameMapping[ancestorRole as MenuItemRoles]\n            } or within an element with the \"${ancestorRole}\" role.`,\n          );\n        }\n        if (ancestorRole === 'menu') {\n          let message = '';\n          let breakAncestorTraversal = false;\n          switch (componentName) {\n            case 'MenuGrid':\n              if (inline && getMenuOfTrigger(triggerRef.current, targetDocument) === ancestor) {\n                // Handle the case when MenuGrid is inline next to its menu trigger which is a submenu item of the parent menu\n                breakAncestorTraversal = true;\n                break;\n              }\n              message = 'MenuGrid is incorrectly nested within MenuList or within an element with the \"menu\" role.';\n              break;\n            case 'MenuGridCell':\n              message =\n                'MenuGridCell is incorrectly nested within MenuList or within an element with the \"menu\" role. You probably want to wrap it in a MenuGridRow.';\n              break;\n            case 'MenuGridItem':\n              message =\n                'MenuGridItem is incorrectly nested within MenuList or within an element with the \"menu\" role. You probably want to wrap it in a MenuGrid instead.';\n              break;\n            case 'MenuGridRow':\n              message =\n                'MenuGridRow is incorrectly nested within MenuList or within an element with the \"menu\" role. You probably want to wrap it in a MenuGrid instead.';\n              break;\n          }\n          if (breakAncestorTraversal) {\n            break;\n          }\n          throw new Error(message);\n        }\n      } while (ancestor && ancestor !== targetDocument?.body);\n    }, [componentName, ref, triggerRef, inline, targetDocument]);\n  }\n  return ref;\n};\n\nconst getMenuOfTrigger = (trigger: HTMLElement | null, targetDocument?: Document): HTMLElement | null => {\n  let ancestor = trigger?.parentElement;\n  while (ancestor && ancestor !== targetDocument?.body) {\n    if (ancestor?.getAttribute('role') === 'menu') {\n      return ancestor;\n    }\n    ancestor = ancestor?.parentElement ?? null;\n  }\n  return null;\n};\n"],"names":["React","useFluent_unstable","useFluent","useMenuContext_unstable","menuItemRoleToNameMapping","menuitem","menuitemcheckbox","menuitemradio","useValidateNesting","componentName","targetDocument","triggerRef","context","inline","ref","useRef","process","env","NODE_ENV","useEffect","ancestor","current","ancestorRole","parentElement","getAttribute","classList","contains","Error","includes","message","breakAncestorTraversal","getMenuOfTrigger","body","trigger"],"mappings":";;;;+BAeaQ;;;;;;;iEAfU,QAAQ;qCACiB,kCAAkC;2BAG1C,uBAAuB;AAK/D,MAAMJ,4BAA4B;IAChCC,UAAU;IACVC,kBAAkB;IAClBC,eAAe;AACjB;AAEO,2BAA2B,CAACE;IACjC;IAEA,MAAM,EAAEC,cAAc,EAAE,OAAGR,uCAAAA;IAC3B,MAAMS,aAAaR,sCAAAA,EAAwB,CAACS,UAA8BA,QAAQD,UAAU;IAC5F,MAAME,aAASV,kCAAAA,EAAwB,CAACS,UAA8BA,QAAQC,MAAM;IACpF,MAAMC,MAAMd,OAAMe,MAAM,CAAc;IAEtC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,iDAAiD;QACjD,uGAAuG;QACvG,sDAAsD;QACtDlB,OAAMmB,SAAS,CAAC;YACd,IAAIC,WAAWN,IAAIO,OAAO;YAC1B,IAAIC;YAEJ,GAAG;oBACUF;gBAAXA,WAAWA,CAAAA,0BAAAA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUG,aAAAA,AAAa,MAAA,QAAvBH,4BAAAA,KAAAA,IAAAA,0BAA2B;gBACtCE,eAAeF,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUI,YAAY,CAAC;gBACtC,IAAIJ,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUK,SAAS,CAACC,QAAQ,CAAC,iBAAiB;oBAChD,IAAIjB,kBAAkB,gBAAgB;wBACpC,MAAM,IAAIkB,MACR;oBAEJ;oBACA;gBACF;gBACA,IAAIP,CAAAA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUK,SAAS,CAACC,QAAQ,CAAC,kBAAA,KAAsBjB,kBAAkB,gBAAgB;oBACvF;gBACF;gBACA,IAAI;oBAAC;oBAAY;oBAAoB;iBAAgB,CAACmB,QAAQ,CAACN,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,eAAgB,KAAK;oBAClF,MAAM,IAAIK,MACR,GAAGlB,cAAc,8BAA8B,EAC7CL,yBAAyB,CAACkB,aAA8B,CACzD,gCAAgC,EAAEA,aAAa,OAAO,CAAC;gBAE5D;gBACA,IAAIA,iBAAiB,QAAQ;oBAC3B,IAAIO,UAAU;oBACd,IAAIC,yBAAyB;oBAC7B,OAAQrB;wBACN,KAAK;4BACH,IAAII,UAAUkB,iBAAiBpB,WAAWU,OAAO,EAAEX,oBAAoBU,UAAU;gCAC/E,8GAA8G;gCAC9GU,yBAAyB;gCACzB;4BACF;4BACAD,UAAU;4BACV;wBACF,KAAK;4BACHA,UACE;4BACF;wBACF,KAAK;4BACHA,UACE;4BACF;wBACF,KAAK;4BACHA,UACE;4BACF;oBACJ;oBACA,IAAIC,wBAAwB;wBAC1B;oBACF;oBACA,MAAM,IAAIH,MAAME;gBAClB;YACF,QAAST,YAAYA,cAAaV,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBsB,IAAAA,AAAI,EAAE;QAC1D,GAAG;YAACvB;YAAeK;YAAKH;YAAYE;YAAQH;SAAe;IAC7D;IACA,OAAOI;AACT,EAAE;AAEF,MAAMiB,mBAAmB,CAACE,SAA6BvB;IACrD,IAAIU,WAAWa,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASV,aAAa;IACrC,MAAOH,YAAYA,cAAaV,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBsB,IAAAA,AAAI,EAAE;QACpD,IAAIZ,CAAAA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUI,YAAY,CAAC,OAAA,MAAY,QAAQ;YAC7C,OAAOJ;QACT;YACWA;QAAXA,WAAWA,CAAAA,0BAAAA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUG,aAAAA,AAAa,MAAA,QAAvBH,4BAAAA,KAAAA,IAAAA,0BAA2B;IACxC;IACA,OAAO;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu-grid-preview",
-  "version": "0.0.0-nightly-20250918-0406.1",
+  "version": "0.0.0-nightly-20250922-0406.1",
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,18 +19,18 @@
   "license": "MIT",
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20250918-0406.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250918-0406.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20250922-0406.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250922-0406.1",
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-menu": "0.0.0-nightly-20250918-0406.1",
-    "@fluentui/react-table": "0.0.0-nightly-20250918-0406.1",
-    "@fluentui/react-tabster": "0.0.0-nightly-20250918-0406.1",
-    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250918-0406.1",
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20250918-0406.1",
-    "@fluentui/react-theme": "0.0.0-nightly-20250918-0406.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20250918-0406.1",
+    "@fluentui/react-menu": "0.0.0-nightly-20250922-0406.1",
+    "@fluentui/react-table": "0.0.0-nightly-20250922-0406.1",
+    "@fluentui/react-tabster": "0.0.0-nightly-20250922-0406.1",
+    "@fluentui/react-jsx-runtime": "0.0.0-nightly-20250922-0406.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20250922-0406.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20250922-0406.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20250922-0406.1",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },