@fluentui/react-table 9.4.4 → 9.6.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.json +94 -10
- package/CHANGELOG.md +38 -11
- package/dist/index.d.ts +22 -3
- package/lib/components/DataGrid/DataGrid.types.js.map +1 -1
- package/lib/components/DataGrid/useDataGrid.js +10 -6
- package/lib/components/DataGrid/useDataGrid.js.map +1 -1
- package/lib/components/DataGrid/useDataGridContextValues.js +8 -6
- package/lib/components/DataGrid/useDataGridContextValues.js.map +1 -1
- package/lib/components/DataGridCell/DataGridCell.types.js.map +1 -1
- package/lib/components/DataGridCell/useDataGridCell.js +3 -3
- package/lib/components/DataGridCell/useDataGridCell.js.map +1 -1
- package/lib/components/DataGridRow/useDataGridRow.js +6 -3
- package/lib/components/DataGridRow/useDataGridRow.js.map +1 -1
- package/lib/contexts/dataGridContext.js +2 -1
- package/lib/contexts/dataGridContext.js.map +1 -1
- package/lib/hooks/index.js +1 -0
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useTableCompositeNavigation.js +69 -0
- package/lib/hooks/useTableCompositeNavigation.js.map +1 -0
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/DataGrid/useDataGrid.js +10 -6
- package/lib-commonjs/components/DataGrid/useDataGrid.js.map +1 -1
- package/lib-commonjs/components/DataGrid/useDataGridContextValues.js +8 -6
- package/lib-commonjs/components/DataGrid/useDataGridContextValues.js.map +1 -1
- package/lib-commonjs/components/DataGridCell/useDataGridCell.js +3 -3
- package/lib-commonjs/components/DataGridCell/useDataGridCell.js.map +1 -1
- package/lib-commonjs/components/DataGridRow/useDataGridRow.js +6 -3
- package/lib-commonjs/components/DataGridRow/useDataGridRow.js.map +1 -1
- package/lib-commonjs/contexts/dataGridContext.js +2 -1
- package/lib-commonjs/contexts/dataGridContext.js.map +1 -1
- package/lib-commonjs/hooks/index.js +1 -0
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useTableCompositeNavigation.js +78 -0
- package/lib-commonjs/hooks/useTableCompositeNavigation.js.map +1 -0
- package/lib-commonjs/index.js +1 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,91 @@
|
|
|
2
2
|
"name": "@fluentui/react-table",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 11 Jul 2023 18:44:11 GMT",
|
|
6
|
+
"tag": "@fluentui/react-table_v9.6.0",
|
|
7
|
+
"version": "9.6.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"minor": [
|
|
10
|
+
{
|
|
11
|
+
"author": "lingfan.gao@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-table",
|
|
13
|
+
"commit": "5844766000909d73f83f23c99415b43d8b31a5b8",
|
|
14
|
+
"comment": "feat(DataGridCell): Implemets `cell` and `none` focusModes"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-table",
|
|
19
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.12",
|
|
20
|
+
"commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-table",
|
|
25
|
+
"comment": "Bump @fluentui/react-checkbox to v9.1.24",
|
|
26
|
+
"commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-table",
|
|
31
|
+
"comment": "Bump @fluentui/react-radio to v9.1.24",
|
|
32
|
+
"commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-table",
|
|
37
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.11",
|
|
38
|
+
"commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-table",
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0",
|
|
44
|
+
"commit": "f958e7e175264e289a6ecdc5b108e826f6b34e74"
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"date": "Mon, 03 Jul 2023 13:34:27 GMT",
|
|
51
|
+
"tag": "@fluentui/react-table_v9.5.0",
|
|
52
|
+
"version": "9.5.0",
|
|
53
|
+
"comments": {
|
|
54
|
+
"minor": [
|
|
55
|
+
{
|
|
56
|
+
"author": "lingfan.gao@microsoft.com",
|
|
57
|
+
"package": "@fluentui/react-table",
|
|
58
|
+
"commit": "d2c95969c67521ea1df57e1339f8743b09b68772",
|
|
59
|
+
"comment": "feat: Implement composite navigation for Table and DataGrid"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-table",
|
|
64
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.11",
|
|
65
|
+
"commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-table",
|
|
70
|
+
"comment": "Bump @fluentui/react-checkbox to v9.1.23",
|
|
71
|
+
"commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-table",
|
|
76
|
+
"comment": "Bump @fluentui/react-radio to v9.1.23",
|
|
77
|
+
"commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-table",
|
|
82
|
+
"comment": "Bump @fluentui/react-tabster to v9.10.0",
|
|
83
|
+
"commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
|
|
84
|
+
}
|
|
85
|
+
]
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"date": "Mon, 03 Jul 2023 11:57:14 GMT",
|
|
6
90
|
"tag": "@fluentui/react-table_v9.4.4",
|
|
7
91
|
"version": "9.4.4",
|
|
8
92
|
"comments": {
|
|
@@ -11,55 +95,55 @@
|
|
|
11
95
|
"author": "beachball",
|
|
12
96
|
"package": "@fluentui/react-table",
|
|
13
97
|
"comment": "Bump @fluentui/react-aria to v9.3.26",
|
|
14
|
-
"commit": "
|
|
98
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
15
99
|
},
|
|
16
100
|
{
|
|
17
101
|
"author": "beachball",
|
|
18
102
|
"package": "@fluentui/react-table",
|
|
19
103
|
"comment": "Bump @fluentui/react-avatar to v9.5.10",
|
|
20
|
-
"commit": "
|
|
104
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
21
105
|
},
|
|
22
106
|
{
|
|
23
107
|
"author": "beachball",
|
|
24
108
|
"package": "@fluentui/react-table",
|
|
25
109
|
"comment": "Bump @fluentui/react-checkbox to v9.1.22",
|
|
26
|
-
"commit": "
|
|
110
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
27
111
|
},
|
|
28
112
|
{
|
|
29
113
|
"author": "beachball",
|
|
30
114
|
"package": "@fluentui/react-table",
|
|
31
115
|
"comment": "Bump @fluentui/react-context-selector to v9.1.26",
|
|
32
|
-
"commit": "
|
|
116
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
33
117
|
},
|
|
34
118
|
{
|
|
35
119
|
"author": "beachball",
|
|
36
120
|
"package": "@fluentui/react-table",
|
|
37
121
|
"comment": "Bump @fluentui/react-radio to v9.1.22",
|
|
38
|
-
"commit": "
|
|
122
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
39
123
|
},
|
|
40
124
|
{
|
|
41
125
|
"author": "beachball",
|
|
42
126
|
"package": "@fluentui/react-table",
|
|
43
127
|
"comment": "Bump @fluentui/react-shared-contexts to v9.6.0",
|
|
44
|
-
"commit": "
|
|
128
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
45
129
|
},
|
|
46
130
|
{
|
|
47
131
|
"author": "beachball",
|
|
48
132
|
"package": "@fluentui/react-table",
|
|
49
133
|
"comment": "Bump @fluentui/react-tabster to v9.9.2",
|
|
50
|
-
"commit": "
|
|
134
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
51
135
|
},
|
|
52
136
|
{
|
|
53
137
|
"author": "beachball",
|
|
54
138
|
"package": "@fluentui/react-table",
|
|
55
139
|
"comment": "Bump @fluentui/react-utilities to v9.10.1",
|
|
56
|
-
"commit": "
|
|
140
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
57
141
|
},
|
|
58
142
|
{
|
|
59
143
|
"author": "beachball",
|
|
60
144
|
"package": "@fluentui/react-table",
|
|
61
145
|
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.10",
|
|
62
|
-
"commit": "
|
|
146
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
63
147
|
}
|
|
64
148
|
]
|
|
65
149
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,25 +1,52 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-table
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 11 Jul 2023 18:44:11 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.6.0)
|
|
8
|
+
|
|
9
|
+
Tue, 11 Jul 2023 18:44:11 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.5.0..@fluentui/react-table_v9.6.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat(DataGridCell): Implemets `cell` and `none` focusModes ([PR #28475](https://github.com/microsoft/fluentui/pull/28475) by lingfan.gao@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-avatar to v9.5.12 ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by beachball)
|
|
16
|
+
- Bump @fluentui/react-checkbox to v9.1.24 ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by beachball)
|
|
17
|
+
- Bump @fluentui/react-radio to v9.1.24 ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by beachball)
|
|
18
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.11 ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0 ([PR #28491](https://github.com/microsoft/fluentui/pull/28491) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.5.0)
|
|
22
|
+
|
|
23
|
+
Mon, 03 Jul 2023 13:34:27 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.4.4..@fluentui/react-table_v9.5.0)
|
|
25
|
+
|
|
26
|
+
### Minor changes
|
|
27
|
+
|
|
28
|
+
- feat: Implement composite navigation for Table and DataGrid ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by lingfan.gao@microsoft.com)
|
|
29
|
+
- Bump @fluentui/react-avatar to v9.5.11 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
|
|
30
|
+
- Bump @fluentui/react-checkbox to v9.1.23 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
|
|
31
|
+
- Bump @fluentui/react-radio to v9.1.23 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
|
|
32
|
+
- Bump @fluentui/react-tabster to v9.10.0 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
|
|
33
|
+
|
|
7
34
|
## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.4.4)
|
|
8
35
|
|
|
9
|
-
Mon, 03 Jul 2023 11:
|
|
36
|
+
Mon, 03 Jul 2023 11:57:14 GMT
|
|
10
37
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.4.3..@fluentui/react-table_v9.4.4)
|
|
11
38
|
|
|
12
39
|
### Patches
|
|
13
40
|
|
|
14
|
-
- Bump @fluentui/react-aria to v9.3.26 ([PR #
|
|
15
|
-
- Bump @fluentui/react-avatar to v9.5.10 ([PR #
|
|
16
|
-
- Bump @fluentui/react-checkbox to v9.1.22 ([PR #
|
|
17
|
-
- Bump @fluentui/react-context-selector to v9.1.26 ([PR #
|
|
18
|
-
- Bump @fluentui/react-radio to v9.1.22 ([PR #
|
|
19
|
-
- Bump @fluentui/react-shared-contexts to v9.6.0 ([PR #
|
|
20
|
-
- Bump @fluentui/react-tabster to v9.9.2 ([PR #
|
|
21
|
-
- Bump @fluentui/react-utilities to v9.10.1 ([PR #
|
|
22
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.10 ([PR #
|
|
41
|
+
- Bump @fluentui/react-aria to v9.3.26 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
42
|
+
- Bump @fluentui/react-avatar to v9.5.10 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
43
|
+
- Bump @fluentui/react-checkbox to v9.1.22 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
44
|
+
- Bump @fluentui/react-context-selector to v9.1.26 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
45
|
+
- Bump @fluentui/react-radio to v9.1.22 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
46
|
+
- Bump @fluentui/react-shared-contexts to v9.6.0 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
47
|
+
- Bump @fluentui/react-tabster to v9.9.2 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
48
|
+
- Bump @fluentui/react-utilities to v9.10.1 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
49
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.10 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
23
50
|
|
|
24
51
|
## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.4.3)
|
|
25
52
|
|
package/dist/index.d.ts
CHANGED
|
@@ -14,6 +14,7 @@ import { SelectionHookParams } from '@fluentui/react-utilities';
|
|
|
14
14
|
import { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
|
|
15
15
|
import type { Slot } from '@fluentui/react-utilities';
|
|
16
16
|
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
17
|
+
import { TabsterDOMAttribute } from '@fluentui/react-tabster';
|
|
17
18
|
|
|
18
19
|
export declare type CellRenderFunction<TItem = unknown> = (column: TableColumnDefinition<TItem>, dataGridContextValue: DataGridContextValue) => React_2.ReactNode;
|
|
19
20
|
|
|
@@ -84,6 +85,14 @@ export declare const DataGridCell: ForwardRefComponent<DataGridCellProps>;
|
|
|
84
85
|
|
|
85
86
|
export declare const dataGridCellClassNames: SlotClassNames<DataGridCellSlots>;
|
|
86
87
|
|
|
88
|
+
/**
|
|
89
|
+
* Used when there are nested focusble elements inside a focusable cell
|
|
90
|
+
* - `group`: Enter keypress moves focus inside the cell, focus is trapped inside the cell until Escape keypress
|
|
91
|
+
* - `cell`: The cell is focusable - if there are focusable elements in the cell use `group`
|
|
92
|
+
* - `none`: The cell is not focusable
|
|
93
|
+
*/
|
|
94
|
+
export declare type DataGridCellFocusMode = 'group' | 'none' | 'cell';
|
|
95
|
+
|
|
87
96
|
/**
|
|
88
97
|
* DataGridCell Props
|
|
89
98
|
*/
|
|
@@ -91,8 +100,11 @@ export declare type DataGridCellProps = TableCellProps & {
|
|
|
91
100
|
/**
|
|
92
101
|
* Used when there are nested focusble elements inside a focusable cell
|
|
93
102
|
* - `group`: Enter keypress moves focus inside the cell, focus is trapped inside the cell until Escape keypress
|
|
103
|
+
* - `cell`: The cell is focusable - if there are focusable elements in the cell use `group`
|
|
104
|
+
* - `none`: The cell is not focusable
|
|
105
|
+
* @default cell
|
|
94
106
|
*/
|
|
95
|
-
focusMode?:
|
|
107
|
+
focusMode?: DataGridCellFocusMode;
|
|
96
108
|
};
|
|
97
109
|
|
|
98
110
|
export declare type DataGridCellSlots = TableCellSlots;
|
|
@@ -129,13 +141,14 @@ export declare type DataGridContextValue = TableFeaturesState<any> & {
|
|
|
129
141
|
* Enables column resizing
|
|
130
142
|
*/
|
|
131
143
|
resizableColumns?: boolean;
|
|
144
|
+
compositeRowTabsterAttribute: TabsterDOMAttribute;
|
|
132
145
|
};
|
|
133
146
|
|
|
134
147
|
export declare type DataGridContextValues = TableContextValues & {
|
|
135
148
|
dataGrid: DataGridContextValue;
|
|
136
149
|
};
|
|
137
150
|
|
|
138
|
-
export declare type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';
|
|
151
|
+
export declare type DataGridFocusMode = 'none' | 'cell' | 'row_unstable' | 'composite';
|
|
139
152
|
|
|
140
153
|
/**
|
|
141
154
|
* DataGridHeader component
|
|
@@ -262,7 +275,7 @@ export declare type DataGridSlots = TableSlots;
|
|
|
262
275
|
*/
|
|
263
276
|
export declare type DataGridState = TableState & {
|
|
264
277
|
tableState: TableFeaturesState<unknown>;
|
|
265
|
-
} & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'>;
|
|
278
|
+
} & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns' | 'compositeRowTabsterAttribute'>;
|
|
266
279
|
|
|
267
280
|
declare type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;
|
|
268
281
|
|
|
@@ -1041,6 +1054,12 @@ declare type UseTableColumnSizingParams = {
|
|
|
1041
1054
|
containerWidthOffset?: number;
|
|
1042
1055
|
};
|
|
1043
1056
|
|
|
1057
|
+
export declare function useTableCompositeNavigation(): {
|
|
1058
|
+
onTableKeyDown: React_2.KeyboardEventHandler;
|
|
1059
|
+
tableTabsterAttribute: TabsterDOMAttribute;
|
|
1060
|
+
tableRowTabsterAttribute: TabsterDOMAttribute;
|
|
1061
|
+
};
|
|
1062
|
+
|
|
1044
1063
|
export declare const useTableContext: () => TableContextValue;
|
|
1045
1064
|
|
|
1046
1065
|
export declare function useTableFeatures<TItem>(options: UseTableFeaturesOptions<TItem>, plugins?: TableFeaturePlugin[]): TableFeaturesState<TItem>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DataGrid.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n SortState,\n TableFeaturesState,\n UseTableSortOptions,\n OnSelectionChangeData,\n TableColumnSizingOptions,\n TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\
|
|
1
|
+
{"version":3,"sources":["DataGrid.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { SelectionHookParams, SelectionMode } from '@fluentui/react-utilities';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n SortState,\n TableFeaturesState,\n UseTableSortOptions,\n OnSelectionChangeData,\n TableColumnSizingOptions,\n TableColumnId,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type DataGridFocusMode = 'none' | 'cell' | 'row_unstable' | 'composite';\n\nexport type DataGridContextValues = TableContextValues & {\n dataGrid: DataGridContextValue;\n};\n\n// Use any here since we can't know the user types\n// The user is responsible for narrowing the type downstream\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type DataGridContextValue = TableFeaturesState<any> & {\n /**\n * How focus navigation will work in the datagrid\n * @default cell\n */\n focusMode: DataGridFocusMode;\n\n /**\n * Lets child components know if rows selection is enabled\n * @see selectionMode prop enables row selection on the component\n */\n selectableRows: boolean;\n\n /**\n * Enables subtle selection style\n * @default false\n */\n subtleSelection: boolean;\n\n /**\n * Row appearance when selected\n * @default brand\n */\n selectionAppearance: TableRowProps['appearance'];\n\n /**\n * Enables column resizing\n */\n resizableColumns?: boolean;\n\n compositeRowTabsterAttribute: TabsterDOMAttribute;\n};\n\n/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance' | 'resizableColumns'> &\n Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n Pick<SelectionHookParams, 'defaultSelectedItems' | 'selectedItems'> & {\n onSortChange?: (e: React.MouseEvent, sortState: SortState) => void;\n onSelectionChange?: (e: React.MouseEvent | React.KeyboardEvent, data: OnSelectionChangeData) => void;\n /**\n * Enables row selection and sets the selection mode\n * @default false\n */\n selectionMode?: SelectionMode;\n /**\n * Options for column resizing\n */\n columnSizingOptions?: TableColumnSizingOptions;\n /**\n * A callback triggered when a column is resized.\n */\n onColumnResize?: (\n e: KeyboardEvent | TouchEvent | MouseEvent | undefined,\n data: { columnId: TableColumnId; width: number },\n ) => void;\n /**\n * For column resizing. Allows for a container size to be adjusted by a number of pixels, to make\n * sure the columns don't overflow the table.\n * By default, this value is calculated internally based on other props, but can be overriden.\n */\n containerWidthOffset?: number;\n };\n\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n DataGridContextValue,\n | 'focusMode'\n | 'selectableRows'\n | 'subtleSelection'\n | 'selectionAppearance'\n | 'getRowId'\n | 'resizableColumns'\n | 'compositeRowTabsterAttribute'\n >;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
|
|
3
3
|
import { useTable_unstable } from '../Table/useTable';
|
|
4
|
-
import { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable } from '../../hooks';
|
|
5
|
-
import { CELL_WIDTH } from '../TableSelectionCell';
|
|
6
4
|
import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
|
|
7
5
|
import { End, Home } from '@fluentui/keyboard-keys';
|
|
6
|
+
import { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable, useTableCompositeNavigation } from '../../hooks';
|
|
7
|
+
import { CELL_WIDTH } from '../TableSelectionCell';
|
|
8
8
|
/**
|
|
9
9
|
* Create the state required to render DataGrid.
|
|
10
10
|
*
|
|
@@ -16,10 +16,10 @@ import { End, Home } from '@fluentui/keyboard-keys';
|
|
|
16
16
|
*/ export const useDataGrid_unstable = (props, ref)=>{
|
|
17
17
|
const { items , columns , focusMode ='cell' , selectionMode , onSortChange , onSelectionChange , defaultSortState , sortState , selectedItems , defaultSelectedItems , subtleSelection =false , selectionAppearance ='brand' , getRowId , resizableColumns , columnSizingOptions , onColumnResize , containerWidthOffset } = props;
|
|
18
18
|
const widthOffset = containerWidthOffset !== null && containerWidthOffset !== void 0 ? containerWidthOffset : selectionMode ? -CELL_WIDTH : 0;
|
|
19
|
-
const
|
|
20
|
-
const keyboardNavAttr = useArrowNavigationGroup({
|
|
19
|
+
const gridTabsterAttribute = useArrowNavigationGroup({
|
|
21
20
|
axis: 'grid'
|
|
22
21
|
});
|
|
22
|
+
const { onTableKeyDown: onCompositeKeyDown , tableTabsterAttribute: compositeTabsterAttribute , tableRowTabsterAttribute: compositeRowTabsterAttribute } = useTableCompositeNavigation();
|
|
23
23
|
const tableState = useTableFeatures({
|
|
24
24
|
items,
|
|
25
25
|
columns,
|
|
@@ -49,6 +49,8 @@ import { End, Home } from '@fluentui/keyboard-keys';
|
|
|
49
49
|
const onKeyDown = useEventCallback((e)=>{
|
|
50
50
|
var _props_onKeyDown;
|
|
51
51
|
(_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, e);
|
|
52
|
+
focusMode === 'composite' && onCompositeKeyDown(e);
|
|
53
|
+
// handle ctrl+home and ctrl+end
|
|
52
54
|
if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {
|
|
53
55
|
return;
|
|
54
56
|
}
|
|
@@ -72,7 +74,8 @@ import { End, Home } from '@fluentui/keyboard-keys';
|
|
|
72
74
|
role: 'grid',
|
|
73
75
|
as: 'div',
|
|
74
76
|
noNativeElements: true,
|
|
75
|
-
...
|
|
77
|
+
...focusMode === 'cell' && gridTabsterAttribute,
|
|
78
|
+
...focusMode === 'composite' && compositeTabsterAttribute,
|
|
76
79
|
...props,
|
|
77
80
|
onKeyDown
|
|
78
81
|
}, useMergedRefs(ref, tableState.tableRef, innerRef));
|
|
@@ -83,6 +86,7 @@ import { End, Home } from '@fluentui/keyboard-keys';
|
|
|
83
86
|
selectableRows: !!selectionMode,
|
|
84
87
|
subtleSelection,
|
|
85
88
|
selectionAppearance,
|
|
86
|
-
resizableColumns
|
|
89
|
+
resizableColumns,
|
|
90
|
+
compositeRowTabsterAttribute
|
|
87
91
|
};
|
|
88
92
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport {
|
|
1
|
+
{"version":3,"sources":["useDataGrid.ts"],"sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\nimport {\n useTableFeatures,\n useTableSort,\n useTableSelection,\n useTableColumnSizing_unstable,\n useTableCompositeNavigation,\n} from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\n\n/**\n * Create the state required to render DataGrid.\n *\n * The returned state can be modified with hooks such as useDataGridStyles_unstable,\n * before being passed to renderDataGrid_unstable.\n *\n * @param props - props from this instance of DataGrid\n * @param ref - reference to root HTMLElement of DataGrid\n */\nexport const useDataGrid_unstable = (props: DataGridProps, ref: React.Ref<HTMLElement>): DataGridState => {\n const {\n items,\n columns,\n focusMode = 'cell',\n selectionMode,\n onSortChange,\n onSelectionChange,\n defaultSortState,\n sortState,\n selectedItems,\n defaultSelectedItems,\n subtleSelection = false,\n selectionAppearance = 'brand',\n getRowId,\n resizableColumns,\n columnSizingOptions,\n onColumnResize,\n containerWidthOffset,\n } = props;\n\n const widthOffset = containerWidthOffset ?? (selectionMode ? -CELL_WIDTH : 0);\n\n const gridTabsterAttribute = useArrowNavigationGroup({\n axis: 'grid',\n });\n\n const {\n onTableKeyDown: onCompositeKeyDown,\n tableTabsterAttribute: compositeTabsterAttribute,\n tableRowTabsterAttribute: compositeRowTabsterAttribute,\n } = useTableCompositeNavigation();\n\n const tableState = useTableFeatures({ items, columns, getRowId }, [\n useTableSort({\n defaultSortState,\n sortState,\n onSortChange,\n }),\n useTableSelection({\n defaultSelectedItems,\n selectedItems,\n onSelectionChange,\n selectionMode: selectionMode ?? 'multiselect',\n }),\n useTableColumnSizing_unstable({\n onColumnResize,\n columnSizingOptions,\n // The selection cell is not part of the columns, therefore its width needs to be subtracted\n // from the container to make sure the columns don't overflow the table.\n containerWidthOffset: widthOffset,\n }),\n ]);\n\n const innerRef = React.useRef<HTMLDivElement>(null);\n const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableElement>) => {\n props.onKeyDown?.(e);\n focusMode === 'composite' && onCompositeKeyDown(e);\n\n // handle ctrl+home and ctrl+end\n if (!innerRef.current || !e.ctrlKey || e.defaultPrevented) {\n return;\n }\n\n if (e.key === Home) {\n const firstRow = innerRef.current.querySelector('[role=\"row\"]') as HTMLElement | null;\n if (firstRow) {\n findFirstFocusable(firstRow)?.focus();\n }\n }\n\n if (e.key === End) {\n const rows = innerRef.current.querySelectorAll('[role=\"row\"]');\n if (rows.length) {\n const lastRow = rows.item(rows.length - 1);\n findLastFocusable(lastRow as HTMLElement)?.focus();\n }\n }\n });\n\n const baseTableState = useTable_unstable(\n {\n role: 'grid',\n as: 'div',\n noNativeElements: true,\n ...(focusMode === 'cell' && gridTabsterAttribute),\n ...(focusMode === 'composite' && compositeTabsterAttribute),\n ...props,\n onKeyDown,\n },\n useMergedRefs(ref, tableState.tableRef, innerRef),\n );\n\n return {\n ...baseTableState,\n focusMode,\n tableState,\n selectableRows: !!selectionMode,\n subtleSelection,\n selectionAppearance,\n resizableColumns,\n compositeRowTabsterAttribute,\n };\n};\n"],"names":["React","useArrowNavigationGroup","useFocusFinders","useTable_unstable","useEventCallback","useMergedRefs","End","Home","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","useTableCompositeNavigation","CELL_WIDTH","useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","containerWidthOffset","widthOffset","gridTabsterAttribute","axis","onTableKeyDown","onCompositeKeyDown","tableTabsterAttribute","compositeTabsterAttribute","tableRowTabsterAttribute","compositeRowTabsterAttribute","tableState","innerRef","useRef","findFirstFocusable","findLastFocusable","onKeyDown","e","current","ctrlKey","defaultPrevented","key","firstRow","querySelector","focus","rows","querySelectorAll","length","lastRow","item","baseTableState","role","as","noNativeElements","tableRef","selectableRows"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,eAAe,QAAQ,0BAA0B;AAEnF,SAASC,iBAAiB,QAAQ,oBAAoB;AACtD,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5E,SAASC,GAAG,EAAEC,IAAI,QAAQ,0BAA0B;AACpD,SACEC,gBAAgB,EAChBC,YAAY,EACZC,iBAAiB,EACjBC,6BAA6B,EAC7BC,2BAA2B,QACtB,cAAc;AACrB,SAASC,UAAU,QAAQ,wBAAwB;AAEnD;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC,MAA+C;IACxG,MAAM,EACJC,MAAK,EACLC,QAAO,EACPC,WAAY,OAAM,EAClBC,cAAa,EACbC,aAAY,EACZC,kBAAiB,EACjBC,iBAAgB,EAChBC,UAAS,EACTC,cAAa,EACbC,qBAAoB,EACpBC,iBAAkB,KAAK,CAAA,EACvBC,qBAAsB,QAAO,EAC7BC,SAAQ,EACRC,iBAAgB,EAChBC,oBAAmB,EACnBC,eAAc,EACdC,qBAAoB,EACrB,GAAGlB;IAEJ,MAAMmB,cAAcD,iCAAAA,kCAAAA,uBAAyBb,gBAAgB,CAACP,aAAa,CAAC,AAAC;IAE7E,MAAMsB,uBAAuBlC,wBAAwB;QACnDmC,MAAM;IACR;IAEA,MAAM,EACJC,gBAAgBC,mBAAkB,EAClCC,uBAAuBC,0BAAyB,EAChDC,0BAA0BC,6BAA4B,EACvD,GAAG9B;IAEJ,MAAM+B,aAAanC,iBAAiB;QAAES;QAAOC;QAASW;IAAS,GAAG;QAChEpB,aAAa;YACXc;YACAC;YACAH;QACF;QACAX,kBAAkB;YAChBgB;YACAD;YACAH;YACAF,eAAeA,0BAAAA,2BAAAA,gBAAiB,aAAa;QAC/C;QACAT,8BAA8B;YAC5BqB;YACAD;YACA,4FAA4F;YAC5F,wEAAwE;YACxEE,sBAAsBC;QACxB;KACD;IAED,MAAMU,WAAW5C,MAAM6C,MAAM,CAAiB,IAAI;IAClD,MAAM,EAAEC,mBAAkB,EAAEC,kBAAiB,EAAE,GAAG7C;IAClD,MAAM8C,YAAY5C,iBAAiB,CAAC6C,IAA6C;YAC/ElC;QAAAA,CAAAA,mBAAAA,MAAMiC,SAAS,cAAfjC,8BAAAA,KAAAA,IAAAA,iBAAAA,KAAAA,OAAkBkC;QAClB9B,cAAc,eAAemB,mBAAmBW;QAEhD,gCAAgC;QAChC,IAAI,CAACL,SAASM,OAAO,IAAI,CAACD,EAAEE,OAAO,IAAIF,EAAEG,gBAAgB,EAAE;YACzD;QACF,CAAC;QAED,IAAIH,EAAEI,GAAG,KAAK9C,MAAM;YAClB,MAAM+C,WAAWV,SAASM,OAAO,CAACK,aAAa,CAAC;YAChD,IAAID,UAAU;oBACZR;gBAAAA,CAAAA,sBAAAA,mBAAmBQ,uBAAnBR,iCAAAA,KAAAA,IAAAA,oBAA8BU;YAChC,CAAC;QACH,CAAC;QAED,IAAIP,EAAEI,GAAG,KAAK/C,KAAK;YACjB,MAAMmD,OAAOb,SAASM,OAAO,CAACQ,gBAAgB,CAAC;YAC/C,IAAID,KAAKE,MAAM,EAAE;oBAEfZ;gBADA,MAAMa,UAAUH,KAAKI,IAAI,CAACJ,KAAKE,MAAM,GAAG;gBACxCZ,CAAAA,qBAAAA,kBAAkBa,sBAAlBb,gCAAAA,KAAAA,IAAAA,mBAA2CS;YAC7C,CAAC;QACH,CAAC;IACH;IAEA,MAAMM,iBAAiB3D,kBACrB;QACE4D,MAAM;QACNC,IAAI;QACJC,kBAAkB,IAAI;QACtB,GAAI9C,cAAc,UAAUgB,oBAAoB;QAChD,GAAIhB,cAAc,eAAeqB,yBAAyB;QAC1D,GAAGzB,KAAK;QACRiC;IACF,GACA3C,cAAcW,KAAK2B,WAAWuB,QAAQ,EAAEtB;IAG1C,OAAO;QACL,GAAGkB,cAAc;QACjB3C;QACAwB;QACAwB,gBAAgB,CAAC,CAAC/C;QAClBO;QACAC;QACAE;QACAY;IACF;AACF,EAAE"}
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { useTableContextValues_unstable } from '../Table/useTableContextValues';
|
|
2
2
|
export function useDataGridContextValues_unstable(state) {
|
|
3
3
|
const tableContextValues = useTableContextValues_unstable(state);
|
|
4
|
+
const { tableState , focusMode , selectableRows , subtleSelection , selectionAppearance , resizableColumns , compositeRowTabsterAttribute } = state;
|
|
4
5
|
return {
|
|
5
6
|
...tableContextValues,
|
|
6
7
|
dataGrid: {
|
|
7
|
-
...
|
|
8
|
-
focusMode
|
|
9
|
-
selectableRows
|
|
10
|
-
subtleSelection
|
|
11
|
-
selectionAppearance
|
|
12
|
-
resizableColumns
|
|
8
|
+
...tableState,
|
|
9
|
+
focusMode,
|
|
10
|
+
selectableRows,
|
|
11
|
+
subtleSelection,
|
|
12
|
+
selectionAppearance,
|
|
13
|
+
resizableColumns,
|
|
14
|
+
compositeRowTabsterAttribute
|
|
13
15
|
}
|
|
14
16
|
};
|
|
15
17
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDataGridContextValues.ts"],"sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n const tableContextValues = useTableContextValues_unstable(state);\n return {\n ...tableContextValues,\n dataGrid: {\n ...
|
|
1
|
+
{"version":3,"sources":["useDataGridContextValues.ts"],"sourcesContent":["import { useTableContextValues_unstable } from '../Table/useTableContextValues';\nimport { DataGridContextValues, DataGridState } from './DataGrid.types';\n\nexport function useDataGridContextValues_unstable(state: DataGridState): DataGridContextValues {\n const tableContextValues = useTableContextValues_unstable(state);\n const {\n tableState,\n focusMode,\n selectableRows,\n subtleSelection,\n selectionAppearance,\n resizableColumns,\n compositeRowTabsterAttribute,\n } = state;\n return {\n ...tableContextValues,\n dataGrid: {\n ...tableState,\n focusMode,\n selectableRows,\n subtleSelection,\n selectionAppearance,\n resizableColumns,\n compositeRowTabsterAttribute,\n },\n };\n}\n"],"names":["useTableContextValues_unstable","useDataGridContextValues_unstable","state","tableContextValues","tableState","focusMode","selectableRows","subtleSelection","selectionAppearance","resizableColumns","compositeRowTabsterAttribute","dataGrid"],"mappings":"AAAA,SAASA,8BAA8B,QAAQ,iCAAiC;AAGhF,OAAO,SAASC,kCAAkCC,KAAoB,EAAyB;IAC7F,MAAMC,qBAAqBH,+BAA+BE;IAC1D,MAAM,EACJE,WAAU,EACVC,UAAS,EACTC,eAAc,EACdC,gBAAe,EACfC,oBAAmB,EACnBC,iBAAgB,EAChBC,6BAA4B,EAC7B,GAAGR;IACJ,OAAO;QACL,GAAGC,kBAAkB;QACrBQ,UAAU;YACR,GAAGP,UAAU;YACbC;YACAC;YACAC;YACAC;YACAC;YACAC;QACF;IACF;AACF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DataGridCell.types.ts"],"sourcesContent":["import { TableCellProps, TableCellSlots, TableCellState } from '../TableCell/TableCell.types';\n\nexport type DataGridCellSlots = TableCellSlots;\n\n/**\n * DataGridCell Props\n */\nexport type DataGridCellProps = TableCellProps & {\n /**\n * Used when there are nested focusble elements inside a focusable cell\n * - `group`: Enter keypress moves focus inside the cell, focus is trapped inside the cell until Escape keypress\n */\n focusMode?:
|
|
1
|
+
{"version":3,"sources":["DataGridCell.types.ts"],"sourcesContent":["import { TableCellProps, TableCellSlots, TableCellState } from '../TableCell/TableCell.types';\n\nexport type DataGridCellSlots = TableCellSlots;\n\n/**\n * Used when there are nested focusble elements inside a focusable cell\n * - `group`: Enter keypress moves focus inside the cell, focus is trapped inside the cell until Escape keypress\n * - `cell`: The cell is focusable - if there are focusable elements in the cell use `group`\n * - `none`: The cell is not focusable\n */\nexport type DataGridCellFocusMode = 'group' | 'none' | 'cell';\n\n/**\n * DataGridCell Props\n */\nexport type DataGridCellProps = TableCellProps & {\n /**\n * Used when there are nested focusble elements inside a focusable cell\n * - `group`: Enter keypress moves focus inside the cell, focus is trapped inside the cell until Escape keypress\n * - `cell`: The cell is focusable - if there are focusable elements in the cell use `group`\n * - `none`: The cell is not focusable\n * @default cell\n */\n focusMode?: DataGridCellFocusMode;\n};\n\n/**\n * State used in rendering DataGridCell\n */\nexport type DataGridCellState = TableCellState;\n"],"names":[],"mappings":"AAAA,WA6B+C"}
|
|
@@ -12,9 +12,9 @@ import { useColumnIdContext } from '../../contexts/columnIdContext';
|
|
|
12
12
|
* @param props - props from this instance of DataGridCell
|
|
13
13
|
* @param ref - reference to root HTMLElement of DataGridCell
|
|
14
14
|
*/ export const useDataGridCell_unstable = (props, ref)=>{
|
|
15
|
-
const { focusMode } = props;
|
|
15
|
+
const { focusMode ='cell' } = props;
|
|
16
16
|
const columnId = useColumnIdContext();
|
|
17
|
-
const tabbable = useDataGridContext_unstable((ctx)=>ctx.focusMode === 'cell');
|
|
17
|
+
const tabbable = useDataGridContext_unstable((ctx)=>(ctx.focusMode === 'cell' || ctx.focusMode === 'composite') && focusMode !== 'none');
|
|
18
18
|
const resizableColumns = useDataGridContext_unstable((ctx)=>ctx.resizableColumns);
|
|
19
19
|
const columnSizing = useDataGridContext_unstable((ctx)=>ctx.columnSizing_unstable);
|
|
20
20
|
const focusableGroupAttr = useFocusableGroup({
|
|
@@ -23,7 +23,7 @@ import { useColumnIdContext } from '../../contexts/columnIdContext';
|
|
|
23
23
|
return useTableCell_unstable({
|
|
24
24
|
as: 'div',
|
|
25
25
|
role: 'gridcell',
|
|
26
|
-
...focusMode && focusableGroupAttr,
|
|
26
|
+
...focusMode === 'group' && focusableGroupAttr,
|
|
27
27
|
tabIndex: tabbable ? 0 : undefined,
|
|
28
28
|
...resizableColumns ? columnSizing.getTableCellProps(columnId) : {},
|
|
29
29
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n const { focusMode } = props;\n const columnId = useColumnIdContext();\n const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');\n const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);\n const focusableGroupAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n return useTableCell_unstable(\n {\n as: 'div',\n role: 'gridcell',\n ...(focusMode && focusableGroupAttr),\n tabIndex: tabbable ? 0 : undefined,\n ...(resizableColumns ? columnSizing.getTableCellProps(columnId) : {}),\n ...props,\n },\n ref,\n );\n};\n"],"names":["React","useFocusableGroup","useTableCell_unstable","useDataGridContext_unstable","useColumnIdContext","useDataGridCell_unstable","props","ref","focusMode","columnId","tabbable","ctx","resizableColumns","columnSizing","columnSizing_unstable","focusableGroupAttr","tabBehavior","as","role","tabIndex","undefined","getTableCellProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,MAAM,EAAEC,
|
|
1
|
+
{"version":3,"sources":["useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n const { focusMode = 'cell' } = props;\n const columnId = useColumnIdContext();\n const tabbable = useDataGridContext_unstable(\n ctx => (ctx.focusMode === 'cell' || ctx.focusMode === 'composite') && focusMode !== 'none',\n );\n const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n const columnSizing = useDataGridContext_unstable(ctx => ctx.columnSizing_unstable);\n const focusableGroupAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n return useTableCell_unstable(\n {\n as: 'div',\n role: 'gridcell',\n ...(focusMode === 'group' && focusableGroupAttr),\n tabIndex: tabbable ? 0 : undefined,\n ...(resizableColumns ? columnSizing.getTableCellProps(columnId) : {}),\n ...props,\n },\n ref,\n );\n};\n"],"names":["React","useFocusableGroup","useTableCell_unstable","useDataGridContext_unstable","useColumnIdContext","useDataGridCell_unstable","props","ref","focusMode","columnId","tabbable","ctx","resizableColumns","columnSizing","columnSizing_unstable","focusableGroupAttr","tabBehavior","as","role","tabIndex","undefined","getTableCellProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,MAAM,EAAEC,WAAY,OAAM,EAAE,GAAGF;IAC/B,MAAMG,WAAWL;IACjB,MAAMM,WAAWP,4BACfQ,CAAAA,MAAO,AAACA,CAAAA,IAAIH,SAAS,KAAK,UAAUG,IAAIH,SAAS,KAAK,WAAU,KAAMA,cAAc;IAEtF,MAAMI,mBAAmBT,4BAA4BQ,CAAAA,MAAOA,IAAIC,gBAAgB;IAChF,MAAMC,eAAeV,4BAA4BQ,CAAAA,MAAOA,IAAIG,qBAAqB;IACjF,MAAMC,qBAAqBd,kBAAkB;QAAEe,aAAa;IAAqB;IACjF,OAAOd,sBACL;QACEe,IAAI;QACJC,MAAM;QACN,GAAIV,cAAc,WAAWO,kBAAkB;QAC/CI,UAAUT,WAAW,IAAIU,SAAS;QAClC,GAAIR,mBAAmBC,aAAaQ,iBAAiB,CAACZ,YAAY,CAAC,CAAC;QACpE,GAAGH,KAAK;IACV,GACAC;AAEJ,EAAE"}
|
|
@@ -20,7 +20,9 @@ import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
|
|
|
20
20
|
const columnDefs = useDataGridContext_unstable((ctx)=>ctx.columns);
|
|
21
21
|
const selectable = useDataGridContext_unstable((ctx)=>ctx.selectableRows);
|
|
22
22
|
const selected = useDataGridContext_unstable((ctx)=>ctx.selection.isRowSelected(rowId));
|
|
23
|
-
const
|
|
23
|
+
const focusMode = useDataGridContext_unstable((ctx)=>ctx.focusMode);
|
|
24
|
+
const compositeRowTabsterAttribute = useDataGridContext_unstable((ctx)=>ctx.compositeRowTabsterAttribute);
|
|
25
|
+
const tabbable = focusMode === 'row_unstable' || focusMode === 'composite';
|
|
24
26
|
const appearance = useDataGridContext_unstable((ctx)=>{
|
|
25
27
|
if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {
|
|
26
28
|
return ctx.selectionAppearance;
|
|
@@ -48,12 +50,13 @@ import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
|
|
|
48
50
|
const baseState = useTableRow_unstable({
|
|
49
51
|
appearance,
|
|
50
52
|
'aria-selected': selectable ? selected : undefined,
|
|
53
|
+
tabIndex: tabbable && !isHeader ? 0 : undefined,
|
|
54
|
+
...focusMode === 'composite' && !isHeader && compositeRowTabsterAttribute,
|
|
51
55
|
...props,
|
|
52
56
|
onClick,
|
|
53
57
|
onKeyDown,
|
|
54
58
|
children: null,
|
|
55
|
-
as: 'div'
|
|
56
|
-
tabIndex: tabbable && !isHeader ? 0 : undefined
|
|
59
|
+
as: 'div'
|
|
57
60
|
}, ref);
|
|
58
61
|
return {
|
|
59
62
|
...baseState,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, resolveShorthand } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n const rowId = useTableRowIdContext();\n const isHeader = useIsInTableHeader();\n const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n const
|
|
1
|
+
{"version":3,"sources":["useDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, resolveShorthand } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n const rowId = useTableRowIdContext();\n const isHeader = useIsInTableHeader();\n const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n const focusMode = useDataGridContext_unstable(ctx => ctx.focusMode);\n const compositeRowTabsterAttribute = useDataGridContext_unstable(ctx => ctx.compositeRowTabsterAttribute);\n const tabbable = focusMode === 'row_unstable' || focusMode === 'composite';\n const appearance = useDataGridContext_unstable(ctx => {\n if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n return ctx.selectionAppearance;\n }\n\n return 'none';\n });\n const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n const dataGridContextValue = useDataGridContext_unstable(ctx => ctx);\n\n const onClick = useEventCallback((e: React.MouseEvent<HTMLTableRowElement>) => {\n if (selectable && !isHeader) {\n toggleRow(e, rowId);\n }\n\n props.onClick?.(e);\n });\n\n const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableRowElement>) => {\n if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target as HTMLElement)) {\n // stop scrolling\n e.preventDefault();\n toggleRow(e, rowId);\n }\n\n props.onKeyDown?.(e);\n });\n\n const baseState = useTableRow_unstable(\n {\n appearance,\n 'aria-selected': selectable ? selected : undefined,\n tabIndex: tabbable && !isHeader ? 0 : undefined,\n ...(focusMode === 'composite' && !isHeader && compositeRowTabsterAttribute),\n ...props,\n onClick,\n onKeyDown,\n children: null,\n as: 'div',\n },\n ref,\n );\n\n return {\n ...baseState,\n components: {\n ...baseState.components,\n selectionCell: DataGridSelectionCell,\n },\n selectionCell: resolveShorthand(props.selectionCell, { required: selectable }),\n renderCell: props.children,\n columnDefs,\n dataGridContextValue,\n };\n};\n"],"names":["React","isInteractiveHTMLElement","useEventCallback","resolveShorthand","Space","useTableRow_unstable","useDataGridContext_unstable","DataGridSelectionCell","useTableRowIdContext","useIsInTableHeader","useDataGridRow_unstable","props","ref","rowId","isHeader","columnDefs","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","focusMode","compositeRowTabsterAttribute","tabbable","appearance","selectionAppearance","toggleRow","dataGridContextValue","onClick","e","onKeyDown","key","target","preventDefault","baseState","undefined","tabIndex","children","as","components","selectionCell","required","renderCell"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACzG,SAASC,KAAK,QAAQ,0BAA0B;AAEhD,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,qBAAqB,QAAQ,iDAAiD;AACvF,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE,SAASC,kBAAkB,QAAQ,oCAAoC;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,MAAMC,QAAQL;IACd,MAAMM,WAAWL;IACjB,MAAMM,aAAaT,4BAA4BU,CAAAA,MAAOA,IAAIC,OAAO;IACjE,MAAMC,aAAaZ,4BAA4BU,CAAAA,MAAOA,IAAIG,cAAc;IACxE,MAAMC,WAAWd,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACC,aAAa,CAACT;IAChF,MAAMU,YAAYjB,4BAA4BU,CAAAA,MAAOA,IAAIO,SAAS;IAClE,MAAMC,+BAA+BlB,4BAA4BU,CAAAA,MAAOA,IAAIQ,4BAA4B;IACxG,MAAMC,WAAWF,cAAc,kBAAkBA,cAAc;IAC/D,MAAMG,aAAapB,4BAA4BU,CAAAA,MAAO;QACpD,IAAI,CAACF,YAAYI,cAAcF,IAAIK,SAAS,CAACC,aAAa,CAACT,QAAQ;YACjE,OAAOG,IAAIW,mBAAmB;QAChC,CAAC;QAED,OAAO;IACT;IACA,MAAMC,YAAYtB,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACO,SAAS;IAC5E,MAAMC,uBAAuBvB,4BAA4BU,CAAAA,MAAOA;IAEhE,MAAMc,UAAU5B,iBAAiB,CAAC6B,IAA6C;YAK7EpB;QAJA,IAAIO,cAAc,CAACJ,UAAU;YAC3Bc,UAAUG,GAAGlB;QACf,CAAC;QAEDF,CAAAA,iBAAAA,MAAMmB,OAAO,cAAbnB,4BAAAA,KAAAA,IAAAA,eAAAA,KAAAA,OAAgBoB;IAClB;IAEA,MAAMC,YAAY9B,iBAAiB,CAAC6B,IAAgD;YAOlFpB;QANA,IAAIO,cAAc,CAACJ,YAAYiB,EAAEE,GAAG,KAAK7B,SAAS,CAACH,yBAAyB8B,EAAEG,MAAM,GAAkB;YACpG,iBAAiB;YACjBH,EAAEI,cAAc;YAChBP,UAAUG,GAAGlB;QACf,CAAC;QAEDF,CAAAA,mBAAAA,MAAMqB,SAAS,cAAfrB,8BAAAA,KAAAA,IAAAA,iBAAAA,KAAAA,OAAkBoB;IACpB;IAEA,MAAMK,YAAY/B,qBAChB;QACEqB;QACA,iBAAiBR,aAAaE,WAAWiB,SAAS;QAClDC,UAAUb,YAAY,CAACX,WAAW,IAAIuB,SAAS;QAC/C,GAAId,cAAc,eAAe,CAACT,YAAYU,4BAA4B;QAC1E,GAAGb,KAAK;QACRmB;QACAE;QACAO,UAAU,IAAI;QACdC,IAAI;IACN,GACA5B;IAGF,OAAO;QACL,GAAGwB,SAAS;QACZK,YAAY;YACV,GAAGL,UAAUK,UAAU;YACvBC,eAAenC;QACjB;QACAmC,eAAevC,iBAAiBQ,MAAM+B,aAAa,EAAE;YAAEC,UAAUzB;QAAW;QAC5E0B,YAAYjC,MAAM4B,QAAQ;QAC1BxB;QACAc;IACF;AACF,EAAE"}
|
|
@@ -6,7 +6,8 @@ const dataGridContextDefaultValue = {
|
|
|
6
6
|
subtleSelection: false,
|
|
7
7
|
selectableRows: false,
|
|
8
8
|
selectionAppearance: 'brand',
|
|
9
|
-
focusMode: 'none'
|
|
9
|
+
focusMode: 'none',
|
|
10
|
+
compositeRowTabsterAttribute: {}
|
|
10
11
|
};
|
|
11
12
|
export const DataGridContextProvider = dataGridContext.Provider;
|
|
12
13
|
export const useDataGridContext_unstable = (selector)=>useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue)=>selector(ctx));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["dataGridContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\nconst dataGridContextDefaultValue: DataGridContextValue = {\n ...defaultTableState,\n subtleSelection: false,\n selectableRows: false,\n selectionAppearance: 'brand',\n focusMode: 'none',\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>) =>\n useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","defaultTableState","dataGridContext","undefined","dataGridContextDefaultValue","subtleSelection","selectableRows","selectionAppearance","focusMode","DataGridContextProvider","Provider","useDataGridContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;
|
|
1
|
+
{"version":3,"sources":["dataGridContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\nconst dataGridContextDefaultValue: DataGridContextValue = {\n ...defaultTableState,\n subtleSelection: false,\n selectableRows: false,\n selectionAppearance: 'brand',\n focusMode: 'none',\n compositeRowTabsterAttribute: {} as TabsterDOMAttribute,\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>) =>\n useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","defaultTableState","dataGridContext","undefined","dataGridContextDefaultValue","subtleSelection","selectableRows","selectionAppearance","focusMode","compositeRowTabsterAttribute","DataGridContextProvider","Provider","useDataGridContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,SAASC,iBAAiB,QAAQ,WAAW;AAE7C,MAAMC,kBAAkBH,cAAgDI;AAExE,MAAMC,8BAAoD;IACxD,GAAGH,iBAAiB;IACpBI,iBAAiB,KAAK;IACtBC,gBAAgB,KAAK;IACrBC,qBAAqB;IACrBC,WAAW;IACXC,8BAA8B,CAAC;AACjC;AAEA,OAAO,MAAMC,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B,CAAIC,WAC7Cb,mBAAmBE,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}
|
package/lib/hooks/index.js
CHANGED
package/lib/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\nexport * from './useTableColumnSizing';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,qBAAqB;AACnC,cAAc,iBAAiB;AAC/B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,yBAAyB"}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './types';\nexport * from './useTableFeatures';\nexport * from './useTableSort';\nexport * from './useTableSelection';\nexport * from './createColumn';\nexport * from './useTableColumnSizing';\nexport * from './useTableCompositeNavigation';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,qBAAqB;AACnC,cAAc,iBAAiB;AAC/B,cAAc,sBAAsB;AACpC,cAAc,iBAAiB;AAC/B,cAAc,yBAAyB;AACvC,cAAc,gCAAgC"}
|