ingred-ui 33.1.0 → 33.2.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/README.md +13 -12
- package/dist/components/AdvancedFilter/index.d.ts +1 -1
- package/dist/components/AdvancedFilter/internal/MultiConditionLogicDivider.d.ts +11 -0
- package/dist/components/AdvancedFilter/styled.d.ts +10 -0
- package/dist/components/AdvancedFilter/types.d.ts +9 -0
- package/dist/components/AdvancedFilter/utils/helpers.d.ts +5 -1
- package/dist/components/Banner/styled.d.ts +3 -0
- package/dist/components/Toast/DefaultToast/styled.d.ts +3 -0
- package/dist/components/Toast/constants.d.ts +6 -0
- package/dist/index.es.js +767 -697
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +769 -699
- package/dist/index.js.map +1 -1
- package/dist/lib/react-toast-notification/src/ToastProvider.d.ts +0 -3
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -55,28 +55,29 @@ Storybook: https://ingred-ui.netlify.app/
|
|
|
55
55
|
|
|
56
56
|
## Development
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
Node.js 20 以上を推奨します。パッケージ管理は [pnpm](https://pnpm.io/)(`package.json` の `packageManager`)。**ローカル開発では `make` が `pnpm run` のラッパー**(fluct_ms の client と同様)。CI は従来どおり `ci.mk` を使用します。
|
|
59
59
|
|
|
60
60
|
```bash
|
|
61
61
|
# 初回・依存更新後
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
#
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
62
|
+
make install # または make setup
|
|
63
|
+
|
|
64
|
+
# よく使うコマンド(一覧は make / make help)
|
|
65
|
+
make lint
|
|
66
|
+
make test
|
|
67
|
+
make storybook
|
|
68
|
+
make build-storybook
|
|
69
|
+
make build
|
|
70
|
+
make format
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
+
特定テストだけ実行する例: `make test ARGS='--testPathPattern=Banner'`
|
|
74
|
+
|
|
73
75
|
### 祝日データの更新
|
|
74
76
|
|
|
75
77
|
カレンダーコンポーネントで使用される日本の祝日データは、内閣府が公開しているCSVファイルから自動的に更新されます。
|
|
76
78
|
|
|
77
79
|
```bash
|
|
78
|
-
|
|
79
|
-
pnpm run update-holidays
|
|
80
|
+
make update-holidays
|
|
80
81
|
```
|
|
81
82
|
|
|
82
83
|
詳細な情報については、[scripts/holiday/README.md](./scripts/holiday/README.md) を参照してください。
|
|
@@ -32,4 +32,4 @@ export type { ValueDefinition } from "./utils/values";
|
|
|
32
32
|
export { isRangeOperator, isCustomOperator, isValidFilterConfig, isValidFilterType, generateTagText, generateTagTitle, getTagBoldText, getAvailableTypes, getFilterTypeLabel, buildFilterSlots, getPresetSlotId, isConfiguredFilter, getConfiguredFilters, } from "./utils/helpers";
|
|
33
33
|
export { FilterPositionCalculator } from "./utils/positionCalculator";
|
|
34
34
|
export { ADVANCED_FILTER_CONSTANTS } from "./constants";
|
|
35
|
-
export type { AdvancedFilterProps, FilterType, FilterTypeConfig, FilterConfig, AppliedFilter, OperatorDefinition, AdvancedFilterSize, AdvancedFilterVariant, FilterOperator, FilterInputType, FilterPresetType, AdvancedFilterSelectionMode, FilterSlotView, } from "./types";
|
|
35
|
+
export type { AdvancedFilterProps, FilterType, FilterTypeConfig, FilterConfig, AppliedFilter, OperatorDefinition, AdvancedFilterSize, AdvancedFilterVariant, FilterOperator, FilterInputType, FilterPresetType, AdvancedFilterSelectionMode, FilterSlotView, MultiConditionLogic, } from "./types";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* MultiConditionLogicDivider - 複数条件フィルタの条件間区切り
|
|
3
|
+
*
|
|
4
|
+
* 条件と条件の間に AND / OR バッジと水平線を表示する。
|
|
5
|
+
*/
|
|
6
|
+
import React from "react";
|
|
7
|
+
import { MultiConditionLogic } from "../types";
|
|
8
|
+
export type MultiConditionLogicDividerProps = {
|
|
9
|
+
logic: MultiConditionLogic;
|
|
10
|
+
};
|
|
11
|
+
export declare const MultiConditionLogicDivider: React.FC<MultiConditionLogicDividerProps>;
|
|
@@ -143,6 +143,16 @@ export declare const FilterTypeName: import("styled-components/dist/types").ISty
|
|
|
143
143
|
* コンテンツエリア
|
|
144
144
|
*/
|
|
145
145
|
export declare const Content: 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;
|
|
146
|
+
/**
|
|
147
|
+
* 複数条件フィルタの条件見出し
|
|
148
|
+
*/
|
|
149
|
+
export declare const MultiConditionHeader: 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;
|
|
150
|
+
export declare const MultiConditionHeaderLabel: 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;
|
|
151
|
+
/**
|
|
152
|
+
* 複数条件フィルタの条件間区切り(AND / OR バッジ + 水平線)
|
|
153
|
+
*/
|
|
154
|
+
export declare const MultiConditionLogicDividerContainer: 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;
|
|
155
|
+
export declare const MultiConditionLogicDividerLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>>> & string;
|
|
146
156
|
/**
|
|
147
157
|
* セクション
|
|
148
158
|
*/
|
|
@@ -53,6 +53,8 @@ export type ValueDefinition = {
|
|
|
53
53
|
value: string | boolean;
|
|
54
54
|
label: string;
|
|
55
55
|
};
|
|
56
|
+
/** 複数条件フィルタ内の条件結合ロジック */
|
|
57
|
+
export type MultiConditionLogic = "and" | "or";
|
|
56
58
|
/**
|
|
57
59
|
* 1つのフィルタタイプで複数のフィルタリング条件を設定するための設定定義
|
|
58
60
|
* 例: 複合フィルタで「性別」と「年齢」の2つの条件を設定
|
|
@@ -112,6 +114,13 @@ export type FilterTypeConfig = {
|
|
|
112
114
|
};
|
|
113
115
|
/** このフィルタタイプで設定可能な複数条件の設定(複数条件フィルタ用) */
|
|
114
116
|
multiConditionConfigs?: MultiFilterConditionConfig[];
|
|
117
|
+
/**
|
|
118
|
+
* 複数条件フィルタ内の条件結合ロジック(区切り線バッジの表示用)
|
|
119
|
+
* - "and" または未指定: AND(デフォルト)
|
|
120
|
+
* - "or": OR
|
|
121
|
+
* 注: 現時点のフィルタ評価は AND 固定。OR は表示のみ対応。
|
|
122
|
+
*/
|
|
123
|
+
multiConditionLogic?: MultiConditionLogic;
|
|
115
124
|
/** 日付の表示フォーマット(dayjs形式)。指定時は Tag と DatePicker で同一フォーマット。未指定は YYYY-MM-DD */
|
|
116
125
|
dateFormat?: string;
|
|
117
126
|
};
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
* - タグ表示: タグのテキスト・タイトル生成
|
|
12
12
|
* - バリデーション: フィルター設定・タイプの有効性チェック
|
|
13
13
|
*/
|
|
14
|
-
import { AppliedFilter, FilterConfig, FilterInputType, FilterSlotView, FilterTypeConfig, MultiFilterConditionConfig, OperatorDefinition, ValueDefinition } from "../types";
|
|
14
|
+
import { AppliedFilter, FilterConfig, FilterInputType, FilterSlotView, FilterTypeConfig, MultiConditionLogic, MultiFilterConditionConfig, OperatorDefinition, ValueDefinition } from "../types";
|
|
15
15
|
/**
|
|
16
16
|
* 範囲指定が必要なオペレーターかどうかを判定
|
|
17
17
|
* @param operator オペレーターのvalue
|
|
@@ -121,6 +121,10 @@ export declare const hasMultiConditions: (filterConfig?: FilterTypeConfig) => bo
|
|
|
121
121
|
* 複数条件設定を取得する
|
|
122
122
|
*/
|
|
123
123
|
export declare const getMultiConditionConfigs: (filterConfig?: FilterTypeConfig) => MultiFilterConditionConfig[];
|
|
124
|
+
/**
|
|
125
|
+
* 複数条件フィルタ内の条件結合ロジックを取得する
|
|
126
|
+
*/
|
|
127
|
+
export declare const getMultiConditionLogic: (filterConfig?: FilterTypeConfig) => MultiConditionLogic;
|
|
124
128
|
/**
|
|
125
129
|
* 条件キーから条件設定を取得する
|
|
126
130
|
*/
|
|
@@ -8,6 +8,9 @@ type ContentWrapperProps = {
|
|
|
8
8
|
size: BannerSize;
|
|
9
9
|
};
|
|
10
10
|
export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never>>> & string;
|
|
11
|
+
/** 左アイコン — 狭い幅でも flex で縮まない */
|
|
12
|
+
export declare const IconSlot: 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;
|
|
11
13
|
export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & ContentWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "size"> & ContentWrapperProps, never>>> & string;
|
|
14
|
+
export declare const Message: 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;
|
|
12
15
|
export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>> & string;
|
|
13
16
|
export {};
|
|
@@ -12,6 +12,9 @@ type ContainerProps = {
|
|
|
12
12
|
opacity: number;
|
|
13
13
|
};
|
|
14
14
|
export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ContainerProps> & ContainerProps, never>>> & string;
|
|
15
|
+
/** アイコン・文言・閉じるボタン行(master の行高基準) */
|
|
16
|
+
export declare const Body: 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;
|
|
17
|
+
export declare const Message: 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;
|
|
15
18
|
export declare const IconContainer: 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;
|
|
16
19
|
export declare const CloseIconContainer: 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;
|
|
17
20
|
type CountdownProps = {
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/** ToastContainer の gutter(8px)×2 分だけビューポートから引く */
|
|
2
|
+
export declare const TOAST_VIEWPORT_INLINE_INSET_PX: number;
|
|
3
|
+
export declare const TOAST_MAX_WIDTH_PX = 800;
|
|
4
|
+
export declare const TOAST_MIN_WIDTH_PX = 400;
|
|
5
|
+
export declare const TOAST_MIN_HEIGHT_PX = 64;
|
|
6
|
+
export declare const toastInlineMaxWidth = "min(800px, calc(100vw - 16px))";
|