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

package/esm/components/columnHeaders/GridIconButtonContainer.js

@@ -20,8 +20,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridIconButtonContainerRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'IconButtonContainer',
-  overridesResolver: (props, styles) => styles.iconButtonContainer
+  slot: 'IconButtonContainer'
 })(() => ({
   display: 'flex',
   visibility: 'hidden',

package/esm/components/columnsManagement/GridColumnsManagement.js

@@ -14,6 +14,7 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { checkColumnVisibilityModelsSame, defaultSearchPredicate } from "./utils.js";
 import { NotRendered } from "../../utils/assert.js";
 import { GridShadowScrollArea } from "../GridShadowScrollArea.js";
+import { gridPivotActiveSelector, gridPivotInitialColumnsSelector } from "../../hooks/features/pivoting/gridPivotingSelectors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -32,12 +33,15 @@ const collator = new Intl.Collator();
 function GridColumnsManagement(props) {
   const apiRef = useGridApiContext();
   const searchInputRef = React.useRef(null);
-  const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
   const initialColumnVisibilityModel = useGridSelector(apiRef, gridInitialColumnVisibilityModelSelector);
   const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
   const rootProps = useGridRootProps();
   const [searchValue, setSearchValue] = React.useState('');
   const classes = useUtilityClasses(rootProps);
+  const columnDefinitions = useGridSelector(apiRef, gridColumnDefinitionsSelector);
+  const pivotActive = useGridSelector(apiRef, gridPivotActiveSelector);
+  const pivotInitialColumns = useGridSelector(apiRef, gridPivotInitialColumnsSelector);
+  const columns = React.useMemo(() => pivotActive ? Array.from(pivotInitialColumns.values()) : columnDefinitions, [pivotActive, pivotInitialColumns, columnDefinitions]);
   const {
     sort,
     searchPredicate = defaultSearchPredicate,
@@ -100,7 +104,7 @@ function GridColumnsManagement(props) {
   const firstSwitchRef = React.useRef(null);
   React.useEffect(() => {
     if (autoFocusSearchField) {
-      searchInputRef.current.focus();
+      searchInputRef.current?.focus();
     } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
       firstSwitchRef.current.focus();
     }
@@ -115,7 +119,7 @@ function GridColumnsManagement(props) {
   };
   const handleSearchReset = React.useCallback(() => {
     setSearchValue('');
-    searchInputRef.current.focus();
+    searchInputRef.current?.focus();
   }, []);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(GridColumnsManagementHeader, {
@@ -167,7 +171,7 @@ function GridColumnsManagement(props) {
         ownerState: rootProps,
         children: [currentColumns.map(column => /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
           className: classes.row,
-          disabled: column.hideable === false,
+          disabled: column.hideable === false || pivotActive,
           checked: columnVisibilityModel[column.field] !== false,
           onClick: toggleColumn,
           name: column.field,
@@ -184,7 +188,7 @@ function GridColumnsManagement(props) {
       ownerState: rootProps,
       className: classes.footer,
       children: [!disableShowHideToggle ? /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
-        disabled: hideableColumns.length === 0,
+        disabled: hideableColumns.length === 0 || pivotActive,
         checked: allHideableColumnsVisible,
         indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
         onClick: () => toggleAllColumns(!allHideableColumnsVisible),
@@ -193,7 +197,7 @@ function GridColumnsManagement(props) {
         density: "compact"
       }, rootProps.slotProps?.baseCheckbox)) : /*#__PURE__*/_jsx("span", {}), !disableResetButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
-        disabled: isResetDisabled
+        disabled: isResetDisabled || pivotActive
       }, rootProps.slotProps?.baseButton, {
         children: apiRef.current.getLocaleText('columnsManagementReset')
       })) : null]
@@ -253,7 +257,7 @@ const GridColumnsManagementScrollArea = styled(GridShadowScrollArea, {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementScrollArea'
 })({
-  maxHeight: 400
+  maxHeight: 300
 });
 const GridColumnsManagementHeader = styled('div', {
   name: 'MuiDataGrid',

package/esm/components/columnsPanel/ColumnsPanelTrigger.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import useForkRef from '@mui/utils/useForkRef';
-import { useGridPreferencePanelContext } from "../panel/GridPreferencePanelContext.js";
+import { useGridPanelContext } from "../panel/GridPanelContext.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { gridPreferencePanelStateSelector, GridPreferencePanelsValue, useGridSelector } from "../../hooks/index.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -44,7 +44,7 @@ const ColumnsPanelTrigger = forwardRef(function ColumnsPanelTrigger(props, ref)
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const {
     columnsPanelTriggerRef
-  } = useGridPreferencePanelContext();
+  } = useGridPanelContext();
   const handleRef = useForkRef(ref, columnsPanelTriggerRef);
   const handleClick = event => {
     if (open) {
@@ -65,10 +65,10 @@ const ColumnsPanelTrigger = forwardRef(function ColumnsPanelTrigger(props, ref)
     'aria-haspopup': 'true',
     'aria-expanded': open ? 'true' : undefined,
     'aria-controls': open ? panelId : undefined,
-    onClick: handleClick,
-    onPointerUp: handlePointerUp,
     className: resolvedClassName
   }, other, {
+    onPointerUp: handlePointerUp,
+    onClick: handleClick,
     ref: handleRef
   }), state);
   return /*#__PURE__*/_jsx(React.Fragment, {

package/esm/components/containers/GridFooterContainer.js

@@ -21,8 +21,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridFooterContainerRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FooterContainer',
-  overridesResolver: (props, styles) => styles.footerContainer
+  slot: 'FooterContainer'
 })({
   display: 'flex',
   justifyContent: 'space-between',

package/esm/components/containers/GridOverlay.js

@@ -32,6 +32,8 @@ const GridOverlayRoot = styled('div', {
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',
+  textAlign: 'center',
+  textWrap: 'balance',
   backgroundColor: vars.colors.background.backdrop
 });
 const GridOverlay = forwardRef(function GridOverlay(props, ref) {

package/esm/components/containers/GridRoot.d.ts

@@ -6,6 +6,7 @@ export interface GridRootProps extends React.HTMLAttributes<HTMLDivElement> {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme>;
+  sidePanel?: React.ReactNode;
 }
 declare const MemoizedGridRoot: React.ForwardRefExoticComponent<GridRootProps> | React.ForwardRefExoticComponent<GridRootProps & React.RefAttributes<HTMLDivElement>>;
 export { MemoizedGridRoot as GridRoot };

package/esm/components/containers/GridRoot.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "children"];
+const _excluded = ["className", "children", "sidePanel"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -12,7 +12,7 @@ import { useCSSVariablesContext } from "../../utils/css/context.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
 import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
 import { useIsSSR } from "../../hooks/utils/useIsSSR.js";
 import { GridHeader } from "../GridHeader.js";
@@ -33,7 +33,8 @@ const GridRoot = forwardRef(function GridRoot(props, ref) {
   const rootProps = useGridRootProps();
   const {
       className,
-      children
+      children,
+      sidePanel
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridPrivateApiContext();
@@ -54,13 +55,17 @@ const GridRoot = forwardRef(function GridRoot(props, ref) {
     return null;
   }
   return /*#__PURE__*/_jsxs(GridRootStyles, _extends({
-    className: clsx(classes.root, className, cssVariables.className),
+    className: clsx(classes.root, className, cssVariables.className, sidePanel && gridClasses.withSidePanel),
     ownerState: ownerState
   }, other, {
     ref: handleRef,
-    children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-      children: children
-    }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {}), cssVariables.tag]
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: gridClasses.mainContent,
+      role: "presentation",
+      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
+        children: children
+      }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+    }), sidePanel, cssVariables.tag]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
@@ -68,6 +73,7 @@ process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  sidePanel: PropTypes.node,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/esm/components/containers/GridRootStyles.js

@@ -3,16 +3,6 @@ import { gridClasses as c } from "../../constants/gridClasses.js";
 import { vars } from "../../constants/cssVariables.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
-const columnHeaderStyles = {
-  [`& .${c.iconButtonContainer}`]: {
-    visibility: 'visible',
-    width: 'auto'
-  },
-  [`& .${c.menuIcon}`]: {
-    width: 'auto',
-    visibility: 'visible'
-  }
-};
 const columnSeparatorTargetSize = 10;
 const columnSeparatorOffset = -5;
 const focusOutlineWidth = 1;
@@ -258,7 +248,7 @@ export const GridRootStyles = styled('div', {
   const baseBackground = vars.colors.background.base;
   const headerBackground = vars.header.background.base;
   const pinnedBackground = vars.cell.background.pinned;
-  const hoverColor = vars.colors.interactive.hover;
+  const hoverColor = removeOpacity(vars.colors.interactive.hover);
   const hoverOpacity = vars.colors.interactive.hoverOpacity;
   const selectedColor = vars.colors.interactive.selected;
   const selectedOpacity = vars.colors.interactive.selectedOpacity;
@@ -331,6 +321,9 @@ export const GridRootStyles = 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
+
     [`.${c.main} > *:first-child${ignoreSsrWarning}`]: {
       borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
       borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
@@ -361,6 +354,15 @@ export const GridRootStyles = styled('div', {
         width: 'unset'
       }
     },
+    [`&.${c.withSidePanel}`]: {
+      flexDirection: 'row'
+    },
+    [`& .${c.mainContent}`]: {
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      flex: 1
+    },
     [`& .${c.columnHeader}, & .${c.cell}`]: {
       WebkitTapHighlightColor: 'transparent',
       padding: '0 10px',
@@ -426,11 +428,14 @@ export const GridRootStyles = styled('div', {
     [`& .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}`]: {
       overflow: 'hidden'
     },
-    [`& .${c['columnHeader--sorted']} .${c.iconButtonContainer}, & .${c['columnHeader--filtered']} .${c.iconButtonContainer}`]: {
+    [`& .${c['pivotPanelField--sorted']} .${c.iconButtonContainer},
+      & .${c['columnHeader--sorted']} .${c.iconButtonContainer},
+      & .${c['columnHeader--filtered']} .${c.iconButtonContainer}`]: {
       visibility: 'visible',
       width: 'auto'
     },
-    [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}) .${c.sortIcon}`]: {
+    [`& .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton},
+      & .${c.columnHeader}:not(.${c['columnHeader--sorted']}) .${c.sortButton}`]: {
       opacity: 0,
       transition: vars.transition(['opacity'], {
         duration: vars.transitions.duration.short
@@ -499,18 +504,35 @@ export const GridRootStyles = styled('div', {
       backgroundColor: headerBackground
     },
     '@media (hover: hover)': {
-      [`& .${c.columnHeader}:hover`]: columnHeaderStyles,
-      [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}):hover .${c.sortIcon}`]: {
+      [`& .${c.columnHeader}:hover`]: {
+        [`& .${c.menuIcon}`]: {
+          width: 'auto',
+          visibility: 'visible'
+        },
+        [`& .${c.iconButtonContainer}`]: {
+          visibility: 'visible',
+          width: 'auto'
+        }
+      },
+      [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}):hover .${c.sortButton},
+        & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}):hover .${c.sortButton},
+        & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton}:focus-visible`]: {
         opacity: 0.5
       }
     },
     '@media (hover: none)': {
-      [`& .${c.columnHeader}`]: columnHeaderStyles,
+      [`& .${c.columnHeader} .${c.menuIcon}`]: {
+        width: 'auto',
+        visibility: 'visible'
+      },
       [`& .${c.columnHeader}:focus,
         & .${c['columnHeader--siblingFocused']}`]: {
         [`.${c['columnSeparator--resizable']}`]: {
           color: vars.colors.foreground.accent
         }
+      },
+      [`& .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton}`]: {
+        opacity: 0.5
       }
     },
     [`& .${c['columnSeparator--sideLeft']}`]: {
@@ -844,6 +866,9 @@ export const GridRootStyles = 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/esm/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/esm/components/containers/GridToolbarContainer.js

@@ -33,6 +33,10 @@ const GridToolbarContainerRoot = styled(Toolbar, {
   padding: 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 = forwardRef(function GridToolbarContainer(props, ref) {
   const {
       className,

package/esm/components/filterPanel/FilterPanelTrigger.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import useForkRef from '@mui/utils/useForkRef';
-import { useGridPreferencePanelContext } from "../panel/GridPreferencePanelContext.js";
+import { useGridPanelContext } from "../panel/GridPanelContext.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { gridFilterActiveItemsSelector, gridPreferencePanelStateSelector, GridPreferencePanelsValue, useGridSelector } from "../../hooks/index.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -47,7 +47,7 @@ const FilterPanelTrigger = forwardRef(function FilterPanelTrigger(props, ref) {
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const {
     filterPanelTriggerRef
-  } = useGridPreferencePanelContext();
+  } = useGridPanelContext();
   const handleRef = useForkRef(ref, filterPanelTriggerRef);
   const handleClick = event => {
     if (open) {

package/esm/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/esm/components/index.js

@@ -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/esm/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/esm/components/panel/GridPanel.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "classes"];
+const _excluded = ["children", "className", "classes", "onClose"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -28,16 +28,16 @@ const GridPanelContent = styled('div', {
   backgroundColor: vars.colors.background.overlay,
   borderRadius: vars.radius.base,
   boxShadow: vars.shadows.overlay,
-  minWidth: 300,
-  maxHeight: 450,
   display: 'flex',
-  maxWidth: `calc(100vw - ${vars.spacing(0.5)})`,
+  maxWidth: `calc(100vw - ${vars.spacing(2)})`,
+  margin: vars.spacing(1),
   overflow: 'auto'
 });
 const GridPanel = forwardRef((props, ref) => {
   const {
       children,
-      className
+      className,
+      onClose
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
@@ -48,11 +48,11 @@ const GridPanel = forwardRef((props, ref) => {
   const onDidShow = useEventCallback(() => setIsPlaced(true));
   const onDidHide = useEventCallback(() => setIsPlaced(false));
   const handleClickAway = useEventCallback(() => {
-    apiRef.current.hidePreferences();
+    onClose?.();
   });
   const handleKeyDown = useEventCallback(event => {
     if (event.key === 'Escape') {
-      apiRef.current.hidePreferences();
+      onClose?.();
     }
   });
   const [fallbackTarget, setFallbackTarget] = React.useState(null);
@@ -101,6 +101,7 @@ process.env.NODE_ENV !== "production" ? GridPanel.propTypes = {
   className: PropTypes.string,
   flip: PropTypes.bool,
   id: PropTypes.string,
+  onClose: PropTypes.func,
   open: PropTypes.bool.isRequired,
   target: PropTypes /* @typescript-to-proptypes-ignore */.any
 } : void 0;

package/esm/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/{modern/components/panel/GridPreferencePanelContext.js → esm/components/panel/GridPanelContext.js}

@@ -1,23 +1,25 @@
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const GridPreferencePanelContext = /*#__PURE__*/React.createContext(undefined);
-export function useGridPreferencePanelContext() {
-  const context = React.useContext(GridPreferencePanelContext);
+export const GridPanelContext = /*#__PURE__*/React.createContext(undefined);
+export function useGridPanelContext() {
+  const context = React.useContext(GridPanelContext);
   if (context === undefined) {
     throw new Error('MUI X: Missing context.');
   }
   return context;
 }
-export function GridPreferencePanelContextProvider({
+export 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__*/_jsx(GridPreferencePanelContext.Provider, {
+  return /*#__PURE__*/_jsx(GridPanelContext.Provider, {
     value: value,
     children: children
   });

package/esm/components/panel/GridPanelFooter.js

@@ -21,8 +21,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridPanelFooterRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'PanelFooter',
-  overridesResolver: (props, styles) => styles.panelFooter
+  slot: 'PanelFooter'
 })({
   padding: vars.spacing(1),
   display: 'flex',

package/esm/components/panel/GridPanelHeader.js

@@ -21,8 +21,7 @@ const useUtilityClasses = ownerState => {
 };
 const GridPanelHeaderRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'PanelHeader',
-  overridesResolver: (props, styles) => styles.panelHeader
+  slot: 'PanelHeader'
 })({
   padding: vars.spacing(1)
 });

package/esm/components/panel/GridPreferencesPanel.js

@@ -6,7 +6,7 @@ import { gridPreferencePanelStateSelector } from "../../hooks/features/preferenc
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridPreferencePanelContext } from "./GridPreferencePanelContext.js";
+import { useGridPanelContext } from "./GridPanelContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridPreferencesPanel() {
   const apiRef = useGridApiContext();
@@ -15,14 +15,29 @@ export function GridPreferencesPanel() {
   const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const {
     columnsPanelTriggerRef,
-    filterPanelTriggerRef
-  } = useGridPreferencePanelContext();
+    filterPanelTriggerRef,
+    aiAssistantPanelTriggerRef
+  } = useGridPanelContext();
   const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? GridPreferencePanelsValue.filters);
+  let target = null;
+  switch (preferencePanelState.openedPanelValue) {
+    case GridPreferencePanelsValue.filters:
+      target = filterPanelTriggerRef.current;
+      break;
+    case GridPreferencePanelsValue.columns:
+      target = columnsPanelTriggerRef.current;
+      break;
+    case GridPreferencePanelsValue.aiAssistant:
+      target = aiAssistantPanelTriggerRef.current;
+      break;
+    default:
+  }
   return /*#__PURE__*/_jsx(rootProps.slots.panel, _extends({
     id: preferencePanelState.panelId,
     open: columns.length > 0 && preferencePanelState.open,
     "aria-labelledby": preferencePanelState.labelId,
-    target: preferencePanelState.openedPanelValue === GridPreferencePanelsValue.filters ? filterPanelTriggerRef.current : columnsPanelTriggerRef.current
+    target: target,
+    onClose: () => apiRef.current.hidePreferences()
   }, rootProps.slotProps?.panel, {
     children: panelContent
   }));

package/esm/components/panel/filterPanel/GridFilterForm.js

@@ -17,6 +17,7 @@ import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../../constants/gridClasses.js";
 import { getValueFromValueOptions, getValueOptions } from "./filterPanelUtils.js";
+import { gridPivotActiveSelector, gridPivotInitialColumnsSelector } from "../../../hooks/features/pivoting/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const useUtilityClasses = ownerState => {
@@ -35,16 +36,14 @@ const useUtilityClasses = ownerState => {
 };
 const GridFilterFormRoot = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterForm',
-  overridesResolver: (props, styles) => styles.filterForm
+  slot: 'FilterForm'
 })({
   display: 'flex',
   gap: vars.spacing(1.5)
 });
 const FilterFormDeleteIcon = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormDeleteIcon',
-  overridesResolver: (_, styles) => styles.filterFormDeleteIcon
+  slot: 'FilterFormDeleteIcon'
 })({
   flexShrink: 0,
   display: 'flex',
@@ -53,30 +52,26 @@ const FilterFormDeleteIcon = styled('div', {
 });
 const FilterFormLogicOperatorInput = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormLogicOperatorInput',
-  overridesResolver: (_, styles) => styles.filterFormLogicOperatorInput
+  slot: 'FilterFormLogicOperatorInput'
 })({
   minWidth: 75,
   justifyContent: 'end'
 });
 const FilterFormColumnInput = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormColumnInput',
-  overridesResolver: (_, styles) => styles.filterFormColumnInput
+  slot: 'FilterFormColumnInput'
 })({
   width: 150
 });
 const FilterFormOperatorInput = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormOperatorInput',
-  overridesResolver: (_, styles) => styles.filterFormOperatorInput
+  slot: 'FilterFormOperatorInput'
 })({
   width: 150
 });
 const FilterFormValueInput = styled('div', {
   name: 'MuiDataGrid',
-  slot: 'FilterFormValueInput',
-  overridesResolver: (_, styles) => styles.filterFormValueInput
+  slot: 'FilterFormValueInput'
 })({
   width: 190
 });
@@ -134,6 +129,8 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
       InputComponentProps
     } = valueInputProps,
     valueInputPropsOther = _objectWithoutPropertiesLoose(valueInputProps, _excluded2);
+  const pivotActive = useGridSelector(apiRef, gridPivotActiveSelector);
+  const initialColumns = useGridSelector(apiRef, gridPivotInitialColumnsSelector);
   const {
     filteredColumns,
     selectedField
@@ -148,6 +145,12 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
         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,
@@ -169,7 +172,7 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
       }),
       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':