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

package/hooks/features/rows/gridRowsUtils.js

@@ -146,7 +146,6 @@ export const updateCacheWithNewRows = ({
   getRowId,
   updates
 }) => {
-  var _previousCache$update, _previousCache$update2, _previousCache$update3;
   if (previousCache.updates.type === 'full') {
     throw new Error('MUI X: Unable to prepare a partial update if a full update is not applied yet.');
   }
@@ -165,9 +164,9 @@ export const updateCacheWithNewRows = ({
   const partialUpdates = {
     type: 'partial',
     actions: {
-      insert: [...((_previousCache$update = previousCache.updates.actions.insert) != null ? _previousCache$update : [])],
-      modify: [...((_previousCache$update2 = previousCache.updates.actions.modify) != null ? _previousCache$update2 : [])],
-      remove: [...((_previousCache$update3 = previousCache.updates.actions.remove) != null ? _previousCache$update3 : [])]
+      insert: [...(previousCache.updates.actions.insert ?? [])],
+      modify: [...(previousCache.updates.actions.modify ?? [])],
+      remove: [...(previousCache.updates.actions.remove ?? [])]
     },
     idToActionLookup: _extends({}, previousCache.updates.idToActionLookup)
   };
@@ -265,16 +264,15 @@ export const updateCacheWithNewRows = ({
   };
 };
 export function calculatePinnedRowsHeight(apiRef) {
-  var _pinnedRows$top, _pinnedRows$bottom;
   const pinnedRows = gridPinnedRowsSelector(apiRef);
-  const topPinnedRowsHeight = (pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.reduce((acc, value) => {
+  const topPinnedRowsHeight = pinnedRows?.top?.reduce((acc, value) => {
     acc += apiRef.current.unstable_getRowHeight(value.id);
     return acc;
-  }, 0)) || 0;
-  const bottomPinnedRowsHeight = (pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.reduce((acc, value) => {
+  }, 0) || 0;
+  const bottomPinnedRowsHeight = pinnedRows?.bottom?.reduce((acc, value) => {
     acc += apiRef.current.unstable_getRowHeight(value.id);
     return acc;
-  }, 0)) || 0;
+  }, 0) || 0;
   return {
     top: topPinnedRowsHeight,
     bottom: bottomPinnedRowsHeight

package/hooks/features/rows/useGridParamsApi.js

@@ -37,7 +37,7 @@ export function useGridParamsApi(apiRef) {
       throw new MissingRowIdError(`No row with id #${id} found`);
     }
     const rawValue = row[field];
-    const value = colDef != null && colDef.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
+    const value = colDef?.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
     const cellFocus = gridFocusCellSelector(apiRef);
     const cellTabIndex = gridTabIndexCellSelector(apiRef);
     const params = {

package/hooks/features/rows/useGridRows.js

@@ -127,7 +127,7 @@ export const useGridRows = (apiRef, props) => {
     updates.forEach(update => {
       const id = getRowIdFromRowModel(update, props.getRowId, 'A row was provided without id when calling updateRows():');
       const rowNode = apiRef.current.getRowNode(id);
-      if ((rowNode == null ? void 0 : rowNode.type) === 'pinnedRow') {
+      if (rowNode?.type === 'pinnedRow') {
         // @ts-ignore because otherwise `release:build` doesn't work
         const pinnedRowsCache = apiRef.current.caches.pinnedRows;
         const prevModel = pinnedRowsCache.idLookup[id];
@@ -151,10 +151,7 @@ export const useGridRows = (apiRef, props) => {
   const getRowModels = React.useCallback(() => {
     const dataRows = gridDataRowIdsSelector(apiRef);
     const idRowsLookup = gridRowsLookupSelector(apiRef);
-    return new Map(dataRows.map(id => {
-      var _idRowsLookup$id;
-      return [id, (_idRowsLookup$id = idRowsLookup[id]) != null ? _idRowsLookup$id : {}];
-    }));
+    return new Map(dataRows.map(id => [id, idRowsLookup[id] ?? {}]));
   }, [apiRef]);
   const getRowsCount = React.useCallback(() => gridRowCountSelector(apiRef), [apiRef]);
   const getAllRowIds = React.useCallback(() => gridDataRowIdsSelector(apiRef), [apiRef]);
@@ -182,10 +179,7 @@ export const useGridRows = (apiRef, props) => {
     apiRef.current.forceUpdate();
     apiRef.current.publishEvent('rowExpansionChange', newNode);
   }, [apiRef]);
-  const getRowNode = React.useCallback(id => {
-    var _ref;
-    return (_ref = gridRowTreeSelector(apiRef)[id]) != null ? _ref : null;
-  }, [apiRef]);
+  const getRowNode = React.useCallback(id => gridRowTreeSelector(apiRef)[id] ?? null, [apiRef]);
   const getRowGroupChildren = React.useCallback(({
     skipAutoGeneratedRows = true,
     groupId,
@@ -293,10 +287,7 @@ export const useGridRows = (apiRef, props) => {
     });
 
     // Removes potential remaining skeleton rows from the dataRowIds.
-    const dataRowIds = rootGroupChildren.filter(childId => {
-      var _tree$childId;
-      return ((_tree$childId = tree[childId]) == null ? void 0 : _tree$childId.type) === 'leaf';
-    });
+    const dataRowIds = rootGroupChildren.filter(childId => tree[childId]?.type === 'leaf');
     apiRef.current.caches.rows.dataRowIdToModelLookup = dataRowIdToModelLookup;
     apiRef.current.caches.rows.dataRowIdToIdLookup = dataRowIdToIdLookup;
     apiRef.current.setState(state => _extends({}, state, {

package/hooks/features/rows/useGridRowsMeta.js

@@ -58,7 +58,6 @@ export const useGridRowsMeta = (apiRef, props) => {
   const validRowHeight = getValidRowHeight(props.rowHeight, DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, rowHeightWarning);
   const rowHeight = Math.floor(validRowHeight * densityFactor);
   const hydrateRowsMeta = React.useCallback(() => {
-    var _pinnedRows$top, _pinnedRows$bottom;
     hasRowWithAutoHeight.current = false;
     const calculateRowProcessedSizes = row => {
       if (!rowsHeightLookup.current[row.id]) {
@@ -92,7 +91,7 @@ export const useGridRowsMeta = (apiRef, props) => {
             })) : rowHeight;
 
             // If the row was not measured yet use the estimated row height
-            baseRowHeight = estimatedRowHeight != null ? estimatedRowHeight : rowHeight;
+            baseRowHeight = estimatedRowHeight ?? rowHeight;
           } else {
             baseRowHeight = existingBaseRowHeight;
           }
@@ -111,15 +110,14 @@ export const useGridRowsMeta = (apiRef, props) => {
         baseCenter: baseRowHeight
       };
       if (getRowSpacing) {
-        var _spacing$top, _spacing$bottom;
         const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
         const spacing = getRowSpacing(_extends({}, row, {
           isFirstVisible: indexRelativeToCurrentPage === 0,
           isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
           indexRelativeToCurrentPage
         }));
-        initialHeights.spacingTop = (_spacing$top = spacing.top) != null ? _spacing$top : 0;
-        initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 0;
+        initialHeights.spacingTop = spacing.top ?? 0;
+        initialHeights.spacingBottom = spacing.bottom ?? 0;
       }
       const processedSizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
       rowsHeightLookup.current[row.id].sizes = processedSizes;
@@ -139,10 +137,10 @@ export const useGridRowsMeta = (apiRef, props) => {
       }
       return acc + processedSizes.baseCenter + otherSizes;
     }, 0);
-    pinnedRows == null || (_pinnedRows$top = pinnedRows.top) == null || _pinnedRows$top.forEach(row => {
+    pinnedRows?.top?.forEach(row => {
       calculateRowProcessedSizes(row);
     });
-    pinnedRows == null || (_pinnedRows$bottom = pinnedRows.bottom) == null || _pinnedRows$bottom.forEach(row => {
+    pinnedRows?.bottom?.forEach(row => {
       calculateRowProcessedSizes(row);
     });
     apiRef.current.setState(state => {
@@ -163,10 +161,7 @@ export const useGridRowsMeta = (apiRef, props) => {
     const height = rowsHeightLookup.current[rowId];
     return height ? height.sizes.baseCenter : rowHeight;
   }, [rowHeight]);
-  const getRowInternalSizes = rowId => {
-    var _rowsHeightLookup$cur;
-    return (_rowsHeightLookup$cur = rowsHeightLookup.current[rowId]) == null ? void 0 : _rowsHeightLookup$cur.sizes;
-  };
+  const getRowInternalSizes = rowId => rowsHeightLookup.current[rowId]?.sizes;
   const setRowHeight = React.useCallback((id, height) => {
     rowsHeightLookup.current[id].sizes.baseCenter = height;
     rowsHeightLookup.current[id].isResized = true;
@@ -188,8 +183,7 @@ export const useGridRowsMeta = (apiRef, props) => {
     }
   }, [debouncedHydrateRowsMeta]);
   const rowHasAutoHeight = React.useCallback(id => {
-    var _rowsHeightLookup$cur2;
-    return ((_rowsHeightLookup$cur2 = rowsHeightLookup.current[id]) == null ? void 0 : _rowsHeightLookup$cur2.autoHeight) || false;
+    return rowsHeightLookup.current[id]?.autoHeight || false;
   }, []);
   const getLastMeasuredRowIndex = React.useCallback(() => {
     return lastMeasuredRowIndex.current;

package/hooks/features/scroll/useGridScroll.js

@@ -45,7 +45,7 @@ function scrollIntoView(dimensions) {
 export const useGridScroll = (apiRef, props) => {
   const theme = useTheme();
   const logger = useGridLogger(apiRef, 'useGridScroll');
-  const colRef = apiRef.current.columnHeadersElementRef;
+  const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
   const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
@@ -62,8 +62,7 @@ export const useGridScroll = (apiRef, props) => {
       const columnPositions = gridColumnPositionsSelector(apiRef);
       let cellWidth;
       if (typeof params.rowIndex !== 'undefined') {
-        var _visibleSortedRows$pa;
-        const rowId = (_visibleSortedRows$pa = visibleSortedRows[params.rowIndex]) == null ? void 0 : _visibleSortedRows$pa.id;
+        const rowId = visibleSortedRows[params.rowIndex]?.id;
         const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, params.colIndex);
         if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
           cellWidth = cellColSpanInfo.cellProps.width;
@@ -114,7 +113,7 @@ export const useGridScroll = (apiRef, props) => {
     logger.debug(`Scrolling, updating container, and viewport`);
   }, [virtualScrollerRef, theme.direction, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
-    if (!(virtualScrollerRef != null && virtualScrollerRef.current)) {
+    if (!virtualScrollerRef?.current) {
       return {
         top: 0,
         left: 0

package/hooks/features/sorting/gridSortingSelector.js

@@ -19,13 +19,10 @@ export const gridSortedRowIdsSelector = createSelector(gridSortingStateSelector,
  */
 export const gridSortedRowEntriesSelector = createSelectorMemoized(gridSortedRowIdsSelector, gridRowsLookupSelector,
 // TODO rows v6: Is this the best approach ?
-(sortedIds, idRowsLookup) => sortedIds.map(id => {
-  var _idRowsLookup$id;
-  return {
-    id,
-    model: (_idRowsLookup$id = idRowsLookup[id]) != null ? _idRowsLookup$id : {}
-  };
-}));
+(sortedIds, idRowsLookup) => sortedIds.map(id => ({
+  id,
+  model: idRowsLookup[id] ?? {}
+})));
 
 /**
  * Get the current sorting model.

package/hooks/features/sorting/useGridSorting.js

@@ -13,8 +13,7 @@ import { buildAggregatedSortingApplier, mergeStateWithSortModel, getNextGridSort
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { getTreeNodeDescendants } from '../rows/gridRowsUtils';
 export const sortingStateInitializer = (state, props) => {
-  var _ref, _props$sortModel, _props$initialState;
-  const sortModel = (_ref = (_props$sortModel = props.sortModel) != null ? _props$sortModel : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.sorting) == null ? void 0 : _props$initialState.sortModel) != null ? _ref : [];
+  const sortModel = props.sortModel ?? props.initialState?.sorting?.sortModel ?? [];
   return _extends({}, state, {
     sorting: {
       sortModel: sanitizeSortModel(sortModel, props.disableMultipleColumnsSorting),
@@ -28,7 +27,6 @@ export const sortingStateInitializer = (state, props) => {
  * @requires useGridColumns (event)
  */
 export const useGridSorting = (apiRef, props) => {
-  var _props$initialState3;
   const logger = useGridLogger(apiRef, 'useGridSorting');
   apiRef.current.registerControlState({
     stateId: 'sortModel',
@@ -42,7 +40,7 @@ export const useGridSorting = (apiRef, props) => {
     const existingIdx = sortModel.findIndex(c => c.field === field);
     let newSortModel = [...sortModel];
     if (existingIdx > -1) {
-      if ((sortItem == null ? void 0 : sortItem.sort) == null) {
+      if (sortItem?.sort == null) {
         newSortModel.splice(existingIdx, 1);
       } else {
         newSortModel.splice(existingIdx, 1, sortItem);
@@ -53,19 +51,17 @@ export const useGridSorting = (apiRef, props) => {
     return newSortModel;
   }, [apiRef]);
   const createSortItem = React.useCallback((col, directionOverride) => {
-    var _col$sortingOrder2;
     const sortModel = gridSortModelSelector(apiRef);
     const existing = sortModel.find(c => c.field === col.field);
     if (existing) {
-      var _col$sortingOrder;
-      const nextSort = directionOverride === undefined ? getNextGridSortDirection((_col$sortingOrder = col.sortingOrder) != null ? _col$sortingOrder : props.sortingOrder, existing.sort) : directionOverride;
+      const nextSort = directionOverride === undefined ? getNextGridSortDirection(col.sortingOrder ?? props.sortingOrder, existing.sort) : directionOverride;
       return nextSort === undefined ? undefined : _extends({}, existing, {
         sort: nextSort
       });
     }
     return {
       field: col.field,
-      sort: directionOverride === undefined ? getNextGridSortDirection((_col$sortingOrder2 = col.sortingOrder) != null ? _col$sortingOrder2 : props.sortingOrder) : directionOverride
+      sort: directionOverride === undefined ? getNextGridSortDirection(col.sortingOrder ?? props.sortingOrder) : directionOverride
     };
   }, [apiRef, props.sortingOrder]);
   const addColumnMenuItem = React.useCallback((columnMenuItems, colDef) => {
@@ -120,7 +116,7 @@ export const useGridSorting = (apiRef, props) => {
     const sortItem = createSortItem(column, direction);
     let sortModel;
     if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {
-      sortModel = (sortItem == null ? void 0 : sortItem.sort) == null ? [] : [sortItem];
+      sortModel = sortItem?.sort == null ? [] : [sortItem];
     } else {
       sortModel = upsertSortModel(column.field, sortItem);
     }
@@ -148,7 +144,6 @@ export const useGridSorting = (apiRef, props) => {
    * PRE-PROCESSING
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    var _props$initialState2;
     const sortModelToExport = gridSortModelSelector(apiRef);
     const shouldExportSortModel =
     // Always export if the `exportOnlyDirtyModels` property is not activated
@@ -156,7 +151,7 @@ export const useGridSorting = (apiRef, props) => {
     // Always export if the model is controlled
     props.sortModel != null ||
     // Always export if the model has been initialized
-    ((_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.sorting) == null ? void 0 : _props$initialState2.sortModel) != null ||
+    props.initialState?.sorting?.sortModel != null ||
     // Export if the model is not empty
     sortModelToExport.length > 0;
     if (!shouldExportSortModel) {
@@ -167,10 +162,9 @@ export const useGridSorting = (apiRef, props) => {
         sortModel: sortModelToExport
       }
     });
-  }, [apiRef, props.sortModel, (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.sorting) == null ? void 0 : _props$initialState3.sortModel]);
+  }, [apiRef, props.sortModel, props.initialState?.sorting?.sortModel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
-    var _context$stateToResto;
-    const sortModel = (_context$stateToResto = context.stateToRestore.sorting) == null ? void 0 : _context$stateToResto.sortModel;
+    const sortModel = context.stateToRestore.sorting?.sortModel;
     if (sortModel == null) {
       return params;
     }

package/hooks/features/virtualization/gridVirtualizationSelectors.d.ts

@@ -1,5 +1,5 @@
-import { GridRenderContext } from '../../../models/params/gridScrollParams';
-import { GridStateCommunity } from '../../../models/gridStateCommunity';
+import type { GridColumnsRenderContext } from '../../../models/params/gridScrollParams';
+import type { GridStateCommunity } from '../../../models/gridStateCommunity';
 /**
  * Get the columns state
  * @category Virtualization
@@ -20,11 +20,11 @@ export declare const gridVirtualizationColumnEnabledSelector: import("../../../u
  * @category Virtualization
  * @ignore - do not document.
  */
-export declare const gridRenderContextSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridRenderContext>;
+export declare const gridRenderContextSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../models/params/gridScrollParams").GridRenderContext>;
 /**
  * Get the render context, with only columns filled in.
  * This is cached, so it can be used to only re-render when the column interval changes.
  * @category Virtualization
  * @ignore - do not document.
  */
-export declare const gridRenderContextColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridRenderContext>;
+export declare const gridRenderContextColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridColumnsRenderContext>;

package/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -31,8 +31,6 @@ export const gridRenderContextSelector = createSelector(gridVirtualizationSelect
  * @ignore - do not document.
  */
 export const gridRenderContextColumnsSelector = createSelectorMemoized(state => state.virtualization.renderContext.firstColumnIndex, state => state.virtualization.renderContext.lastColumnIndex, (firstColumnIndex, lastColumnIndex) => ({
-  firstRowIndex: -1,
-  lastRowIndex: -1,
   firstColumnIndex,
   lastColumnIndex
 }));

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Theme } from '@mui/material/styles';
 import { GridPinnedRowsPosition } from '../rows/gridRowsInterfaces';
-import { GridRenderContext, GridRowEntry, GridRowId } from '../../../models';
-export declare const EMPTY_DETAIL_PANELS: Readonly<Map<GridRowId, React.ReactNode>>;
+import type { GridRenderContext, GridColumnsRenderContext, GridRowEntry, GridRowId } from '../../../models';
 export type VirtualScroller = ReturnType<typeof useGridVirtualScroller>;
+export declare const EMPTY_DETAIL_PANELS: Readonly<Map<GridRowId, React.ReactNode>>;
 export declare const useGridVirtualScroller: () => {
     renderContext: GridRenderContext;
     setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<GridRowId, React.ReactNode>>>>;
@@ -41,4 +41,4 @@ export declare const useGridVirtualScroller: () => {
     };
 };
 export declare function areRenderContextsEqual(context1: GridRenderContext, context2: GridRenderContext): boolean;
-export declare function computeOffsetLeft(columnPositions: number[], renderContext: GridRenderContext, direction: Theme['direction'], pinnedLeftLength: number): number;
+export declare function computeOffsetLeft(columnPositions: number[], renderContext: GridColumnsRenderContext, direction: Theme['direction'], pinnedLeftLength: number): number;