@mui/x-data-grid 8.1.0 → 8.3.0

package/esm/models/configuration/gridConfiguration.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridRowAriaAttributesInternalHook } from "./gridRowConfiguration.js";
-import type { GridCSSVariablesInterface } from '../../constants/cssVariables';
-import type { GridRowId } from '../gridRows';
+import type { GridCSSVariablesInterface } from "../../constants/cssVariables.js";
+import type { GridRowId } from "../gridRows.js";
 export interface GridAriaAttributesInternalHook {
   useGridAriaAttributes: () => React.HTMLAttributes<HTMLElement>;
 }

package/esm/models/controlStateItem.d.ts

@@ -1,8 +1,8 @@
 import { RefObject } from '@mui/x-internals/types';
-import type { GridCallbackDetails } from './api/gridCallbackDetails';
-import type { GridEventLookup, GridControlledStateEventLookup } from './events';
-import type { OutputSelector } from '../utils/createSelector';
-import type { GridStateCommunity } from './gridStateCommunity';
+import type { GridCallbackDetails } from "./api/gridCallbackDetails.js";
+import type { GridEventLookup, GridControlledStateEventLookup } from "./events/index.js";
+import type { OutputSelector } from "../utils/createSelector.js";
+import type { GridStateCommunity } from "./gridStateCommunity.js";
 export interface GridControlStateItem<State extends GridStateCommunity, Args, E extends keyof GridControlledStateEventLookup> {
   stateId: string;
   propModel?: GridEventLookup[E]['params'];

package/esm/models/events/gridEventListener.d.ts

@@ -1,6 +1,6 @@
 import type { MuiBaseEvent, MuiEvent } from '@mui/x-internals/types';
-import type { GridCallbackDetails } from '../api/gridCallbackDetails';
-import type { GridEventLookup, GridEvents } from './gridEventLookup';
+import type { GridCallbackDetails } from "../api/gridCallbackDetails.js";
+import type { GridEventLookup, GridEvents } from "./gridEventLookup.js";
 export type GridEventListener<E extends GridEvents> = (params: GridEventLookup[E] extends {
   params: any;
 } ? GridEventLookup[E]['params'] : undefined, event: GridEventLookup[E] extends {

package/esm/models/events/gridEventLookup.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import type { MuiBaseEvent } from '@mui/x-internals/types';
-import type { GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams, GridColumnGroupHeaderParams, GridRenderContext } from '../params';
+import type { GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams, GridColumnGroupHeaderParams, GridRenderContext } from "../params/index.js";
 import { GridCellEditStartParams, GridCellEditStopParams } from "../params/gridEditCellParams.js";
 import { GridCellParams } from "../params/gridCellParams.js";
-import type { GridFilterModel } from '../gridFilterModel';
-import type { GridSortModel } from '../gridSortModel';
-import type { GridRowSelectionModel } from '../gridRowSelectionModel';
-import type { ElementSize } from '../elementSize';
-import type { GridGroupNode } from '../gridRows';
-import type { GridColumnVisibilityModel } from '../../hooks/features/columns';
-import type { GridStrategyProcessorName } from '../../hooks/core/strategyProcessing';
+import type { GridFilterModel } from "../gridFilterModel.js";
+import type { GridSortModel } from "../gridSortModel.js";
+import type { GridRowSelectionModel } from "../gridRowSelectionModel.js";
+import type { ElementSize } from "../elementSize.js";
+import type { GridGroupNode } from "../gridRows.js";
+import type { GridColumnVisibilityModel } from "../../hooks/features/columns/index.js";
+import type { GridStrategyProcessorName } from "../../hooks/core/strategyProcessing/index.js";
 import { GridRowEditStartParams, GridRowEditStopParams } from "../params/gridRowParams.js";
 import { GridCellModesModel, GridRowModesModel } from "../api/gridEditingApi.js";
 import { GridPaginationMeta, GridPaginationModel } from "../gridPaginationProps.js";
@@ -614,6 +614,12 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
     params: {};
     event: React.TouchEvent;
   };
+  /**
+   * Fired when the area of height `scrollEndThreshold` is entering the viewport from the bottom.
+   * Used to trigger infinite loading.
+   * @ignore - do not document.
+   */
+  rowsScrollEndIntersection: {};
   /**
    * Fired when the value of the selection checkbox of the header is changed.
    */

package/esm/models/events/gridEventPublisher.d.ts

@@ -1,5 +1,5 @@
 import type { MuiBaseEvent } from '@mui/x-internals/types';
-import type { GridEventLookup, GridEvents } from './gridEventLookup';
+import type { GridEventLookup, GridEvents } from "./gridEventLookup.js";
 type PublisherArgsNoEvent<E extends GridEvents, T extends {
   params: any;
 }> = [E, T['params']];

package/esm/models/gridCell.d.ts

@@ -1,4 +1,4 @@
-import type { GridColDef } from './colDef';
+import type { GridColDef } from "./colDef/index.js";
 import { GridRowId } from "./gridRows.js";
 /**
  * The mode of the cell.

package/esm/models/gridColumnGrouping.d.ts

@@ -1,5 +1,5 @@
 import { GridColDef } from "./colDef/index.js";
-import type { GridColumnGroupHeaderParams } from './params/gridColumnGroupHeaderParams';
+import type { GridColumnGroupHeaderParams } from "./params/gridColumnGroupHeaderParams.js";
 export interface GridLeafColumn {
   field: GridColDef['field'];
 }

package/esm/models/gridDataSource.d.ts

@@ -1,4 +1,4 @@
-import type { GridSortModel, GridFilterModel, GridRowModel, GridPaginationModel, GridRowId } from '.';
+import type { GridSortModel, GridFilterModel, GridRowModel, GridPaginationModel, GridRowId } from "./index.js";
 export interface GridGetRowsParams {
   sortModel: GridSortModel;
   filterModel: GridFilterModel;

package/esm/models/gridEditRowModel.d.ts

@@ -1,4 +1,4 @@
-import type { GridEditCellMeta } from './api/gridEditingApi';
+import type { GridEditCellMeta } from "./api/gridEditingApi.js";
 export interface GridEditCellProps<V = any> {
   value?: V | undefined;
   isValidating?: boolean;

package/esm/models/gridExport.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridRowId } from "./gridRows.js";
-import type { GridApiCommon } from './api';
-import type { GridApiCommunity } from './api/gridApiCommunity';
+import type { GridApiCommon } from "./api/index.js";
+import type { GridApiCommunity } from "./api/gridApiCommunity.js";
 /**
  * The options applicable to any export format.
  */

package/esm/models/gridFilterInputComponent.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import { GridFilterItem } from "./gridFilterItem.js";
-import type { GridApiCommon } from './api/gridApiCommon';
-import type { GridApiCommunity } from './api/gridApiCommunity';
+import type { GridApiCommon } from "./api/gridApiCommon.js";
+import type { GridApiCommunity } from "./api/gridApiCommunity.js";
 export type GridFilterInputSlotProps = {
   size?: 'small' | 'medium';
   label?: React.ReactNode;

package/esm/models/gridFilterOperator.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
 import { GridFilterItem } from "./gridFilterItem.js";
-import type { GridColDef } from './colDef/gridColDef';
-import type { GridValidRowModel } from './gridRows';
-import type { GridApiCommunity } from './api/gridApiCommunity';
-import type { GridFilterInputValueProps } from './gridFilterInputComponent';
+import type { GridColDef } from "./colDef/gridColDef.js";
+import type { GridValidRowModel } from "./gridRows.js";
+import type { GridApiCommunity } from "./api/gridApiCommunity.js";
+import type { GridFilterInputValueProps } from "./gridFilterInputComponent.js";
 type ApplyFilterFn<R extends GridValidRowModel = any, V = any, F = V> = (value: V, row: R, column: GridColDef<R, V, F>, apiRef: RefObject<GridApiCommunity>) => boolean;
 export type GetApplyFilterFn<R extends GridValidRowModel = any, V = any, F = V> = (filterItem: GridFilterItem, column: GridColDef<R, V, F>) => null | ApplyFilterFn<R, V, F>;
 /**

package/esm/models/gridRowSelectionManager.d.ts

@@ -1,5 +1,5 @@
-import type { GridRowId } from './gridRows';
-import type { GridRowSelectionModel } from './gridRowSelectionModel';
+import type { GridRowId } from "./gridRows.js";
+import type { GridRowSelectionModel } from "./gridRowSelectionModel.js";
 export interface RowSelectionManager {
   data: Set<GridRowId>;
   has(id: GridRowId): boolean;

package/esm/models/gridRows.d.ts

@@ -1,4 +1,4 @@
-import type { GridKeyValue } from './colDef/gridColDef';
+import type { GridKeyValue } from "./colDef/gridColDef.js";
 export type GridValidRowModel = {
   [key: string | symbol]: any;
 };

package/esm/models/gridSlotsComponent.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { GridSlotProps } from './gridSlotsComponentsProps';
-import type { GridIconSlotsComponent } from './gridIconSlotsComponent';
-export type { GridSlotProps } from './gridSlotsComponentsProps';
+import type { GridSlotProps } from "./gridSlotsComponentsProps.js";
+import type { GridIconSlotsComponent } from "./gridIconSlotsComponent.js";
+export type { GridSlotProps } from "./gridSlotsComponentsProps.js";
 export interface GridBaseSlots {
   /**
    * The custom Autocomplete component used in the grid for both header and cells.

package/esm/models/gridSlotsComponentsProps.d.ts

@@ -1,24 +1,24 @@
 import * as React from 'react';
-import type { GridToolbarProps } from '../components/toolbar/GridToolbar';
-import type { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton';
-import type { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps';
-import type { GridColumnsPanelProps } from '../components/panel/GridColumnsPanel';
-import type { GridFilterPanelProps } from '../components/panel/filterPanel/GridFilterPanel';
-import type { GridFooterContainerProps } from '../components/containers/GridFooterContainer';
-import type { GridOverlayProps } from '../components/containers/GridOverlay';
-import type { GridPanelProps } from '../components/panel/GridPanel';
-import type { GridSkeletonCellProps } from '../components/cell/GridSkeletonCell';
-import type { GridRowProps } from '../components/GridRow';
-import type { GridCellProps } from '../components/cell/GridCell';
-import type { GridColumnHeadersProps } from '../components/GridColumnHeaders';
-import type { GridDetailPanelsProps } from '../components/GridDetailPanels';
-import type { GridPinnedRowsProps } from '../components/GridPinnedRows';
-import type { GridColumnsManagementProps } from '../components/columnsManagement/GridColumnsManagement';
-import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay';
-import type { GridRowCountProps } from '../components/GridRowCount';
-import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
-import type { GridBottomContainerProps } from '../components/virtualization/GridBottomContainer';
-import type { AutocompleteProps, BadgeProps, ButtonProps, CheckboxProps, ChipProps, CircularProgressProps, DividerProps, IconButtonProps, InputProps, LinearProgressProps, MenuListProps, MenuItemProps, PaginationProps, PopperProps, SelectProps, SelectOptionProps, SkeletonProps, SwitchProps, TooltipProps, TextFieldProps, IconProps } from './gridBaseSlots';
+import type { GridToolbarProps } from "../components/toolbar/GridToolbar.js";
+import type { ColumnHeaderFilterIconButtonProps } from "../components/columnHeaders/GridColumnHeaderFilterIconButton.js";
+import type { GridColumnMenuProps } from "../components/menu/columnMenu/GridColumnMenuProps.js";
+import type { GridColumnsPanelProps } from "../components/panel/GridColumnsPanel.js";
+import type { GridFilterPanelProps } from "../components/panel/filterPanel/GridFilterPanel.js";
+import type { GridFooterContainerProps } from "../components/containers/GridFooterContainer.js";
+import type { GridOverlayProps } from "../components/containers/GridOverlay.js";
+import type { GridPanelProps } from "../components/panel/GridPanel.js";
+import type { GridSkeletonCellProps } from "../components/cell/GridSkeletonCell.js";
+import type { GridRowProps } from "../components/GridRow.js";
+import type { GridCellProps } from "../components/cell/GridCell.js";
+import type { GridColumnHeadersProps } from "../components/GridColumnHeaders.js";
+import type { GridDetailPanelsProps } from "../components/GridDetailPanels.js";
+import type { GridPinnedRowsProps } from "../components/GridPinnedRows.js";
+import type { GridColumnsManagementProps } from "../components/columnsManagement/GridColumnsManagement.js";
+import type { GridLoadingOverlayProps } from "../components/GridLoadingOverlay.js";
+import type { GridRowCountProps } from "../components/GridRowCount.js";
+import type { GridColumnHeaderSortIconProps } from "../components/columnHeaders/GridColumnHeaderSortIcon.js";
+import type { GridBottomContainerProps } from "../components/virtualization/GridBottomContainer.js";
+import type { AutocompleteProps, BadgeProps, ButtonProps, CheckboxProps, ChipProps, CircularProgressProps, DividerProps, IconButtonProps, InputProps, LinearProgressProps, MenuListProps, MenuItemProps, PaginationProps, PopperProps, SelectProps, SelectOptionProps, SkeletonProps, SwitchProps, TooltipProps, TextFieldProps, IconProps } from "./gridBaseSlots.js";
 type RootProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 type MainProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 export interface BaseAutocompletePropsOverrides {}

package/esm/models/gridStateCommunity.d.ts

@@ -1,13 +1,13 @@
-import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridColumnPinningState, GridDensityState, GridDimensionsState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState, GridVirtualizationState } from '../hooks';
-import type { DataGridProps } from './props/DataGridProps';
-import type { GridRowsMetaState } from '../hooks/features/rows/gridRowsMetaState';
-import type { GridEditingState } from './gridEditRowModel';
+import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridColumnPinningState, GridDensityState, GridDimensionsState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState, GridVirtualizationState } from "../hooks/index.js";
+import type { DataGridProps } from "./props/DataGridProps.js";
+import type { GridRowsMetaState } from "../hooks/features/rows/gridRowsMetaState.js";
+import type { GridEditingState } from "./gridEditRowModel.js";
 import { GridHeaderFilteringState } from "./gridHeaderFilteringModel.js";
-import type { GridRowSelectionModel } from './gridRowSelectionModel';
-import type { GridVisibleRowsLookupState } from '../hooks/features/filter/gridFilterState';
-import type { GridColumnResizeState } from '../hooks/features/columnResize';
-import type { GridRowSpanningState } from '../hooks/features/rows/useGridRowSpanning';
-import type { GridListViewState } from '../hooks/features/listView/useGridListView';
+import type { GridRowSelectionModel } from "./gridRowSelectionModel.js";
+import type { GridVisibleRowsLookupState } from "../hooks/features/filter/gridFilterState.js";
+import type { GridColumnResizeState } from "../hooks/features/columnResize/index.js";
+import type { GridRowSpanningState } from "../hooks/features/rows/useGridRowSpanning.js";
+import type { GridListViewState } from "../hooks/features/listView/useGridListView.js";
 /**
  * Some props are passed on the state to enable grid selectors to select
  * and react to them.

package/esm/models/index.d.ts

@@ -5,7 +5,7 @@ export * from "./gridEditRowModel.js";
 export * from "./gridFeatureMode.js";
 export * from "./gridFilterItem.js";
 export * from "./gridFilterModel.js";
-export type { GridFilterInputValueProps } from './gridFilterInputComponent';
+export type { GridFilterInputValueProps } from "./gridFilterInputComponent.js";
 export * from "./gridPaginationProps.js";
 export * from "./gridRenderContextProps.js";
 export * from "./gridRows.js";
@@ -17,15 +17,15 @@ export * from "./gridCell.js";
 export * from "./gridColumnHeaderClass.js";
 export * from "./api/index.js";
 export * from "./gridIconSlotsComponent.js";
-export type { GridSlotsComponent } from './gridSlotsComponent';
+export type { GridSlotsComponent } from "./gridSlotsComponent.js";
 export * from "./gridSlotsComponentsProps.js";
 export * from "./gridDensity.js";
 export * from "./logger.js";
 export type { MuiBaseEvent, MuiEvent } from '@mui/x-internals/types';
 export * from "./events/index.js";
-export type { GridSortCellParams, GridSortDirection, GridComparatorFn, GridSortModel } from './gridSortModel';
+export type { GridSortCellParams, GridSortDirection, GridComparatorFn, GridSortModel } from "./gridSortModel.js";
 export * from "./gridColumnGrouping.js";
-export type { GridDataSourceCache, GridUpdateRowParams } from './gridDataSource';
-export type { GridExportOptions, GridFileExportOptions, GridGetRowsToExportParams, GridCsvGetRowsToExportParams, GridPrintGetRowsToExportParams, GridCsvExportOptions, GridPrintExportOptions } from './gridExport';
+export type { GridDataSourceCache, GridUpdateRowParams } from "./gridDataSource.js";
+export type { GridExportOptions, GridFileExportOptions, GridGetRowsToExportParams, GridCsvGetRowsToExportParams, GridPrintGetRowsToExportParams, GridCsvExportOptions, GridPrintExportOptions } from "./gridExport.js";
 export * from "./gridFilterOperator.js";
 export type { PropsFromSlot } from '@mui/x-internals/slots';

package/esm/models/params/gridCellParams.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridCellMode } from "../gridCell.js";
 import { GridRowId, GridRowModel, GridTreeNode, GridTreeNodeWithRender, GridValidRowModel } from "../gridRows.js";
-import type { GridStateColDef } from '../colDef/gridColDef';
+import type { GridStateColDef } from "../colDef/gridColDef.js";
 import { GridEditCellProps } from "../gridEditRowModel.js";
 import { GridApiCommunity } from "../api/gridApiCommunity.js";
 /**

package/esm/models/params/gridColumnHeaderParams.d.ts

@@ -1,4 +1,4 @@
-import type { GridStateColDef } from '../colDef/gridColDef';
+import type { GridStateColDef } from "../colDef/gridColDef.js";
 import { GridValidRowModel } from "../gridRows.js";
 /**
  * Object passed as parameter in the column [[GridColDef]] header renderer.

package/esm/models/params/gridColumnOrderChangeParams.d.ts

@@ -1,4 +1,4 @@
-import type { GridColDef } from '../colDef/gridColDef';
+import type { GridColDef } from "../colDef/gridColDef.js";
 /**
  * Object passed as parameter of the column order change event.
  */

package/esm/models/params/gridColumnResizeParams.d.ts

@@ -1,4 +1,4 @@
-import type { GridStateColDef } from '../colDef/gridColDef';
+import type { GridStateColDef } from "../colDef/gridColDef.js";
 /**
  * Object passed as parameter of the column resize event.
  */

package/esm/models/params/gridRowParams.d.ts

@@ -1,5 +1,5 @@
 import { GridValidRowModel, GridRowEntry, GridRowId } from "../gridRows.js";
-import type { GridColDef } from '../colDef/gridColDef';
+import type { GridColDef } from "../colDef/gridColDef.js";
 /**
  * Object passed as parameter in the row callbacks.
  * @demos

package/esm/models/props/DataGridProps.d.ts

@@ -12,7 +12,7 @@ import { GridRowId, GridRowIdGetter, GridRowsProp, GridValidRowModel } from "../
 import { GridEventListener } from "../events/index.js";
 import { GridCallbackDetails, GridLocaleText } from "../api/index.js";
 import { GridApiCommunity } from "../api/gridApiCommunity.js";
-import type { GridColDef, GridListViewColDef } from '../colDef/gridColDef';
+import type { GridColDef, GridListViewColDef } from "../colDef/gridColDef.js";
 import { GridClasses } from "../../constants/gridClasses.js";
 import { GridRowHeightParams, GridRowHeightReturnValue, GridRowParams, GridRowSpacing, GridRowSpacingParams, GridRowClassNameParams } from "../params/index.js";
 import { GridCellParams } from "../params/gridCellParams.js";
@@ -24,10 +24,10 @@ import { GridColumnVisibilityModel } from "../../hooks/features/columns/gridColu
 import { GridCellModesModel, GridRowModesModel } from "../api/gridEditingApi.js";
 import { GridColumnGroupingModel } from "../gridColumnGrouping.js";
 import { GridPaginationMeta, GridPaginationModel } from "../gridPaginationProps.js";
-import type { GridAutosizeOptions } from '../../hooks/features/columnResize';
-import type { GridDataSource, GridDataSourceCache } from '../gridDataSource';
-import type { GridRowSelectionPropagation } from '../gridRowSelectionModel';
-import type { GridGetRowsError, GridUpdateRowError } from '../../hooks/features/dataSource/gridDataSourceError';
+import type { GridAutosizeOptions } from "../../hooks/features/columnResize/index.js";
+import type { GridDataSource, GridDataSourceCache } from "../gridDataSource.js";
+import type { GridRowSelectionPropagation } from "../gridRowSelectionModel.js";
+import type { GridGetRowsError, GridUpdateRowError } from "../../hooks/features/dataSource/gridDataSourceError.js";
 type CommonProps = {
   className?: string;
   style?: React.CSSProperties;

package/esm/utils/cleanupTracking/TimerBasedCleanupTracking.d.ts

@@ -1,6 +1,6 @@
 import { CleanupTracking, UnregisterToken, UnsubscribeFn } from "./CleanupTracking.js";
 export declare class TimerBasedCleanupTracking implements CleanupTracking {
-  timeouts?: Map<number, NodeJS.Timeout> | undefined;
+  timeouts?: Map<number, number> | undefined;
   cleanupTimeout: number;
   constructor(timeout?: number);
   register(object: any, unsubscribe: UnsubscribeFn, unregisterToken: UnregisterToken): void;

package/esm/utils/composeGridClasses.d.ts

@@ -1,3 +1,3 @@
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import type { DataGridProcessedProps } from '../models/props/DataGridProps';
+import type { DataGridProcessedProps } from "../models/props/DataGridProps.js";
 export declare function composeGridClasses(classes: DataGridProcessedProps['classes'], slots: Parameters<typeof composeClasses>[0]): Record<string, string>;

package/esm/utils/css/context.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLASSNAME_PREFIX = 'MuiDataGridVariables';
@@ -25,19 +26,21 @@ export function GridPortalWrapper({
 }
 export function GridCSSVariablesContext(props) {
   const config = useGridConfiguration();
+  const rootProps = useGridRootProps();
   const description = config.hooks.useCSSVariables();
   const context = React.useMemo(() => {
     const className = `${CLASSNAME_PREFIX}-${description.id}`;
     const cssString = `.${className}{${variablesToString(description.variables)}}`;
     const tag = /*#__PURE__*/_jsx("style", {
       href: `/${className}`,
+      nonce: rootProps.nonce,
       children: cssString
     });
     return {
       className,
       tag
     };
-  }, [description]);
+  }, [rootProps.nonce, description]);
   return /*#__PURE__*/_jsx(CSSVariablesContext.Provider, {
     value: context,
     children: props.children

package/esm/utils/domUtils.d.ts

@@ -1,6 +1,6 @@
 import { gridClasses } from "../constants/gridClasses.js";
-import type { GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
-import type { GridRowId } from '../models/gridRows';
+import type { GridPrivateApiCommunity } from "../models/api/gridApiCommunity.js";
+import type { GridRowId } from "../models/gridRows.js";
 export declare function isOverflown(element: Element): boolean;
 export declare function findParentElementFromClassName(elem: Element, className: string): Element | null;
 export declare function escapeOperandAttributeSelector(operand: string): string;

package/esm/utils/getGridLocalization.d.ts

@@ -1,4 +1,4 @@
-import type { GridLocaleText } from '../models/api/gridLocaleTextApi';
+import type { GridLocaleText } from "../models/api/gridLocaleTextApi.js";
 export interface Localization {
   components: {
     MuiDataGrid: {

package/esm/utils/getPublicApiRef.d.ts

@@ -1,3 +1,3 @@
 import { RefObject } from '@mui/x-internals/types';
-import type { GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
+import type { GridPrivateApiCommunity } from "../models/api/gridApiCommunity.js";
 export declare function getPublicApiRef<PrivateApi extends GridPrivateApiCommunity>(apiRef: RefObject<PrivateApi>): RefObject<ReturnType<PrivateApi["getPublicApi"]>>;

package/esm/utils/index.d.ts

@@ -1,2 +1,2 @@
-export type { OutputSelector } from './createSelector';
+export type { OutputSelector } from "./createSelector.js";
 export { GridPortalWrapper } from "./css/context.js";

package/hooks/core/gridPropsSelectors.d.ts

@@ -1,5 +1,5 @@
-import type { GridStateCommunity } from '../../models/gridStateCommunity';
-import type { GridRowId } from '../../models/gridRows';
+import type { GridStateCommunity } from "../../models/gridStateCommunity.js";
+import type { GridRowId } from "../../models/gridRows.js";
 /**
  * Get the row id for a given row
  * @param apiRef - The grid api reference

package/hooks/core/index.d.ts

@@ -1,2 +1,2 @@
-export type { GridPipeProcessingLookup } from './pipeProcessing';
+export type { GridPipeProcessingLookup } from "./pipeProcessing/index.js";
 export { gridRowIdSelector } from "./gridPropsSelectors.js";

package/hooks/core/useGridApiInitialization.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
-import type { GridApiCommon, GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+import type { GridApiCommon, GridPrivateApiCommon } from "../../models/api/gridApiCommon.js";
 export declare function unwrapPrivateAPI<PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(publicApi: Api): PrivateApi;
 export declare function useGridApiInitialization<PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(inputApiRef: RefObject<Api | null> | undefined, props: Pick<DataGridProcessedProps, 'signature'>): RefObject<PrivateApi>;

package/hooks/core/useGridInitialization.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from '@mui/x-internals/types';
-import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+import type { GridPrivateApiCommon } from "../../models/api/gridApiCommon.js";
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs

package/hooks/core/useGridProps.d.ts

@@ -1,7 +1,7 @@
 import type { RefObject } from '@mui/x-internals/types';
-import type { DataGridProps } from '../../models/props/DataGridProps';
-import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-import type { GridStateInitializer } from '../utils/useGridInitializeState';
+import type { DataGridProps } from "../../models/props/DataGridProps.js";
+import type { GridPrivateApiCommon } from "../../models/api/gridApiCommon.js";
+import type { GridStateInitializer } from "../utils/useGridInitializeState.js";
 type Props = Pick<DataGridProps, 'getRowId'>;
 export declare const propsStateInitializer: GridStateInitializer<Props>;
 export declare const useGridProps: <PrivateApi extends GridPrivateApiCommon>(apiRef: RefObject<PrivateApi>, props: Props) => void;

package/hooks/core/useGridRefs.d.ts

@@ -1,3 +1,3 @@
 import { RefObject } from '@mui/x-internals/types';
-import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+import type { GridPrivateApiCommon } from "../../models/api/gridApiCommon.js";
 export declare const useGridRefs: <PrivateApi extends GridPrivateApiCommon>(apiRef: RefObject<PrivateApi>) => void;

package/hooks/core/useGridStateInitialization.d.ts

@@ -1,3 +1,3 @@
 import { RefObject } from '@mui/x-internals/types';
-import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+import type { GridPrivateApiCommon } from "../../models/api/gridApiCommon.js";
 export declare const useGridStateInitialization: <PrivateApi extends GridPrivateApiCommon>(apiRef: RefObject<PrivateApi>) => void;

package/hooks/features/clipboard/useGridClipboard.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
-import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 /**
  * @requires useGridCsvExport (method)
  * @requires useGridSelection (method)

package/hooks/features/columnGrouping/gridColumnGroupsSelector.d.ts

@@ -7,6 +7,6 @@ export declare const gridColumnGroupingSelector: import("@mui/x-data-grid").Outp
 export declare const gridColumnGroupsUnwrappedModelSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, {
   [columnField: string]: string[];
 }>;
-export declare const gridColumnGroupsLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces").GridColumnGroupLookup>;
-export declare const gridColumnGroupsHeaderStructureSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces").GridGroupingStructure[][]>;
+export declare const gridColumnGroupsLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces.js").GridColumnGroupLookup>;
+export declare const gridColumnGroupsHeaderStructureSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, import("./gridColumnGroupsInterfaces.js").GridGroupingStructure[][]>;
 export declare const gridColumnGroupsHeaderMaxDepthSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridColumnsGroupingState, number>;

package/hooks/features/columnGrouping/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./gridColumnGroupsSelector.js";
-export type { GridColumnsGroupingState } from './gridColumnGroupsInterfaces';
+export type { GridColumnsGroupingState } from "./gridColumnGroupsInterfaces.js";

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
-import type { GridColumnsRenderContext } from '../../../models/params/gridScrollParams';
+import type { GridColumnsRenderContext } from "../../../models/params/gridScrollParams.js";
 import { GridStateColDef } from "../../../models/colDef/gridColDef.js";
 import { GridSortColumnLookup } from "../sorting/index.js";
 import { GridFilterActiveItemsLookup } from "../filter/index.js";

package/hooks/features/columnResize/gridColumnResizeApi.d.ts

@@ -1,4 +1,4 @@
-import type { GridColDef } from '../../../models/colDef/gridColDef';
+import type { GridColDef } from "../../../models/colDef/gridColDef.js";
 export declare const DEFAULT_GRID_AUTOSIZE_OPTIONS: {
   includeHeaders: boolean;
   includeOutliers: boolean;

package/hooks/features/columnResize/useGridColumnResize.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
-import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 export declare const columnResizeStateInitializer: GridStateInitializer;
 /**
  * @requires useGridColumns (method, event)

package/hooks/features/columns/gridColumnsInterfaces.d.ts

@@ -1,5 +1,5 @@
 import { GridColDef, GridStateColDef } from "../../../models/colDef/gridColDef.js";
-import type { GridColumnDimensionProperties } from './gridColumnsUtils';
+import type { GridColumnDimensionProperties } from "./gridColumnsUtils.js";
 export declare enum GridPinnedColumnPosition {
   LEFT = "left",
   RIGHT = "right",