ingred-ui 27.3.1 → 27.4.1

package/dist/components/DataTable2/DataTable2.d.ts

@@ -57,6 +57,12 @@ type DataTable2Props = {
         isSmallLayout: boolean;
         checkedRows: string[];
     }) => React.ReactNode;
+    /**
+     * 複数行選択 UI を有効にするか。`false` のとき一括チェック・「n件を」・行頭チェック列を出さない。
+     * 行選択 UI を出すには `true` に加え **`tableActions` を渡す**必要がある（`tableActions` が無いとチェック列もツールバーも出ない）。
+     * @default true
+     */
+    enableRowSelection?: boolean;
 } & {
     /**
      * 見た目の制御。枠線で囲むか否か。枠線で囲むと角丸も適用される
@@ -69,5 +75,5 @@ type DataTable2Props = {
      */
     onCheckedRowsChange?: (checkedRows: string[]) => void;
 };
-export declare const DataTable2: ({ bordered, currentPage, pageSize, pageSizeOptions, totalCount, columns, onPageChange, onPageSizeChange, onColumnsChange, onCheckedRowsChange, children, tableActions, customTableActionArea, }: DataTable2Props) => JSX.Element;
+export declare const DataTable2: ({ bordered, currentPage, pageSize, pageSizeOptions, totalCount, columns, onPageChange, onPageSizeChange, onColumnsChange, onCheckedRowsChange, children, tableActions, customTableActionArea, enableRowSelection, }: DataTable2Props) => JSX.Element;
 export {};

package/dist/components/DataTable2/DataTable2.stories.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { StoryObj } from "@storybook/react-vite";
 import { type TableColumn, type TableAction, DataTable2 } from "./index";
-declare const meta: Meta<({ bordered, currentPage, pageSize, pageSizeOptions, totalCount, columns, onPageChange, onPageSizeChange, onColumnsChange, onCheckedRowsChange, children, tableActions, customTableActionArea, }: {
+declare const meta: Meta<({ bordered, currentPage, pageSize, pageSizeOptions, totalCount, columns, onPageChange, onPageSizeChange, onColumnsChange, onCheckedRowsChange, children, tableActions, customTableActionArea, enableRowSelection, }: {
     currentPage: number;
     pageSize: number;
     pageSizeOptions: number[];
@@ -15,6 +15,7 @@ declare const meta: Meta<({ bordered, currentPage, pageSize, pageSizeOptions, to
         isSmallLayout: boolean;
         checkedRows: string[];
     }) => React.ReactNode) | undefined;
+    enableRowSelection?: boolean | undefined;
 } & {
     bordered?: boolean | undefined;
     children: React.ReactNode;
@@ -63,7 +64,6 @@ export default meta;
  * ```
  */
 export declare const Default: StoryObj<typeof DataTable2>;
-export declare const Sample: StoryObj<typeof DataTable2>;
 /**
  * 以下のように、セルの loading を true に設定すると、スピナーが表示されます。
  * ```
@@ -75,3 +75,20 @@ export declare const Sample: StoryObj<typeof DataTable2>;
  * 「カラム」でフィルターやソートを明示しない場合も、それらの機能は非表示になります。
  */
 export declare const Loading: StoryObj<typeof DataTable2>;
+/**
+ * `enableRowSelection`（既定 `true`）かつ **`tableActions` を渡さない** とき。
+ *
+ * `hasRowControls` が false のため、**一括チェック・「-件を」・行頭チェック列はいずれも出ない**（ツールバーと行が揃う）。
+ * レビュー: [PR #2125](https://github.com/voyagegroup/ingred-ui/pull/2125#discussion_r3097576711)
+ */
+export declare const RowSelectionWithoutTableActions: StoryObj<typeof DataTable2>;
+/**
+ * 右端 1 列だけに `sticky="right"` を付けたとき、横スクロールで操作列が右端に張り付く。
+ * `tableActions` で行頭チェック列・一括選択ツールバーも表示できる（チェック列は通常列としてスクロールする）。
+ * 右 sticky 列は `columns` で `sortable: false` の末尾列にしておくと、カラム編集でドラッグ移動されない（`endFixed` と整合）。
+ * ツールバー右の設定ボタンから「カラムを編集」を開き、A〜D の並び替えと末尾「操作」がドラッグ不可であることを確認できる（A〜D は `sortable: true`）。
+ * 外枠に高さ・横幅 100% を与え多めの行を表示し、縦スクロールでヘッダ（各 `th` の sticky）が張り付くことを確認できる。
+ * コンテナ幅に応じて列幅を比例縮小する（狭いビューポートでも横スクロールしやすい）。
+ * 列ヘッダをドラッグして幅を変えた列はその幅を維持し、それ以外の列はコンテナ幅の変化に追従する。
+ */
+export declare const StickyColumns: StoryObj<typeof DataTable2>;

package/dist/components/DataTable2/DataTable2Cell.d.ts

@@ -1,7 +1,12 @@
 import { type ReactNode } from "react";
 type DataTable2CellProps = {
     loading?: boolean;
+    /**
+     * 横スクロール時に列をビューポート右端に固定する（対応する `DataTable2Column` と同じ値に）。
+     * **最大 1 列**のみテーブル全体で `sticky="right"` を指定可能。
+     */
+    sticky?: "right";
     children: ReactNode;
 };
-export declare const DataTable2Cell: ({ loading, children }: DataTable2CellProps) => JSX.Element;
+export declare const DataTable2Cell: ({ loading, sticky: _sticky, children, }: DataTable2CellProps) => JSX.Element;
 export {};

package/dist/components/DataTable2/DataTable2Column.d.ts

@@ -2,6 +2,11 @@ import { type ReactNode } from "react";
 import { SortDirection } from "./types";
 type DataTable2ColumnProps = {
     className?: string;
+    /**
+     * 横スクロール時に列をビューポート右端に固定する。**最大 1 列**のみ指定可（先にマウントした列が有効）。
+     * カラム編集で動かさない場合は `TableColumn.sortable: false` の末尾列に付けることを推奨。
+     */
+    sticky?: "right";
     isResizable: true;
     onWidthChange: (width: number) => void;
     minWidth?: number;
@@ -10,6 +15,7 @@ type DataTable2ColumnProps = {
     children: ReactNode;
 } | {
     className?: string;
+    sticky?: "right";
     isResizable?: false;
     onWidthChange?: undefined;
     minWidth?: number;
@@ -17,7 +23,7 @@ type DataTable2ColumnProps = {
     width?: number;
     children: ReactNode;
 };
-export declare const DataTable2Column: ({ className, isResizable, width, minWidth, maxWidth, children, onWidthChange, }: DataTable2ColumnProps) => JSX.Element;
+export declare const DataTable2Column: ({ className, sticky, isResizable, width, minWidth, maxWidth, children, onWidthChange, }: DataTable2ColumnProps) => JSX.Element;
 type DataTable2ColumnLabelProps = {
     showSortButton?: true;
     sortButtonDirection?: SortDirection;

package/dist/components/DataTable2/context.d.ts

@@ -3,6 +3,8 @@ import type { TableColumn } from "./types";
 export type RowSpacing = -2 | -1 | 0 | 1 | 2;
 export declare const DataTable2Context: import("react").Context<{
     rowIds: string[];
+    /** 複数行選択 UI（ツールバー一括チェック・行頭チェック列）を出すか */
+    enableRowSelection: boolean;
     hasRowControls: boolean;
     checkedRows: string[];
     columns: TableColumn[];
@@ -23,6 +25,22 @@ export declare const DataTable2Context: import("react").Context<{
     setColumnWidth: (index: number, width: number | null) => void;
     setRowSpacing: (spacing: RowSpacing) => void;
 }>;
+/** 横スクロール位置に応じた右 sticky 列の左 inset 線の表示（DataTable2 内のスクロール領域専用） */
+export declare const DataTable2StickyScrollContext: import("react").Context<{
+    showStickyRightEdgeDecoration: boolean;
+}>;
+/**
+ * `sticky="right"` は **最大 1 列**（先に登録した列のみ有効。2 列目は開発時に警告して無視）。
+ * 利用上は **右端列**（例: 操作列）に `sortable: false` を付け、カラム編集で末尾固定にして移動させないことを推奨。
+ */
+export declare const DataTable2ColumnStickyContext: import("react").Context<{
+    registerColumnSticky: (index: number, sticky: "right" | undefined) => void;
+    getStickyRightOffset: (columnIndex: number) => number | undefined;
+    /** 右 sticky 列の index（左の inset 線はこの列の左縁） */
+    rightStickyColumnIndex: number | null;
+    getRightStickyZIndexHead: (columnIndex: number) => number;
+    getRightStickyZIndexBody: (columnIndex: number) => number;
+}>;
 export declare const ColumnContext: import("react").Context<{
     index: number;
 }>;

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

@@ -1,11 +1,12 @@
-import { type ReactNode } from "react";
+import React, { type ReactNode } from "react";
 export declare const DataTable2: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     bordered?: boolean | undefined;
 }, never>;
-export declare const Viewport: import("styled-components").StyledComponent<({ className, children }: {
+/** 横スクロールのスクロールポートはこの div。子は table のみにし、sticky の祖先を浅く保つ */
+export declare const Viewport: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<{
     className?: string | undefined;
     children: ReactNode;
-}) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+} & React.RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const Toolbar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     isSmallLayout: boolean;
 }, never>;
@@ -16,8 +17,23 @@ export declare const ToolbarPaginationOperator: import("styled-components").Styl
 export declare const ToolbarFilterTrigger: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const ToolbarExtras: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DataTable2ActionButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+/**
+ * thead 自体を position: sticky にすると、子 th の横方向 sticky（right）が
+ * スクロールに追従してしまうブラウザ挙動がある。縦方向のヘッダ固定は各 th の top: 0 に任せる。
+ */
 export declare const DataTable2Header: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, {}, never>;
-export declare const DataTable2Column: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {}, never>;
+export declare const DataTable2Column: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {
+    $stickyRightOffset?: number | undefined;
+    $stickyZIndex?: number | undefined;
+    /** false のとき右 sticky 列の左 inset 線を付けない */
+    $showStickyEdgeDecoration?: boolean | undefined;
+}, never>;
+/** tbody の通常セル（横スクロール時の右 sticky 用） */
+export declare const DataTable2TableCell: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {
+    $stickyRightOffset?: number | undefined;
+    $stickyZIndex?: number | undefined;
+    $showStickyEdgeDecoration?: boolean | undefined;
+}, never>;
 export declare const DataTable2ColumnInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     isSmallLayout: boolean;
 }, never>;
@@ -28,7 +44,10 @@ export declare const SortButton: import("styled-components").StyledComponent<"bu
 export declare const DataTable2Row: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {
     isSmallLayout: boolean;
 }, never>;
+/** 行頭チェック列 */
 export declare const DataTable2RowCheckCell: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {}, never>;
+/** thead の行頭チェック用空セル（ヘッダ行は各 th で縦 sticky） */
+export declare const DataTable2HeadCheckCell: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {}, never>;
 export declare const CheckboxWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DataTable2CellInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DataTable2CellSpinner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;