@mui/x-data-grid 5.7.0 → 5.8.0

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

@@ -5,14 +5,14 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
-import { isGridCellRoot } from '../../../utils/domUtils';
 import { gridSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from './gridSelectionSelector';
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../pagination';
+import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
 import { gridVisibleSortedRowIdsSelector } from '../filter/gridFilterSelector';
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
 import { GridCellModes } from '../../../models/gridEditRowModel';
-import { isKeyboardEvent } from '../../../utils/keyboardUtils';
-import { getVisibleRows } from '../../utils/useGridVisibleRows';
+import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
+import { getVisibleRows, useGridVisibleRows } from '../../utils/useGridVisibleRows';
 
 const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   if (selectionModelProp == null) {
@@ -34,8 +34,10 @@ export const selectionStateInitializer = (state, props) => _extends({}, state, {
   selection: getSelectionModelPropValue(props.selectionModel) ?? []
 });
 /**
- * @requires useGridRows (state, method)
- * @requires useGridParamsApi (method)
+ * @requires useGridRows (state, method) - can be after
+ * @requires useGridParamsApi (method) - can be after
+ * @requires useGridFocus (state) - can be after
+ * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
 
 export const useGridSelection = (apiRef, props) => {
@@ -60,7 +62,8 @@ export const useGridSelection = (apiRef, props) => {
     paginationMode
   } = props;
   const canHaveMultipleSelection = !disableMultipleSelection || checkboxSelection;
-  const expandRowRangeSelection = React.useCallback(id => {
+  const visibleRows = useGridVisibleRows(apiRef, props);
+  const expandMouseRowRangeSelection = React.useCallback(id => {
     let endId = id;
     const startId = lastRowToggled.current ?? id;
     const isSelected = apiRef.current.isRowSelected(id);
@@ -165,12 +168,13 @@ export const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    logger.debug(`Expanding selection from row ${startId} to row ${endId}`);
-    const visibleRowIds = gridVisibleSortedRowIdsSelector(apiRef);
-    const startIndex = visibleRowIds.indexOf(startId);
-    const endIndex = visibleRowIds.indexOf(endId);
+    logger.debug(`Expanding selection from row ${startId} to row ${endId}`); // Using rows from all pages allow to select a range across several pages
+
+    const allPagesRowIds = gridVisibleSortedRowIdsSelector(apiRef);
+    const startIndex = allPagesRowIds.indexOf(startId);
+    const endIndex = allPagesRowIds.indexOf(endId);
     const [start, end] = startIndex > endIndex ? [endIndex, startIndex] : [startIndex, endIndex];
-    const rowsBetweenStartAndEnd = visibleRowIds.slice(start, end + 1);
+    const rowsBetweenStartAndEnd = allPagesRowIds.slice(start, end + 1);
     apiRef.current.selectRows(rowsBetweenStartAndEnd, isSelected, resetSelection);
   }, [apiRef, logger]);
   const selectionApi = {
@@ -244,11 +248,11 @@ export const useGridSelection = (apiRef, props) => {
     }
 
     if (event.shiftKey && (canHaveMultipleSelection || checkboxSelection)) {
-      expandRowRangeSelection(params.id);
+      expandMouseRowRangeSelection(params.id);
     } else {
       handleSingleRowSelection(params.id, event);
     }
-  }, [disableSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandRowRangeSelection, handleSingleRowSelection]);
+  }, [disableSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
   const preventSelectionOnShift = React.useCallback((params, event) => {
     if (canHaveMultipleSelection && event.shiftKey) {
       window.getSelection()?.removeAllRanges();
@@ -256,35 +260,78 @@ export const useGridSelection = (apiRef, props) => {
   }, [canHaveMultipleSelection]);
   const handleRowSelectionCheckboxChange = React.useCallback((params, event) => {
     if (event.nativeEvent.shiftKey) {
-      expandRowRangeSelection(params.id);
+      expandMouseRowRangeSelection(params.id);
     } else {
       apiRef.current.selectRow(params.id, params.value);
     }
-  }, [apiRef, expandRowRangeSelection]);
+  }, [apiRef, expandMouseRowRangeSelection]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
     const shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
     const rowsToBeSelected = shouldLimitSelectionToCurrentPage ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridVisibleSortedRowIdsSelector(apiRef);
     apiRef.current.selectRows(rowsToBeSelected, params.value);
   }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination]);
   const handleCellKeyDown = React.useCallback((params, event) => {
-    // Ignore portal
+    // Get the most recent cell mode because it may have been changed by another listener
+    if (apiRef.current.getCellMode(params.id, params.field) === GridCellModes.Edit) {
+      return;
+    } // Ignore portal
     // Do not apply shortcuts if the focus is not on the cell root component
-    // TODO replace with !event.currentTarget.contains(event.target as Element)
-    if (!isGridCellRoot(event.target)) {
+
+
+    if (!event.currentTarget.contains(event.target)) {
       return;
-    } // Get the most recent params because the cell mode may have changed by another listener
+    }
 
+    if (isNavigationKey(event.key) && event.shiftKey) {
+      // The cell that has focus after the keyboard navigation
+      const focusCell = gridFocusCellSelector(apiRef);
 
-    const cellParams = apiRef.current.getCellParams(params.id, params.field);
-    const isEditMode = cellParams.cellMode === GridCellModes.Edit;
+      if (focusCell && focusCell.id !== params.id) {
+        event.preventDefault();
+        const isNextRowSelected = apiRef.current.isRowSelected(focusCell.id);
 
-    if (isEditMode) {
-      return;
+        if (!canHaveMultipleSelection) {
+          apiRef.current.selectRow(focusCell.id, !isNextRowSelected, true);
+          return;
+        }
+
+        const newRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(focusCell.id);
+        const previousRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(params.id);
+        let start;
+        let end;
+
+        if (newRowIndex > previousRowIndex) {
+          if (isNextRowSelected) {
+            // We are navigating to the bottom of the page and adding selected rows
+            start = previousRowIndex;
+            end = newRowIndex - 1;
+          } else {
+            // We are navigating to the bottom of the page and removing selected rows
+            start = previousRowIndex;
+            end = newRowIndex;
+          }
+        } else {
+          // eslint-disable-next-line no-lonely-if
+          if (isNextRowSelected) {
+            // We are navigating to the top of the page and removing selected rows
+            start = newRowIndex + 1;
+            end = previousRowIndex;
+          } else {
+            // We are navigating to the top of the page and adding selected rows
+            start = newRowIndex;
+            end = previousRowIndex;
+          }
+        }
+
+        const rowsBetweenStartAndEnd = visibleRows.rows.slice(start, end + 1).map(row => row.id);
+        apiRef.current.selectRows(rowsBetweenStartAndEnd, !isNextRowSelected);
+        return;
+      }
     }
 
     if (event.key === ' ' && event.shiftKey) {
       event.preventDefault();
-      handleSingleRowSelection(cellParams.id, event);
+      handleSingleRowSelection(params.id, event);
       return;
     }
 
@@ -292,7 +339,7 @@ export const useGridSelection = (apiRef, props) => {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
-  }, [apiRef, handleSingleRowSelection, selectRows]);
+  }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
   useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, removeOutdatedSelection);
   useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
   useGridApiEventHandler(apiRef, GridEvents.rowSelectionCheckboxChange, handleRowSelectionCheckboxChange);

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { getDataGridUtilityClass } from '../../../constants';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef';
 
@@ -43,5 +43,5 @@ export const useGridSelectionPreProcessors = (apiRef, props) => {
 
     return columnsState;
   }, [apiRef, classes, props.checkboxSelection]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateSelectionColumn);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateSelectionColumn);
 };

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

@@ -12,7 +12,7 @@ import { gridRowIdsSelector, gridRowTreeSelector } from '../rows';
 import { useFirstRender } from '../../utils/useFirstRender';
 import { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from '../../core/strategyProcessing';
 import { buildAggregatedSortingApplier, mergeStateWithSortModel, getNextGridSortDirection, sanitizeSortModel } from './gridSortingUtils';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 export const sortingStateInitializer = (state, props) => {
   const sortModel = props.sortModel ?? props.initialState?.sorting?.sortModel ?? [];
   return _extends({}, state, {
@@ -180,8 +180,8 @@ export const useGridSorting = (apiRef, props) => {
     const rowTree = gridRowTreeSelector(apiRef);
     return params.sortRowList(Object.values(rowTree));
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'sorting', flatSortingMethod);
   /**
    * EVENTS

package/modern/hooks/features/statePersistence/useGridStatePersistence.js

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { useGridApiMethod } from '../../utils';
 export const useGridStatePersistence = apiRef => {
   const exportState = React.useCallback(() => {
-    const stateToExport = apiRef.current.unstable_applyPreProcessors('exportState', {});
+    const stateToExport = apiRef.current.unstable_applyPipeProcessors('exportState', {});
     return stateToExport;
   }, [apiRef]);
   const restoreState = React.useCallback(stateToRestore => {
-    const response = apiRef.current.unstable_applyPreProcessors('restoreState', {
+    const response = apiRef.current.unstable_applyPipeProcessors('restoreState', {
       callbacks: []
     }, {
       stateToRestore

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.7.0
+/** @license MUI v5.8.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/internals/index.js

@@ -3,7 +3,7 @@ export { GridVirtualScrollerContent } from '../components/virtualization/GridVir
 export { GridVirtualScrollerRenderZone } from '../components/virtualization/GridVirtualScrollerRenderZone';
 export { GridColumnHeaders } from '../components/columnHeaders/GridColumnHeaders';
 export { GridColumnHeadersInner } from '../components/columnHeaders/GridColumnHeadersInner';
-export { useGridRegisterPreProcessor } from '../hooks/core/preProcessing';
+export { useGridRegisterPipeProcessor } from '../hooks/core/pipeProcessing';
 export { useGridRegisterStrategyProcessor } from '../hooks/core/strategyProcessing';
 export { useGridInitialization } from '../hooks/core/useGridInitialization';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
@@ -15,8 +15,7 @@ export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 export { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
 export { useGridFocus, focusStateInitializer } from '../hooks/features/focus/useGridFocus';
-export { useGridKeyboard } from '../hooks/features/keyboard/useGridKeyboard';
-export { useGridKeyboardNavigation } from '../hooks/features/keyboard/useGridKeyboardNavigation';
+export { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 export { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
 export { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
 export { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new } from '../hooks/features/editRows/useGridEditing.new';

package/modern/locales/daDK.js

@@ -6,7 +6,7 @@ const daDKGrid = {
   noResultsOverlayLabel: 'Ingen resultater',
   errorOverlayDefaultLabel: 'Der skete en fejl.',
   // Density selector toolbar button text
-  // toolbarDensity: 'Density',
+  toolbarDensity: 'Tæthed',
   toolbarDensityLabel: 'Tæthed',
   toolbarDensityCompact: 'Kompakt',
   toolbarDensityStandard: 'Standard',
@@ -15,7 +15,7 @@ const daDKGrid = {
   toolbarColumns: 'Kolonne',
   toolbarColumnsLabel: 'Vælg kolonne',
   // Filters toolbar button text
-  // toolbarFilters: 'Filters',
+  toolbarFilters: 'Filtre',
   toolbarFiltersLabel: 'Vis filtre',
   toolbarFiltersTooltipHide: 'Skjul filtre',
   toolbarFiltersTooltipShow: 'Vis filtre',
@@ -24,7 +24,7 @@ const daDKGrid = {
   // toolbarExport: 'Export',
   toolbarExportLabel: 'Eksporter',
   toolbarExportCSV: 'Download som CSV',
-  // toolbarExportPrint: 'Print',
+  toolbarExportPrint: 'Print',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Find kolonne',
   columnsPanelTextFieldPlaceholder: 'Kolonne titel',
@@ -34,11 +34,11 @@ const daDKGrid = {
   // Filter panel text
   filterPanelAddFilter: 'Tilføj filter',
   filterPanelDeleteIconLabel: 'Slet',
-  // filterPanelLinkOperator: 'Logic operator',
+  filterPanelLinkOperator: 'Logisk operator',
   filterPanelOperators: 'Operatorer',
   // TODO v6: rename to filterPanelOperator
-  // filterPanelOperatorAnd: 'And',
-  // filterPanelOperatorOr: 'Or',
+  filterPanelOperatorAnd: 'Og',
+  filterPanelOperatorOr: 'Eller',
   filterPanelColumns: 'Kolonne',
   filterPanelInputLabel: 'Værdi',
   filterPanelInputPlaceholder: 'Filter værdi',
@@ -47,46 +47,46 @@ const daDKGrid = {
   filterOperatorEquals: 'Lig med',
   filterOperatorStartsWith: 'Begynder med',
   filterOperatorEndsWith: 'Ender med',
-  filterOperatorIs: 'På',
-  filterOperatorNot: 'Ikke på',
+  filterOperatorIs: 'Er lig med',
+  filterOperatorNot: 'Er ikke lig med',
   filterOperatorAfter: 'Efter',
   filterOperatorOnOrAfter: 'På eller efter',
   filterOperatorBefore: 'Før',
   filterOperatorOnOrBefore: 'På eller før',
-  filterOperatorIsEmpty: 'Indeholder data',
-  filterOperatorIsNotEmpty: 'Indeholder ikke data',
-  // filterOperatorIsAnyOf: 'is any of',
+  filterOperatorIsEmpty: 'Indeholder ikke data',
+  filterOperatorIsNotEmpty: 'Indeholder data',
+  filterOperatorIsAnyOf: 'indeholder en af',
   // Filter values text
-  // filterValueAny: 'any',
-  // filterValueTrue: 'true',
-  // filterValueFalse: 'false',
+  filterValueAny: 'hvilken som helst',
+  filterValueTrue: 'positiv',
+  filterValueFalse: 'negativ',
   // Column menu text
-  // columnMenuLabel: 'Menu',
+  columnMenuLabel: 'Menu',
   columnMenuShowColumns: 'Vis Kolonner',
-  // columnMenuFilter: 'Filter',
+  columnMenuFilter: 'Filtre',
   columnMenuHideColumn: 'Skjul',
   columnMenuUnsort: 'Fjern sortering',
   columnMenuSortAsc: 'Sorter stigende',
   columnMenuSortDesc: 'Sorter faldende',
   // Column header text
-  columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} aktive filtre` : `${count} aktivt filter`,
+  columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} aktive filtre` : `Ét aktivt filter`,
   columnHeaderFiltersLabel: 'Vis filtre',
   columnHeaderSortIconLabel: 'Sorter',
   // Rows selected footer text
-  footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} rækker valgt` : `${count.toLocaleString()} række valgt`,
+  footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} rækker valgt` : `Én række valgt`,
   // Total row amount footer text
-  footerTotalRows: 'Totale rækker:',
+  footerTotalRows: 'Antal rækker i alt:',
   // Total visible row amount footer text
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} af ${totalCount.toLocaleString()}`,
   // Checkbox selection text
   checkboxSelectionHeaderName: 'Afkrydsningsvalg',
-  // checkboxSelectionSelectAllRows: 'Select all rows',
-  // checkboxSelectionUnselectAllRows: 'Unselect all rows',
-  // checkboxSelectionSelectRow: 'Select row',
-  // checkboxSelectionUnselectRow: 'Unselect row',
+  checkboxSelectionSelectAllRows: 'Vælg alle rækker',
+  checkboxSelectionUnselectAllRows: 'Fravælg alle rækker',
+  checkboxSelectionSelectRow: 'Vælg række',
+  checkboxSelectionUnselectRow: 'Fravælg række',
   // Boolean cell text
-  // booleanCellTrueLabel: 'yes',
-  // booleanCellFalseLabel: 'no',
+  booleanCellTrueLabel: 'ja',
+  booleanCellFalseLabel: 'nej',
   // Actions cell more text
   actionsCellMore: 'mere',
   // Column pinning text
@@ -96,13 +96,13 @@ const daDKGrid = {
   // Tree Data
   treeDataGroupingHeaderName: 'Gruppering',
   treeDataExpand: 'Vis underelementer',
-  treeDataCollapse: 'Skjul underelementer' // Grouping columns
-  // groupingColumnHeaderName: 'Group',
-  // groupColumn: name => `Group by ${name}`,
-  // unGroupColumn: name => `Stop grouping by ${name}`,
+  treeDataCollapse: 'Skjul underelementer',
+  // Grouping columns
+  groupingColumnHeaderName: 'Gruppér',
+  groupColumn: name => `Gruppér efter ${name}`,
+  unGroupColumn: name => `Fjern gruppéring efter ${name}`,
   // Master/detail
-  // expandDetailPanel: 'Expand',
-  // collapseDetailPanel: 'Collapse',
-
+  expandDetailPanel: 'Udvid',
+  collapseDetailPanel: 'Kollaps'
 };
 export const daDK = getGridLocalization(daDKGrid, daDKCore);

package/modern/models/colDef/index.js

@@ -2,5 +2,4 @@
 export * from './gridColDef'; // Other types
 
 export * from './gridColType';
-export * from './gridColumnTypesRecord';
-export * from './gridDefaultColumnTypes';
+export * from './gridColumnTypesRecord';

package/modern/models/events/gridEvents.js

@@ -63,8 +63,8 @@ var GridEvents;
   GridEvents["columnsChange"] = "columnsChange";
   GridEvents["detailPanelsExpandedRowIdsChange"] = "detailPanelsExpandedRowIdsChange";
   GridEvents["pinnedColumnsChange"] = "pinnedColumnsChange";
-  GridEvents["preProcessorRegister"] = "preProcessorRegister";
-  GridEvents["preProcessorUnregister"] = "preProcessorUnregister";
+  GridEvents["pipeProcessorRegister"] = "pipeProcessorRegister";
+  GridEvents["pipeProcessorUnregister"] = "pipeProcessorUnregister";
   GridEvents["activeStrategyProcessorChange"] = "activeStrategyProcessorChange";
   GridEvents["strategyAvailabilityChange"] = "strategyAvailabilityChange";
   GridEvents["sortModelChange"] = "sortModelChange";
@@ -73,6 +73,8 @@ var GridEvents;
   GridEvents["stateChange"] = "stateChange";
   GridEvents["columnVisibilityChange"] = "columnVisibilityChange";
   GridEvents["virtualScrollerContentSizeChange"] = "virtualScrollerContentSizeChange";
+  GridEvents["preferencePanelClose"] = "preferencePanelClose";
+  GridEvents["preferencePanelOpen"] = "preferencePanelOpen";
 })(GridEvents || (GridEvents = {}));
 
 export { GridEvents };

package/modern/models/gridRows.js

@@ -1,31 +1 @@
-/**
- * @deprecated prefer GridRowModel.
- */
-
-/**
- * The key value object representing the data of a row.
- */
-
-/**
- * The grid rows total height and row positions.
- */
-
-/**
- * The type of Id supported by the grid.
- */
-
-/**
- * The function to retrieve the id of a [[GridRowModel]].
- */
-
-/**
- * An helper function to check if the id provided is valid.
- * @param {GridRowId} id Id as [[GridRowId]].
- * @param {GridRowModel | Partial<GridRowModel>} row Row as [[GridRowModel]].
- * @param {string} detailErrorMessage A custom error message to display for invalid IDs
- */
-export function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
-  if (id == null) {
-    throw new Error(['MUI: 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 {};

package/modern/models/index.js

@@ -5,7 +5,6 @@ export * from './gridEditRowModel';
 export * from './gridFeatureMode';
 export * from './gridFilterItem';
 export * from './gridFilterModel';
-export * from './gridFilterOperator';
 export * from './gridRootContainerRef';
 export * from './gridRenderContextProps';
 export * from './gridRows';
@@ -23,4 +22,5 @@ export * from './gridExport';
 export * from './logger';
 export * from './muiEvent';
 export * from './events';
-export * from './gridSortModel';
+export * from './gridSortModel';
+export * from './gridFilterOperator';

package/modern/models/params/gridPreferencePanelParams.js

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

package/modern/models/params/index.js

@@ -9,4 +9,5 @@ export * from './gridRowSelectionCheckboxParams';
 export * from './gridHeaderSelectionCheckboxParams';
 export * from './gridValueOptionsParams';
 export * from './gridCellParams';
-export * from './gridSortModelParams';
+export * from './gridSortModelParams';
+export * from './gridPreferencePanelParams';

package/node/DataGrid/DataGrid.js

@@ -521,6 +521,28 @@ DataGridRaw.propTypes = {
    */
   onPageSizeChange: _propTypes.default.func,
 
+  /**
+   * Callback fired when the preferences panel is closed.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelClose: _propTypes.default.func,
+
+  /**
+   * Callback fired when the preferences panel is opened.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelOpen: _propTypes.default.func,
+
+  /**
+   * Callback called when `processRowUpdate` throws an error or rejects.
+   * @param {any} error The error thrown.
+   */
+  onProcessRowUpdateError: _propTypes.default.func,
+
   /**
    * Callback fired when the grid is resized.
    * @param {ElementSize} containerSize With all properties from [[ElementSize]].
@@ -627,9 +649,10 @@ DataGridRaw.propTypes = {
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * Only applied if `props.experimentalFeatures.newEditingApi: true`.
-   * @param {GridRowModel} newRow Row object with the new values.
-   * @param {GridRowModel} oldRow Row object with the old values.
-   * @returns {Promise<GridRowModel> | GridRowModel} The final values to update the row.
+   * @template R
+   * @param {R} newRow Row object with the new values.
+   * @param {R} oldRow Row object with the old values.
+   * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: _propTypes.default.func,
 
@@ -654,7 +677,7 @@ DataGridRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  rows: _propTypes.default.array.isRequired,
 
   /**
    * Sets the type of space between rows added by `getRowSpacing`.

package/node/DataGrid/useDataGridComponent.js

@@ -25,9 +25,7 @@ var _useGridFilter = require("../hooks/features/filter/useGridFilter");
 
 var _useGridFocus = require("../hooks/features/focus/useGridFocus");
 
-var _useGridKeyboard = require("../hooks/features/keyboard/useGridKeyboard");
-
-var _useGridKeyboardNavigation = require("../hooks/features/keyboard/useGridKeyboardNavigation");
+var _useGridKeyboardNavigation = require("../hooks/features/keyboardNavigation/useGridKeyboardNavigation");
 
 var _useGridPagination = require("../hooks/features/pagination/useGridPagination");
 
@@ -85,6 +83,7 @@ const useDataGridComponent = props => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnMenu.columnMenuStateInitializer, apiRef, props);
+  (0, _useGridKeyboardNavigation.useGridKeyboardNavigation)(apiRef, props);
   (0, _useGridSelection.useGridSelection)(apiRef, props);
   (0, _useGridColumns.useGridColumns)(apiRef, props);
   (0, _useGridRows.useGridRows)(apiRef, props);
@@ -100,8 +99,6 @@ const useDataGridComponent = props => {
   (0, _useGridRowsMeta.useGridRowsMeta)(apiRef, props);
   (0, _useGridScroll.useGridScroll)(apiRef, props);
   (0, _useGridColumnMenu.useGridColumnMenu)(apiRef);
-  (0, _useGridKeyboard.useGridKeyboard)(apiRef);
-  (0, _useGridKeyboardNavigation.useGridKeyboardNavigation)(apiRef, props);
   (0, _useGridCsvExport.useGridCsvExport)(apiRef);
   (0, _useGridPrintExport.useGridPrintExport)(apiRef, props);
   (0, _useGridClipboard.useGridClipboard)(apiRef);

package/node/colDef/gridDateColDef.js

@@ -26,7 +26,7 @@ function gridDateFormatter({
     return value.toLocaleDateString();
   }
 
-  return value;
+  return value != null ? value : '';
 }
 
 function gridDateTimeFormatter({
@@ -36,7 +36,7 @@ function gridDateTimeFormatter({
     return value.toLocaleString();
   }
 
-  return value;
+  return value != null ? value : '';
 }
 
 const GRID_DATE_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_STRING_COL_DEF, {

package/node/{models/colDef → colDef}/gridDefaultColumnTypes.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getGridDefaultColumnTypes = exports.DEFAULT_GRID_COL_TYPE_KEY = void 0;
 
-var _gridStringColDef = require("../../colDef/gridStringColDef");
+var _gridStringColDef = require("./gridStringColDef");
 
-var _gridNumericColDef = require("../../colDef/gridNumericColDef");
+var _gridNumericColDef = require("./gridNumericColDef");
 
-var _gridDateColDef = require("../../colDef/gridDateColDef");
+var _gridDateColDef = require("./gridDateColDef");
 
-var _gridBooleanColDef = require("../../colDef/gridBooleanColDef");
+var _gridBooleanColDef = require("./gridBooleanColDef");
 
-var _gridSingleSelectColDef = require("../../colDef/gridSingleSelectColDef");
+var _gridSingleSelectColDef = require("./gridSingleSelectColDef");
 
-var _gridActionsColDef = require("../../colDef/gridActionsColDef");
+var _gridActionsColDef = require("./gridActionsColDef");
 
 const DEFAULT_GRID_COL_TYPE_KEY = '__default__';
 exports.DEFAULT_GRID_COL_TYPE_KEY = DEFAULT_GRID_COL_TYPE_KEY;

package/node/colDef/index.js

@@ -158,4 +158,17 @@ Object.keys(_gridStringOperators).forEach(function (key) {
       return _gridStringOperators[key];
     }
   });
+});
+
+var _gridDefaultColumnTypes = require("./gridDefaultColumnTypes");
+
+Object.keys(_gridDefaultColumnTypes).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridDefaultColumnTypes[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridDefaultColumnTypes[key];
+    }
+  });
 });

package/node/components/GridRow.js

@@ -306,7 +306,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isLastVisible: _propTypes.default.bool,
   lastColumnToRender: _propTypes.default.number.isRequired,
   renderedColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.any.isRequired,
   rowHeight: _propTypes.default.number.isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   selected: _propTypes.default.bool.isRequired,

package/node/components/cell/GridCell.js

@@ -222,7 +222,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   className: _propTypes.default.string,
   colIndex: _propTypes.default.number.isRequired,
   field: _propTypes.default.string.isRequired,
-  formattedValue: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string, _propTypes.default.bool]),
+  formattedValue: _propTypes.default.any,
   hasFocus: _propTypes.default.bool,
   height: _propTypes.default.number.isRequired,
   isEditable: _propTypes.default.bool,
@@ -236,6 +236,6 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   showRightBorder: _propTypes.default.bool,
   tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
-  value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string, _propTypes.default.bool]),
+  value: _propTypes.default.any,
   width: _propTypes.default.number.isRequired
 } : void 0;