@fluentui/react-table 9.4.3 → 9.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.json +103 -1
- package/CHANGELOG.md +32 -2
- package/dist/index.d.ts +10 -2
- 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/useDataGridCell.js +1 -1
- 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/components/TableRow/useTableRowStyles.styles.js +10 -10
- 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 +1 -1
- 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/components/TableRow/useTableRowStyles.styles.js +10 -10
- package/lib-commonjs/components/TableRow/useTableRowStyles.styles.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 +10 -10
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,109 @@
|
|
|
2
2
|
"name": "@fluentui/react-table",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 03 Jul 2023 13:32:38 GMT",
|
|
6
|
+
"tag": "@fluentui/react-table_v9.5.0",
|
|
7
|
+
"version": "9.5.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"minor": [
|
|
10
|
+
{
|
|
11
|
+
"author": "lingfan.gao@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-table",
|
|
13
|
+
"commit": "d2c95969c67521ea1df57e1339f8743b09b68772",
|
|
14
|
+
"comment": "feat: Implement composite navigation for Table and DataGrid"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-table",
|
|
19
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.11",
|
|
20
|
+
"commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-table",
|
|
25
|
+
"comment": "Bump @fluentui/react-checkbox to v9.1.23",
|
|
26
|
+
"commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-table",
|
|
31
|
+
"comment": "Bump @fluentui/react-radio to v9.1.23",
|
|
32
|
+
"commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-table",
|
|
37
|
+
"comment": "Bump @fluentui/react-tabster to v9.10.0",
|
|
38
|
+
"commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
|
|
39
|
+
}
|
|
40
|
+
]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"date": "Mon, 03 Jul 2023 11:57:14 GMT",
|
|
45
|
+
"tag": "@fluentui/react-table_v9.4.4",
|
|
46
|
+
"version": "9.4.4",
|
|
47
|
+
"comments": {
|
|
48
|
+
"patch": [
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-table",
|
|
52
|
+
"comment": "Bump @fluentui/react-aria to v9.3.26",
|
|
53
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-table",
|
|
58
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.10",
|
|
59
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-table",
|
|
64
|
+
"comment": "Bump @fluentui/react-checkbox to v9.1.22",
|
|
65
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-table",
|
|
70
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.26",
|
|
71
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-table",
|
|
76
|
+
"comment": "Bump @fluentui/react-radio to v9.1.22",
|
|
77
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "beachball",
|
|
81
|
+
"package": "@fluentui/react-table",
|
|
82
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.6.0",
|
|
83
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
"author": "beachball",
|
|
87
|
+
"package": "@fluentui/react-table",
|
|
88
|
+
"comment": "Bump @fluentui/react-tabster to v9.9.2",
|
|
89
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-table",
|
|
94
|
+
"comment": "Bump @fluentui/react-utilities to v9.10.1",
|
|
95
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-table",
|
|
100
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.10",
|
|
101
|
+
"commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"date": "Wed, 28 Jun 2023 11:12:32 GMT",
|
|
6
108
|
"tag": "@fluentui/react-table_v9.4.3",
|
|
7
109
|
"version": "9.4.3",
|
|
8
110
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,42 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-table
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 03 Jul 2023 13:32:38 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.5.0)
|
|
8
|
+
|
|
9
|
+
Mon, 03 Jul 2023 13:32:38 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.4.4..@fluentui/react-table_v9.5.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: Implement composite navigation for Table and DataGrid ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by lingfan.gao@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-avatar to v9.5.11 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
|
|
16
|
+
- Bump @fluentui/react-checkbox to v9.1.23 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
|
|
17
|
+
- Bump @fluentui/react-radio to v9.1.23 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.10.0 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.4.4)
|
|
21
|
+
|
|
22
|
+
Mon, 03 Jul 2023 11:57:14 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.4.3..@fluentui/react-table_v9.4.4)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- Bump @fluentui/react-aria to v9.3.26 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
28
|
+
- Bump @fluentui/react-avatar to v9.5.10 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
29
|
+
- Bump @fluentui/react-checkbox to v9.1.22 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
30
|
+
- Bump @fluentui/react-context-selector to v9.1.26 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
31
|
+
- Bump @fluentui/react-radio to v9.1.22 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
32
|
+
- Bump @fluentui/react-shared-contexts to v9.6.0 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
33
|
+
- Bump @fluentui/react-tabster to v9.9.2 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
34
|
+
- Bump @fluentui/react-utilities to v9.10.1 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
35
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.10 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
|
|
36
|
+
|
|
7
37
|
## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.4.3)
|
|
8
38
|
|
|
9
|
-
Wed, 28 Jun 2023 11:
|
|
39
|
+
Wed, 28 Jun 2023 11:12:32 GMT
|
|
10
40
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.4.2..@fluentui/react-table_v9.4.3)
|
|
11
41
|
|
|
12
42
|
### Patches
|
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
|
|
|
@@ -129,13 +130,14 @@ export declare type DataGridContextValue = TableFeaturesState<any> & {
|
|
|
129
130
|
* Enables column resizing
|
|
130
131
|
*/
|
|
131
132
|
resizableColumns?: boolean;
|
|
133
|
+
compositeRowTabsterAttribute: TabsterDOMAttribute;
|
|
132
134
|
};
|
|
133
135
|
|
|
134
136
|
export declare type DataGridContextValues = TableContextValues & {
|
|
135
137
|
dataGrid: DataGridContextValue;
|
|
136
138
|
};
|
|
137
139
|
|
|
138
|
-
export declare type DataGridFocusMode = 'none' | 'cell' | 'row_unstable';
|
|
140
|
+
export declare type DataGridFocusMode = 'none' | 'cell' | 'row_unstable' | 'composite';
|
|
139
141
|
|
|
140
142
|
/**
|
|
141
143
|
* DataGridHeader component
|
|
@@ -262,7 +264,7 @@ export declare type DataGridSlots = TableSlots;
|
|
|
262
264
|
*/
|
|
263
265
|
export declare type DataGridState = TableState & {
|
|
264
266
|
tableState: TableFeaturesState<unknown>;
|
|
265
|
-
} & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'>;
|
|
267
|
+
} & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns' | 'compositeRowTabsterAttribute'>;
|
|
266
268
|
|
|
267
269
|
declare type EnableKeyboardModeOnChangeCallback = (columnId: TableColumnId, isKeyboardMode: boolean) => void;
|
|
268
270
|
|
|
@@ -1041,6 +1043,12 @@ declare type UseTableColumnSizingParams = {
|
|
|
1041
1043
|
containerWidthOffset?: number;
|
|
1042
1044
|
};
|
|
1043
1045
|
|
|
1046
|
+
export declare function useTableCompositeNavigation(): {
|
|
1047
|
+
onTableKeyDown: React_2.KeyboardEventHandler;
|
|
1048
|
+
tableTabsterAttribute: TabsterDOMAttribute;
|
|
1049
|
+
tableRowTabsterAttribute: TabsterDOMAttribute;
|
|
1050
|
+
};
|
|
1051
|
+
|
|
1044
1052
|
export declare const useTableContext: () => TableContextValue;
|
|
1045
1053
|
|
|
1046
1054
|
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"}
|
|
@@ -14,7 +14,7 @@ import { useColumnIdContext } from '../../contexts/columnIdContext';
|
|
|
14
14
|
*/ export const useDataGridCell_unstable = (props, ref)=>{
|
|
15
15
|
const { focusMode } = 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');
|
|
18
18
|
const resizableColumns = useDataGridContext_unstable((ctx)=>ctx.resizableColumns);
|
|
19
19
|
const columnSizing = useDataGridContext_unstable((ctx)=>ctx.columnSizing_unstable);
|
|
20
20
|
const focusableGroupAttr = useFocusableGroup({
|
|
@@ -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,UAAS,EAAE,GAAGF;IACtB,MAAMG,WAAWL;IACjB,MAAMM,WAAWP,4BAA4BQ,CAAAA,MAAOA,IAAIH,SAAS,KAAK;
|
|
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' || ctx.focusMode === 'composite');\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,UAAS,EAAE,GAAGF;IACtB,MAAMG,WAAWL;IACjB,MAAMM,WAAWP,4BAA4BQ,CAAAA,MAAOA,IAAIH,SAAS,KAAK,UAAUG,IAAIH,SAAS,KAAK;IAClG,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,aAAaO,kBAAkB;QACnCI,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"}
|
|
@@ -130,11 +130,11 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
130
130
|
m: "(forced-colors: active)"
|
|
131
131
|
}], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
|
|
132
132
|
m: "(forced-colors: active)"
|
|
133
|
-
}], ["@media (forced-colors: active){.
|
|
133
|
+
}], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
|
|
134
134
|
m: "(forced-colors: active)"
|
|
135
135
|
}], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
|
|
136
136
|
m: "(forced-colors: active)"
|
|
137
|
-
}], ["@media (forced-colors: active){.
|
|
137
|
+
}], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
|
|
138
138
|
m: "(forced-colors: active)"
|
|
139
139
|
}], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
|
|
140
140
|
m: "(forced-colors: active)"
|
|
@@ -146,13 +146,13 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
146
146
|
m: "(forced-colors: active)"
|
|
147
147
|
}], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
|
|
148
148
|
m: "(forced-colors: active)"
|
|
149
|
-
}], ["@media (forced-colors: active){.
|
|
149
|
+
}], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
|
|
150
150
|
m: "(forced-colors: active)"
|
|
151
151
|
}], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
|
|
152
152
|
m: "(forced-colors: active)"
|
|
153
|
-
}], ["@media (forced-colors: active){.
|
|
153
|
+
}], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
|
|
154
154
|
m: "(forced-colors: active)"
|
|
155
|
-
}], ["@media (forced-colors: active){.
|
|
155
|
+
}], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
|
|
156
156
|
m: "(forced-colors: active)"
|
|
157
157
|
}], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
|
|
158
158
|
m: "(forced-colors: active)"
|
|
@@ -166,11 +166,11 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
166
166
|
m: "(forced-colors: active)"
|
|
167
167
|
}], ["@media (forced-colors: active){.f1yat0gj{border-bottom-width:2px;}}", {
|
|
168
168
|
m: "(forced-colors: active)"
|
|
169
|
-
}], ["@media (forced-colors: active){.
|
|
169
|
+
}], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
|
|
170
170
|
m: "(forced-colors: active)"
|
|
171
171
|
}], ["@media (forced-colors: active){.f7nae3y{border-top-style:solid;}}", {
|
|
172
172
|
m: "(forced-colors: active)"
|
|
173
|
-
}], ["@media (forced-colors: active){.
|
|
173
|
+
}], ["@media (forced-colors: active){.fa97sf3{border-left-style:solid;}.fkbere7{border-right-style:solid;}}", {
|
|
174
174
|
m: "(forced-colors: active)"
|
|
175
175
|
}], ["@media (forced-colors: active){.fmtyzcc{border-bottom-style:solid;}}", {
|
|
176
176
|
m: "(forced-colors: active)"
|
|
@@ -182,13 +182,13 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
182
182
|
m: "(forced-colors: active)"
|
|
183
183
|
}], ["@media (forced-colors: active){.f9dii88{border-bottom-color:transparent;}}", {
|
|
184
184
|
m: "(forced-colors: active)"
|
|
185
|
-
}], ["@media (forced-colors: active){.
|
|
185
|
+
}], ["@media (forced-colors: active){.fyowp6c{border-right-color:transparent;}.fz08sq8{border-left-color:transparent;}}", {
|
|
186
186
|
m: "(forced-colors: active)"
|
|
187
187
|
}], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
|
|
188
188
|
m: "(forced-colors: active)"
|
|
189
|
-
}], ["@media (forced-colors: active){.
|
|
189
|
+
}], ["@media (forced-colors: active){.f1afxoft{border-bottom-right-radius:var(--borderRadiusMedium);}.flqq2yx{border-bottom-left-radius:var(--borderRadiusMedium);}}", {
|
|
190
190
|
m: "(forced-colors: active)"
|
|
191
|
-
}], ["@media (forced-colors: active){.
|
|
191
|
+
}], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
|
|
192
192
|
m: "(forced-colors: active)"
|
|
193
193
|
}], ["@media (forced-colors: active){.f1831rx6{border-top-left-radius:var(--borderRadiusMedium);}.f1b5xrmd{border-top-right-radius:var(--borderRadiusMedium);}}", {
|
|
194
194
|
m: "(forced-colors: active)"
|
|
@@ -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"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
3
|
+
import { ArrowDown, ArrowRight, Escape, keyCodes, ArrowUp } from '@fluentui/keyboard-keys';
|
|
4
|
+
import { useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable, useFocusFinders } from '@fluentui/react-tabster';
|
|
5
|
+
import { isHTMLElement } from '@fluentui/react-utilities';
|
|
6
|
+
export function useTableCompositeNavigation() {
|
|
7
|
+
const horizontalAttr = useArrowNavigationGroup({
|
|
8
|
+
axis: 'horizontal'
|
|
9
|
+
});
|
|
10
|
+
const gridAttr = useArrowNavigationGroup({
|
|
11
|
+
axis: 'grid'
|
|
12
|
+
});
|
|
13
|
+
const groupperAttr = useFocusableGroup({
|
|
14
|
+
tabBehavior: 'limited-trap-focus'
|
|
15
|
+
});
|
|
16
|
+
const { findFirstFocusable } = useFocusFinders();
|
|
17
|
+
const { targetDocument } = useFluent();
|
|
18
|
+
const rowAttr = useMergedTabsterAttributes_unstable(horizontalAttr, groupperAttr);
|
|
19
|
+
const onKeyDown = React.useCallback((e)=>{
|
|
20
|
+
if (!targetDocument) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
const activeElement = targetDocument.activeElement;
|
|
24
|
+
if (!activeElement || !e.currentTarget.contains(activeElement)) {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
const activeElementRole = activeElement.getAttribute('role');
|
|
28
|
+
// Enter groupper when in row focus mode to navigate cells
|
|
29
|
+
if (e.key === ArrowRight && activeElementRole === 'row' && isHTMLElement(activeElement)) {
|
|
30
|
+
var _findFirstFocusable;
|
|
31
|
+
(_findFirstFocusable = findFirstFocusable(activeElement)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();
|
|
32
|
+
}
|
|
33
|
+
if (activeElementRole === 'row') {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
const isInCell = (()=>{
|
|
37
|
+
let cur = isHTMLElement(activeElement) ? activeElement : null;
|
|
38
|
+
while(cur){
|
|
39
|
+
const curRole = cur.getAttribute('role');
|
|
40
|
+
if (curRole === 'cell' || curRole === 'gridcell') {
|
|
41
|
+
return true;
|
|
42
|
+
}
|
|
43
|
+
cur = cur.parentElement;
|
|
44
|
+
}
|
|
45
|
+
return false;
|
|
46
|
+
})();
|
|
47
|
+
// Escape groupper focus trap before arrow down
|
|
48
|
+
if ((e.key === ArrowDown || e.key === ArrowUp) && isInCell) {
|
|
49
|
+
activeElement.dispatchEvent(new KeyboardEvent('keydown', {
|
|
50
|
+
key: Escape,
|
|
51
|
+
keyCode: keyCodes.Escape
|
|
52
|
+
}));
|
|
53
|
+
// Tabster uses keycodes
|
|
54
|
+
// eslint-disable-next-line deprecation/deprecation
|
|
55
|
+
activeElement.dispatchEvent(new KeyboardEvent('keydown', {
|
|
56
|
+
key: e.key,
|
|
57
|
+
keyCode: e.keyCode
|
|
58
|
+
}));
|
|
59
|
+
}
|
|
60
|
+
}, [
|
|
61
|
+
targetDocument,
|
|
62
|
+
findFirstFocusable
|
|
63
|
+
]);
|
|
64
|
+
return {
|
|
65
|
+
onTableKeyDown: onKeyDown,
|
|
66
|
+
tableTabsterAttribute: gridAttr,
|
|
67
|
+
tableRowTabsterAttribute: rowAttr
|
|
68
|
+
};
|
|
69
|
+
}
|