@fluentui/react-menu-grid-preview 0.2.10 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +22 -2
  2. package/lib/components/MenuGrid/useMenuGrid.js +10 -1
  3. package/lib/components/MenuGrid/useMenuGrid.js.map +1 -1
  4. package/lib/components/MenuGridRow/useMenuGridRow.js +22 -2
  5. package/lib/components/MenuGridRow/useMenuGridRow.js.map +1 -1
  6. package/lib-commonjs/components/MenuGrid/useMenuGrid.js +10 -1
  7. package/lib-commonjs/components/MenuGrid/useMenuGrid.js.map +1 -1
  8. package/lib-commonjs/components/MenuGridRow/useMenuGridRow.js +21 -1
  9. package/lib-commonjs/components/MenuGridRow/useMenuGridRow.js.map +1 -1
  10. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,12 +1,32 @@
1
1
  # Change Log - @fluentui/react-menu-grid-preview
2
2
 
3
- This log was last generated on Wed, 25 Feb 2026 13:28:23 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 11 Mar 2026 09:20:36 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.3.0)
8
+
9
+ Wed, 11 Mar 2026 09:20:36 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.2.11..@fluentui/react-menu-grid-preview_v0.3.0)
11
+
12
+ ### Minor changes
13
+
14
+ - Proper onClick handling for MenuGridRow ([PR #35795](https://github.com/microsoft/fluentui/pull/35795) by adam.samec@gmail.com)
15
+ - Bump @fluentui/react-table to v9.19.11 ([PR #35854](https://github.com/microsoft/fluentui/pull/35854) by beachball)
16
+
17
+ ## [0.2.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.2.11)
18
+
19
+ Tue, 03 Mar 2026 09:43:43 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.2.10..@fluentui/react-menu-grid-preview_v0.2.11)
21
+
22
+ ### Patches
23
+
24
+ - Bump @fluentui/react-menu to v9.22.0 ([commit](https://github.com/microsoft/fluentui/commit/81e1556b008bfbd07fe427d89af6142459d74c6f) by beachball)
25
+ - Bump @fluentui/react-table to v9.19.10 ([commit](https://github.com/microsoft/fluentui/commit/81e1556b008bfbd07fe427d89af6142459d74c6f) by beachball)
26
+
7
27
  ## [0.2.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.2.10)
8
28
 
9
- Wed, 25 Feb 2026 13:28:23 GMT
29
+ Wed, 25 Feb 2026 13:32:28 GMT
10
30
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.2.9..@fluentui/react-menu-grid-preview_v0.2.10)
11
31
 
12
32
  ### Patches
package/lib/components/MenuGrid/useMenuGrid.js CHANGED
@@ -2,6 +2,7 @@
2
2
  import * as React from 'react';
3
3
  import { useMergedRefs, useEventCallback, mergeCallbacks, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
4
4
  import { useTableCompositeNavigation } from '@fluentui/react-table';
5
+ import { useMergedTabsterAttributes_unstable, useTabsterAttributes } from '@fluentui/react-tabster';
5
6
  import { useMenuContext_unstable } from '@fluentui/react-menu';
6
7
  import { useValidateNesting } from '../../utils/useValidateNesting';
7
8
  /**
@@ -11,6 +12,14 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
11
12
  const triggerId = useMenuContext_unstable((context)=>context.triggerId);
12
13
  const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = useTableCompositeNavigation();
13
14
  const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onTableKeyDown));
15
+ const ignoreEnterKeyAttribute = useTabsterAttributes({
16
+ focusable: {
17
+ ignoreKeydown: {
18
+ Enter: true
19
+ }
20
+ }
21
+ });
22
+ const mergedRowTabsterAttribute = useMergedTabsterAttributes_unstable(tableRowTabsterAttribute, ignoreEnterKeyAttribute);
14
23
  return {
15
24
  components: {
16
25
  root: 'div'
@@ -25,6 +34,6 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
25
34
  }), {
26
35
  elementType: 'div'
27
36
  }),
28
- tableRowTabsterAttribute
37
+ tableRowTabsterAttribute: mergedRowTabsterAttribute
29
38
  };
30
39
  };
package/lib/components/MenuGrid/useMenuGrid.js.map CHANGED
@@ -1 +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"}
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"}
package/lib/components/MenuGridRow/useMenuGridRow.js CHANGED
@@ -1,6 +1,7 @@
1
1
  'use client';
2
2
  import * as React from 'react';
3
- import { useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
3
+ import { Enter, Space } from '@fluentui/keyboard-keys';
4
+ import { useMergedRefs, useEventCallback, mergeCallbacks, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
4
5
  import { useMenuGridContext_unstable } from '../../contexts/menuGridContext';
5
6
  import { useValidateNesting } from '../../utils/useValidateNesting';
6
7
  /**
@@ -8,6 +9,23 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
8
9
  */ export function useMenuGridRow_unstable(props, ref) {
9
10
  const validateNestingRef = useValidateNesting('MenuGridRow');
10
11
  const { tableRowTabsterAttribute } = useMenuGridContext_unstable();
12
+ const onKeyDownToClick = useEventCallback((event)=>{
13
+ if (!event.isDefaultPrevented() && (event.key === Enter || event.key === Space) && event.target === event.currentTarget) {
14
+ event.currentTarget.click();
15
+ }
16
+ });
17
+ const onKeyDown = useEventCallback(mergeCallbacks(props.onKeyDown, onKeyDownToClick));
18
+ const onClick = useEventCallback((event)=>{
19
+ var _props_onClick;
20
+ let element = event.target;
21
+ while(element && element !== event.currentTarget){
22
+ if (element.tabIndex >= 0) {
23
+ return;
24
+ }
25
+ element = element.parentElement;
26
+ }
27
+ (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
28
+ });
11
29
  return {
12
30
  components: {
13
31
  root: 'div'
@@ -17,7 +35,9 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
17
35
  role: 'row',
18
36
  tabIndex: 0,
19
37
  ...tableRowTabsterAttribute,
20
- ...props
38
+ ...props,
39
+ onKeyDown,
40
+ onClick
21
41
  }), {
22
42
  elementType: 'div'
23
43
  })
package/lib/components/MenuGridRow/useMenuGridRow.js.map CHANGED
@@ -1 +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"}
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"}
package/lib-commonjs/components/MenuGrid/useMenuGrid.js CHANGED
@@ -13,6 +13,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
13
13
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
14
  const _reactutilities = require("@fluentui/react-utilities");
15
15
  const _reacttable = require("@fluentui/react-table");
16
+ const _reacttabster = require("@fluentui/react-tabster");
16
17
  const _reactmenu = require("@fluentui/react-menu");
17
18
  const _useValidateNesting = require("../../utils/useValidateNesting");
18
19
  const useMenuGrid_unstable = (props, ref)=>{
@@ -20,6 +21,14 @@ const useMenuGrid_unstable = (props, ref)=>{
20
21
  const triggerId = (0, _reactmenu.useMenuContext_unstable)((context)=>context.triggerId);
21
22
  const { tableRowTabsterAttribute, tableTabsterAttribute, onTableKeyDown } = (0, _reacttable.useTableCompositeNavigation)();
22
23
  const onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(props.onKeyDown, onTableKeyDown));
24
+ const ignoreEnterKeyAttribute = (0, _reacttabster.useTabsterAttributes)({
25
+ focusable: {
26
+ ignoreKeydown: {
27
+ Enter: true
28
+ }
29
+ }
30
+ });
31
+ const mergedRowTabsterAttribute = (0, _reacttabster.useMergedTabsterAttributes_unstable)(tableRowTabsterAttribute, ignoreEnterKeyAttribute);
23
32
  return {
24
33
  components: {
25
34
  root: 'div'
@@ -34,6 +43,6 @@ const useMenuGrid_unstable = (props, ref)=>{
34
43
  }), {
35
44
  elementType: 'div'
36
45
  }),
37
- tableRowTabsterAttribute
46
+ tableRowTabsterAttribute: mergedRowTabsterAttribute
38
47
  };
39
48
  };
package/lib-commonjs/components/MenuGrid/useMenuGrid.js.map CHANGED
@@ -1 +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"}
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"}
package/lib-commonjs/components/MenuGridRow/useMenuGridRow.js CHANGED
@@ -11,12 +11,30 @@ Object.defineProperty(exports, "useMenuGridRow_unstable", {
11
11
  });
12
12
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
13
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
+ const _keyboardkeys = require("@fluentui/keyboard-keys");
14
15
  const _reactutilities = require("@fluentui/react-utilities");
15
16
  const _menuGridContext = require("../../contexts/menuGridContext");
16
17
  const _useValidateNesting = require("../../utils/useValidateNesting");
17
18
  function useMenuGridRow_unstable(props, ref) {
18
19
  const validateNestingRef = (0, _useValidateNesting.useValidateNesting)('MenuGridRow');
19
20
  const { tableRowTabsterAttribute } = (0, _menuGridContext.useMenuGridContext_unstable)();
21
+ const onKeyDownToClick = (0, _reactutilities.useEventCallback)((event)=>{
22
+ if (!event.isDefaultPrevented() && (event.key === _keyboardkeys.Enter || event.key === _keyboardkeys.Space) && event.target === event.currentTarget) {
23
+ event.currentTarget.click();
24
+ }
25
+ });
26
+ const onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(props.onKeyDown, onKeyDownToClick));
27
+ const onClick = (0, _reactutilities.useEventCallback)((event)=>{
28
+ var _props_onClick;
29
+ let element = event.target;
30
+ while(element && element !== event.currentTarget){
31
+ if (element.tabIndex >= 0) {
32
+ return;
33
+ }
34
+ element = element.parentElement;
35
+ }
36
+ (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
37
+ });
20
38
  return {
21
39
  components: {
22
40
  root: 'div'
@@ -26,7 +44,9 @@ function useMenuGridRow_unstable(props, ref) {
26
44
  role: 'row',
27
45
  tabIndex: 0,
28
46
  ...tableRowTabsterAttribute,
29
- ...props
47
+ ...props,
48
+ onKeyDown,
49
+ onClick
30
50
  }), {
31
51
  elementType: 'div'
32
52
  })
package/lib-commonjs/components/MenuGridRow/useMenuGridRow.js.map CHANGED
@@ -1 +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"}
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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-menu-grid-preview",
3
- "version": "0.2.10",
3
+ "version": "0.3.0",
4
4
  "description": "New fluentui react package",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -19,9 +19,9 @@
19
19
  "license": "MIT",
20
20
  "dependencies": {
21
21
  "@fluentui/keyboard-keys": "^9.0.8",
22
- "@fluentui/react-menu": "^9.21.2",
22
+ "@fluentui/react-menu": "^9.22.0",
23
23
  "@fluentui/react-icons": "^2.0.245",
24
- "@fluentui/react-table": "^9.19.9",
24
+ "@fluentui/react-table": "^9.19.11",
25
25
  "@fluentui/react-tabster": "^9.26.13",
26
26
  "@fluentui/react-jsx-runtime": "^9.4.1",
27
27
  "@fluentui/react-shared-contexts": "^9.26.2",