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

package/modern/components/virtualization/GridVirtualScrollbar.js

@@ -1,148 +0,0 @@
-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/modern/components/virtualization/GridVirtualScroller.d.ts

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

package/modern/components/virtualization/GridVirtualScroller.js

@@ -1,130 +0,0 @@
-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/modern/components/virtualization/GridVirtualScrollerContent.d.ts

@@ -1,8 +0,0 @@
-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/modern/components/virtualization/GridVirtualScrollerContent.js

@@ -1,43 +0,0 @@
-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/modern/components/virtualization/GridVirtualScrollerFiller.d.ts

@@ -1,10 +0,0 @@
-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/modern/components/virtualization/GridVirtualScrollerFiller.js

@@ -1,74 +0,0 @@
-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/modern/components/virtualization/GridVirtualScrollerRenderZone.d.ts

@@ -1,8 +0,0 @@
-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/modern/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -1,58 +0,0 @@
-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 };