Merge branch 'develop' into rc

src/components/Table/Mock/Cell.tsx

@@ -1,46 +1,12 @@
 import { createElement } from "react";
 
-import { styled } from "@mui/material";
+import StyledTable from "@src/components/Table/Styled/StyledTable";
+import StyledCell from "@src/components/Table/Styled/StyledCell";
 import EmptyState from "@src/components/EmptyState";
 
 import { FieldType } from "@src/constants/fields";
 import { getFieldProp } from "@src/components/fields";
-
-const Root = styled("div")(({ theme }) => ({
-  width: "100%",
-  height: 43,
-  position: "relative",
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-
-  pointerEvents: "none",
-
-  border: `1px solid ${theme.palette.divider}`,
-  borderTopWidth: 0,
-  backgroundColor: theme.palette.background.paper,
-
-  display: "flex",
-  alignItems: "center",
-  padding: theme.spacing(0, 1.25),
-
-  ...theme.typography.body2,
-  fontSize: "0.75rem",
-  lineHeight: "inherit",
-  color: theme.palette.text.secondary,
-
-  "& .cell-collapse-padding": {
-    margin: theme.spacing(0, -1.5),
-    width: `calc(100% + ${theme.spacing(3)})`,
-  },
-}));
-
-const Value = styled("div")(({ theme }) => ({
-  width: "100%",
-  height: 43,
-  display: "flex",
-  justifyContent: "flex-start",
-  alignItems: "center",
-}));
+import { DEFAULT_ROW_HEIGHT } from "@src/components/Table";
 
 export interface ICellProps
   extends Partial<
@@ -53,6 +19,7 @@ export interface ICellProps
   type: FieldType;
   value: any;
   name?: string;
+  rowHeight?: number;
 }
 
 export default function Cell({
@@ -60,29 +27,47 @@ export default function Cell({
   type,
   value,
   name,
+  rowHeight = DEFAULT_ROW_HEIGHT,
   ...props
 }: ICellProps) {
-  const formatter = type ? getFieldProp("TableCell", type) : null;
+  const tableCell = type ? getFieldProp("TableCell", type) : null;
 
   return (
-    <Root {...props}>
-      <Value>
-        {formatter ? (
-          createElement(formatter, {
+    <StyledTable>
+      <StyledCell
+        {...props}
+        style={
+          {
+            ...props.style,
+            height: rowHeight,
+            "--row-height": rowHeight,
+          } as any
+        }
+      >
+        {tableCell ? (
+          createElement(tableCell, {
             value,
-            rowIdx: 0,
             column: {
-              type,
-              key: field,
-              name,
-              config: { options: [] },
-              editable: false,
-            } as any,
-            row: { [field]: value },
-            isRowSelected: false,
-            onRowSelectionChange: () => {},
-            isSummaryRow: false,
-          } as any)
+              columnDef: {
+                meta: {
+                  type,
+                  key: field,
+                  name,
+                  config: { options: [] },
+                  editable: false,
+                },
+              },
+            },
+            row: {
+              original: {
+                _rowy_ref: { path: "_rowy_/_mockCell" },
+                [field]: value,
+              },
+            },
+            focusInsideCell: false,
+            disabled: true,
+            rowHeight: DEFAULT_ROW_HEIGHT,
+          })
         ) : typeof value === "string" ||
           typeof value === "number" ||
           value === undefined ||
@@ -93,7 +78,7 @@ export default function Cell({
         ) : (
           <EmptyState basic wrap="nowrap" message="Invalid column type" />
         )}
-      </Value>
-    </Root>
+      </StyledCell>
+    </StyledTable>
   );
 }

src/components/fields/Email/Settings.tsx

@@ -0,0 +1,28 @@
+import { ISettingsProps } from "@src/components/fields/types";
+import { TextField, Button } from "@mui/material";
+
+export default function Settings({ onChange, config }: ISettingsProps) {
+
+    const copyStandardRegex = () => {
+      onChange("validationRegex")("^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9.-]+.[a-zA-z]{2,3}$");
+    }
+
+    return (
+        <>
+            <TextField
+                type="text"
+                label="Validation regex"
+                id="validation-regex"
+                value={config.validationRegex}
+                fullWidth
+                onChange={(e) => {
+                    if (e.target.value === "") onChange("validationRegex")(null);
+                    else onChange("validationRegex")(e.target.value);
+                }}
+            />
+            <Button style={{ width: "200px", margin: "20px auto auto" }} onClick={copyStandardRegex}>
+                Use standard regex
+            </Button>
+        </>
+    );
+}

src/components/fields/Email/index.tsx

@@ -13,6 +13,10 @@ const SideDrawerField = lazy(
     import("./SideDrawerField" /* webpackChunkName: "SideDrawerField-Email" */)
 );
 
+const Settings = lazy(
+  () => import("./Settings" /* webpackChunkName: "Settings-ShortText" */)
+);
+
 export const config: IFieldConfig = {
   type: FieldType.email,
   name: "Email",
@@ -25,6 +29,7 @@ export const config: IFieldConfig = {
   contextMenuActions: BasicContextMenuActions,
   TableCell: withRenderTableCell(DisplayCell, EditorCell),
   SideDrawerField,
+  settings: Settings,
   filter: {
     operators: filterOperators,
   },

src/hooks/useFirestoreDocWithAtom.ts

@@ -88,15 +88,12 @@ export function useFirestoreDocWithAtom<T = TableRow>(
       { includeMetadataChanges: true },
       (docSnapshot) => {
         try {
-          // Create doc if it doesn’t exist and we’re online
-          // WARNING: If offline and we doc doesn’t exist in cache, it will
-          // ovewrite with default values when we go online
-          if (
-            !docSnapshot.exists() &&
-            !!createIfNonExistent &&
-            !docSnapshot.metadata.fromCache
-          ) {
-            setDoc(docSnapshot.ref, createIfNonExistent);
+          // If doc doesn’t exist, set data atom to default value
+          // But don’t create a new document in db, since this has previously
+          // caused documents to be reset, and the bug is hard to reproduce.
+          // Instead, when the user updates the document, it will be created.
+          if (!docSnapshot.exists() && !!createIfNonExistent) {
+            // Temporarily set the data atom to the default data
             setDataAtom({ ...createIfNonExistent, _rowy_ref: docSnapshot.ref });
           } else {
             setDataAtom({