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

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

@@ -0,0 +1,81 @@
+import { isPlainObject } from "../../core/json";
+import { filterUiProps } from "../../core/uiProps";
+import { extractUiSchema } from "../../core/uiSchema";
+import { h } from "../vnode";
+import { reactText, textOf } from "../view/values";
+import { formChrome } from "./chrome";
+import { iconMarkup } from "./icons";
+import { fc, fieldTemplateMarkup } from "./markup";
+import { templated } from "./templated";
+/** 2.x FilesUploadField: the files of a stored value (uploaded, so progress 100). */
+export const filesOf = (value) => Array.isArray(value)
+    ? value.filter(isPlainObject).map((f) => ({ name: reactText(f.name), id: f.id ?? null, progressId: String(f.id), mimeType: typeof f.mimeType === "string" ? f.mimeType : undefined, size: typeof f.size === "number" ? f.size : undefined }))
+    : [];
+const field = (ctx, p, content) => templated(ctx, "FieldTemplate", p, fieldTemplateMarkup(formChrome(ctx, p), content), content);
+const progressStyle = (n) => `--fjsf-progress:${Math.max(0, Math.min(100, Number(n) || 0))}%`;
+export const fileUploadMarkup = (ctx, p, s) => {
+    const props = { ...p, data: { "data-fjsf-object": p.name }, kind: "file" };
+    const ui = p.ui ?? {};
+    const inputProps = extractUiSchema(ui).props ?? {};
+    const remove = isPlainObject(ui["ui:removeButton"]) ? ui["ui:removeButton"] : undefined;
+    const removeStyle = ["color:red", "font-weight:bold", filterUiProps({ style: remove?.props?.style ?? {} }).attrs.style].filter(Boolean).join(";");
+    const name = reactText(s.uploadedFile?.name);
+    // Q-FU-1: a readOnly single upload can neither choose, upload nor remove (2.x ignored readOnly here).
+    const readOnly = p.schema?.readOnly === true;
+    const item = s.uploadedFile && s.value
+        ? fc(["FileUploadFieldFileItemContainer"], {}, h("span", {}, name), s.progress === 100
+            ? inputProps?.removeButton?.hidden || readOnly
+                ? null
+                : { ...fc(["FileUploadFieldRemoveButton"], { ...filterUiProps({ ...(remove?.props ?? {}), style: undefined }).attrs, type: "button", style: removeStyle }, textOf(remove?.content) ?? "X"), on: { click: { type: "fileRemove" } } }
+            : fc(["FileUploadFieldProgressBarContainer"], {}, fc(["FileUploadFieldProgressBar"], { style: progressStyle(s.progress) }), fc(["FileUploadFieldProgressText"], {}, `${s.progress}%`)))
+        : null;
+    const content = fc(["FileUploadFieldContainer"], {}, h("div", {}, { ...fc(["FileUploadFieldFileUploadButton"], { type: "button", disabled: readOnly || undefined }, reactText(ui["ui:uploadButtonText"]) || "Choose File"), on: { click: { type: "filePick", id: p.name, locked: readOnly } } }, { ...fc(["FileUploadFieldHiddenFileInput"], { id: p.name, name: p.name, type: "file", disabled: readOnly || undefined }), on: readOnly ? {} : { change: { type: "fileChosen" } } }, !s.value ? fc(["FileUploadFieldFileInfoText"], {}, reactText(ui["ui:infoText"]) || "No file chosen") : null), item);
+    return field(ctx, props, [content]);
+};
+/** 2.x getFileIcon: the icon of a MIME type. */
+const ICON_BY_TYPE = [
+    ["pdf", "FaFilePdf"], ["audio", "FaFileAudio"], ["image", "FaFileImage"], ["csv", "FaFileCsv"], ["wordprocessingml.document", "FaFileWord"], ["msword", "FaFileWord"],
+    ["vnd.ms-excel", "FaFileExcel"], ["vnd.openxmlformats-officedocument.spreadsheetml.sheet", "FaFileExcel"], ["vnd.ms-powerpoint", "FaFilePowerpoint"],
+    ["vnd.openxmlformats-officedocument.presentationml.presentation", "FaFilePowerpoint"], ["javascript", "FaFileCode"], ["html", "FaFileCode"], ["css", "FaFileCode"],
+];
+const iconFor = (mime) => ICON_BY_TYPE.find(([key]) => mime.includes(key))?.[1] ?? "FaFile";
+export const filesLocalization = (ctx, ui) => ({
+    deleteFileAriaLabel: "Delete this file", infoText: "Drag and drop file(s) here", orText: "or", uploadButtonText: "Upload file",
+    fileInfoText: "Supported formats: PNG, JPG, PDF | Maximum size: 25MB", infoTextSingle: undefined, removeButton: undefined,
+    ...(isPlainObject(ctx.formLocalization?.fields?.FilesUploadField) ? ctx.formLocalization.fields.FilesUploadField : {}),
+    ...(isPlainObject(ui?.["ui:localization"]) ? ui["ui:localization"] : {}),
+});
+export const filesUploadMarkup = (ctx, p, s) => {
+    const readOnly = p.schema?.readOnly === true;
+    if (readOnly && (!Array.isArray(s.value) || s.value.length === 0))
+        return null; // 2.x returned null
+    const props = { ...p, data: { "data-fjsf-object": p.name }, kind: "files" };
+    const ip = extractUiSchema(p.ui).props ?? {};
+    const l = filesLocalization(ctx, p.ui);
+    const multiple = ip.allowMultipleFiles ?? true;
+    const hideUpload = (!multiple && s.files.length > 0) || readOnly;
+    const info = multiple ? l.infoText : l.infoTextSingle;
+    const file = (f) => s.progress[f.progressId] === 100
+        ? fc(["UploadedFileItemContainer"], {}, fc(["UploadedFileInfoContainer"], {}, ip.fileTypeIcon?.hidden ? null : fc(["FileTypeIcon"], {}, iconMarkup(iconFor(f.mimeType ?? ""))), fc(["UploadedFileName"], {}, f.name, ip.fileSize?.hidden ? null : fc(["FileSize"], {}, ` | ${f.size ? (f.size / (1024 * 1024)).toFixed(3) : "?"} MB`))), !ip.removeButton?.hidden && !readOnly && f.id
+            ? { ...fc(["RemoveButton"], { "aria-label": reactText(l.deleteFileAriaLabel) || "Delete file", type: "button", ...filterUiProps(l.removeButton?.props ?? {}).attrs }, textOf(l.removeButton?.content) ?? iconMarkup("FaTrash", "fjsf-RemoveButtonIcon")), on: { click: { type: "filesRemove", progressId: f.progressId } } }
+            : null)
+        : fc(["FileItemContainer"], {}, fc(["UploadingFileName"], {}, f.name), fc(["ProgressBarContainer"], {}, fc(["ProgressBar"], { style: progressStyle(s.progress[f.progressId]) })));
+    const browse = (names, extra = {}) => ({ ...fc(names, { "aria-label": reactText(l.uploadButtonText) || "Browse files", ...extra }, reactText(l.uploadButtonText) || "Browse files"), on: { click: { type: "filePick", id: p.name, locked: readOnly } } });
+    const accept = Array.isArray(ip.acceptedFiletypes) ? ip.acceptedFiletypes.join(",") : typeof ip.acceptedFiletypes === "string" ? ip.acceptedFiletypes : undefined;
+    const content = {
+        ...fc(["FileUploadFieldContainer"], {}, s.dragging && !hideUpload ? fc(["DragOverlay"], {}, reactText(info)) : null, s.files.map((f) => fc(["UploadedFileWrapper"], {}, file(f))), s.files.length === 0
+            ? [
+                ip.uploadIcon?.hidden ? null : iconMarkup("FaCloudUploadAlt", "fjsf-UploadIcon"),
+                info ? fc(["InfoText"], {}, reactText(info)) : null,
+                fc(["Divider"], {}, fc(["DividerText"], {}, reactText(l.orText) || "or")),
+                browse(["FileUploadButton"], { type: "button", disabled: readOnly || undefined }),
+                l.fileInfoText ? fc(["FileInfoText"], {}, reactText(l.fileInfoText)) : null,
+            ]
+            : [
+                info && !hideUpload ? fc(["InfoText"], {}, `${reactText(info)} ${reactText(l.orText) || "or"} `, browse(["FileUploadText"])) : null,
+                l.fileInfoText && !hideUpload ? fc(["FileInfoTextMinimized"], {}, reactText(l.fileInfoText)) : null,
+            ], hideUpload ? null : { ...fc(["HiddenFileInput"], { multiple: multiple || undefined, accept, id: p.name, name: p.name, type: "file", disabled: readOnly || undefined }), on: { change: { type: "filesChosen" } } }),
+        on: { dragenter: { type: "filesDrag", enter: true }, dragleave: { type: "filesDrag", enter: false }, dragover: { type: "filesDrag" }, drop: { type: "filesDrop" } },
+    };
+    return field(ctx, props, [content]);
+};

package/dist/esm/v3/raw/model/styledChains.js

@@ -0,0 +1,40 @@
+// GENERATED by src/v3/__styles__/generate.test.tsx (`npm run styles`) from the 2.x styled-components: do not edit.
+// P7 (§4.3): a 2.x styled component that extends another carries its bases' classes too, bases first.
+export const STYLED_CHAINS = {
+    "fjsf-AnyFieldWrapper": ["fjsf-CommonFieldWrapper", "fjsf-AnyFieldWrapper"],
+    "fjsf-ArrayFieldAddButton": ["fjsf-ObjectFieldButton", "fjsf-ArrayFieldButton", "fjsf-ArrayFieldAddButton"],
+    "fjsf-ArrayFieldButton": ["fjsf-ObjectFieldButton", "fjsf-ArrayFieldButton"],
+    "fjsf-ArrayFieldDownButton": ["fjsf-ObjectFieldButton", "fjsf-ArrayFieldButton", "fjsf-ArrayFieldLineButton", "fjsf-ArrayFieldDownButton"],
+    "fjsf-ArrayFieldItem": ["fjsf-ObjectFieldItem", "fjsf-ArrayFieldItem"],
+    "fjsf-ArrayFieldLineButton": ["fjsf-ObjectFieldButton", "fjsf-ArrayFieldButton", "fjsf-ArrayFieldLineButton"],
+    "fjsf-ArrayFieldRemoveButton": ["fjsf-ObjectFieldButton", "fjsf-ArrayFieldButton", "fjsf-ArrayFieldLineButton", "fjsf-ArrayFieldRemoveButton"],
+    "fjsf-ArrayFieldUpButton": ["fjsf-ObjectFieldButton", "fjsf-ArrayFieldButton", "fjsf-ArrayFieldLineButton", "fjsf-ArrayFieldUpButton"],
+    "fjsf-BooleanFieldWrapper": ["fjsf-CommonCheckboxStyles", "fjsf-BooleanFieldWrapper"],
+    "fjsf-CollapsibleObjectFieldTemplateTitle": ["fjsf-ObjectFieldTemplateTitle", "fjsf-CollapsibleObjectFieldTemplateTitle"],
+    "fjsf-MultipleChoiceFieldContainer": ["fjsf-CommonCheckboxStyles", "fjsf-RadioFieldContainer", "fjsf-MultipleChoiceFieldContainer"],
+    "fjsf-MultipleChoiceFieldElement": ["fjsf-RadioFieldElement", "fjsf-MultipleChoiceFieldElement"],
+    "fjsf-MultipleChoiceFieldInputElement": ["fjsf-FieldInput", "fjsf-RadioFieldInputElement", "fjsf-MultipleChoiceFieldInputElement"],
+    "fjsf-MultipleChoiceFieldLabel": ["fjsf-RadioFieldLabel", "fjsf-MultipleChoiceFieldLabel"],
+    "fjsf-ObjectFieldAddButton": ["fjsf-ObjectFieldButton", "fjsf-ObjectFieldAddButton"],
+    "fjsf-ObjectFieldDownButton": ["fjsf-ObjectFieldButton", "fjsf-ObjectFieldDownButton"],
+    "fjsf-ObjectFieldRemoveButton": ["fjsf-ObjectFieldButton", "fjsf-ObjectFieldRemoveButton"],
+    "fjsf-ObjectFieldUpButton": ["fjsf-ObjectFieldButton", "fjsf-ObjectFieldUpButton"],
+    "fjsf-ObjectFieldWrapper": ["fjsf-CommonFieldWrapper", "fjsf-ObjectFieldWrapper"],
+    "fjsf-RadioFieldContainer": ["fjsf-CommonCheckboxStyles", "fjsf-RadioFieldContainer"],
+    "fjsf-RadioFieldInputElement": ["fjsf-FieldInput", "fjsf-RadioFieldInputElement"],
+    "fjsf-RadioFieldLabelFalse": ["fjsf-RadioFieldLabel", "fjsf-RadioFieldLabelFalse"],
+    "fjsf-RadioFieldLabelTrue": ["fjsf-RadioFieldLabel", "fjsf-RadioFieldLabelTrue"],
+    "fjsf-SearchableMultiTagSelectFieldContainer": ["fjsf-CommonFieldWrapper", "fjsf-SearchableMultiTagSelectFieldContainer"],
+    "fjsf-SearchableMultiTagSelectFieldInputElement": ["fjsf-FieldInput", "fjsf-SearchableMultiTagSelectFieldInputElement"],
+    "fjsf-SearchableSelectFieldContainer": ["fjsf-SearchableMultiTagSelectFieldSearchContainer", "fjsf-SearchableSelectFieldContainer"],
+    "fjsf-SearchableSelectFieldDropdownContainer": ["fjsf-SearchableMultiTagSelectFieldOptionList", "fjsf-SearchableSelectFieldDropdownContainer"],
+    "fjsf-SearchableSelectFieldInputElement": ["fjsf-FieldInput", "fjsf-SearchableSelectFieldInputElement"],
+    "fjsf-SearchableSelectFieldListExpand": ["fjsf-SearchableMultiTagSelectFieldOptionListItem", "fjsf-SearchableSelectFieldListExpand"],
+    "fjsf-SearchableSelectFieldListOption": ["fjsf-SearchableMultiTagSelectFieldOptionListItem", "fjsf-SearchableSelectFieldListOption"],
+    "fjsf-SearchableSelectFieldNotFound": ["fjsf-SearchableMultiTagSelectFieldOptionListItem", "fjsf-SearchableSelectFieldNotFound"],
+    "fjsf-SelectFieldInput": ["fjsf-FieldInput", "fjsf-SelectFieldInput"],
+    "fjsf-SelectFieldInputWrapper": ["fjsf-CommonFieldWrapper", "fjsf-SelectFieldInputWrapper"],
+    "fjsf-StringFieldWrapper": ["fjsf-CommonFieldWrapper", "fjsf-StringFieldWrapper"],
+    "fjsf-TextAreaFieldInput": ["fjsf-FieldInput", "fjsf-TextAreaFieldInput"],
+    "fjsf-ToggleFieldInputElement": ["fjsf-FieldInput", "fjsf-ToggleFieldInputElement"],
+};

package/dist/esm/v3/raw/model/view/build.js

@@ -0,0 +1,158 @@
+import { EnumsTypes, getEnums } from "../../core/enums";
+import { ignoreIssues, issue } from "../../core/issues";
+import { isPlainObject, PROTOTYPE_KEYS } from "../../core/json";
+import { getIn } from "../../core/paths";
+import { FILE_UPLOAD_VIEW } from "../../core/policies/fileUploadView";
+import { resolveRefs } from "../../core/refs";
+import { mayEnter } from "../../core/trail";
+import { resolveSchema } from "../../core/conditionals";
+import { getSchemaType, guessType } from "../../core/schemaType";
+import { extractUiSchema, orderByUiSchema } from "../../core/uiSchema";
+import { booleanField, chrome, choicesField, fieldAttrs, nullField, slotField, textAreaField, textField } from "./fields";
+import { reactAttr, reactText } from "./values";
+const COMPONENT_TYPES = {
+    array: "ArrayField", boolean: "BooleanField", integer: "NumberField", number: "NumberField",
+    object: "ObjectField", string: "StringField", null: "NullField", any: "AnyField",
+};
+const BUILT_IN = new Set([...Object.values(COMPONENT_TYPES), "DateField", "FilesUploadField", "FileUploadField",
+    "MultipleChoiceField", "RadioField", "SearchableSelectField", "SearchableMultiTagSelectField", "TextAreaField", "ToggleField"]);
+/** 2.x FormView SchemaField: resolve refs, pick the field (ui:field, then type), render it. */
+export const schemaField = (name, given, givenUi, ctx, kindProp, chain = [], trail = []) => {
+    // SEC-REF-2 / SEC-REN-1: properties are rendered eagerly, so a $ref already being expanded
+    // above is a cycle (2.x hung). Array items are bounded by the data and start a new chain.
+    const ref = isPlainObject(given) && typeof given.$ref === "string" ? given.$ref : undefined;
+    if (ref && chain.includes(ref)) {
+        ctx.sink(issue("REF_CYCLE", name, ref));
+        return nullField(name, given, givenUi, "error");
+    }
+    const nextChain = ref ? [...chain, ref] : chain;
+    const { schema, uiSchema: ui } = given === undefined
+        ? { schema: undefined, uiSchema: givenUi }
+        : resolveRefs(given, givenUi, { definitions: ctx.definitions, defs: ctx.defs, uiSchemaDefinitions: ctx.uiDefinitions, sink: ctx.sink, path: name });
+    const field = extractUiSchema(ui).field;
+    let component;
+    // A component `ui:field` (2.x: `typeof field === "function"`) is provided by the host.
+    if (typeof field === "function")
+        return slotField(name, schema, ui, "", nextChain);
+    if (typeof field === "string" && ctx.customFields.includes(field))
+        return slotField(name, schema, ui, field, nextChain);
+    if (typeof field === "string" && BUILT_IN.has(field))
+        component = field;
+    else {
+        let type = getSchemaType(schema);
+        if (Array.isArray(type))
+            type = type[0];
+        component = COMPONENT_TYPES[type || "any"];
+        if (!component) {
+            ctx.sink(issue("SCHEMA_UNSUPPORTED_TYPE", name, String(type)));
+            return { render: "unsupported", text: '!!! Unsupported field "" !!!' };
+        }
+        // A built-in the host replaced (`fields: {StringField: Mine}`) renders the host's field.
+        if (ctx.customFields.includes(component))
+            return slotField(name, schema, ui, component, nextChain);
+    }
+    return componentField(component, name, schema, ui, ctx, kindProp, nextChain, trail);
+};
+/** One built-in field by name (2.x `FormViewFields.X`), without the SchemaField dispatch. */
+export const componentField = (component, name, schema, ui, ctx, kindProp, nextChain = [], trail = []) => {
+    switch (component) {
+        case "ObjectField":
+            // BUG-110: an object schema that contains itself, or nests too deep, is cut with a code
+            if (!mayEnter(schema, trail, ctx.sink, name))
+                return nullField(name, schema, ui, "error");
+            return objectField(name, schema, ui, ctx, nextChain, [...trail, schema]);
+        case "ArrayField": return arrayField(name, schema, ui, ctx, kindProp);
+        case "SearchableMultiTagSelectField": return arrayField(name, schema, ui, ctx, "searchable-multi");
+        case "NumberField":
+        case "StringField": return textField(name, schema, ui, kindProp, ctx);
+        case "DateField": return textField(name, schema, ui, "date", ctx);
+        case "SearchableSelectField": return textField(name, schema, ui, "searchable", ctx);
+        case "TextAreaField": return textAreaField(name, schema, ui, ctx);
+        case "BooleanField": return booleanField(name, schema, ui, kindProp ?? "boolean", ctx);
+        case "RadioField": return booleanField(name, schema, ui, "radio", ctx);
+        case "ToggleField": return booleanField(name, schema, ui, "toggle", ctx);
+        case "MultipleChoiceField": return choicesField(name, schema, ui, ctx);
+        case "NullField": return nullField(name, schema, ui);
+        case "AnyField": return anyField(name, schema, ui, ctx);
+        case "SchemaField": return schemaField(name, schema, ui, ctx, kindProp, nextChain, trail);
+        default: return fileUploadField(name, component, ctx); // FileUploadField / FilesUploadField
+    }
+};
+// Q-FV-2: 2.x FormView returned the bare string "TODO" for both file fields.
+const fileUploadField = (name, component, ctx) => {
+    if (ctx.fileUploadView === "todo")
+        return { render: "plain", text: "TODO" };
+    ctx.sink(issue("FIELD_UNKNOWN", name, component));
+    return { render: "none" };
+};
+const child = (name, key) => (name ? `${name}.${key}` : key);
+const objectField = (name, schema, ui, ctx, chain, trail) => {
+    const [resolved] = resolveSchema(schema, getIn(ctx.values, name));
+    const properties = (isPlainObject(resolved.properties) ? resolved.properties : {});
+    const node = (key) => {
+        if (PROTOTYPE_KEYS.has(key)) {
+            ctx.sink(issue("KEY_REJECTED", child(name, key)));
+            return undefined;
+        }
+        if (!(key in properties) || !Object.prototype.hasOwnProperty.call(properties, key))
+            return undefined;
+        const s = properties[key];
+        if (!s)
+            return undefined; // 2.x ObjectField: a falsy property schema (`false`) is not rendered; `true` is an untyped field
+        return schemaField(child(name, key), (isPlainObject(s) ? s : {}), ui?.[key], ctx, undefined, chain, trail);
+    };
+    const props = (key) => ({ key, name: child(name, key), schema: isPlainObject(properties[key]) ? properties[key] : {}, uiSchema: ui?.[key] });
+    const children = [];
+    const childFields = [];
+    for (const entry of orderByUiSchema(ui?.["ui:order"], Object.keys(properties))) {
+        if (typeof entry === "string") {
+            const n = node(entry);
+            if (n) {
+                children.push(n);
+                childFields.push(props(entry));
+            }
+        }
+        else if (entry && Array.isArray(entry.fields)) {
+            const built = entry.fields.map((k) => [k, node(k)]).filter((pair) => !!pair[1]);
+            children.push({ render: "section", title: String(entry.title ?? ""), children: built.map(([, n]) => n) });
+            childFields.push({ section: String(entry.title ?? ""), fields: built.map(([k]) => props(k)) });
+        }
+    }
+    const base = chrome(name, "object", schema, ui, ctx.sink);
+    return { render: "object", ...base, attrs: { ...base.attrs, "data-fjsf-object": name || "ROOT", "data-fjsf-level": String(name ? name.split(".").length : 0) }, children, childFields, chain };
+};
+const arrayField = (name, schema, ui, ctx, kindProp) => {
+    const value = getIn(ctx.values, name);
+    const kind = kindProp ?? (schema?.anyOf === undefined ? "array" : getEnums({ schema }, ctx.sink, name)?.type === EnumsTypes.MULTI_SELECT ? "multi-enum" : "enum");
+    const additional = schema?.additionalItems;
+    // 2.x renders object items with additionalItems; v3 falls back to a single `items` schema (Q-FV-1).
+    const objectItemSchema = typeof additional === "boolean" ? {} : isPlainObject(additional) ? additional : isPlainObject(schema?.items) ? schema.items : undefined;
+    const enums = getEnums({ schema: additional ? (isPlainObject(additional) ? additional : {}) : schema }, ctx.sink, name);
+    const label = (item) => (enums !== undefined ? reactText(enums.values.find((e) => e?.const === item)?.title ?? "") : reactText(item));
+    // BUG-109: a non-array value is shown as one plain item (2.x: `items.map` crashed); falsy shows nothing.
+    const values = Array.isArray(value) ? value : value && !isPlainObject(value) ? [value] : [];
+    const items = values.map((item, index) => item !== null && typeof item === "object"
+        ? { node: schemaField(`${name}[${index}]`, objectItemSchema, ui?.[index] || ui?.items, ctx) }
+        : { keyword: reactAttr(item), text: label(item) });
+    return { render: "array", ...chrome(name, kind, schema, ui, ctx.sink), items, values };
+};
+const anyField = (name, schema, ui, ctx) => {
+    const value = getIn(ctx.values, name);
+    const type = value !== undefined ? guessType(value) : "string";
+    const extra = type === "object" ? { additionalProperties: {} } : type === "array" ? { additionalItems: {} } : {};
+    const enriched = { ...(schema || {}), type, ...extra };
+    return { render: "any", path: name, attrs: fieldAttrs(name, "any", schema), type, child: schemaField(name, enriched, ui, ctx) };
+};
+/** The build context for a form whose root schema/uiSchema carry the definitions. */
+export const createViewContext = (schema, uiSchema, values, options = {}) => ({
+    values,
+    customFields: options.customFields ?? [],
+    formLocalization: options.formLocalization,
+    sink: options.sink ?? ignoreIssues,
+    fileUploadView: options.fileUploadView ?? FILE_UPLOAD_VIEW,
+    definitions: ((isPlainObject(schema) && isPlainObject(schema.definitions) ? schema.definitions : undefined) ?? {}),
+    defs: (isPlainObject(schema) && isPlainObject(schema.$defs) ? schema.$defs : undefined),
+    uiDefinitions: uiSchema?.definitions,
+});
+/** Root entry: the whole read-only view-model of a form. */
+export const buildViewNode = (schema, uiSchema, values, options = {}) => schemaField("", schema, uiSchema ?? {}, createViewContext(schema, uiSchema, values, options));

package/dist/esm/v3/raw/model/view/fields.js

@@ -0,0 +1,90 @@
+import { EnumsTypes, getEnums } from "../../core/enums";
+import { getIn } from "../../core/paths";
+import { getSchemaType } from "../../core/schemaType";
+import { en } from "../../i18n/en";
+import { isPlainObject } from "../../core/json";
+import { filterUiProps } from "../../core/uiProps";
+import { extractUiSchema } from "../../core/uiSchema";
+import { descriptionOf, reactAttr, reactText, titleOf } from "./values";
+/** Instrumentation attributes of a field wrapper (2.x getInstrumentationAttributes; FormView never sets required/hidden). */
+export const fieldAttrs = (name, kind, schema) => ({
+    "data-fjsf-path": name,
+    ...(kind ? { "data-fjsf-kind": kind } : {}),
+    ...(schema?.readOnly ? { "data-fjsf-readonly": "true" } : {}),
+});
+/** 2.x templates spread `ui:props.{wrapper,title,description}`; v3 keeps the D5 allowlist of them. */
+export const elementProps = (ui, path, sink) => {
+    const props = extractUiSchema(ui).props;
+    const pick = (key) => (isPlainObject(props) && props[key] !== undefined ? filterUiProps(props[key], path, sink).attrs : {});
+    return { wrapperAttrs: pick("wrapper"), titleAttrs: pick("title"), descriptionAttrs: pick("description") };
+};
+export const chrome = (name, kind, schema, ui, sink) => {
+    const { wrapperAttrs, titleAttrs, descriptionAttrs } = elementProps(ui, name, sink);
+    return {
+        path: name,
+        // 2.x order: the wrapper props first, the library's instrumentation wins.
+        attrs: { ...wrapperAttrs, ...fieldAttrs(name, kind, schema) },
+        titleAttrs,
+        descriptionAttrs,
+        title: titleOf(ui, schema, name),
+        description: descriptionOf(ui, schema),
+        schema,
+        ui,
+    };
+};
+const enumsOf = (schema, ctx, name) => getEnums({ schema }, ctx.sink, name);
+/** StringField / NumberField / DateField / SearchableSelectField: the value as text (enum consts as titles). */
+export const textField = (name, schema, ui, kind, ctx) => {
+    let value = getIn(ctx.values, name);
+    const enums = enumsOf(schema, ctx, name);
+    if (enums !== undefined)
+        value = enums.values.find((e) => e.const === value)?.title ?? value;
+    const t = getSchemaType(schema);
+    const resolvedKind = kind ?? (enums !== undefined ? "enum" : t === "number" || t === "integer" ? "number" : "string");
+    return { render: "text", ...chrome(name, resolvedKind, schema, ui, ctx.sink), text: reactText(value), keyword: reactAttr(value) };
+};
+export const textAreaField = (name, schema, ui, ctx) => ({
+    render: "textarea",
+    ...chrome(name, "textarea", schema, ui, ctx.sink),
+    text: reactText(getIn(ctx.values, name)),
+});
+/** BooleanField / RadioField / ToggleField: a check mark and a label. */
+export const booleanField = (name, schema, ui, kind, ctx) => {
+    const value = getIn(ctx.values, name);
+    const raw = extractUiSchema(ui).label;
+    const label = raw !== null && typeof raw === "object" ? (value === true ? raw.true : value === false ? raw.false : undefined) : typeof raw === "string" ? raw : undefined;
+    const loc = ctx.formLocalization?.fields?.BooleanField ?? {};
+    const selected = value === true;
+    const fallback = selected ? loc.selectedLabel ?? en["view.boolean.selected"] : loc.notSelectedLabel ?? en["view.boolean.notSelected"];
+    return {
+        render: "boolean",
+        ...chrome(name, kind, schema, ui, ctx.sink),
+        selected,
+        label: reactText(label !== undefined ? label : fallback),
+        value,
+        uiLabel: label,
+        selectedLabel: loc.selectedLabel,
+        notSelectedLabel: loc.notSelectedLabel,
+    };
+};
+/** MultipleChoiceField: every option with a check mark when selected (`onlyShowSelected` filters). */
+export const choicesField = (name, schema, ui, ctx) => {
+    const value = getIn(ctx.values, name);
+    const enums = enumsOf(schema, ctx, name);
+    const all = (enums?.values ?? []).map((e) => ({
+        value: reactAttr(e?.const) ?? "",
+        title: reactText(e?.title),
+        selected: Array.isArray(value) ? value.includes(e?.const) : value === e?.const,
+        const: e?.const,
+    }));
+    const onlySelected = extractUiSchema(ui).onlyShowSelected;
+    const kind = enums?.type === EnumsTypes.MULTI_SELECT ? "multi-enum" : "enum";
+    return { render: "choices", ...chrome(name, kind, schema, ui, ctx.sink), options: onlySelected ? all.filter((o) => o.selected) : all };
+};
+export const nullField = (name, schema, ui, kind = "null") => ({ render: "null", ...chrome(name, kind, schema, ui) });
+export const slotField = (name, schema, ui, field, chain = []) => ({
+    render: "slot",
+    ...chrome(name, "custom", schema, ui),
+    field,
+    chain,
+});

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

@@ -0,0 +1,6 @@
+import { toString } from "../../serialize/toString";
+import { h } from "../vnode";
+import { buildViewNode } from "./build";
+import { toVNode } from "./toVNode";
+export const renderViewToString = (schema, uiSchema, values, options = {}) => toString(h("div", { class: "fjsf-view-FormWrapper" }, h("div", { class: "fjsf-view-Form" }, toVNode(buildViewNode(schema, uiSchema, values, options)))));
+export { buildViewNode };

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

@@ -0,0 +1,48 @@
+import { choiceStyle } from "../../core/choiceStyle";
+import { h, withHost } from "../vnode";
+/** 2.x FormView styled primitives in `registry.components` and their tags. */
+export const VIEW_PRIMITIVES = {
+    ArrayFieldItem: "div", BooleanFieldWrapper: "div", EJSFieldValue: "div", FieldDescription: "div", FieldTitle: "label",
+    FieldWrapper: "div", Form: "div", Icon: "div", MultipleChoiceFieldWrapper: "div", ObjectFieldSectionTitle: "legend",
+    ObjectFieldSectionWrapper: "fieldset", ObjectFieldTemplateTitle: "div", ObjectFieldTemplateWrapper: "div",
+    StringFieldValue: "div", TextAreaValue: "div",
+};
+/** Override-only keys: `undefined` by default, read before their fallback (2.x getComponents). */
+export const VIEW_OVERRIDE_ONLY = ["ArrayFieldTemplateDescription", "ArrayFieldTemplateTitle", "ArrayFieldTemplateWrapper", "ObjectFieldTemplateDescription"];
+export const viewClass = (name) => `fjsf-view-${name}`;
+/** A registry component element; its default is the first name in the chain that has one. */
+export const component = (names, attrs, ...children) => {
+    const name = names.find((n) => n in VIEW_PRIMITIVES);
+    // A `className` from ui:props joins the library class (2.x: styled-components merged it).
+    const cls = typeof attrs.class === "string" && attrs.class ? `${viewClass(name)} ${attrs.class}` : viewClass(name);
+    const { class: _own, ...rest } = attrs;
+    return withHost(h(VIEW_PRIMITIVES[name], { class: cls, ...rest }, ...children), { kind: "component", names });
+};
+/** A composite registry component (2.x function components): an override gets `props` (and `children`). */
+export const composite = (name, props, content, ...markup) => withHost(h("#fragment", {}, ...markup), { kind: "component", names: [name], props, ...(content ? { children: content } : {}) });
+/** FormView FieldTemplate: wrapper, title <label for>, description, content. */
+export const fieldTemplateMarkup = (c, content) => component(["FieldWrapper"], c.attrs, c.title ? component(["FieldTitle"], { ...c.titleAttrs, for: c.path }, c.title) : null, c.description ? component(["FieldDescription"], { ...c.descriptionAttrs }, c.description) : null, ...content);
+export const objectTemplateMarkup = (c, content) => component(["ObjectFieldTemplateWrapper"], c.attrs, c.title ? component(["ObjectFieldTemplateTitle"], { ...c.titleAttrs }, c.title) : null, c.description ? component(["ObjectFieldTemplateDescription", "FieldDescription"], { ...c.descriptionAttrs }, c.description) : null, ...content);
+/** 2.x ArrayFieldTemplate: array names first, then the object/field fallbacks; the title keeps `for`. */
+export const arrayTemplateMarkup = (c, content) => component(["ArrayFieldTemplateWrapper", "ObjectFieldTemplateWrapper"], c.attrs, c.title ? component(["ArrayFieldTemplateTitle", "ObjectFieldTemplateTitle"], { ...c.titleAttrs, for: c.path }, c.title) : null, c.description ? component(["ArrayFieldTemplateDescription", "FieldDescription"], { ...c.descriptionAttrs }, c.description) : null, ...content);
+/** ObjectFieldSection (a `ui:order` group): fieldset + legend. */
+export const sectionMarkup = (title, content) => composite("ObjectFieldSection", { title }, content, component(["ObjectFieldSectionWrapper"], { "data-fjsf-section": title }, component(["ObjectFieldSectionTitle"], {}, title), ...content));
+/** The root: FormWrapper > components.Form. */
+export const formShellMarkup = (className, content) => h("div", { class: "fjsf-view-FormWrapper" }, component(["Form"], className ? { class: className } : {}, ...content));
+// MultipleChoice* are the Form components 2.x FormView reuses (styled(RadioField*) chains).
+const CHOICE = {
+    container: "fjsf-CommonCheckboxStyles fjsf-RadioFieldContainer fjsf-MultipleChoiceFieldContainer",
+    element: "fjsf-RadioFieldElement fjsf-MultipleChoiceFieldElement",
+    label: "fjsf-RadioFieldLabel fjsf-MultipleChoiceFieldLabel",
+};
+/** The check mark FormView draws for a selected value (2.x: react-icons FaCheck, an <svg>). */
+export const checkIconMarkup = (className = viewClass("SelectedIcon")) => h("svg", { class: className, viewBox: "0 0 512 512", "aria-hidden": "true", focusable: "false" }, h("path", { d: "M173.9 439.4L7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.7 432.1 72.6c10-10 26.2-10 36.2 0l36.2 36.2c10 10 10 26.2 0 36.2l-294.4 294.4c-10 10-26.2 10-36.2 0z" }));
+/** `unselected`: the wrapper of the "not selected" state (2.x BooleanFieldValue used `Selected` there too, Field.tsx:167). */
+const mark = (selected, label, unselected = "NotSelected") => selected
+    ? h("div", { class: viewClass("Selected") }, h("div", { class: viewClass("SelectedBox") }, checkIconMarkup()), h("span", { class: CHOICE.label }, label))
+    : h("div", { class: viewClass(unselected) }, h("div", { class: viewClass("NotSelectedBox") }), h("span", { class: CHOICE.label }, label));
+/** BooleanFieldValue's default markup. */
+export const booleanValueMarkup = (selected, label) => h("div", { class: viewClass("BooleanFieldValue") }, mark(selected, label, "Selected"));
+/** MultipleChoiceFieldValue's default markup. */
+/** `style`: the ui:style layout keyword (2.x getStyle on the container). */
+export const choicesValueMarkup = (options, style) => h("div", { class: viewClass("MultipleChoiceFieldWrapper") }, h("div", { class: CHOICE.container, ...choiceStyle(style) }, options.map((o) => h("label", { class: CHOICE.element, "data-fjsf-enum-value-view": o.value }, mark(o.selected, o.title)))));

package/dist/esm/v3/raw/model/view/toVNode.js

@@ -0,0 +1,63 @@
+import { extractUiSchema } from "../../core/uiSchema";
+import { h, withHost } from "../vnode";
+import { arrayTemplateMarkup, booleanValueMarkup, choicesValueMarkup, component, composite, fieldTemplateMarkup, objectTemplateMarkup, sectionMarkup, } from "./markup";
+/** The 2.x template props: the field props plus the data attributes the field passes. */
+const templateProps = (node) => ({
+    ...Object.fromEntries(Object.entries(node.attrs)
+        .filter(([k]) => k === "data-fjsf-kind" || k === "data-fjsf-object" || k === "data-fjsf-level")
+        // 2.x ObjectField passed the level as a number.
+        .map(([k, v]) => [k, k === "data-fjsf-level" ? Number(v) : v])),
+    name: node.path,
+    schema: node.schema,
+    uiSchema: node.ui,
+});
+const templated = (template, node, markup, children, extra = {}) => {
+    const override = node.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(node), children, ...extra });
+};
+const fieldTemplate = (node, ...content) => templated("FieldTemplate", node, fieldTemplateMarkup(node, content), content);
+const childVNode = (c) => (c.render === "section" ? sectionMarkup(c.title, c.children.map(toVNode)) : toVNode(c));
+export const toVNode = (node) => {
+    switch (node.render) {
+        case "object": {
+            const content = node.children.map(childVNode);
+            return templated("ObjectFieldTemplate", node, objectTemplateMarkup(node, content), content, { childFields: node.childFields, chain: node.chain });
+        }
+        case "array": {
+            const items = node.items.map((item) => component(["ArrayFieldItem"], {}, "node" in item ? toVNode(item.node) : h("div", { "data-keyword": item.keyword }, item.text)));
+            return templated("ArrayFieldTemplate", node, arrayTemplateMarkup(node, items), items, { items: node.values, itemNodes: items });
+        }
+        case "text":
+            return fieldTemplate(node, component(["StringFieldValue"], { "data-keyword": node.keyword }, node.text));
+        case "textarea":
+            return fieldTemplate(node, component(["TextAreaValue"], {}, node.text));
+        case "boolean": {
+            const props = { name: node.path, value: node.value, label: node.uiLabel, selectedLabel: node.selectedLabel, notSelectedLabel: node.notSelectedLabel };
+            return fieldTemplate(node, component(["BooleanFieldWrapper"], {}, composite("BooleanFieldValue", props, undefined, booleanValueMarkup(node.selected, node.label))));
+        }
+        case "choices": {
+            const { props: inputProps, style } = extractUiSchema(node.ui);
+            const props = {
+                inputProps, name: node.path, style,
+                values: node.options.map((o) => ({ const: o.const, title: o.title, selected: o.selected })),
+            };
+            return fieldTemplate(node, composite("MultipleChoiceFieldValue", props, undefined, choicesValueMarkup(node.options, style)));
+        }
+        case "null":
+            return fieldTemplate(node);
+        case "slot": {
+            const markup = fieldTemplateMarkup(node, [h("div", { "data-fjsf-slot": node.path, "data-fjsf-field": node.field })]);
+            return withHost(markup, { kind: "field", field: node.field, props: { "data-fjsf-kind": "custom", name: node.path, schema: node.schema, uiSchema: node.ui }, chain: node.chain });
+        }
+        case "any":
+            return h("div", node.attrs, h("select", {}, ["array", "boolean", "integer", "number", "object", "string", "null", "any"].map((t) => h("option", { value: t, selected: t === node.type }, t))), toVNode(node.child));
+        case "unsupported":
+            return h("p", { style: "color:red" }, node.text);
+        case "plain":
+            return node.text;
+        case "none":
+            return null;
+    }
+};

package/dist/esm/v3/raw/model/view/values.js

@@ -0,0 +1,50 @@
+import { isPlainObject } from "../../core/json";
+import { h, withHost } from "../vnode";
+/**
+ * A React element (`$$typeof`) in a uiSchema text: kept for the React layer (2.x UiSchema allows ReactNode).
+ * In RAW DOM (S6) the host's own value is a DOM node, drawn by toDOM.
+ */
+const elementLike = (value) => typeof value === "object" && value !== null && ("$$typeof" in value || (typeof value.nodeType === "number" && typeof value.cloneNode === "function"));
+const hostValue = (value) => withHost(h("#fragment", {}), { kind: "value", value });
+/** Text React renders for a child value. */
+export const reactText = (value) => {
+    if (typeof value === "string")
+        return value;
+    if (typeof value === "number")
+        return Number.isNaN(value) ? "NaN" : String(value);
+    if (Array.isArray(value))
+        return value.map(reactText).join("");
+    return ""; // boolean, null, undefined: nothing; plain object: 2.x crashed
+};
+/** Attribute value React writes for a data-* attribute, or undefined (omitted). */
+export const reactAttr = (value) => {
+    if (value === undefined || value === null)
+        return undefined;
+    if (isPlainObject(value))
+        return undefined; // 2.x crashed on this value
+    if (Array.isArray(value))
+        return value.map((v) => (v === null || v === undefined ? "" : String(v))).join(",");
+    return String(value);
+};
+/** 2.x getTitle (getTitleAndDescription.ts) for a field: ui:title > title > last path segment. */
+/** A uiSchema text (help, info content): a string, a React element kept for the host, or undefined. */
+export const textOf = (value) => {
+    if (elementLike(value))
+        return hostValue(value);
+    return value ? reactText(value) || undefined : undefined;
+};
+export const titleOf = (uiSchema, schema, name) => {
+    if (uiSchema?.["ui:options"]?.hideTitle)
+        return undefined;
+    const segments = name.split(".");
+    const title = uiSchema?.["ui:title"] || schema?.title || segments[segments.length - 1];
+    if (elementLike(title))
+        return hostValue(title);
+    return typeof title === "string" && title ? title : title ? reactText(title) || undefined : undefined;
+};
+export const descriptionOf = (uiSchema, schema) => {
+    const d = uiSchema?.["ui:options"]?.description || uiSchema?.["ui:description"] || schema?.description;
+    if (elementLike(d))
+        return hostValue(d);
+    return d ? reactText(d) || undefined : undefined;
+};

package/dist/esm/v3/raw/model/vnode.js

@@ -0,0 +1,13 @@
+export const h = (tag, attrs = {}, ...children) => ({
+    tag,
+    attrs,
+    children: children.flat(),
+});
+/** The same node, marked with the extension point that produced it (ignored by toString). */
+export const withHost = (node, host) => ({ ...node, host });
+/** The same node with event descriptors (merged over existing ones). */
+export const withOn = (node, on) => ({ ...node, on: { ...node.on, ...on } });
+/** Where a React template puts its children; serialises to nothing. */
+export const hole = (name) => ({ tag: "#hole", attrs: {}, children: [], host: { kind: "hole", ...(name ? { name } : {}) } });
+/** Joins class names, skipping empty parts. */
+export const cx = (...names) => names.filter(Boolean).join(" ") || undefined;

package/dist/esm/v3/raw/sanitize/index.js

@@ -0,0 +1,2 @@
+// The TASK-055 sanitiser (framework-free, dompurify only), at home in the RAW layer since the 3.0.0 cut-over.
+export { SANITIZER_UNAVAILABLE, SanitizerUnavailableError, STRICT_CONFIG, sanitizeHtml, setSanitizerWindow, } from "./sanitizeHtml";