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

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

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.objectField = exports.prepareChildSchema = void 0;
+const conditionals_1 = require("../../core/conditionals");
+const issues_1 = require("../../core/issues");
+const json_1 = require("../../core/json");
+const paths_1 = require("../../core/paths");
+const schemaType_1 = require("../../core/schemaType");
+const titles_1 = require("../../core/titles");
+const uiSchema_1 = require("../../core/uiSchema");
+const chrome_1 = require("./chrome");
+const dispatch_1 = require("./dispatch");
+const parts_1 = require("./parts");
+const markup_1 = require("./markup");
+const templated_1 = require("./templated");
+/** 2.x prepareChildSchema: booleans become {}, a readOnly parent makes the child readOnly. */
+const prepareChildSchema = (child, parent) => {
+    if (!child || typeof child === "boolean" || !(0, json_1.isPlainObject)(child))
+        return {};
+    return parent?.readOnly ? { ...child, readOnly: parent.readOnly } : child;
+};
+exports.prepareChildSchema = prepareChildSchema;
+const childUi = (ui, key, extra = {}) => ({ ...extra, ...(ui?.properties ?? {}), ...(ui?.[`> ${key}`] ?? ui?.[key] ?? {}) });
+const join = (name, key) => (name ? `${name}.${key}` : key);
+const objectField = (ctx, p, chain, trail = []) => {
+    const { name, schema, ui } = p;
+    const extracted = (0, uiSchema_1.extractUiSchema)(ui);
+    const raw = name ? (0, paths_1.getIn)(ctx.values, name) : ctx.values;
+    const value = (0, json_1.isPlainObject)(raw) ? raw : {};
+    const [{ properties, additionalProperties, required }, toRemove] = (0, conditionals_1.resolveSchema)(schema, value);
+    if (toRemove.length)
+        ctx.prune.push({ path: name, keys: toRemove });
+    const safe = (key) => {
+        if (!json_1.PROTOTYPE_KEYS.has(key))
+            return true;
+        ctx.sink((0, issues_1.issue)("KEY_REJECTED", join(name, key)));
+        return false;
+    };
+    const props = ((0, json_1.isPlainObject)(properties) ? properties : {});
+    const keys = Object.keys(props).filter(safe);
+    const isRequired = (key) => Array.isArray(required) && required.includes(key);
+    const child = (key, extra = {}) => (0, dispatch_1.formField)(ctx, { name: join(name, key), schema: (0, exports.prepareChildSchema)(props[key], schema), ui: childUi(ui, key), ...extra }, chain, trail);
+    const content = [];
+    for (const entry of (0, uiSchema_1.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((0, parts_1.sectionMarkup)(ctx, name, entry, fields));
+        }
+    }
+    for (const key of (0, uiSchema_1.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 = (0, uiSchema_1.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) => (0, dispatch_1.formField)(ctx, { name: join(name, key), schema: (0, exports.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 ? (0, parts_1.buttonMarkup)(extracted.upButton, "ObjectFieldUpButton", "up", path, "↑", move(index - 1)) : null,
+                ctx.orderable && index < ordered.length - 1 ? (0, parts_1.buttonMarkup)(extracted.downButton, "ObjectFieldDownButton", "down", path, "↓", move(index + 1)) : null,
+                (0, parts_1.buttonMarkup)(extracted.removeButton, "ObjectFieldRemoveButton", "remove", path, "-", { type: "propertyRemove", path: name, key, order: ordered }),
+            ];
+            content.push((0, markup_1.fc)(["ObjectFieldItem"], {}, extraChild(key, false), (0, markup_1.fc)(["ObjectFieldItemButtons"], {}, buttons)));
+        });
+        for (const key of (0, uiSchema_1.getHiddenProperties)(extracted.order, extraKeys))
+            content.push((0, markup_1.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 = ((0, json_1.isPlainObject)(schema?.additionalProperties) ? (0, schemaType_1.defaultValueForType)(schema.additionalProperties.type) : undefined) ?? "";
+        content.push((0, parts_1.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 = (0, chrome_1.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
+        ? (0, markup_1.collapsibleTemplateMarkup)({ ...chrome, title: collapsibleTitle(chrome.title, name, extracted, ctx.values) }, content, collapse(ctx, name, extracted))
+        : (0, markup_1.objectTemplateMarkup)(chrome, content);
+    const template = (0, templated_1.templated)(ctx, collapsible ? "CollapsibleObjectFieldTemplate" : "ObjectFieldTemplate", fp, markup, content);
+    return (0, markup_1.fc)(["ObjectFieldWrapper"], {}, template);
+};
+exports.objectField = objectField;
+/** 2.x setTitleValues(name, getTitle ?? "", ui:options.defaultTitle ?? "", values) for string titles. */
+const collapsibleTitle = (title, name, extracted, values) => typeof title === "string" || title === undefined ? (0, titles_1.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/cjs/v3/raw/model/form/parts.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sectionMarkup = exports.buttonMarkup = void 0;
+const json_1 = require("../../core/json");
+const uiProps_1 = require("../../core/uiProps");
+const values_1 = require("../view/values");
+const markup_1 = require("./markup");
+/** 2.x getObjectFieldButton / the ArrayField buttons: `ui:options.<x>Button.{props,content}`, D5-filtered props. */
+const buttonMarkup = (conf, names, purpose, path, fallback, action) => {
+    const props = (0, json_1.isPlainObject)(conf) && conf.props !== undefined ? (0, uiProps_1.filterUiProps)(conf.props, path).attrs : {};
+    const content = (0, json_1.isPlainObject)(conf) && conf.content !== undefined ? (0, values_1.textOf)(conf.content) : fallback;
+    const button = (0, markup_1.fc)(Array.isArray(names) ? names : [names], { ...props, "data-fjsf-button": purpose, "data-fjsf-path": path, type: "button" }, content);
+    return { ...button, on: { click: action } };
+};
+exports.buttonMarkup = buttonMarkup;
+/** Form ObjectFieldSection (a ui:order group); collapsible sections start collapsed (2.x useState(collapsible)). */
+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 = (0, markup_1.fc)(["ObjectFieldSectionTitle"], collapsible ? { "data-fjsf-button": "collapse" } : {}, title, (0, markup_1.fc)(["IconWrapper"], {}, collapsible ? (collapsed ? "▸" : "▾") : null));
+    const markup = (0, markup_1.fc)(["ObjectFieldSectionWrapper"], { "data-fjsf-section": title }, collapsible ? { ...legend, on: { click: { type: "collapse", id, collapsed: !collapsed } } } : legend, (0, markup_1.fc)(["ObjectFieldSectionChildrenWrapper"], collapsed ? { style: "display:none", "data-fjsf-hidden": "true" } : {}, ...fields));
+    return (0, markup_1.fcComposite)("ObjectFieldSection", { title, collapsible: entry.collapsible }, fields, markup);
+};
+exports.sectionMarkup = sectionMarkup;

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchableMultiTagField = exports.searchableSelectField = void 0;
+const enums_1 = require("../../core/enums");
+const json_1 = require("../../core/json");
+const paths_1 = require("../../core/paths");
+const uiProps_1 = require("../../core/uiProps");
+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 optionsOf = (ctx, p) => ((0, enums_1.getEnums)({ schema: p.schema }, ctx.sink, p.name)?.values ?? []).map((o) => ({ const: o?.const, title: (0, values_1.reactText)(o?.title) }));
+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 mouseDown = { mousedown: { type: "preventDefault" } };
+const noEnter = { type: "preventEnter" };
+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 = (0, uiSchema_1.extractUiSchema)(p.ui);
+    const dropdown = { show: false, height: "", width: "", perPage: 20, ...((0, json_1.isPlainObject)(ui.dropdown) ? ui.dropdown : {}) };
+    const perPage = Number(dropdown.perPage) || 20;
+    const options = optionsOf(ctx, p);
+    const value = (0, paths_1.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 = (0, uiProps_1.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) => ({
+        ...(0, markup_1.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
+        ? (0, markup_1.fc)(["SearchableSelectFieldDropdownContainer"], { role: "dropdown-list", style: (0, uiProps_1.filterUiProps)({ style: { maxHeight: dropdown.height || undefined, width: dropdown.width || undefined } }).attrs.style }, items.length ? items : { ...(0, markup_1.fc)(["SearchableSelectFieldNotFound"], {}, (0, values_1.reactText)(ui.notFoundMessage) || "No match found"), on: mouseDown }, displayed.length < filtered.length && displayed.length >= perPage ? { ...(0, markup_1.fc)(["SearchableSelectFieldListExpand"], {}, (0, values_1.reactText)(ui.expandText) || "More..."), on: { click: { type: "searchMore", path: p.name, perPage }, ...mouseDown } } : null)
+        : null;
+    const input = {
+        ...(0, markup_1.fc)(["SearchableSelectFieldInputElement"], { ...(0, leaf_1.inputAttrs)(ctx, props), name: p.name, type: "text", placeholder: (0, values_1.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
+        ? { ...(0, markup_1.fc)(["SearchableSelectFieldClearButton"], { type: "button", disabled: readOnly || undefined }, (0, values_1.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 = { ...(0, markup_1.fc)(["SearchableSelectFieldContainer"], {}, (0, markup_1.fc)(["SearchableSelectFieldInputContainer"], {}, input, clear), list), on: { focusout: { type: "searchLeave", path: p.name }, documentKeydown: keys } };
+    return field(ctx, props, [container]);
+};
+exports.searchableSelectField = searchableSelectField;
+const searchableMultiTagField = (ctx, p) => {
+    const props = { ...p, data: { "data-fjsf-array": p.name }, kind: "searchable-multi" };
+    const ui = (0, uiSchema_1.extractUiSchema)(p.ui);
+    const inputProps = (0, json_1.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 = (0, paths_1.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
+        ? (0, markup_1.fc)(["SearchableMultiTagSelectFieldOptionList"], {}, matches
+            ? options
+                .filter((o) => !chosen.includes(o.const) && o.title.toLowerCase().includes(term.toLowerCase()))
+                .map((o) => ({ ...(0, markup_1.fc)(["SearchableMultiTagSelectFieldOptionListItem"], { value: (0, values_1.reactAttr)(o.const) }, o.title), on: { click: { type: "tagAdd", path: p.name, value: o.const } } }))
+            : (0, markup_1.fc)(["SearchableMultiTagSelectFieldOptionListWithoutItem"], {}, (0, values_1.reactText)(ui.emptySearchMessage) || "No match found"))
+        : null;
+    const badges = chosen.map((v) => (0, markup_1.fc)(["SearchableMultiTagSelectFieldBadge"], {}, options.find((o) => o.const === v)?.title ?? "", { ...(0, markup_1.fc)(["SearchableMultiTagSelectFieldBadgeCloseElement"], { type: "button", disabled: disabled || readOnly || undefined }, (0, values_1.reactText)(inputProps.closeElement) || "✕"), on: { click: { type: "tagRemove", path: p.name, value: v } } }));
+    const error = (0, paths_1.getIn)(ctx.touched, p.name) && typeof (0, paths_1.getIn)(ctx.errors, p.name) === "string" ? (0, markup_1.plain)("div", "", { class: "error" }, String((0, paths_1.getIn)(ctx.errors, p.name))) : null;
+    const content = (0, markup_1.fc)(["SearchableMultiTagSelectFieldContainer"], className ? { class: className } : {}, (0, markup_1.fc)(["FieldInput"], { id: className, type: "hidden", name: p.name, value: chosen.map((v) => (0, values_1.reactAttr)(v) ?? "").join(",") }), (0, markup_1.fc)(["SearchableMultiTagSelectFieldSearchContainer"], {}, {
+        ...(0, markup_1.fc)(["SearchableMultiTagSelectFieldInputElement"], { id: `${className}_id`, class: className, type: "text", placeholder: (0, values_1.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), (0, markup_1.fc)(["SearchableMultiTagSelectFieldBadgeContainer"], {}, badges), error);
+    return field(ctx, props, [content]);
+};
+exports.searchableMultiTagField = searchableMultiTagField;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.templated = exports.templateProps = void 0;
+const vnode_1 = require("../vnode");
+/** The 2.x template props: the field props plus the data-* props the field passed. */
+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" } : {}),
+});
+exports.templateProps = templateProps;
+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 (0, vnode_1.withHost)((0, vnode_1.h)("#fragment", {}, markup), { kind: "template", template, ...(typeof override === "string" ? { override } : {}), props: (0, exports.templateProps)(p), children, ...extra });
+};
+exports.templated = templated;

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

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filesUploadMarkup = exports.filesLocalization = exports.fileUploadMarkup = exports.filesOf = void 0;
+const json_1 = require("../../core/json");
+const uiProps_1 = require("../../core/uiProps");
+const uiSchema_1 = require("../../core/uiSchema");
+const vnode_1 = require("../vnode");
+const values_1 = require("../view/values");
+const chrome_1 = require("./chrome");
+const icons_1 = require("./icons");
+const markup_1 = require("./markup");
+const templated_1 = require("./templated");
+/** 2.x FilesUploadField: the files of a stored value (uploaded, so progress 100). */
+const filesOf = (value) => Array.isArray(value)
+    ? value.filter(json_1.isPlainObject).map((f) => ({ name: (0, values_1.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 }))
+    : [];
+exports.filesOf = filesOf;
+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 progressStyle = (n) => `--fjsf-progress:${Math.max(0, Math.min(100, Number(n) || 0))}%`;
+const fileUploadMarkup = (ctx, p, s) => {
+    const props = { ...p, data: { "data-fjsf-object": p.name }, kind: "file" };
+    const ui = p.ui ?? {};
+    const inputProps = (0, uiSchema_1.extractUiSchema)(ui).props ?? {};
+    const remove = (0, json_1.isPlainObject)(ui["ui:removeButton"]) ? ui["ui:removeButton"] : undefined;
+    const removeStyle = ["color:red", "font-weight:bold", (0, uiProps_1.filterUiProps)({ style: remove?.props?.style ?? {} }).attrs.style].filter(Boolean).join(";");
+    const name = (0, values_1.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
+        ? (0, markup_1.fc)(["FileUploadFieldFileItemContainer"], {}, (0, vnode_1.h)("span", {}, name), s.progress === 100
+            ? inputProps?.removeButton?.hidden || readOnly
+                ? null
+                : { ...(0, markup_1.fc)(["FileUploadFieldRemoveButton"], { ...(0, uiProps_1.filterUiProps)({ ...(remove?.props ?? {}), style: undefined }).attrs, type: "button", style: removeStyle }, (0, values_1.textOf)(remove?.content) ?? "X"), on: { click: { type: "fileRemove" } } }
+            : (0, markup_1.fc)(["FileUploadFieldProgressBarContainer"], {}, (0, markup_1.fc)(["FileUploadFieldProgressBar"], { style: progressStyle(s.progress) }), (0, markup_1.fc)(["FileUploadFieldProgressText"], {}, `${s.progress}%`)))
+        : null;
+    const content = (0, markup_1.fc)(["FileUploadFieldContainer"], {}, (0, vnode_1.h)("div", {}, { ...(0, markup_1.fc)(["FileUploadFieldFileUploadButton"], { type: "button", disabled: readOnly || undefined }, (0, values_1.reactText)(ui["ui:uploadButtonText"]) || "Choose File"), on: { click: { type: "filePick", id: p.name, locked: readOnly } } }, { ...(0, markup_1.fc)(["FileUploadFieldHiddenFileInput"], { id: p.name, name: p.name, type: "file", disabled: readOnly || undefined }), on: readOnly ? {} : { change: { type: "fileChosen" } } }, !s.value ? (0, markup_1.fc)(["FileUploadFieldFileInfoText"], {}, (0, values_1.reactText)(ui["ui:infoText"]) || "No file chosen") : null), item);
+    return field(ctx, props, [content]);
+};
+exports.fileUploadMarkup = fileUploadMarkup;
+/** 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";
+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,
+    ...((0, json_1.isPlainObject)(ctx.formLocalization?.fields?.FilesUploadField) ? ctx.formLocalization.fields.FilesUploadField : {}),
+    ...((0, json_1.isPlainObject)(ui?.["ui:localization"]) ? ui["ui:localization"] : {}),
+});
+exports.filesLocalization = filesLocalization;
+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 = (0, uiSchema_1.extractUiSchema)(p.ui).props ?? {};
+    const l = (0, exports.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
+        ? (0, markup_1.fc)(["UploadedFileItemContainer"], {}, (0, markup_1.fc)(["UploadedFileInfoContainer"], {}, ip.fileTypeIcon?.hidden ? null : (0, markup_1.fc)(["FileTypeIcon"], {}, (0, icons_1.iconMarkup)(iconFor(f.mimeType ?? ""))), (0, markup_1.fc)(["UploadedFileName"], {}, f.name, ip.fileSize?.hidden ? null : (0, markup_1.fc)(["FileSize"], {}, ` | ${f.size ? (f.size / (1024 * 1024)).toFixed(3) : "?"} MB`))), !ip.removeButton?.hidden && !readOnly && f.id
+            ? { ...(0, markup_1.fc)(["RemoveButton"], { "aria-label": (0, values_1.reactText)(l.deleteFileAriaLabel) || "Delete file", type: "button", ...(0, uiProps_1.filterUiProps)(l.removeButton?.props ?? {}).attrs }, (0, values_1.textOf)(l.removeButton?.content) ?? (0, icons_1.iconMarkup)("FaTrash", "fjsf-RemoveButtonIcon")), on: { click: { type: "filesRemove", progressId: f.progressId } } }
+            : null)
+        : (0, markup_1.fc)(["FileItemContainer"], {}, (0, markup_1.fc)(["UploadingFileName"], {}, f.name), (0, markup_1.fc)(["ProgressBarContainer"], {}, (0, markup_1.fc)(["ProgressBar"], { style: progressStyle(s.progress[f.progressId]) })));
+    const browse = (names, extra = {}) => ({ ...(0, markup_1.fc)(names, { "aria-label": (0, values_1.reactText)(l.uploadButtonText) || "Browse files", ...extra }, (0, values_1.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 = {
+        ...(0, markup_1.fc)(["FileUploadFieldContainer"], {}, s.dragging && !hideUpload ? (0, markup_1.fc)(["DragOverlay"], {}, (0, values_1.reactText)(info)) : null, s.files.map((f) => (0, markup_1.fc)(["UploadedFileWrapper"], {}, file(f))), s.files.length === 0
+            ? [
+                ip.uploadIcon?.hidden ? null : (0, icons_1.iconMarkup)("FaCloudUploadAlt", "fjsf-UploadIcon"),
+                info ? (0, markup_1.fc)(["InfoText"], {}, (0, values_1.reactText)(info)) : null,
+                (0, markup_1.fc)(["Divider"], {}, (0, markup_1.fc)(["DividerText"], {}, (0, values_1.reactText)(l.orText) || "or")),
+                browse(["FileUploadButton"], { type: "button", disabled: readOnly || undefined }),
+                l.fileInfoText ? (0, markup_1.fc)(["FileInfoText"], {}, (0, values_1.reactText)(l.fileInfoText)) : null,
+            ]
+            : [
+                info && !hideUpload ? (0, markup_1.fc)(["InfoText"], {}, `${(0, values_1.reactText)(info)} ${(0, values_1.reactText)(l.orText) || "or"} `, browse(["FileUploadText"])) : null,
+                l.fileInfoText && !hideUpload ? (0, markup_1.fc)(["FileInfoTextMinimized"], {}, (0, values_1.reactText)(l.fileInfoText)) : null,
+            ], hideUpload ? null : { ...(0, markup_1.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]);
+};
+exports.filesUploadMarkup = filesUploadMarkup;

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STYLED_CHAINS = void 0;
+// 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.
+exports.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/cjs/v3/raw/model/view/build.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildViewNode = exports.createViewContext = exports.componentField = exports.schemaField = void 0;
+const enums_1 = require("../../core/enums");
+const issues_1 = require("../../core/issues");
+const json_1 = require("../../core/json");
+const paths_1 = require("../../core/paths");
+const fileUploadView_1 = require("../../core/policies/fileUploadView");
+const refs_1 = require("../../core/refs");
+const trail_1 = require("../../core/trail");
+const conditionals_1 = require("../../core/conditionals");
+const schemaType_1 = require("../../core/schemaType");
+const uiSchema_1 = require("../../core/uiSchema");
+const fields_1 = require("./fields");
+const values_1 = require("./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. */
+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 = (0, json_1.isPlainObject)(given) && typeof given.$ref === "string" ? given.$ref : undefined;
+    if (ref && chain.includes(ref)) {
+        ctx.sink((0, issues_1.issue)("REF_CYCLE", name, ref));
+        return (0, fields_1.nullField)(name, given, givenUi, "error");
+    }
+    const nextChain = ref ? [...chain, ref] : chain;
+    const { schema, uiSchema: ui } = given === undefined
+        ? { schema: undefined, uiSchema: givenUi }
+        : (0, refs_1.resolveRefs)(given, givenUi, { definitions: ctx.definitions, defs: ctx.defs, uiSchemaDefinitions: ctx.uiDefinitions, sink: ctx.sink, path: name });
+    const field = (0, uiSchema_1.extractUiSchema)(ui).field;
+    let component;
+    // A component `ui:field` (2.x: `typeof field === "function"`) is provided by the host.
+    if (typeof field === "function")
+        return (0, fields_1.slotField)(name, schema, ui, "", nextChain);
+    if (typeof field === "string" && ctx.customFields.includes(field))
+        return (0, fields_1.slotField)(name, schema, ui, field, nextChain);
+    if (typeof field === "string" && BUILT_IN.has(field))
+        component = field;
+    else {
+        let type = (0, schemaType_1.getSchemaType)(schema);
+        if (Array.isArray(type))
+            type = type[0];
+        component = COMPONENT_TYPES[type || "any"];
+        if (!component) {
+            ctx.sink((0, issues_1.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 (0, fields_1.slotField)(name, schema, ui, component, nextChain);
+    }
+    return (0, exports.componentField)(component, name, schema, ui, ctx, kindProp, nextChain, trail);
+};
+exports.schemaField = schemaField;
+/** One built-in field by name (2.x `FormViewFields.X`), without the SchemaField dispatch. */
+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 (!(0, trail_1.mayEnter)(schema, trail, ctx.sink, name))
+                return (0, fields_1.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 (0, fields_1.textField)(name, schema, ui, kindProp, ctx);
+        case "DateField": return (0, fields_1.textField)(name, schema, ui, "date", ctx);
+        case "SearchableSelectField": return (0, fields_1.textField)(name, schema, ui, "searchable", ctx);
+        case "TextAreaField": return (0, fields_1.textAreaField)(name, schema, ui, ctx);
+        case "BooleanField": return (0, fields_1.booleanField)(name, schema, ui, kindProp ?? "boolean", ctx);
+        case "RadioField": return (0, fields_1.booleanField)(name, schema, ui, "radio", ctx);
+        case "ToggleField": return (0, fields_1.booleanField)(name, schema, ui, "toggle", ctx);
+        case "MultipleChoiceField": return (0, fields_1.choicesField)(name, schema, ui, ctx);
+        case "NullField": return (0, fields_1.nullField)(name, schema, ui);
+        case "AnyField": return anyField(name, schema, ui, ctx);
+        case "SchemaField": return (0, exports.schemaField)(name, schema, ui, ctx, kindProp, nextChain, trail);
+        default: return fileUploadField(name, component, ctx); // FileUploadField / FilesUploadField
+    }
+};
+exports.componentField = componentField;
+// 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((0, issues_1.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] = (0, conditionals_1.resolveSchema)(schema, (0, paths_1.getIn)(ctx.values, name));
+    const properties = ((0, json_1.isPlainObject)(resolved.properties) ? resolved.properties : {});
+    const node = (key) => {
+        if (json_1.PROTOTYPE_KEYS.has(key)) {
+            ctx.sink((0, issues_1.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 (0, exports.schemaField)(child(name, key), ((0, json_1.isPlainObject)(s) ? s : {}), ui?.[key], ctx, undefined, chain, trail);
+    };
+    const props = (key) => ({ key, name: child(name, key), schema: (0, json_1.isPlainObject)(properties[key]) ? properties[key] : {}, uiSchema: ui?.[key] });
+    const children = [];
+    const childFields = [];
+    for (const entry of (0, uiSchema_1.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 = (0, fields_1.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 = (0, paths_1.getIn)(ctx.values, name);
+    const kind = kindProp ?? (schema?.anyOf === undefined ? "array" : (0, enums_1.getEnums)({ schema }, ctx.sink, name)?.type === enums_1.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" ? {} : (0, json_1.isPlainObject)(additional) ? additional : (0, json_1.isPlainObject)(schema?.items) ? schema.items : undefined;
+    const enums = (0, enums_1.getEnums)({ schema: additional ? ((0, json_1.isPlainObject)(additional) ? additional : {}) : schema }, ctx.sink, name);
+    const label = (item) => (enums !== undefined ? (0, values_1.reactText)(enums.values.find((e) => e?.const === item)?.title ?? "") : (0, values_1.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 && !(0, json_1.isPlainObject)(value) ? [value] : [];
+    const items = values.map((item, index) => item !== null && typeof item === "object"
+        ? { node: (0, exports.schemaField)(`${name}[${index}]`, objectItemSchema, ui?.[index] || ui?.items, ctx) }
+        : { keyword: (0, values_1.reactAttr)(item), text: label(item) });
+    return { render: "array", ...(0, fields_1.chrome)(name, kind, schema, ui, ctx.sink), items, values };
+};
+const anyField = (name, schema, ui, ctx) => {
+    const value = (0, paths_1.getIn)(ctx.values, name);
+    const type = value !== undefined ? (0, schemaType_1.guessType)(value) : "string";
+    const extra = type === "object" ? { additionalProperties: {} } : type === "array" ? { additionalItems: {} } : {};
+    const enriched = { ...(schema || {}), type, ...extra };
+    return { render: "any", path: name, attrs: (0, fields_1.fieldAttrs)(name, "any", schema), type, child: (0, exports.schemaField)(name, enriched, ui, ctx) };
+};
+/** The build context for a form whose root schema/uiSchema carry the definitions. */
+const createViewContext = (schema, uiSchema, values, options = {}) => ({
+    values,
+    customFields: options.customFields ?? [],
+    formLocalization: options.formLocalization,
+    sink: options.sink ?? issues_1.ignoreIssues,
+    fileUploadView: options.fileUploadView ?? fileUploadView_1.FILE_UPLOAD_VIEW,
+    definitions: (((0, json_1.isPlainObject)(schema) && (0, json_1.isPlainObject)(schema.definitions) ? schema.definitions : undefined) ?? {}),
+    defs: ((0, json_1.isPlainObject)(schema) && (0, json_1.isPlainObject)(schema.$defs) ? schema.$defs : undefined),
+    uiDefinitions: uiSchema?.definitions,
+});
+exports.createViewContext = createViewContext;
+/** Root entry: the whole read-only view-model of a form. */
+const buildViewNode = (schema, uiSchema, values, options = {}) => (0, exports.schemaField)("", schema, uiSchema ?? {}, (0, exports.createViewContext)(schema, uiSchema, values, options));
+exports.buildViewNode = buildViewNode;