@mui/x-data-grid 8.3.1 → 8.5.0

package/esm/components/toolbarV8/ToolbarButton.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import useForkRef from '@mui/utils/useForkRef';
 import useId from '@mui/utils/useId';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -83,6 +83,7 @@ const ToolbarButton = forwardRef(function ToolbarButton(props, ref) {
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") ToolbarButton.displayName = "ToolbarButton";
 process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/components/toolbarV8/ToolbarContext.js

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

package/esm/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/esm/components/toolbarV8/utils.js

@@ -0,0 +1,17 @@
+/* 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;
+}

package/esm/components/virtualization/GridMainContainer.js

@@ -48,4 +48,5 @@ export const GridMainContainer = forwardRef((props, ref) => {
       "data-id": "gridPanelAnchor"
     }), props.children]
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridMainContainer.displayName = "GridMainContainer";

package/esm/components/virtualization/GridVirtualScrollbar.js

@@ -145,4 +145,5 @@ const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref
     })
   });
 });
+if (process.env.NODE_ENV !== "production") GridVirtualScrollbar.displayName = "GridVirtualScrollbar";
 export { GridVirtualScrollbar };

package/esm/components/virtualization/GridVirtualScrollerContent.js

@@ -40,4 +40,5 @@ const GridVirtualScrollerContent = forwardRef(function GridVirtualScrollerConten
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridVirtualScrollerContent.displayName = "GridVirtualScrollerContent";
 export { GridVirtualScrollerContent };

package/esm/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -54,4 +54,5 @@ const GridVirtualScrollerRenderZone = forwardRef(function GridVirtualScrollerRen
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") GridVirtualScrollerRenderZone.displayName = "GridVirtualScrollerRenderZone";
 export { GridVirtualScrollerRenderZone };

package/esm/constants/gridClasses.d.ts

@@ -619,6 +619,10 @@ export interface GridClasses {
    * Styles applied to the root element of the row reorder cell when dragging is allowed
    */
   'rowReorderCell--draggable': string;
+  /**
+   * Styles applied to the row reorder icon element.
+   */
+  rowReorderIcon: string;
   /**
    * Styles applied to the skeleton row element.
    */

package/esm/constants/gridClasses.js

@@ -1,5 +1,6 @@
-import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_generateUtilityClass as generateUtilityClass } from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);

package/esm/context/GridRootPropsContext.js

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

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -75,7 +75,7 @@ export const useGridColumnHeaders = props => {
   useGridEvent(apiRef, 'columnResizeStart', handleColumnResizeStart);
   useGridEvent(apiRef, 'columnResizeStop', handleColumnResizeStop);
   useGridEvent(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
-  useGridEvent(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
+  useGridEvent(apiRef, 'columnHeaderDragEndNative', handleColumnReorderStop);
 
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {
@@ -113,6 +113,7 @@ export const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getFillers.displayName = "getFillers";
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -181,6 +182,7 @@ export const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getColumnHeadersRow.displayName = "getColumnHeadersRow";
   const getColumnGroupHeaders = ({
     depth,
     params

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

@@ -48,6 +48,15 @@ export declare const gridVisibleColumnFieldsSelector: import("@mui/x-data-grid")
  * @category Visible Columns
  */
 export declare const gridPinnedColumnsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, GridPinnedColumnFields>;
+/**
+ * Get all existing pinned columns. Place the columns on the side that depends on the rtl state.
+ * @category Pinned Columns
+ * @ignore - Do not document
+ */
+export declare const gridExistingPinnedColumnSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, boolean, {
+  left: string[];
+  right: string[];
+}>;
 /**
  * Get the visible pinned columns.
  * @category Visible Columns

package/esm/hooks/features/columns/gridColumnsSelector.js

@@ -59,19 +59,26 @@ export const gridVisibleColumnFieldsSelector = createSelectorMemoized(gridVisibl
  */
 export const gridPinnedColumnsSelector = createRootSelector(state => state.pinnedColumns);
 
+/**
+ * Get all existing pinned columns. Place the columns on the side that depends on the rtl state.
+ * @category Pinned Columns
+ * @ignore - Do not document
+ */
+export const gridExistingPinnedColumnSelector = createSelectorMemoized(gridPinnedColumnsSelector, gridColumnFieldsSelector, gridIsRtlSelector, (model, orderedFields, isRtl) => filterMissingColumns(model, orderedFields, isRtl));
+
 /**
  * Get the visible pinned columns.
  * @category Visible Columns
  */
 export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, gridIsRtlSelector, (columnsState, model, visibleColumnFields, isRtl) => {
-  const visiblePinnedFields = filterVisibleColumns(model, visibleColumnFields, isRtl);
+  const visiblePinnedFields = filterMissingColumns(model, visibleColumnFields, isRtl);
   const visiblePinnedColumns = {
     left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),
     right: visiblePinnedFields.right.map(field => columnsState.lookup[field])
   };
   return visiblePinnedColumns;
 });
-function filterVisibleColumns(pinnedColumns, columns, invert) {
+function filterMissingColumns(pinnedColumns, columns, invert) {
   if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
     return EMPTY_PINNED_COLUMN_FIELDS;
   }

package/esm/hooks/features/dataSource/useGridDataSourceBase.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
-import { unstable_debounce as debounce } from '@mui/utils';
+import debounce from '@mui/utils/debounce';
 import { warnOnce } from '@mui/x-internals/warning';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { GRID_ROOT_GROUP_ID } from "../rows/gridRowsUtils.js";

package/esm/hooks/features/export/useGridPrintExport.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_ownerDocument as ownerDocument } from '@mui/utils';
+import ownerDocument from '@mui/utils/ownerDocument';
 import { loadStyleSheets } from '@mui/x-internals/export';
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { gridExpandedRowCountSelector } from "../filter/gridFilterSelector.js";

package/esm/hooks/features/filter/useGridFilter.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { lruMemoize } from 'reselect';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { useLazyRef } from "../../utils/useLazyRef.js";
 import { useGridEvent } from "../../utils/useGridEvent.js";

package/esm/hooks/features/overlays/useGridOverlays.js

@@ -61,6 +61,7 @@ export const useGridOverlays = () => {
       children: /*#__PURE__*/_jsx(Overlay, _extends({}, overlayProps))
     }));
   };
+  if (process.env.NODE_ENV !== "production") getOverlay.displayName = "getOverlay";
   return {
     getOverlay,
     overlaysProps

package/esm/hooks/features/pagination/useGridPaginationModel.js

@@ -138,7 +138,7 @@ export const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     const dimensions = apiRef.current.getRootDimensions();
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    const maximumPageSizeWithoutScrollBar = Math.max(1, Math.floor(dimensions.viewportInnerSize.height / rowHeight));
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
   const handleRowCountChange = React.useCallback(newRowCount => {

package/esm/hooks/features/rowSelection/useGridRowSelection.js

@@ -427,7 +427,7 @@ export const useGridRowSelection = (apiRef, props) => {
   const toggleAllRows = React.useCallback(value => {
     const filterModel = gridFilterModelSelector(apiRef);
     const quickFilterModel = gridQuickFilterValuesSelector(apiRef);
-    const hasFilters = filterModel.items.length > 0 || (quickFilterModel?.length || 0) > 0;
+    const hasFilters = filterModel.items.length > 0 || quickFilterModel?.some(val => val.length);
     if (!props.isRowSelectable && !props.checkboxSelectionVisibleOnly && applyAutoSelection && !hasFilters) {
       apiRef.current.setRowSelectionModel({
         type: value ? 'exclude' : 'include',

package/esm/hooks/features/rows/useGridRowsMeta.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { ResizeObserver } from "../../../utils/ResizeObserver.js";
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { eslintUseValue } from "../../../utils/utils.js";
@@ -194,7 +194,10 @@ export const useGridRowsMeta = (apiRef, props) => {
       apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
     }
     if (!isHeightMetaValid.current) {
-      apiRef.current.requestPipeProcessorsApplication('rowHeight');
+      // Avoids "ResizeObserver loop completed with undelivered notifications" error
+      requestAnimationFrame(() => {
+        apiRef.current.requestPipeProcessorsApplication('rowHeight');
+      });
     }
   })).current;
   const observeRowHeight = (element, rowId) => {

package/esm/hooks/features/sorting/useGridSorting.d.ts

@@ -7,4 +7,4 @@ export declare const sortingStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridRows (event)
  * @requires useGridColumns (event)
  */
-export declare const useGridSorting: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting">) => void;
+export declare const useGridSorting: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting" | "multipleColumnsSortingMode">) => void;

package/esm/hooks/features/sorting/useGridSorting.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useGridEvent } from "../../utils/useGridEvent.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
@@ -194,9 +194,9 @@ export const useGridSorting = (apiRef, props) => {
     if (!colDef.sortable || props.disableColumnSorting) {
       return;
     }
-    const allowMultipleSorting = event.shiftKey || event.metaKey || event.ctrlKey;
+    const allowMultipleSorting = props.multipleColumnsSortingMode === 'always' || event.shiftKey || event.metaKey || event.ctrlKey;
     sortColumn(field, undefined, allowMultipleSorting);
-  }, [sortColumn, props.disableColumnSorting]);
+  }, [sortColumn, props.disableColumnSorting, props.multipleColumnsSortingMode]);
   const handleColumnHeaderKeyDown = React.useCallback(({
     field,
     colDef
@@ -206,9 +206,9 @@ export const useGridSorting = (apiRef, props) => {
     }
     // Ctrl + Enter opens the column menu
     if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey) {
-      sortColumn(field, undefined, event.shiftKey);
+      sortColumn(field, undefined, props.multipleColumnsSortingMode === 'always' || event.shiftKey);
     }
-  }, [sortColumn, props.disableColumnSorting]);
+  }, [sortColumn, props.disableColumnSorting, props.multipleColumnsSortingMode]);
   const handleColumnsChange = React.useCallback(() => {
     // When the columns change we check that the sorted columns are still part of the dataset
     const sortModel = gridSortModelSelector(apiRef);

package/esm/hooks/utils/useGridPrivateApiContext.js

@@ -1,8 +1,6 @@
 import * as React from 'react';
 export const GridPrivateApiContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== 'production') {
-  GridPrivateApiContext.displayName = 'GridPrivateApiContext';
-}
+if (process.env.NODE_ENV !== "production") GridPrivateApiContext.displayName = "GridPrivateApiContext";
 export function useGridPrivateApiContext() {
   const privateApiRef = React.useContext(GridPrivateApiContext);
   if (privateApiRef === undefined) {

package/esm/hooks/utils/useRunOnce.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 const noop = () => {};
 
 /**

package/esm/index.js

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

package/esm/locales/isIS.js

@@ -58,11 +58,11 @@ const isISGrid = {
   filterPanelInputPlaceholder: 'Síu gildi',
   // Filter operators text
   filterOperatorContains: 'inniheldur',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'inniheldur ekki',
   filterOperatorEquals: 'jafnt og',
-  // filterOperatorDoesNotEqual: 'does not equal',
-  filterOperatorStartsWith: 'byrjar með',
-  filterOperatorEndsWith: 'endar með',
+  filterOperatorDoesNotEqual: 'ekki jafnt og',
+  filterOperatorStartsWith: 'byrjar á',
+  filterOperatorEndsWith: 'endar á',
   filterOperatorIs: 'er líka með',
   filterOperatorNot: 'er ekki líka með',
   filterOperatorAfter: 'eftir',
@@ -80,11 +80,11 @@ const isISGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Inniheldur',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Inniheldur ekki',
   headerFilterOperatorEquals: 'Jafnt og',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
-  headerFilterOperatorStartsWith: 'Byrjar með',
-  headerFilterOperatorEndsWith: 'Endar með',
+  headerFilterOperatorDoesNotEqual: 'Ekki jafnt og',
+  headerFilterOperatorStartsWith: 'Byrjar á',
+  headerFilterOperatorEndsWith: 'Endar á',
   headerFilterOperatorIs: 'Er jafnt og',
   headerFilterOperatorNot: 'Er ekki jafnt og',
   headerFilterOperatorAfter: 'Eftir',

package/esm/material/index.js

@@ -170,6 +170,7 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
     }, material))]
   });
 });
+if (process.env.NODE_ENV !== "production") BaseSelect.displayName = "BaseSelect";
 const StyledPagination = styled(MUIPagination)(({
   theme
 }) => ({
@@ -225,6 +226,7 @@ const BasePagination = forwardRef(function BasePagination(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BasePagination.displayName = "BasePagination";
 const BaseBadge = forwardRef(function BaseBadge(props, ref) {
   const {
       material
@@ -234,6 +236,7 @@ const BaseBadge = forwardRef(function BaseBadge(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseBadge.displayName = "BaseBadge";
 const BaseCheckbox = forwardRef(function BaseCheckbox(props, ref) {
   const {
       autoFocus,
@@ -278,6 +281,7 @@ const BaseCheckbox = forwardRef(function BaseCheckbox(props, ref) {
     fullWidth: fullWidth
   });
 });
+if (process.env.NODE_ENV !== "production") BaseCheckbox.displayName = "BaseCheckbox";
 const BaseCircularProgress = forwardRef(function BaseCircularProgress(props, ref) {
   const {
       material
@@ -287,6 +291,7 @@ const BaseCircularProgress = forwardRef(function BaseCircularProgress(props, ref
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseCircularProgress.displayName = "BaseCircularProgress";
 const BaseDivider = forwardRef(function BaseDivider(props, ref) {
   const {
       material
@@ -296,6 +301,7 @@ const BaseDivider = forwardRef(function BaseDivider(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseDivider.displayName = "BaseDivider";
 const BaseLinearProgress = forwardRef(function BaseLinearProgress(props, ref) {
   const {
       material
@@ -305,6 +311,7 @@ const BaseLinearProgress = forwardRef(function BaseLinearProgress(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseLinearProgress.displayName = "BaseLinearProgress";
 const BaseButton = forwardRef(function BaseButton(props, ref) {
   const {
       material
@@ -314,6 +321,7 @@ const BaseButton = forwardRef(function BaseButton(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseButton.displayName = "BaseButton";
 const BaseChip = forwardRef(function BaseChip(props, ref) {
   const {
       material
@@ -323,6 +331,7 @@ const BaseChip = forwardRef(function BaseChip(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseChip.displayName = "BaseChip";
 const BaseIconButton = forwardRef(function BaseIconButton(props, ref) {
   const {
       material
@@ -332,6 +341,7 @@ const BaseIconButton = forwardRef(function BaseIconButton(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseIconButton.displayName = "BaseIconButton";
 const BaseTooltip = forwardRef(function BaseTooltip(props, ref) {
   const {
       material
@@ -341,6 +351,7 @@ const BaseTooltip = forwardRef(function BaseTooltip(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseTooltip.displayName = "BaseTooltip";
 const BaseSkeleton = forwardRef(function BaseSkeleton(props, ref) {
   const {
       material
@@ -350,6 +361,7 @@ const BaseSkeleton = forwardRef(function BaseSkeleton(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseSkeleton.displayName = "BaseSkeleton";
 const BaseSwitch = forwardRef(function BaseSwitch(props, ref) {
   const {
       material,
@@ -371,6 +383,7 @@ const BaseSwitch = forwardRef(function BaseSwitch(props, ref) {
     label: label
   });
 });
+if (process.env.NODE_ENV !== "production") BaseSwitch.displayName = "BaseSwitch";
 const BaseMenuList = forwardRef(function BaseMenuList(props, ref) {
   const {
       material
@@ -380,6 +393,7 @@ const BaseMenuList = forwardRef(function BaseMenuList(props, ref) {
     ref: ref
   }));
 });
+if (process.env.NODE_ENV !== "production") BaseMenuList.displayName = "BaseMenuList";
 function BaseMenuItem(props) {
   const {
       inert,

package/esm/material/variables.js

@@ -93,5 +93,10 @@ function removeOpacity(color) {
   return setOpacity(color, 1);
 }
 function formatFont(font) {
+  // Accounts for disabled typography variants
+  // See: https://github.com/mui/mui-x/issues/17812
+  if (!font) {
+    return undefined;
+  }
   return `${font.fontWeight} ${font.fontSize} / ${font.lineHeight} ${font.fontFamily}`;
 }

package/esm/models/events/gridEventLookup.d.ts

@@ -195,6 +195,15 @@ export interface GridColumnHeaderEventLookup {
     params: GridColumnHeaderParams;
     event: React.DragEvent<HTMLElement>;
   };
+  /**
+   * Fired when the dragging of a column header ends.
+   * Same as `columnHeaderDragEnd`, but also fires when the DOM element is unmounted.
+   * @ignore - do not document.
+   */
+  columnHeaderDragEndNative: {
+    params: GridColumnHeaderParams;
+    event: DragEvent;
+  };
   /**
    * Fired when a `dblclick` DOM event happens in the column header separator.
    * @ignore - do not document.

package/esm/models/props/DataGridProps.d.ts

@@ -841,6 +841,13 @@ export interface DataGridProSharedPropsWithDefaultValue {
    * @default false
    */
   listView: boolean;
+  /**
+   * If set to "always", the multi-sorting is applied without modifier key.
+   * Otherwise, the modifier key is required for multi-sorting to be applied.
+   * @see See https://mui.com/x/react-data-grid/sorting/#multi-sorting
+   * @default "withModifierKey"
+   */
+  multipleColumnsSortingMode: 'withModifierKey' | 'always';
 }
 export interface DataGridProSharedPropsWithoutDefaultValue<R extends GridValidRowModel = any> {
   /**

package/esm/utils/composeGridClasses.d.ts

@@ -1,3 +1,3 @@
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import type { DataGridProcessedProps } from "../models/props/DataGridProps.js";
 export declare function composeGridClasses(classes: DataGridProcessedProps['classes'], slots: Parameters<typeof composeClasses>[0]): Record<string, string>;

package/esm/utils/composeGridClasses.js

@@ -1,4 +1,4 @@
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass } from "../constants/gridClasses.js";
 export function composeGridClasses(classes, slots) {
   return composeClasses(slots, getDataGridUtilityClass, classes);

package/esm/utils/css/context.js

@@ -9,6 +9,7 @@ const CSSVariablesContext = /*#__PURE__*/React.createContext({
     href: "/unset"
   })
 });
+if (process.env.NODE_ENV !== "production") CSSVariablesContext.displayName = "CSSVariablesContext";
 export function useCSSVariablesClass() {
   return React.useContext(CSSVariablesContext).className;
 }
@@ -49,7 +50,7 @@ export function GridCSSVariablesContext(props) {
 function variablesToString(variables) {
   let output = '';
   for (const key in variables) {
-    if (Object.hasOwn(variables, key)) {
+    if (Object.hasOwn(variables, key) && variables[key] !== undefined) {
       output += `${key}:${variables[key]};`;
     }
   }

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -83,7 +83,7 @@ const useGridColumnHeaders = props => {
   (0, _useGridEvent.useGridEvent)(apiRef, 'columnResizeStart', handleColumnResizeStart);
   (0, _useGridEvent.useGridEvent)(apiRef, 'columnResizeStop', handleColumnResizeStop);
   (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
-  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderDragEndNative', handleColumnReorderStop);
 
   // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
   const getColumnsToRender = params => {
@@ -121,6 +121,7 @@ const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getFillers.displayName = "getFillers";
   const getColumnHeaders = (params, other = {}) => {
     const {
       renderedColumns,
@@ -189,6 +190,7 @@ const useGridColumnHeaders = props => {
       })]
     });
   };
+  if (process.env.NODE_ENV !== "production") getColumnHeadersRow.displayName = "getColumnHeadersRow";
   const getColumnGroupHeaders = ({
     depth,
     params

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

@@ -48,6 +48,15 @@ export declare const gridVisibleColumnFieldsSelector: import("@mui/x-data-grid")
  * @category Visible Columns
  */
 export declare const gridPinnedColumnsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, GridPinnedColumnFields>;
+/**
+ * Get all existing pinned columns. Place the columns on the side that depends on the rtl state.
+ * @category Pinned Columns
+ * @ignore - Do not document
+ */
+export declare const gridExistingPinnedColumnSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, boolean, {
+  left: string[];
+  right: string[];
+}>;
 /**
  * Get the visible pinned columns.
  * @category Visible Columns