@mui/x-data-grid 7.7.1 → 7.9.0

package/components/cell/GridActionsCellItem.d.ts

@@ -20,7 +20,7 @@ export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
     closeMenu?: () => void;
 } & Omit<MenuItemProps, 'component'>));
 declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<GridActionsCellItemCommonProps & {
-    showInMenu?: false | undefined;
+    showInMenu?: false;
     icon: React.ReactElement;
 } & Omit<IconButtonProps, "component">, "ref"> | Omit<GridActionsCellItemCommonProps & {
     showInMenu: true;
@@ -28,7 +28,7 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<GridAct
      * If false, the menu will not close when this item is clicked.
      * @default true
      */
-    closeMenuOnClick?: boolean | undefined;
-    closeMenu?: (() => void) | undefined;
+    closeMenuOnClick?: boolean;
+    closeMenu?: () => void;
 } & Omit<MenuItemProps, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
 export { GridActionsCellItem };

package/components/cell/GridSkeletonCell.d.ts

@@ -1,11 +1,18 @@
 import * as React from 'react';
-export interface GridSkeletonCellProps {
-    width: number;
-    height: number | 'auto';
-    field: string;
-    align: string;
+import { GridColType } from '../../models';
+export interface GridSkeletonCellProps extends React.HTMLAttributes<HTMLDivElement> {
+    type?: GridColType;
+    width?: number | string;
+    height?: number | 'auto';
+    field?: string;
+    align?: string;
+    /**
+     * If `true`, the cell will not display the skeleton but still reserve the cell space.
+     * @default false
+     */
+    empty?: boolean;
 }
-declare function GridSkeletonCell(props: React.HTMLAttributes<HTMLDivElement> & GridSkeletonCellProps): React.JSX.Element;
+declare function GridSkeletonCell(props: GridSkeletonCellProps): React.JSX.Element;
 declare namespace GridSkeletonCell {
     var propTypes: any;
 }

package/components/cell/GridSkeletonCell.js

@@ -1,52 +1,88 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["field", "align", "width", "height"];
+const _excluded = ["field", "type", "align", "width", "height", "empty", "style", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Skeleton from '@mui/material/Skeleton';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import clsx from 'clsx';
 import { fastMemo } from '../../utils/fastMemo';
-import { randomNumberBetween } from '../../utils/utils';
+import { createRandomNumberGenerator } from '../../utils/utils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const randomWidth = randomNumberBetween(10000, 20, 80);
+const CIRCULAR_CONTENT_SIZE = '1.3em';
+const CONTENT_HEIGHT = '1.2em';
+const DEFAULT_CONTENT_WIDTH_RANGE = [40, 80];
+const CONTENT_WIDTH_RANGE_BY_TYPE = {
+  number: [40, 60],
+  string: [40, 80],
+  date: [40, 60],
+  dateTime: [60, 80],
+  singleSelect: [40, 80]
+};
 const useUtilityClasses = ownerState => {
   const {
     align,
-    classes
+    classes,
+    empty
   } = ownerState;
   const slots = {
-    root: ['cell', 'cellSkeleton', `cell--text${capitalize(align)}`, 'withBorderColor']
+    root: ['cell', 'cellSkeleton', `cell--text${align ? capitalize(align) : 'Left'}`, empty && 'cellEmpty']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+const randomNumberGenerator = createRandomNumberGenerator(12345);
 function GridSkeletonCell(props) {
   const {
+      field,
+      type,
       align,
       width,
-      height
+      height,
+      empty = false,
+      style,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const rootProps = useGridRootProps();
   const ownerState = {
     classes: rootProps.classes,
-    align
+    align,
+    empty
   };
   const classes = useUtilityClasses(ownerState);
-  const contentWidth = Math.round(randomWidth());
+
+  // Memo prevents the non-circular skeleton widths changing to random widths on every render
+  const skeletonProps = React.useMemo(() => {
+    const isCircularContent = type === 'boolean' || type === 'actions';
+    if (isCircularContent) {
+      return {
+        variant: 'circular',
+        width: CIRCULAR_CONTENT_SIZE,
+        height: CIRCULAR_CONTENT_SIZE
+      };
+    }
+
+    // The width of the skeleton is a random number between the min and max values
+    // The min and max values are determined by the type of the column
+    const [min, max] = type ? CONTENT_WIDTH_RANGE_BY_TYPE[type] ?? DEFAULT_CONTENT_WIDTH_RANGE : DEFAULT_CONTENT_WIDTH_RANGE;
+    return {
+      variant: 'text',
+      width: `${Math.round(randomNumberGenerator(min, max))}%`,
+      height: CONTENT_HEIGHT
+    };
+  }, [type]);
   return /*#__PURE__*/_jsx("div", _extends({
-    className: classes.root,
-    style: {
+    "data-field": field,
+    className: clsx(classes.root, className),
+    style: _extends({
       height,
       maxWidth: width,
       minWidth: width
-    }
+    }, style)
   }, other, {
-    children: /*#__PURE__*/_jsx(Skeleton, {
-      width: `${contentWidth}%`,
-      height: 25
-    })
+    children: !empty && /*#__PURE__*/_jsx(Skeleton, _extends({}, skeletonProps))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
@@ -54,10 +90,16 @@ process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  align: PropTypes.string.isRequired,
-  field: PropTypes.string.isRequired,
-  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
-  width: PropTypes.number.isRequired
+  align: PropTypes.string,
+  /**
+   * If `true`, the cell will not display the skeleton but still reserve the cell space.
+   * @default false
+   */
+  empty: PropTypes.bool,
+  field: PropTypes.string,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+  type: PropTypes.oneOf(['actions', 'boolean', 'custom', 'date', 'dateTime', 'number', 'singleSelect', 'string']),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 } : void 0;
 const Memoized = fastMemo(GridSkeletonCell);
 export { Memoized as GridSkeletonCell };

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -5,7 +5,6 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
 import { fastMemo } from '../../utils/fastMemo';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
@@ -142,12 +141,13 @@ function GridColumnHeaderItem(props) {
     children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.slots.columnHeaderFilterIconButton, _extends({
       field: colDef.field,
       counter: filterItemsCounter
-    }, rootProps.slotProps?.columnHeaderFilterIconButton)), showSortIcon && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, rootProps.slotProps?.columnHeaderFilterIconButton)), showSortIcon && /*#__PURE__*/_jsx(rootProps.slots.columnHeaderSortIcon, _extends({
+      field: colDef.field,
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder,
       disabled: !colDef.sortable
-    })]
+    }, rootProps.slotProps?.columnHeaderSortIcon))]
   });
   React.useLayoutEffect(() => {
     const columnMenuState = apiRef.current.state.columnMenu;

package/components/columnHeaders/GridColumnHeaderSortIcon.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { GridSortDirection } from '../../models/gridSortModel';
 export interface GridColumnHeaderSortIconProps {
+    field: string;
     direction: GridSortDirection;
     index: number | undefined;
     sortingOrder: readonly GridSortDirection[];

package/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -1,4 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["direction", "index", "sortingOrder", "disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
@@ -35,11 +37,12 @@ function getIcon(icons, direction, className, sortingOrder) {
 }
 function GridColumnHeaderSortIconRaw(props) {
   const {
-    direction,
-    index,
-    sortingOrder,
-    disabled
-  } = props;
+      direction,
+      index,
+      sortingOrder,
+      disabled
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const ownerState = _extends({}, props, {
@@ -56,13 +59,14 @@ function GridColumnHeaderSortIconRaw(props) {
     title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
     size: "small",
     disabled: disabled
-  }, rootProps.slotProps?.baseIconButton, {
+  }, rootProps.slotProps?.baseIconButton, other, {
     children: iconElement
   }));
   return /*#__PURE__*/_jsxs(GridIconButtonContainer, {
     children: [index != null && /*#__PURE__*/_jsx(Badge, {
       badgeContent: index,
       color: "default",
+      overlap: "circular",
       children: iconButton
     }), index == null && iconButton]
   });
@@ -75,6 +79,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes =
   // ----------------------------------------------------------------------
   direction: PropTypes.oneOf(['asc', 'desc']),
   disabled: PropTypes.bool,
+  field: PropTypes.string.isRequired,
   index: PropTypes.number,
   sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])).isRequired
 } : void 0;

package/components/containers/GridFooterContainer.d.ts

@@ -4,6 +4,6 @@ export type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 };
 declare const GridFooterContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    sx?: SxProps<Theme> | undefined;
+    sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridFooterContainer };

package/components/containers/GridOverlay.d.ts

@@ -4,6 +4,6 @@ export type GridOverlayProps = React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 };
 declare const GridOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    sx?: SxProps<Theme> | undefined;
+    sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridOverlay };

package/components/containers/GridRootStyles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Theme } from '@mui/material/styles';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 export type OwnerState = DataGridProcessedProps;

package/components/containers/GridRootStyles.js

@@ -141,6 +141,8 @@ export const GridRootStyles = styled('div', {
     [`& .${c.treeDataGroupingCell}`]: styles.treeDataGroupingCell
   }, {
     [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+  }, {
+    [`& .${c.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
   }, {
     [`& .${c.detailPanelToggleCell}`]: styles.detailPanelToggleCell
   }, {
@@ -159,7 +161,7 @@ export const GridRootStyles = styled('div', {
   const selectedOpacity = (t.vars || t).palette.action.selectedOpacity;
   const selectedBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedOpacity})` : alpha(t.palette.primary.main, selectedOpacity);
   const selectedHoverBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / calc(
-                ${t.vars.palette.action.selectedOpacity} + 
+                ${t.vars.palette.action.selectedOpacity} +
                 ${t.vars.palette.action.hoverOpacity}
               ))` : alpha(t.palette.primary.main, t.palette.action.selectedOpacity + t.palette.action.hoverOpacity);
   const pinnedHoverBackground = t.vars ? hoverColor : blend(pinnedBackground, hoverColor, hoverOpacity);
@@ -423,6 +425,9 @@ export const GridRootStyles = styled('div', {
           backgroundColor: 'transparent'
         }
       },
+      [`&.${c.rowSkeleton}:hover`]: {
+        backgroundColor: 'transparent'
+      },
       '&.Mui-selected': selectedStyles
     },
     [`& .${c['container--top']}, & .${c['container--bottom']}`]: {
@@ -608,6 +613,12 @@ export const GridRootStyles = styled('div', {
       alignSelf: 'stretch',
       marginRight: t.spacing(2)
     },
+    [`& .${c.treeDataGroupingCellLoadingContainer}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%'
+    },
     [`& .${c.groupingCriteriaCell}`]: {
       display: 'flex',
       alignItems: 'center',
@@ -623,7 +634,7 @@ export const GridRootStyles = styled('div', {
       minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
       alignSelf: 'stretch',
       [`&.${c['scrollbarFiller--borderTop']}`]: {
-        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+        borderTop: '1px solid var(--rowBorderColor)'
       },
       [`&.${c['scrollbarFiller--pinnedRight']}`]: {
         backgroundColor: 'var(--DataGrid-pinnedBackground)',
@@ -636,6 +647,12 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c['filler--borderTop']}`]: {
       borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+    },
+    /* Hide grid rows and vertical scrollbar when skeleton overlay is visible */
+    [`& .${c['main--hasSkeletonLoadingOverlay']}`]: {
+      [`& .${c.virtualScrollerContent}, & .${c['scrollbar--vertical']}, & .${c.pinnedRows}`]: {
+        display: 'none'
+      }
     }
   });
   return gridStyle;

package/components/containers/GridToolbarContainer.d.ts

@@ -4,6 +4,6 @@ export type GridToolbarContainerProps = React.HTMLAttributes<HTMLDivElement> & {
     sx?: SxProps<Theme>;
 };
 declare const GridToolbarContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    sx?: SxProps<Theme> | undefined;
+    sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridToolbarContainer };

package/components/panel/GridPanel.d.ts

@@ -16,7 +16,7 @@ export interface GridPanelProps extends Partial<React.ComponentProps<typeof Grid
     open: boolean;
 }
 export declare const gridPanelClasses: Record<keyof GridPanelClasses, string>;
-declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Popper").PopperProps & React.RefAttributes<HTMLDivElement>, "hidden" | "color" | "content" | "style" | "open" | "translate" | "container" | "transition" | "slot" | "title" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "component" | "sx" | "components" | "slotProps" | "slots" | "placement" | "disablePortal" | "keepMounted" | "modifiers" | "anchorEl" | "popperOptions" | "popperRef" | "componentsProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<import("@mui/material/Popper").PopperProps & React.RefAttributes<HTMLDivElement>, "hidden" | "color" | "content" | "style" | "open" | "translate" | "container" | "transition" | "slot" | "title" | "ref" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "component" | "sx" | "components" | "slotProps" | "slots" | "placement" | "disablePortal" | "keepMounted" | "modifiers" | "anchorEl" | "popperOptions" | "popperRef" | "componentsProps"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     ownerState: OwnerState;
 }, {}, {}>;
 declare const GridPanel: React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/components/toolbar/GridToolbarExportContainer.d.ts

@@ -12,6 +12,6 @@ interface GridToolbarExportContainerProps {
     };
 }
 declare const GridToolbarExportContainer: React.ForwardRefExoticComponent<GridToolbarExportContainerProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarExportContainer };

package/components/virtualization/GridMainContainer.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 export declare const GridMainContainer: React.ForwardRefExoticComponent<{
     className: string;
 } & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/components/virtualization/GridVirtualScroller.js

@@ -9,7 +9,8 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { gridDimensionsSelector } from '../../hooks/features/dimensions';
 import { useGridVirtualScroller } from '../../hooks/features/virtualization/useGridVirtualScroller';
-import { GridOverlays } from '../base/GridOverlays';
+import { useGridOverlays } from '../../hooks/features/overlays/useGridOverlays';
+import { GridOverlays as Overlays } from '../base/GridOverlays';
 import { GridHeaders } from '../GridHeaders';
 import { GridMainContainer as Container } from './GridMainContainer';
 import { GridTopContainer as TopContainer } from './GridTopContainer';
@@ -19,12 +20,12 @@ import { GridVirtualScrollerFiller as SpaceFiller } from './GridVirtualScrollerF
 import { GridVirtualScrollerRenderZone as RenderZone } from './GridVirtualScrollerRenderZone';
 import { GridVirtualScrollbar as Scrollbar } from './GridVirtualScrollbar';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = (ownerState, dimensions) => {
+const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
   const {
     classes
   } = ownerState;
   const slots = {
-    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight'],
+    root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
     scroller: ['virtualScroller']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -51,7 +52,8 @@ function GridVirtualScroller(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const classes = useUtilityClasses(rootProps, dimensions);
+  const overlaysProps = useGridOverlays();
+  const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
   const virtualScroller = useGridVirtualScroller();
   const {
     getContainerProps,
@@ -79,7 +81,7 @@ function GridVirtualScroller(props) {
           position: "top",
           virtualScroller: virtualScroller
         })]
-      }), /*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
+      }), /*#__PURE__*/_jsx(Overlays, _extends({}, overlaysProps)), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
         children: /*#__PURE__*/_jsxs(RenderZone, _extends({}, getRenderZoneProps(), {
           children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller

package/components/virtualization/GridVirtualScrollerContent.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/system';
 declare const GridVirtualScrollerContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    sx?: SxProps<Theme> | undefined;
+    sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollerContent };

package/components/virtualization/GridVirtualScrollerRenderZone.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/system';
 declare const GridVirtualScrollerRenderZone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    sx?: SxProps<Theme> | undefined;
+    sx?: SxProps<Theme>;
 } & React.RefAttributes<HTMLDivElement>>;
 export { GridVirtualScrollerRenderZone };

package/constants/defaultGridSlotsComponents.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement } from '../components';
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon } from '../components';
 import { GridCell } from '../components/cell/GridCell';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
@@ -14,6 +14,7 @@ export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
   cell: GridCell,
   skeletonCell: GridSkeletonCell,
   columnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
+  columnHeaderSortIcon: GridColumnHeaderSortIcon,
   columnMenu: GridColumnMenu,
   columnHeaders: GridColumnHeaders,
   detailPanels: GridDetailPanels,

package/constants/gridClasses.d.ts

@@ -362,6 +362,11 @@ export interface GridClasses {
      * Styles applied to the main container element when it has right pinned columns.
      */
     'main--hasPinnedRight': string;
+    /**
+     * Styles applied to the main container element when it has an active skeleton loading overlay.
+     * @ignore - do not document.
+     */
+    'main--hasSkeletonLoadingOverlay': string;
     /**
      * Styles applied to the menu element.
      */
@@ -483,6 +488,10 @@ export interface GridClasses {
      * Styles applied to the root element of the row reorder cell when dragging is allowed
      */
     'rowReorderCell--draggable': string;
+    /**
+     * Styles applied to the skeleton row element.
+     */
+    rowSkeleton: string;
     /**
      * Styles applied to both scroll area elements.
      */
@@ -573,6 +582,11 @@ export interface GridClasses {
      * Styles applied to the toggle of the grouping cell of the tree data.
      */
     treeDataGroupingCellToggle: string;
+    /**
+     * Styles applied to the loading container of the grouping cell of the tree data.
+     * @ignore - do not document.
+     */
+    treeDataGroupingCellLoadingContainer: string;
     /**
      * Styles applied to the root element of the grouping criteria cell
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderTop', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderTop', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
-export declare const useGridRegisterPipeApplier: <PrivateApi extends GridPrivateApiCommon, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<PrivateApi>, group: G, callback: () => void) => void;
+import { GridPipeProcessorGroup } from './gridPipeProcessingApi';
+export declare const useGridRegisterPipeApplier: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: React.MutableRefObject<PrivateApi>, group: G, callback: () => void) => void;

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
-import { GridPipeProcessor } from './gridPipeProcessingApi';
-export declare const useGridRegisterPipeProcessor: <PrivateApi extends GridPrivateApiCommon, G extends keyof import("./gridPipeProcessingApi").GridPipeProcessingLookup>(apiRef: React.MutableRefObject<PrivateApi>, group: G, callback: GridPipeProcessor<G>) => void;
+import { GridPipeProcessorGroup, GridPipeProcessor } from './gridPipeProcessingApi';
+export declare const useGridRegisterPipeProcessor: <PrivateApi extends GridPrivateApiCommon, G extends GridPipeProcessorGroup>(apiRef: React.MutableRefObject<PrivateApi>, group: G, callback: GridPipeProcessor<G>) => void;

package/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
-import { GridStrategyProcessor } from './gridStrategyProcessingApi';
-export declare const useGridRegisterStrategyProcessor: <Api extends GridPrivateApiCommon, G extends keyof import("./gridStrategyProcessingApi").GridStrategyProcessingLookup>(apiRef: React.MutableRefObject<Api>, strategyName: string, group: G, processor: GridStrategyProcessor<G>) => void;
+import { GridStrategyProcessorName, GridStrategyProcessor } from './gridStrategyProcessingApi';
+export declare const useGridRegisterStrategyProcessor: <Api extends GridPrivateApiCommon, G extends GridStrategyProcessorName>(apiRef: React.MutableRefObject<Api>, strategyName: string, group: G, processor: GridStrategyProcessor<G>) => void;

package/hooks/core/useGridInitialization.d.ts

@@ -4,4 +4,4 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
  */
-export declare const useGridInitialization: <PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon<any, any>>(inputApiRef: React.MutableRefObject<Api> | undefined, props: DataGridProcessedProps) => React.MutableRefObject<PrivateApi>;
+export declare const useGridInitialization: <PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: React.MutableRefObject<Api> | undefined, props: DataGridProcessedProps) => React.MutableRefObject<PrivateApi>;

package/hooks/core/useGridLocaleText.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-export declare const useGridLocaleText: (apiRef: React.MutableRefObject<GridPrivateApiCommon>, props: Pick<DataGridProcessedProps, 'localeText'>) => void;
+export declare const useGridLocaleText: (apiRef: React.MutableRefObject<GridPrivateApiCommon>, props: Pick<DataGridProcessedProps, "localeText">) => void;

package/hooks/core/useGridLoggerFactory.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-export declare const useGridLoggerFactory: (apiRef: React.MutableRefObject<GridPrivateApiCommon>, props: Pick<DataGridProcessedProps, 'logger' | 'logLevel'>) => void;
+export declare const useGridLoggerFactory: (apiRef: React.MutableRefObject<GridPrivateApiCommon>, props: Pick<DataGridProcessedProps, "logger" | "logLevel">) => void;

package/hooks/features/clipboard/useGridClipboard.d.ts

@@ -5,4 +5,4 @@ import type { DataGridProcessedProps } from '../../../models/props/DataGridProps
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)
  */
-export declare const useGridClipboard: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'ignoreValueFormatterDuringExport' | 'onClipboardCopy' | 'clipboardCopyCellDelimiter'>) => void;
+export declare const useGridClipboard: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "ignoreValueFormatterDuringExport" | "onClipboardCopy" | "clipboardCopyCellDelimiter">) => void;

package/hooks/features/columnGrouping/useGridColumnGrouping.d.ts

@@ -7,4 +7,4 @@ export declare const columnGroupsStateInitializer: GridStateInitializer<Pick<Dat
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridColumnGrouping: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'columnGroupingModel'>) => void;
+export declare const useGridColumnGrouping: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "columnGroupingModel">) => void;

package/hooks/features/columnResize/useGridColumnResize.d.ts

@@ -7,4 +7,4 @@ export declare const columnResizeStateInitializer: GridStateInitializer;
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
-export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'autosizeOptions' | 'autosizeOnMount' | 'disableAutosize' | 'onColumnResize' | 'onColumnWidthChange'>) => void;
+export declare const useGridColumnResize: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "autosizeOptions" | "autosizeOnMount" | "disableAutosize" | "onColumnResize" | "onColumnWidthChange">) => void;