@ukiahinsure/a2ui-react-adapter 0.1.20 → 0.1.21

package/dist/index.js

@@ -90,6 +90,29 @@ 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 || ""));
@@ -139,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
+          }
+        )
+      ] })
     ] })
   ] });
 }