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

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

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formCompatComponents = exports.FormComponents = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const formik_1 = require("formik");
+const paths_1 = require("../../raw/core/paths");
+const classes_1 = require("../../raw/model/classes");
+const componentTable_1 = require("../../raw/model/form/componentTable");
+const chrome_1 = require("../../raw/model/form/chrome");
+const form_1 = require("../../raw/model/form");
+const toReact_1 = require("../toReact");
+const slots_1 = require("../slots");
+const selector_1 = require("../selector");
+const host_1 = require("./host");
+const fields_1 = require("./fields");
+const choice_1 = require("../../raw/model/form/choice");
+const registry_1 = require("./registry");
+const cx = (...names) => names.filter((n) => typeof n === "string" && n).join(" ");
+const primitive = (name, [tag, ...chain]) => {
+    const classes = (0, classes_1.expandClasses)(chain.map((n) => `fjsf-${n}`));
+    // `Default` (a slot's prop, forwarded by styled(FormComponents.X) slots) is never a DOM attribute.
+    const C = (0, react_1.forwardRef)(({ className, Default: _default, ...props }, ref) => (0, react_1.createElement)(tag, { ...props, ref, className: cx(...classes, className) }));
+    C.displayName = name;
+    return (0, selector_1.asStyledSelector)(C, tag, classes);
+};
+const P = (name) => primitive(name, componentTable_1.FORM_COMPONENTS[name]);
+/** 2.x ErrorMessage: the field's error once it is touched. */
+const ErrorMessage = ({ name }) => {
+    const formik = (0, formik_1.useFormikContext)();
+    const error = (0, paths_1.getIn)(formik?.errors, name);
+    if (!(0, paths_1.getIn)(formik?.touched, name) || typeof error !== "string" || !error)
+        return null;
+    return (0, jsx_runtime_1.jsx)("div", { className: "fjsf-ErrorText", children: error });
+};
+/** 2.x FieldInfo (ui:info): tooltip, or inline toggled by the link. */
+const FieldInfo = (props) => {
+    const runtime = (0, react_1.useContext)(registry_1.FormRuntimeContext);
+    const formik = (0, formik_1.useFormikContext)();
+    const { formOptions } = (0, react_1.useContext)(registry_1.FormRegistry);
+    const id = (0, react_1.useId)();
+    const ctx = (0, form_1.createFormContext)(undefined, undefined, { values: {} }, { ui: runtime.ui, formOptions });
+    // Rendered without the host: through it, `FieldInfo` would resolve to this component again.
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, toReact_1.toReact)((0, chrome_1.infoMarkup)(ctx, id, props), { bind: (0, host_1.formBind)(runtime, formik) }) });
+};
+/** 2.x Form ObjectFieldSection: fieldset + legend, collapsible sections start collapsed. */
+const ObjectFieldSection = ({ title, collapsible, children }) => {
+    const [collapsed, setCollapsed] = (0, react_1.useState)(!!collapsible);
+    const { components: c } = (0, react_1.useContext)(registry_1.FormRegistry);
+    return ((0, jsx_runtime_1.jsxs)(c.ObjectFieldSectionWrapper, { "data-fjsf-section": title ?? "", children: [(0, jsx_runtime_1.jsxs)(c.ObjectFieldSectionTitle, { ...(collapsible ? { "data-fjsf-button": "collapse" } : {}), onClick: () => collapsible && setCollapsed((v) => !v), children: [title, (0, jsx_runtime_1.jsx)(c.IconWrapper, { children: collapsible && (collapsed ? "▸" : "▾") })] }), (0, jsx_runtime_1.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 }) => ((0, jsx_runtime_1.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 = (0, fields_1.useFormBuild)();
+        const render = (0, host_1.useFormRender)();
+        const p = { name: props.name, schema: { readOnly: props.inputProps?.readOnly }, ui: { "ui:props": props.inputProps ?? {} } };
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: render(markup(ctx, p, props)) });
+    };
+    C.displayName = name;
+    return C;
+};
+exports.FormComponents = {
+    ...Object.fromEntries(Object.entries(componentTable_1.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) => (0, choice_1.radioInputsMarkup)(ctx, p, props.label)),
+    ToggleFieldInput: inputComponent("ToggleFieldInput", (ctx, p) => (0, choice_1.toggleInputMarkup)(ctx, p)),
+    MultipleChoiceFieldInput: inputComponent("MultipleChoiceFieldInput", (ctx, p, props) => (0, choice_1.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(componentTable_1.FORM_COMPONENTS)
+    .filter((k) => componentTable_1.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). */
+const formCompatComponents = (slots = {}) => (0, slots_1.withSlots)(exports.FormComponents, FALLBACK, slots, { SubmitButton: "FormButton" });
+exports.formCompatComponents = formCompatComponents;

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

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormFields = exports.SchemaField = exports.childProps = exports.useFormBuild = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const formik_1 = require("formik");
+const form_1 = require("../../raw/model/form");
+const chain_1 = require("../chain");
+const host_1 = require("./host");
+const registry_1 = require("./registry");
+const upload_1 = require("./upload");
+/** The RAW build context of the current form: Formik state, registry, replaced fields, UI state. */
+const useFormBuild = () => {
+    const registry = (0, react_1.useContext)(registry_1.FormRegistry);
+    const runtime = (0, react_1.useContext)(registry_1.FormRuntimeContext);
+    const formik = (0, formik_1.useFormikContext)();
+    const fields = registry.fields ?? {};
+    return (0, form_1.createFormContext)(undefined, undefined, { values: formik?.values ?? {}, errors: formik?.errors, touched: formik?.touched, submitting: formik?.isSubmitting }, {
+        customFields: Object.keys(fields).filter((key) => fields[key] !== exports.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,
+    });
+};
+exports.useFormBuild = useFormBuild;
+/** 2.x field props -> the RAW child props. */
+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"] } : {}),
+});
+exports.childProps = childProps;
+const formFieldComponent = (displayName, build) => {
+    const F = (props) => {
+        const ctx = (0, exports.useFormBuild)();
+        const chain = (0, react_1.useContext)(chain_1.ChainContext);
+        const runtime = (0, react_1.useContext)(registry_1.FormRuntimeContext);
+        const render = (0, host_1.useFormRender)();
+        const seen = (0, react_1.useRef)(new Set());
+        const node = build(ctx, (0, exports.childProps)(props), chain);
+        (0, react_1.useEffect)(() => {
+            const fresh = (0, form_1.newAppearances)(ctx.appeared, seen.current);
+            if (fresh.length || ctx.prune.length)
+                runtime.settle((values) => (0, form_1.settle)(values, fresh, ctx.prune));
+            if (Object.keys(ctx.anyGuesses).length)
+                runtime.keepAnyTypes?.(ctx.anyGuesses);
+        });
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: render(node) });
+    };
+    F.displayName = displayName;
+    return F;
+};
+exports.SchemaField = formFieldComponent("SchemaField", (ctx, p, chain) => (0, form_1.formField)(ctx, p, chain));
+const NAMES = [
+    "AnyField", "ArrayField", "BooleanField", "DateField", "FileUploadField", "FilesUploadField", "MultipleChoiceField", "NullField",
+    "NumberField", "ObjectField", "RadioField", "SearchableMultiTagSelectField", "SearchableSelectField", "StringField", "TextAreaField", "ToggleField",
+];
+exports.FormFields = {
+    ...Object.fromEntries(NAMES.map((name) => [name, formFieldComponent(name, (ctx, p, chain) => (0, form_1.builtIn)(ctx, name, p, chain))])),
+    SchemaField: exports.SchemaField,
+    // Upload state is async and host-provided: React components over the RAW upload markup (upload.tsx).
+    FileUploadField: ((props) => (0, jsx_runtime_1.jsx)(upload_1.FileUploadField, { ...props })),
+    FilesUploadField: ((props) => (0, jsx_runtime_1.jsx)(upload_1.FilesUploadField, { ...props })),
+};

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

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormRender = exports.formBind = exports.formHost = void 0;
+const react_1 = require("react");
+const formik_1 = require("formik");
+const classes_1 = require("../../raw/model/classes");
+const componentTable_1 = require("../../raw/model/form/componentTable");
+const hostCore_1 = require("../hostCore");
+const toReact_1 = require("../toReact");
+const components_1 = require("./components");
+const templates_1 = require("./templates");
+const registry_1 = require("./registry");
+const chainClasses = (names) => {
+    const entry = names.map((n) => componentTable_1.FORM_COMPONENTS[n]).find(Array.isArray);
+    return entry ? (0, classes_1.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.
+exports.formHost = (0, hostCore_1.createHost)({
+    get components() {
+        return components_1.FormComponents;
+    },
+    get templates() {
+        return templates_1.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 ? (0, toReact_1.toReact)(host.children[0], env) : host.children.map((c, i) => (0, react_1.createElement)(react_1.Fragment, { key: i }, (0, toReact_1.toReact)(c, env)))
+        : host.children.map((c, i) => (0, react_1.createElement)(react_1.Fragment, { key: i }, (0, toReact_1.toReact)(c, env))),
+});
+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;
+};
+exports.formBind = formBind;
+/** toReact with the current registry and runtime; holes are where React children go. */
+const useFormRender = () => {
+    const registry = (0, react_1.useContext)(registry_1.FormRegistry);
+    const runtime = (0, react_1.useContext)(registry_1.FormRuntimeContext);
+    const formik = (0, formik_1.useFormikContext)();
+    return (node, hole, holes) => (0, toReact_1.toReact)(node, { host: (0, exports.formHost)(registry, hole, holes), bind: (0, exports.formBind)(runtime, formik) });
+};
+exports.useFormRender = useFormRender;

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

@@ -1,19 +1,18 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormRegistry = void 0;
-const react_1 = __importDefault(require("react"));
-exports.FormRegistry = react_1.default.createContext({
+exports.FormRuntimeContext = exports.FormRegistry = void 0;
+const react_1 = require("react");
+exports.FormRegistry = (0, react_1.createContext)({
     fields: {},
     templates: {},
     components: {},
     definitions: {},
     uiSchemaDefinitions: {},
     formContext: {},
-    formLocalization: {},
     formOptions: {},
+    formLocalization: {},
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
 });
+const noRuntime = { ui: {}, dispatch: () => undefined, settle: () => undefined };
+exports.FormRuntimeContext = (0, react_1.createContext)(noRuntime);

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const formik_1 = require("formik");
+const json_1 = require("../../raw/core/json");
+const componentsProp_1 = require("../componentsProp");
+const defined_1 = require("../defined");
+const form_1 = require("../../raw/model/form");
+const vnode_1 = require("../../raw/model/vnode");
+const toReact_1 = require("../toReact");
+const components_1 = require("./components");
+const fields_1 = require("./fields");
+const host_1 = require("./host");
+const registry_1 = require("./registry");
+const runtime_1 = require("./runtime");
+const templates_1 = require("./templates");
+const Form = (props) => {
+    (0, componentsProp_1.warnComponentsProp)(props.components);
+    const { schema, uiSchema = {}, className, children, fields, templates, slots, formContext = {}, formOptions = {}, formLocalization = {} } = props;
+    const formik = (0, formik_1.useFormikContext)();
+    const registry = (0, react_1.useMemo)(() => ({
+        fields: { ...fields_1.FormFields, ...(0, defined_1.defined)(fields) },
+        templates: { ...templates_1.FormTemplates, ...templates },
+        components: (0, components_1.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 = (0, react_1.useMemo)(() => ({ defs: (0, json_1.isPlainObject)(schema) && (0, json_1.isPlainObject)(schema.$defs) ? schema.$defs : undefined, sink: props.sink }), [schema, props.sink]);
+    const runtime = (0, runtime_1.useFormRuntime)(formik, registry, root);
+    const shell = (0, form_1.formShell)((0, vnode_1.hole)("fields"), { className, hideSubmit: !!props.hideSubmit, submitting: formik?.isSubmitting, children: children !== undefined && children !== null && children !== false ? (0, vnode_1.hole)("children") : undefined });
+    const holes = { fields: (0, jsx_runtime_1.jsx)(registry.fields.SchemaField, { name: "", schema: schema, uiSchema: uiSchema }), children };
+    return ((0, jsx_runtime_1.jsx)(registry_1.FormRegistry.Provider, { value: registry, children: (0, jsx_runtime_1.jsx)(registry_1.FormRuntimeContext.Provider, { value: runtime, children: (0, toReact_1.toReact)(shell, { host: (0, host_1.formHost)(registry, undefined, holes), bind: (0, host_1.formBind)(runtime, formik) }) }) }));
+};
+exports.Form = Form;

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

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormRuntime = void 0;
+const react_1 = require("react");
+const json_1 = require("../../raw/core/json");
+const paths_1 = require("../../raw/core/paths");
+const form_1 = require("../../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();
+    }
+};
+const useFormRuntime = (formik, registry, root) => {
+    const [ui, setUi] = (0, react_1.useState)({});
+    const latest = (0, react_1.useRef)({ formik, registry, ui });
+    latest.current = { formik, registry, ui };
+    const pending = (0, react_1.useRef)([]);
+    const flush = (0, react_1.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 = (0, react_1.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.
+    (0, react_1.useEffect)(() => flush());
+    // 2.x searchable selects listened to the document's keydown while open; the bindings register them here.
+    const keyHandlers = (0, react_1.useRef)(new Map());
+    const keyTargets = (0, react_1.useRef)(new Map());
+    (0, react_1.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 = (0, react_1.useCallback)((action, event = {}) => {
+        const { formik: f, registry: r, ui: u } = latest.current;
+        if (!f)
+            return;
+        const effect = (0, form_1.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 (!(0, json_1.isPlainObject)(f.values))
+                f.setValues((0, paths_1.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 = (0, react_1.useRef)(dispatch);
+    latestDispatch.current = dispatch;
+    const onDocumentKey = (0, react_1.useCallback)((path, action) => {
+        if (action)
+            keyHandlers.current.set(path, action);
+        else
+            keyHandlers.current.delete(path);
+    }, []);
+    const keyTarget = (0, react_1.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 = (0, react_1.useRef)(new Map());
+    const scrollActive = (0, react_1.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 = (0, react_1.useCallback)((path) => void scrolled.current.delete(path), []);
+    const keepAnyTypes = (0, react_1.useCallback)((guesses) => setUi((u) => ({ ...u, anyTypes: { ...guesses, ...u.anyTypes } })), []);
+    return (0, react_1.useMemo)(() => ({ ui, dispatch, settle, onDocumentKey, keyTarget, keepAnyTypes, scrollActive, clearActive, ...root }), [ui, dispatch, settle, onDocumentKey, keyTarget, keepAnyTypes, scrollActive, clearActive, root.defs, root.sink]);
+};
+exports.useFormRuntime = useFormRuntime;

package/dist/cjs/v3/react/form/templates.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormTemplates = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const chrome_1 = require("../../raw/model/form/chrome");
+const markup_1 = require("../../raw/model/form/markup");
+const uiSchema_1 = require("../../raw/core/uiSchema");
+const paths_1 = require("../../raw/core/paths");
+const titles_1 = require("../../raw/core/titles");
+const vnode_1 = require("../../raw/model/vnode");
+const fields_1 = require("./fields");
+const host_1 = require("./host");
+const fieldProps = (props) => ({
+    name: props.name ?? "",
+    schema: props.schema,
+    ui: props.uiSchema,
+    required: !!props.required,
+    kind: props["data-fjsf-kind"],
+    hidden: props["data-fjsf-hidden"] === "true",
+    data: Object.fromEntries(Object.entries(props).filter(([k]) => k.startsWith("data-") && k !== "data-fjsf-kind" && k !== "data-fjsf-hidden")),
+});
+const FieldTemplate = (props) => {
+    const ctx = (0, fields_1.useFormBuild)();
+    const render = (0, host_1.useFormRender)();
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: render((0, markup_1.fieldTemplateMarkup)((0, chrome_1.formChrome)(ctx, fieldProps(props)), [(0, vnode_1.hole)()]), props.children) });
+};
+const ObjectFieldTemplate = (props) => {
+    const ctx = (0, fields_1.useFormBuild)();
+    const render = (0, host_1.useFormRender)();
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: render((0, markup_1.objectTemplateMarkup)((0, chrome_1.formChrome)(ctx, fieldProps(props), false), [(0, vnode_1.hole)()]), props.children) });
+};
+const CollapsibleObjectFieldTemplate = (props) => {
+    const ctx = (0, fields_1.useFormBuild)();
+    const render = (0, host_1.useFormRender)();
+    const ui = (0, uiSchema_1.extractUiSchema)(props.uiSchema);
+    const id = `${props.name ?? ""}#object`;
+    const collapsed = !!(ctx.ui.collapsed?.[id] ?? ui.isCollapsedOnLoad ?? true);
+    const icon = String(collapsed ? ui.collapsedIcon ?? "▸" : ui.openIcon ?? "▾");
+    const chrome = (0, chrome_1.formChrome)(ctx, fieldProps(props), false);
+    // 2.x: setTitleValues(name, getTitle ?? "", ui:options.defaultTitle ?? "", values).
+    const title = typeof chrome.title === "string" || chrome.title === undefined ? (0, titles_1.setTitleValues)(props.name ?? "", chrome.title ?? "", String(ui.defaultTitle ?? ""), ctx.values) || undefined : chrome.title;
+    const markup = (0, markup_1.collapsibleTemplateMarkup)({ ...chrome, title }, [(0, vnode_1.hole)()], { collapsed, id, ariaLabel: String(ui.props?.ariaLabel ?? props.name ?? ""), icon });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: render(markup, props.children) });
+};
+const ArrayFieldTemplate = (props) => {
+    const ctx = (0, fields_1.useFormBuild)();
+    const render = (0, host_1.useFormRender)();
+    const name = props.name ?? "";
+    const error = typeof (0, paths_1.getIn)(ctx.errors, name) === "string" ? (0, chrome_1.errorMarkup)(ctx, name, (0, uiSchema_1.extractUiSchema)(props.uiSchema).props?.error) : null;
+    const items = Array.isArray(props.items) ? props.items.map((item, index) => props.renderItem(item, index)) : null;
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: render((0, markup_1.arrayTemplateMarkup)({ ...(0, chrome_1.formChrome)(ctx, fieldProps(props), false), error }, [(0, vnode_1.hole)()]), items) });
+};
+exports.FormTemplates = {
+    ArrayFieldTemplate,
+    CollapsibleObjectFieldTemplate,
+    FieldTemplate,
+    ObjectFieldTemplate,
+};