@mui/x-data-grid 7.15.0 → 7.16.0

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);
 };

package/modern/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/modern/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/modern/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/modern/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/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderTop', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/constants/index.js

@@ -1,3 +1,3 @@
-export * from './envConstants';
-export * from './localeTextConstants';
-export * from './gridClasses';
+export * from "./envConstants.js";
+export * from "./localeTextConstants.js";
+export * from "./gridClasses.js";

package/modern/context/GridContextProvider.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { GridApiContext } from '../components/GridApiContext';
-import { GridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
-import { GridRootPropsContext } from './GridRootPropsContext';
-import { GridConfigurationContext } from '../components/GridConfigurationContext';
+import { GridApiContext } from "../components/GridApiContext.js";
+import { GridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
+import { GridRootPropsContext } from "./GridRootPropsContext.js";
+import { GridConfigurationContext } from "../components/GridConfigurationContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridContextProvider({
   privateApiRef,

package/modern/context/index.js

@@ -1 +1 @@
-export * from './GridContextProvider';
+export * from "./GridContextProvider.js";