@mui/x-data-grid 8.22.1 → 8.24.0

package/esm/components/cell/GridBooleanCell.js

@@ -11,6 +11,7 @@ import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { isAutogeneratedRowNode } from "../../hooks/features/rows/gridRowsUtils.js";
 import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from "../../internals/constants.js";
+import { GridFooterCell } from "./GridFooterCell.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -109,7 +110,14 @@ if (process.env.NODE_ENV !== "production") GridBooleanCell.displayName = "GridBo
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
   if (params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && isAutogeneratedRowNode(params.rowNode)) {
-    return '';
+    const aggregationMetaData = params.aggregation;
+    if (!aggregationMetaData) {
+      return '';
+    }
+    if (aggregationMetaData.position === 'footer') {
+      return /*#__PURE__*/_jsx(GridFooterCell, _extends({}, params));
+    }
+    return params.formattedValue;
   }
   return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));
 };

package/esm/components/cell/GridEditDateCell.js

@@ -13,7 +13,9 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledInputBase = styled(NotRendered)({
+const StyledInputBase = styled(NotRendered, {
+  slot: 'internal'
+})({
   fontSize: 'inherit'
 });
 const useUtilityClasses = ownerState => {

package/esm/components/cell/GridFooterCell.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import type { GridRenderCellParams } from "../../models/params/gridCellParams.js";
+interface GridFooterCellProps extends GridRenderCellParams {
+  sx?: SxProps<Theme>;
+}
+declare function GridFooterCellRaw(props: GridFooterCellProps): import("react/jsx-runtime").JSX.Element;
+declare const GridFooterCell: React.MemoExoticComponent<typeof GridFooterCellRaw>;
+export { GridFooterCell };

package/esm/components/cell/GridFooterCell.js

@@ -0,0 +1,48 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "id", "value", "rowNode", "field", "hasFocus", "tabIndex", "isEditable"];
+import * as React from 'react';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '@mui/material/styles';
+import { vars } from "../../constants/cssVariables.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridFooterCellRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FooterCell'
+})({
+  fontWeight: vars.typography.fontWeight.medium,
+  color: vars.colors.foreground.accent
+});
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['footerCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridFooterCellRaw(props) {
+  const {
+      formattedValue
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(GridFooterCellRoot, _extends({
+    ownerState: ownerState,
+    className: classes.root
+  }, other, {
+    children: formattedValue
+  }));
+}
+const GridFooterCell = /*#__PURE__*/React.memo(GridFooterCellRaw);
+if (process.env.NODE_ENV !== "production") GridFooterCell.displayName = "GridFooterCell";
+export { GridFooterCell };

package/esm/components/containers/GridRootStyles.js

@@ -351,6 +351,10 @@ export const GridRootStyles = styled('div', {
       },
       [`& .${c.treeDataGroupingCell}`]: {
         width: 'unset'
+      },
+      [`& .${c['columnHeader--filter']}`]: {
+        flex: 'none !important',
+        width: 'unset !important'
       }
     },
     [`&.${c.withSidePanel}`]: {
@@ -425,6 +429,10 @@ export const GridRootStyles = styled('div', {
       minHeight: 'min-content',
       overflow: 'hidden'
     },
+    [`&.${c['root--densityCompact']} .${c['columnHeader--filter']}`]: {
+      paddingTop: 4,
+      paddingBottom: 4
+    },
     [`& .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}`]: {
       overflow: 'hidden'
     },

package/esm/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -11,7 +11,9 @@ import { NotRendered } from "../../../utils/assert.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledMenuList = styled(NotRendered)(() => ({
+const StyledMenuList = styled(NotRendered, {
+  slot: 'internal'
+})(() => ({
   minWidth: 248
 }));
 function handleMenuScrollCapture(event) {

package/esm/components/virtualization/GridBottomContainer.js

@@ -11,7 +11,10 @@ const useUtilityClasses = () => {
   };
   return composeClasses(slots, getDataGridUtilityClass, {});
 };
-const Element = styled('div')({
+const Element = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'sticky',
   zIndex: 40,
   bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'

package/esm/components/virtualization/GridMainContainer.js

@@ -5,7 +5,10 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridPanelAnchor = styled('div')({
+const GridPanelAnchor = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'absolute',
   top: `var(--DataGrid-headersTotalHeight)`,
   left: 0,

package/esm/components/virtualization/GridTopContainer.js

@@ -11,7 +11,10 @@ const useUtilityClasses = () => {
   };
   return composeClasses(slots, getDataGridUtilityClass, {});
 };
-const Element = styled('div')({
+const Element = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'sticky',
   zIndex: 40,
   top: 0

package/esm/components/virtualization/GridVirtualScrollbar.d.ts

@@ -8,6 +8,6 @@ type GridVirtualScrollbarProps = {
   }>;
 };
 export declare const scrollbarSizeCssExpression = "calc(max(var(--DataGrid-scrollbarSize), 14px))";
-export declare const ScrollbarCorner: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, {}, {}>;
+export declare const ScrollbarCorner: import("@emotion/styled").StyledComponent<Pick<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement> | keyof import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
 declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps> | React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollbar };

package/esm/components/virtualization/GridVirtualScrollbar.js

@@ -28,7 +28,10 @@ const useUtilityClasses = (ownerState, position) => {
 // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
 // don't have a method to find the required size for scrollbars on those platforms.
 export const scrollbarSizeCssExpression = 'calc(max(var(--DataGrid-scrollbarSize), 14px))';
-const Scrollbar = styled('div')({
+const Scrollbar = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'absolute',
   display: 'inline-block',
   zIndex: 60,
@@ -37,7 +40,9 @@ const Scrollbar = styled('div')({
   },
   '--size': scrollbarSizeCssExpression
 });
-const ScrollbarVertical = styled(Scrollbar)({
+const ScrollbarVertical = styled(Scrollbar, {
+  slot: 'internal'
+})({
   width: 'var(--size)',
   height: 'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-headersTotalHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
   overflowY: 'auto',
@@ -50,7 +55,9 @@ const ScrollbarVertical = styled(Scrollbar)({
   top: 'var(--DataGrid-headersTotalHeight)',
   right: 0
 });
-const ScrollbarHorizontal = styled(Scrollbar)({
+const ScrollbarHorizontal = styled(Scrollbar, {
+  slot: 'internal'
+})({
   width: 'calc(var(--DataGrid-hasScrollX) * (100% - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))',
   height: 'var(--size)',
   overflowY: 'hidden',
@@ -62,7 +69,9 @@ const ScrollbarHorizontal = styled(Scrollbar)({
   },
   bottom: 0
 });
-export const ScrollbarCorner = styled(Scrollbar)({
+export const ScrollbarCorner = styled(Scrollbar, {
+  slot: 'internal'
+})({
   width: 'var(--size)',
   height: 'var(--size)',
   right: 0,

package/esm/components/virtualization/GridVirtualScrollerFiller.js

@@ -7,26 +7,39 @@ import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
 import { gridClasses } from "../../constants/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Filler = styled('div')({
+const Filler = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   display: 'flex',
   flexDirection: 'row',
   width: 'var(--DataGrid-rowWidth)',
   boxSizing: 'border-box'
 });
-const Pinned = styled('div')({
+const Pinned = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   position: 'sticky',
   height: '100%',
   boxSizing: 'border-box',
   borderTop: '1px solid var(--rowBorderColor)',
   backgroundColor: vars.cell.background.pinned
 });
-const PinnedLeft = styled(Pinned)({
+const PinnedLeft = styled(Pinned, {
+  slot: 'internal'
+})({
   left: 0
 });
-const PinnedRight = styled(Pinned)({
+const PinnedRight = styled(Pinned, {
+  slot: 'internal'
+})({
   right: 0
 });
-const Main = styled('div')({
+const Main = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   flexGrow: 1,
   borderTop: '1px solid var(--rowBorderColor)'
 });

package/esm/hooks/features/columnResize/gridColumnResizeApi.d.ts

@@ -1,6 +1,7 @@
 import type { GridColDef } from "../../../models/colDef/gridColDef.js";
 export declare const DEFAULT_GRID_AUTOSIZE_OPTIONS: {
   includeHeaders: boolean;
+  includeHeaderFilters: boolean;
   includeOutliers: boolean;
   outliersFactor: number;
   expand: boolean;
@@ -16,6 +17,12 @@ export type GridAutosizeOptions = {
    * @default false
    */
   includeHeaders?: boolean;
+  /**
+   * If true, include header filter widths in the calculation.
+   * Only applies when header filters are enabled.
+   * @default false
+   */
+  includeHeaderFilters?: boolean;
   /**
    * If true, width outliers will be ignored.
    * @default false

package/esm/hooks/features/columnResize/gridColumnResizeApi.js

@@ -1,5 +1,6 @@
 export const DEFAULT_GRID_AUTOSIZE_OPTIONS = {
   includeHeaders: true,
+  includeHeaderFilters: false,
   includeOutliers: false,
   outliersFactor: 1.5,
   expand: false,

package/esm/hooks/features/columnResize/useGridColumnResize.js

@@ -6,7 +6,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import ownerDocument from '@mui/utils/ownerDocument';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { useRtl } from '@mui/system/RtlProvider';
-import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from "../../../utils/domUtils.js";
+import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridHeaderFilter, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from "../../../utils/domUtils.js";
 import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from "./gridColumnResizeApi.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { useGridEvent, useGridApiMethod, useGridEventPriority, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from "../../utils/index.js";
@@ -17,6 +17,7 @@ import { useTimeout } from "../../utils/useTimeout.js";
 import { GridPinnedColumnPosition } from "../columns/gridColumnsInterfaces.js";
 import { gridColumnsStateSelector } from "../columns/index.js";
 import { gridDimensionsSelector } from "../dimensions/index.js";
+import { gridHeaderFilteringEnabledSelector } from "../headerFiltering/index.js";
 import { gridResizingColumnFieldSelector } from "./columnResizeSelector.js";
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
@@ -134,6 +135,7 @@ function extractColumnWidths(apiRef, options, columns) {
   const widthByField = {};
   const root = apiRef.current.rootElementRef.current;
   root.classList.add(gridClasses.autosizing);
+  const includeHeaderFilters = options.includeHeaderFilters && gridHeaderFilteringEnabledSelector(apiRef);
   columns.forEach(column => {
     const cells = findGridCells(apiRef.current, column.field);
     const widths = cells.map(cell => {
@@ -164,6 +166,16 @@ function extractColumnWidths(apiRef, options, columns) {
         filteredWidths.push(width);
       }
     }
+    if (includeHeaderFilters) {
+      const headerFilter = findGridHeaderFilter(apiRef.current, column.field);
+      if (headerFilter) {
+        const style = window.getComputedStyle(headerFilter, null);
+        const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
+        const contentWidth = headerFilter.scrollWidth;
+        const width = contentWidth + paddingWidth;
+        filteredWidths.push(width);
+      }
+    }
     const hasColumnMin = column.minWidth !== -Infinity && column.minWidth !== undefined;
     const hasColumnMax = column.maxWidth !== Infinity && column.maxWidth !== undefined;
     const min = hasColumnMin ? column.minWidth : 0;

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

@@ -236,8 +236,7 @@ export const createColumnsState = ({
     const currentState = gridColumnsStateSelector(apiRef);
     columnsState = {
       orderedFields: keepOnlyColumnsToUpsert ? [] : [...currentState.orderedFields],
-      lookup: _extends({}, currentState.lookup),
-      // Will be cleaned later if keepOnlyColumnsToUpsert=true
+      lookup: keepOnlyColumnsToUpsert ? {} : _extends({}, currentState.lookup),
       columnVisibilityModel,
       initialColumnVisibilityModel: updateInitialVisibilityModel ? columnVisibilityModel : currentState.initialColumnVisibilityModel
     };
@@ -250,12 +249,10 @@ export const createColumnsState = ({
       }
     }
   }
-  const columnsToUpsertLookup = {};
   columnsToUpsert.forEach(newColumn => {
     const {
       field
     } = newColumn;
-    columnsToUpsertLookup[field] = true;
     columnsToKeep[field] = true;
     let existingState = columnsState.lookup[field];
     if (existingState == null) {

package/esm/hooks/features/dataSource/useGridDataSourceBase.d.ts

@@ -21,8 +21,8 @@ export declare const useGridDataSourceBase: <Api extends GridPrivateApiCommunity
   cache: GridDataSourceCache;
   events: {
     strategyAvailabilityChange: GridEventListener<"strategyAvailabilityChange">;
-    sortModelChange: (params: unknown) => void;
-    filterModelChange: (params: unknown) => void;
-    paginationModelChange: (params: unknown) => void;
+    sortModelChange: (...params: unknown[]) => void;
+    filterModelChange: (...params: unknown[]) => void;
+    paginationModelChange: (...params: unknown[]) => void;
   };
 };

package/esm/hooks/features/editing/useGridCellEditing.js

@@ -107,6 +107,7 @@ export const useGridCellEditing = (apiRef, props) => {
         reason = GridCellEditStartReasons.pasteKeyDown;
       } else if (event.key === 'Enter') {
         reason = GridCellEditStartReasons.enterKeyDown;
+        event.preventDefault();
       } else if (event.key === 'Backspace' || event.key === 'Delete') {
         reason = GridCellEditStartReasons.deleteKeyDown;
       }

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

@@ -60,6 +60,9 @@ export const gridPaginationRowRangeSelector = createSelectorMemoized(gridPaginat
   if (!clientSidePaginationEnabled) {
     return null;
   }
+  if (!visibleSortedRowEntries || visibleSortedRowEntries.length === 0) {
+    return null;
+  }
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(paginationModel.pageSize * paginationModel.page, visibleTopLevelRowCount - 1);
   const topLevelLastRowIndex = paginationModel.pageSize === ALL_RESULTS_PAGE_VALUE ? visibleTopLevelRowCount - 1 : Math.min(topLevelFirstRowIndex + paginationModel.pageSize - 1, visibleTopLevelRowCount - 1);

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

@@ -20,6 +20,7 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js"
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
 import { isMultipleRowSelectionEnabled, findRowsToSelect, findRowsToDeselect } from "./utils.js";
+import { runIf } from "../../../utils/utils.js";
 import { createRowSelectionManager } from "../../../models/gridRowSelectionManager.js";
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from "../pagination/index.js";
 const emptyModel = {
@@ -38,11 +39,6 @@ export const rowSelectionStateInitializer = (state, props) => _extends({}, state
  */
 export const useGridRowSelection = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridSelection');
-  const runIfRowSelectionIsEnabled = React.useCallback(callback => (...args) => {
-    if (props.rowSelection) {
-      callback(...args);
-    }
-  }, [props.rowSelection]);
   const isNestedData = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector) > 1;
   const applyAutoSelection = props.signature !== GridSignature.DataGrid && (props.rowSelectionPropagation?.parents || props.rowSelectionPropagation?.descendants) && isNestedData;
   const propRowSelectionModel = React.useMemo(() => {
@@ -121,6 +117,12 @@ export const useGridRowSelection = (apiRef, props) => {
     if (props.rowSelection === false) {
       return false;
     }
+
+    // If `keepNonExistentRowsSelected` is true, we might run in a case where row selectability is checked for a row that does not exist.
+    // Since that row was previously selected (otherwise it would not be checked at this point), we return true.
+    if (props.keepNonExistentRowsSelected && !apiRef.current.getRow(id)) {
+      return true;
+    }
     if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
       return false;
     }
@@ -129,7 +131,7 @@ export const useGridRowSelection = (apiRef, props) => {
       return false;
     }
     return true;
-  }, [apiRef, props.rowSelection, propIsRowSelectable]);
+  }, [apiRef, props.rowSelection, props.keepNonExistentRowsSelected, propIsRowSelectable]);
   const getSelectedRows = React.useCallback(() => gridRowSelectionIdsSelector(apiRef), [apiRef]);
   const selectRow = React.useCallback((id, isSelected = true, resetSelection = false) => {
     if (!apiRef.current.isRowSelectable(id)) {
@@ -303,7 +305,7 @@ export const useGridRowSelection = (apiRef, props) => {
    * EVENTS
    */
   const isFirstRender = React.useRef(true);
-  const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
+  const removeOutdatedSelection = React.useCallback(() => {
     if (isFirstRender.current) {
       return;
     }
@@ -357,7 +359,7 @@ export const useGridRowSelection = (apiRef, props) => {
     const shouldReapplyPropagation = isNestedData && props.rowSelectionPropagation?.parents && (newSelectionModel.ids.size > 0 ||
     // In case of exclude selection, newSelectionModel.ids.size === 0 means all rows are selected
     newSelectionModel.type === 'exclude');
-    if (hasChanged || shouldReapplyPropagation && !sortModelUpdated) {
+    if (hasChanged || shouldReapplyPropagation) {
       if (shouldReapplyPropagation) {
         if (newSelectionModel.type === 'exclude') {
           const unfilteredSelectedRowIds = getRowsToBeSelected();
@@ -540,12 +542,12 @@ export const useGridRowSelection = (apiRef, props) => {
     }
     apiRef.current.setRowSelectionModel(propRowSelectionModel);
   });
-  useGridEvent(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection()));
-  useGridEvent(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));
-  useGridEvent(apiRef, 'rowSelectionCheckboxChange', runIfRowSelectionIsEnabled(handleRowSelectionCheckboxChange));
+  useGridEvent(apiRef, 'filteredRowsSet', runIf(props.rowSelection, removeOutdatedSelection));
+  useGridEvent(apiRef, 'rowClick', runIf(props.rowSelection, handleRowClick));
+  useGridEvent(apiRef, 'rowSelectionCheckboxChange', runIf(props.rowSelection, handleRowSelectionCheckboxChange));
   useGridEvent(apiRef, 'headerSelectionCheckboxChange', handleHeaderSelectionCheckboxChange);
-  useGridEvent(apiRef, 'cellMouseDown', runIfRowSelectionIsEnabled(preventSelectionOnShift));
-  useGridEvent(apiRef, 'cellKeyDown', runIfRowSelectionIsEnabled(handleCellKeyDown));
+  useGridEvent(apiRef, 'cellMouseDown', runIf(props.rowSelection, preventSelectionOnShift));
+  useGridEvent(apiRef, 'cellKeyDown', runIf(props.rowSelection, handleCellKeyDown));
 
   /*
    * EFFECTS
@@ -588,8 +590,8 @@ export const useGridRowSelection = (apiRef, props) => {
     }
   }, [apiRef, canHaveMultipleSelection, checkboxSelection, isStateControlled, props.rowSelection]);
   React.useEffect(() => {
-    runIfRowSelectionIsEnabled(removeOutdatedSelection);
-  }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
+    runIf(props.rowSelection, removeOutdatedSelection);
+  }, [props.rowSelection, removeOutdatedSelection]);
   React.useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;

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

@@ -40,7 +40,7 @@ export const checkboxPropsSelector = createSelector(gridColumnDefinitionsSelecto
     columns
   };
   let isSelectable = true;
-  if (typeof isRowSelectable === 'function') {
+  if (typeof isRowSelectable === 'function' && rowsLookup[groupId]) {
     isSelectable = isRowSelectable(rowParams);
   }
   if (!groupNode || groupNode.type !== 'group' || rowSelectionManager.has(groupId)) {
@@ -69,7 +69,7 @@ export const checkboxPropsSelector = createSelector(gridColumnDefinitionsSelecto
       row: rowsLookup[itemToTraverseId],
       columns
     };
-    const rowIsSelectable = typeof isRowSelectable === 'function' ? isRowSelectable(descendantRowParams) : true;
+    const rowIsSelectable = typeof isRowSelectable === 'function' && rowsLookup[itemToTraverseId] ? isRowSelectable(descendantRowParams) : true;
 
     // Only consider selectable rows when determining parent selection state
     if (rowIsSelectable) {

package/esm/index.js

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

package/esm/internals/index.d.ts

@@ -8,6 +8,7 @@ export { GridHeaders } from "../components/GridHeaders.js";
 export { GridToolbar, GridToolbarDivider } from "../components/toolbarV8/GridToolbar.js";
 export type { GridToolbarProps } from "../components/toolbarV8/GridToolbar.js";
 export { GridColumnSortButton } from "../components/GridColumnSortButton.js";
+export { GridFooterCell } from "../components/cell/GridFooterCell.js";
 export { GridBaseColumnHeaders } from "../components/columnHeaders/GridBaseColumnHeaders.js";
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
 export * from "../constants/signature.js";
@@ -88,6 +89,7 @@ export { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js
 export type { GridStateInitializer } from "../hooks/utils/useGridInitializeState.js";
 export type * as BaseSlots from "../models/gridBaseSlots.js";
 export type * from "../models/props/DataGridProps.js";
+export type { GridAggregationPosition, GridAggregationCellMeta } from "../models/gridAggregation.js";
 export type { GridDataSourceApiBase, GridDataSourceApi, GridDataSourceBaseOptions, GridDataSourceFetchRowsParams } from "../hooks/features/dataSource/models.js";
 export { DataSourceRowsUpdateStrategy } from "../hooks/features/dataSource/utils.js";
 export { useGridDataSourceBase } from "../hooks/features/dataSource/useGridDataSourceBase.js";

package/esm/internals/index.js

@@ -4,6 +4,7 @@ export { GridVirtualScrollerRenderZone } from "../components/virtualization/Grid
 export { GridHeaders } from "../components/GridHeaders.js";
 export { GridToolbar, GridToolbarDivider } from "../components/toolbarV8/GridToolbar.js";
 export { GridColumnSortButton } from "../components/GridColumnSortButton.js";
+export { GridFooterCell } from "../components/cell/GridFooterCell.js";
 export { GridBaseColumnHeaders } from "../components/columnHeaders/GridBaseColumnHeaders.js";
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
 export * from "../constants/signature.js";

package/esm/locales/arSD.js

@@ -23,7 +23,7 @@ const arSDGrid = {
   toolbarFiltersTooltipShow: 'اظهر المرشِحات',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} من المرشِحات النشطة` : `مرشِح نشط`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: 'بحث...',
+  toolbarQuickFilterPlaceholder: 'بحث…',
   toolbarQuickFilterLabel: 'بحث',
   toolbarQuickFilterDeleteIconLabel: 'أزال',
   // Export selector toolbar button text

package/esm/locales/daDK.js

@@ -3,8 +3,8 @@ const daDKGrid = {
   // Root
   noRowsLabel: 'Ingen rækker',
   noResultsOverlayLabel: 'Ingen resultater',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
+  noColumnsOverlayLabel: 'Ingen kolonner',
+  noColumnsOverlayManageColumns: 'Administrer kolonner',
   // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
 
   // Density selector toolbar button text
@@ -103,8 +103,7 @@ const daDKGrid = {
   'headerFilterOperator>=': 'Større end eller lig med',
   'headerFilterOperator<': 'Mindre end',
   'headerFilterOperator<=': 'Mindre end eller lig med',
-  // headerFilterClear: 'Clear filter',
-
+  headerFilterClear: 'Ryd filter',
   // Filter values text
   filterValueAny: 'hvilken som helst',
   filterValueTrue: 'positiv',

package/esm/locales/faIR.js

@@ -23,7 +23,7 @@ const faIRGrid = {
   toolbarFiltersTooltipShow: 'نمایش فیلترها',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} فیلترهای فعال` : `${count} فیلتر فعال`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: 'جستجو...',
+  toolbarQuickFilterPlaceholder: 'جستجو…',
   toolbarQuickFilterLabel: 'جستجو',
   toolbarQuickFilterDeleteIconLabel: 'حذف',
   // Export selector toolbar button text