@ukiahinsure/a2ui-react-adapter 0.1.17 → 0.1.18

package/dist/index.js

@@ -10,7 +10,7 @@ import {
 } from "./chunk-AOBRTDAU.js";
 
 // src/adapter.ts
-import { basicCatalog } from "@a2ui/react/v0_9";
+import { basicCatalog as basicCatalog2 } from "@a2ui/react/v0_9";
 import {
   A2uiError,
   Catalog,
@@ -18,11 +18,44 @@ import {
   MessageProcessor
 } from "@a2ui/web_core/v0_9";
 
+// src/HospitalChoice.tsx
+import { useId } from "react";
+import { basicCatalog, createComponentImplementation } from "@a2ui/react/v0_9";
+import { ChoicePickerApi } from "@a2ui/web_core/v0_9/basic_catalog";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OriginalChoice = basicCatalog.components.get("ChoicePicker").render;
+var HospitalChoice = createComponentImplementation(ChoicePickerApi, ({ props, context, buildChild }) => {
+  const id = useId();
+  if (props.label !== "hospital_preference") {
+    return /* @__PURE__ */ jsx(OriginalChoice, { context, buildChild });
+  }
+  const selected = Array.isArray(props.value) ? props.value[0] ?? "" : "";
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: "Hospital preference" }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id,
+        "data-a2ui-field": "hospital_preference",
+        value: selected,
+        required: true,
+        style: { padding: "0.5rem", border: "var(--a2ui-border)", borderRadius: "var(--a2ui-border-radius)" },
+        onChange: (event) => props.setValue(event.currentTarget.value ? [event.currentTarget.value] : []),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "Choose Prefer or Avoid" }),
+          /* @__PURE__ */ jsx("option", { value: "Prefer", children: "Prefer" }),
+          /* @__PURE__ */ jsx("option", { value: "Avoid", children: "Avoid" })
+        ]
+      }
+    )
+  ] });
+});
+
 // src/DateTimeInput.tsx
-import { useId, useLayoutEffect, useRef, useState } from "react";
-import { createComponentImplementation } from "@a2ui/react/v0_9";
+import { useId as useId2, useLayoutEffect, useRef, useState } from "react";
+import { createComponentImplementation as createComponentImplementation2 } from "@a2ui/react/v0_9";
 import { DateTimeInputApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var inputStyle = {
   backgroundColor: "var(--a2ui-datetimeinput-background, var(--a2ui-color-input, #fff))",
   color: "var(--a2ui-datetimeinput-color, var(--a2ui-color-on-input, #333))",
@@ -50,7 +83,7 @@ function displayDate(value) {
   return iso ? `${iso.slice(5, 7)}/${iso.slice(8, 10)}/${iso.slice(0, 4)}` : value;
 }
 function DateOnlyInput(props) {
-  const id = useId();
+  const id = useId2();
   const [draft, setDraft] = useState(() => displayDate(props.value || ""));
   const [pickerOpen, setPickerOpen] = useState(false);
   const published = useRef(props.value || "");
@@ -76,10 +109,10 @@ function DateOnlyInput(props) {
     published.current = value;
     props.setValue(value);
   };
-  return /* @__PURE__ */ jsxs("div", { "data-a2ui-date-editor": "true", style: { display: "flex", flexDirection: "column", gap: "var(--a2ui-spacing-xs, 0.25rem)" }, children: [
-    props.label && /* @__PURE__ */ jsx("label", { htmlFor: id, style: labelStyle, children: props.label }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.25rem", position: "relative" }, children: [
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("div", { "data-a2ui-date-editor": "true", style: { display: "flex", flexDirection: "column", gap: "var(--a2ui-spacing-xs, 0.25rem)" }, children: [
+    props.label && /* @__PURE__ */ jsx2("label", { htmlFor: id, style: labelStyle, children: props.label }),
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: "0.25rem", position: "relative" }, children: [
+      /* @__PURE__ */ jsx2(
         "input",
         {
           ref: inputRef,
@@ -97,7 +130,7 @@ function DateOnlyInput(props) {
           style: { ...inputStyle, minWidth: 0, flex: 1 }
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(
         "button",
         {
           type: "button",
@@ -117,7 +150,7 @@ function DateOnlyInput(props) {
           children: "\u25A6"
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(
         "input",
         {
           ref: pickerRef,
@@ -140,15 +173,15 @@ function DateOnlyInput(props) {
   ] });
 }
 function NativeTimeInput(props) {
-  const id = useId();
+  const id = useId2();
   const inputRef = useRef(null);
   const initialValue = useRef(props.value || "");
   useLayoutEffect(() => {
     if (inputRef.current && inputRef.current.value !== (props.value || "")) inputRef.current.value = props.value || "";
   }, [props.value]);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    props.label && /* @__PURE__ */ jsx("label", { htmlFor: id, style: labelStyle, children: props.label }),
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    props.label && /* @__PURE__ */ jsx2("label", { htmlFor: id, style: labelStyle, children: props.label }),
+    /* @__PURE__ */ jsx2(
       "input",
       {
         ref: inputRef,
@@ -163,19 +196,19 @@ function NativeTimeInput(props) {
     )
   ] });
 }
-var DateTimeInput = createComponentImplementation(
+var DateTimeInput = createComponentImplementation2(
   DateTimeInputApi,
-  ({ props }) => props.enableDate && !props.enableTime ? /* @__PURE__ */ jsx(DateOnlyInput, { ...props }) : /* @__PURE__ */ jsx(NativeTimeInput, { ...props })
+  ({ props }) => props.enableDate && !props.enableTime ? /* @__PURE__ */ jsx2(DateOnlyInput, { ...props }) : /* @__PURE__ */ jsx2(NativeTimeInput, { ...props })
 );
 
 // src/adapter.ts
 var editableDateCatalog = new Catalog(
-  basicCatalog.id,
-  [...basicCatalog.components.values()].map(
-    (component) => component.name === DateTimeInput.name ? DateTimeInput : component
+  basicCatalog2.id,
+  [...basicCatalog2.components.values()].map(
+    (component) => component.name === DateTimeInput.name ? DateTimeInput : component.name === HospitalChoice.name ? HospitalChoice : component
   ),
-  [...basicCatalog.functions.values()],
-  basicCatalog.themeSchema
+  [...basicCatalog2.functions.values()],
+  basicCatalog2.themeSchema
 );
 var RENDERER_NAME = "a2ui_react_adapter";
 var RENDERER_VERSION = "0.1.0";
@@ -203,7 +236,7 @@ var A2UIClientAdapter = class {
   }
   /** Catalog ids this adapter will announce in capability envelopes. */
   get supportedCatalogIds() {
-    return [basicCatalog.id];
+    return [basicCatalog2.id];
   }
   get lastSeq() {
     return this.#lastSeq;
@@ -1714,13 +1747,13 @@ function classifyProcessingError(error) {
 // src/SurfaceHost.tsx
 import {
   Component,
-  useId as useId2,
+  useId as useId3,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef2,
   useSyncExternalStore
 } from "react";
 import { A2uiSurface } from "@a2ui/react/v0_9";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function A2UISurfaceHost({
   adapter,
   surfaceId,
@@ -1747,7 +1780,7 @@ function A2UISurfaceHost({
     readSessionSnapshot,
     readSessionSnapshot
   );
-  const generatedId = useId2().replaceAll(":", "");
+  const generatedId = useId3().replaceAll(":", "");
   const rootRef = useRef2(null);
   const lastFocusedState = useRef2(void 0);
   const lastViewedSection = useRef2(void 0);
@@ -1860,9 +1893,9 @@ function A2UISurfaceHost({
     version
   ]);
   if (surface === void 0) {
-    return noSurfaceFallback ?? /* @__PURE__ */ jsx2("div", { "data-a2ui-host": "no-surface", role: "status", "aria-live": "polite", children: "Your conversation continues by voice." });
+    return noSurfaceFallback ?? /* @__PURE__ */ jsx3("div", { "data-a2ui-host": "no-surface", role: "status", "aria-live": "polite", children: "Your conversation continues by voice." });
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       ref: rootRef,
@@ -1875,13 +1908,13 @@ function A2UISurfaceHost({
       "aria-busy": busy || void 0,
       "aria-disabled": disabled || busy || void 0,
       tabIndex: -1,
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(
         SurfaceErrorBoundary,
         {
           adapter,
           surface,
-          fallback: errorFallback ?? /* @__PURE__ */ jsx2("div", { "data-a2ui-host": "render-error", role: "alert", children: "This step can't be shown right now. Please continue by voice." }),
-          children: /* @__PURE__ */ jsx2(A2uiSurface, { surface })
+          fallback: errorFallback ?? /* @__PURE__ */ jsx3("div", { "data-a2ui-host": "render-error", role: "alert", children: "This step can't be shown right now. Please continue by voice." }),
+          children: /* @__PURE__ */ jsx3(A2uiSurface, { surface })
         },
         surface.id
       )
@@ -2175,7 +2208,7 @@ var SurfaceErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.failedSurfaceId !== void 0) {
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx3(
         "div",
         {
           "data-a2ui-error-boundary": "true",
@@ -2393,7 +2426,7 @@ function blockInvalidActionControls(root) {
   };
 }
 function firstInvalidInput(root) {
-  return [...root.querySelectorAll("input[data-a2ui-field]")].filter((input) => input.type !== "radio" && !isControlDisabled(input)).find((input) => !input.checkValidity());
+  return [...root.querySelectorAll("input[data-a2ui-field], select[data-a2ui-field]")].filter((input) => input.type !== "radio" && !isControlDisabled(input)).find((input) => !input.checkValidity());
 }
 function findFieldControls(root, field) {
   const labels = [...root.querySelectorAll("label")];
@@ -2867,11 +2900,23 @@ function renderSavedLoopEditInputs(editButton, row, orderedFields, summaryFields
       continue;
     }
     let input = value.querySelector(
-      "input[data-a2ui-loop-edit-input='true']"
+      "[data-a2ui-loop-edit-input='true']"
     );
     if (input === null) {
-      input = row.ownerDocument.createElement("input");
-      input.type = "text";
+      if (fieldName === "hospital_preference") {
+        const select = row.ownerDocument.createElement("select");
+        for (const choice of ["", "Prefer", "Avoid"]) {
+          const option = row.ownerDocument.createElement("option");
+          option.value = choice;
+          option.textContent = choice || "Choose Prefer or Avoid";
+          select.appendChild(option);
+        }
+        select.required = true;
+        input = select;
+      } else {
+        input = row.ownerDocument.createElement("input");
+        input.type = "text";
+      }
       input.name = fieldName;
       input.setAttribute("aria-label", displayFieldLabel(fieldName));
       input.dataset.a2uiLoopEditInput = "true";
@@ -2897,7 +2942,7 @@ function renderSavedLoopEditInputs(editButton, row, orderedFields, summaryFields
   setText(editButton, "Save");
   if (focusFirstInput) {
     row.querySelector(
-      "input[data-a2ui-loop-edit-input='true']"
+      "[data-a2ui-loop-edit-input='true']"
     )?.focus();
   }
 }
@@ -2919,7 +2964,7 @@ function savedLoopRowInputValues(orderedFields, summaryFields) {
   orderedFields.forEach((field, index) => {
     const fieldName = summaryFields[index];
     const input = field.querySelector(
-      "input[data-a2ui-loop-edit-input='true']"
+      "[data-a2ui-loop-edit-input='true']"
     );
     const value = field.querySelector(
       "[data-a2ui-loop-cell='value']"
@@ -3001,7 +3046,7 @@ function normalizedLoopSummaryFields(fields) {
   if (hasPharmacyFields) {
     return pharmacyFields.filter((field) => withoutInternal.includes(field));
   }
-  const hospitalFields = ["hospital_name", "hospital_city_state"];
+  const hospitalFields = ["hospital_name", "hospital_city_state", "hospital_preference"];
   const hasHospitalFields = hospitalFields.some(
     (field) => withoutInternal.includes(field)
   );
@@ -3117,7 +3162,8 @@ var LOOP_FIELD_LABELS = /* @__PURE__ */ new Map([
   ["pharmacy type", "pharmacy_type"],
   ["pharmacy address", "pharmacy_address"],
   ["hospital name", "hospital_name"],
-  ["hospital city state", "hospital_city_state"]
+  ["hospital city state", "hospital_city_state"],
+  ["hospital preference", "hospital_preference"]
 ]);
 function isSavedLoopSummary(element) {
   if (element.children.length > 0) {