@fluentui/react-table 9.6.0 → 9.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +116 -1
- package/CHANGELOG.md +33 -2
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.styles.js +2 -10
- package/lib/components/TableHeaderCell/useTableHeaderCellStyles.styles.js.map +1 -1
- package/lib/components/TableResizeHandle/useTableResizeHandleStyles.styles.js +3 -0
- package/lib/components/TableResizeHandle/useTableResizeHandleStyles.styles.js.map +1 -1
- package/lib/hooks/useKeyboardResizing.js +60 -37
- package/lib/hooks/useKeyboardResizing.js.map +1 -1
- package/lib/hooks/useTableColumnSizing.js +4 -7
- package/lib/hooks/useTableColumnSizing.js.map +1 -1
- package/lib/hooks/useTableSelection.js +51 -2
- package/lib/hooks/useTableSelection.js.map +1 -1
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.styles.js +1 -27
- package/lib-commonjs/components/TableHeaderCell/useTableHeaderCellStyles.styles.js.map +1 -1
- package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.styles.js +6 -0
- package/lib-commonjs/components/TableResizeHandle/useTableResizeHandleStyles.styles.js.map +1 -1
- package/lib-commonjs/hooks/useKeyboardResizing.js +58 -37
- package/lib-commonjs/hooks/useKeyboardResizing.js.map +1 -1
- package/lib-commonjs/hooks/useTableColumnSizing.js +4 -8
- package/lib-commonjs/hooks/useTableColumnSizing.js.map +1 -1
- package/lib-commonjs/hooks/useTableSelection.js +52 -2
- package/lib-commonjs/hooks/useTableSelection.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,122 @@
|
|
|
2
2
|
"name": "@fluentui/react-table",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Tue,
|
|
5
|
+
"date": "Tue, 25 Jul 2023 13:26:24 GMT",
|
|
6
|
+
"tag": "@fluentui/react-table_v9.7.0",
|
|
7
|
+
"version": "9.7.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"minor": [
|
|
10
|
+
{
|
|
11
|
+
"author": "jirivyhnalek@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-table",
|
|
13
|
+
"commit": "39cf021c60171b8e56a64637ef046478c686d625",
|
|
14
|
+
"comment": "Table/DataGrid: Improve keyboard column resizing experience"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-table",
|
|
19
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.14",
|
|
20
|
+
"commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-table",
|
|
25
|
+
"comment": "Bump @fluentui/react-checkbox to v9.1.26",
|
|
26
|
+
"commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-table",
|
|
31
|
+
"comment": "Bump @fluentui/react-radio to v9.1.26",
|
|
32
|
+
"commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-table",
|
|
37
|
+
"comment": "Bump @fluentui/react-tabster to v9.11.0",
|
|
38
|
+
"commit": "c0c62f9383781f0dbebd800eaa2c64ef761075a2"
|
|
39
|
+
}
|
|
40
|
+
],
|
|
41
|
+
"patch": [
|
|
42
|
+
{
|
|
43
|
+
"author": "lingfan.gao@microsoft.com",
|
|
44
|
+
"package": "@fluentui/react-table",
|
|
45
|
+
"commit": "038d8f703f43ea290412001c94179ee5d1dac4d2",
|
|
46
|
+
"comment": "28456"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"author": "ololubek@microsoft.com",
|
|
50
|
+
"package": "@fluentui/react-table",
|
|
51
|
+
"commit": "1082207b08959996cd736725735cadc01d0849b0",
|
|
52
|
+
"comment": "chore: Update react-icons version to pick up fowardref change."
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"date": "Thu, 20 Jul 2023 18:27:34 GMT",
|
|
59
|
+
"tag": "@fluentui/react-table_v9.6.1",
|
|
60
|
+
"version": "9.6.1",
|
|
61
|
+
"comments": {
|
|
62
|
+
"none": [
|
|
63
|
+
{
|
|
64
|
+
"author": "olfedias@microsoft.com",
|
|
65
|
+
"package": "@fluentui/react-table",
|
|
66
|
+
"commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6",
|
|
67
|
+
"comment": "chore: migrate to monosize"
|
|
68
|
+
}
|
|
69
|
+
],
|
|
70
|
+
"patch": [
|
|
71
|
+
{
|
|
72
|
+
"author": "beachball",
|
|
73
|
+
"package": "@fluentui/react-table",
|
|
74
|
+
"comment": "Bump @fluentui/react-aria to v9.3.27",
|
|
75
|
+
"commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"author": "beachball",
|
|
79
|
+
"package": "@fluentui/react-table",
|
|
80
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.13",
|
|
81
|
+
"commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"author": "beachball",
|
|
85
|
+
"package": "@fluentui/react-table",
|
|
86
|
+
"comment": "Bump @fluentui/react-checkbox to v9.1.25",
|
|
87
|
+
"commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"author": "beachball",
|
|
91
|
+
"package": "@fluentui/react-table",
|
|
92
|
+
"comment": "Bump @fluentui/react-radio to v9.1.25",
|
|
93
|
+
"commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"author": "beachball",
|
|
97
|
+
"package": "@fluentui/react-table",
|
|
98
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.12",
|
|
99
|
+
"commit": "5a4b16715e8e929f11d8113f710e578ca73acaa6"
|
|
100
|
+
}
|
|
101
|
+
]
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"date": "Thu, 13 Jul 2023 21:25:46 GMT",
|
|
106
|
+
"tag": "@fluentui/react-table_v9.6.0",
|
|
107
|
+
"version": "9.6.0",
|
|
108
|
+
"comments": {
|
|
109
|
+
"none": [
|
|
110
|
+
{
|
|
111
|
+
"author": "martinhochel@microsoft.com",
|
|
112
|
+
"package": "@fluentui/react-table",
|
|
113
|
+
"commit": "8a9e1018f2abb2c7608c49d32acf44e93c43cba6",
|
|
114
|
+
"comment": "chore: update devDependencies to use * for inner workspace dependencies"
|
|
115
|
+
}
|
|
116
|
+
]
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"date": "Tue, 11 Jul 2023 18:46:35 GMT",
|
|
6
121
|
"tag": "@fluentui/react-table_v9.6.0",
|
|
7
122
|
"version": "9.6.0",
|
|
8
123
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,43 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-table
|
|
2
2
|
|
|
3
|
-
This log was last generated on Tue,
|
|
3
|
+
This log was last generated on Tue, 25 Jul 2023 13:26:24 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.7.0)
|
|
8
|
+
|
|
9
|
+
Tue, 25 Jul 2023 13:26:24 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.6.1..@fluentui/react-table_v9.7.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- Table/DataGrid: Improve keyboard column resizing experience ([PR #28493](https://github.com/microsoft/fluentui/pull/28493) by jirivyhnalek@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-avatar to v9.5.14 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
|
|
16
|
+
- Bump @fluentui/react-checkbox to v9.1.26 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
|
|
17
|
+
- Bump @fluentui/react-radio to v9.1.26 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.11.0 ([PR #28530](https://github.com/microsoft/fluentui/pull/28530) by beachball)
|
|
19
|
+
|
|
20
|
+
### Patches
|
|
21
|
+
|
|
22
|
+
- 28456 ([PR #28577](https://github.com/microsoft/fluentui/pull/28577) by lingfan.gao@microsoft.com)
|
|
23
|
+
- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
|
|
24
|
+
|
|
25
|
+
## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.6.1)
|
|
26
|
+
|
|
27
|
+
Thu, 20 Jul 2023 18:27:34 GMT
|
|
28
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.6.0..@fluentui/react-table_v9.6.1)
|
|
29
|
+
|
|
30
|
+
### Patches
|
|
31
|
+
|
|
32
|
+
- Bump @fluentui/react-aria to v9.3.27 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
|
|
33
|
+
- Bump @fluentui/react-avatar to v9.5.13 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
|
|
34
|
+
- Bump @fluentui/react-checkbox to v9.1.25 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
|
|
35
|
+
- Bump @fluentui/react-radio to v9.1.25 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
|
|
36
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.12 ([PR #26826](https://github.com/microsoft/fluentui/pull/26826) by beachball)
|
|
37
|
+
|
|
7
38
|
## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.6.0)
|
|
8
39
|
|
|
9
|
-
Tue, 11 Jul 2023 18:
|
|
40
|
+
Tue, 11 Jul 2023 18:46:35 GMT
|
|
10
41
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.5.0..@fluentui/react-table_v9.6.0)
|
|
11
42
|
|
|
12
43
|
### Minor changes
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { __styles, mergeClasses, shorthands } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
3
|
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
4
|
-
import { KeyboardResizingCurrentColumnDataAttribute } from '../../hooks/useTableColumnSizing';
|
|
5
4
|
export const tableHeaderCellClassName = 'fui-TableHeaderCell';
|
|
6
5
|
export const tableHeaderCellClassNames = {
|
|
7
6
|
root: 'fui-TableHeaderCell',
|
|
@@ -45,14 +44,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
45
44
|
B8osjzx: ["f187m4uq", "fs9qmxf"],
|
|
46
45
|
u7xebq: ["f145mzao", "f1uha7eq"],
|
|
47
46
|
Blsv9te: ["f1uha7eq", "f145mzao"],
|
|
48
|
-
qhf8xq: "f10pi13n"
|
|
49
|
-
Ba2hzls: ["f1bwmy6q", "f156ixcz"],
|
|
50
|
-
Bhwr9k8: ["f156ixcz", "f1bwmy6q"],
|
|
51
|
-
Bb54w5r: ["fsy9rq9", "fl6c5zn"],
|
|
52
|
-
bgd754: ["fl6c5zn", "fsy9rq9"],
|
|
53
|
-
Boazqr3: "f1tpyba1",
|
|
54
|
-
Blqj7q0: "f1pnds93",
|
|
55
|
-
xlw1ys: "fa5446a"
|
|
47
|
+
qhf8xq: "f10pi13n"
|
|
56
48
|
},
|
|
57
49
|
rootInteractive: {
|
|
58
50
|
Jwef8y: "f1t94bn6",
|
|
@@ -103,7 +95,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
103
95
|
},
|
|
104
96
|
resizeHandle: {}
|
|
105
97
|
}, {
|
|
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;}", ".
|
|
98
|
+
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;}", ".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);}"],
|
|
107
99
|
h: [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}"],
|
|
108
100
|
a: [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}"]
|
|
109
101
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","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","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';\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 },\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":"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"}
|
|
@@ -22,6 +22,8 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
22
22
|
Bmy1vo4: "f13u1uyl",
|
|
23
23
|
B3o57yi: "fezquic",
|
|
24
24
|
Bj3rh1h: "f19g0ac",
|
|
25
|
+
B3cna0y: "f1tkae59",
|
|
26
|
+
Brovlpu: "ftqa4ok",
|
|
25
27
|
B7zu5sd: "f15pjodv",
|
|
26
28
|
Bs6t6z0: "ftgrb5f",
|
|
27
29
|
Fdvyjd: "f2df6js",
|
|
@@ -34,6 +36,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
34
36
|
}
|
|
35
37
|
}, {
|
|
36
38
|
d: [".f1euv43f{position:absolute;}", ".f1e31b4d{right:0;}", ".f1vgc2s3{left:0;}", ".f15twtuk{top:0;}", ".f1yab3r1{bottom:0;}", ".fjw5fx7{width:16px;}", ".f1hu3pq6{margin-top:0;}", ".fn2i5td{margin-right:-8px;}", ".f1eybr6b{margin-left:-8px;}", ".f19f4twv{margin-bottom:0;}", ".fc3en1c{cursor:col-resize;}", ".fk73vx1{opacity:0;}", ".f13u1uyl{transition-property:opacity;}", ".fezquic{transition-duration:.2s;}", ".f19g0ac{z-index:1;}", ".ftgrb5f:after{content:\" \";}", ".f2df6js:after{display:block;}", ".fshsryb:after{width:1px;}", ".f11ef69:after{position:absolute;}", ".f12lb1dx:after{left:50%;}", ".f13tbxeo:after{right:50%;}", ".fu4ulse:after{top:0;}", ".fw2wsqs:after{bottom:0;}", ".f1swzn7y:after{background-color:var(--colorNeutralStroke1);}"],
|
|
39
|
+
f: [".f1tkae59:focus{opacity:1;}", ".ftqa4ok:focus{outline-style:none;}"],
|
|
37
40
|
h: [".f15pjodv:hover{opacity:1;}"]
|
|
38
41
|
});
|
|
39
42
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tableResizeHandleClassNames","root","useStyles","qhf8xq","j35jbq","Bhzewxz","B5kzvoi","a9b677","B6of3ja","t21cq0","jrapky","Frg6f3","Bceei9c","abs64n","Bmy1vo4","B3o57yi","Bj3rh1h","B7zu5sd","Bs6t6z0","Fdvyjd","Biobvvw","Hdbjpj","jc51t6","u6d25","Bj55yzk","Bkbwdz4","d","h","useTableResizeHandleStyles_unstable","state","styles","className"],"sources":["useTableResizeHandleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tableResizeHandleClassNames = {\n root: 'fui-TableResizeHandle'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'absolute',\n right: 0,\n top: 0,\n bottom: 0,\n width: '16px',\n ...shorthands.margin(0, '-8px'),\n cursor: 'col-resize',\n opacity: 0,\n transitionProperty: 'opacity',\n transitionDuration: '.2s',\n zIndex: 1,\n ':hover': {\n opacity: 1\n },\n ':after': {\n content: '\" \"',\n display: 'block',\n width: '1px',\n position: 'absolute',\n left: '50%',\n top: 0,\n bottom: 0,\n backgroundColor: tokens.colorNeutralStroke1\n }\n }\n});\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */ export const useTableResizeHandleStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tableResizeHandleClassNames","root","useStyles","qhf8xq","j35jbq","Bhzewxz","B5kzvoi","a9b677","B6of3ja","t21cq0","jrapky","Frg6f3","Bceei9c","abs64n","Bmy1vo4","B3o57yi","Bj3rh1h","B3cna0y","Brovlpu","B7zu5sd","Bs6t6z0","Fdvyjd","Biobvvw","Hdbjpj","jc51t6","u6d25","Bj55yzk","Bkbwdz4","d","f","h","useTableResizeHandleStyles_unstable","state","styles","className"],"sources":["useTableResizeHandleStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const tableResizeHandleClassNames = {\n root: 'fui-TableResizeHandle'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n position: 'absolute',\n right: 0,\n top: 0,\n bottom: 0,\n width: '16px',\n ...shorthands.margin(0, '-8px'),\n cursor: 'col-resize',\n opacity: 0,\n transitionProperty: 'opacity',\n transitionDuration: '.2s',\n zIndex: 1,\n // If mouse users focus on the resize handle through a context menu, we want the handle\n // to be visible because the mouse might not be hovering over the handle\n ':focus': {\n opacity: 1,\n outlineStyle: 'none'\n },\n ':hover': {\n opacity: 1\n },\n ':after': {\n content: '\" \"',\n display: 'block',\n width: '1px',\n position: 'absolute',\n left: '50%',\n top: 0,\n bottom: 0,\n backgroundColor: tokens.colorNeutralStroke1\n }\n }\n});\n/**\n * Apply styling to the TableResizeHandle slots based on the state\n */ export const useTableResizeHandleStyles_unstable = (state)=>{\n const styles = useStyles();\n state.root.className = mergeClasses(tableResizeHandleClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAK,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAiCrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,MAAM,GAAG/B,SAAS,CAAC,CAAC;EAC1B8B,KAAK,CAAC/B,IAAI,CAACiC,SAAS,GAAGrC,YAAY,CAACG,2BAA2B,CAACC,IAAI,EAAEgC,MAAM,CAAChC,IAAI,EAAE+B,KAAK,CAAC/B,IAAI,CAACiC,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC"}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';
|
|
3
3
|
import { useEventCallback } from '@fluentui/react-utilities';
|
|
4
|
-
import {
|
|
4
|
+
import { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';
|
|
5
5
|
const STEP = 20;
|
|
6
6
|
const PRECISION_MODIFIER = Shift;
|
|
7
7
|
const PRECISION_FACTOR = 1 / 4;
|
|
8
8
|
export function useKeyboardResizing(columnResizeState) {
|
|
9
9
|
const [columnId, setColumnId] = React.useState();
|
|
10
10
|
const onChangeRef = React.useRef();
|
|
11
|
-
const
|
|
11
|
+
const { findPrevFocusable } = useFocusFinders();
|
|
12
12
|
const columnResizeStateRef = React.useRef(columnResizeState);
|
|
13
13
|
React.useEffect(()=>{
|
|
14
14
|
columnResizeStateRef.current = columnResizeState;
|
|
15
15
|
}, [
|
|
16
16
|
columnResizeState
|
|
17
17
|
]);
|
|
18
|
-
const
|
|
18
|
+
const [resizeHandleRefs] = React.useState(()=>new Map());
|
|
19
19
|
const keyboardHandler = useEventCallback((event)=>{
|
|
20
20
|
if (!columnId) {
|
|
21
21
|
return;
|
|
@@ -29,14 +29,14 @@ export function useKeyboardResizing(columnResizeState) {
|
|
|
29
29
|
switch(event.key){
|
|
30
30
|
case ArrowLeft:
|
|
31
31
|
stopEvent();
|
|
32
|
-
columnResizeStateRef.current.setColumnWidth(event, {
|
|
32
|
+
columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {
|
|
33
33
|
columnId,
|
|
34
34
|
width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
|
|
35
35
|
});
|
|
36
36
|
return;
|
|
37
37
|
case ArrowRight:
|
|
38
38
|
stopEvent();
|
|
39
|
-
columnResizeStateRef.current.setColumnWidth(event, {
|
|
39
|
+
columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {
|
|
40
40
|
columnId,
|
|
41
41
|
width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP)
|
|
42
42
|
});
|
|
@@ -44,64 +44,87 @@ export function useKeyboardResizing(columnResizeState) {
|
|
|
44
44
|
case Space:
|
|
45
45
|
case Enter:
|
|
46
46
|
case Escape:
|
|
47
|
+
var // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).
|
|
48
|
+
_resizeHandleRefs_get, _resizeHandleRefs_get_current;
|
|
47
49
|
stopEvent();
|
|
48
|
-
|
|
50
|
+
(_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : (_resizeHandleRefs_get_current = _resizeHandleRefs_get.current) === null || _resizeHandleRefs_get_current === void 0 ? void 0 : _resizeHandleRefs_get_current.blur();
|
|
49
51
|
break;
|
|
50
52
|
}
|
|
51
53
|
});
|
|
52
|
-
// On component unmout, cancel any timer for adding a listener (if it exists) and remove the listener
|
|
53
|
-
React.useEffect(()=>{
|
|
54
|
-
return ()=>{
|
|
55
|
-
var _targetDocument_defaultView, _targetDocument_defaultView1;
|
|
56
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.clearTimeout(addListenerTimeout.current);
|
|
57
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.removeEventListener('keydown', keyboardHandler);
|
|
58
|
-
};
|
|
59
|
-
}, [
|
|
60
|
-
keyboardHandler,
|
|
61
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView
|
|
62
|
-
]);
|
|
63
54
|
const enableInteractiveMode = React.useCallback((colId)=>{
|
|
64
|
-
var _onChangeRef_current,
|
|
55
|
+
var _onChangeRef_current, _resizeHandleRefs_get;
|
|
65
56
|
setColumnId(colId);
|
|
66
57
|
(_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, colId, true);
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.addEventListener('keydown', keyboardHandler);
|
|
74
|
-
}, 0);
|
|
58
|
+
const handle = (_resizeHandleRefs_get = resizeHandleRefs.get(colId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;
|
|
59
|
+
if (handle) {
|
|
60
|
+
handle.setAttribute('tabindex', '-1');
|
|
61
|
+
handle.tabIndex = -1;
|
|
62
|
+
handle.focus();
|
|
63
|
+
}
|
|
75
64
|
}, [
|
|
76
|
-
|
|
77
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView
|
|
65
|
+
resizeHandleRefs
|
|
78
66
|
]);
|
|
79
67
|
const disableInteractiveMode = React.useCallback(()=>{
|
|
80
|
-
var
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
68
|
+
var // Notify the onChange listener that we are disabling interactive mode.
|
|
69
|
+
_onChangeRef_current, _resizeHandleRefs_get;
|
|
70
|
+
if (!columnId) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
(_onChangeRef_current = onChangeRef.current) === null || _onChangeRef_current === void 0 ? void 0 : _onChangeRef_current.call(onChangeRef, columnId, false);
|
|
74
|
+
// Find the previous focusable element (table header button) and focus it.
|
|
75
|
+
const el = (_resizeHandleRefs_get = resizeHandleRefs.get(columnId)) === null || _resizeHandleRefs_get === void 0 ? void 0 : _resizeHandleRefs_get.current;
|
|
76
|
+
if (el) {
|
|
77
|
+
var _findPrevFocusable;
|
|
78
|
+
(_findPrevFocusable = findPrevFocusable(el)) === null || _findPrevFocusable === void 0 ? void 0 : _findPrevFocusable.focus(); // Focus the previous focusable element (header button).
|
|
79
|
+
el.removeAttribute('tabindex');
|
|
84
80
|
}
|
|
85
81
|
setColumnId(undefined);
|
|
86
|
-
targetDocument === null || targetDocument === void 0 ? void 0 : (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.removeEventListener('keydown', keyboardHandler);
|
|
87
82
|
}, [
|
|
88
83
|
columnId,
|
|
89
|
-
|
|
90
|
-
|
|
84
|
+
findPrevFocusable,
|
|
85
|
+
resizeHandleRefs
|
|
91
86
|
]);
|
|
92
87
|
const toggleInteractiveMode = (colId, onChange)=>{
|
|
93
88
|
onChangeRef.current = onChange;
|
|
94
89
|
if (!columnId) {
|
|
95
90
|
enableInteractiveMode(colId);
|
|
96
91
|
} else if (colId && columnId !== colId) {
|
|
92
|
+
enableInteractiveMode(colId);
|
|
97
93
|
setColumnId(colId);
|
|
98
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(columnId, true);
|
|
99
94
|
} else {
|
|
100
95
|
disableInteractiveMode();
|
|
101
96
|
}
|
|
102
97
|
};
|
|
98
|
+
const getKeyboardResizingRef = React.useCallback((colId)=>{
|
|
99
|
+
const ref = resizeHandleRefs.get(colId) || React.createRef();
|
|
100
|
+
resizeHandleRefs.set(colId, ref);
|
|
101
|
+
return ref;
|
|
102
|
+
}, [
|
|
103
|
+
resizeHandleRefs
|
|
104
|
+
]);
|
|
105
|
+
// This makes sure the left and right arrow keys are ignored in tabster,
|
|
106
|
+
// so that they can be used for resizing.
|
|
107
|
+
const tabsterAttrs = useTabsterAttributes({
|
|
108
|
+
focusable: {
|
|
109
|
+
ignoreKeydown: {
|
|
110
|
+
ArrowLeft: true,
|
|
111
|
+
ArrowRight: true
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
});
|
|
103
115
|
return {
|
|
104
116
|
toggleInteractiveMode,
|
|
105
|
-
columnId
|
|
117
|
+
columnId,
|
|
118
|
+
getKeyboardResizingProps: (colId, currentWidth)=>({
|
|
119
|
+
onKeyDown: keyboardHandler,
|
|
120
|
+
onBlur: disableInteractiveMode,
|
|
121
|
+
ref: getKeyboardResizingRef(colId),
|
|
122
|
+
role: 'separator',
|
|
123
|
+
'aria-label': 'Resize column',
|
|
124
|
+
'aria-valuetext': `${currentWidth} pixels`,
|
|
125
|
+
'aria-hidden': colId === columnId ? false : true,
|
|
126
|
+
tabIndex: colId === columnId ? 0 : undefined,
|
|
127
|
+
...tabsterAttrs
|
|
128
|
+
})
|
|
106
129
|
};
|
|
107
130
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport {
|
|
1
|
+
{"version":3,"sources":["useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n const [columnId, setColumnId] = React.useState<TableColumnId>();\n const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n const { findPrevFocusable } = useFocusFinders();\n\n const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n React.useEffect(() => {\n columnResizeStateRef.current = columnResizeState;\n }, [columnResizeState]);\n\n const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement>>());\n\n const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n if (!columnId) {\n return;\n }\n\n const width = columnResizeStateRef.current.getColumnWidth(columnId);\n const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n const stopEvent = () => {\n event.preventDefault();\n event.stopPropagation();\n };\n\n switch (event.key) {\n case ArrowLeft:\n stopEvent();\n columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n columnId,\n width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n });\n return;\n\n case ArrowRight:\n stopEvent();\n columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n columnId,\n width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n });\n return;\n\n case Space:\n case Enter:\n case Escape:\n stopEvent();\n // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n resizeHandleRefs.get(columnId)?.current?.blur();\n break;\n }\n });\n\n const enableInteractiveMode = React.useCallback(\n (colId: TableColumnId) => {\n setColumnId(colId);\n onChangeRef.current?.(colId, true);\n\n const handle = resizeHandleRefs.get(colId)?.current;\n if (handle) {\n handle.setAttribute('tabindex', '-1');\n handle.tabIndex = -1;\n handle.focus();\n }\n },\n [resizeHandleRefs],\n );\n\n const disableInteractiveMode = React.useCallback(() => {\n if (!columnId) {\n return;\n }\n // Notify the onChange listener that we are disabling interactive mode.\n onChangeRef.current?.(columnId, false);\n // Find the previous focusable element (table header button) and focus it.\n const el = resizeHandleRefs.get(columnId)?.current;\n if (el) {\n findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n el.removeAttribute('tabindex');\n }\n\n setColumnId(undefined);\n }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n onChangeRef.current = onChange;\n if (!columnId) {\n enableInteractiveMode(colId);\n } else if (colId && columnId !== colId) {\n enableInteractiveMode(colId);\n setColumnId(colId);\n } else {\n disableInteractiveMode();\n }\n };\n\n const getKeyboardResizingRef = React.useCallback(\n (colId: TableColumnId) => {\n const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n resizeHandleRefs.set(colId, ref);\n return ref;\n },\n [resizeHandleRefs],\n );\n\n // This makes sure the left and right arrow keys are ignored in tabster,\n // so that they can be used for resizing.\n const tabsterAttrs = useTabsterAttributes({\n focusable: {\n ignoreKeydown: {\n ArrowLeft: true,\n ArrowRight: true,\n },\n },\n });\n\n return {\n toggleInteractiveMode,\n columnId,\n getKeyboardResizingProps: (colId: TableColumnId, currentWidth: number) => ({\n onKeyDown: keyboardHandler,\n onBlur: disableInteractiveMode,\n ref: getKeyboardResizingRef(colId),\n role: 'separator',\n 'aria-label': 'Resize column',\n 'aria-valuetext': `${currentWidth} pixels`,\n 'aria-hidden': colId === columnId ? false : true,\n tabIndex: colId === columnId ? 0 : undefined,\n ...tabsterAttrs,\n }),\n };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFocusFinders","useTabsterAttributes","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","findPrevFocusable","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","nativeEvent","get","blur","enableInteractiveMode","useCallback","colId","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","removeAttribute","undefined","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,EAAEC,UAAU,EAAEC,KAAK,EAAEC,MAAM,EAAEC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AAC7F,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,eAAe,EAAEC,oBAAoB,QAAQ,0BAA0B;AAEhF,MAAMC,OAAO;AACb,MAAMC,qBAAqBN;AAC3B,MAAMO,mBAAmB,IAAI;AAE7B,OAAO,SAASC,oBAAoBC,iBAAoC,EAAE;IACxE,MAAM,CAACC,UAAUC,YAAY,GAAGhB,MAAMiB,QAAQ;IAC9C,MAAMC,cAAclB,MAAMmB,MAAM;IAChC,MAAM,EAAEC,kBAAiB,EAAE,GAAGZ;IAE9B,MAAMa,uBAAuBrB,MAAMmB,MAAM,CAAoBL;IAC7Dd,MAAMsB,SAAS,CAAC,IAAM;QACpBD,qBAAqBE,OAAO,GAAGT;IACjC,GAAG;QAACA;KAAkB;IAEtB,MAAM,CAACU,iBAAiB,GAAGxB,MAAMiB,QAAQ,CAAC,IAAM,IAAIQ;IAEpD,MAAMC,kBAAkBnB,iBAAiB,CAACoB,QAA+B;QACvE,IAAI,CAACZ,UAAU;YACb;QACF,CAAC;QAED,MAAMa,QAAQP,qBAAqBE,OAAO,CAACM,cAAc,CAACd;QAC1D,MAAMe,oBAAoBH,MAAMI,gBAAgB,CAACpB;QAEjD,MAAMqB,YAAY,IAAM;YACtBL,MAAMM,cAAc;YACpBN,MAAMO,eAAe;QACvB;QAEA,OAAQP,MAAMQ,GAAG;YACf,KAAKlC;gBACH+B;gBACAX,qBAAqBE,OAAO,CAACa,cAAc,CAACT,MAAMU,WAAW,EAAE;oBAC7DtB;oBACAa,OAAOA,QAASE,CAAAA,oBAAoBpB,OAAOE,mBAAmBF,IAAI,AAAD;gBACnE;gBACA;YAEF,KAAKR;gBACH8B;gBACAX,qBAAqBE,OAAO,CAACa,cAAc,CAACT,MAAMU,WAAW,EAAE;oBAC7DtB;oBACAa,OAAOA,QAASE,CAAAA,oBAAoBpB,OAAOE,mBAAmBF,IAAI,AAAD;gBACnE;gBACA;YAEF,KAAKJ;YACL,KAAKH;YACL,KAAKC;oBAEH,0FAA0F;gBAC1FoB;gBAFAQ;gBAEAR,CAAAA,wBAAAA,iBAAiBc,GAAG,CAACvB,uBAArBS,mCAAAA,KAAAA,IAAAA,iCAAAA,sBAAgCD,gEAAhCC,KAAAA,IAAAA,8BAAyCe;gBACzC,KAAM;QACV;IACF;IAEA,MAAMC,wBAAwBxC,MAAMyC,WAAW,CAC7C,CAACC,QAAyB;YAExBxB,sBAEeM;QAHfR,YAAY0B;QACZxB,CAAAA,uBAAAA,YAAYK,OAAO,cAAnBL,kCAAAA,KAAAA,IAAAA,qBAAAA,KAAAA,aAAsBwB,OAAO,IAAI;QAEjC,MAAMC,SAASnB,CAAAA,wBAAAA,iBAAiBc,GAAG,CAACI,oBAArBlB,mCAAAA,KAAAA,IAAAA,sBAA6BD,OAAO;QACnD,IAAIoB,QAAQ;YACVA,OAAOC,YAAY,CAAC,YAAY;YAChCD,OAAOE,QAAQ,GAAG,CAAC;YACnBF,OAAOG,KAAK;QACd,CAAC;IACH,GACA;QAACtB;KAAiB;IAGpB,MAAMuB,yBAAyB/C,MAAMyC,WAAW,CAAC,IAAM;YAIrD,uEAAuE;QACvEvB,sBAEWM;QANX,IAAI,CAACT,UAAU;YACb;QACF,CAAC;QAEDG,CAAAA,uBAAAA,YAAYK,OAAO,cAAnBL,kCAAAA,KAAAA,IAAAA,qBAAAA,KAAAA,aAAsBH,UAAU,KAAK;QACrC,0EAA0E;QAC1E,MAAMiC,KAAKxB,CAAAA,wBAAAA,iBAAiBc,GAAG,CAACvB,uBAArBS,mCAAAA,KAAAA,IAAAA,sBAAgCD,OAAO;QAClD,IAAIyB,IAAI;gBACN5B;YAAAA,CAAAA,qBAAAA,kBAAkB4B,iBAAlB5B,gCAAAA,KAAAA,IAAAA,mBAAuB0B,SAAS,wDAAwD;YACxFE,GAAGC,eAAe,CAAC;QACrB,CAAC;QAEDjC,YAAYkC;IACd,GAAG;QAACnC;QAAUK;QAAmBI;KAAiB;IAElD,MAAM2B,wBAAwB,CAACT,OAAsBU,WAAkD;QACrGlC,YAAYK,OAAO,GAAG6B;QACtB,IAAI,CAACrC,UAAU;YACbyB,sBAAsBE;QACxB,OAAO,IAAIA,SAAS3B,aAAa2B,OAAO;YACtCF,sBAAsBE;YACtB1B,YAAY0B;QACd,OAAO;YACLK;QACF,CAAC;IACH;IAEA,MAAMM,yBAAyBrD,MAAMyC,WAAW,CAC9C,CAACC,QAAyB;QACxB,MAAMY,MAAM9B,iBAAiBc,GAAG,CAACI,UAAU1C,MAAMuD,SAAS;QAC1D/B,iBAAiBgC,GAAG,CAACd,OAAOY;QAC5B,OAAOA;IACT,GACA;QAAC9B;KAAiB;IAGpB,wEAAwE;IACxE,yCAAyC;IACzC,MAAMiC,eAAehD,qBAAqB;QACxCiD,WAAW;YACTC,eAAe;gBACb1D,WAAW,IAAI;gBACfC,YAAY,IAAI;YAClB;QACF;IACF;IAEA,OAAO;QACLiD;QACApC;QACA6C,0BAA0B,CAAClB,OAAsBmB,eAA0B,CAAA;gBACzEC,WAAWpC;gBACXqC,QAAQhB;gBACRO,KAAKD,uBAAuBX;gBAC5BsB,MAAM;gBACN,cAAc;gBACd,kBAAkB,CAAC,EAAEH,aAAa,OAAO,CAAC;gBAC1C,eAAenB,UAAU3B,WAAW,KAAK,GAAG,IAAI;gBAChD8B,UAAUH,UAAU3B,WAAW,IAAImC,SAAS;gBAC5C,GAAGO,YAAY;YACjB,CAAA;IACF;AACF,CAAC"}
|
|
@@ -4,7 +4,6 @@ import { useMeasureElement } from './useMeasureElement';
|
|
|
4
4
|
import { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';
|
|
5
5
|
import { useTableColumnResizeState } from './useTableColumnResizeState';
|
|
6
6
|
import { useKeyboardResizing } from './useKeyboardResizing';
|
|
7
|
-
export const KeyboardResizingCurrentColumnDataAttribute = 'data-keyboard-resizing';
|
|
8
7
|
export const defaultColumnSizingState = {
|
|
9
8
|
getColumnWidths: ()=>[],
|
|
10
9
|
getOnMouseDown: ()=>()=>null,
|
|
@@ -43,7 +42,7 @@ function useTableColumnSizingState(tableState, params) {
|
|
|
43
42
|
// Creates the mouse handler and attaches the state to it
|
|
44
43
|
const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);
|
|
45
44
|
// Creates the keyboard handler for resizing columns
|
|
46
|
-
const { toggleInteractiveMode ,
|
|
45
|
+
const { toggleInteractiveMode , getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);
|
|
47
46
|
const enableKeyboardMode = React.useCallback((columnId, onChange)=>(e)=>{
|
|
48
47
|
e.preventDefault();
|
|
49
48
|
e.nativeEvent.stopPropagation();
|
|
@@ -66,14 +65,12 @@ function useTableColumnSizingState(tableState, params) {
|
|
|
66
65
|
const col = columnResizeState.getColumnById(columnId);
|
|
67
66
|
const aside = /*#__PURE__*/ React.createElement(TableResizeHandle, {
|
|
68
67
|
onMouseDown: mouseHandler.getOnMouseDown(columnId),
|
|
69
|
-
onTouchStart: mouseHandler.getOnMouseDown(columnId)
|
|
68
|
+
onTouchStart: mouseHandler.getOnMouseDown(columnId),
|
|
69
|
+
...getKeyboardResizingProps(columnId, (col === null || col === void 0 ? void 0 : col.width) || 0)
|
|
70
70
|
});
|
|
71
71
|
return col ? {
|
|
72
72
|
style: getColumnStyles(col),
|
|
73
|
-
aside
|
|
74
|
-
...keyboardResizingColumnId === columnId ? {
|
|
75
|
-
[KeyboardResizingCurrentColumnDataAttribute]: ''
|
|
76
|
-
} : {}
|
|
73
|
+
aside
|
|
77
74
|
} : {};
|
|
78
75
|
},
|
|
79
76
|
getTableCellProps: (columnId)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n ColumnWidthState,\n EnableKeyboardModeOnChangeCallback,\n TableColumnId,\n TableColumnSizingState,\n TableFeaturesState,\n UseTableColumnSizingParams,\n} from './types';\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const
|
|
1
|
+
{"version":3,"sources":["useTableColumnSizing.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TableResizeHandle } from '../TableResizeHandle';\nimport {\n ColumnWidthState,\n EnableKeyboardModeOnChangeCallback,\n TableColumnId,\n TableColumnSizingState,\n TableFeaturesState,\n UseTableColumnSizingParams,\n} from './types';\n\nimport { useMeasureElement } from './useMeasureElement';\nimport { useTableColumnResizeMouseHandler } from './useTableColumnResizeMouseHandler';\nimport { useTableColumnResizeState } from './useTableColumnResizeState';\nimport { useKeyboardResizing } from './useKeyboardResizing';\n\nexport const defaultColumnSizingState: TableColumnSizingState = {\n getColumnWidths: () => [],\n getOnMouseDown: () => () => null,\n setColumnWidth: () => null,\n getTableHeaderCellProps: () => ({ style: {}, columnId: '' }),\n getTableCellProps: () => ({ style: {}, columnId: '' }),\n enableKeyboardMode: () => () => null,\n};\n\nexport function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState: TableFeaturesState<TItem>) => useTableColumnSizingState(tableState, params);\n}\n\nfunction getColumnStyles(column: ColumnWidthState): React.CSSProperties {\n const width = column.width;\n\n return {\n // native styles\n width,\n // non-native element styles (flex layout)\n minWidth: width,\n maxWidth: width,\n };\n}\n\nfunction useTableColumnSizingState<TItem>(\n tableState: TableFeaturesState<TItem>,\n params?: UseTableColumnSizingParams,\n): TableFeaturesState<TItem> {\n const { columns } = tableState;\n\n // Gets the container width\n const { width, measureElementRef } = useMeasureElement();\n // Creates the state based on columns and available containerWidth\n const columnResizeState = useTableColumnResizeState(columns, width + (params?.containerWidthOffset || 0), params);\n // Creates the mouse handler and attaches the state to it\n const mouseHandler = useTableColumnResizeMouseHandler(columnResizeState);\n // Creates the keyboard handler for resizing columns\n const { toggleInteractiveMode, getKeyboardResizingProps } = useKeyboardResizing(columnResizeState);\n\n const enableKeyboardMode = React.useCallback(\n (columnId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) =>\n (e: React.MouseEvent | React.TouchEvent) => {\n e.preventDefault();\n e.nativeEvent.stopPropagation();\n toggleInteractiveMode(columnId, onChange);\n },\n [toggleInteractiveMode],\n );\n\n return {\n ...tableState,\n tableRef: measureElementRef,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n columnSizing_unstable: {\n getOnMouseDown: mouseHandler.getOnMouseDown,\n setColumnWidth: (columnId: TableColumnId, w: number) =>\n columnResizeState.setColumnWidth(undefined, { columnId, width: w }),\n getColumnWidths: columnResizeState.getColumns,\n getTableHeaderCellProps: (columnId: TableColumnId) => {\n const col = columnResizeState.getColumnById(columnId);\n\n const aside = (\n <TableResizeHandle\n onMouseDown={mouseHandler.getOnMouseDown(columnId)}\n onTouchStart={mouseHandler.getOnMouseDown(columnId)}\n {...getKeyboardResizingProps(columnId, col?.width || 0)}\n />\n );\n return col\n ? {\n style: getColumnStyles(col),\n aside,\n }\n : {};\n },\n getTableCellProps: (columnId: TableColumnId) => {\n const col = columnResizeState.getColumnById(columnId);\n return col ? { style: getColumnStyles(col) } : {};\n },\n enableKeyboardMode,\n },\n };\n}\n"],"names":["React","TableResizeHandle","useMeasureElement","useTableColumnResizeMouseHandler","useTableColumnResizeState","useKeyboardResizing","defaultColumnSizingState","getColumnWidths","getOnMouseDown","setColumnWidth","getTableHeaderCellProps","style","columnId","getTableCellProps","enableKeyboardMode","useTableColumnSizing_unstable","params","tableState","useTableColumnSizingState","getColumnStyles","column","width","minWidth","maxWidth","columns","measureElementRef","columnResizeState","containerWidthOffset","mouseHandler","toggleInteractiveMode","getKeyboardResizingProps","useCallback","onChange","e","preventDefault","nativeEvent","stopPropagation","tableRef","columnSizing_unstable","w","undefined","getColumns","col","getColumnById","aside","onMouseDown","onTouchStart"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,uBAAuB;AAUzD,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,gCAAgC,QAAQ,qCAAqC;AACtF,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,mBAAmB,QAAQ,wBAAwB;AAE5D,OAAO,MAAMC,2BAAmD;IAC9DC,iBAAiB,IAAM,EAAE;IACzBC,gBAAgB,IAAM,IAAM,IAAI;IAChCC,gBAAgB,IAAM,IAAI;IAC1BC,yBAAyB,IAAO,CAAA;YAAEC,OAAO,CAAC;YAAGC,UAAU;QAAG,CAAA;IAC1DC,mBAAmB,IAAO,CAAA;YAAEF,OAAO,CAAC;YAAGC,UAAU;QAAG,CAAA;IACpDE,oBAAoB,IAAM,IAAM,IAAI;AACtC,EAAE;AAEF,OAAO,SAASC,8BAAqCC,MAAmC,EAAE;IACxF,4EAA4E;IAC5E,sDAAsD;IACtD,OAAO,CAACC,aAA0CC,0BAA0BD,YAAYD;AAC1F,CAAC;AAED,SAASG,gBAAgBC,MAAwB,EAAuB;IACtE,MAAMC,QAAQD,OAAOC,KAAK;IAE1B,OAAO;QACL,gBAAgB;QAChBA;QACA,0CAA0C;QAC1CC,UAAUD;QACVE,UAAUF;IACZ;AACF;AAEA,SAASH,0BACPD,UAAqC,EACrCD,MAAmC,EACR;IAC3B,MAAM,EAAEQ,QAAO,EAAE,GAAGP;IAEpB,2BAA2B;IAC3B,MAAM,EAAEI,MAAK,EAAEI,kBAAiB,EAAE,GAAGvB;IACrC,kEAAkE;IAClE,MAAMwB,oBAAoBtB,0BAA0BoB,SAASH,QAASL,CAAAA,CAAAA,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQW,oBAAoB,AAAD,KAAK,CAAA,GAAIX;IAC1G,yDAAyD;IACzD,MAAMY,eAAezB,iCAAiCuB;IACtD,oDAAoD;IACpD,MAAM,EAAEG,sBAAqB,EAAEC,yBAAwB,EAAE,GAAGzB,oBAAoBqB;IAEhF,MAAMZ,qBAAqBd,MAAM+B,WAAW,CAC1C,CAACnB,UAAyBoB,WACxB,CAACC,IAA2C;YAC1CA,EAAEC,cAAc;YAChBD,EAAEE,WAAW,CAACC,eAAe;YAC7BP,sBAAsBjB,UAAUoB;QAClC,GACF;QAACH;KAAsB;IAGzB,OAAO;QACL,GAAGZ,UAAU;QACboB,UAAUZ;QACV,gEAAgE;QAChEa,uBAAuB;YACrB9B,gBAAgBoB,aAAapB,cAAc;YAC3CC,gBAAgB,CAACG,UAAyB2B,IACxCb,kBAAkBjB,cAAc,CAAC+B,WAAW;oBAAE5B;oBAAUS,OAAOkB;gBAAE;YACnEhC,iBAAiBmB,kBAAkBe,UAAU;YAC7C/B,yBAAyB,CAACE,WAA4B;gBACpD,MAAM8B,MAAMhB,kBAAkBiB,aAAa,CAAC/B;gBAE5C,MAAMgC,sBACJ,oBAAC3C;oBACC4C,aAAajB,aAAapB,cAAc,CAACI;oBACzCkC,cAAclB,aAAapB,cAAc,CAACI;oBACzC,GAAGkB,yBAAyBlB,UAAU8B,CAAAA,gBAAAA,iBAAAA,KAAAA,IAAAA,IAAKrB,KAAK,AAAD,KAAK,EAAE;;gBAG3D,OAAOqB,MACH;oBACE/B,OAAOQ,gBAAgBuB;oBACvBE;gBACF,IACA,CAAC,CAAC;YACR;YACA/B,mBAAmB,CAACD,WAA4B;gBAC9C,MAAM8B,MAAMhB,kBAAkBiB,aAAa,CAAC/B;gBAC5C,OAAO8B,MAAM;oBAAE/B,OAAOQ,gBAAgBuB;gBAAK,IAAI,CAAC,CAAC;YACnD;YACA5B;QACF;IACF;AACF"}
|