ingred-ui 23.20.1 → 23.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.
Files changed (35) hide show
  1. package/README.md +13 -0
  2. package/dist/components/Calendar/Calendar/Calendar.d.ts +10 -10
  3. package/dist/components/Calendar/Calendar/Calendar.stories.d.ts +1 -1
  4. package/dist/components/Calendar/Calendar/internal/Day/Day.d.ts +3 -0
  5. package/dist/components/Calendar/Calendar/internal/Day/styled.d.ts +12 -6
  6. package/dist/components/Calendar/CalendarRange/CalendarRange.d.ts +22 -23
  7. package/dist/components/Calendar/CalendarRange/CalendarRange.stories.d.ts +2 -2
  8. package/dist/components/Calendar/CalendarRange/constants.d.ts +1 -0
  9. package/dist/components/Calendar/CalendarRange/internal/Day/Day.d.ts +3 -0
  10. package/dist/components/Calendar/CalendarRange/internal/Day/styled.d.ts +15 -6
  11. package/dist/components/Calendar/CalendarRange/utils.d.ts +1 -1
  12. package/dist/components/Calendar/hooks/useCalendarPagination.d.ts +12 -0
  13. package/dist/components/Calendar/internal/Actions/styled.d.ts +1 -0
  14. package/dist/components/Calendar/internal/InnerCalendar/InnerCalendar.d.ts +3 -0
  15. package/dist/components/Calendar/internal/InnerCalendarRange/InnerCalendarRange.d.ts +8 -2
  16. package/dist/components/Calendar/styled.d.ts +19 -0
  17. package/dist/components/Calendar/utils/dateHelpers.d.ts +33 -0
  18. package/dist/components/Calendar/utils/dayInfo.d.ts +16 -0
  19. package/dist/components/Checkbox/Checkbox.stories.d.ts +1 -1
  20. package/dist/components/Input/Input.d.ts +16 -0
  21. package/dist/components/Input/Input.stories.d.ts +1 -0
  22. package/dist/components/Input/styled.d.ts +7 -0
  23. package/dist/components/Input/types.d.ts +1 -0
  24. package/dist/components/Popover/Popover.d.ts +1 -1
  25. package/dist/components/Popover/Popover.stories.d.ts +1 -1
  26. package/dist/components/Tooltip/Tooltip.d.ts +1 -1
  27. package/dist/components/Tooltip/Tooltip.stories.d.ts +1 -1
  28. package/dist/constants/locale.d.ts +2 -0
  29. package/dist/index.es.js +703 -560
  30. package/dist/index.es.js.map +1 -1
  31. package/dist/index.js +712 -569
  32. package/dist/index.js.map +1 -1
  33. package/dist/utils/holidayData.d.ts +34 -0
  34. package/dist/utils/index.d.ts +1 -0
  35. package/package.json +3 -2
package/README.md CHANGED
@@ -53,6 +53,19 @@ import "react-dates/lib/css/_datepicker.css";
53
53
 
54
54
  Storybook: https://ingred-ui.netlify.app/
55
55
 
56
+ ## Development
57
+
58
+ ### 祝日データの更新
59
+
60
+ カレンダーコンポーネントで使用される日本の祝日データは、内閣府が公開しているCSVファイルから自動的に更新されます。
61
+
62
+ ```bash
63
+ # 手動で祝日データを更新
64
+ yarn update-holidays
65
+ ```
66
+
67
+ 詳細な情報については、[scripts/holiday/README.md](./scripts/holiday/README.md) を参照してください。
68
+
56
69
  ## License
57
70
 
58
71
  MIT © [CARTA HOLDINGS, Inc.](https://github.com/voyagegroup)
@@ -16,6 +16,11 @@ export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
16
16
  * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
17
17
  */
18
18
  weekList?: string[];
19
+ /**
20
+ * 週の開始日 (0=日曜日, 1=月曜日, 2=火曜日, ...)
21
+ * @default 0
22
+ */
23
+ weekStart?: number;
19
24
  /**
20
25
  * デフォルトで選択されているアクション
21
26
  */
@@ -28,11 +33,6 @@ export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
28
33
  * アクションをクリックしたときの挙動
29
34
  */
30
35
  onClickAction?: (action: Action) => void;
31
- /**
32
- * 閉じるボタンを押したときの振る舞い
33
- * この関数が渡されてないときは、閉じるボタンが表示されない
34
- */
35
- onClickCloseButton?: () => void;
36
36
  /**
37
37
  * 選択可能なカレンダーの領域を制限する
38
38
  * true が返る場合は、選択不可となる
@@ -59,6 +59,11 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
59
59
  * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
60
60
  */
61
61
  weekList?: string[] | undefined;
62
+ /**
63
+ * 週の開始日 (0=日曜日, 1=月曜日, 2=火曜日, ...)
64
+ * @default 0
65
+ */
66
+ weekStart?: number | undefined;
62
67
  /**
63
68
  * デフォルトで選択されているアクション
64
69
  */
@@ -71,11 +76,6 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
71
76
  * アクションをクリックしたときの挙動
72
77
  */
73
78
  onClickAction?: ((action: Action) => void) | undefined;
74
- /**
75
- * 閉じるボタンを押したときの振る舞い
76
- * この関数が渡されてないときは、閉じるボタンが表示されない
77
- */
78
- onClickCloseButton?: (() => void) | undefined;
79
79
  /**
80
80
  * 選択可能なカレンダーの領域を制限する
81
81
  * true が返る場合は、選択不可となる
@@ -8,10 +8,10 @@ declare const _default: {
8
8
  date: dayjs.Dayjs;
9
9
  monthFormat?: string | undefined;
10
10
  weekList?: string[] | undefined;
11
+ weekStart?: number | undefined;
11
12
  defaultClickAction?: string | undefined;
12
13
  actions?: import("../internal/Actions").Action[] | undefined;
13
14
  onClickAction?: ((action: import("../internal/Actions").Action) => void) | undefined;
14
- onClickCloseButton?: (() => void) | undefined;
15
15
  isOutsideRange?: ((date: dayjs.Dayjs) => boolean) | undefined;
16
16
  onDateChange: (value: dayjs.Dayjs) => void;
17
17
  } & React.RefAttributes<HTMLDivElement>>>;
@@ -6,6 +6,9 @@ type Props = {
6
6
  value: Dayjs;
7
7
  onClickDate?: (newDate: Dayjs) => void;
8
8
  children: ReactNode;
9
+ isSaturday?: boolean;
10
+ isSundayOrHoliday?: boolean;
11
+ isToday?: boolean;
9
12
  };
10
13
  export declare const Day: FC<Props>;
11
14
  export {};
@@ -1,6 +1,12 @@
1
- export declare const DayContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
2
- selected?: boolean | undefined;
3
- }, never>;
4
- export declare const DisableDayContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
5
- selected?: boolean | undefined;
6
- }, never>;
1
+ type DayContainerProps = {
2
+ selected?: boolean;
3
+ isSaturday?: boolean;
4
+ isSundayOrHoliday?: boolean;
5
+ isToday?: boolean;
6
+ };
7
+ export declare const DayContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
8
+ isToday?: boolean | undefined;
9
+ } & DayContainerProps, never>;
10
+ export declare const DayStyle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, DayContainerProps, never>;
11
+ export declare const DisableDayContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, DayContainerProps, never>;
12
+ export {};
@@ -1,8 +1,7 @@
1
- import { Dayjs } from "dayjs";
1
+ import dayjs, { Dayjs } from "dayjs";
2
2
  import { DateRange } from "../..";
3
3
  import React from "react";
4
4
  import { Action } from "../internal/Actions";
5
- import { ClickStateType } from "./constants";
6
5
  export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
7
6
  /**
8
7
  * 開始日
@@ -23,6 +22,11 @@ export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
23
22
  * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
24
23
  */
25
24
  weekList?: string[];
25
+ /**
26
+ * 週の開始日 (0=日曜日, 1=月曜日, 2=火曜日, ...)
27
+ * @default 0
28
+ */
29
+ weekStart?: number;
26
30
  /**
27
31
  * デフォルトで選択されているアクション
28
32
  */
@@ -38,12 +42,7 @@ export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
38
42
  /**
39
43
  * 親コンポーネントで calendar を任意のタイミングで閉じたい場合に使用する
40
44
  */
41
- onClose?: (clickState: ClickStateType) => void;
42
- /**
43
- * 閉じるボタンを押したときの振る舞い
44
- * この関数が渡されてないときは、閉じるボタンが表示されない
45
- */
46
- onClickCloseButton?: () => void;
45
+ onClose?: (clickState: any) => void;
47
46
  /**
48
47
  * 選択可能なカレンダーの領域を制限する
49
48
  * true が返る場合は、選択不可となる
@@ -80,6 +79,11 @@ export declare const CalendarRange: React.ForwardRefExoticComponent<React.HTMLAt
80
79
  * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
81
80
  */
82
81
  weekList?: string[] | undefined;
82
+ /**
83
+ * 週の開始日 (0=日曜日, 1=月曜日, 2=火曜日, ...)
84
+ * @default 0
85
+ */
86
+ weekStart?: number | undefined;
83
87
  /**
84
88
  * デフォルトで選択されているアクション
85
89
  */
@@ -95,12 +99,7 @@ export declare const CalendarRange: React.ForwardRefExoticComponent<React.HTMLAt
95
99
  /**
96
100
  * 親コンポーネントで calendar を任意のタイミングで閉じたい場合に使用する
97
101
  */
98
- onClose?: ((clickState: ClickStateType) => void) | undefined;
99
- /**
100
- * 閉じるボタンを押したときの振る舞い
101
- * この関数が渡されてないときは、閉じるボタンが表示されない
102
- */
103
- onClickCloseButton?: (() => void) | undefined;
102
+ onClose?: ((clickState: any) => void) | undefined;
104
103
  /**
105
104
  * 選択可能なカレンダーの領域を制限する
106
105
  * true が返る場合は、選択不可となる
@@ -118,12 +117,12 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
118
117
  * 開始日
119
118
  * @default dayjs()
120
119
  */
121
- startDate: Dayjs;
120
+ startDate: dayjs.Dayjs;
122
121
  /**
123
122
  * 終了日
124
123
  * @default dayjs()
125
124
  */
126
- endDate: Dayjs;
125
+ endDate: dayjs.Dayjs;
127
126
  /**
128
127
  * カレンダーに表示する年月のフォーマット
129
128
  */
@@ -133,6 +132,11 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
133
132
  * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
134
133
  */
135
134
  weekList?: string[] | undefined;
135
+ /**
136
+ * 週の開始日 (0=日曜日, 1=月曜日, 2=火曜日, ...)
137
+ * @default 0
138
+ */
139
+ weekStart?: number | undefined;
136
140
  /**
137
141
  * デフォルトで選択されているアクション
138
142
  */
@@ -148,18 +152,13 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
148
152
  /**
149
153
  * 親コンポーネントで calendar を任意のタイミングで閉じたい場合に使用する
150
154
  */
151
- onClose?: ((clickState: ClickStateType) => void) | undefined;
152
- /**
153
- * 閉じるボタンを押したときの振る舞い
154
- * この関数が渡されてないときは、閉じるボタンが表示されない
155
- */
156
- onClickCloseButton?: (() => void) | undefined;
155
+ onClose?: ((clickState: any) => void) | undefined;
157
156
  /**
158
157
  * 選択可能なカレンダーの領域を制限する
159
158
  * true が返る場合は、選択不可となる
160
159
  * @default () => false
161
160
  */
162
- isOutsideRange?: ((date: Dayjs) => boolean) | undefined;
161
+ isOutsideRange?: ((date: dayjs.Dayjs) => boolean) | undefined;
163
162
  /**
164
163
  * 日付が変更されたときに呼ばれる関数
165
164
  */
@@ -9,11 +9,11 @@ declare const _default: {
9
9
  endDate: dayjs.Dayjs;
10
10
  monthFormat?: string | undefined;
11
11
  weekList?: string[] | undefined;
12
+ weekStart?: number | undefined;
12
13
  defaultClickAction?: string | undefined;
13
14
  actions?: import("../internal/Actions").Action[] | undefined;
14
15
  onClickAction?: ((action: import("../internal/Actions").Action) => void) | undefined;
15
- onClose?: ((clickState: import("./constants").ClickStateType) => void) | undefined;
16
- onClickCloseButton?: (() => void) | undefined;
16
+ onClose?: ((clickState: any) => void) | undefined;
17
17
  isOutsideRange?: ((date: dayjs.Dayjs) => boolean) | undefined;
18
18
  onDatesChange: (dates: import("./CalendarRange").DateRange) => void;
19
19
  } & React.RefAttributes<HTMLDivElement>>>;
@@ -1,6 +1,7 @@
1
1
  export declare const DayState: {
2
2
  readonly NONE: "none";
3
3
  readonly START: "start";
4
+ readonly START_ONLY: "start_only";
4
5
  readonly END: "end";
5
6
  readonly BETWEEN: "between";
6
7
  };
@@ -7,6 +7,9 @@ type Props = {
7
7
  selectable: boolean;
8
8
  onClickDate?: (value: Dayjs) => void;
9
9
  children: ReactNode;
10
+ isSaturday?: boolean;
11
+ isSundayOrHoliday?: boolean;
12
+ isToday?: boolean;
10
13
  };
11
14
  export declare const Day: FC<Props>;
12
15
  export {};
@@ -1,6 +1,15 @@
1
- export declare const DayContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
2
- export declare const DayStyle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
3
- export declare const DayStart: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
4
- export declare const DayEnd: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
5
- export declare const DayBetween: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
6
- export declare const DisableDayContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
1
+ type DayContainerProps = {
2
+ isSaturday?: boolean;
3
+ isSundayOrHoliday?: boolean;
4
+ isToday?: boolean;
5
+ };
6
+ export declare const DayContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
7
+ isToday?: boolean | undefined;
8
+ } & DayContainerProps, never>;
9
+ export declare const DayStyle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, DayContainerProps, never>;
10
+ export declare const DayStartOnly: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, DayContainerProps, never>;
11
+ export declare const DayStart: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, DayContainerProps, never>;
12
+ export declare const DayEnd: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, DayContainerProps, never>;
13
+ export declare const DayBetween: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, DayContainerProps, never>;
14
+ export declare const DisableDayContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, DayContainerProps, never>;
15
+ export {};
@@ -1,2 +1,2 @@
1
1
  import { Dayjs } from "dayjs";
2
- export declare const getDayState: (startDate: Dayjs | null, endDate: Dayjs | null, month: Dayjs, day: number) => "none" | "end" | "start" | "between";
2
+ export declare const getDayState: (startDate: Dayjs, endDate: Dayjs, month: Dayjs, day: number) => "none" | "end" | "start" | "start_only" | "between";
@@ -0,0 +1,12 @@
1
+ import { Dayjs } from "dayjs";
2
+ /**
3
+ * カレンダーの左右矢印でのページ移動を管理するhook
4
+ * @param initialDate 初期表示する日付
5
+ * @returns 現在の月、前の月に移動、次の月に移動の関数
6
+ */
7
+ export declare const useCalendarPagination: (initialDate: Dayjs) => {
8
+ currentMonth: Dayjs;
9
+ goToPreviousMonth: () => void;
10
+ goToNextMonth: () => void;
11
+ goToMonth: (month: Dayjs) => void;
12
+ };
@@ -8,3 +8,4 @@ export declare const ActionsContainer: import("styled-components").StyledCompone
8
8
  minHeight?: import("csstype").Property.MinHeight<0 | (string & {})> | undefined;
9
9
  children: import("react").ComponentElement<HTMLElement, any>;
10
10
  } & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
11
+ export declare const ActionsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -4,11 +4,14 @@ type Props = {
4
4
  date: Dayjs;
5
5
  monthFormat?: string;
6
6
  weekList?: string[];
7
+ weekStart?: number;
7
8
  current: Dayjs;
8
9
  yearIsOpen: boolean;
9
10
  onYearIsOpen: (yearIsOpen: boolean) => void;
10
11
  isOutsideRange: (date: Dayjs) => boolean;
11
12
  onDateChange: (value: Dayjs) => void;
13
+ onPreviousMonth: () => void;
14
+ onNextMonth: () => void;
12
15
  };
13
16
  export declare const InnerCalendar: React.FC<Props>;
14
17
  export {};
@@ -5,11 +5,17 @@ type Props = {
5
5
  endDate: Dayjs;
6
6
  monthFormat?: string;
7
7
  weekList?: string[];
8
+ weekStart?: number;
8
9
  current: Dayjs;
9
10
  yearIsOpen: boolean;
10
- onYearIsOpen: (yearIsOpen: boolean) => void;
11
11
  isOutsideRange: (date: Dayjs) => boolean;
12
- onDateChange: (value: Dayjs) => void;
12
+ onDatesChange: (dates: {
13
+ startDate: Dayjs;
14
+ endDate: Dayjs;
15
+ }) => void;
16
+ onPreviousMonth: () => void;
17
+ onNextMonth: () => void;
18
+ onTodayClick: () => void;
13
19
  };
14
20
  export declare const InnerCalendarRange: React.FC<Props>;
15
21
  export {};
@@ -17,3 +17,22 @@ export declare const IconContainer: import("styled-components").StyledComponent<
17
17
  export declare const IconButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
18
18
  expanded: boolean;
19
19
  }, never>;
20
+ export declare const NavigationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
21
+ export declare const CalendarLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
22
+ type TodayIndicatorProps = {
23
+ isToday?: boolean;
24
+ };
25
+ export type BaseDayProps = {
26
+ isSaturday?: boolean;
27
+ isSundayOrHoliday?: boolean;
28
+ isToday?: boolean;
29
+ };
30
+ export declare const BaseDayButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, BaseDayProps, never>;
31
+ export declare const BaseDisableDay: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, BaseDayProps, never>;
32
+ export declare const getBaseDayColor: ({ isSaturday, isSundayOrHoliday, theme, }: {
33
+ isSaturday?: boolean | undefined;
34
+ isSundayOrHoliday?: boolean | undefined;
35
+ theme: any;
36
+ }) => any;
37
+ export declare const TodayIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TodayIndicatorProps, never>;
38
+ export {};
@@ -0,0 +1,33 @@
1
+ import { Dayjs } from "dayjs";
2
+ /**
3
+ * 今日の日付かどうかを判定する
4
+ */
5
+ export declare const isToday: (date: Dayjs) => boolean;
6
+ /**
7
+ * カレンダーの日付を生成する
8
+ */
9
+ export declare const createCalendarDate: (current: Dayjs, day: number) => Dayjs;
10
+ /**
11
+ * 日付の情報を取得する(曜日、祝日判定など)
12
+ */
13
+ export declare const getDateInfo: (date: Dayjs) => {
14
+ dayOfWeek: number;
15
+ isSunday: boolean;
16
+ isSaturday: boolean;
17
+ isHoliday: boolean;
18
+ isSundayOrHoliday: boolean;
19
+ };
20
+ /**
21
+ * 日付が選択可能かどうかを判定する
22
+ */
23
+ export declare const isDateSelectable: (date: Dayjs, isOutsideRange: (date: Dayjs) => boolean) => boolean;
24
+ /**
25
+ * カレンダーの日付配列を生成する
26
+ */
27
+ export declare const generateCalendarDays: (current: Dayjs) => number[];
28
+ /**
29
+ * 月の開始曜日までの空白日数を取得する
30
+ * @param current 現在の月
31
+ * @param weekStart 週の開始日 (0=日曜日, 1=月曜日, 2=火曜日, ...)
32
+ */
33
+ export declare const getEmptyDaysCount: (current: Dayjs, weekStart?: number) => number;
@@ -0,0 +1,16 @@
1
+ import { Dayjs } from "dayjs";
2
+ /**
3
+ * 日本の祝日を判定する関数
4
+ * 内閣府の公式CSVデータを使用
5
+ */
6
+ export declare const isJapaneseHoliday: (date: Dayjs) => boolean;
7
+ /**
8
+ * 日付の曜日と祝日情報を取得する関数
9
+ */
10
+ export declare const getDayInfo: (date: Dayjs) => {
11
+ dayOfWeek: number;
12
+ isSunday: boolean;
13
+ isSaturday: boolean;
14
+ isHoliday: boolean;
15
+ isSundayOrHoliday: boolean;
16
+ };
@@ -284,7 +284,7 @@ declare const _default: {
284
284
  accept?: string | undefined;
285
285
  capture?: boolean | "user" | "environment" | undefined;
286
286
  checked?: boolean | undefined;
287
- enterKeyHint?: "search" | "enter" | "next" | "done" | "go" | "previous" | "send" | undefined;
287
+ enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
288
288
  list?: string | undefined;
289
289
  maxLength?: number | undefined;
290
290
  minLength?: number | undefined;
@@ -44,6 +44,22 @@ export type InputProps = (React.ComponentPropsWithoutRef<"input"> | React.Compon
44
44
  * 幅を明示的に指定
45
45
  */
46
46
  width?: string | number;
47
+ /**
48
+ * 前方アイコン(左側)
49
+ */
50
+ prepend?: React.ReactNode;
51
+ /**
52
+ * 後方アイコン(右側)
53
+ */
54
+ append?: React.ReactNode;
55
+ /**
56
+ * 前方アイコンクリック時のハンドラ(指定時のみクリック可能)
57
+ */
58
+ onPrependClick?: () => void;
59
+ /**
60
+ * 後方アイコンクリック時のハンドラ(指定時のみクリック可能)
61
+ */
62
+ onAppendClick?: () => void;
47
63
  };
48
64
  declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
49
65
  export default Input;
@@ -22,3 +22,4 @@ export declare const Variants: StoryObj<InputProps>;
22
22
  export declare const FullWidth: StoryObj<InputProps>;
23
23
  export declare const WithWidth: StoryObj<InputProps>;
24
24
  export declare const Textarea: StoryObj<InputProps>;
25
+ export declare const WithIcons: StoryObj<InputProps>;
@@ -1,5 +1,10 @@
1
1
  /// <reference types="react" />
2
2
  import { InputSize, InputVariant } from "./types";
3
+ export declare const InputContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
4
+ export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
5
+ position: "start" | "end";
6
+ clickable: boolean;
7
+ }, never>;
3
8
  export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
4
9
  $error: boolean;
5
10
  width?: string | number | undefined;
@@ -8,5 +13,7 @@ export declare const Input: import("styled-components").StyledComponent<"input",
8
13
  $variant?: InputVariant | undefined;
9
14
  $fullWidth?: boolean | undefined;
10
15
  $isFocused?: boolean | undefined;
16
+ $hasStartIcon?: boolean | undefined;
17
+ $hasEndIcon?: boolean | undefined;
11
18
  as?: string | import("react").ComponentType<any> | undefined;
12
19
  }, never>;
@@ -6,6 +6,7 @@ export type InputSizeConfig = {
6
6
  fontSize: string;
7
7
  padding: string;
8
8
  borderRadius: string;
9
+ iconSize: number;
9
10
  };
10
11
  export declare const TEXTAREA_PADDING = "8px";
11
12
  export declare const INPUT_SIZES: Record<InputSize, InputSizeConfig>;
@@ -32,7 +32,7 @@ declare const Popover: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLPr
32
32
  * Define priority of position. Please check [this](https://floating-ui.com/docs/tutorial#placements).
33
33
  * If not specified, it will be auto.
34
34
  */
35
- positionPriority?: ("auto" | "auto-start" | "auto-end" | Placement)[] | undefined;
35
+ positionPriority?: ("auto" | Placement | "auto-start" | "auto-end")[] | undefined;
36
36
  offset?: [number, number] | undefined;
37
37
  /**
38
38
  * props of [Modal](/?path=/docs/components-utils-modal)
@@ -7,7 +7,7 @@ declare const _default: {
7
7
  isOpen?: boolean | undefined;
8
8
  onClose?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>, reason: "backdropClick") => void) | undefined;
9
9
  baseElement: HTMLElement | null;
10
- positionPriority?: ("auto" | "auto-start" | "auto-end" | import("@floating-ui/utils").Placement)[] | undefined;
10
+ positionPriority?: ("auto" | import("@floating-ui/utils").Placement | "auto-start" | "auto-end")[] | undefined;
11
11
  offset?: [number, number] | undefined;
12
12
  modalProps?: Partial<import("..").ModalProps> | undefined;
13
13
  children: React.ComponentElement<HTMLElement, any>;
@@ -30,7 +30,7 @@ declare const Tooltip: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedH
30
30
  /**
31
31
  * Define priority of position. Please check [this](https://floating-ui.com/docs/tutorial#placements).
32
32
  */
33
- positionPriority?: ("auto" | "auto-start" | "auto-end" | Placement)[] | undefined;
33
+ positionPriority?: ("auto" | Placement | "auto-start" | "auto-end")[] | undefined;
34
34
  offset?: [number, number] | undefined;
35
35
  width?: string | undefined;
36
36
  disabled?: boolean | undefined;
@@ -9,7 +9,7 @@ declare const _default: {
9
9
  disableHoverListener?: boolean | undefined;
10
10
  enterDelay?: number | undefined;
11
11
  leaveDelay?: number | undefined;
12
- positionPriority?: ("auto" | "auto-start" | "auto-end" | import("@floating-ui/utils").Placement)[] | undefined;
12
+ positionPriority?: ("auto" | import("@floating-ui/utils").Placement | "auto-start" | "auto-end")[] | undefined;
13
13
  offset?: [number, number] | undefined;
14
14
  width?: string | undefined;
15
15
  disabled?: boolean | undefined;
@@ -39,11 +39,13 @@ export interface Localization {
39
39
  DatePicker?: {
40
40
  defaultProps: Pick<DatePickerProps, "monthFormat"> & {
41
41
  weekList: string[];
42
+ weekStart: number;
42
43
  };
43
44
  };
44
45
  DateRangePicker?: {
45
46
  defaultProps: Pick<DatePickerProps, "monthFormat"> & {
46
47
  weekList: string[];
48
+ weekStart: number;
47
49
  };
48
50
  };
49
51
  WeekTime?: {