@mui/x-data-grid 8.11.3 → 8.12.1

package/esm/hooks/features/filter/gridFilterSelector.js

@@ -107,16 +107,33 @@ export const gridExpandedSortedRowTreeLevelPositionLookupSelector = createSelect
 });
 
 /**
- * Get the id and the model of the top level rows accessible after the filtering process.
+ * Get the id and the model of the rows per depth level, accessible after the filtering process.
+ * Returns an array of arrays, where each array index contains the rows for the depth level equal to the index.
  * @category Filtering
  */
-export const gridFilteredSortedTopLevelRowEntriesSelector = createSelectorMemoized(gridExpandedSortedRowEntriesSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, (visibleSortedRows, rowTree, rowTreeDepth) => {
+export const gridFilteredSortedDepthRowEntriesSelector = createSelectorMemoized(gridFilteredSortedRowEntriesSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, (sortedRows, rowTree, rowTreeDepth) => {
   if (rowTreeDepth < 2) {
-    return visibleSortedRows;
+    return [sortedRows];
   }
-  return visibleSortedRows.filter(row => rowTree[row.id]?.depth === 0);
+  return sortedRows.reduce((acc, row) => {
+    const depth = rowTree[row.id]?.depth;
+    if (depth === undefined) {
+      return acc;
+    }
+    if (!acc[depth]) {
+      acc[depth] = [];
+    }
+    acc[depth].push(row);
+    return acc;
+  }, [[]]);
 });
 
+/**
+ * Get the id and the model of the top level rows accessible after the filtering process.
+ * @category Filtering
+ */
+export const gridFilteredSortedTopLevelRowEntriesSelector = createSelector(gridFilteredSortedDepthRowEntriesSelector, filteredSortedDepthRows => filteredSortedDepthRows[0] ?? []);
+
 /**
  * Get the amount of rows accessible after the filtering process.
  * @category Filtering

package/esm/hooks/features/filter/gridFilterState.d.ts

@@ -1,6 +1,7 @@
 import { GridFilterItem } from "../../../models/gridFilterItem.js";
 import { GridFilterModel } from "../../../models/gridFilterModel.js";
-import { GridRowId, GridValidRowModel } from "../../../models/gridRows.js";
+import { GridRowId, GridRowModel, GridValidRowModel } from "../../../models/gridRows.js";
+import { GridColDef } from "../../../models/colDef/index.js";
 export type GridFilterItemResult = {
   [key: Required<GridFilterItem>['id']]: boolean;
 };
@@ -52,6 +53,7 @@ export type GridAggregatedFilterItemApplier = (row: GridValidRowModel, shouldApp
 export interface GridFilteringMethodParams {
   isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
   filterModel: GridFilterModel;
+  filterValueGetter: (row: GridRowModel, column: GridColDef) => any;
 }
 export type GridFilteringMethodValue = Omit<GridFilterState, 'filterModel'>;
 /**

package/esm/hooks/features/filter/gridFilterUtils.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridFilterItem, GridFilterModel } from "../../../models/index.js";
+import { GridColDef, GridFilterItem, GridFilterModel, GridRowModel } from "../../../models/index.js";
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
 import { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterValueResult } from "./gridFilterState.js";
@@ -15,9 +15,9 @@ export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultip
 export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: RefObject<GridPrivateApiCommunity>) => (filteringState: GridStateCommunity["filter"]) => GridStateCommunity["filter"];
 export declare const removeDiacritics: (value: unknown) => unknown;
 export declare const shouldQuickFilterExcludeHiddenColumns: (filterModel: GridFilterModel) => boolean;
-export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, apiRef: RefObject<GridPrivateApiCommunity>, disableEval: boolean) => GridAggregatedFilterItemApplier;
+export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, filterValueGetter: (row: GridRowModel, column: GridColDef) => any, apiRef: RefObject<GridPrivateApiCommunity>, disableEval: boolean) => GridAggregatedFilterItemApplier;
 type FilterCache = {
   cleanedFilterItems?: GridFilterItem[];
 };
-export declare const passFilterLogic: (allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel, apiRef: RefObject<GridPrivateApiCommunity>, cache: FilterCache) => boolean;
+export declare const passFilterLogic: (allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel, filterValueGetter: (row: GridRowModel, column: GridColDef) => any, apiRef: RefObject<GridPrivateApiCommunity>, cache: FilterCache) => boolean;
 export {};

package/esm/hooks/features/filter/gridFilterUtils.js

@@ -81,7 +81,7 @@ export const removeDiacritics = value => {
   }
   return value;
 };
-const getFilterCallbackFromItem = (filterItem, apiRef) => {
+const getFilterCallbackFromItem = (filterItem, filterValueGetter, apiRef) => {
   if (!filterItem.field || !filterItem.operator) {
     return null;
   }
@@ -121,7 +121,7 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
   return {
     item: newFilterItem,
     fn: row => {
-      let value = apiRef.current.getRowValue(row, column);
+      let value = filterValueGetter(row, column);
       if (ignoreDiacritics) {
         value = removeDiacritics(value);
       }
@@ -132,16 +132,21 @@ const getFilterCallbackFromItem = (filterItem, apiRef) => {
 let filterItemsApplierId = 1;
 
 /**
+ * @name filterValueGetter
+ * @param {GridRowModel} row The row to get the value from.
+ * @param {GridColDef} column The column that the filter is applied on.
+ *
  * Generates a method to easily check if a row is matching the current filter model.
  * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
+ * @param {FilterValueGetterFn} filterValueGetter The function to get the value to filter by.
  * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
-const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) => {
+const buildAggregatedFilterItemsApplier = (filterModel, filterValueGetter, apiRef, disableEval) => {
   const {
     items
   } = filterModel;
-  const appliers = items.map(item => getFilterCallbackFromItem(item, apiRef)).filter(callback => !!callback);
+  const appliers = items.map(item => getFilterCallbackFromItem(item, filterValueGetter, apiRef)).filter(callback => !!callback);
   if (appliers.length === 0) {
     return null;
   }
@@ -181,12 +186,17 @@ export const shouldQuickFilterExcludeHiddenColumns = filterModel => {
 };
 
 /**
+ * @name filterValueGetter
+ * @param {GridRowModel} row The row to get the value from.
+ * @param {GridColDef} column The column that the filter is applied on.
+ *
  * Generates a method to easily check if a row is matching the current quick filter.
  * @param {any[]} filterModel The model with which we want to filter the rows.
+ * @param {FilterValueGetterFn} filterValueGetter The function to get the value to filter by.
  * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
-const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
+const buildAggregatedQuickFilterApplier = (filterModel, filterValueGetter, apiRef) => {
   const quickFilterValues = filterModel.quickFilterValues?.filter(Boolean) ?? [];
   if (quickFilterValues.length === 0) {
     return null;
@@ -239,7 +249,7 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
           continue;
         }
         const applier = appliers[v];
-        let value = apiRef.current.getRowValue(row, column);
+        let value = filterValueGetter(row, column);
         if (applier.fn === null) {
           continue;
         }
@@ -257,23 +267,23 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
     return result;
   };
 };
-export const buildAggregatedFilterApplier = (filterModel, apiRef, disableEval) => {
-  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef, disableEval);
-  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
+export const buildAggregatedFilterApplier = (filterModel, filterValueGetter, apiRef, disableEval) => {
+  const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, filterValueGetter, apiRef, disableEval);
+  const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, filterValueGetter, apiRef);
   return function isRowMatchingFilters(row, shouldApplyFilter, result) {
     result.passingFilterItems = isRowMatchingFilterItems?.(row, shouldApplyFilter) ?? null;
     result.passingQuickFilterValues = isRowMatchingQuickFilter?.(row, shouldApplyFilter) ?? null;
   };
 };
 const isNotNull = result => result != null;
-const filterModelItems = (cache, apiRef, items) => {
+const filterModelItems = (cache, filterValueGetter, apiRef, items) => {
   if (!cache.cleanedFilterItems) {
-    cache.cleanedFilterItems = items.filter(item => getFilterCallbackFromItem(item, apiRef) !== null);
+    cache.cleanedFilterItems = items.filter(item => getFilterCallbackFromItem(item, filterValueGetter, apiRef) !== null);
   }
   return cache.cleanedFilterItems;
 };
-export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef, cache) => {
-  const cleanedFilterItems = filterModelItems(cache, apiRef, filterModel.items);
+export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, filterValueGetter, apiRef, cache) => {
+  const cleanedFilterItems = filterModelItems(cache, filterValueGetter, apiRef, filterModel.items);
   const cleanedFilterItemResults = allFilterItemResults.filter(isNotNull);
   const cleanedQuickFilterResults = allQuickFilterResults.filter(isNotNull);
 

package/esm/hooks/features/filter/useGridFilter.d.ts

@@ -2,10 +2,11 @@ import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+import type { GridConfiguration } from "../../../models/configuration/gridConfiguration.js";
 export declare const filterStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'filterModel' | 'initialState' | 'disableMultipleColumnsFiltering'>>;
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics">) => void;
+export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics">, configuration: GridConfiguration) => void;

package/esm/hooks/features/filter/useGridFilter.js

@@ -45,7 +45,7 @@ function createMemoizedValues() {
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export const useGridFilter = (apiRef, props) => {
+export const useGridFilter = (apiRef, props, configuration) => {
   const logger = useGridLogger(apiRef, 'useGridFilter');
   apiRef.current.registerControlState({
     stateId: 'filter',
@@ -195,15 +195,17 @@ export const useGridFilter = (apiRef, props) => {
   }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
   const getFilterState = React.useCallback(inputFilterModel => {
     const filterModel = sanitizeFilterModel(inputFilterModel, props.disableMultipleColumnsFiltering, apiRef);
-    const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, apiRef, props.disableEval) : null;
+    const filterValueGetter = configuration.hooks.useFilterValueGetter(apiRef, props);
+    const isRowMatchingFilters = props.filterMode === 'client' ? buildAggregatedFilterApplier(filterModel, filterValueGetter, apiRef, props.disableEval) : null;
     const filterResult = apiRef.current.applyStrategyProcessor('filtering', {
       isRowMatchingFilters,
-      filterModel: filterModel ?? getDefaultGridFilterModel()
+      filterModel: filterModel ?? getDefaultGridFilterModel(),
+      filterValueGetter
     });
     return _extends({}, filterResult, {
       filterModel
     });
-  }, [props.disableMultipleColumnsFiltering, props.filterMode, props.disableEval, apiRef]);
+  }, [apiRef, configuration.hooks, props]);
   const filterApi = {
     setFilterLogicOperator,
     unstable_applyFilters: updateFilteredRows,
@@ -287,7 +289,7 @@ export const useGridFilter = (apiRef, props) => {
       const row = rows[i];
       const id = getRowId ? getRowId(row) : row.id;
       isRowMatchingFilters(row, undefined, result);
-      const isRowPassing = passFilterLogic([result.passingFilterItems], [result.passingQuickFilterValues], params.filterModel, apiRef, filterCache);
+      const isRowPassing = passFilterLogic([result.passingFilterItems], [result.passingQuickFilterValues], params.filterModel, params.filterValueGetter, apiRef, filterCache);
       if (!isRowPassing) {
         filteredRowsLookup[id] = isRowPassing;
       }

package/esm/hooks/features/rows/gridRowsSelector.d.ts

@@ -40,6 +40,9 @@ export declare const gridRowTreeDepthsSelector: (args_0: import("react").RefObje
 export declare const gridRowMaximumTreeDepthSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
 } | null>) => number;
+/**
+ * @category Rows
+ */
 export declare const gridDataRowIdsSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
 } | null>) => GridRowId[];

package/esm/hooks/features/rows/gridRowsSelector.js

@@ -27,6 +27,10 @@ export const gridRowMaximumTreeDepthSelector = createSelectorMemoized(gridRowsSt
   }
   return (entries.filter(([, nodeCount]) => nodeCount > 0).map(([depth]) => Number(depth)).sort((a, b) => b - a)[0] ?? 0) + 1;
 });
+
+/**
+ * @category Rows
+ */
 export const gridDataRowIdsSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIds);
 export const gridDataRowsSelector = createSelectorMemoized(gridDataRowIdsSelector, gridRowsLookupSelector, (dataRowIds, rowsLookup) => dataRowIds.reduce((acc, id) => {
   if (!rowsLookup[id]) {

package/esm/hooks/features/rows/useGridParamsApi.js

@@ -37,10 +37,22 @@ export function useGridParamsApi(apiRef, props) {
     colDef,
     hasFocus,
     rowNode,
-    tabIndex
+    tabIndex,
+    value: forcedValue,
+    formattedValue: forcedFormattedValue
   }) => {
-    const rawValue = row[field];
-    const value = colDef?.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
+    let value = row[field];
+    if (forcedValue !== undefined) {
+      value = forcedValue;
+    } else if (colDef?.valueGetter) {
+      value = colDef.valueGetter(value, row, colDef, apiRef);
+    }
+    let formattedValue = value;
+    if (forcedFormattedValue !== undefined) {
+      formattedValue = forcedFormattedValue;
+    } else if (colDef?.valueFormatter) {
+      formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
+    }
     const params = {
       id,
       field,
@@ -51,13 +63,10 @@ export function useGridParamsApi(apiRef, props) {
       hasFocus,
       tabIndex,
       value,
-      formattedValue: value,
+      formattedValue,
       isEditable: false,
       api: apiRef.current
     };
-    if (colDef && colDef.valueFormatter) {
-      params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);
-    }
     params.isEditable = colDef && apiRef.current.isCellEditable(params);
     return params;
   }, [apiRef]);

package/esm/hooks/features/sorting/gridSortingUtils.d.ts

@@ -1,5 +1,6 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridSortingModelApplier } from "./gridSortingState.js";
+import type { GridRowId } from "../../../models/index.js";
 import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
 import { GridComparatorFn, GridSortDirection, GridSortModel } from "../../../models/gridSortModel.js";
@@ -8,10 +9,11 @@ export declare const mergeStateWithSortModel: (sortModel: GridSortModel, disable
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
+ * @param {Function} sortValueGetter A function to get the value to sort by.
  * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
-export declare const buildAggregatedSortingApplier: (sortModel: GridSortModel, apiRef: RefObject<GridApiCommunity>) => GridSortingModelApplier | null;
+export declare const buildAggregatedSortingApplier: (sortModel: GridSortModel, sortValueGetter: (id: GridRowId, field: string) => any, apiRef: RefObject<GridApiCommunity>) => GridSortingModelApplier | null;
 export declare const getNextGridSortDirection: (sortingOrder: readonly GridSortDirection[], current?: GridSortDirection) => GridSortDirection;
 export declare const gridStringOrNumberComparator: GridComparatorFn;
 export declare const gridNumberComparator: GridComparatorFn;

package/esm/hooks/features/sorting/gridSortingUtils.js

@@ -18,12 +18,17 @@ export const mergeStateWithSortModel = (sortModel, disableMultipleColumnsSorting
 const isDesc = direction => direction === 'desc';
 
 /**
+ * @name sortValueGetter
+ * @param {GridRowId} id The id of the row.
+ * @param {string} field The field to sort by.
+ *
  * Transform an item of the sorting model into a method comparing two rows.
  * @param {GridSortItem} sortItem The sort item we want to apply.
+ * @param {Function} sortValueGetter A function to get the value to sort by.
  * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid.
  */
-const parseSortItem = (sortItem, apiRef) => {
+const parseSortItem = (sortItem, sortValueGetter, apiRef) => {
   const column = apiRef.current.getColumn(sortItem.field);
   if (!column || sortItem.sort === null) {
     return null;
@@ -41,7 +46,7 @@ const parseSortItem = (sortItem, apiRef) => {
     id,
     field: column.field,
     rowNode: gridRowNodeSelector(apiRef, id),
-    value: apiRef.current.getCellValue(id, column.field),
+    value: sortValueGetter(id, column.field),
     api: apiRef.current
   });
   return {
@@ -73,11 +78,12 @@ const compareRows = (parsedSortItems, row1, row2) => {
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
+ * @param {Function} sortValueGetter A function to get the value to sort by.
  * @param {RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
-export const buildAggregatedSortingApplier = (sortModel, apiRef) => {
-  const comparatorList = sortModel.map(item => parseSortItem(item, apiRef)).filter(comparator => !!comparator);
+export const buildAggregatedSortingApplier = (sortModel, sortValueGetter, apiRef) => {
+  const comparatorList = sortModel.map(item => parseSortItem(item, sortValueGetter, apiRef)).filter(comparator => !!comparator);
   if (comparatorList.length === 0) {
     return null;
   }

package/esm/hooks/features/sorting/useGridSorting.d.ts

@@ -2,9 +2,10 @@ import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+import type { GridConfiguration } from "../../../models/configuration/gridConfiguration.js";
 export declare const sortingStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'sortModel' | 'initialState' | 'disableMultipleColumnsSorting'>>;
 /**
  * @requires useGridRows (event)
  * @requires useGridColumns (event)
  */
-export declare const useGridSorting: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting" | "multipleColumnsSortingMode">) => void;
+export declare const useGridSorting: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting" | "multipleColumnsSortingMode">, configuration: GridConfiguration) => void;

package/esm/hooks/features/sorting/useGridSorting.js

@@ -26,7 +26,7 @@ export const sortingStateInitializer = (state, props) => {
  * @requires useGridRows (event)
  * @requires useGridColumns (event)
  */
-export const useGridSorting = (apiRef, props) => {
+export const useGridSorting = (apiRef, props, configuration) => {
   const logger = useGridLogger(apiRef, 'useGridSorting');
   apiRef.current.registerControlState({
     stateId: 'sortModel',
@@ -79,6 +79,7 @@ export const useGridSorting = (apiRef, props) => {
    * API METHODS
    */
   const applySorting = React.useCallback(() => {
+    const sortValueGetter = configuration.hooks.useSortValueGetter(apiRef);
     apiRef.current.setState(state => {
       if (props.sortingMode === 'server') {
         logger.debug('Skipping sorting rows as sortingMode = server');
@@ -89,7 +90,7 @@ export const useGridSorting = (apiRef, props) => {
         });
       }
       const sortModel = gridSortModelSelector(apiRef);
-      const sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
+      const sortRowList = buildAggregatedSortingApplier(sortModel, sortValueGetter, apiRef);
       const sortedRows = apiRef.current.applyStrategyProcessor('sorting', {
         sortRowList
       });
@@ -100,7 +101,7 @@ export const useGridSorting = (apiRef, props) => {
       });
     });
     apiRef.current.publishEvent('sortedRowsSet');
-  }, [apiRef, logger, props.sortingMode]);
+  }, [apiRef, logger, configuration, props.sortingMode]);
   const setSortModel = React.useCallback(model => {
     const currentModel = gridSortModelSelector(apiRef);
     if (currentModel !== model) {

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.11.3
+ * @mui/x-data-grid v8.12.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/index.d.ts

@@ -41,7 +41,7 @@ export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.
 export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
 export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.js";
 export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.js";
-export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridExpandedSortedRowIndexLookupSelector } from "../hooks/features/filter/gridFilterSelector.js";
+export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridExpandedSortedRowIndexLookupSelector, gridFilteredSortedDepthRowEntriesSelector } from "../hooks/features/filter/gridFilterSelector.js";
 export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
 export type { GridAggregatedFilterItemApplier, GridAggregatedFilterItemApplierResult } from "../hooks/features/filter/gridFilterState.js";
 export { useGridFocus, focusStateInitializer } from "../hooks/features/focus/useGridFocus.js";

package/esm/internals/index.js

@@ -31,7 +31,7 @@ export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.
 export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
 export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.js";
 export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.js";
-export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridExpandedSortedRowIndexLookupSelector } from "../hooks/features/filter/gridFilterSelector.js";
+export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridExpandedSortedRowIndexLookupSelector, gridFilteredSortedDepthRowEntriesSelector } from "../hooks/features/filter/gridFilterSelector.js";
 export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
 export { useGridFocus, focusStateInitializer } from "../hooks/features/focus/useGridFocus.js";
 export { useGridKeyboardNavigation } from "../hooks/features/keyboardNavigation/useGridKeyboardNavigation.js";

package/esm/locales/arSD.js

@@ -35,6 +35,9 @@ const arSDGrid = {
   // Toolbar pivot button
   // toolbarPivot: 'Pivot',
 
+  // Toolbar charts button
+  // toolbarCharts: 'Charts',
+
   // Toolbar AI Assistant button
   // toolbarAssistant: 'AI Assistant',
 
@@ -116,6 +119,7 @@ const arSDGrid = {
   columnMenuSortAsc: 'الفرز تصاعدياً',
   columnMenuSortDesc: 'الفرز تنازلياً',
   // columnMenuManagePivot: 'Manage pivot',
+  // columnMenuManageCharts: 'Manage charts',
 
   // Column header text
   columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} من المرشِحات النشطة` : `مرشِح نشط`,
@@ -185,6 +189,7 @@ const arSDGrid = {
   rowReorderingHeaderName: 'أعادة ترتيب الصفوف',
   // Aggregation
   aggregationMenuItemHeader: 'الدلالات الحسابية',
+  // aggregationFunctionLabelNone: 'none',
   aggregationFunctionLabelSum: 'مجموع',
   aggregationFunctionLabelAvg: 'معدل',
   aggregationFunctionLabelMin: 'الحد الادنى',
@@ -220,6 +225,32 @@ const arSDGrid = {
   // pivotYearColumnHeaderName: '(Year)',
   // pivotQuarterColumnHeaderName: '(Quarter)',
 
+  // Charts configuration panel
+  // chartsNoCharts: 'There are no charts available',
+  // chartsChartNotSelected: 'Select a chart type to configure its options',
+  // chartsTabChart: 'Chart',
+  // chartsTabFields: 'Fields',
+  // chartsTabCustomize: 'Customize',
+  // chartsCloseButton: 'Close charts configuration',
+  // chartsSyncButtonLabel: 'Sync chart',
+  // chartsSearchPlaceholder: 'Search fields',
+  // chartsSearchLabel: 'Search fields',
+  // chartsSearchClear: 'Clear search',
+  // chartsNoFields: 'No fields',
+  // chartsFieldBlocked: 'This field cannot be added to any section',
+  // chartsCategories: 'Categories',
+  // chartsSeries: 'Series',
+  // chartsMenuAddToDimensions: (dimensionLabel: string) => `Add to ${dimensionLabel}`,
+  // chartsMenuAddToValues: (valuesLabel: string) => `Add to ${valuesLabel}`,
+  // chartsMenuMoveUp: 'Move up',
+  // chartsMenuMoveDown: 'Move down',
+  // chartsMenuMoveToTop: 'Move to top',
+  // chartsMenuMoveToBottom: 'Move to bottom',
+  // chartsMenuOptions: 'Field options',
+  // chartsMenuRemove: 'Remove',
+  // chartsDragToDimensions: (dimensionLabel: string) => `Drag here to use column as ${dimensionLabel}`,
+  // chartsDragToValues: (valuesLabel: string) => `Drag here to use column as ${valuesLabel}`,
+
   // AI Assistant panel
   // aiAssistantPanelTitle: 'AI Assistant',
   // aiAssistantPanelClose: 'Close AI Assistant',

package/esm/locales/beBY.js

@@ -49,6 +49,9 @@ const beBYGrid = {
   // Toolbar pivot button
   // toolbarPivot: 'Pivot',
 
+  // Toolbar charts button
+  // toolbarCharts: 'Charts',
+
   // Toolbar AI Assistant button
   // toolbarAssistant: 'AI Assistant',
 
@@ -132,6 +135,7 @@ const beBYGrid = {
   columnMenuSortAsc: 'Сартыраваць па нарастанню',
   columnMenuSortDesc: 'Сартыраваць па спаданню',
   // columnMenuManagePivot: 'Manage pivot',
+  // columnMenuManageCharts: 'Manage charts',
 
   // Column header text
   columnHeaderFiltersTooltipActive: count => getPluralForm(count, {
@@ -209,6 +213,7 @@ const beBYGrid = {
   rowReorderingHeaderName: 'Змяненне чарговасці радкоў',
   // Aggregation
   aggregationMenuItemHeader: "Аб'яднанне дадзеных",
+  // aggregationFunctionLabelNone: 'none',
   aggregationFunctionLabelSum: 'сума',
   aggregationFunctionLabelAvg: 'сярэдняе',
   aggregationFunctionLabelMin: 'мінімум',
@@ -244,6 +249,32 @@ const beBYGrid = {
   // pivotYearColumnHeaderName: '(Year)',
   // pivotQuarterColumnHeaderName: '(Quarter)',
 
+  // Charts configuration panel
+  // chartsNoCharts: 'There are no charts available',
+  // chartsChartNotSelected: 'Select a chart type to configure its options',
+  // chartsTabChart: 'Chart',
+  // chartsTabFields: 'Fields',
+  // chartsTabCustomize: 'Customize',
+  // chartsCloseButton: 'Close charts configuration',
+  // chartsSyncButtonLabel: 'Sync chart',
+  // chartsSearchPlaceholder: 'Search fields',
+  // chartsSearchLabel: 'Search fields',
+  // chartsSearchClear: 'Clear search',
+  // chartsNoFields: 'No fields',
+  // chartsFieldBlocked: 'This field cannot be added to any section',
+  // chartsCategories: 'Categories',
+  // chartsSeries: 'Series',
+  // chartsMenuAddToDimensions: (dimensionLabel: string) => `Add to ${dimensionLabel}`,
+  // chartsMenuAddToValues: (valuesLabel: string) => `Add to ${valuesLabel}`,
+  // chartsMenuMoveUp: 'Move up',
+  // chartsMenuMoveDown: 'Move down',
+  // chartsMenuMoveToTop: 'Move to top',
+  // chartsMenuMoveToBottom: 'Move to bottom',
+  // chartsMenuOptions: 'Field options',
+  // chartsMenuRemove: 'Remove',
+  // chartsDragToDimensions: (dimensionLabel: string) => `Drag here to use column as ${dimensionLabel}`,
+  // chartsDragToValues: (valuesLabel: string) => `Drag here to use column as ${valuesLabel}`,
+
   // AI Assistant panel
   // aiAssistantPanelTitle: 'AI Assistant',
   // aiAssistantPanelClose: 'Close AI Assistant',

package/esm/locales/bgBG.js

@@ -35,6 +35,9 @@ const bgBGGrid = {
   // Toolbar pivot button
   // toolbarPivot: 'Pivot',
 
+  // Toolbar charts button
+  // toolbarCharts: 'Charts',
+
   // Toolbar AI Assistant button
   // toolbarAssistant: 'AI Assistant',
 
@@ -117,6 +120,7 @@ const bgBGGrid = {
   columnMenuSortAsc: 'Сортирай по възходящ ред',
   columnMenuSortDesc: 'Сортирай по низходящ ред',
   // columnMenuManagePivot: 'Manage pivot',
+  // columnMenuManageCharts: 'Manage charts',
 
   // Column header text
   columnHeaderFiltersTooltipActive: count => `${count} активни филтри`,
@@ -186,6 +190,7 @@ const bgBGGrid = {
   rowReorderingHeaderName: 'Подредба на редове',
   // Aggregation
   aggregationMenuItemHeader: 'Агрегиране',
+  // aggregationFunctionLabelNone: 'none',
   aggregationFunctionLabelSum: 'сума',
   aggregationFunctionLabelAvg: 'срст',
   aggregationFunctionLabelMin: 'мин',
@@ -221,6 +226,32 @@ const bgBGGrid = {
   // pivotYearColumnHeaderName: '(Year)',
   // pivotQuarterColumnHeaderName: '(Quarter)',
 
+  // Charts configuration panel
+  // chartsNoCharts: 'There are no charts available',
+  // chartsChartNotSelected: 'Select a chart type to configure its options',
+  // chartsTabChart: 'Chart',
+  // chartsTabFields: 'Fields',
+  // chartsTabCustomize: 'Customize',
+  // chartsCloseButton: 'Close charts configuration',
+  // chartsSyncButtonLabel: 'Sync chart',
+  // chartsSearchPlaceholder: 'Search fields',
+  // chartsSearchLabel: 'Search fields',
+  // chartsSearchClear: 'Clear search',
+  // chartsNoFields: 'No fields',
+  // chartsFieldBlocked: 'This field cannot be added to any section',
+  // chartsCategories: 'Categories',
+  // chartsSeries: 'Series',
+  // chartsMenuAddToDimensions: (dimensionLabel: string) => `Add to ${dimensionLabel}`,
+  // chartsMenuAddToValues: (valuesLabel: string) => `Add to ${valuesLabel}`,
+  // chartsMenuMoveUp: 'Move up',
+  // chartsMenuMoveDown: 'Move down',
+  // chartsMenuMoveToTop: 'Move to top',
+  // chartsMenuMoveToBottom: 'Move to bottom',
+  // chartsMenuOptions: 'Field options',
+  // chartsMenuRemove: 'Remove',
+  // chartsDragToDimensions: (dimensionLabel: string) => `Drag here to use column as ${dimensionLabel}`,
+  // chartsDragToValues: (valuesLabel: string) => `Drag here to use column as ${valuesLabel}`,
+
   // AI Assistant panel
   // aiAssistantPanelTitle: 'AI Assistant',
   // aiAssistantPanelClose: 'Close AI Assistant',