Merge branch 'v2' of https://github.com/notsidney/xtable into v2

package.json

@@ -19,7 +19,7 @@
     "@mui/material": "^5.0.0",
     "@mui/styles": "^5.0.0",
     "@rowy/form-builder": "^0.1.2",
-    "@rowy/multiselect": "^0.1.8",
+    "@rowy/multiselect": "^0.1.12",
     "@tinymce/tinymce-react": "^3.4.0",
     "algoliasearch": "^4.8.6",
     "ansi-to-react": "^6.1.5",

src/components/Auth/FirebaseUi.tsx

@@ -92,7 +92,7 @@ const useStyles = makeStyles((theme) =>
           {
             maxWidth: "none",
             minHeight: 32,
-            padding: theme.spacing(0.5, 1.5),
+            padding: theme.spacing(0.5, 1),
 
             backgroundColor: theme.palette.action.input + " !important",
             "&:hover": {
@@ -113,6 +113,8 @@ const useStyles = makeStyles((theme) =>
           },
         "& .firebaseui-idp-icon": {
           display: "block",
+          width: 20,
+          height: 20,
         },
         "& .firebaseui-idp-text": {
           ...theme.typography.button,
@@ -153,6 +155,10 @@ const useStyles = makeStyles((theme) =>
           },
         "& .firebaseui-idp-password .firebaseui-idp-icon, & .firebaseui-idp-phone .firebaseui-idp-icon, & .firebaseui-idp-anonymous .firebaseui-idp-icon":
           {
+            width: 24,
+            height: 24,
+            position: "relative",
+            left: -2,
             filter: theme.palette.mode === "light" ? "invert(1)" : "",
           },
 

src/components/Table/editors/TextEditor.tsx

@@ -1,37 +1,14 @@
 import { useRef, useLayoutEffect } from "react";
 import { EditorProps } from "react-data-grid";
 
-import { makeStyles, createStyles } from "@mui/styles";
 import { TextField } from "@mui/material";
 
 import { FieldType } from "constants/fields";
 import { getCellValue } from "utils/fns";
 import { useProjectContext } from "contexts/ProjectContext";
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: {
-      width: "100%",
-      height: "100%",
-      backgroundColor: "var(--background-color)",
-    },
-
-    inputBase: {
-      height: "100%",
-      font: "inherit", // Prevent text jumping
-      letterSpacing: "inherit", // Prevent text jumping
-    },
-    input: {
-      font: "inherit", // Prevent text jumping
-      letterSpacing: "inherit", // Prevent text jumping
-      padding: "var(--cell-padding)",
-    },
-  })
-);
-
 export default function TextEditor({ row, column }: EditorProps<any>) {
   const { updateCell } = useProjectContext();
-  const classes = useStyles();
 
   const type = (column as any).config?.renderFieldType ?? (column as any).type;
 
@@ -88,9 +65,23 @@ export default function TextEditor({ row, column }: EditorProps<any>) {
         ref: inputRef,
         maxLength: maxLength,
       }}
-      className={classes.root}
+      sx={{
+        width: "100%",
+        height: "100%",
+        backgroundColor: "var(--background-color)",
+
+        "& .MuiInputBase-root": {
+          height: "100%",
+          font: "inherit", // Prevent text jumping
+          letterSpacing: "inherit", // Prevent text jumping
+        },
+        "& .MuiInputBase-input": {
+          font: "inherit", // Prevent text jumping
+          letterSpacing: "inherit", // Prevent text jumping
+          padding: "var(--cell-padding)",
+        },
+      }}
       InputProps={{
-        classes: { root: classes.inputBase, input: classes.input },
         endAdornment:
           (column as any).type === FieldType.percentage ? "%" : undefined,
       }}

src/theme/CheckboxIcon.tsx

@@ -10,6 +10,7 @@ export default function CheckboxIcon() {
         height: toRem(18),
         margin: toRem((24 - 18) / 2),
         borderRadius: 1,
+        display: "flex",
 
         position: "relative",
 
@@ -46,7 +47,7 @@ export default function CheckboxIcon() {
           boxShadow: 1,
         },
 
-        ".Mui-checked &": {
+        ".Mui-checked &, [aria-selected='true'] &": {
           backgroundColor: "currentColor",
           borderColor: "currentColor",
 

src/theme/CheckboxIndeterminateIcon.tsx

@@ -10,6 +10,7 @@ export default function CheckboxIndeterminateIcon() {
         height: toRem(18),
         margin: toRem((24 - 18) / 2),
         borderRadius: 1,
+        display: "flex",
 
         position: "relative",
 
@@ -46,7 +47,7 @@ export default function CheckboxIndeterminateIcon() {
           boxShadow: 1,
         },
 
-        ".Mui-checked &": {
+        ".Mui-checked &, [aria-selected='true'] &": {
           backgroundColor: "currentColor",
           borderColor: "currentColor",
 

src/theme/RadioIcon.tsx

@@ -10,6 +10,7 @@ export default function RadioIcon() {
         height: toRem(20),
         margin: toRem((24 - 20) / 2),
         borderRadius: "50%",
+        display: "flex",
 
         backgroundColor: "transparent",
         border: "1px solid",
@@ -37,7 +38,7 @@ export default function RadioIcon() {
             }),
         },
 
-        ".Mui-checked &": {
+        ".Mui-checked &, [aria-selected='true'] &": {
           backgroundColor: "currentColor",
           borderColor: "currentColor",
 

yarn.lock

@@ -2672,10 +2672,10 @@
     use-debounce "^3.4.3"
     yup "^0.32.9"
 
-"@rowy/multiselect@^0.1.8":
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/@rowy/multiselect/-/multiselect-0.1.8.tgz#68d6234583121e0fc80abb28a463a27a1ca1101d"
-  integrity sha512-t1rVtkrmbFGDU860aTl0teSwUhkZiSCHtA2BasVaXABxlUxQhKZM90H7EaZrHOTTZ4opAzMwu9HvCdWKckzjsQ==
+"@rowy/multiselect@^0.1.12":
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/@rowy/multiselect/-/multiselect-0.1.12.tgz#03380ceaaed9f6847c59b6ccae6d216ce149d95a"
+  integrity sha512-1JmH5EDt0OSxcUWjQXfqGwp4w2xDJ5OjfS1uV9pXv7AcTw++RqwQKsF15llKYyatvpZohSyaVQIogPh7Zzpe/g==
 
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"