ingred-ui 33.17.0 → 33.18.0

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

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { AreaChartProps } from "./types";
+declare const AreaChart: React.FC<AreaChartProps>;
+export default AreaChart;

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

@@ -0,0 +1,2 @@
+export { default as AreaChart } from "./AreaChart";
+export type { AreaChartLayout, AreaChartProps } from "./types";

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

@@ -0,0 +1,36 @@
+import { ChartReferenceLine, ChartSeries } from "../types";
+import { AreaChartLayout } from "../internal/getAreaPath";
+export type { AreaChartLayout };
+export type AreaChartProps = {
+    /** X 軸のカテゴリラベル */
+    categories: string[];
+    /** 1 本以上のデータ系列（BarChart / LineChart 共通） */
+    series: ChartSeries[];
+    /**
+     * - overlay: 系列を重ねて描画（デフォルト）
+     * - stacked: 系列を積み上げて描画
+     */
+    layout?: AreaChartLayout;
+    /**
+     * theme.palette.chart.colorSchemes のキー。
+     * 未指定時は palette.chart.series（デフォルト）を使う。
+     */
+    colorScheme?: string;
+    /** 軸・tooltip の数値表示。未指定時は toLocaleString() */
+    valueFormatter?: (value: number) => string;
+    /** 系列が 2 本以上のとき凡例を表示。デフォルト true */
+    showLegend?: boolean;
+    /** データ点にマーカーを表示。デフォルト true */
+    showPoints?: boolean;
+    /** 凡例クリックで系列の表示/非表示を切り替え。デフォルト true */
+    interactiveLegend?: boolean;
+    /** 値軸上の水平参照線。スケール外は描画しない */
+    referenceLines?: ChartReferenceLine[];
+    /** true の間、チャートの代わりにローディング表示 */
+    loading?: boolean;
+    /** 描画可能なデータがないときのメッセージ。未指定時は「データがありません」 */
+    emptyMessage?: string;
+    "aria-label": string;
+    height?: number;
+    className?: string;
+};

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

@@ -2,6 +2,8 @@ export { BarChart } from "./BarChart";
 export type { BarChartLayout, BarChartProps, BarChartValueScale, } from "./BarChart";
 export { LineChart } from "./LineChart";
 export type { LineChartProps } from "./LineChart";
+export { AreaChart } from "./AreaChart";
+export type { AreaChartLayout, AreaChartProps } from "./AreaChart";
 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";
@@ -16,3 +18,5 @@ export { getReferenceLineGeometry, getReferenceLineLegendItems, isReferenceLineI
 export type { ReferenceLineLegendItem } from "./internal/getReferenceLineGeometry";
 export { computeAchievementPercent, formatAchievementPercent, getTooltipReferenceMetrics, } from "./internal/tooltipReferenceMetrics";
 export type { ChartTooltipReferenceMetric } from "./internal/tooltipReferenceMetrics";
+export { computeAreaChartMaxValue, getAreaSegments, getOverlayAreaPath, getStackedAreaPath, toStackedLineSeries, } from "./internal/getAreaPath";
+export type { AreaPathSegment } from "./internal/getAreaPath";

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { AreaPathSegment } from "./getAreaPath";
+type ChartAreaSeriesProps = {
+    segments: AreaPathSegment[];
+    fillOpacity: number;
+    hidden: boolean;
+    animation?: "enter" | "none";
+    enterIndex?: number;
+    durationMs?: number;
+    staggerMs?: number;
+};
+export declare const ChartAreaSeries: React.FC<ChartAreaSeriesProps>;
+export {};

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

@@ -0,0 +1,32 @@
+import { ResolvedChartSeries } from "../types";
+import { ChartLayout } from "./getChartLayout";
+import { LinePoint } from "./getLineSeries";
+export type AreaPathSegment = {
+    seriesLabel: string;
+    color: string;
+    d: string;
+    /** 系列内の連続面。リサイズで d が変わっても key を安定させる */
+    segmentIndex: number;
+};
+export type AreaChartLayout = "overlay" | "stacked";
+/**
+ * 幾何計算に含める系列。
+ * - overlay: 全系列（非表示は DOM に残してフェードする）
+ * - stacked: 表示中だけ（非表示を除いて積み直す）
+ */
+export declare function getAreaChartDrawSeries<T extends {
+    label: string;
+}>(series: readonly T[], hiddenLabels: ReadonlySet<string>, layout: AreaChartLayout): T[];
+export declare function getOverlayAreaPath(points: readonly Pick<LinePoint, "x" | "y">[], baselineY: number): string;
+export declare function getStackedAreaPath(upperPoints: readonly {
+    x: number;
+    y: number;
+}[], lowerPoints: readonly {
+    x: number;
+    y: number;
+}[]): string;
+export declare function computeAreaChartMaxValue(series: readonly Pick<ResolvedChartSeries, "data">[], layout: AreaChartLayout): number;
+export declare function toStackedLineSeries(series: readonly ResolvedChartSeries[]): ResolvedChartSeries[];
+export declare function getOverlayAreaSegments(item: ResolvedChartSeries, chartLayout: ChartLayout, maxValue: number): AreaPathSegment[];
+export declare function getStackedAreaSegments(series: readonly ResolvedChartSeries[], chartLayout: ChartLayout, maxValue: number, categoryCount?: number): AreaPathSegment[];
+export declare function getAreaSegments(series: readonly ResolvedChartSeries[], chartLayout: ChartLayout, maxValue: number, layout: AreaChartLayout, categoryCount?: number): AreaPathSegment[];

package/dist/components/Select2/styled.d.ts

@@ -99,6 +99,8 @@ export declare const StyledContextMenu2TextInputItem: import("styled-components/
     forwardedAs?: import("styled-components").WebTarget | undefined;
 }, "$insetFocusRingPadding">>> & string;
 export declare const OptionsContainer: 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 LoadingContainer: 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 VisuallyHidden: 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;
 export declare const SearchHeaderContainer: 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 SearchInputWrapper: 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 BulkActionsContainer: 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/Select2/types.d.ts

@@ -33,6 +33,104 @@ export type Select2OptionProps = {
      */
     append?: React.ReactNode;
 };
+/**
+ * onSearchChange が呼ばれた理由。
+ * 親はこれで分岐する。searchTerm の値から意図を推測しなくてよい。
+ */
+export type Select2SearchReason = 
+/** 検索語が入力された。親は検索して children を差し替える。 */
+"search"
+/** デフォルト候補を求めている。searchTerm は常に空。 */
+ | "default"
+/** 検索が打ち切られた。親は取得せず、保留中の debounce と進行中のリクエストを捨てる。 */
+ | "abort";
+/**
+ * サーバー検索（非同期サジェスト）の設定。
+ *
+ * この機能がやっていることは、突き詰めると一つだけである。
+ * 「候補の絞り込みを誰が担当するか」を Select2 から親に移す。
+ *
+ *   これまで: 親が全件を children で渡し、Select2 が検索語で絞る
+ *   searchMode: 親が検索して絞った結果を children で渡し、Select2 は絞らずに描く
+ *
+ * 候補が数千件あると、全件を渡した時点で開いた瞬間の描画が重くなる。
+ * 絞り込みを親（サーバー）に移せば、Select2 が受け取る件数そのものが減る。
+ *
+ * 実装上の切り替え点は Select2.tsx の searchedOptions にある一行だけで、
+ * 既存のローカル絞り込みは消していない。searchMode のときに通らなくなるだけである。
+ * 以下に並ぶ挙動は、担当を移したことで必要になった後始末にあたる。
+ *
+ * 渡すと Select2 は次のように振る舞う。
+ *
+ * - 検索語が入るまで候補を描画せず、選択済みだけを描画する。
+ *   showDefaultOptions を渡すと、検索前も children を描画する
+ * - 内部フィルタをかけず、親が絞り込んだ children をそのまま描画する
+ * - isLoading のあいだはローディングを表示する。
+ *   検索前に候補を描画しない構成では、選択済みの表示を優先してローディングを出さない
+ *
+ * 検索窓がないと検索語を入力できないため、searchable の指定に関わらず検索窓を出す。
+ * showOptionsOnlyWhenSearching を同時に渡した場合、そちらは無視される。
+ *
+ * 選択済みの option は children に含めて渡す。
+ * Select2 は children からラベルを引くので、検索結果だけに差し替えると
+ * トリガーの表示ラベルと複数選択時のタグが消える。
+ * 複数選択では、適用前の保留中の選択も onTempChange で受け取って children に残す。
+ *
+ * その裏返しで、Select2 は children のどれが検索結果でどれが選択済みかを区別できない。
+ * 検索が 0 件だったときは hasNoResults を渡す。渡さないと選択済みが検索結果として並ぶ。
+ */
+export type Select2SearchMode = {
+    /**
+     * 検索語が変わったとき、デフォルト候補が必要になったとき、検索が打ち切られたときに呼ばれる。
+     * どれかは reason で渡す。searchTerm は前後の空白を落とした検索語で、search 以外では常に空。
+     *
+     * - search: 検索語が入力された。同じ検索語は続けて渡らない
+     * - default: showDefaultOptions のとき、開いた時点と検索語を消した時点で渡る
+     * - abort: 閉じた時点とアンマウントされた時点で渡る。
+     *   showDefaultOptions を渡していなければ、検索語を消した時点でも渡る。
+     *   親に何も頼んでいなければ渡らない
+     *
+     * 親は reason で分岐する。search と default は取得して children を差し替える。
+     * abort は取得せず、保留中の debounce と進行中のリクエストを捨てて isLoading を false に戻す。
+     *
+     * debounce と、応答が前後して返ったときの順序の保証は親側で行う。
+     */
+    onSearchChange: (searchTerm: string, reason: Select2SearchReason) => void;
+    /**
+     * 検索結果を取得中かどうか。
+     * true の間は候補の代わりにローディングを表示する。
+     * ただし検索前に候補を描画しない構成では、検索語が空のあいだは
+     * 選択済みの表示を優先し、true でもローディングを出さない。
+     * showDefaultOptions を渡した場合は、検索前もローディングを表示する。
+     *
+     * abort を受けたら false に戻す。
+     * 戻さないと、閉じた時点の取得が返らないまま、次に開いてもローディングのままになる。
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * 直近の検索が 0 件だったかどうか。
+     * true の間は候補の代わりに noResultsMessage を表示する。
+     * 検索語が空のときは見ない。isLoading が true のときはローディングが優先される。
+     *
+     * children に残した選択済みは検索結果と区別がつかないため、
+     * 0 件の判定は親から受け取る。
+     * search の応答で結果の有無に合わせて更新し、default と abort では false に戻す。
+     * @default false
+     */
+    hasNoResults?: boolean;
+    /**
+     * 検索語が空のときも children を候補として描画する。
+     * 最近使った項目やおすすめを検索前に出したいときに使う。
+     * これを渡したときだけ、reason が default の通知が届く。
+     * 開いた時点と検索語を消した時点で届くので、親はデフォルト候補を返す。
+     *
+     * 候補の件数は親が絞る。
+     * 全件を返すと、開いた瞬間に候補がすべてマウントされる状態に戻る。
+     * @default false
+     */
+    showDefaultOptions?: boolean;
+};
 export type Select2StyleProps = {
     theme: Theme;
     $size: Select2Size;
@@ -111,10 +209,20 @@ export type Select2Props = {
      * 候補が大量にある場合に、開いた瞬間の全件描画を避けるためのオプション。
      * searchable=true が前提（検索窓がないと候補を表示できないため）。
      * @default false
+     * @deprecated searchMode を使う。
+     * このオプションは描画を遅らせるだけで、絞り込みはローカルのまま残る。
+     * そのため緩い検索語では、一致した候補が件数の上限なく描画される。
+     * searchMode は遅延描画を含んだうえで、絞り込み自体を親に任せられる。
      */
     showOptionsOnlyWhenSearching?: boolean;
     /**
-     * showOptionsOnlyWhenSearching=true かつ検索語が空のときに表示する案内文言
+     * サーバー検索（非同期サジェスト）を有効にする。
+     * 詳細は Select2SearchMode を参照。
+     */
+    searchMode?: Select2SearchMode;
+    /**
+     * 検索前に描画する候補がないときに表示する案内文言
+     * showOptionsOnlyWhenSearching と searchMode のどちらでも使われる。
      * @default "キーワードを入力してください"
      */
     searchPromptMessage?: string;
@@ -134,6 +242,8 @@ export type Select2Props = {
     commitOnSelect?: boolean;
     /**
      * 全選択・全クリアボタンを表示するかどうか (multiple=trueの場合のみ有効)
+     * 全選択の対象は描画している候補である。
+     * searchMode では親が返した候補だけが対象になり、サーバー側で一致する全件は選ばない。
      * @default false
      */
     showBulkActions?: boolean;