@dappworks/kit 0.4.147 → 0.4.149

package/dist/form.d.mts

@@ -1,5 +1,5 @@
-import React, { LegacyRef, Ref, Dispatch, SetStateAction, ReactNode } from 'react';
-import { ButtonProps, TabsProps, CheckboxProps, SlotsToClasses, InputSlots, InputProps, SelectSlots, SelectProps, SelectedItems, DatePickerProps, ModalSlots } from '@nextui-org/react';
+import React$1, { Dispatch, SetStateAction, ReactNode } from 'react';
+import { TabsProps, ButtonProps, CheckboxProps, SlotsToClasses, InputSlots, InputProps, SelectSlots, SelectProps, SelectedItems, DatePickerProps, ModalSlots } from '@nextui-org/react';
 import { UiSchema, RJSFSchema, WidgetProps, Widget } from '@rjsf/utils';
 import * as _rjsf_validator_ajv8_lib_validator from '@rjsf/validator-ajv8/lib/validator';
 import Form, { IChangeEvent } from '@rjsf/core';
@@ -10,7 +10,6 @@ import EventEmitter from 'events';
 import 'typed-emitter';
 
 declare class JSONSchemaFormState<T, U = UiSchema> {
-    formRef: LegacyRef<Form<any, RJSFSchema, any>> & Ref<Form<any, RJSFSchema, any>>;
     value: JSONSchemaValue<T>;
     schema: RJSFSchema;
     uiSchema: U;
@@ -18,6 +17,7 @@ declare class JSONSchemaFormState<T, U = UiSchema> {
     readonly: boolean;
     liveValidate: boolean;
     validator: _rjsf_validator_ajv8_lib_validator.default<any, RJSFSchema, any>;
+    formRef: React.RefObject<Form>;
     get formData(): T;
     set formData(value: T);
     get dynamicData(): {
@@ -49,19 +49,30 @@ declare class JSONSchemaValue<T> {
 
 type LayoutType = 'TabLayout' | 'GridLayout' | 'ListLayout' | 'SimpleLayout';
 type FieldLayoutType<T, F extends keyof T> = Array<keyof NonNullable<T[F]>> | Array<Array<keyof NonNullable<T[F]>> | keyof NonNullable<T[F]>>;
-type CustomButtonProps<T> = ({
-    title: string;
-    onClick: (formKey: FormKey<T>, data: FormDataOfKey<T>, setLoading: Dispatch<SetStateAction<boolean>>) => void;
-} & ButtonProps)[];
+type SubmitButtonProps<T> = ButtonProps & {
+    onAfterSubmit?: (formKey: FormKey<T>, data: FormDataOfKey<T>, setLoading: Dispatch<SetStateAction<boolean>>) => void;
+};
+type CombFormsCustomRender<T> = (formStates: {
+    [F in keyof T]?: JSONSchemaFormState<FormDataOfKey<T>, UiSchema>;
+}) => React$1.ReactNode;
+type CombFormsCustomRenderMap<T> = {
+    Top?: CombFormsCustomRender<T>;
+    SubmitButtonBefore?: CombFormsCustomRender<T>;
+    SubmitButtonAfter?: CombFormsCustomRender<T>;
+};
+type SubformCustomRender<T> = (formKey: FormKey<T>, formState: JSONSchemaFormState<FormDataOfKey<T>, UiSchema>) => React$1.ReactNode;
+type SubformCustomRenderMap<T> = {
+    Top?: SubformCustomRender<T>;
+    SubmitButtonBefore?: SubformCustomRender<T>;
+    SubmitButtonAfter?: SubformCustomRender<T>;
+};
 type FormLayoutType<T, L> = L extends 'TabLayout' | 'ListLayout' | 'SimpleLayout' ? {
     [F in keyof T]?: {
         title?: string;
         titleBoxCss?: string;
         fieldLayout?: FieldLayoutType<T, F>;
-        submitButtonProps?: ButtonProps & {
-            onAfterSubmit?: (formKey: FormKey<T>, data: FormDataOfKey<T>, setLoading: Dispatch<SetStateAction<boolean>>) => void;
-        };
-        customButtonProps?: CustomButtonProps<T>;
+        submitButtonProps?: SubmitButtonProps<T>;
+        customRender?: SubformCustomRenderMap<T>;
     };
 } : L extends 'GridLayout' ? {
     [F in keyof T]?: {
@@ -70,22 +81,24 @@ type FormLayoutType<T, L> = L extends 'TabLayout' | 'ListLayout' | 'SimpleLayout
         fieldLayout?: FieldLayoutType<T, F>;
         colSpan?: number;
         cardCss?: string;
-        submitButtonProps?: ButtonProps & {
-            onAfterSubmit?: (formKey: FormKey<T>, data: FormDataOfKey<T>, setLoading: Dispatch<SetStateAction<boolean>>) => void;
-        };
-        customButtonProps?: CustomButtonProps<T>;
+        submitButtonProps?: SubmitButtonProps<T>;
+        customRender?: SubformCustomRenderMap<T>;
     };
 } : never;
 type LayoutConfigType<T, L> = L extends 'TabLayout' ? {
     $type: 'TabLayout';
     $tabsProps?: TabsProps;
+    $combFormsCustomRender?: CombFormsCustomRenderMap<T>;
 } & FormLayoutType<T, L> : L extends 'GridLayout' ? {
     $type: 'GridLayout';
     $gridColumn?: number;
+    $combFormsCustomRender?: CombFormsCustomRenderMap<T>;
 } & FormLayoutType<T, L> : L extends 'ListLayout' ? {
     $type: 'ListLayout';
+    $combFormsCustomRender?: CombFormsCustomRenderMap<T>;
 } & FormLayoutType<T, L> : L extends 'SimpleLayout' ? {
     $type: 'SimpleLayout';
+    $combFormsCustomRender?: CombFormsCustomRenderMap<T>;
 } & FormLayoutType<T, L> : never;
 type FormDataType = {
     [key: string]: {
@@ -126,7 +139,7 @@ type JSONFormProps<T = FormDataType> = {
         onBatchSubmit?: (formData: T, setLoading: Dispatch<SetStateAction<boolean>>) => void;
     };
 };
-declare const JSONForm: <T extends FormDataType>(props: JSONFormProps<T>) => React.JSX.Element;
+declare const JSONForm: <T extends FormDataType>(props: JSONFormProps<T>) => React$1.JSX.Element;
 
 type Options$6 = {
     className?: string;
@@ -143,7 +156,7 @@ interface CheckboxWidgetUIOptions {
     "ui:widget": (props: CheckboxWidgetProps) => JSX.Element;
     "ui:options": Options$6;
 }
-declare function CheckboxWidget({ onChange, options, label, value, disabled, uiSchema }: CheckboxWidgetProps): React.JSX.Element;
+declare function CheckboxWidget({ onChange, options, label, value, disabled, uiSchema }: CheckboxWidgetProps): React$1.JSX.Element;
 
 type Options$5 = {
     editorHeight?: string;
@@ -170,7 +183,7 @@ type EditorWidgetUIOptions = {
     "ui:widget": (props: EditorWidgetProps) => JSX.Element;
     "ui:options": Options$5;
 };
-declare const EditorWidget: ({ label, options, value, required, uiSchema, disabled, onChange }: EditorWidgetProps) => React.JSX.Element;
+declare const EditorWidget: ({ label, options, value, required, uiSchema, disabled, onChange }: EditorWidgetProps) => React$1.JSX.Element;
 
 type Options$4 = {
     className?: string;
@@ -193,7 +206,7 @@ interface InputWidgetUIOptions {
     "ui:widget": (props: InputWidgetProps) => JSX.Element;
     "ui:options": Options$4;
 }
-declare function InputWidget(props: InputWidgetProps): React.JSX.Element;
+declare function InputWidget(props: InputWidgetProps): React$1.JSX.Element;
 
 type Options$3 = {
     className?: string;
@@ -214,7 +227,7 @@ interface SelectWidgetUIOptions {
     "ui:widget": (props: SelectWidgetProps) => JSX.Element;
     "ui:options": Options$3;
 }
-declare function SelectWidget(props: SelectWidgetProps): React.JSX.Element;
+declare function SelectWidget(props: SelectWidgetProps): React$1.JSX.Element;
 
 type Options$2 = {
     className?: string;
@@ -228,7 +241,7 @@ type Options$2 = {
     renderValue?: (items: SelectedItems<{
         label: string;
         value: string;
-    }>) => React.ReactNode;
+    }>) => React$1.ReactNode;
 };
 interface MultipleSelectWidgetProps extends WidgetProps {
     options: Options$2;
@@ -237,7 +250,7 @@ interface MultipleSelectWidgetUIOptions {
     'ui:widget': (props: MultipleSelectWidgetProps) => JSX.Element;
     'ui:options': Options$2;
 }
-declare function MultipleSelectWidget(props: MultipleSelectWidgetProps): React.JSX.Element;
+declare function MultipleSelectWidget(props: MultipleSelectWidgetProps): React$1.JSX.Element;
 
 type Options$1 = {
     className?: string;
@@ -261,7 +274,7 @@ interface TextareaWidgetUIOptions {
     'ui:widget': (props: TextareaWidgetProps) => JSX.Element;
     'ui:options': Options$1;
 }
-declare function TextareaWidget(props: TextareaWidgetProps): React.JSX.Element;
+declare function TextareaWidget(props: TextareaWidgetProps): React$1.JSX.Element;
 
 type Options = {
     className?: string;
@@ -281,19 +294,19 @@ interface DatePickerWidgetUIOptions {
     'ui:widget': (props: DatePickerWidgetProps) => string | Widget<any, RJSFSchema, any> | undefined;
     'ui:options': Options;
 }
-declare function DatePickerWidget({ label, options, value, required, disabled, uiSchema, onChange }: DatePickerWidgetProps): React.JSX.Element;
+declare function DatePickerWidget({ label, options, value, required, disabled, uiSchema, onChange }: DatePickerWidgetProps): React$1.JSX.Element;
 
 interface Props {
     formState: JSONSchemaFormState<any>;
     children?: any;
 }
-declare const JSONSchemaForm: (({ children, formState }: Props) => React.JSX.Element) & {
+declare const JSONSchemaForm: (({ children, formState }: Props) => React$1.JSX.Element) & {
     displayName: string;
 };
 
 declare class ComplexFormModalStore<T extends FormDataType> implements Store {
     sid: string;
-    provider: () => React.JSX.Element;
+    provider: () => React$1.JSX.Element;
     isOpen: boolean;
     title: string;
     formData?: T;
@@ -325,7 +338,7 @@ declare class FormModalStore<T = {
     [key: string]: any;
 }> implements Store {
     sid: string;
-    provider: () => React.JSX.Element;
+    provider: () => React$1.JSX.Element;
     isOpen: boolean;
     title: string;
     form: JSONSchemaFormState<T>;

package/dist/form.mjs

@@ -1,7 +1,7 @@
-import { getStyle } from './chunk-5SFAINN6.mjs';
+import { getStyle } from './chunk-K73JTEJQ.mjs';
 import { useStore, RootStore } from './chunk-IDKGZ5T4.mjs';
-import { helper } from './chunk-Q3AD5RHQ.mjs';
-import { _ } from './chunk-MGU3KYGC.mjs';
+import { helper } from './chunk-UPGWJHSO.mjs';
+import { _ } from './chunk-K7LFG5BA.mjs';
 import { cn } from './chunk-WYGQ3Y4R.mjs';
 import { __objRest, __spreadValues, __spreadProps } from './chunk-6F7H4PAA.mjs';
 import React7, { useEffect, useMemo, useState, useRef, useCallback, createRef } from 'react';
@@ -396,8 +396,7 @@ var JSONSchemaFormState = class {
       }
     };
     this.customValidate = (formData, errors) => errors;
-    const formRef = createRef();
-    Object.assign(this, args, { formRef });
+    Object.assign(this, args, { formRef: createRef() });
     if (this.reactive) {
       makeObservable(this, {
         formData: computed
@@ -655,29 +654,6 @@ var SubmitButton = ({ formKey, formState, buttonProps }) => {
     children || "Submit"
   ));
 };
-var CustomButton = ({ formKey, formState, buttonProps }) => {
-  return /* @__PURE__ */ React7.createElement("div", { className: "w-full flex gap-2" }, buttonProps.map((i, index) => {
-    const [loading, setLoading] = useState(false);
-    const _a = i, { className, onClick, title } = _a, rest = __objRest(_a, ["className", "onClick", "title"]);
-    return /* @__PURE__ */ React7.createElement(
-      Button,
-      __spreadValues({
-        className: cn("mt-4", className),
-        type: "submit",
-        color: "primary",
-        size: "sm",
-        isLoading: loading,
-        onClick: (e) => {
-          let formData = {};
-          const current = formState.formRef.current;
-          formData = current.state.formData;
-          onClick == null ? void 0 : onClick(formKey, formData, setLoading);
-        }
-      }, rest),
-      title
-    );
-  }));
-};
 function FieldTemplate(props) {
   const { id, classNames, label, help, required, description, errors, children, schema, uiSchema } = props;
   if (uiSchema && uiSchema["ui:widget"] === "hidden") {
@@ -919,8 +895,9 @@ var grid_default = Grid;
 
 // components/JSONForm/Layouts/gridLayout.tsx
 var GridLayout = (props) => {
+  var _b, _c, _d;
   const { layoutConfig, onBatchSubmit, batchSubmitButtonProps, onReady, theme } = props;
-  const _a = layoutConfig, { $type, $gridColumn } = _a, formLayout = __objRest(_a, ["$type", "$gridColumn"]);
+  const _a = layoutConfig, { $type, $gridColumn, $combFormsCustomRender } = _a, formLayout = __objRest(_a, ["$type", "$gridColumn", "$combFormsCustomRender"]);
   const formStates = getFormState(props, formLayout, theme);
   const cardStyle = getStyle(theme || "default", "Card");
   useEffect(() => {
@@ -928,13 +905,14 @@ var GridLayout = (props) => {
       onReady(formStates);
     }
   }, [formStates]);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(grid_default, { numItems: $gridColumn != null ? $gridColumn : 1, className: "gap-2" }, Object.keys(formStates).map((key) => {
-    var _a2;
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, (_b = $combFormsCustomRender == null ? void 0 : $combFormsCustomRender.Top) == null ? void 0 : _b.call($combFormsCustomRender, formStates), /* @__PURE__ */ React7.createElement(grid_default, { numItems: $gridColumn != null ? $gridColumn : 1, className: "gap-2" }, Object.keys(formStates).map((key) => {
+    var _a2, _b2, _c2, _d2, _e, _f, _g;
     const layout = formLayout[key];
-    return /* @__PURE__ */ React7.createElement(col_default, { numColSpan: (_a2 = layout == null ? void 0 : layout.colSpan) != null ? _a2 : 1, key, id: `form-${key}` }, /* @__PURE__ */ React7.createElement(Card, { className: cn("h-full m-0 p-4 shadow-sm border dark:border-[#3e3e3e]", cardStyle.className, layout == null ? void 0 : layout.cardCss) }, /* @__PURE__ */ React7.createElement("div", { className: cn("mb-2 font-bold text-center", layout == null ? void 0 : layout.titleBoxCss) }, (layout == null ? void 0 : layout.title) || key), /* @__PURE__ */ React7.createElement(JSONSchemaForm, { formState: formStates[key] }, (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React7.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps }), (layout == null ? void 0 : layout.customButtonProps) && /* @__PURE__ */ React7.createElement(CustomButton, { formKey: key, formState: formStates[key], buttonProps: layout.customButtonProps }))));
-  })), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React7.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React7.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })));
+    return /* @__PURE__ */ React7.createElement(col_default, { numColSpan: (_a2 = layout == null ? void 0 : layout.colSpan) != null ? _a2 : 1, key, id: `form-${key}` }, /* @__PURE__ */ React7.createElement(Card, { className: cn("h-full m-0 p-4 shadow-sm border dark:border-[#3e3e3e]", cardStyle.className, layout == null ? void 0 : layout.cardCss) }, /* @__PURE__ */ React7.createElement("div", { className: cn("mb-2 font-bold text-center", layout == null ? void 0 : layout.titleBoxCss) }, (layout == null ? void 0 : layout.title) || key), (_c2 = (_b2 = layout == null ? void 0 : layout.customRender) == null ? void 0 : _b2.Top) == null ? void 0 : _c2.call(_b2, key, formStates[key]), /* @__PURE__ */ React7.createElement(JSONSchemaForm, { formState: formStates[key] }, (_e = (_d2 = layout == null ? void 0 : layout.customRender) == null ? void 0 : _d2.SubmitButtonBefore) == null ? void 0 : _e.call(_d2, key, formStates[key]), (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React7.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps }), (_g = (_f = layout == null ? void 0 : layout.customRender) == null ? void 0 : _f.SubmitButtonAfter) == null ? void 0 : _g.call(_f, key, formStates[key]))));
+  })), (_c = $combFormsCustomRender == null ? void 0 : $combFormsCustomRender.SubmitButtonBefore) == null ? void 0 : _c.call($combFormsCustomRender, formStates), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React7.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React7.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })), (_d = $combFormsCustomRender == null ? void 0 : $combFormsCustomRender.SubmitButtonAfter) == null ? void 0 : _d.call($combFormsCustomRender, formStates));
 };
-var CollapsibleBox = ({ formKey, title, titleBoxCss, formState, submitButtonProps, customButtonProps }) => {
+var CollapsibleBox = ({ formKey, layout, formState }) => {
+  var _a, _b, _c, _d, _e, _f;
   const [opened, setOpened] = useState(true);
   return /* @__PURE__ */ React7.createElement("div", { id: `form-${formKey}` }, /* @__PURE__ */ React7.createElement(
     "div",
@@ -942,60 +920,61 @@ var CollapsibleBox = ({ formKey, title, titleBoxCss, formState, submitButtonProp
       className: "mt-5 mb-[10px] flex justify-between items-center cursor-pointer border-t-[1px solid #E5E5EA] py-[5px]",
       onClick: () => setOpened((o) => !o)
     },
-    /* @__PURE__ */ React7.createElement("div", { className: cn("text-gray-900 dark:text-gray-100 font-bold text-base", titleBoxCss) }, title),
+    /* @__PURE__ */ React7.createElement("div", { className: cn("text-gray-900 dark:text-gray-100 font-bold text-base", layout == null ? void 0 : layout.titleBoxCss) }, (layout == null ? void 0 : layout.title) || formKey),
     opened ? /* @__PURE__ */ React7.createElement(ChevronUp, { size: 18, className: "text-[#717179] dark:text-[#A1A1A9]" }) : /* @__PURE__ */ React7.createElement(ChevronDown, { size: 18, className: "text-[#717179] dark:text-[#A1A1A9]" })
-  ), /* @__PURE__ */ React7.createElement("div", { className: cn("mt-2", opened ? "block" : "hidden") }, /* @__PURE__ */ React7.createElement(JSONSchemaForm, { formState }, submitButtonProps && /* @__PURE__ */ React7.createElement(SubmitButton, { formKey, formState, buttonProps: submitButtonProps }), customButtonProps && /* @__PURE__ */ React7.createElement(CustomButton, { formKey, formState, buttonProps: customButtonProps }))));
+  ), /* @__PURE__ */ React7.createElement("div", { className: cn("mt-2", opened ? "block" : "hidden") }, (_b = (_a = layout == null ? void 0 : layout.customRender) == null ? void 0 : _a.Top) == null ? void 0 : _b.call(_a, formKey, formState), /* @__PURE__ */ React7.createElement(JSONSchemaForm, { formState }, (_d = (_c = layout == null ? void 0 : layout.customRender) == null ? void 0 : _c.SubmitButtonBefore) == null ? void 0 : _d.call(_c, formKey, formState), (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React7.createElement(SubmitButton, { formKey, formState, buttonProps: layout.submitButtonProps }), (_f = (_e = layout == null ? void 0 : layout.customRender) == null ? void 0 : _e.SubmitButtonAfter) == null ? void 0 : _f.call(_e, formKey, formState))));
 };
 var ListLayout = (props) => {
+  var _b, _c, _d;
   const { layoutConfig = {}, onBatchSubmit, batchSubmitButtonProps, onReady, theme } = props;
-  const _a = layoutConfig, formLayout = __objRest(_a, ["$type"]);
+  const _a = layoutConfig, { $type, $combFormsCustomRender } = _a, formLayout = __objRest(_a, ["$type", "$combFormsCustomRender"]);
   const formStates = getFormState(props, formLayout, theme);
   useEffect(() => {
     if (formStates && onReady) {
       onReady(formStates);
     }
   }, [formStates]);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, Object.keys(formStates).map((key) => {
-    const layout = formLayout[key];
-    const formState = formStates[key];
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, (_b = $combFormsCustomRender == null ? void 0 : $combFormsCustomRender.Top) == null ? void 0 : _b.call($combFormsCustomRender, formStates), Object.keys(formStates).map((key) => {
     return /* @__PURE__ */ React7.createElement(
       CollapsibleBox,
       {
         key,
         formKey: key,
-        title: (layout == null ? void 0 : layout.title) || key,
-        titleBoxCss: layout == null ? void 0 : layout.titleBoxCss,
-        formState,
-        submitButtonProps: layout == null ? void 0 : layout.submitButtonProps,
-        customButtonProps: layout == null ? void 0 : layout.customButtonProps
+        formState: formStates[key],
+        layout: formLayout[key]
       }
     );
-  }), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React7.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React7.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })));
+  }), (_c = $combFormsCustomRender == null ? void 0 : $combFormsCustomRender.SubmitButtonBefore) == null ? void 0 : _c.call($combFormsCustomRender, formStates), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React7.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React7.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })), (_d = $combFormsCustomRender == null ? void 0 : $combFormsCustomRender.SubmitButtonAfter) == null ? void 0 : _d.call($combFormsCustomRender, formStates));
 };
 var SimpleLayout = (props) => {
+  var _b, _c, _d;
   const { layoutConfig = {}, onBatchSubmit, batchSubmitButtonProps, onReady, theme } = props;
-  const _a = layoutConfig, formLayout = __objRest(_a, ["$type"]);
+  const _a = layoutConfig, { $type, $combFormsCustomRender } = _a, formLayout = __objRest(_a, ["$type", "$combFormsCustomRender"]);
   const formStates = getFormState(props, formLayout, theme);
   useEffect(() => {
     if (formStates && onReady) {
       onReady(formStates);
     }
   }, [formStates]);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "space-y-2" }, Object.keys(formStates).map((key) => {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, (_b = $combFormsCustomRender == null ? void 0 : $combFormsCustomRender.Top) == null ? void 0 : _b.call($combFormsCustomRender, formStates), /* @__PURE__ */ React7.createElement("div", { className: "space-y-2" }, Object.keys(formStates).map((key) => {
+    var _a2, _b2, _c2, _d2, _e, _f;
     const layout = formLayout[key];
-    return /* @__PURE__ */ React7.createElement("div", { key, id: `form-${key}` }, /* @__PURE__ */ React7.createElement(JSONSchemaForm, { formState: formStates[key] }, (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React7.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps })));
-  })), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React7.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React7.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })));
+    return /* @__PURE__ */ React7.createElement("div", { key, id: `form-${key}` }, (_b2 = (_a2 = layout == null ? void 0 : layout.customRender) == null ? void 0 : _a2.Top) == null ? void 0 : _b2.call(_a2, key, formStates[key]), /* @__PURE__ */ React7.createElement(JSONSchemaForm, { formState: formStates[key] }, (_d2 = (_c2 = layout == null ? void 0 : layout.customRender) == null ? void 0 : _c2.SubmitButtonBefore) == null ? void 0 : _d2.call(_c2, key, formStates[key]), (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React7.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps }), (_f = (_e = layout == null ? void 0 : layout.customRender) == null ? void 0 : _e.SubmitButtonAfter) == null ? void 0 : _f.call(_e, key, formStates[key])));
+  })), (_c = $combFormsCustomRender == null ? void 0 : $combFormsCustomRender.SubmitButtonBefore) == null ? void 0 : _c.call($combFormsCustomRender, formStates), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React7.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React7.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })), (_d = $combFormsCustomRender == null ? void 0 : $combFormsCustomRender.SubmitButtonAfter) == null ? void 0 : _d.call($combFormsCustomRender, formStates));
 };
 var TabLayout = (props) => {
+  var _b, _c, _d;
   const { layoutConfig = {}, onBatchSubmit, batchSubmitButtonProps, onReady, theme } = props;
   const _a = layoutConfig, {
     $type,
     $tabsProps = {
       color: "default"
-    }
+    },
+    $combFormsCustomRender
   } = _a, formLayout = __objRest(_a, [
     "$type",
-    "$tabsProps"
+    "$tabsProps",
+    "$combFormsCustomRender"
   ]);
   const formStates = useMemo(() => getFormState(props, formLayout, theme), [props.formData, props.formConfig, props.layoutConfig]);
   const formKeys = Object.keys(formStates);
@@ -1017,7 +996,8 @@ var TabLayout = (props) => {
       const layout = formLayout[key];
       return /* @__PURE__ */ React7.createElement(Tab, { id: `form-${key}-tab-menu`, key, title: /* @__PURE__ */ React7.createElement("div", { className: layout == null ? void 0 : layout.titleBoxCss }, (layout == null ? void 0 : layout.title) || key) });
     })
-  ), formKeys.map((key) => {
+  ), (_b = $combFormsCustomRender == null ? void 0 : $combFormsCustomRender.Top) == null ? void 0 : _b.call($combFormsCustomRender, formStates), formKeys.map((key) => {
+    var _a2, _b2, _c2, _d2, _e, _f;
     const layout = formLayout[key];
     return /* @__PURE__ */ React7.createElement(
       "div",
@@ -1026,9 +1006,10 @@ var TabLayout = (props) => {
         id: `form-${key}-tab-content`,
         className: cn("mt-4", selectedTab === key ? "" : "hidden")
       },
-      /* @__PURE__ */ React7.createElement(JSONSchemaForm, { formState: formStates[key] }, (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React7.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps }), (layout == null ? void 0 : layout.customButtonProps) && /* @__PURE__ */ React7.createElement(CustomButton, { formKey: key, formState: formStates[key], buttonProps: layout.customButtonProps }))
+      (_b2 = (_a2 = layout == null ? void 0 : layout.customRender) == null ? void 0 : _a2.Top) == null ? void 0 : _b2.call(_a2, key, formStates[key]),
+      /* @__PURE__ */ React7.createElement(JSONSchemaForm, { formState: formStates[key] }, (_d2 = (_c2 = layout == null ? void 0 : layout.customRender) == null ? void 0 : _c2.SubmitButtonBefore) == null ? void 0 : _d2.call(_c2, key, formStates[key]), (layout == null ? void 0 : layout.submitButtonProps) && /* @__PURE__ */ React7.createElement(SubmitButton, { formKey: key, formState: formStates[key], buttonProps: layout.submitButtonProps }), (_f = (_e = layout == null ? void 0 : layout.customRender) == null ? void 0 : _e.SubmitButtonAfter) == null ? void 0 : _f.call(_e, key, formStates[key]))
     );
-  }), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React7.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React7.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })));
+  }), (_c = $combFormsCustomRender == null ? void 0 : $combFormsCustomRender.SubmitButtonBefore) == null ? void 0 : _c.call($combFormsCustomRender, formStates), (onBatchSubmit || (batchSubmitButtonProps == null ? void 0 : batchSubmitButtonProps.onBatchSubmit)) && /* @__PURE__ */ React7.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React7.createElement(BatchSubmitButton, { formStates, onSubmit: onBatchSubmit, buttonProps: batchSubmitButtonProps })), (_d = $combFormsCustomRender == null ? void 0 : $combFormsCustomRender.SubmitButtonAfter) == null ? void 0 : _d.call($combFormsCustomRender, formStates));
 };
 
 // components/JSONForm/index.tsx