@fluentui/react-menu-grid-preview 0.4.0 → 0.5.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 +24 -2
- package/dist/index.d.ts +1 -1
- package/lib/components/MenuGrid/useMenuGrid.js +2 -2
- package/lib/components/MenuGrid/useMenuGrid.js.map +1 -1
- package/lib/components/MenuGrid/useMenuGridContextValues.js +2 -1
- package/lib/components/MenuGrid/useMenuGridContextValues.js.map +1 -1
- package/lib/components/MenuGridItem/MenuGridItem.types.js.map +1 -1
- package/lib-commonjs/components/MenuGrid/useMenuGrid.js +2 -2
- package/lib-commonjs/components/MenuGrid/useMenuGrid.js.map +1 -1
- package/lib-commonjs/components/MenuGrid/useMenuGridContextValues.js +2 -1
- package/lib-commonjs/components/MenuGrid/useMenuGridContextValues.js.map +1 -1
- package/lib-commonjs/components/MenuGridItem/MenuGridItem.types.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,34 @@
|
|
|
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, 01 Apr 2026 15:50:21 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.5.0)
|
|
8
|
+
|
|
9
|
+
Wed, 01 Apr 2026 15:50:21 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.4.1..@fluentui/react-menu-grid-preview_v0.5.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- Fix: Left arrow behavior in MenuGrid submenus ([PR #35928](https://github.com/microsoft/fluentui/pull/35928) by email not defined)
|
|
15
|
+
- Fix: Correct type for content prop in MenuGridItem ([PR #35939](https://github.com/microsoft/fluentui/pull/35939) by email not defined)
|
|
16
|
+
- Bump @fluentui/react-menu to v9.24.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
|
|
17
|
+
- Bump @fluentui/react-table to v9.19.14 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
|
|
18
|
+
|
|
19
|
+
## [0.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.4.1)
|
|
20
|
+
|
|
21
|
+
Mon, 30 Mar 2026 14:37:41 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.4.0..@fluentui/react-menu-grid-preview_v0.4.1)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- Bump @fluentui/react-menu to v9.23.1 ([PR #35907](https://github.com/microsoft/fluentui/pull/35907) by beachball)
|
|
27
|
+
- Bump @fluentui/react-table to v9.19.13 ([PR #35907](https://github.com/microsoft/fluentui/pull/35907) by beachball)
|
|
28
|
+
|
|
7
29
|
## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-menu-grid-preview_v0.4.0)
|
|
8
30
|
|
|
9
|
-
Thu, 26 Mar 2026 08:
|
|
31
|
+
Thu, 26 Mar 2026 08:12:50 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-menu-grid-preview_v0.3.2..@fluentui/react-menu-grid-preview_v0.4.0)
|
|
11
33
|
|
|
12
34
|
### Minor changes
|
package/dist/index.d.ts
CHANGED
|
@@ -115,7 +115,7 @@ export declare const MenuGridItem: ForwardRefComponent<MenuGridItemProps>;
|
|
|
115
115
|
|
|
116
116
|
export declare const menuGridItemClassNames: SlotClassNames<MenuGridItemSlots>;
|
|
117
117
|
|
|
118
|
-
export declare type MenuGridItemProps = ComponentProps<Partial<MenuGridItemSlots
|
|
118
|
+
export declare type MenuGridItemProps = Omit<ComponentProps<Partial<MenuGridItemSlots>>, 'content'> & Pick<Partial<MenuGridItemSlots>, 'content'>;
|
|
119
119
|
|
|
120
120
|
export declare type MenuGridItemSlots = {
|
|
121
121
|
root: Slot<MenuGridRowProps>;
|
|
@@ -33,10 +33,10 @@ import { useValidateNesting } from '../../utils/useValidateNesting';
|
|
|
33
33
|
}
|
|
34
34
|
const target = e.target;
|
|
35
35
|
// Only apply first-letter navigation when event target is a grid row, otherwise it may conflict with other components inside the grid row
|
|
36
|
-
if (
|
|
36
|
+
if (target.role !== 'row') {
|
|
37
37
|
return;
|
|
38
38
|
}
|
|
39
|
-
const rows = findAllFocusable(innerRef.current, (el)=>el.
|
|
39
|
+
const rows = findAllFocusable(innerRef.current, (el)=>el.role === 'row');
|
|
40
40
|
let startIndex = rows.indexOf(itemEl) + 1;
|
|
41
41
|
if (startIndex === rows.length) {
|
|
42
42
|
startIndex = 0;
|
|
@@ -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 {\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 (
|
|
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 {\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.role !== 'row') {\n return;\n }\n\n const rows = findAllFocusable(innerRef.current, (el: HTMLElement) => el.role === 'row');\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","role","rows","el","startIndex","indexOf","length","firstChars","map","row","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","i","index","focus","components","root","always","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,IAAIA,OAAOC,IAAI,KAAK,OAAO;YACzB;QACF;QAEA,MAAMC,OAAOrB,iBAAiBF,SAASoB,OAAO,EAAE,CAACI,KAAoBA,GAAGF,IAAI,KAAK;QAEjF,IAAIG,aAAaF,KAAKG,OAAO,CAACP,UAAU;QACxC,IAAIM,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,OAAOhB,EAAEiB,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;QAACtC;KAAiB;IAGpB,OAAO;QACLuC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMxD,KAAKyD,MAAM,CACf1D,yBAAyB,OAAO;YAC9BW,KAAKd,cAAcc,KAAKG,oBAAoBC;YAC5CsB,MAAM;YACN,mBAAmBnB;YACnB,GAAGM,sBAAsB;YACzB,GAAGX,SAAS;YACZiB;QACF,IACA;YAAE6B,aAAa;QAAM;QAEvBvC,0BAA0BS;QAC1BE;IACF;AACF,EAAE"}
|
|
@@ -4,7 +4,8 @@ const menuList = {
|
|
|
4
4
|
checkedValues: {},
|
|
5
5
|
hasIcons: false,
|
|
6
6
|
hasCheckmarks: false,
|
|
7
|
-
shouldOpenOnArrowRight: false
|
|
7
|
+
shouldOpenOnArrowRight: false,
|
|
8
|
+
shouldCloseOnArrowLeft: false
|
|
8
9
|
};
|
|
9
10
|
export function useMenuGridContextValues_unstable(state) {
|
|
10
11
|
const { tableRowTabsterAttribute, setFocusByFirstCharacter } = state;
|
|
@@ -1 +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, 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,
|
|
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 shouldCloseOnArrowLeft: 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","shouldCloseOnArrowLeft","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;IACxBC,wBAAwB;AAC1B;AAEA,OAAO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,wBAAwB,EAAEC,wBAAwB,EAAE,GAAGF;IAC/D,MAAMG,WAAWX,MAAMY,OAAO,CAC5B,IAAO,CAAA;YAAEH;YAA0BC;QAAyB,CAAA,GAC5D;QAACD;QAA0BC;KAAyB;IAGtD,OAAO;QAAEC;QAAUV;IAAS;AAC9B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuGridItem/MenuGridItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuGridCellProps } from './../MenuGridCell/MenuGridCell.types';\nimport { MenuGridRowProps } from './../MenuGridRow/MenuGridRow.types';\n\nexport type MenuGridItemSlots = {\n root: Slot<MenuGridRowProps>;\n\n /**\n * Icon slot rendered as cell before content cell\n */\n icon?: Slot<MenuGridCellProps>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<MenuGridCellProps>;\n\n /**\n * Additional descriptor to main content that creates a multiline layout\n */\n subText?: Slot<'span'>;\n\n /**\n * Firstd sub-action slot rendered as cell after content cell\n */\n firstSubAction?: Slot<MenuGridCellProps>;\n\n /**\n * Second sub-action slot rendered as cell after first sub-action cell\n */\n secondSubAction?: Slot<MenuGridCellProps>;\n};\n\nexport type MenuGridItemProps = ComponentProps<Partial<MenuGridItemSlots
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuGridItem/MenuGridItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuGridCellProps } from './../MenuGridCell/MenuGridCell.types';\nimport { MenuGridRowProps } from './../MenuGridRow/MenuGridRow.types';\n\nexport type MenuGridItemSlots = {\n root: Slot<MenuGridRowProps>;\n\n /**\n * Icon slot rendered as cell before content cell\n */\n icon?: Slot<MenuGridCellProps>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<MenuGridCellProps>;\n\n /**\n * Additional descriptor to main content that creates a multiline layout\n */\n subText?: Slot<'span'>;\n\n /**\n * Firstd sub-action slot rendered as cell after content cell\n */\n firstSubAction?: Slot<MenuGridCellProps>;\n\n /**\n * Second sub-action slot rendered as cell after first sub-action cell\n */\n secondSubAction?: Slot<MenuGridCellProps>;\n};\n\nexport type MenuGridItemProps = Omit<ComponentProps<Partial<MenuGridItemSlots>>, 'content'> &\n Pick<Partial<MenuGridItemSlots>, 'content'>;\n\nexport type MenuGridItemState = ComponentState<MenuGridItemSlots>;\n"],"names":[],"mappings":"AAqCA,WAAkE"}
|
|
@@ -42,10 +42,10 @@ const useMenuGrid_unstable = (props, ref)=>{
|
|
|
42
42
|
}
|
|
43
43
|
const target = e.target;
|
|
44
44
|
// Only apply first-letter navigation when event target is a grid row, otherwise it may conflict with other components inside the grid row
|
|
45
|
-
if (
|
|
45
|
+
if (target.role !== 'row') {
|
|
46
46
|
return;
|
|
47
47
|
}
|
|
48
|
-
const rows = findAllFocusable(innerRef.current, (el)=>el.
|
|
48
|
+
const rows = findAllFocusable(innerRef.current, (el)=>el.role === 'row');
|
|
49
49
|
let startIndex = rows.indexOf(itemEl) + 1;
|
|
50
50
|
if (startIndex === rows.length) {
|
|
51
51
|
startIndex = 0;
|
|
@@ -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 {\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 (
|
|
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 {\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.role !== 'row') {\n return;\n }\n\n const rows = findAllFocusable(innerRef.current, (el: HTMLElement) => el.role === 'row');\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","role","rows","el","startIndex","indexOf","length","firstChars","map","row","textContent","charAt","toLowerCase","char","key","getIndexFirstChars","start","i","index","focus","components","root","always","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,yBAAyBnB,qDAAAA,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,gBAAYhC,gCAAAA,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,IAAIA,OAAOC,IAAI,KAAK,OAAO;YACzB;QACF;QAEA,MAAMC,OAAOrB,iBAAiBF,SAASoB,OAAO,EAAE,CAACI,KAAoBA,GAAGF,IAAI,KAAK;QAEjF,IAAIG,aAAaF,KAAKG,OAAO,CAACP,UAAU;QACxC,IAAIM,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,OAAOhB,EAAEiB,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;QAACtC;KAAiB;IAGpB,OAAO;QACLuC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMxD,oBAAAA,CAAKyD,MAAM,KACf1D,wCAAAA,EAAyB,OAAO;YAC9BW,SAAKd,6BAAAA,EAAcc,KAAKG,oBAAoBC;YAC5CsB,MAAM;YACN,mBAAmBnB;YACnB,GAAGM,sBAAsB;YACzB,GAAGX,SAAS;YACZiB;QACF,IACA;YAAE6B,aAAa;QAAM;QAEvBvC,0BAA0BS;QAC1BE;IACF;AACF,EAAE"}
|
|
@@ -15,7 +15,8 @@ const menuList = {
|
|
|
15
15
|
checkedValues: {},
|
|
16
16
|
hasIcons: false,
|
|
17
17
|
hasCheckmarks: false,
|
|
18
|
-
shouldOpenOnArrowRight: false
|
|
18
|
+
shouldOpenOnArrowRight: false,
|
|
19
|
+
shouldCloseOnArrowLeft: false
|
|
19
20
|
};
|
|
20
21
|
function useMenuGridContextValues_unstable(state) {
|
|
21
22
|
const { tableRowTabsterAttribute, setFocusByFirstCharacter } = state;
|
|
@@ -1 +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, 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,
|
|
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 shouldCloseOnArrowLeft: 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","shouldCloseOnArrowLeft","useMenuGridContextValues_unstable","state","tableRowTabsterAttribute","setFocusByFirstCharacter","menuGrid","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAG/B,MAAMC,WAAW;IACfC,eAAe,CAAC;IAChBC,UAAU;IACVC,eAAe;IACfC,wBAAwB;IACxBC,wBAAwB;AAC1B;AAEO,SAASC,kCAAkCC,KAAoB;IACpE,MAAM,EAAEC,wBAAwB,EAAEC,wBAAwB,EAAE,GAAGF;IAC/D,MAAMG,WAAWX,OAAMY,OAAO,CAC5B,IAAO,CAAA;YAAEH;YAA0BC;SAAyB,CAAA,EAC5D;QAACD;QAA0BC;KAAyB;IAGtD,OAAO;QAAEC;QAAUV;IAAS;AAC9B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuGridItem/MenuGridItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuGridCellProps } from './../MenuGridCell/MenuGridCell.types';\nimport { MenuGridRowProps } from './../MenuGridRow/MenuGridRow.types';\n\nexport type MenuGridItemSlots = {\n root: Slot<MenuGridRowProps>;\n\n /**\n * Icon slot rendered as cell before content cell\n */\n icon?: Slot<MenuGridCellProps>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<MenuGridCellProps>;\n\n /**\n * Additional descriptor to main content that creates a multiline layout\n */\n subText?: Slot<'span'>;\n\n /**\n * Firstd sub-action slot rendered as cell after content cell\n */\n firstSubAction?: Slot<MenuGridCellProps>;\n\n /**\n * Second sub-action slot rendered as cell after first sub-action cell\n */\n secondSubAction?: Slot<MenuGridCellProps>;\n};\n\nexport type MenuGridItemProps = ComponentProps<Partial<MenuGridItemSlots
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuGridItem/MenuGridItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuGridCellProps } from './../MenuGridCell/MenuGridCell.types';\nimport { MenuGridRowProps } from './../MenuGridRow/MenuGridRow.types';\n\nexport type MenuGridItemSlots = {\n root: Slot<MenuGridRowProps>;\n\n /**\n * Icon slot rendered as cell before content cell\n */\n icon?: Slot<MenuGridCellProps>;\n\n /**\n * Component children are placed in this slot\n * Avoid using the `children` property in this slot in favour of Component children whenever possible\n */\n content?: Slot<MenuGridCellProps>;\n\n /**\n * Additional descriptor to main content that creates a multiline layout\n */\n subText?: Slot<'span'>;\n\n /**\n * Firstd sub-action slot rendered as cell after content cell\n */\n firstSubAction?: Slot<MenuGridCellProps>;\n\n /**\n * Second sub-action slot rendered as cell after first sub-action cell\n */\n secondSubAction?: Slot<MenuGridCellProps>;\n};\n\nexport type MenuGridItemProps = Omit<ComponentProps<Partial<MenuGridItemSlots>>, 'content'> &\n Pick<Partial<MenuGridItemSlots>, 'content'>;\n\nexport type MenuGridItemState = ComponentState<MenuGridItemSlots>;\n"],"names":[],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-menu-grid-preview",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.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.
|
|
22
|
+
"@fluentui/react-menu": "^9.24.0",
|
|
23
23
|
"@fluentui/react-icons": "^2.0.245",
|
|
24
|
-
"@fluentui/react-table": "^9.19.
|
|
24
|
+
"@fluentui/react-table": "^9.19.14",
|
|
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",
|