@mui/x-data-grid 7.2.0 → 7.3.1

package/CHANGELOG.md

@@ -3,6 +3,158 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.3.1
+
+_Apr 26, 2024_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Scatter Charts get a [z-axis to allow coloring data points independently from their coordinates](https://mui.com/x/react-charts/scatter/#color-scale)
+- 🌍 Improve Catalan (ca-ES) and Spanish (es-ES) locales on the Date and Time Pickers
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.3.1`
+
+- [DataGrid] Fix date filtering for negative timezone offsets (#12836) @cherniavskii
+- [DataGrid] Fix flex column width when used with pinned columns (#12849) @romgrk
+- [DataGrid] Fix group header resize (#12863) @arminmeh
+- [DataGrid] Pass slot props to `columnHeaders` slot (#12768) @cherniavskii
+
+#### `@mui/x-data-grid-pro@7.3.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.3.1`.
+
+#### `@mui/x-data-grid-premium@7.3.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.3.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.3.1`
+
+- [l10n] Improve Catalan (ca-ES) locale (#12856) @soler1212
+- [l10n] Improve Spanish (es-ES) locale (#12858) @soler1212
+
+#### `@mui/x-date-pickers-pro@7.3.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.3.1`.
+
+### Charts
+
+#### `@mui/x-charts@7.3.1`
+
+- [charts] Add documentation on border radius alternative for `BarCharts` (#12859) @JCQuintas
+- [charts] Add z-axis to colorize scatter charts (#12738) @alexfauquette
+- [charts] Fix left/bottomAxis not picking up default axis id (#12894) @JCQuintas
+- [charts] Improve default tooltip content (#12257) @oliviertassinari
+- [charts] Round y values for bar chart (#12846) @alexfauquette
+
+### Tree View
+
+#### `@mui/x-tree-view@7.3.1`
+
+- [TreeView] Remove un-needed `aria-activedescendant` attribute (#12867) @flaviendelangle
+- [TreeView] Rework the selection internals (#12703) @flaviendelangle
+- [TreeView] Use the order in which the items are displayed for `type-ahead` (#12827) @flaviendelangle
+
+### Docs
+
+- [docs] Add demo for styling charts with `sx` props (#12791) @derek-0000
+- [docs] Cover webpack 4 support in migration guide (#12710) @cherniavskii
+- [docs] Document interfaces for charts (#12656) @alexfauquette
+- [docs] Fix Vale regression (#12862) @oliviertassinari
+- [docs] Improve Data Grid migration guide (#12879) @MBilalShafi
+- [docs] Update Column features availability (#12865) @DanailH
+
+### Core
+
+- [core] Fix `l10n` GH workflow (#12895) @LukasTy
+- [core] Match Base UI and Toolpad @oliviertassinari
+- [core] Remove redundant `setupFiles` entries in `package.json` (#12899) @LukasTy
+- [core] Use `describeTreeView` for focus tests (#12698) @flaviendelangle
+- [core] Use `describeTreeView` for type-ahead tests (#12811) @flaviendelangle
+- [code-infra] Change package manager to `pnpm` (#11875) @LukasTy
+- [code-infra] Closer sync with eslint config of codebase (#12864) @oliviertassinari
+- [support-infra] Add release announcement to GitHub workflows (#11867) (#12843) @michelengelen
+
+## 7.3.0
+
+_Apr 18, 2024_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📄 Support [unknown and estimated row count in server-side pagination](https://mui.com/x/react-data-grid/pagination/#index-based-pagination) (#12490) @MBilalShafi
+- 🎨 Support color scales in Charts (#12490) @alexfauquette
+  Add a [`colorMap` configuration](https://mui.com/x/react-charts/styling/#values-color) to an axis, and the chart will use it to select colors.
+  Each impacted chart ([bar charts](https://mui.com/x/react-charts/bars/#color-scale), [line charts](https://mui.com/x/react-charts/lines/#color-scale), [scatter charts](https://mui.com/x/react-charts/scatter/#color-scale)) has a dedicated section explaining how this color map is impacting it.
+
+  <img src="https://github.com/mui/mui-x/assets/45398769/f0066606-3486-4c4e-b3be-7fdd56d763c3" alt="scatter chart with gradient along y-axis" />
+
+- 🌍 Improve Danish (da-DK) locale on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.3.0`
+
+- [DataGrid] Fix calling `onCellEditStop` on error (#12747) @sai6855
+- [DataGrid] Fix column resize (#12792) @romgrk
+- [DataGrid] Fix column separators (#12808) @romgrk
+- [DataGrid] Limit panel width to not exceed screen width (#12799) @cherniavskii
+- [DataGrid] Support advanced server-side pagination use cases (#12474) @MBilalShafi
+- [DataGrid] Support state export and restore on grid density (#12671) @MBilalShafi
+- [l10n] Improve Danish (da-DK) locale (#12784) @EmilBahnsen
+
+#### `@mui/x-data-grid-pro@7.3.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.3.0`, plus:
+
+- [DataGridPro] Implement header filter height (#12666) @romgrk
+
+#### `@mui/x-data-grid-premium@7.3.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.3.0`.
+
+### Charts
+
+#### Breaking change
+
+A typo fix:
+
+```diff
+- ContinuouseScaleName
++ ContinuousScaleName
+```
+
+#### `@mui/x-charts@7.3.0`
+
+- [charts] Add `dataIndex` to series `valueFormatter` (#12745) @JCQuintas
+- [charts] Add color scale (#12490) @alexfauquette
+- [charts] Do not document the usage of `DEFAULT_X_AXIS_KEY` and `DEFAULT_Y_AXIS_KEY` (#12780) @alexfauquette
+- [charts] Export more utils (#12744) @alexfauquette
+- [charts] Fix passing slot props down to `PieArcLabel` (#12806) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@7.3.0`
+
+- [TreeView] Support `defaultMuiPrevented` on the `onFocus` prop of the root slot (#12813) @flaviendelangle
+
+### Docs
+
+- [docs] Add grid cell display example to the migration guide (#12793) @romgrk
+- [docs] Use charts classes objects (#12781) @alexfauquette
+- [docs] Fix layout shift on demos (#12816) @zanivan
+- [test] Increase timeout for test that sometimes fail on `DateTimeRangePicker` (#12786) @LukasTy
+
+### Core
+
+- [docs-infra] Prepare infra to document charts interfaces (#12653) @alexfauquette
+
 ## 7.2.0
 
 _Apr 12, 2024_
@@ -168,7 +320,7 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus:
 - [docs] Fix type arguments in Custom Field page (#12619) @Juneezee
 - [docs] Fix typo in `getItemId` prop description (#12637) @flaviendelangle
 - [docs] Make the Charts `margin` usage more visible (#12591) @alexfauquette
-- [docs] Match IE 11 spacing with Material UI @oliviertassinari
+- [docs] Match IE 11 spacing with Material UI @oliviertassinari
 - [docs] Move data grid interfaces to standard API page layout (#12016) @alexfauquette
 - [docs] Remove ` around @default values (#12158) @alexfauquette
 - [docs] Remove `day` from the default `dayOfWeekFormatter` function params (#12644) @LukasTy
@@ -431,7 +583,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0`, plus:
 - [docs] Update links to v6 (#12496) @cherniavskii
 - [docs] Update links to v7 docs (#12500) @noraleonte
 - [docs] Update supported versions (#12508) @joserodolfofreitas
-- [docs] Update "What's new in MUI X" page #12527 @cherniavskii
+- [docs] Update "What's new in MUI X" page #12527 @cherniavskii
 
 ### Core
 
@@ -3058,6 +3210,56 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.19.11
+
+_Apr 18, 2024_
+
+We'd like to offer a big thanks to the 1 contributor who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.11`
+
+- [DataGrid] Fix virtualization memory leak (#12812) @romgrk
+
+#### `@mui/x-data-grid-pro@6.19.11` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.19.11`.
+
+#### `@mui/x-data-grid-premium@6.19.11` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.19.11`.
+
+## 6.19.10
+
+_Apr 12, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.19.10`
+
+- [DataGrid] Do not escape double quotes when copying to clipboard (#12734) @cherniavskii
+- [DataGrid] Fix bug in suspense (#12754) @cherniavskii
+
+#### `@mui/x-data-grid-pro@6.19.10` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.19.10`.
+
+#### `@mui/x-data-grid-premium@6.19.10` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.19.10`.
+
+### Core
+
+- [core] Update the docs release source branch (#12685) @LukasTy
+
 ## 6.19.9
 
 _Apr 5, 2024_

package/DataGrid/DataGrid.js

@@ -8,8 +8,7 @@ import { GridContextProvider } from '../context/GridContextProvider';
 import { useDataGridComponent } from './useDataGridComponent';
 import { useDataGridProps } from './useDataGridProps';
 import { propValidatorsDataGrid, validateProps } from '../internals/utils/propValidation';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const propValidators = [...propValidatorsDataGrid,
 // Only validate in MIT version
 props => props.columns && props.columns.some(column => column.resizable) && [`MUI X: \`column.resizable = true\` is not a valid prop.`, 'Column resizing is not available in the MIT version.', '', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n') || undefined];
@@ -186,6 +185,12 @@ DataGridRaw.propTypes = {
    * @default "cell"
    */
   editMode: PropTypes.oneOf(['cell', 'row']),
+  /**
+   * Use if the actual rowCount is not known upfront, but an estimation is available.
+   * If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
+   * Applicable only with `paginationMode="server"` and when `rowCount="-1"`
+   */
+  estimatedRowCount: PropTypes.number,
   /**
    * Unstable features, breaking changes might be introduced.
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
@@ -487,6 +492,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onMenuOpen: PropTypes.func,
+  /**
+   * Callback fired when the pagination meta has changed.
+   * @param {GridPaginationMeta} paginationMeta Updated pagination meta.
+   */
+  onPaginationMetaChange: PropTypes.func,
   /**
    * Callback fired when the pagination model has changed.
    * @param {GridPaginationModel} model Updated pagination model.
@@ -586,6 +596,13 @@ DataGridRaw.propTypes = {
     value: PropTypes.number.isRequired
   })]).isRequired),
   pagination: PropTypes.oneOf([true]),
+  /**
+   * The extra information about the pagination state of the Data Grid.
+   * Only applicable with `paginationMode="server"`.
+   */
+  paginationMeta: PropTypes.shape({
+    hasNextPage: PropTypes.bool
+  }),
   /**
    * Pagination can be processed on the server or client-side.
    * Set it to 'client' if you would like to handle the pagination on the client-side.
@@ -621,6 +638,7 @@ DataGridRaw.propTypes = {
   /**
    * Set the total number of rows, if it is different from the length of the value `rows` prop.
    * If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
+   * Only works with `paginationMode="server"`, ignored when `paginationMode="client"`.
    */
   rowCount: PropTypes.number,
   /**

package/colDef/gridDateOperators.js

@@ -7,6 +7,13 @@ function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
   if (showTime) {
     date.setSeconds(0, 0);
   } else {
+    // In GMT-X timezone, the date will be one day behind.
+    // For 2022-08-16:
+    // GMT+2: Tue Aug 16 2022 02:00:00 GMT+0200
+    // GMT-4: Mon Aug 15 2022 20:00:00 GMT-0400
+    //
+    // We need to add the offset before resetting the hours.
+    date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
     date.setHours(0, 0, 0, 0);
   }
   const time = date.getTime();

package/components/GridFooter.js

@@ -9,8 +9,7 @@ import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridSelectedRowCount } from './GridSelectedRowCount';
 import { GridFooterContainer } from './containers/GridFooterContainer';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();

package/components/GridHeader.js

@@ -2,8 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridPreferencesPanel } from './panel/GridPreferencesPanel';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function GridHeader() {
   const rootProps = useGridRootProps();
   return /*#__PURE__*/_jsxs(React.Fragment, {

package/components/GridHeaders.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { fastMemo } from '../utils/fastMemo';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
@@ -30,7 +31,7 @@ function GridHeaders() {
   apiRef.current.register('private', {
     columnHeadersContainerRef: columnsContainerRef
   });
-  return /*#__PURE__*/_jsx(rootProps.slots.columnHeaders, {
+  return /*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
     ref: columnsContainerRef,
     visibleColumns: visibleColumns,
     filterColumnLookup: filterColumnLookup,
@@ -44,7 +45,7 @@ function GridHeaders() {
     columnVisibility: columnVisibility,
     columnGroupsHeaderStructure: columnGroupsHeaderStructure,
     hasOtherElementInTabSequence: hasOtherElementInTabSequence
-  });
+  }, rootProps.slotProps?.columnHeaders));
 }
 const MemoizedGridHeaders = fastMemo(GridHeaders);
 export { MemoizedGridHeaders as GridHeaders };

package/components/GridPagination.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { TablePaginationProps } from '@mui/material/TablePagination';
+import { TablePaginationProps, LabelDisplayedRowsArgs } from '@mui/material/TablePagination';
+export type WrappedLabelDisplayedRows = (args: LabelDisplayedRowsArgs & {
+    estimated?: number;
+}) => React.ReactNode;
 interface GridPaginationOwnProps {
     component?: React.ElementType;
 }

package/components/GridPagination.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import TablePagination, { tablePaginationClasses } from '@mui/material/TablePagination';
-import { styled } from '@mui/material/styles';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { gridPaginationModelSelector, gridPaginationRowCountSelector } from '../hooks/features/pagination/gridPaginationSelector';
+import { gridPaginationModelSelector, gridPaginationRowCountSelector, gridPageCountSelector } from '../hooks/features/pagination/gridPaginationSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridPaginationRoot = styled(TablePagination)(({
   theme
@@ -24,6 +24,31 @@ const GridPaginationRoot = styled(TablePagination)(({
     }
   }
 }));
+const wrapLabelDisplayedRows = (labelDisplayedRows, estimated) => {
+  return ({
+    from,
+    to,
+    count,
+    page
+  }) => labelDisplayedRows({
+    from,
+    to,
+    count,
+    page,
+    estimated
+  });
+};
+const defaultLabelDisplayedRows = ({
+  from,
+  to,
+  count,
+  estimated
+}) => {
+  if (!estimated) {
+    return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+  }
+  return `${from}–${to} of ${count !== -1 ? count : `more than ${estimated > to ? estimated : to}`}`;
+};
 
 // A mutable version of a readonly array.
 
@@ -32,10 +57,32 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
   const rootProps = useGridRootProps();
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
   const rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector);
-  const lastPage = React.useMemo(() => {
-    const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
-    return Math.max(0, calculatedValue);
-  }, [rowCount, paginationModel.pageSize]);
+  const pageCount = useGridSelector(apiRef, gridPageCountSelector);
+  const {
+    paginationMode,
+    loading,
+    estimatedRowCount
+  } = rootProps;
+  const computedProps = React.useMemo(() => {
+    if (rowCount === -1 && paginationMode === 'server' && loading) {
+      return {
+        backIconButtonProps: {
+          disabled: true
+        },
+        nextIconButtonProps: {
+          disabled: true
+        }
+      };
+    }
+    return {};
+  }, [loading, paginationMode, rowCount]);
+  const lastPage = React.useMemo(() => Math.max(0, pageCount - 1), [pageCount]);
+  const computedPage = React.useMemo(() => {
+    if (rowCount === -1) {
+      return paginationModel.page;
+    }
+    return paginationModel.page <= lastPage ? paginationModel.page : lastPage;
+  }, [lastPage, paginationModel.page, rowCount]);
   const handlePageSizeChange = React.useCallback(event => {
     const pageSize = Number(event.target.value);
     apiRef.current.setPageSize(pageSize);
@@ -61,16 +108,18 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
     const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
     if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
-      console.warn([`MUI X: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\`.`, `Add it to show the pagination select.`].join('\n'));
+      console.warn([`MUI X: The page size \`${paginationModel.pageSize}\` is not present in the \`pageSizeOptions\`.`, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }
   const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
+  const locales = apiRef.current.getLocaleText('MuiTablePagination');
+  const wrappedLabelDisplayedRows = wrapLabelDisplayedRows(locales.labelDisplayedRows || defaultLabelDisplayedRows, estimatedRowCount);
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
     ref: ref,
     component: "div",
     count: rowCount,
-    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage
+    page: computedPage
     // TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
     // for x-data-grid is past the fix.
     // Note that Material UI will not mutate the array, so this is safe.
@@ -79,7 +128,9 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange
-  }, apiRef.current.getLocaleText('MuiTablePagination'), props));
+  }, computedProps, locales, {
+    labelDisplayedRows: wrappedLabelDisplayedRows
+  }, props));
 });
 process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/GridRow.js

@@ -24,8 +24,7 @@ import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditing
 import { PinnedPosition, gridPinnedColumnPositionLookup } from './cell/GridCell';
 import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
 import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     editable,
@@ -366,6 +365,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
     }).isRequired,
     hasScrollX: PropTypes.bool.isRequired,
     hasScrollY: PropTypes.bool.isRequired,
+    headerFilterHeight: PropTypes.number.isRequired,
     headerHeight: PropTypes.number.isRequired,
     headersTotalHeight: PropTypes.number.isRequired,
     isReady: PropTypes.bool.isRequired,

package/components/GridScrollArea.js

@@ -82,7 +82,7 @@ function GridScrollAreaRaw(props) {
     scrollDirection
   });
   const classes = useUtilityClasses(ownerState);
-  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight);
+  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps);
   const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
   const style = {
     height: headerHeight,

package/components/cell/GridActionsCell.js

@@ -10,8 +10,7 @@ import { gridClasses } from '../../constants/gridClasses';
 import { GridMenu } from '../menu/GridMenu';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const hasActions = colDef => typeof colDef.getActions === 'function';
 function GridActionsCell(props) {
   const {

package/components/cell/GridActionsCellItem.js

@@ -7,8 +7,7 @@ import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = useGridRootProps();
   if (!props.showInMenu) {

package/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -10,8 +10,7 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridIconButtonContainer } from './GridIconButtonContainer';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes

package/components/columnHeaders/GridColumnHeaderItem.d.ts

@@ -10,6 +10,7 @@ interface GridColumnHeaderItemProps {
     headerHeight: number;
     isDragging: boolean;
     isResizing: boolean;
+    isLast: boolean;
     sortDirection: GridSortDirection;
     sortIndex?: number;
     filterItemsCounter?: number;

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -1,19 +1,19 @@
 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_useId as useId } from '@mui/utils';
 import { fastMemo } from '../../utils/fastMemo';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
 import { isEventTargetInPortal } from '../../utils/domUtils';
 import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../../utils/cellBorderUtils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     colDef,
@@ -44,6 +44,7 @@ function GridColumnHeaderItem(props) {
     colIndex,
     headerHeight,
     isResizing,
+    isLast,
     sortDirection,
     sortIndex,
     filterItemsCounter,
@@ -182,7 +183,7 @@ function GridColumnHeaderItem(props) {
     width: colDef.computedWidth,
     columnMenuIconButton: columnMenuIconButton,
     columnTitleIconButtons: columnTitleIconButtons,
-    headerClassName: headerClassName,
+    headerClassName: clsx(headerClassName, isLast && gridClasses['columnHeader--last']),
     label: label,
     resizable: !rootProps.disableColumnResize && !!colDef.resizable,
     "data-field": colDef.field,
@@ -207,6 +208,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   headerHeight: PropTypes.number.isRequired,
   indexInSection: PropTypes.number.isRequired,
   isDragging: PropTypes.bool.isRequired,
+  isLast: PropTypes.bool.isRequired,
   isResizing: PropTypes.bool.isRequired,
   pinnedPosition: PropTypes.oneOf(['left', 'right']),
   sectionLength: PropTypes.number.isRequired,

package/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -48,7 +48,7 @@ function GridColumnHeaderSeparatorRaw(props) {
       className: classes.root,
       style: {
         minHeight: height,
-        opacity: rootProps.showColumnVerticalBorder ? 1 : 0
+        opacity: rootProps.showColumnVerticalBorder ? 0 : 1
       }
     }, other, {
       onClick: stopClick,

package/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -7,8 +7,7 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridIconButtonContainer } from './GridIconButtonContainer';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -8,8 +8,7 @@ import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiCon
 import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
 import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
   const {
       classes,

package/components/columnsManagement/GridColumnsManagement.js

@@ -12,8 +12,7 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useLazyRef } from '../../hooks/utils/useLazyRef';
 import { checkColumnVisibilityModelsSame, defaultSearchPredicate } from './utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes

package/components/containers/GridRoot.js

@@ -12,8 +12,7 @@ import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiCon
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     autoHeight,