@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.3

package/components/toolbar/GridToolbarExportContainer.js

@@ -42,7 +42,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('toolbarExportLabel'),
       enterDelay: 1000
-    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         ref: handleRef,
         size: "small",
@@ -51,10 +51,9 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
         "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
         "aria-haspopup": "menu",
         "aria-controls": open ? exportMenuId : undefined,
-        id: exportButtonId
-      }, buttonProps, {
+        id: exportButtonId,
         onClick: handleMenuOpen
-      }, rootProps.slotProps?.baseButton, {
+      }, rootProps.slotProps?.baseButton, buttonProps, {
         children: apiRef.current.getLocaleText('toolbarExport')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/components/toolbar/GridToolbarFilterButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ButtonProps } from '@mui/material/Button';
 import { TooltipProps } from '@mui/material/Tooltip';
+import { BadgeProps } from '@mui/material/Badge';
 export interface GridToolbarFilterButtonProps {
     /**
      * The props used for each slot inside.
@@ -9,6 +10,7 @@ export interface GridToolbarFilterButtonProps {
     slotProps?: {
         button?: Partial<ButtonProps>;
         tooltip?: Partial<TooltipProps>;
+        badge?: Partial<BadgeProps>;
     };
 }
 declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<GridToolbarFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/components/toolbar/GridToolbarFilterButton.js

@@ -37,6 +37,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   } = props;
   const buttonProps = slotProps.button || {};
   const tooltipProps = slotProps.tooltip || {};
+  const badgeProps = slotProps.badge || {};
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
@@ -94,7 +95,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: tooltipContentNode,
     enterDelay: 1000
-  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
       ref: ref,
       id: filterButtonId,
@@ -103,14 +104,14 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       "aria-controls": isOpen ? filterPanelId : undefined,
       "aria-expanded": isOpen,
       "aria-haspopup": true,
-      startIcon: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
+      startIcon: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, _extends({
         badgeContent: activeFilters.length,
-        color: "primary",
+        color: "primary"
+      }, rootProps.slotProps?.baseBadge, badgeProps, {
         children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {})
-      })
-    }, buttonProps, {
+      })),
       onClick: toggleFilter
-    }, rootProps.slotProps?.baseButton, {
+    }, rootProps.slotProps?.baseButton, buttonProps, {
       children: apiRef.current.getLocaleText('toolbarFilters')
     }))
   }));

package/components/toolbar/GridToolbarQuickFilter.js

@@ -78,6 +78,7 @@ function GridToolbarQuickFilter(props) {
     apiRef.current.setQuickFilterValues(newQuickFilterValues);
   }, [apiRef, quickFilterParser]);
   const debouncedUpdateSearchValue = React.useMemo(() => debounce(updateSearchValue, debounceMs), [updateSearchValue, debounceMs]);
+  React.useEffect(() => debouncedUpdateSearchValue.clear, [debouncedUpdateSearchValue]);
   const handleSearchValueChange = React.useCallback(event => {
     const newSearchValue = event.target.value;
     setSearchValue(newSearchValue);

package/components/virtualization/GridVirtualScroller.js

@@ -10,7 +10,6 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
 import { useGridVirtualScroller } from "../../hooks/features/virtualization/useGridVirtualScroller.js";
 import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.js";
-import { GridOverlays as Overlays } from "../base/GridOverlays.js";
 import { GridHeaders } from "../GridHeaders.js";
 import { GridMainContainer as Container } from "./GridMainContainer.js";
 import { GridTopContainer as TopContainer } from "./GridTopContainer.js";
@@ -55,7 +54,10 @@ function GridVirtualScroller(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const overlaysProps = useGridOverlays();
+  const {
+    getOverlay,
+    overlaysProps
+  } = useGridOverlays();
   const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);
   const virtualScroller = useGridVirtualScroller();
   const {
@@ -84,7 +86,7 @@ function GridVirtualScroller(props) {
           position: "top",
           virtualScroller: virtualScroller
         })]
-      }), /*#__PURE__*/_jsx(Overlays, _extends({}, overlaysProps)), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
+      }), getOverlay(), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
         children: /*#__PURE__*/_jsxs(RenderZone, _extends({}, getRenderZoneProps(), {
           children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller

package/constants/dataGridPropsDefaultValues.js

@@ -34,8 +34,6 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   hideFooterSelectedRowCount: false,
   ignoreDiacritics: false,
   ignoreValueFormatterDuringExport: false,
-  // TODO v8: Update to 'select'
-  indeterminateCheckboxAction: 'deselect',
   keepColumnPositionIfDraggedOutside: false,
   keepNonExistentRowsSelected: false,
   loading: false,
@@ -47,7 +45,6 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   resizeThrottleMs: 60,
   rowBufferPx: 150,
   rowHeight: 52,
-  rowPositionsDebounceMs: 166,
   rows: [],
   rowSelection: true,
   rowSpacingType: 'margin',
@@ -56,5 +53,6 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   sortingMode: 'client',
   sortingOrder: ['asc', 'desc', null],
   throttleRowsMs: 0,
-  unstable_rowSpanning: false
+  unstable_rowSpanning: false,
+  virtualizeColumnsWithAutoRowHeight: false
 };

package/constants/localeTextConstants.js

@@ -26,7 +26,6 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarPromptControlWithRecordingPlaceholder: 'Type or record a prompt…',
   toolbarPromptControlRecordingPlaceholder: 'Listening for prompt…',
   toolbarPromptControlLabel: 'Prompt input',
-  toolbarPromptControlDeleteIconLabel: 'Clear',
   toolbarPromptControlRecordButtonDefaultLabel: 'Record',
   toolbarPromptControlRecordButtonActiveLabel: 'Stop recording',
   toolbarPromptControlSendActionLabel: 'Send',

package/hooks/core/strategyProcessing/gridStrategyProcessingApi.d.ts

@@ -1,26 +1,42 @@
 import { GridRowTreeCreationParams, GridRowTreeCreationValue, GridRowsState } from '../../features/rows/gridRowsInterfaces';
 import { GridFilteringMethodParams, GridFilteringMethodValue, GridFilterState, GridVisibleRowsLookupState } from '../../features/filter/gridFilterState';
 import { GridSortingMethodParams, GridSortingMethodValue } from '../../features/sorting/gridSortingState';
+import { GridGetRowsParams, GridGetRowsResponse } from '../../../models/gridDataSource';
 export type GridStrategyProcessorName = keyof GridStrategyProcessingLookup;
-export type GridStrategyGroup = GridStrategyProcessingLookup[keyof GridStrategyProcessingLookup]['group'];
+export declare enum GridStrategyGroup {
+    DataSource = "dataSource",
+    RowTree = "rowTree"
+}
+export type GridStrategyGroupValue = `${GridStrategyGroup}`;
 export interface GridStrategyProcessingLookup {
+    dataSourceRowsUpdate: {
+        group: GridStrategyGroup.DataSource;
+        params: {
+            response: GridGetRowsResponse;
+            fetchParams: GridGetRowsParams;
+        } | {
+            error: Error;
+            fetchParams: GridGetRowsParams;
+        };
+        value: void;
+    };
     rowTreeCreation: {
-        group: 'rowTree';
+        group: GridStrategyGroup.RowTree;
         params: GridRowTreeCreationParams;
         value: GridRowTreeCreationValue;
     };
     filtering: {
-        group: 'rowTree';
+        group: GridStrategyGroup.RowTree;
         params: GridFilteringMethodParams;
         value: GridFilteringMethodValue;
     };
     sorting: {
-        group: 'rowTree';
+        group: GridStrategyGroup.RowTree;
         params: GridSortingMethodParams;
         value: GridSortingMethodValue;
     };
     visibleRowsLookupCreation: {
-        group: 'rowTree';
+        group: GridStrategyGroup.RowTree;
         params: {
             tree: GridRowsState['tree'];
             filteredRowsLookup: GridFilterState['filteredRowsLookup'];
@@ -42,17 +58,17 @@ export interface GridStrategyProcessingApi {
     registerStrategyProcessor: <P extends GridStrategyProcessorName>(strategyName: string, processorName: P, processor: GridStrategyProcessor<P>) => () => void;
     /**
      * Set a callback to know if a strategy is available.
-     * @param {GridStrategyGroup} strategyGroup The group for which we set strategy availability.
+     * @param {GridStrategyGroupValue} strategyGroup The group for which we set strategy availability.
      * @param {string} strategyName The name of the strategy.
      * @param {boolean} callback A callback to know if this strategy is available.
      */
-    setStrategyAvailability: (strategyGroup: GridStrategyGroup, strategyName: string, callback: () => boolean) => void;
+    setStrategyAvailability: (strategyGroup: GridStrategyGroupValue, strategyName: string, callback: () => boolean) => void;
     /**
      * Returns the name of the active strategy of a given strategy group
-     * @param {GridStrategyGroup} strategyGroup The group from which we want the active strategy.
+     * @param {GridStrategyGroupValue} strategyGroup The group from which we want the active strategy.
      * @returns {string} The name of the active strategy.
      */
-    getActiveStrategy: (strategyGroup: GridStrategyGroup) => string;
+    getActiveStrategy: (strategyGroup: GridStrategyGroupValue) => string;
     /**
      * Run the processor registered for the active strategy.
      * @param {GridStrategyProcessorName} processorName The name of the processor to run.

package/hooks/core/strategyProcessing/gridStrategyProcessingApi.js

@@ -1 +1,5 @@
-export {};
+export let GridStrategyGroup = /*#__PURE__*/function (GridStrategyGroup) {
+  GridStrategyGroup["DataSource"] = "dataSource";
+  GridStrategyGroup["RowTree"] = "rowTree";
+  return GridStrategyGroup;
+}({});

package/hooks/core/strategyProcessing/useGridStrategyProcessing.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../../models/api/gridApiCommon';
-import { GridStrategyProcessorName, GridStrategyProcessingLookup } from './gridStrategyProcessingApi';
+import { GridStrategyProcessorName, GridStrategyGroupValue } from './gridStrategyProcessingApi';
 export declare const GRID_DEFAULT_STRATEGY = "none";
 export declare const GRID_STRATEGIES_PROCESSORS: {
-    [P in GridStrategyProcessorName]: GridStrategyProcessingLookup[P]['group'];
+    [P in GridStrategyProcessorName]: GridStrategyGroupValue;
 };
 /**
  * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)
@@ -40,9 +40,6 @@ export declare const GRID_STRATEGIES_PROCESSORS: {
  * =====================================================================================================================
  *
  * Each processor name is part of a strategy group which can only have one active strategy at the time.
- * For now, there is only one strategy group named `rowTree` which customize
- * - row tree creation algorithm.
- * - sorting algorithm.
- * - filtering algorithm.
+ * There are two active groups named `rowTree` and `dataSource`.
  */
 export declare const useGridStrategyProcessing: (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => void;

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -1,13 +1,15 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
+import { GridStrategyGroup } from "./gridStrategyProcessingApi.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 export const GRID_DEFAULT_STRATEGY = 'none';
 export const GRID_STRATEGIES_PROCESSORS = {
-  rowTreeCreation: 'rowTree',
-  filtering: 'rowTree',
-  sorting: 'rowTree',
-  visibleRowsLookupCreation: 'rowTree'
+  dataSourceRowsUpdate: GridStrategyGroup.DataSource,
+  rowTreeCreation: GridStrategyGroup.RowTree,
+  filtering: GridStrategyGroup.RowTree,
+  sorting: GridStrategyGroup.RowTree,
+  visibleRowsLookupCreation: GridStrategyGroup.RowTree
 };
 /**
  * Implements a variant of the Strategy Pattern (see https://en.wikipedia.org/wiki/Strategy_pattern)
@@ -44,10 +46,7 @@ export const GRID_STRATEGIES_PROCESSORS = {
  * =====================================================================================================================
  *
  * Each processor name is part of a strategy group which can only have one active strategy at the time.
- * For now, there is only one strategy group named `rowTree` which customize
- * - row tree creation algorithm.
- * - sorting algorithm.
- * - filtering algorithm.
+ * There are two active groups named `rowTree` and `dataSource`.
  */
 export const useGridStrategyProcessing = apiRef => {
   const availableStrategies = React.useRef(new Map());

package/hooks/features/columnResize/useGridColumnResize.js

@@ -491,7 +491,8 @@ export const useGridColumnResize = (apiRef, props) => {
       const widthByField = extractColumnWidths(apiRef, options, columns);
       const newColumns = columns.map(column => _extends({}, column, {
         width: widthByField[column.field],
-        computedWidth: widthByField[column.field]
+        computedWidth: widthByField[column.field],
+        flex: 0
       }));
       if (options.expand) {
         const visibleColumns = state.orderedFields.map(field => state.lookup[field]).filter(c => state.columnVisibilityModel[c.field] !== false);

package/hooks/features/dimensions/gridDimensionsApi.d.ts

@@ -83,10 +83,6 @@ export interface GridDimensions {
     bottomContainerHeight: number;
 }
 export interface GridDimensionsApi {
-    /**
-     * Triggers a resize of the component and recalculation of width and height.
-     */
-    resize: () => void;
     /**
      * Returns the dimensions of the grid
      * @returns {GridDimensions} The dimension information of the grid. If `null`, the grid is not ready yet.

package/hooks/features/dimensions/useGridDimensions.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
+import { unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { throttle } from '@mui/x-internals/throttle';
 import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
@@ -66,28 +66,13 @@ export function useGridDimensions(apiRef, props) {
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
   const [savedSize, setSavedSize] = React.useState();
   const debouncedSetSavedSize = React.useMemo(() => throttle(setSavedSize, props.resizeThrottleMs), [props.resizeThrottleMs]);
-  const previousSize = React.useRef();
+  React.useEffect(() => debouncedSetSavedSize.clear, [debouncedSetSavedSize]);
   const getRootDimensions = () => apiRef.current.state.dimensions;
   const setDimensions = useEventCallback(dimensions => {
     apiRef.current.setState(state => _extends({}, state, {
       dimensions
     }));
   });
-  const resize = React.useCallback(() => {
-    const element = apiRef.current.mainElementRef.current;
-    if (!element) {
-      return;
-    }
-    const computedStyle = ownerWindow(element).getComputedStyle(element);
-    const newSize = {
-      width: parseFloat(computedStyle.width) || 0,
-      height: parseFloat(computedStyle.height) || 0
-    };
-    if (!previousSize.current || !areElementSizesEqual(previousSize.current, newSize)) {
-      apiRef.current.publishEvent('resize', newSize);
-      previousSize.current = newSize;
-    }
-  }, [apiRef]);
   const getViewportPageSize = React.useCallback(() => {
     const dimensions = gridDimensionsSelector(apiRef.current.state);
     if (!dimensions.isReady) {
@@ -198,7 +183,6 @@ export function useGridDimensions(apiRef, props) {
     apiRef.current.updateRenderContext?.();
   }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
   const apiPublic = {
-    resize,
     getRootDimensions
   };
   const apiPrivate = {
@@ -238,7 +222,7 @@ export function useGridDimensions(apiRef, props) {
     rootDimensionsRef.current = size;
 
     // jsdom has no layout capabilities
-    const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+    const isJSDOM = /jsdom|HappyDOM/.test(window.navigator.userAgent);
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
       logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;

package/hooks/features/editing/useGridCellEditing.js

@@ -11,7 +11,7 @@ import { GridEditModes, GridCellModes } from "../../../models/gridEditRowModel.j
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
-import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
+import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridCellEditStartReasons, GridCellEditStopReasons } from "../../../models/params/gridEditCellParams.js";
 import { getDefaultCellValue } from "./utils.js";
@@ -442,7 +442,7 @@ export const useGridCellEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   useEnhancedEffect(() => {
-    const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
+    const rowsLookup = gridRowsLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopCellEditMode may change it later
     const copyOfPrevCellModes = prevCellModesModel.current;
@@ -451,7 +451,7 @@ export const useGridCellEditing = (apiRef, props) => {
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
         const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || GridCellModes.View;
-        const originalId = idToIdLookup[id] ?? id;
+        const originalId = apiRef.current.getRowId(rowsLookup[id]) ?? id;
         if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
           updateStateToStartCellEditMode(_extends({
             id: originalId,

package/hooks/features/editing/useGridRowEditing.js

@@ -12,7 +12,7 @@ import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
 import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
 import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
-import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
+import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
 import { deepClone } from "../../../utils/utils.js";
 import { GridRowEditStopReasons, GridRowEditStartReasons } from "../../../models/params/gridRowParams.js";
 import { GRID_ACTIONS_COLUMN_TYPE } from "../../../colDef/index.js";
@@ -571,7 +571,7 @@ export const useGridRowEditing = (apiRef, props) => {
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
   useEnhancedEffect(() => {
-    const idToIdLookup = gridRowsDataRowIdToIdLookupSelector(apiRef);
+    const rowsLookup = gridRowsLookupSelector(apiRef);
 
     // Update the ref here because updateStateToStopRowEditMode may change it later
     const copyOfPrevRowModesModel = prevRowModesModel.current;
@@ -583,7 +583,7 @@ export const useGridRowEditing = (apiRef, props) => {
         mode: GridRowModes.View
       };
       const prevMode = copyOfPrevRowModesModel[id]?.mode || GridRowModes.View;
-      const originalId = idToIdLookup[id] ?? id;
+      const originalId = apiRef.current.getRowId(rowsLookup[id]) ?? id;
       if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {
         updateStateToStartRowEditMode(_extends({
           id: originalId

package/hooks/features/index.d.ts

@@ -6,6 +6,7 @@ export * from './density';
 export * from './editing';
 export * from './filter';
 export * from './focus';
+export * from './listView';
 export * from './pagination';
 export * from './preferencesPanel';
 export * from './rows';

package/hooks/features/index.js

@@ -7,6 +7,7 @@ export * from "./density/index.js";
 export * from "./editing/index.js";
 export * from "./filter/index.js";
 export * from "./focus/index.js";
+export * from "./listView/index.js";
 export * from "./pagination/index.js";
 export * from "./preferencesPanel/index.js";
 export * from "./rows/index.js";

package/hooks/features/listView/gridListViewSelectors.d.ts

@@ -1,5 +1,7 @@
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 /**
- * Get a list column definition
+ * Get the list column definition
+ * @category List View
+ * @ignore - Do not document
  */
 export declare const gridListColumnSelector: (state: GridStateCommunity) => import("./useGridListView").GridListViewState;

package/hooks/features/listView/gridListViewSelectors.js

@@ -1,4 +1,6 @@
 /**
- * Get a list column definition
+ * Get the list column definition
+ * @category List View
+ * @ignore - Do not document
  */
 export const gridListColumnSelector = state => state.listViewColumn;

package/hooks/features/listView/index.d.ts

@@ -0,0 +1 @@
+export * from './gridListViewSelectors';

package/hooks/features/listView/index.js

@@ -0,0 +1 @@
+export * from "./gridListViewSelectors.js";

package/hooks/features/overlays/useGridOverlays.d.ts

@@ -1,11 +1,14 @@
+import * as React from 'react';
 import { GridLoadingOverlayVariant } from '../../../components/GridLoadingOverlay';
-import { GridSlotsComponent } from '../../../models/gridSlotsComponent';
-export type GridOverlayType = keyof Pick<GridSlotsComponent, 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'> | null;
+import type { GridOverlayType } from '../../../components/base/GridOverlays';
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
  */
 export declare const useGridOverlays: () => {
-    overlayType: GridOverlayType;
-    loadingOverlayVariant: GridLoadingOverlayVariant | null;
+    getOverlay: () => React.JSX.Element | null;
+    overlaysProps: {
+        overlayType: GridOverlayType;
+        loadingOverlayVariant: GridLoadingOverlayVariant | null;
+    };
 };

package/hooks/features/overlays/useGridOverlays.js

@@ -1,8 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
 import { useGridSelector } from "../../utils/index.js";
 import { useGridApiContext } from "../../utils/useGridApiContext.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { gridExpandedRowCountSelector } from "../filter/index.js";
 import { gridRowCountSelector, gridRowsLoadingSelector } from "../rows/index.js";
+import { GridOverlayWrapper } from "../../../components/base/GridOverlays.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.
@@ -28,8 +32,22 @@ export const useGridOverlays = () => {
     overlayType = 'loadingOverlay';
     loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] || null;
   }
-  return {
+  const overlaysProps = {
     overlayType,
     loadingOverlayVariant
   };
+  const getOverlay = () => {
+    if (!overlayType) {
+      return null;
+    }
+    const Overlay = rootProps.slots?.[overlayType];
+    const overlayProps = rootProps.slotProps?.[overlayType];
+    return /*#__PURE__*/_jsx(GridOverlayWrapper, _extends({}, overlaysProps, {
+      children: /*#__PURE__*/_jsx(Overlay, _extends({}, overlayProps))
+    }));
+  };
+  return {
+    getOverlay,
+    overlaysProps
+  };
 };

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -248,11 +248,7 @@ export const useGridRowSelection = (apiRef, props) => {
   /*
    * EVENTS
    */
-  const isFirstRender = React.useRef(true);
   const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
-    if (isFirstRender.current) {
-      return;
-    }
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     const rowsLookup = gridRowsLookupSelector(apiRef);
     const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
@@ -480,9 +476,4 @@ export const useGridRowSelection = (apiRef, props) => {
   React.useEffect(() => {
     runIfRowSelectionIsEnabled(removeOutdatedSelection);
   }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
-  React.useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-    }
-  }, []);
 };

package/hooks/features/rowSelection/utils.js

@@ -6,8 +6,8 @@ import { selectedIdsLookupSelector } from "./gridRowSelectionSelector.js";
 import { gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { createSelector } from "../../../utils/createSelector.js";
 export const ROW_SELECTION_PROPAGATION_DEFAULT = {
-  parents: false,
-  descendants: false
+  parents: true,
+  descendants: true
 };
 function getGridRowGroupSelectableDescendants(apiRef, groupId) {
   const rowTree = gridRowTreeSelector(apiRef);

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

@@ -18,10 +18,6 @@ export interface GridRowsInternalCache {
      * Lookup containing the latest model at all time (even those not stored in the state yet).
      */
     dataRowIdToModelLookup: GridRowIdToModelLookup;
-    /**
-     * Lookup containing the latest ids at all time (even those not stored in the state yet).
-     */
-    dataRowIdToIdLookup: GridRowIdToIdLookup;
     /**
      * List of updates (partial or full) applied since the last time the state was synced with the cache.
      * It is used to build the tree.
@@ -59,7 +55,6 @@ export interface GridRowsState {
      */
     totalTopLevelRowCount: number;
     dataRowIdToModelLookup: GridRowIdToModelLookup;
-    dataRowIdToIdLookup: GridRowIdToIdLookup;
     additionalRowGroups?: {
         pinnedRows?: GridPinnedRowsState;
     };
@@ -74,7 +69,6 @@ export interface GridRowTreeCreationParams {
     previousTree: GridRowTreeConfig | null;
     previousTreeDepths: GridTreeDepths | null;
     updates: GridRowsPartialUpdates | GridRowsFullUpdate;
-    dataRowIdToIdLookup: GridRowIdToIdLookup;
     dataRowIdToModelLookup: GridRowIdToModelLookup;
     previousGroupsToFetch?: GridRowId[];
 }
@@ -91,10 +85,9 @@ export type GridRowTreeUpdatedGroupsManager = {
 export type GridRowTreeCreationValue = Pick<GridRowsState, 'groupingName' | 'tree' | 'treeDepths' | 'dataRowIds' | 'groupsToFetch'> & {
     updatedGroupsManager?: GridRowTreeUpdatedGroupsManager;
 };
-export type GridHydrateRowsValue = Pick<GridRowsState, 'tree' | 'treeDepths' | 'dataRowIds' | 'dataRowIdToIdLookup' | 'dataRowIdToModelLookup' | 'additionalRowGroups'>;
+export type GridHydrateRowsValue = Pick<GridRowsState, 'tree' | 'treeDepths' | 'dataRowIds' | 'dataRowIdToModelLookup' | 'additionalRowGroups'>;
 export type GridRowsPartialUpdateAction = 'insert' | 'modify' | 'remove';
 export type GridRowIdToModelLookup<R extends GridValidRowModel = GridValidRowModel> = Record<string, R>;
-export type GridRowIdToIdLookup = Record<string, GridRowId>;
 export type GridTreeDepths = {
     [depth: number]: number;
 };

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

@@ -3,7 +3,6 @@ export declare const gridRowCountSelector: import("../../..").OutputSelector<Gri
 export declare const gridRowsLoadingSelector: import("../../..").OutputSelector<GridStateCommunity, boolean | undefined>;
 export declare const gridTopLevelRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, number>;
 export declare const gridRowsLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowIdToModelLookup<import("../../..").GridValidRowModel>>;
-export declare const gridRowsDataRowIdToIdLookupSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowIdToIdLookup>;
 export declare const gridRowTreeSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig>;
 export declare const gridRowGroupsToFetchSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowId[] | undefined>;
 export declare const gridRowGroupingNameSelector: import("../../..").OutputSelector<GridStateCommunity, string>;

package/hooks/features/rows/gridRowsSelector.js

@@ -6,7 +6,6 @@ export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector
 
 // TODO rows v6: Rename
 export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIdToModelLookup);
-export const gridRowsDataRowIdToIdLookupSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIdToIdLookup);
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
 export const gridRowGroupsToFetchSelector = createSelector(gridRowsStateSelector, rows => rows.groupsToFetch);
 export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);