@mui/x-data-grid 5.7.0 → 5.10.0

package/DataGrid/DataGrid.js

@@ -458,7 +458,7 @@ DataGridRaw.propTypes = {
    * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
    * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/api/data-grid/grid-col-def/)
+   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
    */
   onEditCellPropsChange: PropTypes.func,
 
@@ -498,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]].
@@ -604,9 +626,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.func,
 
@@ -631,7 +654,7 @@ 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`.

package/DataGrid/useDataGridComponent.js

@@ -8,8 +8,7 @@ import { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 import { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 import { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
 import { focusStateInitializer, useGridFocus } from '../hooks/features/focus/useGridFocus';
-import { useGridKeyboard } from '../hooks/features/keyboard/useGridKeyboard';
-import { useGridKeyboardNavigation } from '../hooks/features/keyboard/useGridKeyboardNavigation';
+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';
@@ -25,6 +24,7 @@ import { useGridEvents } from '../hooks/features/events/useGridEvents';
 import { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
+import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 export const useDataGridComponent = props => {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -51,23 +51,23 @@ export const useDataGridComponent = 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);
+  useGridColumnSpanning(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);
   useGridFilter(apiRef, props);
+  useGridSorting(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/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Material-UI SAS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -15,15 +15,17 @@ npm install @mui/x-data-grid
 yarn add @mui/x-data-grid
 ```
 
-This component has three peer dependencies that you will need to install as well.
+This component has the following peer dependencies that you will need to install as well.
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.0.0",
-  "react": "^17.0.0"
+  "@mui/material": "^5.2.8",
+  "@mui/system": "^5.2.8",
+  "react": "^17.0.2 || ^18.0.0",
+  "react-dom": "^17.0.2 || ^18.0.0"
 },
 ```
 
 ## Documentation
 
-[The documentation](https://mui.com/components/data-grid/)
+[The documentation](https://mui.com/x/react-data-grid/)

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/{models/colDef → colDef}/gridDefaultColumnTypes.js

@@ -1,9 +1,9 @@
-import { GRID_STRING_COL_DEF } from '../../colDef/gridStringColDef';
-import { GRID_NUMERIC_COL_DEF } from '../../colDef/gridNumericColDef';
-import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from '../../colDef/gridDateColDef';
-import { GRID_BOOLEAN_COL_DEF } from '../../colDef/gridBooleanColDef';
-import { GRID_SINGLE_SELECT_COL_DEF } from '../../colDef/gridSingleSelectColDef';
-import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../colDef/gridActionsColDef';
+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 = {

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[]) | ((...args: any[]) => any);
+export declare const getGridNumericColumnOperators: (() => GridFilterOperator<any, number | string | null, any>[]) | ((...args: any[]) => any);

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/GridRow.d.ts

@@ -6,6 +6,10 @@ import { GridCellIdentifier } from '../hooks/features/focus/gridFocusState';
 export interface GridRowProps {
     rowId: GridRowId;
     selected: boolean;
+    /**
+     * Index of the row in the whole sorted and filtered dataset.
+     * If some rows above have expanded children, this index also take those children into account.
+     */
     index: number;
     rowHeight: number;
     containerWidth: number;

package/components/GridRow.js

@@ -20,6 +20,7 @@ import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 import { findParentElementFromClassName } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -61,6 +62,7 @@ function GridRow(props) {
   const {
     selected,
     rowId,
+    row,
     index,
     style: styleProp,
     rowHeight,
@@ -132,7 +134,12 @@ function GridRow(props) {
       } // User opened a detail panel
 
 
-      if (field === '__detail_panel_toggle__') {
+      if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+        return;
+      } // User reorders a row
+
+
+      if (field === '__reorder__') {
         return;
       } // User is editing a cell
 
@@ -176,7 +183,8 @@ function GridRow(props) {
 
     const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
       isFirstVisible: indexRelativeToCurrentPage === 0,
-      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage
     });
 
     rowClassName = rootProps.getRowClassName(rowParams);
@@ -185,8 +193,6 @@ function GridRow(props) {
   const cells = [];
 
   for (let i = 0; i < renderedColumns.length; i += 1) {
-    var _rootProps$components;
-
     const column = renderedColumns[i];
     const indexRelativeToAllColumns = firstColumnToRender + i;
     const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
@@ -215,7 +221,16 @@ function GridRow(props) {
     if (editCellState != null && column.renderEditCell) {
       var _rootProps$classes2;
 
-      const params = _extends({}, cellParams, editCellState, {
+      let updatedRow = row;
+
+      if (apiRef.current.unstable_getRowWithUpdatedValues) {
+        // Only the new editing API has this method
+        updatedRow = apiRef.current.unstable_getRowWithUpdatedValues(rowId, column.field);
+      }
+
+      const params = _extends({}, cellParams, {
+        row: updatedRow
+      }, editCellState, {
         api: apiRef.current
       });
 
@@ -231,24 +246,35 @@ function GridRow(props) {
 
     const hasFocus = cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field;
     const tabIndex = cellTabIndex !== null && cellTabIndex.id === rowId && cellTabIndex.field === column.field && cellParams.cellMode === 'view' ? 0 : -1;
-    cells.push( /*#__PURE__*/_jsx(rootProps.components.Cell, _extends({
-      value: cellParams.value,
-      field: column.field,
-      width: column.computedWidth,
-      rowId: rowId,
-      height: rowHeight,
-      showRightBorder: showRightBorder,
-      formattedValue: cellParams.formattedValue,
-      align: column.align || 'left',
-      cellMode: cellParams.cellMode,
-      colIndex: indexRelativeToAllColumns,
-      isEditable: cellParams.isEditable,
-      hasFocus: hasFocus,
-      tabIndex: tabIndex,
-      className: clsx(classNames)
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
-      children: content
-    }), column.field));
+    const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
+
+    if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
+      var _rootProps$components;
+
+      const {
+        colSpan,
+        width
+      } = cellColSpanInfo.cellProps;
+      cells.push( /*#__PURE__*/_jsx(rootProps.components.Cell, _extends({
+        value: cellParams.value,
+        field: column.field,
+        width: width,
+        rowId: rowId,
+        height: rowHeight,
+        showRightBorder: showRightBorder,
+        formattedValue: cellParams.formattedValue,
+        align: column.align || 'left',
+        cellMode: cellParams.cellMode,
+        colIndex: indexRelativeToAllColumns,
+        isEditable: cellParams.isEditable,
+        hasFocus: hasFocus,
+        tabIndex: tabIndex,
+        className: clsx(classNames),
+        colSpan: colSpan
+      }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
+        children: content
+      }), column.field));
+    }
   }
 
   const emptyCellWidth = containerWidth - columnsTotalWidth;
@@ -282,11 +308,16 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   containerWidth: PropTypes.number.isRequired,
   editRowsState: PropTypes.object.isRequired,
   firstColumnToRender: PropTypes.number.isRequired,
+
+  /**
+   * Index of the row in the whole sorted and filtered dataset.
+   * If some rows above have expanded children, this index also take those children into account.
+   */
   index: PropTypes.number.isRequired,
   isLastVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  row: PropTypes.object.isRequired,
+  row: PropTypes.any.isRequired,
   rowHeight: PropTypes.number.isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   selected: PropTypes.bool.isRequired,

package/components/base/GridOverlays.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridVisibleRowCountSelector } from '../../hooks/features/filter/gridFilterSelector';
-import { gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
+import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/features/rows/gridRowsSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
@@ -55,8 +55,9 @@ export function GridOverlays() {
   const rootProps = useGridRootProps();
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const visibleRowCount = useGridSelector(apiRef, gridVisibleRowCountSelector);
-  const showNoRowsOverlay = !rootProps.loading && totalRowCount === 0;
-  const showNoResultsOverlay = !rootProps.loading && totalRowCount > 0 && visibleRowCount === 0;
+  const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
+  const showNoRowsOverlay = !loading && totalRowCount === 0;
+  const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
   let overlay = null;
 
   if (showNoRowsOverlay) {

package/components/cell/GridActionsCell.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
 import { GridRenderCellParams } from '../../models/params/gridCellParams';
 import { GridMenuProps } from '../menu/GridMenu';
-declare type GridActionsCellProps = Pick<GridRenderCellParams, 'colDef' | 'id' | 'api' | 'hasFocus'> & Pick<GridMenuProps, 'position'>;
+interface GridActionsCellProps extends Omit<GridRenderCellParams, 'value' | 'formattedValue'> {
+    value?: GridRenderCellParams['value'];
+    formattedValue?: GridRenderCellParams['formattedValue'];
+    position?: GridMenuProps['position'];
+}
 declare const GridActionsCell: {
     (props: GridActionsCellProps): JSX.Element;
     propTypes: any;