@nolwenture/formik-jsonschema-form 2.0.2 → 3.0.0-beta.1

package/dist/esm/v3/raw/validation/patterns.js

@@ -0,0 +1,68 @@
+import { issue } from "../core/issues";
+/** Values longer than this are not run through a pattern (they fail it instead). */
+export const DEFAULT_PATTERN_INPUT_CAP = 10_000;
+// Heuristics for catastrophic backtracking (not a full analyser; plan B-34 names
+// recheck / safe-regex2 for later). Rejected:
+// 1. a quantified group that itself contains a quantifier: (a+)+, (\w*)*, (x+){2,};
+// 2. a quantified group whose alternatives can overlap: (a|aa)+, (a|a)*, (.|x)+.
+// Benign patterns such as ^[a-z]+$, ^(\+358|0)\d+$ or ^([A-Z]|[0-9])+$ pass.
+const NESTED_QUANTIFIER = /\((?:[^()\\]|\\.)*[*+}](?:[^()\\]|\\.)*\)\s*(?:[*+]|\{\d+,\d*\})/;
+const QUANTIFIED_GROUP = /\(((?:[^()\\]|\\.)*\|(?:[^()\\]|\\.)*)\)\s*(?:[*+]|\{\d+,\d*\})/g;
+const WILDCARD_START = /^(?:\.|\\[wWsSdD])/;
+/** Splits on top-level `|`, keeping escapes and character classes intact. */
+const alternatives = (body) => {
+    const parts = [];
+    let current = "";
+    let inClass = false;
+    for (let i = 0; i < body.length; i++) {
+        const ch = body[i];
+        if (ch === "\\") {
+            current += ch + (body[i + 1] ?? "");
+            i++;
+        }
+        else if (ch === "[" || ch === "]") {
+            inClass = ch === "[" ? true : false;
+            current += ch;
+        }
+        else if (ch === "|" && !inClass) {
+            parts.push(current);
+            current = "";
+        }
+        else
+            current += ch;
+    }
+    return [...parts, current].map((p) => p.replace(/^\?:/, ""));
+};
+const alternativesOverlap = (alts) => alts.some((a, i) => WILDCARD_START.test(a) || alts.some((b, j) => i !== j && (a === "" || b.startsWith(a))));
+export const isUnsafePattern = (pattern) => {
+    if (NESTED_QUANTIFIER.test(pattern))
+        return true;
+    for (const match of pattern.matchAll(QUANTIFIED_GROUP)) {
+        if (alternativesOverlap(alternatives(match[1])))
+            return true;
+    }
+    return false;
+};
+/** A compiled pattern, or undefined when it is invalid or rejected (the keyword is skipped). */
+export const compilePattern = (pattern, sink, path) => {
+    if (typeof pattern !== "string")
+        return undefined;
+    if (isUnsafePattern(pattern)) {
+        sink(issue("PATTERN_REJECTED", path, pattern));
+        return undefined;
+    }
+    try {
+        return new RegExp(pattern); // unanchored search, like JSON Schema (Q-VAL-1, kept)
+    }
+    catch {
+        sink(issue("PATTERN_INVALID", path, pattern));
+        return undefined;
+    }
+};
+/** Q-VAL-1 semantics with an input cap: over-long values never reach the regex. */
+export const testPattern = (regex, value, cap) => {
+    if (value === undefined || value === null || value === "")
+        return true;
+    const text = String(value);
+    return text.length <= cap && regex.test(text);
+};

package/dist/esm/v3/react/chain.js

@@ -0,0 +1,4 @@
+// The $refs being expanded above a React boundary (SEC-REN-1 / SEC-REF-2 across custom templates
+// and fields), shared by FormView and Form.
+import { createContext } from "react";
+export const ChainContext = createContext([]);

package/dist/esm/v3/react/compat.js

@@ -0,0 +1,8 @@
+// 2.x root names with no other v3 home (C1, kept until 4.0).
+import { createElement, forwardRef } from "react";
+import { COMPONENT_TYPES as TYPES } from "../raw/model/form/dispatch";
+import { asStyledSelector } from "./selector";
+/** 2.x SchemaField's schema type -> field name table. */
+export const COMPONENT_TYPES = Object.freeze({ ...TYPES });
+/** 2.x FormView's outer wrapper (a styled div), as a compat primitive with its `fjsf-view-FormWrapper` class. */
+export const FormWrapper = asStyledSelector(forwardRef(({ className, ...props }, ref) => createElement("div", { ...props, ref, className: ["fjsf-view-FormWrapper", className].filter(Boolean).join(" ") })), "div", ["fjsf-view-FormWrapper"]);

package/dist/esm/v3/react/componentsProp.js

@@ -0,0 +1,18 @@
+// D3 / Q-COMP-1: 2.x's `components` prop is replaced by `slots`. A leftover `components` is a type error
+// (FormProps / FormViewProps declare it `never`), and at runtime it is ignored with one warning in
+// development, so a call that still forwards it (pro3's exam mode HiddenErrorMessage) is not silently dropped.
+let warned = false;
+export const COMPONENTS_PROP_WARNING = "formik-jsonschema-form: the `components` prop is not supported in v3 and is ignored. Pass `slots` instead (each slot gets the library's component as `Default`); the fjsf-v3-codemod rewrites it.";
+/** Warns once per process when `components` is passed (not in production). */
+export const warnComponentsProp = (components) => {
+    if (warned || components === undefined)
+        return;
+    if (globalThis.process?.env?.NODE_ENV === "production")
+        return;
+    warned = true;
+    globalThis.console?.error?.(COMPONENTS_PROP_WARNING);
+};
+/** Tests: warn again. */
+export const resetComponentsPropWarning = () => {
+    warned = false;
+};

package/dist/esm/v3/react/defined.js

@@ -0,0 +1,2 @@
+// A 2.x `Partial<FieldsType>` may carry `undefined` entries: they must not replace a built-in field.
+export const defined = (map) => Object.fromEntries(Object.entries(map ?? {}).filter(([, v]) => v !== undefined));

package/dist/esm/v3/react/ejs/EJSField.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import ejs from "ejs-browser";
+import { useFormikContext } from "formik";
+import { issue } from "../../raw/core/issues";
+import { getIn } from "../../raw/core/paths";
+import { getDescription, getTitle } from "../../raw/core/uiSchema";
+import { sanitizeHtml, SanitizerUnavailableError } from "../../raw/sanitize";
+import { FormViewRegistry, ViewRootContext } from "../view/registry";
+const FIXED_ERROR = "Error rendering template.";
+const hasWindow = () => typeof globalThis.window !== "undefined";
+/** True when there is a sanitiser to put the output through (checked BEFORE the template runs). */
+const sanitiserAvailable = () => {
+    try {
+        sanitizeHtml("");
+        return true;
+    }
+    catch (error) {
+        if (error instanceof SanitizerUnavailableError)
+            return false;
+        throw error;
+    }
+};
+/**
+ * The final HTML of the field, or `undefined` when nothing may be rendered. The template is NOT RUN unless the output can be
+ * sanitised: no window, or a window that cannot sanitise (a shim), reports `window` / `sanitizer` first. ejs-browser
+ * templates see Node's globals (SEC-SSR-2), so a server must never execute a tenant's template, and 2.x did (it ran it,
+ * then threw SANITIZER_UNAVAILABLE). A real DOM window in a server process still runs templates: only
+ * `setSanitizerWindow` without a global window stays disabled.
+ */
+export const renderTemplate = (template, scope, onIssue) => {
+    if (!hasWindow()) {
+        onIssue("window");
+        return undefined;
+    }
+    if (!sanitiserAvailable()) {
+        onIssue("sanitizer");
+        return undefined;
+    }
+    let rendered;
+    try {
+        rendered = ejs.render(String(template), scope);
+    }
+    catch {
+        // SEC-EJS-4: an error becomes a fixed string; v3 also reports it
+        onIssue("error");
+        rendered = FIXED_ERROR;
+    }
+    return sanitizeHtml(rendered);
+};
+export const EJSField = (props) => {
+    const { components } = useContext(FormViewRegistry);
+    const { sink } = useContext(ViewRootContext);
+    const { name, uiSchema = {} } = props;
+    const values = useFormikContext()?.values;
+    const title = getTitle(props) || "Untitled Field";
+    const description = getDescription(props) || "No description available.";
+    const template = uiSchema["ui:options"]?.template ?? "No template provided.";
+    const value = getIn(values, name);
+    const html = useMemo(() => renderTemplate(template, { title, description, value }, (detail) => sink?.(issue("TEMPLATE_DISABLED", name, detail))), 
+    // the sink is the host's reporting channel, not an input of the output
+    [template, title, description, name, value]);
+    if (html === undefined)
+        return null;
+    const Value = components.EJSFieldValue ?? "div";
+    return _jsx(Value, { dangerouslySetInnerHTML: { __html: html } });
+};

package/dist/esm/v3/react/ejs/index.js

@@ -0,0 +1,3 @@
+// @nolwenture/formik-jsonschema-form/react/ejs (v3): the opt-in EJS field (D1, Q5).
+// Needs the optional peer `ejs-browser`. Register it explicitly: `<FormView fields={{ EJSField }} />`.
+export { EJSField, renderTemplate } from "./EJSField";

package/dist/esm/v3/react/form/components.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, forwardRef, useContext, useId, useState } from "react";
+import { useFormikContext } from "formik";
+import { getIn } from "../../raw/core/paths";
+import { expandClasses } from "../../raw/model/classes";
+import { FORM_COMPONENTS } from "../../raw/model/form/componentTable";
+import { infoMarkup } from "../../raw/model/form/chrome";
+import { createFormContext } from "../../raw/model/form";
+import { toReact } from "../toReact";
+import { withSlots } from "../slots";
+import { asStyledSelector } from "../selector";
+import { formBind, useFormRender } from "./host";
+import { useFormBuild } from "./fields";
+import { choicesInputMarkup, radioInputsMarkup, toggleInputMarkup } from "../../raw/model/form/choice";
+import { FormRegistry, FormRuntimeContext } from "./registry";
+const cx = (...names) => names.filter((n) => typeof n === "string" && n).join(" ");
+const primitive = (name, [tag, ...chain]) => {
+    const classes = expandClasses(chain.map((n) => `fjsf-${n}`));
+    // `Default` (a slot's prop, forwarded by styled(FormComponents.X) slots) is never a DOM attribute.
+    const C = forwardRef(({ className, Default: _default, ...props }, ref) => createElement(tag, { ...props, ref, className: cx(...classes, className) }));
+    C.displayName = name;
+    return asStyledSelector(C, tag, classes);
+};
+const P = (name) => primitive(name, FORM_COMPONENTS[name]);
+/** 2.x ErrorMessage: the field's error once it is touched. */
+const ErrorMessage = ({ name }) => {
+    const formik = useFormikContext();
+    const error = getIn(formik?.errors, name);
+    if (!getIn(formik?.touched, name) || typeof error !== "string" || !error)
+        return null;
+    return _jsx("div", { className: "fjsf-ErrorText", children: error });
+};
+/** 2.x FieldInfo (ui:info): tooltip, or inline toggled by the link. */
+const FieldInfo = (props) => {
+    const runtime = useContext(FormRuntimeContext);
+    const formik = useFormikContext();
+    const { formOptions } = useContext(FormRegistry);
+    const id = useId();
+    const ctx = createFormContext(undefined, undefined, { values: {} }, { ui: runtime.ui, formOptions });
+    // Rendered without the host: through it, `FieldInfo` would resolve to this component again.
+    return _jsx(_Fragment, { children: toReact(infoMarkup(ctx, id, props), { bind: formBind(runtime, formik) }) });
+};
+/** 2.x Form ObjectFieldSection: fieldset + legend, collapsible sections start collapsed. */
+const ObjectFieldSection = ({ title, collapsible, children }) => {
+    const [collapsed, setCollapsed] = useState(!!collapsible);
+    const { components: c } = useContext(FormRegistry);
+    return (_jsxs(c.ObjectFieldSectionWrapper, { "data-fjsf-section": title ?? "", children: [_jsxs(c.ObjectFieldSectionTitle, { ...(collapsible ? { "data-fjsf-button": "collapse" } : {}), onClick: () => collapsible && setCollapsed((v) => !v), children: [title, _jsx(c.IconWrapper, { children: collapsible && (collapsed ? "▸" : "▾") })] }), _jsx(c.ObjectFieldSectionChildrenWrapper, { style: collapsed ? { display: "none" } : undefined, "data-fjsf-hidden": collapsed ? "true" : undefined, children: children })] }));
+};
+/** 2.x Clickable: a type="button" button. */
+const Clickable = ({ children, onClick, onMouseDown, onMouseUp, innerRef, className, ariaLabel, ariaExpanded = false, ariaControls, id }) => (_jsx("button", { type: "button", className: cx("fjsf-ClickableEl", className), onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, ref: innerRef, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-controls": ariaControls, id: id, children: children }));
+/** Inputs taking 2.x handler props (SearchableMultiTag, File(s)Upload): not provided standalone in 3.x (no pro3 use). */
+const notYet = (name) => {
+    const C = () => null;
+    C.displayName = `${name} (not provided)`;
+    return C;
+};
+/** The 2.x input components of Radio/Toggle/MultipleChoice with their 2.x props, from the RAW markup. */
+const inputComponent = (name, markup) => {
+    const C = (props) => {
+        const ctx = useFormBuild();
+        const render = useFormRender();
+        const p = { name: props.name, schema: { readOnly: props.inputProps?.readOnly }, ui: { "ui:props": props.inputProps ?? {} } };
+        return _jsx(_Fragment, { children: render(markup(ctx, p, props)) });
+    };
+    C.displayName = name;
+    return C;
+};
+export const FormComponents = {
+    ...Object.fromEntries(Object.entries(FORM_COMPONENTS).map(([name, entry]) => [name, entry === null ? undefined : entry === "fn" ? notYet(name) : P(name)])),
+    Clickable,
+    ErrorMessage,
+    FieldInfo,
+    ObjectFieldSection,
+    RadioFieldInput: inputComponent("RadioFieldInput", (ctx, p, props) => radioInputsMarkup(ctx, p, props.label)),
+    ToggleFieldInput: inputComponent("ToggleFieldInput", (ctx, p) => toggleInputMarkup(ctx, p)),
+    MultipleChoiceFieldInput: inputComponent("MultipleChoiceFieldInput", (ctx, p, props) => choicesInputMarkup(ctx, p, props.enums, props.style)),
+    /** 2.x helper (ObjectFieldTemplate): the object template's components from a map. */
+    getComponents: (components) => ({
+        Wrapper: components.ObjectFieldTemplateWrapper,
+        Title: components.ObjectFieldTemplateTitle,
+        TitleInfoWrapper: components.ObjectFieldTitleInfoWrapper,
+        Description: components.ObjectFieldTemplateDescription ?? components.FieldDescription,
+        Help: components.ObjectFieldTemplateHelp ?? components.FieldHelp,
+        Info: components.ObjectFieldTemplateInfo ?? components.FieldInfo,
+        RequiredIndicator: components.ObjectFieldTemplateRequiredIndicator ?? components.RequiredIndicator,
+        ErrorMessage: components.ObjectFieldTemplateErrorMessage ?? components.ErrorMessage,
+    }),
+};
+/** Override-only keys and the 2.x key they fall back to (getComponents of the templates). */
+const FALLBACK = Object.fromEntries(Object.keys(FORM_COMPONENTS)
+    .filter((k) => FORM_COMPONENTS[k] === null)
+    .map((k) => {
+    const suffix = ["TitleInfoWrapper", "RequiredIndicator", "ErrorMessage", "Description", "Wrapper", "Title", "Help", "Info", "Icon"].find((s) => k.endsWith(s));
+    const target = {
+        TitleInfoWrapper: "ObjectFieldTitleInfoWrapper", RequiredIndicator: "RequiredIndicator", ErrorMessage: "ErrorMessage", Description: "FieldDescription",
+        Wrapper: "ObjectFieldTemplateWrapper", Title: "ObjectFieldTemplateTitle", Help: "FieldHelp", Info: "FieldInfo", Icon: "Icon",
+    };
+    return [k, target[suffix]];
+}));
+/** registry.components: the defaults with the caller's slots; `SubmitButton` is the submit button (FormButton). */
+export const formCompatComponents = (slots = {}) => withSlots(FormComponents, FALLBACK, slots, { SubmitButton: "FormButton" });

package/dist/esm/v3/react/form/fields.js

@@ -0,0 +1,70 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useRef } from "react";
+import { useFormikContext } from "formik";
+import { builtIn, createFormContext, formField, newAppearances, settle } from "../../raw/model/form";
+import { ChainContext } from "../chain";
+import { useFormRender } from "./host";
+import { FormRegistry, FormRuntimeContext } from "./registry";
+import { FileUploadField, FilesUploadField } from "./upload";
+/** The RAW build context of the current form: Formik state, registry, replaced fields, UI state. */
+export const useFormBuild = () => {
+    const registry = useContext(FormRegistry);
+    const runtime = useContext(FormRuntimeContext);
+    const formik = useFormikContext();
+    const fields = registry.fields ?? {};
+    return createFormContext(undefined, undefined, { values: formik?.values ?? {}, errors: formik?.errors, touched: formik?.touched, submitting: formik?.isSubmitting }, {
+        customFields: Object.keys(fields).filter((key) => fields[key] !== FormFields[key]),
+        formLocalization: registry.formLocalization,
+        formOptions: registry.formOptions,
+        locale: globalThis.navigator?.language,
+        ui: runtime.ui,
+        hideUnmarkedAdditionalProperties: registry.hideUnmarkedAdditionalProperties,
+        orderable: typeof registry.onAdditionalPropertyOrderChange === "function",
+        sink: runtime.sink,
+        definitions: registry.definitions ?? {},
+        defs: runtime.defs,
+        uiDefinitions: registry.uiSchemaDefinitions,
+    });
+};
+/** 2.x field props -> the RAW child props. */
+export const childProps = (p) => ({
+    name: p.name ?? "",
+    schema: p.schema,
+    ui: p.uiSchema,
+    ...(p.required !== undefined ? { required: !!p.required } : {}),
+    ...(p["data-fjsf-hidden"] === "true" ? { hidden: true } : {}),
+    ...(p.forceDefaultValue ? { forceDefaultValue: true } : {}),
+    ...(p["data-fjsf-kind"] ? { kind: p["data-fjsf-kind"] } : {}),
+});
+const formFieldComponent = (displayName, build) => {
+    const F = (props) => {
+        const ctx = useFormBuild();
+        const chain = useContext(ChainContext);
+        const runtime = useContext(FormRuntimeContext);
+        const render = useFormRender();
+        const seen = useRef(new Set());
+        const node = build(ctx, childProps(props), chain);
+        useEffect(() => {
+            const fresh = newAppearances(ctx.appeared, seen.current);
+            if (fresh.length || ctx.prune.length)
+                runtime.settle((values) => settle(values, fresh, ctx.prune));
+            if (Object.keys(ctx.anyGuesses).length)
+                runtime.keepAnyTypes?.(ctx.anyGuesses);
+        });
+        return _jsx(_Fragment, { children: render(node) });
+    };
+    F.displayName = displayName;
+    return F;
+};
+export const SchemaField = formFieldComponent("SchemaField", (ctx, p, chain) => formField(ctx, p, chain));
+const NAMES = [
+    "AnyField", "ArrayField", "BooleanField", "DateField", "FileUploadField", "FilesUploadField", "MultipleChoiceField", "NullField",
+    "NumberField", "ObjectField", "RadioField", "SearchableMultiTagSelectField", "SearchableSelectField", "StringField", "TextAreaField", "ToggleField",
+];
+export const FormFields = {
+    ...Object.fromEntries(NAMES.map((name) => [name, formFieldComponent(name, (ctx, p, chain) => builtIn(ctx, name, p, chain))])),
+    SchemaField,
+    // Upload state is async and host-provided: React components over the RAW upload markup (upload.tsx).
+    FileUploadField: ((props) => _jsx(FileUploadField, { ...props })),
+    FilesUploadField: ((props) => _jsx(FilesUploadField, { ...props })),
+};

package/dist/esm/v3/react/form/host.js

@@ -0,0 +1,95 @@
+import { createElement, Fragment, useContext } from "react";
+import { useFormikContext } from "formik";
+import { expandClasses } from "../../raw/model/classes";
+import { FORM_COMPONENTS } from "../../raw/model/form/componentTable";
+import { createHost } from "../hostCore";
+import { toReact } from "../toReact";
+import { FormComponents } from "./components";
+import { FormTemplates } from "./templates";
+import { FormRegistry, FormRuntimeContext } from "./registry";
+const chainClasses = (names) => {
+    const entry = names.map((n) => FORM_COMPONENTS[n]).find(Array.isArray);
+    return entry ? expandClasses(entry.slice(1).map((n) => `fjsf-${n}`)) : [];
+};
+// Getters: components.tsx imports this module, so the defaults are read at render time, not at load.
+export const formHost = createHost({
+    get components() {
+        return FormComponents;
+    },
+    get templates() {
+        return FormTemplates;
+    },
+    defaultClasses: chainClasses,
+    // 2.x passed the template's content: an array for objects, the single control for fields.
+    children: (_registry, host, env) => host.template === "FieldTemplate"
+        ? host.children.length === 1 ? toReact(host.children[0], env) : host.children.map((c, i) => createElement(Fragment, { key: i }, toReact(c, env)))
+        : host.children.map((c, i) => createElement(Fragment, { key: i }, toReact(c, env))),
+});
+export const formBind = (runtime, formik) => (node, props) => {
+    const on = node.on;
+    const out = { ...props };
+    if (on.change) {
+        const action = on.change;
+        if (node.tag === "input" && (node.attrs.type === "checkbox" || node.attrs.type === "radio")) {
+            out.checked = node.attrs.checked === true;
+            out.onChange = (e) => runtime.dispatch(action, { checked: e.target.checked, value: e.target.value });
+        }
+        else if (node.tag === "select" && node.attrs.multiple) {
+            out.value = Array.isArray(node.attrs.value) ? node.attrs.value : [];
+            out.onChange = (e) => runtime.dispatch(action, { selected: [...e.target.options].filter((o) => o.selected).map((o) => o.value) });
+        }
+        else {
+            out.value = node.attrs.value ?? "";
+            out.onChange = (e) => runtime.dispatch(action, { value: e.target.value });
+        }
+    }
+    if (on.blur)
+        out.onBlur = (e) => runtime.dispatch(on.blur, { value: e?.target?.value });
+    if (on.focus)
+        out.onFocus = () => runtime.dispatch(on.focus);
+    if (on.paste) {
+        out.onPaste = (e) => {
+            e.preventDefault?.();
+            runtime.dispatch(on.paste, { value: e.clipboardData?.getData("text")?.trim() ?? "" });
+        };
+    }
+    // focus leaving the field's container (React's onBlur bubbles like focusout)
+    if (on.focusout)
+        out.onBlur = (e) => runtime.dispatch(on.focusout, { leftContainer: !e.currentTarget?.contains(e.relatedTarget) });
+    if (on.mousedown)
+        out.onMouseDown = (e) => e.preventDefault?.();
+    // Q-SEL-2: Enter in a search input never submits the form (the document listener still selects).
+    if (on.keydown?.type === "preventEnter")
+        out.onKeyDown = (e) => e.key === "Enter" && e.preventDefault?.();
+    if (on.documentKeydown) {
+        const action = on.documentKeydown;
+        runtime.onDocumentKey?.(action.path, action.open ? action : undefined);
+        out.ref = runtime.keyTarget?.(action.path);
+        if (!action.open || (runtime.ui.active?.[action.path] ?? -1) < 0)
+            runtime.clearActive?.(action.path);
+    }
+    if (on.active) {
+        const { path, index } = on.active;
+        out.ref = runtime.scrollActive?.(path, index);
+    }
+    if (on.click) {
+        out.onClick = (e) => {
+            if (node.tag === "a" || on.click.type === "preventDefault")
+                e.preventDefault?.();
+            if (on.click.type !== "preventDefault")
+                runtime.dispatch(on.click);
+        };
+    }
+    if (on.submit) {
+        out.onSubmit = (e) => formik?.handleSubmit(e);
+        out.onReset = (e) => formik?.handleReset(e);
+    }
+    return out;
+};
+/** toReact with the current registry and runtime; holes are where React children go. */
+export const useFormRender = () => {
+    const registry = useContext(FormRegistry);
+    const runtime = useContext(FormRuntimeContext);
+    const formik = useFormikContext();
+    return (node, hole, holes) => toReact(node, { host: formHost(registry, hole, holes), bind: formBind(runtime, formik) });
+};

package/dist/esm/{Form/FormRegistry.js → v3/react/form/registry.js}

@@ -1,13 +1,15 @@
-import React from "react";
-export const FormRegistry = React.createContext({
+import { createContext } from "react";
+export const FormRegistry = createContext({
     fields: {},
     templates: {},
     components: {},
     definitions: {},
     uiSchemaDefinitions: {},
     formContext: {},
-    formLocalization: {},
     formOptions: {},
+    formLocalization: {},
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
 });
+const noRuntime = { ui: {}, dispatch: () => undefined, settle: () => undefined };
+export const FormRuntimeContext = createContext(noRuntime);

package/dist/esm/v3/react/form/root.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useFormikContext } from "formik";
+import { isPlainObject } from "../../raw/core/json";
+import { warnComponentsProp } from "../componentsProp";
+import { defined } from "../defined";
+import { formShell } from "../../raw/model/form";
+import { hole } from "../../raw/model/vnode";
+import { toReact } from "../toReact";
+import { formCompatComponents } from "./components";
+import { FormFields } from "./fields";
+import { formBind, formHost } from "./host";
+import { FormRegistry, FormRuntimeContext } from "./registry";
+import { useFormRuntime } from "./runtime";
+import { FormTemplates } from "./templates";
+export const Form = (props) => {
+    warnComponentsProp(props.components);
+    const { schema, uiSchema = {}, className, children, fields, templates, slots, formContext = {}, formOptions = {}, formLocalization = {} } = props;
+    const formik = useFormikContext();
+    const registry = useMemo(() => ({
+        fields: { ...FormFields, ...defined(fields) },
+        templates: { ...FormTemplates, ...templates },
+        components: formCompatComponents(slots),
+        definitions: schema?.definitions,
+        uiSchemaDefinitions: uiSchema?.definitions,
+        formContext,
+        formOptions,
+        formLocalization,
+        useItemsAsAdditionalItems: props.useItemsAsAdditionalItems ?? false,
+        hideUnmarkedAdditionalProperties: props.hideUnmarkedAdditionalProperties ?? false,
+        onAdditionalPropertyOrderChange: props.onAdditionalPropertyOrderChange,
+    }), [schema, uiSchema, fields, templates, slots, formContext, formOptions, formLocalization, props.useItemsAsAdditionalItems, props.hideUnmarkedAdditionalProperties, props.onAdditionalPropertyOrderChange]);
+    const root = useMemo(() => ({ defs: isPlainObject(schema) && isPlainObject(schema.$defs) ? schema.$defs : undefined, sink: props.sink }), [schema, props.sink]);
+    const runtime = useFormRuntime(formik, registry, root);
+    const shell = formShell(hole("fields"), { className, hideSubmit: !!props.hideSubmit, submitting: formik?.isSubmitting, children: children !== undefined && children !== null && children !== false ? hole("children") : undefined });
+    const holes = { fields: _jsx(registry.fields.SchemaField, { name: "", schema: schema, uiSchema: uiSchema }), children };
+    return (_jsx(FormRegistry.Provider, { value: registry, children: _jsx(FormRuntimeContext.Provider, { value: runtime, children: toReact(shell, { host: formHost(registry, undefined, holes), bind: formBind(runtime, formik) }) }) }));
+};

package/dist/esm/v3/react/form/runtime.js

@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { isPlainObject } from "../../raw/core/json";
+import { setIn } from "../../raw/core/paths";
+import { applyAction } from "../../raw/model/form";
+/** 2.x DateInput openPicker: the native date input's picker, or focus + click. */
+const openPicker = (id) => {
+    const el = globalThis.document?.getElementById(id);
+    if (!el)
+        return;
+    try {
+        if (typeof el.showPicker === "function")
+            el.showPicker();
+        else {
+            el.focus();
+            el.click();
+        }
+    }
+    catch {
+        el.focus();
+        el.click();
+    }
+};
+export const useFormRuntime = (formik, registry, root) => {
+    const [ui, setUi] = useState({});
+    const latest = useRef({ formik, registry, ui });
+    latest.current = { formik, registry, ui };
+    const pending = useRef([]);
+    const flush = useCallback(() => {
+        const queue = pending.current.splice(0);
+        const f = latest.current.formik;
+        if (!queue.length || !f)
+            return;
+        const before = f.values;
+        const next = queue.reduce((values, transform) => transform(values), before);
+        if (next !== before)
+            f.setValues(next);
+    }, []);
+    const settle = useCallback((transform) => {
+        if (pending.current.push(transform) === 1)
+            queueMicrotask(flush);
+    }, [flush]);
+    // The root's effect runs after every boundary's effect of the same commit.
+    useEffect(() => flush());
+    // 2.x searchable selects listened to the document's keydown while open; the bindings register them here.
+    const keyHandlers = useRef(new Map());
+    const keyTargets = useRef(new Map());
+    useEffect(() => {
+        const doc = globalThis.document;
+        if (!doc)
+            return;
+        // Q-SEL-1: only the open select whose container holds the key's target (the focused one) reacts.
+        const onKey = (e) => keyHandlers.current.forEach((action, path) => {
+            const el = keyTargets.current.get(path);
+            if (!el || el.contains(e.target))
+                latestDispatch.current(action, { keyName: e.key });
+        });
+        doc.addEventListener("keydown", onKey);
+        return () => doc.removeEventListener("keydown", onKey);
+    }, []);
+    const dispatch = useCallback((action, event = {}) => {
+        const { formik: f, registry: r, ui: u } = latest.current;
+        if (!f)
+            return;
+        const effect = applyAction(action, f.values, event, u);
+        if (effect.askKey) {
+            const key = typeof globalThis.prompt === "function" ? globalThis.prompt("Give key") : null;
+            return key ? dispatch(action, { ...event, key }) : undefined;
+        }
+        if (effect.touchQuietly !== undefined)
+            f.setFieldTouched(effect.touchQuietly, true, false);
+        if (effect.error)
+            f.setFieldError(effect.error.path, effect.error.message);
+        if (effect.picker)
+            openPicker(effect.picker);
+        if (effect.set) {
+            const { path, value } = effect.set;
+            if (!path)
+                f.setValues(value);
+            // BUG-109: formik's setIn throws on a primitive root (wrong-typed stored data); it becomes an object.
+            else if (!isPlainObject(f.values))
+                f.setValues(setIn({}, path, value));
+            else
+                f.setFieldValue(path, value);
+        }
+        if (effect.touch !== undefined)
+            f.setFieldTouched(effect.touch, true);
+        if (effect.ui)
+            setUi(effect.ui);
+        if (effect.order)
+            r.onAdditionalPropertyOrderChange?.(effect.order.path, effect.order.previous, effect.order.next);
+    }, []);
+    const latestDispatch = useRef(dispatch);
+    latestDispatch.current = dispatch;
+    const onDocumentKey = useCallback((path, action) => {
+        if (action)
+            keyHandlers.current.set(path, action);
+        else
+            keyHandlers.current.delete(path);
+    }, []);
+    const keyTarget = useCallback((path) => (el) => void (el ? keyTargets.current.set(path, el) : keyTargets.current.delete(path)), []);
+    // 2.x scrolled the active option into view (block "center"); guarded, once per change of the active option.
+    const scrolled = useRef(new Map());
+    const scrollActive = useCallback((path, index) => (el) => {
+        if (!el || scrolled.current.get(path) === index)
+            return;
+        scrolled.current.set(path, index);
+        if (typeof el.scrollIntoView === "function")
+            el.scrollIntoView({ behavior: "auto", block: "center", inline: "center" });
+    }, []);
+    const clearActive = useCallback((path) => void scrolled.current.delete(path), []);
+    const keepAnyTypes = useCallback((guesses) => setUi((u) => ({ ...u, anyTypes: { ...guesses, ...u.anyTypes } })), []);
+    return useMemo(() => ({ ui, dispatch, settle, onDocumentKey, keyTarget, keepAnyTypes, scrollActive, clearActive, ...root }), [ui, dispatch, settle, onDocumentKey, keyTarget, keepAnyTypes, scrollActive, clearActive, root.defs, root.sink]);
+};