@trackunit/react-table-base-components 1.3.131 → 1.3.134

package/index.cjs.js

@@ -74,7 +74,7 @@ const cvaIdentityCell = cssClassVarianceUtilities.cvaMerge(["grid", "items-cente
         density: "default",
     },
 });
-const cvaIdentityCellLayout = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "gap-1", "text-sm"], {
+const cvaIdentityCellLayout = cssClassVarianceUtilities.cvaMerge(["grid", "items-center", "text-sm"], {
     variants: {
         density: {
             default: "grid-rows-[min-content_auto]",
@@ -85,7 +85,7 @@ const cvaIdentityCellLayout = cssClassVarianceUtilities.cvaMerge(["grid", "items
         density: "default",
     },
 });
-const cvaIdentityCellDetails = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-gray-500"], {
+const cvaIdentityCellDetails = cssClassVarianceUtilities.cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-gray-600", "font-medium"], {
     variants: {
         density: {
             default: "pt-0",
@@ -102,7 +102,7 @@ const cvaIdentityCellDetailsItem = cssClassVarianceUtilities.cvaMerge(["last:tru
  * @returns {ReactElement} LinkCell component
  */
 const IdentityCell = ({ className, dataTestId = "identity-cell", density = "default", title, details = [], thumbnail, }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaIdentityCell({ className, density, hasThumbnail: !!thumbnail }), "data-testid": dataTestId, children: [thumbnail ? (jsxRuntime.jsx("div", { className: "mr-1 flex h-8 w-8 items-center justify-center overflow-hidden rounded-md", children: thumbnail })) : null, jsxRuntime.jsxs("div", { className: cvaIdentityCellLayout({ className, density }), children: [jsxRuntime.jsx("div", { className: "flex w-full min-w-0 truncate text-sm", children: jsxRuntime.jsx(reactComponents.Heading, { className: "truncate text-sm", dataTestId: `${dataTestId}-name`, variant: "tertiary", children: title }) }), details.length > 0 && (jsxRuntime.jsx("div", { className: cvaIdentityCellDetails({ className, density }), children: details.map((value, index, array) => (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx("span", { className: cvaIdentityCellDetailsItem({ className }), children: value }), index < array.length - 1 && (jsxRuntime.jsx("div", { className: "mx-0.5 flex items-center", children: jsxRuntime.jsx(reactComponents.Icon, { className: "w-4 text-neutral-200", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: cvaIdentityCell({ className, density, hasThumbnail: !!thumbnail }), "data-testid": dataTestId, children: [thumbnail ? (jsxRuntime.jsx("div", { className: "mr-1 flex h-8 w-8 items-center justify-center overflow-hidden rounded-md", children: thumbnail })) : null, jsxRuntime.jsxs("div", { className: cvaIdentityCellLayout({ className, density }), children: [jsxRuntime.jsx("div", { className: "flex w-full min-w-0 truncate text-sm", children: jsxRuntime.jsx(reactComponents.Heading, { className: "truncate text-sm", dataTestId: `${dataTestId}-name`, variant: "tertiary", children: title }) }), details.length > 0 && (jsxRuntime.jsx("div", { className: cvaIdentityCellDetails({ className, density }), children: details.map((value, index, array) => (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx("span", { className: cvaIdentityCellDetailsItem({ className }), children: value }), index < array.length - 1 && (jsxRuntime.jsx("div", { className: "mx-0.5 flex items-center", children: jsxRuntime.jsx(reactComponents.Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }))] })] }));
 };
 
 /**
@@ -255,15 +255,79 @@ const ResizeHandle = ({ isResizing = false, dataTestId, onMouseDown: onMouseDown
     };
     return (jsxRuntime.jsx("div", { className: cvaResizeHandel({ isResizing, className }), "data-testid": dataTestId, onMouseDown: event => onMouseDown(event), role: "separator", ...rest }));
 };
-const cvaResizeHandel = cssClassVarianceUtilities.cvaMerge(["absolute", "cursor-col-resize", "right-0", "top-0", "h-full", "w-1", "select-none", "hover:bg-primary-400"], {
+const cvaResizeHandel = cssClassVarianceUtilities.cvaMerge([
+    "absolute",
+    "cursor-ew-resize",
+    "z-2",
+    "h-full",
+    "w-2",
+    "top-0",
+    "right-[-3px]",
+    "flex",
+    "items-center",
+    "after:block",
+    "after:left-[calc(50%-2px)]",
+    "after:h-full",
+    "after:z-[1]",
+    "after:absolute",
+    "after:w-0.5",
+    "after:hover:bg-info-500",
+], {
     variants: {
         isResizing: {
-            true: ["bg-primary-500", "opacity-1"],
+            true: ["opacity-1"],
             false: [],
         },
     },
 });
 
+/**
+ * RowActions component displays actions as individual buttons or a dropdown menu
+ * based on the number of actions provided.
+ *
+ * - If there is a single action, it displays a standalone button.
+ * - If there are multiple actions, they are grouped into a dropdown menu.
+ *
+ * @param {RowActionsProps} props - The properties for the component.
+ * @param {Action[]} props.actions - A list of actions to display, including their labels, icons, and handlers.
+ * @returns {JSX.Element} A React component rendering the actions.
+ */
+const RowActions = ({ actions }) => {
+    const selectedActions = actions.filter(action => action.isSelected);
+    const normalActions = actions.filter(action => (action.isVisible ?? true) && action.variant !== "danger");
+    const dangerActions = actions.filter(action => (action.isVisible ?? true) && action.variant === "danger");
+    if (actions.length === 0) {
+        return null;
+    }
+    if (actions.length === 1) {
+        const [action] = actions;
+        return (action &&
+            (action.isVisible ?? true) && (jsxRuntime.jsx(reactComponents.Button, { disabled: action.disabled || action.loading, onClick: event => {
+                event.stopPropagation();
+                action.onClick();
+            }, prefix: jsxRuntime.jsx(ActionIcon, { action: action }), size: "small", variant: "secondary", children: action.label })));
+    }
+    return (jsxRuntime.jsxs("div", { className: "flex items-center", "data-testid": "row-actions", children: [selectedActions.map((action, index) => (jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-2", icon: action.iconName ? jsxRuntime.jsx(reactComponents.Icon, { name: action.iconName, size: "small" }) : undefined, onClick: event => {
+                    event.stopPropagation();
+                    action.onClick();
+                }, size: "small", variant: "ghost-neutral" }, `selected-action-${index}`))), jsxRuntime.jsx(reactComponents.MoreMenu, { customButton: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "EllipsisHorizontal", size: "medium" }), onClick: event => event.stopPropagation(), size: "small", variant: "ghost-neutral" }), children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { children: [normalActions.map((action, index) => (jsxRuntime.jsx(reactComponents.MenuItem, { disabled: action.disabled || action.loading, label: action.label, onClick: () => {
+                                action.onClick();
+                                close();
+                            }, prefix: jsxRuntime.jsx(ActionIcon, { action: action }), variant: action.variant }, `action-${index}`))), normalActions.length > 0 && dangerActions.length > 0 && jsxRuntime.jsx(reactComponents.MenuDivider, {}), dangerActions.map((action, index) => (jsxRuntime.jsx(reactComponents.MenuItem, { disabled: action.disabled || action.loading, label: action.label, onClick: () => {
+                                action.onClick();
+                                close();
+                            }, prefix: jsxRuntime.jsx(ActionIcon, { action: action }), variant: action.variant }, `danger-action-${index}`)))] })) })] }));
+};
+const ActionIcon = ({ action }) => {
+    if (action.loading) {
+        return jsxRuntime.jsx(reactComponents.Spinner, { size: "small" });
+    }
+    if (action.iconName) {
+        return jsxRuntime.jsx(reactComponents.Icon, { name: action.iconName, size: "medium" });
+    }
+    return null;
+};
+
 /**
  * The SortIndicator is used in the table header to indicate the current sort order of the column.
  * This is a visual only component and does not handle the sorting logic.
@@ -278,24 +342,23 @@ const cvaResizeHandel = cssClassVarianceUtilities.cvaMerge(["absolute", "cursor-
  * @returns {ReactElement} A React element representing the sorting indicator.
  */
 const SortIndicator = ({ sortingState = false, dataTestId, className, ...rest }) => {
-    return (jsxRuntime.jsx("span", { className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, role: "separator", ...rest }));
+    return (jsxRuntime.jsx("div", { className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, role: "separator", ...rest }));
 };
 const cvaSortIndicator = cssClassVarianceUtilities.cvaMerge([
-    "relative",
     "before:block",
-    "before:h-0",
+    "before:h-1",
     "before:absolute",
-    "before:w-0",
-    "before:bottom-0.5",
+    "before:top-[13px]",
+    "before:w-1",
     "before:content-['_']",
     "before:border-4",
     "before:border-solid",
     "before:border-transparent",
     "after:block",
-    "after:h-0",
+    "after:h-1",
     "after:absolute",
-    "after:w-0",
-    "after:-bottom-[9px]",
+    "after:w-1",
+    "after:top-[18px]",
     "after:content-['_']",
     "after:border-4",
     "after:border-solid",
@@ -305,9 +368,9 @@ const cvaSortIndicator = cssClassVarianceUtilities.cvaMerge([
 ], {
     variants: {
         sortingState: {
-            asc: ["before:border-b-primary-600"],
-            desc: ["after:border-t-primary-600"],
-            false: "",
+            asc: ["before:border-b-neutral-400 after:hidden"],
+            desc: ["before:hidden after:border-t-neutral-400"],
+            false: "hidden",
         },
     },
 });
@@ -325,7 +388,7 @@ const cvaSortIndicator = cssClassVarianceUtilities.cvaMerge([
 const TableRoot = ({ dataTestId, className, children, ...rest }) => {
     return (jsxRuntime.jsx("table", { className: cvaTableRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
-const cvaTableRoot = cssClassVarianceUtilities.cvaMerge(["border-spacing-0", "min-w-full", "grid-rows-min-fr", "grid"]);
+const cvaTableRoot = cssClassVarianceUtilities.cvaMerge(["border-spacing-0", "min-w-full", "border-collapse", "grid-rows-min-fr", "grid"]);
 
 const cvaTagsCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
 
@@ -366,9 +429,22 @@ const Tbody = ({ dataTestId, className, children, ...rest }) => {
  * @returns {ReactElement} Td component
  */
 const Td = ({ dataTestId, className, children, ...rest }) => {
-    return (jsxRuntime.jsx("td", { className: cvaTd({ className }), "data-testid": dataTestId, ...rest, children: children }));
+    return (jsxRuntime.jsx("td", { className: cvaTd({ className }), "data-testid": dataTestId, ...rest, children: Array.isArray(children)
+            ? children
+                .filter(Boolean)
+                .map((child, index) => (react.isValidElement(child) ? react.cloneElement(child, { key: index }) : child))
+            : children }));
 };
-const cvaTd = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "align-middle", "py-table-spacing", "px-2", "whitespace-nowrap"]);
+const cvaTd = cssClassVarianceUtilities.cvaMerge([
+    "overflow-hidden",
+    "border-r",
+    "border-neutral-200",
+    "align-middle",
+    "text-ellipsis",
+    "whitespace-nowrap",
+    "py-table-spacing",
+    "px-4",
+]);
 
 const cvaTextCell = cssClassVarianceUtilities.cvaMerge(["truncate", "text-sm"]);
 const cvaTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["grid"]);
@@ -412,25 +488,36 @@ const Tfoot = ({ dataTestId, className, children, ...rest }) => {
  * @param {ThProps} props - The props for the Th component
  * @returns {ReactElement} Th component
  */
-const Th = ({ dataTestId, className, children, tooltipLabel, ...rest }) => {
-    const [showToolTip, setShowTooltipVisible] = react.useState(false);
-    const [thWidth, setThWidth] = react.useState(0);
-    const [childrenWidth, setChildrenWidth] = react.useState(0);
-    react.useEffect(() => {
-        setShowTooltipVisible(thWidth > childrenWidth);
-    }, [thWidth, childrenWidth, tooltipLabel]);
-    return (jsxRuntime.jsx("th", { className: cvaTh({ className }), "data-testid": dataTestId, ref: elementRef => setThWidth(elementRef ? elementRef.clientWidth : 0), ...rest, children: tooltipLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaTooltip(), disabled: showToolTip, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaChildrenContainer(), ref: elementRef => setChildrenWidth(elementRef ? elementRef.clientWidth : 0), children: children }) })) : (jsxRuntime.jsx("div", { className: cvaChildrenContainer(), ref: elementRef => setChildrenWidth(elementRef ? elementRef.clientWidth : 0), children: children })) }));
+const Th = ({ dataTestId, className, children, ...rest }) => {
+    return (jsxRuntime.jsx("th", { className: cvaTh({ className }), "data-testid": dataTestId, ...rest, children: jsxRuntime.jsx("div", { className: cvaChildrenContainer(), children: Array.isArray(children)
+                ? children
+                    .filter(Boolean)
+                    .map((child, index) => (react.isValidElement(child) ? react.cloneElement(child, { key: index }) : child))
+                : children }) }));
 };
 const cvaTh = cssClassVarianceUtilities.cvaMerge([
     "hover:bg-neutral-200",
     "text-sm",
+    "border-r",
+    "border-neutral-200",
     "overflow-hidden",
     "font-medium",
     "whitespace-nowrap",
+    "h-[46px]",
     "p-0",
 ]);
-const cvaTooltip = cssClassVarianceUtilities.cvaMerge(["w-full"]);
-const cvaChildrenContainer = cssClassVarianceUtilities.cvaMerge(["max-w-full", "px-3", "py-table-spacing"]);
+const cvaChildrenContainer = cssClassVarianceUtilities.cvaMerge([
+    "w-full",
+    "min-w-0",
+    "flex",
+    "items-center",
+    "overflow-hidden",
+    "text-ellipsis",
+    "whitespace-nowrap",
+    "pl-4",
+    "py-table-spacing",
+    "pr-2",
+]);
 
 /**
  * The Thead is a wrapper for the thead html element.
@@ -470,7 +557,7 @@ const cvaThead = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "text-lef
 const Tr = ({ dataTestId, className, children, layout = "default", ...rest }) => {
     return (jsxRuntime.jsx("tr", { className: cvaTr({ layout, className }), "data-testid": dataTestId, role: "row", ...rest, children: children }));
 };
-const cvaTr = cssClassVarianceUtilities.cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
+const cvaTr = cssClassVarianceUtilities.cvaMerge(["w-full", "h-max", "border-b", "border-neutral-200"], {
     variants: {
         layout: {
             default: "",
@@ -495,6 +582,7 @@ exports.NoticeCell = NoticeCell;
 exports.NumberCell = NumberCell;
 exports.PlainDateCell = PlainDateCell;
 exports.ResizeHandle = ResizeHandle;
+exports.RowActions = RowActions;
 exports.SortIndicator = SortIndicator;
 exports.TableRoot = TableRoot;
 exports.TagsCell = TagsCell;

package/index.esm.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button, Icon, Heading, Indicator, ExternalLink, Tooltip, Tag, Notice } from '@trackunit/react-components';
+import { Button, Icon, Heading, Indicator, ExternalLink, Tooltip, Tag, Notice, IconButton, MoreMenu, MenuList, MenuItem, MenuDivider, Spinner } from '@trackunit/react-components';
 import { Checkbox } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { formatDateUtil, timeSinceAuto, timeSinceInDays } from '@trackunit/date-and-time-utils';
-import { Fragment, useState, useEffect } from 'react';
+import { Fragment, useState, isValidElement, cloneElement } from 'react';
 import { Temporal } from '@js-temporal/polyfill';
 import { DateTimeFormat } from '@trackunit/shared-utils';
 
@@ -72,7 +72,7 @@ const cvaIdentityCell = cvaMerge(["grid", "items-center", "text-sm"], {
         density: "default",
     },
 });
-const cvaIdentityCellLayout = cvaMerge(["grid", "items-center", "gap-1", "text-sm"], {
+const cvaIdentityCellLayout = cvaMerge(["grid", "items-center", "text-sm"], {
     variants: {
         density: {
             default: "grid-rows-[min-content_auto]",
@@ -83,7 +83,7 @@ const cvaIdentityCellLayout = cvaMerge(["grid", "items-center", "gap-1", "text-s
         density: "default",
     },
 });
-const cvaIdentityCellDetails = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-gray-500"], {
+const cvaIdentityCellDetails = cvaMerge(["flex", "w-full", "min-w-0", "items-center", "truncate", "text-xs", "text-gray-600", "font-medium"], {
     variants: {
         density: {
             default: "pt-0",
@@ -100,7 +100,7 @@ const cvaIdentityCellDetailsItem = cvaMerge(["last:truncate"]);
  * @returns {ReactElement} LinkCell component
  */
 const IdentityCell = ({ className, dataTestId = "identity-cell", density = "default", title, details = [], thumbnail, }) => {
-    return (jsxs("div", { className: cvaIdentityCell({ className, density, hasThumbnail: !!thumbnail }), "data-testid": dataTestId, children: [thumbnail ? (jsx("div", { className: "mr-1 flex h-8 w-8 items-center justify-center overflow-hidden rounded-md", children: thumbnail })) : null, jsxs("div", { className: cvaIdentityCellLayout({ className, density }), children: [jsx("div", { className: "flex w-full min-w-0 truncate text-sm", children: jsx(Heading, { className: "truncate text-sm", dataTestId: `${dataTestId}-name`, variant: "tertiary", children: title }) }), details.length > 0 && (jsx("div", { className: cvaIdentityCellDetails({ className, density }), children: details.map((value, index, array) => (jsxs(Fragment, { children: [jsx("span", { className: cvaIdentityCellDetailsItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-200", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }))] })] }));
+    return (jsxs("div", { className: cvaIdentityCell({ className, density, hasThumbnail: !!thumbnail }), "data-testid": dataTestId, children: [thumbnail ? (jsx("div", { className: "mr-1 flex h-8 w-8 items-center justify-center overflow-hidden rounded-md", children: thumbnail })) : null, jsxs("div", { className: cvaIdentityCellLayout({ className, density }), children: [jsx("div", { className: "flex w-full min-w-0 truncate text-sm", children: jsx(Heading, { className: "truncate text-sm", dataTestId: `${dataTestId}-name`, variant: "tertiary", children: title }) }), details.length > 0 && (jsx("div", { className: cvaIdentityCellDetails({ className, density }), children: details.map((value, index, array) => (jsxs(Fragment, { children: [jsx("span", { className: cvaIdentityCellDetailsItem({ className }), children: value }), index < array.length - 1 && (jsx("div", { className: "mx-0.5 flex items-center", children: jsx(Icon, { className: "w-4 text-neutral-300", color: "neutral", name: "Slash", size: "small" }) }))] }, index))) }))] })] }));
 };
 
 /**
@@ -253,15 +253,79 @@ const ResizeHandle = ({ isResizing = false, dataTestId, onMouseDown: onMouseDown
     };
     return (jsx("div", { className: cvaResizeHandel({ isResizing, className }), "data-testid": dataTestId, onMouseDown: event => onMouseDown(event), role: "separator", ...rest }));
 };
-const cvaResizeHandel = cvaMerge(["absolute", "cursor-col-resize", "right-0", "top-0", "h-full", "w-1", "select-none", "hover:bg-primary-400"], {
+const cvaResizeHandel = cvaMerge([
+    "absolute",
+    "cursor-ew-resize",
+    "z-2",
+    "h-full",
+    "w-2",
+    "top-0",
+    "right-[-3px]",
+    "flex",
+    "items-center",
+    "after:block",
+    "after:left-[calc(50%-2px)]",
+    "after:h-full",
+    "after:z-[1]",
+    "after:absolute",
+    "after:w-0.5",
+    "after:hover:bg-info-500",
+], {
     variants: {
         isResizing: {
-            true: ["bg-primary-500", "opacity-1"],
+            true: ["opacity-1"],
             false: [],
         },
     },
 });
 
+/**
+ * RowActions component displays actions as individual buttons or a dropdown menu
+ * based on the number of actions provided.
+ *
+ * - If there is a single action, it displays a standalone button.
+ * - If there are multiple actions, they are grouped into a dropdown menu.
+ *
+ * @param {RowActionsProps} props - The properties for the component.
+ * @param {Action[]} props.actions - A list of actions to display, including their labels, icons, and handlers.
+ * @returns {JSX.Element} A React component rendering the actions.
+ */
+const RowActions = ({ actions }) => {
+    const selectedActions = actions.filter(action => action.isSelected);
+    const normalActions = actions.filter(action => (action.isVisible ?? true) && action.variant !== "danger");
+    const dangerActions = actions.filter(action => (action.isVisible ?? true) && action.variant === "danger");
+    if (actions.length === 0) {
+        return null;
+    }
+    if (actions.length === 1) {
+        const [action] = actions;
+        return (action &&
+            (action.isVisible ?? true) && (jsx(Button, { disabled: action.disabled || action.loading, onClick: event => {
+                event.stopPropagation();
+                action.onClick();
+            }, prefix: jsx(ActionIcon, { action: action }), size: "small", variant: "secondary", children: action.label })));
+    }
+    return (jsxs("div", { className: "flex items-center", "data-testid": "row-actions", children: [selectedActions.map((action, index) => (jsx(IconButton, { className: "mr-2", icon: action.iconName ? jsx(Icon, { name: action.iconName, size: "small" }) : undefined, onClick: event => {
+                    event.stopPropagation();
+                    action.onClick();
+                }, size: "small", variant: "ghost-neutral" }, `selected-action-${index}`))), jsx(MoreMenu, { customButton: jsx(IconButton, { icon: jsx(Icon, { name: "EllipsisHorizontal", size: "medium" }), onClick: event => event.stopPropagation(), size: "small", variant: "ghost-neutral" }), children: close => (jsxs(MenuList, { children: [normalActions.map((action, index) => (jsx(MenuItem, { disabled: action.disabled || action.loading, label: action.label, onClick: () => {
+                                action.onClick();
+                                close();
+                            }, prefix: jsx(ActionIcon, { action: action }), variant: action.variant }, `action-${index}`))), normalActions.length > 0 && dangerActions.length > 0 && jsx(MenuDivider, {}), dangerActions.map((action, index) => (jsx(MenuItem, { disabled: action.disabled || action.loading, label: action.label, onClick: () => {
+                                action.onClick();
+                                close();
+                            }, prefix: jsx(ActionIcon, { action: action }), variant: action.variant }, `danger-action-${index}`)))] })) })] }));
+};
+const ActionIcon = ({ action }) => {
+    if (action.loading) {
+        return jsx(Spinner, { size: "small" });
+    }
+    if (action.iconName) {
+        return jsx(Icon, { name: action.iconName, size: "medium" });
+    }
+    return null;
+};
+
 /**
  * The SortIndicator is used in the table header to indicate the current sort order of the column.
  * This is a visual only component and does not handle the sorting logic.
@@ -276,24 +340,23 @@ const cvaResizeHandel = cvaMerge(["absolute", "cursor-col-resize", "right-0", "t
  * @returns {ReactElement} A React element representing the sorting indicator.
  */
 const SortIndicator = ({ sortingState = false, dataTestId, className, ...rest }) => {
-    return (jsx("span", { className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, role: "separator", ...rest }));
+    return (jsx("div", { className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, role: "separator", ...rest }));
 };
 const cvaSortIndicator = cvaMerge([
-    "relative",
     "before:block",
-    "before:h-0",
+    "before:h-1",
     "before:absolute",
-    "before:w-0",
-    "before:bottom-0.5",
+    "before:top-[13px]",
+    "before:w-1",
     "before:content-['_']",
     "before:border-4",
     "before:border-solid",
     "before:border-transparent",
     "after:block",
-    "after:h-0",
+    "after:h-1",
     "after:absolute",
-    "after:w-0",
-    "after:-bottom-[9px]",
+    "after:w-1",
+    "after:top-[18px]",
     "after:content-['_']",
     "after:border-4",
     "after:border-solid",
@@ -303,9 +366,9 @@ const cvaSortIndicator = cvaMerge([
 ], {
     variants: {
         sortingState: {
-            asc: ["before:border-b-primary-600"],
-            desc: ["after:border-t-primary-600"],
-            false: "",
+            asc: ["before:border-b-neutral-400 after:hidden"],
+            desc: ["before:hidden after:border-t-neutral-400"],
+            false: "hidden",
         },
     },
 });
@@ -323,7 +386,7 @@ const cvaSortIndicator = cvaMerge([
 const TableRoot = ({ dataTestId, className, children, ...rest }) => {
     return (jsx("table", { className: cvaTableRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
 };
-const cvaTableRoot = cvaMerge(["border-spacing-0", "min-w-full", "grid-rows-min-fr", "grid"]);
+const cvaTableRoot = cvaMerge(["border-spacing-0", "min-w-full", "border-collapse", "grid-rows-min-fr", "grid"]);
 
 const cvaTagsCell = cvaMerge(["flex", "gap-2"]);
 
@@ -364,9 +427,22 @@ const Tbody = ({ dataTestId, className, children, ...rest }) => {
  * @returns {ReactElement} Td component
  */
 const Td = ({ dataTestId, className, children, ...rest }) => {
-    return (jsx("td", { className: cvaTd({ className }), "data-testid": dataTestId, ...rest, children: children }));
+    return (jsx("td", { className: cvaTd({ className }), "data-testid": dataTestId, ...rest, children: Array.isArray(children)
+            ? children
+                .filter(Boolean)
+                .map((child, index) => (isValidElement(child) ? cloneElement(child, { key: index }) : child))
+            : children }));
 };
-const cvaTd = cvaMerge(["overflow-hidden", "align-middle", "py-table-spacing", "px-2", "whitespace-nowrap"]);
+const cvaTd = cvaMerge([
+    "overflow-hidden",
+    "border-r",
+    "border-neutral-200",
+    "align-middle",
+    "text-ellipsis",
+    "whitespace-nowrap",
+    "py-table-spacing",
+    "px-4",
+]);
 
 const cvaTextCell = cvaMerge(["truncate", "text-sm"]);
 const cvaTextCellTooltip = cvaMerge(["grid"]);
@@ -410,25 +486,36 @@ const Tfoot = ({ dataTestId, className, children, ...rest }) => {
  * @param {ThProps} props - The props for the Th component
  * @returns {ReactElement} Th component
  */
-const Th = ({ dataTestId, className, children, tooltipLabel, ...rest }) => {
-    const [showToolTip, setShowTooltipVisible] = useState(false);
-    const [thWidth, setThWidth] = useState(0);
-    const [childrenWidth, setChildrenWidth] = useState(0);
-    useEffect(() => {
-        setShowTooltipVisible(thWidth > childrenWidth);
-    }, [thWidth, childrenWidth, tooltipLabel]);
-    return (jsx("th", { className: cvaTh({ className }), "data-testid": dataTestId, ref: elementRef => setThWidth(elementRef ? elementRef.clientWidth : 0), ...rest, children: tooltipLabel ? (jsx(Tooltip, { className: cvaTooltip(), disabled: showToolTip, label: tooltipLabel, placement: "bottom", children: jsx("div", { className: cvaChildrenContainer(), ref: elementRef => setChildrenWidth(elementRef ? elementRef.clientWidth : 0), children: children }) })) : (jsx("div", { className: cvaChildrenContainer(), ref: elementRef => setChildrenWidth(elementRef ? elementRef.clientWidth : 0), children: children })) }));
+const Th = ({ dataTestId, className, children, ...rest }) => {
+    return (jsx("th", { className: cvaTh({ className }), "data-testid": dataTestId, ...rest, children: jsx("div", { className: cvaChildrenContainer(), children: Array.isArray(children)
+                ? children
+                    .filter(Boolean)
+                    .map((child, index) => (isValidElement(child) ? cloneElement(child, { key: index }) : child))
+                : children }) }));
 };
 const cvaTh = cvaMerge([
     "hover:bg-neutral-200",
     "text-sm",
+    "border-r",
+    "border-neutral-200",
     "overflow-hidden",
     "font-medium",
     "whitespace-nowrap",
+    "h-[46px]",
     "p-0",
 ]);
-const cvaTooltip = cvaMerge(["w-full"]);
-const cvaChildrenContainer = cvaMerge(["max-w-full", "px-3", "py-table-spacing"]);
+const cvaChildrenContainer = cvaMerge([
+    "w-full",
+    "min-w-0",
+    "flex",
+    "items-center",
+    "overflow-hidden",
+    "text-ellipsis",
+    "whitespace-nowrap",
+    "pl-4",
+    "py-table-spacing",
+    "pr-2",
+]);
 
 /**
  * The Thead is a wrapper for the thead html element.
@@ -468,7 +555,7 @@ const cvaThead = cvaMerge(["bg-neutral-100", "text-left"], {
 const Tr = ({ dataTestId, className, children, layout = "default", ...rest }) => {
     return (jsx("tr", { className: cvaTr({ layout, className }), "data-testid": dataTestId, role: "row", ...rest, children: children }));
 };
-const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
+const cvaTr = cvaMerge(["w-full", "h-max", "border-b", "border-neutral-200"], {
     variants: {
         layout: {
             default: "",
@@ -480,4 +567,4 @@ const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
     },
 });
 
-export { ButtonCell, CheckboxCell, DateTimeCell, IdentityCell, ImageCell, IndicatorCell, LinkCell, MultiRowTableCell, MultiValueTextCell, NoticeCell, NumberCell, PlainDateCell, ResizeHandle, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };
+export { ButtonCell, CheckboxCell, DateTimeCell, IdentityCell, ImageCell, IndicatorCell, LinkCell, MultiRowTableCell, MultiValueTextCell, NoticeCell, NumberCell, PlainDateCell, ResizeHandle, RowActions, SortIndicator, TableRoot, TagsCell, Tbody, Td, TextCell, Tfoot, Th, Thead, Tr };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "1.3.131",
+  "version": "1.3.134",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -9,12 +9,12 @@
   "dependencies": {
     "react": "19.0.0",
     "@js-temporal/polyfill": "^0.4.4",
-    "@trackunit/react-components": "1.4.115",
-    "@trackunit/ui-icons": "1.3.97",
-    "@trackunit/react-form-components": "1.3.131",
-    "@trackunit/css-class-variance-utilities": "1.3.97",
-    "@trackunit/date-and-time-utils": "1.3.97",
-    "@trackunit/shared-utils": "1.5.97"
+    "@trackunit/react-components": "1.4.118",
+    "@trackunit/ui-icons": "1.3.100",
+    "@trackunit/react-form-components": "1.3.134",
+    "@trackunit/css-class-variance-utilities": "1.3.98",
+    "@trackunit/date-and-time-utils": "1.3.98",
+    "@trackunit/shared-utils": "1.5.98"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/components/RowActions/RowActions.d.ts

@@ -0,0 +1,28 @@
+import { MenuItemVariant } from "@trackunit/react-components";
+import { IconName } from "@trackunit/ui-icons";
+export type Action = {
+    label: string;
+    variant?: MenuItemVariant;
+    onClick: () => void;
+    iconName?: IconName;
+    isSelected?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    isVisible?: boolean | null;
+};
+interface RowActionsProps {
+    actions: Action[];
+}
+/**
+ * RowActions component displays actions as individual buttons or a dropdown menu
+ * based on the number of actions provided.
+ *
+ * - If there is a single action, it displays a standalone button.
+ * - If there are multiple actions, they are grouped into a dropdown menu.
+ *
+ * @param {RowActionsProps} props - The properties for the component.
+ * @param {Action[]} props.actions - A list of actions to display, including their labels, icons, and handlers.
+ * @returns {JSX.Element} A React component rendering the actions.
+ */
+export declare const RowActions: ({ actions }: RowActionsProps) => false | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/src/components/RowActions/RowActions.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { RowActions } from "./RowActions";
+declare const meta: Meta<typeof RowActions>;
+export default meta;
+export declare const packageName: () => import("react/jsx-runtime").JSX.Element;
+export declare const SingleAction: StoryObj<typeof RowActions>;
+export declare const MultipleActions: StoryObj<typeof RowActions>;
+export declare const NoActions: StoryObj<typeof RowActions>;
+export declare const OnlyDangerActions: StoryObj<typeof RowActions>;

package/src/components/Th.d.ts

@@ -13,10 +13,6 @@ export interface ThProps extends CommonProps, React.HTMLAttributes<HTMLTableCell
      * Children to render in the table cell.
      */
     children?: ReactNode;
-    /**
-     * Label for the tooltip.
-     */
-    tooltipLabel?: string;
 }
 /**
  * The Th is a wrapper for the th html element.
@@ -28,4 +24,4 @@ export interface ThProps extends CommonProps, React.HTMLAttributes<HTMLTableCell
  * @param {ThProps} props - The props for the Th component
  * @returns {ReactElement} Th component
  */
-export declare const Th: ({ dataTestId, className, children, tooltipLabel, ...rest }: ThProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Th: ({ dataTestId, className, children, ...rest }: ThProps) => import("react/jsx-runtime").JSX.Element;

package/src/index.d.ts

@@ -11,6 +11,7 @@ export * from "./components/NoticeCell/NoticeCell";
 export * from "./components/NumberCell/NumberCell";
 export * from "./components/PlainDateCell/PlainDateCell";
 export * from "./components/ResizeHandle";
+export * from "./components/RowActions/RowActions";
 export * from "./components/SortIndicator";
 export * from "./components/TableRoot";
 export * from "./components/TagsCell/TagsCell";