@mui/x-data-grid 7.14.0 → 7.16.0

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

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-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 { useGridSelector } from "../../../../hooks/utils/useGridSelector.js";
+import { gridSortModelSelector } from "../../../../hooks/features/sorting/gridSortingSelector.js";
+import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuSortItem(props) {
   const {

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

@@ -1,5 +1,5 @@
-export * from './GridColumnMenuColumnsItem';
-export * from './GridColumnMenuManageItem';
-export * from './GridColumnMenuFilterItem';
-export * from './GridColumnMenuHideItem';
-export * from './GridColumnMenuSortItem';
+export * from "./GridColumnMenuColumnsItem.js";
+export * from "./GridColumnMenuManageItem.js";
+export * from "./GridColumnMenuFilterItem.js";
+export * from "./GridColumnMenuHideItem.js";
+export * from "./GridColumnMenuSortItem.js";

package/modern/components/menu/index.js

@@ -1,2 +1,2 @@
-export * from './columnMenu';
-export * from './GridMenu';
+export * from "./columnMenu/index.js";
+export * from "./GridMenu.js";

package/modern/components/panel/GridColumnsPanel.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GridPanelWrapper } from './GridPanelWrapper';
-import { GridColumnsManagement } from '../columnsManagement';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridPanelWrapper } from "./GridPanelWrapper.js";
+import { GridColumnsManagement } from "../columnsManagement/index.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnsPanel(props) {
   const rootProps = useGridRootProps();

package/modern/components/panel/GridPanel.js

@@ -9,8 +9,8 @@ import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const gridPanelClasses = generateUtilityClasses('MuiDataGrid', ['panel', 'paper']);
 const GridPanelRoot = styled(Popper, {

package/modern/components/panel/GridPanelContent.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/components/panel/GridPanelFooter.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/components/panel/GridPanelHeader.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/components/panel/GridPanelWrapper.js

@@ -7,8 +7,8 @@ import clsx from 'clsx';
 import FocusTrap from '@mui/material/Unstable_TrapFocus';
 import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/components/panel/GridPreferencesPanel.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { gridColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
-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 { gridColumnDefinitionsSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
+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";
 export function GridPreferencesPanel() {
   const apiRef = useGridApiContext();

package/modern/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 => {

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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/modern/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);
 };