@ukiahinsure/a2ui-react-adapter 0.1.14 → 0.1.16

package/dist/index.js

@@ -19,48 +19,153 @@ import {
 } from "@a2ui/web_core/v0_9";
 
 // src/DateTimeInput.tsx
-import { useId, useLayoutEffect, useRef } from "react";
+import { useId, useLayoutEffect, useRef, useState } from "react";
 import { createComponentImplementation } from "@a2ui/react/v0_9";
 import { DateTimeInputApi } from "@a2ui/web_core/v0_9/basic_catalog";
 import { jsx, jsxs } from "react/jsx-runtime";
-var DateTimeInput = createComponentImplementation(
-  DateTimeInputApi,
-  ({ props }) => {
-    const id = useId();
-    const inputRef = useRef(null);
-    const initialValue = useRef(props.value || "");
-    const type = props.enableDate && !props.enableTime ? "date" : !props.enableDate && props.enableTime ? "time" : "datetime-local";
-    useLayoutEffect(() => {
-      const input = inputRef.current;
-      if (input && input.ownerDocument.activeElement !== input && input.value !== (props.value || "")) {
-        input.value = props.value || "";
-      }
-    }, [props.value]);
-    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--a2ui-spacing-xs, 0.25rem)" }, children: [
-      props.label && /* @__PURE__ */ jsx("label", { htmlFor: id, style: { fontSize: "var(--a2ui-label-font-size, var(--a2ui-font-size-s))", fontWeight: "bold" }, children: props.label }),
+var inputStyle = {
+  backgroundColor: "var(--a2ui-datetimeinput-background, var(--a2ui-color-input, #fff))",
+  color: "var(--a2ui-datetimeinput-color, var(--a2ui-color-on-input, #333))",
+  border: "var(--a2ui-datetimeinput-border, var(--a2ui-border))",
+  borderRadius: "var(--a2ui-datetimeinput-border-radius, var(--a2ui-border-radius))",
+  padding: "var(--a2ui-datetimeinput-padding, var(--a2ui-spacing-s))",
+  boxSizing: "border-box"
+};
+var labelStyle = { fontSize: "var(--a2ui-label-font-size, var(--a2ui-font-size-s))", fontWeight: "bold" };
+function parseDateDraft(raw) {
+  const value = raw.trim();
+  const iso = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  const us = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/.exec(value);
+  if (!iso && !us) return null;
+  const year = Number(iso ? iso[1] : us[3]);
+  const month = Number(iso ? iso[2] : us[1]);
+  const day = Number(iso ? iso[3] : us[2]);
+  const leap = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+  const days = [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+  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 displayDate(value) {
+  const iso = parseDateDraft(value);
+  return iso ? `${iso.slice(5, 7)}/${iso.slice(8, 10)}/${iso.slice(0, 4)}` : value;
+}
+function DateOnlyInput(props) {
+  const id = useId();
+  const [draft, setDraft] = useState(() => displayDate(props.value || ""));
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const published = useRef(props.value || "");
+  const inputRef = useRef(null);
+  const pickerRef = useRef(null);
+  const min = typeof props.min === "string" ? props.min : void 0;
+  const max = typeof props.max === "string" ? props.max : void 0;
+  const parsed = parseDateDraft(draft);
+  useLayoutEffect(() => {
+    const incoming = props.value || "";
+    if (incoming !== published.current) {
+      published.current = incoming;
+      setDraft(displayDate(incoming));
+    }
+  }, [props.value]);
+  useLayoutEffect(() => {
+    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) => {
+    setDraft(raw);
+    const value = parseDateDraft(raw) || "";
+    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(
         "input",
         {
           ref: inputRef,
           id,
-          type,
-          "data-a2ui-native-date-draft": "true",
-          defaultValue: initialValue.current,
-          onChange: (event) => props.setValue(event.currentTarget.value),
-          min: typeof props.min === "string" ? props.min : void 0,
-          max: typeof props.max === "string" ? props.max : void 0,
-          style: {
-            backgroundColor: "var(--a2ui-datetimeinput-background, var(--a2ui-color-input, #fff))",
-            color: "var(--a2ui-datetimeinput-color, var(--a2ui-color-on-input, #333))",
-            border: "var(--a2ui-datetimeinput-border, var(--a2ui-border))",
-            borderRadius: "var(--a2ui-datetimeinput-border-radius, var(--a2ui-border-radius))",
-            padding: "var(--a2ui-datetimeinput-padding, var(--a2ui-spacing-s))",
-            boxSizing: "border-box"
-          }
+          type: "text",
+          inputMode: "numeric",
+          autoComplete: "off",
+          "data-a2ui-date-text-draft": "true",
+          placeholder: "MM/DD/YYYY",
+          value: draft,
+          onChange: (event) => update(event.currentTarget.value),
+          onBlur: () => {
+            if (parsed) setDraft(displayDate(parsed));
+          },
+          style: { ...inputStyle, minWidth: 0, flex: 1 }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "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__ */ jsx(
+        "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 }
         }
       )
-    ] });
-  }
+    ] })
+  ] });
+}
+function NativeTimeInput(props) {
+  const id = useId();
+  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(
+      "input",
+      {
+        ref: inputRef,
+        id,
+        type: !props.enableDate && props.enableTime ? "time" : "datetime-local",
+        defaultValue: initialValue.current,
+        onChange: (event) => props.setValue(event.currentTarget.value),
+        min: typeof props.min === "string" ? props.min : void 0,
+        max: typeof props.max === "string" ? props.max : void 0,
+        style: inputStyle
+      }
+    )
+  ] });
+}
+var DateTimeInput = createComponentImplementation(
+  DateTimeInputApi,
+  ({ props }) => props.enableDate && !props.enableTime ? /* @__PURE__ */ jsx(DateOnlyInput, { ...props }) : /* @__PURE__ */ jsx(NativeTimeInput, { ...props })
 );
 
 // src/adapter.ts
@@ -1859,14 +1964,18 @@ function bindFieldInteractionGroups(root, groups, editing, controller) {
     const field = control.dataset.a2uiField;
     const group = field === void 0 ? void 0 : groupByField.get(field);
     if (group !== void 0) {
-      originalGroupAttributes.set(control, {
-        groupId: control.dataset.a2uiGroupId,
-        groupMode: control.dataset.a2uiGroupMode,
-        editState: control.dataset.a2uiEditState
-      });
-      control.dataset.a2uiGroupId = group.groupId;
-      control.dataset.a2uiGroupMode = group.mode;
-      control.dataset.a2uiEditState = groupEditState(group.groupId, editing);
+      const dateEditor = control.closest("[data-a2ui-date-editor]");
+      const targets = dateEditor ? [control, ...dateEditor.querySelectorAll("button, input[data-a2ui-calendar-input]")] : [control];
+      for (const target of targets) {
+        originalGroupAttributes.set(target, {
+          groupId: target.dataset.a2uiGroupId,
+          groupMode: target.dataset.a2uiGroupMode,
+          editState: target.dataset.a2uiEditState
+        });
+        target.dataset.a2uiGroupId = group.groupId;
+        target.dataset.a2uiGroupMode = group.mode;
+        target.dataset.a2uiEditState = groupEditState(group.groupId, editing);
+      }
     }
   }
   if (controller === void 0) {
@@ -1899,7 +2008,8 @@ function bindFieldInteractionGroups(root, groups, editing, controller) {
     }
     queueMicrotask(() => {
       if (interactionGroupId(root, root.ownerDocument.activeElement) !== groupId) {
-        controller.commitFieldGroup(groupId);
+        const invalidDate = [...root.querySelectorAll("input[data-a2ui-date-text-draft]")].some((input) => input.dataset.a2uiGroupId === groupId && !input.checkValidity());
+        if (!invalidDate) controller.commitFieldGroup(groupId);
       }
     });
   };