ingred-ui 33.15.1 → 33.17.0

package/dist/components/Chart/BarChart/types.d.ts

@@ -1,4 +1,4 @@
-import { BarChartOrientation, ChartSeries } from "../types";
+import { BarChartOrientation, ChartReferenceLine, ChartSeries } from "../types";
 export type BarChartLayout = "single" | "grouped" | "stacked";
 export type BarChartValueScale = "absolute" | "percent";
 export type BarChartProps = {
@@ -38,6 +38,8 @@ export type BarChartProps = {
      * - grouped: カテゴリ内グループ全体の幅（系列数で等分）。デフォルト 0.8
      */
     barWidthRatio?: number;
+    /** 値軸上の水平（horizontal 時は垂直）参照線。スケール外は描画しない */
+    referenceLines?: ChartReferenceLine[];
     /** true の間、チャートの代わりにローディング表示 */
     loading?: boolean;
     /** 描画可能なデータがないときのメッセージ。未指定時は「データがありません」 */

package/dist/components/Chart/LineChart/types.d.ts

@@ -1,4 +1,4 @@
-import { ChartSeries } from "../types";
+import { ChartReferenceLine, ChartSeries } from "../types";
 export type LineChartProps = {
     /** X 軸のカテゴリラベル */
     categories: string[];
@@ -17,6 +17,8 @@ export type LineChartProps = {
     showPoints?: boolean;
     /** 凡例クリックで系列の表示/非表示を切り替え。デフォルト true */
     interactiveLegend?: boolean;
+    /** 値軸上の水平参照線。スケール外は描画しない */
+    referenceLines?: ChartReferenceLine[];
     /** true の間、チャートの代わりにローディング表示 */
     loading?: boolean;
     /** 描画可能なデータがないときのメッセージ。未指定時は「データがありません」 */

package/dist/components/Chart/chartStoryColors.d.ts

@@ -0,0 +1,8 @@
+/**
+ * ストーリー用の系列色。色相を blue に揃え、明度だけで分ける。
+ * 本番デフォルトの palette.chart.series は変えない。
+ */
+export declare const chartStorySeriesColors: readonly ["#03348D", "#0864D1", "#46AAF8", "#6AC3FB", "#054BAF", "#0B82F4", "#9CDDFD"];
+export declare function withChartStorySeriesColors<T extends object>(items: readonly T[], startIndex?: number): Array<T & {
+    color: string;
+}>;

package/dist/components/Chart/index.d.ts

@@ -2,7 +2,7 @@ export { BarChart } from "./BarChart";
 export type { BarChartLayout, BarChartProps, BarChartValueScale, } from "./BarChart";
 export { LineChart } from "./LineChart";
 export type { LineChartProps } from "./LineChart";
-export type { BarSegment, BarChartOrientation, ChartHoverState, ChartSeries, ResolvedChartSeries, } from "./types";
+export type { BarSegment, BarChartOrientation, ChartHoverState, ChartReferenceLine, ChartReferenceLineAxis, ChartSeries, ResolvedChartSeries, } from "./types";
 export type { LinePoint, LinePathSegment, LineSeriesGeometry, } from "./internal/getLineSeries";
 export { computeYTicks, computeMaxStackedTotal } from "./internal/utils";
 export { formatChartPercentValue, normalizeStackedSeriesToPercent, } from "./internal/utils";
@@ -12,3 +12,7 @@ export { computeLineChartMaxValue, getLinePathSegments, getLineSeriesGeometry, p
 export { formatDateAsMonthDay, mapTimeSeriesChartData, } from "./internal/mapTimeSeriesChartData";
 export type { TimeSeriesDataset, TimeSeriesPoint, } from "./internal/mapTimeSeriesChartData";
 export { CHART_DEFAULT_HEIGHT } from "./internal/getChartLayout";
+export { getReferenceLineGeometry, getReferenceLineLegendItems, isReferenceLineInScale, } from "./internal/getReferenceLineGeometry";
+export type { ReferenceLineLegendItem } from "./internal/getReferenceLineGeometry";
+export { computeAchievementPercent, formatAchievementPercent, getTooltipReferenceMetrics, } from "./internal/tooltipReferenceMetrics";
+export type { ChartTooltipReferenceMetric } from "./internal/tooltipReferenceMetrics";

package/dist/components/Chart/internal/ChartLegend.d.ts

@@ -3,6 +3,10 @@ export type ChartLegendItem = {
     label: string;
     color: string;
     hidden: boolean;
+    /** false のときクリックでトグルしない（目標線など） */
+    interactive?: boolean;
+    /** 目標線などは細い横線スウォッチ */
+    swatchVariant?: "swatch" | "line";
 };
 type ChartLegendProps = {
     items: ChartLegendItem[];

package/dist/components/Chart/internal/ChartLineSeries.d.ts

@@ -6,7 +6,12 @@ type ChartLineSeriesProps = {
     showPoints: boolean;
     strokeWidth: number;
     pointRadius: number;
+    pointBorderColor: string;
     hidden: boolean;
+    animation?: "enter" | "none";
+    enterIndex?: number;
+    durationMs?: number;
+    staggerMs?: number;
 };
 export declare const ChartLineSeries: React.FC<ChartLineSeriesProps>;
 type ChartCategoryHoverTargetsProps = {

package/dist/components/Chart/internal/ChartReferenceLines.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { BarChartOrientation, ChartReferenceLine } from "../types";
+import { ChartLayout } from "./getChartLayout";
+type ChartReferenceLinesProps = {
+    lines: readonly ChartReferenceLine[];
+    maxValue: number;
+    orientation: BarChartOrientation;
+    chartLayout: Pick<ChartLayout, "paddingLeft" | "paddingTop" | "chartWidth" | "chartHeight">;
+};
+/** ラベルは凡例側。ここでは線のみ描画する。 */
+export declare const ChartReferenceLines: React.FC<ChartReferenceLinesProps>;
+export {};

package/dist/components/Chart/internal/ChartTooltip.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { ResolvedChartSeries } from "../types";
+import { ChartTooltipReferenceMetric } from "./tooltipReferenceMetrics";
 type ChartTooltipProps = {
     label: string;
     datasets: Pick<ResolvedChartSeries, "label" | "color" | "data">[];
@@ -8,6 +9,7 @@ type ChartTooltipProps = {
     clientY: number;
     valueFormatter: (value: number) => string;
     showTotal?: boolean;
+    referenceMetrics?: ChartTooltipReferenceMetric[];
 };
 export declare const ChartTooltip: React.FC<ChartTooltipProps>;
 export {};

package/dist/components/Chart/internal/getReferenceLineGeometry.d.ts

@@ -0,0 +1,17 @@
+import { BarChartOrientation, ChartReferenceLine, ChartReferenceLineAxis } from "../types";
+import { ChartLayout } from "./getChartLayout";
+export type ChartReferenceLineGeometry = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+export declare function isReferenceLineInScale(value: number, maxValue: number): boolean;
+export declare function getValueX(value: number, maxValue: number, chartLayout: Pick<ChartLayout, "paddingLeft" | "chartWidth">): number;
+export declare function getReferenceLineGeometry(value: number, maxValue: number, chartLayout: Pick<ChartLayout, "paddingLeft" | "paddingTop" | "chartWidth" | "chartHeight">, orientation: BarChartOrientation, _axis?: ChartReferenceLineAxis): ChartReferenceLineGeometry | null;
+export type ReferenceLineLegendItem = {
+    label: string;
+    color: string;
+};
+/** 参照線を凡例用アイテムに変換する（スケール外でも凡例には残す） */
+export declare function getReferenceLineLegendItems(lines: readonly ChartReferenceLine[] | undefined, valueFormatter: (value: number) => string, defaultColor: string): ReferenceLineLegendItem[];

package/dist/components/Chart/internal/segmentReflow.d.ts

@@ -3,6 +3,14 @@ export declare function segmentKey(segment: Pick<BarSegment, "categoryIndex" | "
 export declare function buildSegmentMap(segments: BarSegment[]): Map<string, BarSegment>;
 /** CSS keyframes と reflow で共通の ease-out カーブ */
 export declare const chartMotionEaseCss = "cubic-bezier(0.16, 1, 0.3, 1)";
+/** 線・面の描画。棒のスナップな ease-out だと軌跡が見えない */
+export declare const chartDrawEaseCss = "cubic-bezier(0.45, 0, 0.55, 1)";
+/** 棒の duration より長くして、線が左から伸びる様子が見えるようにする */
+export declare function getChartDrawDurationMs(motionDurationMs: number): number;
+/** 初回 enter の系列/棒ごとの遅延。全体が長くなりすぎないよう cap する */
+export declare function getChartEnterAnimationDelay(enterIndex: number, staggerMs: number, durationMs: number): number;
+/** enter 完了後に animation を "none" へ戻すまでの待ち時間 */
+export declare function getChartEnterAnimationTimeout(itemCount: number, durationMs: number, staggerMs: number): number;
 /** 終端の減速を長く取る ease-out（7乗） */
 export declare function easeOut(t: number): number;
 export declare function lerpValue(from: number, to: number, t: number): number;

package/dist/components/Chart/internal/styled.d.ts

@@ -25,12 +25,15 @@ export declare const ChartLegendItemStatic: import("styled-components/dist/types
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$hidden"> & {
     $hidden: boolean;
 }, never>>> & string;
-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" | "$hidden"> & {
+export declare const ChartLegendLabel: 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;
+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" | "$variant" | "$hidden"> & {
     $color: string;
     $hidden?: boolean | undefined;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color" | "$hidden"> & {
+    $variant?: "line" | "swatch" | undefined;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color" | "$variant" | "$hidden"> & {
     $color: string;
     $hidden?: boolean | undefined;
+    $variant?: "line" | "swatch" | undefined;
 }, never>>> & string;
 export declare const ChartPlaceholder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$minHeight"> & {
     $minHeight: number;
@@ -39,10 +42,15 @@ export declare const ChartPlaceholder: import("styled-components/dist/types").IS
 }, never>>> & string;
 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;
 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;
+export declare const ChartTooltipStack: 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;
 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;
+export declare const ChartTooltipLabel: 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;
+export declare const ChartTooltipText: 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;
+export declare const ChartTooltipValue: 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;
 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"> & {
     $color: string;
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color"> & {
     $color: string;
 }, never>>> & string;
-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;
+export declare const ChartTooltipDivider: 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;
+export declare const ChartTooltipSummaryRow: 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;

package/dist/components/Chart/internal/tooltipReferenceMetrics.d.ts

@@ -0,0 +1,14 @@
+import { ChartReferenceLine } from "../types";
+export type ChartTooltipReferenceMetric = {
+    label: string;
+    target: number;
+};
+/** 達成率（実測 / 目標）。目標が 0 以下のときは null */
+export declare function computeAchievementPercent(actual: number, target: number): number | null;
+export declare function formatAchievementPercent(percent: number): string;
+/**
+ * tooltip に出す目標メトリクス（最大 1 件）。
+ * 比較対象はカテゴリ内の表示系列合計（single ならその値、stacked なら合計）。
+ * `showAchievementInTooltip` が複数ある場合は、スケール内の先頭のみ採用する。
+ */
+export declare function getTooltipReferenceMetrics(lines: readonly ChartReferenceLine[] | undefined, maxValue: number): ChartTooltipReferenceMetric[];

package/dist/components/Chart/internal/useChartEnterAnimation.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 初回描画の enter が終わったら true。
+ * データキーが変わったら false に戻し、凡例トグルでは再発火させない。
+ */
+export declare function useChartEnterAnimation(resetKey: string, timeoutMs: number): boolean;

package/dist/components/Chart/types.d.ts

@@ -22,6 +22,26 @@ export type ChartHoverState = {
     clientX: number;
     clientY: number;
 } | null;
+export type ChartReferenceLineAxis = "primary" | "secondary";
+export type ChartReferenceLine = {
+    /** 値軸上の位置。スケール外（負または max 超）は描画しない */
+    value: number;
+    /**
+     * 凡例に表示するラベル。未指定時は valueFormatter(value)。
+     * プロット上にはラベルを描画しない。
+     */
+    label?: string;
+    /** 未指定時は theme.palette.chart.referenceLine.color */
+    color?: string;
+    /** ComboChart の右軸用。他チャートでは primary のみ有効。 */
+    axis?: ChartReferenceLineAxis;
+    /**
+     * tooltip に達成率（表示値合計 / 目標）を出す。
+     * デフォルト false。目標が 0 以下のときは出さない。
+     * 複数線に指定した場合は、スケール内の先頭 1 本だけが対象になる。
+     */
+    showAchievementInTooltip?: boolean;
+};
 export type BarSegment = {
     seriesLabel: string;
     color: string;

package/dist/components/Drawer/types.d.ts

@@ -21,5 +21,11 @@ export type DrawerProps = {
      * ドロワー表示中も背景をスクロール可能にする（Backdrop非表示）
      */
     allowBackgroundScroll?: boolean;
+    /**
+     * ドロワー外のクリックで閉じる。
+     * Backdrop がある場合はもともと閉じるため、`allowBackgroundScroll` 時に opt-in する。
+     * Drawer 内から開いた DatePicker などのポップアップ操作や、内側から始めたテキスト選択では閉じない。
+     */
+    closeOnOutsideClick?: boolean;
 };
 export type CloseReason = "backdropClick" | "escapeKey";

package/dist/components/FullSizeConfirmModal/FullSizeConfirmModal.d.ts

@@ -18,9 +18,14 @@ export type FullSizeConfirmModalProps = {
     cancelText?: string;
     onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<Element, MouseEvent>, reason: ModalCloseReason | FullSizeConfirmModalCloseReason) => void;
     /**
-     * If `undefined`, footer is removed.
+     * If `undefined`, footer is removed when `onConfirm` is also `undefined`.
+     * @deprecated onConfirm の利用を推奨。
      */
     onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
+    /**
+     * If `undefined`, footer is removed when `onSubmit` is also `undefined`.
+     */
+    onConfirm?: (event: React.MouseEvent<Element, MouseEvent>) => void;
     buttonColor?: ButtonColor;
     isOpen?: boolean;
     /**