@mui/x-data-grid 8.0.0-alpha.9 → 8.0.0-beta.0

package/esm/components/virtualization/GridVirtualScrollbar.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+type Position = 'vertical' | 'horizontal';
+type GridVirtualScrollbarProps = {
+  position: Position;
+  scrollPosition: React.RefObject<{
+    left: number;
+    top: number;
+  }>;
+};
+declare const GridVirtualScrollbar: React.ForwardRefExoticComponent<GridVirtualScrollbarProps> | React.ForwardRefExoticComponent<GridVirtualScrollbarProps & React.RefAttributes<HTMLDivElement>>;
+export { GridVirtualScrollbar };

package/esm/components/virtualization/GridVirtualScrollbar.js

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useOnMount } from "../../hooks/utils/useOnMount.js";
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
+import { gridDimensionsSelector, useGridSelector } from "../../hooks/index.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = (ownerState, position) => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['scrollbar', `scrollbar--${position}`],
+    content: ['scrollbarContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const Scrollbar = styled('div')({
+  position: 'absolute',
+  display: 'inline-block',
+  zIndex: 60,
+  '&:hover': {
+    zIndex: 70
+  },
+  // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
+  // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
+  // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
+  // don't have a method to find the required size for scrollbars on those platforms.
+  '--size': 'calc(max(var(--DataGrid-scrollbarSize), 14px))'
+});
+const ScrollbarVertical = styled(Scrollbar)({
+  width: 'var(--size)',
+  height: 'calc(var(--DataGrid-hasScrollY) * (100% - var(--DataGrid-topContainerHeight) - var(--DataGrid-bottomContainerHeight) - var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize)))',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  // Disable focus-visible style, it's a scrollbar.
+  outline: 0,
+  '& > div': {
+    width: 'var(--size)'
+  },
+  top: 'var(--DataGrid-topContainerHeight)',
+  right: '0px'
+});
+const ScrollbarHorizontal = styled(Scrollbar)({
+  width: '100%',
+  height: 'var(--size)',
+  overflowY: 'hidden',
+  overflowX: 'auto',
+  // Disable focus-visible style, it's a scrollbar.
+  outline: 0,
+  '& > div': {
+    height: 'var(--size)'
+  },
+  bottom: '0px'
+});
+const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref) {
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const isLocked = React.useRef(false);
+  const lastPosition = React.useRef(0);
+  const scrollbarRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const classes = useUtilityClasses(rootProps, props.position);
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
+  const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
+  const propertyScrollPosition = props.position === 'vertical' ? 'top' : 'left';
+  const hasScroll = props.position === 'vertical' ? dimensions.hasScrollX : dimensions.hasScrollY;
+  const contentSize = dimensions.minimumSize[propertyDimension] + (hasScroll ? dimensions.scrollbarSize : 0);
+  const scrollbarSize = props.position === 'vertical' ? dimensions.viewportInnerSize.height : dimensions.viewportOuterSize.width;
+  const scrollbarInnerSize = scrollbarSize * (contentSize / dimensions.viewportOuterSize[propertyDimension]);
+  const onScrollerScroll = useEventCallback(() => {
+    const scrollbar = scrollbarRef.current;
+    const scrollPosition = props.scrollPosition.current;
+    if (!scrollbar) {
+      return;
+    }
+    if (scrollPosition[propertyScrollPosition] === lastPosition.current) {
+      return;
+    }
+    lastPosition.current = scrollPosition[propertyScrollPosition];
+    if (isLocked.current) {
+      isLocked.current = false;
+      return;
+    }
+    isLocked.current = true;
+    const value = scrollPosition[propertyScrollPosition] / contentSize;
+    scrollbar[propertyScroll] = value * scrollbarInnerSize;
+  });
+  const onScrollbarScroll = useEventCallback(() => {
+    const scroller = apiRef.current.virtualScrollerRef.current;
+    const scrollbar = scrollbarRef.current;
+    if (!scrollbar) {
+      return;
+    }
+    if (isLocked.current) {
+      isLocked.current = false;
+      return;
+    }
+    isLocked.current = true;
+    const value = scrollbar[propertyScroll] / scrollbarInnerSize;
+    scroller[propertyScroll] = value * contentSize;
+  });
+  useOnMount(() => {
+    const scroller = apiRef.current.virtualScrollerRef.current;
+    const scrollbar = scrollbarRef.current;
+    const options = {
+      passive: true
+    };
+    scroller.addEventListener('scroll', onScrollerScroll, options);
+    scrollbar.addEventListener('scroll', onScrollbarScroll, options);
+    return () => {
+      scroller.removeEventListener('scroll', onScrollerScroll, options);
+      scrollbar.removeEventListener('scroll', onScrollbarScroll, options);
+    };
+  });
+  React.useEffect(() => {
+    const content = contentRef.current;
+    content.style.setProperty(propertyDimension, `${scrollbarInnerSize}px`);
+  }, [scrollbarInnerSize, propertyDimension]);
+  const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
+  return /*#__PURE__*/_jsx(Container, {
+    ref: useForkRef(ref, scrollbarRef),
+    className: classes.root,
+    style: props.position === 'vertical' && rootProps.unstable_listView ? {
+      height: '100%',
+      top: 0
+    } : undefined,
+    tabIndex: -1,
+    "aria-hidden": "true"
+    // tabIndex does not prevent focus with a mouse click, throwing a console error
+    // https://github.com/mui/mui-x/issues/16706
+    ,
+    onFocus: event => {
+      event.target.blur();
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      ref: contentRef,
+      className: classes.content
+    })
+  });
+});
+export { GridVirtualScrollbar };

package/esm/components/virtualization/GridVirtualScroller.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface GridVirtualScrollerProps {
+  children?: React.ReactNode;
+}
+declare function GridVirtualScroller(props: GridVirtualScrollerProps): React.JSX.Element;
+export { GridVirtualScroller };

package/esm/components/virtualization/GridVirtualScroller.js

@@ -0,0 +1,130 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled } from '@mui/system';
+import composeClasses from '@mui/utils/composeClasses';
+import { gridHasBottomFillerSelector, gridHasScrollXSelector, gridHasScrollYSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
+import { GridScrollArea } from "../GridScrollArea.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridVirtualScroller } from "../../hooks/features/virtualization/useGridVirtualScroller.js";
+import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.js";
+import { GridHeaders } from "../GridHeaders.js";
+import { GridMainContainer as Container } from "./GridMainContainer.js";
+import { GridTopContainer as TopContainer } from "./GridTopContainer.js";
+import { GridVirtualScrollerContent as Content } from "./GridVirtualScrollerContent.js";
+import { GridVirtualScrollerFiller as SpaceFiller } from "./GridVirtualScrollerFiller.js";
+import { GridVirtualScrollerRenderZone as RenderZone } from "./GridVirtualScrollerRenderZone.js";
+import { GridVirtualScrollbar as Scrollbar } from "./GridVirtualScrollbar.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    hasScrollX,
+    hasPinnedRight,
+    loadingOverlayVariant,
+    overlayType
+  } = ownerState;
+  const hideContent = loadingOverlayVariant === 'skeleton' || overlayType === 'noColumnsOverlay';
+  const slots = {
+    root: ['main', hasPinnedRight && 'main--hasPinnedRight', hideContent && 'main--hiddenContent'],
+    scroller: ['virtualScroller', hasScrollX && 'virtualScroller--hasScrollX']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const Scroller = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'VirtualScroller',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScroller, ownerState.hasScrollX && styles['virtualScroller--hasScrollX']];
+  }
+})({
+  position: 'relative',
+  height: '100%',
+  flexGrow: 1,
+  overflow: 'scroll',
+  scrollbarWidth: 'none' /* Firefox */,
+  display: 'flex',
+  flexDirection: 'column',
+  '&::-webkit-scrollbar': {
+    display: 'none' /* Safari and Chrome */
+  },
+  '@media print': {
+    overflow: 'hidden'
+  },
+  // See https://github.com/mui/mui-x/issues/10547
+  zIndex: 0
+});
+const hasPinnedRightSelector = apiRef => apiRef.current.state.dimensions.rightPinnedWidth > 0;
+function GridVirtualScroller(props) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const hasScrollY = useGridSelector(apiRef, gridHasScrollYSelector);
+  const hasScrollX = useGridSelector(apiRef, gridHasScrollXSelector);
+  const hasPinnedRight = useGridSelector(apiRef, hasPinnedRightSelector);
+  const hasBottomFiller = useGridSelector(apiRef, gridHasBottomFillerSelector);
+  const {
+    getOverlay,
+    overlaysProps
+  } = useGridOverlays();
+  const ownerState = _extends({
+    classes: rootProps.classes,
+    hasScrollX,
+    hasPinnedRight
+  }, overlaysProps);
+  const classes = useUtilityClasses(ownerState);
+  const virtualScroller = useGridVirtualScroller();
+  const {
+    getContainerProps,
+    getScrollerProps,
+    getContentProps,
+    getRenderZoneProps,
+    getScrollbarVerticalProps,
+    getScrollbarHorizontalProps,
+    getRows,
+    getScrollAreaProps
+  } = virtualScroller;
+  const rows = getRows();
+  return /*#__PURE__*/_jsxs(Container, _extends({
+    className: classes.root
+  }, getContainerProps(), {
+    ownerState: ownerState,
+    children: [/*#__PURE__*/_jsx(GridScrollArea, _extends({
+      scrollDirection: "left"
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
+      scrollDirection: "right"
+    }, getScrollAreaProps())), /*#__PURE__*/_jsxs(Scroller, _extends({
+      className: classes.scroller
+    }, getScrollerProps(), {
+      ownerState: ownerState,
+      children: [/*#__PURE__*/_jsxs(TopContainer, {
+        children: [!rootProps.unstable_listView && /*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
+          position: "top",
+          virtualScroller: virtualScroller
+        })]
+      }), getOverlay(), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
+        children: /*#__PURE__*/_jsxs(RenderZone, _extends({}, getRenderZoneProps(), {
+          children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
+            virtualScroller: virtualScroller
+          })]
+        }))
+      })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
+        rowsLength: rows.length
+      }), /*#__PURE__*/_jsx(rootProps.slots.bottomContainer, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
+          position: "bottom",
+          virtualScroller: virtualScroller
+        })
+      })]
+    })), hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
+      position: "horizontal"
+    }, getScrollbarHorizontalProps())), hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
+      position: "vertical"
+    }, getScrollbarVerticalProps())), props.children]
+  }));
+}
+export { GridVirtualScroller };

package/esm/components/virtualization/GridVirtualScrollerContent.d.ts

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

package/esm/components/virtualization/GridVirtualScrollerContent.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = (props, overflowedContent) => {
+  const {
+    classes
+  } = props;
+  const slots = {
+    root: ['virtualScrollerContent', overflowedContent && 'virtualScrollerContent--overflowed']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const VirtualScrollerContentRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'VirtualScrollerContent',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState
+    } = props;
+    return [styles.virtualScrollerContent, ownerState.overflowedContent && styles['virtualScrollerContent--overflowed']];
+  }
+})({});
+const GridVirtualScrollerContent = forwardRef(function GridVirtualScrollerContent(props, ref) {
+  const rootProps = useGridRootProps();
+  const overflowedContent = !rootProps.autoHeight && props.style?.minHeight === 'auto';
+  const classes = useUtilityClasses(rootProps, overflowedContent);
+  const ownerState = {
+    classes: rootProps.classes,
+    overflowedContent
+  };
+  return /*#__PURE__*/_jsx(VirtualScrollerContentRoot, _extends({}, props, {
+    ownerState: ownerState,
+    className: clsx(classes.root, props.className),
+    ref: ref
+  }));
+});
+export { GridVirtualScrollerContent };

package/esm/components/virtualization/GridVirtualScrollerFiller.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+type Props = {
+  /** The number of rows */
+  rowsLength: number;
+};
+declare function GridVirtualScrollerFiller({
+  rowsLength
+}: Props): React.JSX.Element | null;
+declare const Memoized: typeof GridVirtualScrollerFiller;
+export { Memoized as GridVirtualScrollerFiller };

package/esm/components/virtualization/GridVirtualScrollerFiller.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { fastMemo } from '@mui/x-internals/fastMemo';
+import { vars } from "../../constants/cssVariables.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
+import { gridClasses } from "../../constants/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Filler = styled('div')({
+  display: 'flex',
+  flexDirection: 'row',
+  width: 'var(--DataGrid-rowWidth)',
+  boxSizing: 'border-box'
+});
+const Pinned = styled('div')({
+  position: 'sticky',
+  height: '100%',
+  boxSizing: 'border-box',
+  borderTop: '1px solid var(--rowBorderColor)',
+  backgroundColor: vars.cell.background.pinned
+});
+const PinnedLeft = styled(Pinned)({
+  left: 0,
+  borderRight: '1px solid var(--rowBorderColor)'
+});
+const PinnedRight = styled(Pinned)({
+  right: 0,
+  borderLeft: '1px solid var(--rowBorderColor)'
+});
+const Main = styled('div')({
+  flexGrow: 1,
+  borderTop: '1px solid var(--rowBorderColor)'
+});
+function GridVirtualScrollerFiller({
+  rowsLength
+}) {
+  const apiRef = useGridApiContext();
+  const {
+    viewportOuterSize,
+    minimumSize,
+    hasScrollX,
+    hasScrollY,
+    scrollbarSize,
+    leftPinnedWidth,
+    rightPinnedWidth
+  } = useGridSelector(apiRef, gridDimensionsSelector);
+  const height = hasScrollX ? scrollbarSize : 0;
+  const needsLastRowBorder = viewportOuterSize.height - minimumSize.height > 0;
+  if (height === 0 && !needsLastRowBorder) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(Filler, {
+    className: gridClasses.filler,
+    role: "presentation",
+    style: {
+      height,
+      '--rowBorderColor': rowsLength === 0 ? 'transparent' : 'var(--DataGrid-rowBorderColor)'
+    },
+    children: [leftPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedLeft, {
+      className: gridClasses['filler--pinnedLeft'],
+      style: {
+        width: leftPinnedWidth
+      }
+    }), /*#__PURE__*/_jsx(Main, {}), rightPinnedWidth > 0 && /*#__PURE__*/_jsx(PinnedRight, {
+      className: gridClasses['filler--pinnedRight'],
+      style: {
+        width: rightPinnedWidth + (hasScrollY ? scrollbarSize : 0)
+      }
+    })]
+  });
+}
+const Memoized = fastMemo(GridVirtualScrollerFiller);
+export { Memoized as GridVirtualScrollerFiller };

package/esm/components/virtualization/GridVirtualScrollerRenderZone.d.ts

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

package/esm/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import composeClasses from '@mui/utils/composeClasses';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridRowsMetaSelector } from "../../hooks/features/rows/index.js";
+import { gridRenderContextSelector } from "../../hooks/features/virtualization/index.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['virtualScrollerRenderZone']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const VirtualScrollerRenderZoneRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'VirtualScrollerRenderZone',
+  overridesResolver: (props, styles) => styles.virtualScrollerRenderZone
+})({
+  position: 'absolute',
+  display: 'flex',
+  // Prevents margin collapsing when using `getRowSpacing`
+  flexDirection: 'column'
+});
+const GridVirtualScrollerRenderZone = forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
+  const {
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  const offsetTop = useGridSelector(apiRef, () => {
+    const renderContext = gridRenderContextSelector(apiRef);
+    const rowsMeta = gridRowsMetaSelector(apiRef);
+    return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
+  });
+  return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
+    className: clsx(classes.root, className),
+    ownerState: rootProps,
+    style: {
+      transform: `translate3d(0, ${offsetTop}px, 0)`
+    }
+  }, other, {
+    ref: ref
+  }));
+});
+export { GridVirtualScrollerRenderZone };