@amplifyup/sdk 0.1.30 → 0.1.31

package/dist/react.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { ReactNode } from 'react';
-import { P as PageConfig, b as AmplifyUpConfig, C as ContentSource, A as AmplifyContentMeta } from './types-6qEnwLda.mjs';
-export { Z as ZoneConfig } from './types-6qEnwLda.mjs';
+import { P as PageConfig, b as AmplifyUpConfig, C as ContentSource, A as AmplifyContentMeta } from './types-npF_lNoq.mjs';
+export { Z as ZoneConfig } from './types-npF_lNoq.mjs';
 export { AmplifyRenderer } from './AmplifyRenderer.mjs';
 export { i as isComposerPreview, a as isPreviewRequest } from './preview-BMrIgUvp.mjs';
 export { fetchPageConfigServer } from './server.mjs';
@@ -106,6 +106,21 @@ declare function RichText({ name, fallback, className, as: Tag, }: {
     className?: string;
     as?: keyof JSX.IntrinsicElements;
 }): react_jsx_runtime.JSX.Element | null;
+/**
+ * Image — renders a provider-backed image field as `<img>`.
+ *
+ * Values are portable `{ url, alt?, width?, height? }` (or a plain URL string).
+ * AmplifyUp does not host image files; the browser loads `url` from the provider CDN.
+ *
+ * @example
+ * ```tsx
+ * <Image name="backgroundImage" className="h-full w-full object-cover" />
+ * ```
+ */
+declare function Image({ name, alt: altProp, className, width: widthProp, height: heightProp, ...imgProps }: {
+    name: string;
+    alt?: string;
+} & Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'name'>): react_jsx_runtime.JSX.Element | null;
 
 interface AmplifyUpContextType {
     pageConfig: PageConfig | null;
@@ -121,4 +136,4 @@ interface AmplifyUpProviderProps {
 declare function AmplifyUpProvider({ children, config }: AmplifyUpProviderProps): react_jsx_runtime.JSX.Element;
 declare function useAmplifyUp(): AmplifyUpContextType;
 
-export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ContentSource, Field, PageConfig, RichText, Slot, useAmplifyUp, useComponentProps, useLiveComposerProps };
+export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ContentSource, Field, Image, PageConfig, RichText, Slot, useAmplifyUp, useComponentProps, useLiveComposerProps };

package/dist/react.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { ReactNode } from 'react';
-import { P as PageConfig, b as AmplifyUpConfig, C as ContentSource, A as AmplifyContentMeta } from './types-6qEnwLda.js';
-export { Z as ZoneConfig } from './types-6qEnwLda.js';
+import { P as PageConfig, b as AmplifyUpConfig, C as ContentSource, A as AmplifyContentMeta } from './types-npF_lNoq.js';
+export { Z as ZoneConfig } from './types-npF_lNoq.js';
 export { AmplifyRenderer } from './AmplifyRenderer.js';
 export { i as isComposerPreview, a as isPreviewRequest } from './preview-BMrIgUvp.js';
 export { fetchPageConfigServer } from './server.js';
@@ -106,6 +106,21 @@ declare function RichText({ name, fallback, className, as: Tag, }: {
     className?: string;
     as?: keyof JSX.IntrinsicElements;
 }): react_jsx_runtime.JSX.Element | null;
+/**
+ * Image — renders a provider-backed image field as `<img>`.
+ *
+ * Values are portable `{ url, alt?, width?, height? }` (or a plain URL string).
+ * AmplifyUp does not host image files; the browser loads `url` from the provider CDN.
+ *
+ * @example
+ * ```tsx
+ * <Image name="backgroundImage" className="h-full w-full object-cover" />
+ * ```
+ */
+declare function Image({ name, alt: altProp, className, width: widthProp, height: heightProp, ...imgProps }: {
+    name: string;
+    alt?: string;
+} & Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'name'>): react_jsx_runtime.JSX.Element | null;
 
 interface AmplifyUpContextType {
     pageConfig: PageConfig | null;
@@ -121,4 +136,4 @@ interface AmplifyUpProviderProps {
 declare function AmplifyUpProvider({ children, config }: AmplifyUpProviderProps): react_jsx_runtime.JSX.Element;
 declare function useAmplifyUp(): AmplifyUpContextType;
 
-export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ContentSource, Field, PageConfig, RichText, Slot, useAmplifyUp, useComponentProps, useLiveComposerProps };
+export { AmplifyContentMeta, AmplifyPageContent, AmplifyUpProvider, ComponentContextProvider, ContentSource, Field, Image, PageConfig, RichText, Slot, useAmplifyUp, useComponentProps, useLiveComposerProps };

package/dist/react.js

@@ -1618,6 +1618,11 @@ Available Console Commands:
     if (config.componentName) {
       properties.componentName = config.componentName;
     }
+    if (config.staticProperties) {
+      for (const [key, value] of Object.entries(config.staticProperties)) {
+        if (key) properties[key] = value;
+      }
+    }
     if (config.properties && config.properties.length > 0) {
       config.properties.forEach((prop) => {
         const dataAttrValue = element.getAttribute(`data-${prop}`);
@@ -1984,13 +1989,23 @@ Available Console Commands:
       document.removeEventListener("click", this.eventSelectionClickHandler, true);
       this.eventSelectionClickHandler = null;
     }
+    if (enabled && typeof window !== "undefined" && window.__AMPLIFYUP_PREVIEW_MODE__) {
+      return;
+    }
     if (enabled) {
       this.eventSelectionClickHandler = (e) => {
-        const target = e.target;
-        if (!target) return;
+        const raw = e.target;
+        if (!raw) return;
+        const interactive = raw.closest(
+          'a, button, [role="button"], input, select, textarea, [data-el], [data-amplifyup-component], [data-component-id]'
+        );
+        const target = interactive instanceof HTMLElement ? interactive : raw;
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
         const selector = this.generateSelectorForElement(target);
         const tagName = target.tagName.toLowerCase();
-        const text = target.textContent?.trim().substring(0, 50) || "";
+        const text = (target.textContent || "").replace(/\s+/g, " ").trim().substring(0, 80);
         if (window.parent && window.parent !== window) {
           window.parent.postMessage({
             type: "ELEMENT_CLICKED_FOR_EVENT",
@@ -1999,9 +2014,6 @@ Available Console Commands:
             text
           }, "*");
         }
-        if (tagName === "a") {
-          e.preventDefault();
-        }
       };
       document.addEventListener("click", this.eventSelectionClickHandler, true);
       if (this.config?.debug) {
@@ -3195,6 +3207,54 @@ function RichText({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className, dangerouslySetInnerHTML: { __html: html } });
 }
+function isPortableImageValue(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const url = value.url;
+  return typeof url === "string" && url.trim().length > 0;
+}
+function imageSrc(value) {
+  if (typeof value === "string") return value.trim();
+  if (isPortableImageValue(value)) return value.url.trim();
+  return "";
+}
+function Image({
+  name,
+  alt: altProp,
+  className,
+  width: widthProp,
+  height: heightProp,
+  ...imgProps
+}) {
+  const context = react.useContext(ComponentContext);
+  const fieldValue = useFieldOverlay(
+    context?.layoutNodeId,
+    name,
+    context?.props?.[name]
+  );
+  if (!context) {
+    console.warn(
+      `[AmplifyUp SDK] Image "${name}" used outside ComponentContextProvider`
+    );
+    return null;
+  }
+  const src = imageSrc(fieldValue);
+  if (!src) return null;
+  const portable = isPortableImageValue(fieldValue) ? fieldValue : null;
+  const alt = altProp ?? portable?.alt ?? "";
+  const width = widthProp ?? portable?.width;
+  const height = heightProp ?? portable?.height;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      ...imgProps,
+      src,
+      alt,
+      className,
+      width,
+      height
+    }
+  );
+}
 var ComponentRenderBoundary = class extends react.Component {
   constructor() {
     super(...arguments);
@@ -3911,6 +3971,7 @@ exports.AmplifyRenderer = AmplifyRenderer;
 exports.AmplifyUpProvider = AmplifyUpProvider;
 exports.ComponentContextProvider = ComponentContextProvider;
 exports.Field = Field;
+exports.Image = Image;
 exports.RichText = RichText;
 exports.Slot = Slot;
 exports.fetchPageConfigServer = fetchPageConfigServer;