ingred-ui 11.4.0 → 12.0.0

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

@@ -26,23 +26,11 @@ export type ConfirmModalProps = {
     disabled?: boolean;
     loading?: boolean;
     overflowYScroll?: boolean;
-    fullSize?: boolean;
     /**
      * If `true`, children is wrapped by `<Spacer px={3} pb={3} />`.
      */
     disableHorizontalPadding?: boolean;
-    /**
-     * ```
-     * type SubAction = {
-     *   title: string;
-     *   icon: IconName;
-     *   action: () => void;
-     * }
-     * ```
-     * **Recommend to use with `fullSize={true}`**
-     */
-    subActions?: SubAction[];
-    tipElement?: JSX.Element;
+    subActions?: React.ReactNode[];
     /**
      * props of [Modal](/?path=/docs/components-utils-modal)
      */

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

@@ -19,9 +19,8 @@ declare const _default: {
 };
 export default _default;
 export declare const Basic: Story<ConfirmModalProps>;
-export declare const FullSize: Story<ConfirmModalProps>;
-export declare const WithTips: Story<ConfirmModalProps>;
-export declare const WithSubActions: Story<ConfirmModalProps>;
+export declare const WithOneSubAction: Story<ConfirmModalProps>;
+export declare const WithTwoSubActions: Story<ConfirmModalProps>;
 export declare const Loading: Story<ConfirmModalProps>;
 export declare const OverflowYScroll: Story<ConfirmModalProps>;
 export declare const WithoutFooter: Story<ConfirmModalProps>;

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

@@ -1,24 +1,16 @@
-export declare const ModalBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ModalContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../utils/spacer").SpacerProps & import("..").FlexProps & {
     width?: import("csstype").Property.Width<0 | (string & {})> | undefined;
     maxWidth?: import("csstype").Property.MaxWidth<0 | (string & {})> | undefined;
     minWidth?: import("csstype").Property.MinWidth<0 | (string & {})> | undefined;
-} & {
-    fullSize: boolean;
 }, never>;
 export declare const ModalHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const LeftContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 type ScrollContainerProps = {
     overflowYScroll: boolean;
-    fullSize: boolean;
     showFooter: boolean;
 };
 export declare const ScrollContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ScrollContainerProps, never>;
-export declare const ModalFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    fullSize: boolean;
-}, never>;
+export declare const ModalFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const LoadingContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const TipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const TipContentContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

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

@@ -1,7 +1,8 @@
-import * as React from "react";
 import * as PopperJS from "@popperjs/core";
-import { ContentProp } from "../MenuList/MenuList";
+import * as React from "react";
+import { ActionButtonProps } from "../ActionButton";
 import { MenuProps } from "../Menu";
+import { ContentProp } from "../MenuList/MenuList";
 export type ContextMenuProps = {
     /**
      * `type ContentProp = React.ComponentPropsWithoutRef<"div"> & {
@@ -21,6 +22,10 @@ export type ContextMenuProps = {
      * props of [Menu](/?path=/docs/components-navigation-menu)
      */
     menuProps?: Partial<MenuProps>;
+    /**
+     * props of [ActionButton](/?path=/docs/components-inputs-actionbutton)
+     */
+    actionButtonProps?: Partial<ActionButtonProps>;
 };
 declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<HTMLButtonElement>>;
 export default ContextMenu;

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

@@ -3,7 +3,6 @@ import { CreatableProps } from "react-select/creatable";
 import { GroupBase } from "react-select/dist/declarations/src/types";
 import { OptionType } from "../Select";
 export type CreatableSelectProps<T> = {
-    limit?: number;
     minWidth?: string;
     placeholder?: string;
     error?: boolean;
@@ -12,7 +11,6 @@ export type CreatableSelectProps<T> = {
 } & 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;
@@ -23,18 +21,17 @@ declare const _default: <T>(props: {
     tabIndex?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     classNames?: import("react-select").ClassNamesConfig<OptionType<T>, boolean, GroupBase<OptionType<T>>> | undefined;
-    styles?: import("react-select").StylesConfig<OptionType<T>, boolean, GroupBase<OptionType<T>>> | undefined;
-    options?: import("react-select/dist/declarations/src/types").OptionsOrGroups<OptionType<T>, GroupBase<OptionType<T>>> | undefined;
-    menuIsOpen?: boolean | undefined;
-    isDisabled?: boolean | undefined;
     loadingMessage?: ((obj: {
         inputValue: string;
     }) => React.ReactNode) | undefined;
     noOptionsMessage?: ((obj: {
         inputValue: string;
     }) => React.ReactNode) | undefined;
+    isDisabled?: boolean | undefined;
     isMulti?: boolean | undefined;
     isRtl?: boolean | undefined;
+    options?: import("react-select/dist/declarations/src/types").OptionsOrGroups<OptionType<T>, GroupBase<OptionType<T>>> | undefined;
+    menuIsOpen?: boolean | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
@@ -62,6 +59,7 @@ declare const _default: <T>(props: {
     screenReaderStatus?: ((obj: {
         count: number;
     }) => string) | undefined;
+    styles?: import("react-select").StylesConfig<OptionType<T>, boolean, GroupBase<OptionType<T>>> | undefined;
     tabSelectsValue?: boolean | undefined;
     unstyled?: boolean | undefined;
 } & {}, "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" | "required" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
@@ -69,18 +67,17 @@ declare const _default: <T>(props: {
     tabIndex?: number | undefined;
     'aria-live'?: "off" | "assertive" | "polite" | undefined;
     classNames?: import("react-select").ClassNamesConfig<OptionType<T>, boolean, GroupBase<OptionType<T>>> | undefined;
-    styles?: import("react-select").StylesConfig<OptionType<T>, boolean, GroupBase<OptionType<T>>> | undefined;
-    options?: import("react-select/dist/declarations/src/types").OptionsOrGroups<OptionType<T>, GroupBase<OptionType<T>>> | undefined;
-    menuIsOpen?: boolean | undefined;
-    isDisabled?: boolean | undefined;
     loadingMessage?: ((obj: {
         inputValue: string;
     }) => React.ReactNode) | undefined;
     noOptionsMessage?: ((obj: {
         inputValue: string;
     }) => React.ReactNode) | undefined;
+    isDisabled?: boolean | undefined;
     isMulti?: boolean | undefined;
     isRtl?: boolean | undefined;
+    options?: import("react-select/dist/declarations/src/types").OptionsOrGroups<OptionType<T>, GroupBase<OptionType<T>>> | undefined;
+    menuIsOpen?: boolean | undefined;
     backspaceRemovesValue?: boolean | undefined;
     blurInputOnSelect?: boolean | undefined;
     captureMenuScroll?: boolean | undefined;
@@ -108,6 +105,7 @@ declare const _default: <T>(props: {
     screenReaderStatus?: ((obj: {
         count: number;
     }) => string) | undefined;
+    styles?: import("react-select").StylesConfig<OptionType<T>, boolean, GroupBase<OptionType<T>>> | undefined;
     tabSelectsValue?: boolean | undefined;
     unstyled?: boolean | undefined;
 } & {}> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<OptionType<T>> & import("react-select/dist/declarations/src/useCreatable").CreatableAdditionalProps<OptionType<T>, GroupBase<OptionType<T>>> & {

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

@@ -2,7 +2,6 @@ import * as React from "react";
 declare const _default: {
     title: string;
     component: <T>(props: {
-        limit?: number | undefined;
         minWidth?: string | undefined;
         placeholder?: string | undefined;
         error?: boolean | undefined;
@@ -13,18 +12,17 @@ declare const _default: {
         tabIndex?: number | undefined;
         'aria-live'?: "off" | "assertive" | "polite" | undefined;
         classNames?: import("react-select").ClassNamesConfig<import("..").OptionType<T>, boolean, import("react-select").GroupBase<import("..").OptionType<T>>> | undefined;
-        styles?: import("react-select").StylesConfig<import("..").OptionType<T>, boolean, import("react-select").GroupBase<import("..").OptionType<T>>> | undefined;
-        options?: import("react-select").OptionsOrGroups<import("..").OptionType<T>, import("react-select").GroupBase<import("..").OptionType<T>>> | undefined;
-        menuIsOpen?: boolean | undefined;
-        isDisabled?: boolean | undefined;
         loadingMessage?: ((obj: {
             inputValue: string;
         }) => React.ReactNode) | undefined;
         noOptionsMessage?: ((obj: {
             inputValue: string;
         }) => React.ReactNode) | undefined;
+        isDisabled?: boolean | undefined;
         isMulti?: boolean | undefined;
         isRtl?: boolean | undefined;
+        options?: import("react-select").OptionsOrGroups<import("..").OptionType<T>, import("react-select").GroupBase<import("..").OptionType<T>>> | undefined;
+        menuIsOpen?: boolean | undefined;
         backspaceRemovesValue?: boolean | undefined;
         blurInputOnSelect?: boolean | undefined;
         captureMenuScroll?: boolean | undefined;
@@ -52,6 +50,7 @@ declare const _default: {
         screenReaderStatus?: ((obj: {
             count: number;
         }) => string) | undefined;
+        styles?: import("react-select").StylesConfig<import("..").OptionType<T>, boolean, import("react-select").GroupBase<import("..").OptionType<T>>> | undefined;
         tabSelectsValue?: boolean | undefined;
         unstyled?: boolean | undefined;
     } & {}, "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" | "required" | "ariaLiveMessages" | "classNamePrefix" | "delimiter" | "formatOptionLabel" | "hideSelectedOptions" | "inputValue" | "inputId" | "instanceId" | "isClearable" | "isOptionSelected" | "menuPortalTarget" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "onMenuScrollToTop" | "onMenuScrollToBottom"> & {
@@ -59,18 +58,17 @@ declare const _default: {
         tabIndex?: number | undefined;
         'aria-live'?: "off" | "assertive" | "polite" | undefined;
         classNames?: import("react-select").ClassNamesConfig<import("..").OptionType<T>, boolean, import("react-select").GroupBase<import("..").OptionType<T>>> | undefined;
-        styles?: import("react-select").StylesConfig<import("..").OptionType<T>, boolean, import("react-select").GroupBase<import("..").OptionType<T>>> | undefined;
-        options?: import("react-select").OptionsOrGroups<import("..").OptionType<T>, import("react-select").GroupBase<import("..").OptionType<T>>> | undefined;
-        menuIsOpen?: boolean | undefined;
-        isDisabled?: boolean | undefined;
         loadingMessage?: ((obj: {
             inputValue: string;
         }) => React.ReactNode) | undefined;
         noOptionsMessage?: ((obj: {
             inputValue: string;
         }) => React.ReactNode) | undefined;
+        isDisabled?: boolean | undefined;
         isMulti?: boolean | undefined;
         isRtl?: boolean | undefined;
+        options?: import("react-select").OptionsOrGroups<import("..").OptionType<T>, import("react-select").GroupBase<import("..").OptionType<T>>> | undefined;
+        menuIsOpen?: boolean | undefined;
         backspaceRemovesValue?: boolean | undefined;
         blurInputOnSelect?: boolean | undefined;
         captureMenuScroll?: boolean | undefined;
@@ -98,6 +96,7 @@ declare const _default: {
         screenReaderStatus?: ((obj: {
             count: number;
         }) => string) | undefined;
+        styles?: import("react-select").StylesConfig<import("..").OptionType<T>, boolean, import("react-select").GroupBase<import("..").OptionType<T>>> | undefined;
         tabSelectsValue?: boolean | undefined;
         unstyled?: boolean | undefined;
     } & {}> & 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>>> & {

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

@@ -44,16 +44,12 @@ export type DataTableProps<T> = {
      * **Don't use with `onSelectRowsChange={true}`**
      */
     onRadioChange?: (radio: number) => void;
-    /**
-     * Reset selected checkboxes when this props changed to `true`.
-     */
-    clearSelectedRows?: boolean;
     /**
      * Define tabs of table. Please refer to the samples below.
      */
     tabs?: Tab<T>[];
     /**
-     * props of [ItemEnpty](/?path=/docs/components-utils-itemempty)
+     * props of [ItemEmpty](/?path=/docs/components-utils-itemEmpty)
      */
     itemEmptyProps?: ItemEmptyProps;
     /**
@@ -73,18 +69,14 @@ export type DataTableProps<T> = {
     defaultSortOrder?: "desc" | "asc";
     /**
      * Specify checked rows.
-     * Not rerender when this prop is updated because it is used for initial value of state.
-     * **Please use with `onSelectRowsChange={true}`.**
      */
-    defaultSelectedRows?: number[];
+    selectedRows?: number[];
     /**
      * Specify checked row.
-     * Not rerender when this prop is updated because it is used for initial value of state.
-     * **Please use with `onSelectRowChange={true}`.**
      */
-    defaultSelectedRow?: number;
+    selectedRow?: number;
     /**
-     * Add verticale line in table.
+     * Add vertical line in table.
      */
     enableRuledLine?: boolean;
     /**
@@ -101,7 +93,7 @@ export 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>, ref?: React.ForwardedRef<HTMLDivElement>) => JSX.Element;
+declare const DataTable: <T extends DataTableBaseData>({ data: sourceData, columns, enablePagination, onSelectRowsChange, onRadioChange, tabs, itemEmptyProps, per, defaultSortField, defaultSortOrder, selectedRows, selectedRow, enableRuledLine, verticalSpacing, fullWidth, disableCheckWhenClickRow, tableMaxHeight, horizontalScrollable, labelRowsPerPage, labelDisplayedRows, }: DataTableProps<T>, ref?: React.ForwardedRef<HTMLDivElement>) => JSX.Element;
 declare const _default: <T extends DataTableBaseData>(props: DataTableProps<T> & {
     ref?: React.ForwardedRef<HTMLDivElement> | undefined;
 }) => ReturnType<typeof DataTable>;

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { ComponentStory } from "@storybook/react";
+import React from "react";
 import Fade from "./Fade";
 declare const _default: {
     title: string;

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

@@ -1,6 +1,7 @@
-import * as React from "react";
 import * as PopperJS from "@popperjs/core";
+import * as React from "react";
 import { ModalCloseReason } from "../Modal";
+import { PopoverProps } from "../Popover";
 export type FloatingTipCloseReason = "clickCloseIcon";
 export type FloatingTipProps = {
     /**
@@ -15,6 +16,10 @@ export type FloatingTipProps = {
     isOpen: boolean;
     children: React.ReactNode;
     onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, reason: ModalCloseReason | FloatingTipCloseReason) => void;
+    /**
+     * props of [Popover](/?path=/docs/components-utils-popover)
+     */
+    popoverProps?: Partial<PopoverProps>;
 };
 declare const FloatingTip: React.ForwardRefExoticComponent<FloatingTipProps & React.RefAttributes<HTMLDivElement>>;
 export default FloatingTip;

package/dist/components/FullSizeConfirmModal/FullSizeConfirmModal.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { ButtonColor } from "../Button/Button";
+import { IconName } from "../Icon/Icon";
+import { ModalCloseReason, ModalProps } from "../Modal";
+import { CSSTransitionProps } from "../../utils/reactTransitionGroup";
+export type FullSizeConfirmModalCloseReason = "clickCloseIcon" | "clickCancelButton";
+export type SubAction = {
+    title: string;
+    icon: IconName;
+    action: () => void;
+};
+export type FullSizeConfirmModalProps = {
+    title: string;
+    confirmText?: string;
+    cancelText?: string;
+    onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<Element, MouseEvent>, reason: ModalCloseReason | FullSizeConfirmModalCloseReason) => void;
+    /**
+     * If `undefined`, footer is removed.
+     */
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
+    buttonColor?: ButtonColor;
+    isOpen?: boolean;
+    /**
+     * If `true`, disabled to click submit button.
+     */
+    disabled?: boolean;
+    loading?: boolean;
+    overflowYScroll?: boolean;
+    /**
+     * If `true`, children is wrapped by `<Spacer px={3} pb={3} />`.
+     */
+    disableHorizontalPadding?: boolean;
+    subActions?: React.ReactNode[];
+    /**
+     * props of [Modal](/?path=/docs/components-utils-modal)
+     */
+    modalProps?: ModalProps;
+    /**
+     * props of [Fade](/?path=/docs/components-utils-fade)
+     */
+    fadeProps?: CSSTransitionProps;
+    children?: React.ReactNode;
+};
+declare const FullSizeConfirmModal: React.ForwardRefExoticComponent<FullSizeConfirmModalProps & React.RefAttributes<HTMLDivElement>>;
+export default FullSizeConfirmModal;

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { Story } from "@storybook/react/types-6-0";
+import { FullSizeConfirmModalProps } from "./FullSizeConfirmModal";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<FullSizeConfirmModalProps & React.RefAttributes<HTMLDivElement>>;
+    args: {
+        isOpen: boolean;
+        title: string;
+    };
+    parameters: {
+        docs: {
+            source: {
+                type: string;
+            };
+            page: () => JSX.Element;
+        };
+    };
+};
+export default _default;
+export declare const Basic: Story<FullSizeConfirmModalProps>;
+export declare const WithOneSubAction: Story<FullSizeConfirmModalProps>;
+export declare const WithTwoSubActions: Story<FullSizeConfirmModalProps>;
+export declare const Loading: Story<FullSizeConfirmModalProps>;
+export declare const OverflowYScroll: Story<FullSizeConfirmModalProps>;
+export declare const WithoutFooter: Story<FullSizeConfirmModalProps>;

package/dist/components/FullSizeConfirmModal/__tests__/FullSizeConfirmModal.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";

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

@@ -0,0 +1,2 @@
+export { default } from "./FullSizeConfirmModal";
+export type { FullSizeConfirmModalProps, FullSizeConfirmModalCloseReason, } from "./FullSizeConfirmModal";

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

@@ -0,0 +1,16 @@
+export declare const ModalContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../utils/spacer").SpacerProps & import("..").FlexProps & {
+    width?: import("csstype").Property.Width<0 | (string & {})> | undefined;
+    maxWidth?: import("csstype").Property.MaxWidth<0 | (string & {})> | undefined;
+    minWidth?: import("csstype").Property.MinWidth<0 | (string & {})> | undefined;
+}, never>;
+export declare const ModalHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const LeftContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+type ScrollContainerProps = {
+    overflowYScroll: boolean;
+    showFooter: boolean;
+};
+export declare const ScrollContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ScrollContainerProps, never>;
+export declare const ModalFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const LoadingContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { ComponentStory } from "@storybook/react";
+import React from "react";
 import Grow from "./Grow";
 declare const _default: {
     title: string;

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

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { Story } from "@storybook/react/types-6-0";
+import * as React from "react";
 import { LocaleProviderProps } from "./LocaleProvider";
 declare const _default: {
     title: string;

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

@@ -1,9 +1,10 @@
-import * as React from "react";
 import * as PopperJS from "@popperjs/core";
+import * as React from "react";
 import { ContentProp, MenuListProps } from "../MenuList/MenuList";
 import { ModalCloseReason } from "../Modal";
+import { PopoverProps } from "../Popover";
 export type MenuCloseReason = "clickMenuList";
-export type MenuProps = React.ComponentPropsWithoutRef<"div"> & {
+export type MenuProps = {
     isOpen?: boolean;
     /**
      * Basis of `<Menu />` position.
@@ -28,31 +29,10 @@ export type MenuProps = React.ComponentPropsWithoutRef<"div"> & {
      * props of [MenuList](/?path=/docs/components-navigation-menulist)
      */
     menuListProps?: Partial<MenuListProps>;
-};
-declare const Menu: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    isOpen?: boolean | undefined;
     /**
-     * Basis of `<Menu />` position.
+     * props of [Popover](/?path=/docs/components-utils-popover)
      */
-    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>>;
+    popoverProps?: Partial<PopoverProps>;
+};
+declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
 export default Menu;

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

@@ -3,15 +3,7 @@ import { Story } from "@storybook/react/types-6-0";
 import { MenuProps } from "./Menu";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        isOpen?: boolean | undefined;
-        baseElement?: HTMLElement | null | undefined;
-        contents: import("..").ContentProp[];
-        positionPriority?: import("@popperjs/core").Placement[] | undefined;
-        onClose?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>, reason: "backdropClick" | "clickMenuList") => void) | undefined;
-        maxHeight?: import("csstype").Property.MaxHeight<0 | (string & {})> | undefined;
-        menuListProps?: Partial<import("..").MenuListProps> | undefined;
-    } & React.RefAttributes<HTMLDivElement>>;
+    component: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         docs: {
             source: {

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { FilterPackType, ReferredFilterType, ReferedFilterType } from "./types";
+import { FilterPackType, ReferredFilterType } from "./types";
 export type MultipleFilterProps = {
     /**
      * `type FilterPackType = {
@@ -16,16 +16,10 @@ export type MultipleFilterProps = {
      *   filterCondition: ControlType<Types>["options"];
      *  }`
      */
-    onChange?: (referredFilters: ReferredFilterType[] | ReferedFilterType[]) => void;
+    onChange?: (referredFilters: ReferredFilterType[]) => void;
     placeholder?: string;
     editButtonTitle?: string;
     applyButtonTitle?: string;
-    /**
-     * @deprecated
-     * I'll delete it in the future.
-     * Because formErrorText it will no longer be necessary.
-     */
-    formErrorText?: string;
     inputErrorText?: string;
     formPlaceholder?: string;
     width?: string;

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

@@ -13,14 +13,7 @@ export type ControlType<T extends Types> = {
     type: T;
     options?: T extends "text" ? string : T extends "select" ? string[] : T extends "boolean" ? boolean : any;
 };
-export type ReferredFilterType = ReferedFilterType;
-/**
- * @deprecated
- *
- * I'll delete it in the future.
- * Please use "ReferredFilterType".
- */
-export type ReferedFilterType = {
+export type ReferredFilterType = {
     categoryName: string;
     filterName: string;
     filterType: Types;

package/dist/components/NavigationRail/{ExpantionMenu/ExpantionMenu.d.ts → ExpansionMenu/ExpansionMenu.d.ts}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { IconName } from "../../Icon/Icon";
-export type NavitagionRailExpantionMenuProps = React.ComponentPropsWithoutRef<"div"> & {
+export type NavigationRailExpansionMenuProps = React.ComponentPropsWithoutRef<"div"> & {
     title: string;
     /**
      * If `true`, it is highlighted.
@@ -12,9 +12,9 @@ export type NavitagionRailExpantionMenuProps = React.ComponentPropsWithoutRef<"d
      */
     notificationCount?: number;
     /**
-     * Array of `<NavagationRail.ExpantionMenu />` is expected.
+     * Array of `<NavigationRail.ExpansionMenu />` is expected.
      */
-    expantionList?: React.ReactNode[];
+    expansionList?: React.ReactNode[];
     /**
      * If `true`, it is expanded as default.
      */
@@ -24,7 +24,7 @@ export type NavitagionRailExpantionMenuProps = React.ComponentPropsWithoutRef<"d
      */
     onChangeExpand?: (isExpand: boolean) => void;
 };
-declare const ExpantionMenu: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+declare const ExpansionMenu: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     title: string;
     /**
      * If `true`, it is highlighted.
@@ -36,9 +36,9 @@ declare const ExpantionMenu: React.ForwardRefExoticComponent<Pick<React.Detailed
      */
     notificationCount?: number | undefined;
     /**
-     * Array of `<NavagationRail.ExpantionMenu />` is expected.
+     * Array of `<NavigationRail.ExpansionMenu />` is expected.
      */
-    expantionList?: React.ReactNode[] | undefined;
+    expansionList?: React.ReactNode[] | undefined;
     /**
      * If `true`, it is expanded as default.
      */
@@ -48,4 +48,4 @@ declare const ExpantionMenu: React.ForwardRefExoticComponent<Pick<React.Detailed
      */
     onChangeExpand?: ((isExpand: boolean) => void) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
-export { ExpantionMenu };
+export { ExpansionMenu };

package/dist/components/NavigationRail/ExpansionMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { ExpansionMenu } from "./ExpansionMenu";
+export type { NavigationRailExpansionMenuProps } from "./ExpansionMenu";

package/dist/components/NavigationRail/{ExpantionMenu → ExpansionMenu}/styled.d.ts

@@ -10,10 +10,10 @@ export declare const ArrowIconWrapper: import("styled-components").StyledCompone
     isExpand: boolean;
     isOpen: boolean;
 }, never>;
-type ExpantionProps = {
+type ExpansionProps = {
     isExpand: boolean;
     delay: boolean;
     height: string;
 };
-export declare const Expantion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ExpantionProps, never>;
+export declare const Expansion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ExpansionProps, never>;
 export {};

package/dist/components/NavigationRail/ExpansionMenuItem/ExpansionMenuItem.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+export type NavigationRailExpansionMenuItemProps = Omit<React.ComponentPropsWithoutRef<"div">, "title"> & {
+    title: React.ReactNode;
+    /**
+     * If `true`, it is highlighted.
+     */
+    isActive?: boolean;
+    /**
+     * If not `0`, the number is located on the right.
+     */
+    notificationCount?: number;
+};
+declare const ExpansionMenuItem: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "title"> & {
+    title: React.ReactNode;
+    /**
+     * If `true`, it is highlighted.
+     */
+    isActive?: boolean | undefined;
+    /**
+     * If not `0`, the number is located on the right.
+     */
+    notificationCount?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { ExpansionMenuItem };

package/dist/components/NavigationRail/ExpansionMenuItem/index.d.ts

@@ -0,0 +1,2 @@
+export { ExpansionMenuItem } from "./ExpansionMenuItem";
+export type { NavigationRailExpansionMenuItemProps } from "./ExpansionMenuItem";

package/dist/components/NavigationRail/ExpansionMenuItem/styled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TitleWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;