ingred-ui 33.9.0 → 33.11.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 (34) hide show
  1. package/dist/components/AdvancedFilter/internal/CheckboxValueInput.d.ts +1 -0
  2. package/dist/components/AdvancedFilter/internal/ConfigPanelValueInput.d.ts +2 -0
  3. package/dist/components/AdvancedFilter/internal/DateRangeInput.d.ts +2 -0
  4. package/dist/components/AdvancedFilter/internal/RadioValueInput.d.ts +1 -0
  5. package/dist/components/AdvancedFilter/internal/TextValueInput.d.ts +1 -0
  6. package/dist/components/AdvancedFilter/types.d.ts +8 -0
  7. package/dist/components/AdvancedFilter/utils/helpers.d.ts +10 -0
  8. package/dist/components/Chart/BarChart/BarChart.d.ts +4 -0
  9. package/dist/components/Chart/BarChart/index.d.ts +3 -0
  10. package/dist/components/Chart/BarChart/types.d.ts +36 -0
  11. package/dist/components/Chart/__tests__/chart.test.d.ts +1 -0
  12. package/dist/components/Chart/index.d.ts +4 -0
  13. package/dist/components/Chart/internal/ChartAxis.d.ts +29 -0
  14. package/dist/components/Chart/internal/ChartLegend.d.ts +9 -0
  15. package/dist/components/Chart/internal/ChartTooltip.d.ts +13 -0
  16. package/dist/components/Chart/internal/barWidthRatio.d.ts +6 -0
  17. package/dist/components/Chart/internal/getBarSegments.d.ts +5 -0
  18. package/dist/components/Chart/internal/getChartLayout.d.ts +43 -0
  19. package/dist/components/Chart/internal/resolveSeries.d.ts +5 -0
  20. package/dist/components/Chart/internal/styled.d.ts +32 -0
  21. package/dist/components/Chart/internal/useChartContainerWidth.d.ts +5 -0
  22. package/dist/components/Chart/internal/utils/index.d.ts +1 -0
  23. package/dist/components/Chart/internal/utils/scale.d.ts +2 -0
  24. package/dist/components/Chart/types.d.ts +27 -0
  25. package/dist/components/DateField/constants.d.ts +1 -1
  26. package/dist/components/index.d.ts +1 -0
  27. package/dist/index.es.js +884 -823
  28. package/dist/index.es.js.map +1 -1
  29. package/dist/index.js +844 -783
  30. package/dist/index.js.map +1 -1
  31. package/dist/themes/getChartPalette.d.ts +4 -0
  32. package/dist/themes/index.d.ts +2 -1
  33. package/dist/themes/palette.d.ts +38 -0
  34. package/package.json +1 -1
@@ -25,6 +25,7 @@ export type CheckboxValueInputProps = {
25
25
  selectedValues: (string | boolean)[];
26
26
  /** チェックボックスの状態が変更されたときのコールバック */
27
27
  onValueToggle: (value: string | boolean, checked: boolean) => void;
28
+ disabled?: boolean;
28
29
  };
29
30
  /**
30
31
  * チェックボックス形式の値入力コンポーネント
@@ -58,6 +58,8 @@ export type ConfigPanelValueInputProps = {
58
58
  isRangeOperator: (operator: string) => boolean;
59
59
  /** テキスト入力要素への ref(inputType=text 時のみ使用) */
60
60
  textInputRef?: React.Ref<HTMLInputElement>;
61
+ /** 入力を無効化する */
62
+ disabled?: boolean;
61
63
  };
62
64
  /**
63
65
  * 値入力統合コンポーネント
@@ -26,6 +26,8 @@ export type DateRangeInputProps = {
26
26
  onEndDateChange: (dateString: string) => void;
27
27
  /** 日付の表示フォーマット(dayjsのformat形式) @default YYYY-MM-DD */
28
28
  format?: string;
29
+ /** 入力を無効化する */
30
+ disabled?: boolean;
29
31
  };
30
32
  /**
31
33
  * 日付範囲入力コンポーネント
@@ -25,6 +25,7 @@ export type RadioValueInputProps = {
25
25
  selectedRadioValue: string | boolean;
26
26
  /** ラジオボタンの選択が変更されたときのコールバック */
27
27
  onRadioChange: (value: string | boolean) => void;
28
+ disabled?: boolean;
28
29
  };
29
30
  /**
30
31
  * ラジオボタン形式の値入力コンポーネント
@@ -39,6 +39,7 @@ export type TextValueInputProps = {
39
39
  format?: string;
40
40
  /** テキスト入力要素への ref(inputType=text 時のみ使用) */
41
41
  inputRef?: React.Ref<HTMLInputElement>;
42
+ disabled?: boolean;
42
43
  };
43
44
  /**
44
45
  * テキスト/日付入力コンポーネント
@@ -104,6 +104,14 @@ export type MultiFilterConditionConfig = {
104
104
  * - false: 任意(空でも適用可能)
105
105
  */
106
106
  required?: boolean;
107
+ /**
108
+ * 他条件の選択値に応じてこの条件を活性化する。
109
+ * 未指定時は常に活性。指定時は参照条件の値が values のいずれかと一致したときのみ活性。
110
+ */
111
+ enabledWhen?: {
112
+ conditionKey: string;
113
+ values: (string | boolean)[];
114
+ };
107
115
  /** カスタムオペレーター関数 */
108
116
  customOperator?: (filterValues: (string | boolean)[], operator?: string, currentValue?: unknown) => boolean;
109
117
  /** カスタムバリデーション関数 */
@@ -137,6 +137,16 @@ export declare const getMultiConditionLogic: (filterConfig?: FilterTypeConfig) =
137
137
  * 条件キーから条件設定を取得する
138
138
  */
139
139
  export declare const getConditionConfigByKey: (filterConfig: FilterTypeConfig | undefined, conditionKey: string) => MultiFilterConditionConfig | undefined;
140
+ /**
141
+ * enabledWhen により条件入力が非活性かどうかを判定する
142
+ */
143
+ export declare const isConditionDisabledByDependency: (conditionConfig: MultiFilterConditionConfig, conditions: Array<{
144
+ conditionKey: string;
145
+ operator: string;
146
+ value: string;
147
+ selectedValues: (string | boolean)[];
148
+ selectedRadioValue: string | boolean;
149
+ }>, filterConfig?: FilterTypeConfig) => boolean;
140
150
  /**
141
151
  * 条件設定のデフォルトオペレーターを取得する
142
152
  * defaultOperatorがoperatorsに存在しない場合はエラーを投げる
@@ -0,0 +1,4 @@
1
+ import * as React from "react";
2
+ import { BarChartProps } from "./types";
3
+ declare const BarChart: React.FC<BarChartProps>;
4
+ export default BarChart;
@@ -0,0 +1,3 @@
1
+ export { default as BarChart } from "./BarChart";
2
+ export type { BarChartLayout, BarChartProps } from "./types";
3
+ export type { ChartSeries } from "../types";
@@ -0,0 +1,36 @@
1
+ import { BarChartOrientation, ChartSeries } from "../types";
2
+ export type BarChartLayout = "single" | "grouped" | "stacked";
3
+ export type BarChartProps = {
4
+ /** X 軸のカテゴリラベル(horizontal 時は Y 軸) */
5
+ categories: string[];
6
+ /** 1 本以上のデータ系列 */
7
+ series: ChartSeries[];
8
+ /**
9
+ * - single: 系列 1 本(デフォルト)
10
+ * - grouped: 系列を横並びで比較
11
+ * - stacked: 系列を積み上げて構成比を比較
12
+ */
13
+ layout?: BarChartLayout;
14
+ /** vertical: 棒が上向き / horizontal: 棒が右向き。デフォルト vertical */
15
+ orientation?: BarChartOrientation;
16
+ /**
17
+ * theme.palette.chart.colorSchemes のキー。
18
+ * 未指定時は palette.chart.series(デフォルト)を使う。
19
+ */
20
+ colorScheme?: string;
21
+ /** 軸・tooltip の数値表示。未指定時は toLocaleString() */
22
+ valueFormatter?: (value: number) => string;
23
+ /** 系列が 2 本以上のとき凡例を表示。デフォルト true */
24
+ showLegend?: boolean;
25
+ /** stacked 時に tooltip に合計を表示。デフォルト true */
26
+ showTotalInTooltip?: boolean;
27
+ /**
28
+ * 棒の太さ(カテゴリスロット幅に対する比率 0–1)。
29
+ * - single / stacked: 棒 1 本(または積み上げ全体)の幅。デフォルト 0.6
30
+ * - grouped: カテゴリ内グループ全体の幅(系列数で等分)。デフォルト 0.8
31
+ */
32
+ barWidthRatio?: number;
33
+ "aria-label": string;
34
+ height?: number;
35
+ className?: string;
36
+ };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,4 @@
1
+ export { BarChart } from "./BarChart";
2
+ export type { BarChartLayout, BarChartProps } from "./BarChart";
3
+ export type { BarSegment, BarChartOrientation, ChartHoverState, ChartSeries, ResolvedChartSeries, } from "./types";
4
+ export { computeYTicks, computeMaxStackedTotal } from "./internal/utils";
@@ -0,0 +1,29 @@
1
+ import * as React from "react";
2
+ import { BarChartOrientation } from "../types";
3
+ type ChartValueAxisProps = {
4
+ orientation: BarChartOrientation;
5
+ width: number;
6
+ height: number;
7
+ paddingLeft: number;
8
+ paddingRight: number;
9
+ paddingTop: number;
10
+ paddingBottom: number;
11
+ chartWidth: number;
12
+ chartHeight: number;
13
+ ticks: number[];
14
+ maxValue: number;
15
+ valueFormatter: (value: number) => string;
16
+ };
17
+ export declare const ChartValueAxis: React.FC<ChartValueAxisProps>;
18
+ type ChartCategoryLabelsProps = {
19
+ orientation: BarChartOrientation;
20
+ labels: string[];
21
+ height: number;
22
+ paddingBottom: number;
23
+ paddingLeft: number;
24
+ paddingTop: number;
25
+ slotWidth: number;
26
+ labelEvery: number;
27
+ };
28
+ export declare const ChartCategoryLabels: React.FC<ChartCategoryLabelsProps>;
29
+ export {};
@@ -0,0 +1,9 @@
1
+ import * as React from "react";
2
+ type ChartLegendProps = {
3
+ items: {
4
+ label: string;
5
+ color: string;
6
+ }[];
7
+ };
8
+ export declare const ChartLegend: React.FC<ChartLegendProps>;
9
+ export {};
@@ -0,0 +1,13 @@
1
+ import * as React from "react";
2
+ import { ResolvedChartSeries } from "../types";
3
+ type ChartTooltipProps = {
4
+ label: string;
5
+ datasets: Pick<ResolvedChartSeries, "label" | "color" | "data">[];
6
+ categoryIndex: number;
7
+ clientX: number;
8
+ clientY: number;
9
+ valueFormatter: (value: number) => string;
10
+ showTotal?: boolean;
11
+ };
12
+ export declare const ChartTooltip: React.FC<ChartTooltipProps>;
13
+ export {};
@@ -0,0 +1,6 @@
1
+ import { BarChartLayout } from "../BarChart/types";
2
+ export declare const DEFAULT_BAR_WIDTH_RATIO = 0.6;
3
+ export declare const DEFAULT_GROUP_WIDTH_RATIO = 0.8;
4
+ export declare const MIN_BAR_WIDTH_RATIO = 0.1;
5
+ export declare const MAX_BAR_WIDTH_RATIO = 1;
6
+ export declare function resolveBarWidthRatio(layout: BarChartLayout, barWidthRatio?: number): number;
@@ -0,0 +1,5 @@
1
+ import { BarChartLayout } from "../BarChart/types";
2
+ import { BarChartOrientation, BarSegment, ResolvedChartSeries } from "../types";
3
+ import { ChartLayout } from "./getChartLayout";
4
+ export declare function computeChartMaxValue(series: ResolvedChartSeries[], layout: BarChartLayout): number;
5
+ export declare function getBarSegments(series: ResolvedChartSeries[], layout: BarChartLayout, chartLayout: ChartLayout, maxValue: number, orientation?: BarChartOrientation): BarSegment[];
@@ -0,0 +1,43 @@
1
+ import { BarChartLayout } from "../BarChart/types";
2
+ import { BarChartOrientation } from "../types";
3
+ export type ChartLayoutConfig = {
4
+ minSlotSize: number;
5
+ narrowContainerBreakpoint: number;
6
+ horizontalMinValueWidth: number;
7
+ };
8
+ export type ChartLayoutOptions = {
9
+ categoryCount: number;
10
+ seriesCount?: number;
11
+ height?: number;
12
+ legendHeight?: number;
13
+ barWidthRatio?: number;
14
+ layout?: BarChartLayout;
15
+ orientation?: BarChartOrientation;
16
+ layoutConfig?: ChartLayoutConfig;
17
+ /** ResizeObserver で測定したコンテナ幅 */
18
+ containerWidth?: number;
19
+ };
20
+ export type ChartLayout = {
21
+ width: number;
22
+ height: number;
23
+ paddingTop: number;
24
+ paddingBottom: number;
25
+ paddingLeft: number;
26
+ paddingRight: number;
27
+ chartWidth: number;
28
+ chartHeight: number;
29
+ slotWidth: number;
30
+ barWidth: number;
31
+ groupWidth: number;
32
+ legendHeight: number;
33
+ labelEvery: number;
34
+ /** 横スクロールが発生する場合の最小幅 */
35
+ minContentWidth: number;
36
+ /** 縦スクロールが発生する場合の最小高さ */
37
+ minContentHeight: number;
38
+ /** コンテナ幅よりチャート幅が広い(横スクロール対象) */
39
+ overflowsHorizontally: boolean;
40
+ /** コンテナ高さよりチャート高さが高い(縦スクロール対象) */
41
+ overflowsVertically: boolean;
42
+ };
43
+ export declare function getChartLayout(options: ChartLayoutOptions): ChartLayout;
@@ -0,0 +1,5 @@
1
+ import { Theme } from "../../../themes/createTheme";
2
+ import { BarChartLayout } from "../BarChart/types";
3
+ import { ChartSeries, ResolvedChartSeries } from "../types";
4
+ export declare function resolveSeries(series: ChartSeries[], theme: Theme, colorScheme?: string): ResolvedChartSeries[];
5
+ export declare function resolveLayout(seriesCount: number, layout: BarChartLayout | undefined): BarChartLayout;
@@ -0,0 +1,32 @@
1
+ /// <reference types="react" />
2
+ export declare const ChartContainer: 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;
3
+ export declare const ChartScrollArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$overflowX" | "$overflowY"> & {
4
+ $overflowX: boolean;
5
+ $overflowY: boolean;
6
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$overflowX" | "$overflowY"> & {
7
+ $overflowX: boolean;
8
+ $overflowY: boolean;
9
+ }, never>>> & string;
10
+ export declare const ChartSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, "$minWidth" | "$minHeight"> & {
11
+ $minWidth: number;
12
+ $minHeight: number;
13
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, "$minWidth" | "$minHeight"> & {
14
+ $minWidth: number;
15
+ $minHeight: number;
16
+ }, never>>> & string;
17
+ export declare const ChartLegendContainer: 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;
18
+ export declare const ChartLegendItem: 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;
19
+ export declare const ChartLegendSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color"> & {
20
+ $color: string;
21
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color"> & {
22
+ $color: string;
23
+ }, never>>> & string;
24
+ export declare const ChartTooltipContainer: 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;
25
+ export declare const ChartTooltipTitle: 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;
26
+ export declare const ChartTooltipRow: 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;
27
+ export declare const ChartTooltipSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color"> & {
28
+ $color: string;
29
+ }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color"> & {
30
+ $color: string;
31
+ }, never>>> & string;
32
+ export declare const ChartTooltipFooter: 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;
@@ -0,0 +1,5 @@
1
+ import * as React from "react";
2
+ export declare function useChartContainerWidth(): {
3
+ containerRef: React.RefObject<HTMLDivElement | null>;
4
+ containerWidth: number | undefined;
5
+ };
@@ -0,0 +1 @@
1
+ export { computeMaxStackedTotal, computeYTicks } from "./scale";
@@ -0,0 +1,2 @@
1
+ export declare function computeYTicks(maxValue: number, tickCount: number): number[];
2
+ export declare function computeMaxStackedTotal(datasets: (number | null)[][]): number;
@@ -0,0 +1,27 @@
1
+ export type ChartSeries = {
2
+ label: string;
3
+ data: (number | null)[];
4
+ };
5
+ export type BarChartLayout = "single" | "grouped" | "stacked";
6
+ /** vertical: カテゴリが X 軸 / horizontal: カテゴリが Y 軸 */
7
+ export type BarChartOrientation = "vertical" | "horizontal";
8
+ export type ResolvedChartSeries = {
9
+ label: string;
10
+ color: string;
11
+ data: (number | null)[];
12
+ };
13
+ export type ChartHoverState = {
14
+ categoryIndex: number;
15
+ clientX: number;
16
+ clientY: number;
17
+ } | null;
18
+ export type BarSegment = {
19
+ seriesLabel: string;
20
+ color: string;
21
+ value: number;
22
+ x: number;
23
+ y: number;
24
+ width: number;
25
+ height: number;
26
+ categoryIndex: number;
27
+ };
@@ -19,7 +19,7 @@ export declare const AllowedKeys: {
19
19
  };
20
20
  export declare const numpadCodes: string[];
21
21
  export declare const numberKeys: string[];
22
- export declare const allowedKeys: ("0" | "1" | "4" | "2" | "3" | "5" | "6" | "7" | "8" | "9" | "ArrowDown" | "ArrowUp" | "Backspace" | "Delete" | "ArrowLeft" | "ArrowRight" | "Tab")[];
22
+ export declare const allowedKeys: ("0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "ArrowDown" | "ArrowUp" | "Backspace" | "Delete" | "ArrowLeft" | "ArrowRight" | "Tab")[];
23
23
  export declare const isNumpadKey: (code: string) => boolean;
24
24
  export declare const getNumpadNumber: (code: string) => string | null;
25
25
  export type AllowedKeys = (typeof AllowedKeys)[keyof typeof AllowedKeys];
@@ -20,6 +20,7 @@ export { Calendar, CalendarRange } from "./Calendar";
20
20
  export * from "./Calendar";
21
21
  export { default as Card } from "./Card";
22
22
  export * from "./Card";
23
+ export * from "./Chart";
23
24
  export { default as Checkbox } from "./Checkbox";
24
25
  export * from "./Checkbox";
25
26
  export { default as CheckboxCard } from "./CheckboxCard";