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

package/components/containers/GridRootStyles.js

@@ -264,7 +264,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   const baseBackground = _cssVariables.vars.colors.background.base;
   const headerBackground = _cssVariables.vars.header.background.base;
   const pinnedBackground = _cssVariables.vars.cell.background.pinned;
-  const hoverColor = _cssVariables.vars.colors.interactive.hover;
+  const hoverColor = removeOpacity(_cssVariables.vars.colors.interactive.hover);
   const hoverOpacity = _cssVariables.vars.colors.interactive.hoverOpacity;
   const selectedColor = _cssVariables.vars.colors.interactive.selected;
   const selectedOpacity = _cssVariables.vars.colors.interactive.selectedOpacity;
@@ -337,6 +337,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     overflow: 'hidden',
     overflowAnchor: 'none',
     // Keep the same scrolling position
+    transform: 'translate(0, 0)',
+    // Create a stacking context to keep scrollbars from showing on top
+
     [`.${_gridClasses.gridClasses.main} > *:first-child${ignoreSsrWarning}`]: {
       borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
       borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
@@ -367,6 +370,15 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         width: 'unset'
       }
     },
+    [`&.${_gridClasses.gridClasses.withSidePanel}`]: {
+      flexDirection: 'row'
+    },
+    [`& .${_gridClasses.gridClasses.mainContent}`]: {
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      flex: 1
+    },
     [`& .${_gridClasses.gridClasses.columnHeader}, & .${_gridClasses.gridClasses.cell}`]: {
       WebkitTapHighlightColor: 'transparent',
       padding: '0 10px',
@@ -432,11 +444,14 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['virtualScroller--hasScrollX']} .${_gridClasses.gridClasses['columnHeader--last']}`]: {
       overflow: 'hidden'
     },
-    [`& .${_gridClasses.gridClasses['columnHeader--sorted']} .${_gridClasses.gridClasses.iconButtonContainer}, & .${_gridClasses.gridClasses['columnHeader--filtered']} .${_gridClasses.gridClasses.iconButtonContainer}`]: {
+    [`& .${_gridClasses.gridClasses['pivotPanelField--sorted']} .${_gridClasses.gridClasses.iconButtonContainer},
+      & .${_gridClasses.gridClasses['columnHeader--sorted']} .${_gridClasses.gridClasses.iconButtonContainer},
+      & .${_gridClasses.gridClasses['columnHeader--filtered']} .${_gridClasses.gridClasses.iconButtonContainer}`]: {
       visibility: 'visible',
       width: 'auto'
     },
-    [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}) .${_gridClasses.gridClasses.sortIcon}`]: {
+    [`& .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}) .${_gridClasses.gridClasses.sortButton},
+      & .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}) .${_gridClasses.gridClasses.sortButton}`]: {
       opacity: 0,
       transition: _cssVariables.vars.transition(['opacity'], {
         duration: _cssVariables.vars.transitions.duration.short
@@ -506,7 +521,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     '@media (hover: hover)': {
       [`& .${_gridClasses.gridClasses.columnHeader}:hover`]: columnHeaderStyles,
-      [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}):hover .${_gridClasses.gridClasses.sortIcon}`]: {
+      [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}):hover .${_gridClasses.gridClasses.sortButton},
+        & .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}):hover .${_gridClasses.gridClasses.sortButton},
+        & .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}) .${_gridClasses.gridClasses.sortButton}:focus-visible`]: {
         opacity: 0.5
       }
     },
@@ -517,6 +534,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         [`.${_gridClasses.gridClasses['columnSeparator--resizable']}`]: {
           color: _cssVariables.vars.colors.foreground.accent
         }
+      },
+      [`& .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}) .${_gridClasses.gridClasses.sortButton}`]: {
+        opacity: 0.5
       }
     },
     [`& .${_gridClasses.gridClasses['columnSeparator--sideLeft']}`]: {
@@ -850,6 +870,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
 function setOpacity(color, opacity) {
   return `rgba(from ${color} r g b / ${opacity})`;
 }
+function removeOpacity(color) {
+  return setOpacity(color, 1);
+}
 function mix(background, overlay, opacity) {
   return `color-mix(in srgb,${background}, ${overlay} calc(${opacity} * 100%))`;
 }

package/components/containers/GridToolbarContainer.d.ts

@@ -3,6 +3,9 @@ import { SxProps, Theme } from '@mui/system';
 export type GridToolbarContainerProps = React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 };
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/toolbar/ Toolbar} component instead. This component will be removed in a future major release.
+ */
 declare const GridToolbarContainer: React.ForwardRefExoticComponent<GridToolbarContainerProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
   sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;

package/components/containers/GridToolbarContainer.js

@@ -41,6 +41,10 @@ const GridToolbarContainerRoot = (0, _system.styled)(_toolbarV.Toolbar, {
   padding: _cssVariables.vars.spacing(0.5),
   minHeight: 'auto'
 });
+
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/toolbar/ Toolbar} component instead. This component will be removed in a future major release.
+ */
 const GridToolbarContainer = exports.GridToolbarContainer = (0, _forwardRef.forwardRef)(function GridToolbarContainer(props, ref) {
   const {
       className,

package/components/filterPanel/FilterPanelTrigger.js

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _GridPreferencePanelContext = require("../panel/GridPreferencePanelContext");
+var _GridPanelContext = require("../panel/GridPanelContext");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _hooks = require("../../hooks");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -55,7 +55,7 @@ const FilterPanelTrigger = exports.FilterPanelTrigger = (0, _forwardRef.forwardR
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const {
     filterPanelTriggerRef
-  } = (0, _GridPreferencePanelContext.useGridPreferencePanelContext)();
+  } = (0, _GridPanelContext.useGridPanelContext)();
   const handleRef = (0, _useForkRef.default)(ref, filterPanelTriggerRef);
   const handleClick = event => {
     if (open) {

package/components/index.d.ts

@@ -18,6 +18,7 @@ export { GridPagination } from "./GridPagination.js";
 export * from "./GridRowCount.js";
 export * from "./GridRow.js";
 export * from "./GridSelectedRowCount.js";
+export * from "./GridShadowScrollArea.js";
 export * from "./columnsPanel/index.js";
 export * from "./export/index.js";
 export * from "./filterPanel/index.js";

package/components/index.js

@@ -241,6 +241,18 @@ Object.keys(_GridSelectedRowCount).forEach(function (key) {
     }
   });
 });
+var _GridShadowScrollArea = require("./GridShadowScrollArea");
+Object.keys(_GridShadowScrollArea).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridShadowScrollArea[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridShadowScrollArea[key];
+    }
+  });
+});
 var _columnsPanel = require("./columnsPanel");
 Object.keys(_columnsPanel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/components/panel/GridPanel.d.ts

@@ -14,6 +14,7 @@ export interface GridPanelProps extends Pick<GridSlotProps['basePopper'], 'id' |
    */
   classes?: Partial<GridPanelClasses>;
   open: boolean;
+  onClose?: () => void;
 }
 export declare const gridPanelClasses: Record<keyof GridPanelClasses, string>;
 declare const GridPanel: React.ForwardRefExoticComponent<GridPanelProps> | React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/components/panel/GridPanel.js

@@ -21,7 +21,7 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _assert = require("../../utils/assert");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "classes"];
+const _excluded = ["children", "className", "classes", "onClose"];
 const gridPanelClasses = exports.gridPanelClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['panel', 'paper']);
 const GridPanelRoot = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
@@ -36,16 +36,16 @@ const GridPanelContent = (0, _styles.styled)('div', {
   backgroundColor: _cssVariables.vars.colors.background.overlay,
   borderRadius: _cssVariables.vars.radius.base,
   boxShadow: _cssVariables.vars.shadows.overlay,
-  minWidth: 300,
-  maxHeight: 450,
   display: 'flex',
-  maxWidth: `calc(100vw - ${_cssVariables.vars.spacing(0.5)})`,
+  maxWidth: `calc(100vw - ${_cssVariables.vars.spacing(2)})`,
+  margin: _cssVariables.vars.spacing(1),
   overflow: 'auto'
 });
 const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) => {
   const {
       children,
-      className
+      className,
+      onClose
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -56,11 +56,11 @@ const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) =
   const onDidShow = (0, _useEventCallback.default)(() => setIsPlaced(true));
   const onDidHide = (0, _useEventCallback.default)(() => setIsPlaced(false));
   const handleClickAway = (0, _useEventCallback.default)(() => {
-    apiRef.current.hidePreferences();
+    onClose?.();
   });
   const handleKeyDown = (0, _useEventCallback.default)(event => {
     if (event.key === 'Escape') {
-      apiRef.current.hidePreferences();
+      onClose?.();
     }
   });
   const [fallbackTarget, setFallbackTarget] = React.useState(null);
@@ -109,6 +109,7 @@ process.env.NODE_ENV !== "production" ? GridPanel.propTypes = {
   className: _propTypes.default.string,
   flip: _propTypes.default.bool,
   id: _propTypes.default.string,
+  onClose: _propTypes.default.func,
   open: _propTypes.default.bool.isRequired,
   target: _propTypes.default /* @typescript-to-proptypes-ignore */.any
 } : void 0;

package/components/panel/GridPanelContext.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface GridPanelContextValue {
+  columnsPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
+  filterPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
+  aiAssistantPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
+}
+export declare const GridPanelContext: React.Context<GridPanelContextValue | undefined>;
+export declare function useGridPanelContext(): GridPanelContextValue;
+export declare function GridPanelContextProvider({
+  children
+}: {
+  children: React.ReactNode;
+}): React.JSX.Element;

package/components/panel/{GridPreferencePanelContext.js → GridPanelContext.js}

@@ -4,29 +4,31 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridPreferencePanelContext = void 0;
-exports.GridPreferencePanelContextProvider = GridPreferencePanelContextProvider;
-exports.useGridPreferencePanelContext = useGridPreferencePanelContext;
+exports.GridPanelContext = void 0;
+exports.GridPanelContextProvider = GridPanelContextProvider;
+exports.useGridPanelContext = useGridPanelContext;
 var React = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
-const GridPreferencePanelContext = exports.GridPreferencePanelContext = /*#__PURE__*/React.createContext(undefined);
-function useGridPreferencePanelContext() {
-  const context = React.useContext(GridPreferencePanelContext);
+const GridPanelContext = exports.GridPanelContext = /*#__PURE__*/React.createContext(undefined);
+function useGridPanelContext() {
+  const context = React.useContext(GridPanelContext);
   if (context === undefined) {
     throw new Error('MUI X: Missing context.');
   }
   return context;
 }
-function GridPreferencePanelContextProvider({
+function GridPanelContextProvider({
   children
 }) {
   const columnsPanelTriggerRef = React.useRef(null);
   const filterPanelTriggerRef = React.useRef(null);
+  const aiAssistantPanelTriggerRef = React.useRef(null);
   const value = React.useMemo(() => ({
     columnsPanelTriggerRef,
-    filterPanelTriggerRef
+    filterPanelTriggerRef,
+    aiAssistantPanelTriggerRef
   }), []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPreferencePanelContext.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelContext.Provider, {
     value: value,
     children: children
   });

package/components/panel/GridPreferencesPanel.js

@@ -14,7 +14,7 @@ var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPane
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _GridPreferencePanelContext = require("./GridPreferencePanelContext");
+var _GridPanelContext = require("./GridPanelContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridPreferencesPanel() {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -23,14 +23,29 @@ function GridPreferencesPanel() {
   const preferencePanelState = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const {
     columnsPanelTriggerRef,
-    filterPanelTriggerRef
-  } = (0, _GridPreferencePanelContext.useGridPreferencePanelContext)();
+    filterPanelTriggerRef,
+    aiAssistantPanelTriggerRef
+  } = (0, _GridPanelContext.useGridPanelContext)();
   const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? _gridPreferencePanelsValue.GridPreferencePanelsValue.filters);
+  let target = null;
+  switch (preferencePanelState.openedPanelValue) {
+    case _gridPreferencePanelsValue.GridPreferencePanelsValue.filters:
+      target = filterPanelTriggerRef.current;
+      break;
+    case _gridPreferencePanelsValue.GridPreferencePanelsValue.columns:
+      target = columnsPanelTriggerRef.current;
+      break;
+    case _gridPreferencePanelsValue.GridPreferencePanelsValue.aiAssistant:
+      target = aiAssistantPanelTriggerRef.current;
+      break;
+    default:
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.panel, (0, _extends2.default)({
     id: preferencePanelState.panelId,
     open: columns.length > 0 && preferencePanelState.open,
     "aria-labelledby": preferencePanelState.labelId,
-    target: preferencePanelState.openedPanelValue === _gridPreferencePanelsValue.GridPreferencePanelsValue.filters ? filterPanelTriggerRef.current : columnsPanelTriggerRef.current
+    target: target,
+    onClose: () => apiRef.current.hidePreferences()
   }, rootProps.slotProps?.panel, {
     children: panelContent
   }));

package/components/panel/filterPanel/GridFilterForm.js

@@ -24,6 +24,7 @@ var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../../constants/gridClasses");
 var _filterPanelUtils = require("./filterPanelUtils");
+var _pivoting = require("../../../hooks/features/pivoting");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "logicOperators", "columnsSort", "filterColumns", "deleteIconProps", "logicOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "readOnly", "children"],
   _excluded2 = ["InputComponentProps"];
@@ -142,6 +143,8 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
       InputComponentProps
     } = valueInputProps,
     valueInputPropsOther = (0, _objectWithoutPropertiesLoose2.default)(valueInputProps, _excluded2);
+  const pivotActive = (0, _useGridSelector.useGridSelector)(apiRef, _pivoting.gridPivotActiveSelector);
+  const initialColumns = (0, _useGridSelector.useGridSelector)(apiRef, _pivoting.gridPivotInitialColumnsSelector);
   const {
     filteredColumns,
     selectedField
@@ -156,6 +159,12 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
         selectedField: itemField
       };
     }
+    if (pivotActive) {
+      return {
+        filteredColumns: filterableColumns.filter(column => initialColumns.get(column.field) !== undefined),
+        selectedField: itemField
+      };
+    }
     if (filterColumns === undefined || typeof filterColumns !== 'function') {
       return {
         filteredColumns: filterableColumns,
@@ -177,7 +186,7 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
       }),
       selectedField: itemField
     };
-  }, [filterColumns, filterModel?.items, filterableColumns, item.field, columnLookup]);
+  }, [item.field, columnLookup, pivotActive, filterColumns, filterableColumns, filterModel?.items, initialColumns]);
   const sortedFilteredColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':

package/components/quickFilter/QuickFilterControl.js

@@ -99,6 +99,7 @@ process.env.NODE_ENV !== "production" ? QuickFilterControl.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   autoComplete: _propTypes.default.string,
+  autoFocus: _propTypes.default.bool,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -113,6 +114,7 @@ process.env.NODE_ENV !== "production" ? QuickFilterControl.propTypes = {
     current: _propTypes.default.object
   })]),
   label: _propTypes.default.node,
+  multiline: _propTypes.default.bool,
   placeholder: _propTypes.default.string,
   /**
    * A function to customize rendering of the component.

package/components/toolbar/GridToolbar.d.ts

@@ -13,5 +13,8 @@ export interface GridToolbarProps extends GridToolbarContainerProps, GridToolbar
    */
   quickFilterProps?: GridToolbarQuickFilterProps;
 }
+/**
+ * @deprecated Use the `showToolbar` prop to show the default toolbar instead. This component will be removed in a future major release.
+ */
 declare const GridToolbar: React.ForwardRefExoticComponent<GridToolbarProps> | React.ForwardRefExoticComponent<GridToolbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridToolbar };

package/components/toolbar/GridToolbar.js

@@ -21,6 +21,9 @@ var _GridToolbarQuickFilter = require("./GridToolbarQuickFilter");
 var _GridToolbar = require("../toolbarV8/GridToolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
+/**
+ * @deprecated Use the `showToolbar` prop to show the default toolbar instead. This component will be removed in a future major release.
+ */
 const GridToolbar = exports.GridToolbar = (0, _forwardRef.forwardRef)(function GridToolbar(props, ref) {
   // TODO v7: think about where export option should be passed.
   // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate

package/components/toolbar/GridToolbarColumnsButton.d.ts

@@ -10,5 +10,8 @@ interface GridToolbarColumnsButtonProps {
     tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
 }
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/columns-panel/ Columns Panel Trigger} component instead. This component will be removed in a future major release.
+ */
 declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps> | React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarColumnsButton };

package/components/toolbar/GridToolbarColumnsButton.js

@@ -17,8 +17,11 @@ var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPane
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _GridPreferencePanelContext = require("../panel/GridPreferencePanelContext");
+var _GridPanelContext = require("../panel/GridPanelContext");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/columns-panel/ Columns Panel Trigger} component instead. This component will be removed in a future major release.
+ */
 const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = (0, _forwardRef.forwardRef)(function GridToolbarColumnsButton(props, ref) {
   const {
     slotProps = {}
@@ -31,7 +34,7 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = (0, _forward
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
     columnsPanelTriggerRef
-  } = (0, _GridPreferencePanelContext.useGridPreferencePanelContext)();
+  } = (0, _GridPanelContext.useGridPanelContext)();
   const preferencePanel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const handleRef = (0, _useForkRef.default)(ref, columnsPanelTriggerRef);
   const showColumns = event => {

package/components/toolbar/GridToolbarDensitySelector.d.ts

@@ -10,5 +10,8 @@ interface GridToolbarDensitySelectorProps {
     tooltip?: Partial<GridSlotProps['baseTooltip']>;
   };
 }
+/**
+ * @deprecated See {@link https://mui.com/x/react-data-grid/accessibility/#set-the-density-programmatically Accessibility—Set the density programmatically} for an example of adding a density selector to the toolbar. This component will be removed in a future major release.
+ */
 declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps> | React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarDensitySelector };

package/components/toolbar/GridToolbarDensitySelector.js

@@ -19,6 +19,9 @@ var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @deprecated See {@link https://mui.com/x/react-data-grid/accessibility/#set-the-density-programmatically Accessibility—Set the density programmatically} for an example of adding a density selector to the toolbar. This component will be removed in a future major release.
+ */
 const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = (0, _forwardRef.forwardRef)(function GridToolbarDensitySelector(props, ref) {
   const {
     slotProps = {}

package/components/toolbar/GridToolbarExport.d.ts

@@ -35,5 +35,8 @@ declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): R
 declare namespace GridPrintExportMenuItem {
   var propTypes: any;
 }
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/export/ Export} components instead. This component will be removed in a future major release.
+ */
 declare const GridToolbarExport: React.ForwardRefExoticComponent<GridToolbarExportProps> | React.ForwardRefExoticComponent<GridToolbarExportProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarExport, GridCsvExportMenuItem, GridPrintExportMenuItem };

package/components/toolbar/GridToolbarExport.js

@@ -94,6 +94,10 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
     pageStyle: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string])
   })
 } : void 0;
+
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/export/ Export} components instead. This component will be removed in a future major release.
+ */
 const GridToolbarExport = exports.GridToolbarExport = (0, _forwardRef.forwardRef)(function GridToolbarExport(props, ref) {
   const _ref = props,
     {

package/components/toolbar/GridToolbarFilterButton.d.ts

@@ -11,5 +11,8 @@ export interface GridToolbarFilterButtonProps {
     badge?: Partial<GridSlotProps['baseBadge']>;
   };
 }
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/filter-panel/ Filter Panel Trigger} component instead. This component will be removed in a future major release.
+ */
 declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<GridToolbarFilterButtonProps> | React.ForwardRefExoticComponent<GridToolbarFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarFilterButton };

package/components/toolbar/GridToolbarFilterButton.js

@@ -22,7 +22,7 @@ var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
-var _GridPreferencePanelContext = require("../panel/GridPreferencePanelContext");
+var _GridPanelContext = require("../panel/GridPanelContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -41,6 +41,9 @@ const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
   margin: _cssVariables.vars.spacing(1, 1, 0.5),
   padding: _cssVariables.vars.spacing(0, 1)
 });
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/filter-panel/ Filter Panel Trigger} component instead. This component will be removed in a future major release.
+ */
 const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRef.forwardRef)(function GridToolbarFilterButton(props, ref) {
   const {
     slotProps = {}
@@ -58,7 +61,7 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRe
   const filterPanelId = (0, _utils.unstable_useId)();
   const {
     filterPanelTriggerRef
-  } = (0, _GridPreferencePanelContext.useGridPreferencePanelContext)();
+  } = (0, _GridPanelContext.useGridPanelContext)();
   const handleRef = (0, _useForkRef.default)(ref, filterPanelTriggerRef);
   const tooltipContentNode = React.useMemo(() => {
     if (preferencePanel.open) {

package/components/toolbar/GridToolbarQuickFilter.d.ts

@@ -28,6 +28,9 @@ export type GridToolbarQuickFilterProps = {
     root: TextFieldProps;
   };
 };
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/quick-filter/ Quick Filter} component instead. This component will be removed in a future major release.
+ */
 declare function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps): React.JSX.Element;
 declare namespace GridToolbarQuickFilter {
   var propTypes: any;

package/components/toolbar/GridToolbarQuickFilter.js

@@ -71,6 +71,10 @@ const GridQuickFilterTextField = (0, _system.styled)(_props => {
   opacity: ownerState.expanded ? 1 : 0,
   transition: _cssVariables.vars.transition(['width', 'opacity'])
 }));
+
+/**
+ * @deprecated Use the {@link https://mui.com/x/react-data-grid/components/quick-filter/ Quick Filter} component instead. This component will be removed in a future major release.
+ */
 function GridToolbarQuickFilter(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();

package/components/toolbarV8/GridToolbar.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { GridSlotProps } from "../../models/gridSlotsComponentsProps.js";
 interface GridToolbarInternalProps {
+  additionalItems?: React.ReactNode;
   additionalExportMenuItems?: (onMenuItemClick: () => void) => React.ReactNode;
 }
 export type GridToolbarProps = GridSlotProps['toolbar'] & GridToolbarInternalProps;

package/components/toolbarV8/GridToolbar.js

@@ -91,6 +91,7 @@ function GridToolbar(props) {
     quickFilterProps,
     csvOptions,
     printOptions,
+    additionalItems,
     additionalExportMenuItems
   } = props;
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -116,6 +117,7 @@ function GridToolbar(props) {
       title: apiRef.current.getLocaleText('toolbarFilters'),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_filterPanel.FilterPanelTrigger, {
         render: (triggerProps, state) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, (0, _extends2.default)({}, triggerProps, {
+          color: state.filterCount > 0 ? 'primary' : 'default',
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
             badgeContent: state.filterCount,
             color: "primary",
@@ -126,7 +128,7 @@ function GridToolbar(props) {
           })
         }))
       })
-    }), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    }), additionalItems, showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarExport'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {
@@ -174,6 +176,7 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   additionalExportMenuItems: _propTypes.default.func,
+  additionalItems: _propTypes.default.node,
   csvOptions: _propTypes.default.object,
   printOptions: _propTypes.default.object,
   /**

package/components/toolbarV8/Toolbar.d.ts

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
-import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
 export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
   /**
    * A function to customize rendering of the component.
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
-type OwnerState = DataGridProcessedProps;
-declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & {
-  ownerState: OwnerState;
-}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * The top level Toolbar component that provides context to child components.
  * It renders a styled `<div />` element.

package/components/toolbarV8/Toolbar.js

@@ -160,8 +160,7 @@ const Toolbar = exports.Toolbar = (0, _forwardRef.forwardRef)(function Toolbar(p
     role: 'toolbar',
     'aria-orientation': 'horizontal',
     'aria-label': rootProps.label || undefined,
-    className: (0, _clsx.default)(classes.root, className),
-    ownerState: rootProps
+    className: (0, _clsx.default)(classes.root, className)
   }, other, {
     ref
   }));

package/constants/cssVariables.d.ts

@@ -9,6 +9,7 @@ declare const keys: {
       readonly muted: "--DataGrid-t-color-foreground-muted";
       readonly accent: "--DataGrid-t-color-foreground-accent";
       readonly disabled: "--DataGrid-t-color-foreground-disabled";
+      readonly error: "--DataGrid-t-color-foreground-error";
     };
     readonly background: {
       readonly base: "--DataGrid-t-color-background-base";
@@ -101,6 +102,7 @@ export declare const vars: {
       readonly muted: "--DataGrid-t-color-foreground-muted";
       readonly accent: "--DataGrid-t-color-foreground-accent";
       readonly disabled: "--DataGrid-t-color-foreground-disabled";
+      readonly error: "--DataGrid-t-color-foreground-error";
     };
     readonly background: {
       readonly base: "--DataGrid-t-color-background-base";
@@ -190,6 +192,7 @@ export declare const vars: {
         readonly muted: "--DataGrid-t-color-foreground-muted";
         readonly accent: "--DataGrid-t-color-foreground-accent";
         readonly disabled: "--DataGrid-t-color-foreground-disabled";
+        readonly error: "--DataGrid-t-color-foreground-error";
       };
       readonly background: {
         readonly base: "--DataGrid-t-color-background-base";