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

package/CHANGELOG.md

@@ -1,19 +1,33 @@
 # Change Log - @fluentui/react-menu-grid-preview
 
-This log was last generated on Tue, 21 Oct 2025 14:13:12 GMT and should not be manually modified.
+This log was last generated on Fri, 31 Oct 2025 16:17:37 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.2.3)
+
+Fri, 31 Oct 2025 16:17:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.2.2..@fluentui/react-menu-grid-preview_v0.2.3)
+
+### Patches
+
+- feat: add styles for MenuGridRow ([PR #34948](https://github.com/microsoft/fluentui/pull/34948) by jukapsia@microsoft.com)
+- Bump @fluentui/react-menu to v9.20.3 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+- Bump @fluentui/react-table to v9.19.3 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+- Bump @fluentui/react-tabster to v9.26.8 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.1 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+- Bump @fluentui/react-utilities to v9.25.2 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+
 ## [0.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.2.2)
 
-Tue, 21 Oct 2025 14:13:12 GMT 
+Tue, 21 Oct 2025 14:16:59 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.2.1..@fluentui/react-menu-grid-preview_v0.2.2)
 
 ### Patches
 
-- Bump @fluentui/react-menu to v9.20.2 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
-- Bump @fluentui/react-table to v9.19.2 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #35307](https://github.com/microsoft/fluentui/pull/35307) by beachball)
+- Bump @fluentui/react-menu to v9.20.2 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
+- Bump @fluentui/react-table to v9.19.2 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
 
 ## [0.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.2.1)
 

package/lib/components/MenuGridCell/useMenuGridCell.js

@@ -8,10 +8,10 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
  * Given user props, returns state and render function for a MenuGridCell.
  */ export function useMenuGridCell_unstable(props, ref) {
     const { visuallyHidden } = props;
-    const validateNestingRef = useValidateNesting('MenuGridCell');
     const { dir } = useFluent();
-    const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;
+    const validateNestingRef = useValidateNesting('MenuGridCell');
     const onKeyDownWithPrevent = useEventCallback((event)=>{
+        const CloseArrowKey = dir === 'ltr' ? ArrowLeft : ArrowRight;
         if (event.key === CloseArrowKey) {
             event.preventDefault();
         }

package/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,UAAU,QAAQ,0BAA0B;AAChE,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,wBAAwB,EACxBC,IAAI,QACC,4BAA4B;AAEnC,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;CAEC,GACD,OAAO,SAASC,yBAAyBC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAC3B,MAAMG,qBAAqBL,mBAAmB;IAC9C,MAAM,EAAEM,GAAG,EAAE,GAAGd;IAEhB,MAAMe,gBAAgBD,QAAQ,QAAQb,YAAYC;IAClD,MAAMc,uBAAuBZ,iBAAiB,CAACa;QAC7C,IAAIA,MAAMC,GAAG,KAAKH,eAAe;YAC/BE,MAAME,cAAc;QACtB;IACF;IACA,MAAMC,YAAYhB,iBAAiBC,eAAeK,MAAMU,SAAS,EAAEJ;IAEnE,OAAO;QACLJ;QACAS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,KAAKgB,MAAM,CACfjB,yBAAyB,OAAO;YAC9BK,KAAKR,cAAcQ,KAAKE;YACxBW,MAAM;YACN,GAAGd,KAAK;YACRU;QACF,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF"}
+{"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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,UAAU,QAAQ,0BAA0B;AAChE,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,wBAAwB,EACxBC,IAAI,QACC,4BAA4B;AAEnC,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;CAEC,GACD,OAAO,SAASC,yBAAyBC,KAAwB,EAAEC,GAA8B;IAC/F,MAAM,EAAEC,cAAc,EAAE,GAAGF;IAE3B,MAAM,EAAEG,GAAG,EAAE,GAAGb;IAChB,MAAMc,qBAAqBN,mBAAmB;IAE9C,MAAMO,uBAAuBX,iBAAiB,CAACY;QAC7C,MAAMC,gBAAgBJ,QAAQ,QAAQZ,YAAYC;QAElD,IAAIc,MAAME,GAAG,KAAKD,eAAe;YAC/BD,MAAMG,cAAc;QACtB;IACF;IACA,MAAMC,YAAYhB,iBAAiBC,eAAeK,MAAMU,SAAS,EAAEL;IAEnE,OAAO;QACLH;QACAS,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,KAAKgB,MAAM,CACfjB,yBAAyB,OAAO;YAC9BK,KAAKR,cAAcQ,KAAKG;YACxBU,MAAM;YACN,GAAGd,KAAK;YACRU;QACF,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF"}

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

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

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

@@ -1,9 +1,15 @@
 'use client';
-import { mergeClasses, makeStyles } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 export const menuGridCellClassNames = {
     root: 'fui-MenuGridCell'
 };
 const useRootStyles = makeStyles({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        minHeight: '24px'
+    },
     visuallyHidden: {
         position: 'absolute'
     }
@@ -11,6 +17,6 @@ const useRootStyles = makeStyles({
 export const useMenuGridCellStyles_unstable = (state)=>{
     'use no memo';
     const rootStyles = useRootStyles();
-    state.root.className = mergeClasses(menuGridCellClassNames.root, state.visuallyHidden && rootStyles.visuallyHidden, state.root.className);
+    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 { mergeClasses, makeStyles } from '@griffel/react';\nimport type { MenuGridCellSlots, MenuGridCellState } from './MenuGridCell.types';\n\nexport const menuGridCellClassNames: SlotClassNames<MenuGridCellSlots> = {\n  root: 'fui-MenuGridCell',\n};\n\nconst useRootStyles = makeStyles({\n  visuallyHidden: {\n    position: 'absolute',\n  },\n});\n\nexport const useMenuGridCellStyles_unstable = (state: MenuGridCellState): MenuGridCellState => {\n  'use no memo';\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    menuGridCellClassNames.root,\n    state.visuallyHidden && rootStyles.visuallyHidden,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["mergeClasses","makeStyles","menuGridCellClassNames","root","useRootStyles","visuallyHidden","position","useMenuGridCellStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;AAGA,SAASA,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAgBH,WAAW;IAC/BI,gBAAgB;QACdC,UAAU;IACZ;AACF;AAEA,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,aAAaL;IACnBI,MAAML,IAAI,CAACO,SAAS,GAAGV,aACrBE,uBAAuBC,IAAI,EAC3BK,MAAMH,cAAc,IAAII,WAAWJ,cAAc,EACjDG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"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"}

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

@@ -1,4 +1,6 @@
-import { mergeClasses } from '@griffel/react';
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
 export const menuGridItemClassNames = {
   root: 'fui-MenuGridItem',
   icon: 'fui-MenuGridRow__icon',
@@ -7,9 +9,20 @@ export const menuGridItemClassNames = {
   firstSubAction: 'fui-MenuGridRow__firstSubAction',
   secondSubAction: 'fui-MenuGridRow__secondSubAction'
 };
+const useStyles = /*#__PURE__*/__styles({
+  content: {
+    Bh6795r: "fqerorx"
+  }
+}, {
+  d: [".fqerorx{flex-grow:1;}"]
+});
 export const useMenuGridItemStyles_unstable = state => {
   'use no memo';
 
+  const rootStyles = useStyles();
   state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);
+  if (state.content) {
+    state.content.className = mergeClasses(menuGridItemClassNames.content, rootStyles.content, state.content.className);
+  }
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useMenuGridItemStyles_unstable","state","className"],"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"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE,kBAAkB;EACxBC,IAAI,EAAE,uBAAuB;EAC7BC,OAAO,EAAE,0BAA0B;EACnCC,OAAO,EAAE,0BAA0B;EACnCC,cAAc,EAAE,iCAAiC;EACjDC,eAAe,EAAE;AACrB,CAAC;AACD,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACbA,KAAK,CAACP,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEO,KAAK,CAACP,IAAI,CAACQ,SAAS,CAAC;EACtF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useStyles","Bh6795r","d","useMenuGridItemStyles_unstable","state","rootStyles","className"],"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    }\n});\nexport const useMenuGridItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useStyles();\n    state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuGridItemClassNames.content, rootStyles.content, state.content.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,uBAAuB;EAC7BC,OAAO,EAAE,0BAA0B;EACnCC,OAAO,EAAE,0BAA0B;EACnCC,cAAc,EAAE,iCAAiC;EACjDC,eAAe,EAAE;AACrB,CAAC;AACD,MAAMC,SAAS,gBAAGT,QAAA;EAAAK,OAAA;IAAAK,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,UAAU,GAAGL,SAAS,CAAC,CAAC;EAC9BI,KAAK,CAACV,IAAI,CAACY,SAAS,GAAGd,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;EACtF,IAAIF,KAAK,CAACR,OAAO,EAAE;IACfQ,KAAK,CAACR,OAAO,CAACU,SAAS,GAAGd,YAAY,CAACC,sBAAsB,CAACG,OAAO,EAAES,UAAU,CAACT,OAAO,EAAEQ,KAAK,CAACR,OAAO,CAACU,SAAS,CAAC;EACvH;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1,4 +1,5 @@
-import { mergeClasses } from '@griffel/react';
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
 export const menuGridItemClassNames = {
     root: 'fui-MenuGridItem',
     icon: 'fui-MenuGridRow__icon',
@@ -7,8 +8,17 @@ export const menuGridItemClassNames = {
     firstSubAction: 'fui-MenuGridRow__firstSubAction',
     secondSubAction: 'fui-MenuGridRow__secondSubAction'
 };
+const useStyles = makeStyles({
+    content: {
+        flexGrow: 1
+    }
+});
 export const useMenuGridItemStyles_unstable = (state)=>{
     'use no memo';
+    const rootStyles = useStyles();
     state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);
+    if (state.content) {
+        state.content.className = mergeClasses(menuGridItemClassNames.content, rootStyles.content, state.content.className);
+    }
     return state;
 };

package/lib/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":"AACA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;IACNC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,gBAAgB;IAChBC,iBAAiB;AACnB,EAAE;AAEF,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEAA,MAAMP,IAAI,CAACQ,SAAS,GAAGV,aAAaC,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  },\n});\n\nexport const useMenuGridItemStyles_unstable = (state: MenuGridItemState): MenuGridItemState => {\n  'use no memo';\n\n  const rootStyles = useStyles();\n\n  state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuGridItemClassNames.content, rootStyles.content, state.content.className);\n  }\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useStyles","flexGrow","useMenuGridItemStyles_unstable","state","rootStyles","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;IACZ;AACF;AAEA,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,aAAaJ;IAEnBG,MAAMT,IAAI,CAACW,SAAS,GAAGb,aAAaC,uBAAuBC,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAErF,IAAIF,MAAMP,OAAO,EAAE;QACjBO,MAAMP,OAAO,CAACS,SAAS,GAAGb,aAAaC,uBAAuBG,OAAO,EAAEQ,WAAWR,OAAO,EAAEO,MAAMP,OAAO,CAACS,SAAS;IACpH;IACA,OAAOF;AACT,EAAE"}

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

@@ -1,10 +1,22 @@
-import { mergeClasses } from '@griffel/react';
+'use client';
+
+import { mergeClasses, __resetStyles } from '@griffel/react';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 export 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__*/__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);}}"]
+});
 export const useMenuGridRowStyles_unstable = state => {
   'use no memo';
 
-  state.root.className = mergeClasses(menuGridRowClassNames.root, state.root.className);
+  const rootBaseStyles = useRootBaseStyles();
+  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","menuGridRowClassNames","root","useMenuGridRowStyles_unstable","state","className"],"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"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACbA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,qBAAqB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EACrF,OAAOD,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    '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":[]}

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

@@ -1,9 +1,61 @@
-import { mergeClasses } from '@griffel/react';
+'use client';
+import { mergeClasses, makeResetStyles } from '@griffel/react';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+import { tokens } from '@fluentui/react-theme';
+import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 export 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 = makeResetStyles({
+    borderRadius: tokens.borderRadiusMedium,
+    position: 'relative',
+    color: tokens.colorNeutralForeground2,
+    backgroundColor: tokens.colorNeutralBackground1,
+    padding: `${tokens.spacingVerticalXS} ${tokens.spacingVerticalSNudge}`,
+    boxSizing: 'border-box',
+    maxWidth: '290px',
+    minHeight: '32px',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'start',
+    fontSize: tokens.fontSizeBase300,
+    cursor: 'pointer',
+    gap: '4px',
+    userSelect: 'none',
+    ...createFocusOutlineStyle(),
+    ':hover': {
+        backgroundColor: tokens.colorNeutralBackground1Hover,
+        color: tokens.colorNeutralForeground2Hover,
+        [`& .${iconFilledClassName}`]: {
+            display: 'inline'
+        },
+        [`& .${iconRegularClassName}`]: {
+            display: 'none'
+        }
+    },
+    ':hover:active': {
+        backgroundColor: tokens.colorNeutralBackground1Pressed,
+        color: tokens.colorNeutralForeground2Pressed
+    },
+    // High contrast styles
+    '@media (forced-colors: active)': {
+        ':hover': {
+            backgroundColor: 'Canvas',
+            borderColor: 'Highlight',
+            color: 'Highlight'
+        },
+        ...createFocusOutlineStyle({
+            style: {
+                outlineColor: 'Highlight'
+            }
+        })
+    }
+});
 export const useMenuGridRowStyles_unstable = (state)=>{
     'use no memo';
-    state.root.className = mergeClasses(menuGridRowClassNames.root, state.root.className);
+    const rootBaseStyles = useRootBaseStyles();
+    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":["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":"AACA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEAA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,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;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"}

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/MenuGridItem/useMenuGridItemStyles.styles.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -25,8 +26,21 @@ const menuGridItemClassNames = {
     firstSubAction: 'fui-MenuGridRow__firstSubAction',
     secondSubAction: 'fui-MenuGridRow__secondSubAction'
 };
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    content: {
+        Bh6795r: "fqerorx"
+    }
+}, {
+    d: [
+        ".fqerorx{flex-grow:1;}"
+    ]
+});
 const useMenuGridItemStyles_unstable = (state)=>{
     'use no memo';
+    const rootStyles = useStyles();
     state.root.className = (0, _react.mergeClasses)(menuGridItemClassNames.root, state.root.className);
+    if (state.content) {
+        state.content.className = (0, _react.mergeClasses)(menuGridItemClassNames.content, rootStyles.content, state.content.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    }\n});\nexport const useMenuGridItemStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useStyles();\n    state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n    if (state.content) {\n        state.content.className = mergeClasses(menuGridItemClassNames.content, rootStyles.content, state.content.className);\n    }\n    return state;\n};\n"],"names":["__styles","mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useStyles","Bh6795r","d","useMenuGridItemStyles_unstable","state","rootStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,sBAAsB;;;kCAaQ;;;;uBAdF,gBAAgB;AAClD,+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;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAK,OAAA,EAAA;QAAAK,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AACK,MAAMC,kCAAkCC,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,UAAU,GAAGL,SAAS,CAAC,CAAC;IAC9BI,KAAK,CAACV,IAAI,CAACY,SAAS,OAAGd,mBAAY,EAACC,sBAAsB,CAACC,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;IACtF,IAAIF,KAAK,CAACR,OAAO,EAAE;QACfQ,KAAK,CAACR,OAAO,CAACU,SAAS,OAAGd,mBAAY,EAACC,sBAAsB,CAACG,OAAO,EAAES,UAAU,CAACT,OAAO,EAAEQ,KAAK,CAACR,OAAO,CAACU,SAAS,CAAC;IACvH;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,17 @@ const menuGridItemClassNames = {
     firstSubAction: 'fui-MenuGridRow__firstSubAction',
     secondSubAction: 'fui-MenuGridRow__secondSubAction'
 };
+const useStyles = (0, _react.makeStyles)({
+    content: {
+        flexGrow: 1
+    }
+});
 const useMenuGridItemStyles_unstable = (state)=>{
     'use no memo';
+    const rootStyles = useStyles();
     state.root.className = (0, _react.mergeClasses)(menuGridItemClassNames.root, state.root.className);
+    if (state.content) {
+        state.content.className = (0, _react.mergeClasses)(menuGridItemClassNames.content, rootStyles.content, state.content.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  },\n});\n\nexport const useMenuGridItemStyles_unstable = (state: MenuGridItemState): MenuGridItemState => {\n  'use no memo';\n\n  const rootStyles = useStyles();\n\n  state.root.className = mergeClasses(menuGridItemClassNames.root, state.root.className);\n\n  if (state.content) {\n    state.content.className = mergeClasses(menuGridItemClassNames.content, rootStyles.content, state.content.className);\n  }\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","menuGridItemClassNames","root","icon","content","subText","firstSubAction","secondSubAction","useStyles","flexGrow","useMenuGridItemStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,sBAAAA;;;kCAeAS;;;;uBAlB4B,iBAAiB;AAGnD,+BAAkE;IACvER,MAAM;IACNC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,gBAAgB;IAChBC,iBAAiB;AACnB,EAAE;AAEF,MAAMC,gBAAYT,iBAAAA,EAAW;IAC3BK,SAAS;QACPK,UAAU;IACZ;AACF;AAEO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,aAAaJ;IAEnBG,MAAMT,IAAI,CAACW,SAAS,GAAGb,uBAAAA,EAAaC,uBAAuBC,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAErF,IAAIF,MAAMP,OAAO,EAAE;QACjBO,MAAMP,OAAO,CAACS,SAAS,OAAGb,mBAAAA,EAAaC,uBAAuBG,OAAO,EAAEQ,WAAWR,OAAO,EAAEO,MAAMP,OAAO,CAACS,SAAS;IACpH;IACA,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu-grid-preview",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "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.3",
+    "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-table": "^9.19.3",
+    "@fluentui/react-tabster": "^9.26.8",
+    "@fluentui/react-jsx-runtime": "^9.3.1",
     "@fluentui/react-shared-contexts": "^9.25.2",
     "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-utilities": "^9.25.1",
+    "@fluentui/react-utilities": "^9.25.2",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },