@amplifyup/sdk 0.1.64 → 0.1.66

package/dist/react.js

@@ -440,9 +440,14 @@ function isFieldEnvelope(value) {
   const rec = value;
   return typeof rec.name === "string" && "value" in rec && !("url" in rec);
 }
+function isPageResourceSentinel(value) {
+  return !!value && typeof value === "object" && !Array.isArray(value) && typeof value.__amplifyupPageResource === "string";
+}
 function isPortableImageShape(value) {
   if (!value || typeof value !== "object" || Array.isArray(value)) return false;
-  return "url" in value;
+  if ("url" in value) return true;
+  const rec = value;
+  return rec._type === "image" || rec.asset != null;
 }
 function isIdentifierKey(key) {
   return IDENTIFIER_KEYS.has(key);
@@ -549,6 +554,10 @@ function toFieldEnvelopes(source, prefix = "", scope) {
       continue;
     }
     const path = joinPath(prefix, key);
+    if (isPageResourceSentinel(raw)) {
+      out[key] = withLeaf({ value: raw, name: path }, ctx);
+      continue;
+    }
     if (isFieldEnvelope(raw)) {
       const inner = raw.value;
       if (isRecordList(inner)) {
@@ -854,7 +863,7 @@ function mergeEventContext(properties, attached) {
   };
 }
 var PAGE_RESOURCE_MARKER = "__amplifyupPageResource";
-function isPageResourceSentinel(value) {
+function isPageResourceSentinel2(value) {
   return !!value && typeof value === "object" && !Array.isArray(value) && typeof value[PAGE_RESOURCE_MARKER] === "string";
 }
 function getByDotPath(source, path) {
@@ -870,7 +879,7 @@ function getByDotPath(source, path) {
   return cur;
 }
 function hydratePageResourceValue(value, fields) {
-  if (!isPageResourceSentinel(value)) return value;
+  if (!isPageResourceSentinel2(value)) return value;
   if (!fields) return null;
   if (value.path) return getByDotPath(fields, value.path) ?? null;
   return fields;
@@ -882,7 +891,7 @@ function hydrateFieldsBag(bag, fields) {
       const env = val;
       out[key] = {
         name: env.name,
-        value: isPageResourceSentinel(env.value) ? hydratePageResourceValue(env.value, fields) : env.value
+        value: isPageResourceSentinel2(env.value) ? hydratePageResourceValue(env.value, fields) : env.value
       };
       continue;
     }
@@ -890,7 +899,7 @@ function hydrateFieldsBag(bag, fields) {
       out[key] = hydrateFieldsBag(val, fields);
       continue;
     }
-    out[key] = isPageResourceSentinel(val) ? hydratePageResourceValue(val, fields) : val;
+    out[key] = isPageResourceSentinel2(val) ? hydratePageResourceValue(val, fields) : val;
   }
   return out;
 }
@@ -903,7 +912,7 @@ function hydratePageResourceProps(props, fields) {
   }
   for (const [key, val] of Object.entries(out)) {
     if (key === "fields") continue;
-    if (isPageResourceSentinel(val)) {
+    if (isPageResourceSentinel2(val)) {
       out[key] = hydratePageResourceValue(val, fields);
     }
   }
@@ -5164,6 +5173,38 @@ function imageSrc(value) {
   if (isPortableImageValue(value)) return value.url.trim();
   return "";
 }
+function leafText(field) {
+  if (isFieldEnvelope(field)) return field.value;
+  return field;
+}
+function coerceImageField(field, value, name) {
+  if (isFieldEnvelope(field)) return { field, value, name };
+  if (!isBrandedFields(field) || !field || typeof field !== "object") {
+    return { field: void 0, value, name };
+  }
+  const bag = field;
+  const urlField = bag.url;
+  const urlName = isFieldEnvelope(urlField) && typeof urlField.name === "string" ? urlField.name.replace(/\.url$/, "") : "";
+  const editName = urlName || name || "";
+  if (!editName) return { field: void 0, value, name };
+  const ref = isFieldEnvelope(urlField) ? urlField.ref : void 0;
+  const width = leafText(bag.width);
+  const height = leafText(bag.height);
+  return {
+    field: {
+      value: {
+        url: String(leafText(urlField) ?? ""),
+        alt: leafText(bag.alt),
+        ...typeof width === "number" ? { width } : {},
+        ...typeof height === "number" ? { height } : {}
+      },
+      name: editName,
+      ...ref ? { ref } : {}
+    },
+    value,
+    name: editName
+  };
+}
 function Image(props) {
   const {
     field,
@@ -5176,15 +5217,22 @@ function Image(props) {
     ...imgProps
   } = props;
   const context = React2.useContext(ComponentContext);
-  const hasField = isFieldEnvelope(field);
+  const coerced = coerceImageField(field, value, name);
+  const boundField = coerced.field;
+  const hasField = isFieldEnvelope(boundField);
   const hasValue = hasOwnProp(props, "value");
-  const { editName, fieldValue, ref } = useBoundField(field, value, name, "Image");
+  const { editName, fieldValue, ref } = useBoundField(
+    boundField,
+    coerced.value,
+    coerced.name,
+    "Image"
+  );
   const composerEdit = useComposerEditMode();
-  warnProjectionProps("Image", hasField, hasValue, name);
-  if (warnNotScalarField("Image", field, fieldValue)) {
+  warnProjectionProps("Image", hasField || isBrandedFields(field), hasValue, coerced.name || name);
+  if (!isBrandedFields(field) && warnNotScalarField("Image", boundField, fieldValue)) {
     return null;
   }
-  if (!hasField && !hasValue && !name) {
+  if (!hasField && !hasValue && !name && !editName) {
     return null;
   }
   const src = imageSrc(fieldValue);
@@ -5192,7 +5240,7 @@ function Image(props) {
   const alt = altProp ?? portable?.alt ?? "";
   const width = widthProp ?? portable?.width;
   const height = heightProp ?? portable?.height;
-  const fieldAttrs = composerEdit && editName && canComposerBind(field, ref, editName) ? {
+  const fieldAttrs = composerEdit && editName && canComposerBind(boundField, ref, editName) ? {
     "data-amplifyup-field": editName,
     "data-amplifyup-field-type": "image",
     "data-amplifyup-node-id": context?.layoutNodeId || void 0,
@@ -5205,8 +5253,25 @@ function Image(props) {
       '[AmplifyUp SDK] Image value={\u2026} requires name="\u2026" for computed values'
     );
   }
-  if (!src) {
-    if (!composerEdit || !fieldAttrs) return null;
+  const img = src ? /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      ...imgProps,
+      src,
+      alt,
+      className: fieldAttrs ? void 0 : className,
+      width,
+      height,
+      style: fieldAttrs ? {
+        display: "block",
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        pointerEvents: "none"
+      } : typeof imgProps.style === "object" && imgProps.style ? imgProps.style : void 0
+    }
+  ) : null;
+  if (fieldAttrs) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -5221,30 +5286,15 @@ function Image(props) {
           minHeight: height ? void 0 : 80,
           width: width || "100%",
           height: height || void 0,
-          background: "color-mix(in srgb, currentColor 8%, transparent)",
-          outline: "2px dashed hsl(82 100% 45%)",
-          outlineOffset: 2,
-          cursor: "pointer"
-        }
+          cursor: "pointer",
+          background: src ? void 0 : "color-mix(in srgb, currentColor 8%, transparent)"
+        },
+        children: img
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "img",
-    {
-      ...imgProps,
-      ...fieldAttrs,
-      src,
-      alt,
-      className,
-      width,
-      height,
-      style: {
-        ...typeof imgProps.style === "object" && imgProps.style ? imgProps.style : {},
-        ...composerEdit && fieldAttrs ? { cursor: "pointer" } : null
-      }
-    }
-  );
+  if (!src) return null;
+  return img;
 }
 var usePathname = null;
 if (typeof window !== "undefined") {