@fluentui/react-table 9.0.0-alpha.11 → 9.0.0-alpha.12
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 +78 -1
- package/CHANGELOG.md +20 -2
- package/dist/index.d.ts +9 -9
- package/lib/components/TableHeader/useTableHeader.js +1 -8
- package/lib/components/TableHeader/useTableHeader.js.map +1 -1
- package/lib/components/TableRow/useTableRowStyles.js +5 -5
- package/lib/components/TableRow/useTableRowStyles.js.map +1 -1
- package/lib/hooks/selectionManager.js +16 -16
- package/lib/hooks/selectionManager.js.map +1 -1
- package/lib/hooks/types.js.map +1 -1
- package/lib/hooks/useSelection.js +7 -7
- package/lib/hooks/useSelection.js.map +1 -1
- package/lib/hooks/useSort.js +4 -4
- package/lib/hooks/useSort.js.map +1 -1
- package/lib-commonjs/components/TableHeader/useTableHeader.js +1 -9
- package/lib-commonjs/components/TableHeader/useTableHeader.js.map +1 -1
- package/lib-commonjs/components/TableRow/useTableRowStyles.js +5 -5
- package/lib-commonjs/components/TableRow/useTableRowStyles.js.map +1 -1
- package/lib-commonjs/hooks/selectionManager.js +16 -16
- package/lib-commonjs/hooks/selectionManager.js.map +1 -1
- package/lib-commonjs/hooks/useSelection.js +7 -7
- package/lib-commonjs/hooks/useSelection.js.map +1 -1
- package/lib-commonjs/hooks/useSort.js +4 -4
- package/lib-commonjs/hooks/useSort.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,84 @@
|
|
|
2
2
|
"name": "@fluentui/react-table",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 17 Nov 2022 23:02:45 GMT",
|
|
6
|
+
"tag": "@fluentui/react-table_v9.0.0-alpha.12",
|
|
7
|
+
"version": "9.0.0-alpha.12",
|
|
8
|
+
"comments": {
|
|
9
|
+
"none": [
|
|
10
|
+
{
|
|
11
|
+
"author": "martinhochel@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-table",
|
|
13
|
+
"commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
|
|
14
|
+
"comment": "chore: update package scaffold"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
"prerelease": [
|
|
18
|
+
{
|
|
19
|
+
"author": "lingfangao@hotmail.com",
|
|
20
|
+
"package": "@fluentui/react-table",
|
|
21
|
+
"commit": "aef719f25d85a8d83f3d6b44d61b75d55f805ee8",
|
|
22
|
+
"comment": "BREAKING: `sortable` prop no longer enables `TableHeader` navigation"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"author": "tigeroakes@microsoft.com",
|
|
26
|
+
"package": "@fluentui/react-table",
|
|
27
|
+
"commit": "2c004858da092ef9ae0aad2f96b313ec0102913d",
|
|
28
|
+
"comment": "fix: Match hover background colors between table row and cell actions"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"author": "lingfangao@hotmail.com",
|
|
32
|
+
"package": "@fluentui/react-table",
|
|
33
|
+
"commit": "b49ab600353c77e48b67cc23bcb422535cad1b83",
|
|
34
|
+
"comment": "BREAKING: Headless table callbacks require event"
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
"author": "beachball",
|
|
38
|
+
"package": "@fluentui/react-table",
|
|
39
|
+
"comment": "Bump @fluentui/react-aria to v9.3.2",
|
|
40
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"author": "beachball",
|
|
44
|
+
"package": "@fluentui/react-table",
|
|
45
|
+
"comment": "Bump @fluentui/react-avatar to v9.2.7",
|
|
46
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"author": "beachball",
|
|
50
|
+
"package": "@fluentui/react-table",
|
|
51
|
+
"comment": "Bump @fluentui/react-checkbox to v9.0.13",
|
|
52
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"author": "beachball",
|
|
56
|
+
"package": "@fluentui/react-table",
|
|
57
|
+
"comment": "Bump @fluentui/react-context-selector to v9.1.2",
|
|
58
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"author": "beachball",
|
|
62
|
+
"package": "@fluentui/react-table",
|
|
63
|
+
"comment": "Bump @fluentui/react-radio to v9.0.12",
|
|
64
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"author": "beachball",
|
|
68
|
+
"package": "@fluentui/react-table",
|
|
69
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.1",
|
|
70
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
"author": "beachball",
|
|
74
|
+
"package": "@fluentui/react-table",
|
|
75
|
+
"comment": "Bump @fluentui/react-utilities to v9.2.2",
|
|
76
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"date": "Fri, 11 Nov 2022 14:57:41 GMT",
|
|
6
83
|
"tag": "@fluentui/react-table_v9.0.0-alpha.11",
|
|
7
84
|
"version": "9.0.0-alpha.11",
|
|
8
85
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-table
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 17 Nov 2022 23:02:45 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-alpha.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.12)
|
|
8
|
+
|
|
9
|
+
Thu, 17 Nov 2022 23:02:45 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.11..@fluentui/react-table_v9.0.0-alpha.12)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- BREAKING: `sortable` prop no longer enables `TableHeader` navigation ([PR #25656](https://github.com/microsoft/fluentui/pull/25656) by lingfangao@hotmail.com)
|
|
15
|
+
- fix: Match hover background colors between table row and cell actions ([PR #25628](https://github.com/microsoft/fluentui/pull/25628) by tigeroakes@microsoft.com)
|
|
16
|
+
- BREAKING: Headless table callbacks require event ([PR #25658](https://github.com/microsoft/fluentui/pull/25658) by lingfangao@hotmail.com)
|
|
17
|
+
- Bump @fluentui/react-aria to v9.3.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
18
|
+
- Bump @fluentui/react-avatar to v9.2.7 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
19
|
+
- Bump @fluentui/react-checkbox to v9.0.13 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
20
|
+
- Bump @fluentui/react-context-selector to v9.1.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
21
|
+
- Bump @fluentui/react-radio to v9.0.12 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
22
|
+
- Bump @fluentui/react-tabster to v9.3.1 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
23
|
+
- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
|
24
|
+
|
|
7
25
|
## [9.0.0-alpha.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.11)
|
|
8
26
|
|
|
9
|
-
Fri, 11 Nov 2022 14:
|
|
27
|
+
Fri, 11 Nov 2022 14:57:41 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.10..@fluentui/react-table_v9.0.0-alpha.11)
|
|
11
29
|
|
|
12
30
|
### Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -607,23 +607,23 @@ export declare interface TableSelectionState {
|
|
|
607
607
|
/**
|
|
608
608
|
* Clears all selected rows
|
|
609
609
|
*/
|
|
610
|
-
clearRows: () => void;
|
|
610
|
+
clearRows: (e: React_2.SyntheticEvent) => void;
|
|
611
611
|
/**
|
|
612
612
|
* Selects single row
|
|
613
613
|
*/
|
|
614
|
-
selectRow: (rowId: RowId) => void;
|
|
614
|
+
selectRow: (e: React_2.SyntheticEvent, rowId: RowId) => void;
|
|
615
615
|
/**
|
|
616
616
|
* De-selects single row
|
|
617
617
|
*/
|
|
618
|
-
deselectRow: (rowId: RowId) => void;
|
|
618
|
+
deselectRow: (e: React_2.SyntheticEvent, rowId: RowId) => void;
|
|
619
619
|
/**
|
|
620
620
|
* Toggle selection of all rows
|
|
621
621
|
*/
|
|
622
|
-
toggleAllRows: () => void;
|
|
622
|
+
toggleAllRows: (e: React_2.SyntheticEvent) => void;
|
|
623
623
|
/**
|
|
624
624
|
* Toggle selection of single row
|
|
625
625
|
*/
|
|
626
|
-
toggleRow: (rowId: RowId) => void;
|
|
626
|
+
toggleRow: (e: React_2.SyntheticEvent, rowId: RowId) => void;
|
|
627
627
|
/**
|
|
628
628
|
* Collection of row ids corresponding to selected rows
|
|
629
629
|
*/
|
|
@@ -658,11 +658,11 @@ export declare interface TableSortState<TItem> {
|
|
|
658
658
|
/**
|
|
659
659
|
* Set the sort direction for the specified column
|
|
660
660
|
*/
|
|
661
|
-
setColumnSort: (columnId: ColumnId, sortDirection: SortDirection) => void;
|
|
661
|
+
setColumnSort: (event: React_2.SyntheticEvent, columnId: ColumnId, sortDirection: SortDirection) => void;
|
|
662
662
|
/**
|
|
663
663
|
* Toggles the sort direction for specified column
|
|
664
664
|
*/
|
|
665
|
-
toggleColumnSort: (columnId: ColumnId) => void;
|
|
665
|
+
toggleColumnSort: (event: React_2.SyntheticEvent, columnId: ColumnId) => void;
|
|
666
666
|
/**
|
|
667
667
|
* Returns the sort direction if a column is sorted,
|
|
668
668
|
* returns undefined if the column is not sorted
|
|
@@ -811,7 +811,7 @@ declare interface UseSelectionOptions {
|
|
|
811
811
|
/**
|
|
812
812
|
* Called when selection changes
|
|
813
813
|
*/
|
|
814
|
-
onSelectionChange?: (selectedItems: Set<RowId>) => void;
|
|
814
|
+
onSelectionChange?: (e: React_2.SyntheticEvent, selectedItems: Set<RowId>) => void;
|
|
815
815
|
}
|
|
816
816
|
|
|
817
817
|
export declare function useSort<TItem>(options: UseSortOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
|
|
@@ -828,7 +828,7 @@ declare interface UseSortOptions {
|
|
|
828
828
|
/**
|
|
829
829
|
* Called when sort changes
|
|
830
830
|
*/
|
|
831
|
-
onSortChange?: (state: SortState) => void;
|
|
831
|
+
onSortChange?: (e: React_2.SyntheticEvent, state: SortState) => void;
|
|
832
832
|
}
|
|
833
833
|
|
|
834
834
|
export declare function useTable<TItem>(options: UseTableOptions<TItem>, plugins?: TableStatePlugin[]): HeadlessTableState<TItem>;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { getNativeElementProps } from '@fluentui/react-utilities';
|
|
2
|
-
import { useArrowNavigationGroup } from '@fluentui/react-tabster';
|
|
3
2
|
import { useTableContext } from '../../contexts/tableContext';
|
|
4
3
|
/**
|
|
5
4
|
* Create the state required to render TableHeader.
|
|
@@ -15,13 +14,8 @@ export const useTableHeader_unstable = (props, ref) => {
|
|
|
15
14
|
var _a;
|
|
16
15
|
|
|
17
16
|
const {
|
|
18
|
-
noNativeElements
|
|
19
|
-
sortable
|
|
17
|
+
noNativeElements
|
|
20
18
|
} = useTableContext();
|
|
21
|
-
const keyboardNavAttr = useArrowNavigationGroup({
|
|
22
|
-
axis: 'horizontal',
|
|
23
|
-
circular: true
|
|
24
|
-
});
|
|
25
19
|
const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'thead';
|
|
26
20
|
return {
|
|
27
21
|
components: {
|
|
@@ -30,7 +24,6 @@ export const useTableHeader_unstable = (props, ref) => {
|
|
|
30
24
|
root: getNativeElementProps(rootComponent, {
|
|
31
25
|
ref,
|
|
32
26
|
role: rootComponent === 'div' ? 'rowgroup' : undefined,
|
|
33
|
-
...(sortable && keyboardNavAttr),
|
|
34
27
|
...props
|
|
35
28
|
}),
|
|
36
29
|
noNativeElements
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,eAAT,QAAgC,6BAAhC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;;;EAChH,MAAM;IAAE;EAAF,IAAuB,eAAe,EAA5C;EAEA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,OAA7D;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,aAAD,EAAgB;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,UAA1B,GAAuC,SAFJ;MAGzC,GAAG;IAHsC,CAAhB,CAJtB;IASL;EATK,CAAP;AAWD,CAfM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableHeaderProps, TableHeaderState } from './TableHeader.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableHeader.\n *\n * The returned state can be modified with hooks such as useTableHeaderStyles_unstable,\n * before being passed to renderTableHeader_unstable.\n *\n * @param props - props from this instance of TableHeader\n * @param ref - reference to root HTMLElement of TableHeader\n */\nexport const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<HTMLElement>): TableHeaderState => {\n const { noNativeElements } = useTableContext();\n\n const rootComponent = props.as ?? noNativeElements ? 'div' : 'thead';\n return {\n components: {\n root: rootComponent,\n },\n root: getNativeElementProps(rootComponent, {\n ref,\n role: rootComponent === 'div' ? 'rowgroup' : undefined,\n ...props,\n }),\n noNativeElements,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -65,13 +65,13 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
65
65
|
"lj723h": "f1g4hkjv",
|
|
66
66
|
"Bw1l9kw": "flaujjr",
|
|
67
67
|
"B43xm9u": "f15ngxrw",
|
|
68
|
-
"Bs8fhbl": "
|
|
68
|
+
"Bs8fhbl": "f18sq9la",
|
|
69
69
|
"i921ia": "fjbbrdp",
|
|
70
70
|
"Jwef8y": "f1t94bn6",
|
|
71
71
|
"Bi91k9c": "feu1g3u",
|
|
72
|
-
"Bi7d7a3": "
|
|
72
|
+
"Bi7d7a3": "f14h8iit",
|
|
73
73
|
"Bpt6rm4": "f1uorfem",
|
|
74
|
-
"Bt8cqyk": "
|
|
74
|
+
"Bt8cqyk": "f1fcpt6",
|
|
75
75
|
"ff6mpl": "fw60kww"
|
|
76
76
|
},
|
|
77
77
|
"medium": {
|
|
@@ -146,8 +146,8 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
146
146
|
"none": {}
|
|
147
147
|
}, {
|
|
148
148
|
"d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".fblfkud[data-fui-focus-visible]:focus-within .fui-TableSelectionCell{opacity:1;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
149
|
-
"a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".
|
|
150
|
-
"h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".
|
|
149
|
+
"a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".f18sq9la:active .fui-TableSelectionCell{background-color:var(--colorSubtleBackgroundHover);}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
150
|
+
"h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f14h8iit:hover .fui-TableCellActions{background-color:var(--colorSubtleBackgroundHover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".f1fcpt6:hover .fui-TableSelectionCell{background-color:var(--colorSubtleBackgroundHover);}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
151
151
|
"m": [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
|
|
152
152
|
"m": "(forced-colors: active)"
|
|
153
153
|
}], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row',\n },\n\n medium: {\n height: '44px',\n },\n\n small: {\n height: '34px',\n },\n\n smaller: {\n height: '24px',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n\n medium: {\n minHeight: '44px',\n },\n\n small: {\n minHeight: '34px',\n },\n\n smaller: {\n minHeight: '24px',\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle(\n {\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n },\n { selector: 'focus-within' },\n ),\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.outline('2px', 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n { selector: 'focus', enableOutline: true },\n ),\n },\n\n rootInteractive: {\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n backgroundColor: tokens.
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row',\n },\n\n medium: {\n height: '44px',\n },\n\n small: {\n height: '34px',\n },\n\n smaller: {\n height: '24px',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n\n medium: {\n minHeight: '44px',\n },\n\n small: {\n minHeight: '34px',\n },\n\n smaller: {\n minHeight: '24px',\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle(\n {\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n },\n { selector: 'focus-within' },\n ),\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.outline('2px', 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n { selector: 'focus', enableOutline: true },\n ),\n },\n\n rootInteractive: {\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n opacity: 1,\n },\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n opacity: 1,\n },\n },\n },\n\n medium: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n small: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n smaller: {\n fontSize: tokens.fontSizeBase200,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n ':hover': {\n backgroundColor: tokens.colorBrandBackground2,\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n },\n\n '@media(forced-colors: active)': {\n ...shorthands.border('2px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px',\n },\n },\n },\n\n neutral: {\n '@media(forced-colors: active)': {\n ...shorthands.border('2px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px',\n },\n },\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground1Hover,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n },\n\n none: {},\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n const isHeaderRow = useIsInTableHeader();\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableRowClassNames.root,\n styles.root,\n !isHeaderRow && styles.rootInteractive,\n styles[state.size],\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n styles[state.appearance],\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -4,7 +4,7 @@ export function createSelectionManager(mode, onSelectionChange = () => undefined
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
function createMultipleSelectionManager(onSelectionChange) {
|
|
7
|
-
const toggleAllItems = (itemIds, selectedItems) => {
|
|
7
|
+
const toggleAllItems = (e, itemIds, selectedItems) => {
|
|
8
8
|
const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));
|
|
9
9
|
|
|
10
10
|
if (allItemsSelected) {
|
|
@@ -13,31 +13,31 @@ function createMultipleSelectionManager(onSelectionChange) {
|
|
|
13
13
|
itemIds.forEach(itemId => selectedItems.add(itemId));
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
onSelectionChange(new Set(selectedItems));
|
|
16
|
+
onSelectionChange(e, new Set(selectedItems));
|
|
17
17
|
};
|
|
18
18
|
|
|
19
|
-
const toggleItem = (itemId, selectedItems) => {
|
|
19
|
+
const toggleItem = (e, itemId, selectedItems) => {
|
|
20
20
|
if (selectedItems.has(itemId)) {
|
|
21
21
|
selectedItems.delete(itemId);
|
|
22
22
|
} else {
|
|
23
23
|
selectedItems.add(itemId);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
onSelectionChange(new Set(selectedItems));
|
|
26
|
+
onSelectionChange(e, new Set(selectedItems));
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
-
const selectItem = (itemId, selectedItems) => {
|
|
29
|
+
const selectItem = (e, itemId, selectedItems) => {
|
|
30
30
|
selectedItems.add(itemId);
|
|
31
|
-
onSelectionChange(new Set(selectedItems));
|
|
31
|
+
onSelectionChange(e, new Set(selectedItems));
|
|
32
32
|
};
|
|
33
33
|
|
|
34
|
-
const deselectItem = (itemId, selectedItems) => {
|
|
34
|
+
const deselectItem = (e, itemId, selectedItems) => {
|
|
35
35
|
selectedItems.delete(itemId);
|
|
36
|
-
onSelectionChange(new Set(selectedItems));
|
|
36
|
+
onSelectionChange(e, new Set(selectedItems));
|
|
37
37
|
};
|
|
38
38
|
|
|
39
|
-
const clearItems =
|
|
40
|
-
onSelectionChange(new Set());
|
|
39
|
+
const clearItems = e => {
|
|
40
|
+
onSelectionChange(e, new Set());
|
|
41
41
|
};
|
|
42
42
|
|
|
43
43
|
const isSelected = (itemId, selectedItems) => {
|
|
@@ -55,20 +55,20 @@ function createMultipleSelectionManager(onSelectionChange) {
|
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
function createSingleSelectionManager(onSelectionChange) {
|
|
58
|
-
const toggleItem = itemId => {
|
|
59
|
-
onSelectionChange(new Set([itemId]));
|
|
58
|
+
const toggleItem = (e, itemId) => {
|
|
59
|
+
onSelectionChange(e, new Set([itemId]));
|
|
60
60
|
};
|
|
61
61
|
|
|
62
|
-
const clearItems =
|
|
63
|
-
onSelectionChange(new Set());
|
|
62
|
+
const clearItems = e => {
|
|
63
|
+
onSelectionChange(e, new Set());
|
|
64
64
|
};
|
|
65
65
|
|
|
66
66
|
const isSelected = (itemId, selectedItems) => {
|
|
67
67
|
return selectedItems.has(itemId);
|
|
68
68
|
};
|
|
69
69
|
|
|
70
|
-
const selectItem = itemId => {
|
|
71
|
-
onSelectionChange(new Set([itemId]));
|
|
70
|
+
const selectItem = (e, itemId) => {
|
|
71
|
+
onSelectionChange(e, new Set([itemId]));
|
|
72
72
|
};
|
|
73
73
|
|
|
74
74
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/hooks/selectionManager.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/hooks/selectionManager.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { SelectionMode } from './types';\n\ntype OnSelectionChangeCallback = (e: React.SyntheticEvent | Event, selectedItems: Set<SelectionItemId>) => void;\n\nexport interface SelectionManager {\n toggleItem(e: React.SyntheticEvent | Event, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n selectItem(e: React.SyntheticEvent | Event, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n deselectItem(e: React.SyntheticEvent | Event, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n clearItems(e: React.SyntheticEvent | Event): void;\n isSelected(id: SelectionItemId, selectedItems: Set<SelectionItemId>): boolean;\n toggleAllItems(\n e: React.SyntheticEvent | Event,\n itemIds: SelectionItemId[],\n selectedItems: Set<SelectionItemId>,\n ): void;\n}\n\nexport type SelectionItemId = string | number;\n\nexport function createSelectionManager(\n mode: SelectionMode,\n onSelectionChange: OnSelectionChangeCallback = () => undefined,\n): SelectionManager {\n const managerFactory = mode === 'multiselect' ? createMultipleSelectionManager : createSingleSelectionManager;\n\n return managerFactory(onSelectionChange);\n}\n\nfunction createMultipleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n const toggleAllItems: SelectionManager['toggleAllItems'] = (e, itemIds, selectedItems) => {\n const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));\n\n if (allItemsSelected) {\n selectedItems.clear();\n } else {\n itemIds.forEach(itemId => selectedItems.add(itemId));\n }\n\n onSelectionChange(e, new Set(selectedItems));\n };\n\n const toggleItem: SelectionManager['toggleItem'] = (e, itemId, selectedItems) => {\n if (selectedItems.has(itemId)) {\n selectedItems.delete(itemId);\n } else {\n selectedItems.add(itemId);\n }\n\n onSelectionChange(e, new Set(selectedItems));\n };\n\n const selectItem: SelectionManager['selectItem'] = (e, itemId, selectedItems) => {\n selectedItems.add(itemId);\n onSelectionChange(e, new Set(selectedItems));\n };\n\n const deselectItem: SelectionManager['deselectItem'] = (e, itemId, selectedItems) => {\n selectedItems.delete(itemId);\n onSelectionChange(e, new Set(selectedItems));\n };\n\n const clearItems: SelectionManager['clearItems'] = e => {\n onSelectionChange(e, new Set());\n };\n\n const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n return selectedItems.has(itemId);\n };\n\n return {\n toggleItem,\n selectItem,\n deselectItem,\n clearItems,\n isSelected,\n toggleAllItems,\n };\n}\n\nfunction createSingleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n const toggleItem: SelectionManager['toggleItem'] = (e, itemId) => {\n onSelectionChange(e, new Set([itemId]));\n };\n\n const clearItems: SelectionManager['clearItems'] = e => {\n onSelectionChange(e, new Set<SelectionItemId>());\n };\n\n const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n return selectedItems.has(itemId);\n };\n\n const selectItem: SelectionManager['selectItem'] = (e, itemId) => {\n onSelectionChange(e, new Set([itemId]));\n };\n\n return {\n deselectItem: clearItems,\n selectItem,\n toggleAllItems: () => {\n if (process.env.NODE_ENV !== 'production') {\n throw new Error('[react-table]: `toggleAllItems` should not be used in single selection mode');\n }\n\n return undefined;\n },\n toggleItem,\n clearItems,\n isSelected,\n };\n}\n"],"sourceRoot":"../src/"}
|
package/lib/hooks/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SortDirection } from '../components/Table/Table.types';\n\nexport type RowId = string | number;\nexport type ColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n sortColumn: ColumnId | undefined;\n sortDirection: SortDirection;\n}\n\nexport interface CreateColumnOptions<TItem> extends Partial<ColumnDefinition<TItem>> {\n columnId: ColumnId;\n}\n\nexport interface ColumnDefinition<TItem> {\n columnId: ColumnId;\n compare: (a: TItem, b: TItem) => number;\n renderHeaderCell: () => React.ReactNode;\n renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (\n row: RowState<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n /**\n * Current sort direction\n */\n sortDirection: SortDirection;\n /**\n * Column id of the currently sorted column\n */\n sortColumn: ColumnId | undefined;\n /**\n * Set the sort direction for the specified column\n */\n setColumnSort: (columnId: ColumnId, sortDirection: SortDirection) => void;\n /**\n * Toggles the sort direction for specified column\n */\n toggleColumnSort: (columnId: ColumnId) => void;\n /**\n * Returns the sort direction if a column is sorted,\n * returns undefined if the column is not sorted\n */\n getSortDirection: (columnId: ColumnId) => SortDirection | undefined;\n\n /**\n * Sorts rows and returns a **shallow** copy of original items\n */\n sort: <TRowState extends RowState<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n /**\n * Clears all selected rows\n */\n clearRows: () => void;\n /**\n * Selects single row\n */\n selectRow: (rowId: RowId) => void;\n /**\n * De-selects single row\n */\n deselectRow: (rowId: RowId) => void;\n /**\n * Toggle selection of all rows\n */\n toggleAllRows: () => void;\n /**\n * Toggle selection of single row\n */\n toggleRow: (rowId: RowId) => void;\n /**\n * Collection of row ids corresponding to selected rows\n */\n selectedRows: Set<RowId>;\n /**\n * Whether all rows are selected\n */\n allRowsSelected: boolean;\n /**\n * Whether some rows are selected\n */\n someRowsSelected: boolean;\n\n /**\n * Checks if a given rowId is selected\n */\n isRowSelected: (rowId: RowId) => boolean;\n}\n\nexport interface RowState<TItem> {\n /**\n * User provided data\n */\n item: TItem;\n /**\n * The row id, defaults to index position in the collection\n */\n rowId: RowId;\n}\n\nexport interface TableState<TItem> extends Pick<UseTableOptions<TItem>, 'items' | 'getRowId'> {\n /**\n * The row data for rendering\n * @param rowEnhancer - Enhances the row with extra user data\n */\n getRows: <TRowState extends RowState<TItem> = RowState<TItem>>(\n rowEnhancer?: RowEnhancer<TItem, TRowState>,\n ) => TRowState[];\n /**\n * State and actions to manage row selection\n */\n selection: TableSelectionState;\n /**\n * State and actions to manage row sorting\n */\n sort: TableSortState<TItem>;\n /**\n * Table columns\n */\n columns: ColumnDefinition<TItem>[];\n}\n\nexport interface UseSortOptions {\n /**\n * Used to control sorting\n */\n sortState?: SortState;\n /**\n * Used in uncontrolled mode to set initial sort column and direction on mount\n */\n defaultSortState?: SortState;\n /**\n * Called when sort changes\n */\n onSortChange?: (state: SortState) => void;\n}\n\nexport interface UseSelectionOptions {\n /**\n * Can be multi or single select\n */\n selectionMode: SelectionMode;\n /**\n * Used in uncontrolled mode to set initial selected rows on mount\n */\n defaultSelectedItems?: Set<RowId>;\n /**\n * Used to control row selection\n */\n selectedItems?: Set<RowId>;\n /**\n * Called when selection changes\n */\n onSelectionChange?: (selectedItems: Set<RowId>) => void;\n}\n\nexport interface UseTableOptions<TItem> {\n columns: ColumnDefinition<TItem>[];\n items: TItem[];\n getRowId?: (item: TItem) => RowId;\n}\n\nexport type TableStatePlugin = <TItem>(tableState: TableState<TItem>) => TableState<TItem>;\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { SortDirection } from '../components/Table/Table.types';\n\nexport type RowId = string | number;\nexport type ColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n sortColumn: ColumnId | undefined;\n sortDirection: SortDirection;\n}\n\nexport interface CreateColumnOptions<TItem> extends Partial<ColumnDefinition<TItem>> {\n columnId: ColumnId;\n}\n\nexport interface ColumnDefinition<TItem> {\n columnId: ColumnId;\n compare: (a: TItem, b: TItem) => number;\n renderHeaderCell: () => React.ReactNode;\n renderCell: (item: TItem) => React.ReactNode;\n}\n\nexport type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (\n row: RowState<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n /**\n * Current sort direction\n */\n sortDirection: SortDirection;\n /**\n * Column id of the currently sorted column\n */\n sortColumn: ColumnId | undefined;\n /**\n * Set the sort direction for the specified column\n */\n setColumnSort: (event: React.SyntheticEvent, columnId: ColumnId, sortDirection: SortDirection) => void;\n /**\n * Toggles the sort direction for specified column\n */\n toggleColumnSort: (event: React.SyntheticEvent, columnId: ColumnId) => void;\n /**\n * Returns the sort direction if a column is sorted,\n * returns undefined if the column is not sorted\n */\n getSortDirection: (columnId: ColumnId) => SortDirection | undefined;\n\n /**\n * Sorts rows and returns a **shallow** copy of original items\n */\n sort: <TRowState extends RowState<TItem>>(rows: TRowState[]) => TRowState[];\n}\n\nexport interface TableSelectionState {\n /**\n * Clears all selected rows\n */\n clearRows: (e: React.SyntheticEvent) => void;\n /**\n * Selects single row\n */\n selectRow: (e: React.SyntheticEvent, rowId: RowId) => void;\n /**\n * De-selects single row\n */\n deselectRow: (e: React.SyntheticEvent, rowId: RowId) => void;\n /**\n * Toggle selection of all rows\n */\n toggleAllRows: (e: React.SyntheticEvent) => void;\n /**\n * Toggle selection of single row\n */\n toggleRow: (e: React.SyntheticEvent, rowId: RowId) => void;\n /**\n * Collection of row ids corresponding to selected rows\n */\n selectedRows: Set<RowId>;\n /**\n * Whether all rows are selected\n */\n allRowsSelected: boolean;\n /**\n * Whether some rows are selected\n */\n someRowsSelected: boolean;\n\n /**\n * Checks if a given rowId is selected\n */\n isRowSelected: (rowId: RowId) => boolean;\n}\n\nexport interface RowState<TItem> {\n /**\n * User provided data\n */\n item: TItem;\n /**\n * The row id, defaults to index position in the collection\n */\n rowId: RowId;\n}\n\nexport interface TableState<TItem> extends Pick<UseTableOptions<TItem>, 'items' | 'getRowId'> {\n /**\n * The row data for rendering\n * @param rowEnhancer - Enhances the row with extra user data\n */\n getRows: <TRowState extends RowState<TItem> = RowState<TItem>>(\n rowEnhancer?: RowEnhancer<TItem, TRowState>,\n ) => TRowState[];\n /**\n * State and actions to manage row selection\n */\n selection: TableSelectionState;\n /**\n * State and actions to manage row sorting\n */\n sort: TableSortState<TItem>;\n /**\n * Table columns\n */\n columns: ColumnDefinition<TItem>[];\n}\n\nexport interface UseSortOptions {\n /**\n * Used to control sorting\n */\n sortState?: SortState;\n /**\n * Used in uncontrolled mode to set initial sort column and direction on mount\n */\n defaultSortState?: SortState;\n /**\n * Called when sort changes\n */\n onSortChange?: (e: React.SyntheticEvent, state: SortState) => void;\n}\n\nexport interface UseSelectionOptions {\n /**\n * Can be multi or single select\n */\n selectionMode: SelectionMode;\n /**\n * Used in uncontrolled mode to set initial selected rows on mount\n */\n defaultSelectedItems?: Set<RowId>;\n /**\n * Used to control row selection\n */\n selectedItems?: Set<RowId>;\n /**\n * Called when selection changes\n */\n onSelectionChange?: (e: React.SyntheticEvent, selectedItems: Set<RowId>) => void;\n}\n\nexport interface UseTableOptions<TItem> {\n columns: ColumnDefinition<TItem>[];\n items: TItem[];\n getRowId?: (item: TItem) => RowId;\n}\n\nexport type TableStatePlugin = <TItem>(tableState: TableState<TItem>) => TableState<TItem>;\n"]}
|
|
@@ -37,23 +37,23 @@ export function useSelectionState(tableState, options) {
|
|
|
37
37
|
state: selectedItems
|
|
38
38
|
});
|
|
39
39
|
const selectionManager = React.useMemo(() => {
|
|
40
|
-
return createSelectionManager(selectionMode, newSelectedItems => {
|
|
40
|
+
return createSelectionManager(selectionMode, (e, newSelectedItems) => {
|
|
41
41
|
setSelected(() => {
|
|
42
|
-
onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newSelectedItems);
|
|
42
|
+
onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, newSelectedItems);
|
|
43
43
|
return newSelectedItems;
|
|
44
44
|
});
|
|
45
45
|
});
|
|
46
46
|
}, [onSelectionChange, selectionMode, setSelected]);
|
|
47
|
-
const toggleAllRows = useEventCallback(
|
|
48
|
-
selectionManager.toggleAllItems(items.map((item, i) => {
|
|
47
|
+
const toggleAllRows = useEventCallback(e => {
|
|
48
|
+
selectionManager.toggleAllItems(e, items.map((item, i) => {
|
|
49
49
|
var _a;
|
|
50
50
|
|
|
51
51
|
return (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _a !== void 0 ? _a : i;
|
|
52
52
|
}), selected);
|
|
53
53
|
});
|
|
54
|
-
const toggleRow = useEventCallback(rowId => selectionManager.toggleItem(rowId, selected));
|
|
55
|
-
const deselectRow = useEventCallback(rowId => selectionManager.deselectItem(rowId, selected));
|
|
56
|
-
const selectRow = useEventCallback(rowId => selectionManager.selectItem(rowId, selected));
|
|
54
|
+
const toggleRow = useEventCallback((e, rowId) => selectionManager.toggleItem(e, rowId, selected));
|
|
55
|
+
const deselectRow = useEventCallback((e, rowId) => selectionManager.deselectItem(e, rowId, selected));
|
|
56
|
+
const selectRow = useEventCallback((e, rowId) => selectionManager.selectItem(e, rowId, selected));
|
|
57
57
|
|
|
58
58
|
const isRowSelected = rowId => selectionManager.isSelected(rowId, selected);
|
|
59
59
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,gBAA/B,QAAuD,2BAAvD;AACA,SAAS,sBAAT,QAAuC,oBAAvC;;AAGA,MAAM,IAAI,GAAG,MAAM,SAAnB;;AAEA,OAAO,MAAM,0BAA0B,GAAwB;EAC7D,eAAe,EAAE,KAD4C;EAE7D,SAAS,EAAE,IAFkD;EAG7D,WAAW,EAAE,IAHgD;EAI7D,aAAa,EAAE,MAAM,KAJwC;EAK7D,SAAS,EAAE,IALkD;EAM7D,YAAY,eAAE,IAAI,GAAJ,EAN+C;EAO7D,gBAAgB,EAAE,KAP2C;EAQ7D,aAAa,EAAE,IAR8C;EAS7D,SAAS,EAAE;AATkD,CAAxD;AAYP,OAAM,SAAU,YAAV,CAA8B,OAA9B,EAA0D;EAC9D;EACA;EACA,OAAQ,UAAD,IAAmC,iBAAiB,CAAC,UAAD,EAAa,OAAb,CAA3D;AACD;AAED,OAAM,SAAU,iBAAV,CACJ,UADI,EAEJ,OAFI,EAEwB;EAE5B,MAAM;IAAE,KAAF;IAAS;EAAT,IAAsB,UAA5B;EACA,MAAM;IAAE,aAAF;IAAiB,oBAAjB;IAAuC,aAAvC;IAAsD;EAAtD,IAA4E,OAAlF;EAEA,MAAM,CAAC,QAAD,EAAW,WAAX,IAA0B,oBAAoB,CAAC;IACnD,YAAY,EAAE,IAAI,GAAJ,EADqC;IAEnD,YAAY,EAAE,oBAFqC;IAGnD,KAAK,EAAE;EAH4C,CAAD,CAApD;EAMA,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IAC1C,OAAO,sBAAsB,CAAC,aAAD,EAAgB,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSelection.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { createSelectionManager } from './selectionManager';\nimport type { RowId, TableSelectionState, TableState, UseSelectionOptions } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSelectionState: TableSelectionState = {\n allRowsSelected: false,\n clearRows: noop,\n deselectRow: noop,\n isRowSelected: () => false,\n selectRow: noop,\n selectedRows: new Set(),\n someRowsSelected: false,\n toggleAllRows: noop,\n toggleRow: noop,\n};\n\nexport function useSelection<TItem>(options: UseSelectionOptions) {\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: TableState<TItem>) => useSelectionState(tableState, options);\n}\n\nexport function useSelectionState<TItem>(\n tableState: TableState<TItem>,\n options: UseSelectionOptions,\n): TableState<TItem> {\n const { items, getRowId } = tableState;\n const { selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;\n\n const [selected, setSelected] = useControllableState({\n initialState: new Set<RowId>(),\n defaultState: defaultSelectedItems,\n state: selectedItems,\n });\n\n const selectionManager = React.useMemo(() => {\n return createSelectionManager(selectionMode, (e, newSelectedItems) => {\n setSelected(() => {\n onSelectionChange?.(e as React.SyntheticEvent, newSelectedItems);\n return newSelectedItems;\n });\n });\n }, [onSelectionChange, selectionMode, setSelected]);\n\n const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(e => {\n selectionManager.toggleAllItems(\n e,\n items.map((item, i) => getRowId?.(item) ?? i),\n selected,\n );\n });\n\n const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((e, rowId: RowId) =>\n selectionManager.toggleItem(e, rowId, selected),\n );\n\n const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((e, rowId: RowId) =>\n selectionManager.deselectItem(e, rowId, selected),\n );\n\n const selectRow: TableSelectionState['selectRow'] = useEventCallback((e, rowId: RowId) =>\n selectionManager.selectItem(e, rowId, selected),\n );\n\n const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: RowId) =>\n selectionManager.isSelected(rowId, selected);\n\n return {\n ...tableState,\n selection: {\n someRowsSelected: selected.size > 0,\n allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length,\n selectedRows: selected,\n toggleRow,\n toggleAllRows,\n clearRows: selectionManager.clearItems,\n deselectRow,\n selectRow,\n isRowSelected,\n },\n };\n}\n"],"sourceRoot":"../src/"}
|
package/lib/hooks/useSort.js
CHANGED
|
@@ -37,7 +37,7 @@ export function useSortState(tableState, options) {
|
|
|
37
37
|
sortDirection
|
|
38
38
|
} = sorted;
|
|
39
39
|
|
|
40
|
-
const toggleColumnSort = columnId => {
|
|
40
|
+
const toggleColumnSort = (e, columnId) => {
|
|
41
41
|
setSorted(s => {
|
|
42
42
|
const newState = { ...s,
|
|
43
43
|
sortColumn: columnId
|
|
@@ -49,17 +49,17 @@ export function useSortState(tableState, options) {
|
|
|
49
49
|
newState.sortDirection = 'ascending';
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(newState);
|
|
52
|
+
onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
|
|
53
53
|
return newState;
|
|
54
54
|
});
|
|
55
55
|
};
|
|
56
56
|
|
|
57
|
-
const setColumnSort = (nextSortColumn, nextSortDirection) => {
|
|
57
|
+
const setColumnSort = (e, nextSortColumn, nextSortDirection) => {
|
|
58
58
|
const newState = {
|
|
59
59
|
sortColumn: nextSortColumn,
|
|
60
60
|
sortDirection: nextSortDirection
|
|
61
61
|
};
|
|
62
|
-
onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(newState);
|
|
62
|
+
onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
|
|
63
63
|
setSorted(newState);
|
|
64
64
|
};
|
|
65
65
|
|
package/lib/hooks/useSort.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSort.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSort.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type { ColumnId, RowState, SortState, TableSortState, TableState, UseSortOptions } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSortState: TableSortState<unknown> = {\n getSortDirection: () => 'ascending',\n setColumnSort: noop,\n sort: <TRowState extends RowState<unknown>>(rows: TRowState[]) => [...rows],\n sortColumn: undefined,\n sortDirection: 'ascending',\n toggleColumnSort: noop,\n};\n\nexport function useSort<TItem>(options: UseSortOptions) {\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: TableState<TItem>) => useSortState(tableState, options);\n}\n\nexport function useSortState<TItem>(tableState: TableState<TItem>, options: UseSortOptions): TableState<TItem> {\n const { columns } = tableState;\n const { sortState, defaultSortState, onSortChange } = options;\n\n const [sorted, setSorted] = useControllableState<SortState>({\n initialState: {\n sortDirection: 'ascending' as const,\n sortColumn: undefined,\n },\n defaultState: defaultSortState,\n state: sortState,\n });\n\n const { sortColumn, sortDirection } = sorted;\n\n const toggleColumnSort = (e: React.SyntheticEvent, columnId: ColumnId | undefined) => {\n setSorted(s => {\n const newState = { ...s, sortColumn: columnId };\n if (s.sortColumn === columnId) {\n newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n } else {\n newState.sortDirection = 'ascending';\n }\n\n onSortChange?.(e, newState);\n return newState;\n });\n };\n\n const setColumnSort: TableSortState<TItem>['setColumnSort'] = (e, nextSortColumn, nextSortDirection) => {\n const newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };\n onSortChange?.(e, newState);\n setSorted(newState);\n };\n\n const sort = <TRowState extends RowState<TItem>>(rows: TRowState[]) => {\n return rows.slice().sort((a, b) => {\n const sortColumnDef = columns.find(column => column.columnId === sortColumn);\n if (!sortColumnDef?.compare) {\n return 0;\n }\n\n const mod = sortDirection === 'ascending' ? 1 : -1;\n return sortColumnDef.compare(a.item, b.item) * mod;\n });\n };\n\n const getSortDirection: TableSortState<TItem>['getSortDirection'] = (columnId: ColumnId) => {\n return sortColumn === columnId ? sortDirection : undefined;\n };\n\n return {\n ...tableState,\n sort: {\n sort,\n sortColumn,\n sortDirection,\n setColumnSort,\n toggleColumnSort,\n getSortDirection,\n },\n };\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -7,8 +7,6 @@ exports.useTableHeader_unstable = void 0;
|
|
|
7
7
|
|
|
8
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
9
|
|
|
10
|
-
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
11
|
-
|
|
12
10
|
const tableContext_1 = /*#__PURE__*/require("../../contexts/tableContext");
|
|
13
11
|
/**
|
|
14
12
|
* Create the state required to render TableHeader.
|
|
@@ -25,13 +23,8 @@ const useTableHeader_unstable = (props, ref) => {
|
|
|
25
23
|
var _a;
|
|
26
24
|
|
|
27
25
|
const {
|
|
28
|
-
noNativeElements
|
|
29
|
-
sortable
|
|
26
|
+
noNativeElements
|
|
30
27
|
} = tableContext_1.useTableContext();
|
|
31
|
-
const keyboardNavAttr = react_tabster_1.useArrowNavigationGroup({
|
|
32
|
-
axis: 'horizontal',
|
|
33
|
-
circular: true
|
|
34
|
-
});
|
|
35
28
|
const rootComponent = ((_a = props.as) !== null && _a !== void 0 ? _a : noNativeElements) ? 'div' : 'thead';
|
|
36
29
|
return {
|
|
37
30
|
components: {
|
|
@@ -40,7 +33,6 @@ const useTableHeader_unstable = (props, ref) => {
|
|
|
40
33
|
root: react_utilities_1.getNativeElementProps(rootComponent, {
|
|
41
34
|
ref,
|
|
42
35
|
role: rootComponent === 'div' ? 'rowgroup' : undefined,
|
|
43
|
-
...(sortable && keyboardNavAttr),
|
|
44
36
|
...props
|
|
45
37
|
}),
|
|
46
38
|
noNativeElements
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,cAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;;;EAChH,MAAM;IAAE;EAAF,IAAuB,cAAA,CAAA,eAAA,EAA7B;EAEA,MAAM,aAAa,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,gBAAZ,IAA+B,KAA/B,GAAuC,OAA7D;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,aAAtB,EAAqC;MACzC,GADyC;MAEzC,IAAI,EAAE,aAAa,KAAK,KAAlB,GAA0B,UAA1B,GAAuC,SAFJ;MAGzC,GAAG;IAHsC,CAArC,CAJD;IASL;EATK,CAAP;AAWD,CAfM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { TableHeaderProps, TableHeaderState } from './TableHeader.types';\nimport { useTableContext } from '../../contexts/tableContext';\n\n/**\n * Create the state required to render TableHeader.\n *\n * The returned state can be modified with hooks such as useTableHeaderStyles_unstable,\n * before being passed to renderTableHeader_unstable.\n *\n * @param props - props from this instance of TableHeader\n * @param ref - reference to root HTMLElement of TableHeader\n */\nexport const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<HTMLElement>): TableHeaderState => {\n const { noNativeElements } = useTableContext();\n\n const rootComponent = props.as ?? noNativeElements ? 'div' : 'thead';\n return {\n components: {\n root: rootComponent,\n },\n root: getNativeElementProps(rootComponent, {\n ref,\n role: rootComponent === 'div' ? 'rowgroup' : undefined,\n ...props,\n }),\n noNativeElements,\n };\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -78,13 +78,13 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
78
78
|
"lj723h": "f1g4hkjv",
|
|
79
79
|
"Bw1l9kw": "flaujjr",
|
|
80
80
|
"B43xm9u": "f15ngxrw",
|
|
81
|
-
"Bs8fhbl": "
|
|
81
|
+
"Bs8fhbl": "f18sq9la",
|
|
82
82
|
"i921ia": "fjbbrdp",
|
|
83
83
|
"Jwef8y": "f1t94bn6",
|
|
84
84
|
"Bi91k9c": "feu1g3u",
|
|
85
|
-
"Bi7d7a3": "
|
|
85
|
+
"Bi7d7a3": "f14h8iit",
|
|
86
86
|
"Bpt6rm4": "f1uorfem",
|
|
87
|
-
"Bt8cqyk": "
|
|
87
|
+
"Bt8cqyk": "f1fcpt6",
|
|
88
88
|
"ff6mpl": "fw60kww"
|
|
89
89
|
},
|
|
90
90
|
"medium": {
|
|
@@ -159,8 +159,8 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
159
159
|
"none": {}
|
|
160
160
|
}, {
|
|
161
161
|
"d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".fblfkud[data-fui-focus-visible]:focus-within .fui-TableSelectionCell{opacity:1;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
162
|
-
"a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".
|
|
163
|
-
"h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".
|
|
162
|
+
"a": [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".flaujjr:active .fui-TableCellActions{background-color:var(--colorSubtleBackgroundPressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".f18sq9la:active .fui-TableSelectionCell{background-color:var(--colorSubtleBackgroundHover);}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".ftepret:active{background-color:var(--colorBrandBackgroundInvertedSelected);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
163
|
+
"h": [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f14h8iit:hover .fui-TableCellActions{background-color:var(--colorSubtleBackgroundHover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".f1fcpt6:hover .fui-TableSelectionCell{background-color:var(--colorSubtleBackgroundHover);}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f121v1wq:hover{background-color:var(--colorBrandBackground2);}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
164
164
|
"m": [["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
|
|
165
165
|
"m": "(forced-colors: active)"
|
|
166
166
|
}], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row',\n },\n\n medium: {\n height: '44px',\n },\n\n small: {\n height: '34px',\n },\n\n smaller: {\n height: '24px',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n\n medium: {\n minHeight: '44px',\n },\n\n small: {\n minHeight: '34px',\n },\n\n smaller: {\n minHeight: '24px',\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle(\n {\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n },\n { selector: 'focus-within' },\n ),\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.outline('2px', 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n { selector: 'focus', enableOutline: true },\n ),\n },\n\n rootInteractive: {\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n backgroundColor: tokens.
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { TableRowSlots, TableRowState } from './TableRow.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames: SlotClassNames<TableRowSlots> = {\n root: tableRowClassName,\n};\n\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row',\n },\n\n medium: {\n height: '44px',\n },\n\n small: {\n height: '34px',\n },\n\n smaller: {\n height: '24px',\n },\n});\n\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n },\n\n medium: {\n minHeight: '44px',\n },\n\n small: {\n minHeight: '34px',\n },\n\n smaller: {\n minHeight: '24px',\n },\n});\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle(\n {\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1,\n },\n },\n { selector: 'focus-within' },\n ),\n ...createCustomFocusIndicatorStyle(\n {\n ...shorthands.outline('2px', 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n },\n { selector: 'focus', enableOutline: true },\n ),\n },\n\n rootInteractive: {\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n opacity: 1,\n },\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n opacity: 1,\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n opacity: 1,\n },\n },\n },\n\n medium: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n small: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n },\n\n smaller: {\n fontSize: tokens.fontSizeBase200,\n },\n\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n ':hover': {\n backgroundColor: tokens.colorBrandBackground2,\n },\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundInvertedSelected,\n },\n\n '@media(forced-colors: active)': {\n ...shorthands.border('2px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px',\n },\n },\n },\n\n neutral: {\n '@media(forced-colors: active)': {\n ...shorthands.border('2px', 'solid', 'transparent'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n boxSizing: 'border-box',\n ':focus-visible': {\n outlineOffset: '-4px',\n },\n },\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground1Hover,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n },\n ...shorthands.borderColor(tokens.colorNeutralStrokeOnBrand),\n },\n\n none: {},\n});\n\n/**\n * Apply styling to the TableRow slots based on the state\n */\nexport const useTableRowStyles_unstable = (state: TableRowState): TableRowState => {\n const isHeaderRow = useIsInTableHeader();\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles(),\n };\n state.root.className = mergeClasses(\n tableRowClassNames.root,\n styles.root,\n !isHeaderRow && styles.rootInteractive,\n styles[state.size],\n state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root,\n state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size],\n styles[state.appearance],\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -13,7 +13,7 @@ function createSelectionManager(mode, onSelectionChange = () => undefined) {
|
|
|
13
13
|
exports.createSelectionManager = createSelectionManager;
|
|
14
14
|
|
|
15
15
|
function createMultipleSelectionManager(onSelectionChange) {
|
|
16
|
-
const toggleAllItems = (itemIds, selectedItems) => {
|
|
16
|
+
const toggleAllItems = (e, itemIds, selectedItems) => {
|
|
17
17
|
const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));
|
|
18
18
|
|
|
19
19
|
if (allItemsSelected) {
|
|
@@ -22,31 +22,31 @@ function createMultipleSelectionManager(onSelectionChange) {
|
|
|
22
22
|
itemIds.forEach(itemId => selectedItems.add(itemId));
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
onSelectionChange(new Set(selectedItems));
|
|
25
|
+
onSelectionChange(e, new Set(selectedItems));
|
|
26
26
|
};
|
|
27
27
|
|
|
28
|
-
const toggleItem = (itemId, selectedItems) => {
|
|
28
|
+
const toggleItem = (e, itemId, selectedItems) => {
|
|
29
29
|
if (selectedItems.has(itemId)) {
|
|
30
30
|
selectedItems.delete(itemId);
|
|
31
31
|
} else {
|
|
32
32
|
selectedItems.add(itemId);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
onSelectionChange(new Set(selectedItems));
|
|
35
|
+
onSelectionChange(e, new Set(selectedItems));
|
|
36
36
|
};
|
|
37
37
|
|
|
38
|
-
const selectItem = (itemId, selectedItems) => {
|
|
38
|
+
const selectItem = (e, itemId, selectedItems) => {
|
|
39
39
|
selectedItems.add(itemId);
|
|
40
|
-
onSelectionChange(new Set(selectedItems));
|
|
40
|
+
onSelectionChange(e, new Set(selectedItems));
|
|
41
41
|
};
|
|
42
42
|
|
|
43
|
-
const deselectItem = (itemId, selectedItems) => {
|
|
43
|
+
const deselectItem = (e, itemId, selectedItems) => {
|
|
44
44
|
selectedItems.delete(itemId);
|
|
45
|
-
onSelectionChange(new Set(selectedItems));
|
|
45
|
+
onSelectionChange(e, new Set(selectedItems));
|
|
46
46
|
};
|
|
47
47
|
|
|
48
|
-
const clearItems =
|
|
49
|
-
onSelectionChange(new Set());
|
|
48
|
+
const clearItems = e => {
|
|
49
|
+
onSelectionChange(e, new Set());
|
|
50
50
|
};
|
|
51
51
|
|
|
52
52
|
const isSelected = (itemId, selectedItems) => {
|
|
@@ -64,20 +64,20 @@ function createMultipleSelectionManager(onSelectionChange) {
|
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
function createSingleSelectionManager(onSelectionChange) {
|
|
67
|
-
const toggleItem = itemId => {
|
|
68
|
-
onSelectionChange(new Set([itemId]));
|
|
67
|
+
const toggleItem = (e, itemId) => {
|
|
68
|
+
onSelectionChange(e, new Set([itemId]));
|
|
69
69
|
};
|
|
70
70
|
|
|
71
|
-
const clearItems =
|
|
72
|
-
onSelectionChange(new Set());
|
|
71
|
+
const clearItems = e => {
|
|
72
|
+
onSelectionChange(e, new Set());
|
|
73
73
|
};
|
|
74
74
|
|
|
75
75
|
const isSelected = (itemId, selectedItems) => {
|
|
76
76
|
return selectedItems.has(itemId);
|
|
77
77
|
};
|
|
78
78
|
|
|
79
|
-
const selectItem = itemId => {
|
|
80
|
-
onSelectionChange(new Set([itemId]));
|
|
79
|
+
const selectItem = (e, itemId) => {
|
|
80
|
+
onSelectionChange(e, new Set([itemId]));
|
|
81
81
|
};
|
|
82
82
|
|
|
83
83
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/hooks/selectionManager.ts"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/hooks/selectionManager.ts"],"names":[],"mappings":";;;;;;;AAoBA,SAAgB,sBAAhB,CACE,IADF,EAEE,iBAAA,GAA+C,MAAM,SAFvD,EAEgE;EAE9D,MAAM,cAAc,GAAG,IAAI,KAAK,aAAT,GAAyB,8BAAzB,GAA0D,4BAAjF;EAEA,OAAO,cAAc,CAAC,iBAAD,CAArB;AACD;;AAPD,OAAA,CAAA,sBAAA,GAAA,sBAAA;;AASA,SAAS,8BAAT,CAAwC,iBAAxC,EAAoF;EAClF,MAAM,cAAc,GAAuC,CAAC,CAAD,EAAI,OAAJ,EAAa,aAAb,KAA8B;IACvF,MAAM,gBAAgB,GAAG,OAAO,CAAC,KAAR,CAAc,MAAM,IAAI,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAxB,CAAzB;;IAEA,IAAI,gBAAJ,EAAsB;MACpB,aAAa,CAAC,KAAd;IACD,CAFD,MAEO;MACL,OAAO,CAAC,OAAR,CAAgB,MAAM,IAAI,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAA1B;IACD;;IAED,iBAAiB,CAAC,CAAD,EAAI,IAAI,GAAJ,CAAQ,aAAR,CAAJ,CAAjB;EACD,CAVD;;EAYA,MAAM,UAAU,GAAmC,CAAC,CAAD,EAAI,MAAJ,EAAY,aAAZ,KAA6B;IAC9E,IAAI,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAJ,EAA+B;MAC7B,aAAa,CAAC,MAAd,CAAqB,MAArB;IACD,CAFD,MAEO;MACL,aAAa,CAAC,GAAd,CAAkB,MAAlB;IACD;;IAED,iBAAiB,CAAC,CAAD,EAAI,IAAI,GAAJ,CAAQ,aAAR,CAAJ,CAAjB;EACD,CARD;;EAUA,MAAM,UAAU,GAAmC,CAAC,CAAD,EAAI,MAAJ,EAAY,aAAZ,KAA6B;IAC9E,aAAa,CAAC,GAAd,CAAkB,MAAlB;IACA,iBAAiB,CAAC,CAAD,EAAI,IAAI,GAAJ,CAAQ,aAAR,CAAJ,CAAjB;EACD,CAHD;;EAKA,MAAM,YAAY,GAAqC,CAAC,CAAD,EAAI,MAAJ,EAAY,aAAZ,KAA6B;IAClF,aAAa,CAAC,MAAd,CAAqB,MAArB;IACA,iBAAiB,CAAC,CAAD,EAAI,IAAI,GAAJ,CAAQ,aAAR,CAAJ,CAAjB;EACD,CAHD;;EAKA,MAAM,UAAU,GAAmC,CAAC,IAAG;IACrD,iBAAiB,CAAC,CAAD,EAAI,IAAI,GAAJ,EAAJ,CAAjB;EACD,CAFD;;EAIA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,OAAO,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAP;EACD,CAFD;;EAIA,OAAO;IACL,UADK;IAEL,UAFK;IAGL,YAHK;IAIL,UAJK;IAKL,UALK;IAML;EANK,CAAP;AAQD;;AAED,SAAS,4BAAT,CAAsC,iBAAtC,EAAkF;EAChF,MAAM,UAAU,GAAmC,CAAC,CAAD,EAAI,MAAJ,KAAc;IAC/D,iBAAiB,CAAC,CAAD,EAAI,IAAI,GAAJ,CAAQ,CAAC,MAAD,CAAR,CAAJ,CAAjB;EACD,CAFD;;EAIA,MAAM,UAAU,GAAmC,CAAC,IAAG;IACrD,iBAAiB,CAAC,CAAD,EAAI,IAAI,GAAJ,EAAJ,CAAjB;EACD,CAFD;;EAIA,MAAM,UAAU,GAAG,CAAC,MAAD,EAA0B,aAA1B,KAAiE;IAClF,OAAO,aAAa,CAAC,GAAd,CAAkB,MAAlB,CAAP;EACD,CAFD;;EAIA,MAAM,UAAU,GAAmC,CAAC,CAAD,EAAI,MAAJ,KAAc;IAC/D,iBAAiB,CAAC,CAAD,EAAI,IAAI,GAAJ,CAAQ,CAAC,MAAD,CAAR,CAAJ,CAAjB;EACD,CAFD;;EAIA,OAAO;IACL,YAAY,EAAE,UADT;IAEL,UAFK;IAGL,cAAc,EAAE,MAAK;MACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;QACzC,MAAM,IAAI,KAAJ,CAAU,6EAAV,CAAN;MACD;;MAED,OAAO,SAAP;IACD,CATI;IAUL,UAVK;IAWL,UAXK;IAYL;EAZK,CAAP;AAcD","sourcesContent":["import * as React from 'react';\nimport { SelectionMode } from './types';\n\ntype OnSelectionChangeCallback = (e: React.SyntheticEvent | Event, selectedItems: Set<SelectionItemId>) => void;\n\nexport interface SelectionManager {\n toggleItem(e: React.SyntheticEvent | Event, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n selectItem(e: React.SyntheticEvent | Event, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n deselectItem(e: React.SyntheticEvent | Event, id: SelectionItemId, selectedItems: Set<SelectionItemId>): void;\n clearItems(e: React.SyntheticEvent | Event): void;\n isSelected(id: SelectionItemId, selectedItems: Set<SelectionItemId>): boolean;\n toggleAllItems(\n e: React.SyntheticEvent | Event,\n itemIds: SelectionItemId[],\n selectedItems: Set<SelectionItemId>,\n ): void;\n}\n\nexport type SelectionItemId = string | number;\n\nexport function createSelectionManager(\n mode: SelectionMode,\n onSelectionChange: OnSelectionChangeCallback = () => undefined,\n): SelectionManager {\n const managerFactory = mode === 'multiselect' ? createMultipleSelectionManager : createSingleSelectionManager;\n\n return managerFactory(onSelectionChange);\n}\n\nfunction createMultipleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n const toggleAllItems: SelectionManager['toggleAllItems'] = (e, itemIds, selectedItems) => {\n const allItemsSelected = itemIds.every(itemId => selectedItems.has(itemId));\n\n if (allItemsSelected) {\n selectedItems.clear();\n } else {\n itemIds.forEach(itemId => selectedItems.add(itemId));\n }\n\n onSelectionChange(e, new Set(selectedItems));\n };\n\n const toggleItem: SelectionManager['toggleItem'] = (e, itemId, selectedItems) => {\n if (selectedItems.has(itemId)) {\n selectedItems.delete(itemId);\n } else {\n selectedItems.add(itemId);\n }\n\n onSelectionChange(e, new Set(selectedItems));\n };\n\n const selectItem: SelectionManager['selectItem'] = (e, itemId, selectedItems) => {\n selectedItems.add(itemId);\n onSelectionChange(e, new Set(selectedItems));\n };\n\n const deselectItem: SelectionManager['deselectItem'] = (e, itemId, selectedItems) => {\n selectedItems.delete(itemId);\n onSelectionChange(e, new Set(selectedItems));\n };\n\n const clearItems: SelectionManager['clearItems'] = e => {\n onSelectionChange(e, new Set());\n };\n\n const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n return selectedItems.has(itemId);\n };\n\n return {\n toggleItem,\n selectItem,\n deselectItem,\n clearItems,\n isSelected,\n toggleAllItems,\n };\n}\n\nfunction createSingleSelectionManager(onSelectionChange: OnSelectionChangeCallback): SelectionManager {\n const toggleItem: SelectionManager['toggleItem'] = (e, itemId) => {\n onSelectionChange(e, new Set([itemId]));\n };\n\n const clearItems: SelectionManager['clearItems'] = e => {\n onSelectionChange(e, new Set<SelectionItemId>());\n };\n\n const isSelected = (itemId: SelectionItemId, selectedItems: Set<SelectionItemId>) => {\n return selectedItems.has(itemId);\n };\n\n const selectItem: SelectionManager['selectItem'] = (e, itemId) => {\n onSelectionChange(e, new Set([itemId]));\n };\n\n return {\n deselectItem: clearItems,\n selectItem,\n toggleAllItems: () => {\n if (process.env.NODE_ENV !== 'production') {\n throw new Error('[react-table]: `toggleAllItems` should not be used in single selection mode');\n }\n\n return undefined;\n },\n toggleItem,\n clearItems,\n isSelected,\n };\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -50,23 +50,23 @@ function useSelectionState(tableState, options) {
|
|
|
50
50
|
state: selectedItems
|
|
51
51
|
});
|
|
52
52
|
const selectionManager = React.useMemo(() => {
|
|
53
|
-
return selectionManager_1.createSelectionManager(selectionMode, newSelectedItems => {
|
|
53
|
+
return selectionManager_1.createSelectionManager(selectionMode, (e, newSelectedItems) => {
|
|
54
54
|
setSelected(() => {
|
|
55
|
-
onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newSelectedItems);
|
|
55
|
+
onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, newSelectedItems);
|
|
56
56
|
return newSelectedItems;
|
|
57
57
|
});
|
|
58
58
|
});
|
|
59
59
|
}, [onSelectionChange, selectionMode, setSelected]);
|
|
60
|
-
const toggleAllRows = react_utilities_1.useEventCallback(
|
|
61
|
-
selectionManager.toggleAllItems(items.map((item, i) => {
|
|
60
|
+
const toggleAllRows = react_utilities_1.useEventCallback(e => {
|
|
61
|
+
selectionManager.toggleAllItems(e, items.map((item, i) => {
|
|
62
62
|
var _a;
|
|
63
63
|
|
|
64
64
|
return (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _a !== void 0 ? _a : i;
|
|
65
65
|
}), selected);
|
|
66
66
|
});
|
|
67
|
-
const toggleRow = react_utilities_1.useEventCallback(rowId => selectionManager.toggleItem(rowId, selected));
|
|
68
|
-
const deselectRow = react_utilities_1.useEventCallback(rowId => selectionManager.deselectItem(rowId, selected));
|
|
69
|
-
const selectRow = react_utilities_1.useEventCallback(rowId => selectionManager.selectItem(rowId, selected));
|
|
67
|
+
const toggleRow = react_utilities_1.useEventCallback((e, rowId) => selectionManager.toggleItem(e, rowId, selected));
|
|
68
|
+
const deselectRow = react_utilities_1.useEventCallback((e, rowId) => selectionManager.deselectItem(e, rowId, selected));
|
|
69
|
+
const selectRow = react_utilities_1.useEventCallback((e, rowId) => selectionManager.selectItem(e, rowId, selected));
|
|
70
70
|
|
|
71
71
|
const isRowSelected = rowId => selectionManager.isSelected(rowId, selected);
|
|
72
72
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSelection.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAM,IAAI,GAAG,MAAM,SAAnB;;AAEa,OAAA,CAAA,0BAAA,GAAkD;EAC7D,eAAe,EAAE,KAD4C;EAE7D,SAAS,EAAE,IAFkD;EAG7D,WAAW,EAAE,IAHgD;EAI7D,aAAa,EAAE,MAAM,KAJwC;EAK7D,SAAS,EAAE,IALkD;EAM7D,YAAY,eAAE,IAAI,GAAJ,EAN+C;EAO7D,gBAAgB,EAAE,KAP2C;EAQ7D,aAAa,EAAE,IAR8C;EAS7D,SAAS,EAAE;AATkD,CAAlD;;AAYb,SAAgB,YAAhB,CAAoC,OAApC,EAAgE;EAC9D;EACA;EACA,OAAQ,UAAD,IAAmC,iBAAiB,CAAC,UAAD,EAAa,OAAb,CAA3D;AACD;;AAJD,OAAA,CAAA,YAAA,GAAA,YAAA;;AAMA,SAAgB,iBAAhB,CACE,UADF,EAEE,OAFF,EAE8B;EAE5B,MAAM;IAAE,KAAF;IAAS;EAAT,IAAsB,UAA5B;EACA,MAAM;IAAE,aAAF;IAAiB,oBAAjB;IAAuC,aAAvC;IAAsD;EAAtD,IAA4E,OAAlF;EAEA,MAAM,CAAC,QAAD,EAAW,WAAX,IAA0B,iBAAA,CAAA,oBAAA,CAAqB;IACnD,YAAY,EAAE,IAAI,GAAJ,EADqC;IAEnD,YAAY,EAAE,oBAFqC;IAGnD,KAAK,EAAE;EAH4C,CAArB,CAAhC;EAMA,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IAC1C,OAAO,kBAAA,CAAA,sBAAA,CAAuB,aAAvB,EAAsC,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSelection.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAGA,MAAM,IAAI,GAAG,MAAM,SAAnB;;AAEa,OAAA,CAAA,0BAAA,GAAkD;EAC7D,eAAe,EAAE,KAD4C;EAE7D,SAAS,EAAE,IAFkD;EAG7D,WAAW,EAAE,IAHgD;EAI7D,aAAa,EAAE,MAAM,KAJwC;EAK7D,SAAS,EAAE,IALkD;EAM7D,YAAY,eAAE,IAAI,GAAJ,EAN+C;EAO7D,gBAAgB,EAAE,KAP2C;EAQ7D,aAAa,EAAE,IAR8C;EAS7D,SAAS,EAAE;AATkD,CAAlD;;AAYb,SAAgB,YAAhB,CAAoC,OAApC,EAAgE;EAC9D;EACA;EACA,OAAQ,UAAD,IAAmC,iBAAiB,CAAC,UAAD,EAAa,OAAb,CAA3D;AACD;;AAJD,OAAA,CAAA,YAAA,GAAA,YAAA;;AAMA,SAAgB,iBAAhB,CACE,UADF,EAEE,OAFF,EAE8B;EAE5B,MAAM;IAAE,KAAF;IAAS;EAAT,IAAsB,UAA5B;EACA,MAAM;IAAE,aAAF;IAAiB,oBAAjB;IAAuC,aAAvC;IAAsD;EAAtD,IAA4E,OAAlF;EAEA,MAAM,CAAC,QAAD,EAAW,WAAX,IAA0B,iBAAA,CAAA,oBAAA,CAAqB;IACnD,YAAY,EAAE,IAAI,GAAJ,EADqC;IAEnD,YAAY,EAAE,oBAFqC;IAGnD,KAAK,EAAE;EAH4C,CAArB,CAAhC;EAMA,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IAC1C,OAAO,kBAAA,CAAA,sBAAA,CAAuB,aAAvB,EAAsC,CAAC,CAAD,EAAI,gBAAJ,KAAwB;MACnE,WAAW,CAAC,MAAK;QACf,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAA,iBAAiB,CAAG,CAAH,EAA8B,gBAA9B,CAAjB;QACA,OAAO,gBAAP;MACD,CAHU,CAAX;IAID,CALM,CAAP;EAMD,CAPwB,EAOtB,CAAC,iBAAD,EAAoB,aAApB,EAAmC,WAAnC,CAPsB,CAAzB;EASA,MAAM,aAAa,GAAyC,iBAAA,CAAA,gBAAA,CAAiB,CAAC,IAAG;IAC/E,gBAAgB,CAAC,cAAjB,CACE,CADF,EAEE,KAAK,CAAC,GAAN,CAAU,CAAC,IAAD,EAAO,CAAP,KAAY;MAAA,IAAA,EAAA;;MAAC,OAAA,CAAA,EAAA,GAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,IAAH,CAAR,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,EAAhB,GAAoB,CAApB;IAAqB,CAA5C,CAFF,EAGE,QAHF;EAKD,CAN2D,CAA5D;EAQA,MAAM,SAAS,GAAqC,iBAAA,CAAA,gBAAA,CAAiB,CAAC,CAAD,EAAI,KAAJ,KACnE,gBAAgB,CAAC,UAAjB,CAA4B,CAA5B,EAA+B,KAA/B,EAAsC,QAAtC,CADkD,CAApD;EAIA,MAAM,WAAW,GAAuC,iBAAA,CAAA,gBAAA,CAAiB,CAAC,CAAD,EAAI,KAAJ,KACvE,gBAAgB,CAAC,YAAjB,CAA8B,CAA9B,EAAiC,KAAjC,EAAwC,QAAxC,CADsD,CAAxD;EAIA,MAAM,SAAS,GAAqC,iBAAA,CAAA,gBAAA,CAAiB,CAAC,CAAD,EAAI,KAAJ,KACnE,gBAAgB,CAAC,UAAjB,CAA4B,CAA5B,EAA+B,KAA/B,EAAsC,QAAtC,CADkD,CAApD;;EAIA,MAAM,aAAa,GAA0C,KAAD,IAC1D,gBAAgB,CAAC,UAAjB,CAA4B,KAA5B,EAAmC,QAAnC,CADF;;EAGA,OAAO,EACL,GAAG,UADE;IAEL,SAAS,EAAE;MACT,gBAAgB,EAAE,QAAQ,CAAC,IAAT,GAAgB,CADzB;MAET,eAAe,EAAE,aAAa,KAAK,QAAlB,GAA6B,QAAQ,CAAC,IAAT,GAAgB,CAA7C,GAAiD,QAAQ,CAAC,IAAT,KAAkB,KAAK,CAAC,MAFjF;MAGT,YAAY,EAAE,QAHL;MAIT,SAJS;MAKT,aALS;MAMT,SAAS,EAAE,gBAAgB,CAAC,UANnB;MAOT,WAPS;MAQT,SARS;MAST;IATS;EAFN,CAAP;AAcD;;AA3DD,OAAA,CAAA,iBAAA,GAAA,iBAAA","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { createSelectionManager } from './selectionManager';\nimport type { RowId, TableSelectionState, TableState, UseSelectionOptions } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSelectionState: TableSelectionState = {\n allRowsSelected: false,\n clearRows: noop,\n deselectRow: noop,\n isRowSelected: () => false,\n selectRow: noop,\n selectedRows: new Set(),\n someRowsSelected: false,\n toggleAllRows: noop,\n toggleRow: noop,\n};\n\nexport function useSelection<TItem>(options: UseSelectionOptions) {\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: TableState<TItem>) => useSelectionState(tableState, options);\n}\n\nexport function useSelectionState<TItem>(\n tableState: TableState<TItem>,\n options: UseSelectionOptions,\n): TableState<TItem> {\n const { items, getRowId } = tableState;\n const { selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;\n\n const [selected, setSelected] = useControllableState({\n initialState: new Set<RowId>(),\n defaultState: defaultSelectedItems,\n state: selectedItems,\n });\n\n const selectionManager = React.useMemo(() => {\n return createSelectionManager(selectionMode, (e, newSelectedItems) => {\n setSelected(() => {\n onSelectionChange?.(e as React.SyntheticEvent, newSelectedItems);\n return newSelectedItems;\n });\n });\n }, [onSelectionChange, selectionMode, setSelected]);\n\n const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(e => {\n selectionManager.toggleAllItems(\n e,\n items.map((item, i) => getRowId?.(item) ?? i),\n selected,\n );\n });\n\n const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((e, rowId: RowId) =>\n selectionManager.toggleItem(e, rowId, selected),\n );\n\n const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((e, rowId: RowId) =>\n selectionManager.deselectItem(e, rowId, selected),\n );\n\n const selectRow: TableSelectionState['selectRow'] = useEventCallback((e, rowId: RowId) =>\n selectionManager.selectItem(e, rowId, selected),\n );\n\n const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: RowId) =>\n selectionManager.isSelected(rowId, selected);\n\n return {\n ...tableState,\n selection: {\n someRowsSelected: selected.size > 0,\n allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length,\n selectedRows: selected,\n toggleRow,\n toggleAllRows,\n clearRows: selectionManager.clearItems,\n deselectRow,\n selectRow,\n isRowSelected,\n },\n };\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -48,7 +48,7 @@ function useSortState(tableState, options) {
|
|
|
48
48
|
sortDirection
|
|
49
49
|
} = sorted;
|
|
50
50
|
|
|
51
|
-
const toggleColumnSort = columnId => {
|
|
51
|
+
const toggleColumnSort = (e, columnId) => {
|
|
52
52
|
setSorted(s => {
|
|
53
53
|
const newState = { ...s,
|
|
54
54
|
sortColumn: columnId
|
|
@@ -60,17 +60,17 @@ function useSortState(tableState, options) {
|
|
|
60
60
|
newState.sortDirection = 'ascending';
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(newState);
|
|
63
|
+
onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
|
|
64
64
|
return newState;
|
|
65
65
|
});
|
|
66
66
|
};
|
|
67
67
|
|
|
68
|
-
const setColumnSort = (nextSortColumn, nextSortDirection) => {
|
|
68
|
+
const setColumnSort = (e, nextSortColumn, nextSortDirection) => {
|
|
69
69
|
const newState = {
|
|
70
70
|
sortColumn: nextSortColumn,
|
|
71
71
|
sortDirection: nextSortDirection
|
|
72
72
|
};
|
|
73
|
-
onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(newState);
|
|
73
|
+
onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(e, newState);
|
|
74
74
|
setSorted(newState);
|
|
75
75
|
};
|
|
76
76
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSort.ts"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSort.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport type { ColumnId, RowState, SortState, TableSortState, TableState, UseSortOptions } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSortState: TableSortState<unknown> = {\n getSortDirection: () => 'ascending',\n setColumnSort: noop,\n sort: <TRowState extends RowState<unknown>>(rows: TRowState[]) => [...rows],\n sortColumn: undefined,\n sortDirection: 'ascending',\n toggleColumnSort: noop,\n};\n\nexport function useSort<TItem>(options: UseSortOptions) {\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: TableState<TItem>) => useSortState(tableState, options);\n}\n\nexport function useSortState<TItem>(tableState: TableState<TItem>, options: UseSortOptions): TableState<TItem> {\n const { columns } = tableState;\n const { sortState, defaultSortState, onSortChange } = options;\n\n const [sorted, setSorted] = useControllableState<SortState>({\n initialState: {\n sortDirection: 'ascending' as const,\n sortColumn: undefined,\n },\n defaultState: defaultSortState,\n state: sortState,\n });\n\n const { sortColumn, sortDirection } = sorted;\n\n const toggleColumnSort = (e: React.SyntheticEvent, columnId: ColumnId | undefined) => {\n setSorted(s => {\n const newState = { ...s, sortColumn: columnId };\n if (s.sortColumn === columnId) {\n newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n } else {\n newState.sortDirection = 'ascending';\n }\n\n onSortChange?.(e, newState);\n return newState;\n });\n };\n\n const setColumnSort: TableSortState<TItem>['setColumnSort'] = (e, nextSortColumn, nextSortDirection) => {\n const newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };\n onSortChange?.(e, newState);\n setSorted(newState);\n };\n\n const sort = <TRowState extends RowState<TItem>>(rows: TRowState[]) => {\n return rows.slice().sort((a, b) => {\n const sortColumnDef = columns.find(column => column.columnId === sortColumn);\n if (!sortColumnDef?.compare) {\n return 0;\n }\n\n const mod = sortDirection === 'ascending' ? 1 : -1;\n return sortColumnDef.compare(a.item, b.item) * mod;\n });\n };\n\n const getSortDirection: TableSortState<TItem>['getSortDirection'] = (columnId: ColumnId) => {\n return sortColumn === columnId ? sortDirection : undefined;\n };\n\n return {\n ...tableState,\n sort: {\n sort,\n sortColumn,\n sortDirection,\n setColumnSort,\n toggleColumnSort,\n getSortDirection,\n },\n };\n}\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-table",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.12",
|
|
4
4
|
"description": "React components for building web experiences",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -30,15 +30,15 @@
|
|
|
30
30
|
"@fluentui/scripts": "^1.0.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@fluentui/react-aria": "^9.3.
|
|
34
|
-
"@fluentui/react-avatar": "^9.2.
|
|
35
|
-
"@fluentui/react-checkbox": "^9.0.
|
|
36
|
-
"@fluentui/react-context-selector": "^9.1.
|
|
33
|
+
"@fluentui/react-aria": "^9.3.2",
|
|
34
|
+
"@fluentui/react-avatar": "^9.2.7",
|
|
35
|
+
"@fluentui/react-checkbox": "^9.0.13",
|
|
36
|
+
"@fluentui/react-context-selector": "^9.1.2",
|
|
37
37
|
"@fluentui/react-icons": "^2.0.175",
|
|
38
|
-
"@fluentui/react-radio": "^9.0.
|
|
39
|
-
"@fluentui/react-tabster": "^9.3.
|
|
38
|
+
"@fluentui/react-radio": "^9.0.12",
|
|
39
|
+
"@fluentui/react-tabster": "^9.3.1",
|
|
40
40
|
"@fluentui/react-theme": "^9.1.2",
|
|
41
|
-
"@fluentui/react-utilities": "^9.2.
|
|
41
|
+
"@fluentui/react-utilities": "^9.2.2",
|
|
42
42
|
"@griffel/react": "^1.4.2",
|
|
43
43
|
"tslib": "^2.1.0"
|
|
44
44
|
},
|