@mui/x-data-grid 8.20.0 → 8.22.0

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.
Files changed (30) hide show
  1. package/CHANGELOG.md +248 -0
  2. package/components/GridColumnSortButton.js +13 -9
  3. package/components/containers/GridRootStyles.d.ts +3 -1
  4. package/components/containers/GridRootStyles.js +24 -11
  5. package/components/virtualization/GridVirtualScroller.js +5 -3
  6. package/components/virtualization/GridVirtualScrollerRenderZone.js +4 -16
  7. package/esm/components/GridColumnSortButton.js +13 -9
  8. package/esm/components/containers/GridRootStyles.d.ts +3 -1
  9. package/esm/components/containers/GridRootStyles.js +22 -10
  10. package/esm/components/virtualization/GridVirtualScroller.js +5 -3
  11. package/esm/components/virtualization/GridVirtualScrollerRenderZone.js +3 -15
  12. package/esm/hooks/core/useGridVirtualizer.d.ts +6 -50
  13. package/esm/hooks/core/useGridVirtualizer.js +10 -9
  14. package/esm/hooks/features/columnResize/useGridColumnResize.js +17 -8
  15. package/esm/hooks/features/dimensions/useGridDimensions.js +3 -1
  16. package/esm/hooks/features/virtualization/useGridVirtualization.d.ts +2 -2
  17. package/esm/index.js +1 -1
  18. package/esm/material/index.js +15 -7
  19. package/esm/material/variables.js +6 -4
  20. package/esm/utils/ResizeObserver.js +0 -2
  21. package/hooks/core/useGridVirtualizer.d.ts +6 -50
  22. package/hooks/core/useGridVirtualizer.js +9 -8
  23. package/hooks/features/columnResize/useGridColumnResize.js +17 -8
  24. package/hooks/features/dimensions/useGridDimensions.js +3 -1
  25. package/hooks/features/virtualization/useGridVirtualization.d.ts +2 -2
  26. package/index.js +1 -1
  27. package/material/index.js +14 -6
  28. package/material/variables.js +6 -4
  29. package/package.json +3 -3
  30. package/utils/ResizeObserver.js +0 -2
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` [![pro](https://mui.com/r/x-pro-svg)](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` [![premium](https://mui.com/r/x-premium-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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` [![premium](https://mui.com/r/x-premium-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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` [![premium](https://mui.com/r/x-premium-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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` [![premium](https://mui.com/r/x-premium-svg)](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` [![pro](https://mui.com/r/x-pro-svg)](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/components/GridColumnSortButton.js CHANGED
@@ -78,21 +78,25 @@ function GridColumnSortButton(props) {
78
78
  as: rootProps.slots.baseIconButton,
79
79
  ownerState: ownerState,
80
80
  "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
81
- title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
82
81
  size: "small",
83
82
  disabled: disabled,
84
83
  className: (0, _clsx.default)(classes.root, className)
85
84
  }, rootProps.slotProps?.baseIconButton, other, {
86
85
  children: iconElement
87
86
  }));
88
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
89
- children: [index != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
90
- badgeContent: index,
91
- color: "default",
92
- overlap: "circular",
93
- children: iconButton
94
- }), index == null && iconButton]
95
- });
87
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
88
+ title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
89
+ enterDelay: 1000
90
+ }, rootProps.slotProps?.baseTooltip, {
91
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
92
+ children: [index != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
93
+ badgeContent: index,
94
+ color: "default",
95
+ overlap: "circular",
96
+ children: iconButton
97
+ }), index == null && iconButton]
98
+ })
99
+ }));
96
100
  }
97
101
  process.env.NODE_ENV !== "production" ? GridColumnSortButton.propTypes = {
98
102
  // ----------------------------- Warning --------------------------------
package/components/containers/GridRootStyles.d.ts CHANGED
@@ -2,4 +2,6 @@ import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
2
2
  export type OwnerState = DataGridProcessedProps;
3
3
  export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
4
4
  ownerState: OwnerState;
5
- }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
5
+ }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
6
+ export declare const supportsColorMix: boolean;
7
+ export declare const colorMixIfSupported: (colorMixValue: string, fallback: string) => string;
package/components/containers/GridRootStyles.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.GridRootStyles = void 0;
6
+ exports.supportsColorMix = exports.colorMixIfSupported = exports.GridRootStyles = void 0;
7
7
  var _styles = require("@mui/material/styles");
8
8
  var _gridClasses = require("../../constants/gridClasses");
9
9
  var _cssVariables = require("../../constants/cssVariables");
@@ -254,19 +254,24 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
254
254
  const selectedOpacity = _cssVariables.vars.colors.interactive.selectedOpacity;
255
255
  const selectedHoverColor = selectedColor;
256
256
  const selectedHoverOpacity = `calc(${selectedOpacity} + ${hoverOpacity})`;
257
- const hoverBackground = mix(baseBackground, hoverColor, hoverOpacity);
258
- const selectedBackground = mix(baseBackground, selectedColor, selectedOpacity);
259
- const selectedHoverBackground = mix(baseBackground, selectedHoverColor, selectedHoverOpacity);
260
- const pinnedHoverBackground = mix(pinnedBackground, hoverColor, hoverOpacity);
261
- const pinnedSelectedBackground = mix(pinnedBackground, selectedColor, selectedOpacity);
262
- const pinnedSelectedHoverBackground = mix(pinnedBackground, selectedHoverColor, selectedHoverOpacity);
257
+ const fallbackColors = {
258
+ hover: _cssVariables.vars.colors.interactive.hover,
259
+ selected: selectedColor,
260
+ selectedHover: selectedColor
261
+ };
262
+ const hoverBackground = mix(baseBackground, hoverColor, hoverOpacity, fallbackColors.hover);
263
+ const selectedBackground = mix(baseBackground, selectedColor, selectedOpacity, fallbackColors.selected);
264
+ const selectedHoverBackground = mix(baseBackground, selectedHoverColor, selectedHoverOpacity, fallbackColors.selectedHover);
265
+ const pinnedHoverBackground = mix(pinnedBackground, hoverColor, hoverOpacity, fallbackColors.hover);
266
+ const pinnedSelectedBackground = mix(pinnedBackground, selectedColor, selectedOpacity, fallbackColors.selected);
267
+ const pinnedSelectedHoverBackground = mix(pinnedBackground, selectedHoverColor, selectedHoverOpacity, fallbackColors.selectedHover);
263
268
  const getPinnedBackgroundStyles = backgroundColor => ({
264
269
  [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
265
270
  backgroundColor,
266
271
  '&.Mui-selected': {
267
- backgroundColor: mix(backgroundColor, selectedBackground, selectedOpacity),
272
+ backgroundColor: mix(backgroundColor, selectedBackground, selectedOpacity, fallbackColors.selected),
268
273
  '&:hover': {
269
- backgroundColor: mix(backgroundColor, selectedHoverBackground, selectedHoverOpacity)
274
+ backgroundColor: mix(backgroundColor, selectedHoverBackground, selectedHoverOpacity, fallbackColors.selectedHover)
270
275
  }
271
276
  }
272
277
  }
@@ -897,6 +902,14 @@ function setOpacity(color, opacity) {
897
902
  function removeOpacity(color) {
898
903
  return setOpacity(color, 1);
899
904
  }
900
- function mix(background, overlay, opacity) {
901
- return `color-mix(in srgb,${background}, ${overlay} calc(${opacity} * 100%))`;
905
+ const supportsColorMix = exports.supportsColorMix = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('color', 'color-mix(in srgb, red 50%, blue 50%)');
906
+ const colorMixIfSupported = (colorMixValue, fallback) => {
907
+ if (!supportsColorMix) {
908
+ return fallback;
909
+ }
910
+ return colorMixValue;
911
+ };
912
+ exports.colorMixIfSupported = colorMixIfSupported;
913
+ function mix(background, overlay, opacity, fallback) {
914
+ return colorMixIfSupported(`color-mix(in srgb,${background}, ${overlay} calc(${opacity} * 100%))`, fallback);
902
915
  }
package/components/virtualization/GridVirtualScroller.js CHANGED
@@ -96,6 +96,7 @@ function GridVirtualScroller(props) {
96
96
  getContainerProps,
97
97
  getScrollerProps,
98
98
  getContentProps,
99
+ getPositionerProps,
99
100
  getScrollbarVerticalProps,
100
101
  getScrollbarHorizontalProps,
101
102
  getRows,
@@ -128,12 +129,13 @@ function GridVirtualScroller(props) {
128
129
  loadingOverlayVariant: loadingOverlayVariant,
129
130
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, rootProps.slotProps?.[overlayType]))
130
131
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
131
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, {
132
- role: "rowgroup",
132
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({
133
+ role: "rowgroup"
134
+ }, getPositionerProps(), {
133
135
  children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
134
136
  virtualScroller: virtualScroller
135
137
  })]
136
- })
138
+ }))
137
139
  })), hasBottomFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {
138
140
  rowsLength: rows.length
139
141
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.bottomContainer, {
package/components/virtualization/GridVirtualScrollerRenderZone.js CHANGED
@@ -1,23 +1,20 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
3
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.GridVirtualScrollerRenderZone = void 0;
9
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
- var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
11
10
  var React = _interopRequireWildcard(require("react"));
12
11
  var _clsx = _interopRequireDefault(require("clsx"));
13
12
  var _system = require("@mui/system");
14
13
  var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
15
14
  var _forwardRef = require("@mui/x-internals/forwardRef");
16
- var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
17
15
  var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
18
16
  var _gridClasses = require("../../constants/gridClasses");
19
17
  var _jsxRuntime = require("react/jsx-runtime");
20
- const _excluded = ["className"];
21
18
  const useUtilityClasses = ownerState => {
22
19
  const {
23
20
  classes
@@ -37,21 +34,12 @@ const VirtualScrollerRenderZoneRoot = (0, _system.styled)('div', {
37
34
  flexDirection: 'column'
38
35
  });
39
36
  const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = (0, _forwardRef.forwardRef)(function GridVirtualScrollerRenderZone(props, ref) {
40
- const {
41
- className
42
- } = props,
43
- other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
44
- const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
45
37
  const rootProps = (0, _useGridRootProps.useGridRootProps)();
46
38
  const classes = useUtilityClasses(rootProps);
47
- const offsetTop = apiRef.current.virtualizer.api.getters.getOffsetTop();
48
39
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
49
- className: (0, _clsx.default)(classes.root, className),
50
- ownerState: rootProps,
51
- style: {
52
- transform: `translate3d(0, ${offsetTop}px, 0)`
53
- }
54
- }, other, {
40
+ ownerState: rootProps
41
+ }, props, {
42
+ className: (0, _clsx.default)(classes.root, props.className),
55
43
  ref: ref
56
44
  }));
57
45
  });
package/esm/components/GridColumnSortButton.js CHANGED
@@ -70,21 +70,25 @@ function GridColumnSortButton(props) {
70
70
  as: rootProps.slots.baseIconButton,
71
71
  ownerState: ownerState,
72
72
  "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
73
- title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
74
73
  size: "small",
75
74
  disabled: disabled,
76
75
  className: clsx(classes.root, className)
77
76
  }, rootProps.slotProps?.baseIconButton, other, {
78
77
  children: iconElement
79
78
  }));
80
- return /*#__PURE__*/_jsxs(React.Fragment, {
81
- children: [index != null && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
82
- badgeContent: index,
83
- color: "default",
84
- overlap: "circular",
85
- children: iconButton
86
- }), index == null && iconButton]
87
- });
79
+ return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
80
+ title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
81
+ enterDelay: 1000
82
+ }, rootProps.slotProps?.baseTooltip, {
83
+ children: /*#__PURE__*/_jsxs("span", {
84
+ children: [index != null && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
85
+ badgeContent: index,
86
+ color: "default",
87
+ overlap: "circular",
88
+ children: iconButton
89
+ }), index == null && iconButton]
90
+ })
91
+ }));
88
92
  }
89
93
  process.env.NODE_ENV !== "production" ? GridColumnSortButton.propTypes = {
90
94
  // ----------------------------- Warning --------------------------------
package/esm/components/containers/GridRootStyles.d.ts CHANGED
@@ -2,4 +2,6 @@ import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
2
2
  export type OwnerState = DataGridProcessedProps;
3
3
  export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
4
4
  ownerState: OwnerState;
5
- }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
5
+ }, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
6
+ export declare const supportsColorMix: boolean;
7
+ export declare const colorMixIfSupported: (colorMixValue: string, fallback: string) => string;
package/esm/components/containers/GridRootStyles.js CHANGED
@@ -248,19 +248,24 @@ export const GridRootStyles = styled('div', {
248
248
  const selectedOpacity = vars.colors.interactive.selectedOpacity;
249
249
  const selectedHoverColor = selectedColor;
250
250
  const selectedHoverOpacity = `calc(${selectedOpacity} + ${hoverOpacity})`;
251
- const hoverBackground = mix(baseBackground, hoverColor, hoverOpacity);
252
- const selectedBackground = mix(baseBackground, selectedColor, selectedOpacity);
253
- const selectedHoverBackground = mix(baseBackground, selectedHoverColor, selectedHoverOpacity);
254
- const pinnedHoverBackground = mix(pinnedBackground, hoverColor, hoverOpacity);
255
- const pinnedSelectedBackground = mix(pinnedBackground, selectedColor, selectedOpacity);
256
- const pinnedSelectedHoverBackground = mix(pinnedBackground, selectedHoverColor, selectedHoverOpacity);
251
+ const fallbackColors = {
252
+ hover: vars.colors.interactive.hover,
253
+ selected: selectedColor,
254
+ selectedHover: selectedColor
255
+ };
256
+ const hoverBackground = mix(baseBackground, hoverColor, hoverOpacity, fallbackColors.hover);
257
+ const selectedBackground = mix(baseBackground, selectedColor, selectedOpacity, fallbackColors.selected);
258
+ const selectedHoverBackground = mix(baseBackground, selectedHoverColor, selectedHoverOpacity, fallbackColors.selectedHover);
259
+ const pinnedHoverBackground = mix(pinnedBackground, hoverColor, hoverOpacity, fallbackColors.hover);
260
+ const pinnedSelectedBackground = mix(pinnedBackground, selectedColor, selectedOpacity, fallbackColors.selected);
261
+ const pinnedSelectedHoverBackground = mix(pinnedBackground, selectedHoverColor, selectedHoverOpacity, fallbackColors.selectedHover);
257
262
  const getPinnedBackgroundStyles = backgroundColor => ({
258
263
  [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
259
264
  backgroundColor,
260
265
  '&.Mui-selected': {
261
- backgroundColor: mix(backgroundColor, selectedBackground, selectedOpacity),
266
+ backgroundColor: mix(backgroundColor, selectedBackground, selectedOpacity, fallbackColors.selected),
262
267
  '&:hover': {
263
- backgroundColor: mix(backgroundColor, selectedHoverBackground, selectedHoverOpacity)
268
+ backgroundColor: mix(backgroundColor, selectedHoverBackground, selectedHoverOpacity, fallbackColors.selectedHover)
264
269
  }
265
270
  }
266
271
  }
@@ -891,6 +896,13 @@ function setOpacity(color, opacity) {
891
896
  function removeOpacity(color) {
892
897
  return setOpacity(color, 1);
893
898
  }
894
- function mix(background, overlay, opacity) {
895
- return `color-mix(in srgb,${background}, ${overlay} calc(${opacity} * 100%))`;
899
+ export const supportsColorMix = typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('color', 'color-mix(in srgb, red 50%, blue 50%)');
900
+ export const colorMixIfSupported = (colorMixValue, fallback) => {
901
+ if (!supportsColorMix) {
902
+ return fallback;
903
+ }
904
+ return colorMixValue;
905
+ };
906
+ function mix(background, overlay, opacity, fallback) {
907
+ return colorMixIfSupported(`color-mix(in srgb,${background}, ${overlay} calc(${opacity} * 100%))`, fallback);
896
908
  }
package/esm/components/virtualization/GridVirtualScroller.js CHANGED
@@ -88,6 +88,7 @@ function GridVirtualScroller(props) {
88
88
  getContainerProps,
89
89
  getScrollerProps,
90
90
  getContentProps,
91
+ getPositionerProps,
91
92
  getScrollbarVerticalProps,
92
93
  getScrollbarHorizontalProps,
93
94
  getRows,
@@ -120,12 +121,13 @@ function GridVirtualScroller(props) {
120
121
  loadingOverlayVariant: loadingOverlayVariant,
121
122
  children: /*#__PURE__*/_jsx(Overlay, _extends({}, rootProps.slotProps?.[overlayType]))
122
123
  }), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
123
- children: /*#__PURE__*/_jsxs(RenderZone, {
124
- role: "rowgroup",
124
+ children: /*#__PURE__*/_jsxs(RenderZone, _extends({
125
+ role: "rowgroup"
126
+ }, getPositionerProps(), {
125
127
  children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
126
128
  virtualScroller: virtualScroller
127
129
  })]
128
- })
130
+ }))
129
131
  })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
130
132
  rowsLength: rows.length
131
133
  }), /*#__PURE__*/_jsx(rootProps.slots.bottomContainer, {
package/esm/components/virtualization/GridVirtualScrollerRenderZone.js CHANGED
@@ -1,12 +1,9 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
- import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
- const _excluded = ["className"];
4
2
  import * as React from 'react';
5
3
  import clsx from 'clsx';
6
4
  import { styled } from '@mui/system';
7
5
  import composeClasses from '@mui/utils/composeClasses';
8
6
  import { forwardRef } from '@mui/x-internals/forwardRef';
9
- import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
10
7
  import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
11
8
  import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
12
9
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,21 +26,12 @@ const VirtualScrollerRenderZoneRoot = styled('div', {
29
26
  flexDirection: 'column'
30
27
  });
31
28
  const GridVirtualScrollerRenderZone = forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
32
- const {
33
- className
34
- } = props,
35
- other = _objectWithoutPropertiesLoose(props, _excluded);
36
- const apiRef = useGridPrivateApiContext();
37
29
  const rootProps = useGridRootProps();
38
30
  const classes = useUtilityClasses(rootProps);
39
- const offsetTop = apiRef.current.virtualizer.api.getters.getOffsetTop();
40
31
  return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
41
- className: clsx(classes.root, className),
42
- ownerState: rootProps,
43
- style: {
44
- transform: `translate3d(0, ${offsetTop}px, 0)`
45
- }
46
- }, other, {
32
+ ownerState: rootProps
33
+ }, props, {
34
+ className: clsx(classes.root, props.className),
47
35
  ref: ref
48
36
  }));
49
37
  });
package/esm/hooks/core/useGridVirtualizer.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as React from 'react';
2
- import { Dimensions, Virtualization } from '@mui/x-virtualizer';
2
+ import { Dimensions, LayoutDataGridLegacy, Virtualization } from '@mui/x-virtualizer';
3
3
  /**
4
4
  * Virtualizer setup
5
5
  */
6
6
  export declare function useGridVirtualizer(): {
7
- store: import("@mui/x-internals/store").Store<Dimensions.State & Virtualization.State & import("@mui/x-virtualizer").Colspan.State & import("@mui/x-virtualizer").Rowspan.State>;
7
+ store: import("@mui/x-internals/store").Store<Dimensions.State & Virtualization.State<LayoutDataGridLegacy> & import("@mui/x-virtualizer").Colspan.State & import("@mui/x-virtualizer").Rowspan.State>;
8
8
  api: {
9
9
  updateDimensions: (firstUpdate?: boolean) => void;
10
10
  debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
@@ -20,57 +20,13 @@ export declare function useGridVirtualizer(): {
20
20
  resetRowHeights: () => void;
21
21
  };
22
22
  } & {
23
- getters: {
24
- setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
25
- getOffsetTop: () => number;
26
- getRows: (rowParams?: {
27
- rows?: import("@mui/x-virtualizer/models").RowEntry[];
28
- position?: import("@mui/x-virtualizer/models").PinnedRowPosition;
29
- renderContext?: import("@mui/x-virtualizer/models").RenderContext;
30
- }, unstable_rowTree?: Record<import("@mui/x-virtualizer/models").RowId, any>) => React.ReactNode[];
31
- rows: import("@mui/x-virtualizer/models").RowEntry[];
32
- getContainerProps: () => {
33
- ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
34
- };
35
- getScrollerProps: () => {
36
- ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
37
- style: React.CSSProperties;
38
- role: string;
39
- tabIndex: number | undefined;
40
- };
41
- getContentProps: () => {
42
- ref: (node: HTMLDivElement | null) => void;
43
- style: React.CSSProperties;
44
- role: string;
45
- };
46
- getScrollbarVerticalProps: () => {
47
- ref: (node: HTMLDivElement | null) => void;
48
- scrollPosition: React.RefObject<{
49
- top: number;
50
- left: number;
51
- }>;
52
- };
53
- getScrollbarHorizontalProps: () => {
54
- ref: (node: HTMLDivElement | null) => void;
55
- scrollPosition: React.RefObject<{
56
- top: number;
57
- left: number;
58
- }>;
59
- };
60
- getScrollAreaProps: () => {
61
- scrollPosition: React.RefObject<{
62
- top: number;
63
- left: number;
64
- }>;
65
- };
66
- };
67
- useVirtualization: () => import("@mui/x-virtualizer").BaseState;
68
- setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
69
- forceUpdateRenderContext: () => void;
70
- scheduleUpdateRenderContext: () => void;
71
23
  getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo;
72
24
  calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
73
25
  getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer/models").RowId, Record<number, number>>;
26
+ getters: any;
27
+ setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
28
+ forceUpdateRenderContext: () => void;
29
+ scheduleUpdateRenderContext: () => void;
74
30
  } & {
75
31
  resetColSpan: () => void;
76
32
  getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo | undefined;
package/esm/hooks/core/useGridVirtualizer.js CHANGED
@@ -6,7 +6,7 @@ import { useRtl } from '@mui/system/RtlProvider';
6
6
  import { roundToDecimalPlaces } from '@mui/x-internals/math';
7
7
  import { lruMemoize } from '@mui/x-internals/lruMemoize';
8
8
  import { useStoreEffect } from '@mui/x-internals/store';
9
- import { useVirtualizer, Dimensions, Virtualization, EMPTY_RENDER_CONTEXT } from '@mui/x-virtualizer';
9
+ import { useVirtualizer, Dimensions, LayoutDataGridLegacy, Virtualization, EMPTY_RENDER_CONTEXT } from '@mui/x-virtualizer';
10
10
  import { useFirstRender } from "../utils/useFirstRender.js";
11
11
  import { createSelector } from "../../utils/createSelector.js";
12
12
  import { useGridSelector } from "../utils/useGridSelector.js";
@@ -91,6 +91,8 @@ export function useGridVirtualizer() {
91
91
  rightPinnedWidth,
92
92
  topPinnedHeight: headersTotalHeight,
93
93
  bottomPinnedHeight: 0,
94
+ autoHeight,
95
+ minimalContentHeight,
94
96
  scrollbarSize: rootProps.scrollbarSize
95
97
  };
96
98
  const addGridDimensions = useLazyRef(addGridDimensionsCreator).current;
@@ -113,13 +115,14 @@ export function useGridVirtualizer() {
113
115
  const focusedVirtualCell = useGridSelector(apiRef, gridFocusedVirtualCellSelector);
114
116
  // We need it to trigger a new render, but rowsMeta needs access to the latest value, hence we cannot pass it to the focusedVirtualCell callback in the virtualizer params
115
117
  eslintUseValue(focusedVirtualCell);
118
+ const layout = useLazyRef(() => new LayoutDataGridLegacy({
119
+ container: apiRef.current.mainElementRef,
120
+ scroller: apiRef.current.virtualScrollerRef,
121
+ scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
122
+ scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
123
+ })).current;
116
124
  const virtualizer = useVirtualizer({
117
- refs: {
118
- container: apiRef.current.mainElementRef,
119
- scroller: apiRef.current.virtualScrollerRef,
120
- scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
121
- scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
122
- },
125
+ layout,
123
126
  dimensions: dimensionsParams,
124
127
  virtualization: {
125
128
  isRtl,
@@ -148,10 +151,8 @@ export function useGridVirtualizer() {
148
151
  columns: visibleColumns,
149
152
  pinnedRows,
150
153
  pinnedColumns,
151
- autoHeight,
152
154
  disableHorizontalScroll: listView,
153
155
  disableVerticalScroll: overlayState.overlayType === 'noColumnsOverlay' || overlayState.loadingOverlayVariant === 'skeleton',
154
- minimalContentHeight,
155
156
  getRowHeight: React.useMemo(() => {
156
157
  if (!getRowHeight) {
157
158
  return undefined;
package/esm/hooks/features/columnResize/useGridColumnResize.js CHANGED
@@ -142,15 +142,24 @@ function extractColumnWidths(apiRef, options, columns) {
142
142
  if (options.includeHeaders) {
143
143
  const header = findGridHeader(apiRef.current, column.field);
144
144
  if (header) {
145
- const title = header.querySelector(`.${gridClasses.columnHeaderTitle}`);
146
- const content = header.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`);
147
- const iconContainer = header.querySelector(`.${gridClasses.iconButtonContainer}`);
145
+ const titleContainer = header.querySelector(`.${gridClasses.columnHeaderTitleContainer}`);
146
+ const children = Array.from(titleContainer.children);
148
147
  const menuContainer = header.querySelector(`.${gridClasses.menuIcon}`);
149
- const element = title ?? content;
150
- const style = window.getComputedStyle(header, null);
151
- const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
152
- const contentWidth = element.scrollWidth + 1;
153
- const width = contentWidth + paddingWidth + (iconContainer?.clientWidth ?? 0) + (menuContainer?.clientWidth ?? 0);
148
+ const titleContainerStyle = window.getComputedStyle(titleContainer, null);
149
+ const gap = parseInt(titleContainerStyle.gap, 10) || 0;
150
+ const headerStyle = window.getComputedStyle(header, null);
151
+ const paddingWidth = parseInt(headerStyle.paddingLeft, 10) + parseInt(headerStyle.paddingRight, 10);
152
+ let totalChildren = 0;
153
+ let childrenWidth = 0;
154
+ for (let i = 0; i < children.length; i += 1) {
155
+ const child = children[i];
156
+ if (child.clientWidth > 0) {
157
+ totalChildren += 1;
158
+ childrenWidth += child.scrollWidth;
159
+ }
160
+ }
161
+ childrenWidth += 1;
162
+ const width = childrenWidth + gap * (totalChildren - 1) + paddingWidth + (menuContainer?.clientWidth ?? 0);
154
163
  filteredWidths.push(width);
155
164
  }
156
165
  }
package/esm/hooks/features/dimensions/useGridDimensions.js CHANGED
@@ -39,7 +39,9 @@ const EMPTY_DIMENSIONS = {
39
39
  rightPinnedWidth: 0,
40
40
  headersTotalHeight: 0,
41
41
  topContainerHeight: 0,
42
- bottomContainerHeight: 0
42
+ bottomContainerHeight: 0,
43
+ autoHeight: false,
44
+ minimalContentHeight: undefined
43
45
  };
44
46
  export const dimensionsStateInitializer = (state, props, apiRef) => {
45
47
  const dimensions = EMPTY_DIMENSIONS;
package/esm/hooks/features/virtualization/useGridVirtualization.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { RefObject } from '@mui/x-internals/types';
2
- import { Virtualization } from '@mui/x-virtualizer';
2
+ import { Virtualization, LayoutDataGridLegacy } from '@mui/x-virtualizer';
3
3
  import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
4
4
  import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
5
5
  import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
6
6
  type RootProps = DataGridProcessedProps;
7
- export type GridVirtualizationState = { [K in keyof Virtualization.State['virtualization']]: Virtualization.State['virtualization'][K] };
7
+ export type GridVirtualizationState = { [K in keyof Virtualization.State<LayoutDataGridLegacy>['virtualization']]: Virtualization.State<LayoutDataGridLegacy>['virtualization'][K] };
8
8
  export declare const virtualizationStateInitializer: GridStateInitializer<RootProps>;
9
9
  export declare function useGridVirtualization(apiRef: RefObject<GridPrivateApiCommunity>, rootProps: RootProps): void;
10
10
  export {};
package/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-data-grid v8.20.0
2
+ * @mui/x-data-grid v8.22.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/esm/material/index.js CHANGED
@@ -29,7 +29,7 @@ import * as React from 'react';
29
29
  import clsx from 'clsx';
30
30
  import useForkRef from '@mui/utils/useForkRef';
31
31
  import useEventCallback from '@mui/utils/useEventCallback';
32
- import { styled } from '@mui/material/styles';
32
+ import { styled, useTheme } from '@mui/material/styles';
33
33
  import MUIAutocomplete from '@mui/material/Autocomplete';
34
34
  import MUIBadge from '@mui/material/Badge';
35
35
  import MUICheckbox from '@mui/material/Checkbox';
@@ -142,6 +142,10 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
142
142
  fullWidth
143
143
  } = props,
144
144
  other = _objectWithoutPropertiesLoose(props, _excluded);
145
+ const theme = useTheme();
146
+ const textFieldDefaults = theme.components?.MuiTextField?.defaultProps ?? {};
147
+ const computedSize = size ?? textFieldDefaults.size;
148
+ const computedVariant = textFieldDefaults.variant ?? 'outlined';
145
149
  const menuProps = {
146
150
  PaperProps: {
147
151
  onKeyDown
@@ -151,7 +155,7 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
151
155
  menuProps.onClose = onClose;
152
156
  }
153
157
  return /*#__PURE__*/_jsxs(MUIFormControl, {
154
- size: size,
158
+ size: computedSize,
155
159
  fullWidth: fullWidth,
156
160
  style: style,
157
161
  disabled: disabled,
@@ -160,7 +164,7 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
160
164
  id: labelId,
161
165
  htmlFor: id,
162
166
  shrink: true,
163
- variant: "outlined",
167
+ variant: computedVariant,
164
168
  children: label
165
169
  }), /*#__PURE__*/_jsx(MUISelect, _extends({
166
170
  id: id,
@@ -168,13 +172,12 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
168
172
  label: label,
169
173
  displayEmpty: true,
170
174
  onChange: onChange,
171
- variant: "outlined"
175
+ variant: computedVariant
172
176
  }, other, {
173
- notched: true,
174
177
  inputProps: slotProps?.htmlInput,
175
178
  onOpen: onOpen,
176
179
  MenuProps: menuProps,
177
- size: size
180
+ size: computedSize
178
181
  }, material))]
179
182
  });
180
183
  });
@@ -449,8 +452,13 @@ function BaseTextField(props) {
449
452
  material
450
453
  } = props,
451
454
  other = _objectWithoutPropertiesLoose(props, _excluded15);
455
+ const theme = useTheme();
456
+ const textFieldDefaults = theme.components?.MuiTextField?.defaultProps ?? {};
457
+ const computedVariant = other.variant ?? textFieldDefaults.variant ?? 'outlined';
458
+ const computedSize = other.size ?? textFieldDefaults.size;
452
459
  return /*#__PURE__*/_jsx(MUITextField, _extends({
453
- variant: "outlined"
460
+ variant: computedVariant,
461
+ size: computedSize
454
462
  }, other, material, {
455
463
  inputProps: slotProps?.htmlInput,
456
464
  InputProps: transformInputProps(slotProps?.input),
package/esm/material/variables.js CHANGED
@@ -3,6 +3,7 @@ import { alpha, darken, lighten } from '@mui/material/styles';
3
3
  import { useTheme } from '@mui/material/styles';
4
4
  import { hash } from '@mui/x-internals/hash';
5
5
  import { vars } from "../constants/cssVariables.js";
6
+ import { colorMixIfSupported, supportsColorMix } from "../components/containers/GridRootStyles.js";
6
7
  export function useMaterialCSSVariables() {
7
8
  const theme = useTheme();
8
9
  return React.useMemo(() => {
@@ -17,11 +18,12 @@ export function useMaterialCSSVariables() {
17
18
  function transformTheme(t) {
18
19
  const borderColor = getBorderColor(t);
19
20
  const dataGridPalette = (t.vars || t).palette.DataGrid;
20
- const backgroundBase = dataGridPalette?.bg ?? (t.palette.mode === 'dark' ? `color-mix(in srgb, ${(t.vars || t).palette.background.paper} 95%, #fff)` : (t.vars || t).palette.background.paper);
21
+ const paperColor = (t.vars || t).palette.background.paper;
22
+ const backgroundBase = dataGridPalette?.bg ?? (t.palette.mode === 'dark' ? colorMixIfSupported(`color-mix(in srgb, ${paperColor} 95%, #fff)`, paperColor) : paperColor);
21
23
  const backgroundHeader = dataGridPalette?.headerBg ?? backgroundBase;
22
24
  const backgroundPinned = dataGridPalette?.pinnedBg ?? backgroundBase;
23
25
  const backgroundBackdrop = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : alpha(t.palette.background.default, t.palette.action.disabledOpacity);
24
- const backgroundOverlay = t.palette.mode === 'dark' ? `color-mix(in srgb, ${(t.vars || t).palette.background.paper} 90%, #fff)` : (t.vars || t).palette.background.paper;
26
+ const backgroundOverlay = t.palette.mode === 'dark' ? colorMixIfSupported(`color-mix(in srgb, ${paperColor} 90%, #fff)`, paperColor) : paperColor;
25
27
  const selectedColor = t.vars ? `rgb(${t.vars.palette.primary.mainChannel})` : t.palette.primary.main;
26
28
  const radius = getRadius(t);
27
29
  const fontBody = t.vars?.font?.body2 ?? formatFont(t.typography.body2);
@@ -39,13 +41,13 @@ function transformTheme(t) {
39
41
  [k.colors.foreground.accent]: (t.vars || t).palette.primary.dark,
40
42
  [k.colors.foreground.disabled]: (t.vars || t).palette.text.disabled,
41
43
  [k.colors.foreground.error]: (t.vars || t).palette.error.dark,
42
- [k.colors.interactive.hover]: (t.vars || t).palette.action.hover,
44
+ [k.colors.interactive.hover]: supportsColorMix ? (t.vars || t).palette.action.hover : (t.vars || t).palette.grey[t.palette.mode === 'dark' ? 800 : 100],
43
45
  [k.colors.interactive.hoverOpacity]: (t.vars || t).palette.action.hoverOpacity,
44
46
  [k.colors.interactive.focus]: removeOpacity((t.vars || t).palette.primary.main),
45
47
  [k.colors.interactive.focusOpacity]: (t.vars || t).palette.action.focusOpacity,
46
48
  [k.colors.interactive.disabled]: removeOpacity((t.vars || t).palette.action.disabled),
47
49
  [k.colors.interactive.disabledOpacity]: (t.vars || t).palette.action.disabledOpacity,
48
- [k.colors.interactive.selected]: selectedColor,
50
+ [k.colors.interactive.selected]: supportsColorMix ? selectedColor : (t.vars || t).palette.grey[t.palette.mode === 'dark' ? 700 : 200],
49
51
  [k.colors.interactive.selectedOpacity]: (t.vars || t).palette.action.selectedOpacity,
50
52
  [k.header.background.base]: backgroundHeader,
51
53
  [k.cell.background.pinned]: backgroundPinned,
package/esm/utils/ResizeObserver.js CHANGED
@@ -1,5 +1,3 @@
1
- /* eslint-disable */
2
-
3
1
  /**
4
2
  * HACK: Minimal shim to get jsdom to work.
5
3
  */
package/hooks/core/useGridVirtualizer.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import * as React from 'react';
2
- import { Dimensions, Virtualization } from '@mui/x-virtualizer';
2
+ import { Dimensions, LayoutDataGridLegacy, Virtualization } from '@mui/x-virtualizer';
3
3
  /**
4
4
  * Virtualizer setup
5
5
  */
6
6
  export declare function useGridVirtualizer(): {
7
- store: import("@mui/x-internals/store").Store<Dimensions.State & Virtualization.State & import("@mui/x-virtualizer").Colspan.State & import("@mui/x-virtualizer").Rowspan.State>;
7
+ store: import("@mui/x-internals/store").Store<Dimensions.State & Virtualization.State<LayoutDataGridLegacy> & import("@mui/x-virtualizer").Colspan.State & import("@mui/x-virtualizer").Rowspan.State>;
8
8
  api: {
9
9
  updateDimensions: (firstUpdate?: boolean) => void;
10
10
  debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
@@ -20,57 +20,13 @@ export declare function useGridVirtualizer(): {
20
20
  resetRowHeights: () => void;
21
21
  };
22
22
  } & {
23
- getters: {
24
- setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
25
- getOffsetTop: () => number;
26
- getRows: (rowParams?: {
27
- rows?: import("@mui/x-virtualizer/models").RowEntry[];
28
- position?: import("@mui/x-virtualizer/models").PinnedRowPosition;
29
- renderContext?: import("@mui/x-virtualizer/models").RenderContext;
30
- }, unstable_rowTree?: Record<import("@mui/x-virtualizer/models").RowId, any>) => React.ReactNode[];
31
- rows: import("@mui/x-virtualizer/models").RowEntry[];
32
- getContainerProps: () => {
33
- ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
34
- };
35
- getScrollerProps: () => {
36
- ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
37
- style: React.CSSProperties;
38
- role: string;
39
- tabIndex: number | undefined;
40
- };
41
- getContentProps: () => {
42
- ref: (node: HTMLDivElement | null) => void;
43
- style: React.CSSProperties;
44
- role: string;
45
- };
46
- getScrollbarVerticalProps: () => {
47
- ref: (node: HTMLDivElement | null) => void;
48
- scrollPosition: React.RefObject<{
49
- top: number;
50
- left: number;
51
- }>;
52
- };
53
- getScrollbarHorizontalProps: () => {
54
- ref: (node: HTMLDivElement | null) => void;
55
- scrollPosition: React.RefObject<{
56
- top: number;
57
- left: number;
58
- }>;
59
- };
60
- getScrollAreaProps: () => {
61
- scrollPosition: React.RefObject<{
62
- top: number;
63
- left: number;
64
- }>;
65
- };
66
- };
67
- useVirtualization: () => import("@mui/x-virtualizer").BaseState;
68
- setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
69
- forceUpdateRenderContext: () => void;
70
- scheduleUpdateRenderContext: () => void;
71
23
  getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo;
72
24
  calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
73
25
  getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer/models").RowId, Record<number, number>>;
26
+ getters: any;
27
+ setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
28
+ forceUpdateRenderContext: () => void;
29
+ scheduleUpdateRenderContext: () => void;
74
30
  } & {
75
31
  resetColSpan: () => void;
76
32
  getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo | undefined;
package/hooks/core/useGridVirtualizer.js CHANGED
@@ -99,6 +99,8 @@ function useGridVirtualizer() {
99
99
  rightPinnedWidth,
100
100
  topPinnedHeight: headersTotalHeight,
101
101
  bottomPinnedHeight: 0,
102
+ autoHeight,
103
+ minimalContentHeight: _gridRowsUtils.minimalContentHeight,
102
104
  scrollbarSize: rootProps.scrollbarSize
103
105
  };
104
106
  const addGridDimensions = (0, _useLazyRef.default)(addGridDimensionsCreator).current;
@@ -121,13 +123,14 @@ function useGridVirtualizer() {
121
123
  const focusedVirtualCell = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector);
122
124
  // We need it to trigger a new render, but rowsMeta needs access to the latest value, hence we cannot pass it to the focusedVirtualCell callback in the virtualizer params
123
125
  (0, _utils.eslintUseValue)(focusedVirtualCell);
126
+ const layout = (0, _useLazyRef.default)(() => new _xVirtualizer.LayoutDataGridLegacy({
127
+ container: apiRef.current.mainElementRef,
128
+ scroller: apiRef.current.virtualScrollerRef,
129
+ scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
130
+ scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
131
+ })).current;
124
132
  const virtualizer = (0, _xVirtualizer.useVirtualizer)({
125
- refs: {
126
- container: apiRef.current.mainElementRef,
127
- scroller: apiRef.current.virtualScrollerRef,
128
- scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
129
- scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
130
- },
133
+ layout,
131
134
  dimensions: dimensionsParams,
132
135
  virtualization: {
133
136
  isRtl,
@@ -156,10 +159,8 @@ function useGridVirtualizer() {
156
159
  columns: visibleColumns,
157
160
  pinnedRows,
158
161
  pinnedColumns,
159
- autoHeight,
160
162
  disableHorizontalScroll: listView,
161
163
  disableVerticalScroll: overlayState.overlayType === 'noColumnsOverlay' || overlayState.loadingOverlayVariant === 'skeleton',
162
- minimalContentHeight: _gridRowsUtils.minimalContentHeight,
163
164
  getRowHeight: React.useMemo(() => {
164
165
  if (!getRowHeight) {
165
166
  return undefined;
package/hooks/features/columnResize/useGridColumnResize.js CHANGED
@@ -149,15 +149,24 @@ function extractColumnWidths(apiRef, options, columns) {
149
149
  if (options.includeHeaders) {
150
150
  const header = (0, _domUtils.findGridHeader)(apiRef.current, column.field);
151
151
  if (header) {
152
- const title = header.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitle}`);
153
- const content = header.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`);
154
- const iconContainer = header.querySelector(`.${_gridClasses.gridClasses.iconButtonContainer}`);
152
+ const titleContainer = header.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitleContainer}`);
153
+ const children = Array.from(titleContainer.children);
155
154
  const menuContainer = header.querySelector(`.${_gridClasses.gridClasses.menuIcon}`);
156
- const element = title ?? content;
157
- const style = window.getComputedStyle(header, null);
158
- const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
159
- const contentWidth = element.scrollWidth + 1;
160
- const width = contentWidth + paddingWidth + (iconContainer?.clientWidth ?? 0) + (menuContainer?.clientWidth ?? 0);
155
+ const titleContainerStyle = window.getComputedStyle(titleContainer, null);
156
+ const gap = parseInt(titleContainerStyle.gap, 10) || 0;
157
+ const headerStyle = window.getComputedStyle(header, null);
158
+ const paddingWidth = parseInt(headerStyle.paddingLeft, 10) + parseInt(headerStyle.paddingRight, 10);
159
+ let totalChildren = 0;
160
+ let childrenWidth = 0;
161
+ for (let i = 0; i < children.length; i += 1) {
162
+ const child = children[i];
163
+ if (child.clientWidth > 0) {
164
+ totalChildren += 1;
165
+ childrenWidth += child.scrollWidth;
166
+ }
167
+ }
168
+ childrenWidth += 1;
169
+ const width = childrenWidth + gap * (totalChildren - 1) + paddingWidth + (menuContainer?.clientWidth ?? 0);
161
170
  filteredWidths.push(width);
162
171
  }
163
172
  }
package/hooks/features/dimensions/useGridDimensions.js CHANGED
@@ -47,7 +47,9 @@ const EMPTY_DIMENSIONS = {
47
47
  rightPinnedWidth: 0,
48
48
  headersTotalHeight: 0,
49
49
  topContainerHeight: 0,
50
- bottomContainerHeight: 0
50
+ bottomContainerHeight: 0,
51
+ autoHeight: false,
52
+ minimalContentHeight: undefined
51
53
  };
52
54
  const dimensionsStateInitializer = (state, props, apiRef) => {
53
55
  const dimensions = EMPTY_DIMENSIONS;
package/hooks/features/virtualization/useGridVirtualization.d.ts CHANGED
@@ -1,10 +1,10 @@
1
1
  import { RefObject } from '@mui/x-internals/types';
2
- import { Virtualization } from '@mui/x-virtualizer';
2
+ import { Virtualization, LayoutDataGridLegacy } from '@mui/x-virtualizer';
3
3
  import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
4
4
  import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
5
5
  import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
6
6
  type RootProps = DataGridProcessedProps;
7
- export type GridVirtualizationState = { [K in keyof Virtualization.State['virtualization']]: Virtualization.State['virtualization'][K] };
7
+ export type GridVirtualizationState = { [K in keyof Virtualization.State<LayoutDataGridLegacy>['virtualization']]: Virtualization.State<LayoutDataGridLegacy>['virtualization'][K] };
8
8
  export declare const virtualizationStateInitializer: GridStateInitializer<RootProps>;
9
9
  export declare function useGridVirtualization(apiRef: RefObject<GridPrivateApiCommunity>, rootProps: RootProps): void;
10
10
  export {};
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/x-data-grid v8.20.0
2
+ * @mui/x-data-grid v8.22.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/material/index.js CHANGED
@@ -155,6 +155,10 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
155
155
  fullWidth
156
156
  } = props,
157
157
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
158
+ const theme = (0, _styles.useTheme)();
159
+ const textFieldDefaults = theme.components?.MuiTextField?.defaultProps ?? {};
160
+ const computedSize = size ?? textFieldDefaults.size;
161
+ const computedVariant = textFieldDefaults.variant ?? 'outlined';
158
162
  const menuProps = {
159
163
  PaperProps: {
160
164
  onKeyDown
@@ -164,7 +168,7 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
164
168
  menuProps.onClose = onClose;
165
169
  }
166
170
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
167
- size: size,
171
+ size: computedSize,
168
172
  fullWidth: fullWidth,
169
173
  style: style,
170
174
  disabled: disabled,
@@ -173,7 +177,7 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
173
177
  id: labelId,
174
178
  htmlFor: id,
175
179
  shrink: true,
176
- variant: "outlined",
180
+ variant: computedVariant,
177
181
  children: label
178
182
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, (0, _extends2.default)({
179
183
  id: id,
@@ -181,13 +185,12 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
181
185
  label: label,
182
186
  displayEmpty: true,
183
187
  onChange: onChange,
184
- variant: "outlined"
188
+ variant: computedVariant
185
189
  }, other, {
186
- notched: true,
187
190
  inputProps: slotProps?.htmlInput,
188
191
  onOpen: onOpen,
189
192
  MenuProps: menuProps,
190
- size: size
193
+ size: computedSize
191
194
  }, material))]
192
195
  });
193
196
  });
@@ -462,8 +465,13 @@ function BaseTextField(props) {
462
465
  material
463
466
  } = props,
464
467
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded15);
468
+ const theme = (0, _styles.useTheme)();
469
+ const textFieldDefaults = theme.components?.MuiTextField?.defaultProps ?? {};
470
+ const computedVariant = other.variant ?? textFieldDefaults.variant ?? 'outlined';
471
+ const computedSize = other.size ?? textFieldDefaults.size;
465
472
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({
466
- variant: "outlined"
473
+ variant: computedVariant,
474
+ size: computedSize
467
475
  }, other, material, {
468
476
  inputProps: slotProps?.htmlInput,
469
477
  InputProps: transformInputProps(slotProps?.input),
package/material/variables.js CHANGED
@@ -9,6 +9,7 @@ var React = _interopRequireWildcard(require("react"));
9
9
  var _styles = require("@mui/material/styles");
10
10
  var _hash = require("@mui/x-internals/hash");
11
11
  var _cssVariables = require("../constants/cssVariables");
12
+ var _GridRootStyles = require("../components/containers/GridRootStyles");
12
13
  function useMaterialCSSVariables() {
13
14
  const theme = (0, _styles.useTheme)();
14
15
  return React.useMemo(() => {
@@ -23,11 +24,12 @@ function useMaterialCSSVariables() {
23
24
  function transformTheme(t) {
24
25
  const borderColor = getBorderColor(t);
25
26
  const dataGridPalette = (t.vars || t).palette.DataGrid;
26
- const backgroundBase = dataGridPalette?.bg ?? (t.palette.mode === 'dark' ? `color-mix(in srgb, ${(t.vars || t).palette.background.paper} 95%, #fff)` : (t.vars || t).palette.background.paper);
27
+ const paperColor = (t.vars || t).palette.background.paper;
28
+ const backgroundBase = dataGridPalette?.bg ?? (t.palette.mode === 'dark' ? (0, _GridRootStyles.colorMixIfSupported)(`color-mix(in srgb, ${paperColor} 95%, #fff)`, paperColor) : paperColor);
27
29
  const backgroundHeader = dataGridPalette?.headerBg ?? backgroundBase;
28
30
  const backgroundPinned = dataGridPalette?.pinnedBg ?? backgroundBase;
29
31
  const backgroundBackdrop = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : (0, _styles.alpha)(t.palette.background.default, t.palette.action.disabledOpacity);
30
- const backgroundOverlay = t.palette.mode === 'dark' ? `color-mix(in srgb, ${(t.vars || t).palette.background.paper} 90%, #fff)` : (t.vars || t).palette.background.paper;
32
+ const backgroundOverlay = t.palette.mode === 'dark' ? (0, _GridRootStyles.colorMixIfSupported)(`color-mix(in srgb, ${paperColor} 90%, #fff)`, paperColor) : paperColor;
31
33
  const selectedColor = t.vars ? `rgb(${t.vars.palette.primary.mainChannel})` : t.palette.primary.main;
32
34
  const radius = getRadius(t);
33
35
  const fontBody = t.vars?.font?.body2 ?? formatFont(t.typography.body2);
@@ -45,13 +47,13 @@ function transformTheme(t) {
45
47
  [k.colors.foreground.accent]: (t.vars || t).palette.primary.dark,
46
48
  [k.colors.foreground.disabled]: (t.vars || t).palette.text.disabled,
47
49
  [k.colors.foreground.error]: (t.vars || t).palette.error.dark,
48
- [k.colors.interactive.hover]: (t.vars || t).palette.action.hover,
50
+ [k.colors.interactive.hover]: _GridRootStyles.supportsColorMix ? (t.vars || t).palette.action.hover : (t.vars || t).palette.grey[t.palette.mode === 'dark' ? 800 : 100],
49
51
  [k.colors.interactive.hoverOpacity]: (t.vars || t).palette.action.hoverOpacity,
50
52
  [k.colors.interactive.focus]: removeOpacity((t.vars || t).palette.primary.main),
51
53
  [k.colors.interactive.focusOpacity]: (t.vars || t).palette.action.focusOpacity,
52
54
  [k.colors.interactive.disabled]: removeOpacity((t.vars || t).palette.action.disabled),
53
55
  [k.colors.interactive.disabledOpacity]: (t.vars || t).palette.action.disabledOpacity,
54
- [k.colors.interactive.selected]: selectedColor,
56
+ [k.colors.interactive.selected]: _GridRootStyles.supportsColorMix ? selectedColor : (t.vars || t).palette.grey[t.palette.mode === 'dark' ? 700 : 200],
55
57
  [k.colors.interactive.selectedOpacity]: (t.vars || t).palette.action.selectedOpacity,
56
58
  [k.header.background.base]: backgroundHeader,
57
59
  [k.cell.background.pinned]: backgroundPinned,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/x-data-grid",
3
- "version": "8.20.0",
3
+ "version": "8.22.0",
4
4
  "author": "MUI Team",
5
5
  "description": "The Community plan edition of the MUI X Data Grid components.",
6
6
  "license": "MIT",
@@ -42,8 +42,8 @@
42
42
  "clsx": "^2.1.1",
43
43
  "prop-types": "^15.8.1",
44
44
  "use-sync-external-store": "^1.6.0",
45
- "@mui/x-internals": "8.19.0",
46
- "@mui/x-virtualizer": "0.2.10"
45
+ "@mui/x-internals": "8.22.0",
46
+ "@mui/x-virtualizer": "0.2.12"
47
47
  },
48
48
  "peerDependencies": {
49
49
  "@emotion/react": "^11.9.0",
package/utils/ResizeObserver.js CHANGED
@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.ResizeObserver = void 0;
7
- /* eslint-disable */
8
-
9
7
  /**
10
8
  * HACK: Minimal shim to get jsdom to work.
11
9
  */