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

package/hooks/features/rows/gridRowsUtils.d.ts

@@ -35,4 +35,4 @@ export declare function calculatePinnedRowsHeight(apiRef: React.MutableRefObject
     top: number;
     bottom: number;
 };
-export declare function getMinimalContentHeight(apiRef: React.MutableRefObject<GridApiCommunity>, rowHeight: number): string;
+export declare function getMinimalContentHeight(apiRef: React.MutableRefObject<GridApiCommunity>): string;

package/hooks/features/rows/gridRowsUtils.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridPinnedRowsSelector } from './gridRowsSelector';
-import { gridDensityFactorSelector } from '../density/densitySelector';
+import { gridDimensionsSelector } from '../dimensions';
 export const GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 export const GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 export const buildRootGroup = () => ({
@@ -277,7 +277,7 @@ export function calculatePinnedRowsHeight(apiRef) {
     bottom: bottomPinnedRowsHeight
   };
 }
-export function getMinimalContentHeight(apiRef, rowHeight) {
-  const densityFactor = gridDensityFactorSelector(apiRef);
-  return `var(--DataGrid-overlayHeight, ${2 * Math.floor(rowHeight * densityFactor)}px)`;
+export function getMinimalContentHeight(apiRef) {
+  const dimensions = gridDimensionsSelector(apiRef.current.state);
+  return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`;
 }

package/hooks/features/rows/useGridRowsMeta.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_debounce as debounce, unstable_capitalize as capitalize } from '@mui/utils';
+import { unstable_debounce as debounce } from '@mui/utils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -11,6 +11,9 @@ import { gridSortModelSelector } from '../sorting/gridSortingSelector';
 import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 import { gridPinnedRowsSelector } from './gridRowsSelector';
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from '../../../DataGrid/useDataGridProps';
+
+// TODO: I think the row heights can now be encoded as a single `size` instead of `sizes.baseXxxx`
+
 export const rowsMetaStateInitializer = state => _extends({}, state, {
   rowsMeta: {
     currentPageTotalHeight: 0,
@@ -179,15 +182,15 @@ export const useGridRowsMeta = (apiRef, props) => {
     hydrateRowsMeta();
   }, [hydrateRowsMeta]);
   const debouncedHydrateRowsMeta = React.useMemo(() => debounce(hydrateRowsMeta, props.rowPositionsDebounceMs), [hydrateRowsMeta, props.rowPositionsDebounceMs]);
-  const storeMeasuredRowHeight = React.useCallback((id, height, position) => {
+  const storeMeasuredRowHeight = React.useCallback((id, height) => {
     if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
       return;
     }
 
     // Only trigger hydration if the value is different, otherwise we trigger a loop
-    const needsHydration = rowsHeightLookup.current[id].sizes[`base${capitalize(position)}`] !== height;
+    const needsHydration = rowsHeightLookup.current[id].sizes.baseCenter !== height;
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
-    rowsHeightLookup.current[id].sizes[`base${capitalize(position)}`] = height;
+    rowsHeightLookup.current[id].sizes.baseCenter = height;
     if (needsHydration) {
       debouncedHydrateRowsMeta();
     }

package/hooks/features/scroll/useGridScroll.js

@@ -8,7 +8,7 @@ import { gridRowCountSelector } from '../rows/gridRowsSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridExpandedSortedRowEntriesSelector } from '../filter/gridFilterSelector';
-import { gridClasses } from '../../../constants/gridClasses';
+import { gridDimensionsSelector } from '../dimensions';
 
 // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
 // Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
@@ -49,6 +49,7 @@ export const useGridScroll = (apiRef, props) => {
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
   const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
+    const dimensions = gridDimensionsSelector(apiRef.current.state);
     const totalRowCount = gridRowCountSelector(apiRef);
     const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
     const scrollToHeader = params.rowIndex == null;
@@ -57,7 +58,7 @@ export const useGridScroll = (apiRef, props) => {
     }
     logger.debug(`Scrolling to cell at row ${params.rowIndex}, col: ${params.colIndex} `);
     let scrollCoordinates = {};
-    if (params.colIndex != null) {
+    if (params.colIndex !== undefined) {
       const columnPositions = gridColumnPositionsSelector(apiRef);
       let cellWidth;
       if (typeof params.rowIndex !== 'undefined') {
@@ -73,23 +74,20 @@ export const useGridScroll = (apiRef, props) => {
       }
       // When using RTL, `scrollLeft` becomes negative, so we must ensure that we only compare values.
       scrollCoordinates.left = scrollIntoView({
-        clientHeight: virtualScrollerRef.current.clientWidth,
+        clientHeight: dimensions.viewportInnerSize.width,
         scrollTop: Math.abs(virtualScrollerRef.current.scrollLeft),
         offsetHeight: cellWidth,
         offsetTop: columnPositions[params.colIndex]
       });
     }
-    if (params.rowIndex != null) {
-      var _querySelector, _querySelector2;
+    if (params.rowIndex !== undefined) {
       const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
       const page = gridPageSelector(apiRef);
       const pageSize = gridPageSizeSelector(apiRef);
       const elementIndex = !props.pagination ? params.rowIndex : params.rowIndex - page * pageSize;
       const targetOffsetHeight = rowsMeta.positions[elementIndex + 1] ? rowsMeta.positions[elementIndex + 1] - rowsMeta.positions[elementIndex] : rowsMeta.currentPageTotalHeight - rowsMeta.positions[elementIndex];
-      const topPinnedRowsHeight = ((_querySelector = virtualScrollerRef.current.querySelector(`.${gridClasses['pinnedRows--top']}`)) == null ? void 0 : _querySelector.clientHeight) || 0;
-      const bottomPinnedRowsHeight = ((_querySelector2 = virtualScrollerRef.current.querySelector(`.${gridClasses['pinnedRows--bottom']}`)) == null ? void 0 : _querySelector2.clientHeight) || 0;
       scrollCoordinates.top = scrollIntoView({
-        clientHeight: virtualScrollerRef.current.clientHeight - topPinnedRowsHeight - bottomPinnedRowsHeight,
+        clientHeight: dimensions.viewportInnerSize.height,
         scrollTop: virtualScrollerRef.current.scrollTop,
         offsetHeight: targetOffsetHeight,
         offsetTop: rowsMeta.positions[elementIndex]
@@ -103,13 +101,13 @@ export const useGridScroll = (apiRef, props) => {
     return false;
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
-    if (virtualScrollerRef.current && params.left != null && colRef.current) {
+    if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
       const direction = theme.direction === 'rtl' ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
     }
-    if (virtualScrollerRef.current && params.top != null) {
+    if (virtualScrollerRef.current && params.top !== undefined) {
       virtualScrollerRef.current.scrollTop = params.top;
       logger.debug(`Scrolling top: ${params.top}`);
     }

package/hooks/features/sorting/gridSortingUtils.js

@@ -25,7 +25,7 @@ const isDesc = direction => direction === 'desc';
  */
 const parseSortItem = (sortItem, apiRef) => {
   const column = apiRef.current.getColumn(sortItem.field);
-  if (!column) {
+  if (!column || sortItem.sort === null) {
     return null;
   }
   const comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;

package/hooks/features/sorting/useGridSorting.d.ts

@@ -7,4 +7,4 @@ export declare const sortingStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridRows (event)
  * @requires useGridColumns (event)
  */
-export declare const useGridSorting: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'sortModel' | 'onSortModelChange' | 'sortingOrder' | 'sortingMode' | 'disableMultipleColumnsSorting'>) => void;
+export declare const useGridSorting: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'sortModel' | 'onSortModelChange' | 'sortingOrder' | 'sortingMode' | 'disableColumnSorting' | 'disableMultipleColumnsSorting'>) => void;

package/hooks/features/sorting/useGridSorting.js

@@ -60,7 +60,7 @@ export const useGridSorting = (apiRef, props) => {
     if (existing) {
       var _col$sortingOrder;
       const nextSort = directionOverride === undefined ? getNextGridSortDirection((_col$sortingOrder = col.sortingOrder) != null ? _col$sortingOrder : props.sortingOrder, existing.sort) : directionOverride;
-      return nextSort == null ? undefined : _extends({}, existing, {
+      return nextSort === undefined ? undefined : _extends({}, existing, {
         sort: nextSort
       });
     }
@@ -70,7 +70,7 @@ export const useGridSorting = (apiRef, props) => {
     };
   }, [apiRef, props.sortingOrder]);
   const addColumnMenuItem = React.useCallback((columnMenuItems, colDef) => {
-    if (colDef == null || colDef.sortable === false) {
+    if (colDef == null || colDef.sortable === false || props.disableColumnSorting) {
       return columnMenuItems;
     }
     const sortingOrder = colDef.sortingOrder || props.sortingOrder;
@@ -78,7 +78,7 @@ export const useGridSorting = (apiRef, props) => {
       return [...columnMenuItems, 'columnMenuSortItem'];
     }
     return columnMenuItems;
-  }, [props.sortingOrder]);
+  }, [props.sortingOrder, props.disableColumnSorting]);
 
   /**
    * API METHODS
@@ -118,9 +118,6 @@ export const useGridSorting = (apiRef, props) => {
   }, [apiRef, logger, props.disableMultipleColumnsSorting]);
   const sortColumn = React.useCallback((field, direction, allowMultipleSorting) => {
     const column = apiRef.current.getColumn(field);
-    if (!column.sortable) {
-      return;
-    }
     const sortItem = createSortItem(column, direction);
     let sortModel;
     if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {
@@ -200,19 +197,27 @@ export const useGridSorting = (apiRef, props) => {
    * EVENTS
    */
   const handleColumnHeaderClick = React.useCallback(({
-    field
+    field,
+    colDef
   }, event) => {
+    if (!colDef.sortable || props.disableColumnSorting) {
+      return;
+    }
     const allowMultipleSorting = event.shiftKey || event.metaKey || event.ctrlKey;
     sortColumn(field, undefined, allowMultipleSorting);
-  }, [sortColumn]);
+  }, [sortColumn, props.disableColumnSorting]);
   const handleColumnHeaderKeyDown = React.useCallback(({
-    field
+    field,
+    colDef
   }, event) => {
+    if (!colDef.sortable || props.disableColumnSorting) {
+      return;
+    }
     // Ctrl + Enter opens the column menu
     if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
       sortColumn(field, undefined, event.shiftKey);
     }
-  }, [sortColumn]);
+  }, [sortColumn, props.disableColumnSorting]);
   const handleColumnsChange = React.useCallback(() => {
     // When the columns change we check that the sorted columns are still part of the dataset
     const sortModel = gridSortModelSelector(apiRef);

package/hooks/features/virtualization/gridVirtualizationSelectors.d.ts

@@ -1,3 +1,4 @@
+import { GridRenderContext } from '../../../models/params/gridScrollParams';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 /**
  * Get the columns state
@@ -14,3 +15,16 @@ export declare const gridVirtualizationEnabledSelector: import("../../../utils/c
  * @category Virtualization
  */
 export declare const gridVirtualizationColumnEnabledSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean>;
+/**
+ * Get the render context
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export declare const gridRenderContextSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridRenderContext>;
+/**
+ * Get the render context, with only columns filled in.
+ * This is cached, so it can be used to only re-render when the column interval changes.
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export declare const gridRenderContextColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, GridRenderContext>;

package/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -1,4 +1,4 @@
-import { createSelector } from '../../../utils/createSelector';
+import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
 /**
  * Get the columns state
  * @category Virtualization
@@ -15,4 +15,24 @@ export const gridVirtualizationEnabledSelector = createSelector(gridVirtualizati
  * Get the enabled state for virtualization
  * @category Virtualization
  */
-export const gridVirtualizationColumnEnabledSelector = createSelector(gridVirtualizationSelector, state => state.enabledForColumns);
+export const gridVirtualizationColumnEnabledSelector = createSelector(gridVirtualizationSelector, state => state.enabledForColumns);
+
+/**
+ * Get the render context
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export const gridRenderContextSelector = createSelector(gridVirtualizationSelector, state => state.renderContext);
+
+/**
+ * Get the render context, with only columns filled in.
+ * This is cached, so it can be used to only re-render when the column interval changes.
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export const gridRenderContextColumnsSelector = createSelectorMemoized(state => state.virtualization.renderContext.firstColumnIndex, state => state.virtualization.renderContext.lastColumnIndex, (firstColumnIndex, lastColumnIndex) => ({
+  firstRowIndex: -1,
+  lastRowIndex: -1,
+  firstColumnIndex,
+  lastColumnIndex
+}));

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -1,51 +1,28 @@
 import * as React from 'react';
-import { GridRenderContext, GridRowEntry } from '../../../models';
-import { GridRowId, GridRowModel } from '../../../models/gridRows';
-export declare function binarySearch(offset: number, positions: number[], sliceStart?: number, sliceEnd?: number): number;
-export declare const getRenderableIndexes: ({ firstIndex, lastIndex, buffer, minFirstIndex, maxLastIndex, }: {
-    firstIndex: number;
-    lastIndex: number;
-    buffer: number;
-    minFirstIndex: number;
-    maxLastIndex: number;
-}) => number[];
-export declare const areRenderContextsEqual: (context1: GridRenderContext, context2: GridRenderContext) => boolean;
-interface UseGridVirtualScrollerProps {
-    ref: React.Ref<HTMLDivElement>;
-    renderZoneMinColumnIndex?: number;
-    renderZoneMaxColumnIndex?: number;
-    onRenderZonePositioning?: (params: {
-        top: number;
-        left: number;
-    }) => void;
-    getRowProps?: (id: GridRowId, model: GridRowModel) => any;
-}
-export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps) => {
-    renderContext: GridRenderContext | null;
-    updateRenderZonePosition: (nextRenderContext: GridRenderContext) => void;
+import { GridPinnedRowsPosition } from '../rows/gridRowsInterfaces';
+import { GridRenderContext, GridRowEntry, GridRowId } from '../../../models';
+export declare const EMPTY_DETAIL_PANELS: Readonly<Map<GridRowId, React.ReactNode>>;
+export type VirtualScroller = ReturnType<typeof useGridVirtualScroller>;
+export declare const useGridVirtualScroller: () => {
+    renderContext: GridRenderContext;
+    setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<GridRowId, React.ReactNode>>>>;
     getRows: (params?: {
-        renderContext: GridRenderContext | null;
-        position?: string | undefined;
-        minFirstColumn?: number | undefined;
-        maxLastColumn?: number | undefined;
-        availableSpace?: number | null | undefined;
         rows?: GridRowEntry<import("../../../models").GridValidRowModel>[] | undefined;
-        rowIndexOffset?: number | undefined;
-        onRowRender?: ((rowId: GridRowId) => void) | undefined;
-    }) => React.JSX.Element[] | null;
-    getRootProps: (inputProps?: {
-        style?: object;
-    }) => {
-        style: React.CSSProperties;
-        role: string;
-        ref: ((instance: HTMLDivElement | null) => void) | null;
+        position?: keyof import("../rows/gridRowsInterfaces").GridPinnedRowsState | undefined;
+    }) => React.ReactNode[];
+    getContainerProps: () => {
+        ref: React.RefObject<HTMLDivElement>;
+    };
+    getScrollerProps: () => {
+        ref: React.RefObject<HTMLDivElement>;
+        tabIndex: number;
         onScroll: (event: React.UIEvent) => void;
         onWheel: (event: React.WheelEvent) => void;
         onTouchMove: (event: React.TouchEvent) => void;
+        style: React.CSSProperties;
+        role: string;
     };
-    getContentProps: ({ style }?: {
-        style?: object | undefined;
-    }) => {
+    getContentProps: () => {
         style: React.CSSProperties;
         role: string;
     };
@@ -53,5 +30,13 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
         ref: React.RefObject<HTMLDivElement>;
         role: string;
     };
+    getScrollbarVerticalProps: () => {
+        ref: React.RefObject<HTMLDivElement>;
+        role: string;
+    };
+    getScrollbarHorizontalProps: () => {
+        ref: React.RefObject<HTMLDivElement>;
+        role: string;
+    };
 };
-export {};
+export declare function areRenderContextsEqual(context1: GridRenderContext, context2: GridRenderContext): boolean;