@firecms/core 3.0.0-canary.20 → 3.0.0-canary.201

package/src/preview/components/BooleanPreview.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Checkbox, cn } from "@firecms/ui";
+import { Checkbox, cls } from "@firecms/ui";
 import { PreviewSize } from "../PropertyPreviewProps";
 import { Property } from "../../types";
 
@@ -21,6 +21,6 @@ export function BooleanPreview({
                   size={size}
                   color={"secondary"}/>
         {property.name && <span
-            className={cn("text-text-secondary dark:text-text-secondary-dark", size === "tiny" ? "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

@@ -1,12 +1,12 @@
 import React from "react";
+import { Chip } from "@firecms/ui";
 import { EnumValues } from "../../types";
 import { buildEnumLabel, enumToObjectEntries, getColorScheme, getLabelOrConfigFrom } from "../../util/enums";
-import { Chip } from "@firecms/ui";
 
 export interface EnumValuesChipProps {
     enumValues?: EnumValues;
     enumKey: string | number;
-    size: "tiny" | "small" | "medium";
+    size: "small" | "medium" | "large";
     className?: string;
     children?: React.ReactNode;
 }

package/src/preview/components/ImagePreview.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useMemo, useState } from "react";
+import React, { CSSProperties, useMemo } from "react";
 
 import { getThumbnailMeasure } from "../util";
 import { PreviewSize } from "../PropertyPreviewProps";
@@ -20,11 +20,9 @@ export function ImagePreview({
                                  url
                              }: ImagePreviewProps) {
 
-    const [onHover, setOnHover] = useState(false);
-
     const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
 
-    if (size === "tiny") {
+    if (size === "small") {
         return (
             <img src={url}
                  className={"rounded-md"}
@@ -47,60 +45,51 @@ export function ImagePreview({
 
     return (
         <div
-            className="relative flex items-center justify-center max-w-full max-h-full"
+            className="relative flex items-center justify-center max-w-full max-h-full group"
             style={{
                 width: imageSize,
                 height: imageSize
             }}
-            key={"image_preview_" + url}
-            onMouseEnter={() => setOnHover(true)}
-            onMouseMove={() => setOnHover(true)}
-            onMouseLeave={() => setOnHover(false)}>
+            key={"image_preview_" + url}>
 
             <img src={url}
                  className={"rounded-md"}
                  style={imageStyle}/>
 
-            {onHover && <>
-
-                {navigator && <Tooltip title="Copy url to clipboard">
-                    <div
-                        className="rounded-full absolute bottom-[-4px] right-8">
-                        <IconButton
-                            variant={"filled"}
-                            size={"small"}
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                return navigator.clipboard.writeText(url);
-                            }}>
-                            <ContentCopyIcon className={"text-gray-500"}
-                                             size={"small"}/>
-                        </IconButton>
-                    </div>
+            <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
+                {navigator && <Tooltip
+                    asChild={true}
+                    title="Copy url to clipboard" side={"bottom"}>
+                    <IconButton
+                        variant={"filled"}
+                        size={"small"}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            return navigator.clipboard.writeText(url);
+                        }}>
+                        <ContentCopyIcon className={"text-surface-700 dark:text-surface-300"}
+                                         size={"smallest"}/>
+                    </IconButton>
                 </Tooltip>}
 
-                <Tooltip title="Open image in new tab">
+                <Tooltip title="Open image in new tab" side={"bottom"}>
                     <IconButton
+                        className="invisible group-hover:visible"
                         variant={"filled"}
                         component={"a" as React.ElementType}
-                        style={{
-                            position: "absolute",
-                            bottom: -4,
-                            right: -4
-                        }}
                         href={url}
                         rel="noopener noreferrer"
                         target="_blank"
                         size={"small"}
                         onClick={(e: any) => e.stopPropagation()}
                     >
-                        <OpenInNewIcon className={"text-gray-500"}
-                                       size={"small"}/>
+                        <OpenInNewIcon className={"text-surface-700 dark:text-surface-300"}
+                                       size={"smallest"}/>
                     </IconButton>
                 </Tooltip>
-            </>
-            }
+            </div>
+
         </div>
     );
 }

package/src/preview/components/ReferencePreview.tsx

@@ -1,16 +1,10 @@
 import * as React from "react";
 
 import { Entity, EntityCollection, EntityReference } from "../../types";
-import {
-    useCustomizationController,
-    useEntityFetch,
-    useNavigationController,
-    useSideEntityController
-} from "../../hooks";
+import { useCustomizationController, useEntityFetch, useNavigationController } from "../../hooks";
 import { PreviewSize } from "../PropertyPreviewProps";
-import { IconButton, KeyboardTabIcon, Skeleton, Tooltip } 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 = {
@@ -20,13 +14,14 @@ export type ReferencePreviewProps = {
     previewProperties?: string[];
     onClick?: (e: React.SyntheticEvent) => void;
     hover?: boolean;
-    allowEntityNavigation?: 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 (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
         console.warn("Reference preview received value of type", typeof reference);
@@ -38,27 +33,18 @@ export const ReferencePreview = React.memo<ReferencePreviewProps>(function Refer
         </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.hover === nextProps.hover &&
-        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,
-                                                                     hover,
-                                                                     onClick,
-                                                                     allowEntityNavigation = true
-                                                                 }: ReferencePreviewProps) {
+function ReferencePreviewInternal({
+                                      disabled,
+                                      reference,
+                                      previewProperties,
+                                      size,
+                                      hover,
+                                      onClick,
+                                      includeEntityLink = true,
+                                      includeId = true
+                                  }: ReferencePreviewProps) {
 
     const customizationController = useCustomizationController();
 
@@ -79,7 +65,8 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
         previewProperties={previewProperties}
         size={size}
         disabled={disabled}
-        allowEntityNavigation={allowEntityNavigation}
+        includeEntityLink={includeEntityLink}
+        includeId={includeId}
         onClick={onClick}
         hover={hover}/>
 }
@@ -90,7 +77,8 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({
                                                                            previewProperties,
                                                                            size,
                                                                            disabled,
-                                                                           allowEntityNavigation,
+                                                                           includeEntityLink,
+                                                                           includeId,
                                                                            onClick,
                                                                            hover
                                                                        }: ReferencePreviewProps & {
@@ -158,7 +146,8 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({
                           entity={usedEntity}
                           collection={collection}
                           onClick={onClick}
-                          includeEntityNavigation={allowEntityNavigation}
+                          includeEntityLink={includeEntityLink}
+                          includeId={includeId}
                           hover={hover}/>;
 
 }

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,37 +46,66 @@ 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
-                href={url}
-                rel="noopener noreferrer"
-                target="_blank"
-                onClick={(e) => e.stopPropagation()}
-                className="flex flex-col items-center justify-center"
-                style={{
-                    width: getThumbnailMeasure(size),
-                    height: getThumbnailMeasure(size)
-                }}>
-                <DescriptionIcon className="flex-grow"/>
-                {hint &&
-                    <Tooltip title={hint}>
-                        <Typography
-                            className="max-w-full truncate rtl text-left"
-                            variant={"caption"}>{hint}</Typography>
-                    </Tooltip>}
-            </a>
+            <Tooltip title={hint}>
+                <a
+                    href={url}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    onClick={(e) => e.stopPropagation()}
+                    className="flex flex-col items-center justify-center"
+                    style={{
+                        width: getThumbnailMeasure(size),
+                        height: getThumbnailMeasure(size)
+                    }}>
+                    <DescriptionIcon className="text-surface-700 dark:text-surface-300"/>
+                    {hint && <Typography
+                        className="max-w-full truncate rtl text-left"
+                        variant={"caption"}>{hint}</Typography>}
+                </a>
+            </Tooltip>
         );
     }
 }
+
+function VideoPreview({
+                          size,
+                          src,
+                          interactive
+                      }: { size: PreviewSize, src: string, interactive: boolean }) {
+
+    const imageSize = useMemo(() => {
+        if (size === "small")
+            return "140px";
+        else if (size === "medium")
+            return "240px";
+        else if (size === "large")
+            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,8 +20,7 @@ export function ArrayOfMapsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property?.of)) {
@@ -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,8 +18,7 @@ export function ArrayOfReferencesPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property?.of)) {
@@ -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" ? "medium" : "small";
 
     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,8 +23,7 @@ export function ArrayOfStorageComponentsPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
     if (Array.isArray(property.of)) {
@@ -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" ? "medium" : "small";
 
     return (
         <div className={"flex flex-wrap gap-2"}>

package/src/preview/property_previews/ArrayOfStringsPreview.tsx

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

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,8 +23,7 @@ export function ArrayOneOfPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
     if (property?.dataType !== "array")
@@ -38,7 +37,7 @@ export function ArrayOneOfPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    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;
@@ -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,8 +23,7 @@ export function ArrayPropertyPreview({
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        propertyValue: value,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
     if (!property.of) {
@@ -38,7 +37,7 @@ export function ArrayPropertyPreview({
 
     if (!values) return null;
 
-    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+    const childSize: PreviewSize = size === "medium" ? "medium" : "small";
 
     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 === "small")
         return (
             <div className="w-full flex flex-col space-y-1 md:space-y-2">
                 {mapPropertyKeys.map((key, index) => (
@@ -58,10 +58,11 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
             {mapPropertyKeys &&
                 mapPropertyKeys.map((key, index) => {
                     const childProperty = mapProperty.properties![key];
+                    const isArrayOrMap = childProperty.dataType === "map" || childProperty === "array";
                     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
@@ -75,7 +76,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
                                 <div
                                     className="flex-grow max-w-[75%]">
                                     <ErrorBoundary>
-                                        {!(childProperty.dataType === "map" || childProperty === "array") &&
+                                        {!isArrayOrMap &&
                                             <PropertyPreview
                                                 propertyKey={key}
                                                 value={(value)[key]}
@@ -86,8 +87,8 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
                                 </div>
                             </div>
 
-                            {(childProperty.dataType === "map" || childProperty === "array") &&
-                                <div className={cn(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
+                            {isArrayOrMap &&
+                                <div className={cls(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
                                     <PropertyPreview
                                         propertyKey={key}
                                         value={(value)[key]}
@@ -110,10 +111,10 @@ 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={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
@@ -127,15 +128,15 @@ 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>
                     </div>
                     {typeof childValue === "object" &&
-                        <div className={cn(defaultBorderMixin, "border-l pl-4")}>
+                        <div className={cls(defaultBorderMixin, "border-l pl-4")}>
                             <KeyValuePreview value={childValue}/>
                         </div>
                     }