@mui/x-data-grid 7.17.0 → 7.19.0

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" | "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" | "componentsProps" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+declare const GridPanelRoot: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").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" | "componentsProps" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     ownerState: OwnerState;
 }, {}, {}>;
 declare const GridPanel: React.ForwardRefExoticComponent<Omit<GridPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/components/panel/GridPanel.js

@@ -84,7 +84,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/_jsx(GridPanelRoot, _extends({
     ref: ref,
     placement: "bottom-start",
-    className: clsx(className, classes.panel),
+    className: clsx(classes.panel, className),
     ownerState: rootProps,
     anchorEl: anchorEl,
     modifiers: modifiers

package/components/panel/GridPanelContent.js

@@ -37,7 +37,7 @@ function GridPanelContent(props) {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridPanelContentRoot, _extends({
-    className: clsx(className, classes.root),
+    className: clsx(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/components/panel/GridPanelFooter.js

@@ -37,7 +37,7 @@ function GridPanelFooter(props) {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridPanelFooterRoot, _extends({
-    className: clsx(className, classes.root),
+    className: clsx(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/components/panel/GridPanelHeader.js

@@ -35,7 +35,7 @@ function GridPanelHeader(props) {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/_jsx(GridPanelHeaderRoot, _extends({
-    className: clsx(className, classes.root),
+    className: clsx(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/components/panel/GridPanelWrapper.js

@@ -48,7 +48,7 @@ const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper
     children: /*#__PURE__*/_jsx(GridPanelWrapperRoot, _extends({
       ref: ref,
       tabIndex: -1,
-      className: clsx(className, classes.root),
+      className: clsx(classes.root, className),
       ownerState: rootProps
     }, other))
   }));

package/components/panel/filterPanel/filterPanelUtils.d.ts

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

package/components/toolbar/GridToolbarQuickFilter.js

@@ -93,7 +93,7 @@ function GridToolbarQuickFilter(props) {
     variant: "standard",
     value: searchValue,
     onChange: handleSearchValueChange,
-    className: clsx(className, classes.root),
+    className: clsx(classes.root, className),
     placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
     type: "search"

package/components/virtualization/GridBottomContainer.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare function GridBottomContainer(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function GridBottomContainer(props: React.PropsWithChildren): React.JSX.Element;

package/components/virtualization/GridBottomContainer.js

@@ -4,6 +4,9 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import { gridClasses, getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { gridDimensionsSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {
   const slots = {
@@ -18,8 +21,22 @@ const Element = styled('div')({
 });
 export function GridBottomContainer(props) {
   const classes = useUtilityClasses();
+  const apiRef = useGridApiContext();
+  const {
+    viewportOuterSize,
+    minimumSize,
+    hasScrollX,
+    scrollbarSize
+  } = useGridSelector(apiRef, gridDimensionsSelector);
+  const scrollHeight = hasScrollX ? scrollbarSize : 0;
+  const offset = Math.max(viewportOuterSize.height - minimumSize.height -
+  // Subtract scroll height twice to account for GridVirtualScrollerFiller and horizontal scrollbar
+  2 * scrollHeight, 0);
   return /*#__PURE__*/_jsx(Element, _extends({}, props, {
-    className: clsx(classes.root, props.className, gridClasses['container--bottom']),
+    className: clsx(classes.root, gridClasses['container--bottom']),
+    style: {
+      transform: `translateY(${offset}px)`
+    },
     role: "presentation"
   }));
 }

package/components/virtualization/GridMainContainer.js

@@ -16,7 +16,9 @@ const Element = styled('div', {
 })({
   flexGrow: 1,
   position: 'relative',
-  overflow: 'hidden'
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column'
 });
 export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = useGridRootProps();

package/components/virtualization/GridTopContainer.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare function GridTopContainer(props: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function GridTopContainer(props: React.PropsWithChildren): React.JSX.Element;

package/components/virtualization/GridTopContainer.js

@@ -19,7 +19,7 @@ const Element = styled('div')({
 export function GridTopContainer(props) {
   const classes = useUtilityClasses();
   return /*#__PURE__*/_jsx(Element, _extends({}, props, {
-    className: clsx(classes.root, props.className, gridClasses['container--top']),
+    className: clsx(classes.root, gridClasses['container--top']),
     role: "presentation"
   }));
 }

package/components/virtualization/GridVirtualScrollbar.js

@@ -21,9 +21,6 @@ const Scrollbar = styled('div')({
   position: 'absolute',
   display: 'inline-block',
   zIndex: 6,
-  '& > div': {
-    display: 'inline-block'
-  },
   // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
   // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
   // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
@@ -55,9 +52,6 @@ const ScrollbarHorizontal = styled(Scrollbar)({
   },
   bottom: '0px'
 });
-const Content = styled('div')({
-  display: 'inline-block'
-});
 const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualScrollbar(props, ref) {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
@@ -127,7 +121,7 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
     className: classes.root,
     tabIndex: -1,
     "aria-hidden": "true",
-    children: /*#__PURE__*/_jsx(Content, {
+    children: /*#__PURE__*/_jsx("div", {
       ref: contentRef,
       className: classes.content
     })

package/components/virtualization/GridVirtualScroller.js

@@ -37,6 +37,7 @@ const Scroller = styled('div', {
 })({
   position: 'relative',
   height: '100%',
+  flexGrow: 1,
   overflow: 'scroll',
   scrollbarWidth: 'none' /* Firefox */,
   '&::-webkit-scrollbar': {

package/components/virtualization/GridVirtualScrollerFiller.js

@@ -44,10 +44,9 @@ function GridVirtualScrollerFiller({
     leftPinnedWidth,
     rightPinnedWidth
   } = useGridSelector(apiRef, gridDimensionsSelector);
-  const scrollbarHeight = hasScrollX ? scrollbarSize : 0;
-  const expandedHeight = viewportOuterSize.height - minimumSize.height - scrollbarHeight;
-  const height = Math.max(scrollbarHeight, expandedHeight);
-  if (height === 0) {
+  const height = hasScrollX ? scrollbarSize : 0;
+  const needsLastRowBorder = viewportOuterSize.height - minimumSize.height > 0;
+  if (height === 0 && !needsLastRowBorder) {
     return null;
   }
   return /*#__PURE__*/_jsxs(Filler, {

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

@@ -4,9 +4,9 @@ import { GridStateCommunity } from '../../../models/gridStateCommunity';
  * @ignore - do not document.
  */
 export declare const gridColumnGroupingSelector: (state: GridStateCommunity) => import("./gridColumnGroupsInterfaces").GridColumnsGroupingState;
-export declare const gridColumnGroupsUnwrappedModelSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
+export declare const gridColumnGroupsUnwrappedModelSelector: import("../../..").OutputSelector<GridStateCommunity, {
     [columnField: string]: string[];
 }>;
-export declare const gridColumnGroupsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnGroupLookup>;
-export declare const gridColumnGroupsHeaderStructureSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridGroupingStructure[][]>;
-export declare const gridColumnGroupsHeaderMaxDepthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
+export declare const gridColumnGroupsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridColumnGroupLookup>;
+export declare const gridColumnGroupsHeaderStructureSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnGroupsInterfaces").GridGroupingStructure[][]>;
+export declare const gridColumnGroupsHeaderMaxDepthSelector: import("../../..").OutputSelector<GridStateCommunity, number>;

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -25,11 +25,10 @@ export interface UseGridColumnHeadersProps {
 export interface GetHeadersParams {
     position?: GridPinnedColumnPosition;
     renderContext?: GridColumnsRenderContext;
-    minFirstColumn?: number;
     maxLastColumn?: number;
 }
 type OwnerState = DataGridProcessedProps;
-export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     ownerState: OwnerState;
 }, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -53,7 +53,7 @@ export const useGridColumnHeaders = props => {
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
-  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, isRtl, pinnedColumns.left.length);
+  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
@@ -83,7 +83,6 @@ export const useGridColumnHeaders = props => {
   const getColumnsToRender = params => {
     const {
       renderContext: currentContext = renderContext,
-      // TODO: `minFirstColumn` is not used anymore, could be refactored out.
       maxLastColumn = visibleColumns.length
     } = params || {};
     const firstColumnToRender = currentContext.firstColumnIndex;
@@ -123,16 +122,22 @@ export const useGridColumnHeaders = props => {
     computedWidth
   }) => {
     let style;
-    if (pinnedPosition === 'left' || pinnedPosition === 'right') {
+    const isLeftPinned = pinnedPosition === GridPinnedColumnPosition.LEFT;
+    const isRightPinned = pinnedPosition === GridPinnedColumnPosition.RIGHT;
+    if (isLeftPinned || isRightPinned) {
       const pinnedOffset = getPinnedCellOffset(pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions);
+      let side = isLeftPinned ? 'left' : 'right';
+      if (isRtl) {
+        side = isLeftPinned ? 'right' : 'left';
+      }
       if (pinnedPosition === 'left') {
         style = {
-          left: pinnedOffset
+          [side]: pinnedOffset
         };
       }
       if (pinnedPosition === 'right') {
         style = {
-          right: pinnedOffset
+          [side]: pinnedOffset
         };
       }
     }
@@ -191,18 +196,15 @@ export const useGridColumnHeaders = props => {
       children: [leftRenderContext && getColumnHeaders({
         position: GridPinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }, {
         disableReorder: true
       }), getColumnHeaders({
         renderContext,
-        minFirstColumn: pinnedColumns.left.length,
         maxLastColumn: visibleColumns.length - pinnedColumns.right.length
       }), rightRenderContext && getColumnHeaders({
         position: GridPinnedColumnPosition.RIGHT,
         renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
         maxLastColumn: rightRenderContext.lastColumnIndex
       }, {
         disableReorder: true,
@@ -282,7 +284,7 @@ export const useGridColumnHeaders = props => {
         depth: depth,
         isLastColumn: headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length,
         maxDepth: headerGroupingMaxDepth,
-        height: dimensions.headerHeight,
+        height: dimensions.groupHeaderHeight,
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
@@ -309,7 +311,6 @@ export const useGridColumnHeaders = props => {
           params: {
             position: GridPinnedColumnPosition.LEFT,
             renderContext: leftRenderContext,
-            minFirstColumn: leftRenderContext.firstColumnIndex,
             maxLastColumn: leftRenderContext.lastColumnIndex
           }
         }), getColumnGroupHeaders({
@@ -322,7 +323,6 @@ export const useGridColumnHeaders = props => {
           params: {
             position: GridPinnedColumnPosition.RIGHT,
             renderContext: rightRenderContext,
-            minFirstColumn: rightRenderContext.firstColumnIndex,
             maxLastColumn: rightRenderContext.lastColumnIndex
           }
         })]

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

@@ -1,3 +1,3 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 export declare const gridColumnResizeSelector: (state: GridStateCommunity) => import("./columnResizeState").GridColumnResizeState;
-export declare const gridResizingColumnFieldSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string>;
+export declare const gridResizingColumnFieldSelector: import("../../..").OutputSelector<GridStateCommunity, string>;

package/hooks/features/columnResize/useGridColumnResize.js

@@ -302,13 +302,13 @@ export const useGridColumnResize = (apiRef, props) => {
     }
     refs.groupHeaderElements = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
     refs.cellElements = findGridCellElementsFromCol(refs.columnHeaderElement, apiRef.current);
-    refs.fillerLeft = findGridElement(apiRef.current, 'filler--pinnedLeft');
-    refs.fillerRight = findGridElement(apiRef.current, 'filler--pinnedRight');
+    refs.fillerLeft = findGridElement(apiRef.current, isRtl ? 'filler--pinnedRight' : 'filler--pinnedLeft');
+    refs.fillerRight = findGridElement(apiRef.current, isRtl ? 'filler--pinnedLeft' : 'filler--pinnedRight');
     const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
-    refs.leftPinnedCellsAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedCellsAfterCol(apiRef.current, refs.columnHeaderElement);
-    refs.rightPinnedCellsBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedCellsBeforeCol(apiRef.current, refs.columnHeaderElement);
-    refs.leftPinnedHeadersAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedHeadersAfterCol(apiRef.current, refs.columnHeaderElement);
-    refs.rightPinnedHeadersBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedHeadersBeforeCol(apiRef.current, refs.columnHeaderElement);
+    refs.leftPinnedCellsAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedCellsAfterCol(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.rightPinnedCellsBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedCellsBeforeCol(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.leftPinnedHeadersAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedHeadersAfterCol(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.rightPinnedHeadersBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedHeadersBeforeCol(apiRef.current, refs.columnHeaderElement, isRtl);
     resizeDirection.current = getResizeDirection(separator, isRtl);
     initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
   };

package/hooks/features/columns/gridColumnsSelector.d.ts

@@ -9,33 +9,33 @@ export declare const gridColumnsStateSelector: (state: GridStateCommunity) => im
  * Get an array of column fields in the order rendered on screen.
  * @category Columns
  */
-export declare const gridColumnFieldsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string[]>;
+export declare const gridColumnFieldsSelector: import("../../..").OutputSelector<GridStateCommunity, string[]>;
 /**
  * Get the columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns
  */
-export declare const gridColumnLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridColumnLookup>;
+export declare const gridColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridColumnLookup>;
 /**
  * Get an array of column definitions in the order rendered on screen..
  * @category Columns
  */
-export declare const gridColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[]>;
+export declare const gridColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[]>;
 /**
  * Get the column visibility model, containing the visibility status of each column.
  * If a column is not registered in the model, it is visible.
  * @category Visible Columns
  */
-export declare const gridColumnVisibilityModelSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnVisibilityModel>;
+export declare const gridColumnVisibilityModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridColumnsInterfaces").GridColumnVisibilityModel>;
 /**
  * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Visible Columns
  */
-export declare const gridVisibleColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[]>;
+export declare const gridVisibleColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[]>;
 /**
  * Get the field of each visible column.
  * @category Visible Columns
  */
-export declare const gridVisibleColumnFieldsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string[]>;
+export declare const gridVisibleColumnFieldsSelector: import("../../..").OutputSelector<GridStateCommunity, string[]>;
 /**
  * Get the visible pinned columns model.
  * @category Visible Columns
@@ -45,7 +45,7 @@ export declare const gridPinnedColumnsSelector: (state: GridStateCommunity) => G
  * Get the visible pinned columns.
  * @category Visible Columns
  */
-export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
+export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, {
     left: import("../../../internals").GridStateColDef[];
     right: import("../../../internals").GridStateColDef[];
 }>;
@@ -53,25 +53,25 @@ export declare const gridVisiblePinnedColumnDefinitionsSelector: import("../../.
  * Get the left position in pixel of each visible columns relative to the left of the first column.
  * @category Visible Columns
  */
-export declare const gridColumnPositionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number[]>;
+export declare const gridColumnPositionsSelector: import("../../..").OutputSelector<GridStateCommunity, number[]>;
 /**
  * Get the summed width of all the visible columns.
  * @category Visible Columns
  */
-export declare const gridColumnsTotalWidthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
+export declare const gridColumnsTotalWidthSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
 /**
  * Get the filterable columns as an array.
  * @category Columns
  */
-export declare const gridFilterableColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[]>;
+export declare const gridFilterableColumnDefinitionsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../../internals").GridStateColDef[]>;
 /**
  * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns
  */
-export declare const gridFilterableColumnLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridColumnLookup>;
+export declare const gridFilterableColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridColumnLookup>;
 /**
  * Checks if some column has a colSpan field.
  * @category Columns
  * @ignore - Do not document
  */
-export declare const gridHasColSpanSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean>;
+export declare const gridHasColSpanSelector: import("../../..").OutputSelector<GridStateCommunity, boolean>;

package/hooks/features/columns/gridColumnsUtils.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import resolveProps from '@mui/utils/resolveProps';
 import { DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF, getGridDefaultColumnTypes } from "../../../colDef/index.js";
 import { gridColumnsStateSelector, gridColumnVisibilityModelSelector } from "./gridColumnsSelector.js";
 import { clamp } from "../../../utils/utils.js";
@@ -275,9 +276,9 @@ export const createColumnsState = ({
         }
       }
     });
-    columnsState.lookup[field] = _extends({}, existingState, newColumn, {
+    columnsState.lookup[field] = resolveProps(existingState, _extends({}, newColumn, {
       hasBeenResized
-    });
+    }));
   });
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
     Object.keys(columnsState.lookup).forEach(field => {

package/hooks/features/density/densitySelector.d.ts

@@ -3,4 +3,4 @@ import { GridDensity } from '../../../models/gridDensity';
 export declare const COMPACT_DENSITY_FACTOR = 0.7;
 export declare const COMFORTABLE_DENSITY_FACTOR = 1.3;
 export declare const gridDensitySelector: (state: GridStateCommunity) => GridDensity;
-export declare const gridDensityFactorSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
+export declare const gridDensityFactorSelector: import("../../..").OutputSelector<GridStateCommunity, number>;

package/hooks/features/dimensions/gridDimensionsApi.d.ts

@@ -61,6 +61,10 @@ export interface GridDimensions {
      * Height of one column header.
      */
     headerHeight: number;
+    /**
+     * Height of one column group header.
+     */
+    groupHeaderHeight: number;
     /**
      * Height of header filters.
      */

package/hooks/features/dimensions/useGridDimensions.d.ts

@@ -3,7 +3,7 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridDimensions } from './gridDimensionsApi';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight' | 'headerFilterHeight'>;
+type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight' | 'columnGroupHeaderHeight' | 'headerFilterHeight'>;
 export type GridDimensionsState = GridDimensions;
 export declare const dimensionsStateInitializer: GridStateInitializer<RootProps>;
 export declare function useGridDimensions(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: RootProps): void;

package/hooks/features/dimensions/useGridDimensions.js

@@ -29,6 +29,7 @@ const EMPTY_DIMENSIONS = {
   hasScrollY: false,
   scrollbarSize: 0,
   headerHeight: 0,
+  groupHeaderHeight: 0,
   headerFilterHeight: 0,
   rowWidth: 0,
   rowHeight: 0,
@@ -55,6 +56,7 @@ export function useGridDimensions(apiRef, props) {
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const groupHeaderHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const headerFilterHeight = Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor);
   const columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 6);
   const headersTotalHeight = getTotalHeaderHeight(apiRef, props);
@@ -175,6 +177,7 @@ export function useGridDimensions(apiRef, props) {
       hasScrollY,
       scrollbarSize,
       headerHeight,
+      groupHeaderHeight,
       headerFilterHeight,
       rowWidth,
       rowHeight,
@@ -191,7 +194,7 @@ export function useGridDimensions(apiRef, props) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
     }
     apiRef.current.updateRenderContext?.();
-  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
   const apiPublic = {
     resize,
     getRootDimensions

package/hooks/features/editing/useGridCellEditing.js

@@ -14,6 +14,7 @@ import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js
 import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridCellEditStartReasons, GridCellEditStopReasons } from "../../../models/params/gridEditCellParams.js";
+import { getDefaultCellValue } from "./utils.js";
 export const useGridCellEditing = (apiRef, props) => {
   const [cellModesModel, setCellModesModel] = React.useState({});
   const cellModesModelRef = React.useRef(cellModesModel);
@@ -67,7 +68,7 @@ export const useGridCellEditing = (apiRef, props) => {
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === GridCellModes.Edit) {
       // Wait until IME is settled for Asian languages like Japanese and Chinese
-      // TODO: `event.which` is deprecated but this is a temporary workaround
+      // TODO: to replace at one point. See https://github.com/mui/material-ui/pull/39713#discussion_r1381678957.
       if (event.which === 229) {
         return;
       }
@@ -249,24 +250,7 @@ export const useGridCellEditing = (apiRef, props) => {
     } = params;
     let newValue = apiRef.current.getCellValue(id, field);
     if (deleteValue) {
-      const fieldType = apiRef.current.getColumn(field).type;
-      switch (fieldType) {
-        case 'boolean':
-          newValue = false;
-          break;
-        case 'date':
-        case 'dateTime':
-        case 'number':
-          newValue = undefined;
-          break;
-        case 'singleSelect':
-          newValue = null;
-          break;
-        case 'string':
-        default:
-          newValue = '';
-          break;
-      }
+      newValue = getDefaultCellValue(apiRef.current.getColumn(field));
     } else if (initialValue) {
       newValue = initialValue;
     }

package/hooks/features/editing/useGridRowEditing.js

@@ -16,6 +16,7 @@ import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js
 import { deepClone } from "../../../utils/utils.js";
 import { GridRowEditStopReasons, GridRowEditStartReasons } from "../../../models/params/gridRowParams.js";
 import { GRID_ACTIONS_COLUMN_TYPE } from "../../../colDef/index.js";
+import { getDefaultCellValue } from "./utils.js";
 export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
@@ -109,7 +110,7 @@ export const useGridRowEditing = (apiRef, props) => {
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === GridRowModes.Edit) {
       // Wait until IME is settled for Asian languages like Japanese and Chinese
-      // TODO: `event.which` is deprecated but this is a temporary workaround
+      // TODO: to replace at one point. See https://github.com/mui/material-ui/pull/39713#discussion_r1381678957.
       if (event.which === 229) {
         return;
       }
@@ -319,7 +320,11 @@ export const useGridRowEditing = (apiRef, props) => {
       }
       let newValue = apiRef.current.getCellValue(id, field);
       if (fieldToFocus === field && (deleteValue || initialValue)) {
-        newValue = deleteValue ? '' : initialValue;
+        if (deleteValue) {
+          newValue = getDefaultCellValue(apiRef.current.getColumn(field));
+        } else if (initialValue) {
+          newValue = initialValue;
+        }
       }
       acc[field] = {
         value: newValue,

package/hooks/features/editing/utils.d.ts

@@ -0,0 +1,2 @@
+import { GridColDef } from '../../../models/colDef/gridColDef';
+export declare const getDefaultCellValue: (colDef: GridColDef) => false | "" | null | undefined;