dynamic-modal 1.1.24 → 1.1.26

package/README.md

@@ -441,6 +441,34 @@ dynamically.
 }
 ```
 
+### `watcher`
+
+Use `watcher` when you want to display a derived read-only value built from
+other fields in the same modal.
+
+`watcher` listens to the fields listed in `watchList`, joins their current
+values, and renders the result using your custom `Input` component in disabled
+mode.
+
+Example:
+
+```ts
+{
+  elementType: 'watcher',
+  label: 'Full name preview',
+  watchList: ['firstName', 'middleName', 'lastName'],
+  style: {
+    width: '100%',
+  },
+}
+```
+
+Typical use cases:
+
+- preview a full name from multiple inputs
+- build a quick summary field for the user
+- show a composed display value without storing it as a real form field
+
 ## Advanced conditions with async actions
 
 `renderIf` and `enableIf` can also use async logic instead of static value maps.
@@ -462,6 +490,52 @@ renderIf: {
 
 The same shape works for `enableIf`.
 
+## Variants and combinations (`renderIf`, `enableIf`, `liveData`)
+
+The library supports these variants:
+
+| Feature | Variant | Shape |
+| --- | --- | --- |
+| `renderIf` | static criteria | `renderIf: { fieldName: ['value1', 'value2'] }` |
+| `renderIf` | wildcard | `renderIf: { fieldName: ['*'] }` |
+| `renderIf` | async action | `renderIf: { condition: ['fieldName'], action: async (...) => boolean }` |
+| `enableIf` | static criteria | `enableIf: { fieldName: ['value1', 'value2'] }` |
+| `enableIf` | wildcard | `enableIf: { fieldName: ['*'] }` |
+| `enableIf` | async action | `enableIf: { condition: ['fieldName'], action: async (...) => boolean }` |
+| `liveData` | single trigger field | `liveData: { condition: ['fieldName'], action: async (...) => IOption[] }` |
+| `liveData` | multiple trigger fields | `liveData: { condition: ['fieldA', 'fieldB'], action: async (...) => IOption[] }` |
+
+Supported combinations by field type:
+
+- `input`, `textarea`, `toggle`, `upload`, `custom-upload`: `renderIf` + `enableIf`
+- `select`: `renderIf` + `enableIf` + `liveData`
+- `table`: `renderIf` + `liveData`
+- `watcher`: no `renderIf`/`enableIf`/`liveData` contract in its interface
+
+Behavior note about multiple observed fields:
+
+- In static mode (`Record<field, values>`), conditions are evaluated per field-change event.
+- In async mode (`condition: [...]`), `action` receives the changed field value as first argument and the whole form as second argument.
+- For `liveData`, when options refresh, the target field value is reset to its default (`defaultValue`) or `[]` in multi-select mode.
+
+Minimal combination example (`select` with all three):
+
+```ts
+{
+  elementType: 'select',
+  label: 'Options',
+  name: 'optionId',
+  options: [],
+  validation: { required: true, message: 'Required' },
+  renderIf: { typeId: ['*'] },
+  enableIf: { statusId: ['approved'] },
+  liveData: {
+    condition: ['typeId', 'statusId'],
+    action: async (changedValue, formData) => readOptions(changedValue, formData),
+  },
+}
+```
+
 ## Examples by use case
 
 ### 1. Basic modal
@@ -582,6 +656,40 @@ reservedData: {
 
 That data will be merged into the object returned by `out`.
 
+### 6. Compose a read-only value with `watcher`
+
+Use `watcher` when you want the modal to display a value derived from multiple
+fields while the user types.
+
+```ts
+fields: [
+  {
+    elementType: 'input',
+    label: 'First name',
+    name: 'firstName',
+    validation: { required: true, message: 'Required' },
+  },
+  {
+    elementType: 'input',
+    label: 'Last name',
+    name: 'lastName',
+    validation: { required: true, message: 'Required' },
+  },
+  {
+    elementType: 'watcher',
+    label: 'Preview',
+    watchList: ['firstName', 'lastName'],
+    style: { width: '100%' },
+  },
+];
+```
+
+Important notes:
+
+- `watcher` is display-only
+- it does not submit its own value in the modal result
+- it is useful for previews, concatenations, and human-readable summaries
+
 ## Configuration reference
 
 ### Modal-level config
@@ -598,6 +706,13 @@ Common properties of `IModalConfigProps`:
 - `minHeightBody`: minimum body height
 - `useSubmit`: if `false`, action button uses manual validation mode
 - `useBlur`: enables backdrop blur style
+- `layout`: section-level customization for:
+  - `container`
+  - `header` (`showDivider?: boolean`)
+  - `title`
+  - `body`
+  - `footer` (`showDivider?: boolean`)
+  Each section supports `className` and `style`.
 - `actions.action`: main action button props
 - `actions.cancel`: optional cancel button props
 - `actions.containerStyle`: style for the action buttons container
@@ -611,11 +726,23 @@ Most form fields share:
 - `placeholder`
 - `defaultValue`
 - `style`
+- `customProperties`
 - `disabled`
 - `validation`
 - `renderIf`
 - `enableIf`
 
+Most field interfaces now also accept native HTML attributes according to the
+element type (`input`, `textarea`, `button`, `select`, etc.). These extra props
+are forwarded with the rest of the field config.
+
+`watcher` uses:
+
+- `label`
+- `style`
+- `customProperties`
+- `watchList`
+
 Validation supports:
 
 - `required`

package/dist/components/make-select/make-select.js

@@ -48,14 +48,17 @@ const MakeSelect = ({ element, control, watch, setValue, unregister, }) => {
                     }
                 });
             }
-            if (elementLiveData) {
+            const shouldResolveLiveData = Boolean(elementLiveData?.condition?.includes(name));
+            if (shouldResolveLiveData) {
                 setLiveSearching(true);
                 checkLiveData(formData, { name, type })
                     .then((options) => {
                     if (options === undefined || options === null)
                         return;
                     setLiveData(options);
-                    setValue(elementName, options);
+                    setValue(elementName, inputProps.isMulti
+                        ? inputProps.defaultValue ?? []
+                        : inputProps.defaultValue ?? '');
                 })
                     .finally(() => {
                     setLiveSearching(false);

package/dist/src/components/make-select/make-select.js

@@ -38,7 +38,9 @@ const MakeSelect = ({ element, control, watch, setValue, unregister, }) => {
         setLiveSearching,
         unregister,
         setValue,
-        liveDataResetValue: inputProps.defaultValue ?? [],
+        liveDataResetValue: inputProps.isMulti
+            ? (inputProps.defaultValue ?? [])
+            : (inputProps.defaultValue ?? ''),
     });
     if (!render)
         return null;

package/dist/src/hooks/use-conditional-field.js

@@ -21,7 +21,8 @@ const useConditionalField = ({ watch, elementName, renderIf, enableIf, liveDataC
                 setRender(renderStatus);
             }
         }
-        if (liveDataConfig && setLiveData) {
+        const shouldResolveLiveData = Boolean(liveDataConfig?.condition?.includes(meta.name));
+        if (shouldResolveLiveData && setLiveData) {
             const requestId = ++liveRequestId.current;
             setLiveSearching?.(true);
             try {

package/dist/src/interfaces/component-state.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import { CSSProperties, FC, PropsWithChildren, ReactNode } from 'react';
 import { FieldError } from 'react-hook-form';
 import { IOption } from './option';
 import { IMakeInput } from './make-input';
@@ -14,7 +14,17 @@ export interface IComponentAditionalProps {
     error?: FieldError;
     liveSearching?: boolean;
 }
+export interface IModalSectionComponentProps {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
 export interface IComponentState {
+    ModalContainer?: FC<IModalSectionComponentProps>;
+    ModalHeader?: FC<IModalSectionComponentProps>;
+    ModalTitle?: FC<IModalSectionComponentProps>;
+    ModalBody?: FC<IModalSectionComponentProps>;
+    ModalFooter?: FC<IModalSectionComponentProps>;
     ModalButtonCancel: FC<Omit<IMakeButton, 'elementType'>>;
     ModalButtonAction: FC<Omit<IMakeButton, 'elementType'>>;
     Button: FC<Omit<IMakeButton, 'elementType'>>;

package/dist/src/interfaces/custom-upload.d.ts

@@ -1,5 +1,6 @@
-import { ChangeEvent, CSSProperties } from 'react';
-export interface ICustomUpload {
+import { ChangeEvent, CSSProperties, InputHTMLAttributes } from 'react';
+type ICustomUploadHtmlProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'style' | 'name' | 'disabled' | 'value' | 'onChange' | 'type'>;
+export interface ICustomUpload extends ICustomUploadHtmlProps {
     id?: string;
     value?: string;
     onChange: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -10,3 +11,4 @@ export interface ICustomUpload {
     name: string;
     disabled?: boolean;
 }
+export {};

package/dist/src/interfaces/field.d.ts

@@ -10,6 +10,7 @@ export interface IField {
     id?: string;
     label?: string;
     style?: CSSProperties;
+    customProperties?: Record<string, any>;
     placeholder?: string;
     defaultValue?: any;
     renderIf?: IModalRenderCondition;

package/dist/src/interfaces/input-upload.d.ts

@@ -1,12 +1,13 @@
-import { ChangeEvent, CSSProperties } from 'react';
+import { ChangeEvent, CSSProperties, InputHTMLAttributes } from 'react';
+type IInputUploadHtmlProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'style' | 'name' | 'disabled' | 'value' | 'onChange' | 'type'>;
 export interface IFileResult {
     name: string;
     size: number;
     data: string;
 }
-export interface IInputUpload {
+export interface IInputUpload extends IInputUploadHtmlProps {
     id?: string;
-    value?: string;
+    value?: string | number | readonly string[];
     onChange: (event: ChangeEvent<HTMLInputElement> | IFileResult | FileList | null) => void;
     accept?: string;
     label?: string;
@@ -17,3 +18,4 @@ export interface IInputUpload {
     disabled?: boolean;
     read?: boolean;
 }
+export {};

package/dist/src/interfaces/make-button.d.ts

@@ -1,12 +1,14 @@
-import { CSSProperties, ReactNode } from 'react';
-import { IFieldProps } from './field';
+import { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react';
 import { FieldValues, UseFormGetValues } from 'react-hook-form';
-export interface IMakeButton {
+import { IFieldProps } from './field';
+type IButtonHtmlProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'id' | 'disabled' | 'className' | 'style' | 'type' | 'onClick' | 'children' | 'color'>;
+export interface IMakeButton extends IButtonHtmlProps {
     id?: string;
     elementType: 'button';
     disabled?: boolean;
     className?: string;
     style?: CSSProperties;
+    customProperties?: Record<string, any>;
     variant?: string;
     text?: string;
     type?: 'button' | 'submit' | 'reset';
@@ -18,3 +20,4 @@ export interface IMakeButtonProps extends IFieldProps {
     element: Omit<IMakeButton, 'elementType'>;
     getValues: UseFormGetValues<FieldValues>;
 }
+export {};

package/dist/src/interfaces/make-custom-upload.d.ts

@@ -1,7 +1,10 @@
+import { InputHTMLAttributes } from 'react';
 import { IField, IFieldProps } from './field';
-export interface IMakeCustomUpload extends IField {
+type ICustomUploadHtmlProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'name' | 'id' | 'style' | 'onChange' | 'value' | 'defaultValue' | 'disabled' | 'type'>;
+export interface IMakeCustomUpload extends IField, ICustomUploadHtmlProps {
     elementType: 'custom-upload';
 }
 export interface IMakeCustomUploadProps extends IFieldProps {
     element: Omit<IMakeCustomUpload, 'elementType'>;
 }
+export {};

package/dist/src/interfaces/make-description.d.ts

@@ -1,7 +1,9 @@
-import { CSSProperties, FC } from 'react';
+import { CSSProperties, FC, HTMLAttributes } from 'react';
 import { IFieldProps } from './field';
-export interface IMakeDescription {
+type IDescriptionHtmlProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'>;
+export interface IMakeDescription extends IDescriptionHtmlProps {
     elementType: 'text';
+    customProperties?: Record<string, any>;
     text?: string;
     containerStyle?: CSSProperties;
     textStyle?: CSSProperties;
@@ -11,3 +13,4 @@ export interface IMakeDescription {
 export interface IMakeDescriptionProps extends IFieldProps {
     element: Omit<IMakeDescription, 'elementType'>;
 }
+export {};

package/dist/src/interfaces/make-field-group.d.ts

@@ -1,8 +1,10 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, HTMLAttributes } from 'react';
 import { IFieldProps } from './field';
 import { IModalField } from './modal';
-export interface IMakeFieldGroup {
+type IFieldGroupHtmlProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'>;
+export interface IMakeFieldGroup extends IFieldGroupHtmlProps {
     elementType: 'group';
+    customProperties?: Record<string, any>;
     groups: Array<IModalField>;
     style?: CSSProperties;
     title?: string;
@@ -10,3 +12,4 @@ export interface IMakeFieldGroup {
 export interface IMakeFieldGroupProps extends IFieldProps {
     element: IMakeFieldGroup;
 }
+export {};

package/dist/src/interfaces/make-input.d.ts

@@ -1,12 +1,14 @@
-import { HTMLInputTypeAttribute } from 'react';
+import { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react';
 import { IField, IFieldProps } from './field';
-export interface IMakeInput extends IField {
+type IInputHtmlProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'name' | 'id' | 'style' | 'onChange' | 'value' | 'placeholder' | 'defaultValue' | 'disabled' | 'type' | 'min' | 'max'>;
+export interface IMakeInput extends IField, IInputHtmlProps {
     elementType: 'input';
     placeholder?: string;
-    min?: string;
-    max?: string;
+    min?: string | number;
+    max?: string | number;
     type?: HTMLInputTypeAttribute;
 }
 export interface IMakeInputProps extends IFieldProps {
     element: Omit<IMakeInput, 'elementType'>;
 }
+export {};

package/dist/src/interfaces/make-select.d.ts

@@ -1,7 +1,9 @@
+import { SelectHTMLAttributes } from 'react';
 import { IField, IFieldProps } from './field';
 import { IModalLiveDataCondition } from './modal';
 import { IOption } from './option';
-export interface IMakeSelect extends IField {
+type ISelectHtmlProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'name' | 'id' | 'style' | 'onChange' | 'value' | 'defaultValue' | 'disabled'>;
+export interface IMakeSelect extends IField, ISelectHtmlProps {
     elementType: 'select';
     options: Array<IOption>;
     liveData?: IModalLiveDataCondition;
@@ -11,3 +13,4 @@ export interface IMakeSelect extends IField {
 export interface IMakeSelectProps extends IFieldProps {
     element: Omit<IMakeSelect, 'elementType'>;
 }
+export {};

package/dist/src/interfaces/make-table.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, JSX } from 'react';
+import { CSSProperties, JSX, TableHTMLAttributes } from 'react';
 import { IField, IFieldProps } from './field';
 import { IModalLiveDataCondition } from './modal';
 export interface ITableColumn extends Pick<IField, 'style'> {
@@ -9,7 +9,8 @@ export interface ITableColumn extends Pick<IField, 'style'> {
     Icon?: (props: any) => JSX.Element;
     action?: (row: any) => void;
 }
-export interface IMakeTable extends Omit<IField, 'label' | 'defaultValue' | 'validation' | 'disabled' | 'enableIf' | 'id'> {
+type ITableHtmlProps = Omit<TableHTMLAttributes<HTMLTableElement>, 'style'>;
+export interface IMakeTable extends Omit<IField, 'label' | 'defaultValue' | 'validation' | 'disabled' | 'enableIf' | 'id'>, ITableHtmlProps {
     elementType: 'table';
     selectValueName: string;
     selectTitleName: string;
@@ -24,3 +25,4 @@ export interface IMakeTable extends Omit<IField, 'label' | 'defaultValue' | 'val
 export interface IMakeTableProps extends Omit<IFieldProps, 'unregister'> {
     element: Omit<IMakeTable, 'elementType'>;
 }
+export {};

package/dist/src/interfaces/make-textarea.d.ts

@@ -1,5 +1,7 @@
+import { TextareaHTMLAttributes } from 'react';
 import { IField, IFieldProps } from './field';
-export interface IMakeTextarea extends IField {
+type ITextareaHtmlProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'name' | 'id' | 'style' | 'onChange' | 'value' | 'placeholder' | 'defaultValue' | 'disabled' | 'cols' | 'rows'>;
+export interface IMakeTextarea extends IField, ITextareaHtmlProps {
     elementType: 'textarea';
     cols?: number;
     rows?: number;
@@ -7,3 +9,4 @@ export interface IMakeTextarea extends IField {
 export interface IMakeTextareaProps extends IFieldProps {
     element: Omit<IMakeTextarea, 'elementType'>;
 }
+export {};

package/dist/src/interfaces/make-toggle.d.ts

@@ -1,7 +1,10 @@
+import { InputHTMLAttributes } from 'react';
 import { IField, IFieldProps } from './field';
-export interface IMakeToggle extends IField {
+type IToggleHtmlProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'name' | 'id' | 'style' | 'onChange' | 'value' | 'checked' | 'defaultValue' | 'disabled' | 'type'>;
+export interface IMakeToggle extends IField, IToggleHtmlProps {
     elementType: 'toggle';
 }
 export interface IMakeToggleProps extends IFieldProps {
     element: Omit<IMakeToggle, 'elementType'>;
 }
+export {};

package/dist/src/interfaces/make-upload.d.ts

@@ -1,5 +1,7 @@
+import { InputHTMLAttributes } from 'react';
 import { IField, IFieldProps } from './field';
-export interface IMakeUpload extends Omit<IField, 'defaultValue'> {
+type IUploadHtmlProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'name' | 'id' | 'style' | 'onChange' | 'value' | 'defaultValue' | 'disabled' | 'type' | 'accept'>;
+export interface IMakeUpload extends Omit<IField, 'defaultValue'>, IUploadHtmlProps {
     elementType: 'upload';
     helpText?: string;
     read: boolean;
@@ -10,3 +12,4 @@ export interface IMakeUpload extends Omit<IField, 'defaultValue'> {
 export interface IMakeUploadProps extends IFieldProps {
     element: Omit<IMakeUpload, 'elementType'>;
 }
+export {};

package/dist/src/interfaces/make-watcher.d.ts

@@ -1,8 +1,12 @@
+import { InputHTMLAttributes } from 'react';
 import { IField, IFieldProps } from './field';
-export interface IMakeWatcher extends Pick<IField, 'style' | 'label'> {
+type IWatcherBaseProps = Pick<IField, 'style' | 'label' | 'customProperties'>;
+type IWatcherHtmlProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'name' | 'id' | 'style' | 'onChange' | 'value' | 'defaultValue' | 'disabled' | 'type'>;
+export interface IMakeWatcher extends IWatcherBaseProps, IWatcherHtmlProps {
     elementType: 'watcher';
     watchList: Array<string>;
 }
 export interface IMakeWatcherProps extends IFieldProps {
     element: Omit<IMakeWatcher, 'elementType'>;
 }
+export {};

package/dist/src/interfaces/modal.d.ts

@@ -23,9 +23,25 @@ export type IModalLiveDataCondition = {
     action: (data: string, ...args: any[]) => Promise<Array<IOption>>;
     condition: Array<string>;
 };
+export interface IModalSectionStyleConfig {
+    className?: string;
+    style?: CSSProperties;
+}
+export interface IModalLayoutConfig {
+    container?: IModalSectionStyleConfig;
+    header?: IModalSectionStyleConfig & {
+        showDivider?: boolean;
+    };
+    title?: IModalSectionStyleConfig;
+    body?: IModalSectionStyleConfig;
+    footer?: IModalSectionStyleConfig & {
+        showDivider?: boolean;
+    };
+}
 export interface IModalConfigProps {
     reservedData?: Record<string, any>;
     title: string;
+    layout?: IModalLayoutConfig;
     fields: Array<IModalField>;
     out: (data: any) => void;
     onClose?: () => void;

package/dist/src/modal.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { useContext, useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -35,12 +35,8 @@ const renderModalField = (field, index, { fieldProps, getValues }) => {
     const fieldKey = getFieldKey(field, index);
     return elementType === 'input' ? (_createElement(MakeInput, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'select' ? (_createElement(MakeSelect, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'textarea' ? (_createElement(MakeTextarea, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'toggle' ? (_createElement(MakeToggle, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'text' ? (_createElement(MakeDescription, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'upload' ? (_createElement(MakeUpload, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'custom-upload' ? (_createElement(MakeCustomUpload, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'watcher' ? (_createElement(MakeWatcher, { ...fieldProps, key: fieldKey, element: element })) : elementType === 'button' ? (_createElement(MakeButton, { ...fieldProps, key: fieldKey, element: element, getValues: getValues })) : elementType === 'table' ? (_createElement(MakeTable, { ...fieldProps, key: fieldKey, element: element })) : null;
 };
-const ModalFields = ({ modalReady, fieldProps, getValues, }) => {
-    return (_jsx("div", { className: "flex flex-col gap-4 py-4", style: {
-            overflowY: modalReady.overFlowBody ? 'auto' : undefined,
-            height: modalReady.overFlowBody,
-            minHeight: modalReady.minHeightBody,
-        }, children: modalReady.fields.map((element, index) => {
+const ModalFields = ({ modalReady, fieldProps, getValues, BodyComponent, bodyClassName, bodyStyle, }) => {
+    const bodyContent = (_jsx(_Fragment, { children: modalReady.fields.map((element, index) => {
             if (element.elementType !== 'group') {
                 return renderModalField(element, index, { fieldProps, getValues });
             }
@@ -50,15 +46,36 @@ const ModalFields = ({ modalReady, fieldProps, getValues, }) => {
             const hideDiv = groupElements.every((component) => component === null);
             return (_jsxs("div", { className: `flex flex-col w-full gap-2 ${hideDiv && 'hidden'}`, children: [element.title && (_jsx("h3", { className: "font-bold border-b-2 pb-2 mb-2", children: element.title })), _jsx("div", { className: "flex gap-4 w-full", style: element.style, children: groupElements })] }, getFieldKey(element, index)));
         }) }));
+    const currentBodyClassName = `flex flex-col gap-4 py-4${bodyClassName ? ` ${bodyClassName}` : ''}`;
+    const currentBodyStyle = {
+        overflowY: modalReady.overFlowBody ? 'auto' : undefined,
+        height: modalReady.overFlowBody,
+        minHeight: modalReady.minHeightBody,
+        ...bodyStyle,
+    };
+    if (BodyComponent) {
+        return (_jsx(BodyComponent, { className: currentBodyClassName, style: currentBodyStyle, children: bodyContent }));
+    }
+    return (_jsx("div", { className: currentBodyClassName, style: currentBodyStyle, children: bodyContent }));
 };
-const ModalActions = ({ modalReady, closeHandler, manualSubmit, }) => {
+const ModalActions = ({ modalReady, closeHandler, manualSubmit, FooterComponent, footerClassName, footerStyle, showFooterDivider = true, }) => {
     const { ModalButtonAction, ModalButtonCancel } = useContext(ComponentStateContext);
-    return (_jsxs("div", { className: "flex gap-4 items-center justify-center border-t p-2", style: modalReady.actions.containerStyle, children: [modalReady.actions.cancel && (_jsx(ModalButtonCancel, { ...modalReady.actions.cancel, onClick: closeHandler })), getUseSubmit(modalReady) ? (_jsx(ModalButtonAction, { ...modalReady.actions.action, type: "submit" })) : (_jsx(ModalButtonAction, { ...modalReady.actions.action, onClick: manualSubmit, type: "button" }))] }));
+    const footerContent = (_jsxs(_Fragment, { children: [modalReady.actions.cancel && (_jsx(ModalButtonCancel, { ...modalReady.actions.cancel, onClick: closeHandler })), getUseSubmit(modalReady) ? (_jsx(ModalButtonAction, { ...modalReady.actions.action, type: "submit" })) : (_jsx(ModalButtonAction, { ...modalReady.actions.action, onClick: manualSubmit, type: "button" }))] }));
+    const currentFooterClassName = `flex gap-4 items-center justify-center p-2${showFooterDivider ? ' border-t' : ''}${footerClassName ? ` ${footerClassName}` : ''}`;
+    const currentFooterStyle = {
+        ...footerStyle,
+        ...modalReady.actions.containerStyle,
+    };
+    if (FooterComponent) {
+        return (_jsx(FooterComponent, { className: currentFooterClassName, style: currentFooterStyle, children: footerContent }));
+    }
+    return (_jsx("div", { className: currentFooterClassName, style: currentFooterStyle, children: footerContent }));
 };
 export const Modal = ({ open, close, config }) => {
     const [modalReady, setModalReady] = useState(undefined);
     const [defaultLoaded, setDefaultLoaded] = useState(false);
     const { control, handleSubmit, getValues, unregister, setValue, watch, trigger, reset, getFieldState, } = useForm();
+    const { ModalContainer, ModalHeader, ModalTitle, ModalBody, ModalFooter } = useContext(ComponentStateContext);
     const formValueHandler = (element) => {
         if ([
             'group',
@@ -148,6 +165,14 @@ export const Modal = ({ open, close, config }) => {
     }, [defaultLoaded, modalReady]);
     if (!modalReady)
         return null;
-    return (_jsx(Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal', useBlur: modalReady.useBlur, children: _jsx("div", { className: `rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px] ${modalReady.useBlur && 'shadow-md border border-gray-200'}`, style: modalReady.style, children: _jsxs("form", { className: "flex flex-col p-4 gap-4", autoComplete: "off", onSubmit: handleSubmit(actionHandler), children: [_jsx("h2", { className: "text-bold text-center border-b pb-4 font-semibold", children: modalReady.title }), _jsx(ModalFields, { modalReady: modalReady, fieldProps: fieldProps, getValues: getValues }), _jsx(ModalActions, { modalReady: modalReady, closeHandler: closeHandler, manualSubmit: manualSubmit })] }) }) }));
+    const { container: containerLayout, header: headerLayout, title: titleLayout, body: bodyLayout, footer: footerLayout, } = modalReady.layout ?? {};
+    const showHeaderDivider = headerLayout?.showDivider !== false;
+    const showFooterDivider = footerLayout?.showDivider !== false;
+    const headerClassName = `w-full text-center${showHeaderDivider ? ' border-b pb-4' : ''}${headerLayout?.className ? ` ${headerLayout.className}` : ''}`;
+    const titleClassName = `font-semibold${titleLayout?.className ? ` ${titleLayout.className}` : ''}`;
+    const titleContent = ModalTitle ? (_jsx(ModalTitle, { className: titleClassName, style: titleLayout?.style, children: modalReady.title })) : (_jsx("h2", { className: titleClassName, style: titleLayout?.style, children: modalReady.title }));
+    const headerContent = ModalHeader ? (_jsx(ModalHeader, { className: headerClassName, style: headerLayout?.style, children: titleContent })) : (_jsx("div", { className: headerClassName, style: headerLayout?.style, children: titleContent }));
+    const modalContent = (_jsxs("form", { className: "flex flex-col p-4 gap-4", autoComplete: "off", onSubmit: handleSubmit(actionHandler), children: [headerContent, _jsx(ModalFields, { modalReady: modalReady, fieldProps: fieldProps, getValues: getValues, BodyComponent: ModalBody, bodyClassName: bodyLayout?.className, bodyStyle: bodyLayout?.style }), _jsx(ModalActions, { modalReady: modalReady, closeHandler: closeHandler, manualSubmit: manualSubmit, FooterComponent: ModalFooter, footerClassName: footerLayout?.className, footerStyle: footerLayout?.style, showFooterDivider: showFooterDivider })] }));
+    return (_jsx(Portal, { closeTime: 200, portalOpen: open, portalTag: '#modal-portal', useBlur: modalReady.useBlur, children: ModalContainer ? (_jsx(ModalContainer, { className: `rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]${modalReady.useBlur ? ' shadow-md border border-gray-200' : ''}${containerLayout?.className ? ` ${containerLayout.className}` : ''}`, style: { ...modalReady.style, ...containerLayout?.style }, children: modalContent })) : (_jsx("div", { className: `rounded bg-white relative w-auto h-auto min-h-[200px] min-w-[500px]${modalReady.useBlur ? ' shadow-md border border-gray-200' : ''}${containerLayout?.className ? ` ${containerLayout.className}` : ''}`, style: { ...modalReady.style, ...containerLayout?.style }, children: modalContent })) }));
 };
 export default Modal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-modal",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "description": "The dynamic-modal is a solution of creation different modals into project using a json configuration file",
   "type": "module",
   "main": "./dist/index.js",