@assistant-ui/react-generative-ui 0.0.23 → 0.1.0

package/src/vocabulary/collectFormValues.test.ts

@@ -1,389 +0,0 @@
-// @vitest-environment jsdom
-
-import { describe, it, expect } from "vitest";
-import {
-  collectFormValues,
-  type FormControlElementLike,
-} from "./collectFormValues";
-import {
-  CHECKBOX_GROUP_ATTR,
-  FIELD_VALUE_ATTR,
-  GENERATED_NAME_ATTR,
-} from "../constants";
-import {
-  normalizeTemporalInputValue,
-  toLocalDateTime,
-  toPickerLocalDateTime,
-} from "../temporal";
-
-const el = (
-  partial: Partial<FormControlElementLike>,
-): FormControlElementLike => ({
-  name: "",
-  type: "text",
-  value: "",
-  disabled: false,
-  hasAttribute: () => false,
-  ...partial,
-});
-
-describe("collectFormValues", () => {
-  it.each([
-    ["time", "13:45:30.500", "13:45:30.5"],
-    ["time", "13:45:30.000", "13:45:30"],
-    ["datetime-local", "2026-07-16T09:45:30.500", "2026-07-16T09:45:30.5"],
-    ["datetime-local", "2026-07-16T09:45:30.000", "2026-07-16T09:45:30"],
-  ])("collects an edited %s in shortest form", (type, value, expected) => {
-    expect(collectFormValues([el({ name: "when", type, value })])).toEqual({
-      when: expected,
-    });
-  });
-
-  it("retains an untouched instant's offset spelling and precision", () => {
-    const anchor = "2025-12-15T17:00:00.5Z";
-    const displayed = toPickerLocalDateTime(anchor);
-    const getAttribute = (name: string) =>
-      name === FIELD_VALUE_ATTR ? anchor : null;
-    expect(
-      collectFormValues([
-        el({
-          name: "when",
-          type: "datetime-local",
-          value: displayed,
-          getAttribute,
-        }),
-      ]),
-    ).toEqual({ when: "2025-12-15T17:00:00.5Z" });
-    expect(
-      collectFormValues([
-        el({
-          name: "when",
-          type: "datetime-local",
-          value: displayed.replace(".500", ".5"),
-          getAttribute,
-        }),
-      ]),
-    ).toEqual({ when: "2025-12-15T17:00:00.5Z" });
-    expect(
-      collectFormValues([
-        el({
-          name: "when",
-          type: "datetime-local",
-          value: displayed.replace(".500", ".750"),
-          getAttribute,
-        }),
-      ]),
-    ).toEqual({ when: "2025-12-15T17:00:00.75Z" });
-  });
-
-  it("uses an instant anchor only for datetime-local controls", () => {
-    expect(
-      collectFormValues([
-        el({
-          name: "canonical",
-          type: "datetime-local",
-          value: normalizeTemporalInputValue(
-            toLocalDateTime("2025-12-15T17:00:00Z"),
-          ),
-          getAttribute: (name) =>
-            name === FIELD_VALUE_ATTR ? "2025-12-15T17:00:00Z" : null,
-        }),
-        el({
-          name: "ordinary",
-          value: "live",
-          getAttribute: (name) => (name === FIELD_VALUE_ATTR ? "stale" : null),
-        }),
-      ]),
-    ).toEqual({ canonical: "2025-12-15T17:00:00Z", ordinary: "live" });
-  });
-
-  it("uses the declared datetime-local type when the browser reports text", () => {
-    const anchor = "2025-12-15T17:00:00.250Z";
-    const displayed = toPickerLocalDateTime(anchor);
-    const getAttribute = (name: string) =>
-      name === "type"
-        ? "datetime-local"
-        : name === FIELD_VALUE_ATTR
-          ? anchor
-          : null;
-    const control = (value: string) =>
-      el({ name: "when", type: "text", value, getAttribute });
-    expect(collectFormValues([control(displayed)])).toEqual({
-      when: anchor,
-    });
-    expect(
-      collectFormValues([control(displayed.replace(".250", ".750"))]),
-    ).toEqual({
-      when: "2025-12-15T17:00:00.750Z",
-    });
-    expect(collectFormValues([control(displayed.slice(0, -4))])).toEqual({
-      when: "2025-12-15T17:00:00.000Z",
-    });
-  });
-
-  it("uses the declared time type when the browser reports text", () => {
-    expect(
-      collectFormValues([
-        el({
-          name: "when",
-          type: "text",
-          value: "12:00",
-          getAttribute: (name) =>
-            name === "type"
-              ? "time"
-              : name === FIELD_VALUE_ATTR
-                ? "12:00:00"
-                : null,
-        }),
-      ]),
-    ).toEqual({ when: "12:00:00" });
-  });
-
-  it.each([
-    ["time", "17:00:00", "17:00", "08:30:45"],
-    [
-      "datetime-local",
-      "2025-12-15T17:00:00",
-      "2025-12-15T17:00",
-      "2025-12-16T08:30:45",
-    ],
-  ])(
-    "uses the canonical %s value only while its projection matches",
-    (type, canonical, displayed, edited) => {
-      const getAttribute = (name: string) =>
-        name === FIELD_VALUE_ATTR ? canonical : null;
-      expect(
-        collectFormValues([
-          el({ name: "value", type, value: displayed, getAttribute }),
-        ]),
-      ).toEqual({ value: canonical });
-      expect(
-        collectFormValues([
-          el({ name: "value", type, value: edited, getAttribute }),
-        ]),
-      ).toEqual({ value: edited });
-      expect(
-        collectFormValues([
-          el({ name: "value", type, value: "", getAttribute }),
-        ]),
-      ).toEqual({ value: "" });
-    },
-  );
-
-  it("ignores instant anchors on other control types", () => {
-    const getAttribute = (name: string) =>
-      name === FIELD_VALUE_ATTR ? "2025-12-15T17:00:00Z" : null;
-    expect(
-      collectFormValues([
-        el({ name: "date", type: "date", value: "", getAttribute }),
-        el({ name: "time", type: "time", value: "12:34", getAttribute }),
-        el({ name: "text", value: "live", getAttribute }),
-        el({
-          name: "select",
-          type: "select-one",
-          value: "chosen",
-          getAttribute,
-        }),
-        el({ name: "textarea", type: "textarea", value: "text", getAttribute }),
-        el({
-          name: "radio",
-          type: "radio",
-          value: "chosen",
-          checked: true,
-          getAttribute,
-        }),
-        el({ name: "checkbox", type: "checkbox", checked: true, getAttribute }),
-        el({
-          name: "group",
-          type: "checkbox",
-          value: "chosen",
-          checked: true,
-          hasAttribute: (name) => name === CHECKBOX_GROUP_ATTR,
-          getAttribute,
-        }),
-        el({ name: "range", type: "range", value: "7", getAttribute }),
-      ]),
-    ).toEqual({
-      date: "",
-      time: "12:34",
-      text: "live",
-      select: "chosen",
-      textarea: "text",
-      radio: "chosen",
-      checkbox: true,
-      group: ["chosen"],
-      range: 7,
-    });
-  });
-
-  it("resolves a checkbox to its checked boolean", () => {
-    expect(
-      collectFormValues([
-        el({ name: "agree", type: "checkbox", checked: true }),
-      ]),
-    ).toEqual({ agree: true });
-    expect(
-      collectFormValues([
-        el({ name: "agree", type: "checkbox", checked: false }),
-      ]),
-    ).toEqual({ agree: false });
-  });
-
-  it("resolves a radio set to the checked option's value", () => {
-    expect(
-      collectFormValues([
-        el({ name: "size", type: "radio", value: "sm", checked: false }),
-        el({ name: "size", type: "radio", value: "md", checked: true }),
-        el({ name: "size", type: "radio", value: "lg", checked: false }),
-      ]),
-    ).toEqual({ size: "md" });
-  });
-
-  it("resolves a radio set with no checked option to undefined", () => {
-    const values = collectFormValues([
-      el({ name: "size", type: "radio", value: "sm", checked: false }),
-      el({ name: "size", type: "radio", value: "md", checked: false }),
-    ]);
-    expect("size" in values).toBe(true);
-    expect(values.size).toBeUndefined();
-  });
-
-  it("resolves a checkbox group to its checked values in document order", () => {
-    const option = (value: string, checked: boolean) =>
-      el({
-        name: "toppings",
-        type: "checkbox",
-        value,
-        checked,
-        hasAttribute: (name) => name === CHECKBOX_GROUP_ATTR,
-      });
-    expect(
-      collectFormValues([
-        option("basil", true),
-        option("olives", false),
-        option("onion", true),
-      ]),
-    ).toEqual({ toppings: ["basil", "onion"] });
-    expect(collectFormValues([option("basil", false)])).toEqual({
-      toppings: [],
-    });
-  });
-
-  it("resolves select/input/textarea/date controls to their string value", () => {
-    expect(
-      collectFormValues([
-        el({ name: "role", type: "select-one", value: "admin" }),
-        el({ name: "email", type: "email", value: "a@example.com" }),
-        el({ name: "bio", type: "textarea", value: "hi" }),
-        el({ name: "dob", type: "date", value: "2026-01-01" }),
-      ]),
-    ).toEqual({
-      role: "admin",
-      email: "a@example.com",
-      bio: "hi",
-      dob: "2026-01-01",
-    });
-  });
-
-  it("resolves a range input to its numeric value", () => {
-    expect(
-      collectFormValues([el({ name: "volume", type: "range", value: "7" })]),
-    ).toEqual({ volume: 7 });
-  });
-
-  it("collects repeated non-radio names into an array in document order", () => {
-    expect(
-      collectFormValues([
-        el({ name: "tag", type: "text", value: "a" }),
-        el({ name: "tag", type: "text", value: "b" }),
-        el({ name: "tag", type: "text", value: "c" }),
-      ]),
-    ).toEqual({ tag: ["a", "b", "c"] });
-  });
-
-  it("skips controls without a name", () => {
-    expect(
-      collectFormValues([
-        el({ name: "", type: "text", value: "unnamed" }),
-        el({ name: "kept", type: "text", value: "yes" }),
-      ]),
-    ).toEqual({ kept: "yes" });
-  });
-
-  it("skips radio groups whose name is generated only for native grouping", () => {
-    expect(
-      collectFormValues([
-        el({
-          name: "_R_1_",
-          type: "radio",
-          value: "sm",
-          checked: true,
-          hasAttribute: (name) => name === GENERATED_NAME_ATTR,
-        }),
-      ]),
-    ).toEqual({});
-  });
-
-  it("skips disabled controls", () => {
-    expect(
-      collectFormValues([
-        el({ name: "off", type: "text", value: "nope", disabled: true }),
-        el({ name: "on", type: "text", value: "yep" }),
-      ]),
-    ).toEqual({ on: "yep" });
-  });
-
-  it("skips a disabled control inside an otherwise-checked radio set", () => {
-    expect(
-      collectFormValues([
-        el({
-          name: "size",
-          type: "radio",
-          value: "sm",
-          checked: true,
-          disabled: true,
-        }),
-        el({ name: "size", type: "radio", value: "md", checked: false }),
-      ]),
-    ).toEqual({ size: undefined });
-  });
-
-  it("skips controls disabled by a fieldset while preserving its first legend", () => {
-    const form = document.createElement("form");
-    form.innerHTML = `
-      <fieldset disabled>
-        <legend><input name="legend" value="kept" /></legend>
-        <input name="blocked" value="old" />
-      </fieldset>
-      <input name="enabled" value="yes" />
-    `;
-    const blocked = form.elements.namedItem("blocked") as HTMLInputElement;
-
-    expect(blocked.disabled).toBe(false);
-
-    expect(
-      collectFormValues(
-        form.elements as unknown as ArrayLike<FormControlElementLike>,
-      ),
-    ).toEqual({ legend: "kept", enabled: "yes" });
-  });
-
-  it("returns an empty object for no elements", () => {
-    expect(collectFormValues([])).toEqual({});
-  });
-
-  it("a field named __proto__ round-trips as an own data key", () => {
-    const values = collectFormValues([
-      el({ name: "__proto__", type: "text", value: "x" }),
-    ]);
-    expect(Object.hasOwn(values, "__proto__")).toBe(true);
-    expect(values["__proto__"]).toBe("x");
-  });
-
-  it("a field named constructor collects as its submitted string, not an array seeded with the inherited function", () => {
-    const values = collectFormValues([
-      el({ name: "constructor", type: "text", value: "hi" }),
-    ]);
-    expect(values["constructor"]).toBe("hi");
-  });
-});

package/src/vocabulary/collectFormValues.ts

@@ -1,116 +0,0 @@
-import type { FormEvent } from "react";
-import {
-  CHECKBOX_GROUP_ATTR,
-  FIELD_NAME_ATTR,
-  FIELD_VALUE_ATTR,
-  GENERATED_NAME_ATTR,
-} from "../constants";
-import {
-  fromLocalDateTime,
-  normalizeTemporalInputValue,
-  toPickerLocalDateTime,
-} from "../temporal";
-
-/**
- * The subset of `HTMLInputElement`/`HTMLSelectElement`/`HTMLTextAreaElement` that {@link collectFormValues} reads. A structural type rather than the DOM interfaces themselves, so a plain object can stand in for a form control in tests.
- */
-export type FormControlElementLike = {
-  readonly name: string;
-  readonly type: string;
-  readonly value: string;
-  readonly checked?: boolean;
-  readonly disabled: boolean;
-  readonly hasAttribute: (name: string) => boolean;
-  readonly getAttribute?: ((name: string) => string | null) | undefined;
-  readonly matches?: ((selector: string) => boolean) | undefined;
-};
-
-/**
- * Collects a submitted form's named control values into a plain object, keyed by `name`, in document order. Reads each control's live DOM state rather than `FormData`, so a checkbox resolves to its `checked` boolean instead of an on/off string. A radio group resolves to its checked option's `value`, or `undefined` if none is checked. A checkbox group resolves to its checked options' values in document order, or an empty array if none is checked. Any other repeated `name` resolves to an array of its controls' values, in document order. A time or datetime-local control's `data-aui-field-value` preserves the canonical string when its local projection is unchanged; an edited instant retains its original offset and precision. Controls without a `name`, that carry `data-aui-generated-name`, or that are effectively disabled, including through an ancestor disabled fieldset outside its first legend, are skipped entirely.
- */
-export function collectFormValues(
-  elements: ArrayLike<FormControlElementLike>,
-): Record<string, unknown> {
-  const values: Record<string, unknown> = Object.create(null);
-
-  for (const element of Array.from(elements)) {
-    const { disabled } = element;
-    const name = element.getAttribute?.(FIELD_NAME_ATTR) ?? element.name;
-    if (
-      !name ||
-      disabled ||
-      element.hasAttribute(GENERATED_NAME_ATTR) ||
-      element.matches?.(":disabled")
-    )
-      continue;
-
-    if (element.type === "radio") {
-      if (element.checked) values[name] = element.value;
-      else if (!Object.hasOwn(values, name)) values[name] = undefined;
-      continue;
-    }
-
-    if (
-      element.type === "checkbox" &&
-      element.hasAttribute(CHECKBOX_GROUP_ATTR)
-    ) {
-      const existing = values[name];
-      const checked = Array.isArray(existing) ? existing : [];
-      values[name] = element.checked ? [...checked, element.value] : checked;
-      continue;
-    }
-
-    const temporalType =
-      element.type === "datetime-local" || element.type === "time"
-        ? element.type
-        : element.getAttribute?.("type");
-    const inputValue =
-      temporalType === "datetime-local" || temporalType === "time"
-        ? normalizeTemporalInputValue(element.value)
-        : element.value;
-    const fieldValue =
-      temporalType === "datetime-local" || temporalType === "time"
-        ? element.getAttribute?.(FIELD_VALUE_ATTR)
-        : undefined;
-    const value: string | number | boolean =
-      element.type === "checkbox"
-        ? (element.checked ?? false)
-        : element.type === "range"
-          ? Number(element.value)
-          : fieldValue && inputValue !== ""
-            ? normalizeTemporalInputValue(inputValue) ===
-              normalizeTemporalInputValue(
-                temporalType === "time"
-                  ? fieldValue
-                  : toPickerLocalDateTime(fieldValue),
-              )
-              ? fieldValue
-              : temporalType === "datetime-local"
-                ? fromLocalDateTime(inputValue, fieldValue)
-                : inputValue
-            : inputValue;
-
-    if (Object.hasOwn(values, name)) {
-      const existing = values[name];
-      values[name] = Array.isArray(existing)
-        ? [...existing, value]
-        : [existing, value];
-    } else {
-      values[name] = value;
-    }
-  }
-
-  return values;
-}
-
-/**
- * Convenience wrapper around {@link collectFormValues} for a native form submit event; the cast from `HTMLFormControlsCollection` to `ArrayLike<FormControlElementLike>` lives here once instead of at every call site.
- */
-export function collectFormValuesFromEvent(
-  event: FormEvent<HTMLFormElement>,
-): Record<string, unknown> {
-  return collectFormValues(
-    event.currentTarget
-      .elements as unknown as ArrayLike<FormControlElementLike>,
-  );
-}