@mui/x-virtualizer 0.2.10 → 0.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +248 -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,254 @@
|
|
|
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.22.0
|
|
9
|
+
|
|
10
|
+
_Dec 11, 2025_
|
|
11
|
+
|
|
12
|
+
We'd like to extend a big thank you to the 11 contributors who made this release possible. Here are some highlights ✨:
|
|
13
|
+
|
|
14
|
+
- Each Tree View component now exposes its own hook to initialize the `apiRef` object with accurate typing:
|
|
15
|
+
|
|
16
|
+
```diff
|
|
17
|
+
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
|
|
18
|
+
+import { useSimpleTreeViewApiRef } from '@mui/x-tree-view/hooks';
|
|
19
|
+
-const apiRef = useTreeViewApiRef();
|
|
20
|
+
+const apiRef = useSimpleTreeViewApiRef();
|
|
21
|
+
|
|
22
|
+
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
|
|
23
|
+
+import { useRichTreeViewApiRef } from '@mui/x-tree-view/hooks';
|
|
24
|
+
-const apiRef = useTreeViewApiRef();
|
|
25
|
+
+const apiRef = useRichTreeViewApiRef();
|
|
26
|
+
|
|
27
|
+
-import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
|
|
28
|
+
+import { useRichTreeViewProApiRef } from '@mui/x-tree-view-pro/hooks';
|
|
29
|
+
-const apiRef = useTreeViewApiRef();
|
|
30
|
+
+const apiRef = useRichTreeViewProApiRef();
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
- 📚 [Tutorial](https://mui.com/x/react-data-grid/tutorials/server-side-data/) on building a Data Grid with server-side data
|
|
34
|
+
- 🐞 Bugfixes
|
|
35
|
+
|
|
36
|
+
Special thanks go out to this community member for their valuable contributions:
|
|
37
|
+
@kzhgit
|
|
38
|
+
|
|
39
|
+
The following team members contributed to this release:
|
|
40
|
+
@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @JCQuintas, @mapache-salvaje, @michelengelen, @noraleonte, @oliviertassinari
|
|
41
|
+
|
|
42
|
+
### Data Grid
|
|
43
|
+
|
|
44
|
+
#### `@mui/x-data-grid@8.22.0`
|
|
45
|
+
|
|
46
|
+
- [DataGrid] Sync component props with theme defaults (#20590) @michelengelen
|
|
47
|
+
- [DataGrid] Add fallback for CSS `color-mix` if it is unsupported (#20597) @cherniavskii
|
|
48
|
+
- [DataGrid] Use `baseTooltip` slot for column header sort icon (#20460) @kzhgit
|
|
49
|
+
|
|
50
|
+
#### `@mui/x-data-grid-pro@8.22.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
51
|
+
|
|
52
|
+
Same changes as in `@mui/x-data-grid@8.22.0`.
|
|
53
|
+
|
|
54
|
+
#### `@mui/x-data-grid-premium@8.22.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
55
|
+
|
|
56
|
+
Same changes as in `@mui/x-data-grid-pro@8.22.0`, plus:
|
|
57
|
+
|
|
58
|
+
- [DataGridPremium] Handle pivoting column name generation for empty strings (#20608) @arminmeh
|
|
59
|
+
- [DataGridPremium] Pass a row with aggregated value to the custom aggregation function `valueFormatter` (#20607) @arminmeh
|
|
60
|
+
|
|
61
|
+
### Date and Time Pickers
|
|
62
|
+
|
|
63
|
+
#### `@mui/x-date-pickers@8.22.0`
|
|
64
|
+
|
|
65
|
+
- [pickers] Fix invalid date tests (#20606) @michelengelen
|
|
66
|
+
|
|
67
|
+
#### `@mui/x-date-pickers-pro@8.22.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
68
|
+
|
|
69
|
+
Same changes as in `@mui/x-date-pickers@8.22.0`.
|
|
70
|
+
|
|
71
|
+
### Charts
|
|
72
|
+
|
|
73
|
+
#### `@mui/x-charts@8.22.0`
|
|
74
|
+
|
|
75
|
+
- [charts] Add consistent animation duration and timing (#20564) @JCQuintas
|
|
76
|
+
- [charts] Extract a tooltip plugin from the interaction one (#20591) @alexfauquette
|
|
77
|
+
- [charts] General type improvements (#20565) @JCQuintas
|
|
78
|
+
- [charts] Place ordinal ticks according to a continuous scale (#19808) @alexfauquette
|
|
79
|
+
- [charts] Remove layout data from the tooltip internals (#20548) @alexfauquette
|
|
80
|
+
- [charts] Remove usage of focus outline for item highlight (#19856) @alexfauquette
|
|
81
|
+
- [charts] Simplify `MarkPlot` by moving calculation to `useMarkPlotData` (#20570) @JCQuintas
|
|
82
|
+
- [charts] Use `store.state` over `store.getSnapshot()` (#20616) @bernardobelchior
|
|
83
|
+
- [charts] Vendor flatqueue (#20610) @bernardobelchior
|
|
84
|
+
- [charts] Extract pie layout computation (#20611) @alexfauquette
|
|
85
|
+
- [charts][infra] Enable `@typescript-eslint/consistent-type-imports` eslint rules (#20560) @JCQuintas
|
|
86
|
+
- [charts][infra] Enable `import/no-cycle` eslint rules (#20554) @JCQuintas
|
|
87
|
+
|
|
88
|
+
#### `@mui/x-charts-pro@8.22.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
89
|
+
|
|
90
|
+
Same changes as in `@mui/x-charts@8.22.0`, plus:
|
|
91
|
+
|
|
92
|
+
- [charts-pro] Display sankey labels on top of nodes (#20569) @alexfauquette
|
|
93
|
+
|
|
94
|
+
#### `@mui/x-charts-premium@8.22.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
95
|
+
|
|
96
|
+
Same changes as in `@mui/x-charts-pro@8.22.0`.
|
|
97
|
+
|
|
98
|
+
### Tree View
|
|
99
|
+
|
|
100
|
+
#### `@mui/x-tree-view@8.22.0`
|
|
101
|
+
|
|
102
|
+
- [tree view] Expose one hook per component to initialize the `apiRef` (#20235) @flaviendelangle
|
|
103
|
+
- [tree view] Update the typing of `updateItemChildren()` to accept `null` (#20483) @noraleonte
|
|
104
|
+
|
|
105
|
+
#### `@mui/x-tree-view-pro@8.22.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
106
|
+
|
|
107
|
+
Same changes as in `@mui/x-tree-view@8.22.0`.
|
|
108
|
+
|
|
109
|
+
### Codemod
|
|
110
|
+
|
|
111
|
+
#### `@mui/x-codemod@8.22.0`
|
|
112
|
+
|
|
113
|
+
Internal changes.
|
|
114
|
+
|
|
115
|
+
### Docs
|
|
116
|
+
|
|
117
|
+
- [docs] Add tutorial on building a Data Grid with server-side data (DX-22) (#19782) @mapache-salvaje
|
|
118
|
+
- [docs] Modify the default value for the stacking demo (#20596) @alexfauquette
|
|
119
|
+
- [docs] Revise the Charts Custom Components doc (#19793) @mapache-salvaje
|
|
120
|
+
- [docs] Remove copy-pasted `aria-label` (#20620) @alexfauquette
|
|
121
|
+
|
|
122
|
+
### Core
|
|
123
|
+
|
|
124
|
+
- [internal] Remove unsafe dependency version from range (#20574) @oliviertassinari
|
|
125
|
+
|
|
126
|
+
### Miscellaneous
|
|
127
|
+
|
|
128
|
+
- Bump `@mui/monorepo` digest to `800638d` (#20337) @renovate[bot]
|
|
129
|
+
- Bump `@next/eslint-plugin-next` to `15.5.7` (#20575) @renovate[bot]
|
|
130
|
+
- Bump GitHub Actions (#20577) @renovate[bot]
|
|
131
|
+
- Bump Tanstack query to `^5.90.12` (#20582) @renovate[bot]
|
|
132
|
+
- Bump Vite & Vitest (#20583) @renovate[bot]
|
|
133
|
+
- Bump `eslint` to `^8.48.1` (#20576) @renovate[bot]
|
|
134
|
+
- Bump `markdown-to-jsx` to `^9.3.2` (#20507) @renovate[bot]
|
|
135
|
+
- Bump `motion` to `^12.23.25` (#20579) @renovate[bot]
|
|
136
|
+
- Bump react monorepo to `19.2.1` (#20581) @renovate[bot]
|
|
137
|
+
- Bump `react-hook-form` to `^7.68.0` (#20584) @renovate[bot]
|
|
138
|
+
- Bump `react-router` to `^7.10.1` (#20341) @renovate[bot]
|
|
139
|
+
- Bump `tsx` to `^4.21.0` (#20585) @renovate[bot]
|
|
140
|
+
- Bump MUI infra packages (#20478) @renovate[bot]
|
|
141
|
+
- [infra] Automatically add teams to release PRs (#20558) @JCQuintas
|
|
142
|
+
- [infra] Fix codeowners typo (#20562) @JCQuintas
|
|
143
|
+
|
|
144
|
+
## 8.21.0
|
|
145
|
+
|
|
146
|
+
_Dec 3, 2025_
|
|
147
|
+
|
|
148
|
+
We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
|
|
149
|
+
|
|
150
|
+
- ✨ Add [tick spacing property](https://mui.com/x/react-charts/axis/#tick-spacing) to charts axis to control the distance between ticks.
|
|
151
|
+
|
|
152
|
+
The following team members contributed to this release:
|
|
153
|
+
@alexfauquette, @bernardobelchior, @ElliottMiller, @Janpot, @JCQuintas, @romgrk, @sai6855, @siriwatknp
|
|
154
|
+
|
|
155
|
+
### Data Grid
|
|
156
|
+
|
|
157
|
+
#### `@mui/x-data-grid@8.21.0`
|
|
158
|
+
|
|
159
|
+
- [DataGrid] Fix autosizing header width calculation (#20323) @siriwatknp
|
|
160
|
+
- [DataGrid] Virtualizer refactor (#19465) @romgrk
|
|
161
|
+
|
|
162
|
+
#### `@mui/x-data-grid-pro@8.21.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
163
|
+
|
|
164
|
+
Same changes as in `@mui/x-data-grid@8.21.0`.
|
|
165
|
+
|
|
166
|
+
#### `@mui/x-data-grid-premium@8.21.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
167
|
+
|
|
168
|
+
Same changes as in `@mui/x-data-grid-pro@8.21.0`, plus:
|
|
169
|
+
|
|
170
|
+
- [DataGridPremium] Prevent pasting to non-editable cells (#20333) @ElliottMiller
|
|
171
|
+
|
|
172
|
+
### Date and Time Pickers
|
|
173
|
+
|
|
174
|
+
#### `@mui/x-date-pickers@8.21.0`
|
|
175
|
+
|
|
176
|
+
Internal changes.
|
|
177
|
+
|
|
178
|
+
#### `@mui/x-date-pickers-pro@8.21.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
179
|
+
|
|
180
|
+
Same changes as in `@mui/x-date-pickers@8.21.0`.
|
|
181
|
+
|
|
182
|
+
### Charts
|
|
183
|
+
|
|
184
|
+
#### `@mui/x-charts@8.21.0`
|
|
185
|
+
|
|
186
|
+
- [charts] Fix string measuring types (#20454) @bernardobelchior
|
|
187
|
+
- [charts] Fix typo in performance note for CustomLineMarks demo (#20529) @sai6855
|
|
188
|
+
- [charts] Introduce the notion of series with positions (#20461) @alexfauquette
|
|
189
|
+
- [charts] Migrate from sinon to Vitest mocking utilities for x-charts\* packages (#20444) @Copilot
|
|
190
|
+
- [charts] Move series-level values to series computed data in bar plot (#20467) @bernardobelchior
|
|
191
|
+
- [charts] Refactor bar chart components in preparation for range bar chart (#20521) @bernardobelchior
|
|
192
|
+
- [charts] Remove unnecessary `any` types (#20527) @sai6855
|
|
193
|
+
- [charts] Remove unused `drawingArea` from `findClosestPoints` (#20471) @bernardobelchior
|
|
194
|
+
- [charts] Revert `useIsHydrated` to default=false (#20511) @JCQuintas
|
|
195
|
+
- [charts] Support tooltip anchor position for radar (#20422) @alexfauquette
|
|
196
|
+
- [charts] Add tick spacing property (#20282) @bernardobelchior
|
|
197
|
+
- [charts] Fix Vitest lint error (#20550) @bernardobelchior
|
|
198
|
+
- [charts] Fix infinite loop when highlighting pie slices or scatter points (#20549) @bernardobelchior
|
|
199
|
+
|
|
200
|
+
#### `@mui/x-charts-pro@8.21.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
201
|
+
|
|
202
|
+
Same changes as in `@mui/x-charts@8.21.0`, plus:
|
|
203
|
+
|
|
204
|
+
- [charts-pro] Add support for `anchor="node"` on Sankey tooltip (#20462) @alexfauquette
|
|
205
|
+
|
|
206
|
+
#### `@mui/x-charts-premium@8.21.0` [](https://mui.com/r/x-premium-svg-link 'Premium plan')
|
|
207
|
+
|
|
208
|
+
Same changes as in `@mui/x-charts-pro@8.21.0`.
|
|
209
|
+
|
|
210
|
+
### Tree View
|
|
211
|
+
|
|
212
|
+
#### `@mui/x-tree-view@8.21.0`
|
|
213
|
+
|
|
214
|
+
Internal changes.
|
|
215
|
+
|
|
216
|
+
#### `@mui/x-tree-view-pro@8.21.0` [](https://mui.com/r/x-pro-svg-link 'Pro plan')
|
|
217
|
+
|
|
218
|
+
Same changes as in `@mui/x-tree-view@8.21.0`.
|
|
219
|
+
|
|
220
|
+
### Codemod
|
|
221
|
+
|
|
222
|
+
#### `@mui/x-codemod@8.21.0`
|
|
223
|
+
|
|
224
|
+
Internal changes.
|
|
225
|
+
|
|
226
|
+
### Docs
|
|
227
|
+
|
|
228
|
+
- [docs] Migrate to `next/font` for fonts loading (#20407) @Copilot
|
|
229
|
+
|
|
230
|
+
### Core
|
|
231
|
+
|
|
232
|
+
- [code-infra] Enable vitest eslint plugin (#20530) @Janpot
|
|
233
|
+
- [code-infra] Fix missing font loading for local fonts (#20480) @Janpot
|
|
234
|
+
- [internal] Performance: use raw `useSyncExternalStore` (#20447) @romgrk
|
|
235
|
+
- [code-infra] Enable `vitest/expect-expect` and `vitest/no-standalone-expect` rules for x-charts packages (#20535) @Copilot
|
|
236
|
+
|
|
237
|
+
### Miscellaneous
|
|
238
|
+
|
|
239
|
+
- Bump @types/d3-sankey to ^0.12.5 (#20489) @renovate[bot]
|
|
240
|
+
- Bump @types/react to 19.2.7 (#20490) @renovate[bot]
|
|
241
|
+
- Bump @types/yargs to ^17.0.35 (#20491) @renovate[bot]
|
|
242
|
+
- Bump Vite & Vitest to ^4.0.14 (#20500) @renovate[bot]
|
|
243
|
+
- Bump csstype to ^3.2.3 (#20493) @renovate[bot]
|
|
244
|
+
- Bump es-toolkit to ^1.42.0 (#20494) @renovate[bot]
|
|
245
|
+
- Bump eslint to ^8.48.0 (#20495) @renovate[bot]
|
|
246
|
+
- Bump lerna to ^9.0.3 (#20496) @renovate[bot]
|
|
247
|
+
- Bump lucide-react to ^0.555.0 (#20502) @renovate[bot]
|
|
248
|
+
- Bump playwright monorepo (#20503) @renovate[bot]
|
|
249
|
+
- Bump pnpm to 10.24.0 (#20504) @renovate[bot]
|
|
250
|
+
- Bump react monorepo (#20340) @renovate[bot]
|
|
251
|
+
- Bump react-hook-form to ^7.66.1 (#20497) @renovate[bot]
|
|
252
|
+
- Bump rimraf to ^6.1.2 (#20498) @renovate[bot]
|
|
253
|
+
- Bump webpack-bundle-analyzer to ^5.0.1 (#20508) @renovate[bot]
|
|
254
|
+
- Bump next to ^15.5.7 [SECURITY] (#20555) @renovate[bot]
|
|
255
|
+
|
|
8
256
|
## 8.20.0
|
|
9
257
|
|
|
10
258
|
_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 {};
|