@mui/x-data-grid 8.0.0-alpha.11 → 8.0.0-alpha.13

package/components/toolbar/GridToolbarExportContainer.js

@@ -1,28 +1,36 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { isHideMenuKey } from "../../utils/keyboardUtils.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-import { GridMenu } from "../menu/GridMenu.js";
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { gridClasses } from "../../constants/gridClasses.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridToolbarExportContainer = forwardRef(function GridToolbarExportContainer(props, ref) {
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridToolbarExportContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _keyboardUtils = require("../../utils/keyboardUtils");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _GridMenu = require("../menu/GridMenu");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridClasses = require("../../constants/gridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+const GridToolbarExportContainer = exports.GridToolbarExportContainer = (0, _forwardRef.forwardRef)(function GridToolbarExportContainer(props, ref) {
   const {
     children,
     slotProps = {}
   } = props;
   const buttonProps = slotProps.button || {};
   const tooltipProps = slotProps.tooltip || {};
-  const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
-  const exportButtonId = useId();
-  const exportMenuId = useId();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const exportButtonId = (0, _utils.unstable_useId)();
+  const exportMenuId = (0, _utils.unstable_useId)();
   const [open, setOpen] = React.useState(false);
   const buttonRef = React.useRef(null);
-  const handleRef = useForkRef(ref, buttonRef);
+  const handleRef = (0, _utils.unstable_useForkRef)(ref, buttonRef);
   const handleMenuOpen = event => {
     setOpen(prevOpen => !prevOpen);
     buttonProps.onClick?.(event);
@@ -32,21 +40,21 @@ const GridToolbarExportContainer = forwardRef(function GridToolbarExportContaine
     if (event.key === 'Tab') {
       event.preventDefault();
     }
-    if (isHideMenuKey(event.key)) {
+    if ((0, _keyboardUtils.isHideMenuKey)(event.key)) {
       handleMenuClose();
     }
   };
   if (children == null) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
       title: apiRef.current.getLocaleText('toolbarExportLabel'),
       enterDelay: 1000
     }, rootProps.slotProps?.baseTooltip, tooltipProps, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         size: "small",
-        startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
+        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.exportIcon, {}),
         "aria-expanded": open,
         "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
         "aria-haspopup": "menu",
@@ -57,14 +65,14 @@ const GridToolbarExportContainer = forwardRef(function GridToolbarExportContaine
         ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarExport')
       }))
-    })), /*#__PURE__*/_jsx(GridMenu, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
       open: open,
       target: buttonRef.current,
       onClose: handleMenuClose,
       position: "bottom-start",
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
         id: exportMenuId,
-        className: gridClasses.menuList,
+        className: _gridClasses.gridClasses.menuList,
         "aria-labelledby": exportButtonId,
         onKeyDown: handleListKeyDown,
         autoFocusItem: open,
@@ -89,6 +97,5 @@ process.env.NODE_ENV !== "production" ? GridToolbarExportContainer.propTypes = {
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: PropTypes.object
-} : void 0;
-export { GridToolbarExportContainer };
+  slotProps: _propTypes.default.object
+} : void 0;

package/components/toolbar/GridToolbarFilterButton.d.ts

@@ -1,17 +1,17 @@
 import * as React from 'react';
 import { ButtonProps } from '@mui/material/Button';
 import { TooltipProps } from '@mui/material/Tooltip';
-import { BadgeProps } from '../../models/gridBaseSlots';
+import { BadgeProps } from "../../models/gridBaseSlots.js";
 export interface GridToolbarFilterButtonProps {
-    /**
-     * The props used for each slot inside.
-     * @default {}
-     */
-    slotProps?: {
-        button?: Partial<ButtonProps>;
-        tooltip?: Partial<TooltipProps>;
-        badge?: Partial<BadgeProps>;
-    };
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps?: {
+    button?: Partial<ButtonProps>;
+    tooltip?: Partial<TooltipProps>;
+    badge?: Partial<BadgeProps>;
+  };
 }
 declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<GridToolbarFilterButtonProps> | React.ForwardRefExoticComponent<GridToolbarFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export { GridToolbarFilterButton };
+export { GridToolbarFilterButton };

package/components/toolbar/GridToolbarFilterButton.js

@@ -1,18 +1,27 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { gridColumnLookupSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
-import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
-import { gridFilterActiveItemsSelector } from "../../hooks/features/filter/gridFilterSelector.js";
-import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
-import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridToolbarFilterButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _cssVariables = require("../../constants/cssVariables");
+var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _gridFilterSelector = require("../../hooks/features/filter/gridFilterSelector");
+var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
+var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridClasses = require("../../constants/gridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -20,36 +29,34 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['toolbarFilterList']
   };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridToolbarFilterListRoot = styled('ul', {
+const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
   name: 'MuiDataGrid',
   slot: 'ToolbarFilterList',
   overridesResolver: (_props, styles) => styles.toolbarFilterList
-})(({
-  theme
-}) => ({
-  margin: theme.spacing(1, 1, 0.5),
-  padding: theme.spacing(0, 1)
-}));
+})({
+  margin: _cssVariables.vars.spacing(1, 1, 0.5),
+  padding: _cssVariables.vars.spacing(0, 1)
+});
 
 // FIXME(v8:romgrk): override slotProps
 
-const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(props, ref) {
+const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRef.forwardRef)(function GridToolbarFilterButton(props, ref) {
   const {
     slotProps = {}
   } = props;
   const buttonProps = slotProps.button || {};
   const tooltipProps = slotProps.tooltip || {};
   const badgeProps = slotProps.badge || {};
-  const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
-  const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
-  const lookup = useGridSelector(apiRef, gridColumnLookupSelector);
-  const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const activeFilters = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterActiveItemsSelector);
+  const lookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnLookupSelector);
+  const preferencePanel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const classes = useUtilityClasses(rootProps);
-  const filterButtonId = useId();
-  const filterPanelId = useId();
+  const filterButtonId = (0, _utils.unstable_useId)();
+  const filterPanelId = (0, _utils.unstable_useId)();
   const tooltipContentNode = React.useMemo(() => {
     if (preferencePanel.open) {
       return apiRef.current.getLocaleText('toolbarFiltersTooltipHide');
@@ -57,18 +64,18 @@ const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(prop
     if (activeFilters.length === 0) {
       return apiRef.current.getLocaleText('toolbarFiltersTooltipShow');
     }
-    const getOperatorLabel = item => lookup[item.field].filterOperators.find(operator => operator.value === item.operator).label || apiRef.current.getLocaleText(`filterOperator${capitalize(item.operator)}`).toString();
+    const getOperatorLabel = item => lookup[item.field].filterOperators.find(operator => operator.value === item.operator).label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(item.operator)}`).toString();
     const getFilterItemValue = item => {
       const {
         getValueAsString
       } = lookup[item.field].filterOperators.find(operator => operator.value === item.operator);
       return getValueAsString ? getValueAsString(item.value) : item.value;
     };
-    return /*#__PURE__*/_jsxs("div", {
-      children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/_jsx(GridToolbarFilterListRoot, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarFilterListRoot, {
         className: classes.root,
         ownerState: rootProps,
-        children: activeFilters.map((item, index) => _extends({}, lookup[item.field] && /*#__PURE__*/_jsx("li", {
+        children: activeFilters.map((item, index) => (0, _extends2.default)({}, lookup[item.field] && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
           children: `${lookup[item.field].headerName || item.field}
                   ${getOperatorLabel(item)}
                   ${
@@ -83,10 +90,10 @@ const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(prop
       open,
       openedPanelValue
     } = preferencePanel;
-    if (open && openedPanelValue === GridPreferencePanelsValue.filters) {
+    if (open && openedPanelValue === _gridPreferencePanelsValue.GridPreferencePanelsValue.filters) {
       apiRef.current.hidePreferences();
     } else {
-      apiRef.current.showPreferences(GridPreferencePanelsValue.filters, filterPanelId, filterButtonId);
+      apiRef.current.showPreferences(_gridPreferencePanelsValue.GridPreferencePanelsValue.filters, filterPanelId, filterButtonId);
     }
     buttonProps.onClick?.(event);
   };
@@ -96,22 +103,22 @@ const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(prop
     return null;
   }
   const isOpen = preferencePanel.open && preferencePanel.panelId === filterPanelId;
-  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
     title: tooltipContentNode,
     enterDelay: 1000
   }, rootProps.slotProps?.baseTooltip, tooltipProps, {
-    children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
       id: filterButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
       "aria-controls": isOpen ? filterPanelId : undefined,
       "aria-expanded": isOpen,
       "aria-haspopup": true,
-      startIcon: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, _extends({
+      startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, (0, _extends2.default)({
         badgeContent: activeFilters.length,
         color: "primary"
       }, rootProps.slotProps?.baseBadge, badgeProps, {
-        children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {})
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.openFilterButtonIcon, {})
       }))
     }, rootProps.slotProps?.baseButton, buttonProps, {
       onClick: toggleFilter,
@@ -135,6 +142,5 @@ process.env.NODE_ENV !== "production" ? GridToolbarFilterButton.propTypes = {
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: PropTypes.object
-} : void 0;
-export { GridToolbarFilterButton };
+  slotProps: _propTypes.default.object
+} : void 0;

package/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -1,36 +1,36 @@
 import * as React from 'react';
-import { TextFieldProps } from '../../models/gridBaseSlots';
-import { GridFilterModel } from '../../models/gridFilterModel';
+import { TextFieldProps } from "../../models/gridBaseSlots.js";
+import { GridFilterModel } from "../../models/gridFilterModel.js";
 export type GridToolbarQuickFilterProps = {
-    className?: string;
-    /**
-     * 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 !== '')
-     */
-    quickFilterParser?: (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(' ')
-     */
-    quickFilterFormatter?: (values: NonNullable<GridFilterModel['quickFilterValues']>) => string;
-    /**
-     * The debounce time in milliseconds.
-     * @default 150
-     */
-    debounceMs?: number;
-    slotProps?: {
-        root: TextFieldProps;
-    };
+  className?: string;
+  /**
+   * 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 !== '')
+   */
+  quickFilterParser?: (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(' ')
+   */
+  quickFilterFormatter?: (values: NonNullable<GridFilterModel['quickFilterValues']>) => string;
+  /**
+   * The debounce time in milliseconds.
+   * @default 150
+   */
+  debounceMs?: number;
+  slotProps?: {
+    root: TextFieldProps;
+  };
 };
 declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): React.JSX.Element;
 declare namespace GridToolbarQuickFilter {
-    var propTypes: any;
+  var propTypes: any;
 }
 /**
  * Demos:
@@ -40,4 +40,4 @@ declare namespace GridToolbarQuickFilter {
  * API:
  * - [GridToolbarQuickFilter API](https://mui.com/x/api/data-grid/grid-toolbar-quick-filter/)
  */
-export { GridToolbarQuickFilter };
+export { GridToolbarQuickFilter };

package/components/toolbar/GridToolbarQuickFilter.js

@@ -1,20 +1,29 @@
-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.GridToolbarQuickFilter = GridToolbarQuickFilter;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _OutlinedInput = require("@mui/material/OutlinedInput");
+var _cssVariables = require("../../constants/cssVariables");
+var _constants = require("../../constants");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _filter = require("../../hooks/features/filter");
+var _utils2 = require("../../utils/utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["quickFilterParser", "quickFilterFormatter", "debounceMs", "className", "slotProps"];
-import * as React from 'react';
-import clsx from 'clsx';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { unstable_debounce as debounce } from '@mui/utils';
-import composeClasses from '@mui/utils/composeClasses';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { getDataGridUtilityClass } from "../../constants/index.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
-import { gridQuickFilterValuesSelector } from "../../hooks/features/filter/index.js";
-import { isDeepEqual } from "../../utils/utils.js";
-import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -22,33 +31,31 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['toolbarQuickFilter']
   };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _constants.getDataGridUtilityClass, classes);
 };
-const GridToolbarQuickFilterRoot = styled('div', {
+const GridToolbarQuickFilterRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilter',
   overridesResolver: (props, styles) => styles.toolbarQuickFilter
-})(({
-  theme
-}) => ({
-  [`.${outlinedInputClasses.root}`]: {
-    fontSize: theme.typography.body2.fontSize
+})({
+  [`.${_OutlinedInput.outlinedInputClasses.root}`]: {
+    fontSize: _cssVariables.vars.typography.body.fontSize
   },
   [`& input[type="search"]::-webkit-search-decoration,
-  & input[type="search"]::-webkit-search-cancel-button,
-  & input[type="search"]::-webkit-search-results-button,
-  & input[type="search"]::-webkit-search-results-decoration`]: {
+    & input[type="search"]::-webkit-search-cancel-button,
+    & input[type="search"]::-webkit-search-results-button,
+    & input[type="search"]::-webkit-search-results-decoration`]: {
     /* clears the 'X' icon from Chrome */
     display: 'none'
   }
-}));
+});
 const defaultSearchValueParser = searchText => searchText.split(' ').filter(word => word !== '');
 const defaultSearchValueFormatter = values => values.join(' ');
 function GridToolbarQuickFilter(props) {
-  const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
+  const quickFilterValues = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridQuickFilterValuesSelector);
   const {
       quickFilterParser = defaultSearchValueParser,
       quickFilterFormatter = defaultSearchValueFormatter,
@@ -56,16 +63,16 @@ function GridToolbarQuickFilter(props) {
       className,
       slotProps
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [searchValue, setSearchValue] = React.useState(() => quickFilterFormatter(quickFilterValues ?? []));
   const prevQuickFilterValuesRef = React.useRef(quickFilterValues);
   React.useEffect(() => {
-    if (!isDeepEqual(prevQuickFilterValuesRef.current, quickFilterValues)) {
+    if (!(0, _utils2.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
-      setSearchValue(prevSearchValue => isDeepEqual(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues ?? []));
+      setSearchValue(prevSearchValue => (0, _utils2.isDeepEqual)(quickFilterParser(prevSearchValue), quickFilterValues) ? prevSearchValue : quickFilterFormatter(quickFilterValues ?? []));
     }
   }, [quickFilterValues, quickFilterFormatter, quickFilterParser]);
   const updateSearchValue = React.useCallback(newSearchValue => {
@@ -73,7 +80,7 @@ function GridToolbarQuickFilter(props) {
     prevQuickFilterValuesRef.current = newQuickFilterValues;
     apiRef.current.setQuickFilterValues(newQuickFilterValues);
   }, [apiRef, quickFilterParser]);
-  const debouncedUpdateSearchValue = React.useMemo(() => debounce(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
+  const debouncedUpdateSearchValue = React.useMemo(() => (0, _utils.unstable_debounce)(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
   React.useEffect(() => debouncedUpdateSearchValue.clear, [debouncedUpdateSearchValue]);
   const handleSearchValueChange = React.useCallback(event => {
     const newSearchValue = event.target.value;
@@ -84,43 +91,37 @@ function GridToolbarQuickFilter(props) {
     setSearchValue('');
     updateSearchValue('');
   }, [updateSearchValue]);
-  return /*#__PURE__*/_jsx(GridToolbarQuickFilterRoot, _extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarQuickFilterRoot, (0, _extends2.default)({
     as: rootProps.slots.baseTextField,
     ownerState: rootProps,
     size: "small",
     value: searchValue,
     onChange: handleSearchValueChange,
-    className: clsx(classes.root, className),
+    className: (0, _clsx.default)(classes.root, className),
     placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
     type: "search"
   }, other, {
-    slotProps: _extends({}, slotProps?.root.slotProps, {
-      input: _extends({
-        startAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-          position: "start",
-          children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterIcon, {
+    slotProps: (0, _extends2.default)({}, slotProps?.root.slotProps, {
+      input: (0, _extends2.default)({
+        startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {
+          fontSize: "small"
+        }),
+        endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+          "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
+          size: "small",
+          edge: "end",
+          style: searchValue ? {
+            visibility: 'visible'
+          } : {
+            visibility: 'hidden'
+          },
+          onClick: handleSearchReset
+        }, rootProps.slotProps?.baseIconButton, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
             fontSize: "small"
           })
-        }),
-        endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
-          position: "end",
-          children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-            "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
-            size: "small",
-            edge: "end",
-            style: searchValue ? {
-              visibility: 'visible'
-            } : {
-              visibility: 'hidden'
-            },
-            onClick: handleSearchReset
-          }, rootProps.slotProps?.baseIconButton, {
-            children: /*#__PURE__*/_jsx(rootProps.slots.quickFilterClearIcon, {
-              fontSize: "small"
-            })
-          }))
-        })
+        }))
       }, slotProps?.root.slotProps?.input)
     })
   }, rootProps.slotProps?.baseTextField));
@@ -130,19 +131,19 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  className: PropTypes.string,
+  className: _propTypes.default.string,
   /**
    * The debounce time in milliseconds.
    * @default 150
    */
-  debounceMs: PropTypes.number,
+  debounceMs: _propTypes.default.number,
   /**
    * 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(' ')
    */
-  quickFilterFormatter: PropTypes.func,
+  quickFilterFormatter: _propTypes.default.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
@@ -151,8 +152,8 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
    *   .split(' ')
    *   .filter((word) => word !== '')
    */
-  quickFilterParser: PropTypes.func,
-  slotProps: PropTypes.object
+  quickFilterParser: _propTypes.default.func,
+  slotProps: _propTypes.default.object
 } : void 0;
 
 /**
@@ -162,5 +163,4 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
  *
  * API:
  * - [GridToolbarQuickFilter API](https://mui.com/x/api/data-grid/grid-toolbar-quick-filter/)
- */
-export { GridToolbarQuickFilter };
+ */

package/components/toolbar/index.d.ts

@@ -1,8 +1,8 @@
-export * from './GridToolbar';
-export * from './GridToolbarColumnsButton';
-export * from './GridToolbarDensitySelector';
-export type { GridExportDisplayOptions, GridExportMenuItemProps, GridCsvExportMenuItemProps, GridPrintExportMenuItemProps, GridToolbarExportProps, } from './GridToolbarExport';
-export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport, } from './GridToolbarExport';
-export * from './GridToolbarFilterButton';
-export * from './GridToolbarExportContainer';
-export * from './GridToolbarQuickFilter';
+export * from "./GridToolbar.js";
+export * from "./GridToolbarColumnsButton.js";
+export * from "./GridToolbarDensitySelector.js";
+export type { GridExportDisplayOptions, GridExportMenuItemProps, GridCsvExportMenuItemProps, GridPrintExportMenuItemProps, GridToolbarExportProps } from './GridToolbarExport';
+export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport } from "./GridToolbarExport.js";
+export * from "./GridToolbarFilterButton.js";
+export * from "./GridToolbarExportContainer.js";
+export * from "./GridToolbarQuickFilter.js";