ingred-ui 34.0.0 → 34.1.0-canary.1

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

@@ -20,6 +20,12 @@ export type Select2OptionProps = {
      * ラベルの後に表示する要素
      */
     append?: React.ReactNode;
+    /**
+     * この選択肢を削除するときに呼ばれる。
+     * 渡したとき、行をホバーすると末尾にゴミ箱が出る。
+     * Select2 は選択肢を消さない。親が children と value から外す。
+     */
+    onDelete?: () => void;
 };
 /**
  * Select2Optionコンポーネント

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

@@ -69,6 +69,8 @@ export declare const IconArea: import("styled-components/dist/types").IStyledCom
     $disabled?: boolean | undefined;
     $multiple?: boolean | undefined;
 }, never>>> & string;
+export declare const CreateQueryText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
+export declare const CreateNameRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const StyledContextMenu2TextInputItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<{
     onEnter?: (() => void) | undefined;
 } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>, "$insetFocusRingPadding"> & import("../ContextMenu2/ContextMenu2TextInputItem").ContextMenu2TextInputItemStyledProps, never> & Partial<Pick<import("styled-components").FastOmit<{
@@ -98,6 +100,9 @@ export declare const StyledContextMenu2TextInputItem: import("styled-components/
     as?: import("styled-components").WebTarget | undefined;
     forwardedAs?: import("styled-components").WebTarget | undefined;
 }, "$insetFocusRingPadding">>> & string;
+export declare const DeleteOptionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<(import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>) & import("styled-components/dist/types").BaseObject, never> & Partial<Pick<(import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>) & import("styled-components/dist/types").BaseObject, never>>> & string & Omit<import("react").ForwardRefExoticComponent<import("../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement & HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const OptionWithDelete: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const OptionWithDeleteMain: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const OptionsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const VisuallyHidden: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;

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

@@ -131,6 +131,40 @@ export type Select2SearchMode = {
      */
     showDefaultOptions?: boolean;
 };
+/**
+ * 検索語から新しい選択肢を作る設定。
+ * `creatable={true}` のときは、ここにある既定値だけが使われる。
+ */
+export type Select2Creatable = {
+    /**
+     * 一覧の末尾へ出す作成メニューのラベル。
+     * 押すとその行が入力欄になり、アイコンは鉛筆に変わる。Enter でその名前を作成する。Esc では入力を取り消してこのメニューに戻る。検索窓は使わない。
+     * @default "新規作成"
+     */
+    createActionLabel?: string;
+    /**
+     * 作成行を選んだときに呼ばれる。引数は前後の空白を除いた入力値。
+     * 渡したときは Select2 は選択値を変えない。親が children と value を更新する。
+     * 渡さないときは、その入力値を値として選ぶ。
+     * 単一選択は置き換え、複数選択は追加する。複数選択の確定タイミングは通常の選択と同じ。
+     */
+    onCreate?: (inputValue: string) => void;
+    /**
+     * 追加の作成可否。false なら作成行を出さない。
+     * 引数は前後の空白を除いた入力値。
+     * 空文字と、既存 option の label / value との一致（大文字小文字を無視）は、この関数より先に常に拒否する。
+     */
+    isValidNewOption?: (inputValue: string) => boolean;
+    /**
+     * 作成の通信中かどうか。
+     * true のあいだは作成行を出さない。
+     * 単一選択はメニューを閉じ、トリガーを操作できなくして矢印の位置にローディングを出す。
+     * 複数選択はメニューを開いたまま、トリガーの矢印とメニューにローディングを出す。
+     * onCreate の開始で true にし、待ちが終わったら false に戻す。失敗したときも戻す。
+     * @default false
+     */
+    isCreating?: boolean;
+};
 export type Select2StyleProps = {
     theme: Theme;
     $size: Select2Size;
@@ -192,6 +226,13 @@ export type Select2Props = {
      * @default false
      */
     searchable?: boolean;
+    /**
+     * 検索語から新しい選択肢を作れるようにする。
+     * true のときは searchable の指定に関わらず検索窓を出す。
+     * オブジェクトを渡すと、作成行の文言や作成時の処理を指定できる。
+     * @default false
+     */
+    creatable?: boolean | Select2Creatable;
     /**
      * 検索入力のプレースホルダー
      * searchableがtrueの場合のみ使用されます

package/dist/components/Select2/utils/__tests__/creatableOption.test.d.ts

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

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

@@ -0,0 +1,19 @@
+export declare const CREATE_FROM_SEARCH_MESSAGE = "\u65B0\u898F\u4F5C\u6210\u3059\u308B";
+export declare const DEFAULT_CREATE_ACTION_LABEL = "\u65B0\u898F\u4F5C\u6210";
+export declare const CREATE_NAME_PLACEHOLDER = "\u4F5C\u6210\u3059\u308B\u540D\u79F0\u3092\u5165\u529B";
+export type CreatableMatchOption = {
+    value: string | number;
+    label: string;
+};
+export declare const formatCreateLabel: (inputValue: string) => string;
+/**
+ * 既存 option の label か value が、入力と大文字小文字を無視して一致するか。
+ * 比較の前に前後の空白を落とす。
+ */
+export declare const hasExactOptionMatch: (inputValue: string, options: CreatableMatchOption[]) => boolean;
+/**
+ * 作成行を出してよいか。
+ * 空文字と既存 option への一致は、isValidNewOption より先に拒否する。
+ * isValidNewOption には前後の空白を除いた入力を渡す。
+ */
+export declare const canCreateOption: (inputValue: string, options: CreatableMatchOption[], isValidNewOption?: ((inputValue: string) => boolean) | undefined) => boolean;