Merge pull request #78 from Apollo-Spreadsheet/feat/mui-v5.6.1

Feat/mui v5.6.1

.eslintrc.json

@@ -66,5 +66,6 @@
     "arrow-body-style": 0,
     "class-methods-use-this": 0,
     "max-len": 0
-  }
+  },
+  "ignorePatterns": ["**/*.css"]
 }

.storybook/main.js

@@ -15,4 +15,5 @@ module.exports = {
   features: {
     postcss: false,
   },
+  addons: ['storybook-css-modules-preset'],
 }

next-env.d.ts

@@ -0,0 +1,2 @@
+declare module '*.css'
+declare module '*.scss'

package.json

@@ -35,18 +35,17 @@
   },
   "peerDependencies": {
     "@date-io/dayjs": ">= 2.10.8",
-    "@emotion/react": ">= 11.1.5",
-    "@emotion/styled": ">= 11.3.0",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
     "dayjs": ">= 1.10.4",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
   "dependencies": {
     "@babel/core": ">=7.11.5 <8.0.0",
-    "@mui/icons-material": "^5.6.1",
-    "@mui/lab": "^5.0.0-alpha.77",
-    "@mui/material": "^5.6.1",
-    "@mui/styles": "^5.6.1",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.95",
+    "@mui/material": "^5.10.5",
     "@storybook/addon-controls": "^6.5.2",
     "@storybook/addon-viewport": "6.5.3",
     "@storybook/react": "6.4.0-alpha.30",
@@ -63,6 +62,7 @@
     "react-is": "^17.0.2",
     "react-virtualized": "^9.22.3",
     "require-from-string": "^2.0.2",
+    "storybook-css-modules-preset": "^1.1.1",
     "tslib": "^2.4.0",
     "value-equal": "^1.0.1"
   },

src/columnGrid/ColumnGrid.tsx

@@ -7,7 +7,6 @@ import { ColumnGridProps } from './columnGridProps'
 import { CellMeasureRendererProps, MeasurerRendererProps } from '../cellMeasurer'
 import Tooltip from '@mui/material/Tooltip'
 import { ROW_SELECTION_HEADER_ID } from '../rowSelection'
-import { makeStyles } from '@mui/styles'
 import { isFunctionType } from '../helpers'
 import flattenDeep from 'lodash/flattenDeep'
 import { createCellQueryProperties } from '../keyboard'
@@ -16,41 +15,31 @@ import { SortIndicator } from './components'
 import { useApiEventHandler } from '../api'
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import { Theme } from '@mui/material'
+import styles from './styles.module.css'
 
 type SortDisabled = boolean
 
-const useStyles = makeStyles((theme: Theme) => ({
-  defaultHeader: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100%',
-    width: '100%',
-    boxSizing: 'border-box',
-    background: '#efefef',
-    cursor: 'default',
-    border: '1px solid #ccc',
+const defaultHeader = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box',
+  background: '#efefef',
+  cursor: 'default',
+  border: '1px solid #ccc',
+}
+const headerContainer = {
+  outline: 'none',
+  position: 'sticky !important' as any,
+  top: 0,
+  zIndex: 1,
+  'scrollbar-width': 'none',
+  '&::-webkit-scrollbar': {
+    display: 'none',
   },
-  headerContainer: {
-    outline: 'none',
-    position: 'sticky !important' as any,
-    top: 0,
-    zIndex: 1,
-    'scrollbar-width': 'none',
-    '&::-webkit-scrollbar': {
-      display: 'none',
-    },
-  },
-  contentSpan: {
-    textAlign: 'center',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    height: '100%',
-  },
-}))
+}
 
 export const ColumnGrid: React.FC<ColumnGridProps> = React.memo(
   ({
@@ -75,7 +64,6 @@ export const ColumnGrid: React.FC<ColumnGridProps> = React.memo(
     sort,
     headerId,
   }) => {
-    const classes = useStyles()
     const logger = useLogger('ColumnGrid')
     const cache: CellMeasurerCache = useMemo(() => {
       /**
@@ -141,7 +129,6 @@ export const ColumnGrid: React.FC<ColumnGridProps> = React.memo(
     useApiEventHandler(apiRef, 'DATA_CHANGED', recomputeSizes)
     useApiEventHandler(apiRef, 'GRID_RESIZE', recomputeSizes)
     useApiEventHandler(apiRef, 'COLUMNS_CHANGED', recomputeSizes)
-
     const headerRendererWrapper = useCallback(
       ({ style, cell, ref, columnIndex, rowIndex }: CellMeasureRendererProps<GridHeader>) => {
         const { title, renderer } = cell
@@ -156,15 +143,15 @@ export const ColumnGrid: React.FC<ColumnGridProps> = React.memo(
         let headerClassName = ''
         if (!cell.dummy && cell.isNested) {
           headerClassName = clsx(
-            classes.defaultHeader,
+            defaultHeader,
             theme?.headerClass,
             theme?.nestedHeaderClass,
             cell.className,
           )
         }
 
         if (!cell.dummy && !cell.isNested) {
-          headerClassName = clsx(classes.defaultHeader, theme?.headerClass, cell.className)
+          headerClassName = clsx(defaultHeader, theme?.headerClass, cell.className)
         }
 
         //If the cell is selected we set the column as selected too
@@ -211,7 +198,7 @@ export const ColumnGrid: React.FC<ColumnGridProps> = React.memo(
               {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
               <span
                 onClick={isSortDisabled ? undefined : () => apiRef.current.toggleSort(cell.id)}
-                className={classes.contentSpan}
+                className={styles.contentSpan}
               >
                 {child}
                 {sortComponent}
@@ -290,8 +277,6 @@ export const ColumnGrid: React.FC<ColumnGridProps> = React.memo(
       },
       [
         apiRef,
-        classes.contentSpan,
-        classes.defaultHeader,
         columns,
         coords,
         headersSortDisabledMap,
@@ -355,10 +340,9 @@ export const ColumnGrid: React.FC<ColumnGridProps> = React.memo(
     const onRefMount = useCallback(instance => {
       gridRef.current = instance
     }, [])
-
     return (
       <Grid
-        className={clsx(classes.headerContainer)}
+        className={clsx(headerContainer)}
         id={headerId}
         ref={onRefMount}
         cellRenderer={cellMeasurerWrapperRenderer}

src/columnGrid/styles.module.css

@@ -0,0 +1,8 @@
+.contentSpan {
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}

src/editorManager/components/CalendarEditor.tsx

@@ -1,23 +1,16 @@
 import * as React from 'react'
-import { makeStyles } from '@mui/styles'
 import { EditorProps } from '../editorProps'
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react'
 import { ClickAwayListener, Popper } from '@mui/material'
 import dayjs from 'dayjs'
 import { DatePicker } from '@mui/lab'
 
-const useStyles = makeStyles(() => ({
-  root: {
-    zIndex: 999,
-  },
-  calendarContainer: {
-    border: 'none',
-  },
-}))
+const root = {
+  zIndex: 999,
+}
 
 export const CalendarEditor = forwardRef(
   ({ apiRef, stopEditing, anchorRef, value, additionalProps }: EditorProps, componentRef) => {
-    const classes = useStyles()
     const [state, setState] = useState<{ value: dayjs.Dayjs; close: boolean }>({
       value: value ? dayjs(value) : dayjs(),
       close: false,
@@ -92,7 +85,7 @@ export const CalendarEditor = forwardRef(
           anchorEl={anchorRef}
           placement={'right-start'}
           keepMounted={false}
-          className={classes.root}
+          sx={root}
           modifiers={popperModifiers}
         >
           <DatePicker

src/editorManager/components/NumericEditor.tsx

@@ -7,28 +7,25 @@ import React, {
   useState,
 } from 'react'
 import { EditorProps } from '../editorProps'
-import { TextareaAutosize, Theme } from '@mui/material'
-import { makeStyles } from '@mui/styles'
+import { TextareaAutosize } from '@mui/material'
 import { handleEditorKeydown } from '../utils'
 import clsx from 'clsx'
 import { GRID_RESIZE, useApiEventHandler } from '../../api'
 import { createDefaultPaperProps } from './createDefaultPaperProps'
 import EditorContainer from './EditorContainer'
 
-const useStyles = makeStyles((theme: Theme) => ({
-  input: {
-    width: '100%',
-    height: '100%',
-    resize: 'none',
-    overflow: 'auto',
+const input = {
+  width: '100%',
+  height: '100%',
+  resize: 'none',
+  overflow: 'auto',
+  border: 0,
+  outline: 0,
+  '&:focus': {
     border: 0,
     outline: 0,
-    '&:focus': {
-      border: 0,
-      outline: 0,
-    },
   },
-}))
+}
 
 export const NumericEditor = forwardRef(
   (
@@ -43,7 +40,6 @@ export const NumericEditor = forwardRef(
     }: EditorProps,
     componentRef,
   ) => {
-    const classes = useStyles()
     const [editingValue, setEditingValue] = useState<string>(
       isNaN(Number(value)) ? '0' : String(value),
     )
@@ -134,7 +130,7 @@ export const NumericEditor = forwardRef(
           aria-label="numeric apollo editor"
           minRows={1}
           maxLength={maxLength}
-          className={clsx(classes.input, additionalProps?.className)}
+          className={clsx(input, additionalProps?.className)}
           style={additionalProps?.style}
         />
       </EditorContainer>

src/editorManager/components/TextEditor.tsx

@@ -8,27 +8,12 @@ import React, {
 } from 'react'
 import { TextareaAutosize, Theme } from '@mui/material'
 import { EditorProps } from '../editorProps'
-import { makeStyles } from '@mui/styles'
 import { handleEditorKeydown } from '../utils'
 import clsx from 'clsx'
 import { GRID_RESIZE, useApiEventHandler } from '../../api'
 import EditorContainer from './EditorContainer'
 import { createDefaultPaperProps } from './createDefaultPaperProps'
-
-const useStyles = makeStyles((theme: Theme) => ({
-  input: {
-    width: '100%',
-    height: '100%',
-    resize: 'none',
-    overflow: 'auto',
-    border: 0,
-    outline: 0,
-    '&:focus': {
-      border: 0,
-      outline: 0,
-    },
-  },
-}))
+import styles from './styles.module.css'
 
 export const TextEditor = forwardRef(
   (
@@ -43,7 +28,6 @@ export const TextEditor = forwardRef(
     }: EditorProps,
     componentRef,
   ) => {
-    const classes = useStyles()
     const [editingValue, setEditingValue] = useState(String(value))
 
     const onAnchorResize = useCallback(() => {
@@ -118,7 +102,7 @@ export const TextEditor = forwardRef(
           aria-label="text apollo editor"
           minRows={1}
           maxLength={maxLength}
-          className={clsx(classes.input, additionalProps?.className, theme?.editorClass)}
+          className={clsx(styles.input, additionalProps?.className, theme?.editorClass)}
           style={additionalProps?.style}
         />
       </EditorContainer>

src/editorManager/components/styles.module.css

@@ -0,0 +1,13 @@
+.input {
+  width: 100%;
+  height: 100%;
+  resize: none;
+  overflow: auto;
+  border: 0;
+  outline: 0;
+}
+
+.input:focus {
+  border: 0;
+  outline: 0;
+}