ingred-ui 22.2.1 → 22.3.0

package/dist/components/ContextMenu2/ContextMenu2.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactNode, type Ref, type ReactElement, type ButtonHTMLAttributes, type Dispatch, type SetStateAction } from "react";
+import React, { type ReactNode, type ReactElement, type ButtonHTMLAttributes, type Dispatch, type SetStateAction, type Ref } from "react";
 export type ContextMenu2Anchor = {
     x: number;
     y: number;
@@ -37,6 +37,18 @@ type ContextMenu2Props = {
      * 開閉状態が変更されたときのコールバック
      */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * パネルの上部に固定表示される要素（検索窓など）
+     */
+    stickyHeader?: ReactNode;
+    /**
+     * パネルの下部に固定表示される要素（適用ボタンなど）
+     */
+    stickyFooter?: ReactNode;
+    /**
+     * 検索結果が0件の場合に表示するメッセージ
+     */
+    noResultsMessage?: string;
 };
 export declare const ContextMenu2: React.ForwardRefExoticComponent<ContextMenu2Props & React.RefAttributes<HTMLButtonElement>>;
 type ContextMenu2ContainerProps = {

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

@@ -12,6 +12,9 @@ declare const _default: {
         minWidth?: number | undefined;
         children: React.ReactNode;
         onOpenChange?: ((open: boolean) => void) | undefined;
+        stickyHeader?: React.ReactNode;
+        stickyFooter?: React.ReactNode;
+        noResultsMessage?: string | undefined;
     } & React.RefAttributes<HTMLButtonElement>>;
     parameters: {
         docs: {

package/dist/components/ContextMenu2/ContextMenu2NoResultsMessage.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export type ContextMenu2NoResultsMessageProps = {
+    message: string;
+};
+export declare const ContextMenu2NoResultsMessage: React.FC<ContextMenu2NoResultsMessageProps>;

package/dist/components/FilterComboBox/FilterComboBox.d.ts

@@ -13,7 +13,12 @@ type FilterTagInputProps = {
     size?: FilterSize;
     variant?: FilterVariant;
     tagVariant?: FilterVariant;
-    placeholder?: string;
+    searchPlaceholder?: string;
+    noResultsMessage?: string;
+    disabled?: boolean;
+    applyButtonText?: string;
+    cancelButtonText?: string;
+    error?: boolean;
 };
-export declare const FilterComboBox: ({ values, options, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, tagVariant, placeholder, }: FilterTagInputProps) => JSX.Element;
+export declare const FilterComboBox: ({ values, options, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, tagVariant, searchPlaceholder, noResultsMessage, disabled, applyButtonText, cancelButtonText, error, }: FilterTagInputProps) => JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ import React from "react";
 import { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: ({ values, options, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, tagVariant, placeholder, }: {
+    component: ({ values, options, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, tagVariant, searchPlaceholder, noResultsMessage, disabled, applyButtonText, cancelButtonText, error, }: {
         values: string[];
         options: (string | string[])[];
         selectedIndex: number;
@@ -15,7 +15,12 @@ declare const meta: {
         size?: import("../FilterInputAbstract/types").FilterSize | undefined;
         variant?: import("../FilterInputAbstract/types").FilterVariant | undefined;
         tagVariant?: import("../FilterInputAbstract/types").FilterVariant | undefined;
-        placeholder?: string | undefined;
+        searchPlaceholder?: string | undefined;
+        noResultsMessage?: string | undefined;
+        disabled?: boolean | undefined;
+        applyButtonText?: string | undefined;
+        cancelButtonText?: string | undefined;
+        error?: boolean | undefined;
     }) => JSX.Element;
     argTypes: {
         size: {
@@ -63,20 +68,6 @@ declare const meta: {
                 };
             };
         };
-        placeholder: {
-            control: {
-                type: string;
-            };
-            description: string;
-            table: {
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
     };
 };
 export default meta;
@@ -114,7 +105,19 @@ export declare const Sizes: StoryObj<typeof meta>;
  *   - light: 明るい背景色
  *   - dark: 暗い背景色（デフォルト）
  * - tagVariant: タグの背景色
- *   - light: 明るい背景色（デフォルト）
+ *   - 指定なし: 親コンポーネントのvariantに応じて自動的に設定（推奨）
+ *   - light: 明るい背景色
  *   - dark: 暗い背景色
+ *
+ * コンポーネントのvariantに応じてタグのvariantが自動的に切り替わります。
+ * variantが"light"の場合はタグは"dark"に、variantが"dark"の場合はタグは"light"になります。
  */
 export declare const Variants: StoryObj<typeof meta>;
+/**
+ * 無効状態のサンプル
+ */
+export declare const Disabled: StoryObj<typeof meta>;
+/**
+ * エラー状態
+ */
+export declare const Error: StoryObj<typeof meta>;

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

@@ -10,4 +10,8 @@ export declare const SelectIcon: import("styled-components").StyledComponent<"sp
 export declare const StyledContextMenu2TextInputItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
     onEnter?: (() => void) | undefined;
 } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContextMenu2ButtonControlsItem: import("styled-components").StyledComponent<({ className, children }: {
+    className?: string | undefined;
+    children: import("react").ReactNode;
+}) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export {};

package/dist/components/FilterInputAbstract/FilterInputAbstract.d.ts

@@ -2,6 +2,7 @@ import React, { type ReactElement, type ReactNode } from "react";
 import { FilterSize } from "./types";
 export declare const FilterInputContext: React.Context<{
     isSmall: boolean;
+    disabled: boolean;
 }>;
 type FilterTagProps = {
     label: string;
@@ -19,6 +20,9 @@ type FilterInputAbstractProps = {
     children?: ReactNode;
     onSelectChange: (index: number) => void;
     size?: "small" | "medium" | "large";
+    disabled?: boolean;
+    error?: boolean;
+    isOpen?: boolean;
 };
-export declare const FilterInputAbstract: ({ selectedIndex, selectOptions, onSelectChange, children, size, }: FilterInputAbstractProps) => JSX.Element;
+export declare const FilterInputAbstract: ({ selectedIndex, selectOptions, onSelectChange, children, size, disabled, error, isOpen, }: FilterInputAbstractProps) => JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ import React from "react";
 import { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: ({ selectedIndex, selectOptions, onSelectChange, children, size, }: {
+    component: ({ selectedIndex, selectOptions, onSelectChange, children, size, disabled, error, isOpen, }: {
         selectedIndex: number;
         selectOptions: {
             icon: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
@@ -11,6 +11,9 @@ declare const meta: {
         children?: React.ReactNode;
         onSelectChange: (index: number) => void;
         size?: "small" | "medium" | "large" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        isOpen?: boolean | undefined;
     }) => JSX.Element;
     argTypes: {
         size: {

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

@@ -6,7 +6,11 @@ export declare const getTriggerIconSizeStyle: (size: FilterSize) => import("styl
 export type FilterTagProps = {
     $size: FilterSize;
 };
-export declare const FilterInputAbstract: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FilterInputAbstract: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $isOpen?: boolean | undefined;
+    $error?: boolean | undefined;
+    $disabled?: boolean | undefined;
+}, never>;
 export declare const DropDownTrigger: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const FilterTag: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, FilterTagProps, never>;
 export declare const FilterTagButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, FilterTagProps, never>;

package/dist/components/FilterSelectInput/FilterSelectInput.d.ts

@@ -13,6 +13,9 @@ type FilterSelectInputProps = {
     size?: FilterSize;
     variant?: FilterVariant;
     searchPlaceholder?: string;
+    noResultsMessage?: string;
+    disabled?: boolean;
+    error?: boolean;
 };
-export declare const FilterSelectInput: ({ value, options, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, searchPlaceholder, }: FilterSelectInputProps) => JSX.Element;
+export declare const FilterSelectInput: ({ value, options, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, searchPlaceholder, noResultsMessage, disabled, error, }: FilterSelectInputProps) => JSX.Element;
 export {};

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

@@ -1,42 +1,6 @@
-import React from "react";
-import { StoryObj } from "@storybook/react";
-declare const meta: {
-    title: string;
-    component: ({ value, options, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, searchPlaceholder, }: {
-        value: string;
-        options: string[];
-        selectedIndex: number;
-        selectOptions: {
-            icon: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-            label: string;
-        }[];
-        onChange: (value: string) => void;
-        onSelectChange: (index: number) => void;
-        size?: import("../FilterInputAbstract/types").FilterSize | undefined;
-        variant?: import("../FilterInputAbstract/types").FilterVariant | undefined;
-        searchPlaceholder?: string | undefined;
-    }) => JSX.Element;
-    argTypes: {
-        size: {
-            control: {
-                type: string;
-            };
-            options: string[];
-        };
-        variant: {
-            control: {
-                type: string;
-            };
-            options: string[];
-        };
-        searchPlaceholder: {
-            control: {
-                type: string;
-            };
-            description: string;
-        };
-    };
-};
+import { Meta, StoryObj } from "@storybook/react";
+import { FilterSelectInput } from "./index";
+declare const meta: Meta<typeof FilterSelectInput>;
 export default meta;
 /**
  * 入力内容をリストから選択させるフィルターの入力です。
@@ -55,7 +19,7 @@ export declare const Default: StoryObj<typeof meta>;
 export declare const Sizes: StoryObj<typeof meta>;
 export declare const Variants: StoryObj<typeof meta>;
 /**
- * 検索窓のプレースホルダーをカスタマイズできます。
- * デフォルトは「絞り込む」です。
+ * 無効化状態のサンプル
  */
-export declare const SearchPlaceholder: StoryObj<typeof meta>;
+export declare const Disabled: StoryObj<typeof meta>;
+export declare const Error: StoryObj<typeof meta>;

package/dist/components/FilterTagInput/FilterTagInput.d.ts

@@ -9,12 +9,14 @@ type FilterTagInputProps = {
         icon: ReactElement;
         label: string;
     }[];
-    onChange: (values: string[]) => void;
+    onChange: (values: string[], selectedIndex: number) => void;
     onSelectChange: (index: number) => void;
     size?: FilterSize;
     variant?: "light" | "dark";
     tagVariant?: "light" | "dark";
     menuIconSize?: IconSize | number;
+    disabled?: boolean;
+    error?: boolean;
 };
-export declare const FilterTagInput: ({ title, values, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, tagVariant, menuIconSize, }: FilterTagInputProps) => JSX.Element;
+export declare const FilterTagInput: ({ title, values, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, tagVariant, menuIconSize, disabled, error, }: FilterTagInputProps) => JSX.Element;
 export {};

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

@@ -1,43 +1,6 @@
-import React from "react";
-import { StoryObj } from "@storybook/react";
-declare const meta: {
-    title: string;
-    component: ({ title, values, selectedIndex, selectOptions, onChange, onSelectChange, size, variant, tagVariant, menuIconSize, }: {
-        title: string;
-        values: string[];
-        selectedIndex: number;
-        selectOptions: {
-            icon: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-            label: string;
-        }[];
-        onChange: (values: string[]) => void;
-        onSelectChange: (index: number) => void;
-        size?: import("../FilterInputAbstract/types").FilterSize | undefined;
-        variant?: "dark" | "light" | undefined;
-        tagVariant?: "dark" | "light" | undefined;
-        menuIconSize?: number | import("../Icon").IconSize | undefined;
-    }) => JSX.Element;
-    argTypes: {
-        size: {
-            control: {
-                type: string;
-            };
-            options: string[];
-        };
-        variant: {
-            control: {
-                type: string;
-            };
-            options: string[];
-        };
-        tagVariant: {
-            control: {
-                type: string;
-            };
-            options: string[];
-        };
-    };
-};
+import { Meta, StoryObj } from "@storybook/react";
+import { FilterTagInput } from "./index";
+declare const meta: Meta<typeof FilterTagInput>;
 export default meta;
 /**
  * 入力内容がタグ形式で表示される。<br />
@@ -80,3 +43,5 @@ export default meta;
 export declare const Default: StoryObj<typeof meta>;
 export declare const Sizes: StoryObj<typeof meta>;
 export declare const Variants: StoryObj<typeof meta>;
+export declare const Disabled: StoryObj<typeof meta>;
+export declare const Error: StoryObj<typeof meta>;

package/dist/components/Select2/Select2.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { Select2Size, Select2Variant } from "./types";
+import { TagVariant } from "../Tag/types";
+type Select2Option = {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+};
+type Select2Props = {
+    value: (string | number) | (string | number)[];
+    onChange: (value: (string | number) | (string | number)[]) => void;
+    options: Select2Option[];
+    multiple?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    size?: Select2Size;
+    variant?: Select2Variant;
+    tagVariant?: TagVariant;
+    searchPlaceholder?: string;
+    noResultsMessage?: string;
+    error?: boolean;
+    applyButtonText?: string;
+    cancelButtonText?: string;
+};
+export declare const Select2: React.FC<Select2Props>;
+export {};

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

@@ -0,0 +1,2 @@
+export { Select2 } from "./Select2";
+export type { Select2Props, Select2Option, Select2Size, Select2Variant, } from "./types";

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

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { Select2Size, Select2Props } from "./types";
+export declare const Select2Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SelectContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $size?: Select2Size | undefined;
+    $variant?: Select2Props["variant"];
+    $disabled?: boolean | undefined;
+    $error?: boolean | undefined;
+    $isOpen?: boolean | undefined;
+}, never>;
+export declare const SelectButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    $size: Select2Size;
+    $variant?: Select2Props["variant"];
+    $error?: boolean | undefined;
+    $disabled?: boolean | undefined;
+    $isOpen?: boolean | undefined;
+    $hasValue?: boolean | undefined;
+    $multiple?: boolean | undefined;
+}, never>;
+export declare const InputArea: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $size?: Select2Size | undefined;
+    $variant?: Select2Props["variant"];
+    $disabled?: boolean | undefined;
+    $multiple?: boolean | undefined;
+}, never>;
+export declare const SelectLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const TagContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTag: import("styled-components").StyledComponent<({ label, size, variant, onRemove, className, disabled, }: import("../Tag").TagProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const Placeholder: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    $variant?: Select2Props["variant"];
+    $disabled?: boolean | undefined;
+}, never>;
+export declare const IconArea: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $size?: Select2Size | undefined;
+    $disabled?: boolean | undefined;
+}, never>;
+export declare const StyledContextMenu2TextInputItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    onEnter?: (() => void) | undefined;
+} & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const OptionsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,107 @@
+import { Theme } from "../../themes";
+export type Select2Size = "small" | "medium" | "large";
+export type Select2Variant = "light" | "dark";
+export type Select2SizeConfig = {
+    fontSize: string;
+    padding: string;
+    iconSize: string;
+    borderRadius: string;
+    height: string;
+};
+export declare const SELECT2_SIZES: Record<Select2Size, Select2SizeConfig>;
+export type Select2Option = {
+    /**
+     * 選択肢の値
+     */
+    value: string | number;
+    /**
+     * 表示ラベル
+     */
+    label: string;
+    /**
+     * 無効状態
+     */
+    disabled?: boolean;
+};
+export type Select2StyleProps = {
+    theme: Theme;
+    $size: Select2Size;
+    $variant: Select2Variant;
+    $disabled?: boolean;
+    $error?: boolean;
+    $isOpen?: boolean;
+    $hasValue?: boolean;
+};
+export type Select2Props = {
+    /**
+     * 選択肢の配列
+     */
+    options: Select2Option[];
+    /**
+     * 選択された値。multipleがtrueの場合は配列、falseの場合は単一の値
+     */
+    value?: string | number | (string | number)[];
+    /**
+     * 値が変更された時のコールバック
+     */
+    onChange?: ((value: string | number) => void) | ((values: (string | number)[]) => void);
+    /**
+     * 複数選択モード
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * コンポーネントのサイズ
+     * @default "medium"
+     */
+    size?: Select2Size;
+    /**
+     * コンポーネントのバリアント
+     * @default "light"
+     */
+    variant?: Select2Variant;
+    /**
+     * タグのバリアント（複数選択時）
+     * @default 指定がない場合、Select2のvariantに応じて自動的に決定されます。
+     * variant="light"の場合はdark、variant="dark"の場合はlightが適用されます。
+     */
+    tagVariant?: Select2Variant;
+    /**
+     * 無効状態
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * プレースホルダー
+     * @default "選択してください"
+     */
+    placeholder?: string;
+    /**
+     * 検索入力のプレースホルダー
+     * @default "検索"
+     */
+    searchPlaceholder?: string;
+    /**
+     * 検索結果がない場合のメッセージ
+     * @default "オプションがありません"
+     */
+    noResultsMessage?: string;
+    /**
+     * エラー状態
+     * @default false
+     *
+     * 注意: エラーメッセージの表示はコンポーネント側では行われません。
+     * エラーメッセージはプロダクト側で実装してください。
+     */
+    error?: boolean;
+    /**
+     * 適用ボタンのテキスト (multipleがtrueの場合のみ使用)
+     * @default "適用"
+     */
+    applyButtonText?: string;
+    /**
+     * キャンセルボタンのテキスト (multipleがtrueの場合のみ使用)
+     * @default "キャンセル"
+     */
+    cancelButtonText?: string;
+};