[DataGrid] Replace style-components with @material-ui/styles

packages/grid/data-grid/package.json

@@ -39,8 +39,7 @@
   },
   "peerDependencies": {
     "@material-ui/core": "^4.9.12",
-    "react": "^16.8.0",
-    "styled-components": "^5.1.0"
+    "react": "^16.8.0"
   },
   "setupFiles": [
     "<rootDir>/src/setupTests.js"

packages/grid/x-grid-modules/package.json

@@ -24,8 +24,7 @@
   },
   "peerDependencies": {
     "@material-ui/core": "^4.9.12",
-    "react": "^16.8.0",
-    "styled-components": "^5.1.0"
+    "react": "^16.8.0"
   },
   "scripts": {
     "precommit": "npm run lint",

packages/grid/x-grid-modules/src/GridComponent.tsx

@@ -11,7 +11,9 @@ import {
 } from './hooks/features';
 import { DEFAULT_GRID_OPTIONS, ElementSize, RootContainerRef } from './models';
 import { COMPONENT_ERROR, DATA_CONTAINER_CSS_CLASS } from './constants';
-import { ColumnsContainer, DataContainer, GridRoot } from './components/styled-wrappers';
+import { GridRoot } from './components/styled-wrappers/grid-root';
+import { DataContainer } from './components/styled-wrappers/data-container';
+import { ColumnsContainer } from './components/styled-wrappers/columns-container';
 import { useVirtualRows } from './hooks/virtualization';
 import {
   ApiContext,
@@ -71,9 +73,7 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
     // We are handling error here, to set up the handler as early as possible and be able to catch error thrown at init time.
     setErrorState(args);
   };
-  React.useEffect(() => {
-    return apiRef!.current.subscribeEvent(COMPONENT_ERROR, errorHandler);
-  }, [apiRef]);
+  React.useEffect(() => apiRef!.current.subscribeEvent(COMPONENT_ERROR, errorHandler), [apiRef]);
 
   React.useEffect(() => {
     apiRef!.current.showError(props.error);
@@ -190,12 +190,11 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
                 {customComponents.headerComponent}
                 <div className="main-grid-container">
                   <Watermark licenseStatus={props.licenseStatus} />
-                  <ColumnsContainer ref={columnsContainerRef}>
+                  <ColumnsContainer ref={columnsContainerRef} height={internalOptions.headerHeight}>
                     <ColumnsHeader
                       ref={columnsHeaderRef}
                       columns={internalColumns.visible || []}
                       hasScrollX={!!renderCtx?.hasScrollX}
-                      headerHeight={internalOptions.headerHeight}
                       onResizeColumn={onResizeColumn}
                       renderCtx={renderCtx}
                     />

packages/grid/x-grid-modules/src/components/cell.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Alignement, CellValue } from '../models';
 import { CELL_CSS_CLASS } from '../constants/cssClassesConstants';
 import { classnames } from '../utils';
+import { OptionsContext } from './options-context';
 
 export interface GridCellProps {
   field?: string;
@@ -37,6 +38,7 @@ export const Cell: React.FC<GridCellProps> = React.memo(
       align !== 'left' ? align : '',
     );
     const valueToRender = formattedValue || value;
+    const { rowHeight } = React.useContext(OptionsContext);
 
     return (
       <div
@@ -47,7 +49,13 @@ export const Cell: React.FC<GridCellProps> = React.memo(
         data-colindex={colIndex}
         data-rowindex={rowIndex}
         aria-colindex={colIndex}
-        style={{ minWidth: width, maxWidth: width }}
+        style={{
+          minWidth: width,
+          maxWidth: width,
+          lineHeight: `${rowHeight - 1}px`,
+          minHeight: rowHeight,
+          maxHeight: rowHeight,
+        }}
         tabIndex={tabIndex}
       >
         {children || valueToRender?.toString()}

packages/grid/x-grid-modules/src/components/checkbox-renderer.tsx

@@ -1,14 +1,9 @@
 import * as React from 'react';
 import Checkbox from '@material-ui/core/Checkbox';
-import styled from 'styled-components';
 import { SelectionChangeParams } from '../models/params/selectionChangeParams';
 import { ColParams } from '../models/params/colParams';
 import { CellParams } from '../models/params/cellParams';
 
-const CheckboxInputContainer = styled.div`
-  display: block;
-`;
-
 export const HeaderCheckbox: React.FC<ColParams> = React.memo(({ api }) => {
   const [isChecked, setChecked] = React.useState(false);
   const [isIndeterminate, setIndeterminate] = React.useState(false);
@@ -32,15 +27,15 @@ export const HeaderCheckbox: React.FC<ColParams> = React.memo(({ api }) => {
     return api.onSelectionChange(selectionChange);
   }, [api, selectionChange]);
   return (
-    <CheckboxInputContainer>
+    <div>
       <Checkbox
         indeterminate={isIndeterminate}
         checked={isChecked}
         onChange={handleChange}
         className="checkbox-input"
         inputProps={{ 'aria-label': 'Select All Rows checkbox' }}
       />
-    </CheckboxInputContainer>
+    </div>
   );
 });
 HeaderCheckbox.displayName = 'HeaderCheckbox';
@@ -51,14 +46,14 @@ export const CellCheckboxRenderer: React.FC<CellParams> = React.memo(({ api, row
   };
 
   return (
-    <CheckboxInputContainer>
+    <div>
       <Checkbox
         checked={!!value}
         onChange={handleChange}
         className="checkbox-input"
         inputProps={{ 'aria-label': 'Select Row checkbox' }}
       />
-    </CheckboxInputContainer>
+    </div>
   );
 });
 CellCheckboxRenderer.displayName = 'CellCheckboxRenderer';

packages/grid/x-grid-modules/src/components/column-header-item.tsx

@@ -6,20 +6,22 @@ import { classnames } from '../utils';
 import { ColumnHeaderSortIcon } from './column-header-sort-icon';
 import { ColumnHeaderTitle } from './column-header-title';
 import { ColumnHeaderSeparator } from './column-header-separator';
+import { OptionsContext } from './options-context';
 
 interface ColumnHeaderItemProps {
   column: ColDef;
-  headerHeight: number;
   colIndex: number;
   onResizeColumn?: (c: any) => void;
 }
 
 export const ColumnHeaderItem = React.memo(
-  ({ column, colIndex, headerHeight, onResizeColumn }: ColumnHeaderItemProps) => {
+  ({ column, colIndex, onResizeColumn }: ColumnHeaderItemProps) => {
     const api = React.useContext(ApiContext);
+    const { headerHeight, showColumnRightBorder } = React.useContext(OptionsContext);
 
     const cssClass = classnames(
       HEADER_CELL_CSS_CLASS,
+      showColumnRightBorder ? 'with-border' : '',
       column.headerClassName,
       column.headerAlign !== 'left' ? column.headerAlign : '',
       { sortable: column.sortable },
@@ -66,6 +68,7 @@ export const ColumnHeaderItem = React.memo(
             direction={column.sortDirection}
             index={column.sortIndex}
             hide={column.hideSortIcons}
+            height={headerHeight}
           />
         )}
         {headerComponent || (
@@ -80,6 +83,7 @@ export const ColumnHeaderItem = React.memo(
             direction={column.sortDirection}
             index={column.sortIndex}
             hide={column.hideSortIcons}
+            height={headerHeight}
           />
         )}
         <ColumnHeaderSeparator resizable={column.resizable} onResize={onResize} />

packages/grid/x-grid-modules/src/components/column-header-separator.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useIcons } from '../hooks/utils/useIcons';
+import { OptionsContext } from './options-context';
 
 export interface ColumnHeaderSeparatorProps {
   resizable: boolean | undefined;
@@ -9,6 +10,7 @@ export interface ColumnHeaderSeparatorProps {
 export const ColumnHeaderSeparator: React.FC<ColumnHeaderSeparatorProps> = React.memo(
   ({ onResize, resizable }) => {
     const icons = useIcons();
+    const { showColumnRightBorder, headerHeight } = React.useContext(OptionsContext);
 
     const resizeIconProps = {
       className: `icon separator ${resizable ? 'resizable' : ''}`,
@@ -17,7 +19,14 @@ export const ColumnHeaderSeparator: React.FC<ColumnHeaderSeparatorProps> = React
 
     const icon = React.createElement(icons!.columnResize!, resizeIconProps);
 
-    return <div className="column-separator">{icon}</div>;
+    return (
+      <div
+        className="column-separator"
+        style={{ minHeight: headerHeight, opacity: showColumnRightBorder ? 0 : 1 }}
+      >
+        {icon}
+      </div>
+    );
   },
 );
 ColumnHeaderSeparator.displayName = 'ColumnHeaderSeparator';

packages/grid/x-grid-modules/src/components/column-header-sort-icon.tsx

@@ -8,15 +8,16 @@ export interface ColumnHeaderSortIconProps {
   direction: SortDirection;
   index: number | undefined;
   hide?: boolean;
+  height: number;
 }
 
-const getIcon = (icons: IconsOptions, direction: SortDirection): React.ReactNode =>
+const getIcon = (icons: IconsOptions, direction: SortDirection, height: number): React.ReactNode =>
   direction === 'asc'
-    ? React.createElement(icons!.columnSortedAscending!)
-    : React.createElement(icons!.columnSortedDescending!);
+    ? React.createElement(icons!.columnSortedAscending!, { styles: { minHeight: height } })
+    : React.createElement(icons!.columnSortedDescending!, { styles: { minHeight: height } });
 
 export const ColumnHeaderSortIcon: React.FC<ColumnHeaderSortIconProps> = React.memo(
-  ({ direction, index, hide }) => {
+  ({ direction, index, hide, height }) => {
     const icons = useIcons();
 
     if (hide || direction == null) {
@@ -28,13 +29,13 @@ export const ColumnHeaderSortIcon: React.FC<ColumnHeaderSortIconProps> = React.m
         {index != null && (
           <Badge badgeContent={index} color="default">
             <IconButton aria-label="Sort" size="small">
-              {getIcon(icons, direction)}
+              {getIcon(icons, direction, height)}
             </IconButton>
           </Badge>
         )}
         {index == null && (
           <IconButton aria-label="Sort" size="small">
-            {getIcon(icons, direction)}
+            {getIcon(icons, direction, height)}
           </IconButton>
         )}
       </span>

packages/grid/x-grid-modules/src/components/column-headers.tsx

@@ -6,17 +6,15 @@ import { LeftEmptyCell, RightEmptyCell } from './cell';
 
 export interface ColumnHeadersItemCollectionProps {
   columns: Columns;
-  headerHeight: number;
   onResizeColumn?: (col: ColDef) => void;
 }
 export const ColumnHeaderItemCollection: React.FC<ColumnHeadersItemCollectionProps> = React.memo(
-  ({ headerHeight, onResizeColumn, columns }) => {
+  ({ onResizeColumn, columns }) => {
     const items = columns.map((col, idx) => (
       <ColumnHeaderItem
         key={col.field}
         column={col}
         colIndex={idx}
-        headerHeight={headerHeight}
         onResizeColumn={onResizeColumn}
       />
     ));
@@ -29,15 +27,14 @@ ColumnHeaderItemCollection.displayName = 'ColumnHeaderItemCollection';
 export interface ColumnsHeaderProps {
   columns: Columns;
   hasScrollX: boolean;
-  headerHeight: number;
   onResizeColumn?: (col: ColDef) => void;
   renderCtx: Partial<RenderContextProps> | null;
 }
 
 export const ColumnsHeader = React.memo(
   React.forwardRef<HTMLDivElement, ColumnsHeaderProps>(
-    ({ columns, hasScrollX, headerHeight, onResizeColumn, renderCtx }, columnsHeaderRef) => {
-      const wrapperCssClasses = `material-col-cell-wrapper ${hasScrollX ? 'scroll' : ''}`;
+    ({ columns, hasScrollX, onResizeColumn, renderCtx }, columnsHeaderRef) => {
+      const wrapperCssClasses = `MuiDataGrid-col-cell-wrapper ${hasScrollX ? 'scroll' : ''}`;
       const api = React.useContext(ApiContext);
 
       if (!api) {
@@ -75,11 +72,7 @@ export const ColumnsHeader = React.memo(
           style={{ minWidth: renderCtx?.totalSizes?.width }}
         >
           <LeftEmptyCell key="left-empty" width={renderCtx?.leftEmptyWidth} />
-          <ColumnHeaderItemCollection
-            columns={renderedCols}
-            onResizeColumn={onResizeColumn}
-            headerHeight={headerHeight}
-          />
+          <ColumnHeaderItemCollection columns={renderedCols} onResizeColumn={onResizeColumn} />
           <RightEmptyCell key="right-empty" width={renderCtx?.rightEmptyWidth} />
         </div>
       );

packages/grid/x-grid-modules/src/components/options-context.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { GridOptions } from '../models';
+import { DEFAULT_GRID_OPTIONS, GridOptions } from '../models';
 
-export const OptionsContext = React.createContext<GridOptions | undefined>(undefined);
+export const OptionsContext = React.createContext<GridOptions>(DEFAULT_GRID_OPTIONS);

packages/grid/x-grid-modules/src/components/row.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { RowId } from '../models';
 import { ROW_CSS_CLASS } from '../constants/cssClassesConstants';
+import { OptionsContext } from './options-context';
+import { classnames } from '../utils';
 
 export interface RowProps {
   id: RowId;
@@ -10,17 +12,22 @@ export interface RowProps {
 }
 
 export const Row: React.FC<RowProps> = ({ selected, id, className, rowIndex, children }) => {
-  const cssClasses = (selected ? 'selected ' : ' ') + (className || '');
   const ariaRowIndex = rowIndex + 2; // 1 for the header row and 1 as it's 1 based
+  const { rowHeight } = React.useContext(OptionsContext);
+
   return (
     <div
       key={id}
       data-id={id}
       data-rowindex={rowIndex}
       role="row"
-      className={`${ROW_CSS_CLASS} ${cssClasses}`}
+      className={classnames(ROW_CSS_CLASS, className, { selected })}
       aria-rowindex={ariaRowIndex}
       aria-selected={selected}
+      style={{
+        maxHeight: rowHeight,
+        minHeight: rowHeight,
+      }}
     >
       {children}
     </div>

packages/grid/x-grid-modules/src/components/styled-wrappers/columns-container.tsx

@@ -2,8 +2,17 @@ import * as React from 'react';
 import { DivProps } from './grid-root';
 import { classnames } from '../../utils';
 
-export const ColumnsContainer = React.forwardRef<HTMLDivElement, DivProps>((props, ref) => {
-  const { className, ...other } = props;
-  return <div ref={ref} className={classnames('columns-container', className)} {...other} />;
-});
+export const ColumnsContainer = React.forwardRef<HTMLDivElement, DivProps & { height: number }>(
+  (props, ref) => {
+    const { className, height, style, ...other } = props;
+    return (
+      <div
+        ref={ref}
+        className={classnames('columns-container', className)}
+        {...other}
+        style={{ minHeight: height, maxHeight: height, lineHeight: `${height}px`, ...style }}
+      />
+    );
+  },
+);
 ColumnsContainer.displayName = 'ColumnsContainer';