@mui/x-data-grid 8.0.0-alpha.10 → 8.0.0-alpha.12

package/modern/hooks/features/clipboard/useGridClipboard.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+/**
+ * @requires useGridCsvExport (method)
+ * @requires useGridSelection (method)
+ */
+export declare const useGridClipboard: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "ignoreValueFormatterDuringExport" | "onClipboardCopy" | "clipboardCopyCellDelimiter">) => void;

package/modern/hooks/features/clipboard/useGridClipboard.js

@@ -91,6 +91,6 @@ export const useGridClipboard = (apiRef, props) => {
       apiRef.current.publishEvent('clipboardCopy', textToCopy);
     }
   }, [apiRef, ignoreValueFormatter, clipboardCopyCellDelimiter]);
-  useGridNativeEventListener(apiRef, apiRef.current.rootElementRef, 'keydown', handleCopy);
+  useGridNativeEventListener(apiRef, () => apiRef.current.rootElementRef.current, 'keydown', handleCopy);
   useGridApiOptionHandler(apiRef, 'clipboardCopy', props.onClipboardCopy);
 };

package/modern/hooks/features/columnGrouping/gridColumnGroupsInterfaces.d.ts

@@ -0,0 +1,16 @@
+import { GridColumnGroup } from "../../../models/gridColumnGrouping.js";
+export type GridColumnGroupLookup = {
+  [groupId: string]: Omit<GridColumnGroup, 'children'>;
+};
+export type GridGroupingStructure = {
+  groupId: null | string;
+  columnFields: string[];
+};
+export interface GridColumnsGroupingState {
+  lookup: GridColumnGroupLookup;
+  headerStructure: GridGroupingStructure[][];
+  unwrappedGroupingModel: {
+    [columnField: string]: GridColumnGroup['groupId'][];
+  };
+  maxDepth: number;
+}

package/modern/hooks/features/columnGrouping/gridColumnGroupsSelector.d.ts

@@ -0,0 +1,12 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+/**
+ * @category ColumnGrouping
+ * @ignore - do not document.
+ */
+export declare const gridColumnGroupingSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState>;
+export declare const gridColumnGroupsUnwrappedModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, {
+  [columnField: string]: string[];
+}>;
+export declare const gridColumnGroupsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces").GridColumnGroupLookup>;
+export declare const gridColumnGroupsHeaderStructureSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces").GridGroupingStructure[][]>;
+export declare const gridColumnGroupsHeaderMaxDepthSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnsGroupingState, number>;

package/modern/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -1,9 +1,9 @@
-import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+import { createSelector, createRootSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
 /**
  * @category ColumnGrouping
  * @ignore - do not document.
  */
-export const gridColumnGroupingSelector = state => state.columnGrouping;
+export const gridColumnGroupingSelector = createRootSelector(state => state.columnGrouping);
 export const gridColumnGroupsUnwrappedModelSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.unwrappedGroupingModel ?? {});
 export const gridColumnGroupsLookupSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.lookup ?? {});
 export const gridColumnGroupsHeaderStructureSelector = createSelectorMemoized(gridColumnGroupingSelector, columnGrouping => columnGrouping?.headerStructure ?? []);

package/modern/hooks/features/columnGrouping/gridColumnGroupsUtils.d.ts

@@ -0,0 +1,18 @@
+import { GridColumnGroupingModel, GridColumnGroup } from "../../../models/gridColumnGrouping.js";
+import { GridColDef } from "../../../models/colDef/index.js";
+import { GridGroupingStructure } from "./gridColumnGroupsInterfaces.js";
+type UnwrappedGroupingModel = {
+  [key: GridColDef['field']]: GridColumnGroup['groupId'][];
+};
+/**
+ * This is a function that provide for each column the array of its parents.
+ * Parents are ordered from the root to the leaf.
+ * @param columnGroupingModel The model such as provided in DataGrid props
+ * @returns An object `{[field]: groupIds}` where `groupIds` is the parents of the column `field`
+ */
+export declare const unwrapGroupingColumnModel: (columnGroupingModel?: GridColumnGroupingModel) => UnwrappedGroupingModel;
+export declare const getColumnGroupsHeaderStructure: (orderedColumns: string[], unwrappedGroupingModel: UnwrappedGroupingModel, pinnedFields: {
+  right?: string[];
+  left?: string[];
+}) => GridGroupingStructure[][];
+export {};

package/modern/hooks/features/columnGrouping/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./gridColumnGroupsSelector.js";
+export type { GridColumnsGroupingState } from './gridColumnGroupsInterfaces';

package/modern/hooks/features/columnGrouping/useGridColumnGrouping.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+export declare const columnGroupsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'columnGroupingModel' | 'experimentalFeatures'>>;
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+export declare const useGridColumnGrouping: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "columnGroupingModel">) => void;

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import type { GridColumnsRenderContext } from '../../../models/params/gridScrollParams';
+import { GridStateColDef } from "../../../models/colDef/gridColDef.js";
+import { GridSortColumnLookup } from "../sorting/index.js";
+import { GridFilterActiveItemsLookup } from "../filter/index.js";
+import { GridColumnGroupIdentifier, GridColumnIdentifier } from "../focus/index.js";
+import { GridColumnMenuState } from "../columnMenu/index.js";
+import { GridColumnVisibilityModel, gridColumnPositionsSelector } from "../columns/index.js";
+import { GridGroupingStructure } from "../columnGrouping/gridColumnGroupsInterfaces.js";
+import { PinnedColumnPosition } from "../../../internals/constants.js";
+export interface UseGridColumnHeadersProps {
+  visibleColumns: GridStateColDef[];
+  sortColumnLookup: GridSortColumnLookup;
+  filterColumnLookup: GridFilterActiveItemsLookup;
+  columnHeaderTabIndexState: GridColumnIdentifier | null;
+  columnGroupHeaderTabIndexState: GridColumnGroupIdentifier | null;
+  columnHeaderFocus: GridColumnIdentifier | null;
+  columnGroupHeaderFocus: GridColumnGroupIdentifier | null;
+  headerGroupingMaxDepth: number;
+  columnMenuState: GridColumnMenuState;
+  columnVisibility: GridColumnVisibilityModel;
+  columnGroupsHeaderStructure: GridGroupingStructure[][];
+  hasOtherElementInTabSequence: boolean;
+}
+export interface GetHeadersParams {
+  position?: PinnedColumnPosition;
+  renderContext?: GridColumnsRenderContext;
+  maxLastColumn?: number;
+}
+type OwnerState = DataGridProcessedProps;
+export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  ownerState: OwnerState;
+}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
+  renderContext: GridColumnsRenderContext;
+  leftRenderContext: {
+    firstColumnIndex: number;
+    lastColumnIndex: number;
+  } | null;
+  rightRenderContext: {
+    firstColumnIndex: number;
+    lastColumnIndex: number;
+  } | null;
+  pinnedColumns: {
+    left: GridStateColDef[];
+    right: GridStateColDef[];
+  };
+  visibleColumns: GridStateColDef[];
+  columnPositions: number[];
+  getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => React.JSX.Element;
+  getColumnHeadersRow: () => React.JSX.Element;
+  getColumnsToRender: (params?: GetHeadersParams) => {
+    renderedColumns: GridStateColDef[];
+    firstColumnToRender: number;
+    lastColumnToRender: number;
+  };
+  getColumnGroupHeadersRows: () => React.JSX.Element[] | null;
+  getPinnedCellOffset: (pinnedPosition: PinnedColumnPosition | undefined, computedWidth: number, columnIndex: number, columnPositions: ReturnType<typeof gridColumnPositionsSelector>, columnsTotalWidth: number, scrollbarWidth: number) => number | undefined;
+  isDragging: boolean;
+  getInnerProps: () => {
+    role: string;
+  };
+};
+export {};

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -7,7 +7,7 @@ import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.js";
-import { gridDimensionsSelector } from "../dimensions/index.js";
+import { gridColumnsTotalWidthSelector, gridGroupHeaderHeightSelector, gridHasFillerSelector, gridHeaderHeightSelector, gridVerticalScrollbarWidthSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { gridRenderContextColumnsSelector } from "../virtualization/index.js";
 import { computeOffsetLeft } from "../virtualization/useGridVirtualScroller.js";
 import { GridColumnGroupHeader } from "../../../components/columnHeaders/GridColumnGroupHeader.js";
@@ -46,19 +46,17 @@ export const useGridColumnHeaders = props => {
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const columnGroupsModel = useGridSelector(apiRef, gridColumnGroupsUnwrappedModelSelector);
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length);
-  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
-  React.useEffect(() => {
-    if (apiRef.current.columnHeadersContainerRef.current) {
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
-    }
-  }, [apiRef]);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const gridHasFiller = useGridSelector(apiRef, gridHasFillerSelector);
+  const headerHeight = useGridSelector(apiRef, gridHeaderHeightSelector);
+  const groupHeaderHeight = useGridSelector(apiRef, gridGroupHeaderHeightSelector);
+  const scrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
@@ -130,8 +128,7 @@ export const useGridColumnHeaders = props => {
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
       const pinnedPosition = params?.position;
-      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       const siblingWithBorderingSeparator = pinnedPosition === PinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
       const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
       const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
@@ -142,7 +139,7 @@ export const useGridColumnHeaders = props => {
       columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
-        headerHeight: dimensions.headerHeight,
+        headerHeight: headerHeight,
         isDragging: colDef.field === dragCol,
         colDef: colDef,
         colIndex: columnIndex,
@@ -166,6 +163,9 @@ export const useGridColumnHeaders = props => {
       "aria-rowindex": headerGroupingMaxDepth + 1,
       ownerState: rootProps,
       className: gridClasses['row--borderBottom'],
+      style: {
+        height: headerHeight
+      },
       children: [leftRenderContext && getColumnHeaders({
         position: PinnedColumnPosition.LEFT,
         renderContext: leftRenderContext
@@ -234,8 +234,7 @@ export const useGridColumnHeaders = props => {
         tabIndex
       };
       const pinnedPosition = params.position;
-      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, headerInfo.width, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, headerInfo.width, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       columnIndex += columnFields.length;
       let indexInSection = index;
       if (pinnedPosition === PinnedColumnPosition.LEFT) {
@@ -250,7 +249,7 @@ export const useGridColumnHeaders = props => {
         depth: depth,
         isLastColumn: index === visibleColumnGroupHeader.length - 1,
         maxDepth: headerGroupingMaxDepth,
-        height: dimensions.groupHeaderHeight,
+        height: groupHeaderHeight,
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
@@ -271,6 +270,9 @@ export const useGridColumnHeaders = props => {
         role: "row",
         "aria-rowindex": depth + 1,
         ownerState: rootProps,
+        style: {
+          height: groupHeaderHeight
+        },
         children: [leftRenderContext && getColumnGroupHeaders({
           depth,
           params: {

package/modern/hooks/features/columnMenu/columnMenuInterfaces.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+export interface GridColumnMenuState {
+  open: boolean;
+  field?: string;
+}
+export interface GridColumnMenuSlotProps {
+  /**
+   * Every item has a `displayOrder` based which it will be placed before or after other
+   * items in the column menu, `array.prototype.sort` is applied to sort the items.
+   * Note: If same `displayOrder` is applied to two or more items they will be sorted
+   * based on the definition order
+   * @default 100
+   */
+  displayOrder?: number;
+  [key: string]: any;
+}
+export interface GridColumnMenuRootProps {
+  /**
+   * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlots: {
+    [key: string]: React.JSXElementConstructor<any>;
+  };
+  /**
+   * Initial `slotProps` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlotProps: {
+    [key: string]: GridColumnMenuSlotProps;
+  };
+  /**
+   * `slots` could be used to add new and (or) override default column menu items
+   * If you register a nee component you must pass it's `displayOrder` in `slotProps`
+   * or it will be placed in the end of the list
+   */
+  slots?: {
+    [key: string]: React.JSXElementConstructor<any> | null;
+  };
+  /**
+   * Could be used to pass new props or override props specific to a column menu component
+   * e.g. `displayOrder`
+   */
+  slotProps?: {
+    [key: string]: GridColumnMenuSlotProps;
+  };
+}

package/modern/hooks/features/columnMenu/columnMenuSelector.d.ts

@@ -0,0 +1,2 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+export declare const gridColumnMenuSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./columnMenuInterfaces").GridColumnMenuState>;

package/modern/hooks/features/columnMenu/columnMenuSelector.js

@@ -1 +1,2 @@
-export const gridColumnMenuSelector = state => state.columnMenu;
+import { createRootSelector } from "../../../utils/createSelector.js";
+export const gridColumnMenuSelector = createRootSelector(state => state.columnMenu);

package/modern/hooks/features/columnMenu/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./columnMenuInterfaces.js";
+export * from "./columnMenuSelector.js";

package/modern/hooks/features/columnMenu/useGridColumnMenu.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+export declare const columnMenuStateInitializer: GridStateInitializer;
+/**
+ * @requires useGridColumnResize (event)
+ * @requires useGridInfiniteLoader (event)
+ */
+export declare const useGridColumnMenu: (apiRef: RefObject<GridPrivateApiCommunity>) => void;

package/modern/hooks/features/columnMenu/useGridColumnMenu.js

@@ -20,7 +20,7 @@ export const useGridColumnMenu = apiRef => {
    * API METHODS
    */
   const showColumnMenu = React.useCallback(field => {
-    const columnMenuState = gridColumnMenuSelector(apiRef.current.state);
+    const columnMenuState = gridColumnMenuSelector(apiRef);
     const newState = {
       open: true,
       field
@@ -43,7 +43,7 @@ export const useGridColumnMenu = apiRef => {
     }
   }, [apiRef, logger]);
   const hideColumnMenu = React.useCallback(() => {
-    const columnMenuState = gridColumnMenuSelector(apiRef.current.state);
+    const columnMenuState = gridColumnMenuSelector(apiRef);
     if (columnMenuState.field) {
       const columnLookup = gridColumnLookupSelector(apiRef);
       const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
@@ -85,7 +85,7 @@ export const useGridColumnMenu = apiRef => {
   }, [apiRef, logger]);
   const toggleColumnMenu = React.useCallback(field => {
     logger.debug('Toggle Column Menu');
-    const columnMenu = gridColumnMenuSelector(apiRef.current.state);
+    const columnMenu = gridColumnMenuSelector(apiRef);
     if (!columnMenu.open || columnMenu.field !== field) {
       showColumnMenu(field);
     } else {

package/modern/hooks/features/columnMenu/useGridColumnMenuSlots.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { GridColumnMenuRootProps } from "./columnMenuInterfaces.js";
+import { GridColDef } from "../../../models/colDef/gridColDef.js";
+interface UseGridColumnMenuSlotsProps extends GridColumnMenuRootProps {
+  colDef: GridColDef;
+  hideMenu: (event: React.SyntheticEvent) => void;
+  addDividers?: boolean;
+}
+type UseGridColumnMenuSlotsResponse = Array<[React.JSXElementConstructor<any>, {
+  [key: string]: any;
+}]>;
+declare const useGridColumnMenuSlots: (props: UseGridColumnMenuSlotsProps) => UseGridColumnMenuSlotsResponse;
+export { useGridColumnMenuSlots };

package/modern/hooks/features/columnResize/columnResizeSelector.d.ts

@@ -0,0 +1,3 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+export declare const gridColumnResizeSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./columnResizeState").GridColumnResizeState>;
+export declare const gridResizingColumnFieldSelector: import("../../..").OutputSelector<GridStateCommunity, import("./columnResizeState").GridColumnResizeState, string>;

package/modern/hooks/features/columnResize/columnResizeSelector.js

@@ -1,3 +1,3 @@
-import { createSelector } from "../../../utils/createSelector.js";
-export const gridColumnResizeSelector = state => state.columnResize;
+import { createRootSelector, createSelector } from "../../../utils/createSelector.js";
+export const gridColumnResizeSelector = createRootSelector(state => state.columnResize);
 export const gridResizingColumnFieldSelector = createSelector(gridColumnResizeSelector, columnResize => columnResize.resizingColumnField);

package/modern/hooks/features/columnResize/columnResizeState.d.ts

@@ -0,0 +1,3 @@
+export interface GridColumnResizeState {
+  resizingColumnField: string;
+}

package/modern/hooks/features/columnResize/gridColumnResizeApi.d.ts

@@ -0,0 +1,50 @@
+import type { GridColDef } from '../../../models/colDef/gridColDef';
+export declare const DEFAULT_GRID_AUTOSIZE_OPTIONS: {
+  includeHeaders: boolean;
+  includeOutliers: boolean;
+  outliersFactor: number;
+  expand: boolean;
+  disableColumnVirtualization: boolean;
+};
+export type GridAutosizeOptions = {
+  /**
+   * The columns to autosize. By default, applies to all columns.
+   */
+  columns?: GridColDef['field'][];
+  /**
+   * If true, include the header widths in the calculation.
+   * @default false
+   */
+  includeHeaders?: boolean;
+  /**
+   * If true, width outliers will be ignored.
+   * @default false
+   */
+  includeOutliers?: boolean;
+  /**
+   * The IQR factor range to detect outliers.
+   * @default 1.5
+   */
+  outliersFactor?: number;
+  /**
+   * If the total width is less than the available width, expand columns to fill it.
+   * @default false
+   */
+  expand?: boolean;
+  /**
+   * If false, column virtualization is not disabled while resizing.
+   * @default true
+   */
+  disableColumnVirtualization?: boolean;
+};
+/**
+ * The Resize API interface that is available in the grid `apiRef`.
+ */
+export interface GridColumnResizeApi {
+  /**
+   * Auto-size the columns of the grid based on the cells' content and the space available.
+   * @param {GridAutosizeOptions} options The autosizing options
+   * @returns {Promise} A promise that resolves when autosizing is completed
+   */
+  autosizeColumns: (options?: GridAutosizeOptions) => Promise<void>;
+}

package/modern/hooks/features/columnResize/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./columnResizeSelector.js";
+export * from "./columnResizeState.js";
+export * from "./gridColumnResizeApi.js";

package/modern/hooks/features/columnResize/useGridColumnResize.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+export declare const columnResizeStateInitializer: GridStateInitializer;
+/**
+ * @requires useGridColumns (method, event)
+ * TODO: improve experience for last column
+ */
+export declare const useGridColumnResize: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange" | "disableVirtualization">) => void;

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -274,7 +274,7 @@ export const useGridColumnResize = (apiRef, props) => {
       // Since during resizing we update the columns width outside of React, React is unable to
       // reapply the right style properties. We need to sync the state manually.
       // So we reapply the same logic as in https://github.com/mui/mui-x/blob/0511bf65543ca05d2602a5a3e0a6156f2fc8e759/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx#L405
-      const columnsState = gridColumnsStateSelector(apiRef.current.state);
+      const columnsState = gridColumnsStateSelector(apiRef);
       refs.groupHeaderElements.forEach(element => {
         const fields = getFieldsFromGroupHeaderElem(element);
         const div = element;
@@ -406,7 +406,6 @@ export const useGridColumnResize = (apiRef, props) => {
         resizingColumnField: field
       })
     }));
-    apiRef.current.forceUpdate();
   }, [apiRef]);
   const handleResizeStop = React.useCallback(() => {
     apiRef.current.setState(state => _extends({}, state, {
@@ -414,7 +413,6 @@ export const useGridColumnResize = (apiRef, props) => {
         resizingColumnField: ''
       })
     }));
-    apiRef.current.forceUpdate();
   }, [apiRef]);
   const handleColumnResizeMouseDown = useEventCallback(({
     colDef
@@ -480,7 +478,7 @@ export const useGridColumnResize = (apiRef, props) => {
       return;
     }
     isAutosizingRef.current = true;
-    const state = gridColumnsStateSelector(apiRef.current.state);
+    const state = gridColumnsStateSelector(apiRef);
     const options = _extends({}, DEFAULT_GRID_AUTOSIZE_OPTIONS, userOptions, {
       columns: userOptions?.columns ?? state.orderedFields
     });

package/modern/hooks/features/columns/gridColumnsInterfaces.d.ts

@@ -0,0 +1,41 @@
+import { GridColDef, GridStateColDef } from "../../../models/colDef/gridColDef.js";
+import type { GridColumnDimensionProperties } from './gridColumnsUtils';
+export declare enum GridPinnedColumnPosition {
+  LEFT = "left",
+  RIGHT = "right",
+}
+export type GridColumnLookup = {
+  [field: string]: GridStateColDef;
+};
+export type GridColumnRawLookup = {
+  [field: string]: GridColDef | GridStateColDef;
+};
+export interface GridColumnsState {
+  orderedFields: string[];
+  lookup: GridColumnLookup;
+  columnVisibilityModel: GridColumnVisibilityModel;
+}
+export interface GridPinnedColumnFields {
+  left?: string[];
+  right?: string[];
+}
+export declare const EMPTY_PINNED_COLUMN_FIELDS: {
+  left: string[];
+  right: string[];
+};
+export interface GridPinnedColumns {
+  left: GridStateColDef[];
+  right: GridStateColDef[];
+}
+export type GridColumnPinningState = GridPinnedColumnFields;
+export type GridColumnDimensions = { [key in GridColumnDimensionProperties]?: number };
+export interface GridColumnsInitialState {
+  columnVisibilityModel?: GridColumnVisibilityModel;
+  orderedFields?: string[];
+  dimensions?: Record<string, GridColumnDimensions>;
+}
+export type GridColumnsRawState = Omit<GridColumnsState, 'lookup'> & {
+  lookup: GridColumnRawLookup;
+};
+export type GridHydrateColumnsValue = GridColumnsRawState;
+export type GridColumnVisibilityModel = Record<GridColDef['field'], boolean>;

package/modern/hooks/features/columns/gridColumnsSelector.d.ts

@@ -0,0 +1,72 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import { GridColumnLookup, GridPinnedColumnFields } from "./gridColumnsInterfaces.js";
+/**
+ * Get the columns state
+ * @category Columns
+ */
+export declare const gridColumnsStateSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridColumnsInterfaces").GridColumnsState>;
+/**
+ * Get an array of column fields in the order rendered on screen.
+ * @category Columns
+ */
+export declare const gridColumnFieldsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, 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: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, GridColumnLookup>;
+/**
+ * Get an array of column definitions in the order rendered on screen..
+ * @category Columns
+ */
+export declare const gridColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, GridColumnLookup, import("../../../internals").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: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, import("./gridColumnsInterfaces").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: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnVisibilityModel, import("../../../internals").GridStateColDef[]>;
+/**
+ * Get the field of each visible column.
+ * @category Visible Columns
+ */
+export declare const gridVisibleColumnFieldsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], string[]>;
+/**
+ * Get the visible pinned columns model.
+ * @category Visible Columns
+ */
+export declare const gridPinnedColumnsSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, GridPinnedColumnFields>;
+/**
+ * Get the visible pinned columns.
+ * @category Visible Columns
+ */
+export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, boolean, {
+  left: import("../../../internals").GridStateColDef[];
+  right: import("../../../internals").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: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], number[]>;
+/**
+ * Get the filterable columns as an array.
+ * @category Columns
+ */
+export declare const gridFilterableColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], import("../../../internals").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: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], GridColumnLookup>;
+/**
+ * Checks if some column has a colSpan field.
+ * @category Columns
+ * @ignore - Do not document
+ */
+export declare const gridHasColSpanSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], boolean>;