@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -1,4 +1,3 @@
-
 import type { FieldProps } from "../../types/fields";
 import type { MapProperty } from "@rebasepro/types";
 import React, { useEffect, useState } from "react";
@@ -6,11 +5,26 @@ import { DataType, GeoPoint } from "@rebasepro/types";
 
 import { ArrayContainer } from "../../components/ArrayContainer";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
-import { BooleanSwitchWithLabel, Button, cls, DateTimeField, defaultBorderMixin, ExpandablePanel, IconButton, Menu, MenuItem, TextField, Typography , iconSize } from "@rebasepro/ui";
-import { PlusIcon, ChevronDownIcon, MinusIcon } from "lucide-react";
+import {
+    BooleanSwitchWithLabel,
+    Button,
+    ChevronDownIcon,
+    cls,
+    DateTimeField,
+    defaultBorderMixin,
+    ExpandablePanel,
+    IconButton,
+    iconSize,
+    Menu,
+    MenuItem,
+    MinusIcon,
+    PlusIcon,
+    TextField,
+    Typography
+} from "@rebasepro/ui";
 import { getIconForProperty } from "../../util/property_utils";
-import { useCustomizationController, useTranslation } from "@rebasepro/core";
-import { getIn } from "@rebasepro/formex";
+import { useCustomizationController, useTranslation } from "@rebasepro/app";
+import { getIn } from "@rebasepro/forms";
 import { getDefaultValueFortype } from "@rebasepro/common";
 
 type MapEditViewRowState = [number, {
@@ -24,21 +38,21 @@ type MapEditViewRowState = [number, {
  * @group Form fields
  */
 export function KeyValueFieldBinding({
-    propertyKey,
-    value,
-    showError,
-    error,
-    disabled,
-    property,
-    setValue,
-    minimalistView,
-    includeDescription,
-    underlyingValueHasChanged,
-    autoFocus,
-    context
-}: FieldProps<MapProperty>) {
-
-    const expanded = (property.expanded === undefined ? true : property.expanded) || autoFocus;
+                                         propertyKey,
+                                         value,
+                                         showError,
+                                         error,
+                                         disabled,
+                                         property,
+                                         setValue,
+                                         minimalistView,
+                                         includeDescription,
+                                         underlyingValueHasChanged,
+                                         autoFocus,
+                                         context
+                                     }: FieldProps<MapProperty>) {
+
+    const expanded = (property.ui?.expanded === undefined ? true : property.ui?.expanded) || autoFocus;
 
     if (!property.keyValue) {
         throw Error(`Your property ${propertyKey} needs to have the 'keyValue' prop in order to use this field binding`);
@@ -47,10 +61,10 @@ export function KeyValueFieldBinding({
     const initialValues = getIn(context.formex.initialValues, propertyKey) as Record<string, unknown> | undefined;
 
     const mapFormView = <MapEditView value={value}
-        setValue={setValue}
-        disabled={disabled}
-        initialValue={initialValues}
-        fieldName={property.name ?? propertyKey}/>;
+                                     setValue={setValue}
+                                     disabled={disabled}
+                                     initialValue={initialValues}
+                                     fieldName={property.name ?? propertyKey}/>;
 
     const title = <LabelWithIconAndTooltip
         propertyKey={propertyKey}
@@ -63,22 +77,22 @@ export function KeyValueFieldBinding({
         <>
 
             {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
-                title={title}
-                innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>{mapFormView}</ExpandablePanel>}
+                                                 title={title}
+                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>{mapFormView}</ExpandablePanel>}
 
             {minimalistView && mapFormView}
 
             <FieldHelperText includeDescription={includeDescription}
-                showError={showError}
-                error={error}
-                disabled={disabled}
-                property={property}/>
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
 
         </>
     );
 }
 
-interface MapEditViewParams<T extends Record<string, any>> {
+interface MapEditViewParams<T extends Record<string, unknown>> {
     value?: T;
     initialValue?: T;
     setValue: (value: (T | null)) => void;
@@ -86,13 +100,13 @@ interface MapEditViewParams<T extends Record<string, any>> {
     disabled?: boolean
 }
 
-function MapEditView<T extends Record<string, any>>({
-    value,
-    initialValue,
-    setValue,
-    fieldName,
-    disabled
-}: MapEditViewParams<T>) {
+function MapEditView<T extends Record<string, unknown>>({
+                                                            value,
+                                                            initialValue,
+                                                            setValue,
+                                                            fieldName,
+                                                            disabled
+                                                        }: MapEditViewParams<T>) {
     const [internalState, setInternalState] = React.useState<MapEditViewRowState[]>(
         Object.keys(initialValue ?? {}).map((key) => [getRandomId(), {
             key,
@@ -120,13 +134,13 @@ function MapEditView<T extends Record<string, any>>({
         setInternalState(newRowIds);
     }, [value]);
 
-    const updatetype = (rowId: number, type: DataType) => {
-        if (!rowId) {
+    const updatetype = (id: number, type: DataType) => {
+        if (!id) {
             console.warn("No key selected for data type update");
             return;
         }
         setInternalState(internalState.map((row) => {
-            if (row[0] === rowId) {
+            if (row[0] === id) {
                 return [row[0], {
                     key: row[1].key,
                     type
@@ -136,126 +150,126 @@ function MapEditView<T extends Record<string, any>>({
         }));
         setValue({
             ...(value ?? {} as T),
-            [internalState.find((row) => row[0] === rowId)?.[1].key ?? ""]: getDefaultValueFortype(type)
+            [internalState.find((row) => row[0] === id)?.[1].key ?? ""]: getDefaultValueFortype(type)
         })
     };
 
     return <div className="py-1 flex flex-col gap-1">
         {internalState
-            .map(([rowId, {
-                key: fieldKey,
-                type
-            }], index) => {
-                const entryValue = fieldKey ? value?.[fieldKey] : "";
-                const onFieldKeyChange = (newKey: string) => {
-
-                    setInternalState(internalState.map((currentRowId) => {
-                        if (currentRowId[0] === rowId) {
-                            return [rowId, {
-                                key: newKey ?? "",
-                                type: currentRowId[1].type
-                            }];
+            .map(([id, {
+                    key: fieldKey,
+                    type
+                }], index) => {
+                    const entryValue = fieldKey ? value?.[fieldKey] : "";
+                    const onFieldKeyChange = (newKey: string) => {
+
+                        setInternalState(internalState.map((currentId) => {
+                            if (currentId[0] === id) {
+                                return [id, {
+                                    key: newKey ?? "",
+                                    type: currentId[1].type
+                                }];
+                            }
+                            return currentId;
+                        }));
+
+                        if (typeof value === "object" && newKey in value) {
+                            // if the key is already there, don't delete the previous value
+                            return;
                         }
-                        return currentRowId;
-                    }));
-
-                    if (typeof value === "object" && newKey in value) {
-                        // if the key is already there, don't delete the previous value
-                        return;
-                    }
 
-                    const newValue = { ...(value ?? {}) } as T;
-                    if (typeof initialValue === "object" && fieldKey in initialValue) {
-                        (newValue as Record<string, unknown>)[fieldKey] = undefined; // set to undefined to remove from the object, the driver will remove it from the backend
-                    } else {
-                        delete (newValue as Record<string, unknown>)[fieldKey];
-                    }
-                    setValue({
-                        ...newValue,
-                        [newKey ?? ""]: entryValue
-                    });
-                };
-                return <MapKeyValueRow rowId={rowId}
-                    key={rowId}
-                    fieldKey={fieldKey}
-                    value={value ?? {} as T}
-                    onDeleteClick={() => {
-                        const newValue = { ...(value ?? {}) as T };
-                        if (initialValue && fieldKey in initialValue) {
-                            (newValue as Record<string, unknown>)[fieldKey] = undefined;
+                        const newValue = { ...(value ?? {}) } as T;
+                        if (typeof initialValue === "object" && fieldKey in initialValue) {
+                            (newValue as Record<string, unknown>)[fieldKey] = undefined; // set to undefined to remove from the object, the driver will remove it from the backend
                         } else {
                             delete (newValue as Record<string, unknown>)[fieldKey];
                         }
-                        setInternalState(internalState.filter((currentRowId) => currentRowId[0] !== rowId));
                         setValue({
-                            ...newValue
+                            ...newValue,
+                            [newKey ?? ""]: entryValue
                         });
-                    }}
-                    onFieldKeyChange={onFieldKeyChange}
-                    setValue={setValue}
-                    entryValue={entryValue}
-                    type={type}
-                    disabled={disabled}
-                    updatetype={updatetype}/>;
-            }
+                    };
+                    return <MapKeyValueRow id={id}
+                                           key={id}
+                                           fieldKey={fieldKey}
+                                           value={value ?? {} as T}
+                                           onDeleteClick={() => {
+                                               const newValue = { ...(value ?? {}) as T };
+                                               if (initialValue && fieldKey in initialValue) {
+                                                   (newValue as Record<string, unknown>)[fieldKey] = undefined;
+                                               } else {
+                                                   delete (newValue as Record<string, unknown>)[fieldKey];
+                                               }
+                                               setInternalState(internalState.filter((currentId) => currentId[0] !== id));
+                                               setValue({
+                                                   ...newValue
+                                               });
+                                           }}
+                                           onFieldKeyChange={onFieldKeyChange}
+                                           setValue={setValue}
+                                           entryValue={entryValue}
+                                           type={type}
+                                           disabled={disabled}
+                                           updatetype={updatetype}/>;
+                }
             )}
 
         <Button variant={"text"}
-            size={"small"}
-            className="w-full"
-            disabled={disabled}
-            startIcon={<PlusIcon/>}
-            onClick={(e) => {
-                e.preventDefault();
-                setValue({
-                    ...(value ?? {} as T),
-                    "": null
-                });
-                setInternalState([...internalState, [getRandomId(), {
-                    key: "",
-                    type: "string"
-                }]]);
-            }
-            }>
+                size={"small"}
+                className="w-full"
+                disabled={disabled}
+                startIcon={<PlusIcon/>}
+                onClick={(e) => {
+                    e.preventDefault();
+                    setValue({
+                        ...(value ?? {} as T),
+                        "": null
+                    });
+                    setInternalState([...internalState, [getRandomId(), {
+                        key: "",
+                        type: "string"
+                    }]]);
+                }
+                }>
             {fieldName ? t("add_to_field", { fieldName }) : t("add")}
         </Button>
 
     </div>;
 }
 
-function MapKeyValueRow<T extends Record<string, any>>({
-    rowId,
-    fieldKey,
-    value,
-    onFieldKeyChange,
-    onDeleteClick,
-    setValue,
-    entryValue,
-    type,
-    updatetype,
-    disabled
-}: {
-    rowId: number,
+function MapKeyValueRow<T extends Record<string, unknown>>({
+                                                               id,
+                                                               fieldKey,
+                                                               value,
+                                                               onFieldKeyChange,
+                                                               onDeleteClick,
+                                                               setValue,
+                                                               entryValue,
+                                                               type,
+                                                               updatetype,
+                                                               disabled
+                                                           }: {
+    id: number,
     fieldKey: string,
     value: T,
     onFieldKeyChange: (newKey: string) => void,
     onDeleteClick: () => void,
     setValue: (value: (T | null)) => void,
-    entryValue: any,
+    entryValue: unknown,
     type: DataType,
     disabled?: boolean,
-    updatetype: (rowId: number, type: DataType) => void
+    updatetype: (id: number, type: DataType) => void
 }) {
 
     const { locale } = useCustomizationController();
     const { t } = useTranslation();
 
-    function buildInput(entryValue: any, fieldKey: string, type: DataType) {
+    function buildInput(entryValue: unknown, fieldKey: string, type: DataType) {
         if (type === "string" || type === "number") {
             return <TextField
                 key={type}
                 placeholder={"value"}
-                value={entryValue}
+                value={entryValue as string | number | undefined}
                 type={type === "number" ? "number" : "text"}
                 size={"medium"}
                 disabled={disabled || !fieldKey}
@@ -286,74 +300,75 @@ function MapKeyValueRow<T extends Record<string, any>>({
                     }
                 }}/>;
         } else if (type === "date") {
-            return <DateTimeField value={entryValue}
-                size={"medium"}
-                locale={locale}
-                disabled={disabled || !fieldKey}
-                onChange={(date) => {
-                    setValue({
-                        ...value,
-                        [fieldKey]: date
-                    });
-                }}/>;
+            return <DateTimeField value={entryValue as Date | null | undefined}
+                                  size={"medium"}
+                                  locale={locale}
+                                  disabled={disabled || !fieldKey}
+                                  onChange={(date) => {
+                                      setValue({
+                                          ...value,
+                                          [fieldKey]: date
+                                      });
+                                  }}/>;
         } else if (type === "boolean") {
-            return <BooleanSwitchWithLabel value={entryValue}
-                size={"medium"}
-                position={"start"}
-                disabled={disabled || !fieldKey}
-                onValueChange={(newValue) => {
-                    setValue({
-                        ...value,
-                        [fieldKey]: newValue
-                    });
-                }}/>;
+            return <BooleanSwitchWithLabel value={entryValue as boolean | null}
+                                           size={"medium"}
+                                           position={"start"}
+                                           disabled={disabled || !fieldKey}
+                                           onValueChange={(newValue) => {
+                                               setValue({
+                                                   ...value,
+                                                   [fieldKey]: newValue
+                                               });
+                                           }}/>;
         } else if (type === "array") {
+            const arrayValue = (entryValue as string[]) || [];
             return <div
                 className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
-                <ArrayContainer value={entryValue}
-                    newDefaultEntry={""}
-                    droppableId={rowId.toString()}
-                    addLabel={fieldKey ? t("add_to_field", { fieldName: fieldKey }) : t("add")}
-                    size={"small"}
-                    disabled={disabled || !fieldKey}
-                    canAddElements={true}
-                    onValueChange={(newValue) => {
-                        setValue({
-                            ...value,
-                            [fieldKey]: newValue
-                        });
-                    }}
-                    buildEntry={({
-                        index,
-                        internalId
-                    }) => {
-                        return <ArrayKeyValueRow
-                            index={index}
-                            id={internalId}
-                            value={entryValue[index]}
-                            disabled={disabled || !fieldKey}
-                            setValue={(newValue) => {
-                                const newArrayValue = [...entryValue];
-                                newArrayValue[index] = newValue;
-                                setValue({
-                                    ...value,
-                                    [fieldKey]: newArrayValue
-                                });
-                            }}
-                        />
-                    }}/>
+                <ArrayContainer value={arrayValue}
+                                newDefaultEntry={""}
+                                droppableId={id.toString()}
+                                addLabel={fieldKey ? t("add_to_field", { fieldName: fieldKey }) : t("add")}
+                                size={"small"}
+                                disabled={disabled || !fieldKey}
+                                canAddElements={true}
+                                onValueChange={(newValue) => {
+                                    setValue({
+                                        ...value,
+                                        [fieldKey]: newValue
+                                    });
+                                }}
+                                buildEntry={({
+                                                 index,
+                                                 internalId
+                                             }) => {
+                                    return <ArrayKeyValueRow
+                                        index={index}
+                                        id={internalId}
+                                        value={arrayValue[index]}
+                                        disabled={disabled || !fieldKey}
+                                        setValue={(newValue) => {
+                                            const newArrayValue = [...arrayValue] as unknown[];
+                                            newArrayValue[index] = newValue;
+                                            setValue({
+                                                ...value,
+                                                [fieldKey]: newArrayValue
+                                            });
+                                        }}
+                                    />
+                                }}/>
             </div>;
         } else if (type === "map") {
             return <div
                 className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
-                <MapEditView value={entryValue}
-                    fieldName={fieldKey}
-                    setValue={(updatedValue) => {
-                        setValue({
-                            ...value,
-                            [fieldKey]: updatedValue
-                        });
-                    }}/>
+                <MapEditView value={entryValue as Record<string, unknown> | undefined}
+                             fieldName={fieldKey}
+                             setValue={(updatedValue) => {
+                                 setValue({
+                                     ...value,
+                                     [fieldKey]: updatedValue
+                                 });
+                             }}/>
             </div>;
         } else {
             return <Typography
@@ -364,68 +379,68 @@ function MapKeyValueRow<T extends Record<string, any>>({
     }
 
     function doUpdatetype(type: DataType) {
-        updatetype(rowId, type);
+        updatetype(id, type);
     }
 
     return (<>
-        <Typography key={rowId.toString()}
-            component={"div"}
-            className="font-mono flex flex-row gap-1">
-            <div className="w-[300px] max-w-[30%]">
-                <TextField
-                    value={fieldKey}
-                    placeholder={"key"}
-                    disabled={disabled || (entryValue !== undefined && entryValue !== null && entryValue !== "")}
-                    size={"medium"}
-                    onChange={(event) => {
-                        onFieldKeyChange(event.target.value);
-                    }}/>
-            </div>
-
-            <div className="grow">
-                {(type !== "map" && type !== "array") && buildInput(entryValue, fieldKey, type)}
-            </div>
-            <div className={"flex flex-col"}>
-                <Menu
-                    trigger={<IconButton size={"smallest"}>
-                        <ChevronDownIcon size={iconSize.small}/>
-                    </IconButton>}
-                >
-                    <MenuItem dense
-                        onClick={() => doUpdatetype("string")}>string</MenuItem>
-                    <MenuItem dense
-                        onClick={() => doUpdatetype("number")}>number</MenuItem>
-                    <MenuItem dense
-                        onClick={() => doUpdatetype("boolean")}>boolean</MenuItem>
-                    <MenuItem dense
-                        onClick={() => doUpdatetype("date")}>date</MenuItem>
-                    <MenuItem dense
-                        onClick={() => doUpdatetype("map")}>map</MenuItem>
-                    <MenuItem dense
-                        onClick={() => doUpdatetype("array")}>array</MenuItem>
-                </Menu>
-
-                <IconButton aria-label="delete"
-                    size={"smallest"}
-                    onClick={onDeleteClick}>
-                    <MinusIcon size={iconSize.smallest}/>
-                </IconButton>
-            </div>
-        </Typography>
+            <Typography key={id.toString()}
+                        component={"div"}
+                        className="font-mono flex flex-row gap-1">
+                <div className="w-[300px] max-w-[30%]">
+                    <TextField
+                        value={fieldKey}
+                        placeholder={"key"}
+                        disabled={disabled || (entryValue !== undefined && entryValue !== null && entryValue !== "")}
+                        size={"medium"}
+                        onChange={(event) => {
+                            onFieldKeyChange(event.target.value);
+                        }}/>
+                </div>
+
+                <div className="grow">
+                    {(type !== "map" && type !== "array") && buildInput(entryValue, fieldKey, type)}
+                </div>
+                <div className={"flex flex-col"}>
+                    <Menu
+                        trigger={<IconButton size={"smallest"}>
+                            <ChevronDownIcon size={iconSize.small}/>
+                        </IconButton>}
+                    >
+                        <MenuItem dense
+                                  onClick={() => doUpdatetype("string")}>string</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdatetype("number")}>number</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdatetype("boolean")}>boolean</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdatetype("date")}>date</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdatetype("map")}>map</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdatetype("array")}>array</MenuItem>
+                    </Menu>
+
+                    <IconButton aria-label="delete"
+                                size={"smallest"}
+                                onClick={onDeleteClick}>
+                        <MinusIcon size={iconSize.smallest}/>
+                    </IconButton>
+                </div>
+            </Typography>
+
+            {(type === "map" || type === "array") && buildInput(entryValue, fieldKey, type)}
 
-        {(type === "map" || type === "array") && buildInput(entryValue, fieldKey, type)}
-
-    </>
+        </>
 
     );
 }
 
 function ArrayKeyValueRow<T>({
-    id,
-    index,
-    value,
-    setValue
-}: {
+                                 id,
+                                 index,
+                                 value,
+                                 setValue
+                             }: {
     id: number,
     index: number,
     value: T,
@@ -440,49 +455,50 @@ function ArrayKeyValueRow<T>({
         setSelectedtype(type);
     }
 
-    function buildInput(entryValue: any, type: DataType) {
+    function buildInput(entryValue: unknown, type: DataType) {
         if (type === "string" || type === "number") {
-            return <TextField value={entryValue}
-                type={type === "number" ? "number" : "text"}
-                size={"medium"}
-                onChange={(event) => {
-                    if (type === "number") {
-                        const numberValue = event.target.value ? parseFloat(event.target.value) : undefined;
-                        if (numberValue && isNaN(numberValue)) {
-                            setValue(null);
-                        } else if (numberValue !== undefined && numberValue !== null) {
-                            setValue(numberValue as T);
-                        } else {
-                            setValue(null);
-                        }
-                    } else {
-                        setValue(event.target.value as T);
-                    }
-                }}/>;
+            return <TextField value={entryValue as string | number | undefined}
+                              type={type === "number" ? "number" : "text"}
+                              size={"medium"}
+                              onChange={(event) => {
+                                  if (type === "number") {
+                                      const numberValue = event.target.value ? parseFloat(event.target.value) : undefined;
+                                      if (numberValue && isNaN(numberValue)) {
+                                          setValue(null);
+                                      } else if (numberValue !== undefined && numberValue !== null) {
+                                          setValue(numberValue as T);
+                                      } else {
+                                          setValue(null);
+                                      }
+                                  } else {
+                                      setValue(event.target.value as T);
+                                  }
+                              }}/>;
         } else if (type === "date") {
-            return <DateTimeField value={entryValue}
-                size={"medium"}
-                locale={locale}
-                onChange={(date) => {
-                    setValue(date as T);
-                }}/>;
+            return <DateTimeField value={entryValue as Date | null | undefined}
+                                  size={"medium"}
+                                  locale={locale}
+                                  onChange={(date) => {
+                                      setValue(date as T);
+                                  }}/>;
         } else if (type === "boolean") {
-            return <BooleanSwitchWithLabel value={entryValue}
-                size={"small"}
-                position={"start"}
-                onValueChange={(v) => {
-                    setValue(v as T);
-                }}/>;
+            return <BooleanSwitchWithLabel value={entryValue as boolean | null}
+                                           size={"small"}
+                                           position={"start"}
+                                           onValueChange={(v) => {
+                                               setValue(v as T);
+                                           }}/>;
         } else if (type === "array") {
             return <Typography variant={"caption"}>
                 Arrays of arrays are not supported.
             </Typography>;
         } else if (type === "map") {
+            const mapValue = (entryValue && typeof entryValue === "object") ? (entryValue as Record<string, unknown>) : undefined;
             return <div className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
-                <MapEditView value={entryValue}
-                    setValue={(updatedValue) => {
-                        setValue(updatedValue);
-                    }}/>
+                <MapEditView value={mapValue}
+                             setValue={(updatedValue) => {
+                                 setValue(updatedValue as T | null);
+                             }}/>
             </div>;
         } else {
             return <Typography
@@ -493,36 +509,36 @@ function ArrayKeyValueRow<T>({
     }
 
     return (<>
-        <Typography key={id.toString()}
-            component={"div"}
-            className="font-mono flex min-h-12 flex-row gap-1 items-center">
-
-            <div className="grow">
-                {selectedtype !== "map" && buildInput(value, selectedtype)}
-            </div>
-
-            <Menu
-                trigger={<IconButton size={"small"}
-                    className="h-7 w-7">
-                    <ChevronDownIcon/>
-                </IconButton>}>
-                <MenuItem dense
-                    onClick={() => doUpdatetype("string")}>string</MenuItem>
-                <MenuItem dense
-                    onClick={() => doUpdatetype("number")}>number</MenuItem>
-                <MenuItem dense
-                    onClick={() => doUpdatetype("boolean")}>boolean</MenuItem>
-                <MenuItem dense
-                    onClick={() => doUpdatetype("map")}>map</MenuItem>
-                <MenuItem dense
-                    onClick={() => doUpdatetype("date")}>date</MenuItem>
-            </Menu>
-
-        </Typography>
-
-        {selectedtype === "map" && buildInput(value, selectedtype)}
-
-    </>
+            <Typography key={id.toString()}
+                        component={"div"}
+                        className="font-mono flex min-h-12 flex-row gap-1 items-center">
+
+                <div className="grow">
+                    {selectedtype !== "map" && buildInput(value, selectedtype)}
+                </div>
+
+                <Menu
+                    trigger={<IconButton size={"small"}
+                                         className="h-7 w-7">
+                        <ChevronDownIcon/>
+                    </IconButton>}>
+                    <MenuItem dense
+                              onClick={() => doUpdatetype("string")}>string</MenuItem>
+                    <MenuItem dense
+                              onClick={() => doUpdatetype("number")}>number</MenuItem>
+                    <MenuItem dense
+                              onClick={() => doUpdatetype("boolean")}>boolean</MenuItem>
+                    <MenuItem dense
+                              onClick={() => doUpdatetype("map")}>map</MenuItem>
+                    <MenuItem dense
+                              onClick={() => doUpdatetype("date")}>date</MenuItem>
+                </Menu>
+
+            </Typography>
+
+            {selectedtype === "map" && buildInput(value, selectedtype)}
+
+        </>
 
     );
 }
@@ -531,7 +547,7 @@ function getRandomId() {
     return Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER));
 }
 
-function gettype(value: any): DataType | undefined {
+function gettype(value: unknown): DataType | undefined {
     if (typeof value === "string" || value === null) {
         return "string";
     } else if (typeof value === "number") {
@@ -542,7 +558,7 @@ function gettype(value: any): DataType | undefined {
         return "array";
     } else if (value instanceof Date) {
         return "date";
-    } else if (value?.isEntityReference && value?.isEntityReference()) {
+    } else if (value && typeof value === "object" && "isEntityReference" in value && typeof (value as Record<string, unknown>).isEntityReference === "function" && (value as Record<string, (...args: unknown[]) => unknown>).isEntityReference()) {
         return "reference";
     } else if (value instanceof GeoPoint) {
         return "geopoint";