@mui/x-data-grid 8.29.1 → 8.29.3

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 _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
 var _rows = require("../../hooks/features/rows");
 var _GridScrollArea = require("../GridScrollArea");
@@ -64,6 +65,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 { gridHasBottomFillerSelector, gridHasScrollXSelector, gridHasScrollYSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.mjs";
 import { gridRowTreeSelector } from "../../hooks/features/rows/index.mjs";
 import { GridScrollArea } from "../GridScrollArea.mjs";
@@ -56,6 +57,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/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/rows/gridRowsUtils.js

@@ -149,7 +149,7 @@ const isAutogeneratedRowNode = rowNode => rowNode.type === 'skeletonRow' || rowN
 exports.isAutogeneratedRowNode = isAutogeneratedRowNode;
 const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows, directChildrenOnly) => {
   const node = tree[parentId];
-  if (node.type !== 'group') {
+  if (node?.type !== 'group') {
     return [];
   }
   const validDescendants = [];

package/hooks/features/rows/gridRowsUtils.mjs

@@ -131,7 +131,7 @@ export const isAutogeneratedRow = row => GRID_ID_AUTOGENERATED in row;
 export const isAutogeneratedRowNode = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
 export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows, directChildrenOnly) => {
   const node = tree[parentId];
-  if (node.type !== 'group') {
+  if (node?.type !== 'group') {
     return [];
   }
   const validDescendants = [];

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.29.1
+ * @mui/x-data-grid v8.29.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.29.1
+ * @mui/x-data-grid v8.29.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.29.1",
+  "version": "8.29.3",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -42,8 +42,8 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-internals": "8.29.0",
-    "@mui/x-virtualizer": "0.4.0"
+    "@mui/x-internals": "8.29.3",
+    "@mui/x-virtualizer": "0.4.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/components/toolbarV8/ToolbarContext.d.mts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-export interface ToolbarContextValue {
-  focusableItemId: string | null;
-  registerItem: (id: string, ref: React.RefObject<HTMLButtonElement | null>) => void;
-  unregisterItem: (id: string) => void;
-  onItemKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-  onItemFocus: (id: string) => void;
-  onItemDisabled: (id: string, disabled: boolean) => void;
-}
-export declare const ToolbarContext: React.Context<ToolbarContextValue | undefined>;
-export declare function useToolbarContext(): ToolbarContextValue;

package/components/toolbarV8/ToolbarContext.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-export interface ToolbarContextValue {
-  focusableItemId: string | null;
-  registerItem: (id: string, ref: React.RefObject<HTMLButtonElement | null>) => void;
-  unregisterItem: (id: string) => void;
-  onItemKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-  onItemFocus: (id: string) => void;
-  onItemDisabled: (id: string, disabled: boolean) => void;
-}
-export declare const ToolbarContext: React.Context<ToolbarContextValue | undefined>;
-export declare function useToolbarContext(): ToolbarContextValue;

package/components/toolbarV8/ToolbarContext.js

@@ -1,19 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToolbarContext = void 0;
-exports.useToolbarContext = useToolbarContext;
-var React = _interopRequireWildcard(require("react"));
-const ToolbarContext = exports.ToolbarContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ToolbarContext.displayName = "ToolbarContext";
-function useToolbarContext() {
-  const context = React.useContext(ToolbarContext);
-  if (context === undefined) {
-    throw new Error('MUI X: Missing context. Toolbar subcomponents must be placed within a <Toolbar /> component.');
-  }
-  return context;
-}

package/components/toolbarV8/ToolbarContext.mjs

@@ -1,12 +0,0 @@
-'use client';
-
-import * as React from 'react';
-export const ToolbarContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ToolbarContext.displayName = "ToolbarContext";
-export function useToolbarContext() {
-  const context = React.useContext(ToolbarContext);
-  if (context === undefined) {
-    throw new Error('MUI X: Missing context. Toolbar subcomponents must be placed within a <Toolbar /> component.');
-  }
-  return context;
-}

package/components/toolbarV8/utils.d.mts

@@ -1,5 +0,0 @@
-export declare function sortByDocumentPosition(a: {
-  ref: React.RefObject<HTMLButtonElement | null>;
-}, b: {
-  ref: React.RefObject<HTMLButtonElement | null>;
-}): 0 | 1 | -1;

package/components/toolbarV8/utils.d.ts

@@ -1,5 +0,0 @@
-export declare function sortByDocumentPosition(a: {
-  ref: React.RefObject<HTMLButtonElement | null>;
-}, b: {
-  ref: React.RefObject<HTMLButtonElement | null>;
-}): 0 | 1 | -1;

package/components/toolbarV8/utils.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sortByDocumentPosition = sortByDocumentPosition;
-/* eslint-disable no-bitwise */
-function sortByDocumentPosition(a, b) {
-  if (!a.ref.current || !b.ref.current) {
-    return 0;
-  }
-  const position = a.ref.current.compareDocumentPosition(b.ref.current);
-  if (!position) {
-    return 0;
-  }
-  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
-    return -1;
-  }
-  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
-    return 1;
-  }
-  return 0;
-}

package/components/toolbarV8/utils.mjs

@@ -1,17 +0,0 @@
-/* eslint-disable no-bitwise */
-export function sortByDocumentPosition(a, b) {
-  if (!a.ref.current || !b.ref.current) {
-    return 0;
-  }
-  const position = a.ref.current.compareDocumentPosition(b.ref.current);
-  if (!position) {
-    return 0;
-  }
-  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
-    return -1;
-  }
-  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
-    return 1;
-  }
-  return 0;
-}