attempt material-ui v5 upgrade

2026-02-24 04:01:17 +01:00 · 2021-07-05 16:04:33 +10:00
parent 681e4679cb
commit eda2f8aa89
25 changed files with 502 additions and 287 deletions
--- a/www/package.json
+++ b/www/package.json
@@ -11,10 +11,11 @@
    "@antlerengineering/form-builder": "^2.6.0",
    "@antlerengineering/multiselect": "^0.9.2",
    "@date-io/date-fns": "1.x",
-    "@material-ui/core": "^4.11.4",
+    "@emotion/react": "^11.4.0",
+    "@emotion/styled": "^11.3.0",
+    "@material-ui/core": "^5.0.0-beta.0",
    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.58",
-    "@material-ui/pickers": "^3.2.10",
+    "@material-ui/lab": "^5.0.0-alpha.39",
    "@material-ui/styles": "^4.11.4",
    "@mdi/js": "^5.8.55",
    "@monaco-editor/react": "^4.1.0",
--- a/www/src/Themes.tsx
+++ b/www/src/Themes.tsx
@@ -1,10 +1,10 @@
 import _merge from "lodash/merge";

 import {
-  createMuiTheme,
+  createTheme,
  Theme,
  ThemeOptions,
-  fade,
+  alpha,
 } from "@material-ui/core/styles";
 import ClearIcon from "@material-ui/icons/Clear";

@@ -200,7 +200,7 @@ export const defaultOverrides = (theme: Theme): ThemeOptions => ({
      outlined: { padding: theme.spacing(3 / 8, 15 / 8) },
      outlinedPrimary: {
        // Same as outlined text field
-        borderColor: fade(theme.palette.divider, 0.23),
+        borderColor: alpha(theme.palette.divider, 0.23),
      },
      outlinedSizeLarge: {
        padding: theme.spacing(1, 4),
@@ -378,22 +378,22 @@ export const defaultOverrides = (theme: Theme): ThemeOptions => ({
 });

 export const customizableLightTheme = (customization: ThemeOptions) => {
-  const customizedLightThemeBase = createMuiTheme(
+  const customizedLightThemeBase = createTheme(
    _merge({}, themeBase, customization)
  );

-  return createMuiTheme(
+  return createTheme(
    customizedLightThemeBase,
    _merge({}, defaultOverrides(customizedLightThemeBase), customization)
  );
 };

 export const customizableDarkTheme = (customization: ThemeOptions) => {
-  const customizedDarkThemeBase = createMuiTheme(
+  const customizedDarkThemeBase = createTheme(
    _merge({}, themeBase, darkThemeBase, customization)
  );

-  return createMuiTheme(
+  return createTheme(
    customizedDarkThemeBase,
    _merge({}, defaultOverrides(customizedDarkThemeBase), customization)
  );
--- a/www/src/components/Auth/AuthLayout.tsx
+++ b/www/src/components/Auth/AuthLayout.tsx
@@ -7,7 +7,7 @@ import {
  Typography,
  LinearProgress,
 } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles";
+import { alpha } from "@material-ui/core/styles";

 import bgPattern from "assets/bg-pattern.svg";

@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme) =>
      //   linear-gradient(161deg, #ecf4ff -31%, #fff4f4 160%)
      // `,
      backgroundImage: `
-        linear-gradient(to bottom, ${fade(
+        linear-gradient(to bottom, ${alpha(
          theme.palette.background.default,
          0
        )}, ${theme.palette.background.default} 75%),
@@ -30,10 +30,10 @@ const useStyles = makeStyles((theme) =>
        theme.palette.secondary.main
      } 90%),
        url('${bgPattern}'),
-        linear-gradient(161deg, ${fade(
+        linear-gradient(161deg, ${alpha(
          theme.palette.background.default,
          0.95
-        )} -31%, ${fade(theme.palette.background.default, 0.98)} 160%)
+        )} -31%, ${alpha(theme.palette.background.default, 0.98)} 160%)
      `,

      display: "grid",
--- a/www/src/components/Auth/FirebaseUi.tsx
+++ b/www/src/components/Auth/FirebaseUi.tsx
@@ -5,7 +5,7 @@ import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
 import { Props as FirebaseUiProps } from "react-firebaseui";

 import { makeStyles, createStyles, Typography } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles";
+import { alpha } from "@material-ui/core/styles";
 import Skeleton from "@material-ui/lab/Skeleton";

 import { auth, db } from "../../firebase";
@@ -145,7 +145,7 @@ const useStyles = makeStyles((theme) =>
        },

        "& .mdl-progress>.bufferbar": {
-          background: fade(theme.palette.primary.main, 0.33),
+          background: alpha(theme.palette.primary.main, 0.33),
        },
        "& .mdl-progress>.progressbar": {
          backgroundColor: theme.palette.primary.main + " !important",
--- a/www/src/components/ButtonWithStatus.tsx
+++ b/www/src/components/ButtonWithStatus.tsx
@@ -7,20 +7,20 @@ import {
  Button,
  ButtonProps,
 } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles";
+import { alpha } from "@material-ui/core/styles";

 export const useStyles = makeStyles((theme) =>
  createStyles({
    active: {
      borderColor: "currentColor",
-      backgroundColor: fade(
+      backgroundColor: alpha(
        theme.palette.primary.main,
        theme.palette.action.hoverOpacity
      ),

      "&:hover": {
        color: theme.palette.primary.dark,
-        backgroundColor: fade(
+        backgroundColor: alpha(
          theme.palette.primary.dark,
          theme.palette.action.hoverOpacity
        ),
--- a/www/src/components/HomeNavigation/NavDrawer.tsx
+++ b/www/src/components/HomeNavigation/NavDrawer.tsx
@@ -12,7 +12,7 @@ import {
  ListItemIcon,
  ListItemText,
 } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles";
+import { alpha } from "@material-ui/core/styles";
 import CloseIcon from "assets/icons/Backburger";
 import AddIcon from "@material-ui/icons/Add";

@@ -61,7 +61,7 @@ const useStyles = makeStyles((theme) =>
    listItemSelected: {
      "&&, &&:hover": {
        color: theme.palette.primary.main,
-        backgroundColor: fade(
+        backgroundColor: alpha(
          theme.palette.primary.main,
          theme.palette.action.selectedOpacity
        ),
--- a/www/src/components/Modal/index.tsx
+++ b/www/src/components/Modal/index.tsx
@@ -16,7 +16,7 @@ import {
  Button,
  ButtonProps,
 } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles";
+import { alpha } from "@material-ui/core/styles";
 import CloseIcon from "@material-ui/icons/Close";

 import { SlideTransitionMui } from "./SlideTransition";
--- a/www/src/components/Navigation/NavDrawerItem.tsx
+++ b/www/src/components/Navigation/NavDrawerItem.tsx
@@ -11,7 +11,7 @@ import {
  ListItemText,
  Collapse,
 } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles";
+import { alpha } from "@material-ui/core/styles";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";

 import { Table } from "contexts/FiretableContext";
@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) =>
    listItemSelected: {
      "&&, &&:hover": {
        color: theme.palette.primary.main,
-        backgroundColor: fade(
+        backgroundColor: alpha(
          theme.palette.primary.main,
          theme.palette.action.selectedOpacity
        ),
--- a/www/src/components/Table/BulkActions/index.tsx
+++ b/www/src/components/Table/BulkActions/index.tsx
@@ -4,7 +4,7 @@ import _find from "lodash/find";
 import {
  createStyles,
  makeStyles,
-  fade,
+  alpha,
  Grow,
  Paper,
  Grid,
@@ -83,7 +83,7 @@ const useStyles = makeStyles((theme) =>
      borderRadius: theme.shape.borderRadius,
      backgroundColor:
        theme.palette.type === "dark"
-          ? fade(theme.palette.text.primary, 0.06)
+          ? alpha(theme.palette.text.primary, 0.06)
          : undefined,
    },
    dropdownLabel: {
--- a/www/src/components/Table/ColumnHeader.tsx
+++ b/www/src/components/Table/ColumnHeader.tsx
@@ -6,7 +6,7 @@ import { useCombinedRefs } from "react-data-grid/lib/hooks";
 import {
  makeStyles,
  createStyles,
-  fade,
+  alpha,
  Tooltip,
  Fade,
  Grid,
@@ -41,7 +41,7 @@ const useStyles = makeStyles((theme) =>
    },
    isDragging: { opacity: 0.5 },
    isOver: {
-      backgroundColor: fade(
+      backgroundColor: alpha(
        theme.palette.primary.main,
        theme.palette.action.focusOpacity
      ),
--- a/www/src/components/Table/TableHeader/ImportCsv.tsx
+++ b/www/src/components/Table/TableHeader/ImportCsv.tsx
@@ -15,7 +15,7 @@ import {
  TextField,
  FormHelperText,
 } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles";
+import { alpha } from "@material-ui/core/styles";

 import Tab from "@material-ui/core/Tab";
 import TabContext from "@material-ui/lab/TabContext";
@@ -45,13 +45,13 @@ const useStyles = makeStyles((theme) =>
    dropzone: {
      height: 137,
      borderRadius: theme.shape.borderRadius,
-      border: `dashed 3px ${fade(theme.palette.text.primary, 0.42)}`,
-      backgroundColor: fade(theme.palette.text.primary, 0.09),
+      border: `dashed 3px ${alpha(theme.palette.text.primary, 0.42)}`,
+      backgroundColor: alpha(theme.palette.text.primary, 0.09),
      color: theme.palette.text.secondary,
      cursor: "pointer",

      "&:focus": {
-        backgroundColor: fade(theme.palette.primary.main, 0.09),
+        backgroundColor: alpha(theme.palette.primary.main, 0.09),
        borderColor: theme.palette.primary.main,
        color: theme.palette.primary.main,
        outline: "none",
@@ -59,7 +59,7 @@ const useStyles = makeStyles((theme) =>
    },
    error: {
      "$dropzone&": {
-        backgroundColor: fade(theme.palette.error.main, 0.09),
+        backgroundColor: alpha(theme.palette.error.main, 0.09),
        borderColor: theme.palette.error.main,
        color: theme.palette.error.main,
      },
--- a/www/src/components/Table/TableHeader/index.tsx
+++ b/www/src/components/Table/TableHeader/index.tsx
@@ -9,7 +9,7 @@ import {
  Typography,
  Button,
 } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles";
+import { alpha } from "@material-ui/core/styles";

 import { isCollectionGroup } from "utils/fns";
 import AddRowIcon from "assets/icons/AddRow";
@@ -60,7 +60,7 @@ const useStyles = makeStyles((theme) =>
      borderRadius: theme.shape.borderRadius,
      backgroundColor:
        theme.palette.type === "dark"
-          ? fade(theme.palette.text.primary, 0.06)
+          ? alpha(theme.palette.text.primary, 0.06)
          : undefined,
    },
    select: {
--- a/www/src/components/Table/styles.ts
+++ b/www/src/components/Table/styles.ts
@@ -1,7 +1,7 @@
 import {
  makeStyles,
  createStyles,
-  fade,
+  alpha,
  emphasize,
  darken,
  lighten,
@@ -98,7 +98,7 @@ export const useStyles = makeStyles((theme) =>

        ".rdg-row:hover &": {
          color: theme.palette.text.primary,
-          backgroundColor: fade(
+          backgroundColor: alpha(
            theme.palette.text.primary,
            theme.palette.action.hoverOpacity * 2
          ),
--- a/www/src/components/Wizards/Column.tsx
+++ b/www/src/components/Wizards/Column.tsx
@@ -7,7 +7,7 @@ import {
  GridProps,
  Typography,
 } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles";
+import { alpha } from "@material-ui/core/styles";

 import { FieldType } from "constants/fields";
 import { getFieldProp } from "components/fields";
@@ -32,12 +32,12 @@ const useStyles = makeStyles((theme) =>
    },

    active: {
-      backgroundColor: fade(
+      backgroundColor: alpha(
        theme.palette.primary.main,
        theme.palette.action.activatedOpacity
      ),
      color: theme.palette.primary.main,
-      borderColor: fade(
+      borderColor: alpha(
        theme.palette.primary.main,
        theme.palette.action.disabledOpacity
      ),
--- a/www/src/components/Wizards/WizardDialog.tsx
+++ b/www/src/components/Wizards/WizardDialog.tsx
@@ -16,7 +16,7 @@ import {
  DialogContent,
  Button,
 } from "@material-ui/core";
-import { fade } from "@material-ui/core/styles";
+import { alpha } from "@material-ui/core/styles";
 import CloseIcon from "@material-ui/icons/Close";
 import ChevronRightIcon from "@material-ui/icons/ChevronRight";
 import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
@@ -85,19 +85,19 @@ const useStyles = makeStyles((theme) =>
      background: `
        linear-gradient(
          var(--bg-paper) 50%,
-          ${fade(theme.palette.background.paper, 0)}
+          ${alpha(theme.palette.background.paper, 0)}
        ),
        linear-gradient(
-          ${fade(theme.palette.background.paper, 0)},
+          ${alpha(theme.palette.background.paper, 0)},
          var(--bg-paper) 50%
        ) 0 100%,
        linear-gradient(
          to top, ${theme.palette.divider} 1px,
-          ${fade(theme.palette.divider, 0)}
+          ${alpha(theme.palette.divider, 0)}
        ),
        linear-gradient(to top,
          ${theme.palette.divider} 1px,
-          ${fade(theme.palette.divider, 0)}
+          ${alpha(theme.palette.divider, 0)}
        ) 0 calc(100% - 0.5px)`,
      backgroundRepeat: "no-repeat",
      backgroundColor: "var(--bg-paper)",
--- a/www/src/components/fields/Date/SideDrawerField.tsx
+++ b/www/src/components/fields/Date/SideDrawerField.tsx
@@ -2,19 +2,17 @@ import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";

 import { useTheme } from "@material-ui/core";
-import {
-  KeyboardDatePicker,
-  KeyboardDatePickerProps,
-} from "@material-ui/pickers";
+import LocalizationProvider from "@material-ui/lab/LocalizationProvider";
+import AdapterDateFns from "@material-ui/lab/AdapterDateFns";
+import DatePicker, { DatePickerProps } from "@material-ui/lab/DatePicker";
+import { TextField } from "@material-ui/core";
+
 import { DATE_FORMAT } from "constants/dates";
 import { transformValue, sanitizeValue } from "./utils";

-import { MuiPickersUtilsProvider } from "@material-ui/pickers";
-import DateFnsUtils from "@date-io/date-fns";
-
 export interface IDateProps
  extends ISideDrawerFieldProps,
-    Omit<KeyboardDatePickerProps, "name" | "onChange" | "value" | "disabled"> {}
+    Omit<DatePickerProps, "name" | "onChange" | "value" | "disabled"> {}

 export default function Date_({
  column,
@@ -26,7 +24,7 @@ export default function Date_({
  const theme = useTheme();

  return (
-    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Controller
        control={control}
        name={column.key}
@@ -40,29 +38,32 @@ export default function Date_({
          };

          return (
-            <KeyboardDatePicker
-              variant="inline"
-              inputVariant="filled"
-              fullWidth
-              margin="none"
-              format={column.config?.format ?? DATE_FORMAT}
-              placeholder={column.config?.format ?? DATE_FORMAT}
-              InputAdornmentProps={{
-                style: { marginRight: theme.spacing(-1) },
-              }}
+            <DatePicker
+              inputFormat={column.config?.format ?? DATE_FORMAT}
              {...props}
+              renderInput={(props) => (
+                <TextField
+                  {...props}
+                  fullWidth
+                  margin="none"
+                  placeholder={column.config?.format ?? DATE_FORMAT}
+                  // TODO: InputAdornmentProps={{
+                  //   style: { marginRight: theme.spacing(-1) },
+                  // }}
+                  // TODO: move this out to side drawer
+                  id={`sidedrawer-field-${column.key}`}
+                  onBlur={onBlur}
+                  label=""
+                  hiddenLabel
+                />
+              )}
              value={transformedValue}
              onChange={handleChange}
-              onBlur={onBlur}
-              label=""
-              hiddenLabel
-              // TODO: move this out to side drawer
-              id={`sidedrawer-field-${column.key}`}
              disabled={disabled}
            />
          );
        }}
      />
-    </MuiPickersUtilsProvider>
+    </LocalizationProvider>
  );
 }
--- a/www/src/components/fields/Date/TableCell.tsx
+++ b/www/src/components/fields/Date/TableCell.tsx
@@ -8,12 +8,12 @@ import { DateIcon } from ".";
 import { DATE_FORMAT } from "constants/dates";
 import { transformValue, sanitizeValue } from "./utils";

-import DateFnsUtils from "@date-io/date-fns";
-import {
-  MuiPickersUtilsProvider,
-  KeyboardDatePicker,
-  DatePickerProps,
-} from "@material-ui/pickers";
+// import DateFnsUtils from "@date-io/date-fns";
+// import {
+//   MuiPickersUtilsProvider,
+//   KeyboardDatePicker,
+//   DatePickerProps,
+// } from "@material-ui/pickers";

 import { useFiretableContext } from "contexts/FiretableContext";
 import BasicCell from "./BasicCell";
@@ -64,56 +64,52 @@ export default function Date_({

  const transformedValue = transformValue(value);

-  const [handleDateChange] = useDebouncedCallback<DatePickerProps["onChange"]>(
-    (date) => {
-      const sanitized = sanitizeValue(date);
-      if (sanitized === undefined) return;
+  // const [handleDateChange] = useDebouncedCallback<DatePickerProps["onChange"]>(
+  //   (date) => {
+  //     const sanitized = sanitizeValue(date);
+  //     if (sanitized === undefined) return;

-      onSubmit(sanitized);
-      if (dataGridRef?.current?.selectCell)
-        dataGridRef.current.selectCell({ rowIdx, idx: column.idx });
-    },
-    500
-  );
-
-  if (disabled)
-    return (
-      <div className={classes.disabledCell}>
-        <BasicCell
-          value={value}
-          type={(column as any).type}
-          name={column.key}
-        />
-      </div>
-    );
+  //     onSubmit(sanitized);
+  //     if (dataGridRef?.current?.selectCell)
+  //       dataGridRef.current.selectCell({ rowIdx, idx: column.idx });
+  //   },
+  //   500
+  // );

+  // if (disabled)
  return (
-    <MuiPickersUtilsProvider utils={DateFnsUtils}>
-      <KeyboardDatePicker
-        value={transformedValue}
-        onChange={handleDateChange}
-        onClick={(e) => e.stopPropagation()}
-        format={column.config?.format ?? DATE_FORMAT}
-        fullWidth
-        clearable
-        keyboardIcon={<DateIcon />}
-        className={clsx("cell-collapse-padding", classes.root)}
-        inputVariant="standard"
-        InputProps={{
-          disableUnderline: true,
-          classes: { root: classes.inputBase, input: classes.input },
-        }}
-        InputAdornmentProps={{
-          position: "start",
-          classes: { root: classes.inputAdornment },
-        }}
-        KeyboardButtonProps={{
-          size: "small",
-          classes: { root: !disabled ? "row-hover-iconButton" : undefined },
-        }}
-        DialogProps={{ onClick: (e) => e.stopPropagation() }}
-        disabled={disabled}
-      />
-    </MuiPickersUtilsProvider>
+    <div className={classes.disabledCell}>
+      <BasicCell value={value} type={(column as any).type} name={column.key} />
+    </div>
  );
+
+  // return (
+  //   <MuiPickersUtilsProvider utils={DateFnsUtils}>
+  //     <KeyboardDatePicker
+  //       value={transformedValue}
+  //       onChange={handleDateChange}
+  //       onClick={(e) => e.stopPropagation()}
+  //       format={column.config?.format ?? DATE_FORMAT}
+  //       fullWidth
+  //       clearable
+  //       keyboardIcon={<DateIcon />}
+  //       className={clsx("cell-collapse-padding", classes.root)}
+  //       inputVariant="standard"
+  //       InputProps={{
+  //         disableUnderline: true,
+  //         classes: { root: classes.inputBase, input: classes.input },
+  //       }}
+  //       InputAdornmentProps={{
+  //         position: "start",
+  //         classes: { root: classes.inputAdornment },
+  //       }}
+  //       KeyboardButtonProps={{
+  //         size: "small",
+  //         classes: { root: !disabled ? "row-hover-iconButton" : undefined },
+  //       }}
+  //       DialogProps={{ onClick: (e) => e.stopPropagation() }}
+  //       disabled={disabled}
+  //     />
+  //   </MuiPickersUtilsProvider>
+  // );
 }
--- a/www/src/components/fields/DateTime/SideDrawerField.tsx
+++ b/www/src/components/fields/DateTime/SideDrawerField.tsx
@@ -2,25 +2,25 @@ import { Controller } from "react-hook-form";
 import { ISideDrawerFieldProps } from "../types";

 import { useTheme } from "@material-ui/core";
-import {
-  KeyboardDateTimePicker,
-  KeyboardDateTimePickerProps,
-} from "@material-ui/pickers";
+// import {
+//   KeyboardDateTimePicker,
+//   KeyboardDateTimePickerProps,
+// } from "@material-ui/pickers";
 import { DATE_TIME_FORMAT } from "constants/dates";
 import { transformValue, sanitizeValue } from "../Date/utils";

 import DateRangeIcon from "@material-ui/icons/DateRange";
 import TimeIcon from "@material-ui/icons/Schedule";

-import { MuiPickersUtilsProvider } from "@material-ui/pickers";
-import DateFnsUtils from "@date-io/date-fns";
+// import { MuiPickersUtilsProvider } from "@material-ui/pickers";
+// import DateFnsUtils from "@date-io/date-fns";

-export interface IDateTimeProps
-  extends ISideDrawerFieldProps,
-    Omit<
-      KeyboardDateTimePickerProps,
-      "name" | "onChange" | "value" | "disabled"
-    > {}
+export interface IDateTimeProps extends ISideDrawerFieldProps {
+  // ,Omit<
+  //   KeyboardDateTimePickerProps,
+  //   "name" | "onChange" | "value" | "disabled"
+  // >
+}

 export default function DateTime({
  column,
@@ -31,54 +31,56 @@ export default function DateTime({
 }: IDateTimeProps) {
  const theme = useTheme();

-  return (
-    <Controller
-      control={control}
-      name={column.key}
-      render={({ onChange, onBlur, value }) => {
-        const transformedValue = transformValue(value);
+  return null;

-        const handleChange = (date: Date | null) => {
-          const sanitized = sanitizeValue(date);
-          if (sanitized === undefined) return;
-          onChange(sanitized);
-        };
+  // TODO: return (
+  //   <Controller
+  //     control={control}
+  //     name={column.key}
+  //     render={({ onChange, onBlur, value }) => {
+  //       const transformedValue = transformValue(value);

-        return (
-          <MuiPickersUtilsProvider utils={DateFnsUtils}>
-            <KeyboardDateTimePicker
-              variant="inline"
-              inputVariant="filled"
-              fullWidth
-              margin="none"
-              format={DATE_TIME_FORMAT}
-              placeholder={DATE_TIME_FORMAT}
-              InputAdornmentProps={{
-                style: { marginRight: theme.spacing(-1) },
-              }}
-              keyboardIcon={<TimeIcon />}
-              {...props}
-              value={transformedValue}
-              onChange={handleChange}
-              onBlur={onBlur}
-              label=""
-              hiddenLabel
-              id={`sidedrawer-field-${column.key}`}
-              dateRangeIcon={
-                <DateRangeIcon
-                  style={{ color: theme.palette.primary.contrastText }}
-                />
-              }
-              timeIcon={
-                <TimeIcon
-                  style={{ color: theme.palette.primary.contrastText }}
-                />
-              }
-              disabled={disabled}
-            />
-          </MuiPickersUtilsProvider>
-        );
-      }}
-    />
-  );
+  //       const handleChange = (date: Date | null) => {
+  //         const sanitized = sanitizeValue(date);
+  //         if (sanitized === undefined) return;
+  //         onChange(sanitized);
+  //       };
+
+  //       return (
+  //         <MuiPickersUtilsProvider utils={DateFnsUtils}>
+  //           <KeyboardDateTimePicker
+  //             variant="inline"
+  //             inputVariant="filled"
+  //             fullWidth
+  //             margin="none"
+  //             format={DATE_TIME_FORMAT}
+  //             placeholder={DATE_TIME_FORMAT}
+  //             InputAdornmentProps={{
+  //               style: { marginRight: theme.spacing(-1) },
+  //             }}
+  //             keyboardIcon={<TimeIcon />}
+  //             {...props}
+  //             value={transformedValue}
+  //             onChange={handleChange}
+  //             onBlur={onBlur}
+  //             label=""
+  //             hiddenLabel
+  //             id={`sidedrawer-field-${column.key}`}
+  //             dateRangeIcon={
+  //               <DateRangeIcon
+  //                 style={{ color: theme.palette.primary.contrastText }}
+  //               />
+  //             }
+  //             timeIcon={
+  //               <TimeIcon
+  //                 style={{ color: theme.palette.primary.contrastText }}
+  //               />
+  //             }
+  //             disabled={disabled}
+  //           />
+  //         </MuiPickersUtilsProvider>
+  //       );
+  //     }}
+  //   />
+  // );
 }
--- a/www/src/components/fields/DateTime/TableCell.tsx
+++ b/www/src/components/fields/DateTime/TableCell.tsx
@@ -11,11 +11,11 @@ import { DATE_TIME_FORMAT } from "constants/dates";
 import { transformValue, sanitizeValue } from "../Date/utils";

 import DateFnsUtils from "@date-io/date-fns";
-import {
-  MuiPickersUtilsProvider,
-  KeyboardDateTimePicker,
-  DatePickerProps,
-} from "@material-ui/pickers";
+// import {
+//   MuiPickersUtilsProvider,
+//   KeyboardDateTimePicker,
+//   DatePickerProps,
+// } from "@material-ui/pickers";

 import { useFiretableContext } from "contexts/FiretableContext";
 import BasicCell from "./BasicCell";
@@ -66,57 +66,53 @@ export default function DateTime({

  const transformedValue = transformValue(value);

-  const [handleDateChange] = useDebouncedCallback<DatePickerProps["onChange"]>(
-    (date) => {
-      const sanitized = sanitizeValue(date);
-      if (sanitized === undefined) return;
+  // const [handleDateChange] = useDebouncedCallback<DatePickerProps["onChange"]>(
+  //   (date) => {
+  //     const sanitized = sanitizeValue(date);
+  //     if (sanitized === undefined) return;

-      onSubmit(sanitized);
-      if (dataGridRef?.current?.selectCell)
-        dataGridRef.current.selectCell({ rowIdx, idx: column.idx });
-    },
-    500
-  );
-
-  if (disabled)
-    return (
-      <div className={classes.disabledCell}>
-        <BasicCell
-          value={value}
-          type={(column as any).type}
-          name={column.key}
-        />
-      </div>
-    );
+  //     onSubmit(sanitized);
+  //     if (dataGridRef?.current?.selectCell)
+  //       dataGridRef.current.selectCell({ rowIdx, idx: column.idx });
+  //   },
+  //   500
+  // );

+  // if (disabled)
  return (
-    <MuiPickersUtilsProvider utils={DateFnsUtils}>
-      <KeyboardDateTimePicker
-        value={transformedValue}
-        onChange={handleDateChange}
-        onClick={(e) => e.stopPropagation()}
-        format={DATE_TIME_FORMAT}
-        fullWidth
-        clearable
-        keyboardIcon={<DateTimeIcon />}
-        className={clsx("cell-collapse-padding", classes.root)}
-        inputVariant="standard"
-        InputProps={{
-          disableUnderline: true,
-          classes: { root: classes.inputBase, input: classes.input },
-        }}
-        InputAdornmentProps={{
-          position: "start",
-          classes: { root: classes.inputAdornment },
-        }}
-        KeyboardButtonProps={{
-          size: "small",
-          classes: { root: "row-hover-iconButton" },
-        }}
-        DialogProps={{ onClick: (e) => e.stopPropagation() }}
-        dateRangeIcon={<DateRangeIcon className={classes.dateTabIcon} />}
-        timeIcon={<TimeIcon className={classes.dateTabIcon} />}
-      />
-    </MuiPickersUtilsProvider>
+    <div className={classes.disabledCell}>
+      <BasicCell value={value} type={(column as any).type} name={column.key} />
+    </div>
  );
+
+  // return (
+  //   <MuiPickersUtilsProvider utils={DateFnsUtils}>
+  //     <KeyboardDateTimePicker
+  //       value={transformedValue}
+  //       onChange={handleDateChange}
+  //       onClick={(e) => e.stopPropagation()}
+  //       format={DATE_TIME_FORMAT}
+  //       fullWidth
+  //       clearable
+  //       keyboardIcon={<DateTimeIcon />}
+  //       className={clsx("cell-collapse-padding", classes.root)}
+  //       inputVariant="standard"
+  //       InputProps={{
+  //         disableUnderline: true,
+  //         classes: { root: classes.inputBase, input: classes.input },
+  //       }}
+  //       InputAdornmentProps={{
+  //         position: "start",
+  //         classes: { root: classes.inputAdornment },
+  //       }}
+  //       KeyboardButtonProps={{
+  //         size: "small",
+  //         classes: { root: "row-hover-iconButton" },
+  //       }}
+  //       DialogProps={{ onClick: (e) => e.stopPropagation() }}
+  //       dateRangeIcon={<DateRangeIcon className={classes.dateTabIcon} />}
+  //       timeIcon={<TimeIcon className={classes.dateTabIcon} />}
+  //     />
+  //   </MuiPickersUtilsProvider>
+  // );
 }
--- a/www/src/components/fields/File/SideDrawerField.tsx
+++ b/www/src/components/fields/File/SideDrawerField.tsx
@@ -10,7 +10,7 @@ import useUploader, { FileValue } from "hooks/useFiretable/useUploader";
 import {
  makeStyles,
  createStyles,
-  fade,
+  alpha,
  ButtonBase,
  Typography,
  Grid,
@@ -35,7 +35,7 @@ const useStyles = makeStyles((theme) =>
      "& svg": { marginRight: theme.spacing(2) },
    },
    dropzoneDragActive: {
-      backgroundColor: fade(
+      backgroundColor: alpha(
        theme.palette.primary.light,
        theme.palette.action.hoverOpacity * 2
      ),
--- a/www/src/components/fields/File/TableCell.tsx
+++ b/www/src/components/fields/File/TableCell.tsx
@@ -9,7 +9,7 @@ import { format } from "date-fns";
 import {
  makeStyles,
  createStyles,
-  fade,
+  alpha,
  Grid,
  Tooltip,
  Chip,
@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme) =>
      outline: "none",
    },
    dragActive: {
-      backgroundColor: fade(
+      backgroundColor: alpha(
        theme.palette.primary.main,
        theme.palette.action.hoverOpacity * 2
      ),
--- a/www/src/components/fields/Image/SideDrawerField.tsx
+++ b/www/src/components/fields/Image/SideDrawerField.tsx
@@ -9,7 +9,7 @@ import useUploader from "hooks/useFiretable/useUploader";
 import {
  makeStyles,
  createStyles,
-  fade,
+  alpha,
  ButtonBase,
  Typography,
  Grid,
@@ -35,7 +35,7 @@ const useStyles = makeStyles((theme) =>
      "& svg": { marginRight: theme.spacing(2) },
    },
    dropzoneDragActive: {
-      backgroundColor: fade(
+      backgroundColor: alpha(
        theme.palette.primary.light,
        theme.palette.action.hoverOpacity * 2
      ),
@@ -72,7 +72,7 @@ const useStyles = makeStyles((theme) =>
      bottom: 0,
      right: 0,

-      backgroundColor: fade(theme.palette.background.paper, 0.8),
+      backgroundColor: alpha(theme.palette.background.paper, 0.8),
      color: theme.palette.text.secondary,
      boxShadow: `0 0 0 1px ${theme.palette.divider} inset`,
      borderRadius: theme.shape.borderRadius,
@@ -86,7 +86,7 @@ const useStyles = makeStyles((theme) =>
      backgroundColor: "transparent",

      "$img:hover &": {
-        backgroundColor: fade(theme.palette.background.paper, 0.8),
+        backgroundColor: alpha(theme.palette.background.paper, 0.8),
        "& *": { opacity: 1 },
      },

--- a/www/src/components/fields/Image/TableCell.tsx
+++ b/www/src/components/fields/Image/TableCell.tsx
@@ -8,7 +8,7 @@ import clsx from "clsx";
 import {
  makeStyles,
  createStyles,
-  fade,
+  alpha,
  Grid,
  IconButton,
  ButtonBase,
@@ -32,7 +32,7 @@ const useStyles = makeStyles((theme) =>
      outline: "none",
    },
    dragActive: {
-      backgroundColor: fade(
+      backgroundColor: alpha(
        theme.palette.primary.main,
        theme.palette.action.hoverOpacity * 2
      ),
@@ -89,7 +89,7 @@ const useStyles = makeStyles((theme) =>
      },

      "$img:hover &": {
-        backgroundColor: fade(theme.palette.background.paper, 0.8),
+        backgroundColor: alpha(theme.palette.background.paper, 0.8),
        "& *": { opacity: 1 },
      },
    },
--- a/www/src/contexts/AppContext.tsx
+++ b/www/src/contexts/AppContext.tsx
@@ -6,7 +6,7 @@ import createPersistedState from "use-persisted-state";

 import {
  useMediaQuery,
-  MuiThemeProvider,
+  ThemeProvider,
  ThemeOptions,
  CssBaseline,
 } from "@material-ui/core";
@@ -124,10 +124,10 @@ export const AppProvider: React.FC = ({ children }) => {
        setThemeOverridden,
      }}
    >
-      <MuiThemeProvider theme={generatedTheme}>
+      <ThemeProvider theme={generatedTheme}>
        <CssBaseline />
        <ErrorBoundary>{children}</ErrorBoundary>
-      </MuiThemeProvider>
+      </ThemeProvider>
    </AppContext.Provider>
  );
 };
--- a/www/yarn.lock
+++ b/www/yarn.lock
@@ -863,7 +863,7 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.8.0"

-"@babel/plugin-syntax-jsx@^7.14.5":
+"@babel/plugin-syntax-jsx@^7.12.13", "@babel/plugin-syntax-jsx@^7.14.5":
  version "7.14.5"
  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
  integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
@@ -1508,7 +1508,7 @@
  dependencies:
    regenerator-runtime "^0.13.4"

-"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.9.2":
  version "7.14.6"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
@@ -1664,6 +1664,11 @@
  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa"
  integrity sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA==

+"@date-io/core@^2.10.11":
+  version "2.10.11"
+  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.10.11.tgz#b1a3d57730f3eaaab54d5658be4a71727297e357"
+  integrity sha512-keXQnwH0LM8wyvu+j5Z2KGK56D+eItjy7DnwuWl/oV+DM2UEYl0z5WhdPMpfswSyt/kjuPOzcVF/7u/skMLaoA==
+
 "@date-io/date-fns@1.x":
  version "1.3.13"
  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-1.3.13.tgz#7798844041640ab393f7e21a7769a65d672f4735"
@@ -1671,11 +1676,135 @@
  dependencies:
    "@date-io/core" "^1.3.13"

+"@date-io/date-fns@^2.10.6":
+  version "2.10.11"
+  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-2.10.11.tgz#1f3b40c6f2ea2e659260ca329fef80cb6dc64704"
+  integrity sha512-QG9IAZ4bvwkJftoSVKtdb5ISH+Qp4zilrjhzcL4RXaeqkfIWiFeXqQPgJljvPl6gQ04zf2SjGkWjdh1eJxxwmQ==
+  dependencies:
+    "@date-io/core" "^2.10.11"
+
+"@date-io/dayjs@^2.10.6":
+  version "2.10.11"
+  resolved "https://registry.yarnpkg.com/@date-io/dayjs/-/dayjs-2.10.11.tgz#8106cbc756cad5c136b0c6e56a97821a293d8a9f"
+  integrity sha512-4+OUOeIxwTXhUil5Cw197jxEDWqoUPZsNeXgfta+Rol5sS6XyeeFOXtAfSKDZee8xIJL0cSGzy46eSQUP279XA==
+  dependencies:
+    "@date-io/core" "^2.10.11"
+
+"@date-io/luxon@^2.10.6":
+  version "2.10.11"
+  resolved "https://registry.yarnpkg.com/@date-io/luxon/-/luxon-2.10.11.tgz#d0981b9fdf5e5f17f8ce59265a3ac6c335565fac"
+  integrity sha512-SS6SIkp0Y9GFwpQycCTUAyW3OZTW05CWI1DJu10hUzcg8SmjJfhjs7hQY3TOeW+JT6VtXGTVGwbWPUBJsNkhZg==
+  dependencies:
+    "@date-io/core" "^2.10.11"
+
+"@date-io/moment@^2.10.6":
+  version "2.10.11"
+  resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-2.10.11.tgz#14a56b3b3474fda0fca31ef7fb3011d46e7428d2"
+  integrity sha512-xym/Ew0C7WSmH3w1KcEwoWoUnQ9UjjDZo1++SwlGdGIU0lPEv1QmMx59shWWL49GAz7KOsCEF2Gu9uDt8cEcVw==
+  dependencies:
+    "@date-io/core" "^2.10.11"
+
+"@emotion/babel-plugin@^11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7"
+  integrity sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "^4.0.3"
+
+"@emotion/cache@^11.0.0", "@emotion/cache@^11.4.0":
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0"
+  integrity sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.0.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "^4.0.3"
+
 "@emotion/hash@^0.8.0":
  version "0.8.0"
  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==

+"@emotion/is-prop-valid@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz#29ef6be1e946fb4739f9707def860f316f668cde"
+  integrity sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.4.0":
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.4.0.tgz#2465ad7b073a691409b88dfd96dc17097ddad9b7"
+  integrity sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/sheet" "^1.0.1"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
+  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698"
+  integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==
+
+"@emotion/styled@^11.3.0":
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.3.0.tgz#d63ee00537dfb6ff612e31b0e915c5cf9925a207"
+  integrity sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.3.0"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/utils" "^1.0.0"
+
+"@emotion/unitless@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/utils@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
+  integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
+
+"@emotion/weak-memoize@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@eslint/eslintrc@^0.4.2":
  version "0.4.2"
  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.2.tgz#f63d0ef06f5c0c57d76c4ab5f63d3835c51b0179"
@@ -2237,22 +2366,23 @@
  resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796"
  integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==

-"@material-ui/core@^4.11.4":
-  version "4.11.4"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.11.4.tgz#4fb9fe5dec5dcf780b687e3a40cff78b2b9640a4"
-  integrity sha512-oqb+lJ2Dl9HXI9orc6/aN8ZIAMkeThufA5iZELf2LQeBn2NtjVilF5D2w7e9RpntAzDb4jK5DsVhkfOvFY/8fg==
+"@material-ui/core@^5.0.0-beta.0":
+  version "5.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-5.0.0-beta.0.tgz#2175dc3b5872fb6da5ad009b4a737833aaf1264e"
+  integrity sha512-QU3ylBrILAUU04og7QZxYxwb14usCDTtuj/2ILjIfGNqhneSPMsg1bMKFXZQXo3tGlFBfZpDxet7AIjlxBKpcA==
  dependencies:
    "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.11.4"
-    "@material-ui/system" "^4.11.3"
-    "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.2"
+    "@material-ui/system" "5.0.0-beta.0"
+    "@material-ui/types" "6.0.1"
+    "@material-ui/unstyled" "5.0.0-alpha.39"
+    "@material-ui/utils" "5.0.0-beta.0"
+    "@popperjs/core" "^2.4.4"
    "@types/react-transition-group" "^4.2.0"
    clsx "^1.0.4"
+    csstype "^3.0.2"
    hoist-non-react-statics "^3.3.2"
-    popper.js "1.16.1-lts"
    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
+    react-is "^17.0.0"
    react-transition-group "^4.4.0"

 "@material-ui/icons@^4.11.2":
@@ -2262,16 +2392,24 @@
  dependencies:
    "@babel/runtime" "^7.4.4"

-"@material-ui/lab@^4.0.0-alpha.58":
-  version "4.0.0-alpha.58"
-  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.58.tgz#c7ebb66f49863c5acbb20817163737caa299fafc"
-  integrity sha512-GKHlJqLxUeHH3L3dGQ48ZavYrqGOTXkFkiEiuYMAnAvXAZP4rhMIqeHOPXSUQan4Bd8QnafDcpovOSLnadDmKw==
+"@material-ui/lab@^5.0.0-alpha.39":
+  version "5.0.0-alpha.39"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-5.0.0-alpha.39.tgz#2bd7278693e4c341fb33c7e645ed41917ad93df8"
+  integrity sha512-is8nRR/2lwWBTihE6nie2zphBESCf1EDUxVaC8mL9fiSfYkmA9L2X/JO4mn5QS2RXCKBBIm+qF2BMXKDdepGRA==
  dependencies:
    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.2"
+    "@date-io/date-fns" "^2.10.6"
+    "@date-io/dayjs" "^2.10.6"
+    "@date-io/luxon" "^2.10.6"
+    "@date-io/moment" "^2.10.6"
+    "@material-ui/system" "5.0.0-beta.0"
+    "@material-ui/unstyled" "5.0.0-alpha.39"
+    "@material-ui/utils" "5.0.0-beta.0"
    clsx "^1.0.4"
    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
+    react-is "^17.0.0"
+    react-transition-group "^4.4.1"
+    rifm "^0.12.0"

 "@material-ui/pickers@^3.2.10":
  version "3.2.10"
@@ -2285,6 +2423,24 @@
    react-transition-group "^4.0.0"
    rifm "^0.7.0"

+"@material-ui/private-theming@5.0.0-beta.0":
+  version "5.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/private-theming/-/private-theming-5.0.0-beta.0.tgz#54b00f535543b479361c95e7c2e2c0a319773e54"
+  integrity sha512-qML7cZBD7XSvxQPdkhj6dieOgTLJ9WzAI8IMpy3Fqvb0YUXRZGPhb4znM5uko19k1D10bC4xb+0k0cAeWWwJxA==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "5.0.0-beta.0"
+    prop-types "^15.7.2"
+
+"@material-ui/styled-engine@5.0.0-beta.0":
+  version "5.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/styled-engine/-/styled-engine-5.0.0-beta.0.tgz#6faddf6cce241baddff6874692044562fbfdd69b"
+  integrity sha512-+pqTBL6p2XdQk7icyI2tQoPxQUya5AJRTa7S6rHO14B8t2fUdLM4CXuJetkj+bLjQCpIQOewTqs0PniGvpKHkw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@emotion/cache" "^11.0.0"
+    prop-types "^15.7.2"
+
 "@material-ui/styles@^4.11.4":
  version "4.11.4"
  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"
@@ -2307,14 +2463,18 @@
    jss-plugin-vendor-prefixer "^10.5.1"
    prop-types "^15.7.2"

-"@material-ui/system@^4.11.3":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.11.3.tgz#466bc14c9986798fd325665927c963eb47cc4143"
-  integrity sha512-SY7otguNGol41Mu2Sg6KbBP1ZRFIbFLHGK81y4KYbsV2yIcaEPOmsCK6zwWlp+2yTV3J/VwT6oSBARtGIVdXPw==
+"@material-ui/system@5.0.0-beta.0":
+  version "5.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-5.0.0-beta.0.tgz#6e50129779003b65c1bccb2a3ee270d76f91e06b"
+  integrity sha512-JqdRYgm0df8tBX0j8NjM2AP+HdJKn0wUVcDviSe8j4wd60xwltooMSqQNqCrELFhyDMtagF2PLhc0gChRyaZ9g==
  dependencies:
    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.2"
-    csstype "^2.5.2"
+    "@material-ui/private-theming" "5.0.0-beta.0"
+    "@material-ui/styled-engine" "5.0.0-beta.0"
+    "@material-ui/types" "6.0.1"
+    "@material-ui/utils" "5.0.0-beta.0"
+    clsx "^1.0.4"
+    csstype "^3.0.2"
    prop-types "^15.7.2"

 "@material-ui/types@5.1.0":
@@ -2322,6 +2482,33 @@
  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==

+"@material-ui/types@6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-6.0.1.tgz#bfcdcd3bb5091e5feac2b191db516543d84e26af"
+  integrity sha512-t53C2BZE59e8ao38EDIZdM2smPDSEo5Xx9XxQ/MNM9Ph63Mu4vj5pmECiXkYp0y2OrvFiiZhcqRWV34SBOA18g==
+
+"@material-ui/unstyled@5.0.0-alpha.39":
+  version "5.0.0-alpha.39"
+  resolved "https://registry.yarnpkg.com/@material-ui/unstyled/-/unstyled-5.0.0-alpha.39.tgz#64dfa924ce640367b9340d42dbfdf35cfcf90d3b"
+  integrity sha512-RUryD7sA+pd/ZXdLRmds7m0JYSttKtrju5mkSb6eK7mIIdSUWXiQXukDW5kidYNBdXkqPzyrKw0h0qV3yrj6aw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "5.0.0-beta.0"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    react-is "^17.0.0"
+
+"@material-ui/utils@5.0.0-beta.0":
+  version "5.0.0-beta.0"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-5.0.0-beta.0.tgz#2b2083b356a98618de73c9bd29f271f9143a07a2"
+  integrity sha512-eBBqd+53NBUCgTU6TFGlhN0GsAPmnrHwdVBW6y4t/jP6sEXgDjVaJm5FKSYKkkCl+iRfZEAfdYyCeAn04eummw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@types/prop-types" "^15.7.3"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.0"
+
 "@material-ui/utils@^4.11.2":
  version "4.11.2"
  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
@@ -2398,6 +2585,11 @@
    schema-utils "^2.6.5"
    source-map "^0.7.3"

+"@popperjs/core@^2.4.4":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
+  integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
+
 "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
@@ -2870,7 +3062,7 @@
  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.3.0.tgz#2e8332cc7363f887d32ec5496b207d26ba8052bb"
  integrity sha512-hkc1DATxFLQo4VxPDpMH1gCkPpBbpOoJ/4nhuXw4n63/0R6bCpQECj4+K226UJ4JO/eJQz+1mC2I7JsWanAdQw==

-"@types/prop-types@*":
+"@types/prop-types@*", "@types/prop-types@^15.7.3":
  version "15.7.3"
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
@@ -2908,6 +3100,13 @@
  dependencies:
    "@types/react" "*"

+"@types/react-is@^16.7.1 || ^17.0.0":
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.1.tgz#8298442d3860a716e3e8435c1e6e36c189639bdb"
+  integrity sha512-X6jVqDIibL2sY0Qtth5EzNeUgPyoCWeBZdmE5xKr7hI4zaQDwN0VaQd7pJnlOB0mDGnOVH0cZZVXg9cnWhztQg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router-dom@^5.1.7":
  version "5.1.7"
  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.7.tgz#a126d9ea76079ffbbdb0d9225073eb5797ab7271"
@@ -4022,7 +4221,7 @@ babel-plugin-jest-hoist@^26.6.2:
    "@types/babel__core" "^7.0.0"
    "@types/babel__traverse" "^7.0.6"

-babel-plugin-macros@2.8.0:
+babel-plugin-macros@2.8.0, babel-plugin-macros@^2.6.1:
  version "2.8.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
@@ -5297,7 +5496,7 @@ convert-source-map@^0.3.3:
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
  integrity sha1-8dgClQr33SYxof6+BZZVDIarMZA=

-convert-source-map@^1.6.0:
+convert-source-map@^1.5.0, convert-source-map@^1.6.0:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -7319,6 +7518,11 @@ find-cache-dir@^3.3.1:
    make-dir "^3.0.2"
    pkg-dir "^4.1.0"

+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -8179,7 +8383,7 @@ hmac-drbg@^1.0.0:
    minimalistic-assert "^1.0.0"
    minimalistic-crypto-utils "^1.0.1"

-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -11927,11 +12131,6 @@ pnp-webpack-plugin@1.6.4:
  dependencies:
    ts-pnp "^1.1.6"

-popper.js@1.16.1-lts:
-  version "1.16.1-lts"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
-  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
-
 popper.js@^1.16.0:
  version "1.16.1"
  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
@@ -13261,7 +13460,7 @@ react-is@^16.6.0:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==

-react-is@^17.0.1:
+react-is@^17.0.0, react-is@^17.0.1:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -13435,6 +13634,16 @@ react-transition-group@^4.0.0, react-transition-group@^4.4.0:
    loose-envify "^1.4.0"
    prop-types "^15.6.2"

+react-transition-group@^4.4.1:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+  integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react-usestateref@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/react-usestateref/-/react-usestateref-1.0.5.tgz#0b5659217022a7e88087875ec1745730940b7882"
@@ -13943,6 +14152,11 @@ rgba-regex@^1.0.0:
  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=

+rifm@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.12.0.tgz#8d3a9dc0de9c190e0de9bdc8861a91a221dc1341"
+  integrity sha512-PqOl+Mo2lyqrKiD34FPlnQ+ksD3F+a62TQlphiZshgriyHdfjn6jGyqUZhd+s3nsMYXwXYDdjrrv8wX7QsOG3g==
+
 rifm@^0.7.0:
  version "0.7.0"
  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.7.0.tgz#debe951a9c83549ca6b33e5919f716044c2230be"
@@ -14541,7 +14755,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==

-source-map@^0.5.0, source-map@^0.5.6:
+source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
  version "0.5.7"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -14954,6 +15168,11 @@ stylehacks@^4.0.0:
    postcss "^7.0.0"
    postcss-selector-parser "^3.0.0"

+stylis@^4.0.3:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
+  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
+
 superstatic@^7.0.0:
  version "7.0.1"
  resolved "https://registry.yarnpkg.com/superstatic/-/superstatic-7.0.1.tgz#cf82b0fd03100d294636ec76ccfa4eda6f255676"