@mui/x-data-grid 7.0.0-alpha.7 → 7.0.0-alpha.9

package/components/base/GridBody.js

@@ -1,116 +1,2 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { GridMainContainer } from '../containers/GridMainContainer';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridColumnPositionsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
-import { gridFilterActiveItemsLookupSelector } from '../../hooks/features/filter/gridFilterSelector';
-import { gridSortColumnLookupSelector } from '../../hooks/features/sorting/gridSortingSelector';
-import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, unstable_gridTabIndexColumnGroupHeaderSelector, unstable_gridFocusColumnGroupHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
-import { gridDensityFactorSelector } from '../../hooks/features/density/densitySelector';
-import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
-import { gridColumnMenuSelector } from '../../hooks/features/columnMenu/columnMenuSelector';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-function GridBody(props) {
-  const {
-    VirtualScrollerComponent,
-    ColumnHeadersProps,
-    children
-  } = props;
-  const apiRef = useGridPrivateApiContext();
-  const rootProps = useGridRootProps();
-  const rootRef = React.useRef(null);
-  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
-  const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
-  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
-  const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
-  const columnGroupHeaderTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnGroupHeaderSelector);
-  const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
-  const columnGroupHeaderFocus = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
-  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
-  const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
-  const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
-  const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
-  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-  useEnhancedEffect(() => {
-    apiRef.current.computeSizeAndPublishResizeEvent();
-    const elementToObserve = rootRef.current;
-    if (typeof ResizeObserver === 'undefined') {
-      return () => {};
-    }
-    let animationFrame;
-    const observer = new ResizeObserver(() => {
-      // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = requestAnimationFrame(() => {
-        apiRef.current.computeSizeAndPublishResizeEvent();
-      });
-    });
-    if (elementToObserve) {
-      observer.observe(elementToObserve);
-    }
-    return () => {
-      if (animationFrame) {
-        window.cancelAnimationFrame(animationFrame);
-      }
-      if (elementToObserve) {
-        observer.unobserve(elementToObserve);
-      }
-    };
-  }, [apiRef]);
-  const columnHeadersRef = React.useRef(null);
-  const columnsContainerRef = React.useRef(null);
-  const virtualScrollerRef = React.useRef(null);
-  apiRef.current.register('private', {
-    columnHeadersContainerElementRef: columnsContainerRef,
-    columnHeadersElementRef: columnHeadersRef,
-    virtualScrollerRef,
-    mainElementRef: rootRef
-  });
-  const hasDimensions = !!apiRef.current.getRootDimensions();
-  return /*#__PURE__*/_jsxs(GridMainContainer, {
-    ref: rootRef,
-    children: [/*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
-      ref: columnsContainerRef,
-      innerRef: columnHeadersRef,
-      visibleColumns: visibleColumns,
-      filterColumnLookup: filterColumnLookup,
-      sortColumnLookup: sortColumnLookup,
-      columnPositions: columnPositions,
-      columnHeaderTabIndexState: columnHeaderTabIndexState,
-      columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
-      columnHeaderFocus: columnHeaderFocus,
-      columnGroupHeaderFocus: columnGroupHeaderFocus,
-      densityFactor: densityFactor,
-      headerGroupingMaxDepth: headerGroupingMaxDepth,
-      columnMenuState: columnMenuState,
-      columnVisibility: columnVisibility,
-      columnGroupsHeaderStructure: columnGroupsHeaderStructure,
-      hasOtherElementInTabSequence: hasOtherElementInTabSequence
-    }, ColumnHeadersProps)), hasDimensions && /*#__PURE__*/_jsx(VirtualScrollerComponent
-    // The content is only rendered after dimensions are computed because
-    // the lazy-loading hook is listening to `renderedRowsIntervalChange`,
-    // but only does something if the dimensions are also available.
-    // If this event is published while dimensions haven't been computed,
-    // the `onFetchRows` prop won't be called during mount.
-    , {
-      ref: virtualScrollerRef
-    }), children]
-  });
-}
-process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-  children: PropTypes.node,
-  ColumnHeadersProps: PropTypes.object,
-  VirtualScrollerComponent: PropTypes.elementType.isRequired
-} : void 0;
-export { GridBody };
+import { GridVirtualScroller } from '../virtualization/GridVirtualScroller';
+export { GridVirtualScroller as GridBody };

package/components/base/GridOverlays.js

@@ -2,13 +2,15 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/system';
-import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import clsx from 'clsx';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridExpandedRowCountSelector } from '../../hooks/features/filter/gridFilterSelector';
 import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/features/rows/gridRowsSelector';
+import { gridDimensionsSelector } from '../../hooks/features/dimensions';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridVisibleRows } from '../../hooks/utils/useGridVisibleRows';
 import { getMinimalContentHeight } from '../../hooks/features/rows/gridRowsUtils';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,7 +24,7 @@ const GridOverlayWrapperRoot = styled('div', {
 }) => ({
   position: 'sticky',
   // To stay in place while scrolling
-  top: 0,
+  top: 'var(--DataGrid-headersTotalHeight)',
   left: 0,
   width: 0,
   // To stay above the content instead of shifting it down
@@ -48,30 +50,17 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridOverlayWrapper(props) {
-  var _viewportInnerSize$he, _viewportInnerSize$wi;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const [viewportInnerSize, setViewportInnerSize] = React.useState(() => {
-    var _apiRef$current$getRo, _apiRef$current$getRo2;
-    return (_apiRef$current$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.viewportInnerSize) != null ? _apiRef$current$getRo : null;
-  });
-  const handleViewportSizeChange = React.useCallback(() => {
-    var _apiRef$current$getRo3, _apiRef$current$getRo4;
-    setViewportInnerSize((_apiRef$current$getRo3 = (_apiRef$current$getRo4 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo4.viewportInnerSize) != null ? _apiRef$current$getRo3 : null);
-  }, [apiRef]);
-  useEnhancedEffect(() => {
-    return apiRef.current.subscribeEvent('viewportInnerSizeChange', handleViewportSizeChange);
-  }, [apiRef, handleViewportSizeChange]);
-  let height = (_viewportInnerSize$he = viewportInnerSize == null ? void 0 : viewportInnerSize.height) != null ? _viewportInnerSize$he : 0;
-  if (rootProps.autoHeight && height === 0) {
-    height = getMinimalContentHeight(apiRef, rootProps.rowHeight); // Give room to show the overlay when there no rows.
+  const currentPage = useGridVisibleRows(apiRef, rootProps);
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  let height = dimensions.viewportOuterSize.height - dimensions.headersTotalHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  if (rootProps.autoHeight && currentPage.rows.length === 0 || height === 0) {
+    height = getMinimalContentHeight(apiRef);
   }
   const classes = useUtilityClasses(_extends({}, props, {
     classes: rootProps.classes
   }));
-  if (!viewportInnerSize) {
-    return null;
-  }
   return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, {
     className: clsx(classes.root),
     overlayType: props.overlayType,
@@ -79,7 +68,7 @@ function GridOverlayWrapper(props) {
       className: clsx(classes.inner),
       style: {
         height,
-        width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0
+        width: dimensions.viewportOuterSize.width
       }
     }, props))
   });

package/components/cell/GridActionsCell.js

@@ -36,7 +36,7 @@ function GridActionsCell(props) {
   const buttonId = useId();
   const rootProps = useGridRootProps();
   if (!hasActions(colDef)) {
-    throw new Error('MUI: Missing the `getActions` property in the `GridColDef`.');
+    throw new Error('MUI X: Missing the `getActions` property in the `GridColDef`.');
   }
   const options = colDef.getActions(apiRef.current.getRowParams(id));
   const iconButtons = options.filter(option => !option.props.showInMenu);

package/components/cell/GridActionsCellItem.d.ts

@@ -16,24 +16,24 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<{
     label: string;
     icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
-    component?: React.ElementType<any> | undefined;
+    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 } & {
     showInMenu?: false | undefined;
     icon: React.ReactElement;
 } & import("@mui/material/IconButton").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | "size" | "style" | "disabled" | "action" | "className" | "tabIndex" | "children" | "sx" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
-    component?: React.ElementType<any> | undefined;
+}, "color" | "size" | "style" | "disabled" | "action" | "className" | "tabIndex" | "children" | "sx" | "classes" | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & {
+    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 }, "ref"> | Omit<{
     label: string;
     icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
     /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
-    component?: React.ElementType<any> | undefined;
+    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 } & {
     showInMenu: true;
 } & import("@mui/material/MenuItem").MenuItemOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
-}, "style" | "dense" | "disabled" | "action" | "autoFocus" | "className" | "tabIndex" | "selected" | "children" | "sx" | "classes" | "disableGutters" | "divider" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & {
-    component?: React.ElementType<any> | undefined;
+}, "style" | "dense" | "disabled" | "action" | "selected" | "autoFocus" | "className" | "tabIndex" | "children" | "sx" | "classes" | "disableGutters" | "divider" | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef"> & {
+    component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
 }, "ref">) & React.RefAttributes<HTMLButtonElement>>;
 export { GridActionsCellItem };

package/components/cell/GridCell.d.ts

@@ -1,19 +1,28 @@
 import * as React from 'react';
-import { GridRowId, GridCellMode, GridEditCellProps } from '../../models';
+import { GridRowId, GridEditCellProps } from '../../models';
 import { GridColDef, GridAlignment } from '../../models/colDef/gridColDef';
-type GridCellV7Props = {
+export declare enum PinnedPosition {
+    NONE = 0,
+    LEFT = 1,
+    RIGHT = 2
+}
+export type GridCellProps = {
     align: GridAlignment;
     className?: string;
     colIndex: number;
     column: GridColDef;
     rowId: GridRowId;
     height: number | 'auto';
-    showRightBorder?: boolean;
     width: number;
     colSpan?: number;
     disableDragEvents?: boolean;
-    isNotVisible?: boolean;
+    isNotVisible: boolean;
     editCellState: GridEditCellProps<any> | null;
+    pinnedOffset: number;
+    pinnedPosition: PinnedPosition;
+    sectionIndex: number;
+    sectionLength: number;
+    gridHasScrollX: boolean;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
     onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
@@ -23,20 +32,5 @@ type GridCellV7Props = {
     onDragOver?: React.DragEventHandler<HTMLDivElement>;
     [x: string]: any;
 };
-type GridCellWrapperProps = GridCellV7Props;
-export type GridCellProps<V = any, F = V> = GridCellWrapperProps & {
-    field: string;
-    formattedValue?: F;
-    hasFocus?: boolean;
-    isEditable?: boolean;
-    isSelected?: boolean;
-    value?: V;
-    cellMode?: GridCellMode;
-    children: React.ReactNode;
-    tabIndex: 0 | -1;
-};
-declare const GridCell: React.ForwardRefExoticComponent<Omit<GridCellProps<any, any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const MemoizedCellWrapper: React.ForwardRefExoticComponent<Omit<GridCellV7Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { MemoizedCellWrapper as GridCellWrapper, GridCell };
-declare const MemoizedGridCellV7: React.ForwardRefExoticComponent<Omit<GridCellV7Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { MemoizedGridCellV7 as GridCellV7 };
+declare const MemoizedGridCell: React.ForwardRefExoticComponent<Omit<GridCellProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridCell as GridCell };