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

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

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themeToCssVars = exports.getDefaultStyles = exports.fjsfSelectors = exports.fjsfClassNames = exports.cssVarsToString = exports.defineFjsfElements = exports.FormController = exports.createStore = exports.toDOM = exports.renderViewToString = exports.buildViewNode = exports.escapeText = exports.escapeAttr = exports.h = exports.cx = exports.fi = exports.en = exports.createTranslator = exports.catalogs = exports.isUnsafePattern = exports.DEFAULT_PATTERN_INPUT_CAP = exports.createValidationSchema = exports.setTitleValues = exports.immutablySwapItems = exports.FILE_UPLOAD_VIEW = exports.optionalNumberInitialValue = exports.OPTIONAL_NUMBER_INITIAL = exports.createInitialValues = exports.localIsoDate = exports.isUnset = exports.defaultFor = exports.resolveSchema = exports.resolveOneOfValue = exports.deepOverlap = exports.valueTypeMismatch = exports.normalizeArraySchema = exports.itemSchema = exports.solveReferences = exports.resolveRefs = exports.parseRef = exports.hasReferences = exports.MAX_REF_DEPTH = exports.mergeSchemas = exports.defaultValueForType = exports.normaliseType = exports.guessType = exports.getSchemaType = void 0;
+// @nolwenture/formik-jsonschema-form/raw (v3, slice S1): the pure, framework-free core.
+// No react, formik, styled-components, @nolwenture/* or DOM access (boundary gate in
+// src/v3/raw/__tests__/boundary.test.ts). S2 adds the VNode model and the read-only view
+// serialised to a string; S6 adds toDOM, the RAW store, FormController and the <fjsf-form> elements.
+__exportStar(require("./core/json"), exports);
+__exportStar(require("./core/issues"), exports);
+__exportStar(require("./core/paths"), exports);
+var schemaType_1 = require("./core/schemaType");
+Object.defineProperty(exports, "getSchemaType", { enumerable: true, get: function () { return schemaType_1.getSchemaType; } });
+Object.defineProperty(exports, "guessType", { enumerable: true, get: function () { return schemaType_1.guessType; } });
+Object.defineProperty(exports, "normaliseType", { enumerable: true, get: function () { return schemaType_1.normaliseType; } });
+Object.defineProperty(exports, "defaultValueForType", { enumerable: true, get: function () { return schemaType_1.defaultValueForType; } });
+var merge_1 = require("./core/merge");
+Object.defineProperty(exports, "mergeSchemas", { enumerable: true, get: function () { return merge_1.mergeSchemas; } });
+var refs_1 = require("./core/refs");
+Object.defineProperty(exports, "MAX_REF_DEPTH", { enumerable: true, get: function () { return refs_1.MAX_REF_DEPTH; } });
+Object.defineProperty(exports, "hasReferences", { enumerable: true, get: function () { return refs_1.hasReferences; } });
+Object.defineProperty(exports, "parseRef", { enumerable: true, get: function () { return refs_1.parseRef; } });
+Object.defineProperty(exports, "resolveRefs", { enumerable: true, get: function () { return refs_1.resolveRefs; } });
+Object.defineProperty(exports, "solveReferences", { enumerable: true, get: function () { return refs_1.solveReferences; } });
+var arrays_1 = require("./core/arrays");
+Object.defineProperty(exports, "itemSchema", { enumerable: true, get: function () { return arrays_1.itemSchema; } });
+Object.defineProperty(exports, "normalizeArraySchema", { enumerable: true, get: function () { return arrays_1.normalizeArraySchema; } });
+Object.defineProperty(exports, "valueTypeMismatch", { enumerable: true, get: function () { return arrays_1.valueTypeMismatch; } });
+var conditionals_1 = require("./core/conditionals");
+Object.defineProperty(exports, "deepOverlap", { enumerable: true, get: function () { return conditionals_1.deepOverlap; } });
+Object.defineProperty(exports, "resolveOneOfValue", { enumerable: true, get: function () { return conditionals_1.resolveOneOfValue; } });
+Object.defineProperty(exports, "resolveSchema", { enumerable: true, get: function () { return conditionals_1.resolveSchema; } });
+var defaults_1 = require("./core/defaults");
+Object.defineProperty(exports, "defaultFor", { enumerable: true, get: function () { return defaults_1.defaultFor; } });
+Object.defineProperty(exports, "isUnset", { enumerable: true, get: function () { return defaults_1.isUnset; } });
+Object.defineProperty(exports, "localIsoDate", { enumerable: true, get: function () { return defaults_1.localIsoDate; } });
+var initialValues_1 = require("./core/initialValues");
+Object.defineProperty(exports, "createInitialValues", { enumerable: true, get: function () { return initialValues_1.createInitialValues; } });
+var optionalNumberInitial_1 = require("./core/policies/optionalNumberInitial");
+Object.defineProperty(exports, "OPTIONAL_NUMBER_INITIAL", { enumerable: true, get: function () { return optionalNumberInitial_1.OPTIONAL_NUMBER_INITIAL; } });
+Object.defineProperty(exports, "optionalNumberInitialValue", { enumerable: true, get: function () { return optionalNumberInitial_1.optionalNumberInitialValue; } });
+var fileUploadView_1 = require("./core/policies/fileUploadView");
+Object.defineProperty(exports, "FILE_UPLOAD_VIEW", { enumerable: true, get: function () { return fileUploadView_1.FILE_UPLOAD_VIEW; } });
+__exportStar(require("./core/uiSchema"), exports);
+__exportStar(require("./core/enums"), exports);
+var titles_1 = require("./core/titles");
+Object.defineProperty(exports, "immutablySwapItems", { enumerable: true, get: function () { return titles_1.immutablySwapItems; } });
+Object.defineProperty(exports, "setTitleValues", { enumerable: true, get: function () { return titles_1.setTitleValues; } });
+var validation_1 = require("./validation");
+Object.defineProperty(exports, "createValidationSchema", { enumerable: true, get: function () { return validation_1.createValidationSchema; } });
+var patterns_1 = require("./validation/patterns");
+Object.defineProperty(exports, "DEFAULT_PATTERN_INPUT_CAP", { enumerable: true, get: function () { return patterns_1.DEFAULT_PATTERN_INPUT_CAP; } });
+Object.defineProperty(exports, "isUnsafePattern", { enumerable: true, get: function () { return patterns_1.isUnsafePattern; } });
+var i18n_1 = require("./i18n");
+Object.defineProperty(exports, "catalogs", { enumerable: true, get: function () { return i18n_1.catalogs; } });
+Object.defineProperty(exports, "createTranslator", { enumerable: true, get: function () { return i18n_1.createTranslator; } });
+Object.defineProperty(exports, "en", { enumerable: true, get: function () { return i18n_1.en; } });
+Object.defineProperty(exports, "fi", { enumerable: true, get: function () { return i18n_1.fi; } });
+__exportStar(require("./sanitize"), exports);
+var vnode_1 = require("./model/vnode");
+Object.defineProperty(exports, "cx", { enumerable: true, get: function () { return vnode_1.cx; } });
+Object.defineProperty(exports, "h", { enumerable: true, get: function () { return vnode_1.h; } });
+var toString_1 = require("./serialize/toString");
+Object.defineProperty(exports, "escapeAttr", { enumerable: true, get: function () { return toString_1.escapeAttr; } });
+Object.defineProperty(exports, "escapeText", { enumerable: true, get: function () { return toString_1.escapeText; } });
+Object.defineProperty(exports, "vnodeToString", { enumerable: true, get: function () { return toString_1.toString; } });
+var view_1 = require("./model/view");
+Object.defineProperty(exports, "buildViewNode", { enumerable: true, get: function () { return view_1.buildViewNode; } });
+Object.defineProperty(exports, "renderViewToString", { enumerable: true, get: function () { return view_1.renderViewToString; } });
+// S6: the RAW DOM (framework-free live forms).
+var toDOM_1 = require("./serialize/toDOM");
+Object.defineProperty(exports, "toDOM", { enumerable: true, get: function () { return toDOM_1.toDOM; } });
+var createStore_1 = require("./store/createStore");
+Object.defineProperty(exports, "createStore", { enumerable: true, get: function () { return createStore_1.createStore; } });
+var controller_1 = require("./dom/controller");
+Object.defineProperty(exports, "FormController", { enumerable: true, get: function () { return controller_1.FormController; } });
+var elements_1 = require("./dom/elements");
+Object.defineProperty(exports, "defineFjsfElements", { enumerable: true, get: function () { return elements_1.defineFjsfElements; } });
+// S7: styling (§4.3): the generated default stylesheet, the theme variables and the class contract.
+var styles_1 = require("./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/raw/model/classes.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.expandClasses = void 0;
+// P7 (§4.3): an element of a 2.x styled component that extends another carries the bases' classes too
+// (styled-components folded them), so the generated rules of a base (e.g. CommonFieldWrapper) apply to it.
+const styledChains_1 = require("./styledChains");
+/** The classes with every extended component's bases, each once, bases first. */
+const expandClasses = (classes) => [...new Set(classes.flatMap((c) => styledChains_1.STYLED_CHAINS[c] ?? [c]))];
+exports.expandClasses = expandClasses;

package/dist/cjs/v3/raw/model/form/actions.js

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyAction = void 0;
+const json_1 = require("../../core/json");
+const dates_1 = require("../../core/dates");
+const paths_1 = require("../../core/paths");
+const storedFormats_1 = require("../../core/policies/storedFormats");
+/** formik handleChange parsing, plus the enum const lookup of 2.x StringField and a boolean checkbox (Q-R19-1). */
+const parse = (action, e) => {
+    switch (action.parse) {
+        case "number": {
+            const n = parseFloat(e.value ?? "");
+            return Number.isNaN(n) ? "" : n;
+        }
+        case "checkbox":
+            return !!e.checked;
+        case "enum":
+            return (action.consts ?? []).find((c) => c !== undefined && c !== null && String(c) === e.value) ?? e.value;
+        case "multi": {
+            // Q-FMK-7: 2.x stored the option strings (kept, MULTI_SELECT_STORAGE); "consts" maps them back.
+            const consts = action.consts;
+            if (storedFormats_1.MULTI_SELECT_STORAGE === "strings" || !consts)
+                return e.selected ?? [];
+            return (e.selected ?? []).map((s) => consts.find((c) => c !== undefined && c !== null && String(c) === s) ?? s);
+        }
+        case "radio":
+            // Q-FMK-5: 2.x stored the radio's string value (kept, BOOLEAN_RADIO_STORAGE).
+            return storedFormats_1.BOOLEAN_RADIO_STORAGE === "strings" ? e.value ?? "" : e.value === "true";
+        default:
+            return e.value ?? "";
+    }
+};
+const arrayAt = (values, path) => {
+    const current = (0, paths_1.getIn)(values, path);
+    return Array.isArray(current) ? current : [];
+};
+/** Sets per-path UI state (`text`, `open`, `shown`, `active`). */
+const patch = (ui, path, values) => {
+    const next = { ...ui };
+    for (const [key, value] of Object.entries(values)) {
+        next[key] = { ...ui[key], [path]: value };
+    }
+    return next;
+};
+const applyAction = (action, values, e = {}, ui = {}) => {
+    switch (action.type) {
+        case "set":
+            return { set: { path: action.path, value: parse(action, e) } };
+        case "touch":
+            return { touch: action.path };
+        case "toggle":
+            return { set: { path: action.path, value: !(0, paths_1.getIn)(values, action.path) } };
+        case "submit":
+            return { submit: true };
+        case "arrayAdd":
+            return { set: { path: action.path, value: [...arrayAt(values, action.path), action.item] } };
+        case "arrayRemove":
+            return { set: { path: action.path, value: arrayAt(values, action.path).filter((_, i) => i !== action.index) } };
+        case "arrayMove": {
+            const next = [...arrayAt(values, action.path)];
+            if (action.to < 0 || action.to >= next.length)
+                return {};
+            [next[action.from], next[action.to]] = [next[action.to], next[action.from]];
+            return { set: { path: action.path, value: next } };
+        }
+        case "propertyAdd": {
+            if (e.key === undefined)
+                return { askKey: true };
+            const object = (action.path ? (0, paths_1.getIn)(values, action.path) : values);
+            const own = (0, json_1.isPlainObject)(object) ? object : {};
+            // SEC-8: a prototype key is never added (2.x wrote it through the spread).
+            if (!e.key || json_1.PROTOTYPE_KEYS.has(e.key) || Object.prototype.hasOwnProperty.call(own, e.key))
+                return {};
+            // Q-FMK-8: the type's empty value (2.x stored its DEFAULT_FIELD placeholder object as the value).
+            return { set: { path: action.path, value: { ...own, [e.key]: action.item } }, order: { path: action.path, previous: action.order, next: [...action.order, e.key] } };
+        }
+        case "propertyRemove": {
+            const object = (action.path ? (0, paths_1.getIn)(values, action.path) : values);
+            const { [action.key]: _removed, ...rest } = (0, json_1.isPlainObject)(object) ? object : {};
+            return { set: { path: action.path, value: rest }, order: { path: action.path, previous: action.order, next: action.order.filter((k) => k !== action.key) } };
+        }
+        case "propertyMove":
+            return { order: { path: action.path, previous: action.order, next: action.next } };
+        case "collapse":
+            return { ui: { ...ui, collapsed: { ...ui.collapsed, [action.id]: action.collapsed } } };
+        case "anyType":
+            return { ui: { ...ui, anyTypes: { ...ui.anyTypes, [action.path]: e.value ?? "string" } } };
+        case "choice": {
+            // MultipleChoiceField: a checkbox toggles the const in the array, a radio sets it.
+            if (!action.multi)
+                return { set: { path: action.path, value: action.value } };
+            const current = arrayAt(values, action.path);
+            const next = current.includes(action.value) ? current.filter((v) => v !== action.value) : [...current, action.value];
+            return { set: { path: action.path, value: next } };
+        }
+        case "dateText":
+            return { ui: { ...ui, text: { ...ui.text, [action.path]: e.value ?? "" } } };
+        case "dateCommit": {
+            if (action.locked)
+                return {};
+            const raw = (e.value ?? "").trim();
+            const parsed = action.native ? (/^\d{4}-\d{2}-\d{2}$/.test(raw) ? raw : undefined) : (d => d && (0, dates_1.toIsoDateString)(d))((0, dates_1.parseDateString)(raw, action.rules.order));
+            if (!parsed)
+                return action.native ? {} : { touchQuietly: action.path, error: { path: action.path, message: action.rules.invalid } };
+            const { min, max } = action.rules;
+            if ((min && parsed < min) || (max && parsed > max))
+                return { touchQuietly: action.path, error: { path: action.path, message: action.rules.outOfRange } };
+            const { [action.path]: _typed, ...text } = ui.text ?? {};
+            return { touchQuietly: action.path, error: { path: action.path }, set: { path: action.path, value: parsed }, ui: { ...ui, text } };
+        }
+        case "datePicker":
+            return action.locked ? {} : { picker: action.id };
+        case "searchInput":
+            return { ui: patch(ui, action.path, { text: e.value ?? "", shown: action.perPage, open: true, active: -1 }) };
+        case "searchOpen":
+            return { ui: patch(ui, action.path, { open: true }) };
+        case "searchLeave":
+            return e.leftContainer ? { ui: patch(ui, action.path, { open: false }) } : {};
+        case "searchClear":
+            return { ui: patch(ui, action.path, { text: "" }), set: { path: action.path, value: undefined } };
+        case "searchMore":
+            return { ui: patch(ui, action.path, { shown: (ui.shown?.[action.path] ?? action.perPage) + action.perPage }) };
+        case "searchSelect":
+            return { ui: patch(ui, action.path, { text: action.title, open: false }), set: { path: action.path, value: action.value } };
+        case "searchKey": {
+            if (!action.open)
+                return {};
+            const active = ui.active?.[action.path] ?? -1;
+            const last = action.items.length - 1;
+            if (e.keyName === "ArrowUp")
+                return { ui: patch(ui, action.path, { active: Math.max(-1, active - 1) }) };
+            if (e.keyName === "ArrowDown")
+                return { ui: patch(ui, action.path, { active: active + 1 >= last ? last : active + 1 }) };
+            if (e.keyName === "Escape")
+                return { ui: patch(ui, action.path, { open: false }) };
+            if (e.keyName === "Enter" && action.items[active])
+                return (0, exports.applyAction)(action.items[active], values, e, ui);
+            return {};
+        }
+        case "searchText":
+            return { ui: patch(ui, action.path, { text: e.value ?? "" }) };
+        case "tagAdd":
+            return { ui: patch(ui, action.path, { text: "" }), set: { path: action.path, value: [...new Set([...arrayAt(values, action.path), action.value])] } };
+        case "tagRemove":
+            return { set: { path: action.path, value: arrayAt(values, action.path).filter((v) => v !== action.value) } };
+        case "preventDefault":
+        case "preventEnter":
+        case "searchActive":
+            return {};
+        case "info":
+            return action.display === "inline" ? { ui: { ...ui, infoOpen: { ...ui.infoOpen, [action.id]: !ui.infoOpen?.[action.id] } } } : {};
+    }
+};
+exports.applyAction = applyAction;

package/dist/cjs/v3/raw/model/form/any.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.anyField = void 0;
+const paths_1 = require("../../core/paths");
+const schemaType_1 = require("../../core/schemaType");
+const vnode_1 = require("../vnode");
+const fields_1 = require("../view/fields");
+const chrome_1 = require("./chrome");
+const dispatch_1 = require("./dispatch");
+const markup_1 = require("./markup");
+const anyField = (ctx, p, chain, trail = []) => {
+    const value = (0, paths_1.getIn)(ctx.values, p.name);
+    // 2.x guessed once, on mount (useState): the guess is kept by the host, so clearing a number keeps a number.
+    const kept = ctx.ui.anyTypes?.[p.name];
+    const type = kept ?? (value !== undefined ? (0, schemaType_1.guessType)(value) : "string");
+    if (!kept)
+        ctx.anyGuesses[p.name] = type;
+    const extra = type === "object" ? { additionalProperties: {} } : type === "array" ? { additionalItems: {} } : {};
+    const enriched = { ...(p.schema || {}), type, ...extra };
+    const select = {
+        ...(0, vnode_1.h)("select", { value: type }, Object.keys(dispatch_1.COMPONENT_TYPES).map((t) => (0, vnode_1.h)("option", { value: t }, t))),
+        on: { change: { type: "anyType", path: p.name } },
+    };
+    const { wrapperAttrs } = (0, fields_1.elementProps)(p.ui, p.name, ctx.sink);
+    return (0, markup_1.plain)("div", "AnyFieldWrapper", { ...wrapperAttrs, ...(0, chrome_1.instrumentation)({ ...p, kind: "any" }) }, select, (0, dispatch_1.formField)(ctx, { name: p.name, schema: enriched, ui: p.ui }, chain, trail));
+};
+exports.anyField = anyField;

package/dist/cjs/v3/raw/model/form/appearance.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.settle = exports.newAppearances = void 0;
+const defaults_1 = require("../../core/defaults");
+const json_1 = require("../../core/json");
+const paths_1 = require("../../core/paths");
+/** The nodes that appeared in this render and not in the previous one; `seen` becomes this render's set. */
+const newAppearances = (appeared, seen) => {
+    const fresh = appeared.filter((a) => !seen.has(a.path));
+    seen.clear();
+    appeared.forEach((a) => seen.add(a.path));
+    return fresh;
+};
+exports.newAppearances = newAppearances;
+/** The values with the defaults of the fresh nodes and the prunes applied (the same object when nothing changes). */
+const settle = (values, fresh, prune, now) => {
+    let next = values;
+    for (const a of fresh) {
+        const value = (0, defaults_1.defaultFor)(a.schema, (0, paths_1.getIn)(next, a.path), { forceDefaultValue: a.forceDefaultValue, now });
+        if (value !== undefined && value !== (0, paths_1.getIn)(next, a.path))
+            next = (0, paths_1.setIn)(next, a.path, value);
+    }
+    for (const { path, keys } of prune) {
+        const object = path ? (0, paths_1.getIn)(next, path) : next;
+        if (!(0, json_1.isPlainObject)(object) || !keys.some((k) => k in object))
+            continue;
+        const kept = Object.fromEntries(Object.entries(object).filter(([k]) => !keys.includes(k)));
+        next = path ? (0, paths_1.setIn)(next, path, kept) : kept;
+    }
+    return next;
+};
+exports.settle = settle;

package/dist/cjs/v3/raw/model/form/array.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.arrayField = void 0;
+const arrays_1 = require("../../core/arrays");
+const enums_1 = require("../../core/enums");
+const issues_1 = require("../../core/issues");
+const paths_1 = require("../../core/paths");
+const schemaType_1 = require("../../core/schemaType");
+const uiSchema_1 = require("../../core/uiSchema");
+const vnode_1 = require("../vnode");
+const values_1 = require("../view/values");
+const chrome_1 = require("./chrome");
+const dispatch_1 = require("./dispatch");
+const leaf_1 = require("./leaf");
+const markup_1 = require("./markup");
+const object_1 = require("./object");
+const parts_1 = require("./parts");
+const templated_1 = require("./templated");
+/** `anyOf` arrays: a (multi-)select of the consts (2.x ArrayField's first branch). */
+const enumArray = (ctx, p) => {
+    const enums = (0, enums_1.getEnums)({ schema: p.schema }, ctx.sink, p.name);
+    const multiple = enums?.type === enums_1.EnumsTypes.MULTI_SELECT;
+    const props = { ...p, kind: multiple ? "multi-enum" : "enum", data: { "data-fjsf-array": p.name } };
+    const value = (0, paths_1.getIn)(ctx.values, p.name);
+    const selected = multiple ? (Array.isArray(value) ? value.map((v) => (0, values_1.reactAttr)(v) ?? "") : []) : (0, values_1.reactAttr)(value) ?? "";
+    const select = {
+        ...(0, markup_1.fcAs)("select", ["SelectFieldInput"], { ...(0, leaf_1.inputAttrs)(ctx, props), name: p.name, readonly: p.schema?.readOnly ? true : undefined, multiple: multiple || undefined, value: selected }, (enums?.values ?? []).map((o) => (0, vnode_1.h)("option", { value: (0, values_1.reactAttr)(o?.const) ?? "" }, (0, values_1.reactText)(o?.title)))),
+        // Q-FMK-7: a multi-select stores the consts (2.x stored their strings); Q-RO-1: readOnly never changes.
+        on: (0, leaf_1.on)(props, multiple ? "multi" : "text", multiple ? (enums?.values ?? []).map((o) => o?.const) : undefined),
+    };
+    const content = [(0, markup_1.fc)(["SelectFieldInputWrapper"], {}, select)];
+    return (0, templated_1.templated)(ctx, "FieldTemplate", props, (0, markup_1.fieldTemplateMarkup)((0, chrome_1.formChrome)(ctx, props), content), content);
+};
+/** N-1 value guard: arr[0]'s value as text, like FormView (§6.3). */
+const guardedItem = (ctx, path, item, schema) => {
+    ctx.sink((0, issues_1.issue)("SCHEMA_ARRAY_AMBIGUOUS", path, "arr[0] does not match additionalItems: read-only"));
+    return (0, markup_1.plain)("div", "GuardedArrayItem", { "data-fjsf-path": path, "data-fjsf-kind": "string", "data-fjsf-readonly": "true" }, (0, vnode_1.h)("div", { "data-keyword": (0, values_1.reactAttr)(item) }, (0, values_1.reactText)(item)));
+};
+const arrayField = (ctx, p, _chain) => {
+    if (p.schema?.anyOf !== undefined)
+        return enumArray(ctx, p);
+    const { name, schema, ui } = p;
+    const extracted = (0, uiSchema_1.extractUiSchema)(ui);
+    const norm = (0, arrays_1.normalizeArraySchema)(schema, ctx.sink, name);
+    const raw = (0, paths_1.getIn)(ctx.values, name);
+    const values = Array.isArray(raw) ? raw : undefined;
+    const locked = !!extracted.disabled || !!schema?.readOnly;
+    const slots = (values ?? []).map((item, index) => (0, arrays_1.itemSchema)(norm, index, item));
+    const items = (values ?? []).map((item, index) => {
+        const path = `${name}[${index}]`;
+        const { schema: s, guarded, fixed } = slots[index];
+        const field = guarded
+            ? guardedItem(ctx, path, item, s)
+            : // Items are bounded by the data: a new $ref chain.
+                (0, dispatch_1.formField)(ctx, { name: path, schema: (0, object_1.prepareChildSchema)(s, schema), ui: { disabled: extracted.disabled, ...(ui?.[index] || ui?.items) }, forceDefaultValue: !fixed }, []);
+        const move = (to) => ({ type: "arrayMove", path: name, from: index, to });
+        const buttons = locked || fixed
+            ? null
+            : (0, markup_1.fc)(["ArrayFieldItemButtons"], {}, (0, parts_1.buttonMarkup)(extracted.removeButton, "ArrayFieldRemoveButton", "remove", path, "-", { type: "arrayRemove", path: name, index }), !guarded && index > norm.fixed.length && !slots[index - 1]?.guarded ? (0, parts_1.buttonMarkup)(extracted.upButton, "ArrayFieldUpButton", "up", path, "↑", move(index - 1)) : null, !guarded && index < values.length - 1 ? (0, parts_1.buttonMarkup)(extracted.downButton, "ArrayFieldDownButton", "down", path, "↓", move(index + 1)) : null);
+        return (0, markup_1.fc)(["ArrayFieldItem"], {}, field, buttons);
+    });
+    const props = { ...p, kind: "array", data: { "data-fjsf-array": name } };
+    const error = typeof (0, paths_1.getIn)(ctx.errors, name) === "string" ? (0, chrome_1.errorMarkup)(ctx, name, extracted.props?.error) : null;
+    const chrome = { ...(0, chrome_1.formChrome)(ctx, props, false), error };
+    const template = (0, templated_1.templated)(ctx, "ArrayFieldTemplate", props, (0, markup_1.arrayTemplateMarkup)(chrome, items), items, { items: values, itemNodes: items });
+    const add = norm.tail && !locked ? (0, parts_1.buttonMarkup)(extracted.addButton, "ArrayFieldAddButton", "add", name, "+", { type: "arrayAdd", path: name, item: (0, schemaType_1.defaultValueForType)(norm.tail.type) }) : null;
+    return (0, vnode_1.h)("#fragment", {}, template, add);
+};
+exports.arrayField = arrayField;

package/dist/cjs/v3/raw/model/form/choice.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.choicesInputMarkup = exports.multipleChoiceField = exports.toggleInputMarkup = exports.toggleField = exports.radioInputsMarkup = exports.radioField = void 0;
+const choiceStyle_1 = require("../../core/choiceStyle");
+const enums_1 = require("../../core/enums");
+const json_1 = require("../../core/json");
+const paths_1 = require("../../core/paths");
+const storedFormats_1 = require("../../core/policies/storedFormats");
+const uiSchema_1 = require("../../core/uiSchema");
+const values_1 = require("../view/values");
+const chrome_1 = require("./chrome");
+const leaf_1 = require("./leaf");
+const markup_1 = require("./markup");
+const templated_1 = require("./templated");
+const field = (ctx, p, content) => (0, templated_1.templated)(ctx, "FieldTemplate", p, (0, markup_1.fieldTemplateMarkup)((0, chrome_1.formChrome)(ctx, p), content), content);
+const control = (p) => ({ name: p.name, readonly: p.schema?.readOnly ? true : undefined });
+/** RadioField: true/false radios. formik checked them by strict equality with the string value (kept). */
+const radioField = (ctx, p) => {
+    const props = { ...p, data: { "data-fjsf-boolean": p.name }, kind: "radio" };
+    const label = (0, uiSchema_1.extractUiSchema)(p.ui).label;
+    const markup = (0, exports.radioInputsMarkup)(ctx, props, label);
+    return field(ctx, props, [(0, markup_1.fcComposite)("RadioFieldInput", { inputProps: { readOnly: p.schema?.readOnly, ...(0, uiSchema_1.extractUiSchema)(p.ui).props }, label, name: p.name }, undefined, markup)]);
+};
+exports.radioField = radioField;
+/** The RadioFieldInput markup (also the default of FormComponents.RadioFieldInput). */
+const radioInputsMarkup = (ctx, props, label) => {
+    const value = (0, paths_1.getIn)(ctx.values, props.name);
+    const radio = (v, names) => (0, markup_1.fc)(["RadioFieldElement"], {}, {
+        ...(0, markup_1.fc)(["RadioFieldInputElement"], { ...(0, leaf_1.inputAttrs)(ctx, props), ...control(props), type: "radio", value: v, checked: storedFormats_1.BOOLEAN_RADIO_STORAGE === "strings" ? value === v : value === (v === "true") }),
+        on: (0, leaf_1.on)(props, "radio"),
+    }, (0, markup_1.fc)(names, {}, (0, values_1.reactText)((0, json_1.isPlainObject)(label) ? label[v] : undefined) || v));
+    return (0, markup_1.fc)(["RadioFieldContainer"], {}, radio("true", ["RadioFieldLabelTrue"]), radio("false", ["RadioFieldLabelFalse"]));
+};
+exports.radioInputsMarkup = radioInputsMarkup;
+/** ToggleField: a checkbox (stores a boolean, Q-R19-1) and the toggle. */
+const toggleField = (ctx, p) => {
+    const props = { ...p, data: { "data-fjsf-boolean": p.name }, kind: "toggle" };
+    return field(ctx, props, [(0, markup_1.fcComposite)("ToggleFieldInput", { inputProps: { readOnly: p.schema?.readOnly, ...(0, uiSchema_1.extractUiSchema)(p.ui).props }, name: p.name }, undefined, (0, exports.toggleInputMarkup)(ctx, props))]);
+};
+exports.toggleField = toggleField;
+/** The ToggleFieldInput markup (also the default of FormComponents.ToggleFieldInput). */
+const toggleInputMarkup = (ctx, props) => {
+    const box = { ...(0, markup_1.fc)(["ToggleFieldInputElement"], { ...(0, leaf_1.inputAttrs)(ctx, props), ...control(props), type: "checkbox", checked: !!(0, paths_1.getIn)(ctx.values, props.name) }), on: (0, leaf_1.on)(props, "checkbox") };
+    return (0, markup_1.fc)(["ToggleFieldLabel"], {}, box, (0, markup_1.fc)(["ToggleFieldToggle"], {}));
+};
+exports.toggleInputMarkup = toggleInputMarkup;
+/** MultipleChoiceField: one radio (single) or checkbox (multi) per option; stores the consts. */
+const multipleChoiceField = (ctx, p) => {
+    const enums = (0, enums_1.getEnums)({ schema: p.schema }, ctx.sink, p.name);
+    const multi = enums?.type === enums_1.EnumsTypes.MULTI_SELECT;
+    const type = p.schema?.type;
+    const data = type === "array" ? { "data-fjsf-array": p.name } : type === "number" ? { "data-fjsf-number": p.name } : { "data-fjsf-string": p.name };
+    const props = { ...p, data, kind: multi ? "multi-enum" : "enum" };
+    const ui = (0, uiSchema_1.extractUiSchema)(p.ui);
+    const compositeProps = { inputProps: { readOnly: p.schema?.readOnly, ...ui.props }, name: p.name, enums, style: ui.style, value: (0, paths_1.getIn)(ctx.values, p.name) };
+    return field(ctx, props, [(0, markup_1.fcComposite)("MultipleChoiceFieldInput", compositeProps, undefined, (0, exports.choicesInputMarkup)(ctx, props, enums, ui.style))]);
+};
+exports.multipleChoiceField = multipleChoiceField;
+/** The MultipleChoiceFieldInput markup (also the default of FormComponents.MultipleChoiceFieldInput). */
+const choicesInputMarkup = (ctx, props, enums, style) => {
+    const p = props;
+    const multi = enums?.type === enums_1.EnumsTypes.MULTI_SELECT;
+    const raw = (0, paths_1.getIn)(ctx.values, p.name);
+    const current = multi ? (Array.isArray(raw) ? raw : []) : raw;
+    const checked = (c) => (multi ? current.includes(c) : current === c);
+    const options = (enums?.values ?? []).map((o) => (0, markup_1.fc)(["MultipleChoiceFieldElement"], { "data-fjsf-enum-value": (0, values_1.reactAttr)(o?.const) }, {
+        ...(0, markup_1.fc)(["MultipleChoiceFieldInputElement"], { ...(0, leaf_1.inputAttrs)(ctx, props), ...control(props), type: multi ? "checkbox" : "radio", value: o?.const !== undefined ? (0, values_1.reactAttr)(o.const) ?? "" : "", checked: checked(o?.const) }),
+        on: p.schema?.readOnly
+            ? { click: { type: "preventDefault" }, blur: { type: "touch", path: p.name } }
+            : { change: { type: "choice", path: p.name, value: o?.const, multi }, blur: { type: "touch", path: p.name } },
+    }, (0, markup_1.fc)(["MultipleChoiceFieldLabel"], {}, (0, values_1.reactText)(o?.title))));
+    return (0, markup_1.fc)(["MultipleChoiceFieldContainer"], (0, choiceStyle_1.choiceStyle)(style), options);
+};
+exports.choicesInputMarkup = choicesInputMarkup;

package/dist/cjs/v3/raw/model/form/chrome.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formChrome = exports.infoMarkup = exports.errorMarkup = exports.instrumentation = void 0;
+const paths_1 = require("../../core/paths");
+const uiSchema_1 = require("../../core/uiSchema");
+const fields_1 = require("../view/fields");
+const values_1 = require("../view/values");
+const markup_1 = require("./markup");
+/** 2.x getInstrumentationAttributes. */
+const instrumentation = (p) => ({
+    "data-fjsf-path": p.name,
+    "data-fjsf-kind": p.kind,
+    "data-fjsf-required": p.required ? "true" : undefined,
+    "data-fjsf-readonly": p.schema?.readOnly ? "true" : undefined,
+    "data-fjsf-hidden": p.hidden ? "true" : undefined,
+});
+exports.instrumentation = instrumentation;
+/** ErrorMessage (2.x: useField meta, shown when touched): a composite so pro3's HiddenErrorMessage can replace it. */
+const errorMarkup = (ctx, name, errorProps) => {
+    const error = (0, paths_1.getIn)(ctx.errors, name);
+    const shown = (0, paths_1.getIn)(ctx.touched, name) && typeof error === "string" && error ? (0, markup_1.plain)("div", "ErrorText", {}, error) : null;
+    return (0, markup_1.fcComposite)("ErrorMessage", { ...(errorProps && typeof errorProps === "object" ? errorProps : {}), name }, undefined, shown);
+};
+exports.errorMarkup = errorMarkup;
+/** FieldInfo (ui:info): tooltip, or an inline box toggled by the info link (formOptions.components.FieldInfo.display). */
+const infoMarkup = (ctx, path, info) => {
+    if (!info || typeof info !== "object")
+        return null;
+    const display = info.display ?? ctx.formOptions?.components?.FieldInfo?.display ?? "tooltip";
+    const position = ["top", "right", "bottom", "left"].includes(info.position) ? info.position : "top";
+    const id = `${path}#info`;
+    const label = (0, markup_1.fc)(["FieldInfoLabel"], {}, (0, values_1.textOf)(info.label) ?? "i");
+    const link = (...extra) => ({ ...(0, markup_1.fc)(["FieldInfoContainer"], { "data-fjsf-button": "info", href: "#", class: info.className }, label, ...extra), on: { click: { type: "info", id, display } } });
+    const content = (0, values_1.textOf)(info.content);
+    const markup = display === "inline"
+        ? [link(), ctx.ui.infoOpen?.[id] ? (0, markup_1.fc)(["InlineFieldInfoWrapper"], {}, (0, markup_1.fc)(["InlineFieldInfoBoxInnerElement"], {}, content)) : null]
+        : [
+            link((0, markup_1.fc)(["FieldInfoBoxElement"], 
+            // §4.3: the tooltip side for the generated styles (2.x: a `position` prop, top by default)
+            { role: "tooltip", "data-fjsf-info-position": position }, (0, markup_1.fc)(["FieldInfoBoxArrowElement"], { "data-fjsf-info-position": position }), (0, markup_1.fc)(["FieldInfoBoxInnerElement"], {}, content))),
+        ];
+    return (0, markup_1.fcComposite)("FieldInfo", { ...info }, undefined, ...markup);
+};
+exports.infoMarkup = infoMarkup;
+const formChrome = (ctx, p, withError = true) => {
+    const extracted = (0, uiSchema_1.extractUiSchema)(p.ui);
+    const { wrapperAttrs, titleAttrs, descriptionAttrs } = (0, fields_1.elementProps)(p.ui, p.name, ctx.sink);
+    const helpAttrs = (0, fields_1.elementProps)({ "ui:props": { wrapper: extracted.props?.help } }, p.name, ctx.sink).wrapperAttrs;
+    return {
+        path: p.name,
+        // 2.x hid a property left out of ui:order through its wrapper style.
+        attrs: { ...wrapperAttrs, ...(p.hidden ? { style: [wrapperAttrs.style, "display:none"].filter(Boolean).join(";") } : {}), ...p.data, ...(0, exports.instrumentation)(p) },
+        title: (0, values_1.titleOf)(p.ui, p.schema, p.name),
+        titleAttrs,
+        description: (0, values_1.descriptionOf)(p.ui, p.schema),
+        descriptionAttrs,
+        help: (0, values_1.textOf)(extracted.help),
+        helpAttrs,
+        required: p.required,
+        disabled: !!extracted.props?.disabled,
+        info: (0, exports.infoMarkup)(ctx, p.name, extracted.info),
+        error: withError ? (0, exports.errorMarkup)(ctx, p.name, extracted.props?.error) : null,
+    };
+};
+exports.formChrome = formChrome;