@mui/x-data-grid 7.15.0 → 7.17.0

package/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', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', '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/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/constants/localeTextConstants.js

@@ -45,7 +45,9 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   filterPanelInputPlaceholder: 'Filter value',
   // Filter operators text
   filterOperatorContains: 'contains',
+  filterOperatorDoesNotContain: 'does not contain',
   filterOperatorEquals: 'equals',
+  filterOperatorDoesNotEqual: 'does not equal',
   filterOperatorStartsWith: 'starts with',
   filterOperatorEndsWith: 'ends with',
   filterOperatorIs: 'is',
@@ -65,7 +67,9 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Contains',
+  headerFilterOperatorDoesNotContain: 'Does not contain',
   headerFilterOperatorEquals: 'Equals',
+  headerFilterOperatorDoesNotEqual: 'Does not equal',
   headerFilterOperatorStartsWith: 'Starts with',
   headerFilterOperatorEndsWith: 'Ends with',
   headerFilterOperatorIs: 'Is',

package/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/context/index.js

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

package/hooks/core/pipeProcessing/index.js

@@ -1,4 +1,4 @@
-export * from './gridPipeProcessingApi';
-export * from './useGridPipeProcessing';
-export * from './useGridRegisterPipeProcessor';
-export * from './useGridRegisterPipeApplier';
+export * from "./gridPipeProcessingApi.js";
+export * from "./useGridPipeProcessing.js";
+export * from "./useGridRegisterPipeProcessor.js";
+export * from "./useGridRegisterPipeApplier.js";

package/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 /**
  * Implement the Pipeline Pattern
  *

package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useFirstRender } from '../../utils/useFirstRender';
+import { useFirstRender } from "../../utils/useFirstRender.js";
 export const useGridRegisterPipeApplier = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useFirstRender } from '../../utils/useFirstRender';
+import { useFirstRender } from "../../utils/useFirstRender.js";
 export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);

package/hooks/core/strategyProcessing/index.js

@@ -1,3 +1,3 @@
-export * from './gridStrategyProcessingApi';
-export * from './useGridRegisterStrategyProcessor';
-export * from './useGridStrategyProcessing';
+export * from "./gridStrategyProcessingApi.js";
+export * from "./useGridRegisterStrategyProcessor.js";
+export * from "./useGridStrategyProcessing.js";

package/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useFirstRender } from '../../utils/useFirstRender';
+import { useFirstRender } from "../../utils/useFirstRender.js";
 export const useGridRegisterStrategyProcessor = (apiRef, strategyName, group, processor) => {
   const registerPreProcessor = React.useCallback(() => {
     apiRef.current.registerStrategyProcessor(strategyName, group, processor);

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 export const GRID_DEFAULT_STRATEGY = 'none';
 export const GRID_STRATEGIES_PROCESSORS = {
   rowTreeCreation: 'rowTree',

package/hooks/core/useGridApiInitialization.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { EventManager } from '@mui/x-internals/EventManager';
-import { Store } from '../../utils/Store';
-import { useGridApiMethod } from '../utils/useGridApiMethod';
-import { GridSignature } from '../utils/useGridApiEventHandler';
+import { Store } from "../../utils/Store.js";
+import { useGridApiMethod } from "../utils/useGridApiMethod.js";
+import { GridSignature } from "../utils/useGridApiEventHandler.js";
 const SYMBOL_API_PRIVATE = Symbol('mui.api_private');
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;

package/hooks/core/useGridInitialization.js

@@ -1,11 +1,11 @@
-import { useGridRefs } from './useGridRefs';
-import { useGridIsRtl } from './useGridIsRtl';
-import { useGridLoggerFactory } from './useGridLoggerFactory';
-import { useGridApiInitialization } from './useGridApiInitialization';
-import { useGridLocaleText } from './useGridLocaleText';
-import { useGridPipeProcessing } from './pipeProcessing';
-import { useGridStrategyProcessing } from './strategyProcessing';
-import { useGridStateInitialization } from './useGridStateInitialization';
+import { useGridRefs } from "./useGridRefs.js";
+import { useGridIsRtl } from "./useGridIsRtl.js";
+import { useGridLoggerFactory } from "./useGridLoggerFactory.js";
+import { useGridApiInitialization } from "./useGridApiInitialization.js";
+import { useGridLocaleText } from "./useGridLocaleText.js";
+import { useGridPipeProcessing } from "./pipeProcessing/index.js";
+import { useGridStrategyProcessing } from "./strategyProcessing/index.js";
+import { useGridStateInitialization } from "./useGridStateInitialization.js";
 
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs

package/hooks/core/useGridLoggerFactory.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { localStorageAvailable } from '../../utils/utils';
-import { useGridApiMethod } from '../utils';
+import { localStorageAvailable } from "../../utils/utils.js";
+import { useGridApiMethod } from "../utils/index.js";
 const forceDebug = localStorageAvailable() && window.localStorage.getItem('DEBUG') != null;
 const noop = () => {};
 const noopLogger = {

package/hooks/core/useGridStateInitialization.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiMethod } from '../utils';
-import { isFunction } from '../../utils/utils';
+import { useGridApiMethod } from "../utils/index.js";
+import { isFunction } from "../../utils/utils.js";
 export const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
   const [, rawForceUpdate] = React.useState();

package/hooks/features/clipboard/useGridClipboard.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useGridApiOptionHandler, useGridNativeEventListener } from '../../utils';
-import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
-import { serializeCellValue } from '../export/serializers/csvSerializer';
+import { useGridApiOptionHandler, useGridNativeEventListener } from "../../utils/index.js";
+import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.js";
+import { serializeCellValue } from "../export/serializers/csvSerializer.js";
 function writeToClipboardPolyfill(data) {
   const span = document.createElement('span');
   span.style.whiteSpace = 'pre';

package/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -1,4 +1,4 @@
-import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
+import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
 /**
  * @category ColumnGrouping
  * @ignore - do not document.

package/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -1,5 +1,5 @@
-import { isLeaf } from '../../../models/gridColumnGrouping';
-import { isDeepEqual } from '../../../utils/utils';
+import { isLeaf } from "../../../models/gridColumnGrouping.js";
+import { isDeepEqual } from "../../../utils/utils.js";
 // This is the recurrence function that help writing `unwrapGroupingColumnModel()`
 const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplete) => {
   if (isLeaf(columnGroupNode)) {

package/hooks/features/columnGrouping/index.js

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

package/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["groupId", "children"];
 import * as React from 'react';
-import { isLeaf } from '../../../models/gridColumnGrouping';
-import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector } from './gridColumnGroupsSelector';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from './gridColumnGroupsUtils';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from '../columns';
+import { isLeaf } from "../../../models/gridColumnGrouping.js";
+import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector } from "./gridColumnGroupsSelector.js";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from "./gridColumnGroupsUtils.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/index.js";
 const createGroupLookup = columnGroupingModel => {
   let groupLookup = {};
   columnGroupingModel.forEach(node => {

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

@@ -52,7 +52,7 @@ export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) =>
         columnIndex: number;
         computedWidth: number;
     }) => React.CSSProperties | undefined;
-    getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderTop?: boolean) => React.JSX.Element;
+    getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => React.JSX.Element;
     getColumnHeadersRow: () => React.JSX.Element;
     getColumnsToRender: (params?: GetHeadersParams) => {
         renderedColumns: GridStateColDef[];

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -3,22 +3,21 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
-import { useGridSelector } from '../../utils';
-import { useGridRootProps } from '../../utils/useGridRootProps';
-import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
-import { gridDimensionsSelector } from '../dimensions';
-import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
-import { computeOffsetLeft } from '../virtualization/useGridVirtualScroller';
-import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
-import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
-import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
-import { gridColumnGroupsUnwrappedModelSelector } from '../columnGrouping/gridColumnGroupsSelector';
-import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
-import { getPinnedCellOffset } from '../../../internals/utils/getPinnedCellOffset';
-import { GridColumnHeaderSeparatorSides } from '../../../components/columnHeaders/GridColumnHeaderSeparator';
-import { gridClasses } from '../../../constants/gridClasses';
+import { useGridSelector } from "../../utils/index.js";
+import { useGridRootProps } from "../../utils/useGridRootProps.js";
+import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.js";
+import { gridDimensionsSelector } from "../dimensions/index.js";
+import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from "../virtualization/index.js";
+import { computeOffsetLeft } from "../virtualization/useGridVirtualScroller.js";
+import { GridColumnGroupHeader } from "../../../components/columnHeaders/GridColumnGroupHeader.js";
+import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnLookupSelector } from "../columns/index.js";
+import { gridColumnGroupsUnwrappedModelSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
+import { GridScrollbarFillerCell as ScrollbarFiller } from "../../../components/GridScrollbarFillerCell.js";
+import { getPinnedCellOffset } from "../../../internals/utils/getPinnedCellOffset.js";
+import { GridColumnHeaderSeparatorSides } from "../../../components/columnHeaders/GridColumnHeaderSeparator.js";
+import { gridClasses } from "../../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
@@ -53,7 +52,7 @@ export const useGridColumnHeaders = props => {
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
+  const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, isRtl, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
@@ -87,7 +86,7 @@ export const useGridColumnHeaders = props => {
       // TODO: `minFirstColumn` is not used anymore, could be refactored out.
       maxLastColumn = visibleColumns.length
     } = params || {};
-    const firstColumnToRender = !hasVirtualization ? 0 : currentContext.firstColumnIndex;
+    const firstColumnToRender = currentContext.firstColumnIndex;
     const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
@@ -96,7 +95,7 @@ export const useGridColumnHeaders = props => {
       lastColumnToRender
     };
   };
-  const getFillers = (params, children, leftOverflow, borderTop = false) => {
+  const getFillers = (params, children, leftOverflow, borderBottom = false) => {
     const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
     const isNotPinned = params?.position === undefined;
     const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
@@ -109,11 +108,12 @@ export const useGridColumnHeaders = props => {
         }
       }), children, isNotPinned && /*#__PURE__*/_jsx("div", {
         role: "presentation",
-        className: clsx(gridClasses.filler, borderTop && gridClasses['filler--borderTop'])
+        className: clsx(gridClasses.filler, borderBottom && gridClasses['filler--borderBottom'])
       }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
         header: true,
-        borderTop: borderTop,
-        pinnedRight: isPinnedRight
+        pinnedRight: isPinnedRight,
+        borderBottom: borderBottom,
+        borderTop: false
       })]
     });
   };
@@ -157,7 +157,10 @@ export const useGridColumnHeaders = props => {
         columnIndex,
         computedWidth: colDef.computedWidth
       });
-      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
+      const siblingWithBorderingSeparator = pinnedPosition === GridPinnedColumnPosition.RIGHT ? renderedColumns[i - 1] : renderedColumns[i + 1];
+      const isSiblingFocused = siblingWithBorderingSeparator ? columnHeaderFocus !== null && columnHeaderFocus.field === siblingWithBorderingSeparator.field : false;
+      const isLastUnpinned = columnIndex + 1 === columnPositions.length - pinnedColumns.right.length;
+      columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
         headerHeight: dimensions.headerHeight,
@@ -172,7 +175,9 @@ export const useGridColumnHeaders = props => {
         style: style,
         indexInSection: i,
         sectionLength: renderedColumns.length,
-        gridHasFiller: gridHasFiller
+        gridHasFiller: gridHasFiller,
+        isLastUnpinned: isLastUnpinned,
+        isSiblingFocused: isSiblingFocused
       }, other), colDef.field));
     }
     return getFillers(params, columns, 0);
@@ -182,7 +187,7 @@ export const useGridColumnHeaders = props => {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
       ownerState: rootProps,
-      className: pinnedRows.top.length === 0 ? gridClasses['row--borderBottom'] : undefined,
+      className: gridClasses['row--borderBottom'],
       children: [leftRenderContext && getColumnHeaders({
         position: GridPinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,
@@ -239,7 +244,7 @@ export const useGridColumnHeaders = props => {
     const firstVisibleColumnIndex = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
     const hiddenGroupColumns = visibleColumnGroupHeader[0].columnFields.slice(0, firstVisibleColumnIndex);
     const leftOverflow = hiddenGroupColumns.reduce((acc, field) => {
-      const column = apiRef.current.getColumn(field);
+      const column = columnsLookup[field];
       return acc + (column.computedWidth ?? 0);
     }, 0);
     let columnIndex = firstColumnToRender;
@@ -251,7 +256,7 @@ export const useGridColumnHeaders = props => {
       const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
       const headerInfo = {
         groupId,
-        width: columnFields.reduce((acc, field) => acc + apiRef.current.getColumn(field).computedWidth, 0),
+        width: columnFields.reduce((acc, field) => acc + columnsLookup[field].computedWidth, 0),
         fields: columnFields,
         colIndex: columnIndex,
         hasFocus,
@@ -295,7 +300,7 @@ export const useGridColumnHeaders = props => {
     }
     const headerRows = [];
     for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
-      headerRows.push( /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+      headerRows.push(/*#__PURE__*/_jsxs(GridColumnHeaderRow, {
         role: "row",
         "aria-rowindex": depth + 1,
         ownerState: rootProps,

package/hooks/features/columnMenu/index.js

@@ -1,2 +1,2 @@
-export * from './columnMenuInterfaces';
-export * from './columnMenuSelector';
+export * from "./columnMenuInterfaces.js";
+export * from "./columnMenuSelector.js";

package/hooks/features/columnMenu/useGridColumnMenu.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from '../../utils';
-import { gridColumnMenuSelector } from './columnMenuSelector';
-import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
+import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from "../../utils/index.js";
+import { gridColumnMenuSelector } from "./columnMenuSelector.js";
+import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
 export const columnMenuStateInitializer = state => _extends({}, state, {
   columnMenu: {
     open: false

package/hooks/features/columnMenu/useGridColumnMenuSlots.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["displayOrder"];
 import * as React from 'react';
 import Divider from '@mui/material/Divider';
-import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
+import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 const useGridColumnMenuSlots = props => {
   const apiRef = useGridPrivateApiContext();
   const {

package/hooks/features/columnResize/columnResizeSelector.js

@@ -1,3 +1,3 @@
-import { createSelector } from '../../../utils/createSelector';
+import { createSelector } from "../../../utils/createSelector.js";
 export const gridColumnResizeSelector = state => state.columnResize;
 export const gridResizingColumnFieldSelector = createSelector(gridColumnResizeSelector, columnResize => columnResize.resizingColumnField);

package/hooks/features/columnResize/index.js

@@ -1,3 +1,3 @@
-export * from './columnResizeSelector';
-export * from './columnResizeState';
-export * from './gridColumnResizeApi';
+export * from "./columnResizeSelector.js";
+export * from "./columnResizeState.js";
+export * from "./gridColumnResizeApi.js";

package/hooks/features/columnResize/useGridColumnResize.js

@@ -3,16 +3,16 @@ import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { useRtl } from '@mui/system/RtlProvider';
-import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from '../../../utils/domUtils';
-import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from './gridColumnResizeApi';
-import { gridClasses } from '../../../constants/gridClasses';
-import { useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from '../../utils';
-import { gridVirtualizationColumnEnabledSelector } from '../virtualization';
-import { createControllablePromise } from '../../../utils/createControllablePromise';
-import { clamp } from '../../../utils/utils';
-import { useTimeout } from '../../utils/useTimeout';
-import { GridPinnedColumnPosition } from '../columns/gridColumnsInterfaces';
-import { gridColumnsStateSelector } from '../columns';
+import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from "../../../utils/domUtils.js";
+import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from "./gridColumnResizeApi.js";
+import { gridClasses } from "../../../constants/gridClasses.js";
+import { useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from "../../utils/index.js";
+import { gridVirtualizationColumnEnabledSelector } from "../virtualization/index.js";
+import { createControllablePromise } from "../../../utils/createControllablePromise.js";
+import { clamp } from "../../../utils/utils.js";
+import { useTimeout } from "../../utils/useTimeout.js";
+import { GridPinnedColumnPosition } from "../columns/gridColumnsInterfaces.js";
+import { gridColumnsStateSelector } from "../columns/index.js";
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -199,13 +199,9 @@ export const useGridColumnResize = (apiRef, props) => {
     refs.colDef.width = newWidth;
     refs.colDef.flex = 0;
     refs.columnHeaderElement.style.width = `${newWidth}px`;
-    refs.columnHeaderElement.style.minWidth = `${newWidth}px`;
-    refs.columnHeaderElement.style.maxWidth = `${newWidth}px`;
     const headerFilterElement = refs.headerFilterElement;
     if (headerFilterElement) {
       headerFilterElement.style.width = `${newWidth}px`;
-      headerFilterElement.style.minWidth = `${newWidth}px`;
-      headerFilterElement.style.maxWidth = `${newWidth}px`;
     }
     refs.groupHeaderElements.forEach(element => {
       const div = element;
@@ -218,8 +214,6 @@ export const useGridColumnResize = (apiRef, props) => {
         finalWidth = `${div.offsetWidth + widthDiff}px`;
       }
       div.style.width = finalWidth;
-      div.style.minWidth = finalWidth;
-      div.style.maxWidth = finalWidth;
     });
     refs.cellElements.forEach(element => {
       const div = element;
@@ -290,8 +284,6 @@ export const useGridColumnResize = (apiRef, props) => {
         }, 0);
         const finalWidth = `${newWidth}px`;
         div.style.width = finalWidth;
-        div.style.minWidth = finalWidth;
-        div.style.maxWidth = finalWidth;
       });
     }
     stopResizeEventTimeout.start(0, () => {

package/hooks/features/columns/gridColumnsSelector.js

@@ -1,6 +1,6 @@
-import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
-import { EMPTY_PINNED_COLUMN_FIELDS } from './gridColumnsInterfaces';
-import { gridIsRtlSelector } from '../../core/gridCoreSelector';
+import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+import { EMPTY_PINNED_COLUMN_FIELDS } from "./gridColumnsInterfaces.js";
+import { gridIsRtlSelector } from "../../core/gridCoreSelector.js";
 
 /**
  * Get the columns state

package/hooks/features/columns/gridColumnsUtils.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF, getGridDefaultColumnTypes } from '../../../colDef';
-import { gridColumnsStateSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
-import { clamp } from '../../../utils/utils';
-import { gridDensityFactorSelector } from '../density/densitySelector';
-import { gridHeaderFilteringEnabledSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
-import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
+import { DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF, getGridDefaultColumnTypes } from "../../../colDef/index.js";
+import { gridColumnsStateSelector, gridColumnVisibilityModelSelector } from "./gridColumnsSelector.js";
+import { clamp } from "../../../utils/utils.js";
+import { gridDensityFactorSelector } from "../density/densitySelector.js";
+import { gridHeaderFilteringEnabledSelector } from "../headerFiltering/gridHeaderFilteringSelectors.js";
+import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
 export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
 const COLUMN_TYPES = getGridDefaultColumnTypes();
 

package/hooks/features/columns/index.js

@@ -1,2 +1,2 @@
-export * from './gridColumnsSelector';
-export * from './gridColumnsInterfaces';
+export * from "./gridColumnsSelector.js";
+export * from "./gridColumnsInterfaces.js";

package/hooks/features/columns/useGridColumnSpanning.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)

package/hooks/features/columns/useGridColumns.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsStateSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
-import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from '../../core/pipeProcessing';
-import { EMPTY_PINNED_COLUMN_FIELDS } from './gridColumnsInterfaces';
-import { hydrateColumnsWidth, createColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
-import { GridPreferencePanelsValue } from '../preferencesPanel';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsStateSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from "./gridColumnsSelector.js";
+import { GridSignature, useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from "../../core/pipeProcessing/index.js";
+import { EMPTY_PINNED_COLUMN_FIELDS } from "./gridColumnsInterfaces.js";
+import { hydrateColumnsWidth, createColumnsState, COLUMNS_DIMENSION_PROPERTIES } from "./gridColumnsUtils.js";
+import { GridPreferencePanelsValue } from "../preferencesPanel/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const columnsStateInitializer = (state, props, apiRef) => {
   const columnsState = createColumnsState({

package/hooks/features/density/densitySelector.js

@@ -1,4 +1,4 @@
-import { createSelector } from '../../../utils/createSelector';
+import { createSelector } from "../../../utils/createSelector.js";
 export const COMPACT_DENSITY_FACTOR = 0.7;
 export const COMFORTABLE_DENSITY_FACTOR = 1.3;
 const DENSITY_FACTORS = {

package/hooks/features/density/index.js

@@ -1,2 +1,2 @@
-export * from './densityState';
-export * from './densitySelector';
+export * from "./densityState.js";
+export * from "./densitySelector.js";