@trackunit/react-table-base-components 1.13.18 → 1.13.22

package/index.cjs.js

@@ -186,8 +186,8 @@ const cvaHighlightCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
  * @param {HighlightCellProps} props - The props for the HighlightCell component
  * @returns {ReactElement} HighlightCell component
  */
-const HighlightCell = ({ className, highlights, "data-testid": dataTestId }) => {
-    return (jsxRuntime.jsx("div", { className: cvaHighlightCell({ className }), "data-testid": dataTestId, children: highlights.map((highlight, index) => (jsxRuntime.jsx(reactComponents.Highlight, { color: "warning",
+const HighlightCell = ({ className, highlights, "data-testid": dataTestId, ref }) => {
+    return (jsxRuntime.jsx("div", { className: cvaHighlightCell({ className }), "data-testid": dataTestId, ref: ref, children: highlights.map((highlight, index) => (jsxRuntime.jsx(reactComponents.Highlight, { color: "warning",
             size: "medium",
             "data-testid": `${dataTestId}-${index}`,
             ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
@@ -274,14 +274,14 @@ const cvaIdentityCell = cssClassVarianceUtilities.cvaMerge(["grid", "items-cente
  * @param {IdentityCellProps} props - The props for the IdentityCell component
  * @returns {ReactElement} IdentityCell component
  */
-const IdentityCell = ({ link, className, "data-testid": dataTestId, title, details = [], thumbnail, }) => {
+const IdentityCell = ({ link, className, "data-testid": dataTestId, ref, title, details = [], thumbnail, }) => {
     const [href, setHref] = react.useState(undefined);
     react.useEffect(() => {
         if (link) {
             link.href().then(setHref);
         }
     }, [link]);
-    return (jsxRuntime.jsxs("div", { className: cvaIdentityCell({ className, 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: "grid grid-rows-[min-content_auto] items-center text-sm", children: [jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center truncate text-sm", children: jsxRuntime.jsx(reactComponents.Heading, { className: "truncate text-sm", "data-testid": dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: !link ? (title) : (jsxRuntime.jsx(reactComponents.ExternalLink, { className: "truncate", color: "neutral", href: href ?? "", onClick: async (e) => {
+    return (jsxRuntime.jsxs("div", { className: cvaIdentityCell({ className, hasThumbnail: !!thumbnail }), "data-testid": dataTestId, ref: ref, 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: "grid grid-rows-[min-content_auto] items-center text-sm", children: [jsxRuntime.jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center truncate text-sm", children: jsxRuntime.jsx(reactComponents.Heading, { className: "truncate text-sm", "data-testid": dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: !link ? (title) : (jsxRuntime.jsx(reactComponents.ExternalLink, { className: "truncate", color: "neutral", href: href ?? "", onClick: async (e) => {
                                     // Allow Cmd/Ctrl+Click, Shift+Click, or middle-click to open in new tab
                                     const hasModifierKey = e.ctrlKey || e.metaKey || e.shiftKey;
                                     const isMiddleClick = e.button === 1;
@@ -301,8 +301,8 @@ const IdentityCell = ({ link, className, "data-testid": dataTestId, title, detai
  * @param {ImageCellProps} props - The props for the Image component.
  * @returns {ReactElement} The Image component.
  */
-const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, "data-testid": dataTestId, ...rest }) => {
-    return jsxRuntime.jsx("img", { alt: alt, "data-testid": dataTestId, height: height, src: imageUrl, width: width, ...rest });
+const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, "data-testid": dataTestId, ref, ...rest }) => {
+    return jsxRuntime.jsx("img", { alt: alt, "data-testid": dataTestId, height: height, ref: ref, src: imageUrl, width: width, ...rest });
 };
 
 /**
@@ -311,8 +311,8 @@ const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, "data-testid
  * @param {IndicatorCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const IndicatorCell = ({ withBackground = false, weight = "normal", ...rest }) => {
-    return jsxRuntime.jsx(reactComponents.Indicator, { weight: weight, withBackground: withBackground, ...rest });
+const IndicatorCell = ({ withBackground = false, weight = "normal", ref, ...rest }) => {
+    return jsxRuntime.jsx(reactComponents.Indicator, { ref: ref, weight: weight, withBackground: withBackground, ...rest });
 };
 
 const cvaLinkCell = cssClassVarianceUtilities.cvaMerge(["text-sm"]);
@@ -376,12 +376,12 @@ const cvaLinkCell = cssClassVarianceUtilities.cvaMerge(["text-sm"]);
  * @param {LinkCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const LinkCell = ({ link, type, className, ...rest }) => {
+const LinkCell = ({ link, type, className, ref, ...rest }) => {
     const linkPrefix = type === "LINK" ? "" : type === "PHONE" ? "tel:" : "mailto:";
     const handleClick = event => {
         event.stopPropagation();
     };
-    return (jsxRuntime.jsx(reactComponents.ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ...rest, color: "neutral", onClick: handleClick, children: link }));
+    return (jsxRuntime.jsx(reactComponents.ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ref: ref, ...rest, color: "neutral", onClick: handleClick, children: link }));
 };
 
 const cvaMultiRowTableCellSection = cssClassVarianceUtilities.cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);
@@ -459,12 +459,12 @@ const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["whites
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
  * @returns {ReactElement} MultiValueTextCell component
  */
-const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, }) => {
+const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, }) => {
     const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
     };
-    return count && count > 0 ? (jsxRuntime.jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, children: [icon ? (jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, className: "inline-flex items-center", "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: icon })) : null, jsxRuntime.jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, className: "inline", "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: content ?? "" }) }), count > 1 ? (jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, className: "inline", "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: !countTooltip, label: countTooltip ?? "", placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) })) : null] })) : null;
+    return count && count > 0 ? (jsxRuntime.jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, ref: ref, children: [icon ? (jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, className: "inline-flex items-center", "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: icon })) : null, jsxRuntime.jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, className: "inline", "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsxRuntime.jsx("span", { children: content ?? "" }) }) }), count > 1 ? (jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, className: "inline", "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: !countTooltip, label: countTooltip ?? "", placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Tag, { color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) })) : null] })) : null;
 };
 
 /**
@@ -473,8 +473,8 @@ const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "
  * @param {NoticeCellProps} props - The props for the NoticeCell component
  * @returns {ReactElement} NoticeCell component
  */
-const NoticeCell = ({ ...rest }) => {
-    return jsxRuntime.jsx(reactComponents.Notice, { ...rest });
+const NoticeCell = ({ ref, ...rest }) => {
+    return jsxRuntime.jsx(reactComponents.Notice, { ref: ref, ...rest });
 };
 
 const cvaNumberCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-1", "slashed-zero", "text-sm", "text-ellipsis"]);
@@ -526,8 +526,8 @@ const cvaNumberCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-1", "slas
  * @param {NumberCellProps} props - The props for the NumberCell component.
  * @returns {ReactElement} A React JSX element representing the NumberCell component.
  */
-const NumberCell = ({ value = "", unit, className, "data-testid": dataTestId }) => {
-    return (jsxRuntime.jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("span", { children: value }), value && unit ? jsxRuntime.jsx("span", { children: unit }) : null] }));
+const NumberCell = ({ value = "", unit, className, "data-testid": dataTestId, ref }) => {
+    return (jsxRuntime.jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsx("span", { children: value }), value && unit ? jsxRuntime.jsx("span", { children: unit }) : null] }));
 };
 
 const cvaPlainDateCell = cssClassVarianceUtilities.cvaMerge([""]);
@@ -540,12 +540,12 @@ const cvaDateTimeSince = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "te
  * @param {PlainDateCellProps} props - The props for the PlainDateCell component
  * @returns {ReactElement} PlainDateCell component
  */
-const PlainDateCell = ({ locale, date, withDaysSince = true, className, "data-testid": dataTestId, }) => {
+const PlainDateCell = ({ locale, date, withDaysSince = true, className, "data-testid": dataTestId, ref, }) => {
     if (!date) {
         return null;
     }
     const formattedDate = dateAndTimeUtils.formatDateUtil(date.toZonedDateTime("UTC"), sharedUtils.DateTimeFormat.DATE_SHORT, "UTC", locale);
-    return (jsxRuntime.jsxs("div", { className: cvaPlainDateCell({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("p", { className: cvaDateTime(), children: formattedDate }), withDaysSince ? jsxRuntime.jsx(DaysSince, { date: date, locale: locale }) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaPlainDateCell({ className }), "data-testid": dataTestId, ref: ref, children: [jsxRuntime.jsx("p", { className: cvaDateTime(), children: formattedDate }), withDaysSince ? jsxRuntime.jsx(DaysSince, { date: date, locale: locale }) : null] }));
 };
 const DaysSince = ({ date, locale }) => {
     let timeSince = null;
@@ -570,7 +570,7 @@ const DaysSince = ({ date, locale }) => {
  * @param {string} [props.className] - Additional CSS classes to apply to the handle.
  * @returns {ReactElement} A React element representing the resizable handle.
  */
-const ResizeHandle = ({ isResizing = false, "data-testid": dataTestId, onMouseDown: onMouseDownHandler, className, ...rest }) => {
+const ResizeHandle = ({ isResizing = false, "data-testid": dataTestId, onMouseDown: onMouseDownHandler, className, ref, ...rest }) => {
     const onMouseDown = event => {
         const resizeCursorClass = "cursor-col-resize";
         document.addEventListener("mouseup", () => {
@@ -764,10 +764,11 @@ const IconWithLoader = ({ action, size }) => {
  * @param {boolean} [props.sortingState=false] - Indicates the sorting state (ascending/descending).
  * @param {string} [props."data-testid"] - A data-testid attribute for testing purposes.
  * @param {string} [props.className] - Additional CSS classes to apply to the sorting indicator.
+ * @param {import('react').Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root DOM element.
  * @returns {ReactElement} A React element representing the sorting indicator.
  */
-const SortIndicator = ({ sortingState = false, "data-testid": dataTestId, className, ...rest }) => {
-    return (jsxRuntime.jsx("div", { className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, role: "separator", ...rest }));
+const SortIndicator = ({ sortingState = false, "data-testid": dataTestId, className, ref, ...rest }) => {
+    return (jsxRuntime.jsx("div", { className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, ref: ref, role: "separator", ...rest }));
 };
 const cvaSortIndicator = cssClassVarianceUtilities.cvaMerge([
     "before:block",
@@ -864,8 +865,8 @@ const cvaTagsCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
  * @param {TagsCellProps} props - The props for the TagsCell component
  * @returns {ReactElement} TagsCell component
  */
-const TagsCell = ({ className, tags, "data-testid": dataTestId }) => {
-    return (jsxRuntime.jsx("div", { className: cvaTagsCell({ className }), "data-testid": dataTestId, children: tags.map((tag, index) => (jsxRuntime.jsx(reactComponents.Tag, { color: "primary",
+const TagsCell = ({ className, tags, "data-testid": dataTestId, ref }) => {
+    return (jsxRuntime.jsx("div", { className: cvaTagsCell({ className }), "data-testid": dataTestId, ref: ref, children: tags.map((tag, index) => (jsxRuntime.jsx(reactComponents.Tag, { color: "primary",
             "data-testid": `${dataTestId}-${index}`,
             ...(typeof tag === "string" ? { children: tag } : tag) }, index))) }));
 };
@@ -894,8 +895,8 @@ const Tbody = ({ "data-testid": dataTestId, className, children, ...rest }) => {
  * @param {TdProps} props - The props for the Td component
  * @returns {ReactElement} Td component
  */
-const Td = ({ "data-testid": dataTestId, className, children, ...rest }) => {
-    return (jsxRuntime.jsx("td", { className: cvaTd({ className }), "data-testid": dataTestId, ...rest, children: Array.isArray(children)
+const Td = ({ "data-testid": dataTestId, className, children, ref, ...rest }) => {
+    return (jsxRuntime.jsx("td", { className: cvaTd({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: Array.isArray(children)
             ? children
                 .filter(Boolean)
                 .map((child, index) => (react.isValidElement(child) ? react.cloneElement(child, { key: index }) : child))
@@ -958,12 +959,13 @@ const cvaTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["grid"]);
  * @param {TextCellProps} props - The props for the TextCell component
  * @returns {ReactElement} TextCell component
  */
-const TextCell = ({ content = "", className, "data-testid": dataTestId }) => {
+const TextCell = ({ content = "", className, "data-testid": dataTestId, ref }) => {
     const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
     };
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, className: cvaTextCellTooltip(), disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsxRuntime.jsx("span", { className: cvaTextCell({ className }), "data-testid": dataTestId, ref: elementRef => updateTooltipVisibility(elementRef), children: content }) }));
+    const mergedRef = reactComponents.useMergeRefs([ref, (elementRef) => updateTooltipVisibility(elementRef)]);
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { asChild: false, className: cvaTextCellTooltip(), disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsxRuntime.jsx("span", { className: cvaTextCell({ className }), "data-testid": dataTestId, ref: mergedRef, children: content }) }));
 };
 
 /**
@@ -976,8 +978,8 @@ const TextCell = ({ content = "", className, "data-testid": dataTestId }) => {
  * @param {TfootProps} props - The props for the Tfoot component
  * @returns {ReactElement} Tfoot component
  */
-const Tfoot = ({ "data-testid": dataTestId, className, children, ...rest }) => {
-    return (jsxRuntime.jsx("tfoot", { className: className, "data-testid": dataTestId, ...rest, children: children }));
+const Tfoot = ({ "data-testid": dataTestId, className, children, ref, ...rest }) => {
+    return (jsxRuntime.jsx("tfoot", { className: className, "data-testid": dataTestId, ref: ref, ...rest, children: children }));
 };
 
 /**
@@ -990,8 +992,8 @@ const Tfoot = ({ "data-testid": dataTestId, className, children, ...rest }) => {
  * @param {ThProps} props - The props for the Th component
  * @returns {ReactElement} Th component
  */
-const Th = ({ "data-testid": 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)
+const Th = ({ "data-testid": dataTestId, className, children, ref, ...rest }) => {
+    return (jsxRuntime.jsx("th", { className: cvaTh({ className }), "data-testid": dataTestId, ref: ref, ...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))
@@ -1031,8 +1033,8 @@ const cvaChildrenContainer = cssClassVarianceUtilities.cvaMerge([
  * @param {TheadProps} props - The props for the Thead component
  * @returns {ReactElement} Thead component
  */
-const Thead = ({ "data-testid": dataTestId, className, children, sticky = true, ...rest }) => {
-    return (jsxRuntime.jsx("thead", { className: cvaThead({ sticky, className }), "data-testid": dataTestId, ...rest, children: children }));
+const Thead = ({ "data-testid": dataTestId, className, children, sticky = true, ref, ...rest }) => {
+    return (jsxRuntime.jsx("thead", { className: cvaThead({ sticky, className }), "data-testid": dataTestId, ref: ref, ...rest, children: children }));
 };
 const cvaThead = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "text-left"], {
     variants: {
@@ -1056,8 +1058,8 @@ const cvaThead = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "text-lef
  * @param {TrProps} props - The props for the Tr component
  * @returns {ReactElement} Tr component
  */
-const Tr = ({ "data-testid": dataTestId, className, children, layout = "default", ...rest }) => {
-    return (jsxRuntime.jsx("tr", { className: cvaTr({ layout, className }), "data-testid": dataTestId, role: "row", ...rest, children: children }));
+const Tr = ({ "data-testid": dataTestId, className, children, layout = "default", ref, ...rest }) => {
+    return (jsxRuntime.jsx("tr", { className: cvaTr({ layout, className }), "data-testid": dataTestId, ref: ref, role: "row", ...rest, children: children }));
 };
 const cvaTr = cssClassVarianceUtilities.cvaMerge(["w-full", "h-max", "border-b", "border-neutral-200"], {
     variants: {

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button, Icon, Highlight, Heading, ExternalLink, DetailsList, Indicator, Spinner, Tooltip, Tag, Notice, IconButton, MoreMenu, MenuList, MenuItem, MenuDivider } from '@trackunit/react-components';
+import { Button, Icon, Highlight, Heading, ExternalLink, DetailsList, Indicator, Spinner, Tooltip, Tag, Notice, IconButton, MoreMenu, MenuList, MenuItem, MenuDivider, useMergeRefs } from '@trackunit/react-components';
 import { twMerge } from 'tailwind-merge';
 import { Checkbox } from '@trackunit/react-form-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -184,8 +184,8 @@ const cvaHighlightCell = cvaMerge(["flex", "gap-2"]);
  * @param {HighlightCellProps} props - The props for the HighlightCell component
  * @returns {ReactElement} HighlightCell component
  */
-const HighlightCell = ({ className, highlights, "data-testid": dataTestId }) => {
-    return (jsx("div", { className: cvaHighlightCell({ className }), "data-testid": dataTestId, children: highlights.map((highlight, index) => (jsx(Highlight, { color: "warning",
+const HighlightCell = ({ className, highlights, "data-testid": dataTestId, ref }) => {
+    return (jsx("div", { className: cvaHighlightCell({ className }), "data-testid": dataTestId, ref: ref, children: highlights.map((highlight, index) => (jsx(Highlight, { color: "warning",
             size: "medium",
             "data-testid": `${dataTestId}-${index}`,
             ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
@@ -272,14 +272,14 @@ const cvaIdentityCell = cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
  * @param {IdentityCellProps} props - The props for the IdentityCell component
  * @returns {ReactElement} IdentityCell component
  */
-const IdentityCell = ({ link, className, "data-testid": dataTestId, title, details = [], thumbnail, }) => {
+const IdentityCell = ({ link, className, "data-testid": dataTestId, ref, title, details = [], thumbnail, }) => {
     const [href, setHref] = useState(undefined);
     useEffect(() => {
         if (link) {
             link.href().then(setHref);
         }
     }, [link]);
-    return (jsxs("div", { className: cvaIdentityCell({ className, 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: "grid grid-rows-[min-content_auto] items-center text-sm", children: [jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center truncate text-sm", children: jsx(Heading, { className: "truncate text-sm", "data-testid": dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: !link ? (title) : (jsx(ExternalLink, { className: "truncate", color: "neutral", href: href ?? "", onClick: async (e) => {
+    return (jsxs("div", { className: cvaIdentityCell({ className, hasThumbnail: !!thumbnail }), "data-testid": dataTestId, ref: ref, 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: "grid grid-rows-[min-content_auto] items-center text-sm", children: [jsx("div", { className: "gap-responsive-space-sm flex w-full min-w-0 items-center truncate text-sm", children: jsx(Heading, { className: "truncate text-sm", "data-testid": dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: !link ? (title) : (jsx(ExternalLink, { className: "truncate", color: "neutral", href: href ?? "", onClick: async (e) => {
                                     // Allow Cmd/Ctrl+Click, Shift+Click, or middle-click to open in new tab
                                     const hasModifierKey = e.ctrlKey || e.metaKey || e.shiftKey;
                                     const isMiddleClick = e.button === 1;
@@ -299,8 +299,8 @@ const IdentityCell = ({ link, className, "data-testid": dataTestId, title, detai
  * @param {ImageCellProps} props - The props for the Image component.
  * @returns {ReactElement} The Image component.
  */
-const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, "data-testid": dataTestId, ...rest }) => {
-    return jsx("img", { alt: alt, "data-testid": dataTestId, height: height, src: imageUrl, width: width, ...rest });
+const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, "data-testid": dataTestId, ref, ...rest }) => {
+    return jsx("img", { alt: alt, "data-testid": dataTestId, height: height, ref: ref, src: imageUrl, width: width, ...rest });
 };
 
 /**
@@ -309,8 +309,8 @@ const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, "data-testid
  * @param {IndicatorCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const IndicatorCell = ({ withBackground = false, weight = "normal", ...rest }) => {
-    return jsx(Indicator, { weight: weight, withBackground: withBackground, ...rest });
+const IndicatorCell = ({ withBackground = false, weight = "normal", ref, ...rest }) => {
+    return jsx(Indicator, { ref: ref, weight: weight, withBackground: withBackground, ...rest });
 };
 
 const cvaLinkCell = cvaMerge(["text-sm"]);
@@ -374,12 +374,12 @@ const cvaLinkCell = cvaMerge(["text-sm"]);
  * @param {LinkCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const LinkCell = ({ link, type, className, ...rest }) => {
+const LinkCell = ({ link, type, className, ref, ...rest }) => {
     const linkPrefix = type === "LINK" ? "" : type === "PHONE" ? "tel:" : "mailto:";
     const handleClick = event => {
         event.stopPropagation();
     };
-    return (jsx(ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ...rest, color: "neutral", onClick: handleClick, children: link }));
+    return (jsx(ExternalLink, { className: cvaLinkCell({ className }), href: `${linkPrefix}${link}`, ref: ref, ...rest, color: "neutral", onClick: handleClick, children: link }));
 };
 
 const cvaMultiRowTableCellSection = cvaMerge(["flex", "flex-col", "justify-center", "overflow-hidden"]);
@@ -457,12 +457,12 @@ const cvaMultiValueTextCellTooltip = cvaMerge(["whitespace-no-wrap", "overflow-h
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
  * @returns {ReactElement} MultiValueTextCell component
  */
-const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, }) => {
+const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, }) => {
     const [isTooltipVisible, setIsTooltipVisible] = useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
     };
-    return count && count > 0 ? (jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, children: [icon ? (jsx(Tooltip, { asChild: false, className: "inline-flex items-center", "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: icon })) : null, jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsx(Tooltip, { asChild: false, className: "inline", "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: content ?? "" }) }), count > 1 ? (jsx(Tooltip, { asChild: false, className: "inline", "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: !countTooltip, label: countTooltip ?? "", placement: "bottom", children: jsxs(Tag, { color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) })) : null] })) : null;
+    return count && count > 0 ? (jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, ref: ref, children: [icon ? (jsx(Tooltip, { asChild: false, className: "inline-flex items-center", "data-testid": dataTestId ? `${dataTestId}-icon-tooltip` : undefined, disabled: !iconTooltip, label: iconTooltip ?? "", placement: "bottom", children: icon })) : null, jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsx(Tooltip, { asChild: false, className: "inline", "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: jsx("span", { children: content ?? "" }) }) }), count > 1 ? (jsx(Tooltip, { asChild: false, className: "inline", "data-testid": dataTestId ? `${dataTestId}-count-tooltip` : undefined, disabled: !countTooltip, label: countTooltip ?? "", placement: "bottom", children: jsxs(Tag, { color: "neutral", onMouseEnter: onMouseEnter, size: "small", children: ["+", count - 1] }) })) : null] })) : null;
 };
 
 /**
@@ -471,8 +471,8 @@ const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "
  * @param {NoticeCellProps} props - The props for the NoticeCell component
  * @returns {ReactElement} NoticeCell component
  */
-const NoticeCell = ({ ...rest }) => {
-    return jsx(Notice, { ...rest });
+const NoticeCell = ({ ref, ...rest }) => {
+    return jsx(Notice, { ref: ref, ...rest });
 };
 
 const cvaNumberCell = cvaMerge(["flex", "gap-1", "slashed-zero", "text-sm", "text-ellipsis"]);
@@ -524,8 +524,8 @@ const cvaNumberCell = cvaMerge(["flex", "gap-1", "slashed-zero", "text-sm", "tex
  * @param {NumberCellProps} props - The props for the NumberCell component.
  * @returns {ReactElement} A React JSX element representing the NumberCell component.
  */
-const NumberCell = ({ value = "", unit, className, "data-testid": dataTestId }) => {
-    return (jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, children: [jsx("span", { children: value }), value && unit ? jsx("span", { children: unit }) : null] }));
+const NumberCell = ({ value = "", unit, className, "data-testid": dataTestId, ref }) => {
+    return (jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, ref: ref, children: [jsx("span", { children: value }), value && unit ? jsx("span", { children: unit }) : null] }));
 };
 
 const cvaPlainDateCell = cvaMerge([""]);
@@ -538,12 +538,12 @@ const cvaDateTimeSince = cvaMerge(["slashed-zero", "text-neutral-500", "text-xs"
  * @param {PlainDateCellProps} props - The props for the PlainDateCell component
  * @returns {ReactElement} PlainDateCell component
  */
-const PlainDateCell = ({ locale, date, withDaysSince = true, className, "data-testid": dataTestId, }) => {
+const PlainDateCell = ({ locale, date, withDaysSince = true, className, "data-testid": dataTestId, ref, }) => {
     if (!date) {
         return null;
     }
     const formattedDate = formatDateUtil(date.toZonedDateTime("UTC"), DateTimeFormat.DATE_SHORT, "UTC", locale);
-    return (jsxs("div", { className: cvaPlainDateCell({ className }), "data-testid": dataTestId, children: [jsx("p", { className: cvaDateTime(), children: formattedDate }), withDaysSince ? jsx(DaysSince, { date: date, locale: locale }) : null] }));
+    return (jsxs("div", { className: cvaPlainDateCell({ className }), "data-testid": dataTestId, ref: ref, children: [jsx("p", { className: cvaDateTime(), children: formattedDate }), withDaysSince ? jsx(DaysSince, { date: date, locale: locale }) : null] }));
 };
 const DaysSince = ({ date, locale }) => {
     let timeSince = null;
@@ -568,7 +568,7 @@ const DaysSince = ({ date, locale }) => {
  * @param {string} [props.className] - Additional CSS classes to apply to the handle.
  * @returns {ReactElement} A React element representing the resizable handle.
  */
-const ResizeHandle = ({ isResizing = false, "data-testid": dataTestId, onMouseDown: onMouseDownHandler, className, ...rest }) => {
+const ResizeHandle = ({ isResizing = false, "data-testid": dataTestId, onMouseDown: onMouseDownHandler, className, ref, ...rest }) => {
     const onMouseDown = event => {
         const resizeCursorClass = "cursor-col-resize";
         document.addEventListener("mouseup", () => {
@@ -762,10 +762,11 @@ const IconWithLoader = ({ action, size }) => {
  * @param {boolean} [props.sortingState=false] - Indicates the sorting state (ascending/descending).
  * @param {string} [props."data-testid"] - A data-testid attribute for testing purposes.
  * @param {string} [props.className] - Additional CSS classes to apply to the sorting indicator.
+ * @param {import('react').Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root DOM element.
  * @returns {ReactElement} A React element representing the sorting indicator.
  */
-const SortIndicator = ({ sortingState = false, "data-testid": dataTestId, className, ...rest }) => {
-    return (jsx("div", { className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, role: "separator", ...rest }));
+const SortIndicator = ({ sortingState = false, "data-testid": dataTestId, className, ref, ...rest }) => {
+    return (jsx("div", { className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, ref: ref, role: "separator", ...rest }));
 };
 const cvaSortIndicator = cvaMerge([
     "before:block",
@@ -862,8 +863,8 @@ const cvaTagsCell = cvaMerge(["flex", "gap-2"]);
  * @param {TagsCellProps} props - The props for the TagsCell component
  * @returns {ReactElement} TagsCell component
  */
-const TagsCell = ({ className, tags, "data-testid": dataTestId }) => {
-    return (jsx("div", { className: cvaTagsCell({ className }), "data-testid": dataTestId, children: tags.map((tag, index) => (jsx(Tag, { color: "primary",
+const TagsCell = ({ className, tags, "data-testid": dataTestId, ref }) => {
+    return (jsx("div", { className: cvaTagsCell({ className }), "data-testid": dataTestId, ref: ref, children: tags.map((tag, index) => (jsx(Tag, { color: "primary",
             "data-testid": `${dataTestId}-${index}`,
             ...(typeof tag === "string" ? { children: tag } : tag) }, index))) }));
 };
@@ -892,8 +893,8 @@ const Tbody = ({ "data-testid": dataTestId, className, children, ...rest }) => {
  * @param {TdProps} props - The props for the Td component
  * @returns {ReactElement} Td component
  */
-const Td = ({ "data-testid": dataTestId, className, children, ...rest }) => {
-    return (jsx("td", { className: cvaTd({ className }), "data-testid": dataTestId, ...rest, children: Array.isArray(children)
+const Td = ({ "data-testid": dataTestId, className, children, ref, ...rest }) => {
+    return (jsx("td", { className: cvaTd({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: Array.isArray(children)
             ? children
                 .filter(Boolean)
                 .map((child, index) => (isValidElement(child) ? cloneElement(child, { key: index }) : child))
@@ -956,12 +957,13 @@ const cvaTextCellTooltip = cvaMerge(["grid"]);
  * @param {TextCellProps} props - The props for the TextCell component
  * @returns {ReactElement} TextCell component
  */
-const TextCell = ({ content = "", className, "data-testid": dataTestId }) => {
+const TextCell = ({ content = "", className, "data-testid": dataTestId, ref }) => {
     const [isTooltipVisible, setIsTooltipVisible] = useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
     };
-    return (jsx(Tooltip, { asChild: false, className: cvaTextCellTooltip(), disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsx("span", { className: cvaTextCell({ className }), "data-testid": dataTestId, ref: elementRef => updateTooltipVisibility(elementRef), children: content }) }));
+    const mergedRef = useMergeRefs([ref, (elementRef) => updateTooltipVisibility(elementRef)]);
+    return (jsx(Tooltip, { asChild: false, className: cvaTextCellTooltip(), disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsx("span", { className: cvaTextCell({ className }), "data-testid": dataTestId, ref: mergedRef, children: content }) }));
 };
 
 /**
@@ -974,8 +976,8 @@ const TextCell = ({ content = "", className, "data-testid": dataTestId }) => {
  * @param {TfootProps} props - The props for the Tfoot component
  * @returns {ReactElement} Tfoot component
  */
-const Tfoot = ({ "data-testid": dataTestId, className, children, ...rest }) => {
-    return (jsx("tfoot", { className: className, "data-testid": dataTestId, ...rest, children: children }));
+const Tfoot = ({ "data-testid": dataTestId, className, children, ref, ...rest }) => {
+    return (jsx("tfoot", { className: className, "data-testid": dataTestId, ref: ref, ...rest, children: children }));
 };
 
 /**
@@ -988,8 +990,8 @@ const Tfoot = ({ "data-testid": dataTestId, className, children, ...rest }) => {
  * @param {ThProps} props - The props for the Th component
  * @returns {ReactElement} Th component
  */
-const Th = ({ "data-testid": dataTestId, className, children, ...rest }) => {
-    return (jsx("th", { className: cvaTh({ className }), "data-testid": dataTestId, ...rest, children: jsx("div", { className: cvaChildrenContainer(), children: Array.isArray(children)
+const Th = ({ "data-testid": dataTestId, className, children, ref, ...rest }) => {
+    return (jsx("th", { className: cvaTh({ className }), "data-testid": dataTestId, ref: ref, ...rest, children: jsx("div", { className: cvaChildrenContainer(), children: Array.isArray(children)
                 ? children
                     .filter(Boolean)
                     .map((child, index) => (isValidElement(child) ? cloneElement(child, { key: index }) : child))
@@ -1029,8 +1031,8 @@ const cvaChildrenContainer = cvaMerge([
  * @param {TheadProps} props - The props for the Thead component
  * @returns {ReactElement} Thead component
  */
-const Thead = ({ "data-testid": dataTestId, className, children, sticky = true, ...rest }) => {
-    return (jsx("thead", { className: cvaThead({ sticky, className }), "data-testid": dataTestId, ...rest, children: children }));
+const Thead = ({ "data-testid": dataTestId, className, children, sticky = true, ref, ...rest }) => {
+    return (jsx("thead", { className: cvaThead({ sticky, className }), "data-testid": dataTestId, ref: ref, ...rest, children: children }));
 };
 const cvaThead = cvaMerge(["bg-neutral-100", "text-left"], {
     variants: {
@@ -1054,8 +1056,8 @@ const cvaThead = cvaMerge(["bg-neutral-100", "text-left"], {
  * @param {TrProps} props - The props for the Tr component
  * @returns {ReactElement} Tr component
  */
-const Tr = ({ "data-testid": dataTestId, className, children, layout = "default", ...rest }) => {
-    return (jsx("tr", { className: cvaTr({ layout, className }), "data-testid": dataTestId, role: "row", ...rest, children: children }));
+const Tr = ({ "data-testid": dataTestId, className, children, layout = "default", ref, ...rest }) => {
+    return (jsx("tr", { className: cvaTr({ layout, className }), "data-testid": dataTestId, ref: ref, role: "row", ...rest, children: children }));
 };
 const cvaTr = cvaMerge(["w-full", "h-max", "border-b", "border-neutral-200"], {
     variants: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "1.13.18",
+  "version": "1.13.22",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,12 +8,12 @@
   },
   "dependencies": {
     "react": "19.0.0",
-    "@trackunit/react-components": "1.17.16",
-    "@trackunit/ui-icons": "1.11.41",
-    "@trackunit/react-form-components": "1.14.18",
-    "@trackunit/css-class-variance-utilities": "1.11.42",
-    "@trackunit/date-and-time-utils": "1.11.43",
-    "@trackunit/shared-utils": "1.13.42",
+    "@trackunit/react-components": "1.17.20",
+    "@trackunit/ui-icons": "1.11.42",
+    "@trackunit/react-form-components": "1.14.22",
+    "@trackunit/css-class-variance-utilities": "1.11.43",
+    "@trackunit/date-and-time-utils": "1.11.44",
+    "@trackunit/shared-utils": "1.13.43",
     "tailwind-merge": "^2.0.0",
     "@js-temporal/polyfill": "^0.5.1"
   },

package/src/components/ButtonCell/ButtonCell.d.ts

@@ -1,7 +1,7 @@
-import { ButtonCommonProps, IconColors } from "@trackunit/react-components";
+import { ButtonCommonProps, IconColors, Refable } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
 import { ReactNode } from "react";
-export interface ButtonCellProps extends ButtonCommonProps {
+export interface ButtonCellProps extends ButtonCommonProps, Refable<HTMLButtonElement> {
     /**
      * The content to display inside the button, typically the action text.
      */

package/src/components/DateTimeCell/DateTimeCell.d.ts

@@ -1,6 +1,6 @@
 import { TemporalFormat } from "@trackunit/date-and-time-utils";
-import { CommonProps } from "@trackunit/react-components";
-export interface DateTimeCellProps extends CommonProps {
+import { CommonProps, Refable } from "@trackunit/react-components";
+export interface DateTimeCellProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The date to render.
      * If not provided, the component will not render.

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

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { HTMLAttributes } from "react";
-export interface HighlightCellProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement> {
+export interface HighlightCellProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement>, Refable<HTMLDivElement> {
     /**
      * A id that can be used in tests to get the component
      */
@@ -24,4 +24,4 @@ export interface HighlightCellProps extends CommonProps, HTMLAttributes<HTMLTabl
  * @param {HighlightCellProps} props - The props for the HighlightCell component
  * @returns {ReactElement} HighlightCell component
  */
-export declare const HighlightCell: ({ className, highlights, "data-testid": dataTestId }: HighlightCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HighlightCell: ({ className, highlights, "data-testid": dataTestId, ref }: HighlightCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/IdentityCell/IdentityCell.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
-export interface IdentityCellProps extends CommonProps {
+export interface IdentityCellProps extends CommonProps, Refable<HTMLDivElement> {
     className?: string;
     "data-testid"?: string;
     /** The main title or name to display */
@@ -89,4 +89,4 @@ export interface IdentityCellProps extends CommonProps {
  * @param {IdentityCellProps} props - The props for the IdentityCell component
  * @returns {ReactElement} IdentityCell component
  */
-export declare const IdentityCell: ({ link, className, "data-testid": dataTestId, title, details, thumbnail, }: IdentityCellProps) => ReactElement;
+export declare const IdentityCell: ({ link, className, "data-testid": dataTestId, ref, title, details, thumbnail, }: IdentityCellProps) => ReactElement;

package/src/components/ImageCell/ImageCell.d.ts

@@ -1,5 +1,5 @@
-import { CommonProps } from "@trackunit/react-components";
-export interface ImageCellProps extends CommonProps {
+import { CommonProps, Refable } from "@trackunit/react-components";
+export interface ImageCellProps extends CommonProps, Refable<HTMLImageElement> {
     /**
      * The URL of the image to be displayed.
      */
@@ -27,4 +27,4 @@ export interface ImageCellProps extends CommonProps {
  * @param {ImageCellProps} props - The props for the Image component.
  * @returns {ReactElement} The Image component.
  */
-export declare const ImageCell: ({ imageUrl, alt, width, height, "data-testid": dataTestId, ...rest }: ImageCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageCell: ({ imageUrl, alt, width, height, "data-testid": dataTestId, ref, ...rest }: ImageCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/IndicatorCell/IndicatorCell.d.ts

@@ -1,6 +1,6 @@
-import { IndicatorProps } from "@trackunit/react-components";
+import { IndicatorProps, Refable } from "@trackunit/react-components";
 import { HTMLAttributes, ReactElement } from "react";
-export interface IndicatorCellProps extends IndicatorProps, HTMLAttributes<HTMLTableSectionElement> {
+export interface IndicatorCellProps extends IndicatorProps, HTMLAttributes<HTMLTableSectionElement>, Refable<HTMLDivElement> {
     /**
      * The icon to be rendered inside the indicator component
      */
@@ -36,4 +36,4 @@ export interface IndicatorCellProps extends IndicatorProps, HTMLAttributes<HTMLT
  * @param {IndicatorCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-export declare const IndicatorCell: ({ withBackground, weight, ...rest }: IndicatorCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IndicatorCell: ({ withBackground, weight, ref, ...rest }: IndicatorCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/LinkCell/LinkCell.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { HTMLAttributes, ReactElement } from "react";
-export interface LinkCellProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement> {
+export interface LinkCellProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement>, Refable<HTMLAnchorElement> {
     /**
      * A id that can be used in tests to get the component
      */
@@ -77,4 +77,4 @@ export interface LinkCellProps extends CommonProps, HTMLAttributes<HTMLTableSect
  * @param {LinkCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-export declare const LinkCell: ({ link, type, className, ...rest }: LinkCellProps) => ReactElement;
+export declare const LinkCell: ({ link, type, className, ref, ...rest }: LinkCellProps) => ReactElement;

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

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { MouseEventHandler, ReactElement, ReactNode } from "react";
-export interface MultiValueTextCellProps extends CommonProps {
+export interface MultiValueTextCellProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * Icon rendered to the left of the text.
      * Provides visual context for the primary value.
@@ -42,4 +42,4 @@ export interface MultiValueTextCellProps extends CommonProps {
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
  * @returns {ReactElement} MultiValueTextCell component
  */
-export declare const MultiValueTextCell: ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, }: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const MultiValueTextCell: ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, ref, }: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element | null;

package/src/components/NoticeCell/NoticeCell.d.ts

@@ -6,4 +6,4 @@ export type NoticeCellProps = NoticeProps;
  * @param {NoticeCellProps} props - The props for the NoticeCell component
  * @returns {ReactElement} NoticeCell component
  */
-export declare const NoticeCell: ({ ...rest }: NoticeCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NoticeCell: ({ ref, ...rest }: NoticeCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/NumberCell/NumberCell.d.ts

@@ -1,5 +1,5 @@
-import { CommonProps } from "@trackunit/react-components";
-export interface NumberCellProps extends CommonProps {
+import { CommonProps, Refable } from "@trackunit/react-components";
+export interface NumberCellProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The numeric value to be displayed.
      * This can be either a string or a number.
@@ -65,4 +65,4 @@ export interface NumberCellProps extends CommonProps {
  * @param {NumberCellProps} props - The props for the NumberCell component.
  * @returns {ReactElement} A React JSX element representing the NumberCell component.
  */
-export declare const NumberCell: ({ value, unit, className, "data-testid": dataTestId }: NumberCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberCell: ({ value, unit, className, "data-testid": dataTestId, ref }: NumberCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/PlainDateCell/PlainDateCell.d.ts

@@ -1,6 +1,6 @@
 import { Temporal } from "@js-temporal/polyfill";
-import { CommonProps } from "@trackunit/react-components";
-export interface PlainDateCellProps extends CommonProps {
+import { CommonProps, Refable } from "@trackunit/react-components";
+export interface PlainDateCellProps extends CommonProps, Refable<HTMLDivElement> {
     /**
      * The PlainDate to render.
      * If not provided, the component will not render.
@@ -25,7 +25,7 @@ export interface PlainDateCellProps extends CommonProps {
  * @param {PlainDateCellProps} props - The props for the PlainDateCell component
  * @returns {ReactElement} PlainDateCell component
  */
-export declare const PlainDateCell: ({ locale, date, withDaysSince, className, "data-testid": dataTestId, }: PlainDateCellProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const PlainDateCell: ({ locale, date, withDaysSince, className, "data-testid": dataTestId, ref, }: PlainDateCellProps) => import("react/jsx-runtime").JSX.Element | null;
 export interface DaysSinceProps extends Pick<PlainDateCellProps, "date" | "locale"> {
     date: Temporal.PlainDate;
 }

package/src/components/ResizeHandle.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { HTMLAttributes, ReactElement } from "react";
-export interface ResizeHandelProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
+export interface ResizeHandelProps extends CommonProps, HTMLAttributes<HTMLDivElement>, Refable<HTMLDivElement> {
     isResizing?: boolean;
 }
 /**
@@ -12,4 +12,4 @@ export interface ResizeHandelProps extends CommonProps, HTMLAttributes<HTMLDivEl
  * @param {string} [props.className] - Additional CSS classes to apply to the handle.
  * @returns {ReactElement} A React element representing the resizable handle.
  */
-export declare const ResizeHandle: ({ isResizing, "data-testid": dataTestId, onMouseDown: onMouseDownHandler, className, ...rest }: ResizeHandelProps) => ReactElement;
+export declare const ResizeHandle: ({ isResizing, "data-testid": dataTestId, onMouseDown: onMouseDownHandler, className, ref, ...rest }: ResizeHandelProps) => ReactElement;

package/src/components/SortIndicator.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { HTMLAttributes, ReactElement } from "react";
-export interface SortIndicatorProps extends CommonProps, HTMLAttributes<HTMLSpanElement> {
+export interface SortIndicatorProps extends CommonProps, HTMLAttributes<HTMLSpanElement>, Refable<HTMLDivElement> {
     /**
      * A id that can be used in tests to get the component
      */
@@ -25,6 +25,7 @@ export interface SortIndicatorProps extends CommonProps, HTMLAttributes<HTMLSpan
  * @param {boolean} [props.sortingState=false] - Indicates the sorting state (ascending/descending).
  * @param {string} [props."data-testid"] - A data-testid attribute for testing purposes.
  * @param {string} [props.className] - Additional CSS classes to apply to the sorting indicator.
+ * @param {import('react').Ref<HTMLDivElement>} [props.ref] - Ref forwarded to the root DOM element.
  * @returns {ReactElement} A React element representing the sorting indicator.
  */
-export declare const SortIndicator: ({ sortingState, "data-testid": dataTestId, className, ...rest }: SortIndicatorProps) => ReactElement;
+export declare const SortIndicator: ({ sortingState, "data-testid": dataTestId, className, ref, ...rest }: SortIndicatorProps) => ReactElement;

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

@@ -1,6 +1,6 @@
-import { CommonProps, TagProps } from "@trackunit/react-components";
+import { CommonProps, Refable, TagProps } from "@trackunit/react-components";
 import { HTMLAttributes } from "react";
-export interface TagsCellProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement> {
+export interface TagsCellProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement>, Refable<HTMLDivElement> {
     /**
      * A id that can be used in tests to get the component
      */
@@ -61,4 +61,4 @@ export interface TagsCellProps extends CommonProps, HTMLAttributes<HTMLTableSect
  * @param {TagsCellProps} props - The props for the TagsCell component
  * @returns {ReactElement} TagsCell component
  */
-export declare const TagsCell: ({ className, tags, "data-testid": dataTestId }: TagsCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TagsCell: ({ className, tags, "data-testid": dataTestId, ref }: TagsCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Td.d.ts

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

package/src/components/TextCell/TextCell.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { ReactElement } from "react";
-export interface TextCellProps extends CommonProps {
+export interface TextCellProps extends CommonProps, Refable<HTMLSpanElement> {
     /**
      * The text or React element to display in the cell.
      * When text overflows the cell width, it will be truncated with an ellipsis
@@ -51,4 +51,4 @@ export interface TextCellProps extends CommonProps {
  * @param {TextCellProps} props - The props for the TextCell component
  * @returns {ReactElement} TextCell component
  */
-export declare const TextCell: ({ content, className, "data-testid": dataTestId }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextCell: ({ content, className, "data-testid": dataTestId, ref }: TextCellProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Tfoot.d.ts

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

package/src/components/Th.d.ts

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

package/src/components/Thead.d.ts

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

package/src/components/Tr.d.ts

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