@mui/x-data-grid 5.6.0 → 5.8.0

package/CHANGELOG.md

@@ -3,6 +3,193 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.8.0
+<!-- generated comparing v5.7.0..master -->
+_Apr 4, 2022_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Expose new methods to save and restore the grid state (#4028) @flaviendelangle
+
+  The different methods to save and restore the data-grid state are now [documented](mui.com/components/data-grid/state/#save-and-restore-the-state)
+
+- ⌚️ Move date and time picker components from the lab (#3451) @flaviendelangle
+
+  Date and time picker components have been moved to the MUI-X repo.
+  They are now accessible in their own packages: `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`.
+  For more information, you can read the [blog article](https://mui.com/blog/lab-pickers-to-mui-x) and the [migration guide](https://mui.com/x/react-date-pickers/migration-lab)
+
+- 📝 Add `onProcessRowUpdateError` prop to simplify error management in edit mode (#4267) @m4theushw
+- ✨ Add generic typing to `GridColDef` and derived interfaces (#4064) @flaviendelangle
+
+  You can now strongly type all the objects related to the row and the cell values.
+  Here is an example, you can find out more in the description of #4064.
+  
+  ```tsx
+  const rows: Movie[] = [];
+
+  return (
+    <DataGrid 
+      rows={rows}
+      columns={[{ 
+        // typeof params.row => Movie (R)
+        valueGetter: params => params.row.year, 
+      }]}
+    />
+  );
+  ```
+
+### `@mui/x-data-grid@v5.8.0` / `@mui/x-data-grid-pro@v5.8.0`
+
+#### Changes
+
+- [DataGrid] Add `onProcessRowUpdateError` prop (#4267) @m4theushw
+- [DataGrid] Add generic typing to `GridColDef` and derived interfaces (#4064) @flaviendelangle
+- [DataGrid] Add missing classes on `gridClasses` and `gridPanelClasses` (#4273) @flaviendelangle
+- [DataGrid] Add `onPreferencePanelClose`/`onPreferencePanelOpen` props (#4265) @kyeongsoosoo
+- [DataGrid] Add slot for filter icon button (#4276) @m4theushw
+- [DataGrid] Add the documentation of the portable state (#4028) @flaviendelangle
+- [DataGrid] Allow to use keyboard navigation even with no rows (#4302) @alexfauquette
+- [DataGrid] Fix inconsistency in the border of the last column (#4224) @alexfauquette
+- [DataGrid] Fix overlay blocking scrollbar when rows is empty (#4281) @m4theushw
+- [DataGrid] Improve selection with keyboard (#4157) @flaviendelangle
+- [DataGrid] Scroll to the top of the page when changing page (#4272) @flaviendelangle
+- [l10n] Improve Danish (da-DK) locale (#4271) @simplenotezy
+
+### `@mui/x-date-pickers@v5.0.0-alpha.0` / `@mui/x-date-pickers-pro@v5.0.0-alpha.0`
+
+#### Changes
+
+- [DatePicker] Import date-picker components from the lab (#3451) @flaviendelangle
+
+### Docs
+
+- [docs] Create an home page for "Advanced Components" (#4298) @flaviendelangle
+- [docs] Update installation docs (#4259) @cherniavskii
+- [docs] New page for the migration of date and time pickers from the lab (#4327) @flaviendelangle
+
+### Core
+
+- [core] Fix typo in issue template @oliviertassinari
+- [core] Move last variables outside of the models folder (#4303) @flaviendelangle
+- [core] Remove dead code (#4283) @oliviertassinari
+- [core] Rename the "pre-processing" concept "pipe-processing" (#4261) @flaviendelangle
+- [core] Reuse previous state when updating the columns prop (#4229) @m4theushw
+- [core] Fix Argos flakyness for pickers tests (#4312) @flaviendelangle
+
+## 5.7.0
+
+_Mar 24, 2022_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- ✏ Add a new editing API with better support for server-side persistence and validation (#3963, #4060) @m4theushw
+
+  The new API is stable, but to avoid any breaking changes or conflicts with the old API, you must add the following flag to access it:
+
+  ```tsx
+  <DataGrid experimentalFeatures={{ newEditingApi: true }} />
+  ```
+
+  ⚠ Users relying on the old API (legacy) don't need to worry as it will continue to work until v6.
+
+  The new API also features brand new documentation with more useful demos and guides explaining how to create custom edit components.
+  Visit the new [documentation](https://mui.com/components/data-grid/editing/) for more information.
+
+- 📚 Documentation improvements
+- 🐞 Bug and typo fixes
+
+### `@mui/x-data-grid@v5.7.0` / `@mui/x-data-grid-pro@v5.7.0`
+
+#### Changes
+
+- [DataGrid] Add column order and dimensions to the portable state (#3816) @flaviendelangle
+- [DataGrid] Add new editing API (#3963) @m4theushw
+- [DataGrid] Allow to customize `ColumnsPanel` with `componentsProps` prop (#4207) @alexfauquette
+- [DataGrid] Do not unselect row when <kbd>Shift</kbd> + click on the last selected row of a range (#4196) @flaviendelangle
+- [DataGrid] Fix `showCellRightBorder` not working in the last row (#4140) @cherniavskii
+- [DataGrid] Fix error overlay not visible when `autoHeight` is enabled (#4110) @cherniavskii
+- [DataGrid] Fix white blank when scrolling (#4158) @alexfauquette
+- [DataGrid] Adjust type of the `description` prop in `GridColumnHeaderTitle` (#4247) @baahrens
+- [DataGrid] Fix focus after stopping row edit mode (#4252) @m4theushw
+- [DataGridPro] Fix pinned columns edge overflow with custom `borderRadius` (#4188) @socramm9
+- [DataGridPro] Fix tab switching order with pinned columns and `editMode="row"` (#4198) @cherniavskii
+- [l10n] Improve Persian (fa-IR) locale (#4227) @SaeedZhiany
+- [l10n] Improve Polish (pl-PL) locale (#4153) @pbmchc
+- [l10n] Improve Arabic (ar-SD) locale (#4212) @shadigaafar
+- [l10n] Improve Korean (ko-KR) locale (#4245) @kyeongsoosoo
+
+### Docs
+
+- [docs] Clean demo (#4073) @alexfauquette
+- [docs] Delete restore state demos (#4220) @flaviendelangle
+- [docs] Document Print export `X-Frame-Options` limitation (#4222) @DanailH
+- [docs] Add docs for the new editing API (#4060) @m4theushw
+- [docs] Explain how to use `printOptions.pageStyle` (#4138) @alexfauquette
+- [docs] Fix 301 links (#4165) @oliviertassinari
+- [docs] Fix 404 API links (#4164) @oliviertassinari
+- [docs] Fix broken anchor links (#4162) @alexfauquette
+- [docs] Remove useless `apiRef` from demos (#4221) @flaviendelangle
+- [docs] Sync the headers with core (#4195) @oliviertassinari
+
+### Core
+
+- [core] Add CLI to decode license key (#4126) @flaviendelangle
+- [core] Fix Lerna package change detection (#4202) @oliviertassinari
+- [core] Implement strategy pattern for pre-processors (#4030) @flaviendelangle
+- [core] Keep same reference to the column visibility model if no column has changed (#4154) @m4theushw
+- [core] Prepare `@mui/x-license-pro` for date pickers (#4123) @flaviendelangle
+- [core] Remove datagen from `@mui/x-data-grid-generator` bundle (#4163) @m4theushw
+- [core] Remove lodash `isDeepEqual` (#4159) @flaviendelangle
+- [core] Use a pipe processor for `GridPreferencePanel` children (#4216) @flaviendelangle
+- [core] Add markdown documentation for contributors (#3447) @alexfauquette
+- [test] Add regression test for `showCellRightBorder` (#4191) @cherniavskii
+- [test] Mock `getComputedStyle` to speed up unit tests (#4142) @m4theushw
+- [test] Upgrade CircleCI convenience image (#4143) @m4theushw
+
+## 5.6.1
+
+_Mar 10, 2022_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Allow to add margins or borders between rows (#3848) @m4theushw
+
+  ```tsx
+  <DataGrid getRowSpacing={() => ({ top: 10, bottom: 10 })} />
+  ```
+
+  Check the [documentation](https://mui.com/components/data-grid/rows/#row-spacing) for more information.
+
+### `@mui/x-data-grid@v5.6.1` / `@mui/x-data-grid-pro@v5.6.1`
+
+#### Changes
+
+- [DataGrid] Display column's filter icon if a filter is applied (#4120) @DanailH
+- [DataGrid] Do not loop through rows to compute top level rows count when the tree is flat (#4081) @flaviendelangle
+- [DataGrid] Rename API method (#4148) @m4theushw
+- [DataGrid] Support extending built-in column types (#4114) @cherniavskii
+- [DataGridPro] Re-export the components removed by mistake during bundle split (#4134) @flaviendelangle
+
+### Docs
+
+- [docs] Fix links to prevent duplicate search result (#4130) @siriwatknp
+- [docs] Fix outdated links to `localeTextConstants.ts` (#4080) @patilvishal755
+- [docs] Neglect e2e tests related to search (#4118) @siriwatknp
+- [docs] Use regex instead of specific url in e2e-website-tests (#4121) @siriwatknp
+
+### Core
+
+- [core] Enforce `noImplicitAny` (#4084) @cherniavskii
+- [core] Improve the Pro support issue template (#4082) @oliviertassinari
+- [core] Initialize remaining states before feature hooks (#4036) @m4theushw
+- [core] Merge `page` and `pageSize` state initializer into a single `pagination` state initializer (#4087) @flaviendelangle
+- [core] Prepare `yarn docs:api:build` scripts for multi packages support (#4111) @flaviendelangle
+- [core] Upgrade `@mui/monorepo` (#4149) @cherniavskii
+- [core] Use `buildWarning` and `wrapWithWarningOnCall` for deprecated methods and wrong usages (#4056) @flaviendelangle
+- [test] Make focus state out-of-sync warning opt-in (#4129) @m4theushw
+- [test] Only test custom input keyboard event in edit mode (#4075) @alexfauquette
+
 ## 5.6.0
 
 _Mar 4, 2022_

package/DataGrid/DataGrid.d.ts

@@ -1,4 +1,9 @@
 import * as React from 'react';
-export declare const DataGrid: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<Partial<import("../models/props/DataGridProps").DataGridPropsWithDefaultValues> & import("../models/props/DataGridProps").DataGridPropsWithComplexDefaultValueBeforeProcessing & import("../models/props/DataGridProps").DataGridPropsWithoutDefaultValue, import("../models/props/DataGridProps").DataGridForcedPropsKey> & {
-    pagination?: true | undefined;
-} & React.RefAttributes<HTMLDivElement>>>;
+import { DataGridProps } from '../models/props/DataGridProps';
+import { GridValidRowModel } from '../models/gridRows';
+interface DataGridComponent {
+    <R extends GridValidRowModel = any>(props: DataGridProps<R> & React.RefAttributes<HTMLDivElement>): JSX.Element;
+    propTypes?: any;
+}
+export declare const DataGrid: DataGridComponent;
+export {};

package/DataGrid/DataGrid.js

@@ -79,6 +79,7 @@ DataGridRaw.propTypes = {
    * Set of columns of type [[GridColumns]].
    */
   columns: chainPropTypes(PropTypes.array.isRequired, props => {
+    // @ts-ignore because otherwise `build:api` doesn't work
     if (props.columns && props.columns.some(column => column.resizable)) {
       return new Error([`MUI: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
     }
@@ -182,7 +183,9 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    preventCommitWhileValidating: PropTypes.bool
+    newEditingApi: PropTypes.bool,
+    preventCommitWhileValidating: PropTypes.bool,
+    warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
 
   /**
@@ -221,7 +224,7 @@ DataGridRaw.propTypes = {
 
   /**
    * Function that applies CSS classes dynamically on rows.
-   * @param {GridRowParams} params With all properties from [[GridRowParams]].
+   * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
    * @returns {string} The CSS class to apply to the row.
    */
   getRowClassName: PropTypes.func,
@@ -238,6 +241,13 @@ DataGridRaw.propTypes = {
    */
   getRowId: PropTypes.func,
 
+  /**
+   * Function that allows to specify the spacing between rows.
+   * @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
+   * @returns {GridRowSpacing} The row spacing values.
+   */
+  getRowSpacing: PropTypes.func,
+
   /**
    * Set the height in pixel of the column headers in the grid.
    * @default 56
@@ -290,7 +300,7 @@ DataGridRaw.propTypes = {
 
   /**
    * Set the locale text of the grid.
-   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/internals/constants/localeTextConstants.ts) in the GitHub repository.
+   * You can find all the translation keys supported in [the source](https://github.com/mui/mui-x/blob/HEAD/packages/grid/x-data-grid/src/constants/localeTextConstants.ts) in the GitHub repository.
    */
   localeText: PropTypes.object,
 
@@ -488,6 +498,28 @@ DataGridRaw.propTypes = {
    */
   onPageSizeChange: PropTypes.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.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.func,
+
+  /**
+   * Callback called when `processRowUpdate` throws an error or rejects.
+   * @param {any} error The error thrown.
+   */
+  onProcessRowUpdateError: PropTypes.func,
+
   /**
    * Callback fired when the grid is resized.
    * @param {ElementSize} containerSize With all properties from [[ElementSize]].
@@ -591,6 +623,16 @@ DataGridRaw.propTypes = {
    */
   paginationMode: PropTypes.oneOf(['client', 'server']),
 
+  /**
+   * Callback called before updating a row with new values in the row and cell editing.
+   * Only applied if `props.experimentalFeatures.newEditingApi: true`.
+   * @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.func,
+
   /**
    * Number of extra rows to be rendered before/after the visible slice.
    * @default 3
@@ -612,7 +654,13 @@ DataGridRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rows: PropTypes.array.isRequired,
+
+  /**
+   * Sets the type of space between rows added by `getRowSpacing`.
+   * @default "margin"
+   */
+  rowSpacingType: PropTypes.oneOf(['border', 'margin']),
 
   /**
    * Select the pageSize dynamically using the component UI.

package/DataGrid/useDataGridComponent.js

@@ -1,63 +1,71 @@
 import { useGridInitialization } from '../hooks/core/useGridInitialization';
 import { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 import { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
-import { useGridColumnMenu } from '../hooks/features/columnMenu/useGridColumnMenu';
+import { columnMenuStateInitializer, useGridColumnMenu } from '../hooks/features/columnMenu/useGridColumnMenu';
 import { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
-import { useGridDensity } from '../hooks/features/density/useGridDensity';
+import { densityStateInitializer, useGridDensity } from '../hooks/features/density/useGridDensity';
 import { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 import { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 import { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
-import { useGridFocus } from '../hooks/features/focus/useGridFocus';
-import { useGridKeyboard } from '../hooks/features/keyboard/useGridKeyboard';
-import { useGridKeyboardNavigation } from '../hooks/features/keyboard/useGridKeyboardNavigation';
-import { useGridPagination } from '../hooks/features/pagination/useGridPagination';
-import { pageStateInitializer } from '../hooks/features/pagination/useGridPage';
-import { pageSizeStateInitializer } from '../hooks/features/pagination/useGridPageSize';
-import { useGridPreferencesPanel } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
-import { useGridEditing } from '../hooks/features/editRows/useGridEditing';
+import { focusStateInitializer, useGridFocus } from '../hooks/features/focus/useGridFocus';
+import { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
+import { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
+import { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
+import { useGridEditing as useGridEditing_old, editingStateInitializer as editingStateInitializer_old } from '../hooks/features/editRows/useGridEditing.old';
+import { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new } from '../hooks/features/editRows/useGridEditing.new';
 import { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
+import { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
 import { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
-import { useGridSelection } from '../hooks/features/selection/useGridSelection';
+import { selectionStateInitializer, useGridSelection } from '../hooks/features/selection/useGridSelection';
 import { useGridSelectionPreProcessors } from '../hooks/features/selection/useGridSelectionPreProcessors';
 import { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
 import { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 import { useGridEvents } from '../hooks/features/events/useGridEvents';
 import { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
-import { useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
+import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export const useDataGridComponent = props => {
+  var _props$experimentalFe, _props$experimentalFe2;
+
   const apiRef = useGridInitialization(undefined, props);
   /**
    * Register all pre-processors called during state initialization here.
    */
 
   useGridSelectionPreProcessors(apiRef, props);
+  useGridRowsPreProcessors(apiRef);
   /**
    * Register all state initializers here.
    */
 
-  useGridInitializeState(filterStateInitializer, apiRef, props);
-  useGridInitializeState(pageSizeStateInitializer, apiRef, props);
-  useGridInitializeState(pageStateInitializer, apiRef, props);
+  useGridInitializeState(selectionStateInitializer, apiRef, props);
+  useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
+  useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
-  useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
+  useGridInitializeState(filterStateInitializer, apiRef, props);
+  useGridInitializeState(densityStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
+  useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
+  const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
   useGridSorting(apiRef, props);
-  useGridPreferencesPanel(apiRef, props);
+  useGridPreferencesPanel(apiRef);
   useGridFilter(apiRef, props);
   useGridDensity(apiRef, props);
   useGridPagination(apiRef, props);
   useGridRowsMeta(apiRef, props);
   useGridScroll(apiRef, props);
   useGridColumnMenu(apiRef);
-  useGridKeyboard(apiRef);
-  useGridKeyboardNavigation(apiRef, props);
   useGridCsvExport(apiRef);
   useGridPrintExport(apiRef, props);
   useGridClipboard(apiRef);

package/DataGrid/useDataGridProps.d.ts

@@ -1,7 +1,8 @@
 import { DataGridProcessedProps, DataGridProps, DataGridPropsWithDefaultValues } from '../models/props/DataGridProps';
+import { GridValidRowModel } from '../models';
 export declare const MAX_PAGE_SIZE = 100;
 /**
  * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
  */
 export declare const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues;
-export declare const useDataGridProps: (inProps: DataGridProps) => DataGridProcessedProps;
+export declare const useDataGridProps: <R extends GridValidRowModel>(inProps: DataGridProps<R>) => DataGridProcessedProps<R>;

package/DataGrid/useDataGridProps.js

@@ -54,6 +54,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   paginationMode: GridFeatureModeConstant.client,
   rowHeight: 52,
   rowsPerPageOptions: [25, 50, 100],
+  rowSpacingType: 'margin',
   showCellRightBorder: false,
   showColumnRightBorder: false,
   sortingOrder: ['asc', 'desc', null],
@@ -80,8 +81,8 @@ export const useDataGridProps = inProps => {
     }
 
     const mergedComponents = {};
-    Object.keys(DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(key => {
-      mergedComponents[key] = overrides[key] === undefined ? DATA_GRID_DEFAULT_SLOTS_COMPONENTS[key] : overrides[key];
+    Object.entries(DATA_GRID_DEFAULT_SLOTS_COMPONENTS).forEach(([key, defaultComponent]) => {
+      mergedComponents[key] = overrides[key] === undefined ? defaultComponent : overrides[key];
     });
     return mergedComponents;
   }, [themedProps.components]);

package/colDef/gridBooleanColDef.d.ts

@@ -1,2 +1,2 @@
 import { GridColTypeDef } from '../models/colDef/gridColDef';
-export declare const GRID_BOOLEAN_COL_DEF: GridColTypeDef;
+export declare const GRID_BOOLEAN_COL_DEF: GridColTypeDef<boolean | null, any>;

package/colDef/gridBooleanOperators.d.ts

@@ -1,2 +1,2 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
-export declare const getGridBooleanOperators: () => GridFilterOperator[];
+export declare const getGridBooleanOperators: () => GridFilterOperator<any, boolean | null, any>[];

package/colDef/gridDateColDef.d.ts

@@ -1,10 +1,6 @@
-import { GridCellValue } from '../models/gridCell';
 import { GridColTypeDef } from '../models/colDef/gridColDef';
-export declare function gridDateFormatter({ value }: {
-    value: GridCellValue;
-}): string | number | boolean | object | null | undefined;
-export declare function gridDateTimeFormatter({ value }: {
-    value: GridCellValue;
-}): string | number | boolean | object | null | undefined;
-export declare const GRID_DATE_COL_DEF: GridColTypeDef;
-export declare const GRID_DATETIME_COL_DEF: GridColTypeDef;
+import { GridValueFormatterParams } from '../models/params/gridCellParams';
+export declare function gridDateFormatter({ value }: GridValueFormatterParams<Date | string>): string;
+export declare function gridDateTimeFormatter({ value }: GridValueFormatterParams<Date | string>): string;
+export declare const GRID_DATE_COL_DEF: GridColTypeDef<Date | string, string>;
+export declare const GRID_DATETIME_COL_DEF: GridColTypeDef<Date | string, string>;

package/colDef/gridDateColDef.js

@@ -10,7 +10,7 @@ export function gridDateFormatter({
     return value.toLocaleDateString();
   }
 
-  return value;
+  return value != null ? value : '';
 }
 export function gridDateTimeFormatter({
   value
@@ -19,7 +19,7 @@ export function gridDateTimeFormatter({
     return value.toLocaleString();
   }
 
-  return value;
+  return value != null ? value : '';
 }
 export const GRID_DATE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'date',

package/colDef/gridDateOperators.d.ts

@@ -1,2 +1,2 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
-export declare const getGridDateOperators: (showTime?: boolean | undefined) => GridFilterOperator[];
+export declare const getGridDateOperators: (showTime?: boolean | undefined) => GridFilterOperator<any, string | number | Date, any>[];

package/{models/colDef → colDef}/gridDefaultColumnTypes.d.ts

@@ -1,3 +1,3 @@
-import { GridColumnTypesRecord } from './gridColumnTypesRecord';
+import { GridColumnTypesRecord } from '../models/colDef/gridColumnTypesRecord';
 export declare const DEFAULT_GRID_COL_TYPE_KEY = "__default__";
 export declare const getGridDefaultColumnTypes: () => GridColumnTypesRecord;

package/colDef/gridDefaultColumnTypes.js

@@ -0,0 +1,20 @@
+import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { GRID_NUMERIC_COL_DEF } from './gridNumericColDef';
+import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from './gridDateColDef';
+import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
+import { GRID_SINGLE_SELECT_COL_DEF } from './gridSingleSelectColDef';
+import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from './gridActionsColDef';
+export const DEFAULT_GRID_COL_TYPE_KEY = '__default__';
+export const getGridDefaultColumnTypes = () => {
+  const nativeColumnTypes = {
+    string: GRID_STRING_COL_DEF,
+    number: GRID_NUMERIC_COL_DEF,
+    date: GRID_DATE_COL_DEF,
+    dateTime: GRID_DATETIME_COL_DEF,
+    boolean: GRID_BOOLEAN_COL_DEF,
+    singleSelect: GRID_SINGLE_SELECT_COL_DEF,
+    [GRID_ACTIONS_COLUMN_TYPE]: GRID_ACTIONS_COL_DEF,
+    [DEFAULT_GRID_COL_TYPE_KEY]: GRID_STRING_COL_DEF
+  };
+  return nativeColumnTypes;
+};

package/colDef/gridNumericColDef.d.ts

@@ -1,2 +1,2 @@
 import { GridColTypeDef } from '../models/colDef/gridColDef';
-export declare const GRID_NUMERIC_COL_DEF: GridColTypeDef;
+export declare const GRID_NUMERIC_COL_DEF: GridColTypeDef<number | string | null, string>;

package/colDef/gridNumericOperators.d.ts

@@ -1,6 +1,6 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
-export declare const getGridNumericOperators: () => GridFilterOperator[];
+export declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any>[];
 /**
  * @deprecated Use `getGridNumericOperators` instead.
  */
-export declare const getGridNumericColumnOperators: () => GridFilterOperator[];
+export declare const getGridNumericColumnOperators: (() => GridFilterOperator<any, number | string | null, any>[]) | ((...args: any[]) => any);

package/colDef/gridNumericOperators.js

@@ -174,4 +174,4 @@ export const getGridNumericOperators = () => [{
  * @deprecated Use `getGridNumericOperators` instead.
  */
 
-export const getGridNumericColumnOperators = wrapWithWarningOnCall(getGridNumericOperators, 'MUI: Using getGridNumericColumnOperators is deprecated, use getGridNumericOperators instead.');
+export const getGridNumericColumnOperators = wrapWithWarningOnCall(getGridNumericOperators, ['MUI: The method getGridNumericColumnOperators is deprecated and will be removed in the next major version.', 'Use getGridNumericOperators instead.']);

package/colDef/gridStringColDef.d.ts

@@ -1,2 +1,2 @@
 import { GridColTypeDef } from '../models/colDef/gridColDef';
-export declare const GRID_STRING_COL_DEF: GridColTypeDef;
+export declare const GRID_STRING_COL_DEF: GridColTypeDef<any, any>;

package/colDef/gridStringOperators.d.ts

@@ -1,2 +1,2 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
-export declare const getGridStringOperators: () => GridFilterOperator[];
+export declare const getGridStringOperators: () => GridFilterOperator<any, number | string | null, any>[];

package/colDef/index.d.ts

@@ -10,3 +10,4 @@ export * from './gridDateOperators';
 export * from './gridNumericOperators';
 export * from './gridSingleSelectOperators';
 export * from './gridStringOperators';
+export * from './gridDefaultColumnTypes';

package/colDef/index.js

@@ -9,4 +9,5 @@ export * from './gridBooleanOperators';
 export * from './gridDateOperators';
 export * from './gridNumericOperators';
 export * from './gridSingleSelectOperators';
-export * from './gridStringOperators';
+export * from './gridStringOperators';
+export * from './gridDefaultColumnTypes';

package/components/ErrorBoundary.d.ts

@@ -10,9 +10,9 @@ export interface ErrorBoundaryProps {
     componentProps?: any[];
 }
 export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, any> {
-    static getDerivedStateFromError(error: any): {
+    static getDerivedStateFromError(error: Error): {
         hasError: boolean;
-        error: any;
+        error: Error;
     };
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     logError(error: Error, errorInfo?: ErrorInfo): void;

package/components/ErrorOverlay.js

@@ -4,6 +4,8 @@ const _excluded = ["message", "hasError", "errorInfo"];
 import * as React from 'react';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridOverlay } from './containers/GridOverlay';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { gridDensityRowHeightSelector } from '../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 // TODO v6: rename to GridErrorOverlay
 export const ErrorOverlay = /*#__PURE__*/React.forwardRef(function ErrorOverlay(props, ref) {
@@ -14,8 +16,13 @@ export const ErrorOverlay = /*#__PURE__*/React.forwardRef(function ErrorOverlay(
 
   const apiRef = useGridApiContext();
   const defaultLabel = apiRef.current.getLocaleText('errorOverlayDefaultLabel');
+  const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
-    ref: ref
+    ref: ref,
+    sx: {
+      width: '100%',
+      minHeight: 2 * rowHeight
+    }
   }, other, {
     children: message || defaultLabel
   }));

package/components/GridLoadingOverlay.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
-import { GridOverlayProps } from './containers/GridOverlay';
-export declare const GridLoadingOverlay: React.ForwardRefExoticComponent<GridOverlayProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridLoadingOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridLoadingOverlay };

package/components/GridLoadingOverlay.js

@@ -1,12 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import CircularProgress from '@mui/material/CircularProgress';
 import { GridOverlay } from './containers/GridOverlay';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
     ref: ref
   }, props, {
     children: /*#__PURE__*/_jsx(CircularProgress, {})
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridLoadingOverlay };