@mui/x-data-grid 8.22.0 → 8.23.0

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,8 @@ 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) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -133,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 => {
@@ -163,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;
@@ -320,6 +333,11 @@ export const useGridColumnResize = (apiRef, props) => {
       apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
     });
   };
+  const setCellElementsRef = () => {
+    if (refs.columnHeaderElement) {
+      refs.cellElements = findGridCellElementsFromCol(refs.columnHeaderElement, apiRef.current);
+    }
+  };
   const storeReferences = (colDef, separator, xStart) => {
     const root = apiRef.current.rootElementRef.current;
     refs.initialColWidth = colDef.computedWidth;
@@ -331,7 +349,7 @@ export const useGridColumnResize = (apiRef, props) => {
       refs.headerFilterElement = headerFilterElement;
     }
     refs.groupHeaderElements = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
-    refs.cellElements = findGridCellElementsFromCol(refs.columnHeaderElement, apiRef.current);
+    setCellElementsRef();
     refs.fillerLeft = findGridElement(apiRef.current, isRtl ? 'filler--pinnedRight' : 'filler--pinnedLeft');
     refs.fillerRight = findGridElement(apiRef.current, isRtl ? 'filler--pinnedLeft' : 'filler--pinnedRight');
     const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
@@ -578,6 +596,15 @@ export const useGridColumnResize = (apiRef, props) => {
   useGridEvent(apiRef, 'columnResizeStart', handleResizeStart);
   useGridEvent(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
   useGridEvent(apiRef, 'columnSeparatorDoubleClick', handleColumnSeparatorDoubleClick);
+  useGridEvent(apiRef, 'rowsSet', () => {
+    // if the user is still resizing the column, update the cell references included in the resize action
+    if (gridResizingColumnFieldSelector(apiRef) !== '') {
+      // wait until the rows are in the DOM
+      requestAnimationFrame(() => {
+        setCellElementsRef();
+      });
+    }
+  });
   useGridEventPriority(apiRef, 'columnResize', props.onColumnResize);
   useGridEventPriority(apiRef, 'columnWidthChange', props.onColumnWidthChange);
 };

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) {
@@ -283,9 +280,17 @@ export const createColumnsState = ({
         }
       }
     });
-    columnsState.lookup[field] = resolveProps(existingState, _extends({}, getDefaultColTypeDef(newColumn.type), newColumn, {
-      hasBeenResized
-    }));
+    const mergedProps = _extends({}, getDefaultColTypeDef(newColumn.type), {
+      hasBeenResized,
+      field
+    });
+    let key;
+    for (key in newColumn) {
+      if (newColumn[key] !== undefined && key !== 'field') {
+        mergedProps[key] = newColumn[key];
+      }
+    }
+    columnsState.lookup[field] = resolveProps(existingState, mergedProps);
   });
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
     Object.keys(columnsState.lookup).forEach(field => {

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/keyboardNavigation/useGridKeyboardNavigation.js

@@ -106,7 +106,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       // There is one exception for the checkBoxHeader
       return;
     }
-    if (!isNavigationKey(event.key) && event.key !== 'Tab') {
+    if (!isNavigationKey(event.key) && event.key !== 'Tab' && event.key !== 'Enter') {
       return;
     }
 

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)) {
@@ -63,10 +63,21 @@ export const checkboxPropsSelector = createSelector(gridColumnDefinitionsSelecto
     if (node?.type === 'group') {
       node.children.forEach(traverseDescendants);
     }
-    if (rowSelectionManager.has(itemToTraverseId)) {
-      hasSelectedDescendant = true;
-    } else {
-      hasUnSelectedDescendant = true;
+    // Check if row is selectable before considering it for parent selection state
+    const descendantRowParams = {
+      id: itemToTraverseId,
+      row: rowsLookup[itemToTraverseId],
+      columns
+    };
+    const rowIsSelectable = typeof isRowSelectable === 'function' && rowsLookup[itemToTraverseId] ? isRowSelectable(descendantRowParams) : true;
+
+    // Only consider selectable rows when determining parent selection state
+    if (rowIsSelectable) {
+      if (rowSelectionManager.has(itemToTraverseId)) {
+        hasSelectedDescendant = true;
+      } else {
+        hasUnSelectedDescendant = true;
+      }
     }
   };
   traverseDescendants(groupId);
@@ -126,21 +137,37 @@ export const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendant
   }
   if (autoSelectParents) {
     const checkAllDescendantsSelected = rowId => {
-      if (!rowSelectionManager.has(rowId) && !selectedDescendants.has(rowId)) {
-        return false;
-      }
       const node = tree[rowId];
       if (!node) {
         return false;
       }
+      // For non-group nodes, check if it's selected or if it's non-selectable
       if (node.type !== 'group') {
+        // If the row is selectable, it must be selected
+        if (apiRef.current.isRowSelectable(rowId)) {
+          return rowSelectionManager.has(rowId) || selectedDescendants.has(rowId);
+        }
+        // Non-selectable rows don't affect parent selection
         return true;
       }
+      // For group nodes, check if it's selected or all its children are selected
+      if (rowSelectionManager.has(rowId) || selectedDescendants.has(rowId)) {
+        return true;
+      }
+      // Recursively check all children
       return node.children.every(checkAllDescendantsSelected);
     };
     const traverseParents = rowId => {
       const siblings = getFilteredRowNodeSiblings(tree, filteredRows, rowId);
-      if (siblings.length === 0 || siblings.every(checkAllDescendantsSelected)) {
+      // Check if all selectable siblings are selected
+      const allSelectableSiblingsSelected = siblings.every(siblingId => {
+        // Non-selectable siblings don't affect parent selection
+        if (!apiRef.current.isRowSelectable(siblingId)) {
+          return true;
+        }
+        return checkAllDescendantsSelected(siblingId);
+      });
+      if (siblings.length === 0 || allSelectableSiblingsSelected) {
         const rowNode = tree[rowId];
         const parent = rowNode?.parent;
         if (parent != null && parent !== GRID_ROOT_GROUP_ID && apiRef.current.isRowSelectable(parent)) {

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

@@ -191,6 +191,7 @@ export const useGridRowSpanning = (apiRef, props) => {
   useGridEvent(apiRef, 'paginationModelChange', runIf(props.rowSpanning, resetRowSpanningState));
   useGridEvent(apiRef, 'filteredRowsSet', runIf(props.rowSpanning, resetRowSpanningState));
   useGridEvent(apiRef, 'columnsChange', runIf(props.rowSpanning, resetRowSpanningState));
+  useGridEvent(apiRef, 'rowExpansionChange', runIf(props.rowSpanning, resetRowSpanningState));
   React.useEffect(() => {
     const store = apiRef.current.virtualizer?.store;
     if (!store) {

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.22.0
+ * @mui/x-data-grid v8.23.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/ptPT.d.ts

@@ -1 +1,2 @@
-export declare const ptPT: import("../internals/index.js").Localization;
+import { Localization } from "../utils/getGridLocalization.js";
+export declare const ptPT: Localization;