@ukiahinsure/a2ui-react-adapter 0.1.4 → 0.1.5

package/dist/index.js

@@ -73,6 +73,10 @@ var A2UIClientAdapter = class {
     const values = {};
     for (const field of fields) {
       const value = surface.dataModel.get(fieldPointer(field));
+      if (Array.isArray(value) && value.length === 1 && isFieldValue(value[0])) {
+        values[field] = value[0];
+        continue;
+      }
       if (!isFieldValue(value)) {
         return null;
       }
@@ -89,8 +93,9 @@ var A2UIClientAdapter = class {
     let changed = false;
     for (const [field, value] of Object.entries(values)) {
       const path = fieldPointer(field);
-      if (!Object.is(surface.dataModel.get(path), value)) {
-        surface.dataModel.set(path, value);
+      const next = this.#dataModelValueForField(surfaceId, field, value);
+      if (!fieldValueEquivalent(surface.dataModel.get(path), next)) {
+        surface.dataModel.set(path, next);
         changed = true;
       }
     }
@@ -99,6 +104,22 @@ var A2UIClientAdapter = class {
     }
     return true;
   }
+  #dataModelValueForField(surfaceId, field, value) {
+    const descriptor = this.#fieldDescriptor(surfaceId, field);
+    if (descriptor?.control === "choice" && typeof value === "string" && value.length > 0) {
+      return [value];
+    }
+    return value;
+  }
+  #fieldDescriptor(surfaceId, field) {
+    const structure = this.#structureBySurface.get(surfaceId);
+    if (structure === void 0) {
+      return void 0;
+    }
+    return [...structure.fieldsByComponent.values()].find(
+      (descriptor) => descriptor.field === field
+    );
+  }
   /**
    * Apply one validated server envelope. Returns false for duplicates and
    * out-of-order deliveries (the per-session `seq` guard) and for envelopes
@@ -189,11 +210,20 @@ var A2UIClientAdapter = class {
       );
       return false;
     }
-    const messages = envelope.kind === "snapshot" ? validated.data : mergePersistedListRowsIntoMessages(
+    const rawMessages = envelope.kind === "snapshot" ? validated.data : mergePersistedListRowsIntoMessages(
       validated.data,
       envelope.surfaceId,
       this.#persistedListRowsByPath
     );
+    const nextStructure = updateSurfaceStructures(
+      rawMessages,
+      envelope.kind === "snapshot" ? /* @__PURE__ */ new Map() : cloneSurfaceStructures(this.#structureBySurface)
+    );
+    const messages = normalizeChoiceValuesInMessages(
+      rawMessages,
+      envelope.surfaceId,
+      nextStructure.get(envelope.surfaceId)
+    );
     const candidate = this.#createProcessor();
     try {
       if (envelope.kind !== "snapshot") {
@@ -212,10 +242,6 @@ var A2UIClientAdapter = class {
       return false;
     }
     const previous = this.#processor;
-    const nextStructure = updateSurfaceStructures(
-      messages,
-      envelope.kind === "snapshot" ? /* @__PURE__ */ new Map() : cloneSurfaceStructures(this.#structureBySurface)
-    );
     pruneSurfaceStructures(nextStructure, candidate);
     if (!fieldInteractionBindingsTrusted(
       envelope.fieldInteractions ?? [],
@@ -435,6 +461,59 @@ function fieldDescriptor(component) {
     ...typeof component.max === "string" ? { max: component.max } : {}
   };
 }
+function normalizeChoiceValuesInMessages(messages, surfaceId, structure) {
+  if (structure === void 0) {
+    return [...messages];
+  }
+  const choiceFields = new Set(
+    [...structure.fieldsByComponent.values()].filter((field) => field.control === "choice").map((field) => field.field)
+  );
+  if (choiceFields.size === 0) {
+    return [...messages];
+  }
+  return messages.map((message) => {
+    if (!isRecord(message) || !isRecord(message.updateDataModel)) {
+      return message;
+    }
+    const update = message.updateDataModel;
+    if (update.surfaceId !== surfaceId) {
+      return message;
+    }
+    const path = typeof update.path === "string" ? update.path : "/";
+    if (path === "/" && isRecord(update.value)) {
+      const value = cloneJsonRecord(update.value);
+      for (const field2 of choiceFields) {
+        if (Object.hasOwn(value, field2)) {
+          value[field2] = choiceDataModelValue(value[field2]);
+        }
+      }
+      return {
+        ...message,
+        updateDataModel: { ...update, value }
+      };
+    }
+    const field = fieldFromPointer(path);
+    if (field !== void 0 && choiceFields.has(field)) {
+      return {
+        ...message,
+        updateDataModel: {
+          ...update,
+          value: choiceDataModelValue(update.value)
+        }
+      };
+    }
+    return message;
+  });
+}
+function choiceDataModelValue(value) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    return value.length === 0 ? [] : [value];
+  }
+  return value;
+}
 function hasRequiredCheck(value) {
   return Array.isArray(value) && value.some(
     (check) => isRecord(check) && isRecord(check.condition) && check.condition.call === "required"
@@ -602,6 +681,12 @@ function cloneJsonArray(value) {
 function isFieldValue(value) {
   return value === null || typeof value === "string" || typeof value === "boolean" || typeof value === "number" && Number.isFinite(value);
 }
+function fieldValueEquivalent(left, right) {
+  if (Array.isArray(left) && Array.isArray(right)) {
+    return left.length === right.length && left.every((value, index) => Object.is(value, right[index]));
+  }
+  return Object.is(left, right);
+}
 function tabDescriptors(component) {
   if (component.component !== "Tabs" || !isNonEmptyString(component.id) || !Array.isArray(component.tabs)) {
     return [];
@@ -711,6 +796,7 @@ function A2UISurfaceHost({
           resolvedSurfaceMetadata?.fieldInteractions ?? []
         ),
         annotateActionControls(root),
+        blockInvalidActionControls(root),
         setPendingGroupsDisabled(
           root,
           new Set(editing.pendingGroupIds)
@@ -1104,6 +1190,10 @@ function annotateFields(root, fields, invalidFields, validationSummaryId) {
         }
       }
       applyControlValidationAttributes(control, field);
+      const cleanup = attachControlValidationBehavior(control, field);
+      if (cleanup !== void 0) {
+        matchCleanups.push(cleanup);
+      }
     }
   }
   return () => {
@@ -1133,13 +1223,90 @@ function applyControlValidationAttributes(control, field) {
   if (field.max !== void 0) {
     control.setAttribute("max", field.max);
   }
-  if (field.validationRegexp === "^[2-9]\\d{2}[2-9]\\d{6}$") {
+  if (isPhoneValidationRegexp(field.validationRegexp)) {
     control.setAttribute("inputmode", "numeric");
     control.setAttribute("maxlength", "10");
-  } else if (field.validationRegexp === "^(?!00000$)\\d{5}$") {
+  } else if (isZipValidationRegexp(field.validationRegexp)) {
     control.setAttribute("inputmode", "numeric");
     control.setAttribute("maxlength", "5");
+  } else if (isIntegerValidationRegexp(field.validationRegexp)) {
+    control.setAttribute("inputmode", "numeric");
+    control.setAttribute("maxlength", "2");
+  }
+}
+function attachControlValidationBehavior(control, field) {
+  const maxLength = numericMaxLengthForField(field);
+  if (maxLength === void 0 || !isTextInput(control)) {
+    return void 0;
+  }
+  const sanitize = () => {
+    const next = control.value.replace(/\D/g, "").slice(0, maxLength);
+    if (control.value !== next) {
+      control.value = next;
+      control.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  };
+  control.addEventListener("input", sanitize);
+  control.addEventListener("change", sanitize);
+  sanitize();
+  return () => {
+    control.removeEventListener("input", sanitize);
+    control.removeEventListener("change", sanitize);
+  };
+}
+function numericMaxLengthForField(field) {
+  if (isPhoneValidationRegexp(field.validationRegexp)) {
+    return 10;
+  }
+  if (isZipValidationRegexp(field.validationRegexp)) {
+    return 5;
+  }
+  if (isIntegerValidationRegexp(field.validationRegexp)) {
+    return 2;
   }
+  return void 0;
+}
+function isPhoneValidationRegexp(pattern) {
+  return pattern === "^[2-9]\\d{2}[2-9]\\d{6}$" || pattern?.startsWith("^(?:") === true && pattern.endsWith(")[2-9]\\d{6}$");
+}
+function isZipValidationRegexp(pattern) {
+  return pattern === "^(?!00000$)\\d{5}$" || pattern === "^(?:00(?:50[1-9]|5[1-9][0-9]|[6-9][0-9]{2})|0[1-9][0-9]{3}|[1-8][0-9]{4}|9[0-8][0-9]{3}|99[0-8][0-9]{2}|999[0-4][0-9]|99950)$";
+}
+function isIntegerValidationRegexp(pattern) {
+  return pattern === "^\\d{1,2}$";
+}
+function isTextInput(element) {
+  return element instanceof HTMLInputElement && element.type !== "radio";
+}
+function blockInvalidActionControls(root) {
+  const blockIfInvalid = (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+    const action = target.closest("[data-a2ui-action='true']");
+    if (action === null || !root.contains(action)) {
+      return;
+    }
+    const invalid2 = firstInvalidInput(root);
+    if (invalid2 === void 0) {
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    invalid2.setAttribute("aria-invalid", "true");
+    invalid2.reportValidity();
+    invalid2.focus();
+  };
+  root.addEventListener("click", blockIfInvalid, true);
+  root.addEventListener("keydown", blockIfInvalid, true);
+  return () => {
+    root.removeEventListener("click", blockIfInvalid, true);
+    root.removeEventListener("keydown", blockIfInvalid, true);
+  };
+}
+function firstInvalidInput(root) {
+  return [...root.querySelectorAll("input[data-a2ui-field]")].filter((input) => input.type !== "radio" && !isControlDisabled(input)).find((input) => !input.checkValidity());
 }
 function findFieldControls(root, field) {
   const labels = [...root.querySelectorAll("label")];