@zenkigen-inc/component-ui 1.22.0 → 1.24.0

package/dist/index.d.mts

@@ -183,6 +183,8 @@ declare const Combobox: typeof ComboboxBase & {
     displayName: string;
 };
 
+type DatePickerSize = 'small' | 'medium' | 'large' | 'x-large';
+
 /**
  * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
  *
@@ -220,8 +222,15 @@ type DatePickerProps = DatePickerButtonProps & {
     maxDate?: Date;
     /** 未選択時に表示されるプレースホルダーテキスト @default '日付を選択' */
     placeholder?: string;
-    /** トリガーボタンのサイズ @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    /**
+     * トリガーボタンのサイズ。`'x-large'` はカレンダーも拡大される（342×437px）
+     *
+     * `'x-large'` はモバイル向け。カレンダーがスクロールしないため、ビューポート幅 358px 以上、
+     * かつトリガーの上下いずれかに 445px 以上の余白が確保できるレイアウトでのみ使用すること。
+     * 満たせない場合はフッターが画面外に出て操作できなくなるため `'large'` 以下を選ぶ。
+     * @default 'medium'
+     */
+    size?: DatePickerSize;
     /** 日付変換に使用するタイムゾーン。選択された日付は指定タイムゾーンの 00:00:00 として返される @default 'Asia/Tokyo' */
     timeZone?: DatePickerTimeZone;
     /** Compound Component（ErrorMessage 等） */
@@ -824,7 +833,7 @@ type Props$a = {
     placeholderIcon?: IconName;
     /** 現在選択されているオプション */
     selectedOption?: SelectOption | null;
-    /** オプションリストの最大高さ */
+    /** オプションリストの最大高さ。未指定の場合はオプション 8.5 個分（x-small / small / medium: 282px、large: 350px）。"none" で制限を解除する */
     optionListMaxHeight?: CSSProperties['height'];
     /** 無効状態の制御 */
     isDisabled?: boolean;
@@ -832,6 +841,8 @@ type Props$a = {
     isError?: boolean;
     /** 選択状態の見た目を適用するかどうか */
     isOptionSelected?: boolean;
+    /** 「選択解除」を表示するかどうか。未指定の場合は後方互換の挙動（placeholder の有無に従う）となる */
+    hasDeselectButton?: boolean;
     /** 選択変更時のコールバック関数 */
     onChange?: (option: SelectOption | null) => void;
     /** ドロップダウンリストの幅をトリガーボタンの幅に合わせる */
@@ -841,7 +852,7 @@ type Props$a = {
     /** トリガーボタンに設定する aria-describedby。エラーメッセージ等と関連付けるために使用する */
     'aria-describedby'?: AriaAttributes['aria-describedby'];
 };
-declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, }: PropsWithChildren<Props$a>): react.JSX.Element;
+declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, hasDeselectButton, onChange, optionListMaxHeight, matchListToTrigger, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, }: PropsWithChildren<Props$a>): react.JSX.Element;
 declare namespace Select {
     var Option: typeof SelectItem;
 }
@@ -1122,33 +1133,47 @@ declare const TimePicker: TimePickerComponent;
 type ToastState = 'success' | 'error' | 'warning' | 'information';
 
 type Props$1 = {
-    /** 表示するメッセージの状態（色・アイコンを切り替えます） */
+    /** トーストの状態を表す。表示するアイコンとタイトルの文字色が切り替わる。 */
     state?: ToastState;
-    /** トースト全体の幅。数値・文字列いずれも指定可能 */
+    /** トースト全体の幅。数値・文字列いずれも指定できる。 */
     width?: CSSProperties['width'];
-    /** true で 5 秒後に自動で閉じる */
+    /** true のとき 5 秒後に自動で閉じ、onClickClose を呼ぶ。既定は false（ToastProvider 経由のトーストには既定で true が渡される）。 */
     isAutoClose?: boolean;
-    /** true でフェードイン/アウトのアニメーションを有効化 */
+    /** true のときフェードイン / フェードアウトのアニメーションを有効にする。 */
     isAnimation?: boolean;
-    /** 表示する本文 */
+    /** true のとき閉じるボタンを表示する。isAutoClose が false のときは指定に関わらず必ず表示される。 */
+    hasCloseButton?: boolean;
+    /** タイトルの下に表示する補足テキスト。 */
+    description?: ReactNode;
+    /** タイトルとして表示する本文。 */
     children?: ReactNode;
-    /** クローズボタンや自動クローズ完了時に呼び出されるコールバック */
+    /** 閉じるボタン押下時および自動クローズ完了時に呼ばれる、トースト終了の通知コールバック。 */
     onClickClose: () => void;
 };
-declare function Toast({ state, width, isAutoClose, isAnimation, children, onClickClose, }: Props$1): react.JSX.Element;
+declare function Toast({ state, width, isAutoClose, isAnimation, hasCloseButton, description, children, onClickClose, }: Props$1): react.JSX.Element;
 
 type AddToastArgs = {
-    /** 表示する本文 */
+    /** タイトルとして表示する本文 */
     message: string;
     /** 表示ステート */
     state: ToastState;
+    /** タイトルの下に表示する補足テキスト */
+    description?: ReactNode;
+    /** 閉じるボタンを表示するかどうか。ToastProvider の既定値を上書きする */
+    hasCloseButton?: boolean;
+    /** 5 秒後に自動で閉じるかどうか。既定は true */
+    isAutoClose?: boolean;
 };
-type ToastProviderProps = {
+type ToastContextValue = {
     addToast: (args: AddToastArgs) => void;
     removeToast: (id: number) => void;
 };
-declare const ToastProvider: ({ children }: PropsWithChildren) => react.JSX.Element;
-declare const useToast: () => ToastProviderProps;
+type ToastProviderProps = PropsWithChildren<{
+    /** このプロバイダー配下で追加されるトーストの、閉じるボタン表示の既定値 */
+    hasCloseButton?: boolean;
+}>;
+declare const ToastProvider: ({ children, hasCloseButton }: ToastProviderProps) => react.JSX.Element;
+declare const useToast: () => ToastContextValue;
 
 /** Toggle コンポーネントの公開 Props */
 type Props = {

package/dist/index.d.ts

@@ -183,6 +183,8 @@ declare const Combobox: typeof ComboboxBase & {
     displayName: string;
 };
 
+type DatePickerSize = 'small' | 'medium' | 'large' | 'x-large';
+
 /**
  * DatePicker のエラーメッセージを表示するコンポーネントのプロパティ
  *
@@ -220,8 +222,15 @@ type DatePickerProps = DatePickerButtonProps & {
     maxDate?: Date;
     /** 未選択時に表示されるプレースホルダーテキスト @default '日付を選択' */
     placeholder?: string;
-    /** トリガーボタンのサイズ @default 'medium' */
-    size?: 'small' | 'medium' | 'large';
+    /**
+     * トリガーボタンのサイズ。`'x-large'` はカレンダーも拡大される（342×437px）
+     *
+     * `'x-large'` はモバイル向け。カレンダーがスクロールしないため、ビューポート幅 358px 以上、
+     * かつトリガーの上下いずれかに 445px 以上の余白が確保できるレイアウトでのみ使用すること。
+     * 満たせない場合はフッターが画面外に出て操作できなくなるため `'large'` 以下を選ぶ。
+     * @default 'medium'
+     */
+    size?: DatePickerSize;
     /** 日付変換に使用するタイムゾーン。選択された日付は指定タイムゾーンの 00:00:00 として返される @default 'Asia/Tokyo' */
     timeZone?: DatePickerTimeZone;
     /** Compound Component（ErrorMessage 等） */
@@ -824,7 +833,7 @@ type Props$a = {
     placeholderIcon?: IconName;
     /** 現在選択されているオプション */
     selectedOption?: SelectOption | null;
-    /** オプションリストの最大高さ */
+    /** オプションリストの最大高さ。未指定の場合はオプション 8.5 個分（x-small / small / medium: 282px、large: 350px）。"none" で制限を解除する */
     optionListMaxHeight?: CSSProperties['height'];
     /** 無効状態の制御 */
     isDisabled?: boolean;
@@ -832,6 +841,8 @@ type Props$a = {
     isError?: boolean;
     /** 選択状態の見た目を適用するかどうか */
     isOptionSelected?: boolean;
+    /** 「選択解除」を表示するかどうか。未指定の場合は後方互換の挙動（placeholder の有無に従う）となる */
+    hasDeselectButton?: boolean;
     /** 選択変更時のコールバック関数 */
     onChange?: (option: SelectOption | null) => void;
     /** ドロップダウンリストの幅をトリガーボタンの幅に合わせる */
@@ -841,7 +852,7 @@ type Props$a = {
     /** トリガーボタンに設定する aria-describedby。エラーメッセージ等と関連付けるために使用する */
     'aria-describedby'?: AriaAttributes['aria-describedby'];
 };
-declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, }: PropsWithChildren<Props$a>): react.JSX.Element;
+declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, hasDeselectButton, onChange, optionListMaxHeight, matchListToTrigger, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, }: PropsWithChildren<Props$a>): react.JSX.Element;
 declare namespace Select {
     var Option: typeof SelectItem;
 }
@@ -1122,33 +1133,47 @@ declare const TimePicker: TimePickerComponent;
 type ToastState = 'success' | 'error' | 'warning' | 'information';
 
 type Props$1 = {
-    /** 表示するメッセージの状態（色・アイコンを切り替えます） */
+    /** トーストの状態を表す。表示するアイコンとタイトルの文字色が切り替わる。 */
     state?: ToastState;
-    /** トースト全体の幅。数値・文字列いずれも指定可能 */
+    /** トースト全体の幅。数値・文字列いずれも指定できる。 */
     width?: CSSProperties['width'];
-    /** true で 5 秒後に自動で閉じる */
+    /** true のとき 5 秒後に自動で閉じ、onClickClose を呼ぶ。既定は false（ToastProvider 経由のトーストには既定で true が渡される）。 */
     isAutoClose?: boolean;
-    /** true でフェードイン/アウトのアニメーションを有効化 */
+    /** true のときフェードイン / フェードアウトのアニメーションを有効にする。 */
     isAnimation?: boolean;
-    /** 表示する本文 */
+    /** true のとき閉じるボタンを表示する。isAutoClose が false のときは指定に関わらず必ず表示される。 */
+    hasCloseButton?: boolean;
+    /** タイトルの下に表示する補足テキスト。 */
+    description?: ReactNode;
+    /** タイトルとして表示する本文。 */
     children?: ReactNode;
-    /** クローズボタンや自動クローズ完了時に呼び出されるコールバック */
+    /** 閉じるボタン押下時および自動クローズ完了時に呼ばれる、トースト終了の通知コールバック。 */
     onClickClose: () => void;
 };
-declare function Toast({ state, width, isAutoClose, isAnimation, children, onClickClose, }: Props$1): react.JSX.Element;
+declare function Toast({ state, width, isAutoClose, isAnimation, hasCloseButton, description, children, onClickClose, }: Props$1): react.JSX.Element;
 
 type AddToastArgs = {
-    /** 表示する本文 */
+    /** タイトルとして表示する本文 */
     message: string;
     /** 表示ステート */
     state: ToastState;
+    /** タイトルの下に表示する補足テキスト */
+    description?: ReactNode;
+    /** 閉じるボタンを表示するかどうか。ToastProvider の既定値を上書きする */
+    hasCloseButton?: boolean;
+    /** 5 秒後に自動で閉じるかどうか。既定は true */
+    isAutoClose?: boolean;
 };
-type ToastProviderProps = {
+type ToastContextValue = {
     addToast: (args: AddToastArgs) => void;
     removeToast: (id: number) => void;
 };
-declare const ToastProvider: ({ children }: PropsWithChildren) => react.JSX.Element;
-declare const useToast: () => ToastProviderProps;
+type ToastProviderProps = PropsWithChildren<{
+    /** このプロバイダー配下で追加されるトーストの、閉じるボタン表示の既定値 */
+    hasCloseButton?: boolean;
+}>;
+declare const ToastProvider: ({ children, hasCloseButton }: ToastProviderProps) => react.JSX.Element;
+declare const useToast: () => ToastContextValue;
 
 /** Toggle コンポーネントの公開 Props */
 type Props = {