@keboola/design 11.4.0 → 11.5.0

package/dist/rjsf.js

@@ -1,21 +1,22 @@
-import { Tooltip, debounce } from "./utils-B5Z52hYs.js";
+import { Tooltip, debounce } from "./utils-DSvrhU8E.js";
 import { BookOpen, Info, Trash2 } from "./icons-Cek151jC.js";
 import { Button } from "./Button-DsRrU5F1.js";
 import { Label } from "./internal/components/Label.js";
 import { Link } from "./internal/components/Link.js";
-import { TextInput } from "./TextInput-DHM6dHmn.js";
-import { RadioGroup } from "./RadioGroup-XFzFd1ti.js";
-import { Checkbox } from "./Checkbox-fC0BuO2B.js";
-import { Combobox } from "./Combobox-Cs_1pj2q.js";
-import { FormGroup } from "./FormGroup-DbcDtrgU.js";
+import { useStableCallback } from "./internal/hooks/useStableCallback.js";
+import { TextInput } from "./TextInput-DH5SkbsE.js";
+import { RadioGroup } from "./RadioGroup-DXPbSj8P.js";
+import { Checkbox } from "./Checkbox-CUIn2jap.js";
+import { Combobox } from "./Combobox-BfIfaVMA.js";
+import { FormGroup } from "./FormGroup-DHvTFdno.js";
 import { NumberInput } from "./internal/blocks/NumberInput.js";
 import { Textarea } from "./internal/blocks/Textarea.js";
-import { DateInput } from "./DateInput-ZdaMQo5i.js";
+import { DateInput } from "./DateInput-DiEd5uCL.js";
 import { PasswordInput } from "./internal/blocks/PasswordInput.js";
-import { Alert } from "./Alert-DHJFrWnS.js";
+import { Alert } from "./Alert-Ba5b2YPq.js";
 import { CollapsiblePanel } from "./internal/components/CollapsiblePanel.js";
 import { Tabs, TabsContent } from "./Tabs-eB974xJf.js";
-import { CodeEditor, isLanguageMode } from "./CodeEditor-Cxy3HnKH.js";
+import { CodeEditor, isLanguageMode } from "./CodeEditor-C9zy7PxK.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";
@@ -920,7 +921,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 = ({ value, onChange, disabled, readonly, options: widgetOptions }) => {
+const DynamicSelectWidget = ({ id, value, onChange, disabled, readonly, options: widgetOptions, required }) => {
 	const data = useRootFormData();
 	const watch = widgetOptions.watch;
 	const enumSource = widgetOptions.enumSource;
@@ -934,9 +935,11 @@ const DynamicSelectWidget = ({ value, onChange, disabled, readonly, options: wid
 	const selectedItem = matched ?? fallbackItem;
 	const items = fallbackItem ? [fallbackItem, ...dynamicItems] : dynamicItems;
 	return /* @__PURE__ */ jsx(Combobox, {
+		id,
 		variant: "secondary",
 		items,
 		value: selectedItem,
+		allowClear: !required,
 		disabled: disabled || readonly,
 		onValueChange: (selected) => onChange(selected?.value ?? "")
 	});
@@ -993,7 +996,7 @@ const RadioWidget = ({ id, value, onChange, disabled, readonly, options }) => {
 };
 //#endregion
 //#region src/blocks/RjsfSchemaEditor/widgets/SelectWidget.tsx
-const SelectWidget = ({ value, schema, onChange, disabled, readonly, options, placeholder, required }) => {
+const SelectWidget = ({ id, value, schema, onChange, disabled, readonly, options, placeholder, required }) => {
 	const enumOptions = options.enumOptions ?? [];
 	const isBoolean = schema.type === "boolean";
 	const items = enumOptions.map((o) => ({
@@ -1002,6 +1005,7 @@ const SelectWidget = ({ value, schema, onChange, disabled, readonly, options, pl
 	}));
 	const selectedItem = items.find((item) => item.value === (value == null ? "" : String(value)));
 	return /* @__PURE__ */ jsx(Combobox, {
+		id,
 		variant: "secondary",
 		items,
 		value: selectedItem ?? null,
@@ -1539,8 +1543,7 @@ const RjsfSchemaEditor = ({ schema, value, onChange, readOnly, inForm, globalCon
 	useEffect(() => {
 		isInitialMountRef.current = false;
 	}, [formKey]);
-	const onChangeRef = useRef(onChange);
-	onChangeRef.current = onChange;
+	const handleValueChange = useStableCallback(onChange);
 	const valueRef = useRef(value);
 	valueRef.current = value;
 	const lastSentJsonRef = useRef(null);
@@ -1549,9 +1552,9 @@ const RjsfSchemaEditor = ({ schema, value, onChange, readOnly, inForm, globalCon
 		if (dataJson !== stableStringify(valueRef.current)) {
 			if (lastSentJsonRef.current === null && mountedFormDataJsonRef.current && dataJson === mountedFormDataJsonRef.current) return;
 			lastSentJsonRef.current = dataJson;
-			onChangeRef.current(data);
+			handleValueChange(data);
 		}
-	}, 100), []);
+	}, 100), [handleValueChange]);
 	useEffect(() => () => debouncedOnChange.cancel(), [debouncedOnChange]);
 	const [prevValue, setPrevValue] = useState(value);
 	if (value !== prevValue) {
@@ -1580,10 +1583,6 @@ const RjsfSchemaEditor = ({ schema, value, onChange, readOnly, inForm, globalCon
 		}
 		debouncedOnChange(e.formData);
 	}, [debouncedOnChange]);
-	const debouncedOnChangeRef = useRef(debouncedOnChange);
-	debouncedOnChangeRef.current = debouncedOnChange;
-	const setRootFormDataRef = useRef(setRootFormData);
-	setRootFormDataRef.current = setRootFormData;
 	const formContext = useMemo(() => ({
 		setFormData: (data) => {
 			const merged = {
@@ -1592,16 +1591,16 @@ const RjsfSchemaEditor = ({ schema, value, onChange, readOnly, inForm, globalCon
 			};
 			initialDataRef.current = merged;
 			formDataRef.current = merged;
-			setRootFormDataRef.current(merged);
-			debouncedOnChangeRef.current.cancel();
+			setRootFormData(merged);
+			debouncedOnChange.cancel();
 			lastSentJsonRef.current = stableStringify(merged);
-			onChangeRef.current(merged);
+			handleValueChange(merged);
 			isInitialMountRef.current = true;
 			mountedFormDataJsonRef.current = null;
 			setFormKey((k) => k + 1);
 		},
 		getFormData: () => formDataRef.current
-	}), []);
+	}), [debouncedOnChange, handleValueChange]);
 	const formRef = useRef(null);
 	useEffect(() => {
 		if (onRegisterValidate) onRegisterValidate(() => {