@firecms/core 3.0.0-canary.104 → 3.0.0-canary.106

package/dist/index.umd.js

@@ -4519,7 +4519,7 @@
   const SMALL_THUMBNAIL = 100;
   const REGULAR_THUMBNAIL = 200;
   function getThumbnailMeasure(size) {
-    if (size === "tiny")
+    if (size === "smallest")
       return TINY_THUMBNAIL;
     else if (size === "small")
       return SMALL_THUMBNAIL;
@@ -4531,7 +4531,7 @@
     switch (size) {
       case "xs":
       case "s":
-        return "tiny";
+        return "smallest";
       case "m":
         return "small";
       case "l":
@@ -4546,7 +4546,7 @@
     url
   }) {
     const imageSize = React.useMemo(() => getThumbnailMeasure(size), [size]);
-    if (size === "tiny") {
+    if (size === "smallest") {
       return /* @__PURE__ */ jsxRuntime.jsx(
         "img",
         {
@@ -4714,7 +4714,7 @@
     interactive
   }) {
     const imageSize = React.useMemo(() => {
-      if (size === "tiny")
+      if (size === "smallest")
         return "140px";
       else if (size === "small")
         return "240px";
@@ -4806,7 +4806,7 @@
       mapPropertyKeys = property.previewProperties || Object.keys(property.properties);
       if (size === "small")
         mapPropertyKeys = mapPropertyKeys.slice(0, 3);
-      else if (size === "tiny")
+      else if (size === "smallest")
         mapPropertyKeys = mapPropertyKeys.slice(0, 1);
     }
     if (size !== "medium")
@@ -4911,7 +4911,7 @@
     );
   }
   function renderSkeletonImageThumbnail(size) {
-    const imageSize = size === "tiny" ? 40 : size === "small" ? 100 : 200;
+    const imageSize = size === "smallest" ? 40 : size === "small" ? 100 : 200;
     return /* @__PURE__ */ jsxRuntime.jsx(
       ui.Skeleton,
       {
@@ -5076,10 +5076,10 @@
     } else {
       if (!value) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
       const lines = value.split("\n");
-      return value && value.includes("\n") ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("overflow-x-scroll", size === "tiny" ? "text-sm" : ""), children: lines.map((str, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+      return value && value.includes("\n") ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("overflow-x-scroll", size === "smallest" ? "text-sm" : ""), children: lines.map((str, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: str }),
         index !== lines.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("br", {})
-      ] }, `string_preview_${index}`)) }) : size === "tiny" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value });
+      ] }, `string_preview_${index}`)) }) : size === "smallest" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value });
     }
   }
   function ArrayPropertyPreview({
@@ -5102,7 +5102,7 @@
       throw Error("Picked wrong preview component ArrayPreview");
     const values = value;
     if (!values) return null;
-    const childSize = size === "medium" ? "small" : "tiny";
+    const childSize = size === "medium" ? "small" : "smallest";
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: values && values.map(
       (value2, index) => {
         const of = property.resolvedProperties[index] ?? (property.resolvedProperties[index] ?? (Array.isArray(property.of) ? property.of[index] : property.of));
@@ -5165,17 +5165,17 @@
         hover: disabled ? void 0 : hover,
         size,
         children: [
-          imageProperty && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start"), children: /* @__PURE__ */ jsxRuntime.jsx(
+          imageProperty && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "smallest" ? "my-0.5" : "m-2 self-start"), children: /* @__PURE__ */ jsxRuntime.jsx(
             PropertyPreview,
             {
               property: imageProperty,
               propertyKey: imagePropertyKey,
-              size: "tiny",
+              size: "smallest",
               value: getValueInPath(entity.values, imagePropertyKey)
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-grow w-full m-1", children: [
-            size !== "tiny" && includeId && (entity ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${size !== "medium" ? "block whitespace-nowrap overflow-hidden truncate" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+            size !== "smallest" && includeId && (entity ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${size !== "medium" ? "block whitespace-nowrap overflow-hidden truncate" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
               ui.Typography,
               {
                 variant: "caption",
@@ -5212,13 +5212,13 @@
                       propertyKey: key,
                       value: getValueInPath(entity.values, key),
                       property: childProperty,
-                      size: "tiny"
+                      size: "smallest"
                     }
                   ) : /* @__PURE__ */ jsxRuntime.jsx(
                     SkeletonPropertyComponent,
                     {
                       property: childProperty,
-                      size: "tiny"
+                      size: "smallest"
                     }
                   )
                 },
@@ -5230,7 +5230,7 @@
             ui.Tooltip,
             {
               title: `See details for ${entity.id}`,
-              className: size !== "tiny" ? "self-start" : "",
+              className: size !== "smallest" ? "self-start" : "",
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 ui.IconButton,
                 {
@@ -5284,7 +5284,7 @@
           fullwidth ? "w-full" : "",
           "items-center",
           hover ? "hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800" : "",
-          size === "tiny" ? "p-1" : "p-2",
+          size === "smallest" ? "p-1" : "p-2",
           "flex border rounded-lg",
           onClick ? "cursor-pointer" : "",
           ui.defaultBorderMixin,
@@ -5465,7 +5465,7 @@
     }
     if (property?.dataType !== "array" || !property.of || property.of.dataType !== "reference")
       throw Error("Picked wrong preview component ArrayOfReferencesPreview");
-    const childSize = size === "medium" ? "small" : "tiny";
+    const childSize = size === "medium" ? "small" : "smallest";
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col w-full", children: value && value.map(
       (reference, index) => {
         const ofProperty = property.of;
@@ -5508,7 +5508,7 @@
     }
     if (property.dataType !== "array" || !property.of || property.of.dataType !== "string")
       throw Error("Picked wrong preview component ArrayOfStorageComponentsPreview");
-    const childSize = size === "medium" ? "small" : "tiny";
+    const childSize = size === "medium" ? "small" : "smallest";
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: value && value.map(
       (v, index) => /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(
         PropertyPreview,
@@ -5622,7 +5622,7 @@
     }
     const values = value;
     if (!values) return null;
-    const childSize = size === "medium" ? "small" : "tiny";
+    const childSize = size === "medium" ? "small" : "smallest";
     const typeField = property.oneOf.typeField ?? DEFAULT_ONE_OF_TYPE;
     const valueField = property.oneOf.valueField ?? DEFAULT_ONE_OF_VALUE;
     const properties = property.oneOf.properties;
@@ -5660,7 +5660,7 @@
     }
     if (!value) return null;
     const mapPropertyKeys = Object.keys(mapProperty.properties);
-    if (size === "tiny")
+    if (size === "smallest")
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex flex-col space-y-1 md:space-y-2", children: mapPropertyKeys.map((key, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
         ErrorBoundary,
         {
@@ -5820,7 +5820,7 @@
       property.name && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: ui.cls("text-text-secondary dark:text-text-secondary-dark", size === "tiny" ? "text-sm" : ""),
+          className: ui.cls("text-text-secondary dark:text-text-secondary-dark", size === "smallest" ? "text-sm" : ""),
           children: property.name
         }
       )
@@ -7217,7 +7217,7 @@
                   ReferencePreview,
                   {
                     onClick: disabled ? void 0 : handleOpen,
-                    size: "tiny",
+                    size: "smallest",
                     reference,
                     hover: !disabled,
                     disabled: !path,
@@ -7239,12 +7239,14 @@
         internalValue && !multiselect && buildSingleReferenceField(),
         internalValue && multiselect && buildMultipleReferenceField(),
         valueNotSet && /* @__PURE__ */ jsxRuntime.jsxs(
-          ui.Button,
+          EntityPreviewContainer,
           {
+            className: ui.cls(
+              "p-4 text-sm font-medium flex items-center gap-4 uppercase",
+              disabled ? "text-slate-500" : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800"
+            ),
             onClick: handleOpen,
-            size: "small",
-            variant: "outlined",
-            color: "primary",
+            size: "medium",
             children: [
               "Edit ",
               title
@@ -11003,13 +11005,10 @@
       textSearchInitialised,
       onTextSearchClick,
       textSearchEnabled
-    } = (
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      useTableSearchHelper({
-        collection,
-        fullPath
-      })
-    );
+    } = useTableSearchHelper({
+      collection,
+      fullPath
+    });
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow", children: entitiesDisplayedFirst && /* @__PURE__ */ jsxRuntime.jsx(
         EntityCollectionTable,
@@ -12450,7 +12449,7 @@
                 ReferencePreview,
                 {
                   reference,
-                  size: "tiny"
+                  size: "smallest"
                 },
                 reference.path + "/" + reference.id
               );
@@ -13771,7 +13770,8 @@
     autoFocus,
     touched,
     property,
-    includeDescription
+    includeDescription,
+    size = "medium"
   }) {
     const enumValues = property.enumValues;
     useClearRestoreValue({
@@ -13788,6 +13788,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         ui.Select,
         {
+          size: size === "medium" ? "medium" : "small",
           value: value !== void 0 && value != null ? value.toString() : "",
           disabled,
           position: "item-aligned",
@@ -13818,7 +13819,7 @@
               {
                 enumKey,
                 enumValues,
-                size: "medium"
+                size
               }
             );
           },
@@ -13832,7 +13833,7 @@
                   {
                     enumKey: String(option.id),
                     enumValues,
-                    size: "medium"
+                    size
                   }
                 )
               },
@@ -13862,6 +13863,7 @@
     disabled,
     property,
     includeDescription,
+    size = "medium",
     autoFocus
   }) {
     const of = property.of;
@@ -13920,6 +13922,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         ui.MultiSelect,
         {
+          size: size === "medium" ? "medium" : "small",
           value: validValue ? value.map((v) => v.toString()) : [],
           disabled,
           label: /* @__PURE__ */ jsxRuntime.jsx(
@@ -14529,7 +14532,8 @@
     disabled,
     autoFocus,
     property,
-    includeDescription
+    includeDescription,
+    size = "medium"
   }) {
     let multiline;
     let url;
@@ -14567,6 +14571,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         ui.TextField,
         {
+          size,
           value,
           onChange,
           autoFocus,
@@ -14612,7 +14617,7 @@
             {
               value,
               property,
-              size: "medium"
+              size
             }
           )
         }
@@ -14627,7 +14632,7 @@
     showError,
     autoFocus,
     disabled,
-    touched,
+    size = "medium",
     property,
     includeDescription
   }, ref) {
@@ -14653,7 +14658,7 @@
           ),
           disabled,
           autoFocus,
-          size: "large"
+          size
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -14787,7 +14792,7 @@
     autoFocus,
     property,
     includeDescription,
-    context
+    size = "medium"
   }) {
     if (!property.path) {
       throw new Error("Property path is required for ReferenceFieldBinding");
@@ -14845,7 +14850,7 @@
             disabled: !property.path,
             previewProperties: property.previewProperties,
             hover: !disabled,
-            size: "medium",
+            size,
             onClick: disabled || isSubmitting ? void 0 : onEntryClick,
             reference: value,
             includeEntityLink: property.includeEntityLink,
@@ -14853,15 +14858,17 @@
           }
         ),
         !value && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "justify-center text-left", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          ui.Button,
+          EntityPreviewContainer,
           {
-            variant: "outlined",
-            color: "primary",
-            disabled: disabled || isSubmitting,
+            className: ui.cls(
+              "px-6 h-16 text-sm font-medium flex items-center gap-6",
+              disabled || isSubmitting ? "text-slate-500" : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800"
+            ),
             onClick: onEntryClick,
+            size: "medium",
             children: [
-              "Edit ",
-              property.name
+              /* @__PURE__ */ jsxRuntime.jsx(EmptyValue, {}),
+              `Edit ${property.name}`.toUpperCase()
             ]
           }
         ) })
@@ -14885,6 +14892,9 @@
     if (a.index !== b.index) {
       return false;
     }
+    if (a.size !== b.size) {
+      return false;
+    }
     const aIsBuilder = isPropertyBuilder(a.property) || a.property.fromBuilder;
     const bIsBuilder = isPropertyBuilder(b.property) || b.property.fromBuilder;
     const baseCheck = (aIsBuilder === bIsBuilder || equal(a.property, b.property)) && a.disabled === b.disabled;
@@ -14906,7 +14916,8 @@
     partOfArray,
     minimalistView,
     autoFocus,
-    index
+    index,
+    size
   }) {
     const customizationController = useCustomizationController();
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -14968,7 +14979,8 @@
             disabled,
             partOfArray,
             minimalistView,
-            autoFocus
+            autoFocus,
+            size
           };
           return /* @__PURE__ */ jsxRuntime.jsx(
             FieldInternal,
@@ -14994,7 +15006,8 @@
       minimalistView,
       autoFocus,
       context,
-      disabled
+      disabled,
+      size
     },
     fieldProps
   }) {
@@ -15025,7 +15038,6 @@
     const cmsFieldProps = {
       propertyKey,
       value,
-      // initialValue,
       setValue,
       setFieldValue,
       error,
@@ -15040,7 +15052,8 @@
       minimalistView: minimalistView ?? false,
       autoFocus: autoFocus ?? false,
       customProps: customFieldProps,
-      context
+      context,
+      size
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(ErrorBoundary, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(UsedComponent, { ...cmsFieldProps }),