@mui/x-data-grid 7.19.0 → 7.21.0

package/hooks/features/events/useGridEvents.js

@@ -5,6 +5,7 @@ import { useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
  */
 export function useGridEvents(apiRef, props) {
   useGridApiOptionHandler(apiRef, 'columnHeaderClick', props.onColumnHeaderClick);
+  useGridApiOptionHandler(apiRef, 'columnHeaderContextMenu', props.onColumnHeaderContextMenu);
   useGridApiOptionHandler(apiRef, 'columnHeaderDoubleClick', props.onColumnHeaderDoubleClick);
   useGridApiOptionHandler(apiRef, 'columnHeaderOver', props.onColumnHeaderOver);
   useGridApiOptionHandler(apiRef, 'columnHeaderOut', props.onColumnHeaderOut);

package/hooks/features/filter/gridFilterUtils.js

@@ -41,7 +41,7 @@ export const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiR
   let items;
   if (hasSeveralItems && disableMultipleColumnsFiltering) {
     if (process.env.NODE_ENV !== 'production') {
-      warnOnce(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+      warnOnce(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     }
     items = [model.items[0]];
   } else {

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -10,4 +10,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridScroll (method) - can be after
  * @requires useGridColumnSpanning (method) - can be after
  */
-export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "experimentalFeatures" | "signature" | "headerFilters">) => void;
+export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "experimentalFeatures" | "signature" | "headerFilters" | "unstable_listView">) => void;

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -16,6 +16,7 @@ import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector }
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
 import { enrichPageRowsWithPinnedRows, getLeftColumnIndex, getRightColumnIndex, findNonRowSpannedCell } from "./utils.js";
+import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 
 /**
  * @requires useGridSorting (method) - can be after
@@ -30,6 +31,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   const initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows;
   const isRtl = useRtl();
+  const listView = props.unstable_listView;
   const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
   const headerFilteringEnabled = props.signature !== 'DataGrid' && props.headerFilters;
 
@@ -50,7 +52,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
     }
-    const field = gridVisibleColumnFieldsSelector(apiRef)[colIndex];
+    const field = listView ? gridListColumnSelector(apiRef.current.state).field : gridVisibleColumnFieldsSelector(apiRef)[colIndex];
     const nonRowSpannedRowId = findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection);
     // `scrollToIndexes` requires a rowIndex relative to all visible rows.
     // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
@@ -61,7 +63,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       rowIndex: rowIndexRelativeToAllRows
     });
     apiRef.current.setCellFocus(nonRowSpannedRowId, field);
-  }, [apiRef, logger]);
+  }, [apiRef, logger, listView]);
   const goToHeader = React.useCallback((colIndex, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
     apiRef.current.scrollToIndexes({
@@ -384,12 +386,14 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       return;
     }
     const viewportPageSize = apiRef.current.getViewportPageSize();
-    const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
+    const getColumnIndexFn = listView ? () => 0 : apiRef.current.getColumnIndex;
+    const colIndexBefore = params.field ? getColumnIndexFn(params.field) : 0;
     const rowIndexBefore = currentPageRows.findIndex(row => row.id === params.id);
     const firstRowIndexInPage = 0;
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
-    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    const visibleColumns = listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef);
+    const lastColIndex = visibleColumns.length - 1;
     let shouldPreventDefault = true;
     switch (event.key) {
       case 'ArrowDown':
@@ -508,7 +512,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
+  }, [apiRef, currentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader, listView]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

package/hooks/features/listView/gridListViewSelectors.d.ts

@@ -0,0 +1,5 @@
+import { GridStateCommunity } from '../../../models/gridStateCommunity';
+/**
+ * Get a list column definition
+ */
+export declare const gridListColumnSelector: (state: GridStateCommunity) => import("./useGridListView").GridListViewState;

package/hooks/features/listView/gridListViewSelectors.js

@@ -0,0 +1,4 @@
+/**
+ * Get a list column definition
+ */
+export const gridListColumnSelector = state => state.listViewColumn;

package/hooks/features/listView/useGridListView.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { GridListColDef } from '../../../models/colDef/gridColDef';
+import { GridStateInitializer } from '../../utils/useGridInitializeState';
+import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+export type GridListViewState = (GridListColDef & {
+    computedWidth: number;
+}) | undefined;
+export declare const listViewStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'unstable_listColumn'>>;
+export declare function useGridListView(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_listColumn'>): void;

package/hooks/features/listView/useGridListView.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridDimensionsSelector } from "../dimensions/index.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+export const listViewStateInitializer = (state, props, apiRef) => _extends({}, state, {
+  listViewColumn: _extends({}, props.unstable_listColumn, {
+    computedWidth: getListColumnWidth(apiRef)
+  })
+});
+export function useGridListView(apiRef, props) {
+  /*
+   * EVENTS
+   */
+  const updateListColumnWidth = () => {
+    apiRef.current.setState(state => {
+      if (!state.listViewColumn) {
+        return state;
+      }
+      return _extends({}, state, {
+        listViewColumn: _extends({}, state.listViewColumn, {
+          computedWidth: getListColumnWidth(apiRef)
+        })
+      });
+    });
+  };
+  const prevInnerWidth = React.useRef(null);
+  const handleGridSizeChange = viewportInnerSize => {
+    if (prevInnerWidth.current !== viewportInnerSize.width) {
+      prevInnerWidth.current = viewportInnerSize.width;
+      updateListColumnWidth();
+    }
+  };
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', updateListColumnWidth);
+
+  /*
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    const listColumn = props.unstable_listColumn;
+    if (listColumn) {
+      apiRef.current.setState(state => {
+        return _extends({}, state, {
+          listViewColumn: _extends({}, listColumn, {
+            computedWidth: getListColumnWidth(apiRef)
+          })
+        });
+      });
+    }
+  }, [apiRef, props.unstable_listColumn]);
+}
+function getListColumnWidth(apiRef) {
+  return gridDimensionsSelector(apiRef.current.state).viewportInnerSize.width;
+}

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -246,7 +246,11 @@ export const useGridRowSelection = (apiRef, props) => {
   /*
    * EVENTS
    */
+  const isFirstRender = React.useRef(true);
   const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
+    if (isFirstRender.current) {
+      return;
+    }
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
 
@@ -254,7 +258,7 @@ export const useGridRowSelection = (apiRef, props) => {
     const selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
     let hasChanged = false;
     currentSelection.forEach(id => {
-      if (filteredRowsLookup[id] === false) {
+      if (filteredRowsLookup[id] !== true) {
         if (props.keepNonExistentRowsSelected) {
           return;
         }
@@ -408,7 +412,7 @@ export const useGridRowSelection = (apiRef, props) => {
       handleSingleRowSelection(params.id, event);
       return;
     }
-    if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
+    if (String.fromCharCode(event.keyCode) === 'A' && (event.ctrlKey || event.metaKey)) {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
@@ -462,4 +466,9 @@ export const useGridRowSelection = (apiRef, props) => {
   React.useEffect(() => {
     runIfRowSelectionIsEnabled(removeOutdatedSelection);
   }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    }
+  }, []);
 };

package/hooks/features/rowSelection/utils.js

@@ -44,21 +44,21 @@ export function getCheckboxPropsSelector(groupId, autoSelectParents) {
         isChecked: true
       };
     }
-    let selectableDescendentsCount = 0;
-    let selectedDescendentsCount = 0;
+    let selectableDescendantsCount = 0;
+    let selectedDescendantsCount = 0;
     const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
     for (let index = startIndex; index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth; index += 1) {
       const id = sortedRowIds[index];
       if (filteredRowsLookup[id] !== false) {
-        selectableDescendentsCount += 1;
+        selectableDescendantsCount += 1;
         if (rowSelectionLookup[id] !== undefined) {
-          selectedDescendentsCount += 1;
+          selectedDescendantsCount += 1;
         }
       }
     }
     return {
-      isIndeterminate: selectedDescendentsCount > 0 && selectedDescendentsCount < selectableDescendentsCount || selectedDescendentsCount === selectableDescendentsCount && rowSelectionLookup[groupId] === undefined,
-      isChecked: autoSelectParents ? selectedDescendentsCount > 0 : rowSelectionLookup[groupId] === groupId
+      isIndeterminate: selectedDescendantsCount > 0 && (selectedDescendantsCount < selectableDescendantsCount || rowSelectionLookup[groupId] === undefined),
+      isChecked: autoSelectParents ? selectedDescendantsCount > 0 : rowSelectionLookup[groupId] === groupId
     };
   });
 }

package/hooks/features/rows/gridRowsMetaInterfaces.d.ts

@@ -0,0 +1,16 @@
+import { GridRowId } from '../../../models/gridRows';
+export type HeightEntry = {
+    content: number;
+    spacingTop: number;
+    spacingBottom: number;
+    detail: number;
+    autoHeight: boolean;
+    needsFirstMeasurement: boolean;
+};
+export type HeightCache = Map<GridRowId, HeightEntry>;
+export interface GridRowsMetaInternalCache {
+    /**
+     * Map of height cache entries.
+     */
+    heights: HeightCache;
+}

package/hooks/features/rows/gridRowsMetaInterfaces.js

@@ -0,0 +1 @@
+export {};

package/hooks/features/rows/gridRowsUtils.d.ts

@@ -39,3 +39,6 @@ export declare function calculatePinnedRowsHeight(apiRef: React.MutableRefObject
 };
 export declare function getMinimalContentHeight(apiRef: React.MutableRefObject<GridApiCommunity>): string;
 export declare function computeRowsUpdates(apiRef: React.MutableRefObject<GridApiCommunity>, updates: GridRowModelUpdate[], getRowId: DataGridProcessedProps['getRowId']): GridRowModelUpdate[];
+export declare const getValidRowHeight: (rowHeightProp: any, defaultRowHeight: number, warningMessage: string) => number;
+export declare const rowHeightWarning: string;
+export declare const getRowHeightWarning: string;

package/hooks/features/rows/gridRowsUtils.js

@@ -24,7 +24,7 @@ export const buildRootGroup = () => ({
  */
 export function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
   if (id == null) {
-    throw new Error(['MUI X: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
+    throw new Error(['MUI X: The Data Grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
   }
 }
 export const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) => {
@@ -306,4 +306,17 @@ export function computeRowsUpdates(apiRef, updates, getRowId) {
     }
   });
   return nonPinnedRowsUpdates;
-}
+}
+let warnedOnceInvalidRowHeight = false;
+export const getValidRowHeight = (rowHeightProp, defaultRowHeight, warningMessage) => {
+  if (typeof rowHeightProp === 'number' && rowHeightProp > 0) {
+    return rowHeightProp;
+  }
+  if (process.env.NODE_ENV !== 'production' && !warnedOnceInvalidRowHeight && typeof rowHeightProp !== 'undefined' && rowHeightProp !== null) {
+    console.warn(warningMessage);
+    warnedOnceInvalidRowHeight = true;
+  }
+  return defaultRowHeight;
+};
+export const rowHeightWarning = [`MUI X: The \`rowHeight\` prop should be a number greater than 0.`, `The default value will be used instead.`].join('\n');
+export const getRowHeightWarning = [`MUI X: The \`getRowHeight\` prop should return a number greater than 0 or 'auto'.`, `The default value will be used instead.`].join('\n');

package/hooks/features/rows/useGridParamsApi.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 export declare class MissingRowIdError extends Error {
 }
 /**
@@ -10,4 +11,4 @@ export declare class MissingRowIdError extends Error {
  * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
-export declare function useGridParamsApi(apiRef: React.MutableRefObject<GridPrivateApiCommunity>): void;
+export declare function useGridParamsApi(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_listView'>): void;

package/hooks/features/rows/useGridParamsApi.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement } from "../../../utils/domUtils.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridFocusCellSelector, gridTabIndexCellSelector } from "../focus/gridFocusStateSelector.js";
+import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 export class MissingRowIdError extends Error {}
 
 /**
@@ -12,7 +13,7 @@ export class MissingRowIdError extends Error {}
  * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
-export function useGridParamsApi(apiRef) {
+export function useGridParamsApi(apiRef, props) {
   const getColumnHeaderParams = React.useCallback(field => ({
     field,
     colDef: apiRef.current.getColumn(field)
@@ -30,7 +31,7 @@ export function useGridParamsApi(apiRef) {
     return params;
   }, [apiRef]);
   const getCellParams = React.useCallback((id, field) => {
-    const colDef = apiRef.current.getColumn(field);
+    const colDef = props.unstable_listView ? gridListColumnSelector(apiRef.current.state) : apiRef.current.getColumn(field);
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
@@ -59,7 +60,7 @@ export function useGridParamsApi(apiRef) {
     }
     params.isEditable = colDef && apiRef.current.isCellEditable(params);
     return params;
-  }, [apiRef]);
+  }, [apiRef, props.unstable_listView]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
     const row = apiRef.current.getRow(id);

package/hooks/features/rows/useGridRowSpanning.js

@@ -202,7 +202,7 @@ export const useGridRowSpanning = (apiRef, props) => {
     }
     const rangeToProcess = getUnprocessedRange({
       firstRowIndex: renderContext.firstRowIndex,
-      lastRowIndex: renderContext.lastRowIndex - 1
+      lastRowIndex: Math.min(renderContext.lastRowIndex - 1, range.lastRowIndex)
     }, processedRange.current);
     if (rangeToProcess === null) {
       return;