@mui/x-data-grid 8.4.0 → 8.5.1

package/components/panel/filterPanel/GridFilterForm.js

@@ -12,7 +12,9 @@ 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 _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _styles = require("@mui/material/styles");
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _cssVariables = require("../../../constants/cssVariables");
@@ -40,7 +42,7 @@ const useUtilityClasses = ownerState => {
     operatorInput: ['filterFormOperatorInput'],
     valueInput: ['filterFormValueInput']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridFilterFormRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
@@ -120,10 +122,10 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
   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 columnSelectId = (0, _useId.default)();
+  const columnSelectLabelId = (0, _useId.default)();
+  const operatorSelectId = (0, _useId.default)();
+  const operatorSelectLabelId = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   const valueRef = React.useRef(null);
@@ -348,7 +350,7 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
         native: isBaseSelectNative,
         key: operator.value,
         value: operator.value
-      }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _utils.unstable_capitalize)(operator.value)}`)))
+      }), operator.label || apiRef.current.getLocaleText(`filterOperator${(0, _capitalize.default)(operator.value)}`)))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(FilterFormValueInput, (0, _extends2.default)({}, valueInputPropsOther, {
       className: (0, _clsx.default)(classes.valueInput, valueInputPropsOther.className),
       ownerState: rootProps,
@@ -367,6 +369,7 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
     }))]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridFilterForm.displayName = "GridFilterForm";
 process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -11,7 +11,8 @@ 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 _utils = require("@mui/utils");
+var _refType = _interopRequireDefault(require("@mui/utils/refType"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "headerFilterMenu", "clearButton", "tabIndex", "slotProps"];
@@ -29,8 +30,8 @@ function GridFilterInputBoolean(props) {
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const labelId = (0, _utils.unstable_useId)();
-  const selectId = (0, _utils.unstable_useId)();
+  const labelId = (0, _useId.default)();
+  const selectId = (0, _useId.default)();
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
   const isSelectNative = baseSelectProps.native ?? false;
   const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
@@ -99,7 +100,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   className: _propTypes.default.string,
   clearButton: _propTypes.default.node,
   disabled: _propTypes.default.bool,
-  focusElementRef: _utils.refType,
+  focusElementRef: _refType.default,
   headerFilterMenu: _propTypes.default.node,
   inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     current: (props, propName) => {

package/components/panel/filterPanel/GridFilterInputDate.js

@@ -10,7 +10,7 @@ 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 _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useTimeout = require("../../../hooks/utils/useTimeout");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -53,7 +53,7 @@ function GridFilterInputDate(props) {
   const filterTimeout = (0, _useTimeout.useTimeout)();
   const [filterValueState, setFilterValueState] = React.useState(() => convertFilterItemValueToInputValue(item.value, type));
   const [applying, setIsApplying] = React.useState(false);
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const onFilterChange = React.useCallback(event => {
     filterTimeout.clear();

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -10,7 +10,7 @@ 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 _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,7 +25,7 @@ function GridFilterInputMultipleSingleSelect(props) {
       slotProps
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   let resolvedColumn = null;
   if (item.field) {

package/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -9,7 +9,7 @@ exports.GridFilterInputMultipleValue = GridFilterInputMultipleValue;
 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 _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridFilterInputMultipleValue(props) {
@@ -21,7 +21,7 @@ function GridFilterInputMultipleValue(props) {
     focusElementRef,
     slotProps
   } = props;
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const [options, setOptions] = React.useState([]);
   const [filterValueState, setFilterValueState] = React.useState(item.value || []);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -52,8 +52,8 @@ function GridFilterInputSingleSelect(props) {
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterValue = item.value ?? '';
-  const id = (0, _utils.unstable_useId)();
-  const labelId = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
+  const labelId = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isSelectNative = rootProps.slotProps?.baseSelect?.native ?? false;
   let resolvedColumn = null;

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -10,7 +10,7 @@ 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 _utils = require("@mui/utils");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useTimeout = require("../../../hooks/utils/useTimeout");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -33,7 +33,7 @@ function GridFilterInputValue(props) {
   const filterTimeout = (0, _useTimeout.useTimeout)();
   const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const [applying, setIsApplying] = React.useState(false);
-  const id = (0, _utils.unstable_useId)();
+  const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const onFilterChange = React.useCallback(event => {
     const value = sanitizeFilterItemValue(event.target.value);

package/components/panel/filterPanel/GridFilterPanel.js

@@ -193,6 +193,7 @@ const GridFilterPanel = exports.GridFilterPanel = (0, _forwardRef.forwardRef)(fu
     }) : null]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridFilterPanel.displayName = "GridFilterPanel";
 process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/quickFilter/QuickFilter.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import { QuickFilterState } from "./QuickFilterContext.js";
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
 import type { GridFilterModel } from "../../models/index.js";
 export type QuickFilterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {
   /**

package/components/quickFilter/QuickFilter.js

@@ -10,12 +10,12 @@ 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 _utils = require("@mui/utils");
+var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _QuickFilterContext = require("./QuickFilterContext");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _filter = require("../../hooks/features/filter");
@@ -107,7 +107,7 @@ function QuickFilter(props) {
       previousExpandedValue.current = expandedValue;
     }
   }, [expandedValue]);
-  const setQuickFilterValueDebounced = React.useMemo(() => (0, _utils.unstable_debounce)(newValue => {
+  const setQuickFilterValueDebounced = React.useMemo(() => (0, _debounce.default)(newValue => {
     const newQuickFilterValues = parser(newValue);
     prevQuickFilterValuesRef.current = newQuickFilterValues;
     apiRef.current.setQuickFilterValues(newQuickFilterValues);
@@ -137,7 +137,7 @@ function QuickFilter(props) {
       ref.current.style.setProperty('--trigger-width', `${triggerRef.current?.offsetWidth}px`);
     }
   }, []);
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)('div', render, (0, _extends2.default)({
+  const element = (0, _useComponentRenderer.useComponentRenderer)('div', render, (0, _extends2.default)({
     className: resolvedClassName
   }, other, {
     ref

package/components/quickFilter/QuickFilterClear.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 import { QuickFilterState } from "./QuickFilterContext.js";
 export type QuickFilterClearProps = Omit<GridSlotProps['baseIconButton'], 'className'> & {

package/components/quickFilter/QuickFilterClear.js

@@ -11,8 +11,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _QuickFilterContext = require("./QuickFilterContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className", "onClick"];
@@ -45,7 +45,7 @@ const QuickFilterClear = exports.QuickFilterClear = (0, _forwardRef.forwardRef)(
     clearValue();
     onClick?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
     className: resolvedClassName,
     tabIndex: -1
   }, other, {
@@ -56,6 +56,7 @@ const QuickFilterClear = exports.QuickFilterClear = (0, _forwardRef.forwardRef)(
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") QuickFilterClear.displayName = "QuickFilterClear";
 process.env.NODE_ENV !== "production" ? QuickFilterClear.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/quickFilter/QuickFilterControl.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 import { QuickFilterState } from "./QuickFilterContext.js";
 export type QuickFilterControlProps = Omit<GridSlotProps['baseTextField'], 'className'> & {

package/components/quickFilter/QuickFilterControl.js

@@ -10,10 +10,10 @@ 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 _utils = require("@mui/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _QuickFilterContext = require("./QuickFilterContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className", "slotProps", "onKeyDown", "onChange"];
@@ -48,7 +48,7 @@ const QuickFilterControl = exports.QuickFilterControl = (0, _forwardRef.forwardR
     clearValue
   } = (0, _QuickFilterContext.useQuickFilterContext)();
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
-  const handleRef = (0, _utils.unstable_useForkRef)(controlRef, ref);
+  const handleRef = (0, _useForkRef.default)(controlRef, ref);
   const handleKeyDown = event => {
     if (event.key === 'Escape') {
       if (state.value === '') {
@@ -72,7 +72,7 @@ const QuickFilterControl = exports.QuickFilterControl = (0, _forwardRef.forwardR
     onValueChange(event);
     onChange?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseTextField, render, (0, _extends2.default)({}, rootProps.slotProps?.baseTextField, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseTextField, render, (0, _extends2.default)({}, rootProps.slotProps?.baseTextField, {
     slotProps: (0, _extends2.default)({
       htmlInput: (0, _extends2.default)({
         role: 'searchbox',
@@ -93,6 +93,7 @@ const QuickFilterControl = exports.QuickFilterControl = (0, _forwardRef.forwardR
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") QuickFilterControl.displayName = "QuickFilterControl";
 process.env.NODE_ENV !== "production" ? QuickFilterControl.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/quickFilter/QuickFilterTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 import { QuickFilterState } from "./QuickFilterContext.js";
 export type QuickFilterTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {

package/components/quickFilter/QuickFilterTrigger.js

@@ -11,9 +11,9 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
-var _utils = require("@mui/utils");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _QuickFilterContext = require("./QuickFilterContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className", "onClick"];
@@ -44,12 +44,12 @@ const QuickFilterTrigger = exports.QuickFilterTrigger = (0, _forwardRef.forwardR
     triggerRef
   } = (0, _QuickFilterContext.useQuickFilterContext)();
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
-  const handleRef = (0, _utils.unstable_useForkRef)(triggerRef, ref);
+  const handleRef = (0, _useForkRef.default)(triggerRef, ref);
   const handleClick = event => {
     onExpandedChange(!state.expanded);
     onClick?.(event);
   };
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {
     className: resolvedClassName,
     'aria-controls': controlId,
     'aria-expanded': state.expanded
@@ -61,6 +61,7 @@ const QuickFilterTrigger = exports.QuickFilterTrigger = (0, _forwardRef.forwardR
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") QuickFilterTrigger.displayName = "QuickFilterTrigger";
 process.env.NODE_ENV !== "production" ? QuickFilterTrigger.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/toolbar/GridToolbar.js

@@ -18,7 +18,7 @@ var _GridToolbarFilterButton = require("./GridToolbarFilterButton");
 var _GridToolbarExport = require("./GridToolbarExport");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridToolbarQuickFilter = require("./GridToolbarQuickFilter");
-var _GridToolbar = require("../toolbarV8/GridToolbar");
+var _GridToolbar2 = require("../toolbarV8/GridToolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
 /**
@@ -42,7 +42,7 @@ const GridToolbar = exports.GridToolbar = (0, _forwardRef.forwardRef)(function G
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridToolbarContainer.GridToolbarContainer, (0, _extends2.default)({}, other, {
     ref: ref,
-    children: [rootProps.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbar.GridToolbarLabel, {
+    children: [rootProps.label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbar2.GridToolbarLabel, {
       children: rootProps.label
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarColumnsButton.GridToolbarColumnsButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarFilterButton.GridToolbarFilterButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarDensitySelector.GridToolbarDensitySelector, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarExport.GridToolbarExport, {
       csvOptions: csvOptions,
@@ -57,6 +57,7 @@ const GridToolbar = exports.GridToolbar = (0, _forwardRef.forwardRef)(function G
     }), showQuickFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridToolbarQuickFilter.GridToolbarQuickFilter, (0, _extends2.default)({}, quickFilterProps))]
   }));
 });
+if (process.env.NODE_ENV !== "production") GridToolbar.displayName = "GridToolbar";
 process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/toolbar/GridToolbarColumnsButton.js

@@ -76,6 +76,7 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = (0, _forward
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") GridToolbarColumnsButton.displayName = "GridToolbarColumnsButton";
 process.env.NODE_ENV !== "production" ? GridToolbarColumnsButton.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/toolbar/GridToolbarDensitySelector.js

@@ -9,7 +9,8 @@ exports.GridToolbarDensitySelector = 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 _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
 var _keyboardUtils = require("../../utils/keyboardUtils");
@@ -31,11 +32,11 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = (0, _for
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const density = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensitySelector);
-  const densityButtonId = (0, _utils.unstable_useId)();
-  const densityMenuId = (0, _utils.unstable_useId)();
+  const densityButtonId = (0, _useId.default)();
+  const densityMenuId = (0, _useId.default)();
   const [open, setOpen] = React.useState(false);
   const buttonRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(ref, buttonRef);
+  const handleRef = (0, _useForkRef.default)(ref, buttonRef);
   const densityOptions = [{
     icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.densityCompactIcon, {}),
     label: apiRef.current.getLocaleText('toolbarDensityCompact'),
@@ -123,6 +124,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = (0, _for
     })]
   });
 });
+if (process.env.NODE_ENV !== "production") GridToolbarDensitySelector.displayName = "GridToolbarDensitySelector";
 process.env.NODE_ENV !== "production" ? GridToolbarDensitySelector.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/toolbar/GridToolbarExport.js

@@ -122,6 +122,7 @@ const GridToolbarExport = exports.GridToolbarExport = (0, _forwardRef.forwardRef
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") GridToolbarExport.displayName = "GridToolbarExport";
 process.env.NODE_ENV !== "production" ? GridToolbarExport.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/toolbar/GridToolbarExportContainer.js

@@ -9,7 +9,8 @@ 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 _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
@@ -26,11 +27,11 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = (0, _for
   const tooltipProps = slotProps.tooltip || {};
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const exportButtonId = (0, _utils.unstable_useId)();
-  const exportMenuId = (0, _utils.unstable_useId)();
+  const exportButtonId = (0, _useId.default)();
+  const exportMenuId = (0, _useId.default)();
   const [open, setOpen] = React.useState(false);
   const buttonRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(ref, buttonRef);
+  const handleRef = (0, _useForkRef.default)(ref, buttonRef);
   const handleMenuOpen = event => {
     setOpen(prevOpen => !prevOpen);
     buttonProps.onClick?.(event);
@@ -88,6 +89,7 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = (0, _for
     })]
   });
 });
+if (process.env.NODE_ENV !== "production") GridToolbarExportContainer.displayName = "GridToolbarExportContainer";
 process.env.NODE_ENV !== "production" ? GridToolbarExportContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/toolbar/GridToolbarFilterButton.js

@@ -10,7 +10,9 @@ 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 _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _cssVariables = require("../../constants/cssVariables");
@@ -31,7 +33,7 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['toolbarFilterList']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
   name: 'MuiDataGrid',
@@ -56,8 +58,8 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRe
   const lookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnLookupSelector);
   const preferencePanel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const classes = useUtilityClasses(rootProps);
-  const filterButtonId = (0, _utils.unstable_useId)();
-  const filterPanelId = (0, _utils.unstable_useId)();
+  const filterButtonId = (0, _useId.default)();
+  const filterPanelId = (0, _useId.default)();
   const {
     filterPanelTriggerRef
   } = (0, _GridPanelContext.useGridPanelContext)();
@@ -69,7 +71,7 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRe
     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${(0, _utils.unstable_capitalize)(item.operator)}`).toString();
+    const getOperatorLabel = item => lookup[item.field].filterOperators.find(operator => operator.value === item.operator).label || apiRef.current.getLocaleText(`filterOperator${(0, _capitalize.default)(item.operator)}`).toString();
     const getFilterItemValue = item => {
       const {
         getValueAsString
@@ -138,6 +140,7 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRe
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") GridToolbarFilterButton.displayName = "GridToolbarFilterButton";
 process.env.NODE_ENV !== "production" ? GridToolbarFilterButton.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/toolbarV8/Toolbar.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
    * A function to customize rendering of the component.

package/components/toolbarV8/Toolbar.js

@@ -14,9 +14,9 @@ var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _cssVariables = require("../../constants/cssVariables");
 var _gridClasses = require("../../constants/gridClasses");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _ToolbarContext = require("./ToolbarContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _utils = require("./utils");
@@ -187,7 +187,7 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
     onItemFocus,
     onItemDisabled
   }), [focusableItemId, registerItem, unregisterItem, onItemKeyDown, onItemFocus, onItemDisabled]);
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(ToolbarRoot, render, (0, _extends2.default)({
+  const element = (0, _useComponentRenderer.useComponentRenderer)(ToolbarRoot, render, (0, _extends2.default)({
     role: 'toolbar',
     'aria-orientation': 'horizontal',
     'aria-label': rootProps.label || undefined,
@@ -200,6 +200,7 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") Toolbar.displayName = "Toolbar";
 process.env.NODE_ENV !== "production" ? Toolbar.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/toolbarV8/ToolbarButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
 import type { GridSlotProps } from "../../models/index.js";
 export type ToolbarButtonProps = GridSlotProps['baseIconButton'] & {
   /**

package/components/toolbarV8/ToolbarButton.js

@@ -10,11 +10,11 @@ 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 _utils = require("@mui/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridComponentRenderer = require("../../hooks/utils/useGridComponentRenderer");
 var _ToolbarContext = require("./ToolbarContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"];
@@ -42,7 +42,7 @@ const ToolbarButton = exports.ToolbarButton = (0, _forwardRef.forwardRef)(functi
   const id = (0, _useId.default)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const buttonRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(buttonRef, ref);
+  const handleRef = (0, _useForkRef.default)(buttonRef, ref);
   const {
     focusableItemId,
     registerItem,
@@ -78,7 +78,7 @@ const ToolbarButton = exports.ToolbarButton = (0, _forwardRef.forwardRef)(functi
     }
     previousAriaDisabled.current = ariaDisabled;
   }, [ariaDisabled, id, onItemDisabled]);
-  const element = (0, _useGridComponentRenderer.useGridComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
+  const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseIconButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseIconButton, {
     tabIndex: focusableItemId === id ? 0 : -1
   }, other, {
     disabled,
@@ -91,6 +91,7 @@ const ToolbarButton = exports.ToolbarButton = (0, _forwardRef.forwardRef)(functi
     children: element
   });
 });
+if (process.env.NODE_ENV !== "production") ToolbarButton.displayName = "ToolbarButton";
 process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/components/virtualization/GridMainContainer.js

@@ -56,4 +56,5 @@ const GridMainContainer = exports.GridMainContainer = (0, _forwardRef.forwardRef
       "data-id": "gridPanelAnchor"
     }), props.children]
   }));
-});
+});
+if (process.env.NODE_ENV !== "production") GridMainContainer.displayName = "GridMainContainer";

package/components/virtualization/GridVirtualScrollbar.js

@@ -152,4 +152,5 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forw
       className: classes.content
     })
   });
-});
+});
+if (process.env.NODE_ENV !== "production") GridVirtualScrollbar.displayName = "GridVirtualScrollbar";