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

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -33,7 +33,6 @@ export declare const useGridVirtualScroller: () => {
   };
   getScrollbarVerticalProps: () => {
     ref: React.RefObject<HTMLDivElement | null>;
-    role: string;
     scrollPosition: React.RefObject<{
       top: number;
       left: number;
@@ -41,7 +40,6 @@ export declare const useGridVirtualScroller: () => {
   };
   getScrollbarHorizontalProps: () => {
     ref: React.RefObject<HTMLDivElement | null>;
-    role: string;
     scrollPosition: React.RefObject<{
       top: number;
       left: number;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -531,12 +531,10 @@ const useGridVirtualScroller = () => {
     }),
     getScrollbarVerticalProps: () => ({
       ref: scrollbarVerticalRef,
-      role: 'presentation',
       scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
       ref: scrollbarHorizontalRef,
-      role: 'presentation',
       scrollPosition
     }),
     getScrollAreaProps: () => ({

package/hooks/utils/index.d.ts

@@ -5,4 +5,5 @@ export { useGridSelector } from "./useGridSelector.js";
 export * from "./useGridNativeEventListener.js";
 export * from "./useFirstRender.js";
 export * from "./useOnMount.js";
-export * from "./useRunOnce.js";
+export * from "./useRunOnce.js";
+export type { RenderProp } from './useGridComponentRenderer';

package/hooks/utils/useGridComponentRenderer.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export type RenderProp<Props, State = {}> = ((props: Props, state: State) => React.ReactElement<unknown>) | React.ReactElement<Props>;
+/**
+ * Resolves the rendering logic for a component.
+ * Handles three scenarios:
+ * 1. A render function that receives props and state
+ * 2. A React element
+ * 3. A default element
+ *
+ * @ignore - internal hook.
+ */
+export declare function useGridComponentRenderer<Props extends React.HTMLAttributes<any>, State extends Record<string, any>>(defaultElement: keyof React.JSX.IntrinsicElements | React.ComponentType<Props>, render: RenderProp<Props, State> | undefined, props: Props, state?: State): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/hooks/utils/useGridComponentRenderer.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridComponentRenderer = useGridComponentRenderer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+/**
+ * Resolves the rendering logic for a component.
+ * Handles three scenarios:
+ * 1. A render function that receives props and state
+ * 2. A React element
+ * 3. A default element
+ *
+ * @ignore - internal hook.
+ */
+function useGridComponentRenderer(defaultElement, render, props, state = {}) {
+  if (typeof render === 'function') {
+    return render(props, state);
+  }
+  if (render) {
+    if (render.props.className) {
+      props.className = (0, _clsx.default)(render.props.className, props.className);
+    }
+    if (render.props.style || props.style) {
+      props.style = (0, _extends2.default)({}, props.style, render.props.style);
+    }
+    if (render.props.sx || props.sx) {
+      props.sx = mergeSx(props.sx, render.props.sx);
+    }
+    return /*#__PURE__*/React.cloneElement(render, props);
+  }
+  return /*#__PURE__*/React.createElement(defaultElement, props);
+}
+function mergeSx(sx1, sx2) {
+  if (!sx1 || !sx2) {
+    return sx1 || sx2;
+  }
+  return (Array.isArray(sx1) ? sx1 : [sx1]).concat(Array.isArray(sx2) ? sx2 : [sx2]);
+}

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-alpha.13
+ * @mui/x-data-grid v8.0.0-alpha.14
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/demo/TailwindDemoContainer.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface TailwindDemoContainerProps {
+  children: React.ReactNode;
+  documentBody?: HTMLElement;
+}
+/**
+ * WARNING: This is an internal component used in documentation to inject the Tailwind script.
+ * Please do not use it in your application.
+ */
+export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+export {};

package/internals/demo/TailwindDemoContainer.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TailwindDemoContainer = TailwindDemoContainer;
+var React = _interopRequireWildcard(require("react"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WARNING: This is an internal component used in documentation to inject the Tailwind script.
+ * Please do not use it in your application.
+ */
+function TailwindDemoContainer(props) {
+  const {
+    children,
+    documentBody
+  } = props;
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  React.useEffect(() => {
+    const body = documentBody ?? document.body;
+    const script = document.createElement('script');
+    script.src = 'https://unpkg.com/@tailwindcss/browser@4';
+    let mounted = true;
+    const cleanup = () => {
+      mounted = false;
+      script.remove();
+      const head = body?.ownerDocument?.head;
+      if (!head) {
+        return;
+      }
+      const styles = head.querySelectorAll('style:not([data-emotion])');
+      styles.forEach(style => {
+        const styleText = style.textContent?.substring(0, 100);
+        const isTailwindStylesheet = styleText?.includes('tailwind');
+        if (isTailwindStylesheet) {
+          style.remove();
+        }
+      });
+    };
+    script.onload = () => {
+      if (!mounted) {
+        cleanup();
+        return;
+      }
+      setIsLoaded(true);
+    };
+    body.appendChild(script);
+    return cleanup;
+  }, [documentBody]);
+  return isLoaded ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {})
+  });
+}

package/internals/demo/index.d.ts

@@ -0,0 +1 @@
+export { TailwindDemoContainer } from "./TailwindDemoContainer.js";

package/internals/demo/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "TailwindDemoContainer", {
+  enumerable: true,
+  get: function () {
+    return _TailwindDemoContainer.TailwindDemoContainer;
+  }
+});
+var _TailwindDemoContainer = require("./TailwindDemoContainer");

package/internals/index.d.ts

@@ -5,6 +5,8 @@ export { GridVirtualScrollerRenderZone } from "../components/virtualization/Grid
 export type { GridDetailPanelsProps } from '../components/GridDetailPanels';
 export type { GridPinnedRowsProps } from '../components/GridPinnedRows';
 export { GridHeaders } from "../components/GridHeaders.js";
+export { GridToolbar } from "../components/toolbarV8/GridToolbar.js";
+export type { GridToolbarProps } from '../components/toolbarV8/GridToolbar';
 export { GridBaseColumnHeaders } from "../components/columnHeaders/GridBaseColumnHeaders.js";
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
 export * from "../constants/signature.js";
@@ -74,6 +76,7 @@ export * from "../hooks/features/virtualization/index.js";
 export { useGridColumnResize, columnResizeStateInitializer } from "../hooks/features/columnResize/useGridColumnResize.js";
 export { ROW_SELECTION_PROPAGATION_DEFAULT } from "../hooks/features/rowSelection/utils.js";
 export { useGridListView, listViewStateInitializer } from "../hooks/features/listView/useGridListView.js";
+export { useGridComponentRenderer } from "../hooks/utils/useGridComponentRenderer.js";
 export { useTimeout } from "../hooks/utils/useTimeout.js";
 export { useGridVisibleRows, getVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
 export { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";
@@ -105,4 +108,5 @@ export { serializeCellValue } from "../hooks/features/export/serializers/csvSeri
 export * from "./utils/index.js";
 export * from "./constants.js";
 export type { Localization } from '../utils/getGridLocalization';
+export * from "./demo/index.js";
 export { GridSkeletonLoadingOverlayInner } from "../components/GridSkeletonLoadingOverlay.js";

package/internals/index.js

@@ -8,6 +8,7 @@ var _exportNames = {
   GridVirtualScrollerContent: true,
   GridVirtualScrollerRenderZone: true,
   GridHeaders: true,
+  GridToolbar: true,
   GridBaseColumnHeaders: true,
   DATA_GRID_DEFAULT_SLOTS_COMPONENTS: true,
   vars: true,
@@ -90,6 +91,7 @@ var _exportNames = {
   ROW_SELECTION_PROPAGATION_DEFAULT: true,
   useGridListView: true,
   listViewStateInitializer: true,
+  useGridComponentRenderer: true,
   useTimeout: true,
   useGridVisibleRows: true,
   getVisibleRows: true,
@@ -174,6 +176,12 @@ Object.defineProperty(exports, "GridStrategyGroup", {
     return _strategyProcessing.GridStrategyGroup;
   }
 });
+Object.defineProperty(exports, "GridToolbar", {
+  enumerable: true,
+  get: function () {
+    return _GridToolbar.GridToolbar;
+  }
+});
 Object.defineProperty(exports, "GridVirtualScroller", {
   enumerable: true,
   get: function () {
@@ -564,6 +572,12 @@ Object.defineProperty(exports, "useGridColumns", {
     return _useGridColumns.useGridColumns;
   }
 });
+Object.defineProperty(exports, "useGridComponentRenderer", {
+  enumerable: true,
+  get: function () {
+    return _useGridComponentRenderer.useGridComponentRenderer;
+  }
+});
 Object.defineProperty(exports, "useGridCsvExport", {
   enumerable: true,
   get: function () {
@@ -772,6 +786,7 @@ var _GridVirtualScroller = require("../components/virtualization/GridVirtualScro
 var _GridVirtualScrollerContent = require("../components/virtualization/GridVirtualScrollerContent");
 var _GridVirtualScrollerRenderZone = require("../components/virtualization/GridVirtualScrollerRenderZone");
 var _GridHeaders = require("../components/GridHeaders");
+var _GridToolbar = require("../components/toolbarV8/GridToolbar");
 var _GridBaseColumnHeaders = require("../components/columnHeaders/GridBaseColumnHeaders");
 var _defaultGridSlotsComponents = require("../constants/defaultGridSlotsComponents");
 var _signature = require("../constants/signature");
@@ -895,6 +910,7 @@ Object.keys(_virtualization).forEach(function (key) {
 var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
 var _utils = require("../hooks/features/rowSelection/utils");
 var _useGridListView = require("../hooks/features/listView/useGridListView");
+var _useGridComponentRenderer = require("../hooks/utils/useGridComponentRenderer");
 var _useTimeout = require("../hooks/utils/useTimeout");
 var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
 var _useGridInitializeState = require("../hooks/utils/useGridInitializeState");
@@ -1004,4 +1020,16 @@ Object.keys(_constants).forEach(function (key) {
     }
   });
 });
+var _demo = require("./demo");
+Object.keys(_demo).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _demo[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _demo[key];
+    }
+  });
+});
 var _GridSkeletonLoadingOverlay = require("../components/GridSkeletonLoadingOverlay");

package/material/icons/index.d.ts

@@ -58,9 +58,6 @@ export declare const GridLoadIcon: import("@mui/material/OverridableComponent").
 export declare const GridDragIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
   muiName: string;
 };
-export declare const GridSaveAltIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
-  muiName: string;
-};
 export declare const GridCheckIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
   muiName: string;
 };
@@ -81,4 +78,7 @@ export declare const GridDeleteIcon: import("@mui/material/OverridableComponent"
 };
 export declare const GridDeleteForeverIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
   muiName: string;
+};
+export declare const GridDownloadIcon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+  muiName: string;
 };

package/material/icons/index.js

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridVisibilityOffIcon = exports.GridViewStreamIcon = exports.GridViewHeadlineIcon = exports.GridViewColumnIcon = exports.GridTripleDotsVerticalIcon = exports.GridTableRowsIcon = exports.GridSeparatorIcon = exports.GridSearchIcon = exports.GridSaveAltIcon = exports.GridRemoveIcon = exports.GridMoreVertIcon = exports.GridMenuIcon = exports.GridLoadIcon = exports.GridKeyboardArrowRight = exports.GridFilterListIcon = exports.GridFilterAltIcon = exports.GridExpandMoreIcon = exports.GridDragIcon = exports.GridDeleteIcon = exports.GridDeleteForeverIcon = exports.GridColumnIcon = exports.GridCloseIcon = exports.GridClearIcon = exports.GridCheckIcon = exports.GridCheckCircleIcon = exports.GridArrowUpwardIcon = exports.GridArrowDownwardIcon = exports.GridAddIcon = void 0;
+exports.GridVisibilityOffIcon = exports.GridViewStreamIcon = exports.GridViewHeadlineIcon = exports.GridViewColumnIcon = exports.GridTripleDotsVerticalIcon = exports.GridTableRowsIcon = exports.GridSeparatorIcon = exports.GridSearchIcon = exports.GridRemoveIcon = exports.GridMoreVertIcon = exports.GridMenuIcon = exports.GridLoadIcon = exports.GridKeyboardArrowRight = exports.GridFilterListIcon = exports.GridFilterAltIcon = exports.GridExpandMoreIcon = exports.GridDragIcon = exports.GridDownloadIcon = exports.GridDeleteIcon = exports.GridDeleteForeverIcon = exports.GridColumnIcon = exports.GridCloseIcon = exports.GridClearIcon = exports.GridCheckIcon = exports.GridCheckCircleIcon = exports.GridArrowUpwardIcon = exports.GridArrowDownwardIcon = exports.GridAddIcon = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/material/utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -36,7 +36,7 @@ const GridCheckCircleIcon = exports.GridCheckCircleIcon = (0, _utils.createSvgIc
   d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
 }), 'CheckCircle');
 const GridColumnIcon = exports.GridColumnIcon = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-  d: "M6 5H3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm14 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm-7 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1z"
+  d: "M14.67 5v14H9.33V5zm1 14H21V5h-5.33zm-7.34 0V5H3v14z"
 }), 'ColumnIcon');
 const GridSeparatorIcon = exports.GridSeparatorIcon = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
   width: "1",
@@ -71,9 +71,6 @@ const GridLoadIcon = exports.GridLoadIcon = (0, _utils.createSvgIcon)(/*#__PURE_
 const GridDragIcon = exports.GridDragIcon = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
   d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
 }), 'Drag');
-const GridSaveAltIcon = exports.GridSaveAltIcon = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-  d: "M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z"
-}), 'SaveAlt');
 const GridCheckIcon = exports.GridCheckIcon = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
   d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
 }), 'Check');
@@ -89,11 +86,14 @@ const GridViewColumnIcon = exports.GridViewColumnIcon = (0, _utils.createSvgIcon
   })
 }), 'ViewColumn');
 const GridClearIcon = exports.GridClearIcon = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+  d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12z"
 }), 'Clear');
 const GridDeleteIcon = exports.GridDeleteIcon = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
   d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
 }), 'Delete');
 const GridDeleteForeverIcon = exports.GridDeleteForeverIcon = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
   d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"
-}), 'Delete');
+}), 'Delete');
+const GridDownloadIcon = exports.GridDownloadIcon = (0, _utils.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  d: "M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z"
+}), 'Download');

package/material/index.js

@@ -169,7 +169,7 @@ const iconSlots = {
   densityCompactIcon: _icons.GridViewHeadlineIcon,
   densityStandardIcon: _icons.GridTableRowsIcon,
   densityComfortableIcon: _icons.GridViewStreamIcon,
-  exportIcon: _icons.GridSaveAltIcon,
+  exportIcon: _icons.GridDownloadIcon,
   moreActionsIcon: _icons.GridMoreVertIcon,
   treeDataCollapseIcon: _icons.GridExpandMoreIcon,
   treeDataExpandIcon: _icons.GridKeyboardArrowRight,
@@ -179,7 +179,7 @@ const iconSlots = {
   detailPanelCollapseIcon: _icons.GridRemoveIcon,
   rowReorderIcon: _icons.GridDragIcon,
   quickFilterIcon: _icons.GridSearchIcon,
-  quickFilterClearIcon: _icons.GridCloseIcon,
+  quickFilterClearIcon: _icons.GridClearIcon,
   columnMenuHideIcon: _icons.GridVisibilityOffIcon,
   columnMenuSortAscendingIcon: _icons.GridArrowUpwardIcon,
   columnMenuSortDescendingIcon: _icons.GridArrowDownwardIcon,

package/models/gridBaseSlots.d.ts

@@ -108,7 +108,9 @@ export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
   color?: 'default' | 'inherit' | 'primary';
   edge?: 'start' | 'end' | false;
 };
-export type DividerProps = {};
+export type DividerProps = {
+  orientation?: 'horizontal' | 'vertical';
+};
 export type MenuListProps = {
   ref?: Ref<HTMLUListElement>;
   id?: string;
@@ -223,6 +225,7 @@ export type SwitchProps = {
   size?: 'small' | 'medium';
 };
 export type TextFieldProps = {
+  role?: string;
   autoComplete?: string;
   className?: string;
   color?: 'primary' | 'error';
@@ -246,6 +249,7 @@ export type TextFieldProps = {
   tabIndex?: number;
   type?: React.HTMLInputTypeAttribute;
   value?: string;
+  ref?: Ref<HTMLInputElement>;
 };
 export type TooltipProps = {
   children: React.ReactElement<any, any>;

package/models/gridIconSlotsComponent.d.ts

@@ -70,7 +70,7 @@ export interface GridIconSlotsComponent {
   densityComfortableIcon: React.JSXElementConstructor<any>;
   /**
    * Icon displayed on the open export button present in the toolbar by default.
-   * @default GridSaveAltIcon
+   * @default GridDownloadIcon
    */
   exportIcon: React.JSXElementConstructor<any>;
   /**

package/models/gridSlotsComponent.d.ts

@@ -149,8 +149,7 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
    */
   footerRowCount: React.JSXElementConstructor<GridSlotProps['footerRowCount']>;
   /**
-   * Toolbar component rendered inside the Header component.
-   * @default GridToolbar
+   * Toolbar component rendered in the grid header.
    */
   toolbar: React.JSXElementConstructor<GridSlotProps['toolbar']>;
   /**

package/modern/colDef/gridActionsColDef.js

@@ -15,5 +15,5 @@ export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   disableColumnMenu: true,
   disableExport: true,
   renderCell: renderActionsCell,
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: () => null
 });

package/modern/colDef/gridBooleanColDef.js

@@ -33,7 +33,7 @@ export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   sortComparator: gridNumberComparator,
   valueFormatter: gridBooleanFormatter,
   filterOperators: getGridBooleanOperators(),
-  getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFn: () => null,
   // @ts-ignore
   aggregable: false,
   // @ts-ignore

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -18,7 +18,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,
-  getApplyQuickFilterFn: undefined,
+  getApplyQuickFilterFn: () => null,
   display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
     const rowId = gridRowIdSelector(apiRef, row);

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -246,6 +246,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
     onChange: PropTypes.func,
     onKeyDown: PropTypes.func,
     placeholder: PropTypes.string,
+    role: PropTypes.string,
     size: PropTypes.oneOf(['medium', 'small']),
     slotProps: PropTypes.object,
     style: PropTypes.object,

package/modern/components/columnsPanel/ColumnsPanelTrigger.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { RenderProp } from "../../hooks/utils/useGridComponentRenderer.js";
+import type { GridSlotProps } from '../../models';
+export interface ColumnsPanelState {
+  /**
+   * If `true`, the columns panel is open.
+   */
+  open: boolean;
+}
+export type ColumnsPanelTriggerProps = Omit<GridSlotProps['baseButton'], 'className'> & {
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<GridSlotProps['baseButton'], ColumnsPanelState>;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  className?: string | ((state: ColumnsPanelState) => string);
+};
+/**
+ * A button that opens and closes the columns panel.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Columns Panel](https://mui.com/x/react-data-grid/components/columns-panel/)
+ *
+ * API:
+ *
+ * - [ColumnsPanelTrigger API](https://mui.com/x/api/data-grid/columns-panel-trigger/)
+ */
+declare const ColumnsPanelTrigger: React.ForwardRefExoticComponent<ColumnsPanelTriggerProps> | React.ForwardRefExoticComponent<Omit<ColumnsPanelTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ColumnsPanelTrigger };