From a8a1be0696305045e6607ebafa5b9144c5dbf9b9 Mon Sep 17 00:00:00 2001
From: tinhvqbk <tinhvqbk@gmail.com>
Date: Sun, 24 Apr 2022 19:00:11 +0700
Subject: [PATCH 1/7] Add type definitions

---
 .eslintignore    |    3 +-
 scripts/build.js |    1 +
 src/index.d.ts   | 1098 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 1101 insertions(+), 1 deletion(-)
 create mode 100644 src/index.d.ts

diff --git a/.eslintignore b/.eslintignore
index 4ad62f6..fb85ed2 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,2 +1,3 @@
 /config
-/scripts
\ No newline at end of file
+/scripts
+/**/*.d.ts
diff --git a/scripts/build.js b/scripts/build.js
index b6adf43..47cc4a6 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -125,6 +125,7 @@ const measureAndBuild = (outputPath, configs) => {
             );
             console.log();
           }
+          fs.copySync(paths.appSrc + '/index.d.ts', config.output.path + '/index.d.ts');
         })
       },
       err => {
diff --git a/src/index.d.ts b/src/index.d.ts
new file mode 100644
index 0000000..6e3f1fc
--- /dev/null
+++ b/src/index.d.ts
@@ -0,0 +1,1098 @@
+// Type definitions for @ahaui/react v2.0.3
+// Project: https://github.com/gotitinc/aha-react
+// Definitions by: KyleTV <https://github.com/tinhvqbk>
+// TypeScript Version: 3.3
+
+declare module '@ahaui/react' {
+  import React from 'react';
+  import { ReactNodeLike } from 'prop-types';
+  import { CalendarProps as ReactCalendarProps } from 'react-calendar';
+  import { DatePickerProps as ReactDatePickerProps } from 'react-date-picker';
+  import { Settings as SlickSettingsProps } from 'react-slick';
+  import { PopperOptions, Placement as PopperPlacement } from 'popper.js';
+  import { toast as toastBase } from 'react-toastify';
+
+  export interface BasicProps {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+  }
+  export type TriggerType = 'click' | 'hover' | 'focus';
+  export type InputSize = 'small' | 'medium' | 'large';
+  export type IconType =
+    | 'rotate'
+    | 'gitBranch'
+    | 'options'
+    | 'apps'
+    | 'fastForward'
+    | 'mail'
+    | 'trash'
+    | 'helpCircle'
+    | 'helpCircleOutline'
+    | 'cloudUpload'
+    | 'location'
+    | 'send'
+    | 'share'
+    | 'unlock'
+    | 'volumeHigh'
+    | 'volumeOff'
+    | 'zoomIn'
+    | 'zoomOut'
+    | 'expand'
+    | 'minus'
+    | 'plus'
+    | 'column'
+    | 'data'
+    | 'table'
+    | 'cart'
+    | 'store'
+    | 'workflow'
+    | 'bill'
+    | 'bag'
+    | 'funnel'
+    | 'playCircle'
+    | 'pin'
+    | 'card'
+    | 'chatExtension'
+    | 'chatBubbles'
+    | 'bubbles'
+    | 'code'
+    | 'create'
+    | 'earth'
+    | 'flag'
+    | 'journal'
+    | 'levelBeginner'
+    | 'levelImmediate'
+    | 'levelAdvanced'
+    | 'list'
+    | 'lock'
+    | 'moneyBag'
+    | 'multipleSkills'
+    | 'power'
+    | 'refresh'
+    | 'replace'
+    | 'search'
+    | 'setting'
+    | 'speedometer'
+    | 'starOutline'
+    | 'starHalf'
+    | 'star'
+    | 'thumbsDown'
+    | 'thumbsUp'
+    | 'alert'
+    | 'informationCircle'
+    | 'informationCircleOutline'
+    | 'notification'
+    | 'warning'
+    | 'attach'
+    | 'attachSpreadsheet'
+    | 'attachImage'
+    | 'attachPpt'
+    | 'attachTxt'
+    | 'attachSql'
+    | 'attachUndefined'
+    | 'attachCode'
+    | 'cloud'
+    | 'cloudDownload'
+    | 'copy'
+    | 'document'
+    | 'images'
+    | 'videoCam'
+    | 'arrowBack'
+    | 'arrowDown'
+    | 'arrowDropdownCircle'
+    | 'arrowDropdown'
+    | 'arrowDropleftCircle'
+    | 'arrowDropleft'
+    | 'arrowDroprightCircle'
+    | 'arrowDropright'
+    | 'arrowDropupCircle'
+    | 'arrowDropup'
+    | 'arrowForward'
+    | 'arrowRoundBack'
+    | 'arrowRoundDown'
+    | 'arrowRoundForward'
+    | 'arrowRoundUp'
+    | 'arrowUp'
+    | 'checkmark'
+    | 'checkmarkCircle'
+    | 'checkmarkCircleOutline'
+    | 'close'
+    | 'closeCircle'
+    | 'closeCircleOutline'
+    | 'menu'
+    | 'more'
+    | 'facebook'
+    | 'google'
+    | 'instagram'
+    | 'linkedin'
+    | 'twitter'
+    | 'youtube'
+    | 'hourglass'
+    | 'time'
+    | 'timer'
+    | 'contact'
+    | 'people'
+    | 'mic'
+    | 'calendar'
+    | 'micOff'
+    | 'videoCamOff'
+    | 'camera'
+    | 'airplane'
+    | 'screen'
+    | 'screenOff'
+    | 'map'
+    | 'raiseHand'
+    | 'editOff'
+    | 'edit'
+    | 'cursor'
+    | 'eraser'
+    | 'font'
+    | 'colorPalette'
+    | 'save'
+    | 'flash'
+    | 'aim'
+    | 'fileTrayFull'
+    | 'fileImport'
+    | 'fileExport'
+    | 'objects'
+    | 'reply'
+    | 'bot'
+    | 'shapes'
+    | 'return'
+    | 'umbrella'
+    | 'game'
+    | 'tagCloud'
+    | 'one'
+    | 'two'
+    | 'three'
+    | 'four'
+    | 'five'
+    | 'six'
+    | 'seven'
+    | 'eight'
+    | 'nine'
+    | 'ten';
+  export type FuncType = (...args: any[]) => any;
+  export type EventHandler = React.EventHandler<React.SyntheticEvent>;
+  export interface OptionType {
+    name: string;
+    id: string | number;
+  }
+
+  export interface AccordionToggleProps extends BasicProps {
+    eventKey: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+  }
+
+  export interface AccordionCollapseProps extends BasicProps {
+    eventKey: string;
+  }
+
+  export function useAccordionToggle(
+    eventKey: string,
+    onClick?: EventHandler,
+  ): EventHandler;
+
+  export interface AccordionProps extends BasicProps {
+    activeKey: string;
+  }
+  export const Accordion: React.FC<AccordionProps> & {
+    Toggle: React.FC<AccordionToggleProps>;
+    Collapse: React.FC<AccordionCollapseProps>;
+  };
+
+  export interface AskBoxProps extends BasicProps {}
+  export const AskBox: React.FC<AskBoxProps> & {
+    Title: React.FC<BasicProps>;
+    Header: React.FC<BasicProps>;
+    Body: React.FC<BasicProps>;
+    Footer: React.FC<BasicProps>;
+    Note: React.FC<BasicProps>;
+  };
+
+  export interface AvatarProps extends BasicProps {
+    name: string;
+    size:
+      | 'extraSmall'
+      | 'small'
+      | 'medium'
+      | 'large'
+      | 'extraLarge'
+      | 'extraLargePlus'
+      | 'huge';
+    src?: string;
+    text?: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    as: React.ElementType;
+  }
+
+  export const Avatar: React.FC<AvatarProps>;
+
+  export interface BadgeProps extends BasicProps {
+    variant?:
+      | 'default'
+      | 'white'
+      | 'black'
+      | 'primary'
+      | 'primary_subtle'
+      | 'warning'
+      | 'warning_subtle'
+      | 'positive'
+      | 'positive_subtle'
+      | 'information'
+      | 'information_subtle'
+      | 'negative'
+      | 'negative_subtle';
+    textClassName: string | string[];
+    as?: React.ElementType;
+  }
+  export const Badge: React.FC<BadgeProps>;
+  export interface BreadcrumbItemProps extends BasicProps {
+    href?: string;
+    noHref?: boolean;
+    title?: string;
+    target?: string;
+  }
+
+  export interface BreadcrumbProps extends BasicProps {
+    schema?: boolean;
+  }
+  export const Breadcrumb: React.FC<BreadcrumbProps> & {
+    Item: React.FC<BreadcrumbItemProps>;
+  };
+
+  export interface BubbleChatImageProps extends BasicProps {}
+
+  export interface BubbleChatProps extends BasicProps {
+    isTyping: boolean;
+    text?: string;
+    type?: 'inbound' | 'outbound' | 'system';
+    variant?:
+      | 'light'
+      | 'primary'
+      | 'primaryLight'
+      | 'dark'
+      | 'transparentDark'
+      | 'transparentLight';
+    avatar: string | FuncType;
+    time?: string | FuncType;
+    options?: OptionType;
+    currentOption?: string | number;
+    onSelectOption?: (_: string | number) => void;
+    disabledOption?: boolean;
+    onClickText?: () => void;
+    textClassName: string | string[];
+    actionBar?: React.ReactNode;
+    actionBarClassName?: string | string[];
+  }
+  export const BubbleChat: React.FC<BubbleChatProps> & {
+    Image: React.FC<BubbleChatImageProps>;
+  };
+
+  export interface ButtonGroupProps extends BasicProps {
+    sizeControl?: InputSize;
+    disabledControl?: boolean;
+    as?: React.ElementType;
+  }
+  export const ButtonGroup: React.FC<ButtonGroupProps>;
+  export interface ButtonProps extends BasicProps {
+    variant?:
+      | 'primary'
+      | 'primary_outline'
+      | 'secondary'
+      | 'accent'
+      | 'accent_outline'
+      | 'positive'
+      | 'positive_outline'
+      | 'negative'
+      | 'negative_outline'
+      | 'white'
+      | 'white_outline'
+      | 'link';
+    size?: InputSize;
+    width?: 'auto' | 'full' | 'min';
+    disabled?: boolean;
+    nonUppercase?: boolean;
+    onlyIcon?: boolean;
+    textClassName?: string | string[];
+    as?: React.ElementType;
+  }
+  export const Button: React.FC<ButtonProps> & {
+    Icon: React.FC<BasicProps>;
+    Label: React.FC<BasicProps>;
+    Group: typeof ButtonGroup;
+  };
+
+  export interface CalendarProps extends ReactCalendarProps {
+    className?: string;
+  }
+  export const Calendar: React.FC<CalendarProps>;
+
+  export interface DatePickerProps extends ReactDatePickerProps {
+    className?: string;
+  }
+  export const DatePicker: React.FC<DatePickerProps>;
+
+  export interface TimePickerProps extends BasicProps {
+    noClearIcon?: boolean;
+    size?: InputSize;
+  }
+  export const TimePicker: React.FC<TimePickerProps>;
+
+  export interface CardProps extends BasicProps {
+    body?: boolean;
+    size?: InputSize;
+  }
+  export const Card: React.FC<CardProps> & {
+    Header: React.FC<BasicProps>;
+    Title: React.FC<BasicProps>;
+    Body: React.FC<BasicProps>;
+  };
+
+  export interface CarouselProps extends BasicProps {
+    dotInside?: boolean;
+    settings?: SlickSettingsProps;
+  }
+  export const Carousel: React.FC<CarouselProps> & {
+    Item: React.FC<BasicProps>;
+  };
+
+  export interface ChatBoxListProps extends BasicProps {
+    innerClassName?: string;
+  }
+  export interface ChatBoxProps extends BasicProps {}
+  export const ChatBox: React.FC<ChatBoxProps> & {
+    List: React.FC<ChatBoxListProps>;
+    Attachment: React.FC<BasicProps>;
+    Info: React.FC<BasicProps>;
+    Context: React.FC<BasicProps>;
+    Notice: React.FC<BasicProps>;
+  };
+
+  export interface CollapseProps extends BasicProps {
+    eventKey: string;
+    timeout?: number;
+    dimension?: 'height' | 'width' | FuncType;
+    getDimensionValue: FuncType;
+  }
+  export const Collapse: React.FC<CollapseProps>;
+
+  export interface ComposerProps extends BasicProps {
+    inputProps?: object;
+    attachButtonProps?: object;
+    sendButtonProps?: object;
+    sendButtonActive?: boolean;
+    disabledSendButton?: boolean;
+    disabledAttachButton?: boolean;
+    tooltipAttachButton?: string | FuncType;
+    tooltipSendButton?: string | FuncType;
+    sendButtonIcon?: string | FuncType;
+  }
+  export const Composer: React.FC<ComposerProps>;
+
+  export interface CounterProps extends BasicProps {
+    variant?:
+      | 'primary'
+      | 'secondary'
+      | 'accent'
+      | 'information'
+      | 'warning'
+      | 'positive'
+      | 'negative'
+      | 'white';
+
+    label?: string | FuncType;
+    number?: string | FuncType;
+    iconLeft?: string | FuncType;
+  }
+  export const Counter: React.FC<CounterProps>;
+
+  export interface DropdownButtonProps extends BasicProps {
+    as?: React.ElementType;
+    caret?: boolean;
+  }
+  export interface DropdownContainerProps extends BasicProps {
+    as?: React.ElementType;
+    popperConfig?: PopperOptions;
+    additionalStyles?: React.CSSProperties;
+  }
+  export interface DropdownToggleProps extends BasicProps {
+    disabled?: boolean;
+  }
+  export interface DropdownProps extends BasicProps {
+    as?: React.ElementType;
+    drop?: 'up' | 'down' | 'left' | 'right';
+    flip?: boolean;
+    show?: boolean;
+    alignRight?: boolean;
+    onToggle?: () => void;
+  }
+  export const Dropdown: React.FC<DropdownProps> & {
+    Item: React.FC<BasicProps>;
+    Container: React.FC<DropdownContainerProps>;
+    Button: React.FC<DropdownButtonProps>;
+    Toggle: React.FC<DropdownToggleProps>;
+  };
+  export function useToggle(): [
+    {
+      ref: () => void;
+      'aria-haspopup': boolean;
+      'aria-expanded': boolean;
+    },
+    {
+      show: boolean;
+      toggle: () => void;
+    },
+  ];
+
+  export interface EmptyStateProps extends BasicProps {
+    name?: string;
+    src?: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+  }
+  export const EmptyState: React.FC<EmptyStateProps> & {
+    Heading: React.FC<BasicProps>;
+    Description: React.FC<BasicProps>;
+  };
+
+  export interface FadeProps extends BasicProps {
+    in?: boolean;
+    mountOnEnter?: boolean;
+    unmountOnExit?: boolean;
+    appear?: boolean;
+    timeout?: number;
+    onEnter?: () => void;
+    onEntering?: () => void;
+    onEntered?: () => void;
+    onExit?: () => void;
+    onExiting?: () => void;
+    onExited?: () => void;
+  }
+  export const Fade: React.FC<FadeProps>;
+
+  export interface FileAttachmentProps extends BasicProps {
+    fileType?:
+      | 'undefined'
+      | 'text'
+      | 'image'
+      | 'code'
+      | 'spreadsheet'
+      | 'query'
+      | 'powerpoint';
+    fileTypeLabel?: string | FuncType;
+    show?: boolean;
+    onClose?: () => void;
+    closeButton?: boolean;
+    actionLeft?: FuncType;
+    actionRight?: FuncType;
+  }
+  export const FileAttachment: React.FC<FileAttachmentProps>;
+
+  export interface FormCheckProps extends BasicProps {
+    type?: 'checkbox' | 'radio' | 'checkbox_button';
+    id: string;
+    label?: string | FuncType;
+    inline?: boolean;
+    isValid?: boolean;
+    isInvalid?: boolean;
+    sizeInput: InputSize;
+    as?: React.ElementType;
+  }
+  export interface FormFeedbackProps extends BasicProps {
+    type?: 'valid' | 'invalid';
+    visible?: boolean;
+    as?: React.ElementType;
+  }
+  export interface FormFileProps extends BasicProps {
+    id: string;
+    as?: React.ElementType;
+    sizeInput?: InputSize;
+    fileName?: string;
+    browseText?: string;
+    isValid?: boolean;
+    isInvalid?: boolean;
+    isBorderNone?: boolean;
+    isBackgroundReset?: boolean;
+    placeholder?: string;
+  }
+  export interface FormGroupProps extends BasicProps {
+    as?: React.ElementType;
+    controlId?: string;
+    sizeControl?: InputSize;
+    requiredControl?: boolean;
+  }
+  export interface FormInputProps extends BasicProps {
+    type?: string;
+    value?: string | number;
+    id: string;
+    disabled?: boolean;
+    required?: boolean;
+    readOnly?: boolean;
+    sizeInput?: InputSize;
+    isValid?: boolean;
+    isInvalid?: boolean;
+    isBorderNone?: boolean;
+    isBackgroundReset?: boolean;
+    as?: React.ElementType;
+  }
+  export interface FormLabelProps extends BasicProps {
+    sizeLabel?: InputSize;
+    required?: boolean;
+    htmlFor: string;
+  }
+  export interface FormSelectProps extends BasicProps {
+    value?: string | number;
+    id: string;
+    disabled?: boolean;
+    required?: boolean;
+    sizeInput?: InputSize;
+    isValid?: boolean;
+    isInvalid?: boolean;
+    isBorderNone?: boolean;
+    isBackgroundReset?: boolean;
+  }
+  export const Form: React.FC<BasicProps> & {
+    Check: React.FC<FormCheckProps>;
+    Feedback: React.FC<FormFeedbackProps>;
+    File: React.FC<FormFileProps>;
+    Group: React.FC<FormGroupProps>;
+    Input: React.FC<FormInputProps>;
+    Label: React.FC<FormLabelProps>;
+    InputGroup: React.FC<BasicProps>;
+    Select: React.FC<FormSelectProps>;
+  };
+  export interface HeaderProps extends BasicProps {
+    show?: boolean;
+    innerClassName?: string;
+    fullWidth?: boolean;
+  }
+
+  export const Header: React.FC<HeaderProps> & {
+    Left: React.FC<BasicProps>;
+    AbsoluteCenter: React.FC<BasicProps>;
+    Right: React.FC<BasicProps>;
+    Main: React.FC<BasicProps>;
+    Brand: React.FC<BasicProps>;
+  };
+
+  export interface HeaderMobileProps extends BasicProps {
+    show?: boolean;
+    showMenu?: boolean;
+    hasDropContext?: boolean;
+    onToggle?: () => void;
+  }
+  export const HeaderMobile: React.FC<HeaderMobileProps> & {
+    Main: React.FC<BasicProps>;
+    Brand: React.FC<BasicProps>;
+    AfterContext: React.FC<BasicProps>;
+    Context: React.FC<BasicProps>;
+    DropContext: React.FC<BasicProps>;
+  };
+
+  export interface IconProps {
+    name: IconType;
+    size?:
+      | 'tiny'
+      | 'extraSmall'
+      | 'small'
+      | 'medium'
+      | 'large'
+      | 'extraLarge'
+      | 'extraLargePlus'
+      | 'huge';
+
+    path?: string;
+    style?: React.CSSProperties;
+  }
+  export const Icon: React.FC<IconProps>;
+
+  export interface LoaderProps extends BasicProps {
+    size?: InputSize;
+    duration?: number;
+  }
+  export const Loader: React.FC<LoaderProps>;
+
+  export interface LogoProps extends BasicProps {
+    name?: string;
+    src?: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+  }
+  export const Logo: React.FC<LogoProps>;
+
+  export interface MediaProps extends BasicProps {
+    aspectRatio?: 'square' | 'classic' | 'wide' | 'cinema';
+    as?: React.ElementType;
+    src?: string;
+    width?: number;
+    height?: number;
+  }
+  export const Media: React.FC<MediaProps>;
+
+  export interface MessageProps extends BasicProps {
+    type?: 'form' | 'system';
+    variant?: 'information' | 'positive' | 'warning' | 'negative';
+    dismissible?: boolean;
+    show?: boolean;
+    onClose?: () => void;
+  }
+  export const Message: React.FC<MessageProps> & {
+    Content: React.FC<BasicProps>;
+    Container: React.FC<BasicProps>;
+    Title: React.FC<BasicProps>;
+  };
+
+  export interface ModalHeaderProps extends BasicProps {
+    onHide?: () => void;
+    closeButton?: boolean;
+  }
+  export interface ModalProps extends BasicProps {
+    size?: 'small' | 'medium' | 'large' | 'extraLarge';
+    relative?: boolean;
+    centered?: boolean;
+    show?: boolean;
+    onHide?: () => void;
+  }
+  export const Modal: React.FC<ModalProps> & {
+    Title: React.FC<ModalHeaderProps>;
+    Body: React.FC<BasicProps>;
+    Footer: React.FC<BasicProps>;
+    Header: React.FC<ModalHeaderProps>;
+    Inside: React.FC<BasicProps>;
+  };
+
+  export interface MultiStepsItemProps extends BasicProps {
+    isLast?: boolean;
+    isCompleted?: boolean;
+    isActive?: boolean;
+    title?: string;
+    disabled?: boolean;
+  }
+  export interface MultiStepsProps extends BasicProps {
+    current?: number;
+    currentLabel?: string;
+    onChange?: (current: number) => void;
+    direction?: 'horizontal' | 'vertical';
+    variant?:
+      | 'primary'
+      | 'accent'
+      | 'positive'
+      | 'warning'
+      | 'negative'
+      | 'white';
+  }
+  export const MultiSteps: React.FC<MultiStepsProps> & {
+    Item: React.FC<MultiStepsItemProps>;
+  };
+
+  interface OverlayBasicProps extends BasicProps {
+    children: React.ReactNode;
+    popperConfig?: PopperOptions;
+    placement?: PopperPlacement;
+    rootClose?: boolean;
+    rootCloseEvent?: 'click' | 'mousedown';
+    rootCloseDisabled?: boolean;
+  }
+  export interface OverlayTriggerProps extends OverlayBasicProps {
+    trigger: TriggerType | TriggerType[];
+    delay?: number | { show: number; hide: number };
+    hoverOverlay?: boolean;
+    defaultShow?: boolean;
+    overlay: FuncType | React.ReactNode;
+  }
+
+  export interface OverlayProps extends OverlayBasicProps {
+    show?: boolean;
+    target?: React.RefObject<HTMLElement>;
+    container?: HTMLElement;
+    flip?: boolean;
+    containerPadding?: number;
+    onHide?: () => void;
+  }
+  export const Overlay: React.FC<OverlayProps> & {
+    Trigger: React.FC<OverlayTriggerProps>;
+  };
+
+  export interface PageLayoutProps extends BasicProps {
+    headerProps?: object;
+    footerProps?: object;
+    bodyProps?: object;
+  }
+  export const PageLayout: React.FC<PageLayoutProps> & {
+    Header: React.FC<BasicProps>;
+    Footer: React.FC<BasicProps>;
+    Body: React.FC<BasicProps>;
+  };
+
+  export interface PaginationItemProps extends BasicProps {
+    active?: boolean;
+    disabled?: boolean;
+  }
+  export interface PaginationProps extends BasicProps {
+    sizeControl?: InputSize;
+  }
+  export const Pagination: React.FC<PaginationProps> & {
+    Item: React.FC<PaginationItemProps>;
+  };
+
+  export interface ProblemInfoProps extends BasicProps {
+    topicLabel?: string;
+    topicName?: string;
+    descriptionValue?: string | FuncType;
+    additionalLabel?: string;
+    additionalValue?: string | FuncType;
+    src?: string;
+    onClickImage?: () => void;
+    action?: string | FuncType;
+  }
+  export const ProblemInfo: React.FC<ProblemInfoProps>;
+
+  export interface ProgressProps extends BasicProps {
+    variant?: 'primary' | 'accent' | 'positive' | 'warning' | 'negative';
+    now?: number;
+    height?: number;
+    label?: ReactNodeLike;
+    labelClassName?: string;
+    border?: boolean;
+    striped?: boolean;
+    animated?: boolean;
+  }
+  export const Progress: React.FC<ProgressProps>;
+
+  export interface RatingProps extends BasicProps {
+    disabled?: boolean;
+    emptyIcon?: IconType;
+    readOnly?: boolean;
+    onChange?: (value: number) => void;
+    onChangeActive?: (value: number) => void;
+    getLabelText?: (value: number | string) => string;
+    value?: number | any;
+    max?: number;
+    precision?: number;
+    name?: string;
+    size?: 'tiny' | 'extraSmall' | 'small' | 'medium' | 'large';
+  }
+  export const Rating: React.FC<RatingProps>;
+
+  export interface SafeAnchorProps extends BasicProps {
+    href?: string;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
+    disabled?: boolean;
+    role?: string;
+    tabIndex?: number | string;
+  }
+  export const SafeAnchor: React.FC<SafeAnchorProps>;
+
+  export interface SearchProps extends BasicProps {
+    onClickButton?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    buttonIcon?: IconType;
+    sizeControl?: InputSize;
+    buttonText?: string;
+  }
+  export const Search: React.FC<SearchProps>;
+
+  export interface SeparatorProps extends BasicProps {
+    label?: string;
+    variant?:
+      | 'primary'
+      | 'accent'
+      | 'positive'
+      | 'light'
+      | 'negative'
+      | 'lighter'
+      | 'gray';
+
+    lineType?: 'dashed' | 'solid';
+  }
+  export const Separator: React.FC<SeparatorProps>;
+
+  export interface SessionTypeProps extends BasicProps {
+    label?: string | FuncType;
+    leftLabel?: string;
+    variant?: 'default' | 'positive' | 'accent' | 'warning';
+  }
+  export const SessionType: React.FC<SessionTypeProps>;
+
+  export interface SidebarMenuItemProps extends BasicProps {
+    eventKey?: string;
+    disabled?: boolean;
+    icon?: IconType;
+    badge?: string | FuncType;
+    size?: 'small' | 'medium';
+  }
+
+  export interface SidebarMenuSubMenuProps extends SidebarMenuItemProps {
+    title: string;
+  }
+  export interface SidebarMenuProps extends BasicProps {
+    size?: 'small' | 'medium';
+    current?: string;
+    onSelect?: (eventKey: string) => void;
+  }
+
+  export const SidebarMenu: React.FC<SidebarMenuProps> & {
+    Item: React.FC<SidebarMenuItemProps>;
+    SubMenu: React.FC<SidebarMenuSubMenuProps>;
+    Divider: React.FC<BasicProps>;
+    Header: React.FC<BasicProps>;
+  };
+
+  export interface SkeletonProps extends BasicProps {
+    variant?: 'circle' | 'text';
+    width?: number;
+    height?: number;
+    duration?: number;
+  }
+  export const Skeleton: React.FC<SkeletonProps>;
+
+  interface RCSliderBaseProps {
+    className?: string;
+    min?: number;
+    max?: number;
+    marks:
+      | ReactNodeLike
+      | {
+          number: {
+            style?: React.CSSProperties;
+            label?: ReactNodeLike;
+          };
+        };
+    step?: number;
+    vertical?: boolean;
+    handle?: ReactNodeLike;
+    included?: boolean;
+    reverse?: boolean;
+    disabled?: boolean;
+    dots?: boolean;
+    onBeforeChange?: (value: number) => void;
+    onChange?: (value: number) => void;
+    onAfterChange?: (value: number) => void;
+    minimumTrackStyle?: React.CSSProperties;
+    maximumTrackStyle?: React.CSSProperties;
+    handleStyle?: React.CSSProperties;
+    trackStyle?: React.CSSProperties;
+    railStyle?: React.CSSProperties;
+    dotStyle?: React.CSSProperties;
+    activeDotStyle?: React.CSSProperties;
+  }
+  export interface SliderHandleProps {
+    vertical?: boolean;
+    reverse?: boolean;
+    offset?: number;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    value?: number;
+    tabIndex?: number;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    ariaValueTextFormatter?: (value: number) => string;
+  }
+  export interface SliderProps extends RCSliderBaseProps {
+    variant?: 'primary' | 'accent' | 'positive' | 'warning' | 'negative';
+  }
+  export function createSliderWithTooltip({
+    tipFormatter,
+    handleStyle,
+    tipProps,
+  }: {
+    tipFormatter?: (value: number) => string;
+    handleStyle?: React.CSSProperties;
+    tipProps?: object;
+  });
+  export interface SliderProps extends RCSliderBaseProps {
+    variant?: 'primary' | 'accent' | 'positive' | 'warning' | 'negative';
+    vertical?: boolean;
+  }
+  export const Slider: React.FC<SliderProps> & {
+    Handle: React.FC<SliderHandleProps>;
+    Range: React.FC<SliderProps>;
+    createSliderWithTooltip: {
+      tipFormatter?: (value: number) => string;
+      handleStyle?: React.CSSProperties;
+      tipProps?: object;
+    };
+  };
+
+  export interface TabItemProps extends BasicProps {
+    eventKey?: string;
+    disabled?: boolean;
+  }
+  export interface TabProps extends BasicProps {
+    current?: string;
+    onSelect?: (eventKey: string) => void;
+    fullWidth?: boolean;
+    direction?: 'horizontal' | 'vertical';
+    visual?: 'default' | 'filled';
+  }
+  export const Tab: React.FC<TabProps> & {
+    Item: React.FC<TabItemProps>;
+  };
+
+  export interface TagProps extends BasicProps {
+    variant?:
+      | 'black'
+      | 'white'
+      | 'primary'
+      | 'primary_subtle'
+      | 'accent'
+      | 'accent_subtle'
+      | 'warning'
+      | 'warning_subtle'
+      | 'positive'
+      | 'positive_subtle'
+      | 'information'
+      | 'information_subtle'
+      | 'negative'
+      | 'negative_subtle';
+    textClassName?: string | string[];
+  }
+  export const Tag: React.FC<TagProps>;
+
+  export interface TagInputProps extends BasicProps {
+    variant?:
+      | 'black'
+      | 'white'
+      | 'primary'
+      | 'primary_subtle'
+      | 'warning'
+      | 'warning_subtle'
+      | 'positive'
+      | 'positive_subtle'
+      | 'negative'
+      | 'negative_subtle';
+    size?: InputSize;
+    value: string | string[];
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChangeInput?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    addKeys?: number[];
+    currentValue?: string;
+    inputValue?: string;
+    onlyUnique?: boolean;
+    validationRegex?: RegExp;
+    onValidationReject?: (value: string) => void;
+    disabled?: boolean;
+    maxTags?: number;
+    addOnBlur?: boolean;
+    addOnPaste?: boolean;
+    pasteSplit?: (value: string) => string[];
+    removeKeys?: number[];
+    focusedClassName?: string;
+    tagProps?: {
+      className?: string;
+      classNameRemove?: string;
+    };
+    inputProps: {
+      className?: string;
+      placeholder?: string;
+    };
+    tagDisplayProp?: string | string[];
+    renderTag?: (props: object) => React.ReactNode;
+    renderInput?: (props: object) => React.ReactNode;
+    renderLayout?: (
+      tagComponents: ReactNodeLike,
+      inputComponent: ReactNodeLike,
+    ) => React.ReactNode;
+    preventSubmit?: boolean;
+    focus?: () => void;
+    blur?: () => void;
+    accept?: () => void;
+    addTag?: (value: string) => void;
+    clearInput?: () => void;
+  }
+  export const TagInput: React.FC<TagInputProps>;
+
+  export interface ToastContainerProps extends BasicProps {
+    position?:
+      | 'top-right'
+      | 'top-center'
+      | 'top-left'
+      | 'bottom-right'
+      | 'bottom-center'
+      | 'bottom-left';
+    autoDismiss?: boolean | number;
+    dismissible?: boolean;
+    hideProgressBar?: boolean;
+  }
+  export const ToastContainer: React.FC<ToastContainerProps>;
+  export const toast: typeof toastBase;
+
+  export interface ToggleProps extends BasicProps {
+    checked?: boolean;
+    disabled?: boolean;
+    nonLabel?: boolean;
+    textLabelOn?: string;
+    textLabelOff?: string;
+  }
+  export const Toggle: React.FC<ToggleProps>;
+
+  export interface TooltipProps extends BasicProps {
+    id: string | number;
+    noArrow?: boolean;
+    placement?: PopperPlacement;
+    arrowProps?: {
+      style?: React.CSSProperties;
+      ref: React.Ref<HTMLDivElement>;
+    };
+    variant?: 'white' | 'black';
+    styleTooltip?: React.CSSProperties;
+  }
+  export const Tooltip: React.FC<TooltipProps>;
+
+  export interface TopBannerProps extends BasicProps {
+    bgImage?: ReactNodeLike;
+    dismissible?: boolean;
+    show?: boolean;
+    onClose?: () => void;
+  }
+  export const TopBanner: React.FC<TopBannerProps>;
+
+  export interface TopMenuItemProps extends BasicProps {
+    eventKey?: string;
+    disabled?: boolean;
+    badge?: string | FuncType;
+  }
+  export interface TopMenuSubMenuProps extends TopMenuItemProps {
+    title: string;
+  }
+  export interface TopMenuProps extends BasicProps {
+    current?: string;
+    onSelect?: (eventKey: string) => void;
+  }
+  export const TopMenu: React.FC<TopMenuProps> & {
+    Item: React.FC<TopMenuItemProps>;
+    SubMenu: React.FC<TopMenuSubMenuProps>;
+  };
+
+  interface BlockBaseProps {
+    displayName?: string;
+    Component?: React.ElementType;
+    defaultProps?: object;
+  }
+  export function createBlock(prefix: string, _?: BlockBaseProps);
+
+  interface RootCloseProps {
+    disabled?: boolean;
+    clickTrigger?: string;
+  }
+
+  export function useRootClose(
+    ref?: React.Ref<HTMLElement>,
+    onRootClose?: () => void,
+    _?: RootCloseProps,
+  );
+
+  // TODO: Add more types @namdaoduy
+  // Plugins
+  // AssetPlugin
+  // PluginArray
+}

From 2302a0237f09cb17eeaba01de536785ad4ae47f7 Mon Sep 17 00:00:00 2001
From: tinhvqbk <tinhvqbk@gmail.com>
Date: Wed, 27 Apr 2022 17:13:41 +0700
Subject: [PATCH 2/7] chore: update CHANGELOG

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 737903a..1521b99 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,9 @@
 * Composer: Allow passing `className` and `style` to `attachButtonProps`, `inputProps`, and `sendButtonProps`
 * Button: add className `u-fontMedium` to sync value with UI
 * Message, Modal, Toggle: add aria-label for accessibility
+### Added
+* Type definitions
+
 ## Release 2.0.3 - January 18, 2022
 ### Fixed
 * Code base: use absolute imports, rearrange hooks and utils

From decadedf43ef343a6b19f3799d933b0e181dcd6c Mon Sep 17 00:00:00 2001
From: tinhvqbk <tinhvqbk@gmail.com>
Date: Wed, 27 Apr 2022 17:15:34 +0700
Subject: [PATCH 3/7] type: missing ariaLabel on Toggle

---
 src/index.d.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index 6e3f1fc..271bc6d 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -5,7 +5,7 @@
 
 declare module '@ahaui/react' {
   import React from 'react';
-  import { ReactNodeLike } from 'prop-types';
+  import { any, ReactNodeLike } from 'prop-types';
   import { CalendarProps as ReactCalendarProps } from 'react-calendar';
   import { DatePickerProps as ReactDatePickerProps } from 'react-date-picker';
   import { Settings as SlickSettingsProps } from 'react-slick';
@@ -1032,6 +1032,7 @@ declare module '@ahaui/react' {
     nonLabel?: boolean;
     textLabelOn?: string;
     textLabelOff?: string;
+    ariaLabel?: string;
   }
   export const Toggle: React.FC<ToggleProps>;
 

From c4e3383bfba6e359e10e3aec7327488c9016eb3c Mon Sep 17 00:00:00 2001
From: tinhvqbk <tinhvqbk@gmail.com>
Date: Thu, 28 Apr 2022 18:22:05 +0700
Subject: [PATCH 4/7] fix: IconProps, add AssetPlugin, PluginArray, PluginsType

---
 src/index.d.ts | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index 271bc6d..9b4c344 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -596,7 +596,7 @@ declare module '@ahaui/react' {
   };
 
   export interface IconProps {
-    name: IconType;
+    name?: IconType;
     size?:
       | 'tiny'
       | 'extraSmall'
@@ -1092,8 +1092,31 @@ declare module '@ahaui/react' {
     _?: RootCloseProps,
   );
 
-  // TODO: Add more types @namdaoduy
-  // Plugins
-  // AssetPlugin
-  // PluginArray
+  declare class AssetPlugin extends Plugin {
+    constructor(param: {
+      prefix: 'avatar' | 'logo' | 'emptyState';
+      assets: Record<string, any>;
+    });
+    type: 'asset';
+    prefix: 'avatar' | 'logo' | 'emptyState';
+    assets: Record<string, any>;
+    validateAssets(assets: Record<string, any>);
+    getAsset() : undefined;
+    getAsset(assetName: string) : any;
+    getAsset(prefix: string, assetName: string) : any;
+  }
+
+  declare class PluginArray<T = Plugin> extends Array<T> {
+    traverseCall(methodName: string, ...args: any[]): any;
+  }
+
+  declare class PluginsType {
+    plugins: PluginArray;
+    validatePlugin(plugin: Plugin);
+    loadPlugin(plugin: Plugin);
+    getPlugins();
+    getPlugins(type: string);
+  }
+
+  export const Plugins: PluginsType;
 }

From 938e677ac6e1c2df23da8fca3893d49f64ba4783 Mon Sep 17 00:00:00 2001
From: tinhvqbk <tinhvqbk@gmail.com>
Date: Fri, 29 Apr 2022 14:55:32 +0700
Subject: [PATCH 5/7] typing fix: AvatarProps, BubbleChatProps,
 FormFeedbackProps, OverlayTriggerProps

---
 src/index.d.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index 9b4c344..521ef3d 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for @ahaui/react v2.0.3
+// Type definitions for @ahaui/react v2.0.4
 // Project: https://github.com/gotitinc/aha-react
 // Definitions by: KyleTV <https://github.com/tinhvqbk>
 // TypeScript Version: 3.3
@@ -227,7 +227,7 @@ declare module '@ahaui/react' {
     alt?: string;
     width?: number;
     height?: number;
-    as: React.ElementType;
+    as?: React.ElementType;
   }
 
   export const Avatar: React.FC<AvatarProps>;
@@ -268,7 +268,7 @@ declare module '@ahaui/react' {
   export interface BubbleChatImageProps extends BasicProps {}
 
   export interface BubbleChatProps extends BasicProps {
-    isTyping: boolean;
+    isTyping?: boolean;
     text?: string;
     type?: 'inbound' | 'outbound' | 'system';
     variant?:
@@ -278,14 +278,14 @@ declare module '@ahaui/react' {
       | 'dark'
       | 'transparentDark'
       | 'transparentLight';
-    avatar: string | FuncType;
+    avatar?: string | FuncType;
     time?: string | FuncType;
     options?: OptionType;
     currentOption?: string | number;
     onSelectOption?: (_: string | number) => void;
     disabledOption?: boolean;
     onClickText?: () => void;
-    textClassName: string | string[];
+    textClassName?: string | string[];
     actionBar?: React.ReactNode;
     actionBarClassName?: string | string[];
   }
@@ -505,7 +505,7 @@ declare module '@ahaui/react' {
     as?: React.ElementType;
   }
   export interface FormFeedbackProps extends BasicProps {
-    type?: 'valid' | 'invalid';
+    type: 'valid' | 'invalid';
     visible?: boolean;
     as?: React.ElementType;
   }
@@ -701,7 +701,7 @@ declare module '@ahaui/react' {
     rootCloseDisabled?: boolean;
   }
   export interface OverlayTriggerProps extends OverlayBasicProps {
-    trigger: TriggerType | TriggerType[];
+    trigger?: TriggerType | TriggerType[];
     delay?: number | { show: number; hide: number };
     hoverOverlay?: boolean;
     defaultShow?: boolean;

From 5a702c231c252e3769f2c9b2e32c8922588007fd Mon Sep 17 00:00:00 2001
From: tinhvqbk <tinhvqbk@gmail.com>
Date: Wed, 4 May 2022 18:33:29 +0700
Subject: [PATCH 6/7] type: fix from feedback

---
 src/index.d.ts | 102 ++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 76 insertions(+), 26 deletions(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index 521ef3d..ccf6f77 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -3,6 +3,8 @@
 // Definitions by: KyleTV <https://github.com/tinhvqbk>
 // TypeScript Version: 3.3
 
+import { TextareaAutosizeProps } from 'react-textarea-autosize';
+
 declare module '@ahaui/react' {
   import React from 'react';
   import { any, ReactNodeLike } from 'prop-types';
@@ -11,7 +13,7 @@ declare module '@ahaui/react' {
   import { Settings as SlickSettingsProps } from 'react-slick';
   import { PopperOptions, Placement as PopperPlacement } from 'popper.js';
   import { toast as toastBase } from 'react-toastify';
-
+  import { TransitionActions } from 'react-transition-group/Transition';
   export interface BasicProps {
     className?: string;
     style?: React.CSSProperties;
@@ -247,7 +249,7 @@ declare module '@ahaui/react' {
       | 'information_subtle'
       | 'negative'
       | 'negative_subtle';
-    textClassName: string | string[];
+    textClassName?: string;
     as?: React.ElementType;
   }
   export const Badge: React.FC<BadgeProps>;
@@ -269,7 +271,7 @@ declare module '@ahaui/react' {
 
   export interface BubbleChatProps extends BasicProps {
     isTyping?: boolean;
-    text?: string;
+    text?: string | React.ReactNode;
     type?: 'inbound' | 'outbound' | 'system';
     variant?:
       | 'light'
@@ -280,14 +282,14 @@ declare module '@ahaui/react' {
       | 'transparentLight';
     avatar?: string | FuncType;
     time?: string | FuncType;
-    options?: OptionType;
+    options?: OptionType[];
     currentOption?: string | number;
     onSelectOption?: (_: string | number) => void;
     disabledOption?: boolean;
     onClickText?: () => void;
-    textClassName?: string | string[];
+    textClassName?: string;
     actionBar?: React.ReactNode;
-    actionBarClassName?: string | string[];
+    actionBarClassName?: string;
   }
   export const BubbleChat: React.FC<BubbleChatProps> & {
     Image: React.FC<BubbleChatImageProps>;
@@ -318,7 +320,7 @@ declare module '@ahaui/react' {
     disabled?: boolean;
     nonUppercase?: boolean;
     onlyIcon?: boolean;
-    textClassName?: string | string[];
+    textClassName?: string;
     as?: React.ElementType;
   }
   export const Button: React.FC<ButtonProps> & {
@@ -334,9 +336,50 @@ declare module '@ahaui/react' {
 
   export interface DatePickerProps extends ReactDatePickerProps {
     className?: string;
+    noClearIcon?: boolean;
+    size?: Pick<IconProps, 'size'>;
+    version?: 1 | 2;
+    calendarClassName?: string | string[];
   }
   export const DatePicker: React.FC<DatePickerProps>;
 
+  export interface DateRangePickerProps {
+    className?: string | string[];
+    noClearIcon?: boolean;
+    size?: Pick<IconProps, 'size'>;
+    autoFocus?: boolean;
+    calendarAriaLabel?: string;
+    calendarClassName?: string | string[];
+    clearAriaLabel?: string;
+    closeCalendar?: boolean;
+    dayAriaLabel?: string;
+    dayPlaceholder?: string;
+    disabled?: boolean;
+    disableCalendar?: boolean;
+    format?: string;
+    isOpen?: boolean;
+    locale?: string;
+    maxDate?: Pick<CalendarProps, 'maxDate'>;
+    minDate?: Pick<CalendarProps, 'minDate'>;
+    maxDetail?: Pick<CalendarProps, 'maxDetail'>;
+    minDetail?: Pick<CalendarProps, 'minDetail'>;
+    monthAriaLabel?: string;
+    monthPlaceholder?: string;
+    name?: string;
+    nativeInputAriaLabel?: string;
+    onCalendarClose?: () => void;
+    onCalendarOpen?: () => void;
+    onChange?: Pick<CalendarProps, 'onChange'>;
+    openCalendarOnFocus?: boolean;
+    rangeDivider?: string;
+    required?: boolean;
+    showLeadingZeros?: boolean;
+    value?: Pick<CalendarProps, 'value'>;
+    yearAriaLabel?: string;
+    yearPlaceholder?: string;
+  }
+  export const DateRangePicker: React.FC<DateRangePickerProps>;
+
   export interface TimePickerProps extends BasicProps {
     noClearIcon?: boolean;
     size?: InputSize;
@@ -374,15 +417,18 @@ declare module '@ahaui/react' {
   };
 
   export interface CollapseProps extends BasicProps {
-    eventKey: string;
+    eventKey?: string;
     timeout?: number;
     dimension?: 'height' | 'width' | FuncType;
-    getDimensionValue: FuncType;
+    getDimensionValue?: (dimension: Pick<CollapseProps,'dimension'>, elem: React.ReactElement) => number;
   }
   export const Collapse: React.FC<CollapseProps>;
 
+  export interface ComposerInputProps extends TextareaAutosizeProps {
+    className?: string;
+  }
   export interface ComposerProps extends BasicProps {
-    inputProps?: object;
+    inputProps?: ComposerInputProps;
     attachButtonProps?: object;
     sendButtonProps?: object;
     sendButtonActive?: boolean;
@@ -390,7 +436,7 @@ declare module '@ahaui/react' {
     disabledAttachButton?: boolean;
     tooltipAttachButton?: string | FuncType;
     tooltipSendButton?: string | FuncType;
-    sendButtonIcon?: string | FuncType;
+    sendButtonIcon?: IconType | FuncType;
   }
   export const Composer: React.FC<ComposerProps>;
 
@@ -407,18 +453,21 @@ declare module '@ahaui/react' {
 
     label?: string | FuncType;
     number?: string | FuncType;
-    iconLeft?: string | FuncType;
+    iconLeft?: IconType | FuncType;
   }
   export const Counter: React.FC<CounterProps>;
 
   export interface DropdownButtonProps extends BasicProps {
     as?: React.ElementType;
-    caret?: boolean;
+    caret?: Pick<IconProps, 'size'>;
   }
   export interface DropdownContainerProps extends BasicProps {
     as?: React.ElementType;
     popperConfig?: PopperOptions;
     additionalStyles?: React.CSSProperties;
+    flip?: boolean;
+    shouldUsePopper?: boolean;
+    rootCloseEvent?: string;
   }
   export interface DropdownToggleProps extends BasicProps {
     disabled?: boolean;
@@ -467,12 +516,12 @@ declare module '@ahaui/react' {
     unmountOnExit?: boolean;
     appear?: boolean;
     timeout?: number;
-    onEnter?: () => void;
-    onEntering?: () => void;
-    onEntered?: () => void;
-    onExit?: () => void;
-    onExiting?: () => void;
-    onExited?: () => void;
+    onEnter?: Pick<TransitionActions, 'onEnter'>;
+    onEntering?: Pick<TransitionActions, 'onEntering'>;
+    onEntered?: Pick<TransitionActions, 'onEntered'>;
+    onExit?: Pick<TransitionActions, 'onExit'>;
+    onExiting?: Pick<TransitionActions, 'onExiting'>;
+    onExited?: Pick<TransitionActions, 'onExited'>;
   }
   export const Fade: React.FC<FadeProps>;
 
@@ -491,12 +540,13 @@ declare module '@ahaui/react' {
     closeButton?: boolean;
     actionLeft?: FuncType;
     actionRight?: FuncType;
+    fileName?: string;
   }
   export const FileAttachment: React.FC<FileAttachmentProps>;
 
   export interface FormCheckProps extends BasicProps {
     type?: 'checkbox' | 'radio' | 'checkbox_button';
-    id: string;
+    id?: string;
     label?: string | FuncType;
     inline?: boolean;
     isValid?: boolean;
@@ -510,7 +560,7 @@ declare module '@ahaui/react' {
     as?: React.ElementType;
   }
   export interface FormFileProps extends BasicProps {
-    id: string;
+    id?: string;
     as?: React.ElementType;
     sizeInput?: InputSize;
     fileName?: string;
@@ -530,7 +580,7 @@ declare module '@ahaui/react' {
   export interface FormInputProps extends BasicProps {
     type?: string;
     value?: string | number;
-    id: string;
+    id?: string;
     disabled?: boolean;
     required?: boolean;
     readOnly?: boolean;
@@ -544,11 +594,11 @@ declare module '@ahaui/react' {
   export interface FormLabelProps extends BasicProps {
     sizeLabel?: InputSize;
     required?: boolean;
-    htmlFor: string;
+    htmlFor?: string;
   }
   export interface FormSelectProps extends BasicProps {
     value?: string | number;
-    id: string;
+    id?: string;
     disabled?: boolean;
     required?: boolean;
     sizeInput?: InputSize;
@@ -697,7 +747,7 @@ declare module '@ahaui/react' {
     popperConfig?: PopperOptions;
     placement?: PopperPlacement;
     rootClose?: boolean;
-    rootCloseEvent?: 'click' | 'mousedown';
+    rootCloseEvent?: string;
     rootCloseDisabled?: boolean;
   }
   export interface OverlayTriggerProps extends OverlayBasicProps {
@@ -954,7 +1004,7 @@ declare module '@ahaui/react' {
       | 'information_subtle'
       | 'negative'
       | 'negative_subtle';
-    textClassName?: string | string[];
+    textClassName?: string;
   }
   export const Tag: React.FC<TagProps>;
 

From e3ae37ffe66f40ddb9a452f83d9add06b8656568 Mon Sep 17 00:00:00 2001
From: tinhvqbk <tinhvqbk@gmail.com>
Date: Wed, 4 May 2022 22:21:07 +0700
Subject: [PATCH 7/7] type: extend BasicWithAsProps

---
 src/index.d.ts | 82 ++++++++++++++++++++++----------------------------
 1 file changed, 36 insertions(+), 46 deletions(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index ccf6f77..04ee04e 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -19,6 +19,9 @@ declare module '@ahaui/react' {
     style?: React.CSSProperties;
     children?: React.ReactNode;
   }
+  export interface BasicWithAsProps extends BasicProps {
+    as?: React.ElementType;
+  }
   export type TriggerType = 'click' | 'hover' | 'focus';
   export type InputSize = 'small' | 'medium' | 'large';
   export type IconType =
@@ -214,7 +217,7 @@ declare module '@ahaui/react' {
     Note: React.FC<BasicProps>;
   };
 
-  export interface AvatarProps extends BasicProps {
+  export interface AvatarProps extends BasicWithAsProps {
     name: string;
     size:
       | 'extraSmall'
@@ -229,12 +232,11 @@ declare module '@ahaui/react' {
     alt?: string;
     width?: number;
     height?: number;
-    as?: React.ElementType;
   }
 
   export const Avatar: React.FC<AvatarProps>;
 
-  export interface BadgeProps extends BasicProps {
+  export interface BadgeProps extends BasicWithAsProps {
     variant?:
       | 'default'
       | 'white'
@@ -250,7 +252,6 @@ declare module '@ahaui/react' {
       | 'negative'
       | 'negative_subtle';
     textClassName?: string;
-    as?: React.ElementType;
   }
   export const Badge: React.FC<BadgeProps>;
   export interface BreadcrumbItemProps extends BasicProps {
@@ -295,13 +296,12 @@ declare module '@ahaui/react' {
     Image: React.FC<BubbleChatImageProps>;
   };
 
-  export interface ButtonGroupProps extends BasicProps {
+  export interface ButtonGroupProps extends BasicWithAsProps {
     sizeControl?: InputSize;
     disabledControl?: boolean;
-    as?: React.ElementType;
   }
   export const ButtonGroup: React.FC<ButtonGroupProps>;
-  export interface ButtonProps extends BasicProps {
+  export interface ButtonProps extends BasicWithAsProps {
     variant?:
       | 'primary'
       | 'primary_outline'
@@ -321,7 +321,6 @@ declare module '@ahaui/react' {
     nonUppercase?: boolean;
     onlyIcon?: boolean;
     textClassName?: string;
-    as?: React.ElementType;
   }
   export const Button: React.FC<ButtonProps> & {
     Icon: React.FC<BasicProps>;
@@ -386,14 +385,14 @@ declare module '@ahaui/react' {
   }
   export const TimePicker: React.FC<TimePickerProps>;
 
-  export interface CardProps extends BasicProps {
+  export interface CardProps extends BasicWithAsProps {
     body?: boolean;
     size?: InputSize;
   }
   export const Card: React.FC<CardProps> & {
-    Header: React.FC<BasicProps>;
-    Title: React.FC<BasicProps>;
-    Body: React.FC<BasicProps>;
+    Header: React.FC<BasicWithAsProps>;
+    Title: React.FC<BasicWithAsProps>;
+    Body: React.FC<BasicWithAsProps>;
   };
 
   export interface CarouselProps extends BasicProps {
@@ -401,7 +400,7 @@ declare module '@ahaui/react' {
     settings?: SlickSettingsProps;
   }
   export const Carousel: React.FC<CarouselProps> & {
-    Item: React.FC<BasicProps>;
+    Item: React.FC<BasicWithAsProps>;
   };
 
   export interface ChatBoxListProps extends BasicProps {
@@ -457,12 +456,10 @@ declare module '@ahaui/react' {
   }
   export const Counter: React.FC<CounterProps>;
 
-  export interface DropdownButtonProps extends BasicProps {
-    as?: React.ElementType;
+  export interface DropdownButtonProps extends BasicWithAsProps {
     caret?: Pick<IconProps, 'size'>;
   }
-  export interface DropdownContainerProps extends BasicProps {
-    as?: React.ElementType;
+  export interface DropdownContainerProps extends BasicWithAsProps {
     popperConfig?: PopperOptions;
     additionalStyles?: React.CSSProperties;
     flip?: boolean;
@@ -472,8 +469,7 @@ declare module '@ahaui/react' {
   export interface DropdownToggleProps extends BasicProps {
     disabled?: boolean;
   }
-  export interface DropdownProps extends BasicProps {
-    as?: React.ElementType;
+  export interface DropdownProps extends BasicWithAsProps {
     drop?: 'up' | 'down' | 'left' | 'right';
     flip?: boolean;
     show?: boolean;
@@ -506,8 +502,8 @@ declare module '@ahaui/react' {
     height?: number;
   }
   export const EmptyState: React.FC<EmptyStateProps> & {
-    Heading: React.FC<BasicProps>;
-    Description: React.FC<BasicProps>;
+    Heading: React.FC<BasicWithAsProps>;
+    Description: React.FC<BasicWithAsProps>;
   };
 
   export interface FadeProps extends BasicProps {
@@ -544,7 +540,7 @@ declare module '@ahaui/react' {
   }
   export const FileAttachment: React.FC<FileAttachmentProps>;
 
-  export interface FormCheckProps extends BasicProps {
+  export interface FormCheckProps extends BasicWithAsProps {
     type?: 'checkbox' | 'radio' | 'checkbox_button';
     id?: string;
     label?: string | FuncType;
@@ -552,16 +548,13 @@ declare module '@ahaui/react' {
     isValid?: boolean;
     isInvalid?: boolean;
     sizeInput: InputSize;
-    as?: React.ElementType;
   }
-  export interface FormFeedbackProps extends BasicProps {
+  export interface FormFeedbackProps extends BasicWithAsProps {
     type: 'valid' | 'invalid';
     visible?: boolean;
-    as?: React.ElementType;
   }
-  export interface FormFileProps extends BasicProps {
+  export interface FormFileProps extends BasicWithAsProps {
     id?: string;
-    as?: React.ElementType;
     sizeInput?: InputSize;
     fileName?: string;
     browseText?: string;
@@ -571,13 +564,12 @@ declare module '@ahaui/react' {
     isBackgroundReset?: boolean;
     placeholder?: string;
   }
-  export interface FormGroupProps extends BasicProps {
-    as?: React.ElementType;
+  export interface FormGroupProps extends BasicWithAsProps {
     controlId?: string;
     sizeControl?: InputSize;
     requiredControl?: boolean;
   }
-  export interface FormInputProps extends BasicProps {
+  export interface FormInputProps extends BasicWithAsProps {
     type?: string;
     value?: string | number;
     id?: string;
@@ -589,7 +581,6 @@ declare module '@ahaui/react' {
     isInvalid?: boolean;
     isBorderNone?: boolean;
     isBackgroundReset?: boolean;
-    as?: React.ElementType;
   }
   export interface FormLabelProps extends BasicProps {
     sizeLabel?: InputSize;
@@ -617,18 +608,18 @@ declare module '@ahaui/react' {
     InputGroup: React.FC<BasicProps>;
     Select: React.FC<FormSelectProps>;
   };
-  export interface HeaderProps extends BasicProps {
+  export interface HeaderProps extends BasicWithAsProps {
     show?: boolean;
     innerClassName?: string;
     fullWidth?: boolean;
   }
 
   export const Header: React.FC<HeaderProps> & {
-    Left: React.FC<BasicProps>;
-    AbsoluteCenter: React.FC<BasicProps>;
-    Right: React.FC<BasicProps>;
-    Main: React.FC<BasicProps>;
-    Brand: React.FC<BasicProps>;
+    Left: React.FC<BasicWithAsProps>;
+    AbsoluteCenter: React.FC<BasicWithAsProps>;
+    Right: React.FC<BasicWithAsProps>;
+    Main: React.FC<BasicWithAsProps>;
+    Brand: React.FC<BasicWithAsProps>;
   };
 
   export interface HeaderMobileProps extends BasicProps {
@@ -677,9 +668,8 @@ declare module '@ahaui/react' {
   }
   export const Logo: React.FC<LogoProps>;
 
-  export interface MediaProps extends BasicProps {
+  export interface MediaProps extends BasicWithAsProps {
     aspectRatio?: 'square' | 'classic' | 'wide' | 'cinema';
-    as?: React.ElementType;
     src?: string;
     width?: number;
     height?: number;
@@ -694,9 +684,9 @@ declare module '@ahaui/react' {
     onClose?: () => void;
   }
   export const Message: React.FC<MessageProps> & {
-    Content: React.FC<BasicProps>;
-    Container: React.FC<BasicProps>;
-    Title: React.FC<BasicProps>;
+    Content: React.FC<BasicWithAsProps>;
+    Container: React.FC<BasicWithAsProps>;
+    Title: React.FC<BasicWithAsProps>;
   };
 
   export interface ModalHeaderProps extends BasicProps {
@@ -770,15 +760,15 @@ declare module '@ahaui/react' {
     Trigger: React.FC<OverlayTriggerProps>;
   };
 
-  export interface PageLayoutProps extends BasicProps {
+  export interface PageLayoutProps extends BasicWithAsProps {
     headerProps?: object;
     footerProps?: object;
     bodyProps?: object;
   }
   export const PageLayout: React.FC<PageLayoutProps> & {
-    Header: React.FC<BasicProps>;
-    Footer: React.FC<BasicProps>;
-    Body: React.FC<BasicProps>;
+    Header: React.FC<BasicWithAsProps>;
+    Footer: React.FC<BasicWithAsProps>;
+    Body: React.FC<BasicWithAsProps>;
   };
 
   export interface PaginationItemProps extends BasicProps {