@mui/x-data-grid 8.3.1 → 8.4.0

package/CHANGELOG.md

@@ -5,6 +5,116 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.4.0
+
+_May 21, 2025_
+
+We'd like to offer a big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔺 Support regular [`pyramid` variation in the `<FunnelChart />` component](https://mui.com/x/react-charts/funnel/#pyramid-chart):
+
+  <img width="398" alt="Pyramid funnel chart" src="https://github.com/user-attachments/assets/90ccb221-3a48-4ffa-8878-89c6db16da86" />
+
+- 📚 Documentation improvements
+- 🌎 Improve Icelandic (is-IS) locale on the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@aizerin, @arminmeh, @campmarc, @jyash97, @mapache-salvaje, @noraleonte, @nusr, @ragnarr18, @romgrk, @whereisrmsqhs.
+Following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @rita-codes.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.4.0`
+
+- [DataGrid] Fix content rendering for large rows while using automatic page size (#14737) @campmarc
+- [DataGrid] Fix disabled typography variants crashing grid (#17934) @KenanYusuf
+- [DataGrid] Fix tree data demo crash (#17904) @MBilalShafi
+- [DataGrid] Use `exclude` selection model type if quick filter does not have actual values (#17899) @arminmeh
+- [DataGrid] Fix clipboard copy behavior for cell ranges with empty cells (#16797) @nusr
+- [l10n] Improve Icelandic (is-IS) locale (#17915) @ragnarr18
+
+#### `@mui/x-data-grid-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.4.0`, plus:
+
+- [DataGridPro] Add `aria-expanded` attribute to the master detail toggle button (#17122) @whereisrmsqhs
+- [DataGridPro] Preserve row state during server-side lazy loading (#17743) @arminmeh
+- [DataGridPro] Prevent text selection when reordering rows (#16568) @jyash97
+
+#### `@mui/x-data-grid-premium@8.4.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.4.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.4.0`
+
+- [fields] Ensure fresh `disabled` value is used when focusing or clicking (#17914) @aizerin
+- [fields] Improve the field controlled edition (#17816) @flaviendelangle
+- [pickers] Fix `PickersTextField` overflow (#17942) @noraleonte
+
+#### `@mui/x-date-pickers-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.4.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.4.0`
+
+- [charts] Add grouped axes demo (#17848) @bernardobelchior
+- [charts] Enable tooltip disable portal (#17871) @alexfauquette
+- [charts] Improve performance in scatter chart (#17849) @bernardobelchior
+- [charts] Recreate `isPointInside` less often (#17850) @bernardobelchior
+- [charts] Try fix for flaky `useAnimate` test (#17777) @JCQuintas
+- [charts] Add `isXInside` and `isYInside` (#17911) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.4.0`, plus:
+
+- [charts-pro] Add size for zoom slider (#17736) @bernardobelchior
+- [charts-pro] Add zoom slider tooltip (#17733) @bernardobelchior
+- [charts-pro] Clean and document Heatmap Tooltip (#17933) @alexfauquette
+- [charts-pro] Introduce `Pyramid` chart (#17783) @JCQuintas
+- [charts-pro] Update zoom slider nomenclature (#17938) @bernardobelchior
+- [charts-pro] Fix error when importing rasterizehtml (#17897) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.4.0`
+
+- [TreeView] Add `getItemChildren` prop in `RichTreeView` (#17894) @rita-codes
+- [TreeView] Add a method in the `apiRef` to toggle the editing status of an item (#17768) @rita-codes
+- [TreeView] Add missing sx prop on the Tree Item component (#17930) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.4.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.4.0`.
+
+### Docs
+
+- [docs] Add a recipe for drag and drop row grouping (#17638) @KenanYusuf
+- [docs] Add introductory text to Data Grid component pages (#17902) @KenanYusuf
+- [docs] Refactor embedded CodeSandbox on Data Grid—Quickstart page (#17749) @rita-codes
+- [docs] Remove double border on Data Grid—Quickstart demo (#17932) @rita-codes
+- [docs] Standardize `apiRef` copy (#17776) @mapache-salvaje
+- [docs][DataGrid] Revise server-side data docs (#17007) @mapache-salvaje
+- [docs][DataGrid] Audit and revise the tree data doc (#17650) @mapache-salvaje
+- [docs][pickers] Fix migration guide references to range fields (#17861) @LukasTy
+- [docs][charts] Reorganize the Tooltip documentation (#17917) @alexfauquette
+
+### Core
+
+- [core] refactor: remove manual `displayName` (#17845) @romgrk
+- [code-infra] Document how to use `vitest` cli (#17847) @JCQuintas
+- [code-infra] Increase charts export test timeout (#17909) @JCQuintas
+- [code-infra] Set `isolatedModules=true` in tsconfig (#17781) @JCQuintas
+- [infra] Ensure proper docs preview path resolution (#17863) @LukasTy
+
 ## 8.3.1
 
 _May 14, 2025_

package/DataGrid/DataGrid.js

@@ -57,6 +57,7 @@ const DataGridRaw = (0, _forwardRef.forwardRef)(function DataGrid(inProps, ref)
  * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
  */
 const DataGrid = exports.DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
+if (process.env.NODE_ENV !== "production") DataGrid.displayName = "DataGrid";
 DataGridRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/GridApiContext.js

@@ -8,6 +8,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridApiContext = void 0;
 var React = _interopRequireWildcard(require("react"));
 const GridApiContext = exports.GridApiContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridApiContext.displayName = 'GridApiContext';
-}
+if (process.env.NODE_ENV !== "production") GridApiContext.displayName = "GridApiContext";

package/components/GridColumnUnsortedIcon.js

@@ -21,4 +21,5 @@ const GridColumnUnsortedIcon = exports.GridColumnUnsortedIcon = /*#__PURE__*/Rea
   const [nextSortDirection] = sortingOrder;
   const Icon = nextSortDirection === 'asc' ? rootProps.slots.columnSortedAscendingIcon : rootProps.slots.columnSortedDescendingIcon;
   return Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, (0, _extends2.default)({}, other)) : null;
-});
+});
+if (process.env.NODE_ENV !== "production") GridColumnUnsortedIcon.displayName = "GridColumnUnsortedIcon";

package/components/GridConfigurationContext.js

@@ -8,6 +8,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridConfigurationContext = void 0;
 var React = _interopRequireWildcard(require("react"));
 const GridConfigurationContext = exports.GridConfigurationContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridConfigurationContext.displayName = 'GridConfigurationContext';
-}
+if (process.env.NODE_ENV !== "production") GridConfigurationContext.displayName = "GridConfigurationContext";

package/components/GridRow.js

@@ -253,6 +253,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
       rowNode: rowNode
     }, slotProps?.cell), column.field);
   };
+  if (process.env.NODE_ENV !== "production") getCell.displayName = "getCell";
   const leftCells = pinnedColumns.left.map((column, i) => {
     const indexRelativeToAllColumns = i;
     return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, _constants.PinnedColumnPosition.LEFT);

package/components/cell/GridActionsCell.js

@@ -267,4 +267,5 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   value: _propTypes.default.any
 } : void 0;
 const renderActionsCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridActionsCell, (0, _extends2.default)({}, params));
-exports.renderActionsCell = renderActionsCell;
+exports.renderActionsCell = renderActionsCell;
+if (process.env.NODE_ENV !== "production") renderActionsCell.displayName = "renderActionsCell";

package/components/cell/GridBooleanCell.js

@@ -123,10 +123,12 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
   value: _propTypes.default.any
 } : void 0;
 const GridBooleanCell = exports.GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
+if (process.env.NODE_ENV !== "production") GridBooleanCell.displayName = "GridBooleanCell";
 const renderBooleanCell = params => {
   if (params.field !== _constants.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && (0, _gridRowsUtils.isAutogeneratedRowNode)(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridBooleanCell, (0, _extends2.default)({}, params));
 };
-exports.renderBooleanCell = renderBooleanCell;
+exports.renderBooleanCell = renderBooleanCell;
+if (process.env.NODE_ENV !== "production") renderBooleanCell.displayName = "renderBooleanCell";

package/components/cell/GridEditBooleanCell.js

@@ -145,4 +145,5 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
   value: _propTypes.default.any
 } : void 0;
 const renderEditBooleanCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditBooleanCell, (0, _extends2.default)({}, params));
-exports.renderEditBooleanCell = renderEditBooleanCell;
+exports.renderEditBooleanCell = renderEditBooleanCell;
+if (process.env.NODE_ENV !== "production") renderEditBooleanCell.displayName = "renderEditBooleanCell";

package/components/cell/GridEditDateCell.js

@@ -199,4 +199,5 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   value: _propTypes.default.any
 } : void 0;
 const renderEditDateCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditDateCell, (0, _extends2.default)({}, params));
-exports.renderEditDateCell = renderEditDateCell;
+exports.renderEditDateCell = renderEditDateCell;
+if (process.env.NODE_ENV !== "production") renderEditDateCell.displayName = "renderEditDateCell";

package/components/cell/GridEditInputCell.js

@@ -173,4 +173,5 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   value: _propTypes.default.any
 } : void 0;
 const renderEditInputCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditInputCell, (0, _extends2.default)({}, params));
-exports.renderEditInputCell = renderEditInputCell;
+exports.renderEditInputCell = renderEditInputCell;
+if (process.env.NODE_ENV !== "production") renderEditInputCell.displayName = "renderEditInputCell";

package/components/cell/GridEditSingleSelectCell.js

@@ -195,4 +195,5 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   value: _propTypes.default.any
 } : void 0;
 const renderEditSingleSelectCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditSingleSelectCell, (0, _extends2.default)({}, params));
-exports.renderEditSingleSelectCell = renderEditSingleSelectCell;
+exports.renderEditSingleSelectCell = renderEditSingleSelectCell;
+if (process.env.NODE_ENV !== "production") renderEditSingleSelectCell.displayName = "renderEditSingleSelectCell";

package/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -68,4 +68,5 @@ const ColumnHeaderMenuIcon = exports.ColumnHeaderMenuIcon = /*#__PURE__*/React.m
       }))
     }))
   });
-});
+});
+if (process.env.NODE_ENV !== "production") ColumnHeaderMenuIcon.displayName = "ColumnHeaderMenuIcon";

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -118,7 +118,7 @@ function GridColumnHeaderItem(props) {
     onDragStart: publish('columnHeaderDragStart'),
     onDragEnter: publish('columnHeaderDragEnter'),
     onDragOver: publish('columnHeaderDragOver'),
-    onDragEnd: publish('columnHeaderDragEnd')
+    onDragEndCapture: publish('columnHeaderDragEnd')
   } : {}, [isDraggable, publish]);
   const columnHeaderSeparatorProps = React.useMemo(() => ({
     onMouseDown: publish('columnSeparatorMouseDown'),

package/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -66,6 +66,7 @@ function GridColumnHeaderSeparatorRaw(props) {
   );
 }
 const GridColumnHeaderSeparator = exports.GridColumnHeaderSeparator = /*#__PURE__*/React.memo(GridColumnHeaderSeparatorRaw);
+if (process.env.NODE_ENV !== "production") GridColumnHeaderSeparator.displayName = "GridColumnHeaderSeparator";
 process.env.NODE_ENV !== "production" ? GridColumnHeaderSeparatorRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -20,6 +20,7 @@ function GridColumnHeaderSortIconRaw(props) {
   });
 }
 const GridColumnHeaderSortIcon = exports.GridColumnHeaderSortIcon = /*#__PURE__*/React.memo(GridColumnHeaderSortIconRaw);
+if (process.env.NODE_ENV !== "production") GridColumnHeaderSortIcon.displayName = "GridColumnHeaderSortIcon";
 process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/containers/GridRootStyles.js

@@ -663,7 +663,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         borderTop: 'none'
       }
     },
-    [`&.${_gridClasses.gridClasses['root--disableUserSelection']} .${_gridClasses.gridClasses.cell}`]: {
+    [`&.${_gridClasses.gridClasses['root--disableUserSelection']}`]: {
       userSelect: 'none'
     },
     [`& .${_gridClasses.gridClasses['row--dynamicHeight']} > .${_gridClasses.gridClasses.cell}`]: {

package/components/panel/GridPanelContext.js

@@ -10,6 +10,7 @@ exports.useGridPanelContext = useGridPanelContext;
 var React = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 const GridPanelContext = exports.GridPanelContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") GridPanelContext.displayName = "GridPanelContext";
 function useGridPanelContext() {
   const context = React.useContext(GridPanelContext);
   if (context === undefined) {

package/components/quickFilter/QuickFilterContext.js

@@ -8,6 +8,7 @@ exports.QuickFilterContext = void 0;
 exports.useQuickFilterContext = useQuickFilterContext;
 var React = _interopRequireWildcard(require("react"));
 const QuickFilterContext = exports.QuickFilterContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") QuickFilterContext.displayName = "QuickFilterContext";
 function useQuickFilterContext() {
   const context = React.useContext(QuickFilterContext);
   if (context === undefined) {

package/components/toolbarV8/Toolbar.js

@@ -19,6 +19,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 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,21 +68,11 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
   const classes = useUtilityClasses(rootProps);
   const [focusableItemId, setFocusableItemId] = React.useState(null);
   const [items, setItems] = React.useState([]);
-  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));
-    if (focusableItemId === id) {
-      setFocusableItemId(null);
-    }
-  }, [focusableItemId]);
+  const getSortedItems = React.useCallback(() => items.sort(_utils.sortByDocumentPosition), [items]);
   const findEnabledItem = React.useCallback((startIndex, step, wrap = true) => {
     let index = startIndex;
-    const itemCount = items.length;
+    const sortedItems = getSortedItems();
+    const itemCount = sortedItems.length;
 
     // Look for enabled items in the specified direction
     for (let i = 0; i < itemCount; i += 1) {
@@ -101,53 +92,93 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
       }
 
       // Return if we found an enabled item
-      if (!items[index].ref.current?.disabled && items[index].ref.current?.ariaDisabled !== 'true') {
+      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;
-  }, [items]);
+  }, [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 currentIndex = items.findIndex(item => item.id === focusableItemId);
+    const sortedItems = getSortedItems();
+    const focusableItemIndex = sortedItems.findIndex(item => item.id === focusableItemId);
     let newIndex = -1;
     if (event.key === 'ArrowRight') {
       event.preventDefault();
-      newIndex = findEnabledItem(currentIndex, 1);
+      newIndex = findEnabledItem(focusableItemIndex, 1);
     } else if (event.key === 'ArrowLeft') {
       event.preventDefault();
-      newIndex = findEnabledItem(currentIndex, -1);
+      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(items.length, -1, false);
+      newIndex = findEnabledItem(sortedItems.length, -1, false);
     }
-    if (newIndex >= 0 && newIndex < items.length) {
-      const item = items[newIndex];
+
+    // TODO: Check why this is necessary
+    if (newIndex >= 0 && newIndex < sortedItems.length) {
+      const item = sortedItems[newIndex];
       setFocusableItemId(item.id);
       item.ref.current?.focus();
     }
-  }, [items, focusableItemId, findEnabledItem]);
+  }, [getSortedItems, focusableItemId, findEnabledItem]);
   const onItemFocus = React.useCallback(id => {
     if (focusableItemId !== id) {
       setFocusableItemId(id);
     }
-  }, [focusableItemId]);
+  }, [focusableItemId, setFocusableItemId]);
   const onItemDisabled = React.useCallback(id => {
-    const currentIndex = items.findIndex(item => item.id === id);
+    const sortedItems = getSortedItems();
+    const currentIndex = sortedItems.findIndex(item => item.id === id);
     const newIndex = findEnabledItem(currentIndex, 1);
-    if (newIndex >= 0 && newIndex < items.length) {
-      const item = items[newIndex];
+    if (newIndex >= 0 && newIndex < sortedItems.length) {
+      const item = sortedItems[newIndex];
       setFocusableItemId(item.id);
       item.ref.current?.focus();
     }
-  }, [items, findEnabledItem]);
+  }, [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,
@@ -164,11 +195,6 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
   }, other, {
     ref
   }));
-  React.useEffect(() => {
-    if (items.length > 0) {
-      setFocusableItemId(items[0].id);
-    }
-  }, [items]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarContext.ToolbarContext.Provider, {
     value: contextValue,
     children: element

package/components/toolbarV8/ToolbarContext.js

@@ -8,6 +8,7 @@ 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) {

package/components/toolbarV8/utils.d.ts

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

package/components/toolbarV8/utils.js

@@ -0,0 +1,23 @@
+"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/context/GridRootPropsContext.js

@@ -8,6 +8,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridRootPropsContext = void 0;
 var React = _interopRequireWildcard(require("react"));
 const GridRootPropsContext = exports.GridRootPropsContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridRootPropsContext.displayName = 'GridRootPropsContext';
-}
+if (process.env.NODE_ENV !== "production") GridRootPropsContext.displayName = "GridRootPropsContext";

package/esm/DataGrid/DataGrid.js

@@ -50,6 +50,7 @@ const DataGridRaw = forwardRef(function DataGrid(inProps, ref) {
  * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/)
  */
 export const DataGrid = /*#__PURE__*/React.memo(DataGridRaw);
+if (process.env.NODE_ENV !== "production") DataGrid.displayName = "DataGrid";
 DataGridRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/GridApiContext.js

@@ -2,6 +2,4 @@
 
 import * as React from 'react';
 export const GridApiContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridApiContext.displayName = 'GridApiContext';
-}
+if (process.env.NODE_ENV !== "production") GridApiContext.displayName = "GridApiContext";

package/esm/components/GridColumnUnsortedIcon.js

@@ -13,4 +13,5 @@ export const GridColumnUnsortedIcon = /*#__PURE__*/React.memo(function GridColum
   const [nextSortDirection] = sortingOrder;
   const Icon = nextSortDirection === 'asc' ? rootProps.slots.columnSortedAscendingIcon : rootProps.slots.columnSortedDescendingIcon;
   return Icon ? /*#__PURE__*/_jsx(Icon, _extends({}, other)) : null;
-});
+});
+if (process.env.NODE_ENV !== "production") GridColumnUnsortedIcon.displayName = "GridColumnUnsortedIcon";

package/esm/components/GridConfigurationContext.js

@@ -2,6 +2,4 @@
 
 import * as React from 'react';
 export const GridConfigurationContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridConfigurationContext.displayName = 'GridConfigurationContext';
-}
+if (process.env.NODE_ENV !== "production") GridConfigurationContext.displayName = "GridConfigurationContext";

package/esm/components/GridRow.js

@@ -246,6 +246,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
       rowNode: rowNode
     }, slotProps?.cell), column.field);
   };
+  if (process.env.NODE_ENV !== "production") getCell.displayName = "getCell";
   const leftCells = pinnedColumns.left.map((column, i) => {
     const indexRelativeToAllColumns = i;
     return getCell(column, i, indexRelativeToAllColumns, pinnedColumns.left.length, PinnedColumnPosition.LEFT);

package/esm/components/cell/GridActionsCell.js

@@ -258,4 +258,5 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridActionsCell };
-export const renderActionsCell = params => /*#__PURE__*/_jsx(GridActionsCell, _extends({}, params));
+export const renderActionsCell = params => /*#__PURE__*/_jsx(GridActionsCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderActionsCell.displayName = "renderActionsCell";

package/esm/components/cell/GridBooleanCell.js

@@ -115,10 +115,12 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
   value: PropTypes.any
 } : void 0;
 const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
+if (process.env.NODE_ENV !== "production") GridBooleanCell.displayName = "GridBooleanCell";
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
   if (params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && isAutogeneratedRowNode(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));
-};
+};
+if (process.env.NODE_ENV !== "production") renderBooleanCell.displayName = "renderBooleanCell";

package/esm/components/cell/GridEditBooleanCell.js

@@ -136,4 +136,5 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridEditBooleanCell };
-export const renderEditBooleanCell = params => /*#__PURE__*/_jsx(GridEditBooleanCell, _extends({}, params));
+export const renderEditBooleanCell = params => /*#__PURE__*/_jsx(GridEditBooleanCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderEditBooleanCell.displayName = "renderEditBooleanCell";

package/esm/components/cell/GridEditDateCell.js

@@ -190,4 +190,5 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridEditDateCell };
-export const renderEditDateCell = params => /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));
+export const renderEditDateCell = params => /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderEditDateCell.displayName = "renderEditDateCell";

package/esm/components/cell/GridEditInputCell.js

@@ -165,4 +165,5 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridEditInputCell };
-export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));
+export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderEditInputCell.displayName = "renderEditInputCell";

package/esm/components/cell/GridEditSingleSelectCell.js

@@ -186,4 +186,5 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   value: PropTypes.any
 } : void 0;
 export { GridEditSingleSelectCell };
-export const renderEditSingleSelectCell = params => /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));
+export const renderEditSingleSelectCell = params => /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));
+if (process.env.NODE_ENV !== "production") renderEditSingleSelectCell.displayName = "renderEditSingleSelectCell";

package/esm/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -60,4 +60,5 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
       }))
     }))
   });
-});
+});
+if (process.env.NODE_ENV !== "production") ColumnHeaderMenuIcon.displayName = "ColumnHeaderMenuIcon";

package/esm/components/columnHeaders/GridColumnHeaderItem.js

@@ -110,7 +110,7 @@ function GridColumnHeaderItem(props) {
     onDragStart: publish('columnHeaderDragStart'),
     onDragEnter: publish('columnHeaderDragEnter'),
     onDragOver: publish('columnHeaderDragOver'),
-    onDragEnd: publish('columnHeaderDragEnd')
+    onDragEndCapture: publish('columnHeaderDragEnd')
   } : {}, [isDraggable, publish]);
   const columnHeaderSeparatorProps = React.useMemo(() => ({
     onMouseDown: publish('columnSeparatorMouseDown'),

package/esm/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -58,6 +58,7 @@ function GridColumnHeaderSeparatorRaw(props) {
   );
 }
 const GridColumnHeaderSeparator = /*#__PURE__*/React.memo(GridColumnHeaderSeparatorRaw);
+if (process.env.NODE_ENV !== "production") GridColumnHeaderSeparator.displayName = "GridColumnHeaderSeparator";
 process.env.NODE_ENV !== "production" ? GridColumnHeaderSeparatorRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -12,6 +12,7 @@ function GridColumnHeaderSortIconRaw(props) {
   });
 }
 const GridColumnHeaderSortIcon = /*#__PURE__*/React.memo(GridColumnHeaderSortIconRaw);
+if (process.env.NODE_ENV !== "production") GridColumnHeaderSortIcon.displayName = "GridColumnHeaderSortIcon";
 process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |