@mui/x-data-grid 9.0.0-alpha.1 → 9.0.0-alpha.2

package/hooks/features/columns/gridColumnsSelector.d.mts

@@ -0,0 +1,114 @@
+import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
+import { type GridColumnLookup, type GridPinnedColumnFields } from "./gridColumnsInterfaces.mjs";
+/**
+ * Get the columns state
+ * @category Columns
+ */
+export declare const gridColumnsStateSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridColumnsState>;
+/**
+ * Get an array of column fields in the order rendered on screen.
+ * @category Columns
+ */
+export declare const gridColumnFieldsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => string[];
+/**
+ * Get the columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+export declare const gridColumnLookupSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => GridColumnLookup;
+/**
+ * Get an array of column definitions in the order rendered on screen..
+ * @category Columns
+ */
+export declare const gridColumnDefinitionsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("../../../internals/index.mjs").GridStateColDef[];
+/**
+ * Get the column visibility model, containing the visibility status of each column.
+ * If a column is not registered in the model, it is visible.
+ * @category Visible Columns
+ */
+export declare const gridColumnVisibilityModelSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("@mui/x-data-grid").GridColumnVisibilityModel;
+/**
+ * Get the "initial" column visibility model, containing the visibility status of each column.
+ * It is updated when the `columns` prop is updated or when `updateColumns` API method is called.
+ * If a column is not registered in the model, it is visible.
+ * @category Visible Columns
+ */
+export declare const gridInitialColumnVisibilityModelSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("@mui/x-data-grid").GridColumnVisibilityModel;
+/**
+ * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Visible Columns
+ */
+export declare const gridVisibleColumnDefinitionsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("../../../internals/index.mjs").GridStateColDef[];
+/**
+ * Get the field of each visible column.
+ * @category Visible Columns
+ */
+export declare const gridVisibleColumnFieldsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => string[];
+/**
+ * Get the visible pinned columns model.
+ * @category Visible Columns
+ */
+export declare const gridPinnedColumnsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, GridPinnedColumnFields>;
+/**
+ * Get all existing pinned columns. Place the columns on the side that depends on the rtl state.
+ * @category Pinned Columns
+ * @ignore - Do not document
+ */
+export declare const gridExistingPinnedColumnSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => {
+  left: string[];
+  right: string[];
+};
+/**
+ * Get the visible pinned columns.
+ * @category Visible Columns
+ */
+export declare const gridVisiblePinnedColumnDefinitionsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => {
+  left: import("../../../internals/index.mjs").GridStateColDef[];
+  right: import("../../../internals/index.mjs").GridStateColDef[];
+};
+/**
+ * Get the left position in pixel of each visible columns relative to the left of the first column.
+ * @category Visible Columns
+ */
+export declare const gridColumnPositionsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number[];
+/**
+ * Get the filterable columns as an array.
+ * @category Columns
+ */
+export declare const gridFilterableColumnDefinitionsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("../../../internals/index.mjs").GridStateColDef[];
+/**
+ * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+export declare const gridFilterableColumnLookupSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => GridColumnLookup;
+/**
+ * Checks if some column has a colSpan field.
+ * @category Columns
+ * @ignore - Do not document
+ */
+export declare const gridHasColSpanSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;

package/hooks/features/columns/gridColumnsSelector.mjs

@@ -0,0 +1,142 @@
+import { createSelector, createSelectorMemoized, createRootSelector } from "../../../utils/createSelector.mjs";
+import { EMPTY_PINNED_COLUMN_FIELDS } from "./gridColumnsInterfaces.mjs";
+import { gridListColumnSelector, gridListViewSelector } from "../listView/index.mjs";
+
+/**
+ * Get the columns state
+ * @category Columns
+ */
+export const gridColumnsStateSelector = createRootSelector(state => state.columns);
+
+/**
+ * Get an array of column fields in the order rendered on screen.
+ * @category Columns
+ */
+export const gridColumnFieldsSelector = createSelector(gridColumnsStateSelector, columnsState => columnsState.orderedFields);
+
+/**
+ * Get the columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+export const gridColumnLookupSelector = createSelector(gridColumnsStateSelector, columnsState => columnsState.lookup);
+
+/**
+ * Get an array of column definitions in the order rendered on screen..
+ * @category Columns
+ */
+export const gridColumnDefinitionsSelector = createSelectorMemoized(gridColumnFieldsSelector, gridColumnLookupSelector, (allFields, lookup) => allFields.map(field => lookup[field]));
+
+/**
+ * Get the column visibility model, containing the visibility status of each column.
+ * If a column is not registered in the model, it is visible.
+ * @category Visible Columns
+ */
+export const gridColumnVisibilityModelSelector = createSelector(gridColumnsStateSelector, columnsState => columnsState.columnVisibilityModel);
+
+/**
+ * Get the "initial" column visibility model, containing the visibility status of each column.
+ * It is updated when the `columns` prop is updated or when `updateColumns` API method is called.
+ * If a column is not registered in the model, it is visible.
+ * @category Visible Columns
+ */
+export const gridInitialColumnVisibilityModelSelector = createSelector(gridColumnsStateSelector, columnsState => columnsState.initialColumnVisibilityModel);
+
+/**
+ * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Visible Columns
+ */
+export const gridVisibleColumnDefinitionsSelector = createSelectorMemoized(gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, gridListViewSelector, gridListColumnSelector, (columns, columnVisibilityModel, listView, listColumn) => listView && listColumn ? [listColumn] : columns.filter(column => columnVisibilityModel[column.field] !== false));
+
+/**
+ * Get the field of each visible column.
+ * @category Visible Columns
+ */
+export const gridVisibleColumnFieldsSelector = createSelectorMemoized(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.map(column => column.field));
+
+/**
+ * Get the visible pinned columns model.
+ * @category Visible Columns
+ */
+export const gridPinnedColumnsSelector = createRootSelector(state => state.pinnedColumns);
+
+/**
+ * Get all existing pinned columns. Place the columns on the side that depends on the rtl state.
+ * @category Pinned Columns
+ * @ignore - Do not document
+ */
+export const gridExistingPinnedColumnSelector = createSelectorMemoized(gridPinnedColumnsSelector, gridColumnFieldsSelector, (model, orderedFields) => filterMissingColumns(model, orderedFields));
+
+/**
+ * Get the visible pinned columns.
+ * @category Visible Columns
+ */
+export const gridVisiblePinnedColumnDefinitionsSelector = createSelectorMemoized(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, gridListViewSelector, (columnsState, model, visibleColumnFields, listView) => {
+  if (listView) {
+    return EMPTY_PINNED_COLUMN_FIELDS;
+  }
+  const visiblePinnedFields = filterMissingColumns(model, visibleColumnFields);
+  const visiblePinnedColumns = {
+    left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),
+    right: visiblePinnedFields.right.map(field => columnsState.lookup[field])
+  };
+  return visiblePinnedColumns;
+});
+function filterMissingColumns(pinnedColumns, columns) {
+  if (!Array.isArray(pinnedColumns.left) && !Array.isArray(pinnedColumns.right)) {
+    return EMPTY_PINNED_COLUMN_FIELDS;
+  }
+  if (pinnedColumns.left?.length === 0 && pinnedColumns.right?.length === 0) {
+    return EMPTY_PINNED_COLUMN_FIELDS;
+  }
+  const filter = (newPinnedColumns, remainingColumns) => {
+    if (!Array.isArray(newPinnedColumns)) {
+      return [];
+    }
+    return newPinnedColumns.filter(field => remainingColumns.includes(field));
+  };
+  const leftPinnedColumns = filter(pinnedColumns.left, columns);
+  const columnsWithoutLeftPinnedColumns = columns.filter(field => !leftPinnedColumns.includes(field));
+  const rightPinnedColumns = filter(pinnedColumns.right, columnsWithoutLeftPinnedColumns);
+  return {
+    left: leftPinnedColumns,
+    right: rightPinnedColumns
+  };
+}
+
+/**
+ * Get the left position in pixel of each visible columns relative to the left of the first column.
+ * @category Visible Columns
+ */
+export const gridColumnPositionsSelector = createSelectorMemoized(gridVisibleColumnDefinitionsSelector, visibleColumns => {
+  const positions = [];
+  let currentPosition = 0;
+  for (let i = 0; i < visibleColumns.length; i += 1) {
+    positions.push(currentPosition);
+    currentPosition += visibleColumns[i].computedWidth;
+  }
+  return positions;
+});
+
+/**
+ * Get the filterable columns as an array.
+ * @category Columns
+ */
+export const gridFilterableColumnDefinitionsSelector = createSelectorMemoized(gridColumnDefinitionsSelector, columns => columns.filter(col => col.filterable));
+
+/**
+ * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+export const gridFilterableColumnLookupSelector = createSelectorMemoized(gridColumnDefinitionsSelector, columns => columns.reduce((acc, col) => {
+  if (col.filterable) {
+    acc[col.field] = col;
+  }
+  return acc;
+}, {}));
+
+/**
+ * Checks if some column has a colSpan field.
+ * @category Columns
+ * @ignore - Do not document
+ */
+export const gridHasColSpanSelector = createSelectorMemoized(gridColumnDefinitionsSelector, columns => columns.some(column => column.colSpan !== undefined));

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

@@ -0,0 +1,75 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridColumnsState, GridColumnsRawState, GridColumnVisibilityModel, GridColumnsInitialState } from "./gridColumnsInterfaces.mjs";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+import type { GridApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { GridColDef } from "../../../models/colDef/gridColDef.mjs";
+import type { GridApiCommon } from "../../../models/api/gridApiCommon.mjs";
+import type { GridRowEntry } from "../../../models/gridRows.mjs";
+import type { GridDimensions } from "../dimensions/gridDimensionsApi.mjs";
+export declare const COLUMNS_DIMENSION_PROPERTIES: readonly ["maxWidth", "minWidth", "width", "flex"];
+export type GridColumnDimensionProperties = (typeof COLUMNS_DIMENSION_PROPERTIES)[number];
+/**
+ * Computes width for flex columns.
+ * Based on CSS Flexbox specification:
+ * https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
+ */
+export declare function computeFlexColumnsWidth({
+  initialFreeSpace,
+  totalFlexUnits,
+  flexColumns
+}: {
+  initialFreeSpace: number;
+  totalFlexUnits: number;
+  flexColumns: {
+    field: GridColDef['field'];
+    flex?: number | null;
+    minWidth?: number;
+    maxWidth?: number;
+  }[];
+}): Record<string, {
+  flex: number;
+  computedWidth: number;
+  frozen: boolean;
+}>;
+/**
+ * Compute the `computedWidth` (ie: the width the column should have during rendering) based on the `width` / `flex` / `minWidth` / `maxWidth` properties of `GridColDef`.
+ * The columns already have been merged with there `type` default values for `minWidth`, `maxWidth` and `width`, thus the `!` for those properties below.
+ * TODO: Unit test this function in depth and only keep basic cases for the whole grid testing.
+ * TODO: Improve the `GridColDef` typing to reflect the fact that `minWidth` / `maxWidth` and `width` can't be null after the merge with the `type` default values.
+ */
+export declare const hydrateColumnsWidth: (rawState: GridColumnsRawState, dimensions: GridDimensions | undefined) => GridColumnsState;
+/**
+ * Apply the order and the dimensions of the initial state.
+ * The columns not registered in `orderedFields` will be placed after the imported columns.
+ */
+export declare const applyInitialState: (columnsState: GridColumnsRawState, initialState: GridColumnsInitialState | undefined) => GridColumnsRawState;
+export declare function getDefaultColTypeDef(type: GridColDef['type']): import("@mui/x-data-grid").GridColTypeDef;
+export declare const createColumnsState: ({
+  apiRef,
+  columnsToUpsert,
+  initialState,
+  columnVisibilityModel,
+  keepOnlyColumnsToUpsert,
+  updateInitialVisibilityModel
+}: {
+  columnsToUpsert: readonly GridColDef[];
+  initialState: GridColumnsInitialState | undefined;
+  columnVisibilityModel?: GridColumnVisibilityModel;
+  keepOnlyColumnsToUpsert: boolean;
+  updateInitialVisibilityModel?: boolean;
+  apiRef: RefObject<GridApiCommunity>;
+}) => GridColumnsState;
+export declare function getFirstNonSpannedColumnToRender({
+  firstColumnToRender,
+  apiRef,
+  firstRowToRender,
+  lastRowToRender,
+  visibleRows
+}: {
+  firstColumnToRender: number;
+  apiRef: RefObject<GridApiCommon>;
+  firstRowToRender: number;
+  lastRowToRender: number;
+  visibleRows: GridRowEntry[];
+}): number;
+export declare function getTotalHeaderHeight(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight' | 'listView' | 'columnGroupHeaderHeight'>): number;

package/hooks/features/columns/gridColumnsUtils.mjs

@@ -0,0 +1,345 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import resolveProps from '@mui/utils/resolveProps';
+import { DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF, getGridDefaultColumnTypes } from "../../../colDef/index.mjs";
+import { gridColumnsStateSelector, gridColumnVisibilityModelSelector } from "./gridColumnsSelector.mjs";
+import { clamp } from "../../../utils/utils.mjs";
+import { gridDensityFactorSelector } from "../density/densitySelector.mjs";
+import { gridHeaderFilteringEnabledSelector } from "../headerFiltering/gridHeaderFilteringSelectors.mjs";
+import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridColumnGroupsSelector.mjs";
+export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
+const COLUMN_TYPES = getGridDefaultColumnTypes();
+
+/**
+ * Computes width for flex columns.
+ * Based on CSS Flexbox specification:
+ * https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
+ */
+export function computeFlexColumnsWidth({
+  initialFreeSpace,
+  totalFlexUnits,
+  flexColumns
+}) {
+  const uniqueFlexColumns = new Set(flexColumns.map(col => col.field));
+  const flexColumnsLookup = {
+    all: {},
+    frozenFields: [],
+    freeze: field => {
+      const value = flexColumnsLookup.all[field];
+      if (value && value.frozen !== true) {
+        flexColumnsLookup.all[field].frozen = true;
+        flexColumnsLookup.frozenFields.push(field);
+      }
+    }
+  };
+
+  // Step 5 of https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
+  function loopOverFlexItems() {
+    // 5a: If all the flex items on the line are frozen, free space has been distributed.
+    if (flexColumnsLookup.frozenFields.length === uniqueFlexColumns.size) {
+      return;
+    }
+    const violationsLookup = {
+      min: {},
+      max: {}
+    };
+    let remainingFreeSpace = initialFreeSpace;
+    let flexUnits = totalFlexUnits;
+    let totalViolation = 0;
+
+    // 5b: Calculate the remaining free space
+    flexColumnsLookup.frozenFields.forEach(field => {
+      remainingFreeSpace -= flexColumnsLookup.all[field].computedWidth;
+      flexUnits -= flexColumnsLookup.all[field].flex;
+    });
+    for (let i = 0; i < flexColumns.length; i += 1) {
+      const column = flexColumns[i];
+      if (flexColumnsLookup.all[column.field] && flexColumnsLookup.all[column.field].frozen === true) {
+        continue;
+      }
+
+      // 5c: Distribute remaining free space proportional to the flex factors
+      const widthPerFlexUnit = remainingFreeSpace / flexUnits;
+      let computedWidth = widthPerFlexUnit * column.flex;
+
+      // 5d: Fix min/max violations
+      if (computedWidth < column.minWidth) {
+        totalViolation += column.minWidth - computedWidth;
+        computedWidth = column.minWidth;
+        violationsLookup.min[column.field] = true;
+      } else if (computedWidth > column.maxWidth) {
+        totalViolation += column.maxWidth - computedWidth;
+        computedWidth = column.maxWidth;
+        violationsLookup.max[column.field] = true;
+      }
+      flexColumnsLookup.all[column.field] = {
+        frozen: false,
+        computedWidth,
+        flex: column.flex
+      };
+    }
+
+    // 5e: Freeze over-flexed items
+    if (totalViolation < 0) {
+      // Freeze all the items with max violations
+      Object.keys(violationsLookup.max).forEach(field => {
+        flexColumnsLookup.freeze(field);
+      });
+    } else if (totalViolation > 0) {
+      // Freeze all the items with min violations
+      Object.keys(violationsLookup.min).forEach(field => {
+        flexColumnsLookup.freeze(field);
+      });
+    } else {
+      // Freeze all items
+      flexColumns.forEach(({
+        field
+      }) => {
+        flexColumnsLookup.freeze(field);
+      });
+    }
+
+    // 5f: Return to the start of this loop
+    loopOverFlexItems();
+  }
+  loopOverFlexItems();
+  return flexColumnsLookup.all;
+}
+
+/**
+ * Compute the `computedWidth` (ie: the width the column should have during rendering) based on the `width` / `flex` / `minWidth` / `maxWidth` properties of `GridColDef`.
+ * The columns already have been merged with there `type` default values for `minWidth`, `maxWidth` and `width`, thus the `!` for those properties below.
+ * TODO: Unit test this function in depth and only keep basic cases for the whole grid testing.
+ * TODO: Improve the `GridColDef` typing to reflect the fact that `minWidth` / `maxWidth` and `width` can't be null after the merge with the `type` default values.
+ */
+export const hydrateColumnsWidth = (rawState, dimensions) => {
+  const columnsLookup = {};
+  let totalFlexUnits = 0;
+  let widthAllocatedBeforeFlex = 0;
+  const flexColumns = [];
+
+  // For the non-flex columns, compute their width
+  // For the flex columns, compute their minimum width and how much width must be allocated during the flex allocation
+  rawState.orderedFields.forEach(columnField => {
+    let column = rawState.lookup[columnField];
+    let computedWidth = 0;
+    let isFlex = false;
+    if (rawState.columnVisibilityModel[columnField] !== false) {
+      if (column.flex && column.flex > 0) {
+        totalFlexUnits += column.flex;
+        isFlex = true;
+      } else {
+        computedWidth = clamp(column.width || GRID_STRING_COL_DEF.width, column.minWidth || GRID_STRING_COL_DEF.minWidth, column.maxWidth || GRID_STRING_COL_DEF.maxWidth);
+      }
+      widthAllocatedBeforeFlex += computedWidth;
+    }
+    if (column.computedWidth !== computedWidth) {
+      column = _extends({}, column, {
+        computedWidth
+      });
+    }
+    if (isFlex) {
+      flexColumns.push(column);
+    }
+    columnsLookup[columnField] = column;
+  });
+  const availableWidth = dimensions === undefined ? 0 : dimensions.viewportOuterSize.width - (dimensions.hasScrollY ? dimensions.scrollbarSize : 0);
+  const initialFreeSpace = Math.max(availableWidth - widthAllocatedBeforeFlex, 0);
+
+  // Allocate the remaining space to the flex columns
+  if (totalFlexUnits > 0 && availableWidth > 0) {
+    const computedColumnWidths = computeFlexColumnsWidth({
+      initialFreeSpace,
+      totalFlexUnits,
+      flexColumns
+    });
+    Object.keys(computedColumnWidths).forEach(field => {
+      columnsLookup[field] = _extends({}, columnsLookup[field], {
+        computedWidth: computedColumnWidths[field].computedWidth
+      });
+    });
+  }
+  return _extends({}, rawState, {
+    lookup: columnsLookup
+  });
+};
+
+/**
+ * Apply the order and the dimensions of the initial state.
+ * The columns not registered in `orderedFields` will be placed after the imported columns.
+ */
+export const applyInitialState = (columnsState, initialState) => {
+  if (!initialState) {
+    return columnsState;
+  }
+  const {
+    orderedFields = [],
+    dimensions = {}
+  } = initialState;
+  const columnsWithUpdatedDimensions = Object.keys(dimensions);
+  if (columnsWithUpdatedDimensions.length === 0 && orderedFields.length === 0) {
+    return columnsState;
+  }
+  const orderedFieldsLookup = {};
+  const cleanOrderedFields = [];
+  for (let i = 0; i < orderedFields.length; i += 1) {
+    const field = orderedFields[i];
+
+    // Ignores the fields in the initialState that matches no field on the current column state
+    if (columnsState.lookup[field]) {
+      orderedFieldsLookup[field] = true;
+      cleanOrderedFields.push(field);
+    }
+  }
+  const newOrderedFields = cleanOrderedFields.length === 0 ? columnsState.orderedFields : [...cleanOrderedFields, ...columnsState.orderedFields.filter(field => !orderedFieldsLookup[field])];
+  const newColumnLookup = _extends({}, columnsState.lookup);
+  for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
+    const field = columnsWithUpdatedDimensions[i];
+    const newColDef = _extends({}, newColumnLookup[field], {
+      hasBeenResized: true
+    });
+    Object.entries(dimensions[field]).forEach(([key, value]) => {
+      newColDef[key] = value === -1 ? Infinity : value;
+    });
+    newColumnLookup[field] = newColDef;
+  }
+  const newColumnsState = _extends({}, columnsState, {
+    orderedFields: newOrderedFields,
+    lookup: newColumnLookup
+  });
+  return newColumnsState;
+};
+export function getDefaultColTypeDef(type) {
+  let colDef = COLUMN_TYPES[DEFAULT_GRID_COL_TYPE_KEY];
+  if (type && COLUMN_TYPES[type]) {
+    colDef = COLUMN_TYPES[type];
+  }
+  return colDef;
+}
+export const createColumnsState = ({
+  apiRef,
+  columnsToUpsert,
+  initialState,
+  columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
+  keepOnlyColumnsToUpsert = false,
+  updateInitialVisibilityModel = false
+}) => {
+  const isInsideStateInitializer = !apiRef.current.state.columns;
+  let columnsState;
+  if (isInsideStateInitializer) {
+    columnsState = {
+      orderedFields: [],
+      lookup: {},
+      columnVisibilityModel,
+      initialColumnVisibilityModel: columnVisibilityModel
+    };
+  } else {
+    const currentState = gridColumnsStateSelector(apiRef);
+    columnsState = {
+      orderedFields: keepOnlyColumnsToUpsert ? [] : [...currentState.orderedFields],
+      lookup: keepOnlyColumnsToUpsert ? {} : _extends({}, currentState.lookup),
+      columnVisibilityModel,
+      initialColumnVisibilityModel: updateInitialVisibilityModel ? columnVisibilityModel : currentState.initialColumnVisibilityModel
+    };
+  }
+  const columnsToKeep = {};
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    for (const key in columnsState.lookup) {
+      if (Object.prototype.hasOwnProperty.call(columnsState.lookup, key)) {
+        columnsToKeep[key] = false;
+      }
+    }
+  }
+  columnsToUpsert.forEach(newColumn => {
+    const {
+      field
+    } = newColumn;
+    columnsToKeep[field] = true;
+    let existingState = columnsState.lookup[field];
+    if (existingState == null) {
+      existingState = _extends({}, getDefaultColTypeDef(newColumn.type), {
+        field,
+        hasBeenResized: false
+      });
+      columnsState.orderedFields.push(field);
+    } else if (keepOnlyColumnsToUpsert) {
+      columnsState.orderedFields.push(field);
+    }
+
+    // If the column type has changed - merge the existing state with the default column type definition
+    if (existingState && existingState.type !== newColumn.type) {
+      existingState = _extends({}, getDefaultColTypeDef(newColumn.type), {
+        field
+      });
+    }
+    let hasBeenResized = existingState.hasBeenResized;
+    COLUMNS_DIMENSION_PROPERTIES.forEach(key => {
+      if (newColumn[key] !== undefined) {
+        hasBeenResized = true;
+        if (newColumn[key] === -1) {
+          newColumn[key] = Infinity;
+        }
+      }
+    });
+    const mergedProps = _extends({}, getDefaultColTypeDef(newColumn.type), {
+      hasBeenResized,
+      field
+    });
+    let key;
+    for (key in newColumn) {
+      if (newColumn[key] !== undefined && key !== 'field') {
+        mergedProps[key] = newColumn[key];
+      }
+    }
+    columnsState.lookup[field] = resolveProps(existingState, mergedProps);
+  });
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    Object.keys(columnsState.lookup).forEach(field => {
+      if (!columnsToKeep[field]) {
+        delete columnsState.lookup[field];
+      }
+    });
+  }
+  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
+  const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, apiRef.current.getRootDimensions?.() ?? undefined);
+};
+export function getFirstNonSpannedColumnToRender({
+  firstColumnToRender,
+  apiRef,
+  firstRowToRender,
+  lastRowToRender,
+  visibleRows
+}) {
+  let firstNonSpannedColumnToRender = firstColumnToRender;
+  let foundStableColumn = false;
+
+  // Keep checking columns until we find one that's not spanned in any visible row
+  while (!foundStableColumn && firstNonSpannedColumnToRender >= 0) {
+    foundStableColumn = true;
+    for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+      const row = visibleRows[i];
+      if (row) {
+        const rowId = visibleRows[i].id;
+        const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstNonSpannedColumnToRender);
+        if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan && cellColSpanInfo.leftVisibleCellIndex < firstNonSpannedColumnToRender) {
+          firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+          foundStableColumn = false;
+          break; // Check the new column index against the visible rows, because it might be spanned
+        }
+      }
+    }
+  }
+  return firstNonSpannedColumnToRender;
+}
+export function getTotalHeaderHeight(apiRef, props) {
+  if (props.listView) {
+    return 0;
+  }
+  const densityFactor = gridDensityFactorSelector(apiRef);
+  const maxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
+  const isHeaderFilteringEnabled = gridHeaderFilteringEnabledSelector(apiRef);
+  const columnHeadersHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const columnGroupHeadersHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
+  const filterHeadersHeight = isHeaderFilteringEnabled ? Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor) : 0;
+  return columnHeadersHeight + columnGroupHeadersHeight * maxDepth + filterHeadersHeight;
+}

package/hooks/features/columns/index.d.mts

@@ -0,0 +1,2 @@
+export { gridColumnsStateSelector, gridColumnFieldsSelector, gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector, gridVisibleColumnFieldsSelector, gridPinnedColumnsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector, gridHasColSpanSelector } from "./gridColumnsSelector.mjs";
+export * from "./gridColumnsInterfaces.mjs";

package/hooks/features/columns/index.mjs

@@ -0,0 +1,2 @@
+export { gridColumnsStateSelector, gridColumnFieldsSelector, gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector, gridVisibleColumnFieldsSelector, gridPinnedColumnsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector, gridHasColSpanSelector } from "./gridColumnsSelector.mjs";
+export * from "./gridColumnsInterfaces.mjs";