@mui/x-data-grid 8.0.0-alpha.11 → 8.0.0-alpha.13

package/modern/hooks/features/focus/useGridFocus.js

@@ -1,6 +1,7 @@
 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 useEventCallback from '@mui/utils/useEventCallback';
+import ownerDocument from '@mui/utils/ownerDocument';
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
@@ -71,7 +72,6 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
 
     // The row might have been deleted
     if (!apiRef.current.getRow(id)) {
@@ -108,7 +108,6 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef, logger, publishCellFocusOut]);
   const setColumnHeaderFilterFocus = React.useCallback((field, event = {}) => {
     const cell = gridFocusCellSelector(apiRef);
@@ -134,7 +133,6 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef, logger, publishCellFocusOut]);
   const setColumnGroupHeaderFocus = React.useCallback((field, depth, event = {}) => {
     const cell = gridFocusCellSelector(apiRef);
@@ -163,7 +161,6 @@ export const useGridFocus = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef]);
   const getColumnGroupHeaderFocus = React.useCallback(() => gridFocusColumnGroupHeaderSelector(apiRef), [apiRef]);
   const moveFocusToRelativeCell = React.useCallback((id, field, direction) => {
@@ -304,7 +301,6 @@ export const useGridFocus = (apiRef, props) => {
           columnGroupHeader: null
         }
       }));
-      apiRef.current.forceUpdate();
 
       // There's a focused cell but another element (not a cell) was clicked
       // Publishes an event to notify that the focus was lost
@@ -351,7 +347,7 @@ export const useGridFocus = (apiRef, props) => {
       }));
     }
   }, [apiRef, props.pagination, props.paginationMode]);
-  const handlePaginationModelChange = useEventcallback(() => {
+  const handlePaginationModelChange = useEventCallback(() => {
     const currentFocusedCell = gridFocusCellSelector(apiRef);
     if (!currentFocusedCell) {
       return;

package/modern/hooks/features/headerFiltering/gridHeaderFilteringSelectors.d.ts

@@ -0,0 +1,5 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+export declare const gridHeaderFilteringStateSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState>;
+export declare const gridHeaderFilteringEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState, boolean>;
+export declare const gridHeaderFilteringEditFieldSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState, string | null>;
+export declare const gridHeaderFilteringMenuSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../models/gridHeaderFilteringModel").GridHeaderFilteringState, string | null>;

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

@@ -1,5 +1,5 @@
-import { createSelector } from "../../../utils/createSelector.js";
-export const gridHeaderFilteringStateSelector = state => state.headerFiltering;
+import { createSelector, createRootSelector } from "../../../utils/createSelector.js";
+export const gridHeaderFilteringStateSelector = createRootSelector(state => state.headerFiltering);
 export const gridHeaderFilteringEnabledSelector = createSelector(gridHeaderFilteringStateSelector,
 // No initialization in MIT, so we need to default to false to be used by `getTotalHeaderHeight`
 headerFilteringState => headerFilteringState?.enabled ?? false);

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

@@ -0,0 +1 @@
+export * from "./gridHeaderFilteringSelectors.js";

package/modern/hooks/features/headerFiltering/useGridHeaderFiltering.d.ts

@@ -0,0 +1,6 @@
+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 headerFilteringStateInitializer: GridStateInitializer;
+export declare const useGridHeaderFiltering: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "signature" | "headerFilters">) => void;

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

@@ -27,7 +27,6 @@ export const useGridHeaderFiltering = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef, props.signature, props.headerFilters]);
   const startHeaderFilterEditMode = React.useCallback(field => {
     logger.debug(`Starting edit mode on header filter for field: ${field}`);

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

@@ -0,0 +1,19 @@
+export * from "./columnMenu/index.js";
+export * from "./columns/index.js";
+export * from "./columnGrouping/index.js";
+export * from "./columnResize/index.js";
+export * from "./density/index.js";
+export * from "./editing/index.js";
+export * from "./filter/index.js";
+export * from "./focus/index.js";
+export * from "./listView/index.js";
+export * from "./pagination/index.js";
+export * from "./preferencesPanel/index.js";
+export * from "./rows/index.js";
+export * from "./rowSelection/index.js";
+export * from "./sorting/index.js";
+export * from "./dimensions/index.js";
+export * from "./statePersistence/index.js";
+export * from "./headerFiltering/index.js";
+export * from "./virtualization/index.js";
+export * from "./dataSource/index.js";

package/modern/hooks/features/index.js

@@ -16,4 +16,5 @@ export * from "./sorting/index.js";
 export * from "./dimensions/index.js";
 export * from "./statePersistence/index.js";
 export * from "./headerFiltering/index.js";
-export * from "./virtualization/index.js";
+export * from "./virtualization/index.js";
+export * from "./dataSource/index.js";

package/modern/hooks/features/keyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+/**
+ * @requires useGridSorting (method) - can be after
+ * @requires useGridFilter (state) - can be after
+ * @requires useGridColumns (state, method) - can be after
+ * @requires useGridDimensions (method) - can be after
+ * @requires useGridFocus (method) - can be after
+ * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
+ */
+export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "experimentalFeatures" | "signature" | "headerFilters" | "unstable_listView">) => void;

package/modern/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -59,7 +59,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
     }
-    const field = listView ? gridListColumnSelector(apiRef.current.state).field : gridVisibleColumnFieldsSelector(apiRef)[colIndex];
+    const field = listView ? gridListColumnSelector(apiRef).field : gridVisibleColumnFieldsSelector(apiRef)[colIndex];
     const nonRowSpannedRowId = findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection);
     // `scrollToIndexes` requires a rowIndex relative to all visible rows.
     // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
@@ -401,7 +401,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     const firstRowIndexInPage = 0;
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
-    const visibleColumns = listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef);
+    const visibleColumns = listView ? [gridListColumnSelector(apiRef)] : gridVisibleColumnDefinitionsSelector(apiRef);
     const lastColIndex = visibleColumns.length - 1;
     let shouldPreventDefault = true;
     switch (event.key) {

package/modern/hooks/features/keyboardNavigation/utils.d.ts

@@ -0,0 +1,26 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridColDef, GridRowId } from "../../../models/index.js";
+import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
+export declare const getLeftColumnIndex: ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  isRtl
+}: {
+  currentColIndex: number;
+  firstColIndex: number;
+  lastColIndex: number;
+  isRtl: boolean;
+}) => number | null;
+export declare const getRightColumnIndex: ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  isRtl
+}: {
+  currentColIndex: number;
+  firstColIndex: number;
+  lastColIndex: number;
+  isRtl: boolean;
+}) => number | null;
+export declare function findNonRowSpannedCell(apiRef: RefObject<GridApiCommunity>, rowId: GridRowId, field: GridColDef['field'], rowSpanScanDirection: 'up' | 'down'): GridRowId;

package/modern/hooks/features/listView/gridListViewSelectors.d.ts

@@ -0,0 +1,7 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+/**
+ * Get the list column definition
+ * @category List View
+ * @ignore - Do not document
+ */
+export declare const gridListColumnSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./useGridListView").GridListViewState>;

package/modern/hooks/features/listView/gridListViewSelectors.js

@@ -1,6 +1,7 @@
+import { createRootSelector } from "../../../utils/createSelector.js";
 /**
  * Get the list column definition
  * @category List View
  * @ignore - Do not document
  */
-export const gridListColumnSelector = state => state.listViewColumn;
+export const gridListColumnSelector = createRootSelector(state => state.listViewColumn);

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

@@ -0,0 +1 @@
+export * from "./gridListViewSelectors.js";

package/modern/hooks/features/listView/useGridListView.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from '@mui/x-internals/types';
+import type { GridListColDef } from '../../../models/colDef/gridColDef';
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+export type GridListViewState = (GridListColDef & {
+  computedWidth: number;
+}) | undefined;
+export declare const listViewStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'unstable_listColumn'>>;
+export declare function useGridListView(apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_listView' | 'unstable_listColumn'>): void;

package/modern/hooks/features/listView/useGridListView.js

@@ -57,5 +57,5 @@ export function useGridListView(apiRef, props) {
   }, [props.unstable_listView, props.unstable_listColumn]);
 }
 function getListColumnWidth(apiRef) {
-  return gridDimensionsSelector(apiRef.current.state).viewportInnerSize.width;
+  return gridDimensionsSelector(apiRef).viewportInnerSize.width;
 }

package/modern/hooks/features/overlays/useGridOverlays.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { GridLoadingOverlayVariant } from "../../../components/GridLoadingOverlay.js";
+import type { GridOverlayType } from '../../../components/base/GridOverlays';
+/**
+ * Uses the grid state to determine which overlay to display.
+ * Returns the active overlay type and the active loading overlay variant.
+ */
+export declare const useGridOverlays: () => {
+  getOverlay: () => React.JSX.Element | null;
+  overlaysProps: {
+    overlayType: GridOverlayType;
+    loadingOverlayVariant: GridLoadingOverlayVariant | null;
+  };
+};

package/modern/hooks/features/overlays/useGridOverlays.js

@@ -7,23 +7,30 @@ import { gridExpandedRowCountSelector } from "../filter/index.js";
 import { gridRowCountSelector, gridRowsLoadingSelector } from "../rows/index.js";
 import { gridPinnedRowsCountSelector } from "../rows/gridRowsSelector.js";
 import { GridOverlayWrapper } from "../../../components/base/GridOverlays.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { gridVisibleColumnDefinitionsSelector } from "../index.js";
+
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridOverlays = () => {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
   const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
   const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
   const showNoRowsOverlay = !loading && noRows;
   const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
+  const showNoColumnsOverlay = !loading && visibleColumns.length === 0;
   let overlayType = null;
   let loadingOverlayVariant = null;
+  if (showNoColumnsOverlay) {
+    overlayType = 'noColumnsOverlay';
+  }
   if (showNoRowsOverlay) {
     overlayType = 'noRowsOverlay';
   }

package/modern/hooks/features/pagination/gridPaginationInterfaces.d.ts

@@ -0,0 +1,58 @@
+import { GridFeatureMode } from "../../../models/gridFeatureMode.js";
+import { GridPaginationMeta, GridPaginationModel } from "../../../models/gridPaginationProps.js";
+export interface GridPaginationState {
+  paginationModel: GridPaginationModel;
+  rowCount: number;
+  meta: GridPaginationMeta;
+  enabled: boolean;
+  paginationMode: GridFeatureMode;
+}
+export interface GridPaginationInitialState {
+  paginationModel?: Partial<GridPaginationModel>;
+  rowCount?: number;
+  meta?: GridPaginationMeta;
+}
+/**
+ * The pagination model API interface that is available in the grid `apiRef`.
+ */
+export interface GridPaginationModelApi {
+  /**
+   * Sets the displayed page to the value given by `page`.
+   * @param {number} page The new page number.
+   */
+  setPage: (page: number) => void;
+  /**
+   * Sets the number of displayed rows to the value given by `pageSize`.
+   * @param {number} pageSize The new number of displayed rows.
+   */
+  setPageSize: (pageSize: number) => void;
+  /**
+   * Sets the `paginationModel` to a new value.
+   * @param {GridPaginationModel} model The new model value.
+   */
+  setPaginationModel: (model: GridPaginationModel) => void;
+}
+/**
+ * The pagination row count API interface that is available in the grid `apiRef`.
+ */
+export interface GridPaginationRowCountApi {
+  /**
+   * Sets the `rowCount` to a new value.
+   * @param {number} rowCount The new row count value.
+   */
+  setRowCount: (rowCount: number) => void;
+}
+/**
+ * The pagination meta API interface that is available in the grid `apiRef`.
+ */
+export interface GridPaginationMetaApi {
+  /**
+   * Sets the `paginationMeta` to a new value.
+   * @param {GridPaginationMeta} paginationMeta The new pagination meta value.
+   */
+  setPaginationMeta: (paginationMeta: GridPaginationMeta) => void;
+}
+/**
+ * The pagination API interface that is available in the grid `apiRef`.
+ */
+export interface GridPaginationApi extends GridPaginationModelApi, GridPaginationRowCountApi, GridPaginationMetaApi {}

package/modern/hooks/features/pagination/gridPaginationSelector.d.ts

@@ -0,0 +1,79 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import { GridRowId } from "../../../models/gridRows.js";
+/**
+ * @category Pagination
+ * @ignore - do not document.
+ */
+export declare const gridPaginationSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridPaginationInterfaces").GridPaginationState>;
+/**
+ * @category Pagination
+ * @ignore - do not document.
+ */
+export declare const gridPaginationEnabledClientSideSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, boolean>;
+/**
+ * Get the pagination model
+ * @category Pagination
+ */
+export declare const gridPaginationModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, import("../../..").GridPaginationModel>;
+/**
+ * Get the row count
+ * @category Pagination
+ */
+export declare const gridPaginationRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, number>;
+/**
+ * Get the pagination meta
+ * @category Pagination
+ */
+export declare const gridPaginationMetaSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, import("../../..").GridPaginationMeta>;
+/**
+ * Get the index of the page to render if the pagination is enabled
+ * @category Pagination
+ */
+export declare const gridPageSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridPaginationModel, number>;
+/**
+ * Get the maximum amount of rows to display on a single page if the pagination is enabled
+ * @category Pagination
+ */
+export declare const gridPageSizeSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridPaginationModel, number>;
+/**
+ * Get the amount of pages needed to display all the rows if the pagination is enabled
+ * @category Pagination
+ */
+export declare const gridPageCountSelector: import("../../..").OutputSelector<GridStateCommunity, number, number>;
+/**
+ * Get the index of the first and the last row to include in the current page if the pagination is enabled.
+ * @category Pagination
+ */
+export declare const gridPaginationRowRangeSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], {
+  firstRowIndex: number;
+  lastRowIndex: number;
+} | null>;
+/**
+ * Get the id and the model of each row to include in the current page if the pagination is enabled.
+ * @category Pagination
+ */
+export declare const gridPaginatedVisibleSortedGridRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, {
+  firstRowIndex: number;
+  lastRowIndex: number;
+} | null, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+/**
+ * Get the id of each row to include in the current page if the pagination is enabled.
+ * @category Pagination
+ */
+export declare const gridPaginatedVisibleSortedGridRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, {
+  firstRowIndex: number;
+  lastRowIndex: number;
+} | null, GridRowId[]>;
+/**
+ * Get the rows, range and rowIndex lookup map after filtering and sorting.
+ * Does not contain the collapsed children.
+ * @category Pagination
+ */
+export declare const gridVisibleRowsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], {
+  rows: import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[];
+  range: {
+    firstRowIndex: number;
+    lastRowIndex: number;
+  } | null;
+  rowIdToIndexMap: Map<GridRowId, number>;
+}>;

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

@@ -1,4 +1,4 @@
-import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+import { createSelector, createRootSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
 import { gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from "../filter/gridFilterSelector.js";
 import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { getPageCount } from "./gridPaginationUtils.js";
@@ -8,7 +8,7 @@ const ALL_RESULTS_PAGE_VALUE = -1;
  * @category Pagination
  * @ignore - do not document.
  */
-export const gridPaginationSelector = state => state.pagination;
+export const gridPaginationSelector = createRootSelector(state => state.pagination);
 
 /**
  * @category Pagination

package/modern/hooks/features/pagination/gridPaginationUtils.d.ts

@@ -0,0 +1,9 @@
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+export declare const defaultPageSize: (autoPageSize: boolean) => 0 | 100;
+export declare const getPageCount: (rowCount: number, pageSize: number, page: number) => number;
+export declare const getDefaultGridPaginationModel: (autoPageSize: boolean) => {
+  page: number;
+  pageSize: number;
+};
+export declare const getValidPage: (page: number, pageCount?: number) => number;
+export declare const throwIfPageSizeExceedsTheLimit: (pageSize: number, signatureProp: DataGridProcessedProps["signature"]) => void;

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

@@ -0,0 +1,2 @@
+export * from "./gridPaginationSelector.js";
+export type { GridPaginationModelApi, GridPaginationRowCountApi, GridPaginationApi, GridPaginationState, GridPaginationInitialState } from './gridPaginationInterfaces';

package/modern/hooks/features/pagination/useGridPagination.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 paginationStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'paginationModel' | 'rowCount' | 'initialState' | 'autoPageSize' | 'signature' | 'paginationMeta' | 'pagination' | 'paginationMode'>>;
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+export declare const useGridPagination: (apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;

package/modern/hooks/features/pagination/useGridPaginationMeta.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+export declare const useGridPaginationMeta: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationMeta" | "initialState" | "paginationMode" | "onPaginationMetaChange">) => void;

package/modern/hooks/features/pagination/useGridPaginationModel.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import { GridPaginationState } from "./gridPaginationInterfaces.js";
+import { GridPaginationModel } from "../../../models/gridPaginationProps.js";
+export declare const getDerivedPaginationModel: (paginationState: GridPaginationState, signature: DataGridProcessedProps["signature"], paginationModelProp?: GridPaginationModel) => GridPaginationModel;
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+export declare const useGridPaginationModel: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationModel" | "onPaginationModelChange" | "autoPageSize" | "initialState" | "paginationMode" | "pagination" | "signature" | "rowHeight">) => void;

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { gridFilterModelSelector, gridFilterActiveItemsSelector } from "../filter/gridFilterSelector.js";
 import { gridDensityFactorSelector } from "../density/index.js";
 import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from "../../utils/index.js";
+import { isDeepEqual } from "../../../utils/utils.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { gridPageCountSelector, gridPaginationModelSelector } from "./gridPaginationSelector.js";
 import { getPageCount, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from "./gridPaginationUtils.js";
@@ -14,7 +16,7 @@ export const getDerivedPaginationModel = (paginationState, signature, pagination
   if (paginationModelProp && (paginationModelProp?.page !== paginationModel.page || paginationModelProp?.pageSize !== paginationModel.pageSize)) {
     paginationModel = paginationModelProp;
   }
-  const validPage = getValidPage(paginationModel.page, pageCount);
+  const validPage = pageSize === -1 ? 0 : getValidPage(paginationModel.page, pageCount);
   if (validPage !== paginationModel.page) {
     paginationModel = _extends({}, paginationModel, {
       page: validPage
@@ -31,6 +33,7 @@ export const getDerivedPaginationModel = (paginationState, signature, pagination
 export const useGridPaginationModel = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPaginationModel');
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const previousFilterModel = React.useRef(gridFilterModelSelector(apiRef));
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   apiRef.current.registerControlState({
     stateId: 'paginationModel',
@@ -143,14 +146,55 @@ export const useGridPaginationModel = (apiRef, props) => {
       return;
     }
     const paginationModel = gridPaginationModelSelector(apiRef);
+    if (paginationModel.page === 0) {
+      return;
+    }
     const pageCount = gridPageCountSelector(apiRef);
     if (paginationModel.page > pageCount - 1) {
       apiRef.current.setPage(Math.max(0, pageCount - 1));
     }
   }, [apiRef]);
+
+  /**
+   * Goes to the first row of the grid
+   */
+  const navigateToStart = React.useCallback(() => {
+    const paginationModel = gridPaginationModelSelector(apiRef);
+    if (paginationModel.page !== 0) {
+      apiRef.current.setPage(0);
+    }
+
+    // If the page was not changed it might be needed to scroll to the top
+    const scrollPosition = apiRef.current.getScrollPosition();
+    if (scrollPosition.top !== 0) {
+      apiRef.current.scroll({
+        top: 0
+      });
+    }
+  }, [apiRef]);
+
+  /**
+   * Resets the page only if the active items or quick filter has changed from the last time.
+   * This is to avoid resetting the page when the filter model is changed
+   * because of and update of the operator from an item that does not have the value
+   * or reseting when the filter panel is just opened
+   */
+  const handleFilterModelChange = React.useCallback(filterModel => {
+    const currentActiveFilters = _extends({}, filterModel, {
+      // replace items with the active items
+      items: gridFilterActiveItemsSelector(apiRef)
+    });
+    if (isDeepEqual(currentActiveFilters, previousFilterModel.current)) {
+      return;
+    }
+    previousFilterModel.current = currentActiveFilters;
+    navigateToStart();
+  }, [apiRef, navigateToStart]);
   useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
   useGridApiEventHandler(apiRef, 'paginationModelChange', handlePaginationModelChange);
   useGridApiEventHandler(apiRef, 'rowCountChange', handleRowCountChange);
+  useGridApiEventHandler(apiRef, 'sortModelChange', navigateToStart);
+  useGridApiEventHandler(apiRef, 'filterModelChange', handleFilterModelChange);
 
   /**
    * EFFECTS

package/modern/hooks/features/pagination/useGridRowCount.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+export declare const useGridRowCount: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rowCount" | "initialState" | "paginationMode" | "onRowCountChange">) => void;

package/modern/hooks/features/preferencesPanel/gridPreferencePanelSelector.d.ts

@@ -0,0 +1,3 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+export declare const gridPreferencePanelStateSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridPreferencePanelState").GridPreferencePanelState>;
+export declare const gridPreferencePanelSelectorWithLabel: import("../../..").OutputSelector<GridStateCommunity, string, boolean>;

package/modern/hooks/features/preferencesPanel/gridPreferencePanelSelector.js

@@ -1,5 +1,5 @@
-import { createSelector } from "../../../utils/createSelector.js";
-export const gridPreferencePanelStateSelector = state => state.preferencePanel;
+import { createSelector, createRootSelector } from "../../../utils/createSelector.js";
+export const gridPreferencePanelStateSelector = createRootSelector(state => state.preferencePanel);
 export const gridPreferencePanelSelectorWithLabel = createSelector(gridPreferencePanelStateSelector, (panel, labelId) => {
   if (panel.open && panel.labelId === labelId) {
     return true;

package/modern/hooks/features/preferencesPanel/gridPreferencePanelState.d.ts

@@ -0,0 +1,13 @@
+import { GridPreferencePanelsValue } from "./gridPreferencePanelsValue.js";
+export interface GridPreferencePanelState {
+  open: boolean;
+  panelId?: string;
+  labelId?: string;
+  /**
+   * Tab currently opened.
+   * @default GridPreferencePanelsValue.filter
+   * TODO v6: Remove the default behavior
+   */
+  openedPanelValue?: GridPreferencePanelsValue;
+}
+export type GridPreferencePanelInitialState = GridPreferencePanelState;

package/modern/hooks/features/preferencesPanel/gridPreferencePanelsValue.d.ts

@@ -0,0 +1,5 @@
+declare enum GridPreferencePanelsValue {
+  filters = "filters",
+  columns = "columns",
+}
+export { GridPreferencePanelsValue };

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

@@ -0,0 +1,3 @@
+export { gridPreferencePanelStateSelector } from "./gridPreferencePanelSelector.js";
+export * from "./gridPreferencePanelState.js";
+export * from "./gridPreferencePanelsValue.js";

package/modern/hooks/features/preferencesPanel/useGridPreferencesPanel.d.ts

@@ -0,0 +1,9 @@
+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 preferencePanelStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'initialState'>>;
+/**
+ * TODO: Add a single `setPreferencePanel` method to avoid multiple `setState`
+ */
+export declare const useGridPreferencesPanel: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState">) => void;