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

package/legacy/components/base/GridBody.js

@@ -1,114 +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) {
-  var VirtualScrollerComponent = props.VirtualScrollerComponent,
-    ColumnHeadersProps = props.ColumnHeadersProps,
-    children = props.children;
-  var apiRef = useGridPrivateApiContext();
-  var rootProps = useGridRootProps();
-  var rootRef = React.useRef(null);
-  var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  var filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
-  var sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
-  var columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  var columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
-  var cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
-  var columnGroupHeaderTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnGroupHeaderSelector);
-  var columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
-  var columnGroupHeaderFocus = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
-  var densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  var headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
-  var columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
-  var columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
-  var columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
-  var hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-  useEnhancedEffect(function () {
-    apiRef.current.computeSizeAndPublishResizeEvent();
-    var elementToObserve = rootRef.current;
-    if (typeof ResizeObserver === 'undefined') {
-      return function () {};
-    }
-    var animationFrame;
-    var observer = new ResizeObserver(function () {
-      // See https://github.com/mui/mui-x/issues/8733
-      animationFrame = requestAnimationFrame(function () {
-        apiRef.current.computeSizeAndPublishResizeEvent();
-      });
-    });
-    if (elementToObserve) {
-      observer.observe(elementToObserve);
-    }
-    return function () {
-      if (animationFrame) {
-        window.cancelAnimationFrame(animationFrame);
-      }
-      if (elementToObserve) {
-        observer.unobserve(elementToObserve);
-      }
-    };
-  }, [apiRef]);
-  var columnHeadersRef = React.useRef(null);
-  var columnsContainerRef = React.useRef(null);
-  var virtualScrollerRef = React.useRef(null);
-  apiRef.current.register('private', {
-    columnHeadersContainerElementRef: columnsContainerRef,
-    columnHeadersElementRef: columnHeadersRef,
-    virtualScrollerRef: virtualScrollerRef,
-    mainElementRef: rootRef
-  });
-  var 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/legacy/components/base/GridOverlays.js

@@ -1,15 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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";
@@ -27,7 +28,7 @@ var GridOverlayWrapperRoot = styled('div', {
   return {
     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
@@ -56,33 +57,17 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 function GridOverlayWrapper(props) {
-  var _viewportInnerSize$he, _viewportInnerSize$wi;
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
-  var _React$useState = React.useState(function () {
-      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;
-    }),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    viewportInnerSize = _React$useState2[0],
-    setViewportInnerSize = _React$useState2[1];
-  var handleViewportSizeChange = React.useCallback(function () {
-    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(function () {
-    return apiRef.current.subscribeEvent('viewportInnerSizeChange', handleViewportSizeChange);
-  }, [apiRef, handleViewportSizeChange]);
-  var 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.
+  var currentPage = useGridVisibleRows(apiRef, rootProps);
+  var dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  var height = dimensions.viewportOuterSize.height - dimensions.headersTotalHeight - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
+  if (rootProps.autoHeight && currentPage.rows.length === 0 || height === 0) {
+    height = getMinimalContentHeight(apiRef);
   }
   var classes = useUtilityClasses(_extends({}, props, {
     classes: rootProps.classes
   }));
-  if (!viewportInnerSize) {
-    return null;
-  }
   return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, {
     className: clsx(classes.root),
     overlayType: props.overlayType,
@@ -90,7 +75,7 @@ function GridOverlayWrapper(props) {
       className: clsx(classes.inner),
       style: {
         height: height,
-        width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0
+        width: dimensions.viewportOuterSize.width
       }
     }, props))
   });

package/legacy/components/cell/GridActionsCell.js

@@ -52,7 +52,7 @@ function GridActionsCell(props) {
   var buttonId = useId();
   var 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`.');
   }
   var options = colDef.getActions(apiRef.current.getRowParams(id));
   var iconButtons = options.filter(function (option) {