@usefillo/dom 0.12.1 → 0.14.0

package/dist/index.js

@@ -40,7 +40,8 @@ import {
   shouldAutoSubmit,
   syncCodeForm,
   toE164,
-  visibleFields
+  visibleFields,
+  visibleGroupChildren
 } from "@usefillo/core";
 var FIELD_INPUT_PREFIX = "fillo-";
 var domInstanceCounter = 0;
@@ -48,6 +49,10 @@ var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled])
 function focusableWithin(node) {
   return node.matches(FOCUSABLE_SELECTOR) ? node : node.querySelector(FOCUSABLE_SELECTOR);
 }
+function firstChildControl(card) {
+  const focusable = Array.from(card.querySelectorAll(FOCUSABLE_SELECTOR));
+  return focusable.find((node) => !node.closest(".fillo-group-instance-header")) ?? null;
+}
 function fieldIds(instanceId, fieldId) {
   const base = `${FIELD_INPUT_PREFIX}${instanceId}-${fieldId}`;
   return {
@@ -161,7 +166,8 @@ function shell(field, error, child, ids) {
     text: field.label,
     attrs: { id: ids.labelId, for: ids.inputId, "data-fillo": "label" }
   });
-  if (!field.required)
+  const optionalMarker = !field.required && !(field.kind === "repeating_group" && (field.minInstances ?? 1) > 0);
+  if (optionalMarker)
     label.appendChild(el("span", { className: "fillo-optional", text: " (optional)" }));
   wrap.appendChild(label);
   if (field.description)
@@ -1606,6 +1612,123 @@ function displayOptions(field) {
   const shuffled = order.flatMap((id) => byId.get(id) ?? []);
   return shuffled.length === field.options.length ? shuffled : field.options;
 }
+function groupInstances(context) {
+  const fresh = context.getValue?.() ?? context.value;
+  return Array.isArray(fresh) ? fresh : [];
+}
+function groupRenderedCount(field, stored) {
+  return Math.max(stored.length, field.minInstances ?? 1);
+}
+function groupFloor(field) {
+  return Math.max(field.minInstances ?? 1, 0);
+}
+function materializeGroupInstances(stored, count) {
+  const out = [...stored];
+  while (out.length < count) out.push({});
+  return out;
+}
+function repeatingGroup(context) {
+  const field = context.field;
+  if (field.kind !== "repeating_group") return null;
+  const ictx = context;
+  const announce = ictx.announce;
+  const instanceId = ictx.instanceId ?? "";
+  const item = field.itemLabel || field.label;
+  const stored = groupInstances(context);
+  const count = groupRenderedCount(field, stored);
+  const floor = groupFloor(field);
+  const wrap = el("div", {
+    className: "fillo-group",
+    attrs: { id: context.ids.inputId, "data-fillo": "control" }
+  });
+  applyFieldAria(wrap, field, context.error, context.ids, { requiredSupported: false });
+  for (let index = 0; index < count; index++) {
+    const instanceValues = stored[index] ?? {};
+    const heading = DEFAULT_FIELD_STRINGS.groupInstanceLabel(item, index + 1, count);
+    const card = el("div", {
+      className: "fillo-group-instance",
+      attrs: { role: "group", "aria-label": heading, tabindex: "-1" }
+    });
+    const header = el("div", { className: "fillo-group-instance-header" });
+    const removeBtn = el("button", {
+      className: "fillo-group-remove",
+      text: "\xD7",
+      attrs: {
+        type: "button",
+        "aria-label": DEFAULT_FIELD_STRINGS.groupRemoveLabel(item, index + 1)
+      }
+    });
+    const canRemove = count > floor;
+    removeBtn.toggleAttribute("disabled", !canRemove);
+    if (!canRemove) {
+      removeBtn.setAttribute("aria-disabled", "true");
+      removeBtn.setAttribute("title", `At least ${floor} ${floor === 1 ? "entry" : "entries"} required`);
+    }
+    removeBtn.addEventListener("click", () => {
+      if (count <= floor) return;
+      const next = materializeGroupInstances(groupInstances(context), count);
+      next.splice(index, 1);
+      context.setValue(next);
+      ictx.setGroupFocus?.({ groupId: field.id, cardIndex: index - 1, intoControl: false });
+      announce?.(DEFAULT_FIELD_STRINGS.groupInstanceRemoved(item, next.length));
+    });
+    appendChildren(header, [
+      el("p", { className: "fillo-group-instance-title", text: heading }),
+      removeBtn
+    ]);
+    card.appendChild(header);
+    for (const child of visibleGroupChildren(field, instanceValues)) {
+      const compoundId = `${field.id}.${index}.${child.id}`;
+      const childField = { ...child, id: compoundId };
+      const childIds = fieldIds(instanceId, compoundId);
+      const childSetValue = (value, options) => {
+        const next = materializeGroupInstances(groupInstances(context), count);
+        next[index] = { ...next[index] ?? {}, [child.id]: value };
+        context.setValue(next, options);
+      };
+      const childContext = {
+        field: childField,
+        value: instanceValues[child.id],
+        error: context.api.errors[compoundId],
+        ids: childIds,
+        api: context.api,
+        setValue: childSetValue,
+        getValue: () => groupInstances(context)[index]?.[child.id],
+        announce: ictx.announce,
+        announceAlert: ictx.announceAlert,
+        registerOverlay: ictx.registerOverlay,
+        activeOtherFields: ictx.activeOtherFields
+      };
+      const rendered = ictx.renderChildField?.(childContext) ?? defaultFieldRenderer(childContext);
+      if (rendered) card.appendChild(rendered);
+    }
+    wrap.appendChild(card);
+  }
+  const atMax = count >= field.maxInstances;
+  const addBtn = el("button", {
+    className: "fillo-group-add",
+    text: field.addLabel || DEFAULT_FIELD_STRINGS.groupAdd,
+    attrs: { type: "button" }
+  });
+  addBtn.toggleAttribute("disabled", atMax);
+  if (atMax) {
+    addBtn.setAttribute("aria-disabled", "true");
+    addBtn.setAttribute(
+      "title",
+      `Maximum ${field.maxInstances} ${field.maxInstances === 1 ? "entry" : "entries"}`
+    );
+  }
+  addBtn.addEventListener("click", () => {
+    if (count >= field.maxInstances) return;
+    const next = materializeGroupInstances(groupInstances(context), count);
+    next.push({});
+    context.setValue(next);
+    ictx.setGroupFocus?.({ groupId: field.id, cardIndex: next.length - 1, intoControl: true });
+    announce?.(DEFAULT_FIELD_STRINGS.groupInstanceAdded(item, next.length, next.length));
+  });
+  wrap.appendChild(addBtn);
+  return shell(field, context.error, wrap, context.ids);
+}
 var DEFAULT_COMPONENTS = {
   short_text: (ctx) => textInput("text", ctx),
   email: (ctx) => textInput("email", ctx),
@@ -1624,7 +1747,8 @@ var DEFAULT_COMPONENTS = {
   matrix,
   signature,
   file_upload: fileUpload,
-  calculated
+  calculated,
+  repeating_group: repeatingGroup
 };
 function defaultFieldRenderer(context) {
   if (context.field.kind === "hidden") return null;
@@ -1735,7 +1859,9 @@ var DomFormController = class {
   // exceed the limit") — plain text; announce() carries the live semantics.
   uploadNotices = /* @__PURE__ */ new Map();
   // Where to move focus on the next render: "error" after a failed submit/next,
-  // "page" after navigating, null → restore the pre-render active control.
+  // "page" after navigating, a GroupFocusIntent after a repeating-group
+  // Add/Remove (contract decision 9), null → restore the pre-render active
+  // control.
   focusIntent = null;
   // Teardown callbacks for open overlays (phone country popover) whose listeners
   // live on window/document and would otherwise leak past a re-render/unmount.
@@ -2527,8 +2653,32 @@ var DomFormController = class {
       }
       return;
     }
+    if (intent) {
+      this.applyGroupFocus(intent);
+      return;
+    }
     if (captured) this.restoreFocus(captured);
   }
+  /** Focus target after a repeating-group Add/Remove (contract decision 9),
+   *  resolved by POSITION against the tree render() just produced — unlike
+   *  ranking's restoreFocus precedent, the target card either didn't exist
+   *  yet at capture time (Add) or is a different card than whatever was
+   *  clicked (Remove), so a generic FocusDescriptor can't express either.
+   *  Falls back to the Add button, which always exists once a group has
+   *  rendered at all — never strands focus on <body>. */
+  applyGroupFocus(intent) {
+    const groupEl = Array.from(this.element.querySelectorAll("[data-field]")).find(
+      (node) => node.getAttribute("data-field") === intent.groupId
+    );
+    const cards = groupEl ? Array.from(groupEl.querySelectorAll(".fillo-group-instance")) : [];
+    const card = intent.cardIndex >= 0 ? cards[intent.cardIndex] : void 0;
+    if (card) {
+      const target = intent.intoControl ? firstChildControl(card) ?? card : card;
+      target.focus();
+      return;
+    }
+    groupEl?.querySelector(".fillo-group-add")?.focus();
+  }
   handleError(error) {
     if (this.destroyed) return;
     this.fatalError = error;
@@ -2950,6 +3100,28 @@ var DomFormController = class {
     }
     return form;
   }
+  /** The per-kind renderer for a field: host `components`/`customComponents`
+   *  overrides win, else the shipped default. Factored out of renderBlock so
+   *  a repeating group's synthesized child contexts (renderChildField below)
+   *  dispatch through the exact SAME rule instead of a parallel, override-
+   *  blind copy — "the existing per-block path" contract decision 8 asks
+   *  group instances to render through. */
+  fieldRenderer(field) {
+    return field.kind === "custom" ? this.options.customComponents?.[field.component] ?? this.options.components?.custom : this.options.components?.[field.kind] ?? defaultFieldRenderer;
+  }
+  /** Threaded to a repeating group's synthesized child contexts so they
+   *  render through this SAME dispatch instead of the module-level default
+   *  alone (which would silently skip host per-kind overrides). */
+  renderChildField = (context) => {
+    return this.fieldRenderer(context.field)?.(context) ?? null;
+  };
+  /** Threaded to a repeating group's Add/Remove buttons: records where focus
+   *  belongs once the write they just made reaches the deferred
+   *  queueRender() rebuild — applyFocus/applyGroupFocus consume it exactly
+   *  like the "page"/"error" intents set elsewhere in this class. */
+  setGroupFocus = (intent) => {
+    this.focusIntent = intent;
+  };
   renderBlock(block, api) {
     if (!isField(block)) return renderContent(block);
     const setValue = (value, options) => {
@@ -2982,10 +3154,12 @@ var DomFormController = class {
       uploadDisabledReason: this.options.renderOnly ? "render_only" : this.storageBlocked() ? "storage_unavailable" : void 0,
       storageFixUrl: this.storageBlocked() && this.devChrome() ? safeHttpUrl(this.syncWarningUrl) : null,
       announce: this.announce,
-      announceAlert: this.announceAlert
+      announceAlert: this.announceAlert,
+      instanceId: this.instanceId,
+      renderChildField: this.renderChildField,
+      setGroupFocus: this.setGroupFocus
     };
-    const renderer = block.kind === "custom" ? this.options.customComponents?.[block.component] ?? this.options.components?.custom : this.options.components?.[block.kind] ?? defaultFieldRenderer;
-    return renderer?.(context) ?? null;
+    return this.fieldRenderer(block)?.(context) ?? null;
   }
 };
 function renderContent(block) {