ingred-ui 14.2.2 → 14.3.0

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

@@ -1,8 +1,9 @@
-import * as PopperJS from "@popperjs/core";
 import * as React from "react";
 import { ActionButtonProps } from "../ActionButton";
 import { MenuProps } from "../Menu";
 import { ContentProp } from "../MenuList/MenuList";
+import { Placement } from "@floating-ui/react";
+import { AutoPlacement } from "../../hooks/usePlacement";
 export type ContextMenuProps = {
     /**
      * `type ContentProp = React.ComponentPropsWithoutRef<"div"> & {
@@ -14,9 +15,10 @@ export type ContextMenuProps = {
      */
     contents: ContentProp[];
     /**
-     * Define priority of position. Please check [this](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements).
+     * Define priority of position. Please check [this](https://floating-ui.com/docs/tutorial#placements).
+     * For backward compatibility, `"auto" | "auto-start" | "auto-end"` are included in addition to the above positions.
      */
-    positionPriority?: PopperJS.Placement[];
+    positionPriority?: (Placement | AutoPlacement)[];
     menuMaxHeight?: MenuProps["maxHeight"];
     /**
      * props of [Menu](/?path=/docs/components-navigation-menu)

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

@@ -1,8 +1,9 @@
 import * as React from "react";
-import * as PopperJS from "@popperjs/core";
 import { MenuProps } from "../Menu";
 import { ButtonSize, ButtonColor } from "../Button/Button";
 import { ContentProp } from "../MenuList/MenuList";
+import { Placement } from "@floating-ui/react";
+import { AutoPlacement } from "../../hooks/usePlacement";
 type DropdownButtonColor = Exclude<ButtonColor, "danger">;
 export type DropdownButtonProps = {
     size?: ButtonSize;
@@ -15,9 +16,10 @@ export type DropdownButtonProps = {
     contents: ContentProp[];
     disabled?: boolean;
     /**
-     * Define priority of position. Please check [this](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements).
+     * Define priority of position. Please check [this](https://floating-ui.com/docs/tutorial#placements).
+     * For backward compatibility, `"auto" | "auto-start" | "auto-end"` are included in addition to the above positions.
      */
-    positionPriority?: PopperJS.Placement[];
+    positionPriority?: (Placement | AutoPlacement)[];
     menuMaxHeight?: MenuProps["maxHeight"];
     menuProps?: Partial<MenuProps>;
     children?: React.ReactNode;

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

@@ -1,7 +1,8 @@
-import * as PopperJS from "@popperjs/core";
 import * as React from "react";
 import { ModalCloseReason } from "../Modal";
 import { PopoverProps } from "../Popover";
+import { Placement } from "@floating-ui/react";
+import { AutoPlacement } from "../../hooks/usePlacement";
 export type FloatingTipCloseReason = "clickCloseIcon";
 export type FloatingTipProps = {
     /**
@@ -9,9 +10,10 @@ export type FloatingTipProps = {
      */
     baseElement: HTMLElement | null;
     /**
-     * Define priority of position. Please check [this](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements).
+     * Define priority of position. Please check [this](https://floating-ui.com/docs/tutorial#placements).
+     * For backward compatibility, `"auto" | "auto-start" | "auto-end"` are included in addition to the above positions.
      */
-    positionPriority?: PopperJS.Placement[];
+    positionPriority?: (Placement | AutoPlacement)[];
     offset?: [number, number];
     isOpen: boolean;
     children: React.ReactNode;

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

@@ -1,8 +1,9 @@
-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";
+import { Placement } from "@floating-ui/react";
+import { AutoPlacement } from "../../hooks/usePlacement";
 export type MenuCloseReason = "clickMenuList";
 export type MenuProps = {
     isOpen?: boolean;
@@ -20,9 +21,10 @@ export type MenuProps = {
      */
     contents: ContentProp[];
     /**
-     * Define priority of position. Please check [this](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements).
+     * Define priority of position. Please check [this](https://floating-ui.com/docs/tutorial#placements).
+     * For backward compatibility, `"auto" | "auto-start" | "auto-end"` are included in addition to the above positions.
      */
-    positionPriority?: PopperJS.Placement[];
+    positionPriority?: (Placement | AutoPlacement)[];
     onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, reason: ModalCloseReason | MenuCloseReason) => void;
     maxHeight?: MenuListProps["maxHeight"];
     /**

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

@@ -26,7 +26,7 @@ export declare const Basic: {
         isOpen?: boolean | undefined;
         baseElement?: HTMLElement | null | undefined;
         contents: import("..").ContentProp[];
-        positionPriority?: import("@popperjs/core").Placement[] | undefined;
+        positionPriority?: ("auto" | "auto-start" | "auto-end" | import("@floating-ui/react-dom").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;
@@ -57,7 +57,7 @@ export declare const Group: {
         isOpen?: boolean | undefined;
         baseElement?: HTMLElement | null | undefined;
         contents: import("..").ContentProp[];
-        positionPriority?: import("@popperjs/core").Placement[] | undefined;
+        positionPriority?: ("auto" | "auto-start" | "auto-end" | import("@floating-ui/react-dom").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;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { Property } from "csstype";
 import { Theme } from "../../themes";
+import { IconName } from "../Icon";
 export type ContentType = "default" | "warning" | "disabled";
 export type ContentTypeStyle = {
     normal: {
@@ -22,6 +23,7 @@ export type SingleContentProp = React.ComponentPropsWithoutRef<"div"> & {
     onClick: () => void;
     divideTop?: boolean;
     type?: ContentType;
+    iconName?: IconName;
     /**
      * @deprecated
      *

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

@@ -19,11 +19,17 @@ declare const _default: {
 export default _default;
 export declare const Basic: {
     args: {
-        contents: {
+        contents: ({
             text: string;
             onClick: import("@storybook/addon-actions").HandlerFunction;
             type: string;
-        }[];
+            iconName?: undefined;
+        } | {
+            text: string;
+            onClick: import("@storybook/addon-actions").HandlerFunction;
+            type: string;
+            iconName: string;
+        })[];
         maxHeight: string;
     };
     decorators?: import("@storybook/types").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R, {

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

@@ -5,10 +5,14 @@ type ContainerProps = {
     inline: boolean;
     maxHeight: Property.MaxHeight;
 };
+type IconProps = {
+    disabled: boolean;
+};
 export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ContainerProps, never>;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Icon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IconProps, never>;
 export declare const Text: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const TextContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ContentTypeStyle & {
+export declare const MenuContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ContentTypeStyle & {
     disabled: boolean;
 }, never>;
 export {};

package/dist/components/Popover/Popover.d.ts

@@ -1,20 +1,19 @@
-import * as PopperJS from "@popperjs/core";
+import { Placement } from "@floating-ui/core";
 import * as React from "react";
 import { ModalProps } from "../Modal";
+import { AutoPlacement } from "../../hooks/usePlacement";
 export type PopoverProps = React.ComponentPropsWithoutRef<"div"> & {
     /**
      * If `false`, children becomes `visibility: hidden`.
      */
     isOpen?: boolean;
     onClose?: ModalProps["onClose"];
-    /**
-     * That becomes position reference of this component.
-     */
     baseElement: HTMLElement | null;
     /**
-     * Define priority of position. Please check [this](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements).
+     * Define priority of position. Please check [this](https://floating-ui.com/docs/tutorial#placements).
+     * If not specified, it will be auto.
      */
-    positionPriority?: PopperJS.Placement[];
+    positionPriority?: (Placement | AutoPlacement)[];
     offset?: [number, number];
     /**
      * props of [Modal](/?path=/docs/components-utils-modal)
@@ -28,14 +27,12 @@ declare const Popover: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLPr
      */
     isOpen?: boolean | undefined;
     onClose?: ModalProps["onClose"];
-    /**
-     * That becomes position reference of this component.
-     */
     baseElement: HTMLElement | null;
     /**
-     * Define priority of position. Please check [this](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements).
+     * Define priority of position. Please check [this](https://floating-ui.com/docs/tutorial#placements).
+     * If not specified, it will be auto.
      */
-    positionPriority?: PopperJS.Placement[] | undefined;
+    positionPriority?: ("auto" | "auto-start" | "auto-end" | Placement)[] | undefined;
     offset?: [number, number] | undefined;
     /**
      * props of [Modal](/?path=/docs/components-utils-modal)

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

@@ -7,7 +7,7 @@ declare const _default: {
         isOpen?: boolean | undefined;
         onClose?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>, reason: "backdropClick") => void) | undefined;
         baseElement: HTMLElement | null;
-        positionPriority?: import("@popperjs/core").Placement[] | undefined;
+        positionPriority?: ("auto" | "auto-start" | "auto-end" | import("@floating-ui/core").Placement)[] | undefined;
         offset?: [number, number] | undefined;
         modalProps?: Partial<import("..").ModalProps> | undefined;
         children: React.ComponentElement<HTMLElement, any>;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,16 +1,17 @@
 import * as React from "react";
-import * as PopperJS from "@popperjs/core";
+import { Placement } from "@floating-ui/core";
 import { CSSTransitionProps } from "../../utils/reactTransitionGroup";
+import { AutoPlacement } from "../../hooks/usePlacement";
 export type TooltipProps = React.ComponentPropsWithoutRef<"div"> & {
-    content: React.ReactChild;
+    content: React.ReactNode;
     open?: boolean;
     disableHoverListener?: boolean;
     enterDelay?: number;
     leaveDelay?: number;
     /**
-     * Define priority of position. Please check [this](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements).
+     * Define priority of position. Please check [this](https://floating-ui.com/docs/tutorial#placements).
      */
-    positionPriority?: PopperJS.Placement[];
+    positionPriority?: (Placement | AutoPlacement)[];
     offset?: [number, number];
     width?: string;
     disabled?: boolean;
@@ -21,15 +22,15 @@ export type TooltipProps = React.ComponentPropsWithoutRef<"div"> & {
     children: React.ComponentElement<HTMLElement, any>;
 };
 declare const Tooltip: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    content: React.ReactChild;
+    content: React.ReactNode;
     open?: boolean | undefined;
     disableHoverListener?: boolean | undefined;
     enterDelay?: number | undefined;
     leaveDelay?: number | undefined;
     /**
-     * Define priority of position. Please check [this](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements).
+     * Define priority of position. Please check [this](https://floating-ui.com/docs/tutorial#placements).
      */
-    positionPriority?: PopperJS.Placement[] | undefined;
+    positionPriority?: ("auto" | "auto-start" | "auto-end" | Placement)[] | undefined;
     offset?: [number, number] | undefined;
     width?: string | undefined;
     disabled?: boolean | undefined;

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

@@ -4,12 +4,12 @@ import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-        content: React.ReactChild;
+        content: React.ReactNode;
         open?: boolean | undefined;
         disableHoverListener?: boolean | undefined;
         enterDelay?: number | undefined;
         leaveDelay?: number | undefined;
-        positionPriority?: import("@popperjs/core").Placement[] | undefined;
+        positionPriority?: ("auto" | "auto-start" | "auto-end" | import("@floating-ui/core").Placement)[] | undefined;
         offset?: [number, number] | undefined;
         width?: string | undefined;
         disabled?: boolean | undefined;

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

@@ -1,8 +1,3 @@
-import { DefaultTheme } from "styled-components";
-import * as PopperJS from "@popperjs/core";
-export declare const Arrow: import("styled-components").StyledComponent<"div", DefaultTheme, {
-    placement?: PopperJS.Placement | undefined;
-}, never>;
-export declare const Tooltip: import("styled-components").StyledComponent<"div", DefaultTheme, {
+export declare const Tooltip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     width?: string | undefined;
 }, never>;

package/dist/hooks/__tests__/usePlacement.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/usePlacement.d.ts

@@ -0,0 +1,7 @@
+import { Placement } from "@floating-ui/react";
+export declare const autoPlacements: readonly ["auto", "auto-start", "auto-end"];
+export type AutoPlacement = typeof autoPlacements[number];
+export declare const usePlacement: (placements: (Placement | AutoPlacement)[]) => {
+    placements: Placement[];
+    isAuto: boolean;
+};