react-components-design-system/dist/index.d.ts

React UI component for design system FIS ES PB5

import * as react_jsx_runtime from 'react/jsx-runtime';
import React, { ReactNode, RefObject, PropsWithChildren, ButtonHTMLAttributes, Dispatch, SetStateAction, ReactElement } from 'react';
import { ValidateStatus as ValidateStatus$1, BORDER_TYPE as BORDER_TYPE$1, NUMBER_TYPE as NUMBER_TYPE$1, MODAL_SIZE as MODAL_SIZE$1, NUMBER_BUTTON as NUMBER_BUTTON$1, UPLOADTYPE_IMAGE as UPLOADTYPE_IMAGE$1, TAG_STATUS as TAG_STATUS$1 } from '@Configs/enum';
import { TFunction } from 'i18next';
import { Model, ModelFilter } from 'react-3layer-common';
import { Observable } from 'rxjs';
import { DatePickerProps as DatePickerProps$1, TimePickerProps as TimePickerProps$1, ModalProps, PaginationProps as PaginationProps$1, RadioGroupProps, RadioProps } from 'antd';
import * as dayjs from 'dayjs';
import dayjs__default, { Dayjs } from 'dayjs';
import { RangePickerProps } from 'antd/lib/date-picker';
import { InputAction as InputAction$2 } from '@Components/Input/InputText/InputText';
import { TreeNode as TreeNode$1 } from '@Components/Tree/TreeNode';
import { DataNode, TreeProps as TreeProps$1 } from 'antd/lib/tree';
import { AxiosError } from 'axios';
import { TabsProps as TabsProps$1, TabsType } from 'antd/lib/tabs';
import { TableProps } from 'antd/lib/table';
import { Key } from 'antd/lib/table/interface';

interface ValidateObject {
    validateStatus: ValidateStatus$1;
    message: string;
}
interface FormItemProps {
    /**Show the status validation*/
    validateStatus?: ValidateStatus$1;
    /**The validated message*/
    message?: string;
    children: ReactNode;
    /**Place content to the right*/
    placeRight?: boolean;
    /**Pass object validated to display state of  children field*/
    validateObject?: ValidateObject;
    /**Pass true to only show error in tooltip */
    isTableCell?: boolean;
}
declare function FormItem(props: FormItemProps): react_jsx_runtime.JSX.Element;

interface InputAction$1 {
    name?: ReactNode;
    action?: never;
}
interface InputTextProps {
    /**Label for current field*/
    label?: string;
    /**Control the style type of component: MATERIAL, BORDERED, FLOAT_LABEL */
    type?: BORDER_TYPE$1;
    /**Option to set password field */
    typeInput?: "text" | "password";
    /**Show symbol * as required field*/
    isRequired?: boolean;
    /**Prefix for filter value*/
    prefix?: string | JSX.Element;
    /**Suffix for filter value*/
    suffix?: string | JSX.Element;
    /**User-filled value*/
    value?: string;
    /**Not allow to handle change value*/
    disabled?: boolean;
    /**Read only field*/
    readOnly?: boolean;
    /**Placeholder of the component*/
    placeHolder?: string;
    /**Use to custom style the component*/
    className?: string;
    /**Boolean to show the lenght of value user-filled*/
    showCount?: boolean;
    /**Set maximum length of value*/
    maxLength?: number;
    /**Control the size of the component*/
    isSmall?: boolean;
    /**Provide a custom action (onClick) to the component*/
    action?: InputAction$1;
    /**Handle the change value of the field*/
    onChange?: (T: string | null) => void;
    /**Handle onEnter action*/
    onEnter?: (T: string | null) => void;
    /**Handle onBlur action*/
    onBlur?: (T: string | null) => void;
    /**Handle onKeyDown action*/
    onKeyDown?: (event: unknown) => void;
    /**Handle onKeyDown action*/
    onFocus?: () => void;
    /**Handle onKeyUp action*/
    onKeyUp?: (event: unknown) => void;
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "white" | "gray";
    autoComplete?: boolean;
    nameAttr?: string;
    /** */
    autoFocusInput?: boolean;
    /**Regex to check validate input text */
    regexInput?: RegExp;
    /**Description for error if value match regexInput*/
    regexErrorDescription?: string;
    /**pass translate to explain the description of errors */
    translate?: TFunction;
    /** Allow to remove input content with clear icon */
    allowClear?: boolean;
    /**Check byte count */
    isByteCheck?: boolean;
    isShowTooltip?: boolean;
    /**Pass true to only show error in tooltip */
    isTableCell?: boolean;
}
declare const InputText: React.ForwardRefExoticComponent<InputTextProps & React.RefAttributes<HTMLDivElement>>;

interface InputNumberAction {
    name?: string;
    action?: never;
}
interface InputNumberProps {
    /**Label for current field*/
    label?: string;
    /**Show symbol * as required field*/
    isRequired?: boolean;
    /**Control the style type of component: MATERIAL, BORDERED, FLOAT_LABEL */
    type?: BORDER_TYPE$1;
    /**User-filled value*/
    value?: number;
    /**Prefix for filter value*/
    prefix?: string | ReactNode;
    /**Suffix for filter value*/
    suffix?: string | ReactNode;
    /**Allow value to be negative or not*/
    allowNegative?: boolean;
    /**Provide an option set decimal number type for value*/
    numberType?: NUMBER_TYPE$1;
    /**Reverse symbol “.” and “,”*/
    isReverseSymb?: boolean;
    /**Provide a length of number behind the point (character)*/
    decimalDigit?: number;
    /**Placeholder of the component*/
    placeHolder?: string;
    /**Not allow to handle change value*/
    disabled?: boolean /**Not allow to handle change value*/;
    /**Read only field*/
    readOnly?: boolean;
    /**Use to custom style the component*/
    className?: string;
    /**Min of the value number*/
    min?: number | string;
    /**Max of the value number*/
    max?: number | string;
    /** Provide a custom action (onClick) to the component */
    action?: InputNumberAction;
    /**Control the size of the component*/
    isSmall?: boolean;
    /**Handle the change value of the component*/
    onChange?: (T: number) => void;
    /**Handle onEnter action*/
    onEnter?: (T: number) => void;
    /**Handle onBlur action*/
    onBlur?: (T: number) => void;
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "white" | "gray";
    /** Allow to remove input content with clear icon */
    allowClear?: boolean;
    /**pass translate to explain the description of errors */
    translate?: TFunction;
    isShowTooltip?: boolean;
    /**Pass true to only show error in tooltip */
    isTableCell?: boolean;
    /**Show input right */
    isInputRight?: boolean;
}
declare function InputNumber(props: InputNumberProps): react_jsx_runtime.JSX.Element;

interface InputSelectProps<T extends Model> {
    /**User-selected value*/
    value?: T;
    /**Not allow to handle change value*/
    disabled?: boolean;
    /** Focus to input of inputSelect */
    expanded?: boolean;
    /** Set expand value */
    handlePressExpandedIcon?: () => void;
    /** Placeholder of the Component */
    placeHolder?: string;
    /**Provide a function to render a specific property as name*/
    render?: (t: T) => string;
    /**Handle the action when click clear value*/
    onClear?: (T: T) => void;
    /**Handle action on search*/
    onSearch?: (T: string) => void;
    /**Handle onKeyDown action*/
    onKeyDown?: (event: any) => void;
    /**Handle onEnter action*/
    onKeyEnter?: (event: any) => void;
    /**Handle the action when clear input search*/
    handleClearInput?: () => void;
    /**Use to custom style the component*/
    className?: string;
    /**Control the style type of component: MATERIAL, BORDERED, FLOAT_LABEL */
    type?: BORDER_TYPE$1;
    /**Label for current field*/
    label?: string;
    /** Show symbol * as required field */
    isRequired?: boolean;
    /**Control the size of the component*/
    isSmall?: boolean;
    /**True for data list of filter is Enum (not use in code)*/
    isEnumerable?: boolean;
    /**Boolean true if used for filter*/
    isFilter?: boolean;
    /** Provide a custom action (onClick) to the component */
    action?: InputAction$1;
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "white" | "gray";
    /** If allow to remove input content with clear icon */
    allowClear?: boolean;
    /**Suffix for filter value*/
    suffix?: string | JSX.Element;
    readOnly?: boolean;
    /**Show tooltip */
    isShowTooltip?: boolean;
    /** handle onblur input */
    onBlur?: () => void;
    /** Handle the action when the label is clicked */
    handleClickLabel?: () => void;
    checkAllowClearWithRequire?: boolean;
}
declare function InputSelect(props: InputSelectProps<Model>): react_jsx_runtime.JSX.Element;

interface InputTagProps<T extends Model> {
    /**List value users select*/
    listValue?: T[];
    /**Placeholder of the component*/
    placeHolder?: string;
    /**Not allow to handle change value*/
    disabled?: boolean;
    /**Provide a function to render a specific property as name*/
    render?: (t: T) => string;
    /**Handle the action when click clear value*/
    onClear?: (T: T) => void;
    /**Handle the action when click clear mutiValue*/
    onClearMulti?: () => void;
    /**Handle action on search*/
    onSearch?: (T: string) => void;
    /**Show symbol * as required field*/
    isRequired?: boolean;
    /**Label for current field*/
    label?: string;
    /**Control the style type of component: MATERIAL, BORDERED, FLOAT_LABEL */
    type?: BORDER_TYPE$1;
    /**border by select case*/
    isSelectOption?: boolean;
    /**Control the size of the component*/
    isSmall?: boolean;
    /**Component enable to search data list*/
    isUsingSearch?: boolean;
    /**Handle onKeyDown action*/
    onKeyDown?: (event: any) => void;
    /**Handle onEnter action*/
    onKeyEnter?: (event: any) => void;
    /**Boolean true if used for filter*/
    isFilter?: boolean;
    /**Not expand the title row to see more detail on each post (each row)*/
    isNotExpand?: boolean;
    /**Boolean to set show tooltip */
    isShowTooltip?: boolean;
    /** Provide a custom action (onClick) to the component */
    action?: InputAction$1;
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "white" | "gray";
    /** Set expand value */
    handlePressExpandedIcon?: () => void;
    /**Clear search value when open */
    clearSearchTerm?: boolean;
}
declare function InputTag(props: InputTagProps<Model>): react_jsx_runtime.JSX.Element;

interface InputSearchProps<T extends Model, TModelFilter extends ModelFilter> {
    /**User-filled value to filter*/
    value?: string | null;
    /**Property of inputSearchSelect*/
    valueFilter?: TModelFilter;
    /**Property of inputSearchSelect*/
    getList?: (TModelFilter?: TModelFilter) => Observable<T[]>;
    /**Property of inputSearchSelect*/
    classFilter: new () => TModelFilter;
    /**Property of inputSearchSelect*/
    render?: (t: T) => string;
    /**Property of inputSearchSelect*/
    searchType?: string;
    /**Property of inputSearchSelect*/
    searchProperty?: string;
    /**Use to custom style the component*/
    className?: string;
    /**Property of inputSearchSelect*/
    onChangeSearchField?: (id: number, T?: T) => void;
    /**Handle the change value of the component*/
    onChange?: (value: string) => void;
    /**Placeholder of the component*/
    placeHolder?: string;
    /**Boolean to set input show with animation*/
    animationInput?: boolean;
    /**Option to set position for InputSearch */
    position?: "left" | "right";
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "white" | "gray";
}
declare function InputSearch(props: InputSearchProps<Model, ModelFilter>): react_jsx_runtime.JSX.Element;

interface TextAreaAction {
    name?: string;
    action?: never;
}
interface TextAreaProps {
    /**Label for current field*/
    label?: string;
    /**Control the style type of component: MATERIAL, BORDERED, FLOAT_LABEL */
    type?: BORDER_TYPE$1;
    /**Show symbol * as required field*/
    isRequired?: boolean;
    /**User-filled value*/
    value?: string;
    /**Not allow to handle change value*/
    disabled?: boolean;
    /**Placeholder of the component*/
    placeHolder?: string;
    /**Use to custom style the component*/
    className?: string;
    /**Boolean to show the lenght of value user-filled*/
    showCount?: boolean;
    /**Set maximum length of value*/
    maxLength?: number;
    /**Provide a custom action (onClick) to the component*/
    action?: TextAreaAction;
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "white" | "gray";
    /**Handle the change value of the field*/
    onChange?: (T: string | null) => void;
    /**Handle onEnter action*/
    onEnter?: (T: string | null) => void;
    /**Handle onBlur action*/
    onBlur?: (T: string | null) => void;
    rows?: number;
    cols?: number;
    /**pass translate to explain the description of errors */
    translate?: TFunction;
    /**Pass resize to set type of resize or disable resize */
    resize?: "none" | "both" | "horizontal" | "vertical" | "block" | "inline";
    /**Pass true to only show error in tooltip */
    isTableCell?: boolean;
    /**Read only field*/
    readOnly?: boolean;
}
declare function TextArea(props: TextAreaProps): react_jsx_runtime.JSX.Element;

interface InputAction {
    name?: ReactNode;
    action?: any;
}
interface InputViewProps {
    /**Label for current field*/
    label?: string;
    /**Control the style type of component: MATERIAL, BORDERED, FLOAT_LABEL, NOT_BORDERED */
    type?: BORDER_TYPE$1;
    /**Prefix for filter value*/
    prefix?: string | JSX.Element;
    /**Show * as require field */
    isRequired?: boolean;
    disabled?: boolean;
    /**Suffix for filter value*/
    suffix?: string | JSX.Element;
    /**User-filled value*/
    value?: string;
    /**Placeholder of the component*/
    placeHolder?: string;
    /**Use to custom style the component*/
    className?: string;
    /**Boolean to show the lenght of value user-filled*/
    showCount?: boolean;
    /**Set maximum length of value*/
    maxLength?: number;
    /**Control the size of the component*/
    isSmall?: boolean;
    /**Provide a custom action (onClick) to the component*/
    action?: InputAction;
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "white" | "gray";
}
declare const InputView: React.ForwardRefExoticComponent<InputViewProps & React.RefAttributes<HTMLDivElement>>;

interface InputRangeProps extends InputNumberProps {
    /**User-filled values*/
    valueRange: [number, number] | [];
    /**Placeholder of the component*/
    placeHolderRange?: [string, string];
    /**Control the style type of component: MATERIAL, BORDERED, FLOAT_LABEL */
    type?: BORDER_TYPE$1;
    /**Handle the change [fromNumber, toNumber] of the component*/
    onChangeRange: (T: [number, number]) => void;
    /**Control the size of the component*/
    isSmall?: boolean;
}
declare function InputRange(props: InputRangeProps): react_jsx_runtime.JSX.Element;

interface DatePickerAction {
    name?: string;
    action?: never;
}
interface DatePickerProps {
    /**User-selected value*/
    value?: dayjs__default.Dayjs;
    /**Label for current field*/
    label?: string;
    /** Use to format the date selected */
    dateFormat?: string[];
    /** Handle the change value of the component */
    onChange?: (value: dayjs__default.Dayjs | null, dateString?: string) => void;
    /** Control the style borderType of component: MATERIAL, BORDERED, FLOAT_LABEL */
    borderType?: BORDER_TYPE$1;
    /** Control the size of the component */
    isSmall?: boolean;
    /** Not allow to handle change the component */
    disabled?: boolean;
    /**Read only field*/
    readOnly?: boolean;
    /** Show * as required field */
    isRequired?: boolean;
    /** Use to custom style the component */
    className?: string;
    /** Provide a custom action (onClick) to the component */
    action?: DatePickerAction;
    /** Placeholder of the component */
    placeholder?: string;
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "white" | "gray";
}
declare function DatePicker(props: DatePickerProps & DatePickerProps$1): react_jsx_runtime.JSX.Element;

interface TimePickerAction {
    name?: string;
    action?: any;
}
interface TimePickerProps {
    /**User-selected time value*/
    value?: dayjs__default.Dayjs | any;
    /**Label for current field*/
    label?: string;
    /** Use to format the time selected */
    timeFormat?: string | any[];
    /** Handle the change value of the component */
    onChange?: (value: dayjs__default.Dayjs | null, timeString?: string) => void;
    /** Control the style type of component: MATERIAL, BORDERED, FLOAT_LABEL */
    borderType?: BORDER_TYPE$1;
    /** Control the size of the component */
    isSmall?: boolean;
    /** Not allow to handle change the component */
    disabled?: boolean;
    /** Show * as required field */
    isRequired?: boolean;
    /** Use to custom style the component */
    className?: string;
    /** Provide a custom action (onClick) to the component */
    action?: TimePickerAction;
    /** Placeholder of the component */
    placeholder?: string;
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "white" | "gray";
}
declare function TimePicker(props: TimePickerProps & TimePickerProps$1): react_jsx_runtime.JSX.Element;

interface DateRangePickerAction {
    name?: string;
    action?: any;
}
interface DateRangePickerProps {
    /**Label for current field*/
    label?: string;
    /**User-selected values*/
    value: [dayjs.Dayjs, dayjs.Dayjs];
    /** Use to format the date selected */
    dateFormat?: string[];
    /** Handle the change value of the component */
    onChange?: (value: [dayjs.Dayjs, dayjs.Dayjs], dateString?: [string, string]) => void;
    /** Control the style type of component: MATERIAL, BORDERED, FLOAT_LABEL */
    borderType?: BORDER_TYPE$1;
    /** Control the size of the component */
    isSmall?: boolean;
    /** Not allow to handle change the component */
    disabled?: boolean;
    /**Read only field*/
    readOnly?: boolean;
    /** Show * as required field */
    isRequired?: boolean;
    /** Use to custom style the component */
    className?: string;
    /** Provide a custom action (onClick) to the component */
    action?: DateRangePickerAction;
    /** Placeholder of the component */
    placeholder?: [string, string];
    /**Return element Popup container */
    getPopupContainer?: () => HTMLElement;
    /**Pass className to style for dropdown */
    popupClassName?: string;
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "white" | "gray";
}
declare function DateRangePicker(props: DateRangePickerProps & RangePickerProps): react_jsx_runtime.JSX.Element;

interface SelectProps$1<T extends Model, TModelFilter extends ModelFilter> {
    /**Value users select*/
    value?: Model;
    /**Value filter for api get data option*/
    valueFilter?: TModelFilter;
    /**The property name of the model filter you want to search in the list data*/
    searchProperty?: string;
    /**The type of searchProperty you want to search in the list data*/
    searchType?: string;
    /**Placeholder of the component*/
    placeHolder?: string;
    /**Not allow to handle change value*/
    disabled?: boolean;
    /**True for data list  is Enum*/
    isEnumerable?: boolean;
    /**Append this component to body*/
    appendToBody?: boolean;
    /**Show symbol * as required field*/
    isRequired?: boolean;
    /**Api to get list data*/
    getList?: (TModelFilter?: TModelFilter) => Observable<T[]>;
    /**Handle the change value of the component*/
    onChange?: (id: number, T?: T) => void;
    /**Provide a function to render a specific property as name*/
    render?: (t: T) => string;
    /**Model filter class of API get list data*/
    classFilter: new () => TModelFilter;
    /**Control the style type of component: MATERIAL, BORDERED, FLOAT_LABEL */
    type?: BORDER_TYPE$1;
    /**Label for current field*/
    label?: string;
    /**Option show button add new*/
    selectWithAdd?: () => void;
    /**Title of button add new */
    selectWithAddTitle?: string;
    /** Control the size of the component */
    isSmall?: boolean;
    /**Prefer option to select*/
    preferOptions?: T[];
    /** Provide a custom action (onClick) to the component */
    action?: InputAction$2;
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "white" | "gray";
    /**Use to custom style the component*/
    className?: string;
    /** If allow to remove input content with clear icon */
    allowClear?: boolean;
    /** Search in Select */
    isSearch?: boolean;
    readOnly?: boolean;
    isShowTooltip?: boolean;
    checkAllowClearWithRequire?: boolean;
}
declare function Select(props: SelectProps$1<Model, ModelFilter>): react_jsx_runtime.JSX.Element;

interface MultipleSelectProps<T extends Model, TFilter extends ModelFilter> {
    /**list value users select*/
    values?: Model[];
    /**Value filter for api get data option*/
    valueFilter?: TFilter;
    /**The property name of the model filter you want to search in the list data*/
    searchProperty?: string;
    /**The type of searchProperty you want to search in the list data*/
    searchType?: string;
    /**Placeholder of the component*/
    placeHolder?: string;
    /**Not allow to handle change value*/
    disabled?: boolean;
    /**Show symbol * as required field*/
    isRequired?: boolean;
    /**Append this component to body*/
    appendToBody?: boolean;
    /**Api to get list data*/
    getList?: (TModelFilter?: TFilter) => Observable<T[]>;
    /**Handle the change value of the field*/
    onChange?: (selectedList?: T[], ids?: []) => void;
    /**Provide a function to render a specific property as name*/
    render?: (t: T) => string;
    /**Model filter class of API get list data*/
    classFilter: new () => TFilter;
    /**Label for current field*/
    label?: string;
    /**Control the style type of component: MATERIAL, BORDERED, FLOAT_LABEL */
    type?: BORDER_TYPE$1;
    /**Control the size of the component*/
    isSmall?: boolean;
    /**Option show button add new*/
    selectWithAdd?: () => void;
    /**Component enable to search data list*/
    isUsingSearch?: boolean;
    /**Not expand the title row to see more detail on each post (each row)*/
    isNotExpand?: boolean;
    /**Set enum value */
    isEnumerable?: boolean;
    /**Set material */
    isMaterial?: boolean;
    /**Prefer option to select*/
    preferOptions?: T[];
    /**Set show tooltip or not */
    isShowTooltip?: boolean;
    /** Provide a custom action (onClick) to the component */
    action?: InputAction$2;
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "white" | "gray";
    /**Use to custom style the component*/
    className?: string;
    /**Handle onKeyDown action*/
    onKeyDown?: (event: any) => void;
    /**Handle onEnter action*/
    onKeyEnter?: (event: any) => void;
}
declare function MultipleSelect(props: MultipleSelectProps<Model, ModelFilter>): react_jsx_runtime.JSX.Element;

interface SelectProps<T extends Model> {
    /**Value users select*/
    value?: Model;
    /**List value users select*/
    listValue?: Model[];
    /**Placeholder of the component*/
    placeHolder?: string;
    /**Not allow to handle change value*/
    disabled?: boolean;
    /**Append this component to body*/
    appendToBody?: boolean;
    /**Show symbol * as required field*/
    isRequired?: boolean;
    /**Handle the change value of the field*/
    onChange?: (id: number, T?: T) => void;
    /**Handle the change list value of the component */
    onChangeMultiple?: (selectedList?: T[], ids?: []) => void;
    /**Provide a function to render a specific property as name*/
    render?: (t: T) => string;
    /**Control the style type of component: MATERIAL, BORDERED, FLOAT_LABEL */
    type?: BORDER_TYPE$1;
    /**Label for current field*/
    label?: string;
    /**Option show button add new*/
    selectWithAdd?: () => void;
    /**Control the size of the component*/
    isSmall?: boolean;
    /**Prefer option to select*/
    preferOptions?: T[];
    /**Option to select multiple*/
    isMultiple?: boolean;
    /**Api to get list data*/
    getList?: () => Observable<T[]>;
    /**Custom height of dropdown data list*/
    height?: number;
    /** Provide a custom action (onClick) to the component */
    action?: InputAction$2;
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "white" | "gray";
    /**Use to custom style the component*/
    className?: string;
    /**Use to set time get list to call*/
    isLoadMultipleTimes?: boolean;
}
declare function EnumSelect(props: SelectProps<Model>): react_jsx_runtime.JSX.Element;

declare class TreeNode<T extends Model> implements DataNode {
    title: string;
    key: number;
    item: Model;
    children: TreeNode<T>[];
    disabled: boolean;
    constructor(value?: T);
}

interface TreeProps<T extends Model, TModelFilter extends ModelFilter> {
    /**Item selected*/
    items?: Model[];
    /**List TreeNode data*/
    treeData?: TreeNode<T>[];
    /**Value filter for api getTreeData*/
    valueFilter?: TModelFilter;
    /**List key of node is expanding*/
    expandedKeys?: number[];
    /**List key of node checked*/
    checkedKeys?: number[];
    /**Switch to multiple check option*/
    checkable?: boolean;
    /**Key of selected node */
    selectedKey?: number;
    /**Not allow to select the father item that contain a lot of items inside*/
    onlySelectLeaf?: boolean;
    /**API to get data*/
    getTreeData?: (TModelFilter?: TModelFilter) => Observable<T[]>;
    /**Function to change selected items*/
    onChange?: (treeNode: TreeNode<T>[], disableChange?: boolean) => void;
    /**Provide a function to render a specific property as name*/
    render?: (treeNode: T) => string;
    /**Option to show add new button*/
    selectWithAdd?: () => void;
    /**Prefer node item of tree*/
    preferOptions?: T[];
    /**Pass ref of list data select */
    selectListRef?: RefObject<any>;
    /** Prop of AntdTreeProps*/
    titleRender?: (T: T) => ReactNode;
    /** Option to collapse and expand tree data */
    isExpand?: boolean;
    /** Option to let user cant select the selected item in tree list */
    isDisableSelected?: boolean;
    /** Option to let developer can modify tree data */
    buildTree?: (flatData: Model[]) => [TreeNode$1<Model>[], number[]];
    /** Key property when you want to customize build tree object */
    keyField?: string;
    /**tree original */
    treeOriginalBehavior?: boolean;
}
declare function Tree(props: TreeProps<Model, ModelFilter> & TreeProps$1): react_jsx_runtime.JSX.Element;

interface TreeSelectProps<T extends Model, TModelFilter extends ModelFilter> {
    /**Title for filter field*/
    title?: string;
    /** User-selected values*/
    listItem?: Model[];
    /** User-selected value*/
    item?: Model;
    /**The property name of the model filter you want to search in the list data*/
    searchProperty?: string;
    /**The type of searchProperty you want to search in the list data*/
    searchType?: string;
    /** An optional to multiple check filter values*/
    checkable?: boolean;
    /** Prop of AntdTreeProps*/
    selectable?: boolean;
    /**Check treeNode precisely; parent treeNode and children treeNodes are not associated*/
    checkStrictly?: boolean;
    /** Not allow to handle change filter*/
    disabled?: boolean;
    /** Value filter for api get data option*/
    valueFilter?: TModelFilter;
    /** Placeholder of the component*/
    placeHolder?: string;
    /** Key of selected node */
    selectedKey?: number;
    /**Not allow to select the father item that contain a lot of items inside*/
    onlySelectLeaf?: boolean;
    /**Show symbol * as required field*/
    isRequired?: boolean;
    /**Append this component to body*/
    appendToBody?: boolean;
    /**Provide a function to render a specific property as name*/
    render?: (T: T) => string;
    /** API to get data*/
    getTreeData?: (TModelFilter?: TModelFilter) => Observable<T[]>;
    /** Function to change selected items*/
    onChange?: (T: Model[], TT: boolean) => void;
    /** Model filter class of API get list data*/
    classFilter?: new () => TModelFilter;
    /** Control the style type of component: MATERIAL, BORDERED, FLOAT_LABEL */
    type?: BORDER_TYPE$1;
    /** Label for current field*/
    label?: string;
    /** Control the size of the component*/
    isSmall?: boolean;
    /** Prop of AntdTreeProps*/
    treeTitleRender?: (T: T) => ReactNode;
    /**Option show button add new*/
    selectWithAdd?: () => void;
    /**Component enable to search data list*/
    isUsingSearch?: boolean;
    /** Prefer node item of tree*/
    preferOptions?: T[];
    /** Custom background color for component: "white" || "gray" */
    bgColor?: "gray" | "white";
    /**Use to custom style the component*/
    className?: string;
    /** Option to let user cant select the selected item in tree list */
    isDisableSelected?: boolean;
    /** Option to let developer can modify tree data */
    buildTree?: (flatData: Model[]) => [TreeNode$1<Model>[], number[]];
    /** Key property when you want to customize build tree object */
    keyField?: string;
}
declare function TreeSelect(props: TreeSelectProps<Model, ModelFilter>): react_jsx_runtime.JSX.Element;

type ButtonType = "primary" | "secondary" | "tertiary" | "text" | "danger" | "link" | "icon-primary" | "icon-secondary" | "icon-ghost" | "icon-primary-circle";
interface ButtonProps {
    /**Change the design of button*/
    type?: ButtonType;
    /**Is the button loading or not*/
    loading?: boolean;
    /**Type of component – button*/
    htmlType?: ButtonHTMLAttributes<any>["type"];
    /**Pass the classname to change the style of button*/
    className?: string;
    /**Function to be called when the button is clicked*/
    onClick?: ButtonHTMLAttributes<any>["onClick"];
    /** Size md for only button icon */
    size?: "lg" | "sm" | "md";
    children?: ReactNode;
    /**Disabled state of button*/
    disabled?: boolean;
    /**Set the icon of button*/
    icon?: JSX.Element;
    /**Set the icon of button*/
    iconPlace?: "left" | "right" | "both";
    /**Use stroke for color icon */
    isUseStrokeSvg?: boolean;
    /**link for button link */
    link?: string;
    /**link target */
    linkTarget?: "_blank" | "_self" | "_parent" | "_top";
}
declare const Button: (props: PropsWithChildren<ButtonProps>, ref: React.Ref<any>) => react_jsx_runtime.JSX.Element;

interface IconLoadingProps {
    /** Size of icon */
    size?: number;
    /** Color of icon */
    color?: string;
}
declare function IconLoading(props: IconLoadingProps): react_jsx_runtime.JSX.Element;

interface InlineLoadingProps {
    /**Pass the classname to change the style inline loading */
    className?: string;
    /**State of inline loading*/
    status?: "default" | "submitting" | "submitted" | "error";
    /**Title for status submitting*/
    titleLoading?: string;
    /**Title for status submitted*/
    titleSubmitted?: string;
    /**Title for status error*/
    titleError?: string;
}
declare const InlineLoading: {
    (props: PropsWithChildren<InlineLoadingProps>): react_jsx_runtime.JSX.Element;
    defaultProps: {
        status: string;
        titleLoading: string;
        titleSubmitted: string;
        titleError: string;
    };
};

interface ModalCustomProps$1 extends ModalProps {
    children?: ReactNode;
    /**Is the modal footer (cancel, apply, apply next button) visible or not*/
    visibleFooter?: boolean;
    /**Change the size of modal*/
    size?: MODAL_SIZE$1;
    /**Name of apply button*/
    titleButtonApply?: string;
    /**Name of cancel button*/
    titleButtonCancel?: string;
    /**Cancel the form (Button type secondary)*/
    handleCancel?: (event: any) => void;
    /**Function pass when you need to handle a different feature*/
    handleClickIcon?: (event: any) => void;
    /**Save the form (Button type primary)*/
    handleSave?: (event: any) => void;
    /**Pass disable for button cancel */
    disableButtonCancel?: boolean;
    /**Pass disable for button apply */
    disableButtonApply?: boolean;
    isShowButtonCancel?: boolean;
    isShowButtonApply?: boolean;
    isShowIconBack?: boolean;
    /**Enable resizing functionality*/
    resizable?: boolean;
}
declare function Modal(props: ModalCustomProps$1): react_jsx_runtime.JSX.Element;

interface TearSheetProps extends ModalProps {
    children?: ReactNode;
    /**Is the modal footer (cancel, save button) visible or not*/
    visibleFooter?: boolean;
    /**Name of save button*/
    titleButtonSave?: string;
    /**Name of cancel button*/
    titleButtonCancel?: string;
    /**Cancel the form*/
    handleCancel?: (event: any) => void;
    /**Save the form*/
    handleSave?: (event: any) => void;
    /**Pass state of loading */
    loadingType?: "default" | "submitting" | "submitted" | "error";
    /**Pass the classname to change the style component*/
    className?: string;
    /**Control the TearSheet visible or not*/
    visible?: boolean;
    /**Title of header TearSheet */
    title?: string;
    /**Description of header TearSheet  */
    description?: string;
    /**Additional content of header TearSheet  */
    additionalContent?: string;
}
declare function TearSheet(props: TearSheetProps): react_jsx_runtime.JSX.Element;
declare namespace TearSheet {
    var defaultProps: {
        titleButtonSave: string;
        titleButtonCancel: string;
        visibleFooter: boolean;
        loadingType: string;
    };
}

interface DrawerProps {
    children?: ReactNode;
    /**Control the drawer visible or not*/
    visible?: boolean;
    /**Control the footer of drawer visible or not*/
    visibleFooter?: boolean;
    /**Control the disable state of Apply button and Apply button*/
    disableButton?: boolean;
    /**Control the disable state of Cancel button*/
    disableButtonCancel?: boolean;
    /**Control the disable state of Cancel button*/
    disableButtonDelete?: boolean;
    /**Control the loading state of the drawer*/
    loading?: boolean;
    /**The title for drawer*/
    title?: ReactNode;
    /**The description for title*/
    description?: ReactNode;
    /**The title of Apply button*/
    titleButtonApply?: string;
    /**The title of Delete button*/
    titleButtonDelete?: string;
    /**The title of ApplyNext button*/
    titleButtonApplyNext?: string;
    /**The title of cancel button*/
    titleButtonCancel?: string;
    /**Control number button of footer drawer*/
    numberButton?: NUMBER_BUTTON$1;
    /**Function to be called when user click close icon*/
    handleClose?: () => void;
    /**Function to be called when user click cancel button*/
    handleCancel?: () => void;
    /**Function to be called when user click delete button*/
    handleDelete?: () => void;
    /**Function to be called when user click Apply button. After click the drawer will be closed*/
    handleSave?: () => void;
    /**Function to be called when user click submit button ApplyNext*/
    handleApplyNext?: () => void;
    /**Control close icon visible or not*/
    isHaveCloseIcon?: boolean;
    /**Control the size of drawer*/
    size?: "sm" | "lg" | "xl" | "2xl" | "max";
    /**Control the size of drawer*/
    side?: "left" | "right";
    /**Use to custom style the component*/
    className?: string;
    /**Option to control overlay drawer visible*/
    hasOverlay?: boolean;
    /**Should handle close when click outside */
    shouldCloseWhenClickOutSide?: boolean;
    /**Show button cancel */
    isShowButtonDelete?: boolean;
    /**Show button cancel */
    isShowButtonCancel?: boolean;
    /**Show button apply next*/
    isShowButtonApplyNext?: boolean;
    /**Show button apply*/
    isShowButtonApply?: boolean;
    footer?: ReactNode;
    overlayClassName?: string;
}
declare function Drawer(props: DrawerProps): react_jsx_runtime.JSX.Element;

interface FileLoadingContentProps {
    /**Pass file loading */
    file?: FileModel$2;
    /**Use to custom style the component*/
    className?: string;
}
declare function FileLoadingContent(props: FileLoadingContentProps): react_jsx_runtime.JSX.Element;

interface FileLoadedContentProps {
    /**Pass list file loaded */
    file?: FileModel$2;
    /**Function use to remove file */
    removeFile?: (fileId: string | number) => void;
    /**Option to set component have only view mode */
    isViewMode?: boolean;
    /**Use to custom style the component*/
    className?: string;
    /**Icon */
    icon?: ReactNode;
    onClickFile?: (file: FileModel$2) => void;
    showIconDowload?: boolean;
    showIconArrowSquareOut?: boolean;
    onClickIcon?: (file: FileModel$2) => void;
}
declare function FileLoadedContent(props: FileLoadedContentProps): react_jsx_runtime.JSX.Element;

interface FileModel$2 {
    id?: number;
    fileId?: string | number;
    name?: string;
    url?: string;
    appUserId?: number;
    rowId?: string;
    content?: string;
    mimeType?: string;
    isFile?: boolean;
    key?: any;
    path?: string;
    level?: number;
    isDelete?: boolean;
    clearAction?: (fileId: string | number) => void;
    handleInput?: (e: any) => void;
}
interface UploadFileProps {
    /**Option for multiple UploadFile */
    isMultiple?: boolean;
    /**Title button */
    titleButton?: string;
    /**Content of UploadFile component */
    uploadContent?: string;
    /**Content of UploadFile component */
    textHint?: string;
    /**Function change list file uploaded */
    updateList?: (files: FileModel$2[]) => void;
    /**API use to upload list file selected to server*/
    uploadFile?: (files: File[] | Blob[]) => Observable<FileModel$2[]>;
    /**Option limit maximum size (b) of list file to upload to server */
    maximumSize?: number;
    /** Option to change style of upload  "link", "button", "dragAndDrop"*/
    type?: "link" | "button" | "dragAndDrop";
    /**Icon of component */
    icon?: JSX.Element;
    /**Option to set component have only view mode */
    isViewMode?: boolean;
    /**Function to set list file in status loading */
    setListFileLoading?: (files: FileModel$2[]) => void;
    /**Use to custom style the component*/
    className?: string;
    /**acept file */
    acceptFiles?: string;
    /**Function to handle error when upload file */
    onUploadError?: (error: AxiosError<any>) => void;
    disabled?: boolean;
}
declare function UploadFile(props: UploadFileProps): react_jsx_runtime.JSX.Element;
declare namespace UploadFile {
    var FileLoadedContent: typeof FileLoadedContent;
    var FileLoadingContent: typeof FileLoadingContent;
}

declare class File$1 extends Model {
    id?: number;
    name?: string;
    url?: string;
    appUserId?: number;
    extension?: string;
    size?: number;
    rowId?: string;
    error?: string;
}
interface FileModel$1 extends File$1 {
    content?: string;
    mimeType?: string;
    isFile?: boolean;
    key?: any;
    path?: string;
    level?: number;
    isDelete?: boolean;
    clearAction?: (fileId: string | number) => void;
    handleInput?: (e: any) => void;
}
interface UploadImageProps {
    /** Option to change style of upload  IMAGE, AVATAR*/
    type?: UPLOADTYPE_IMAGE$1;
    /**Auto upload image */
    autoUpload?: boolean;
    /**Option for multiple UploadImage */
    isMultiple?: boolean;
    /**Option for minimized size UploadImage */
    isMinimized?: boolean;
    /**List image uploaded*/
    files?: FileModel$1[];
    /**Function change list image uploaded */
    updateList?: (files: FileModel$1[]) => void;
    /**API use to upload list image selected to server*/
    uploadFile?: (files: File$1[] | Blob[]) => Observable<FileModel$1[]>;
    /**Icon of component */
    icon?: ReactNode;
    /**Url of avatar for type UPLOADTYPE_IMAGE.AVATAR */
    currentAvatar?: string;
    /**API upload image to server for type UPLOADTYPE_IMAGE.AVATAR */
    uploadAvatar?: (file: File$1 | Blob) => Observable<FileModel$1>;
    /**Function change currentAvatar for type UPLOADTYPE_IMAGE.AVATAR */
    updateAvatar?: (files: FileModel$1) => void;
    /**Function use to remove image */
    removeFile?: (fileId?: string | number) => Observable<boolean>;
    /**Option change size of UploadImage */
    size?: "lg" | "md" | "sm" | "xs";
    /**Use to custom style the component*/
    className?: string;
    /**Option limit maximum size (b) of list image to upload to server */
    maximumSize?: number;
}
declare function UploadImage(props: UploadImageProps): react_jsx_runtime.JSX.Element;

interface ProgressIndicatorContentProps {
    children: ReactNode;
    /**Set max height of view cover content */
    height?: number;
    /**Set max width of view cover content */
    width?: number;
    /**Set contentId so ProgressIndicator can control data view/action scroll */
    contentId?: string;
    /**Use to custom style the component*/
    className?: string;
}
declare function ProgressIndicatorContent(props: ProgressIndicatorContentProps): react_jsx_runtime.JSX.Element;
declare namespace ProgressIndicatorContent {
    var defaultProps: {
        height: number;
    };
}

interface ProgressIndicatorModel {
    sectionName?: string;
    sectionId?: number;
}
interface ProgressIndicatorProps {
    /**Pass list section [{sectionName,sectionId}] */
    list?: ProgressIndicatorModel[];
    /**Pass Id of ProgressIndicatorContent to control action scroll */
    idContainer?: string;
    /**An option to set  vertical or horizontal type*/
    type?: "vertical" | "horizontal";
    /**Use to custom style the component*/
    className?: string;
}
declare const ProgressIndicator: {
    (props: ProgressIndicatorProps): react_jsx_runtime.JSX.Element;
    Content: typeof ProgressIndicatorContent;
    defaultProps: {
        list: any[];
        type: string;
    };
};

declare class Message extends Model {
    id?: number;
    content?: string;
    mobileContent?: string;
    creatorId?: number;
    createdAt?: Dayjs;
    createdDate?: Dayjs;
    updatedAt?: Dayjs;
    deletedAt?: Dayjs;
    creator?: Creator;
    isOwner?: boolean;
    isPopup?: boolean;
    constructor(message?: Message);
}
declare class Creator extends Model {
    id?: number;
    userName?: string;
    displayName?: string;
    avatar?: string;
    name?: string;
}
declare class FileModel extends Model {
    id: number;
    key?: string;
    name?: string;
    content?: string;
    mimetype?: string;
    isFile?: boolean;
    path?: string;
    level?: number;
}

interface CommentProps<TFilter extends ModelFilter> {
    /**Creator of comment*/
    userInfo: Creator;
    /**Option to prevent comment submission*/
    canSend?: boolean;
    /**Placeholder of input comment*/
    placeholder?: string;
    /**Title above of comment component*/
    title?: string;
    /**Id of this discussion*/
    defaultFilter: any;
    /**Set true to show the title of comment component*/
    isShowHeader: boolean;
    /**ModelFilter of param of API use for get list comment*/
    classFilter?: new () => TFilter;
    /**API get list of comment/chat*/
    getMessages?: (TModelFilter?: TFilter) => Observable<Message[]>;
    /**Render name of comment*/
    renderName?: (creator: Creator) => string;
    /**API get quantity of comment/chat*/
    countMessages?: (TModelFilter?: TFilter) => Observable<number>;
    /**API to submit new comment/chat*/
    postMessage?: (Message: Message) => Observable<Message>;
    /**API for edit a comment existed*/
    updateMessage?: (Message: Message) => Observable<Message>;
    /**Boolean attribute to control editable comment existed*/
    canEditMessage?: boolean;
    /**API use when you what to delete a comment*/
    deleteMessage?: (Message: Message) => Observable<boolean>;
    /**API show list suggest of user when you enter @ and want to tag someone to this comment*/
    suggestList?: (filter: TFilter) => Observable<Model[]>;
    /**API call when you want to save file to server and save it to this comment*/
    attachFile?: (File: File) => Observable<FileModel>;
}
declare function Comment(props: CommentProps<ModelFilter>): react_jsx_runtime.JSX.Element;

interface TabsProps extends TabsProps$1 {
    /**Option change tab styling */
    mode?: TabsType;
    /**List key of error tab */
    tabErrorKeys?: string[];
    /**Option for change background color tab to white  */
    lightColor?: boolean;
}
declare function Tabs(props: TabsProps): react_jsx_runtime.JSX.Element;

interface StandardTableCustomProps extends TableProps<any> {
    /**Option pass id of table */
    idContainer?: string;
    /**Table is draggable */
    isDragable?: boolean;
    /**Used to change style table */
    className?: string;
    /**Show sorter tooltip */
    showSorterTooltip?: boolean;
    /**Use to resize column*/
    colResizable?: boolean;
}
declare function StandardTable(props: StandardTableCustomProps): react_jsx_runtime.JSX.Element;

interface ActionRowType<T extends Model> {
    record?: T;
    visible?: boolean;
    x?: number;
    y?: number;
    rowHeight?: number;
}
interface ActionRowProps<T extends Model> {
    children?: ReactNode;
    tableKey?: string;
    actionRow?: ActionRowType<T>;
    setActionRow?: Dispatch<SetStateAction<ActionRowType<T>>>;
}
declare const ActionRow: (props: ActionRowProps<Model>) => react_jsx_runtime.JSX.Element;

interface LayoutCellProps {
    /**Used to change style Component */
    className?: string;
    /** Option to align display value */
    position?: "left" | "right" | "center";
    children: ReactNode;
}
declare function LayoutCell(props: LayoutCellProps): react_jsx_runtime.JSX.Element;

interface LayoutHeaderProps {
    /**Used to change style Component */
    className?: string;
    /** Option to align display value */
    position?: "left" | "right" | "center";
    /** Title of header */
    title?: string;
    /** Maxlength of title to display */
    maxLength?: number;
    /** Boolean to check if column is sorting */
    isSorter?: boolean;
}
declare function LayoutHeader(props: LayoutHeaderProps): react_jsx_runtime.JSX.Element;

interface ActionBarComponentProps {
    children?: ReactNode;
    /** SelectedRowKeys of table */
    selectedRowKeys?: Key[];
    /** SetSelectedRowKeys of table*/
    setSelectedRowKeys?: Dispatch<SetStateAction<Key[]>>;
    /**Handle cancel selection */
    handleCancelAction?: () => void;
    /**Row selection */
    rowSelections?: any;
    translateSelected?: string;
    translateLine?: string;
}
declare function ActionBarComponent(props: ActionBarComponentProps): react_jsx_runtime.JSX.Element;

interface PaginationProps extends PaginationProps$1 {
    /**Current page is skipped */
    pageIndex?: number;
    /**Number of records to get in current page */
    pageSize?: number;
    /**Used to custom the page size options */
    pageSizeOptions?: number[];
    /**Function to change current page */
    onChange?: (pageIndex: number, pageSize: number) => void;
    /**Enter page number to go */
    /**Show change page size */
    changePageSize?: boolean;
    recordPerPageTitle?: string;
    showCurrentRecordsNumber?: boolean;
    currentRecordNumberPosition?: "left" | "right";
}
declare function Pagination(props: PaginationProps): react_jsx_runtime.JSX.Element;

interface BadgeTextProps {
    /**Used to change style of badge text */
    className?: string;
    /**Value to display */
    value?: string;
    /**Background color to display */
    backgroundColor?: string;
    /**Customer value color */
    color?: string;
    /**Max length of display value */
    countCharacters?: number;
    /**Has icon */
    hasIconDot?: boolean;
}
declare function BadgeText(props: BadgeTextProps): react_jsx_runtime.JSX.Element;

interface OneLineTextProps {
    /**Used to change style Component */
    className?: string;
    /**URL of avatar to display */
    avatar?: string;
    /**Shape option of avatar*/
    avatarType?: "circle" | "square";
    /** Icon name to display */
    icon?: string;
    /** Value to display */
    value?: string;
    /**Option to add link into cell */
    link?: string;
    /**Use tooltip for data in cell */
    useTooltip?: boolean;
}
declare function OneLineText(props: OneLineTextProps): react_jsx_runtime.JSX.Element;

interface TwoLineTextProps {
    /**Used to change style Component */
    className?: string;
    /**URL of avatar to display */
    avatar?: string;
    /**Shape option of avatar*/
    avatarType?: "circle" | "square";
    /** Icon name to display */
    icon?: string;
    /** Display value of line 1*/
    valueLine1?: string;
    /** Display value of line 2*/
    valueLine2?: string;
    /** ClassName to style for display line 1 */
    classNameFirstLine?: string;
    /** ClassName to style for display line 2 */
    classNameSecondLine?: string;
    /**Option to add link into cell */
    link?: string;
    /**Use tooltip for data in cell */
    useTooltip?: boolean;
}
declare function TwoLineText(props: TwoLineTextProps): react_jsx_runtime.JSX.Element;

interface StatusLineProps {
    /**Used to change style Component */
    className?: string;
    /** Display value of status */
    value?: string;
    /** Count max length to display of value */
    countCharacters?: number;
    /** Color of status */
    color?: string;
}
declare function StatusLine(props: StatusLineProps): react_jsx_runtime.JSX.Element;

interface ListOverflowMenu {
    title: string;
    action: (params?: any) => void;
    isShow: boolean;
}

interface CustomProps {
    /**List object action {name,function} of menu */
    list?: ListOverflowMenu[];
    /**Change the size of button */
    size?: "md" | "xl";
    /**Append this component to body */
    appendToBody?: boolean;
    /**Option to set type vertical or horizontal */
    type?: "vertical" | "horizontal";
    /**option change style type o