@mui/x-data-grid 7.0.0-beta.7 → 7.0.0

package/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -41,19 +41,15 @@ const createGroupLookup = columnGroupingModel => {
   return _extends({}, groupLookup);
 };
 export const columnGroupsStateInitializer = (state, props, apiRef) => {
-  var _props$columnGrouping, _props$columnGrouping2, _apiRef$current$state;
   if (!props.columnGroupingModel) {
     return state;
   }
   const columnFields = gridColumnFieldsSelector(apiRef);
   const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
-  const groupLookup = createGroupLookup((_props$columnGrouping = props.columnGroupingModel) != null ? _props$columnGrouping : []);
-  const unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping2 = props.columnGroupingModel) != null ? _props$columnGrouping2 : []);
-  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, (_apiRef$current$state = apiRef.current.state.pinnedColumns) != null ? _apiRef$current$state : {});
-  const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => {
-    var _unwrappedGroupingMod, _unwrappedGroupingMod2;
-    return (_unwrappedGroupingMod = (_unwrappedGroupingMod2 = unwrappedGroupingModel[field]) == null ? void 0 : _unwrappedGroupingMod2.length) != null ? _unwrappedGroupingMod : 0;
-  }));
+  const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
+  const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
+  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, apiRef.current.state.pinnedColumns ?? {});
+  const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
   return _extends({}, state, {
     columnGrouping: {
       lookup: groupLookup,
@@ -73,9 +69,8 @@ export const useGridColumnGrouping = (apiRef, props) => {
    * API METHODS
    */
   const getColumnGroupPath = React.useCallback(field => {
-    var _unwrappedGroupingMod3;
     const unwrappedGroupingModel = gridColumnGroupsUnwrappedModelSelector(apiRef);
-    return (_unwrappedGroupingMod3 = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod3 : [];
+    return unwrappedGroupingModel[field] ?? [];
   }, [apiRef]);
   const getAllGroupDetails = React.useCallback(() => {
     const columnGroupLookup = gridColumnGroupsLookupSelector(apiRef);
@@ -87,12 +82,10 @@ export const useGridColumnGrouping = (apiRef, props) => {
   };
   useGridApiMethod(apiRef, columnGroupingApi, 'public');
   const handleColumnIndexChange = React.useCallback(() => {
-    var _props$columnGrouping3;
-    const unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping3 = props.columnGroupingModel) != null ? _props$columnGrouping3 : []);
+    const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel ?? []);
     apiRef.current.setState(state => {
-      var _state$columns$ordere, _state$columns, _state$pinnedColumns;
-      const orderedFields = (_state$columns$ordere = (_state$columns = state.columns) == null ? void 0 : _state$columns.orderedFields) != null ? _state$columns$ordere : [];
-      const pinnedColumns = (_state$pinnedColumns = state.pinnedColumns) != null ? _state$pinnedColumns : {};
+      const orderedFields = state.columns?.orderedFields ?? [];
+      const pinnedColumns = state.pinnedColumns ?? {};
       const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel, pinnedColumns);
       return _extends({}, state, {
         columnGrouping: _extends({}, state.columnGrouping, {
@@ -102,18 +95,14 @@ export const useGridColumnGrouping = (apiRef, props) => {
     });
   }, [apiRef, props.columnGroupingModel]);
   const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
-    var _apiRef$current$getPi, _apiRef$current$getPi2, _apiRef$current;
     // @ts-expect-error Move this logic to `Pro` package
-    const pinnedColumns = (_apiRef$current$getPi = (_apiRef$current$getPi2 = (_apiRef$current = apiRef.current).getPinnedColumns) == null ? void 0 : _apiRef$current$getPi2.call(_apiRef$current)) != null ? _apiRef$current$getPi : {};
+    const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};
     const columnFields = gridColumnFieldsSelector(apiRef);
     const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
-    const groupLookup = createGroupLookup(columnGroupingModel != null ? columnGroupingModel : []);
-    const unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel != null ? columnGroupingModel : []);
+    const groupLookup = createGroupLookup(columnGroupingModel ?? []);
+    const unwrappedGroupingModel = unwrapGroupingColumnModel(columnGroupingModel ?? []);
     const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, pinnedColumns);
-    const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => {
-      var _unwrappedGroupingMod4, _unwrappedGroupingMod5;
-      return (_unwrappedGroupingMod4 = (_unwrappedGroupingMod5 = unwrappedGroupingModel[field]) == null ? void 0 : _unwrappedGroupingMod5.length) != null ? _unwrappedGroupingMod4 : 0;
-    }));
+    const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
     apiRef.current.setState(state => {
       return _extends({}, state, {
         columnGrouping: {

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -92,8 +92,8 @@ export const useGridColumnHeaders = props => {
     };
   };
   const getFillers = (params, children, leftOverflow, borderTop = false) => {
-    const isPinnedRight = (params == null ? void 0 : params.position) === GridPinnedColumnPosition.RIGHT;
-    const isNotPinned = (params == null ? void 0 : params.position) === undefined;
+    const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
+    const isNotPinned = params?.position === undefined;
     const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
     const leftOffsetWidth = offsetLeft - leftOverflow;
     return /*#__PURE__*/_jsxs(React.Fragment, {
@@ -146,7 +146,7 @@ export const useGridColumnHeaders = props => {
       const tabIndex = columnHeaderTabIndexState !== null && columnHeaderTabIndexState.field === colDef.field || isFirstColumn && !hasOtherElementInTabSequence ? 0 : -1;
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
-      const pinnedPosition = params == null ? void 0 : params.position;
+      const pinnedPosition = params?.position;
       const style = getCellOffsetStyle({
         pinnedPosition,
         columnIndex,
@@ -201,7 +201,6 @@ export const useGridColumnHeaders = props => {
     depth,
     params
   }) => {
-    var _apiRef$current$getCo, _apiRef$current$getCo2;
     const columnsToRender = getColumnsToRender(params);
     if (columnsToRender.renderedColumns.length === 0) {
       return null;
@@ -213,13 +212,13 @@ export const useGridColumnHeaders = props => {
     } = columnsToRender;
     const rowStructure = columnGroupsHeaderStructure[depth];
     const firstColumnFieldToRender = visibleColumns[firstColumnToRender].field;
-    const firstGroupToRender = (_apiRef$current$getCo = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo : null;
+    const firstGroupToRender = apiRef.current.getColumnGroupPath(firstColumnFieldToRender)[depth] ?? null;
     const firstGroupIndex = rowStructure.findIndex(({
       groupId,
       columnFields
     }) => groupId === firstGroupToRender && columnFields.includes(firstColumnFieldToRender));
     const lastColumnFieldToRender = visibleColumns[lastColumnToRender - 1].field;
-    const lastGroupToRender = (_apiRef$current$getCo2 = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth]) != null ? _apiRef$current$getCo2 : null;
+    const lastGroupToRender = apiRef.current.getColumnGroupPath(lastColumnFieldToRender)[depth] ?? null;
     const lastGroupIndex = rowStructure.findIndex(({
       groupId,
       columnFields
@@ -232,9 +231,8 @@ export const useGridColumnHeaders = props => {
     const firstVisibleColumnIndex = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
     const hiddenGroupColumns = visibleColumnGroupHeader[0].columnFields.slice(0, firstVisibleColumnIndex);
     const leftOverflow = hiddenGroupColumns.reduce((acc, field) => {
-      var _column$computedWidth;
       const column = apiRef.current.getColumn(field);
-      return acc + ((_column$computedWidth = column.computedWidth) != null ? _column$computedWidth : 0);
+      return acc + (column.computedWidth ?? 0);
     }, 0);
     let columnIndex = firstColumnToRender;
     const children = visibleColumnGroupHeader.map(({

package/hooks/features/columnMenu/useGridColumnMenuSlots.js

@@ -37,8 +37,8 @@ const useGridColumnMenuSlots = props => {
     const sorted = cleansedItems.sort((a, b) => {
       const leftItemProps = processedSlotProps[a];
       const rightItemProps = processedSlotProps[b];
-      const leftDisplayOrder = Number.isFinite(leftItemProps == null ? void 0 : leftItemProps.displayOrder) ? leftItemProps.displayOrder : 100;
-      const rightDisplayOrder = Number.isFinite(rightItemProps == null ? void 0 : rightItemProps.displayOrder) ? rightItemProps.displayOrder : 100;
+      const leftDisplayOrder = Number.isFinite(leftItemProps?.displayOrder) ? leftItemProps.displayOrder : 100;
+      const rightDisplayOrder = Number.isFinite(rightItemProps?.displayOrder) ? rightItemProps.displayOrder : 100;
       return leftDisplayOrder - rightDisplayOrder;
     });
     return sorted.reduce((acc, key, index) => {

package/hooks/features/columnResize/useGridColumnResize.js

@@ -126,7 +126,7 @@ function excludeOutliers(inputValues, factor) {
   const iqr = q3 - q1;
 
   // We make a small adjustment if `iqr < 5` for the cases where the IQR is
-  // very small (e.g. zero) due to very close by values in the input data.
+  // very small (for example zero) due to very close by values in the input data.
   // Otherwise, with an IQR of `0`, anything outside that would be considered
   // an outlier, but it makes more sense visually to allow for this 5px variance
   // rather than showing a cropped cell.
@@ -140,23 +140,21 @@ function extractColumnWidths(apiRef, options, columns) {
   columns.forEach(column => {
     const cells = findGridCells(apiRef.current, column.field);
     const widths = cells.map(cell => {
-      var _cell$getBoundingClie;
-      return (_cell$getBoundingClie = cell.getBoundingClientRect().width) != null ? _cell$getBoundingClie : 0;
+      return cell.getBoundingClientRect().width ?? 0;
     });
     const filteredWidths = options.includeOutliers ? widths : excludeOutliers(widths, options.outliersFactor);
     if (options.includeHeaders) {
       const header = findGridHeader(apiRef.current, column.field);
       if (header) {
-        var _iconContainer$client, _menuContainer$client;
         const title = header.querySelector(`.${gridClasses.columnHeaderTitle}`);
         const content = header.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`);
         const iconContainer = header.querySelector(`.${gridClasses.iconButtonContainer}`);
         const menuContainer = header.querySelector(`.${gridClasses.menuIcon}`);
-        const element = title != null ? title : content;
+        const element = title ?? content;
         const style = window.getComputedStyle(header, null);
         const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
         const contentWidth = element.scrollWidth + 1;
-        const width = contentWidth + paddingWidth + ((_iconContainer$client = iconContainer == null ? void 0 : iconContainer.clientWidth) != null ? _iconContainer$client : 0) + ((_menuContainer$client = menuContainer == null ? void 0 : menuContainer.clientWidth) != null ? _menuContainer$client : 0);
+        const width = contentWidth + paddingWidth + (iconContainer?.clientWidth ?? 0) + (menuContainer?.clientWidth ?? 0);
         filteredWidths.push(width);
       }
     }
@@ -290,7 +288,6 @@ export const useGridColumnResize = (apiRef, props) => {
     });
   };
   const storeReferences = (colDef, separator, xStart) => {
-    var _apiRef$current$colum;
     const root = apiRef.current.rootElementRef.current;
     colDefRef.current = colDef;
     columnHeaderElementRef.current = findHeaderElementFromField(apiRef.current.columnHeadersContainerRef.current, colDef.field);
@@ -298,7 +295,7 @@ export const useGridColumnResize = (apiRef, props) => {
     if (headerFilterElement) {
       headerFilterElementRef.current = headerFilterElement;
     }
-    groupHeaderElementsRef.current = findGroupHeaderElementsFromField((_apiRef$current$colum = apiRef.current.columnHeadersContainerRef) == null ? void 0 : _apiRef$current$colum.current, colDef.field);
+    groupHeaderElementsRef.current = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
     cellElementsRef.current = findGridCellElementsFromCol(columnHeaderElementRef.current, apiRef.current);
     fillerLeftRef.current = findGridElement(apiRef.current, 'filler--pinnedLeft');
     fillerRightRef.current = findGridElement(apiRef.current, 'filler--pinnedRight');
@@ -471,8 +468,7 @@ export const useGridColumnResize = (apiRef, props) => {
   const columnVirtualizationDisabled = useColumnVirtualizationDisabled(apiRef);
   const isAutosizingRef = React.useRef(false);
   const autosizeColumns = React.useCallback(async userOptions => {
-    var _apiRef$current$rootE, _userOptions$columns;
-    const root = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE.current;
+    const root = apiRef.current.rootElementRef?.current;
     if (!root) {
       return;
     }
@@ -482,7 +478,7 @@ export const useGridColumnResize = (apiRef, props) => {
     isAutosizingRef.current = true;
     const state = gridColumnsStateSelector(apiRef.current.state);
     const options = _extends({}, DEFAULT_GRID_AUTOSIZE_OPTIONS, userOptions, {
-      columns: (_userOptions$columns = userOptions == null ? void 0 : userOptions.columns) != null ? _userOptions$columns : state.orderedFields
+      columns: userOptions?.columns ?? state.orderedFields
     });
     options.columns = options.columns.filter(c => state.columnVisibilityModel[c] !== false);
     const columns = options.columns.map(c => apiRef.current.state.columns.lookup[c]);
@@ -496,10 +492,7 @@ export const useGridColumnResize = (apiRef, props) => {
       }));
       if (options.expand) {
         const visibleColumns = state.orderedFields.map(field => state.lookup[field]).filter(c => state.columnVisibilityModel[c.field] !== false);
-        const totalWidth = visibleColumns.reduce((total, column) => {
-          var _ref, _widthByField$column$;
-          return total + ((_ref = (_widthByField$column$ = widthByField[column.field]) != null ? _widthByField$column$ : column.computedWidth) != null ? _ref : column.width);
-        }, 0);
+        const totalWidth = visibleColumns.reduce((total, column) => total + (widthByField[column.field] ?? column.computedWidth ?? column.width), 0);
         const availableWidth = apiRef.current.getRootDimensions().viewportInnerSize.width;
         const remainingWidth = availableWidth - totalWidth;
         if (remainingWidth > 0) {
@@ -539,10 +532,7 @@ export const useGridColumnResize = (apiRef, props) => {
       });
     }
   });
-  useGridNativeEventListener(apiRef, () => {
-    var _apiRef$current$colum2;
-    return (_apiRef$current$colum2 = apiRef.current.columnHeadersContainerRef) == null ? void 0 : _apiRef$current$colum2.current;
-  }, 'touchstart', handleTouchStart, {
+  useGridNativeEventListener(apiRef, () => apiRef.current.columnHeadersContainerRef?.current, 'touchstart', handleTouchStart, {
     passive: doesSupportTouchActionNone()
   });
   useGridApiMethod(apiRef, {

package/hooks/features/columns/gridColumnsSelector.js

@@ -64,11 +64,10 @@ export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized
   return visiblePinnedColumns;
 });
 function filterVisibleColumns(pinnedColumns, columns, invert) {
-  var _pinnedColumns$left, _pinnedColumns$right;
   if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
     return EMPTY_PINNED_COLUMN_FIELDS;
   }
-  if (((_pinnedColumns$left = pinnedColumns.left) == null ? void 0 : _pinnedColumns$left.length) === 0 && ((_pinnedColumns$right = pinnedColumns.right) == null ? void 0 : _pinnedColumns$right.length) === 0) {
+  if (pinnedColumns.left?.length === 0 && pinnedColumns.right?.length === 0) {
     return EMPTY_PINNED_COLUMN_FIELDS;
   }
   const filter = (newPinnedColumns, remainingColumns) => {

package/hooks/features/columns/gridColumnsUtils.d.ts

@@ -51,13 +51,4 @@ export declare function getFirstNonSpannedColumnToRender({ firstColumnToRender,
     lastRowToRender: number;
     visibleRows: GridRowEntry[];
 }): number;
-export declare function getFirstColumnIndexToRender({ firstColumnIndex, minColumnIndex, columnBuffer, firstRowToRender, lastRowToRender, apiRef, visibleRows, }: {
-    firstColumnIndex: number;
-    minColumnIndex: number;
-    columnBuffer: number;
-    apiRef: React.MutableRefObject<GridApiCommon>;
-    firstRowToRender: number;
-    lastRowToRender: number;
-    visibleRows: GridRowEntry[];
-}): number;
 export declare function getTotalHeaderHeight(apiRef: React.MutableRefObject<GridApiCommunity>, headerHeight: number): number;

package/hooks/features/columns/gridColumnsUtils.js

@@ -213,7 +213,6 @@ export const createColumnsState = ({
   columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   keepOnlyColumnsToUpsert = false
 }) => {
-  var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current;
   const isInsideStateInitializer = !apiRef.current.state.columns;
   let columnsState;
   if (isInsideStateInitializer) {
@@ -283,7 +282,7 @@ export const createColumnsState = ({
   }
   const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-  return hydrateColumnsWidth(columnsStateWithPortableColumns, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null ? void 0 : _apiRef$current$getRo2.call(_apiRef$current).viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, apiRef.current.getRootDimensions?.().viewportInnerSize.width ?? 0);
 };
 export function getFirstNonSpannedColumnToRender({
   firstColumnToRender,
@@ -305,29 +304,10 @@ export function getFirstNonSpannedColumnToRender({
   }
   return firstNonSpannedColumnToRender;
 }
-export function getFirstColumnIndexToRender({
-  firstColumnIndex,
-  minColumnIndex,
-  columnBuffer,
-  firstRowToRender,
-  lastRowToRender,
-  apiRef,
-  visibleRows
-}) {
-  const initialFirstColumnToRender = Math.max(firstColumnIndex - columnBuffer, minColumnIndex);
-  const firstColumnToRender = getFirstNonSpannedColumnToRender({
-    firstColumnToRender: initialFirstColumnToRender,
-    apiRef,
-    firstRowToRender,
-    lastRowToRender,
-    visibleRows
-  });
-  return firstColumnToRender;
-}
 export function getTotalHeaderHeight(apiRef, headerHeight) {
   const densityFactor = gridDensityFactorSelector(apiRef);
   const maxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
   const isHeaderFilteringEnabled = gridHeaderFilteringEnabledSelector(apiRef);
   const multiplicationFactor = isHeaderFilteringEnabled ? 2 : 1;
-  return Math.floor(headerHeight * densityFactor) * ((maxDepth != null ? maxDepth : 0) + multiplicationFactor);
+  return Math.floor(headerHeight * densityFactor) * ((maxDepth ?? 0) + multiplicationFactor);
 }

package/hooks/features/columns/useGridColumnSpanning.js

@@ -8,8 +8,7 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 export const useGridColumnSpanning = apiRef => {
   const lookup = React.useRef({});
   const getCellColSpanInfo = (rowId, columnIndex) => {
-    var _lookup$current$rowId;
-    return (_lookup$current$rowId = lookup.current[rowId]) == null ? void 0 : _lookup$current$rowId[columnIndex];
+    return lookup.current[rowId]?.[columnIndex];
   };
 
   // Calculate `colSpan` for each cell in the row

package/hooks/features/columns/useGridColumns.js

@@ -10,19 +10,18 @@ import { hydrateColumnsWidth, createColumnsState, COLUMNS_DIMENSION_PROPERTIES }
 import { GridPreferencePanelsValue } from '../preferencesPanel';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const columnsStateInitializer = (state, props, apiRef) => {
-  var _props$initialState, _ref, _props$columnVisibili, _props$initialState2, _state$pinnedColumns;
   const columnsState = createColumnsState({
     apiRef,
     columnsToUpsert: props.columns,
-    initialState: (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.columns,
-    columnVisibilityModel: (_ref = (_props$columnVisibili = props.columnVisibilityModel) != null ? _props$columnVisibili : (_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.columns) == null ? void 0 : _props$initialState2.columnVisibilityModel) != null ? _ref : {},
+    initialState: props.initialState?.columns,
+    columnVisibilityModel: props.columnVisibilityModel ?? props.initialState?.columns?.columnVisibilityModel ?? {},
     keepOnlyColumnsToUpsert: true
   });
   return _extends({}, state, {
     columns: columnsState,
     // In pro/premium, this part of the state is defined. We give it an empty but defined value
     // for the community version.
-    pinnedColumns: (_state$pinnedColumns = state.pinnedColumns) != null ? _state$pinnedColumns : EMPTY_PINNED_COLUMN_FIELDS
+    pinnedColumns: state.pinnedColumns ?? EMPTY_PINNED_COLUMN_FIELDS
   });
 };
 
@@ -32,7 +31,6 @@ export const columnsStateInitializer = (state, props, apiRef) => {
  * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
  */
 export function useGridColumns(apiRef, props) {
-  var _props$initialState4, _props$slotProps2;
   const logger = useGridLogger(apiRef, 'useGridColumns');
   const previousColumnsProp = React.useRef(props.columns);
   apiRef.current.registerControlState({
@@ -43,11 +41,10 @@ export function useGridColumns(apiRef, props) {
     changeEvent: 'columnVisibilityModelChange'
   });
   const setGridColumnsState = React.useCallback(columnsState => {
-    var _apiRef$current$updat, _apiRef$current;
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
-    (_apiRef$current$updat = (_apiRef$current = apiRef.current).updateRenderContext) == null || _apiRef$current$updat.call(_apiRef$current);
+    apiRef.current.updateRenderContext?.();
     apiRef.current.forceUpdate();
   }, [logger, apiRef]);
 
@@ -68,7 +65,6 @@ export function useGridColumns(apiRef, props) {
   const setColumnVisibilityModel = React.useCallback(model => {
     const currentModel = gridColumnVisibilityModelSelector(apiRef);
     if (currentModel !== model) {
-      var _apiRef$current$updat2, _apiRef$current2;
       apiRef.current.setState(state => _extends({}, state, {
         columns: createColumnsState({
           apiRef,
@@ -78,7 +74,7 @@ export function useGridColumns(apiRef, props) {
           keepOnlyColumnsToUpsert: false
         })
       }));
-      (_apiRef$current$updat2 = (_apiRef$current2 = apiRef.current).updateRenderContext) == null || _apiRef$current$updat2.call(_apiRef$current2);
+      apiRef.current.updateRenderContext?.();
       apiRef.current.forceUpdate();
     }
   }, [apiRef]);
@@ -92,9 +88,8 @@ export function useGridColumns(apiRef, props) {
     setGridColumnsState(columnsState);
   }, [apiRef, setGridColumnsState]);
   const setColumnVisibility = React.useCallback((field, isVisible) => {
-    var _columnVisibilityMode;
     const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
-    const isCurrentlyVisible = (_columnVisibilityMode = columnVisibilityModel[field]) != null ? _columnVisibilityMode : true;
+    const isCurrentlyVisible = columnVisibilityModel[field] ?? true;
     if (isVisible !== isCurrentlyVisible) {
       const newModel = _extends({}, columnVisibilityModel, {
         [field]: isVisible
@@ -167,7 +162,6 @@ export function useGridColumns(apiRef, props) {
    * PRE-PROCESSING
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    var _props$initialState$c, _props$initialState3;
     const columnsStateToExport = {};
     const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
     const shouldExportColumnVisibilityModel =
@@ -177,7 +171,7 @@ export function useGridColumns(apiRef, props) {
     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$c = (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.columns) == null ? void 0 : _props$initialState3.columnVisibilityModel) != null ? _props$initialState$c : {}).length > 0 ||
+    Object.keys(props.initialState?.columns?.columnVisibilityModel ?? {}).length > 0 ||
     // Always export if the model is not empty
     Object.keys(columnVisibilityModelToExport).length > 0;
     if (shouldExportColumnVisibilityModel) {
@@ -205,10 +199,9 @@ export function useGridColumns(apiRef, props) {
     return _extends({}, prevState, {
       columns: columnsStateToExport
     });
-  }, [apiRef, props.columnVisibilityModel, (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.columns]);
+  }, [apiRef, props.columnVisibilityModel, props.initialState?.columns]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
-    var _context$stateToResto;
-    const columnVisibilityModelToImport = (_context$stateToResto = context.stateToRestore.columns) == null ? void 0 : _context$stateToResto.columnVisibilityModel;
+    const columnVisibilityModelToImport = context.stateToRestore.columns?.columnVisibilityModel;
     const initialState = context.stateToRestore.columns;
     if (columnVisibilityModelToImport == null && initialState == null) {
       return params;
@@ -228,12 +221,11 @@ export function useGridColumns(apiRef, props) {
   }, [apiRef]);
   const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
     if (value === GridPreferencePanelsValue.columns) {
-      var _props$slotProps;
       const ColumnsPanel = props.slots.columnsPanel;
-      return /*#__PURE__*/_jsx(ColumnsPanel, _extends({}, (_props$slotProps = props.slotProps) == null ? void 0 : _props$slotProps.columnsPanel));
+      return /*#__PURE__*/_jsx(ColumnsPanel, _extends({}, props.slotProps?.columnsPanel));
     }
     return initialValue;
-  }, [props.slots.columnsPanel, (_props$slotProps2 = props.slotProps) == null ? void 0 : _props$slotProps2.columnsPanel]);
+  }, [props.slots.columnsPanel, props.slotProps?.columnsPanel]);
   const addColumnMenuItems = React.useCallback(columnMenuItems => {
     if (props.disableColumnSelector) {
       return columnMenuItems;

package/hooks/features/density/densitySelector.d.ts

@@ -1,4 +1,6 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
-export declare const gridDensitySelector: (state: GridStateCommunity) => import("./densityState").GridDensityState;
-export declare const gridDensityValueSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridDensity>;
+import { GridDensity } from '../../../models/gridDensity';
+export declare const COMPACT_DENSITY_FACTOR = 0.7;
+export declare const COMFORTABLE_DENSITY_FACTOR = 1.3;
+export declare const gridDensitySelector: (state: GridStateCommunity) => GridDensity;
 export declare const gridDensityFactorSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;

package/hooks/features/density/densitySelector.js

@@ -1,4 +1,10 @@
 import { createSelector } from '../../../utils/createSelector';
+export const COMPACT_DENSITY_FACTOR = 0.7;
+export const COMFORTABLE_DENSITY_FACTOR = 1.3;
+const DENSITY_FACTORS = {
+  compact: COMPACT_DENSITY_FACTOR,
+  comfortable: COMFORTABLE_DENSITY_FACTOR,
+  standard: 1
+};
 export const gridDensitySelector = state => state.density;
-export const gridDensityValueSelector = createSelector(gridDensitySelector, density => density.value);
-export const gridDensityFactorSelector = createSelector(gridDensitySelector, density => density.factor);
+export const gridDensityFactorSelector = createSelector(gridDensitySelector, density => DENSITY_FACTORS[density]);

package/hooks/features/density/densityState.d.ts

@@ -1,5 +1,2 @@
 import { GridDensity } from '../../../models/gridDensity';
-export interface GridDensityState {
-    value: GridDensity;
-    factor: number;
-}
+export type GridDensityState = GridDensity;

package/hooks/features/density/useGridDensity.d.ts

@@ -2,7 +2,5 @@ import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-export declare const COMPACT_DENSITY_FACTOR = 0.7;
-export declare const COMFORTABLE_DENSITY_FACTOR = 1.3;
-export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'density'>>;
-export declare const useGridDensity: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'density'>) => void;
+export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'initialState' | 'density'>>;
+export declare const useGridDensity: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'density' | 'onDensityChange'>) => void;

package/hooks/features/density/useGridDensity.js

@@ -1,43 +1,35 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridDensitySelector } from './densitySelector';
-import { isDeepEqual } from '../../../utils/utils';
-export const COMPACT_DENSITY_FACTOR = 0.7;
-export const COMFORTABLE_DENSITY_FACTOR = 1.3;
-const DENSITY_FACTORS = {
-  compact: COMPACT_DENSITY_FACTOR,
-  comfortable: COMFORTABLE_DENSITY_FACTOR,
-  standard: 1
-};
 export const densityStateInitializer = (state, props) => _extends({}, state, {
-  density: {
-    value: props.density,
-    factor: DENSITY_FACTORS[props.density]
-  }
+  density: props.initialState?.density ?? props.density ?? 'standard'
 });
 export const useGridDensity = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useDensity');
-  const setDensity = React.useCallback(newDensity => {
+  apiRef.current.registerControlState({
+    stateId: 'density',
+    propModel: props.density,
+    propOnChange: props.onDensityChange,
+    stateSelector: gridDensitySelector,
+    changeEvent: 'densityChange'
+  });
+  const setDensity = useEventCallback(newDensity => {
+    const currentDensity = gridDensitySelector(apiRef.current.state);
+    if (currentDensity === newDensity) {
+      return;
+    }
     logger.debug(`Set grid density to ${newDensity}`);
-    apiRef.current.setState(state => {
-      const currentDensityState = gridDensitySelector(state);
-      const newDensityState = {
-        value: newDensity,
-        factor: DENSITY_FACTORS[newDensity]
-      };
-      if (isDeepEqual(currentDensityState, newDensityState)) {
-        return state;
-      }
-      return _extends({}, state, {
-        density: newDensityState
-      });
-    });
-    apiRef.current.forceUpdate();
-  }, [logger, apiRef]);
+    apiRef.current.setState(state => _extends({}, state, {
+      density: newDensity
+    }));
+  });
   React.useEffect(() => {
-    apiRef.current.setDensity(props.density);
+    if (props.density) {
+      apiRef.current.setDensity(props.density);
+    }
   }, [apiRef, props.density]);
   const densityApi = {
     setDensity

package/hooks/features/dimensions/useGridDimensions.js

@@ -66,7 +66,6 @@ export function useGridDimensions(apiRef, props) {
     }));
   });
   const resize = React.useCallback(() => {
-    var _previousSize$current, _previousSize$current2;
     const element = apiRef.current.mainElementRef.current;
     if (!element) {
       return;
@@ -74,8 +73,8 @@ export function useGridDimensions(apiRef, props) {
     const computedStyle = ownerWindow(element).getComputedStyle(element);
     const height = parseFloat(computedStyle.height) || 0;
     const width = parseFloat(computedStyle.width) || 0;
-    const hasHeightChanged = height !== ((_previousSize$current = previousSize.current) == null ? void 0 : _previousSize$current.height);
-    const hasWidthChanged = width !== ((_previousSize$current2 = previousSize.current) == null ? void 0 : _previousSize$current2.width);
+    const hasHeightChanged = height !== previousSize.current?.height;
+    const hasWidthChanged = width !== previousSize.current?.width;
     if (!previousSize.current || hasHeightChanged || hasWidthChanged) {
       const size = {
         width,
@@ -106,7 +105,6 @@ export function useGridDimensions(apiRef, props) {
     return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
   const updateDimensions = React.useCallback(() => {
-    var _apiRef$current$updat, _apiRef$current;
     const rootElement = apiRef.current.rootElementRef.current;
     const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
     const scrollbarSize = measureScrollbarSize(rootElement, columnsTotalWidth, props.scrollbarSize);
@@ -191,7 +189,7 @@ export function useGridDimensions(apiRef, props) {
     if (newDimensions.viewportInnerSize.width !== prevDimensions.viewportInnerSize.width || newDimensions.viewportInnerSize.height !== prevDimensions.viewportInnerSize.height) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
     }
-    (_apiRef$current$updat = (_apiRef$current = apiRef.current).updateRenderContext) == null || _apiRef$current$updat.call(_apiRef$current);
+    apiRef.current.updateRenderContext?.();
   }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
   const apiPublic = {
     resize,

package/hooks/features/editing/useGridCellEditing.js

@@ -14,7 +14,7 @@ import { buildWarning } from '../../../utils/warning';
 import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { deepClone } from '../../../utils/utils';
 import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../models/params/gridEditCellParams';
-const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
+const missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/#server-side-persistence.'], 'error');
 export const useGridCellEditing = (apiRef, props) => {
   const [cellModesModel, setCellModesModel] = React.useState({});
   const cellModesModelRef = React.useRef(cellModesModel);
@@ -339,7 +339,6 @@ export const useGridCellEditing = (apiRef, props) => {
     }
   });
   const setCellEditingEditCellValue = React.useCallback(async params => {
-    var _editingState$id;
     const {
       id,
       field,
@@ -389,7 +388,7 @@ export const useGridCellEditing = (apiRef, props) => {
     newProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
     updateOrDeleteFieldState(id, field, newProps);
     editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return !((_editingState$id = editingState[id]) != null && (_editingState$id = _editingState$id[field]) != null && _editingState$id.error);
+    return !editingState[id]?.[field]?.error;
   }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
   const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
     const column = apiRef.current.getColumn(field);
@@ -432,9 +431,8 @@ export const useGridCellEditing = (apiRef, props) => {
 
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
-        var _copyOfPrevCellModes$, _idToIdLookup$id;
-        const prevMode = ((_copyOfPrevCellModes$ = copyOfPrevCellModes[id]) == null || (_copyOfPrevCellModes$ = _copyOfPrevCellModes$[field]) == null ? void 0 : _copyOfPrevCellModes$.mode) || GridCellModes.View;
-        const originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
+        const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || GridCellModes.View;
+        const originalId = idToIdLookup[id] ?? id;
         if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
           updateStateToStartCellEditMode(_extends({
             id: originalId,