ingred-ui 23.7.0 → 23.8.0

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

@@ -1,16 +1,6 @@
-import { type ReactNode } from "react";
+import React, { type ReactNode } from "react";
 import type { TableColumn } from "./types";
-type ToolbarProps = {
-    /**
-     * 「◯件選択中」をクリックしたときに表示される ContextMenu2 の中身を指定できます。
-     * `<ContextMenu2>` 内に格納できるコンポーネントのみで構成してください。
-     */
-    rowControls?: ReactNode;
-    /**
-     * 右上に任意のボタンを設置できます。
-     */
-    extraButtons?: ReactNode;
-};
+import type { TableAction } from "./types/tableActions";
 type DataTable2Props = {
     /**
      * ページネーションの現在のページ
@@ -47,6 +37,21 @@ type DataTable2Props = {
      * @param columns 変更後のカラム
      */
     onColumnsChange: (columns: TableColumn[]) => void;
+    /**
+     * テーブルアクションボタン群の定義。enabledWhenとdisplayInで表示場所を制御：
+     * - enabledWhen: "checked" + displayIn: "toolbar" → デスクトップ時は左側の直接ボタン、モバイル時は「n件を操作」ドロップダウン
+     * - enabledWhen: "checked" + displayIn: "dropdown" → デスクトップ時は左側の3点リーダーボタン、モバイル時は「n件を操作」ドロップダウン
+     * - enabledWhen: "unchecked" + displayIn: "toolbar" → デスクトップ時は右側の直接ボタン、モバイル時は右側の3点リーダーボタン
+     * - enabledWhen: "unchecked" + displayIn: "dropdown" → デスクトップ・モバイル共に右側の3点リーダーボタン
+     */
+    tableActions?: TableAction[];
+    /**
+     * テーブルアクションエリアを完全カスタマイズしたい場合のrender-props。isSmallLayout, checkedRows等を受け取れる。
+     */
+    customTableActionArea?: (context: {
+        isSmallLayout: boolean;
+        checkedRows: string[];
+    }) => React.ReactNode;
 } & {
     /**
      * 見た目の制御。枠線で囲むか否か。枠線で囲むと角丸も適用される
@@ -58,6 +63,6 @@ type DataTable2Props = {
      * 読み取り専用で、今のところは外から `checkedRows` を変更することはできません
      */
     onCheckedRowsChange?: (checkedRows: string[]) => void;
-} & ToolbarProps;
-export declare const DataTable2: ({ bordered, rowControls, extraButtons, currentPage, pageSize, pageSizeOptions, totalCount, columns, onPageChange, onPageSizeChange, onColumnsChange, onCheckedRowsChange, children, }: DataTable2Props) => JSX.Element;
+};
+export declare const DataTable2: ({ bordered, currentPage, pageSize, pageSizeOptions, totalCount, columns, onPageChange, onPageSizeChange, onColumnsChange, onCheckedRowsChange, children, tableActions, customTableActionArea, }: DataTable2Props) => JSX.Element;
 export {};

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { StoryObj } from "@storybook/react";
-import { type TableColumn } from "./index";
+import { type TableColumn, type TableAction } from "./index";
 declare const meta: {
     title: string;
-    component: ({ bordered, rowControls, extraButtons, currentPage, pageSize, pageSizeOptions, totalCount, columns, onPageChange, onPageSizeChange, onColumnsChange, onCheckedRowsChange, children, }: {
+    component: ({ bordered, currentPage, pageSize, pageSizeOptions, totalCount, columns, onPageChange, onPageSizeChange, onColumnsChange, onCheckedRowsChange, children, tableActions, customTableActionArea, }: {
         currentPage: number;
         pageSize: number;
         pageSizeOptions: number[];
@@ -12,13 +12,15 @@ declare const meta: {
         onPageChange: (page: number) => void;
         onPageSizeChange: (size: number) => void;
         onColumnsChange: (columns: TableColumn[]) => void;
+        tableActions?: TableAction[] | undefined;
+        customTableActionArea?: ((context: {
+            isSmallLayout: boolean;
+            checkedRows: string[];
+        }) => React.ReactNode) | undefined;
     } & {
         bordered?: boolean | undefined;
         children: React.ReactNode;
         onCheckedRowsChange?: ((checkedRows: string[]) => void) | undefined;
-    } & {
-        rowControls?: React.ReactNode;
-        extraButtons?: React.ReactNode;
     }) => JSX.Element;
     argTypes: {};
 };
@@ -65,6 +67,7 @@ export default meta;
  * ```
  */
 export declare const Default: StoryObj<typeof meta>;
+export declare const Sample: StoryObj<typeof meta>;
 /**
  * 以下のように、セルの loading を true に設定すると、スピナーが表示されます。
  * ```

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

@@ -0,0 +1,11 @@
+import React from "react";
+import type { TableAction } from "./types/tableActions";
+type DataTable2ToolbarProps = {
+    tableActions?: TableAction[];
+    customTableActionArea?: (context: {
+        isSmallLayout: boolean;
+        checkedRows: string[];
+    }) => React.ReactNode;
+};
+export declare const DataTable2Toolbar: ({ tableActions, customTableActionArea, }: DataTable2ToolbarProps) => JSX.Element;
+export {};

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

@@ -1,4 +1,5 @@
 export type { TableColumn, SortDirection } from "./types";
+export type { TableAction } from "./types/tableActions";
 export { DataTable2 } from "./DataTable2";
 export { DataTable2Head } from "./DataTable2Head";
 export { DataTable2Column, DataTable2ColumnLabel } from "./DataTable2Column";

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

@@ -16,7 +16,6 @@ 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>;
-export declare const DataTable2ExtrasMenuTrigger: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 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 DataTable2ColumnInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
@@ -36,3 +35,15 @@ export declare const DataTable2CellSpinner: import("styled-components").StyledCo
 export declare const DataTable2CellContents: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DataTable2InlineEditor: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DataTable2InlineEditorButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ToolbarTableActionArea: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TableSelectedText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const TableActionButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    color?: "primary" | "danger" | "default" | undefined;
+}, never>;
+export declare const TableActionMenuTrigger: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const TableActionMenuItem: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    color?: "primary" | "danger" | "default" | undefined;
+}, never>;
+export declare const DashedDivider: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const TableActionContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TableActionDropdownButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/DataTable2/types/__tests__/tableActions.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,54 @@
+import React from "react";
+/**
+ * テーブルアクションボタン群の定義。enabledWhenとdisplayInで表示場所を制御：
+ * - enabledWhen: "checked" + displayIn: "toolbar" → デスクトップ時は左側の直接ボタン、モバイル時は「n件を操作」ドロップダウン
+ * - enabledWhen: "checked" + displayIn: "dropdown" → デスクトップ時は左側の3点リーダーボタン、モバイル時は「n件を操作」ドロップダウン
+ * - enabledWhen: "unchecked" + displayIn: "toolbar" → デスクトップ時は右側の直接ボタン、モバイル時は右側の3点リーダーボタン
+ * - enabledWhen: "unchecked" + displayIn: "dropdown" → デスクトップ・モバイル共に右側の3点リーダーボタン
+ */
+export type TableAction = {
+    type: "singleButton";
+    label: string;
+    icon?: React.ReactNode;
+    onClick: (selectedRows: string[]) => void;
+    color?: "danger" | "primary" | "primaryPale" | "basicLight" | "basicDark" | "clear";
+    displayIn?: "toolbar" | "dropdown";
+    enabledWhen?: "checked" | "unchecked" | "custom";
+    disabled?: (checkedRows: string[]) => boolean;
+    style?: React.CSSProperties;
+    headingLabel?: string;
+    dynamicIconColor?: {
+        enabled: string;
+        disabled?: string;
+    };
+} | {
+    type: "groupButton";
+    items: {
+        label: string;
+        icon?: React.ReactNode;
+        onClick: (selectedRows: string[]) => void;
+        color?: "danger" | "primary" | "primaryPale" | "basicLight" | "basicDark" | "clear";
+        enabledWhen?: "checked" | "unchecked" | "custom";
+        disabled?: (checkedRows: string[]) => boolean;
+        style?: React.CSSProperties;
+        dynamicIconColor?: {
+            enabled: string;
+            disabled?: string;
+        };
+    }[];
+    displayIn?: "toolbar" | "dropdown";
+    enabledWhen?: "checked" | "unchecked" | "custom";
+    headingLabel?: string;
+} | {
+    type: "divider";
+    displayIn?: "toolbar" | "dropdown";
+} | {
+    type: "separator";
+    displayIn?: "toolbar" | "dropdown";
+    enabledWhen?: "checked" | "unchecked" | "custom";
+} | {
+    type: "heading";
+    label: string;
+    displayIn?: "toolbar" | "dropdown";
+    enabledWhen?: "checked" | "unchecked" | "custom";
+};

package/dist/components/DataTable2/utils/__tests__/toolbarUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,80 @@
+import React from "react";
+import type { Theme } from "../../../themes/createTheme";
+import type { TableAction } from "../types/tableActions";
+/**
+ * アイコンの色を動的に変更するヘルパー関数
+ *
+ * @param originalIcon - 元のアイコンReactNode
+ * @param dynamicIconColor - 動的色設定オブジェクト
+ * @param isEnabled - 有効状態（通常はcheckedRows.length > 0）
+ * @param theme - テーマオブジェクト
+ * @returns 色が適用されたアイコン
+ */
+export declare const getDynamicIcon: (originalIcon: React.ReactNode, dynamicIconColor: {
+    enabled: string;
+    disabled?: string;
+} | undefined, isEnabled: boolean, theme: Theme) => React.ReactNode;
+/**
+ * TableActionのenabledWhenに基づいてアクションを分類
+ *
+ * @param actions - TableActionの配列
+ * @returns checked用とunchecked用に分離されたアクション
+ */
+export declare const categorizeActionsByEnabledWhen: (actions: TableAction[]) => {
+    checkedActions: TableAction[];
+    uncheckedActions: TableAction[];
+};
+/**
+ * TableActionのdisplayInに基づいてアクションを分類
+ *
+ * @param actions - TableActionの配列
+ * @returns toolbar用とdropdown用に分離されたアクション
+ */
+export declare const categorizeActionsByDisplayIn: (actions: TableAction[]) => {
+    toolbarActions: TableAction[];
+    dropdownActions: TableAction[];
+};
+/**
+ * enabledWhenとcustomDisabled関数に基づいてアクションが無効かどうかを判定
+ *
+ * @param action - 判定対象のアクションまたはアイテム
+ * @param checkedRows - 現在選択されている行の配列
+ * @param isUncheckedContext - unchecked系アクション専用のコンテキストかどうか
+ * @returns アクションが無効かどうか
+ */
+export declare const isActionDisabled: (action: {
+    enabledWhen?: "checked" | "unchecked" | "custom" | undefined;
+    disabled?: ((checkedRows: string[]) => boolean) | undefined;
+}, checkedRows: string[], isUncheckedContext?: boolean) => boolean;
+/**
+ * TableActionのキーを生成するヘルパー関数
+ *
+ * @param action - TableAction
+ * @param index - 配列内のインデックス
+ * @returns ユニークなキー文字列
+ */
+export declare const getActionKey: (action: TableAction, index: number) => string;
+/**
+ * ButtonGroupのアイテムキーを生成するヘルパー関数
+ *
+ * @param item - グループ内のアイテム
+ * @param parentIndex - 親グループのインデックス
+ * @param itemIndex - アイテムのインデックス
+ * @returns ユニークなキー文字列
+ */
+export declare const getGroupItemKey: (item: {
+    label?: string;
+}, parentIndex: number, itemIndex: number) => string;
+/**
+ * ドロップダウン内のアイテム用のより具体的なキーを生成するヘルパー関数
+ *
+ * @param item - ドロップダウン内のアイテム
+ * @param prefix - キーのプレフィックス
+ * @param parentIndex - 親要素のインデックス
+ * @param itemIndex - アイテムのインデックス
+ * @returns ユニークなキー文字列
+ */
+export declare const getDropdownItemKey: (item: {
+    label?: string;
+    icon?: React.ReactNode;
+}, prefix: string, parentIndex: number, itemIndex: number) => string;