@keboola/design 11.9.0 → 12.0.0

package/dist/rjsf.js

@@ -1,22 +1,22 @@
-import { Tooltip, debounce } from "./utils-BW4AE8VP.js";
-import { BookOpen, Info, Trash2 } from "./icons-Cek151jC.js";
-import { Button } from "./Button-DsRrU5F1.js";
+import { Tooltip, debounce } from "./utils-Bd28bWgm.js";
+import { BookOpen, Info, Trash2 } from "./icons-wcA70iQx.js";
+import { Button } from "./Button-Ca4Q3VJU.js";
 import { Label } from "./internal/components/Label.js";
 import { Link } from "./internal/components/Link.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { TextInput } from "./TextInput-CFTf4Cz1.js";
-import { RadioGroup } from "./RadioGroup-Byc2mym4.js";
-import { Checkbox } from "./Checkbox-Dq5fPNrO.js";
-import { Combobox } from "./Combobox-D8PrEqTG.js";
-import { FormGroup } from "./FormGroup-DR_gZ25-.js";
+import { TextInput } from "./TextInput-CDG2XpBl.js";
+import { RadioGroup } from "./RadioGroup-CBPRLRN0.js";
+import { Checkbox } from "./Checkbox-8yIIgY7g.js";
+import { Combobox } from "./Combobox-CxRAYOBt.js";
+import { FormGroup } from "./FormGroup-CmNiAtU6.js";
 import { NumberInput } from "./internal/blocks/NumberInput.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
-import { DateInput } from "./DateInput-B6N8g0ra.js";
+import { DateInput } from "./DateInput-DyEErfJf.js";
 import { PasswordInput } from "./internal/blocks/PasswordInput.js";
-import { Alert } from "./Alert-BsIM_oFK.js";
+import { Alert } from "./Alert-UI-CIs-1.js";
 import { CollapsiblePanel } from "./internal/components/CollapsiblePanel.js";
-import { Tabs, TabsContent } from "./Tabs-eB974xJf.js";
-import { CodeEditor, isLanguageMode } from "./CodeEditor-BJKJXA0c.js";
+import { Tabs, TabsContent } from "./Tabs-Dt9oLYHC.js";
+import { CodeEditor, isLanguageMode } from "./CodeEditor-BSo-oLFG.js";
 import { createContext, isValidElement, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import DOMPurify from "dompurify";
@@ -692,9 +692,6 @@ const useRootFormData = () => use(RootFormDataContext).data;
 const useRootContext = () => use(RootFormDataContext).context;
 //#endregion
 //#region src/blocks/RjsfSchemaEditor/templates/FieldTemplate.tsx
-/**
-* Resolves a dot-path against an object.
-*/
 const resolveByPath$1 = (parts, data) => {
 	let current = data;
 	for (const part of parts) {
@@ -706,8 +703,8 @@ const resolveByPath$1 = (parts, data) => {
 /**
 * Resolves a dependency path against form data.
 *
-* - Paths starting with "root." are resolved from the root form data
-* - Other paths are resolved as siblings (relative to the parent object)
+* 1. `root.`-prefixed → from the root.
+* 2. Otherwise a sibling in the parent object, falling back to the root.
 */
 const resolveDependencyValue = (path, formData, parentPath) => {
 	if (path.startsWith("root.")) return resolveByPath$1(path.replace(/^root\./, "").split("."), formData);
@@ -719,14 +716,10 @@ const resolveDependencyValue = (path, formData, parentPath) => {
 	return resolveByPath$1(path.split("."), formData);
 };
 /**
-* Evaluates json-editor `options.dependencies` against current form data.
-* Returns true if the field should be visible.
-*
-* Rules (matching old json-editor behavior):
-* - `{ "field": "value" }` — show when field equals value
-* - `{ "field": ["a", "b"] }` — show when field is one of the values
-* - `{ "field": "" }` — show when field is empty/falsy
-* - Multiple entries are AND-ed: all conditions must match
+* Whether json-editor `options.dependencies` show the field; every entry must match.
+* - `"value"` — the field equals it
+* - `["a", "b"]` — the field is one of them
+* - `""` — the field is empty
 */
 const evaluateDependencies = (dependencies, formData, parentPath) => {
 	for (const [path, expected] of Object.entries(dependencies)) {
@@ -753,10 +746,8 @@ const DocumentationLinkIcon = ({ documentation }) => /* @__PURE__ */ jsx(Tooltip
 	})
 });
 /**
-* Renders the field's FormGroup wrapper, label, help, and errors.
-* Does NOT subscribe to RootFormDataContext — that subscription only happens
-* inside FieldTemplateWithDependencies, so fields without dependencies don't
-* re-render on every form-state change.
+* FormGroup wrapper with label, help and errors.
+* - Does not subscribe to RootFormDataContext, so it skips form-state re-renders.
 */
 const FieldTemplateBody = ({ id, label, rawHelp, rawDescription, rawErrors, children, schema, uiSchema, displayLabel }) => {
 	const widget = uiSchema?.["ui:widget"];
@@ -793,11 +784,8 @@ const FieldTemplateBody = ({ id, label, rawHelp, rawDescription, rawErrors, chil
 	});
 };
 /**
-* Wraps FieldTemplateBody with a root-form-data subscription used to evaluate
-* conditional visibility (options.dependencies). Subscribing here — instead of
-* unconditionally in FieldTemplate — keeps fields without dependencies out of
-* the RootFormDataContext consumer set, so they don't re-render on every
-* keystroke. Critical for forms with many fields (e.g. column_mapping tables).
+* FieldTemplateBody gated by `options.dependencies`.
+* - Only these fields subscribe to root form data, so the rest skip per-keystroke re-renders.
 */
 const FieldTemplateWithDependencies = ({ dependencies, keepMounted, ...props }) => {
 	const rootFormData = useRootFormData();
@@ -921,7 +909,7 @@ const DateWidget = ({ id, value, onChange, onBlur, onFocus, disabled, readonly,
 * Widget for fields using json-editor's enumSource/watch pattern.
 * Reads options dynamically from the root form data based on watched paths.
 */
-const DynamicSelectWidget = ({ id, value, onChange, disabled, readonly, options: widgetOptions, required }) => {
+const DynamicSelectWidget = ({ id, value, onChange, onBlur, disabled, readonly, options: widgetOptions, required, rawErrors }) => {
 	const data = useRootFormData();
 	const watch = widgetOptions.watch;
 	const enumSource = widgetOptions.enumSource;
@@ -941,6 +929,9 @@ const DynamicSelectWidget = ({ id, value, onChange, disabled, readonly, options:
 		value: selectedItem,
 		allowClear: !required,
 		disabled: disabled || readonly,
+		onBlur: () => onBlur(id, value),
+		"aria-invalid": rawErrors?.length ? true : void 0,
+		state: rawErrors?.length ? "error" : "default",
 		onValueChange: (selected) => onChange(selected?.value ?? "")
 	});
 };
@@ -996,7 +987,7 @@ const RadioWidget = ({ id, value, onChange, disabled, readonly, options }) => {
 };
 //#endregion
 //#region src/blocks/RjsfSchemaEditor/widgets/SelectWidget.tsx
-const SelectWidget = ({ id, value, schema, onChange, disabled, readonly, options, placeholder, required }) => {
+const SelectWidget = ({ id, value, schema, onChange, onBlur, disabled, readonly, options, placeholder, required, rawErrors }) => {
 	const enumOptions = options.enumOptions ?? [];
 	const isBoolean = schema.type === "boolean";
 	const items = enumOptions.map((o) => ({
@@ -1011,6 +1002,9 @@ const SelectWidget = ({ id, value, schema, onChange, disabled, readonly, options
 		value: selectedItem ?? null,
 		allowClear: !required,
 		disabled: disabled || readonly,
+		onBlur: () => onBlur(id, value),
+		"aria-invalid": rawErrors?.length ? true : void 0,
+		state: rawErrors?.length ? "error" : "default",
 		placeholder,
 		onValueChange: (selected) => {
 			const selectedValue = selected?.value ?? "";
@@ -1024,21 +1018,12 @@ const SelectWidget = ({ id, value, schema, onChange, disabled, readonly, options
 };
 //#endregion
 //#region src/blocks/RjsfSchemaEditor/widgets/TemplateWatchWidget.tsx
-/**
-* Renders a watched value as text.
-*
-* - Objects and arrays are serialized as JSON; anything else goes through `String`.
-* - `null` and `undefined` render as an empty string.
-*/
 const stringify = (value) => {
 	if (value == null) return "";
 	if (typeof value === "object") return JSON.stringify(value);
 	return String(value);
 };
-/**
-* Resolves a json-editor `template` string by substituting watched variables.
-* e.g. template="{{val}}" with watch={ val: "some.path" } → resolves "some.path" from form data.
-*/
+/** Replaces each `{{var}}` in a json-editor template with the form value at `watch[var]`. */
 const resolveTemplate = (template, watch, rootFormData) => {
 	return template.replace(/\{\{(\w+)\}\}/g, (_, varName) => {
 		const watchPath = watch[varName];
@@ -1049,22 +1034,16 @@ const resolveTemplate = (template, watch, rootFormData) => {
 /**
 * Whether `rootContext` declares the value a path reads.
 *
-* - A context entry shares its top-level key with the form data — a sync action writes its own
-*   keys under the same key — so the entry key alone does not settle it.
-* - Both the entry and the segment under it must be own properties — plain-object lookups also
-*   answer for `toString` and the rest of the prototype chain.
-* - A path naming an entry and nothing under it reads the whole namespace, context included.
+* - The entry key alone does not settle it: sync actions write form keys under the same key.
+* - Entry and segment must be own properties, not prototype members like `toString`.
+* - A path naming only an entry reads the whole namespace.
 */
 const declaresPath = (segments, rootContext) => {
 	const [entryKey = "", key] = segments;
 	const entry = rootContext[entryKey];
 	return isRecord(entry) && (key === void 0 || Object.hasOwn(entry, key));
 };
-/**
-* Whether every watched path reads a value `rootContext` declares.
-*
-* - No watched paths means nothing is derived, which is not a context view.
-*/
+/** Whether every watched path reads a value `rootContext` declares; false with none. */
 const readsOnlyContext = (watch, rootContext) => {
 	const paths = Object.values(watch);
 	return paths.length > 0 && paths.every((path) => {
@@ -1073,16 +1052,11 @@ const readsOnlyContext = (watch, rootContext) => {
 	});
 };
 /**
-* Widget for json-editor's `template`/`watch` pattern (without `enumSource`).
-* Computes a value from watched paths and shows it.
+* json-editor `template`/`watch` (no `enumSource`): writes the computed value into form data.
 *
-* - With `options.hidden` it renders nothing — a helper for cross-object dependencies.
-* - Without it, the value is shown in a read-only input; `FieldTemplate` supplies the label.
-* - It writes the computed value into the form data, so a component reads it back from the
-*   saved configuration.
-* - It stops writing when every watched path reads `rootContext` — the configuration does not
-*   own that context.
-* - `options.hidden` fields always write; they exist to feed cross-object dependencies.
+* - `options.hidden`: renders nothing and always writes — feeds cross-object dependencies.
+* - Otherwise a read-only input that stops writing when every watched path reads
+*   `rootContext`, which the configuration does not own.
 */
 const TemplateWatchWidget = ({ id, value, onChange, disabled, readonly, rawErrors, options: widgetOptions }) => {
 	const data = useRootFormData();
@@ -1193,10 +1167,7 @@ const defaultTemplates = {
 };
 //#endregion
 //#region src/blocks/RjsfSchemaEditor/schemaUtils.ts
-/**
-* Resolves a $ref reference against the schema definitions, merging any
-* sibling overrides (title, options, etc.) on top of the resolved schema.
-*/
+/** Resolves `$ref` against definitions; sibling keys (title, options) override the result. */
 const resolveRef = (propSchema, definitions) => {
 	if (!propSchema.$ref || !definitions) return propSchema;
 	const resolved = definitions[String(propSchema.$ref).replace("#/definitions/", "")];
@@ -1207,10 +1178,7 @@ const resolveRef = (propSchema, definitions) => {
 		...overrides
 	};
 };
-/**
-* Walks a JSON Schema and generates a RJSF uiSchema based on custom `format` and `options` properties.
-* This maps the legacy @json-editor/json-editor conventions to RJSF widget references.
-*/
+/** Generates an RJSF uiSchema from json-editor `format` and `options` conventions. */
 const generateUiSchema = (schema, readOnly = false, definitions, globalConfig, hasProtectedDefaultBranch = false) => {
 	const uiSchema = {};
 	const defs = definitions ?? schema.definitions;
@@ -1404,12 +1372,7 @@ const isMultiSelectSchema = (schema) => {
 		"integer"
 	].includes(items.type) && (items.enum || items.enumSource || schema.options?.tags));
 };
-/**
-* Cleans up non-standard properties from a schema before passing to RJSF/AJV.
-* RJSF is strict about unknown keywords, and our schemas contain json-editor-specific
-* extensions (format: 'button', options, etc.).
-*/
-/** Convert CSS height like "100px" to approximate textarea rows */
+/** CSS height like "100px" → approximate textarea rows. */
 const parseInputHeightToRows = (height) => {
 	const px = parseInt(height, 10);
 	if (Number.isNaN(px) || px <= 0) return 5;
@@ -1433,6 +1396,7 @@ const CUSTOM_FORMATS = [
 	"button",
 	"radio"
 ];
+/** Strips json-editor extensions (format: 'button', options, …) that RJSF/AJV reject. */
 const sanitizeSchema = (schema, definitions, isConditionalBranch = false) => {
 	const cleaned = { ...schema };
 	const defs = definitions ?? cleaned.definitions;
@@ -1504,11 +1468,7 @@ const sanitizeSchema = (schema, definitions, isConditionalBranch = false) => {
 //#endregion
 //#region src/blocks/RjsfSchemaEditor/RjsfSchemaEditor.tsx
 const defaultRenderMarkdown = (source) => source;
-/**
-* Produces a canonical JSON string with sorted keys at every level.
-* This ensures two objects with the same data but different key ordering
-* produce the same string. Also normalizes undefined → omitted (via JSON.stringify).
-*/
+/** JSON with keys sorted at every level, so key order never makes two equal objects differ. */
 const stableStringify = (obj) => JSON.stringify(obj, (_key, val) => {
 	if (val && typeof val === "object" && !Array.isArray(val)) {
 		const sorted = {};