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

package/components/columnsManagement/GridColumnsManagement.js

@@ -21,6 +21,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _utils = require("./utils");
 var _assert = require("../../utils/assert");
 var _GridShadowScrollArea = require("../GridShadowScrollArea");
+var _gridPivotingSelectors = require("../../hooks/features/pivoting/gridPivotingSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 
@@ -41,12 +42,15 @@ const collator = new Intl.Collator();
 function GridColumnsManagement(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const searchInputRef = React.useRef(null);
-  const columns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
   const initialColumnVisibilityModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridInitialColumnVisibilityModelSelector);
   const columnVisibilityModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const [searchValue, setSearchValue] = React.useState('');
   const classes = useUtilityClasses(rootProps);
+  const columnDefinitions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnDefinitionsSelector);
+  const pivotActive = (0, _useGridSelector.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotActiveSelector);
+  const pivotInitialColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotInitialColumnsSelector);
+  const columns = React.useMemo(() => pivotActive ? Array.from(pivotInitialColumns.values()) : columnDefinitions, [pivotActive, pivotInitialColumns, columnDefinitions]);
   const {
     sort,
     searchPredicate = _utils.defaultSearchPredicate,
@@ -109,7 +113,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();
     }
@@ -124,7 +128,7 @@ function GridColumnsManagement(props) {
   };
   const handleSearchReset = React.useCallback(() => {
     setSearchValue('');
-    searchInputRef.current.focus();
+    searchInputRef.current?.focus();
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementHeader, {
@@ -176,7 +180,7 @@ function GridColumnsManagement(props) {
         ownerState: rootProps,
         children: [currentColumns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
           className: classes.row,
-          disabled: column.hideable === false,
+          disabled: column.hideable === false || pivotActive,
           checked: columnVisibilityModel[column.field] !== false,
           onClick: toggleColumn,
           name: column.field,
@@ -193,7 +197,7 @@ function GridColumnsManagement(props) {
       ownerState: rootProps,
       className: classes.footer,
       children: [!disableShowHideToggle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
-        disabled: hideableColumns.length === 0,
+        disabled: hideableColumns.length === 0 || pivotActive,
         checked: allHideableColumnsVisible,
         indeterminate: !allHideableColumnsVisible && !allHideableColumnsHidden,
         onClick: () => toggleAllColumns(!allHideableColumnsVisible),
@@ -202,7 +206,7 @@ function GridColumnsManagement(props) {
         density: "compact"
       }, rootProps.slotProps?.baseCheckbox)) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), !disableResetButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         onClick: () => apiRef.current.setColumnVisibilityModel(initialColumnVisibilityModel),
-        disabled: isResetDisabled
+        disabled: isResetDisabled || pivotActive
       }, rootProps.slotProps?.baseButton, {
         children: apiRef.current.getLocaleText('columnsManagementReset')
       })) : null]
@@ -239,30 +243,7 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @returns {GridColDef['field'][]} The list of togglable columns' field names.
    */
   getTogglableColumns: _propTypes.default.func,
-  searchInputProps: _propTypes.default.shape({
-    autoComplete: _propTypes.default.string,
-    className: _propTypes.default.string,
-    color: _propTypes.default.oneOf(['error', 'primary']),
-    disabled: _propTypes.default.bool,
-    error: _propTypes.default.bool,
-    fullWidth: _propTypes.default.bool,
-    helperText: _propTypes.default.string,
-    id: _propTypes.default.string,
-    inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-      current: _propTypes.default.object
-    })]),
-    label: _propTypes.default.node,
-    onChange: _propTypes.default.func,
-    onKeyDown: _propTypes.default.func,
-    placeholder: _propTypes.default.string,
-    role: _propTypes.default.string,
-    size: _propTypes.default.oneOf(['medium', 'small']),
-    slotProps: _propTypes.default.object,
-    style: _propTypes.default.object,
-    tabIndex: _propTypes.default.number,
-    type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week']), _propTypes.default.object]),
-    value: _propTypes.default.string
-  }),
+  searchInputProps: _propTypes.default.object,
   searchPredicate: _propTypes.default.func,
   sort: _propTypes.default.oneOf(['asc', 'desc']),
   /**
@@ -285,7 +266,7 @@ const GridColumnsManagementScrollArea = (0, _styles.styled)(_GridShadowScrollAre
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementScrollArea'
 })({
-  maxHeight: 400
+  maxHeight: 300
 });
 const GridColumnsManagementHeader = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',

package/components/columnsPanel/ColumnsPanelTrigger.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");
@@ -52,7 +52,7 @@ const ColumnsPanelTrigger = exports.ColumnsPanelTrigger = (0, _forwardRef.forwar
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const {
     columnsPanelTriggerRef
-  } = (0, _GridPreferencePanelContext.useGridPreferencePanelContext)();
+  } = (0, _GridPanelContext.useGridPanelContext)();
   const handleRef = (0, _useForkRef.default)(ref, columnsPanelTriggerRef);
   const handleClick = event => {
     if (open) {
@@ -73,10 +73,10 @@ const ColumnsPanelTrigger = exports.ColumnsPanelTrigger = (0, _forwardRef.forwar
     '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__*/(0, _jsxRuntime.jsx)(React.Fragment, {
@@ -88,146 +88,21 @@ process.env.NODE_ENV !== "production" ? ColumnsPanelTrigger.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,
   /**
    * Override or extend the styles applied to 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/containers/GridOverlay.js

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

package/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/components/containers/GridRoot.js

@@ -25,7 +25,7 @@ var _useIsSSR = require("../../hooks/utils/useIsSSR");
 var _GridHeader = require("../GridHeader");
 var _base = require("../base");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "children"];
+const _excluded = ["className", "children", "sidePanel"];
 const useUtilityClasses = (ownerState, density) => {
   const {
     autoHeight,
@@ -41,7 +41,8 @@ const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
       className,
-      children
+      children,
+      sidePanel
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
@@ -62,13 +63,17 @@ const GridRoot = (0, _forwardRef.forwardRef)(function GridRoot(props, ref) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, className, cssVariables.className),
+    className: (0, _clsx.default)(classes.root, className, cssVariables.className, sidePanel && _gridClasses.gridClasses.withSidePanel),
     ownerState: ownerState
   }, other, {
     ref: handleRef,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeader.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridBody, {
-      children: children
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridFooterPlaceholder, {}), cssVariables.tag]
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _gridClasses.gridClasses.mainContent,
+      role: "presentation",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeader.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridBody, {
+        children: children
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.GridFooterPlaceholder, {})]
+    }), sidePanel, cssVariables.tag]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
@@ -76,6 +81,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.default.node,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

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/export/ExportCsv.js

@@ -55,113 +55,9 @@ process.env.NODE_ENV !== "production" ? ExportCsv.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 CSV export.
    * @demos
@@ -183,32 +79,11 @@ process.env.NODE_ENV !== "production" ? ExportCsv.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;