@amplifyup/sdk 0.1.62 → 0.1.63

package/dist/react.mjs

@@ -428,6 +428,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;
 }
@@ -444,9 +459,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;
@@ -455,6 +482,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;
@@ -481,6 +518,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)) {
@@ -489,9 +534,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;
@@ -504,6 +557,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 };
@@ -3617,6 +3701,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 = createContext(null);
 function matchesNode(eventNodeId, layoutNodeId) {
@@ -3637,6 +3731,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)) {
@@ -3691,6 +3792,9 @@ function useComposerFieldValue(name, fallback) {
   const overlay = useSyncExternalStore(subscribe, getSnapshot, () => void 0);
   return overlay !== void 0 ? overlay : fallback;
 }
+function useComposerStore() {
+  return useContext(ComposerStoreContext);
+}
 function MaybeComposerProvider({
   enabled,
   layoutNodeId,
@@ -4354,6 +4458,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 = createContext(null);
 function ComponentContextProvider({
   children,
@@ -4455,10 +4574,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");
@@ -4493,17 +4608,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 useSyncExternalStore(
     subscribeComposerEdit,
     isComposerEditMode,
-    () => false
+    getComposerEditModeServer
   );
 }
 function useBoundField(field, value, name, component) {
@@ -4571,23 +4680,20 @@ function ComposerInlineField({
   name,
   value,
   className,
-  render,
   layoutNodeId,
   componentId,
   rich = false
 }) {
-  const [editing, setEditing] = useState(false);
   const [focused, setFocused] = useState(false);
   const elRef = 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;
   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"
@@ -4596,24 +4702,10 @@ function ComposerInlineField({
     }
     const next = idleDisplay || "";
     if (el.textContent !== next) el.textContent = next;
-  }, [idleDisplay, showRendered]);
-  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;
@@ -4647,7 +4739,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,
@@ -4662,9 +4754,6 @@ function ComposerInlineField({
           openRichEditor(event);
           return;
         }
-        if (render) {
-          setEditing(true);
-        }
       },
       onFocus: () => {
         if (!isComposerEditMode()) return;
@@ -4678,7 +4767,6 @@ function ComposerInlineField({
           el.textContent = "";
           placeCaret(el, true);
         }
-        if (render) setEditing(true);
       },
       onBlur: rich ? void 0 : finishEdit,
       onKeyDown: (event) => {
@@ -4690,7 +4778,6 @@ function ComposerInlineField({
         if (event.key === "Escape") {
           event.preventDefault();
           if (elRef.current) elRef.current.textContent = idleDisplay || "";
-          setEditing(false);
           setFocused(false);
           event.currentTarget.blur();
         }
@@ -4704,8 +4791,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
+      }
     }
   );
 }
@@ -4784,35 +4870,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__ */ 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__ */ 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 = useContext(ComponentContext);
   const composerEdit = useComposerEditMode();
   const hasField = isFieldEnvelope(field);
@@ -4822,6 +4881,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__ */ jsx(
@@ -4830,7 +4892,6 @@ function Field(props) {
         name: editName,
         value: fieldValue,
         className,
-        render: empty ? void 0 : render,
         layoutNodeId: context.layoutNodeId,
         componentId: context.componentId,
         rich: looksLikeRichCanvasField(editName)
@@ -4838,17 +4899,190 @@ function Field(props) {
     );
   }
   if (empty) return null;
-  if (render) {
-    return /* @__PURE__ */ 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__ */ jsx("span", { className, children: text });
 }
+var COMPOSER_EMPTY_COLLECTION_HINT = "Click here to add an item";
+function CollectionChromeButton({
+  label,
+  onClick
+}) {
+  return /* @__PURE__ */ 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 = 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__ */ jsx("span", { className, style: { display: "contents" }, children: items.map((item, index) => /* @__PURE__ */ jsx(React2.Fragment, { children: children(item, index) }, item && typeof item === "object" ? `${name}.${index}` : index)) });
+  }
+  if (items.length === 0) {
+    return /* @__PURE__ */ 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__ */ jsx(EmptySlotHint, { label: COMPOSER_EMPTY_COLLECTION_HINT, compact: true })
+      }
+    );
+  }
+  return /* @__PURE__ */ 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__ */ 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__ */ jsxs(
+                "span",
+                {
+                  style: {
+                    display: "flex",
+                    gap: 6,
+                    justifyContent: "flex-end",
+                    marginBottom: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      CollectionChromeButton,
+                      {
+                        label: "Move up",
+                        onClick: () => moveItem(index, -1)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      CollectionChromeButton,
+                      {
+                        label: "Move down",
+                        onClick: () => moveItem(index, 1)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      CollectionChromeButton,
+                      {
+                        label: "Remove",
+                        onClick: () => removeItem(index)
+                      }
+                    )
+                  ]
+                }
+              ),
+              children(item, index)
+            ]
+          },
+          `${name}.${index}`
+        )),
+        /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(CollectionChromeButton, { label: "Add item", onClick: addItem }) })
+      ]
+    }
+  );
+}
 function markdownToHtml(markdown) {
   try {
     const result = marked.parse(markdown, { async: false });
@@ -5237,6 +5471,6 @@ function useAmplifyUp() {
   return context;
 }
 
-export { AmplifyPageContent, AmplifyRenderer, AmplifyUpProvider, ComponentContextProvider, ComposerProvider, Field, Image, MaybeComposerProvider, QueryContentError, RichText, SelectVariantsError, Slot, isBrandedFields, isComposerPreview, isFieldEnvelope, isPreviewRequest, isWorkingContentRequest, nextPageSpec, queryContent, searchSpec, selectVariants, toFieldEnvelopes, useAmplifyUp };
+export { AmplifyPageContent, AmplifyRenderer, AmplifyUpProvider, Collection, ComponentContextProvider, ComposerProvider, Field, Image, MaybeComposerProvider, QueryContentError, RichText, SelectVariantsError, Slot, isBrandedFields, isComposerPreview, isFieldEnvelope, isPreviewRequest, isWorkingContentRequest, nextPageSpec, queryContent, searchSpec, selectVariants, toFieldEnvelopes, useAmplifyUp };
 //# sourceMappingURL=react.mjs.map
 //# sourceMappingURL=react.mjs.map