@ukiahinsure/a2ui-react-adapter 0.1.19 → 0.1.21

package/dist/index.js

@@ -78,10 +78,41 @@ function parseDateDraft(raw) {
   if (year < 1 || month < 1 || month > 12 || day < 1 || day > days[month - 1]) return null;
   return `${String(year).padStart(4, "0")}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
 }
+function formatDateDigits(raw) {
+  if (!/^(\d*|\d{2}\/\d*|\d{2}\/\d{2}\/\d*)$/.test(raw)) return raw;
+  const digits = raw.replace(/\D/g, "").slice(0, 8);
+  const typedSlash = raw.endsWith("/") && (digits.length === 2 || digits.length === 4) ? "/" : "";
+  if (digits.length <= 2) return digits + typedSlash;
+  if (digits.length <= 4) return `${digits.slice(0, 2)}/${digits.slice(2)}${typedSlash}`;
+  return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
+}
 function displayDate(value) {
   const iso = parseDateDraft(value);
   return iso ? `${iso.slice(5, 7)}/${iso.slice(8, 10)}/${iso.slice(0, 4)}` : value;
 }
+var calendarOverlayStyle = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  margin: 0,
+  padding: 0,
+  border: 0,
+  opacity: 0,
+  cursor: "pointer",
+  fontSize: 16,
+  boxSizing: "border-box"
+};
+function openPicker(picker, fallback) {
+  if (picker && typeof picker.showPicker === "function") {
+    try {
+      picker.showPicker();
+      return;
+    } catch {
+    }
+  }
+  fallback?.();
+}
 function DateOnlyInput(props) {
   const id = useId2();
   const [draft, setDraft] = useState(() => displayDate(props.value || ""));
@@ -103,7 +134,8 @@ function DateOnlyInput(props) {
     const message = draft.trim() && !parsed ? "Enter a valid date in MM/DD/YYYY format." : parsed && min && parsed < min ? `Enter a date on or after ${displayDate(min)}.` : parsed && max && parsed > max ? `Enter a date on or before ${displayDate(max)}.` : "";
     inputRef.current?.setCustomValidity(message);
   }, [draft, parsed, min, max]);
-  const update = (raw) => {
+  const update = (typed) => {
+    const raw = formatDateDigits(typed);
     setDraft(raw);
     const value = parseDateDraft(raw) || "";
     published.current = value;
@@ -130,45 +162,38 @@ function DateOnlyInput(props) {
           style: { ...inputStyle, minWidth: 0, flex: 1 }
         }
       ),
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          "aria-label": `Choose ${props.label || "date"} from calendar`,
-          style: inputStyle,
-          onClick: () => {
-            const picker = pickerRef.current;
-            if (picker && typeof picker.showPicker === "function") {
-              try {
-                picker.showPicker();
-                return;
-              } catch {
-              }
-            }
-            setPickerOpen(true);
-          },
-          children: "\u25A6"
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          ref: pickerRef,
-          type: "date",
-          "aria-label": `${props.label || "Date"} calendar`,
-          tabIndex: pickerOpen ? 0 : -1,
-          "aria-hidden": !pickerOpen,
-          "data-a2ui-calendar-input": "true",
-          value: parsed || "",
-          min,
-          max,
-          onChange: (event) => {
-            update(displayDate(event.currentTarget.value));
-            setPickerOpen(false);
-          },
-          style: pickerOpen ? inputStyle : { position: "absolute", opacity: 0, pointerEvents: "none", width: 1, height: 1, bottom: 0, right: 0 }
-        }
-      )
+      /* @__PURE__ */ jsxs2("span", { style: { position: "relative", display: "flex" }, children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Choose ${props.label || "date"} from calendar`,
+            style: inputStyle,
+            onClick: () => openPicker(pickerRef.current, () => setPickerOpen(true)),
+            children: "\u25A6"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref: pickerRef,
+            type: "date",
+            "aria-label": `${props.label || "Date"} calendar`,
+            tabIndex: pickerOpen ? 0 : -1,
+            "aria-hidden": !pickerOpen,
+            "data-a2ui-calendar-input": "true",
+            value: parsed || "",
+            min,
+            max,
+            onClick: (event) => openPicker(event.currentTarget),
+            onChange: (event) => {
+              update(displayDate(event.currentTarget.value));
+              setPickerOpen(false);
+            },
+            style: pickerOpen ? inputStyle : calendarOverlayStyle
+          }
+        )
+      ] })
     ] })
   ] });
 }
@@ -1831,7 +1856,7 @@ function A2UISurfaceHost({
   const lastViewedSection = useRef2(void 0);
   const lastValidationKey = useRef2("");
   const pendingFieldUpdates = useRef2(/* @__PURE__ */ new Map());
-  const lastCurrentGroupId = useRef2(void 0);
+  const lastQuestionKey = useRef2(void 0);
   const onAgentUpdateRef = useRef2(onAgentUpdate);
   onAgentUpdateRef.current = onAgentUpdate;
   const resolvedSurfaceMetadata = surfaceMetadata ?? controllerSnapshot?.surface ?? null;
@@ -1902,9 +1927,11 @@ function A2UISurfaceHost({
       const currentGroup = resolvedSurfaceMetadata?.fieldInteractions.find(
         (group) => group.mode === "current"
       );
-      const previousGroupId = lastCurrentGroupId.current;
-      if (currentGroup !== void 0) {
-        lastCurrentGroupId.current = currentGroup.groupId;
+      const activeStateId = resolvedSurfaceMetadata?.activeStateId;
+      const questionKey = currentGroup?.groupId ?? (activeStateId == null ? void 0 : `state:${activeStateId}`);
+      const previousQuestionKey = lastQuestionKey.current;
+      if (questionKey !== void 0) {
+        lastQuestionKey.current = questionKey;
       }
       const report = onAgentUpdateRef.current;
       if (report === void 0) {
@@ -1918,14 +1945,14 @@ function A2UISurfaceHost({
           element: agentUpdateElement(root, changedFields, structure.fields)
         });
       }
-      if (currentGroup !== void 0 && previousGroupId !== void 0 && currentGroup.groupId !== previousGroupId) {
-        const fields = currentGroup.fields.map((binding) => binding.field);
+      if (questionKey !== void 0 && previousQuestionKey !== void 0 && questionKey !== previousQuestionKey) {
+        const fields = currentGroup?.fields.map((binding) => binding.field) ?? [];
         report({
           reason: "current-group",
           surfaceId: surface.id,
           fields,
-          groupId: currentGroup.groupId,
-          element: agentUpdateElement(root, fields, structure.fields)
+          ...currentGroup === void 0 ? {} : { groupId: currentGroup.groupId },
+          element: agentUpdateElement(root, fields, structure.fields) ?? currentQuestionElement(root)
         });
       }
     };
@@ -2070,15 +2097,33 @@ function agentUpdateElement(root, fields, descriptors) {
     if (descriptor !== void 0) {
       labels.add(descriptor.label);
     }
-    const label = [
-      ...root.querySelectorAll("label, strong, legend")
-    ].find((candidate) => labels.has(candidate.textContent?.trim() ?? ""));
+    const label = [...root.querySelectorAll("*")].find(
+      (candidate) => candidate.childElementCount === 0 && labels.has(candidate.textContent?.trim() ?? "")
+    );
     if (label?.parentElement != null && root.contains(label.parentElement)) {
       return label.parentElement;
     }
   }
   return void 0;
 }
+function currentQuestionElement(root) {
+  const action = [
+    ...root.querySelectorAll("[data-a2ui-action='true']")
+  ].find(
+    (candidate) => candidate.dataset.a2uiActionLabel !== "skip" && candidate.closest("[data-a2ui-loop-row]") === null
+  );
+  if (action === void 0) {
+    return void 0;
+  }
+  let container = action.parentElement;
+  if (container !== null && textOf(container) === [...container.querySelectorAll("button")].map(textOf).join("")) {
+    container = container.parentElement;
+  }
+  return container !== null && container !== root && root.contains(container) ? container : action;
+}
+function textOf(element) {
+  return (element.textContent ?? "").replace(/\s+/g, "");
+}
 function isControlDisabled(control) {
   return control.getAttribute("aria-disabled") === "true" || "disabled" in control && control.disabled === true;
 }