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

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

@@ -0,0 +1,55 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { errorMarkup, formChrome } from "../../raw/model/form/chrome";
+import { arrayTemplateMarkup, collapsibleTemplateMarkup, fieldTemplateMarkup, objectTemplateMarkup } from "../../raw/model/form/markup";
+import { extractUiSchema } from "../../raw/core/uiSchema";
+import { getIn } from "../../raw/core/paths";
+import { setTitleValues } from "../../raw/core/titles";
+import { hole } from "../../raw/model/vnode";
+import { useFormBuild } from "./fields";
+import { useFormRender } from "./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 = useFormBuild();
+    const render = useFormRender();
+    return _jsx(_Fragment, { children: render(fieldTemplateMarkup(formChrome(ctx, fieldProps(props)), [hole()]), props.children) });
+};
+const ObjectFieldTemplate = (props) => {
+    const ctx = useFormBuild();
+    const render = useFormRender();
+    return _jsx(_Fragment, { children: render(objectTemplateMarkup(formChrome(ctx, fieldProps(props), false), [hole()]), props.children) });
+};
+const CollapsibleObjectFieldTemplate = (props) => {
+    const ctx = useFormBuild();
+    const render = useFormRender();
+    const ui = 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 = formChrome(ctx, fieldProps(props), false);
+    // 2.x: setTitleValues(name, getTitle ?? "", ui:options.defaultTitle ?? "", values).
+    const title = typeof chrome.title === "string" || chrome.title === undefined ? setTitleValues(props.name ?? "", chrome.title ?? "", String(ui.defaultTitle ?? ""), ctx.values) || undefined : chrome.title;
+    const markup = collapsibleTemplateMarkup({ ...chrome, title }, [hole()], { collapsed, id, ariaLabel: String(ui.props?.ariaLabel ?? props.name ?? ""), icon });
+    return _jsx(_Fragment, { children: render(markup, props.children) });
+};
+const ArrayFieldTemplate = (props) => {
+    const ctx = useFormBuild();
+    const render = useFormRender();
+    const name = props.name ?? "";
+    const error = typeof getIn(ctx.errors, name) === "string" ? errorMarkup(ctx, name, extractUiSchema(props.uiSchema).props?.error) : null;
+    const items = Array.isArray(props.items) ? props.items.map((item, index) => props.renderItem(item, index)) : null;
+    return _jsx(_Fragment, { children: render(arrayTemplateMarkup({ ...formChrome(ctx, fieldProps(props), false), error }, [hole()]), items) });
+};
+export const FormTemplates = {
+    ArrayFieldTemplate,
+    CollapsibleObjectFieldTemplate,
+    FieldTemplate,
+    ObjectFieldTemplate,
+};

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

@@ -0,0 +1,168 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useFormikContext } from "formik";
+import { getIn } from "../../raw/core/paths";
+import { fileUploadMarkup, filesOf, filesUploadMarkup } from "../../raw/model/form/upload";
+import { toReact } from "../toReact";
+import { childProps, useFormBuild } from "./fields";
+import { formBind, formHost } from "./host";
+import { FormRegistry, FormRuntimeContext } from "./registry";
+import { FileUploadContext, FilesUploadContext } from "./uploadContexts";
+const click = (id) => globalThis.document?.getElementById(id)?.click();
+/** Renders RAW markup: upload actions go to `local`, everything else to the Form runtime. */
+const useRender = (local) => {
+    const registry = useContext(FormRegistry);
+    const runtime = useContext(FormRuntimeContext);
+    const formik = useFormikContext();
+    const base = formBind(runtime, formik);
+    return (markup) => toReact(markup, {
+        host: formHost(registry),
+        bind: (node, props) => {
+            const out = base(node, props);
+            for (const [event, action] of Object.entries(node.on ?? {})) {
+                const handle = local[action?.type];
+                if (!handle)
+                    continue;
+                const name = { change: "onChange", click: "onClick", dragenter: "onDragEnter", dragleave: "onDragLeave", dragover: "onDragOver", drop: "onDrop" }[event];
+                if (name)
+                    out[name] = (e) => handle(e, action);
+            }
+            return out;
+        },
+    });
+};
+export const FileUploadField = (props) => {
+    const ctx = useFormBuild();
+    const formik = useFormikContext();
+    const { uploadFile, fetchFile, removeFile } = useContext(FileUploadContext);
+    const value = getIn(formik?.values, props.name);
+    const [uploadedFile, setUploadedFile] = useState(null);
+    const [progress, setProgress] = useState(0);
+    // The fake-progress timer must not outlive the field.
+    const timer = useRef(undefined);
+    useEffect(() => () => clearInterval(timer.current), []);
+    useEffect(() => {
+        let alive = true;
+        Promise.resolve()
+            .then(() => fetchFile(value))
+            .then((file) => alive && setUploadedFile(file ?? null), () => alive && setUploadedFile(null));
+        return () => void (alive = false);
+    }, [value]);
+    const upload = async (file) => {
+        const data = new FormData();
+        data.append("file", file);
+        try {
+            // 2.x: a fake progress so the bar shows for fast uploads, then the real one at 100%.
+            let fake = 0;
+            clearInterval(timer.current);
+            timer.current = setInterval(() => ((fake += 10) <= 100 ? setProgress(fake) : clearInterval(timer.current)), 100);
+            const result = await uploadFile({ data, onUploadProgress: (e) => e.total != null && Math.round((e.loaded * 100) / e.total) === 100 && setProgress(100) });
+            formik.setFieldValue(props.name, result);
+        }
+        catch (error) {
+            console.error("File upload failed", error);
+        }
+    };
+    const render = useRender({
+        filePick: (_e, action) => !action.locked && click(action.id),
+        fileChosen: (e) => {
+            const file = e.currentTarget.files?.[0];
+            if (file) {
+                void upload(file);
+                e.target.value = null;
+            }
+        },
+        fileRemove: async () => {
+            if (uploadedFile?.name && props.schema?.readOnly !== true) {
+                await removeFile(String(uploadedFile.name));
+                setProgress(0);
+                formik.setFieldValue(props.name, null);
+            }
+        },
+    });
+    return _jsx(_Fragment, { children: render(fileUploadMarkup(ctx, childProps(props), { value, uploadedFile, progress })) });
+};
+/** 2.x handleDrop's accept filter. */
+const accepted = (file, types) => {
+    const list = Array.isArray(types) ? types : typeof types === "string" ? types.split(",").map((t) => t.trim()).filter(Boolean) : [];
+    return !list.length || list.some((t) => (t.endsWith("/*") ? file.type.startsWith(t.slice(0, -2)) : t === file.type));
+};
+export const FilesUploadField = (props) => {
+    const ctx = useFormBuild();
+    const formik = useFormikContext();
+    const { uploadFiles, removeFile } = useContext(FilesUploadContext);
+    // 2.x memoised this: a fresh [] per render would re-run the effect below on every render.
+    const stored = getIn(formik?.values, props.name);
+    const value = useMemo(() => stored ?? [], [stored]);
+    const [files, setFiles] = useState([]);
+    const [progress, setProgress] = useState({});
+    const [dragging, setDragging] = useState(false);
+    const depth = useRef(0);
+    const readOnly = props.schema?.readOnly === true;
+    const ip = props.uiSchema?.["ui:props"] ?? props.uiSchema?.props ?? {};
+    const multiple = ip.allowMultipleFiles ?? true;
+    useEffect(() => {
+        if (!Array.isArray(value))
+            return;
+        setFiles(filesOf(value));
+        filesOf(value).forEach((f) => setProgress((p) => ({ ...p, [f.progressId]: 100 })));
+    }, [value]);
+    const upload = async (list) => {
+        const withIds = list.map((data) => ({ data, progressId: data.name + data.size + data.lastModified + Math.random() }));
+        setFiles((f) => f.concat(withIds.map(({ data, progressId }) => ({ name: data.name, size: data.size, progressId, mimeType: data.type, id: null }))));
+        try {
+            const result = await uploadFiles({ files: withIds, onUploadProgress: (e, id) => e.total != null && setProgress((p) => ({ ...p, [id]: Math.round((e.loaded * 100) / e.total) })) });
+            setFiles((prev) => prev.map((item) => ({ ...item, id: result.find((r) => r.progressId === item.progressId)?.id ?? item.id })));
+            formik.setFieldValue(props.name, (Array.isArray(value) ? value : []).concat(result.map(({ progressId: _p, ...rest }) => rest)));
+        }
+        catch (error) {
+            console.error("File upload failed", error);
+        }
+    };
+    const stop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+    const render = useRender({
+        filePick: (_e, action) => !action.locked && click(action.id),
+        filesChosen: (e) => e.target.files && void upload([...e.target.files]),
+        filesRemove: async (_e, action) => {
+            const file = files.find((f) => f.progressId === action.progressId);
+            if (!file?.id)
+                return;
+            await removeFile(file);
+            setProgress(({ [file.progressId]: _gone, ...rest }) => rest);
+            setFiles((prev) => prev.filter((f) => f.id !== file.id));
+            formik.setFieldValue(props.name, (Array.isArray(value) ? value : []).filter((f) => f?.id !== file.id));
+        },
+        filesDrag: (e, action) => {
+            if (readOnly)
+                return;
+            stop(e);
+            if (action.enter === true) {
+                depth.current++;
+                if (e.dataTransfer?.items?.length)
+                    setDragging(true);
+            }
+            else if (action.enter === false && --depth.current === 0)
+                setDragging(false);
+        },
+        filesDrop: (e) => {
+            if (readOnly)
+                return;
+            stop(e);
+            setDragging(false);
+            depth.current = 0;
+            let dropped = [...(e.dataTransfer?.files ?? [])];
+            if (!multiple && files.length > 0)
+                dropped = [];
+            else if (!multiple)
+                dropped = dropped.slice(0, 1);
+            dropped = dropped.filter((f) => accepted(f, ip.acceptedFiletypes));
+            if (dropped.length)
+                void upload(dropped);
+            e.dataTransfer?.clearData?.();
+        },
+    });
+    return _jsx(_Fragment, { children: render(filesUploadMarkup(ctx, childProps(props), { value, files, progress, dragging })) });
+};

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

@@ -0,0 +1,24 @@
+// FileUploadContext / FilesUploadContext: the host's upload functions (2.x src/common/File(s)UploadContext,
+// same shape and defaults). pro3 provides them around its forms.
+import { createContext } from "react";
+export const FileUploadContext = createContext({
+    uploadFile: () => {
+        console.error("Lacking upload from FileUploadContext");
+        return Promise.reject();
+    },
+    fetchFile: (value) => Promise.resolve(value),
+    removeFile: () => {
+        console.error("Lacking remove from FileUploadContext");
+        return Promise.reject();
+    },
+});
+export const FilesUploadContext = createContext({
+    uploadFiles: () => {
+        console.error("Lacking upload from FilesUploadContext");
+        return Promise.reject();
+    },
+    removeFile: () => {
+        console.error("Lacking remove from FileUploadContext");
+        return Promise.reject();
+    },
+});

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

@@ -0,0 +1,17 @@
+// useSetDefault: deprecated 3.x wrapper over the RAW defaults (§3.1, §2.7). 2.x called useField
+// after an early return (rules of hooks); this calls its hooks unconditionally and sets the
+// default once, on mount, when the value is unset (D2 Q-FMK-2: falsy defaults are honoured).
+import { useEffect } from "react";
+import { useFormikContext } from "formik";
+import { defaultFor } from "../../raw/core/defaults";
+import { getIn } from "../../raw/core/paths";
+export const useSetDefault = (props) => {
+    const formik = useFormikContext();
+    useEffect(() => {
+        if (!props.name || !formik)
+            return;
+        const value = defaultFor(props.schema, getIn(formik.values, props.name), { forceDefaultValue: props.forceDefaultValue });
+        if (value !== undefined)
+            formik.setFieldValue(props.name, value);
+    }, []);
+};

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

@@ -0,0 +1,52 @@
+import { createElement, Fragment, isValidElement } from "react";
+import { extractUiSchema } from "../raw/core/uiSchema";
+import { ChainContext } from "./chain";
+import { reactProps, toReact } from "./toReact";
+/** Own entries only: a uiSchema naming `constructor` or `toString` finds nothing (SEC-6, SEC-SSR-3). */
+export const own = (map, name) => map && name !== undefined && Object.prototype.hasOwnProperty.call(map, name) ? map[name] : undefined;
+/** 2.x `components.A ?? components.B`. */
+export const lookup = (map, names) => {
+    for (const name of names)
+        if (own(map, name) !== undefined)
+            return map[name];
+    return undefined;
+};
+/** Continues the $ref chain below a React boundary. */
+export const chained = (chain, element) => (chain?.length ? createElement(ChainContext.Provider, { value: chain }, element) : element);
+export const createHost = (defaults) => (registry, hole, holes = {}) => (node, native, env) => {
+    const host = node.host;
+    switch (host.kind) {
+        case "hole":
+            return (host.name ? holes[host.name] : hole) ?? null;
+        case "value":
+            return isValidElement(host.value) ? host.value : native();
+        case "component": {
+            const C = lookup(registry.components ?? {}, host.names);
+            if (C === undefined || C === lookup(defaults.components, host.names))
+                return native();
+            if (host.props)
+                return createElement(C, host.props, ...(host.children ?? []).map((c) => toReact(c, env)));
+            // The override gets the element's props (and handlers); the default classes belong to the default primitive.
+            const base = reactProps(node.attrs);
+            const { className, ...props } = node.on && env.bind ? env.bind(node, base) : base;
+            const library = new Set(defaults.defaultClasses(host.names));
+            const mine = String(className ?? "").split(" ").filter((c) => c && !library.has(c)).join(" ");
+            return createElement(C, mine ? { ...props, className: mine } : props, ...node.children.map((c) => toReact(c, env)));
+        }
+        case "template": {
+            const T = own(registry.templates, host.override) || own(registry.templates, host.template);
+            if (!T || T === defaults.templates[host.template])
+                return native();
+            if (host.template === "ArrayFieldTemplate") {
+                const renderItem = (_, index) => createElement(Fragment, { key: index }, toReact(host.itemNodes?.[index], env));
+                return chained(host.chain, createElement(T, { ...host.props, items: host.items, renderItem }));
+            }
+            return chained(host.chain, createElement(T, { ...host.props, children: defaults.children(registry, host, env) }));
+        }
+        case "field": {
+            const fn = extractUiSchema(host.props.uiSchema).field;
+            const F = typeof fn === "function" ? fn : own(registry.fields, host.field);
+            return F ? chained(host.chain, createElement(F, host.props)) : native();
+        }
+    }
+};

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

@@ -0,0 +1,18 @@
+// @nolwenture/formik-jsonschema-form/react (v3): the React layer over the RAW core.
+// S3: the read-only FormView (pro3's view and PDF path). S4: the Form.
+export { FormView } from "./view/root";
+export { FormViewRegistry } from "./view/registry";
+export { FormViewFields, SchemaField } from "./view/fields";
+export { FormViewTemplates } from "./view/templates";
+export { FormViewComponents, compatComponents } from "./view/components";
+export { reactProps, toReact } from "./toReact";
+export { Form } from "./form/root";
+export { FormRegistry } from "./form/registry";
+export { FormFields, SchemaField as FormSchemaField } from "./form/fields";
+export { FormTemplates } from "./form/templates";
+export { FormComponents, formCompatComponents } from "./form/components";
+/** @deprecated 3.x: defaults are applied per node appearance (§2.7a); kept as a wrapper. */
+export { useSetDefault } from "./form/useSetDefault";
+export { FileUploadContext, FilesUploadContext } from "./form/uploadContexts";
+// S7: styling (§4.3), the same helpers as `./raw`: load `styles.css` (or getDefaultStyles()) and set the theme variables.
+export { cssVarsToString, fjsfClassNames, fjsfSelectors, getDefaultStyles, themeToCssVars } from "../raw/styles";

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

@@ -0,0 +1,13 @@
+/** `classes`: the element's chain, base first; the last one is the component's own class. */
+export const asStyledSelector = (component, tag, classes) => {
+    const own = classes[classes.length - 1];
+    return Object.assign(component, {
+        styledComponentId: own,
+        foldedComponentIds: classes.slice(0, -1).join(" "),
+        target: tag,
+        attrs: [],
+        // `Default` is a slot's prop (a styled(FormComponents.X) slot), never a DOM attribute
+        shouldForwardProp: (prop) => prop !== "Default",
+        toString: () => `.${own}`,
+    });
+};

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

@@ -0,0 +1,15 @@
+import { createElement, forwardRef } from "react";
+export const withSlots = (defaults, fallback, slots = {}, aliases = {}) => {
+    const map = { ...defaults };
+    for (const [given, Slot] of Object.entries(slots)) {
+        const key = aliases[given] ?? given;
+        if (!Object.prototype.hasOwnProperty.call(defaults, key) || key === "getComponents" || (typeof Slot !== "function" && typeof Slot !== "object") || !Slot)
+            continue;
+        const Default = defaults[key] ?? defaults[fallback[key]];
+        // React 19 passes `ref` as a prop: forward it only when the caller set one (2.x passed none).
+        const C = forwardRef((props, ref) => createElement(Slot, ref ? { ...props, ref, Default } : { ...props, Default }));
+        C.displayName = `Slot(${key})`;
+        map[key] = C;
+    }
+    return map;
+};

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

@@ -0,0 +1,58 @@
+import { createElement, Fragment } from "react";
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"]);
+const SAFE_NAME = /^[a-zA-Z_:][-a-zA-Z0-9_:.]*$/;
+const SAFE_TAG = /^[a-z][a-z0-9-]*$/;
+const HANDLER = /^on/i;
+const RENAMED = {
+    class: "className", for: "htmlFor", readonly: "readOnly", tabindex: "tabIndex", autocomplete: "autoComplete", inputmode: "inputMode", maxlength: "maxLength",
+    "stroke-width": "strokeWidth",
+};
+const BOOLEAN = new Set(["selected", "checked", "disabled", "readonly", "multiple", "hidden", "required"]);
+/** "color:red; font-size:1px" -> { color: "red", fontSize: "1px" } (library-owned styles only). Custom properties (`--x-y`) keep their name. */
+const styleObject = (style) => Object.fromEntries(style
+    .split(";")
+    .map((rule) => rule.split(":"))
+    .filter(([k, v]) => k?.trim() && v !== undefined)
+    .map(([k, ...v]) => [k.trim().startsWith("--") ? k.trim() : k.trim().replace(/-([a-z])/g, (_, c) => c.toUpperCase()), v.join(":").trim()]));
+export const reactProps = (attrs) => {
+    const props = {};
+    for (const [name, value] of Object.entries(attrs)) {
+        if (!SAFE_NAME.test(name) || HANDLER.test(name) || value === undefined || value === null || value === false)
+            continue;
+        const key = RENAMED[name] ?? name;
+        if (name === "style" && typeof value === "string")
+            props.style = styleObject(value);
+        else
+            props[key] = value === true ? (BOOLEAN.has(name) ? true : "true") : value;
+    }
+    return props;
+};
+const render = (children, env) => children.map((c) => toReact(c, env));
+/** React wants the selected option as the select's value, not `selected` on the option. */
+const selectChildren = (node, props) => {
+    const selected = node.children.find((c) => typeof c === "object" && !!c && c.tag === "option" && c.attrs.selected === true);
+    if (selected)
+        props.defaultValue = selected.attrs.value;
+    return node.children.map((c) => (typeof c === "object" && c && c.tag === "option" ? { ...c, attrs: { ...c.attrs, selected: undefined } } : c));
+};
+const native = (node, env) => {
+    if (node.tag === "#fragment")
+        return createElement(Fragment, null, ...render(node.children, env));
+    if (!SAFE_TAG.test(node.tag))
+        return null;
+    const own = reactProps(node.attrs);
+    const props = node.on && env.bind ? env.bind(node, own) : own;
+    if (VOID.has(node.tag))
+        return createElement(node.tag, props);
+    const children = node.tag === "select" ? selectChildren(node, props) : node.children;
+    return createElement(node.tag, props, ...render(children, env));
+};
+export const toReact = (child, env = {}) => {
+    if (child === null || child === undefined || child === false)
+        return null;
+    if (typeof child === "string" || typeof child === "number")
+        return child;
+    if (child.host && env.host)
+        return env.host(child, () => native(child, env), env);
+    return native(child, env);
+};

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

@@ -0,0 +1,59 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createElement, forwardRef, useContext } from "react";
+import { en } from "../../raw/i18n/en";
+import { booleanValueMarkup, checkIconMarkup, choicesValueMarkup, sectionMarkup, viewClass, VIEW_OVERRIDE_ONLY, VIEW_PRIMITIVES, } from "../../raw/model/view/markup";
+import { reactAttr, reactText } from "../../raw/model/view/values";
+import { h, hole } from "../../raw/model/vnode";
+import { toReact } from "../toReact";
+import { viewHost } from "./host";
+import { withSlots } from "../slots";
+import { asStyledSelector } from "../selector";
+import { FormViewRegistry } from "./registry";
+const cx = (...names) => names.filter((n) => typeof n === "string" && n).join(" ");
+const primitive = (name) => {
+    // `Default` (a slot's prop, forwarded by styled(FormViewComponents.X) slots) is never a DOM attribute.
+    const C = forwardRef(({ className, Default: _default, ...props }, ref) => createElement(VIEW_PRIMITIVES[name], { ...props, ref, className: cx(viewClass(name), className) }));
+    C.displayName = name;
+    return asStyledSelector(C, VIEW_PRIMITIVES[name], [viewClass(name)]);
+};
+const withClass = (node, className) => ({ ...node, attrs: { ...node.attrs, class: cx(node.attrs.class, className) } });
+const TIMES = "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z";
+const BooleanFieldValue = ({ className, value, label, selectedLabel, notSelectedLabel }) => {
+    const selected = value === true;
+    const text = label !== undefined ? reactText(label) : selected ? selectedLabel ?? en["view.boolean.selected"] : notSelectedLabel ?? en["view.boolean.notSelected"];
+    return _jsx(_Fragment, { children: toReact(withClass(booleanValueMarkup(selected, text), className)) });
+};
+const MultipleChoiceFieldValue = ({ values = [], style }) => (_jsx(_Fragment, { children: toReact(choicesValueMarkup(values.map((v) => ({ value: reactAttr(v.const) ?? "", title: reactText(v.title), selected: !!v.selected })), style)) }));
+/** Reads ObjectFieldSectionWrapper/Title from the registry, like 2.x. */
+const ObjectFieldSection = ({ title, children }) => {
+    const registry = useContext(FormViewRegistry);
+    // The composite's own markup (fieldset + legend), with the registry's primitives.
+    const markup = sectionMarkup(title, [hole()]).children[0];
+    return _jsx(_Fragment, { children: toReact(markup, { host: viewHost(registry, children) }) });
+};
+const icon = (name, markup) => {
+    const C = ({ className }) => _jsx(_Fragment, { children: toReact(markup(cx(viewClass(name), className))) });
+    C.displayName = name;
+    return C;
+};
+export const FormViewComponents = {
+    ...Object.fromEntries(Object.keys(VIEW_PRIMITIVES).map((name) => [name, primitive(name)])),
+    ...Object.fromEntries(VIEW_OVERRIDE_ONLY.map((name) => [name, undefined])),
+    BooleanFieldValue,
+    MultipleChoiceFieldValue,
+    ObjectFieldSection,
+    SelectedIcon: icon("SelectedIcon", (c) => checkIconMarkup(c)),
+    NotSelectedIcon: icon("NotSelectedIcon", (c) => h("svg", { class: c, viewBox: "0 0 352 512", "aria-hidden": "true", focusable: "false" }, h("path", { d: TIMES }))),
+    /** 2.x helper (ObjectFieldTemplate): the object template's components from a map. */
+    getComponents: (components) => ({
+        Wrapper: components.ObjectFieldTemplateWrapper,
+        Title: components.ObjectFieldTemplateTitle,
+        Description: components.ObjectFieldTemplateDescription ?? components.FieldDescription,
+    }),
+};
+const FALLBACK = {
+    ArrayFieldTemplateDescription: "FieldDescription", ArrayFieldTemplateTitle: "ObjectFieldTemplateTitle",
+    ArrayFieldTemplateWrapper: "ObjectFieldTemplateWrapper", ObjectFieldTemplateDescription: "FieldDescription",
+};
+/** registry.components: the defaults, with each known slot wrapped around its `Default`. Unknown keys are ignored. */
+export const compatComponents = (slots = {}) => withSlots(FormViewComponents, FALLBACK, slots);

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

@@ -0,0 +1,43 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { useFormikContext } from "formik";
+import { componentField, createViewContext, schemaField } from "../../raw/model/view/build";
+import { toVNode } from "../../raw/model/view/toVNode";
+import { useViewRender } from "./host";
+import { FormViewRegistry, ViewChainContext, ViewRootContext } from "./registry";
+/** The RAW build context of the current form: Formik values, registry definitions, replaced fields. */
+const useBuildContext = () => {
+    const registry = useContext(FormViewRegistry);
+    const root = useContext(ViewRootContext);
+    const formik = useFormikContext();
+    const fields = registry.fields ?? {};
+    const customFields = Object.keys(fields).filter((key) => fields[key] !== FormViewFields[key]);
+    return createViewContext({ definitions: registry.definitions, $defs: root.defs }, { definitions: registry.uiSchemaDefinitions }, formik?.values ?? {}, {
+        customFields,
+        formLocalization: registry.formLocalization,
+        fileUploadView: root.fileUploadView,
+        sink: root.sink,
+    });
+};
+const viewField = (name, build) => {
+    const F = (props) => {
+        const ctx = useBuildContext();
+        const chain = useContext(ViewChainContext);
+        const render = useViewRender();
+        return _jsx(_Fragment, { children: render(toVNode(build(props, ctx, chain))) });
+    };
+    F.displayName = name;
+    return F;
+};
+const kindOf = (props) => props["data-fjsf-kind"];
+/** 2.x SchemaField: resolve refs, pick the field (ui:field, registry, type), render it. */
+export const SchemaField = viewField("SchemaField", (p, ctx, chain) => schemaField(p.name ?? "", p.schema, p.uiSchema, ctx, kindOf(p), chain));
+const builtIn = (component) => viewField(component, (p, ctx, chain) => componentField(component, p.name ?? "", p.schema, p.uiSchema, ctx, kindOf(p), chain));
+const NAMES = [
+    "AnyField", "ArrayField", "BooleanField", "DateField", "FileUploadField", "FilesUploadField", "MultipleChoiceField", "NullField",
+    "NumberField", "ObjectField", "RadioField", "SearchableMultiTagSelectField", "SearchableSelectField", "StringField", "TextAreaField", "ToggleField",
+];
+export const FormViewFields = {
+    ...Object.fromEntries(NAMES.map((name) => [name, builtIn(name)])),
+    SchemaField,
+};

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

@@ -0,0 +1,32 @@
+import { createElement, useContext } from "react";
+import { viewClass } from "../../raw/model/view/markup";
+import { createHost } from "../hostCore";
+import { toReact } from "../toReact";
+import { FormViewComponents } from "./components";
+import { FormViewTemplates } from "./templates";
+import { FormViewRegistry } from "./registry";
+/**
+ * 2.x ObjectField's children: `<SchemaField key name schema uiSchema/>` per property and
+ * `<ObjectFieldSection key title>` per `ui:order` section, from the registry (C6).
+ */
+const objectChildren = (registry, fields) => {
+    const Field = registry.fields.SchemaField;
+    const field = (c) => createElement(Field, { key: c.key, name: c.name, schema: c.schema, uiSchema: c.uiSchema });
+    return fields.map((c) => "section" in c ? createElement(registry.components.ObjectFieldSection, { key: c.fields.map((f) => f.key).join("_"), title: c.section }, c.fields.map(field)) : field(c));
+};
+// Getters: components.tsx imports this module, so the defaults are read at render time, not at load.
+export const viewHost = createHost({
+    get components() {
+        return FormViewComponents;
+    },
+    get templates() {
+        return FormViewTemplates;
+    },
+    defaultClasses: (names) => names.map(viewClass),
+    children: (registry, host, env) => host.template === "ObjectFieldTemplate" ? objectChildren(registry, host.childFields ?? []) : host.children.length ? toReact(host.children[0], env) : undefined,
+});
+/** toReact with the current registry; `hole` is where a template's React children go. */
+export const useViewRender = () => {
+    const registry = useContext(FormViewRegistry);
+    return (node, hole) => toReact(node, { host: viewHost(registry, hole) });
+};

package/dist/esm/v3/react/view/registry.js

@@ -0,0 +1,16 @@
+import { createContext } from "react";
+export const FormViewRegistry = createContext({
+    fields: {},
+    templates: {},
+    components: {},
+    definitions: {},
+    uiSchemaDefinitions: {},
+    formContext: {},
+    formOptions: {},
+    formLocalization: {},
+    useItemsAsAdditionalItems: false,
+    hideUnmarkedAdditionalProperties: false,
+});
+export const ViewRootContext = createContext({});
+/** The $refs being expanded above a React boundary (shared with Form, ../chain.ts). */
+export { ChainContext as ViewChainContext } from "../chain";

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { isPlainObject } from "../../raw/core/json";
+import { warnComponentsProp } from "../componentsProp";
+import { defined } from "../defined";
+import { formShellMarkup } from "../../raw/model/view/markup";
+import { hole } from "../../raw/model/vnode";
+import { toReact } from "../toReact";
+import { compatComponents } from "./components";
+import { FormViewFields, SchemaField } from "./fields";
+import { viewHost } from "./host";
+import { FormViewRegistry, ViewRootContext } from "./registry";
+import { FormViewTemplates } from "./templates";
+export const FormView = (props) => {
+    warnComponentsProp(props.components);
+    const { schema, uiSchema = {}, className, fields, templates, slots, formContext = {}, formOptions = {}, formLocalization = {} } = props;
+    const registry = useMemo(() => ({
+        fields: { ...FormViewFields, ...defined(fields) },
+        templates: { ...FormViewTemplates, ...templates },
+        components: compatComponents(slots),
+        definitions: schema?.definitions,
+        uiSchemaDefinitions: uiSchema?.definitions,
+        formContext,
+        formOptions,
+        formLocalization,
+        useItemsAsAdditionalItems: props.useItemsAsAdditionalItems ?? false,
+        hideUnmarkedAdditionalProperties: props.hideUnmarkedAdditionalProperties ?? false,
+    }), [schema, uiSchema, fields, templates, slots, formContext, formOptions, formLocalization, props.useItemsAsAdditionalItems, props.hideUnmarkedAdditionalProperties]);
+    const root = useMemo(() => ({ defs: isPlainObject(schema) && isPlainObject(schema.$defs) ? schema.$defs : undefined, fileUploadView: props.fileUploadView, sink: props.sink }), [schema, props.fileUploadView, props.sink]);
+    const content = _jsx(registry.fields.SchemaField, { name: "", schema: schema, uiSchema: uiSchema });
+    return (_jsx(FormViewRegistry.Provider, { value: registry, children: _jsx(ViewRootContext.Provider, { value: root, children: toReact(formShellMarkup(className, [hole()]), { host: viewHost(registry, content) }) }) }));
+};
+export { SchemaField };