react-crud-mui 0.0.1-beta.8 → 0.0.1

package/dist/components/action-commands/ActionCommands.d.ts

@@ -1,5 +1,8 @@
-import { PropsWithChildren } from 'react';
-export interface ActionCommandsProps extends PropsWithChildren {
+import { ReactNode } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { NeedDataReason } from '../detail-page/pages/DetailPageContent';
+import { TableMoreMenuProps } from '../table/components/TableMoreMenu';
+export interface ActionCommandsProps<TModel extends FieldValues> extends Omit<TableMoreMenuProps, 'children' | 'open' | 'handleClose' | 'handleOpen'> {
     onEdit?: () => void;
     onView?: () => void;
     onCopy?: () => void;
@@ -14,6 +17,10 @@ export interface ActionCommandsProps extends PropsWithChildren {
     showCopy?: boolean;
     disabled?: boolean;
     confirmOnDelete?: boolean;
+    model?: TModel;
+    titles?: Record<NeedDataReason, string>;
+    children?: (closeEvent: () => void) => ReactNode;
+    index: number;
 }
-declare function ActionCommands({ onDelete, onEdit, onCopy, onView, canView, canDelete, canEdit, canCopy, showCopy, showView, showEdit, showDelete, disabled, children, }: ActionCommandsProps): import("react/jsx-runtime").JSX.Element;
+declare function ActionCommands<TModel extends FieldValues>({ onDelete, onEdit, onCopy, onView, canView, canDelete, canEdit, canCopy, showCopy, showView, showEdit, showDelete, disabled, children, titles, ...tableMoreProps }: ActionCommandsProps<TModel>): import("react/jsx-runtime").JSX.Element;
 export default ActionCommands;

package/dist/components/combobox/ComboBox.d.ts

@@ -1,6 +1,7 @@
 import { Ref } from 'react';
 import { FieldValues } from 'react-hook-form';
-import { AutocompleteProps, StandardTextFieldProps } from '@mui/material';
+import { AutocompleteProps } from '@mui/material/Autocomplete';
+import { StandardTextFieldProps } from '@mui/material/TextField';
 import { ComboboxTemplate } from './hooks/useComboboxTemplate';
 export type CreatableModel = FieldValues & CreatableModelProps;
 declare const addValueField: unique symbol;
@@ -9,16 +10,19 @@ type CreatableModelProps = {
     [addValueField]?: string;
     [addDisplayTextField]?: string;
 };
-export interface ComboBoxProps<T extends CreatableModel, Creatable extends boolean = false> extends Partial<AutocompleteProps<T, false, true, Creatable>>, Pick<StandardTextFieldProps, 'autoFocus' | 'label' | 'error' | 'helperText'> {
+export type ComboboxSize = AutocompleteProps<FieldValues, false, false, false>['size'] | 'smaller';
+export interface ComboBoxProps<T extends CreatableModel, Creatable extends boolean = false> extends Partial<Omit<AutocompleteProps<T, false, true, Creatable>, 'size'>>, Pick<StandardTextFieldProps, 'autoFocus' | 'label' | 'error' | 'helperText'> {
     data?: T[];
     direction?: 'row' | 'column';
-    optionTemplate: ComboboxTemplate<T>;
+    optionTemplate?: ComboboxTemplate<T>;
     displayTemplate?: ComboboxTemplate<T>;
     descriptionTemplate?: ComboboxTemplate<T>;
     creatable?: Creatable;
     onCreate?: (text: string) => Promise<T>;
     selectRef?: Ref<unknown>;
+    size?: ComboboxSize;
 }
-declare function ComboBox<T extends CreatableModel, Creatable extends boolean>({ autoFocus, creatable, data, descriptionTemplate, direction, displayTemplate, error, getOptionLabel, helperText, loading, onBlur, onCreate, optionTemplate, label, renderOption: onRenderOption, selectRef, ...rest }: ComboBoxProps<T, Creatable>): import("react/jsx-runtime").JSX.Element;
+export declare const DEFAULT_OPTION_TEMPLATE = "${name}";
+declare function ComboBox<T extends CreatableModel, Creatable extends boolean>({ autoFocus, creatable, data, descriptionTemplate, direction, displayTemplate, error, getOptionLabel, helperText, loading, onBlur, onCreate, optionTemplate, label, size, value, renderOption: onRenderOption, selectRef, ...rest }: ComboBoxProps<T, Creatable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof ComboBox;
 export default _default;

package/dist/components/detail-page/components/DetailPageModalLayout.d.ts

@@ -0,0 +1,3 @@
+import { PageLayoutProps } from '../../page/components/DefaultLayout';
+declare function DetailPageModalLayout({ options, content, alertsContent, footerContent, moreContent, pageHeader, panelsContent, progressContent, tabsContent, tabsHeaderContent, }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default DetailPageModalLayout;

package/dist/components/detail-page/components/DetailPageStepCommands.d.ts

@@ -10,6 +10,7 @@ export type StepsButtonsOptions = {
     activeStepIndex: number;
     steps: StepPane[];
     showFinishButton?: boolean;
+    finishButtonText?: string;
     loading?: boolean;
 };
 export type StepCommandsStates = {
@@ -27,11 +28,11 @@ export type StepCommandsLayout = {
 };
 export type StepCommandsComponentProps = StepCommandsStates & StepCommandsLayout;
 export interface DetailPageStepCommandsProps extends StepCommandsStates {
-    commands?: React.ComponentType<StepCommandsComponentProps>;
+    onCommands?: (props: StepCommandsComponentProps) => ReactNode;
 }
 export declare enum DetailPageStepCommandNames {
     PREV = "prev",
     NEXT = "next"
 }
-declare function DetailPageStepCommands({ commands: CustomCommands, ...options }: DetailPageStepCommandsProps): import("react/jsx-runtime").JSX.Element;
+declare function DetailPageStepCommands({ onCommands, ...stepCommandProps }: DetailPageStepCommandsProps): import("react/jsx-runtime").JSX.Element;
 export default DetailPageStepCommands;

package/dist/components/detail-page/components/DetailPageSteps.d.ts

@@ -1,11 +1,14 @@
 import { ReactNode } from 'react';
-import { StepLabelProps, StepperProps, StepProps } from '@mui/material';
+import { StepProps } from '@mui/material/Step';
+import { StepLabelProps } from '@mui/material/StepLabel';
+import { StepperProps } from '@mui/material/Stepper';
 import { DetailPageStepCommandsProps } from './DetailPageStepCommands';
 export interface DetailPageStepsProps extends Omit<StepperProps, 'onChange'> {
     items: StepPane[];
     status?: StepStatus;
     showFinishButton?: DetailPageStepCommandsProps['options']['showFinishButton'];
-    commands?: DetailPageStepCommandsProps['commands'];
+    finishButtonText?: DetailPageStepCommandsProps['options']['finishButtonText'];
+    onCommands?: DetailPageStepCommandsProps['onCommands'];
 }
 export type StepPane = Omit<StepProps & StepLabelProps, 'children' | 'key'> & {
     key: string;

package/dist/components/detail-page/components/TriggerValidation.d.ts

@@ -0,0 +1,3 @@
+import { FieldValues } from 'react-hook-form';
+declare function TriggerValidation<TModel extends FieldValues>(): null;
+export default TriggerValidation;

package/dist/components/detail-page/hooks/useDetailPageModal.d.ts

@@ -1,38 +1,29 @@
 import { FieldValues } from 'react-hook-form';
 import { NeedDataReason } from '../pages/DetailPageContent';
-import { NavigatePayload } from '../pages/DetailPageData';
 import { DetailPageModalProps } from '../pages/DetailPageModal';
-export type SelectedModelOptions<TModel> = {
-    data?: TModel;
-    reason?: NeedDataReason;
-    disabled?: boolean;
-};
+export type SelectedModelOptions<TModel extends FieldValues> = Pick<DetailPageModalProps<TModel>, 'reason' | 'data' | 'disabled' | 'onAfterSave' | 'onAfterDelete'>;
 type HelperModelFields = {
     uid?: string;
     index?: number;
 };
-export type UseDetailPageModalReturn<TModel extends FieldValues> = Pick<DetailPageModalProps<TModel>, 'reason' | 'open' | 'onReasonChange' | 'data' | 'disabled'> & HelperModelFields & {
+export type UseDetailPageModalReturn<TModel extends FieldValues> = Pick<DetailPageModalProps<TModel>, 'reason' | 'open' | 'onReasonChange' | 'data' | 'disabled' | 'onAfterSave' | 'onAfterDelete'> & HelperModelFields & {
     onOpen(model?: SelectedModelOptions<TModel>): void;
     onClose(): void;
-    onNavigate(paylaod: Pick<NavigatePayload<TModel>, 'direction'>): void;
 };
 export interface UseDetailPageModalProps {
     models?: unknown[];
     uniqueIdParamName?: string;
-    onVisibleChange?: (open: boolean) => void;
 }
-declare function useDetailPageModal<TModel extends FieldValues>({ models, uniqueIdParamName, onVisibleChange, }?: UseDetailPageModalProps): readonly [({ data, disabled, reason }?: SelectedModelOptions<TModel>) => void, {
-    readonly onNavigate: ({ direction }: Pick<NavigatePayload<TModel>, "direction">) => void;
+declare function useDetailPageModal<TModel extends FieldValues>({ models, uniqueIdParamName, }?: UseDetailPageModalProps): readonly [({ data, disabled, reason, onAfterDelete, onAfterSave }?: SelectedModelOptions<TModel>) => void, {
     readonly onReasonChange: (reason: NeedDataReason) => void;
     readonly onClose: () => void;
-    readonly modalProps?: Omit<import('../../..').ModalProps, "children">;
+    readonly modalProps?: Omit<import('../../..').ModalProps, "children" | "open">;
     readonly open?: boolean;
-    readonly confirmDirtyChanges?: boolean;
+    readonly promptOptions?: import('./useFormPrompt').UseFormPromptProps;
     readonly defaultReason?: NeedDataReason;
     readonly defaultSegmentIndex?: number;
     readonly form?: import('../../form/hooks/useForm').UseFormReturn<TModel> | undefined;
-    readonly schema?: import('zod').ZodType<Partial<TModel>, import('zod').ZodTypeDef, Partial<TModel>> | import('zod').ZodType<Partial<TModel>, import('zod').ZodTypeDef, Partial<TModel>>[] | undefined;
-    readonly defaultValues?: import('../../utils').DeepNullable<TModel> | undefined;
+    readonly schema?: import('zod').ZodType<TModel, import('zod').ZodTypeDef, TModel> | undefined;
     readonly validationOptions?: import('../../form/hooks/useForm').ValidationOptions<TModel> | undefined;
     readonly className?: string;
     readonly style?: React.CSSProperties;
@@ -406,27 +397,38 @@ declare function useDetailPageModal<TModel extends FieldValues>({ models, unique
     readonly onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
     readonly onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
     readonly onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
+    readonly component?: React.ElementType;
     readonly disabled?: boolean;
     readonly loading?: boolean;
     readonly size?: import('../../page/components/PageProvider').PaddingSize;
     readonly icon?: import('react').ReactNode;
+    readonly rightContent?: import('react').ReactNode;
     readonly centerContent?: import('react').ReactNode;
     readonly helperText?: import('react').ReactNode;
     readonly headerProps?: import('@mui/material').BoxProps;
     readonly moreOptions?: import('../../..').MoreButtonProps["options"];
+    readonly useHeaderIconWrapper?: boolean;
+    readonly tabs?: import('../../page/components/DefaultTabs').TabPane[];
     readonly error?: import('../../utils').ServerError;
-    readonly onDelete?: import('../pages/DetailPageData').DataEvent<TModel, import('../pages/DetailPageData').DeletePayload<TModel>> | undefined;
-    readonly onCreate?: () => void;
+    readonly defaultValues?: import('../pages/DetailPageData').DefaultData<TModel> | undefined;
     readonly footerContent?: import('react').ReactNode;
-    readonly tabs?: import('../../page/components/DefaultTabs').TabPane[];
+    readonly moreContent?: import('react').ReactNode;
+    readonly panels?: import('../../page/components/DefaultPanels').PanelPane[];
     readonly commandsPosition?: import('../../page/Page').CommandsPosition;
     readonly onHeader?: (props: import('../components/DetailPageHeader').DetailPageHeaderProps) => import('react').ReactNode;
     readonly onLayout?: (props: import('../../page/components/DefaultLayout').PageLayoutProps) => import('react').ReactNode;
     readonly showHeader?: boolean;
+    readonly showCommands?: boolean;
+    readonly morePanelProps?: import('../../more-panel/MorePanel').MorePanelProps;
+    readonly progressProps?: import('../../progress/Progress').ProgressProps;
     readonly disableShortCuts?: boolean;
+    readonly tabsPosition?: import('../../page/Page').TabsPosition;
+    readonly tabExtraContent?: import('react').ReactNode;
     readonly selectedTabIndex?: number;
     readonly onTabChanged?: (selected: import('../../page/components/DefaultTabs').TabChangedPayload) => void;
-    readonly onTabs?: (props: import('../../page/components/DefaultTabs').DefaultTabsProps) => import('react').ReactNode;
+    readonly onTabs?: (props: import('../../..').DefaultTabsProps) => import('react').ReactNode;
+    readonly bordered?: boolean;
+    readonly onDelete?: import('../pages/DetailPageData').DataEvent<TModel, import('../pages/DetailPageData').DeletePayload<TModel>> | undefined;
     readonly enableClose?: boolean;
     readonly enableCopy?: boolean;
     readonly enableCreate?: boolean;
@@ -441,6 +443,7 @@ declare function useDetailPageModal<TModel extends FieldValues>({ models, unique
     readonly alerts?: import('../../page/hooks/useNormalizeMessages').Message[];
     readonly onSegmentChanged?: (index: number) => void;
     readonly hotkeyScopes?: string;
+    readonly onCreate?: () => void;
     readonly onSave?: import('../pages/DetailPageData').DataEvent<TModel, import('../pages/DetailPageData').SavePayload<TModel>> | undefined;
     readonly onDiscardChanges?: () => void;
     readonly onContentLayout?: (props: import('../components/DetailPageDefaultLayout').DetailPageLayoutProps) => React.ReactNode;
@@ -450,8 +453,8 @@ declare function useDetailPageModal<TModel extends FieldValues>({ models, unique
     readonly customSteps?: React.ComponentType<import('../components/DetailPageSteps').DetailPageStepsProps>;
     readonly stepsProps?: Partial<import('../components/DetailPageSteps').DetailPageStepsProps>;
     readonly showSuccessMessages?: boolean;
-    readonly onAfterSave?: ((result: void | Awaited<TModel> | undefined, variables: import('../pages/DetailPageData').SavePayload<TModel>) => void) | undefined;
-    readonly onAfterDelete?: ((variables: import('../pages/DetailPageData').DeletePayload<TModel>) => void) | undefined;
+    readonly onAfterSave?: ((result: void | Awaited<TModel> | undefined, variables: import('../pages/DetailPageData').SavePayload<TModel>, form: import('../../form/hooks/useForm').UseFormReturn<TModel>) => void) | undefined;
+    readonly onAfterDelete?: ((variables: import('../pages/DetailPageData').DeletePayload<TModel>, form: import('../../form/hooks/useForm').UseFormReturn<TModel>) => void) | undefined;
     readonly uid?: string;
     readonly index?: number;
 }];

package/dist/components/detail-page/hooks/useFormConfirmDirtyChange.d.ts

@@ -1,15 +1,12 @@
 import { CloseReason } from '../../page/Page';
-interface UseFormConfirmDirtyChangeOptions {
-    /**
-     * Whether to leave modal without saving when form is dirty,default true
-     */
-    enabled?: boolean;
+import { UseFormPromptProps } from './useFormPrompt';
+interface UseFormConfirmDirtyChangeOptions extends UseFormPromptProps {
     onClose?: (reason?: CloseReason) => void;
 }
 /**
  *  Confirm dirty change either leave or stay on form
  */
-declare function useFormConfirmDirtyChange({ onClose, enabled }: UseFormConfirmDirtyChangeOptions): {
+declare function useFormConfirmDirtyChange({ promptMessage, onClose, confirmDirtyChanges, }: UseFormConfirmDirtyChangeOptions): {
     handleCloseEvent: (reason?: CloseReason) => void;
     setFormDirtyChange: (isDirty: boolean) => void;
 };

package/dist/components/detail-page/hooks/useFormPrompt.d.ts

@@ -7,6 +7,7 @@ export interface UseFormPromptProps {
     confirmDirtyChanges?: boolean;
     ignoreSearchParams?: boolean;
     beforeUnload?: boolean;
+    promptMessage?: string;
 }
-declare function useFormPrompt({ ignoreSearchParams, beforeUnload, confirmDirtyChanges, }: UseFormPromptProps): void;
+declare function useFormPrompt({ ignoreSearchParams, beforeUnload, confirmDirtyChanges, promptMessage, }: UseFormPromptProps): void;
 export default useFormPrompt;

package/dist/components/detail-page/pages/DetailPage.d.ts

@@ -1,6 +1,7 @@
 import { FieldValues } from 'react-hook-form';
 import { default as DetailPageDefaultLayout } from '../components/DetailPageDefaultLayout';
 import { default as DetailPageHeader } from '../components/DetailPageHeader';
+import { default as DetailPageSteps } from '../components/DetailPageSteps';
 import { NeedDataReason } from './DetailPageContent';
 import { default as DetailPageDrawer } from './DetailPageDrawer';
 import { DetailPageFormProps } from './DetailPageForm';
@@ -21,5 +22,6 @@ declare namespace DetailPage {
     var Drawer: typeof DetailPageDrawer;
     var Route: typeof DetailPageRoute;
     var Layout: typeof DetailPageDefaultLayout;
+    var Steps: typeof DetailPageSteps;
 }
 export default DetailPage;

package/dist/components/detail-page/pages/DetailPageContent.d.ts

@@ -8,8 +8,7 @@ import { DetailPageLayoutProps } from '../components/DetailPageDefaultLayout';
 import { DetailPageHeaderProps } from '../components/DetailPageHeader';
 import { DetailPageStepsProps, StepPane } from '../components/DetailPageSteps';
 import { SaveMode } from './DetailPageData';
-export type NeedDataReason = 'create' | 'fetch' | 'copy';
-export type NavigationDirection = 'next' | 'prev';
+export type NeedDataReason = 'create' | 'fetch' | 'copy' | 'view';
 export type DetailPageWrapperLayoutProps = {
     content: ReactNode;
     pageContent: ReactNode;

package/dist/components/detail-page/pages/DetailPageData.d.ts

@@ -1,37 +1,32 @@
 import { FieldValues } from 'react-hook-form';
-import { UseFormOptions, UseFormReturn } from '../../form/hooks/useForm';
+import { UseFormReturn } from '../../form/hooks/useForm';
 import { DeepNullable } from '../../utils';
 import { DetailPageContentProps, NeedDataReason } from './DetailPageContent';
 export type DataResult<TModel> = TModel | Promise<TModel | void | undefined> | undefined | void;
-export interface DataEvent<TModel, TVariables> {
-    (variables: TVariables): DataResult<TModel>;
+export interface DataEvent<TModel extends FieldValues, TVariables> {
+    (variables: TVariables, form: UseFormReturn<TModel>): DataResult<TModel>;
 }
+export type DefaultDataFn<TModel extends FieldValues> = (reason: NeedDataReason, data?: TModel) => DeepNullable<TModel> | Promise<DeepNullable<TModel>>;
+export type DefaultData<TModel extends FieldValues> = DeepNullable<TModel> | DefaultDataFn<TModel>;
 export type SaveMode = 'save' | 'save-close' | 'save-create';
 export interface BasePayload {
     reason: NeedDataReason;
 }
-export interface SavePayload<TModel = FieldValues> extends BasePayload {
+export interface SavePayload<TModel extends FieldValues = FieldValues> extends BasePayload {
     model: TModel;
     data?: TModel;
     mode: SaveMode;
 }
-export interface DeletePayload<TModel = FieldValues> extends BasePayload {
+export interface DeletePayload<TModel extends FieldValues = FieldValues> extends BasePayload {
     model: TModel;
     data?: TModel;
 }
-export interface NavigatePayload<TModel = FieldValues> extends BasePayload {
-    direction: NavigationDirection;
-    model: TModel;
-}
-export type NavigationDirection = 'next' | 'prev';
-export interface DetailPageDataProps<TModel extends FieldValues> extends Omit<DetailPageContentProps<TModel>, 'onSave' | 'onDelete' | 'onDiscardChanges' | 'onCopy' | 'onSaveCreate' | 'onSaveClose'>, Pick<UseFormOptions<TModel>, 'schema'> {
+export interface DetailPageDataProps<TModel extends FieldValues> extends Omit<DetailPageContentProps<TModel>, 'onSave' | 'onDelete' | 'onDiscardChanges' | 'onCopy' | 'onSaveCreate' | 'onSaveClose'> {
     form: UseFormReturn<TModel>;
-    defaultValues?: Readonly<DeepNullable<TModel>>;
     /**
-     * Navigation buttons event when navigation is active
-     * @returns if returns data,either in promise or object will bind to form data
+     * Get default form values for each particular reason
      */
-    onNavigate?: DataEvent<TModel, NavigatePayload<TModel>>;
+    defaultValues?: DefaultData<TModel>;
     /**
      * Save event
      * @returns if returns data,either in promise or object will bind to form data
@@ -57,14 +52,14 @@ export interface DetailPageDataProps<TModel extends FieldValues> extends Omit<De
     /**
      * Event called after succesfull save
      */
-    onAfterSave?: (result: Awaited<DataResult<TModel>>, variables: SavePayload<TModel>) => void;
+    onAfterSave?: (result: Awaited<DataResult<TModel>>, variables: SavePayload<TModel>, form: UseFormReturn<TModel>) => void;
     /**
      * Event called after succesfull delete
      */
-    onAfterDelete?: (variables: DeletePayload<TModel>) => void;
+    onAfterDelete?: (variables: DeletePayload<TModel>, form: UseFormReturn<TModel>) => void;
 }
 /**
  * Page component that all data manupulation is handled
  */
-declare function DetailPageData<TModel extends FieldValues>({ alerts, autoSave, data, defaultValues, error, form, loading, onAfterDelete, onAfterSave, onClose, onDelete, onDiscardChanges, onReasonChange, onSave, reason, schema, showSuccessMessages, ...dpProps }: DetailPageDataProps<TModel>): import("react/jsx-runtime").JSX.Element;
+declare function DetailPageData<TModel extends FieldValues>({ alerts, autoSave, data, defaultValues, error, form, loading, onAfterDelete, onAfterSave, onClose, onDelete, onDiscardChanges, onReasonChange, onSave, reason, showSuccessMessages, ...dpProps }: DetailPageDataProps<TModel>): import("react/jsx-runtime").JSX.Element;
 export default DetailPageData;

package/dist/components/detail-page/pages/DetailPageDrawer.d.ts

@@ -1,5 +1,5 @@
 import { FieldValues } from 'react-hook-form';
-import { DrawerProps } from '@mui/material';
+import { DrawerProps } from '@mui/material/Drawer';
 import { default as DetailPageDrawerCommands } from '../components/DetailPageDrawerCommands';
 import { DetailPageModalProps } from './DetailPageModal';
 export interface DetailPageDrawerProps<TModel extends FieldValues> extends Omit<DetailPageModalProps<TModel>, 'modalProps'> {
@@ -8,7 +8,7 @@ export interface DetailPageDrawerProps<TModel extends FieldValues> extends Omit<
      */
     drawerProps?: DrawerProps;
 }
-declare function DetailPageDrawer<TModel extends FieldValues>({ drawerProps, open, onClose, confirmDirtyChanges, ...dpProps }: DetailPageDrawerProps<TModel>): import("react/jsx-runtime").JSX.Element;
+declare function DetailPageDrawer<TModel extends FieldValues>({ drawerProps, open, onClose, promptOptions, ...dpProps }: DetailPageDrawerProps<TModel>): import("react/jsx-runtime").JSX.Element;
 declare namespace DetailPageDrawer {
     var Commands: typeof DetailPageDrawerCommands;
 }

package/dist/components/detail-page/pages/DetailPageForm.d.ts

@@ -1,16 +1,11 @@
 import { FieldValues } from 'react-hook-form';
 import { z } from 'zod';
 import { UseFormReturn, ValidationOptions } from '../../form/hooks/useForm';
-import { DeepNullable } from '../../utils';
 import { DetailPageDataProps } from './DetailPageData';
-export interface DetailPageFormProps<TModel extends FieldValues> extends Omit<DetailPageDataProps<TModel>, 'form' | 'defaultValues' | 'schema'> {
+export interface DetailPageFormProps<TModel extends FieldValues> extends Omit<DetailPageDataProps<TModel>, 'form'> {
     form?: UseFormReturn<TModel>;
-    schema?: z.ZodType<Partial<TModel>> | z.ZodType<Partial<TModel>>[];
-    defaultValues?: DeepNullable<TModel>;
-    /**
-     * Optional validation options
-     */
+    schema?: z.ZodType<TModel>;
     validationOptions?: ValidationOptions<TModel>;
 }
-declare function DetailPageForm<TModel extends FieldValues>(props: DetailPageFormProps<TModel>): import("react/jsx-runtime").JSX.Element;
+declare function DetailPageForm<TModel extends FieldValues>({ activeSegmentIndex, schema, defaultValues, validationOptions, data, reason, ...dpProps }: DetailPageFormProps<TModel>): import("react/jsx-runtime").JSX.Element;
 export default DetailPageForm;

package/dist/components/detail-page/pages/DetailPageModal.d.ts

@@ -1,11 +1,13 @@
 import { FieldValues } from 'react-hook-form';
 import { ModalProps } from '../../modal/Modal';
+import { default as DetailPageModalLayout } from '../components/DetailPageModalLayout';
+import { UseFormPromptProps } from '../hooks/useFormPrompt';
 import { DetailPageProps } from './DetailPage';
 export interface DetailPageModalProps<TModel extends FieldValues> extends DetailPageProps<TModel> {
     /**
      * Antd modal options
      */
-    modalProps?: Omit<ModalProps, 'children'>;
+    modalProps?: Omit<ModalProps, 'children' | 'open'>;
     /**
      * Shortcut to open prop of Modal
      */
@@ -13,7 +15,10 @@ export interface DetailPageModalProps<TModel extends FieldValues> extends Detail
     /**
      * Whether to leave modal without saving when form is dirty,default true
      */
-    confirmDirtyChanges?: boolean;
+    promptOptions?: UseFormPromptProps;
+}
+declare function DetailPageModal<TModel extends FieldValues>({ modalProps, onClose, open, enableClose, promptOptions, ...dpProps }: DetailPageModalProps<TModel>): import("react/jsx-runtime").JSX.Element;
+declare namespace DetailPageModal {
+    var Layout: typeof DetailPageModalLayout;
 }
-declare function DetailPageModal<TModel extends FieldValues>({ modalProps, onClose, open, confirmDirtyChanges, ...rest }: DetailPageModalProps<TModel>): import("react/jsx-runtime").JSX.Element;
 export default DetailPageModal;

package/dist/components/detail-page/pages/DetailPagePopover.d.ts

@@ -1,10 +1,10 @@
 import { FieldValues } from 'react-hook-form';
-import { PopoverProps } from '@mui/material';
+import { PopoverProps } from '@mui/material/Popover';
 import { DetailPageProps } from './DetailPage';
 export interface DetailPagePopoverProps<TModel extends FieldValues> extends DetailPageProps<TModel> {
-    popoverOptions?: PopoverProps;
+    popoverOptions?: Partial<PopoverProps>;
     onClose: () => void;
     anchorEl: HTMLElement | null;
 }
-declare function DetailPagePopover<TModel extends FieldValues>({ popoverOptions, children, onClose, anchorEl, ...rest }: DetailPagePopoverProps<TModel>): import("react/jsx-runtime").JSX.Element;
+declare function DetailPagePopover<TModel extends FieldValues>({ popoverOptions, children, onClose, anchorEl, ...dpProps }: DetailPagePopoverProps<TModel>): import("react/jsx-runtime").JSX.Element;
 export default DetailPagePopover;

package/dist/components/editable-list/EditableList.d.ts

@@ -14,12 +14,11 @@ export declare const ROW_STATE_FIELD = "__$row_state__";
 export type RowStates = 'created' | 'modified' | 'pristine';
 export type EditableListContextValue<TModel extends FieldValues, TArrayModel extends FieldArray<TModel, TFieldArrayName> & FieldValues, TFieldArrayName extends FieldArrayPath<TModel>> = UseFieldArrayReturn<TModel, TFieldArrayName, typeof UNIQUE_IDENTIFIER_FIELD_NAME> & Pick<UseDetailPageModalReturn<TArrayModel>, 'onOpen'>;
 export declare const EditableListContext: React.Context<EditableListContextValue<any, any, any> | null>;
-export interface EditingListCommandsProps<TModel extends FieldValues = FieldValues> extends ActionCommandsProps {
+export interface EditingListCommandsProps<TModel extends FieldValues = FieldValues> extends ActionCommandsProps<TModel> {
     editable?: boolean;
     onCancel?: () => void;
-    model?: TModel;
 }
-export interface EditableListProps<TModel extends FieldValues, TArrayModel extends FieldArray<TModel, TFieldArrayName> & FieldValues, TFieldArrayName extends FieldArrayPath<TModel> = FieldArrayPath<TModel>> extends TableProps<TArrayModel>, Pick<ActionCommandsProps, 'canCopy' | 'canDelete' | 'canEdit'>, PropsWithChildren {
+export interface EditableListProps<TModel extends FieldValues, TArrayModel extends FieldArray<TModel, TFieldArrayName> & FieldValues, TFieldArrayName extends FieldArrayPath<TModel> = FieldArrayPath<TModel>> extends Omit<TableProps<TArrayModel>, 'data'>, Pick<ActionCommandsProps<TArrayModel>, 'canCopy' | 'canDelete' | 'canEdit'>, PropsWithChildren {
     /**
      * Array model name of form
      */
@@ -73,7 +72,7 @@ export interface EditableListProps<TModel extends FieldValues, TArrayModel exten
     /**
      * Custom Commands on header
      */
-    commands?: (props: EditableListCommandsProps<TModel, TFieldArrayName>) => React.ReactNode;
+    onCommands?: (props: EditableListCommandsProps<TModel, TFieldArrayName>) => React.ReactNode;
     /**
      * Custom commands when needed to override the default buttons
      */
@@ -83,7 +82,7 @@ export interface EditableListProps<TModel extends FieldValues, TArrayModel exten
      */
     commandColProps?: TableColumn<TArrayModel>;
 }
-declare function EditableList<TModel extends FieldValues, TArrayModel extends FieldArray<TModel, TFieldArrayName> & FieldValues, TFieldArrayName extends FieldArrayPath<TModel> = FieldArrayPath<TModel>>({ canCopy, canDelete, canEdit, children, columns, commandColProps, commands, onLayout, detailPageProps, detailType, disabled, enableDeleteAllButton, headerProps, name, newItemTitle, onDelete, onSave, rowCommands, uniqueFields, ...tableProps }: EditableListProps<TModel, TArrayModel, TFieldArrayName>): import("react/jsx-runtime").JSX.Element;
+declare function EditableList<TModel extends FieldValues, TArrayModel extends FieldArray<TModel, TFieldArrayName> & FieldValues, TFieldArrayName extends FieldArrayPath<TModel> = FieldArrayPath<TModel>>({ canCopy, canDelete, canEdit, children, columns, commandColProps, onCommands, onLayout, detailPageProps, detailType, disabled, enableDeleteAllButton, headerProps, name, newItemTitle, onDelete, onSave, rowCommands, uniqueFields, ...tableProps }: EditableListProps<TModel, TArrayModel, TFieldArrayName>): import("react/jsx-runtime").JSX.Element;
 declare namespace EditableList {
     var Commands: typeof EditableListCommands;
     var RowCommands: typeof ActionCommands;

package/dist/components/flexbox/FlexBox.d.ts

@@ -1,3 +1,4 @@
 import { BoxProps } from '@mui/material/Box';
+export type FlexBoxProps = React.ComponentProps<typeof FlexBox>;
 declare const FlexBox: import('react').ForwardRefExoticComponent<Omit<BoxProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default FlexBox;

package/dist/components/form/Field.d.ts

@@ -47,7 +47,6 @@ declare namespace Field {
     var DatePicker: typeof FormDatePicker;
     var Button: typeof FormButton;
     var Watch: typeof FieldWatch;
-    var schemas: typeof import("./schema");
     var Group: typeof FieldGroupProvider;
 }
 export default Field;

package/dist/components/form/components/FieldWatch.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { FieldPath, FieldValues, Path } from 'react-hook-form';
-import { BoxProps, SxProps } from '@mui/material';
+import { BoxProps } from '@mui/material/Box';
+import { SxProps } from '@mui/material/styles';
 interface FieldWatchProps<TFieldValues extends FieldValues = FieldValues> {
     name: FieldPath<TFieldValues>;
     showAsJson?: boolean;

package/dist/components/form/components/FormButton.d.ts

@@ -1,5 +1,5 @@
 import { FieldValues, UseFormReturn } from 'react-hook-form';
-import { ButtonProps } from '@mui/material';
+import { ButtonProps } from '@mui/material/Button';
 export type FormButtonProps<TFieldValues extends FieldValues = FieldValues> = {
     onClick: (formMethods: UseFormReturn<TFieldValues>, e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 } & Omit<ButtonProps, 'onClick'>;

package/dist/components/form/components/FormControl.d.ts

@@ -1,9 +1,14 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { ControllerFieldState } from 'react-hook-form';
+import { BoxProps } from '@mui/material/Box';
+import { FlexBoxProps } from '../../flexbox/FlexBox';
 export interface FormControlProps {
-    label?: ReactNode;
+    label?: ReactNode | [ReactNode, ReactNode];
     helperText?: ReactNode;
     placement?: 'left' | 'right' | 'top' | 'bottom';
+    labelProps?: BoxProps;
+    wrapperProps?: FlexBoxProps;
+    disabled?: boolean;
 }
-declare function FormControl({ placement, children, label, helperText, error, invalid, }: PropsWithChildren<FormControlProps> & ControllerFieldState): import("react/jsx-runtime").JSX.Element;
+declare function FormControl({ placement, children, label, helperText, error, invalid, labelProps, wrapperProps, disabled, }: PropsWithChildren<FormControlProps> & Partial<ControllerFieldState>): import("react/jsx-runtime").JSX.Element;
 export default FormControl;

package/dist/components/form/controls/FormCheckbox.d.ts

@@ -1,5 +1,5 @@
 import { FieldValues } from 'react-hook-form';
-import { CheckboxProps } from '@mui/material';
+import { CheckboxProps } from '@mui/material/Checkbox';
 import { FormControlProps } from '../components/FormControl';
 import { ControlCommonProps } from '../Field';
 export interface FormCheckboxProps<TFieldValues extends FieldValues = FieldValues> extends Omit<CheckboxProps, 'name'>, ControlCommonProps<TFieldValues>, FormControlProps {

package/dist/components/form/controls/FormComboBox.d.ts

@@ -3,5 +3,5 @@ import { ComboBoxProps, CreatableModel } from '../../combobox/ComboBox';
 import { ControlCommonProps } from '../Field';
 export interface FormComboBoxProps<T extends CreatableModel, Creatable extends boolean = false, TFieldValues extends FieldValues = FieldValues> extends Omit<ComboBoxProps<T, Creatable>, 'name'>, ControlCommonProps<TFieldValues> {
 }
-declare function FormComboBox<T extends CreatableModel, Creatable extends boolean, TFieldValues extends FieldValues>({ name, fieldProps, ...comboBoxProps }: FormComboBoxProps<T, Creatable, TFieldValues>): import("react/jsx-runtime").JSX.Element;
+declare function FormComboBox<T extends CreatableModel = CreatableModel, Creatable extends boolean = false, TFieldValues extends FieldValues = FieldValues>({ name, fieldProps, disabled, ...comboBoxProps }: FormComboBoxProps<T, Creatable, TFieldValues>): import("react/jsx-runtime").JSX.Element;
 export default FormComboBox;

package/dist/components/form/controls/FormDatePicker.d.ts

@@ -1,8 +1,8 @@
 import { FieldValues } from 'react-hook-form';
-import { StandardTextFieldProps } from '@mui/material';
-import { DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers';
+import { StandardTextFieldProps } from '@mui/material/TextField';
+import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import { Dayjs } from 'dayjs';
 import { ControlCommonProps } from '../Field';
-export type FormDatePickerProps<TFieldValues extends FieldValues = FieldValues> = Partial<MuiDatePickerProps<Dayjs>> & Pick<StandardTextFieldProps, 'size'> & ControlCommonProps<TFieldValues>;
-declare function FormDatePicker<TFieldValues extends FieldValues = FieldValues>({ name, fieldProps, slotProps, autoFocus, size, ...dateProps }: FormDatePickerProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+export type FormDatePickerProps<TFieldValues extends FieldValues = FieldValues> = Partial<DatePickerProps<Dayjs>> & Pick<StandardTextFieldProps, 'size'> & ControlCommonProps<TFieldValues>;
+declare function FormDatePicker<TFieldValues extends FieldValues = FieldValues>({ name, fieldProps, slotProps, autoFocus, size, disabled, ...dateProps }: FormDatePickerProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
 export default FormDatePicker;

package/dist/components/form/controls/FormInput.d.ts

@@ -1,7 +1,7 @@
 import { FieldValues } from 'react-hook-form';
-import { TextFieldProps } from '@mui/material';
+import { InputProps } from '../../input/Input';
 import { ControlCommonProps } from '../Field';
-export interface FormInputProps<TFieldValues extends FieldValues = FieldValues> extends Omit<TextFieldProps<'standard'>, 'name'>, ControlCommonProps<TFieldValues> {
+export interface FormInputProps<TFieldValues extends FieldValues = FieldValues> extends Omit<InputProps, 'name'>, ControlCommonProps<TFieldValues> {
 }
-declare function FormInput<TFieldValues extends FieldValues = FieldValues>({ name, fieldProps, ...inputProps }: FormInputProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+declare function FormInput<TFieldValues extends FieldValues = FieldValues>({ name, fieldProps, disabled, ...inputProps }: FormInputProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
 export default FormInput;

package/dist/components/form/controls/FormMoneyInput.d.ts

@@ -3,5 +3,5 @@ import { MoneyInputProps } from '../../money-input/MoneyInput';
 import { ControlCommonProps } from '../Field';
 export interface FormMoneyInputProps<TFieldValues extends FieldValues = FieldValues> extends Omit<MoneyInputProps, 'name'>, ControlCommonProps<TFieldValues> {
 }
-declare function FormMoneyInput<TFieldValues extends FieldValues = FieldValues>({ name, fieldProps, ...inputProps }: FormMoneyInputProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+declare function FormMoneyInput<TFieldValues extends FieldValues = FieldValues>({ name, fieldProps, disabled, ...inputProps }: FormMoneyInputProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
 export default FormMoneyInput;

package/dist/components/form/controls/FormNumberInput.d.ts

@@ -3,5 +3,5 @@ import { NumberInputProps } from '../../number-input/NumberInput';
 import { ControlCommonProps } from '../Field';
 export interface FormNumberInputProps<TFieldValues extends FieldValues = FieldValues> extends Omit<NumberInputProps, 'name'>, ControlCommonProps<TFieldValues> {
 }
-declare function FormNumberInput<TFieldValues extends FieldValues = FieldValues>({ name, fieldProps, ...inputProps }: FormNumberInputProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+declare function FormNumberInput<TFieldValues extends FieldValues = FieldValues>({ name, fieldProps, disabled, ...inputProps }: FormNumberInputProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
 export default FormNumberInput;

package/dist/components/form/controls/FormPhoneInput.d.ts

@@ -3,5 +3,5 @@ import { PhoneInputProps } from '../../phone-input/PhoneInput';
 import { ControlCommonProps } from '../Field';
 export interface FormPhoneInputProps<TFieldValues extends FieldValues = FieldValues> extends Omit<PhoneInputProps, 'name'>, ControlCommonProps<TFieldValues> {
 }
-declare function FormPhoneInput<TFieldValues extends FieldValues = FieldValues>({ name, fieldProps, ...inputProps }: FormPhoneInputProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+declare function FormPhoneInput<TFieldValues extends FieldValues = FieldValues>({ name, fieldProps, disabled, ...inputProps }: FormPhoneInputProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
 export default FormPhoneInput;

package/dist/components/form/controls/FormRadioGroup.d.ts

@@ -1,14 +1,15 @@
 import { FieldValues } from 'react-hook-form';
-import { RadioGroupProps as MuiRadioGroupProps } from '@mui/material';
+import { RadioGroupProps } from '@mui/material/RadioGroup';
 import { FormControlProps } from '../components/FormControl';
 import { ControlCommonProps } from '../Field';
 export type RadioGroupData = {
     value: string | number;
     label: string;
 };
-export interface FormRadioGroupProps<TFieldValues extends FieldValues = FieldValues> extends Omit<MuiRadioGroupProps, 'name'>, ControlCommonProps<TFieldValues>, FormControlProps {
-    data: RadioGroupData[];
+export interface FormRadioGroupProps<TFieldValues extends FieldValues = FieldValues> extends Omit<RadioGroupProps, 'name'>, ControlCommonProps<TFieldValues>, FormControlProps {
+    data?: RadioGroupData[];
+    disabled?: boolean;
 }
 export declare const StyledFormControlLabel: import('@emotion/styled').StyledComponent<import('@mui/material').FormControlLabelProps & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;
-declare function FormRadioGroup<TFieldValues extends FieldValues = FieldValues>({ name, label, helperText, placement, fieldProps, data, ...radioGroupProps }: FormRadioGroupProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+declare function FormRadioGroup<TFieldValues extends FieldValues = FieldValues>({ name, label, helperText, placement, fieldProps, disabled, data, ...radioGroupProps }: FormRadioGroupProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
 export default FormRadioGroup;