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

package/src/preview/components/ReferencePreview.tsx

@@ -1,21 +1,11 @@
 import * as React from "react";
-import { useMemo } from "react";
 
-import { Entity, EntityCollection, EntityReference, ResolvedProperty } from "../../types";
-
-import { getReferencePreviewKeys, getValueInPath, resolveCollection } from "../../util";
-import {
-    useCustomizationController,
-    useEntityFetch,
-    useNavigationController,
-    useSideEntityController
-} from "../../hooks";
-import { PropertyPreview } from "../PropertyPreview";
+import { Entity, EntityCollection, EntityReference } from "../../types";
+import { useCustomizationController, useEntityFetch, useNavigationController } from "../../hooks";
 import { PreviewSize } from "../PropertyPreviewProps";
-import { SkeletonPropertyComponent } from "../property_previews/SkeletonPropertyComponent";
-import { cn, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { Skeleton } from "@firecms/ui";
 import { ErrorView } from "../../components";
-import { useAnalyticsController } from "../../hooks/useAnalyticsController";
+import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
@@ -23,52 +13,44 @@ export type ReferencePreviewProps = {
     size: PreviewSize;
     previewProperties?: string[];
     onClick?: (e: React.SyntheticEvent) => void;
-    onHover?: boolean;
-    allowEntityNavigation?: boolean;
+    hover?: boolean;
+    includeEntityLink?: boolean;
+    includeId?: boolean;
 };
 
 /**
  * @group Preview components
  */
-export const ReferencePreview = React.memo<ReferencePreviewProps>(function ReferencePreview(props: ReferencePreviewProps) {
+export const ReferencePreview = function ReferencePreview(props: ReferencePreviewProps) {
     const reference = props.reference;
-    if (!((reference as unknown) instanceof EntityReference)) {
+    if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
         console.warn("Reference preview received value of type", typeof reference);
-        return <ReferencePreviewContainer
+        return <EntityPreviewContainer
             onClick={props.onClick}
             size={props.size}>
             <ErrorView error={"Unexpected value. Click to edit"}
                        tooltip={JSON.stringify(reference)}/>
-        </ReferencePreviewContainer>;
+        </EntityPreviewContainer>;
     }
     return <ReferencePreviewInternal {...props} />;
-}, areEqual) as React.FunctionComponent<ReferencePreviewProps>;
-
-function areEqual(prevProps: ReferencePreviewProps, nextProps: ReferencePreviewProps) {
-    return prevProps.disabled === nextProps.disabled &&
-        prevProps.size === nextProps.size &&
-        prevProps.onHover === nextProps.onHover &&
-        prevProps.reference?.id === nextProps.reference?.id &&
-        prevProps.reference?.path === nextProps.reference?.path &&
-        prevProps.allowEntityNavigation === nextProps.allowEntityNavigation
-        ;
-}
+};
 
-function ReferencePreviewInternal<M extends Record<string, any>>({
-                                                                     disabled,
-                                                                     reference,
-                                                                     previewProperties,
-                                                                     size,
-                                                                     onHover,
-                                                                     onClick,
-                                                                     allowEntityNavigation = true
-                                                                 }: ReferencePreviewProps) {
+function ReferencePreviewInternal({
+                                      disabled,
+                                      reference,
+                                      previewProperties,
+                                      size,
+                                      hover,
+                                      onClick,
+                                      includeEntityLink = true,
+                                      includeId = true
+                                  }: ReferencePreviewProps) {
 
     const customizationController = useCustomizationController();
 
     const navigationController = useNavigationController();
 
-    const collection = navigationController.getCollection<EntityCollection<M>>(reference.path);
+    const collection = navigationController.getCollection(reference.path);
     if (!collection) {
         if (customizationController.components?.missingReference) {
             return <customizationController.components.missingReference path={reference.path}/>;
@@ -83,20 +65,26 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
         previewProperties={previewProperties}
         size={size}
         disabled={disabled}
-        allowEntityNavigation={allowEntityNavigation}
+        includeEntityLink={includeEntityLink}
+        includeId={includeId}
         onClick={onClick}
-        onHover={onHover}/>
+        hover={hover}/>
 }
 
-function ReferencePreviewExisting<M extends Record<string, any> = any>({ reference, collection, previewProperties, size, disabled, allowEntityNavigation, onClick, onHover }: ReferencePreviewProps & {
+function ReferencePreviewExisting<M extends Record<string, any> = any>({
+                                                                           reference,
+                                                                           collection,
+                                                                           previewProperties,
+                                                                           size,
+                                                                           disabled,
+                                                                           includeEntityLink,
+                                                                           includeId,
+                                                                           onClick,
+                                                                           hover
+                                                                       }: ReferencePreviewProps & {
     collection: EntityCollection<M>
 }) {
 
-    const customizationController = useCustomizationController();
-
-    const analyticsController = useAnalyticsController();
-    const sideEntityController = useSideEntityController();
-
     const {
         entity,
         dataLoading,
@@ -114,145 +102,54 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({ referen
 
     const usedEntity = entity ?? referencesCache.get(reference.pathWithId);
 
-    const resolvedCollection = useMemo(() => resolveCollection({
-        collection,
-        path: reference.path,
-        values: usedEntity?.values,
-        fields: customizationController.propertyConfigs
-    }), [collection]);
-
-    const listProperties = useMemo(() => getReferencePreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
-        [previewProperties, resolvedCollection, size]);
-
     let body: React.ReactNode;
 
-    if (!resolvedCollection) {
-        return <ErrorView
-            error={"Could not find collection with id " + resolvedCollection}/>
-    }
-
     if (!reference) {
         body = <ErrorView error={"Reference not set"}/>;
     } else if (usedEntity && !usedEntity.values) {
         body = <ErrorView error={"Reference does not exist"}
                           tooltip={reference.path}/>;
-    } else {
-        body = (
-            <>
-                <div
-                    className="flex flex-col flex-grow w-full max-w-[calc(100%-52px)] m-1">
-
-                    {size !== "tiny" && (
-                        reference
-                            ? <div className={`${
-                                size !== "medium"
-                                    ? "block whitespace-nowrap overflow-hidden truncate"
-                                    : ""
-                            }`}>
-                                <Typography variant={"caption"}
-                                            className={"font-mono"}>
-                                    {reference.id}
-                                </Typography>
-                            </div>
-                            : <Skeleton/>)}
-
-                    {listProperties && listProperties.map((key) => {
-                        const childProperty = resolvedCollection.properties[key as string];
-                        if (!childProperty) return null;
-
-                        return (
-                            <div key={"ref_prev_" + (key as string)}
-                                 className={listProperties.length > 1 ? "my-0.5" : "my-0"}>
-                                {
-                                    usedEntity
-                                        ? <PropertyPreview
-                                            propertyKey={key as string}
-                                            value={getValueInPath(usedEntity.values, key)}
-                                            property={childProperty as ResolvedProperty}
-                                            // entity={usedEntity}
-                                            size={"tiny"}/>
-                                        : <SkeletonPropertyComponent
-                                            property={childProperty as ResolvedProperty}
-                                            size={"tiny"}/>
-                                }
-                            </div>
-                        );
-                    })}
-
-                </div>
-                <div className={`my-${size === "tiny" ? 2 : 4}`}>
-                    {!disabled && usedEntity && allowEntityNavigation &&
-                        <Tooltip title={`See details for ${usedEntity.id}`}>
-                            <IconButton
-                                color={"inherit"}
-                                size={"small"}
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
-                                        path: usedEntity.path,
-                                        entityId: usedEntity.id
-                                    });
-                                    sideEntityController.open({
-                                        entityId: usedEntity.id,
-                                        path: usedEntity.path,
-                                        collection: resolvedCollection,
-                                        updateUrl: true
-                                    });
-                                }}>
-                                <KeyboardTabIcon size={"small"}/>
-                            </IconButton>
-                        </Tooltip>}
-                </div>
-            </>
+    }
+    if (body) {
+
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                                    hover={disabled ? undefined : hover}
+                                    size={size}>
+                {body}
+            </EntityPreviewContainer>
         );
     }
 
-    return (
-        <ReferencePreviewContainer onClick={disabled ? undefined : onClick}
-                                   onHover={disabled ? undefined : onHover}
-                                   size={size}>
-            {body}
-        </ReferencePreviewContainer>
-    );
-}
-
-export function ReferencePreviewContainer({
-                                              children,
-                                              onHover,
-                                              size,
-                                              onClick
-                                          }: {
-    children: React.ReactNode;
-    onHover?: boolean;
-    size: PreviewSize;
-    onClick?: (e: React.SyntheticEvent) => void;
-}) {
-    return <Typography variant={"label"}
-                       className={cn("bg-opacity-70 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-60",
-                           "w-full",
-                           "flex",
-                           "rounded-md",
-                           "overflow-hidden",
-                           onHover ? "hover:bg-opacity-90 dark:hover:bg-opacity-90" : "",
-                           size === "medium" ? "p-2" : "p-1",
-                           size === "tiny" ? "items-center" : "",
-                           "transition-colors duration-300 ease-in-out ",
-                           // onHover ? "shadow-outline" : "",
-                           onClick ? "cursor-pointer" : "")}
-                       style={{
-                           // @ts-ignore
-                           tabindex: 0
-                       }}
-                       onClick={(event) => {
-                           if (onClick) {
-                               event.preventDefault();
-                               onClick(event);
-                           }
-                       }}>
+    if (dataLoading && !usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                                    hover={disabled ? undefined : hover}
+                                    size={size}>
+                <Skeleton/>
+            </EntityPreviewContainer>
+        );
+    }
 
-        {children}
+    if (!usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                                    hover={disabled ? undefined : hover}
+                                    size={size}>
+                <ErrorView error={"Entity not found"}/>
+            </EntityPreviewContainer>
+        );
+    }
+    return <EntityPreview size={size}
+                          previewProperties={previewProperties}
+                          disabled={disabled}
+                          entity={usedEntity}
+                          collection={collection}
+                          onClick={onClick}
+                          includeEntityLink={includeEntityLink}
+                          includeId={includeId}
+                          hover={hover}/>;
 
-    </Typography>
 }
 
 const referencesCache = new Map<string, Entity<any>>();

package/src/preview/components/StorageThumbnail.tsx

@@ -11,6 +11,7 @@ type StorageThumbnailProps = {
     storagePathOrDownloadUrl: string;
     storeUrl: boolean;
     size: PreviewSize;
+    interactive?: boolean;
 };
 
 /**
@@ -21,13 +22,15 @@ export const StorageThumbnail = React.memo<StorageThumbnailProps>(StorageThumbna
 function areEqual(prevProps: StorageThumbnailProps, nextProps: StorageThumbnailProps) {
     return prevProps.size === nextProps.size &&
         prevProps.storagePathOrDownloadUrl === nextProps.storagePathOrDownloadUrl &&
-        prevProps.storeUrl === nextProps.storeUrl;
+        prevProps.storeUrl === nextProps.storeUrl&&
+        prevProps.interactive === nextProps.interactive;
 }
 
 const URL_CACHE: Record<string, DownloadConfig> = {};
 
 export function StorageThumbnailInternal({
                                              storeUrl,
+                                             interactive,
                                              storagePathOrDownloadUrl,
                                              size
                                          }: StorageThumbnailProps) {
@@ -68,6 +71,7 @@ export function StorageThumbnailInternal({
     return downloadConfig?.url
         ? <UrlComponentPreview previewType={previewType}
                                url={downloadConfig.url}
+                               interactive={interactive}
                                size={size}
                                hint={storagePathOrDownloadUrl}/>
         : renderSkeletonImageThumbnail(size);

package/src/preview/components/UrlComponentPreview.tsx

@@ -1,10 +1,10 @@
-import React from "react";
+import React, { useMemo } from "react";
 
 import { ImagePreview } from "./ImagePreview";
 import { getThumbnailMeasure } from "../util";
 import { PreviewType } from "../../types";
 import { PreviewSize } from "../PropertyPreviewProps";
-import { DescriptionIcon, OpenInNewIcon, Tooltip, Typography } from "@firecms/ui";
+import { cls, DescriptionIcon, OpenInNewIcon, Tooltip, Typography } from "@firecms/ui";
 import { EmptyValue } from "./EmptyValue";
 
 /**
@@ -14,12 +14,15 @@ export function UrlComponentPreview({
                                         url,
                                         previewType,
                                         size,
-                                        hint
+                                        hint,
+                                        interactive = true
                                     }: {
     url: string,
     previewType?: PreviewType,
     size: PreviewSize,
-    hint?: string
+    hint?: string,
+    // for video controls
+    interactive?: boolean
 }): React.ReactElement {
 
     if (!previewType) {
@@ -43,17 +46,13 @@ export function UrlComponentPreview({
                              size={size}/>;
     } else if (previewType === "audio") {
         return <audio controls
+                      className={"max-w-100%"}
                       src={url}>
             Your browser does not support the
             <code>audio</code> element.
         </audio>;
     } else if (previewType === "video") {
-        return <video
-            className={`max-w-${size === "small" ? "sm" : "md"}`}
-            controls
-        >
-            <source src={url}/>
-        </video>;
+        return <VideoPreview size={size} src={url} interactive={interactive}/>;
     } else {
         return (
             <a
@@ -66,7 +65,7 @@ export function UrlComponentPreview({
                     width: getThumbnailMeasure(size),
                     height: getThumbnailMeasure(size)
                 }}>
-                <DescriptionIcon className="flex-grow"/>
+                <DescriptionIcon className="text-gray-700 dark:text-gray-300"/>
                 {hint &&
                     <Tooltip title={hint}>
                         <Typography
@@ -77,3 +76,37 @@ export function UrlComponentPreview({
         );
     }
 }
+
+function VideoPreview({
+                          size,
+                          src,
+                          interactive
+                      }: { size: PreviewSize, src: string, interactive: boolean }) {
+
+    const imageSize = useMemo(() => {
+        if (size === "smallest")
+            return "140px";
+        else if (size === "small")
+            return "240px";
+        else if (size === "medium")
+            return "100%";
+        else throw new Error("Invalid size");
+    }, [size]);
+
+    const videoProps = {
+        controls: interactive
+    };
+    return <video
+        style={{
+            position: "relative",
+            objectFit: "cover",
+            width: imageSize,
+            minWidth: "140px",
+            // height: imageSize,
+            maxHeight: "100%"
+        }}
+        {...videoProps}
+        className={cls("max-w-100% rounded", { "pointer-events-none": !interactive })}>
+        <source src={src}/>
+    </video>;
+}

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -20,7 +20,6 @@ export function ArrayOfMapsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 
@@ -55,7 +54,7 @@ export function ArrayOfMapsPreview({
                     values.map((v, index) => {
                         return (
                             <div key={`table_${v}_${index}`}
-                                 className="border-b last:border-b-0">
+                                 className="border-b last:border-b-0 py-2">
                                 {mapProperties && mapProperties.map(
                                     (key) => (
                                         <div

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -18,7 +18,6 @@ export function ArrayOfReferencesPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 
@@ -29,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" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     return (
         <div className="flex flex-col w-full">
@@ -43,6 +42,8 @@ export function ArrayOfReferencesPreview({
                                 previewProperties={ofProperty.previewProperties}
                                 size={childSize}
                                 reference={reference}
+                                includeId={ofProperty.includeId}
+                                includeEntityLink={ofProperty.includeEntityLink}
                             />
                         </div>;
                     }

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -23,7 +23,6 @@ export function ArrayOfStorageComponentsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 
@@ -34,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" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     return (
         <div className={"flex flex-wrap gap-2"}>

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

@@ -21,7 +21,6 @@ export function ArrayOfStringsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -4,7 +4,7 @@ import { ResolvedProperty } from "../../types";
 import { useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
-import { cn, defaultBorderMixin } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
 import { ErrorBoundary } from "../../components";
 
@@ -23,7 +23,6 @@ export function ArrayOneOfPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 
@@ -38,7 +37,7 @@ export function ArrayOneOfPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     const typeField = property.oneOf.typeField ?? DEFAULT_ONE_OF_TYPE;
     const valueField = property.oneOf.valueField ?? DEFAULT_ONE_OF_VALUE;
@@ -50,7 +49,7 @@ export function ArrayOneOfPreview({
                 values.map((value, index) =>
                     <React.Fragment
                         key={"preview_array_" + value + "_" + index}>
-                        <div className={cn(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                        <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0 py-2")}>
                             <ErrorBoundary>
                                 {value && <PropertyPreview
                                     propertyKey={propertyKey}

package/src/preview/property_previews/ArrayPropertyPreview.tsx

@@ -5,7 +5,7 @@ import { ResolvedProperty } from "../../types";
 import { useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
-import { cn, defaultBorderMixin } from "@firecms/ui";
+import { cls, defaultBorderMixin } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 
 /**
@@ -23,7 +23,6 @@ export function ArrayPropertyPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 
@@ -38,7 +37,7 @@ export function ArrayPropertyPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "small" : "smallest";
 
     return (
         <div className="flex flex-col gap-2">
@@ -49,7 +48,7 @@ export function ArrayPropertyPreview({
                         return of
                             ? <React.Fragment
                                 key={"preview_array_" + index}>
-                                <div className={cn(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
+                                <div className={cls(defaultBorderMixin, "m-1 border-b last:border-b-0")}>
                                     <ErrorBoundary>
                                         <PropertyPreview
                                             propertyKey={propertyKey}

package/src/preview/property_previews/MapPropertyPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ResolvedMapProperty } from "../../types";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
-import { cn, defaultBorderMixin, Typography } from "@firecms/ui";
+import { cls, defaultBorderMixin, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 import { EmptyValue } from "../components/EmptyValue";
 
@@ -34,7 +34,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
 
     const mapPropertyKeys: string[] = Object.keys(mapProperty.properties)
 
-    if (size === "tiny")
+    if (size === "smallest")
         return (
             <div className="w-full flex flex-col space-y-1 md:space-y-2">
                 {mapPropertyKeys.map((key, index) => (
@@ -61,7 +61,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
                     return (
                         <div
                             key={`map_preview_table_${key}}`}
-                            className={cn(defaultBorderMixin, "last:border-b-0 border-b")}>
+                            className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
                             <div
                                 className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
                                 <div
@@ -87,7 +87,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
                             </div>
 
                             {(childProperty.dataType === "map" || childProperty === "array") &&
-                                <div className={cn(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
+                                <div className={cls(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
                                     <PropertyPreview
                                         propertyKey={key}
                                         value={(value)[key]}
@@ -113,7 +113,7 @@ export function KeyValuePreview({ value }: { value: any }) {
             Object.entries(value).map(([key, childValue]) => (
                 <div
                     key={`map_preview_table_${key}}`}
-                    className={cn(defaultBorderMixin, "last:border-b-0 border-b")}>
+                    className={cls(defaultBorderMixin, "last:border-b-0 border-b")}>
                     <div
                         className={"flex flex-row pt-0.5 pb-0.5 gap-2"}>
                         <div
@@ -135,7 +135,7 @@ export function KeyValuePreview({ value }: { value: any }) {
                         </div>
                     </div>
                     {typeof childValue === "object" &&
-                        <div className={cn(defaultBorderMixin, "border-l pl-4")}>
+                        <div className={cls(defaultBorderMixin, "border-l pl-4")}>
                             <KeyValuePreview value={childValue}/>
                         </div>
                     }

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -87,7 +87,7 @@ function renderMap<T extends Record<string, any>>(property: ResolvedMapProperty<
         mapPropertyKeys = (property.previewProperties || Object.keys(property.properties)) as string[];
         if (size === "small")
             mapPropertyKeys = mapPropertyKeys.slice(0, 3);
-        else if (size === "tiny")
+        else if (size === "smallest")
             mapPropertyKeys = mapPropertyKeys.slice(0, 1);
     }
 
@@ -226,7 +226,7 @@ function renderUrlAudioComponent() {
 
 export function renderSkeletonImageThumbnail(size: PreviewSize) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const imageSize = size === "tiny" ? 40 : size === "small" ? 100 : 200;
+    const imageSize = size === "smallest" ? 40 : size === "small" ? 100 : 200;
     return (
         <Skeleton width={imageSize}
                   height={imageSize}/>