@mui/x-data-grid 8.29.1 → 8.29.3

package/components/toolbarV8/Toolbar.js

@@ -16,11 +16,10 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _clsx = _interopRequireDefault(require("clsx"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
 var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
-var _ToolbarContext = require("./ToolbarContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className"];
 const useUtilityClasses = ownerState => {
@@ -67,127 +66,6 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  const [focusableItemId, setFocusableItemId] = React.useState(null);
-  const [items, setItems] = React.useState([]);
-  const getSortedItems = React.useCallback(() => items.sort(_utils.sortByDocumentPosition), [items]);
-  const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
-    let index = startIndex;
-    const sortedItems = getSortedItems();
-    const itemCount = sortedItems.length;
-
-    // Look for enabled items in the specified direction
-    for (let i = 0; i < itemCount; i += 1) {
-      index += step;
-
-      // Handle wrapping around the ends
-      if (index >= itemCount) {
-        if (!wrap) {
-          return -1;
-        }
-        index = 0;
-      } else if (index < 0) {
-        if (!wrap) {
-          return -1;
-        }
-        index = itemCount - 1;
-      }
-
-      // Return if we found an enabled item
-      if (!sortedItems[index].ref.current?.disabled && sortedItems[index].ref.current?.ariaDisabled !== 'true') {
-        return index;
-      }
-    }
-
-    // If we've checked all items and found none enabled
-    return -1;
-  }, [getSortedItems]);
-  const registerItem = React.useCallback((id, itemRef) => {
-    setItems(prevItems => [...prevItems, {
-      id,
-      ref: itemRef
-    }]);
-  }, []);
-  const unregisterItem = React.useCallback(id => {
-    setItems(prevItems => prevItems.filter(i => i.id !== id));
-  }, []);
-  const onItemKeyDown = React.useCallback(event => {
-    if (!focusableItemId) {
-      return;
-    }
-    const sortedItems = getSortedItems();
-    const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
-    let newIndex = -1;
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      newIndex = findEnabledItem(focusableItemIndex, 1);
-    } else if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      newIndex = findEnabledItem(focusableItemIndex, -1);
-    } else if (event.key === 'Home') {
-      event.preventDefault();
-      newIndex = findEnabledItem(-1, 1, false);
-    } else if (event.key === 'End') {
-      event.preventDefault();
-      newIndex = findEnabledItem(sortedItems.length, -1, false);
-    }
-
-    // TODO: Check why this is necessary
-    if (newIndex >= 0 && newIndex < sortedItems.length) {
-      const item = sortedItems[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [getSortedItems, focusableItemId, findEnabledItem]);
-  const onItemFocus = React.useCallback(id => {
-    if (focusableItemId !== id) {
-      setFocusableItemId(id);
-    }
-  }, [focusableItemId, setFocusableItemId]);
-  const onItemDisabled = React.useCallback(id => {
-    const sortedItems = getSortedItems();
-    const currentIndex = sortedItems.findIndex(item => item.id === id);
-    const newIndex = findEnabledItem(currentIndex, 1);
-    if (newIndex >= 0 && newIndex < sortedItems.length) {
-      const item = sortedItems[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [getSortedItems, findEnabledItem]);
-  React.useEffect(() => {
-    const sortedItems = getSortedItems();
-    if (sortedItems.length > 0) {
-      // Set initial focusable item
-      if (!focusableItemId) {
-        setFocusableItemId(sortedItems[0].id);
-        return;
-      }
-      const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
-      if (!sortedItems[focusableItemIndex]) {
-        // Last item has been removed from the items array
-        const item = sortedItems[sortedItems.length - 1];
-        if (item) {
-          setFocusableItemId(item.id);
-          item.ref.current?.focus();
-        }
-      } else if (focusableItemIndex === -1) {
-        // Focused item has been removed from the items array
-        const item = sortedItems[focusableItemIndex];
-        if (item) {
-          setFocusableItemId(item.id);
-          item.ref.current?.focus();
-        }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getSortedItems, findEnabledItem]);
-  const contextValue = React.useMemo(() => ({
-    focusableItemId,
-    registerItem,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
   const element = (0, _useComponentRenderer.useComponentRenderer)(ToolbarRoot, render, (0, _extends2.default)({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
@@ -196,8 +74,7 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
   }, other, {
     ref
   }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarContext.ToolbarContext.Provider, {
-    value: contextValue,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarContext.ToolbarContextProvider, {
     children: element
   });
 });

package/components/toolbarV8/Toolbar.mjs

@@ -10,11 +10,10 @@ import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { ToolbarContextProvider } from '@mui/x-internals/ToolbarContext';
 import { vars } from "../../constants/cssVariables.mjs";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
-import { ToolbarContext } from "./ToolbarContext.mjs";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
-import { sortByDocumentPosition } from "./utils.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -60,127 +59,6 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  const [focusableItemId, setFocusableItemId] = React.useState(null);
-  const [items, setItems] = React.useState([]);
-  const getSortedItems = React.useCallback(() => items.sort(sortByDocumentPosition), [items]);
-  const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
-    let index = startIndex;
-    const sortedItems = getSortedItems();
-    const itemCount = sortedItems.length;
-
-    // Look for enabled items in the specified direction
-    for (let i = 0; i < itemCount; i += 1) {
-      index += step;
-
-      // Handle wrapping around the ends
-      if (index >= itemCount) {
-        if (!wrap) {
-          return -1;
-        }
-        index = 0;
-      } else if (index < 0) {
-        if (!wrap) {
-          return -1;
-        }
-        index = itemCount - 1;
-      }
-
-      // Return if we found an enabled item
-      if (!sortedItems[index].ref.current?.disabled && sortedItems[index].ref.current?.ariaDisabled !== 'true') {
-        return index;
-      }
-    }
-
-    // If we've checked all items and found none enabled
-    return -1;
-  }, [getSortedItems]);
-  const registerItem = React.useCallback((id, itemRef) => {
-    setItems(prevItems => [...prevItems, {
-      id,
-      ref: itemRef
-    }]);
-  }, []);
-  const unregisterItem = React.useCallback(id => {
-    setItems(prevItems => prevItems.filter(i => i.id !== id));
-  }, []);
-  const onItemKeyDown = React.useCallback(event => {
-    if (!focusableItemId) {
-      return;
-    }
-    const sortedItems = getSortedItems();
-    const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
-    let newIndex = -1;
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      newIndex = findEnabledItem(focusableItemIndex, 1);
-    } else if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      newIndex = findEnabledItem(focusableItemIndex, -1);
-    } else if (event.key === 'Home') {
-      event.preventDefault();
-      newIndex = findEnabledItem(-1, 1, false);
-    } else if (event.key === 'End') {
-      event.preventDefault();
-      newIndex = findEnabledItem(sortedItems.length, -1, false);
-    }
-
-    // TODO: Check why this is necessary
-    if (newIndex >= 0 && newIndex < sortedItems.length) {
-      const item = sortedItems[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [getSortedItems, focusableItemId, findEnabledItem]);
-  const onItemFocus = React.useCallback(id => {
-    if (focusableItemId !== id) {
-      setFocusableItemId(id);
-    }
-  }, [focusableItemId, setFocusableItemId]);
-  const onItemDisabled = React.useCallback(id => {
-    const sortedItems = getSortedItems();
-    const currentIndex = sortedItems.findIndex(item => item.id === id);
-    const newIndex = findEnabledItem(currentIndex, 1);
-    if (newIndex >= 0 && newIndex < sortedItems.length) {
-      const item = sortedItems[newIndex];
-      setFocusableItemId(item.id);
-      item.ref.current?.focus();
-    }
-  }, [getSortedItems, findEnabledItem]);
-  React.useEffect(() => {
-    const sortedItems = getSortedItems();
-    if (sortedItems.length > 0) {
-      // Set initial focusable item
-      if (!focusableItemId) {
-        setFocusableItemId(sortedItems[0].id);
-        return;
-      }
-      const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
-      if (!sortedItems[focusableItemIndex]) {
-        // Last item has been removed from the items array
-        const item = sortedItems[sortedItems.length - 1];
-        if (item) {
-          setFocusableItemId(item.id);
-          item.ref.current?.focus();
-        }
-      } else if (focusableItemIndex === -1) {
-        // Focused item has been removed from the items array
-        const item = sortedItems[focusableItemIndex];
-        if (item) {
-          setFocusableItemId(item.id);
-          item.ref.current?.focus();
-        }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getSortedItems, findEnabledItem]);
-  const contextValue = React.useMemo(() => ({
-    focusableItemId,
-    registerItem,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
   const element = useComponentRenderer(ToolbarRoot, render, _extends({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
@@ -189,8 +67,7 @@ const Toolbar = forwardRef(function Toolbar(props, ref) {
   }, other, {
     ref
   }));
-  return /*#__PURE__*/_jsx(ToolbarContext.Provider, {
-    value: contextValue,
+  return /*#__PURE__*/_jsx(ToolbarContextProvider, {
     children: element
   });
 });

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

@@ -12,13 +12,13 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _ToolbarContext = require("./ToolbarContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
+const _excluded = ["render", "onKeyDown", "onFocus", "onBlur", "disabled", "aria-disabled"],
+  _excluded2 = ["tabIndex"];
 /**
  * A button for performing actions from the toolbar.
  * It renders the `baseIconButton` slot.
@@ -33,59 +33,20 @@ const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"
  */
 const ToolbarButton = exports.ToolbarButton = (0, _forwardRef.forwardRef)(function ToolbarButton(props, ref) {
   const {
-      render,
-      onKeyDown,
-      onFocus,
-      disabled,
-      'aria-disabled': ariaDisabled
+      render
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const buttonRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(buttonRef, ref);
-  const {
-    focusableItemId,
-    registerItem,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  } = (0, _ToolbarContext.useToolbarContext)();
-  const handleKeyDown = event => {
-    onItemKeyDown(event);
-    onKeyDown?.(event);
-  };
-  const handleFocus = event => {
-    onItemFocus(id);
-    onFocus?.(event);
-  };
-  React.useEffect(() => {
-    registerItem(id, buttonRef);
-    return () => unregisterItem(id);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const previousDisabled = React.useRef(disabled);
-  React.useEffect(() => {
-    if (previousDisabled.current !== disabled && disabled === true) {
-      onItemDisabled(id, disabled);
-    }
-    previousDisabled.current = disabled;
-  }, [disabled, id, onItemDisabled]);
-  const previousAriaDisabled = React.useRef(ariaDisabled);
-  React.useEffect(() => {
-    if (previousAriaDisabled.current !== ariaDisabled && ariaDisabled === true) {
-      onItemDisabled(id, true);
-    }
-    previousAriaDisabled.current = ariaDisabled;
-  }, [ariaDisabled, id, onItemDisabled]);
+  const _useRegisterToolbarBu = (0, _ToolbarContext.useRegisterToolbarButton)(props, buttonRef),
+    {
+      tabIndex
+    } = _useRegisterToolbarBu,
+    toolbarButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_useRegisterToolbarBu, _excluded2);
   const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
-    tabIndex: focusableItemId === id ? 0 : -1
-  }, other, {
-    disabled,
-    'aria-disabled': ariaDisabled,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
+    tabIndex
+  }, other, toolbarButtonProps, {
     ref: handleRef
   }));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {

package/components/toolbarV8/ToolbarButton.mjs

@@ -2,15 +2,15 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
+const _excluded = ["render", "onKeyDown", "onFocus", "onBlur", "disabled", "aria-disabled"],
+  _excluded2 = ["tabIndex"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useForkRef from '@mui/utils/useForkRef';
-import useId from '@mui/utils/useId';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { useRegisterToolbarButton } from '@mui/x-internals/ToolbarContext';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
-import { useToolbarContext } from "./ToolbarContext.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button for performing actions from the toolbar.
@@ -26,59 +26,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 const ToolbarButton = forwardRef(function ToolbarButton(props, ref) {
   const {
-      render,
-      onKeyDown,
-      onFocus,
-      disabled,
-      'aria-disabled': ariaDisabled
+      render
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const id = useId();
   const rootProps = useGridRootProps();
   const buttonRef = React.useRef(null);
   const handleRef = useForkRef(buttonRef, ref);
-  const {
-    focusableItemId,
-    registerItem,
-    unregisterItem,
-    onItemKeyDown,
-    onItemFocus,
-    onItemDisabled
-  } = useToolbarContext();
-  const handleKeyDown = event => {
-    onItemKeyDown(event);
-    onKeyDown?.(event);
-  };
-  const handleFocus = event => {
-    onItemFocus(id);
-    onFocus?.(event);
-  };
-  React.useEffect(() => {
-    registerItem(id, buttonRef);
-    return () => unregisterItem(id);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const previousDisabled = React.useRef(disabled);
-  React.useEffect(() => {
-    if (previousDisabled.current !== disabled && disabled === true) {
-      onItemDisabled(id, disabled);
-    }
-    previousDisabled.current = disabled;
-  }, [disabled, id, onItemDisabled]);
-  const previousAriaDisabled = React.useRef(ariaDisabled);
-  React.useEffect(() => {
-    if (previousAriaDisabled.current !== ariaDisabled && ariaDisabled === true) {
-      onItemDisabled(id, true);
-    }
-    previousAriaDisabled.current = ariaDisabled;
-  }, [ariaDisabled, id, onItemDisabled]);
+  const _useRegisterToolbarBu = useRegisterToolbarButton(props, buttonRef),
+    {
+      tabIndex
+    } = _useRegisterToolbarBu,
+    toolbarButtonProps = _objectWithoutPropertiesLoose(_useRegisterToolbarBu, _excluded2);
   const element = useComponentRenderer(rootProps.slots.baseIconButton, render, _extends({}, rootProps.slotProps?.baseIconButton, {
-    tabIndex: focusableItemId === id ? 0 : -1
-  }, other, {
-    disabled,
-    'aria-disabled': ariaDisabled,
-    onKeyDown: handleKeyDown,
-    onFocus: handleFocus,
+    tabIndex
+  }, other, toolbarButtonProps, {
     ref: handleRef
   }));
   return /*#__PURE__*/_jsx(React.Fragment, {

package/components/virtualization/GridVirtualScrollbar.js

@@ -9,11 +9,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.scrollbarSizeCssExpression = exports.ScrollbarCorner = exports.GridVirtualScrollbar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
-var _useOnMount = require("../../hooks/utils/useOnMount");
+var _platform = require("@mui/x-internals/platform");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _hooks = require("../../hooks");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -45,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'
@@ -91,64 +95,16 @@ const ScrollbarCorner = exports.ScrollbarCorner = (0, _styles.styled)(Scrollbar,
 const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forwardRef)(function GridVirtualScrollbar(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const isLocked = React.useRef(false);
-  const lastPosition = React.useRef(0);
-  const scrollbarRef = React.useRef(null);
   const classes = useUtilityClasses(rootProps, props.position);
   const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridDimensionsSelector);
   const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
-  const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
-  const propertyScrollPosition = props.position === 'vertical' ? 'top' : 'left';
   const scrollbarInnerSize = props.position === 'horizontal' ? dimensions.minimumSize.width : dimensions.minimumSize.height - dimensions.headersTotalHeight;
-  const onScrollerScroll = (0, _useEventCallback.default)(() => {
-    const scrollbar = scrollbarRef.current;
-    const scrollPosition = props.scrollPosition.current;
-    if (!scrollbar) {
-      return;
-    }
-    if (scrollPosition[propertyScrollPosition] === lastPosition.current) {
-      return;
-    }
-    lastPosition.current = scrollPosition[propertyScrollPosition];
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    scrollbar[propertyScroll] = props.scrollPosition.current[propertyScrollPosition];
-  });
-  const onScrollbarScroll = (0, _useEventCallback.default)(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
-    const scrollbar = scrollbarRef.current;
-    if (!scrollbar) {
-      return;
-    }
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    scroller[propertyScroll] = scrollbar[propertyScroll];
-  });
-  (0, _useOnMount.useOnMount)(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
-    const scrollbar = scrollbarRef.current;
-    const options = {
-      passive: true
-    };
-    scroller.addEventListener('scroll', onScrollerScroll, options);
-    scrollbar.addEventListener('scroll', onScrollbarScroll, options);
-    return () => {
-      scroller.removeEventListener('scroll', onScrollerScroll, options);
-      scrollbar.removeEventListener('scroll', onScrollbarScroll, options);
-    };
-  });
   const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
   const scrollbarInnerStyle = React.useMemo(() => ({
     [propertyDimension]: `${scrollbarInnerSize}px`
   }), [propertyDimension, scrollbarInnerSize]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
-    ref: (0, _useForkRef.default)(ref, scrollbarRef),
+    ref: ref,
     className: classes.root,
     tabIndex: -1,
     "aria-hidden": "true"

package/components/virtualization/GridVirtualScrollbar.mjs

@@ -2,11 +2,9 @@
 
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useForkRef from '@mui/utils/useForkRef';
 import composeClasses from '@mui/utils/composeClasses';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useOnMount } from "../../hooks/utils/useOnMount.mjs";
+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";
@@ -38,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'
@@ -84,64 +88,16 @@ export const ScrollbarCorner = styled(Scrollbar, {
 const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref) {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
-  const isLocked = React.useRef(false);
-  const lastPosition = React.useRef(0);
-  const scrollbarRef = React.useRef(null);
   const classes = useUtilityClasses(rootProps, props.position);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
-  const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
-  const propertyScrollPosition = props.position === 'vertical' ? 'top' : 'left';
   const scrollbarInnerSize = props.position === 'horizontal' ? dimensions.minimumSize.width : dimensions.minimumSize.height - dimensions.headersTotalHeight;
-  const onScrollerScroll = useEventCallback(() => {
-    const scrollbar = scrollbarRef.current;
-    const scrollPosition = props.scrollPosition.current;
-    if (!scrollbar) {
-      return;
-    }
-    if (scrollPosition[propertyScrollPosition] === lastPosition.current) {
-      return;
-    }
-    lastPosition.current = scrollPosition[propertyScrollPosition];
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    scrollbar[propertyScroll] = props.scrollPosition.current[propertyScrollPosition];
-  });
-  const onScrollbarScroll = useEventCallback(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
-    const scrollbar = scrollbarRef.current;
-    if (!scrollbar) {
-      return;
-    }
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    scroller[propertyScroll] = scrollbar[propertyScroll];
-  });
-  useOnMount(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
-    const scrollbar = scrollbarRef.current;
-    const options = {
-      passive: true
-    };
-    scroller.addEventListener('scroll', onScrollerScroll, options);
-    scrollbar.addEventListener('scroll', onScrollbarScroll, options);
-    return () => {
-      scroller.removeEventListener('scroll', onScrollerScroll, options);
-      scrollbar.removeEventListener('scroll', onScrollbarScroll, options);
-    };
-  });
   const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
   const scrollbarInnerStyle = React.useMemo(() => ({
     [propertyDimension]: `${scrollbarInnerSize}px`
   }), [propertyDimension, scrollbarInnerSize]);
   return /*#__PURE__*/_jsx(Container, {
-    ref: useForkRef(ref, scrollbarRef),
+    ref: ref,
     className: classes.root,
     tabIndex: -1,
     "aria-hidden": "true"