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

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -4,12 +4,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id"],
   _excluded2 = ["id"];
 import * as React from 'react';
-import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { warnOnce } from '@mui/x-internals/warning';
 import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
 import { GridEditModes, GridRowModes } from "../../../models/gridEditRowModel.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
-import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
+import { gridEditRowsStateSelector, gridRowIsEditingSelector } from "./gridEditingSelectors.js";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
 import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
 import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
@@ -21,6 +22,7 @@ export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
+  const prevRowValuesLookup = React.useRef({});
   const focusTimeout = React.useRef(undefined);
   const nextFocusedCell = React.useRef(null);
   const {
@@ -46,7 +48,7 @@ export const useGridRowEditing = (apiRef, props) => {
     }
   }, [apiRef]);
   const hasFieldsWithErrors = React.useCallback(rowId => {
-    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    const editingState = gridEditRowsStateSelector(apiRef);
     return Object.values(editingState[rowId]).some(fieldProps => fieldProps.error);
   }, [apiRef]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
@@ -232,11 +234,10 @@ export const useGridRowEditing = (apiRef, props) => {
   useGridApiOptionHandler(apiRef, 'rowEditStart', props.onRowEditStart);
   useGridApiOptionHandler(apiRef, 'rowEditStop', props.onRowEditStop);
   const getRowMode = React.useCallback(id => {
-    if (props.editMode === GridEditModes.Cell) {
-      return GridRowModes.View;
-    }
-    const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
+    const isEditing = gridRowIsEditingSelector(apiRef, {
+      rowId: id,
+      editMode: props.editMode
+    });
     return isEditing ? GridRowModes.Edit : GridRowModes.View;
   }, [apiRef, props.editMode]);
   const updateRowModesModel = useEventCallback(newModel => {
@@ -274,7 +275,6 @@ export const useGridRowEditing = (apiRef, props) => {
         editRows: newEditingState
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef]);
   const updateOrDeleteFieldState = React.useCallback((id, field, newProps) => {
     apiRef.current.setState(state => {
@@ -293,7 +293,6 @@ export const useGridRowEditing = (apiRef, props) => {
         editRows: newEditingState
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef]);
   const startRowEditMode = React.useCallback(params => {
     const {
@@ -312,6 +311,7 @@ export const useGridRowEditing = (apiRef, props) => {
       deleteValue,
       initialValue
     } = params;
+    const row = apiRef.current.getRow(id);
     const columnFields = gridColumnFieldsSelector(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
       const cellParams = apiRef.current.getCellParams(id, field);
@@ -334,6 +334,7 @@ export const useGridRowEditing = (apiRef, props) => {
       };
       return acc;
     }, {});
+    prevRowValuesLookup.current[id] = row;
     updateOrDeleteRowState(id, newProps);
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
@@ -344,13 +345,13 @@ export const useGridRowEditing = (apiRef, props) => {
       const newValue = deleteValue ? getDefaultCellValue(column) : initialValue ?? value;
       Promise.resolve(column.preProcessEditCellProps({
         id,
-        row: apiRef.current.getRow(id),
+        row,
         props: newProps[field],
         hasChanged: newValue !== value
       })).then(processedProps => {
         // Check if still in edit mode before updating
         if (apiRef.current.getRowMode(id) === GridRowModes.Edit) {
-          const editingState = gridEditRowsStateSelector(apiRef.current.state);
+          const editingState = gridEditRowsStateSelector(apiRef);
           updateOrDeleteFieldState(id, field, _extends({}, processedProps, {
             value: editingState[id][field].value,
             isProcessingProps: false
@@ -383,13 +384,14 @@ export const useGridRowEditing = (apiRef, props) => {
       }
       updateOrDeleteRowState(id, null);
       updateRowInRowModesModel(id, null);
+      delete prevRowValuesLookup.current[id];
     };
     if (ignoreModifications) {
       finishRowEditMode();
       return;
     }
-    const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    const row = apiRef.current.getRow(id);
+    const editingState = gridEditRowsStateSelector(apiRef);
+    const row = prevRowValuesLookup.current[id];
     const isSomeFieldProcessingProps = Object.values(editingState[id]).some(fieldProps => fieldProps.isProcessingProps);
     if (isSomeFieldProcessingProps) {
       prevRowModesModel.current[id].mode = GridRowModes.Edit;
@@ -403,14 +405,17 @@ export const useGridRowEditing = (apiRef, props) => {
       });
       return;
     }
-    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
+    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(row.id);
     if (processRowUpdate) {
       const handleError = errorThrown => {
-        prevRowModesModel.current[id].mode = GridRowModes.Edit;
-        // Revert the mode in the rowModesModel prop back to "edit"
-        updateRowInRowModesModel(id, {
-          mode: GridRowModes.Edit
-        });
+        // The row might have been deleted
+        if (prevRowModesModel.current[id]) {
+          prevRowModesModel.current[id].mode = GridRowModes.Edit;
+          // Revert the mode in the rowModesModel prop back to "edit"
+          updateRowInRowModesModel(id, {
+            mode: GridRowModes.Edit
+          });
+        }
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
@@ -447,7 +452,7 @@ export const useGridRowEditing = (apiRef, props) => {
     if (column.valueParser && !skipValueParser) {
       parsedValue = column.valueParser(value, row, column, apiRef);
     }
-    let editingState = gridEditRowsStateSelector(apiRef.current.state);
+    let editingState = gridEditRowsStateSelector(apiRef);
     let newProps = _extends({}, editingState[id][field], {
       value: parsedValue,
       changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue'
@@ -478,7 +483,7 @@ export const useGridRowEditing = (apiRef, props) => {
             resolve(false);
             return;
           }
-          editingState = gridEditRowsStateSelector(apiRef.current.state);
+          editingState = gridEditRowsStateSelector(apiRef);
           processedProps = _extends({}, processedProps, {
             isProcessingProps: false
           });
@@ -502,7 +507,7 @@ export const useGridRowEditing = (apiRef, props) => {
           isProcessingProps: true
         });
         updateOrDeleteFieldState(id, thisField, fieldProps);
-        editingState = gridEditRowsStateSelector(apiRef.current.state);
+        editingState = gridEditRowsStateSelector(apiRef);
         const _editingState$id2 = editingState[id],
           otherFieldsProps = _objectWithoutPropertiesLoose(_editingState$id2, [thisField].map(_toPropertyKey));
         const promise = Promise.resolve(fieldColumn.preProcessEditCellProps({
@@ -527,7 +532,7 @@ export const useGridRowEditing = (apiRef, props) => {
       });
       Promise.all(promises).then(() => {
         if (apiRef.current.getRowMode(id) === GridRowModes.Edit) {
-          editingState = gridEditRowsStateSelector(apiRef.current.state);
+          editingState = gridEditRowsStateSelector(apiRef);
           resolve(!editingState[id][field].error);
         } else {
           resolve(false);
@@ -536,15 +541,17 @@ export const useGridRowEditing = (apiRef, props) => {
     });
   }, [apiRef, throwIfNotEditable, updateOrDeleteFieldState]);
   const getRowWithUpdatedValuesFromRowEditing = React.useCallback(id => {
-    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    const editingState = gridEditRowsStateSelector(apiRef);
     const row = apiRef.current.getRow(id);
     if (!editingState[id]) {
       return apiRef.current.getRow(id);
     }
-    let rowUpdate = _extends({}, row);
+    let rowUpdate = _extends({}, prevRowValuesLookup.current[id], row);
     Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
       const column = apiRef.current.getColumn(field);
-      if (column.valueSetter) {
+      // Column might have been removed
+      // see https://github.com/mui/mui-x/pull/16888
+      if (column?.valueSetter) {
         rowUpdate = column.valueSetter(fieldProps.value, rowUpdate, column, apiRef);
       } else {
         rowUpdate[field] = fieldProps.value;
@@ -583,7 +590,7 @@ export const useGridRowEditing = (apiRef, props) => {
         mode: GridRowModes.View
       };
       const prevMode = copyOfPrevRowModesModel[id]?.mode || GridRowModes.View;
-      const originalId = apiRef.current.getRowId(rowsLookup[id]) ?? id;
+      const originalId = rowsLookup[id] ? apiRef.current.getRowId(rowsLookup[id]) : id;
       if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {
         updateStateToStartRowEditMode(_extends({
           id: originalId

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

@@ -0,0 +1,2 @@
+import { GridColDef } from "../../../models/colDef/gridColDef.js";
+export declare const getDefaultCellValue: (colDef: GridColDef) => false | "" | null | undefined;

package/modern/hooks/features/events/useGridEvents.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+/**
+ * @requires useGridFocus (event) - can be after, async only
+ * @requires useGridColumns (event) - can be after, async only
+ */
+export declare function useGridEvents(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderContextMenu' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onPreferencePanelClose' | 'onPreferencePanelOpen' | 'onRowDoubleClick' | 'onRowClick' | 'onStateChange' | 'onMenuOpen' | 'onMenuClose'>): void;

package/modern/hooks/features/export/serializers/csvSerializer.d.ts

@@ -0,0 +1,19 @@
+import { RefObject } from '@mui/x-internals/types';
+import type { GridCsvExportOptions, GridRowId } from '../../../../models';
+import type { GridCellParams } from '../../../../models/params/gridCellParams';
+import type { GridStateColDef } from '../../../../models/colDef/gridColDef';
+import type { GridApiCommunity } from '../../../../models/api/gridApiCommunity';
+export declare const serializeCellValue: (cellParams: GridCellParams, options: {
+  csvOptions: CSVOptions;
+  ignoreValueFormatter: boolean;
+}) => string;
+type CSVOptions = Required<Pick<GridCsvExportOptions, 'delimiter' | 'shouldAppendQuotes' | 'escapeFormulas'>>;
+interface BuildCSVOptions {
+  columns: GridStateColDef[];
+  rowIds: GridRowId[];
+  csvOptions: Required<Pick<GridCsvExportOptions, 'delimiter' | 'includeColumnGroupsHeaders' | 'includeHeaders' | 'shouldAppendQuotes' | 'escapeFormulas'>>;
+  ignoreValueFormatter: boolean;
+  apiRef: RefObject<GridApiCommunity>;
+}
+export declare function buildCSV(options: BuildCSVOptions): string;
+export {};

package/modern/hooks/features/export/useGridCsvExport.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+/**
+ * @requires useGridColumns (state)
+ * @requires useGridFilter (state)
+ * @requires useGridSorting (state)
+ * @requires useGridSelection (state)
+ * @requires useGridParamsApi (method)
+ */
+export declare const useGridCsvExport: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "ignoreValueFormatterDuringExport">) => void;

package/modern/hooks/features/export/useGridPrintExport.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";
+/**
+ * @requires useGridColumns (state)
+ * @requires useGridFilter (state)
+ * @requires useGridSorting (state)
+ * @requires useGridParamsApi (method)
+ */
+export declare const useGridPrintExport: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "columnHeaderHeight" | "headerFilterHeight">) => void;

package/modern/hooks/features/export/useGridPrintExport.js

@@ -94,7 +94,7 @@ export const useGridPrintExport = (apiRef, props) => {
     if (!printDoc) {
       return;
     }
-    const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
+    const rowsMeta = gridRowsMetaSelector(apiRef);
     const gridRootElement = apiRef.current.rootElementRef.current;
     const gridClone = gridRootElement.cloneNode(true);
 
@@ -106,12 +106,13 @@ export const useGridPrintExport = (apiRef, props) => {
     gridClone.style.contain = 'size';
     let gridToolbarElementHeight = gridRootElement.querySelector(`.${gridClasses.toolbarContainer}`)?.offsetHeight || 0;
     let gridFooterElementHeight = gridRootElement.querySelector(`.${gridClasses.footerContainer}`)?.offsetHeight || 0;
+    const gridFooterElement = gridClone.querySelector(`.${gridClasses.footerContainer}`);
     if (normalizeOptions.hideToolbar) {
       gridClone.querySelector(`.${gridClasses.toolbarContainer}`)?.remove();
       gridToolbarElementHeight = 0;
     }
-    if (normalizeOptions.hideFooter) {
-      gridClone.querySelector(`.${gridClasses.footerContainer}`)?.remove();
+    if (normalizeOptions.hideFooter && gridFooterElement) {
+      gridFooterElement.remove();
       gridFooterElementHeight = 0;
     }
 
@@ -120,11 +121,10 @@ export const useGridPrintExport = (apiRef, props) => {
     gridClone.style.height = `${computedTotalHeight}px`;
     // The height above does not include grid border width, so we need to exclude it
     gridClone.style.boxSizing = 'content-box';
-    if (!normalizeOptions.hideFooter) {
+    if (!normalizeOptions.hideFooter && gridFooterElement) {
       // the footer is always being placed at the bottom of the page as if all rows are exported
       // so if getRowsToExport is being used to only export a subset of rows then we need to
       // adjust the footer position to be correctly placed at the bottom of the grid
-      const gridFooterElement = gridClone.querySelector(`.${gridClasses.footerContainer}`);
       gridFooterElement.style.position = 'absolute';
       gridFooterElement.style.width = '100%';
       gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;

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

@@ -0,0 +1,20 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { GridExportOptions, GridCsvGetRowsToExportParams } from "../../../models/gridExport.js";
+import { GridStateColDef } from "../../../models/colDef/gridColDef.js";
+import { GridRowId } from "../../../models/index.js";
+interface GridGetColumnsToExportParams {
+  /**
+   * The API of the grid.
+   */
+  apiRef: RefObject<GridApiCommunity>;
+  options: GridExportOptions;
+}
+export declare const getColumnsToExport: ({
+  apiRef,
+  options
+}: GridGetColumnsToExportParams) => GridStateColDef[];
+export declare const defaultGetRowsToExport: ({
+  apiRef
+}: GridCsvGetRowsToExportParams) => GridRowId[];
+export {};

package/modern/hooks/features/export/utils.js

@@ -1,6 +1,7 @@
 import { gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector } from "../columns/index.js";
 import { gridFilteredSortedRowIdsSelector } from "../filter/index.js";
 import { gridPinnedRowsSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
+import { gridRowSelectionCountSelector, gridRowSelectionIdsSelector } from "../rowSelection/gridRowSelectionSelector.js";
 export const getColumnsToExport = ({
   apiRef,
   options
@@ -23,14 +24,15 @@ export const defaultGetRowsToExport = ({
 }) => {
   const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
   const rowTree = gridRowTreeSelector(apiRef);
-  const selectedRows = apiRef.current.getSelectedRows();
+  const selectedRowsCount = gridRowSelectionCountSelector(apiRef);
   const bodyRows = filteredSortedRowIds.filter(id => rowTree[id].type !== 'footer');
   const pinnedRows = gridPinnedRowsSelector(apiRef);
   const topPinnedRowsIds = pinnedRows?.top?.map(row => row.id) || [];
   const bottomPinnedRowsIds = pinnedRows?.bottom?.map(row => row.id) || [];
   bodyRows.unshift(...topPinnedRowsIds);
   bodyRows.push(...bottomPinnedRowsIds);
-  if (selectedRows.size > 0) {
+  if (selectedRowsCount > 0) {
+    const selectedRows = gridRowSelectionIdsSelector(apiRef);
     return bodyRows.filter(id => selectedRows.has(id));
   }
   return bodyRows;

package/modern/hooks/features/filter/gridFilterSelector.d.ts

@@ -0,0 +1,103 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import { GridRowId } from "../../../models/gridRows.js";
+import { GridFilterItem } from "../../../models/gridFilterItem.js";
+/**
+ * Get the current filter model.
+ * @category Filtering
+ */
+export declare const gridFilterModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFilterState").GridFilterState, import("../../..").GridFilterModel>;
+/**
+ * Get the current quick filter values.
+ * @category Filtering
+ */
+export declare const gridQuickFilterValuesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridFilterModel, any[] | undefined>;
+/**
+ * @category Visible rows
+ * @ignore - do not document.
+ */
+export declare const gridVisibleRowsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridFilterState").GridVisibleRowsLookupState>;
+/**
+ * @category Filtering
+ * @ignore - do not document.
+ */
+export declare const gridFilteredRowsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFilterState").GridFilterState, Record<GridRowId, false>>;
+/**
+ * @category Filtering
+ * @ignore - do not document.
+ */
+export declare const gridFilteredChildrenCountLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFilterState").GridFilterState, Record<GridRowId, number>>;
+/**
+ * @category Filtering
+ * @ignore - do not document.
+ */
+export declare const gridFilteredDescendantCountLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridFilterState").GridFilterState, Record<GridRowId, number>>;
+/**
+ * Get the id and the model of the rows accessible after the filtering process.
+ * Does not contain the collapsed children.
+ * @category Filtering
+ */
+export declare const gridExpandedSortedRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+/**
+ * Get the id of the rows accessible after the filtering process.
+ * Does not contain the collapsed children.
+ * @category Filtering
+ */
+export declare const gridExpandedSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], GridRowId[]>;
+/**
+ * Get the id and the model of the rows accessible after the filtering process.
+ * Contains the collapsed children.
+ * @category Filtering
+ */
+export declare const gridFilteredSortedRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+/**
+ * Get the id of the rows accessible after the filtering process.
+ * Contains the collapsed children.
+ * @category Filtering
+ */
+export declare const gridFilteredSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], GridRowId[]>;
+/**
+ * Get the ids to position in the current tree level lookup of the rows accessible after the filtering process.
+ * Does not contain the collapsed children.
+ * @category Filtering
+ * @ignore - do not document.
+ */
+export declare const gridExpandedSortedRowTreeLevelPositionLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig, Record<GridRowId, number>>;
+/**
+ * Get the id and the model of the top level rows accessible after the filtering process.
+ * @category Filtering
+ */
+export declare const gridFilteredSortedTopLevelRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, number, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+/**
+ * Get the amount of rows accessible after the filtering process.
+ * @category Filtering
+ */
+export declare const gridExpandedRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], number>;
+/**
+ * Get the amount of top level rows accessible after the filtering process.
+ * @category Filtering
+ */
+export declare const gridFilteredTopLevelRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], number>;
+/**
+ * Get the amount of rows accessible after the filtering process.
+ * Includes top level and descendant rows.
+ * @category Filtering
+ */
+export declare const gridFilteredRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], number>;
+/**
+ * Get the amount of descendant rows accessible after the filtering process.
+ * @category Filtering
+ */
+export declare const gridFilteredDescendantRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number, number>;
+/**
+ * @category Filtering
+ * @ignore - do not document.
+ */
+export declare const gridFilterActiveItemsSelector: import("../../..").OutputSelector<GridStateCommunity, import("..").GridColumnLookup, GridFilterItem[]>;
+export type GridFilterActiveItemsLookup = {
+  [field: string]: GridFilterItem[];
+};
+/**
+ * @category Filtering
+ * @ignore - do not document.
+ */
+export declare const gridFilterActiveItemsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridFilterItem[], GridFilterActiveItemsLookup>;

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

@@ -1,4 +1,5 @@
-import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+import { isObjectEmpty } from '@mui/x-internals/isObjectEmpty';
+import { createSelector, createRootSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
 import { gridSortedRowEntriesSelector } from "../sorting/gridSortingSelector.js";
 import { gridColumnLookupSelector } from "../columns/gridColumnsSelector.js";
 import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
@@ -6,7 +7,7 @@ import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gr
 /**
  * @category Filtering
  */
-const gridFilterStateSelector = state => state.filter;
+const gridFilterStateSelector = createRootSelector(state => state.filter);
 
 /**
  * Get the current filter model.
@@ -24,7 +25,7 @@ export const gridQuickFilterValuesSelector = createSelector(gridFilterModelSelec
  * @category Visible rows
  * @ignore - do not document.
  */
-export const gridVisibleRowsLookupSelector = state => state.visibleRowsLookup;
+export const gridVisibleRowsLookupSelector = createRootSelector(state => state.visibleRowsLookup);
 
 /**
  * @category Filtering
@@ -49,8 +50,8 @@ export const gridFilteredDescendantCountLookupSelector = createSelector(gridFilt
  * Does not contain the collapsed children.
  * @category Filtering
  */
-export const gridExpandedSortedRowEntriesSelector = createSelectorMemoized(gridVisibleRowsLookupSelector, gridSortedRowEntriesSelector, gridRowMaximumTreeDepthSelector, gridFilterModelSelector, gridQuickFilterValuesSelector, (visibleRowsLookup, sortedRows, maxDepth, filterModel, quickFilterValues) => {
-  if (maxDepth < 2 && !filterModel.items.length && !quickFilterValues?.length) {
+export const gridExpandedSortedRowEntriesSelector = createSelectorMemoized(gridVisibleRowsLookupSelector, gridSortedRowEntriesSelector, (visibleRowsLookup, sortedRows) => {
+  if (isObjectEmpty(visibleRowsLookup)) {
     return sortedRows;
   }
   return sortedRows.filter(row => visibleRowsLookup[row.id] !== false);
@@ -68,7 +69,7 @@ export const gridExpandedSortedRowIdsSelector = createSelectorMemoized(gridExpan
  * Contains the collapsed children.
  * @category Filtering
  */
-export const gridFilteredSortedRowEntriesSelector = createSelectorMemoized(gridFilteredRowsLookupSelector, gridSortedRowEntriesSelector, (filteredRowsLookup, sortedRows) => sortedRows.filter(row => filteredRowsLookup[row.id] !== false));
+export const gridFilteredSortedRowEntriesSelector = createSelectorMemoized(gridFilteredRowsLookupSelector, gridSortedRowEntriesSelector, (filteredRowsLookup, sortedRows) => isObjectEmpty(filteredRowsLookup) ? sortedRows : sortedRows.filter(row => filteredRowsLookup[row.id] !== false));
 
 /**
  * Get the id of the rows accessible after the filtering process.

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

@@ -0,0 +1,61 @@
+import { GridFilterItem } from "../../../models/gridFilterItem.js";
+import { GridFilterModel } from "../../../models/gridFilterModel.js";
+import { GridRowId, GridValidRowModel } from "../../../models/gridRows.js";
+export type GridFilterItemResult = {
+  [key: Required<GridFilterItem>['id']]: boolean;
+};
+export type GridQuickFilterValueResult = {
+  [key: string]: boolean;
+};
+export declare const defaultGridFilterLookup: {
+  filteredRowsLookup: {};
+  filteredChildrenCountLookup: {};
+  filteredDescendantCountLookup: {};
+};
+export declare const getDefaultGridFilterModel: () => GridFilterModel;
+export interface GridFilterState {
+  filterModel: GridFilterModel;
+  /**
+   * Filtering status for each row.
+   * A row is filtered if it is passing the filters, whether its parents are expanded or not.
+   * All the rows are filtered except the ones registered in this lookup with `false` values.
+   * This is the equivalent of the `visibleRowsLookup` if all the groups were expanded.
+   */
+  filteredRowsLookup: Record<GridRowId, false>;
+  /**
+   * Amount of children that are passing the filters or have children that are passing the filter (does not count grand children).
+   * If a row is not registered in this lookup, it is supposed to have no descendant passing the filters.
+   * If `GridDataSource` is being used to load the data, the value is `-1` if there are some children but the count is unknown.
+   */
+  filteredChildrenCountLookup: Record<GridRowId, number>;
+  /**
+   * Amount of descendants that are passing the filters.
+   * For the Tree Data, it includes all the intermediate depth levels (= amount of children + amount of grand children + ...).
+   * For the Row grouping by column, it does not include the intermediate depth levels (= amount of descendant of maximum depth).
+   * If a row is not registered in this lookup, it is supposed to have no descendant passing the filters.
+   */
+  filteredDescendantCountLookup: Record<GridRowId, number>;
+}
+export interface GridFilterInitialState {
+  filterModel?: GridFilterModel;
+}
+export interface GridAggregatedFilterItemApplierResult {
+  passingFilterItems: null | GridFilterItemResult;
+  passingQuickFilterValues: null | GridQuickFilterValueResult;
+}
+/**
+ * @param {GridRowId} rowId The id of the row we want to filter.
+ * @param {(filterItem: GridFilterItem) => boolean} shouldApplyItem An optional callback to allow the filtering engine to only apply some items.
+ */
+export type GridAggregatedFilterItemApplier = (row: GridValidRowModel, shouldApplyItem: ((field: string) => boolean) | undefined, result: GridAggregatedFilterItemApplierResult) => void;
+export interface GridFilteringMethodParams {
+  isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
+  filterModel: GridFilterModel;
+}
+export type GridFilteringMethodValue = Omit<GridFilterState, 'filterModel'>;
+/**
+ * Visibility status for each row.
+ * A row is visible if it is passing the filters AND if its parents are expanded.
+ * If a row is not registered in this lookup, it is visible.
+ */
+export type GridVisibleRowsLookupState = Record<GridRowId, false>;

package/modern/hooks/features/filter/gridFilterState.js

@@ -1,4 +1,9 @@
 import { GridLogicOperator } from "../../../models/gridFilterItem.js";
+export const defaultGridFilterLookup = {
+  filteredRowsLookup: {},
+  filteredChildrenCountLookup: {},
+  filteredDescendantCountLookup: {}
+};
 export const getDefaultGridFilterModel = () => ({
   items: [],
   logicOperator: GridLogicOperator.And,

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

@@ -0,0 +1,23 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridFilterItem, GridFilterModel } from "../../../models/index.js";
+import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterValueResult } from "./gridFilterState.js";
+/**
+ * Adds default values to the optional fields of a filter items.
+ * @param {GridFilterItem} item The raw filter item.
+ * @param {RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operator.
+ * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
+ */
+export declare const cleanFilterItem: (item: GridFilterItem, apiRef: RefObject<GridPrivateApiCommunity>) => GridFilterItem;
+export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: RefObject<GridPrivateApiCommunity>) => GridFilterModel;
+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;
+type FilterCache = {
+  cleanedFilterItems?: GridFilterItem[];
+};
+export declare const passFilterLogic: (allFilterItemResults: (null | GridFilterItemResult)[], allQuickFilterResults: (null | GridQuickFilterValueResult)[], filterModel: GridFilterModel, apiRef: RefObject<GridPrivateApiCommunity>, cache: FilterCache) => boolean;
+export {};

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

@@ -10,6 +10,7 @@ function getHasEval() {
     return hasEval;
   }
   try {
+    // eslint-disable-next-line no-new-func
     hasEval = new Function('return true')();
   } catch (_) {
     hasEval = false;
@@ -160,6 +161,7 @@ const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) =>
 
   // We generate a new function with `new Function()` to avoid expensive patterns for JS engines
   // such as a dynamic object assignment, for example `{ [dynamicKey]: value }`.
+  // eslint-disable-next-line no-new-func
   const filterItemCore = new Function('appliers', 'row', 'shouldApplyFilter', `"use strict";
 ${appliers.map((applier, i) => `const shouldApply${i} = !shouldApplyFilter || shouldApplyFilter(${JSON.stringify(applier.item.field)});`).join('\n')}
 

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

@@ -0,0 +1,4 @@
+export type { GridFilterState, GridFilterInitialState } from './gridFilterState';
+export { getDefaultGridFilterModel } from "./gridFilterState.js";
+export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector } from "./gridFilterSelector.js";
+export type { GridFilterActiveItemsLookup } from './gridFilterSelector';

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

@@ -0,0 +1,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";
+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;