@fluentui/react-table 9.0.0-alpha.13 → 9.0.0-alpha.14
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 +114 -1
- package/CHANGELOG.md +26 -2
- package/dist/index.d.ts +5 -5
- package/lib/components/DataGrid/DataGrid.types.js.map +1 -1
- package/lib/components/DataGrid/useDataGrid.js +5 -3
- package/lib/components/DataGrid/useDataGrid.js.map +1 -1
- package/lib/components/DataGridCell/useDataGridCell.js +1 -1
- package/lib/components/DataGridCell/useDataGridCell.js.map +1 -1
- package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js +1 -0
- package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js.map +1 -1
- package/lib/components/DataGridRow/DataGridRow.types.js.map +1 -1
- package/lib/components/DataGridRow/useDataGridRow.js +8 -4
- package/lib/components/DataGridRow/useDataGridRow.js.map +1 -1
- package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js +4 -3
- package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js.map +1 -1
- package/lib/components/TableHeaderCell/useTableHeaderCell.js +5 -4
- package/lib/components/TableHeaderCell/useTableHeaderCell.js.map +1 -1
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js +12 -3
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -1
- package/lib/components/TableRow/useTableRowStyles.js +0 -4
- package/lib/components/TableRow/useTableRowStyles.js.map +1 -1
- package/lib/components/TableSelectionCell/useTableSelectionCellStyles.js +10 -2
- package/lib/components/TableSelectionCell/useTableSelectionCellStyles.js.map +1 -1
- package/lib-commonjs/components/DataGrid/useDataGrid.js +5 -3
- package/lib-commonjs/components/DataGrid/useDataGrid.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/DataGridHeaderCell/useDataGridHeaderCell.js +1 -0
- package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCell.js.map +1 -1
- package/lib-commonjs/components/DataGridRow/useDataGridRow.js +11 -7
- package/lib-commonjs/components/DataGridRow/useDataGridRow.js.map +1 -1
- package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.js +4 -3
- package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js +5 -3
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js +13 -3
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.js.map +1 -1
- package/lib-commonjs/components/TableRow/useTableRowStyles.js +0 -4
- package/lib-commonjs/components/TableRow/useTableRowStyles.js.map +1 -1
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js +11 -2
- package/lib-commonjs/components/TableSelectionCell/useTableSelectionCellStyles.js.map +1 -1
- package/package.json +10 -9
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,120 @@
|
|
|
2
2
|
"name": "@fluentui/react-table",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 20 Dec 2022 14:55:53 GMT",
|
|
6
|
+
"tag": "@fluentui/react-table_v9.0.0-alpha.14",
|
|
7
|
+
"version": "9.0.0-alpha.14",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "lingfangao@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-table",
|
|
13
|
+
"commit": "76054827c6b9ccc7ad73a818952f2d636ffc9e6d",
|
|
14
|
+
"comment": "fix: Explicit focus outline for TableHeaderCell and TableSelectionCell"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "lingfangao@hotmail.com",
|
|
18
|
+
"package": "@fluentui/react-table",
|
|
19
|
+
"commit": "67a7284ac5934475134ce72af3965f3f9a223636",
|
|
20
|
+
"comment": "fix(DataGridSelectionCell): should render `aria-selected` on the cell"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "lingfangao@hotmail.com",
|
|
24
|
+
"package": "@fluentui/react-table",
|
|
25
|
+
"commit": "622bcbbe42920f53466bed4ad998b67daac3d6d3",
|
|
26
|
+
"comment": "fix: DataGrid supports keyboard navigation by default"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "lingfangao@hotmail.com",
|
|
30
|
+
"package": "@fluentui/react-table",
|
|
31
|
+
"commit": "c847712d9293db7028bc01e9ba4204e055ebbfb7",
|
|
32
|
+
"comment": "feat: Add row focus as unstable feature due to a11y unknowns"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "lingfangao@hotmail.com",
|
|
36
|
+
"package": "@fluentui/react-table",
|
|
37
|
+
"commit": "b1f470d42273869bc4e10fefff6f08b90640092d",
|
|
38
|
+
"comment": "fix(DataGridRow): `children` type should only be render function"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "lingfangao@hotmail.com",
|
|
42
|
+
"package": "@fluentui/react-table",
|
|
43
|
+
"commit": "dc96e9c54ac445396cd5e74812fd2ac1acdd15eb",
|
|
44
|
+
"comment": "fix: DataGridRow should prevent default on spacebar"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "lingfangao@hotmail.com",
|
|
48
|
+
"package": "@fluentui/react-table",
|
|
49
|
+
"commit": "b0aab3b9647e55a355e5e1c0d4e4cf7cc7955fdb",
|
|
50
|
+
"comment": "feat: DataGrid supports custom row Ids"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "lingfangao@hotmail.com",
|
|
54
|
+
"package": "@fluentui/react-table",
|
|
55
|
+
"commit": "ac32a5c210e34916f6990ebe4449621344ba0839",
|
|
56
|
+
"comment": "fix(TableHeaderCell): should render `aria-sort=\"none\"` if not sorted"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"author": "beachball",
|
|
60
|
+
"package": "@fluentui/react-table",
|
|
61
|
+
"comment": "Bump @fluentui/react-aria to v9.3.3",
|
|
62
|
+
"commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"author": "beachball",
|
|
66
|
+
"package": "@fluentui/react-table",
|
|
67
|
+
"comment": "Bump @fluentui/react-avatar to v9.2.9",
|
|
68
|
+
"commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"author": "beachball",
|
|
72
|
+
"package": "@fluentui/react-table",
|
|
73
|
+
"comment": "Bump @fluentui/react-checkbox to v9.0.15",
|
|
74
|
+
"commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"author": "beachball",
|
|
78
|
+
"package": "@fluentui/react-table",
|
|
79
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.3",
|
|
80
|
+
"commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"author": "beachball",
|
|
84
|
+
"package": "@fluentui/react-table",
|
|
85
|
+
"comment": "Bump @fluentui/react-radio to v9.0.14",
|
|
86
|
+
"commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"author": "beachball",
|
|
90
|
+
"package": "@fluentui/react-table",
|
|
91
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.3",
|
|
92
|
+
"commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"author": "beachball",
|
|
96
|
+
"package": "@fluentui/react-table",
|
|
97
|
+
"comment": "Bump @fluentui/react-theme to v9.1.4",
|
|
98
|
+
"commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"author": "beachball",
|
|
102
|
+
"package": "@fluentui/react-table",
|
|
103
|
+
"comment": "Bump @fluentui/react-utilities to v9.3.0",
|
|
104
|
+
"commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
|
|
105
|
+
}
|
|
106
|
+
],
|
|
107
|
+
"none": [
|
|
108
|
+
{
|
|
109
|
+
"author": "lingfangao@hotmail.com",
|
|
110
|
+
"package": "@fluentui/react-table",
|
|
111
|
+
"commit": "81c1239976fbf6dbc3c3c160462eac1b3ddfd0a8",
|
|
112
|
+
"comment": "docs: Table examples generally navigate with tab"
|
|
113
|
+
}
|
|
114
|
+
]
|
|
115
|
+
}
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"date": "Mon, 05 Dec 2022 18:29:31 GMT",
|
|
6
119
|
"tag": "@fluentui/react-table_v9.0.0-alpha.13",
|
|
7
120
|
"version": "9.0.0-alpha.13",
|
|
8
121
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,36 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-table
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 20 Dec 2022 14:55:53 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-alpha.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.14)
|
|
8
|
+
|
|
9
|
+
Tue, 20 Dec 2022 14:55:53 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.13..@fluentui/react-table_v9.0.0-alpha.14)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- fix: Explicit focus outline for TableHeaderCell and TableSelectionCell ([PR #25938](https://github.com/microsoft/fluentui/pull/25938) by lingfangao@hotmail.com)
|
|
15
|
+
- fix(DataGridSelectionCell): should render `aria-selected` on the cell ([PR #25950](https://github.com/microsoft/fluentui/pull/25950) by lingfangao@hotmail.com)
|
|
16
|
+
- fix: DataGrid supports keyboard navigation by default ([PR #25939](https://github.com/microsoft/fluentui/pull/25939) by lingfangao@hotmail.com)
|
|
17
|
+
- feat: Add row focus as unstable feature due to a11y unknowns ([PR #25944](https://github.com/microsoft/fluentui/pull/25944) by lingfangao@hotmail.com)
|
|
18
|
+
- fix(DataGridRow): `children` type should only be render function ([PR #25930](https://github.com/microsoft/fluentui/pull/25930) by lingfangao@hotmail.com)
|
|
19
|
+
- fix: DataGridRow should prevent default on spacebar ([PR #25942](https://github.com/microsoft/fluentui/pull/25942) by lingfangao@hotmail.com)
|
|
20
|
+
- feat: DataGrid supports custom row Ids ([PR #25885](https://github.com/microsoft/fluentui/pull/25885) by lingfangao@hotmail.com)
|
|
21
|
+
- fix(TableHeaderCell): should render `aria-sort="none"` if not sorted ([PR #25921](https://github.com/microsoft/fluentui/pull/25921) by lingfangao@hotmail.com)
|
|
22
|
+
- Bump @fluentui/react-aria to v9.3.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
|
|
23
|
+
- Bump @fluentui/react-avatar to v9.2.9 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
|
|
24
|
+
- Bump @fluentui/react-checkbox to v9.0.15 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
|
|
25
|
+
- Bump @fluentui/react-context-selector to v9.1.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
|
|
26
|
+
- Bump @fluentui/react-radio to v9.0.14 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
|
|
27
|
+
- Bump @fluentui/react-tabster to v9.3.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
|
|
28
|
+
- Bump @fluentui/react-theme to v9.1.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
|
|
29
|
+
- Bump @fluentui/react-utilities to v9.3.0 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
|
|
30
|
+
|
|
7
31
|
## [9.0.0-alpha.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.13)
|
|
8
32
|
|
|
9
|
-
Mon, 05 Dec 2022 18:
|
|
33
|
+
Mon, 05 Dec 2022 18:29:31 GMT
|
|
10
34
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.12..@fluentui/react-table_v9.0.0-alpha.13)
|
|
11
35
|
|
|
12
36
|
### Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -93,7 +93,7 @@ export declare const dataGridClassNames: SlotClassNames<DataGridSlots>;
|
|
|
93
93
|
export declare type DataGridContextValue = HeadlessTableState<any> & {
|
|
94
94
|
/**
|
|
95
95
|
* How focus navigation will work in the datagrid
|
|
96
|
-
* @default
|
|
96
|
+
* @default cell
|
|
97
97
|
*/
|
|
98
98
|
focusMode: FocusMode;
|
|
99
99
|
/**
|
|
@@ -158,7 +158,7 @@ export declare type DataGridHeaderState = TableHeaderState;
|
|
|
158
158
|
/**
|
|
159
159
|
* DataGrid Props
|
|
160
160
|
*/
|
|
161
|
-
export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'items' | 'columns'> & Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> & Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> & Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {
|
|
161
|
+
export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> & Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> & Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> & Pick<UseTableSelectionOptions, 'defaultSelectedItems' | 'selectedItems'> & {
|
|
162
162
|
onSortChange?: (e: React_2.MouseEvent, sortState: SortState) => void;
|
|
163
163
|
onSelectionChange?: (e: React_2.MouseEvent | React_2.KeyboardEvent, data: OnSelectionChangeData) => void;
|
|
164
164
|
/**
|
|
@@ -178,7 +178,7 @@ export declare const dataGridRowClassNames: SlotClassNames<DataGridRowSlots>;
|
|
|
178
178
|
/**
|
|
179
179
|
* DataGridRow Props
|
|
180
180
|
*/
|
|
181
|
-
export declare type DataGridRowProps = Omit<TableRowProps, 'children'> & ComponentProps<DataGridRowSlots> & {
|
|
181
|
+
export declare type DataGridRowProps = Omit<TableRowProps, 'children'> & Omit<ComponentProps<DataGridRowSlots>, 'children'> & {
|
|
182
182
|
children: CellRenderFunction;
|
|
183
183
|
};
|
|
184
184
|
|
|
@@ -221,9 +221,9 @@ export declare type DataGridSlots = TableSlots;
|
|
|
221
221
|
*/
|
|
222
222
|
export declare type DataGridState = TableState & {
|
|
223
223
|
tableState: HeadlessTableState<unknown>;
|
|
224
|
-
} & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance'>;
|
|
224
|
+
} & Pick<DataGridContextValue, 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId'>;
|
|
225
225
|
|
|
226
|
-
export declare type FocusMode = 'none' | 'cell';
|
|
226
|
+
export declare type FocusMode = 'none' | 'cell' | 'row_unstable';
|
|
227
227
|
|
|
228
228
|
export declare interface HeadlessTableState<TItem> extends Pick<UseTableOptions<TItem>, 'items' | 'getRowId'> {
|
|
229
229
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n SortState,\n TableState as HeadlessTableState,\n UseTableSortOptions,\n SelectionMode,\n UseTableSelectionOptions,\n OnSelectionChangeData,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type FocusMode = 'none' | 'cell';\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 = HeadlessTableState<any> & {\n /**\n * How focus navigation will work in the datagrid\n * @default
|
|
1
|
+
{"version":3,"file":"DataGrid.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGrid/DataGrid.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { TableContextValues, TableProps, TableSlots, TableState } from '../Table/Table.types';\nimport type {\n SortState,\n TableState as HeadlessTableState,\n UseTableSortOptions,\n SelectionMode,\n UseTableSelectionOptions,\n OnSelectionChangeData,\n} from '../../hooks';\nimport { TableRowProps } from '../TableRow/TableRow.types';\n\nexport type DataGridSlots = TableSlots;\n\nexport type FocusMode = 'none' | 'cell' | 'row_unstable';\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 = HeadlessTableState<any> & {\n /**\n * How focus navigation will work in the datagrid\n * @default cell\n */\n focusMode: FocusMode;\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/**\n * DataGrid Props\n */\nexport type DataGridProps = TableProps &\n Pick<DataGridContextValue, 'items' | 'columns' | 'getRowId'> &\n Pick<Partial<DataGridContextValue>, 'focusMode' | 'subtleSelection' | 'selectionAppearance'> &\n Pick<UseTableSortOptions, 'sortState' | 'defaultSortState'> &\n Pick<UseTableSelectionOptions, '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\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: HeadlessTableState<unknown> } & Pick<\n DataGridContextValue,\n 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId'\n >;\n"]}
|
|
@@ -15,7 +15,7 @@ export const useDataGrid_unstable = (props, ref) => {
|
|
|
15
15
|
const {
|
|
16
16
|
items,
|
|
17
17
|
columns,
|
|
18
|
-
focusMode = '
|
|
18
|
+
focusMode = 'cell',
|
|
19
19
|
selectionMode,
|
|
20
20
|
onSortChange,
|
|
21
21
|
onSelectionChange,
|
|
@@ -24,7 +24,8 @@ export const useDataGrid_unstable = (props, ref) => {
|
|
|
24
24
|
selectedItems,
|
|
25
25
|
defaultSelectedItems,
|
|
26
26
|
subtleSelection = false,
|
|
27
|
-
selectionAppearance = 'brand'
|
|
27
|
+
selectionAppearance = 'brand',
|
|
28
|
+
getRowId
|
|
28
29
|
} = props;
|
|
29
30
|
const navigable = focusMode !== 'none';
|
|
30
31
|
const keyboardNavAttr = useArrowNavigationGroup({
|
|
@@ -32,7 +33,8 @@ export const useDataGrid_unstable = (props, ref) => {
|
|
|
32
33
|
});
|
|
33
34
|
const tableState = useTableFeatures({
|
|
34
35
|
items,
|
|
35
|
-
columns
|
|
36
|
+
columns,
|
|
37
|
+
getRowId
|
|
36
38
|
}, [useTableSort({
|
|
37
39
|
defaultSortState,
|
|
38
40
|
sortState,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts"],"names":[],"mappings":"AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,SAAS,iBAAT,QAAkC,mBAAlC;AACA,SAAS,gBAAT,EAA2B,YAA3B,EAAyC,iBAAzC,QAAkE,aAAlE;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG,MAAM;IACJ,KADI;IAEJ,OAFI;IAGJ,SAAS,GAAG,MAHR;IAIJ,aAJI;IAKJ,YALI;IAMJ,iBANI;IAOJ,gBAPI;IAQJ,SARI;IASJ,aATI;IAUJ,oBAVI;IAWJ,eAAe,GAAG,KAXd;IAYJ,mBAAmB,GAAG;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/DataGrid/useDataGrid.ts"],"names":[],"mappings":"AACA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,SAAS,iBAAT,QAAkC,mBAAlC;AACA,SAAS,gBAAT,EAA2B,YAA3B,EAAyC,iBAAzC,QAAkE,aAAlE;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,oBAAoB,GAAG,CAAC,KAAD,EAAuB,GAAvB,KAAqE;EACvG,MAAM;IACJ,KADI;IAEJ,OAFI;IAGJ,SAAS,GAAG,MAHR;IAIJ,aAJI;IAKJ,YALI;IAMJ,iBANI;IAOJ,gBAPI;IAQJ,SARI;IASJ,aATI;IAUJ,oBAVI;IAWJ,eAAe,GAAG,KAXd;IAYJ,mBAAmB,GAAG,OAZlB;IAaJ;EAbI,IAcF,KAdJ;EAgBA,MAAM,SAAS,GAAG,SAAS,KAAK,MAAhC;EACA,MAAM,eAAe,GAAG,uBAAuB,CAAC;IAAE,IAAI,EAAE;EAAR,CAAD,CAA/C;EAEA,MAAM,UAAU,GAAG,gBAAgB,CAAC;IAAE,KAAF;IAAS,OAAT;IAAkB;EAAlB,CAAD,EAA+B,CAChE,YAAY,CAAC;IACX,gBADW;IAEX,SAFW;IAGX;EAHW,CAAD,CADoD,EAMhE,iBAAiB,CAAC;IAChB,oBADgB;IAEhB,aAFgB;IAGhB,iBAHgB;IAIhB,aAAa,EAAE,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAA,aAAA,GAAiB;EAJhB,CAAD,CAN+C,CAA/B,CAAnC;EAcA,MAAM,cAAc,GAAG,iBAAiB,CACtC;IAAE,IAAI,EAAE,MAAR;IAAgB,EAAE,EAAE,KAApB;IAA2B,gBAAgB,EAAE,IAA7C;IAAmD,IAAI,SAAS,IAAI,eAAjB,CAAnD;IAAsF,GAAG;EAAzF,CADsC,EAEtC,GAFsC,CAAxC;EAKA,OAAO,EACL,GAAG,cADE;IAEL,SAFK;IAGL,UAHK;IAIL,cAAc,EAAE,CAAC,CAAC,aAJb;IAKL,eALK;IAML;EANK,CAAP;AAQD,CA/CM","sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport type { DataGridProps, DataGridState } from './DataGrid.types';\nimport { useTable_unstable } from '../Table/useTable';\nimport { useTableFeatures, useTableSort, useTableSelection } from '../../hooks';\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 } = props;\n\n const navigable = focusMode !== 'none';\n const keyboardNavAttr = useArrowNavigationGroup({ axis: 'grid' });\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 ]);\n\n const baseTableState = useTable_unstable(\n { role: 'grid', as: 'div', noNativeElements: true, ...(navigable && keyboardNavAttr), ...props },\n ref,\n );\n\n return {\n ...baseTableState,\n focusMode,\n tableState,\n selectableRows: !!selectionMode,\n subtleSelection,\n selectionAppearance,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -11,7 +11,7 @@ import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
|
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
export const useDataGridCell_unstable = (props, ref) => {
|
|
14
|
-
const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode
|
|
14
|
+
const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');
|
|
15
15
|
return useTableCell_unstable({
|
|
16
16
|
as: 'div',
|
|
17
17
|
role: 'gridcell',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridCell/useDataGridCell.ts"],"names":[],"mappings":"AAEA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;EACnH,MAAM,QAAQ,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,SAAJ,KAAkB,MAA1B,CAA5C;EACA,OAAO,qBAAqB,CAAC;IAAE,EAAE,EAAE,KAAN;IAAa,IAAI,EAAE,UAAnB;IAA+B,QAAQ,EAAE,QAAQ,GAAG,CAAH,GAAO,SAAxD;IAAmE,GAAG;EAAtE,CAAD,EAAgF,GAAhF,CAA5B;AACD,CAHM","sourcesContent":["import * as React from 'react';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\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 tabbable = useDataGridContext_unstable(ctx => ctx.focusMode
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridCell/useDataGridCell.ts"],"names":[],"mappings":"AAEA,SAAS,qBAAT,QAAsC,2BAAtC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CAAC,KAAD,EAA2B,GAA3B,KAA6E;EACnH,MAAM,QAAQ,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,SAAJ,KAAkB,MAA1B,CAA5C;EACA,OAAO,qBAAqB,CAAC;IAAE,EAAE,EAAE,KAAN;IAAa,IAAI,EAAE,UAAnB;IAA+B,QAAQ,EAAE,QAAQ,GAAG,CAAH,GAAO,SAAxD;IAAmE,GAAG;EAAtE,CAAD,EAAgF,GAAhF,CAA5B;AACD,CAHM","sourcesContent":["import * as React from 'react';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\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 tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'cell');\n return useTableCell_unstable({ as: 'div', role: 'gridcell', tabIndex: tabbable ? 0 : undefined, ...props }, ref);\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA,SAAS,2BAAT,QAA4C,uCAA5C;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,kBAAT,QAAmC,gCAAnC;AACA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,QAAQ,GAAG,kBAAkB,EAAnC;EACA,MAAM;IAAE;EAAF,IAAe,eAAe,EAApC;EACA,MAAM,gBAAgB,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAJ,CAAS,gBAAjB,CAApD;EACA,MAAM,aAAa,GAAG,2BAA2B,CAAC,GAAG,IACnD,QAAQ,GAAG,GAAG,CAAC,IAAJ,CAAS,gBAAT,CAA0B,QAA1B,CAAH,GAAyC,SADF,CAAjD;EAGA,MAAM,OAAO,GAAG,gBAAgB,CAAE,CAAD,IAAoD;;;IACnF,IAAI,QAAJ,EAAc;MACZ,gBAAgB,CAAC,CAAD,EAAI,QAAJ,CAAhB;IACD;;IACD,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,CAAH,CAAb;EACD,CAL+B,CAAhC;EAOA,OAAO,2BAA2B,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCell.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA,SAAS,2BAAT,QAA4C,uCAA5C;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,kBAAT,QAAmC,gCAAnC;AACA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,8BAA8B,GAAG,CAC5C,KAD4C,EAE5C,GAF4C,KAGjB;EAC3B,MAAM,QAAQ,GAAG,kBAAkB,EAAnC;EACA,MAAM;IAAE;EAAF,IAAe,eAAe,EAApC;EACA,MAAM,gBAAgB,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,IAAJ,CAAS,gBAAjB,CAApD;EACA,MAAM,aAAa,GAAG,2BAA2B,CAAC,GAAG,IACnD,QAAQ,GAAG,GAAG,CAAC,IAAJ,CAAS,gBAAT,CAA0B,QAA1B,CAAH,GAAyC,SADF,CAAjD;EAGA,MAAM,OAAO,GAAG,gBAAgB,CAAE,CAAD,IAAoD;;;IACnF,IAAI,QAAJ,EAAc;MACZ,gBAAgB,CAAC,CAAD,EAAI,QAAJ,CAAhB;IACD;;IACD,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,CAAH,CAAb;EACD,CAL+B,CAAhC;EAOA,OAAO,2BAA2B,CAChC;IAAE,aAAF;IAAiB,EAAE,EAAE,KAArB;IAA4B,QAAQ,EAAE,QAAQ,GAAG,SAAH,GAAe,CAA7D;IAAgE,GAAG,KAAnE;IAA0E;EAA1E,CADgC,EAEhC,GAFgC,CAAlC;AAID,CArBM","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render DataGridHeaderCell.\n *\n * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n *\n * @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */\nexport const useDataGridHeaderCell_unstable = (\n props: DataGridHeaderCellProps,\n ref: React.Ref<HTMLElement>,\n): DataGridHeaderCellState => {\n const columnId = useColumnIdContext();\n const { sortable } = useTableContext();\n const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);\n const sortDirection = useDataGridContext_unstable(ctx =>\n sortable ? ctx.sort.getSortDirection(columnId) : undefined,\n );\n const onClick = useEventCallback((e: React.MouseEvent<HTMLTableHeaderCellElement>) => {\n if (sortable) {\n toggleColumnSort(e, columnId);\n }\n props.onClick?.(e);\n });\n\n return useTableHeaderCell_unstable(\n { sortDirection, as: 'div', tabIndex: sortable ? undefined : 0, ...props, onClick },\n ref,\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridRow.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { Slot, ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { ColumnDefinition } from '../../hooks';\nimport type { TableRowProps, TableRowSlots, TableRowState } from '../TableRow/TableRow.types';\nimport type { TableSelectionCell } from '../TableSelectionCell/TableSelectionCell';\n\nexport type DataGridRowSlots = TableRowSlots & {\n /**\n * When selection is enabled on the @see DataGrid, all rows\n * will render the selection cell.\n */\n selectionCell?: Slot<typeof TableSelectionCell>;\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 CellRenderFunction = (column: ColumnDefinition<any>) => React.ReactNode;\n\n/**\n * DataGridRow Props\n */\nexport type DataGridRowProps = Omit<TableRowProps, 'children'> &\n ComponentProps<DataGridRowSlots> & {\n children: CellRenderFunction;\n };\n\n/**\n * State used in rendering DataGridRow\n */\nexport type DataGridRowState = TableRowState & ComponentState<DataGridRowSlots>;\n"]}
|
|
1
|
+
{"version":3,"file":"DataGridRow.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { Slot, ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { ColumnDefinition } from '../../hooks';\nimport type { TableRowProps, TableRowSlots, TableRowState } from '../TableRow/TableRow.types';\nimport type { TableSelectionCell } from '../TableSelectionCell/TableSelectionCell';\n\nexport type DataGridRowSlots = TableRowSlots & {\n /**\n * When selection is enabled on the @see DataGrid, all rows\n * will render the selection cell.\n */\n selectionCell?: Slot<typeof TableSelectionCell>;\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 CellRenderFunction = (column: ColumnDefinition<any>) => React.ReactNode;\n\n/**\n * DataGridRow Props\n */\nexport type DataGridRowProps = Omit<TableRowProps, 'children'> &\n Omit<ComponentProps<DataGridRowSlots>, 'children'> & {\n children: CellRenderFunction;\n };\n\n/**\n * State used in rendering DataGridRow\n */\nexport type DataGridRowState = TableRowState & ComponentState<DataGridRowSlots>;\n"]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { isInteractiveHTMLElement, useEventCallback, resolveShorthand } from '@fluentui/react-utilities';
|
|
3
|
+
import { Space } from '@fluentui/keyboard-keys';
|
|
2
4
|
import { useTableRow_unstable } from '../TableRow/useTableRow';
|
|
3
5
|
import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
|
|
4
6
|
import { ColumnIdContextProvider } from '../../contexts/columnIdContext';
|
|
5
7
|
import { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';
|
|
6
8
|
import { useRowIdContext } from '../../contexts/rowIdContext';
|
|
7
|
-
import { useEventCallback } from '@fluentui/react-utilities';
|
|
8
9
|
import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
|
|
9
|
-
import { resolveShorthand } from '@fluentui/react-utilities';
|
|
10
10
|
/**
|
|
11
11
|
* Create the state required to render DataGridRow.
|
|
12
12
|
*
|
|
@@ -23,6 +23,7 @@ export const useDataGridRow_unstable = (props, ref) => {
|
|
|
23
23
|
const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);
|
|
24
24
|
const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);
|
|
25
25
|
const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));
|
|
26
|
+
const tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'row_unstable');
|
|
26
27
|
const appearance = useDataGridContext_unstable(ctx => {
|
|
27
28
|
if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {
|
|
28
29
|
return ctx.selectionAppearance;
|
|
@@ -50,7 +51,9 @@ export const useDataGridRow_unstable = (props, ref) => {
|
|
|
50
51
|
const onKeyDown = useEventCallback(e => {
|
|
51
52
|
var _a;
|
|
52
53
|
|
|
53
|
-
if (selectable && !isHeader && e.key ===
|
|
54
|
+
if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target)) {
|
|
55
|
+
// stop scrolling
|
|
56
|
+
e.preventDefault();
|
|
54
57
|
toggleRow(e, rowId);
|
|
55
58
|
}
|
|
56
59
|
|
|
@@ -63,7 +66,8 @@ export const useDataGridRow_unstable = (props, ref) => {
|
|
|
63
66
|
onClick,
|
|
64
67
|
onKeyDown,
|
|
65
68
|
children: cells,
|
|
66
|
-
as: 'div'
|
|
69
|
+
as: 'div',
|
|
70
|
+
tabIndex: tabbable && !isHeader ? 0 : undefined
|
|
67
71
|
}, ref);
|
|
68
72
|
return { ...baseState,
|
|
69
73
|
components: { ...baseState.components,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,oBAAT,QAAqC,yBAArC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,uBAAT,QAAwC,gCAAxC;AACA,SAAS,qBAAT,QAAsC,gDAAtC;AACA,SAAS,eAAT,QAAgC,6BAAhC;AACA,SAAS,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridRow/useDataGridRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,wBAAT,EAAmC,gBAAnC,EAAqD,gBAArD,QAA6E,2BAA7E;AACA,SAAS,KAAT,QAAsB,yBAAtB;AAEA,SAAS,oBAAT,QAAqC,yBAArC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,uBAAT,QAAwC,gCAAxC;AACA,SAAS,qBAAT,QAAsC,gDAAtC;AACA,SAAS,eAAT,QAAgC,6BAAhC;AACA,SAAS,kBAAT,QAAmC,mCAAnC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH,MAAM,KAAK,GAAG,eAAe,EAA7B;EACA,MAAM,QAAQ,GAAG,kBAAkB,EAAnC;EACA,MAAM,UAAU,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,OAAZ,CAA9C;EACA,MAAM,UAAU,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,cAAZ,CAA9C;EACA,MAAM,QAAQ,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,aAAd,CAA4B,KAA5B,CAAR,CAA5C;EACA,MAAM,QAAQ,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,SAAJ,KAAkB,cAA1B,CAA5C;EACA,MAAM,UAAU,GAAG,2BAA2B,CAAC,GAAG,IAAG;IACnD,IAAI,CAAC,QAAD,IAAa,UAAb,IAA2B,GAAG,CAAC,SAAJ,CAAc,aAAd,CAA4B,KAA5B,CAA/B,EAAmE;MACjE,OAAO,GAAG,CAAC,mBAAX;IACD;;IAED,OAAO,MAAP;EACD,CAN6C,CAA9C;EAOA,MAAM,SAAS,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,SAAtB,CAA7C;EAEA,MAAM,kBAAkB,GAAG,KAAK,CAAC,QAAjC;EACA,MAAM,KAAK,GAAG,UAAU,CAAC,GAAX,CAAe,SAAS,IAAG;IACvC,oBACE,KAAA,CAAA,aAAA,CAAC,uBAAD,EAAwB;MAAC,KAAK,EAAE,SAAS,CAAC,QAAlB;MAA4B,GAAG,EAAE,SAAS,CAAC;IAA3C,CAAxB,EACG,kBAAkB,CAAC,SAAD,CADrB,CADF;EAKD,CANa,CAAd;EAQA,MAAM,OAAO,GAAG,gBAAgB,CAAE,CAAD,IAA6C;;;IAC5E,IAAI,UAAU,IAAI,CAAC,QAAnB,EAA6B;MAC3B,SAAS,CAAC,CAAD,EAAI,KAAJ,CAAT;IACD;;IAED,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,CAAH,CAAb;EACD,CAN+B,CAAhC;EAQA,MAAM,SAAS,GAAG,gBAAgB,CAAE,CAAD,IAAgD;;;IACjF,IAAI,UAAU,IAAI,CAAC,QAAf,IAA2B,CAAC,CAAC,GAAF,KAAU,KAArC,IAA8C,CAAC,wBAAwB,CAAC,CAAC,CAAC,MAAH,CAA3E,EAAsG;MACpG;MACA,CAAC,CAAC,cAAF;MACA,SAAS,CAAC,CAAD,EAAI,KAAJ,CAAT;IACD;;IAED,CAAA,EAAA,GAAA,KAAK,CAAC,SAAN,MAAe,IAAf,IAAe,EAAA,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAe,EAAA,CAAA,IAAA,CAAf,KAAe,EAAG,CAAH,CAAf;EACD,CARiC,CAAlC;EAUA,MAAM,SAAS,GAAG,oBAAoB,CACpC;IACE,UADF;IAEE,iBAAiB,UAAU,GAAG,QAAH,GAAc,SAF3C;IAGE,GAAG,KAHL;IAIE,OAJF;IAKE,SALF;IAME,QAAQ,EAAE,KANZ;IAOE,EAAE,EAAE,KAPN;IAQE,QAAQ,EAAE,QAAQ,IAAI,CAAC,QAAb,GAAwB,CAAxB,GAA4B;EARxC,CADoC,EAWpC,GAXoC,CAAtC;EAcA,OAAO,EACL,GAAG,SADE;IAEL,UAAU,EAAE,EACV,GAAG,SAAS,CAAC,UADH;MAEV,aAAa,EAAE;IAFL,CAFP;IAML,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC,aAAP,EAAsB;MAAE,QAAQ,EAAE;IAAZ,CAAtB;EAN1B,CAAP;AAQD,CAjEM","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 { ColumnIdContextProvider } from '../../contexts/columnIdContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useRowIdContext } 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 = useRowIdContext();\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 tabbable = useDataGridContext_unstable(ctx => ctx.focusMode === 'row_unstable');\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\n const cellRenderFunction = props.children;\n const cells = columnDefs.map(columnDef => {\n return (\n <ColumnIdContextProvider value={columnDef.columnId} key={columnDef.columnId}>\n {cellRenderFunction(columnDef)}\n </ColumnIdContextProvider>\n );\n });\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 ...props,\n onClick,\n onKeyDown,\n children: cells,\n as: 'div',\n tabIndex: tabbable && !isHeader ? 0 : undefined,\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 };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -16,10 +16,9 @@ import { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSe
|
|
|
16
16
|
export const useDataGridSelectionCell_unstable = (props, ref) => {
|
|
17
17
|
const isHeader = useIsInTableHeader();
|
|
18
18
|
const rowId = useRowIdContext();
|
|
19
|
-
const multiselect = useDataGridContext_unstable(ctx => ctx.selection.selectionMode === 'multiselect');
|
|
20
19
|
const subtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);
|
|
21
20
|
const checked = useDataGridContext_unstable(ctx => {
|
|
22
|
-
if (isHeader && multiselect) {
|
|
21
|
+
if (isHeader && ctx.selection.selectionMode === 'multiselect') {
|
|
23
22
|
return ctx.selection.allRowsSelected ? true : ctx.selection.someRowsSelected ? 'mixed' : false;
|
|
24
23
|
}
|
|
25
24
|
|
|
@@ -42,7 +41,9 @@ export const useDataGridSelectionCell_unstable = (props, ref) => {
|
|
|
42
41
|
checked,
|
|
43
42
|
type,
|
|
44
43
|
tabIndex: 0,
|
|
45
|
-
hidden: isHeader &&
|
|
44
|
+
hidden: isHeader && type === 'radio',
|
|
45
|
+
'aria-checked': isHeader ? checked : undefined,
|
|
46
|
+
'aria-selected': isHeader || checked === 'mixed' ? undefined : checked,
|
|
46
47
|
subtle,
|
|
47
48
|
checkboxIndicator: {
|
|
48
49
|
tabIndex: -1
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,eAAT,QAAgC,6BAAhC;AACA,SAAS,kBAAT,QAAmC,mCAAnC;AACA,SAAS,8BAAT,QAA+C,6CAA/C;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,GAF+C,KAGjB;EAC9B,MAAM,QAAQ,GAAG,kBAAkB,EAAnC;EACA,MAAM,KAAK,GAAG,eAAe,EAA7B;EACA,MAAM,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/DataGridSelectionCell/useDataGridSelectionCell.ts"],"names":[],"mappings":"AACA,SAAS,gBAAT,QAAiC,2BAAjC;AACA,SAAS,2BAAT,QAA4C,gCAA5C;AACA,SAAS,eAAT,QAAgC,6BAAhC;AACA,SAAS,kBAAT,QAAmC,mCAAnC;AACA,SAAS,8BAAT,QAA+C,6CAA/C;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iCAAiC,GAAG,CAC/C,KAD+C,EAE/C,GAF+C,KAGjB;EAC9B,MAAM,QAAQ,GAAG,kBAAkB,EAAnC;EACA,MAAM,KAAK,GAAG,eAAe,EAA7B;EACA,MAAM,MAAM,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,eAAZ,CAA1C;EACA,MAAM,OAAO,GAAG,2BAA2B,CAAC,GAAG,IAAG;IAChD,IAAI,QAAQ,IAAI,GAAG,CAAC,SAAJ,CAAc,aAAd,KAAgC,aAAhD,EAA+D;MAC7D,OAAO,GAAG,CAAC,SAAJ,CAAc,eAAd,GAAgC,IAAhC,GAAuC,GAAG,CAAC,SAAJ,CAAc,gBAAd,GAAiC,OAAjC,GAA2C,KAAzF;IACD;;IAED,OAAO,GAAG,CAAC,SAAJ,CAAc,aAAd,CAA4B,KAA5B,CAAP;EACD,CAN0C,CAA3C;EAQA,MAAM,aAAa,GAAG,2BAA2B,CAAC,GAAG,IAAI,GAAG,CAAC,SAAJ,CAAc,aAAtB,CAAjD;EACA,MAAM,IAAI,GAAG,2BAA2B,CAAC,GAAG,IAC1C,GAAG,CAAC,SAAJ,CAAc,aAAd,KAAgC,aAAhC,GAAgD,UAAhD,GAA6D,OADvB,CAAxC;EAIA,MAAM,OAAO,GAAG,gBAAgB,CAAE,CAAD,IAA8C;;;IAC7E,IAAI,QAAJ,EAAc;MACZ,aAAa,CAAC,CAAD,CAAb;IACD;;IAED,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,CAAH,CAAb;EACD,CAN+B,CAAhC;EAQA,OAAO,8BAA8B,CACnC;IACE,EAAE,EAAE,KADN;IAEE,IAAI,EAAE,UAFR;IAGE,OAHF;IAIE,IAJF;IAKE,QAAQ,EAAE,CALZ;IAME,MAAM,EAAE,QAAQ,IAAI,IAAI,KAAK,OAN/B;IAOE,gBAAgB,QAAQ,GAAG,OAAH,GAAa,SAPvC;IAQE,iBAAiB,QAAQ,IAAI,OAAO,KAAK,OAAxB,GAAkC,SAAlC,GAA8C,OARjE;IASE,MATF;IAUE,iBAAiB,EAAE;MAAE,QAAQ,EAAE,CAAC;IAAb,CAVrB;IAWE,GAAG,KAXL;IAYE;EAZF,CADmC,EAenC,GAfmC,CAArC;AAiBD,CA7CM","sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\nimport { useTableSelectionCell_unstable } from '../TableSelectionCell/useTableSelectionCell';\nimport type { DataGridSelectionCellProps, DataGridSelectionCellState } from './DataGridSelectionCell.types';\n\n/**\n * Create the state required to render DataGridSelectionCell.\n *\n * The returned state can be modified with hooks such as useDataGridSelectionCellStyles_unstable,\n * before being passed to renderDataGridSelectionCell_unstable.\n *\n * @param props - props from this instance of DataGridSelectionCell\n * @param ref - reference to root HTMLElement of DataGridSelectionCell\n */\nexport const useDataGridSelectionCell_unstable = (\n props: DataGridSelectionCellProps,\n ref: React.Ref<HTMLElement>,\n): DataGridSelectionCellState => {\n const isHeader = useIsInTableHeader();\n const rowId = useRowIdContext();\n const subtle = useDataGridContext_unstable(ctx => ctx.subtleSelection);\n const checked = useDataGridContext_unstable(ctx => {\n if (isHeader && ctx.selection.selectionMode === 'multiselect') {\n return ctx.selection.allRowsSelected ? true : ctx.selection.someRowsSelected ? 'mixed' : false;\n }\n\n return ctx.selection.isRowSelected(rowId);\n });\n\n const toggleAllRows = useDataGridContext_unstable(ctx => ctx.selection.toggleAllRows);\n const type = useDataGridContext_unstable(ctx =>\n ctx.selection.selectionMode === 'multiselect' ? 'checkbox' : 'radio',\n );\n\n const onClick = useEventCallback((e: React.MouseEvent<HTMLTableCellElement>) => {\n if (isHeader) {\n toggleAllRows(e);\n }\n\n props.onClick?.(e);\n });\n\n return useTableSelectionCell_unstable(\n {\n as: 'div',\n role: 'gridcell',\n checked,\n type,\n tabIndex: 0,\n hidden: isHeader && type === 'radio',\n 'aria-checked': isHeader ? checked : undefined,\n 'aria-selected': isHeader || checked === 'mixed' ? undefined : checked,\n subtle,\n checkboxIndicator: { tabIndex: -1 },\n ...props,\n onClick,\n },\n ref,\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
|
|
2
|
+
import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
|
+
import { useFocusWithin } from '@fluentui/react-tabster';
|
|
3
4
|
import { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';
|
|
4
5
|
import { useTableContext } from '../../contexts/tableContext';
|
|
5
6
|
import { useARIAButtonShorthand } from '@fluentui/react-aria';
|
|
@@ -22,7 +23,7 @@ const sortIcons = {
|
|
|
22
23
|
*/
|
|
23
24
|
|
|
24
25
|
export const useTableHeaderCell_unstable = (props, ref) => {
|
|
25
|
-
var _a;
|
|
26
|
+
var _a, _b;
|
|
26
27
|
|
|
27
28
|
const {
|
|
28
29
|
noNativeElements,
|
|
@@ -36,9 +37,9 @@ export const useTableHeaderCell_unstable = (props, ref) => {
|
|
|
36
37
|
sortIcon: 'span'
|
|
37
38
|
},
|
|
38
39
|
root: getNativeElementProps(rootComponent, {
|
|
39
|
-
ref,
|
|
40
|
+
ref: useMergedRefs(ref, useFocusWithin()),
|
|
40
41
|
role: rootComponent === 'div' ? 'columnheader' : undefined,
|
|
41
|
-
'aria-sort': props.sortDirection,
|
|
42
|
+
'aria-sort': sortable ? (_b = props.sortDirection) !== null && _b !== void 0 ? _b : 'none' : undefined,
|
|
42
43
|
...props
|
|
43
44
|
}),
|
|
44
45
|
sortIcon: resolveShorthand(props.sortIcon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,aAAlD,QAAuE,2BAAvE;AACA,SAAS,cAAT,QAA+B,yBAA/B;AACA,SAAS,cAAT,EAAyB,gBAAzB,QAAiD,uBAAjD;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AACA,SAAS,sBAAT,QAAuC,sBAAvC;AAEA,MAAM,SAAS,GAAG;EAChB,SAAS,eAAE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe;IAAC,QAAQ,EAAE;EAAX,CAAf,CADK;EAEhB,UAAU,eAAE,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAiB;IAAC,QAAQ,EAAE;EAAX,CAAjB;AAFI,CAAlB;AAKA;;;;;;;;AAQG;;AACH,OAAO,MAAM,2BAA2B,GAAG,CACzC,KADyC,EAEzC,GAFyC,KAGjB;;;EACxB,MAAM;IAAE,gBAAF;IAAoB;EAApB,IAAiC,eAAe,EAAtD;EAEA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,IAA7D;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,aADI;MAEV,MAAM,EAAE,QAFE;MAGV,QAAQ,EAAE;IAHA,CADP;IAML,IAAI,EAAE,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,cAAc,EAApB,CADuB;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,cAA1B,GAA2C,SAFR;MAGzC,aAAa,QAAQ,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,aAAN,MAAmB,IAAnB,IAAmB,EAAA,KAAA,KAAA,CAAnB,GAAmB,EAAnB,GAAuB,MAA1B,GAAmC,SAHf;MAIzC,GAAG;IAJsC,CAAhB,CANtB;IAYL,QAAQ,EAAE,gBAAgB,CAAC,KAAK,CAAC,QAAP,EAAiB;MACzC,QAAQ,EAAE,CAAC,CAAC,KAAK,CAAC,aADuB;MAEzC,YAAY,EAAE;QAAE,QAAQ,EAAE,KAAK,CAAC,aAAN,GAAsB,SAAS,CAAC,KAAK,CAAC,aAAP,CAA/B,GAAuD;MAAnE;IAF2B,CAAjB,CAZrB;IAgBL,MAAM,EAAE,sBAAsB,CAAC,KAAK,CAAC,MAAP,EAAe;MAC3C,QAAQ,EAAE,IADiC;MAE3C,YAAY,EAAE;QACZ,IAAI,EAAE,cADM;QAEZ,QAAQ,EAAE,CAAC,CAFC;QAGZ,IAAI,EAAE,QAHM;QAIZ,IAAI,QAAQ,IAAI;UACd,IAAI,EAAE,SADQ;UAEd,QAAQ,EAAE;QAFI,CAAhB;MAJY;IAF6B,CAAf,CAhBzB;IA4BL,QA5BK;IA6BL;EA7BK,CAAP;AA+BD,CAtCM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { useARIAButtonShorthand } from '@fluentui/react-aria';\n\nconst sortIcons = {\n ascending: <ArrowUpRegular fontSize={12} />,\n descending: <ArrowDownRegular fontSize={12} />,\n};\n\n/**\n * Create the state required to render TableHeaderCell.\n *\n * The returned state can be modified with hooks such as useTableHeaderCellStyles_unstable,\n * before being passed to renderTableHeaderCell_unstable.\n *\n * @param props - props from this instance of TableHeaderCell\n * @param ref - reference to root HTMLElement of TableHeaderCell\n */\nexport const useTableHeaderCell_unstable = (\n props: TableHeaderCellProps,\n ref: React.Ref<HTMLElement>,\n): TableHeaderCellState => {\n const { noNativeElements, sortable } = useTableContext();\n\n const rootComponent = props.as ?? noNativeElements ? 'div' : 'th';\n return {\n components: {\n root: rootComponent,\n button: 'button',\n sortIcon: 'span',\n },\n root: getNativeElementProps(rootComponent, {\n ref: useMergedRefs(ref, useFocusWithin()),\n role: rootComponent === 'div' ? 'columnheader' : undefined,\n 'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,\n ...props,\n }),\n sortIcon: resolveShorthand(props.sortIcon, {\n required: !!props.sortDirection,\n defaultProps: { children: props.sortDirection ? sortIcons[props.sortDirection] : undefined },\n }),\n button: useARIAButtonShorthand(props.button, {\n required: true,\n defaultProps: {\n role: 'presentation',\n tabIndex: -1,\n type: 'button',\n ...(sortable && {\n role: undefined,\n tabIndex: undefined,\n }),\n },\n }),\n sortable,\n noNativeElements,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
|
+
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
3
4
|
export const tableHeaderCellClassName = 'fui-TableHeaderCell';
|
|
4
5
|
export const tableHeaderCellClassNames = {
|
|
5
6
|
root: 'fui-TableHeaderCell',
|
|
@@ -37,7 +38,14 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
37
38
|
"z8tnut": "f1nbblvp",
|
|
38
39
|
"z189sj": ["f1vdfbxk", "f1f5gg8d"],
|
|
39
40
|
"Byoj8tv": "f1ov4xf1",
|
|
40
|
-
"uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
|
|
41
|
+
"uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
|
|
42
|
+
"B3nxjsc": "fhix6mv",
|
|
43
|
+
"Bmvh20x": "fha7anx",
|
|
44
|
+
"robkg1": "f1fmzww4",
|
|
45
|
+
"pehzd3": ["fs9qmxf", "f187m4uq"],
|
|
46
|
+
"B8osjzx": ["f187m4uq", "fs9qmxf"],
|
|
47
|
+
"u7xebq": ["f145mzao", "f1uha7eq"],
|
|
48
|
+
"Blsv9te": ["f1uha7eq", "f145mzao"]
|
|
41
49
|
},
|
|
42
50
|
"rootInteractive": {
|
|
43
51
|
"Jwef8y": "f1t94bn6",
|
|
@@ -75,7 +83,8 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
75
83
|
"Belr9w4": "f14sijuj",
|
|
76
84
|
"sshi5w": "f1nxs5xn",
|
|
77
85
|
"Bnnss6s": "f1neuvcm",
|
|
78
|
-
"xawz": "fkjuxzh"
|
|
86
|
+
"xawz": "fkjuxzh",
|
|
87
|
+
"oeaueh": "f1s6fcnf"
|
|
79
88
|
},
|
|
80
89
|
"sortable": {
|
|
81
90
|
"Bceei9c": "f1k6fduh"
|
|
@@ -86,7 +95,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
86
95
|
"z8tnut": "fclwglc"
|
|
87
96
|
}
|
|
88
97
|
}, {
|
|
89
|
-
"d": [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
|
|
98
|
+
"d": [".f1nbblvp{padding-top:0px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1ov4xf1{padding-bottom:0px;}", ".fhix6mv[data-fui-focus-within]:focus-within{outline-width:2px;}", ".fha7anx[data-fui-focus-within]:focus-within{outline-style:solid;}", ".f1fmzww4[data-fui-focus-within]:focus-within{outline-color:var(--colorStrokeFocus2);}", ".fs9qmxf[data-fui-focus-within]:focus-within{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f187m4uq[data-fui-focus-within]:focus-within{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f145mzao[data-fui-focus-within]:focus-within{border-top-right-radius:var(--borderRadiusMedium);}", ".f1uha7eq[data-fui-focus-within]:focus-within{border-top-left-radius:var(--borderRadiusMedium);}", ".fq6nmtn{resize:horizontal;}", ".f1e4lqlz{box-sizing:content-box;}", ".f1u2r49w{background-color:inherit;}", ".f1ym3bx4{color:inherit;}", ".f1mo0ibp{font-family:inherit;}", ".fjoy568{font-size:inherit;}", ".fytdu2e{line-height:normal;}", ".f1mtd64y{overflow-x:visible;}", ".f1y7q3j9{overflow-y:visible;}", ".f1g0x7ka{padding-top:0;}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f1qch9an{padding-bottom:0;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".f37px4s{-webkit-appearance:button;}", ".fgusgyc{text-align:unset;}", ".f10pi13n{position:relative;}", ".fly5x3f{width:100%;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1l02sjl{height:100%;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ufnopg{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}", ".f1nxs5xn{min-height:32px;}", ".f1neuvcm{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".fkjuxzh{-webkit-flex-basis:0px;-ms-flex-preferred-size:0px;flex-basis:0px;}", ".f1s6fcnf{outline-style:none;}", ".f1k6fduh{cursor:pointer;}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"],
|
|
90
99
|
"h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
|
|
91
100
|
"a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
|
|
92
101
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,SAAS,+BAAT,QAAgD,yBAAhD;AAGA,OAAO,MAAM,wBAAwB,GAAG,qBAAjC;AACP,OAAO,MAAM,yBAAyB,GAAyC;EAC7E,IAAI,EAAE,qBADuE;EAE7E,MAAM,EAAE,6BAFqE;EAG7E,QAAQ,EAAE;AAHmE,CAAxE;;AAMP,MAAM,oBAAoB,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAOA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAQA;;AAEG;;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAlB;AA0DA;;AAEG;;;AACH,OAAO,MAAM,iCAAiC,GAAI,KAAD,IAAsD;EACrG,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,yBAAyB,CAAC,IADO,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,eAHQ,EAIjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IAJpC,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;EAOA,KAAK,CAAC,MAAN,CAAa,SAAb,GAAyB,YAAY,CACnC,yBAAyB,CAAC,MADS,EAEnC,MAAM,CAAC,WAF4B,EAGnC,MAAM,CAAC,MAH4B,EAInC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAJU,EAKnC,KAAK,CAAC,MAAN,CAAa,SALsB,CAArC;;EAQA,IAAI,KAAK,CAAC,QAAV,EAAoB;IAClB,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CACrC,yBAAyB,CAAC,QADW,EAErC,MAAM,CAAC,QAF8B,EAGrC,KAAK,CAAC,QAAN,CAAe,SAHsB,CAAvC;EAKD;;EAED,OAAO,KAAP;AACD,CA9BM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell.types';\n\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames: SlotClassNames<TableHeaderCellSlots> = {\n root: 'fui-TableHeaderCell',\n button: 'fui-TableHeaderCell__button',\n sortIcon: 'fui-TableHeaderCell__sortIcon',\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n verticalAlign: 'middle',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n ...shorthands.flex(1, 1, '0px'),\n minWidth: '0px',\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n ...shorthands.padding('0px', tokens.spacingHorizontalS),\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n { selector: 'focus-within', enableOutline: true },\n ),\n },\n\n rootInteractive: {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n },\n },\n\n resetButton: {\n resize: 'horizontal',\n boxSizing: 'content-box',\n backgroundColor: 'inherit',\n color: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n lineHeight: 'normal',\n ...shorthands.overflow('visible'),\n ...shorthands.padding(0),\n ...shorthands.borderStyle('none'),\n WebkitAppearance: 'button',\n textAlign: 'unset',\n },\n button: {\n position: 'relative',\n width: '100%',\n display: 'flex',\n flexGrow: 1,\n height: '100%',\n alignItems: 'center',\n ...shorthands.gap(tokens.spacingHorizontalXS),\n minHeight: '32px',\n ...shorthands.flex(1, 1, '0px'),\n outlineStyle: 'none',\n },\n sortable: {\n cursor: 'pointer',\n },\n\n sortIcon: {\n display: 'flex',\n alignItems: 'center',\n paddingTop: tokens.spacingVerticalXXS,\n },\n});\n\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */\nexport const useTableHeaderCellStyles_unstable = (state: TableHeaderCellState): TableHeaderCellState => {\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableHeaderCellClassNames.root,\n styles.root,\n state.sortable && styles.rootInteractive,\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.root.className,\n );\n state.button.className = mergeClasses(\n tableHeaderCellClassNames.button,\n styles.resetButton,\n styles.button,\n state.sortable && styles.sortable,\n state.button.className,\n );\n\n if (state.sortIcon) {\n state.sortIcon.className = mergeClasses(\n tableHeaderCellClassNames.sortIcon,\n styles.sortIcon,\n state.sortIcon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -45,8 +45,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
45
45
|
"dm238s": ["f1witrsb", "fxmnebo"]
|
|
46
46
|
},
|
|
47
47
|
"noAppearanceFocusWithin": {
|
|
48
|
-
"Brovlpu": "ftqa4ok",
|
|
49
|
-
"B486eqv": "f2hkw1w",
|
|
50
48
|
"B5tto1x": "fgfzuaq",
|
|
51
49
|
"Bm5rygw": "f13cic75"
|
|
52
50
|
},
|
|
@@ -133,8 +131,6 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
133
131
|
"none": {}
|
|
134
132
|
}, {
|
|
135
133
|
"d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1jazu75[data-fui-focus-within]:focus-within .fui-TableSelectionCell{opacity:1;}", ".f1xeqee6[data-fui-focus-within]:focus-within .fui-TableCellActions{opacity:1;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".fgfzuaq[data-fui-focus-within]:focus-within .fui-TableCellActions{background-color:var(--colorSubtleBackgroundHover);}", ".f13cic75[data-fui-focus-within]:focus-within{background-color:var(--colorSubtleBackgroundHover);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
136
|
-
"f": [".ftqa4ok:focus{outline-style:none;}"],
|
|
137
|
-
"i": [".f2hkw1w:focus-visible{outline-style:none;}"],
|
|
138
134
|
"a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
139
135
|
"h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f14h8iit:hover .fui-TableCellActions{background-color:var(--colorSubtleBackgroundHover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}"],
|
|
140
136
|
"m": [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
|