@mui/x-data-grid 8.0.0-beta.2 → 8.0.0

package/modern/components/GridScrollArea.js

@@ -1,151 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import clsx from 'clsx';
-import useEventCallback from '@mui/utils/useEventCallback';
-import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/system';
-import { fastMemo } from '@mui/x-internals/fastMemo';
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { getDataGridUtilityClass, gridClasses } from "../constants/index.js";
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { useGridApiEventHandler } from "../hooks/utils/useGridApiEventHandler.js";
-import { useGridSelector } from "../hooks/utils/useGridSelector.js";
-import { gridDimensionsSelector, gridColumnsTotalWidthSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
-import { gridDensityFactorSelector } from "../hooks/features/density/densitySelector.js";
-import { useTimeout } from "../hooks/utils/useTimeout.js";
-import { getTotalHeaderHeight } from "../hooks/features/columns/gridColumnsUtils.js";
-import { createSelector } from "../utils/createSelector.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const CLIFF = 1;
-const SLOP = 1.5;
-const useUtilityClasses = ownerState => {
-  const {
-    scrollDirection,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['scrollArea', `scrollArea--${scrollDirection}`]
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-const GridScrollAreaRawRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'ScrollArea',
-  overridesResolver: (props, styles) => [{
-    [`&.${gridClasses['scrollArea--left']}`]: styles['scrollArea--left']
-  }, {
-    [`&.${gridClasses['scrollArea--right']}`]: styles['scrollArea--right']
-  }, styles.scrollArea]
-})(() => ({
-  position: 'absolute',
-  top: 0,
-  zIndex: 101,
-  width: 20,
-  bottom: 0,
-  [`&.${gridClasses['scrollArea--left']}`]: {
-    left: 0
-  },
-  [`&.${gridClasses['scrollArea--right']}`]: {
-    right: 0
-  }
-}));
-const offsetSelector = createSelector(gridDimensionsSelector, (dimensions, direction) => {
-  if (direction === 'left') {
-    return dimensions.leftPinnedWidth;
-  }
-  if (direction === 'right') {
-    return dimensions.rightPinnedWidth + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
-  }
-  return 0;
-});
-function GridScrollAreaWrapper(props) {
-  const apiRef = useGridApiContext();
-  const [dragging, setDragging] = React.useState(false);
-  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', () => setDragging(true));
-  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', () => setDragging(false));
-  if (!dragging) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(GridScrollAreaContent, _extends({}, props));
-}
-function GridScrollAreaContent(props) {
-  const {
-    scrollDirection,
-    scrollPosition
-  } = props;
-  const rootRef = React.useRef(null);
-  const apiRef = useGridApiContext();
-  const timeout = useTimeout();
-  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
-  const sideOffset = useGridSelector(apiRef, offsetSelector, scrollDirection);
-  const getCanScrollMore = () => {
-    const dimensions = gridDimensionsSelector(apiRef);
-    if (scrollDirection === 'left') {
-      // Only render if the user has not reached yet the start of the list
-      return scrollPosition.current.left > 0;
-    }
-    if (scrollDirection === 'right') {
-      // Only render if the user has not reached yet the end of the list
-      const maxScrollLeft = columnsTotalWidth - dimensions.viewportInnerSize.width;
-      return scrollPosition.current.left < maxScrollLeft;
-    }
-    return false;
-  };
-  const [canScrollMore, setCanScrollMore] = React.useState(getCanScrollMore);
-  const rootProps = useGridRootProps();
-  const ownerState = _extends({}, rootProps, {
-    scrollDirection
-  });
-  const classes = useUtilityClasses(ownerState);
-  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps);
-  const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
-  const style = {
-    height: headerHeight,
-    top: totalHeaderHeight - headerHeight
-  };
-  if (scrollDirection === 'left') {
-    style.left = sideOffset;
-  } else if (scrollDirection === 'right') {
-    style.right = sideOffset;
-  }
-  const handleScrolling = () => {
-    setCanScrollMore(getCanScrollMore);
-  };
-  const handleDragOver = useEventCallback(event => {
-    let offset;
-
-    // Prevents showing the forbidden cursor
-    event.preventDefault();
-    if (scrollDirection === 'left') {
-      offset = event.clientX - rootRef.current.getBoundingClientRect().right;
-    } else if (scrollDirection === 'right') {
-      offset = Math.max(1, event.clientX - rootRef.current.getBoundingClientRect().left);
-    } else {
-      throw new Error('MUI X: Wrong drag direction');
-    }
-    offset = (offset - CLIFF) * SLOP + CLIFF;
-
-    // Avoid freeze and inertia.
-    timeout.start(0, () => {
-      apiRef.current.scroll({
-        left: scrollPosition.current.left + offset,
-        top: scrollPosition.current.top
-      });
-    });
-  });
-  useGridApiEventHandler(apiRef, 'scrollPositionChange', handleScrolling);
-  if (!canScrollMore) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(GridScrollAreaRawRoot, {
-    ref: rootRef,
-    className: clsx(classes.root),
-    ownerState: ownerState,
-    onDragOver: handleDragOver,
-    style: style
-  });
-}
-export const GridScrollArea = fastMemo(GridScrollAreaWrapper);

package/modern/components/GridScrollbarFillerCell.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-declare function GridScrollbarFillerCell({
-  header,
-  borderTop,
-  borderBottom,
-  pinnedRight
-}: {
-  header?: boolean;
-  borderTop?: boolean;
-  borderBottom?: boolean;
-  pinnedRight?: boolean;
-}): React.JSX.Element;
-export { GridScrollbarFillerCell };

package/modern/components/GridScrollbarFillerCell.js

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import clsx from 'clsx';
-import { gridClasses } from "../constants/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const classes = {
-  root: gridClasses.scrollbarFiller,
-  header: gridClasses['scrollbarFiller--header'],
-  borderTop: gridClasses['scrollbarFiller--borderTop'],
-  borderBottom: gridClasses['scrollbarFiller--borderBottom'],
-  pinnedRight: gridClasses['scrollbarFiller--pinnedRight']
-};
-function GridScrollbarFillerCell({
-  header,
-  borderTop = true,
-  borderBottom,
-  pinnedRight
-}) {
-  return /*#__PURE__*/_jsx("div", {
-    role: "presentation",
-    className: clsx(classes.root, header && classes.header, borderTop && classes.borderTop, borderBottom && classes.borderBottom, pinnedRight && classes.pinnedRight)
-  });
-}
-export { GridScrollbarFillerCell };

package/modern/components/GridSelectedRowCount.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/system';
-interface SelectedRowCountProps {
-  selectedRowCount: number;
-}
-type GridSelectedRowCountProps = React.HTMLAttributes<HTMLDivElement> & SelectedRowCountProps & {
-  sx?: SxProps<Theme>;
-};
-declare const GridSelectedRowCount: React.ForwardRefExoticComponent<GridSelectedRowCountProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & SelectedRowCountProps & {
-  sx?: SxProps<Theme>;
-} & React.RefAttributes<HTMLDivElement>>;
-export { GridSelectedRowCount };

package/modern/components/GridSelectedRowCount.js

@@ -1,67 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "selectedRowCount"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/system';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { vars } from "../constants/cssVariables.js";
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { getDataGridUtilityClass } from "../constants/gridClasses.js";
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['selectedRowCount']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-const GridSelectedRowCountRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'SelectedRowCount',
-  overridesResolver: (props, styles) => styles.selectedRowCount
-})({
-  alignItems: 'center',
-  display: 'flex',
-  margin: vars.spacing(0, 2),
-  visibility: 'hidden',
-  width: 0,
-  height: 0,
-  [vars.breakpoints.up('sm')]: {
-    visibility: 'visible',
-    width: 'auto',
-    height: 'auto'
-  }
-});
-const GridSelectedRowCount = forwardRef(function GridSelectedRowCount(props, ref) {
-  const {
-      className,
-      selectedRowCount
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
-  const ownerState = useGridRootProps();
-  const classes = useUtilityClasses(ownerState);
-  const rowSelectedText = apiRef.current.getLocaleText('footerRowSelected')(selectedRowCount);
-  return /*#__PURE__*/_jsx(GridSelectedRowCountRoot, _extends({
-    className: clsx(classes.root, className),
-    ownerState: ownerState
-  }, other, {
-    ref: ref,
-    children: rowSelectedText
-  }));
-});
-process.env.NODE_ENV !== "production" ? GridSelectedRowCount.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  selectedRowCount: PropTypes.number.isRequired,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
-export { GridSelectedRowCount };

package/modern/components/GridShadowScrollArea.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-export interface GridShadowScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-/**
- * Adds scroll shadows above and below content in a scrollable container.
- */
-export declare function GridShadowScrollArea(props: GridShadowScrollAreaProps): React.JSX.Element;

package/modern/components/GridShadowScrollArea.js

@@ -1,82 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children"];
-import * as React from 'react';
-import { styled, keyframes } from '@mui/system';
-import { jsx as _jsx } from "react/jsx-runtime";
-const reveal = keyframes({
-  from: {
-    opacity: 0
-  },
-  to: {
-    opacity: 1
-  }
-});
-const detectScroll = keyframes({
-  'from, to': {
-    '--scrollable': '" "'
-  }
-});
-
-// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
-// in string templates. Do not convert these styles in JS object as it will break.
-const ShadowScrollArea = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'ShadowScrollArea'
-})`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  animation: ${detectScroll};
-  animation-timeline: --scroll-timeline;
-  animation-fill-mode: none;
-  box-sizing: border-box;
-  overflow: auto;
-  scroll-timeline: --scroll-timeline block;
-
-  &::before,
-  &::after {
-    content: '';
-    flex-shrink: 0;
-    display: block;
-    position: sticky;
-    left: 0;
-    width: 100%;
-    height: 4px;
-    animation: ${reveal} linear both;
-    animation-timeline: --scroll-timeline;
-
-    // Custom property toggle trick:
-    // - Detects if the element is scrollable
-    // - https://css-tricks.com/the-css-custom-property-toggle-trick/
-    --visibility-scrollable: var(--scrollable) visible;
-    --visibility-not-scrollable: hidden;
-    visibility: var(--visibility-scrollable, var(--visibility-not-scrollable));
-  }
-
-  &::before {
-    top: 0;
-    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0, transparent 100%);
-    animation-range: 0 4px;
-  }
-
-  &::after {
-    bottom: 0;
-    background: linear-gradient(to top, rgba(0, 0, 0, 0.05) 0, transparent 100%);
-    animation-direction: reverse;
-    animation-range: calc(100% - 4px) 100%;
-  }
-`;
-
-/**
- * Adds scroll shadows above and below content in a scrollable container.
- */
-export function GridShadowScrollArea(props) {
-  const {
-      children
-    } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(ShadowScrollArea, _extends({}, rest, {
-    children: children
-  }));
-}

package/modern/components/GridSkeletonLoadingOverlay.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { GridColDef } from "../models/index.js";
-type GridSkeletonLoadingOverlayInnerProps = React.HTMLAttributes<HTMLDivElement> & {
-  skeletonRowsCount: number;
-  showFirstRowBorder?: boolean;
-  visibleColumns?: Set<GridColDef['field']>;
-};
-export declare const GridSkeletonLoadingOverlayInner: React.ForwardRefExoticComponent<GridSkeletonLoadingOverlayInnerProps> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-  skeletonRowsCount: number;
-  showFirstRowBorder?: boolean;
-  visibleColumns?: Set<GridColDef["field"]>;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const GridSkeletonLoadingOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement>> | React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export {};

package/modern/components/GridSkeletonLoadingOverlay.js

@@ -1,199 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["skeletonRowsCount", "visibleColumns", "showFirstRowBorder"];
-import * as React from 'react';
-import clsx from 'clsx';
-import { styled } from '@mui/system';
-import useForkRef from '@mui/utils/useForkRef';
-import composeClasses from '@mui/utils/composeClasses';
-import { useRtl } from '@mui/system/RtlProvider';
-import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
-import { gridColumnPositionsSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from "../hooks/index.js";
-import { PinnedColumnPosition } from "../internals/constants.js";
-import { gridColumnsTotalWidthSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
-import { getDataGridUtilityClass, gridClasses } from "../constants/gridClasses.js";
-import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
-import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../utils/cellBorderUtils.js";
-import { escapeOperandAttributeSelector } from "../utils/domUtils.js";
-import { GridScrollbarFillerCell } from "./GridScrollbarFillerCell.js";
-import { rtlFlipSide } from "../utils/rtlFlipSide.js";
-import { attachPinnedStyle } from "../internals/utils/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const SkeletonOverlay = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'SkeletonLoadingOverlay',
-  overridesResolver: (props, styles) => styles.skeletonLoadingOverlay
-})({
-  minWidth: '100%',
-  width: 'max-content',
-  // prevents overflow: clip; cutting off the x axis
-  height: '100%',
-  overflow: 'clip' // y axis is hidden while the x axis is allowed to overflow
-});
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['skeletonLoadingOverlay']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-const getColIndex = el => parseInt(el.getAttribute('data-colindex'), 10);
-export const GridSkeletonLoadingOverlayInner = forwardRef(function GridSkeletonLoadingOverlayInner(props, forwardedRef) {
-  const rootProps = useGridRootProps();
-  const {
-    slots
-  } = rootProps;
-  const isRtl = useRtl();
-  const classes = useUtilityClasses({
-    classes: rootProps.classes
-  });
-  const ref = React.useRef(null);
-  const handleRef = useForkRef(ref, forwardedRef);
-  const apiRef = useGridApiContext();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const totalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
-  const positions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  const inViewportCount = React.useMemo(() => positions.filter(value => value <= totalWidth).length, [totalWidth, positions]);
-  const {
-      skeletonRowsCount,
-      visibleColumns,
-      showFirstRowBorder
-    } = props,
-    rest = _objectWithoutPropertiesLoose(props, _excluded);
-  const allVisibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  const columns = React.useMemo(() => allVisibleColumns.slice(0, inViewportCount), [allVisibleColumns, inViewportCount]);
-  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  const getPinnedPosition = React.useCallback(field => {
-    if (pinnedColumns.left.findIndex(col => col.field === field) !== -1) {
-      return PinnedColumnPosition.LEFT;
-    }
-    if (pinnedColumns.right.findIndex(col => col.field === field) !== -1) {
-      return PinnedColumnPosition.RIGHT;
-    }
-    return undefined;
-  }, [pinnedColumns.left, pinnedColumns.right]);
-  const children = React.useMemo(() => {
-    const array = [];
-    for (let i = 0; i < skeletonRowsCount; i += 1) {
-      const rowCells = [];
-      for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
-        const column = columns[colIndex];
-        const pinnedPosition = getPinnedPosition(column.field);
-        const isPinnedLeft = pinnedPosition === PinnedColumnPosition.LEFT;
-        const isPinnedRight = pinnedPosition === PinnedColumnPosition.RIGHT;
-        const pinnedSide = rtlFlipSide(pinnedPosition, isRtl);
-        const sectionLength = pinnedSide ? pinnedColumns[pinnedSide].length // pinned section
-        : columns.length - pinnedColumns.left.length - pinnedColumns.right.length; // middle section
-        const sectionIndex = pinnedSide ? pinnedColumns[pinnedSide].findIndex(col => col.field === column.field) // pinned section
-        : colIndex - pinnedColumns.left.length; // middle section
-        const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-        const pinnedStyle = attachPinnedStyle({}, isRtl, pinnedPosition, getPinnedCellOffset(pinnedPosition, column.computedWidth, colIndex, positions, dimensions.columnsTotalWidth, scrollbarWidth));
-        const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
-        const showRightBorder = shouldCellShowRightBorder(pinnedPosition, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
-        const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, sectionIndex);
-        const isLastColumn = colIndex === columns.length - 1;
-        const isFirstPinnedRight = isPinnedRight && sectionIndex === 0;
-        const hasFillerBefore = isFirstPinnedRight && gridHasFiller;
-        const hasFillerAfter = isLastColumn && !isFirstPinnedRight && gridHasFiller;
-        const expandedWidth = dimensions.viewportOuterSize.width - dimensions.columnsTotalWidth;
-        const emptyCellWidth = Math.max(0, expandedWidth);
-        const emptyCell = /*#__PURE__*/_jsx(slots.skeletonCell, {
-          width: emptyCellWidth,
-          empty: true
-        }, `skeleton-filler-column-${i}`);
-        const hasScrollbarFiller = isLastColumn && scrollbarWidth !== 0;
-        if (hasFillerBefore) {
-          rowCells.push(emptyCell);
-        }
-        rowCells.push(/*#__PURE__*/_jsx(slots.skeletonCell, {
-          field: column.field,
-          type: column.type,
-          align: column.align,
-          width: "var(--width)",
-          height: dimensions.rowHeight,
-          "data-colindex": colIndex,
-          empty: visibleColumns && !visibleColumns.has(column.field),
-          className: clsx(isPinnedLeft && gridClasses['cell--pinnedLeft'], isPinnedRight && gridClasses['cell--pinnedRight'], showRightBorder && gridClasses['cell--withRightBorder'], showLeftBorder && gridClasses['cell--withLeftBorder']),
-          style: _extends({
-            '--width': `${column.computedWidth}px`
-          }, pinnedStyle)
-        }, `skeleton-column-${i}-${column.field}`));
-        if (hasFillerAfter) {
-          rowCells.push(emptyCell);
-        }
-        if (hasScrollbarFiller) {
-          rowCells.push(/*#__PURE__*/_jsx(GridScrollbarFillerCell, {
-            pinnedRight: pinnedColumns.right.length > 0
-          }, `skeleton-scrollbar-filler-${i}`));
-        }
-      }
-      array.push(/*#__PURE__*/_jsx("div", {
-        className: clsx(gridClasses.row, gridClasses.rowSkeleton, i === 0 && !showFirstRowBorder && gridClasses['row--firstVisible']),
-        children: rowCells
-      }, `skeleton-row-${i}`));
-    }
-    return array;
-  }, [skeletonRowsCount, columns, getPinnedPosition, isRtl, pinnedColumns, dimensions.hasScrollY, dimensions.scrollbarSize, dimensions.columnsTotalWidth, dimensions.viewportOuterSize.width, dimensions.rowHeight, positions, rootProps.showCellVerticalBorder, slots, visibleColumns, showFirstRowBorder]);
-
-  // Sync the column resize of the overlay columns with the grid
-  const handleColumnResize = params => {
-    const {
-      colDef,
-      width
-    } = params;
-    const cells = ref.current?.querySelectorAll(`[data-field="${escapeOperandAttributeSelector(colDef.field)}"]`);
-    if (!cells) {
-      throw new Error('MUI X: Expected skeleton cells to be defined with `data-field` attribute.');
-    }
-    const resizedColIndex = columns.findIndex(col => col.field === colDef.field);
-    const pinnedPosition = getPinnedPosition(colDef.field);
-    const isPinnedLeft = pinnedPosition === PinnedColumnPosition.LEFT;
-    const isPinnedRight = pinnedPosition === PinnedColumnPosition.RIGHT;
-    const currentWidth = getComputedStyle(cells[0]).getPropertyValue('--width');
-    const delta = parseInt(currentWidth, 10) - width;
-    if (cells) {
-      cells.forEach(element => {
-        element.style.setProperty('--width', `${width}px`);
-      });
-    }
-    if (isPinnedLeft) {
-      const pinnedCells = ref.current?.querySelectorAll(`.${gridClasses['cell--pinnedLeft']}`);
-      pinnedCells?.forEach(element => {
-        const colIndex = getColIndex(element);
-        if (colIndex > resizedColIndex) {
-          element.style.left = `${parseInt(getComputedStyle(element).left, 10) - delta}px`;
-        }
-      });
-    }
-    if (isPinnedRight) {
-      const pinnedCells = ref.current?.querySelectorAll(`.${gridClasses['cell--pinnedRight']}`);
-      pinnedCells?.forEach(element => {
-        const colIndex = getColIndex(element);
-        if (colIndex < resizedColIndex) {
-          element.style.right = `${parseInt(getComputedStyle(element).right, 10) + delta}px`;
-        }
-      });
-    }
-  };
-  useGridApiEventHandler(apiRef, 'columnResize', handleColumnResize);
-  return /*#__PURE__*/_jsx(SkeletonOverlay, _extends({
-    className: classes.root
-  }, rest, {
-    ref: handleRef,
-    children: children
-  }));
-});
-export const GridSkeletonLoadingOverlay = forwardRef(function GridSkeletonLoadingOverlay(props, forwardedRef) {
-  const apiRef = useGridApiContext();
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const viewportHeight = dimensions?.viewportInnerSize.height ?? 0;
-  const skeletonRowsCount = Math.ceil(viewportHeight / dimensions.rowHeight);
-  return /*#__PURE__*/_jsx(GridSkeletonLoadingOverlayInner, _extends({}, props, {
-    skeletonRowsCount: skeletonRowsCount,
-    ref: forwardedRef
-  }));
-});

package/modern/components/base/GridBody.d.ts

@@ -1,2 +0,0 @@
-import { GridVirtualScroller } from "../virtualization/GridVirtualScroller.js";
-export { GridVirtualScroller as GridBody };

package/modern/components/base/GridBody.js

@@ -1,2 +0,0 @@
-import { GridVirtualScroller } from "../virtualization/GridVirtualScroller.js";
-export { GridVirtualScroller as GridBody };

package/modern/components/base/GridFooterPlaceholder.d.ts

@@ -1,2 +0,0 @@
-import * as React from 'react';
-export declare function GridFooterPlaceholder(): React.JSX.Element | null;

package/modern/components/base/GridFooterPlaceholder.js

@@ -1,11 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function GridFooterPlaceholder() {
-  const rootProps = useGridRootProps();
-  if (rootProps.hideFooter) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, rootProps.slotProps?.footer /* FIXME: typing error */));
-}

package/modern/components/base/GridOverlays.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { GridLoadingOverlayVariant } from "../GridLoadingOverlay.js";
-import { GridSlotsComponent } from "../../models/index.js";
-export type GridOverlayType = keyof Pick<GridSlotsComponent, 'noColumnsOverlay' | 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'> | null;
-interface GridOverlaysProps {
-  overlayType: GridOverlayType;
-  loadingOverlayVariant: GridLoadingOverlayVariant | null;
-}
-export declare function GridOverlayWrapper(props: React.PropsWithChildren<GridOverlaysProps>): React.JSX.Element;
-export declare namespace GridOverlayWrapper {
-  var propTypes: any;
-}
-export {};