[core] Use rootProps instead of options in Grid components except for classes

packages/grid/_modules_/grid/GridBody.tsx

@@ -8,13 +8,13 @@ import { GridAutoSizer } from './components/GridAutoSizer';
 import { GridViewport } from './components/GridViewport';
 import { Watermark } from './components/Watermark';
 import { GRID_RESIZE } from './constants/eventsConstants';
-import { GridRootPropsContext } from './context/GridRootPropsContext';
 import { GridOverlays } from './GridOverlays';
 import { ElementSize } from './models/elementSize';
+import { useGridRootProps } from './hooks/utils/useGridRootProps';
 
 export function GridBody() {
   const apiRef = useGridApiContext();
-  const rootProps = React.useContext(GridRootPropsContext)!;
+  const rootProps = useGridRootProps();
 
   const columnsHeaderRef = React.useRef<HTMLDivElement>(null);
   const columnsContainerRef = React.useRef<HTMLDivElement>(null);

packages/grid/_modules_/grid/GridErrorHandler.tsx

@@ -2,15 +2,15 @@ import * as React from 'react';
 import { GridMainContainer } from './components/containers/GridMainContainer';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { useGridApiContext } from './hooks/root/useGridApiContext';
-import { GridRootPropsContext } from './context/GridRootPropsContext';
 import { useGridState } from './hooks/features/core/useGridState';
 import { useLogger } from './hooks/utils/useLogger';
+import { useGridRootProps } from './hooks/utils/useGridRootProps';
 
 export function GridErrorHandler(props) {
   const { children } = props;
   const logger = useLogger('GridErrorHandler');
   const apiRef = useGridApiContext();
-  const propsContext = React.useContext(GridRootPropsContext)!;
+  const rootProps = useGridRootProps();
   const [gridState] = useGridState(apiRef);
 
   return (
@@ -23,7 +23,7 @@ export function GridErrorHandler(props) {
         <GridMainContainer>
           <apiRef.current.components.ErrorOverlay
             {...errorProps}
-            {...propsContext.componentsProps?.errorOverlay}
+            {...rootProps.componentsProps?.errorOverlay}
           />
         </GridMainContainer>
       )}

packages/grid/_modules_/grid/GridFooterPlaceholder.tsx

@@ -1,20 +1,20 @@
 import * as React from 'react';
 import { useGridApiContext } from './hooks/root/useGridApiContext';
-import { GridRootPropsContext } from './context/GridRootPropsContext';
+import { useGridRootProps } from './hooks/utils/useGridRootProps';
 
 export function GridFooterPlaceholder() {
   const apiRef = useGridApiContext();
-  const props = React.useContext(GridRootPropsContext)!;
+  const rootProps = useGridRootProps();
   const footerRef = React.useRef<HTMLDivElement>(null);
   apiRef.current.footerRef = footerRef;
 
-  if (props.hideFooter) {
+  if (rootProps.hideFooter) {
     return null;
   }
 
   return (
     <div ref={footerRef}>
-      <apiRef.current.components.Footer {...props.componentsProps?.footer} />
+      <apiRef.current.components.Footer {...rootProps.componentsProps?.footer} />
     </div>
   );
 }

packages/grid/_modules_/grid/GridHeaderPlaceholder.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { useGridApiContext } from './hooks/root/useGridApiContext';
-import { GridRootPropsContext } from './context/GridRootPropsContext';
+import { useGridRootProps } from './hooks/utils/useGridRootProps';
 
 export function GridHeaderPlaceholder() {
   const apiRef = useGridApiContext();
-  const props = React.useContext(GridRootPropsContext)!;
+  const rootProps = useGridRootProps();
   const headerRef = React.useRef<HTMLDivElement>(null);
   apiRef.current.headerRef = headerRef;
 
   return (
     <div ref={headerRef}>
-      <apiRef.current.components.Header {...props.componentsProps?.header} />
+      <apiRef.current.components.Header {...rootProps.componentsProps?.header} />
     </div>
   );
 }

packages/grid/_modules_/grid/GridOverlays.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { useGridApiContext } from './hooks/root/useGridApiContext';
-import { GridRootPropsContext } from './context/GridRootPropsContext';
 import { useGridSelector } from './hooks/features/core/useGridSelector';
 import { visibleGridRowCountSelector } from './hooks/features/filter/gridFilterSelector';
 import { gridRowCountSelector } from './hooks/features/rows/gridRowsSelector';
+import { useGridRootProps } from './hooks/utils/useGridRootProps';
 
 export function GridOverlays() {
   const apiRef = useGridApiContext();
-  const rootProps = React.useContext(GridRootPropsContext)!;
+  const rootProps = useGridRootProps();
 
   const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   const visibleRowCount = useGridSelector(apiRef, visibleGridRowCountSelector);

packages/grid/_modules_/grid/components/GridFooter.tsx

@@ -4,37 +4,37 @@ import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginat
 import { gridRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
 import { selectedGridRowsCountSelector } from '../hooks/features/selection/gridSelectionSelector';
 import { visibleGridRowCountSelector } from '../hooks/features/filter/gridFilterSelector';
-import { optionsSelector } from '../hooks/utils/optionsSelector';
 import { useGridApiContext } from '../hooks/root/useGridApiContext';
 import { GridRowCount } from './GridRowCount';
 import { GridSelectedRowCount } from './GridSelectedRowCount';
 import { GridFooterContainer, GridFooterContainerProps } from './containers/GridFooterContainer';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 
 export const GridFooter = React.forwardRef<HTMLDivElement, GridFooterContainerProps>(
   function GridFooter(props, ref) {
     const apiRef = useGridApiContext();
+    const rootProps = useGridRootProps();
     const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
-    const options = useGridSelector(apiRef, optionsSelector);
     const selectedRowCount = useGridSelector(apiRef, selectedGridRowsCountSelector);
     const paginationState = useGridSelector(apiRef, gridPaginationSelector);
     const visibleRowCount = useGridSelector(apiRef, visibleGridRowCountSelector);
 
     const SelectedRowCountElement =
-      !options.hideFooterSelectedRowCount && selectedRowCount > 0 ? (
+      !rootProps.hideFooterSelectedRowCount && selectedRowCount > 0 ? (
         <GridSelectedRowCount selectedRowCount={selectedRowCount} />
       ) : (
         <div />
       );
 
     const RowCountElement =
-      !options.hideFooterRowCount && !options.pagination ? (
+      !rootProps.hideFooterRowCount && !rootProps.pagination ? (
         <GridRowCount rowCount={totalRowCount} visibleRowCount={visibleRowCount} />
       ) : null;
 
     const PaginationComponent =
-      !!options.pagination &&
+      !!rootProps.pagination &&
       paginationState.pageSize != null &&
-      !options.hideFooterPagination &&
+      !rootProps.hideFooterPagination &&
       apiRef?.current.components.Pagination;
 
     const PaginationElement = PaginationComponent && (

packages/grid/_modules_/grid/components/GridPagination.tsx

@@ -4,10 +4,9 @@ import { Theme } from '@material-ui/core/styles';
 import { makeStyles } from '@material-ui/styles';
 import { useGridSelector } from '../hooks/features/core/useGridSelector';
 import { gridPaginationSelector } from '../hooks/features/pagination/gridPaginationSelector';
-import { optionsSelector } from '../hooks/utils/optionsSelector';
 import { useGridApiContext } from '../hooks/root/useGridApiContext';
 import { createTheme, getMuiVersion } from '../utils/utils';
-import { GridRootPropsContext } from '../context/GridRootPropsContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 
 const defaultTheme = createTheme();
 // Used to hide the Rows per page selector on small devices
@@ -44,15 +43,13 @@ export const GridPagination = React.forwardRef<
 >(function GridPagination(props, ref) {
   const classes = useStyles();
   const apiRef = useGridApiContext();
-  const rootProps = React.useContext(GridRootPropsContext)!;
+  const rootProps = useGridRootProps();
   const paginationState = useGridSelector(apiRef, gridPaginationSelector);
 
   const lastPage = React.useMemo(
     () => Math.floor(paginationState.rowCount / (paginationState.pageSize || 1)),
     [paginationState.rowCount, paginationState.pageSize],
   );
-  const options = useGridSelector(apiRef, optionsSelector);
-
   const handlePageSizeChange = React.useCallback(
     (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
       const newPageSize = Number(event.target.value);
@@ -116,8 +113,8 @@ export const GridPagination = React.forwardRef<
       count={paginationState.rowCount}
       page={paginationState.page <= lastPage ? paginationState.page : lastPage}
       rowsPerPageOptions={
-        options.rowsPerPageOptions?.includes(paginationState.pageSize)
-          ? options.rowsPerPageOptions
+        rootProps.rowsPerPageOptions?.includes(paginationState.pageSize)
+          ? rootProps.rowsPerPageOptions
           : []
       }
       rowsPerPage={paginationState.pageSize}

packages/grid/_modules_/grid/components/GridViewport.tsx

@@ -23,13 +23,14 @@ import {
   gridViewportSizesSelector,
   gridScrollBarSizeSelector,
 } from '../hooks/root/gridContainerSizesSelector';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 
 type ViewportType = React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;
 
 export const GridViewport: ViewportType = React.forwardRef<HTMLDivElement, {}>(
   function GridViewport(props, renderingZoneRef) {
     const apiRef = useGridApiContext();
-
+    const rootProps = useGridRootProps();
     const options = useGridSelector(apiRef, optionsSelector);
     const containerSizes = useGridSelector(apiRef, gridContainerSizesSelector);
     const viewportSizes = useGridSelector(apiRef, gridViewportSizesSelector);
@@ -73,15 +74,15 @@ export const GridViewport: ViewportType = React.forwardRef<HTMLDivElement, {}>(
             lastColIdx={renderState.renderContext!.lastColIdx!}
             hasScrollX={scrollBarState.hasScrollX}
             hasScrollY={scrollBarState.hasScrollY}
-            showCellRightBorder={!!options.showCellRightBorder}
-            extendRowFullWidth={!options.disableExtendRowFullWidth}
+            showCellRightBorder={!!rootProps.showCellRightBorder}
+            extendRowFullWidth={!rootProps.disableExtendRowFullWidth}
             rowIndex={renderState.renderContext!.firstRowIdx! + idx}
             cellFocus={cellFocus}
             cellTabIndex={cellTabIndex}
             isSelected={selectionLookup[id] !== undefined}
             editRowState={editRowsState[id]}
             cellClassName={options.classes?.cell}
-            getCellClassName={options.getCellClassName}
+            getCellClassName={rootProps.getCellClassName}
           />
           <GridEmptyCell width={renderState.renderContext!.rightEmptyWidth} height={rowHeight} />
         </GridRow>

packages/grid/_modules_/grid/components/columnHeaders/GridColumnUnsortedIcon.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { useGridSelector } from '../../hooks/features/core/useGridSelector';
-import { optionsSelector } from '../../hooks/utils/optionsSelector';
 import { useGridApiContext } from '../../hooks/root/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 export const GridColumnUnsortedIcon = React.memo(function GridColumnHeaderSortIcon(props) {
   const apiRef = useGridApiContext();
-  const options = useGridSelector(apiRef, optionsSelector);
-  const [nextSortDirection] = options.sortingOrder;
+  const rootProps = useGridRootProps();
+  const [nextSortDirection] = rootProps.sortingOrder!;
 
   const Icon =
     nextSortDirection === 'asc'

packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx

@@ -3,15 +3,14 @@ import { useForkRef } from '@material-ui/core/utils';
 import { GRID_CELL_NAVIGATION_KEY_DOWN } from '../../constants/eventsConstants';
 import { GridCellParams } from '../../models/params/gridCellParams';
 import { isNavigationKey, isSpaceKey } from '../../utils/keyboardUtils';
-import { useGridSelector } from '../../hooks/features/core/useGridSelector';
-import { optionsSelector } from '../../hooks/utils/optionsSelector';
 import { useGridApiContext } from '../../hooks/root/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 export const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, GridCellParams>(
   function GridCellCheckboxRenderer(props, ref) {
     const { field, id, value, tabIndex, hasFocus } = props;
     const apiRef = useGridApiContext();
-    const options = useGridSelector(apiRef, optionsSelector);
+    const rootProps = useGridRootProps();
     const checkboxElement = React.useRef<HTMLInputElement | null>(null);
 
     const handleRef = useForkRef(checkboxElement, ref);
@@ -53,7 +52,7 @@ export const GridCellCheckboxForwardRef = React.forwardRef<HTMLInputElement, Gri
     const CheckboxComponent = apiRef?.current.components.Checkbox!;
 
     const isSelectable =
-      !options.isRowSelectable || options.isRowSelectable(apiRef!.current.getRowParams(id));
+      !rootProps.isRowSelectable || rootProps.isRowSelectable(apiRef!.current.getRowParams(id));
 
     return (
       <CheckboxComponent

packages/grid/_modules_/grid/components/containers/GridRoot.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { useForkRef } from '@material-ui/core/utils';
 import NoSsr from '@material-ui/core/NoSsr';
-import { GridRootPropsContext } from '../../context/GridRootPropsContext';
 import { optionsSelector } from '../../hooks/utils/optionsSelector';
 import { GridRootContainerRef } from '../../models/gridRootContainerRef';
 import { useStyles } from './GridRootStyles';
 import { visibleGridColumnsLengthSelector } from '../../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../../hooks/features/core/useGridSelector';
 import { useGridState } from '../../hooks/features/core/useGridState';
 import { useGridApiContext } from '../../hooks/root/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 export type GridRootProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -19,7 +19,7 @@ export const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function
 ) {
   const classes = useStyles();
   const apiRef = useGridApiContext();
-  const rootProps = React.useContext(GridRootPropsContext)!;
+  const rootProps = useGridRootProps();
   const { children, className: classNameProp, ...other } = props;
   const visibleColumnsLength = useGridSelector(apiRef, visibleGridColumnsLengthSelector);
   const [gridState] = useGridState(apiRef!);
@@ -33,12 +33,12 @@ export const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function
       <div
         ref={handleRef}
         className={clsx(classes.root, options.classes?.root, rootProps.className, classNameProp, {
-          'MuiDataGrid-autoHeight': gridState.options.autoHeight,
+          'MuiDataGrid-autoHeight': rootProps.autoHeight,
         })}
         role="grid"
         aria-colcount={visibleColumnsLength}
         aria-rowcount={gridState.rows.totalRowCount}
-        aria-multiselectable={!gridState.options.disableMultipleSelection}
+        aria-multiselectable={!rootProps.disableMultipleSelection}
         aria-label={rootProps['aria-label']}
         aria-labelledby={rootProps['aria-labelledby']}
         style={rootProps.style}

packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnsMenuItem.tsx

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import MenuItem from '@material-ui/core/MenuItem';
-import { useGridSelector } from '../../../hooks/features/core/useGridSelector';
 import { GridPreferencePanelsValue } from '../../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
-import { optionsSelector } from '../../../hooks/utils/optionsSelector';
 import { useGridApiContext } from '../../../hooks/root/useGridApiContext';
 import { GridFilterItemProps } from './GridFilterItemProps';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
 export const GridColumnsMenuItem = (props: GridFilterItemProps) => {
   const { onClick } = props;
   const apiRef = useGridApiContext();
-  const options = useGridSelector(apiRef, optionsSelector);
+  const rootProps = useGridRootProps();
 
   const showColumns = React.useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
@@ -19,7 +18,7 @@ export const GridColumnsMenuItem = (props: GridFilterItemProps) => {
     [apiRef, onClick],
   );
 
-  if (options.disableColumnSelector) {
+  if (rootProps.disableColumnSelector) {
     return null;
   }
 

packages/grid/_modules_/grid/components/menu/columnMenu/GridFilterMenuItem.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import MenuItem from '@material-ui/core/MenuItem';
-import { useGridSelector } from '../../../hooks/features/core/useGridSelector';
-import { optionsSelector } from '../../../hooks/utils/optionsSelector';
 import { useGridApiContext } from '../../../hooks/root/useGridApiContext';
 import { GridFilterItemProps } from './GridFilterItemProps';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
 export const GridFilterMenuItem = (props: GridFilterItemProps) => {
   const { column, onClick } = props;
   const apiRef = useGridApiContext();
-  const options = useGridSelector(apiRef, optionsSelector);
+  const rootProps = useGridRootProps();
 
   const showFilter = React.useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
@@ -18,7 +17,7 @@ export const GridFilterMenuItem = (props: GridFilterItemProps) => {
     [apiRef, column?.field, onClick],
   );
 
-  if (options.disableColumnFilter || !column?.filterable) {
+  if (rootProps.disableColumnFilter || !column?.filterable) {
     return null;
   }
 

packages/grid/_modules_/grid/components/menu/columnMenu/HideGridColMenuItem.tsx

@@ -2,13 +2,12 @@ import * as React from 'react';
 import MenuItem from '@material-ui/core/MenuItem';
 import { GridFilterItemProps } from './GridFilterItemProps';
 import { useGridApiContext } from '../../../hooks/root/useGridApiContext';
-import { useGridSelector } from '../../../hooks/features/core/useGridSelector';
-import { optionsSelector } from '../../../hooks/utils/optionsSelector';
+import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
 export const HideGridColMenuItem = (props: GridFilterItemProps) => {
   const { column, onClick } = props;
   const apiRef = useGridApiContext();
-  const options = useGridSelector(apiRef, optionsSelector);
+  const rootProps = useGridRootProps();
   const timeoutRef = React.useRef<any>();
 
   const toggleColumn = React.useCallback(
@@ -25,7 +24,7 @@ export const HideGridColMenuItem = (props: GridFilterItemProps) => {
     return () => clearTimeout(timeoutRef.current);
   }, []);
 
-  if (options.disableColumnSelector) {
+  if (rootProps.disableColumnSelector) {
     return null;
   }