@lmb-it/kitsconcerto-native 0.1.236

package/form-renderer/hooks/useFieldLogic.js

@@ -0,0 +1,291 @@
+import { useRef, useMemo, useEffect, useCallback } from 'react';
+import { useFormContext, useController } from 'react-hook-form';
+import 'yup';
+import { dynamicList } from '../utils/dynamicList.js';
+import _ from 'lodash';
+
+const useFieldLogic = ({
+  element: { onDepsChange, ...element },
+  control,
+  getValues,
+  isFocused,
+  groupField,
+  watchedValues
+}) => {
+  const formContext = useFormContext();
+  const prevDepsRef = useRef("");
+  const watchedSig = useMemo(() => JSON.stringify(watchedValues), [watchedValues]);
+  const allFormValues = useMemo(() => getValues(), [getValues, watchedSig]);
+  const childElements = useMemo(() => {
+    if (!("elements" in element)) {
+      return [];
+    }
+    const elements = element.elements;
+    if (typeof elements === "function") {
+      return elements(watchedValues, allFormValues, {
+        control,
+        getValues,
+        setValue: formContext.setValue
+      }, groupField);
+    }
+    return elements;
+  }, [watchedValues]);
+  const resolvedProps = useMemo(() => {
+    const getDynamicProp = (propName) => {
+      const propValue = element[propName];
+      if (typeof propValue === "function") {
+        return propValue(watchedValues, allFormValues, formContext, groupField);
+      }
+      return propValue;
+    };
+    return {
+      helperText: getDynamicProp("helperText"),
+      leftAddon: getDynamicProp("leftAddon"),
+      rightAddon: getDynamicProp("rightAddon"),
+      keyFilter: getDynamicProp("keyFilter"),
+      withMask: getDynamicProp("withMask")
+      // ... resolve other dynamic props here
+    };
+  }, [watchedValues, allFormValues, element, control, getValues]);
+  const lastListRef = useRef(void 0);
+  const lastElementRef = useRef(null);
+  const lastWatchedRef = useRef(null);
+  const list = useMemo(() => {
+    if (!("list" in element)) return void 0;
+    const elementChanged = !_.isEqual(lastElementRef.current, element);
+    const watchedChanged = !_.isEqual(lastWatchedRef.current, watchedValues);
+    if (!elementChanged && !watchedChanged) {
+      return lastListRef.current;
+    }
+    const nextList = dynamicList(
+      element,
+      watchedValues,
+      allFormValues,
+      groupField,
+      formContext
+    );
+    lastElementRef.current = element;
+    lastWatchedRef.current = watchedValues;
+    lastListRef.current = nextList;
+    return nextList;
+  }, [watchedValues, allFormValues, control, getValues, element]);
+  const isShown = useMemo(() => {
+    const showLogic = element.show || element.logic?.show;
+    if (typeof showLogic === "function") {
+      return showLogic(watchedValues, allFormValues, {
+        control,
+        getValues,
+        setValue: formContext.setValue
+      }, groupField);
+    }
+    return true;
+  }, [watchedValues, allFormValues, control, getValues, element]);
+  const isDisabled = useMemo(() => {
+    const disableLogic = element.isDisabled || element.logic?.disable;
+    if (typeof disableLogic === "function") {
+      return disableLogic(watchedValues, allFormValues, {
+        control,
+        getValues,
+        setValue: formContext.setValue
+      }, groupField);
+    }
+    return !!disableLogic;
+  }, [watchedValues, allFormValues, control, getValues, element]);
+  const isRequired = useMemo(() => {
+    if (!("schema" in element) || !element.schema) return false;
+    const schema = element.schema;
+    const checkRequired = (schema2, parentValues) => {
+      try {
+        const type = schema2._type;
+        const testValue = (() => {
+          switch (type) {
+            case "array":
+              return [];
+            case "object":
+              return {};
+            case "boolean":
+              return void 0;
+            case "number":
+              return void 0;
+            case "date":
+              return void 0;
+            default:
+              return "";
+          }
+        })();
+        schema2.validateSync(
+          testValue,
+          // simulating the field is empty
+          {
+            context: parentValues,
+            // @ts-ignore
+            parent: parentValues,
+            abortEarly: false
+          }
+        );
+        return false;
+      } catch (err) {
+        if (err?.inner?.length) {
+          return err.inner.some(
+            (e) => e.type === "required" || e.message?.toLowerCase().includes("required")
+          );
+        }
+        return err?.type === "required" || err?.message?.toLowerCase().includes("required");
+      }
+    };
+    const parent = groupField && groupField.index !== void 0 ? getValues?.()?.[groupField.name]?.[groupField.index] : getValues?.();
+    return checkRequired(schema, parent);
+  }, [element, watchedValues, allFormValues]);
+  const label = useMemo(() => {
+    if (typeof element.label === "function") {
+      return element.label(watchedValues, allFormValues, {
+        control,
+        getValues,
+        setValue: formContext.setValue
+      }, groupField);
+    }
+    return element.label;
+  }, [watchedValues, allFormValues, control, getValues, element]);
+  const placeholder = useMemo(() => {
+    if ("placeholder" in element && typeof element.placeholder === "function") {
+      return element.placeholder(watchedValues, allFormValues, {
+        control,
+        getValues,
+        setValue: formContext.setValue
+      }, groupField);
+    }
+    return "placeholder" in element ? element.placeholder : void 0;
+  }, [watchedValues, allFormValues, control, getValues, element]);
+  const resolvedStyle = useMemo(() => {
+    const s = "style" in element ? element.style : void 0;
+    if (s && typeof s === "function") {
+      return s(watchedValues, allFormValues, {
+        control,
+        getValues,
+        setValue: formContext.setValue
+      }, groupField);
+    }
+    return s;
+  }, [watchedValues, allFormValues, control, getValues, element]);
+  const hasWarnedDeprecatedStyleRef = useRef(false);
+  useEffect(() => {
+    const nodeEnv = globalThis?.process?.env?.NODE_ENV;
+    if (nodeEnv === "production") return;
+    if (hasWarnedDeprecatedStyleRef.current) return;
+    if (!("style" in element) || element.style === void 0) return;
+    hasWarnedDeprecatedStyleRef.current = true;
+    console.warn(
+      `[KitsConcerto] Field "${element.id}": the "style" prop is deprecated. Use "slots" instead. Migration: style.input \u2192 slots.root.style, style.container \u2192 slots.container.style, style.label \u2192 slots.label.style, style.helperText \u2192 slots.helperText.style, style.errorMessage \u2192 slots.error.style. This prop will be removed in the next major version.`
+    );
+  }, []);
+  const slots = useMemo(() => {
+    const rawSlots = "slots" in element ? element.slots : void 0;
+    let explicitSlots;
+    if (rawSlots && typeof rawSlots === "function") {
+      explicitSlots = rawSlots(watchedValues, allFormValues, {
+        control,
+        getValues,
+        setValue: formContext.setValue
+      }, groupField);
+    } else {
+      explicitSlots = rawSlots;
+    }
+    if (!resolvedStyle && !explicitSlots) return void 0;
+    if (!resolvedStyle) return explicitSlots;
+    const STYLE_TO_SLOT = {
+      input: "root",
+      container: "container",
+      label: "label",
+      helperText: "helperText",
+      errorMessage: "error"
+    };
+    const result = {};
+    for (const [styleKey, slotKey] of Object.entries(STYLE_TO_SLOT)) {
+      const val = resolvedStyle[styleKey];
+      if (val) {
+        result[slotKey] = { style: val };
+      }
+    }
+    if (explicitSlots) {
+      for (const [key, slot] of Object.entries(explicitSlots)) {
+        if (!result[key]) {
+          result[key] = slot;
+        } else {
+          result[key] = {
+            ...slot,
+            style: { ...result[key].style, ...slot.style || {} }
+          };
+        }
+      }
+    }
+    return Object.keys(result).length > 0 ? result : void 0;
+  }, [watchedValues, allFormValues, control, getValues, element, resolvedStyle]);
+  const layout = useMemo(() => {
+    const getDynamicProp = (prop) => typeof prop === "function" ? prop(watchedValues, allFormValues, { control, getValues }) : prop;
+    return {
+      colSpan: getDynamicProp(element.logic?.colSpan ?? element.colSpan) ?? 12,
+      rowSpan: getDynamicProp(element.rowSpan),
+      columnGap: getDynamicProp(element.columnGap),
+      rowGap: getDynamicProp(element.rowGap),
+      colOffset: getDynamicProp(element.colOffset),
+      area: getDynamicProp(element.area)
+    };
+  }, [watchedValues, allFormValues, control, getValues, element]);
+  const onWatchedValuesChange = useCallback(() => {
+    if (onDepsChange) {
+      onDepsChange(watchedValues, allFormValues, formContext, groupField);
+    }
+  }, [watchedValues]);
+  const isObjectElement = element.type === "Object";
+  const { field, fieldState } = useController({
+    name: element.id,
+    control,
+    shouldUnregister: !isShown,
+    ...isObjectElement ? { defaultValue: {} } : {}
+  });
+  useEffect(() => {
+    if (!onDepsChange) return;
+    const sig = JSON.stringify(watchedValues);
+    if (sig === prevDepsRef.current) return;
+    prevDepsRef.current = sig;
+    onDepsChange(watchedValues, allFormValues, formContext, groupField);
+  }, [onDepsChange, watchedValues, allFormValues, formContext, groupField]);
+  return {
+    field: {
+      ...field,
+      onChange: (event) => {
+        if ("onChangeValue" in element && element?.onChangeValue) {
+          const value = event != null && typeof event === "object" && "target" in event ? event.target.value : event;
+          element.onChangeValue(
+            value,
+            { ...fieldState, isFocused: !!isFocused },
+            formContext
+          );
+        }
+        field.onChange(event);
+      }
+    },
+    fieldState,
+    watchedValues,
+    onWatchedValuesChange,
+    elements: childElements,
+    isShown,
+    isDisabled,
+    isRequired,
+    hideError: element.hideError,
+    label,
+    placeholder,
+    formContext,
+    layout,
+    list,
+    style: resolvedStyle,
+    slots,
+    ...resolvedProps,
+    localProps: "localProps" in element ? element?.localProps : void 0,
+    attached: element.attached,
+    animation: element.animation
+  };
+};
+
+export { useFieldLogic };
+//# sourceMappingURL=useFieldLogic.js.map

package/form-renderer/hooks/useFieldLogic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFieldLogic.js","sources":["../../../../src/form-renderer/hooks/useFieldLogic.ts"],"sourcesContent":["import {useCallback, useEffect, useMemo, useRef} from 'react';\nimport {type FieldValues, useController, useFormContext, type UseFormReturn} from 'react-hook-form';\nimport {Schema} from 'yup';\n\n// Assuming your types are consolidated in a central file.\nimport type {\n    IElementStyle,\n    IFormElement,\n    ILabelElement,\n    ITextFieldProps,\n    LogicFunction,\n    UseFieldLogicProps,\n    UseFieldLogicReturn\n} from '@lmb-it/kitsconcerto-types';\nimport {dynamicList} from \"../utils\";\nimport _ from \"lodash\";\n\n// --- Hook Return Value ---\n\n/**\n * The core logic engine for an individual form field.\n * This hook replaces LogicContext and FormFieldContext. It watches dependencies,\n * calculates all dynamic properties (visibility, disabled state, required status, etc.),\n * and provides the necessary props from react-hook-form.\n *\n * @param {UseFieldLogicProps<T>} props - The element definition and form control.\n * @returns {UseFieldLogicReturn<T>} An object containing all necessary props and states for rendering the field.\n */\nexport const useFieldLogic = <T extends FieldValues>({\n                                                         element: {onDepsChange, ...element},\n                                                         control,\n                                                         getValues,\n                                                         isFocused,\n                                                         groupField,\n                                                         watchedValues\n                                                     }: UseFieldLogicProps<T>): UseFieldLogicReturn<T> => {\n\n\n        const formContext = useFormContext<T>()\n\n        const prevDepsRef = useRef<string>(\"\");\n\n        const watchedSig = useMemo(() => JSON.stringify(watchedValues), [watchedValues]);\n\n        const allFormValues = useMemo(() => getValues(), [getValues, watchedSig]);\n\n        /*const watchedObject = useMemo(() => {\n            return dependencies.reduce((acc, dep, index) => {\n                acc[dep] = watchedValues[index];\n                return acc;\n            }, {} as any)\n        }, [watchedValues, dependencies])*/\n\n        const childElements = useMemo(() => {\n            if (!('elements' in element)) {\n                return [];\n            }\n            const elements = element.elements;\n            if (typeof elements === 'function') {\n                return (elements as LogicFunction<T>)(watchedValues, allFormValues, {\n                    control,\n                    getValues,\n                    setValue: formContext.setValue\n                } as any, groupField);\n            }\n            return elements;\n        }, [watchedValues])\n\n        const resolvedProps = useMemo(() => {\n            const getDynamicProp = (propName: keyof IFormElement<T> | string) => {\n                const propValue: LogicFunction<T> = (element as any)[propName];\n                if (typeof propValue === 'function') {\n                    return propValue(watchedValues, allFormValues, formContext, groupField);\n                }\n                return propValue;\n            };\n\n            return {\n                helperText: getDynamicProp('helperText'),\n                leftAddon: getDynamicProp('leftAddon'),\n                rightAddon: getDynamicProp('rightAddon'),\n                keyFilter: getDynamicProp('keyFilter') as ITextFieldProps<T>['keyFilter'],\n                withMask: getDynamicProp('withMask'),\n                // ... resolve other dynamic props here\n            };\n        }, [watchedValues, allFormValues, element, control, getValues]);\n\n        const lastListRef = useRef<T[] | undefined>(undefined);\n        const lastElementRef = useRef<any>(null);\n        const lastWatchedRef = useRef<any>(null);\n\n        const list = useMemo(() => {\n            if (!(\"list\" in element)) return undefined;\n\n            const elementChanged = !_.isEqual(lastElementRef.current, element);\n            const watchedChanged = !_.isEqual(lastWatchedRef.current, watchedValues);\n\n            // ✅ nothing meaningful changed → reuse\n            if (!elementChanged && !watchedChanged) {\n                return lastListRef.current;\n            }\n\n            // 🔁 rebuild\n            const nextList = dynamicList<T>(\n                element,\n                watchedValues,\n                allFormValues,\n                groupField,\n                formContext\n            );\n\n            lastElementRef.current = element;\n            lastWatchedRef.current = watchedValues;\n            lastListRef.current = nextList;\n\n            return nextList;\n        }, [watchedValues, allFormValues, control, getValues, element]);\n\n        // 4. Centralize dynamic property calculations using memoization.\n        const isShown = useMemo(() => {\n            // console.log({watchedObject, allFormValues})\n            const showLogic = element.show || element.logic?.show;\n            if (typeof showLogic === 'function') {\n                return (showLogic as LogicFunction<T>)(watchedValues, allFormValues, {\n                    control,\n                    getValues,\n                    setValue: formContext.setValue\n                } as any, groupField);\n            }\n            return true;\n        }, [watchedValues, allFormValues, control, getValues, element]);\n\n        const isDisabled = useMemo(() => {\n            const disableLogic = element.isDisabled || element.logic?.disable;\n            if (typeof disableLogic === 'function') {\n                return (disableLogic as LogicFunction<T, boolean>)(watchedValues, allFormValues, {\n                    control,\n                    getValues,\n                    setValue: formContext.setValue\n                } as any, groupField);\n            }\n            return !!disableLogic;\n        }, [watchedValues, allFormValues, control, getValues, element]);\n\n        const isRequired = useMemo(() => {\n            if (!('schema' in element) || !element.schema) return false;\n\n            const schema = element.schema as Schema<any>;\n\n            const checkRequired = (schema: Schema<any>, parentValues: any): boolean => {\n                try {\n                    const type = (schema as any)._type;\n\n                    const testValue = (() => {\n                        switch (type) {\n                            case 'array':\n                                return [];\n                            case 'object':\n                                return {};\n                            case 'boolean':\n                                return undefined;\n                            case 'number':\n                                return undefined;\n                            case 'date':\n                                return undefined;\n                            default:\n                                return ''; // string or unknown\n                        }\n                    })();\n                    // Try validating an empty string\n                    schema.validateSync(\n                        testValue, // simulating the field is empty\n                        {\n                            context: parentValues,\n                            // @ts-ignore\n                            parent: parentValues,\n                            abortEarly: false,\n                        }\n                    );\n\n                    return false; // Passed even when empty => not required\n                } catch (err: any) {\n                    // if (element.id === 'count/ries') {\n                    //     console.log(err.inner || err);\n                    // }\n\n                    if (err?.inner?.length) {\n                        return err.inner.some(\n                            (e: any) =>\n                                e.type === 'required' ||\n                                e.message?.toLowerCase().includes('required')\n                        );\n                    }\n\n                    return (\n                        err?.type === 'required' ||\n                        err?.message?.toLowerCase().includes('required')\n                    );\n                }\n            };\n\n            // Get the parent object (either group or full form)\n            const parent = groupField && groupField.index !== undefined\n                ? getValues?.()?.[groupField.name]?.[groupField.index]\n                : getValues?.();\n\n            return checkRequired(schema, parent);\n        }, [element, watchedValues, allFormValues]);\n\n        const label = useMemo(() => {\n            if (typeof element.label === 'function') {\n                return (element.label as LogicFunction<T, ILabelElement>)(watchedValues, allFormValues, {\n                    control,\n                    getValues,\n                    setValue: formContext.setValue\n                } as any, groupField);\n            }\n            return element.label;\n        }, [watchedValues, allFormValues, control, getValues, element]);\n\n        const placeholder = useMemo(() => {\n            if ('placeholder' in element && typeof element.placeholder === 'function') {\n                return (element.placeholder as LogicFunction<T, string>)(watchedValues, allFormValues, {\n                    control,\n                    getValues,\n                    setValue: formContext.setValue\n                } as any, groupField);\n            }\n            return ('placeholder' in element ? element.placeholder : undefined) as string | undefined;\n        }, [watchedValues, allFormValues, control, getValues, element]);\n\n        const resolvedStyle = useMemo(() => {\n            const s = 'style' in element ? element.style : undefined;\n\n            if (s && typeof s === 'function') {\n                return s(watchedValues, allFormValues, {\n                    control,\n                    getValues,\n                    setValue: formContext.setValue\n                } as any, groupField);\n            }\n            return s;\n        }, [watchedValues, allFormValues, control, getValues, element])\n\n        // ─────────────────────────────────────────────────────────────\n        // Dev-mode deprecation warning for the legacy `style` prop.\n        // Fires ONCE per field-instance mount (guarded by hasWarnedRef +\n        // empty deps) so it does not re-fire on keystrokes / re-renders /\n        // theme changes / etc. The bridge below remains functional —\n        // this is a soft deprecation only; runtime removal is deferred\n        // to the next major version.\n        // ─────────────────────────────────────────────────────────────\n        const hasWarnedDeprecatedStyleRef = useRef(false);\n        useEffect(() => {\n            // `process` is undeclared on native (no @types/node) but the\n            // bundler statically replaces it on both platforms in production\n            // builds. Reading it via globalThis sidesteps the TS lookup\n            // without changing the runtime behaviour.\n            const nodeEnv = (globalThis as any)?.process?.env?.NODE_ENV;\n            if (nodeEnv === 'production') return;\n            if (hasWarnedDeprecatedStyleRef.current) return;\n            if (!('style' in element) || (element as any).style === undefined) return;\n\n            hasWarnedDeprecatedStyleRef.current = true;\n            // eslint-disable-next-line no-console\n            console.warn(\n                `[KitsConcerto] Field \"${(element as any).id}\": the \"style\" prop is deprecated. ` +\n                `Use \"slots\" instead. Migration: ` +\n                `style.input → slots.root.style, ` +\n                `style.container → slots.container.style, ` +\n                `style.label → slots.label.style, ` +\n                `style.helperText → slots.helperText.style, ` +\n                `style.errorMessage → slots.error.style. ` +\n                `This prop will be removed in the next major version.`\n            );\n            // Empty deps: warn once on mount only — element identity may\n            // change every render (form re-constructs configs), so we\n            // cannot key on it without re-firing the warning.\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, []);\n\n        /**\n         * Merge explicit `slots` with `style` sub-keys.\n         * IElementStyle sub-keys are bridged into the slot system so they\n         * flow through useComponentDefaults → elementStyles → KitsContainer.\n         * Priority: style sub-keys (lowest) < explicit slots (highest).\n         */\n        const slots = useMemo(() => {\n            // 1. Resolve explicit slots (DynamicValue)\n            const rawSlots = 'slots' in element ? element.slots : undefined;\n            let explicitSlots: Record<string, { props?: any; style?: any }> | undefined;\n            if (rawSlots && typeof rawSlots === 'function') {\n                explicitSlots = (rawSlots as any)(watchedValues, allFormValues, {\n                    control,\n                    getValues,\n                    setValue: formContext.setValue\n                } as any, groupField);\n            } else {\n                explicitSlots = rawSlots as any;\n            }\n\n            // 2. Bridge IElementStyle sub-keys into slot format\n            if (!resolvedStyle && !explicitSlots) return undefined;\n            if (!resolvedStyle) return explicitSlots;\n\n            const STYLE_TO_SLOT: Record<string, string> = {\n                input: 'root',\n                container: 'container',\n                label: 'label',\n                helperText: 'helperText',\n                errorMessage: 'error',\n            };\n\n            const result: Record<string, { props?: any; style?: any }> = {};\n\n            // First layer: style sub-keys (lower priority)\n            for (const [styleKey, slotKey] of Object.entries(STYLE_TO_SLOT)) {\n                const val = (resolvedStyle as any)[styleKey];\n                if (val) {\n                    result[slotKey] = { style: val };\n                }\n            }\n\n            // Second layer: explicit slots override\n            if (explicitSlots) {\n                for (const [key, slot] of Object.entries(explicitSlots)) {\n                    if (!result[key]) {\n                        result[key] = slot;\n                    } else {\n                        result[key] = {\n                            ...slot,\n                            style: { ...result[key].style, ...(slot.style || {}) },\n                        };\n                    }\n                }\n            }\n\n            return Object.keys(result).length > 0 ? result : undefined;\n        }, [watchedValues, allFormValues, control, getValues, element, resolvedStyle])\n\n        // 6. Calculate layout properties.\n        const layout = useMemo(() => {\n            const getDynamicProp = (prop: any) => typeof prop === 'function'\n                ? prop(watchedValues, allFormValues, {control, getValues})\n                : prop;\n\n            return {\n                colSpan: getDynamicProp(element.logic?.colSpan ?? element.colSpan) ?? 12,\n                rowSpan: getDynamicProp(element.rowSpan),\n                columnGap: getDynamicProp(element.columnGap),\n                rowGap: getDynamicProp(element.rowGap),\n                colOffset: getDynamicProp(element.colOffset),\n                area: getDynamicProp(element.area),\n            };\n        }, [watchedValues, allFormValues, control, getValues, element]);\n\n\n        const onWatchedValuesChange = useCallback(() => {\n            if (onDepsChange) {\n                onDepsChange(watchedValues, allFormValues, formContext as UseFormReturn<T>, groupField)\n            }\n        }, [watchedValues])\n\n        // 7. Get the field's state and methods from react-hook-form.\n        // For Object elements, default to {} so react-hook-form treats the field\n        // as a nested object — children register with dot-notation paths\n        // (e.g. contactPhone.phoneNumber) and build the nested structure.\n        const isObjectElement = element.type === 'Object';\n        const {field, fieldState} = useController({\n            name: element.id as any,\n            control,\n            shouldUnregister: !isShown,\n            ...(isObjectElement ? {defaultValue: {} as any} : {}),\n        });\n\n        useEffect(() => {\n            if (!onDepsChange) return;\n\n            // Create a stable signature for watched values\n            // (stringify is fine here because deps lists are small)\n            const sig = JSON.stringify(watchedValues);\n\n            if (sig === prevDepsRef.current) return; // ✅ no real change\n\n            prevDepsRef.current = sig;\n\n            onDepsChange(watchedValues, allFormValues, formContext as UseFormReturn<T>, groupField);\n        }, [onDepsChange, watchedValues, allFormValues, formContext, groupField]);\n\n        // 8. Return a single, clean object for the UI component.\n        return {\n            field: {\n                ...field,\n                onChange: (event) => {\n                    if ('onChangeValue' in element && element?.onChangeValue) {\n                        const value = event != null && typeof event === 'object' && 'target' in event\n                            ? event.target.value\n                            : event;\n                        element.onChangeValue(\n                            value,\n                            {...fieldState, isFocused: !!isFocused},\n                            formContext\n                        )\n                    }\n                    field.onChange(event)\n                }\n            },\n            fieldState,\n            watchedValues,\n            onWatchedValuesChange,\n            elements: childElements,\n            isShown,\n            isDisabled,\n            isRequired,\n            hideError: element.hideError,\n            label,\n            placeholder,\n            formContext,\n            layout,\n            list,\n            style: resolvedStyle as IElementStyle,\n            slots,\n            ...resolvedProps,\n            localProps: 'localProps' in element ? element?.localProps : undefined,\n            attached: element.attached,\n            animation: element.animation,\n        };\n    }\n;\n"],"names":["schema"],"mappings":"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"}

package/form-renderer/hooks/useFormManager.cjs

@@ -0,0 +1,119 @@
+'use strict';
+
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var yup = require('@hookform/resolvers/yup');
+var helpers = require('../utils/helpers.cjs');
+var schemaBuilder = require('../utils/schemaBuilder.cjs');
+
+const useFormManager = ({
+  elements,
+  onSubmit,
+  onInvalidSubmit,
+  id,
+  onChange,
+  onChangeSingleValue,
+  // <-- Add this
+  outputFormat = "Json"
+}, isSubmitting, setIsSubmitting) => {
+  React.useEffect(() => {
+    try {
+      helpers.checkNameDuplication(elements);
+    } catch (error) {
+      console.error("Form Configuration Error:", error);
+    }
+  }, [elements]);
+  const defaultValues = React.useMemo(() => helpers.getDefaultValues(elements), [elements]);
+  const schema = React.useMemo(() => schemaBuilder.schemaBuilder(elements), [elements]);
+  const combinedChildIds = React.useMemo(() => helpers.getCombinedChildIds(elements), [elements]);
+  const stripCombinedChildren = React.useCallback((data) => {
+    if (combinedChildIds.size === 0) return data;
+    const filtered = {};
+    for (const [key, value] of Object.entries(data)) {
+      if (!combinedChildIds.has(key)) {
+        filtered[key] = value;
+      }
+    }
+    return filtered;
+  }, [combinedChildIds]);
+  const formMethods = reactHookForm.useForm({
+    resolver: yup.yupResolver(schema),
+    defaultValues,
+    shouldUnregister: false,
+    mode: "onSubmit",
+    reValidateMode: "onChange"
+    // ... (defaultValues logic remains the same)
+  });
+  const onValidSubmit = React.useCallback(
+    (rawData) => {
+      const data = stripCombinedChildren(rawData);
+      if (outputFormat === "FormData") {
+        const formData = new FormData();
+        for (const [key, value] of Object.entries(data)) {
+          if (Array.isArray(value)) {
+            if (value.length === 1 && value[0] instanceof File) {
+              formData.append(key, value[0]);
+            } else {
+              value.forEach((item) => {
+                if (item instanceof File) {
+                  formData.append(`${key}[]`, item);
+                } else if (typeof item === "number" || typeof item === "string") {
+                  formData.append(`${key}[]`, item.toString());
+                } else {
+                  formData.append(`${key}[]`, JSON.stringify(item));
+                }
+              });
+            }
+          } else {
+            if (value instanceof File) {
+              formData.append(key, value);
+            } else if (typeof value === "number" || typeof value === "string") {
+              formData.append(key, value.toString());
+            } else {
+              formData.append(key, JSON.stringify(value));
+            }
+          }
+        }
+        onSubmit && onSubmit(formData, setIsSubmitting, formMethods);
+      } else {
+        onSubmit && onSubmit(data, setIsSubmitting, formMethods);
+      }
+    },
+    [outputFormat, onSubmit, setIsSubmitting, formMethods, stripCombinedChildren]
+  );
+  const handleSubmitWrapper = React.useCallback(() => {
+    formMethods.handleSubmit(onValidSubmit, (errors) => {
+      setIsSubmitting(false);
+      onInvalidSubmit?.(errors);
+    })();
+  }, [formMethods, onValidSubmit, setIsSubmitting, onInvalidSubmit]);
+  function getValueByPath(obj, path) {
+    return path.split(".").reduce((acc, key) => {
+      if (acc === void 0 || acc === null) return void 0;
+      return acc[key];
+    }, obj);
+  }
+  React.useEffect(() => {
+    const subscription = formMethods.watch((currentValues, { name, type }) => {
+      onChange?.(stripCombinedChildren(currentValues));
+      if (onChangeSingleValue && name && type === "change") {
+        if (!combinedChildIds.has(name)) {
+          const value = getValueByPath(currentValues, name);
+          onChangeSingleValue(name, value);
+        }
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [formMethods.watch, onChange, onChangeSingleValue, stripCombinedChildren, combinedChildIds]);
+  return {
+    formMethods,
+    // The original object for FormProvider
+    isSubmitting,
+    setIsSubmitting,
+    handleSubmit: handleSubmitWrapper
+    // The wrapped function for our UI
+  };
+};
+
+exports.useFormManager = useFormManager;
+//# sourceMappingURL=useFormManager.cjs.map

package/form-renderer/hooks/useFormManager.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormManager.cjs","sources":["../../../../src/form-renderer/hooks/useFormManager.ts"],"sourcesContent":["// hooks/useFormManager.ts\n\nimport {type Dispatch, type SetStateAction, useCallback, useEffect, useMemo} from 'react';\nimport {type FieldValues, type SubmitHandler, useForm, type UseFormReturn, type DefaultValues} from 'react-hook-form';\nimport {yupResolver} from '@hookform/resolvers/yup';\nimport {checkNameDuplication, getCombinedChildIds, getDefaultValues, schemaBuilder} from '../utils';\nimport type {IFormComponent} from '@lmb-it/kitsconcerto-types';\n\n// --- Using Your Provided Type Definitions ---\n\n\n// --- CORRECTED RETURN TYPE ---\nexport interface UseFormManagerReturn<T extends FieldValues> {\n    /**\n     * The original, unmodified methods returned from react-hook-form's useForm hook.\n     * This is what gets passed to the FormProvider.\n     */\n    formMethods: UseFormReturn<T>;\n    /**\n     * Our custom loading state for the submit button.\n     */\n    isSubmitting: boolean;\n    /**\n     * Our wrapped submit handler that manages the isSubmitting state.\n     * This is what the <form> element's onSubmit will call.\n     */\n    handleSubmit: () => void;\n\n    setIsSubmitting: Dispatch<SetStateAction<boolean>>\n}\n\n// A helper utility to check for valid URLs, as used in your original getDefaultValues.\nconst isValidURL = (urlString: string): boolean => {\n    try {\n        const url = new URL(urlString);\n        return ['http:', 'https:'].includes(url.protocol);\n    } catch (_) {\n        return false;\n    }\n};\n\nexport const useFormManager = <T extends FieldValues>({\n                                                          elements,\n                                                          onSubmit,\n                                                          onInvalidSubmit, id,\n                                                          onChange,\n                                                          onChangeSingleValue, // <-- Add this\n                                                          outputFormat = 'Json'\n                                                      }: IFormComponent<T>, isSubmitting: boolean, setIsSubmitting: Dispatch<SetStateAction<boolean>>): UseFormManagerReturn<T> => {\n\n\n    // 1. Check for duplicate names on mount and when elements change.\n    useEffect(() => {\n        try {\n            checkNameDuplication(elements);\n        } catch (error) {\n            console.error(\"Form Configuration Error:\", error);\n        }\n    }, [elements]);\n\n    // 2. Generate the default values object, memoized for performance.\n    const defaultValues = useMemo(() => getDefaultValues(elements), [elements]);\n\n    const schema = useMemo(() => schemaBuilder(elements, id!), [elements]);\n\n    // 2b. Collect Combined children IDs to exclude from output data.\n    const combinedChildIds = useMemo(() => getCombinedChildIds(elements), [elements]);\n\n    const stripCombinedChildren = useCallback((data: Record<string, any>) => {\n        if (combinedChildIds.size === 0) return data;\n        const filtered: Record<string, any> = {};\n        for (const [key, value] of Object.entries(data)) {\n            if (!combinedChildIds.has(key)) {\n                filtered[key] = value;\n            }\n        }\n        return filtered;\n    }, [combinedChildIds]);\n\n    // console.log(id, elements, schema)\n\n    // console.log(schema.describe())\n    // This is the original, unmodified object from react-hook-form\n    const formMethods = useForm<T>({\n        resolver: yupResolver(schema),\n        defaultValues: defaultValues as DefaultValues<T>,\n        shouldUnregister: false,\n        mode: \"onSubmit\",\n        reValidateMode: \"onChange\",\n        // ... (defaultValues logic remains the same)\n    });\n\n\n    const onValidSubmit: SubmitHandler<any> = useCallback(\n        (rawData) => {\n            const data = stripCombinedChildren(rawData);\n            if (outputFormat === \"FormData\") {\n                const formData = new FormData();\n                for (const [key, value] of Object.entries(data)) {\n                    if (Array.isArray(value)) {\n                        if (value.length === 1 && value[0] instanceof File) {\n                            formData.append(key, value[0]);\n                        } else {\n                            value.forEach((item) => {\n                                if (item instanceof File) {\n                                    formData.append(`${key}[]`, item);\n                                } else if (\n                                    typeof item === \"number\" ||\n                                    typeof item === \"string\"\n                                ) {\n                                    formData.append(`${key}[]`, item.toString());\n                                } else {\n                                    formData.append(`${key}[]`, JSON.stringify(item));\n                                }\n                            });\n                        }\n                    } else {\n                        if (value instanceof File) {\n                            formData.append(key, value);\n                        } else if (\n                            typeof value === \"number\" ||\n                            typeof value === \"string\"\n                        ) {\n                            formData.append(key, value.toString());\n                        } else {\n                            formData.append(key, JSON.stringify(value));\n                        }\n                    }\n                }\n\n                onSubmit && onSubmit(formData, setIsSubmitting, formMethods);\n            } else {\n                onSubmit && onSubmit(data, setIsSubmitting, formMethods);\n            }\n        },\n        [outputFormat, onSubmit, setIsSubmitting, formMethods, stripCombinedChildren],\n    );\n\n\n    // Our custom wrapper function\n    const handleSubmitWrapper = useCallback(() => {\n        // We call the ORIGINAL handleSubmit from formMethods here\n        formMethods.handleSubmit(onValidSubmit, (errors) => {\n            setIsSubmitting(false);\n            onInvalidSubmit?.(errors);\n        })();\n    }, [formMethods, onValidSubmit, setIsSubmitting, onInvalidSubmit]);\n\n    function getValueByPath(obj: any, path: string) {\n        return path.split(\".\").reduce((acc, key) => {\n            if (acc === undefined || acc === null) return undefined;\n            return acc[key];\n        }, obj);\n    }\n\n    // This useEffect hook handles both global and single-value change events.\n    useEffect(() => {\n        const subscription = formMethods.watch((currentValues, {name, type}) => {\n            // 1. Trigger the global onChange callback with all values (excluding Combined children).\n            onChange?.(stripCombinedChildren(currentValues as { [s: string]: any }));\n\n            // 2. Trigger the single value change callback (skip Combined child fields).\n            if (onChangeSingleValue && name && type === 'change') {\n                if (!combinedChildIds.has(name)) {\n                    const value = getValueByPath(currentValues, name);\n                    onChangeSingleValue(name, value);\n                }\n            }\n        });\n        return () => subscription.unsubscribe();\n    }, [formMethods.watch, onChange, onChangeSingleValue, stripCombinedChildren, combinedChildIds]);\n\n    // Return the two concerns separately\n    return {\n        formMethods, // The original object for FormProvider\n        isSubmitting,\n        setIsSubmitting,\n        handleSubmit: handleSubmitWrapper, // The wrapped function for our UI\n    };\n};\n"],"names":["useEffect","checkNameDuplication","useMemo","getDefaultValues","schemaBuilder","getCombinedChildIds","useCallback","useForm","yupResolver"],"mappings":"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"}

package/form-renderer/hooks/useFormManager.js

@@ -0,0 +1,117 @@
+import { useEffect, useMemo, useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { checkNameDuplication, getDefaultValues, getCombinedChildIds } from '../utils/helpers.js';
+import { schemaBuilder } from '../utils/schemaBuilder.js';
+
+const useFormManager = ({
+  elements,
+  onSubmit,
+  onInvalidSubmit,
+  id,
+  onChange,
+  onChangeSingleValue,
+  // <-- Add this
+  outputFormat = "Json"
+}, isSubmitting, setIsSubmitting) => {
+  useEffect(() => {
+    try {
+      checkNameDuplication(elements);
+    } catch (error) {
+      console.error("Form Configuration Error:", error);
+    }
+  }, [elements]);
+  const defaultValues = useMemo(() => getDefaultValues(elements), [elements]);
+  const schema = useMemo(() => schemaBuilder(elements), [elements]);
+  const combinedChildIds = useMemo(() => getCombinedChildIds(elements), [elements]);
+  const stripCombinedChildren = useCallback((data) => {
+    if (combinedChildIds.size === 0) return data;
+    const filtered = {};
+    for (const [key, value] of Object.entries(data)) {
+      if (!combinedChildIds.has(key)) {
+        filtered[key] = value;
+      }
+    }
+    return filtered;
+  }, [combinedChildIds]);
+  const formMethods = useForm({
+    resolver: yupResolver(schema),
+    defaultValues,
+    shouldUnregister: false,
+    mode: "onSubmit",
+    reValidateMode: "onChange"
+    // ... (defaultValues logic remains the same)
+  });
+  const onValidSubmit = useCallback(
+    (rawData) => {
+      const data = stripCombinedChildren(rawData);
+      if (outputFormat === "FormData") {
+        const formData = new FormData();
+        for (const [key, value] of Object.entries(data)) {
+          if (Array.isArray(value)) {
+            if (value.length === 1 && value[0] instanceof File) {
+              formData.append(key, value[0]);
+            } else {
+              value.forEach((item) => {
+                if (item instanceof File) {
+                  formData.append(`${key}[]`, item);
+                } else if (typeof item === "number" || typeof item === "string") {
+                  formData.append(`${key}[]`, item.toString());
+                } else {
+                  formData.append(`${key}[]`, JSON.stringify(item));
+                }
+              });
+            }
+          } else {
+            if (value instanceof File) {
+              formData.append(key, value);
+            } else if (typeof value === "number" || typeof value === "string") {
+              formData.append(key, value.toString());
+            } else {
+              formData.append(key, JSON.stringify(value));
+            }
+          }
+        }
+        onSubmit && onSubmit(formData, setIsSubmitting, formMethods);
+      } else {
+        onSubmit && onSubmit(data, setIsSubmitting, formMethods);
+      }
+    },
+    [outputFormat, onSubmit, setIsSubmitting, formMethods, stripCombinedChildren]
+  );
+  const handleSubmitWrapper = useCallback(() => {
+    formMethods.handleSubmit(onValidSubmit, (errors) => {
+      setIsSubmitting(false);
+      onInvalidSubmit?.(errors);
+    })();
+  }, [formMethods, onValidSubmit, setIsSubmitting, onInvalidSubmit]);
+  function getValueByPath(obj, path) {
+    return path.split(".").reduce((acc, key) => {
+      if (acc === void 0 || acc === null) return void 0;
+      return acc[key];
+    }, obj);
+  }
+  useEffect(() => {
+    const subscription = formMethods.watch((currentValues, { name, type }) => {
+      onChange?.(stripCombinedChildren(currentValues));
+      if (onChangeSingleValue && name && type === "change") {
+        if (!combinedChildIds.has(name)) {
+          const value = getValueByPath(currentValues, name);
+          onChangeSingleValue(name, value);
+        }
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [formMethods.watch, onChange, onChangeSingleValue, stripCombinedChildren, combinedChildIds]);
+  return {
+    formMethods,
+    // The original object for FormProvider
+    isSubmitting,
+    setIsSubmitting,
+    handleSubmit: handleSubmitWrapper
+    // The wrapped function for our UI
+  };
+};
+
+export { useFormManager };
+//# sourceMappingURL=useFormManager.js.map

package/form-renderer/hooks/useFormManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormManager.js","sources":["../../../../src/form-renderer/hooks/useFormManager.ts"],"sourcesContent":["// hooks/useFormManager.ts\n\nimport {type Dispatch, type SetStateAction, useCallback, useEffect, useMemo} from 'react';\nimport {type FieldValues, type SubmitHandler, useForm, type UseFormReturn, type DefaultValues} from 'react-hook-form';\nimport {yupResolver} from '@hookform/resolvers/yup';\nimport {checkNameDuplication, getCombinedChildIds, getDefaultValues, schemaBuilder} from '../utils';\nimport type {IFormComponent} from '@lmb-it/kitsconcerto-types';\n\n// --- Using Your Provided Type Definitions ---\n\n\n// --- CORRECTED RETURN TYPE ---\nexport interface UseFormManagerReturn<T extends FieldValues> {\n    /**\n     * The original, unmodified methods returned from react-hook-form's useForm hook.\n     * This is what gets passed to the FormProvider.\n     */\n    formMethods: UseFormReturn<T>;\n    /**\n     * Our custom loading state for the submit button.\n     */\n    isSubmitting: boolean;\n    /**\n     * Our wrapped submit handler that manages the isSubmitting state.\n     * This is what the <form> element's onSubmit will call.\n     */\n    handleSubmit: () => void;\n\n    setIsSubmitting: Dispatch<SetStateAction<boolean>>\n}\n\n// A helper utility to check for valid URLs, as used in your original getDefaultValues.\nconst isValidURL = (urlString: string): boolean => {\n    try {\n        const url = new URL(urlString);\n        return ['http:', 'https:'].includes(url.protocol);\n    } catch (_) {\n        return false;\n    }\n};\n\nexport const useFormManager = <T extends FieldValues>({\n                                                          elements,\n                                                          onSubmit,\n                                                          onInvalidSubmit, id,\n                                                          onChange,\n                                                          onChangeSingleValue, // <-- Add this\n                                                          outputFormat = 'Json'\n                                                      }: IFormComponent<T>, isSubmitting: boolean, setIsSubmitting: Dispatch<SetStateAction<boolean>>): UseFormManagerReturn<T> => {\n\n\n    // 1. Check for duplicate names on mount and when elements change.\n    useEffect(() => {\n        try {\n            checkNameDuplication(elements);\n        } catch (error) {\n            console.error(\"Form Configuration Error:\", error);\n        }\n    }, [elements]);\n\n    // 2. Generate the default values object, memoized for performance.\n    const defaultValues = useMemo(() => getDefaultValues(elements), [elements]);\n\n    const schema = useMemo(() => schemaBuilder(elements, id!), [elements]);\n\n    // 2b. Collect Combined children IDs to exclude from output data.\n    const combinedChildIds = useMemo(() => getCombinedChildIds(elements), [elements]);\n\n    const stripCombinedChildren = useCallback((data: Record<string, any>) => {\n        if (combinedChildIds.size === 0) return data;\n        const filtered: Record<string, any> = {};\n        for (const [key, value] of Object.entries(data)) {\n            if (!combinedChildIds.has(key)) {\n                filtered[key] = value;\n            }\n        }\n        return filtered;\n    }, [combinedChildIds]);\n\n    // console.log(id, elements, schema)\n\n    // console.log(schema.describe())\n    // This is the original, unmodified object from react-hook-form\n    const formMethods = useForm<T>({\n        resolver: yupResolver(schema),\n        defaultValues: defaultValues as DefaultValues<T>,\n        shouldUnregister: false,\n        mode: \"onSubmit\",\n        reValidateMode: \"onChange\",\n        // ... (defaultValues logic remains the same)\n    });\n\n\n    const onValidSubmit: SubmitHandler<any> = useCallback(\n        (rawData) => {\n            const data = stripCombinedChildren(rawData);\n            if (outputFormat === \"FormData\") {\n                const formData = new FormData();\n                for (const [key, value] of Object.entries(data)) {\n                    if (Array.isArray(value)) {\n                        if (value.length === 1 && value[0] instanceof File) {\n                            formData.append(key, value[0]);\n                        } else {\n                            value.forEach((item) => {\n                                if (item instanceof File) {\n                                    formData.append(`${key}[]`, item);\n                                } else if (\n                                    typeof item === \"number\" ||\n                                    typeof item === \"string\"\n                                ) {\n                                    formData.append(`${key}[]`, item.toString());\n                                } else {\n                                    formData.append(`${key}[]`, JSON.stringify(item));\n                                }\n                            });\n                        }\n                    } else {\n                        if (value instanceof File) {\n                            formData.append(key, value);\n                        } else if (\n                            typeof value === \"number\" ||\n                            typeof value === \"string\"\n                        ) {\n                            formData.append(key, value.toString());\n                        } else {\n                            formData.append(key, JSON.stringify(value));\n                        }\n                    }\n                }\n\n                onSubmit && onSubmit(formData, setIsSubmitting, formMethods);\n            } else {\n                onSubmit && onSubmit(data, setIsSubmitting, formMethods);\n            }\n        },\n        [outputFormat, onSubmit, setIsSubmitting, formMethods, stripCombinedChildren],\n    );\n\n\n    // Our custom wrapper function\n    const handleSubmitWrapper = useCallback(() => {\n        // We call the ORIGINAL handleSubmit from formMethods here\n        formMethods.handleSubmit(onValidSubmit, (errors) => {\n            setIsSubmitting(false);\n            onInvalidSubmit?.(errors);\n        })();\n    }, [formMethods, onValidSubmit, setIsSubmitting, onInvalidSubmit]);\n\n    function getValueByPath(obj: any, path: string) {\n        return path.split(\".\").reduce((acc, key) => {\n            if (acc === undefined || acc === null) return undefined;\n            return acc[key];\n        }, obj);\n    }\n\n    // This useEffect hook handles both global and single-value change events.\n    useEffect(() => {\n        const subscription = formMethods.watch((currentValues, {name, type}) => {\n            // 1. Trigger the global onChange callback with all values (excluding Combined children).\n            onChange?.(stripCombinedChildren(currentValues as { [s: string]: any }));\n\n            // 2. Trigger the single value change callback (skip Combined child fields).\n            if (onChangeSingleValue && name && type === 'change') {\n                if (!combinedChildIds.has(name)) {\n                    const value = getValueByPath(currentValues, name);\n                    onChangeSingleValue(name, value);\n                }\n            }\n        });\n        return () => subscription.unsubscribe();\n    }, [formMethods.watch, onChange, onChangeSingleValue, stripCombinedChildren, combinedChildIds]);\n\n    // Return the two concerns separately\n    return {\n        formMethods, // The original object for FormProvider\n        isSubmitting,\n        setIsSubmitting,\n        handleSubmit: handleSubmitWrapper, // The wrapped function for our UI\n    };\n};\n"],"names":[],"mappings":"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"}