@fluentui/react-table 9.6.1 → 9.7.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 +69 -1
- package/CHANGELOG.md +29 -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 +6 -6
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,75 @@
|
|
|
2
2
|
"name": "@fluentui/react-table",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Thu,
|
|
5
|
+
"date": "Thu, 27 Jul 2023 10:33:13 GMT",
|
|
6
|
+
"tag": "@fluentui/react-table_v9.7.1",
|
|
7
|
+
"version": "9.7.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-table",
|
|
13
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.15",
|
|
14
|
+
"commit": "d2d8068110a9a7f71f417a40ee5f2db0ed1c40b9"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Tue, 25 Jul 2023 13:29:22 GMT",
|
|
21
|
+
"tag": "@fluentui/react-table_v9.7.0",
|
|
22
|
+
"version": "9.7.0",
|
|
23
|
+
"comments": {
|
|
24
|
+
"minor": [
|
|
25
|
+
{
|
|
26
|
+
"author": "jirivyhnalek@microsoft.com",
|
|
27
|
+
"package": "@fluentui/react-table",
|
|
28
|
+
"commit": "39cf021c60171b8e56a64637ef046478c686d625",
|
|
29
|
+
"comment": "Table/DataGrid: Improve keyboard column resizing experience"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "beachball",
|
|
33
|
+
"package": "@fluentui/react-table",
|
|
34
|
+
"comment": "Bump @fluentui/react-avatar to v9.5.14",
|
|
35
|
+
"commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "beachball",
|
|
39
|
+
"package": "@fluentui/react-table",
|
|
40
|
+
"comment": "Bump @fluentui/react-checkbox to v9.1.26",
|
|
41
|
+
"commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-table",
|
|
46
|
+
"comment": "Bump @fluentui/react-radio to v9.1.26",
|
|
47
|
+
"commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-table",
|
|
52
|
+
"comment": "Bump @fluentui/react-tabster to v9.11.0",
|
|
53
|
+
"commit": "e59b4b305eb656c5af005fefbfa2b1f69afcdc43"
|
|
54
|
+
}
|
|
55
|
+
],
|
|
56
|
+
"patch": [
|
|
57
|
+
{
|
|
58
|
+
"author": "lingfan.gao@microsoft.com",
|
|
59
|
+
"package": "@fluentui/react-table",
|
|
60
|
+
"commit": "038d8f703f43ea290412001c94179ee5d1dac4d2",
|
|
61
|
+
"comment": "28456"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"author": "ololubek@microsoft.com",
|
|
65
|
+
"package": "@fluentui/react-table",
|
|
66
|
+
"commit": "1082207b08959996cd736725735cadc01d0849b0",
|
|
67
|
+
"comment": "chore: Update react-icons version to pick up fowardref change."
|
|
68
|
+
}
|
|
69
|
+
]
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"date": "Thu, 20 Jul 2023 18:27:34 GMT",
|
|
6
74
|
"tag": "@fluentui/react-table_v9.6.1",
|
|
7
75
|
"version": "9.6.1",
|
|
8
76
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,39 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-table
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 27 Jul 2023 10:33:13 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.7.1)
|
|
8
|
+
|
|
9
|
+
Thu, 27 Jul 2023 10:33:13 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.7.0..@fluentui/react-table_v9.7.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-avatar to v9.5.15 ([PR #28649](https://github.com/microsoft/fluentui/pull/28649) by beachball)
|
|
15
|
+
|
|
16
|
+
## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.7.0)
|
|
17
|
+
|
|
18
|
+
Tue, 25 Jul 2023 13:29:22 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.6.1..@fluentui/react-table_v9.7.0)
|
|
20
|
+
|
|
21
|
+
### Minor changes
|
|
22
|
+
|
|
23
|
+
- Table/DataGrid: Improve keyboard column resizing experience ([PR #28493](https://github.com/microsoft/fluentui/pull/28493) by jirivyhnalek@microsoft.com)
|
|
24
|
+
- Bump @fluentui/react-avatar to v9.5.14 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
|
|
25
|
+
- Bump @fluentui/react-checkbox to v9.1.26 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
|
|
26
|
+
- Bump @fluentui/react-radio to v9.1.26 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
|
|
27
|
+
- Bump @fluentui/react-tabster to v9.11.0 ([PR #28622](https://github.com/microsoft/fluentui/pull/28622) by beachball)
|
|
28
|
+
|
|
29
|
+
### Patches
|
|
30
|
+
|
|
31
|
+
- 28456 ([PR #28577](https://github.com/microsoft/fluentui/pull/28577) by lingfan.gao@microsoft.com)
|
|
32
|
+
- chore: Update react-icons version to pick up fowardref change. ([PR #28590](https://github.com/microsoft/fluentui/pull/28590) by ololubek@microsoft.com)
|
|
33
|
+
|
|
7
34
|
## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.6.1)
|
|
8
35
|
|
|
9
|
-
Thu, 20 Jul 2023 18:
|
|
36
|
+
Thu, 20 Jul 2023 18:27:34 GMT
|
|
10
37
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.6.0..@fluentui/react-table_v9.6.1)
|
|
11
38
|
|
|
12
39
|
### Patches
|
|
@@ -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":"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"}
|
|
@@ -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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import { useEventCallback, useSelection } from '@fluentui/react-utilities';
|
|
2
3
|
const noop = ()=>undefined;
|
|
3
4
|
export const defaultTableSelectionState = {
|
|
@@ -26,6 +27,54 @@ export function useTableSelectionState(tableState, options) {
|
|
|
26
27
|
selectedItems,
|
|
27
28
|
onSelectionChange
|
|
28
29
|
});
|
|
30
|
+
// Selection state can contain obselete items (i.e. rows that are removed)
|
|
31
|
+
const selectableRowIds = React.useMemo(()=>{
|
|
32
|
+
const rowIds = new Set();
|
|
33
|
+
for(let i = 0; i < items.length; i++){
|
|
34
|
+
var _getRowId;
|
|
35
|
+
rowIds.add((_getRowId = getRowId === null || getRowId === void 0 ? void 0 : getRowId(items[i])) !== null && _getRowId !== void 0 ? _getRowId : i);
|
|
36
|
+
}
|
|
37
|
+
return rowIds;
|
|
38
|
+
}, [
|
|
39
|
+
items,
|
|
40
|
+
getRowId
|
|
41
|
+
]);
|
|
42
|
+
const allRowsSelected = React.useMemo(()=>{
|
|
43
|
+
if (selectionMode === 'single') {
|
|
44
|
+
const selectedRow = Array.from(selected)[0];
|
|
45
|
+
return selectableRowIds.has(selectedRow);
|
|
46
|
+
}
|
|
47
|
+
// multiselect case
|
|
48
|
+
if (selected.size < selectableRowIds.size) {
|
|
49
|
+
return false;
|
|
50
|
+
}
|
|
51
|
+
let res = true;
|
|
52
|
+
selectableRowIds.forEach((selectableRowId)=>{
|
|
53
|
+
if (!selected.has(selectableRowId)) {
|
|
54
|
+
res = false;
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
return res;
|
|
58
|
+
}, [
|
|
59
|
+
selectableRowIds,
|
|
60
|
+
selected,
|
|
61
|
+
selectionMode
|
|
62
|
+
]);
|
|
63
|
+
const someRowsSelected = React.useMemo(()=>{
|
|
64
|
+
if (selected.size <= 0) {
|
|
65
|
+
return false;
|
|
66
|
+
}
|
|
67
|
+
let res = false;
|
|
68
|
+
selectableRowIds.forEach((selectableRowId)=>{
|
|
69
|
+
if (selected.has(selectableRowId)) {
|
|
70
|
+
res = true;
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
return res;
|
|
74
|
+
}, [
|
|
75
|
+
selectableRowIds,
|
|
76
|
+
selected
|
|
77
|
+
]);
|
|
29
78
|
const toggleAllRows = useEventCallback((e)=>{
|
|
30
79
|
var _getRowId;
|
|
31
80
|
selectionMethods.toggleAllItems(e, items.map((item, i)=>{
|
|
@@ -41,8 +90,8 @@ export function useTableSelectionState(tableState, options) {
|
|
|
41
90
|
...tableState,
|
|
42
91
|
selection: {
|
|
43
92
|
selectionMode,
|
|
44
|
-
someRowsSelected
|
|
45
|
-
allRowsSelected
|
|
93
|
+
someRowsSelected,
|
|
94
|
+
allRowsSelected,
|
|
46
95
|
selectedRows: selected,
|
|
47
96
|
toggleRow,
|
|
48
97
|
toggleAllRows,
|