@webiny/app-admin 6.2.0 → 6.3.0-beta.1

package/features/formModel/FormModelFactory.d.ts

@@ -1,7 +1,7 @@
-import { FormModel } from "./FormModel.js";
 import { type IFormModelFactory, type IFormModelConfig } from "./abstractions.js";
+import type { IFormModel } from "./abstractions.js";
 declare class FormModelFactoryImpl implements IFormModelFactory {
-    create(config: IFormModelConfig): FormModel;
+    create<T = Record<string, any>>(config: IFormModelConfig): IFormModel<T>;
 }
 export declare const FormModelFactory: typeof FormModelFactoryImpl & {
     __abstraction: import("@webiny/di").Abstraction<IFormModelFactory>;

package/features/formModel/FormModelFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["FormModel","FormModelFactory","Abstraction","FormModelFactoryImpl","create","config","createImplementation","implementation","dependencies"],"sources":["FormModelFactory.ts"],"sourcesContent":["import { FormModel } from \"./FormModel.js\";\nimport {\n    FormModelFactory as Abstraction,\n    type IFormModelFactory,\n    type IFormModelConfig\n} from \"./abstractions.js\";\n\nclass FormModelFactoryImpl implements IFormModelFactory {\n    create(config: IFormModelConfig): FormModel {\n        return new FormModel(config);\n    }\n}\n\nexport const FormModelFactory = Abstraction.createImplementation({\n    implementation: FormModelFactoryImpl,\n    dependencies: []\n});\n"],"mappings":"AAAA,SAASA,SAAS;AAClB,SACIC,gBAAgB,IAAIC,WAAW;AAKnC,MAAMC,oBAAoB,CAA8B;EACpDC,MAAMA,CAACC,MAAwB,EAAa;IACxC,OAAO,IAAIL,SAAS,CAACK,MAAM,CAAC;EAChC;AACJ;AAEA,OAAO,MAAMJ,gBAAgB,GAAGC,WAAW,CAACI,oBAAoB,CAAC;EAC7DC,cAAc,EAAEJ,oBAAoB;EACpCK,YAAY,EAAE;AAClB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["FormModel","FormModelFactory","Abstraction","FormModelFactoryImpl","create","config","createImplementation","implementation","dependencies"],"sources":["FormModelFactory.ts"],"sourcesContent":["import { FormModel } from \"./FormModel.js\";\nimport {\n    FormModelFactory as Abstraction,\n    type IFormModelFactory,\n    type IFormModelConfig\n} from \"./abstractions.js\";\nimport type { IFormModel } from \"./abstractions.js\";\n\nclass FormModelFactoryImpl implements IFormModelFactory {\n    create<T = Record<string, any>>(config: IFormModelConfig): IFormModel<T> {\n        return new FormModel(config) as IFormModel<T>;\n    }\n}\n\nexport const FormModelFactory = Abstraction.createImplementation({\n    implementation: FormModelFactoryImpl,\n    dependencies: []\n});\n"],"mappings":"AAAA,SAASA,SAAS;AAClB,SACIC,gBAAgB,IAAIC,WAAW;AAMnC,MAAMC,oBAAoB,CAA8B;EACpDC,MAAMA,CAA0BC,MAAwB,EAAiB;IACrE,OAAO,IAAIL,SAAS,CAACK,MAAM,CAAC;EAChC;AACJ;AAEA,OAAO,MAAMJ,gBAAgB,GAAGC,WAAW,CAACI,oBAAoB,CAAC;EAC7DC,cAAc,EAAEJ,oBAAoB;EACpCK,YAAY,EAAE;AAClB,CAAC,CAAC","ignoreList":[]}

package/features/formModel/FormView.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { IFormVM, IFieldVM } from "./abstractions.js";
+import type { IFormVM, LayoutNodeVM, IFieldVM, ITabsNodeVM } from "./abstractions.js";
 /**
  * A field renderer component receives a FieldVM and renders the appropriate UI.
  */
@@ -7,17 +7,37 @@ export type FieldRendererComponent = React.ComponentType<{
     field: IFieldVM;
 }>;
 /**
- * Map of renderer keys to React components.
+ * Map of renderer keys to React components for fields.
  * Lookup order: `{type}:{renderer}` → `{type}`.
  */
 export type FieldRenderers = Record<string, FieldRendererComponent>;
+/**
+ * Map of renderer keys to React components for layout nodes.
+ */
+export type LayoutRenderers = Record<string, React.ComponentType<any>>;
+interface FormViewRenderers {
+    fieldRenderers: FieldRenderers;
+    layoutRenderers: LayoutRenderers;
+}
+declare const useFormViewRenderers: () => FormViewRenderers;
+export { useFormViewRenderers };
 interface FormViewProps {
     form: IFormVM;
     renderers?: FieldRenderers;
+    layoutRenderers?: LayoutRenderers;
 }
 /**
  * Generic form view that walks layout nodes and renders fields.
  * This component is stateless — it reads from the FormVM and delegates to renderers.
  */
-export declare const FormView: React.FunctionComponent<FormViewProps>;
-export {};
+export declare const FormView: (({ form, renderers, layoutRenderers }: FormViewProps) => React.JSX.Element) & {
+    displayName: string;
+};
+export declare const LayoutNodeRenderer: (({ node }: {
+    node: LayoutNodeVM;
+}) => React.JSX.Element | null) & {
+    displayName: string;
+};
+export interface TabsNodeRendererProps {
+    node: ITabsNodeVM;
+}

package/features/formModel/FormView.js

@@ -1,63 +1,82 @@
-import React from "react";
+import React, { createContext, useContext, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { useFieldRenderers } from "./useFieldRenderers.js";
+import { useLayoutRenderers } from "./useLayoutRenderers.js";
 
 /**
  * A field renderer component receives a FieldVM and renders the appropriate UI.
  */
 
 /**
- * Map of renderer keys to React components.
+ * Map of renderer keys to React components for fields.
  * Lookup order: `{type}:{renderer}` → `{type}`.
  */
 
+/**
+ * Map of renderer keys to React components for layout nodes.
+ */
+
+const FormViewRenderersContext = /*#__PURE__*/createContext(null);
+const useFormViewRenderers = () => {
+  const ctx = useContext(FormViewRenderersContext);
+  if (!ctx) {
+    throw new Error("useFormViewRenderers must be used within a FormView.");
+  }
+  return ctx;
+};
+export { useFormViewRenderers };
 /**
  * Generic form view that walks layout nodes and renders fields.
  * This component is stateless — it reads from the FormVM and delegates to renderers.
  */
 export const FormView = observer(function FormView({
   form,
-  renderers
+  renderers,
+  layoutRenderers
 }) {
-  const fieldRenderers = useFieldRenderers();
-  return /*#__PURE__*/React.createElement("div", {
+  const defaultFieldRenderers = useFieldRenderers();
+  const defaultLayoutRenderers = useLayoutRenderers();
+  const value = useMemo(() => ({
+    fieldRenderers: renderers ?? defaultFieldRenderers,
+    layoutRenderers: layoutRenderers ?? defaultLayoutRenderers
+  }), [renderers, defaultFieldRenderers, layoutRenderers, defaultLayoutRenderers]);
+  return /*#__PURE__*/React.createElement(FormViewRenderersContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React.createElement("div", {
     className: "w-full flex flex-col gap-4"
   }, form.layout.map((node, index) => /*#__PURE__*/React.createElement(LayoutNodeRenderer, {
     key: index,
-    node: node,
-    renderers: renderers ?? fieldRenderers
-  })));
+    node: node
+  }))));
 });
-const LayoutNodeRenderer = observer(function LayoutNodeRenderer({
-  node,
-  renderers
+export const LayoutNodeRenderer = observer(function LayoutNodeRenderer({
+  node
 }) {
   switch (node.type) {
     case "row":
       return /*#__PURE__*/React.createElement(RowNodeRenderer, {
-        node: node,
-        renderers: renderers
+        node: node
       });
     case "separator":
       return /*#__PURE__*/React.createElement(SeparatorNodeRenderer, null);
     case "tabs":
       return /*#__PURE__*/React.createElement(TabsNodeRenderer, {
-        node: node,
-        renderers: renderers
+        node: node
       });
     case "element":
       return /*#__PURE__*/React.createElement(ElementNodeRenderer, {
-        node: node,
-        renderers: renderers
+        node: node
       });
     default:
       return null;
   }
 });
 const RowNodeRenderer = observer(function RowNodeRenderer({
-  node,
-  renderers
+  node
 }) {
+  const {
+    fieldRenderers
+  } = useFormViewRenderers();
   return /*#__PURE__*/React.createElement("div", {
     className: "grid grid-cols-12 gap-4"
   }, node.fields.map(field => {
@@ -67,7 +86,7 @@ const RowNodeRenderer = observer(function RowNodeRenderer({
       className: `col-span-${span}`
     }, /*#__PURE__*/React.createElement(FieldRenderer, {
       field: field,
-      renderers: renderers
+      renderers: fieldRenderers
     }));
   }));
 });
@@ -92,9 +111,19 @@ const SeparatorNodeRenderer = observer(function SeparatorNodeRenderer() {
   });
 });
 const TabsNodeRenderer = observer(function TabsNodeRenderer({
-  node,
-  renderers
+  node
 }) {
+  const {
+    layoutRenderers
+  } = useFormViewRenderers();
+  if (node.renderer) {
+    const CustomRenderer = layoutRenderers[node.renderer];
+    if (CustomRenderer) {
+      return /*#__PURE__*/React.createElement(CustomRenderer, {
+        node: node
+      });
+    }
+  }
   const activeTab = node.tabs.find(t => t.id === node.activeTabId);
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: "flex border-b border-neutral-dimmed"
@@ -113,15 +142,16 @@ const TabsNodeRenderer = observer(function TabsNodeRenderer({
     className: "flex flex-col gap-4"
   }, activeTab.layout.map((childNode, index) => /*#__PURE__*/React.createElement(LayoutNodeRenderer, {
     key: index,
-    node: childNode,
-    renderers: renderers
+    node: childNode
   })))));
 });
 const ElementNodeRenderer = observer(function ElementNodeRenderer({
-  node,
-  renderers
+  node
 }) {
-  const Renderer = renderers[`element:${node.renderer}`];
+  const {
+    fieldRenderers
+  } = useFormViewRenderers();
+  const Renderer = fieldRenderers[`element:${node.renderer}`];
   if (!Renderer) {
     if (process.env.NODE_ENV === "development") {
       console.warn(`[FormView] No renderer found for element "${node.renderer}".`);

package/features/formModel/FormView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","observer","useFieldRenderers","FormView","form","renderers","fieldRenderers","createElement","className","layout","map","node","index","LayoutNodeRenderer","key","type","RowNodeRenderer","SeparatorNodeRenderer","TabsNodeRenderer","ElementNodeRenderer","fields","field","span","Math","floor","length","name","FieldRenderer","Renderer","renderer","undefined","process","env","NODE_ENV","console","warn","activeTab","tabs","find","t","id","activeTabId","tab","onClick","setActiveTab","label","hasErrors","description","childNode","props"],"sources":["FormView.tsx"],"sourcesContent":["import React from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport type {\n    IFormVM,\n    LayoutNodeVM,\n    IRowNodeVM,\n    IFieldVM,\n    ITabsNodeVM,\n    IElementNodeVM\n} from \"./abstractions.js\";\nimport { useFieldRenderers } from \"~/features/formModel/useFieldRenderers.js\";\n\n/**\n * A field renderer component receives a FieldVM and renders the appropriate UI.\n */\nexport type FieldRendererComponent = React.ComponentType<{ field: IFieldVM }>;\n\n/**\n * Map of renderer keys to React components.\n * Lookup order: `{type}:{renderer}` → `{type}`.\n */\nexport type FieldRenderers = Record<string, FieldRendererComponent>;\n\ninterface FormViewProps {\n    form: IFormVM;\n    renderers?: FieldRenderers;\n}\n\n/**\n * Generic form view that walks layout nodes and renders fields.\n * This component is stateless — it reads from the FormVM and delegates to renderers.\n */\nexport const FormView = observer(function FormView({ form, renderers }: FormViewProps) {\n    const fieldRenderers = useFieldRenderers();\n\n    return (\n        <div className=\"w-full flex flex-col gap-4\">\n            {form.layout.map((node, index) => (\n                <LayoutNodeRenderer\n                    key={index}\n                    node={node}\n                    renderers={renderers ?? fieldRenderers}\n                />\n            ))}\n        </div>\n    );\n});\n\ninterface LayoutNodeRendererProps {\n    node: LayoutNodeVM;\n    renderers: FieldRenderers;\n}\n\nconst LayoutNodeRenderer = observer(function LayoutNodeRenderer({\n    node,\n    renderers\n}: LayoutNodeRendererProps) {\n    switch (node.type) {\n        case \"row\":\n            return <RowNodeRenderer node={node} renderers={renderers} />;\n        case \"separator\":\n            return <SeparatorNodeRenderer />;\n        case \"tabs\":\n            return <TabsNodeRenderer node={node} renderers={renderers} />;\n        case \"element\":\n            return <ElementNodeRenderer node={node} renderers={renderers} />;\n        default:\n            return null;\n    }\n});\n\ninterface RowNodeRendererProps {\n    node: IRowNodeVM;\n    renderers: FieldRenderers;\n}\n\nconst RowNodeRenderer = observer(function RowNodeRenderer({\n    node,\n    renderers\n}: RowNodeRendererProps) {\n    return (\n        <div className=\"grid grid-cols-12 gap-4\">\n            {node.fields.map(field => {\n                const span = Math.floor(12 / node.fields.length);\n                return (\n                    <div key={field.name} className={`col-span-${span}`}>\n                        <FieldRenderer field={field} renderers={renderers} />\n                    </div>\n                );\n            })}\n        </div>\n    );\n});\n\ninterface FieldRendererProps {\n    field: IFieldVM;\n    renderers: FieldRenderers;\n}\n\nconst FieldRenderer = observer(function FieldRenderer({ field, renderers }: FieldRendererProps) {\n    const Renderer = field.renderer ? renderers[field.renderer] : undefined;\n\n    if (!Renderer) {\n        if (process.env.NODE_ENV === \"development\") {\n            console.warn(\n                `[FormView] No renderer found for field \"${field.name}\" (renderer: \"${field.renderer || \"none\"}\").`\n            );\n        }\n        return null;\n    }\n\n    return <Renderer field={field} />;\n});\n\nconst SeparatorNodeRenderer = observer(function SeparatorNodeRenderer() {\n    return <hr className=\"border-neutral-dimmed my-2\" />;\n});\n\ninterface TabsNodeRendererProps {\n    node: ITabsNodeVM;\n    renderers: FieldRenderers;\n}\n\nconst TabsNodeRenderer = observer(function TabsNodeRenderer({\n    node,\n    renderers\n}: TabsNodeRendererProps) {\n    const activeTab = node.tabs.find(t => t.id === node.activeTabId);\n\n    return (\n        <div>\n            <div className=\"flex border-b border-neutral-dimmed\">\n                {node.tabs.map(tab => (\n                    <button\n                        key={tab.id}\n                        type=\"button\"\n                        className={`px-4 py-2 text-sm font-medium border-b-2 ${\n                            tab.id === node.activeTabId\n                                ? \"border-primary text-primary\"\n                                : \"border-transparent text-neutral hover:text-neutral-strong\"\n                        }`}\n                        onClick={() => node.setActiveTab(tab.id)}\n                    >\n                        {tab.label}\n                        {tab.hasErrors && <span className=\"ml-1 text-destructive text-xs\">*</span>}\n                    </button>\n                ))}\n            </div>\n            {activeTab && (\n                <div className=\"pt-4\">\n                    {activeTab.description && (\n                        <p className=\"text-sm text-neutral mb-4\">{activeTab.description}</p>\n                    )}\n                    <div className=\"flex flex-col gap-4\">\n                        {activeTab.layout.map((childNode, index) => (\n                            <LayoutNodeRenderer\n                                key={index}\n                                node={childNode}\n                                renderers={renderers}\n                            />\n                        ))}\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n});\n\ninterface ElementNodeRendererProps {\n    node: IElementNodeVM;\n    renderers: FieldRenderers;\n}\n\nconst ElementNodeRenderer = observer(function ElementNodeRenderer({\n    node,\n    renderers\n}: ElementNodeRendererProps) {\n    const Renderer = renderers[`element:${node.renderer}`];\n\n    if (!Renderer) {\n        if (process.env.NODE_ENV === \"development\") {\n            console.warn(`[FormView] No renderer found for element \"${node.renderer}\".`);\n        }\n        return null;\n    }\n\n    return <Renderer field={{ ...node.props } as any} />;\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","createContext","useContext","useMemo","observer","useFieldRenderers","useLayoutRenderers","FormViewRenderersContext","useFormViewRenderers","ctx","Error","FormView","form","renderers","layoutRenderers","defaultFieldRenderers","defaultLayoutRenderers","value","fieldRenderers","createElement","Provider","className","layout","map","node","index","LayoutNodeRenderer","key","type","RowNodeRenderer","SeparatorNodeRenderer","TabsNodeRenderer","ElementNodeRenderer","fields","field","span","Math","floor","length","name","FieldRenderer","Renderer","renderer","undefined","process","env","NODE_ENV","console","warn","CustomRenderer","activeTab","tabs","find","t","id","activeTabId","tab","onClick","setActiveTab","label","hasErrors","description","childNode","props"],"sources":["FormView.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport type {\n    IFormVM,\n    LayoutNodeVM,\n    IRowNodeVM,\n    IFieldVM,\n    ITabsNodeVM,\n    IElementNodeVM\n} from \"./abstractions.js\";\nimport { useFieldRenderers } from \"~/features/formModel/useFieldRenderers.js\";\nimport { useLayoutRenderers } from \"~/features/formModel/useLayoutRenderers.js\";\n\n/**\n * A field renderer component receives a FieldVM and renders the appropriate UI.\n */\nexport type FieldRendererComponent = React.ComponentType<{ field: IFieldVM }>;\n\n/**\n * Map of renderer keys to React components for fields.\n * Lookup order: `{type}:{renderer}` → `{type}`.\n */\nexport type FieldRenderers = Record<string, FieldRendererComponent>;\n\n/**\n * Map of renderer keys to React components for layout nodes.\n */\nexport type LayoutRenderers = Record<string, React.ComponentType<any>>;\n\ninterface FormViewRenderers {\n    fieldRenderers: FieldRenderers;\n    layoutRenderers: LayoutRenderers;\n}\n\nconst FormViewRenderersContext = createContext<FormViewRenderers | null>(null);\n\nconst useFormViewRenderers = (): FormViewRenderers => {\n    const ctx = useContext(FormViewRenderersContext);\n    if (!ctx) {\n        throw new Error(\"useFormViewRenderers must be used within a FormView.\");\n    }\n    return ctx;\n};\n\nexport { useFormViewRenderers };\n\ninterface FormViewProps {\n    form: IFormVM;\n    renderers?: FieldRenderers;\n    layoutRenderers?: LayoutRenderers;\n}\n\n/**\n * Generic form view that walks layout nodes and renders fields.\n * This component is stateless — it reads from the FormVM and delegates to renderers.\n */\nexport const FormView = observer(function FormView({\n    form,\n    renderers,\n    layoutRenderers\n}: FormViewProps) {\n    const defaultFieldRenderers = useFieldRenderers();\n    const defaultLayoutRenderers = useLayoutRenderers();\n\n    const value = useMemo(\n        () => ({\n            fieldRenderers: renderers ?? defaultFieldRenderers,\n            layoutRenderers: layoutRenderers ?? defaultLayoutRenderers\n        }),\n        [renderers, defaultFieldRenderers, layoutRenderers, defaultLayoutRenderers]\n    );\n\n    return (\n        <FormViewRenderersContext.Provider value={value}>\n            <div className=\"w-full flex flex-col gap-4\">\n                {form.layout.map((node, index) => (\n                    <LayoutNodeRenderer key={index} node={node} />\n                ))}\n            </div>\n        </FormViewRenderersContext.Provider>\n    );\n});\n\nexport const LayoutNodeRenderer = observer(function LayoutNodeRenderer({\n    node\n}: {\n    node: LayoutNodeVM;\n}) {\n    switch (node.type) {\n        case \"row\":\n            return <RowNodeRenderer node={node} />;\n        case \"separator\":\n            return <SeparatorNodeRenderer />;\n        case \"tabs\":\n            return <TabsNodeRenderer node={node} />;\n        case \"element\":\n            return <ElementNodeRenderer node={node} />;\n        default:\n            return null;\n    }\n});\n\nconst RowNodeRenderer = observer(function RowNodeRenderer({ node }: { node: IRowNodeVM }) {\n    const { fieldRenderers } = useFormViewRenderers();\n\n    return (\n        <div className=\"grid grid-cols-12 gap-4\">\n            {node.fields.map(field => {\n                const span = Math.floor(12 / node.fields.length);\n                return (\n                    <div key={field.name} className={`col-span-${span}`}>\n                        <FieldRenderer field={field} renderers={fieldRenderers} />\n                    </div>\n                );\n            })}\n        </div>\n    );\n});\n\ninterface FieldRendererProps {\n    field: IFieldVM;\n    renderers: FieldRenderers;\n}\n\nconst FieldRenderer = observer(function FieldRenderer({ field, renderers }: FieldRendererProps) {\n    const Renderer = field.renderer ? renderers[field.renderer] : undefined;\n\n    if (!Renderer) {\n        if (process.env.NODE_ENV === \"development\") {\n            console.warn(\n                `[FormView] No renderer found for field \"${field.name}\" (renderer: \"${field.renderer || \"none\"}\").`\n            );\n        }\n        return null;\n    }\n\n    return <Renderer field={field} />;\n});\n\nconst SeparatorNodeRenderer = observer(function SeparatorNodeRenderer() {\n    return <hr className=\"border-neutral-dimmed my-2\" />;\n});\n\nexport interface TabsNodeRendererProps {\n    node: ITabsNodeVM;\n}\n\nconst TabsNodeRenderer = observer(function TabsNodeRenderer({ node }: TabsNodeRendererProps) {\n    const { layoutRenderers } = useFormViewRenderers();\n\n    if (node.renderer) {\n        const CustomRenderer = layoutRenderers[node.renderer];\n        if (CustomRenderer) {\n            return <CustomRenderer node={node} />;\n        }\n    }\n\n    const activeTab = node.tabs.find(t => t.id === node.activeTabId);\n\n    return (\n        <div>\n            <div className=\"flex border-b border-neutral-dimmed\">\n                {node.tabs.map(tab => (\n                    <button\n                        key={tab.id}\n                        type=\"button\"\n                        className={`px-4 py-2 text-sm font-medium border-b-2 ${\n                            tab.id === node.activeTabId\n                                ? \"border-primary text-primary\"\n                                : \"border-transparent text-neutral hover:text-neutral-strong\"\n                        }`}\n                        onClick={() => node.setActiveTab(tab.id)}\n                    >\n                        {tab.label}\n                        {tab.hasErrors && <span className=\"ml-1 text-destructive text-xs\">*</span>}\n                    </button>\n                ))}\n            </div>\n            {activeTab && (\n                <div className=\"pt-4\">\n                    {activeTab.description && (\n                        <p className=\"text-sm text-neutral mb-4\">{activeTab.description}</p>\n                    )}\n                    <div className=\"flex flex-col gap-4\">\n                        {activeTab.layout.map((childNode, index) => (\n                            <LayoutNodeRenderer key={index} node={childNode} />\n                        ))}\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n});\n\nconst ElementNodeRenderer = observer(function ElementNodeRenderer({\n    node\n}: {\n    node: IElementNodeVM;\n}) {\n    const { fieldRenderers } = useFormViewRenderers();\n    const Renderer = fieldRenderers[`element:${node.renderer}`];\n\n    if (!Renderer) {\n        if (process.env.NODE_ENV === \"development\") {\n            console.warn(`[FormView] No renderer found for element \"${node.renderer}\".`);\n        }\n        return null;\n    }\n\n    return <Renderer field={{ ...node.props } as any} />;\n});\n"],"mappings":"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","ignoreList":[]}

package/features/formModel/ObjectField.d.ts

@@ -0,0 +1,46 @@
+import type { IObjectFieldConfig, IObjectField, IListItemField, IField, IObjectFieldVM, IFieldValidation, IFormModel, FieldTypeMap, BeforeChangeCallback, AfterChangeCallback, AfterSetValueCallback, OnBlurCallback } from "./abstractions.js";
+export declare function isObjectField(field: IField): field is ObjectField;
+/**
+ * ObjectField — hierarchical field with children, using composition.
+ * Holds a `_base` Field for scalar behavior (callbacks, disabled/hidden, form ref).
+ * Adds its own children/items management for object and list modes.
+ */
+export declare class ObjectField implements IObjectField {
+    readonly config: IObjectFieldConfig;
+    private _base;
+    private _form;
+    private _children;
+    private _items;
+    constructor(config: IObjectFieldConfig);
+    get name(): string;
+    get type(): string;
+    get visible(): boolean;
+    setDisabled(value: boolean): void;
+    setVisible(value: boolean): void;
+    setForm(form: IFormModel): void;
+    setValidation(validation: IFieldValidation): void;
+    addBeforeChange(cb: BeforeChangeCallback): void;
+    addAfterChange(cb: AfterChangeCallback): void;
+    addAfterSetValue(cb: AfterSetValueCallback): void;
+    addOnBlur(cb: OnBlurCallback): void;
+    blur(): void;
+    remove(): void;
+    get isList(): boolean;
+    get children(): Map<string, IField>;
+    get items(): IListItemField[];
+    getChild(name: string): IField | undefined;
+    getListItemChild(index: number, name: string): IField | undefined;
+    getData(): any;
+    getValue<T = unknown>(): T;
+    setValue(value: unknown): void;
+    setValueSilent(value: unknown): void;
+    addItem(data?: Record<string, unknown>): void;
+    removeItem(index: number): void;
+    moveItem(fromIndex: number, toIndex: number): void;
+    private _addItemInternal;
+    resetValidation(): void;
+    as<T extends keyof FieldTypeMap>(type: T): FieldTypeMap[T];
+    get vm(): IObjectFieldVM;
+    get hasErrors(): boolean;
+    validate(): Promise<boolean>;
+}

package/features/formModel/ObjectField.js

@@ -0,0 +1,346 @@
+import { makeAutoObservable, runInAction, toJS } from "mobx";
+import { Field } from "./Field.js";
+function createChildFields(childBuilders, form) {
+  const children = new Map();
+  for (const [name, builder] of Object.entries(childBuilders)) {
+    const config = builder.build(name);
+    const field = createFieldFromConfig(config, form);
+    children.set(name, field);
+  }
+  return children;
+}
+function createFieldFromConfig(config, form) {
+  if (config.childBuilders) {
+    const objField = new ObjectField(config);
+    if (form) {
+      objField.setForm(form);
+    }
+    return objField;
+  }
+  const field = new Field(config);
+  if (form) {
+    field.setForm(form);
+  }
+  return field;
+}
+function hydrateChildren(children, data) {
+  if (!data) {
+    return;
+  }
+  for (const [name, field] of children) {
+    if (name in data) {
+      field.setValueSilent(data[name]);
+    }
+  }
+}
+function getChildrenData(children) {
+  const data = {};
+  for (const [name, field] of children) {
+    if (isObjectField(field)) {
+      data[name] = toJS(field.getData());
+    } else {
+      data[name] = toJS(field.getValue());
+    }
+  }
+  return data;
+}
+async function validateChildren(children) {
+  let allValid = true;
+  for (const [, field] of children) {
+    const valid = await field.validate();
+    if (!valid) {
+      allValid = false;
+    }
+  }
+  return allValid;
+}
+export function isObjectField(field) {
+  return field.type === "object";
+}
+let itemKeyCounter = 0;
+/**
+ * ObjectField — hierarchical field with children, using composition.
+ * Holds a `_base` Field for scalar behavior (callbacks, disabled/hidden, form ref).
+ * Adds its own children/items management for object and list modes.
+ */
+export class ObjectField {
+  _form = null;
+  _items = [];
+  constructor(config) {
+    this.config = config;
+    this._base = new Field({
+      ...config,
+      type: "object",
+      renderer: config.renderer ?? "object"
+    });
+    this._children = createChildFields(config.childBuilders, null);
+    makeAutoObservable(this, {
+      config: false
+    });
+  }
+
+  // --- Forwarded from _base ---
+
+  get name() {
+    return this._base.name;
+  }
+  get type() {
+    return "object";
+  }
+  get visible() {
+    return this._base.visible;
+  }
+  setDisabled(value) {
+    this._base.setDisabled(value);
+  }
+  setVisible(value) {
+    this._base.setVisible(value);
+  }
+  setForm(form) {
+    this._form = form;
+    this._base.setForm(form);
+    for (const [, field] of this._children) {
+      field.setForm(form);
+    }
+    for (const item of this._items) {
+      for (const [, field] of item.children) {
+        field.setForm(form);
+      }
+    }
+  }
+  setValidation(validation) {
+    this._base.setValidation(validation);
+  }
+  addBeforeChange(cb) {
+    this._base.addBeforeChange(cb);
+  }
+  addAfterChange(cb) {
+    this._base.addAfterChange(cb);
+  }
+  addAfterSetValue(cb) {
+    this._base.addAfterSetValue(cb);
+  }
+  addOnBlur(cb) {
+    this._base.addOnBlur(cb);
+  }
+  blur() {
+    this._base.blur();
+  }
+  remove() {
+    this._base.remove();
+  }
+
+  // --- Object-specific ---
+
+  get isList() {
+    return this.config.isList;
+  }
+  get children() {
+    return this._children;
+  }
+  get items() {
+    return this._items.map(item => ({
+      key: item.key,
+      children: item.children,
+      getData: () => getChildrenData(item.children)
+    }));
+  }
+  getChild(name) {
+    return this._children.get(name);
+  }
+  getListItemChild(index, name) {
+    const item = this._items[index];
+    return item?.children.get(name);
+  }
+  getData() {
+    if (this.config.isList) {
+      return this._items.map(item => getChildrenData(item.children));
+    }
+    return getChildrenData(this._children);
+  }
+  getValue() {
+    return this.getData();
+  }
+  setValue(value) {
+    this.setValueSilent(value);
+  }
+  setValueSilent(value) {
+    if (this.config.isList) {
+      this._items = [];
+      if (Array.isArray(value)) {
+        for (const itemData of value) {
+          this._addItemInternal(itemData);
+        }
+      }
+    } else {
+      hydrateChildren(this._children, value);
+    }
+  }
+  addItem(data) {
+    this._addItemInternal(data);
+  }
+  removeItem(index) {
+    this._items.splice(index, 1);
+  }
+  moveItem(fromIndex, toIndex) {
+    if (fromIndex < 0 || fromIndex >= this._items.length || toIndex < 0 || toIndex >= this._items.length || fromIndex === toIndex) {
+      return;
+    }
+    const [item] = this._items.splice(fromIndex, 1);
+    this._items.splice(toIndex, 0, item);
+  }
+  _addItemInternal(data) {
+    const children = createChildFields(this.config.childBuilders, this._form);
+    if (data) {
+      hydrateChildren(children, data);
+    }
+    const key = `item_${++itemKeyCounter}`;
+    this._items.push({
+      key,
+      children
+    });
+  }
+  resetValidation() {
+    this._base.resetValidation();
+    for (const [, field] of this._children) {
+      field.resetValidation();
+    }
+    for (const item of this._items) {
+      for (const [, field] of item.children) {
+        field.resetValidation();
+      }
+    }
+  }
+  as(type) {
+    if (type !== "object") {
+      throw new Error(`Field "${this.config.name}" is type "object", not "${type}".`);
+    }
+    return this;
+  }
+  get vm() {
+    const baseVm = this._base.vm;
+    return {
+      name: baseVm.name,
+      type: "object",
+      label: baseVm.label,
+      help: baseVm.help,
+      description: baseVm.description,
+      note: baseVm.note,
+      placeholder: baseVm.placeholder,
+      value: this.getValue(),
+      validation: baseVm.validation,
+      required: baseVm.required,
+      disabled: baseVm.disabled,
+      renderer: baseVm.renderer,
+      rendererSettings: baseVm.rendererSettings,
+      onChange: value => this.setValue(value),
+      onBlur: () => this.blur(),
+      isList: this.config.isList,
+      fields: this.config.isList ? [] : Array.from(this._children.values()).filter(f => f.visible).map(f => f.vm),
+      items: this.config.isList ? this._items.map((item, index) => ({
+        key: item.key,
+        fields: Array.from(item.children.values()).filter(f => f.visible).map(f => f.vm),
+        remove: () => this.removeItem(index),
+        moveUp: () => this.moveItem(index, index - 1),
+        moveDown: () => this.moveItem(index, index + 1)
+      })) : [],
+      addItem: () => this.addItem(),
+      removeItem: index => this.removeItem(index),
+      moveItem: (from, to) => this.moveItem(from, to)
+    };
+  }
+  get hasErrors() {
+    const checkChildren = children => {
+      for (const [, field] of children) {
+        if (field.vm.validation.isValid === false) {
+          return true;
+        }
+        if (isObjectField(field) && field.hasErrors) {
+          return true;
+        }
+      }
+      return false;
+    };
+    if (this.config.isList) {
+      for (const item of this._items) {
+        if (checkChildren(item.children)) {
+          return true;
+        }
+      }
+    } else {
+      if (checkChildren(this._children)) {
+        return true;
+      }
+    }
+    return false;
+  }
+  async validate() {
+    if (this.config.required) {
+      if (this.config.isList && this._items.length === 0) {
+        this.setValidation({
+          isValid: false,
+          message: this.config.requiredMessage || "This field is required."
+        });
+        return false;
+      }
+      if (!this.config.isList) {
+        const data = this.getData();
+        const hasAnyValue = Object.values(data).some(v => v !== null && v !== undefined && v !== "");
+        if (!hasAnyValue) {
+          this.setValidation({
+            isValid: false,
+            message: this.config.requiredMessage || "This field is required."
+          });
+          return false;
+        }
+      }
+    }
+    if (this.config.isList && this.config.listSchema) {
+      const listData = this.getData();
+      const result = await this.config.listSchema.safeParseAsync(listData);
+      if (!result.success) {
+        const firstIssue = result.error.issues[0];
+        runInAction(() => {
+          this.setValidation({
+            isValid: false,
+            message: firstIssue?.message || "Invalid value."
+          });
+        });
+        return false;
+      }
+    }
+    if (this.config.schema) {
+      const data = this.getData();
+      const result = await this.config.schema.safeParseAsync(data);
+      if (!result.success) {
+        const firstIssue = result.error.issues[0];
+        runInAction(() => {
+          this.setValidation({
+            isValid: false,
+            message: firstIssue?.message || "Invalid value."
+          });
+        });
+        return false;
+      }
+    }
+    let allValid = true;
+    if (this.config.isList) {
+      for (const item of this._items) {
+        const valid = await validateChildren(item.children);
+        if (!valid) {
+          allValid = false;
+        }
+      }
+    } else {
+      allValid = await validateChildren(this._children);
+    }
+    runInAction(() => {
+      this.setValidation({
+        isValid: allValid
+      });
+    });
+    return allValid;
+  }
+}
+
+//# sourceMappingURL=ObjectField.js.map