@fluentui/react-menu-grid-preview 0.2.11 → 0.3.1

package/CHANGELOG.md

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-menu-grid-preview
 
-This log was last generated on Tue, 03 Mar 2026 09:41:33 GMT and should not be manually modified.
+This log was last generated on Wed, 11 Mar 2026 12:58:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.3.1)
+
+Wed, 11 Mar 2026 12:58:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.3.0..@fluentui/react-menu-grid-preview_v0.3.1)
+
+### Patches
+
+- fix(react-menu-grid-preview): submenus inside MenuGrid now stay open when moving mouse from trigger to submenu popover ([PR #35862](https://github.com/microsoft/fluentui/pull/35862) by bernardo.sunderhus@gmail.com)
+
+## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.3.0)
+
+Wed, 11 Mar 2026 09:22:21 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.2.11..@fluentui/react-menu-grid-preview_v0.3.0)
+
+### Minor changes
+
+- Proper onClick handling for MenuGridRow ([PR #35795](https://github.com/microsoft/fluentui/pull/35795) by adam.samec@gmail.com)
+- Bump @fluentui/react-table to v9.19.11 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
+
 ## [0.2.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.2.11)
 
-Tue, 03 Mar 2026 09:41:33 GMT 
+Tue, 03 Mar 2026 09:43:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.2.10..@fluentui/react-menu-grid-preview_v0.2.11)
 
 ### Patches

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
+import type { MenuListContextValue } from '@fluentui/react-menu';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -49,6 +50,7 @@ export declare type MenuGridContextValue = {
 
 export declare type MenuGridContextValues = {
     menuGrid: MenuGridContextValue;
+    menuList: MenuListContextValue;
 };
 
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/MenuGrid.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\n\nimport type { MenuGridContextValue } from '../../contexts/menuGridContext';\n\nexport type MenuGridSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuGridProps = ComponentProps<MenuGridSlots> & {};\n\nexport type MenuGridState = ComponentState<MenuGridSlots> & {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n};\n\nexport type MenuGridContextValues = {\n  menuGrid: MenuGridContextValue;\n};\n"],"names":[],"mappings":"AAkBA,WAEE"}
+{"version":3,"sources":["../src/components/MenuGrid/MenuGrid.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport type { MenuListContextValue } from '@fluentui/react-menu';\n\nimport type { MenuGridContextValue } from '../../contexts/menuGridContext';\n\nexport type MenuGridSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuGridProps = ComponentProps<MenuGridSlots> & {};\n\nexport type MenuGridState = ComponentState<MenuGridSlots> & {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n};\n\nexport type MenuGridContextValues = {\n  menuGrid: MenuGridContextValue;\n  menuList: MenuListContextValue;\n};\n"],"names":[],"mappings":"AAmBA,WAGE"}

package/lib/components/MenuGrid/renderMenuGrid.js

@@ -1,12 +1,16 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
+import { MenuListProvider } from '@fluentui/react-menu';
 import { MenuGridContextProvider } from '../../contexts/menuGridContext';
 /**
  * Function that renders the final JSX of the component
  */ export const renderMenuGrid_unstable = (state, contextValues)=>{
     assertSlots(state);
-    return /*#__PURE__*/ _jsx(MenuGridContextProvider, {
-        value: contextValues.menuGrid,
-        children: /*#__PURE__*/ _jsx(state.root, {})
+    return /*#__PURE__*/ _jsx(MenuListProvider, {
+        value: contextValues.menuList,
+        children: /*#__PURE__*/ _jsx(MenuGridContextProvider, {
+            value: contextValues.menuGrid,
+            children: /*#__PURE__*/ _jsx(state.root, {})
+        })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/renderMenuGrid.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { MenuGridContextValues, MenuGridSlots, MenuGridState } from './MenuGrid.types';\nimport { MenuGridContextProvider } from '../../contexts/menuGridContext';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuGrid_unstable = (state: MenuGridState, contextValues: MenuGridContextValues): JSXElement => {\n  assertSlots<MenuGridSlots>(state);\n\n  return (\n    <MenuGridContextProvider value={contextValues.menuGrid}>\n      <state.root />\n    </MenuGridContextProvider>\n  );\n};\n"],"names":["assertSlots","MenuGridContextProvider","renderMenuGrid_unstable","state","contextValues","value","menuGrid","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,uBAAuB,QAAQ,iCAAiC;AAEzE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACF;QAAwBI,OAAOD,cAAcE,QAAQ;kBACpD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/MenuGrid/renderMenuGrid.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { MenuListProvider } from '@fluentui/react-menu';\nimport { MenuGridContextValues, MenuGridSlots, MenuGridState } from './MenuGrid.types';\nimport { MenuGridContextProvider } from '../../contexts/menuGridContext';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuGrid_unstable = (state: MenuGridState, contextValues: MenuGridContextValues): JSXElement => {\n  assertSlots<MenuGridSlots>(state);\n\n  return (\n    <MenuListProvider value={contextValues.menuList}>\n      <MenuGridContextProvider value={contextValues.menuGrid}>\n        <state.root />\n      </MenuGridContextProvider>\n    </MenuListProvider>\n  );\n};\n"],"names":["assertSlots","MenuListProvider","MenuGridContextProvider","renderMenuGrid_unstable","state","contextValues","value","menuList","menuGrid","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,SAASC,uBAAuB,QAAQ,iCAAiC;AAEzE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DL,YAA2BI;IAE3B,qBACE,KAACH;QAAiBK,OAAOD,cAAcE,QAAQ;kBAC7C,cAAA,KAACL;YAAwBI,OAAOD,cAAcG,QAAQ;sBACpD,cAAA,KAACJ,MAAMK,IAAI;;;AAInB,EAAE"}

package/lib/components/MenuGrid/useMenuGrid.js

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { useMergedRefs, useEventCallback, mergeCallbacks, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useTableCompositeNavigation } from '@fluentui/react-table';
+import { useMergedTabsterAttributes_unstable, useTabsterAttributes } from '@fluentui/react-tabster';
 import { useMenuContext_unstable } from '@fluentui/react-menu';
 import { useValidateNesting } from '../../utils/useValidateNesting';
 /**
@@ -11,6 +12,14 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
     const triggerId = useMenuContext_unstable((context)=>context.triggerId);
     const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();
     const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));
+    const ignoreEnterKeyAttribute = useTabsterAttributes({
+        focusable: {
+            ignoreKeydown: {
+                Enter: true
+            }
+        }
+    });
+    const mergedRowTabsterAttribute = useMergedTabsterAttributes_unstable(tableRowTabsterAttribute, ignoreEnterKeyAttribute);
     return {
         components: {
             root: 'div'
@@ -25,6 +34,6 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
         }), {
             elementType: 'div'
         }),
-        tableRowTabsterAttribute
+        tableRowTabsterAttribute: mergedRowTabsterAttribute
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/useMenuGrid.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  mergeCallbacks,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\n\nimport { useTableCompositeNavigation } from '@fluentui/react-table';\nimport type { MenuGridProps, MenuGridState } from './MenuGrid.types';\nimport { useMenuContext_unstable } from '@fluentui/react-menu';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuGrid_unstable = (props: MenuGridProps, ref: React.Ref<HTMLDivElement>): MenuGridState => {\n  const validateNestingRef = useValidateNesting('MenuGrid');\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'grid',\n        'aria-labelledby': triggerId,\n        ...tableTabsterAttribute,\n        ...props,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n    tableRowTabsterAttribute,\n  };\n};\n"],"names":["React","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useTableCompositeNavigation","useMenuContext_unstable","useValidateNesting","useMenuGrid_unstable","props","ref","validateNestingRef","triggerId","context","tableRowTabsterAttribute","tableTabsterAttribute","onTableKeyDown","onKeyDown","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,wBAAwB,EACxBC,IAAI,QACC,4BAA4B;AAEnC,SAASC,2BAA2B,QAAQ,wBAAwB;AAEpE,SAASC,uBAAuB,QAAQ,uBAAuB;AAC/D,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,qBAAqBJ,mBAAmB;IAC9C,MAAMK,YAAYN,wBAAwBO,CAAAA,UAAWA,QAAQD,SAAS;IACtE,MAAM,EAAEE,wBAAwB,EAAEC,qBAAqB,EAAEC,cAAc,EAAE,GAAGX;IAC5E,MAAMY,YAAYhB,iBAAiBC,eAAeO,MAAMQ,SAAS,EAAED;IAEnE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,KAAKgB,MAAM,CACfjB,yBAAyB,OAAO;YAC9BO,KAAKV,cAAcU,KAAKC;YACxBU,MAAM;YACN,mBAAmBT;YACnB,GAAGG,qBAAqB;YACxB,GAAGN,KAAK;YACRQ;QACF,IACA;YAAEK,aAAa;QAAM;QAEvBR;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuGrid/useMenuGrid.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  mergeCallbacks,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\n\nimport { useTableCompositeNavigation } from '@fluentui/react-table';\nimport { useMergedTabsterAttributes_unstable, useTabsterAttributes } from '@fluentui/react-tabster';\nimport type { MenuGridProps, MenuGridState } from './MenuGrid.types';\nimport { useMenuContext_unstable } from '@fluentui/react-menu';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuGrid_unstable = (props: MenuGridProps, ref: React.Ref<HTMLDivElement>): MenuGridState => {\n  const validateNestingRef = useValidateNesting('MenuGrid');\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));\n\n  const ignoreEnterKeyAttribute = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: { Enter: true },\n    },\n  });\n\n  const mergedRowTabsterAttribute = useMergedTabsterAttributes_unstable(\n    tableRowTabsterAttribute,\n    ignoreEnterKeyAttribute,\n  );\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'grid',\n        'aria-labelledby': triggerId,\n        ...tableTabsterAttribute,\n        ...props,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n    tableRowTabsterAttribute: mergedRowTabsterAttribute,\n  };\n};\n"],"names":["React","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useTableCompositeNavigation","useMergedTabsterAttributes_unstable","useTabsterAttributes","useMenuContext_unstable","useValidateNesting","useMenuGrid_unstable","props","ref","validateNestingRef","triggerId","context","tableRowTabsterAttribute","tableTabsterAttribute","onTableKeyDown","onKeyDown","ignoreEnterKeyAttribute","focusable","ignoreKeydown","Enter","mergedRowTabsterAttribute","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,wBAAwB,EACxBC,IAAI,QACC,4BAA4B;AAEnC,SAASC,2BAA2B,QAAQ,wBAAwB;AACpE,SAASC,mCAAmC,EAAEC,oBAAoB,QAAQ,0BAA0B;AAEpG,SAASC,uBAAuB,QAAQ,uBAAuB;AAC/D,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAMC,qBAAqBJ,mBAAmB;IAC9C,MAAMK,YAAYN,wBAAwBO,CAAAA,UAAWA,QAAQD,SAAS;IACtE,MAAM,EAAEE,wBAAwB,EAAEC,qBAAqB,EAAEC,cAAc,EAAE,GAAGb;IAC5E,MAAMc,YAAYlB,iBAAiBC,eAAeS,MAAMQ,SAAS,EAAED;IAEnE,MAAME,0BAA0Bb,qBAAqB;QACnDc,WAAW;YACTC,eAAe;gBAAEC,OAAO;YAAK;QAC/B;IACF;IAEA,MAAMC,4BAA4BlB,oCAChCU,0BACAI;IAGF,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMtB,KAAKuB,MAAM,CACfxB,yBAAyB,OAAO;YAC9BS,KAAKZ,cAAcY,KAAKC;YACxBe,MAAM;YACN,mBAAmBd;YACnB,GAAGG,qBAAqB;YACxB,GAAGN,KAAK;YACRQ;QACF,IACA;YAAEU,aAAa;QAAM;QAEvBb,0BAA0BQ;IAC5B;AACF,EAAE"}

package/lib/components/MenuGrid/useMenuGridContextValues.js

@@ -1,5 +1,10 @@
 'use client';
 import * as React from 'react';
+const menuList = {
+    checkedValues: {},
+    hasIcons: false,
+    hasCheckmarks: false
+};
 export function useMenuGridContextValues_unstable(state) {
     const { tableRowTabsterAttribute } = state;
     const menuGrid = React.useMemo(()=>({
@@ -8,6 +13,7 @@ export function useMenuGridContextValues_unstable(state) {
         tableRowTabsterAttribute
     ]);
     return {
-        menuGrid
+        menuGrid,
+        menuList
     };
 }

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

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

package/lib/components/MenuGridRow/useMenuGridRow.js

@@ -1,6 +1,7 @@
 'use client';
 import * as React from 'react';
-import { useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { Enter, Space } from '@fluentui/keyboard-keys';
+import { useMergedRefs, useEventCallback, mergeCallbacks, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useMenuGridContext_unstable } from '../../contexts/menuGridContext';
 import { useValidateNesting } from '../../utils/useValidateNesting';
 /**
@@ -8,6 +9,23 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
  */ export function useMenuGridRow_unstable(props, ref) {
     const validateNestingRef = useValidateNesting('MenuGridRow');
     const { tableRowTabsterAttribute } = useMenuGridContext_unstable();
+    const onKeyDownToClick = useEventCallback((event)=>{
+        if (!event.isDefaultPrevented() && (event.key === Enter || event.key === Space) && event.target === event.currentTarget) {
+            event.currentTarget.click();
+        }
+    });
+    const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onKeyDownToClick));
+    const onClick = useEventCallback((event)=>{
+        var _props_onClick;
+        let element = event.target;
+        while(element && element !== event.currentTarget){
+            if (element.tabIndex >= 0) {
+                return;
+            }
+            element = element.parentElement;
+        }
+        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
+    });
     return {
         components: {
             root: 'div'
@@ -17,7 +35,9 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
             role: 'row',
             tabIndex: 0,
             ...tableRowTabsterAttribute,
-            ...props
+            ...props,
+            onKeyDown,
+            onClick
         }), {
             elementType: 'div'
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useMenuGridContext_unstable } from '../../contexts/menuGridContext';\nimport { MenuGridRowProps, MenuGridRowState } from './MenuGridRow.types';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Given user props, returns state and render function for a MenuGridRow.\n */\nexport function useMenuGridRow_unstable(props: MenuGridRowProps, ref: React.Ref<HTMLDivElement>): MenuGridRowState {\n  const validateNestingRef = useValidateNesting('MenuGridRow');\n  const { tableRowTabsterAttribute } = useMenuGridContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'row',\n        tabIndex: 0,\n        ...tableRowTabsterAttribute,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useMergedRefs","getIntrinsicElementProps","slot","useMenuGridContext_unstable","useValidateNesting","useMenuGridRow_unstable","props","ref","validateNestingRef","tableRowTabsterAttribute","components","root","always","role","tabIndex","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE1F,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;CAEC,GACD,OAAO,SAASC,wBAAwBC,KAAuB,EAAEC,GAA8B;IAC7F,MAAMC,qBAAqBJ,mBAAmB;IAC9C,MAAM,EAAEK,wBAAwB,EAAE,GAAGN;IAErC,OAAO;QACLO,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,KAAKU,MAAM,CACfX,yBAAyB,OAAO;YAC9BM,KAAKP,cAAcO,KAAKC;YACxBK,MAAM;YACNC,UAAU;YACV,GAAGL,wBAAwB;YAC3B,GAAGH,KAAK;QACV,IACA;YAAES,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  mergeCallbacks,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\n\nimport { useMenuGridContext_unstable } from '../../contexts/menuGridContext';\nimport { MenuGridRowProps, MenuGridRowState } from './MenuGridRow.types';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Given user props, returns state and render function for a MenuGridRow.\n */\nexport function useMenuGridRow_unstable(props: MenuGridRowProps, ref: React.Ref<HTMLDivElement>): MenuGridRowState {\n  const validateNestingRef = useValidateNesting('MenuGridRow');\n  const { tableRowTabsterAttribute } = useMenuGridContext_unstable();\n\n  const onKeyDownToClick = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (\n      !event.isDefaultPrevented() &&\n      (event.key === Enter || event.key === Space) &&\n      event.target === event.currentTarget\n    ) {\n      event.currentTarget.click();\n    }\n  });\n\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onKeyDownToClick));\n\n  const onClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    let element = event.target as HTMLElement | null;\n    while (element && element !== event.currentTarget) {\n      if (element.tabIndex >= 0) {\n        return;\n      }\n      element = element.parentElement;\n    }\n    props.onClick?.(event);\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'row',\n        tabIndex: 0,\n        ...tableRowTabsterAttribute,\n        ...props,\n        onKeyDown,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","Enter","Space","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useMenuGridContext_unstable","useValidateNesting","useMenuGridRow_unstable","props","ref","validateNestingRef","tableRowTabsterAttribute","onKeyDownToClick","event","isDefaultPrevented","key","target","currentTarget","click","onKeyDown","onClick","element","tabIndex","parentElement","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AACvD,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,wBAAwB,EACxBC,IAAI,QACC,4BAA4B;AAEnC,SAASC,2BAA2B,QAAQ,iCAAiC;AAE7E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;CAEC,GACD,OAAO,SAASC,wBAAwBC,KAAuB,EAAEC,GAA8B;IAC7F,MAAMC,qBAAqBJ,mBAAmB;IAC9C,MAAM,EAAEK,wBAAwB,EAAE,GAAGN;IAErC,MAAMO,mBAAmBX,iBAAiB,CAACY;QACzC,IACE,CAACA,MAAMC,kBAAkB,MACxBD,CAAAA,MAAME,GAAG,KAAKjB,SAASe,MAAME,GAAG,KAAKhB,KAAI,KAC1Cc,MAAMG,MAAM,KAAKH,MAAMI,aAAa,EACpC;YACAJ,MAAMI,aAAa,CAACC,KAAK;QAC3B;IACF;IAEA,MAAMC,YAAYlB,iBAAiBC,eAAeM,MAAMW,SAAS,EAAEP;IAEnE,MAAMQ,UAAUnB,iBAAiB,CAACY;YAQhCL;QAPA,IAAIa,UAAUR,MAAMG,MAAM;QAC1B,MAAOK,WAAWA,YAAYR,MAAMI,aAAa,CAAE;YACjD,IAAII,QAAQC,QAAQ,IAAI,GAAG;gBACzB;YACF;YACAD,UAAUA,QAAQE,aAAa;QACjC;SACAf,iBAAAA,MAAMY,OAAO,cAAbZ,qCAAAA,oBAAAA,OAAgBK;IAClB;IAEA,OAAO;QACLW,YAAY;YACVC,MAAM;QACR;QACAA,MAAMrB,KAAKsB,MAAM,CACfvB,yBAAyB,OAAO;YAC9BM,KAAKT,cAAcS,KAAKC;YACxBiB,MAAM;YACNL,UAAU;YACV,GAAGX,wBAAwB;YAC3B,GAAGH,KAAK;YACRW;YACAC;QACF,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF"}

package/lib-commonjs/components/MenuGrid/MenuGrid.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/MenuGrid.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\n\nimport type { MenuGridContextValue } from '../../contexts/menuGridContext';\n\nexport type MenuGridSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuGridProps = ComponentProps<MenuGridSlots> & {};\n\nexport type MenuGridState = ComponentState<MenuGridSlots> & {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n};\n\nexport type MenuGridContextValues = {\n  menuGrid: MenuGridContextValue;\n};\n"],"names":[],"mappings":""}
+{"version":3,"sources":["../src/components/MenuGrid/MenuGrid.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport type { MenuListContextValue } from '@fluentui/react-menu';\n\nimport type { MenuGridContextValue } from '../../contexts/menuGridContext';\n\nexport type MenuGridSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuGridProps = ComponentProps<MenuGridSlots> & {};\n\nexport type MenuGridState = ComponentState<MenuGridSlots> & {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n};\n\nexport type MenuGridContextValues = {\n  menuGrid: MenuGridContextValue;\n  menuList: MenuListContextValue;\n};\n"],"names":[],"mappings":""}

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

@@ -10,11 +10,15 @@ Object.defineProperty(exports, "renderMenuGrid_unstable", {
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
+const _reactmenu = require("@fluentui/react-menu");
 const _menuGridContext = require("../../contexts/menuGridContext");
 const renderMenuGrid_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_menuGridContext.MenuGridContextProvider, {
-        value: contextValues.menuGrid,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmenu.MenuListProvider, {
+        value: contextValues.menuList,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_menuGridContext.MenuGridContextProvider, {
+            value: contextValues.menuGrid,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
+        })
     });
 };

package/lib-commonjs/components/MenuGrid/renderMenuGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/renderMenuGrid.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { MenuGridContextValues, MenuGridSlots, MenuGridState } from './MenuGrid.types';\nimport { MenuGridContextProvider } from '../../contexts/menuGridContext';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuGrid_unstable = (state: MenuGridState, contextValues: MenuGridContextValues): JSXElement => {\n  assertSlots<MenuGridSlots>(state);\n\n  return (\n    <MenuGridContextProvider value={contextValues.menuGrid}>\n      <state.root />\n    </MenuGridContextProvider>\n  );\n};\n"],"names":["assertSlots","MenuGridContextProvider","renderMenuGrid_unstable","state","contextValues","value","menuGrid","root"],"mappings":";;;;+BAUaE;;;;;;4BATb,gDAAiD;gCACrB,4BAA4B;iCAGhB,iCAAiC;AAKlE,gCAAgC,CAACC,OAAsBC;QAC5DJ,2BAAAA,EAA2BG;IAE3B,OAAA,WAAA,OACE,eAAA,EAACF,wCAAAA,EAAAA;QAAwBI,OAAOD,cAAcE,QAAQ;kBACpD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}
+{"version":3,"sources":["../src/components/MenuGrid/renderMenuGrid.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { MenuListProvider } from '@fluentui/react-menu';\nimport { MenuGridContextValues, MenuGridSlots, MenuGridState } from './MenuGrid.types';\nimport { MenuGridContextProvider } from '../../contexts/menuGridContext';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderMenuGrid_unstable = (state: MenuGridState, contextValues: MenuGridContextValues): JSXElement => {\n  assertSlots<MenuGridSlots>(state);\n\n  return (\n    <MenuListProvider value={contextValues.menuList}>\n      <MenuGridContextProvider value={contextValues.menuGrid}>\n        <state.root />\n      </MenuGridContextProvider>\n    </MenuListProvider>\n  );\n};\n"],"names":["assertSlots","MenuListProvider","MenuGridContextProvider","renderMenuGrid_unstable","state","contextValues","value","menuList","menuGrid","root"],"mappings":";;;;+BAWaG;;;;;;4BAVb,gDAAiD;gCACrB,4BAA4B;2BAEvB,uBAAuB;iCAEhB,iCAAiC;AAKlE,gCAAgC,CAACC,OAAsBC;QAC5DL,2BAAAA,EAA2BI;IAE3B,OAAA,WAAA,OACE,eAAA,EAACH,2BAAAA,EAAAA;QAAiBK,OAAOD,cAAcE,QAAQ;kBAC7C,WAAA,OAAA,eAAA,EAACL,wCAAAA,EAAAA;YAAwBI,OAAOD,cAAcG,QAAQ;sBACpD,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA,CAAA;;;AAInB,EAAE"}

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

@@ -13,6 +13,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reacttable = require("@fluentui/react-table");
+const _reacttabster = require("@fluentui/react-tabster");
 const _reactmenu = require("@fluentui/react-menu");
 const _useValidateNesting = require("../../utils/useValidateNesting");
 const useMenuGrid_unstable = (props, ref)=>{
@@ -20,6 +21,14 @@ const useMenuGrid_unstable = (props, ref)=>{
     const triggerId = (0, _reactmenu.useMenuContext_unstable)((context)=>context.triggerId);
     const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = (0, _reacttable.useTableCompositeNavigation)();
     const onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(props.onKeyDown, onTableKeyDown));
+    const ignoreEnterKeyAttribute = (0, _reacttabster.useTabsterAttributes)({
+        focusable: {
+            ignoreKeydown: {
+                Enter: true
+            }
+        }
+    });
+    const mergedRowTabsterAttribute = (0, _reacttabster.useMergedTabsterAttributes_unstable)(tableRowTabsterAttribute, ignoreEnterKeyAttribute);
     return {
         components: {
             root: 'div'
@@ -34,6 +43,6 @@ const useMenuGrid_unstable = (props, ref)=>{
         }), {
             elementType: 'div'
         }),
-        tableRowTabsterAttribute
+        tableRowTabsterAttribute: mergedRowTabsterAttribute
     };
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/useMenuGrid.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  mergeCallbacks,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\n\nimport { useTableCompositeNavigation } from '@fluentui/react-table';\nimport type { MenuGridProps, MenuGridState } from './MenuGrid.types';\nimport { useMenuContext_unstable } from '@fluentui/react-menu';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuGrid_unstable = (props: MenuGridProps, ref: React.Ref<HTMLDivElement>): MenuGridState => {\n  const validateNestingRef = useValidateNesting('MenuGrid');\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'grid',\n        'aria-labelledby': triggerId,\n        ...tableTabsterAttribute,\n        ...props,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n    tableRowTabsterAttribute,\n  };\n};\n"],"names":["React","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useTableCompositeNavigation","useMenuContext_unstable","useValidateNesting","useMenuGrid_unstable","props","ref","validateNestingRef","triggerId","context","tableRowTabsterAttribute","tableTabsterAttribute","onTableKeyDown","onKeyDown","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAmBaS;;;;;;;iEAjBU,QAAQ;gCAOxB,4BAA4B;4BAES,wBAAwB;2BAE5B,uBAAuB;oCAC5B,iCAAiC;AAK7D,6BAA6B,CAACC,OAAsBC;IACzD,MAAMC,yBAAqBJ,sCAAAA,EAAmB;IAC9C,MAAMK,gBAAYN,kCAAAA,EAAwBO,CAAAA,UAAWA,QAAQD,SAAS;IACtE,MAAM,EAAEE,wBAAwB,EAAEC,qBAAqB,EAAEC,cAAc,EAAE,OAAGX,uCAAAA;IAC5E,MAAMY,gBAAYhB,gCAAAA,MAAiBC,8BAAAA,EAAeO,MAAMQ,SAAS,EAAED;IAEnE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,oBAAAA,CAAKgB,MAAM,KACfjB,wCAAAA,EAAyB,OAAO;YAC9BO,SAAKV,6BAAAA,EAAcU,KAAKC;YACxBU,MAAM;YACN,mBAAmBT;YACnB,GAAGG,qBAAqB;YACxB,GAAGN,KAAK;YACRQ;QACF,IACA;YAAEK,aAAa;QAAM;QAEvBR;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/MenuGrid/useMenuGrid.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  mergeCallbacks,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\n\nimport { useTableCompositeNavigation } from '@fluentui/react-table';\nimport { useMergedTabsterAttributes_unstable, useTabsterAttributes } from '@fluentui/react-tabster';\nimport type { MenuGridProps, MenuGridState } from './MenuGrid.types';\nimport { useMenuContext_unstable } from '@fluentui/react-menu';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Returns the props and state required to render the component\n */\nexport const useMenuGrid_unstable = (props: MenuGridProps, ref: React.Ref<HTMLDivElement>): MenuGridState => {\n  const validateNestingRef = useValidateNesting('MenuGrid');\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n  const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));\n\n  const ignoreEnterKeyAttribute = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: { Enter: true },\n    },\n  });\n\n  const mergedRowTabsterAttribute = useMergedTabsterAttributes_unstable(\n    tableRowTabsterAttribute,\n    ignoreEnterKeyAttribute,\n  );\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'grid',\n        'aria-labelledby': triggerId,\n        ...tableTabsterAttribute,\n        ...props,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n    tableRowTabsterAttribute: mergedRowTabsterAttribute,\n  };\n};\n"],"names":["React","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useTableCompositeNavigation","useMergedTabsterAttributes_unstable","useTabsterAttributes","useMenuContext_unstable","useValidateNesting","useMenuGrid_unstable","props","ref","validateNestingRef","triggerId","context","tableRowTabsterAttribute","tableTabsterAttribute","onTableKeyDown","onKeyDown","ignoreEnterKeyAttribute","focusable","ignoreKeydown","Enter","mergedRowTabsterAttribute","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAoBaW;;;;;;;iEAlBU,QAAQ;gCAOxB,4BAA4B;4BAES,wBAAwB;8BACM,0BAA0B;2BAE5D,uBAAuB;oCAC5B,iCAAiC;AAK7D,6BAA6B,CAACC,OAAsBC;IACzD,MAAMC,yBAAqBJ,sCAAAA,EAAmB;IAC9C,MAAMK,gBAAYN,kCAAAA,EAAwBO,CAAAA,UAAWA,QAAQD,SAAS;IACtE,MAAM,EAAEE,wBAAwB,EAAEC,qBAAqB,EAAEC,cAAc,EAAE,OAAGb,uCAAAA;IAC5E,MAAMc,gBAAYlB,gCAAAA,MAAiBC,8BAAAA,EAAeS,MAAMQ,SAAS,EAAED;IAEnE,MAAME,8BAA0Bb,kCAAAA,EAAqB;QACnDc,WAAW;YACTC,eAAe;gBAAEC,OAAO;YAAK;QAC/B;IACF;IAEA,MAAMC,gCAA4BlB,iDAAAA,EAChCU,0BACAI;IAGF,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAMtB,oBAAAA,CAAKuB,MAAM,CACfxB,4CAAAA,EAAyB,OAAO;YAC9BS,SAAKZ,6BAAAA,EAAcY,KAAKC;YACxBe,MAAM;YACN,mBAAmBd;YACnB,GAAGG,qBAAqB;YACxB,GAAGN,KAAK;YACRQ;QACF,IACA;YAAEU,aAAa;QAAM;QAEvBb,0BAA0BQ;IAC5B;AACF,EAAE"}

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

@@ -11,6 +11,11 @@ Object.defineProperty(exports, "useMenuGridContextValues_unstable", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const menuList = {
+    checkedValues: {},
+    hasIcons: false,
+    hasCheckmarks: false
+};
 function useMenuGridContextValues_unstable(state) {
     const { tableRowTabsterAttribute } = state;
     const menuGrid = _react.useMemo(()=>({
@@ -19,6 +24,7 @@ function useMenuGridContextValues_unstable(state) {
         tableRowTabsterAttribute
     ]);
     return {
-        menuGrid
+        menuGrid,
+        menuList
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGrid/useMenuGridContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MenuGridContextValues, MenuGridState } from './MenuGrid.types';\n\nexport function useMenuGridContextValues_unstable(state: MenuGridState): MenuGridContextValues {\n  const { tableRowTabsterAttribute } = state;\n  const menuGrid = React.useMemo(() => ({ tableRowTabsterAttribute }), [tableRowTabsterAttribute]);\n\n  return { menuGrid };\n}\n"],"names":["React","useMenuGridContextValues_unstable","state","tableRowTabsterAttribute","menuGrid","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,wBAAwB,EAAE,GAAGD;IACrC,MAAME,WAAWJ,OAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;SAAyB,CAAA,EAAI;QAACA;KAAyB;IAE/F,OAAO;QAAEC;IAAS;AACpB"}
+{"version":3,"sources":["../src/components/MenuGrid/useMenuGridContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MenuGridContextValues, MenuGridState } from './MenuGrid.types';\n\nconst menuList = {\n  checkedValues: {},\n  hasIcons: false,\n  hasCheckmarks: false,\n};\n\nexport function useMenuGridContextValues_unstable(state: MenuGridState): MenuGridContextValues {\n  const { tableRowTabsterAttribute } = state;\n  const menuGrid = React.useMemo(() => ({ tableRowTabsterAttribute }), [tableRowTabsterAttribute]);\n\n  return { menuGrid, menuList };\n}\n"],"names":["React","menuList","checkedValues","hasIcons","hasCheckmarks","useMenuGridContextValues_unstable","state","tableRowTabsterAttribute","menuGrid","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAG/B,MAAMC,WAAW;IACfC,eAAe,CAAC;IAChBC,UAAU;IACVC,eAAe;AACjB;AAEO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,wBAAwB,EAAE,GAAGD;IACrC,MAAME,WAAWR,OAAMS,OAAO,CAAC,IAAO,CAAA;YAAEF;SAAyB,CAAA,EAAI;QAACA;KAAyB;IAE/F,OAAO;QAAEC;QAAUP;IAAS;AAC9B"}

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

@@ -11,12 +11,30 @@ Object.defineProperty(exports, "useMenuGridRow_unstable", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _keyboardkeys = require("@fluentui/keyboard-keys");
 const _reactutilities = require("@fluentui/react-utilities");
 const _menuGridContext = require("../../contexts/menuGridContext");
 const _useValidateNesting = require("../../utils/useValidateNesting");
 function useMenuGridRow_unstable(props, ref) {
     const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGridRow');
     const { tableRowTabsterAttribute } = (0, _menuGridContext.useMenuGridContext_unstable)();
+    const onKeyDownToClick = (0, _reactutilities.useEventCallback)((event)=>{
+        if (!event.isDefaultPrevented() && (event.key === _keyboardkeys.Enter || event.key === _keyboardkeys.Space) && event.target === event.currentTarget) {
+            event.currentTarget.click();
+        }
+    });
+    const onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(props.onKeyDown, onKeyDownToClick));
+    const onClick = (0, _reactutilities.useEventCallback)((event)=>{
+        var _props_onClick;
+        let element = event.target;
+        while(element && element !== event.currentTarget){
+            if (element.tabIndex >= 0) {
+                return;
+            }
+            element = element.parentElement;
+        }
+        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
+    });
     return {
         components: {
             root: 'div'
@@ -26,7 +44,9 @@ function useMenuGridRow_unstable(props, ref) {
             role: 'row',
             tabIndex: 0,
             ...tableRowTabsterAttribute,
-            ...props
+            ...props,
+            onKeyDown,
+            onClick
         }), {
             elementType: 'div'
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\nimport { useMenuGridContext_unstable } from '../../contexts/menuGridContext';\nimport { MenuGridRowProps, MenuGridRowState } from './MenuGridRow.types';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Given user props, returns state and render function for a MenuGridRow.\n */\nexport function useMenuGridRow_unstable(props: MenuGridRowProps, ref: React.Ref<HTMLDivElement>): MenuGridRowState {\n  const validateNestingRef = useValidateNesting('MenuGridRow');\n  const { tableRowTabsterAttribute } = useMenuGridContext_unstable();\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'row',\n        tabIndex: 0,\n        ...tableRowTabsterAttribute,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","useMergedRefs","getIntrinsicElementProps","slot","useMenuGridContext_unstable","useValidateNesting","useMenuGridRow_unstable","props","ref","validateNestingRef","tableRowTabsterAttribute","components","root","always","role","tabIndex","elementType"],"mappings":"AAAA;;;;;+BAYgBM;;;;;;;iEAVO,QAAQ;gCAC+B,4BAA4B;iCAE9C,iCAAiC;oCAE1C,iCAAiC;AAK7D,iCAAiCC,KAAuB,EAAEC,GAA8B;IAC7F,MAAMC,yBAAqBJ,sCAAAA,EAAmB;IAC9C,MAAM,EAAEK,wBAAwB,EAAE,OAAGN,4CAAAA;IAErC,OAAO;QACLO,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,oBAAAA,CAAKU,MAAM,KACfX,wCAAAA,EAAyB,OAAO;YAC9BM,SAAKP,6BAAAA,EAAcO,KAAKC;YACxBK,MAAM;YACNC,UAAU;YACV,GAAGL,wBAAwB;YAC3B,GAAGH,KAAK;QACV,IACA;YAAES,aAAa;QAAM;IAEzB;AACF"}
+{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport {\n  useMergedRefs,\n  useEventCallback,\n  mergeCallbacks,\n  getIntrinsicElementProps,\n  slot,\n} from '@fluentui/react-utilities';\n\nimport { useMenuGridContext_unstable } from '../../contexts/menuGridContext';\nimport { MenuGridRowProps, MenuGridRowState } from './MenuGridRow.types';\nimport { useValidateNesting } from '../../utils/useValidateNesting';\n\n/**\n * Given user props, returns state and render function for a MenuGridRow.\n */\nexport function useMenuGridRow_unstable(props: MenuGridRowProps, ref: React.Ref<HTMLDivElement>): MenuGridRowState {\n  const validateNestingRef = useValidateNesting('MenuGridRow');\n  const { tableRowTabsterAttribute } = useMenuGridContext_unstable();\n\n  const onKeyDownToClick = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (\n      !event.isDefaultPrevented() &&\n      (event.key === Enter || event.key === Space) &&\n      event.target === event.currentTarget\n    ) {\n      event.currentTarget.click();\n    }\n  });\n\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onKeyDownToClick));\n\n  const onClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    let element = event.target as HTMLElement | null;\n    while (element && element !== event.currentTarget) {\n      if (element.tabIndex >= 0) {\n        return;\n      }\n      element = element.parentElement;\n    }\n    props.onClick?.(event);\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef),\n        role: 'row',\n        tabIndex: 0,\n        ...tableRowTabsterAttribute,\n        ...props,\n        onKeyDown,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n"],"names":["React","Enter","Space","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useMenuGridContext_unstable","useValidateNesting","useMenuGridRow_unstable","props","ref","validateNestingRef","tableRowTabsterAttribute","onKeyDownToClick","event","isDefaultPrevented","key","target","currentTarget","click","onKeyDown","onClick","element","tabIndex","parentElement","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAmBgBU;;;;;;;iEAjBO,QAAQ;8BACF,0BAA0B;gCAOhD,4BAA4B;iCAES,iCAAiC;oCAE1C,iCAAiC;AAK7D,iCAAiCC,KAAuB,EAAEC,GAA8B;IAC7F,MAAMC,yBAAqBJ,sCAAAA,EAAmB;IAC9C,MAAM,EAAEK,wBAAwB,EAAE,GAAGN,gDAAAA;IAErC,MAAMO,uBAAmBX,gCAAAA,EAAiB,CAACY;QACzC,IACE,CAACA,MAAMC,kBAAkB,MACxBD,CAAAA,MAAME,GAAG,KAAKjB,mBAAAA,IAASe,MAAME,GAAG,KAAKhB,mBAAI,AAAJA,KACtCc,MAAMG,MAAM,KAAKH,MAAMI,aAAa,EACpC;YACAJ,MAAMI,aAAa,CAACC,KAAK;QAC3B;IACF;IAEA,MAAMC,gBAAYlB,gCAAAA,MAAiBC,8BAAAA,EAAeM,MAAMW,SAAS,EAAEP;IAEnE,MAAMQ,cAAUnB,gCAAAA,EAAiB,CAACY;YAQhCL;QAPA,IAAIa,UAAUR,MAAMG,MAAM;QAC1B,MAAOK,WAAWA,YAAYR,MAAMI,aAAa,CAAE;YACjD,IAAII,QAAQC,QAAQ,IAAI,GAAG;gBACzB;YACF;YACAD,UAAUA,QAAQE,aAAa;QACjC;SACAf,iBAAAA,MAAMY,OAAO,AAAPA,MAAO,QAAbZ,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,IAAAA,CAAAA,OAAgBK;IAClB;IAEA,OAAO;QACLW,YAAY;YACVC,MAAM;QACR;QACAA,MAAMrB,oBAAAA,CAAKsB,MAAM,KACfvB,wCAAAA,EAAyB,OAAO;YAC9BM,SAAKT,6BAAAA,EAAcS,KAAKC;YACxBiB,MAAM;YACNL,UAAU;YACV,GAAGX,wBAAwB;YAC3B,GAAGH,KAAK;YACRW;YACAC;QACF,IACA;YAAEQ,aAAa;QAAM;IAEzB;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu-grid-preview",
-  "version": "0.2.11",
+  "version": "0.3.1",
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,7 +21,7 @@
     "@fluentui/keyboard-keys": "^9.0.8",
     "@fluentui/react-menu": "^9.22.0",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-table": "^9.19.10",
+    "@fluentui/react-table": "^9.19.11",
     "@fluentui/react-tabster": "^9.26.13",
     "@fluentui/react-jsx-runtime": "^9.4.1",
     "@fluentui/react-shared-contexts": "^9.26.2",