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

package/components/panel/filterPanel/GridFilterForm.js

@@ -1,23 +1,32 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridFilterForm = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _utils = require("@mui/utils");
+var _styles = require("@mui/material/styles");
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../../../constants/cssVariables");
+var _gridColumnsSelector = require("../../../hooks/features/columns/gridColumnsSelector");
+var _gridFilterSelector = require("../../../hooks/features/filter/gridFilterSelector");
+var _useGridSelector = require("../../../hooks/utils/useGridSelector");
+var _gridFilterItem = require("../../../models/gridFilterItem");
+var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
+var _gridClasses = require("../../../constants/gridClasses");
+var _filterPanelUtils = require("./filterPanelUtils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "logicOperators", "columnsSort", "filterColumns", "deleteIconProps", "logicOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "readOnly", "children"],
   _excluded2 = ["InputComponentProps"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
-import { styled } from '@mui/material/styles';
-import clsx from 'clsx';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { gridFilterableColumnDefinitionsSelector, gridColumnLookupSelector } from "../../../hooks/features/columns/gridColumnsSelector.js";
-import { gridFilterModelSelector } from "../../../hooks/features/filter/gridFilterSelector.js";
-import { useGridSelector } from "../../../hooks/utils/useGridSelector.js";
-import { GridLogicOperator } from "../../../models/gridFilterItem.js";
-import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
-import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
-import { getDataGridUtilityClass } from "../../../constants/gridClasses.js";
-import { getValueFromValueOptions, getValueOptions } from "./filterPanelUtils.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -30,27 +39,27 @@ const useUtilityClasses = ownerState => {
     operatorInput: ['filterFormOperatorInput'],
     valueInput: ['filterFormValueInput']
   };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridFilterFormRoot = styled('div', {
+const GridFilterFormRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterForm',
   overridesResolver: (props, styles) => styles.filterForm
-})(({
-  theme
-}) => ({
+})({
   display: 'flex',
-  gap: theme.spacing(1.5)
-}));
-const FilterFormDeleteIcon = styled('div', {
+  gap: _cssVariables.vars.spacing(1.5)
+});
+const FilterFormDeleteIcon = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormDeleteIcon',
   overridesResolver: (_, styles) => styles.filterFormDeleteIcon
 })({
   flexShrink: 0,
-  justifyContent: 'center'
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
 });
-const FilterFormLogicOperatorInput = styled('div', {
+const FilterFormLogicOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormLogicOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
@@ -58,21 +67,21 @@ const FilterFormLogicOperatorInput = styled('div', {
   minWidth: 75,
   justifyContent: 'end'
 });
-const FilterFormColumnInput = styled('div', {
+const FilterFormColumnInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormColumnInput',
   overridesResolver: (_, styles) => styles.filterFormColumnInput
 })({
   width: 150
 });
-const FilterFormOperatorInput = styled('div', {
+const FilterFormOperatorInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormOperatorInput
 })({
   width: 150
 });
-const FilterFormValueInput = styled('div', {
+const FilterFormValueInput = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FilterFormValueInput',
   overridesResolver: (_, styles) => styles.filterFormValueInput
@@ -81,9 +90,9 @@ const FilterFormValueInput = styled('div', {
 });
 const getLogicOperatorLocaleKey = logicOperator => {
   switch (logicOperator) {
-    case GridLogicOperator.And:
+    case _gridFilterItem.GridLogicOperator.And:
       return 'filterPanelOperatorAnd';
-    case GridLogicOperator.Or:
+    case _gridFilterItem.GridLogicOperator.Or:
       return 'filterPanelOperatorOr';
     default:
       throw new Error('MUI X: Invalid `logicOperator` property in the `GridFilterPanel`.');
@@ -91,7 +100,7 @@ const getLogicOperatorLocaleKey = logicOperator => {
 };
 const getColumnLabel = col => col.headerName || col.field;
 const collator = new Intl.Collator();
-const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
+const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(function GridFilterForm(props, ref) {
   const {
       item,
       hasMultipleFilters,
@@ -101,7 +110,7 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
       disableMultiFilterOperator,
       applyMultiFilterOperatorChanges,
       focusElementRef,
-      logicOperators = [GridLogicOperator.And, GridLogicOperator.Or],
+      logicOperators = [_gridFilterItem.GridLogicOperator.And, _gridFilterItem.GridLogicOperator.Or],
       columnsSort,
       filterColumns,
       deleteIconProps = {},
@@ -111,30 +120,28 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
       valueInputProps = {},
       readOnly
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
-  const columnLookup = useGridSelector(apiRef, gridColumnLookupSelector);
-  const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
-  const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
-  const columnSelectId = useId();
-  const columnSelectLabelId = useId();
-  const operatorSelectId = useId();
-  const operatorSelectLabelId = useId();
-  const rootProps = useGridRootProps();
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const columnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnLookupSelector);
+  const filterableColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnDefinitionsSelector);
+  const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
+  const columnSelectId = (0, _utils.unstable_useId)();
+  const columnSelectLabelId = (0, _utils.unstable_useId)();
+  const operatorSelectId = (0, _utils.unstable_useId)();
+  const operatorSelectLabelId = (0, _utils.unstable_useId)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   const valueRef = React.useRef(null);
   const filterSelectorRef = React.useRef(null);
-  const multiFilterOperator = filterModel.logicOperator ?? GridLogicOperator.And;
+  const multiFilterOperator = filterModel.logicOperator ?? _gridFilterItem.GridLogicOperator.And;
   const hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
-  const baseFormControlProps = rootProps.slotProps?.baseFormControl || {};
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isBaseSelectNative = baseSelectProps.native ?? false;
-  const baseInputLabelProps = rootProps.slotProps?.baseInputLabel || {};
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
   const {
       InputComponentProps
     } = valueInputProps,
-    valueInputPropsOther = _objectWithoutPropertiesLoose(valueInputProps, _excluded2);
+    valueInputPropsOther = (0, _objectWithoutPropertiesLoose2.default)(valueInputProps, _excluded2);
   const {
     filteredColumns,
     selectedField
@@ -206,20 +213,20 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
     // Check filter value against the new valueOptions
     if (column.type === 'singleSelect' && filterValue !== undefined) {
       const colDef = column;
-      const valueOptions = getValueOptions(colDef);
+      const valueOptions = (0, _filterPanelUtils.getValueOptions)(colDef);
       if (Array.isArray(filterValue)) {
         filterValue = filterValue.filter(val => {
           return (
             // Only keep values that are in the new value options
-            getValueFromValueOptions(val, valueOptions, colDef?.getOptionValue) !== undefined
+            (0, _filterPanelUtils.getValueFromValueOptions)(val, valueOptions, colDef?.getOptionValue) !== undefined
           );
         });
-      } else if (getValueFromValueOptions(item.value, valueOptions, colDef?.getOptionValue) === undefined) {
+      } else if ((0, _filterPanelUtils.getValueFromValueOptions)(item.value, valueOptions, colDef?.getOptionValue) === undefined) {
         // Reset the filter value if it is not in the new value options
         filterValue = undefined;
       }
     }
-    applyFilterChanges(_extends({}, item, {
+    applyFilterChanges((0, _extends2.default)({}, item, {
       field,
       operator: newOperator.value,
       value: filterValue
@@ -229,13 +236,13 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
     const operator = event.target.value;
     const newOperator = currentColumn?.filterOperators.find(op => op.value === operator);
     const eraseItemValue = !newOperator?.InputComponent || newOperator?.InputComponent !== currentOperator?.InputComponent;
-    applyFilterChanges(_extends({}, item, {
+    applyFilterChanges((0, _extends2.default)({}, item, {
       operator,
       value: eraseItemValue ? undefined : item.value
     }));
   }, [applyFilterChanges, item, currentColumn, currentOperator]);
   const changeLogicOperator = React.useCallback(event => {
-    const logicOperator = event.target.value === GridLogicOperator.And.toString() ? GridLogicOperator.And : GridLogicOperator.Or;
+    const logicOperator = event.target.value === _gridFilterItem.GridLogicOperator.And.toString() ? _gridFilterItem.GridLogicOperator.And : _gridFilterItem.GridLogicOperator.Or;
     applyMultiFilterOperatorChanges(logicOperator);
   }, [applyMultiFilterOperatorChanges]);
   const handleDeleteFilter = () => {
@@ -250,33 +257,28 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
       }
     }
   }), [currentOperator]);
-  return /*#__PURE__*/_jsxs(GridFilterFormRoot, _extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridFilterFormRoot, (0, _extends2.default)({
     className: classes.root,
     "data-id": item.id,
     ownerState: rootProps
   }, other, {
     ref: ref,
-    children: [/*#__PURE__*/_jsx(FilterFormDeleteIcon, _extends({
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, deleteIconProps, {
-      className: clsx(classes.deleteIcon, baseFormControlProps.className, deleteIconProps.className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormDeleteIcon, (0, _extends2.default)({}, deleteIconProps, {
+      className: (0, _clsx.default)(classes.deleteIcon, deleteIconProps.className),
       ownerState: rootProps,
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         title: apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         onClick: handleDeleteFilter,
         size: "small",
         disabled: readOnly
       }, rootProps.slotProps?.baseIconButton, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.filterPanelDeleteIcon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.filterPanelDeleteIcon, {
           fontSize: "small"
         })
       }))
-    })), /*#__PURE__*/_jsx(FilterFormLogicOperatorInput, _extends({
-      variant: "outlined",
-      size: "small",
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, logicOperatorInputProps, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormLogicOperatorInput, (0, _extends2.default)({
+      as: rootProps.slots.baseSelect,
       sx: [hasLogicOperatorColumn ? {
         display: 'flex'
       } : {
@@ -285,92 +287,79 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
         visibility: 'visible'
       } : {
         visibility: 'hidden'
-      }, baseFormControlProps.sx, logicOperatorInputProps.sx],
-      className: clsx(classes.logicOperatorInput, baseFormControlProps.className, logicOperatorInputProps.className),
-      ownerState: rootProps,
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
-        inputProps: {
-          'aria-label': apiRef.current.getLocaleText('filterPanelLogicOperator')
-        },
-        value: multiFilterOperator ?? '',
-        onChange: changeLogicOperator,
-        disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
-        native: isBaseSelectNative
-      }, rootProps.slotProps?.baseSelect, {
-        children: logicOperators.map(logicOperator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-          native: isBaseSelectNative,
-          key: logicOperator.toString(),
-          value: logicOperator.toString()
-        }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
-      }))
-    })), /*#__PURE__*/_jsxs(FilterFormColumnInput, _extends({
-      variant: "outlined",
+      }, logicOperatorInputProps.sx],
+      className: (0, _clsx.default)(classes.logicOperatorInput, logicOperatorInputProps.className),
+      ownerState: rootProps
+    }, logicOperatorInputProps, {
       size: "small",
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, columnInputProps, {
-      className: clsx(classes.columnInput, baseFormControlProps.className, columnInputProps.className),
-      ownerState: rootProps,
-      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, baseInputLabelProps, {
-        htmlFor: columnSelectId,
-        id: columnSelectLabelId,
-        children: apiRef.current.getLocaleText('filterPanelColumns')
-      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
-        labelId: columnSelectLabelId,
-        id: columnSelectId,
-        label: apiRef.current.getLocaleText('filterPanelColumns'),
-        value: selectedField ?? '',
-        onChange: changeColumn,
+      slotProps: {
+        htmlInput: {
+          'aria-label': apiRef.current.getLocaleText('filterPanelLogicOperator')
+        }
+      },
+      value: multiFilterOperator ?? '',
+      onChange: changeLogicOperator,
+      disabled: !!disableMultiFilterOperator || logicOperators.length === 1,
+      native: isBaseSelectNative
+    }, rootProps.slotProps?.baseSelect, {
+      children: logicOperators.map(logicOperator => /*#__PURE__*/(0, _react.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
         native: isBaseSelectNative,
-        disabled: readOnly
-      }, rootProps.slotProps?.baseSelect, {
-        children: sortedFilteredColumns.map(col => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-          native: isBaseSelectNative,
-          key: col.field,
-          value: col.field
-        }), getColumnLabel(col)))
-      }))]
-    })), /*#__PURE__*/_jsxs(FilterFormOperatorInput, _extends({
-      variant: "outlined",
+        key: logicOperator.toString(),
+        value: logicOperator.toString()
+      }), apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))))
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormColumnInput, (0, _extends2.default)({
+      as: rootProps.slots.baseSelect
+    }, columnInputProps, {
+      className: (0, _clsx.default)(classes.columnInput, columnInputProps.className),
+      ownerState: rootProps,
       size: "small",
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, operatorInputProps, {
-      className: clsx(classes.operatorInput, baseFormControlProps.className, operatorInputProps.className),
+      labelId: columnSelectLabelId,
+      id: columnSelectId,
+      label: apiRef.current.getLocaleText('filterPanelColumns'),
+      value: selectedField ?? '',
+      onChange: changeColumn,
+      native: isBaseSelectNative,
+      disabled: readOnly
+    }, rootProps.slotProps?.baseSelect, {
+      children: sortedFilteredColumns.map(col => /*#__PURE__*/(0, _react.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
+        native: isBaseSelectNative,
+        key: col.field,
+        value: col.field
+      }), getColumnLabel(col)))
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormOperatorInput, (0, _extends2.default)({
+      as: rootProps.slots.baseSelect,
+      size: "small"
+    }, operatorInputProps, {
+      className: (0, _clsx.default)(classes.operatorInput, operatorInputProps.className),
       ownerState: rootProps,
-      children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, baseInputLabelProps, {
-        htmlFor: operatorSelectId,
-        id: operatorSelectLabelId,
-        children: apiRef.current.getLocaleText('filterPanelOperator')
-      })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
-        labelId: operatorSelectLabelId,
-        label: apiRef.current.getLocaleText('filterPanelOperator'),
-        id: operatorSelectId,
-        value: item.operator,
-        onChange: changeOperator,
+      labelId: operatorSelectLabelId,
+      label: apiRef.current.getLocaleText('filterPanelOperator'),
+      id: operatorSelectId,
+      value: item.operator,
+      onChange: changeOperator,
+      native: isBaseSelectNative,
+      inputRef: filterSelectorRef,
+      disabled: readOnly
+    }, rootProps.slotProps?.baseSelect, {
+      children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/(0, _react.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
         native: isBaseSelectNative,
-        inputRef: filterSelectorRef,
-        disabled: readOnly
-      }, rootProps.slotProps?.baseSelect, {
-        children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
-          native: isBaseSelectNative,
-          key: operator.value,
-          value: operator.value
-        }), operator.label || apiRef.current.getLocaleText(`filterOperator${capitalize(operator.value)}`)))
-      }))]
-    })), /*#__PURE__*/_jsx(FilterFormValueInput, _extends({
-      variant: "outlined",
-      size: "small",
-      as: rootProps.slots.baseFormControl
-    }, baseFormControlProps, valueInputPropsOther, {
-      className: clsx(classes.valueInput, baseFormControlProps.className, valueInputPropsOther.className),
+        key: operator.value,
+        value: operator.value
+      }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)))
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({}, valueInputPropsOther, {
+      className: (0, _clsx.default)(classes.valueInput, valueInputPropsOther.className),
       ownerState: rootProps,
-      children: currentOperator?.InputComponent ? /*#__PURE__*/_jsx(currentOperator.InputComponent, _extends({
-        variant: "outlined",
-        size: "small",
+      children: currentOperator?.InputComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(currentOperator.InputComponent, (0, _extends2.default)({
         apiRef: apiRef,
         item: item,
         applyValue: applyFilterChanges,
         focusElementRef: valueRef,
-        disabled: readOnly
+        disabled: readOnly,
+        slotProps: {
+          root: {
+            size: 'small'
+          }
+        }
       }, currentOperator.InputComponentProps, InputComponentProps), item.field) : null
     }))]
   }));
@@ -384,95 +373,95 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    * Callback called when the operator, column field or value is changed.
    * @param {GridFilterItem} item The updated [[GridFilterItem]].
    */
-  applyFilterChanges: PropTypes.func.isRequired,
+  applyFilterChanges: _propTypes.default.func.isRequired,
   /**
    * Callback called when the logic operator is changed.
    * @param {GridLogicOperator} operator The new logic operator.
    */
-  applyMultiFilterOperatorChanges: PropTypes.func.isRequired,
+  applyMultiFilterOperatorChanges: _propTypes.default.func.isRequired,
   /**
    * @ignore - do not document.
    */
-  children: PropTypes.node,
+  children: _propTypes.default.node,
   /**
    * Props passed to the column input component.
    * @default {}
    */
-  columnInputProps: PropTypes.any,
+  columnInputProps: _propTypes.default.any,
   /**
    * 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']),
+  columnsSort: _propTypes.default.oneOf(['asc', 'desc']),
   /**
    * Callback called when the delete button is clicked.
    * @param {GridFilterItem} item The deleted [[GridFilterItem]].
    */
-  deleteFilter: PropTypes.func.isRequired,
+  deleteFilter: _propTypes.default.func.isRequired,
   /**
    * Props passed to the delete icon.
    * @default {}
    */
-  deleteIconProps: PropTypes.any,
+  deleteIconProps: _propTypes.default.any,
   /**
    * If `true`, disables the logic operator field but still renders it.
    */
-  disableMultiFilterOperator: PropTypes.bool,
+  disableMultiFilterOperator: _propTypes.default.bool,
   /**
    * Allows to filter the columns displayed in the filter form.
    * @param {FilterColumnsArgs} args The columns of the grid and name of field.
    * @returns {GridColDef['field'][]} The filtered fields array.
    */
-  filterColumns: PropTypes.func,
+  filterColumns: _propTypes.default.func,
   /**
    * A ref allowing to set imperative focus.
    * It can be passed to the el
    */
-  focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * If `true`, the logic operator field is rendered.
    * The field will be invisible if `showMultiFilterOperators` is also `true`.
    */
-  hasMultipleFilters: PropTypes.bool.isRequired,
+  hasMultipleFilters: _propTypes.default.bool.isRequired,
   /**
    * The [[GridFilterItem]] representing this form.
    */
-  item: PropTypes.shape({
-    field: PropTypes.string.isRequired,
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    operator: PropTypes.string.isRequired,
-    value: PropTypes.any
+  item: _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,
   /**
    * Props passed to the logic operator input component.
    * @default {}
    */
-  logicOperatorInputProps: PropTypes.any,
+  logicOperatorInputProps: _propTypes.default.any,
   /**
    * Sets the available logic operators.
    * @default [GridLogicOperator.And, GridLogicOperator.Or]
    */
-  logicOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
+  logicOperators: _propTypes.default.arrayOf(_propTypes.default.oneOf(['and', 'or']).isRequired),
   /**
    * Props passed to the operator input component.
    * @default {}
    */
-  operatorInputProps: PropTypes.any,
+  operatorInputProps: _propTypes.default.any,
   /**
    * `true` if the filter is disabled/read only.
    * i.e. `colDef.fiterable = false` but passed in `filterModel`
    * @default false
    */
-  readOnly: PropTypes.bool,
+  readOnly: _propTypes.default.bool,
   /**
    * If `true`, the logic operator field is visible.
    */
-  showMultiFilterOperators: PropTypes.bool,
+  showMultiFilterOperators: _propTypes.default.bool,
   /**
    * Props passed to the value input component.
    * @default {}
    */
-  valueInputProps: PropTypes.any
+  valueInputProps: _propTypes.default.any
 } : void 0;
 
 /**
@@ -481,5 +470,4 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
  *
  * API:
  * - [GridFilterForm API](https://mui.com/x/api/data-grid/grid-filter-form/)
- */
-export { GridFilterForm };
+ */

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

@@ -1,18 +1,10 @@
 import * as React from 'react';
-import { TextFieldProps } from '@mui/material/TextField';
-import { GridFilterInputValueProps } from './GridFilterInputValueProps';
-export type GridFilterInputBooleanProps = GridFilterInputValueProps & TextFieldProps & {
-    headerFilterMenu?: React.ReactNode;
-    clearButton?: React.ReactNode | null;
-    /**
-     * It is `true` if the filter either has a value or an operator with no value
-     * required is selected (for example `isEmpty`)
-     */
-    isFilterActive?: boolean;
-};
+import { TextFieldProps } from "../../../models/gridBaseSlots.js";
+import { GridFilterInputValueProps } from "../../../models/gridFilterInputComponent.js";
+export type GridFilterInputBooleanProps = GridFilterInputValueProps<TextFieldProps>;
 declare function GridFilterInputBoolean(props: GridFilterInputBooleanProps): React.JSX.Element;
 declare namespace GridFilterInputBoolean {
-    var propTypes: any;
+  var propTypes: any;
 }
 export declare function sanitizeFilterItemValue(value: any): boolean | undefined;
-export { GridFilterInputBoolean };
+export { GridFilterInputBoolean };