@mui/x-data-grid 5.17.4 → 6.0.0-alpha.0

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

@@ -217,10 +217,11 @@ export const applyInitialState = (columnsState, initialState) => {
     newColumnLookup[field] = newColDef;
   }
 
-  const newColumnsState = {
+  const newColumnsState = _extends({}, columnsState, {
     all: newOrderedFields,
     lookup: newColumnLookup
-  };
+  });
+
   return newColumnsState;
 };
 /**
@@ -250,31 +251,32 @@ export const createColumnsState = ({
   columnsToUpsert,
   initialState,
   columnTypes,
-  currentColumnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
-  shouldRegenColumnVisibilityModelFromColumns,
+  columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   keepOnlyColumnsToUpsert = false
 }) => {
   const isInsideStateInitializer = !apiRef.current.state.columns;
-  let columnsStateWithoutColumnVisibilityModel;
+  let columnsState;
 
   if (isInsideStateInitializer) {
-    columnsStateWithoutColumnVisibilityModel = {
+    columnsState = {
       all: [],
-      lookup: {}
+      lookup: {},
+      columnVisibilityModel
     };
   } else {
     const currentState = gridColumnsSelector(apiRef.current.state);
-    columnsStateWithoutColumnVisibilityModel = {
+    columnsState = {
       all: keepOnlyColumnsToUpsert ? [] : [...currentState.all],
-      lookup: _extends({}, currentState.lookup) // Will be cleaned later if keepOnlyColumnsToUpsert=true
-
+      lookup: _extends({}, currentState.lookup),
+      // Will be cleaned later if keepOnlyColumnsToUpsert=true
+      columnVisibilityModel
     };
   }
 
   let columnsToKeep = {};
 
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
-    columnsToKeep = Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).reduce((acc, key) => _extends({}, acc, {
+    columnsToKeep = Object.keys(columnsState.lookup).reduce((acc, key) => _extends({}, acc, {
       [key]: false
     }), {});
   }
@@ -286,7 +288,7 @@ export const createColumnsState = ({
     } = newColumn;
     columnsToUpsertLookup[field] = true;
     columnsToKeep[field] = true;
-    let existingState = columnsStateWithoutColumnVisibilityModel.lookup[field];
+    let existingState = columnsState.lookup[field];
 
     if (existingState == null) {
       // New Column
@@ -295,9 +297,9 @@ export const createColumnsState = ({
         field,
         hasBeenResized: false
       });
-      columnsStateWithoutColumnVisibilityModel.all.push(field);
+      columnsState.all.push(field);
     } else if (keepOnlyColumnsToUpsert) {
-      columnsStateWithoutColumnVisibilityModel.all.push(field);
+      columnsState.all.push(field);
     }
 
     let hasBeenResized = existingState.hasBeenResized;
@@ -310,95 +312,22 @@ export const createColumnsState = ({
         }
       }
     });
-    columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
-      hide: newColumn.hide == null ? false : newColumn.hide
-    }, newColumn, {
+    columnsState.lookup[field] = _extends({}, existingState, newColumn, {
       hasBeenResized
     });
   });
 
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
-    Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).forEach(field => {
+    Object.keys(columnsState.lookup).forEach(field => {
       if (!columnsToKeep[field]) {
-        delete columnsStateWithoutColumnVisibilityModel.lookup[field];
+        delete columnsState.lookup[field];
       }
     });
   }
 
-  const columnsLookupBeforePreProcessing = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup);
-
-  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
-
-  let columnVisibilityModel = {};
-
-  if (shouldRegenColumnVisibilityModelFromColumns) {
-    let hasModelChanged = false;
-
-    const newColumnVisibilityModel = _extends({}, currentColumnVisibilityModel);
-
-    if (isInsideStateInitializer) {
-      columnsStateWithPreProcessing.all.forEach(field => {
-        newColumnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
-      });
-    } else if (keepOnlyColumnsToUpsert) {
-      // At this point, `keepOnlyColumnsToUpsert` has a new meaning: keep the columns
-      // passed via `columnToUpsert` + columns added by the pre-processors. We do the following
-      // cleanup because a given column may have been removed from the `columns` prop but it still
-      // exists in the state.
-      Object.keys(newColumnVisibilityModel).forEach(field => {
-        if (!columnsStateWithPreProcessing.lookup[field]) {
-          delete newColumnVisibilityModel[field];
-          hasModelChanged = true;
-        }
-      });
-    }
-
-    columnsStateWithPreProcessing.all.forEach(field => {
-      // If neither the `columnsToUpsert` nor the pre-processors updated the column,
-      // Then we don't want to update the visibility status of the column in the model.
-      if (!columnsToUpsertLookup[field] && columnsLookupBeforePreProcessing[field] === columnsStateWithPreProcessing.lookup[field]) {
-        return;
-      } // We always assume that a column not in the model is visible by default. However, there's an
-      // edge case where the column is not in the model but it also doesn't exist in the `columns`
-      // prop, meaning that the column is being added. In that case, we assume that the column was
-      // not visible before for it be added to the model.
-
-
-      let isVisibleBefore = currentColumnVisibilityModel[field];
-
-      if (isVisibleBefore === undefined) {
-        if (isInsideStateInitializer) {
-          isVisibleBefore = true;
-        } else {
-          const currentState = gridColumnsSelector(apiRef.current.state);
-          isVisibleBefore = !!currentState.lookup[field];
-        }
-      }
-
-      const isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
-
-      if (isVisibleAfter !== isVisibleBefore) {
-        hasModelChanged = true;
-        newColumnVisibilityModel[field] = isVisibleAfter;
-      }
-    });
-
-    if (hasModelChanged || isInsideStateInitializer) {
-      columnVisibilityModel = newColumnVisibilityModel;
-    } else {
-      columnVisibilityModel = currentColumnVisibilityModel;
-    }
-  } else {
-    columnVisibilityModel = currentColumnVisibilityModel;
-  }
-
+  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-
-  const columnsState = _extends({}, columnsStateWithPortableColumns, {
-    columnVisibilityModel
-  });
-
-  return hydrateColumnsWidth(columnsState, apiRef.current.getRootDimensions?.()?.viewportInnerSize.width ?? 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, apiRef.current.getRootDimensions?.()?.viewportInnerSize.width ?? 0);
 };
 export const mergeColumnsState = columnsState => state => _extends({}, state, {
   columns: columnsState

package/modern/hooks/features/columns/useGridColumns.js

@@ -3,24 +3,19 @@ import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
-import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 import { hydrateColumnsWidth, computeColumnTypes, createColumnsState, mergeColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
 import { GridPreferencePanelsValue } from '../preferencesPanel';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const columnsStateInitializer = (state, props, apiRef) => {
-  const isUsingColumnVisibilityModel = !!props.columnVisibilityModel || !!props.initialState?.columns?.columnVisibilityModel;
-  apiRef.current.unstable_caches.columns = {
-    isUsingColumnVisibilityModel
-  };
   const columnsTypes = computeColumnTypes(props.columnTypes);
   const columnsState = createColumnsState({
     apiRef,
     columnTypes: columnsTypes,
     columnsToUpsert: props.columns,
     initialState: props.initialState?.columns,
-    shouldRegenColumnVisibilityModelFromColumns: !isUsingColumnVisibilityModel,
-    currentColumnVisibilityModel: props.columnVisibilityModel ?? props.initialState?.columns?.columnVisibilityModel ?? {},
+    columnVisibilityModel: props.columnVisibilityModel ?? props.initialState?.columns?.columnVisibilityModel ?? {},
     keepOnlyColumnsToUpsert: true
   });
   return _extends({}, state, {
@@ -77,8 +72,7 @@ export function useGridColumns(apiRef, props) {
           columnTypes,
           columnsToUpsert: [],
           initialState: undefined,
-          shouldRegenColumnVisibilityModelFromColumns: false,
-          currentColumnVisibilityModel: model,
+          columnVisibilityModel: model,
           keepOnlyColumnsToUpsert: false
         })
       }));
@@ -91,41 +85,21 @@ export function useGridColumns(apiRef, props) {
       columnTypes,
       columnsToUpsert: columns,
       initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: true,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
   }, [apiRef, setGridColumnsState, columnTypes]);
   const updateColumn = React.useCallback(column => apiRef.current.updateColumns([column]), [apiRef]);
   const setColumnVisibility = React.useCallback((field, isVisible) => {
-    // We keep updating the `hide` option of `GridColDef` when not controlling the model to avoid any breaking change.
-    // `updateColumns` take care of updating the model itself if needs be.
-    // TODO v6: stop using the `hide` field even when the model is not defined
-    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
-      const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
-      const isCurrentlyVisible = columnVisibilityModel[field] ?? true;
-
-      if (isVisible !== isCurrentlyVisible) {
-        const newModel = _extends({}, columnVisibilityModel, {
-          [field]: isVisible
-        });
-
-        apiRef.current.setColumnVisibilityModel(newModel);
-      }
-    } else {
-      const column = apiRef.current.getColumn(field);
+    const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
+    const isCurrentlyVisible = columnVisibilityModel[field] ?? true;
 
-      const newColumn = _extends({}, column, {
-        hide: !isVisible
+    if (isVisible !== isCurrentlyVisible) {
+      const newModel = _extends({}, columnVisibilityModel, {
+        [field]: isVisible
       });
 
-      apiRef.current.updateColumns([newColumn]);
-      const params = {
-        field,
-        colDef: newColumn,
-        isVisible
-      };
-      apiRef.current.publishEvent('columnVisibilityChange', params);
+      apiRef.current.setColumnVisibilityModel(newModel);
     }
   }, [apiRef]);
   const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
@@ -188,19 +162,16 @@ export function useGridColumns(apiRef, props) {
 
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const columnsStateToExport = {};
-
-    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
-      const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
-      const shouldExportColumnVisibilityModel = // Always export if the `exportOnlyDirtyModels` property is activated
-      !context.exportOnlyDirtyModels || // Always export if the model is controlled
-      props.columnVisibilityModel != null || // Always export if the model has been initialized
-      // TODO v6 Do a nullish check instead to export even if the initial model equals "{}"
-      Object.keys(props.initialState?.columns?.columnVisibilityModel ?? {}).length > 0 || // Always export if the model is not empty
-      Object.keys(columnVisibilityModelToExport).length > 0;
-
-      if (shouldExportColumnVisibilityModel) {
-        columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
-      }
+    const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
+    const shouldExportColumnVisibilityModel = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the model is controlled
+    props.columnVisibilityModel != null || // Always export if the model has been initialized
+    // TODO v6 Do a nullish check instead to export even if the initial model equals "{}"
+    Object.keys(props.initialState?.columns?.columnVisibilityModel ?? {}).length > 0 || // Always export if the model is not empty
+    Object.keys(columnVisibilityModelToExport).length > 0;
+
+    if (shouldExportColumnVisibilityModel) {
+      columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
     }
 
     columnsStateToExport.orderedFields = gridColumnFieldsSelector(apiRef);
@@ -231,7 +202,7 @@ export function useGridColumns(apiRef, props) {
     });
   }, [apiRef, props.columnVisibilityModel, props.initialState?.columns]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
-    const columnVisibilityModelToImport = apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel ? context.stateToRestore.columns?.columnVisibilityModel : undefined;
+    const columnVisibilityModelToImport = context.stateToRestore.columns?.columnVisibilityModel;
     const initialState = context.stateToRestore.columns;
 
     if (columnVisibilityModelToImport == null && initialState == null) {
@@ -243,8 +214,7 @@ export function useGridColumns(apiRef, props) {
       columnTypes,
       columnsToUpsert: [],
       initialState,
-      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
-      currentColumnVisibilityModel: columnVisibilityModelToImport,
+      columnVisibilityModel: columnVisibilityModelToImport,
       keepOnlyColumnsToUpsert: false
     });
     apiRef.current.setState(mergeColumnsState(columnsState));
@@ -280,7 +250,6 @@ export function useGridColumns(apiRef, props) {
   };
 
   useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
-  useGridApiOptionHandler(apiRef, 'columnVisibilityChange', props.onColumnVisibilityChange);
   /**
    * APPLIERS
    */
@@ -292,7 +261,6 @@ export function useGridColumns(apiRef, props) {
       columnTypes,
       columnsToUpsert: [],
       initialState: undefined,
-      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       keepOnlyColumnsToUpsert: false
     });
     setGridColumnsState(columnsState);
@@ -322,7 +290,6 @@ export function useGridColumns(apiRef, props) {
       columnTypes,
       initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
-      shouldRegenColumnVisibilityModelFromColumns: !apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel,
       columnsToUpsert: props.columns,
       keepOnlyColumnsToUpsert: true
     });

package/modern/hooks/features/selection/useGridSelection.js

@@ -357,7 +357,7 @@ export const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    if (event.key.toLowerCase() === 'a' && (event.ctrlKey || event.metaKey)) {
+    if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.4
+/** @license MUI v6.0.0-alpha.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/models/events/index.js

@@ -1,4 +1,3 @@
 export * from './gridEventListener';
 export * from './gridEventPublisher';
-export * from './gridEventLookup';
-export * from './gridEvents';
+export * from './gridEventLookup';

package/modern/models/params/index.js

@@ -1,7 +1,6 @@
 export * from './gridColumnHeaderParams';
 export * from './gridColumnOrderChangeParams';
 export * from './gridColumnResizeParams';
-export * from './gridColumnVisibilityChangeParams';
 export * from './gridEditCellParams';
 export * from './gridRowParams';
 export * from './gridScrollParams';

package/node/DataGrid/DataGrid.js

@@ -498,16 +498,6 @@ DataGridRaw.propTypes = {
    */
   onColumnOrderChange: _propTypes.default.func,
 
-  /**
-   * Callback fired when a column visibility changes.
-   * Only works when no `columnVisibilityModel` is provided and if we change the visibility of a single column at a time.
-   * @param {GridColumnVisibilityChangeParams} params With all properties from [[GridColumnVisibilityChangeParams]].
-   * @param {MuiEvent<{}>} event The event object.
-   * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated Use `onColumnVisibilityModelChange` instead.
-   */
-  onColumnVisibilityChange: _propTypes.default.func,
-
   /**
    * Callback fired when the column visibility model changes.
    * @param {GridColumnVisibilityModel} model The new model.
@@ -744,7 +734,7 @@ DataGridRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: _propTypes.default.array.isRequired,
+  rows: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
 
   /**
    * Sets the type of space between rows added by `getRowSpacing`.

package/node/colDef/gridStringColDef.js

@@ -18,7 +18,6 @@ const GRID_STRING_COL_DEF = {
   width: 100,
   minWidth: 50,
   maxWidth: Infinity,
-  hide: false,
   hideable: true,
   sortable: true,
   resizable: true,

package/node/components/cell/GridActionsCell.js

@@ -285,7 +285,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/cell/GridBooleanCell.js

@@ -131,7 +131,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/cell/GridEditBooleanCell.js

@@ -173,7 +173,7 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/cell/GridEditDateCell.js

@@ -229,7 +229,7 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/cell/GridEditInputCell.js

@@ -205,7 +205,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object,
+  row: _propTypes.default.any,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/cell/GridEditSingleSelectCell.js

@@ -276,7 +276,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -198,7 +198,7 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.

package/node/components/containers/GridRootStyles.js

@@ -136,6 +136,8 @@ const GridRootStyles = (0, _styles.styled)('div', {
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
+    overflowAnchor: 'none',
+    // Keep the same scrolling position
     [`&.${_gridClasses.gridClasses.autoHeight}`]: {
       height: 'auto',
       [`& .${_gridClasses.gridClasses['row--lastVisible']} .${_gridClasses.gridClasses.cell}`]: {

package/node/components/panel/GridColumnsPanel.js

@@ -130,25 +130,11 @@ function GridColumnsPanel(props) {
   };
 
   const toggleAllColumns = React.useCallback(isVisible => {
-    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
-      if (isVisible) {
-        return apiRef.current.setColumnVisibilityModel({});
-      }
-
-      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.filter(col => col.hideable !== false).map(col => [col.field, false])));
-    } // TODO v6: Remove
-
-
-    return apiRef.current.updateColumns(columns.map(col => {
-      if (col.hideable !== false) {
-        return {
-          field: col.field,
-          hide: !isVisible
-        };
-      }
+    if (isVisible) {
+      return apiRef.current.setColumnVisibilityModel({});
+    }
 
-      return col;
-    }));
+    return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.filter(col => col.hideable !== false).map(col => [col.field, false])));
   }, [apiRef, columns]);
   const handleSearchValueChange = React.useCallback(event => {
     setSearchValue(event.target.value);