@fluentui/react-menu-grid-preview 0.2.11 → 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.
- package/CHANGELOG.md +12 -2
- package/lib/components/MenuGrid/useMenuGrid.js +10 -1
- package/lib/components/MenuGrid/useMenuGrid.js.map +1 -1
- package/lib/components/MenuGridRow/useMenuGridRow.js +22 -2
- package/lib/components/MenuGridRow/useMenuGridRow.js.map +1 -1
- package/lib-commonjs/components/MenuGrid/useMenuGrid.js +10 -1
- package/lib-commonjs/components/MenuGrid/useMenuGrid.js.map +1 -1
- package/lib-commonjs/components/MenuGridRow/useMenuGridRow.js +21 -1
- package/lib-commonjs/components/MenuGridRow/useMenuGridRow.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-menu-grid-preview
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
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
|
+
|
|
7
17
|
## [0.2.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.2.11)
|
|
8
18
|
|
|
9
|
-
Tue, 03 Mar 2026 09:
|
|
19
|
+
Tue, 03 Mar 2026 09:43:43 GMT
|
|
10
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)
|
|
11
21
|
|
|
12
22
|
### Patches
|
|
@@ -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
|
};
|
|
@@ -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;
|
|
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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
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
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {
|
|
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"}
|
|
@@ -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
|
};
|
|
@@ -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;;;;;+
|
|
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"}
|
|
@@ -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
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuGridRow/useMenuGridRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {
|
|
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.
|
|
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",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
22
22
|
"@fluentui/react-menu": "^9.22.0",
|
|
23
23
|
"@fluentui/react-icons": "^2.0.245",
|
|
24
|
-
"@fluentui/react-table": "^9.19.
|
|
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",
|