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

package/CHANGELOG.md

@@ -3,6 +3,154 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.7.0
+
+_Jun 9, 2023_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Improve the default `format` prop value on the pickers.
+
+  Here are a few examples:
+
+  ```tsx
+  <TimePicker views={['hours', 'minutes', 'seconds']} ampm />
+  // Format before v6.7.0: `hh:mm aa`
+  // Format after v6.7.0: `hh:mm:ss aa`
+ 
+  <DatePicker views={['year']} />
+  // Format before v6.7.0: `MM/DD/YYYY`
+  // Format after v6.7.0: `YYYY`
+  
+  <DateTimePicker views={['day', 'hours', 'minutes']} ampm />
+  // Format before v6.7.0: `MM/DD/YYYY hh:mm aa`
+  // Format after v6.7.0: `DD hh:mm aa`
+  ```
+
+- 🌍 Add Romanian (ro-RO) locale on the pickers
+- 🌍 Improve German (de-DE) locale on the pickers
+- 🌍 Improve Czech (cs-CZ), German (de-DE) and Turkish (tr-TR) locales on the data grid
+- 🚀 Performance improvements
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.7.0` / `@mui/x-data-grid-pro@v6.7.0` / `@mui/x-data-grid-premium@v6.7.0`
+
+#### Changes
+
+- [DataGrid] Allow overflowing grid root element (#9179) @cherniavskii
+- [DataGrid] Fix module augmentation error when using `@mui/lab` (#9235) @cherniavskii
+- [DataGrid] Fix row with ids matching `Object` prototype (#9265) @romgrk
+- [DataGrid] Fix `sortModel` and `filterModel` resetting when columns change (#9239) @alexgonch
+- [DataGrid] Improve grouping performance for large datasets (#9200) @romgrk
+- [DataGrid] Increase threshold to trigger memory leak warning (#9263) @m4theushw
+- [DataGrid] Update data grid migration guide to include updated type (#9272) @MBilalShafi
+- [DataGridPro] Improve header filter menu visuals (#9181) @MBilalShafi
+- [DataGridPremium] Remove last line break on clipboard paste (#9163) @cherniavskii
+- [l10n] Improve Czech (cs-CZ) locale (#9266) @MartinSkarpa
+- [l10n] Improve German (de-DE) locale (#9259) @ximex
+- [l10n] Improve Turkish (tr-TR) locale (#9237) @MCErtan
+
+### `@mui/x-date-pickers@v6.7.0` / `@mui/x-date-pickers-pro@v6.7.0`
+
+#### Changes
+
+- [l10n] Add Romanian (ro-RO) locale (#9257) @ximex
+- [l10n] Improve German (de-DE) locale (#9258) @ximex
+- [pickers] Apply dynamic default format depending on views for all desktop and mobile pickers (#9126) @flaviendelangle
+- [pickers] Update `DateRangePickerDay` props JSDoc (#9191) @stevus
+
+### Docs
+
+- [docs] Fix missing props on the `GridFilterPanel` API page (#9180) @cherniavskii
+- [docs] Fix overview page typo (#9230) @LukasTy
+- [docs] Fix version redirect (#9273) @alexfauquette
+
+### Core
+
+- [core] Temporarily remove the Argos upload on the regression testing (#9267) @flaviendelangle
+- [charts] Add clip-path to avoid charts overflow (#9012) @alexfauquette
+- [charts] Add style customization on bar (#8935) @alexfauquette
+- [charts] Enforce axis `min`/`max` over the `nice()` method (#9189) @alexfauquette
+- [charts] Improve axis label and ticks label alignements (#9190) @alexfauquette
+- [charts] Simplify the switch between responsive and fix dimensions (#9151) @alexfauquette
+
+## 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 +250,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 +4588,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/GridHeaderFilterCell.d.ts

@@ -7,7 +7,6 @@ export interface GridHeaderFilterCellProps extends Pick<GridStateColDef, 'header
     sortIndex?: number;
     hasFocus?: boolean;
     tabIndex: 0 | -1;
-    headerFilterComponent?: React.ReactNode;
     filterOperators?: GridFilterOperator[];
     width: number;
     colDef: GridColDef;

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colIndex", "height", "hasFocus", "headerFilterComponent", "filterOperators", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon"];
+const _excluded = ["colIndex", "height", "hasFocus", "filterOperators", "width", "headerClassName", "colDef", "item", "headerFilterMenuRef", "InputComponentProps", "showClearIcon"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -8,7 +8,7 @@ import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeCl
 import { gridVisibleColumnFieldsSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
 import { useGridPrivateApiContext, unstable_gridHeaderFilteringEditFieldSelector, unstable_gridHeaderFilteringMenuSelector, isNavigationKey } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridHeaderFilterAdornment } from './GridHeaderFilterAdornment';
+import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
 import { GridHeaderFilterClearButton } from './GridHeaderFilterClearButton';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,13 +23,17 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+const dateSx = {
+  [`& input[value=""]:not(:focus)`]: {
+    color: 'transparent'
+  }
+};
 const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _filterOperators$find, _currentOperator$head, _colDef$headerName;
   const {
       colIndex,
       height,
       hasFocus,
-      headerFilterComponent,
       filterOperators,
       width,
       headerClassName,
@@ -61,6 +65,10 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const clearFilterItem = React.useCallback(() => {
     apiRef.current.deleteFilterItem(item);
   }, [apiRef, item]);
+  let headerFilterComponent;
+  if (colDef.renderHeaderFilter) {
+    headerFilterComponent = colDef.renderHeaderFilter(props);
+  }
   React.useLayoutEffect(() => {
     if (hasFocus && !isMenuOpen) {
       let focusableElement = cellRef.current.querySelector('[tabindex="0"]');
@@ -131,7 +139,8 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const mouseEventsHandlers = React.useMemo(() => ({
     onKeyDown: publish('headerFilterKeyDown', onKeyDown),
     onClick: publish('headerFilterClick'),
-    onMouseDown: publish('headerFilterMouseDown', onMouseDown)
+    onMouseDown: publish('headerFilterMouseDown', onMouseDown),
+    onBlur: publish('headerFilterBlur')
   }), [onMouseDown, onKeyDown, publish]);
   const ownerState = _extends({}, rootProps, {
     colDef
@@ -156,30 +165,35 @@ const GridHeaderFilterCell = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-colindex": colIndex + 1,
     "aria-label": headerFilterComponent == null ? (_colDef$headerName = colDef.headerName) != null ? _colDef$headerName : colDef.field : undefined
   }, other, mouseEventsHandlers, {
-    children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/_jsx(InputComponent, _extends({
-      apiRef: apiRef,
-      item: item,
-      inputRef: inputRef,
-      applyValue: applyFilterChanges,
-      onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
-      onBlur: () => apiRef.current.stopHeaderFilterEditMode(),
-      placeholder: apiRef.current.getLocaleText('columnMenuFilter'),
-      label: isFilterActive ? capitalize(label) : ' ',
-      isFilterActive: isFilterActive,
-      headerFilterMenu: /*#__PURE__*/_jsx(GridHeaderFilterAdornment, {
+    children: [headerFilterComponent, InputComponent && headerFilterComponent === undefined ? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(InputComponent, _extends({
+        apiRef: apiRef,
+        item: item,
+        inputRef: inputRef,
+        applyValue: applyFilterChanges,
+        onFocus: () => apiRef.current.startHeaderFilterEditMode(colDef.field),
+        onBlur: () => apiRef.current.stopHeaderFilterEditMode(),
+        label: capitalize(label),
+        placeholder: "",
+        isFilterActive: isFilterActive,
+        clearButton: showClearIcon && isApplied ? /*#__PURE__*/_jsx(GridHeaderFilterClearButton, {
+          onClick: clearFilterItem
+        }) : null,
+        disabled: isNoInputOperator,
+        tabIndex: -1,
+        InputLabelProps: null,
+        sx: colDef.type === 'date' || colDef.type === 'dateTime' ? dateSx : undefined
+      }, isNoInputOperator ? {
+        value: ''
+      } : {}, currentOperator == null ? void 0 : currentOperator.InputComponentProps, InputComponentProps)), /*#__PURE__*/_jsx(GridHeaderFilterMenuContainer, {
         operators: filterOperators,
         item: item,
         field: colDef.field,
         applyFilterChanges: applyFilterChanges,
         headerFilterMenuRef: headerFilterMenuRef,
         buttonRef: buttonRef
-      }),
-      clearButton: showClearIcon && isApplied ? /*#__PURE__*/_jsx(GridHeaderFilterClearButton, {
-        onClick: clearFilterItem
-      }) : null,
-      disabled: isNoInputOperator,
-      tabIndex: -1
-    }, currentOperator == null ? void 0 : currentOperator.InputComponentProps, InputComponentProps)) : null]
+      })]
+    }) : null]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
@@ -204,7 +218,6 @@ process.env.NODE_ENV !== "production" ? GridHeaderFilterCell.propTypes = {
    * Class name that will be added in the column header cell.
    */
   headerClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  headerFilterComponent: PropTypes.node,
   headerFilterMenuRef: PropTypes.shape({
     current: PropTypes.object
   }).isRequired,

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 };