@fluentui/react-menu-grid-preview 0.2.2 → 0.2.4

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

@@ -17,10 +17,10 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _useValidateNesting = require("../../utils/useValidateNesting");
 function useMenuGridCell_unstable(props, ref) {
     const { visuallyHidden } = props;
-    const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGridCell');
     const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const CloseArrowKey = dir === 'ltr' ? _keyboardkeys.ArrowLeft : _keyboardkeys.ArrowRight;
+    const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGridCell');
     const onKeyDownWithPrevent = (0, _reactutilities.useEventCallback)((event)=>{
+        const CloseArrowKey = dir === 'ltr' ? _keyboardkeys.ArrowLeft : _keyboardkeys.ArrowRight;
         if (event.key === CloseArrowKey) {
             event.preventDefault();
         }

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCell.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  mergeCallbacks,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\nimport { MenuGridCellProps, MenuGridCellState } from './MenuGridCell.types';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Given user props, returns state and render function for a MenuGridCell.\n */\nexport function useMenuGridCell_unstable(props: MenuGridCellProps, ref: React.Ref<HTMLDivElement>): MenuGridCellState {\n  const { visuallyHidden } = props;\n  const validateNestingRef = useValidateNesting('MenuGridCell');\n  const { dir } = useFluent();\n\n  const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n  const onKeyDownWithPrevent = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    if (event.key === CloseArrowKey) {\n      event.preventDefault();\n    }\n  });\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onKeyDownWithPrevent));\n\n  return {\n    visuallyHidden,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'gridcell',\n        ...props,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","ArrowLeft","ArrowRight","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useValidateNesting","useMenuGridCell_unstable","props","ref","visuallyHidden","validateNestingRef","dir","CloseArrowKey","onKeyDownWithPrevent","event","key","preventDefault","onKeyDown","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAkBgBW;;;;;;;iEAhBO,QAAQ;qCACiB,kCAAkC;8BAC5C,0BAA0B;gCAOzD,4BAA4B;oCAEA,iCAAiC;AAK7D,kCAAkCC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,yBAAqBL,sCAAAA,EAAmB;IAC9C,MAAM,EAAEM,GAAG,EAAE,OAAGd,uCAAAA;IAEhB,MAAMe,gBAAgBD,QAAQ,QAAQb,uBAAAA,GAAYC,wBAAAA;IAClD,MAAMc,2BAAuBZ,gCAAAA,EAAiB,CAACa;QAC7C,IAAIA,MAAMC,GAAG,KAAKH,eAAe;YAC/BE,MAAME,cAAc;QACtB;IACF;IACA,MAAMC,gBAAYhB,gCAAAA,MAAiBC,8BAAAA,EAAeK,MAAMU,SAAS,EAAEJ;IAEnE,OAAO;QACLJ;QACAS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,oBAAAA,CAAKgB,MAAM,KACfjB,wCAAAA,EAAyB,OAAO;YAC9BK,SAAKR,6BAAAA,EAAcQ,KAAKE;YACxBW,MAAM;YACN,GAAGd,KAAK;YACRU;QACF,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCell.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  mergeCallbacks,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\nimport { MenuGridCellProps, MenuGridCellState } from './MenuGridCell.types';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Given user props, returns state and render function for a MenuGridCell.\n */\nexport function useMenuGridCell_unstable(props: MenuGridCellProps, ref: React.Ref<HTMLDivElement>): MenuGridCellState {\n  const { visuallyHidden } = props;\n\n  const { dir } = useFluent();\n  const validateNestingRef = useValidateNesting('MenuGridCell');\n\n  const onKeyDownWithPrevent = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {\n    const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;\n\n    if (event.key === CloseArrowKey) {\n      event.preventDefault();\n    }\n  });\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onKeyDownWithPrevent));\n\n  return {\n    visuallyHidden,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'gridcell',\n        ...props,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useFluent_unstable","useFluent","ArrowLeft","ArrowRight","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useValidateNesting","useMenuGridCell_unstable","props","ref","visuallyHidden","dir","validateNestingRef","onKeyDownWithPrevent","event","CloseArrowKey","key","preventDefault","onKeyDown","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAkBgBW;;;;;;;iEAhBO,QAAQ;qCACiB,kCAAkC;8BAC5C,0BAA0B;gCAOzD,4BAA4B;oCAEA,iCAAiC;AAK7D,kCAAkCC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAE3B,MAAM,EAAEG,GAAG,EAAE,OAAGb,uCAAAA;IAChB,MAAMc,qBAAqBN,0CAAAA,EAAmB;IAE9C,MAAMO,2BAAuBX,gCAAAA,EAAiB,CAACY;QAC7C,MAAMC,gBAAgBJ,QAAQ,QAAQZ,uBAAAA,GAAYC,wBAAAA;QAElD,IAAIc,MAAME,GAAG,KAAKD,eAAe;YAC/BD,MAAMG,cAAc;QACtB;IACF;IACA,MAAMC,gBAAYhB,gCAAAA,MAAiBC,8BAAAA,EAAeK,MAAMU,SAAS,EAAEL;IAEnE,OAAO;QACLH;QACAS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,oBAAAA,CAAKgB,MAAM,KACfjB,wCAAAA,EAAyB,OAAO;YAC9BK,SAAKR,6BAAAA,EAAcQ,KAAKG;YACxBU,MAAM;YACN,GAAGd,KAAK;YACRU;QACF,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF"}

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

@@ -22,17 +22,27 @@ const menuGridCellClassNames = {
     root: 'fui-MenuGridCell'
 };
 const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59",
+        B7ck84d: "f1ewtqcl",
+        sshi5w: "f1pha7fy"
+    },
     visuallyHidden: {
         qhf8xq: "f1euv43f"
     }
 }, {
     d: [
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f1pha7fy{min-height:24px;}",
         ".f1euv43f{position:absolute;}"
     ]
 });
 const useMenuGridCellStyles_unstable = (state)=>{
     'use no memo';
     const rootStyles = useRootStyles();
-    state.root.className = (0, _react.mergeClasses)(menuGridCellClassNames.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);
+    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 { mergeClasses, makeStyles } from '@griffel/react';\nexport const menuGridCellClassNames = {\n    root: 'fui-MenuGridCell'\n};\nconst useRootStyles = makeStyles({\n    visuallyHidden: {\n        position: 'absolute'\n    }\n});\nexport const useMenuGridCellStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    state.root.className = mergeClasses(menuGridCellClassNames.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","__styles","menuGridCellClassNames","root","useRootStyles","visuallyHidden","qhf8xq","d","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,sBAAsB;;;kCAQQ;eAA9BM;;;uBAT4B,gBAAgB;AAClD,+BAA+B;IAClCL,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,cAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIrB,CAAC;AACK,wCAAwCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,UAAU,GAAGN,aAAa,CAAC,CAAC;IAClCK,KAAK,CAACN,IAAI,CAACQ,SAAS,OAAGX,mBAAY,EAACE,sBAAsB,CAACC,IAAI,EAAEM,KAAK,CAACJ,cAAc,IAAIK,UAAU,CAACL,cAAc,EAAEI,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;IACzI,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    '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"}

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

@@ -22,6 +22,12 @@ const menuGridCellClassNames = {
     root: 'fui-MenuGridCell'
 };
 const useRootStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        minHeight: '24px'
+    },
     visuallyHidden: {
         position: 'absolute'
     }
@@ -29,6 +35,6 @@ const useRootStyles = (0, _react.makeStyles)({
 const useMenuGridCellStyles_unstable = (state)=>{
     'use no memo';
     const rootStyles = useRootStyles();
-    state.root.className = (0, _react.mergeClasses)(menuGridCellClassNames.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);
+    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 { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuGridCellSlots, MenuGridCellState } from './MenuGridCell.types';\n\nexport const menuGridCellClassNames: SlotClassNames<MenuGridCellSlots> = {\n  root: 'fui-MenuGridCell',\n};\n\nconst useRootStyles = makeStyles({\n  visuallyHidden: {\n    position: 'absolute',\n  },\n});\n\nexport const useMenuGridCellStyles_unstable = (state: MenuGridCellState): MenuGridCellState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    menuGridCellClassNames.root,\n    state.visuallyHidden && rootStyles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuGridCellClassNames","root","useRootStyles","visuallyHidden","position","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;;;;;;;;;;;;0BAMaE;;;kCAUAK;;;;uBAb4B,iBAAiB;AAGnD,MAAML,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAgBH,iBAAAA,EAAW;IAC/BI,gBAAgB;QACdC,UAAU;IACZ;AACF;AAEO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,aAAaL;IACnBI,MAAML,IAAI,CAACO,SAAS,OAAGV,mBAAAA,EACrBE,uBAAuBC,IAAI,EAC3BK,MAAMH,cAAc,IAAII,WAAWJ,cAAc,EACjDG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/MenuGridCell/useMenuGridCellStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { 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"}

package/lib-commonjs/components/MenuGridGroupHeader/index.js

@@ -12,8 +12,8 @@ _export(exports, {
     MenuGridGroupHeader: function() {
         return _MenuGridGroupHeader.MenuGridGroupHeader;
     },
-    MenuGridGroupHeaderClassNames: function() {
-        return _useMenuGridGroupHeaderStylesstyles.MenuGridGroupHeaderClassNames;
+    menuGridGroupHeaderClassNames: function() {
+        return _useMenuGridGroupHeaderStylesstyles.menuGridGroupHeaderClassNames;
     },
     renderMenuGridGroupHeader_unstable: function() {
         return _renderMenuGridGroupHeader.renderMenuGridGroupHeader_unstable;

package/lib-commonjs/components/MenuGridGroupHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridGroupHeader/index.ts"],"sourcesContent":["export type {\n  MenuGridGroupHeaderProps,\n  MenuGridGroupHeaderSlots,\n  MenuGridGroupHeaderState,\n} from './MenuGridGroupHeader.types';\nexport { MenuGridGroupHeader } from './MenuGridGroupHeader';\nexport { renderMenuGridGroupHeader_unstable } from './renderMenuGridGroupHeader';\nexport { useMenuGridGroupHeader_unstable } from './useMenuGridGroupHeader';\nexport {\n  MenuGridGroupHeaderClassNames,\n  useMenuGridGroupHeaderStyles_unstable,\n} from './useMenuGridGroupHeaderStyles.styles';\n"],"names":["MenuGridGroupHeader","renderMenuGridGroupHeader_unstable","useMenuGridGroupHeader_unstable","MenuGridGroupHeaderClassNames","useMenuGridGroupHeaderStyles_unstable"],"mappings":";;;;;;;;;;;;eAKSA,wCAAmB;;;eAI1BG,iEAA6B;;;eAHtBF,6DAAkC;;;eAIzCG,yEAAqC;;;eAH9BF,uDAA+B;;;qCAFJ,wBAAwB;2CACT,8BAA8B;wCACjC,2BAA2B;oDAIpE,wCAAwC"}
+{"version":3,"sources":["../src/components/MenuGridGroupHeader/index.ts"],"sourcesContent":["export type {\n  MenuGridGroupHeaderProps,\n  MenuGridGroupHeaderSlots,\n  MenuGridGroupHeaderState,\n} from './MenuGridGroupHeader.types';\nexport { MenuGridGroupHeader } from './MenuGridGroupHeader';\nexport { renderMenuGridGroupHeader_unstable } from './renderMenuGridGroupHeader';\nexport { useMenuGridGroupHeader_unstable } from './useMenuGridGroupHeader';\nexport {\n  menuGridGroupHeaderClassNames,\n  useMenuGridGroupHeaderStyles_unstable,\n} from './useMenuGridGroupHeaderStyles.styles';\n"],"names":["MenuGridGroupHeader","renderMenuGridGroupHeader_unstable","useMenuGridGroupHeader_unstable","menuGridGroupHeaderClassNames","useMenuGridGroupHeaderStyles_unstable"],"mappings":";;;;;;;;;;;;eAKSA,wCAAmB;;;eAI1BG,iEAA6B;;;eAHtBF,6DAAkC;;;eAIzCG,yEAAqC;;;eAH9BF,uDAA+B;;;qCAFJ,wBAAwB;2CACT,8BAA8B;wCACjC,2BAA2B;oDAIpE,wCAAwC"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -9,19 +10,49 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    MenuGridGroupHeaderClassNames: function() {
-        return MenuGridGroupHeaderClassNames;
+    menuGridGroupHeaderClassNames: function() {
+        return menuGridGroupHeaderClassNames;
     },
     useMenuGridGroupHeaderStyles_unstable: function() {
         return useMenuGridGroupHeaderStyles_unstable;
     }
 });
 const _react = require("@griffel/react");
-const MenuGridGroupHeaderClassNames = {
+const menuGridGroupHeaderClassNames = {
     root: 'fui-MenuGridGroupHeader'
 };
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Be2twd7: "fy9rknc",
+        sj55zd: "f11d4kpn",
+        uwmqm3: [
+            "f177v4lu",
+            "f19lj068"
+        ],
+        z189sj: [
+            "f19lj068",
+            "f177v4lu"
+        ],
+        Bhrd7zp: "fl43uef",
+        Bqenvij: "f1d2rq10",
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59"
+    }
+}, {
+    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;}"
+    ]
+});
 const useMenuGridGroupHeaderStyles_unstable = (state)=>{
     'use no memo';
-    state.root.className = (0, _react.mergeClasses)(MenuGridGroupHeaderClassNames.root, state.root.className);
+    const styles = useStyles();
+    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":["import { mergeClasses } from '@griffel/react';\nexport const MenuGridGroupHeaderClassNames = {\n    root: 'fui-MenuGridGroupHeader'\n};\nexport const useMenuGridGroupHeaderStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(MenuGridGroupHeaderClassNames.root, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","MenuGridGroupHeaderClassNames","root","useMenuGridGroupHeaderStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IACaC,6BAA6B;;;yCAGQ;;;;uBAJrB,gBAAgB;AACtC,sCAAsC;IACzCC,IAAI,EAAE;AACV,CAAC;AACM,MAAMC,wCAAyCC,KAAK,IAAG;IAC1D,aAAa;IACbA,KAAK,CAACF,IAAI,CAACG,SAAS,OAAGL,mBAAY,EAACC,6BAA6B,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;IAC7F,OAAOD,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    '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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -9,19 +10,33 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    MenuGridGroupHeaderClassNames: function() {
-        return MenuGridGroupHeaderClassNames;
+    menuGridGroupHeaderClassNames: function() {
+        return menuGridGroupHeaderClassNames;
     },
     useMenuGridGroupHeaderStyles_unstable: function() {
         return useMenuGridGroupHeaderStyles_unstable;
     }
 });
 const _react = require("@griffel/react");
-const MenuGridGroupHeaderClassNames = {
+const _reacttheme = require("@fluentui/react-theme");
+const menuGridGroupHeaderClassNames = {
     root: 'fui-MenuGridGroupHeader'
 };
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        paddingLeft: '8px',
+        paddingRight: '8px',
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        height: '32px',
+        display: 'flex',
+        alignItems: 'center'
+    }
+});
 const useMenuGridGroupHeaderStyles_unstable = (state)=>{
     'use no memo';
-    state.root.className = (0, _react.mergeClasses)(MenuGridGroupHeaderClassNames.root, state.root.className);
+    const styles = useStyles();
+    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":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGridGroupHeaderSlots, MenuGridGroupHeaderState } from './MenuGridGroupHeader.types';\n\nexport const MenuGridGroupHeaderClassNames: SlotClassNames<MenuGridGroupHeaderSlots> = {\n  root: 'fui-MenuGridGroupHeader',\n};\n\nexport const useMenuGridGroupHeaderStyles_unstable = (state: MenuGridGroupHeaderState): MenuGridGroupHeaderState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(MenuGridGroupHeaderClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","MenuGridGroupHeaderClassNames","root","useMenuGridGroupHeaderStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IAIaC,6BAAAA;;;yCAIAE;;;;uBAPgB,iBAAiB;AAGvC,sCAAgF;IACrFD,MAAM;AACR,EAAE;AAEK,MAAMC,wCAAwC,CAACC;IACpD;IAEAA,MAAMF,IAAI,CAACG,SAAS,OAAGL,mBAAAA,EAAaC,8BAA8BC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAE5F,OAAOD;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  '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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -25,8 +26,46 @@ const menuGridItemClassNames = {
     firstSubAction: 'fui-MenuGridRow__firstSubAction',
     secondSubAction: 'fui-MenuGridRow__secondSubAction'
 };
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    content: {
+        Bh6795r: "fqerorx",
+        Bqenvij: "f1l02sjl",
+        Bf4jedk: "fy77jfu"
+    },
+    icon: {
+        Bqenvij: "f1l02sjl"
+    },
+    firstSubAction: {
+        Bqenvij: "f1l02sjl"
+    },
+    secondSubAction: {
+        Bqenvij: "f1l02sjl"
+    }
+}, {
+    d: [
+        ".fqerorx{flex-grow:1;}",
+        ".f1l02sjl{height:100%;}",
+        ".fy77jfu{min-width:0;}"
+    ]
+});
 const useMenuGridItemStyles_unstable = (state)=>{
     'use no memo';
+    const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(menuGridItemClassNames.root, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(menuGridItemClassNames.icon, styles.icon, state.icon.className);
+    }
+    if (state.content) {
+        state.content.className = (0, _react.mergeClasses)(menuGridItemClassNames.content, styles.content, state.content.className);
+    }
+    if (state.subText) {
+        state.subText.className = (0, _react.mergeClasses)(menuGridItemClassNames.subText, state.subText.className);
+    }
+    if (state.firstSubAction) {
+        state.firstSubAction.className = (0, _react.mergeClasses)(menuGridItemClassNames.firstSubAction, styles.firstSubAction, state.firstSubAction.className);
+    }
+    if (state.secondSubAction) {
+        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":["import { mergeClasses } from '@griffel/react';\nexport const menuGridItemClassNames = {\n    root: 'fui-MenuGridItem',\n    icon: 'fui-MenuGridRow__icon',\n    content: 'fui-MenuGridRow__content',\n    subText: 'fui-MenuGridRow__subText',\n    firstSubAction: 'fui-MenuGridRow__firstSubAction',\n    secondSubAction: 'fui-MenuGridRow__secondSubAction'\n};\nexport const useMenuGridItemStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useMenuGridItemStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IACaC,sBAAsB;;;kCAQQ;;;;uBATd,gBAAgB;AACtC,+BAA+B;IAClCC,IAAI,EAAE,kBAAkB;IACxBC,IAAI,EAAE,uBAAuB;IAC7BC,OAAO,EAAE,0BAA0B;IACnCC,OAAO,EAAE,0BAA0B;IACnCC,cAAc,EAAE,iCAAiC;IACjDC,eAAe,EAAE;AACrB,CAAC;AACM,MAAMC,kCAAkCC,KAAK,IAAG;IACnD,aAAa;IACbA,KAAK,CAACP,IAAI,CAACQ,SAAS,OAAGV,mBAAY,EAACC,sBAAsB,CAACC,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACQ,SAAS,CAAC;IACtF,OAAOD,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-MenuGridRow__icon',\n    content: 'fui-MenuGridRow__content',\n    subText: 'fui-MenuGridRow__subText',\n    firstSubAction: 'fui-MenuGridRow__firstSubAction',\n    secondSubAction: 'fui-MenuGridRow__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,uBAAuB;IAC7BC,OAAO,EAAE,0BAA0B;IACnCC,OAAO,EAAE,0BAA0B;IACnCC,cAAc,EAAE,iCAAiC;IACjDC,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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -25,8 +26,40 @@ const menuGridItemClassNames = {
     firstSubAction: 'fui-MenuGridRow__firstSubAction',
     secondSubAction: 'fui-MenuGridRow__secondSubAction'
 };
+const useStyles = (0, _react.makeStyles)({
+    content: {
+        flexGrow: 1,
+        height: '100%',
+        minWidth: 0
+    },
+    icon: {
+        height: '100%'
+    },
+    firstSubAction: {
+        height: '100%'
+    },
+    secondSubAction: {
+        height: '100%'
+    }
+});
 const useMenuGridItemStyles_unstable = (state)=>{
     'use no memo';
+    const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(menuGridItemClassNames.root, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(menuGridItemClassNames.icon, styles.icon, state.icon.className);
+    }
+    if (state.content) {
+        state.content.className = (0, _react.mergeClasses)(menuGridItemClassNames.content, styles.content, state.content.className);
+    }
+    if (state.subText) {
+        state.subText.className = (0, _react.mergeClasses)(menuGridItemClassNames.subText, state.subText.className);
+    }
+    if (state.firstSubAction) {
+        state.firstSubAction.className = (0, _react.mergeClasses)(menuGridItemClassNames.firstSubAction, styles.firstSubAction, state.firstSubAction.className);
+    }
+    if (state.secondSubAction) {
+        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":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGridItemSlots, MenuGridItemState } from './MenuGridItem.types';\n\nexport const menuGridItemClassNames: SlotClassNames<MenuGridItemSlots> = {\n  root: 'fui-MenuGridItem',\n  icon: 'fui-MenuGridRow__icon',\n  content: 'fui-MenuGridRow__content',\n  subText: 'fui-MenuGridRow__subText',\n  firstSubAction: 'fui-MenuGridRow__firstSubAction',\n  secondSubAction: 'fui-MenuGridRow__secondSubAction',\n};\n\nexport const useMenuGridItemStyles_unstable = (state: MenuGridItemState): MenuGridItemState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useMenuGridItemStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IAIaC,sBAAAA;;;kCASAO;;;;uBAZgB,iBAAiB;AAGvC,+BAAkE;IACvEN,MAAM;IACNC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,gBAAgB;IAChBC,iBAAiB;AACnB,EAAE;AAEK,MAAMC,iCAAiC,CAACC;IAC7C;IAEAA,MAAMP,IAAI,CAACQ,SAAS,OAAGV,mBAAAA,EAAaC,uBAAuBC,IAAI,EAAEO,MAAMP,IAAI,CAACQ,SAAS;IAErF,OAAOD;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-MenuGridRow__icon',\n  content: 'fui-MenuGridRow__content',\n  subText: 'fui-MenuGridRow__subText',\n  firstSubAction: 'fui-MenuGridRow__firstSubAction',\n  secondSubAction: 'fui-MenuGridRow__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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -20,8 +21,39 @@ const _react = require("@griffel/react");
 const menuGridRowClassNames = {
     root: 'fui-MenuGridRow'
 };
+// Base styles similar to regular menu item
+// Right now ecludes icon color, hover active style for secondary text
+const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1j5mkl8", "ro8804w", {
+    r: [
+        ".r1j5mkl8{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding:var(--spacingVerticalXS) var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}",
+        ".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;}",
+        ".r1j5mkl8[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
+        ".r1j5mkl8:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}",
+        ".r1j5mkl8:hover .fui-Icon-filled{display:inline;}",
+        ".r1j5mkl8:hover .fui-Icon-regular{display:none;}",
+        ".r1j5mkl8:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}",
+        ".ro8804w{border-radius:var(--borderRadiusMedium);position:relative;color:var(--colorNeutralForeground2);background-color:var(--colorNeutralBackground1);padding:var(--spacingVerticalXS) var(--spacingVerticalSNudge);box-sizing:border-box;max-width:290px;min-height:32px;flex-shrink:0;display:flex;align-items:start;font-size:var(--fontSizeBase300);cursor:pointer;gap:4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;}",
+        ".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;}",
+        ".ro8804w[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}",
+        ".ro8804w:hover{background-color:var(--colorNeutralBackground1Hover);color:var(--colorNeutralForeground2Hover);}",
+        ".ro8804w:hover .fui-Icon-filled{display:inline;}",
+        ".ro8804w:hover .fui-Icon-regular{display:none;}",
+        ".ro8804w:hover:active{background-color:var(--colorNeutralBackground1Pressed);color:var(--colorNeutralForeground2Pressed);}"
+    ],
+    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);}}"
+    ]
+});
 const useMenuGridRowStyles_unstable = (state)=>{
     'use no memo';
-    state.root.className = (0, _react.mergeClasses)(menuGridRowClassNames.root, state.root.className);
+    const rootBaseStyles = useRootBaseStyles();
+    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":["import { mergeClasses } from '@griffel/react';\nexport const menuGridRowClassNames = {\n    root: 'fui-MenuGridRow'\n};\nexport const useMenuGridRowStyles_unstable = (state)=>{\n    'use no memo';\n    state.root.className = mergeClasses(menuGridRowClassNames.root, state.root.className);\n    return state;\n};\n"],"names":["mergeClasses","menuGridRowClassNames","root","useMenuGridRowStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IACaC,qBAAqB;;;iCAGQ;;;;uBAJb,gBAAgB;AACtC,8BAA8B;IACjCC,IAAI,EAAE;AACV,CAAC;AACM,MAAMC,gCAAiCC,KAAK,IAAG;IAClD,aAAa;IACbA,KAAK,CAACF,IAAI,CAACG,SAAS,OAAGL,mBAAY,EAACC,qBAAqB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;IACrF,OAAOD,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    '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"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -17,11 +18,62 @@ _export(exports, {
     }
 });
 const _react = require("@griffel/react");
+const _reacticons = require("@fluentui/react-icons");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
 const menuGridRowClassNames = {
     root: 'fui-MenuGridRow'
 };
+// Base styles similar to regular menu item
+// Right now ecludes icon color, hover active style for secondary text
+const useRootBaseStyles = (0, _react.makeResetStyles)({
+    borderRadius: _reacttheme.tokens.borderRadiusMedium,
+    position: 'relative',
+    color: _reacttheme.tokens.colorNeutralForeground2,
+    backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+    padding: `${_reacttheme.tokens.spacingVerticalXS} ${_reacttheme.tokens.spacingVerticalSNudge}`,
+    boxSizing: 'border-box',
+    maxWidth: '290px',
+    minHeight: '32px',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'start',
+    fontSize: _reacttheme.tokens.fontSizeBase300,
+    cursor: 'pointer',
+    gap: '4px',
+    userSelect: 'none',
+    ...(0, _reacttabster.createFocusOutlineStyle)(),
+    ':hover': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Hover,
+        color: _reacttheme.tokens.colorNeutralForeground2Hover,
+        [`& .${_reacticons.iconFilledClassName}`]: {
+            display: 'inline'
+        },
+        [`& .${_reacticons.iconRegularClassName}`]: {
+            display: 'none'
+        }
+    },
+    ':hover:active': {
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Pressed,
+        color: _reacttheme.tokens.colorNeutralForeground2Pressed
+    },
+    // High contrast styles
+    '@media (forced-colors: active)': {
+        ':hover': {
+            backgroundColor: 'Canvas',
+            borderColor: 'Highlight',
+            color: 'Highlight'
+        },
+        ...(0, _reacttabster.createFocusOutlineStyle)({
+            style: {
+                outlineColor: 'Highlight'
+            }
+        })
+    }
+});
 const useMenuGridRowStyles_unstable = (state)=>{
     'use no memo';
-    state.root.className = (0, _react.mergeClasses)(menuGridRowClassNames.root, state.root.className);
+    const rootBaseStyles = useRootBaseStyles();
+    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":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGridRowSlots, MenuGridRowState } from './MenuGridRow.types';\n\nexport const menuGridRowClassNames: SlotClassNames<MenuGridRowSlots> = {\n  root: 'fui-MenuGridRow',\n};\n\nexport const useMenuGridRowStyles_unstable = (state: MenuGridRowState): MenuGridRowState => {\n  'use no memo';\n\n  state.root.className = mergeClasses(menuGridRowClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","menuGridRowClassNames","root","useMenuGridRowStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IAIaC,qBAAAA;;;iCAIAE;;;;uBAPgB,iBAAiB;AAGvC,8BAAgE;IACrED,MAAM;AACR,EAAE;AAEK,MAAMC,gCAAgC,CAACC;IAC5C;IAEAA,MAAMF,IAAI,CAACG,SAAS,OAAGL,mBAAAA,EAAaC,sBAAsBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAEpF,OAAOD;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  '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"}

package/lib-commonjs/index.js

@@ -30,9 +30,6 @@ _export(exports, {
     MenuGridGroupHeader: function() {
         return _MenuGridGroupHeader.MenuGridGroupHeader;
     },
-    MenuGridGroupHeaderClassNames: function() {
-        return _MenuGridGroupHeader.MenuGridGroupHeaderClassNames;
-    },
     MenuGridItem: function() {
         return _MenuGridItem.MenuGridItem;
     },
@@ -45,6 +42,9 @@ _export(exports, {
     menuGridClassNames: function() {
         return _MenuGrid.menuGridClassNames;
     },
+    menuGridGroupHeaderClassNames: function() {
+        return _MenuGridGroupHeader.menuGridGroupHeaderClassNames;
+    },
     menuGridItemClassNames: function() {
         return _MenuGridItem.menuGridItemClassNames;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { MenuGridContextProvider, useMenuGridContext_unstable } from './contexts/menuGridContext';\nexport type { MenuGridContextValue } from './contexts/menuGridContext';\nexport { MenuGridGroupContextProvider, useMenuGridGroupContext_unstable } from './contexts/menuGridGroupContext';\nexport type { MenuGridGroupContextValue } from './contexts/menuGridGroupContext';\nexport {\n  MenuGrid,\n  menuGridClassNames,\n  renderMenuGrid_unstable,\n  useMenuGridContextValues_unstable,\n  useMenuGridStyles_unstable,\n  useMenuGrid_unstable,\n} from './MenuGrid';\nexport type { MenuGridContextValues, MenuGridProps, MenuGridSlots, MenuGridState } from './MenuGrid';\nexport {\n  MenuGridCell,\n  menuGridCellClassNames,\n  renderMenuGridCell_unstable,\n  useMenuGridCellStyles_unstable,\n  useMenuGridCell_unstable,\n} from './MenuGridCell';\nexport type { MenuGridCellProps, MenuGridCellSlots, MenuGridCellState } from './MenuGridCell';\nexport {\n  MenuGridItem,\n  menuGridItemClassNames,\n  renderMenuGridItem_unstable,\n  useMenuGridItemStyles_unstable,\n  useMenuGridItem_unstable,\n} from './MenuGridItem';\nexport type { MenuGridItemProps, MenuGridItemSlots, MenuGridItemState } from './MenuGridItem';\nexport {\n  MenuGridRow,\n  menuGridRowClassNames,\n  renderMenuGridRow_unstable,\n  useMenuGridRowStyles_unstable,\n  useMenuGridRow_unstable,\n} from './MenuGridRow';\nexport type { MenuGridRowProps, MenuGridRowSlots, MenuGridRowState } from './MenuGridRow';\nexport {\n  MenuGridGroup,\n  MenuGridGroupClassNames,\n  renderMenuGridGroup_unstable,\n  useMenuGridGroupContextValues_unstable,\n  useMenuGridGroupStyles_unstable,\n  useMenuGridGroup_unstable,\n} from './MenuGridGroup';\nexport type {\n  MenuGridGroupContextValues,\n  MenuGridGroupProps,\n  MenuGridGroupSlots,\n  MenuGridGroupState,\n} from './MenuGridGroup';\nexport {\n  MenuGridGroupHeader,\n  MenuGridGroupHeaderClassNames,\n  renderMenuGridGroupHeader_unstable,\n  useMenuGridGroupHeaderStyles_unstable,\n  useMenuGridGroupHeader_unstable,\n} from './MenuGridGroupHeader';\nexport type {\n  MenuGridGroupHeaderProps,\n  MenuGridGroupHeaderSlots,\n  MenuGridGroupHeaderState,\n} from './MenuGridGroupHeader';\n"],"names":["MenuGridContextProvider","useMenuGridContext_unstable","MenuGridGroupContextProvider","useMenuGridGroupContext_unstable","MenuGrid","menuGridClassNames","renderMenuGrid_unstable","useMenuGridContextValues_unstable","useMenuGridStyles_unstable","useMenuGrid_unstable","MenuGridCell","menuGridCellClassNames","renderMenuGridCell_unstable","useMenuGridCellStyles_unstable","useMenuGridCell_unstable","MenuGridItem","menuGridItemClassNames","renderMenuGridItem_unstable","useMenuGridItemStyles_unstable","useMenuGridItem_unstable","MenuGridRow","menuGridRowClassNames","renderMenuGridRow_unstable","useMenuGridRowStyles_unstable","useMenuGridRow_unstable","MenuGridGroup","MenuGridGroupClassNames","renderMenuGridGroup_unstable","useMenuGridGroupContextValues_unstable","useMenuGridGroupStyles_unstable","useMenuGridGroup_unstable","MenuGridGroupHeader","MenuGridGroupHeaderClassNames","renderMenuGridGroupHeader_unstable","useMenuGridGroupHeaderStyles_unstable","useMenuGridGroupHeader_unstable"],"mappings":";;;;;;;;;;;IAKEI;iCAAQ;;;eASRM,0BAAY;;;eAdLV,wCAAuB;;IAsC9ByB,aAAa;;;;eACbC,sCAAuB;;;eArChBxB,kDAA4B;;IAkDnC6B;uDAAmB;;IACnBC;iEAA6B;;;eA/B7BjB,0BAAY;;IAQZK;uCAAW;;;eAfXT,oCAAsB;;;eATtBN,4BAAkB;;IAiBlBW;mDAAsB;;yBAQD;eAArBK;;;eAfAT,yCAA2B;;IAsC3BqB,kCAAkC;;;;eAdlCN,2CAA4B;;;eAhB5BV,yCAA2B;;;eAQ3BK,uCAA0B;;;eAzB1BhB,iCAAuB;;;eAUvBO,4CAA8B;;4BACN;eAAxBC;;IAVAP;0DAAiC;;;eARDN,4CAA2B;;;eAyC3D2B,qDAAsC;;;eAvCDzB,sDAAgC;;yCAqDhC;eAArC+B;;;eACAC,oDAA+B;;;eAd/BN,8CAA+B;;IAC/BC,yBAAyB;;;;eAlBzBZ,4CAA8B;;;eAC9BC,sCAAwB;;;eAOxBI,0CAA6B;;;eAC7BC,oCAAuB;;;eAzBvBhB,oCAA0B;;;eAC1BC,8BAAoB;;;iCAV+C,6BAA6B;sCAEnB,kCAAkC;0BAS1G,aAAa;8BAQb,iBAAiB;8BAQjB,iBAAiB;6BAQjB,gBAAgB;+BAShB,kBAAkB;qCAalB,wBAAwB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { MenuGridContextProvider, useMenuGridContext_unstable } from './contexts/menuGridContext';\nexport type { MenuGridContextValue } from './contexts/menuGridContext';\nexport { MenuGridGroupContextProvider, useMenuGridGroupContext_unstable } from './contexts/menuGridGroupContext';\nexport type { MenuGridGroupContextValue } from './contexts/menuGridGroupContext';\nexport {\n  MenuGrid,\n  menuGridClassNames,\n  renderMenuGrid_unstable,\n  useMenuGridContextValues_unstable,\n  useMenuGridStyles_unstable,\n  useMenuGrid_unstable,\n} from './MenuGrid';\nexport type { MenuGridContextValues, MenuGridProps, MenuGridSlots, MenuGridState } from './MenuGrid';\nexport {\n  MenuGridCell,\n  menuGridCellClassNames,\n  renderMenuGridCell_unstable,\n  useMenuGridCellStyles_unstable,\n  useMenuGridCell_unstable,\n} from './MenuGridCell';\nexport type { MenuGridCellProps, MenuGridCellSlots, MenuGridCellState } from './MenuGridCell';\nexport {\n  MenuGridItem,\n  menuGridItemClassNames,\n  renderMenuGridItem_unstable,\n  useMenuGridItemStyles_unstable,\n  useMenuGridItem_unstable,\n} from './MenuGridItem';\nexport type { MenuGridItemProps, MenuGridItemSlots, MenuGridItemState } from './MenuGridItem';\nexport {\n  MenuGridRow,\n  menuGridRowClassNames,\n  renderMenuGridRow_unstable,\n  useMenuGridRowStyles_unstable,\n  useMenuGridRow_unstable,\n} from './MenuGridRow';\nexport type { MenuGridRowProps, MenuGridRowSlots, MenuGridRowState } from './MenuGridRow';\nexport {\n  MenuGridGroup,\n  MenuGridGroupClassNames,\n  renderMenuGridGroup_unstable,\n  useMenuGridGroupContextValues_unstable,\n  useMenuGridGroupStyles_unstable,\n  useMenuGridGroup_unstable,\n} from './MenuGridGroup';\nexport type {\n  MenuGridGroupContextValues,\n  MenuGridGroupProps,\n  MenuGridGroupSlots,\n  MenuGridGroupState,\n} from './MenuGridGroup';\nexport {\n  MenuGridGroupHeader,\n  menuGridGroupHeaderClassNames,\n  renderMenuGridGroupHeader_unstable,\n  useMenuGridGroupHeaderStyles_unstable,\n  useMenuGridGroupHeader_unstable,\n} from './MenuGridGroupHeader';\nexport type {\n  MenuGridGroupHeaderProps,\n  MenuGridGroupHeaderSlots,\n  MenuGridGroupHeaderState,\n} from './MenuGridGroupHeader';\n"],"names":["MenuGridContextProvider","useMenuGridContext_unstable","MenuGridGroupContextProvider","useMenuGridGroupContext_unstable","MenuGrid","menuGridClassNames","renderMenuGrid_unstable","useMenuGridContextValues_unstable","useMenuGridStyles_unstable","useMenuGrid_unstable","MenuGridCell","menuGridCellClassNames","renderMenuGridCell_unstable","useMenuGridCellStyles_unstable","useMenuGridCell_unstable","MenuGridItem","menuGridItemClassNames","renderMenuGridItem_unstable","useMenuGridItemStyles_unstable","useMenuGridItem_unstable","MenuGridRow","menuGridRowClassNames","renderMenuGridRow_unstable","useMenuGridRowStyles_unstable","useMenuGridRow_unstable","MenuGridGroup","MenuGridGroupClassNames","renderMenuGridGroup_unstable","useMenuGridGroupContextValues_unstable","useMenuGridGroupStyles_unstable","useMenuGridGroup_unstable","MenuGridGroupHeader","menuGridGroupHeaderClassNames","renderMenuGridGroupHeader_unstable","useMenuGridGroupHeaderStyles_unstable","useMenuGridGroupHeader_unstable"],"mappings":";;;;;;;;;;;IAKEI;iCAAQ;;;eASRM,0BAAY;;;eAdLV,wCAAuB;;IAsC9ByB;2CAAa;;;eACbC,sCAAuB;;;eArChBxB,kDAA4B;;IAkDnC6B,mBAAmB;;;IA9BnBhB,YAAY;;;IAQZK;uCAAW;;;eAfXT,oCAAsB;;;eATtBN,4BAAkB;;IA+ClB2B,6BAA6B;;;;eA9B7BhB,oCAAsB;;;eAQtBK,kCAAqB;;;eAfrBT,yCAA2B;;;eAsC3BqB,uDAAkC;;;eAdlCN,2CAA4B;;;eAhB5BV,yCAA2B;;IAQ3BK,0BAA0B;;;;eAzB1BhB,iCAAuB;;;eAUvBO,4CAA8B;;4BACN;eAAxBC;;IAVAP;0DAAiC;;;eARDN,4CAA2B;;;eAyC3D2B,qDAAsC;;;eAvCDzB,sDAAgC;;yCAqDhC;eAArC+B;;;eACAC,oDAA+B;;IAd/BN,+BAA+B;;;;eAC/BC,wCAAyB;;;eAlBzBZ,4CAA8B;;;eAC9BC,sCAAwB;;;eAOxBI,0CAA6B;;;eAC7BC,oCAAuB;;;eAzBvBhB,oCAA0B;;;eAC1BC,8BAAoB;;;iCAV+C,6BAA6B;sCAEnB,kCAAkC;0BAS1G,aAAa;8BAQb,iBAAiB;8BAQjB,iBAAiB;6BAQjB,gBAAgB;+BAShB,kBAAkB;qCAalB,wBAAwB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu-grid-preview",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -25,13 +25,14 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-menu": "^9.20.2",
-    "@fluentui/react-table": "^9.19.2",
-    "@fluentui/react-tabster": "^9.26.7",
-    "@fluentui/react-jsx-runtime": "^9.3.0",
+    "@fluentui/react-menu": "^9.20.4",
+    "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-table": "^9.19.4",
+    "@fluentui/react-tabster": "^9.26.9",
+    "@fluentui/react-jsx-runtime": "^9.3.2",
     "@fluentui/react-shared-contexts": "^9.25.2",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.25.1",
+    "@fluentui/react-utilities": "^9.25.3",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },