@fluentui/react-menu-grid-preview 0.5.1 → 0.5.3

package/CHANGELOG.md

@@ -1,21 +1,48 @@
 # Change Log - @fluentui/react-menu-grid-preview
 
-This log was last generated on Thu, 23 Apr 2026 11:59:25 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Jun 2026 11:03:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.5.3)
+
+Wed, 24 Jun 2026 11:03:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.5.2..@fluentui/react-menu-grid-preview_v0.5.3)
+
+### Patches
+
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-menu to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-table to v9.19.17 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-tabster to v9.26.16 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+
+## [0.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.5.2)
+
+Tue, 26 May 2026 09:39:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.5.1..@fluentui/react-menu-grid-preview_v0.5.2)
+
+### Patches
+
+- Bump @fluentui/react-menu to v9.25.0 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-table to v9.19.16 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
 ## [0.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.5.1)
 
-Thu, 23 Apr 2026 11:59:25 GMT 
+Thu, 23 Apr 2026 14:21:13 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.5.0..@fluentui/react-menu-grid-preview_v0.5.1)
 
 ### Patches
 
-- Bump @fluentui/react-menu to v9.24.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-table to v9.19.15 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-tabster to v9.26.14 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-menu to v9.24.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-table to v9.19.15 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 
 ## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.5.0)
 

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

@@ -24,9 +24,8 @@ const useStyles = /*#__PURE__*/__styles({
  * Apply styling to the Menu slots based on the state
  */
 export const useMenuGridStyles_unstable = state => {
-  'use no memo';
-
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(menuGridClassNames.root, styles.root, state.root.className);
   return state;
 };

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":["'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":[]}
+{"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    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\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,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1B;EACAW,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

@@ -16,8 +16,8 @@ const useStyles = makeStyles({
 /**
  * Apply styling to the Menu slots based on the state
  */ export const useMenuGridStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(menuGridClassNames.root, styles.root, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"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"}
+{"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  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\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,MAAMC,SAASR;IACf,oDAAoD;IACpDO,MAAMR,IAAI,CAACU,SAAS,GAAGb,aAAaE,mBAAmBC,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAC9F,OAAOF;AACT,EAAE"}

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

@@ -18,9 +18,8 @@ const useRootStyles = /*#__PURE__*/__styles({
   d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1pha7fy{min-height:24px;}", ".f1euv43f{position:absolute;}"]
 });
 export const useMenuGridCellStyles_unstable = state => {
-  'use no memo';
-
   const rootStyles = useRootStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(menuGridCellClassNames.root, rootStyles.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","menuGridCellClassNames","root","useRootStyles","mc9l5x","Bt984gj","B7ck84d","sshi5w","visuallyHidden","qhf8xq","d","useMenuGridCellStyles_unstable","state","rootStyles","className"],"sources":["useMenuGridCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const menuGridCellClassNames = {\n    root: 'fui-MenuGridCell'\n};\nconst useRootStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        boxSizing: 'border-box',\n        minHeight: '24px'\n    },\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, rootStyles.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,UAAU,GAAGV,aAAa,CAAC,CAAC;EAClCS,KAAK,CAACV,IAAI,CAACY,SAAS,GAAGd,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEW,UAAU,CAACX,IAAI,EAAEU,KAAK,CAACJ,cAAc,IAAIK,UAAU,CAACL,cAAc,EAAEI,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;EAC1J,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","menuGridCellClassNames","root","useRootStyles","mc9l5x","Bt984gj","B7ck84d","sshi5w","visuallyHidden","qhf8xq","d","useMenuGridCellStyles_unstable","state","rootStyles","className"],"sources":["useMenuGridCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const menuGridCellClassNames = {\n    root: 'fui-MenuGridCell'\n};\nconst useRootStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        boxSizing: 'border-box',\n        minHeight: '24px'\n    },\n    visuallyHidden: {\n        position: 'absolute'\n    }\n});\nexport const useMenuGridCellStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuGridCellClassNames.root, rootStyles.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACnD,MAAMC,UAAU,GAAGV,aAAa,CAAC,CAAC;EAClC;EACAS,KAAK,CAACV,IAAI,CAACY,SAAS,GAAGd,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEW,UAAU,CAACX,IAAI,EAAEU,KAAK,CAACJ,cAAc,IAAIK,UAAU,CAACL,cAAc,EAAEI,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;EAC1J,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -15,8 +15,8 @@ const useRootStyles = makeStyles({
     }
 });
 export const useMenuGridCellStyles_unstable = (state)=>{
-    'use no memo';
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(menuGridCellClassNames.root, rootStyles.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCellStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } 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  root: {\n    display: 'flex',\n    alignItems: 'center',\n\n    boxSizing: 'border-box',\n    minHeight: '24px', // To match small button size\n  },\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    rootStyles.root,\n    state.visuallyHidden && rootStyles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","menuGridCellClassNames","root","useRootStyles","display","alignItems","boxSizing","minHeight","visuallyHidden","position","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBJ,WAAW;IAC/BG,MAAM;QACJE,SAAS;QACTC,YAAY;QAEZC,WAAW;QACXC,WAAW;IACb;IACAC,gBAAgB;QACdC,UAAU;IACZ;AACF;AAEA,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,aAAaT;IACnBQ,MAAMT,IAAI,CAACW,SAAS,GAAGb,aACrBC,uBAAuBC,IAAI,EAC3BU,WAAWV,IAAI,EACfS,MAAMH,cAAc,IAAII,WAAWJ,cAAc,EACjDG,MAAMT,IAAI,CAACW,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 { makeStyles, mergeClasses } 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  root: {\n    display: 'flex',\n    alignItems: 'center',\n\n    boxSizing: 'border-box',\n    minHeight: '24px', // To match small button size\n  },\n  visuallyHidden: {\n    position: 'absolute',\n  },\n});\n\nexport const useMenuGridCellStyles_unstable = (state: MenuGridCellState): MenuGridCellState => {\n  const rootStyles = useRootStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    menuGridCellClassNames.root,\n    rootStyles.root,\n    state.visuallyHidden && rootStyles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","menuGridCellClassNames","root","useRootStyles","display","alignItems","boxSizing","minHeight","visuallyHidden","position","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBJ,WAAW;IAC/BG,MAAM;QACJE,SAAS;QACTC,YAAY;QAEZC,WAAW;QACXC,WAAW;IACb;IACAC,gBAAgB;QACdC,UAAU;IACZ;AACF;AAEA,OAAO,MAAMC,iCAAiC,CAACC;IAC7C,MAAMC,aAAaT;IACnB,oDAAoD;IACpDQ,MAAMT,IAAI,CAACW,SAAS,GAAGb,aACrBC,uBAAuBC,IAAI,EAC3BU,WAAWV,IAAI,EACfS,MAAMH,cAAc,IAAII,WAAWJ,cAAc,EACjDG,MAAMT,IAAI,CAACW,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib/components/MenuGridGroup/useMenuGridGroupStyles.styles.js

@@ -3,8 +3,6 @@ export const menuGridGroupClassNames = {
   root: 'fui-MenuGridGroup'
 };
 export const useMenuGridGroupStyles_unstable = state => {
-  'use no memo';
-
   state.root.className = mergeClasses(menuGridGroupClassNames.root, state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","menuGridGroupClassNames","root","useMenuGridGroupStyles_unstable","state","className"],"sources":["useMenuGridGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const menuGridGroupClassNames = {\n    root: 'fui-MenuGridGroup'\n};\nexport const useMenuGridGroupStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(menuGridGroupClassNames.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACbA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,uBAAuB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EACvF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","menuGridGroupClassNames","root","useMenuGridGroupStyles_unstable","state","className"],"sources":["useMenuGridGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const menuGridGroupClassNames = {\n    root: 'fui-MenuGridGroup'\n};\nexport const useMenuGridGroupStyles_unstable = (state)=>{\n    state.root.className = mergeClasses(menuGridGroupClassNames.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE;AACV,CAAC;AACD,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACpDA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,uBAAuB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EACvF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MenuGridGroup/useMenuGridGroupStyles.styles.raw.js

@@ -3,7 +3,6 @@ export const menuGridGroupClassNames = {
     root: 'fui-MenuGridGroup'
 };
 export const useMenuGridGroupStyles_unstable = (state)=>{
-    'use no memo';
     state.root.className = mergeClasses(menuGridGroupClassNames.root, state.root.className);
     return state;
 };

package/lib/components/MenuGridGroup/useMenuGridGroupStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridGroup/useMenuGridGroupStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGridGroupSlots, MenuGridGroupState } from './MenuGridGroup.types';\n\nexport const menuGridGroupClassNames: SlotClassNames<MenuGridGroupSlots> = {\n  root: 'fui-MenuGridGroup',\n};\n\nexport const useMenuGridGroupStyles_unstable = (state: MenuGridGroupState): MenuGridGroupState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(menuGridGroupClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","menuGridGroupClassNames","root","useMenuGridGroupStyles_unstable","state","className"],"mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEAA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,wBAAwBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAEtF,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGridGroup/useMenuGridGroupStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGridGroupSlots, MenuGridGroupState } from './MenuGridGroup.types';\n\nexport const menuGridGroupClassNames: SlotClassNames<MenuGridGroupSlots> = {\n  root: 'fui-MenuGridGroup',\n};\n\nexport const useMenuGridGroupStyles_unstable = (state: MenuGridGroupState): MenuGridGroupState => {\n  state.root.className = mergeClasses(menuGridGroupClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","menuGridGroupClassNames","root","useMenuGridGroupStyles_unstable","state","className"],"mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,0BAA8D;IACzEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,kCAAkC,CAACC;IAC9CA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,wBAAwBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAEtF,OAAOD;AACT,EAAE"}

package/lib/components/MenuGridGroupHeader/useMenuGridGroupHeaderStyles.styles.js

@@ -20,9 +20,8 @@ const useStyles = /*#__PURE__*/__styles({
   d: [".fy9rknc{font-size:var(--fontSizeBase200);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f177v4lu{padding-left:8px;}", ".f19lj068{padding-right:8px;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1d2rq10{height:32px;}", ".f22iagw{display:flex;}", ".f122n59{align-items:center;}"]
 });
 export const useMenuGridGroupHeaderStyles_unstable = state => {
-  'use no memo';
-
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(menuGridGroupHeaderClassNames.root, styles.root, state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","menuGridGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGridGroupHeaderStyles_unstable","state","styles","className"],"sources":["useMenuGridGroupHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGridGroupHeaderClassNames = {\n    root: 'fui-MenuGridGroupHeader'\n};\nconst useStyles = makeStyles({\n    root: {\n        fontSize: tokens.fontSizeBase200,\n        color: tokens.colorNeutralForeground3,\n        paddingLeft: '8px',\n        paddingRight: '8px',\n        fontWeight: tokens.fontWeightSemibold,\n        height: '32px',\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\nexport const useMenuGridGroupHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuGridGroupHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,6BAA6B,GAAG;EACzCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWjB,CAAC;AACF,OAAO,MAAMC,qCAAqC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGjB,YAAY,CAACE,6BAA6B,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAC1G,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","menuGridGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGridGroupHeaderStyles_unstable","state","styles","className"],"sources":["useMenuGridGroupHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGridGroupHeaderClassNames = {\n    root: 'fui-MenuGridGroupHeader'\n};\nconst useStyles = makeStyles({\n    root: {\n        fontSize: tokens.fontSizeBase200,\n        color: tokens.colorNeutralForeground3,\n        paddingLeft: '8px',\n        paddingRight: '8px',\n        fontWeight: tokens.fontWeightSemibold,\n        height: '32px',\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\nexport const useMenuGridGroupHeaderStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuGridGroupHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,6BAA6B,GAAG;EACzCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWjB,CAAC;AACF,OAAO,MAAMC,qCAAqC,GAAIC,KAAK,IAAG;EAC1D,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;EAC1B;EACAW,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGjB,YAAY,CAACE,6BAA6B,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EAC1G,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MenuGridGroupHeader/useMenuGridGroupHeaderStyles.styles.raw.js

@@ -17,8 +17,8 @@ const useStyles = makeStyles({
     }
 });
 export const useMenuGridGroupHeaderStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(menuGridGroupHeaderClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib/components/MenuGridGroupHeader/useMenuGridGroupHeaderStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridGroupHeader/useMenuGridGroupHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { MenuGridGroupHeaderSlots, MenuGridGroupHeaderState } from './MenuGridGroupHeader.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const menuGridGroupHeaderClassNames: SlotClassNames<MenuGridGroupHeaderSlots> = {\n  root: 'fui-MenuGridGroupHeader',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '8px',\n    paddingRight: '8px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGridGroupHeaderStyles_unstable = (state: MenuGridGroupHeaderState): MenuGridGroupHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGridGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","menuGridGroupHeaderClassNames","root","useStyles","fontSize","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","useMenuGridGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,gCAA0E;IACrFC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,UAAUJ,OAAOK,eAAe;QAChCC,OAAON,OAAOO,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYV,OAAOW,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEA,OAAO,MAAMC,wCAAwC,CAACC;IACpD;IAEA,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,GAAGnB,aAAaE,8BAA8BC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAEzG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGridGroupHeader/useMenuGridGroupHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { MenuGridGroupHeaderSlots, MenuGridGroupHeaderState } from './MenuGridGroupHeader.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const menuGridGroupHeaderClassNames: SlotClassNames<MenuGridGroupHeaderSlots> = {\n  root: 'fui-MenuGridGroupHeader',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '8px',\n    paddingRight: '8px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGridGroupHeaderStyles_unstable = (state: MenuGridGroupHeaderState): MenuGridGroupHeaderState => {\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(menuGridGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","menuGridGroupHeaderClassNames","root","useStyles","fontSize","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","useMenuGridGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,gCAA0E;IACrFC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,UAAUJ,OAAOK,eAAe;QAChCC,OAAON,OAAOO,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYV,OAAOW,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEA,OAAO,MAAMC,wCAAwC,CAACC;IACpD,MAAMC,SAASd;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACgB,SAAS,GAAGnB,aAAaE,8BAA8BC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAEzG,OAAOF;AACT,EAAE"}

package/lib/components/MenuGridItem/useMenuGridItemStyles.styles.js

@@ -28,23 +28,27 @@ const useStyles = /*#__PURE__*/__styles({
   d: [".fqerorx{flex-grow:1;}", ".f1l02sjl{height:100%;}", ".fy77jfu{min-width:0;}"]
 });
 export const useMenuGridItemStyles_unstable = state => {
-  'use no memo';
-
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);
   if (state.icon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(menuGridItemClassNames.icon, styles.icon, state.icon.className);
   }
   if (state.content) {
+    // eslint-disable-next-line react-hooks/immutability
     state.content.className = mergeClasses(menuGridItemClassNames.content, styles.content, state.content.className);
   }
   if (state.subText) {
+    // eslint-disable-next-line react-hooks/immutability
     state.subText.className = mergeClasses(menuGridItemClassNames.subText, state.subText.className);
   }
   if (state.firstSubAction) {
+    // eslint-disable-next-line react-hooks/immutability
     state.firstSubAction.className = mergeClasses(menuGridItemClassNames.firstSubAction, styles.firstSubAction, state.firstSubAction.className);
   }
   if (state.secondSubAction) {
+    // eslint-disable-next-line react-hooks/immutability
     state.secondSubAction.className = mergeClasses(menuGridItemClassNames.secondSubAction, styles.secondSubAction, state.secondSubAction.className);
   }
   return state;

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useStyles","Bh6795r","Bqenvij","Bf4jedk","d","useMenuGridItemStyles_unstable","state","styles","className"],"sources":["useMenuGridItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const menuGridItemClassNames = {\n    root: 'fui-MenuGridItem',\n    icon: 'fui-MenuGridItem__icon',\n    content: 'fui-MenuGridItem__content',\n    subText: 'fui-MenuGridItem__subText',\n    firstSubAction: 'fui-MenuGridItem__firstSubAction',\n    secondSubAction: 'fui-MenuGridItem__secondSubAction'\n};\nconst useStyles = makeStyles({\n    content: {\n        flexGrow: 1,\n        height: '100%',\n        minWidth: 0\n    },\n    icon: {\n        height: '100%'\n    },\n    firstSubAction: {\n        height: '100%'\n    },\n    secondSubAction: {\n        height: '100%'\n    }\n});\nexport const useMenuGridItemStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuGridItemClassNames.icon, styles.icon, state.icon.className);\n    }\n    if (state.content) {\n        state.content.className = mergeClasses(menuGridItemClassNames.content, styles.content, state.content.className);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuGridItemClassNames.subText, state.subText.className);\n    }\n    if (state.firstSubAction) {\n        state.firstSubAction.className = mergeClasses(menuGridItemClassNames.firstSubAction, styles.firstSubAction, state.firstSubAction.className);\n    }\n    if (state.secondSubAction) {\n        state.secondSubAction.className = mergeClasses(menuGridItemClassNames.secondSubAction, styles.secondSubAction, state.secondSubAction.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE,wBAAwB;EAC9BC,OAAO,EAAE,2BAA2B;EACpCC,OAAO,EAAE,2BAA2B;EACpCC,cAAc,EAAE,kCAAkC;EAClDC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,gBAAGT,QAAA;EAAAK,OAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAR,IAAA;IAAAO,OAAA;EAAA;EAAAJ,cAAA;IAAAI,OAAA;EAAA;EAAAH,eAAA;IAAAG,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAejB,CAAC;AACF,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGhB,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACtF,IAAIF,KAAK,CAACX,IAAI,EAAE;IACZW,KAAK,CAACX,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACC,sBAAsB,CAACE,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACa,SAAS,CAAC;EACvG;EACA,IAAIF,KAAK,CAACV,OAAO,EAAE;IACfU,KAAK,CAACV,OAAO,CAACY,SAAS,GAAGhB,YAAY,CAACC,sBAAsB,CAACG,OAAO,EAAEW,MAAM,CAACX,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACY,SAAS,CAAC;EACnH;EACA,IAAIF,KAAK,CAACT,OAAO,EAAE;IACfS,KAAK,CAACT,OAAO,CAACW,SAAS,GAAGhB,YAAY,CAACC,sBAAsB,CAACI,OAAO,EAAES,KAAK,CAACT,OAAO,CAACW,SAAS,CAAC;EACnG;EACA,IAAIF,KAAK,CAACR,cAAc,EAAE;IACtBQ,KAAK,CAACR,cAAc,CAACU,SAAS,GAAGhB,YAAY,CAACC,sBAAsB,CAACK,cAAc,EAAES,MAAM,CAACT,cAAc,EAAEQ,KAAK,CAACR,cAAc,CAACU,SAAS,CAAC;EAC/I;EACA,IAAIF,KAAK,CAACP,eAAe,EAAE;IACvBO,KAAK,CAACP,eAAe,CAACS,SAAS,GAAGhB,YAAY,CAACC,sBAAsB,CAACM,eAAe,EAAEQ,MAAM,CAACR,eAAe,EAAEO,KAAK,CAACP,eAAe,CAACS,SAAS,CAAC;EACnJ;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useStyles","Bh6795r","Bqenvij","Bf4jedk","d","useMenuGridItemStyles_unstable","state","styles","className"],"sources":["useMenuGridItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const menuGridItemClassNames = {\n    root: 'fui-MenuGridItem',\n    icon: 'fui-MenuGridItem__icon',\n    content: 'fui-MenuGridItem__content',\n    subText: 'fui-MenuGridItem__subText',\n    firstSubAction: 'fui-MenuGridItem__firstSubAction',\n    secondSubAction: 'fui-MenuGridItem__secondSubAction'\n};\nconst useStyles = makeStyles({\n    content: {\n        flexGrow: 1,\n        height: '100%',\n        minWidth: 0\n    },\n    icon: {\n        height: '100%'\n    },\n    firstSubAction: {\n        height: '100%'\n    },\n    secondSubAction: {\n        height: '100%'\n    }\n});\nexport const useMenuGridItemStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(menuGridItemClassNames.icon, styles.icon, state.icon.className);\n    }\n    if (state.content) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.content.className = mergeClasses(menuGridItemClassNames.content, styles.content, state.content.className);\n    }\n    if (state.subText) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.subText.className = mergeClasses(menuGridItemClassNames.subText, state.subText.className);\n    }\n    if (state.firstSubAction) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.firstSubAction.className = mergeClasses(menuGridItemClassNames.firstSubAction, styles.firstSubAction, state.firstSubAction.className);\n    }\n    if (state.secondSubAction) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.secondSubAction.className = mergeClasses(menuGridItemClassNames.secondSubAction, styles.secondSubAction, state.secondSubAction.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE,wBAAwB;EAC9BC,OAAO,EAAE,2BAA2B;EACpCC,OAAO,EAAE,2BAA2B;EACpCC,cAAc,EAAE,kCAAkC;EAClDC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,gBAAGT,QAAA;EAAAK,OAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAR,IAAA;IAAAO,OAAA;EAAA;EAAAJ,cAAA;IAAAI,OAAA;EAAA;EAAAH,eAAA;IAAAG,OAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAejB,CAAC;AACF,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACnD,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1B;EACAM,KAAK,CAACZ,IAAI,CAACc,SAAS,GAAGhB,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;EACtF,IAAIF,KAAK,CAACX,IAAI,EAAE;IACZ;IACAW,KAAK,CAACX,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACC,sBAAsB,CAACE,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACa,SAAS,CAAC;EACvG;EACA,IAAIF,KAAK,CAACV,OAAO,EAAE;IACf;IACAU,KAAK,CAACV,OAAO,CAACY,SAAS,GAAGhB,YAAY,CAACC,sBAAsB,CAACG,OAAO,EAAEW,MAAM,CAACX,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACY,SAAS,CAAC;EACnH;EACA,IAAIF,KAAK,CAACT,OAAO,EAAE;IACf;IACAS,KAAK,CAACT,OAAO,CAACW,SAAS,GAAGhB,YAAY,CAACC,sBAAsB,CAACI,OAAO,EAAES,KAAK,CAACT,OAAO,CAACW,SAAS,CAAC;EACnG;EACA,IAAIF,KAAK,CAACR,cAAc,EAAE;IACtB;IACAQ,KAAK,CAACR,cAAc,CAACU,SAAS,GAAGhB,YAAY,CAACC,sBAAsB,CAACK,cAAc,EAAES,MAAM,CAACT,cAAc,EAAEQ,KAAK,CAACR,cAAc,CAACU,SAAS,CAAC;EAC/I;EACA,IAAIF,KAAK,CAACP,eAAe,EAAE;IACvB;IACAO,KAAK,CAACP,eAAe,CAACS,SAAS,GAAGhB,YAAY,CAACC,sBAAsB,CAACM,eAAe,EAAEQ,MAAM,CAACR,eAAe,EAAEO,KAAK,CAACP,eAAe,CAACS,SAAS,CAAC;EACnJ;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MenuGridItem/useMenuGridItemStyles.styles.raw.js

@@ -25,22 +25,27 @@ const useStyles = makeStyles({
     }
 });
 export const useMenuGridItemStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(menuGridItemClassNames.icon, styles.icon, state.icon.className);
     }
     if (state.content) {
+        // eslint-disable-next-line react-hooks/immutability
         state.content.className = mergeClasses(menuGridItemClassNames.content, styles.content, state.content.className);
     }
     if (state.subText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.subText.className = mergeClasses(menuGridItemClassNames.subText, state.subText.className);
     }
     if (state.firstSubAction) {
+        // eslint-disable-next-line react-hooks/immutability
         state.firstSubAction.className = mergeClasses(menuGridItemClassNames.firstSubAction, styles.firstSubAction, state.firstSubAction.className);
     }
     if (state.secondSubAction) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondSubAction.className = mergeClasses(menuGridItemClassNames.secondSubAction, styles.secondSubAction, state.secondSubAction.className);
     }
     return state;

package/lib/components/MenuGridItem/useMenuGridItemStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridItem/useMenuGridItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { MenuGridItemSlots, MenuGridItemState } from './MenuGridItem.types';\n\nexport const menuGridItemClassNames: SlotClassNames<MenuGridItemSlots> = {\n  root: 'fui-MenuGridItem',\n  icon: 'fui-MenuGridItem__icon',\n  content: 'fui-MenuGridItem__content',\n  subText: 'fui-MenuGridItem__subText',\n  firstSubAction: 'fui-MenuGridItem__firstSubAction',\n  secondSubAction: 'fui-MenuGridItem__secondSubAction',\n};\n\nconst useStyles = makeStyles({\n  content: {\n    flexGrow: 1,\n    height: '100%', // ensures content stay centered vertically when menu item's height is overridden\n    minWidth: 0,\n  },\n  icon: {\n    height: '100%',\n  },\n  firstSubAction: {\n    height: '100%',\n  },\n  secondSubAction: {\n    height: '100%',\n  },\n});\n\nexport const useMenuGridItemStyles_unstable = (state: MenuGridItemState): MenuGridItemState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuGridItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuGridItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.subText) {\n    state.subText.className = mergeClasses(menuGridItemClassNames.subText, state.subText.className);\n  }\n\n  if (state.firstSubAction) {\n    state.firstSubAction.className = mergeClasses(\n      menuGridItemClassNames.firstSubAction,\n      styles.firstSubAction,\n      state.firstSubAction.className,\n    );\n  }\n  if (state.secondSubAction) {\n    state.secondSubAction.className = mergeClasses(\n      menuGridItemClassNames.secondSubAction,\n      styles.secondSubAction,\n      state.secondSubAction.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useStyles","flexGrow","height","minWidth","useMenuGridItemStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;IACNC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,gBAAgB;IAChBC,iBAAiB;AACnB,EAAE;AAEF,MAAMC,YAAYT,WAAW;IAC3BK,SAAS;QACPK,UAAU;QACVC,QAAQ;QACRC,UAAU;IACZ;IACAR,MAAM;QACJO,QAAQ;IACV;IACAJ,gBAAgB;QACdI,QAAQ;IACV;IACAH,iBAAiB;QACfG,QAAQ;IACV;AACF;AAEA,OAAO,MAAME,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAASN;IAEfK,MAAMX,IAAI,CAACa,SAAS,GAAGf,aAAaC,uBAAuBC,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAErF,IAAIF,MAAMV,IAAI,EAAE;QACdU,MAAMV,IAAI,CAACY,SAAS,GAAGf,aAAaC,uBAAuBE,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACpG;IAEA,IAAIF,MAAMT,OAAO,EAAE;QACjBS,MAAMT,OAAO,CAACW,SAAS,GAAGf,aAAaC,uBAAuBG,OAAO,EAAEU,OAAOV,OAAO,EAAES,MAAMT,OAAO,CAACW,SAAS;IAChH;IAEA,IAAIF,MAAMR,OAAO,EAAE;QACjBQ,MAAMR,OAAO,CAACU,SAAS,GAAGf,aAAaC,uBAAuBI,OAAO,EAAEQ,MAAMR,OAAO,CAACU,SAAS;IAChG;IAEA,IAAIF,MAAMP,cAAc,EAAE;QACxBO,MAAMP,cAAc,CAACS,SAAS,GAAGf,aAC/BC,uBAAuBK,cAAc,EACrCQ,OAAOR,cAAc,EACrBO,MAAMP,cAAc,CAACS,SAAS;IAElC;IACA,IAAIF,MAAMN,eAAe,EAAE;QACzBM,MAAMN,eAAe,CAACQ,SAAS,GAAGf,aAChCC,uBAAuBM,eAAe,EACtCO,OAAOP,eAAe,EACtBM,MAAMN,eAAe,CAACQ,SAAS;IAEnC;IAEA,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGridItem/useMenuGridItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { MenuGridItemSlots, MenuGridItemState } from './MenuGridItem.types';\n\nexport const menuGridItemClassNames: SlotClassNames<MenuGridItemSlots> = {\n  root: 'fui-MenuGridItem',\n  icon: 'fui-MenuGridItem__icon',\n  content: 'fui-MenuGridItem__content',\n  subText: 'fui-MenuGridItem__subText',\n  firstSubAction: 'fui-MenuGridItem__firstSubAction',\n  secondSubAction: 'fui-MenuGridItem__secondSubAction',\n};\n\nconst useStyles = makeStyles({\n  content: {\n    flexGrow: 1,\n    height: '100%', // ensures content stay centered vertically when menu item's height is overridden\n    minWidth: 0,\n  },\n  icon: {\n    height: '100%',\n  },\n  firstSubAction: {\n    height: '100%',\n  },\n  secondSubAction: {\n    height: '100%',\n  },\n});\n\nexport const useMenuGridItemStyles_unstable = (state: MenuGridItemState): MenuGridItemState => {\n  const styles = useStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(menuGridItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.content) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.content.className = mergeClasses(menuGridItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.subText) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.subText.className = mergeClasses(menuGridItemClassNames.subText, state.subText.className);\n  }\n\n  if (state.firstSubAction) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.firstSubAction.className = mergeClasses(\n      menuGridItemClassNames.firstSubAction,\n      styles.firstSubAction,\n      state.firstSubAction.className,\n    );\n  }\n  if (state.secondSubAction) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondSubAction.className = mergeClasses(\n      menuGridItemClassNames.secondSubAction,\n      styles.secondSubAction,\n      state.secondSubAction.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useStyles","flexGrow","height","minWidth","useMenuGridItemStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;IACNC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,gBAAgB;IAChBC,iBAAiB;AACnB,EAAE;AAEF,MAAMC,YAAYT,WAAW;IAC3BK,SAAS;QACPK,UAAU;QACVC,QAAQ;QACRC,UAAU;IACZ;IACAR,MAAM;QACJO,QAAQ;IACV;IACAJ,gBAAgB;QACdI,QAAQ;IACV;IACAH,iBAAiB;QACfG,QAAQ;IACV;AACF;AAEA,OAAO,MAAME,iCAAiC,CAACC;IAC7C,MAAMC,SAASN;IAEf,oDAAoD;IACpDK,MAAMX,IAAI,CAACa,SAAS,GAAGf,aAAaC,uBAAuBC,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAErF,IAAIF,MAAMV,IAAI,EAAE;QACd,oDAAoD;QACpDU,MAAMV,IAAI,CAACY,SAAS,GAAGf,aAAaC,uBAAuBE,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACpG;IAEA,IAAIF,MAAMT,OAAO,EAAE;QACjB,oDAAoD;QACpDS,MAAMT,OAAO,CAACW,SAAS,GAAGf,aAAaC,uBAAuBG,OAAO,EAAEU,OAAOV,OAAO,EAAES,MAAMT,OAAO,CAACW,SAAS;IAChH;IAEA,IAAIF,MAAMR,OAAO,EAAE;QACjB,oDAAoD;QACpDQ,MAAMR,OAAO,CAACU,SAAS,GAAGf,aAAaC,uBAAuBI,OAAO,EAAEQ,MAAMR,OAAO,CAACU,SAAS;IAChG;IAEA,IAAIF,MAAMP,cAAc,EAAE;QACxB,oDAAoD;QACpDO,MAAMP,cAAc,CAACS,SAAS,GAAGf,aAC/BC,uBAAuBK,cAAc,EACrCQ,OAAOR,cAAc,EACrBO,MAAMP,cAAc,CAACS,SAAS;IAElC;IACA,IAAIF,MAAMN,eAAe,EAAE;QACzB,oDAAoD;QACpDM,MAAMN,eAAe,CAACQ,SAAS,GAAGf,aAChCC,uBAAuBM,eAAe,EACtCO,OAAOP,eAAe,EACtBM,MAAMN,eAAe,CAACQ,SAAS;IAEnC;IAEA,OAAOF;AACT,EAAE"}

package/lib/components/MenuGridRow/useCharacterSearch.js

@@ -6,7 +6,7 @@ import { useMenuGridContext_unstable } from '../../contexts/menuGridContext';
  * When a single character key is pressed, it delegates to the grid-level `setFocusByFirstCharacter`
  * callback which finds and focuses the next row starting with that character.
  */ export const useCharacterSearch = ()=>{
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize useCharacterSearch — manual opt-out to preserve runtime behavior
     const characterSearchRef = React.useRef(null);
     const { setFocusByFirstCharacter } = useMenuGridContext_unstable();
     const characterSearchOnKeyDown = (e)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridRow/useCharacterSearch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridContext_unstable } from '../../contexts/menuGridContext';\n\n/**\n * Returns the MenuGridRow's `onKeyDown` handler to support first-letter navigation.\n * When a single character key is pressed, it delegates to the grid-level `setFocusByFirstCharacter`\n * callback which finds and focuses the next row starting with that character.\n */\nexport const useCharacterSearch = (): {\n  characterSearchOnKeyDown: React.KeyboardEventHandler<HTMLElement>;\n  characterSearchRef: React.RefObject<HTMLElement | null>;\n} => {\n  'use no memo';\n\n  const characterSearchRef = React.useRef<HTMLDivElement>(null);\n\n  const { setFocusByFirstCharacter } = useMenuGridContext_unstable();\n\n  const characterSearchOnKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key?.length > 1) {\n      return;\n    }\n\n    if (characterSearchRef.current) {\n      setFocusByFirstCharacter?.(e, characterSearchRef.current);\n    }\n  };\n\n  return { characterSearchOnKeyDown, characterSearchRef };\n};\n"],"names":["React","useMenuGridContext_unstable","useCharacterSearch","characterSearchRef","useRef","setFocusByFirstCharacter","characterSearchOnKeyDown","e","key","length","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB;IAIhC;IAEA,MAAMC,qBAAqBH,MAAMI,MAAM,CAAiB;IAExD,MAAM,EAAEC,wBAAwB,EAAE,GAAGJ;IAErC,MAAMK,2BAA2B,CAACC;YAC5BA;QAAJ,IAAIA,EAAAA,SAAAA,EAAEC,GAAG,cAALD,6BAAAA,OAAOE,MAAM,IAAG,GAAG;YACrB;QACF;QAEA,IAAIN,mBAAmBO,OAAO,EAAE;YAC9BL,qCAAAA,+CAAAA,yBAA2BE,GAAGJ,mBAAmBO,OAAO;QAC1D;IACF;IAEA,OAAO;QAAEJ;QAA0BH;IAAmB;AACxD,EAAE"}
+{"version":3,"sources":["../src/components/MenuGridRow/useCharacterSearch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridContext_unstable } from '../../contexts/menuGridContext';\n\n/**\n * Returns the MenuGridRow's `onKeyDown` handler to support first-letter navigation.\n * When a single character key is pressed, it delegates to the grid-level `setFocusByFirstCharacter`\n * callback which finds and focuses the next row starting with that character.\n */\nexport const useCharacterSearch = (): {\n  characterSearchOnKeyDown: React.KeyboardEventHandler<HTMLElement>;\n  characterSearchRef: React.RefObject<HTMLElement | null>;\n} => {\n  'use no memo'; // justified: compiler would optimize useCharacterSearch — manual opt-out to preserve runtime behavior\n\n  const characterSearchRef = React.useRef<HTMLDivElement>(null);\n\n  const { setFocusByFirstCharacter } = useMenuGridContext_unstable();\n\n  const characterSearchOnKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key?.length > 1) {\n      return;\n    }\n\n    if (characterSearchRef.current) {\n      setFocusByFirstCharacter?.(e, characterSearchRef.current);\n    }\n  };\n\n  return { characterSearchOnKeyDown, characterSearchRef };\n};\n"],"names":["React","useMenuGridContext_unstable","useCharacterSearch","characterSearchRef","useRef","setFocusByFirstCharacter","characterSearchOnKeyDown","e","key","length","current"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E;;;;CAIC,GACD,OAAO,MAAMC,qBAAqB;IAIhC,eAAe,sGAAsG;IAErH,MAAMC,qBAAqBH,MAAMI,MAAM,CAAiB;IAExD,MAAM,EAAEC,wBAAwB,EAAE,GAAGJ;IAErC,MAAMK,2BAA2B,CAACC;YAC5BA;QAAJ,IAAIA,EAAAA,SAAAA,EAAEC,GAAG,cAALD,6BAAAA,OAAOE,MAAM,IAAG,GAAG;YACrB;QACF;QAEA,IAAIN,mBAAmBO,OAAO,EAAE;YAC9BL,qCAAAA,+CAAAA,yBAA2BE,GAAGJ,mBAAmBO,OAAO;QAC1D;IACF;IAEA,OAAO;QAAEJ;QAA0BH;IAAmB;AACxD,EAAE"}

package/lib/components/MenuGridRow/useMenuGridRowStyles.styles.js

@@ -14,9 +14,8 @@ const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1j5mkl8", "ro8804w", {
   s: ["@media (forced-colors: active){.r1j5mkl8[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r1j5mkl8:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.r1j5mkl8:focus{outline-style:none;}.r1j5mkl8:focus-visible{outline-style:none;}.r1j5mkl8[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}@media (forced-colors: active){.r1j5mkl8[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}.r1j5mkl8[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}}", "@media (forced-colors: active){.ro8804w[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}", "@media (forced-colors: active){.ro8804w:hover{background-color:Canvas;border-color:Highlight;color:Highlight;}.ro8804w:focus{outline-style:none;}.ro8804w:focus-visible{outline-style:none;}.ro8804w[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}@media (forced-colors: active){.ro8804w[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}.ro8804w[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid Highlight;border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}}"]
 });
 export const useMenuGridRowStyles_unstable = state => {
-  'use no memo';
-
   const rootBaseStyles = useRootBaseStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(menuGridRowClassNames.root, rootBaseStyles, state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","__resetStyles","iconFilledClassName","iconRegularClassName","tokens","createFocusOutlineStyle","menuGridRowClassNames","root","useRootBaseStyles","r","s","useMenuGridRowStyles_unstable","state","rootBaseStyles","className"],"sources":["useMenuGridRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const menuGridRowClassNames = {\n    root: 'fui-MenuGridRow'\n};\n// Base styles similar to regular menu item\n// Right now ecludes icon color, hover active style for secondary text\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalSNudge}`,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    userSelect: 'none',\n    ...createFocusOutlineStyle(),\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    }\n});\nexport const useMenuGridRowStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseStyles = useRootBaseStyles();\n    state.root.className = mergeClasses(menuGridRowClassNames.root, rootBaseStyles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,aAAA,QAAyB,gBAAgB;AAC9D,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA,MAAMC,iBAAiB,gBAAGP,aAAA;EAAAQ,CAAA;EAAAC,CAAA;AAAA,CA4CzB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,cAAc,GAAGL,iBAAiB,CAAC,CAAC;EAC1CI,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGd,YAAY,CAACM,qBAAqB,CAACC,IAAI,EAAEM,cAAc,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["mergeClasses","__resetStyles","iconFilledClassName","iconRegularClassName","tokens","createFocusOutlineStyle","menuGridRowClassNames","root","useRootBaseStyles","r","s","useMenuGridRowStyles_unstable","state","rootBaseStyles","className"],"sources":["useMenuGridRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const menuGridRowClassNames = {\n    root: 'fui-MenuGridRow'\n};\n// Base styles similar to regular menu item\n// Right now ecludes icon color, hover active style for secondary text\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalSNudge}`,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    userSelect: 'none',\n    ...createFocusOutlineStyle(),\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    }\n});\nexport const useMenuGridRowStyles_unstable = (state)=>{\n    const rootBaseStyles = useRootBaseStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuGridRowClassNames.root, rootBaseStyles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,YAAY,EAAAC,aAAA,QAAyB,gBAAgB;AAC9D,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA,MAAMC,iBAAiB,gBAAGP,aAAA;EAAAQ,CAAA;EAAAC,CAAA;AAAA,CA4CzB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,MAAMC,cAAc,GAAGL,iBAAiB,CAAC,CAAC;EAC1C;EACAI,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGd,YAAY,CAACM,qBAAqB,CAACC,IAAI,EAAEM,cAAc,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/MenuGridRow/useMenuGridRowStyles.styles.raw.js

@@ -54,8 +54,8 @@ const useRootBaseStyles = makeResetStyles({
     }
 });
 export const useMenuGridRowStyles_unstable = (state)=>{
-    'use no memo';
     const rootBaseStyles = useRootBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(menuGridRowClassNames.root, rootBaseStyles, state.root.className);
     return state;
 };

package/lib/components/MenuGridRow/useMenuGridRowStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport type { MenuGridRowSlots, MenuGridRowState } from './MenuGridRow.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nexport const menuGridRowClassNames: SlotClassNames<MenuGridRowSlots> = {\n  root: 'fui-MenuGridRow',\n};\n\n// Base styles similar to regular menu item\n// Right now ecludes icon color, hover active style for secondary text\nconst useRootBaseStyles = makeResetStyles({\n  borderRadius: tokens.borderRadiusMedium,\n  position: 'relative',\n  color: tokens.colorNeutralForeground2,\n  backgroundColor: tokens.colorNeutralBackground1,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalSNudge}`,\n  boxSizing: 'border-box',\n  maxWidth: '290px',\n  minHeight: '32px',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'start',\n  fontSize: tokens.fontSizeBase300,\n  cursor: 'pointer',\n  gap: '4px',\n  userSelect: 'none',\n  ...createFocusOutlineStyle(),\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n\n  // High contrast styles\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'Canvas',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n    },\n    ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }),\n  },\n});\n\nexport const useMenuGridRowStyles_unstable = (state: MenuGridRowState): MenuGridRowState => {\n  'use no memo';\n\n  const rootBaseStyles = useRootBaseStyles();\n  state.root.className = mergeClasses(menuGridRowClassNames.root, rootBaseStyles, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeResetStyles","iconFilledClassName","iconRegularClassName","tokens","createFocusOutlineStyle","menuGridRowClassNames","root","useRootBaseStyles","borderRadius","borderRadiusMedium","position","color","colorNeutralForeground2","backgroundColor","colorNeutralBackground1","padding","spacingVerticalXS","spacingVerticalSNudge","boxSizing","maxWidth","minHeight","flexShrink","display","alignItems","fontSize","fontSizeBase300","cursor","gap","userSelect","colorNeutralBackground1Hover","colorNeutralForeground2Hover","colorNeutralBackground1Pressed","colorNeutralForeground2Pressed","borderColor","style","outlineColor","useMenuGridRowStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA;AAGA,SAASA,YAAY,EAAEC,eAAe,QAAQ,iBAAiB;AAC/D,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,wBAAwB;AAElF,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,2CAA2C;AAC3C,sEAAsE;AACtE,MAAMC,oBAAoBP,gBAAgB;IACxCQ,cAAcL,OAAOM,kBAAkB;IACvCC,UAAU;IACVC,OAAOR,OAAOS,uBAAuB;IACrCC,iBAAiBV,OAAOW,uBAAuB;IAC/CC,SAAS,GAAGZ,OAAOa,iBAAiB,CAAC,CAAC,EAAEb,OAAOc,qBAAqB,EAAE;IACtEC,WAAW;IACXC,UAAU;IACVC,WAAW;IACXC,YAAY;IACZC,SAAS;IACTC,YAAY;IACZC,UAAUrB,OAAOsB,eAAe;IAChCC,QAAQ;IACRC,KAAK;IACLC,YAAY;IACZ,GAAGxB,yBAAyB;IAE5B,UAAU;QACRS,iBAAiBV,OAAO0B,4BAA4B;QACpDlB,OAAOR,OAAO2B,4BAA4B;QAE1C,CAAC,CAAC,GAAG,EAAE7B,qBAAqB,CAAC,EAAE;YAC7BqB,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEpB,sBAAsB,CAAC,EAAE;YAC9BoB,SAAS;QACX;IACF;IAEA,iBAAiB;QACfT,iBAAiBV,OAAO4B,8BAA8B;QACtDpB,OAAOR,OAAO6B,8BAA8B;IAC9C;IAEA,uBAAuB;IACvB,kCAAkC;QAChC,UAAU;YACRnB,iBAAiB;YACjBoB,aAAa;YACbtB,OAAO;QACT;QACA,GAAGP,wBAAwB;YAAE8B,OAAO;gBAAEC,cAAc;YAAY;QAAE,EAAE;IACtE;AACF;AAEA,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,iBAAiB/B;IACvB8B,MAAM/B,IAAI,CAACiC,SAAS,GAAGxC,aAAaM,sBAAsBC,IAAI,EAAEgC,gBAAgBD,MAAM/B,IAAI,CAACiC,SAAS;IAEpG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport type { MenuGridRowSlots, MenuGridRowState } from './MenuGridRow.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nexport const menuGridRowClassNames: SlotClassNames<MenuGridRowSlots> = {\n  root: 'fui-MenuGridRow',\n};\n\n// Base styles similar to regular menu item\n// Right now ecludes icon color, hover active style for secondary text\nconst useRootBaseStyles = makeResetStyles({\n  borderRadius: tokens.borderRadiusMedium,\n  position: 'relative',\n  color: tokens.colorNeutralForeground2,\n  backgroundColor: tokens.colorNeutralBackground1,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalSNudge}`,\n  boxSizing: 'border-box',\n  maxWidth: '290px',\n  minHeight: '32px',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'start',\n  fontSize: tokens.fontSizeBase300,\n  cursor: 'pointer',\n  gap: '4px',\n  userSelect: 'none',\n  ...createFocusOutlineStyle(),\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n\n  // High contrast styles\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'Canvas',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n    },\n    ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }),\n  },\n});\n\nexport const useMenuGridRowStyles_unstable = (state: MenuGridRowState): MenuGridRowState => {\n  const rootBaseStyles = useRootBaseStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(menuGridRowClassNames.root, rootBaseStyles, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeResetStyles","iconFilledClassName","iconRegularClassName","tokens","createFocusOutlineStyle","menuGridRowClassNames","root","useRootBaseStyles","borderRadius","borderRadiusMedium","position","color","colorNeutralForeground2","backgroundColor","colorNeutralBackground1","padding","spacingVerticalXS","spacingVerticalSNudge","boxSizing","maxWidth","minHeight","flexShrink","display","alignItems","fontSize","fontSizeBase300","cursor","gap","userSelect","colorNeutralBackground1Hover","colorNeutralForeground2Hover","colorNeutralBackground1Pressed","colorNeutralForeground2Pressed","borderColor","style","outlineColor","useMenuGridRowStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA;AAGA,SAASA,YAAY,EAAEC,eAAe,QAAQ,iBAAiB;AAC/D,SAASC,mBAAmB,EAAEC,oBAAoB,QAAQ,wBAAwB;AAElF,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,2CAA2C;AAC3C,sEAAsE;AACtE,MAAMC,oBAAoBP,gBAAgB;IACxCQ,cAAcL,OAAOM,kBAAkB;IACvCC,UAAU;IACVC,OAAOR,OAAOS,uBAAuB;IACrCC,iBAAiBV,OAAOW,uBAAuB;IAC/CC,SAAS,GAAGZ,OAAOa,iBAAiB,CAAC,CAAC,EAAEb,OAAOc,qBAAqB,EAAE;IACtEC,WAAW;IACXC,UAAU;IACVC,WAAW;IACXC,YAAY;IACZC,SAAS;IACTC,YAAY;IACZC,UAAUrB,OAAOsB,eAAe;IAChCC,QAAQ;IACRC,KAAK;IACLC,YAAY;IACZ,GAAGxB,yBAAyB;IAE5B,UAAU;QACRS,iBAAiBV,OAAO0B,4BAA4B;QACpDlB,OAAOR,OAAO2B,4BAA4B;QAE1C,CAAC,CAAC,GAAG,EAAE7B,qBAAqB,CAAC,EAAE;YAC7BqB,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEpB,sBAAsB,CAAC,EAAE;YAC9BoB,SAAS;QACX;IACF;IAEA,iBAAiB;QACfT,iBAAiBV,OAAO4B,8BAA8B;QACtDpB,OAAOR,OAAO6B,8BAA8B;IAC9C;IAEA,uBAAuB;IACvB,kCAAkC;QAChC,UAAU;YACRnB,iBAAiB;YACjBoB,aAAa;YACbtB,OAAO;QACT;QACA,GAAGP,wBAAwB;YAAE8B,OAAO;gBAAEC,cAAc;YAAY;QAAE,EAAE;IACtE;AACF;AAEA,OAAO,MAAMC,gCAAgC,CAACC;IAC5C,MAAMC,iBAAiB/B;IACvB,oDAAoD;IACpD8B,MAAM/B,IAAI,CAACiC,SAAS,GAAGxC,aAAaM,sBAAsBC,IAAI,EAAEgC,gBAAgBD,MAAM/B,IAAI,CAACiC,SAAS;IAEpG,OAAOF;AACT,EAAE"}

package/lib/utils/useValidateNesting.js

@@ -8,7 +8,6 @@ const menuItemRoleToNameMapping = {
     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);

package/lib/utils/useValidateNesting.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/useValidateNesting.ts"],"sourcesContent":["'use client';\n\nimport * 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 | null> => {\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>(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;AAEA,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,CAAqB;IAE7C,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"}
+{"version":3,"sources":["../src/utils/useValidateNesting.ts"],"sourcesContent":["'use client';\n\nimport * 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 | null> => {\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>(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;AAEA,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,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,CAAqB;IAE7C,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/useMenuGridStyles.styles.js

@@ -46,8 +46,8 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useMenuGridStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuGridClassNames.root, styles.root, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["mergeClasses","__styles","menuGridClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","hasMenuContext","Bqenvij","d","p","useMenuGridStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,kBAAkB;;;8BAeY;eAA1BY;;;uBAhBwB,gBAAgB;AAClD,2BAA2B;IAC9BX,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAE,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,oCAAoCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACE,kBAAkB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAC/F,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"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    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuGridClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","__styles","menuGridClassNames","root","useStyles","mc9l5x","Beiy3e4","i8kkvl","Belr9w4","rmohyg","hasMenuContext","Bqenvij","d","p","useMenuGridStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,kBAAkB;;;IAedY,0BAA0B;;;;uBAhBF,gBAAgB;AAClD,2BAA2B;IAC9BX,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAE,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA,CASjB,CAAC;AAGS,oCAAoCE,KAAK,IAAG;IACnD,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAW,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACE,kBAAkB,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAC/F,OAAOF,KAAK;AAChB,CAAC"}

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

@@ -32,8 +32,8 @@ const useStyles = (0, _react.makeStyles)({
     }
 });
 const useMenuGridStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuGridClassNames.root, styles.root, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"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;;;;;;;;;;;;IAMaE,kBAAAA;;;8BAkBAQ;eAAAA;;;uBArB4B,iBAAiB;AAGnD,2BAA0D;IAC/DP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYH,iBAAAA,EAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACE;IACzC;IAEA,MAAMC,SAASR;IACfO,MAAMR,IAAI,CAACU,SAAS,OAAGb,mBAAAA,EAAaE,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  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\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;;;;;;;;;;;;IAMaE,kBAAAA;;;8BAkBAQ;eAAAA;;;uBArB4B,iBAAiB;AAGnD,2BAA0D;IAC/DP,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYH,iBAAAA,EAAW;IAC3BE,MAAM;QACJE,SAAS;QACTC,eAAe;QACfC,KAAK;IACP;IACAC,gBAAgB;QACdC,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACE;IACzC,MAAMC,SAASR;IACf,oDAAoD;IACpDO,MAAMR,IAAI,CAACU,SAAS,OAAGb,mBAAAA,EAAaE,mBAAmBC,IAAI,EAAES,OAAOT,IAAI,EAAEQ,MAAMR,IAAI,CAACU,SAAS;IAC9F,OAAOF;AACT,EAAE"}

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

@@ -41,8 +41,8 @@ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useMenuGridCellStyles_unstable = (state)=>{
-    'use no memo';
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuGridCellClassNames.root, rootStyles.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useMenuGridCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const menuGridCellClassNames = {\n    root: 'fui-MenuGridCell'\n};\nconst useRootStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        boxSizing: 'border-box',\n        minHeight: '24px'\n    },\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, rootStyles.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","menuGridCellClassNames","root","useRootStyles","mc9l5x","Bt984gj","B7ck84d","sshi5w","visuallyHidden","qhf8xq","d","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,sBAAsB;;;kCAcQ;eAA9BU;;;uBAf4B,gBAAgB;AAClD,+BAA+B;IAClCT,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUrB,CAAC;AACK,wCAAwCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,UAAU,GAAGV,aAAa,CAAC,CAAC;IAClCS,KAAK,CAACV,IAAI,CAACY,SAAS,OAAGd,mBAAY,EAACC,sBAAsB,CAACC,IAAI,EAAEW,UAAU,CAACX,IAAI,EAAEU,KAAK,CAACJ,cAAc,IAAIK,UAAU,CAACL,cAAc,EAAEI,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;IAC1J,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useMenuGridCellStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const menuGridCellClassNames = {\n    root: 'fui-MenuGridCell'\n};\nconst useRootStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        boxSizing: 'border-box',\n        minHeight: '24px'\n    },\n    visuallyHidden: {\n        position: 'absolute'\n    }\n});\nexport const useMenuGridCellStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuGridCellClassNames.root, rootStyles.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","menuGridCellClassNames","root","useRootStyles","mc9l5x","Bt984gj","B7ck84d","sshi5w","visuallyHidden","qhf8xq","d","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,sBAAsB;;;kCAcQ;eAA9BU;;;uBAf4B,gBAAgB;AAClD,+BAA+B;IAClCT,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,cAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUrB,CAAC;AACK,wCAAwCE,KAAK,IAAG;IACnD,MAAMC,UAAU,GAAGV,aAAa,CAAC,CAAC;IAClC,oDAAA;IACAS,KAAK,CAACV,IAAI,CAACY,SAAS,OAAGd,mBAAY,EAACC,sBAAsB,CAACC,IAAI,EAAEW,UAAU,CAACX,IAAI,EAAEU,KAAK,CAACJ,cAAc,IAAIK,UAAU,CAACL,cAAc,EAAEI,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;IAC1J,OAAOF,KAAK;AAChB,CAAC"}

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

@@ -33,8 +33,8 @@ const useRootStyles = (0, _react.makeStyles)({
     }
 });
 const useMenuGridCellStyles_unstable = (state)=>{
-    'use no memo';
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuGridCellClassNames.root, rootStyles.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCellStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } 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  root: {\n    display: 'flex',\n    alignItems: 'center',\n\n    boxSizing: 'border-box',\n    minHeight: '24px', // To match small button size\n  },\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    rootStyles.root,\n    state.visuallyHidden && rootStyles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","menuGridCellClassNames","root","useRootStyles","display","alignItems","boxSizing","minHeight","visuallyHidden","position","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,sBAAAA;;;IAiBAS,8BAAAA;;;;uBApB4B,iBAAiB;AAGnD,+BAAkE;IACvER,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAgBJ,iBAAAA,EAAW;IAC/BG,MAAM;QACJE,SAAS;QACTC,YAAY;QAEZC,WAAW;QACXC,WAAW;IACb;IACAC,gBAAgB;QACdC,UAAU;IACZ;AACF;AAEO,uCAAuC,CAACE;IAC7C;IAEA,MAAMC,aAAaT;IACnBQ,MAAMT,IAAI,CAACW,SAAS,OAAGb,mBAAAA,EACrBC,uBAAuBC,IAAI,EAC3BU,WAAWV,IAAI,EACfS,MAAMH,cAAc,IAAII,WAAWJ,cAAc,EACjDG,MAAMT,IAAI,CAACW,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 { makeStyles, mergeClasses } 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  root: {\n    display: 'flex',\n    alignItems: 'center',\n\n    boxSizing: 'border-box',\n    minHeight: '24px', // To match small button size\n  },\n  visuallyHidden: {\n    position: 'absolute',\n  },\n});\n\nexport const useMenuGridCellStyles_unstable = (state: MenuGridCellState): MenuGridCellState => {\n  const rootStyles = useRootStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    menuGridCellClassNames.root,\n    rootStyles.root,\n    state.visuallyHidden && rootStyles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","menuGridCellClassNames","root","useRootStyles","display","alignItems","boxSizing","minHeight","visuallyHidden","position","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,sBAAAA;;;IAiBAS,8BAAAA;;;;uBApB4B,iBAAiB;AAGnD,+BAAkE;IACvER,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAgBJ,iBAAAA,EAAW;IAC/BG,MAAM;QACJE,SAAS;QACTC,YAAY;QAEZC,WAAW;QACXC,WAAW;IACb;IACAC,gBAAgB;QACdC,UAAU;IACZ;AACF;AAEO,uCAAuC,CAACE;IAC7C,MAAMC,aAAaT;IACnB,oDAAoD;IACpDQ,MAAMT,IAAI,CAACW,SAAS,OAAGb,mBAAAA,EACrBC,uBAAuBC,IAAI,EAC3BU,WAAWV,IAAI,EACfS,MAAMH,cAAc,IAAII,WAAWJ,cAAc,EACjDG,MAAMT,IAAI,CAACW,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/MenuGridGroup/useMenuGridGroupStyles.styles.js

@@ -21,7 +21,6 @@ const menuGridGroupClassNames = {
     root: 'fui-MenuGridGroup'
 };
 const useMenuGridGroupStyles_unstable = (state)=>{
-    'use no memo';
     state.root.className = (0, _react.mergeClasses)(menuGridGroupClassNames.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/MenuGridGroup/useMenuGridGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuGridGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const menuGridGroupClassNames = {\n    root: 'fui-MenuGridGroup'\n};\nexport const useMenuGridGroupStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(menuGridGroupClassNames.root, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","menuGridGroupClassNames","root","useMenuGridGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IACaC,uBAAuB;;;mCAGQ;;;;uBAJf,gBAAgB;AACtC,gCAAgC;IACnCC,IAAI,EAAE;AACV,CAAC;AACM,MAAMC,kCAAmCC,KAAK,IAAG;IACpD,aAAa;IACbA,KAAK,CAACF,IAAI,CAACG,SAAS,OAAGL,mBAAY,EAACC,uBAAuB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;IACvF,OAAOD,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useMenuGridGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const menuGridGroupClassNames = {\n    root: 'fui-MenuGridGroup'\n};\nexport const useMenuGridGroupStyles_unstable = (state)=>{\n    state.root.className = mergeClasses(menuGridGroupClassNames.root, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","menuGridGroupClassNames","root","useMenuGridGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IACaC,uBAAuB;;;mCAGQ;;;;uBAJf,gBAAgB;AACtC,gCAAgC;IACnCC,IAAI,EAAE;AACV,CAAC;AACM,MAAMC,kCAAmCC,KAAK,IAAG;IACpDA,KAAK,CAACF,IAAI,CAACG,SAAS,OAAGL,mBAAY,EAACC,uBAAuB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;IACvF,OAAOD,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/MenuGridGroup/useMenuGridGroupStyles.styles.raw.js

@@ -21,7 +21,6 @@ const menuGridGroupClassNames = {
     root: 'fui-MenuGridGroup'
 };
 const useMenuGridGroupStyles_unstable = (state)=>{
-    'use no memo';
     state.root.className = (0, _react.mergeClasses)(menuGridGroupClassNames.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/MenuGridGroup/useMenuGridGroupStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridGroup/useMenuGridGroupStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGridGroupSlots, MenuGridGroupState } from './MenuGridGroup.types';\n\nexport const menuGridGroupClassNames: SlotClassNames<MenuGridGroupSlots> = {\n  root: 'fui-MenuGridGroup',\n};\n\nexport const useMenuGridGroupStyles_unstable = (state: MenuGridGroupState): MenuGridGroupState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(menuGridGroupClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","menuGridGroupClassNames","root","useMenuGridGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IAIaC,uBAAAA;;;mCAIAE;;;;uBAPgB,iBAAiB;AAGvC,gCAAoE;IACzED,MAAM;AACR,EAAE;AAEK,MAAMC,kCAAkC,CAACC;IAC9C;IAEAA,MAAMF,IAAI,CAACG,SAAS,OAAGL,mBAAAA,EAAaC,wBAAwBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAEtF,OAAOD;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGridGroup/useMenuGridGroupStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGridGroupSlots, MenuGridGroupState } from './MenuGridGroup.types';\n\nexport const menuGridGroupClassNames: SlotClassNames<MenuGridGroupSlots> = {\n  root: 'fui-MenuGridGroup',\n};\n\nexport const useMenuGridGroupStyles_unstable = (state: MenuGridGroupState): MenuGridGroupState => {\n  state.root.className = mergeClasses(menuGridGroupClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","menuGridGroupClassNames","root","useMenuGridGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IAIaC,uBAAAA;;;mCAIAE;;;;uBAPgB,iBAAiB;AAGvC,gCAAoE;IACzED,MAAM;AACR,EAAE;AAEK,MAAMC,kCAAkC,CAACC;IAC9CA,MAAMF,IAAI,CAACG,SAAS,OAAGL,mBAAAA,EAAaC,wBAAwBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAEtF,OAAOD;AACT,EAAE"}

package/lib-commonjs/components/MenuGridGroupHeader/useMenuGridGroupHeaderStyles.styles.js

@@ -51,8 +51,8 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useMenuGridGroupHeaderStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuGridGroupHeaderClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/MenuGridGroupHeader/useMenuGridGroupHeaderStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuGridGroupHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGridGroupHeaderClassNames = {\n    root: 'fui-MenuGridGroupHeader'\n};\nconst useStyles = makeStyles({\n    root: {\n        fontSize: tokens.fontSizeBase200,\n        color: tokens.colorNeutralForeground3,\n        paddingLeft: '8px',\n        paddingRight: '8px',\n        fontWeight: tokens.fontWeightSemibold,\n        height: '32px',\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\nexport const useMenuGridGroupHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuGridGroupHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","menuGridGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGridGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,6BAA6B;;;IAe7BY,qCAAqC;;;;uBAjBT,gBAAgB;AAElD,sCAAsC;IACzCX,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAWjB,CAAC;AACK,+CAA+CE,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1BW,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACE,6BAA6B,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAC1G,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useMenuGridGroupHeaderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const menuGridGroupHeaderClassNames = {\n    root: 'fui-MenuGridGroupHeader'\n};\nconst useStyles = makeStyles({\n    root: {\n        fontSize: tokens.fontSizeBase200,\n        color: tokens.colorNeutralForeground3,\n        paddingLeft: '8px',\n        paddingRight: '8px',\n        fontWeight: tokens.fontWeightSemibold,\n        height: '32px',\n        display: 'flex',\n        alignItems: 'center'\n    }\n});\nexport const useMenuGridGroupHeaderStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuGridGroupHeaderClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","menuGridGroupHeaderClassNames","root","useStyles","Be2twd7","sj55zd","uwmqm3","z189sj","Bhrd7zp","Bqenvij","mc9l5x","Bt984gj","d","useMenuGridGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,6BAA6B;;;IAe7BY,qCAAqC;;;;uBAjBT,gBAAgB;AAElD,sCAAsC;IACzCX,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAWjB,CAAC;AACK,+CAA+CE,KAAK,IAAG;IAC1D,MAAMC,MAAM,GAAGZ,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAW,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGjB,mBAAY,EAACE,6BAA6B,CAACC,IAAI,EAAEa,MAAM,CAACb,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IAC1G,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/MenuGridGroupHeader/useMenuGridGroupHeaderStyles.styles.raw.js

@@ -35,8 +35,8 @@ const useStyles = (0, _react.makeStyles)({
     }
 });
 const useMenuGridGroupHeaderStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuGridGroupHeaderClassNames.root, styles.root, state.root.className);
     return state;
 };

package/lib-commonjs/components/MenuGridGroupHeader/useMenuGridGroupHeaderStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridGroupHeader/useMenuGridGroupHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { MenuGridGroupHeaderSlots, MenuGridGroupHeaderState } from './MenuGridGroupHeader.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const menuGridGroupHeaderClassNames: SlotClassNames<MenuGridGroupHeaderSlots> = {\n  root: 'fui-MenuGridGroupHeader',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '8px',\n    paddingRight: '8px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGridGroupHeaderStyles_unstable = (state: MenuGridGroupHeaderState): MenuGridGroupHeaderState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuGridGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","menuGridGroupHeaderClassNames","root","useStyles","fontSize","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","useMenuGridGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,6BAAAA;;;yCAiBAc;eAAAA;;;uBArB4B,iBAAiB;4BAEnC,wBAAwB;AAExC,sCAAgF;IACrFb,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,UAAUJ,kBAAAA,CAAOK,eAAe;QAChCC,OAAON,kBAAAA,CAAOO,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYV,kBAAAA,CAAOW,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEO,8CAA8C,CAACE;IACpD;IAEA,MAAMC,SAASd;IACfa,MAAMd,IAAI,CAACgB,SAAS,OAAGnB,mBAAAA,EAAaE,8BAA8BC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAEzG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGridGroupHeader/useMenuGridGroupHeaderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { MenuGridGroupHeaderSlots, MenuGridGroupHeaderState } from './MenuGridGroupHeader.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const menuGridGroupHeaderClassNames: SlotClassNames<MenuGridGroupHeaderSlots> = {\n  root: 'fui-MenuGridGroupHeader',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    paddingLeft: '8px',\n    paddingRight: '8px',\n    fontWeight: tokens.fontWeightSemibold,\n    height: '32px',\n    display: 'flex',\n    alignItems: 'center',\n  },\n});\n\nexport const useMenuGridGroupHeaderStyles_unstable = (state: MenuGridGroupHeaderState): MenuGridGroupHeaderState => {\n  const styles = useStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(menuGridGroupHeaderClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","menuGridGroupHeaderClassNames","root","useStyles","fontSize","fontSizeBase200","color","colorNeutralForeground3","paddingLeft","paddingRight","fontWeight","fontWeightSemibold","height","display","alignItems","useMenuGridGroupHeaderStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,6BAAAA;;;yCAiBAc;eAAAA;;;uBArB4B,iBAAiB;4BAEnC,wBAAwB;AAExC,sCAAgF;IACrFb,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,UAAUJ,kBAAAA,CAAOK,eAAe;QAChCC,OAAON,kBAAAA,CAAOO,uBAAuB;QACrCC,aAAa;QACbC,cAAc;QACdC,YAAYV,kBAAAA,CAAOW,kBAAkB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAY;IACd;AACF;AAEO,8CAA8C,CAACE;IACpD,MAAMC,SAASd;IACf,oDAAoD;IACpDa,MAAMd,IAAI,CAACgB,SAAS,OAAGnB,mBAAAA,EAAaE,8BAA8BC,IAAI,EAAEe,OAAOf,IAAI,EAAEc,MAAMd,IAAI,CAACgB,SAAS;IAEzG,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/MenuGridItem/useMenuGridItemStyles.styles.js

@@ -49,22 +49,27 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useMenuGridItemStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuGridItemClassNames.root, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(menuGridItemClassNames.icon, styles.icon, state.icon.className);
     }
     if (state.content) {
+        // eslint-disable-next-line react-hooks/immutability
         state.content.className = (0, _react.mergeClasses)(menuGridItemClassNames.content, styles.content, state.content.className);
     }
     if (state.subText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.subText.className = (0, _react.mergeClasses)(menuGridItemClassNames.subText, state.subText.className);
     }
     if (state.firstSubAction) {
+        // eslint-disable-next-line react-hooks/immutability
         state.firstSubAction.className = (0, _react.mergeClasses)(menuGridItemClassNames.firstSubAction, styles.firstSubAction, state.firstSubAction.className);
     }
     if (state.secondSubAction) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondSubAction.className = (0, _react.mergeClasses)(menuGridItemClassNames.secondSubAction, styles.secondSubAction, state.secondSubAction.className);
     }
     return state;

package/lib-commonjs/components/MenuGridItem/useMenuGridItemStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuGridItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const menuGridItemClassNames = {\n    root: 'fui-MenuGridItem',\n    icon: 'fui-MenuGridItem__icon',\n    content: 'fui-MenuGridItem__content',\n    subText: 'fui-MenuGridItem__subText',\n    firstSubAction: 'fui-MenuGridItem__firstSubAction',\n    secondSubAction: 'fui-MenuGridItem__secondSubAction'\n};\nconst useStyles = makeStyles({\n    content: {\n        flexGrow: 1,\n        height: '100%',\n        minWidth: 0\n    },\n    icon: {\n        height: '100%'\n    },\n    firstSubAction: {\n        height: '100%'\n    },\n    secondSubAction: {\n        height: '100%'\n    }\n});\nexport const useMenuGridItemStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuGridItemClassNames.icon, styles.icon, state.icon.className);\n    }\n    if (state.content) {\n        state.content.className = mergeClasses(menuGridItemClassNames.content, styles.content, state.content.className);\n    }\n    if (state.subText) {\n        state.subText.className = mergeClasses(menuGridItemClassNames.subText, state.subText.className);\n    }\n    if (state.firstSubAction) {\n        state.firstSubAction.className = mergeClasses(menuGridItemClassNames.firstSubAction, styles.firstSubAction, state.firstSubAction.className);\n    }\n    if (state.secondSubAction) {\n        state.secondSubAction.className = mergeClasses(menuGridItemClassNames.secondSubAction, styles.secondSubAction, state.secondSubAction.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useStyles","Bh6795r","Bqenvij","Bf4jedk","d","useMenuGridItemStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,sBAAsB;;;kCAwBQ;eAA9BY;;;uBAzB4B,gBAAgB;AAClD,+BAA+B;IAClCX,IAAI,EAAE,kBAAkB;IACxBC,IAAI,EAAE,wBAAwB;IAC9BC,OAAO,EAAE,2BAA2B;IACpCC,OAAO,EAAE,2BAA2B;IACpCC,cAAc,EAAE,kCAAkC;IAClDC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAK,OAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAR,IAAA,EAAA;QAAAO,OAAA,EAAA;IAAA;IAAAJ,cAAA,EAAA;QAAAI,OAAA,EAAA;IAAA;IAAAH,eAAA,EAAA;QAAAG,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAejB,CAAC;AACK,wCAAwCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;IAC1BM,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGhB,mBAAY,EAACC,sBAAsB,CAACC,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IACtF,IAAIF,KAAK,CAACX,IAAI,EAAE;QACZW,KAAK,CAACX,IAAI,CAACa,SAAS,OAAGhB,mBAAY,EAACC,sBAAsB,CAACE,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACa,SAAS,CAAC;IACvG;IACA,IAAIF,KAAK,CAACV,OAAO,EAAE;QACfU,KAAK,CAACV,OAAO,CAACY,SAAS,OAAGhB,mBAAY,EAACC,sBAAsB,CAACG,OAAO,EAAEW,MAAM,CAACX,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACY,SAAS,CAAC;IACnH;IACA,IAAIF,KAAK,CAACT,OAAO,EAAE;QACfS,KAAK,CAACT,OAAO,CAACW,SAAS,OAAGhB,mBAAY,EAACC,sBAAsB,CAACI,OAAO,EAAES,KAAK,CAACT,OAAO,CAACW,SAAS,CAAC;IACnG;IACA,IAAIF,KAAK,CAACR,cAAc,EAAE;QACtBQ,KAAK,CAACR,cAAc,CAACU,SAAS,OAAGhB,mBAAY,EAACC,sBAAsB,CAACK,cAAc,EAAES,MAAM,CAACT,cAAc,EAAEQ,KAAK,CAACR,cAAc,CAACU,SAAS,CAAC;IAC/I;IACA,IAAIF,KAAK,CAACP,eAAe,EAAE;QACvBO,KAAK,CAACP,eAAe,CAACS,SAAS,OAAGhB,mBAAY,EAACC,sBAAsB,CAACM,eAAe,EAAEQ,MAAM,CAACR,eAAe,EAAEO,KAAK,CAACP,eAAe,CAACS,SAAS,CAAC;IACnJ;IACA,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useMenuGridItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const menuGridItemClassNames = {\n    root: 'fui-MenuGridItem',\n    icon: 'fui-MenuGridItem__icon',\n    content: 'fui-MenuGridItem__content',\n    subText: 'fui-MenuGridItem__subText',\n    firstSubAction: 'fui-MenuGridItem__firstSubAction',\n    secondSubAction: 'fui-MenuGridItem__secondSubAction'\n};\nconst useStyles = makeStyles({\n    content: {\n        flexGrow: 1,\n        height: '100%',\n        minWidth: 0\n    },\n    icon: {\n        height: '100%'\n    },\n    firstSubAction: {\n        height: '100%'\n    },\n    secondSubAction: {\n        height: '100%'\n    }\n});\nexport const useMenuGridItemStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n    if (state.icon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.icon.className = mergeClasses(menuGridItemClassNames.icon, styles.icon, state.icon.className);\n    }\n    if (state.content) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.content.className = mergeClasses(menuGridItemClassNames.content, styles.content, state.content.className);\n    }\n    if (state.subText) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.subText.className = mergeClasses(menuGridItemClassNames.subText, state.subText.className);\n    }\n    if (state.firstSubAction) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.firstSubAction.className = mergeClasses(menuGridItemClassNames.firstSubAction, styles.firstSubAction, state.firstSubAction.className);\n    }\n    if (state.secondSubAction) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.secondSubAction.className = mergeClasses(menuGridItemClassNames.secondSubAction, styles.secondSubAction, state.secondSubAction.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useStyles","Bh6795r","Bqenvij","Bf4jedk","d","useMenuGridItemStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,sBAAsB;;;kCAwBQ;eAA9BY;;;uBAzB4B,gBAAgB;AAClD,+BAA+B;IAClCX,IAAI,EAAE,kBAAkB;IACxBC,IAAI,EAAE,wBAAwB;IAC9BC,OAAO,EAAE,2BAA2B;IACpCC,OAAO,EAAE,2BAA2B;IACpCC,cAAc,EAAE,kCAAkC;IAClDC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAK,OAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAR,IAAA,EAAA;QAAAO,OAAA,EAAA;IAAA;IAAAJ,cAAA,EAAA;QAAAI,OAAA,EAAA;IAAA;IAAAH,eAAA,EAAA;QAAAG,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAejB,CAAC;AACK,wCAAwCE,KAAK,IAAG;IACnD,MAAMC,MAAM,GAAGP,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAM,KAAK,CAACZ,IAAI,CAACc,SAAS,OAAGhB,mBAAY,EAACC,sBAAsB,CAACC,IAAI,EAAEY,KAAK,CAACZ,IAAI,CAACc,SAAS,CAAC;IACtF,IAAIF,KAAK,CAACX,IAAI,EAAE;QACZ,oDAAA;QACAW,KAAK,CAACX,IAAI,CAACa,SAAS,OAAGhB,mBAAY,EAACC,sBAAsB,CAACE,IAAI,EAAEY,MAAM,CAACZ,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACa,SAAS,CAAC;IACvG;IACA,IAAIF,KAAK,CAACV,OAAO,EAAE;QACf,oDAAA;QACAU,KAAK,CAACV,OAAO,CAACY,SAAS,OAAGhB,mBAAY,EAACC,sBAAsB,CAACG,OAAO,EAAEW,MAAM,CAACX,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACY,SAAS,CAAC;IACnH;IACA,IAAIF,KAAK,CAACT,OAAO,EAAE;QACf,oDAAA;QACAS,KAAK,CAACT,OAAO,CAACW,SAAS,OAAGhB,mBAAY,EAACC,sBAAsB,CAACI,OAAO,EAAES,KAAK,CAACT,OAAO,CAACW,SAAS,CAAC;IACnG;IACA,IAAIF,KAAK,CAACR,cAAc,EAAE;QACtB,oDAAA;QACAQ,KAAK,CAACR,cAAc,CAACU,SAAS,OAAGhB,mBAAY,EAACC,sBAAsB,CAACK,cAAc,EAAES,MAAM,CAACT,cAAc,EAAEQ,KAAK,CAACR,cAAc,CAACU,SAAS,CAAC;IAC/I;IACA,IAAIF,KAAK,CAACP,eAAe,EAAE;QACvB,oDAAA;QACAO,KAAK,CAACP,eAAe,CAACS,SAAS,OAAGhB,mBAAY,EAACC,sBAAsB,CAACM,eAAe,EAAEQ,MAAM,CAACR,eAAe,EAAEO,KAAK,CAACP,eAAe,CAACS,SAAS,CAAC;IACnJ;IACA,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/MenuGridItem/useMenuGridItemStyles.styles.raw.js

@@ -43,22 +43,27 @@ const useStyles = (0, _react.makeStyles)({
     }
 });
 const useMenuGridItemStyles_unstable = (state)=>{
-    'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuGridItemClassNames.root, state.root.className);
     if (state.icon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = (0, _react.mergeClasses)(menuGridItemClassNames.icon, styles.icon, state.icon.className);
     }
     if (state.content) {
+        // eslint-disable-next-line react-hooks/immutability
         state.content.className = (0, _react.mergeClasses)(menuGridItemClassNames.content, styles.content, state.content.className);
     }
     if (state.subText) {
+        // eslint-disable-next-line react-hooks/immutability
         state.subText.className = (0, _react.mergeClasses)(menuGridItemClassNames.subText, state.subText.className);
     }
     if (state.firstSubAction) {
+        // eslint-disable-next-line react-hooks/immutability
         state.firstSubAction.className = (0, _react.mergeClasses)(menuGridItemClassNames.firstSubAction, styles.firstSubAction, state.firstSubAction.className);
     }
     if (state.secondSubAction) {
+        // eslint-disable-next-line react-hooks/immutability
         state.secondSubAction.className = (0, _react.mergeClasses)(menuGridItemClassNames.secondSubAction, styles.secondSubAction, state.secondSubAction.className);
     }
     return state;

package/lib-commonjs/components/MenuGridItem/useMenuGridItemStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridItem/useMenuGridItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { MenuGridItemSlots, MenuGridItemState } from './MenuGridItem.types';\n\nexport const menuGridItemClassNames: SlotClassNames<MenuGridItemSlots> = {\n  root: 'fui-MenuGridItem',\n  icon: 'fui-MenuGridItem__icon',\n  content: 'fui-MenuGridItem__content',\n  subText: 'fui-MenuGridItem__subText',\n  firstSubAction: 'fui-MenuGridItem__firstSubAction',\n  secondSubAction: 'fui-MenuGridItem__secondSubAction',\n};\n\nconst useStyles = makeStyles({\n  content: {\n    flexGrow: 1,\n    height: '100%', // ensures content stay centered vertically when menu item's height is overridden\n    minWidth: 0,\n  },\n  icon: {\n    height: '100%',\n  },\n  firstSubAction: {\n    height: '100%',\n  },\n  secondSubAction: {\n    height: '100%',\n  },\n});\n\nexport const useMenuGridItemStyles_unstable = (state: MenuGridItemState): MenuGridItemState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(menuGridItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuGridItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.subText) {\n    state.subText.className = mergeClasses(menuGridItemClassNames.subText, state.subText.className);\n  }\n\n  if (state.firstSubAction) {\n    state.firstSubAction.className = mergeClasses(\n      menuGridItemClassNames.firstSubAction,\n      styles.firstSubAction,\n      state.firstSubAction.className,\n    );\n  }\n  if (state.secondSubAction) {\n    state.secondSubAction.className = mergeClasses(\n      menuGridItemClassNames.secondSubAction,\n      styles.secondSubAction,\n      state.secondSubAction.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useStyles","flexGrow","height","minWidth","useMenuGridItemStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,sBAAAA;;;IA0BAW,8BAAAA;;;;uBA7B4B,iBAAiB;AAGnD,+BAAkE;IACvEV,MAAM;IACNC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,gBAAgB;IAChBC,iBAAiB;AACnB,EAAE;AAEF,MAAMC,gBAAYT,iBAAAA,EAAW;IAC3BK,SAAS;QACPK,UAAU;QACVC,QAAQ;QACRC,UAAU;IACZ;IACAR,MAAM;QACJO,QAAQ;IACV;IACAJ,gBAAgB;QACdI,QAAQ;IACV;IACAH,iBAAiB;QACfG,QAAQ;IACV;AACF;AAEO,uCAAuC,CAACG;IAC7C;IAEA,MAAMC,SAASN;IAEfK,MAAMX,IAAI,CAACa,SAAS,OAAGf,mBAAAA,EAAaC,uBAAuBC,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAErF,IAAIF,MAAMV,IAAI,EAAE;QACdU,MAAMV,IAAI,CAACY,SAAS,OAAGf,mBAAAA,EAAaC,uBAAuBE,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACpG;IAEA,IAAIF,MAAMT,OAAO,EAAE;QACjBS,MAAMT,OAAO,CAACW,SAAS,GAAGf,uBAAAA,EAAaC,uBAAuBG,OAAO,EAAEU,OAAOV,OAAO,EAAES,MAAMT,OAAO,CAACW,SAAS;IAChH;IAEA,IAAIF,MAAMR,OAAO,EAAE;QACjBQ,MAAMR,OAAO,CAACU,SAAS,GAAGf,uBAAAA,EAAaC,uBAAuBI,OAAO,EAAEQ,MAAMR,OAAO,CAACU,SAAS;IAChG;IAEA,IAAIF,MAAMP,cAAc,EAAE;QACxBO,MAAMP,cAAc,CAACS,SAAS,OAAGf,mBAAAA,EAC/BC,uBAAuBK,cAAc,EACrCQ,OAAOR,cAAc,EACrBO,MAAMP,cAAc,CAACS,SAAS;IAElC;IACA,IAAIF,MAAMN,eAAe,EAAE;QACzBM,MAAMN,eAAe,CAACQ,SAAS,OAAGf,mBAAAA,EAChCC,uBAAuBM,eAAe,EACtCO,OAAOP,eAAe,EACtBM,MAAMN,eAAe,CAACQ,SAAS;IAEnC;IAEA,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGridItem/useMenuGridItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { MenuGridItemSlots, MenuGridItemState } from './MenuGridItem.types';\n\nexport const menuGridItemClassNames: SlotClassNames<MenuGridItemSlots> = {\n  root: 'fui-MenuGridItem',\n  icon: 'fui-MenuGridItem__icon',\n  content: 'fui-MenuGridItem__content',\n  subText: 'fui-MenuGridItem__subText',\n  firstSubAction: 'fui-MenuGridItem__firstSubAction',\n  secondSubAction: 'fui-MenuGridItem__secondSubAction',\n};\n\nconst useStyles = makeStyles({\n  content: {\n    flexGrow: 1,\n    height: '100%', // ensures content stay centered vertically when menu item's height is overridden\n    minWidth: 0,\n  },\n  icon: {\n    height: '100%',\n  },\n  firstSubAction: {\n    height: '100%',\n  },\n  secondSubAction: {\n    height: '100%',\n  },\n});\n\nexport const useMenuGridItemStyles_unstable = (state: MenuGridItemState): MenuGridItemState => {\n  const styles = useStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n\n  if (state.icon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.icon.className = mergeClasses(menuGridItemClassNames.icon, styles.icon, state.icon.className);\n  }\n\n  if (state.content) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.content.className = mergeClasses(menuGridItemClassNames.content, styles.content, state.content.className);\n  }\n\n  if (state.subText) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.subText.className = mergeClasses(menuGridItemClassNames.subText, state.subText.className);\n  }\n\n  if (state.firstSubAction) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.firstSubAction.className = mergeClasses(\n      menuGridItemClassNames.firstSubAction,\n      styles.firstSubAction,\n      state.firstSubAction.className,\n    );\n  }\n  if (state.secondSubAction) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.secondSubAction.className = mergeClasses(\n      menuGridItemClassNames.secondSubAction,\n      styles.secondSubAction,\n      state.secondSubAction.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useStyles","flexGrow","height","minWidth","useMenuGridItemStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,sBAAAA;;;IA0BAW,8BAAAA;;;;uBA7B4B,iBAAiB;AAGnD,+BAAkE;IACvEV,MAAM;IACNC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,gBAAgB;IAChBC,iBAAiB;AACnB,EAAE;AAEF,MAAMC,gBAAYT,iBAAAA,EAAW;IAC3BK,SAAS;QACPK,UAAU;QACVC,QAAQ;QACRC,UAAU;IACZ;IACAR,MAAM;QACJO,QAAQ;IACV;IACAJ,gBAAgB;QACdI,QAAQ;IACV;IACAH,iBAAiB;QACfG,QAAQ;IACV;AACF;AAEO,uCAAuC,CAACG;IAC7C,MAAMC,SAASN;IAEf,oDAAoD;IACpDK,MAAMX,IAAI,CAACa,SAAS,OAAGf,mBAAAA,EAAaC,uBAAuBC,IAAI,EAAEW,MAAMX,IAAI,CAACa,SAAS;IAErF,IAAIF,MAAMV,IAAI,EAAE;QACd,oDAAoD;QACpDU,MAAMV,IAAI,CAACY,SAAS,OAAGf,mBAAAA,EAAaC,uBAAuBE,IAAI,EAAEW,OAAOX,IAAI,EAAEU,MAAMV,IAAI,CAACY,SAAS;IACpG;IAEA,IAAIF,MAAMT,OAAO,EAAE;QACjB,oDAAoD;QACpDS,MAAMT,OAAO,CAACW,SAAS,OAAGf,mBAAAA,EAAaC,uBAAuBG,OAAO,EAAEU,OAAOV,OAAO,EAAES,MAAMT,OAAO,CAACW,SAAS;IAChH;IAEA,IAAIF,MAAMR,OAAO,EAAE;QACjB,oDAAoD;QACpDQ,MAAMR,OAAO,CAACU,SAAS,OAAGf,mBAAAA,EAAaC,uBAAuBI,OAAO,EAAEQ,MAAMR,OAAO,CAACU,SAAS;IAChG;IAEA,IAAIF,MAAMP,cAAc,EAAE;QACxB,oDAAoD;QACpDO,MAAMP,cAAc,CAACS,SAAS,GAAGf,uBAAAA,EAC/BC,uBAAuBK,cAAc,EACrCQ,OAAOR,cAAc,EACrBO,MAAMP,cAAc,CAACS,SAAS;IAElC;IACA,IAAIF,MAAMN,eAAe,EAAE;QACzB,oDAAoD;QACpDM,MAAMN,eAAe,CAACQ,SAAS,OAAGf,mBAAAA,EAChCC,uBAAuBM,eAAe,EACtCO,OAAOP,eAAe,EACtBM,MAAMN,eAAe,CAACQ,SAAS;IAEnC;IAEA,OAAOF;AACT,EAAE"}

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

@@ -13,7 +13,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _menuGridContext = require("../../contexts/menuGridContext");
 const useCharacterSearch = ()=>{
-    'use no memo';
+    'use no memo'; // justified: compiler would optimize useCharacterSearch — manual opt-out to preserve runtime behavior
     const characterSearchRef = _react.useRef(null);
     const { setFocusByFirstCharacter } = (0, _menuGridContext.useMenuGridContext_unstable)();
     const characterSearchOnKeyDown = (e)=>{

package/lib-commonjs/components/MenuGridRow/useCharacterSearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridRow/useCharacterSearch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridContext_unstable } from '../../contexts/menuGridContext';\n\n/**\n * Returns the MenuGridRow's `onKeyDown` handler to support first-letter navigation.\n * When a single character key is pressed, it delegates to the grid-level `setFocusByFirstCharacter`\n * callback which finds and focuses the next row starting with that character.\n */\nexport const useCharacterSearch = (): {\n  characterSearchOnKeyDown: React.KeyboardEventHandler<HTMLElement>;\n  characterSearchRef: React.RefObject<HTMLElement | null>;\n} => {\n  'use no memo';\n\n  const characterSearchRef = React.useRef<HTMLDivElement>(null);\n\n  const { setFocusByFirstCharacter } = useMenuGridContext_unstable();\n\n  const characterSearchOnKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key?.length > 1) {\n      return;\n    }\n\n    if (characterSearchRef.current) {\n      setFocusByFirstCharacter?.(e, characterSearchRef.current);\n    }\n  };\n\n  return { characterSearchOnKeyDown, characterSearchRef };\n};\n"],"names":["React","useMenuGridContext_unstable","useCharacterSearch","characterSearchRef","useRef","setFocusByFirstCharacter","characterSearchOnKeyDown","e","key","length","current"],"mappings":"AAAA;;;;;+BAUaE;;;;;;;iEARU,QAAQ;iCACa,iCAAiC;AAOtE,2BAA2B;IAIhC;IAEA,MAAMC,qBAAqBH,OAAMI,MAAM,CAAiB;IAExD,MAAM,EAAEC,wBAAwB,EAAE,GAAGJ,gDAAAA;IAErC,MAAMK,2BAA2B,CAACC;YAC5BA;QAAJ,IAAIA,CAAAA,CAAAA,SAAAA,EAAEC,GAAAA,AAAG,MAAA,QAALD,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAOE,MAAAA,AAAM,IAAG,GAAG;YACrB;QACF;QAEA,IAAIN,mBAAmBO,OAAO,EAAE;YAC9BL,6BAAAA,QAAAA,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAA2BE,GAAGJ,mBAAmBO,OAAO;QAC1D;IACF;IAEA,OAAO;QAAEJ;QAA0BH;IAAmB;AACxD,EAAE"}
+{"version":3,"sources":["../src/components/MenuGridRow/useCharacterSearch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGridContext_unstable } from '../../contexts/menuGridContext';\n\n/**\n * Returns the MenuGridRow's `onKeyDown` handler to support first-letter navigation.\n * When a single character key is pressed, it delegates to the grid-level `setFocusByFirstCharacter`\n * callback which finds and focuses the next row starting with that character.\n */\nexport const useCharacterSearch = (): {\n  characterSearchOnKeyDown: React.KeyboardEventHandler<HTMLElement>;\n  characterSearchRef: React.RefObject<HTMLElement | null>;\n} => {\n  'use no memo'; // justified: compiler would optimize useCharacterSearch — manual opt-out to preserve runtime behavior\n\n  const characterSearchRef = React.useRef<HTMLDivElement>(null);\n\n  const { setFocusByFirstCharacter } = useMenuGridContext_unstable();\n\n  const characterSearchOnKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key?.length > 1) {\n      return;\n    }\n\n    if (characterSearchRef.current) {\n      setFocusByFirstCharacter?.(e, characterSearchRef.current);\n    }\n  };\n\n  return { characterSearchOnKeyDown, characterSearchRef };\n};\n"],"names":["React","useMenuGridContext_unstable","useCharacterSearch","characterSearchRef","useRef","setFocusByFirstCharacter","characterSearchOnKeyDown","e","key","length","current"],"mappings":"AAAA;;;;;+BAUaE;;;;;;;iEARU,QAAQ;iCACa,iCAAiC;AAOtE,2BAA2B;IAIhC,eAAe,sGAAsG;IAErH,MAAMC,qBAAqBH,OAAMI,MAAM,CAAiB;IAExD,MAAM,EAAEC,wBAAwB,EAAE,GAAGJ,gDAAAA;IAErC,MAAMK,2BAA2B,CAACC;YAC5BA;QAAJ,IAAIA,CAAAA,CAAAA,SAAAA,EAAEC,GAAAA,AAAG,MAAA,QAALD,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAOE,MAAAA,AAAM,IAAG,GAAG;YACrB;QACF;QAEA,IAAIN,mBAAmBO,OAAO,EAAE;YAC9BL,6BAAAA,QAAAA,6BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,yBAA2BE,GAAGJ,mBAAmBO,OAAO;QAC1D;IACF;IAEA,OAAO;QAAEJ;QAA0BH;IAAmB;AACxD,EAAE"}

package/lib-commonjs/components/MenuGridRow/useMenuGridRowStyles.styles.js

@@ -52,8 +52,8 @@ const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1j5mkl8", "r
     ]
 });
 const useMenuGridRowStyles_unstable = (state)=>{
-    'use no memo';
     const rootBaseStyles = useRootBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuGridRowClassNames.root, rootBaseStyles, state.root.className);
     return state;
 };

package/lib-commonjs/components/MenuGridRow/useMenuGridRowStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMenuGridRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const menuGridRowClassNames = {\n    root: 'fui-MenuGridRow'\n};\n// Base styles similar to regular menu item\n// Right now ecludes icon color, hover active style for secondary text\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalSNudge}`,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    userSelect: 'none',\n    ...createFocusOutlineStyle(),\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    }\n});\nexport const useMenuGridRowStyles_unstable = (state)=>{\n    'use no memo';\n    const rootBaseStyles = useRootBaseStyles();\n    state.root.className = mergeClasses(menuGridRowClassNames.root, rootBaseStyles, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","__resetStyles","iconFilledClassName","iconRegularClassName","tokens","createFocusOutlineStyle","menuGridRowClassNames","root","useRootBaseStyles","r","s","useMenuGridRowStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCM,qBAAqB;;;iCAkDQ;eAA7BK;;;uBAtDiC,gBAAgB;AAIvD,8BAA8B;IACjCJ,IAAI,EAAE;AACV,CAAC;AACD,2CAAA;AACA,sEAAA;AACA,MAAMC,iBAAiB,GAAA,WAAA,OAAGP,oBAAA,EAAA,YAAA,WAAA;IAAAQ,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA4CzB,CAAC;AACK,uCAAuCE,KAAK,IAAG;IAClD,aAAa;IACb,MAAMC,cAAc,GAAGL,iBAAiB,CAAC,CAAC;IAC1CI,KAAK,CAACL,IAAI,CAACO,SAAS,OAAGd,mBAAY,EAACM,qBAAqB,CAACC,IAAI,EAAEM,cAAc,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;IACrG,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useMenuGridRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nexport const menuGridRowClassNames = {\n    root: 'fui-MenuGridRow'\n};\n// Base styles similar to regular menu item\n// Right now ecludes icon color, hover active style for secondary text\nconst useRootBaseStyles = makeResetStyles({\n    borderRadius: tokens.borderRadiusMedium,\n    position: 'relative',\n    color: tokens.colorNeutralForeground2,\n    backgroundColor: tokens.colorNeutralBackground1,\n    padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalSNudge}`,\n    boxSizing: 'border-box',\n    maxWidth: '290px',\n    minHeight: '32px',\n    flexShrink: 0,\n    display: 'flex',\n    alignItems: 'start',\n    fontSize: tokens.fontSizeBase300,\n    cursor: 'pointer',\n    gap: '4px',\n    userSelect: 'none',\n    ...createFocusOutlineStyle(),\n    ':hover': {\n        backgroundColor: tokens.colorNeutralBackground1Hover,\n        color: tokens.colorNeutralForeground2Hover,\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        }\n    },\n    ':hover:active': {\n        backgroundColor: tokens.colorNeutralBackground1Pressed,\n        color: tokens.colorNeutralForeground2Pressed\n    },\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        ':hover': {\n            backgroundColor: 'Canvas',\n            borderColor: 'Highlight',\n            color: 'Highlight'\n        },\n        ...createFocusOutlineStyle({\n            style: {\n                outlineColor: 'Highlight'\n            }\n        })\n    }\n});\nexport const useMenuGridRowStyles_unstable = (state)=>{\n    const rootBaseStyles = useRootBaseStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(menuGridRowClassNames.root, rootBaseStyles, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","__resetStyles","iconFilledClassName","iconRegularClassName","tokens","createFocusOutlineStyle","menuGridRowClassNames","root","useRootBaseStyles","r","s","useMenuGridRowStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCM,qBAAqB;;;iCAkDQ;eAA7BK;;;uBAtDiC,gBAAgB;AAIvD,8BAA8B;IACjCJ,IAAI,EAAE;AACV,CAAC;AACD,2CAAA;AACA,sEAAA;AACA,MAAMC,iBAAiB,GAAA,WAAA,OAAGP,oBAAA,EAAA,YAAA,WAAA;IAAAQ,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA4CzB,CAAC;AACK,uCAAuCE,KAAK,IAAG;IAClD,MAAMC,cAAc,GAAGL,iBAAiB,CAAC,CAAC;IAC1C,oDAAA;IACAI,KAAK,CAACL,IAAI,CAACO,SAAS,OAAGd,mBAAY,EAACM,qBAAqB,CAACC,IAAI,EAAEM,cAAc,EAAED,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;IACrG,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/MenuGridRow/useMenuGridRowStyles.styles.raw.js

@@ -72,8 +72,8 @@ const useRootBaseStyles = (0, _react.makeResetStyles)({
     }
 });
 const useMenuGridRowStyles_unstable = (state)=>{
-    'use no memo';
     const rootBaseStyles = useRootBaseStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(menuGridRowClassNames.root, rootBaseStyles, state.root.className);
     return state;
 };

package/lib-commonjs/components/MenuGridRow/useMenuGridRowStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport type { MenuGridRowSlots, MenuGridRowState } from './MenuGridRow.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nexport const menuGridRowClassNames: SlotClassNames<MenuGridRowSlots> = {\n  root: 'fui-MenuGridRow',\n};\n\n// Base styles similar to regular menu item\n// Right now ecludes icon color, hover active style for secondary text\nconst useRootBaseStyles = makeResetStyles({\n  borderRadius: tokens.borderRadiusMedium,\n  position: 'relative',\n  color: tokens.colorNeutralForeground2,\n  backgroundColor: tokens.colorNeutralBackground1,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalSNudge}`,\n  boxSizing: 'border-box',\n  maxWidth: '290px',\n  minHeight: '32px',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'start',\n  fontSize: tokens.fontSizeBase300,\n  cursor: 'pointer',\n  gap: '4px',\n  userSelect: 'none',\n  ...createFocusOutlineStyle(),\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n\n  // High contrast styles\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'Canvas',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n    },\n    ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }),\n  },\n});\n\nexport const useMenuGridRowStyles_unstable = (state: MenuGridRowState): MenuGridRowState => {\n  'use no memo';\n\n  const rootBaseStyles = useRootBaseStyles();\n  state.root.className = mergeClasses(menuGridRowClassNames.root, rootBaseStyles, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeResetStyles","iconFilledClassName","iconRegularClassName","tokens","createFocusOutlineStyle","menuGridRowClassNames","root","useRootBaseStyles","borderRadius","borderRadiusMedium","position","color","colorNeutralForeground2","backgroundColor","colorNeutralBackground1","padding","spacingVerticalXS","spacingVerticalSNudge","boxSizing","maxWidth","minHeight","flexShrink","display","alignItems","fontSize","fontSizeBase300","cursor","gap","userSelect","colorNeutralBackground1Hover","colorNeutralForeground2Hover","colorNeutralBackground1Pressed","colorNeutralForeground2Pressed","borderColor","style","outlineColor","useMenuGridRowStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaM,qBAAAA;;;iCAoDA+B;eAAAA;;;uBA1DiC,iBAAiB;4BACL,wBAAwB;4BAE3D,wBAAwB;8BACP,0BAA0B;AAE3D,8BAAgE;IACrE9B,MAAM;AACR,EAAE;AAEF,2CAA2C;AAC3C,sEAAsE;AACtE,MAAMC,wBAAoBP,sBAAAA,EAAgB;IACxCQ,cAAcL,kBAAAA,CAAOM,kBAAkB;IACvCC,UAAU;IACVC,OAAOR,kBAAAA,CAAOS,uBAAuB;IACrCC,iBAAiBV,kBAAAA,CAAOW,uBAAuB;IAC/CC,SAAS,GAAGZ,kBAAAA,CAAOa,iBAAiB,CAAC,CAAC,EAAEb,kBAAAA,CAAOc,qBAAqB,EAAE;IACtEC,WAAW;IACXC,UAAU;IACVC,WAAW;IACXC,YAAY;IACZC,SAAS;IACTC,YAAY;IACZC,UAAUrB,kBAAAA,CAAOsB,eAAe;IAChCC,QAAQ;IACRC,KAAK;IACLC,YAAY;IACZ,OAAGxB,qCAAAA,GAAyB;IAE5B,UAAU;QACRS,iBAAiBV,kBAAAA,CAAO0B,4BAA4B;QACpDlB,OAAOR,kBAAAA,CAAO2B,4BAA4B;QAE1C,CAAC,CAAC,GAAG,EAAE7B,+BAAAA,EAAqB,CAAC,EAAE;YAC7BqB,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEpB,gCAAAA,EAAsB,CAAC,EAAE;YAC9BoB,SAAS;QACX;IACF;IAEA,iBAAiB;QACfT,iBAAiBV,kBAAAA,CAAO4B,8BAA8B;QACtDpB,OAAOR,kBAAAA,CAAO6B,8BAA8B;IAC9C;IAEA,uBAAuB;IACvB,kCAAkC;QAChC,UAAU;YACRnB,iBAAiB;YACjBoB,aAAa;YACbtB,OAAO;QACT;QACA,OAAGP,qCAAAA,EAAwB;YAAE8B,OAAO;gBAAEC,cAAc;YAAY;QAAE,EAAE;IACtE;AACF;AAEO,sCAAsC,CAACE;IAC5C;IAEA,MAAMC,iBAAiB/B;IACvB8B,MAAM/B,IAAI,CAACiC,SAAS,OAAGxC,mBAAAA,EAAaM,sBAAsBC,IAAI,EAAEgC,gBAAgBD,MAAM/B,IAAI,CAACiC,SAAS;IAEpG,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport type { MenuGridRowSlots, MenuGridRowState } from './MenuGridRow.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\n\nexport const menuGridRowClassNames: SlotClassNames<MenuGridRowSlots> = {\n  root: 'fui-MenuGridRow',\n};\n\n// Base styles similar to regular menu item\n// Right now ecludes icon color, hover active style for secondary text\nconst useRootBaseStyles = makeResetStyles({\n  borderRadius: tokens.borderRadiusMedium,\n  position: 'relative',\n  color: tokens.colorNeutralForeground2,\n  backgroundColor: tokens.colorNeutralBackground1,\n  padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalSNudge}`,\n  boxSizing: 'border-box',\n  maxWidth: '290px',\n  minHeight: '32px',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'start',\n  fontSize: tokens.fontSizeBase300,\n  cursor: 'pointer',\n  gap: '4px',\n  userSelect: 'none',\n  ...createFocusOutlineStyle(),\n\n  ':hover': {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n    color: tokens.colorNeutralForeground2Hover,\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n  },\n\n  ':hover:active': {\n    backgroundColor: tokens.colorNeutralBackground1Pressed,\n    color: tokens.colorNeutralForeground2Pressed,\n  },\n\n  // High contrast styles\n  '@media (forced-colors: active)': {\n    ':hover': {\n      backgroundColor: 'Canvas',\n      borderColor: 'Highlight',\n      color: 'Highlight',\n    },\n    ...createFocusOutlineStyle({ style: { outlineColor: 'Highlight' } }),\n  },\n});\n\nexport const useMenuGridRowStyles_unstable = (state: MenuGridRowState): MenuGridRowState => {\n  const rootBaseStyles = useRootBaseStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(menuGridRowClassNames.root, rootBaseStyles, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeResetStyles","iconFilledClassName","iconRegularClassName","tokens","createFocusOutlineStyle","menuGridRowClassNames","root","useRootBaseStyles","borderRadius","borderRadiusMedium","position","color","colorNeutralForeground2","backgroundColor","colorNeutralBackground1","padding","spacingVerticalXS","spacingVerticalSNudge","boxSizing","maxWidth","minHeight","flexShrink","display","alignItems","fontSize","fontSizeBase300","cursor","gap","userSelect","colorNeutralBackground1Hover","colorNeutralForeground2Hover","colorNeutralBackground1Pressed","colorNeutralForeground2Pressed","borderColor","style","outlineColor","useMenuGridRowStyles_unstable","state","rootBaseStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IASaM,qBAAAA;;;iCAoDA+B;eAAAA;;;uBA1DiC,iBAAiB;4BACL,wBAAwB;4BAE3D,wBAAwB;8BACP,0BAA0B;AAE3D,8BAAgE;IACrE9B,MAAM;AACR,EAAE;AAEF,2CAA2C;AAC3C,sEAAsE;AACtE,MAAMC,wBAAoBP,sBAAAA,EAAgB;IACxCQ,cAAcL,kBAAAA,CAAOM,kBAAkB;IACvCC,UAAU;IACVC,OAAOR,kBAAAA,CAAOS,uBAAuB;IACrCC,iBAAiBV,kBAAAA,CAAOW,uBAAuB;IAC/CC,SAAS,GAAGZ,kBAAAA,CAAOa,iBAAiB,CAAC,CAAC,EAAEb,kBAAAA,CAAOc,qBAAqB,EAAE;IACtEC,WAAW;IACXC,UAAU;IACVC,WAAW;IACXC,YAAY;IACZC,SAAS;IACTC,YAAY;IACZC,UAAUrB,kBAAAA,CAAOsB,eAAe;IAChCC,QAAQ;IACRC,KAAK;IACLC,YAAY;IACZ,OAAGxB,qCAAAA,GAAyB;IAE5B,UAAU;QACRS,iBAAiBV,kBAAAA,CAAO0B,4BAA4B;QACpDlB,OAAOR,kBAAAA,CAAO2B,4BAA4B;QAE1C,CAAC,CAAC,GAAG,EAAE7B,+BAAAA,EAAqB,CAAC,EAAE;YAC7BqB,SAAS;QACX;QACA,CAAC,CAAC,GAAG,EAAEpB,gCAAAA,EAAsB,CAAC,EAAE;YAC9BoB,SAAS;QACX;IACF;IAEA,iBAAiB;QACfT,iBAAiBV,kBAAAA,CAAO4B,8BAA8B;QACtDpB,OAAOR,kBAAAA,CAAO6B,8BAA8B;IAC9C;IAEA,uBAAuB;IACvB,kCAAkC;QAChC,UAAU;YACRnB,iBAAiB;YACjBoB,aAAa;YACbtB,OAAO;QACT;QACA,OAAGP,qCAAAA,EAAwB;YAAE8B,OAAO;gBAAEC,cAAc;YAAY;QAAE,EAAE;IACtE;AACF;AAEO,sCAAsC,CAACE;IAC5C,MAAMC,iBAAiB/B;IACvB,oDAAoD;IACpD8B,MAAM/B,IAAI,CAACiC,SAAS,OAAGxC,mBAAAA,EAAaM,sBAAsBC,IAAI,EAAEgC,gBAAgBD,MAAM/B,IAAI,CAACiC,SAAS;IAEpG,OAAOF;AACT,EAAE"}

package/lib-commonjs/utils/useValidateNesting.js

@@ -19,7 +19,6 @@ const menuItemRoleToNameMapping = {
     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);

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/useValidateNesting.ts"],"sourcesContent":["'use client';\n\nimport * 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 | null> => {\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>(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;;;;;+BAiBaQ;;;;;;;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,iBAAaR,kCAAAA,EAAwB,CAACS,UAA8BA,QAAQD,UAAU;IAC5F,MAAME,aAASV,kCAAAA,EAAwB,CAACS,UAA8BA,QAAQC,MAAM;IACpF,MAAMC,MAAMd,OAAMe,MAAM,CAAqB;IAE7C,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"}
+{"version":3,"sources":["../src/utils/useValidateNesting.ts"],"sourcesContent":["'use client';\n\nimport * 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 | null> => {\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>(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;;;;;+BAiBaQ;;;;;;;iEAfU,QAAQ;qCACiB,kCAAkC;2BAG1C,uBAAuB;AAK/D,MAAMJ,4BAA4B;IAChCC,UAAU;IACVC,kBAAkB;IAClBC,eAAe;AACjB;AAEO,2BAA2B,CAACE;IACjC,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,CAAqB;IAE7C,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.5.1",
+  "version": "0.5.3",
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,14 +19,14 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-menu": "^9.24.1",
+    "@fluentui/react-menu": "^9.25.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-table": "^9.19.15",
-    "@fluentui/react-tabster": "^9.26.14",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-table": "^9.19.17",
+    "@fluentui/react-tabster": "^9.26.16",
+    "@fluentui/react-jsx-runtime": "^9.4.4",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.5",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },