@mui/x-data-grid 7.2.0 → 7.3.1

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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,

package/modern/components/containers/GridRootStyles.js

@@ -274,7 +274,9 @@ export const GridRootStyles = styled('div', {
     [`& .${c.columnHeader}`]: {
       position: 'relative',
       display: 'flex',
-      alignItems: 'center',
+      alignItems: 'center'
+    },
+    [`& .${c['columnHeader--last']}`]: {
       overflow: 'hidden'
     },
     [`& .${c['columnHeader--sorted']} .${c.iconButtonContainer}, & .${c['columnHeader--filtered']} .${c.iconButtonContainer}`]: {

package/modern/components/index.js

@@ -13,7 +13,7 @@ export * from './GridFooter';
 export * from './GridHeader';
 export * from './GridLoadingOverlay';
 export * from './GridNoRowsOverlay';
-export * from './GridPagination';
+export { GridPagination } from './GridPagination';
 export * from './GridRowCount';
 export * from './GridRow';
 export * from './GridSelectedRowCount';

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuColumnsItem.js

@@ -3,8 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GridColumnMenuHideItem } from './GridColumnMenuHideItem';
 import { GridColumnMenuManageItem } from './GridColumnMenuManageItem';
-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";
 function GridColumnMenuColumnsItem(props) {
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(GridColumnMenuHideItem, _extends({}, props)), /*#__PURE__*/_jsx(GridColumnMenuManageItem, _extends({}, props))]

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js

@@ -5,8 +5,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
 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";
 function GridColumnMenuFilterItem(props) {
   const {
     colDef,

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js

@@ -6,8 +6,7 @@ import ListItemText from '@mui/material/ListItemText';
 import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps';
 import { gridVisibleColumnDefinitionsSelector } from '../../../../hooks/features/columns';
-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";
 function GridColumnMenuHideItem(props) {
   const {
     colDef,

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js

@@ -6,8 +6,7 @@ import ListItemText from '@mui/material/ListItemText';
 import { GridPreferencePanelsValue } from '../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
 import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
 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";
 function GridColumnMenuManageItem(props) {
   const {
     onClick

package/modern/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -7,8 +7,7 @@ import { useGridSelector } from '../../../../hooks/utils/useGridSelector';
 import { gridSortModelSelector } from '../../../../hooks/features/sorting/gridSortingSelector';
 import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
 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";
 function GridColumnMenuSortItem(props) {
   const {
     colDef,

package/modern/components/panel/GridPanel.js

@@ -33,7 +33,9 @@ const GridPaperRoot = styled(Paper, {
   backgroundColor: (theme.vars || theme).palette.background.paper,
   minWidth: 300,
   maxHeight: 450,
-  display: 'flex'
+  display: 'flex',
+  maxWidth: `calc(100vw - ${theme.spacing(0.5)})`,
+  overflow: 'auto'
 }));
 const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {

package/modern/components/panel/filterPanel/GridFilterForm.js

@@ -15,9 +15,8 @@ import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../../constants/gridClasses';
 import { getValueFromValueOptions, getValueOptions } from './filterPanelUtils';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes

package/modern/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -6,8 +6,7 @@ import PropTypes from 'prop-types';
 import { refType, unstable_useId as useId } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 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 BooleanOperatorContainer = styled('div')({
   display: 'flex',
   alignItems: 'center',

package/modern/components/panel/filterPanel/GridFilterInputDate.js

@@ -15,14 +15,14 @@ function convertFilterItemValueToInputValue(itemValue, inputType) {
   if (Number.isNaN(dateCopy.getTime())) {
     return '';
   }
-  // The date picker expects the date to be in the local timezone.
-  // But .toISOString() converts it to UTC with zero offset.
-  // So we need to subtract the timezone offset.
-  dateCopy.setMinutes(dateCopy.getMinutes() - dateCopy.getTimezoneOffset());
   if (inputType === 'date') {
     return dateCopy.toISOString().substring(0, 10);
   }
   if (inputType === 'datetime-local') {
+    // The date picker expects the date to be in the local timezone.
+    // But .toISOString() converts it to UTC with zero offset.
+    // So we need to subtract the timezone offset.
+    dateCopy.setMinutes(dateCopy.getMinutes() - dateCopy.getTimezoneOffset());
     return dateCopy.toISOString().substring(0, 19);
   }
   return dateCopy.toISOString().substring(0, 10);

package/modern/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -8,8 +8,7 @@ import { styled } from '@mui/material/styles';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from './filterPanelUtils';
 import { createElement as _createElement } from "react";
-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 renderSingleSelectOptions = ({
   column,
   OptionComponent,

package/modern/components/panel/filterPanel/GridFilterPanel.js

@@ -13,8 +13,7 @@ import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../../hooks/utils/useGridSelector';
 import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector';
 import { gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector } from '../../../hooks/features/columns/gridColumnsSelector';
-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 getGridFilter = col => ({
   field: col.field,
   operator: col.filterOperators[0].value,

package/modern/components/toolbar/GridToolbar.js

@@ -11,8 +11,7 @@ import { GridToolbarFilterButton } from './GridToolbarFilterButton';
 import { GridToolbarExport } from './GridToolbarExport';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridToolbarQuickFilter } from './GridToolbarQuickFilter';
-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 GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
   // TODO v7: think about where export option should be passed.
   // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate

package/modern/components/toolbar/GridToolbarDensitySelector.js

@@ -12,8 +12,7 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridMenu } from '../menu/GridMenu';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridClasses } from '../../constants/gridClasses';
-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 GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
   const {
     slotProps = {}

package/modern/components/toolbar/GridToolbarExportContainer.js

@@ -8,8 +8,7 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridMenu } from '../menu/GridMenu';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridClasses } from '../../constants/gridClasses';
-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 GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
   const {
     children,

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -12,8 +12,7 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
-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/modern/components/virtualization/GridVirtualScroller.js

@@ -18,8 +18,7 @@ import { GridVirtualScrollerContent as Content } from './GridVirtualScrollerCont
 import { GridVirtualScrollerFiller as SpaceFiller } from './GridVirtualScrollerFiller';
 import { GridVirtualScrollerRenderZone as RenderZone } from './GridVirtualScrollerRenderZone';
 import { GridVirtualScrollbar as Scrollbar } from './GridVirtualScrollbar';
-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, dimensions) => {
   const {
     classes

package/modern/components/virtualization/GridVirtualScrollerFiller.js

@@ -5,8 +5,7 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { gridDimensionsSelector } from '../../hooks/features/dimensions';
 import { gridClasses } from '../../constants';
-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 Filler = styled('div')({
   display: 'flex',
   flexDirection: 'row',