@zenkigen-inc/component-ui 1.21.0 → 1.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +146 -5
- package/dist/index.d.ts +146 -5
- package/dist/index.js +737 -294
- package/dist/index.mjs +683 -244
- package/package.json +4 -4
- package/vitest.setup.ts +6 -0
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, TextareaHTMLAttributes } from 'react';
|
|
2
|
+
import react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, AriaAttributes, TextareaHTMLAttributes } from 'react';
|
|
3
3
|
import * as _zenkigen_inc_component_icons from '@zenkigen-inc/component-icons';
|
|
4
4
|
import { IconName } from '@zenkigen-inc/component-icons';
|
|
5
5
|
import { tokens } from '@zenkigen-inc/component-config';
|
|
@@ -116,6 +116,12 @@ type ComboboxProps = PropsWithChildren<{
|
|
|
116
116
|
inputValue: string;
|
|
117
117
|
/** 入力変更時のコールバック */
|
|
118
118
|
onInputChange: (value: string) => void;
|
|
119
|
+
/**
|
|
120
|
+
* クリアボタンのクリック時に呼ばれるコールバック。
|
|
121
|
+
* このコールバックを渡したときのみクリアボタンが表示される(TextInput と同一仕様)。
|
|
122
|
+
* 値のクリア(`onChange(null, null)` / `onInputChange('')`)は利用者側で行う。
|
|
123
|
+
*/
|
|
124
|
+
onClickClearButton?: () => void;
|
|
119
125
|
/** popup の開閉状態(任意、controlled) */
|
|
120
126
|
isOpen?: boolean;
|
|
121
127
|
/** 開閉変更時のコールバック */
|
|
@@ -165,7 +171,7 @@ declare function ComboboxList({ children, maxHeight: maxHeightProp }: ComboboxLi
|
|
|
165
171
|
declare function ComboboxLoading(): react.JSX.Element;
|
|
166
172
|
declare function ComboboxEmpty(): react.JSX.Element;
|
|
167
173
|
|
|
168
|
-
declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
|
|
174
|
+
declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, onClickClearButton, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
|
|
169
175
|
declare const Combobox: typeof ComboboxBase & {
|
|
170
176
|
Input: typeof ComboboxInput;
|
|
171
177
|
List: typeof ComboboxList;
|
|
@@ -510,6 +516,8 @@ type Props$k = {
|
|
|
510
516
|
state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
|
|
511
517
|
/** コンポーネントの縦サイズとパディングを制御する。 */
|
|
512
518
|
size?: 'small' | 'medium';
|
|
519
|
+
/** 枠線の有無を切り替える。outline は state に応じた 1px の枠線を表示する。 */
|
|
520
|
+
variant?: 'default' | 'outline';
|
|
513
521
|
/** 通知に表示するメッセージ本体。 */
|
|
514
522
|
children?: ReactNode;
|
|
515
523
|
} & ({
|
|
@@ -521,7 +529,7 @@ type Props$k = {
|
|
|
521
529
|
/** 閉じるボタンがクリックされたときのハンドラ。 */
|
|
522
530
|
onClickClose: () => void;
|
|
523
531
|
});
|
|
524
|
-
declare function NotificationInline({ state, size, ...props }: Props$k): react.JSX.Element;
|
|
532
|
+
declare function NotificationInline({ state, size, variant, ...props }: Props$k): react.JSX.Element;
|
|
525
533
|
|
|
526
534
|
type Props$j = {
|
|
527
535
|
/** 現在のページ番号 */
|
|
@@ -675,6 +683,67 @@ type Props$d = {
|
|
|
675
683
|
};
|
|
676
684
|
declare function Radio({ name, value, id, label, isChecked, isDisabled, size, onChange, }: Props$d): react.JSX.Element;
|
|
677
685
|
|
|
686
|
+
type RadioCardErrorMessageProps = {
|
|
687
|
+
children: ReactNode;
|
|
688
|
+
/** エラーメッセージ要素の id。未指定なら RadioCard が自動採番して注入する */
|
|
689
|
+
id?: string;
|
|
690
|
+
};
|
|
691
|
+
declare function RadioCardErrorMessage({ children, id }: RadioCardErrorMessageProps): react.JSX.Element | null;
|
|
692
|
+
declare namespace RadioCardErrorMessage {
|
|
693
|
+
var displayName: string;
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
type RadioCardGroupProps = {
|
|
697
|
+
children: ReactNode;
|
|
698
|
+
};
|
|
699
|
+
declare function RadioCardGroup({ children }: RadioCardGroupProps): react.JSX.Element;
|
|
700
|
+
declare namespace RadioCardGroup {
|
|
701
|
+
var displayName: string;
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
type RadioCardItemProps = {
|
|
705
|
+
/** このカードの値。グループの value と一致したとき選択状態になる */
|
|
706
|
+
value: string;
|
|
707
|
+
/** 主ラベル */
|
|
708
|
+
label: string;
|
|
709
|
+
/** 補足説明(ラベルの下に表示) */
|
|
710
|
+
description?: string;
|
|
711
|
+
/** このカード個別の無効化(グループの isDisabled と OR) */
|
|
712
|
+
isDisabled?: boolean;
|
|
713
|
+
/** input の id。未指定なら自動生成 */
|
|
714
|
+
id?: string;
|
|
715
|
+
};
|
|
716
|
+
declare function RadioCardItem({ value, label, description, isDisabled: itemDisabled, id }: RadioCardItemProps): react.JSX.Element;
|
|
717
|
+
declare namespace RadioCardItem {
|
|
718
|
+
var displayName: string;
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
type RadioCardProps = {
|
|
722
|
+
/** RadioCard.Group と任意で RadioCard.ErrorMessage */
|
|
723
|
+
children: ReactNode;
|
|
724
|
+
/** 選択されている値(controlled) */
|
|
725
|
+
value: string;
|
|
726
|
+
/** 選択変更時のハンドラー */
|
|
727
|
+
onChange: (value: string) => void;
|
|
728
|
+
/** input の name。未指定なら自動生成 */
|
|
729
|
+
name?: string;
|
|
730
|
+
/** グループ全体を無効化するか */
|
|
731
|
+
isDisabled?: boolean;
|
|
732
|
+
/** グループ全体をエラー状態にするか */
|
|
733
|
+
isError?: boolean;
|
|
734
|
+
/** radiogroup の aria-label(推奨) */
|
|
735
|
+
'aria-label'?: string;
|
|
736
|
+
/** radiogroup の aria-labelledby */
|
|
737
|
+
'aria-labelledby'?: string;
|
|
738
|
+
};
|
|
739
|
+
declare function RadioCardRoot({ children, value, onChange, name, isDisabled, isError, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: RadioCardProps): react.JSX.Element;
|
|
740
|
+
declare const RadioCard: typeof RadioCardRoot & {
|
|
741
|
+
Group: typeof RadioCardGroup;
|
|
742
|
+
Item: typeof RadioCardItem;
|
|
743
|
+
ErrorMessage: typeof RadioCardErrorMessage;
|
|
744
|
+
displayName: string;
|
|
745
|
+
};
|
|
746
|
+
|
|
678
747
|
type Props$c = {
|
|
679
748
|
/** サイズ */
|
|
680
749
|
size?: 'medium' | 'large';
|
|
@@ -767,8 +836,12 @@ type Props$a = {
|
|
|
767
836
|
onChange?: (option: SelectOption | null) => void;
|
|
768
837
|
/** ドロップダウンリストの幅をトリガーボタンの幅に合わせる */
|
|
769
838
|
matchListToTrigger?: boolean;
|
|
839
|
+
/** トリガーボタンに設定する aria-label。TimePicker 等のコンポジットからラベルを付与するために使用する */
|
|
840
|
+
'aria-label'?: AriaAttributes['aria-label'];
|
|
841
|
+
/** トリガーボタンに設定する aria-describedby。エラーメッセージ等と関連付けるために使用する */
|
|
842
|
+
'aria-describedby'?: AriaAttributes['aria-describedby'];
|
|
770
843
|
};
|
|
771
|
-
declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, }: PropsWithChildren<Props$a>): react.JSX.Element;
|
|
844
|
+
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;
|
|
772
845
|
declare namespace Select {
|
|
773
846
|
var Option: typeof SelectItem;
|
|
774
847
|
}
|
|
@@ -978,6 +1051,74 @@ type TextAreaComponent = ForwardRefExoticComponent<TextAreaProps & RefAttributes
|
|
|
978
1051
|
};
|
|
979
1052
|
declare const TextArea: TextAreaComponent;
|
|
980
1053
|
|
|
1054
|
+
/** TimePicker(および内部の Select)のサイズ */
|
|
1055
|
+
type TimePickerSize = 'x-small' | 'small' | 'medium' | 'large';
|
|
1056
|
+
|
|
1057
|
+
/**
|
|
1058
|
+
* TimePicker のエラーメッセージを表示するコンポーネントのプロパティ
|
|
1059
|
+
*
|
|
1060
|
+
* `isError={true}` の場合にのみレンダリングされる。
|
|
1061
|
+
* `className` プロパティは除外されており、内部スタイルが適用される。
|
|
1062
|
+
*/
|
|
1063
|
+
type TimePickerErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
|
|
1064
|
+
declare const TimePickerErrorMessage: react.ForwardRefExoticComponent<TimePickerErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
|
|
1065
|
+
|
|
1066
|
+
/**
|
|
1067
|
+
* TimePicker のユーティリティ関数・型
|
|
1068
|
+
*
|
|
1069
|
+
* 時刻の候補生成(時 / 分)と、`{ hour, minute }` 構造体 ⇄ `"HH:mm"` 文字列の相互変換を行う。
|
|
1070
|
+
* min/max による範囲制限は「範囲外の候補を生成リストから除外(非表示)」する方針で実装している。
|
|
1071
|
+
*/
|
|
1072
|
+
|
|
1073
|
+
/** TimePicker の value 型。両方 `null` の場合は未入力を表す */
|
|
1074
|
+
type TimeValue = {
|
|
1075
|
+
hour: number | null;
|
|
1076
|
+
minute: number | null;
|
|
1077
|
+
};
|
|
1078
|
+
/** 分候補の刻み。すべて 60 の約数で等間隔に生成できる値のみを許可する */
|
|
1079
|
+
type MinuteStep = 1 | 5 | 10 | 15 | 30;
|
|
1080
|
+
/**
|
|
1081
|
+
* `"HH:mm"` 文字列を `{ hour, minute }` へ変換する。
|
|
1082
|
+
* 形式不正・範囲外(0-23 時 / 0-59 分の範囲外)の場合は `null` を返す。
|
|
1083
|
+
* @example parseTime('09:30') → { hour: 9, minute: 30 }
|
|
1084
|
+
*/
|
|
1085
|
+
declare const parseTime: (time: string) => {
|
|
1086
|
+
hour: number;
|
|
1087
|
+
minute: number;
|
|
1088
|
+
} | null;
|
|
1089
|
+
/**
|
|
1090
|
+
* `{ hour, minute }` を `"HH:mm"` 文字列へ変換する。
|
|
1091
|
+
* 時・分のいずれかが `null`(=未入力)の場合は `null` を返す。
|
|
1092
|
+
* @example formatTime({ hour: 9, minute: 30 }) → '09:30'
|
|
1093
|
+
*/
|
|
1094
|
+
declare const formatTime: (value: TimeValue) => string | null;
|
|
1095
|
+
|
|
1096
|
+
type TimePickerProps = {
|
|
1097
|
+
/** 選択時刻。`hour`・`minute` の両方が `null` の場合は未入力を表す */
|
|
1098
|
+
value: TimeValue;
|
|
1099
|
+
/** 時刻が変更されたときに呼び出されるコールバック関数。各 Select の変更ごとに新しい値を返す */
|
|
1100
|
+
onChange: (value: TimeValue) => void;
|
|
1101
|
+
/** コンポーネントのサイズ。内部の `Select` の size に 1:1 でマッピングされる @default 'medium' */
|
|
1102
|
+
size?: TimePickerSize;
|
|
1103
|
+
/** 分候補の刻み(60 の約数) @default 1 */
|
|
1104
|
+
minuteStep?: MinuteStep;
|
|
1105
|
+
/** 選択可能な最小時刻(`"HH:mm"`・inclusive)。範囲外の候補は非表示になる */
|
|
1106
|
+
minTime?: string;
|
|
1107
|
+
/** 選択可能な最大時刻(`"HH:mm"`・inclusive)。範囲外の候補は非表示になる */
|
|
1108
|
+
maxTime?: string;
|
|
1109
|
+
/** 無効状態かどうか @default false */
|
|
1110
|
+
isDisabled?: boolean;
|
|
1111
|
+
/** エラー状態かどうか。`true` の場合、両方の Select がエラー表示になる @default false */
|
|
1112
|
+
isError?: boolean;
|
|
1113
|
+
/** Compound Component(`TimePicker.ErrorMessage`) */
|
|
1114
|
+
children?: ReactNode;
|
|
1115
|
+
};
|
|
1116
|
+
type TimePickerComponent = ((props: TimePickerProps) => ReactElement) & {
|
|
1117
|
+
ErrorMessage: typeof TimePickerErrorMessage;
|
|
1118
|
+
displayName?: string;
|
|
1119
|
+
};
|
|
1120
|
+
declare const TimePicker: TimePickerComponent;
|
|
1121
|
+
|
|
981
1122
|
type ToastState = 'success' | 'error' | 'warning' | 'information';
|
|
982
1123
|
|
|
983
1124
|
type Props$1 = {
|
|
@@ -1055,4 +1196,4 @@ type TooltipProps = {
|
|
|
1055
1196
|
};
|
|
1056
1197
|
declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: TooltipProps): react.JSX.Element;
|
|
1057
1198
|
|
|
1058
|
-
export { Avatar, AvatarGroup, Breadcrumb, Button, Checkbox, type ColorVariant, Combobox, type ComboboxChangeMeta, type ComboboxInputProps, type ComboboxItemProps, type ComboboxListProps, type ComboboxProps, type ComboboxSize, type ComboboxVariant, DatePicker, type DatePickerProps, type DatePickerTimeZone, Divider, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, FileInput, type FileInputRef, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, Radio, type RenderSurplusContext, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, type StepProgress, type StepState, Steps, type StepsOrientation, type StepsProps, type StepsSize, type StepsTextOrientation, type StepsVariant, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, useOutsideClick, useRovingFocus, useToast };
|
|
1199
|
+
export { Avatar, AvatarGroup, Breadcrumb, Button, Checkbox, type ColorVariant, Combobox, type ComboboxChangeMeta, type ComboboxInputProps, type ComboboxItemProps, type ComboboxListProps, type ComboboxProps, type ComboboxSize, type ComboboxVariant, DatePicker, type DatePickerProps, type DatePickerTimeZone, Divider, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, FileInput, type FileInputRef, Heading, Icon, IconButton, Loading, type MinuteStep, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, Radio, RadioCard, type RadioCardErrorMessageProps, type RadioCardGroupProps, type RadioCardItemProps, type RadioCardProps, type RenderSurplusContext, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, type StepProgress, type StepState, Steps, type StepsOrientation, type StepsProps, type StepsSize, type StepsTextOrientation, type StepsVariant, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, TimePicker, type TimePickerProps, type TimeValue, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, formatTime, parseTime, useOutsideClick, useRovingFocus, useToast };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, TextareaHTMLAttributes } from 'react';
|
|
2
|
+
import react__default, { ReactNode, ElementType, PropsWithChildren, ComponentPropsWithoutRef, CSSProperties, ChangeEvent, HTMLAttributes, ButtonHTMLAttributes, ReactElement, MouseEvent, MutableRefObject, RefObject, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, FormEvent, AriaAttributes, TextareaHTMLAttributes } from 'react';
|
|
3
3
|
import * as _zenkigen_inc_component_icons from '@zenkigen-inc/component-icons';
|
|
4
4
|
import { IconName } from '@zenkigen-inc/component-icons';
|
|
5
5
|
import { tokens } from '@zenkigen-inc/component-config';
|
|
@@ -116,6 +116,12 @@ type ComboboxProps = PropsWithChildren<{
|
|
|
116
116
|
inputValue: string;
|
|
117
117
|
/** 入力変更時のコールバック */
|
|
118
118
|
onInputChange: (value: string) => void;
|
|
119
|
+
/**
|
|
120
|
+
* クリアボタンのクリック時に呼ばれるコールバック。
|
|
121
|
+
* このコールバックを渡したときのみクリアボタンが表示される(TextInput と同一仕様)。
|
|
122
|
+
* 値のクリア(`onChange(null, null)` / `onInputChange('')`)は利用者側で行う。
|
|
123
|
+
*/
|
|
124
|
+
onClickClearButton?: () => void;
|
|
119
125
|
/** popup の開閉状態(任意、controlled) */
|
|
120
126
|
isOpen?: boolean;
|
|
121
127
|
/** 開閉変更時のコールバック */
|
|
@@ -165,7 +171,7 @@ declare function ComboboxList({ children, maxHeight: maxHeightProp }: ComboboxLi
|
|
|
165
171
|
declare function ComboboxLoading(): react.JSX.Element;
|
|
166
172
|
declare function ComboboxEmpty(): react.JSX.Element;
|
|
167
173
|
|
|
168
|
-
declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
|
|
174
|
+
declare function ComboboxBase({ children, value, onChange, inputValue, onInputChange, onClickClearButton, isOpen: isOpenProp, onOpenChange, size, variant, placeholder, isError, isDisabled, width, maxWidth, listMaxHeight, matchListToTrigger, }: ComboboxProps): react.JSX.Element;
|
|
169
175
|
declare const Combobox: typeof ComboboxBase & {
|
|
170
176
|
Input: typeof ComboboxInput;
|
|
171
177
|
List: typeof ComboboxList;
|
|
@@ -510,6 +516,8 @@ type Props$k = {
|
|
|
510
516
|
state?: 'success' | 'warning' | 'information' | 'attention' | 'default';
|
|
511
517
|
/** コンポーネントの縦サイズとパディングを制御する。 */
|
|
512
518
|
size?: 'small' | 'medium';
|
|
519
|
+
/** 枠線の有無を切り替える。outline は state に応じた 1px の枠線を表示する。 */
|
|
520
|
+
variant?: 'default' | 'outline';
|
|
513
521
|
/** 通知に表示するメッセージ本体。 */
|
|
514
522
|
children?: ReactNode;
|
|
515
523
|
} & ({
|
|
@@ -521,7 +529,7 @@ type Props$k = {
|
|
|
521
529
|
/** 閉じるボタンがクリックされたときのハンドラ。 */
|
|
522
530
|
onClickClose: () => void;
|
|
523
531
|
});
|
|
524
|
-
declare function NotificationInline({ state, size, ...props }: Props$k): react.JSX.Element;
|
|
532
|
+
declare function NotificationInline({ state, size, variant, ...props }: Props$k): react.JSX.Element;
|
|
525
533
|
|
|
526
534
|
type Props$j = {
|
|
527
535
|
/** 現在のページ番号 */
|
|
@@ -675,6 +683,67 @@ type Props$d = {
|
|
|
675
683
|
};
|
|
676
684
|
declare function Radio({ name, value, id, label, isChecked, isDisabled, size, onChange, }: Props$d): react.JSX.Element;
|
|
677
685
|
|
|
686
|
+
type RadioCardErrorMessageProps = {
|
|
687
|
+
children: ReactNode;
|
|
688
|
+
/** エラーメッセージ要素の id。未指定なら RadioCard が自動採番して注入する */
|
|
689
|
+
id?: string;
|
|
690
|
+
};
|
|
691
|
+
declare function RadioCardErrorMessage({ children, id }: RadioCardErrorMessageProps): react.JSX.Element | null;
|
|
692
|
+
declare namespace RadioCardErrorMessage {
|
|
693
|
+
var displayName: string;
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
type RadioCardGroupProps = {
|
|
697
|
+
children: ReactNode;
|
|
698
|
+
};
|
|
699
|
+
declare function RadioCardGroup({ children }: RadioCardGroupProps): react.JSX.Element;
|
|
700
|
+
declare namespace RadioCardGroup {
|
|
701
|
+
var displayName: string;
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
type RadioCardItemProps = {
|
|
705
|
+
/** このカードの値。グループの value と一致したとき選択状態になる */
|
|
706
|
+
value: string;
|
|
707
|
+
/** 主ラベル */
|
|
708
|
+
label: string;
|
|
709
|
+
/** 補足説明(ラベルの下に表示) */
|
|
710
|
+
description?: string;
|
|
711
|
+
/** このカード個別の無効化(グループの isDisabled と OR) */
|
|
712
|
+
isDisabled?: boolean;
|
|
713
|
+
/** input の id。未指定なら自動生成 */
|
|
714
|
+
id?: string;
|
|
715
|
+
};
|
|
716
|
+
declare function RadioCardItem({ value, label, description, isDisabled: itemDisabled, id }: RadioCardItemProps): react.JSX.Element;
|
|
717
|
+
declare namespace RadioCardItem {
|
|
718
|
+
var displayName: string;
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
type RadioCardProps = {
|
|
722
|
+
/** RadioCard.Group と任意で RadioCard.ErrorMessage */
|
|
723
|
+
children: ReactNode;
|
|
724
|
+
/** 選択されている値(controlled) */
|
|
725
|
+
value: string;
|
|
726
|
+
/** 選択変更時のハンドラー */
|
|
727
|
+
onChange: (value: string) => void;
|
|
728
|
+
/** input の name。未指定なら自動生成 */
|
|
729
|
+
name?: string;
|
|
730
|
+
/** グループ全体を無効化するか */
|
|
731
|
+
isDisabled?: boolean;
|
|
732
|
+
/** グループ全体をエラー状態にするか */
|
|
733
|
+
isError?: boolean;
|
|
734
|
+
/** radiogroup の aria-label(推奨) */
|
|
735
|
+
'aria-label'?: string;
|
|
736
|
+
/** radiogroup の aria-labelledby */
|
|
737
|
+
'aria-labelledby'?: string;
|
|
738
|
+
};
|
|
739
|
+
declare function RadioCardRoot({ children, value, onChange, name, isDisabled, isError, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, }: RadioCardProps): react.JSX.Element;
|
|
740
|
+
declare const RadioCard: typeof RadioCardRoot & {
|
|
741
|
+
Group: typeof RadioCardGroup;
|
|
742
|
+
Item: typeof RadioCardItem;
|
|
743
|
+
ErrorMessage: typeof RadioCardErrorMessage;
|
|
744
|
+
displayName: string;
|
|
745
|
+
};
|
|
746
|
+
|
|
678
747
|
type Props$c = {
|
|
679
748
|
/** サイズ */
|
|
680
749
|
size?: 'medium' | 'large';
|
|
@@ -767,8 +836,12 @@ type Props$a = {
|
|
|
767
836
|
onChange?: (option: SelectOption | null) => void;
|
|
768
837
|
/** ドロップダウンリストの幅をトリガーボタンの幅に合わせる */
|
|
769
838
|
matchListToTrigger?: boolean;
|
|
839
|
+
/** トリガーボタンに設定する aria-label。TimePicker 等のコンポジットからラベルを付与するために使用する */
|
|
840
|
+
'aria-label'?: AriaAttributes['aria-label'];
|
|
841
|
+
/** トリガーボタンに設定する aria-describedby。エラーメッセージ等と関連付けるために使用する */
|
|
842
|
+
'aria-describedby'?: AriaAttributes['aria-describedby'];
|
|
770
843
|
};
|
|
771
|
-
declare function Select({ children, size, variant, width, maxWidth, placeholder, placeholderIcon, selectedOption, isDisabled, isError, isOptionSelected, onChange, optionListMaxHeight, matchListToTrigger, }: PropsWithChildren<Props$a>): react.JSX.Element;
|
|
844
|
+
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;
|
|
772
845
|
declare namespace Select {
|
|
773
846
|
var Option: typeof SelectItem;
|
|
774
847
|
}
|
|
@@ -978,6 +1051,74 @@ type TextAreaComponent = ForwardRefExoticComponent<TextAreaProps & RefAttributes
|
|
|
978
1051
|
};
|
|
979
1052
|
declare const TextArea: TextAreaComponent;
|
|
980
1053
|
|
|
1054
|
+
/** TimePicker(および内部の Select)のサイズ */
|
|
1055
|
+
type TimePickerSize = 'x-small' | 'small' | 'medium' | 'large';
|
|
1056
|
+
|
|
1057
|
+
/**
|
|
1058
|
+
* TimePicker のエラーメッセージを表示するコンポーネントのプロパティ
|
|
1059
|
+
*
|
|
1060
|
+
* `isError={true}` の場合にのみレンダリングされる。
|
|
1061
|
+
* `className` プロパティは除外されており、内部スタイルが適用される。
|
|
1062
|
+
*/
|
|
1063
|
+
type TimePickerErrorMessageProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
|
|
1064
|
+
declare const TimePickerErrorMessage: react.ForwardRefExoticComponent<TimePickerErrorMessageProps & react.RefAttributes<HTMLDivElement>>;
|
|
1065
|
+
|
|
1066
|
+
/**
|
|
1067
|
+
* TimePicker のユーティリティ関数・型
|
|
1068
|
+
*
|
|
1069
|
+
* 時刻の候補生成(時 / 分)と、`{ hour, minute }` 構造体 ⇄ `"HH:mm"` 文字列の相互変換を行う。
|
|
1070
|
+
* min/max による範囲制限は「範囲外の候補を生成リストから除外(非表示)」する方針で実装している。
|
|
1071
|
+
*/
|
|
1072
|
+
|
|
1073
|
+
/** TimePicker の value 型。両方 `null` の場合は未入力を表す */
|
|
1074
|
+
type TimeValue = {
|
|
1075
|
+
hour: number | null;
|
|
1076
|
+
minute: number | null;
|
|
1077
|
+
};
|
|
1078
|
+
/** 分候補の刻み。すべて 60 の約数で等間隔に生成できる値のみを許可する */
|
|
1079
|
+
type MinuteStep = 1 | 5 | 10 | 15 | 30;
|
|
1080
|
+
/**
|
|
1081
|
+
* `"HH:mm"` 文字列を `{ hour, minute }` へ変換する。
|
|
1082
|
+
* 形式不正・範囲外(0-23 時 / 0-59 分の範囲外)の場合は `null` を返す。
|
|
1083
|
+
* @example parseTime('09:30') → { hour: 9, minute: 30 }
|
|
1084
|
+
*/
|
|
1085
|
+
declare const parseTime: (time: string) => {
|
|
1086
|
+
hour: number;
|
|
1087
|
+
minute: number;
|
|
1088
|
+
} | null;
|
|
1089
|
+
/**
|
|
1090
|
+
* `{ hour, minute }` を `"HH:mm"` 文字列へ変換する。
|
|
1091
|
+
* 時・分のいずれかが `null`(=未入力)の場合は `null` を返す。
|
|
1092
|
+
* @example formatTime({ hour: 9, minute: 30 }) → '09:30'
|
|
1093
|
+
*/
|
|
1094
|
+
declare const formatTime: (value: TimeValue) => string | null;
|
|
1095
|
+
|
|
1096
|
+
type TimePickerProps = {
|
|
1097
|
+
/** 選択時刻。`hour`・`minute` の両方が `null` の場合は未入力を表す */
|
|
1098
|
+
value: TimeValue;
|
|
1099
|
+
/** 時刻が変更されたときに呼び出されるコールバック関数。各 Select の変更ごとに新しい値を返す */
|
|
1100
|
+
onChange: (value: TimeValue) => void;
|
|
1101
|
+
/** コンポーネントのサイズ。内部の `Select` の size に 1:1 でマッピングされる @default 'medium' */
|
|
1102
|
+
size?: TimePickerSize;
|
|
1103
|
+
/** 分候補の刻み(60 の約数) @default 1 */
|
|
1104
|
+
minuteStep?: MinuteStep;
|
|
1105
|
+
/** 選択可能な最小時刻(`"HH:mm"`・inclusive)。範囲外の候補は非表示になる */
|
|
1106
|
+
minTime?: string;
|
|
1107
|
+
/** 選択可能な最大時刻(`"HH:mm"`・inclusive)。範囲外の候補は非表示になる */
|
|
1108
|
+
maxTime?: string;
|
|
1109
|
+
/** 無効状態かどうか @default false */
|
|
1110
|
+
isDisabled?: boolean;
|
|
1111
|
+
/** エラー状態かどうか。`true` の場合、両方の Select がエラー表示になる @default false */
|
|
1112
|
+
isError?: boolean;
|
|
1113
|
+
/** Compound Component(`TimePicker.ErrorMessage`) */
|
|
1114
|
+
children?: ReactNode;
|
|
1115
|
+
};
|
|
1116
|
+
type TimePickerComponent = ((props: TimePickerProps) => ReactElement) & {
|
|
1117
|
+
ErrorMessage: typeof TimePickerErrorMessage;
|
|
1118
|
+
displayName?: string;
|
|
1119
|
+
};
|
|
1120
|
+
declare const TimePicker: TimePickerComponent;
|
|
1121
|
+
|
|
981
1122
|
type ToastState = 'success' | 'error' | 'warning' | 'information';
|
|
982
1123
|
|
|
983
1124
|
type Props$1 = {
|
|
@@ -1055,4 +1196,4 @@ type TooltipProps = {
|
|
|
1055
1196
|
};
|
|
1056
1197
|
declare function Tooltip({ children, content, size, maxWidth, verticalPosition, horizontalAlign, isDisabledHover, portalTarget, }: TooltipProps): react.JSX.Element;
|
|
1057
1198
|
|
|
1058
|
-
export { Avatar, AvatarGroup, Breadcrumb, Button, Checkbox, type ColorVariant, Combobox, type ComboboxChangeMeta, type ComboboxInputProps, type ComboboxItemProps, type ComboboxListProps, type ComboboxProps, type ComboboxSize, type ComboboxVariant, DatePicker, type DatePickerProps, type DatePickerTimeZone, Divider, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, FileInput, type FileInputRef, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, Radio, type RenderSurplusContext, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, type StepProgress, type StepState, Steps, type StepsOrientation, type StepsProps, type StepsSize, type StepsTextOrientation, type StepsVariant, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, useOutsideClick, useRovingFocus, useToast };
|
|
1199
|
+
export { Avatar, AvatarGroup, Breadcrumb, Button, Checkbox, type ColorVariant, Combobox, type ComboboxChangeMeta, type ComboboxInputProps, type ComboboxItemProps, type ComboboxListProps, type ComboboxProps, type ComboboxSize, type ComboboxVariant, DatePicker, type DatePickerProps, type DatePickerTimeZone, Divider, Dropdown, type DropdownHorizontalAlign, type DropdownItemType, type DropdownVerticalPosition, EvaluationStar, FileInput, type FileInputRef, Heading, Icon, IconButton, Loading, type MinuteStep, Modal, NotificationInline, Pagination, PaginationSelect, PasswordInput, Popover, PopoverContent, type PopoverContextValue, type PopoverPlacement, PopoverTrigger, Popup, Radio, RadioCard, type RadioCardErrorMessageProps, type RadioCardGroupProps, type RadioCardItemProps, type RadioCardProps, type RenderSurplusContext, Search, SegmentedControl, Select, type SelectOption, SelectSort, SortButton, type SortOrder, type StepProgress, type StepState, Steps, type StepsOrientation, type StepsProps, type StepsSize, type StepsTextOrientation, type StepsVariant, Tab, TabItem, Table, TableCell, TableRow, Tag, type TagColor, TextArea, TextInput, TimePicker, type TimePickerProps, type TimeValue, Toast, ToastProvider, Toggle, Tooltip, type UseRovingFocusProps, type UseRovingFocusReturn, formatTime, parseTime, useOutsideClick, useRovingFocus, useToast };
|