@fluentui/react-table 9.13.0 → 9.14.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 +20 -2
- package/lib/hooks/useTableCompositeNavigation.js +7 -4
- package/lib/hooks/useTableCompositeNavigation.js.map +1 -1
- package/lib-commonjs/hooks/useTableCompositeNavigation.js +6 -2
- package/lib-commonjs/hooks/useTableCompositeNavigation.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-table
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 17 Apr 2024 21:47:28 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.14.0)
|
|
8
|
+
|
|
9
|
+
Wed, 17 Apr 2024 21:47:28 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.13.0..@fluentui/react-table_v9.14.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- Tabster 7.1.0. ([PR #30969](https://github.com/microsoft/fluentui/pull/30969) by marata@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-aria to v9.10.4 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
16
|
+
- Bump @fluentui/react-avatar to v9.6.21 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
17
|
+
- Bump @fluentui/react-checkbox to v9.2.20 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
18
|
+
- Bump @fluentui/react-radio to v9.2.15 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- chore: Update react-icons to 2.0.235 ([PR #31011](https://github.com/microsoft/fluentui/pull/31011) by ololubek@microsoft.com)
|
|
24
|
+
|
|
7
25
|
## [9.13.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.13.0)
|
|
8
26
|
|
|
9
|
-
Thu, 04 Apr 2024 12:
|
|
27
|
+
Thu, 04 Apr 2024 12:08:08 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.12.1..@fluentui/react-table_v9.13.0)
|
|
11
29
|
|
|
12
30
|
### Minor changes
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
3
3
|
import { ArrowDown, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';
|
|
4
|
-
import { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable, useFocusFinders } from '@fluentui/react-tabster';
|
|
4
|
+
import { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable, useFocusFinders, GroupperMoveFocusEvent, MoverMoveFocusEvent, GroupperMoveFocusActions, MoverKeys } from '@fluentui/react-tabster';
|
|
5
5
|
import { isHTMLElement } from '@fluentui/react-utilities';
|
|
6
|
-
import { TabsterTypes, dispatchGroupperMoveFocusEvent, dispatchMoverMoveFocusEvent } from '@fluentui/react-tabster';
|
|
7
6
|
export function useTableCompositeNavigation() {
|
|
8
7
|
const horizontalAttr = useArrowNavigationGroup({
|
|
9
8
|
axis: 'horizontal'
|
|
@@ -47,10 +46,14 @@ export function useTableCompositeNavigation() {
|
|
|
47
46
|
})();
|
|
48
47
|
// Escape groupper focus trap before arrow down
|
|
49
48
|
if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {
|
|
50
|
-
|
|
49
|
+
activeElement.dispatchEvent(new GroupperMoveFocusEvent({
|
|
50
|
+
action: GroupperMoveFocusActions.Escape
|
|
51
|
+
}));
|
|
51
52
|
activeElement = targetDocument.activeElement;
|
|
52
53
|
if (activeElement) {
|
|
53
|
-
|
|
54
|
+
activeElement.dispatchEvent(new MoverMoveFocusEvent({
|
|
55
|
+
key: MoverKeys[e.key]
|
|
56
|
+
}));
|
|
54
57
|
}
|
|
55
58
|
}
|
|
56
59
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableCompositeNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport {\n useArrowNavigationGroup,\n useFocusableGroup,\n useMergedTabsterAttributes_unstable,\n TabsterDOMAttribute,\n useFocusFinders,\n} from '@fluentui/react-tabster';\nimport { isHTMLElement } from '@fluentui/react-utilities';\
|
|
1
|
+
{"version":3,"sources":["useTableCompositeNavigation.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport {\n useArrowNavigationGroup,\n useFocusableGroup,\n useMergedTabsterAttributes_unstable,\n TabsterDOMAttribute,\n useFocusFinders,\n GroupperMoveFocusEvent,\n MoverMoveFocusEvent,\n GroupperMoveFocusActions,\n MoverKeys,\n} from '@fluentui/react-tabster';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\nexport function useTableCompositeNavigation(): {\n onTableKeyDown: React.KeyboardEventHandler;\n tableTabsterAttribute: TabsterDOMAttribute;\n tableRowTabsterAttribute: TabsterDOMAttribute;\n} {\n const horizontalAttr = useArrowNavigationGroup({ axis: 'horizontal' });\n const gridAttr = useArrowNavigationGroup({ axis: 'grid' });\n const groupperAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n const { findFirstFocusable } = useFocusFinders();\n const { targetDocument } = useFluent();\n\n const rowAttr = useMergedTabsterAttributes_unstable(horizontalAttr, groupperAttr);\n\n const onKeyDown: React.KeyboardEventHandler = React.useCallback(\n e => {\n if (!targetDocument) {\n return;\n }\n\n let activeElement = targetDocument.activeElement;\n if (!activeElement || !e.currentTarget.contains(activeElement)) {\n return;\n }\n const activeElementRole = activeElement.getAttribute('role');\n\n // Enter groupper when in row focus mode to navigate cells\n if (e.key === ArrowRight && activeElementRole === 'row' && isHTMLElement(activeElement)) {\n findFirstFocusable(activeElement)?.focus();\n }\n\n if (activeElementRole === 'row') {\n return;\n }\n\n const isInCell = (() => {\n let cur = isHTMLElement(activeElement) ? activeElement : null;\n while (cur) {\n const curRole = cur.getAttribute('role');\n if (curRole === 'cell' || curRole === 'gridcell') {\n return true;\n }\n\n cur = cur.parentElement;\n }\n\n return false;\n })();\n\n // Escape groupper focus trap before arrow down\n if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {\n activeElement.dispatchEvent(new GroupperMoveFocusEvent({ action: GroupperMoveFocusActions.Escape }));\n\n activeElement = targetDocument.activeElement;\n\n if (activeElement) {\n activeElement.dispatchEvent(new MoverMoveFocusEvent({ key: MoverKeys[e.key] }));\n }\n }\n },\n [targetDocument, findFirstFocusable],\n );\n\n return {\n onTableKeyDown: onKeyDown,\n tableTabsterAttribute: gridAttr,\n tableRowTabsterAttribute: rowAttr,\n };\n}\n"],"names":["React","useFluent_unstable","useFluent","ArrowDown","ArrowRight","ArrowUp","useArrowNavigationGroup","useFocusableGroup","useMergedTabsterAttributes_unstable","useFocusFinders","GroupperMoveFocusEvent","MoverMoveFocusEvent","GroupperMoveFocusActions","MoverKeys","isHTMLElement","useTableCompositeNavigation","horizontalAttr","axis","gridAttr","groupperAttr","tabBehavior","findFirstFocusable","targetDocument","rowAttr","onKeyDown","useCallback","e","activeElement","currentTarget","contains","activeElementRole","getAttribute","key","focus","isInCell","cur","curRole","parentElement","dispatchEvent","action","Escape","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,SAAS,EAAEC,UAAU,EAAEC,OAAO,QAAQ,0BAA0B;AACzE,SACEC,uBAAuB,EACvBC,iBAAiB,EACjBC,mCAAmC,EAEnCC,eAAe,EACfC,sBAAsB,EACtBC,mBAAmB,EACnBC,wBAAwB,EACxBC,SAAS,QACJ,0BAA0B;AACjC,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,SAASC;IAKd,MAAMC,iBAAiBV,wBAAwB;QAAEW,MAAM;IAAa;IACpE,MAAMC,WAAWZ,wBAAwB;QAAEW,MAAM;IAAO;IACxD,MAAME,eAAeZ,kBAAkB;QAAEa,aAAa;IAAqB;IAC3E,MAAM,EAAEC,kBAAkB,EAAE,GAAGZ;IAC/B,MAAM,EAAEa,cAAc,EAAE,GAAGpB;IAE3B,MAAMqB,UAAUf,oCAAoCQ,gBAAgBG;IAEpE,MAAMK,YAAwCxB,MAAMyB,WAAW,CAC7DC,CAAAA;QACE,IAAI,CAACJ,gBAAgB;YACnB;QACF;QAEA,IAAIK,gBAAgBL,eAAeK,aAAa;QAChD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC9D;QACF;QACA,MAAMG,oBAAoBH,cAAcI,YAAY,CAAC;QAErD,0DAA0D;QAC1D,IAAIL,EAAEM,GAAG,KAAK5B,cAAc0B,sBAAsB,SAAShB,cAAca,gBAAgB;gBACvFN;aAAAA,sBAAAA,mBAAmBM,4BAAnBN,0CAAAA,oBAAmCY,KAAK;QAC1C;QAEA,IAAIH,sBAAsB,OAAO;YAC/B;QACF;QAEA,MAAMI,WAAW,AAAC,CAAA;YAChB,IAAIC,MAAMrB,cAAca,iBAAiBA,gBAAgB;YACzD,MAAOQ,IAAK;gBACV,MAAMC,UAAUD,IAAIJ,YAAY,CAAC;gBACjC,IAAIK,YAAY,UAAUA,YAAY,YAAY;oBAChD,OAAO;gBACT;gBAEAD,MAAMA,IAAIE,aAAa;YACzB;YAEA,OAAO;QACT,CAAA;QAEA,+CAA+C;QAC/C,IAAI,AAACX,CAAAA,EAAEM,GAAG,KAAK7B,aAAauB,EAAEM,GAAG,KAAK3B,OAAM,KAAM6B,UAAU;YAC1DP,cAAcW,aAAa,CAAC,IAAI5B,uBAAuB;gBAAE6B,QAAQ3B,yBAAyB4B,MAAM;YAAC;YAEjGb,gBAAgBL,eAAeK,aAAa;YAE5C,IAAIA,eAAe;gBACjBA,cAAcW,aAAa,CAAC,IAAI3B,oBAAoB;oBAAEqB,KAAKnB,SAAS,CAACa,EAAEM,GAAG,CAAC;gBAAC;YAC9E;QACF;IACF,GACA;QAACV;QAAgBD;KAAmB;IAGtC,OAAO;QACLoB,gBAAgBjB;QAChBkB,uBAAuBxB;QACvByB,0BAA0BpB;IAC5B;AACF"}
|
|
@@ -57,10 +57,14 @@ function useTableCompositeNavigation() {
|
|
|
57
57
|
})();
|
|
58
58
|
// Escape groupper focus trap before arrow down
|
|
59
59
|
if ((e.key === _keyboardkeys.ArrowDown || e.key === _keyboardkeys.ArrowUp) && isInCell) {
|
|
60
|
-
(
|
|
60
|
+
activeElement.dispatchEvent(new _reacttabster.GroupperMoveFocusEvent({
|
|
61
|
+
action: _reacttabster.GroupperMoveFocusActions.Escape
|
|
62
|
+
}));
|
|
61
63
|
activeElement = targetDocument.activeElement;
|
|
62
64
|
if (activeElement) {
|
|
63
|
-
(
|
|
65
|
+
activeElement.dispatchEvent(new _reacttabster.MoverMoveFocusEvent({
|
|
66
|
+
key: _reacttabster.MoverKeys[e.key]
|
|
67
|
+
}));
|
|
64
68
|
}
|
|
65
69
|
}
|
|
66
70
|
}, [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableCompositeNavigation.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable, useFocusFinders
|
|
1
|
+
{"version":3,"sources":["useTableCompositeNavigation.js"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { ArrowDown, ArrowRight, ArrowUp } from '@fluentui/keyboard-keys';\nimport { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable, useFocusFinders, GroupperMoveFocusEvent, MoverMoveFocusEvent, GroupperMoveFocusActions, MoverKeys } from '@fluentui/react-tabster';\nimport { isHTMLElement } from '@fluentui/react-utilities';\nexport function useTableCompositeNavigation() {\n const horizontalAttr = useArrowNavigationGroup({\n axis: 'horizontal'\n });\n const gridAttr = useArrowNavigationGroup({\n axis: 'grid'\n });\n const groupperAttr = useFocusableGroup({\n tabBehavior: 'limited-trap-focus'\n });\n const { findFirstFocusable } = useFocusFinders();\n const { targetDocument } = useFluent();\n const rowAttr = useMergedTabsterAttributes_unstable(horizontalAttr, groupperAttr);\n const onKeyDown = React.useCallback((e)=>{\n if (!targetDocument) {\n return;\n }\n let activeElement = targetDocument.activeElement;\n if (!activeElement || !e.currentTarget.contains(activeElement)) {\n return;\n }\n const activeElementRole = activeElement.getAttribute('role');\n // Enter groupper when in row focus mode to navigate cells\n if (e.key === ArrowRight && activeElementRole === 'row' && isHTMLElement(activeElement)) {\n var _findFirstFocusable;\n (_findFirstFocusable = findFirstFocusable(activeElement)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();\n }\n if (activeElementRole === 'row') {\n return;\n }\n const isInCell = (()=>{\n let cur = isHTMLElement(activeElement) ? activeElement : null;\n while(cur){\n const curRole = cur.getAttribute('role');\n if (curRole === 'cell' || curRole === 'gridcell') {\n return true;\n }\n cur = cur.parentElement;\n }\n return false;\n })();\n // Escape groupper focus trap before arrow down\n if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {\n activeElement.dispatchEvent(new GroupperMoveFocusEvent({\n action: GroupperMoveFocusActions.Escape\n }));\n activeElement = targetDocument.activeElement;\n if (activeElement) {\n activeElement.dispatchEvent(new MoverMoveFocusEvent({\n key: MoverKeys[e.key]\n }));\n }\n }\n }, [\n targetDocument,\n findFirstFocusable\n ]);\n return {\n onTableKeyDown: onKeyDown,\n tableTabsterAttribute: gridAttr,\n tableRowTabsterAttribute: rowAttr\n };\n}\n"],"names":["useTableCompositeNavigation","horizontalAttr","useArrowNavigationGroup","axis","gridAttr","groupperAttr","useFocusableGroup","tabBehavior","findFirstFocusable","useFocusFinders","targetDocument","useFluent","rowAttr","useMergedTabsterAttributes_unstable","onKeyDown","React","useCallback","e","activeElement","currentTarget","contains","activeElementRole","getAttribute","key","ArrowRight","isHTMLElement","_findFirstFocusable","focus","isInCell","cur","curRole","parentElement","ArrowDown","ArrowUp","dispatchEvent","GroupperMoveFocusEvent","action","GroupperMoveFocusActions","Escape","MoverMoveFocusEvent","MoverKeys","onTableKeyDown","tableTabsterAttribute","tableRowTabsterAttribute"],"mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;qCACyB;8BACD;8BACoJ;gCACrK;AACvB,SAASA;IACZ,MAAMC,iBAAiBC,IAAAA,qCAAuB,EAAC;QAC3CC,MAAM;IACV;IACA,MAAMC,WAAWF,IAAAA,qCAAuB,EAAC;QACrCC,MAAM;IACV;IACA,MAAME,eAAeC,IAAAA,+BAAiB,EAAC;QACnCC,aAAa;IACjB;IACA,MAAM,EAAEC,kBAAkB,EAAE,GAAGC,IAAAA,6BAAe;IAC9C,MAAM,EAAEC,cAAc,EAAE,GAAGC,IAAAA,uCAAS;IACpC,MAAMC,UAAUC,IAAAA,iDAAmC,EAACZ,gBAAgBI;IACpE,MAAMS,YAAYC,OAAMC,WAAW,CAAC,CAACC;QACjC,IAAI,CAACP,gBAAgB;YACjB;QACJ;QACA,IAAIQ,gBAAgBR,eAAeQ,aAAa;QAChD,IAAI,CAACA,iBAAiB,CAACD,EAAEE,aAAa,CAACC,QAAQ,CAACF,gBAAgB;YAC5D;QACJ;QACA,MAAMG,oBAAoBH,cAAcI,YAAY,CAAC;QACrD,0DAA0D;QAC1D,IAAIL,EAAEM,GAAG,KAAKC,wBAAU,IAAIH,sBAAsB,SAASI,IAAAA,6BAAa,EAACP,gBAAgB;YACrF,IAAIQ;YACHA,CAAAA,sBAAsBlB,mBAAmBU,cAAa,MAAO,QAAQQ,wBAAwB,KAAK,IAAI,KAAK,IAAIA,oBAAoBC,KAAK;QAC7I;QACA,IAAIN,sBAAsB,OAAO;YAC7B;QACJ;QACA,MAAMO,WAAW,AAAC,CAAA;YACd,IAAIC,MAAMJ,IAAAA,6BAAa,EAACP,iBAAiBA,gBAAgB;YACzD,MAAMW,IAAI;gBACN,MAAMC,UAAUD,IAAIP,YAAY,CAAC;gBACjC,IAAIQ,YAAY,UAAUA,YAAY,YAAY;oBAC9C,OAAO;gBACX;gBACAD,MAAMA,IAAIE,aAAa;YAC3B;YACA,OAAO;QACX,CAAA;QACA,+CAA+C;QAC/C,IAAI,AAACd,CAAAA,EAAEM,GAAG,KAAKS,uBAAS,IAAIf,EAAEM,GAAG,KAAKU,qBAAO,AAAD,KAAML,UAAU;YACxDV,cAAcgB,aAAa,CAAC,IAAIC,oCAAsB,CAAC;gBACnDC,QAAQC,sCAAwB,CAACC,MAAM;YAC3C;YACApB,gBAAgBR,eAAeQ,aAAa;YAC5C,IAAIA,eAAe;gBACfA,cAAcgB,aAAa,CAAC,IAAIK,iCAAmB,CAAC;oBAChDhB,KAAKiB,uBAAS,CAACvB,EAAEM,GAAG,CAAC;gBACzB;YACJ;QACJ;IACJ,GAAG;QACCb;QACAF;KACH;IACD,OAAO;QACHiC,gBAAgB3B;QAChB4B,uBAAuBtC;QACvBuC,0BAA0B/B;IAC9B;AACJ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-table",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.14.0",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -36,14 +36,14 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@fluentui/keyboard-keys": "^9.0.7",
|
|
39
|
-
"@fluentui/react-aria": "^9.10.
|
|
40
|
-
"@fluentui/react-avatar": "^9.6.
|
|
41
|
-
"@fluentui/react-checkbox": "^9.2.
|
|
39
|
+
"@fluentui/react-aria": "^9.10.4",
|
|
40
|
+
"@fluentui/react-avatar": "^9.6.21",
|
|
41
|
+
"@fluentui/react-checkbox": "^9.2.20",
|
|
42
42
|
"@fluentui/react-context-selector": "^9.1.57",
|
|
43
|
-
"@fluentui/react-icons": "^2.0.
|
|
44
|
-
"@fluentui/react-radio": "^9.2.
|
|
43
|
+
"@fluentui/react-icons": "^2.0.235",
|
|
44
|
+
"@fluentui/react-radio": "^9.2.15",
|
|
45
45
|
"@fluentui/react-shared-contexts": "^9.16.0",
|
|
46
|
-
"@fluentui/react-tabster": "^9.
|
|
46
|
+
"@fluentui/react-tabster": "^9.20.0",
|
|
47
47
|
"@fluentui/react-theme": "^9.1.19",
|
|
48
48
|
"@fluentui/react-utilities": "^9.18.6",
|
|
49
49
|
"@fluentui/react-jsx-runtime": "^9.0.35",
|