@fluentui/react-table 9.11.2 → 9.11.4
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.md +39 -4
- package/dist/index.d.ts +1 -1
- package/lib/components/DataGridCell/useDataGridCell.js +4 -2
- package/lib/components/DataGridCell/useDataGridCell.js.map +1 -1
- package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js +4 -2
- package/lib/components/DataGridHeaderCell/useDataGridHeaderCell.js.map +1 -1
- package/lib/components/DataGridRow/useDataGridRow.js +19 -3
- package/lib/components/DataGridRow/useDataGridRow.js.map +1 -1
- package/lib/components/TableCellLayout/TableCellLayout.types.js.map +1 -1
- package/lib/components/TableRow/useTableRowStyles.styles.js +15 -2
- package/lib/components/TableRow/useTableRowStyles.styles.js.map +1 -1
- package/lib/contexts/dataGridContext.js +1 -1
- package/lib/contexts/dataGridContext.js.map +1 -1
- package/lib/hooks/useKeyboardResizing.js +8 -2
- package/lib/hooks/useKeyboardResizing.js.map +1 -1
- package/lib/hooks/useTableColumnResizeMouseHandler.js +12 -6
- package/lib/hooks/useTableColumnResizeMouseHandler.js.map +1 -1
- package/lib/hooks/useTableColumnResizeState.js +9 -3
- package/lib/hooks/useTableColumnResizeState.js.map +1 -1
- package/lib/hooks/useTableColumnSizing.js +20 -11
- package/lib/hooks/useTableColumnSizing.js.map +1 -1
- package/lib/hooks/useTableFeatures.js +6 -1
- package/lib/hooks/useTableFeatures.js.map +1 -1
- package/lib/hooks/useTableSort.js +14 -6
- package/lib/hooks/useTableSort.js.map +1 -1
- package/lib-commonjs/components/DataGridCell/useDataGridCell.js +4 -2
- package/lib-commonjs/components/DataGridCell/useDataGridCell.js.map +1 -1
- package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCell.js +4 -2
- package/lib-commonjs/components/DataGridHeaderCell/useDataGridHeaderCell.js.map +1 -1
- package/lib-commonjs/components/DataGridRow/useDataGridRow.js +18 -2
- package/lib-commonjs/components/DataGridRow/useDataGridRow.js.map +1 -1
- package/lib-commonjs/components/TableRow/useTableRowStyles.styles.js +36 -1
- package/lib-commonjs/components/TableRow/useTableRowStyles.styles.js.map +1 -1
- package/lib-commonjs/contexts/dataGridContext.js +3 -0
- package/lib-commonjs/contexts/dataGridContext.js.map +1 -1
- package/lib-commonjs/hooks/useKeyboardResizing.js +8 -2
- package/lib-commonjs/hooks/useKeyboardResizing.js.map +1 -1
- package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js +12 -6
- package/lib-commonjs/hooks/useTableColumnResizeMouseHandler.js.map +1 -1
- package/lib-commonjs/hooks/useTableColumnResizeState.js +9 -3
- package/lib-commonjs/hooks/useTableColumnResizeState.js.map +1 -1
- package/lib-commonjs/hooks/useTableColumnSizing.js +20 -11
- package/lib-commonjs/hooks/useTableColumnSizing.js.map +1 -1
- package/lib-commonjs/hooks/useTableFeatures.js +6 -1
- package/lib-commonjs/hooks/useTableFeatures.js.map +1 -1
- package/lib-commonjs/hooks/useTableSort.js +13 -5
- package/lib-commonjs/hooks/useTableSort.js.map +1 -1
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,53 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-table
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 17 Jan 2024 16:13:10 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.11.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.11.4)
|
|
8
|
+
|
|
9
|
+
Wed, 17 Jan 2024 16:13:10 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.11.3..@fluentui/react-table_v9.11.4)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-aria to v9.7.2 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
|
|
15
|
+
- Bump @fluentui/react-avatar to v9.6.8 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
|
|
16
|
+
- Bump @fluentui/react-checkbox to v9.2.7 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
|
|
17
|
+
- Bump @fluentui/react-context-selector to v9.1.48 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
|
|
18
|
+
- Bump @fluentui/react-radio to v9.2.2 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
|
|
19
|
+
- Bump @fluentui/react-tabster to v9.17.2 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
|
|
20
|
+
- Bump @fluentui/react-utilities to v9.16.0 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
|
|
21
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.26 ([PR #30339](https://github.com/microsoft/fluentui/pull/30339) by beachball)
|
|
22
|
+
|
|
23
|
+
## [9.11.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.11.3)
|
|
24
|
+
|
|
25
|
+
Tue, 16 Jan 2024 13:14:09 GMT
|
|
26
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.11.2..@fluentui/react-table_v9.11.3)
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- fix: correct version of @types/react-dom peer dep that matches for 16.x ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by mgodbolt@microsoft.com)
|
|
31
|
+
- fix: DataGrid selection performance improvement ([PR #30288](https://github.com/microsoft/fluentui/pull/30288) by lingfangao@hotmail.com)
|
|
32
|
+
- bugfix: add system colors on hover ([PR #30073](https://github.com/microsoft/fluentui/pull/30073) by bernardo.sunderhus@gmail.com)
|
|
33
|
+
- bugfix: Omit colliding content property from ComponentProps ([PR #29865](https://github.com/microsoft/fluentui/pull/29865) by bernardo.sunderhus@gmail.com)
|
|
34
|
+
- Bump @fluentui/react-aria to v9.7.1 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
35
|
+
- Bump @fluentui/react-avatar to v9.6.7 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
36
|
+
- Bump @fluentui/react-checkbox to v9.2.6 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
37
|
+
- Bump @fluentui/react-context-selector to v9.1.47 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
38
|
+
- Bump @fluentui/react-radio to v9.2.1 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
39
|
+
- Bump @fluentui/react-tabster to v9.17.1 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
40
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.25 ([PR #30299](https://github.com/microsoft/fluentui/pull/30299) by beachball)
|
|
41
|
+
|
|
7
42
|
## [9.11.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.11.2)
|
|
8
43
|
|
|
9
|
-
Thu, 11 Jan 2024 09:
|
|
44
|
+
Thu, 11 Jan 2024 09:04:29 GMT
|
|
10
45
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.11.1..@fluentui/react-table_v9.11.2)
|
|
11
46
|
|
|
12
47
|
### Patches
|
|
13
48
|
|
|
14
|
-
- Bump @fluentui/react-aria to v9.7.0 ([PR #
|
|
15
|
-
- Bump @fluentui/react-avatar to v9.6.6 ([PR #
|
|
49
|
+
- Bump @fluentui/react-aria to v9.7.0 ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by beachball)
|
|
50
|
+
- Bump @fluentui/react-avatar to v9.6.6 ([PR #30259](https://github.com/microsoft/fluentui/pull/30259) by beachball)
|
|
16
51
|
|
|
17
52
|
## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.11.1)
|
|
18
53
|
|
package/dist/index.d.ts
CHANGED
|
@@ -471,7 +471,7 @@ declare type TableCellLayoutContextValues = {
|
|
|
471
471
|
/**
|
|
472
472
|
* TableCellLayout Props
|
|
473
473
|
*/
|
|
474
|
-
export declare type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots
|
|
474
|
+
export declare type TableCellLayoutProps = Omit<ComponentProps<Partial<TableCellLayoutSlots>>, 'content'> & Pick<Partial<TableCellLayoutSlots>, 'content'> & {
|
|
475
475
|
/**
|
|
476
476
|
* Renders design variants of the table cell
|
|
477
477
|
* @default undefined
|
|
@@ -16,7 +16,9 @@ import { useColumnIdContext } from '../../contexts/columnIdContext';
|
|
|
16
16
|
const columnId = useColumnIdContext();
|
|
17
17
|
const tabbable = useDataGridContext_unstable((ctx)=>(ctx.focusMode === 'cell' || ctx.focusMode === 'composite') && focusMode !== 'none');
|
|
18
18
|
const resizableColumns = useDataGridContext_unstable((ctx)=>ctx.resizableColumns);
|
|
19
|
-
const
|
|
19
|
+
const getTableCellProps = useDataGridContext_unstable((ctx)=>{
|
|
20
|
+
return ctx.columnSizing_unstable.getTableCellProps;
|
|
21
|
+
});
|
|
20
22
|
const focusableGroupAttr = useFocusableGroup({
|
|
21
23
|
tabBehavior: 'limited-trap-focus'
|
|
22
24
|
});
|
|
@@ -25,7 +27,7 @@ import { useColumnIdContext } from '../../contexts/columnIdContext';
|
|
|
25
27
|
role: 'gridcell',
|
|
26
28
|
...focusMode === 'group' && focusableGroupAttr,
|
|
27
29
|
tabIndex: tabbable ? 0 : undefined,
|
|
28
|
-
...resizableColumns ?
|
|
30
|
+
...resizableColumns ? getTableCellProps(columnId) : {},
|
|
29
31
|
...props
|
|
30
32
|
}, ref);
|
|
31
33
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n const { focusMode = 'cell' } = props;\n const columnId = useColumnIdContext();\n const tabbable = useDataGridContext_unstable(\n ctx => (ctx.focusMode === 'cell' || ctx.focusMode === 'composite') && focusMode !== 'none',\n );\n const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n const
|
|
1
|
+
{"version":3,"sources":["useDataGridCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport type { DataGridCellProps, DataGridCellState } from './DataGridCell.types';\nimport { useTableCell_unstable } from '../TableCell/useTableCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\n\n/**\n * Create the state required to render DataGridCell.\n *\n * The returned state can be modified with hooks such as useDataGridCellStyles_unstable,\n * before being passed to renderDataGridCell_unstable.\n *\n * @param props - props from this instance of DataGridCell\n * @param ref - reference to root HTMLElement of DataGridCell\n */\nexport const useDataGridCell_unstable = (props: DataGridCellProps, ref: React.Ref<HTMLElement>): DataGridCellState => {\n const { focusMode = 'cell' } = props;\n const columnId = useColumnIdContext();\n const tabbable = useDataGridContext_unstable(\n ctx => (ctx.focusMode === 'cell' || ctx.focusMode === 'composite') && focusMode !== 'none',\n );\n const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n const getTableCellProps = useDataGridContext_unstable(ctx => {\n return ctx.columnSizing_unstable.getTableCellProps;\n });\n const focusableGroupAttr = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });\n return useTableCell_unstable(\n {\n as: 'div',\n role: 'gridcell',\n ...(focusMode === 'group' && focusableGroupAttr),\n tabIndex: tabbable ? 0 : undefined,\n ...(resizableColumns ? getTableCellProps(columnId) : {}),\n ...props,\n },\n ref,\n );\n};\n"],"names":["React","useFocusableGroup","useTableCell_unstable","useDataGridContext_unstable","useColumnIdContext","useDataGridCell_unstable","props","ref","focusMode","columnId","tabbable","ctx","resizableColumns","getTableCellProps","columnSizing_unstable","focusableGroupAttr","tabBehavior","as","role","tabIndex","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5D,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EAAEC,YAAY,MAAM,EAAE,GAAGF;IAC/B,MAAMG,WAAWL;IACjB,MAAMM,WAAWP,4BACfQ,CAAAA,MAAO,AAACA,CAAAA,IAAIH,SAAS,KAAK,UAAUG,IAAIH,SAAS,KAAK,WAAU,KAAMA,cAAc;IAEtF,MAAMI,mBAAmBT,4BAA4BQ,CAAAA,MAAOA,IAAIC,gBAAgB;IAChF,MAAMC,oBAAoBV,4BAA4BQ,CAAAA;QACpD,OAAOA,IAAIG,qBAAqB,CAACD,iBAAiB;IACpD;IACA,MAAME,qBAAqBd,kBAAkB;QAAEe,aAAa;IAAqB;IACjF,OAAOd,sBACL;QACEe,IAAI;QACJC,MAAM;QACN,GAAIV,cAAc,WAAWO,kBAAkB;QAC/CI,UAAUT,WAAW,IAAIU;QACzB,GAAIR,mBAAmBC,kBAAkBJ,YAAY,CAAC,CAAC;QACvD,GAAGH,KAAK;IACV,GACAC;AAEJ,EAAE"}
|
|
@@ -27,7 +27,9 @@ import { isColumnSortable } from '../../utils/isColumnSortable';
|
|
|
27
27
|
});
|
|
28
28
|
const sortDirection = useDataGridContext_unstable((ctx)=>sortable ? ctx.sort.getSortDirection(columnId) : undefined);
|
|
29
29
|
const resizableColumns = useDataGridContext_unstable((ctx)=>ctx.resizableColumns);
|
|
30
|
-
const
|
|
30
|
+
const getTableHeaderCellProps = useDataGridContext_unstable((ctx)=>{
|
|
31
|
+
return ctx.columnSizing_unstable.getTableHeaderCellProps;
|
|
32
|
+
});
|
|
31
33
|
// eslint-disable-next-line deprecation/deprecation -- prefer HTMLTableCellElement
|
|
32
34
|
const onClick = useEventCallback((e)=>{
|
|
33
35
|
var _props_onClick;
|
|
@@ -41,7 +43,7 @@ import { isColumnSortable } from '../../utils/isColumnSortable';
|
|
|
41
43
|
sortDirection,
|
|
42
44
|
as: 'div',
|
|
43
45
|
tabIndex: sortable ? undefined : 0,
|
|
44
|
-
...resizableColumns ?
|
|
46
|
+
...resizableColumns ? getTableHeaderCellProps(columnId) : {},
|
|
45
47
|
...props,
|
|
46
48
|
onClick
|
|
47
49
|
}, ref);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDataGridHeaderCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { isColumnSortable } from '../../utils/isColumnSortable';\n\n/**\n * Create the state required to render DataGridHeaderCell.\n *\n * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n *\n * @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */\nexport const useDataGridHeaderCell_unstable = (\n props: DataGridHeaderCellProps,\n ref: React.Ref<HTMLElement>,\n): DataGridHeaderCellState => {\n const columnId = useColumnIdContext();\n const { sortable: gridSortable } = useTableContext();\n const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);\n\n const sortable = useDataGridContext_unstable(ctx => {\n const columnSortable = !!ctx.columns.find(c => c.columnId === columnId && isColumnSortable(c));\n if (!gridSortable) {\n // if the grid is not sortable - disable sorting on all columns\n return false;\n }\n\n return columnSortable;\n });\n\n const sortDirection = useDataGridContext_unstable(ctx =>\n sortable ? ctx.sort.getSortDirection(columnId) : undefined,\n );\n const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n const
|
|
1
|
+
{"version":3,"sources":["useDataGridHeaderCell.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport type { DataGridHeaderCellProps, DataGridHeaderCellState } from './DataGridHeaderCell.types';\nimport { useTableHeaderCell_unstable } from '../TableHeaderCell/useTableHeaderCell';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { useColumnIdContext } from '../../contexts/columnIdContext';\nimport { useTableContext } from '../../contexts/tableContext';\nimport { isColumnSortable } from '../../utils/isColumnSortable';\n\n/**\n * Create the state required to render DataGridHeaderCell.\n *\n * The returned state can be modified with hooks such as useDataGridHeaderCellStyles_unstable,\n * before being passed to renderDataGridHeaderCell_unstable.\n *\n * @param props - props from this instance of DataGridHeaderCell\n * @param ref - reference to root HTMLElement of DataGridHeaderCell\n */\nexport const useDataGridHeaderCell_unstable = (\n props: DataGridHeaderCellProps,\n ref: React.Ref<HTMLElement>,\n): DataGridHeaderCellState => {\n const columnId = useColumnIdContext();\n const { sortable: gridSortable } = useTableContext();\n const toggleColumnSort = useDataGridContext_unstable(ctx => ctx.sort.toggleColumnSort);\n\n const sortable = useDataGridContext_unstable(ctx => {\n const columnSortable = !!ctx.columns.find(c => c.columnId === columnId && isColumnSortable(c));\n if (!gridSortable) {\n // if the grid is not sortable - disable sorting on all columns\n return false;\n }\n\n return columnSortable;\n });\n\n const sortDirection = useDataGridContext_unstable(ctx =>\n sortable ? ctx.sort.getSortDirection(columnId) : undefined,\n );\n const resizableColumns = useDataGridContext_unstable(ctx => ctx.resizableColumns);\n const getTableHeaderCellProps = useDataGridContext_unstable(ctx => {\n return ctx.columnSizing_unstable.getTableHeaderCellProps;\n });\n\n // eslint-disable-next-line deprecation/deprecation -- prefer HTMLTableCellElement\n const onClick = useEventCallback((e: React.MouseEvent<HTMLTableHeaderCellElement>) => {\n if (sortable) {\n toggleColumnSort(e, columnId);\n }\n props.onClick?.(e);\n });\n\n return useTableHeaderCell_unstable(\n {\n sortable,\n sortDirection,\n as: 'div',\n tabIndex: sortable ? undefined : 0,\n ...(resizableColumns ? getTableHeaderCellProps(columnId) : {}),\n ...props,\n onClick,\n },\n ref,\n );\n};\n"],"names":["React","useEventCallback","useTableHeaderCell_unstable","useDataGridContext_unstable","useColumnIdContext","useTableContext","isColumnSortable","useDataGridHeaderCell_unstable","props","ref","columnId","sortable","gridSortable","toggleColumnSort","ctx","sort","columnSortable","columns","find","c","sortDirection","getSortDirection","undefined","resizableColumns","getTableHeaderCellProps","columnSizing_unstable","onClick","e","as","tabIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,2BAA2B,QAAQ,wCAAwC;AACpF,SAASC,2BAA2B,QAAQ,iCAAiC;AAC7E,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,+BAA+B;AAEhE;;;;;;;;CAQC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC,OACAC;IAEA,MAAMC,WAAWN;IACjB,MAAM,EAAEO,UAAUC,YAAY,EAAE,GAAGP;IACnC,MAAMQ,mBAAmBV,4BAA4BW,CAAAA,MAAOA,IAAIC,IAAI,CAACF,gBAAgB;IAErF,MAAMF,WAAWR,4BAA4BW,CAAAA;QAC3C,MAAME,iBAAiB,CAAC,CAACF,IAAIG,OAAO,CAACC,IAAI,CAACC,CAAAA,IAAKA,EAAET,QAAQ,KAAKA,YAAYJ,iBAAiBa;QAC3F,IAAI,CAACP,cAAc;YACjB,+DAA+D;YAC/D,OAAO;QACT;QAEA,OAAOI;IACT;IAEA,MAAMI,gBAAgBjB,4BAA4BW,CAAAA,MAChDH,WAAWG,IAAIC,IAAI,CAACM,gBAAgB,CAACX,YAAYY;IAEnD,MAAMC,mBAAmBpB,4BAA4BW,CAAAA,MAAOA,IAAIS,gBAAgB;IAChF,MAAMC,0BAA0BrB,4BAA4BW,CAAAA;QAC1D,OAAOA,IAAIW,qBAAqB,CAACD,uBAAuB;IAC1D;IAEA,kFAAkF;IAClF,MAAME,UAAUzB,iBAAiB,CAAC0B;YAIhCnB;QAHA,IAAIG,UAAU;YACZE,iBAAiBc,GAAGjB;QACtB;SACAF,iBAAAA,MAAMkB,OAAO,cAAblB,qCAAAA,oBAAAA,OAAgBmB;IAClB;IAEA,OAAOzB,4BACL;QACES;QACAS;QACAQ,IAAI;QACJC,UAAUlB,WAAWW,YAAY;QACjC,GAAIC,mBAAmBC,wBAAwBd,YAAY,CAAC,CAAC;QAC7D,GAAGF,KAAK;QACRkB;IACF,GACAjB;AAEJ,EAAE"}
|
|
@@ -2,7 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { isInteractiveHTMLElement, useEventCallback, slot } from '@fluentui/react-utilities';
|
|
3
3
|
import { Space } from '@fluentui/keyboard-keys';
|
|
4
4
|
import { useTableRow_unstable } from '../TableRow/useTableRow';
|
|
5
|
-
import { useDataGridContext_unstable } from '../../contexts/dataGridContext';
|
|
5
|
+
import { dataGridContextDefaultValue, useDataGridContext_unstable } from '../../contexts/dataGridContext';
|
|
6
6
|
import { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';
|
|
7
7
|
import { useTableRowIdContext } from '../../contexts/rowIdContext';
|
|
8
8
|
import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
|
|
@@ -30,7 +30,6 @@ import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
|
|
|
30
30
|
return 'none';
|
|
31
31
|
});
|
|
32
32
|
const toggleRow = useDataGridContext_unstable((ctx)=>ctx.selection.toggleRow);
|
|
33
|
-
const dataGridContextValue = useDataGridContext_unstable((ctx)=>ctx);
|
|
34
33
|
const onClick = useEventCallback((e)=>{
|
|
35
34
|
var _props_onClick;
|
|
36
35
|
if (selectable && !isHeader) {
|
|
@@ -70,6 +69,23 @@ import { useIsInTableHeader } from '../../contexts/tableHeaderContext';
|
|
|
70
69
|
}),
|
|
71
70
|
renderCell: props.children,
|
|
72
71
|
columnDefs,
|
|
73
|
-
|
|
72
|
+
// This context value should not be used internally
|
|
73
|
+
// It's intended to help power user render functions
|
|
74
|
+
dataGridContextValue: useStableDataGridContextValue()
|
|
74
75
|
};
|
|
75
76
|
};
|
|
77
|
+
function useStableDataGridContextValue() {
|
|
78
|
+
const ref = React.useRef(dataGridContextDefaultValue);
|
|
79
|
+
// Heads up!
|
|
80
|
+
// We will not re-render when the context value changes, but we will have the latest value of the context when we do
|
|
81
|
+
// render for other reasons.
|
|
82
|
+
//
|
|
83
|
+
// This relies on a context selector that always returns the same value:
|
|
84
|
+
// - we will not re-render when the context value changes
|
|
85
|
+
// - we will store the context value in a ref
|
|
86
|
+
useDataGridContext_unstable((ctx)=>{
|
|
87
|
+
ref.current = ctx;
|
|
88
|
+
return null;
|
|
89
|
+
});
|
|
90
|
+
return ref.current;
|
|
91
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n const rowId = useTableRowIdContext();\n const isHeader = useIsInTableHeader();\n const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n const focusMode = useDataGridContext_unstable(ctx => ctx.focusMode);\n const compositeRowTabsterAttribute = useDataGridContext_unstable(ctx => ctx.compositeRowTabsterAttribute);\n const tabbable = focusMode === 'row_unstable' || focusMode === 'composite';\n const appearance = useDataGridContext_unstable(ctx => {\n if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n return ctx.selectionAppearance;\n }\n\n return 'none';\n });\n const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n
|
|
1
|
+
{"version":3,"sources":["useDataGridRow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isInteractiveHTMLElement, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { Space } from '@fluentui/keyboard-keys';\nimport type { DataGridRowProps, DataGridRowState } from './DataGridRow.types';\nimport { useTableRow_unstable } from '../TableRow/useTableRow';\nimport { dataGridContextDefaultValue, useDataGridContext_unstable } from '../../contexts/dataGridContext';\nimport { DataGridSelectionCell } from '../DataGridSelectionCell/DataGridSelectionCell';\nimport { useTableRowIdContext } from '../../contexts/rowIdContext';\nimport { useIsInTableHeader } from '../../contexts/tableHeaderContext';\n\n/**\n * Create the state required to render DataGridRow.\n *\n * The returned state can be modified with hooks such as useDataGridRowStyles_unstable,\n * before being passed to renderDataGridRow_unstable.\n *\n * @param props - props from this instance of DataGridRow\n * @param ref - reference to root HTMLElement of DataGridRow\n */\nexport const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<HTMLElement>): DataGridRowState => {\n const rowId = useTableRowIdContext();\n const isHeader = useIsInTableHeader();\n const columnDefs = useDataGridContext_unstable(ctx => ctx.columns);\n const selectable = useDataGridContext_unstable(ctx => ctx.selectableRows);\n const selected = useDataGridContext_unstable(ctx => ctx.selection.isRowSelected(rowId));\n const focusMode = useDataGridContext_unstable(ctx => ctx.focusMode);\n const compositeRowTabsterAttribute = useDataGridContext_unstable(ctx => ctx.compositeRowTabsterAttribute);\n\n const tabbable = focusMode === 'row_unstable' || focusMode === 'composite';\n const appearance = useDataGridContext_unstable(ctx => {\n if (!isHeader && selectable && ctx.selection.isRowSelected(rowId)) {\n return ctx.selectionAppearance;\n }\n\n return 'none';\n });\n const toggleRow = useDataGridContext_unstable(ctx => ctx.selection.toggleRow);\n\n const onClick = useEventCallback((e: React.MouseEvent<HTMLTableRowElement>) => {\n if (selectable && !isHeader) {\n toggleRow(e, rowId);\n }\n\n props.onClick?.(e);\n });\n\n const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLTableRowElement>) => {\n if (selectable && !isHeader && e.key === Space && !isInteractiveHTMLElement(e.target as HTMLElement)) {\n // stop scrolling\n e.preventDefault();\n toggleRow(e, rowId);\n }\n\n props.onKeyDown?.(e);\n });\n\n const baseState = useTableRow_unstable(\n {\n appearance,\n 'aria-selected': selectable ? selected : undefined,\n tabIndex: tabbable && !isHeader ? 0 : undefined,\n ...(focusMode === 'composite' && !isHeader && compositeRowTabsterAttribute),\n ...props,\n onClick,\n onKeyDown,\n children: null,\n as: 'div',\n },\n ref,\n );\n\n return {\n ...baseState,\n components: {\n ...baseState.components,\n selectionCell: DataGridSelectionCell,\n },\n selectionCell: slot.optional(props.selectionCell, {\n renderByDefault: selectable,\n elementType: DataGridSelectionCell,\n }),\n renderCell: props.children,\n columnDefs,\n // This context value should not be used internally\n // It's intended to help power user render functions\n dataGridContextValue: useStableDataGridContextValue(),\n };\n};\n\nfunction useStableDataGridContextValue() {\n const ref = React.useRef(dataGridContextDefaultValue);\n\n // Heads up!\n // We will not re-render when the context value changes, but we will have the latest value of the context when we do\n // render for other reasons.\n //\n // This relies on a context selector that always returns the same value:\n // - we will not re-render when the context value changes\n // - we will store the context value in a ref\n useDataGridContext_unstable(ctx => {\n ref.current = ctx;\n return null;\n });\n\n return ref.current!;\n}\n"],"names":["React","isInteractiveHTMLElement","useEventCallback","slot","Space","useTableRow_unstable","dataGridContextDefaultValue","useDataGridContext_unstable","DataGridSelectionCell","useTableRowIdContext","useIsInTableHeader","useDataGridRow_unstable","props","ref","rowId","isHeader","columnDefs","ctx","columns","selectable","selectableRows","selected","selection","isRowSelected","focusMode","compositeRowTabsterAttribute","tabbable","appearance","selectionAppearance","toggleRow","onClick","e","onKeyDown","key","target","preventDefault","baseState","undefined","tabIndex","children","as","components","selectionCell","optional","renderByDefault","elementType","renderCell","dataGridContextValue","useStableDataGridContextValue","useRef","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC7F,SAASC,KAAK,QAAQ,0BAA0B;AAEhD,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,2BAA2B,EAAEC,2BAA2B,QAAQ,iCAAiC;AAC1G,SAASC,qBAAqB,QAAQ,iDAAiD;AACvF,SAASC,oBAAoB,QAAQ,8BAA8B;AACnE,SAASC,kBAAkB,QAAQ,oCAAoC;AAEvE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,QAAQL;IACd,MAAMM,WAAWL;IACjB,MAAMM,aAAaT,4BAA4BU,CAAAA,MAAOA,IAAIC,OAAO;IACjE,MAAMC,aAAaZ,4BAA4BU,CAAAA,MAAOA,IAAIG,cAAc;IACxE,MAAMC,WAAWd,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACC,aAAa,CAACT;IAChF,MAAMU,YAAYjB,4BAA4BU,CAAAA,MAAOA,IAAIO,SAAS;IAClE,MAAMC,+BAA+BlB,4BAA4BU,CAAAA,MAAOA,IAAIQ,4BAA4B;IAExG,MAAMC,WAAWF,cAAc,kBAAkBA,cAAc;IAC/D,MAAMG,aAAapB,4BAA4BU,CAAAA;QAC7C,IAAI,CAACF,YAAYI,cAAcF,IAAIK,SAAS,CAACC,aAAa,CAACT,QAAQ;YACjE,OAAOG,IAAIW,mBAAmB;QAChC;QAEA,OAAO;IACT;IACA,MAAMC,YAAYtB,4BAA4BU,CAAAA,MAAOA,IAAIK,SAAS,CAACO,SAAS;IAE5E,MAAMC,UAAU5B,iBAAiB,CAAC6B;YAKhCnB;QAJA,IAAIO,cAAc,CAACJ,UAAU;YAC3Bc,UAAUE,GAAGjB;QACf;SAEAF,iBAAAA,MAAMkB,OAAO,cAAblB,qCAAAA,oBAAAA,OAAgBmB;IAClB;IAEA,MAAMC,YAAY9B,iBAAiB,CAAC6B;YAOlCnB;QANA,IAAIO,cAAc,CAACJ,YAAYgB,EAAEE,GAAG,KAAK7B,SAAS,CAACH,yBAAyB8B,EAAEG,MAAM,GAAkB;YACpG,iBAAiB;YACjBH,EAAEI,cAAc;YAChBN,UAAUE,GAAGjB;QACf;SAEAF,mBAAAA,MAAMoB,SAAS,cAAfpB,uCAAAA,sBAAAA,OAAkBmB;IACpB;IAEA,MAAMK,YAAY/B,qBAChB;QACEsB;QACA,iBAAiBR,aAAaE,WAAWgB;QACzCC,UAAUZ,YAAY,CAACX,WAAW,IAAIsB;QACtC,GAAIb,cAAc,eAAe,CAACT,YAAYU,4BAA4B;QAC1E,GAAGb,KAAK;QACRkB;QACAE;QACAO,UAAU;QACVC,IAAI;IACN,GACA3B;IAGF,OAAO;QACL,GAAGuB,SAAS;QACZK,YAAY;YACV,GAAGL,UAAUK,UAAU;YACvBC,eAAelC;QACjB;QACAkC,eAAevC,KAAKwC,QAAQ,CAAC/B,MAAM8B,aAAa,EAAE;YAChDE,iBAAiBzB;YACjB0B,aAAarC;QACf;QACAsC,YAAYlC,MAAM2B,QAAQ;QAC1BvB;QACA,mDAAmD;QACnD,oDAAoD;QACpD+B,sBAAsBC;IACxB;AACF,EAAE;AAEF,SAASA;IACP,MAAMnC,MAAMb,MAAMiD,MAAM,CAAC3C;IAEzB,YAAY;IACZ,oHAAoH;IACpH,4BAA4B;IAC5B,EAAE;IACF,wEAAwE;IACxE,yDAAyD;IACzD,6CAA6C;IAC7CC,4BAA4BU,CAAAA;QAC1BJ,IAAIqC,OAAO,GAAGjC;QACd,OAAO;IACT;IAEA,OAAOJ,IAAIqC,OAAO;AACpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["TableCellLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarSize } from '@fluentui/react-avatar';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellLayoutContextValues = {\n avatar: {\n size?: AvatarSize;\n };\n};\n\nexport type TableCellLayoutSlots = {\n root: Slot<'div'>;\n\n /**\n * Slot for an icon or other visual element\n */\n media: Slot<'span'>;\n\n /**\n * Main text for the table cell. Children of the root slot are automatically rendered here\n */\n main: Slot<'span'>;\n\n /**\n * Secondary text that describes or complements the main text\n */\n description: Slot<'span'>;\n\n /**\n * A layout wrapper for the main and description slots\n */\n content: Slot<'div'>;\n};\n\n/**\n * TableCellLayout Props\n */\nexport type TableCellLayoutProps = ComponentProps<Partial<TableCellLayoutSlots
|
|
1
|
+
{"version":3,"sources":["TableCellLayout.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { AvatarSize } from '@fluentui/react-avatar';\nimport { TableContextValue } from '../Table/Table.types';\n\nexport type TableCellLayoutContextValues = {\n avatar: {\n size?: AvatarSize;\n };\n};\n\nexport type TableCellLayoutSlots = {\n root: Slot<'div'>;\n\n /**\n * Slot for an icon or other visual element\n */\n media: Slot<'span'>;\n\n /**\n * Main text for the table cell. Children of the root slot are automatically rendered here\n */\n main: Slot<'span'>;\n\n /**\n * Secondary text that describes or complements the main text\n */\n description: Slot<'span'>;\n\n /**\n * A layout wrapper for the main and description slots\n */\n content: Slot<'div'>;\n};\n\n/**\n * TableCellLayout Props\n */\nexport type TableCellLayoutProps = Omit<ComponentProps<Partial<TableCellLayoutSlots>>, 'content'> &\n Pick<Partial<TableCellLayoutSlots>, 'content'> & {\n /**\n * Renders design variants of the table cell\n * @default undefined\n */\n appearance?: 'primary';\n\n /**\n * Renders content with overflow: hidden and text-overflow: ellipsis\n */\n truncate?: boolean;\n };\n\n/**\n * State used in rendering TableCellLayout\n */\nexport type TableCellLayoutState = ComponentState<TableCellLayoutSlots> &\n Pick<TableCellLayoutProps, 'appearance' | 'truncate'> & { avatarSize: AvatarSize | undefined } & Pick<\n TableContextValue,\n 'size'\n >;\n"],"names":[],"mappings":"AAAA,WA0DI"}
|
|
@@ -47,7 +47,12 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
47
47
|
Jwef8y: "f1t94bn6",
|
|
48
48
|
Bi91k9c: "feu1g3u",
|
|
49
49
|
Bpt6rm4: "f1uorfem",
|
|
50
|
-
ff6mpl: "fw60kww"
|
|
50
|
+
ff6mpl: "fw60kww",
|
|
51
|
+
ze5xyy: "f4xjyn1",
|
|
52
|
+
pgvf35: "ff1wgvm",
|
|
53
|
+
Bh7lczh: ["fiob0tu", "f1x4h75k"],
|
|
54
|
+
dpv3f4: "f1j6scgf",
|
|
55
|
+
Bpnjhaq: ["f1x4h75k", "fiob0tu"]
|
|
51
56
|
},
|
|
52
57
|
medium: {
|
|
53
58
|
Bn0qgzm: "f1vxd6vx",
|
|
@@ -122,7 +127,15 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
122
127
|
d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1jazu75[data-fui-focus-within]:focus-within .fui-TableSelectionCell{opacity:1;}", ".f1xeqee6[data-fui-focus-within]:focus-within .fui-TableCellActions{opacity:1;}", ".fz36nt7[data-fui-focus-visible]{outline-width:2px;}", ".f9znhxp[data-fui-focus-visible]{outline-style:solid;}", ".fqrak0z[data-fui-focus-visible]{outline-color:var(--colorStrokeFocus2);}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fg706s2{border-bottom-style:solid;}", ".frpde29{border-bottom-color:var(--colorNeutralStroke2);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".f16xkysk{background-color:var(--colorBrandBackground2);}", ".f1bh3yvw{border-top-color:var(--colorTransparentStrokeInteractive);}", ".fmi79ni{border-right-color:var(--colorTransparentStrokeInteractive);}", ".f11fozsx{border-left-color:var(--colorTransparentStrokeInteractive);}", ".fnzw4c6{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1cgsbmv{color:var(--colorNeutralForeground1Hover);}", ".frmsihh{border-top-color:var(--colorNeutralStrokeOnBrand);}", ".frttxa5{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f11o2r7f{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fem5et0{border-bottom-color:var(--colorNeutralStrokeOnBrand);}"],
|
|
123
128
|
a: [".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}", ".f15ngxrw:active .fui-TableCellActions{opacity:1;}", ".fjbbrdp:active .fui-TableSelectionCell{opacity:1;}", ".f7tkmfy:active{background-color:var(--colorBrandBackground2);}", ".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".fa9o754:active{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
124
129
|
h: [".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f1uorfem:hover .fui-TableCellActions{opacity:1;}", ".fw60kww:hover .fui-TableSelectionCell{opacity:1;}", ".f1uqaxdt:hover{background-color:var(--colorSubtleBackgroundSelected);}"],
|
|
125
|
-
m: [["@media (forced-colors: active){.
|
|
130
|
+
m: [["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
|
|
131
|
+
m: "(forced-colors: active)"
|
|
132
|
+
}], ["@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}", {
|
|
133
|
+
m: "(forced-colors: active)"
|
|
134
|
+
}], ["@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}", {
|
|
135
|
+
m: "(forced-colors: active)"
|
|
136
|
+
}], ["@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}", {
|
|
137
|
+
m: "(forced-colors: active)"
|
|
138
|
+
}], ["@media (forced-colors: active){.fqlf3fd{border-top-width:2px;}}", {
|
|
126
139
|
m: "(forced-colors: active)"
|
|
127
140
|
}], ["@media (forced-colors: active){.f9dpb3h{border-right-width:2px;}.fw2muls{border-left-width:2px;}}", {
|
|
128
141
|
m: "(forced-colors: active)"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","medium","Bn0qgzm","oivjwe","B9xav0g","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","gwxt9v","v3aym","Bc736ss","Bk6ri7n","Bk5ld8o","c4eypz","felo30","Eshu5l","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Beo2b4z","h6lo6r","Btyw6ap","w1pwid","Brwvgy3","yadkgm","neutral","none","a","h","m","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"sources":["useTableRowStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row'\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle({\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n }\n }, {\n selector: 'focus-within'\n }),\n ...createCustomFocusIndicatorStyle({\n ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n ...shorthands.borderRadius(tokens.borderRadiusMedium)\n }, {\n selector: 'focus'\n })\n },\n rootInteractive: {\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n }\n },\n medium: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)\n },\n small: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)\n },\n 'extra-small': {\n fontSize: tokens.fontSizeBase200\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n ':active': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1\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 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 none: {}\n});\n/**\n * Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,0BAA0B,QAAQ,sDAAsD;AACjG,SAASC,4BAA4B,QAAQ,0DAA0D;AACvG,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,iBAAiB,GAAG,cAAc;AAC/C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAEF;AACV,CAAC;AACD,MAAMG,oBAAoB,gBAAGV,QAAA;EAAAS,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAI5B,CAAC;AACF,MAAMC,mBAAmB,gBAAGb,QAAA;EAAAS,IAAA;IAAAE,MAAA;IAAAG,OAAA;EAAA;AAAA;EAAAF,CAAA;AAAA,CAK3B,CAAC;AACF;AACA;AACA;AAAI,MAAMG,SAAS,gBAAGf,QAAA;EAAAS,IAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,eAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAH,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAE,OAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAN,OAAA;IAAAO,MAAA;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","tableCellActionsClassNames","tableSelectionCellClassNames","createCustomFocusIndicatorStyle","tableRowClassName","tableRowClassNames","root","useTableLayoutStyles","mc9l5x","d","useFlexLayoutStyles","Bt984gj","useStyles","sj55zd","B7ck84d","Bconypa","B6guboy","Bn4voq9","g9k6zt","Bfpq7zp","kdpuga","Bw81rd7","B6xbmo0","dm238s","rootInteractive","ecr2s2","lj723h","B43xm9u","i921ia","Jwef8y","Bi91k9c","Bpt6rm4","ff6mpl","ze5xyy","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","medium","Bn0qgzm","oivjwe","B9xav0g","small","Be2twd7","brand","De3pzq","g2u3we","h3c5rm","zhjwy3","gwxt9v","v3aym","Bc736ss","Bk6ri7n","Bk5ld8o","c4eypz","felo30","Eshu5l","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Beo2b4z","h6lo6r","Btyw6ap","w1pwid","Brwvgy3","yadkgm","neutral","none","a","h","m","useTableRowStyles_unstable","state","styles","layoutStyles","table","flex","className","isHeaderRow","size","noNativeElements","appearance"],"sources":["useTableRowStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { tableCellActionsClassNames } from '../TableCellActions/useTableCellActionsStyles.styles';\nimport { tableSelectionCellClassNames } from '../TableSelectionCell/useTableSelectionCellStyles.styles';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const tableRowClassName = 'fui-TableRow';\nexport const tableRowClassNames = {\n root: tableRowClassName\n};\nconst useTableLayoutStyles = makeStyles({\n root: {\n display: 'table-row'\n }\n});\nconst useFlexLayoutStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center'\n }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n boxSizing: 'border-box',\n ...createCustomFocusIndicatorStyle({\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n }\n }, {\n selector: 'focus-within'\n }),\n ...createCustomFocusIndicatorStyle({\n ...shorthands.outline('2px', 'solid', tokens.colorStrokeFocus2),\n ...shorthands.borderRadius(tokens.borderRadiusMedium)\n }, {\n selector: 'focus'\n })\n },\n rootInteractive: {\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n color: tokens.colorNeutralForeground1Pressed,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n color: tokens.colorNeutralForeground1Hover,\n [`& .${tableCellActionsClassNames.root}`]: {\n opacity: 1\n },\n [`& .${tableSelectionCellClassNames.root}`]: {\n opacity: 1\n }\n },\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n ...shorthands.borderColor('Highlight')\n }\n }\n },\n medium: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)\n },\n small: {\n ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2)\n },\n 'extra-small': {\n fontSize: tokens.fontSizeBase200\n },\n brand: {\n backgroundColor: tokens.colorBrandBackground2,\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n ':active': {\n backgroundColor: tokens.colorBrandBackground2,\n color: tokens.colorNeutralForeground1\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 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 none: {}\n});\n/**\n * Apply styling to the TableRow slots based on the state\n */ export const useTableRowStyles_unstable = (state)=>{\n const styles = useStyles();\n const layoutStyles = {\n table: useTableLayoutStyles(),\n flex: useFlexLayoutStyles()\n };\n state.root.className = mergeClasses(tableRowClassNames.root, styles.root, !state.isHeaderRow && styles.rootInteractive, styles[state.size], state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, styles[state.appearance], state.root.className);\n return state;\n};\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
|
|
2
2
|
import { defaultTableState } from '../hooks';
|
|
3
3
|
const dataGridContext = createContext(undefined);
|
|
4
|
-
const dataGridContextDefaultValue = {
|
|
4
|
+
export const dataGridContextDefaultValue = {
|
|
5
5
|
...defaultTableState,
|
|
6
6
|
subtleSelection: false,
|
|
7
7
|
selectableRows: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["dataGridContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\
|
|
1
|
+
{"version":3,"sources":["dataGridContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { TabsterDOMAttribute } from '@fluentui/react-tabster';\nimport { DataGridContextValue } from '../components/DataGrid/DataGrid.types';\nimport { defaultTableState } from '../hooks';\n\nconst dataGridContext = createContext<DataGridContextValue | undefined>(undefined);\n\nexport const dataGridContextDefaultValue: DataGridContextValue = {\n ...defaultTableState,\n subtleSelection: false,\n selectableRows: false,\n selectionAppearance: 'brand',\n focusMode: 'none',\n compositeRowTabsterAttribute: {} as TabsterDOMAttribute,\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"],"names":["createContext","useContextSelector","defaultTableState","dataGridContext","undefined","dataGridContextDefaultValue","subtleSelection","selectableRows","selectionAppearance","focusMode","compositeRowTabsterAttribute","DataGridContextProvider","Provider","useDataGridContext_unstable","selector","ctx"],"mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,SAASC,iBAAiB,QAAQ,WAAW;AAE7C,MAAMC,kBAAkBH,cAAgDI;AAExE,OAAO,MAAMC,8BAAoD;IAC/D,GAAGH,iBAAiB;IACpBI,iBAAiB;IACjBC,gBAAgB;IAChBC,qBAAqB;IACrBC,WAAW;IACXC,8BAA8B,CAAC;AACjC,EAAE;AAEF,OAAO,MAAMC,0BAA0BR,gBAAgBS,QAAQ,CAAC;AAEhE,OAAO,MAAMC,8BAA8B,CAAIC,WAC7Cb,mBAAmBE,iBAAiB,CAACY,MAAMV,2BAA2B,GAAKS,SAASC,MAAM"}
|
|
@@ -115,7 +115,7 @@ export function useKeyboardResizing(columnResizeState) {
|
|
|
115
115
|
return {
|
|
116
116
|
toggleInteractiveMode,
|
|
117
117
|
columnId,
|
|
118
|
-
getKeyboardResizingProps: (colId, currentWidth)=>({
|
|
118
|
+
getKeyboardResizingProps: React.useCallback((colId, currentWidth)=>({
|
|
119
119
|
onKeyDown: keyboardHandler,
|
|
120
120
|
onBlur: disableInteractiveMode,
|
|
121
121
|
ref: getKeyboardResizingRef(colId),
|
|
@@ -125,6 +125,12 @@ export function useKeyboardResizing(columnResizeState) {
|
|
|
125
125
|
'aria-hidden': colId === columnId ? false : true,
|
|
126
126
|
tabIndex: colId === columnId ? 0 : undefined,
|
|
127
127
|
...tabsterAttrs
|
|
128
|
-
})
|
|
128
|
+
}), [
|
|
129
|
+
columnId,
|
|
130
|
+
disableInteractiveMode,
|
|
131
|
+
getKeyboardResizingRef,
|
|
132
|
+
keyboardHandler,
|
|
133
|
+
tabsterAttrs
|
|
134
|
+
])
|
|
129
135
|
};
|
|
130
136
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n const [columnId, setColumnId] = React.useState<TableColumnId>();\n const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n const { findPrevFocusable } = useFocusFinders();\n\n const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n React.useEffect(() => {\n columnResizeStateRef.current = columnResizeState;\n }, [columnResizeState]);\n\n const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement>>());\n\n const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n if (!columnId) {\n return;\n }\n\n const width = columnResizeStateRef.current.getColumnWidth(columnId);\n const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n const stopEvent = () => {\n event.preventDefault();\n event.stopPropagation();\n };\n\n switch (event.key) {\n case ArrowLeft:\n stopEvent();\n columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n columnId,\n width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n });\n return;\n\n case ArrowRight:\n stopEvent();\n columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n columnId,\n width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n });\n return;\n\n case Space:\n case Enter:\n case Escape:\n stopEvent();\n // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n resizeHandleRefs.get(columnId)?.current?.blur();\n break;\n }\n });\n\n const enableInteractiveMode = React.useCallback(\n (colId: TableColumnId) => {\n setColumnId(colId);\n onChangeRef.current?.(colId, true);\n\n const handle = resizeHandleRefs.get(colId)?.current;\n if (handle) {\n handle.setAttribute('tabindex', '-1');\n handle.tabIndex = -1;\n handle.focus();\n }\n },\n [resizeHandleRefs],\n );\n\n const disableInteractiveMode = React.useCallback(() => {\n if (!columnId) {\n return;\n }\n // Notify the onChange listener that we are disabling interactive mode.\n onChangeRef.current?.(columnId, false);\n // Find the previous focusable element (table header button) and focus it.\n const el = resizeHandleRefs.get(columnId)?.current;\n if (el) {\n findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n el.removeAttribute('tabindex');\n }\n\n setColumnId(undefined);\n }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n onChangeRef.current = onChange;\n if (!columnId) {\n enableInteractiveMode(colId);\n } else if (colId && columnId !== colId) {\n enableInteractiveMode(colId);\n setColumnId(colId);\n } else {\n disableInteractiveMode();\n }\n };\n\n const getKeyboardResizingRef = React.useCallback(\n (colId: TableColumnId) => {\n const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n resizeHandleRefs.set(colId, ref);\n return ref;\n },\n [resizeHandleRefs],\n );\n\n // This makes sure the left and right arrow keys are ignored in tabster,\n // so that they can be used for resizing.\n const tabsterAttrs = useTabsterAttributes({\n focusable: {\n ignoreKeydown: {\n ArrowLeft: true,\n ArrowRight: true,\n },\n },\n });\n\n return {\n toggleInteractiveMode,\n columnId,\n getKeyboardResizingProps: (colId: TableColumnId, currentWidth: number) => ({\n
|
|
1
|
+
{"version":3,"sources":["useKeyboardResizing.ts"],"sourcesContent":["import * as React from 'react';\nimport { ArrowLeft, ArrowRight, Enter, Escape, Shift, Space } from '@fluentui/keyboard-keys';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { ColumnResizeState, EnableKeyboardModeOnChangeCallback, TableColumnId } from './types';\nimport { useFocusFinders, useTabsterAttributes } from '@fluentui/react-tabster';\n\nconst STEP = 20;\nconst PRECISION_MODIFIER = Shift;\nconst PRECISION_FACTOR = 1 / 4;\n\nexport function useKeyboardResizing(columnResizeState: ColumnResizeState) {\n const [columnId, setColumnId] = React.useState<TableColumnId>();\n const onChangeRef = React.useRef<EnableKeyboardModeOnChangeCallback>();\n const { findPrevFocusable } = useFocusFinders();\n\n const columnResizeStateRef = React.useRef<ColumnResizeState>(columnResizeState);\n React.useEffect(() => {\n columnResizeStateRef.current = columnResizeState;\n }, [columnResizeState]);\n\n const [resizeHandleRefs] = React.useState(() => new Map<TableColumnId, React.RefObject<HTMLDivElement>>());\n\n const keyboardHandler = useEventCallback((event: React.KeyboardEvent) => {\n if (!columnId) {\n return;\n }\n\n const width = columnResizeStateRef.current.getColumnWidth(columnId);\n const precisionModifier = event.getModifierState(PRECISION_MODIFIER);\n\n const stopEvent = () => {\n event.preventDefault();\n event.stopPropagation();\n };\n\n switch (event.key) {\n case ArrowLeft:\n stopEvent();\n columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n columnId,\n width: width - (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n });\n return;\n\n case ArrowRight:\n stopEvent();\n columnResizeStateRef.current.setColumnWidth(event.nativeEvent, {\n columnId,\n width: width + (precisionModifier ? STEP * PRECISION_FACTOR : STEP),\n });\n return;\n\n case Space:\n case Enter:\n case Escape:\n stopEvent();\n // Just blur here, the onBlur handler will take care of the rest (disableInteractiveMode).\n resizeHandleRefs.get(columnId)?.current?.blur();\n break;\n }\n });\n\n const enableInteractiveMode = React.useCallback(\n (colId: TableColumnId) => {\n setColumnId(colId);\n onChangeRef.current?.(colId, true);\n\n const handle = resizeHandleRefs.get(colId)?.current;\n if (handle) {\n handle.setAttribute('tabindex', '-1');\n handle.tabIndex = -1;\n handle.focus();\n }\n },\n [resizeHandleRefs],\n );\n\n const disableInteractiveMode = React.useCallback(() => {\n if (!columnId) {\n return;\n }\n // Notify the onChange listener that we are disabling interactive mode.\n onChangeRef.current?.(columnId, false);\n // Find the previous focusable element (table header button) and focus it.\n const el = resizeHandleRefs.get(columnId)?.current;\n if (el) {\n findPrevFocusable(el)?.focus(); // Focus the previous focusable element (header button).\n el.removeAttribute('tabindex');\n }\n\n setColumnId(undefined);\n }, [columnId, findPrevFocusable, resizeHandleRefs]);\n\n const toggleInteractiveMode = (colId: TableColumnId, onChange?: EnableKeyboardModeOnChangeCallback) => {\n onChangeRef.current = onChange;\n if (!columnId) {\n enableInteractiveMode(colId);\n } else if (colId && columnId !== colId) {\n enableInteractiveMode(colId);\n setColumnId(colId);\n } else {\n disableInteractiveMode();\n }\n };\n\n const getKeyboardResizingRef = React.useCallback(\n (colId: TableColumnId) => {\n const ref = resizeHandleRefs.get(colId) || React.createRef<HTMLDivElement>();\n resizeHandleRefs.set(colId, ref);\n return ref;\n },\n [resizeHandleRefs],\n );\n\n // This makes sure the left and right arrow keys are ignored in tabster,\n // so that they can be used for resizing.\n const tabsterAttrs = useTabsterAttributes({\n focusable: {\n ignoreKeydown: {\n ArrowLeft: true,\n ArrowRight: true,\n },\n },\n });\n\n return {\n toggleInteractiveMode,\n columnId,\n getKeyboardResizingProps: React.useCallback(\n (colId: TableColumnId, currentWidth: number) => ({\n onKeyDown: keyboardHandler,\n onBlur: disableInteractiveMode,\n ref: getKeyboardResizingRef(colId),\n role: 'separator',\n 'aria-label': 'Resize column',\n 'aria-valuetext': `${currentWidth} pixels`,\n 'aria-hidden': colId === columnId ? false : true,\n tabIndex: colId === columnId ? 0 : undefined,\n ...tabsterAttrs,\n }),\n [columnId, disableInteractiveMode, getKeyboardResizingRef, keyboardHandler, tabsterAttrs],\n ),\n };\n}\n"],"names":["React","ArrowLeft","ArrowRight","Enter","Escape","Shift","Space","useEventCallback","useFocusFinders","useTabsterAttributes","STEP","PRECISION_MODIFIER","PRECISION_FACTOR","useKeyboardResizing","columnResizeState","columnId","setColumnId","useState","onChangeRef","useRef","findPrevFocusable","columnResizeStateRef","useEffect","current","resizeHandleRefs","Map","keyboardHandler","event","width","getColumnWidth","precisionModifier","getModifierState","stopEvent","preventDefault","stopPropagation","key","setColumnWidth","nativeEvent","get","blur","enableInteractiveMode","useCallback","colId","handle","setAttribute","tabIndex","focus","disableInteractiveMode","el","removeAttribute","undefined","toggleInteractiveMode","onChange","getKeyboardResizingRef","ref","createRef","set","tabsterAttrs","focusable","ignoreKeydown","getKeyboardResizingProps","currentWidth","onKeyDown","onBlur","role"],"mappings":"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"}
|
|
@@ -7,18 +7,19 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
|
|
|
7
7
|
const colId = React.useRef(undefined);
|
|
8
8
|
const { targetDocument } = useFluent();
|
|
9
9
|
const globalWin = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
|
|
10
|
+
const { getColumnWidth, setColumnWidth } = columnResizeState;
|
|
10
11
|
const recalculatePosition = React.useCallback((e)=>{
|
|
11
12
|
const { clientX } = getEventClientCoords(e);
|
|
12
13
|
const dx = clientX - mouseX.current;
|
|
13
14
|
// Update the local width for the column and set it
|
|
14
15
|
currentWidth.current += dx;
|
|
15
|
-
colId.current &&
|
|
16
|
+
colId.current && setColumnWidth(e, {
|
|
16
17
|
columnId: colId.current,
|
|
17
18
|
width: currentWidth.current
|
|
18
19
|
});
|
|
19
20
|
mouseX.current = clientX;
|
|
20
21
|
}, [
|
|
21
|
-
|
|
22
|
+
setColumnWidth
|
|
22
23
|
]);
|
|
23
24
|
const onDrag = React.useCallback((e)=>{
|
|
24
25
|
// Using requestAnimationFrame here drastically improves resizing experience on slower CPUs
|
|
@@ -44,10 +45,10 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
|
|
|
44
45
|
onDrag,
|
|
45
46
|
targetDocument
|
|
46
47
|
]);
|
|
47
|
-
const getOnMouseDown = (columnId)=>(event)=>{
|
|
48
|
+
const getOnMouseDown = React.useCallback((columnId)=>(event)=>{
|
|
48
49
|
// Keep the width locally so that we decouple the calculation of the next with from rendering.
|
|
49
50
|
// This makes the whole experience much faster and more precise
|
|
50
|
-
currentWidth.current =
|
|
51
|
+
currentWidth.current = getColumnWidth(columnId);
|
|
51
52
|
mouseX.current = getEventClientCoords(event).clientX;
|
|
52
53
|
colId.current = columnId;
|
|
53
54
|
if (isMouseEvent(event)) {
|
|
@@ -62,8 +63,13 @@ export function useTableColumnResizeMouseHandler(columnResizeState) {
|
|
|
62
63
|
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchend', onDragEnd);
|
|
63
64
|
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('touchmove', onDrag);
|
|
64
65
|
}
|
|
65
|
-
}
|
|
66
|
+
}, [
|
|
67
|
+
getColumnWidth,
|
|
68
|
+
onDrag,
|
|
69
|
+
onDragEnd,
|
|
70
|
+
targetDocument
|
|
71
|
+
]);
|
|
66
72
|
return {
|
|
67
|
-
getOnMouseDown
|
|
73
|
+
getOnMouseDown
|
|
68
74
|
};
|
|
69
75
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n NativeTouchOrMouseEvent,\n ReactTouchOrMouseEvent,\n getEventClientCoords,\n isMouseEvent,\n isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n const mouseX = React.useRef(0);\n const currentWidth = React.useRef(0);\n const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n const { targetDocument } = useFluent();\n const globalWin = targetDocument?.defaultView;\n\n const recalculatePosition = React.useCallback(\n (e: NativeTouchOrMouseEvent) => {\n const { clientX } = getEventClientCoords(e);\n const dx = clientX - mouseX.current;\n\n // Update the local width for the column and set it\n currentWidth.current += dx;\n colId.current &&
|
|
1
|
+
{"version":3,"sources":["useTableColumnResizeMouseHandler.ts"],"sourcesContent":["import * as React from 'react';\nimport { TableColumnId, ColumnResizeState } from './types';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n NativeTouchOrMouseEvent,\n ReactTouchOrMouseEvent,\n getEventClientCoords,\n isMouseEvent,\n isTouchEvent,\n} from '@fluentui/react-utilities';\n\nexport function useTableColumnResizeMouseHandler(columnResizeState: ColumnResizeState) {\n const mouseX = React.useRef(0);\n const currentWidth = React.useRef(0);\n const colId = React.useRef<TableColumnId | undefined>(undefined);\n\n const { targetDocument } = useFluent();\n const globalWin = targetDocument?.defaultView;\n\n const { getColumnWidth, setColumnWidth } = columnResizeState;\n\n const recalculatePosition = React.useCallback(\n (e: NativeTouchOrMouseEvent) => {\n const { clientX } = getEventClientCoords(e);\n const dx = clientX - mouseX.current;\n\n // Update the local width for the column and set it\n currentWidth.current += dx;\n colId.current && setColumnWidth(e, { columnId: colId.current, width: currentWidth.current });\n mouseX.current = clientX;\n },\n [setColumnWidth],\n );\n\n const onDrag = React.useCallback(\n (e: NativeTouchOrMouseEvent) => {\n // Using requestAnimationFrame here drastically improves resizing experience on slower CPUs\n if (typeof globalWin?.requestAnimationFrame === 'function') {\n requestAnimationFrame(() => recalculatePosition(e));\n } else {\n recalculatePosition(e);\n }\n },\n [globalWin?.requestAnimationFrame, recalculatePosition],\n );\n\n const onDragEnd = React.useCallback(\n (event: NativeTouchOrMouseEvent) => {\n if (isMouseEvent(event)) {\n targetDocument?.removeEventListener('mouseup', onDragEnd);\n targetDocument?.removeEventListener('mousemove', onDrag);\n }\n if (isTouchEvent(event)) {\n targetDocument?.removeEventListener('touchend', onDragEnd);\n targetDocument?.removeEventListener('touchmove', onDrag);\n }\n },\n [onDrag, targetDocument],\n );\n\n const getOnMouseDown = React.useCallback(\n (columnId: TableColumnId) => (event: ReactTouchOrMouseEvent) => {\n // Keep the width locally so that we decouple the calculation of the next with from rendering.\n // This makes the whole experience much faster and more precise\n currentWidth.current = getColumnWidth(columnId);\n mouseX.current = getEventClientCoords(event).clientX;\n colId.current = columnId;\n\n if (isMouseEvent(event)) {\n // ignore other buttons than primary mouse button\n if (event.target !== event.currentTarget || event.button !== 0) {\n return;\n }\n targetDocument?.addEventListener('mouseup', onDragEnd);\n targetDocument?.addEventListener('mousemove', onDrag);\n }\n\n if (isTouchEvent(event)) {\n targetDocument?.addEventListener('touchend', onDragEnd);\n targetDocument?.addEventListener('touchmove', onDrag);\n }\n },\n [getColumnWidth, onDrag, onDragEnd, targetDocument],\n );\n\n return {\n getOnMouseDown,\n };\n}\n"],"names":["React","useFluent_unstable","useFluent","getEventClientCoords","isMouseEvent","isTouchEvent","useTableColumnResizeMouseHandler","columnResizeState","mouseX","useRef","currentWidth","colId","undefined","targetDocument","globalWin","defaultView","getColumnWidth","setColumnWidth","recalculatePosition","useCallback","e","clientX","dx","current","columnId","width","onDrag","requestAnimationFrame","onDragEnd","event","removeEventListener","getOnMouseDown","target","currentTarget","button","addEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAGEC,oBAAoB,EACpBC,YAAY,EACZC,YAAY,QACP,4BAA4B;AAEnC,OAAO,SAASC,iCAAiCC,iBAAoC;IACnF,MAAMC,SAASR,MAAMS,MAAM,CAAC;IAC5B,MAAMC,eAAeV,MAAMS,MAAM,CAAC;IAClC,MAAME,QAAQX,MAAMS,MAAM,CAA4BG;IAEtD,MAAM,EAAEC,cAAc,EAAE,GAAGX;IAC3B,MAAMY,YAAYD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAE7C,MAAM,EAAEC,cAAc,EAAEC,cAAc,EAAE,GAAGV;IAE3C,MAAMW,sBAAsBlB,MAAMmB,WAAW,CAC3C,CAACC;QACC,MAAM,EAAEC,OAAO,EAAE,GAAGlB,qBAAqBiB;QACzC,MAAME,KAAKD,UAAUb,OAAOe,OAAO;QAEnC,mDAAmD;QACnDb,aAAaa,OAAO,IAAID;QACxBX,MAAMY,OAAO,IAAIN,eAAeG,GAAG;YAAEI,UAAUb,MAAMY,OAAO;YAAEE,OAAOf,aAAaa,OAAO;QAAC;QAC1Ff,OAAOe,OAAO,GAAGF;IACnB,GACA;QAACJ;KAAe;IAGlB,MAAMS,SAAS1B,MAAMmB,WAAW,CAC9B,CAACC;QACC,2FAA2F;QAC3F,IAAI,QAAON,sBAAAA,gCAAAA,UAAWa,qBAAqB,MAAK,YAAY;YAC1DA,sBAAsB,IAAMT,oBAAoBE;QAClD,OAAO;YACLF,oBAAoBE;QACtB;IACF,GACA;QAACN,sBAAAA,gCAAAA,UAAWa,qBAAqB;QAAET;KAAoB;IAGzD,MAAMU,YAAY5B,MAAMmB,WAAW,CACjC,CAACU;QACC,IAAIzB,aAAayB,QAAQ;YACvBhB,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,WAAWF;YAC/Cf,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,aAAaJ;QACnD;QACA,IAAIrB,aAAawB,QAAQ;YACvBhB,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,YAAYF;YAChDf,2BAAAA,qCAAAA,eAAgBiB,mBAAmB,CAAC,aAAaJ;QACnD;IACF,GACA;QAACA;QAAQb;KAAe;IAG1B,MAAMkB,iBAAiB/B,MAAMmB,WAAW,CACtC,CAACK,WAA4B,CAACK;YAC5B,8FAA8F;YAC9F,+DAA+D;YAC/DnB,aAAaa,OAAO,GAAGP,eAAeQ;YACtChB,OAAOe,OAAO,GAAGpB,qBAAqB0B,OAAOR,OAAO;YACpDV,MAAMY,OAAO,GAAGC;YAEhB,IAAIpB,aAAayB,QAAQ;gBACvB,iDAAiD;gBACjD,IAAIA,MAAMG,MAAM,KAAKH,MAAMI,aAAa,IAAIJ,MAAMK,MAAM,KAAK,GAAG;oBAC9D;gBACF;gBACArB,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,WAAWP;gBAC5Cf,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,aAAaT;YAChD;YAEA,IAAIrB,aAAawB,QAAQ;gBACvBhB,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,YAAYP;gBAC7Cf,2BAAAA,qCAAAA,eAAgBsB,gBAAgB,CAAC,aAAaT;YAChD;QACF,GACA;QAACV;QAAgBU;QAAQE;QAAWf;KAAe;IAGrD,OAAO;QACLkB;IACF;AACF"}
|
|
@@ -99,9 +99,15 @@ export function useTableColumnResizeState(columns, containerWidth, params = {})
|
|
|
99
99
|
});
|
|
100
100
|
});
|
|
101
101
|
return {
|
|
102
|
-
getColumnById: (colId)=>getColumnById(state.columnWidthState, colId),
|
|
103
|
-
|
|
104
|
-
|
|
102
|
+
getColumnById: React.useCallback((colId)=>getColumnById(state.columnWidthState, colId), [
|
|
103
|
+
state.columnWidthState
|
|
104
|
+
]),
|
|
105
|
+
getColumns: React.useCallback(()=>state.columnWidthState, [
|
|
106
|
+
state.columnWidthState
|
|
107
|
+
]),
|
|
108
|
+
getColumnWidth: React.useCallback((colId)=>getColumnWidth(state.columnWidthState, colId), [
|
|
109
|
+
state.columnWidthState
|
|
110
|
+
]),
|
|
105
111
|
setColumnWidth
|
|
106
112
|
};
|
|
107
113
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n TableColumnDefinition,\n TableColumnId,\n ColumnResizeState,\n ColumnWidthState,\n UseTableColumnSizingParams,\n TableColumnSizingOptions,\n} from './types';\nimport {\n columnDefinitionsToState,\n adjustColumnWidthsToFitContainer,\n getColumnById,\n setColumnProperty,\n getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n columns: TableColumnDefinition<T>[];\n containerWidth: number;\n columnWidthState: ColumnWidthState[];\n columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n | {\n type: 'CONTAINER_WIDTH_UPDATED';\n containerWidth: number;\n }\n | {\n type: 'COLUMNS_UPDATED';\n columns: TableColumnDefinition<T>[];\n }\n | {\n type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n columnSizingOptions: TableColumnSizingOptions | undefined;\n }\n | {\n type: 'SET_COLUMN_WIDTH';\n columnId: TableColumnId;\n width: number;\n };\n\nconst createReducer =\n <T>() =>\n (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n switch (action.type) {\n case 'CONTAINER_WIDTH_UPDATED':\n return {\n ...state,\n containerWidth: action.containerWidth,\n columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n };\n\n case 'COLUMNS_UPDATED':\n const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n return {\n ...state,\n columns: action.columns,\n columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n };\n\n case 'COLUMN_SIZING_OPTIONS_UPDATED':\n const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n return {\n ...state,\n columnSizingOptions: action.columnSizingOptions,\n columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n };\n\n case 'SET_COLUMN_WIDTH':\n const { columnId, width } = action;\n const { containerWidth } = state;\n\n const column = getColumnById(state.columnWidthState, columnId);\n let newColumnWidthState = [...state.columnWidthState];\n\n if (!column) {\n return state;\n }\n\n // Adjust the column width and measure the new total width\n newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n // Adjust the widths to the container size\n newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n return { ...state, columnWidthState: newColumnWidthState };\n }\n };\n\nexport function useTableColumnResizeState<T>(\n columns: TableColumnDefinition<T>[],\n containerWidth: number,\n params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n const { onColumnResize, columnSizingOptions } = params;\n\n const reducer = React.useMemo(() => createReducer<T>(), []);\n\n const [state, dispatch] = React.useReducer(reducer, {\n columns,\n containerWidth: 0,\n columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n columnSizingOptions,\n });\n\n useIsomorphicLayoutEffect(() => {\n dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n }, [containerWidth]);\n\n useIsomorphicLayoutEffect(() => {\n dispatch({ type: 'COLUMNS_UPDATED', columns });\n }, [columns]);\n\n useIsomorphicLayoutEffect(() => {\n dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n }, [columnSizingOptions]);\n\n const setColumnWidth = useEventCallback(\n (event: KeyboardEvent | MouseEvent | TouchEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n let { width } = data;\n const { columnId } = data;\n const col = getColumnById(state.columnWidthState, columnId);\n if (!col) {\n return;\n }\n\n width = Math.max(col.minWidth || 0, width);\n\n if (onColumnResize) {\n onColumnResize(event, { columnId, width });\n }\n dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n },\n );\n\n return {\n getColumnById: (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n getColumns: () => state.columnWidthState,\n getColumnWidth: (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n setColumnWidth,\n };\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","colId","getColumns"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["useTableColumnResizeState.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport {\n TableColumnDefinition,\n TableColumnId,\n ColumnResizeState,\n ColumnWidthState,\n UseTableColumnSizingParams,\n TableColumnSizingOptions,\n} from './types';\nimport {\n columnDefinitionsToState,\n adjustColumnWidthsToFitContainer,\n getColumnById,\n setColumnProperty,\n getColumnWidth,\n} from '../utils/columnResizeUtils';\n\ntype ComponentState<T> = {\n columns: TableColumnDefinition<T>[];\n containerWidth: number;\n columnWidthState: ColumnWidthState[];\n columnSizingOptions: TableColumnSizingOptions | undefined;\n};\n\ntype ColumnResizeStateAction<T> =\n | {\n type: 'CONTAINER_WIDTH_UPDATED';\n containerWidth: number;\n }\n | {\n type: 'COLUMNS_UPDATED';\n columns: TableColumnDefinition<T>[];\n }\n | {\n type: 'COLUMN_SIZING_OPTIONS_UPDATED';\n columnSizingOptions: TableColumnSizingOptions | undefined;\n }\n | {\n type: 'SET_COLUMN_WIDTH';\n columnId: TableColumnId;\n width: number;\n };\n\nconst createReducer =\n <T>() =>\n (state: ComponentState<T>, action: ColumnResizeStateAction<T>): ComponentState<T> => {\n switch (action.type) {\n case 'CONTAINER_WIDTH_UPDATED':\n return {\n ...state,\n containerWidth: action.containerWidth,\n columnWidthState: adjustColumnWidthsToFitContainer(state.columnWidthState, action.containerWidth),\n };\n\n case 'COLUMNS_UPDATED':\n const newS = columnDefinitionsToState(action.columns, state.columnWidthState, state.columnSizingOptions);\n return {\n ...state,\n columns: action.columns,\n columnWidthState: adjustColumnWidthsToFitContainer(newS, state.containerWidth),\n };\n\n case 'COLUMN_SIZING_OPTIONS_UPDATED':\n const newState = columnDefinitionsToState(state.columns, state.columnWidthState, action.columnSizingOptions);\n return {\n ...state,\n columnSizingOptions: action.columnSizingOptions,\n columnWidthState: adjustColumnWidthsToFitContainer(newState, state.containerWidth),\n };\n\n case 'SET_COLUMN_WIDTH':\n const { columnId, width } = action;\n const { containerWidth } = state;\n\n const column = getColumnById(state.columnWidthState, columnId);\n let newColumnWidthState = [...state.columnWidthState];\n\n if (!column) {\n return state;\n }\n\n // Adjust the column width and measure the new total width\n newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'width', width);\n // Set this width as idealWidth, because its a deliberate change, not a recalculation because of container\n newColumnWidthState = setColumnProperty(newColumnWidthState, columnId, 'idealWidth', width);\n // Adjust the widths to the container size\n newColumnWidthState = adjustColumnWidthsToFitContainer(newColumnWidthState, containerWidth);\n\n return { ...state, columnWidthState: newColumnWidthState };\n }\n };\n\nexport function useTableColumnResizeState<T>(\n columns: TableColumnDefinition<T>[],\n containerWidth: number,\n params: UseTableColumnSizingParams = {},\n): ColumnResizeState {\n const { onColumnResize, columnSizingOptions } = params;\n\n const reducer = React.useMemo(() => createReducer<T>(), []);\n\n const [state, dispatch] = React.useReducer(reducer, {\n columns,\n containerWidth: 0,\n columnWidthState: columnDefinitionsToState(columns, undefined, columnSizingOptions),\n columnSizingOptions,\n });\n\n useIsomorphicLayoutEffect(() => {\n dispatch({ type: 'CONTAINER_WIDTH_UPDATED', containerWidth });\n }, [containerWidth]);\n\n useIsomorphicLayoutEffect(() => {\n dispatch({ type: 'COLUMNS_UPDATED', columns });\n }, [columns]);\n\n useIsomorphicLayoutEffect(() => {\n dispatch({ type: 'COLUMN_SIZING_OPTIONS_UPDATED', columnSizingOptions });\n }, [columnSizingOptions]);\n\n const setColumnWidth = useEventCallback(\n (event: KeyboardEvent | MouseEvent | TouchEvent | undefined, data: { columnId: TableColumnId; width: number }) => {\n let { width } = data;\n const { columnId } = data;\n const col = getColumnById(state.columnWidthState, columnId);\n if (!col) {\n return;\n }\n\n width = Math.max(col.minWidth || 0, width);\n\n if (onColumnResize) {\n onColumnResize(event, { columnId, width });\n }\n dispatch({ type: 'SET_COLUMN_WIDTH', columnId, width });\n },\n );\n\n return {\n getColumnById: React.useCallback(\n (colId: TableColumnId) => getColumnById(state.columnWidthState, colId),\n [state.columnWidthState],\n ),\n getColumns: React.useCallback(() => state.columnWidthState, [state.columnWidthState]),\n getColumnWidth: React.useCallback(\n (colId: TableColumnId) => getColumnWidth(state.columnWidthState, colId),\n [state.columnWidthState],\n ),\n setColumnWidth,\n };\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","columnDefinitionsToState","adjustColumnWidthsToFitContainer","getColumnById","setColumnProperty","getColumnWidth","createReducer","state","action","type","containerWidth","columnWidthState","newS","columns","columnSizingOptions","newState","columnId","width","column","newColumnWidthState","useTableColumnResizeState","params","onColumnResize","reducer","useMemo","dispatch","useReducer","undefined","setColumnWidth","event","data","col","Math","max","minWidth","useCallback","colId","getColumns"],"mappings":"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"}
|