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

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

@@ -0,0 +1,33 @@
+// @nolwenture/formik-jsonschema-form/raw (v3, slice S1): the pure, framework-free core.
+// No react, formik, styled-components, @nolwenture/* or DOM access (boundary gate in
+// src/v3/raw/__tests__/boundary.test.ts). S2 adds the VNode model and the read-only view
+// serialised to a string; S6 adds toDOM, the RAW store, FormController and the <fjsf-form> elements.
+export * from "./core/json";
+export * from "./core/issues";
+export * from "./core/paths";
+export { getSchemaType, guessType, normaliseType, defaultValueForType } from "./core/schemaType";
+export { mergeSchemas } from "./core/merge";
+export { MAX_REF_DEPTH, hasReferences, parseRef, resolveRefs, solveReferences } from "./core/refs";
+export { itemSchema, normalizeArraySchema, valueTypeMismatch } from "./core/arrays";
+export { deepOverlap, resolveOneOfValue, resolveSchema } from "./core/conditionals";
+export { defaultFor, isUnset, localIsoDate } from "./core/defaults";
+export { createInitialValues } from "./core/initialValues";
+export { OPTIONAL_NUMBER_INITIAL, optionalNumberInitialValue } from "./core/policies/optionalNumberInitial";
+export { FILE_UPLOAD_VIEW } from "./core/policies/fileUploadView";
+export * from "./core/uiSchema";
+export * from "./core/enums";
+export { immutablySwapItems, setTitleValues } from "./core/titles";
+export { createValidationSchema } from "./validation";
+export { DEFAULT_PATTERN_INPUT_CAP, isUnsafePattern } from "./validation/patterns";
+export { catalogs, createTranslator, en, fi } from "./i18n";
+export * from "./sanitize";
+export { cx, h } from "./model/vnode";
+export { escapeAttr, escapeText, toString as vnodeToString } from "./serialize/toString";
+export { buildViewNode, renderViewToString } from "./model/view";
+// S6: the RAW DOM (framework-free live forms).
+export { toDOM } from "./serialize/toDOM";
+export { createStore } from "./store/createStore";
+export { FormController } from "./dom/controller";
+export { defineFjsfElements } from "./dom/elements";
+// S7: styling (§4.3): the generated default stylesheet, the theme variables and the class contract.
+export { cssVarsToString, fjsfClassNames, fjsfSelectors, getDefaultStyles, themeToCssVars } from "./styles";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,145 @@
+export const FORM_COMPONENTS = {
+    ArrayFieldAddButton: ["button", "ObjectFieldButton", "ArrayFieldButton", "ArrayFieldAddButton"],
+    ArrayFieldButton: ["button", "ObjectFieldButton", "ArrayFieldButton"],
+    ArrayFieldDownButton: ["button", "ObjectFieldButton", "ArrayFieldButton", "ArrayFieldLineButton", "ArrayFieldDownButton"],
+    ArrayFieldItem: ["li", "ObjectFieldItem", "ArrayFieldItem"],
+    ArrayFieldItemButtons: ["div", "ObjectFieldItemButtons"],
+    ArrayFieldLineButton: ["button", "ObjectFieldButton", "ArrayFieldButton", "ArrayFieldLineButton"],
+    ArrayFieldRemoveButton: ["button", "ObjectFieldButton", "ArrayFieldButton", "ArrayFieldLineButton", "ArrayFieldRemoveButton"],
+    ArrayFieldTemplateDescription: null,
+    ArrayFieldTemplateErrorMessage: null,
+    ArrayFieldTemplateHelp: null,
+    ArrayFieldTemplateIcon: null,
+    ArrayFieldTemplateInfo: null,
+    ArrayFieldTemplateRequiredIndicator: null,
+    ArrayFieldTemplateTitle: null,
+    ArrayFieldTemplateWrapper: null,
+    ArrayFieldTitleInfoWrapper: null,
+    ArrayFieldUpButton: ["button", "ObjectFieldButton", "ArrayFieldButton", "ArrayFieldLineButton", "ArrayFieldUpButton"],
+    BooleanFieldWrapper: ["div", "BooleanFieldWrapper"],
+    Clickable: "fn",
+    ClickableEl: ["button", "ClickableEl"],
+    CollapsibleObjectFieldTemplateChildWrapper: ["div", "CollapsibleObjectFieldTemplateChildWrapper"],
+    CollapsibleObjectFieldTemplateDescription: null,
+    CollapsibleObjectFieldTemplateErrorMessage: null,
+    CollapsibleObjectFieldTemplateHelp: null,
+    CollapsibleObjectFieldTemplateIcon: null,
+    CollapsibleObjectFieldTemplateInfo: null,
+    CollapsibleObjectFieldTemplateRequiredIndicator: null,
+    CollapsibleObjectFieldTemplateTitle: ["legend", "ObjectFieldTemplateTitle", "CollapsibleObjectFieldTemplateTitle"],
+    CollapsibleObjectFieldTemplateToggle: ["button", "CollapsibleObjectFieldTemplateToggle"],
+    CollapsibleObjectFieldTemplateWrapper: null,
+    CollapsibleObjectTitleInfoWrapper: null,
+    Divider: ["div", "Divider"],
+    DividerText: ["p", "DividerText"],
+    DragOverlay: ["div", "DragOverlay"],
+    ErrorMessage: "fn",
+    FieldDescription: ["p", "FieldDescription"],
+    FieldHelp: ["p", "FieldHelp"],
+    FieldInfo: "fn",
+    FieldInfoBoxArrowElement: ["div", "FieldInfoBoxArrowElement"],
+    FieldInfoBoxElement: ["div", "FieldInfoBoxElement"],
+    FieldInfoBoxInnerElement: ["div", "FieldInfoBoxInnerElement"],
+    FieldInfoContainer: ["a", "FieldInfoContainer"],
+    FieldInfoLabel: ["span", "FieldInfoLabel"],
+    FieldInput: ["input", "FieldInput"],
+    FieldTitle: ["label", "FieldTitle"],
+    FieldTitleInfoWrapper: ["div", "FieldTitleInfoWrapper"],
+    FieldWrapper: ["div", "FieldWrapper"],
+    FileInfoText: ["p", "FileInfoText"],
+    FileInfoTextMinimized: ["p", "FileInfoTextMinimized"],
+    FileItemContainer: ["div", "FileItemContainer"],
+    FileSize: ["span", "FileSize"],
+    FileTypeIcon: ["div", "FileTypeIcon"],
+    FileUploadButton: ["button", "FileUploadButton"],
+    FileUploadFieldContainer: ["div", "FileUploadFieldContainer"],
+    FileUploadFieldFileInfoText: ["span", "FileUploadFieldFileInfoText"],
+    FileUploadFieldFileItemContainer: ["div", "FileUploadFieldFileItemContainer"],
+    FileUploadFieldFileUploadButton: ["button", "FileUploadFieldFileUploadButton"],
+    FileUploadFieldHiddenFileInput: ["input", "FileUploadFieldHiddenFileInput"],
+    FileUploadFieldInput: "fn",
+    FileUploadFieldProgressBar: ["div", "FileUploadFieldProgressBar"],
+    FileUploadFieldProgressBarContainer: ["div", "FileUploadFieldProgressBarContainer"],
+    FileUploadFieldProgressText: ["span", "FileUploadFieldProgressText"],
+    FileUploadFieldRemoveButton: ["button", "FileUploadFieldRemoveButton"],
+    FileUploadText: ["a", "FileUploadText"],
+    FilesUploadFieldInput: "fn",
+    Form: ["form", "Form"],
+    FormButton: ["button", "FormButton"],
+    FormButtonWrapper: ["div", "FormButtonWrapper"],
+    HiddenFileInput: ["input", "HiddenFileInput"],
+    Icon: ["div", "Icon"],
+    IconWrapper: ["div", "IconWrapper"],
+    InfoText: ["p", "InfoText"],
+    InlineFieldInfoBoxInnerElement: ["div", "InlineFieldInfoBoxInnerElement"],
+    InlineFieldInfoWrapper: ["div", "InlineFieldInfoWrapper"],
+    MultipleChoiceFieldContainer: ["div", "RadioFieldContainer", "MultipleChoiceFieldContainer"],
+    MultipleChoiceFieldElement: ["label", "RadioFieldElement", "MultipleChoiceFieldElement"],
+    MultipleChoiceFieldInput: "fn",
+    MultipleChoiceFieldInputElement: ["input", "FieldInput", "RadioFieldInputElement", "MultipleChoiceFieldInputElement"],
+    MultipleChoiceFieldLabel: ["span", "RadioFieldLabel", "MultipleChoiceFieldLabel"],
+    ObjectFieldAddButton: ["button", "ObjectFieldButton", "ObjectFieldAddButton"],
+    ObjectFieldButton: ["button", "ObjectFieldButton"],
+    ObjectFieldDownButton: ["button", "ObjectFieldButton", "ObjectFieldDownButton"],
+    ObjectFieldItem: ["li", "ObjectFieldItem"],
+    ObjectFieldItemButtons: ["div", "ObjectFieldItemButtons"],
+    ObjectFieldRemoveButton: ["button", "ObjectFieldButton", "ObjectFieldRemoveButton"],
+    ObjectFieldSection: "fn",
+    ObjectFieldSectionChildrenWrapper: ["div", "ObjectFieldSectionChildrenWrapper"],
+    ObjectFieldSectionTitle: ["legend", "ObjectFieldSectionTitle"],
+    ObjectFieldSectionWrapper: ["fieldset", "ObjectFieldSectionWrapper"],
+    ObjectFieldTemplateDescription: null,
+    ObjectFieldTemplateErrorMessage: null,
+    ObjectFieldTemplateHelp: null,
+    ObjectFieldTemplateInfo: null,
+    ObjectFieldTemplateRequiredIndicator: null,
+    ObjectFieldTemplateTitle: ["legend", "ObjectFieldTemplateTitle"],
+    ObjectFieldTemplateWrapper: ["fieldset", "ObjectFieldTemplateWrapper"],
+    ObjectFieldTitleInfoWrapper: ["div", "ObjectFieldTitleInfoWrapper"],
+    ObjectFieldUpButton: ["button", "ObjectFieldButton", "ObjectFieldUpButton"],
+    ObjectFieldWrapper: ["div", "ObjectFieldWrapper"],
+    ProgressBar: ["div", "ProgressBar"],
+    ProgressBarContainer: ["div", "ProgressBarContainer"],
+    RadioFieldContainer: ["div", "RadioFieldContainer"],
+    RadioFieldElement: ["label", "RadioFieldElement"],
+    RadioFieldInput: "fn",
+    RadioFieldInputElement: ["input", "FieldInput", "RadioFieldInputElement"],
+    RadioFieldLabel: ["span", "RadioFieldLabel"],
+    RadioFieldLabelFalse: ["span", "RadioFieldLabel", "RadioFieldLabelFalse"],
+    RadioFieldLabelTrue: ["span", "RadioFieldLabel", "RadioFieldLabelTrue"],
+    RemoveButton: ["button", "RemoveButton"],
+    RemoveButtonIcon: ["svg", "RemoveButtonIcon"],
+    RequiredIndicator: ["span", "RequiredIndicator"],
+    SearchableMultiTagSelectFieldBadge: ["div", "SearchableMultiTagSelectFieldBadge"],
+    SearchableMultiTagSelectFieldBadgeCloseElement: ["button", "SearchableMultiTagSelectFieldBadgeCloseElement"],
+    SearchableMultiTagSelectFieldBadgeContainer: ["div", "SearchableMultiTagSelectFieldBadgeContainer"],
+    SearchableMultiTagSelectFieldContainer: ["div", "SearchableMultiTagSelectFieldContainer"],
+    SearchableMultiTagSelectFieldInput: "fn",
+    SearchableMultiTagSelectFieldInputElement: ["input", "FieldInput", "SearchableMultiTagSelectFieldInputElement"],
+    SearchableMultiTagSelectFieldOptionList: ["ul", "SearchableMultiTagSelectFieldOptionList"],
+    SearchableMultiTagSelectFieldOptionListItem: ["li", "SearchableMultiTagSelectFieldOptionListItem"],
+    SearchableMultiTagSelectFieldOptionListWithoutItem: ["li", "SearchableMultiTagSelectFieldOptionListWithoutItem"],
+    SearchableMultiTagSelectFieldSearchContainer: ["div", "SearchableMultiTagSelectFieldSearchContainer"],
+    SearchableSelectFieldClearButton: ["button", "SearchableSelectFieldClearButton"],
+    SearchableSelectFieldContainer: ["div", "SearchableMultiTagSelectFieldSearchContainer", "SearchableSelectFieldContainer"],
+    SearchableSelectFieldDropdownContainer: ["ul", "SearchableMultiTagSelectFieldOptionList", "SearchableSelectFieldDropdownContainer"],
+    SearchableSelectFieldInputContainer: ["div", "SearchableSelectFieldInputContainer"],
+    SearchableSelectFieldInputElement: ["input", "FieldInput", "SearchableSelectFieldInputElement"],
+    SearchableSelectFieldListExpand: ["li", "SearchableMultiTagSelectFieldOptionListItem", "SearchableSelectFieldListExpand"],
+    SearchableSelectFieldListOption: ["li", "SearchableMultiTagSelectFieldOptionListItem", "SearchableSelectFieldListOption"],
+    SearchableSelectFieldNotFound: ["li", "SearchableMultiTagSelectFieldOptionListItem", "SearchableSelectFieldNotFound"],
+    SelectFieldInput: ["input", "FieldInput", "SelectFieldInput"],
+    SelectFieldInputWrapper: ["div", "SelectFieldInputWrapper"],
+    TextAreaFieldInput: ["input", "FieldInput", "TextAreaFieldInput"],
+    ToggleFieldInput: "fn",
+    ToggleFieldInputElement: ["input", "FieldInput", "ToggleFieldInputElement"],
+    ToggleFieldLabel: ["label", "ToggleFieldLabel"],
+    ToggleFieldToggle: ["span", "ToggleFieldToggle"],
+    UploadIcon: ["svg", "UploadIcon"],
+    UploadedFileInfoContainer: ["div", "UploadedFileInfoContainer"],
+    UploadedFileItemContainer: ["div", "UploadedFileItemContainer"],
+    UploadedFileName: ["div", "UploadedFileName"],
+    UploadedFileWrapper: ["div", "UploadedFileWrapper"],
+    UploadingFileName: ["div", "UploadingFileName"],
+    getComponents: "fn",
+};

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

@@ -0,0 +1,48 @@
+import { formatForDisplay, preferOrderOf } from "../../core/dates";
+import { isPlainObject } from "../../core/json";
+import { getIn } from "../../core/paths";
+import { extractUiSchema } from "../../core/uiSchema";
+import { h } from "../vnode";
+import { reactAttr, reactText } from "../view/values";
+import { formChrome } from "./chrome";
+import { iconMarkup } from "./icons";
+import { fieldTemplateMarkup, plain } from "./markup";
+import { templated } from "./templated";
+export const dateRules = (ctx, ui) => {
+    const props = isPlainObject(extractUiSchema(ui).props) ? extractUiSchema(ui).props : {};
+    const min = typeof props.min === "string" ? props.min : undefined;
+    const max = typeof props.max === "string" ? props.max : undefined;
+    const raw = props.errorMessages?.outOfRange;
+    const fallback = (min && max && `Date must be between ${min} and ${max}.`) || "Date is out of range.";
+    const outOfRange = typeof raw === "function" ? String(raw({ min, max })) : (typeof raw === "string" ? raw : fallback).replace(/\{min\}/g, min ?? "").replace(/\{max\}/g, max ?? "");
+    const locale = [props.locale, ctx.formLocalization?.fields?.DateField?.locale, ctx.locale].find((l) => typeof l === "string" && l) ?? "en-US";
+    return { locale, min, max, invalid: typeof props.errorMessages?.invalid === "string" ? props.errorMessages.invalid : "Enter a valid date", outOfRange };
+};
+export const dateField = (ctx, p) => {
+    const props = { ...p, data: { "data-fjsf-string": p.name }, kind: "date" };
+    const ui = extractUiSchema(p.ui);
+    const inputProps = isPlainObject(ui.props) ? ui.props : {};
+    const rules = dateRules(ctx, p.ui);
+    const value = getIn(ctx.values, p.name);
+    const readOnly = p.schema?.readOnly === true;
+    const disabled = inputProps.disabled ? true : undefined;
+    const shown = ctx.ui.text?.[p.name] ?? formatForDisplay(value, rules.locale);
+    const error = !!getIn(ctx.errors, p.name) && !!getIn(ctx.touched, p.name);
+    const commit = { type: "dateCommit", path: p.name, rules: { ...rules, order: preferOrderOf(rules.locale) }, locked: readOnly || !!disabled };
+    const display = {
+        ...plain("input", "DisplayInput", {
+            id: `${p.name}-display`, type: "text", placeholder: reactAttr(inputProps.placeholder), autocomplete: "off", inputmode: "numeric",
+            "aria-describedby": inputProps.helpText ? `${p.name}-help` : undefined, "aria-invalid": String(error), value: shown, disabled, readonly: readOnly || undefined,
+        }),
+        on: { change: { type: "dateText", path: p.name }, blur: commit, paste: commit },
+    };
+    const native = readOnly
+        ? null
+        : { ...plain("input", "HiddenNative", { id: `${p.name}-native`, type: "date", min: rules.min, max: rules.max, value: typeof value === "string" ? value : "", tabindex: "-1", "aria-hidden": "true" }), on: { change: { ...commit, native: true } } };
+    const picker = readOnly
+        ? null
+        : { ...plain("button", "PickerButton", { type: "button", "aria-label": "Date picker", title: "Date picker", disabled }, iconMarkup("FaCalendar")), on: { click: { type: "datePicker", id: `${p.name}-native`, locked: !!disabled } } };
+    // 2.x: `CommonFieldWrapper as DateFieldWrapper` (DateField.tsx:10)
+    const content = [plain("div", "CommonFieldWrapper", {}, h("label", { for: `${p.name}-display` }, reactText(inputProps.label)), plain("div", "Row", {}, display, native, picker))];
+    return templated(ctx, "FieldTemplate", props, fieldTemplateMarkup(formChrome(ctx, props), content), content);
+};