ingred-ui 23.24.0 → 24.0.0

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

@@ -1,28 +1,4 @@
 import * as React from "react";
-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;
-    color?: DropdownButtonColor;
-    onClick?: () => void;
-    split?: boolean;
-    /**
-     * props of [MenuList](/?path=/docs/components-navigation-menulist)
-     */
-    contents: ContentProp[];
-    disabled?: boolean;
-    /**
-     * 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?: (Placement | AutoPlacement)[];
-    menuMaxHeight?: MenuProps["maxHeight"];
-    menuProps?: Partial<MenuProps>;
-    children?: React.ReactNode;
-};
-declare const DropdownButton: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLDivElement>>;
+import { DropdownButtonProps } from "./types";
+declare const DropdownButton: React.FC<DropdownButtonProps>;
 export default DropdownButton;

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

@@ -1,20 +1,18 @@
 import * as React from "react";
-import { DropdownButtonProps } from "./DropdownButton";
+import type { DropdownButtonProps } from "./types";
 import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLDivElement>>;
+    component: React.FC<DropdownButtonProps>;
     args: {
         contents: ({
             text: string;
             onClick: () => void;
-            type: string;
             divideTop?: undefined;
         } | {
             text: string;
             onClick: () => void;
             divideTop: boolean;
-            type: string;
         })[];
     };
 };
@@ -22,4 +20,9 @@ export default _default;
 export declare const Example: StoryObj<DropdownButtonProps>;
 export declare const Colors: StoryObj<DropdownButtonProps>;
 export declare const Sizes: StoryObj<DropdownButtonProps>;
+export declare const WithIcon: StoryObj<DropdownButtonProps>;
 export declare const Split: StoryObj<DropdownButtonProps>;
+export declare const SplitWithIcon: StoryObj<DropdownButtonProps>;
+export declare const WithSelectedValue: StoryObj<DropdownButtonProps>;
+export declare const WithConfirmModal: StoryObj<DropdownButtonProps>;
+export declare const WithLoading: StoryObj<DropdownButtonProps>;

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

@@ -1,2 +1,2 @@
 export { default } from "./DropdownButton";
-export type { DropdownButtonProps } from "./DropdownButton";
+export type { DropdownButtonProps, ContextMenu2ContentProp } from "./types";

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

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import { ButtonSize, ButtonColor } from "../Button/Button";
+export type DropdownButtonColor = Exclude<ButtonColor, "danger">;
+export type ContextMenu2ContentProp = {
+    text: string;
+    onClick: () => void;
+    divideTop?: boolean;
+    disabled?: boolean;
+    icon?: ReactNode;
+    color?: "danger";
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+};
+export type DropdownButtonProps = {
+    size?: ButtonSize;
+    color?: DropdownButtonColor;
+    onClick?: () => void;
+    split?: boolean;
+    /**
+     * ContextMenu2のコンテンツ
+     */
+    contents?: ContextMenu2ContentProp[];
+    disabled?: boolean;
+    children?: React.ReactNode;
+    /**
+     * ボタンに表示するアイコン
+     */
+    icon?: ReactNode;
+    /**
+     * ボタンに表示する選択値。undefinedの場合はchildrenが使用されます。
+     */
+    selectedValue?: string;
+    /**
+     * ドロップダウンメニューの幅
+     */
+    menuWidth?: number;
+    /**
+     * ローディング状態を表示するかどうか。文字列を指定した場合はそれがローディングテキストとして使用されます。
+     * - `true`: デフォルトの"Loading..."テキストを使用
+     * - `string`: 指定した文字列をローディングテキストとして使用
+     * - `false` または `undefined`: ローディング状態を表示しない
+     *
+     * ボタンの内容に応じた動作:
+     * - アイコンのみ: スピナーのみを表示（ローディングテキストは無視）
+     * - テキストのみ: ローディングテキストのみを表示（`true`の場合はデフォルトで"Loading..."）
+     * - アイコン + テキスト: スピナー + ローディングテキストを表示（`true`の場合はデフォルトで"Loading..."）
+     */
+    loading?: boolean | string;
+};
+export type DropdownButtonSizeConfig = {
+    arrowIconSize: number;
+    arrowButtonPadding: string;
+};
+export declare const DROPDOWN_BUTTON_SIZES: Record<ButtonSize, DropdownButtonSizeConfig>;