@firecms/core 3.0.0-canary.99 → 3.0.0-rc.2

package/src/preview/PropertyPreview.tsx

@@ -13,7 +13,7 @@ import {
 import { resolveProperty } from "../util";
 
 import { PropertyPreviewProps } from "./PropertyPreviewProps";
-import { useCustomizationController } from "../hooks";
+import { useAuthController, useCustomizationController } from "../hooks";
 import { EmptyValue } from "./components/EmptyValue";
 import { UrlComponentPreview } from "./components/UrlComponentPreview";
 import { StorageThumbnail } from "./components/StorageThumbnail";
@@ -31,12 +31,14 @@ import { DatePreview } from "./components/DatePreview";
 import { BooleanPreview } from "./components/BooleanPreview";
 import { NumberPropertyPreview } from "./property_previews/NumberPropertyPreview";
 import { ErrorView } from "../components";
+import { UserPreview } from "./components/UserPreview";
 
 /**
  * @group Preview components
  */
 export const PropertyPreview = React.memo(function PropertyPreview<T extends CMSType>(props: PropertyPreviewProps<T>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
 
     let content: React.ReactNode | any;
@@ -53,10 +55,11 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
     const property = resolveProperty({
         propertyKey,
         propertyOrBuilder: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
-    if (value === undefined || property === null) {
+    if (property === null) {
         content = <EmptyValue/>;
     } else if (property.Preview) {
         content = createElement(property.Preview as React.ComponentType<PropertyPreviewProps>,
@@ -70,12 +73,19 @@ 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;
         if (typeof value === "string") {
-            if (stringProperty.url) {
+            if (stringProperty.storage) {
+                const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
+                content = <StorageThumbnail
+                    interactive={interactive}
+                    storeUrl={property.storage?.storeUrl ?? false}
+                    size={props.size}
+                    storagePathOrDownloadUrl={filePath}/>;
+            } else if (stringProperty.url) {
                 if (typeof stringProperty.url === "boolean")
                     content =
                         <UrlComponentPreview size={props.size}
@@ -86,15 +96,29 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                                              url={value}
                                              interactive={interactive}
                                              previewType={stringProperty.url}/>;
-            } else if (stringProperty.storage) {
-                const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
-                content = <StorageThumbnail
-                    interactive={interactive}
-                    storeUrl={property.storage?.storeUrl ?? false}
-                    size={props.size}
-                    storagePathOrDownloadUrl={filePath}/>;
             } else if (stringProperty.markdown) {
                 content = <Markdown source={value} size={"small"}/>;
+            } else if (stringProperty.userSelect) {
+                content = <UserPreview
+                    value={value}
+                    property={stringProperty}
+                    propertyKey={propertyKey}
+                    size={props.size}
+                />;
+            } else if (stringProperty.reference) {
+                if (typeof stringProperty.reference.path === "string") {
+                    content = <ReferencePreview
+                        disabled={!stringProperty.reference.path}
+                        previewProperties={stringProperty.reference.previewProperties}
+                        includeId={stringProperty.reference.includeId}
+                        includeEntityLink={stringProperty.reference.includeEntityLink}
+                        size={props.size}
+                        reference={new EntityReference(value, stringProperty.reference.path)}
+                    />;
+                } else {
+                    content = <EmptyValue/>;
+                }
+
             } else {
                 content = <StringPropertyPreview {...props}
                                                  property={stringProperty}

package/src/preview/PropertyPreviewProps.tsx

@@ -3,7 +3,7 @@ import { CMSType, Property, ResolvedProperty } from "../types";
 /**
  * @group Preview components
  */
-export type PreviewSize = "medium" | "small" | "tiny";
+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 === "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

@@ -6,7 +6,7 @@ import { buildEnumLabel, enumToObjectEntries, getColorScheme, getLabelOrConfigFr
 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

@@ -22,7 +22,7 @@ export function ImagePreview({
 
     const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
 
-    if (size === "tiny") {
+    if (size === "small") {
         return (
             <img src={url}
                  className={"rounded-md"}
@@ -56,19 +56,20 @@ 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 title="Copy url to clipboard" side={"bottom"}>
+                {navigator && <Tooltip
+                    asChild={true}
+                    title="Copy url to clipboard" side={"bottom"}>
                     <IconButton
                         variant={"filled"}
-                        size={"small"}
+                        size={"smallest"}
                         onClick={(e) => {
                             e.stopPropagation();
                             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>}
 
@@ -80,11 +81,11 @@ export function ImagePreview({
                         href={url}
                         rel="noopener noreferrer"
                         target="_blank"
-                        size={"small"}
+                        size={"smallest"}
                         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/ReferencePreview.tsx

@@ -4,13 +4,13 @@ import { Entity, EntityCollection, EntityReference } from "../../types";
 import { useCustomizationController, useEntityFetch, useNavigationController } from "../../hooks";
 import { PreviewSize } from "../PropertyPreviewProps";
 import { Skeleton } from "@firecms/ui";
-import { ErrorView } from "../../components";
+import { ErrorBoundary, ErrorView } from "../../components";
 import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
     reference: EntityReference,
-    size: PreviewSize;
+    size?: PreviewSize;
     previewProperties?: string[];
     onClick?: (e: React.SyntheticEvent) => void;
     hover?: boolean;
@@ -21,30 +21,21 @@ export type ReferencePreviewProps = {
 /**
  * @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);
         return <EntityPreviewContainer
             onClick={props.onClick}
-            size={props.size}>
+            size={props.size ?? "medium"}>
             <ErrorView error={"Unexpected value. Click to edit"}
                        tooltip={JSON.stringify(reference)}/>
         </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.includeEntityLink === nextProps.includeEntityLink &&
-        prevProps.onClick === nextProps.onClick
-        ;
-}
+    return <ErrorBoundary>
+        <ReferencePreviewInternal {...props} />
+    </ErrorBoundary>;
+};
 
 function ReferencePreviewInternal({
                                       disabled,
@@ -151,8 +142,9 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({
             </EntityPreviewContainer>
         );
     }
+
     return <EntityPreview size={size}
-                          previewProperties={previewProperties}
+                          previewKeys={previewProperties}
                           disabled={disabled}
                           entity={usedEntity}
                           collection={collection}

package/src/preview/components/UrlComponentPreview.tsx

@@ -55,24 +55,23 @@ export function UrlComponentPreview({
         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="text-gray-700 dark:text-gray-300"/>
-                {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>
         );
     }
 }
@@ -84,11 +83,11 @@ function VideoPreview({
                       }: { size: PreviewSize, src: string, interactive: boolean }) {
 
     const imageSize = useMemo(() => {
-        if (size === "tiny")
+        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/components/UserPreview.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+import { useInternalUserManagementController } from "../../hooks";
+import { UserDisplay } from "../../components/UserDisplay";
+import { EmptyValue } from "./EmptyValue";
+import { Typography } from "@firecms/ui";
+
+/**
+ * Preview component for displaying user information.
+ * This is a simple wrapper around UserDisplay.
+ *
+ * @group Preview components
+ */
+export function UserPreview({ value }: PropertyPreviewProps<string>) {
+    const { getUser } = useInternalUserManagementController();
+
+    if (!value) {
+        return <EmptyValue/>;
+    }
+
+    const user = getUser(value);
+    if (!user) {
+        return <Typography variant={"caption"} color={"secondary"}>User not found: {value}</Typography>;
+    }
+
+    return <UserDisplay user={user}/>;
+}

package/src/preview/index.ts

@@ -25,3 +25,4 @@ export * from "./components/EnumValuesChip";
 export * from "./components/EmptyValue";
 export * from "./components/ImagePreview";
 export * from "./components/ReferencePreview";
+export * from "./components/UserPreview";

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ErrorBoundary } from "../../components";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { resolveArrayProperty } from "../../util";
@@ -15,12 +15,13 @@ export function ArrayOfMapsPreview({
                                        size,
                                        // entity
                                    }: PropertyPreviewProps<Record<string, any>[]>) {
-
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property?.of)) {
@@ -36,7 +37,7 @@ export function ArrayOfMapsPreview({
         throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
     }
     const values = value;
-    const previewProperties: string[] | undefined = mapProperty.previewProperties;
+    const previewProperties: string[] | undefined = mapProperty.previewKeys;
 
     if (!values) return null;
 
@@ -54,7 +55,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

@@ -1,6 +1,6 @@
 import { ResolvedReferenceProperty } from "../../types";
 import { resolveArrayProperty } from "../../util";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { ReferencePreview } from "../components/ReferencePreview";
 
@@ -13,12 +13,13 @@ export function ArrayOfReferencesPreview({
                                              property: inputProperty,
                                              size
                                          }: PropertyPreviewProps<any[]>) {
-
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property?.of)) {
@@ -28,7 +29,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">

package/src/preview/property_previews/ArrayOfStorageComponentsPreview.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
 
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { ErrorBoundary } from "../../components";
@@ -19,11 +19,13 @@ export function ArrayOfStorageComponentsPreview({
                                                     size
                                                 }: PropertyPreviewProps<any[]>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property.of)) {
@@ -33,7 +35,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

@@ -3,7 +3,7 @@ import { ResolvedStringProperty } from "../../types";
 
 import { resolveArrayProperty } from "../../util";
 import { PropertyPreviewProps, StringPropertyPreview } from "../../preview";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { ErrorBoundary } from "../../components";
 
 /**
@@ -16,12 +16,13 @@ export function ArrayOfStringsPreview({
                                           // entity,
                                           size
                                       }: PropertyPreviewProps<string[]>) {
-
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (Array.isArray(property.of)) {

package/src/preview/property_previews/ArrayOneOfPreview.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { cls, defaultBorderMixin } from "@firecms/ui";
@@ -19,11 +19,13 @@ export function ArrayOneOfPreview({
                                       // entity
                                   }: PropertyPreviewProps<any[]>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (property?.dataType !== "array")
@@ -37,7 +39,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;
@@ -49,7 +51,7 @@ export function ArrayOneOfPreview({
                 values.map((value, index) =>
                     <React.Fragment
                         key={"preview_array_" + value + "_" + index}>
-                        <div className={cls(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

@@ -2,7 +2,7 @@ import React from "react";
 
 import { resolveArrayProperty } from "../../util";
 import { ResolvedProperty } from "../../types";
-import { useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController } from "../../hooks";
 import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
 import { PropertyPreview } from "../PropertyPreview";
 import { cls, defaultBorderMixin } from "@firecms/ui";
@@ -19,11 +19,13 @@ export function ArrayPropertyPreview({
                                          size
                                      }: PropertyPreviewProps<any[]>) {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
     const property = resolveArrayProperty({
         propertyKey,
         property: inputProperty,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     });
 
     if (!property.of) {
@@ -37,10 +39,10 @@ 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">
+        <div className="w-full flex flex-col gap-2">
             {values &&
                 values.map((value, index) => {
                         const of: ResolvedProperty = property.resolvedProperties[index] ??

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 === "tiny")
+    if (size === "small")
         return (
             <div className="w-full flex flex-col space-y-1 md:space-y-2">
                 {mapPropertyKeys.map((key, index) => (
@@ -58,6 +58,7 @@ 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}}`}
@@ -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,7 +87,7 @@ export function MapPropertyPreview<T extends Record<string, any> = Record<string
                                 </div>
                             </div>
 
-                            {(childProperty.dataType === "map" || childProperty === "array") &&
+                            {isArrayOrMap &&
                                 <div className={cls(defaultBorderMixin, "border-l pl-4 ml-2 my-2")}>
                                     <PropertyPreview
                                         propertyKey={key}
@@ -110,7 +111,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 +128,9 @@ export function KeyValuePreview({ value }: { value: any }) {
                         </div>
                         <div
                             className="flex-grow max-w-[75%]">
-                            {typeof childValue !== "object" && <Typography>
+                            {childValue && typeof childValue !== "object" && <Typography>
                                 <ErrorBoundary>
-                                    {childValue && childValue.toString()}
+                                    {childValue.toString()}
                                 </ErrorBoundary>
                             </Typography>}
                         </div>