@amplifyup/sdk 0.1.62 → 0.1.63

package/dist/react.js

@@ -434,6 +434,21 @@ function isPortableImageShape(value) {
   if (!value || typeof value !== "object" || Array.isArray(value)) return false;
   return "url" in value;
 }
+function isEntryRefItem(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const rec = value;
+  return typeof rec.id === "string" && rec.id.trim().length > 0 || typeof rec._id === "string" && rec._id.trim().length > 0 || typeof rec.docId === "string" && rec.docId.trim().length > 0;
+}
+function isRepeaterArray(value) {
+  if (!Array.isArray(value) || value.length === 0) return false;
+  const sample = value.find((item) => item != null);
+  if (sample === void 0) return false;
+  if (typeof sample !== "object" || Array.isArray(sample)) return false;
+  if (isPortableImageShape(sample)) return false;
+  if (isEntryRefItem(sample)) return false;
+  if (sample.$$typeof) return false;
+  return true;
+}
 function joinPath(prefix, key) {
   return prefix ? `${prefix}.${key}` : key;
 }
@@ -450,9 +465,21 @@ function toFieldEnvelopes(source, prefix = "") {
   for (const [key, raw] of Object.entries(input)) {
     const path = joinPath(prefix, key);
     if (isFieldEnvelope(raw)) {
+      const inner = raw.value;
+      if (isRepeaterArray(inner)) {
+        out[key] = {
+          value: envelopeRepeaterItems(inner, raw.name || path),
+          name: raw.name || path
+        };
+        continue;
+      }
       out[key] = { value: raw.value ?? null, name: raw.name || path };
       continue;
     }
+    if (isRepeaterArray(raw)) {
+      out[key] = { value: envelopeRepeaterItems(raw, path), name: path };
+      continue;
+    }
     if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
       out[key] = toFieldEnvelopes(raw, path);
       continue;
@@ -461,6 +488,16 @@ function toFieldEnvelopes(source, prefix = "") {
   }
   return brandFields(out);
 }
+function envelopeRepeaterItems(items, prefix) {
+  return items.map((item, i) => {
+    const path = joinPath(prefix, String(i));
+    if (isBrandedFields(item)) return item;
+    if (item && typeof item === "object" && !Array.isArray(item)) {
+      return toFieldEnvelopes(item, path);
+    }
+    return toFieldEnvelopes({}, path);
+  });
+}
 function attachFieldEnvelopes(props) {
   const raw = props && typeof props === "object" ? { ...props } : {};
   if (isBrandedFields(raw.fields)) return raw;
@@ -487,6 +524,14 @@ function envelopePageConfig(page) {
 }
 function collectFieldPatches(props) {
   const out = [];
+  const walkRepeater = (items, prefix) => {
+    items.forEach((item, i) => {
+      const itemPath = joinPath(prefix, String(i));
+      if (isBrandedFields(item) || item && typeof item === "object" && !Array.isArray(item) && !isFieldEnvelope(item)) {
+        walk(item, itemPath);
+      }
+    });
+  };
   const walk = (obj, prefix) => {
     for (const [key, raw] of Object.entries(obj)) {
       if (key === "fields" && raw && typeof raw === "object" && !Array.isArray(raw) && !isFieldEnvelope(raw)) {
@@ -495,9 +540,17 @@ function collectFieldPatches(props) {
       }
       const path = joinPath(prefix, key);
       if (isFieldEnvelope(raw)) {
+        if (isRepeaterArray(raw.value)) {
+          walkRepeater(raw.value, raw.name || path);
+          continue;
+        }
         out.push({ name: raw.name || path, value: raw.value });
         continue;
       }
+      if (isRepeaterArray(raw)) {
+        walkRepeater(raw, path);
+        continue;
+      }
       if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !raw.$$typeof) {
         walk(raw, path);
         continue;
@@ -510,6 +563,37 @@ function collectFieldPatches(props) {
   }
   return out;
 }
+function unwrapFieldsBag(item) {
+  if (!item || typeof item !== "object" || Array.isArray(item)) return {};
+  const out = {};
+  for (const [key, raw] of Object.entries(item)) {
+    if (isFieldEnvelope(raw)) {
+      out[key] = raw.value;
+      continue;
+    }
+    if (raw && typeof raw === "object" && !Array.isArray(raw) && !isPortableImageShape(raw) && !isEntryRefItem(raw) && !raw.$$typeof) {
+      out[key] = unwrapFieldsBag(raw);
+      continue;
+    }
+    out[key] = raw;
+  }
+  return out;
+}
+function resolveCollectionItems(field, overlay) {
+  const name = typeof field?.name === "string" ? field.name : "";
+  const raw = overlay !== void 0 ? overlay : field?.value;
+  const list = Array.isArray(raw) ? raw : isFieldEnvelope(raw) && Array.isArray(raw.value) ? raw.value : [];
+  if (list.length === 0) return [];
+  if (isRepeaterArray(list) || list.every((item) => isBrandedFields(item))) {
+    return envelopeRepeaterItems(list, name);
+  }
+  return envelopeRepeaterItems(
+    list.map(
+      (item) => item && typeof item === "object" && !Array.isArray(item) ? item : {}
+    ),
+    name
+  );
+}
 function resolveEditableBinding(field, value, name) {
   if (isFieldEnvelope(field)) {
     return { name: field.name, value: field.value, requiresName: false };
@@ -3623,6 +3707,16 @@ var ComposerFieldStore = class {
       if (set.size === 0) this.listeners.delete(name);
     };
   }
+  keys() {
+    return [...this.values.keys()];
+  }
+  delete(name) {
+    if (!name || !this.values.has(name)) return;
+    this.values.delete(name);
+    const set = this.listeners.get(name);
+    if (!set) return;
+    for (const fn of set) fn();
+  }
 };
 var ComposerStoreContext = React2.createContext(null);
 function matchesNode(eventNodeId, layoutNodeId) {
@@ -3643,6 +3737,13 @@ function ComposerProvider({
       if (!fieldName || typeof fieldName !== "string") return;
       if (!matchesNode(nodeId, layoutNodeId)) return;
       store.set(fieldName, value);
+      if (value && typeof value === "object") {
+        for (const patch of collectFieldPatches(
+          toFieldEnvelopes({ [fieldName]: value })
+        )) {
+          store.set(patch.name, patch.value);
+        }
+      }
     };
     const applyProps = (nextProps, nodeId) => {
       if (!nextProps || typeof nextProps !== "object" || Array.isArray(nextProps)) {
@@ -3697,6 +3798,9 @@ function useComposerFieldValue(name, fallback) {
   const overlay = React2.useSyncExternalStore(subscribe, getSnapshot, () => void 0);
   return overlay !== void 0 ? overlay : fallback;
 }
+function useComposerStore() {
+  return React2.useContext(ComposerStoreContext);
+}
 function MaybeComposerProvider({
   enabled,
   layoutNodeId,
@@ -4360,6 +4464,21 @@ function AmplifyPageContent({
     }
   );
 }
+
+// src/composer-edit-mode.ts
+function isComposerEditMode() {
+  if (typeof window === "undefined") return false;
+  return isComposerPreview() && window.__AMPLIFYUP_EVENT_SELECTION__ !== true;
+}
+function subscribeComposerEdit(onStoreChange) {
+  if (typeof window === "undefined") return () => {
+  };
+  window.addEventListener("amplifyup:composer-edit", onStoreChange);
+  return () => window.removeEventListener("amplifyup:composer-edit", onStoreChange);
+}
+function getComposerEditModeServer() {
+  return false;
+}
 var ComponentContext = React2.createContext(null);
 function ComponentContextProvider({
   children,
@@ -4461,10 +4580,6 @@ function Slot({
     }
   );
 }
-function isComposerEditMode() {
-  if (typeof window === "undefined") return false;
-  return isComposerPreview() && window.__AMPLIFYUP_EVENT_SELECTION__ !== true;
-}
 function isLikelyNonTextFieldName(name) {
   const n = name.toLowerCase();
   return n.includes("href") || n.includes("url") || n.includes("src") || n.includes("image") || n.includes("icon") || n.includes("overlay") || n.includes("color");
@@ -4499,17 +4614,11 @@ function canInlineEditRichText(name, value) {
   }
   return true;
 }
-function subscribeComposerEdit(onStoreChange) {
-  if (typeof window === "undefined") return () => {
-  };
-  window.addEventListener("amplifyup:composer-edit", onStoreChange);
-  return () => window.removeEventListener("amplifyup:composer-edit", onStoreChange);
-}
 function useComposerEditMode() {
   return React2.useSyncExternalStore(
     subscribeComposerEdit,
     isComposerEditMode,
-    () => false
+    getComposerEditModeServer
   );
 }
 function useBoundField(field, value, name, component) {
@@ -4577,23 +4686,20 @@ function ComposerInlineField({
   name,
   value,
   className,
-  render,
   layoutNodeId,
   componentId,
   rich = false
 }) {
-  const [editing, setEditing] = React2.useState(false);
   const [focused, setFocused] = React2.useState(false);
   const elRef = React2.useRef(null);
   const storedEmpty = isComposerEmptyText(value);
   const text = storedEmpty ? "" : formatFieldValue(value);
   const hint = COMPOSER_EMPTY_FIELD_HINT;
   const idleDisplay = storedEmpty ? hint : text;
-  const showRendered = !!render && !editing && !storedEmpty;
-  const showHint = storedEmpty && !focused && !showRendered;
+  const showHint = storedEmpty && !focused;
   React2.useEffect(() => {
     const el = elRef.current;
-    if (!el || showRendered) return;
+    if (!el) return;
     if (document.activeElement === el) return;
     if (el.querySelector(
       "input, button, select, textarea, form, svg, iframe, img"
@@ -4602,24 +4708,10 @@ function ComposerInlineField({
     }
     const next = idleDisplay || "";
     if (el.textContent !== next) el.textContent = next;
-  }, [idleDisplay, showRendered]);
-  React2.useEffect(() => {
-    if (!editing || !elRef.current) return;
-    const el = elRef.current;
-    if (storedEmpty) {
-      el.textContent = "";
-      el.focus();
-      placeCaret(el, true);
-      return;
-    }
-    el.textContent = idleDisplay || "";
-    el.focus();
-    placeCaret(el, false);
-  }, [editing, storedEmpty, idleDisplay]);
+  }, [idleDisplay]);
   const finishEdit = () => {
     const raw = (elRef.current?.innerText ?? "").replace(/\u00a0/g, " ").replace(/\n+$/g, "");
     const next = raw.trim() === "" ? "" : raw;
-    setEditing(false);
     setFocused(false);
     if (storedEmpty && next === "") {
       if (elRef.current) elRef.current.textContent = hint;
@@ -4653,7 +4745,7 @@ function ComposerInlineField({
       "data-amplifyup-field-type": rich ? "richtext" : "text",
       "data-amplifyup-node-id": layoutNodeId || void 0,
       "data-amplifyup-empty-hint": showHint ? "true" : void 0,
-      contentEditable: !rich && !showRendered,
+      contentEditable: !rich,
       suppressContentEditableWarning: true,
       role: "textbox",
       tabIndex: 0,
@@ -4668,9 +4760,6 @@ function ComposerInlineField({
           openRichEditor(event);
           return;
         }
-        if (render) {
-          setEditing(true);
-        }
       },
       onFocus: () => {
         if (!isComposerEditMode()) return;
@@ -4684,7 +4773,6 @@ function ComposerInlineField({
           el.textContent = "";
           placeCaret(el, true);
         }
-        if (render) setEditing(true);
       },
       onBlur: rich ? void 0 : finishEdit,
       onKeyDown: (event) => {
@@ -4696,7 +4784,6 @@ function ComposerInlineField({
         if (event.key === "Escape") {
           event.preventDefault();
           if (elRef.current) elRef.current.textContent = idleDisplay || "";
-          setEditing(false);
           setFocused(false);
           event.currentTarget.blur();
         }
@@ -4710,8 +4797,7 @@ function ComposerInlineField({
         // Do not force `inline` — that overrides Tailwind `block` and parks
         // an empty-field hint on the same line as a sibling that has a value.
         opacity: showHint ? 0.5 : void 0
-      },
-      children: showRendered ? render(value) : null
+      }
     }
   );
 }
@@ -4790,35 +4876,8 @@ function warnProjectionProps(component, hasField, hasValue, name) {
 function hasOwnProp(props, key) {
   return Object.prototype.hasOwnProperty.call(props, key);
 }
-function isLinkListItem(value) {
-  return !!value && typeof value === "object" && !Array.isArray(value);
-}
-function renderLinkList(items, className) {
-  const links = items.filter(isLinkListItem).filter((item) => {
-    const label = typeof item.label === "string" ? item.label.trim() : "";
-    const href = typeof item.href === "string" ? item.href.trim() : "";
-    return !!(label || href);
-  });
-  if (links.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { display: "contents" }, children: links.map((item, index) => {
-    const label = typeof item.label === "string" && item.label.trim() ? item.label : typeof item.href === "string" ? item.href : "Link";
-    const href = typeof item.href === "string" && item.href.trim() ? item.href : "#";
-    const style = typeof item.style === "string" ? item.style.trim() : "";
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        href,
-        target: item.openInNewTab ? "_blank" : void 0,
-        rel: item.openInNewTab ? "noreferrer" : void 0,
-        "data-amplifyup-action-style": style || void 0,
-        children: label
-      },
-      typeof item._key === "string" && item._key ? item._key : `${href}-${index}`
-    );
-  }) });
-}
 function Field(props) {
-  const { field, value, name, className, render } = props;
+  const { field, value, name, className } = props;
   const context = React2.useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
   const hasField = isFieldEnvelope(field);
@@ -4828,6 +4887,9 @@ function Field(props) {
   if (!hasField && !hasValue && !name) {
     return null;
   }
+  if (Array.isArray(fieldValue)) {
+    return null;
+  }
   const empty = isComposerEmptyText(fieldValue);
   if (composerEdit && editName && context && canInlineEdit(editName, fieldValue)) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4836,7 +4898,6 @@ function Field(props) {
         name: editName,
         value: fieldValue,
         className,
-        render: empty ? void 0 : render,
         layoutNodeId: context.layoutNodeId,
         componentId: context.componentId,
         rich: looksLikeRichCanvasField(editName)
@@ -4844,17 +4905,190 @@ function Field(props) {
     );
   }
   if (empty) return null;
-  if (render) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { display: "contents" }, children: render(fieldValue) });
-  }
-  if (Array.isArray(fieldValue)) {
-    const list = renderLinkList(fieldValue, className);
-    if (list) return list;
-  }
   const text = formatFieldValue(fieldValue);
   if (!text) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: text });
 }
+var COMPOSER_EMPTY_COLLECTION_HINT = "Click here to add an item";
+function CollectionChromeButton({
+  label,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onMouseDown: (event) => event.stopPropagation(),
+      onClick: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick();
+      },
+      style: {
+        fontSize: 11,
+        lineHeight: 1.2,
+        padding: "4px 8px",
+        border: "1px solid color-mix(in srgb, currentColor 28%, transparent)",
+        borderRadius: 6,
+        background: "transparent",
+        cursor: "pointer",
+        color: "inherit"
+      },
+      children: label
+    }
+  );
+}
+function Collection({
+  field,
+  children,
+  className
+}) {
+  const context = React2.useContext(ComponentContext);
+  const store = useComposerStore();
+  const composerEdit = useComposerEditMode();
+  const name = isFieldEnvelope(field) ? field.name : "";
+  const overlay = useComposerFieldValue(name, void 0);
+  const items = resolveCollectionItems(field, overlay);
+  const writeItems = (nextPlain) => {
+    if (name && store) {
+      const prefixed = name ? store.keys().filter((key) => key === name || key.startsWith(`${name}.`)) : [];
+      for (const key of prefixed) store.delete(key);
+      store.set(name, nextPlain);
+      for (const patch of collectFieldPatches(
+        toFieldEnvelopes({ [name]: nextPlain })
+      )) {
+        store.set(patch.name, patch.value);
+      }
+    }
+    commitComposerField(
+      context?.layoutNodeId,
+      context?.componentId,
+      name,
+      nextPlain
+    );
+  };
+  const plainItems = () => items.map((item, index) => {
+    const base = unwrapFieldsBag(item);
+    if (!store || !name) return base;
+    const out = { ...base };
+    for (const key of Object.keys(out)) {
+      const overlayValue = store.get(`${name}.${index}.${key}`);
+      if (overlayValue !== void 0) out[key] = overlayValue;
+    }
+    return out;
+  });
+  const addItem = () => writeItems([...plainItems(), {}]);
+  const removeItem = (index) => writeItems(plainItems().filter((_, i) => i !== index));
+  const moveItem = (index, delta) => {
+    const next = plainItems();
+    const target = index + delta;
+    if (target < 0 || target >= next.length) return;
+    const swap = next[index];
+    next[index] = next[target];
+    next[target] = swap;
+    writeItems(next);
+  };
+  if (!composerEdit) {
+    if (items.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { display: "contents" }, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(React2__default.default.Fragment, { children: children(item, index) }, item && typeof item === "object" ? `${name}.${index}` : index)) });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className,
+        "data-amplifyup-collection": name || void 0,
+        "data-amplifyup-collection-empty": "true",
+        "data-amplifyup-node-id": context?.layoutNodeId || void 0,
+        role: "button",
+        tabIndex: 0,
+        onMouseDown: (event) => event.stopPropagation(),
+        onClick: (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          addItem();
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            addItem();
+          }
+        },
+        style: {
+          display: "block",
+          cursor: "pointer",
+          outline: "1px dashed color-mix(in srgb, currentColor 40%, transparent)",
+          outlineOffset: 2,
+          minHeight: "3em",
+          opacity: 0.5
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(EmptySlotHint, { label: COMPOSER_EMPTY_COLLECTION_HINT, compact: true })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className,
+      "data-amplifyup-collection": name || void 0,
+      "data-amplifyup-node-id": context?.layoutNodeId || void 0,
+      style: { display: "flex", flexDirection: "column", gap: 8 },
+      children: [
+        items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            "data-amplifyup-collection-item": `${name}.${index}`,
+            style: {
+              display: "block",
+              outline: "1px dashed color-mix(in srgb, currentColor 28%, transparent)",
+              outlineOffset: 2,
+              padding: 8
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  style: {
+                    display: "flex",
+                    gap: 6,
+                    justifyContent: "flex-end",
+                    marginBottom: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      CollectionChromeButton,
+                      {
+                        label: "Move up",
+                        onClick: () => moveItem(index, -1)
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      CollectionChromeButton,
+                      {
+                        label: "Move down",
+                        onClick: () => moveItem(index, 1)
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      CollectionChromeButton,
+                      {
+                        label: "Remove",
+                        onClick: () => removeItem(index)
+                      }
+                    )
+                  ]
+                }
+              ),
+              children(item, index)
+            ]
+          },
+          `${name}.${index}`
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(CollectionChromeButton, { label: "Add item", onClick: addItem }) })
+      ]
+    }
+  );
+}
 function markdownToHtml(markdown) {
   try {
     const result = marked.marked.parse(markdown, { async: false });
@@ -5246,6 +5480,7 @@ function useAmplifyUp() {
 exports.AmplifyPageContent = AmplifyPageContent;
 exports.AmplifyRenderer = AmplifyRenderer;
 exports.AmplifyUpProvider = AmplifyUpProvider;
+exports.Collection = Collection;
 exports.ComponentContextProvider = ComponentContextProvider;
 exports.ComposerProvider = ComposerProvider;
 exports.Field = Field;