@mui/x-data-grid 8.0.0-alpha.9 → 8.0.0-beta.1

package/hooks/features/keyboardNavigation/utils.js

@@ -1,11 +1,13 @@
-import { gridFilteredSortedRowIdsSelector } from "../filter/gridFilterSelector.js";
-import { gridRowSpanningHiddenCellsSelector } from "../rows/gridRowSpanningSelectors.js";
-import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
-export function enrichPageRowsWithPinnedRows(apiRef, rows) {
-  const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
-  return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
-}
-export const getLeftColumnIndex = ({
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findNonRowSpannedCell = findNonRowSpannedCell;
+exports.getRightColumnIndex = exports.getLeftColumnIndex = void 0;
+var _gridFilterSelector = require("../filter/gridFilterSelector");
+var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
+const getLeftColumnIndex = ({
   currentColIndex,
   firstColIndex,
   lastColIndex,
@@ -22,7 +24,8 @@ export const getLeftColumnIndex = ({
   }
   return null;
 };
-export const getRightColumnIndex = ({
+exports.getLeftColumnIndex = getLeftColumnIndex;
+const getRightColumnIndex = ({
   currentColIndex,
   firstColIndex,
   lastColIndex,
@@ -39,12 +42,13 @@ export const getRightColumnIndex = ({
   }
   return null;
 };
-export function findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection) {
-  const rowSpanHiddenCells = gridRowSpanningHiddenCellsSelector(apiRef);
+exports.getRightColumnIndex = getRightColumnIndex;
+function findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection) {
+  const rowSpanHiddenCells = (0, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsSelector)(apiRef);
   if (!rowSpanHiddenCells[rowId]?.[field]) {
     return rowId;
   }
-  const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+  const filteredSortedRowIds = (0, _gridFilterSelector.gridFilteredSortedRowIdsSelector)(apiRef);
   // find closest non row spanned cell in the given `rowSpanScanDirection`
   let nextRowIndex = filteredSortedRowIds.indexOf(rowId) + (rowSpanScanDirection === 'down' ? 1 : -1);
   while (nextRowIndex >= 0 && nextRowIndex < filteredSortedRowIds.length) {

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

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

package/hooks/features/listView/gridListViewSelectors.js

@@ -1,6 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridListColumnSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
 /**
  * Get the list column definition
  * @category List View
  * @ignore - Do not document
  */
-export const gridListColumnSelector = state => state.listViewColumn;
+const gridListColumnSelector = exports.gridListColumnSelector = (0, _createSelector.createRootSelector)(state => state.listViewColumn);

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

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

package/hooks/features/listView/index.js

@@ -1 +1,16 @@
-export * from "./gridListViewSelectors.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _gridListViewSelectors = require("./gridListViewSelectors");
+Object.keys(_gridListViewSelectors).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridListViewSelectors[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridListViewSelectors[key];
+    }
+  });
+});

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

@@ -1,10 +1,10 @@
 import { RefObject } from '@mui/x-internals/types';
 import type { GridListColDef } from '../../../models/colDef/gridColDef';
-import { GridStateInitializer } from '../../utils/useGridInitializeState';
-import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+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;
+  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;
+export declare function useGridListView(apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_listView' | 'unstable_listColumn'>): void;

package/hooks/features/listView/useGridListView.js

@@ -1,14 +1,25 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { warnOnce } from '@mui/x-internals/warning';
-import { gridDimensionsSelector } from "../dimensions/index.js";
-import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
-export const listViewStateInitializer = (state, props, apiRef) => _extends({}, state, {
-  listViewColumn: props.unstable_listColumn ? _extends({}, props.unstable_listColumn, {
+"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.listViewStateInitializer = void 0;
+exports.useGridListView = useGridListView;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _warning = require("@mui/x-internals/warning");
+var _dimensions = require("../dimensions");
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+const listViewStateInitializer = (state, props, apiRef) => (0, _extends2.default)({}, state, {
+  listViewColumn: props.unstable_listColumn ? (0, _extends2.default)({}, props.unstable_listColumn, {
     computedWidth: getListColumnWidth(apiRef)
   }) : undefined
 });
-export function useGridListView(apiRef, props) {
+exports.listViewStateInitializer = listViewStateInitializer;
+function useGridListView(apiRef, props) {
   /*
    * EVENTS
    */
@@ -17,8 +28,8 @@ export function useGridListView(apiRef, props) {
       if (!state.listViewColumn) {
         return state;
       }
-      return _extends({}, state, {
-        listViewColumn: _extends({}, state.listViewColumn, {
+      return (0, _extends2.default)({}, state, {
+        listViewColumn: (0, _extends2.default)({}, state.listViewColumn, {
           computedWidth: getListColumnWidth(apiRef)
         })
       });
@@ -31,18 +42,18 @@ export function useGridListView(apiRef, props) {
       updateListColumnWidth();
     }
   };
-  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
-  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', updateListColumnWidth);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnVisibilityModelChange', updateListColumnWidth);
 
   /*
    * EFFECTS
    */
-  React.useEffect(() => {
+  (0, _useEnhancedEffect.default)(() => {
     const listColumn = props.unstable_listColumn;
     if (listColumn) {
       apiRef.current.setState(state => {
-        return _extends({}, state, {
-          listViewColumn: _extends({}, listColumn, {
+        return (0, _extends2.default)({}, state, {
+          listViewColumn: (0, _extends2.default)({}, listColumn, {
             computedWidth: getListColumnWidth(apiRef)
           })
         });
@@ -51,10 +62,10 @@ export function useGridListView(apiRef, props) {
   }, [apiRef, props.unstable_listColumn]);
   React.useEffect(() => {
     if (props.unstable_listView && !props.unstable_listColumn) {
-      warnOnce(['MUI X: The `unstable_listColumn` prop must be set if `unstable_listView` is enabled.', 'To fix, pass a column definition to the `unstable_listColumn` prop, e.g. `{ field: "example", renderCell: (params) => <div>{params.row.id}</div> }`.', 'For more details, see https://mui.com/x/react-data-grid/list-view/']);
+      (0, _warning.warnOnce)(['MUI X: The `unstable_listColumn` prop must be set if `unstable_listView` is enabled.', 'To fix, pass a column definition to the `unstable_listColumn` prop, e.g. `{ field: "example", renderCell: (params) => <div>{params.row.id}</div> }`.', 'For more details, see https://mui.com/x/react-data-grid/list-view/']);
     }
   }, [props.unstable_listView, props.unstable_listColumn]);
 }
 function getListColumnWidth(apiRef) {
-  return gridDimensionsSelector(apiRef.current.state).viewportInnerSize.width;
+  return (0, _dimensions.gridDimensionsSelector)(apiRef).viewportInnerSize.width;
 }

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { GridLoadingOverlayVariant } from '../../../components/GridLoadingOverlay';
+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;
-    };
-};
+  getOverlay: () => React.JSX.Element | null;
+  overlaysProps: {
+    overlayType: GridOverlayType;
+    loadingOverlayVariant: GridLoadingOverlayVariant | null;
+  };
+};

package/hooks/features/overlays/useGridOverlays.js

@@ -1,29 +1,43 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useGridSelector } from "../../utils/index.js";
-import { useGridApiContext } from "../../utils/useGridApiContext.js";
-import { useGridRootProps } from "../../utils/useGridRootProps.js";
-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";
+"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.useGridOverlays = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("../../utils");
+var _useGridApiContext = require("../../utils/useGridApiContext");
+var _useGridRootProps = require("../../utils/useGridRootProps");
+var _filter = require("../filter");
+var _rows = require("../rows");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+var _GridOverlays = require("../../../components/base/GridOverlays");
+var _columns = require("../columns");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
  */
-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 useGridOverlays = () => {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const totalRowCount = (0, _utils.useGridSelector)(apiRef, _rows.gridRowCountSelector);
+  const visibleRowCount = (0, _utils.useGridSelector)(apiRef, _filter.gridExpandedRowCountSelector);
+  const pinnedRowsCount = (0, _utils.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsCountSelector);
+  const visibleColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisibleColumnDefinitionsSelector);
   const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
-  const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
+  const loading = (0, _utils.useGridSelector)(apiRef, _rows.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';
   }
@@ -32,7 +46,7 @@ export const useGridOverlays = () => {
   }
   if (loading) {
     overlayType = 'loadingOverlay';
-    loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] || null;
+    loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] ?? (noRows ? 'skeleton' : 'linear-progress');
   }
   const overlaysProps = {
     overlayType,
@@ -44,12 +58,13 @@ export const useGridOverlays = () => {
     }
     const Overlay = rootProps.slots?.[overlayType];
     const overlayProps = rootProps.slotProps?.[overlayType];
-    return /*#__PURE__*/_jsx(GridOverlayWrapper, _extends({}, overlaysProps, {
-      children: /*#__PURE__*/_jsx(Overlay, _extends({}, overlayProps))
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlayWrapper, (0, _extends2.default)({}, overlaysProps, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, overlayProps))
     }));
   };
   return {
     getOverlay,
     overlaysProps
   };
-};
+};
+exports.useGridOverlays = useGridOverlays;

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

@@ -1,59 +1,58 @@
-import { GridFeatureMode } from '../../../models/gridFeatureMode';
-import { GridPaginationMeta, GridPaginationModel } from '../../../models/gridPaginationProps';
+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;
+  paginationModel: GridPaginationModel;
+  rowCount: number;
+  meta: GridPaginationMeta;
+  enabled: boolean;
+  paginationMode: GridFeatureMode;
 }
 export interface GridPaginationInitialState {
-    paginationModel?: Partial<GridPaginationModel>;
-    rowCount?: number;
-    meta?: GridPaginationMeta;
+  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;
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * 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 {
-}
+export interface GridPaginationApi extends GridPaginationModelApi, GridPaginationRowCountApi, GridPaginationMetaApi {}

package/hooks/features/pagination/gridPaginationInterfaces.js

@@ -1 +1,5 @@
-export {};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -1,10 +1,10 @@
-import { GridStateCommunity } from '../../../models/gridStateCommunity';
-import { GridValidRowModel } from '../../../models/gridRows';
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import { GridRowId } from "../../../models/gridRows.js";
 /**
  * @category Pagination
  * @ignore - do not document.
  */
-export declare const gridPaginationSelector: (state: GridStateCommunity) => import("./gridPaginationInterfaces").GridPaginationState;
+export declare const gridPaginationSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridPaginationInterfaces").GridPaginationState>;
 /**
  * @category Pagination
  * @ignore - do not document.
@@ -44,36 +44,36 @@ export declare const gridPageCountSelector: import("../../..").OutputSelector<Gr
  * 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<GridValidRowModel>[], {
-    firstRowIndex: number;
-    lastRowIndex: number;
+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<GridValidRowModel>[]>;
+  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, import("../../..").GridRowId[]>;
+  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<GridValidRowModel>[], {
-    rows: import("../../..").GridRowEntry<GridValidRowModel>[];
-    range: {
-        firstRowIndex: number;
-        lastRowIndex: number;
-    } | null;
-    rowToIndexMap: Map<GridValidRowModel, number>;
-}>;
+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/hooks/features/pagination/gridPaginationSelector.js

@@ -1,62 +1,68 @@
-import { createSelector, 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";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridVisibleRowsSelector = exports.gridPaginationSelector = exports.gridPaginationRowRangeSelector = exports.gridPaginationRowCountSelector = exports.gridPaginationModelSelector = exports.gridPaginationMetaSelector = exports.gridPaginationEnabledClientSideSelector = exports.gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibleSortedGridRowEntriesSelector = exports.gridPageSizeSelector = exports.gridPageSelector = exports.gridPageCountSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
+var _gridFilterSelector = require("../filter/gridFilterSelector");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+var _gridPaginationUtils = require("./gridPaginationUtils");
 const ALL_RESULTS_PAGE_VALUE = -1;
 
 /**
  * @category Pagination
  * @ignore - do not document.
  */
-export const gridPaginationSelector = state => state.pagination;
+const gridPaginationSelector = exports.gridPaginationSelector = (0, _createSelector.createRootSelector)(state => state.pagination);
 
 /**
  * @category Pagination
  * @ignore - do not document.
  */
-export const gridPaginationEnabledClientSideSelector = createSelector(gridPaginationSelector, pagination => pagination.enabled && pagination.paginationMode === 'client');
+const gridPaginationEnabledClientSideSelector = exports.gridPaginationEnabledClientSideSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.enabled && pagination.paginationMode === 'client');
 
 /**
  * Get the pagination model
  * @category Pagination
  */
-export const gridPaginationModelSelector = createSelector(gridPaginationSelector, pagination => pagination.paginationModel);
+const gridPaginationModelSelector = exports.gridPaginationModelSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.paginationModel);
 
 /**
  * Get the row count
  * @category Pagination
  */
-export const gridPaginationRowCountSelector = createSelector(gridPaginationSelector, pagination => pagination.rowCount);
+const gridPaginationRowCountSelector = exports.gridPaginationRowCountSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.rowCount);
 
 /**
  * Get the pagination meta
  * @category Pagination
  */
-export const gridPaginationMetaSelector = createSelector(gridPaginationSelector, pagination => pagination.meta);
+const gridPaginationMetaSelector = exports.gridPaginationMetaSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.meta);
 
 /**
  * Get the index of the page to render if the pagination is enabled
  * @category Pagination
  */
-export const gridPageSelector = createSelector(gridPaginationModelSelector, paginationModel => paginationModel.page);
+const gridPageSelector = exports.gridPageSelector = (0, _createSelector.createSelector)(gridPaginationModelSelector, paginationModel => paginationModel.page);
 
 /**
  * Get the maximum amount of rows to display on a single page if the pagination is enabled
  * @category Pagination
  */
-export const gridPageSizeSelector = createSelector(gridPaginationModelSelector, paginationModel => paginationModel.pageSize);
+const gridPageSizeSelector = exports.gridPageSizeSelector = (0, _createSelector.createSelector)(gridPaginationModelSelector, paginationModel => paginationModel.pageSize);
 
 /**
  * Get the amount of pages needed to display all the rows if the pagination is enabled
  * @category Pagination
  */
-export const gridPageCountSelector = createSelector(gridPaginationModelSelector, gridPaginationRowCountSelector, (paginationModel, rowCount) => getPageCount(rowCount, paginationModel.pageSize, paginationModel.page));
+const gridPageCountSelector = exports.gridPageCountSelector = (0, _createSelector.createSelector)(gridPaginationModelSelector, gridPaginationRowCountSelector, (paginationModel, rowCount) => (0, _gridPaginationUtils.getPageCount)(rowCount, paginationModel.pageSize, paginationModel.page));
 
 /**
  * Get the index of the first and the last row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-export const gridPaginationRowRangeSelector = createSelectorMemoized(gridPaginationEnabledClientSideSelector, gridPaginationModelSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, gridExpandedSortedRowEntriesSelector, gridFilteredSortedTopLevelRowEntriesSelector, (clientSidePaginationEnabled, paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+const gridPaginationRowRangeSelector = exports.gridPaginationRowRangeSelector = (0, _createSelector.createSelectorMemoized)(gridPaginationEnabledClientSideSelector, gridPaginationModelSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, _gridFilterSelector.gridFilteredSortedTopLevelRowEntriesSelector, (clientSidePaginationEnabled, paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
   if (!clientSidePaginationEnabled) {
     return null;
   }
@@ -105,7 +111,7 @@ export const gridPaginationRowRangeSelector = createSelectorMemoized(gridPaginat
  * Get the id and the model of each row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-export const gridPaginatedVisibleSortedGridRowEntriesSelector = createSelectorMemoized(gridExpandedSortedRowEntriesSelector, gridPaginationRowRangeSelector, (visibleSortedRowEntries, paginationRange) => {
+const gridPaginatedVisibleSortedGridRowEntriesSelector = exports.gridPaginatedVisibleSortedGridRowEntriesSelector = (0, _createSelector.createSelectorMemoized)(_gridFilterSelector.gridExpandedSortedRowEntriesSelector, gridPaginationRowRangeSelector, (visibleSortedRowEntries, paginationRange) => {
   if (!paginationRange) {
     return [];
   }
@@ -116,7 +122,7 @@ export const gridPaginatedVisibleSortedGridRowEntriesSelector = createSelectorMe
  * Get the id of each row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-export const gridPaginatedVisibleSortedGridRowIdsSelector = createSelectorMemoized(gridExpandedSortedRowIdsSelector, gridPaginationRowRangeSelector, (visibleSortedRowIds, paginationRange) => {
+const gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibleSortedGridRowIdsSelector = (0, _createSelector.createSelectorMemoized)(_gridFilterSelector.gridExpandedSortedRowIdsSelector, gridPaginationRowRangeSelector, (visibleSortedRowIds, paginationRange) => {
   if (!paginationRange) {
     return [];
   }
@@ -128,13 +134,13 @@ export const gridPaginatedVisibleSortedGridRowIdsSelector = createSelectorMemoiz
  * Does not contain the collapsed children.
  * @category Pagination
  */
-export const gridVisibleRowsSelector = createSelectorMemoized(gridPaginationEnabledClientSideSelector, gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, gridExpandedSortedRowEntriesSelector, (clientPaginationEnabled, paginationRowRange, paginationRows, expandedSortedRowEntries) => {
+const gridVisibleRowsSelector = exports.gridVisibleRowsSelector = (0, _createSelector.createSelectorMemoized)(gridPaginationEnabledClientSideSelector, gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, (clientPaginationEnabled, paginationRowRange, paginationRows, expandedSortedRowEntries) => {
   if (clientPaginationEnabled) {
     return {
       rows: paginationRows,
       range: paginationRowRange,
-      rowToIndexMap: paginationRows.reduce((lookup, row, index) => {
-        lookup.set(row.model, index);
+      rowIdToIndexMap: paginationRows.reduce((lookup, row, index) => {
+        lookup.set(row.id, index);
         return lookup;
       }, new Map())
     };
@@ -145,8 +151,8 @@ export const gridVisibleRowsSelector = createSelectorMemoized(gridPaginationEnab
       firstRowIndex: 0,
       lastRowIndex: expandedSortedRowEntries.length - 1
     },
-    rowToIndexMap: expandedSortedRowEntries.reduce((lookup, row, index) => {
-      lookup.set(row.model, index);
+    rowIdToIndexMap: expandedSortedRowEntries.reduce((lookup, row, index) => {
+      lookup.set(row.id, index);
       return lookup;
     }, new Map())
   };

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

@@ -1,9 +1,9 @@
-import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+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;
+  page: number;
+  pageSize: number;
 };
 export declare const getValidPage: (page: number, pageCount?: number) => number;
-export declare const throwIfPageSizeExceedsTheLimit: (pageSize: number, signatureProp: DataGridProcessedProps["signature"]) => void;
+export declare const throwIfPageSizeExceedsTheLimit: (pageSize: number, signatureProp: DataGridProcessedProps["signature"]) => void;