@firecms/core 3.0.0-canary.112 → 3.0.0-canary.114

package/dist/preview/components/ReferencePreview.d.ts

@@ -14,4 +14,4 @@ export type ReferencePreviewProps = {
 /**
  * @group Preview components
  */
-export declare const ReferencePreview: React.FunctionComponent<ReferencePreviewProps>;
+export declare const ReferencePreview: (props: ReferencePreviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/datasource.d.ts

@@ -54,6 +54,7 @@ export interface SaveEntityProps<M extends Record<string, any> = any> {
  */
 export interface DeleteEntityProps<M extends Record<string, any> = any> {
     entity: Entity<M>;
+    collection?: EntityCollection<M> | ResolvedEntityCollection<M>;
 }
 /**
  * Component in charge of communicating with the data source.
@@ -122,21 +123,21 @@ export interface DataSource {
      * @param entity
      * @return was the whole deletion flow successful
      */
-    deleteEntity<M extends Record<string, any> = any>({ entity }: DeleteEntityProps<M>): Promise<void>;
+    deleteEntity<M extends Record<string, any> = any>({ entity, collection }: DeleteEntityProps<M>): Promise<void>;
     /**
      * Check if the given property is unique in the given collection
      * @param path Collection path
      * @param name of the property
      * @param value
-     * @param property
+     * @param collection
      * @param entityId
      * @return `true` if there are no other fields besides the given entity
      */
-    checkUniqueField(path: string, name: string, value: any, entityId?: string, databaseId?: string): Promise<boolean>;
+    checkUniqueField(path: string, name: string, value: any, entityId?: string, collection?: EntityCollection): Promise<boolean>;
     /**
      * Generate an id for a new entity
      */
-    generateEntityId(path: string): string;
+    generateEntityId(path: string, collection: EntityCollection): string;
     /**
      * Count the number of entities in a collection
      */
@@ -241,13 +242,14 @@ export interface DataSourceDelegate {
      * @param name of the property
      * @param value
      * @param entityId
+     * @param collection
      * @return `true` if there are no other fields besides the given entity
      */
-    checkUniqueField(path: string, name: string, value: any, entityId?: string, databaseId?: string): Promise<boolean>;
+    checkUniqueField(path: string, name: string, value: any, entityId?: string, collection?: EntityCollection): Promise<boolean>;
     /**
      * Generate an id for a new entity
      */
-    generateEntityId(path: string): string;
+    generateEntityId(path: string, collection?: EntityCollection): string;
     /**
      * Count the number of entities in a collection
      */

package/dist/types/entity_overrides.d.ts

@@ -1,6 +1,6 @@
-import { DataSource } from "./datasource";
+import { DataSourceDelegate } from "./datasource";
 import { StorageSource } from "./storage";
 export type EntityOverrides = {
-    dataSource?: DataSource;
+    dataSourceDelegate?: DataSourceDelegate;
     storageSource?: StorageSource;
 };

package/dist/types/side_dialogs_controller.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 /**
  * Controller to open the side dialog
  * @group Hooks and utilities
@@ -11,6 +12,11 @@ export interface SideDialogsController {
      * List of side panels currently open
      */
     sidePanels: SideDialogPanelProps[];
+    /**
+     * Override the current side panels
+     * @param panels
+     */
+    setSidePanels: (panels: SideDialogPanelProps[]) => void;
     /**
      * Open one or multiple side panels
      * @param props
@@ -54,4 +60,8 @@ export interface SideDialogPanelProps {
      * Callback when the panel is closed
      */
     onClose?: () => void;
+    /**
+     * Use this prop to store additional data in the panel
+     */
+    additional?: any;
 }

package/dist/util/icons.d.ts

@@ -10,4 +10,5 @@ export type IconViewProps = {
 export declare const IconForView: React.NamedExoticComponent<{
     collectionOrView?: IconViewProps;
     className?: string;
+    size?: "smallest" | "small" | "medium" | "large" | number;
 }>;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.112",
+    "version": "3.0.0-canary.114",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,9 +46,9 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/editor": "^3.0.0-canary.112",
-        "@firecms/formex": "^3.0.0-canary.112",
-        "@firecms/ui": "^3.0.0-canary.112",
+        "@firecms/editor": "^3.0.0-canary.114",
+        "@firecms/formex": "^3.0.0-canary.114",
+        "@firecms/ui": "^3.0.0-canary.114",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.1.1",
         "clsx": "^2.1.1",
@@ -100,7 +100,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "da32db5185c6e867794209172c89cf9f92abc404",
+    "gitHead": "4da25dc93f9634b085b6de96ce1bed4aab935626",
     "publishConfig": {
         "access": "public"
     },

package/src/components/ArrayContainer.tsx

@@ -27,7 +27,8 @@ interface ArrayContainerProps<T> {
     onInternalIdAdded?: (id: number) => void;
     includeAddButton?: boolean;
     newDefaultEntry: T;
-    onValueChange: (value: T[]) => void
+    onValueChange: (value: T[]) => void,
+    className?: string;
 }
 
 const buildIdsMap = (value: any[]) =>
@@ -53,7 +54,8 @@ export function ArrayContainer<T>({
                                       onInternalIdAdded,
                                       includeAddButton,
                                       newDefaultEntry,
-                                      onValueChange
+                                      onValueChange,
+                                      className
                                   }: ArrayContainerProps<T>) {
 
     const hasValue = value && Array.isArray(value) && value.length > 0;
@@ -154,6 +156,7 @@ export function ArrayContainer<T>({
             >
                 {(droppableProvided, droppableSnapshot) => (
                     <div
+                        className={className}
                         {...droppableProvided.droppableProps}
                         ref={droppableProvided.innerRef}>
                         {hasValue && internalIds.map((internalId: number, index: number) => {
@@ -236,13 +239,13 @@ export function ArrayContainerItem({
         {...provided.draggableProps}
         style={provided.draggableProps.style}
         className={`${
-            (isDragging || onHover) ? fieldBackgroundHoverMixin : ""
+            (isDragging || onHover) ? "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20" : ""
         } mb-1 rounded-md opacity-100`}
     >
         <div
             className="flex items-start">
             <div
-                className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark bg-white dark:bg-gray-900 bg-opacity-80 dark:bg-opacity-80">
+                className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
                 {buildEntry(index, internalId)}
             </div>
             <ArrayItemOptions direction={size === "small" ? "row" : "column"}

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback } from "react";
 import equal from "react-fast-compare"
 
-import { EmptyValue, ReferencePreview } from "../../../preview";
+import { ReferencePreview } from "../../../preview";
 import { CollectionSize, Entity, EntityCollection, EntityReference, FilterValues } from "../../../types";
 
 import { getPreviewSizeFrom } from "../../../preview/util";
-import { getReferenceFrom } from "../../../util";
+import { getReferenceFrom, IconForView } from "../../../util";
 import { useCustomizationController, useNavigationController, useReferenceDialog } from "../../../hooks";
 import { ErrorView } from "../../ErrorView";
 import { cls } from "@firecms/ui";
@@ -39,11 +39,11 @@ export function TableReferenceField(props: TableReferenceFieldProps) {
             throw Error(`Couldn't find the corresponding collection view for the path: ${path}`);
         }
     }
-    return <TableReferenceFieldSuccess {...props} collection={collection}/>;
+    return <TableReferenceFieldInternal {...props} collection={collection}/>;
 }
 
-export const TableReferenceFieldSuccess = React.memo(
-    function TableReferenceFieldSuccess(props: TableReferenceFieldProps & {
+export const TableReferenceFieldInternal = React.memo(
+    function TableReferenceFieldInternal(props: TableReferenceFieldProps & {
         collection: EntityCollection;
     }) {
         const {
@@ -88,11 +88,11 @@ export const TableReferenceFieldSuccess = React.memo(
             }
         );
 
-        const handleOpen = useCallback(() => {
+        const handleOpen = () => {
             if (disabled)
                 return;
             referenceDialogController.open();
-        }, [disabled, referenceDialogController]);
+        };
 
         const valueNotSet = !internalValue || (Array.isArray(internalValue) && internalValue.length === 0);
 
@@ -151,12 +151,17 @@ export const TableReferenceFieldSuccess = React.memo(
                 {internalValue && multiselect && buildMultipleReferenceField()}
 
                 {valueNotSet &&
-                    <EntityPreviewContainer className={cls("p-4 text-sm font-medium flex items-center gap-4 uppercase",
+                    <EntityPreviewContainer className={cls("p-4 text-sm font-medium flex items-center uppercase",
+                        multiselect ? "gap-4" : "gap-6",
                         disabled
                             ? "text-slate-500"
                             : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800")}
                                             onClick={handleOpen}
                                             size={"medium"}>
+                        <IconForView
+                            size={"small"}
+                            collectionOrView={collection}
+                            className={"text-gray-300 dark:text-gray-600"}/>
                         Edit {title}
                     </EntityPreviewContainer>}
 

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -306,7 +306,7 @@ export const EntityCollectionView = React.memo(
                  value,
                  property,
                  entityId
-             }) => dataSource.checkUniqueField(fullPath, name, value, entityId, collection.databaseId),
+             }) => dataSource.checkUniqueField(fullPath, name, value, entityId, collection),
             [fullPath]);
 
         const onValueChange: OnCellValueChange<any, any> = ({

package/src/components/EntityPreview.tsx

@@ -8,6 +8,7 @@ import {
     getEntityPreviewKeys,
     getEntityTitlePropertyKey,
     getValueInPath,
+    IconForView,
     resolveCollection
 } from "../util";
 import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
@@ -76,14 +77,14 @@ export function EntityPreview({
     return <EntityPreviewContainer onClick={disabled ? undefined : onClick}
                                    hover={disabled ? undefined : hover}
                                    size={size}>
-        {imageProperty && (
-            <div className={cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "smallest" ? "my-0.5" : "m-2 self-start")}>
-                <PropertyPreview property={imageProperty}
-                                 propertyKey={imagePropertyKey as string}
-                                 size={"smallest"}
-                                 value={getValueInPath(entity.values, imagePropertyKey as string)}/>
-            </div>
-        )}
+        <div className={cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "smallest" ? "my-0.5" : "m-2 self-start")}>
+            {imageProperty && <PropertyPreview property={imageProperty}
+                                               propertyKey={imagePropertyKey as string}
+                                               size={"smallest"}
+                                               value={getValueInPath(entity.values, imagePropertyKey as string)}/>}
+            {!imageProperty && <IconForView collectionOrView={collection} size={size} className={"mr-2"}/>}
+        </div>
+
 
         <div className={"flex flex-col flex-grow w-full m-1"}>
 
@@ -180,16 +181,17 @@ export type EntityPreviewContainerProps = {
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
-const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
-                                                                                                       children,
-                                                                                                       hover,
-                                                                                                       onClick,
-                                                                                                       size,
-                                                                                                       style,
-                                                                                                       className,
-                                                                                                       fullwidth = true,
-                                                                                                       ...props
-                                                                                                   }, ref) => {
+
+export const EntityPreviewContainer = React.forwardRef<HTMLDivElement, EntityPreviewContainerProps>(({
+                                                                                                         children,
+                                                                                                         hover,
+                                                                                                         onClick,
+                                                                                                         size,
+                                                                                                         style,
+                                                                                                         className,
+                                                                                                         fullwidth = true,
+                                                                                                         ...props
+                                                                                                     }, ref) => {
     return <div
         ref={ref}
         style={{
@@ -218,7 +220,3 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
         {children}
     </div>;
 });
-
-EntityPreviewContainerInner.displayName = "EntityPreviewContainer";
-
-export const EntityPreviewContainer = React.memo(EntityPreviewContainerInner) as React.FC<EntityPreviewContainerProps>;

package/src/components/HomePage/DefaultHomePage.tsx

@@ -64,18 +64,15 @@ export function DefaultHomePage({
     } = navigationController.topLevelNavigation;
 
     const [filteredUrls, setFilteredUrls] = useState<string[] | null>(null);
+    const performingSearch = Boolean(filteredUrls);
 
     const filteredNavigationEntries = filteredUrls
-        ? navigationEntries.filter((entry) => filteredUrls.includes(entry.url))
+        ? filteredUrls.map(url => navigationEntries.find(e => e.url === url)).filter(Boolean) as TopNavigationEntry[]
         : navigationEntries;
 
     useEffect(() => {
         fuse.current = new Fuse(navigationEntries, {
-            keys: ["name",
-                "description",
-                "group",
-                "path"
-            ]
+            keys: ["name", "description", "group", "path"]
         });
     }, [navigationEntries]);
 
@@ -92,7 +89,8 @@ export function DefaultHomePage({
             }
         }, []);
 
-    const allGroups: Array<string | undefined> = [...groups];
+    const filteredGroups = filteredUrls ? filteredNavigationEntries.map(entry => entry.group) : [];
+    const allGroups: Array<string | undefined> = filteredUrls ? filteredGroups.filter((group, index) => filteredGroups.indexOf(group) === index) : [...groups];
     if (filteredNavigationEntries.filter(e => !e.group).length > 0 || filteredNavigationEntries.length === 0) {
         allGroups.push(undefined);
     }
@@ -148,7 +146,7 @@ export function DefaultHomePage({
                     {additionalActions}
                 </div>
 
-                <FavouritesView hidden={Boolean(filteredUrls)}/>
+                <FavouritesView hidden={performingSearch}/>
 
                 {additionalChildrenStart}
 
@@ -172,7 +170,7 @@ export function DefaultHomePage({
 
                     const thisGroupCollections = filteredNavigationEntries
                         .filter((entry) => entry.group === group || (!entry.group && group === undefined));
-                    if (thisGroupCollections.length === 0 && AdditionalCards.length === 0)
+                    if (thisGroupCollections.length === 0 && (AdditionalCards.length === 0 || performingSearch))
                         return null;
                     return (
                         <NavigationGroup

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -16,7 +16,7 @@ import {
 } from "../../hooks";
 import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
-import { canCreateEntity, resolveCollection } from "../../util";
+import { canCreateEntity, IconForView, resolveCollection } from "../../util";
 import { useSelectionController } from "../EntityCollectionView/useSelectionController";
 import { useColumnIds, useTableSearchHelper } from "../common";
 import { useSideDialogContext } from "../../core";
@@ -109,6 +109,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
 
     const fullPath = navigation.resolveAliasesFrom(pathInput);
 
+    console.trace("Opening reference dialog for path " + fullPath);
     const dataSource = useDataSource(collection);
 
     const [entitiesDisplayedFirst, setEntitiesDisplayedFirst] = useState<Entity<any>[]>([]);
@@ -289,7 +290,11 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         tableController={tableController}
                         enablePopupIcon={false}
                         tableRowActionsBuilder={tableRowActionsBuilder}
-                        title={<Typography variant={"subtitle2"}>
+                        title={<Typography variant={"subtitle2"} className={"flex flex-row gap-2"}>
+                            <IconForView
+                                size={"small"}
+                                collectionOrView={collection}
+                                className={"text-gray-300 dark:text-gray-600"}/>
                             {collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`}
                         </Typography>}
                         defaultSize={collection.defaultSize}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { DateTimeField } from "@firecms/ui";
+import { cls, DateTimeField, focusedDisabled } from "@firecms/ui";
 import { useCustomizationController } from "../../../hooks";
 
 export function VirtualTableDateField(props: {
@@ -28,8 +28,8 @@ export function VirtualTableDateField(props: {
             onChange={(dateValue) => updateValue(dateValue ?? null)}
             size={"medium"}
             invisible={true}
-            className={"w-full h-full"}
-            inputClassName={"w-full h-full"}
+            inputClassName={cls("w-full h-full", focusedDisabled)}
+            className={cls("w-full h-full", focusedDisabled)}
             mode={mode}
             locale={locale}
         />

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 
 import { useDebouncedCallback } from "../../../util";
-import { TextareaAutosize } from "@firecms/ui";
+import { focusedDisabled, TextareaAutosize } from "@firecms/ui";
 
 export function VirtualTableInput(props: {
     error: Error | undefined;
@@ -58,6 +58,7 @@ export function VirtualTableInput(props: {
 
     return (
         <TextareaAutosize
+            className={focusedDisabled}
             ref={ref}
             style={{
                 padding: 0,

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useDebouncedCallback } from "../../../util";
+import { cls, focusedDisabled } from "@firecms/ui";
 
 export function VirtualTableNumberInput(props: {
     error: Error | undefined;
@@ -65,7 +66,7 @@ export function VirtualTableNumberInput(props: {
     return (
         <input
             ref={ref}
-            className="w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-none font-normal leading-normal text-unset"
+            className={cls("w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-none font-normal leading-normal text-unset", focusedDisabled)}
             style={{
                 textAlign: align
             }}

package/src/core/EntityEditView.tsx

@@ -199,7 +199,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             if (mustSetCustomId) {
                 return undefined;
             } else {
-                return dataSource.generateEntityId(path);
+                return dataSource.generateEntityId(path, collection);
             }
         } else {
             return entityIdProp;
@@ -231,9 +231,9 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         }
     );
 
-    const selectedTabRef = useRef<string>(defaultSelectedView ?? MAIN_TAB_VALUE);
+    const [selectedTab, setSelectedTab] = useState<string>(defaultSelectedView ?? MAIN_TAB_VALUE);
 
-    const mainViewVisible = selectedTabRef.current === MAIN_TAB_VALUE;
+    const mainViewVisible = selectedTab === MAIN_TAB_VALUE;
 
     const subcollections = (collection.subcollections ?? []).filter(c => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
@@ -307,7 +307,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             sideEntityController.replace({
                 path,
                 entityId: updatedEntity.id,
-                selectedSubPath: MAIN_TAB_VALUE === selectedTabRef.current ? undefined : selectedTabRef.current,
+                selectedSubPath: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab,
                 updateUrl: true,
                 collection,
             });
@@ -491,15 +491,15 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             .filter(Boolean) as EntityCustomView[]
         : [];
 
-    const selectedEntityView = resolvedEntityViews.find(e => e.key === selectedTabRef.current);
-    const shouldShowEntityActions = !autoSave && (selectedTabRef.current === MAIN_TAB_VALUE || selectedEntityView?.includeActions);
+    const selectedEntityView = resolvedEntityViews.find(e => e.key === selectedTab);
+    const shouldShowEntityActions = !autoSave && (selectedTab === MAIN_TAB_VALUE || selectedEntityView?.includeActions);
 
     const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
         .map(
             (customView, colIndex) => {
                 if (!customView)
                     return null;
-                if (selectedTabRef.current !== customView.key)
+                if (selectedTab !== customView.key)
                     return null;
                 const Builder = customView.Builder;
                 if (!Builder) {
@@ -532,7 +532,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         (subcollection, colIndex) => {
             const subcollectionId = subcollection.id ?? subcollection.path;
             const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
-            if (selectedTabRef.current !== subcollectionId)
+            if (selectedTab !== subcollectionId)
                 return null;
             return (
                 <div
@@ -568,14 +568,16 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     }, []);
 
     const onSideTabClick = (value: string) => {
-        selectedTabRef.current = value;
-        sideEntityController.replace({
-            path,
-            entityId,
-            selectedSubPath: value === MAIN_TAB_VALUE ? undefined : value,
-            updateUrl: true,
-            collection,
-        });
+        setSelectedTab(value);
+        if (status === "existing") {
+            sideEntityController.replace({
+                path,
+                entityId,
+                selectedSubPath: value === MAIN_TAB_VALUE ? undefined : value,
+                updateUrl: true,
+                collection,
+            });
+        }
     };
 
     const onIdUpdateError = useCallback((error: any) => {
@@ -675,7 +677,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                         name,
                                                                         value,
                                                                         property
-                                                                    }) => dataSource.checkUniqueField(path, name, value, entityId, collection.databaseId),
+                                                                    }) => dataSource.checkUniqueField(path, name, value, entityId, collection),
         [dataSource, path, entityId]);
 
     const validationSchema = useMemo(() => entityId
@@ -1027,7 +1029,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     </div>}
 
                     <Tabs
-                        value={selectedTabRef.current}
+                        value={selectedTab}
                         onValueChange={(value) => {
                             onSideTabClick(value);
                         }}

package/src/core/SideDialogs.tsx

@@ -104,11 +104,9 @@ function SideDialogView({
     };
 
     const onCloseRequest = (force?: boolean) => {
-        console.log("onCloseRequest", blocked, force);
         if (blocked && !force) {
             setDrawerCloseRequested(true);
         } else {
-            console.log("onCloseRequest closing");
             sideDialogsController.close();
             panel?.onClose?.();
         }

package/src/form/components/FormikArrayContainer.tsx

@@ -12,6 +12,7 @@ interface ArrayContainerProps<T> {
     includeAddButton?: boolean;
     newDefaultEntry?: T | null;
     setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
+    className?: string;
 }
 
 /**
@@ -27,7 +28,8 @@ export function FormikArrayContainer<T>({
                                             onInternalIdAdded,
                                             includeAddButton,
                                             newDefaultEntry = null,
-                                            setFieldValue
+                                            setFieldValue,
+                                            className
                                         }: ArrayContainerProps<T>) {
 
     return <ArrayContainer droppableId={name}
@@ -39,6 +41,7 @@ export function FormikArrayContainer<T>({
                            onInternalIdAdded={onInternalIdAdded}
                            includeAddButton={includeAddButton}
                            newDefaultEntry={newDefaultEntry}
+                           className={className}
                            onValueChange={(value) => setFieldValue(name, value)}
     />;
 }

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -70,10 +70,10 @@ export function ArrayOfReferencesFieldBinding({
         }
     );
 
-    const onEntryClick = useCallback((e: React.SyntheticEvent) => {
+    const onEntryClick = (e: React.SyntheticEvent) => {
         e.preventDefault();
         referenceDialogController.open();
-    }, [referenceDialogController]);
+    };
 
     const buildEntry = useCallback((index: number, internalId: number) => {
         const entryValue = value && value.length > index ? value[index] : undefined;
@@ -100,7 +100,7 @@ export function ArrayOfReferencesFieldBinding({
             icon={getIconForProperty(property, "small")}
             required={property.validation?.required}
             title={property.name}
-            className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+            className={"flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
         {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
     </>);
 
@@ -120,7 +120,7 @@ export function ArrayOfReferencesFieldBinding({
 
             <Button
                 className="my-4 justify-center text-left"
-                variant="outlined"
+                variant="text"
                 color="primary"
                 disabled={isSubmitting}
                 onClick={onEntryClick}>

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -71,6 +71,7 @@ export function BlockFieldBinding<T extends Array<any>>({
 
     const firstOneOfKey = Object.keys(property.oneOf.properties)[0];
     const body = <FormikArrayContainer value={value}
+                                       className={"flex flex-col gap-3"}
                                        name={propertyKey}
                                        addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
                                        buildEntry={buildEntry}
@@ -194,7 +195,7 @@ function BlockEntry({
     };
 
     return (
-        <div className={cls(paperMixin, "bg-transparent p-2 mb-4")}>
+        <div className={cls(paperMixin, "bg-transparent p-2")}>
 
             <Field
                 name={typeFieldName}