@keboola/design 10.1.0 → 11.0.0

package/dist/rjsf.js

@@ -1,13 +1,44 @@
-import { debounce, Combobox, DateInput, RadioGroup, Checkbox, PasswordInput, Alert, CollapsiblePanel, Tabs, TabsContent, Link } from './chunk-6FPEI4EM.js';
-import { TextInput, Textarea, NumberInput, FormGroup, Label } from './chunk-SYIEF644.js';
-import { isLanguageMode, CodeEditor } from './chunk-7PUUHEJQ.js';
-import './chunk-Q7NWXLCT.js';
-import './chunk-L37JJ6MR.js';
-import './chunk-ESBL3IPF.js';
-import { Button } from './chunk-CTCFYWJC.js';
-import { Trash2, Info, BookOpen } from './chunk-BOHNXTMM.js';
-import { Tooltip } from './chunk-63NSN2VL.js';
-import './chunk-JP7PNHLH.js';
+import { Tabs, TabsContent } from './chunk-QGMIPA67.js';
+import { CollapsiblePanel } from './chunk-MVILMVGG.js';
+import { Alert } from './chunk-KWKSHPDP.js';
+import './chunk-FVPGQ6UE.js';
+import { DateInput } from './chunk-KDI64MCY.js';
+import { PasswordInput } from './chunk-U3A6YBTZ.js';
+import { Checkbox } from './chunk-Y4W3JORC.js';
+import { Combobox } from './chunk-5AIE6SET.js';
+import './chunk-SBGAUGXY.js';
+import './chunk-XCYGJDUX.js';
+import { RadioGroup } from './chunk-ITELSEFU.js';
+import './chunk-SCQPU4UE.js';
+import './chunk-ON4BJTHI.js';
+import './chunk-YI3WLXEN.js';
+import { Link } from './chunk-WZZK2DTZ.js';
+import './chunk-6DUMGC7Y.js';
+import { FormGroup } from './chunk-RTW56PWZ.js';
+import { NumberInput } from './chunk-QZAWRSEB.js';
+import { Textarea } from './chunk-EEK5NGZF.js';
+import './chunk-VSERHUWD.js';
+import { TextInput } from './chunk-HPMYYGP7.js';
+import './chunk-WKAUEL6I.js';
+import './chunk-SC275NHZ.js';
+import { Label } from './chunk-S6TAF63G.js';
+import './chunk-THHB4EWS.js';
+import { isLanguageMode, CodeEditor } from './chunk-YFZJ3ZLG.js';
+import './chunk-TV4WAP2R.js';
+import './chunk-7GTI3PPI.js';
+import './chunk-IIS7INHF.js';
+import './chunk-FUFMVW7O.js';
+import './chunk-7P6PLZ4B.js';
+import './chunk-PROCA7K7.js';
+import { Button } from './chunk-IXAYNBOY.js';
+import { Trash2, Info, BookOpen } from './chunk-RQVK4IYC.js';
+import './chunk-KR7NXXHC.js';
+import { debounce, Tooltip } from './chunk-SWQFYNYG.js';
+import './chunk-3W27OLK5.js';
+import './chunk-MODE4QIA.js';
+import './chunk-WETKNYZX.js';
+import './chunk-LXLIQ2D6.js';
+import './chunk-G3PMV62Z.js';
 import { createContext, use, useMemo, useRef, useState, useEffect, useCallback, isValidElement } from 'react';
 import Form from '@rjsf/core';
 import validator from '@rjsf/validator-ajv8';
@@ -142,6 +173,10 @@ var resolveByPath = (path, data) => {
   if (!(first in data)) return walk(parts.slice(1));
   return result;
 };
+var isHiddenTemplateWatch = (uiSchema) => {
+  if (uiSchema?.["ui:widget"] !== "template-watch") return false;
+  return !!uiSchema["ui:options"]?.hidden;
+};
 var extractProperty = (template) => {
   const match = /\{\{item\.(\w+)\}\}/.exec(template);
   return match?.[1] ?? "";
@@ -693,24 +728,32 @@ var FieldTemplateBody = ({
 };
 var FieldTemplateWithDependencies = ({
   dependencies,
+  keepMounted,
   ...props
 }) => {
   const rootFormData = useRootFormData();
   const parentPath = props.fieldPathId.path.slice(0, -1);
   if (!evaluateDependencies(dependencies, rootFormData, parentPath)) {
-    return null;
+    return keepMounted ? /* @__PURE__ */ jsx("div", { className: "tw:hidden", children: props.children }) : null;
   }
   return /* @__PURE__ */ jsx(FieldTemplateBody, { ...props });
 };
 var FieldTemplate = (props) => {
   if (props.hidden) return /* @__PURE__ */ jsx("div", { className: "tw:hidden", children: props.children });
-  if (props.uiSchema?.["ui:widget"] === "template-watch") {
+  const uiOptions = props.uiSchema?.["ui:options"];
+  if (isHiddenTemplateWatch(props.uiSchema)) {
     return /* @__PURE__ */ jsx("div", { className: "tw:hidden", children: props.children });
   }
-  const uiOptions = props.uiSchema?.["ui:options"];
   const dependencies = uiOptions?.dependencies;
   if (dependencies) {
-    return /* @__PURE__ */ jsx(FieldTemplateWithDependencies, { dependencies, ...props });
+    return /* @__PURE__ */ jsx(
+      FieldTemplateWithDependencies,
+      {
+        dependencies,
+        keepMounted: props.uiSchema?.["ui:widget"] === "template-watch",
+        ...props
+      }
+    );
   }
   return /* @__PURE__ */ jsx(FieldTemplateBody, { ...props });
 };
@@ -738,13 +781,12 @@ var ObjectFieldTemplate = ({
     return s.type === "object" || s.type === "array";
   };
   const visibleProperties = properties.filter((prop) => {
-    const childUi = uiSchema?.[prop.name];
-    if (childUi?.["ui:widget"] !== "hidden") return true;
+    if (uiSchema?.[prop.name]?.["ui:widget"] !== "hidden") return true;
     return !isContainerSchema(childSchemas?.[prop.name]);
   });
   const isHiddenMount = (name) => {
-    const w = uiSchema?.[name]?.["ui:widget"];
-    return w === "hidden" || w === "template-watch";
+    const childUi = uiSchema?.[name];
+    return childUi?.["ui:widget"] === "hidden" || isHiddenTemplateWatch(childUi);
   };
   const renderChildren = (props) => props.map((prop) => /* @__PURE__ */ jsx("div", { className: isHiddenMount(prop.name) ? "tw:hidden" : void 0, children: prop.content }, prop.name));
   if (isRoot) {
@@ -973,28 +1015,52 @@ var SelectWidget = ({
     }
   );
 };
+var stringify = (value) => {
+  if (value == null) return "";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+};
 var resolveTemplate = (template, watch, rootFormData) => {
   return template.replace(/\{\{(\w+)\}\}/g, (_, varName) => {
     const watchPath = watch[varName];
     if (!watchPath) return "";
-    const value = resolveByPath(watchPath, rootFormData);
-    return value == null ? "" : String(value);
+    return stringify(resolveByPath(watchPath, rootFormData));
   });
 };
-var TemplateWatchWidget = ({ value, onChange, options: widgetOptions }) => {
+var TemplateWatchWidget = ({
+  id,
+  value,
+  onChange,
+  disabled,
+  readonly,
+  rawErrors,
+  options: widgetOptions
+}) => {
   const data = useRootFormData();
   const watch = widgetOptions.watch;
   const template = widgetOptions.template;
-  const computed = watch && template ? resolveTemplate(template, watch, data) : value ?? "";
-  const lastSetRef = useRef(String(value ?? ""));
+  const computed = watch && template ? resolveTemplate(template, watch, data) : stringify(value);
+  const lastSetRef = useRef(stringify(value));
   useEffect(() => {
-    const computedStr = String(computed);
-    if (computedStr !== lastSetRef.current) {
-      lastSetRef.current = computedStr;
-      onChange(computedStr);
+    if (computed !== lastSetRef.current) {
+      lastSetRef.current = computed;
+      onChange(computed);
     }
   }, [computed, onChange]);
-  return null;
+  if (widgetOptions.hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      id,
+      value: computed,
+      readOnly: true,
+      disabled: disabled || readonly,
+      state: rawErrors?.length ? "error" : "default",
+      variant: "secondary"
+    }
+  );
 };
 var TextareaWidget = ({
   id,
@@ -1232,7 +1298,8 @@ var generateUiSchema = (schema, readOnly = false, definitions, globalConfig, has
         fieldUi["ui:options"] = {
           ...fieldUi["ui:options"],
           watch: propSchema.watch,
-          template: propSchema.template
+          template: propSchema.template,
+          hidden: !!options?.hidden || isContainerType(propSchema)
         };
       }
       if (type === "boolean" && options?.enum_titles) {
@@ -1382,6 +1449,12 @@ var isDynamicSelectSchema = (schema) => {
 var isTemplateWatchSchema = (schema) => {
   return !!(schema.template && schema.watch && !schema.enumSource);
 };
+var isContainerType = (schema) => {
+  if (schema.properties || schema.items) return true;
+  const { type } = schema;
+  if (Array.isArray(type)) return type.includes("object") || type.includes("array");
+  return type === "object" || type === "array";
+};
 var isAsyncSelectSchema = (schema) => {
   return !!(schema.options?.async || schema.options?.creatable);
 };