@fluentui/react-table 9.3.0 → 9.4.1
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 +165 -1
- package/CHANGELOG.md +45 -2
- package/dist/index.d.ts +15 -1
- package/lib/components/DataGrid/DataGrid.types.js.map +1 -1
- package/lib/components/DataGrid/useDataGrid.js +3 -2
- package/lib/components/DataGrid/useDataGrid.js.map +1 -1
- package/lib/components/DataGridCell/DataGridCell.types.js.map +1 -1
- package/lib/components/DataGridCell/useDataGridCell.js +6 -0
- package/lib/components/DataGridCell/useDataGridCell.js.map +1 -1
- package/lib/components/TableHeaderCell/useTableHeaderCell.js +5 -7
- package/lib/components/TableHeaderCell/useTableHeaderCell.js.map +1 -1
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.styles.js +2 -1
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.styles.js.map +1 -1
- package/lib/components/TableRow/useTableRowStyles.styles.js +6 -8
- package/lib/components/TableRow/useTableRowStyles.styles.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/DataGrid/useDataGrid.js +3 -2
- package/lib-commonjs/components/DataGrid/useDataGrid.js.map +1 -1
- package/lib-commonjs/components/DataGridCell/useDataGridCell.js +6 -0
- package/lib-commonjs/components/DataGridCell/useDataGridCell.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js +5 -7
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCell.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.styles.js +2 -0
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TableRow/useTableRowStyles.styles.js +12 -11
- package/lib-commonjs/components/TableRow/useTableRowStyles.styles.js.map +1 -1
- package/lib-commonjs/index.js +1 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +15 -13
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,171 @@
|
|
|
2
2
|
"name": "@fluentui/react-table",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 26 Jun 2023 09:51:06 GMT",
|
|
6
|
+
"tag": "@fluentui/react-table_v9.4.1",
|
|
7
|
+
"version": "9.4.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-table",
|
|
13
|
+
"comment": "Bump @fluentui/react-aria to v9.3.24",
|
|
14
|
+
"commit": "025ea2c9c6fb2184e67505081a7a307e95c6c009"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-table",
|
|
19
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.7",
|
|
20
|
+
"commit": "025ea2c9c6fb2184e67505081a7a307e95c6c009"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-table",
|
|
25
|
+
"comment": "Bump @fluentui/react-checkbox to v9.1.19",
|
|
26
|
+
"commit": "025ea2c9c6fb2184e67505081a7a307e95c6c009"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-table",
|
|
31
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.24",
|
|
32
|
+
"commit": "025ea2c9c6fb2184e67505081a7a307e95c6c009"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-table",
|
|
37
|
+
"comment": "Bump @fluentui/react-radio to v9.1.19",
|
|
38
|
+
"commit": "025ea2c9c6fb2184e67505081a7a307e95c6c009"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-table",
|
|
43
|
+
"comment": "Bump @fluentui/react-tabster to v9.8.1",
|
|
44
|
+
"commit": "025ea2c9c6fb2184e67505081a7a307e95c6c009"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-table",
|
|
49
|
+
"comment": "Bump @fluentui/react-utilities to v9.9.4",
|
|
50
|
+
"commit": "025ea2c9c6fb2184e67505081a7a307e95c6c009"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"author": "beachball",
|
|
54
|
+
"package": "@fluentui/react-table",
|
|
55
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.8",
|
|
56
|
+
"commit": "025ea2c9c6fb2184e67505081a7a307e95c6c009"
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"date": "Tue, 20 Jun 2023 12:39:04 GMT",
|
|
63
|
+
"tag": "@fluentui/react-table_v9.4.0",
|
|
64
|
+
"version": "9.4.0",
|
|
65
|
+
"comments": {
|
|
66
|
+
"patch": [
|
|
67
|
+
{
|
|
68
|
+
"author": "miroslav.stastny@microsoft.com",
|
|
69
|
+
"package": "@fluentui/react-table",
|
|
70
|
+
"commit": "7516a6bde1bd7b8c957ca479ffcb0e737e9ca693",
|
|
71
|
+
"comment": "Update table styles to reflect token changes"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "lingfangao@hotmail.com",
|
|
75
|
+
"package": "@fluentui/react-table",
|
|
76
|
+
"commit": "93620cf72318e14967fcfc15b3debc96ce20b13e",
|
|
77
|
+
"comment": "fix: TableHeaderCell should not render button when not sortable"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"author": "ololubek@microsoft.com",
|
|
81
|
+
"package": "@fluentui/react-table",
|
|
82
|
+
"commit": "8a5ae3aa00faa327c58887a99a5698b18f2930ee",
|
|
83
|
+
"comment": "chore: update @fluentui/react-icons to 2.0.203"
|
|
84
|
+
}
|
|
85
|
+
],
|
|
86
|
+
"minor": [
|
|
87
|
+
{
|
|
88
|
+
"author": "jirivyhnalek@microsoft.com",
|
|
89
|
+
"package": "@fluentui/react-table",
|
|
90
|
+
"commit": "54316f1ded96bffa3505140ec68031afd0cebdb6",
|
|
91
|
+
"comment": "DataGrid now exposes containerWidthOffset prop, which is mainly used internally to adjust available space for column resizing based on other props"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"author": "lingfangao@hotmail.com",
|
|
95
|
+
"package": "@fluentui/react-table",
|
|
96
|
+
"commit": "d33397e28ac542798cfdc4a7b917f1d27db9ed63",
|
|
97
|
+
"comment": "feat: Implement `focusMode` for DataGridCell"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"author": "beachball",
|
|
101
|
+
"package": "@fluentui/react-table",
|
|
102
|
+
"comment": "Bump @fluentui/react-aria to v9.3.23",
|
|
103
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
"author": "beachball",
|
|
107
|
+
"package": "@fluentui/react-table",
|
|
108
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.6",
|
|
109
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"author": "beachball",
|
|
113
|
+
"package": "@fluentui/react-table",
|
|
114
|
+
"comment": "Bump @fluentui/react-checkbox to v9.1.18",
|
|
115
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"author": "beachball",
|
|
119
|
+
"package": "@fluentui/react-table",
|
|
120
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.23",
|
|
121
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
"author": "beachball",
|
|
125
|
+
"package": "@fluentui/react-table",
|
|
126
|
+
"comment": "Bump @fluentui/react-radio to v9.1.18",
|
|
127
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
"author": "beachball",
|
|
131
|
+
"package": "@fluentui/react-table",
|
|
132
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.5.1",
|
|
133
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"author": "beachball",
|
|
137
|
+
"package": "@fluentui/react-table",
|
|
138
|
+
"comment": "Bump @fluentui/react-tabster to v9.8.0",
|
|
139
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"author": "beachball",
|
|
143
|
+
"package": "@fluentui/react-table",
|
|
144
|
+
"comment": "Bump @fluentui/react-theme to v9.1.9",
|
|
145
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
"author": "beachball",
|
|
149
|
+
"package": "@fluentui/react-table",
|
|
150
|
+
"comment": "Bump @fluentui/react-utilities to v9.9.3",
|
|
151
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"author": "beachball",
|
|
155
|
+
"package": "@fluentui/react-table",
|
|
156
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.7",
|
|
157
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
"author": "beachball",
|
|
161
|
+
"package": "@fluentui/react-table",
|
|
162
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.23",
|
|
163
|
+
"commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
|
|
164
|
+
}
|
|
165
|
+
]
|
|
166
|
+
}
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
"date": "Wed, 31 May 2023 06:46:19 GMT",
|
|
6
170
|
"tag": "@fluentui/react-table_v9.3.0",
|
|
7
171
|
"version": "9.3.0",
|
|
8
172
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,55 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-table
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 26 Jun 2023 09:51:06 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.4.1)
|
|
8
|
+
|
|
9
|
+
Mon, 26 Jun 2023 09:51:06 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.4.0..@fluentui/react-table_v9.4.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-aria to v9.3.24 ([PR #28307](https://github.com/microsoft/fluentui/pull/28307) by beachball)
|
|
15
|
+
- Bump @fluentui/react-avatar to v9.5.7 ([PR #28307](https://github.com/microsoft/fluentui/pull/28307) by beachball)
|
|
16
|
+
- Bump @fluentui/react-checkbox to v9.1.19 ([PR #28307](https://github.com/microsoft/fluentui/pull/28307) by beachball)
|
|
17
|
+
- Bump @fluentui/react-context-selector to v9.1.24 ([PR #28307](https://github.com/microsoft/fluentui/pull/28307) by beachball)
|
|
18
|
+
- Bump @fluentui/react-radio to v9.1.19 ([PR #28307](https://github.com/microsoft/fluentui/pull/28307) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v9.8.1 ([PR #28307](https://github.com/microsoft/fluentui/pull/28307) by beachball)
|
|
20
|
+
- Bump @fluentui/react-utilities to v9.9.4 ([PR #28307](https://github.com/microsoft/fluentui/pull/28307) by beachball)
|
|
21
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.8 ([PR #28307](https://github.com/microsoft/fluentui/pull/28307) by beachball)
|
|
22
|
+
|
|
23
|
+
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.4.0)
|
|
24
|
+
|
|
25
|
+
Tue, 20 Jun 2023 12:39:04 GMT
|
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.3.0..@fluentui/react-table_v9.4.0)
|
|
27
|
+
|
|
28
|
+
### Minor changes
|
|
29
|
+
|
|
30
|
+
- DataGrid now exposes containerWidthOffset prop, which is mainly used internally to adjust available space for column resizing based on other props ([PR #27983](https://github.com/microsoft/fluentui/pull/27983) by jirivyhnalek@microsoft.com)
|
|
31
|
+
- feat: Implement `focusMode` for DataGridCell ([PR #28167](https://github.com/microsoft/fluentui/pull/28167) by lingfangao@hotmail.com)
|
|
32
|
+
- Bump @fluentui/react-aria to v9.3.23 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
33
|
+
- Bump @fluentui/react-avatar to v9.5.6 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
34
|
+
- Bump @fluentui/react-checkbox to v9.1.18 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
35
|
+
- Bump @fluentui/react-context-selector to v9.1.23 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
36
|
+
- Bump @fluentui/react-radio to v9.1.18 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
37
|
+
- Bump @fluentui/react-shared-contexts to v9.5.1 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
38
|
+
- Bump @fluentui/react-tabster to v9.8.0 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
39
|
+
- Bump @fluentui/react-theme to v9.1.9 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
40
|
+
- Bump @fluentui/react-utilities to v9.9.3 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
41
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.7 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
42
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.23 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
|
|
43
|
+
|
|
44
|
+
### Patches
|
|
45
|
+
|
|
46
|
+
- Update table styles to reflect token changes ([PR #27791](https://github.com/microsoft/fluentui/pull/27791) by miroslav.stastny@microsoft.com)
|
|
47
|
+
- fix: TableHeaderCell should not render button when not sortable ([PR #28097](https://github.com/microsoft/fluentui/pull/28097) by lingfangao@hotmail.com)
|
|
48
|
+
- chore: update @fluentui/react-icons to 2.0.203 ([PR #28203](https://github.com/microsoft/fluentui/pull/28203) by ololubek@microsoft.com)
|
|
49
|
+
|
|
7
50
|
## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.3.0)
|
|
8
51
|
|
|
9
|
-
Wed, 31 May 2023 06:
|
|
52
|
+
Wed, 31 May 2023 06:46:19 GMT
|
|
10
53
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.2.12..@fluentui/react-table_v9.3.0)
|
|
11
54
|
|
|
12
55
|
### Minor changes
|
package/dist/index.d.ts
CHANGED
|
@@ -85,7 +85,13 @@ export declare const dataGridCellClassNames: SlotClassNames<DataGridCellSlots>;
|
|
|
85
85
|
/**
|
|
86
86
|
* DataGridCell Props
|
|
87
87
|
*/
|
|
88
|
-
export declare type DataGridCellProps = TableCellProps
|
|
88
|
+
export declare type DataGridCellProps = TableCellProps & {
|
|
89
|
+
/**
|
|
90
|
+
* Used when there are nested focusble elements inside a focusable cell
|
|
91
|
+
* - `group`: Enter keypress moves focus inside the cell, focus is trapped inside the cell until Escape keypress
|
|
92
|
+
*/
|
|
93
|
+
focusMode?: 'group';
|
|
94
|
+
};
|
|
89
95
|
|
|
90
96
|
export declare type DataGridCellSlots = TableCellSlots;
|
|
91
97
|
|
|
@@ -189,6 +195,12 @@ export declare type DataGridProps = TableProps & Pick<DataGridContextValue, 'ite
|
|
|
189
195
|
columnId: TableColumnId;
|
|
190
196
|
width: number;
|
|
191
197
|
}) => void;
|
|
198
|
+
/**
|
|
199
|
+
* For column resizing. Allows for a container size to be adjusted by a number of pixels, to make
|
|
200
|
+
* sure the columns don't overflow the table.
|
|
201
|
+
* By default, this value is calculated internally based on other props, but can be overriden.
|
|
202
|
+
*/
|
|
203
|
+
containerWidthOffset?: number;
|
|
192
204
|
};
|
|
193
205
|
|
|
194
206
|
/**
|
|
@@ -359,6 +371,8 @@ declare interface SortState {
|
|
|
359
371
|
*/
|
|
360
372
|
export declare const Table: ForwardRefComponent<TableProps>;
|
|
361
373
|
|
|
374
|
+
export declare const TABLE_SELECTION_CELL_WIDTH = 44;
|
|
375
|
+
|
|
362
376
|
/**
|
|
363
377
|
* TableBody component
|
|
364
378
|
*/
|
|
@@ -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 SelectionMode,\n UseTableSelectionOptions,\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';\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\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<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 * 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\n/**\n * State used in rendering DataGrid\n */\nexport type DataGridState = TableState & { tableState: TableFeaturesState<unknown> } & Pick<\n DataGridContextValue,\n 'focusMode' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'\n >;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
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 SelectionMode,\n UseTableSelectionOptions,\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';\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\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<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 * 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' | 'selectableRows' | 'subtleSelection' | 'selectionAppearance' | 'getRowId' | 'resizableColumns'\n >;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
|
@@ -14,7 +14,8 @@ import { End, Home } from '@fluentui/keyboard-keys';
|
|
|
14
14
|
* @param props - props from this instance of DataGrid
|
|
15
15
|
* @param ref - reference to root HTMLElement of DataGrid
|
|
16
16
|
*/ export const useDataGrid_unstable = (props, ref)=>{
|
|
17
|
-
const { items , columns , focusMode ='cell' , selectionMode , onSortChange , onSelectionChange , defaultSortState , sortState , selectedItems , defaultSelectedItems , subtleSelection =false , selectionAppearance ='brand' , getRowId , resizableColumns , columnSizingOptions , onColumnResize } = props;
|
|
17
|
+
const { items , columns , focusMode ='cell' , selectionMode , onSortChange , onSelectionChange , defaultSortState , sortState , selectedItems , defaultSelectedItems , subtleSelection =false , selectionAppearance ='brand' , getRowId , resizableColumns , columnSizingOptions , onColumnResize , containerWidthOffset } = props;
|
|
18
|
+
const widthOffset = containerWidthOffset !== null && containerWidthOffset !== void 0 ? containerWidthOffset : selectionMode ? -CELL_WIDTH : 0;
|
|
18
19
|
const navigable = focusMode !== 'none';
|
|
19
20
|
const keyboardNavAttr = useArrowNavigationGroup({
|
|
20
21
|
axis: 'grid'
|
|
@@ -40,7 +41,7 @@ import { End, Home } from '@fluentui/keyboard-keys';
|
|
|
40
41
|
columnSizingOptions,
|
|
41
42
|
// The selection cell is not part of the columns, therefore its width needs to be subtracted
|
|
42
43
|
// from the container to make sure the columns don't overflow the table.
|
|
43
|
-
containerWidthOffset:
|
|
44
|
+
containerWidthOffset: widthOffset
|
|
44
45
|
})
|
|
45
46
|
]);
|
|
46
47
|
const innerRef = React.useRef(null);
|
|
@@ -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 { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable } from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\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 } = props;\n\n const navigable = focusMode !== 'none';\n const keyboardNavAttr = useArrowNavigationGroup({\n axis: 'grid',\n });\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:
|
|
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 { useTableFeatures, useTableSort, useTableSelection, useTableColumnSizing_unstable } from '../../hooks';\nimport { CELL_WIDTH } from '../TableSelectionCell';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { End, Home } from '@fluentui/keyboard-keys';\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 navigable = focusMode !== 'none';\n const keyboardNavAttr = useArrowNavigationGroup({\n axis: 'grid',\n });\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 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 ...(navigable && keyboardNavAttr),\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 };\n};\n"],"names":["React","useArrowNavigationGroup","useFocusFinders","useTable_unstable","useTableFeatures","useTableSort","useTableSelection","useTableColumnSizing_unstable","CELL_WIDTH","useEventCallback","useMergedRefs","End","Home","useDataGrid_unstable","props","ref","items","columns","focusMode","selectionMode","onSortChange","onSelectionChange","defaultSortState","sortState","selectedItems","defaultSelectedItems","subtleSelection","selectionAppearance","getRowId","resizableColumns","columnSizingOptions","onColumnResize","containerWidthOffset","widthOffset","navigable","keyboardNavAttr","axis","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,YAAY,EAAEC,iBAAiB,EAAEC,6BAA6B,QAAQ,cAAc;AAC/G,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AAC5E,SAASC,GAAG,EAAEC,IAAI,QAAQ,0BAA0B;AAEpD;;;;;;;;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,CAACX,aAAa,CAAC,AAAC;IAE7E,MAAM0B,YAAYhB,cAAc;IAChC,MAAMiB,kBAAkBlC,wBAAwB;QAC9CmC,MAAM;IACR;IAEA,MAAMC,aAAajC,iBAAiB;QAAEY;QAAOC;QAASW;IAAS,GAAG;QAChEvB,aAAa;YACXiB;YACAC;YACAH;QACF;QACAd,kBAAkB;YAChBmB;YACAD;YACAH;YACAF,eAAeA,0BAAAA,2BAAAA,gBAAiB,aAAa;QAC/C;QACAZ,8BAA8B;YAC5BwB;YACAD;YACA,4FAA4F;YAC5F,wEAAwE;YACxEE,sBAAsBC;QACxB;KACD;IAED,MAAMK,WAAWtC,MAAMuC,MAAM,CAAiB,IAAI;IAClD,MAAM,EAAEC,mBAAkB,EAAEC,kBAAiB,EAAE,GAAGvC;IAClD,MAAMwC,YAAYjC,iBAAiB,CAACkC,IAA6C;YAC/E7B;QAAAA,CAAAA,mBAAAA,MAAM4B,SAAS,cAAf5B,8BAAAA,KAAAA,IAAAA,iBAAAA,KAAAA,OAAkB6B;QAClB,IAAI,CAACL,SAASM,OAAO,IAAI,CAACD,EAAEE,OAAO,IAAIF,EAAEG,gBAAgB,EAAE;YACzD;QACF,CAAC;QAED,IAAIH,EAAEI,GAAG,KAAKnC,MAAM;YAClB,MAAMoC,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,KAAKpC,KAAK;YACjB,MAAMwC,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,iBAAiBrD,kBACrB;QACEsD,MAAM;QACNC,IAAI;QACJC,kBAAkB,IAAI;QACtB,GAAIzB,aAAaC,eAAe;QAChC,GAAGrB,KAAK;QACR4B;IACF,GACAhC,cAAcK,KAAKsB,WAAWuB,QAAQ,EAAEtB;IAG1C,OAAO;QACL,GAAGkB,cAAc;QACjBtC;QACAmB;QACAwB,gBAAgB,CAAC,CAAC1C;QAClBO;QACAC;QACAE;IACF;AACF,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DataGridCell.types.ts"],"sourcesContent":["import { TableCellProps, TableCellSlots, TableCellState } from '../TableCell/TableCell.types';\n\nexport type DataGridCellSlots = TableCellSlots;\n\n/**\n * DataGridCell Props\n */\nexport type DataGridCellProps = TableCellProps;\n\n/**\n * State used in rendering DataGridCell\n */\nexport type DataGridCellState = TableCellState;\n"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["DataGridCell.types.ts"],"sourcesContent":["import { TableCellProps, TableCellSlots, TableCellState } from '../TableCell/TableCell.types';\n\nexport type DataGridCellSlots = TableCellSlots;\n\n/**\n * DataGridCell Props\n */\nexport type DataGridCellProps = TableCellProps & {\n /**\n * Used when there are nested focusble elements inside a focusable cell\n * - `group`: Enter keypress moves focus inside the cell, focus is trapped inside the cell until Escape keypress\n */\n focusMode?: 'group';\n};\n\n/**\n * State used in rendering DataGridCell\n */\nexport type DataGridCellState = TableCellState;\n"],"names":[],"mappings":"AAAA,WAkB+C"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { useFocusableGroup } from '@fluentui/react-tabster';
|
|
2
3
|
import { useTableCell_unstable } from '../TableCell/useTableCell';
|
|
3
4
|
import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
|
|
4
5
|
import { useColumnIdContext } from '../../contexts/columnIdContext';
|
|
@@ -11,13 +12,18 @@ import { useColumnIdContext } from '../../contexts/columnIdContext';
|
|
|
11
12
|
* @param props - props from this instance of DataGridCell
|
|
12
13
|
* @param ref - reference to root HTMLElement of DataGridCell
|
|
13
14
|
*/ export const useDataGridCell_unstable = (props, ref)=>{
|
|
15
|
+
const { focusMode } = props;
|
|
14
16
|
const columnId = useColumnIdContext();
|
|
15
17
|
const tabbable = useDataGridContext_unstable((ctx)=>ctx.focusMode === 'cell');
|
|
16
18
|
const resizableColumns = useDataGridContext_unstable((ctx)=>ctx.resizableColumns);
|
|
17
19
|
const columnSizing = useDataGridContext_unstable((ctx)=>ctx.columnSizing_unstable);
|
|
20
|
+
const focusableGroupAttr = useFocusableGroup({
|
|
21
|
+
tabBehavior: 'limited-trap-focus'
|
|
22
|
+
});
|
|
18
23
|
return useTableCell_unstable({
|
|
19
24
|
as: 'div',
|
|
20
25
|
role: 'gridcell',
|
|
26
|
+
...focusMode && focusableGroupAttr,
|
|
21
27
|
tabIndex: tabbable ? 0 : undefined,
|
|
22
28
|
...resizableColumns ? columnSizing.getTableCellProps(columnId) : {},
|
|
23
29
|
...props
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDataGridCell.ts"],"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';\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 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 return useTableCell_unstable(\n {\n as: 'div',\n role: 'gridcell',\n tabIndex: tabbable ? 0 : undefined,\n ...(resizableColumns ? columnSizing.getTableCellProps(columnId) : {}),\n ...props,\n },\n ref,\n );\n};\n"],"names":["React","useTableCell_unstable","useDataGridContext_unstable","useColumnIdContext","useDataGridCell_unstable","props","ref","columnId","tabbable","ctx","
|
|
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;IACtE,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"}
|
|
@@ -2,8 +2,8 @@ import * as React from 'react';
|
|
|
2
2
|
import { getNativeElementProps, resolveShorthand, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
3
|
import { useFocusWithin } from '@fluentui/react-tabster';
|
|
4
4
|
import { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';
|
|
5
|
-
import { useTableContext } from '../../contexts/tableContext';
|
|
6
5
|
import { useARIAButtonShorthand } from '@fluentui/react-aria';
|
|
6
|
+
import { useTableContext } from '../../contexts/tableContext';
|
|
7
7
|
const sortIcons = {
|
|
8
8
|
ascending: /*#__PURE__*/ React.createElement(ArrowUpRegular, {
|
|
9
9
|
fontSize: 12
|
|
@@ -28,7 +28,7 @@ const sortIcons = {
|
|
|
28
28
|
return {
|
|
29
29
|
components: {
|
|
30
30
|
root: rootComponent,
|
|
31
|
-
button: '
|
|
31
|
+
button: 'div',
|
|
32
32
|
sortIcon: 'span',
|
|
33
33
|
aside: 'span'
|
|
34
34
|
},
|
|
@@ -48,11 +48,9 @@ const sortIcons = {
|
|
|
48
48
|
button: useARIAButtonShorthand(props.button, {
|
|
49
49
|
required: true,
|
|
50
50
|
defaultProps: {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
...sortable && {
|
|
55
|
-
role: undefined,
|
|
51
|
+
as: 'div',
|
|
52
|
+
...!sortable && {
|
|
53
|
+
role: 'presentation',
|
|
56
54
|
tabIndex: undefined
|
|
57
55
|
}
|
|
58
56
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableHeaderCell.tsx"],"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';\
|
|
1
|
+
{"version":3,"sources":["useTableHeaderCell.tsx"],"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 { useARIAButtonShorthand } from '@fluentui/react-aria';\nimport type { TableHeaderCellProps, TableHeaderCellState } from './TableHeaderCell.types';\nimport { useTableContext } from '../../contexts/tableContext';\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\n return {\n components: {\n root: rootComponent,\n button: 'div',\n sortIcon: 'span',\n aside: '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 aside: resolveShorthand(props.aside),\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 as: 'div',\n ...(!sortable && {\n role: 'presentation',\n tabIndex: undefined,\n }),\n },\n }),\n sortable,\n noNativeElements,\n };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useMergedRefs","useFocusWithin","ArrowUpRegular","ArrowDownRegular","useARIAButtonShorthand","useTableContext","sortIcons","ascending","fontSize","descending","useTableHeaderCell_unstable","props","ref","noNativeElements","sortable","rootComponent","as","components","root","button","sortIcon","aside","role","undefined","sortDirection","required","defaultProps","children","tabIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,aAAa,QAAQ,4BAA4B;AACnG,SAASC,cAAc,QAAQ,0BAA0B;AACzD,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,wBAAwB;AACzE,SAASC,sBAAsB,QAAQ,uBAAuB;AAE9D,SAASC,eAAe,QAAQ,8BAA8B;AAE9D,MAAMC,YAAY;IAChBC,yBAAW,oBAACL;QAAeM,UAAU;;IACrCC,0BAAY,oBAACN;QAAiBK,UAAU;;AAC1C;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAME,8BAA8B,CACzCC,OACAC,MACyB;IACzB,MAAM,EAAEC,iBAAgB,EAAEC,SAAQ,EAAE,GAAGT;QAEjBM;IAAtB,MAAMI,gBAAgBJ,CAAAA,CAAAA,YAAAA,MAAMK,EAAE,cAARL,uBAAAA,YAAYE,gBAAgB,AAAD,IAAI,QAAQ,IAAI;QAYrCF;IAV5B,OAAO;QACLM,YAAY;YACVC,MAAMH;YACNI,QAAQ;YACRC,UAAU;YACVC,OAAO;QACT;QACAH,MAAMpB,sBAAsBiB,eAAe;YACzCH,KAAKZ,cAAcY,KAAKX;YACxBqB,MAAMP,kBAAkB,QAAQ,iBAAiBQ,SAAS;YAC1D,aAAaT,WAAWH,CAAAA,uBAAAA,MAAMa,aAAa,cAAnBb,kCAAAA,uBAAuB,MAAM,GAAGY,SAAS;YACjE,GAAGZ,KAAK;QACV;QACAU,OAAOtB,iBAAiBY,MAAMU,KAAK;QACnCD,UAAUrB,iBAAiBY,MAAMS,QAAQ,EAAE;YACzCK,UAAU,CAAC,CAACd,MAAMa,aAAa;YAC/BE,cAAc;gBAAEC,UAAUhB,MAAMa,aAAa,GAAGlB,SAAS,CAACK,MAAMa,aAAa,CAAC,GAAGD,SAAS;YAAC;QAC7F;QACAJ,QAAQf,uBAAuBO,MAAMQ,MAAM,EAAE;YAC3CM,UAAU,IAAI;YACdC,cAAc;gBACZV,IAAI;gBACJ,GAAI,CAACF,YAAY;oBACfQ,MAAM;oBACNM,UAAUL;gBACZ,CAAC;YACH;QACF;QACAT;QACAD;IACF;AACF,EAAE"}
|
|
@@ -33,6 +33,7 @@ const useFlexLayoutStyles = /*#__PURE__*/__styles({
|
|
|
33
33
|
*/
|
|
34
34
|
const useStyles = /*#__PURE__*/__styles({
|
|
35
35
|
root: {
|
|
36
|
+
Bhrd7zp: "figsok6",
|
|
36
37
|
z8tnut: "f1nbblvp",
|
|
37
38
|
z189sj: ["f1vdfbxk", "f1f5gg8d"],
|
|
38
39
|
Byoj8tv: "f1ov4xf1",
|
|
@@ -102,7 +103,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
102
103
|
},
|
|
103
104
|
resizeHandle: {}
|
|
104
105
|
}, {
|
|
105
|
-
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);}", ".f10pi13n{position:relative;}", ".f1bwmy6q[data-keyboard-resizing]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f156ixcz[data-keyboard-resizing]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fsy9rq9[data-keyboard-resizing]{border-top-right-radius:var(--borderRadiusMedium);}", ".fl6c5zn[data-keyboard-resizing]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1tpyba1[data-keyboard-resizing]{outline-width:var(--strokeWidthThick);}", ".f1pnds93[data-keyboard-resizing]{outline-style:solid;}", ".fa5446a[data-keyboard-resizing]{outline-color:var(--colorStrokeFocus2);}", ".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;}", ".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);}"],
|
|
106
|
+
d: [".figsok6{font-weight:var(--fontWeightRegular);}", ".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);}", ".f10pi13n{position:relative;}", ".f1bwmy6q[data-keyboard-resizing]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f156ixcz[data-keyboard-resizing]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fsy9rq9[data-keyboard-resizing]{border-top-right-radius:var(--borderRadiusMedium);}", ".fl6c5zn[data-keyboard-resizing]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1tpyba1[data-keyboard-resizing]{outline-width:var(--strokeWidthThick);}", ".f1pnds93[data-keyboard-resizing]{outline-style:solid;}", ".fa5446a[data-keyboard-resizing]{outline-color:var(--colorStrokeFocus2);}", ".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;}", ".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);}"],
|
|
106
107
|
h: [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
|
|
107
108
|
a: [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
|
|
108
109
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","KeyboardResizingCurrentColumnDataAttribute","tableHeaderCellClassName","tableHeaderCellClassNames","root","button","sortIcon","aside","useTableLayoutStyles","mc9l5x","ha4doy","d","useFlexLayoutStyles","Bh6795r","Bnnss6s","xawz","Bf4jedk","useStyles","z8tnut","z189sj","Byoj8tv","uwmqm3","B3nxjsc","Bmvh20x","robkg1","pehzd3","B8osjzx","u7xebq","Blsv9te","qhf8xq","Ba2hzls","Bhwr9k8","Bb54w5r","bgd754","Boazqr3","Blqj7q0","xlw1ys","rootInteractive","Jwef8y","ecr2s2","resetButton","B3rzk8w","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","icvyot","vrafjx","oivjwe","wvpqe5","Bv0vk6g","fsow6f","a9b677","Bqenvij","Bt984gj","i8kkvl","Belr9w4","sshi5w","oeaueh","sortable","Bceei9c","resizeHandle","h","a","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements"],"sources":["useTableHeaderCellStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { KeyboardResizingCurrentColumnDataAttribute } from '../../hooks/useTableColumnSizing';\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames = {\n root: 'fui-TableHeaderCell',\n button: 'fui-TableHeaderCell__button',\n sortIcon: 'fui-TableHeaderCell__sortIcon',\n aside: 'fui-TableHeaderCell__aside'\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n verticalAlign: 'middle'\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n ...shorthands.flex(1, 1, '0px'),\n minWidth: '0px'\n }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n ...shorthands.padding('0px', tokens.spacingHorizontalS),\n ...createCustomFocusIndicatorStyle({\n ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n ...shorthands.borderRadius(tokens.borderRadiusMedium)\n }, {\n selector: 'focus-within'\n }),\n position: 'relative',\n [`[${KeyboardResizingCurrentColumnDataAttribute}]`]: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)\n }\n },\n rootInteractive: {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed\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 sortIcon: {\n display: 'flex',\n alignItems: 'center',\n paddingTop: tokens.spacingVerticalXXS\n },\n resizeHandle: {}\n});\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */ export const useTableHeaderCellStyles_unstable = (state)=>{\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n state.button.className = mergeClasses(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);\n if (state.sortIcon) {\n state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);\n }\n if (state.aside) {\n state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,0CAA0C,QAAQ,kCAAkC;AAC7F,OAAO,MAAMC,wBAAwB,GAAG,qBAAqB;AAC7D,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,MAAM,EAAE,6BAA6B;EACrCC,QAAQ,EAAE,+BAA+B;EACzCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,gBAAGZ,QAAA;EAAAQ,IAAA;IAAAK,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAK5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGhB,QAAA;EAAAQ,IAAA;IAAAK,MAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAM3B,CAAC;AACF;AACA;AACA;AAAI,MAAMM,SAAS,gBAAGrB,QAAA;EAAAQ,IAAA;IAAAc,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,WAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAA/B,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA6B,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","KeyboardResizingCurrentColumnDataAttribute","tableHeaderCellClassName","tableHeaderCellClassNames","root","button","sortIcon","aside","useTableLayoutStyles","mc9l5x","ha4doy","d","useFlexLayoutStyles","Bh6795r","Bnnss6s","xawz","Bf4jedk","useStyles","Bhrd7zp","z8tnut","z189sj","Byoj8tv","uwmqm3","B3nxjsc","Bmvh20x","robkg1","pehzd3","B8osjzx","u7xebq","Blsv9te","qhf8xq","Ba2hzls","Bhwr9k8","Bb54w5r","bgd754","Boazqr3","Blqj7q0","xlw1ys","rootInteractive","Jwef8y","ecr2s2","resetButton","B3rzk8w","B7ck84d","De3pzq","sj55zd","Bahqtrf","Be2twd7","Bg96gwp","B68tc82","Bmxbyg5","icvyot","vrafjx","oivjwe","wvpqe5","Bv0vk6g","fsow6f","a9b677","Bqenvij","Bt984gj","i8kkvl","Belr9w4","sshi5w","oeaueh","sortable","Bceei9c","resizeHandle","h","a","useTableHeaderCellStyles_unstable","state","styles","layoutStyles","table","flex","className","noNativeElements"],"sources":["useTableHeaderCellStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { KeyboardResizingCurrentColumnDataAttribute } from '../../hooks/useTableColumnSizing';\nexport const tableHeaderCellClassName = 'fui-TableHeaderCell';\nexport const tableHeaderCellClassNames = {\n root: 'fui-TableHeaderCell',\n button: 'fui-TableHeaderCell__button',\n sortIcon: 'fui-TableHeaderCell__sortIcon',\n aside: 'fui-TableHeaderCell__aside'\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-cell',\n verticalAlign: 'middle'\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n ...shorthands.flex(1, 1, '0px'),\n minWidth: '0px'\n }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n fontWeight: tokens.fontWeightRegular,\n ...shorthands.padding('0px', tokens.spacingHorizontalS),\n ...createCustomFocusIndicatorStyle({\n ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n ...shorthands.borderRadius(tokens.borderRadiusMedium)\n }, {\n selector: 'focus-within'\n }),\n position: 'relative',\n [`[${KeyboardResizingCurrentColumnDataAttribute}]`]: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2)\n }\n },\n rootInteractive: {\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed\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 sortIcon: {\n display: 'flex',\n alignItems: 'center',\n paddingTop: tokens.spacingVerticalXXS\n },\n resizeHandle: {}\n});\n/**\n * Apply styling to the TableHeaderCell slots based on the state\n */ export const useTableHeaderCellStyles_unstable = (state)=>{\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n state.root.className = mergeClasses(tableHeaderCellClassNames.root, styles.root, state.sortable && styles.rootInteractive, state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, state.root.className);\n state.button.className = mergeClasses(tableHeaderCellClassNames.button, styles.resetButton, styles.button, state.sortable && styles.sortable, state.button.className);\n if (state.sortIcon) {\n state.sortIcon.className = mergeClasses(tableHeaderCellClassNames.sortIcon, styles.sortIcon, state.sortIcon.className);\n }\n if (state.aside) {\n state.aside.className = mergeClasses(tableHeaderCellClassNames.aside, styles.resizeHandle, state.aside.className);\n }\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,0CAA0C,QAAQ,kCAAkC;AAC7F,OAAO,MAAMC,wBAAwB,GAAG,qBAAqB;AAC7D,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE,qBAAqB;EAC3BC,MAAM,EAAE,6BAA6B;EACrCC,QAAQ,EAAE,+BAA+B;EACzCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,gBAAGZ,QAAA;EAAAQ,IAAA;IAAAK,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAK5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGhB,QAAA;EAAAQ,IAAA;IAAAK,MAAA;IAAAI,OAAA;IAAAC,OAAA;IAAAC,IAAA;IAAAC,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAM3B,CAAC;AACF;AACA;AACA;AAAI,MAAMM,SAAS,gBAAGrB,QAAA;EAAAQ,IAAA;IAAAc,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,WAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAA/B,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA6B,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAnD,MAAA;IAAAyB,MAAA;IAAA2B,MAAA;IAAAhD,MAAA;IAAAI,OAAA;IAAA6C,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAhD,OAAA;IAAAC,IAAA;IAAAgD,MAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;EAAA;EAAA3D,QAAA;IAAAG,MAAA;IAAAkD,OAAA;IAAAxC,MAAA;EAAA;EAAA+C,YAAA;AAAA;EAAAvD,CAAA;EAAAwD,CAAA;EAAAC,CAAA;AAAA,CA2DrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,MAAMC,MAAM,GAAGtD,SAAS,CAAC,CAAC;EAC1B,MAAMuD,YAAY,GAAG;IACjBC,KAAK,EAAEjE,oBAAoB,CAAC,CAAC;IAC7BkE,IAAI,EAAE9D,mBAAmB,CAAC;EAC9B,CAAC;EACD0D,KAAK,CAAClE,IAAI,CAACuE,SAAS,GAAG9E,YAAY,CAACM,yBAAyB,CAACC,IAAI,EAAEmE,MAAM,CAACnE,IAAI,EAAEkE,KAAK,CAACN,QAAQ,IAAIO,MAAM,CAACjC,eAAe,EAAEgC,KAAK,CAACM,gBAAgB,GAAGJ,YAAY,CAACE,IAAI,CAACtE,IAAI,GAAGoE,YAAY,CAACC,KAAK,CAACrE,IAAI,EAAEkE,KAAK,CAAClE,IAAI,CAACuE,SAAS,CAAC;EAC3NL,KAAK,CAACjE,MAAM,CAACsE,SAAS,GAAG9E,YAAY,CAACM,yBAAyB,CAACE,MAAM,EAAEkE,MAAM,CAAC9B,WAAW,EAAE8B,MAAM,CAAClE,MAAM,EAAEiE,KAAK,CAACN,QAAQ,IAAIO,MAAM,CAACP,QAAQ,EAAEM,KAAK,CAACjE,MAAM,CAACsE,SAAS,CAAC;EACrK,IAAIL,KAAK,CAAChE,QAAQ,EAAE;IAChBgE,KAAK,CAAChE,QAAQ,CAACqE,SAAS,GAAG9E,YAAY,CAACM,yBAAyB,CAACG,QAAQ,EAAEiE,MAAM,CAACjE,QAAQ,EAAEgE,KAAK,CAAChE,QAAQ,CAACqE,SAAS,CAAC;EAC1H;EACA,IAAIL,KAAK,CAAC/D,KAAK,EAAE;IACb+D,KAAK,CAAC/D,KAAK,CAACoE,SAAS,GAAG9E,YAAY,CAACM,yBAAyB,CAACI,KAAK,EAAEgE,MAAM,CAACL,YAAY,EAAEI,KAAK,CAAC/D,KAAK,CAACoE,SAAS,CAAC;EACrH;EACA,OAAOL,KAAK;AAChB,CAAC"}
|
|
@@ -67,12 +67,10 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
67
67
|
},
|
|
68
68
|
brand: {
|
|
69
69
|
De3pzq: "f16xkysk",
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
zhjwy3: ["f11o2r7f", "frttxa5"],
|
|
75
|
-
Jwef8y: "f121v1wq",
|
|
70
|
+
g2u3we: "f1bh3yvw",
|
|
71
|
+
h3c5rm: ["fmi79ni", "f11fozsx"],
|
|
72
|
+
B9xav0g: "fnzw4c6",
|
|
73
|
+
zhjwy3: ["f11fozsx", "fmi79ni"],
|
|
76
74
|
ecr2s2: "ftepret",
|
|
77
75
|
gwxt9v: "fqlf3fd",
|
|
78
76
|
v3aym: ["f9dpb3h", "fw2muls"],
|
|
@@ -123,9 +121,9 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
123
121
|
},
|
|
124
122
|
none: {}
|
|
125
123
|
}, {
|
|
126
|
-
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);}", ".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);}", ".
|
|
124
|
+
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);}", ".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);}", ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".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);}"],
|
|
127
125
|
a: [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
128
|
-
h: [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".
|
|
126
|
+
h: [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
129
127
|
m: [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
|
|
130
128
|
m: "(forced-colors: active)"
|
|
131
129
|
}], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
|