@mui/x-data-grid 9.5.0 → 9.7.0

package/components/toolbarV8/ToolbarButton.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import type { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.mjs";
 export type ToolbarButtonProps = GridSlotProps['baseIconButton'] & {
   /**

package/components/toolbarV8/ToolbarButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type RenderProp } from '@mui/x-internals/useComponentRenderer';
+import type { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 export type ToolbarButtonProps = GridSlotProps['baseIconButton'] & {
   /**

package/components/toolbarV8/ToolbarButton.js

@@ -93,7 +93,7 @@ const ToolbarButton = exports.ToolbarButton = (0, _forwardRef.forwardRef)(functi
   });
 });
 if (process.env.NODE_ENV !== "production") ToolbarButton.displayName = "ToolbarButton";
-process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
+process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |

package/components/toolbarV8/ToolbarButton.mjs

@@ -86,7 +86,7 @@ const ToolbarButton = forwardRef(function ToolbarButton(props, ref) {
   });
 });
 if (process.env.NODE_ENV !== "production") ToolbarButton.displayName = "ToolbarButton";
-process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
+process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |

package/components/virtualization/GridVirtualScrollbar.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _platform = require("@mui/x-internals/platform");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _hooks = require("../../hooks");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -42,7 +43,13 @@ const Scrollbar = (0, _styles.styled)('div', {
   '&:hover': {
     zIndex: 70
   },
-  '--size': scrollbarSizeCssExpression
+  '--size': scrollbarSizeCssExpression,
+  // [iOS-scrollbar-swap]
+  // On iOS, native scrollbars of the `GridVirtualScroller` are shown instead,
+  // so hide these to avoid a duplicate thumb.
+  [_platform.iOSMediaQuery]: {
+    display: 'none'
+  }
 });
 const ScrollbarVertical = (0, _styles.styled)(Scrollbar, {
   slot: 'internal'

package/components/virtualization/GridVirtualScrollbar.mjs

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { iOSMediaQuery } from '@mui/x-internals/platform';
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.mjs";
 import { gridDimensionsSelector, useGridSelector } from "../../hooks/index.mjs";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
@@ -35,7 +36,13 @@ const Scrollbar = styled('div', {
   '&:hover': {
     zIndex: 70
   },
-  '--size': scrollbarSizeCssExpression
+  '--size': scrollbarSizeCssExpression,
+  // [iOS-scrollbar-swap]
+  // On iOS, native scrollbars of the `GridVirtualScroller` are shown instead,
+  // so hide these to avoid a duplicate thumb.
+  [iOSMediaQuery]: {
+    display: 'none'
+  }
 });
 const ScrollbarVertical = styled(Scrollbar, {
   slot: 'internal'

package/components/virtualization/GridVirtualScroller.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _platform = require("@mui/x-internals/platform");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _xVirtualizer = require("@mui/x-virtualizer");
 var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
@@ -66,6 +67,17 @@ const Scroller = (0, _styles.styled)('div', {
   '&::-webkit-scrollbar': {
     display: 'none' /* Safari and Chrome */
   },
+  // [iOS-scrollbar-swap]
+  // On iOS, virtual scrollbars do not show a thumb unless the user scrolls the element directly:
+  // https://github.com/mui/mui-x/issues/22386
+  // So keep this scroller's own native scrollbars and hide the ones in `GridVirtualScrollbar`
+  // instead to avoid a duplicate thumb.
+  [_platform.iOSMediaQuery]: {
+    scrollbarWidth: 'auto',
+    '&::-webkit-scrollbar': {
+      display: 'block'
+    }
+  },
   '@media print': {
     overflow: 'hidden'
   },

package/components/virtualization/GridVirtualScroller.mjs

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
+import { iOSMediaQuery } from '@mui/x-internals/platform';
 import clsx from 'clsx';
 import { LayoutDataGrid, Virtualization } from '@mui/x-virtualizer';
 import { gridHasBottomFillerSelector, gridHasScrollXSelector, gridHasScrollYSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.mjs";
@@ -58,6 +59,17 @@ const Scroller = styled('div', {
   '&::-webkit-scrollbar': {
     display: 'none' /* Safari and Chrome */
   },
+  // [iOS-scrollbar-swap]
+  // On iOS, virtual scrollbars do not show a thumb unless the user scrolls the element directly:
+  // https://github.com/mui/mui-x/issues/22386
+  // So keep this scroller's own native scrollbars and hide the ones in `GridVirtualScrollbar`
+  // instead to avoid a duplicate thumb.
+  [iOSMediaQuery]: {
+    scrollbarWidth: 'auto',
+    '&::-webkit-scrollbar': {
+      display: 'block'
+    }
+  },
   '@media print': {
     overflow: 'hidden'
   },

package/components/virtualization/GridVirtualScrollerContent.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/system';
+import type { SxProps, Theme } from '@mui/system';
 declare const GridVirtualScrollerContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 }> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {

package/components/virtualization/GridVirtualScrollerContent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/system';
+import type { SxProps, Theme } from '@mui/system';
 declare const GridVirtualScrollerContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 }> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {

package/components/virtualization/GridVirtualScrollerRenderZone.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/system';
+import type { SxProps, Theme } from '@mui/system';
 declare const GridVirtualScrollerRenderZone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 }> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {

package/components/virtualization/GridVirtualScrollerRenderZone.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type SxProps, type Theme } from '@mui/system';
+import type { SxProps, Theme } from '@mui/system';
 declare const GridVirtualScrollerRenderZone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 }> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {

package/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.js

@@ -10,7 +10,13 @@ var React = _interopRequireWildcard(require("react"));
 var _useFirstRender = require("../../utils/useFirstRender");
 const useGridRegisterStrategyProcessor = (apiRef, strategyName, group, processor) => {
   const registerPreProcessor = React.useCallback(() => {
-    apiRef.current.registerStrategyProcessor(strategyName, group, processor);
+    // NOTE: the unregister fn is intentionally discarded. Unlike pipe processors
+    // (which are additive), a strategy processor is required for as long as its
+    // strategy is active — `applyStrategyProcessor` throws if the active strategy's
+    // processor is missing — so it must outlive the registering component. The cache
+    // keeps a single entry per (processor, strategy) and is reclaimed with the grid
+    // api, so nothing leaks; `void` documents the deliberate discard.
+    void apiRef.current.registerStrategyProcessor(strategyName, group, processor);
   }, [apiRef, processor, group, strategyName]);
   (0, _useFirstRender.useFirstRender)(() => {
     registerPreProcessor();

package/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.mjs

@@ -4,7 +4,13 @@ import * as React from 'react';
 import { useFirstRender } from "../../utils/useFirstRender.mjs";
 export const useGridRegisterStrategyProcessor = (apiRef, strategyName, group, processor) => {
   const registerPreProcessor = React.useCallback(() => {
-    apiRef.current.registerStrategyProcessor(strategyName, group, processor);
+    // NOTE: the unregister fn is intentionally discarded. Unlike pipe processors
+    // (which are additive), a strategy processor is required for as long as its
+    // strategy is active — `applyStrategyProcessor` throws if the active strategy's
+    // processor is missing — so it must outlive the registering component. The cache
+    // keeps a single entry per (processor, strategy) and is reclaimed with the grid
+    // api, so nothing leaks; `void` documents the deliberate discard.
+    void apiRef.current.registerStrategyProcessor(strategyName, group, processor);
   }, [apiRef, processor, group, strategyName]);
   useFirstRender(() => {
     registerPreProcessor();

package/hooks/features/columnGrouping/gridColumnGroupsUtils.d.mts

@@ -1,4 +1,4 @@
-import { type GridColumnGroupingModel, type GridColumnNode, type GridColumnGroup } from "../../../models/gridColumnGrouping.mjs";
+import type { GridColumnGroupingModel, GridColumnNode, GridColumnGroup } from "../../../models/gridColumnGrouping.mjs";
 import type { GridColDef } from "../../../models/colDef/index.mjs";
 import type { GridColumnGroupLookup, GridGroupingStructure } from "./gridColumnGroupsInterfaces.mjs";
 type UnwrappedGroupingModel = {

package/hooks/features/columnGrouping/gridColumnGroupsUtils.d.ts

@@ -1,4 +1,4 @@
-import { type GridColumnGroupingModel, type GridColumnNode, type GridColumnGroup } from "../../../models/gridColumnGrouping.js";
+import type { GridColumnGroupingModel, GridColumnNode, GridColumnGroup } from "../../../models/gridColumnGrouping.js";
 import type { GridColDef } from "../../../models/colDef/index.js";
 import type { GridColumnGroupLookup, GridGroupingStructure } from "./gridColumnGroupsInterfaces.js";
 type UnwrappedGroupingModel = {

package/hooks/features/columnHeaders/useGridColumnHeaders.d.mts

@@ -6,7 +6,8 @@ import type { GridSortColumnLookup } from "../sorting/index.mjs";
 import type { GridFilterActiveItemsLookup } from "../filter/index.mjs";
 import type { GridColumnGroupIdentifier, GridColumnIdentifier } from "../focus/index.mjs";
 import type { GridColumnMenuState } from "../columnMenu/index.mjs";
-import { type GridColumnVisibilityModel, gridColumnPositionsSelector } from "../columns/index.mjs";
+import { gridColumnPositionsSelector } from "../columns/index.mjs";
+import type { GridColumnVisibilityModel } from "../columns/index.mjs";
 import type { GridGroupingStructure } from "../columnGrouping/gridColumnGroupsInterfaces.mjs";
 import { PinnedColumnPosition } from "../../../internals/constants.mjs";
 export interface UseGridColumnHeadersProps {

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -6,7 +6,8 @@ import type { GridSortColumnLookup } from "../sorting/index.js";
 import type { GridFilterActiveItemsLookup } from "../filter/index.js";
 import type { GridColumnGroupIdentifier, GridColumnIdentifier } from "../focus/index.js";
 import type { GridColumnMenuState } from "../columnMenu/index.js";
-import { type GridColumnVisibilityModel, gridColumnPositionsSelector } from "../columns/index.js";
+import { gridColumnPositionsSelector } from "../columns/index.js";
+import type { GridColumnVisibilityModel } from "../columns/index.js";
 import type { GridGroupingStructure } from "../columnGrouping/gridColumnGroupsInterfaces.js";
 import { PinnedColumnPosition } from "../../../internals/constants.js";
 export interface UseGridColumnHeadersProps {

package/hooks/features/columnResize/useGridColumnResize.js

@@ -25,7 +25,30 @@ var _gridColumnsInterfaces = require("../columns/gridColumnsInterfaces");
 var _columns = require("../columns");
 var _dimensions = require("../dimensions");
 var _headerFiltering = require("../headerFiltering");
+var _pagination = require("../pagination");
 var _columnResizeSelector = require("./columnResizeSelector");
+function isRenderContextReadyForAutosizeOnMount(apiRef) {
+  const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef);
+  if (!dimensions.isReady) {
+    return false;
+  }
+  const {
+    rows
+  } = (0, _pagination.gridVisibleRowsSelector)(apiRef);
+  if (rows.length === 0) {
+    return true;
+  }
+  const renderContext = (0, _virtualization.gridRenderContextSelector)(apiRef);
+  if (renderContext.lastRowIndex <= renderContext.firstRowIndex) {
+    return false;
+  }
+
+  // If all rows fit in the viewport, wait for them all; otherwise we can only measure the rendered rows.
+  if (!dimensions.hasScrollY) {
+    return renderContext.firstRowIndex === 0 && renderContext.lastRowIndex >= rows.length;
+  }
+  return true;
+}
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -589,10 +612,41 @@ const useGridColumnResize = (apiRef, props) => {
   React.useEffect(() => stopListening, [stopListening]);
   (0, _utils.useOnMount)(() => {
     if (props.autosizeOnMount) {
-      Promise.resolve().then(() => {
+      let frameHandle;
+      let unsubscribeStateChange;
+      let unsubscribeRenderedRowsIntervalChange;
+      const cleanupListeners = () => {
+        unsubscribeStateChange?.();
+        unsubscribeRenderedRowsIntervalChange?.();
+        unsubscribeStateChange = undefined;
+        unsubscribeRenderedRowsIntervalChange = undefined;
+      };
+      const runAutosize = () => {
+        frameHandle = undefined;
+        cleanupListeners();
         apiRef.current.autosizeColumns(props.autosizeOptions);
-      });
+      };
+      const scheduleAutosize = () => {
+        if (frameHandle === undefined) {
+          frameHandle = requestAnimationFrame(runAutosize);
+        }
+      };
+      const checkRenderContext = () => {
+        if (isRenderContextReadyForAutosizeOnMount(apiRef)) {
+          scheduleAutosize();
+        }
+      };
+      unsubscribeStateChange = apiRef.current.subscribeEvent('stateChange', checkRenderContext);
+      unsubscribeRenderedRowsIntervalChange = apiRef.current.subscribeEvent('renderedRowsIntervalChange', checkRenderContext);
+      checkRenderContext();
+      return () => {
+        cleanupListeners();
+        if (frameHandle !== undefined) {
+          cancelAnimationFrame(frameHandle);
+        }
+      };
     }
+    return undefined;
   });
   (0, _utils.useGridNativeEventListener)(apiRef, () => apiRef.current.columnHeadersContainerRef?.current, 'touchstart', handleTouchStart, {
     passive: true

package/hooks/features/columnResize/useGridColumnResize.mjs

@@ -10,7 +10,7 @@ import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterC
 import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from "./gridColumnResizeApi.mjs";
 import { gridClasses } from "../../../constants/gridClasses.mjs";
 import { useGridEvent, useGridApiMethod, useGridEventPriority, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from "../../utils/index.mjs";
-import { gridVirtualizationColumnEnabledSelector } from "../virtualization/index.mjs";
+import { gridRenderContextSelector, gridVirtualizationColumnEnabledSelector } from "../virtualization/index.mjs";
 import { createControllablePromise } from "../../../utils/createControllablePromise.mjs";
 import { clamp } from "../../../utils/utils.mjs";
 import { useTimeout } from "../../utils/useTimeout.mjs";
@@ -18,7 +18,30 @@ import { GridPinnedColumnPosition } from "../columns/gridColumnsInterfaces.mjs";
 import { gridColumnsStateSelector } from "../columns/index.mjs";
 import { gridDimensionsSelector } from "../dimensions/index.mjs";
 import { gridHeaderFilteringEnabledSelector } from "../headerFiltering/index.mjs";
+import { gridVisibleRowsSelector } from "../pagination/index.mjs";
 import { gridResizingColumnFieldSelector } from "./columnResizeSelector.mjs";
+function isRenderContextReadyForAutosizeOnMount(apiRef) {
+  const dimensions = gridDimensionsSelector(apiRef);
+  if (!dimensions.isReady) {
+    return false;
+  }
+  const {
+    rows
+  } = gridVisibleRowsSelector(apiRef);
+  if (rows.length === 0) {
+    return true;
+  }
+  const renderContext = gridRenderContextSelector(apiRef);
+  if (renderContext.lastRowIndex <= renderContext.firstRowIndex) {
+    return false;
+  }
+
+  // If all rows fit in the viewport, wait for them all; otherwise we can only measure the rendered rows.
+  if (!dimensions.hasScrollY) {
+    return renderContext.firstRowIndex === 0 && renderContext.lastRowIndex >= rows.length;
+  }
+  return true;
+}
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -581,10 +604,41 @@ export const useGridColumnResize = (apiRef, props) => {
   React.useEffect(() => stopListening, [stopListening]);
   useOnMount(() => {
     if (props.autosizeOnMount) {
-      Promise.resolve().then(() => {
+      let frameHandle;
+      let unsubscribeStateChange;
+      let unsubscribeRenderedRowsIntervalChange;
+      const cleanupListeners = () => {
+        unsubscribeStateChange?.();
+        unsubscribeRenderedRowsIntervalChange?.();
+        unsubscribeStateChange = undefined;
+        unsubscribeRenderedRowsIntervalChange = undefined;
+      };
+      const runAutosize = () => {
+        frameHandle = undefined;
+        cleanupListeners();
         apiRef.current.autosizeColumns(props.autosizeOptions);
-      });
+      };
+      const scheduleAutosize = () => {
+        if (frameHandle === undefined) {
+          frameHandle = requestAnimationFrame(runAutosize);
+        }
+      };
+      const checkRenderContext = () => {
+        if (isRenderContextReadyForAutosizeOnMount(apiRef)) {
+          scheduleAutosize();
+        }
+      };
+      unsubscribeStateChange = apiRef.current.subscribeEvent('stateChange', checkRenderContext);
+      unsubscribeRenderedRowsIntervalChange = apiRef.current.subscribeEvent('renderedRowsIntervalChange', checkRenderContext);
+      checkRenderContext();
+      return () => {
+        cleanupListeners();
+        if (frameHandle !== undefined) {
+          cancelAnimationFrame(frameHandle);
+        }
+      };
     }
+    return undefined;
   });
   useGridNativeEventListener(apiRef, () => apiRef.current.columnHeadersContainerRef?.current, 'touchstart', handleTouchStart, {
     passive: true

package/hooks/features/columns/gridColumnsSelector.d.mts

@@ -1,5 +1,5 @@
 import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
-import { type GridColumnLookup, type GridPinnedColumnFields } from "./gridColumnsInterfaces.mjs";
+import type { GridColumnLookup, GridPinnedColumnFields } from "./gridColumnsInterfaces.mjs";
 /**
  * Get the columns state
  * @category Columns

package/hooks/features/columns/gridColumnsSelector.d.ts

@@ -1,5 +1,5 @@
 import type { GridStateCommunity } from "../../../models/gridStateCommunity.js";
-import { type GridColumnLookup, type GridPinnedColumnFields } from "./gridColumnsInterfaces.js";
+import type { GridColumnLookup, GridPinnedColumnFields } from "./gridColumnsInterfaces.js";
 /**
  * Get the columns state
  * @category Columns

package/hooks/features/dimensions/useGridDimensions.js

@@ -10,6 +10,7 @@ exports.dimensionsStateInitializer = void 0;
 exports.useGridDimensions = useGridDimensions;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _platform = require("@base-ui/utils/platform");
 var _store = require("@mui/x-internals/store");
 var _useGridEvent = require("../../utils/useGridEvent");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
@@ -22,7 +23,6 @@ var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
 var _dataGridPropsDefaultValues = require("../../../constants/dataGridPropsDefaultValues");
 var _roundToDecimalPlaces = require("../../../utils/roundToDecimalPlaces");
-var _isJSDOM = require("../../../utils/isJSDOM");
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -96,11 +96,11 @@ function useGridDimensions(apiRef, props) {
       if (!getRootDimensions().isReady) {
         return;
       }
-      if (size.height === 0 && !errorShown.current && !props.autoHeight && !_isJSDOM.isJSDOM) {
+      if (size.height === 0 && !errorShown.current && !props.autoHeight && !_platform.platform.env.jsdom) {
         logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
         errorShown.current = true;
       }
-      if (size.width === 0 && !errorShown.current && !_isJSDOM.isJSDOM) {
+      if (size.width === 0 && !errorShown.current && !_platform.platform.env.jsdom) {
         logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
         errorShown.current = true;
       }

package/hooks/features/dimensions/useGridDimensions.mjs

@@ -2,6 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { platform } from '@base-ui/utils/platform';
 import { useStoreEffect } from '@mui/x-internals/store';
 import { useGridEventPriority } from "../../utils/useGridEvent.mjs";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.mjs";
@@ -14,7 +15,6 @@ import { getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.mjs";
 import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.mjs";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.mjs";
 import { roundToDecimalPlaces } from "../../../utils/roundToDecimalPlaces.mjs";
-import { isJSDOM } from "../../../utils/isJSDOM.mjs";
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -87,11 +87,11 @@ export function useGridDimensions(apiRef, props) {
       if (!getRootDimensions().isReady) {
         return;
       }
-      if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
+      if (size.height === 0 && !errorShown.current && !props.autoHeight && !platform.env.jsdom) {
         logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
         errorShown.current = true;
       }
-      if (size.width === 0 && !errorShown.current && !isJSDOM) {
+      if (size.width === 0 && !errorShown.current && !platform.env.jsdom) {
         logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
         errorShown.current = true;
       }

package/hooks/features/editing/gridEditingSelectors.d.mts

@@ -1,6 +1,6 @@
 import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
 import type { GridRowId } from "../../../models/gridRows.mjs";
-import { type GridEditMode } from "../../../models/gridEditRowModel.mjs";
+import type { GridEditMode } from "../../../models/gridEditRowModel.mjs";
 /**
  * Select the row editing state.
  */

package/hooks/features/editing/gridEditingSelectors.d.ts

@@ -1,6 +1,6 @@
 import type { GridStateCommunity } from "../../../models/gridStateCommunity.js";
 import type { GridRowId } from "../../../models/gridRows.js";
-import { type GridEditMode } from "../../../models/gridEditRowModel.js";
+import type { GridEditMode } from "../../../models/gridEditRowModel.js";
 /**
  * Select the row editing state.
  */

package/hooks/features/editing/gridEditingSelectors.mjs

@@ -1,6 +1,5 @@
 import { createSelector, createRootSelector } from "../../../utils/createSelector.mjs";
 import { GridEditModes } from "../../../models/gridEditRowModel.mjs";
-
 /**
  * Select the row editing state.
  */

package/hooks/features/editing/utils.d.mts

@@ -1,2 +1,2 @@
 import type { GridColDef } from "../../../models/colDef/gridColDef.mjs";
-export declare const getDefaultCellValue: (colDef: GridColDef) => false | "" | null | undefined;
+export declare const getDefaultCellValue: (colDef: GridColDef) => false | "" | undefined;

package/hooks/features/editing/utils.d.ts

@@ -1,2 +1,2 @@
 import type { GridColDef } from "../../../models/colDef/gridColDef.js";
-export declare const getDefaultCellValue: (colDef: GridColDef) => false | "" | null | undefined;
+export declare const getDefaultCellValue: (colDef: GridColDef) => false | "" | undefined;

package/hooks/features/editing/utils.js

@@ -13,7 +13,7 @@ const getDefaultCellValue = colDef => {
     case 'number':
       return undefined;
     case 'singleSelect':
-      return null;
+      return '';
     case 'string':
     default:
       return '';

package/hooks/features/editing/utils.mjs

@@ -7,7 +7,7 @@ export const getDefaultCellValue = colDef => {
     case 'number':
       return undefined;
     case 'singleSelect':
-      return null;
+      return '';
     case 'string':
     default:
       return '';

package/hooks/features/filter/gridFilterState.d.mts

@@ -1,4 +1,4 @@
-import { type GridFilterItem } from "../../../models/gridFilterItem.mjs";
+import type { GridFilterItem } from "../../../models/gridFilterItem.mjs";
 import type { GridFilterModel } from "../../../models/gridFilterModel.mjs";
 import type { GridRowId, GridRowModel, GridValidRowModel } from "../../../models/gridRows.mjs";
 import type { GridColDef } from "../../../models/colDef/index.mjs";

package/hooks/features/filter/gridFilterState.d.ts

@@ -1,4 +1,4 @@
-import { type GridFilterItem } from "../../../models/gridFilterItem.js";
+import type { GridFilterItem } from "../../../models/gridFilterItem.js";
 import type { GridFilterModel } from "../../../models/gridFilterModel.js";
 import type { GridRowId, GridRowModel, GridValidRowModel } from "../../../models/gridRows.js";
 import type { GridColDef } from "../../../models/colDef/index.js";

package/hooks/features/filter/gridFilterUtils.d.mts

@@ -1,8 +1,8 @@
 import type { RefObject } from '@mui/x-internals/types';
-import { type GridColDef, type GridFilterItem, type GridFilterModel, type GridRowModel } from "../../../models/index.mjs";
+import type { GridColDef, GridFilterItem, GridFilterModel, GridRowModel } from "../../../models/index.mjs";
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
 import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
-import { type GridAggregatedFilterItemApplier, type GridFilterItemResult, type GridQuickFilterValueResult } from "./gridFilterState.mjs";
+import type { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterValueResult } from "./gridFilterState.mjs";
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.

package/hooks/features/filter/gridFilterUtils.d.ts

@@ -1,8 +1,8 @@
 import type { RefObject } from '@mui/x-internals/types';
-import { type GridColDef, type GridFilterItem, type GridFilterModel, type GridRowModel } from "../../../models/index.js";
+import type { GridColDef, GridFilterItem, GridFilterModel, GridRowModel } from "../../../models/index.js";
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import type { GridStateCommunity } from "../../../models/gridStateCommunity.js";
-import { type GridAggregatedFilterItemApplier, type GridFilterItemResult, type GridQuickFilterValueResult } from "./gridFilterState.js";
+import type { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterValueResult } from "./gridFilterState.js";
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.

package/hooks/features/focus/useGridFocus.js

@@ -18,7 +18,7 @@ var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridEvent = require("../../utils/useGridEvent");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
 var _gridFocusStateSelector = require("./gridFocusStateSelector");
-var _doesSupportPreventScroll = require("../../../utils/doesSupportPreventScroll");
+var _focusElement = require("../../../utils/focusElement");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _utils = require("../../../utils/utils");
@@ -87,15 +87,7 @@ const useGridFocus = (apiRef, props) => {
       if (cellElement.contains(doc.activeElement)) {
         return;
       }
-      if ((0, _doesSupportPreventScroll.doesSupportPreventScroll)()) {
-        cellElement.focus({
-          preventScroll: true
-        });
-      } else {
-        const scrollPosition = apiRef.current.getScrollPosition();
-        cellElement.focus();
-        apiRef.current.scroll(scrollPosition);
-      }
+      (0, _focusElement.focusElement)(cellElement, apiRef);
       return;
     }
     apiRef.current.setState(state => {

package/hooks/features/focus/useGridFocus.mjs

@@ -11,7 +11,7 @@ import { useGridLogger } from "../../utils/useGridLogger.mjs";
 import { useGridEvent } from "../../utils/useGridEvent.mjs";
 import { isNavigationKey, isPasteShortcut } from "../../../utils/keyboardUtils.mjs";
 import { gridFocusCellSelector, gridFocusColumnGroupHeaderSelector } from "./gridFocusStateSelector.mjs";
-import { doesSupportPreventScroll } from "../../../utils/doesSupportPreventScroll.mjs";
+import { focusElement } from "../../../utils/focusElement.mjs";
 import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.mjs";
 import { getVisibleRows } from "../../utils/useGridVisibleRows.mjs";
 import { clamp } from "../../../utils/utils.mjs";
@@ -79,15 +79,7 @@ export const useGridFocus = (apiRef, props) => {
       if (cellElement.contains(doc.activeElement)) {
         return;
       }
-      if (doesSupportPreventScroll()) {
-        cellElement.focus({
-          preventScroll: true
-        });
-      } else {
-        const scrollPosition = apiRef.current.getScrollPosition();
-        cellElement.focus();
-        apiRef.current.scroll(scrollPosition);
-      }
+      focusElement(cellElement, apiRef);
       return;
     }
     apiRef.current.setState(state => {