@fluentui/react-menu-grid-preview 0.3.2 → 0.4.1

package/CHANGELOG.md

@@ -1,12 +1,32 @@
 # Change Log - @fluentui/react-menu-grid-preview
 
-This log was last generated on Tue, 17 Mar 2026 07:56:46 GMT and should not be manually modified.
+This log was last generated on Mon, 30 Mar 2026 14:35:50 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.4.1)
+
+Mon, 30 Mar 2026 14:35:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.4.0..@fluentui/react-menu-grid-preview_v0.4.1)
+
+### Patches
+
+- Bump @fluentui/react-menu to v9.23.1 ([PR #35907](https://github.com/microsoft/fluentui/pull/35907) by beachball)
+- Bump @fluentui/react-table to v9.19.13 ([PR #35907](https://github.com/microsoft/fluentui/pull/35907) by beachball)
+
+## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.4.0)
+
+Thu, 26 Mar 2026 08:12:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.3.2..@fluentui/react-menu-grid-preview_v0.4.0)
+
+### Minor changes
+
+- Add circular and first-letter navigation ([PR #35880](https://github.com/microsoft/fluentui/pull/35880) by email not defined)
+- Bump @fluentui/react-table to v9.19.12 ([PR #35824](https://github.com/microsoft/fluentui/pull/35824) by beachball)
+
 ## [0.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.3.2)
 
-Tue, 17 Mar 2026 07:56:46 GMT 
+Tue, 17 Mar 2026 07:57:16 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.3.1..@fluentui/react-menu-grid-preview_v0.3.2)
 
 ### Patches

package/dist/index.d.ts

@@ -46,6 +46,10 @@ export declare type MenuGridContextValue = {
      * Tabster row attributes applied to the `MenuGridRow` components
      */
     tableRowTabsterAttribute: TabsterDOMAttribute | null;
+    /**
+     * Callback to focus the first row in the grid whose text content starts with the given character.
+     */
+    setFocusByFirstCharacter?: (e: React_2.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;
 };
 
 export declare type MenuGridContextValues = {
@@ -140,7 +144,14 @@ export declare type MenuGridItemSlots = {
 
 export declare type MenuGridItemState = ComponentState<MenuGridItemSlots>;
 
-export declare type MenuGridProps = ComponentProps<MenuGridSlots> & {};
+export declare type MenuGridProps = ComponentProps<MenuGridSlots> & {
+    /**
+     * Whether keyboard navigation wraps from the last row to the first and vice versa.
+     *
+     * @default true
+     */
+    circular?: boolean;
+};
 
 /**
  * Define a MenuGridRow, using the `useMenuGridRow_unstable` hook.
@@ -166,6 +177,10 @@ export declare type MenuGridState = ComponentState<MenuGridSlots> & {
      * Tabster row attributes applied to the `MenuGridRow` components
      */
     tableRowTabsterAttribute: TabsterDOMAttribute | null;
+    /**
+     * Callback to focus the first row in the grid whose text content starts with the given character.
+     */
+    setFocusByFirstCharacter?: (e: React_2.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;
 };
 
 /**

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

@@ -1 +1 @@
-export { };
+import * as React from 'react';

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';\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"}
+{"version":3,"sources":["../src/components/MenuGrid/MenuGrid.types.ts"],"sourcesContent":["import * as React from 'react';\nimport 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  /**\n   * Whether keyboard navigation wraps from the last row to the first and vice versa.\n   *\n   * @default true\n   */\n  circular?: boolean;\n};\n\nexport type MenuGridState = ComponentState<MenuGridSlots> & {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n\n  /**\n   * Callback to focus the first row in the grid whose text content starts with the given character.\n   */\n  setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n};\n\nexport type MenuGridContextValues = {\n  menuGrid: MenuGridContextValue;\n  menuList: MenuListContextValue;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/MenuGrid/useMenuGrid.js

@@ -2,16 +2,22 @@
 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 { useArrowNavigationGroup, useFocusFinders, useMergedTabsterAttributes_unstable, useTabsterAttributes } from '@fluentui/react-tabster';
 import { useMenuContext_unstable } from '@fluentui/react-menu';
 import { useValidateNesting } from '../../utils/useValidateNesting';
 /**
  * Returns the props and state required to render the component
  */ export const useMenuGrid_unstable = (props, ref)=>{
+    const { circular = true, ...restProps } = props;
     const validateNestingRef = useValidateNesting('MenuGrid');
+    const innerRef = React.useRef(null);
+    const { findAllFocusable } = useFocusFinders();
     const triggerId = useMenuContext_unstable((context)=>context.triggerId);
     const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();
-    const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));
+    const circularGridAttribute = useArrowNavigationGroup({
+        circular
+    });
+    const mergedTabsterAttribute = useMergedTabsterAttributes_unstable(tableTabsterAttribute, circularGridAttribute);
     const ignoreEnterKeyAttribute = useTabsterAttributes({
         focusable: {
             ignoreKeydown: {
@@ -20,20 +26,62 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
         }
     });
     const mergedRowTabsterAttribute = useMergedTabsterAttributes_unstable(tableRowTabsterAttribute, ignoreEnterKeyAttribute);
+    const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));
+    const setFocusByFirstCharacter = React.useCallback((e, itemEl)=>{
+        if (!innerRef.current) {
+            return;
+        }
+        const target = e.target;
+        // Only apply first-letter navigation when event target is a grid row, otherwise it may conflict with other components inside the grid row
+        if (!target.hasAttribute('role') || target.getAttribute('role') !== 'row') {
+            return;
+        }
+        const rows = findAllFocusable(innerRef.current, (el)=>el.hasAttribute('role') && el.getAttribute('role') === 'row');
+        let startIndex = rows.indexOf(itemEl) + 1;
+        if (startIndex === rows.length) {
+            startIndex = 0;
+        }
+        const firstChars = rows.map((row)=>{
+            var _row_textContent;
+            return (_row_textContent = row.textContent) === null || _row_textContent === void 0 ? void 0 : _row_textContent.charAt(0).toLowerCase();
+        });
+        const char = e.key.toLowerCase();
+        const getIndexFirstChars = (start)=>{
+            for(let i = start; i < firstChars.length; i++){
+                if (char === firstChars[i]) {
+                    return i;
+                }
+            }
+            return -1;
+        };
+        // Check remaining rows in the grid
+        let index = getIndexFirstChars(startIndex);
+        // If not found in remaining rows, check from beginning
+        if (index === -1) {
+            index = getIndexFirstChars(0);
+        }
+        // If match was found, focus it
+        if (index > -1) {
+            rows[index].focus();
+        }
+    }, [
+        findAllFocusable
+    ]);
     return {
         components: {
             root: 'div'
         },
         root: slot.always(getIntrinsicElementProps('div', {
-            ref: useMergedRefs(ref, validateNestingRef),
+            ref: useMergedRefs(ref, validateNestingRef, innerRef),
             role: 'grid',
             'aria-labelledby': triggerId,
-            ...tableTabsterAttribute,
-            ...props,
+            ...mergedTabsterAttribute,
+            ...restProps,
             onKeyDown
         }), {
             elementType: 'div'
         }),
-        tableRowTabsterAttribute: mergedRowTabsterAttribute
+        tableRowTabsterAttribute: mergedRowTabsterAttribute,
+        setFocusByFirstCharacter
     };
 };

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 { 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"}
+{"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 {\n  useArrowNavigationGroup,\n  useFocusFinders,\n  useMergedTabsterAttributes_unstable,\n  useTabsterAttributes,\n} 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 { circular = true, ...restProps } = props;\n  const validateNestingRef = useValidateNesting('MenuGrid');\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const { findAllFocusable } = useFocusFinders();\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n\n  const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();\n\n  const circularGridAttribute = useArrowNavigationGroup({ circular });\n  const mergedTabsterAttribute = useMergedTabsterAttributes_unstable(tableTabsterAttribute, circularGridAttribute);\n\n  const ignoreEnterKeyAttribute = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: { Enter: true },\n    },\n  });\n  const mergedRowTabsterAttribute = useMergedTabsterAttributes_unstable(\n    tableRowTabsterAttribute,\n    ignoreEnterKeyAttribute,\n  );\n\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));\n\n  const setFocusByFirstCharacter = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n      if (!innerRef.current) {\n        return;\n      }\n\n      const target = e.target as HTMLElement;\n\n      // Only apply first-letter navigation when event target is a grid row, otherwise it may conflict with other components inside the grid row\n      if (!target.hasAttribute('role') || target.getAttribute('role') !== 'row') {\n        return;\n      }\n\n      const rows = findAllFocusable(\n        innerRef.current,\n        (el: HTMLElement) => el.hasAttribute('role') && el.getAttribute('role') === 'row',\n      );\n\n      let startIndex = rows.indexOf(itemEl) + 1;\n      if (startIndex === rows.length) {\n        startIndex = 0;\n      }\n\n      const firstChars = rows.map(row => row.textContent?.charAt(0).toLowerCase());\n      const char = e.key.toLowerCase();\n\n      const getIndexFirstChars = (start: number) => {\n        for (let i = start; i < firstChars.length; i++) {\n          if (char === firstChars[i]) {\n            return i;\n          }\n        }\n        return -1;\n      };\n\n      // Check remaining rows in the grid\n      let index = getIndexFirstChars(startIndex);\n\n      // If not found in remaining rows, check from beginning\n      if (index === -1) {\n        index = getIndexFirstChars(0);\n      }\n\n      // If match was found, focus it\n      if (index > -1) {\n        rows[index].focus();\n      }\n    },\n    [findAllFocusable],\n  );\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef, innerRef),\n        role: 'grid',\n        'aria-labelledby': triggerId,\n        ...mergedTabsterAttribute,\n        ...restProps,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n    tableRowTabsterAttribute: mergedRowTabsterAttribute,\n    setFocusByFirstCharacter,\n  };\n};\n"],"names":["React","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useTableCompositeNavigation","useArrowNavigationGroup","useFocusFinders","useMergedTabsterAttributes_unstable","useTabsterAttributes","useMenuContext_unstable","useValidateNesting","useMenuGrid_unstable","props","ref","circular","restProps","validateNestingRef","innerRef","useRef","findAllFocusable","triggerId","context","tableRowTabsterAttribute","tableTabsterAttribute","onTableKeyDown","circularGridAttribute","mergedTabsterAttribute","ignoreEnterKeyAttribute","focusable","ignoreKeydown","Enter","mergedRowTabsterAttribute","onKeyDown","setFocusByFirstCharacter","useCallback","e","itemEl","current","target","hasAttribute","getAttribute","rows","el","startIndex","indexOf","length","firstChars","map","row","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","i","index","focus","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,SACEC,uBAAuB,EACvBC,eAAe,EACfC,mCAAmC,EACnCC,oBAAoB,QACf,0BAA0B;AAEjC,SAASC,uBAAuB,QAAQ,uBAAuB;AAC/D,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAW,IAAI,EAAE,GAAGC,WAAW,GAAGH;IAC1C,MAAMI,qBAAqBN,mBAAmB;IAC9C,MAAMO,WAAWnB,MAAMoB,MAAM,CAAiB;IAC9C,MAAM,EAAEC,gBAAgB,EAAE,GAAGb;IAC7B,MAAMc,YAAYX,wBAAwBY,CAAAA,UAAWA,QAAQD,SAAS;IAEtE,MAAM,EAAEE,wBAAwB,EAAEC,qBAAqB,EAAEC,cAAc,EAAE,GAAGpB;IAE5E,MAAMqB,wBAAwBpB,wBAAwB;QAAES;IAAS;IACjE,MAAMY,yBAAyBnB,oCAAoCgB,uBAAuBE;IAE1F,MAAME,0BAA0BnB,qBAAqB;QACnDoB,WAAW;YACTC,eAAe;gBAAEC,OAAO;YAAK;QAC/B;IACF;IACA,MAAMC,4BAA4BxB,oCAChCe,0BACAK;IAGF,MAAMK,YAAYhC,iBAAiBC,eAAeW,MAAMoB,SAAS,EAAER;IAEnE,MAAMS,2BAA2BnC,MAAMoC,WAAW,CAChD,CAACC,GAAqCC;QACpC,IAAI,CAACnB,SAASoB,OAAO,EAAE;YACrB;QACF;QAEA,MAAMC,SAASH,EAAEG,MAAM;QAEvB,0IAA0I;QAC1I,IAAI,CAACA,OAAOC,YAAY,CAAC,WAAWD,OAAOE,YAAY,CAAC,YAAY,OAAO;YACzE;QACF;QAEA,MAAMC,OAAOtB,iBACXF,SAASoB,OAAO,EAChB,CAACK,KAAoBA,GAAGH,YAAY,CAAC,WAAWG,GAAGF,YAAY,CAAC,YAAY;QAG9E,IAAIG,aAAaF,KAAKG,OAAO,CAACR,UAAU;QACxC,IAAIO,eAAeF,KAAKI,MAAM,EAAE;YAC9BF,aAAa;QACf;QAEA,MAAMG,aAAaL,KAAKM,GAAG,CAACC,CAAAA;gBAAOA;oBAAAA,mBAAAA,IAAIC,WAAW,cAAfD,uCAAAA,iBAAiBE,MAAM,CAAC,GAAGC,WAAW;;QACzE,MAAMC,OAAOjB,EAAEkB,GAAG,CAACF,WAAW;QAE9B,MAAMG,qBAAqB,CAACC;YAC1B,IAAK,IAAIC,IAAID,OAAOC,IAAIV,WAAWD,MAAM,EAAEW,IAAK;gBAC9C,IAAIJ,SAASN,UAAU,CAACU,EAAE,EAAE;oBAC1B,OAAOA;gBACT;YACF;YACA,OAAO,CAAC;QACV;QAEA,mCAAmC;QACnC,IAAIC,QAAQH,mBAAmBX;QAE/B,uDAAuD;QACvD,IAAIc,UAAU,CAAC,GAAG;YAChBA,QAAQH,mBAAmB;QAC7B;QAEA,+BAA+B;QAC/B,IAAIG,QAAQ,CAAC,GAAG;YACdhB,IAAI,CAACgB,MAAM,CAACC,KAAK;QACnB;IACF,GACA;QAACvC;KAAiB;IAGpB,OAAO;QACLwC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzD,KAAK0D,MAAM,CACf3D,yBAAyB,OAAO;YAC9BW,KAAKd,cAAcc,KAAKG,oBAAoBC;YAC5C6C,MAAM;YACN,mBAAmB1C;YACnB,GAAGM,sBAAsB;YACzB,GAAGX,SAAS;YACZiB;QACF,IACA;YAAE+B,aAAa;QAAM;QAEvBzC,0BAA0BS;QAC1BE;IACF;AACF,EAAE"}

package/lib/components/MenuGrid/useMenuGridContextValues.js

@@ -7,11 +7,13 @@ const menuList = {
     shouldOpenOnArrowRight: false
 };
 export function useMenuGridContextValues_unstable(state) {
-    const { tableRowTabsterAttribute } = state;
+    const { tableRowTabsterAttribute, setFocusByFirstCharacter } = state;
     const menuGrid = React.useMemo(()=>({
-            tableRowTabsterAttribute
+            tableRowTabsterAttribute,
+            setFocusByFirstCharacter
         }), [
-        tableRowTabsterAttribute
+        tableRowTabsterAttribute,
+        setFocusByFirstCharacter
     ]);
     return {
         menuGrid,

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\nconst menuList = {\n  checkedValues: {},\n  hasIcons: false,\n  hasCheckmarks: false,\n  shouldOpenOnArrowRight: 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","shouldOpenOnArrowRight","useMenuGridContextValues_unstable","state","tableRowTabsterAttribute","menuGrid","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,WAAW;IACfC,eAAe,CAAC;IAChBC,UAAU;IACVC,eAAe;IACfC,wBAAwB;AAC1B;AAEA,OAAO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,wBAAwB,EAAE,GAAGD;IACrC,MAAME,WAAWT,MAAMU,OAAO,CAAC,IAAO,CAAA;YAAEF;QAAyB,CAAA,GAAI;QAACA;KAAyB;IAE/F,OAAO;QAAEC;QAAUR;IAAS;AAC9B"}
+{"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  shouldOpenOnArrowRight: false,\n};\n\nexport function useMenuGridContextValues_unstable(state: MenuGridState): MenuGridContextValues {\n  const { tableRowTabsterAttribute, setFocusByFirstCharacter } = state;\n  const menuGrid = React.useMemo(\n    () => ({ tableRowTabsterAttribute, setFocusByFirstCharacter }),\n    [tableRowTabsterAttribute, setFocusByFirstCharacter],\n  );\n\n  return { menuGrid, menuList };\n}\n"],"names":["React","menuList","checkedValues","hasIcons","hasCheckmarks","shouldOpenOnArrowRight","useMenuGridContextValues_unstable","state","tableRowTabsterAttribute","setFocusByFirstCharacter","menuGrid","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,WAAW;IACfC,eAAe,CAAC;IAChBC,UAAU;IACVC,eAAe;IACfC,wBAAwB;AAC1B;AAEA,OAAO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,wBAAwB,EAAEC,wBAAwB,EAAE,GAAGF;IAC/D,MAAMG,WAAWV,MAAMW,OAAO,CAC5B,IAAO,CAAA;YAAEH;YAA0BC;QAAyB,CAAA,GAC5D;QAACD;QAA0BC;KAAyB;IAGtD,OAAO;QAAEC;QAAUT;IAAS;AAC9B"}

package/lib/components/MenuGridRow/useCharacterSearch.js

@@ -0,0 +1,25 @@
+'use client';
+import * as React from 'react';
+import { useMenuGridContext_unstable } from '../../contexts/menuGridContext';
+/**
+ * Returns the MenuGridRow's `onKeyDown` handler to support first-letter navigation.
+ * When a single character key is pressed, it delegates to the grid-level `setFocusByFirstCharacter`
+ * callback which finds and focuses the next row starting with that character.
+ */ export const useCharacterSearch = ()=>{
+    'use no memo';
+    const characterSearchRef = React.useRef(null);
+    const { setFocusByFirstCharacter } = useMenuGridContext_unstable();
+    const characterSearchOnKeyDown = (e)=>{
+        var _e_key;
+        if (((_e_key = e.key) === null || _e_key === void 0 ? void 0 : _e_key.length) > 1) {
+            return;
+        }
+        if (characterSearchRef.current) {
+            setFocusByFirstCharacter === null || setFocusByFirstCharacter === void 0 ? void 0 : setFocusByFirstCharacter(e, characterSearchRef.current);
+        }
+    };
+    return {
+        characterSearchOnKeyDown,
+        characterSearchRef
+    };
+};

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

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

package/lib/components/MenuGridRow/useMenuGridRow.js

@@ -4,17 +4,20 @@ 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';
+import { useCharacterSearch } from './useCharacterSearch';
 /**
  * Given user props, returns state and render function for a MenuGridRow.
  */ export function useMenuGridRow_unstable(props, ref) {
     const validateNestingRef = useValidateNesting('MenuGridRow');
+    const innerRef = React.useRef(null);
     const { tableRowTabsterAttribute } = useMenuGridContext_unstable();
+    const { characterSearchOnKeyDown, characterSearchRef } = useCharacterSearch();
     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 onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, mergeCallbacks(onKeyDownToClick, characterSearchOnKeyDown)));
     const onClick = useEventCallback((event)=>{
         var _props_onClick;
         let element = event.target;
@@ -26,12 +29,12 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
         }
         (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
     });
-    return {
+    const state = {
         components: {
             root: 'div'
         },
         root: slot.always(getIntrinsicElementProps('div', {
-            ref: useMergedRefs(ref, validateNestingRef),
+            ref: useMergedRefs(ref, validateNestingRef, innerRef, characterSearchRef),
             role: 'row',
             tabIndex: 0,
             ...tableRowTabsterAttribute,
@@ -42,4 +45,5 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
             elementType: 'div'
         })
     };
+    return state;
 }

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 { 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"}
+{"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';\nimport { useCharacterSearch } from './useCharacterSearch';\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 innerRef = React.useRef<HTMLDivElement>(null);\n  const { tableRowTabsterAttribute } = useMenuGridContext_unstable();\n\n  const { characterSearchOnKeyDown, characterSearchRef } = useCharacterSearch();\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(\n    mergeCallbacks(props.onKeyDown, mergeCallbacks(onKeyDownToClick, characterSearchOnKeyDown)),\n  );\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  const state: MenuGridRowState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef, innerRef, characterSearchRef),\n        role: 'row',\n        tabIndex: 0,\n        ...tableRowTabsterAttribute,\n        ...props,\n        onKeyDown,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n\n  return state;\n}\n"],"names":["React","Enter","Space","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useMenuGridContext_unstable","useValidateNesting","useCharacterSearch","useMenuGridRow_unstable","props","ref","validateNestingRef","innerRef","useRef","tableRowTabsterAttribute","characterSearchOnKeyDown","characterSearchRef","onKeyDownToClick","event","isDefaultPrevented","key","target","currentTarget","click","onKeyDown","onClick","element","tabIndex","parentElement","state","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;AACpE,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D;;CAEC,GACD,OAAO,SAASC,wBAAwBC,KAAuB,EAAEC,GAA8B;IAC7F,MAAMC,qBAAqBL,mBAAmB;IAC9C,MAAMM,WAAWf,MAAMgB,MAAM,CAAiB;IAC9C,MAAM,EAAEC,wBAAwB,EAAE,GAAGT;IAErC,MAAM,EAAEU,wBAAwB,EAAEC,kBAAkB,EAAE,GAAGT;IAEzD,MAAMU,mBAAmBhB,iBAAiB,CAACiB;QACzC,IACE,CAACA,MAAMC,kBAAkB,MACxBD,CAAAA,MAAME,GAAG,KAAKtB,SAASoB,MAAME,GAAG,KAAKrB,KAAI,KAC1CmB,MAAMG,MAAM,KAAKH,MAAMI,aAAa,EACpC;YACAJ,MAAMI,aAAa,CAACC,KAAK;QAC3B;IACF;IAEA,MAAMC,YAAYvB,iBAChBC,eAAeO,MAAMe,SAAS,EAAEtB,eAAee,kBAAkBF;IAGnE,MAAMU,UAAUxB,iBAAiB,CAACiB;YAQhCT;QAPA,IAAIiB,UAAUR,MAAMG,MAAM;QAC1B,MAAOK,WAAWA,YAAYR,MAAMI,aAAa,CAAE;YACjD,IAAII,QAAQC,QAAQ,IAAI,GAAG;gBACzB;YACF;YACAD,UAAUA,QAAQE,aAAa;QACjC;SACAnB,iBAAAA,MAAMgB,OAAO,cAAbhB,qCAAAA,oBAAAA,OAAgBS;IAClB;IAEA,MAAMW,QAA0B;QAC9BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM3B,KAAK4B,MAAM,CACf7B,yBAAyB,OAAO;YAC9BO,KAAKV,cAAcU,KAAKC,oBAAoBC,UAAUI;YACtDiB,MAAM;YACNN,UAAU;YACV,GAAGb,wBAAwB;YAC3B,GAAGL,KAAK;YACRe;YACAC;QACF,IACA;YAAES,aAAa;QAAM;IAEzB;IAEA,OAAOL;AACT"}

package/lib/contexts/menuGridContext.js

@@ -2,7 +2,8 @@
 import * as React from 'react';
 export const MenuGridContext = React.createContext(undefined);
 const menuGridContextDefaultValue = {
-    tableRowTabsterAttribute: null
+    tableRowTabsterAttribute: null,
+    setFocusByFirstCharacter: undefined
 };
 export const MenuGridContextProvider = MenuGridContext.Provider;
 export const useMenuGridContext_unstable = ()=>{

package/lib/contexts/menuGridContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/menuGridContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\n\nexport const MenuGridContext = React.createContext<MenuGridContextValue | undefined>(\n  undefined,\n) as React.Context<MenuGridContextValue>;\n\nconst menuGridContextDefaultValue: MenuGridContextValue = {\n  tableRowTabsterAttribute: null,\n};\n\n/**\n * Context shared between MenuGrid and its children components\n */\nexport type MenuGridContextValue = {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n};\n\nexport const MenuGridContextProvider = MenuGridContext.Provider;\n\nexport const useMenuGridContext_unstable = (): MenuGridContextValue =>\n  React.useContext(MenuGridContext) ?? menuGridContextDefaultValue;\n"],"names":["React","MenuGridContext","createContext","undefined","menuGridContextDefaultValue","tableRowTabsterAttribute","MenuGridContextProvider","Provider","useMenuGridContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,kBAAkBD,MAAME,aAAa,CAChDC,WACuC;AAEzC,MAAMC,8BAAoD;IACxDC,0BAA0B;AAC5B;AAYA,OAAO,MAAMC,0BAA0BL,gBAAgBM,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QACzCR;WAAAA,CAAAA,oBAAAA,MAAMS,UAAU,CAACR,8BAAjBD,+BAAAA,oBAAqCI;EAA4B"}
+{"version":3,"sources":["../src/contexts/menuGridContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\n\nexport const MenuGridContext = React.createContext<MenuGridContextValue | undefined>(\n  undefined,\n) as React.Context<MenuGridContextValue>;\n\nconst menuGridContextDefaultValue: MenuGridContextValue = {\n  tableRowTabsterAttribute: null,\n  setFocusByFirstCharacter: undefined,\n};\n\n/**\n * Context shared between MenuGrid and its children components\n */\nexport type MenuGridContextValue = {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n\n  /**\n   * Callback to focus the first row in the grid whose text content starts with the given character.\n   */\n  setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n};\n\nexport const MenuGridContextProvider = MenuGridContext.Provider;\n\nexport const useMenuGridContext_unstable = (): MenuGridContextValue =>\n  React.useContext(MenuGridContext) ?? menuGridContextDefaultValue;\n"],"names":["React","MenuGridContext","createContext","undefined","menuGridContextDefaultValue","tableRowTabsterAttribute","setFocusByFirstCharacter","MenuGridContextProvider","Provider","useMenuGridContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,kBAAkBD,MAAME,aAAa,CAChDC,WACuC;AAEzC,MAAMC,8BAAoD;IACxDC,0BAA0B;IAC1BC,0BAA0BH;AAC5B;AAiBA,OAAO,MAAMI,0BAA0BN,gBAAgBO,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B;QACzCT;WAAAA,CAAAA,oBAAAA,MAAMU,UAAU,CAACT,8BAAjBD,+BAAAA,oBAAqCI;EAA4B"}

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

@@ -2,3 +2,5 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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';\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":""}
+{"version":3,"sources":["../src/components/MenuGrid/MenuGrid.types.ts"],"sourcesContent":["import * as React from 'react';\nimport 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  /**\n   * Whether keyboard navigation wraps from the last row to the first and vice versa.\n   *\n   * @default true\n   */\n  circular?: boolean;\n};\n\nexport type MenuGridState = ComponentState<MenuGridSlots> & {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n\n  /**\n   * Callback to focus the first row in the grid whose text content starts with the given character.\n   */\n  setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n};\n\nexport type MenuGridContextValues = {\n  menuGrid: MenuGridContextValue;\n  menuList: MenuListContextValue;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

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

@@ -17,10 +17,16 @@ const _reacttabster = require("@fluentui/react-tabster");
 const _reactmenu = require("@fluentui/react-menu");
 const _useValidateNesting = require("../../utils/useValidateNesting");
 const useMenuGrid_unstable = (props, ref)=>{
+    const { circular = true, ...restProps } = props;
     const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGrid');
+    const innerRef = _react.useRef(null);
+    const { findAllFocusable } = (0, _reacttabster.useFocusFinders)();
     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 circularGridAttribute = (0, _reacttabster.useArrowNavigationGroup)({
+        circular
+    });
+    const mergedTabsterAttribute = (0, _reacttabster.useMergedTabsterAttributes_unstable)(tableTabsterAttribute, circularGridAttribute);
     const ignoreEnterKeyAttribute = (0, _reacttabster.useTabsterAttributes)({
         focusable: {
             ignoreKeydown: {
@@ -29,20 +35,62 @@ const useMenuGrid_unstable = (props, ref)=>{
         }
     });
     const mergedRowTabsterAttribute = (0, _reacttabster.useMergedTabsterAttributes_unstable)(tableRowTabsterAttribute, ignoreEnterKeyAttribute);
+    const onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(props.onKeyDown, onTableKeyDown));
+    const setFocusByFirstCharacter = _react.useCallback((e, itemEl)=>{
+        if (!innerRef.current) {
+            return;
+        }
+        const target = e.target;
+        // Only apply first-letter navigation when event target is a grid row, otherwise it may conflict with other components inside the grid row
+        if (!target.hasAttribute('role') || target.getAttribute('role') !== 'row') {
+            return;
+        }
+        const rows = findAllFocusable(innerRef.current, (el)=>el.hasAttribute('role') && el.getAttribute('role') === 'row');
+        let startIndex = rows.indexOf(itemEl) + 1;
+        if (startIndex === rows.length) {
+            startIndex = 0;
+        }
+        const firstChars = rows.map((row)=>{
+            var _row_textContent;
+            return (_row_textContent = row.textContent) === null || _row_textContent === void 0 ? void 0 : _row_textContent.charAt(0).toLowerCase();
+        });
+        const char = e.key.toLowerCase();
+        const getIndexFirstChars = (start)=>{
+            for(let i = start; i < firstChars.length; i++){
+                if (char === firstChars[i]) {
+                    return i;
+                }
+            }
+            return -1;
+        };
+        // Check remaining rows in the grid
+        let index = getIndexFirstChars(startIndex);
+        // If not found in remaining rows, check from beginning
+        if (index === -1) {
+            index = getIndexFirstChars(0);
+        }
+        // If match was found, focus it
+        if (index > -1) {
+            rows[index].focus();
+        }
+    }, [
+        findAllFocusable
+    ]);
     return {
         components: {
             root: 'div'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            ref: (0, _reactutilities.useMergedRefs)(ref, validateNestingRef),
+            ref: (0, _reactutilities.useMergedRefs)(ref, validateNestingRef, innerRef),
             role: 'grid',
             'aria-labelledby': triggerId,
-            ...tableTabsterAttribute,
-            ...props,
+            ...mergedTabsterAttribute,
+            ...restProps,
             onKeyDown
         }), {
             elementType: 'div'
         }),
-        tableRowTabsterAttribute: mergedRowTabsterAttribute
+        tableRowTabsterAttribute: mergedRowTabsterAttribute,
+        setFocusByFirstCharacter
     };
 };

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 { 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"}
+{"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 {\n  useArrowNavigationGroup,\n  useFocusFinders,\n  useMergedTabsterAttributes_unstable,\n  useTabsterAttributes,\n} 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 { circular = true, ...restProps } = props;\n  const validateNestingRef = useValidateNesting('MenuGrid');\n  const innerRef = React.useRef<HTMLDivElement>(null);\n  const { findAllFocusable } = useFocusFinders();\n  const triggerId = useMenuContext_unstable(context => context.triggerId);\n\n  const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();\n\n  const circularGridAttribute = useArrowNavigationGroup({ circular });\n  const mergedTabsterAttribute = useMergedTabsterAttributes_unstable(tableTabsterAttribute, circularGridAttribute);\n\n  const ignoreEnterKeyAttribute = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: { Enter: true },\n    },\n  });\n  const mergedRowTabsterAttribute = useMergedTabsterAttributes_unstable(\n    tableRowTabsterAttribute,\n    ignoreEnterKeyAttribute,\n  );\n\n  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));\n\n  const setFocusByFirstCharacter = React.useCallback(\n    (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => {\n      if (!innerRef.current) {\n        return;\n      }\n\n      const target = e.target as HTMLElement;\n\n      // Only apply first-letter navigation when event target is a grid row, otherwise it may conflict with other components inside the grid row\n      if (!target.hasAttribute('role') || target.getAttribute('role') !== 'row') {\n        return;\n      }\n\n      const rows = findAllFocusable(\n        innerRef.current,\n        (el: HTMLElement) => el.hasAttribute('role') && el.getAttribute('role') === 'row',\n      );\n\n      let startIndex = rows.indexOf(itemEl) + 1;\n      if (startIndex === rows.length) {\n        startIndex = 0;\n      }\n\n      const firstChars = rows.map(row => row.textContent?.charAt(0).toLowerCase());\n      const char = e.key.toLowerCase();\n\n      const getIndexFirstChars = (start: number) => {\n        for (let i = start; i < firstChars.length; i++) {\n          if (char === firstChars[i]) {\n            return i;\n          }\n        }\n        return -1;\n      };\n\n      // Check remaining rows in the grid\n      let index = getIndexFirstChars(startIndex);\n\n      // If not found in remaining rows, check from beginning\n      if (index === -1) {\n        index = getIndexFirstChars(0);\n      }\n\n      // If match was found, focus it\n      if (index > -1) {\n        rows[index].focus();\n      }\n    },\n    [findAllFocusable],\n  );\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef, innerRef),\n        role: 'grid',\n        'aria-labelledby': triggerId,\n        ...mergedTabsterAttribute,\n        ...restProps,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n    tableRowTabsterAttribute: mergedRowTabsterAttribute,\n    setFocusByFirstCharacter,\n  };\n};\n"],"names":["React","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useTableCompositeNavigation","useArrowNavigationGroup","useFocusFinders","useMergedTabsterAttributes_unstable","useTabsterAttributes","useMenuContext_unstable","useValidateNesting","useMenuGrid_unstable","props","ref","circular","restProps","validateNestingRef","innerRef","useRef","findAllFocusable","triggerId","context","tableRowTabsterAttribute","tableTabsterAttribute","onTableKeyDown","circularGridAttribute","mergedTabsterAttribute","ignoreEnterKeyAttribute","focusable","ignoreKeydown","Enter","mergedRowTabsterAttribute","onKeyDown","setFocusByFirstCharacter","useCallback","e","itemEl","current","target","hasAttribute","getAttribute","rows","el","startIndex","indexOf","length","firstChars","map","row","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","i","index","focus","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAyBaa;;;;;;;iEAvBU,QAAQ;gCAOxB,4BAA4B;4BAES,wBAAwB;8BAM7D,0BAA0B;2BAEO,uBAAuB;oCAC5B,iCAAiC;AAK7D,6BAA6B,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAW,IAAI,EAAE,GAAGC,WAAW,GAAGH;IAC1C,MAAMI,yBAAqBN,sCAAAA,EAAmB;IAC9C,MAAMO,WAAWnB,OAAMoB,MAAM,CAAiB;IAC9C,MAAM,EAAEC,gBAAgB,EAAE,OAAGb,6BAAAA;IAC7B,MAAMc,gBAAYX,kCAAAA,EAAwBY,CAAAA,UAAWA,QAAQD,SAAS;IAEtE,MAAM,EAAEE,wBAAwB,EAAEC,qBAAqB,EAAEC,cAAc,EAAE,OAAGpB,uCAAAA;IAE5E,MAAMqB,4BAAwBpB,qCAAAA,EAAwB;QAAES;IAAS;IACjE,MAAMY,6BAAyBnB,iDAAAA,EAAoCgB,uBAAuBE;IAE1F,MAAME,8BAA0BnB,kCAAAA,EAAqB;QACnDoB,WAAW;YACTC,eAAe;gBAAEC,OAAO;YAAK;QAC/B;IACF;IACA,MAAMC,gCAA4BxB,iDAAAA,EAChCe,0BACAK;IAGF,MAAMK,YAAYhC,oCAAAA,MAAiBC,8BAAAA,EAAeW,MAAMoB,SAAS,EAAER;IAEnE,MAAMS,2BAA2BnC,OAAMoC,WAAW,CAChD,CAACC,GAAqCC;QACpC,IAAI,CAACnB,SAASoB,OAAO,EAAE;YACrB;QACF;QAEA,MAAMC,SAASH,EAAEG,MAAM;QAEvB,0IAA0I;QAC1I,IAAI,CAACA,OAAOC,YAAY,CAAC,WAAWD,OAAOE,YAAY,CAAC,YAAY,OAAO;YACzE;QACF;QAEA,MAAMC,OAAOtB,iBACXF,SAASoB,OAAO,EAChB,CAACK,KAAoBA,GAAGH,YAAY,CAAC,WAAWG,GAAGF,YAAY,CAAC,YAAY;QAG9E,IAAIG,aAAaF,KAAKG,OAAO,CAACR,UAAU;QACxC,IAAIO,eAAeF,KAAKI,MAAM,EAAE;YAC9BF,aAAa;QACf;QAEA,MAAMG,aAAaL,KAAKM,GAAG,CAACC,CAAAA;gBAAOA;oBAAAA,mBAAAA,IAAIC,WAAAA,AAAW,MAAA,QAAfD,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiBE,MAAM,CAAC,GAAGC,WAAW;;QACzE,MAAMC,OAAOjB,EAAEkB,GAAG,CAACF,WAAW;QAE9B,MAAMG,qBAAqB,CAACC;YAC1B,IAAK,IAAIC,IAAID,OAAOC,IAAIV,WAAWD,MAAM,EAAEW,IAAK;gBAC9C,IAAIJ,SAASN,UAAU,CAACU,EAAE,EAAE;oBAC1B,OAAOA;gBACT;YACF;YACA,OAAO,CAAC;QACV;QAEA,mCAAmC;QACnC,IAAIC,QAAQH,mBAAmBX;QAE/B,uDAAuD;QACvD,IAAIc,UAAU,CAAC,GAAG;YAChBA,QAAQH,mBAAmB;QAC7B;QAEA,+BAA+B;QAC/B,IAAIG,QAAQ,CAAC,GAAG;YACdhB,IAAI,CAACgB,MAAM,CAACC,KAAK;QACnB;IACF,GACA;QAACvC;KAAiB;IAGpB,OAAO;QACLwC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzD,oBAAAA,CAAK0D,MAAM,KACf3D,wCAAAA,EAAyB,OAAO;YAC9BW,SAAKd,6BAAAA,EAAcc,KAAKG,oBAAoBC;YAC5C6C,MAAM;YACN,mBAAmB1C;YACnB,GAAGM,sBAAsB;YACzB,GAAGX,SAAS;YACZiB;QACF,IACA;YAAE+B,aAAa;QAAM;QAEvBzC,0BAA0BS;QAC1BE;IACF;AACF,EAAE"}

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

@@ -18,11 +18,13 @@ const menuList = {
     shouldOpenOnArrowRight: false
 };
 function useMenuGridContextValues_unstable(state) {
-    const { tableRowTabsterAttribute } = state;
+    const { tableRowTabsterAttribute, setFocusByFirstCharacter } = state;
     const menuGrid = _react.useMemo(()=>({
-            tableRowTabsterAttribute
+            tableRowTabsterAttribute,
+            setFocusByFirstCharacter
         }), [
-        tableRowTabsterAttribute
+        tableRowTabsterAttribute,
+        setFocusByFirstCharacter
     ]);
     return {
         menuGrid,

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\nconst menuList = {\n  checkedValues: {},\n  hasIcons: false,\n  hasCheckmarks: false,\n  shouldOpenOnArrowRight: 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","shouldOpenOnArrowRight","useMenuGridContextValues_unstable","state","tableRowTabsterAttribute","menuGrid","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAG/B,MAAMC,WAAW;IACfC,eAAe,CAAC;IAChBC,UAAU;IACVC,eAAe;IACfC,wBAAwB;AAC1B;AAEO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,wBAAwB,EAAE,GAAGD;IACrC,MAAME,WAAWT,OAAMU,OAAO,CAAC,IAAO,CAAA;YAAEF;SAAyB,CAAA,EAAI;QAACA;KAAyB;IAE/F,OAAO;QAAEC;QAAUR;IAAS;AAC9B"}
+{"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  shouldOpenOnArrowRight: false,\n};\n\nexport function useMenuGridContextValues_unstable(state: MenuGridState): MenuGridContextValues {\n  const { tableRowTabsterAttribute, setFocusByFirstCharacter } = state;\n  const menuGrid = React.useMemo(\n    () => ({ tableRowTabsterAttribute, setFocusByFirstCharacter }),\n    [tableRowTabsterAttribute, setFocusByFirstCharacter],\n  );\n\n  return { menuGrid, menuList };\n}\n"],"names":["React","menuList","checkedValues","hasIcons","hasCheckmarks","shouldOpenOnArrowRight","useMenuGridContextValues_unstable","state","tableRowTabsterAttribute","setFocusByFirstCharacter","menuGrid","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAG/B,MAAMC,WAAW;IACfC,eAAe,CAAC;IAChBC,UAAU;IACVC,eAAe;IACfC,wBAAwB;AAC1B;AAEO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,wBAAwB,EAAEC,wBAAwB,EAAE,GAAGF;IAC/D,MAAMG,WAAWV,OAAMW,OAAO,CAC5B,IAAO,CAAA;YAAEH;YAA0BC;SAAyB,CAAA,EAC5D;QAACD;QAA0BC;KAAyB;IAGtD,OAAO;QAAEC;QAAUT;IAAS;AAC9B"}

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

@@ -0,0 +1,32 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCharacterSearch", {
+    enumerable: true,
+    get: function() {
+        return useCharacterSearch;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _menuGridContext = require("../../contexts/menuGridContext");
+const useCharacterSearch = ()=>{
+    'use no memo';
+    const characterSearchRef = _react.useRef(null);
+    const { setFocusByFirstCharacter } = (0, _menuGridContext.useMenuGridContext_unstable)();
+    const characterSearchOnKeyDown = (e)=>{
+        var _e_key;
+        if (((_e_key = e.key) === null || _e_key === void 0 ? void 0 : _e_key.length) > 1) {
+            return;
+        }
+        if (characterSearchRef.current) {
+            setFocusByFirstCharacter === null || setFocusByFirstCharacter === void 0 ? void 0 : setFocusByFirstCharacter(e, characterSearchRef.current);
+        }
+    };
+    return {
+        characterSearchOnKeyDown,
+        characterSearchRef
+    };
+};

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

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

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

@@ -15,15 +15,18 @@ const _keyboardkeys = require("@fluentui/keyboard-keys");
 const _reactutilities = require("@fluentui/react-utilities");
 const _menuGridContext = require("../../contexts/menuGridContext");
 const _useValidateNesting = require("../../utils/useValidateNesting");
+const _useCharacterSearch = require("./useCharacterSearch");
 function useMenuGridRow_unstable(props, ref) {
     const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGridRow');
+    const innerRef = _react.useRef(null);
     const { tableRowTabsterAttribute } = (0, _menuGridContext.useMenuGridContext_unstable)();
+    const { characterSearchOnKeyDown, characterSearchRef } = (0, _useCharacterSearch.useCharacterSearch)();
     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 onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(props.onKeyDown, (0, _reactutilities.mergeCallbacks)(onKeyDownToClick, characterSearchOnKeyDown)));
     const onClick = (0, _reactutilities.useEventCallback)((event)=>{
         var _props_onClick;
         let element = event.target;
@@ -35,12 +38,12 @@ function useMenuGridRow_unstable(props, ref) {
         }
         (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
     });
-    return {
+    const state = {
         components: {
             root: 'div'
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-            ref: (0, _reactutilities.useMergedRefs)(ref, validateNestingRef),
+            ref: (0, _reactutilities.useMergedRefs)(ref, validateNestingRef, innerRef, characterSearchRef),
             role: 'row',
             tabIndex: 0,
             ...tableRowTabsterAttribute,
@@ -51,4 +54,5 @@ function useMenuGridRow_unstable(props, ref) {
             elementType: 'div'
         })
     };
+    return state;
 }

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 { 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"}
+{"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';\nimport { useCharacterSearch } from './useCharacterSearch';\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 innerRef = React.useRef<HTMLDivElement>(null);\n  const { tableRowTabsterAttribute } = useMenuGridContext_unstable();\n\n  const { characterSearchOnKeyDown, characterSearchRef } = useCharacterSearch();\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(\n    mergeCallbacks(props.onKeyDown, mergeCallbacks(onKeyDownToClick, characterSearchOnKeyDown)),\n  );\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  const state: MenuGridRowState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, validateNestingRef, innerRef, characterSearchRef),\n        role: 'row',\n        tabIndex: 0,\n        ...tableRowTabsterAttribute,\n        ...props,\n        onKeyDown,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n\n  return state;\n}\n"],"names":["React","Enter","Space","useMergedRefs","useEventCallback","mergeCallbacks","getIntrinsicElementProps","slot","useMenuGridContext_unstable","useValidateNesting","useCharacterSearch","useMenuGridRow_unstable","props","ref","validateNestingRef","innerRef","useRef","tableRowTabsterAttribute","characterSearchOnKeyDown","characterSearchRef","onKeyDownToClick","event","isDefaultPrevented","key","target","currentTarget","click","onKeyDown","onClick","element","tabIndex","parentElement","state","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAoBgBW;;;;;;;iEAlBO,QAAQ;8BACF,0BAA0B;gCAOhD,4BAA4B;iCAES,iCAAiC;oCAE1C,iCAAiC;oCACjC,uBAAuB;AAKnD,iCAAiCC,KAAuB,EAAEC,GAA8B;IAC7F,MAAMC,yBAAqBL,sCAAAA,EAAmB;IAC9C,MAAMM,WAAWf,OAAMgB,MAAM,CAAiB;IAC9C,MAAM,EAAEC,wBAAwB,EAAE,GAAGT,gDAAAA;IAErC,MAAM,EAAEU,wBAAwB,EAAEC,kBAAkB,EAAE,OAAGT,sCAAAA;IAEzD,MAAMU,uBAAmBhB,gCAAAA,EAAiB,CAACiB;QACzC,IACE,CAACA,MAAMC,kBAAkB,MACxBD,CAAAA,MAAME,GAAG,KAAKtB,mBAAAA,IAASoB,MAAME,GAAG,KAAKrB,mBAAAA,AAAI,KAC1CmB,MAAMG,MAAM,KAAKH,MAAMI,aAAa,EACpC;YACAJ,MAAMI,aAAa,CAACC,KAAK;QAC3B;IACF;IAEA,MAAMC,gBAAYvB,gCAAAA,MAChBC,8BAAAA,EAAeO,MAAMe,SAAS,MAAEtB,8BAAAA,EAAee,kBAAkBF;IAGnE,MAAMU,cAAUxB,gCAAAA,EAAiB,CAACiB;YAQhCT;QAPA,IAAIiB,UAAUR,MAAMG,MAAM;QAC1B,MAAOK,WAAWA,YAAYR,MAAMI,aAAa,CAAE;YACjD,IAAII,QAAQC,QAAQ,IAAI,GAAG;gBACzB;YACF;YACAD,UAAUA,QAAQE,aAAa;QACjC;QACAnB,kBAAAA,MAAMgB,OAAAA,AAAO,MAAA,QAAbhB,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,IAAAA,CAAAA,OAAgBS;IAClB;IAEA,MAAMW,QAA0B;QAC9BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAM3B,oBAAAA,CAAK4B,MAAM,KACf7B,wCAAAA,EAAyB,OAAO;YAC9BO,SAAKV,6BAAAA,EAAcU,KAAKC,oBAAoBC,UAAUI;YACtDiB,MAAM;YACNN,UAAU;YACV,GAAGb,wBAAwB;YAC3B,GAAGL,KAAK;YACRe;YACAC;QACF,IACA;YAAES,aAAa;QAAM;IAEzB;IAEA,OAAOL;AACT"}

package/lib-commonjs/contexts/menuGridContext.js

@@ -24,7 +24,8 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const MenuGridContext = /*#__PURE__*/ _react.createContext(undefined);
 const menuGridContextDefaultValue = {
-    tableRowTabsterAttribute: null
+    tableRowTabsterAttribute: null,
+    setFocusByFirstCharacter: undefined
 };
 const MenuGridContextProvider = MenuGridContext.Provider;
 const useMenuGridContext_unstable = ()=>{

package/lib-commonjs/contexts/menuGridContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/menuGridContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\n\nexport const MenuGridContext = React.createContext<MenuGridContextValue | undefined>(\n  undefined,\n) as React.Context<MenuGridContextValue>;\n\nconst menuGridContextDefaultValue: MenuGridContextValue = {\n  tableRowTabsterAttribute: null,\n};\n\n/**\n * Context shared between MenuGrid and its children components\n */\nexport type MenuGridContextValue = {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n};\n\nexport const MenuGridContextProvider = MenuGridContext.Provider;\n\nexport const useMenuGridContext_unstable = (): MenuGridContextValue =>\n  React.useContext(MenuGridContext) ?? menuGridContextDefaultValue;\n"],"names":["React","MenuGridContext","createContext","undefined","menuGridContextDefaultValue","tableRowTabsterAttribute","MenuGridContextProvider","Provider","useMenuGridContext_unstable","useContext"],"mappings":"AAAA;;;;;;;;;;;;mBAKaC;;;2BAkBAK;eAAAA;;+BAEAE;;;;;iEAvBU,QAAQ;AAGxB,MAAMP,gCAAkBD,OAAME,aAAa,CAChDC,WACuC;AAEzC,MAAMC,8BAAoD;IACxDC,0BAA0B;AAC5B;AAYO,gCAAgCJ,gBAAgBM,QAAQ,CAAC;AAEzD,MAAMC,8BAA8B;QACzCR;WAAAA,CAAAA,oBAAAA,OAAMS,UAAU,CAACR,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B"}
+{"version":3,"sources":["../src/contexts/menuGridContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\n\nexport const MenuGridContext = React.createContext<MenuGridContextValue | undefined>(\n  undefined,\n) as React.Context<MenuGridContextValue>;\n\nconst menuGridContextDefaultValue: MenuGridContextValue = {\n  tableRowTabsterAttribute: null,\n  setFocusByFirstCharacter: undefined,\n};\n\n/**\n * Context shared between MenuGrid and its children components\n */\nexport type MenuGridContextValue = {\n  /**\n   * Tabster row attributes applied to the `MenuGridRow` components\n   */\n  tableRowTabsterAttribute: TabsterDOMAttribute | null;\n\n  /**\n   * Callback to focus the first row in the grid whose text content starts with the given character.\n   */\n  setFocusByFirstCharacter?: (e: React.KeyboardEvent<HTMLElement>, itemEl: HTMLElement) => void;\n};\n\nexport const MenuGridContextProvider = MenuGridContext.Provider;\n\nexport const useMenuGridContext_unstable = (): MenuGridContextValue =>\n  React.useContext(MenuGridContext) ?? menuGridContextDefaultValue;\n"],"names":["React","MenuGridContext","createContext","undefined","menuGridContextDefaultValue","tableRowTabsterAttribute","setFocusByFirstCharacter","MenuGridContextProvider","Provider","useMenuGridContext_unstable","useContext"],"mappings":"AAAA;;;;;;;;;;;;mBAKaC;;;2BAwBAM;;;+BAEAE;;;;;iEA7BU,QAAQ;AAGxB,MAAMR,gCAAkBD,OAAME,aAAa,CAChDC,WACuC;AAEzC,MAAMC,8BAAoD;IACxDC,0BAA0B;IAC1BC,0BAA0BH;AAC5B;AAiBO,MAAMI,0BAA0BN,gBAAgBO,QAAQ,CAAC;AAEzD,MAAMC,8BAA8B;QACzCT;WAAAA,CAAAA,oBAAAA,OAAMU,UAAU,CAACT,gBAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAqCI;EAA4B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-menu-grid-preview",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "description": "New fluentui react package",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,9 +19,9 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-menu": "^9.23.0",
+    "@fluentui/react-menu": "^9.23.1",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-table": "^9.19.11",
+    "@fluentui/react-table": "^9.19.13",
     "@fluentui/react-tabster": "^9.26.13",
     "@fluentui/react-jsx-runtime": "^9.4.1",
     "@fluentui/react-shared-contexts": "^9.26.2",