@geneui/components 3.0.0-next-26b248e-20042026 → 3.0.0-next-e10ab23-21042026

package/{DataTable-259ce886.js → DataTable-86d964f8.js}

@@ -3083,7 +3083,7 @@ function useReactTable(options) {
   return tableRef.current;
 }
 
-var css_248z$6 = ".tableBodyCell{border-bottom:var(--guit-ref-border-width-thin) solid var(--guit-sem-color-border-neutral-1);height:4.4rem;padding-block:var(--guit-ref-spacing-medium);padding-inline:var(--guit-ref-spacing-large);vertical-align:middle}.tableBodyCell:not(:last-child){-webkit-border-end:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);border-inline-end:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2)}.tableBodyCell__content{align-items:center;display:flex;gap:var(--guit-ref-spacing-3xsmall)}.tableBodyCell__text{-webkit-line-clamp:4;-webkit-box-orient:vertical;color:var(--guit-sem-color-foreground-neutral-2);display:-webkit-box;overflow:hidden}";
+var css_248z$6 = ".tableBodyCell{border-bottom:var(--guit-ref-border-width-thin) solid var(--guit-sem-color-border-neutral-1);height:4.4rem;padding-block:var(--guit-ref-spacing-medium);padding-inline:var(--guit-ref-spacing-large);vertical-align:middle}.tableBodyCell:not(:last-child){-webkit-border-end:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2);border-inline-end:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-2)}.tableBodyCell__content{align-items:center;display:flex;gap:var(--guit-ref-spacing-3xsmall)}.tableBodyCell__text{-webkit-line-clamp:4;-webkit-box-orient:vertical;color:var(--guit-sem-color-foreground-neutral-2);display:-webkit-box;overflow:hidden}.tableBodyCell:hover .tableRow__actionsWrapper,.tableBodyCell_active .tableRow__actionsWrapper{opacity:1}";
 styleInject(css_248z$6);
 
 /**
@@ -3117,7 +3117,7 @@ const MemoizedTableBodyCell = memo$1(TableBodyCell, areCellsEqual);
 var css_248z$5 = ".tableExpandedRow{background-color:var(--guit-sem-color-background-neutral-2);display:table-row;position:relative;width:100%}.tableExpandedRow .tableExpandedCell{padding:var(--guit-ref-spacing-large)}";
 styleInject(css_248z$5);
 
-var css_248z$4 = ".tableRow{display:table-row;position:relative;width:100%}.tableRow:active{background-color:var(--guit-sem-color-background-neutral-3-pressed)}.tableRow:nth-child(2n){background-color:var(--guit-sem-color-background-neutral-3)}.tableRow:nth-child(odd){background-color:var(--guit-sem-color-background-neutral-1)}@media screen and (hover:hover){.tableRow:hover{background-color:var(--guit-sem-color-background-neutral-3-hover)}}";
+var css_248z$4 = ".tableRow{display:table-row;position:relative;width:100%}.tableRow:active{background-color:var(--guit-sem-color-background-neutral-3-pressed)}.tableRow:nth-child(2n){background-color:var(--guit-sem-color-background-neutral-3)}.tableRow:nth-child(odd){background-color:var(--guit-sem-color-background-neutral-1)}@media screen and (hover:hover){.tableRow:hover{background-color:var(--guit-sem-color-background-neutral-3-hover)}.tableRow:hover .tableRow__actionsWrapper{opacity:1;pointer-events:auto;visibility:visible}}.tableRow__actionsWrapper{border-bottom:var(--guit-ref-border-width-thin) var(--guit-ref-border-style-solid) var(--guit-sem-color-border-neutral-1);inset-inline-end:0;opacity:0;pointer-events:none;position:-webkit-sticky;position:sticky;top:0;visibility:hidden;white-space:nowrap;width:1%;z-index:2}.tableRow__actions{align-items:center;background-color:var(--guit-sem-color-background-neutral-3-hover);column-gap:var(--guit-ref-spacing-3xsmall);display:flex;inset-block:0;inset-inline-end:0;padding:var(--guit-ref-spacing-small) var(--guit-ref-spacing-large);position:absolute}.tableRow__actions:after{content:\"\";inset-block:0;pointer-events:none;position:absolute;width:.4rem}[dir=ltr] .tableRow__actions:after{background:linear-gradient(to left,var(--guit-sem-color-raised-top-rgba),#0000);right:100%}[dir=rtl] .tableRow__actions:after{background:linear-gradient(to right,var(--guit-sem-color-raised-top-rgba),#0000);left:100%}";
 styleInject(css_248z$4);
 
 var css_248z$3 = ".tableBody{display:table-row-group;width:100%}.tableBody__emptyBody{align-items:center;display:flex;inset:0;justify-content:center;position:fixed}";

package/DataTable.js

@@ -1,5 +1,5 @@
 import React__default, { useRef, useEffect, useMemo, useState, useCallback } from 'react';
-import { M as MemoizedTableBodyCell, f as flexRender, u as useReactTable, g as getCoreRowModel, a as getPaginationRowModel, b as getExpandedRowModel } from './DataTable-259ce886.js';
+import { M as MemoizedTableBodyCell, f as flexRender, u as useReactTable, g as getCoreRowModel, a as getPaginationRowModel, b as getExpandedRowModel } from './DataTable-86d964f8.js';
 import { c as classNames } from './index-ce02421b.js';
 import Scrollbar from './Scrollbar.js';
 import Pagination from './Pagination.js';
@@ -166,6 +166,9 @@ const TableExpandedRow = ({ colspan, children }) => {
         React__default.createElement("td", { colSpan: colspan, className: "tableExpandedCell" }, children)));
 };
 
+const RowActionsWrapper = ({ title, children }) => {
+    return title ? React__default.createElement(Tooltip, { text: title }, children) : children;
+};
 /**
  * Renders an individual table row (`<tr>`).
  * * This component iterates through all visible cells for the provided row instance
@@ -175,11 +178,15 @@ const TableExpandedRow = ({ colspan, children }) => {
  * @param props - The properties for the component.
  * @returns A table row element containing its respective rendered cells.
  */
-const TableRow = ({ row }) => {
+const TableRow = ({ row, rowActions }) => {
     const { expandedRow } = row.original;
     const isRowExpanded = row.getIsExpanded() && expandedRow;
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("tr", { className: "tableRow" }, row.getVisibleCells().map((cell) => (React__default.createElement(MemoizedTableBodyCell, { key: cell.id, cell: cell })))),
+        React__default.createElement("tr", { className: "tableRow" },
+            row.getVisibleCells().map((cell) => (React__default.createElement(MemoizedTableBodyCell, { key: cell.id, cell: cell }))),
+            (rowActions === null || rowActions === void 0 ? void 0 : rowActions.length) ? (React__default.createElement("td", { className: "tableRow__actionsWrapper" },
+                React__default.createElement("div", { className: "tableRow__actions" }, rowActions.map(({ Icon, title, onClick, disabled }, index) => (React__default.createElement(RowActionsWrapper, { key: `action-${title !== null && title !== void 0 ? title : index}`, title: title },
+                    React__default.createElement(Button, { appearance: "secondary", layout: "text", size: "small", Icon: Icon, disabled: disabled, onClick: onClick }))))))) : null),
         isRowExpanded && React__default.createElement(TableExpandedRow, { colspan: row.getVisibleCells().length }, expandedRow)));
 };
 
@@ -201,7 +208,7 @@ const TableEmptyDataWrapper = ({ children }) => (React__default.createElement("t
  * @param props - The properties for the component.
  * @returns The table body element, or a fallback UI (loader/empty state) depending on the data.
  */
-const TableBody = ({ rows, loading, loadingText, noDataTexts, noDataAvailableActions }) => {
+const TableBody = ({ rows, loading, loadingText, noDataTexts, noDataAvailableActions, rowActions }) => {
     if (loading) {
         return (React__default.createElement(TableEmptyDataWrapper, null,
             React__default.createElement(Loader, { size: "large", text: loadingText, textPosition: "below" })));
@@ -210,7 +217,7 @@ const TableBody = ({ rows, loading, loadingText, noDataTexts, noDataAvailableAct
         return (React__default.createElement(TableEmptyDataWrapper, null,
             React__default.createElement(Empty, { appearance: "noData", title: noDataTexts === null || noDataTexts === void 0 ? void 0 : noDataTexts.noDataAvailableTitle, description: noDataTexts === null || noDataTexts === void 0 ? void 0 : noDataTexts.noDataAvailableText, actions: noDataAvailableActions })));
     }
-    return (React__default.createElement("tbody", { className: "tableBody" }, rows.map((row) => (React__default.createElement(TableRow, { key: row.id, row: row })))));
+    return (React__default.createElement("tbody", { className: "tableBody" }, rows.map((row) => (React__default.createElement(TableRow, { key: row.id, row: row, rowActions: rowActions })))));
 };
 
 /**
@@ -260,7 +267,7 @@ const defaultColumn = {
  * @param props - The properties for the component.
  * @returns The fully assembled DataTable component including headers, body, and optional pagination.
  */
-const DataTable = ({ className, data = [], columns = [], pagination = false, loading: externalLoading = false, sticky = true, loadingText, noDataTexts, noDataAvailableActions, manualPagination = false, expandable = false, onRowExpandChange }) => {
+const DataTable = ({ className, data = [], columns = [], pagination = false, loading: externalLoading = false, sticky = true, loadingText, noDataTexts, noDataAvailableActions, manualPagination = false, expandable = false, onRowExpandChange, rowActions }) => {
     var _a, _b;
     const [internalLoading] = useState(false);
     const [expanded, setExpanded] = useState({});
@@ -299,7 +306,7 @@ const DataTable = ({ className, data = [], columns = [], pagination = false, loa
                     dataTable__noDataToDisplay: isTableDataEmpty
                 }) },
                 React__default.createElement(TableHeader, { sticky: sticky, headerGroups: table.getHeaderGroups() }),
-                React__default.createElement(TableBody, { loading: isTableLoading, loadingText: loadingText, rows: table.getRowModel().rows, noDataTexts: noDataTexts, noDataAvailableActions: noDataAvailableActions }))),
+                React__default.createElement(TableBody, { loading: isTableLoading, loadingText: loadingText, rows: table.getRowModel().rows, noDataTexts: noDataTexts, noDataAvailableActions: noDataAvailableActions, rowActions: rowActions }))),
         shouldShowPagination && (React__default.createElement(Pagination, Object.assign({ className: "dataTable__pagination" }, paginationProps, { disabled: isTableDataEmpty })))));
 };
 

package/SegmentedControl.js

@@ -60,7 +60,7 @@ import './OTPField-af15abb1.js';
 import './index-ed1441a5.js';
 import './PageHeader-cfa2c255.js';
 import './PopoverConfirm-d6880a4f.js';
-import './DataTable-259ce886.js';
+import './DataTable-86d964f8.js';
 import './GlobalHeader-e3be2af9.js';
 import './DataCardList-eb674418.js';
 import './useEllipsisDetection-c5f9b175.js';

package/components/organisms/DataTable/DataTable.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from "react";
 import { IButtonProps } from "@components/atoms/Button";
 import { IPaginationProps } from "@components/molecules/Pagination";
-import { DataTableColumn, DataTableRowExpandChangeHandler, ITableData, ITableNoDataTexts } from "@components/organisms/DataTable/types";
+import { DataTableColumn, DataTableRowAction, DataTableRowExpandChangeHandler, ITableData, ITableNoDataTexts } from "@components/organisms/DataTable/types";
 import "./DataTable.scss";
 /**
  * Props for the {@link DataTable} component.
@@ -120,6 +120,15 @@ interface IDataTableProps<TData extends ITableData> {
      * ```
      */
     onRowExpandChange?: DataTableRowExpandChangeHandler<TData>;
+    /**
+     * An array of action button objects to display in the row's action menu.
+     * @example
+     * rowActions={[
+     * { Icon: Edit, title: 'Edit', disabled: false, onClick: handleEdit },
+     * { Icon: Delete, title: 'Delete', disabled: true, onClick: handleDelete }
+     * ]}
+     */
+    rowActions?: DataTableRowAction[];
 }
 /**
  * Data Table used to display structured information in a grid format, making it easy to organize, view, and interact with large datasets.
@@ -130,5 +139,5 @@ interface IDataTableProps<TData extends ITableData> {
  * @param props - The properties for the component.
  * @returns The fully assembled DataTable component including headers, body, and optional pagination.
  */
-declare const DataTable: <TData extends ITableData>({ className, data, columns, pagination, loading: externalLoading, sticky, loadingText, noDataTexts, noDataAvailableActions, manualPagination, expandable, onRowExpandChange }: IDataTableProps<TData>) => ReactElement;
+declare const DataTable: <TData extends ITableData>({ className, data, columns, pagination, loading: externalLoading, sticky, loadingText, noDataTexts, noDataAvailableActions, manualPagination, expandable, onRowExpandChange, rowActions }: IDataTableProps<TData>) => ReactElement;
 export { IDataTableProps, DataTable as default };

package/components/organisms/DataTable/TableBody/Row/TableRow.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
+import { JSX } from "react";
 import { Row } from "@tanstack/table-core";
-import { ITableData } from "@components/organisms/DataTable/types";
+import { DataTableRowAction, ITableData } from "@components/organisms/DataTable/types";
 import "./TableRow.scss";
 /**
  * Props for the {@link TableRow} component.
@@ -13,6 +13,10 @@ interface ITableRowProps<TData extends ITableData> {
      * the visible cells to be rendered within this specific row.
      */
     row: Row<TData>;
+    /**
+     * An array of action button objects to display in the row's actions section.
+     */
+    rowActions?: DataTableRowAction[];
 }
 /**
  * Renders an individual table row (`<tr>`).
@@ -23,5 +27,5 @@ interface ITableRowProps<TData extends ITableData> {
  * @param props - The properties for the component.
  * @returns A table row element containing its respective rendered cells.
  */
-declare const TableRow: <TData extends ITableData>({ row }: ITableRowProps<TData>) => React.JSX.Element;
+declare const TableRow: <TData extends ITableData>({ row, rowActions }: ITableRowProps<TData>) => JSX.Element;
 export default TableRow;

package/components/organisms/DataTable/TableBody/TableBody.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { Row } from "@tanstack/table-core";
 import { IButtonProps } from "@components/atoms/Button";
-import { ITableData, ITableNoDataTexts } from "@components/organisms/DataTable/types";
+import { DataTableRowAction, ITableData, ITableNoDataTexts } from "@components/organisms/DataTable/types";
 import "./TableBody.scss";
 /**
  * Props for the {@link TableBody} component.
@@ -36,6 +36,10 @@ interface ITableBody<TData> {
      * ]}
      */
     noDataAvailableActions?: IButtonProps[];
+    /**
+     * An array of action button objects to display in the row's action menu.
+     */
+    rowActions?: DataTableRowAction[];
 }
 /**
  * Renders the `<tbody>` section of the table, including empty and loading states.
@@ -49,5 +53,5 @@ interface ITableBody<TData> {
  * @param props - The properties for the component.
  * @returns The table body element, or a fallback UI (loader/empty state) depending on the data.
  */
-declare const TableBody: <TData extends ITableData>({ rows, loading, loadingText, noDataTexts, noDataAvailableActions }: ITableBody<TData>) => React.JSX.Element;
+declare const TableBody: <TData extends ITableData>({ rows, loading, loadingText, noDataTexts, noDataAvailableActions, rowActions }: ITableBody<TData>) => React.JSX.Element;
 export default TableBody;

package/components/organisms/DataTable/types.d.ts

@@ -1,4 +1,5 @@
-import { ReactNode } from "react";
+import { FC, MouseEvent, ReactNode } from "react";
+import { IconProps } from "@geneui/icons";
 export interface ITableNoDataTexts {
     noDataAvailableTitle?: string;
     noDataAvailableText?: string;
@@ -12,6 +13,12 @@ export type DataTableRenderCellArgs<TData, TValue> = {
     row: TData & ITableData;
     rowId: string;
 };
+export type DataTableRowAction = {
+    Icon: FC<IconProps>;
+    title?: string;
+    disabled?: boolean;
+    onClick: (e: MouseEvent) => void;
+};
 /**
  * Public DataTable column type (Gene UI).
  * Kept intentionally small: only the props used by the current DataTable implementation.

package/index.js

@@ -132,6 +132,6 @@ import './ColorPicker-76533087.js';
 import './OTPField-af15abb1.js';
 import './PageHeader-cfa2c255.js';
 import './PopoverConfirm-d6880a4f.js';
-import './DataTable-259ce886.js';
+import './DataTable-86d964f8.js';
 import './GlobalHeader-e3be2af9.js';
 import './DataCardList-eb674418.js';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "3.0.0-next-26b248e-20042026",
+    "version": "3.0.0-next-e10ab23-21042026",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {