@mui/x-data-grid 8.0.0-alpha.8 → 8.0.0-beta.0

package/hooks/features/columnResize/useGridColumnResize.js

@@ -1,18 +1,27 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import useLazyRef from '@mui/utils/useLazyRef';
-import { useRtl } from '@mui/system/RtlProvider';
-import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from "../../../utils/domUtils.js";
-import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from "./gridColumnResizeApi.js";
-import { gridClasses } from "../../../constants/gridClasses.js";
-import { useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from "../../utils/index.js";
-import { gridVirtualizationColumnEnabledSelector } from "../virtualization/index.js";
-import { createControllablePromise } from "../../../utils/createControllablePromise.js";
-import { clamp } from "../../../utils/utils.js";
-import { useTimeout } from "../../utils/useTimeout.js";
-import { GridPinnedColumnPosition } from "../columns/gridColumnsInterfaces.js";
-import { gridColumnsStateSelector } from "../columns/index.js";
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnResize = exports.columnResizeStateInitializer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _domUtils = require("../../../utils/domUtils");
+var _gridColumnResizeApi = require("./gridColumnResizeApi");
+var _gridClasses = require("../../../constants/gridClasses");
+var _utils = require("../../utils");
+var _virtualization = require("../virtualization");
+var _createControllablePromise = require("../../../utils/createControllablePromise");
+var _utils2 = require("../../../utils/utils");
+var _useTimeout = require("../../utils/useTimeout");
+var _gridColumnsInterfaces = require("../columns/gridColumnsInterfaces");
+var _columns = require("../columns");
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -53,7 +62,7 @@ function flipResizeDirection(side) {
   return 'Right';
 }
 function getResizeDirection(separator, isRtl) {
-  const side = separator.classList.contains(gridClasses['columnSeparator--sideRight']) ? 'Right' : 'Left';
+  const side = separator.classList.contains(_gridClasses.gridClasses['columnSeparator--sideRight']) ? 'Right' : 'Left';
   if (isRtl) {
     // Resizing logic should be mirrored in the RTL case
     return flipResizeDirection(side);
@@ -71,8 +80,8 @@ function preventClick(event) {
  */
 function useColumnVirtualizationDisabled(apiRef) {
   const promise = React.useRef(undefined);
-  const selector = () => gridVirtualizationColumnEnabledSelector(apiRef);
-  const value = useGridSelector(apiRef, selector);
+  const selector = () => (0, _virtualization.gridVirtualizationColumnEnabledSelector)(apiRef);
+  const value = (0, _utils.useGridSelector)(apiRef, selector);
   React.useEffect(() => {
     if (promise.current && value === false) {
       promise.current.resolve();
@@ -84,7 +93,7 @@ function useColumnVirtualizationDisabled(apiRef) {
       if (selector() === false) {
         return Promise.resolve();
       }
-      promise.current = createControllablePromise();
+      promise.current = (0, _createControllablePromise.createControllablePromise)();
     }
     return promise.current;
   };
@@ -116,20 +125,20 @@ function excludeOutliers(inputValues, factor) {
 function extractColumnWidths(apiRef, options, columns) {
   const widthByField = {};
   const root = apiRef.current.rootElementRef.current;
-  root.classList.add(gridClasses.autosizing);
+  root.classList.add(_gridClasses.gridClasses.autosizing);
   columns.forEach(column => {
-    const cells = findGridCells(apiRef.current, column.field);
+    const cells = (0, _domUtils.findGridCells)(apiRef.current, column.field);
     const widths = cells.map(cell => {
       return cell.getBoundingClientRect().width ?? 0;
     });
     const filteredWidths = options.includeOutliers ? widths : excludeOutliers(widths, options.outliersFactor);
     if (options.includeHeaders) {
-      const header = findGridHeader(apiRef.current, column.field);
+      const header = (0, _domUtils.findGridHeader)(apiRef.current, column.field);
       if (header) {
-        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 title = header.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitle}`);
+        const content = header.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`);
+        const iconContainer = header.querySelector(`.${_gridClasses.gridClasses.iconButtonContainer}`);
+        const menuContainer = header.querySelector(`.${_gridClasses.gridClasses.menuIcon}`);
         const element = title ?? content;
         const style = window.getComputedStyle(header, null);
         const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
@@ -143,16 +152,17 @@ function extractColumnWidths(apiRef, options, columns) {
     const min = hasColumnMin ? column.minWidth : 0;
     const max = hasColumnMax ? column.maxWidth : Infinity;
     const maxContent = filteredWidths.length === 0 ? 0 : Math.max(...filteredWidths);
-    widthByField[column.field] = clamp(maxContent, min, max);
+    widthByField[column.field] = (0, _utils2.clamp)(maxContent, min, max);
   });
-  root.classList.remove(gridClasses.autosizing);
+  root.classList.remove(_gridClasses.gridClasses.autosizing);
   return widthByField;
 }
-export const columnResizeStateInitializer = state => _extends({}, state, {
+const columnResizeStateInitializer = state => (0, _extends2.default)({}, state, {
   columnResize: {
     resizingColumnField: ''
   }
 });
+exports.columnResizeStateInitializer = columnResizeStateInitializer;
 function createResizeRefs() {
   return {
     colDef: undefined,
@@ -176,17 +186,17 @@ function createResizeRefs() {
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
-export const useGridColumnResize = (apiRef, props) => {
-  const isRtl = useRtl();
-  const logger = useGridLogger(apiRef, 'useGridColumnResize');
-  const refs = useLazyRef(createResizeRefs).current;
+const useGridColumnResize = (apiRef, props) => {
+  const isRtl = (0, _RtlProvider.useRtl)();
+  const logger = (0, _utils.useGridLogger)(apiRef, 'useGridColumnResize');
+  const refs = (0, _useLazyRef.default)(createResizeRefs).current;
 
   // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
   // This ref stores the offset between the click and the separator.
   const initialOffsetToSeparator = React.useRef(null);
   const resizeDirection = React.useRef(null);
-  const stopResizeEventTimeout = useTimeout();
+  const stopResizeEventTimeout = (0, _useTimeout.useTimeout)();
   const touchId = React.useRef(undefined);
   const updateWidth = newWidth => {
     logger.debug(`Updating width to ${newWidth} for col ${refs.colDef.field}`);
@@ -230,7 +240,7 @@ export const useGridColumnResize = (apiRef, props) => {
       div.style.setProperty('--width', finalWidth);
     });
     const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
-    if (pinnedPosition === GridPinnedColumnPosition.LEFT) {
+    if (pinnedPosition === _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT) {
       updateProperty(refs.fillerLeft, 'width', widthDiff);
       refs.leftPinnedCellsAfter.forEach(cell => {
         updateProperty(cell, 'left', widthDiff);
@@ -239,7 +249,7 @@ export const useGridColumnResize = (apiRef, props) => {
         updateProperty(header, 'left', widthDiff);
       });
     }
-    if (pinnedPosition === GridPinnedColumnPosition.RIGHT) {
+    if (pinnedPosition === _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT) {
       updateProperty(refs.fillerRight, 'width', widthDiff);
       refs.rightPinnedCellsBefore.forEach(cell => {
         updateProperty(cell, 'right', widthDiff);
@@ -274,9 +284,9 @@ 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 = (0, _columns.gridColumnsStateSelector)(apiRef);
       refs.groupHeaderElements.forEach(element => {
-        const fields = getFieldsFromGroupHeaderElem(element);
+        const fields = (0, _domUtils.getFieldsFromGroupHeaderElem)(element);
         const div = element;
         const newWidth = fields.reduce((acc, field) => {
           if (columnsState.columnVisibilityModel[field] !== false) {
@@ -297,32 +307,32 @@ export const useGridColumnResize = (apiRef, props) => {
     refs.initialColWidth = colDef.computedWidth;
     refs.initialTotalWidth = apiRef.current.getRootDimensions().rowWidth;
     refs.colDef = colDef;
-    refs.columnHeaderElement = findHeaderElementFromField(apiRef.current.columnHeadersContainerRef.current, colDef.field);
-    const headerFilterElement = root.querySelector(`.${gridClasses.headerFilterRow} [data-field="${escapeOperandAttributeSelector(colDef.field)}"]`);
+    refs.columnHeaderElement = (0, _domUtils.findHeaderElementFromField)(apiRef.current.columnHeadersContainerRef.current, colDef.field);
+    const headerFilterElement = root.querySelector(`.${_gridClasses.gridClasses.headerFilterRow} [data-field="${(0, _domUtils.escapeOperandAttributeSelector)(colDef.field)}"]`);
     if (headerFilterElement) {
       refs.headerFilterElement = headerFilterElement;
     }
-    refs.groupHeaderElements = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
-    refs.cellElements = findGridCellElementsFromCol(refs.columnHeaderElement, apiRef.current);
-    refs.fillerLeft = findGridElement(apiRef.current, isRtl ? 'filler--pinnedRight' : 'filler--pinnedLeft');
-    refs.fillerRight = findGridElement(apiRef.current, isRtl ? 'filler--pinnedLeft' : 'filler--pinnedRight');
+    refs.groupHeaderElements = (0, _domUtils.findGroupHeaderElementsFromField)(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
+    refs.cellElements = (0, _domUtils.findGridCellElementsFromCol)(refs.columnHeaderElement, apiRef.current);
+    refs.fillerLeft = (0, _domUtils.findGridElement)(apiRef.current, isRtl ? 'filler--pinnedRight' : 'filler--pinnedLeft');
+    refs.fillerRight = (0, _domUtils.findGridElement)(apiRef.current, isRtl ? 'filler--pinnedLeft' : 'filler--pinnedRight');
     const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
-    refs.leftPinnedCellsAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedCellsAfterCol(apiRef.current, refs.columnHeaderElement, isRtl);
-    refs.rightPinnedCellsBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedCellsBeforeCol(apiRef.current, refs.columnHeaderElement, isRtl);
-    refs.leftPinnedHeadersAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedHeadersAfterCol(apiRef.current, refs.columnHeaderElement, isRtl);
-    refs.rightPinnedHeadersBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedHeadersBeforeCol(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.leftPinnedCellsAfter = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedCellsAfterCol)(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.rightPinnedCellsBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedCellsBeforeCol)(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.leftPinnedHeadersAfter = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedHeadersAfterCol)(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.rightPinnedHeadersBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedHeadersBeforeCol)(apiRef.current, refs.columnHeaderElement, isRtl);
     resizeDirection.current = getResizeDirection(separator, isRtl);
     initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
   };
-  const handleResizeMouseUp = useEventCallback(finishResize);
-  const handleResizeMouseMove = useEventCallback(nativeEvent => {
+  const handleResizeMouseUp = (0, _useEventCallback.default)(finishResize);
+  const handleResizeMouseMove = (0, _useEventCallback.default)(nativeEvent => {
     // Cancel move in case some other element consumed a mouseup event and it was not fired.
     if (nativeEvent.buttons === 0) {
       handleResizeMouseUp(nativeEvent);
       return;
     }
     let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
-    newWidth = clamp(newWidth, refs.colDef.minWidth, refs.colDef.maxWidth);
+    newWidth = (0, _utils2.clamp)(newWidth, refs.colDef.minWidth, refs.colDef.maxWidth);
     updateWidth(newWidth);
     const params = {
       element: refs.columnHeaderElement,
@@ -331,14 +341,14 @@ export const useGridColumnResize = (apiRef, props) => {
     };
     apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
-  const handleTouchEnd = useEventCallback(nativeEvent => {
+  const handleTouchEnd = (0, _useEventCallback.default)(nativeEvent => {
     const finger = trackFinger(nativeEvent, touchId.current);
     if (!finger) {
       return;
     }
     finishResize(nativeEvent);
   });
-  const handleTouchMove = useEventCallback(nativeEvent => {
+  const handleTouchMove = (0, _useEventCallback.default)(nativeEvent => {
     const finger = trackFinger(nativeEvent, touchId.current);
     if (!finger) {
       return;
@@ -350,7 +360,7 @@ export const useGridColumnResize = (apiRef, props) => {
       return;
     }
     let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
-    newWidth = clamp(newWidth, refs.colDef.minWidth, refs.colDef.maxWidth);
+    newWidth = (0, _utils2.clamp)(newWidth, refs.colDef.minWidth, refs.colDef.maxWidth);
     updateWidth(newWidth);
     const params = {
       element: refs.columnHeaderElement,
@@ -359,8 +369,8 @@ export const useGridColumnResize = (apiRef, props) => {
     };
     apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
-  const handleTouchStart = useEventCallback(event => {
-    const cellSeparator = findParentElementFromClassName(event.target, gridClasses['columnSeparator--resizable']);
+  const handleTouchStart = (0, _useEventCallback.default)(event => {
+    const cellSeparator = (0, _domUtils.findParentElementFromClassName)(event.target, _gridClasses.gridClasses['columnSeparator--resizable']);
     // Let the event bubble if the target is not a col separator
     if (!cellSeparator) {
       return;
@@ -370,20 +380,20 @@ export const useGridColumnResize = (apiRef, props) => {
       // A number that uniquely identifies the current finger in the touch session.
       touchId.current = touch.identifier;
     }
-    const columnHeaderElement = findParentElementFromClassName(event.target, gridClasses.columnHeader);
-    const field = getFieldFromHeaderElem(columnHeaderElement);
+    const columnHeaderElement = (0, _domUtils.findParentElementFromClassName)(event.target, _gridClasses.gridClasses.columnHeader);
+    const field = (0, _domUtils.getFieldFromHeaderElem)(columnHeaderElement);
     const colDef = apiRef.current.getColumn(field);
     logger.debug(`Start Resize on col ${colDef.field}`);
     apiRef.current.publishEvent('columnResizeStart', {
       field
     }, event);
     storeReferences(colDef, cellSeparator, touch.clientX);
-    const doc = ownerDocument(event.currentTarget);
+    const doc = (0, _ownerDocument.default)(event.currentTarget);
     doc.addEventListener('touchmove', handleTouchMove);
     doc.addEventListener('touchend', handleTouchEnd);
   });
   const stopListening = React.useCallback(() => {
-    const doc = ownerDocument(apiRef.current.rootElementRef.current);
+    const doc = (0, _ownerDocument.default)(apiRef.current.rootElementRef.current);
     doc.body.style.removeProperty('cursor');
     doc.removeEventListener('mousemove', handleResizeMouseMove);
     doc.removeEventListener('mouseup', handleResizeMouseUp);
@@ -401,22 +411,20 @@ export const useGridColumnResize = (apiRef, props) => {
   const handleResizeStart = React.useCallback(({
     field
   }) => {
-    apiRef.current.setState(state => _extends({}, state, {
-      columnResize: _extends({}, state.columnResize, {
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      columnResize: (0, _extends2.default)({}, state.columnResize, {
         resizingColumnField: field
       })
     }));
-    apiRef.current.forceUpdate();
   }, [apiRef]);
   const handleResizeStop = React.useCallback(() => {
-    apiRef.current.setState(state => _extends({}, state, {
-      columnResize: _extends({}, state.columnResize, {
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      columnResize: (0, _extends2.default)({}, state.columnResize, {
         resizingColumnField: ''
       })
     }));
-    apiRef.current.forceUpdate();
   }, [apiRef]);
-  const handleColumnResizeMouseDown = useEventCallback(({
+  const handleColumnResizeMouseDown = (0, _useEventCallback.default)(({
     colDef
   }, event) => {
     // Only handle left clicks
@@ -425,7 +433,7 @@ export const useGridColumnResize = (apiRef, props) => {
     }
 
     // Skip if the column isn't resizable
-    if (!event.currentTarget.classList.contains(gridClasses['columnSeparator--resizable'])) {
+    if (!event.currentTarget.classList.contains(_gridClasses.gridClasses['columnSeparator--resizable'])) {
       return;
     }
 
@@ -436,7 +444,7 @@ export const useGridColumnResize = (apiRef, props) => {
       field: colDef.field
     }, event);
     storeReferences(colDef, event.currentTarget, event.clientX);
-    const doc = ownerDocument(apiRef.current.rootElementRef.current);
+    const doc = (0, _ownerDocument.default)(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
     refs.previousMouseClickEvent = event.nativeEvent;
     doc.addEventListener('mousemove', handleResizeMouseMove);
@@ -446,7 +454,7 @@ export const useGridColumnResize = (apiRef, props) => {
     // Fixes https://github.com/mui/mui-x/issues/4777
     doc.addEventListener('click', preventClick, true);
   });
-  const handleColumnSeparatorDoubleClick = useEventCallback((params, event) => {
+  const handleColumnSeparatorDoubleClick = (0, _useEventCallback.default)((params, event) => {
     if (props.disableAutosize) {
       return;
     }
@@ -459,7 +467,7 @@ export const useGridColumnResize = (apiRef, props) => {
     if (column.resizable === false) {
       return;
     }
-    apiRef.current.autosizeColumns(_extends({}, props.autosizeOptions, {
+    apiRef.current.autosizeColumns((0, _extends2.default)({}, props.autosizeOptions, {
       disableColumnVirtualization: false,
       columns: [column.field]
     }));
@@ -480,8 +488,8 @@ export const useGridColumnResize = (apiRef, props) => {
       return;
     }
     isAutosizingRef.current = true;
-    const state = gridColumnsStateSelector(apiRef.current.state);
-    const options = _extends({}, DEFAULT_GRID_AUTOSIZE_OPTIONS, userOptions, {
+    const state = (0, _columns.gridColumnsStateSelector)(apiRef);
+    const options = (0, _extends2.default)({}, _gridColumnResizeApi.DEFAULT_GRID_AUTOSIZE_OPTIONS, userOptions, {
       columns: userOptions?.columns ?? state.orderedFields
     });
     options.columns = options.columns.filter(c => state.columnVisibilityModel[c] !== false);
@@ -492,7 +500,7 @@ export const useGridColumnResize = (apiRef, props) => {
         await columnVirtualizationDisabled();
       }
       const widthByField = extractColumnWidths(apiRef, options, columns);
-      const newColumns = columns.map(column => _extends({}, column, {
+      const newColumns = columns.map(column => (0, _extends2.default)({}, column, {
         width: widthByField[column.field],
         computedWidth: widthByField[column.field],
         flex: 0
@@ -500,7 +508,8 @@ 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) => total + (widthByField[column.field] ?? column.computedWidth ?? column.width), 0);
-        const availableWidth = apiRef.current.getRootDimensions().viewportInnerSize.width;
+        const dimensions = apiRef.current.getRootDimensions();
+        const availableWidth = dimensions.viewportInnerSize.width;
         const remainingWidth = availableWidth - totalWidth;
         if (remainingWidth > 0) {
           const widthPerColumn = remainingWidth / (newColumns.length || 1);
@@ -534,26 +543,27 @@ export const useGridColumnResize = (apiRef, props) => {
    */
 
   React.useEffect(() => stopListening, [stopListening]);
-  useOnMount(() => {
+  (0, _utils.useOnMount)(() => {
     if (props.autosizeOnMount) {
       Promise.resolve().then(() => {
         apiRef.current.autosizeColumns(props.autosizeOptions);
       });
     }
   });
-  useGridNativeEventListener(apiRef, () => apiRef.current.columnHeadersContainerRef?.current, 'touchstart', handleTouchStart, {
+  (0, _utils.useGridNativeEventListener)(apiRef, () => apiRef.current.columnHeadersContainerRef?.current, 'touchstart', handleTouchStart, {
     passive: true
   });
-  useGridApiMethod(apiRef, {
+  (0, _utils.useGridApiMethod)(apiRef, {
     autosizeColumns
   }, 'public');
-  useGridApiEventHandler(apiRef, 'columnResizeStop', handleResizeStop);
-  useGridApiEventHandler(apiRef, 'columnResizeStart', handleResizeStart);
-  useGridApiEventHandler(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
-  useGridApiEventHandler(apiRef, 'columnSeparatorDoubleClick', handleColumnSeparatorDoubleClick);
-  useGridApiOptionHandler(apiRef, 'columnResize', props.onColumnResize);
-  useGridApiOptionHandler(apiRef, 'columnWidthChange', props.onColumnWidthChange);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'columnResizeStop', handleResizeStop);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'columnResizeStart', handleResizeStart);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'columnSeparatorDoubleClick', handleColumnSeparatorDoubleClick);
+  (0, _utils.useGridApiOptionHandler)(apiRef, 'columnResize', props.onColumnResize);
+  (0, _utils.useGridApiOptionHandler)(apiRef, 'columnWidthChange', props.onColumnWidthChange);
 };
+exports.useGridColumnResize = useGridColumnResize;
 function updateProperty(element, property, delta) {
   if (!element) {
     return;

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

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

package/hooks/features/columns/gridColumnsInterfaces.js

@@ -1,9 +1,15 @@
-export let GridPinnedColumnPosition = /*#__PURE__*/function (GridPinnedColumnPosition) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridPinnedColumnPosition = exports.EMPTY_PINNED_COLUMN_FIELDS = void 0;
+let GridPinnedColumnPosition = exports.GridPinnedColumnPosition = /*#__PURE__*/function (GridPinnedColumnPosition) {
   GridPinnedColumnPosition["LEFT"] = "left";
   GridPinnedColumnPosition["RIGHT"] = "right";
   return GridPinnedColumnPosition;
 }({});
-export const EMPTY_PINNED_COLUMN_FIELDS = {
+const EMPTY_PINNED_COLUMN_FIELDS = exports.EMPTY_PINNED_COLUMN_FIELDS = {
   left: [],
   right: []
 };

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

@@ -1,10 +1,10 @@
-import { GridStateCommunity } from '../../../models/gridStateCommunity';
-import { GridColumnLookup, GridPinnedColumnFields } from './gridColumnsInterfaces';
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import { GridColumnLookup, GridPinnedColumnFields } from "./gridColumnsInterfaces.js";
 /**
  * Get the columns state
  * @category Columns
  */
-export declare const gridColumnsStateSelector: (state: GridStateCommunity) => import("./gridColumnsInterfaces").GridColumnsState;
+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
@@ -26,6 +26,13 @@ export declare const gridColumnDefinitionsSelector: import("../../..").OutputSel
  * @category Visible Columns
  */
 export declare const gridColumnVisibilityModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnsState, import("./gridColumnsInterfaces").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: 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
@@ -40,25 +47,20 @@ export declare const gridVisibleColumnFieldsSelector: import("../../..").OutputS
  * Get the visible pinned columns model.
  * @category Visible Columns
  */
-export declare const gridPinnedColumnsSelector: (state: GridStateCommunity) => GridPinnedColumnFields;
+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[];
+  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 summed width of all the visible columns.
- * @category Visible Columns
- */
-export declare const gridColumnsTotalWidthSelector: import("../../..").OutputSelector<GridStateCommunity, number[], number>;
 /**
  * Get the filterable columns as an array.
  * @category Columns
@@ -74,4 +76,4 @@ export declare const gridFilterableColumnLookupSelector: import("../../..").Outp
  * @category Columns
  * @ignore - Do not document
  */
-export declare const gridHasColSpanSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], boolean>;
+export declare const gridHasColSpanSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[], boolean>;