@lmb-it/kitsconcerto-native 0.1.236

package/form/selects/hooks/useTreeBuild.js

@@ -0,0 +1,84 @@
+import { useState, useRef, useEffect, useImperativeHandle, useCallback } from 'react';
+import { buildTree } from '../../../data/TreeView/utils.js';
+import { useSelect } from '../SelectContext.js';
+
+const collectNonSelectableKeys = (nodes) => {
+  const keys = /* @__PURE__ */ new Set();
+  for (const node of nodes) {
+    if (node.selectable === false && node.key != null) {
+      keys.add(String(node.key));
+    }
+    if (node.children?.length) {
+      for (const k of collectNonSelectableKeys(node.children)) {
+        keys.add(k);
+      }
+    }
+  }
+  return keys;
+};
+const useTreeBuild = (props) => {
+  const { isStructured, ref } = props;
+  const { list, onChange, selectedValue } = useSelect();
+  const [nodes, setNodes] = useState([]);
+  const [value, setValue] = useState(null);
+  const nodesMapping = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    if (selectedValue != null) {
+      setValue(selectedValue);
+    }
+  }, [selectedValue]);
+  const expandNode = (node, _expandedKeys) => {
+    if (node.children && node.children.length) {
+      if (node.key) _expandedKeys[node.key] = true;
+      for (const child of node.children) {
+        expandNode(child, _expandedKeys);
+      }
+    }
+  };
+  const setNodesMapping = (newMap) => {
+    nodesMapping.current = newMap;
+    setNodes(buildTree(nodesMapping.current, true));
+  };
+  const build = () => {
+    if (isStructured) {
+      setNodes(list);
+      return;
+    }
+    const mapping = new Map(
+      list.filter((item) => item.value != null).map((item) => [String(item.value), item])
+    );
+    setNodesMapping(mapping);
+  };
+  useEffect(() => {
+    build();
+  }, [list]);
+  useImperativeHandle(ref, () => ({}));
+  const nonSelectableKeys = useCallback(() => collectNonSelectableKeys(nodes), [nodes]);
+  const handleChange = (e) => {
+    setValue(e.value);
+    if (e.value && typeof e.value === "object" && !Array.isArray(e.value)) {
+      const blocked = nonSelectableKeys();
+      if (blocked.size > 0) {
+        const filtered = Object.fromEntries(
+          Object.entries(e.value).filter(([key]) => !blocked.has(key))
+        );
+        onChange && onChange({ ...e, value: filtered });
+        return;
+      }
+    }
+    onChange && onChange(e);
+  };
+  return {
+    nodes,
+    value,
+    setValue,
+    expandNode,
+    handleChange,
+    list,
+    onChange,
+    selectedValue
+  };
+};
+
+export { useTreeBuild };
+//# sourceMappingURL=useTreeBuild.js.map

package/form/selects/hooks/useTreeBuild.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTreeBuild.js","sources":["../../../../../src/form/selects/hooks/useTreeBuild.ts"],"sourcesContent":["import { useCallback, useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { ITreeItem, TreeNode } from \"@lmb-it/kitsconcerto-types\";\nimport { buildTree } from \"../../../data/TreeView/utils\";\nimport { useSelect } from \"../SelectContext\";\n\n/** Collect keys of nodes where selectable === false */\nconst collectNonSelectableKeys = (nodes: TreeNode[]): Set<string> => {\n    const keys = new Set<string>();\n    for (const node of nodes) {\n        if (node.selectable === false && node.key != null) {\n            keys.add(String(node.key));\n        }\n        if (node.children?.length) {\n            for (const k of collectNonSelectableKeys(node.children)) {\n                keys.add(k);\n            }\n        }\n    }\n    return keys;\n};\n\nexport interface TreeBuildProps {\n    isStructured?: boolean;\n    ref?: any;\n}\n\n/**\n * Shared hook for TreeSelect web & native.\n *\n * Manages: nodes state, value state, tree building from flat/structured data,\n * expandNode helper, and selectedValue sync.\n */\nexport const useTreeBuild = <T = any>(props: TreeBuildProps) => {\n    const { isStructured, ref } = props;\n\n    const { list, onChange, selectedValue } = useSelect();\n\n    const [nodes, setNodes] = useState<TreeNode<ITreeItem<T>>[]>([]);\n    const [value, setValue] = useState<any>(null);\n\n    const nodesMapping = useRef<Map<string | number, ITreeItem<T>>>(new Map());\n\n    useEffect(() => {\n        if (selectedValue != null) {\n            setValue(selectedValue);\n        }\n    }, [selectedValue]);\n\n    const expandNode = (\n        node: TreeNode,\n        _expandedKeys: { [x: string]: boolean },\n    ) => {\n        if (node.children && node.children.length) {\n            if (node.key) _expandedKeys[node.key] = true;\n            for (const child of node.children) {\n                expandNode(child, _expandedKeys);\n            }\n        }\n    };\n\n    const setNodesMapping = (newMap: Map<string | number, ITreeItem<T>>) => {\n        nodesMapping.current = newMap;\n        setNodes(buildTree(nodesMapping.current, true));\n    };\n\n    const build = () => {\n        if (isStructured) {\n            setNodes(list as TreeNode<ITreeItem<T>>[]);\n            return;\n        }\n        const mapping = new Map(\n            list\n                .filter((item) => item.value != null)\n                .map((item) => [String(item.value), item]),\n        );\n        setNodesMapping(mapping);\n    };\n\n    useEffect(() => {\n        build();\n    }, [list]);\n\n    useImperativeHandle(ref, () => ({}));\n\n    const nonSelectableKeys = useCallback(() => collectNonSelectableKeys(nodes), [nodes]);\n\n    const handleChange = (e: any) => {\n        // Store full value for PrimeReact display (includes parent keys for checkbox cascade)\n        setValue(e.value);\n\n        // For checkbox mode (object value), strip non-selectable node keys before emitting to form\n        if (e.value && typeof e.value === 'object' && !Array.isArray(e.value)) {\n            const blocked = nonSelectableKeys();\n            if (blocked.size > 0) {\n                const filtered = Object.fromEntries(\n                    Object.entries(e.value).filter(([key]) => !blocked.has(key))\n                );\n                onChange && onChange({ ...e, value: filtered });\n                return;\n            }\n        }\n        onChange && onChange(e);\n    };\n\n    return {\n        nodes,\n        value,\n        setValue,\n        expandNode,\n        handleChange,\n        list,\n        onChange,\n        selectedValue,\n    };\n};\n"],"names":[],"mappings":"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"}

package/form/selects/index.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var SelectContext = require('./SelectContext.cjs');
+
+const KitsAutoComplete = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.default, { shape: "autocomplete", ...props });
+};
+const KitsDropdown = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.default, { shape: "dropdown", ...props });
+};
+const KitsMultiSelect = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.default, { shape: "multiselect", ...props });
+};
+const KitsTreeSelect = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.default, { shape: "treeSelect", ...props });
+};
+const KitsListBox = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.default, { shape: "listBox", ...props });
+};
+const KitsCascadeSelect = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.default, { shape: "cascade", ...props });
+};
+
+exports.KitsAutoComplete = KitsAutoComplete;
+exports.KitsCascadeSelect = KitsCascadeSelect;
+exports.KitsDropdown = KitsDropdown;
+exports.KitsListBox = KitsListBox;
+exports.KitsMultiSelect = KitsMultiSelect;
+exports.KitsTreeSelect = KitsTreeSelect;
+exports.MultiSelect = KitsMultiSelect;
+exports.TreeSelect = KitsTreeSelect;
+//# sourceMappingURL=index.cjs.map

package/form/selects/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/form/selects/index.tsx"],"sourcesContent":["import type {FunctionComponent} from \"react\";\nimport type {IAutoCompleteElement, IDropdownSelect, IListBoxSelect, ICascadeSelect, IMultiSelect, ITreeSelect} from \"@lmb-it/kitsconcerto-types\";\nimport FormSelect from \"./SelectContext\";\n\n\nexport const KitsAutoComplete: FunctionComponent<IAutoCompleteElement> = props => {\n    return <FormSelect shape={'autocomplete'} {...props} />\n}\n\nexport const KitsDropdown: FunctionComponent<IDropdownSelect> = props => {\n    return <FormSelect shape={'dropdown'} {...props} />\n}\n\n\nexport const KitsMultiSelect: FunctionComponent<IMultiSelect> = props => {\n    return <FormSelect shape={'multiselect'} {...props} />\n}\nexport { KitsMultiSelect as MultiSelect };\n\nexport const KitsTreeSelect: FunctionComponent<ITreeSelect> = props => {\n    return <FormSelect shape={'treeSelect'} {...props} />\n}\nexport { KitsTreeSelect as TreeSelect };\n\nexport const KitsListBox: FunctionComponent<IListBoxSelect> = props => {\n    return <FormSelect shape={'listBox'} {...props} />\n}\n\nexport const KitsCascadeSelect: FunctionComponent<ICascadeSelect> = props => {\n    return <FormSelect shape={'cascade'} {...props} />\n}\n"],"names":["jsx","FormSelect"],"mappings":";;;;;AAKO,MAAM,mBAA4D,CAAA,KAAA,KAAS;AAC9E,EAAA,uBAAOA,cAAA,CAACC,qBAAA,EAAA,EAAW,KAAA,EAAO,cAAA,EAAiB,GAAG,KAAA,EAAO,CAAA;AACzD;AAEO,MAAM,eAAmD,CAAA,KAAA,KAAS;AACrE,EAAA,uBAAOD,cAAA,CAACC,qBAAA,EAAA,EAAW,KAAA,EAAO,UAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AACrD;AAGO,MAAM,kBAAmD,CAAA,KAAA,KAAS;AACrE,EAAA,uBAAOD,cAAA,CAACC,qBAAA,EAAA,EAAW,KAAA,EAAO,aAAA,EAAgB,GAAG,KAAA,EAAO,CAAA;AACxD;AAGO,MAAM,iBAAiD,CAAA,KAAA,KAAS;AACnE,EAAA,uBAAOD,cAAA,CAACC,qBAAA,EAAA,EAAW,KAAA,EAAO,YAAA,EAAe,GAAG,KAAA,EAAO,CAAA;AACvD;AAGO,MAAM,cAAiD,CAAA,KAAA,KAAS;AACnE,EAAA,uBAAOD,cAAA,CAACC,qBAAA,EAAA,EAAW,KAAA,EAAO,SAAA,EAAY,GAAG,KAAA,EAAO,CAAA;AACpD;AAEO,MAAM,oBAAuD,CAAA,KAAA,KAAS;AACzE,EAAA,uBAAOD,cAAA,CAACC,qBAAA,EAAA,EAAW,KAAA,EAAO,SAAA,EAAY,GAAG,KAAA,EAAO,CAAA;AACpD;;;;;;;;;;;"}

package/form/selects/index.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import FormSelect from './SelectContext.js';
+
+const KitsAutoComplete = (props) => {
+  return /* @__PURE__ */ jsx(FormSelect, { shape: "autocomplete", ...props });
+};
+const KitsDropdown = (props) => {
+  return /* @__PURE__ */ jsx(FormSelect, { shape: "dropdown", ...props });
+};
+const KitsMultiSelect = (props) => {
+  return /* @__PURE__ */ jsx(FormSelect, { shape: "multiselect", ...props });
+};
+const KitsTreeSelect = (props) => {
+  return /* @__PURE__ */ jsx(FormSelect, { shape: "treeSelect", ...props });
+};
+const KitsListBox = (props) => {
+  return /* @__PURE__ */ jsx(FormSelect, { shape: "listBox", ...props });
+};
+const KitsCascadeSelect = (props) => {
+  return /* @__PURE__ */ jsx(FormSelect, { shape: "cascade", ...props });
+};
+
+export { KitsAutoComplete, KitsCascadeSelect, KitsDropdown, KitsListBox, KitsMultiSelect, KitsTreeSelect, KitsMultiSelect as MultiSelect, KitsTreeSelect as TreeSelect };
+//# sourceMappingURL=index.js.map

package/form/selects/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/form/selects/index.tsx"],"sourcesContent":["import type {FunctionComponent} from \"react\";\nimport type {IAutoCompleteElement, IDropdownSelect, IListBoxSelect, ICascadeSelect, IMultiSelect, ITreeSelect} from \"@lmb-it/kitsconcerto-types\";\nimport FormSelect from \"./SelectContext\";\n\n\nexport const KitsAutoComplete: FunctionComponent<IAutoCompleteElement> = props => {\n    return <FormSelect shape={'autocomplete'} {...props} />\n}\n\nexport const KitsDropdown: FunctionComponent<IDropdownSelect> = props => {\n    return <FormSelect shape={'dropdown'} {...props} />\n}\n\n\nexport const KitsMultiSelect: FunctionComponent<IMultiSelect> = props => {\n    return <FormSelect shape={'multiselect'} {...props} />\n}\nexport { KitsMultiSelect as MultiSelect };\n\nexport const KitsTreeSelect: FunctionComponent<ITreeSelect> = props => {\n    return <FormSelect shape={'treeSelect'} {...props} />\n}\nexport { KitsTreeSelect as TreeSelect };\n\nexport const KitsListBox: FunctionComponent<IListBoxSelect> = props => {\n    return <FormSelect shape={'listBox'} {...props} />\n}\n\nexport const KitsCascadeSelect: FunctionComponent<ICascadeSelect> = props => {\n    return <FormSelect shape={'cascade'} {...props} />\n}\n"],"names":[],"mappings":";;;AAKO,MAAM,mBAA4D,CAAA,KAAA,KAAS;AAC9E,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,cAAA,EAAiB,GAAG,KAAA,EAAO,CAAA;AACzD;AAEO,MAAM,eAAmD,CAAA,KAAA,KAAS;AACrE,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,UAAA,EAAa,GAAG,KAAA,EAAO,CAAA;AACrD;AAGO,MAAM,kBAAmD,CAAA,KAAA,KAAS;AACrE,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,aAAA,EAAgB,GAAG,KAAA,EAAO,CAAA;AACxD;AAGO,MAAM,iBAAiD,CAAA,KAAA,KAAS;AACnE,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,YAAA,EAAe,GAAG,KAAA,EAAO,CAAA;AACvD;AAGO,MAAM,cAAiD,CAAA,KAAA,KAAS;AACnE,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,SAAA,EAAY,GAAG,KAAA,EAAO,CAAA;AACpD;AAEO,MAAM,oBAAuD,CAAA,KAAA,KAAS;AACzE,EAAA,uBAAO,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,SAAA,EAAY,GAAG,KAAA,EAAO,CAAA;AACpD;;;;"}

package/form-renderer/Form.cjs

@@ -0,0 +1,140 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+require('yup');
+require('lodash');
+var useFormManager = require('./hooks/useFormManager.cjs');
+var SubmitButton = require('./components/SubmitButton.cjs');
+var index_native = require('./components/FormRenderer/index.cjs');
+var index = require('../layout/Flex/index.cjs');
+
+const Form = ({
+  elements,
+  onSubmit,
+  onInvalidSubmit,
+  outputFormat = "Json",
+  id = "go-markets-form",
+  grid,
+  onChangeSingleValue,
+  onChange,
+  submitButtonProps,
+  onMount,
+  ref,
+  children,
+  animation,
+  style
+}) => {
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const { formMethods, handleSubmit } = useFormManager.useFormManager({
+    elements,
+    onSubmit,
+    onInvalidSubmit,
+    outputFormat,
+    onChangeSingleValue,
+    onChange,
+    id
+  }, isSubmitting, setIsSubmitting);
+  const [focusedField, setFocusedField] = React.useState("");
+  const { getValues, control, formState } = formMethods;
+  React.useEffect(() => {
+    onMount && onMount(formMethods);
+  }, []);
+  function createFormAppliers(deps) {
+    const { setValue, reset, getValues: getValues2 } = deps;
+    const setValues = (patch, opts = { shouldDirty: true }) => {
+      const walk = (base, v) => {
+        if (v !== null && typeof v === "object" && !Array.isArray(v)) {
+          for (const [k, vv] of Object.entries(v)) {
+            walk(base ? `${base}.${k}` : k, vv);
+          }
+        } else {
+          setValue(base, v, opts);
+        }
+      };
+      walk("", patch);
+    };
+    const mergeReset = (patch) => {
+      if (!reset || !getValues2) return;
+      const cur = getValues2();
+      const deepMerge = (a, b) => {
+        const out = Array.isArray(a) ? [...a] : { ...a };
+        for (const k of Object.keys(b ?? {})) {
+          const bv = b[k];
+          out[k] = bv && typeof bv === "object" && !Array.isArray(bv) ? deepMerge(out[k] ?? {}, bv) : bv;
+        }
+        return out;
+      };
+      reset(deepMerge(cur, patch), {
+        keepErrors: true,
+        keepDirty: true,
+        keepTouched: true,
+        keepSubmitCount: true
+      });
+    };
+    return { setValues, mergeReset };
+  }
+  const IRefReturn = React.useMemo(() => {
+    return {
+      id,
+      setIsSubmitting,
+      ...formMethods,
+      ...createFormAppliers({
+        setValue: formMethods.setValue,
+        reset: formMethods.reset,
+        getValues: formMethods.getValues
+      }),
+      onFormSubmit: handleSubmit
+    };
+  }, [handleSubmit, formMethods, setIsSubmitting, id]);
+  React.useImperativeHandle(ref, () => {
+    return IRefReturn;
+  }, [formState]);
+  return (
+    // Pass ONLY the original, unmodified formMethods to the provider. This fixes the error.
+    /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.FormProvider, { ...formMethods, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      index.default,
+      {
+        id,
+        w: "full",
+        gap: 10,
+        flexDirection: "column",
+        position: "relative",
+        entering: animation?.entering,
+        exiting: animation?.exiting,
+        animationDuration: animation?.animationDuration,
+        animationDelay: animation?.animationDelay,
+        ...style || {},
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            index_native.FormRenderer,
+            {
+              elements,
+              control,
+              grid,
+              getValues,
+              focusedField,
+              setFocusedField
+            }
+          ),
+          typeof children === "function" ? children(IRefReturn) : children,
+          submitButtonProps != "none" && /* @__PURE__ */ jsxRuntime.jsx(index.default, { justifyContent: "flex-end", w: "full", children: /* @__PURE__ */ jsxRuntime.jsx(
+            SubmitButton.SubmitButton,
+            {
+              submitButtonProps,
+              formMethods,
+              isSubmitting,
+              handleSubmit
+            }
+          ) })
+        ]
+      }
+    ) })
+  );
+};
+
+exports.default = Form;
+//# sourceMappingURL=Form.cjs.map

package/form-renderer/Form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.cjs","sources":["../../../src/form-renderer/Form.tsx"],"sourcesContent":["// Form/Form.tsx\n\nimport React, {useEffect, useImperativeHandle, useMemo, useState} from 'react';\nimport {\n    type DeepPartial,\n    type FieldValues,\n    FormProvider,\n    type UseFormReset,\n    type UseFormSetValue\n} from 'react-hook-form';\nimport {useFormManager} from './hooks';\nimport type {IFormComponent, IUseFormReturn, SetManyOpts} from \"@lmb-it/kitsconcerto-types\";\nimport {SubmitButton} from \"./components/SubmitButton\";\nimport {FormRenderer} from \"./components/FormRenderer\";\nimport {Flex} from \"../_compat\";\n\nconst Form = <T extends FieldValues>({\n                                         elements,\n                                         onSubmit,\n                                         onInvalidSubmit,\n                                         outputFormat = 'Json',\n                                         id = \"go-markets-form\",\n                                         grid, onChangeSingleValue,\n                                         onChange,\n                                         submitButtonProps,\n                                         onMount,\n                                         ref,\n                                         children,\n                                         animation,\n                                         style\n                                     }: IFormComponent<T>) => {\n\n    const [isSubmitting, setIsSubmitting] = useState(false);\n\n    // Destructure the new, corrected return shape from the hook\n    const {formMethods, handleSubmit} = useFormManager({\n        elements,\n        onSubmit,\n        onInvalidSubmit,\n        outputFormat,\n        onChangeSingleValue,\n        onChange, id\n    }, isSubmitting, setIsSubmitting);\n\n    const [focusedField, setFocusedField] = useState<string>('');\n    // Destructure the specific methods we need for the renderer from the original formMethods\n    const {getValues, control, formState} = formMethods;\n\n    useEffect(() => {\n        onMount && onMount(formMethods)\n    }, []);\n\n    /** Factory. Feed setValue/reset from your useFormManager. */\n    function createFormAppliers<T extends FieldValues>(deps: {\n        setValue: UseFormSetValue<T>;\n        reset?: UseFormReset<T>;\n        getValues?: () => T;\n    }) {\n        const {setValue, reset, getValues} = deps;\n\n        /** Patch many fields (deep paths supported). */\n        const setValues = (patch: DeepPartial<T>, opts: SetManyOpts = {shouldDirty: true}) => {\n            const walk = (base: string, v: unknown) => {\n                if (v !== null && typeof v === \"object\" && !Array.isArray(v)) {\n                    for (const [k, vv] of Object.entries(v as Record<string, unknown>)) {\n                        walk(base ? `${base}.${k}` : k, vv);\n                    }\n                } else {\n                    setValue(base as any, v as any, opts);\n                }\n            };\n            walk(\"\", patch as any);\n        };\n\n        /** Merge patch into current values using reset (fast for large updates). */\n        const mergeReset = (patch: DeepPartial<T>) => {\n            if (!reset || !getValues) return;\n            const cur = getValues();\n            const deepMerge = (a: any, b: any): any => {\n                const out: any = Array.isArray(a) ? [...a] : {...a};\n                for (const k of Object.keys(b ?? {})) {\n                    const bv = (b as any)[k];\n                    out[k] =\n                        bv && typeof bv === \"object\" && !Array.isArray(bv)\n                            ? deepMerge(out[k] ?? {}, bv)\n                            : bv;\n                }\n                return out;\n            };\n            reset(deepMerge(cur, patch), {\n                keepErrors: true,\n                keepDirty: true,\n                keepTouched: true,\n                keepSubmitCount: true,\n            });\n        };\n\n        return {setValues, mergeReset};\n    }\n\n    const IRefReturn: IUseFormReturn<T> = useMemo(() => {\n        return {\n            id,\n            setIsSubmitting,\n            ...formMethods,\n            ...createFormAppliers({\n                setValue: formMethods.setValue,\n                reset: formMethods.reset,\n                getValues: formMethods.getValues,\n            }),\n            onFormSubmit: handleSubmit,\n        }\n    }, [handleSubmit, formMethods, setIsSubmitting, id])\n    useImperativeHandle(ref, () => {\n        return IRefReturn;\n    }, [formState]);\n\n\n\n    return (\n        // Pass ONLY the original, unmodified formMethods to the provider. This fixes the error.\n        <FormProvider {...formMethods}>\n            <Flex\n                id={id}\n                w={\"full\"}\n                gap={10}\n                flexDirection={\"column\"}\n                position={'relative'}\n                entering={animation?.entering}\n                exiting={animation?.exiting}\n                animationDuration={animation?.animationDuration}\n                animationDelay={animation?.animationDelay}\n                {...(style || {})}>\n\n\n                <FormRenderer\n                    elements={elements}\n                    control={control}\n                    grid={grid}\n                    getValues={getValues}\n                    focusedField={focusedField}\n                    setFocusedField={setFocusedField}\n                />\n\n                {typeof children === \"function\"\n                    ? children(IRefReturn)\n                    : children}\n\n                {submitButtonProps != \"none\" && (\n                    <Flex justifyContent=\"flex-end\" w=\"full\">\n                        <SubmitButton\n                            submitButtonProps={submitButtonProps}\n                            formMethods={formMethods}\n                            isSubmitting={isSubmitting}\n                            handleSubmit={handleSubmit}\n                        />\n                    </Flex>\n                )}\n            </Flex>\n        </FormProvider>\n    );\n};\n\nexport default Form;\n"],"names":["useState","useFormManager","useEffect","getValues","useMemo","useImperativeHandle","jsx","FormProvider","jsxs","Flex","FormRenderer","SubmitButton"],"mappings":"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"}

package/form-renderer/Form.js

@@ -0,0 +1,136 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo, useImperativeHandle } from 'react';
+import { FormProvider } from 'react-hook-form';
+import 'yup';
+import 'lodash';
+import { useFormManager } from './hooks/useFormManager.js';
+import { SubmitButton } from './components/SubmitButton.js';
+import { FormRenderer } from './components/FormRenderer/index.js';
+import Flex from '../layout/Flex/index.js';
+
+const Form = ({
+  elements,
+  onSubmit,
+  onInvalidSubmit,
+  outputFormat = "Json",
+  id = "go-markets-form",
+  grid,
+  onChangeSingleValue,
+  onChange,
+  submitButtonProps,
+  onMount,
+  ref,
+  children,
+  animation,
+  style
+}) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { formMethods, handleSubmit } = useFormManager({
+    elements,
+    onSubmit,
+    onInvalidSubmit,
+    outputFormat,
+    onChangeSingleValue,
+    onChange,
+    id
+  }, isSubmitting, setIsSubmitting);
+  const [focusedField, setFocusedField] = useState("");
+  const { getValues, control, formState } = formMethods;
+  useEffect(() => {
+    onMount && onMount(formMethods);
+  }, []);
+  function createFormAppliers(deps) {
+    const { setValue, reset, getValues: getValues2 } = deps;
+    const setValues = (patch, opts = { shouldDirty: true }) => {
+      const walk = (base, v) => {
+        if (v !== null && typeof v === "object" && !Array.isArray(v)) {
+          for (const [k, vv] of Object.entries(v)) {
+            walk(base ? `${base}.${k}` : k, vv);
+          }
+        } else {
+          setValue(base, v, opts);
+        }
+      };
+      walk("", patch);
+    };
+    const mergeReset = (patch) => {
+      if (!reset || !getValues2) return;
+      const cur = getValues2();
+      const deepMerge = (a, b) => {
+        const out = Array.isArray(a) ? [...a] : { ...a };
+        for (const k of Object.keys(b ?? {})) {
+          const bv = b[k];
+          out[k] = bv && typeof bv === "object" && !Array.isArray(bv) ? deepMerge(out[k] ?? {}, bv) : bv;
+        }
+        return out;
+      };
+      reset(deepMerge(cur, patch), {
+        keepErrors: true,
+        keepDirty: true,
+        keepTouched: true,
+        keepSubmitCount: true
+      });
+    };
+    return { setValues, mergeReset };
+  }
+  const IRefReturn = useMemo(() => {
+    return {
+      id,
+      setIsSubmitting,
+      ...formMethods,
+      ...createFormAppliers({
+        setValue: formMethods.setValue,
+        reset: formMethods.reset,
+        getValues: formMethods.getValues
+      }),
+      onFormSubmit: handleSubmit
+    };
+  }, [handleSubmit, formMethods, setIsSubmitting, id]);
+  useImperativeHandle(ref, () => {
+    return IRefReturn;
+  }, [formState]);
+  return (
+    // Pass ONLY the original, unmodified formMethods to the provider. This fixes the error.
+    /* @__PURE__ */ jsx(FormProvider, { ...formMethods, children: /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        id,
+        w: "full",
+        gap: 10,
+        flexDirection: "column",
+        position: "relative",
+        entering: animation?.entering,
+        exiting: animation?.exiting,
+        animationDuration: animation?.animationDuration,
+        animationDelay: animation?.animationDelay,
+        ...style || {},
+        children: [
+          /* @__PURE__ */ jsx(
+            FormRenderer,
+            {
+              elements,
+              control,
+              grid,
+              getValues,
+              focusedField,
+              setFocusedField
+            }
+          ),
+          typeof children === "function" ? children(IRefReturn) : children,
+          submitButtonProps != "none" && /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", w: "full", children: /* @__PURE__ */ jsx(
+            SubmitButton,
+            {
+              submitButtonProps,
+              formMethods,
+              isSubmitting,
+              handleSubmit
+            }
+          ) })
+        ]
+      }
+    ) })
+  );
+};
+
+export { Form as default };
+//# sourceMappingURL=Form.js.map

package/form-renderer/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../../src/form-renderer/Form.tsx"],"sourcesContent":["// Form/Form.tsx\n\nimport React, {useEffect, useImperativeHandle, useMemo, useState} from 'react';\nimport {\n    type DeepPartial,\n    type FieldValues,\n    FormProvider,\n    type UseFormReset,\n    type UseFormSetValue\n} from 'react-hook-form';\nimport {useFormManager} from './hooks';\nimport type {IFormComponent, IUseFormReturn, SetManyOpts} from \"@lmb-it/kitsconcerto-types\";\nimport {SubmitButton} from \"./components/SubmitButton\";\nimport {FormRenderer} from \"./components/FormRenderer\";\nimport {Flex} from \"../_compat\";\n\nconst Form = <T extends FieldValues>({\n                                         elements,\n                                         onSubmit,\n                                         onInvalidSubmit,\n                                         outputFormat = 'Json',\n                                         id = \"go-markets-form\",\n                                         grid, onChangeSingleValue,\n                                         onChange,\n                                         submitButtonProps,\n                                         onMount,\n                                         ref,\n                                         children,\n                                         animation,\n                                         style\n                                     }: IFormComponent<T>) => {\n\n    const [isSubmitting, setIsSubmitting] = useState(false);\n\n    // Destructure the new, corrected return shape from the hook\n    const {formMethods, handleSubmit} = useFormManager({\n        elements,\n        onSubmit,\n        onInvalidSubmit,\n        outputFormat,\n        onChangeSingleValue,\n        onChange, id\n    }, isSubmitting, setIsSubmitting);\n\n    const [focusedField, setFocusedField] = useState<string>('');\n    // Destructure the specific methods we need for the renderer from the original formMethods\n    const {getValues, control, formState} = formMethods;\n\n    useEffect(() => {\n        onMount && onMount(formMethods)\n    }, []);\n\n    /** Factory. Feed setValue/reset from your useFormManager. */\n    function createFormAppliers<T extends FieldValues>(deps: {\n        setValue: UseFormSetValue<T>;\n        reset?: UseFormReset<T>;\n        getValues?: () => T;\n    }) {\n        const {setValue, reset, getValues} = deps;\n\n        /** Patch many fields (deep paths supported). */\n        const setValues = (patch: DeepPartial<T>, opts: SetManyOpts = {shouldDirty: true}) => {\n            const walk = (base: string, v: unknown) => {\n                if (v !== null && typeof v === \"object\" && !Array.isArray(v)) {\n                    for (const [k, vv] of Object.entries(v as Record<string, unknown>)) {\n                        walk(base ? `${base}.${k}` : k, vv);\n                    }\n                } else {\n                    setValue(base as any, v as any, opts);\n                }\n            };\n            walk(\"\", patch as any);\n        };\n\n        /** Merge patch into current values using reset (fast for large updates). */\n        const mergeReset = (patch: DeepPartial<T>) => {\n            if (!reset || !getValues) return;\n            const cur = getValues();\n            const deepMerge = (a: any, b: any): any => {\n                const out: any = Array.isArray(a) ? [...a] : {...a};\n                for (const k of Object.keys(b ?? {})) {\n                    const bv = (b as any)[k];\n                    out[k] =\n                        bv && typeof bv === \"object\" && !Array.isArray(bv)\n                            ? deepMerge(out[k] ?? {}, bv)\n                            : bv;\n                }\n                return out;\n            };\n            reset(deepMerge(cur, patch), {\n                keepErrors: true,\n                keepDirty: true,\n                keepTouched: true,\n                keepSubmitCount: true,\n            });\n        };\n\n        return {setValues, mergeReset};\n    }\n\n    const IRefReturn: IUseFormReturn<T> = useMemo(() => {\n        return {\n            id,\n            setIsSubmitting,\n            ...formMethods,\n            ...createFormAppliers({\n                setValue: formMethods.setValue,\n                reset: formMethods.reset,\n                getValues: formMethods.getValues,\n            }),\n            onFormSubmit: handleSubmit,\n        }\n    }, [handleSubmit, formMethods, setIsSubmitting, id])\n    useImperativeHandle(ref, () => {\n        return IRefReturn;\n    }, [formState]);\n\n\n\n    return (\n        // Pass ONLY the original, unmodified formMethods to the provider. This fixes the error.\n        <FormProvider {...formMethods}>\n            <Flex\n                id={id}\n                w={\"full\"}\n                gap={10}\n                flexDirection={\"column\"}\n                position={'relative'}\n                entering={animation?.entering}\n                exiting={animation?.exiting}\n                animationDuration={animation?.animationDuration}\n                animationDelay={animation?.animationDelay}\n                {...(style || {})}>\n\n\n                <FormRenderer\n                    elements={elements}\n                    control={control}\n                    grid={grid}\n                    getValues={getValues}\n                    focusedField={focusedField}\n                    setFocusedField={setFocusedField}\n                />\n\n                {typeof children === \"function\"\n                    ? children(IRefReturn)\n                    : children}\n\n                {submitButtonProps != \"none\" && (\n                    <Flex justifyContent=\"flex-end\" w=\"full\">\n                        <SubmitButton\n                            submitButtonProps={submitButtonProps}\n                            formMethods={formMethods}\n                            isSubmitting={isSubmitting}\n                            handleSubmit={handleSubmit}\n                        />\n                    </Flex>\n                )}\n            </Flex>\n        </FormProvider>\n    );\n};\n\nexport default Form;\n"],"names":["getValues"],"mappings":"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"}

package/form-renderer/components/FormRenderer/index.cjs

@@ -0,0 +1,151 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var FieldWrapper_native = require('../layout/FieldWrapper.cjs');
+var useKeyboardNavigation_native = require('../../../hooks/useKeyboardNavigation.cjs');
+var index$3 = require('../fields/Select/index.cjs');
+var index$g = require('../fields/InputText/index.cjs');
+var index$f = require('../fields/InputNumber/index.cjs');
+var index$e = require('../fields/Password/index.cjs');
+var index$8 = require('../fields/Radios/index.cjs');
+var index$4 = require('../fields/Checkboxes/index.cjs');
+var index$7 = require('../fields/Textarea/index.cjs');
+var index$6 = require('../fields/FileUploader/index.cjs');
+var index$5 = require('../fields/Switch/index.cjs');
+var index$c = require('../fields/Phone/index.cjs');
+var index$1 = require('../fields/Container/index.cjs');
+var index$b = require('../fields/DateField/index.cjs');
+var index$d = require('../fields/Location/index.cjs');
+var index$a = require('../fields/ColorPicker/index.cjs');
+var index$9 = require('../fields/RadiusPicker/index.cjs');
+var index_native = require('../fields/Group/index.cjs');
+var index$2 = require('../fields/Object/index.cjs');
+var index = require('../fields/Combined/index.cjs');
+var KitsGrid = require('../../../layout/Grid/native/KitsGrid.cjs');
+var KitsGridItem = require('../../../layout/GridItem/native/KitsGridItem.cjs');
+
+const FormRenderer = ({
+  elements,
+  control,
+  getValues,
+  groupField,
+  grid = {},
+  parentPath = "",
+  focusedField,
+  setFocusedField
+}) => {
+  const [gridItemProps, setGridItemProps] = React.useState({});
+  const TEXT_TYPES = ["Text", "Email", "Number", "Password", "Phone", "Textarea"];
+  const textFieldIds = React.useMemo(() => {
+    return elements.filter((el) => TEXT_TYPES.includes(el.type)).map((el) => `${parentPath}${el.id}`);
+  }, [elements, parentPath]);
+  const keyboardNavCtx = useKeyboardNavigation_native.useKeyboardNavProvider();
+  React.useEffect(() => {
+    keyboardNavCtx.setElementsOrder(textFieldIds);
+  }, [textFieldIds]);
+  const getElement = React.useCallback((elementType) => {
+    switch (elementType) {
+      case "Email":
+      case "Text":
+        return index$g.InputText;
+      case "Number":
+        return index$f.InputNumber;
+      case "Password":
+        return index$e.Password;
+      case "Location":
+        return index$d.Location;
+      case "Phone":
+        return index$c.Phone;
+      case "Date":
+        return index$b.DateField;
+      case "ColorPicker":
+        return index$a.ColorPicker;
+      case "RadiusPicker":
+        return index$9.RadiusPicker;
+      case "Radios":
+        return index$8.Radios;
+      case "Textarea":
+        return index$7.Textarea;
+      case "Image":
+      case "File":
+        return index$6.FileUploader;
+      case "Switch":
+        return index$5.Switch;
+      case "Checkbox":
+        return index$4.Checkboxes;
+      case "Select":
+        return index$3.Select;
+      case "TreeSelect":
+        return index$3.Select;
+      case "Tags":
+        return index$3.Select;
+      case "ListBox":
+        return index$3.Select;
+      case "Multiselect":
+        return index$3.Select;
+      case "Group":
+        return index_native.Group;
+      case "Object":
+        return index$2.ObjectElement;
+      case "Container":
+        return index$1.Container;
+      case "Combined":
+        return index.CombinedElement;
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(useKeyboardNavigation_native.KeyboardNavContext.Provider, { value: keyboardNavCtx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    KitsGrid.default,
+    {
+      columns: 12,
+      rowGap: 6,
+      columnGap: 8,
+      children: elements.map((element) => {
+        const FieldComponent = getElement(element.type);
+        const elementId = `${parentPath}${element.id}`;
+        const resolvedElement = elementId !== element.id ? { ...element, id: elementId } : element;
+        if (!FieldComponent) {
+          console.warn(`No component found for element type: "${resolvedElement.type}"`);
+          return null;
+        }
+        const colSpan = parseInt(gridItemProps[elementId] ?? "12", 10);
+        return /* @__PURE__ */ jsxRuntime.jsx(KitsGridItem.default, { id: elementId, colSpan, children: /* @__PURE__ */ jsxRuntime.jsx(
+          FieldWrapper_native.FieldWrapper,
+          {
+            element: resolvedElement,
+            control,
+            grid,
+            groupField,
+            getValues,
+            focusedField,
+            setFocusedField,
+            onGridChange: (value) => {
+              if (value != gridItemProps[elementId]) {
+                setGridItemProps((prevState) => ({
+                  ...prevState,
+                  [elementId]: value
+                }));
+              }
+            },
+            children: (props) => /* @__PURE__ */ jsxRuntime.jsx(
+              FieldComponent,
+              {
+                groupField,
+                element: resolvedElement,
+                control,
+                getValues,
+                focusedField,
+                setFocusedField,
+                fieldLogic: props
+              }
+            )
+          },
+          elementId
+        ) }, elementId);
+      })
+    }
+  ) });
+};
+
+exports.FormRenderer = FormRenderer;
+//# sourceMappingURL=index.cjs.map