@mui/x-data-grid 7.0.0-beta.5 → 7.0.0-beta.7

package/node/utils/domUtils.js

@@ -3,8 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.findGridCellElementsFromCol = findGridCellElementsFromCol;
+exports.findGridCells = findGridCells;
+exports.findGridElement = findGridElement;
+exports.findGridHeader = findGridHeader;
+exports.findGroupHeaderElementsFromField = findGroupHeaderElementsFromField;
+exports.findHeaderElementFromField = findHeaderElementFromField;
+exports.findLeftPinnedCellsAfterCol = findLeftPinnedCellsAfterCol;
+exports.findLeftPinnedHeadersAfterCol = findLeftPinnedHeadersAfterCol;
 exports.findParentElementFromClassName = findParentElementFromClassName;
+exports.findRightPinnedCellsBeforeCol = findRightPinnedCellsBeforeCol;
+exports.findRightPinnedHeadersBeforeCol = findRightPinnedHeadersBeforeCol;
 exports.getActiveElement = void 0;
+exports.getFieldFromHeaderElem = getFieldFromHeaderElem;
 exports.getGridCellElement = getGridCellElement;
 exports.getGridColumnHeaderElement = getGridColumnHeaderElement;
 exports.getGridRowElement = getGridRowElement;
@@ -59,4 +70,148 @@ function isEventTargetInPortal(event) {
     return true;
   }
   return false;
+}
+function getFieldFromHeaderElem(colCellEl) {
+  return colCellEl.getAttribute('data-field');
+}
+function findHeaderElementFromField(elem, field) {
+  return elem.querySelector(`[data-field="${field}"]`);
+}
+function findGroupHeaderElementsFromField(elem, field) {
+  return Array.from(elem.querySelectorAll(`[data-fields*="|-${field}-|"]`) ?? []);
+}
+function findGridCellElementsFromCol(col, api) {
+  const root = findParentElementFromClassName(col, _gridClasses.gridClasses.root);
+  if (!root) {
+    throw new Error('MUI X: The root element is not found.');
+  }
+  const ariaColIndex = col.getAttribute('aria-colindex');
+  if (!ariaColIndex) {
+    return [];
+  }
+  const colIndex = Number(ariaColIndex) - 1;
+  const cells = [];
+  if (!api.virtualScrollerRef?.current) {
+    return [];
+  }
+  queryRows(api).forEach(rowElement => {
+    const rowId = rowElement.getAttribute('data-id');
+    if (!rowId) {
+      return;
+    }
+    let columnIndex = colIndex;
+    const cellColSpanInfo = api.unstable_getCellColSpanInfo(rowId, colIndex);
+    if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
+      columnIndex = cellColSpanInfo.leftVisibleCellIndex;
+    }
+    const cell = rowElement.querySelector(`[data-colindex="${columnIndex}"]`);
+    if (cell) {
+      cells.push(cell);
+    }
+  });
+  return cells;
+}
+function findGridElement(api, klass) {
+  return api.rootElementRef.current.querySelector(`.${_gridClasses.gridClasses[klass]}`);
+}
+const findPinnedCells = ({
+  api,
+  colIndex,
+  position,
+  filterFn
+}) => {
+  if (colIndex === null) {
+    return [];
+  }
+  const cells = [];
+  queryRows(api).forEach(rowElement => {
+    const rowId = rowElement.getAttribute('data-id');
+    if (!rowId) {
+      return;
+    }
+    rowElement.querySelectorAll(`.${_gridClasses.gridClasses[position === 'left' ? 'cell--pinnedLeft' : 'cell--pinnedRight']}`).forEach(cell => {
+      const currentColIndex = parseCellColIndex(cell);
+      if (currentColIndex !== null && filterFn(currentColIndex)) {
+        cells.push(cell);
+      }
+    });
+  });
+  return cells;
+};
+function findLeftPinnedCellsAfterCol(api, col) {
+  const colIndex = parseCellColIndex(col);
+  return findPinnedCells({
+    api,
+    colIndex,
+    position: 'left',
+    filterFn: index => index > colIndex
+  });
+}
+function findRightPinnedCellsBeforeCol(api, col) {
+  const colIndex = parseCellColIndex(col);
+  return findPinnedCells({
+    api,
+    colIndex,
+    position: 'right',
+    filterFn: index => index < colIndex
+  });
+}
+const findPinnedHeaders = ({
+  api,
+  colIndex,
+  position,
+  filterFn
+}) => {
+  if (!api.columnHeadersContainerRef?.current) {
+    return [];
+  }
+  if (colIndex === null) {
+    return [];
+  }
+  const elements = [];
+  api.columnHeadersContainerRef.current.querySelectorAll(`.${_gridClasses.gridClasses[position === 'left' ? 'columnHeader--pinnedLeft' : 'columnHeader--pinnedRight']}`).forEach(element => {
+    const currentColIndex = parseCellColIndex(element);
+    if (currentColIndex !== null && filterFn(currentColIndex)) {
+      elements.push(element);
+    }
+  });
+  return elements;
+};
+function findLeftPinnedHeadersAfterCol(api, col) {
+  const colIndex = parseCellColIndex(col);
+  return findPinnedHeaders({
+    api,
+    position: 'left',
+    colIndex,
+    filterFn: index => index > colIndex
+  });
+}
+function findRightPinnedHeadersBeforeCol(api, col) {
+  const colIndex = parseCellColIndex(col);
+  return findPinnedHeaders({
+    api,
+    position: 'right',
+    colIndex,
+    filterFn: index => index < colIndex
+  });
+}
+function findGridHeader(api, field) {
+  const headers = api.columnHeadersContainerRef.current;
+  return headers.querySelector(`:scope > div > [data-field="${field}"][role="columnheader"]`);
+}
+function findGridCells(api, field) {
+  const container = api.virtualScrollerRef.current;
+  return Array.from(container.querySelectorAll(`:scope > div > div > div > [data-field="${field}"][role="gridcell"]`));
+}
+function queryRows(api) {
+  return api.virtualScrollerRef.current.querySelectorAll(
+  // Use > to ignore rows from nested data grids (e.g. in detail panel)
+  `:scope > div > div > .${_gridClasses.gridClasses.row}`);
+}
+function parseCellColIndex(col) {
+  const ariaColIndex = col.getAttribute('aria-colindex');
+  if (!ariaColIndex) {
+    return null;
+  }
+  return Number(ariaColIndex) - 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.0.0-beta.5",
+  "version": "7.0.0-beta.7",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -36,7 +36,7 @@
     "directory": "packages/x-data-grid"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.9",
+    "@babel/runtime": "^7.24.0",
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
     "clsx": "^2.1.0",

package/utils/cellBorderUtils.d.ts

@@ -0,0 +1,3 @@
+import { GridPinnedColumnPosition } from '../hooks/features/columns/gridColumnsInterfaces';
+export declare const shouldCellShowRightBorder: (pinnedPosition: GridPinnedColumnPosition | undefined, indexInSection: number, sectionLength: number, showCellVerticalBorderRootProp: boolean) => boolean;
+export declare const shouldCellShowLeftBorder: (pinnedPosition: GridPinnedColumnPosition | undefined, indexInSection: number) => boolean;

package/utils/cellBorderUtils.js

@@ -0,0 +1,8 @@
+import { GridPinnedColumnPosition } from '../hooks/features/columns/gridColumnsInterfaces';
+export const shouldCellShowRightBorder = (pinnedPosition, indexInSection, sectionLength, showCellVerticalBorderRootProp) => {
+  const isSectionLastCell = indexInSection === sectionLength - 1;
+  return showCellVerticalBorderRootProp && (pinnedPosition !== GridPinnedColumnPosition.LEFT ? !isSectionLastCell : true) || pinnedPosition === GridPinnedColumnPosition.LEFT && isSectionLastCell;
+};
+export const shouldCellShowLeftBorder = (pinnedPosition, indexInSection) => {
+  return pinnedPosition === GridPinnedColumnPosition.RIGHT && indexInSection === 0;
+};

package/utils/createSelector.d.ts

@@ -20,5 +20,4 @@ type SelectorArgs<Selectors extends ReadonlyArray<Selector<any>>, Result> = [sel
 type CreateSelectorFunction = <Selectors extends ReadonlyArray<Selector<any>>, Result>(...items: SelectorArgs<Selectors, Result>) => OutputSelector<StateFromSelectorList<Selectors>, Result>;
 export declare const createSelector: CreateSelectorFunction;
 export declare const createSelectorMemoized: CreateSelectorFunction;
-export declare const unstable_resetCreateSelectorCache: () => void;
 export {};

package/utils/createSelector.js

@@ -1,8 +1,6 @@
 import { createSelector as reselectCreateSelector } from 'reselect';
 import { buildWarning } from './warning';
-const cacheContainer = {
-  cache: new WeakMap()
-};
+const cache = new WeakMap();
 const missingInstanceIdWarning = buildWarning(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, e.g. `mySelector(apiRef)`, or pass the instance ID explicitly, e.g. `mySelector(state, apiRef.current.instanceId)`.']);
 function checkIsAPIRef(value) {
   return 'current' in value && 'instanceId' in value.current;
@@ -75,9 +73,7 @@ export const createSelector = (a, b, c, d, e, f, ...rest) => {
   return selector;
 };
 export const createSelectorMemoized = (...args) => {
-  const selector = (...selectorArgs) => {
-    var _cache$get, _cache$get3;
-    const [stateOrApiRef, instanceId] = selectorArgs;
+  const selector = (stateOrApiRef, instanceId) => {
     const isAPIRef = checkIsAPIRef(stateOrApiRef);
     const cacheKey = isAPIRef ? stateOrApiRef.current.instanceId : instanceId != null ? instanceId : DEFAULT_INSTANCE_ID;
     const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
@@ -86,30 +82,24 @@ export const createSelectorMemoized = (...args) => {
         missingInstanceIdWarning();
       }
     }
-    const {
-      cache
-    } = cacheContainer;
-    if (cache.get(cacheKey) && (_cache$get = cache.get(cacheKey)) != null && _cache$get.get(args)) {
-      var _cache$get2;
+    const cacheArgsInit = cache.get(cacheKey);
+    const cacheArgs = cacheArgsInit != null ? cacheArgsInit : new Map();
+    const cacheFn = cacheArgs == null ? void 0 : cacheArgs.get(args);
+    if (cacheArgs && cacheFn) {
       // We pass the cache key because the called selector might have as
       // dependency another selector created with this `createSelector`.
-      return (_cache$get2 = cache.get(cacheKey)) == null ? void 0 : _cache$get2.get(args)(state, cacheKey);
+      return cacheFn(state, cacheKey);
     }
-    const newSelector = reselectCreateSelector(...args);
-    if (!cache.get(cacheKey)) {
-      cache.set(cacheKey, new Map());
+    const fn = reselectCreateSelector(...args);
+    if (!cacheArgsInit) {
+      cache.set(cacheKey, cacheArgs);
     }
-    (_cache$get3 = cache.get(cacheKey)) == null || _cache$get3.set(args, newSelector);
-    return newSelector(state, cacheKey);
+    cacheArgs.set(args, fn);
+    return fn(state, cacheKey);
   };
 
   // We use this property to detect if the selector was created with createSelector
   // or it's only a simple function the receives the state and returns part of it.
   selector.acceptsApiRef = true;
   return selector;
-};
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const unstable_resetCreateSelectorCache = () => {
-  cacheContainer.cache = new WeakMap();
 };

package/utils/domUtils.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-import { GridRowId } from '../models/gridRows';
+import { gridClasses } from '../constants/gridClasses';
+import type { GridPrivateApiCommunity } from '../models/api/gridApiCommunity';
+import type { GridRowId } from '../models/gridRows';
 export declare function isOverflown(element: Element): boolean;
 export declare function findParentElementFromClassName(elem: Element, className: string): Element | null;
 export declare function getGridColumnHeaderElement(root: Element, field: string): HTMLDivElement | null;
@@ -10,3 +12,14 @@ export declare function getGridCellElement(root: Element, { id, field }: {
 }): HTMLDivElement | null;
 export declare const getActiveElement: (root?: Document | ShadowRoot) => Element | null;
 export declare function isEventTargetInPortal(event: React.SyntheticEvent): boolean;
+export declare function getFieldFromHeaderElem(colCellEl: Element): string;
+export declare function findHeaderElementFromField(elem: Element, field: string): HTMLDivElement;
+export declare function findGroupHeaderElementsFromField(elem: Element, field: string): Element[];
+export declare function findGridCellElementsFromCol(col: HTMLElement, api: GridPrivateApiCommunity): Element[];
+export declare function findGridElement(api: GridPrivateApiCommunity, klass: keyof typeof gridClasses): HTMLElement;
+export declare function findLeftPinnedCellsAfterCol(api: GridPrivateApiCommunity, col: HTMLElement): HTMLElement[];
+export declare function findRightPinnedCellsBeforeCol(api: GridPrivateApiCommunity, col: HTMLElement): HTMLElement[];
+export declare function findLeftPinnedHeadersAfterCol(api: GridPrivateApiCommunity, col: HTMLElement): HTMLElement[];
+export declare function findRightPinnedHeadersBeforeCol(api: GridPrivateApiCommunity, col: HTMLElement): HTMLElement[];
+export declare function findGridHeader(api: GridPrivateApiCommunity, field: string): Element | null;
+export declare function findGridCells(api: GridPrivateApiCommunity, field: string): Element[];

package/utils/domUtils.js

@@ -46,4 +46,151 @@ export function isEventTargetInPortal(event) {
     return true;
   }
   return false;
+}
+export function getFieldFromHeaderElem(colCellEl) {
+  return colCellEl.getAttribute('data-field');
+}
+export function findHeaderElementFromField(elem, field) {
+  return elem.querySelector(`[data-field="${field}"]`);
+}
+export function findGroupHeaderElementsFromField(elem, field) {
+  var _elem$querySelectorAl;
+  return Array.from((_elem$querySelectorAl = elem.querySelectorAll(`[data-fields*="|-${field}-|"]`)) != null ? _elem$querySelectorAl : []);
+}
+export function findGridCellElementsFromCol(col, api) {
+  var _api$virtualScrollerR;
+  const root = findParentElementFromClassName(col, gridClasses.root);
+  if (!root) {
+    throw new Error('MUI X: The root element is not found.');
+  }
+  const ariaColIndex = col.getAttribute('aria-colindex');
+  if (!ariaColIndex) {
+    return [];
+  }
+  const colIndex = Number(ariaColIndex) - 1;
+  const cells = [];
+  if (!((_api$virtualScrollerR = api.virtualScrollerRef) != null && _api$virtualScrollerR.current)) {
+    return [];
+  }
+  queryRows(api).forEach(rowElement => {
+    const rowId = rowElement.getAttribute('data-id');
+    if (!rowId) {
+      return;
+    }
+    let columnIndex = colIndex;
+    const cellColSpanInfo = api.unstable_getCellColSpanInfo(rowId, colIndex);
+    if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
+      columnIndex = cellColSpanInfo.leftVisibleCellIndex;
+    }
+    const cell = rowElement.querySelector(`[data-colindex="${columnIndex}"]`);
+    if (cell) {
+      cells.push(cell);
+    }
+  });
+  return cells;
+}
+export function findGridElement(api, klass) {
+  return api.rootElementRef.current.querySelector(`.${gridClasses[klass]}`);
+}
+const findPinnedCells = ({
+  api,
+  colIndex,
+  position,
+  filterFn
+}) => {
+  if (colIndex === null) {
+    return [];
+  }
+  const cells = [];
+  queryRows(api).forEach(rowElement => {
+    const rowId = rowElement.getAttribute('data-id');
+    if (!rowId) {
+      return;
+    }
+    rowElement.querySelectorAll(`.${gridClasses[position === 'left' ? 'cell--pinnedLeft' : 'cell--pinnedRight']}`).forEach(cell => {
+      const currentColIndex = parseCellColIndex(cell);
+      if (currentColIndex !== null && filterFn(currentColIndex)) {
+        cells.push(cell);
+      }
+    });
+  });
+  return cells;
+};
+export function findLeftPinnedCellsAfterCol(api, col) {
+  const colIndex = parseCellColIndex(col);
+  return findPinnedCells({
+    api,
+    colIndex,
+    position: 'left',
+    filterFn: index => index > colIndex
+  });
+}
+export function findRightPinnedCellsBeforeCol(api, col) {
+  const colIndex = parseCellColIndex(col);
+  return findPinnedCells({
+    api,
+    colIndex,
+    position: 'right',
+    filterFn: index => index < colIndex
+  });
+}
+const findPinnedHeaders = ({
+  api,
+  colIndex,
+  position,
+  filterFn
+}) => {
+  var _api$columnHeadersCon;
+  if (!((_api$columnHeadersCon = api.columnHeadersContainerRef) != null && _api$columnHeadersCon.current)) {
+    return [];
+  }
+  if (colIndex === null) {
+    return [];
+  }
+  const elements = [];
+  api.columnHeadersContainerRef.current.querySelectorAll(`.${gridClasses[position === 'left' ? 'columnHeader--pinnedLeft' : 'columnHeader--pinnedRight']}`).forEach(element => {
+    const currentColIndex = parseCellColIndex(element);
+    if (currentColIndex !== null && filterFn(currentColIndex)) {
+      elements.push(element);
+    }
+  });
+  return elements;
+};
+export function findLeftPinnedHeadersAfterCol(api, col) {
+  const colIndex = parseCellColIndex(col);
+  return findPinnedHeaders({
+    api,
+    position: 'left',
+    colIndex,
+    filterFn: index => index > colIndex
+  });
+}
+export function findRightPinnedHeadersBeforeCol(api, col) {
+  const colIndex = parseCellColIndex(col);
+  return findPinnedHeaders({
+    api,
+    position: 'right',
+    colIndex,
+    filterFn: index => index < colIndex
+  });
+}
+export function findGridHeader(api, field) {
+  const headers = api.columnHeadersContainerRef.current;
+  return headers.querySelector(`:scope > div > [data-field="${field}"][role="columnheader"]`);
+}
+export function findGridCells(api, field) {
+  const container = api.virtualScrollerRef.current;
+  return Array.from(container.querySelectorAll(`:scope > div > div > div > [data-field="${field}"][role="gridcell"]`));
+}
+function queryRows(api) {
+  return api.virtualScrollerRef.current.querySelectorAll(
+  // Use > to ignore rows from nested data grids (e.g. in detail panel)
+  `:scope > div > div > .${gridClasses.row}`);
+}
+function parseCellColIndex(col) {
+  const ariaColIndex = col.getAttribute('aria-colindex');
+  if (!ariaColIndex) {
+    return null;
+  }
+  return Number(ariaColIndex) - 1;
 }

package/components/columnHeaders/GridColumnHeadersInner.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/system';
-interface GridColumnHeadersInnerProps extends React.HTMLAttributes<HTMLDivElement> {
-    isDragging: boolean;
-    sx?: SxProps<Theme>;
-}
-export declare const GridColumnHeadersInner: React.ForwardRefExoticComponent<GridColumnHeadersInnerProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/components/columnHeaders/GridColumnHeadersInner.js

@@ -1,58 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["isDragging", "className"];
-import * as React from 'react';
-import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/system';
-import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    isDragging,
-    hasScrollX,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['columnHeadersInner', isDragging && 'columnHeaderDropZone', hasScrollX && 'columnHeadersInner--scrollable']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-const GridColumnHeadersInnerRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'columnHeadersInner',
-  overridesResolver: (props, styles) => [{
-    [`&.${gridClasses.columnHeaderDropZone}`]: styles.columnHeaderDropZone
-  }, styles.columnHeadersInner]
-})(() => ({
-  display: 'flex',
-  alignItems: 'flex-start',
-  flexDirection: 'column',
-  [`&.${gridClasses.columnHeaderDropZone} .${gridClasses.columnHeaderDraggableContainer}`]: {
-    cursor: 'move'
-  },
-  [`&.${gridClasses['columnHeadersInner--scrollable']} .${gridClasses.columnHeader}:last-child`]: {
-    borderRight: 'none'
-  }
-}));
-export const GridColumnHeadersInner = /*#__PURE__*/React.forwardRef(function GridColumnHeadersInner(props, ref) {
-  const {
-      isDragging,
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
-  const ownerState = _extends({}, rootProps, {
-    isDragging,
-    hasScrollX: apiRef.current.getRootDimensions().hasScrollX
-  });
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(GridColumnHeadersInnerRoot, _extends({
-    ref: ref,
-    className: clsx(className, classes.root),
-    ownerState: ownerState
-  }, other));
-});

package/modern/components/columnHeaders/GridColumnHeadersInner.js

@@ -1,58 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["isDragging", "className"];
-import * as React from 'react';
-import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { styled } from '@mui/system';
-import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    isDragging,
-    hasScrollX,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['columnHeadersInner', isDragging && 'columnHeaderDropZone', hasScrollX && 'columnHeadersInner--scrollable']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-const GridColumnHeadersInnerRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'columnHeadersInner',
-  overridesResolver: (props, styles) => [{
-    [`&.${gridClasses.columnHeaderDropZone}`]: styles.columnHeaderDropZone
-  }, styles.columnHeadersInner]
-})(() => ({
-  display: 'flex',
-  alignItems: 'flex-start',
-  flexDirection: 'column',
-  [`&.${gridClasses.columnHeaderDropZone} .${gridClasses.columnHeaderDraggableContainer}`]: {
-    cursor: 'move'
-  },
-  [`&.${gridClasses['columnHeadersInner--scrollable']} .${gridClasses.columnHeader}:last-child`]: {
-    borderRight: 'none'
-  }
-}));
-export const GridColumnHeadersInner = /*#__PURE__*/React.forwardRef(function GridColumnHeadersInner(props, ref) {
-  const {
-      isDragging,
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
-  const ownerState = _extends({}, rootProps, {
-    isDragging,
-    hasScrollX: apiRef.current.getRootDimensions().hasScrollX
-  });
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(GridColumnHeadersInnerRoot, _extends({
-    ref: ref,
-    className: clsx(className, classes.root),
-    ownerState: ownerState
-  }, other));
-});

package/node/components/columnHeaders/GridColumnHeadersInner.js

@@ -1,67 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GridColumnHeadersInner = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _utils = require("@mui/utils");
-var _system = require("@mui/system");
-var _gridClasses = require("../../constants/gridClasses");
-var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
-var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["isDragging", "className"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useUtilityClasses = ownerState => {
-  const {
-    isDragging,
-    hasScrollX,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['columnHeadersInner', isDragging && 'columnHeaderDropZone', hasScrollX && 'columnHeadersInner--scrollable']
-  };
-  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
-};
-const GridColumnHeadersInnerRoot = (0, _system.styled)('div', {
-  name: 'MuiDataGrid',
-  slot: 'columnHeadersInner',
-  overridesResolver: (props, styles) => [{
-    [`&.${_gridClasses.gridClasses.columnHeaderDropZone}`]: styles.columnHeaderDropZone
-  }, styles.columnHeadersInner]
-})(() => ({
-  display: 'flex',
-  alignItems: 'flex-start',
-  flexDirection: 'column',
-  [`&.${_gridClasses.gridClasses.columnHeaderDropZone} .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: {
-    cursor: 'move'
-  },
-  [`&.${_gridClasses.gridClasses['columnHeadersInner--scrollable']} .${_gridClasses.gridClasses.columnHeader}:last-child`]: {
-    borderRight: 'none'
-  }
-}));
-const GridColumnHeadersInner = exports.GridColumnHeadersInner = /*#__PURE__*/React.forwardRef(function GridColumnHeadersInner(props, ref) {
-  const {
-      isDragging,
-      className
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const ownerState = (0, _extends2.default)({}, rootProps, {
-    isDragging,
-    hasScrollX: apiRef.current.getRootDimensions().hasScrollX
-  });
-  const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersInnerRoot, (0, _extends2.default)({
-    ref: ref,
-    className: (0, _clsx.default)(className, classes.root),
-    ownerState: ownerState
-  }, other));
-});