ingred-ui 7.34.1 → 9.0.2

package/dist/components/Badge/Badge.d.ts

@@ -8,5 +8,5 @@ export declare type BadgeProps = React.ComponentPropsWithoutRef<"a" | "span"> &
     fontWeight?: string;
     component?: "span" | "a";
 };
-declare const Badge: React.FunctionComponent<BadgeProps>;
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>>;
 export default Badge;

package/dist/components/Button/Button.d.ts

@@ -38,5 +38,24 @@ export declare type ButtonProps = Omit<BaseButtonProps, "color"> & {
      */
     href?: string;
 };
-declare const Button: React.FunctionComponent<ButtonProps>;
+declare const Button: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, "color"> & {
+    /**
+     * The component used for the root node.
+     * Default: `<button />`
+     */
+    component?: keyof JSX.IntrinsicElements | React.ComponentType<{
+        className: string;
+    }> | undefined;
+    color?: ButtonColor | undefined;
+    /**
+     * Control whether "inline" or "block" Element.
+     */
+    inline?: boolean | undefined;
+    size?: ButtonSize | undefined;
+    onClick?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
+    /**
+     * If added this props, root node becomes `<a />`.
+     */
+    href?: string | undefined;
+} & React.RefAttributes<HTMLElement>>;
 export default Button;

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -1,9 +1,12 @@
 import * as React from "react";
 import { ButtonSize } from "../Button/Button";
 declare type GroupButtonSize = Exclude<ButtonSize, "large">;
-export declare type ButtonGroupProps = {
+export declare type ButtonGroupProps = React.ComponentPropsWithoutRef<"div"> & {
     size?: GroupButtonSize;
     disabled?: boolean;
 };
-declare const ButtonGroup: React.FunctionComponent<ButtonGroupProps>;
+declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    size?: GroupButtonSize | undefined;
+    disabled?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export default ButtonGroup;

package/dist/components/ButtonGroup/ButtonGroup.stories.d.ts

@@ -3,9 +3,21 @@ import { Story } from "@storybook/react/types-6-0";
 import { ButtonGroupProps } from "./ButtonGroup";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<ButtonGroupProps>;
+    component: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+        size?: ("small" | "medium") | undefined;
+        disabled?: boolean | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
     subcomponents: {
-        Button: React.FunctionComponent<import("..").ButtonProps>;
+        Button: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, "color"> & {
+            component?: keyof JSX.IntrinsicElements | React.ComponentType<{
+                className: string;
+            }> | undefined;
+            color?: import("../Button/Button").ButtonColor | undefined;
+            inline?: boolean | undefined;
+            size?: import("../Button/Button").ButtonSize | undefined;
+            onClick?: ((event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
+            href?: string | undefined;
+        } & React.RefAttributes<HTMLElement>>;
     };
 };
 export default _default;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -4,5 +4,9 @@ export declare type CheckBoxProps = React.ComponentPropsWithoutRef<"input"> & {
     error?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
 };
-declare const Checkbox: React.FunctionComponent<CheckBoxProps>;
+declare const Checkbox: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    indeterminate?: boolean | undefined;
+    error?: boolean | undefined;
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+} & React.RefAttributes<HTMLLabelElement>>;
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -3,7 +3,11 @@ import { Story } from "@storybook/react/types-6-0";
 import { CheckBoxProps } from "./Checkbox";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<CheckBoxProps>;
+    component: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+        indeterminate?: boolean | undefined;
+        error?: boolean | undefined;
+        inputRef?: React.Ref<HTMLInputElement> | undefined;
+    } & React.RefAttributes<HTMLLabelElement>>;
     argTypes: {
         onChange: {
             action: string;

package/dist/components/ConfirmModal/ConfirmModal.d.ts

@@ -53,5 +53,5 @@ export declare type ConfirmModalProps = {
     fadeProps?: CSSTransitionProps;
     children?: React.ReactNode;
 };
-declare const ConfirmModal: React.FunctionComponent<ConfirmModalProps>;
+declare const ConfirmModal: React.ForwardRefExoticComponent<ConfirmModalProps & React.RefAttributes<HTMLDivElement>>;
 export default ConfirmModal;

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -22,5 +22,5 @@ export declare type ContextMenuProps = {
      */
     menuProps?: Partial<MenuProps>;
 };
-declare const ContextMenu: React.FunctionComponent<ContextMenuProps>;
+declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLButtonElement>>;
 export default ContextMenu;

package/dist/components/CreatableSelect/CreatableSelect.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { Props as ReactCreatableSelectProps } from "react-select/creatable";
+import { CreatableProps } from "react-select/creatable";
+import { GroupBase } from "react-select/dist/declarations/src/types";
 import { OptionType } from "../Select";
 export declare type CreatableSelectProps<T> = {
     limit?: number;
@@ -8,6 +9,96 @@ export declare type CreatableSelectProps<T> = {
     error?: boolean;
     emptyMessage?: string;
     addMessage?: string;
-} & ReactCreatableSelectProps<OptionType<T>, boolean>;
-declare const CreatableSelect: <T>(inProps: CreatableSelectProps<T>) => React.ReactElement<CreatableSelectProps<T>, string | React.JSXElementConstructor<any>>;
-export default CreatableSelect;
+} & CreatableProps<OptionType<T>, boolean, GroupBase<OptionType<T>>>;
+declare const CreatableSelect: <T>(inProps: CreatableSelectProps<T>, ref: React.Ref<HTMLDivElement>) => React.ReactElement<CreatableSelectProps<T>, string | React.JSXElementConstructor<any>>;
+declare const _default: <T>(props: {
+    limit?: number | undefined;
+    minWidth?: string | undefined;
+    placeholder?: string | undefined;
+    error?: boolean | undefined;
+    emptyMessage?: string | undefined;
+    addMessage?: string | undefined;
+} & Omit<Pick<import("react-select/dist/declarations/src/Select").Props<OptionType<T>, boolean, GroupBase<OptionType<T>>>, "form" | "theme" | "name" | "autoFocus" | "value" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<OptionType<T>, boolean, GroupBase<OptionType<T>>>, "placeholder" | "tabIndex" | "aria-live" | "styles" | "options" | "menuIsOpen" | "isDisabled" | "isMulti" | "isRtl" | "loadingMessage" | "noOptionsMessage" | "backspaceRemovesValue" | "blurInputOnSelect" | "captureMenuScroll" | "closeMenuOnSelect" | "closeMenuOnScroll" | "components" | "controlShouldRenderValue" | "escapeClearsValue" | "filterOption" | "formatGroupLabel" | "getOptionLabel" | "getOptionValue" | "isLoading" | "isOptionDisabled" | "isSearchable" | "minMenuHeight" | "maxMenuHeight" | "menuPlacement" | "menuPosition" | "menuShouldBlockScroll" | "menuShouldScrollIntoView" | "openMenuOnFocus" | "openMenuOnClick" | "pageSize" | "screenReaderStatus" | "tabSelectsValue">> & Partial<Pick<{
+    'aria-live': string;
+    backspaceRemovesValue: boolean;
+    blurInputOnSelect: boolean;
+    captureMenuScroll: boolean;
+    closeMenuOnSelect: boolean;
+    closeMenuOnScroll: boolean;
+    components: {};
+    controlShouldRenderValue: boolean;
+    escapeClearsValue: boolean;
+    filterOption: (option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, rawInput: string) => boolean;
+    formatGroupLabel: <Option_1, Group_1 extends GroupBase<Option_1>>(group: Group_1) => string;
+    getOptionLabel: <Option_2>(option: Option_2) => string;
+    getOptionValue: <Option_3>(option: Option_3) => string;
+    isDisabled: boolean;
+    isLoading: boolean;
+    isMulti: boolean;
+    isRtl: boolean;
+    isSearchable: boolean;
+    isOptionDisabled: <Option_4>(option: Option_4) => boolean;
+    loadingMessage: () => string;
+    maxMenuHeight: number;
+    minMenuHeight: number;
+    menuIsOpen: boolean;
+    menuPlacement: string;
+    menuPosition: string;
+    menuShouldBlockScroll: boolean;
+    menuShouldScrollIntoView: boolean;
+    noOptionsMessage: () => string;
+    openMenuOnFocus: boolean;
+    openMenuOnClick: boolean;
+    options: never[];
+    pageSize: number;
+    placeholder: string;
+    screenReaderStatus: ({ count }: {
+        count: number;
+    }) => string;
+    styles: {};
+    tabIndex: number;
+    tabSelectsValue: boolean;
+}, never>>, "value" | "onChange" | "menuIsOpen" | "inputValue" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<OptionType<T>, boolean, GroupBase<OptionType<T>>>, "form" | "theme" | "name" | "autoFocus" | "value" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<OptionType<T>, boolean, GroupBase<OptionType<T>>>, "placeholder" | "tabIndex" | "aria-live" | "styles" | "options" | "menuIsOpen" | "isDisabled" | "isMulti" | "isRtl" | "loadingMessage" | "noOptionsMessage" | "backspaceRemovesValue" | "blurInputOnSelect" | "captureMenuScroll" | "closeMenuOnSelect" | "closeMenuOnScroll" | "components" | "controlShouldRenderValue" | "escapeClearsValue" | "filterOption" | "formatGroupLabel" | "getOptionLabel" | "getOptionValue" | "isLoading" | "isOptionDisabled" | "isSearchable" | "minMenuHeight" | "maxMenuHeight" | "menuPlacement" | "menuPosition" | "menuShouldBlockScroll" | "menuShouldScrollIntoView" | "openMenuOnFocus" | "openMenuOnClick" | "pageSize" | "screenReaderStatus" | "tabSelectsValue">> & Partial<Pick<{
+    'aria-live': string;
+    backspaceRemovesValue: boolean;
+    blurInputOnSelect: boolean;
+    captureMenuScroll: boolean;
+    closeMenuOnSelect: boolean;
+    closeMenuOnScroll: boolean;
+    components: {};
+    controlShouldRenderValue: boolean;
+    escapeClearsValue: boolean;
+    filterOption: (option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, rawInput: string) => boolean;
+    formatGroupLabel: <Option_1, Group_1 extends GroupBase<Option_1>>(group: Group_1) => string;
+    getOptionLabel: <Option_2>(option: Option_2) => string;
+    getOptionValue: <Option_3>(option: Option_3) => string;
+    isDisabled: boolean;
+    isLoading: boolean;
+    isMulti: boolean;
+    isRtl: boolean;
+    isSearchable: boolean;
+    isOptionDisabled: <Option_4>(option: Option_4) => boolean;
+    loadingMessage: () => string;
+    maxMenuHeight: number;
+    minMenuHeight: number;
+    menuIsOpen: boolean;
+    menuPlacement: string;
+    menuPosition: string;
+    menuShouldBlockScroll: boolean;
+    menuShouldScrollIntoView: boolean;
+    noOptionsMessage: () => string;
+    openMenuOnFocus: boolean;
+    openMenuOnClick: boolean;
+    options: never[];
+    pageSize: number;
+    placeholder: string;
+    screenReaderStatus: ({ count }: {
+        count: number;
+    }) => string;
+    styles: {};
+    tabIndex: number;
+    tabSelectsValue: boolean;
+}, never>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<OptionType<T>> & import("react-select/dist/declarations/src/useCreatable").CreatableAdditionalProps<OptionType<T>, GroupBase<OptionType<T>>> & {
+    ref?: React.ForwardedRef<HTMLDivElement> | undefined;
+}) => ReturnType<typeof CreatableSelect>;
+export default _default;

package/dist/components/CreatableSelect/CreatableSelect.stories.d.ts

@@ -1,7 +1,96 @@
 import * as React from "react";
 declare const _default: {
     title: string;
-    component: <T>(inProps: import("./CreatableSelect").CreatableSelectProps<T>) => React.ReactElement<import("./CreatableSelect").CreatableSelectProps<T>, string | React.JSXElementConstructor<any>>;
+    component: <T>(props: {
+        limit?: number | undefined;
+        minWidth?: string | undefined;
+        placeholder?: string | undefined;
+        error?: boolean | undefined;
+        emptyMessage?: string | undefined;
+        addMessage?: string | undefined;
+    } & Omit<Pick<import("react-select/dist/declarations/src/Select").Props<import("..").OptionType<T>, boolean, import("react-select").GroupBase<import("..").OptionType<T>>>, "form" | "theme" | "name" | "autoFocus" | "value" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<import("..").OptionType<T>, boolean, import("react-select").GroupBase<import("..").OptionType<T>>>, "placeholder" | "tabIndex" | "aria-live" | "styles" | "options" | "menuIsOpen" | "isDisabled" | "isMulti" | "isRtl" | "loadingMessage" | "noOptionsMessage" | "backspaceRemovesValue" | "blurInputOnSelect" | "captureMenuScroll" | "closeMenuOnSelect" | "closeMenuOnScroll" | "components" | "controlShouldRenderValue" | "escapeClearsValue" | "filterOption" | "formatGroupLabel" | "getOptionLabel" | "getOptionValue" | "isLoading" | "isOptionDisabled" | "isSearchable" | "minMenuHeight" | "maxMenuHeight" | "menuPlacement" | "menuPosition" | "menuShouldBlockScroll" | "menuShouldScrollIntoView" | "openMenuOnFocus" | "openMenuOnClick" | "pageSize" | "screenReaderStatus" | "tabSelectsValue">> & Partial<Pick<{
+        'aria-live': string;
+        backspaceRemovesValue: boolean;
+        blurInputOnSelect: boolean;
+        captureMenuScroll: boolean;
+        closeMenuOnSelect: boolean;
+        closeMenuOnScroll: boolean;
+        components: {};
+        controlShouldRenderValue: boolean;
+        escapeClearsValue: boolean;
+        filterOption: (option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, rawInput: string) => boolean;
+        formatGroupLabel: <Option_1, Group_1 extends import("react-select").GroupBase<Option_1>>(group: Group_1) => string;
+        getOptionLabel: <Option_2>(option: Option_2) => string;
+        getOptionValue: <Option_3>(option: Option_3) => string;
+        isDisabled: boolean;
+        isLoading: boolean;
+        isMulti: boolean;
+        isRtl: boolean;
+        isSearchable: boolean;
+        isOptionDisabled: <Option_4>(option: Option_4) => boolean;
+        loadingMessage: () => string;
+        maxMenuHeight: number;
+        minMenuHeight: number;
+        menuIsOpen: boolean;
+        menuPlacement: string;
+        menuPosition: string;
+        menuShouldBlockScroll: boolean;
+        menuShouldScrollIntoView: boolean;
+        noOptionsMessage: () => string;
+        openMenuOnFocus: boolean;
+        openMenuOnClick: boolean;
+        options: never[];
+        pageSize: number;
+        placeholder: string;
+        screenReaderStatus: ({ count }: {
+            count: number;
+        }) => string;
+        styles: {};
+        tabIndex: number;
+        tabSelectsValue: boolean;
+    }, never>>, "value" | "onChange" | "menuIsOpen" | "inputValue" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<import("..").OptionType<T>, boolean, import("react-select").GroupBase<import("..").OptionType<T>>>, "form" | "theme" | "name" | "autoFocus" | "value" | "className" | "id" | "aria-errormessage" | "aria-invalid" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & Partial<Pick<import("react-select/dist/declarations/src/Select").Props<import("..").OptionType<T>, boolean, import("react-select").GroupBase<import("..").OptionType<T>>>, "placeholder" | "tabIndex" | "aria-live" | "styles" | "options" | "menuIsOpen" | "isDisabled" | "isMulti" | "isRtl" | "loadingMessage" | "noOptionsMessage" | "backspaceRemovesValue" | "blurInputOnSelect" | "captureMenuScroll" | "closeMenuOnSelect" | "closeMenuOnScroll" | "components" | "controlShouldRenderValue" | "escapeClearsValue" | "filterOption" | "formatGroupLabel" | "getOptionLabel" | "getOptionValue" | "isLoading" | "isOptionDisabled" | "isSearchable" | "minMenuHeight" | "maxMenuHeight" | "menuPlacement" | "menuPosition" | "menuShouldBlockScroll" | "menuShouldScrollIntoView" | "openMenuOnFocus" | "openMenuOnClick" | "pageSize" | "screenReaderStatus" | "tabSelectsValue">> & Partial<Pick<{
+        'aria-live': string;
+        backspaceRemovesValue: boolean;
+        blurInputOnSelect: boolean;
+        captureMenuScroll: boolean;
+        closeMenuOnSelect: boolean;
+        closeMenuOnScroll: boolean;
+        components: {};
+        controlShouldRenderValue: boolean;
+        escapeClearsValue: boolean;
+        filterOption: (option: import("react-select/dist/declarations/src/filters").FilterOptionOption<unknown>, rawInput: string) => boolean;
+        formatGroupLabel: <Option_1, Group_1 extends import("react-select").GroupBase<Option_1>>(group: Group_1) => string;
+        getOptionLabel: <Option_2>(option: Option_2) => string;
+        getOptionValue: <Option_3>(option: Option_3) => string;
+        isDisabled: boolean;
+        isLoading: boolean;
+        isMulti: boolean;
+        isRtl: boolean;
+        isSearchable: boolean;
+        isOptionDisabled: <Option_4>(option: Option_4) => boolean;
+        loadingMessage: () => string;
+        maxMenuHeight: number;
+        minMenuHeight: number;
+        menuIsOpen: boolean;
+        menuPlacement: string;
+        menuPosition: string;
+        menuShouldBlockScroll: boolean;
+        menuShouldScrollIntoView: boolean;
+        noOptionsMessage: () => string;
+        openMenuOnFocus: boolean;
+        openMenuOnClick: boolean;
+        options: never[];
+        pageSize: number;
+        placeholder: string;
+        screenReaderStatus: ({ count }: {
+            count: number;
+        }) => string;
+        styles: {};
+        tabIndex: number;
+        tabSelectsValue: boolean;
+    }, never>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<import("..").OptionType<T>> & import("react-select/dist/declarations/src/useCreatable").CreatableAdditionalProps<import("..").OptionType<T>, import("react-select").GroupBase<import("..").OptionType<T>>> & {
+        ref?: React.ForwardedRef<HTMLDivElement> | undefined;
+    }) => React.ReactElement<import("./CreatableSelect").CreatableSelectProps<unknown>, string | React.JSXElementConstructor<any>>;
     source: {
         type: string;
     };

package/dist/components/DataTable/DataTable.d.ts

@@ -101,5 +101,8 @@ export declare type DataTableProps<T> = {
     labelRowsPerPage?: string;
     labelDisplayedRows?: LabelDisplayRows;
 };
-declare const DataTable: <T extends DataTableBaseData>({ data: sourceData, columns, enablePagination, onSelectRowsChange, onRadioChange, clearSelectedRows, tabs, itemEmptyProps, per, defaultSortField, defaultSortOrder, defaultSelectedRows, defaultSelectedRow, enableRuledLine, verticalSpacing, fullWidth, disableCheckWhenClickRow, tableMaxHeight, horizontalScrollable, labelRowsPerPage, labelDisplayedRows, }: DataTableProps<T>) => JSX.Element;
-export default DataTable;
+declare const DataTable: <T extends DataTableBaseData>({ data: sourceData, columns, enablePagination, onSelectRowsChange, onRadioChange, clearSelectedRows, tabs, itemEmptyProps, per, defaultSortField, defaultSortOrder, defaultSelectedRows, defaultSelectedRow, enableRuledLine, verticalSpacing, fullWidth, disableCheckWhenClickRow, tableMaxHeight, horizontalScrollable, labelRowsPerPage, labelDisplayedRows, }: DataTableProps<T>, ref?: React.ForwardedRef<HTMLDivElement> | undefined) => JSX.Element;
+declare const _default: <T>(props: DataTableProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement> | undefined;
+}) => ReturnType<typeof DataTable>;
+export default _default;

package/dist/components/DataTable/DataTable.stories.d.ts

@@ -1,8 +1,11 @@
+import React from "react";
 import { DataTableProps } from "./DataTable";
 import { Story } from "@storybook/react/types-6-0";
 declare const _default: {
     title: string;
-    component: <T extends import("./DataTable").DataTableBaseData>({ data: sourceData, columns, enablePagination, onSelectRowsChange, onRadioChange, clearSelectedRows, tabs, itemEmptyProps, per, defaultSortField, defaultSortOrder, defaultSelectedRows, defaultSelectedRow, enableRuledLine, verticalSpacing, fullWidth, disableCheckWhenClickRow, tableMaxHeight, horizontalScrollable, labelRowsPerPage, labelDisplayedRows, }: DataTableProps<T>) => JSX.Element;
+    component: <T>(props: DataTableProps<T> & {
+        ref?: React.ForwardedRef<HTMLDivElement> | undefined;
+    }) => JSX.Element;
     parameters: {
         docs: {
             source: {

package/dist/components/DatePicker/DatePicker.d.ts

@@ -7,5 +7,5 @@ export declare type DatePickerProps = Partial<Omit<SingleDatePickerShape, "date"
     onDateChange: (date: moment.Moment | null) => void;
     error?: boolean;
 };
-declare const DatePicker: React.FunctionComponent<DatePickerProps>;
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -11,5 +11,5 @@ export declare type DateRangePickerProps = Partial<DateRangePickerShape> & {
     }) => void;
     error?: boolean;
 };
-declare const DateRangePicker: React.FunctionComponent<DateRangePickerProps>;
+declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
 export default DateRangePicker;

package/dist/components/Divider/Divider.d.ts

@@ -4,5 +4,8 @@ export declare type DividerProps = SpacerProps & {
     color?: string;
     orientation?: "vertical" | "horizontal";
 };
-declare const Divider: React.FunctionComponent<DividerProps>;
+declare const Divider: React.ForwardRefExoticComponent<SpacerProps & {
+    color?: string | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+} & React.RefAttributes<HTMLHRElement>>;
 export default Divider;

package/dist/components/DropdownButton/DropdownButton.d.ts

@@ -20,6 +20,7 @@ export declare type DropdownButtonProps = {
     positionPriority?: PopperJS.Placement[];
     menuMaxHeight?: MenuProps["maxHeight"];
     menuProps?: Partial<MenuProps>;
+    children?: React.ReactNode;
 };
-declare const DropdownButton: React.FC<DropdownButtonProps>;
+declare const DropdownButton: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLDivElement>>;
 export default DropdownButton;

package/dist/components/DropdownButton/DropdownButton.stories.d.ts

@@ -3,7 +3,7 @@ import { DropdownButtonProps } from "./";
 import { Story } from "@storybook/react/types-6-0";
 declare const _default: {
     title: string;
-    component: React.FC<DropdownButtonProps>;
+    component: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 export declare const Example: Story<DropdownButtonProps>;

package/dist/components/DropdownButton/styled.d.ts

@@ -1,5 +1,32 @@
 /// <reference types="react" />
 export declare const ButtonContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const MainButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const SplitToggle: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const SingleButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const MainButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "color"> & {
+    component?: keyof JSX.IntrinsicElements | import("react").ComponentType<{
+        className: string;
+    }> | undefined;
+    color?: import("../Button/Button").ButtonColor | undefined;
+    inline?: boolean | undefined;
+    size?: import("../Button/Button").ButtonSize | undefined;
+    onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+    href?: string | undefined;
+} & import("react").RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const SplitToggle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "color"> & {
+    component?: keyof JSX.IntrinsicElements | import("react").ComponentType<{
+        className: string;
+    }> | undefined;
+    color?: import("../Button/Button").ButtonColor | undefined;
+    inline?: boolean | undefined;
+    size?: import("../Button/Button").ButtonSize | undefined;
+    onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+    href?: string | undefined;
+} & import("react").RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const SingleButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "color"> & {
+    component?: keyof JSX.IntrinsicElements | import("react").ComponentType<{
+        className: string;
+    }> | undefined;
+    color?: import("../Button/Button").ButtonColor | undefined;
+    inline?: boolean | undefined;
+    size?: import("../Button/Button").ButtonSize | undefined;
+    onClick?: ((event: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+    href?: string | undefined;
+} & import("react").RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;

package/dist/components/ErrorText/ErrorText.d.ts

@@ -2,5 +2,5 @@ import * as React from "react";
 export declare type ErrorTextProps = {
     children: string;
 };
-declare const ErrorText: React.FunctionComponent<ErrorTextProps>;
+declare const ErrorText: React.ForwardRefExoticComponent<ErrorTextProps & React.RefAttributes<HTMLDivElement>>;
 export default ErrorText;

package/dist/components/FileUploader/FileUploader.d.ts

@@ -10,5 +10,5 @@ export declare type FileUploaderProps = {
     width?: Property.Width;
     onSelectFiles: (event: React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLElement>, files: FileList | null) => void;
 };
-declare const FileUploader: React.FunctionComponent<FileUploaderProps>;
+declare const FileUploader: React.ForwardRefExoticComponent<FileUploaderProps & React.RefAttributes<HTMLDivElement>>;
 export default FileUploader;

package/dist/components/FileUploader/FileUploader.stories.d.ts

@@ -3,7 +3,7 @@ import { Story } from "@storybook/react/types-6-0";
 import { FileUploaderProps } from "./index";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<FileUploaderProps>;
+    component: React.ForwardRefExoticComponent<FileUploaderProps & React.RefAttributes<HTMLDivElement>>;
     argTypes: {
         onSelectFiles: {
             action: string;

package/dist/components/FixedPanel/FixedPanel.d.ts

@@ -10,6 +10,7 @@ export declare type FixedPanelProps = {
      * Define distance from top/bottom.
      */
     offset?: number;
+    children?: React.ReactNode;
 };
-declare const FixedPanel: React.FunctionComponent<FixedPanelProps>;
+declare const FixedPanel: React.ForwardRefExoticComponent<FixedPanelProps & React.RefAttributes<HTMLDivElement>>;
 export default FixedPanel;

package/dist/components/FloatingTip/FloatingTip.d.ts

@@ -16,5 +16,5 @@ export declare type FloatingTipProps = {
     children: React.ReactNode;
     onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, reason: ModalCloseReason | FloatingTipCloseReason) => void;
 };
-declare const FloatingTip: React.FunctionComponent<FloatingTipProps>;
+declare const FloatingTip: React.ForwardRefExoticComponent<FloatingTipProps & React.RefAttributes<HTMLDivElement>>;
 export default FloatingTip;

package/dist/components/FloatingTip/FloatingTip.stories.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { FloatingTipProps } from "./FloatingTip";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<FloatingTipProps>;
+    component: React.ForwardRefExoticComponent<FloatingTipProps & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;
 export declare const Sample: React.FunctionComponent<FloatingTipProps>;

package/dist/components/Icon/Icon.d.ts

@@ -19,5 +19,5 @@ export declare type Props = {
     size?: IconSize;
     color?: IconColor;
 };
-declare const Icon: React.FunctionComponent<Props>;
+declare const Icon: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default Icon;

package/dist/components/Icon/Icon.stories.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Props } from "./Icon";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<Props>;
+    component: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
     args: {
         name: string;
     };

package/dist/components/ItemEmpty/ItemEmpty.d.ts

@@ -5,5 +5,5 @@ export declare type ItemEmptyProps = {
     emptyImage?: string;
     imageWidth?: number;
 };
-declare const ItemEmpty: React.FunctionComponent<ItemEmptyProps>;
+declare const ItemEmpty: React.ForwardRefExoticComponent<ItemEmptyProps & React.RefAttributes<HTMLDivElement>>;
 export default ItemEmpty;

package/dist/components/Menu/Menu.d.ts

@@ -29,5 +29,30 @@ export declare type MenuProps = React.ComponentPropsWithoutRef<"div"> & {
      */
     menuListProps?: Partial<MenuListProps>;
 };
-declare const Menu: React.FunctionComponent<MenuProps>;
+declare const Menu: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    isOpen?: boolean | undefined;
+    /**
+     * Basis of `<Menu />` position.
+     */
+    baseElement?: HTMLElement | null | undefined;
+    /**
+     * `type ContentProp = React.ComponentPropsWithoutRef<"div"> & {
+     *   text: string;
+     *   onClick: () => void;
+     *   divideTop?: boolean;
+     *   disabled?: boolean;
+     * }`
+     */
+    contents: ContentProp[];
+    /**
+     * Define priority of position. Please check [this](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements).
+     */
+    positionPriority?: PopperJS.Placement[] | undefined;
+    onClose?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>, reason: ModalCloseReason | MenuCloseReason) => void) | undefined;
+    maxHeight?: MenuListProps["maxHeight"];
+    /**
+     * props of [MenuList](/?path=/docs/components-navigation-menulist)
+     */
+    menuListProps?: Partial<MenuListProps> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Menu;

package/dist/components/MenuList/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./MenuList";
-export type { MenuListProps } from "./MenuList";
+export type { MenuListProps, ContentProp, GroupContentProp } from "./MenuList";

package/dist/components/Modal/Modal.d.ts

@@ -21,5 +21,5 @@ export declare type ModalProps = {
     onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, reason: ModalCloseReason) => void;
     children: React.ReactElement;
 };
-declare const Modal: React.FunctionComponent<ModalProps>;
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/components/MultipleFilter/MultipleFilter.d.ts

@@ -30,5 +30,5 @@ export declare type MultipleFilterProps = {
     formPlaceholder?: string;
     width?: string;
 };
-declare const MultipleFilter: React.FunctionComponent<MultipleFilterProps>;
+declare const MultipleFilter: React.ForwardRefExoticComponent<MultipleFilterProps & React.RefAttributes<HTMLDivElement>>;
 export default MultipleFilter;

package/dist/components/MultipleFilter/MultipleFilter.stories.d.ts

@@ -3,7 +3,7 @@ import { Story } from "@storybook/react/types-6-0";
 import { MultipleFilterProps } from ".";
 declare const _default: {
     title: string;
-    component: React.FunctionComponent<MultipleFilterProps>;
+    component: React.ForwardRefExoticComponent<MultipleFilterProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         docs: {
             description: {