@firecms/core 3.0.0-canary.151 → 3.0.0-canary.153

package/dist/index.umd.js

@@ -4263,6 +4263,7 @@
       ui.Select,
       {
         inputRef: ref,
+        size: "large",
         className: "w-full h-full p-0 bg-transparent",
         position: "item-aligned",
         disabled,
@@ -4386,7 +4387,7 @@
       {
         value: internalValue ?? void 0,
         onChange: (dateValue) => updateValue(dateValue ?? null),
-        size: "medium",
+        size: "large",
         invisible: true,
         inputClassName: ui.cls("w-full h-full", ui.focusedDisabled),
         className: ui.cls("w-full h-full", ui.focusedDisabled),
@@ -4420,28 +4421,28 @@
       return this.props.children;
     }
   }
-  const TINY_THUMBNAIL = 40;
-  const SMALL_THUMBNAIL = 100;
-  const REGULAR_THUMBNAIL = 200;
+  const SMALL_THUMBNAIL = 40;
+  const MEDIUM_THUMBNAIL = 100;
+  const LARGE_THUMBNAIL = 200;
   function getThumbnailMeasure(size) {
-    if (size === "smallest")
-      return TINY_THUMBNAIL;
-    else if (size === "small")
+    if (size === "small")
       return SMALL_THUMBNAIL;
     else if (size === "medium")
-      return REGULAR_THUMBNAIL;
+      return MEDIUM_THUMBNAIL;
+    else if (size === "large")
+      return LARGE_THUMBNAIL;
     else throw Error("Thumbnail size not mapped");
   }
   function getPreviewSizeFrom(size) {
     switch (size) {
       case "xs":
       case "s":
-        return "smallest";
-      case "m":
         return "small";
+      case "m":
+        return "medium";
       case "l":
       case "xl":
-        return "medium";
+        return "large";
       default:
         throw Error("Missing mapping value in getPreviewSizeFrom: " + size);
     }
@@ -5045,7 +5046,7 @@
       propertyConfigs: customizationController.propertyConfigs
     }), [collection]);
     const listProperties = React.useMemo(
-      () => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
+      () => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "medium" || size === "large" ? 3 : 1),
       [previewProperties, resolvedCollection, size]
     );
     const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);
@@ -5059,13 +5060,13 @@
         hover: disabled ? void 0 : hover,
         size,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "smallest" ? "my-0.5" : "m-2 self-start"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "small" ? "my-0.5" : "m-2 self-start"), children: [
             imageProperty && /* @__PURE__ */ jsxRuntime.jsx(
               PropertyPreview,
               {
                 property: imageProperty,
                 propertyKey: imagePropertyKey,
-                size: "smallest",
+                size: "small",
                 value: getValueInPath(entity.values, imagePropertyKey)
               }
             ),
@@ -5079,8 +5080,10 @@
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col grow-1 w-full max-w-full m-1", children: [
-            size !== "smallest" && includeId && (entity ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${size !== "medium" ? "block whitespace-nowrap overflow-hidden truncate" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col grow-1 w-full m-1 shrink-1", style: {
+            "maxWidth": "calc(100% - 96px)"
+          }, children: [
+            size !== "small" && includeId && (entity ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "block whitespace-nowrap overflow-hidden truncate", children: /* @__PURE__ */ jsxRuntime.jsx(
               ui.Typography,
               {
                 variant: "caption",
@@ -5089,19 +5092,19 @@
                 children: entity.id
               }
             ) }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, {})),
-            titleProperty && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-0.5 text-sm font-medium", children: entity ? /* @__PURE__ */ jsxRuntime.jsx(
+            titleProperty && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-0.5 text-sm font-large", children: entity ? /* @__PURE__ */ jsxRuntime.jsx(
               PropertyPreview,
               {
                 propertyKey: titleProperty,
                 value: getValueInPath(entity.values, titleProperty),
                 property: resolvedCollection.properties[titleProperty],
-                size: "medium"
+                size: "large"
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx(
               SkeletonPropertyComponent,
               {
                 property: resolvedCollection.properties[titleProperty],
-                size: "medium"
+                size: "large"
               }
             ) }),
             restProperties && restProperties.map((key) => {
@@ -5117,13 +5120,13 @@
                       propertyKey: key,
                       value: getValueInPath(entity.values, key),
                       property: childProperty,
-                      size: "smallest"
+                      size: "small"
                     }
                   ) : /* @__PURE__ */ jsxRuntime.jsx(
                     SkeletonPropertyComponent,
                     {
                       property: childProperty,
-                      size: "smallest"
+                      size: "small"
                     }
                   )
                 },
@@ -5131,12 +5134,12 @@
               );
             })
           ] }),
-          entity && includeEntityLink && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: `See details for ${entity.id}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          entity && includeEntityLink && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: `See details for ${entity.id}`, className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
             ui.IconButton,
             {
               color: "inherit",
-              size: "small",
-              className: size !== "smallest" ? "self-start" : "",
+              size: "medium",
+              className: size !== "small" ? "self-start" : "",
               onClick: (e) => {
                 e.stopPropagation();
                 analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
@@ -5150,7 +5153,7 @@
                   updateUrl: true
                 });
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, { size: "small" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, { size: "medium" })
             }
           ) }),
           actions
@@ -5183,7 +5186,7 @@
           fullwidth ? "w-full" : "",
           "items-center",
           hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "",
-          size === "smallest" ? "p-1" : "px-2 py-1",
+          size === "small" ? "p-1" : "px-2 py-1",
           "flex border rounded-lg",
           onClick ? "cursor-pointer" : "",
           ui.defaultBorderMixin,
@@ -5291,7 +5294,7 @@
                   ReferencePreview,
                   {
                     onClick: disabled ? void 0 : handleOpen,
-                    size: "smallest",
+                    size: "small",
                     reference,
                     hover: !disabled,
                     disabled: !path,
@@ -6458,7 +6461,7 @@
       {
         value: size,
         className: "w-16 h-10",
-        size: "small",
+        size: "medium",
         onValueChange: (v) => onSizeChanged(v),
         renderValue: (v) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: v.toUpperCase() }),
         children: ["xs", "s", "m", "l", "xl"].map((size2) => /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: size2, className: "w-12 font-medium text-center", children: size2.toUpperCase() }, size2))
@@ -7573,6 +7576,7 @@
         ui.Select,
         {
           value: operation,
+          size: "large",
           onValueChange: (value2) => {
             updateFilter(value2, internalValue);
           },
@@ -7891,6 +7895,7 @@
         ui.Select,
         {
           value: operation,
+          size: "large",
           onValueChange: (value2) => {
             updateFilter(value2, internalValue);
           },
@@ -7903,7 +7908,7 @@
           ui.DateTimeField,
           {
             mode,
-            size: "medium",
+            size: "large",
             locale,
             value: internalValue ?? void 0,
             onChange: (dateValue) => {
@@ -10044,6 +10049,7 @@
       enumValues && /* @__PURE__ */ jsxRuntime.jsx(
         ui.Select,
         {
+          size: "large",
           error,
           onValueChange: (v) => onChange(v),
           ...fieldProps,
@@ -11648,7 +11654,7 @@
                 ReferencePreview,
                 {
                   reference,
-                  size: "smallest"
+                  size: "small"
                 },
                 reference.path + "/" + reference.id
               );
@@ -13597,7 +13603,7 @@
     url
   }) {
     const imageSize = React.useMemo(() => getThumbnailMeasure(size), [size]);
-    if (size === "smallest") {
+    if (size === "small") {
       return /* @__PURE__ */ jsxRuntime.jsx(
         "img",
         {
@@ -13773,11 +13779,11 @@
     interactive
   }) {
     const imageSize = React.useMemo(() => {
-      if (size === "smallest")
+      if (size === "small")
         return "140px";
-      else if (size === "small")
-        return "240px";
       else if (size === "medium")
+        return "240px";
+      else if (size === "large")
         return "100%";
       else throw new Error("Invalid size");
     }, [size]);
@@ -13859,16 +13865,16 @@
     if (!property.properties)
       return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
     let mapPropertyKeys;
-    if (size === "medium") {
+    if (size === "large") {
       mapPropertyKeys = Object.keys(property.properties);
     } else {
       mapPropertyKeys = property.previewProperties || Object.keys(property.properties);
-      if (size === "small")
+      if (size === "medium")
         mapPropertyKeys = mapPropertyKeys.slice(0, 3);
-      else if (size === "smallest")
+      else if (size === "small")
         mapPropertyKeys = mapPropertyKeys.slice(0, 1);
     }
-    if (size !== "medium")
+    if (size !== "large")
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -13877,7 +13883,7 @@
             SkeletonPropertyComponent,
             {
               property: property.properties[key],
-              size: "small"
+              size: "medium"
             }
           ) }, `map_${key}`))
         }
@@ -13905,7 +13911,7 @@
                   SkeletonPropertyComponent,
                   {
                     property: property.properties[key],
-                    size: "small"
+                    size: "medium"
                   }
                 )
               },
@@ -13933,7 +13939,7 @@
               SkeletonPropertyComponent,
               {
                 property: properties[key],
-                size: "small"
+                size: "medium"
               }
             )
           },
@@ -13960,7 +13966,7 @@
             SkeletonPropertyComponent,
             {
               property,
-              size: "small"
+              size: "medium"
             },
             `i_${index2}`
           ) })
@@ -13970,7 +13976,7 @@
     );
   }
   function renderSkeletonImageThumbnail(size) {
-    const imageSize = size === "smallest" ? 40 : size === "small" ? 100 : 200;
+    const imageSize = size === "small" ? 40 : size === "medium" ? 100 : 200;
     return /* @__PURE__ */ jsxRuntime.jsx(
       ui.Skeleton,
       {
@@ -13982,7 +13988,7 @@
   function renderReference() {
     return /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { width: 200, height: 100 });
   }
-  function renderUrlComponent(property, size = "medium") {
+  function renderUrlComponent(property, size = "large") {
     if (typeof property.url === "boolean") {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
         display: "flex"
@@ -14135,10 +14141,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 === "smallest" ? "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 === "small" ? "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 === "smallest" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value });
+      ] }, `string_preview_${index}`)) }) : size === "small" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: value }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value });
     }
   }
   function ArrayPropertyPreview({
@@ -14161,7 +14167,7 @@
       throw Error("Picked wrong preview component ArrayPreview");
     const values = value;
     if (!values) return null;
-    const childSize = size === "medium" ? "small" : "smallest";
+    const childSize = size === "medium" ? "medium" : "small";
     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));
@@ -14342,7 +14348,7 @@
     }
     if (property?.dataType !== "array" || !property.of || property.of.dataType !== "reference")
       throw Error("Picked wrong preview component ArrayOfReferencesPreview");
-    const childSize = size === "medium" ? "small" : "smallest";
+    const childSize = size === "medium" ? "medium" : "small";
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col w-full", children: value && value.map(
       (reference, index) => {
         const ofProperty = property.of;
@@ -14385,7 +14391,7 @@
     }
     if (property.dataType !== "array" || !property.of || property.of.dataType !== "string")
       throw Error("Picked wrong preview component ArrayOfStorageComponentsPreview");
-    const childSize = size === "medium" ? "small" : "smallest";
+    const childSize = size === "medium" ? "medium" : "small";
     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,
@@ -14499,7 +14505,7 @@
     }
     const values = value;
     if (!values) return null;
-    const childSize = size === "medium" ? "small" : "smallest";
+    const childSize = size === "medium" ? "medium" : "small";
     const typeField = property.oneOf.typeField ?? DEFAULT_ONE_OF_TYPE;
     const valueField = property.oneOf.valueField ?? DEFAULT_ONE_OF_VALUE;
     const properties = property.oneOf.properties;
@@ -14537,7 +14543,7 @@
     }
     if (!value) return null;
     const mapPropertyKeys = Object.keys(mapProperty.properties);
-    if (size === "smallest")
+    if (size === "small")
       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,
         {
@@ -14697,7 +14703,7 @@
       property.name && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
-          className: ui.cls("text-text-secondary dark:text-text-secondary-dark", size === "smallest" ? "text-sm" : ""),
+          className: ui.cls("text-text-secondary dark:text-text-secondary-dark", size === "small" ? "text-sm" : ""),
           children: property.name
         }
       )
@@ -15063,7 +15069,7 @@
     touched,
     property,
     includeDescription,
-    size = "medium"
+    size = "large"
   }) {
     const enumValues = resolveEnumValues(property.enumValues ?? []);
     useClearRestoreValue({
@@ -15080,9 +15086,9 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         ui.Select,
         {
-          size: size === "medium" ? "medium" : "small",
           value: value !== void 0 && value != null ? value.toString() : "",
           disabled,
+          size,
           position: "item-aligned",
           inputClassName: ui.cls("w-full"),
           label: /* @__PURE__ */ jsxRuntime.jsx(PropertyIdCopyTooltip, { propertyKey, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -15835,7 +15841,7 @@
     autoFocus,
     property,
     includeDescription,
-    size = "medium"
+    size = "large"
   }) {
     let multiline;
     let url;
@@ -16000,7 +16006,7 @@
         {
           value: internalValue,
           onChange: (dateValue) => setValue(dateValue),
-          size: "medium",
+          size: "large",
           mode: property.mode,
           clearable: property.clearable,
           locale,
@@ -16744,7 +16750,7 @@
             placeholder: "value",
             value: entryValue2,
             type: dataType2 === "number" ? "number" : "text",
-            size: "small",
+            size: "medium",
             disabled: disabled || !fieldKey2,
             onChange: (event) => {
               if (dataType2 === "number") {
@@ -16780,7 +16786,7 @@
           ui.DateTimeField,
           {
             value: entryValue2,
-            size: "small",
+            size: "medium",
             locale,
             disabled: disabled || !fieldKey2,
             onChange: (date) => {
@@ -16796,7 +16802,7 @@
           ui.BooleanSwitchWithLabel,
           {
             value: entryValue2,
-            size: "small",
+            size: "medium",
             position: "start",
             disabled: disabled || !fieldKey2,
             onValueChange: (newValue) => {
@@ -16900,7 +16906,7 @@
                 value: fieldKey,
                 placeholder: "key",
                 disabled: disabled || entryValue !== void 0 && entryValue !== null && entryValue !== "",
-                size: "small",
+                size: "medium",
                 onChange: (event) => {
                   onFieldKeyChange(event.target.value);
                 }
@@ -16999,7 +17005,7 @@
           {
             value: entryValue,
             type: dataType === "number" ? "number" : "text",
-            size: "small",
+            size: "medium",
             onChange: (event) => {
               if (dataType === "number") {
                 const numberValue = event.target.value ? parseFloat(event.target.value) : void 0;
@@ -17021,7 +17027,7 @@
           ui.DateTimeField,
           {
             value: entryValue,
-            size: "small",
+            size: "medium",
             locale,
             onChange: (date) => {
               setValue(date);
@@ -17431,7 +17437,7 @@
                     children: "Type"
                   }
                 ),
-                size: "small",
+                size: "medium",
                 position: "item-aligned",
                 value: value1,
                 renderValue: (enumKey) => /* @__PURE__ */ jsxRuntime.jsx(