@fluentui/react-table 9.0.0-alpha.10 → 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 +167 -1
- package/CHANGELOG.md +40 -2
- package/dist/index.d.ts +59 -15
- package/lib/components/DataGrid/DataGrid.types.js.map +1 -1
- package/lib/components/DataGrid/renderDataGrid.js +5 -1
- package/lib/components/DataGrid/renderDataGrid.js.map +1 -1
- package/lib/components/DataGrid/useDataGrid.js +24 -2
- package/lib/components/DataGrid/useDataGrid.js.map +1 -1
- package/lib/components/DataGrid/useDataGridContextValues.js +6 -1
- package/lib/components/DataGrid/useDataGridContextValues.js.map +1 -1
- package/lib/components/DataGridBody/DataGridBody.types.js.map +1 -1
- package/lib/components/DataGridBody/useDataGridBody.js +8 -0
- package/lib/components/DataGridBody/useDataGridBody.js.map +1 -1
- package/lib/components/DataGridCell/useDataGridCell.js +7 -2
- package/lib/components/DataGridCell/useDataGridCell.js.map +1 -1
- package/lib/components/DataGridRow/DataGridRow.types.js.map +1 -1
- package/lib/components/DataGridRow/useDataGridRow.js +7 -0
- package/lib/components/DataGridRow/useDataGridRow.js.map +1 -1
- package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js +4 -2
- package/lib/components/DataGridSelectionCell/useDataGridSelectionCell.js.map +1 -1
- 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/contexts/dataGridContext.js +9 -0
- package/lib/contexts/dataGridContext.js.map +1 -0
- package/lib/hooks/createColumn.js +41 -0
- package/lib/hooks/createColumn.js.map +1 -0
- package/lib/hooks/index.js +1 -0
- package/lib/hooks/index.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/hooks/useTable.js +8 -0
- package/lib/hooks/useTable.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/DataGrid/renderDataGrid.js +7 -1
- package/lib-commonjs/components/DataGrid/renderDataGrid.js.map +1 -1
- package/lib-commonjs/components/DataGrid/useDataGrid.js +26 -2
- package/lib-commonjs/components/DataGrid/useDataGrid.js.map +1 -1
- package/lib-commonjs/components/DataGrid/useDataGridContextValues.js +6 -1
- package/lib-commonjs/components/DataGrid/useDataGridContextValues.js.map +1 -1
- package/lib-commonjs/components/DataGridBody/useDataGridBody.js +9 -0
- package/lib-commonjs/components/DataGridBody/useDataGridBody.js.map +1 -1
- package/lib-commonjs/components/DataGridCell/useDataGridCell.js +8 -2
- package/lib-commonjs/components/DataGridCell/useDataGridCell.js.map +1 -1
- package/lib-commonjs/components/DataGridRow/useDataGridRow.js +8 -0
- package/lib-commonjs/components/DataGridRow/useDataGridRow.js.map +1 -1
- package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.js +4 -2
- package/lib-commonjs/components/DataGridSelectionCell/useDataGridSelectionCell.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/contexts/dataGridContext.js +21 -0
- package/lib-commonjs/contexts/dataGridContext.js.map +1 -0
- package/lib-commonjs/hooks/createColumn.js +50 -0
- package/lib-commonjs/hooks/createColumn.js.map +1 -0
- package/lib-commonjs/hooks/index.js +2 -0
- package/lib-commonjs/hooks/index.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/lib-commonjs/hooks/useTable.js +10 -1
- package/lib-commonjs/hooks/useTable.js.map +1 -1
- package/lib-commonjs/index.js +8 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -9
|
@@ -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":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,SAAS,0BAAT,QAA2C,+CAA3C;AACA,SAAS,4BAAT,QAA6C,mDAA7C;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,kBAAT,QAAmC,mCAAnC;AAEA,OAAO,MAAM,iBAAiB,GAAG,cAA1B;AACP,OAAO,MAAM,kBAAkB,GAAkC;EAC/D,IAAI,EAAE;AADyD,CAA1D;;AAIP,MAAM,oBAAoB,gBAAG;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA7B;;AAkBA,MAAM,mBAAmB,gBAAG;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAA5B;AAmBA;;AAEG;;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAwGA;;AAEG;;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAAwC;EAChF,MAAM,WAAW,GAAG,kBAAkB,EAAtC;EACA,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,oBAAoB,EADR;IAEnB,IAAI,EAAE,mBAAmB;EAFN,CAArB;EAIA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,kBAAkB,CAAC,IADc,EAEjC,MAAM,CAAC,IAF0B,EAGjC,CAAC,WAAD,IAAgB,MAAM,CAAC,eAHU,EAIjC,MAAM,CAAC,KAAK,CAAC,IAAP,CAJ2B,EAKjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,IAA3C,GAAkD,YAAY,CAAC,KAAb,CAAmB,IALpC,EAMjC,KAAK,CAAC,gBAAN,GAAyB,YAAY,CAAC,IAAb,CAAkB,KAAK,CAAC,IAAxB,CAAzB,GAAyD,YAAY,CAAC,KAAb,CAAmB,KAAK,CAAC,IAAzB,CANxB,EAOjC,MAAM,CAAC,KAAK,CAAC,UAAP,CAP2B,EAQjC,KAAK,CAAC,IAAN,CAAW,SARsB,CAAnC;EAWA,OAAO,KAAP;AACD,CAnBM","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/"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
|
2
|
+
import { defaultTableState } from '../hooks';
|
|
3
|
+
const dataGridContext = /*#__PURE__*/createContext(undefined);
|
|
4
|
+
const dataGridContextDefaultValue = { ...defaultTableState,
|
|
5
|
+
focusMode: 'none'
|
|
6
|
+
};
|
|
7
|
+
export const DataGridContextProvider = dataGridContext.Provider;
|
|
8
|
+
export const useDataGridContext_unstable = selector => useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));
|
|
9
|
+
//# sourceMappingURL=dataGridContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/contexts/dataGridContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAwB,kBAAxB,QAAkD,kCAAlD;AAGA,SAAS,iBAAT,QAAkC,UAAlC;AAEA,MAAM,eAAe,gBAAG,aAAa,CAAmC,SAAnC,CAArC;AAEA,MAAM,2BAA2B,GAAyB,EACxD,GAAG,iBADqD;EAExD,SAAS,EAAE;AAF6C,CAA1D;AAKA,OAAO,MAAM,uBAAuB,GAAG,eAAe,CAAC,QAAhD;AAEP,OAAO,MAAM,2BAA2B,GAAO,QAAJ,IACzC,kBAAkB,CAAC,eAAD,EAAkB,CAAC,GAAG,GAAG,2BAAP,KAAuC,QAAQ,CAAC,GAAD,CAAjE,CADb","sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\nconst dataGridContextDefaultValue: DataGridContextValue = {\n ...defaultTableState,\n focusMode: 'none',\n};\n\nexport const DataGridContextProvider = dataGridContext.Provider;\n\nexport const useDataGridContext_unstable = <T>(selector: ContextSelector<DataGridContextValue, T>) =>\n useContextSelector(dataGridContext, (ctx = dataGridContextDefaultValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
const defaultCompare = () => 0;
|
|
2
|
+
|
|
3
|
+
const defaultRenderCell = () => {
|
|
4
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
5
|
+
// eslint-disable-next-line no-console
|
|
6
|
+
console.warn('@fluentui/react-table: You are using the default column renderCell function that renders null');
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
return null;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
const defaultRenderHeaderCell = () => {
|
|
13
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
14
|
+
// eslint-disable-next-line no-console
|
|
15
|
+
console.warn('@fluentui/react-table: You are using the default column renderHeaderCell function that renders null');
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
return null;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Helper function to create column definition with defaults
|
|
22
|
+
* @param options - column definition options
|
|
23
|
+
* @returns - column definition with defaults
|
|
24
|
+
*/
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
export function createColumn(options) {
|
|
28
|
+
const {
|
|
29
|
+
columnId,
|
|
30
|
+
renderCell = defaultRenderCell,
|
|
31
|
+
renderHeaderCell = defaultRenderHeaderCell,
|
|
32
|
+
compare = defaultCompare
|
|
33
|
+
} = options;
|
|
34
|
+
return {
|
|
35
|
+
columnId,
|
|
36
|
+
renderCell,
|
|
37
|
+
renderHeaderCell,
|
|
38
|
+
compare
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=createColumn.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/hooks/createColumn.ts"],"names":[],"mappings":"AAEA,MAAM,cAAc,GAAG,MAAM,CAA7B;;AAEA,MAAM,iBAAiB,GAAG,MAAK;EAC7B,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IACzC;IACA,OAAO,CAAC,IAAR,CAAa,+FAAb;EACD;;EAED,OAAO,IAAP;AACD,CAPD;;AASA,MAAM,uBAAuB,GAAG,MAAK;EACnC,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IACzC;IACA,OAAO,CAAC,IAAR,CAAa,qGAAb;EACD;;EAED,OAAO,IAAP;AACD,CAPD;AASA;;;;AAIG;;;AACH,OAAM,SAAU,YAAV,CAA8B,OAA9B,EAAiE;EACrE,MAAM;IACJ,QADI;IAEJ,UAAU,GAAG,iBAFT;IAGJ,gBAAgB,GAAG,uBAHf;IAIJ,OAAO,GAAG;EAJN,IAKF,OALJ;EAOA,OAAO;IACL,QADK;IAEL,UAFK;IAGL,gBAHK;IAIL;EAJK,CAAP;AAMD","sourcesContent":["import { CreateColumnOptions } from './types';\n\nconst defaultCompare = () => 0;\n\nconst defaultRenderCell = () => {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.warn('@fluentui/react-table: You are using the default column renderCell function that renders null');\n }\n\n return null;\n};\n\nconst defaultRenderHeaderCell = () => {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.warn('@fluentui/react-table: You are using the default column renderHeaderCell function that renders null');\n }\n\n return null;\n};\n\n/**\n * Helper function to create column definition with defaults\n * @param options - column definition options\n * @returns - column definition with defaults\n */\nexport function createColumn<TItem>(options: CreateColumnOptions<TItem>) {\n const {\n columnId,\n renderCell = defaultRenderCell,\n renderHeaderCell = defaultRenderHeaderCell,\n compare = defaultCompare,\n } = options;\n\n return {\n columnId,\n renderCell,\n renderHeaderCell,\n compare,\n };\n}\n"],"sourceRoot":"../src/"}
|
package/lib/hooks/index.js
CHANGED
package/lib/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './types';\nexport * from './useTable';\nexport * from './useSort';\nexport * from './useSelection';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './types';\nexport * from './useTable';\nexport * from './useSort';\nexport * from './useSelection';\nexport * from './createColumn';\n"]}
|
|
@@ -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 { 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 ColumnDefinition<TItem> {\n columnId: ColumnId;\n compare
|
|
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":"AACA,SAAS,oBAAT,QAAqC,2BAArC;;AAGA,MAAM,IAAI,GAAG,MAAM,SAAnB;;AAEA,OAAO,MAAM,qBAAqB,GAA4B;EAC5D,gBAAgB,EAAE,MAAM,WADoC;EAE5D,aAAa,EAAE,IAF6C;EAG5D,IAAI,EAAwC,IAAtC,IAA4D,CAAC,GAAG,IAAJ,CAHN;EAI5D,UAAU,EAAE,SAJgD;EAK5D,aAAa,EAAE,WAL6C;EAM5D,gBAAgB,EAAE;AAN0C,CAAvD;AASP,OAAM,SAAU,OAAV,CAAyB,OAAzB,EAAgD;EACpD;EACA;EACA,OAAQ,UAAD,IAAmC,YAAY,CAAC,UAAD,EAAa,OAAb,CAAtD;AACD;AAED,OAAM,SAAU,YAAV,CAA8B,UAA9B,EAA6D,OAA7D,EAAoF;EACxF,MAAM;IAAE;EAAF,IAAc,UAApB;EACA,MAAM;IAAE,SAAF;IAAa,gBAAb;IAA+B;EAA/B,IAAgD,OAAtD;EAEA,MAAM,CAAC,MAAD,EAAS,SAAT,IAAsB,oBAAoB,CAAY;IAC1D,YAAY,EAAE;MACZ,aAAa,EAAE,WADH;MAEZ,UAAU,EAAE;IAFA,CAD4C;IAK1D,YAAY,EAAE,gBAL4C;IAM1D,KAAK,EAAE;EANmD,CAAZ,CAAhD;EASA,MAAM;IAAE,UAAF;IAAc;EAAd,IAAgC,MAAtC;;EAEA,MAAM,gBAAgB,GAAG,CAAC,CAAD,EAA0B,QAA1B,KAA4D;IACnF,SAAS,CAAC,CAAC,IAAG;MACZ,MAAM,QAAQ,GAAG,EAAE,GAAG,CAAL;QAAQ,UAAU,EAAE;MAApB,CAAjB;;MACA,IAAI,CAAC,CAAC,UAAF,KAAiB,QAArB,EAA+B;QAC7B,QAAQ,CAAC,aAAT,GAAyB,CAAC,CAAC,aAAF,KAAoB,WAApB,GAAkC,YAAlC,GAAiD,WAA1E;MACD,CAFD,MAEO;QACL,QAAQ,CAAC,aAAT,GAAyB,WAAzB;MACD;;MAED,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,CAAH,EAAM,QAAN,CAAZ;MACA,OAAO,QAAP;IACD,CAVQ,CAAT;EAWD,CAZD;;EAcA,MAAM,aAAa,GAA2C,CAAC,CAAD,EAAI,cAAJ,EAAoB,iBAApB,KAAyC;IACrG,MAAM,QAAQ,GAAG;MAAE,UAAU,EAAE,cAAd;MAA8B,aAAa,EAAE;IAA7C,CAAjB;IACA,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,CAAH,EAAM,QAAN,CAAZ;IACA,SAAS,CAAC,QAAD,CAAT;EACD,CAJD;;EAMA,MAAM,IAAI,GAAuC,IAApC,IAAyD;IACpE,OAAO,IAAI,CAAC,KAAL,GAAa,IAAb,CAAkB,CAAC,CAAD,EAAI,CAAJ,KAAS;MAChC,MAAM,aAAa,GAAG,OAAO,CAAC,IAAR,CAAa,MAAM,IAAI,MAAM,CAAC,QAAP,KAAoB,UAA3C,CAAtB;;MACA,IAAI,EAAC,aAAa,KAAA,IAAb,IAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAA,aAAa,CAAE,OAAhB,CAAJ,EAA6B;QAC3B,OAAO,CAAP;MACD;;MAED,MAAM,GAAG,GAAG,aAAa,KAAK,WAAlB,GAAgC,CAAhC,GAAoC,CAAC,CAAjD;MACA,OAAO,aAAa,CAAC,OAAd,CAAsB,CAAC,CAAC,IAAxB,EAA8B,CAAC,CAAC,IAAhC,IAAwC,GAA/C;IACD,CARM,CAAP;EASD,CAVD;;EAYA,MAAM,gBAAgB,GAA+C,QAAD,IAAuB;IACzF,OAAO,UAAU,KAAK,QAAf,GAA0B,aAA1B,GAA0C,SAAjD;EACD,CAFD;;EAIA,OAAO,EACL,GAAG,UADE;IAEL,IAAI,EAAE;MACJ,IADI;MAEJ,UAFI;MAGJ,aAHI;MAIJ,aAJI;MAKJ,gBALI;MAMJ;IANI;EAFD,CAAP;AAWD","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/lib/hooks/useTable.js
CHANGED
|
@@ -3,6 +3,14 @@ import { defaultTableSortState } from './useSort';
|
|
|
3
3
|
|
|
4
4
|
const defaultRowEnhancer = row => row;
|
|
5
5
|
|
|
6
|
+
export const defaultTableState = {
|
|
7
|
+
selection: defaultTableSelectionState,
|
|
8
|
+
sort: defaultTableSortState,
|
|
9
|
+
getRows: () => [],
|
|
10
|
+
getRowId: () => '',
|
|
11
|
+
items: [],
|
|
12
|
+
columns: []
|
|
13
|
+
};
|
|
6
14
|
export function useTable(options, plugins = []) {
|
|
7
15
|
const {
|
|
8
16
|
items,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useTable.ts"],"names":[],"mappings":"AACA,SAAS,0BAAT,QAA2C,gBAA3C;AACA,SAAS,qBAAT,QAAsC,WAAtC;;AAEA,MAAM,kBAAkB,GAA4C,GAAG,IAAI,GAA3E;;AAEA,OAAM,SAAU,QAAV,CAA0B,OAA1B,EAA2D,OAAA,GAA8B,EAAzF,EAA2F;EAC/F,MAAM;IAAE,KAAF;IAAS,QAAT;IAAmB;EAAnB,IAA+B,OAArC;;EAEA,MAAM,OAAO,GAAG,CACd,WAAA,GAAc,kBADA,KAEX,KAAK,CAAC,GAAN,CAAU,CAAC,IAAD,EAAO,CAAP,KAAY;IAAA,IAAA,EAAA;;IAAC,OAAA,WAAW,CAAC;MAAE,IAAF;MAAQ,KAAK,EAAE,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;IAAnC,CAAD,CAAX;EAAmD,CAA1E,CAFL;;EAIA,MAAM,YAAY,GAAsB;IACtC,QADsC;IAEtC,KAFsC;IAGtC,OAHsC;IAItC,OAJsC;IAKtC,SAAS,EAAE,0BAL2B;IAMtC,IAAI,EAAE;EANgC,CAAxC;EASA,OAAO,OAAO,CAAC,MAAR,CAAe,CAAC,KAAD,EAAQ,MAAR,KAAmB,MAAM,CAAC,KAAD,CAAxC,EAAiD,YAAjD,CAAP;AACD","sourcesContent":["import type { UseTableOptions, TableState, RowState, RowEnhancer, TableStatePlugin, TableSortState } from './types';\nimport { defaultTableSelectionState } from './useSelection';\nimport { defaultTableSortState } from './useSort';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, RowState<unknown>> = row => row;\n\nexport function useTable<TItem>(options: UseTableOptions<TItem>, plugins: TableStatePlugin[] = []): TableState<TItem> {\n const { items, getRowId, columns } = options;\n\n const getRows = <TRowState extends RowState<TItem>>(\n rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>,\n ) => items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n\n const initialState: TableState<TItem> = {\n getRowId,\n items,\n columns,\n getRows,\n selection: defaultTableSelectionState,\n sort: defaultTableSortState as TableSortState<TItem>,\n };\n\n return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useTable.ts"],"names":[],"mappings":"AACA,SAAS,0BAAT,QAA2C,gBAA3C;AACA,SAAS,qBAAT,QAAsC,WAAtC;;AAEA,MAAM,kBAAkB,GAA4C,GAAG,IAAI,GAA3E;;AAEA,OAAO,MAAM,iBAAiB,GAAwB;EACpD,SAAS,EAAE,0BADyC;EAEpD,IAAI,EAAE,qBAF8C;EAGpD,OAAO,EAAE,MAAM,EAHqC;EAIpD,QAAQ,EAAE,MAAM,EAJoC;EAKpD,KAAK,EAAE,EAL6C;EAMpD,OAAO,EAAE;AAN2C,CAA/C;AASP,OAAM,SAAU,QAAV,CAA0B,OAA1B,EAA2D,OAAA,GAA8B,EAAzF,EAA2F;EAC/F,MAAM;IAAE,KAAF;IAAS,QAAT;IAAmB;EAAnB,IAA+B,OAArC;;EAEA,MAAM,OAAO,GAAG,CACd,WAAA,GAAc,kBADA,KAEX,KAAK,CAAC,GAAN,CAAU,CAAC,IAAD,EAAO,CAAP,KAAY;IAAA,IAAA,EAAA;;IAAC,OAAA,WAAW,CAAC;MAAE,IAAF;MAAQ,KAAK,EAAE,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;IAAnC,CAAD,CAAX;EAAmD,CAA1E,CAFL;;EAIA,MAAM,YAAY,GAAsB;IACtC,QADsC;IAEtC,KAFsC;IAGtC,OAHsC;IAItC,OAJsC;IAKtC,SAAS,EAAE,0BAL2B;IAMtC,IAAI,EAAE;EANgC,CAAxC;EASA,OAAO,OAAO,CAAC,MAAR,CAAe,CAAC,KAAD,EAAQ,MAAR,KAAmB,MAAM,CAAC,KAAD,CAAxC,EAAiD,YAAjD,CAAP;AACD","sourcesContent":["import type { UseTableOptions, TableState, RowState, RowEnhancer, TableStatePlugin, TableSortState } from './types';\nimport { defaultTableSelectionState } from './useSelection';\nimport { defaultTableSortState } from './useSort';\n\nconst defaultRowEnhancer: RowEnhancer<unknown, RowState<unknown>> = row => row;\n\nexport const defaultTableState: TableState<unknown> = {\n selection: defaultTableSelectionState,\n sort: defaultTableSortState,\n getRows: () => [],\n getRowId: () => '',\n items: [],\n columns: [],\n};\n\nexport function useTable<TItem>(options: UseTableOptions<TItem>, plugins: TableStatePlugin[] = []): TableState<TItem> {\n const { items, getRowId, columns } = options;\n\n const getRows = <TRowState extends RowState<TItem>>(\n rowEnhancer = defaultRowEnhancer as RowEnhancer<TItem, TRowState>,\n ) => items.map((item, i) => rowEnhancer({ item, rowId: getRowId?.(item) ?? i }));\n\n const initialState: TableState<TItem> = {\n getRowId,\n items,\n columns,\n getRows,\n selection: defaultTableSelectionState,\n sort: defaultTableSortState as TableSortState<TItem>,\n };\n\n return plugins.reduce((state, plugin) => plugin(state), initialState);\n}\n"],"sourceRoot":"../src/"}
|
package/lib/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { useTable, useSelection, useSort } from './hooks';
|
|
1
|
+
export { useTable, useSelection, useSort, createColumn } from './hooks';
|
|
2
2
|
export { TableCell, tableCellClassNames, tableCellClassName, useTableCellStyles_unstable, useTableCell_unstable, renderTableCell_unstable } from './TableCell';
|
|
3
3
|
export { TableRow, tableRowClassNames, tableRowClassName, useTableRowStyles_unstable, useTableRow_unstable, renderTableRow_unstable } from './TableRow';
|
|
4
4
|
export { TableBody, tableBodyClassName, tableBodyClassNames, useTableBodyStyles_unstable, useTableBody_unstable, renderTableBody_unstable } from './TableBody';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/index.ts"],"names":[],"mappings":"AAAA,SAAS,QAAT,EAAmB,YAAnB,EAAiC,OAAjC,
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/index.ts"],"names":[],"mappings":"AAAA,SAAS,QAAT,EAAmB,YAAnB,EAAiC,OAAjC,EAA0C,YAA1C,QAA8D,SAA9D;AAcA,SACE,SADF,EAEE,mBAFF,EAGE,kBAHF,EAIE,2BAJF,EAKE,qBALF,EAME,wBANF,QAOO,aAPP;AAUA,SACE,QADF,EAEE,kBAFF,EAGE,iBAHF,EAIE,0BAJF,EAKE,oBALF,EAME,uBANF,QAOO,YAPP;AAUA,SACE,SADF,EAEE,kBAFF,EAGE,mBAHF,EAIE,2BAJF,EAKE,qBALF,EAME,wBANF,QAOO,aAPP;AAUA,SACE,KADF,EAEE,cAFF,EAGE,eAHF,EAIE,uBAJF,EAKE,iBALF,EAME,oBANF,QAOO,SAPP;AAUA,SACE,WADF,EAEE,qBAFF,EAGE,oBAHF,EAIE,6BAJF,EAKE,uBALF,EAME,0BANF,QAOO,eAPP;AAUA,SACE,eADF,EAEE,wBAFF,EAGE,yBAHF,EAIE,iCAJF,EAKE,2BALF,EAME,8BANF,QAOO,mBAPP;AAUA,SAAS,oBAAT,EAA+B,eAA/B,QAAsD,yBAAtD;AACA,SACE,kBADF,EAEE,oCAFF,EAGE,8BAHF,EAIE,iCAJF,EAKE,4BALF,QAMO,sBANP;AASA,SACE,gBADF,EAEE,0BAFF,EAGE,kCAHF,EAIE,4BAJF,EAKE,+BALF,QAMO,oBANP;AASA,SACE,eADF,EAEE,yBAFF,EAGE,iCAHF,EAIE,2BAJF,EAKE,8BALF,QAMO,mBANP;AASA,SACE,YADF,EAEE,sBAFF,EAGE,8BAHF,EAIE,wBAJF,EAKE,2BALF,QAMO,gBANP;AASA,SACE,WADF,EAEE,qBAFF,EAGE,6BAHF,EAIE,uBAJF,EAKE,0BALF,QAMO,eANP;AASA,SACE,YADF,EAEE,sBAFF,EAGE,8BAHF,EAIE,wBAJF,EAKE,2BALF,QAMO,gBANP;AASA,SACE,QADF,EAEE,kBAFF,EAGE,0BAHF,EAIE,oBAJF,EAKE,uBALF,QAMO,YANP;AAgBA,SACE,cADF,EAEE,wBAFF,EAGE,gCAHF,EAIE,0BAJF,EAKE,6BALF,QAMO,kBANP;AASA,SACE,kBADF,EAEE,4BAFF,EAGE,oCAHF,EAIE,8BAJF,EAKE,iCALF,QAMO,sBANP;AASA,SACE,qBADF,EAEE,uCAFF,EAGE,iCAHF,EAIE,oCAJF,EAKE,+BALF,QAMO,yBANP","sourcesContent":["export { useTable, useSelection, useSort, createColumn } from './hooks';\nexport type {\n UseTableOptions,\n TableState as HeadlessTableState,\n TableSelectionState,\n TableSortState,\n TableStatePlugin,\n RowState,\n RowId,\n ColumnDefinition,\n ColumnId,\n CreateColumnOptions,\n} from './hooks';\n\nexport {\n TableCell,\n tableCellClassNames,\n tableCellClassName,\n useTableCellStyles_unstable,\n useTableCell_unstable,\n renderTableCell_unstable,\n} from './TableCell';\nexport type { TableCellProps, TableCellState, TableCellSlots } from './TableCell';\n\nexport {\n TableRow,\n tableRowClassNames,\n tableRowClassName,\n useTableRowStyles_unstable,\n useTableRow_unstable,\n renderTableRow_unstable,\n} from './TableRow';\nexport type { TableRowProps, TableRowState, TableRowSlots } from './TableRow';\n\nexport {\n TableBody,\n tableBodyClassName,\n tableBodyClassNames,\n useTableBodyStyles_unstable,\n useTableBody_unstable,\n renderTableBody_unstable,\n} from './TableBody';\nexport type { TableBodyProps, TableBodyState, TableBodySlots } from './TableBody';\n\nexport {\n Table,\n tableClassName,\n tableClassNames,\n useTableStyles_unstable,\n useTable_unstable,\n renderTable_unstable,\n} from './Table';\nexport type { TableProps, TableSlots, TableState, TableContextValue, TableContextValues, SortDirection } from './Table';\n\nexport {\n TableHeader,\n tableHeaderClassNames,\n tableHeaderClassName,\n useTableHeaderStyles_unstable,\n useTableHeader_unstable,\n renderTableHeader_unstable,\n} from './TableHeader';\nexport type { TableHeaderProps, TableHeaderSlots, TableHeaderState } from './TableHeader';\n\nexport {\n TableHeaderCell,\n tableHeaderCellClassName,\n tableHeaderCellClassNames,\n useTableHeaderCellStyles_unstable,\n useTableHeaderCell_unstable,\n renderTableHeaderCell_unstable,\n} from './TableHeaderCell';\nexport type { TableHeaderCellProps, TableHeaderCellSlots, TableHeaderCellState } from './TableHeaderCell';\n\nexport { TableContextProvider, useTableContext } from './contexts/tableContext';\nexport {\n TableSelectionCell,\n useTableSelectionCellStyles_unstable,\n useTableSelectionCell_unstable,\n renderTableSelectionCell_unstable,\n tableSelectionCellClassNames,\n} from './TableSelectionCell';\n\nexport type { TableSelectionCellProps, TableSelectionCellState, TableSelectionCellSlots } from './TableSelectionCell';\nexport {\n TableCellActions,\n tableCellActionsClassNames,\n useTableCellActionsStyles_unstable,\n useTableCellActions_unstable,\n renderTableCellActions_unstable,\n} from './TableCellActions';\n\nexport type { TableCellActionsProps, TableCellActionsSlots, TableCellActionsState } from './TableCellActions';\nexport {\n TableCellLayout,\n tableCellLayoutClassNames,\n useTableCellLayoutStyles_unstable,\n useTableCellLayout_unstable,\n renderTableCellLayout_unstable,\n} from './TableCellLayout';\nexport type { TableCellLayoutProps, TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout';\n\nexport {\n DataGridCell,\n dataGridCellClassNames,\n useDataGridCellStyles_unstable,\n useDataGridCell_unstable,\n renderDataGridCell_unstable,\n} from './DataGridCell';\nexport type { DataGridCellProps, DataGridCellState, DataGridCellSlots } from './DataGridCell';\n\nexport {\n DataGridRow,\n dataGridRowClassNames,\n useDataGridRowStyles_unstable,\n useDataGridRow_unstable,\n renderDataGridRow_unstable,\n} from './DataGridRow';\nexport type { DataGridRowProps, DataGridRowState, DataGridRowSlots, CellRenderFunction } from './DataGridRow';\n\nexport {\n DataGridBody,\n dataGridBodyClassNames,\n useDataGridBodyStyles_unstable,\n useDataGridBody_unstable,\n renderDataGridBody_unstable,\n} from './DataGridBody';\nexport type { DataGridBodyProps, DataGridBodyState, DataGridBodySlots, RowRenderFunction } from './DataGridBody';\n\nexport {\n DataGrid,\n dataGridClassNames,\n useDataGridStyles_unstable,\n useDataGrid_unstable,\n renderDataGrid_unstable,\n} from './DataGrid';\nexport type {\n DataGridProps,\n DataGridSlots,\n DataGridState,\n DataGridContextValues,\n DataGridContextValue,\n FocusMode,\n} from './DataGrid';\n\nexport {\n DataGridHeader,\n dataGridHeaderClassNames,\n useDataGridHeaderStyles_unstable,\n useDataGridHeader_unstable,\n renderDataGridHeader_unstable,\n} from './DataGridHeader';\nexport type { DataGridHeaderProps, DataGridHeaderSlots, DataGridHeaderState } from './DataGridHeader';\n\nexport {\n DataGridHeaderCell,\n dataGridHeaderCellClassNames,\n useDataGridHeaderCellStyles_unstable,\n useDataGridHeaderCell_unstable,\n renderDataGridHeaderCell_unstable,\n} from './DataGridHeaderCell';\nexport type { DataGridHeaderCellProps, DataGridHeaderCellSlots, DataGridHeaderCellState } from './DataGridHeaderCell';\n\nexport {\n DataGridSelectionCell,\n useDataGridSelectionCellStyles_unstable,\n useDataGridSelectionCell_unstable,\n renderDataGridSelectionCell_unstable,\n dataGridSelectionCellClassNames,\n} from './DataGridSelectionCell';\n\nexport type {\n DataGridSelectionCellProps,\n DataGridSelectionCellState,\n DataGridSelectionCellSlots,\n} from './DataGridSelectionCell';\n"],"sourceRoot":"../src/"}
|
|
@@ -5,14 +5,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.renderDataGrid_unstable = void 0;
|
|
7
7
|
|
|
8
|
+
const React = /*#__PURE__*/require("react");
|
|
9
|
+
|
|
8
10
|
const renderTable_1 = /*#__PURE__*/require("../Table/renderTable");
|
|
11
|
+
|
|
12
|
+
const dataGridContext_1 = /*#__PURE__*/require("../../contexts/dataGridContext");
|
|
9
13
|
/**
|
|
10
14
|
* Render the final JSX of DataGrid
|
|
11
15
|
*/
|
|
12
16
|
|
|
13
17
|
|
|
14
18
|
const renderDataGrid_unstable = (state, contextValues) => {
|
|
15
|
-
return
|
|
19
|
+
return React.createElement(dataGridContext_1.DataGridContextProvider, {
|
|
20
|
+
value: contextValues.dataGrid
|
|
21
|
+
}, renderTable_1.renderTable_unstable(state, contextValues));
|
|
16
22
|
};
|
|
17
23
|
|
|
18
24
|
exports.renderDataGrid_unstable = renderDataGrid_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/components/DataGrid/renderDataGrid.tsx"],"names":[],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/components/DataGrid/renderDataGrid.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAAuB,aAAvB,KAA+D;EACpG,OACE,KAAA,CAAA,aAAA,CAAC,iBAAA,CAAA,uBAAD,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,EACG,aAAA,CAAA,oBAAA,CAAqB,KAArB,EAA4B,aAA5B,CADH,CADF;AAKD,CANM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourcesContent":["import * as React from 'react';\nimport type { DataGridContextValues, DataGridState } from './DataGrid.types';\nimport { renderTable_unstable } from '../Table/renderTable';\nimport { DataGridContextProvider } from '../../contexts/dataGridContext';\n\n/**\n * Render the final JSX of DataGrid\n */\nexport const renderDataGrid_unstable = (state: DataGridState, contextValues: DataGridContextValues) => {\n return (\n <DataGridContextProvider value={contextValues.dataGrid}>\n {renderTable_unstable(state, contextValues)}\n </DataGridContextProvider>\n );\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -5,7 +5,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useDataGrid_unstable = void 0;
|
|
7
7
|
|
|
8
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
9
|
+
|
|
8
10
|
const useTable_1 = /*#__PURE__*/require("../Table/useTable");
|
|
11
|
+
|
|
12
|
+
const useTable_2 = /*#__PURE__*/require("../../hooks/useTable");
|
|
9
13
|
/**
|
|
10
14
|
* Create the state required to render DataGrid.
|
|
11
15
|
*
|
|
@@ -18,9 +22,29 @@ const useTable_1 = /*#__PURE__*/require("../Table/useTable");
|
|
|
18
22
|
|
|
19
23
|
|
|
20
24
|
const useDataGrid_unstable = (props, ref) => {
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
const {
|
|
26
|
+
items,
|
|
27
|
+
columns,
|
|
28
|
+
focusMode = 'none'
|
|
29
|
+
} = props;
|
|
30
|
+
const navigable = focusMode !== 'none';
|
|
31
|
+
const keyboardNavAttr = react_tabster_1.useArrowNavigationGroup({
|
|
32
|
+
axis: 'grid'
|
|
33
|
+
});
|
|
34
|
+
const tableState = useTable_2.useTable({
|
|
35
|
+
items,
|
|
36
|
+
columns
|
|
37
|
+
}, []);
|
|
38
|
+
const baseTableState = useTable_1.useTable_unstable({
|
|
39
|
+
role: 'grid',
|
|
40
|
+
as: 'div',
|
|
41
|
+
...(navigable && keyboardNavAttr),
|
|
42
|
+
...props
|
|
23
43
|
}, ref);
|
|
44
|
+
return { ...baseTableState,
|
|
45
|
+
focusMode,
|
|
46
|
+
tableState
|
|
47
|
+
};
|
|
24
48
|
};
|
|
25
49
|
|
|
26
50
|
exports.useDataGrid_unstable = useDataGrid_unstable;
|