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

package/dist/index.es.js

@@ -4259,6 +4259,7 @@ function VirtualTableSelect(props) {
     Select,
     {
       inputRef: ref,
+      size: "large",
       className: "w-full h-full p-0 bg-transparent",
       position: "item-aligned",
       disabled,
@@ -4382,7 +4383,7 @@ function VirtualTableDateField(props) {
     {
       value: internalValue ?? void 0,
       onChange: (dateValue) => updateValue(dateValue ?? null),
-      size: "medium",
+      size: "large",
       invisible: true,
       inputClassName: cls("w-full h-full", focusedDisabled),
       className: cls("w-full h-full", focusedDisabled),
@@ -4416,28 +4417,28 @@ class ErrorBoundary extends React__default.Component {
     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);
   }
@@ -5041,7 +5042,7 @@ function EntityPreview({
     propertyConfigs: customizationController.propertyConfigs
   }), [collection]);
   const listProperties = 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);
@@ -5055,13 +5056,13 @@ function EntityPreview({
       hover: disabled ? void 0 : hover,
       size,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "smallest" ? "my-0.5" : "m-2 self-start"), children: [
+        /* @__PURE__ */ jsxs("div", { className: cls("flex w-10 h-10 ml-1 mr-2 shrink-0", size === "small" ? "my-0.5" : "m-2 self-start"), children: [
           imageProperty && /* @__PURE__ */ jsx(
             PropertyPreview,
             {
               property: imageProperty,
               propertyKey: imagePropertyKey,
-              size: "smallest",
+              size: "small",
               value: getValueInPath(entity.values, imagePropertyKey)
             }
           ),
@@ -5075,8 +5076,10 @@ function EntityPreview({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col grow-1 w-full max-w-full m-1", children: [
-          size !== "smallest" && includeId && (entity ? /* @__PURE__ */ jsx("div", { className: `${size !== "medium" ? "block whitespace-nowrap overflow-hidden truncate" : ""}`, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ 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__ */ jsx("div", { className: "block whitespace-nowrap overflow-hidden truncate", children: /* @__PURE__ */ jsx(
             Typography,
             {
               variant: "caption",
@@ -5085,19 +5088,19 @@ function EntityPreview({
               children: entity.id
             }
           ) }) : /* @__PURE__ */ jsx(Skeleton, {})),
-          titleProperty && /* @__PURE__ */ jsx("div", { className: "my-0.5 text-sm font-medium", children: entity ? /* @__PURE__ */ jsx(
+          titleProperty && /* @__PURE__ */ jsx("div", { className: "my-0.5 text-sm font-large", children: entity ? /* @__PURE__ */ jsx(
             PropertyPreview,
             {
               propertyKey: titleProperty,
               value: getValueInPath(entity.values, titleProperty),
               property: resolvedCollection.properties[titleProperty],
-              size: "medium"
+              size: "large"
             }
           ) : /* @__PURE__ */ jsx(
             SkeletonPropertyComponent,
             {
               property: resolvedCollection.properties[titleProperty],
-              size: "medium"
+              size: "large"
             }
           ) }),
           restProperties && restProperties.map((key) => {
@@ -5113,13 +5116,13 @@ function EntityPreview({
                     propertyKey: key,
                     value: getValueInPath(entity.values, key),
                     property: childProperty,
-                    size: "smallest"
+                    size: "small"
                   }
                 ) : /* @__PURE__ */ jsx(
                   SkeletonPropertyComponent,
                   {
                     property: childProperty,
-                    size: "smallest"
+                    size: "small"
                   }
                 )
               },
@@ -5127,12 +5130,12 @@ function EntityPreview({
             );
           })
         ] }),
-        entity && includeEntityLink && /* @__PURE__ */ jsx(Tooltip, { title: `See details for ${entity.id}`, children: /* @__PURE__ */ jsx(
+        entity && includeEntityLink && /* @__PURE__ */ jsx(Tooltip, { title: `See details for ${entity.id}`, className: "shrink-0", children: /* @__PURE__ */ jsx(
           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", {
@@ -5146,7 +5149,7 @@ function EntityPreview({
                 updateUrl: true
               });
             },
-            children: /* @__PURE__ */ jsx(KeyboardTabIcon, { size: "small" })
+            children: /* @__PURE__ */ jsx(KeyboardTabIcon, { size: "medium" })
           }
         ) }),
         actions
@@ -5179,7 +5182,7 @@ const EntityPreviewContainer = React.forwardRef(({
         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" : "",
         defaultBorderMixin,
@@ -5287,7 +5290,7 @@ const TableReferenceFieldInternal = React__default.memo(
                 ReferencePreview,
                 {
                   onClick: disabled ? void 0 : handleOpen,
-                  size: "smallest",
+                  size: "small",
                   reference,
                   hover: !disabled,
                   disabled: !path,
@@ -6454,7 +6457,7 @@ function CollectionTableToolbar({
     {
       value: size,
       className: "w-16 h-10",
-      size: "small",
+      size: "medium",
       onValueChange: (v) => onSizeChanged(v),
       renderValue: (v) => /* @__PURE__ */ jsx("div", { className: "font-medium", children: v.toUpperCase() }),
       children: ["xs", "s", "m", "l", "xl"].map((size2) => /* @__PURE__ */ jsx(SelectItem, { value: size2, className: "w-12 font-medium text-center", children: size2.toUpperCase() }, size2))
@@ -7569,6 +7572,7 @@ function ReferenceFilterField({
       Select,
       {
         value: operation,
+        size: "large",
         onValueChange: (value2) => {
           updateFilter(value2, internalValue);
         },
@@ -7887,6 +7891,7 @@ function DateTimeFilterField({
       Select,
       {
         value: operation,
+        size: "large",
         onValueChange: (value2) => {
           updateFilter(value2, internalValue);
         },
@@ -7899,7 +7904,7 @@ function DateTimeFilterField({
         DateTimeField,
         {
           mode,
-          size: "medium",
+          size: "large",
           locale,
           value: internalValue ?? void 0,
           onChange: (dateValue) => {
@@ -10040,6 +10045,7 @@ function CustomIdField({
     enumValues && /* @__PURE__ */ jsx(
       Select,
       {
+        size: "large",
         error,
         onValueChange: (v) => onChange(v),
         ...fieldProps,
@@ -11644,7 +11650,7 @@ const EntityCollectionView = React__default.memo(
               ReferencePreview,
               {
                 reference,
-                size: "smallest"
+                size: "small"
               },
               reference.path + "/" + reference.id
             );
@@ -13593,7 +13599,7 @@ function ImagePreview({
   url
 }) {
   const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
-  if (size === "smallest") {
+  if (size === "small") {
     return /* @__PURE__ */ jsx(
       "img",
       {
@@ -13769,11 +13775,11 @@ function VideoPreview({
   interactive
 }) {
   const imageSize = 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]);
@@ -13855,16 +13861,16 @@ function renderMap(property, size) {
   if (!property.properties)
     return /* @__PURE__ */ jsx(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__ */ jsx(
       "div",
       {
@@ -13873,7 +13879,7 @@ function renderMap(property, size) {
           SkeletonPropertyComponent,
           {
             property: property.properties[key],
-            size: "small"
+            size: "medium"
           }
         ) }, `map_${key}`))
       }
@@ -13901,7 +13907,7 @@ function renderMap(property, size) {
                 SkeletonPropertyComponent,
                 {
                   property: property.properties[key],
-                  size: "small"
+                  size: "medium"
                 }
               )
             },
@@ -13929,7 +13935,7 @@ function renderArrayOfMaps(properties, size, previewProperties) {
             SkeletonPropertyComponent,
             {
               property: properties[key],
-              size: "small"
+              size: "medium"
             }
           )
         },
@@ -13956,7 +13962,7 @@ function renderGenericArrayCell(property, index = 0) {
           SkeletonPropertyComponent,
           {
             property,
-            size: "small"
+            size: "medium"
           },
           `i_${index2}`
         ) })
@@ -13966,7 +13972,7 @@ function renderGenericArrayCell(property, index = 0) {
   );
 }
 function renderSkeletonImageThumbnail(size) {
-  const imageSize = size === "smallest" ? 40 : size === "small" ? 100 : 200;
+  const imageSize = size === "small" ? 40 : size === "medium" ? 100 : 200;
   return /* @__PURE__ */ jsx(
     Skeleton,
     {
@@ -13978,7 +13984,7 @@ function renderSkeletonImageThumbnail(size) {
 function renderReference() {
   return /* @__PURE__ */ jsx(Skeleton, { width: 200, height: 100 });
 }
-function renderUrlComponent(property, size = "medium") {
+function renderUrlComponent(property, size = "large") {
   if (typeof property.url === "boolean") {
     return /* @__PURE__ */ jsxs("div", { style: {
       display: "flex"
@@ -14131,10 +14137,10 @@ function StringPropertyPreview({
   } else {
     if (!value) return /* @__PURE__ */ jsx(Fragment, {});
     const lines = value.split("\n");
-    return value && value.includes("\n") ? /* @__PURE__ */ jsx("div", { className: cls("overflow-x-scroll", size === "smallest" ? "text-sm" : ""), children: lines.map((str, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+    return value && value.includes("\n") ? /* @__PURE__ */ jsx("div", { className: cls("overflow-x-scroll", size === "small" ? "text-sm" : ""), children: lines.map((str, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
       /* @__PURE__ */ jsx("span", { children: str }),
       index !== lines.length - 1 && /* @__PURE__ */ jsx("br", {})
-    ] }, `string_preview_${index}`)) }) : size === "smallest" ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: value }) : /* @__PURE__ */ jsx(Fragment, { children: value });
+    ] }, `string_preview_${index}`)) }) : size === "small" ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: value }) : /* @__PURE__ */ jsx(Fragment, { children: value });
   }
 }
 function ArrayPropertyPreview({
@@ -14157,7 +14163,7 @@ function ArrayPropertyPreview({
     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__ */ 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));
@@ -14338,7 +14344,7 @@ function ArrayOfReferencesPreview({
   }
   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__ */ jsx("div", { className: "flex flex-col w-full", children: value && value.map(
     (reference, index) => {
       const ofProperty = property.of;
@@ -14381,7 +14387,7 @@ function ArrayOfStorageComponentsPreview({
   }
   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__ */ jsx("div", { className: "flex flex-wrap gap-2", children: value && value.map(
     (v, index) => /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(
       PropertyPreview,
@@ -14495,7 +14501,7 @@ function ArrayOneOfPreview({
   }
   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;
@@ -14533,7 +14539,7 @@ function MapPropertyPreview({
   }
   if (!value) return null;
   const mapPropertyKeys = Object.keys(mapProperty.properties);
-  if (size === "smallest")
+  if (size === "small")
     return /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col space-y-1 md:space-y-2", children: mapPropertyKeys.map((key, index) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
       ErrorBoundary,
       {
@@ -14693,7 +14699,7 @@ function BooleanPreview({
     property.name && /* @__PURE__ */ jsx(
       "span",
       {
-        className: cls("text-text-secondary dark:text-text-secondary-dark", size === "smallest" ? "text-sm" : ""),
+        className: cls("text-text-secondary dark:text-text-secondary-dark", size === "small" ? "text-sm" : ""),
         children: property.name
       }
     )
@@ -15059,7 +15065,7 @@ function SelectFieldBinding({
   touched,
   property,
   includeDescription,
-  size = "medium"
+  size = "large"
 }) {
   const enumValues = resolveEnumValues(property.enumValues ?? []);
   useClearRestoreValue({
@@ -15076,9 +15082,9 @@ function SelectFieldBinding({
     /* @__PURE__ */ jsx(
       Select,
       {
-        size: size === "medium" ? "medium" : "small",
         value: value !== void 0 && value != null ? value.toString() : "",
         disabled,
+        size,
         position: "item-aligned",
         inputClassName: cls("w-full"),
         label: /* @__PURE__ */ jsx(PropertyIdCopyTooltip, { propertyKey, children: /* @__PURE__ */ jsx(
@@ -15831,7 +15837,7 @@ function TextFieldBinding({
   autoFocus,
   property,
   includeDescription,
-  size = "medium"
+  size = "large"
 }) {
   let multiline;
   let url;
@@ -15996,7 +16002,7 @@ function DateTimeFieldBinding({
       {
         value: internalValue,
         onChange: (dateValue) => setValue(dateValue),
-        size: "medium",
+        size: "large",
         mode: property.mode,
         clearable: property.clearable,
         locale,
@@ -16740,7 +16746,7 @@ function MapKeyValueRow({
           placeholder: "value",
           value: entryValue2,
           type: dataType2 === "number" ? "number" : "text",
-          size: "small",
+          size: "medium",
           disabled: disabled || !fieldKey2,
           onChange: (event) => {
             if (dataType2 === "number") {
@@ -16776,7 +16782,7 @@ function MapKeyValueRow({
         DateTimeField,
         {
           value: entryValue2,
-          size: "small",
+          size: "medium",
           locale,
           disabled: disabled || !fieldKey2,
           onChange: (date) => {
@@ -16792,7 +16798,7 @@ function MapKeyValueRow({
         BooleanSwitchWithLabel,
         {
           value: entryValue2,
-          size: "small",
+          size: "medium",
           position: "start",
           disabled: disabled || !fieldKey2,
           onValueChange: (newValue) => {
@@ -16896,7 +16902,7 @@ function MapKeyValueRow({
               value: fieldKey,
               placeholder: "key",
               disabled: disabled || entryValue !== void 0 && entryValue !== null && entryValue !== "",
-              size: "small",
+              size: "medium",
               onChange: (event) => {
                 onFieldKeyChange(event.target.value);
               }
@@ -16995,7 +17001,7 @@ function ArrayKeyValueRow({
         {
           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;
@@ -17017,7 +17023,7 @@ function ArrayKeyValueRow({
         DateTimeField,
         {
           value: entryValue,
-          size: "small",
+          size: "medium",
           locale,
           onChange: (date) => {
             setValue(date);
@@ -17427,7 +17433,7 @@ function BlockEntry({
                   children: "Type"
                 }
               ),
-              size: "small",
+              size: "medium",
               position: "item-aligned",
               value: value1,
               renderValue: (enumKey) => /* @__PURE__ */ jsx(