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

package/components/export/ExportPrint.js

@@ -55,113 +55,9 @@ process.env.NODE_ENV !== "production" ? ExportPrint.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * A ref for imperative actions.
-   * It currently only supports `focusVisible()` action.
-   */
-  action: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focusVisible: _propTypes.default.func.isRequired
-    })
-  })]),
-  /**
-   * If `true`, the ripples are centered.
-   * They won't start at the cursor interaction position.
-   * @default false
-   */
-  centerRipple: _propTypes.default.bool,
   className: _propTypes.default.string,
-  /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   * @default 'primary'
-   */
-  color: _propTypes.default.oneOf(['error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
-  component: _propTypes.default.elementType,
-  /**
-   * If `true`, the component is disabled.
-   */
   disabled: _propTypes.default.bool,
-  /**
-   * If `true`, no elevation is used.
-   * @default false
-   */
-  disableElevation: _propTypes.default.bool,
-  /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple: _propTypes.default.bool,
-  /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
-   */
-  disableRipple: _propTypes.default.bool,
-  /**
-   * If `true`, the touch ripple effect is disabled.
-   * @default false
-   */
-  disableTouchRipple: _propTypes.default.bool,
-  /**
-   * Element placed after the children.
-   */
-  endIcon: _propTypes.default.node,
-  /**
-   * If `true`, the base button will have a keyboard focus ripple.
-   * @default false
-   */
-  focusRipple: _propTypes.default.bool,
-  /**
-   * This prop can help identify which element has keyboard focus.
-   * The class name will be applied when the element gains the focus through keyboard interaction.
-   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
-   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
-   * if needed.
-   */
-  focusVisibleClassName: _propTypes.default.string,
-  /**
-   * If `true`, the button will take up the full width of its container.
-   * @default false
-   */
-  fullWidth: _propTypes.default.bool,
-  /**
-   * The URL to link to when the button is clicked.
-   * If defined, an `a` element will be used as the root node.
-   */
-  href: _propTypes.default.string,
-  /**
-   * The component used to render a link when the `href` prop is provided.
-   * @default 'a'
-   */
-  LinkComponent: _propTypes.default.elementType,
-  /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
-   */
-  loading: _propTypes.default.bool,
-  /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
-   */
-  loadingIndicator: _propTypes.default.node,
-  /**
-   * The loading indicator can be positioned on the start, end, or the center of the button.
-   * @default 'center'
-   */
-  loadingPosition: _propTypes.default.oneOf(['center', 'end', 'start']),
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onFocusVisible: _propTypes.default.func,
+  id: _propTypes.default.string,
   /**
    * The options to apply on the Print export.
    * @demos
@@ -183,32 +79,11 @@ process.env.NODE_ENV !== "production" ? ExportPrint.propTypes = {
    * A function to customize rendering of the component.
    */
   render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
-  /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   */
+  role: _propTypes.default.string,
   size: _propTypes.default.oneOf(['large', 'medium', 'small']),
-  /**
-   * Element placed before the children.
-   */
   startIcon: _propTypes.default.node,
   style: _propTypes.default.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   tabIndex: _propTypes.default.number,
-  /**
-   * Props applied to the `TouchRipple` element.
-   */
-  TouchRippleProps: _propTypes.default.object,
-  /**
-   * A ref that points to the `TouchRipple` element.
-   */
-  touchRippleRef: _propTypes.default.any,
-  /**
-   * The variant to use.
-   * @default 'text'
-   */
-  variant: _propTypes.default.oneOf(['contained', 'outlined', 'text'])
+  title: _propTypes.default.string,
+  touchRippleRef: _propTypes.default.any
 } : void 0;

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) {
@@ -91,146 +91,21 @@ process.env.NODE_ENV !== "production" ? FilterPanelTrigger.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * A ref for imperative actions.
-   * It currently only supports `focusVisible()` action.
-   */
-  action: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focusVisible: _propTypes.default.func.isRequired
-    })
-  })]),
-  /**
-   * If `true`, the ripples are centered.
-   * They won't start at the cursor interaction position.
-   * @default false
-   */
-  centerRipple: _propTypes.default.bool,
   /**
    * A function to customize rendering of the component.
    */
   className: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
-  /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   * @default 'primary'
-   */
-  color: _propTypes.default.oneOf(['error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
-  component: _propTypes.default.elementType,
-  /**
-   * If `true`, the component is disabled.
-   */
   disabled: _propTypes.default.bool,
-  /**
-   * If `true`, no elevation is used.
-   * @default false
-   */
-  disableElevation: _propTypes.default.bool,
-  /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple: _propTypes.default.bool,
-  /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
-   */
-  disableRipple: _propTypes.default.bool,
-  /**
-   * If `true`, the touch ripple effect is disabled.
-   * @default false
-   */
-  disableTouchRipple: _propTypes.default.bool,
-  /**
-   * Element placed after the children.
-   */
-  endIcon: _propTypes.default.node,
-  /**
-   * If `true`, the base button will have a keyboard focus ripple.
-   * @default false
-   */
-  focusRipple: _propTypes.default.bool,
-  /**
-   * This prop can help identify which element has keyboard focus.
-   * The class name will be applied when the element gains the focus through keyboard interaction.
-   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
-   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
-   * if needed.
-   */
-  focusVisibleClassName: _propTypes.default.string,
-  /**
-   * If `true`, the button will take up the full width of its container.
-   * @default false
-   */
-  fullWidth: _propTypes.default.bool,
-  /**
-   * The URL to link to when the button is clicked.
-   * If defined, an `a` element will be used as the root node.
-   */
-  href: _propTypes.default.string,
-  /**
-   * The component used to render a link when the `href` prop is provided.
-   * @default 'a'
-   */
-  LinkComponent: _propTypes.default.elementType,
-  /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
-   */
-  loading: _propTypes.default.bool,
-  /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
-   */
-  loadingIndicator: _propTypes.default.node,
-  /**
-   * The loading indicator can be positioned on the start, end, or the center of the button.
-   * @default 'center'
-   */
-  loadingPosition: _propTypes.default.oneOf(['center', 'end', 'start']),
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onFocusVisible: _propTypes.default.func,
+  id: _propTypes.default.string,
   /**
    * A function to customize rendering of the component.
    */
   render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
-  /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   */
+  role: _propTypes.default.string,
   size: _propTypes.default.oneOf(['large', 'medium', 'small']),
-  /**
-   * Element placed before the children.
-   */
   startIcon: _propTypes.default.node,
   style: _propTypes.default.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   tabIndex: _propTypes.default.number,
-  /**
-   * Props applied to the `TouchRipple` element.
-   */
-  TouchRippleProps: _propTypes.default.object,
-  /**
-   * A ref that points to the `TouchRipple` element.
-   */
-  touchRippleRef: _propTypes.default.any,
-  /**
-   * The variant to use.
-   * @default 'text'
-   */
-  variant: _propTypes.default.oneOf(['contained', 'outlined', 'text'])
+  title: _propTypes.default.string,
+  touchRippleRef: _propTypes.default.any
 } : void 0;

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

@@ -7,14 +7,15 @@ export interface GridPanelClasses {
   paper: string;
 }
 export interface GridPanelProps extends Pick<GridSlotProps['basePopper'], 'id' | 'className' | 'target' | 'flip'> {
-  ref?: React.Ref<HTMLElement>;
+  ref?: React.Ref<HTMLDivElement>;
   children?: React.ReactNode;
   /**
    * Override or extend the styles applied to the component.
    */
   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<HTMLElement>>;
+declare const GridPanel: React.ForwardRefExoticComponent<GridPanelProps> | React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { GridPanel };

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);
@@ -76,7 +76,7 @@ const GridPanel = exports.GridPanel = (0, _forwardRef.forwardRef)((props, ref) =
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelRoot, (0, _extends2.default)({
     as: rootProps.slots.basePopper,
     ownerState: rootProps,
-    placement: "bottom-start",
+    placement: "bottom-end",
     className: (0, _clsx.default)(classes.panel, className, variablesClass),
     flip: true,
     onDidShow: onDidShow,
@@ -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/panel/filterPanel/filterPanelUtils.d.ts

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