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

package/hooks/core/useGridApiInitialization.js

@@ -12,8 +12,7 @@ export function unwrapPrivateAPI(publicApi) {
 }
 let globalId = 0;
 function createPrivateAPI(publicApiRef) {
-  var _publicApiRef$current;
-  const existingPrivateApi = (_publicApiRef$current = publicApiRef.current) == null ? void 0 : _publicApiRef$current[SYMBOL_API_PRIVATE];
+  const existingPrivateApi = publicApiRef.current?.[SYMBOL_API_PRIVATE];
   if (existingPrivateApi) {
     return existingPrivateApi;
   }
@@ -31,7 +30,7 @@ function createPrivateAPI(publicApiRef) {
     Object.keys(methods).forEach(methodName => {
       const method = methods[methodName];
       const currentPrivateMethod = privateApi[methodName];
-      if ((currentPrivateMethod == null ? void 0 : currentPrivateMethod.spying) === true) {
+      if (currentPrivateMethod?.spying === true) {
         currentPrivateMethod.target = method;
       } else {
         privateApi[methodName] = method;
@@ -39,7 +38,7 @@ function createPrivateAPI(publicApiRef) {
       if (visibility === 'public') {
         const publicApi = publicApiRef.current;
         const currentPublicMethod = publicApi[methodName];
-        if ((currentPublicMethod == null ? void 0 : currentPublicMethod.spying) === true) {
+        if (currentPublicMethod?.spying === true) {
           currentPublicMethod.target = method;
         } else {
           publicApi[methodName] = method;
@@ -69,7 +68,6 @@ function createPublicAPI(privateApiRef) {
   return publicApi;
 }
 export function useGridApiInitialization(inputApiRef, props) {
-  var _inputApiRef$current;
   const publicApiRef = React.useRef();
   const privateApiRef = React.useRef();
   if (!privateApiRef.current) {
@@ -100,7 +98,7 @@ export function useGridApiInitialization(inputApiRef, props) {
     subscribeEvent,
     publishEvent
   }, 'public');
-  if (inputApiRef && !((_inputApiRef$current = inputApiRef.current) != null && _inputApiRef$current.state)) {
+  if (inputApiRef && !inputApiRef.current?.state) {
     inputApiRef.current = publicApiRef.current;
   }
   React.useImperativeHandle(inputApiRef, () => publicApiRef.current, [publicApiRef]);

package/hooks/features/clipboard/useGridClipboard.js

@@ -30,9 +30,8 @@ function copyToClipboard(data) {
   }
 }
 function hasNativeSelection(element) {
-  var _window$getSelection;
   // When getSelection is called on an <iframe> that is not displayed Firefox will return null.
-  if ((_window$getSelection = window.getSelection()) != null && _window$getSelection.toString()) {
+  if (window.getSelection()?.toString()) {
     return true;
   }
 
@@ -51,7 +50,7 @@ function hasNativeSelection(element) {
  */
 export const useGridClipboard = (apiRef, props) => {
   const ignoreValueFormatterProp = props.ignoreValueFormatterDuringExport;
-  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp == null ? void 0 : ignoreValueFormatterProp.clipboardExport : ignoreValueFormatterProp) || false;
+  const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   const handleCopy = React.useCallback(event => {
     if (!((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c' && !event.shiftKey && !event.altKey)) {
@@ -68,7 +67,8 @@ export const useGridClipboard = (apiRef, props) => {
       textToCopy = apiRef.current.getDataAsCsv({
         includeHeaders: false,
         // TODO: make it configurable
-        delimiter: clipboardCopyCellDelimiter
+        delimiter: clipboardCopyCellDelimiter,
+        shouldAppendQuotes: false
       });
     } else {
       const focusedCell = gridFocusCellSelector(apiRef);
@@ -76,7 +76,8 @@ export const useGridClipboard = (apiRef, props) => {
         const cellParams = apiRef.current.getCellParams(focusedCell.id, focusedCell.field);
         textToCopy = serializeCellValue(cellParams, {
           delimiterCharacter: clipboardCopyCellDelimiter,
-          ignoreValueFormatter
+          ignoreValueFormatter,
+          shouldAppendQuotes: false
         });
       }
     }

package/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -4,19 +4,7 @@ import { createSelector, createSelectorMemoized } from '../../../utils/createSel
  * @ignore - do not document.
  */
 export const gridColumnGroupingSelector = state => state.columnGrouping;
-export const gridColumnGroupsUnwrappedModelSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => {
-  var _columnGrouping$unwra;
-  return (_columnGrouping$unwra = columnGrouping == null ? void 0 : columnGrouping.unwrappedGroupingModel) != null ? _columnGrouping$unwra : {};
-});
-export const gridColumnGroupsLookupSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => {
-  var _columnGrouping$looku;
-  return (_columnGrouping$looku = columnGrouping == null ? void 0 : columnGrouping.lookup) != null ? _columnGrouping$looku : {};
-});
-export const gridColumnGroupsHeaderStructureSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => {
-  var _columnGrouping$heade;
-  return (_columnGrouping$heade = columnGrouping == null ? void 0 : columnGrouping.headerStructure) != null ? _columnGrouping$heade : [];
-});
-export const gridColumnGroupsHeaderMaxDepthSelector = createSelector(gridColumnGroupingSelector, columnGrouping => {
-  var _columnGrouping$maxDe;
-  return (_columnGrouping$maxDe = columnGrouping == null ? void 0 : columnGrouping.maxDepth) != null ? _columnGrouping$maxDe : 0;
-});
+export const gridColumnGroupsUnwrappedModelSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.unwrappedGroupingModel ?? {});
+export const gridColumnGroupsLookupSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.lookup ?? {});
+export const gridColumnGroupsHeaderStructureSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.headerStructure ?? []);
+export const gridColumnGroupsHeaderMaxDepthSelector = createSelector(gridColumnGroupingSelector, columnGrouping => columnGrouping?.maxDepth ?? 0);

package/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -35,26 +35,22 @@ export const unwrapGroupingColumnModel = columnGroupingModel => {
   return unwrappedSubTree;
 };
 export const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel, pinnedFields) => {
-  const getParents = field => {
-    var _unwrappedGroupingMod;
-    return (_unwrappedGroupingMod = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod : [];
-  };
+  const getParents = field => unwrappedGroupingModel[field] ?? [];
   const groupingHeaderStructure = [];
   const maxDepth = Math.max(...orderedColumns.map(field => getParents(field).length));
   const haveSameParents = (field1, field2, depth) => isDeepEqual(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
   const haveDifferentContainers = (field1, field2) => {
-    if (pinnedFields != null && pinnedFields.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
+    if (pinnedFields?.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
       return true;
     }
-    if (pinnedFields != null && pinnedFields.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
+    if (pinnedFields?.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
       return true;
     }
     return false;
   };
   for (let depth = 0; depth < maxDepth; depth += 1) {
     const depthStructure = orderedColumns.reduce((structure, newField) => {
-      var _getParents$depth;
-      const groupId = (_getParents$depth = getParents(newField)[depth]) != null ? _getParents$depth : null;
+      const groupId = getParents(newField)[depth] ?? null;
       if (structure.length === 0) {
         return [{
           columnFields: [newField],

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;