@trackunit/react-table-base-components 2.12.16 → 2.13.0

package/index.cjs.js

@@ -147,8 +147,8 @@ const cvaCheckboxCell = cssClassVarianceUtilities.cva({ base: [""] });
  * @param {CheckboxCellProps} props - The props for the CheckboxCell component
  * @returns {ReactElement} CheckboxCell component
  */
-const CheckboxCell = ({ checked, className, "data-testid": dataTestId, style }) => {
-    return (jsxRuntime.jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, style: style, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: checked, readOnly: true }) }));
+const CheckboxCell = ({ checked, className, "data-testid": dataTestId, style, ref }) => {
+    return (jsxRuntime.jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, ref: ref, style: style, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: checked, readOnly: true }) }));
 };
 
 const cvaDateTimeCell = cssClassVarianceUtilities.cva({ base: [""] });
@@ -528,8 +528,8 @@ const cvaSecondaryRowText = cssClassVarianceUtilities.cva({
  * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
  * @returns {ReactElement} MultiRowTableCell component
  */
-const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, style, }) => {
-    return (jsxRuntime.jsx("div", { className: cvaMultiRowTableCell({ className }), style: style, children: jsxRuntime.jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsxRuntime.jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsxRuntime.jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
+const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, style, ref, }) => {
+    return (jsxRuntime.jsx("div", { className: cvaMultiRowTableCell({ className }), ref: ref, style: style, children: jsxRuntime.jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsxRuntime.jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsxRuntime.jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
 };
 
 /**
@@ -541,7 +541,7 @@ const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, classNa
  * @param {ListTooltipProps<TItem>} props Component props.
  * @returns {ReactNode} Tooltip list markup.
  */
-const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loading = false, style, }) => {
+const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loading = false, className, style, ref, }) => {
     const toDisplay = (item, index) => {
         if (getLabel) {
             return getLabel(item, index);
@@ -573,7 +573,7 @@ const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loadi
     if (loading) {
         return jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", mode: "dark" });
     }
-    return (jsxRuntime.jsx("ul", { className: "list-inside !ps-1 pl-1", "data-testid": dataTestId, style: style, children: items.map((item, index) => {
+    return (jsxRuntime.jsx("ul", { className: cssClassVarianceUtilities.cx("list-inside !ps-1 pl-1", className), "data-testid": dataTestId, ref: ref, style: style, children: items.map((item, index) => {
             const label = toDisplay(item, index);
             if (label === "" || label === null || label === undefined) {
                 return null;
@@ -753,7 +753,7 @@ const ResizeHandle = ({ isResizing = false, "data-testid": dataTestId, onMouseDo
         document.body.classList.add(resizeCursorClass);
         onMouseDownHandler?.(event);
     };
-    return (jsxRuntime.jsx("div", { className: cvaResizeHandel({ isResizing, className }), "data-testid": dataTestId, onMouseDown: onMouseDown, role: "separator", ...rest }));
+    return (jsxRuntime.jsx("div", { className: cvaResizeHandel({ isResizing, className }), "data-testid": dataTestId, onMouseDown: onMouseDown, ref: ref, role: "separator", ...rest }));
 };
 const cvaResizeHandel = cssClassVarianceUtilities.cva({
     base: [
@@ -892,8 +892,9 @@ const cvaResizeHandel = cssClassVarianceUtilities.cva({
  * @param {RowActionsProps} props - The properties for the component.
  * @returns {ReactElement} A React component rendering the row actions.
  */
-const RowActions = ({ actions, style }) => {
+const RowActions = ({ actions, className, "data-testid": dataTestId, style, ref }) => {
     const [t] = useTranslation();
+    const rootRef = reactComponents.useMergeRefs([ref]);
     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");
@@ -903,12 +904,12 @@ const RowActions = ({ actions, style }) => {
     if (actions.length === 1) {
         const [action] = actions;
         return (action &&
-            (action.isVisible ?? true) && (jsxRuntime.jsx(reactComponents.Button, { disabled: action.disabled || action.loading, onClick: event => {
+            (action.isVisible ?? true) && (jsxRuntime.jsx(reactComponents.Button, { className: className, "data-testid": dataTestId, disabled: action.disabled || action.loading, onClick: event => {
                 event.stopPropagation();
                 action.onClick(event);
-            }, prefix: jsxRuntime.jsx(IconWithLoader, { action: action, size: "small" }), size: "small", style: style, variant: "secondary", children: action.label })));
+            }, prefix: jsxRuntime.jsx(IconWithLoader, { action: action, size: "small" }), ref: rootRef, size: "small", style: style, variant: "secondary", children: action.label })));
     }
-    return (jsxRuntime.jsxs("div", { className: "flex items-center", "data-testid": "row-actions", style: style, children: [selectedActions.map((action, index) => (jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-2", icon: jsxRuntime.jsx(reactComponents.Icon, { name: action.iconName ?? "QuestionMarkCircle", size: "small" }), onClick: event => {
+    return (jsxRuntime.jsxs("div", { className: cssClassVarianceUtilities.cx("flex items-center", className), "data-testid": dataTestId ?? "row-actions", ref: rootRef, style: style, children: [selectedActions.map((action, index) => (jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-2", icon: jsxRuntime.jsx(reactComponents.Icon, { name: action.iconName ?? "QuestionMarkCircle", size: "small" }), onClick: event => {
                     event.stopPropagation();
                     action.onClick(event);
                 }, size: "small", title: action.label, 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", title: t("rowActions.moreActions"), variant: "ghost-neutral" }), children: close => (jsxRuntime.jsxs(reactComponents.MenuContent, { children: [normalActions.map((action, index) => (jsxRuntime.jsx(reactComponents.MenuItem, { disabled: action.disabled || action.loading, label: action.label, onClick: event => {
@@ -1002,8 +1003,8 @@ const cvaSortIndicator = cssClassVarianceUtilities.cva({
  * @param {TableRootProps} props - The props for the TableRoot component
  * @returns {ReactElement} TableRoot component
  */
-const TableRoot = ({ "data-testid": dataTestId, className, children, ...rest }) => {
-    return (jsxRuntime.jsx("table", { className: cvaTableRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
+const TableRoot = ({ "data-testid": dataTestId, className, children, ref, ...rest }) => {
+    return (jsxRuntime.jsx("table", { className: cvaTableRoot({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: children }));
 };
 const cvaTableRoot = cssClassVarianceUtilities.cva({ base: ["border-spacing-0", "min-w-full", "border-collapse", "grid-rows-min-fr", "grid"] });
 

package/index.esm.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
-import { Button, Icon, Highlight, Heading, ExternalLink, DetailsList, Indicator, Spinner, Tooltip, Text, Tag, Notice, IconButton, MoreMenu, MenuContent, MenuItem, MenuDivider, useMeasure, useMergeRefs } from '@trackunit/react-components';
+import { Button, Icon, Highlight, Heading, ExternalLink, DetailsList, Indicator, Spinner, Tooltip, Text, Tag, Notice, useMergeRefs, IconButton, MoreMenu, MenuContent, MenuItem, MenuDivider, useMeasure } from '@trackunit/react-components';
 import { twMerge } from 'tailwind-merge';
 import { Checkbox } from '@trackunit/react-form-components';
-import { cva } from '@trackunit/css-class-variance-utilities';
+import { cva, cx } from '@trackunit/css-class-variance-utilities';
 import { formatDateUtil, timeSinceAuto, timeSinceInDays, Temporal } from '@trackunit/date-and-time-utils';
 import { useTimezone, useLocale, useHourCycle } from '@trackunit/react-date-and-time-hooks';
 import { useMemo, useState, useEffect, isValidElement, cloneElement } from 'react';
@@ -145,8 +145,8 @@ const cvaCheckboxCell = cva({ base: [""] });
  * @param {CheckboxCellProps} props - The props for the CheckboxCell component
  * @returns {ReactElement} CheckboxCell component
  */
-const CheckboxCell = ({ checked, className, "data-testid": dataTestId, style }) => {
-    return (jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, style: style, children: jsx(Checkbox, { checked: checked, readOnly: true }) }));
+const CheckboxCell = ({ checked, className, "data-testid": dataTestId, style, ref }) => {
+    return (jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, ref: ref, style: style, children: jsx(Checkbox, { checked: checked, readOnly: true }) }));
 };
 
 const cvaDateTimeCell = cva({ base: [""] });
@@ -526,8 +526,8 @@ const cvaSecondaryRowText = cva({
  * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
  * @returns {ReactElement} MultiRowTableCell component
  */
-const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, style, }) => {
-    return (jsx("div", { className: cvaMultiRowTableCell({ className }), style: style, children: jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
+const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, style, ref, }) => {
+    return (jsx("div", { className: cvaMultiRowTableCell({ className }), ref: ref, style: style, children: jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsx("div", { className: cvaMainRowText(), children: main }) : main, typeof secondary === "string" && secondary !== "" ? (jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
 };
 
 /**
@@ -539,7 +539,7 @@ const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, classNa
  * @param {ListTooltipProps<TItem>} props Component props.
  * @returns {ReactNode} Tooltip list markup.
  */
-const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loading = false, style, }) => {
+const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loading = false, className, style, ref, }) => {
     const toDisplay = (item, index) => {
         if (getLabel) {
             return getLabel(item, index);
@@ -571,7 +571,7 @@ const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loadi
     if (loading) {
         return jsx(Spinner, { centering: "centered", mode: "dark" });
     }
-    return (jsx("ul", { className: "list-inside !ps-1 pl-1", "data-testid": dataTestId, style: style, children: items.map((item, index) => {
+    return (jsx("ul", { className: cx("list-inside !ps-1 pl-1", className), "data-testid": dataTestId, ref: ref, style: style, children: items.map((item, index) => {
             const label = toDisplay(item, index);
             if (label === "" || label === null || label === undefined) {
                 return null;
@@ -751,7 +751,7 @@ const ResizeHandle = ({ isResizing = false, "data-testid": dataTestId, onMouseDo
         document.body.classList.add(resizeCursorClass);
         onMouseDownHandler?.(event);
     };
-    return (jsx("div", { className: cvaResizeHandel({ isResizing, className }), "data-testid": dataTestId, onMouseDown: onMouseDown, role: "separator", ...rest }));
+    return (jsx("div", { className: cvaResizeHandel({ isResizing, className }), "data-testid": dataTestId, onMouseDown: onMouseDown, ref: ref, role: "separator", ...rest }));
 };
 const cvaResizeHandel = cva({
     base: [
@@ -890,8 +890,9 @@ const cvaResizeHandel = cva({
  * @param {RowActionsProps} props - The properties for the component.
  * @returns {ReactElement} A React component rendering the row actions.
  */
-const RowActions = ({ actions, style }) => {
+const RowActions = ({ actions, className, "data-testid": dataTestId, style, ref }) => {
     const [t] = useTranslation();
+    const rootRef = useMergeRefs([ref]);
     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");
@@ -901,12 +902,12 @@ const RowActions = ({ actions, style }) => {
     if (actions.length === 1) {
         const [action] = actions;
         return (action &&
-            (action.isVisible ?? true) && (jsx(Button, { disabled: action.disabled || action.loading, onClick: event => {
+            (action.isVisible ?? true) && (jsx(Button, { className: className, "data-testid": dataTestId, disabled: action.disabled || action.loading, onClick: event => {
                 event.stopPropagation();
                 action.onClick(event);
-            }, prefix: jsx(IconWithLoader, { action: action, size: "small" }), size: "small", style: style, variant: "secondary", children: action.label })));
+            }, prefix: jsx(IconWithLoader, { action: action, size: "small" }), ref: rootRef, size: "small", style: style, variant: "secondary", children: action.label })));
     }
-    return (jsxs("div", { className: "flex items-center", "data-testid": "row-actions", style: style, children: [selectedActions.map((action, index) => (jsx(IconButton, { className: "mr-2", icon: jsx(Icon, { name: action.iconName ?? "QuestionMarkCircle", size: "small" }), onClick: event => {
+    return (jsxs("div", { className: cx("flex items-center", className), "data-testid": dataTestId ?? "row-actions", ref: rootRef, style: style, children: [selectedActions.map((action, index) => (jsx(IconButton, { className: "mr-2", icon: jsx(Icon, { name: action.iconName ?? "QuestionMarkCircle", size: "small" }), onClick: event => {
                     event.stopPropagation();
                     action.onClick(event);
                 }, size: "small", title: action.label, variant: "ghost-neutral" }, `selected-action-${index}`))), jsx(MoreMenu, { customButton: jsx(IconButton, { icon: jsx(Icon, { name: "EllipsisHorizontal", size: "medium" }), onClick: event => event.stopPropagation(), size: "small", title: t("rowActions.moreActions"), variant: "ghost-neutral" }), children: close => (jsxs(MenuContent, { children: [normalActions.map((action, index) => (jsx(MenuItem, { disabled: action.disabled || action.loading, label: action.label, onClick: event => {
@@ -1000,8 +1001,8 @@ const cvaSortIndicator = cva({
  * @param {TableRootProps} props - The props for the TableRoot component
  * @returns {ReactElement} TableRoot component
  */
-const TableRoot = ({ "data-testid": dataTestId, className, children, ...rest }) => {
-    return (jsx("table", { className: cvaTableRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
+const TableRoot = ({ "data-testid": dataTestId, className, children, ref, ...rest }) => {
+    return (jsx("table", { className: cvaTableRoot({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: children }));
 };
 const cvaTableRoot = cva({ base: ["border-spacing-0", "min-w-full", "border-collapse", "grid-rows-min-fr", "grid"] });
 

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "2.12.16",
+  "version": "2.13.0",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "3.8.9",
-    "@trackunit/ui-icons": "1.17.9",
-    "@trackunit/react-form-components": "2.10.16",
-    "@trackunit/css-class-variance-utilities": "2.3.9",
-    "@trackunit/date-and-time-utils": "1.17.9",
-    "@trackunit/react-date-and-time-hooks": "2.10.15",
-    "@trackunit/shared-utils": "1.19.9",
-    "@trackunit/i18n-library-translation": "2.8.10",
+    "@trackunit/react-components": "3.9.0",
+    "@trackunit/ui-icons": "1.18.0",
+    "@trackunit/react-form-components": "2.11.0",
+    "@trackunit/css-class-variance-utilities": "2.4.0",
+    "@trackunit/date-and-time-utils": "1.18.0",
+    "@trackunit/react-date-and-time-hooks": "2.11.0",
+    "@trackunit/shared-utils": "1.20.0",
+    "@trackunit/i18n-library-translation": "2.9.0",
     "tailwind-merge": "^2.0.0"
   },
   "peerDependencies": {

package/src/components/CheckboxCell/CheckboxCell.d.ts

@@ -1,5 +1,5 @@
-import { CommonProps, type Styleable } from "@trackunit/react-components";
-export interface CheckboxCellProps extends CommonProps, Styleable {
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
+export interface CheckboxCellProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     checked: boolean;
 }
 /**
@@ -21,4 +21,4 @@ export interface CheckboxCellProps extends CommonProps, Styleable {
  * @param {CheckboxCellProps} props - The props for the CheckboxCell component
  * @returns {ReactElement} CheckboxCell component
  */
-export declare const CheckboxCell: ({ checked, className, "data-testid": dataTestId, style }: CheckboxCellProps) => import("react").JSX.Element;
+export declare const CheckboxCell: ({ checked, className, "data-testid": dataTestId, style, ref }: CheckboxCellProps) => import("react").JSX.Element;

package/src/components/HighlightCell/HighlightCell.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, HighlightProps, Refable } from "@trackunit/react-components";
+import { CommonProps, HighlightProps, Refable, type Styleable } from "@trackunit/react-components";
 import { HTMLAttributes } from "react";
-export interface HighlightCellProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement>, Refable<HTMLDivElement> {
+export interface HighlightCellProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement>, Styleable, Refable<HTMLDivElement> {
     /**
      * A id that can be used in tests to get the component
      */

package/src/components/MultiRowTableCell/MultiRowTableCell.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, type Styleable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { ReactNode } from "react";
-export interface MultiRowTableCellProps extends CommonProps, Styleable {
+export interface MultiRowTableCellProps extends CommonProps, Styleable, Refable<HTMLDivElement> {
     /**
      * Main row of the cell.
      */
@@ -32,4 +32,4 @@ export interface MultiRowTableCellProps extends CommonProps, Styleable {
  * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
  * @returns {ReactElement} MultiRowTableCell component
  */
-export declare const MultiRowTableCell: ({ main, secondary, "data-testid": dataTestId, className, style, }: MultiRowTableCellProps) => import("react").JSX.Element;
+export declare const MultiRowTableCell: ({ main, secondary, "data-testid": dataTestId, className, style, ref, }: MultiRowTableCellProps) => import("react").JSX.Element;

package/src/components/MultiValueTextCell/ListTooltip.d.ts

@@ -1,15 +1,13 @@
-import { type Styleable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { Key, ReactNode } from "react";
 /**
  * Props for a generic tooltip list component.
  *
  * @template TItem Element type of the list.
  */
-export type ListTooltipProps<TItem = unknown> = Styleable & {
+export type ListTooltipProps<TItem = unknown> = CommonProps & Styleable & Refable<HTMLUListElement> & {
     /** Items to render inside the tooltip. */
     items: Array<TItem>;
-    /** Data test id for testing. */
-    "data-testid"?: string;
     /**
      * Custom label extractor. If omitted, strings/numbers/booleans are stringified,
      * React elements are returned as-is, and other objects are serialized.
@@ -32,4 +30,4 @@ export type ListTooltipProps<TItem = unknown> = Styleable & {
  * @param {ListTooltipProps<TItem>} props Component props.
  * @returns {ReactNode} Tooltip list markup.
  */
-export declare const ListTooltip: <TItem = unknown>({ items, "data-testid": dataTestId, getLabel, getKey, loading, style, }: ListTooltipProps<TItem>) => import("react").JSX.Element;
+export declare const ListTooltip: <TItem = unknown>({ items, "data-testid": dataTestId, getLabel, getKey, loading, className, style, ref, }: ListTooltipProps<TItem>) => import("react").JSX.Element;

package/src/components/ResizeHandle.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { HTMLAttributes, ReactElement } from "react";
-export interface ResizeHandelProps extends CommonProps, HTMLAttributes<HTMLDivElement>, Refable<HTMLDivElement> {
+export interface ResizeHandelProps extends CommonProps, HTMLAttributes<HTMLDivElement>, Styleable, Refable<HTMLDivElement> {
     isResizing?: boolean;
 }
 /**

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

@@ -1,4 +1,4 @@
-import { MenuItemVariant, type Styleable } from "@trackunit/react-components";
+import { CommonProps, MenuItemVariant, Refable, type Styleable } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
 import { MouseEventHandler } from "react";
 export type Action = {
@@ -19,7 +19,7 @@ export type Action = {
     /** Controls visibility of the action. Defaults to true if not specified */
     isVisible?: boolean | null;
 };
-export interface RowActionsProps extends Styleable {
+export interface RowActionsProps extends CommonProps, Styleable, Refable<HTMLElement> {
     /**
      * Array of actions to display. Single actions render as a button,
      * multiple actions render as a dropdown menu with selected actions as icon buttons.
@@ -136,4 +136,4 @@ export interface RowActionsProps extends Styleable {
  * @param {RowActionsProps} props - The properties for the component.
  * @returns {ReactElement} A React component rendering the row actions.
  */
-export declare const RowActions: ({ actions, style }: RowActionsProps) => false | import("react").JSX.Element | null | undefined;
+export declare const RowActions: ({ actions, className, "data-testid": dataTestId, style, ref }: RowActionsProps) => false | import("react").JSX.Element | null | undefined;

package/src/components/SortIndicator.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { HTMLAttributes, ReactElement } from "react";
-export interface SortIndicatorProps extends CommonProps, HTMLAttributes<HTMLSpanElement>, Refable<HTMLDivElement> {
+export interface SortIndicatorProps extends CommonProps, HTMLAttributes<HTMLSpanElement>, Styleable, Refable<HTMLDivElement> {
     /**
      * A id that can be used in tests to get the component
      */

package/src/components/TableRoot.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { HTMLAttributes, ReactNode } from "react";
-export interface TableRootProps extends CommonProps, HTMLAttributes<HTMLTableElement> {
+export interface TableRootProps extends CommonProps, HTMLAttributes<HTMLTableElement>, Styleable, Refable<HTMLTableElement> {
     /**
      * A id that can be used in tests to get the component
      */
@@ -24,4 +24,4 @@ export interface TableRootProps extends CommonProps, HTMLAttributes<HTMLTableEle
  * @param {TableRootProps} props - The props for the TableRoot component
  * @returns {ReactElement} TableRoot component
  */
-export declare const TableRoot: ({ "data-testid": dataTestId, className, children, ...rest }: TableRootProps) => import("react").JSX.Element;
+export declare const TableRoot: ({ "data-testid": dataTestId, className, children, ref, ...rest }: TableRootProps) => import("react").JSX.Element;

package/src/components/TagsCell/TagsCell.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable, TagProps } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable, TagProps } from "@trackunit/react-components";
 import { HTMLAttributes } from "react";
-export interface TagsCellProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement>, Refable<HTMLDivElement> {
+export interface TagsCellProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement>, Styleable, Refable<HTMLDivElement> {
     /**
      * A id that can be used in tests to get the component
      */

package/src/components/Tbody.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { HTMLAttributes, ReactNode } from "react";
-export interface TbodyProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement>, Refable<HTMLTableSectionElement> {
+export interface TbodyProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement>, Styleable, Refable<HTMLTableSectionElement> {
     /**
      * A id that can be used in tests to get the component
      */

package/src/components/Td.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { HTMLAttributes, ReactNode } from "react";
-export interface TdProps extends CommonProps, HTMLAttributes<HTMLTableCellElement>, Refable<HTMLTableCellElement> {
+export interface TdProps extends CommonProps, HTMLAttributes<HTMLTableCellElement>, Styleable, Refable<HTMLTableCellElement> {
     /**
      * A id that can be used in tests to get the component
      */

package/src/components/Tfoot.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { HTMLAttributes, ReactNode } from "react";
-export interface TfootProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement>, Refable<HTMLTableSectionElement> {
+export interface TfootProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement>, Styleable, Refable<HTMLTableSectionElement> {
     /**
      * A id that can be used in tests to get the component
      */

package/src/components/Th.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { HTMLAttributes, ReactNode } from "react";
-export interface ThProps extends CommonProps, HTMLAttributes<HTMLTableCellElement>, Refable<HTMLTableCellElement> {
+export interface ThProps extends CommonProps, HTMLAttributes<HTMLTableCellElement>, Styleable, Refable<HTMLTableCellElement> {
     /**
      * A id that can be used in tests to get the component
      */

package/src/components/Thead.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { HTMLAttributes, ReactNode } from "react";
-export interface TheadProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement>, Refable<HTMLTableSectionElement> {
+export interface TheadProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement>, Styleable, Refable<HTMLTableSectionElement> {
     /**
      * A id that can be used in tests to get the component
      */

package/src/components/Tr.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, Refable } from "@trackunit/react-components";
+import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
 import { HTMLAttributes, ReactNode } from "react";
-export interface TrProps extends CommonProps, HTMLAttributes<HTMLTableRowElement>, Refable<HTMLTableRowElement> {
+export interface TrProps extends CommonProps, HTMLAttributes<HTMLTableRowElement>, Styleable, Refable<HTMLTableRowElement> {
     /**
      * A id that can be used in tests to get the component
      */