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

package/models/gridSlotsComponent.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import type { GridIconSlotsComponent } from './gridIconSlotsComponent';
+import type { GridRowProps } from '../components/GridRow';
+import type { GridDetailPanelsProps } from '../components/GridDetailPanels';
+import type { GridPinnedRowsProps } from '../components/GridPinnedRows';
+import type { GridColumnHeadersProps } from '../components/GridColumnHeaders';
 export interface GridBaseSlots {
     /**
      * The custom Checkbox component used in the grid for both header and cells.
@@ -100,7 +104,12 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * Component responsible for rendering the column headers.
      * @default DataGridColumnHeaders
      */
-    columnHeaders: React.JSXElementConstructor<any>;
+    columnHeaders: React.JSXElementConstructor<GridColumnHeadersProps>;
+    /**
+     * Component responsible for rendering the detail panels.
+     * @default GridDetailPanels
+     */
+    detailPanels: React.JSXElementConstructor<GridDetailPanelsProps>;
     /**
      * Footer component rendered at the bottom of the grid viewport.
      * @default GridFooter
@@ -116,6 +125,11 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * @default null
      */
     toolbar: React.JSXElementConstructor<any> | null;
+    /**
+     * Pinned rows container.
+     * @ignore - do not document
+     */
+    pinnedRows: React.JSXElementConstructor<GridPinnedRowsProps>;
     /**
      * Loading overlay component rendered when the grid is in a loading state.
      * @default GridLoadingOverlay
@@ -146,6 +160,11 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * @default GridColumnsPanel
      */
     columnsPanel: React.JSXElementConstructor<any>;
+    /**
+     * Component used inside Grid Columns panel to manage columns.
+     * @default GridColumnsManagement
+     */
+    columnsManagement: React.JSXElementConstructor<any>;
     /**
      * Panel component wrapping the filters and columns panels.
      * @default GridPanel
@@ -155,5 +174,5 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * Component rendered for each row.
      * @default GridRow
      */
-    row: React.JSXElementConstructor<any>;
+    row: React.JSXElementConstructor<GridRowProps>;
 }

package/models/gridSlotsComponentsProps.d.ts

@@ -21,6 +21,7 @@ import { GridOverlayProps } from '../components/containers/GridOverlay';
 import { GridPanelProps } from '../components/panel/GridPanel';
 import type { GridRowProps } from '../components/GridRow';
 import type { GridCellProps } from '../components/cell/GridCell';
+import type { GridColumnsManagementProps } from '../components/columnsManagement/GridColumnsManagement';
 import type { GridRowCountProps } from '../components';
 export interface BaseCheckboxPropsOverrides {
 }
@@ -56,6 +57,8 @@ export interface ColumnMenuPropsOverrides {
 }
 export interface ColumnsPanelPropsOverrides {
 }
+export interface ColumnsManagementPropsOverrides {
+}
 export interface FilterPanelPropsOverrides {
 }
 export interface FooterPropsOverrides {
@@ -99,6 +102,7 @@ export interface GridSlotsComponentsProps {
     columnHeaderFilterIconButton?: SlotProps<ColumnHeaderFilterIconButtonProps, ColumnHeaderFilterIconButtonPropsOverrides>;
     columnMenu?: SlotProps<GridColumnMenuProps, ColumnMenuPropsOverrides>;
     columnsPanel?: SlotProps<GridColumnsPanelProps, ColumnsPanelPropsOverrides>;
+    columnsManagement?: SlotProps<GridColumnsManagementProps, ColumnsManagementPropsOverrides>;
     filterPanel?: SlotProps<GridFilterPanelProps, FilterPanelPropsOverrides>;
     footer?: SlotProps<GridFooterContainerProps, FooterPropsOverrides>;
     footerRowCount?: SlotProps<GridRowCountProps, FooterRowCountOverrides>;

package/models/gridStateCommunity.d.ts

@@ -1,4 +1,5 @@
-import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridDensityState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState, GridVirtualizationState } from '../hooks';
+import type { Theme } from '@mui/material/styles';
+import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridColumnPinningState, GridDensityState, GridDimensionsState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState, GridVirtualizationState } from '../hooks';
 import type { GridRowsMetaState } from '../hooks/features/rows/gridRowsMetaState';
 import type { GridEditingState } from './gridEditRowModel';
 import { GridHeaderFilteringState } from './gridHeaderFilteringModel';
@@ -8,6 +9,8 @@ import type { GridVisibleRowsLookupState } from '../hooks/features/filter/gridFi
  * The state of `DataGrid`.
  */
 export interface GridStateCommunity {
+    theme: Theme;
+    dimensions: GridDimensionsState;
     rows: GridRowsState;
     visibleRowsLookup: GridVisibleRowsLookupState;
     rowsMeta: GridRowsMetaState;
@@ -17,6 +20,7 @@ export interface GridStateCommunity {
     columns: GridColumnsState;
     columnGrouping: GridColumnsGroupingState;
     columnMenu: GridColumnMenuState;
+    pinnedColumns: GridColumnPinningState;
     sorting: GridSortingState;
     focus: GridFocusState;
     tabIndex: GridTabIndexState;

package/models/index.d.ts

@@ -6,7 +6,6 @@ export * from './gridFeatureMode';
 export * from './gridFilterItem';
 export * from './gridFilterModel';
 export * from './gridPaginationProps';
-export * from './gridRootContainerRef';
 export * from './gridRenderContextProps';
 export * from './gridRows';
 export * from './gridRowSelectionModel';

package/models/index.js

@@ -6,7 +6,6 @@ export * from './gridFeatureMode';
 export * from './gridFilterItem';
 export * from './gridFilterModel';
 export * from './gridPaginationProps';
-export * from './gridRootContainerRef';
 export * from './gridRenderContextProps';
 export * from './gridRows';
 export * from './gridRowSelectionModel';

package/models/params/index.d.ts

@@ -11,4 +11,3 @@ export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridPreferencePanelParams';
 export * from './gridMenuParams';
-export * from './gridRenderedRowsIntervalChangeParams';

package/models/params/index.js

@@ -10,5 +10,4 @@ export * from './gridHeaderSelectionCheckboxParams';
 export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridPreferencePanelParams';
-export * from './gridMenuParams';
-export * from './gridRenderedRowsIntervalChangeParams';
+export * from './gridMenuParams';

package/models/props/DataGridProps.d.ts

@@ -25,21 +25,11 @@ import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
 import { GridColumnGroupingModel } from '../gridColumnGrouping';
 import { GridPaginationModel } from '../gridPaginationProps';
 export interface GridExperimentalFeatures {
-    /**
-     * Enables the column grouping.
-     */
-    columnGrouping: boolean;
     /**
      * Emits a warning if the cell receives focus without also syncing the focus state.
      * Only works if NODE_ENV=test.
      */
     warnIfFocusStateIsNotSynced: boolean;
-    /**
-     * Enables accessibility improvements that will be enabled by default in v7.
-     * If you rely on the v6 ARIA attributes (e.g. for CSS selectors), this might be a breaking change.
-     * @default false
-     */
-    ariaV7: boolean;
 }
 /**
  * The props users can give to the `DataGrid` component.
@@ -173,7 +163,12 @@ export interface DataGridPropsWithDefaultValues {
      */
     disableMultipleRowSelection: boolean;
     /**
-     * If `true`, sorting with multiple columns is disabled.
+     * If `true`, the column sorting feature will be disabled.
+     * @default false
+     */
+    disableColumnSorting: boolean;
+    /**
+     * If `true`, the sorting with multiple columns is disabled.
      * @default false
      */
     disableMultipleColumnsSorting: boolean;

package/modern/DataGrid/DataGrid.js

@@ -5,7 +5,6 @@ import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../compon
 import { GridContextProvider } from '../context/GridContextProvider';
 import { useDataGridComponent } from './useDataGridComponent';
 import { useDataGridProps } from './useDataGridProps';
-import { DataGridVirtualScroller } from '../components/DataGridVirtualScroller';
 import { propValidatorsDataGrid, validateProps } from '../internals/utils/propValidation';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -25,9 +24,7 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
       sx: props.sx,
       ref: ref
     }, props.forwardedProps, {
-      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
-        VirtualScrollerComponent: DataGridVirtualScroller
-      }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
+      children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {}), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
     }))
   });
 });
@@ -131,6 +128,11 @@ DataGridRaw.propTypes = {
    * @default false
    */
   disableColumnSelector: PropTypes.bool,
+  /**
+   * If `true`, the column sorting feature will be disabled.
+   * @default false
+   */
+  disableColumnSorting: PropTypes.bool,
   /**
    * If `true`, the density selector is disabled.
    * @default false
@@ -167,8 +169,6 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    ariaV7: PropTypes.bool,
-    columnGrouping: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**

package/modern/DataGrid/useDataGridComponent.js

@@ -20,7 +20,7 @@ import { useGridRowSelectionPreProcessors } from '../hooks/features/rowSelection
 import { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
 import { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 import { useGridEvents } from '../hooks/features/events/useGridEvents';
-import { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
+import { dimensionsStateInitializer, useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
@@ -38,6 +38,7 @@ export const useDataGridComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);

package/modern/DataGrid/useDataGridProps.js

@@ -39,6 +39,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableEval: false,
   disableMultipleColumnsFiltering: false,
   disableMultipleRowSelection: false,
+  disableColumnSorting: false,
   disableMultipleColumnsSorting: false,
   disableRowSelectionOnClick: false,
   disableVirtualization: false,

package/modern/components/GridColumnHeaders.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { refType } from '@mui/utils';
@@ -10,18 +10,16 @@ import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
 import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
-const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
+const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
       innerRef,
       visibleColumns,
       sortColumnLookup,
       filterColumnLookup,
-      columnPositions,
       columnHeaderTabIndexState,
       columnGroupHeaderTabIndexState,
       columnHeaderFocus,
       columnGroupHeaderFocus,
-      densityFactor,
       headerGroupingMaxDepth,
       columnMenuState,
       columnVisibility,
@@ -31,7 +29,6 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const {
     isDragging,
-    getRootProps,
     getInnerProps,
     getColumnHeaders,
     getColumnGroupHeaders
@@ -40,12 +37,10 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
-    columnPositions,
     columnHeaderTabIndexState,
     columnGroupHeaderTabIndexState,
     columnHeaderFocus,
     columnGroupHeaderFocus,
-    densityFactor,
     headerGroupingMaxDepth,
     columnMenuState,
     columnVisibility,
@@ -54,7 +49,7 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHead
   });
   return /*#__PURE__*/_jsx(GridBaseColumnHeaders, _extends({
     ref: ref
-  }, getRootProps(other), {
+  }, other, {
     children: /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, getInnerProps(), {
@@ -89,14 +84,11 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
     field: PropTypes.string,
     open: PropTypes.bool.isRequired
   }).isRequired,
-  columnPositions: PropTypes.arrayOf(PropTypes.number).isRequired,
   columnVisibility: PropTypes.object.isRequired,
-  densityFactor: PropTypes.number.isRequired,
   filterColumnLookup: PropTypes.object.isRequired,
   hasOtherElementInTabSequence: PropTypes.bool.isRequired,
   headerGroupingMaxDepth: PropTypes.number.isRequired,
   innerRef: refType,
-  minColumnIndex: PropTypes.number,
   sortColumnLookup: PropTypes.object.isRequired,
   visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
 } : void 0;

package/modern/components/GridDetailPanels.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function GridDetailPanels(_) {
+  return null;
+}

package/modern/components/GridHeaders.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { fastMemo } from '../utils/fastMemo';
+import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { 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, gridTabIndexColumnGroupHeaderSelector, gridFocusColumnGroupHeaderSelector } from '../hooks/features/focus/gridFocusStateSelector';
+import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { gridColumnMenuSelector } from '../hooks/features/columnMenu/columnMenuSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+function GridHeaders() {
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
+  const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
+  const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  const columnGroupHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnGroupHeaderSelector);
+  const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
+  const columnGroupHeaderFocus = useGridSelector(apiRef, gridFocusColumnGroupHeaderSelector);
+  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);
+  const columnHeadersRef = React.useRef(null);
+  const columnsContainerRef = React.useRef(null);
+  apiRef.current.register('private', {
+    columnHeadersContainerElementRef: columnsContainerRef,
+    columnHeadersElementRef: columnHeadersRef
+  });
+  return /*#__PURE__*/_jsx(rootProps.slots.columnHeaders, {
+    ref: columnsContainerRef,
+    innerRef: columnHeadersRef,
+    visibleColumns: visibleColumns,
+    filterColumnLookup: filterColumnLookup,
+    sortColumnLookup: sortColumnLookup,
+    columnHeaderTabIndexState: columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
+    columnHeaderFocus: columnHeaderFocus,
+    columnGroupHeaderFocus: columnGroupHeaderFocus,
+    headerGroupingMaxDepth: headerGroupingMaxDepth,
+    columnMenuState: columnMenuState,
+    columnVisibility: columnVisibility,
+    columnGroupsHeaderStructure: columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence: hasOtherElementInTabSequence
+  });
+}
+const MemoizedGridHeaders = fastMemo(GridHeaders);
+export { MemoizedGridHeaders as GridHeaders };

package/modern/components/GridPinnedRows.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function GridPinnedRows(_) {
+  return null;
+}