@mui/x-data-grid 9.8.0 → 9.10.0

package/components/panel/filterPanel/GridFilterPanel.js

@@ -1,197 +1,42 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getGridFilter = exports.GridFilterPanel = void 0;
+exports.GridFilterPanel = void 0;
+Object.defineProperty(exports, "getGridFilter", {
+  enumerable: true,
+  get: function () {
+    return _GridFilterPanelBase.getGridFilter;
+  }
+});
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
-var _gridFilterItem = require("../../../models/gridFilterItem");
 var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
-var _GridPanelContent = require("../GridPanelContent");
-var _GridPanelFooter = require("../GridPanelFooter");
-var _GridPanelWrapper = require("../GridPanelWrapper");
-var _GridFilterForm = require("./GridFilterForm");
-var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _useGridSelector = require("../../../hooks/utils/useGridSelector");
 var _gridFilterSelector = require("../../../hooks/features/filter/gridFilterSelector");
-var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsSelector");
+var _GridFilterPanelBase = require("./GridFilterPanelBase");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["logicOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children", "disableAddFilterButton", "disableRemoveAllButton"];
-const getGridFilter = col => ({
-  field: col.field,
-  operator: col.filterOperators[0].value,
-  id: Math.round(Math.random() * 1e5)
-});
-exports.getGridFilter = getGridFilter;
 const GridFilterPanel = exports.GridFilterPanel = (0, _forwardRef.forwardRef)(function GridFilterPanel(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
-  const filterableColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnDefinitionsSelector);
-  const filterableColumnsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnLookupSelector);
-  const lastFilterRef = React.useRef(null);
-  const placeholderFilter = React.useRef(null);
-  const {
-      logicOperators = [_gridFilterItem.GridLogicOperator.And, _gridFilterItem.GridLogicOperator.Or],
-      columnsSort,
-      filterFormProps,
-      getColumnForNewFilter,
-      disableAddFilterButton = false,
-      disableRemoveAllButton = false
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const applyFilter = apiRef.current.upsertFilterItem;
-  const applyFilterLogicOperator = React.useCallback(operator => {
-    apiRef.current.setFilterLogicOperator(operator);
+  const handleFilterModelChange = React.useCallback((model, reason) => {
+    apiRef.current.setFilterModel(model, reason);
   }, [apiRef]);
-  const getDefaultFilter = React.useCallback(() => {
-    let nextColumnWithOperator;
-    if (getColumnForNewFilter && typeof getColumnForNewFilter === 'function') {
-      // To allow override the column for default (first) filter
-      const nextFieldName = getColumnForNewFilter({
-        currentFilters: filterModel?.items || [],
-        columns: filterableColumns
-      });
-      if (nextFieldName === null) {
-        return null;
-      }
-      nextColumnWithOperator = filterableColumns.find(({
-        field
-      }) => field === nextFieldName);
-    } else {
-      nextColumnWithOperator = filterableColumns.find(colDef => colDef.filterOperators?.length);
-    }
-    if (!nextColumnWithOperator) {
-      return null;
-    }
-    return getGridFilter(nextColumnWithOperator);
-  }, [filterModel?.items, filterableColumns, getColumnForNewFilter]);
-  const getNewFilter = React.useCallback(() => {
-    if (getColumnForNewFilter === undefined || typeof getColumnForNewFilter !== 'function') {
-      return getDefaultFilter();
-    }
-    const currentFilters = filterModel.items.length ? filterModel.items : [getDefaultFilter()].filter(Boolean);
-
-    // If no items are there in filterModel, we have to pass defaultFilter
-    const nextColumnFieldName = getColumnForNewFilter({
-      currentFilters: currentFilters,
-      columns: filterableColumns
-    });
-    if (nextColumnFieldName === null) {
-      return null;
-    }
-    const nextColumnWithOperator = filterableColumns.find(({
-      field
-    }) => field === nextColumnFieldName);
-    if (!nextColumnWithOperator) {
-      return null;
-    }
-    return getGridFilter(nextColumnWithOperator);
-  }, [filterModel.items, filterableColumns, getColumnForNewFilter, getDefaultFilter]);
-  const items = React.useMemo(() => {
-    if (filterModel.items.length) {
-      return filterModel.items;
-    }
-    if (!placeholderFilter.current) {
-      placeholderFilter.current = getDefaultFilter();
-    }
-    return placeholderFilter.current ? [placeholderFilter.current] : [];
-  }, [filterModel.items, getDefaultFilter]);
-  const hasMultipleFilters = items.length > 1;
-  const {
-    readOnlyFilters,
-    validFilters
-  } = React.useMemo(() => items.reduce((acc, item) => {
-    if (filterableColumnsLookup[item.field]) {
-      acc.validFilters.push(item);
-    } else {
-      acc.readOnlyFilters.push(item);
-    }
-    return acc;
-  }, {
-    readOnlyFilters: [],
-    validFilters: []
-  }), [items, filterableColumnsLookup]);
-  const addNewFilter = React.useCallback(() => {
-    const newFilter = getNewFilter();
-    if (!newFilter) {
-      return;
-    }
-    apiRef.current.upsertFilterItems([...items, newFilter]);
-  }, [apiRef, getNewFilter, items]);
-  const deleteFilter = React.useCallback(item => {
-    const shouldCloseFilterPanel = validFilters.length === 1;
-    apiRef.current.deleteFilterItem(item);
-    if (shouldCloseFilterPanel) {
-      apiRef.current.hideFilterPanel();
-    }
-  }, [apiRef, validFilters.length]);
-  const handleRemoveAll = React.useCallback(() => {
-    if (validFilters.length === 1 && validFilters[0].value === undefined) {
-      apiRef.current.deleteFilterItem(validFilters[0]);
-      return apiRef.current.hideFilterPanel();
-    }
-    return apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
-      items: readOnlyFilters
-    }), 'removeAllFilterItems');
-  }, [apiRef, readOnlyFilters, filterModel, validFilters]);
-  React.useEffect(() => {
-    if (logicOperators.length > 0 && filterModel.logicOperator && !logicOperators.includes(filterModel.logicOperator)) {
-      applyFilterLogicOperator(logicOperators[0]);
-    }
-  }, [logicOperators, applyFilterLogicOperator, filterModel.logicOperator]);
-  React.useEffect(() => {
-    if (validFilters.length > 0) {
-      lastFilterRef.current.focus();
-    }
-  }, [validFilters.length]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({}, other, {
+  const handleClose = React.useCallback(() => {
+    apiRef.current.hideFilterPanel();
+  }, [apiRef]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterPanelBase.GridFilterPanelBase, (0, _extends2.default)({}, props, {
+    filterModel: filterModel,
+    onFilterModelChange: handleFilterModelChange,
+    onClose: handleClose,
     ref: ref,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelContent.GridPanelContent, {
-      children: [readOnlyFilters.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterForm.GridFilterForm, (0, _extends2.default)({
-        item: item,
-        applyFilterChanges: applyFilter,
-        deleteFilter: deleteFilter,
-        hasMultipleFilters: hasMultipleFilters,
-        showMultiFilterOperators: index > 0,
-        disableMultiFilterOperator: index !== 1,
-        applyMultiFilterOperatorChanges: applyFilterLogicOperator,
-        focusElementRef: null,
-        readOnly: true,
-        logicOperators: logicOperators,
-        columnsSort: columnsSort
-      }, filterFormProps), item.id == null ? index : item.id)), validFilters.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterForm.GridFilterForm, (0, _extends2.default)({
-        item: item,
-        applyFilterChanges: applyFilter,
-        deleteFilter: deleteFilter,
-        hasMultipleFilters: hasMultipleFilters,
-        showMultiFilterOperators: readOnlyFilters.length + index > 0,
-        disableMultiFilterOperator: readOnlyFilters.length + index !== 1,
-        applyMultiFilterOperatorChanges: applyFilterLogicOperator,
-        focusElementRef: index === validFilters.length - 1 ? lastFilterRef : null,
-        logicOperators: logicOperators,
-        columnsSort: columnsSort
-      }, filterFormProps), item.id == null ? index + readOnlyFilters.length : item.id))]
-    }), !rootProps.disableMultipleColumnsFiltering && !(disableAddFilterButton && disableRemoveAllButton) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelFooter.GridPanelFooter, {
-      children: [!disableAddFilterButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-        onClick: addNewFilter,
-        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.filterPanelAddIcon, {})
-      }, rootProps.slotProps?.baseButton, {
-        children: apiRef.current.getLocaleText('filterPanelAddFilter')
-      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), !disableRemoveAllButton && validFilters.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-        onClick: handleRemoveAll,
-        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.filterPanelRemoveAllIcon, {})
-      }, rootProps.slotProps?.baseButton, {
-        children: apiRef.current.getLocaleText('filterPanelRemoveAll')
-      })) : null]
-    }) : null]
+    disableDebounce: false
   }));
 });
 if (process.env.NODE_ENV !== "production") GridFilterPanel.displayName = "GridFilterPanel";

package/components/panel/filterPanel/GridFilterPanel.mjs

@@ -1,189 +1,29 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["logicOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children", "disableAddFilterButton", "disableRemoveAllButton"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { GridLogicOperator } from "../../../models/gridFilterItem.mjs";
 import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.mjs";
-import { GridPanelContent } from "../GridPanelContent.mjs";
-import { GridPanelFooter } from "../GridPanelFooter.mjs";
-import { GridPanelWrapper } from "../GridPanelWrapper.mjs";
-import { GridFilterForm } from "./GridFilterForm.mjs";
-import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.mjs";
 import { useGridSelector } from "../../../hooks/utils/useGridSelector.mjs";
 import { gridFilterModelSelector } from "../../../hooks/features/filter/gridFilterSelector.mjs";
-import { gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector } from "../../../hooks/features/columns/gridColumnsSelector.mjs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getGridFilter = col => ({
-  field: col.field,
-  operator: col.filterOperators[0].value,
-  id: Math.round(Math.random() * 1e5)
-});
+import { GridFilterPanelBase } from "./GridFilterPanelBase.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
 const GridFilterPanel = forwardRef(function GridFilterPanel(props, ref) {
   const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
-  const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
-  const filterableColumnsLookup = useGridSelector(apiRef, gridFilterableColumnLookupSelector);
-  const lastFilterRef = React.useRef(null);
-  const placeholderFilter = React.useRef(null);
-  const {
-      logicOperators = [GridLogicOperator.And, GridLogicOperator.Or],
-      columnsSort,
-      filterFormProps,
-      getColumnForNewFilter,
-      disableAddFilterButton = false,
-      disableRemoveAllButton = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const applyFilter = apiRef.current.upsertFilterItem;
-  const applyFilterLogicOperator = React.useCallback(operator => {
-    apiRef.current.setFilterLogicOperator(operator);
+  const handleFilterModelChange = React.useCallback((model, reason) => {
+    apiRef.current.setFilterModel(model, reason);
   }, [apiRef]);
-  const getDefaultFilter = React.useCallback(() => {
-    let nextColumnWithOperator;
-    if (getColumnForNewFilter && typeof getColumnForNewFilter === 'function') {
-      // To allow override the column for default (first) filter
-      const nextFieldName = getColumnForNewFilter({
-        currentFilters: filterModel?.items || [],
-        columns: filterableColumns
-      });
-      if (nextFieldName === null) {
-        return null;
-      }
-      nextColumnWithOperator = filterableColumns.find(({
-        field
-      }) => field === nextFieldName);
-    } else {
-      nextColumnWithOperator = filterableColumns.find(colDef => colDef.filterOperators?.length);
-    }
-    if (!nextColumnWithOperator) {
-      return null;
-    }
-    return getGridFilter(nextColumnWithOperator);
-  }, [filterModel?.items, filterableColumns, getColumnForNewFilter]);
-  const getNewFilter = React.useCallback(() => {
-    if (getColumnForNewFilter === undefined || typeof getColumnForNewFilter !== 'function') {
-      return getDefaultFilter();
-    }
-    const currentFilters = filterModel.items.length ? filterModel.items : [getDefaultFilter()].filter(Boolean);
-
-    // If no items are there in filterModel, we have to pass defaultFilter
-    const nextColumnFieldName = getColumnForNewFilter({
-      currentFilters: currentFilters,
-      columns: filterableColumns
-    });
-    if (nextColumnFieldName === null) {
-      return null;
-    }
-    const nextColumnWithOperator = filterableColumns.find(({
-      field
-    }) => field === nextColumnFieldName);
-    if (!nextColumnWithOperator) {
-      return null;
-    }
-    return getGridFilter(nextColumnWithOperator);
-  }, [filterModel.items, filterableColumns, getColumnForNewFilter, getDefaultFilter]);
-  const items = React.useMemo(() => {
-    if (filterModel.items.length) {
-      return filterModel.items;
-    }
-    if (!placeholderFilter.current) {
-      placeholderFilter.current = getDefaultFilter();
-    }
-    return placeholderFilter.current ? [placeholderFilter.current] : [];
-  }, [filterModel.items, getDefaultFilter]);
-  const hasMultipleFilters = items.length > 1;
-  const {
-    readOnlyFilters,
-    validFilters
-  } = React.useMemo(() => items.reduce((acc, item) => {
-    if (filterableColumnsLookup[item.field]) {
-      acc.validFilters.push(item);
-    } else {
-      acc.readOnlyFilters.push(item);
-    }
-    return acc;
-  }, {
-    readOnlyFilters: [],
-    validFilters: []
-  }), [items, filterableColumnsLookup]);
-  const addNewFilter = React.useCallback(() => {
-    const newFilter = getNewFilter();
-    if (!newFilter) {
-      return;
-    }
-    apiRef.current.upsertFilterItems([...items, newFilter]);
-  }, [apiRef, getNewFilter, items]);
-  const deleteFilter = React.useCallback(item => {
-    const shouldCloseFilterPanel = validFilters.length === 1;
-    apiRef.current.deleteFilterItem(item);
-    if (shouldCloseFilterPanel) {
-      apiRef.current.hideFilterPanel();
-    }
-  }, [apiRef, validFilters.length]);
-  const handleRemoveAll = React.useCallback(() => {
-    if (validFilters.length === 1 && validFilters[0].value === undefined) {
-      apiRef.current.deleteFilterItem(validFilters[0]);
-      return apiRef.current.hideFilterPanel();
-    }
-    return apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items: readOnlyFilters
-    }), 'removeAllFilterItems');
-  }, [apiRef, readOnlyFilters, filterModel, validFilters]);
-  React.useEffect(() => {
-    if (logicOperators.length > 0 && filterModel.logicOperator && !logicOperators.includes(filterModel.logicOperator)) {
-      applyFilterLogicOperator(logicOperators[0]);
-    }
-  }, [logicOperators, applyFilterLogicOperator, filterModel.logicOperator]);
-  React.useEffect(() => {
-    if (validFilters.length > 0) {
-      lastFilterRef.current.focus();
-    }
-  }, [validFilters.length]);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
+  const handleClose = React.useCallback(() => {
+    apiRef.current.hideFilterPanel();
+  }, [apiRef]);
+  return /*#__PURE__*/_jsx(GridFilterPanelBase, _extends({}, props, {
+    filterModel: filterModel,
+    onFilterModelChange: handleFilterModelChange,
+    onClose: handleClose,
     ref: ref,
-    children: [/*#__PURE__*/_jsxs(GridPanelContent, {
-      children: [readOnlyFilters.map((item, index) => /*#__PURE__*/_jsx(GridFilterForm, _extends({
-        item: item,
-        applyFilterChanges: applyFilter,
-        deleteFilter: deleteFilter,
-        hasMultipleFilters: hasMultipleFilters,
-        showMultiFilterOperators: index > 0,
-        disableMultiFilterOperator: index !== 1,
-        applyMultiFilterOperatorChanges: applyFilterLogicOperator,
-        focusElementRef: null,
-        readOnly: true,
-        logicOperators: logicOperators,
-        columnsSort: columnsSort
-      }, filterFormProps), item.id == null ? index : item.id)), validFilters.map((item, index) => /*#__PURE__*/_jsx(GridFilterForm, _extends({
-        item: item,
-        applyFilterChanges: applyFilter,
-        deleteFilter: deleteFilter,
-        hasMultipleFilters: hasMultipleFilters,
-        showMultiFilterOperators: readOnlyFilters.length + index > 0,
-        disableMultiFilterOperator: readOnlyFilters.length + index !== 1,
-        applyMultiFilterOperatorChanges: applyFilterLogicOperator,
-        focusElementRef: index === validFilters.length - 1 ? lastFilterRef : null,
-        logicOperators: logicOperators,
-        columnsSort: columnsSort
-      }, filterFormProps), item.id == null ? index + readOnlyFilters.length : item.id))]
-    }), !rootProps.disableMultipleColumnsFiltering && !(disableAddFilterButton && disableRemoveAllButton) ? /*#__PURE__*/_jsxs(GridPanelFooter, {
-      children: [!disableAddFilterButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        onClick: addNewFilter,
-        startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelAddIcon, {})
-      }, rootProps.slotProps?.baseButton, {
-        children: apiRef.current.getLocaleText('filterPanelAddFilter')
-      })) : /*#__PURE__*/_jsx("span", {}), !disableRemoveAllButton && validFilters.length > 0 ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        onClick: handleRemoveAll,
-        startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelRemoveAllIcon, {})
-      }, rootProps.slotProps?.baseButton, {
-        children: apiRef.current.getLocaleText('filterPanelRemoveAll')
-      })) : null]
-    }) : null]
+    disableDebounce: false
   }));
 });
 if (process.env.NODE_ENV !== "production") GridFilterPanel.displayName = "GridFilterPanel";
@@ -247,4 +87,5 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes /* remove-prop
  * API:
  * - [GridFilterPanel API](https://mui.com/x/api/data-grid/grid-filter-panel/)
  */
-export { GridFilterPanel, getGridFilter };
+export { GridFilterPanel };
+export { getGridFilter } from "./GridFilterPanelBase.mjs";

package/components/panel/filterPanel/GridFilterPanelBase.d.mts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { GridFilterItem } from "../../../models/gridFilterItem.mjs";
+import type { GridFilterModel } from "../../../models/gridFilterModel.mjs";
+import type { GridControlledStateReasonLookup } from "../../../models/events/index.mjs";
+import type { GridFilterFormProps } from "./GridFilterFormBase.mjs";
+import type { GridColDef, GridStateColDef } from "../../../models/colDef/gridColDef.mjs";
+export interface GetColumnForNewFilterArgs {
+  currentFilters: GridFilterItem[];
+  columns: GridStateColDef[];
+}
+export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'logicOperators' | 'columnsSort'> {
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Function that returns the next filter item to be picked as default filter.
+   * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
+   * @returns {GridColDef['field']} The field to be used for the next filter or `null` to prevent adding a filter.
+   */
+  getColumnForNewFilter?: (args: GetColumnForNewFilterArgs) => GridColDef['field'] | null;
+  /**
+   * Props passed to each filter form.
+   */
+  filterFormProps?: Pick<GridFilterFormProps, 'columnsSort' | 'deleteIconProps' | 'logicOperatorInputProps' | 'operatorInputProps' | 'columnInputProps' | 'valueInputProps' | 'filterColumns'>;
+  /**
+   * If `true`, the `Add filter` button will not be displayed.
+   * @default false
+   */
+  disableAddFilterButton?: boolean;
+  /**
+   * If `true`, the `Remove all` button will be disabled
+   * @default false
+   */
+  disableRemoveAllButton?: boolean;
+  /**
+   * @ignore - do not document.
+   */
+  children?: React.ReactNode;
+}
+export interface GridFilterPanelBaseProps extends GridFilterPanelProps {
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default true
+   */
+  disableDebounce?: boolean;
+  /**
+   * The filter model edited by the panel.
+   */
+  filterModel: GridFilterModel;
+  /**
+   * Callback fired when the filter model is changed through the panel.
+   * @param {GridFilterModel} model The new filter model.
+   * @param {GridControlledStateReasonLookup['filter']} reason The reason for the model to have changed.
+   */
+  onFilterModelChange: (model: GridFilterModel, reason?: GridControlledStateReasonLookup['filter']) => void;
+  /**
+   * Callback fired when the panel requests to be closed, e.g. after the last filter is removed.
+   * In `GridFilterPanel` it hides the grid filter panel; for standalone usage it is a no-op
+   * unless provided.
+   */
+  onClose?: () => void;
+}
+declare const getGridFilter: (col: GridStateColDef) => GridFilterItem;
+declare const GridFilterPanelBase: React.ForwardRefExoticComponent<GridFilterPanelBaseProps> | React.ForwardRefExoticComponent<GridFilterPanelBaseProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The lower-level filter panel used by `GridFilterPanel`.
+ * Unlike `GridFilterPanel`, it does not read or mutate the grid filter state — the model is
+ * provided through the `filterModel` prop and edits are reported through `onFilterModelChange`,
+ * which makes it usable with a controlled (draft) filter model.
+ *
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ *
+ * API:
+ * - [GridFilterPanelBase API](https://mui.com/x/api/data-grid/grid-filter-panel-base/)
+ */
+export { GridFilterPanelBase, getGridFilter };

package/components/panel/filterPanel/GridFilterPanelBase.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { GridFilterItem } from "../../../models/gridFilterItem.js";
+import type { GridFilterModel } from "../../../models/gridFilterModel.js";
+import type { GridControlledStateReasonLookup } from "../../../models/events/index.js";
+import type { GridFilterFormProps } from "./GridFilterFormBase.js";
+import type { GridColDef, GridStateColDef } from "../../../models/colDef/gridColDef.js";
+export interface GetColumnForNewFilterArgs {
+  currentFilters: GridFilterItem[];
+  columns: GridStateColDef[];
+}
+export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'logicOperators' | 'columnsSort'> {
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+  /**
+   * Function that returns the next filter item to be picked as default filter.
+   * @param {GetColumnForNewFilterArgs} args Currently configured filters and columns.
+   * @returns {GridColDef['field']} The field to be used for the next filter or `null` to prevent adding a filter.
+   */
+  getColumnForNewFilter?: (args: GetColumnForNewFilterArgs) => GridColDef['field'] | null;
+  /**
+   * Props passed to each filter form.
+   */
+  filterFormProps?: Pick<GridFilterFormProps, 'columnsSort' | 'deleteIconProps' | 'logicOperatorInputProps' | 'operatorInputProps' | 'columnInputProps' | 'valueInputProps' | 'filterColumns'>;
+  /**
+   * If `true`, the `Add filter` button will not be displayed.
+   * @default false
+   */
+  disableAddFilterButton?: boolean;
+  /**
+   * If `true`, the `Remove all` button will be disabled
+   * @default false
+   */
+  disableRemoveAllButton?: boolean;
+  /**
+   * @ignore - do not document.
+   */
+  children?: React.ReactNode;
+}
+export interface GridFilterPanelBaseProps extends GridFilterPanelProps {
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default true
+   */
+  disableDebounce?: boolean;
+  /**
+   * The filter model edited by the panel.
+   */
+  filterModel: GridFilterModel;
+  /**
+   * Callback fired when the filter model is changed through the panel.
+   * @param {GridFilterModel} model The new filter model.
+   * @param {GridControlledStateReasonLookup['filter']} reason The reason for the model to have changed.
+   */
+  onFilterModelChange: (model: GridFilterModel, reason?: GridControlledStateReasonLookup['filter']) => void;
+  /**
+   * Callback fired when the panel requests to be closed, e.g. after the last filter is removed.
+   * In `GridFilterPanel` it hides the grid filter panel; for standalone usage it is a no-op
+   * unless provided.
+   */
+  onClose?: () => void;
+}
+declare const getGridFilter: (col: GridStateColDef) => GridFilterItem;
+declare const GridFilterPanelBase: React.ForwardRefExoticComponent<GridFilterPanelBaseProps> | React.ForwardRefExoticComponent<GridFilterPanelBaseProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The lower-level filter panel used by `GridFilterPanel`.
+ * Unlike `GridFilterPanel`, it does not read or mutate the grid filter state — the model is
+ * provided through the `filterModel` prop and edits are reported through `onFilterModelChange`,
+ * which makes it usable with a controlled (draft) filter model.
+ *
+ * Demos:
+ * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
+ *
+ * API:
+ * - [GridFilterPanelBase API](https://mui.com/x/api/data-grid/grid-filter-panel-base/)
+ */
+export { GridFilterPanelBase, getGridFilter };