@firecms/core 3.0.0-beta.10 → 3.0.0-beta.11

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 
-import { ClearIcon, Collapse, IconButton, TextField } from "@firecms/ui";
+import { CloseIcon, Collapse, IconButton, TextField } from "@firecms/ui";
 import { FieldProps, PreviewType } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { getIconForProperty } from "../../util";
@@ -28,7 +28,7 @@ export function TextFieldBinding<T extends string | number>({
                                                                 autoFocus,
                                                                 property,
                                                                 includeDescription,
-                                                                size = "medium"
+                                                                size = "large"
                                                             }: TextFieldBindingProps<T>) {
 
     let multiline: boolean | undefined;
@@ -85,7 +85,7 @@ export function TextFieldBinding<T extends string | number>({
                     endAdornment={
                         property.clearable && <IconButton
                             onClick={handleClearClick}>
-                            <ClearIcon/>
+                            <CloseIcon/>
                         </IconButton>
                     }
                     error={showError ? error : undefined}

package/src/hooks/data/delete.ts

@@ -12,10 +12,10 @@ import {
 /**
  * @group Hooks and utilities
  */
-export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, UserType extends User = User> =
+export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, USER extends User = User> =
     DeleteEntityProps<M>
     & {
-    callbacks?: EntityCallbacks<M, UserType>;
+    callbacks?: EntityCallbacks<M, USER>;
     onDeleteSuccess?: (entity: Entity<M>) => void;
     onDeleteFailure?: (entity: Entity<M>, e: Error) => void;
     onPreDeleteHookError?: (entity: Entity<M>, e: Error) => void;
@@ -43,7 +43,7 @@ export type DeleteEntityWithCallbacksProps<M extends Record<string, any>, UserTy
  * @param context
  * @group Hooks and utilities
  */
-export async function deleteEntityWithCallbacks<M extends Record<string, any>, UserType extends User>({
+export async function deleteEntityWithCallbacks<M extends Record<string, any>, USER extends User>({
                                                                                                           dataSource,
                                                                                                           entity,
                                                                                                           collection,
@@ -56,7 +56,7 @@ export async function deleteEntityWithCallbacks<M extends Record<string, any>, U
                                                                                                       }: DeleteEntityWithCallbacksProps<M> & {
                                                                                                           collection: ResolvedEntityCollection<M>,
                                                                                                           dataSource: DataSource,
-                                                                                                          context: FireCMSContext<UserType>
+                                                                                                          context: FireCMSContext<USER>
                                                                                                       }
 ): Promise<boolean> {
 

package/src/hooks/data/save.ts

@@ -1,7 +1,6 @@
 import {
     DataSource,
     Entity,
-    EntityCallbacks,
     EntityCollection,
     EntityValues,
     FireCMSContext,
@@ -49,7 +48,7 @@ export type SaveEntityWithCallbacksProps<M extends Record<string, any>> =
  * @see useDataSource
  * @group Hooks and utilities
  */
-export async function saveEntityWithCallbacks<M extends Record<string, any>, UserType extends User>({
+export async function saveEntityWithCallbacks<M extends Record<string, any>, USER extends User>({
                                                                                                         collection,
                                                                                                         path,
                                                                                                         entityId,
@@ -63,9 +62,9 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                                                                                                         onPreSaveHookError,
                                                                                                         onSaveSuccessHookError
                                                                                                     }: SaveEntityWithCallbacksProps<M> & {
-                                                                                                        collection: EntityCollection<M, UserType>,
+                                                                                                        collection: EntityCollection<M, USER>,
                                                                                                         dataSource: DataSource,
-                                                                                                        context: FireCMSContext<UserType>,
+                                                                                                        context: FireCMSContext<USER>,
                                                                                                     }
 ): Promise<void> {
 
@@ -86,7 +85,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                 path,
                 values: previousValues as EntityValues<M>,
                 entityId,
-                fields: customizationController.propertyConfigs
+                propertyConfigs: customizationController.propertyConfigs
             });
             updatedValues = await callbacks.onPreSave({
                 collection: resolvedCollection,
@@ -108,7 +107,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
         updatedValues = values;
     }
 
-    console.log("Saving entity", {
+    console.debug("Saving entity", {
         entityId,
         updatedValues,
         collection
@@ -128,7 +127,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    fields: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs
                 });
                 callbacks.onSaveSuccess({
                     collection: resolvedCollection,
@@ -157,7 +156,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
                     path,
                     values: updatedValues as EntityValues<M>,
                     entityId,
-                    fields: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs
                 });
                 callbacks.onSaveFailure({
                     collection: resolvedCollection,

package/src/hooks/data/useCollectionFetch.tsx

@@ -60,7 +60,7 @@ export interface CollectionFetchResult<M extends Record<string, any>> {
  * @param searchString
  * @group Hooks and utilities
  */
-export function useCollectionFetch<M extends Record<string, any>, UserType extends User>(
+export function useCollectionFetch<M extends Record<string, any>, USER extends User>(
     {
         path: inputPath,
         collection,
@@ -78,7 +78,7 @@ export function useCollectionFetch<M extends Record<string, any>, UserType exten
     const sortByProperty = sortBy ? sortBy[0] : undefined;
     const currentSort = sortBy ? sortBy[1] : undefined;
 
-    const context: FireCMSContext<UserType> = useFireCMSContext();
+    const context: FireCMSContext<USER> = useFireCMSContext();
 
     const [data, setData] = useState<Entity<M>[]>([]);
 

package/src/hooks/data/useEntityFetch.tsx

@@ -7,10 +7,10 @@ import { useFireCMSContext } from "../useFireCMSContext";
 /**
  * @group Hooks and utilities
  */
-export interface EntityFetchProps<M extends Record<string, any>, UserType extends User = User> {
+export interface EntityFetchProps<M extends Record<string, any>, USER extends User = User> {
     path: string;
     entityId?: string;
-    collection: EntityCollection<M, UserType>;
+    collection: EntityCollection<M, USER>;
     useCache?: boolean;
 }
 
@@ -35,20 +35,20 @@ const CACHE: Record<string, Entity<any> | undefined> = {};
  * @group Hooks and utilities
  */
 
-export function useEntityFetch<M extends Record<string, any>, UserType extends User>(
+export function useEntityFetch<M extends Record<string, any>, USER extends User>(
     {
         path: inputPath,
         entityId,
         collection,
         useCache = false
-    }: EntityFetchProps<M, UserType>): EntityFetchResult<M> {
+    }: EntityFetchProps<M, USER>): EntityFetchResult<M> {
 
     const dataSource = useDataSource(collection);
     const navigationController = useNavigationController();
 
     const path = navigationController.resolveAliasesFrom(inputPath);
 
-    const context: FireCMSContext<UserType> = useFireCMSContext();
+    const context: FireCMSContext<USER> = useFireCMSContext();
 
     const [entity, setEntity] = useState<Entity<M> | undefined>();
     const [dataLoading, setDataLoading] = useState<boolean>(true);

package/src/hooks/useAuthController.tsx

@@ -11,4 +11,4 @@ import { AuthControllerContext } from "../contexts/AuthControllerContext";
  * @see AuthController
  * @group Hooks and utilities
  */
-export const useAuthController = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): AuthControllerType => useContext(AuthControllerContext) as AuthControllerType;
+export const useAuthController = <USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>>(): AuthControllerType => useContext(AuthControllerContext) as AuthControllerType;

package/src/hooks/useBuildNavigationController.tsx

@@ -30,10 +30,10 @@ import { getParentReferencesFromPath } from "../util/parent_references_from_path
 const DEFAULT_BASE_PATH = "/";
 const DEFAULT_COLLECTION_PATH = "/c";
 
-export type BuildNavigationContextProps<EC extends EntityCollection, UserType extends User> = {
+export type BuildNavigationContextProps<EC extends EntityCollection, USER extends User> = {
     basePath?: string,
     baseCollectionPath?: string,
-    authController: AuthController<UserType>;
+    authController: AuthController<USER>;
     collections?: EC[] | EntityCollectionsBuilder<EC>;
     collectionPermissions?: PermissionsBuilder;
     views?: CMSView[] | CMSViewsBuilder;
@@ -51,7 +51,7 @@ export type BuildNavigationContextProps<EC extends EntityCollection, UserType ex
     injectCollections?: (collections: EntityCollection[]) => EntityCollection[];
 };
 
-export function useBuildNavigationController<EC extends EntityCollection, UserType extends User>(props: BuildNavigationContextProps<EC, UserType>): NavigationController {
+export function useBuildNavigationController<EC extends EntityCollection, USER extends User>(props: BuildNavigationContextProps<EC, USER>): NavigationController {
     const {
         basePath = DEFAULT_BASE_PATH,
         baseCollectionPath = DEFAULT_COLLECTION_PATH,
@@ -202,6 +202,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
             let shouldUpdateTopLevelNav = false;
             if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
                 collectionsRef.current = resolvedCollections;
+                console.log("Collections have changed", resolvedCollections);
                 shouldUpdateTopLevelNav = true;
             }
             if (collectionsRef.current === undefined) {
@@ -428,7 +429,7 @@ function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[],
     return resolvedCollections
         .filter((c) => {
             if (!c.permissions) return true;
-            const resolvedPermissions = resolvePermissions(c, authController, c.path, null)
+            const resolvedPermissions = resolvePermissions(c, authController, c.path, null);
             return resolvedPermissions?.read !== false;
         })
         .map((c) => {
@@ -461,9 +462,7 @@ async function resolveCollections(collections: undefined | EntityCollection[] |
     }
 
     resolvedCollections = applyPermissionsFunctionIfEmpty(resolvedCollections, collectionPermissions);
-
     resolvedCollections = filterOutNotAllowedCollections(resolvedCollections, authController);
-
     return resolvedCollections;
 }
 

package/src/hooks/useFireCMSContext.tsx

@@ -21,9 +21,9 @@ import React, { useEffect } from "react";
  * @see FireCMSContext
  * @group Hooks and utilities
  */
-export const useFireCMSContext = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): FireCMSContext<UserType, AuthControllerType> => {
+export const useFireCMSContext = <USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>>(): FireCMSContext<USER, AuthControllerType> => {
 
-    const authController = useAuthController<UserType, AuthControllerType>();
+    const authController = useAuthController<USER, AuthControllerType>();
     const sideDialogsController = useSideDialogsController();
     const sideEntityController = useSideEntityController();
     const navigation = useNavigationController();
@@ -35,7 +35,7 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
     const customizationController = useCustomizationController();
     const analyticsController = useAnalyticsController();
 
-    const fireCMSContextRef = React.useRef<FireCMSContext<UserType, AuthControllerType>>({
+    const fireCMSContextRef = React.useRef<FireCMSContext<USER, AuthControllerType>>({
         authController,
         sideDialogsController,
         sideEntityController,
@@ -68,9 +68,9 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
     return fireCMSContextRef.current;
 }
 
-// export const useFireCMSContext = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): FireCMSContext<UserType, AuthControllerType> => {
+// export const useFireCMSContext = <USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>>(): FireCMSContext<USER, AuthControllerType> => {
 //
-//     const authController = useAuthController<UserType, AuthControllerType>();
+//     const authController = useAuthController<USER, AuthControllerType>();
 //     const sideDialogsController = useSideDialogsController();
 //     const sideEntityController = useSideEntityController();
 //     const navigation = useNavigationController();

package/src/hooks/useResolvedNavigationFrom.tsx

@@ -55,12 +55,12 @@ interface ResolvedNavigationEntityCustom<M extends Record<string, any>> {
  * @param context
  * @group Hooks and utilities
  */
-export function resolveNavigationFrom<M extends Record<string, any>, UserType extends User>({
+export function resolveNavigationFrom<M extends Record<string, any>, USER extends User>({
                                                                                                 path,
                                                                                                 context
                                                                                             }: {
     path: string,
-    context: FireCMSContext<UserType>
+    context: FireCMSContext<USER>
 }): Promise<ResolvedNavigationEntry<M>[]> {
 
     const dataSource = context.dataSource;
@@ -126,12 +126,12 @@ export interface NavigationFrom<M extends Record<string, any>> {
  * in any React component that lives under `FireCMS`
  * @group Hooks and utilities
  */
-export function useResolvedNavigationFrom<M extends Record<string, any>, UserType extends User>(
+export function useResolvedNavigationFrom<M extends Record<string, any>, USER extends User>(
     {
         path
     }: NavigationFromProps): NavigationFrom<M> {
 
-    const context: FireCMSContext<UserType> = useFireCMSContext();
+    const context: FireCMSContext<USER> = useFireCMSContext();
 
     const [data, setData] = useState<ResolvedNavigationEntry<M>[] | undefined>();
     const [dataLoading, setDataLoading] = useState<boolean>(false);
@@ -142,7 +142,7 @@ export function useResolvedNavigationFrom<M extends Record<string, any>, UserTyp
         if (navigation) {
             setDataLoading(true);
             setDataLoadingError(undefined);
-            resolveNavigationFrom<M, UserType>({ path, context })
+            resolveNavigationFrom<M, USER>({ path, context })
                 .then((res) => {
                     setData(res);
                 })

package/src/hooks/useValidateAuthenticator.tsx

@@ -11,7 +11,7 @@ import { AuthController, Authenticator, DataSourceDelegate, StorageSource, User
  * @param storageSource
  * @param dataSourceDelegate
  */
-export function useValidateAuthenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>>
+export function useValidateAuthenticator<USER extends User = any>
 ({
      disabled,
      authController,
@@ -21,8 +21,8 @@ export function useValidateAuthenticator<UserType extends User = User, Controlle
  }:
      {
          disabled?: boolean,
-         authController: Controller,
-         authenticator?: boolean | Authenticator<UserType, Controller>,
+         authController: AuthController<USER>,
+         authenticator?: boolean | Authenticator<USER>,
          dataSourceDelegate: DataSourceDelegate;
          storageSource: StorageSource;
      }): {

package/src/internal/useBuildDataSource.ts

@@ -209,7 +209,7 @@ export function useBuildDataSource({
                     collection,
                     path,
                     entityId,
-                    fields: propertyConfigs
+                    propertyConfigs: propertyConfigs
                 })
                 : undefined;
 

package/src/internal/useUnsavedChangesDialog.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { Blocker, Transition } from "history";
 import { UNSAFE_NavigationContext, useNavigate } from "react-router-dom";
-import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 
 export function useNavigationUnsavedChangesDialog(when: boolean, onSuccess: () => void):
     {
@@ -89,8 +89,8 @@ export function UnsavedChangesDialog({
             }}
             open={open}
         >
+            <DialogTitle variant={"h6"}>{title}</DialogTitle>
             <DialogContent>
-                <Typography variant={"h6"}>{title}</Typography>
 
                 {body}
 

package/src/preview/PropertyPreview.tsx

@@ -53,10 +53,10 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
     const property = resolveProperty({
         propertyKey,
         propertyOrBuilder: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
-    if (value === undefined || property === null) {
+    if (property === null) {
         content = <EmptyValue/>;
     } else if (property.Preview) {
         content = createElement(property.Preview as React.ComponentType<PropertyPreviewProps>,
@@ -70,7 +70,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                 // entity,
                 customProps: property.customProps
             });
-    } else if (value === null) {
+    } else if (value === undefined || value === null) {
         content = <EmptyValue/>;
     } else if (property.dataType === "string") {
         const stringProperty = property as ResolvedStringProperty;

package/src/preview/PropertyPreviewProps.tsx

@@ -3,7 +3,7 @@ import { CMSType, Property, ResolvedProperty } from "../types";
 /**
  * @group Preview components
  */
-export type PreviewSize = "medium" | "small" | "smallest";
+export type PreviewSize = "small" | "medium" | "large";
 
 /**
  * @group Preview components

package/src/preview/components/BooleanPreview.tsx

@@ -21,6 +21,6 @@ export function BooleanPreview({
                   size={size}
                   color={"secondary"}/>
         {property.name && <span
-            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "smallest" ? "text-sm" : "")}>{property.name}</span>}
+            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "small" ? "text-sm" : "")}>{property.name}</span>}
     </div>;
 }

package/src/preview/components/EmptyValue.tsx

@@ -6,5 +6,5 @@ import React from "react";
 export function EmptyValue() {
 
     return <div
-        className="rounded-full bg-gray-200 bg-opacity-30 dark:bg-opacity-20 w-5 h-2 inline-block"/>;
+        className="rounded-full bg-surface-200 bg-opacity-30 dark:bg-opacity-20 w-5 h-2 inline-block"/>;
 }

package/src/preview/components/EnumValuesChip.tsx

@@ -6,7 +6,7 @@ import { buildEnumLabel, enumToObjectEntries, getColorScheme, getLabelOrConfigFr
 export interface EnumValuesChipProps {
     enumValues?: EnumValues;
     enumKey: string | number;
-    size: "smallest" | "small" | "medium";
+    size: "small" | "medium" | "large";
     className?: string;
     children?: React.ReactNode;
 }

package/src/preview/components/ImagePreview.tsx

@@ -22,7 +22,7 @@ export function ImagePreview({
 
     const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
 
-    if (size === "smallest") {
+    if (size === "small") {
         return (
             <img src={url}
                  className={"rounded-md"}
@@ -56,7 +56,6 @@ export function ImagePreview({
                  className={"rounded-md"}
                  style={imageStyle}/>
 
-
             <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
                 {navigator && <Tooltip
                     asChild={true}
@@ -69,8 +68,8 @@ export function ImagePreview({
                             e.preventDefault();
                             return navigator.clipboard.writeText(url);
                         }}>
-                        <ContentCopyIcon className={"text-gray-700 dark:text-gray-300"}
-                                         size={"small"}/>
+                        <ContentCopyIcon className={"text-surface-700 dark:text-surface-300"}
+                                         size={"smallest"}/>
                     </IconButton>
                 </Tooltip>}
 
@@ -85,8 +84,8 @@ export function ImagePreview({
                         size={"small"}
                         onClick={(e: any) => e.stopPropagation()}
                     >
-                        <OpenInNewIcon className={"text-gray-700 dark:text-gray-300"}
-                                       size={"small"}/>
+                        <OpenInNewIcon className={"text-surface-700 dark:text-surface-300"}
+                                       size={"smallest"}/>
                     </IconButton>
                 </Tooltip>
             </div>

package/src/preview/components/UrlComponentPreview.tsx

@@ -65,7 +65,7 @@ export function UrlComponentPreview({
                     width: getThumbnailMeasure(size),
                     height: getThumbnailMeasure(size)
                 }}>
-                <DescriptionIcon className="text-gray-700 dark:text-gray-300"/>
+                <DescriptionIcon className="text-surface-700 dark:text-surface-300"/>
                 {hint &&
                     <Tooltip title={hint}>
                         <Typography
@@ -84,11 +84,11 @@ function VideoPreview({
                       }: { size: PreviewSize, src: string, interactive: boolean }) {
 
     const imageSize = useMemo(() => {
-        if (size === "smallest")
+        if (size === "small")
             return "140px";
-        else if (size === "small")
-            return "240px";
         else if (size === "medium")
+            return "240px";
+        else if (size === "large")
             return "100%";
         else throw new Error("Invalid size");
     }, [size]);

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -20,7 +20,7 @@ export function ArrayOfMapsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property?.of)) {

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -18,7 +18,7 @@ export function ArrayOfReferencesPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property?.of)) {
@@ -28,7 +28,7 @@ export function ArrayOfReferencesPreview({
     if (property?.dataType !== "array" || !property.of || property.of.dataType !== "reference")
         throw Error("Picked wrong preview component ArrayOfReferencesPreview");
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     return (
         <div className="flex flex-col w-full">

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -23,7 +23,7 @@ export function ArrayOfStorageComponentsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property.of)) {
@@ -33,7 +33,7 @@ export function ArrayOfStorageComponentsPreview({
     if (property.dataType !== "array" || !property.of || property.of.dataType !== "string")
         throw Error("Picked wrong preview component ArrayOfStorageComponentsPreview");
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     return (
         <div className={"flex flex-wrap gap-2"}>

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -21,7 +21,7 @@ export function ArrayOfStringsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property.of)) {

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -23,7 +23,7 @@ export function ArrayOneOfPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
     if (property?.dataType !== "array")
@@ -37,7 +37,7 @@ export function ArrayOneOfPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     const typeField = property.oneOf.typeField ?? DEFAULT_ONE_OF_TYPE;
     const valueField = property.oneOf.valueField ?? DEFAULT_ONE_OF_VALUE;

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -23,7 +23,7 @@ export function ArrayPropertyPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
     if (!property.of) {
@@ -37,7 +37,7 @@ export function ArrayPropertyPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     return (
         <div className="flex flex-col gap-2">

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -34,7 +34,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
 
     const mapPropertyKeys: string[] = Object.keys(mapProperty.properties)
 
-    if (size === "smallest")
+    if (size === "small")
         return (
             <div className="w-full flex flex-col space-y-1 md:space-y-2">
                 {mapPropertyKeys.map((key, index) => (
@@ -110,7 +110,7 @@ export function KeyValuePreview({ value }: { value: any }) {
     return <div
         className="flex flex-col gap-1 w-full">
         {
-            Object.entries(value).map(([key, childValue]) => (
+            Object.entries(value).map(([key, childValue]: [string, any]) => (
                 <div
                     key={`map_preview_table_${key}}`}
                     className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
@@ -127,9 +127,9 @@ export function KeyValuePreview({ value }: { value: any }) {
                         </div>
                         <div
                             className="flex-grow max-w-[75%]">
-                            {typeof childValue !== "object" && <Typography>
+                            {childValue && <Typography>
                                 <ErrorBoundary>
-                                    {childValue && childValue.toString()}
+                                    {childValue.toString()}
                                 </ErrorBoundary>
                             </Typography>}
                         </div>