@mui/x-virtualizer 0.2.10 → 0.2.11
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 +112 -0
- package/constants.d.ts +22 -0
- package/constants.js +26 -0
- package/esm/constants.d.ts +22 -0
- package/esm/constants.js +20 -0
- package/esm/features/colspan.d.ts +4 -4
- package/esm/features/dimensions.d.ts +14 -8
- package/esm/features/dimensions.js +26 -7
- package/esm/features/index.d.ts +1 -1
- package/esm/features/index.js +1 -1
- package/esm/features/keyboard.d.ts +3 -3
- package/esm/features/keyboard.js +1 -1
- package/esm/features/rowspan.d.ts +4 -4
- package/esm/features/virtualization/index.d.ts +2 -0
- package/esm/features/virtualization/index.js +2 -0
- package/esm/features/virtualization/layout.d.ts +129 -0
- package/esm/features/virtualization/layout.js +152 -0
- package/esm/features/{virtualization.d.ts → virtualization/virtualization.d.ts} +35 -58
- package/esm/features/{virtualization.js → virtualization/virtualization.js} +97 -134
- package/esm/index.d.ts +2 -1
- package/esm/index.js +3 -2
- package/esm/models/core.d.ts +7 -0
- package/esm/models/core.js +7 -0
- package/esm/models/dimensions.d.ts +8 -0
- package/esm/useVirtualizer.d.ts +25 -69
- package/esm/useVirtualizer.js +21 -4
- package/features/colspan.d.ts +4 -4
- package/features/dimensions.d.ts +14 -8
- package/features/dimensions.js +26 -7
- package/features/index.d.ts +1 -1
- package/features/keyboard.d.ts +3 -3
- package/features/rowspan.d.ts +4 -4
- package/features/virtualization/index.d.ts +2 -0
- package/features/virtualization/index.js +27 -0
- package/features/virtualization/layout.d.ts +129 -0
- package/features/virtualization/layout.js +163 -0
- package/features/{virtualization.d.ts → virtualization/virtualization.d.ts} +35 -58
- package/features/{virtualization.js → virtualization/virtualization.js} +97 -134
- package/index.d.ts +2 -1
- package/index.js +12 -1
- package/models/core.d.ts +7 -0
- package/models/core.js +8 -1
- package/models/dimensions.d.ts +8 -0
- package/package.json +2 -2
- package/useVirtualizer.d.ts +25 -69
- package/useVirtualizer.js +20 -3
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,118 @@
|
|
|
5
5
|
All notable changes to this project will be documented in this file.
|
|
6
6
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
7
7
|
|
|
8
|
+
## 8.21.0
|
|
9
|
+
|
|
10
|
+
_Dec 3, 2025_
|
|
11
|
+
|
|
12
|
+
We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
|
|
13
|
+
|
|
14
|
+
- ✨ Add [tick spacing property](https://mui.com/x/react-charts/axis/#tick-spacing) to charts axis to control the distance between ticks.
|
|
15
|
+
|
|
16
|
+
The following team members contributed to this release:
|
|
17
|
+
@alexfauquette, @bernardobelchior, @ElliottMiller, @Janpot, @JCQuintas, @romgrk, @sai6855, @siriwatknp
|
|
18
|
+
|
|
19
|
+
### Data Grid
|
|
20
|
+
|
|
21
|
+
#### `@mui/x-data-grid@8.21.0`
|
|
22
|
+
|
|
23
|
+
- [DataGrid] Fix autosizing header width calculation (#20323) @siriwatknp
|
|
24
|
+
- [DataGrid] Virtualizer refactor (#19465) @romgrk
|
|
25
|
+
|
|
26
|
+
#### `@mui/x-data-grid-pro@8.21.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
27
|
+
|
|
28
|
+
Same changes as in `@mui/x-data-grid@8.21.0`.
|
|
29
|
+
|
|
30
|
+
#### `@mui/x-data-grid-premium@8.21.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
31
|
+
|
|
32
|
+
Same changes as in `@mui/x-data-grid-pro@8.21.0`, plus:
|
|
33
|
+
|
|
34
|
+
- [DataGridPremium] Prevent pasting to non-editable cells (#20333) @ElliottMiller
|
|
35
|
+
|
|
36
|
+
### Date and Time Pickers
|
|
37
|
+
|
|
38
|
+
#### `@mui/x-date-pickers@8.21.0`
|
|
39
|
+
|
|
40
|
+
Internal changes.
|
|
41
|
+
|
|
42
|
+
#### `@mui/x-date-pickers-pro@8.21.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
43
|
+
|
|
44
|
+
Same changes as in `@mui/x-date-pickers@8.21.0`.
|
|
45
|
+
|
|
46
|
+
### Charts
|
|
47
|
+
|
|
48
|
+
#### `@mui/x-charts@8.21.0`
|
|
49
|
+
|
|
50
|
+
- [charts] Fix string measuring types (#20454) @bernardobelchior
|
|
51
|
+
- [charts] Fix typo in performance note for CustomLineMarks demo (#20529) @sai6855
|
|
52
|
+
- [charts] Introduce the notion of series with positions (#20461) @alexfauquette
|
|
53
|
+
- [charts] Migrate from sinon to Vitest mocking utilities for x-charts\* packages (#20444) @Copilot
|
|
54
|
+
- [charts] Move series-level values to series computed data in bar plot (#20467) @bernardobelchior
|
|
55
|
+
- [charts] Refactor bar chart components in preparation for range bar chart (#20521) @bernardobelchior
|
|
56
|
+
- [charts] Remove unnecessary `any` types (#20527) @sai6855
|
|
57
|
+
- [charts] Remove unused `drawingArea` from `findClosestPoints` (#20471) @bernardobelchior
|
|
58
|
+
- [charts] Revert `useIsHydrated` to default=false (#20511) @JCQuintas
|
|
59
|
+
- [charts] Support tooltip anchor position for radar (#20422) @alexfauquette
|
|
60
|
+
- [charts] Add tick spacing property (#20282) @bernardobelchior
|
|
61
|
+
- [charts] Fix Vitest lint error (#20550) @bernardobelchior
|
|
62
|
+
- [charts] Fix infinite loop when highlighting pie slices or scatter points (#20549) @bernardobelchior
|
|
63
|
+
|
|
64
|
+
#### `@mui/x-charts-pro@8.21.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
65
|
+
|
|
66
|
+
Same changes as in `@mui/x-charts@8.21.0`, plus:
|
|
67
|
+
|
|
68
|
+
- [charts-pro] Add support for `anchor="node"` on Sankey tooltip (#20462) @alexfauquette
|
|
69
|
+
|
|
70
|
+
#### `@mui/x-charts-premium@8.21.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
71
|
+
|
|
72
|
+
Same changes as in `@mui/x-charts-pro@8.21.0`.
|
|
73
|
+
|
|
74
|
+
### Tree View
|
|
75
|
+
|
|
76
|
+
#### `@mui/x-tree-view@8.21.0`
|
|
77
|
+
|
|
78
|
+
Internal changes.
|
|
79
|
+
|
|
80
|
+
#### `@mui/x-tree-view-pro@8.21.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
81
|
+
|
|
82
|
+
Same changes as in `@mui/x-tree-view@8.21.0`.
|
|
83
|
+
|
|
84
|
+
### Codemod
|
|
85
|
+
|
|
86
|
+
#### `@mui/x-codemod@8.21.0`
|
|
87
|
+
|
|
88
|
+
Internal changes.
|
|
89
|
+
|
|
90
|
+
### Docs
|
|
91
|
+
|
|
92
|
+
- [docs] Migrate to `next/font` for fonts loading (#20407) @Copilot
|
|
93
|
+
|
|
94
|
+
### Core
|
|
95
|
+
|
|
96
|
+
- [code-infra] Enable vitest eslint plugin (#20530) @Janpot
|
|
97
|
+
- [code-infra] Fix missing font loading for local fonts (#20480) @Janpot
|
|
98
|
+
- [internal] Performance: use raw `useSyncExternalStore` (#20447) @romgrk
|
|
99
|
+
- [code-infra] Enable `vitest/expect-expect` and `vitest/no-standalone-expect` rules for x-charts packages (#20535) @Copilot
|
|
100
|
+
|
|
101
|
+
### Miscellaneous
|
|
102
|
+
|
|
103
|
+
- Bump @types/d3-sankey to ^0.12.5 (#20489) @renovate[bot]
|
|
104
|
+
- Bump @types/react to 19.2.7 (#20490) @renovate[bot]
|
|
105
|
+
- Bump @types/yargs to ^17.0.35 (#20491) @renovate[bot]
|
|
106
|
+
- Bump Vite & Vitest to ^4.0.14 (#20500) @renovate[bot]
|
|
107
|
+
- Bump csstype to ^3.2.3 (#20493) @renovate[bot]
|
|
108
|
+
- Bump es-toolkit to ^1.42.0 (#20494) @renovate[bot]
|
|
109
|
+
- Bump eslint to ^8.48.0 (#20495) @renovate[bot]
|
|
110
|
+
- Bump lerna to ^9.0.3 (#20496) @renovate[bot]
|
|
111
|
+
- Bump lucide-react to ^0.555.0 (#20502) @renovate[bot]
|
|
112
|
+
- Bump playwright monorepo (#20503) @renovate[bot]
|
|
113
|
+
- Bump pnpm to 10.24.0 (#20504) @renovate[bot]
|
|
114
|
+
- Bump react monorepo (#20340) @renovate[bot]
|
|
115
|
+
- Bump react-hook-form to ^7.66.1 (#20497) @renovate[bot]
|
|
116
|
+
- Bump rimraf to ^6.1.2 (#20498) @renovate[bot]
|
|
117
|
+
- Bump webpack-bundle-analyzer to ^5.0.1 (#20508) @renovate[bot]
|
|
118
|
+
- Bump next to ^15.5.6 [SECURITY] (#20555) @renovate[bot]
|
|
119
|
+
|
|
8
120
|
## 8.20.0
|
|
9
121
|
|
|
10
122
|
_Nov 26, 2025_
|
package/constants.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export declare const DEFAULT_COLUMNS: {
|
|
2
|
+
field: string;
|
|
3
|
+
}[];
|
|
4
|
+
export declare const DEFAULT_PARAMS: {
|
|
5
|
+
resizeThrottleMs: number;
|
|
6
|
+
columns: {
|
|
7
|
+
field: string;
|
|
8
|
+
}[];
|
|
9
|
+
dimensions: {
|
|
10
|
+
autoHeight: boolean;
|
|
11
|
+
columnsTotalWidth: number;
|
|
12
|
+
leftPinnedWidth: number;
|
|
13
|
+
rightPinnedWidth: number;
|
|
14
|
+
topPinnedHeight: number;
|
|
15
|
+
bottomPinnedHeight: number;
|
|
16
|
+
};
|
|
17
|
+
virtualization: {
|
|
18
|
+
isRtl: boolean;
|
|
19
|
+
rowBufferPx: number;
|
|
20
|
+
columnBufferPx: number;
|
|
21
|
+
};
|
|
22
|
+
};
|
package/constants.js
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.DEFAULT_PARAMS = exports.DEFAULT_COLUMNS = void 0;
|
|
7
|
+
const DEFAULT_COLUMNS = exports.DEFAULT_COLUMNS = [{
|
|
8
|
+
field: 'DEFAULT_COLUMN'
|
|
9
|
+
}];
|
|
10
|
+
const DEFAULT_PARAMS = exports.DEFAULT_PARAMS = {
|
|
11
|
+
resizeThrottleMs: 100,
|
|
12
|
+
columns: DEFAULT_COLUMNS,
|
|
13
|
+
dimensions: {
|
|
14
|
+
autoHeight: false,
|
|
15
|
+
columnsTotalWidth: 0,
|
|
16
|
+
leftPinnedWidth: 0,
|
|
17
|
+
rightPinnedWidth: 0,
|
|
18
|
+
topPinnedHeight: 0,
|
|
19
|
+
bottomPinnedHeight: 0
|
|
20
|
+
},
|
|
21
|
+
virtualization: {
|
|
22
|
+
isRtl: false,
|
|
23
|
+
rowBufferPx: 150,
|
|
24
|
+
columnBufferPx: 150
|
|
25
|
+
}
|
|
26
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export declare const DEFAULT_COLUMNS: {
|
|
2
|
+
field: string;
|
|
3
|
+
}[];
|
|
4
|
+
export declare const DEFAULT_PARAMS: {
|
|
5
|
+
resizeThrottleMs: number;
|
|
6
|
+
columns: {
|
|
7
|
+
field: string;
|
|
8
|
+
}[];
|
|
9
|
+
dimensions: {
|
|
10
|
+
autoHeight: boolean;
|
|
11
|
+
columnsTotalWidth: number;
|
|
12
|
+
leftPinnedWidth: number;
|
|
13
|
+
rightPinnedWidth: number;
|
|
14
|
+
topPinnedHeight: number;
|
|
15
|
+
bottomPinnedHeight: number;
|
|
16
|
+
};
|
|
17
|
+
virtualization: {
|
|
18
|
+
isRtl: boolean;
|
|
19
|
+
rowBufferPx: number;
|
|
20
|
+
columnBufferPx: number;
|
|
21
|
+
};
|
|
22
|
+
};
|
package/esm/constants.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export const DEFAULT_COLUMNS = [{
|
|
2
|
+
field: 'DEFAULT_COLUMN'
|
|
3
|
+
}];
|
|
4
|
+
export const DEFAULT_PARAMS = {
|
|
5
|
+
resizeThrottleMs: 100,
|
|
6
|
+
columns: DEFAULT_COLUMNS,
|
|
7
|
+
dimensions: {
|
|
8
|
+
autoHeight: false,
|
|
9
|
+
columnsTotalWidth: 0,
|
|
10
|
+
leftPinnedWidth: 0,
|
|
11
|
+
rightPinnedWidth: 0,
|
|
12
|
+
topPinnedHeight: 0,
|
|
13
|
+
bottomPinnedHeight: 0
|
|
14
|
+
},
|
|
15
|
+
virtualization: {
|
|
16
|
+
isRtl: false,
|
|
17
|
+
rowBufferPx: 150,
|
|
18
|
+
columnBufferPx: 150
|
|
19
|
+
}
|
|
20
|
+
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { Store } from '@mui/x-internals/store';
|
|
2
2
|
import type { integer } from '@mui/x-internals/types';
|
|
3
|
-
import type { BaseState,
|
|
3
|
+
import type { BaseState, ParamsWithDefaults } from "../useVirtualizer.js";
|
|
4
4
|
import type { ColumnWithWidth, RowId } from "../models/index.js";
|
|
5
5
|
import type { CellColSpanInfo } from "../models/colspan.js";
|
|
6
|
-
import { Virtualization } from "./virtualization.js";
|
|
6
|
+
import { Virtualization } from "./virtualization/index.js";
|
|
7
7
|
type ColumnIndex = number;
|
|
8
8
|
type ColspanMap = Map<RowId, Record<ColumnIndex, CellColSpanInfo>>;
|
|
9
9
|
export type ColspanParams = {
|
|
@@ -21,10 +21,10 @@ export declare namespace Colspan {
|
|
|
21
21
|
};
|
|
22
22
|
type API = ReturnType<typeof useColspan>;
|
|
23
23
|
}
|
|
24
|
-
declare function initializeState(_params:
|
|
24
|
+
declare function initializeState(_params: ParamsWithDefaults): {
|
|
25
25
|
colspanMap: Map<any, any>;
|
|
26
26
|
};
|
|
27
|
-
declare function useColspan(store: Store<BaseState & Colspan.State>, params:
|
|
27
|
+
declare function useColspan(store: Store<BaseState & Colspan.State>, params: ParamsWithDefaults, api: Virtualization.API): {
|
|
28
28
|
resetColSpan: () => void;
|
|
29
29
|
getCellColSpanInfo: (rowId: RowId, columnIndex: integer) => CellColSpanInfo | undefined;
|
|
30
30
|
calculateColSpan: (rowId: RowId, minFirstColumn: integer, maxLastColumn: integer, columns: ColumnWithWidth[]) => void;
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import { Store } from '@mui/x-internals/store';
|
|
2
2
|
import { ColumnWithWidth, DimensionsState, RowId, RowsMetaState, Size } from "../models/index.js";
|
|
3
|
-
import type { BaseState,
|
|
3
|
+
import type { BaseState, ParamsWithDefaults } from "../useVirtualizer.js";
|
|
4
4
|
export type DimensionsParams = {
|
|
5
5
|
rowHeight: number;
|
|
6
|
-
columnsTotalWidth
|
|
7
|
-
leftPinnedWidth
|
|
8
|
-
rightPinnedWidth
|
|
9
|
-
topPinnedHeight
|
|
10
|
-
bottomPinnedHeight
|
|
6
|
+
columnsTotalWidth?: number;
|
|
7
|
+
leftPinnedWidth?: number;
|
|
8
|
+
rightPinnedWidth?: number;
|
|
9
|
+
topPinnedHeight?: number;
|
|
10
|
+
bottomPinnedHeight?: number;
|
|
11
|
+
autoHeight?: boolean;
|
|
12
|
+
minimalContentHeight?: number | string;
|
|
11
13
|
scrollbarSize?: number;
|
|
12
14
|
};
|
|
13
15
|
export declare const Dimensions: {
|
|
@@ -17,8 +19,12 @@ export declare const Dimensions: {
|
|
|
17
19
|
rootSize: (state: BaseState) => Size;
|
|
18
20
|
dimensions: (state: BaseState) => DimensionsState;
|
|
19
21
|
rowHeight: (state: BaseState) => number;
|
|
22
|
+
columnsTotalWidth: (state: BaseState) => number;
|
|
20
23
|
contentHeight: (state: BaseState) => number;
|
|
24
|
+
autoHeight: (state: BaseState) => boolean;
|
|
25
|
+
minimalContentHeight: (state: BaseState) => string | number | undefined;
|
|
21
26
|
rowsMeta: (state: BaseState) => RowsMetaState;
|
|
27
|
+
rowPositions: (state: BaseState) => number[];
|
|
22
28
|
columnPositions: (_: any, columns: ColumnWithWidth[]) => number[];
|
|
23
29
|
needsHorizontalScrollbar: (state: BaseState) => boolean;
|
|
24
30
|
};
|
|
@@ -32,8 +38,8 @@ export declare namespace Dimensions {
|
|
|
32
38
|
};
|
|
33
39
|
type API = ReturnType<typeof useDimensions>;
|
|
34
40
|
}
|
|
35
|
-
declare function initializeState(params:
|
|
36
|
-
declare function useDimensions(store: Store<BaseState>, params:
|
|
41
|
+
declare function initializeState(params: ParamsWithDefaults): Dimensions.State;
|
|
42
|
+
declare function useDimensions(store: Store<BaseState>, params: ParamsWithDefaults, _api: {}): {
|
|
37
43
|
updateDimensions: (firstUpdate?: boolean) => void;
|
|
38
44
|
debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
|
|
39
45
|
rowsMeta: {
|
|
@@ -31,14 +31,20 @@ const EMPTY_DIMENSIONS = {
|
|
|
31
31
|
leftPinnedWidth: 0,
|
|
32
32
|
rightPinnedWidth: 0,
|
|
33
33
|
topContainerHeight: 0,
|
|
34
|
-
bottomContainerHeight: 0
|
|
34
|
+
bottomContainerHeight: 0,
|
|
35
|
+
autoHeight: false,
|
|
36
|
+
minimalContentHeight: undefined
|
|
35
37
|
};
|
|
36
38
|
const selectors = {
|
|
37
39
|
rootSize: state => state.rootSize,
|
|
38
40
|
dimensions: state => state.dimensions,
|
|
39
41
|
rowHeight: state => state.dimensions.rowHeight,
|
|
42
|
+
columnsTotalWidth: state => state.dimensions.columnsTotalWidth,
|
|
40
43
|
contentHeight: state => state.dimensions.contentSize.height,
|
|
44
|
+
autoHeight: state => state.dimensions.autoHeight,
|
|
45
|
+
minimalContentHeight: state => state.dimensions.minimalContentHeight,
|
|
41
46
|
rowsMeta: state => state.rowsMeta,
|
|
47
|
+
rowPositions: state => state.rowsMeta.positions,
|
|
42
48
|
columnPositions: createSelectorMemoized((_, columns) => {
|
|
43
49
|
const positions = [];
|
|
44
50
|
let currentPosition = 0;
|
|
@@ -56,7 +62,10 @@ export const Dimensions = {
|
|
|
56
62
|
selectors
|
|
57
63
|
};
|
|
58
64
|
function initializeState(params) {
|
|
59
|
-
const dimensions = _extends({}, EMPTY_DIMENSIONS, params.dimensions
|
|
65
|
+
const dimensions = _extends({}, EMPTY_DIMENSIONS, params.dimensions, {
|
|
66
|
+
autoHeight: params.dimensions.autoHeight,
|
|
67
|
+
minimalContentHeight: params.dimensions.minimalContentHeight
|
|
68
|
+
});
|
|
60
69
|
const {
|
|
61
70
|
rowCount
|
|
62
71
|
} = params;
|
|
@@ -82,7 +91,7 @@ function initializeState(params) {
|
|
|
82
91
|
function useDimensions(store, params, _api) {
|
|
83
92
|
const isFirstSizing = React.useRef(true);
|
|
84
93
|
const {
|
|
85
|
-
|
|
94
|
+
layout,
|
|
86
95
|
dimensions: {
|
|
87
96
|
rowHeight,
|
|
88
97
|
columnsTotalWidth,
|
|
@@ -100,7 +109,7 @@ function useDimensions(store, params, _api) {
|
|
|
100
109
|
if (isFirstSizing.current) {
|
|
101
110
|
return;
|
|
102
111
|
}
|
|
103
|
-
const containerNode = refs.container.current;
|
|
112
|
+
const containerNode = layout.refs.container.current;
|
|
104
113
|
const rootSize = selectors.rootSize(store.state);
|
|
105
114
|
const rowsMeta = selectors.rowsMeta(store.state);
|
|
106
115
|
|
|
@@ -118,7 +127,7 @@ function useDimensions(store, params, _api) {
|
|
|
118
127
|
let viewportInnerSize;
|
|
119
128
|
let hasScrollX = false;
|
|
120
129
|
let hasScrollY = false;
|
|
121
|
-
if (params.autoHeight) {
|
|
130
|
+
if (params.dimensions.autoHeight) {
|
|
122
131
|
hasScrollY = false;
|
|
123
132
|
hasScrollX = Math.round(columnsTotalWidth) > Math.round(rootSize.width);
|
|
124
133
|
viewportOuterSize = {
|
|
@@ -185,7 +194,9 @@ function useDimensions(store, params, _api) {
|
|
|
185
194
|
leftPinnedWidth,
|
|
186
195
|
rightPinnedWidth,
|
|
187
196
|
topContainerHeight,
|
|
188
|
-
bottomContainerHeight
|
|
197
|
+
bottomContainerHeight,
|
|
198
|
+
autoHeight: params.dimensions.autoHeight,
|
|
199
|
+
minimalContentHeight: params.dimensions.minimalContentHeight
|
|
189
200
|
};
|
|
190
201
|
const prevDimensions = store.state.dimensions;
|
|
191
202
|
if (isDeepEqual(prevDimensions, newDimensions)) {
|
|
@@ -195,7 +206,7 @@ function useDimensions(store, params, _api) {
|
|
|
195
206
|
dimensions: newDimensions
|
|
196
207
|
});
|
|
197
208
|
onResize?.(newDimensions.root);
|
|
198
|
-
}, [store, refs.container, params.dimensions.scrollbarSize, params.autoHeight, params.disableHorizontalScroll, params.disableVerticalScroll, onResize, rowHeight, columnsTotalWidth, leftPinnedWidth, rightPinnedWidth, topPinnedHeight, bottomPinnedHeight]);
|
|
209
|
+
}, [store, layout.refs.container, params.dimensions.scrollbarSize, params.dimensions.autoHeight, params.dimensions.minimalContentHeight, params.disableHorizontalScroll, params.disableVerticalScroll, onResize, rowHeight, columnsTotalWidth, leftPinnedWidth, rightPinnedWidth, topPinnedHeight, bottomPinnedHeight]);
|
|
199
210
|
const {
|
|
200
211
|
resizeThrottleMs
|
|
201
212
|
} = params;
|
|
@@ -203,6 +214,14 @@ function useDimensions(store, params, _api) {
|
|
|
203
214
|
const debouncedUpdateDimensions = React.useMemo(() => resizeThrottleMs > 0 ? throttle(updateDimensionCallback, resizeThrottleMs) : undefined, [resizeThrottleMs, updateDimensionCallback]);
|
|
204
215
|
React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
|
|
205
216
|
useLayoutEffect(updateDimensions, [updateDimensions]);
|
|
217
|
+
useLayoutEffect(() => {
|
|
218
|
+
store.update({
|
|
219
|
+
dimensions: _extends({}, store.state.dimensions, {
|
|
220
|
+
autoHeight: params.dimensions.autoHeight,
|
|
221
|
+
minimalContentHeight: params.dimensions.minimalContentHeight
|
|
222
|
+
})
|
|
223
|
+
});
|
|
224
|
+
}, [store, params.dimensions.autoHeight, params.dimensions.minimalContentHeight]);
|
|
206
225
|
const rowsMeta = useRowsMeta(store, params, updateDimensions);
|
|
207
226
|
return {
|
|
208
227
|
updateDimensions,
|
package/esm/features/index.d.ts
CHANGED
package/esm/features/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Store } from '@mui/x-internals/store';
|
|
2
|
-
import type { BaseState,
|
|
2
|
+
import type { BaseState, ParamsWithDefaults } from "../useVirtualizer.js";
|
|
3
3
|
export declare const Keyboard: {
|
|
4
4
|
initialize: typeof initializeState;
|
|
5
5
|
use: typeof useKeyboard;
|
|
@@ -9,8 +9,8 @@ export declare namespace Keyboard {
|
|
|
9
9
|
type State = {};
|
|
10
10
|
type API = ReturnType<typeof useKeyboard>;
|
|
11
11
|
}
|
|
12
|
-
declare function initializeState(_params:
|
|
13
|
-
declare function useKeyboard(store: Store<BaseState & Keyboard.State>, params:
|
|
12
|
+
declare function initializeState(_params: ParamsWithDefaults): Keyboard.State;
|
|
13
|
+
declare function useKeyboard(store: Store<BaseState & Keyboard.State>, params: ParamsWithDefaults, _api: {}): {
|
|
14
14
|
getViewportPageSize: () => number;
|
|
15
15
|
};
|
|
16
16
|
export {};
|
package/esm/features/keyboard.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Store } from '@mui/x-internals/store';
|
|
2
|
-
import type { BaseState,
|
|
2
|
+
import type { BaseState, ParamsWithDefaults } from "../useVirtualizer.js";
|
|
3
3
|
import type { RowSpanningState } from "../models/rowspan.js";
|
|
4
|
-
import { Virtualization } from "./virtualization.js";
|
|
4
|
+
import { Virtualization } from "./virtualization/index.js";
|
|
5
5
|
export declare const Rowspan: {
|
|
6
6
|
initialize: typeof initializeState;
|
|
7
7
|
use: typeof useRowspan;
|
|
@@ -18,8 +18,8 @@ export declare namespace Rowspan {
|
|
|
18
18
|
};
|
|
19
19
|
type API = ReturnType<typeof useRowspan>;
|
|
20
20
|
}
|
|
21
|
-
declare function initializeState(params:
|
|
22
|
-
declare function useRowspan(store: Store<BaseState & Rowspan.State>, _params:
|
|
21
|
+
declare function initializeState(params: ParamsWithDefaults): Rowspan.State;
|
|
22
|
+
declare function useRowspan(store: Store<BaseState & Rowspan.State>, _params: ParamsWithDefaults, _api: Virtualization.API): {
|
|
23
23
|
getHiddenCellsOrigin: () => Record<number, Record<number, number>>;
|
|
24
24
|
};
|
|
25
25
|
export {};
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Store } from '@mui/x-internals/store';
|
|
3
|
+
import { Dimensions } from "../dimensions.js";
|
|
4
|
+
import { Virtualization, type VirtualizationLayoutParams } from "./virtualization.js";
|
|
5
|
+
import type { BaseState, ParamsWithDefaults } from "../../useVirtualizer.js";
|
|
6
|
+
type RequiredAPI = Dimensions.API;
|
|
7
|
+
type BaseElements = {
|
|
8
|
+
scroller: React.RefObject<HTMLElement | null>;
|
|
9
|
+
container: React.RefObject<HTMLElement | null>;
|
|
10
|
+
};
|
|
11
|
+
type AnyElements = BaseElements & Record<string, React.RefObject<HTMLElement | null>>;
|
|
12
|
+
export declare abstract class Layout<E extends AnyElements = AnyElements> {
|
|
13
|
+
static elements: readonly (keyof AnyElements)[];
|
|
14
|
+
refs: E;
|
|
15
|
+
constructor(refs: E);
|
|
16
|
+
abstract use(store: Store<BaseState>, params: ParamsWithDefaults, api: RequiredAPI, layoutParams: VirtualizationLayoutParams): any;
|
|
17
|
+
refSetter(name: keyof E): (node: HTMLDivElement | null) => void;
|
|
18
|
+
}
|
|
19
|
+
type DataGridElements = BaseElements & {
|
|
20
|
+
scrollbarVertical: React.RefObject<HTMLElement | null>;
|
|
21
|
+
scrollbarHorizontal: React.RefObject<HTMLElement | null>;
|
|
22
|
+
};
|
|
23
|
+
export declare class LayoutDataGrid extends Layout<DataGridElements> {
|
|
24
|
+
static elements: readonly ["scroller", "container", "content", "positioner", "scrollbarVertical", "scrollbarHorizontal"];
|
|
25
|
+
use(store: Store<BaseState>, _params: ParamsWithDefaults, _api: RequiredAPI, layoutParams: VirtualizationLayoutParams): void;
|
|
26
|
+
static selectors: {
|
|
27
|
+
containerProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
|
|
28
|
+
ref: any;
|
|
29
|
+
};
|
|
30
|
+
scrollerProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
|
|
31
|
+
ref: any;
|
|
32
|
+
style: {
|
|
33
|
+
overflowX: string | undefined;
|
|
34
|
+
overflowY: string | undefined;
|
|
35
|
+
};
|
|
36
|
+
role: string;
|
|
37
|
+
tabIndex: number | undefined;
|
|
38
|
+
};
|
|
39
|
+
contentProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
|
|
40
|
+
style: React.CSSProperties;
|
|
41
|
+
role: string;
|
|
42
|
+
};
|
|
43
|
+
positionerProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
|
|
44
|
+
style: {
|
|
45
|
+
transform: string;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
scrollbarHorizontalProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
|
|
49
|
+
ref: any;
|
|
50
|
+
scrollPosition: {
|
|
51
|
+
current: import("../../models/index.js").ScrollPosition;
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
scrollbarVerticalProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
|
|
55
|
+
ref: any;
|
|
56
|
+
scrollPosition: {
|
|
57
|
+
current: import("../../models/index.js").ScrollPosition;
|
|
58
|
+
};
|
|
59
|
+
};
|
|
60
|
+
scrollAreaProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
|
|
61
|
+
scrollPosition: {
|
|
62
|
+
current: import("../../models/index.js").ScrollPosition;
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
export declare class LayoutDataGridLegacy extends LayoutDataGrid {
|
|
68
|
+
use(store: Store<BaseState>, _params: ParamsWithDefaults, _api: RequiredAPI, layoutParams: VirtualizationLayoutParams): {
|
|
69
|
+
getContainerProps: () => {
|
|
70
|
+
ref: any;
|
|
71
|
+
};
|
|
72
|
+
getScrollerProps: () => {
|
|
73
|
+
ref: any;
|
|
74
|
+
style: {
|
|
75
|
+
overflowX: string | undefined;
|
|
76
|
+
overflowY: string | undefined;
|
|
77
|
+
};
|
|
78
|
+
role: string;
|
|
79
|
+
tabIndex: number | undefined;
|
|
80
|
+
};
|
|
81
|
+
getContentProps: () => {
|
|
82
|
+
style: React.CSSProperties;
|
|
83
|
+
role: string;
|
|
84
|
+
};
|
|
85
|
+
getPositionerProps: () => {
|
|
86
|
+
style: {
|
|
87
|
+
transform: string;
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
getScrollbarVerticalProps: () => {
|
|
91
|
+
ref: any;
|
|
92
|
+
scrollPosition: {
|
|
93
|
+
current: import("../../models/index.js").ScrollPosition;
|
|
94
|
+
};
|
|
95
|
+
};
|
|
96
|
+
getScrollbarHorizontalProps: () => {
|
|
97
|
+
ref: any;
|
|
98
|
+
scrollPosition: {
|
|
99
|
+
current: import("../../models/index.js").ScrollPosition;
|
|
100
|
+
};
|
|
101
|
+
};
|
|
102
|
+
getScrollAreaProps: () => {
|
|
103
|
+
scrollPosition: {
|
|
104
|
+
current: import("../../models/index.js").ScrollPosition;
|
|
105
|
+
};
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
type ListElements = BaseElements;
|
|
110
|
+
export declare class LayoutList extends Layout<ListElements> {
|
|
111
|
+
static elements: readonly ["scroller", "container", "content", "positioner"];
|
|
112
|
+
use(store: Store<BaseState>, _params: ParamsWithDefaults, _api: RequiredAPI, layoutParams: VirtualizationLayoutParams): void;
|
|
113
|
+
static selectors: {
|
|
114
|
+
containerProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
|
|
115
|
+
ref: any;
|
|
116
|
+
style: React.CSSProperties;
|
|
117
|
+
role: string;
|
|
118
|
+
tabIndex: number | undefined;
|
|
119
|
+
};
|
|
120
|
+
contentProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
|
|
121
|
+
style: React.CSSProperties;
|
|
122
|
+
role: string;
|
|
123
|
+
};
|
|
124
|
+
positionerProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
|
|
125
|
+
style: React.CSSProperties;
|
|
126
|
+
};
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
export {};
|