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

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

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilesUploadField = exports.FileUploadField = 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 upload_1 = require("../../raw/model/form/upload");
+const toReact_1 = require("../toReact");
+const fields_1 = require("./fields");
+const host_1 = require("./host");
+const registry_1 = require("./registry");
+const uploadContexts_1 = require("./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 = (0, react_1.useContext)(registry_1.FormRegistry);
+    const runtime = (0, react_1.useContext)(registry_1.FormRuntimeContext);
+    const formik = (0, formik_1.useFormikContext)();
+    const base = (0, host_1.formBind)(runtime, formik);
+    return (markup) => (0, toReact_1.toReact)(markup, {
+        host: (0, host_1.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;
+        },
+    });
+};
+const FileUploadField = (props) => {
+    const ctx = (0, fields_1.useFormBuild)();
+    const formik = (0, formik_1.useFormikContext)();
+    const { uploadFile, fetchFile, removeFile } = (0, react_1.useContext)(uploadContexts_1.FileUploadContext);
+    const value = (0, paths_1.getIn)(formik?.values, props.name);
+    const [uploadedFile, setUploadedFile] = (0, react_1.useState)(null);
+    const [progress, setProgress] = (0, react_1.useState)(0);
+    // The fake-progress timer must not outlive the field.
+    const timer = (0, react_1.useRef)(undefined);
+    (0, react_1.useEffect)(() => () => clearInterval(timer.current), []);
+    (0, react_1.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 (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: render((0, upload_1.fileUploadMarkup)(ctx, (0, fields_1.childProps)(props), { value, uploadedFile, progress })) });
+};
+exports.FileUploadField = FileUploadField;
+/** 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));
+};
+const FilesUploadField = (props) => {
+    const ctx = (0, fields_1.useFormBuild)();
+    const formik = (0, formik_1.useFormikContext)();
+    const { uploadFiles, removeFile } = (0, react_1.useContext)(uploadContexts_1.FilesUploadContext);
+    // 2.x memoised this: a fresh [] per render would re-run the effect below on every render.
+    const stored = (0, paths_1.getIn)(formik?.values, props.name);
+    const value = (0, react_1.useMemo)(() => stored ?? [], [stored]);
+    const [files, setFiles] = (0, react_1.useState)([]);
+    const [progress, setProgress] = (0, react_1.useState)({});
+    const [dragging, setDragging] = (0, react_1.useState)(false);
+    const depth = (0, react_1.useRef)(0);
+    const readOnly = props.schema?.readOnly === true;
+    const ip = props.uiSchema?.["ui:props"] ?? props.uiSchema?.props ?? {};
+    const multiple = ip.allowMultipleFiles ?? true;
+    (0, react_1.useEffect)(() => {
+        if (!Array.isArray(value))
+            return;
+        setFiles((0, upload_1.filesOf)(value));
+        (0, upload_1.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 (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: render((0, upload_1.filesUploadMarkup)(ctx, (0, fields_1.childProps)(props), { value, files, progress, dragging })) });
+};
+exports.FilesUploadField = FilesUploadField;

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilesUploadContext = exports.FileUploadContext = void 0;
+// FileUploadContext / FilesUploadContext: the host's upload functions (2.x src/common/File(s)UploadContext,
+// same shape and defaults). pro3 provides them around its forms.
+const react_1 = require("react");
+exports.FileUploadContext = (0, react_1.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();
+    },
+});
+exports.FilesUploadContext = (0, react_1.createContext)({
+    uploadFiles: () => {
+        console.error("Lacking upload from FilesUploadContext");
+        return Promise.reject();
+    },
+    removeFile: () => {
+        console.error("Lacking remove from FileUploadContext");
+        return Promise.reject();
+    },
+});

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSetDefault = void 0;
+// 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).
+const react_1 = require("react");
+const formik_1 = require("formik");
+const defaults_1 = require("../../raw/core/defaults");
+const paths_1 = require("../../raw/core/paths");
+const useSetDefault = (props) => {
+    const formik = (0, formik_1.useFormikContext)();
+    (0, react_1.useEffect)(() => {
+        if (!props.name || !formik)
+            return;
+        const value = (0, defaults_1.defaultFor)(props.schema, (0, paths_1.getIn)(formik.values, props.name), { forceDefaultValue: props.forceDefaultValue });
+        if (value !== undefined)
+            formik.setFieldValue(props.name, value);
+    }, []);
+};
+exports.useSetDefault = useSetDefault;

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createHost = exports.chained = exports.lookup = exports.own = void 0;
+const react_1 = require("react");
+const uiSchema_1 = require("../raw/core/uiSchema");
+const chain_1 = require("./chain");
+const toReact_1 = require("./toReact");
+/** Own entries only: a uiSchema naming `constructor` or `toString` finds nothing (SEC-6, SEC-SSR-3). */
+const own = (map, name) => map && name !== undefined && Object.prototype.hasOwnProperty.call(map, name) ? map[name] : undefined;
+exports.own = own;
+/** 2.x `components.A ?? components.B`. */
+const lookup = (map, names) => {
+    for (const name of names)
+        if ((0, exports.own)(map, name) !== undefined)
+            return map[name];
+    return undefined;
+};
+exports.lookup = lookup;
+/** Continues the $ref chain below a React boundary. */
+const chained = (chain, element) => (chain?.length ? (0, react_1.createElement)(chain_1.ChainContext.Provider, { value: chain }, element) : element);
+exports.chained = chained;
+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 (0, react_1.isValidElement)(host.value) ? host.value : native();
+        case "component": {
+            const C = (0, exports.lookup)(registry.components ?? {}, host.names);
+            if (C === undefined || C === (0, exports.lookup)(defaults.components, host.names))
+                return native();
+            if (host.props)
+                return (0, react_1.createElement)(C, host.props, ...(host.children ?? []).map((c) => (0, toReact_1.toReact)(c, env)));
+            // The override gets the element's props (and handlers); the default classes belong to the default primitive.
+            const base = (0, toReact_1.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 (0, react_1.createElement)(C, mine ? { ...props, className: mine } : props, ...node.children.map((c) => (0, toReact_1.toReact)(c, env)));
+        }
+        case "template": {
+            const T = (0, exports.own)(registry.templates, host.override) || (0, exports.own)(registry.templates, host.template);
+            if (!T || T === defaults.templates[host.template])
+                return native();
+            if (host.template === "ArrayFieldTemplate") {
+                const renderItem = (_, index) => (0, react_1.createElement)(react_1.Fragment, { key: index }, (0, toReact_1.toReact)(host.itemNodes?.[index], env));
+                return (0, exports.chained)(host.chain, (0, react_1.createElement)(T, { ...host.props, items: host.items, renderItem }));
+            }
+            return (0, exports.chained)(host.chain, (0, react_1.createElement)(T, { ...host.props, children: defaults.children(registry, host, env) }));
+        }
+        case "field": {
+            const fn = (0, uiSchema_1.extractUiSchema)(host.props.uiSchema).field;
+            const F = typeof fn === "function" ? fn : (0, exports.own)(registry.fields, host.field);
+            return F ? (0, exports.chained)(host.chain, (0, react_1.createElement)(F, host.props)) : native();
+        }
+    }
+};
+exports.createHost = createHost;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeToCssVars = exports.getDefaultStyles = exports.fjsfSelectors = exports.fjsfClassNames = exports.cssVarsToString = exports.FilesUploadContext = exports.FileUploadContext = exports.useSetDefault = exports.formCompatComponents = exports.FormComponents = exports.FormTemplates = exports.FormSchemaField = exports.FormFields = exports.FormRegistry = exports.Form = exports.toReact = exports.reactProps = exports.compatComponents = exports.FormViewComponents = exports.FormViewTemplates = exports.SchemaField = exports.FormViewFields = exports.FormViewRegistry = exports.FormView = void 0;
+// @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.
+var root_1 = require("./view/root");
+Object.defineProperty(exports, "FormView", { enumerable: true, get: function () { return root_1.FormView; } });
+var registry_1 = require("./view/registry");
+Object.defineProperty(exports, "FormViewRegistry", { enumerable: true, get: function () { return registry_1.FormViewRegistry; } });
+var fields_1 = require("./view/fields");
+Object.defineProperty(exports, "FormViewFields", { enumerable: true, get: function () { return fields_1.FormViewFields; } });
+Object.defineProperty(exports, "SchemaField", { enumerable: true, get: function () { return fields_1.SchemaField; } });
+var templates_1 = require("./view/templates");
+Object.defineProperty(exports, "FormViewTemplates", { enumerable: true, get: function () { return templates_1.FormViewTemplates; } });
+var components_1 = require("./view/components");
+Object.defineProperty(exports, "FormViewComponents", { enumerable: true, get: function () { return components_1.FormViewComponents; } });
+Object.defineProperty(exports, "compatComponents", { enumerable: true, get: function () { return components_1.compatComponents; } });
+var toReact_1 = require("./toReact");
+Object.defineProperty(exports, "reactProps", { enumerable: true, get: function () { return toReact_1.reactProps; } });
+Object.defineProperty(exports, "toReact", { enumerable: true, get: function () { return toReact_1.toReact; } });
+var root_2 = require("./form/root");
+Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return root_2.Form; } });
+var registry_2 = require("./form/registry");
+Object.defineProperty(exports, "FormRegistry", { enumerable: true, get: function () { return registry_2.FormRegistry; } });
+var fields_2 = require("./form/fields");
+Object.defineProperty(exports, "FormFields", { enumerable: true, get: function () { return fields_2.FormFields; } });
+Object.defineProperty(exports, "FormSchemaField", { enumerable: true, get: function () { return fields_2.SchemaField; } });
+var templates_2 = require("./form/templates");
+Object.defineProperty(exports, "FormTemplates", { enumerable: true, get: function () { return templates_2.FormTemplates; } });
+var components_2 = require("./form/components");
+Object.defineProperty(exports, "FormComponents", { enumerable: true, get: function () { return components_2.FormComponents; } });
+Object.defineProperty(exports, "formCompatComponents", { enumerable: true, get: function () { return components_2.formCompatComponents; } });
+/** @deprecated 3.x: defaults are applied per node appearance (§2.7a); kept as a wrapper. */
+var useSetDefault_1 = require("./form/useSetDefault");
+Object.defineProperty(exports, "useSetDefault", { enumerable: true, get: function () { return useSetDefault_1.useSetDefault; } });
+var uploadContexts_1 = require("./form/uploadContexts");
+Object.defineProperty(exports, "FileUploadContext", { enumerable: true, get: function () { return uploadContexts_1.FileUploadContext; } });
+Object.defineProperty(exports, "FilesUploadContext", { enumerable: true, get: function () { return uploadContexts_1.FilesUploadContext; } });
+// S7: styling (§4.3), the same helpers as `./raw`: load `styles.css` (or getDefaultStyles()) and set the theme variables.
+var styles_1 = require("../raw/styles");
+Object.defineProperty(exports, "cssVarsToString", { enumerable: true, get: function () { return styles_1.cssVarsToString; } });
+Object.defineProperty(exports, "fjsfClassNames", { enumerable: true, get: function () { return styles_1.fjsfClassNames; } });
+Object.defineProperty(exports, "fjsfSelectors", { enumerable: true, get: function () { return styles_1.fjsfSelectors; } });
+Object.defineProperty(exports, "getDefaultStyles", { enumerable: true, get: function () { return styles_1.getDefaultStyles; } });
+Object.defineProperty(exports, "themeToCssVars", { enumerable: true, get: function () { return styles_1.themeToCssVars; } });

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.asStyledSelector = void 0;
+/** `classes`: the element's chain, base first; the last one is the component's own class. */
+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}`,
+    });
+};
+exports.asStyledSelector = asStyledSelector;

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withSlots = void 0;
+const react_1 = require("react");
+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 = (0, react_1.forwardRef)((props, ref) => (0, react_1.createElement)(Slot, ref ? { ...props, ref, Default } : { ...props, Default }));
+        C.displayName = `Slot(${key})`;
+        map[key] = C;
+    }
+    return map;
+};
+exports.withSlots = withSlots;

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toReact = exports.reactProps = void 0;
+const react_1 = require("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()]));
+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;
+};
+exports.reactProps = reactProps;
+const render = (children, env) => children.map((c) => (0, exports.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 (0, react_1.createElement)(react_1.Fragment, null, ...render(node.children, env));
+    if (!SAFE_TAG.test(node.tag))
+        return null;
+    const own = (0, exports.reactProps)(node.attrs);
+    const props = node.on && env.bind ? env.bind(node, own) : own;
+    if (VOID.has(node.tag))
+        return (0, react_1.createElement)(node.tag, props);
+    const children = node.tag === "select" ? selectChildren(node, props) : node.children;
+    return (0, react_1.createElement)(node.tag, props, ...render(children, env));
+};
+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);
+};
+exports.toReact = toReact;

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compatComponents = exports.FormViewComponents = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const en_1 = require("../../raw/i18n/en");
+const markup_1 = require("../../raw/model/view/markup");
+const values_1 = require("../../raw/model/view/values");
+const vnode_1 = require("../../raw/model/vnode");
+const toReact_1 = require("../toReact");
+const host_1 = require("./host");
+const slots_1 = require("../slots");
+const selector_1 = require("../selector");
+const registry_1 = require("./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 = (0, react_1.forwardRef)(({ className, Default: _default, ...props }, ref) => (0, react_1.createElement)(markup_1.VIEW_PRIMITIVES[name], { ...props, ref, className: cx((0, markup_1.viewClass)(name), className) }));
+    C.displayName = name;
+    return (0, selector_1.asStyledSelector)(C, markup_1.VIEW_PRIMITIVES[name], [(0, markup_1.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 ? (0, values_1.reactText)(label) : selected ? selectedLabel ?? en_1.en["view.boolean.selected"] : notSelectedLabel ?? en_1.en["view.boolean.notSelected"];
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, toReact_1.toReact)(withClass((0, markup_1.booleanValueMarkup)(selected, text), className)) });
+};
+const MultipleChoiceFieldValue = ({ values = [], style }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, toReact_1.toReact)((0, markup_1.choicesValueMarkup)(values.map((v) => ({ value: (0, values_1.reactAttr)(v.const) ?? "", title: (0, values_1.reactText)(v.title), selected: !!v.selected })), style)) }));
+/** Reads ObjectFieldSectionWrapper/Title from the registry, like 2.x. */
+const ObjectFieldSection = ({ title, children }) => {
+    const registry = (0, react_1.useContext)(registry_1.FormViewRegistry);
+    // The composite's own markup (fieldset + legend), with the registry's primitives.
+    const markup = (0, markup_1.sectionMarkup)(title, [(0, vnode_1.hole)()]).children[0];
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, toReact_1.toReact)(markup, { host: (0, host_1.viewHost)(registry, children) }) });
+};
+const icon = (name, markup) => {
+    const C = ({ className }) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, toReact_1.toReact)(markup(cx((0, markup_1.viewClass)(name), className))) });
+    C.displayName = name;
+    return C;
+};
+exports.FormViewComponents = {
+    ...Object.fromEntries(Object.keys(markup_1.VIEW_PRIMITIVES).map((name) => [name, primitive(name)])),
+    ...Object.fromEntries(markup_1.VIEW_OVERRIDE_ONLY.map((name) => [name, undefined])),
+    BooleanFieldValue,
+    MultipleChoiceFieldValue,
+    ObjectFieldSection,
+    SelectedIcon: icon("SelectedIcon", (c) => (0, markup_1.checkIconMarkup)(c)),
+    NotSelectedIcon: icon("NotSelectedIcon", (c) => (0, vnode_1.h)("svg", { class: c, viewBox: "0 0 352 512", "aria-hidden": "true", focusable: "false" }, (0, vnode_1.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. */
+const compatComponents = (slots = {}) => (0, slots_1.withSlots)(exports.FormViewComponents, FALLBACK, slots);
+exports.compatComponents = compatComponents;

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormViewFields = exports.SchemaField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const formik_1 = require("formik");
+const build_1 = require("../../raw/model/view/build");
+const toVNode_1 = require("../../raw/model/view/toVNode");
+const host_1 = require("./host");
+const registry_1 = require("./registry");
+/** The RAW build context of the current form: Formik values, registry definitions, replaced fields. */
+const useBuildContext = () => {
+    const registry = (0, react_1.useContext)(registry_1.FormViewRegistry);
+    const root = (0, react_1.useContext)(registry_1.ViewRootContext);
+    const formik = (0, formik_1.useFormikContext)();
+    const fields = registry.fields ?? {};
+    const customFields = Object.keys(fields).filter((key) => fields[key] !== exports.FormViewFields[key]);
+    return (0, build_1.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 = (0, react_1.useContext)(registry_1.ViewChainContext);
+        const render = (0, host_1.useViewRender)();
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: render((0, toVNode_1.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. */
+exports.SchemaField = viewField("SchemaField", (p, ctx, chain) => (0, build_1.schemaField)(p.name ?? "", p.schema, p.uiSchema, ctx, kindOf(p), chain));
+const builtIn = (component) => viewField(component, (p, ctx, chain) => (0, build_1.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",
+];
+exports.FormViewFields = {
+    ...Object.fromEntries(NAMES.map((name) => [name, builtIn(name)])),
+    SchemaField: exports.SchemaField,
+};

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useViewRender = exports.viewHost = void 0;
+const react_1 = require("react");
+const markup_1 = require("../../raw/model/view/markup");
+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");
+/**
+ * 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) => (0, react_1.createElement)(Field, { key: c.key, name: c.name, schema: c.schema, uiSchema: c.uiSchema });
+    return fields.map((c) => "section" in c ? (0, react_1.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.
+exports.viewHost = (0, hostCore_1.createHost)({
+    get components() {
+        return components_1.FormViewComponents;
+    },
+    get templates() {
+        return templates_1.FormViewTemplates;
+    },
+    defaultClasses: (names) => names.map(markup_1.viewClass),
+    children: (registry, host, env) => host.template === "ObjectFieldTemplate" ? objectChildren(registry, host.childFields ?? []) : host.children.length ? (0, toReact_1.toReact)(host.children[0], env) : undefined,
+});
+/** toReact with the current registry; `hole` is where a template's React children go. */
+const useViewRender = () => {
+    const registry = (0, react_1.useContext)(registry_1.FormViewRegistry);
+    return (node, hole) => (0, toReact_1.toReact)(node, { host: (0, exports.viewHost)(registry, hole) });
+};
+exports.useViewRender = useViewRender;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewChainContext = exports.ViewRootContext = exports.FormViewRegistry = void 0;
+const react_1 = require("react");
+exports.FormViewRegistry = (0, react_1.createContext)({
+    fields: {},
+    templates: {},
+    components: {},
+    definitions: {},
+    uiSchemaDefinitions: {},
+    formContext: {},
+    formOptions: {},
+    formLocalization: {},
+    useItemsAsAdditionalItems: false,
+    hideUnmarkedAdditionalProperties: false,
+});
+exports.ViewRootContext = (0, react_1.createContext)({});
+/** The $refs being expanded above a React boundary (shared with Form, ../chain.ts). */
+var chain_1 = require("../chain");
+Object.defineProperty(exports, "ViewChainContext", { enumerable: true, get: function () { return chain_1.ChainContext; } });

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SchemaField = exports.FormView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const json_1 = require("../../raw/core/json");
+const componentsProp_1 = require("../componentsProp");
+const defined_1 = require("../defined");
+const markup_1 = require("../../raw/model/view/markup");
+const vnode_1 = require("../../raw/model/vnode");
+const toReact_1 = require("../toReact");
+const components_1 = require("./components");
+const fields_1 = require("./fields");
+Object.defineProperty(exports, "SchemaField", { enumerable: true, get: function () { return fields_1.SchemaField; } });
+const host_1 = require("./host");
+const registry_1 = require("./registry");
+const templates_1 = require("./templates");
+const FormView = (props) => {
+    (0, componentsProp_1.warnComponentsProp)(props.components);
+    const { schema, uiSchema = {}, className, fields, templates, slots, formContext = {}, formOptions = {}, formLocalization = {} } = props;
+    const registry = (0, react_1.useMemo)(() => ({
+        fields: { ...fields_1.FormViewFields, ...(0, defined_1.defined)(fields) },
+        templates: { ...templates_1.FormViewTemplates, ...templates },
+        components: (0, components_1.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 = (0, react_1.useMemo)(() => ({ defs: (0, json_1.isPlainObject)(schema) && (0, json_1.isPlainObject)(schema.$defs) ? schema.$defs : undefined, fileUploadView: props.fileUploadView, sink: props.sink }), [schema, props.fileUploadView, props.sink]);
+    const content = (0, jsx_runtime_1.jsx)(registry.fields.SchemaField, { name: "", schema: schema, uiSchema: uiSchema });
+    return ((0, jsx_runtime_1.jsx)(registry_1.FormViewRegistry.Provider, { value: registry, children: (0, jsx_runtime_1.jsx)(registry_1.ViewRootContext.Provider, { value: root, children: (0, toReact_1.toReact)((0, markup_1.formShellMarkup)(className, [(0, vnode_1.hole)()]), { host: (0, host_1.viewHost)(registry, content) }) }) }));
+};
+exports.FormView = FormView;