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

package/dist/esm/v3/raw/model/form/dispatch.js

@@ -0,0 +1,114 @@
+import { issue } from "../../core/issues";
+import { mayEnter } from "../../core/trail";
+import { isPlainObject } from "../../core/json";
+import { resolveRefs } from "../../core/refs";
+import { getSchemaType } from "../../core/schemaType";
+import { extractUiSchema } from "../../core/uiSchema";
+import { h, withHost } from "../vnode";
+import { fieldTemplateMarkup } from "./markup";
+import { formChrome } from "./chrome";
+import { anyField } from "./any";
+import { arrayField } from "./array";
+import { booleanField, nullField, stringField, textAreaField } from "./leaf";
+import { objectField } from "./object";
+import { plain } from "./markup";
+import { multipleChoiceField, radioField, toggleField } from "./choice";
+import { dateField } from "./date";
+import { searchableMultiTagField, searchableSelectField } from "./searchable";
+import { fileUploadMarkup, filesOf, filesUploadMarkup } from "./upload";
+import { getIn } from "../../core/paths";
+export const COMPONENT_TYPES = {
+    array: "ArrayField", boolean: "BooleanField", integer: "NumberField", number: "NumberField",
+    object: "ObjectField", string: "StringField", null: "NullField", any: "AnyField",
+};
+/** Built-in field names of slice S5. */
+export const S5_FIELDS = new Set([
+    "DateField", "SearchableSelectField", "SearchableMultiTagSelectField", "MultipleChoiceField", "RadioField", "ToggleField", "FileUploadField", "FilesUploadField",
+]);
+const BUILT_IN = new Set([...Object.values(COMPONENT_TYPES), "TextAreaField", "SchemaField", ...S5_FIELDS]);
+/** Fields that applied defaults on mount in 2.x (useSetDefault). */
+const DEFAULTING = new Set(["StringField", "NumberField", "TextAreaField", "BooleanField", "ObjectField", "ArrayField", ...S5_FIELDS]);
+/** The upload fields: the host renders its upload component here; RAW draws the state after mount (no upload running). */
+const uploadHost = (ctx, field, p) => {
+    const value = getIn(ctx.values, p.name);
+    const markup = field === "FileUploadField"
+        ? fileUploadMarkup(ctx, p, { value, uploadedFile: null, progress: 0 })
+        : filesUploadMarkup(ctx, p, { value, files: filesOf(value), progress: Object.fromEntries(filesOf(value).map((f) => [f.progressId, 100])), dragging: false });
+    const props = { name: p.name, schema: p.schema, uiSchema: p.ui, ...(p.required !== undefined ? { required: p.required } : {}), ...(p.hidden ? { "data-fjsf-hidden": "true" } : {}) };
+    return withHost(h("#fragment", {}, markup), { kind: "field", field, props });
+};
+const byType = (schema) => {
+    let type = getSchemaType(schema);
+    if (Array.isArray(type))
+        type = type[0];
+    return COMPONENT_TYPES[type || "any"];
+};
+/** A field the host provides: the caller's field gets the 2.x SchemaField props. */
+const slot = (ctx, p, field, chain) => {
+    const props = {
+        "data-fjsf-kind": "custom", name: p.name, schema: p.schema, uiSchema: p.ui,
+        ...(p.required !== undefined ? { required: p.required } : {}),
+        ...(p.hidden ? { "data-fjsf-hidden": "true", style: { display: "none" } } : {}),
+        ...(p.forceDefaultValue !== undefined ? { forceDefaultValue: p.forceDefaultValue } : {}),
+    };
+    const markup = fieldTemplateMarkup(formChrome(ctx, { ...p, kind: "custom" }), [h("div", { "data-fjsf-slot": p.name, "data-fjsf-field": field })]);
+    return withHost(markup, { kind: "field", field, props, chain });
+};
+export const formField = (ctx, p, chain = [], trail = []) => {
+    const given = p.schema;
+    const ref = isPlainObject(given) && typeof given.$ref === "string" ? given.$ref : undefined;
+    if (ref && chain.includes(ref)) {
+        ctx.sink(issue("REF_CYCLE", p.name, ref));
+        return nullField(ctx, { ...p, kind: "error" });
+    }
+    const next = ref ? [...chain, ref] : chain;
+    const resolved = given === undefined
+        ? { schema: undefined, uiSchema: p.ui }
+        : resolveRefs(given, p.ui, { definitions: ctx.definitions, defs: ctx.defs, uiSchemaDefinitions: ctx.uiDefinitions, sink: ctx.sink, path: p.name });
+    const q = { ...p, schema: resolved.schema, ui: resolved.uiSchema };
+    const field = extractUiSchema(q.ui).field;
+    if (typeof field === "function")
+        return slot(ctx, q, "", next);
+    if (typeof field === "string" && ctx.customFields.includes(field))
+        return slot(ctx, q, field, next);
+    // SEC-UI-1/2: an unknown name (also "constructor", "toString") is reported and the type's field renders.
+    if (typeof field === "string" && !BUILT_IN.has(field))
+        ctx.sink(issue("FIELD_UNKNOWN", q.name, field));
+    let component = typeof field === "string" && BUILT_IN.has(field) ? field : byType(q.schema);
+    if (!component) {
+        ctx.sink(issue("SCHEMA_UNSUPPORTED_TYPE", q.name, String(getSchemaType(q.schema))));
+        return h("p", { style: "color:red" }, '!!! Unsupported field "" !!!');
+    }
+    if (ctx.customFields.includes(component))
+        return slot(ctx, q, component, next);
+    return builtIn(ctx, component, q, next, trail);
+};
+/** One built-in field by name (2.x `FormFields.X`). */
+export const builtIn = (ctx, component, p, chain = [], trail = []) => {
+    if (DEFAULTING.has(component) && p.name)
+        ctx.appeared.push({ path: p.name, schema: p.schema, forceDefaultValue: !!p.forceDefaultValue });
+    switch (component) {
+        case "ObjectField":
+            // BUG-110: an object schema that contains itself, or nests too deep, is cut with a code.
+            if (!isPlainObject(p.schema) || mayEnter(p.schema, trail, ctx.sink, p.name))
+                return objectField(ctx, p, chain, isPlainObject(p.schema) ? [...trail, p.schema] : trail);
+            return nullField(ctx, { ...p, kind: "error" });
+        case "ArrayField": return arrayField(ctx, p, chain);
+        case "NumberField": return plain("div", "NumberFieldWrapper", {}, stringField(ctx, p, true));
+        case "StringField": return stringField(ctx, p);
+        case "TextAreaField": return textAreaField(ctx, p);
+        case "BooleanField": return booleanField(ctx, p);
+        case "NullField": return nullField(ctx, p);
+        case "AnyField": return anyField(ctx, p, chain, trail);
+        case "SchemaField": return formField(ctx, p, chain, trail);
+        case "DateField": return dateField(ctx, p);
+        case "RadioField": return radioField(ctx, p);
+        case "ToggleField": return toggleField(ctx, p);
+        case "MultipleChoiceField": return multipleChoiceField(ctx, p);
+        case "SearchableSelectField": return searchableSelectField(ctx, p);
+        case "SearchableMultiTagSelectField": return searchableMultiTagField(ctx, p);
+        case "FileUploadField":
+        case "FilesUploadField": return uploadHost(ctx, component, p);
+        default: return builtIn(ctx, byType(p.schema) ?? "AnyField", p, chain, trail);
+    }
+};

package/dist/esm/v3/raw/model/form/iconData.js

@@ -0,0 +1,16 @@
+// react-icons (Font Awesome 5) glyphs 2.x rendered in the S5 fields, as data: the v3 React layer may not import
+// react-icons (ESLint boundary). Generated from react-icons/fa; rendered by iconMarkup (form/icons.ts).
+export const ICONS = {
+    FaCalendar: { viewBox: "0 0 448 512", paths: ["M12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm436-44v-36c0-26.5-21.5-48-48-48h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v36c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12z"] },
+    FaCloudUploadAlt: { viewBox: "0 0 640 512", paths: ["M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z"] },
+    FaTrash: { viewBox: "0 0 448 512", paths: ["M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z"] },
+    FaFile: { viewBox: "0 0 384 512", paths: ["M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"] },
+    FaFilePdf: { viewBox: "0 0 384 512", paths: ["M181.9 256.1c-5-16-4.9-46.9-2-46.9 8.4 0 7.6 36.9 2 46.9zm-1.7 47.2c-7.7 20.2-17.3 43.3-28.4 62.7 18.3-7 39-17.2 62.9-21.9-12.7-9.6-24.9-23.4-34.5-40.8zM86.1 428.1c0 .8 13.2-5.4 34.9-40.2-6.7 6.3-29.1 24.5-34.9 40.2zM248 160h136v328c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V24C0 10.7 10.7 0 24 0h200v136c0 13.2 10.8 24 24 24zm-8 171.8c-20-12.2-33.3-29-42.7-53.8 4.5-18.5 11.6-46.6 6.2-64.2-4.7-29.4-42.4-26.5-47.8-6.8-5 18.3-.4 44.1 8.1 77-11.6 27.6-28.7 64.6-40.8 85.8-.1 0-.1.1-.2.1-27.1 13.9-73.6 44.5-54.5 68 5.6 6.9 16 10 21.5 10 17.9 0 35.7-18 61.1-61.8 25.8-8.5 54.1-19.1 79-23.2 21.7 11.8 47.1 19.5 64 19.5 29.2 0 31.2-32 19.7-43.4-13.9-13.6-54.3-9.7-73.6-7.2zM377 105L279 7c-4.5-4.5-10.6-7-17-7h-6v128h128v-6.1c0-6.3-2.5-12.4-7-16.9zm-74.1 255.3c4.1-2.7-2.5-11.9-42.8-9 37.1 15.8 42.8 9 42.8 9z"] },
+    FaFileAudio: { viewBox: "0 0 384 512", paths: ["M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm-64 268c0 10.7-12.9 16-20.5 8.5L104 376H76c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h28l35.5-36.5c7.6-7.6 20.5-2.2 20.5 8.5v136zm33.2-47.6c9.1-9.3 9.1-24.1 0-33.4-22.1-22.8 12.2-56.2 34.4-33.5 27.2 27.9 27.2 72.4 0 100.4-21.8 22.3-56.9-10.4-34.4-33.5zm86-117.1c54.4 55.9 54.4 144.8 0 200.8-21.8 22.4-57-10.3-34.4-33.5 36.2-37.2 36.3-96.5 0-133.8-22.1-22.8 12.3-56.3 34.4-33.5zM384 121.9v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"] },
+    FaFileImage: { viewBox: "0 0 384 512", paths: ["M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"] },
+    FaFileCsv: { viewBox: "0 0 384 512", paths: ["M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm-96 144c0 4.42-3.58 8-8 8h-8c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h8c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8h-8c-26.51 0-48-21.49-48-48v-32c0-26.51 21.49-48 48-48h8c4.42 0 8 3.58 8 8v16zm44.27 104H160c-4.42 0-8-3.58-8-8v-16c0-4.42 3.58-8 8-8h12.27c5.95 0 10.41-3.5 10.41-6.62 0-1.3-.75-2.66-2.12-3.84l-21.89-18.77c-8.47-7.22-13.33-17.48-13.33-28.14 0-21.3 19.02-38.62 42.41-38.62H200c4.42 0 8 3.58 8 8v16c0 4.42-3.58 8-8 8h-12.27c-5.95 0-10.41 3.5-10.41 6.62 0 1.3.75 2.66 2.12 3.84l21.89 18.77c8.47 7.22 13.33 17.48 13.33 28.14.01 21.29-19 38.62-42.39 38.62zM256 264v20.8c0 20.27 5.7 40.17 16 56.88 10.3-16.7 16-36.61 16-56.88V264c0-4.42 3.58-8 8-8h16c4.42 0 8 3.58 8 8v20.8c0 35.48-12.88 68.89-36.28 94.09-3.02 3.25-7.27 5.11-11.72 5.11s-8.7-1.86-11.72-5.11c-23.4-25.2-36.28-58.61-36.28-94.09V264c0-4.42 3.58-8 8-8h16c4.42 0 8 3.58 8 8zm121-159L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"] },
+    FaFileWord: { viewBox: "0 0 384 512", paths: ["M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm57.1 120H305c7.7 0 13.4 7.1 11.7 14.7l-38 168c-1.2 5.5-6.1 9.3-11.7 9.3h-38c-5.5 0-10.3-3.8-11.6-9.1-25.8-103.5-20.8-81.2-25.6-110.5h-.5c-1.1 14.3-2.4 17.4-25.6 110.5-1.3 5.3-6.1 9.1-11.6 9.1H117c-5.6 0-10.5-3.9-11.7-9.4l-37.8-168c-1.7-7.5 4-14.6 11.7-14.6h24.5c5.7 0 10.7 4 11.8 9.7 15.6 78 20.1 109.5 21 122.2 1.6-10.2 7.3-32.7 29.4-122.7 1.3-5.4 6.1-9.1 11.7-9.1h29.1c5.6 0 10.4 3.8 11.7 9.2 24 100.4 28.8 124 29.6 129.4-.2-11.2-2.6-17.8 21.6-129.2 1-5.6 5.9-9.5 11.5-9.5zM384 121.9v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"] },
+    FaFileExcel: { viewBox: "0 0 384 512", paths: ["M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm60.1 106.5L224 336l60.1 93.5c5.1 8-.6 18.5-10.1 18.5h-34.9c-4.4 0-8.5-2.4-10.6-6.3C208.9 405.5 192 373 192 373c-6.4 14.8-10 20-36.6 68.8-2.1 3.9-6.1 6.3-10.5 6.3H110c-9.5 0-15.2-10.5-10.1-18.5l60.3-93.5-60.3-93.5c-5.2-8 .6-18.5 10.1-18.5h34.8c4.4 0 8.5 2.4 10.6 6.3 26.1 48.8 20 33.6 36.6 68.5 0 0 6.1-11.7 36.6-68.5 2.1-3.9 6.2-6.3 10.6-6.3H274c9.5-.1 15.2 10.4 10.1 18.4zM384 121.9v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"] },
+    FaFilePowerpoint: { viewBox: "0 0 384 512", paths: ["M193.7 271.2c8.8 0 15.5 2.7 20.3 8.1 9.6 10.9 9.8 32.7-.2 44.1-4.9 5.6-11.9 8.5-21.1 8.5h-26.9v-60.7h27.9zM377 105L279 7c-4.5-4.5-10.6-7-17-7h-6v128h128v-6.1c0-6.3-2.5-12.4-7-16.9zm-153 31V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm53 165.2c0 90.3-88.8 77.6-111.1 77.6V436c0 6.6-5.4 12-12 12h-30.8c-6.6 0-12-5.4-12-12V236.2c0-6.6 5.4-12 12-12h81c44.5 0 72.9 32.8 72.9 77z"] },
+    FaFileCode: { viewBox: "0 0 384 512", paths: ["M384 121.941V128H256V0h6.059c6.365 0 12.47 2.529 16.971 7.029l97.941 97.941A24.005 24.005 0 0 1 384 121.941zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zM123.206 400.505a5.4 5.4 0 0 1-7.633.246l-64.866-60.812a5.4 5.4 0 0 1 0-7.879l64.866-60.812a5.4 5.4 0 0 1 7.633.246l19.579 20.885a5.4 5.4 0 0 1-.372 7.747L101.65 336l40.763 35.874a5.4 5.4 0 0 1 .372 7.747l-19.579 20.884zm51.295 50.479l-27.453-7.97a5.402 5.402 0 0 1-3.681-6.692l61.44-211.626a5.402 5.402 0 0 1 6.692-3.681l27.452 7.97a5.4 5.4 0 0 1 3.68 6.692l-61.44 211.626a5.397 5.397 0 0 1-6.69 3.681zm160.792-111.045l-64.866 60.812a5.4 5.4 0 0 1-7.633-.246l-19.58-20.885a5.4 5.4 0 0 1 .372-7.747L284.35 336l-40.763-35.874a5.4 5.4 0 0 1-.372-7.747l19.58-20.885a5.4 5.4 0 0 1 7.633-.246l64.866 60.812a5.4 5.4 0 0 1-.001 7.879z"] },
+};

package/dist/esm/v3/raw/model/form/icons.js

@@ -0,0 +1,6 @@
+import { h } from "../vnode";
+import { ICONS } from "./iconData";
+export const iconMarkup = (name, className) => {
+    const icon = ICONS[name] ?? ICONS.FaFile;
+    return h("svg", { stroke: "currentColor", fill: "currentColor", "stroke-width": "0", viewBox: icon.viewBox, ...(className ? { class: className } : {}), height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" }, icon.paths.map((d) => h("path", { d })));
+};

package/dist/esm/v3/raw/model/form/index.js

@@ -0,0 +1,32 @@
+import { ignoreIssues } from "../../core/issues";
+import { isPlainObject } from "../../core/json";
+import { fc } from "./markup";
+export const createFormContext = (schema, uiSchema, state, o = {}) => ({
+    values: state.values ?? {},
+    errors: state.errors ?? {},
+    touched: state.touched ?? {},
+    submitting: !!state.submitting,
+    customFields: o.customFields ?? [],
+    definitions: o.definitions ?? (isPlainObject(schema?.definitions) ? schema.definitions : {}),
+    defs: o.defs ?? (isPlainObject(schema?.$defs) ? schema.$defs : undefined),
+    uiDefinitions: o.uiDefinitions ?? uiSchema?.definitions,
+    sink: o.sink ?? ignoreIssues,
+    formLocalization: o.formLocalization,
+    formOptions: o.formOptions,
+    locale: o.locale,
+    ui: o.ui ?? {},
+    hideUnmarkedAdditionalProperties: !!o.hideUnmarkedAdditionalProperties,
+    orderable: !!o.orderable,
+    appeared: [],
+    prune: [],
+    anyGuesses: {},
+});
+/** 2.x <Form>: formik's <form action="#"> (registry Form), the fields, then the caller's children or the submit button. */
+export const formShell = (content, o) => {
+    const submit = o.hideSubmit ? null : fc(["FormButton"], { type: "submit", disabled: o.submitting || undefined, "data-fjsf-button": "submit" }, "Send");
+    const form = fc(["Form"], { action: "#", ...(o.className ? { class: o.className } : {}) }, content, o.children !== undefined ? o.children : fc(["FormButtonWrapper"], {}, submit));
+    return { ...form, on: { submit: { type: "submit" } } };
+};
+export { applyAction } from "./actions";
+export { newAppearances, settle } from "./appearance";
+export { builtIn, formField, S5_FIELDS } from "./dispatch";

package/dist/esm/v3/raw/model/form/leaf.js

@@ -0,0 +1,89 @@
+import { EnumsTypes, getEnums } from "../../core/enums";
+import { isPlainObject } from "../../core/json";
+import { getIn } from "../../core/paths";
+import { getSchemaType } from "../../core/schemaType";
+import { filterUiProps } from "../../core/uiProps";
+import { extractUiSchema } from "../../core/uiSchema";
+import { h } from "../vnode";
+import { reactAttr, reactText } from "../view/values";
+import { formChrome } from "./chrome";
+import { fc, fcAs, fieldTemplateMarkup, plain } from "./markup";
+import { templated } from "./templated";
+/** HTML input types a uiSchema may pick (`ui:type` / `ui:options.type`); others fall back to text. */
+const INPUT_TYPES = new Set(["text", "number", "email", "tel", "url", "password", "search", "date", "time", "datetime-local", "month", "week", "color", "range"]);
+const NOT_INPUT_PROPS = new Set(["wrapper", "title", "description", "help", "error", "type"]);
+/** `ui:props` for the control (2.x spread them verbatim), through the D5 allowlist. */
+export const inputAttrs = (ctx, p) => {
+    const props = extractUiSchema(p.ui).props;
+    if (!isPlainObject(props))
+        return {};
+    const own = Object.fromEntries(Object.entries(props).filter(([k]) => !NOT_INPUT_PROPS.has(k)));
+    return filterUiProps(own, p.name, ctx.sink).attrs;
+};
+const control = (p) => ({ name: p.name, readonly: p.schema?.readOnly ? true : undefined });
+/** The control's actions. Q-RO-1: a readOnly control never changes the value (browsers ignore readonly on select/checkbox). */
+export const on = (p, parse, consts) => ({
+    ...(p.schema?.readOnly ? {} : { change: { type: "set", path: p.name, parse, ...(consts ? { consts } : {}) } }),
+    // A readOnly checkbox / radio must not even toggle visually (2.x blocked the pointer).
+    ...(p.schema?.readOnly && (parse === "checkbox" || parse === "radio") ? { click: { type: "preventDefault" } } : {}),
+    blur: { type: "touch", path: p.name },
+});
+const field = (ctx, p, content) => templated(ctx, "FieldTemplate", p, fieldTemplateMarkup(formChrome(ctx, p), content), content);
+/** StringField / NumberField: an input, or a select for `oneOf`/`enum` consts. */
+export const stringField = (ctx, p, numberField = false) => {
+    const ui = extractUiSchema(p.ui);
+    const value = getIn(ctx.values, p.name);
+    const enums = getEnums({ schema: p.schema }, ctx.sink, p.name);
+    // Q-REN-4 kept (Q12): 2.x tests `schema.type === "string"`, so type arrays carry data-fjsf-number.
+    const data = p.schema?.type === "string" ? { "data-fjsf-string": p.name } : { "data-fjsf-number": p.name };
+    // 2.x NumberField put type "number" into ui:props; `ui:options.props` replaces those (extractUiSchema), so such
+    // fields were text inputs storing strings. Kept: pro3's stored format (legacy/completeDisabled).
+    const numberType = numberField && !isPlainObject(p.ui?.["ui:options"]?.props);
+    const type = numberType ? "number" : typeof ui.type === "string" && INPUT_TYPES.has(ui.type) ? ui.type : undefined;
+    const isSelect = enums?.type === EnumsTypes.SELECT;
+    const props = { ...p, data, kind: p.kind ?? (isSelect ? "enum" : ["number", "integer"].includes(getSchemaType(p.schema)) ? "number" : "string") };
+    if (isSelect) {
+        const placeholderOpts = ui.placeholderOptionOptions?.props ?? {};
+        const options = [
+            h("option", { value: "", disabled: placeholderOpts.disabled === true ? true : undefined, hidden: placeholderOpts.hidden === false ? undefined : true }, reactText(ui.placeholder)),
+            ...enums.values.map((o) => h("option", { value: reactAttr(o?.const) ?? "" }, reactText(o?.title))),
+        ];
+        const select = { ...fcAs("select", ["SelectFieldInput"], { ...inputAttrs(ctx, props), ...control(props), value: reactAttr(value) ?? "" }, options), on: on(props, "enum", enums.values.map((o) => o?.const)) };
+        return field(ctx, props, [plain("div", "StringFieldWrapper", {}, select)]);
+    }
+    const input = { ...fc(["FieldInput"], { type, placeholder: reactAttr(ui.placeholder), ...inputAttrs(ctx, props), ...control(props), value: textValue(value) }), on: on(props, type === "number" ? "number" : "text") };
+    return field(ctx, props, [plain("div", "StringFieldWrapper", {}, input)]);
+};
+/** What an input shows for a stored value (React renders primitives; objects and arrays are not shown). */
+export const textValue = (value) => {
+    if (value === undefined || value === null)
+        return "";
+    try {
+        return String(value); // React's coercion: an object shows "[object Object]", an array "a,b" (2.x)
+    }
+    catch {
+        return ""; // a null-prototype object has no toString (BUG-109: never throw)
+    }
+};
+export const textAreaField = (ctx, p) => {
+    const props = { ...p, data: { "data-fjsf-string": p.name }, kind: "textarea" };
+    const value = textValue(getIn(ctx.values, p.name));
+    const area = {
+        ...fcAs("textarea", ["TextAreaFieldInput"], { placeholder: reactAttr(extractUiSchema(p.ui).placeholder), ...inputAttrs(ctx, props), ...control(props), value }),
+        on: on(props, "text"),
+    };
+    return field(ctx, props, [area]);
+};
+/** BooleanField: a checkbox (stores true/false, Q-R19-1) and its ui:label, which toggles on click (BUG-FMK-1: nested path). */
+export const booleanField = (ctx, p) => {
+    const props = { ...p, data: { "data-fjsf-boolean": p.name }, kind: p.kind ?? "boolean" };
+    const value = getIn(ctx.values, p.name);
+    const label = extractUiSchema(p.ui).label;
+    // Q-UI-8: 2.x crashed on a {true,false} label in Form; v3 shows the one for the value.
+    const text = isPlainObject(label) ? reactText(value === true ? label.true : value === false ? label.false : undefined) : reactText(label);
+    // formik Field: checked = !!value (a stored truthy string shows checked); a change stores a boolean (Q-R19-1).
+    const box = { ...fc(["FieldInput"], { ...inputAttrs(ctx, props), ...control(props), type: "checkbox", checked: !!value }), on: on(props, "checkbox") };
+    const span = { ...h("span", {}, text), on: { click: { type: "toggle", path: p.name } } };
+    return field(ctx, props, [fc(["BooleanFieldWrapper"], {}, box, span)]);
+};
+export const nullField = (ctx, p) => field(ctx, { ...p, data: { "data-fjsf-null": p.name }, kind: "null" }, []);

package/dist/esm/v3/raw/model/form/markup.js

@@ -0,0 +1,35 @@
+import { expandClasses } from "../classes";
+import { h, withHost } from "../vnode";
+import { FORM_COMPONENTS } from "./componentTable";
+const classOf = (chain, extra) => [...expandClasses(chain.map((n) => `fjsf-${n}`)), ...(typeof extra === "string" && extra ? [extra] : [])].join(" ");
+/** A registry component element: the default is the first name of the chain that 2.x defines. */
+export const fc = (names, attrs, ...children) => fcAs(undefined, names, attrs, ...children);
+/** Same, with another tag (2.x `formikAs`: a FieldInput rendered as select / textarea). */
+export const fcAs = (tag, names, attrs, ...children) => {
+    const entry = names.map((n) => FORM_COMPONENTS[n]).find((e) => Array.isArray(e));
+    const [own, ...chain] = entry ?? ["div", names[names.length - 1]];
+    const { class: extra, ...rest } = attrs;
+    return withHost(h(tag ?? own, { class: classOf(chain, extra), ...rest }, ...children), { kind: "component", names });
+};
+/** A styled element that is not a registry key (2.x StringFieldWrapper, ErrorText, ...). */
+export const plain = (tag, name, attrs, ...children) => {
+    const { class: extra, ...rest } = attrs;
+    return h(tag, { class: classOf([name], extra), ...rest }, ...children);
+};
+/** A 2.x function component in the registry: an override gets `props` (and `children`). */
+export const fcComposite = (name, props, content, ...markup) => withHost(h("#fragment", {}, ...markup), { kind: "component", names: [name], props, ...(content ? { children: content } : {}) });
+const required = (c, names) => (c.required ? fc(names, {}) : null);
+/** 2.x Form FieldTemplate. */
+export const fieldTemplateMarkup = (c, content) => fc(["FieldWrapper"], c.disabled ? { ...c.attrs, "aria-disabled": "true" } : c.attrs, fc(["FieldTitleInfoWrapper"], {}, c.title ? fc(["FieldTitle"], { ...c.titleAttrs, for: c.path }, c.title, required(c, ["RequiredIndicator"])) : null, c.info ?? null), c.description ? fc(["FieldDescription"], { ...c.descriptionAttrs }, c.description) : null, ...content, c.help ? fc(["FieldHelp"], { ...c.helpAttrs }, c.help) : null, c.error ?? null);
+/** 2.x ObjectFieldTemplate (fieldset + legend). */
+export const objectTemplateMarkup = (c, content) => fc(["ObjectFieldTemplateWrapper"], c.attrs, fc(["ObjectFieldTitleInfoWrapper"], {}, c.title ? fc(["ObjectFieldTemplateTitle"], { ...c.titleAttrs }, c.title, required(c, ["ObjectFieldTemplateRequiredIndicator", "RequiredIndicator"])) : null, c.info ?? null), c.description ? fc(["ObjectFieldTemplateDescription", "FieldDescription"], { ...c.descriptionAttrs }, c.description) : null, ...content, c.help ? fc(["ObjectFieldTemplateHelp", "FieldHelp"], { ...c.helpAttrs }, c.help) : null);
+/** 2.x CollapsibleObjectFieldTemplate: a toggle button around the title; ChildrenWrapper is the wrapper chain (2.x). */
+export const collapsibleTemplateMarkup = (c, content, o) => {
+    const C = "CollapsibleObjectFieldTemplate";
+    const toggle = fc([`${C}Toggle`], 
+    // Q-A11Y-1: the toggle states whether its panel is open (2.x had no aria-expanded)
+    { type: "button", "data-fjsf-button": "collapse", "aria-label": o.ariaLabel, "aria-expanded": o.collapsed ? "false" : "true" }, fc([`${C}Title`, "ObjectFieldTemplateTitle"], { ...c.titleAttrs, for: c.path }, c.title, required(c, [`${C}RequiredIndicator`, "ObjectFieldTemplateRequiredIndicator", "RequiredIndicator"]), fc([`${C}Icon`, "Icon"], {}, o.icon)));
+    return fc([`${C}Wrapper`, "ObjectFieldTemplateWrapper"], c.attrs, fc(["CollapsibleObjectTitleInfoWrapper", "ObjectFieldTitleInfoWrapper"], {}, c.title ? { ...toggle, on: { click: { type: "collapse", id: o.id, collapsed: !o.collapsed } } } : null, c.info ?? null), fc([`${C}Wrapper`, "ObjectFieldTemplateWrapper"], o.collapsed ? { style: "display:none", "data-fjsf-hidden": "true" } : {}, c.description ? fc([`${C}Description`, "ObjectFieldTemplateDescription", "FieldDescription"], { ...c.descriptionAttrs }, c.description) : null, ...content, c.help ? fc([`${C}Help`, "ObjectFieldTemplateHelp", "FieldHelp"], { ...c.helpAttrs }, c.help) : null));
+};
+/** 2.x ArrayFieldTemplate: the array names first, then the object/field fallbacks; the title keeps `for`. */
+export const arrayTemplateMarkup = (c, items) => fc(["ArrayFieldTemplateWrapper", "ObjectFieldTemplateWrapper"], c.attrs, fc(["ArrayFieldTitleInfoWrapper", "ObjectFieldTitleInfoWrapper"], {}, c.title ? fc(["ArrayFieldTemplateTitle", "ObjectFieldTemplateTitle"], { ...c.titleAttrs, for: c.path }, c.title, required(c, ["ArrayFieldTemplateRequiredIndicator", "RequiredIndicator"])) : null, c.info ?? null), c.description ? fc(["ArrayFieldTemplateDescription", "FieldDescription"], { ...c.descriptionAttrs }, c.description) : null, ...items, c.help ? fc(["ArrayFieldTemplateHelp", "FieldHelp"], { ...c.helpAttrs }, c.help) : null, c.error ?? null);

package/dist/esm/v3/raw/model/form/object.js

@@ -0,0 +1,100 @@
+import { resolveSchema } from "../../core/conditionals";
+import { issue } from "../../core/issues";
+import { isPlainObject, PROTOTYPE_KEYS } from "../../core/json";
+import { getIn } from "../../core/paths";
+import { defaultValueForType } from "../../core/schemaType";
+import { setTitleValues } from "../../core/titles";
+import { extractUiSchema, getHiddenProperties, orderAdditionalProperties, orderByUiSchema } from "../../core/uiSchema";
+import { formChrome } from "./chrome";
+import { formField } from "./dispatch";
+import { buttonMarkup, sectionMarkup } from "./parts";
+import { collapsibleTemplateMarkup, fc, objectTemplateMarkup } from "./markup";
+import { templated } from "./templated";
+/** 2.x prepareChildSchema: booleans become {}, a readOnly parent makes the child readOnly. */
+export const prepareChildSchema = (child, parent) => {
+    if (!child || typeof child === "boolean" || !isPlainObject(child))
+        return {};
+    return parent?.readOnly ? { ...child, readOnly: parent.readOnly } : child;
+};
+const childUi = (ui, key, extra = {}) => ({ ...extra, ...(ui?.properties ?? {}), ...(ui?.[`> ${key}`] ?? ui?.[key] ?? {}) });
+const join = (name, key) => (name ? `${name}.${key}` : key);
+export const objectField = (ctx, p, chain, trail = []) => {
+    const { name, schema, ui } = p;
+    const extracted = extractUiSchema(ui);
+    const raw = name ? getIn(ctx.values, name) : ctx.values;
+    const value = isPlainObject(raw) ? raw : {};
+    const [{ properties, additionalProperties, required }, toRemove] = resolveSchema(schema, value);
+    if (toRemove.length)
+        ctx.prune.push({ path: name, keys: toRemove });
+    const safe = (key) => {
+        if (!PROTOTYPE_KEYS.has(key))
+            return true;
+        ctx.sink(issue("KEY_REJECTED", join(name, key)));
+        return false;
+    };
+    const props = (isPlainObject(properties) ? properties : {});
+    const keys = Object.keys(props).filter(safe);
+    const isRequired = (key) => Array.isArray(required) && required.includes(key);
+    const child = (key, extra = {}) => formField(ctx, { name: join(name, key), schema: prepareChildSchema(props[key], schema), ui: childUi(ui, key), ...extra }, chain, trail);
+    const content = [];
+    for (const entry of orderByUiSchema(extracted.order, keys)) {
+        if (typeof entry === "string") {
+            if (props[entry])
+                content.push(child(entry, { required: isRequired(entry) }));
+        }
+        else if (entry && Array.isArray(entry.fields)) {
+            const fields = entry.fields.filter((k) => keys.includes(k) && props[k]).map((k) => child(k));
+            content.push(sectionMarkup(ctx, name, entry, fields));
+        }
+    }
+    for (const key of getHiddenProperties(extracted.order, keys))
+        if (props[key])
+            content.push(child(key, { required: isRequired(key), hidden: true }));
+    const extraKeys = Object.keys(value).filter((k) => !keys.includes(k) && safe(k));
+    const ordered = orderAdditionalProperties(extracted.order, extraKeys);
+    const show = !ctx.hideUnmarkedAdditionalProperties || !!additionalProperties;
+    // Additional properties are bounded by the data: they start a new $ref chain (2.x rendered them).
+    const extraChild = (key, hidden) => formField(ctx, { name: join(name, key), schema: prepareChildSchema(schema?.additionalProperties, schema), ui: childUi(ui, key, ui?.additionalProperties ?? {}), required: isRequired(key), ...(hidden ? { hidden } : {}) }, []);
+    if (show) {
+        ordered.forEach((key, index) => {
+            const path = join(name, key);
+            const move = (to) => ({ type: "propertyMove", path: name, order: ordered, next: swap(ordered, index, to) });
+            const buttons = [
+                ctx.orderable && index > 0 ? buttonMarkup(extracted.upButton, "ObjectFieldUpButton", "up", path, "↑", move(index - 1)) : null,
+                ctx.orderable && index < ordered.length - 1 ? buttonMarkup(extracted.downButton, "ObjectFieldDownButton", "down", path, "↓", move(index + 1)) : null,
+                buttonMarkup(extracted.removeButton, "ObjectFieldRemoveButton", "remove", path, "-", { type: "propertyRemove", path: name, key, order: ordered }),
+            ];
+            content.push(fc(["ObjectFieldItem"], {}, extraChild(key, false), fc(["ObjectFieldItemButtons"], {}, buttons)));
+        });
+        for (const key of getHiddenProperties(extracted.order, extraKeys))
+            content.push(fc(["ObjectFieldItem"], { style: "display:none" }, extraChild(key, true)));
+    }
+    if (additionalProperties) {
+        // Q-FMK-8: the type's empty value; scalars get "" (an empty control, unset for validation, Q-VAL-2).
+        const added = (isPlainObject(schema?.additionalProperties) ? defaultValueForType(schema.additionalProperties.type) : undefined) ?? "";
+        content.push(buttonMarkup(extracted.addButton, "ObjectFieldAddButton", "add", name, "+", { type: "propertyAdd", path: name, order: ordered, item: added }));
+    }
+    const fp = { ...p, kind: "object", data: { "data-fjsf-object": name || "ROOT", "data-fjsf-level": String(name ? name.split(".").length : 0) } };
+    const chrome = formChrome(ctx, fp, false);
+    // 2.x: `ui:template` first (a built-in one renders natively), then isCollapsible.
+    const named = ui?.["ui:template"];
+    const collapsible = named === "CollapsibleObjectFieldTemplate" || (named !== "ObjectFieldTemplate" && !!extracted.isCollapsible);
+    const markup = collapsible
+        ? collapsibleTemplateMarkup({ ...chrome, title: collapsibleTitle(chrome.title, name, extracted, ctx.values) }, content, collapse(ctx, name, extracted))
+        : objectTemplateMarkup(chrome, content);
+    const template = templated(ctx, collapsible ? "CollapsibleObjectFieldTemplate" : "ObjectFieldTemplate", fp, markup, content);
+    return fc(["ObjectFieldWrapper"], {}, template);
+};
+/** 2.x setTitleValues(name, getTitle ?? "", ui:options.defaultTitle ?? "", values) for string titles. */
+const collapsibleTitle = (title, name, extracted, values) => typeof title === "string" || title === undefined ? setTitleValues(name, title ?? "", String(extracted.defaultTitle ?? ""), values) || undefined : title;
+const collapse = (ctx, name, extracted) => {
+    const id = `${name}#object`;
+    const collapsed = ctx.ui.collapsed?.[id] ?? extracted.isCollapsedOnLoad ?? true;
+    const icon = collapsed ? extracted.collapsedIcon ?? "▸" : extracted.openIcon ?? "▾";
+    return { collapsed: !!collapsed, id, ariaLabel: String(extracted.props?.ariaLabel ?? name), icon: String(icon) };
+};
+const swap = (items, a, b) => {
+    const next = [...items];
+    [next[a], next[b]] = [next[b], next[a]];
+    return next;
+};

package/dist/esm/v3/raw/model/form/parts.js

@@ -0,0 +1,21 @@
+import { isPlainObject } from "../../core/json";
+import { filterUiProps } from "../../core/uiProps";
+import { textOf } from "../view/values";
+import { fc, fcComposite } from "./markup";
+/** 2.x getObjectFieldButton / the ArrayField buttons: `ui:options.<x>Button.{props,content}`, D5-filtered props. */
+export const buttonMarkup = (conf, names, purpose, path, fallback, action) => {
+    const props = isPlainObject(conf) && conf.props !== undefined ? filterUiProps(conf.props, path).attrs : {};
+    const content = isPlainObject(conf) && conf.content !== undefined ? textOf(conf.content) : fallback;
+    const button = fc(Array.isArray(names) ? names : [names], { ...props, "data-fjsf-button": purpose, "data-fjsf-path": path, type: "button" }, content);
+    return { ...button, on: { click: action } };
+};
+/** Form ObjectFieldSection (a ui:order group); collapsible sections start collapsed (2.x useState(collapsible)). */
+export const sectionMarkup = (ctx, name, entry, fields) => {
+    const title = String(entry.title ?? "");
+    const collapsible = !!entry.collapsible;
+    const id = `${name}#section:${entry.fields.join("_")}`;
+    const collapsed = collapsible && (ctx.ui.collapsed?.[id] ?? true);
+    const legend = fc(["ObjectFieldSectionTitle"], collapsible ? { "data-fjsf-button": "collapse" } : {}, title, fc(["IconWrapper"], {}, collapsible ? (collapsed ? "▸" : "▾") : null));
+    const markup = fc(["ObjectFieldSectionWrapper"], { "data-fjsf-section": title }, collapsible ? { ...legend, on: { click: { type: "collapse", id, collapsed: !collapsed } } } : legend, fc(["ObjectFieldSectionChildrenWrapper"], collapsed ? { style: "display:none", "data-fjsf-hidden": "true" } : {}, ...fields));
+    return fcComposite("ObjectFieldSection", { title, collapsible: entry.collapsible }, fields, markup);
+};

package/dist/esm/v3/raw/model/form/searchable.js

@@ -0,0 +1,76 @@
+import { getEnums } from "../../core/enums";
+import { isPlainObject } from "../../core/json";
+import { getIn } from "../../core/paths";
+import { filterUiProps } from "../../core/uiProps";
+import { extractUiSchema } from "../../core/uiSchema";
+import { reactAttr, reactText } from "../view/values";
+import { formChrome } from "./chrome";
+import { inputAttrs } from "./leaf";
+import { fc, fieldTemplateMarkup, plain } from "./markup";
+import { templated } from "./templated";
+const optionsOf = (ctx, p) => (getEnums({ schema: p.schema }, ctx.sink, p.name)?.values ?? []).map((o) => ({ const: o?.const, title: reactText(o?.title) }));
+const field = (ctx, p, content) => templated(ctx, "FieldTemplate", p, fieldTemplateMarkup(formChrome(ctx, p), content), content);
+const mouseDown = { mousedown: { type: "preventDefault" } };
+const noEnter = { type: "preventEnter" };
+export const searchableSelectField = (ctx, p) => {
+    const props = { ...p, data: p.schema?.type === "string" ? { "data-fjsf-string": p.name } : { "data-fjsf-number": p.name }, kind: "searchable" };
+    const ui = extractUiSchema(p.ui);
+    const dropdown = { show: false, height: "", width: "", perPage: 20, ...(isPlainObject(ui.dropdown) ? ui.dropdown : {}) };
+    const perPage = Number(dropdown.perPage) || 20;
+    const options = optionsOf(ctx, p);
+    const value = getIn(ctx.values, p.name);
+    const readOnly = !!p.schema?.readOnly;
+    const term = ctx.ui.text?.[p.name] ?? options.find((o) => o.const === value)?.title ?? "";
+    const open = ctx.ui.open?.[p.name] ?? !!dropdown.show;
+    const active = ctx.ui.active?.[p.name] ?? -1;
+    const filtered = options.filter((o) => o.title.toLowerCase().includes(term.toLowerCase()));
+    const displayed = filtered.slice(0, ctx.ui.shown?.[p.name] ?? perPage);
+    const hover = filterUiProps({ style: { backgroundColor: ui.hoverColors?.backgroundColor, color: ui.hoverColors?.color } }).attrs.style;
+    const select = (o) => ({ type: "searchSelect", path: p.name, value: o.const, title: o.title });
+    const items = displayed.map((o, i) => ({
+        ...fc(["SearchableSelectFieldListOption"], { role: "filtered-list", class: i === active ? "selected-item-active" : "", ...(i === active && hover ? { style: hover } : {}) }, o.title),
+        // Q-SEL-1 / F1: the host scrolls the keyboard-active option into view (guarded) when it changes.
+        on: { click: select(o), ...mouseDown, ...(i === active ? { active: { type: "searchActive", path: p.name, index: i } } : {}) },
+    }));
+    const list = open && !readOnly
+        ? fc(["SearchableSelectFieldDropdownContainer"], { role: "dropdown-list", style: filterUiProps({ style: { maxHeight: dropdown.height || undefined, width: dropdown.width || undefined } }).attrs.style }, items.length ? items : { ...fc(["SearchableSelectFieldNotFound"], {}, reactText(ui.notFoundMessage) || "No match found"), on: mouseDown }, displayed.length < filtered.length && displayed.length >= perPage ? { ...fc(["SearchableSelectFieldListExpand"], {}, reactText(ui.expandText) || "More..."), on: { click: { type: "searchMore", path: p.name, perPage }, ...mouseDown } } : null)
+        : null;
+    const input = {
+        ...fc(["SearchableSelectFieldInputElement"], { ...inputAttrs(ctx, props), name: p.name, type: "text", placeholder: reactAttr(ui.placeholder), value: term, readonly: readOnly || undefined }),
+        on: readOnly ? { keydown: noEnter } : { change: { type: "searchInput", path: p.name, perPage }, focus: { type: "searchOpen", path: p.name }, keydown: noEnter },
+    };
+    const clear = term && !ui.hideClearButton
+        ? { ...fc(["SearchableSelectFieldClearButton"], { type: "button", disabled: readOnly || undefined }, reactText(ui.clearButtonText) || "✕"), on: readOnly ? {} : { click: { type: "searchClear", path: p.name } } }
+        : null;
+    const keys = { type: "searchKey", path: p.name, items: displayed.map(select), open };
+    const container = { ...fc(["SearchableSelectFieldContainer"], {}, fc(["SearchableSelectFieldInputContainer"], {}, input, clear), list), on: { focusout: { type: "searchLeave", path: p.name }, documentKeydown: keys } };
+    return field(ctx, props, [container]);
+};
+export const searchableMultiTagField = (ctx, p) => {
+    const props = { ...p, data: { "data-fjsf-array": p.name }, kind: "searchable-multi" };
+    const ui = extractUiSchema(p.ui);
+    const inputProps = isPlainObject(ui.props) ? ui.props : {};
+    const className = typeof inputProps.className === "string" ? inputProps.className : undefined;
+    const disabled = !!inputProps.disabled;
+    const readOnly = !!p.schema?.readOnly;
+    const options = optionsOf(ctx, p);
+    const raw = getIn(ctx.values, p.name);
+    const chosen = Array.isArray(raw) ? raw : [];
+    const term = ctx.ui.text?.[p.name] ?? "";
+    const matches = options.some((o) => o.title.toLowerCase().includes(term.toLowerCase()));
+    const list = term && !disabled && !readOnly
+        ? fc(["SearchableMultiTagSelectFieldOptionList"], {}, matches
+            ? options
+                .filter((o) => !chosen.includes(o.const) && o.title.toLowerCase().includes(term.toLowerCase()))
+                .map((o) => ({ ...fc(["SearchableMultiTagSelectFieldOptionListItem"], { value: reactAttr(o.const) }, o.title), on: { click: { type: "tagAdd", path: p.name, value: o.const } } }))
+            : fc(["SearchableMultiTagSelectFieldOptionListWithoutItem"], {}, reactText(ui.emptySearchMessage) || "No match found"))
+        : null;
+    const badges = chosen.map((v) => fc(["SearchableMultiTagSelectFieldBadge"], {}, options.find((o) => o.const === v)?.title ?? "", { ...fc(["SearchableMultiTagSelectFieldBadgeCloseElement"], { type: "button", disabled: disabled || readOnly || undefined }, reactText(inputProps.closeElement) || "✕"), on: { click: { type: "tagRemove", path: p.name, value: v } } }));
+    const error = getIn(ctx.touched, p.name) && typeof getIn(ctx.errors, p.name) === "string" ? plain("div", "", { class: "error" }, String(getIn(ctx.errors, p.name))) : null;
+    const content = fc(["SearchableMultiTagSelectFieldContainer"], className ? { class: className } : {}, fc(["FieldInput"], { id: className, type: "hidden", name: p.name, value: chosen.map((v) => reactAttr(v) ?? "").join(",") }), fc(["SearchableMultiTagSelectFieldSearchContainer"], {}, {
+        ...fc(["SearchableMultiTagSelectFieldInputElement"], { id: `${className}_id`, class: className, type: "text", placeholder: reactAttr(ui.placeholder), value: term, readonly: readOnly || undefined, disabled: disabled || undefined }),
+        // Q-SEL-3: blur touches the field (2.x had no name here, so it wrote touched["undefined_id"]).
+        on: { change: { type: "searchText", path: p.name }, blur: { type: "touch", path: p.name }, keydown: noEnter },
+    }, list), fc(["SearchableMultiTagSelectFieldBadgeContainer"], {}, badges), error);
+    return field(ctx, props, [content]);
+};

package/dist/esm/v3/raw/model/form/templated.js

@@ -0,0 +1,17 @@
+import { h, withHost } from "../vnode";
+/** The 2.x template props: the field props plus the data-* props the field passed. */
+export const templateProps = (p) => ({
+    name: p.name,
+    schema: p.schema,
+    uiSchema: p.ui,
+    ...(p.required !== undefined ? { required: p.required } : {}),
+    ...p.data,
+    ...(p.kind ? { "data-fjsf-kind": p.kind } : {}),
+    ...(p.hidden ? { "data-fjsf-hidden": "true" } : {}),
+});
+export const templated = (_ctx, template, p, markup, children, extra = {}) => {
+    const override = p.ui?.["ui:template"];
+    // A fragment carries the template mark, so the markup's root keeps its own (component) mark: a slot on
+    // FieldWrapper / ObjectFieldTemplateWrapper still applies when the template is the default.
+    return withHost(h("#fragment", {}, markup), { kind: "template", template, ...(typeof override === "string" ? { override } : {}), props: templateProps(p), children, ...extra });
+};