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

package/CHANGELOG.md

@@ -3,6 +3,138 @@
 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_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Introduce filtering on column headers for `DataGridPro` and `DataGridPremium`:
+
+  https://github.com/mui/mui-x/assets/12609561/c4c2bfec-59cf-4cab-932d-dc1983081de9
+
+  See [the documentation](https://mui.com/x/react-data-grid/filtering/#header-filters) for more information
+
+- 🌍 Improve Hebrew (he-IL) and Czech (cs-CZ) locales
+- 📝 Support for editing on pinned rows
+- 🚀 Performance improvements
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@6.5.0` / `@mui/x-data-grid-pro@6.5.0` / `@mui/x-data-grid-premium@6.5.0`
+
+#### Changes
+
+- [DataGrid] Fix grid size calculation when `.MuiDataGrid-main` has border (#8882) @cherniavskii
+- [DataGridPro] Filtering on Column Header (#7760) @MBilalShafi
+- [DataGridPro] Improve `treeData` and `rowGrouping` performance (#8990) @MBilalShafi
+- [DataGridPro] Support pinned rows editing (#8921) @cherniavskii
+- [l10n] Improve Hebrew (he-IL) locale (#8943) @Itzik-Tech
+- [l10n] Improve Czech (cs-CZ) locale (#8829) @harastaivan
+- [l10n] Improve Czech (cs-CZ) locale (#8956) @davidzemancz
+
+### `@mui/x-date-pickers@6.5.0` / `@mui/x-date-pickers-pro@6.5.0`
+
+#### Changes
+
+- [fields] Select the first section instead of last when clicking right of content (#9005) @noraleonte
+- [fields] Refactor prop drilling in fields (#8660) @flaviendelangle
+- [pickers] Allow to render the months before `currentMonth` instead of the one after (#8592) @flaviendelangle
+- [pickers] Fix view management when `openTo` or `views` is modified (#8997) @alexfauquette
+- [l10n] Improve Czech (cs-CZ) locale (#8829) @harastaivan
+
+### Docs
+
+- [docs] Clarify what Controlled / Uncontrolled means (#8926) @flaviendelangle
+- [docs] Fix docs using wrong service worker (#9030) @cherniavskii
+- [docs] Remove prop-types from JS demos (#9008) @flaviendelangle
+
+### Core
+
+- [core] Add assertion about checkbox rerenders (#8974) @oliviertassinari
+- [core] Allow selecting a section by type in field tests (#9009) @flaviendelangle
+- [core] Fix `yarn.lock` (#8988) @flaviendelangle
+- [core] Fix flacky adapter test (#8995) @flaviendelangle
+- [charts] Clean the axis rendering (#8948) @alexfauquette
+- [DataGrid] Memoize root props for better performance (#8942) @romgrk
+- [test] Skip flaky unit tests in JSDOM (#8994) @cherniavskii
+
 ## v6.4.0
 
 _May 12, 2023_
@@ -46,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
@@ -4384,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]].
@@ -827,6 +834,11 @@ DataGridProRaw.propTypes = {
    * @default false
    */
   treeData: PropTypes.bool,
+  /**
+   * If `true`, enables the data grid filtering on header feature.
+   * @default false
+   */
+  unstable_headerFilters: PropTypes.bool,
   /**
    * If `true`, the grid will not use `valueFormatter` when exporting to CSV or copying to clipboard.
    * If an object is provided, you can choose to ignore the `valueFormatter` for CSV export or clipboard export.

package/DataGridPro/useDataGridProComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
@@ -35,6 +35,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
+  useGridInitializeState(headerFilteringStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
@@ -53,6 +54,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
+  useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);

package/DataGridPro/useDataGridProProps.js

@@ -1,10 +1,8 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["components", "componentsProps"];
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
-import { computeSlots, uncapitalizeObjectKeys } from '@mui/x-data-grid/internals';
+import { computeSlots, uncapitalizeObjectKeys, useProps } from '@mui/x-data-grid/internals';
 import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '../constants/dataGridProDefaultSlotsComponents';
 
 /**
@@ -20,19 +18,15 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   disableChildrenSorting: false,
   rowReordering: false,
   rowsLoadingMode: 'client',
-  getDetailPanelHeight: () => 500
+  getDetailPanelHeight: () => 500,
+  unstable_headerFilters: false
 });
 const defaultSlots = uncapitalizeObjectKeys(DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS);
 export const useDataGridProProps = inProps => {
-  const _useThemeProps = useThemeProps({
-      props: inProps,
-      name: 'MuiDataGrid'
-    }),
-    {
-      components,
-      componentsProps
-    } = _useThemeProps,
-    themedProps = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
+  const [components, componentsProps, themedProps] = useProps(useThemeProps({
+    props: inProps,
+    name: 'MuiDataGrid'
+  }));
   const localeText = React.useMemo(() => _extends({}, GRID_DEFAULT_LOCALE_TEXT, themedProps.localeText), [themedProps.localeText]);
   const slots = React.useMemo(() => computeSlots({
     defaultSlots,

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

@@ -6,12 +6,15 @@ import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { styled, alpha, useTheme } from '@mui/material/styles';
 import { getDataGridUtilityClass, gridClasses, useGridApiEventHandler, GridColumnHeaderSeparatorSides } from '@mui/x-data-grid';
-import { GridBaseColumnHeaders, GridColumnHeadersInner, useGridColumnHeaders } from '@mui/x-data-grid/internals';
+import { GridBaseColumnHeaders, GridColumnHeadersInner } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridPinnedPosition } from '../hooks/features/columnPinning';
+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,
@@ -122,6 +125,7 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     getRootProps,
     getInnerProps,
     getColumnHeaders,
+    getColumnFilters,
     getColumnGroupHeaders
   } = useGridColumnHeaders({
     innerRef,
@@ -180,8 +184,14 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
         maxLastColumn: leftRenderContext.lastColumnIndex
       }, {
         disableReorder: true
+      }), getColumnFilters({
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
       })]
-    })), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
+    })), /*#__PURE__*/_jsx(GridScrollArea, {
+      scrollDirection: "left"
+    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, innerProps, {
       children: [getColumnGroupHeaders({
@@ -192,8 +202,14 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
         renderContext,
         minFirstColumn: leftPinnedColumns.length,
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      }), getColumnFilters({
+        renderContext,
+        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
@@ -214,6 +230,10 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
       }, {
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
+      }), getColumnFilters({
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
       })]
     }))]
   }));

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/GridDetailPanel.js

@@ -4,7 +4,7 @@ const _excluded = ["rowId", "height", "style"];
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
-import { useGridRootProps } from '@mui/x-data-grid';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 const DetailPanel = styled(Box, {

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { GridFilterItem, GridFilterOperator, GridColDef } from '@mui/x-data-grid';
+declare function GridHeaderFilterAdornment(props: {
+    operators: GridFilterOperator<any, any, any>[];
+    field: GridColDef['field'];
+    item: GridFilterItem;
+    applyFilterChanges: (item: GridFilterItem) => void;
+    headerFilterMenuRef: React.MutableRefObject<HTMLButtonElement | null>;
+    buttonRef: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element | null;
+declare namespace GridHeaderFilterAdornment {
+    var propTypes: any;
+}
+export { GridHeaderFilterAdornment };