enwawa-ui 2.5.2 → 2.7.1

package/lib/index.d.ts

@@ -1,11 +1,13 @@
 import React, { CSSProperties, ReactNode, ChangeEvent, JSXElementConstructor, ReactElement } from "react";
 import { ButtonShape, ButtonSize, ButtonType } from "antd/es/button";
-import { ButtonProps, AutoCompleteProps, DescriptionsProps, SwitchProps } from "antd/lib";
-import { CheckboxProps, CountdownProps, DatePickerProps, ImageProps, AlertProps, ColProps, BreadcrumbProps, InputNumberProps, DropdownProps, MenuProps, SelectProps, PaginationProps, RadioChangeEvent, TooltipProps, UploadProps, RowProps, CollapseProps, LayoutProps, SiderProps, SpaceProps, FormProps, ModalFuncProps, FormInstance, TableProps, StepsProps, ModalProps as _ModalProps1, SpinProps, TagProps } from "antd";
+import { ButtonProps, AutoCompleteProps, DescriptionsProps, BreadcrumbProps as _BreadcrumbProps1, SwitchProps } from "antd/lib";
+import { CheckboxProps, CountdownProps, DatePickerProps, ImageProps, AlertProps, ColProps, BreadcrumbProps, InputNumberProps, DropdownProps, MenuProps, SelectProps, PaginationProps, RadioChangeEvent, TooltipProps, UploadProps, RowProps, CollapseProps, LayoutProps, SiderProps, SpaceProps, StepsProps, FormProps, ModalFuncProps, FormInstance, TableProps, ModalProps as _ModalProps1, SpinProps, TagProps } from "antd";
 import { Dayjs } from "dayjs";
 import { RangePickerProps } from "antd/lib/date-picker";
 import { IconComponentProps } from "@ant-design/icons/lib/components/Icon";
 import * as Icons from "@ant-design/icons";
+import { BlockProps, EllipsisConfig, BaseType } from "antd/es/typography/Base";
+import { TextProps as _TextProps1 } from "antd/es/typography/Text";
 import { TabsProps } from "antd/es/tabs";
 import { CardTabListType } from "antd/es/card";
 import { CardType } from "antd/es/card/Card";
@@ -17,12 +19,10 @@ import { DotPosition } from "antd/es/carousel";
 import { CheckboxGroupProps } from "antd/es/checkbox/Group";
 import { ValueType } from "@rc-component/mini-decimal";
 import { Gutter } from "antd/es/grid/row";
-import { BlockProps, EllipsisConfig, BaseType } from "antd/es/typography/Base";
-import { TextProps as _TextProps1 } from "antd/es/typography/Text";
+import { AnyObject } from "antd/es/_util/type";
 import { DrawerProps } from "antd/es/drawer";
 import { GoogleMapProps, GoogleMap } from "@react-google-maps/api";
 import { WatchOptions } from "rc-field-form/es/interface";
-import { AnyObject } from "antd/es/_util/type";
 import { ColumnsType, TablePaginationConfig } from "antd/es/table";
 import { ExpandableConfig, FilterValue, SorterResult, TableCurrentDataSource, TableRowSelection } from "antd/es/table/interface";
 import { CheckboxChangeEvent } from "antd/es/checkbox";
@@ -148,6 +148,10 @@ export interface AtButtonProps {
      * Set the button icon
      */
     icon?: ButtonProps['icon'];
+    /**
+     * Set background button transparent
+     */
+    bgTransparent?: boolean;
 }
 export const AtButton: React.FC<AtButtonProps>;
 export interface AtCheckboxProps extends CheckboxProps {
@@ -521,6 +525,89 @@ export interface AtIconProps {
     twoToneColor?: string;
 }
 export const AtIcon: React.FC<AtIconProps>;
+declare const colorMap: {
+    violet: string;
+    gold: string;
+    white: string;
+    gray: string;
+    lightGray: string;
+    black: string;
+};
+export interface AtTextProps {
+    /**
+     * Content type
+     */
+    type?: 'secondary' | 'success' | 'warning' | 'danger';
+    /**
+     * Whether the text is strong or not
+     */
+    strong?: boolean;
+    /**
+     * Whether the text is italic or not
+     */
+    italic?: boolean;
+    /**
+     * Whether the text is underline or not
+     */
+    underline?: boolean;
+    /**
+     * Whether the text is mark or not
+     */
+    mark?: boolean;
+    /**
+     * If editable. Can control edit state when is object
+     */
+    editable?: boolean | BlockProps['editable'];
+    /**
+     * Whether to be copyable, customize it via setting an object
+     */
+    copyable?: boolean | BlockProps['copyable'];
+    /**
+     * Keyboard style
+     */
+    keyboard?: boolean;
+    /**
+     * Code style
+     */
+    code?: boolean;
+    /**
+     * children
+     */
+    children?: React.ReactNode;
+    /**
+     * Color of the text
+     */
+    color?: keyof typeof colorMap;
+    /**
+     * Element width
+     */
+    $width?: number | string;
+    /**
+     * Element max width
+     */
+    $maxWidth?: number | string;
+    /**
+     * font size
+     */
+    $fontSize?: number;
+    /**
+     * textAlign
+     */
+    $textAlign?: "center" | "left" | "right" | "justify" | "initial" | "inherit" | "unset";
+    /**
+     * opacity
+     */
+    $opacity?: number;
+    /**
+     * ellipsis
+     */
+    ellipsis?: _TextProps1['ellipsis'];
+    /**
+     * line height
+     */
+    $lineHeight?: number;
+}
+export const AtText: React.FC<AtTextProps>;
 export interface AtImageProps {
     /**
      * Image description
@@ -727,14 +814,6 @@ export interface OrTabsProps {
     hideExtra?: boolean;
 }
 export const OrTabs: React.FC<OrTabsProps>;
-declare const colorMap: {
-    violet: string;
-    gold: string;
-    white: string;
-    gray: string;
-    lightGray: string;
-    black: string;
-};
 export interface MlCardProps {
     /**
      * The ID for input
@@ -2431,81 +2510,6 @@ export interface OrContentProps extends LayoutProps {
     $backgroundSrc?: string;
 }
 export const OrContent: React.FC<OrContentProps>;
-export interface AtTextProps {
-    /**
-     * Content type
-     */
-    type?: 'secondary' | 'success' | 'warning' | 'danger';
-    /**
-     * Whether the text is strong or not
-     */
-    strong?: boolean;
-    /**
-     * Whether the text is italic or not
-     */
-    italic?: boolean;
-    /**
-     * Whether the text is underline or not
-     */
-    underline?: boolean;
-    /**
-     * Whether the text is mark or not
-     */
-    mark?: boolean;
-    /**
-     * If editable. Can control edit state when is object
-     */
-    editable?: boolean | BlockProps['editable'];
-    /**
-     * Whether to be copyable, customize it via setting an object
-     */
-    copyable?: boolean | BlockProps['copyable'];
-    /**
-     * Keyboard style
-     */
-    keyboard?: boolean;
-    /**
-     * Code style
-     */
-    code?: boolean;
-    /**
-     * children
-     */
-    children?: React.ReactNode;
-    /**
-     * Color of the text
-     */
-    color?: keyof typeof colorMap;
-    /**
-     * Element width
-     */
-    $width?: number | string;
-    /**
-     * Element max width
-     */
-    $maxWidth?: number | string;
-    /**
-     * font size
-     */
-    $fontSize?: number;
-    /**
-     * textAlign
-     */
-    $textAlign?: "center" | "left" | "right" | "justify" | "initial" | "inherit" | "unset";
-    /**
-     * opacity
-     */
-    $opacity?: number;
-    /**
-     * ellipsis
-     */
-    ellipsis?: _TextProps1['ellipsis'];
-    /**
-     * line height
-     */
-    $lineHeight?: number;
-}
-export const AtText: React.FC<AtTextProps>;
 export type Size = 'large' | 'middle' | 'small';
 declare const sizes: {
     [key in Size]: {
@@ -2860,85 +2864,416 @@ export interface OrDescriptionsProps extends DescriptionsProps {
     extra?: DescriptionsProps['extra'];
 }
 export const OrDescriptions: React.FC<OrDescriptionsProps>;
-interface OrDownloadProps {
-    /**
-     * The function to call when the download button is clicked
-     */
-    downloadOnClick?: () => any;
-    /**
-     * The text to display on the download button
-     */
-    downloadText: string;
-}
-export interface OrDownloadUploadProps {
-    /**
-     * Key identifier
-     */
-    inputKey: string;
-    /**
-     * The function to call when the value of the file changes
-     */
-    getValueFromEvent?: (e: any) => any;
+export interface OrStepProp {
     /**
-     * The rules for the file
+     * To set the current step, counting from 0. You can overwrite this state by using status of Step
      */
-    rules?: MlFromItemProps['rules'];
+    current?: number;
     /**
-     * If the file is required
+     * To specify the direction of the step bar, horizontal or vertical
      */
-    isRequired?: boolean;
-    downloadProps: OrDownloadProps;
-    uploadProps: MlUploadProps;
-    disabled?: boolean;
+    direction?: 'horizontal' | 'vertical';
     /**
-     * The mode of the upload
+     *
      */
-    mode?: 'drag' | 'basic';
-}
-export const OrDownloadUpload: React.FC<OrDownloadUploadProps>;
-export interface OrDrawerProps {
+    initial?: number;
     /**
-     * The ID for input
-     */
-    id?: string;
+     *  Place title and description with horizontal or vertical direction
+     * */
+    labelPlacement?: 'horizontal' | 'vertical';
     /**
-     * Whether Drawer should get focused after open
+     * Progress circle percentage of current step in process status (only works on basic Steps)
      */
-    autoFocus?: boolean;
+    percent?: number;
     /**
-     * Callback after the animation ends when switching drawers
+     * Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be vertical
      */
-    afterOpenChange?: (open: boolean) => void;
+    progressDot?: StepsProps['progressDot'];
     /**
-     * Style of the drawer content part
+     * Change to vertical direction when screen width smaller than 532px
      */
-    bodyStyle?: CSSProperties;
+    responsive?: boolean;
     /**
-     * Config Drawer Panel className. Use rootClassName if want to config top dom style
+     * To specify the size of the step bar, default and small are currently supported
      */
-    className?: string;
+    size?: 'default' | 'small';
     /**
-     * Custom close icon. 5.7.0: close button will be hidden when setting to null or false
+     * To specify the status of current step, can be set to one of the following values: wait process finish error
      */
-    closeIcon?: boolean | ReactNode;
+    status?: 'wait' | 'process' | 'finish' | 'error';
     /**
-     * Style of the drawer wrapper of content part
+     * Type of steps, can be set to one of the following values: default navigation inline
      */
-    contentWrapperStyle?: CSSProperties;
+    type?: 'default' | 'navigation' | 'inline';
     /**
-     * Whether to unmount child components on closing drawer or not
+     * Trigger when Step is changed
      */
-    destroyOnClose?: boolean;
+    onChange?: (current: number) => void;
     /**
-     * Extra actions area at corner
+     * StepItem content
      */
-    extra?: ReactNode;
+    items?: StepsProps['items'];
     /**
-     * The footer for Drawer
+     * Element margin
      */
-    footer?: ReactNode;
+    $margin?: string;
     /**
-     * Style of the drawer footer part
+     * Element line height
+     */
+    $lineHeight?: string;
+}
+export const OrStep: React.FC<OrStepProp>;
+export interface IFormStep<T> {
+    title: string;
+    inputs?: OrFormItemsInlineProps['inputs'];
+    submitButtonText?: string;
+    image?: string;
+    cancelButtonText?: string;
+    onCancelClick?: () => void;
+    formInitialItems?: T;
+    form?: OrFormProps['form'];
+    onFinish?: (e: any) => void;
+    cancelBtnIcon?: ReactNode;
+    isSubmitButtonDanger?: boolean;
+    hiddeSubmitButton?: boolean;
+    customButtons?: {
+        label: string;
+        onClick: () => void;
+        type: AtButtonProps['type'];
+        htmlType?: AtButtonProps['htmlType'];
+    }[];
+}
+export interface TmCrudPageProps<RecordType = AnyObject, FormType = any> {
+    /**
+     * Columns of table
+     */
+    columns: OrTableProps<RecordType>['columns'];
+    /**
+     * Data record array to be displayed
+     */
+    data: OrTableProps<RecordType>['dataSource'];
+    /**
+     * Loading status of table
+     */
+    loadingTable?: OrTableProps['loading'];
+    /**
+     * Config of pagination. You can ref table pagination config or full pagination document, hide it by setting it to false
+     */
+    pagination?: OrTableProps['pagination'];
+    /**
+     * Row's unique key, could be a string or function that returns a string
+     */
+    rowKey?: OrTableProps['rowKey'];
+    /**
+     * On change form content
+     */
+    onValuesChange?: OrFormProps['onValuesChange'];
+    /**
+     * Callback when pagination changes
+     */
+    onChangeTable?: OrTableProps['onChange'];
+    /**
+     * Extendable table TM CrudPage
+     */
+    expandable?: OrTableProps['expandable'];
+    /**
+     * On press cancel and close button function
+     */
+    handleCloseCallback?: () => void;
+    /**
+     * State of the drawer
+     */
+    open?: boolean;
+    /**
+     * Page title
+     */
+    title?: string;
+    /**
+     * Page subtitle
+     */
+    subtitle?: string;
+    /**
+     * Page subtitle content
+     */
+    subContent?: string;
+    /**
+     * Page table title
+     */
+    tableTitle?: string;
+    /**
+     * Button value text
+     */
+    buttonAddText?: string;
+    /**
+     * Callback when add button is pressed
+     */
+    addButtonOnClick?: OrModuleTableHeaderProps['buttonOnClick'];
+    /**
+     * Callback when pagination changes
+     */
+    onChangePagination?: MlPaginationProps['onChange'];
+    /**
+     * Total table elements
+     */
+    total?: MlPaginationProps['total'];
+    /**
+     * Way to display total pagination table
+     */
+    showTotal?: MlPaginationProps['showTotal'];
+    /**
+     * Table page size
+     */
+    pageSize?: MlPaginationProps['pageSize'];
+    /**
+     * Current page table
+     */
+    currentPage?: number;
+    /**
+     * Disable buttons drawer
+     */
+    disabledButtons?: boolean;
+    /**
+     * Form Steps info
+     */
+    formSteps?: IFormStep<FormType>[];
+    /**
+     * current step
+     */
+    currentFormStep?: number;
+    /**
+     * Search table elements
+     */
+    searchBoxOnSearch?: OrModuleTableHeaderProps['searchBoxOnSearch'];
+    /**
+     * title of drawer
+     */
+    titleLeftDrawer?: ReactNode;
+    /**
+     * Specify a callback that will be called when a user clicks mask, close button or Cancel button
+     */
+    onCloseLeftDrawer?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    /**
+     * whether left drawer is open or close
+     */
+    openLeftDrawer?: boolean;
+    /**
+     * Children for Left Drawer
+     */
+    leftDrawerContent?: React.ReactNode;
+    /**
+     * Custom component to render at left side of table header
+     */
+    tableHeaderCustomLeftElements?: React.ReactNode;
+    /**
+     * Drawer Width
+     */
+    leftDrawerWidth?: number;
+    /**
+     * searchBox placeHolder
+     */
+    searchBoxPlaceholder?: string;
+    /**
+     * show search box
+     */
+    showSearchBox?: boolean;
+    /**
+     * Drawer Content
+     */
+    drawerContent?: React.ReactNode;
+    /**
+     * Drawer Title
+     */
+    drawerTitle?: React.ReactNode;
+    /**
+     * Drawer Width
+     */
+    drawerWidth?: number;
+    /**
+     * Text of first button
+     */
+    firstButtonText?: string;
+    /**
+     * Text of second button
+     */
+    secondButtonText?: string;
+    /**
+     * Function to execute when first button is clicked
+     */
+    onClickFirstButton?: () => void;
+    /**
+     * Function to execute when second button is clicked
+     */
+    onClickSecondButton?: () => void;
+    /**
+     * Show drawer content
+     */
+    showDrawerContent?: boolean;
+    /**
+     * margin
+     */
+    $margin?: string;
+    /**
+     * table title level
+     */
+    tableTitleLevel?: 1 | 2 | 3 | 4 | 5;
+    /**
+     * button optional text
+     */
+    secondaryButtonText?: string;
+    /**
+     * button optional onClick
+     */
+    secondaryOnClick?: () => void;
+    /**
+     * button optional text
+     */
+    showFormStepper?: boolean;
+    onBack?: () => void;
+    padding?: string;
+}
+export const TmCrudPage: <RecordType extends AnyObject, FormType extends Store>({ columns, data, loadingTable, formSteps, onValuesChange, onCloseLeftDrawer, leftDrawerContent, openLeftDrawer, subtitle, subContent, open, pageSize, currentPage, currentFormStep, titleLeftDrawer, leftDrawerWidth, drawerContent, showDrawerContent, showSearchBox, drawerTitle, drawerWidth, firstButtonText, secondButtonText, onClickFirstButton, onClickSecondButton, $margin, title, tableTitle, buttonAddText, addButtonOnClick, onChangePagination, onChangeTable, total, showTotal, disabledButtons, searchBoxOnSearch, searchBoxPlaceholder, tableHeaderCustomLeftElements, pagination, handleCloseCallback, tableTitleLevel, secondaryButtonText, secondaryOnClick, showFormStepper, onBack, padding, expandable }: TmCrudPageProps<RecordType, FormType>) => import("react/jsx-runtime").JSX.Element;
+export interface OrDetailsPageProps<FormType = any> {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * Title of the description set
+     */
+    title: string;
+    /**
+     * Whether the table has border or not
+     */
+    bordered?: boolean;
+    /**
+     * Items to display
+     */
+    items: OrDescriptionsProps['items'];
+    /**
+     * Extra content to display
+     */
+    extra?: OrDescriptionsProps['extra'];
+    /**
+     * Form Steps info
+     */
+    formSteps?: IFormStep<FormType>[];
+    /**
+     * On press cancel and close button function
+     */
+    handleCloseCallback?: () => void;
+    /**
+     * State of the drawer
+     */
+    open?: boolean;
+    /**
+     * Drawer Content
+     */
+    drawerContent?: React.ReactNode;
+    /**
+     * Drawer Title
+     */
+    drawerTitle?: React.ReactNode;
+    /**
+     * Drawer Width
+     */
+    drawerWidth?: number;
+    /**
+     * Disable buttons drawer
+     */
+    disabledButtons?: boolean;
+    /**
+     * current step
+     */
+    currentFormStep?: number;
+    /**
+     * button optional text
+     */
+    showFormStepper?: boolean;
+    /**
+     * On change form content
+     */
+    onValuesChange?: OrFormProps['onValuesChange'];
+}
+export const OrDetailsPage: <FormType extends Store>({ title, bordered, items, extra, formSteps, handleCloseCallback, open, drawerTitle, drawerWidth, disabledButtons, currentFormStep, showFormStepper, onValuesChange, }: OrDetailsPageProps<FormType>) => import("react/jsx-runtime").JSX.Element;
+interface OrDownloadProps {
+    /**
+     * The function to call when the download button is clicked
+     */
+    downloadOnClick?: () => any;
+    /**
+     * The text to display on the download button
+     */
+    downloadText: string;
+}
+export interface OrDownloadUploadProps {
+    /**
+     * Key identifier
+     */
+    inputKey: string;
+    /**
+     * The function to call when the value of the file changes
+     */
+    getValueFromEvent?: (e: any) => any;
+    /**
+     * The rules for the file
+     */
+    rules?: MlFromItemProps['rules'];
+    /**
+     * If the file is required
+     */
+    isRequired?: boolean;
+    downloadProps: OrDownloadProps;
+    uploadProps: MlUploadProps;
+    disabled?: boolean;
+    /**
+     * The mode of the upload
+     */
+    mode?: 'drag' | 'basic';
+}
+export const OrDownloadUpload: React.FC<OrDownloadUploadProps>;
+export interface OrDrawerProps {
+    /**
+     * The ID for input
+     */
+    id?: string;
+    /**
+     * Whether Drawer should get focused after open
+     */
+    autoFocus?: boolean;
+    /**
+     * Callback after the animation ends when switching drawers
+     */
+    afterOpenChange?: (open: boolean) => void;
+    /**
+     * Style of the drawer content part
+     */
+    bodyStyle?: CSSProperties;
+    /**
+     * Config Drawer Panel className. Use rootClassName if want to config top dom style
+     */
+    className?: string;
+    /**
+     * Custom close icon. 5.7.0: close button will be hidden when setting to null or false
+     */
+    closeIcon?: boolean | ReactNode;
+    /**
+     * Style of the drawer wrapper of content part
+     */
+    contentWrapperStyle?: CSSProperties;
+    /**
+     * Whether to unmount child components on closing drawer or not
+     */
+    destroyOnClose?: boolean;
+    /**
+     * Extra actions area at corner
+     */
+    extra?: ReactNode;
+    /**
+     * The footer for Drawer
+     */
+    footer?: ReactNode;
+    /**
+     * Style of the drawer footer part
      */
     footerStyle?: CSSProperties;
     /**
@@ -3280,65 +3615,6 @@ export interface OrSelectTableProps<T = any> extends AtSelectProps {
     rules?: MlFromItemProps['rules'][];
 }
 export const OrSelectTable: React.FC<OrSelectTableProps>;
-export interface OrStepProp {
-    /**
-     * To set the current step, counting from 0. You can overwrite this state by using status of Step
-     */
-    current?: number;
-    /**
-     * To specify the direction of the step bar, horizontal or vertical
-     */
-    direction?: 'horizontal' | 'vertical';
-    /**
-     *
-     */
-    initial?: number;
-    /**
-     *  Place title and description with horizontal or vertical direction
-     * */
-    labelPlacement?: 'horizontal' | 'vertical';
-    /**
-     * Progress circle percentage of current step in process status (only works on basic Steps)
-     */
-    percent?: number;
-    /**
-     * Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be vertical
-     */
-    progressDot?: StepsProps['progressDot'];
-    /**
-     * Change to vertical direction when screen width smaller than 532px
-     */
-    responsive?: boolean;
-    /**
-     * To specify the size of the step bar, default and small are currently supported
-     */
-    size?: 'default' | 'small';
-    /**
-     * To specify the status of current step, can be set to one of the following values: wait process finish error
-     */
-    status?: 'wait' | 'process' | 'finish' | 'error';
-    /**
-     * Type of steps, can be set to one of the following values: default navigation inline
-     */
-    type?: 'default' | 'navigation' | 'inline';
-    /**
-     * Trigger when Step is changed
-     */
-    onChange?: (current: number) => void;
-    /**
-     * StepItem content
-     */
-    items?: StepsProps['items'];
-    /**
-     * Element margin
-     */
-    $margin?: string;
-    /**
-     * Element line height
-     */
-    $lineHeight?: string;
-}
-export const OrStep: React.FC<OrStepProp>;
 interface TextProps extends AtTextProps {
     text: string;
 }
@@ -3483,6 +3759,10 @@ export interface OrFormInLineItem {
      * file list for the file-input component
      */
     fileList?: MlUploadProps['fileList'];
+    /**
+     * onRemove for the file-input component
+     */
+    onRemoveUploadedFile?: MlUploadProps['onRemove'];
     noStyle?: boolean;
     /**
      * The mode of the upload
@@ -3572,6 +3852,28 @@ export interface OrInfoCardProps {
     image?: string;
 }
 export const OrInfoCard: React.FC<OrInfoCardProps>;
+export interface OrInfoHeaderCardProps extends MlCardProps {
+    /**
+     * Left arrow click event
+     */
+    onClickLeftArrow?: () => void;
+    /**
+     * Breadcrumb items
+     */
+    breadcrumbItems?: _BreadcrumbProps1['items'];
+    /**
+     * Breadcrumb items
+     */
+    leftElement?: React.ReactElement;
+    /**
+     * Breadcrumb items
+     */
+    rightElement?: React.ReactElement;
+}
+/**
+ * Primary input UI component for user interaction
+ */
+export const OrInfoHeaderCard: React.FC<OrInfoHeaderCardProps>;
 export interface OrModuleTableHeaderProps {
     /**
      * Title of the module table header
@@ -3869,215 +4171,6 @@ interface OrModalProps {
     content?: string | React.ReactNode;
 }
 export const OrModal: React.FC<OrModalProps>;
-export interface IFormStep<T> {
-    title: string;
-    inputs?: OrFormItemsInlineProps['inputs'];
-    submitButtonText?: string;
-    image?: string;
-    cancelButtonText?: string;
-    onCancelClick?: () => void;
-    formInitialItems?: T;
-    form?: OrFormProps['form'];
-    onFinish?: (e: any) => void;
-    cancelBtnIcon?: ReactNode;
-    isSubmitButtonDanger?: boolean;
-    hiddeSubmitButton?: boolean;
-    customButtons?: {
-        label: string;
-        onClick: () => void;
-        type: AtButtonProps['type'];
-        htmlType?: AtButtonProps['htmlType'];
-    }[];
-}
-export interface TmCrudPageProps<RecordType = AnyObject, FormType = any> {
-    /**
-     * Columns of table
-     */
-    columns: OrTableProps<RecordType>['columns'];
-    /**
-     * Data record array to be displayed
-     */
-    data: OrTableProps<RecordType>['dataSource'];
-    /**
-     * Loading status of table
-     */
-    loadingTable?: OrTableProps['loading'];
-    /**
-     * Config of pagination. You can ref table pagination config or full pagination document, hide it by setting it to false
-     */
-    pagination?: OrTableProps['pagination'];
-    /**
-     * Row's unique key, could be a string or function that returns a string
-     */
-    rowKey?: OrTableProps['rowKey'];
-    /**
-     * On change form content
-     */
-    onValuesChange?: OrFormProps['onValuesChange'];
-    /**
-     * Callback when pagination changes
-     */
-    onChangeTable?: OrTableProps['onChange'];
-    /**
-     * Extendable table TM CrudPage
-     */
-    expandable?: OrTableProps['expandable'];
-    /**
-     * On press cancel and close button function
-     */
-    handleCloseCallback?: () => void;
-    /**
-     * State of the drawer
-     */
-    open?: boolean;
-    /**
-     * Page title
-     */
-    title?: string;
-    /**
-     * Page subtitle
-     */
-    subtitle?: string;
-    /**
-     * Page subtitle content
-     */
-    subContent?: string;
-    /**
-     * Page table title
-     */
-    tableTitle?: string;
-    /**
-     * Button value text
-     */
-    buttonAddText?: string;
-    /**
-     * Callback when add button is pressed
-     */
-    addButtonOnClick?: OrModuleTableHeaderProps['buttonOnClick'];
-    /**
-     * Callback when pagination changes
-     */
-    onChangePagination?: MlPaginationProps['onChange'];
-    /**
-     * Total table elements
-     */
-    total?: MlPaginationProps['total'];
-    /**
-     * Way to display total pagination table
-     */
-    showTotal?: MlPaginationProps['showTotal'];
-    /**
-     * Table page size
-     */
-    pageSize?: MlPaginationProps['pageSize'];
-    /**
-     * Current page table
-     */
-    currentPage?: number;
-    /**
-     * Disable buttons drawer
-     */
-    disabledButtons?: boolean;
-    /**
-     * Form Steps info
-     */
-    formSteps?: IFormStep<FormType>[];
-    /**
-     * current step
-     */
-    currentFormStep?: number;
-    /**
-     * Search table elements
-     */
-    searchBoxOnSearch?: OrModuleTableHeaderProps['searchBoxOnSearch'];
-    /**
-     * title of drawer
-     */
-    titleLeftDrawer?: ReactNode;
-    /**
-     * Specify a callback that will be called when a user clicks mask, close button or Cancel button
-     */
-    onCloseLeftDrawer?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-    /**
-     * whether left drawer is open or close
-     */
-    openLeftDrawer?: boolean;
-    /**
-     * Children for Left Drawer
-     */
-    leftDrawerContent?: React.ReactNode;
-    /**
-     * Custom component to render at left side of table header
-     */
-    tableHeaderCustomLeftElements?: React.ReactNode;
-    /**
-     * Drawer Width
-     */
-    leftDrawerWidth?: number;
-    /**
-     * searchBox placeHolder
-     */
-    searchBoxPlaceholder?: string;
-    /**
-     * show search box
-     */
-    showSearchBox?: boolean;
-    /**
-     * Drawer Content
-     */
-    drawerContent?: React.ReactNode;
-    /**
-     * Drawer Title
-     */
-    drawerTitle?: React.ReactNode;
-    /**
-     * Drawer Width
-     */
-    drawerWidth?: number;
-    /**
-     * Text of first button
-     */
-    firstButtonText?: string;
-    /**
-     * Text of second button
-     */
-    secondButtonText?: string;
-    /**
-     * Function to execute when first button is clicked
-     */
-    onClickFirstButton?: () => void;
-    /**
-     * Function to execute when second button is clicked
-     */
-    onClickSecondButton?: () => void;
-    /**
-     * Show drawer content
-     */
-    showDrawerContent?: boolean;
-    /**
-     * margin
-     */
-    $margin?: string;
-    /**
-     * table title level
-     */
-    tableTitleLevel?: 1 | 2 | 3 | 4 | 5;
-    /**
-     * button optional text
-     */
-    secondaryButtonText?: string;
-    /**
-     * button optional onClick
-     */
-    secondaryOnClick?: () => void;
-    /**
-     * button optional text
-     */
-    showFormStepper?: boolean;
-    onBack?: () => void;
-    padding?: string;
-}
-export const TmCrudPage: <RecordType extends AnyObject, FormType extends Store>({ columns, data, loadingTable, formSteps, onValuesChange, onCloseLeftDrawer, leftDrawerContent, openLeftDrawer, subtitle, subContent, open, pageSize, currentPage, currentFormStep, titleLeftDrawer, leftDrawerWidth, drawerContent, showDrawerContent, showSearchBox, drawerTitle, drawerWidth, firstButtonText, secondButtonText, onClickFirstButton, onClickSecondButton, $margin, title, tableTitle, buttonAddText, addButtonOnClick, onChangePagination, onChangeTable, total, showTotal, disabledButtons, searchBoxOnSearch, searchBoxPlaceholder, tableHeaderCustomLeftElements, pagination, handleCloseCallback, tableTitleLevel, secondaryButtonText, secondaryOnClick, showFormStepper, onBack, padding, expandable }: TmCrudPageProps<RecordType, FormType>) => import("react/jsx-runtime").JSX.Element;
 export interface TmCustomTabsPageProps<FormType = any> {
     /**
      * Avatar image
@@ -4173,15 +4266,11 @@ export interface TmCustomTabsPageProps<FormType = any> {
     tabsProps: OrTabsProps;
 }
 export const TmCustomTabsPage: <FormType extends Store>({ avatar, username, phone, balanceLabel, balanceValue, infoIcon, infoLabel, infoValue, mainButtonLabel, mainButtonIcon, onClickLeftArrow, onClickMainAction, formSteps, handleCloseCallback, open, drawerTitle, drawerWidth, disabledButtons, currentFormStep, showFormStepper, onValuesChange, tabsProps, }: TmCustomTabsPageProps<FormType>) => import("react/jsx-runtime").JSX.Element;
-export interface TmDetailsPageProps<FormType = any> {
-    /**
-       * The ID for input
-       */
-    id?: string;
+export interface TmDescriptionsPageProps {
     /**
-     * Title of the description set
+     * The ID for input
      */
-    title: string;
+    id?: string;
     /**
      * Whether the table has border or not
      */
@@ -4189,53 +4278,21 @@ export interface TmDetailsPageProps<FormType = any> {
     /**
      * Items to display
      */
-    items: OrDescriptionsProps['items'];
-    /**
-     * Extra content to display
-     */
-    extra?: OrDescriptionsProps['extra'];
-    /**
-     * Form Steps info
-     */
-    formSteps?: IFormStep<FormType>[];
-    /**
-     * On press cancel and close button function
-     */
-    handleCloseCallback?: () => void;
-    /**
-     * State of the drawer
-     */
-    open?: boolean;
-    /**
-     * Drawer Content
-     */
-    drawerContent?: React.ReactNode;
-    /**
-     * Drawer Title
-     */
-    drawerTitle?: React.ReactNode;
-    /**
-     * Drawer Width
-     */
-    drawerWidth?: number;
+    items: Array<OrDetailsPageProps | Array<OrDetailsPageProps>>;
     /**
      * Disable buttons drawer
      */
     disabledButtons?: boolean;
-    /**
-     * current step
-     */
-    currentFormStep?: number;
-    /**
-     * button optional text
-     */
-    showFormStepper?: boolean;
     /**
      * On change form content
      */
     onValuesChange?: OrFormProps['onValuesChange'];
+    /**
+     * Custom header page template
+     */
+    header?: React.ReactElement;
 }
-export const TmDetailsPage: <FormType extends Store>({ title, bordered, items, extra, formSteps, handleCloseCallback, open, drawerTitle, drawerWidth, disabledButtons, currentFormStep, showFormStepper, onValuesChange, }: TmDetailsPageProps<FormType>) => import("react/jsx-runtime").JSX.Element;
+export const TmDescriptionsPage: ({ items, header, }: TmDescriptionsPageProps) => import("react/jsx-runtime").JSX.Element;
 export interface TmFormListPageProps<FormType = any> {
     formList?: {
         title?: string;