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

package/modern/hooks/features/headerFiltering/useGridHeaderFiltering.js

@@ -3,14 +3,18 @@ import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils';
 import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
-export const headerFilteringStateInitializer = state => _extends({}, state, {
+export const headerFilteringStateInitializer = (state, props) => _extends({}, state, {
+  // @ts-expect-error Access `Pro` prop in MIT
   headerFiltering: {
+    enabled: props.headerFilters ?? false,
     editing: null,
     menuOpen: null
   }
 });
 export const useGridHeaderFiltering = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridHeaderFiltering');
+  // @ts-expect-error Access `Pro` prop in MIT
+  const isHeaderFilteringEnabled = props.headerFilters ?? false;
   const setHeaderFilterState = React.useCallback(headerFilterState => {
     apiRef.current.setState(state => {
       // Safety check to avoid MIT users from using it
@@ -20,13 +24,14 @@ export const useGridHeaderFiltering = (apiRef, props) => {
       }
       return _extends({}, state, {
         headerFiltering: {
+          enabled: isHeaderFilteringEnabled ?? false,
           editing: headerFilterState.editing ?? null,
           menuOpen: headerFilterState.menuOpen ?? null
         }
       });
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, props.signature]);
+  }, [apiRef, props.signature, isHeaderFilteringEnabled]);
   const startHeaderFilterEditMode = React.useCallback(field => {
     logger.debug(`Starting edit mode on header filter for field: ${field}`);
     apiRef.current.setHeaderFilterState({
@@ -87,4 +92,18 @@ export const useGridHeaderFiltering = (apiRef, props) => {
   };
   useGridApiMethod(apiRef, headerFilterApi, 'public');
   useGridApiMethod(apiRef, headerFilterPrivateApi, 'private');
+
+  /*
+   * EFFECTS
+   */
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      apiRef.current.setHeaderFilterState({
+        enabled: isHeaderFilteringEnabled
+      });
+    }
+  }, [apiRef, isHeaderFilteringEnabled]);
 };

package/modern/hooks/features/index.js

@@ -2,6 +2,7 @@
 export * from './columnMenu';
 export * from './columns';
 export * from './columnGrouping';
+export * from './columnResize';
 export * from './density';
 export * from './filter';
 export * from './focus';

package/modern/hooks/features/pagination/gridPaginationSelector.js

@@ -1,5 +1,5 @@
 import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
-import { gridFilteredTopLevelRowCountSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from '../filter/gridFilterSelector';
+import { gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from '../filter/gridFilterSelector';
 import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 import { getPageCount } from './gridPaginationUtils';
 
@@ -15,6 +15,12 @@ export const gridPaginationSelector = state => state.pagination;
  */
 export const gridPaginationModelSelector = createSelector(gridPaginationSelector, pagination => pagination.paginationModel);
 
+/**
+ * Get the row count
+ * @category Pagination
+ */
+export const gridPaginationRowCountSelector = createSelector(gridPaginationSelector, pagination => pagination.rowCount);
+
 /**
  * Get the index of the page to render if the pagination is enabled
  * @category Pagination
@@ -31,7 +37,7 @@ export const gridPageSizeSelector = createSelector(gridPaginationModelSelector,
  * Get the amount of pages needed to display all the rows if the pagination is enabled
  * @category Pagination
  */
-export const gridPageCountSelector = createSelector(gridPaginationModelSelector, gridFilteredTopLevelRowCountSelector, (paginationModel, visibleTopLevelRowCount) => getPageCount(visibleTopLevelRowCount, paginationModel.pageSize));
+export const gridPageCountSelector = createSelector(gridPageSizeSelector, gridPaginationRowCountSelector, (pageSize, rowCount) => getPageCount(rowCount, pageSize));
 
 /**
  * Get the index of the first and the last row to include in the current page if the pagination is enabled.

package/modern/hooks/features/pagination/useGridPagination.js

@@ -1,165 +1,24 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { gridFilteredTopLevelRowCountSelector } from '../filter';
-import { gridDensityFactorSelector } from '../density';
-import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
-import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
-import { gridPaginationModelSelector } from './gridPaginationSelector';
-import { getPageCount, noRowCountInServerMode, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from './gridPaginationUtils';
+import { throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel } from './gridPaginationUtils';
+import { useGridPaginationModel } from './useGridPaginationModel';
+import { useGridRowCount } from './useGridRowCount';
 export const paginationStateInitializer = (state, props) => {
   const paginationModel = _extends({}, getDefaultGridPaginationModel(props.autoPageSize), props.paginationModel ?? props.initialState?.pagination?.paginationModel);
   throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, props.signature);
+  const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount;
   return _extends({}, state, {
     pagination: {
-      paginationModel
+      paginationModel,
+      rowCount
     }
   });
 };
-export const mergeStateWithPaginationModel = (rowCount, signature, paginationModelProp) => paginationState => {
-  let paginationModel = paginationState.paginationModel;
-  const pageSize = paginationModelProp?.pageSize ?? paginationModel.pageSize;
-  const pageCount = getPageCount(rowCount, pageSize);
-  if (paginationModelProp && (paginationModelProp?.page !== paginationModel.page || paginationModelProp?.pageSize !== paginationModel.pageSize)) {
-    paginationModel = paginationModelProp;
-  }
-  const validPage = getValidPage(paginationModel.page, pageCount);
-  if (validPage !== paginationModel.page) {
-    paginationModel = _extends({}, paginationModel, {
-      page: validPage
-    });
-  }
-  throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, signature);
-  return {
-    paginationModel
-  };
-};
 
 /**
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after
  */
 export const useGridPagination = (apiRef, props) => {
-  const logger = useGridLogger(apiRef, 'useGridPagination');
-  const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
-  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const rowHeight = Math.floor(props.rowHeight * densityFactor);
-  apiRef.current.registerControlState({
-    stateId: 'pagination',
-    propModel: props.paginationModel,
-    propOnChange: props.onPaginationModelChange,
-    stateSelector: gridPaginationModelSelector,
-    changeEvent: 'paginationModelChange'
-  });
-
-  /**
-   * API METHODS
-   */
-  const setPage = React.useCallback(page => {
-    const currentModel = gridPaginationModelSelector(apiRef);
-    if (page === currentModel.page) {
-      return;
-    }
-    logger.debug(`Setting page to ${page}`);
-    apiRef.current.setPaginationModel({
-      page,
-      pageSize: currentModel.pageSize
-    });
-  }, [apiRef, logger]);
-  const setPageSize = React.useCallback(pageSize => {
-    const currentModel = gridPaginationModelSelector(apiRef);
-    if (pageSize === currentModel.pageSize) {
-      return;
-    }
-    logger.debug(`Setting page size to ${pageSize}`);
-    apiRef.current.setPaginationModel({
-      pageSize,
-      page: currentModel.page
-    });
-  }, [apiRef, logger]);
-  const setPaginationModel = React.useCallback(paginationModel => {
-    const currentModel = gridPaginationModelSelector(apiRef);
-    if (paginationModel === currentModel) {
-      return;
-    }
-    logger.debug("Setting 'paginationModel' to", paginationModel);
-    apiRef.current.updateControlState('pagination', mergeStateWithPaginationModel(props.rowCount ?? visibleTopLevelRowCount, props.signature, paginationModel), 'setPaginationModel');
-    apiRef.current.forceUpdate();
-  }, [apiRef, logger, props.rowCount, props.signature, visibleTopLevelRowCount]);
-  const pageApi = {
-    setPage,
-    setPageSize,
-    setPaginationModel
-  };
-  useGridApiMethod(apiRef, pageApi, 'public');
-
-  /**
-   * PRE-PROCESSING
-   */
-  const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    const paginationModel = gridPaginationModelSelector(apiRef);
-    const shouldExportPaginationModel =
-    // Always export if the `exportOnlyDirtyModels` property is not activated
-    !context.exportOnlyDirtyModels ||
-    // Always export if the `paginationModel` is controlled
-    props.paginationModel != null ||
-    // Always export if the `paginationModel` has been initialized
-    props.initialState?.pagination?.paginationModel != null ||
-    // Export if `page` or `pageSize` is not equal to the default value
-    paginationModel.page !== 0 && paginationModel.pageSize !== defaultPageSize(props.autoPageSize);
-    if (!shouldExportPaginationModel) {
-      return prevState;
-    }
-    return _extends({}, prevState, {
-      pagination: _extends({}, prevState.pagination, {
-        paginationModel
-      })
-    });
-  }, [apiRef, props.paginationModel, props.initialState?.pagination?.paginationModel, props.autoPageSize]);
-  const stateRestorePreProcessing = React.useCallback((params, context) => {
-    const paginationModel = context.stateToRestore.pagination?.paginationModel ? _extends({}, getDefaultGridPaginationModel(props.autoPageSize), context.stateToRestore.pagination?.paginationModel) : gridPaginationModelSelector(apiRef);
-    apiRef.current.updateControlState('pagination', mergeStateWithPaginationModel(props.rowCount ?? visibleTopLevelRowCount, props.signature, paginationModel), 'stateRestorePreProcessing');
-    return params;
-  }, [apiRef, props.autoPageSize, props.rowCount, props.signature, visibleTopLevelRowCount]);
-  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-
-  /**
-   * EVENTS
-   */
-  const handlePaginationModelChange = () => {
-    const paginationModel = gridPaginationModelSelector(apiRef);
-    if (apiRef.current.virtualScrollerRef?.current) {
-      apiRef.current.scrollToIndexes({
-        rowIndex: paginationModel.page * paginationModel.pageSize
-      });
-    }
-    apiRef.current.forceUpdate();
-  };
-  const handleUpdateAutoPageSize = React.useCallback(() => {
-    if (!props.autoPageSize) {
-      return;
-    }
-    const dimensions = apiRef.current.getRootDimensions();
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
-    apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
-  }, [apiRef, props.autoPageSize, rowHeight]);
-  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
-  useGridApiEventHandler(apiRef, 'paginationModelChange', handlePaginationModelChange);
-
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    if (process.env.NODE_ENV !== 'production') {
-      if (props.paginationMode === 'server' && props.rowCount == null) {
-        noRowCountInServerMode();
-      }
-    }
-  }, [props.rowCount, props.paginationMode]);
-  React.useEffect(() => {
-    apiRef.current.updateControlState('pagination', mergeStateWithPaginationModel(props.rowCount ?? visibleTopLevelRowCount, props.signature, props.paginationModel));
-  }, [apiRef, props.paginationModel, props.rowCount, props.paginationMode, visibleTopLevelRowCount, props.signature]);
-  React.useEffect(() => {
-    handleUpdateAutoPageSize();
-  }, [handleUpdateAutoPageSize]);
+  useGridPaginationModel(apiRef, props);
+  useGridRowCount(apiRef, props);
 };

package/modern/hooks/features/pagination/useGridPaginationModel.js

@@ -0,0 +1,165 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridDensityFactorSelector } from '../density';
+import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { gridPageCountSelector, gridPaginationModelSelector } from './gridPaginationSelector';
+import { getPageCount, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from './gridPaginationUtils';
+export const getDerivedPaginationModel = (paginationState, signature, paginationModelProp) => {
+  let paginationModel = paginationState.paginationModel;
+  const rowCount = paginationState.rowCount;
+  const pageSize = paginationModelProp?.pageSize ?? paginationModel.pageSize;
+  const pageCount = getPageCount(rowCount, pageSize);
+  if (paginationModelProp && (paginationModelProp?.page !== paginationModel.page || paginationModelProp?.pageSize !== paginationModel.pageSize)) {
+    paginationModel = paginationModelProp;
+  }
+  const validPage = getValidPage(paginationModel.page, pageCount);
+  if (validPage !== paginationModel.page) {
+    paginationModel = _extends({}, paginationModel, {
+      page: validPage
+    });
+  }
+  throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, signature);
+  return paginationModel;
+};
+
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+export const useGridPaginationModel = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridPaginationModel');
+  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const rowHeight = Math.floor(props.rowHeight * densityFactor);
+  apiRef.current.registerControlState({
+    stateId: 'paginationModel',
+    propModel: props.paginationModel,
+    propOnChange: props.onPaginationModelChange,
+    stateSelector: gridPaginationModelSelector,
+    changeEvent: 'paginationModelChange'
+  });
+
+  /**
+   * API METHODS
+   */
+  const setPage = React.useCallback(page => {
+    const currentModel = gridPaginationModelSelector(apiRef);
+    if (page === currentModel.page) {
+      return;
+    }
+    logger.debug(`Setting page to ${page}`);
+    apiRef.current.setPaginationModel({
+      page,
+      pageSize: currentModel.pageSize
+    });
+  }, [apiRef, logger]);
+  const setPageSize = React.useCallback(pageSize => {
+    const currentModel = gridPaginationModelSelector(apiRef);
+    if (pageSize === currentModel.pageSize) {
+      return;
+    }
+    logger.debug(`Setting page size to ${pageSize}`);
+    apiRef.current.setPaginationModel({
+      pageSize,
+      page: currentModel.page
+    });
+  }, [apiRef, logger]);
+  const setPaginationModel = React.useCallback(paginationModel => {
+    const currentModel = gridPaginationModelSelector(apiRef);
+    if (paginationModel === currentModel) {
+      return;
+    }
+    logger.debug("Setting 'paginationModel' to", paginationModel);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
+      })
+    }));
+  }, [apiRef, logger, props.signature]);
+  const paginationModelApi = {
+    setPage,
+    setPageSize,
+    setPaginationModel
+  };
+  useGridApiMethod(apiRef, paginationModelApi, 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const paginationModel = gridPaginationModelSelector(apiRef);
+    const shouldExportPaginationModel =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the `paginationModel` is controlled
+    props.paginationModel != null ||
+    // Always export if the `paginationModel` has been initialized
+    props.initialState?.pagination?.paginationModel != null ||
+    // Export if `page` or `pageSize` is not equal to the default value
+    paginationModel.page !== 0 && paginationModel.pageSize !== defaultPageSize(props.autoPageSize);
+    if (!shouldExportPaginationModel) {
+      return prevState;
+    }
+    return _extends({}, prevState, {
+      pagination: _extends({}, prevState.pagination, {
+        paginationModel
+      })
+    });
+  }, [apiRef, props.paginationModel, props.initialState?.pagination?.paginationModel, props.autoPageSize]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const paginationModel = context.stateToRestore.pagination?.paginationModel ? _extends({}, getDefaultGridPaginationModel(props.autoPageSize), context.stateToRestore.pagination?.paginationModel) : gridPaginationModelSelector(apiRef);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
+      })
+    }));
+    return params;
+  }, [apiRef, props.autoPageSize, props.signature]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+
+  /**
+   * EVENTS
+   */
+  const handlePaginationModelChange = () => {
+    const paginationModel = gridPaginationModelSelector(apiRef);
+    if (apiRef.current.virtualScrollerRef?.current) {
+      apiRef.current.scrollToIndexes({
+        rowIndex: paginationModel.page * paginationModel.pageSize
+      });
+    }
+  };
+  const handleUpdateAutoPageSize = React.useCallback(() => {
+    if (!props.autoPageSize) {
+      return;
+    }
+    const dimensions = apiRef.current.getRootDimensions();
+    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
+  }, [apiRef, props.autoPageSize, rowHeight]);
+  const handleRowCountChange = React.useCallback(newRowCount => {
+    if (newRowCount == null) {
+      return;
+    }
+    const paginationModel = gridPaginationModelSelector(apiRef);
+    const pageCount = gridPageCountSelector(apiRef);
+    if (paginationModel.page > pageCount - 1) {
+      apiRef.current.setPage(Math.max(0, pageCount - 1));
+    }
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
+  useGridApiEventHandler(apiRef, 'paginationModelChange', handlePaginationModelChange);
+  useGridApiEventHandler(apiRef, 'rowCountChange', handleRowCountChange);
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        paginationModel: getDerivedPaginationModel(state.pagination, props.signature, props.paginationModel)
+      })
+    }));
+  }, [apiRef, props.paginationModel, props.paginationMode, props.signature]);
+  React.useEffect(handleUpdateAutoPageSize, [handleUpdateAutoPageSize]);
+};

package/modern/hooks/features/pagination/useGridRowCount.js

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridFilteredTopLevelRowCountSelector } from '../filter';
+import { useGridLogger, useGridSelector, useGridApiMethod } from '../../utils';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { gridPaginationRowCountSelector } from './gridPaginationSelector';
+import { noRowCountInServerMode } from './gridPaginationUtils';
+
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+export const useGridRowCount = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridRowCount');
+  const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
+  const rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector);
+  apiRef.current.registerControlState({
+    stateId: 'paginationRowCount',
+    propModel: props.rowCount,
+    propOnChange: props.onRowCountChange,
+    stateSelector: gridPaginationRowCountSelector,
+    changeEvent: 'rowCountChange'
+  });
+
+  /**
+   * API METHODS
+   */
+  const setRowCount = React.useCallback(newRowCount => {
+    if (rowCount === newRowCount) {
+      return;
+    }
+    logger.debug("Setting 'rowCount' to", newRowCount);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        rowCount: newRowCount
+      })
+    }));
+  }, [apiRef, logger, rowCount]);
+  const paginationRowCountApi = {
+    setRowCount
+  };
+  useGridApiMethod(apiRef, paginationRowCountApi, 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const exportedRowCount = gridPaginationRowCountSelector(apiRef);
+    const shouldExportRowCount =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the `rowCount` is controlled
+    props.rowCount != null ||
+    // Always export if the `rowCount` has been initialized
+    props.initialState?.pagination?.rowCount != null;
+    if (!shouldExportRowCount) {
+      return prevState;
+    }
+    return _extends({}, prevState, {
+      pagination: _extends({}, prevState.pagination, {
+        rowCount: exportedRowCount
+      })
+    });
+  }, [apiRef, props.rowCount, props.initialState?.pagination?.rowCount]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const restoredRowCount = context.stateToRestore.pagination?.rowCount ? context.stateToRestore.pagination.rowCount : gridPaginationRowCountSelector(apiRef);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        rowCount: restoredRowCount
+      })
+    }));
+    return params;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (props.paginationMode === 'server' && props.rowCount == null) {
+        noRowCountInServerMode();
+      }
+    }
+  }, [props.rowCount, props.paginationMode]);
+  React.useEffect(() => {
+    if (props.paginationMode === 'client') {
+      apiRef.current.setRowCount(visibleTopLevelRowCount);
+    } else if (props.rowCount != null) {
+      apiRef.current.setRowCount(props.rowCount);
+    }
+  }, [apiRef, visibleTopLevelRowCount, props.paginationMode, props.rowCount]);
+};

package/modern/hooks/features/scroll/useGridScroll.js

@@ -45,7 +45,7 @@ function scrollIntoView(dimensions) {
 export const useGridScroll = (apiRef, props) => {
   const theme = useTheme();
   const logger = useGridLogger(apiRef, 'useGridScroll');
-  const colRef = apiRef.current.columnHeadersElementRef;
+  const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
   const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {

package/modern/hooks/features/virtualization/gridVirtualizationSelectors.js

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

package/modern/hooks/utils/useLazyRef.js

@@ -1,11 +1 @@
-import * as React from 'react';
-const UNINITIALIZED = {};
-
-// See https://github.com/facebook/react/issues/14490 for when to use this.
-export function useLazyRef(init, initArg) {
-  const ref = React.useRef(UNINITIALIZED);
-  if (ref.current === UNINITIALIZED) {
-    ref.current = init(initArg);
-  }
-  return ref;
-}
+export { default as useLazyRef } from '@mui/utils/useLazyRef';

package/modern/hooks/utils/useOnMount.js

@@ -1,7 +1 @@
-import * as React from 'react';
-const EMPTY = [];
-export function useOnMount(fn) {
-  /* eslint-disable react-hooks/exhaustive-deps */
-  React.useEffect(fn, EMPTY);
-  /* eslint-enable react-hooks/exhaustive-deps */
-}
+export { default as useOnMount } from '@mui/utils/useOnMount';

package/modern/hooks/utils/useTimeout.js

@@ -1,36 +1 @@
-'use client';
-
-import { useLazyRef } from './useLazyRef';
-import { useOnMount } from './useOnMount';
-export class Timeout {
-  constructor() {
-    this.currentId = null;
-    this.clear = () => {
-      if (this.currentId !== null) {
-        clearTimeout(this.currentId);
-        this.currentId = null;
-      }
-    };
-    this.disposeEffect = () => {
-      return this.clear;
-    };
-  }
-  static create() {
-    return new Timeout();
-  }
-  /**
-   * Executes `fn` after `delay`, clearing any previously scheduled call.
-   */
-  start(delay, fn) {
-    this.clear();
-    this.currentId = setTimeout(() => {
-      this.currentId = null;
-      fn();
-    }, delay);
-  }
-}
-export function useTimeout() {
-  const timeout = useLazyRef(Timeout.create).current;
-  useOnMount(timeout.disposeEffect);
-  return timeout;
-}
+export { default as useTimeout } from '@mui/utils/useTimeout';

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.6
+ * @mui/x-data-grid v7.0.0-beta.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -3,7 +3,6 @@ export { GridVirtualScrollerContent } from '../components/virtualization/GridVir
 export { GridVirtualScrollerRenderZone } from '../components/virtualization/GridVirtualScrollerRenderZone';
 export { GridHeaders } from '../components/GridHeaders';
 export { GridBaseColumnHeaders } from '../components/columnHeaders/GridBaseColumnHeaders';
-export { GridColumnHeadersInner } from '../components/columnHeaders/GridColumnHeadersInner';
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
 export { getGridFilter } from '../components/panel/filterPanel/GridFilterPanel';
 export { useGridRegisterPipeProcessor } from '../hooks/core/pipeProcessing';
@@ -49,6 +48,7 @@ export { dimensionsStateInitializer, useGridDimensions } from '../hooks/features
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export { useGridVirtualScroller, EMPTY_DETAIL_PANELS } from '../hooks/features/virtualization/useGridVirtualScroller';
 export * from '../hooks/features/virtualization';
+export { useGridColumnResize, columnResizeStateInitializer } from '../hooks/features/columnResize/useGridColumnResize';
 export { useTimeout } from '../hooks/utils/useTimeout';
 export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';

package/modern/internals/utils/getPinnedCellOffset.js

@@ -0,0 +1,17 @@
+import { GridPinnedColumnPosition } from '../../hooks/features/columns';
+export const getPinnedCellOffset = (pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions) => {
+  const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+  let pinnedOffset;
+  switch (pinnedPosition) {
+    case GridPinnedColumnPosition.LEFT:
+      pinnedOffset = columnPositions[columnIndex];
+      break;
+    case GridPinnedColumnPosition.RIGHT:
+      pinnedOffset = dimensions.columnsTotalWidth - columnPositions[columnIndex] - computedWidth + scrollbarWidth;
+      break;
+    default:
+      pinnedOffset = 0;
+      break;
+  }
+  return pinnedOffset;
+};