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

package/constants/gridClasses.d.ts

@@ -75,6 +75,14 @@ export interface GridClasses {
      * Styles applied to the cell element if it is at the right edge of a cell selection range.
      */
     'cell--rangeRight': string;
+    /**
+     * Styles applied to the cell element if it is pinned to the left.
+     */
+    'cell--pinnedLeft': string;
+    /**
+     * Styles applied to the cell element if it is pinned to the right.
+     */
+    'cell--pinnedRight': string;
     /**
      * Styles applied to the cell element if it is in a cell selection range.
      */
@@ -91,6 +99,10 @@ export interface GridClasses {
      * Styles applied to the cell checkbox element.
      */
     cellCheckbox: string;
+    /**
+     * Styles applied to the empty cell element.
+     */
+    cellEmpty: string;
     /**
      * Styles applied to the skeleton cell element.
      */
@@ -223,6 +235,14 @@ export interface GridClasses {
      * Styles applied to the columns panel row element.
      */
     columnsPanelRow: string;
+    /**
+     * Styles applied to the top container.
+     */
+    'container--top': string;
+    /**
+     * Styles applied to the bottom container.
+     */
+    'container--bottom': string;
     /**
      * Styles applied to the detail panel element.
      */
@@ -271,6 +291,18 @@ export interface GridClasses {
      * Styles applied to root of the boolean edit component.
      */
     editBooleanCell: string;
+    /**
+     * Styles applied to the filler row.
+     */
+    filler: string;
+    /**
+     * Styles applied to the filler row pinned left section.
+     */
+    'filler--pinnedLeft': string;
+    /**
+     * Styles applied to the filler row pinned right section.
+     */
+    'filler--pinnedRight': string;
     /**
      * Styles applied to the root of the filter form component.
      */
@@ -323,6 +355,10 @@ export interface GridClasses {
      * Styles applied to the main container element.
      */
     main: string;
+    /**
+     * Styles applied to the main container element when it has right pinned columns.
+     */
+    'main--hasPinnedRight': string;
     /**
      * Styles applied to the menu element.
      */
@@ -375,14 +411,6 @@ export interface GridClasses {
      * Styles applied to the pinned columns.
      */
     pinnedColumns: string;
-    /**
-     * Styles applied to the left pinned columns.
-     */
-    'pinnedColumns--left': string;
-    /**
-     * Styles applied to the right pinned columns.
-     */
-    'pinnedColumns--right': string;
     /**
      * Styles applied to the pinned column headers.
      */
@@ -427,6 +455,10 @@ export interface GridClasses {
      * Styles applied to the floating special row reorder cell element when it is dragged.
      */
     'row--dragging': string;
+    /**
+     * Styles applied to the first visible row element on every page of the grid.
+     */
+    'row--firstVisible': string;
     /**
      * Styles applied to the last visible row element on every page of the grid.
      */
@@ -472,6 +504,18 @@ export interface GridClasses {
      * Styles applied to the right scroll area element.
      */
     'scrollArea--right': string;
+    /**
+     * Styles applied to the scrollbars.
+     */
+    scrollbar: string;
+    /**
+     * Styles applied to the horizontal scrollbar.
+     */
+    'scrollbar--horizontal': string;
+    /**
+     * Styles applied to the horizontal scrollbar.
+     */
+    'scrollbar--vertical': string;
     /**
      * Styles applied to the footer selected row count element.
      */
@@ -488,6 +532,10 @@ export interface GridClasses {
      * Styles applied to the toolbar filter list element.
      */
     toolbarFilterList: string;
+    /**
+     * Styles applied the grid if `showColumnVerticalBorder={true}`.
+     */
+    withVerticalBorder: string;
     /**
      * Styles applied to cells, column header and other elements that have border.
      * Sets border color only.
@@ -497,6 +545,10 @@ export interface GridClasses {
      * Styles applied the cell if `showColumnVerticalBorder={true}`.
      */
     'cell--withRightBorder': string;
+    /**
+     * Styles applied the cell if `showColumnVerticalBorder={true}`.
+     */
+    'cell--withLeftBorder': string;
     /**
      * Styles applied the column header if `showColumnVerticalBorder={true}`.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellContent', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/hooks/core/gridCoreSelector.d.ts

@@ -0,0 +1,6 @@
+import { GridStateCommunity } from '../../models/gridStateCommunity';
+/**
+ * Get the theme state
+ * @category Core
+ */
+export declare const gridThemeSelector: (state: GridStateCommunity) => import("@mui/material").Theme;

package/hooks/core/gridCoreSelector.js

@@ -0,0 +1,5 @@
+/**
+ * Get the theme state
+ * @category Core
+ */
+export const gridThemeSelector = state => state.theme;

package/hooks/core/useGridInitialization.js

@@ -1,3 +1,5 @@
+import { useGridRefs } from './useGridRefs';
+import { useGridTheme } from './useGridTheme';
 import { useGridLoggerFactory } from './useGridLoggerFactory';
 import { useGridApiInitialization } from './useGridApiInitialization';
 import { useGridLocaleText } from './useGridLocaleText';
@@ -10,6 +12,8 @@ import { useGridStateInitialization } from './useGridStateInitialization';
  */
 export const useGridInitialization = (inputApiRef, props) => {
   const privateApiRef = useGridApiInitialization(inputApiRef, props);
+  useGridRefs(privateApiRef);
+  useGridTheme(privateApiRef);
   useGridLoggerFactory(privateApiRef, props);
   useGridStateInitialization(privateApiRef, props);
   useGridPipeProcessing(privateApiRef);

package/hooks/core/useGridRefs.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+export declare const useGridRefs: <PrivateApi extends GridPrivateApiCommon>(apiRef: React.MutableRefObject<PrivateApi>) => void;

package/hooks/core/useGridRefs.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export const useGridRefs = apiRef => {
+  const rootElementRef = React.useRef(null);
+  const mainElementRef = React.useRef(null);
+  const virtualScrollerRef = React.useRef(null);
+  apiRef.current.register('public', {
+    rootElementRef
+  });
+  apiRef.current.register('private', {
+    mainElementRef,
+    virtualScrollerRef
+  });
+};

package/hooks/core/useGridTheme.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
+export declare const useGridTheme: (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => void;

package/hooks/core/useGridTheme.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+export const useGridTheme = apiRef => {
+  const theme = useTheme();
+  if (!apiRef.current.state.theme) {
+    apiRef.current.state.theme = theme;
+  }
+  const isFirstEffect = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstEffect.current) {
+      isFirstEffect.current = false;
+    } else {
+      apiRef.current.setState(state => _extends({}, state, {
+        theme
+      }));
+    }
+  }, [apiRef, theme]);
+};

package/hooks/features/columnGrouping/useGridColumnGrouping.d.ts

@@ -7,4 +7,4 @@ export declare const columnGroupsStateInitializer: GridStateInitializer<Pick<Dat
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridColumnGrouping: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'columnGroupingModel' | 'experimentalFeatures'>) => void;
+export declare const useGridColumnGrouping: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'columnGroupingModel'>) => void;

package/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -41,16 +41,15 @@ const createGroupLookup = columnGroupingModel => {
   return _extends({}, groupLookup);
 };
 export const columnGroupsStateInitializer = (state, props, apiRef) => {
-  var _props$experimentalFe, _props$columnGrouping, _props$columnGrouping2, _apiRef$current$state;
-  if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.columnGrouping)) {
+  var _props$columnGrouping, _props$columnGrouping2, _apiRef$current$state;
+  if (!props.columnGroupingModel) {
     return state;
   }
   const columnFields = gridColumnFieldsSelector(apiRef);
   const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
   const groupLookup = createGroupLookup((_props$columnGrouping = props.columnGroupingModel) != null ? _props$columnGrouping : []);
   const unwrappedGroupingModel = unwrapGroupingColumnModel((_props$columnGrouping2 = props.columnGroupingModel) != null ? _props$columnGrouping2 : []);
-  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, // @ts-expect-error Move this part to `Pro` package
-  (_apiRef$current$state = apiRef.current.state.pinnedColumns) != null ? _apiRef$current$state : {});
+  const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(columnFields, unwrappedGroupingModel, (_apiRef$current$state = apiRef.current.state.pinnedColumns) != null ? _apiRef$current$state : {});
   const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => {
     var _unwrappedGroupingMod, _unwrappedGroupingMod2;
     return (_unwrappedGroupingMod = (_unwrappedGroupingMod2 = unwrappedGroupingModel[field]) == null ? void 0 : _unwrappedGroupingMod2.length) != null ? _unwrappedGroupingMod : 0;
@@ -70,7 +69,6 @@ export const columnGroupsStateInitializer = (state, props, apiRef) => {
  * @requires useGridParamsApi (method)
  */
 export const useGridColumnGrouping = (apiRef, props) => {
-  var _props$experimentalFe3;
   /**
    * API METHODS
    */
@@ -84,8 +82,8 @@ export const useGridColumnGrouping = (apiRef, props) => {
     return columnGroupLookup;
   }, [apiRef]);
   const columnGroupingApi = {
-    unstable_getColumnGroupPath: getColumnGroupPath,
-    unstable_getAllGroupDetails: getAllGroupDetails
+    getColumnGroupPath,
+    getAllGroupDetails
   };
   useGridApiMethod(apiRef, columnGroupingApi, 'public');
   const handleColumnIndexChange = React.useCallback(() => {
@@ -94,8 +92,6 @@ export const useGridColumnGrouping = (apiRef, props) => {
     apiRef.current.setState(state => {
       var _state$columns$ordere, _state$columns, _state$pinnedColumns;
       const orderedFields = (_state$columns$ordere = (_state$columns = state.columns) == null ? void 0 : _state$columns.orderedFields) != null ? _state$columns$ordere : [];
-
-      // @ts-expect-error Move this logic to `Pro` package
       const pinnedColumns = (_state$pinnedColumns = state.pinnedColumns) != null ? _state$pinnedColumns : {};
       const columnGroupsHeaderStructure = getColumnGroupsHeaderStructure(orderedFields, unwrappedGroupingModel, pinnedColumns);
       return _extends({}, state, {
@@ -106,10 +102,7 @@ export const useGridColumnGrouping = (apiRef, props) => {
     });
   }, [apiRef, props.columnGroupingModel]);
   const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
-    var _props$experimentalFe2, _apiRef$current$getPi, _apiRef$current$getPi2, _apiRef$current;
-    if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.columnGrouping)) {
-      return;
-    }
+    var _apiRef$current$getPi, _apiRef$current$getPi2, _apiRef$current;
     // @ts-expect-error Move this logic to `Pro` package
     const pinnedColumns = (_apiRef$current$getPi = (_apiRef$current$getPi2 = (_apiRef$current = apiRef.current).getPinnedColumns) == null ? void 0 : _apiRef$current$getPi2.call(_apiRef$current)) != null ? _apiRef$current$getPi : {};
     const columnFields = gridColumnFieldsSelector(apiRef);
@@ -131,7 +124,7 @@ export const useGridColumnGrouping = (apiRef, props) => {
         }
       });
     });
-  }, [apiRef, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.columnGrouping]);
+  }, [apiRef]);
   useGridApiEventHandler(apiRef, 'columnIndexChange', handleColumnIndexChange);
   useGridApiEventHandler(apiRef, 'columnsChange', () => {
     updateColumnGroupingState(props.columnGroupingModel);

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -5,20 +5,17 @@ import { GridSortColumnLookup } from '../sorting';
 import { GridFilterActiveItemsLookup } from '../filter';
 import { GridColumnGroupIdentifier, GridColumnIdentifier } from '../focus';
 import { GridColumnMenuState } from '../columnMenu';
-import { GridColumnVisibilityModel } from '../columns';
+import { GridPinnedColumnPosition, GridColumnVisibilityModel } from '../columns';
 import { GridGroupingStructure } from '../columnGrouping/gridColumnGroupsInterfaces';
 export interface UseGridColumnHeadersProps {
     innerRef?: React.Ref<HTMLDivElement>;
-    minColumnIndex?: number;
     visibleColumns: GridStateColDef[];
     sortColumnLookup: GridSortColumnLookup;
     filterColumnLookup: GridFilterActiveItemsLookup;
-    columnPositions: number[];
     columnHeaderTabIndexState: GridColumnIdentifier | null;
     columnGroupHeaderTabIndexState: GridColumnGroupIdentifier | null;
     columnHeaderFocus: GridColumnIdentifier | null;
     columnGroupHeaderFocus: GridColumnGroupIdentifier | null;
-    densityFactor: number;
     headerGroupingMaxDepth: number;
     columnMenuState: GridColumnMenuState;
     columnVisibility: GridColumnVisibilityModel;
@@ -26,32 +23,30 @@ export interface UseGridColumnHeadersProps {
     hasOtherElementInTabSequence: boolean;
 }
 export interface GetHeadersParams {
-    renderContext: GridRenderContext | null;
+    position?: GridPinnedColumnPosition;
+    renderContext?: GridRenderContext;
     minFirstColumn?: number;
     maxLastColumn?: number;
 }
+export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    ownerState: {
+        params?: GetHeadersParams;
+        leftOverflow?: number;
+    };
+}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
-    renderContext: GridRenderContext | null;
-    getColumnHeaders: (params?: GetHeadersParams, other?: {}) => React.JSX.Element | null;
+    renderContext: GridRenderContext;
+    getFiller: (params: GetHeadersParams | undefined, borderTop?: boolean) => React.JSX.Element;
+    getColumnHeaders: (params?: GetHeadersParams, other?: {}) => React.JSX.Element;
     getColumnsToRender: (params?: GetHeadersParams) => {
         renderedColumns: GridStateColDef[];
         firstColumnToRender: number;
         lastColumnToRender: number;
-        minFirstColumn: number;
-        maxLastColumn: number;
-    } | null;
+    };
     getColumnGroupHeaders: (params?: GetHeadersParams) => React.JSX.Element[] | null;
     isDragging: boolean;
-    getRootProps: (other?: {}) => {
-        style: {
-            minHeight: number;
-            maxHeight: number;
-            lineHeight: string;
-        };
-    };
     getInnerProps: () => {
         ref: ((instance: HTMLDivElement | null) => void) | null;
         role: string;
     };
-    headerHeight: number;
 };