@firecms/core 3.0.0-beta.2-pre.4 → 3.0.0-beta.2

package/dist/util/index.d.ts

@@ -7,7 +7,7 @@ export * from "./objects";
 export * from "./paths";
 export * from "./regexp";
 export * from "./navigation_utils";
-export * from "./useDebounce";
+export * from "./useDebouncedCallback";
 export * from "./property_utils";
 export * from "./resolutions";
 export * from "./permissions";

package/dist/util/useDebouncedCallback.d.ts

@@ -0,0 +1 @@
+export declare function useDebouncedCallback<T>(value: T, callback: () => void, immediate: boolean, timeoutMs?: number): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-beta.2-pre.4",
+  "version": "3.0.0-beta.2",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -38,15 +38,15 @@
     "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
   },
   "dependencies": {
-    "@firecms/formex": "^3.0.0-beta.2-pre.4",
-    "@firecms/ui": "^3.0.0-beta.2-pre.4",
+    "@firecms/formex": "^3.0.0-beta.2",
+    "@firecms/ui": "^3.0.0-beta.2",
     "@fontsource/ibm-plex-mono": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
     "@hello-pangea/dnd": "^16.5.0",
     "date-fns": "^3.3.1",
     "history": "^5.3.0",
     "js-search": "^2.0.1",
-    "markdown-it": "^13.0.2",
+    "markdown-it": "^14.0.0",
     "notistack": "^3.0.1",
     "object-hash": "^3.0.0",
     "react-image-file-resizer": "^0.4.8",
@@ -99,15 +99,15 @@
     "react-router-dom": "^6.22.0",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "tsd": "^0.28.1",
+    "tsd": "^0.30.4",
     "typescript": "^5.3.3",
-    "vite": "^4.5.2"
+    "vite": "^5.1.1"
   },
   "files": [
     "dist",
     "src"
   ],
-  "gitHead": "a947c08aada0e374aec7dff2b0dc9e540e170834",
+  "gitHead": "9c3561bc09311f2339bb6fa224c88a62d3b19617",
   "publishConfig": {
     "access": "public"
   }

package/src/components/ArrayContainer.tsx

@@ -7,7 +7,7 @@ import {
     AddIcon,
     Button,
     ContentCopyIcon,
-    fieldBackgroundHoverMixin,
+    fieldBackgroundHoverMixin, HandleIcon,
     IconButton,
     Menu,
     MenuItem,
@@ -253,6 +253,7 @@ export function ArrayContainerItem({
     </div>;
 }
 
+
 export function ArrayItemOptions({
                                      direction,
                                      disabled,
@@ -291,14 +292,7 @@ export function ArrayItemOptions({
                     setMenuOpen(false);
                 }}
                 className={`cursor-${disabled ? "inherit" : "grab"}`}>
-                <svg width="24" height="24" viewBox="0 0 100 100" fill="none">
-                    <circle cx="28" cy="50" r="9" fill={"currentColor"}/>
-                    <circle cx="28" cy="21" r="9" fill={"currentColor"}/>
-                    <circle cx="71" cy="21" r="9" fill={"currentColor"}/>
-                    <circle cx="71" cy="50" r="9" fill={"currentColor"}/>
-                    <circle cx="71" cy="78" r="9" fill={"currentColor"}/>
-                    <circle cx="28" cy="78" r="9" fill={"currentColor"}/>
-                </svg>
+                <HandleIcon/>
             </IconButton>
 
             <Menu

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -8,7 +8,8 @@ import {
     FilterListOffIcon,
     SearchBar,
     Select,
-    SelectItem
+    SelectItem,
+    Tooltip
 } from "@firecms/ui";
 import { CollectionSize } from "../../../types";
 import { useLargeLayout } from "../../../hooks";
@@ -54,19 +55,21 @@ export function CollectionTableToolbar(props: CollectionTableToolbarProps) {
         </Button>;
 
     const sizeSelect = (
-        <Select
-            value={props.size as string}
-            className="w-16 h-10"
-            size={"small"}
-            onValueChange={(v) => props.onSizeChanged(v as CollectionSize)}
-            renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
-        >
-            {["xs", "s", "m", "l", "xl"].map((size) => (
-                <SelectItem key={size} value={size} className={"w-12 font-medium text-center"}>
-                    {size.toUpperCase()}
-                </SelectItem>
-            ))}
-        </Select>
+        <Tooltip title={"Table row size"} side={"right"} sideOffset={4}>
+            <Select
+                value={props.size as string}
+                className="w-16 h-10"
+                size={"small"}
+                onValueChange={(v) => props.onSizeChanged(v as CollectionSize)}
+                renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
+            >
+                {["xs", "s", "m", "l", "xl"].map((size) => (
+                    <SelectItem key={size} value={size} className={"w-12 font-medium text-center"}>
+                        {size.toUpperCase()}
+                    </SelectItem>
+                ))}
+            </Select>
+        </Tooltip>
     );
 
     return (

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -224,7 +224,15 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     const formex = useCreateFormex<M>({
         initialValues: (entity?.values ?? {}) as EntityValues<M>,
         validation: (values) => {
-            return validationSchema?.validate(values)
+            return validationSchema?.validate(values, { abortEarly: false })
+                .then(() => ({}))
+                .catch((e) => {
+                    const errors: Record<string, string> = {};
+                    e.inner.forEach((error: any) => {
+                        errors[error.path] = error.message;
+                    });
+                    return errors;
+                });
         },
         validateOnInitialRender: true,
         onSubmit: (values, actions) => {
@@ -339,6 +347,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     }
     const form = <div
         className={`text-gray-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-gray-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
+
         {internalForm}
 
         {savingError &&

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -53,7 +53,6 @@ import {
     Popover,
     SearchIcon,
     Skeleton,
-    TextField,
     Tooltip,
     Typography
 } from "@firecms/ui";
@@ -670,6 +669,7 @@ export const EntityCollectionView = React.memo(
             equal(a.isSubCollection, b.isSubCollection) &&
             equal(a.className, b.className) &&
             equal(a.properties, b.properties) &&
+            equal(a.propertiesOrder, b.propertiesOrder) &&
             equal(a.hideIdFromCollection, b.hideIdFromCollection) &&
             equal(a.inlineEditing, b.inlineEditing) &&
             equal(a.selectionEnabled, b.selectionEnabled) &&
@@ -804,13 +804,14 @@ function EntityIdHeaderWidget({
                       }}
                       className={"text-gray-900 dark:text-white w-96 max-w-full"}>
 
-                    <div className="flex p-4 w-full gap-4">
-                        <TextField
+                    <div className="flex p-2 w-full gap-4">
+                        <input
+                            autoFocus={openPopup}
                             placeholder={"Find entity by ID"}
-                            size={"small"}
+                            // size={"small"}
                             onChange={(e) => setSearchString(e.target.value)}
                             value={searchString}
-                            className={"flex-grow"}/>
+                            className={"flex-grow bg-transparent outline-none p-1"}/>
                         <Button variant={"outlined"}
                                 disabled={!searchString}
                                 type={"submit"}

package/src/components/PropertyIdCopyTooltipContent.tsx

@@ -0,0 +1,28 @@
+import { ContentPasteIcon, IconButton, Typography } from "@firecms/ui";
+import { useCallback, useState } from "react";
+
+export function PropertyIdCopyTooltipContent({ propertyId }: { propertyId: string }) {
+
+    const [copied, setCopied] = useState(false);
+
+    return (
+        <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
+            <div>
+                <Typography variant={"caption"} className={"min-w-20 text-slate-400"}
+                            color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
+                <Typography variant={"caption"} className={"text-white"}><code>{propertyId}</code></Typography>
+            </div>
+            {/*    Copy to clipboard button*/}
+            <IconButton size={"small"}>
+                <ContentPasteIcon size={"smallest"}
+                                  className={"text-white"}
+                                  onClick={useCallback(() => {
+                                      navigator.clipboard.writeText(propertyId);
+                                      setCopied(true);
+                                      setTimeout(() => setCopied(false), 2000);
+                                  }, [propertyId])}
+                />
+            </IconButton>
+        </div>
+    );
+}

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -266,7 +266,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         forceFilter
     });
 
-
     const {
         textSearchLoading,
         textSearchInitialised,

package/src/components/SelectableTable/SelectableTable.tsx

@@ -115,6 +115,7 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
          onEntityClick,
          onColumnResize,
          hoverRow = true,
+         size,
          inlineEditing = false,
          tableController:
              {
@@ -145,7 +146,6 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
      }: SelectableTableProps<M>) {
 
         const ref = useRef<HTMLDivElement>(null);
-        const [size, setSize] = React.useState<CollectionSize>("m");
 
         const [selectedCell, setSelectedCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
 
@@ -207,7 +207,7 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                     setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
                     select,
                     onValueChange,
-                    size,
+                    size: size ?? "m",
                     selectedCell,
                 }}
             >

package/src/components/VirtualTable/fields/VirtualTableInput.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 
-import { useDebounce } from "../../../util";
+import { useDebouncedCallback } from "../../../util";
 import { TextareaAutosize } from "@firecms/ui";
 
 export function VirtualTableInput(props: {
@@ -43,7 +43,7 @@ export function VirtualTableInput(props: {
         }
     }, [internalValue, updateValue, value]);
 
-    useDebounce(internalValue, doUpdate, !focused, 2000);
+    useDebouncedCallback(internalValue, doUpdate, !focused, 2000);
 
     useEffect(() => {
         if (ref.current && focused && !focusedState.current) {

package/src/components/VirtualTable/fields/VirtualTableNumberInput.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { useDebounce } from "../../../util";
+import { useDebouncedCallback } from "../../../util";
 
 export function VirtualTableNumberInput(props: {
     error: Error | undefined;
@@ -42,7 +42,7 @@ export function VirtualTableNumberInput(props: {
 
     }, [internalValue, value]);
 
-    useDebounce(internalValue, doUpdate, !focused, 2000);
+    useDebouncedCallback(internalValue, doUpdate, !focused, 2000);
 
     useEffect(
         () => {

package/src/core/Drawer.tsx

@@ -45,12 +45,12 @@ export function Drawer({
     const ungroupedNavigationViews = Object.values(navigationEntries).filter(e => !e.group);
 
     const buildGroupHeader = useCallback((group?: string) => {
-        if (!drawerOpen) return <div className="h-4"/>;
+        if (!drawerOpen) return <div className="h-12 w-full"/>;
         return <div
             className="pt-8 pl-6 pr-8 pb-2 flex flex-row items-center">
             <Typography variant={"caption"}
                         color={"secondary"}
-                        className="font-medium flex-grow">
+                        className="font-medium flex-grow line-clamp-1">
                 {group ? group.toUpperCase() : "Views".toUpperCase()}
             </Typography>
 
@@ -128,12 +128,18 @@ export function DrawerNavigationItem({
 
     const listItem = <NavLink
         onClick={onClick}
+        style={{
+            width: !drawerOpen ? "72px" : "280px",
+            transition: drawerOpen ? "width 150ms ease-in" : undefined
+        }}
         className={({ isActive }: any) => cn("rounded-r-xl truncate",
-            "hover:bg-gray-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-gray-100",
-            "flex flex-row items-center w-full mr-8",
+            "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-gray-100",
+            "flex flex-row items-center mr-8",
+            // "transition-all ease-in-out delay-100 duration-300",
+            // drawerOpen ? "w-full" : "w-18",
             drawerOpen ? "pl-8 h-12" : "pl-6 h-11",
             "font-medium text-sm",
-            isActive ? "bg-gray-100 dark:bg-gray-800" : ""
+            isActive ? "bg-slate-200 bg-opacity-75 dark:bg-gray-800" : ""
         )}
         to={url}
     >
@@ -149,14 +155,10 @@ export function DrawerNavigationItem({
         </div>
     </NavLink>;
 
-    // return listItem;
-    if (drawerOpen)
-        return listItem;
-    else
-        return <Tooltip
-            open={tooltipsOpen}
-            side="right"
-            title={name}>
-            {listItem}
-        </Tooltip>;
+    return <Tooltip
+        open={drawerOpen ? false : tooltipsOpen}
+        side="right"
+        title={name}>
+        {listItem}
+    </Tooltip>;
 }

package/src/core/FireCMS.tsx

@@ -19,6 +19,7 @@ import { useBuildDataSource } from "../internal/useBuildDataSource";
 import { useBuildCustomizationController } from "../internal/useBuildCustomizationController";
 import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
 import { AnalyticsContext } from "../contexts/AnalyticsContext";
+import { useProjectLog } from "../hooks/useProjectLog";
 
 /**
  * If you are using independent components of the CMS
@@ -78,12 +79,14 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         entityViews: entityViews ?? [],
         propertyConfigs: propertyConfigs ?? {},
         components
-    })
+    });
 
     const analyticsController = useMemo(() => ({
         onAnalyticsEvent
     }), []);
 
+    useProjectLog(authController);
+
     if (navigationController.navigationLoadingError) {
         return (
             <CenteredView maxWidth={"md"}>

package/src/core/NavigationRoutes.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { Route, Routes, useLocation } from "react-router-dom";
 import { CMSView } from "../types";
-import { DefaultHomePage, EntityCollectionView, NotFoundPage } from "../components";
+import { DefaultHomePage, EntityCollectionView, ErrorBoundary, NotFoundPage } from "../components";
 import { useNavigationController } from "../hooks";
 import { toArray } from "../util/arrays";
 
@@ -70,13 +70,15 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
                     return <Route path={urlPath + "/*"}
                                   key={`navigation_${collection.id ?? collection.path}`}
                                   element={
-                                      <EntityCollectionView
-                                          key={`collection_view_${collection.id ?? collection.path}`}
-                                          isSubCollection={false}
-                                          parentCollectionIds={[]}
-                                          fullPath={collection.id ?? collection.path}
-                                          {...collection}
-                                          Actions={toArray(collection.Actions)}/>
+                                      <ErrorBoundary>
+                                          <EntityCollectionView
+                                              key={`collection_view_${collection.id ?? collection.path}`}
+                                              isSubCollection={false}
+                                              parentCollectionIds={[]}
+                                              fullPath={collection.id ?? collection.path}
+                                              {...collection}
+                                              Actions={toArray(collection.Actions)}/>
+                                      </ErrorBoundary>
                                   }/>;
                 }
             );

package/src/core/Scaffold.tsx

@@ -176,7 +176,7 @@ function StyledDrawer(props: {
         className={"relative h-full no-scrollbar overflow-y-auto overflow-x-hidden"}
         style={{
             width,
-            transition: "left 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+            transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
         }}
     >
 
@@ -201,8 +201,8 @@ function StyledDrawer(props: {
         <div className={"flex flex-col h-full"}>
             <div
                 style={{
-                    transition: "padding 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
-                    padding: props.open ? "32px 96px 0px 24px" : "72px 16px 0px"
+                    transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+                    padding: props.open ? "32px 144px 0px 24px" : "72px 16px 0px"
                 }}
                 className={cn("cursor-pointer")}>
 
@@ -215,7 +215,7 @@ function StyledDrawer(props: {
                             ? <img src={props.logo}
                                    alt="Logo"
                                    className={cn("max-w-full max-h-full",
-                                       props.open ?? "w-[160px] h-[160px]")}/>
+                                       props.open ?? "w-[112px] h-[112px]")}/>
                             : <FireCMSLogo/>}
 
                     </Link>
@@ -259,7 +259,7 @@ function StyledDrawer(props: {
             onMouseLeave={props.onMouseLeave}
             style={{
                 width,
-                transition: "left 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+                transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
             }}>
 
             {innerDrawer}

package/src/core/field_configs.tsx

@@ -104,6 +104,17 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: TextFieldBinding
         }
     },
+    switch: {
+        key: "switch",
+        name: "Switch",
+        description: "Boolean true or false field (or yes or no, 0 or 1...)",
+        Icon: FlagIcon,
+        color: "#20d9d2",
+        property: {
+            dataType: "boolean",
+            Field: SwitchFieldBinding
+        }
+    },
     select: {
         key: "select",
         name: "Select/enum",
@@ -225,17 +236,6 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: ArrayOfReferencesFieldBinding
         }
     },
-    switch: {
-        key: "switch",
-        name: "Switch",
-        description: "Boolean true or false field (or yes or no, 0 or 1...)",
-        Icon: FlagIcon,
-        color: "#20d9d2",
-        property: {
-            dataType: "boolean",
-            Field: SwitchFieldBinding
-        }
-    },
     date_time: {
         key: "date_time",
         name: "Date/time",

package/src/form/EntityForm.tsx

@@ -34,7 +34,7 @@ import {
 } from "../hooks";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomIdField } from "./components/CustomIdField";
-import { Alert, Button, cn, DialogActions, IconButton, Typography } from "@firecms/ui";
+import { Alert, Button, cn, DialogActions, IconButton, Tooltip, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../components";
 import {
     copyEntityAction,
@@ -42,6 +42,7 @@ import {
 } from "../components/EntityCollectionTable/internal/default_entity_actions";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { ValidationError } from "yup";
+import { PropertyIdCopyTooltipContent } from "../components/PropertyIdCopyTooltipContent";
 
 /**
  * @group Components
@@ -388,7 +389,10 @@ function EntityFormInternal<M extends Record<string, any>>({
 
     const authController = useAuthController();
 
-    const getActionsForEntity = useCallback(({ entity, customEntityActions }: { entity?: Entity<M>, customEntityActions?: EntityAction[] }): EntityAction[] => {
+    const getActionsForEntity = useCallback(({ entity, customEntityActions }: {
+        entity?: Entity<M>,
+        customEntityActions?: EntityAction[]
+    }): EntityAction[] => {
         const createEnabled = canCreateEntity(inputCollection, authController, fullPathToCollectionSegments(path), null);
         const deleteEnabled = entity ? canDeleteEntity(inputCollection, authController, fullPathToCollectionSegments(path), entity) : true;
         const actions: EntityAction[] = [];
@@ -481,7 +485,10 @@ function EntityFormInternal<M extends Record<string, any>>({
                     savingError={savingError}
                     closeAfterSaveRef={closeAfterSaveRef}
                     autoSave={autoSave}
-                    entityActions={getActionsForEntity({ entity, customEntityActions: inputCollection.entityActions })}/>}
+                    entityActions={getActionsForEntity({
+                        entity,
+                        customEntityActions: inputCollection.entityActions
+                    })}/>}
 
             </div>
         </div>
@@ -588,7 +595,12 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                         <div id={`form_field_${key}`}
                              key={`field_${resolvedCollection.name}_${key}`}>
                             <ErrorBoundary>
-                                <PropertyFieldBinding {...cmsFormFieldProps}/>
+                                <Tooltip title={<PropertyIdCopyTooltipContent propertyId={key}/>}
+                                         delayDuration={800}
+                                         side={"left"}
+                                         sideOffset={16}>
+                                    <PropertyFieldBinding {...cmsFormFieldProps}/>
+                                </Tooltip>
                             </ErrorBoundary>
                         </div>
                     );

package/src/form/PropertyFieldBinding.tsx

@@ -67,7 +67,7 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
     return false;
 }) as typeof PropertyFieldBindingInternal;
 
-function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps = any, M extends Record<string, any> = Record<string, any>>
+function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>>
 ({
      propertyKey,
      property,
@@ -83,13 +83,8 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
 
     const customizationController = useCustomizationController();
 
-    const shouldAlwaysRerender = shouldPropertyReRender(property, customizationController.plugins);
-    // we use the standard Field for user defined fields, since it rebuilds
-    // when there are changes in other values, in contrast to Field
-    const FieldComponent = Field;
-
     return (
-        <FieldComponent
+        <Field
             name={propertyKey}
         >
             {(fieldProps) => {
@@ -155,7 +150,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                     componentProps={componentProps}
                     fieldProps={fieldProps}/>;
             }}
-        </FieldComponent>
+        </Field>
     );
 
 }

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { FieldProps, Properties, ResolvedProperties } from "../../types";
 
-import { LabelWithIcon } from "../../components";
+import { ErrorBoundary, LabelWithIcon } from "../../components";
 import { getIconForProperty, isHidden, pick } from "../../util";
 import { FieldHelperText } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
@@ -70,8 +70,10 @@ export function MapFieldBinding<T extends Record<string, any>>({
                         };
                         return (
                             <div key={`map-${propertyKey}-${index}`}>
-                                <PropertyFieldBinding
-                                    {...fieldProps}/>
+                                <ErrorBoundary>
+                                    <PropertyFieldBinding
+                                        {...fieldProps}/>
+                                </ErrorBoundary>
                             </div>
                         );
                     }
@@ -90,10 +92,10 @@ export function MapFieldBinding<T extends Record<string, any>>({
     );
 
     return (
-        <>
+        <ErrorBoundary>
 
             {!tableMode && !partOfBlock && <ExpandablePanel initiallyExpanded={expanded}
-                                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-slate-50 bg-opacity-50 dark:bg-gray-900"}
                                                             title={title}>{mapFormView}</ExpandablePanel>}
 
             {(tableMode || partOfBlock) && mapFormView}
@@ -104,7 +106,7 @@ export function MapFieldBinding<T extends Record<string, any>>({
                              disabled={disabled}
                              property={property}/>
 
-        </>
+        </ErrorBoundary>
     );
 }
 

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { CMSType, FieldProps, ResolvedProperty } from "../../types";
 import { FieldHelperText, FormikArrayContainer } from "../components";
-import { LabelWithIcon } from "../../components";
+import { ErrorBoundary, LabelWithIcon } from "../../components";
 import { useClearRestoreValue } from "../../hooks";
 import { getIconForProperty } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
@@ -62,7 +62,9 @@ export function RepeatFieldBinding<T extends Array<any>>({
             partOfBlock: false,
             autoFocus: internalId === lastAddedId
         };
-        return <PropertyFieldBinding {...fieldProps}/>;
+        return <ErrorBoundary>
+            <PropertyFieldBinding {...fieldProps}/>
+        </ErrorBoundary>;
     };
 
     const arrayContainer = <FormikArrayContainer value={value}