@mui/x-data-grid 8.0.0-beta.3 → 8.1.0

package/modern/components/panel/filterPanel/GridFilterPanel.d.ts

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-import { GridFilterItem } from "../../../models/gridFilterItem.js";
-import { GridFilterFormProps } from "./GridFilterForm.js";
-import { 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;
-}
-declare const getGridFilter: (col: GridStateColDef) => GridFilterItem;
-declare const GridFilterPanel: React.ForwardRefExoticComponent<GridFilterPanelProps> | React.ForwardRefExoticComponent<GridFilterPanelProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * Demos:
- * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
- *
- * API:
- * - [GridFilterPanel API](https://mui.com/x/api/data-grid/grid-filter-panel/)
- */
-export { GridFilterPanel, getGridFilter };

package/modern/components/panel/filterPanel/GridFilterPanel.js

@@ -1,247 +0,0 @@
-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.js";
-import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
-import { GridPanelContent } from "../GridPanelContent.js";
-import { GridPanelFooter } from "../GridPanelFooter.js";
-import { GridPanelWrapper } from "../GridPanelWrapper.js";
-import { GridFilterForm } from "./GridFilterForm.js";
-import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
-import { useGridSelector } from "../../../hooks/utils/useGridSelector.js";
-import { gridFilterModelSelector } from "../../../hooks/features/filter/gridFilterSelector.js";
-import { gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector } from "../../../hooks/features/columns/gridColumnsSelector.js";
-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 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);
-  }, [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, {
-    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]
-  }));
-});
-process.env.NODE_ENV !== "production" ? GridFilterPanel.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`, 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
-  }),
-  /**
-   * 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),
-  /**
-   * 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;
-
-/**
- * Demos:
- * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)
- *
- * API:
- * - [GridFilterPanel API](https://mui.com/x/api/data-grid/grid-filter-panel/)
- */
-export { GridFilterPanel, getGridFilter };

package/modern/components/panel/filterPanel/filterPanelUtils.d.ts

@@ -1,5 +0,0 @@
-import type { GridColDef, GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
-import type { GridValueOptionsParams } from '../../../models/params/gridValueOptionsParams';
-export declare function isSingleSelectColDef(colDef: GridColDef | null): colDef is GridSingleSelectColDef;
-export declare function getValueOptions(column: GridSingleSelectColDef, additionalParams?: Omit<GridValueOptionsParams, 'field'>): import("@mui/x-data-grid").ValueOptions[] | undefined;
-export declare function getValueFromValueOptions(value: string, valueOptions: any[] | undefined, getOptionValue: NonNullable<GridSingleSelectColDef['getOptionValue']>): any;

package/modern/components/panel/filterPanel/filterPanelUtils.js

@@ -1,22 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-export function isSingleSelectColDef(colDef) {
-  return colDef?.type === 'singleSelect';
-}
-export function getValueOptions(column, additionalParams) {
-  if (!column) {
-    return undefined;
-  }
-  return typeof column.valueOptions === 'function' ? column.valueOptions(_extends({
-    field: column.field
-  }, additionalParams)) : column.valueOptions;
-}
-export function getValueFromValueOptions(value, valueOptions, getOptionValue) {
-  if (valueOptions === undefined) {
-    return undefined;
-  }
-  const result = valueOptions.find(option => {
-    const optionValue = getOptionValue(option);
-    return String(optionValue) === String(value);
-  });
-  return getOptionValue(result);
-}

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

@@ -1,10 +0,0 @@
-export * from "./GridFilterForm.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';
-export { GridFilterPanel } from "./GridFilterPanel.js";
-export type { GetColumnForNewFilterArgs } from './GridFilterPanel';
-export * from "./GridFilterInputMultipleValue.js";
-export * from "./GridFilterInputMultipleSingleSelect.js";

package/modern/components/panel/filterPanel/index.js

@@ -1,8 +0,0 @@
-export * from "./GridFilterForm.js";
-export { GridFilterInputValue } from "./GridFilterInputValue.js";
-export * from "./GridFilterInputDate.js";
-export * from "./GridFilterInputSingleSelect.js";
-export { GridFilterInputBoolean } from "./GridFilterInputBoolean.js";
-export { GridFilterPanel } from "./GridFilterPanel.js";
-export * from "./GridFilterInputMultipleValue.js";
-export * from "./GridFilterInputMultipleSingleSelect.js";

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

@@ -1,7 +0,0 @@
-export * from "./GridColumnsPanel.js";
-export * from "./GridPanel.js";
-export * from "./GridPanelContent.js";
-export * from "./GridPanelFooter.js";
-export * from "./GridPanelHeader.js";
-export * from "./GridPanelWrapper.js";
-export * from "./filterPanel/index.js";

package/modern/components/panel/index.js

@@ -1,7 +0,0 @@
-export * from "./GridColumnsPanel.js";
-export * from "./GridPanel.js";
-export * from "./GridPanelContent.js";
-export * from "./GridPanelFooter.js";
-export * from "./GridPanelHeader.js";
-export * from "./GridPanelWrapper.js";
-export * from "./filterPanel/index.js";

package/modern/components/quickFilter/QuickFilter.d.ts

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import { QuickFilterState } from "./QuickFilterContext.js";
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { GridFilterModel } from '../../models';
-export type QuickFilterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
-  /**
-   * Function responsible for parsing text input in an array of independent values for quick filtering.
-   * @param {string} input The value entered by the user
-   * @returns {any[]} The array of value on which quick filter is applied
-   * @default (searchText: string) => searchText.split(' ').filter((word) => word !== '')
-   */
-  parser?: (input: string) => any[];
-  /**
-   * Function responsible for formatting values of quick filter in a string when the model is modified
-   * @param {any[]} values The new values passed to the quick filter model
-   * @returns {string} The string to display in the text field
-   * @default (values: string[]) => values.join(' ')
-   */
-  formatter?: (values: NonNullable<GridFilterModel['quickFilterValues']>) => string;
-  /**
-   * The debounce time in milliseconds.
-   * @default 150
-   */
-  debounceMs?: number;
-  /**
-   * The default expanded state of the quick filter control.
-   * @default false
-   */
-  defaultExpanded?: boolean;
-  /**
-   * The expanded state of the quick filter control.
-   */
-  expanded?: boolean;
-  /**
-   * A function to customize rendering of the component.
-   */
-  render?: RenderProp<React.ComponentProps<'div'>, QuickFilterState>;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  className?: string | ((state: QuickFilterState) => string);
-  /**
-   * Callback function that is called when the quick filter input is expanded or collapsed.
-   * @param {boolean} expanded The new expanded state of the quick filter control
-   */
-  onExpandedChange?: (expanded: boolean) => void;
-};
-/**
- * The top level Quick Filter component that provides context to child components.
- * It renders a `<div />` element.
- *
- * Demos:
- *
- * - [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
- *
- * API:
- *
- * - [QuickFilter API](https://mui.com/x/api/data-grid/quick-filter/)
- */
-declare function QuickFilter(props: QuickFilterProps): React.JSX.Element;
-declare namespace QuickFilter {
-  var propTypes: any;
-}
-export { QuickFilter };

package/modern/components/quickFilter/QuickFilter.js

@@ -1,189 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["render", "className", "parser", "formatter", "debounceMs", "defaultExpanded", "expanded", "onExpandedChange"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_debounce as debounce } from '@mui/utils';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import useId from '@mui/utils/useId';
-import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
-import { QuickFilterContext } from "./QuickFilterContext.js";
-import { useGridComponentRenderer } from "../../hooks/utils/useGridComponentRenderer.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
-import { gridQuickFilterValuesSelector } from "../../hooks/features/filter/index.js";
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const DEFAULT_PARSER = searchText => searchText.split(' ').filter(word => word !== '');
-const DEFAULT_FORMATTER = values => values.join(' ');
-
-/**
- * The top level Quick Filter component that provides context to child components.
- * It renders a `<div />` element.
- *
- * Demos:
- *
- * - [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
- *
- * API:
- *
- * - [QuickFilter API](https://mui.com/x/api/data-grid/quick-filter/)
- */
-function QuickFilter(props) {
-  const rootProps = useGridRootProps();
-  const {
-      render,
-      className,
-      parser = DEFAULT_PARSER,
-      formatter = DEFAULT_FORMATTER,
-      debounceMs = rootProps.filterDebounceMs,
-      defaultExpanded,
-      expanded,
-      onExpandedChange
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
-  const controlRef = React.useRef(null);
-  const triggerRef = React.useRef(null);
-  const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
-  const [value, setValue] = React.useState(formatter(quickFilterValues ?? []));
-  const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded ?? value.length > 0);
-  const expandedValue = expanded ?? internalExpanded;
-  const state = React.useMemo(() => ({
-    value,
-    expanded: expandedValue
-  }), [value, expandedValue]);
-  const resolvedClassName = typeof className === 'function' ? className(state) : className;
-  const ref = React.useRef(null);
-  const controlId = useId();
-  const handleExpandedChange = React.useCallback(newExpanded => {
-    if (onExpandedChange) {
-      onExpandedChange(newExpanded);
-    }
-    if (expanded === undefined) {
-      setInternalExpanded(newExpanded);
-    }
-  }, [onExpandedChange, expanded]);
-  const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
-  React.useEffect(() => {
-    if (!isDeepEqual(prevQuickFilterValuesRef.current, quickFilterValues)) {
-      // The model of quick filter value has been updated
-      prevQuickFilterValuesRef.current = quickFilterValues;
-
-      // Update the input value if needed to match the new model
-      setValue(prevSearchValue => isDeepEqual(parser(prevSearchValue), quickFilterValues) ? prevSearchValue : formatter(quickFilterValues ?? []));
-    }
-  }, [quickFilterValues, formatter, parser]);
-  const isFirstRender = React.useRef(true);
-  const previousExpandedValue = React.useRef(expandedValue);
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      return;
-    }
-
-    // Ensure the expanded state has actually changed before focusing
-    if (previousExpandedValue.current !== expandedValue) {
-      if (expandedValue) {
-        // Ensures the focus does not interupt CSS transitions and animations on the control
-        requestAnimationFrame(() => {
-          controlRef.current?.focus({
-            preventScroll: true
-          });
-        });
-      } else {
-        triggerRef.current?.focus({
-          preventScroll: true
-        });
-      }
-      previousExpandedValue.current = expandedValue;
-    }
-  }, [expandedValue]);
-  const setQuickFilterValueDebounced = React.useMemo(() => debounce(newValue => {
-    const newQuickFilterValues = parser(newValue);
-    prevQuickFilterValuesRef.current = newQuickFilterValues;
-    apiRef.current.setQuickFilterValues(newQuickFilterValues);
-  }, debounceMs), [apiRef, debounceMs, parser]);
-  React.useEffect(() => setQuickFilterValueDebounced.clear, [setQuickFilterValueDebounced]);
-  const handleValueChange = React.useCallback(event => {
-    const newValue = event.target.value;
-    setValue(newValue);
-    setQuickFilterValueDebounced(newValue);
-  }, [setQuickFilterValueDebounced]);
-  const handleClearValue = React.useCallback(() => {
-    setValue('');
-    apiRef.current.setQuickFilterValues([]);
-    controlRef.current?.focus();
-  }, [apiRef, controlRef]);
-  const contextValue = React.useMemo(() => ({
-    controlRef,
-    triggerRef,
-    state,
-    controlId,
-    clearValue: handleClearValue,
-    onValueChange: handleValueChange,
-    onExpandedChange: handleExpandedChange
-  }), [controlId, state, handleValueChange, handleClearValue, handleExpandedChange]);
-  useEnhancedEffect(() => {
-    if (ref.current && triggerRef.current) {
-      ref.current.style.setProperty('--trigger-width', `${triggerRef.current?.offsetWidth}px`);
-    }
-  }, []);
-  const element = useGridComponentRenderer('div', render, _extends({
-    className: resolvedClassName
-  }, other, {
-    ref
-  }), state);
-  return /*#__PURE__*/_jsx(QuickFilterContext.Provider, {
-    value: contextValue,
-    children: element
-  });
-}
-process.env.NODE_ENV !== "production" ? QuickFilter.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  /**
-   * The debounce time in milliseconds.
-   * @default 150
-   */
-  debounceMs: PropTypes.number,
-  /**
-   * The default expanded state of the quick filter control.
-   * @default false
-   */
-  defaultExpanded: PropTypes.bool,
-  /**
-   * The expanded state of the quick filter control.
-   */
-  expanded: PropTypes.bool,
-  /**
-   * Function responsible for formatting values of quick filter in a string when the model is modified
-   * @param {any[]} values The new values passed to the quick filter model
-   * @returns {string} The string to display in the text field
-   * @default (values: string[]) => values.join(' ')
-   */
-  formatter: PropTypes.func,
-  /**
-   * Callback function that is called when the quick filter input is expanded or collapsed.
-   * @param {boolean} expanded The new expanded state of the quick filter control
-   */
-  onExpandedChange: PropTypes.func,
-  /**
-   * Function responsible for parsing text input in an array of independent values for quick filtering.
-   * @param {string} input The value entered by the user
-   * @returns {any[]} The array of value on which quick filter is applied
-   * @default (searchText: string) => searchText.split(' ').filter((word) => word !== '')
-   */
-  parser: PropTypes.func,
-  /**
-   * A function to customize rendering of the component.
-   */
-  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
-} : void 0;
-export { QuickFilter };

package/modern/components/quickFilter/QuickFilterClear.d.ts

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { GridSlotProps } from '../../models';
-import { QuickFilterState } from "./QuickFilterContext.js";
-export type QuickFilterClearProps = Omit<GridSlotProps['baseIconButton'], 'className'> & {
-  /**
-   * A function to customize rendering of the component.
-   */
-  render?: RenderProp<GridSlotProps['baseIconButton'], QuickFilterState>;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  className?: string | ((state: QuickFilterState) => string);
-};
-/**
- * A button that resets the filter value.
- * It renders the `baseIconButton` slot.
- *
- * Demos:
- *
- * - [Quick Filter](https://mui.com/x/react-data-grid/components/quick-filter/)
- *
- * API:
- *
- * - [QuickFilterClear API](https://mui.com/x/api/data-grid/quick-filter-clear/)
- */
-declare const QuickFilterClear: React.ForwardRefExoticComponent<QuickFilterClearProps> | React.ForwardRefExoticComponent<Omit<QuickFilterClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export { QuickFilterClear };