@mui/x-data-grid-pro 6.5.0 → 6.6.0

package/CHANGELOG.md

@@ -3,6 +3,82 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.6.0
+
+_Jun 1, 2023_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 New date time picking UI on [`DesktopDateTimePicker`](https://mui.com/x/react-date-pickers/date-time-picker/)
+
+  <img src="https://user-images.githubusercontent.com/4941090/242533399-2b106390-8158-4aba-9ca4-b621c6310977.gif" width="628" />
+
+- 🚀 Performance improvements
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Dutch (nl-NL) and French (fr-FR) locales on the data grid
+- 🌍 Add Vietnamese (vi-VN) locale on the pickers
+
+### `@mui/x-data-grid@v6.6.0` / `@mui/x-data-grid-pro@v6.6.0` / `@mui/x-data-grid-premium@v6.6.0`
+
+#### Changes
+
+- [DataGrid] Support data attributes (#8845) @romgrk
+- [DataGrid] Avoid allocations in `hydrateRowsMeta` (#9121) @romgrk
+- [DataGrid] Fix filter input select accessibility (#9018) @Jul13nT
+- [DataGrid] Fix accessibility issues in panels and toolbar buttons (#8862) @romgrk
+- [DataGrid] Fix `onCellEditStop` not invoked (#8857) @romgrk
+- [DataGridPro] Fix auto-scroll when reordering columns (#8856) @m4theushw
+- [DataGridPro] Fix row ID type casting in detail panels lookup (#8976) @minchaej
+- [DataGridPro] Emit `columnWidthChange` event on `touchEnd` of column resize (#8669) @MBilalShafi
+- [DataGridPro] Do not apply filters on `rowExpansionChange` (#8671) @cherniavskii
+- [DataGridPro] Prevent click event on sorting after a resize (#9117) @romgrk
+- [DataGridPremium] Improve Excel export interface (#9128) @TiagoPortfolio
+- [l10n] Improve Dutch (nl-NL) locale (#9043) @thedutchruben
+- [l10n] Improve French (fr-FR) locale (#9109) @Jul13nT
+
+### `@mui/x-date-pickers@v6.6.0` / `@mui/x-date-pickers-pro@v6.6.0`
+
+#### Changes
+
+- [fields] Allow to explicitly define the reference value and improve its default value (#9019) @flaviendelangle
+- [l10n] Add Vietnamese (vi-VN) locale (#9099) @nhannt201
+- [pickers] Add `DigitalClock` to `DesktopDateTimePicker` (#8946) @LukasTy
+- [pickers] Add support for timezones on the adapters (#9068) @flaviendelangle
+- [pickers] Fix `MonthCalendar` and `YearCalendar` disabled validation (#9149) @LukasTy
+- [pickers] Fix bug when fields have a unique section (#9110) @alexfauquette
+- [pickers] Fix focus jumping on Safari (#9072) @LukasTy
+- [pickers] Use the locale start of the week in `getWeekArray` (#9176) @flaviendelangle
+
+### Docs
+
+- [docs] Add single input range picker demo (#9159) @LukasTy
+- [docs] Align `DateCalendar` demo views with labels (#9152) @LukasTy
+- [docs] Clarify the peer dependency with React (#9067) @oliviertassinari
+- [docs] Fix Norwegian locale typo (#9168) @LukasTy
+- [docs] Fix column menu item demo (#9071) @MBilalShafi
+- [docs] Improve localization table progress bars (#9033) @noraleonte
+- [docs] Smooth performance animation (#8986) @oliviertassinari
+- [docs] Use responsive time and date time pickers and the views sections (#9127) @flaviendelangle
+- [docs] Reduce layout shift in grid demo (#9132) @oliviertassinari
+- [docs] Fix tree data children lazy-loading demo (#8840) @yaredtsy
+- [docs] Improve filtering docs discoverability (#9074) @MBilalShafi
+
+### Core
+
+- [core] Allow string literals as keys in `localesText` (#9045) @MBilalShafi
+- [core] Fix `randomInt` producing values exceeding `max` value (#9086) @cherniavskii
+- [core] Fix flaky test on `dateWithTimezone` adapter test (#9129) @flaviendelangle
+- [core] Lock `@types/node` on v18 (#9107) @LukasTy
+- [core] Remove `cross-fetch` dependency (#9108) @LukasTy
+- [core] Remove `createDetectElementResize()` replaced with `ResizeObserver` (#9015) @oliviertassinari
+- [core] Upgrade monorepo (#9027) @m4theushw
+- [core] Upgrade monorepo (#9106) @LukasTy
+- [charts] Fix proptypes (#9125) @LukasTy
+- [charts] Generate the charts proptypes (#9010) @alexfauquette
+- [charts] Manage series stacking (#8888) @alexfauquette
+- [license] List side effects in the license package (#9092) @cherniavskii
+
 ## v6.5.0
 
 _May 19, 2023_
@@ -102,7 +178,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 
 ### Docs
 
-- [docs] Fix date pickers typo in the docs  (#8939) @richbustos
+- [docs] Fix date pickers typo in the docs (#8939) @richbustos
 - [docs] Fix master detail demo (#8894) @m4theushw
 - [docs] Fix typo in clipboard docs (#8971) @MBilalShafi
 - [docs] Reduce list of dependencies in Codesandbox/Stackblitz demos (#8535) @cherniavskii
@@ -4440,7 +4516,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 - 👔 **Excel export**. You can find this new Premium feature at: https://mui.com/x/react-data-grid/export/#excel-export.
 
-- 🔎 **Quick filtering**. You can now add a quick filtering search bar to your grid. To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar. More information about how to customize the filtering logic is in the [documentation](https://mui.com/x/react-data-grid/filtering/#quick-filter).
+- 🔎 **Quick filtering**. You can now add a quick filtering search bar to your grid. To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar. More information about how to customize the filtering logic is in the [documentation](https://mui.com/x/react-data-grid/filtering/quick-filter/).
 
   <img src="https://user-images.githubusercontent.com/13808724/167700105-5a5acc7c-5463-4871-8514-3d09e2f365ae.png" width="724">
 

package/DataGridPro/DataGridPro.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license-pro';
@@ -19,11 +20,12 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, {
+    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
       sx: props.sx,
-      ref: ref,
+      ref: ref
+    }, props.forwardedProps, {
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         VirtualScrollerComponent: DataGridProVirtualScroller,
         ColumnHeadersProps: {
@@ -34,7 +36,7 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
           releaseInfo: releaseInfo
         })
       }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
-    })
+    }))
   });
 });
 export const DataGridPro = /*#__PURE__*/React.memo(DataGridProRaw);
@@ -255,6 +257,11 @@ DataGridProRaw.propTypes = {
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
+  /**
+   * Forwarded props for the grid root element.
+   * @ignore - do not document.
+   */
+  forwardedProps: PropTypes.object,
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].

package/README.md

@@ -21,8 +21,8 @@ This component has the following peer dependencies that you will need to install
 "peerDependencies": {
   "@mui/material": "^5.4.1",
   "@mui/system": "^5.4.1",
-  "react": "^17.0.2 || ^18.0.0",
-  "react-dom": "^17.0.2 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0"
 },
 ```
 

package/components/DataGridProVirtualScroller.js

@@ -179,8 +179,17 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       bottomPinnedRowsRenderZoneRef.current.style.transform = `translate3d(${left}px, 0px, 0px)`;
     }
   }, []);
+
+  // Create a lookup for faster check if the row is expanded
+  const expandedRowIdsLookup = React.useMemo(() => {
+    const lookup = new Set();
+    expandedRowIds.forEach(id => {
+      lookup.add(id);
+    });
+    return lookup;
+  }, [expandedRowIds]);
   const getRowProps = React.useCallback(id => {
-    if (!expandedRowIds.includes(id)) {
+    if (!expandedRowIdsLookup.has(id)) {
       return null;
     }
     const height = detailPanelsHeights[id];
@@ -189,7 +198,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
         marginBottom: height
       }
     };
-  }, [detailPanelsHeights, expandedRowIds]);
+  }, [detailPanelsHeights, expandedRowIdsLookup]);
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields, theme.direction === 'rtl');
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
@@ -229,15 +238,6 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-
-  // Create a lookup for faster check if the row is expanded
-  const expandedRowIdsLookup = React.useMemo(() => {
-    const lookup = {};
-    expandedRowIds.forEach(id => {
-      lookup[id] = true;
-    });
-    return lookup;
-  }, [expandedRowIds]);
   const getDetailPanel = rowId => {
     const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
     const content = detailPanelsContent[rowId];
@@ -278,7 +278,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       if (rootProps.getDetailPanelContent == null) {
         return;
       }
-      if (!expandedRowIdsLookup[rowId]) {
+      if (!expandedRowIdsLookup.has(rowId)) {
         return;
       }
       const detailPanel = getDetailPanel(rowId);

package/components/GridColumnHeaders.js

@@ -10,9 +10,11 @@ import { GridBaseColumnHeaders, GridColumnHeadersInner } from '@mui/x-data-grid/
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridPinnedPosition } from '../hooks/features/columnPinning';
-import { filterColumns } from './DataGridProVirtualScroller';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+import { filterColumns } from './DataGridProVirtualScroller';
+import { GridScrollArea } from './GridScrollArea';
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     leftPinnedColumns,
@@ -187,7 +189,9 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
         minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       })]
-    })), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
+    })), /*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, innerProps, {
       children: [getColumnGroupHeaders({
@@ -203,7 +207,9 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
         minFirstColumn: leftPinnedColumns.length,
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })]
-    })), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
+    })), /*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "right"
+    }), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       ownerState: _extends({}, ownerState, {
         side: GridPinnedPosition.right,
         showCellVerticalBorder: rootProps.showCellVerticalBorder

package/components/GridColumnMenuPinningItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '@mui/x-data-grid';
-declare function GridColumnMenuPinningItem(props: GridColumnMenuItemProps): JSX.Element | null;
+declare function GridColumnMenuPinningItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
 declare namespace GridColumnMenuPinningItem {
     var propTypes: any;
 }

package/components/GridDetailPanel.d.ts

@@ -15,5 +15,5 @@ interface GridDetailPanelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     rowId: GridRowId;
 }
-declare function GridDetailPanel(props: GridDetailPanelProps): JSX.Element;
+declare function GridDetailPanel(props: GridDetailPanelProps): React.JSX.Element;
 export { GridDetailPanel };

package/components/GridDetailPanelToggleCell.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridRenderCellParams } from '@mui/x-data-grid';
-declare function GridDetailPanelToggleCell(props: GridRenderCellParams): JSX.Element;
+declare function GridDetailPanelToggleCell(props: GridRenderCellParams): React.JSX.Element;
 declare namespace GridDetailPanelToggleCell {
     var propTypes: any;
 }

package/components/GridRowReorderCell.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridRenderCellParams } from '@mui/x-data-grid';
-declare function GridRowReorderCell(params: GridRenderCellParams): JSX.Element | null;
+declare function GridRowReorderCell(params: GridRenderCellParams): React.JSX.Element | null;
 export { GridRowReorderCell };
-export declare const renderRowReorderCell: (params: GridRenderCellParams) => JSX.Element | null;
+export declare const renderRowReorderCell: (params: GridRenderCellParams) => React.JSX.Element | null;

package/components/GridScrollArea.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface ScrollAreaProps {
+    scrollDirection: 'left' | 'right';
+}
+declare function GridScrollAreaRaw(props: ScrollAreaProps): React.JSX.Element | null;
+declare namespace GridScrollAreaRaw {
+    var propTypes: any;
+}
+declare const GridScrollArea: React.MemoExoticComponent<typeof GridScrollAreaRaw>;
+export { GridScrollArea };

package/components/GridScrollArea.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { styled } from '@mui/system';
+import { getTotalHeaderHeight } from '@mui/x-data-grid/internals';
+import { getDataGridUtilityClass, gridClasses, gridDensityFactorSelector, useGridApiContext, useGridApiEventHandler, useGridSelector, gridColumnsTotalWidthSelector } from '@mui/x-data-grid';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const CLIFF = 1;
+const SLOP = 1.5;
+const useUtilityClasses = ownerState => {
+  const {
+    scrollDirection,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['scrollArea', `scrollArea--${scrollDirection}`]
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridScrollAreaRawRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ScrollArea',
+  overridesResolver: (props, styles) => [{
+    [`&.${gridClasses['scrollArea--left']}`]: styles['scrollArea--left']
+  }, {
+    [`&.${gridClasses['scrollArea--right']}`]: styles['scrollArea--right']
+  }, styles.scrollArea]
+})(() => ({
+  position: 'absolute',
+  top: 0,
+  zIndex: 101,
+  width: 20,
+  bottom: 0,
+  [`&.${gridClasses['scrollArea--left']}`]: {
+    left: 0
+  },
+  [`&.${gridClasses['scrollArea--right']}`]: {
+    right: 0
+  }
+}));
+function GridScrollAreaRaw(props) {
+  const {
+    scrollDirection
+  } = props;
+  const rootRef = React.useRef(null);
+  const apiRef = useGridApiContext();
+  const timeout = React.useRef();
+  const [dragging, setDragging] = React.useState(false);
+  const [canScrollMore, setCanScrollMore] = React.useState(true);
+  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const scrollPosition = React.useRef({
+    left: 0,
+    top: 0
+  });
+  const rootProps = useGridRootProps();
+  const ownerState = _extends({}, rootProps, {
+    scrollDirection
+  });
+  const classes = useUtilityClasses(ownerState);
+  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight);
+  const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
+  const handleScrolling = React.useCallback(newScrollPosition => {
+    scrollPosition.current = newScrollPosition;
+    const dimensions = apiRef.current.getRootDimensions();
+    setCanScrollMore(() => {
+      if (scrollDirection === 'left') {
+        // Only render if the user has not reached yet the start of the list
+        return scrollPosition.current.left > 0;
+      }
+      if (scrollDirection === 'right') {
+        // Only render if the user has not reached yet the end of the list
+        const maxScrollLeft = columnsTotalWidth - dimensions.viewportInnerSize.width;
+        return scrollPosition.current.left < maxScrollLeft;
+      }
+      return false;
+    });
+  }, [apiRef, columnsTotalWidth, scrollDirection]);
+  const handleDragOver = React.useCallback(event => {
+    let offset;
+
+    // Prevents showing the forbidden cursor
+    event.preventDefault();
+    if (scrollDirection === 'left') {
+      offset = event.clientX - rootRef.current.getBoundingClientRect().right;
+    } else if (scrollDirection === 'right') {
+      offset = Math.max(1, event.clientX - rootRef.current.getBoundingClientRect().left);
+    } else {
+      throw new Error('MUI: Wrong drag direction');
+    }
+    offset = (offset - CLIFF) * SLOP + CLIFF;
+    clearTimeout(timeout.current);
+    // Avoid freeze and inertia.
+    timeout.current = setTimeout(() => {
+      apiRef.current.scroll({
+        left: scrollPosition.current.left + offset,
+        top: scrollPosition.current.top
+      });
+    });
+  }, [scrollDirection, apiRef]);
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timeout.current);
+    };
+  }, []);
+  const handleColumnHeaderDragStart = useEventCallback(() => {
+    setDragging(true);
+  });
+  const handleColumnHeaderDragEnd = useEventCallback(() => {
+    setDragging(false);
+  });
+  useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScrolling);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnHeaderDragStart);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnHeaderDragEnd);
+  if (!dragging || !canScrollMore) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
+    ref: rootRef,
+    className: clsx(classes.root),
+    ownerState: ownerState,
+    onDragOver: handleDragOver,
+    style: {
+      height: headerHeight,
+      top: totalHeaderHeight - headerHeight
+    }
+  });
+}
+process.env.NODE_ENV !== "production" ? GridScrollAreaRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  scrollDirection: PropTypes.oneOf(['left', 'right']).isRequired
+} : void 0;
+const GridScrollArea = /*#__PURE__*/React.memo(GridScrollAreaRaw);
+export { GridScrollArea };

package/components/GridTreeDataGroupingCell.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridRenderCellParams, GridGroupNode } from '@mui/x-data-grid';
 interface GridTreeDataGroupingCellProps extends GridRenderCellParams<any, any, any, GridGroupNode> {
     hideDescendantCount?: boolean;
@@ -8,7 +8,7 @@ interface GridTreeDataGroupingCellProps extends GridRenderCellParams<any, any, a
      */
     offsetMultiplier?: number;
 }
-declare function GridTreeDataGroupingCell(props: GridTreeDataGroupingCellProps): JSX.Element;
+declare function GridTreeDataGroupingCell(props: GridTreeDataGroupingCellProps): React.JSX.Element;
 declare namespace GridTreeDataGroupingCell {
     var propTypes: any;
 }

package/components/headerFiltering/GridHeaderFilterAdornment.d.ts

@@ -7,7 +7,7 @@ declare function GridHeaderFilterAdornment(props: {
     applyFilterChanges: (item: GridFilterItem) => void;
     headerFilterMenuRef: React.MutableRefObject<HTMLButtonElement | null>;
     buttonRef: React.Ref<HTMLButtonElement>;
-}): JSX.Element | null;
+}): React.JSX.Element | null;
 declare namespace GridHeaderFilterAdornment {
     var propTypes: any;
 }

package/components/headerFiltering/GridHeaderFilterClearButton.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 interface GridHeaderFilterClearIconProps {
     onClick: () => void;
 }
-declare function GridHeaderFilterClearButton({ onClick }: GridHeaderFilterClearIconProps): JSX.Element;
+declare function GridHeaderFilterClearButton({ onClick }: GridHeaderFilterClearIconProps): React.JSX.Element;
 export { GridHeaderFilterClearButton };

package/components/headerFiltering/GridHeaderFilterMenu.d.ts

@@ -10,5 +10,5 @@ interface GridHeaderFilterMenuProps {
     labelledBy: string;
     targetRef: React.MutableRefObject<HTMLElement | null>;
 }
-declare function GridHeaderFilterMenu({ open, field, targetRef, applyFilterChanges, operators, item, id, labelledBy, }: GridHeaderFilterMenuProps): JSX.Element | null;
+declare function GridHeaderFilterMenu({ open, field, targetRef, applyFilterChanges, operators, item, id, labelledBy, }: GridHeaderFilterMenuProps): React.JSX.Element | null;
 export { GridHeaderFilterMenu };

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { UseGridColumnHeadersProps, GetHeadersParams } from '@mui/x-data-grid/internals';
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
-    getColumnFilters: (params?: GetHeadersParams, other?: {}) => JSX.Element | null;
+    getColumnFilters: (params?: GetHeadersParams, other?: {}) => React.JSX.Element | null;
     getRootProps: (other?: {} | undefined) => {
         style: {
             minHeight: number;
@@ -10,7 +10,7 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
         };
     };
     renderContext: import("@mui/x-data-grid").GridRenderContext | null;
-    getColumnHeaders: (params?: GetHeadersParams | undefined, other?: {} | undefined) => JSX.Element | null;
+    getColumnHeaders: (params?: GetHeadersParams | undefined, other?: {} | undefined) => React.JSX.Element | null;
     getColumnGroupHeaders: (params?: GetHeadersParams | undefined) => JSX.Element[] | null;
     isDragging: boolean;
     getInnerProps: () => {

package/hooks/features/columnResize/useGridColumnResize.js

@@ -130,7 +130,7 @@ export const useGridColumnResize = (apiRef, props) => {
       div.style.maxWidth = finalWidth;
     });
   };
-  const handleResizeMouseUp = useEventCallback(nativeEvent => {
+  const finishResize = nativeEvent => {
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     stopListening();
     apiRef.current.updateColumns([colDefRef.current]);
@@ -147,7 +147,8 @@ export const useGridColumnResize = (apiRef, props) => {
       }
     });
     logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
-  });
+  };
+  const handleResizeMouseUp = useEventCallback(finishResize);
   const handleResizeMouseMove = useEventCallback(nativeEvent => {
     // Cancel move in case some other element consumed a mouseup event and it was not fired.
     if (nativeEvent.buttons === 0) {
@@ -198,21 +199,16 @@ export const useGridColumnResize = (apiRef, props) => {
     initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
+
+    // Fixes https://github.com/mui/mui-x/issues/4777
+    colElementRef.current.style.pointerEvents = 'none';
   });
   const handleTouchEnd = useEventCallback(nativeEvent => {
     const finger = trackFinger(nativeEvent, touchId.current);
     if (!finger) {
       return;
     }
-
-    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    stopListening();
-    apiRef.current.updateColumns([colDefRef.current]);
-    clearTimeout(stopResizeEventTimeout.current);
-    stopResizeEventTimeout.current = setTimeout(() => {
-      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
-    });
-    logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
+    finishResize(nativeEvent);
   });
   const handleTouchMove = useEventCallback(nativeEvent => {
     const finger = trackFinger(nativeEvent, touchId.current);
@@ -275,7 +271,10 @@ export const useGridColumnResize = (apiRef, props) => {
     doc.removeEventListener('mouseup', handleResizeMouseUp);
     doc.removeEventListener('touchmove', handleTouchMove);
     doc.removeEventListener('touchend', handleTouchEnd);
-  }, [apiRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
+    if (colElementRef.current) {
+      colElementRef.current.style.pointerEvents = 'unset';
+    }
+  }, [apiRef, colElementRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
   const handleResizeStart = React.useCallback(({
     field
   }) => {

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -169,15 +169,13 @@ export const useGridDetailPanel = (apiRef, props) => {
   const addDetailHeight = React.useCallback((initialValue, row) => {
     var _heightCache$row$id;
     if (!expandedRowIds || expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
-      return _extends({}, initialValue, {
-        detail: 0
-      });
+      initialValue.detail = 0;
+      return initialValue;
     }
     updateCachesIfNeeded();
     const heightCache = gridDetailPanelExpandedRowsHeightCacheSelector(apiRef);
-    return _extends({}, initialValue, {
-      detail: (_heightCache$row$id = heightCache[row.id]) != null ? _heightCache$row$id : 0 // Fallback to zero because the cache might not be ready yet (e.g. page was changed)
-    });
+    initialValue.detail = (_heightCache$row$id = heightCache[row.id]) != null ? _heightCache$row$id : 0; // Fallback to zero because the cache might not be ready yet (e.g. page was changed)
+    return initialValue;
   }, [apiRef, expandedRowIds, updateCachesIfNeeded]);
   useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
   const isFirstRender = React.useRef(true);

package/hooks/features/treeData/gridTreeDataUtils.js

@@ -12,7 +12,6 @@ export const filterRowTreeFromTreeData = params => {
     disableChildrenFiltering,
     isRowMatchingFilters
   } = params;
-  const visibleRowsLookup = {};
   const filteredRowsLookup = {};
   const filteredDescendantCountLookup = {};
   const filterTreeNode = (node, isParentMatchingFilters, areAncestorsExpanded) => {
@@ -56,13 +55,7 @@ export const filterRowTreeFromTreeData = params => {
           break;
         }
     }
-    visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
     filteredRowsLookup[node.id] = shouldPassFilters;
-
-    // TODO: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
-    if (node.type === 'group' && node.footerId != null) {
-      visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
-    }
     if (!shouldPassFilters) {
       return 0;
     }
@@ -80,7 +73,6 @@ export const filterRowTreeFromTreeData = params => {
     }
   }
   return {
-    visibleRowsLookup,
     filteredRowsLookup,
     filteredDescendantCountLookup
   };

package/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -10,6 +10,7 @@ import { GridTreeDataGroupingCell } from '../../../components';
 import { createRowTree } from '../../../utils/tree/createRowTree';
 import { sortRowTree } from '../../../utils/tree/sortRowTree';
 import { updateRowTree } from '../../../utils/tree/updateRowTree';
+import { getVisibleRowsLookup } from '../../../utils/tree/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
   const setStrategyAvailability = React.useCallback(() => {
@@ -122,6 +123,7 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
   useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTreeForTreeData);
   useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'filtering', filterRows);
   useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * 1ST RENDER

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.5.0
+ * @mui/x-data-grid-pro v6.6.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internals/index.d.ts

@@ -23,5 +23,5 @@ export type { GridExperimentalProFeatures, DataGridProPropsWithoutDefaultValue,
 export { createRowTree } from '../utils/tree/createRowTree';
 export { updateRowTree } from '../utils/tree/updateRowTree';
 export { sortRowTree } from '../utils/tree/sortRowTree';
-export { insertNodeInTree, removeNodeFromTree } from '../utils/tree/utils';
+export { insertNodeInTree, removeNodeFromTree, getVisibleRowsLookup } from '../utils/tree/utils';
 export type { RowTreeBuilderGroupingCriterion } from '../utils/tree/models';

package/internals/index.js

@@ -25,4 +25,4 @@ export { useGridLazyLoaderPreProcessors } from '../hooks/features/lazyLoader/use
 export { createRowTree } from '../utils/tree/createRowTree';
 export { updateRowTree } from '../utils/tree/updateRowTree';
 export { sortRowTree } from '../utils/tree/sortRowTree';
-export { insertNodeInTree, removeNodeFromTree } from '../utils/tree/utils';
+export { insertNodeInTree, removeNodeFromTree, getVisibleRowsLookup } from '../utils/tree/utils';