@mui/x-data-grid 9.0.0-alpha.0 → 9.0.0-alpha.2

package/components/virtualization/GridVirtualScroller.mjs

@@ -0,0 +1,156 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import { gridHasBottomFillerSelector, gridHasScrollXSelector, gridHasScrollYSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.mjs";
+import { gridRowTreeSelector } from "../../hooks/features/rows/index.mjs";
+import { GridScrollArea } from "../GridScrollArea.mjs";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.mjs";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.mjs";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
+import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.mjs";
+import { GridHeaders } from "../GridHeaders.mjs";
+import { GridMainContainer as Container } from "./GridMainContainer.mjs";
+import { GridTopContainer as TopContainer } from "./GridTopContainer.mjs";
+import { GridVirtualScrollerContent as Content } from "./GridVirtualScrollerContent.mjs";
+import { GridVirtualScrollerFiller as SpaceFiller } from "./GridVirtualScrollerFiller.mjs";
+import { GridVirtualScrollerRenderZone as RenderZone } from "./GridVirtualScrollerRenderZone.mjs";
+import { GridVirtualScrollbar as Scrollbar, ScrollbarCorner } from "./GridVirtualScrollbar.mjs";
+import { GridScrollShadows as ScrollShadows } from "../GridScrollShadows.mjs";
+import { GridOverlayWrapper } from "../base/GridOverlays.mjs";
+import { useGridVirtualizer } from "../../hooks/core/useGridVirtualizer.mjs";
+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 = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const hasScrollY = useGridSelector(apiRef, gridHasScrollYSelector);
+  const hasScrollX = useGridSelector(apiRef, gridHasScrollXSelector);
+  const hasPinnedRight = useGridSelector(apiRef, hasPinnedRightSelector);
+  const hasBottomFiller = useGridSelector(apiRef, gridHasBottomFillerSelector);
+  const {
+    overlayType,
+    loadingOverlayVariant
+  } = useGridOverlays(apiRef, rootProps);
+  const Overlay = rootProps.slots?.[overlayType];
+  const ownerState = {
+    classes: rootProps.classes,
+    hasScrollX,
+    hasPinnedRight,
+    overlayType,
+    loadingOverlayVariant
+  };
+  const classes = useUtilityClasses(ownerState);
+  const virtualScroller = useGridVirtualizer().api.getters;
+  const {
+    getContainerProps,
+    getScrollerProps,
+    getContentProps,
+    getPositionerProps,
+    getScrollbarVerticalProps,
+    getScrollbarHorizontalProps,
+    getRows,
+    getScrollAreaProps
+  } = virtualScroller;
+  const rows = getRows(undefined, gridRowTreeSelector(apiRef));
+  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__*/_jsx(GridScrollArea, _extends({
+      scrollDirection: "up"
+    }, getScrollAreaProps())), /*#__PURE__*/_jsx(GridScrollArea, _extends({
+      scrollDirection: "down"
+    }, getScrollAreaProps())), /*#__PURE__*/_jsxs(Scroller, _extends({
+      className: classes.scroller
+    }, getScrollerProps(), {
+      ownerState: ownerState,
+      children: [/*#__PURE__*/_jsxs(TopContainer, {
+        children: [!rootProps.listView && /*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
+          position: "top",
+          virtualScroller: virtualScroller
+        })]
+      }), overlayType && /*#__PURE__*/_jsx(GridOverlayWrapper, {
+        overlayType: overlayType,
+        loadingOverlayVariant: loadingOverlayVariant,
+        children: /*#__PURE__*/_jsx(Overlay, _extends({}, rootProps.slotProps?.[overlayType]))
+      }), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
+        children: /*#__PURE__*/_jsxs(RenderZone, _extends({
+          role: "rowgroup"
+        }, getPositionerProps(), {
+          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 && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [rootProps.pinnedColumnsSectionSeparator?.endsWith('shadow') && /*#__PURE__*/_jsx(ScrollShadows, {
+        position: "horizontal"
+      }), /*#__PURE__*/_jsx(Scrollbar, _extends({
+        position: "horizontal"
+      }, getScrollbarHorizontalProps()))]
+    }), hasScrollY && /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [rootProps.pinnedRowsSectionSeparator?.endsWith('shadow') && /*#__PURE__*/_jsx(ScrollShadows, {
+        position: "vertical"
+      }), /*#__PURE__*/_jsx(Scrollbar, _extends({
+        position: "vertical"
+      }, getScrollbarVerticalProps()))]
+    }), hasScrollX && hasScrollY && /*#__PURE__*/_jsx(ScrollbarCorner, {
+      "aria-hidden": "true"
+    }), props.children]
+  }));
+}
+export { GridVirtualScroller };

package/components/virtualization/GridVirtualScrollerContent.mjs

@@ -0,0 +1,46 @@
+'use client';
+
+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.mjs";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
+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
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridVirtualScrollerContent.displayName = "GridVirtualScrollerContent";
+export { GridVirtualScrollerContent };

package/components/virtualization/GridVirtualScrollerFiller.mjs

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { fastMemo } from '@mui/x-internals/fastMemo';
+import { vars } from "../../constants/cssVariables.mjs";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.mjs";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
+import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.mjs";
+import { gridClasses } from "../../constants/index.mjs";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Filler = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
+  display: 'flex',
+  flexDirection: 'row',
+  width: 'var(--DataGrid-rowWidth)',
+  boxSizing: 'border-box'
+});
+const Pinned = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
+  position: 'sticky',
+  height: '100%',
+  boxSizing: 'border-box',
+  borderTop: '1px solid var(--rowBorderColor)',
+  backgroundColor: vars.cell.background.pinned
+});
+const PinnedLeft = styled(Pinned, {
+  slot: 'internal'
+})({
+  left: 0
+});
+const PinnedRight = styled(Pinned, {
+  slot: 'internal'
+})({
+  right: 0
+});
+const Main = styled('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
+  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/components/virtualization/GridVirtualScrollerRenderZone.mjs

@@ -0,0 +1,41 @@
+'use client';
+
+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.mjs";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
+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'
+})({
+  position: 'absolute',
+  display: 'flex',
+  // Prevents margin collapsing when using `getRowSpacing`
+  flexDirection: 'column'
+});
+const GridVirtualScrollerRenderZone = forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
+    ownerState: rootProps
+  }, props, {
+    className: clsx(classes.root, props.className),
+    ref: ref
+  }));
+});
+if (process.env.NODE_ENV !== "production") GridVirtualScrollerRenderZone.displayName = "GridVirtualScrollerRenderZone";
+export { GridVirtualScrollerRenderZone };

package/constants/dataGridPropsDefaultValues.d.mts

@@ -0,0 +1,5 @@
+import type { DataGridPropsWithDefaultValues } from "../models/props/DataGridProps.mjs";
+/**
+ * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
+ */
+export declare const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues;

package/constants/dataGridPropsDefaultValues.js

@@ -30,6 +30,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   disableMultipleColumnsFiltering: false,
   disableMultipleColumnsSorting: false,
   disableMultipleRowSelection: false,
+  dataSourceRevalidateMs: 0,
   disableRowSelectionOnClick: false,
   disableRowSelectionExcludeModel: false,
   disableVirtualization: false,

package/constants/dataGridPropsDefaultValues.mjs

@@ -0,0 +1,63 @@
+import { GridEditModes } from "../models/gridEditRowModel.mjs";
+/**
+ * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
+ */
+export const DATA_GRID_PROPS_DEFAULT_VALUES = {
+  autoHeight: false,
+  autoPageSize: false,
+  autosizeOnMount: false,
+  checkboxSelection: false,
+  checkboxSelectionVisibleOnly: false,
+  clipboardCopyCellDelimiter: '\t',
+  columnBufferPx: 150,
+  columnFilterDebounceMs: 150,
+  columnHeaderHeight: 56,
+  disableAutosize: false,
+  disableColumnFilter: false,
+  disableColumnMenu: false,
+  disableColumnReorder: false,
+  disableColumnResize: false,
+  disableColumnSelector: false,
+  disableColumnSorting: false,
+  disableDensitySelector: false,
+  disableEval: false,
+  disableMultipleColumnsFiltering: false,
+  disableMultipleColumnsSorting: false,
+  disableMultipleRowSelection: false,
+  dataSourceRevalidateMs: 0,
+  disableRowSelectionOnClick: false,
+  disableRowSelectionExcludeModel: false,
+  disableVirtualization: false,
+  editMode: GridEditModes.Cell,
+  filterDebounceMs: 150,
+  filterMode: 'client',
+  hideFooter: false,
+  hideFooterPagination: false,
+  hideFooterRowCount: false,
+  hideFooterSelectedRowCount: false,
+  ignoreDiacritics: false,
+  ignoreValueFormatterDuringExport: false,
+  keepColumnPositionIfDraggedOutside: false,
+  keepNonExistentRowsSelected: false,
+  loading: false,
+  logger: console,
+  logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+  pageSizeOptions: [25, 50, 100],
+  pagination: false,
+  paginationMode: 'client',
+  resizeThrottleMs: 60,
+  rowBufferPx: 150,
+  rowHeight: 52,
+  rows: [],
+  rowSelection: true,
+  rowSpacingType: 'margin',
+  rowSpanning: false,
+  showCellVerticalBorder: false,
+  showColumnVerticalBorder: false,
+  showToolbar: false,
+  sortingMode: 'client',
+  sortingOrder: ['asc', 'desc', null],
+  throttleRowsMs: 0,
+  virtualizeColumnsWithAutoRowHeight: false,
+  tabNavigation: 'none'
+};

package/constants/defaultGridSlotsComponents.d.mts

@@ -0,0 +1,2 @@
+import type { GridSlotsComponent } from "../models/index.mjs";
+export declare const DATA_GRID_DEFAULT_SLOTS_COMPONENTS: GridSlotsComponent;

package/constants/defaultGridSlotsComponents.mjs

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon, GridNoColumnsOverlay } from "../components/index.mjs";
+import { GridCell } from "../components/cell/GridCell.mjs";
+import { GridColumnHeaders } from "../components/GridColumnHeaders.mjs";
+import { GridColumnMenu } from "../components/menu/columnMenu/GridColumnMenu.mjs";
+import { GridDetailPanels } from "../components/GridDetailPanels.mjs";
+import { GridPinnedRows } from "../components/GridPinnedRows.mjs";
+import { GridNoResultsOverlay } from "../components/GridNoResultsOverlay.mjs";
+import materialSlots from "../material/index.mjs";
+import { GridBottomContainer } from "../components/virtualization/GridBottomContainer.mjs";
+import { GridToolbar } from "../components/toolbarV8/GridToolbar.mjs";
+
+// TODO: camelCase these key. It's a private helper now.
+// Remove then need to call `uncapitalizeObjectKeys`.
+export const DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, materialSlots, {
+  cell: GridCell,
+  skeletonCell: GridSkeletonCell,
+  columnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
+  columnHeaderSortIcon: GridColumnHeaderSortIcon,
+  columnMenu: GridColumnMenu,
+  columnHeaders: GridColumnHeaders,
+  detailPanels: GridDetailPanels,
+  bottomContainer: GridBottomContainer,
+  footer: GridFooter,
+  footerRowCount: GridRowCount,
+  toolbar: GridToolbar,
+  pinnedRows: GridPinnedRows,
+  loadingOverlay: GridLoadingOverlay,
+  noResultsOverlay: GridNoResultsOverlay,
+  noRowsOverlay: GridNoRowsOverlay,
+  noColumnsOverlay: GridNoColumnsOverlay,
+  pagination: GridPagination,
+  filterPanel: GridFilterPanel,
+  columnsPanel: GridColumnsPanel,
+  columnsManagement: GridColumnsManagement,
+  panel: GridPanel,
+  row: GridRow
+});

package/constants/index.d.mts

@@ -0,0 +1,4 @@
+export * from "./envConstants.mjs";
+export * from "./localeTextConstants.mjs";
+export * from "./gridClasses.mjs";
+export * from "./signature.mjs";

package/constants/index.mjs

@@ -0,0 +1,4 @@
+export * from "./envConstants.mjs";
+export * from "./localeTextConstants.mjs";
+export * from "./gridClasses.mjs";
+export * from "./signature.mjs";

package/constants/localeTextConstants.d.mts

@@ -0,0 +1,2 @@
+import type { GridLocaleText } from "../models/api/gridLocaleTextApi.mjs";
+export declare const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText;

package/constants/localeTextConstants.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GRID_DEFAULT_LOCALE_TEXT = void 0;
+var _getGridLocalization = require("../utils/getGridLocalization");
+const formatNumber = (0, _getGridLocalization.buildLocaleFormat)('en-US');
 const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   // Root
   noRowsLabel: 'No rows',
@@ -173,10 +175,10 @@ const GRID_DEFAULT_LOCALE_TEXT = exports.GRID_DEFAULT_LOCALE_TEXT = {
   }) => {
     const unknownRowCount = count == null || count === -1;
     if (!estimated) {
-      return `${from}–${to} of ${!unknownRowCount ? count : `more than ${to}`}`;
+      return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
     }
-    const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-    return `${from}–${to} of ${!unknownRowCount ? count : estimatedLabel}`;
+    const estimatedLabel = estimated && estimated > to ? `around ${formatNumber(estimated)}` : `more than ${formatNumber(to)}`;
+    return `${formatNumber(from)}–${formatNumber(to)} of ${!unknownRowCount ? formatNumber(count) : estimatedLabel}`;
   },
   paginationItemAriaLabel: type => {
     if (type === 'first') {