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

package/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/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/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/README.md

@@ -1,7 +1,7 @@
-# MUI X Data Grid
+# MUI X Data Grid
 
 This package is the Community plan edition of the data grid component.
-It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
 
 ## Installation
 
@@ -15,7 +15,7 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.4.1",
+  "@mui/material": "^5.15.0",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },

package/components/GridColumnHeaders.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { UseGridColumnHeadersProps } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, Omit<UseGridColumnHeadersProps, 'innerRef'> {
+export interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, Omit<UseGridColumnHeadersProps, 'innerRef'> {
+    ref?: React.Ref<HTMLDivElement>;
     innerRef?: React.Ref<HTMLDivElement>;
 }
-declare const MemoizedGridColumnHeaders: React.ForwardRefExoticComponent<GridColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
+declare const MemoizedGridColumnHeaders: React.ForwardRefExoticComponent<Omit<GridColumnHeadersProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { MemoizedGridColumnHeaders as GridColumnHeaders };

package/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/components/GridDetailPanels.d.ts

@@ -0,0 +1,5 @@
+import type { VirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+export interface GridDetailPanelsProps {
+    virtualScroller: VirtualScroller;
+}
+export declare function GridDetailPanels(_: GridDetailPanelsProps): null;

package/components/GridDetailPanels.js

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

package/components/GridHeaders.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+declare function GridHeaders(): React.JSX.Element;
+declare const MemoizedGridHeaders: typeof GridHeaders;
+export { MemoizedGridHeaders as GridHeaders };

package/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/components/GridPinnedRows.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { VirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+export interface GridPinnedRowsProps extends React.HTMLAttributes<HTMLDivElement> {
+    position: 'top' | 'bottom';
+    virtualScroller: VirtualScroller;
+}
+export declare function GridPinnedRows(_: GridPinnedRowsProps): null;

package/components/GridPinnedRows.js

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

package/components/GridRow.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { GridRowId, GridRowModel } from '../models/gridRows';
-import { GridStateColDef } from '../models/colDef/gridColDef';
+import type { GridPinnedColumns } from '../hooks/features/columns';
+import type { GridStateColDef } from '../models/colDef/gridColDef';
+import { type GridDimensions } from '../hooks/features/dimensions';
 export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
     rowId: GridRowId;
     selected: boolean;
@@ -10,12 +12,12 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     index: number;
     rowHeight: number | 'auto';
-    containerWidth: number;
+    dimensions: GridDimensions;
     firstColumnToRender: number;
     lastColumnToRender: number;
     visibleColumns: GridStateColDef[];
     renderedColumns: GridStateColDef[];
-    position: 'left' | 'center' | 'right';
+    pinnedColumns: GridPinnedColumns;
     /**
      * Determines which cell has focus.
      * If `null`, no cell in this row has focus.
@@ -27,7 +29,8 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     tabbableCell: string | null;
     row?: GridRowModel;
-    isLastVisible?: boolean;
+    isFirstVisible: boolean;
+    isLastVisible: boolean;
     focusedCellColumnIndexNotInRange?: number;
     isNotVisible?: boolean;
     onClick?: React.MouseEventHandler<HTMLDivElement>;