@mui/x-data-grid 9.8.0 → 9.10.0

package/components/panel/filterPanel/GridFilterPanelBase.js

@@ -0,0 +1,304 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getGridFilter = exports.GridFilterPanelBase = void 0;
+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 _GridFilterFormBase = require("./GridFilterFormBase");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _useGridSelector = require("../../../hooks/utils/useGridSelector");
+var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsSelector");
+var _gridFilterUtils = require("../../../hooks/features/filter/gridFilterUtils");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["logicOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children", "disableAddFilterButton", "disableRemoveAllButton", "disableDebounce", "filterModel", "onFilterModelChange", "onClose"];
+const getGridFilter = col => ({
+  field: col.field,
+  operator: col.filterOperators[0].value,
+  id: Math.round(Math.random() * 1e5)
+});
+exports.getGridFilter = getGridFilter;
+const GridFilterPanelBase = exports.GridFilterPanelBase = (0, _forwardRef.forwardRef)(function GridFilterPanelBase(props, ref) {
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  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,
+      disableDebounce = true,
+      filterModel,
+      onFilterModelChange,
+      onClose
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const applyFilter = React.useCallback(item => {
+    onFilterModelChange((0, _gridFilterUtils.upsertFilterItemInModel)(filterModel, item), 'upsertFilterItem');
+  }, [filterModel, onFilterModelChange]);
+  const applyFilterLogicOperator = React.useCallback(operator => {
+    onFilterModelChange((0, _gridFilterUtils.setFilterLogicOperatorInModel)(filterModel, operator), 'changeLogicOperator');
+  }, [filterModel, onFilterModelChange]);
+  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;
+    }
+    onFilterModelChange((0, _gridFilterUtils.upsertFilterItemsInModel)(filterModel, [...items, newFilter]), 'upsertFilterItems');
+  }, [filterModel, onFilterModelChange, getNewFilter, items]);
+  const deleteFilter = React.useCallback(item => {
+    const shouldCloseFilterPanel = validFilters.length === 1;
+    onFilterModelChange((0, _gridFilterUtils.deleteFilterItemFromModel)(filterModel, item), 'deleteFilterItem');
+    if (shouldCloseFilterPanel) {
+      onClose?.();
+    }
+  }, [filterModel, onFilterModelChange, onClose, validFilters.length]);
+  const handleRemoveAll = React.useCallback(() => {
+    if (validFilters.length === 1 && validFilters[0].value === undefined) {
+      onFilterModelChange((0, _gridFilterUtils.deleteFilterItemFromModel)(filterModel, validFilters[0]), 'deleteFilterItem');
+      onClose?.();
+      return;
+    }
+    onFilterModelChange((0, _extends2.default)({}, filterModel, {
+      items: readOnlyFilters
+    }), 'removeAllFilterItems');
+  }, [filterModel, onFilterModelChange, onClose, readOnlyFilters, 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, {
+    ref: ref,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelContent.GridPanelContent, {
+      children: [readOnlyFilters.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterFormBase.GridFilterFormBase, (0, _extends2.default)({
+        item: item,
+        filterModel: filterModel,
+        applyFilterChanges: applyFilter,
+        deleteFilter: deleteFilter,
+        hasMultipleFilters: hasMultipleFilters,
+        showMultiFilterOperators: index > 0,
+        disableMultiFilterOperator: index !== 1,
+        applyMultiFilterOperatorChanges: applyFilterLogicOperator,
+        focusElementRef: null,
+        readOnly: true,
+        logicOperators: logicOperators,
+        columnsSort: columnsSort,
+        disableDebounce: disableDebounce
+      }, filterFormProps), item.id == null ? index : item.id)), validFilters.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterFormBase.GridFilterFormBase, (0, _extends2.default)({
+        item: item,
+        filterModel: filterModel,
+        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,
+        disableDebounce: disableDebounce
+      }, 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]
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridFilterPanelBase.displayName = "GridFilterPanelBase";
+process.env.NODE_ENV !== "production" ? GridFilterPanelBase.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore - do not document.
+   */
+  children: _propTypes.default.node,
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
+  columnsSort: _propTypes.default.oneOf(['asc', 'desc']),
+  /**
+   * If `true`, the `Add filter` button will not be displayed.
+   * @default false
+   */
+  disableAddFilterButton: _propTypes.default.bool,
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default true
+   */
+  disableDebounce: _propTypes.default.bool,
+  /**
+   * If `true`, the `Remove all` button will be disabled
+   * @default false
+   */
+  disableRemoveAllButton: _propTypes.default.bool,
+  /**
+   * Props passed to each filter form.
+   */
+  filterFormProps: _propTypes.default.shape({
+    columnInputProps: _propTypes.default.any,
+    columnsSort: _propTypes.default.oneOf(['asc', 'desc']),
+    deleteIconProps: _propTypes.default.any,
+    filterColumns: _propTypes.default.func,
+    logicOperatorInputProps: _propTypes.default.any,
+    operatorInputProps: _propTypes.default.any,
+    valueInputProps: _propTypes.default.any
+  }),
+  /**
+   * The filter model edited by the panel.
+   */
+  filterModel: _propTypes.default.shape({
+    items: _propTypes.default.arrayOf(_propTypes.default.shape({
+      field: _propTypes.default.string.isRequired,
+      id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+      operator: _propTypes.default.string.isRequired,
+      value: _propTypes.default.any
+    })).isRequired,
+    logicOperator: _propTypes.default.oneOf(['and', 'or']),
+    quickFilterExcludeHiddenColumns: _propTypes.default.bool,
+    quickFilterLogicOperator: _propTypes.default.oneOf(['and', 'or']),
+    quickFilterValues: _propTypes.default.array
+  }).isRequired,
+  /**
+   * 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: _propTypes.default.func,
+  /**
+   * Sets the available logic operators.
+   * @default [GridLogicOperator.And, GridLogicOperator.Or]
+   */
+  logicOperators: _propTypes.default.arrayOf(_propTypes.default.oneOf(['and', 'or']).isRequired),
+  /**
+   * 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: _propTypes.default.func,
+  /**
+   * 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: _propTypes.default.func.isRequired,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
+} : void 0;
+
+/**
+ * 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/)
+ */

package/components/panel/filterPanel/GridFilterPanelBase.mjs

@@ -0,0 +1,297 @@
+'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", "disableDebounce", "filterModel", "onFilterModelChange", "onClose"];
+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 { GridFilterFormBase } from "./GridFilterFormBase.mjs";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.mjs";
+import { useGridSelector } from "../../../hooks/utils/useGridSelector.mjs";
+import { gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector } from "../../../hooks/features/columns/gridColumnsSelector.mjs";
+import { upsertFilterItemInModel, upsertFilterItemsInModel, deleteFilterItemFromModel, setFilterLogicOperatorInModel } from "../../../hooks/features/filter/gridFilterUtils.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)
+});
+const GridFilterPanelBase = forwardRef(function GridFilterPanelBase(props, ref) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  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,
+      disableDebounce = true,
+      filterModel,
+      onFilterModelChange,
+      onClose
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const applyFilter = React.useCallback(item => {
+    onFilterModelChange(upsertFilterItemInModel(filterModel, item), 'upsertFilterItem');
+  }, [filterModel, onFilterModelChange]);
+  const applyFilterLogicOperator = React.useCallback(operator => {
+    onFilterModelChange(setFilterLogicOperatorInModel(filterModel, operator), 'changeLogicOperator');
+  }, [filterModel, onFilterModelChange]);
+  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;
+    }
+    onFilterModelChange(upsertFilterItemsInModel(filterModel, [...items, newFilter]), 'upsertFilterItems');
+  }, [filterModel, onFilterModelChange, getNewFilter, items]);
+  const deleteFilter = React.useCallback(item => {
+    const shouldCloseFilterPanel = validFilters.length === 1;
+    onFilterModelChange(deleteFilterItemFromModel(filterModel, item), 'deleteFilterItem');
+    if (shouldCloseFilterPanel) {
+      onClose?.();
+    }
+  }, [filterModel, onFilterModelChange, onClose, validFilters.length]);
+  const handleRemoveAll = React.useCallback(() => {
+    if (validFilters.length === 1 && validFilters[0].value === undefined) {
+      onFilterModelChange(deleteFilterItemFromModel(filterModel, validFilters[0]), 'deleteFilterItem');
+      onClose?.();
+      return;
+    }
+    onFilterModelChange(_extends({}, filterModel, {
+      items: readOnlyFilters
+    }), 'removeAllFilterItems');
+  }, [filterModel, onFilterModelChange, onClose, readOnlyFilters, 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, {
+    ref: ref,
+    children: [/*#__PURE__*/_jsxs(GridPanelContent, {
+      children: [readOnlyFilters.map((item, index) => /*#__PURE__*/_jsx(GridFilterFormBase, _extends({
+        item: item,
+        filterModel: filterModel,
+        applyFilterChanges: applyFilter,
+        deleteFilter: deleteFilter,
+        hasMultipleFilters: hasMultipleFilters,
+        showMultiFilterOperators: index > 0,
+        disableMultiFilterOperator: index !== 1,
+        applyMultiFilterOperatorChanges: applyFilterLogicOperator,
+        focusElementRef: null,
+        readOnly: true,
+        logicOperators: logicOperators,
+        columnsSort: columnsSort,
+        disableDebounce: disableDebounce
+      }, filterFormProps), item.id == null ? index : item.id)), validFilters.map((item, index) => /*#__PURE__*/_jsx(GridFilterFormBase, _extends({
+        item: item,
+        filterModel: filterModel,
+        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,
+        disableDebounce: disableDebounce
+      }, 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]
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridFilterPanelBase.displayName = "GridFilterPanelBase";
+process.env.NODE_ENV !== "production" ? GridFilterPanelBase.propTypes /* remove-proptypes */ = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * @ignore - do not document.
+   */
+  children: PropTypes.node,
+  /**
+   * Changes how the options in the columns selector should be ordered.
+   * If not specified, the order is derived from the `columns` prop.
+   */
+  columnsSort: PropTypes.oneOf(['asc', 'desc']),
+  /**
+   * If `true`, the `Add filter` button will not be displayed.
+   * @default false
+   */
+  disableAddFilterButton: PropTypes.bool,
+  /**
+   * If `true`, filter value changes are applied immediately without debouncing.
+   * @default true
+   */
+  disableDebounce: PropTypes.bool,
+  /**
+   * If `true`, the `Remove all` button will be disabled
+   * @default false
+   */
+  disableRemoveAllButton: PropTypes.bool,
+  /**
+   * Props passed to each filter form.
+   */
+  filterFormProps: PropTypes.shape({
+    columnInputProps: PropTypes.any,
+    columnsSort: PropTypes.oneOf(['asc', 'desc']),
+    deleteIconProps: PropTypes.any,
+    filterColumns: PropTypes.func,
+    logicOperatorInputProps: PropTypes.any,
+    operatorInputProps: PropTypes.any,
+    valueInputProps: PropTypes.any
+  }),
+  /**
+   * The filter model edited by the panel.
+   */
+  filterModel: PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.shape({
+      field: PropTypes.string.isRequired,
+      id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+      operator: PropTypes.string.isRequired,
+      value: PropTypes.any
+    })).isRequired,
+    logicOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterExcludeHiddenColumns: PropTypes.bool,
+    quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterValues: PropTypes.array
+  }).isRequired,
+  /**
+   * 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: PropTypes.func,
+  /**
+   * Sets the available logic operators.
+   * @default [GridLogicOperator.And, GridLogicOperator.Or]
+   */
+  logicOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+  /**
+   * 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: PropTypes.func,
+  /**
+   * 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: PropTypes.func.isRequired,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+
+/**
+ * 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/index.d.mts

@@ -1,10 +1,12 @@
 export * from "./GridFilterForm.mjs";
+export type { FilterColumnsArgs, GridFilterFormProps } from "./GridFilterFormBase.mjs";
 export { GridFilterInputValue, type GridTypeFilterInputValueProps } from "./GridFilterInputValue.mjs";
 export * from "./GridFilterInputDate.mjs";
 export * from "./GridFilterInputSingleSelect.mjs";
 export { GridFilterInputBoolean } from "./GridFilterInputBoolean.mjs";
 export type { GridFilterInputBooleanProps } from "./GridFilterInputBoolean.mjs";
 export { GridFilterPanel } from "./GridFilterPanel.mjs";
-export type { GetColumnForNewFilterArgs } from "./GridFilterPanel.mjs";
+export { GridFilterPanelBase } from "./GridFilterPanelBase.mjs";
+export type { GetColumnForNewFilterArgs, GridFilterPanelBaseProps, GridFilterPanelProps } from "./GridFilterPanelBase.mjs";
 export * from "./GridFilterInputMultipleValue.mjs";
 export * from "./GridFilterInputMultipleSingleSelect.mjs";

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

@@ -1,10 +1,12 @@
 export * from "./GridFilterForm.js";
+export type { FilterColumnsArgs, GridFilterFormProps } from "./GridFilterFormBase.js";
 export { GridFilterInputValue, type GridTypeFilterInputValueProps } from "./GridFilterInputValue.js";
 export * from "./GridFilterInputDate.js";
 export * from "./GridFilterInputSingleSelect.js";
 export { GridFilterInputBoolean } from "./GridFilterInputBoolean.js";
 export type { GridFilterInputBooleanProps } from "./GridFilterInputBoolean.js";
 export { GridFilterPanel } from "./GridFilterPanel.js";
-export type { GetColumnForNewFilterArgs } from "./GridFilterPanel.js";
+export { GridFilterPanelBase } from "./GridFilterPanelBase.js";
+export type { GetColumnForNewFilterArgs, GridFilterPanelBaseProps, GridFilterPanelProps } from "./GridFilterPanelBase.js";
 export * from "./GridFilterInputMultipleValue.js";
 export * from "./GridFilterInputMultipleSingleSelect.js";

package/components/panel/filterPanel/index.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   GridFilterInputValue: true,
   GridFilterInputBoolean: true,
-  GridFilterPanel: true
+  GridFilterPanel: true,
+  GridFilterPanelBase: true
 };
 Object.defineProperty(exports, "GridFilterInputBoolean", {
   enumerable: true,
@@ -26,6 +27,12 @@ Object.defineProperty(exports, "GridFilterPanel", {
     return _GridFilterPanel.GridFilterPanel;
   }
 });
+Object.defineProperty(exports, "GridFilterPanelBase", {
+  enumerable: true,
+  get: function () {
+    return _GridFilterPanelBase.GridFilterPanelBase;
+  }
+});
 var _GridFilterForm = require("./GridFilterForm");
 Object.keys(_GridFilterForm).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -65,6 +72,7 @@ Object.keys(_GridFilterInputSingleSelect).forEach(function (key) {
 });
 var _GridFilterInputBoolean = require("./GridFilterInputBoolean");
 var _GridFilterPanel = require("./GridFilterPanel");
+var _GridFilterPanelBase = require("./GridFilterPanelBase");
 var _GridFilterInputMultipleValue = require("./GridFilterInputMultipleValue");
 Object.keys(_GridFilterInputMultipleValue).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/components/panel/filterPanel/index.mjs

@@ -1,8 +1,11 @@
 export * from "./GridFilterForm.mjs";
+// `GridFilterFormBase` is an internal component: only its public-facing prop types are re-exported.
+
 export { GridFilterInputValue } from "./GridFilterInputValue.mjs";
 export * from "./GridFilterInputDate.mjs";
 export * from "./GridFilterInputSingleSelect.mjs";
 export { GridFilterInputBoolean } from "./GridFilterInputBoolean.mjs";
 export { GridFilterPanel } from "./GridFilterPanel.mjs";
+export { GridFilterPanelBase } from "./GridFilterPanelBase.mjs";
 export * from "./GridFilterInputMultipleValue.mjs";
 export * from "./GridFilterInputMultipleSingleSelect.mjs";