@mui/x-data-grid 7.15.0 → 7.17.0

package/components/panel/filterPanel/GridFilterForm.js

@@ -7,14 +7,14 @@ import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
-import { gridFilterableColumnDefinitionsSelector, gridColumnLookupSelector } from '../../../hooks/features/columns/gridColumnsSelector';
-import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector';
-import { useGridSelector } from '../../../hooks/utils/useGridSelector';
-import { GridLogicOperator } from '../../../models/gridFilterItem';
-import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../../constants/gridClasses';
-import { getValueFromValueOptions, getValueOptions } from './filterPanelUtils';
+import { gridFilterableColumnDefinitionsSelector, gridColumnLookupSelector } from "../../../hooks/features/columns/gridColumnsSelector.js";
+import { gridFilterModelSelector } from "../../../hooks/features/filter/gridFilterSelector.js";
+import { useGridSelector } from "../../../hooks/utils/useGridSelector.js";
+import { GridLogicOperator } from "../../../models/gridFilterItem.js";
+import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../../constants/gridClasses.js";
+import { getValueFromValueOptions, getValueOptions } from "./filterPanelUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const useUtilityClasses = ownerState => {
@@ -74,7 +74,7 @@ const FilterFormOperatorInput = styled('div', {
   slot: 'FilterFormOperatorInput',
   overridesResolver: (_, styles) => styles.filterFormOperatorInput
 })({
-  width: 120
+  width: 150
 });
 const FilterFormValueInput = styled('div', {
   name: 'MuiDataGrid',

package/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 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 { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BooleanOperatorContainer = styled('div')({
   display: 'flex',

package/components/panel/filterPanel/GridFilterInputDate.js

@@ -4,8 +4,8 @@ const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "I
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
-import { useTimeout } from '../../../hooks/utils/useTimeout';
-import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { useTimeout } from "../../../hooks/utils/useTimeout.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function convertFilterItemValueToInputValue(itemValue, inputType) {
   if (itemValue == null) {

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js

@@ -6,8 +6,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
 import { unstable_useId as useId } from '@mui/utils';
-import { getValueOptions, isSingleSelectColDef } from './filterPanelUtils';
-import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { getValueOptions, isSingleSelectColDef } from "./filterPanelUtils.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const filter = createFilterOptions();
 function GridFilterInputMultipleSingleSelect(props) {

package/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "color", "error", "helperText", "size", "variant"],
+  _excluded2 = ["key"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete from '@mui/material/Autocomplete';
 import { unstable_useId as useId } from '@mui/utils';
-import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridFilterInputMultipleValue(props) {
   const {
@@ -54,13 +55,20 @@ function GridFilterInputMultipleValue(props) {
     id: id,
     value: filterValueState,
     onChange: handleChange,
-    renderTags: (value, getTagProps) => value.map((option, index) => /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
-      variant: "outlined",
-      size: "small",
-      label: option
-    }, getTagProps({
-      index
-    })))),
+    renderTags: (value, getTagProps) => value.map((option, index) => {
+      const _getTagProps = getTagProps({
+          index
+        }),
+        {
+          key
+        } = _getTagProps,
+        tagProps = _objectWithoutPropertiesLoose(_getTagProps, _excluded2);
+      return /*#__PURE__*/_jsx(rootProps.slots.baseChip, _extends({
+        variant: "outlined",
+        size: "small",
+        label: option
+      }, tagProps), key);
+    }),
     renderInput: params => /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({}, params, {
       label: apiRef.current.getLocaleText('filterPanelInputLabel'),
       placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -5,8 +5,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
 import { styled } from '@mui/material/styles';
-import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
-import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from './filterPanelUtils';
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
+import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from "./filterPanelUtils.js";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const renderSingleSelectOptions = ({

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -4,8 +4,8 @@ const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "t
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
-import { useTimeout } from '../../../hooks/utils/useTimeout';
-import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
+import { useTimeout } from "../../../hooks/utils/useTimeout.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridFilterInputValue(props) {
   const {

package/components/panel/filterPanel/GridFilterPanel.js

@@ -3,16 +3,16 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["logicOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children", "disableAddFilterButton", "disableRemoveAllButton"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GridLogicOperator } from '../../../models/gridFilterItem';
-import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
-import { GridPanelContent } from '../GridPanelContent';
-import { GridPanelFooter } from '../GridPanelFooter';
-import { GridPanelWrapper } from '../GridPanelWrapper';
-import { GridFilterForm } from './GridFilterForm';
-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 { GridLogicOperator } from "../../../models/gridFilterItem.js";
+import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
+import { GridPanelContent } from "../GridPanelContent.js";
+import { GridPanelFooter } from "../GridPanelFooter.js";
+import { GridPanelWrapper } from "../GridPanelWrapper.js";
+import { GridFilterForm } from "./GridFilterForm.js";
+import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
+import { useGridSelector } from "../../../hooks/utils/useGridSelector.js";
+import { gridFilterModelSelector } from "../../../hooks/features/filter/gridFilterSelector.js";
+import { gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector } from "../../../hooks/features/columns/gridColumnsSelector.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getGridFilter = col => ({
   field: col.field,

package/components/panel/filterPanel/index.js

@@ -1,9 +1,9 @@
-export * from './GridFilterForm';
-export * from './GridFilterInputValue';
-export * from './GridFilterInputDate';
-export * from './GridFilterInputSingleSelect';
-export * from './GridFilterInputBoolean';
-export * from './GridFilterInputValueProps';
-export { GridFilterPanel } from './GridFilterPanel';
-export * from './GridFilterInputMultipleValue';
-export * from './GridFilterInputMultipleSingleSelect';
+export * from "./GridFilterForm.js";
+export * from "./GridFilterInputValue.js";
+export * from "./GridFilterInputDate.js";
+export * from "./GridFilterInputSingleSelect.js";
+export * from "./GridFilterInputBoolean.js";
+export * from "./GridFilterInputValueProps.js";
+export { GridFilterPanel } from "./GridFilterPanel.js";
+export * from "./GridFilterInputMultipleValue.js";
+export * from "./GridFilterInputMultipleSingleSelect.js";

package/components/panel/index.js

@@ -1,7 +1,7 @@
-export * from './GridColumnsPanel';
-export * from './GridPanel';
-export * from './GridPanelContent';
-export * from './GridPanelFooter';
-export * from './GridPanelHeader';
-export * from './GridPanelWrapper';
-export * from './filterPanel';
+export * from "./GridColumnsPanel.js";
+export * from "./GridPanel.js";
+export * from "./GridPanelContent.js";
+export * from "./GridPanelFooter.js";
+export * from "./GridPanelHeader.js";
+export * from "./GridPanelWrapper.js";
+export * from "./filterPanel/index.js";

package/components/reexportable.js

@@ -1 +1 @@
-export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from './menu/columnMenu/GridColumnMenu';
+export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } from "./menu/columnMenu/GridColumnMenu.js";

package/components/toolbar/GridToolbar.js

@@ -4,13 +4,13 @@ const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "s
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
-import { GridToolbarContainer } from '../containers/GridToolbarContainer';
-import { GridToolbarColumnsButton } from './GridToolbarColumnsButton';
-import { GridToolbarDensitySelector } from './GridToolbarDensitySelector';
-import { GridToolbarFilterButton } from './GridToolbarFilterButton';
-import { GridToolbarExport } from './GridToolbarExport';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridToolbarQuickFilter } from './GridToolbarQuickFilter';
+import { GridToolbarContainer } from "../containers/GridToolbarContainer.js";
+import { GridToolbarColumnsButton } from "./GridToolbarColumnsButton.js";
+import { GridToolbarDensitySelector } from "./GridToolbarDensitySelector.js";
+import { GridToolbarFilterButton } from "./GridToolbarFilterButton.js";
+import { GridToolbarExport } from "./GridToolbarExport.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { GridToolbarQuickFilter } from "./GridToolbarQuickFilter.js";
 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.

package/components/toolbar/GridToolbarColumnsButton.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/material/utils';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
-import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
+import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
   const {

package/components/toolbar/GridToolbarDensitySelector.js

@@ -5,13 +5,13 @@ import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
-import { isHideMenuKey } from '../../utils/keyboardUtils';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { GridMenu } from '../menu/GridMenu';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridClasses } from '../../constants/gridClasses';
+import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
+import { isHideMenuKey } from "../../utils/keyboardUtils.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { GridMenu } from "../menu/GridMenu.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { gridClasses } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
   const {

package/components/toolbar/GridToolbarExport.js

@@ -6,8 +6,8 @@ const _excluded = ["hideMenu", "options"],
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { GridToolbarExportContainer } from './GridToolbarExportContainer';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { GridToolbarExportContainer } from "./GridToolbarExportContainer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridCsvExportMenuItem(props) {
   const apiRef = useGridApiContext();

package/components/toolbar/GridToolbarExportContainer.js

@@ -3,11 +3,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
 import MenuList from '@mui/material/MenuList';
-import { isHideMenuKey } from '../../utils/keyboardUtils';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { GridMenu } from '../menu/GridMenu';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridClasses } from '../../constants/gridClasses';
+import { isHideMenuKey } from "../../utils/keyboardUtils.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { GridMenu } from "../menu/GridMenu.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { gridClasses } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
   const {

package/components/toolbar/GridToolbarFilterButton.js

@@ -4,14 +4,14 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
 import Badge from '@mui/material/Badge';
-import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridFilterActiveItemsSelector } from '../../hooks/features/filter/gridFilterSelector';
-import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
-import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridColumnLookupSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridFilterActiveItemsSelector } from "../../hooks/features/filter/gridFilterSelector.js";
+import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
+import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/components/toolbar/GridToolbarQuickFilter.js

@@ -8,12 +8,12 @@ import TextField from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import { getDataGridUtilityClass } from '../../constants';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridQuickFilterValuesSelector } from '../../hooks/features/filter';
-import { isDeepEqual } from '../../utils/utils';
+import { getDataGridUtilityClass } from "../../constants/index.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridQuickFilterValuesSelector } from "../../hooks/features/filter/index.js";
+import { isDeepEqual } from "../../utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/components/toolbar/index.js

@@ -1,7 +1,7 @@
-export * from './GridToolbar';
-export * from './GridToolbarColumnsButton';
-export * from './GridToolbarDensitySelector';
-export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport } from './GridToolbarExport';
-export * from './GridToolbarFilterButton';
-export * from './GridToolbarExportContainer';
-export * from './GridToolbarQuickFilter';
+export * from "./GridToolbar.js";
+export * from "./GridToolbarColumnsButton.js";
+export * from "./GridToolbarDensitySelector.js";
+export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport } from "./GridToolbarExport.js";
+export * from "./GridToolbarFilterButton.js";
+export * from "./GridToolbarExportContainer.js";
+export * from "./GridToolbarQuickFilter.js";

package/components/virtualization/GridBottomContainer.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridClasses, getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {
   const slots = {

package/components/virtualization/GridMainContainer.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridConfiguration } from '../../hooks/utils/useGridConfiguration';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridPanelAnchor = styled('div')({
   position: 'absolute',

package/components/virtualization/GridTopContainer.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridClasses, getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {
   const slots = {

package/components/virtualization/GridVirtualScrollbar.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import { useOnMount } from '../../hooks/utils/useOnMount';
-import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { gridDimensionsSelector, useGridSelector } from '../../hooks';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useOnMount } from "../../hooks/utils/useOnMount.js";
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
+import { gridDimensionsSelector, useGridSelector } from "../../hooks/index.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = (ownerState, position) => {
   const {

package/components/virtualization/GridVirtualScroller.js

@@ -2,23 +2,23 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import { GridScrollArea } from '../GridScrollArea';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { gridDimensionsSelector } from '../../hooks/features/dimensions';
-import { useGridVirtualScroller } from '../../hooks/features/virtualization/useGridVirtualScroller';
-import { useGridOverlays } from '../../hooks/features/overlays/useGridOverlays';
-import { GridOverlays as Overlays } from '../base/GridOverlays';
-import { GridHeaders } from '../GridHeaders';
-import { GridMainContainer as Container } from './GridMainContainer';
-import { GridTopContainer as TopContainer } from './GridTopContainer';
-import { GridBottomContainer as BottomContainer } from './GridBottomContainer';
-import { GridVirtualScrollerContent as Content } from './GridVirtualScrollerContent';
-import { GridVirtualScrollerFiller as SpaceFiller } from './GridVirtualScrollerFiller';
-import { GridVirtualScrollerRenderZone as RenderZone } from './GridVirtualScrollerRenderZone';
-import { GridVirtualScrollbar as Scrollbar } from './GridVirtualScrollbar';
+import { GridScrollArea } from "../GridScrollArea.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
+import { useGridVirtualScroller } from "../../hooks/features/virtualization/useGridVirtualScroller.js";
+import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.js";
+import { GridOverlays as Overlays } from "../base/GridOverlays.js";
+import { GridHeaders } from "../GridHeaders.js";
+import { GridMainContainer as Container } from "./GridMainContainer.js";
+import { GridTopContainer as TopContainer } from "./GridTopContainer.js";
+import { GridBottomContainer as BottomContainer } from "./GridBottomContainer.js";
+import { GridVirtualScrollerContent as Content } from "./GridVirtualScrollerContent.js";
+import { GridVirtualScrollerFiller as SpaceFiller } from "./GridVirtualScrollerFiller.js";
+import { GridVirtualScrollerRenderZone as RenderZone } from "./GridVirtualScrollerRenderZone.js";
+import { GridVirtualScrollbar as Scrollbar } from "./GridVirtualScrollbar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
   const {
@@ -26,7 +26,7 @@ const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
   } = ownerState;
   const slots = {
     root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
-    scroller: ['virtualScroller']
+    scroller: ['virtualScroller', dimensions.hasScrollX && 'virtualScroller--hasScrollX']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };

package/components/virtualization/GridVirtualScrollerContent.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = (props, overflowedContent) => {
   const {

package/components/virtualization/GridVirtualScrollerFiller.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { gridDimensionsSelector } from '../../hooks/features/dimensions';
-import { gridClasses } from '../../constants';
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
+import { gridClasses } from "../../constants/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Filler = styled('div')({
   display: 'flex',

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -5,12 +5,12 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridRowsMetaSelector } from '../../hooks/features/rows';
-import { gridRenderContextSelector } from '../../hooks/features/virtualization';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridRowsMetaSelector } from "../../hooks/features/rows/index.js";
+import { gridRenderContextSelector } from "../../hooks/features/virtualization/index.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/constants/defaultGridSlotsComponents.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon } from '../components';
-import { GridCell } from '../components/cell/GridCell';
-import { GridColumnHeaders } from '../components/GridColumnHeaders';
-import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
-import { GridDetailPanels } from '../components/GridDetailPanels';
-import { GridPinnedRows } from '../components/GridPinnedRows';
-import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
-import materialSlots from '../material';
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon } from "../components/index.js";
+import { GridCell } from "../components/cell/GridCell.js";
+import { GridColumnHeaders } from "../components/GridColumnHeaders.js";
+import { GridColumnMenu } from "../components/menu/columnMenu/GridColumnMenu.js";
+import { GridDetailPanels } from "../components/GridDetailPanels.js";
+import { GridPinnedRows } from "../components/GridPinnedRows.js";
+import { GridNoResultsOverlay } from "../components/GridNoResultsOverlay.js";
+import materialSlots from "../material/index.js";
 
 // TODO: camelCase these key. It's a private helper now.
 // Remove then need to call `uncapitalizeObjectKeys`.

package/constants/gridClasses.d.ts

@@ -158,6 +158,16 @@ export interface GridClasses {
      * Styles applied to the last column header element.
      */
     'columnHeader--last': string;
+    /**
+     * Styles applied to the last unpinned column header item.
+     * @ignore - do not document.
+     */
+    'columnHeader--lastUnpinned': string;
+    /**
+     * Styles applied to a column header item when its sibling with a bordering separator is focused.
+     * @ignore - do not document.
+     */
+    'columnHeader--siblingFocused': string;
     /**
      * Styles applied to the header checkbox cell element.
      */
@@ -292,10 +302,10 @@ export interface GridClasses {
      */
     filler: string;
     /**
-     * Styles applied to the filler row with top border.
+     * Styles applied to the filler row with bottom border.
      * @ignore - do not document.
      */
-    'filler--borderTop': string;
+    'filler--borderBottom': string;
     /**
      * Styles applied to the filler row pinned left section.
      * @ignore - do not document.
@@ -403,6 +413,11 @@ export interface GridClasses {
      * Styles applied to the virtualization container.
      */
     virtualScroller: string;
+    /**
+     * Styles applied to the virtualization container when it is scrollable in the horizontal direction.
+     * @ignore - do not document.
+     */
+    'virtualScroller--hasScrollX': string;
     /**
      * Styles applied to the virtualization content.
      */
@@ -541,6 +556,11 @@ export interface GridClasses {
      * Styles applied to the scrollbar filler cell, with a border top.
      */
     'scrollbarFiller--borderTop': string;
+    /**
+     * @ignore - do not document.
+     * Styles applied to the scrollbar filler cell, with a border bottom.
+     */
+    'scrollbarFiller--borderBottom': string;
     /**
      * @ignore - do not document.
      * Styles applied to the scrollbar filler cell.