@trackunit/react-table-base-components 1.7.118 → 1.7.120

package/index.cjs.js

@@ -16,8 +16,8 @@ var sharedUtils = require('@trackunit/shared-utils');
  * @param {ButtonCellProps} props - The props for the ButtonCell component
  * @returns {ReactElement} ButtonCell component
  */
-const ButtonCell = ({ children, className, dataTestId, iconColor = "primary", iconName, variant = "ghost-neutral", ...rest }) => {
-    return (jsxRuntime.jsx(reactComponents.Button, { prefix: iconName ? jsxRuntime.jsx(reactComponents.Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, className: tailwindMerge.twMerge("px-2 text-sm font-normal text-black hover:text-black", className), dataTestId: `button-cell-${dataTestId}`, variant: variant, children: children }));
+const ButtonCell = ({ children, className, "data-testid": dataTestId, iconColor = "primary", iconName, variant = "ghost-neutral", ...rest }) => {
+    return (jsxRuntime.jsx(reactComponents.Button, { prefix: iconName ? jsxRuntime.jsx(reactComponents.Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, className: tailwindMerge.twMerge("px-2 text-sm font-normal text-black hover:text-black", className), "data-testid": `button-cell-${dataTestId}`, variant: variant, children: children }));
 };
 
 const cvaCheckboxCell = cssClassVarianceUtilities.cvaMerge([""]);
@@ -29,7 +29,7 @@ const cvaCheckboxCell = cssClassVarianceUtilities.cvaMerge([""]);
  * @param {CheckboxCellProps} props - The props for the CheckboxCell component
  * @returns {ReactElement} CheckboxCell component
  */
-const CheckboxCell = ({ checked, className, dataTestId }) => {
+const CheckboxCell = ({ checked, className, "data-testid": dataTestId }) => {
     return (jsxRuntime.jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: checked, readOnly: true }) }));
 };
 
@@ -43,7 +43,7 @@ const cvaDateTimeSince$1 = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "
  * @param {DateTimeCellProps} props - The props for the DateTimeCell component
  * @returns {ReactElement} DateTimeCell component
  */
-const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, dataTestId, }) => {
+const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, "data-testid": dataTestId, }) => {
     if (!date) {
         return null;
     }
@@ -68,10 +68,10 @@ const cvaHighlightCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
  * @param {HighlightCellProps} props - The props for the HighlightCell component
  * @returns {ReactElement} HighlightCell component
  */
-const HighlightCell = ({ className, highlights, dataTestId }) => {
+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",
             size: "medium",
-            dataTestId: `${dataTestId}-${index}`,
+            "data-testid": `${dataTestId}-${index}`,
             ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
 };
 
@@ -93,14 +93,14 @@ const cvaIdentityCell = cssClassVarianceUtilities.cvaMerge(["grid", "items-cente
  * @param {IdentityCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const IdentityCell = ({ link, className, dataTestId, title, details = [], thumbnail, }) => {
+const IdentityCell = ({ link, className, "data-testid": dataTestId, 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", dataTestId: dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: !link ? (title) : (jsxRuntime.jsx(reactComponents.ExternalLink, { color: "neutral", href: href ?? "", onClick: async (e) => {
+    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, { 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;
@@ -120,7 +120,7 @@ const IdentityCell = ({ link, className, dataTestId, title, details = [], thumbn
  * @param {ImageCellProps} props - The props for the Image component.
  * @returns {ReactElement} The Image component.
  */
-const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, dataTestId, ...rest }) => {
+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 });
 };
 
@@ -161,7 +161,7 @@ const cvaSecondaryRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden
  * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
  * @returns {ReactElement} MultiRowTableCell component
  */
-const MultiRowTableCell = ({ main, secondary, dataTestId, className }) => {
+const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, }) => {
     return (jsxRuntime.jsx("div", { className: cvaMultiRowTableCell({ className }), children: jsxRuntime.jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsxRuntime.jsx("div", { className: cvaMainRowText(), children: main }) : main, secondary && typeof secondary === "string" ? (jsxRuntime.jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
 };
 
@@ -174,7 +174,7 @@ const MultiRowTableCell = ({ main, secondary, dataTestId, className }) => {
  * @param {ListTooltipProps<TItem>} props Component props.
  * @returns {ReactNode} Tooltip list markup.
  */
-const ListTooltip = ({ items, dataTestId, getLabel, getKey, loading, }) => {
+const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loading, }) => {
     const toDisplay = (item, index) => {
         if (getLabel) {
             return getLabel(item, index);
@@ -225,12 +225,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, dataTestId, className, onMouseEnter, }) => {
+const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, }) => {
     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, { className: "inline-flex items-center", dataTestId: 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, { className: "inline", dataTestId: dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: content ?? "" }) }), count > 1 ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "inline", dataTestId: 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, children: [icon ? (jsxRuntime.jsx(reactComponents.Tooltip, { 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, { className: "inline", "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: content ?? "" }) }), count > 1 ? (jsxRuntime.jsx(reactComponents.Tooltip, { 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;
 };
 
 /**
@@ -251,7 +251,7 @@ 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, dataTestId }) => {
+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] }));
 };
 
@@ -265,7 +265,7 @@ 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, dataTestId }) => {
+const PlainDateCell = ({ locale, date, withDaysSince = true, className, "data-testid": dataTestId, }) => {
     if (!date) {
         return null;
     }
@@ -291,11 +291,11 @@ const DaysSince = ({ date, locale }) => {
  *
  * @param {ResizeHandelProps} props - Props for the resizable handle.
  * @param {boolean} [props.isResizing=false] - Indicates whether the handle is in a resizing state.
- * @param {string} [props.dataTestId] - A data-testid attribute for testing purposes.
+ * @param {string} [props."data-testid"] - A data-testid attribute for testing purposes.
  * @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, dataTestId, onMouseDown: onMouseDownHandler, className, ...rest }) => {
+const ResizeHandle = ({ isResizing = false, "data-testid": dataTestId, onMouseDown: onMouseDownHandler, className, ...rest }) => {
     const onMouseDown = (event) => {
         const resizeCursorClass = "cursor-col-resize";
         document.addEventListener("mouseup", () => {
@@ -388,11 +388,11 @@ const IconWithLoader = ({ action, size }) => {
  *
  * @param {object} props - Props for the sorting indicator.
  * @param {boolean} [props.sortingState=false] - Indicates the sorting state (ascending/descending).
- * @param {string} [props.dataTestId] - A data-testid attribute for testing purposes.
+ * @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.
  * @returns {ReactElement} A React element representing the sorting indicator.
  */
-const SortIndicator = ({ sortingState = false, dataTestId, className, ...rest }) => {
+const SortIndicator = ({ sortingState = false, "data-testid": dataTestId, className, ...rest }) => {
     return (jsxRuntime.jsx("div", { className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, role: "separator", ...rest }));
 };
 const cvaSortIndicator = cssClassVarianceUtilities.cvaMerge([
@@ -436,7 +436,7 @@ const cvaSortIndicator = cssClassVarianceUtilities.cvaMerge([
  * @param {TableRootProps} props - The props for the TableRoot component
  * @returns {ReactElement} TableRoot component
  */
-const TableRoot = ({ dataTestId, className, children, ...rest }) => {
+const TableRoot = ({ "data-testid": 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", "border-collapse", "grid-rows-min-fr", "grid"]);
@@ -449,9 +449,9 @@ const cvaTagsCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
  * @param {TagsCellProps} props - The props for the TagsCell component
  * @returns {ReactElement} TagsCell component
  */
-const TagsCell = ({ className, tags, dataTestId }) => {
+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",
-            dataTestId: `${dataTestId}-${index}`,
+            "data-testid": `${dataTestId}-${index}`,
             ...(typeof tag === "string" ? { children: tag } : tag) }, index))) }));
 };
 
@@ -465,7 +465,7 @@ const TagsCell = ({ className, tags, dataTestId }) => {
  * @param {TbodyProps} props - The props for the Tbody component
  * @returns {ReactElement} Tbody component
  */
-const Tbody = ({ dataTestId, className, children, ...rest }) => {
+const Tbody = ({ "data-testid": dataTestId, className, children, ...rest }) => {
     return (jsxRuntime.jsx("tbody", { className: className, "data-testid": dataTestId, ...rest, children: children }));
 };
 
@@ -479,7 +479,7 @@ const Tbody = ({ dataTestId, className, children, ...rest }) => {
  * @param {TdProps} props - The props for the Td component
  * @returns {ReactElement} Td component
  */
-const Td = ({ dataTestId, className, children, ...rest }) => {
+const Td = ({ "data-testid": dataTestId, className, children, ...rest }) => {
     return (jsxRuntime.jsx("td", { className: cvaTd({ className }), "data-testid": dataTestId, ...rest, children: Array.isArray(children)
             ? children
                 .filter(Boolean)
@@ -507,7 +507,7 @@ const cvaTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["grid"]);
  * @param {TextCellProps} props - The props for the TextCell component
  * @returns {ReactElement} TextCell component
  */
-const TextCell = ({ content = "", className, dataTestId }) => {
+const TextCell = ({ content = "", className, "data-testid": dataTestId }) => {
     const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
@@ -525,7 +525,7 @@ const TextCell = ({ content = "", className, dataTestId }) => {
  * @param {TfootProps} props - The props for the Tfoot component
  * @returns {ReactElement} Tfoot component
  */
-const Tfoot = ({ dataTestId, className, children, ...rest }) => {
+const Tfoot = ({ "data-testid": dataTestId, className, children, ...rest }) => {
     return (jsxRuntime.jsx("tfoot", { className: className, "data-testid": dataTestId, ...rest, children: children }));
 };
 
@@ -539,7 +539,7 @@ const Tfoot = ({ dataTestId, className, children, ...rest }) => {
  * @param {ThProps} props - The props for the Th component
  * @returns {ReactElement} Th component
  */
-const Th = ({ dataTestId, className, children, ...rest }) => {
+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)
                 ? children
                     .filter(Boolean)
@@ -580,7 +580,7 @@ const cvaChildrenContainer = cssClassVarianceUtilities.cvaMerge([
  * @param {TheadProps} props - The props for the Thead component
  * @returns {ReactElement} Thead component
  */
-const Thead = ({ dataTestId, className, children, sticky = true, ...rest }) => {
+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 cvaThead = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "text-left"], {
@@ -605,7 +605,7 @@ const cvaThead = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "text-lef
  * @param {TrProps} props - The props for the Tr component
  * @returns {ReactElement} Tr component
  */
-const Tr = ({ dataTestId, className, children, layout = "default", ...rest }) => {
+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 cvaTr = cssClassVarianceUtilities.cvaMerge(["w-full", "h-max", "border-b", "border-neutral-200"], {

package/index.esm.js

@@ -14,8 +14,8 @@ import { DateTimeFormat } from '@trackunit/shared-utils';
  * @param {ButtonCellProps} props - The props for the ButtonCell component
  * @returns {ReactElement} ButtonCell component
  */
-const ButtonCell = ({ children, className, dataTestId, iconColor = "primary", iconName, variant = "ghost-neutral", ...rest }) => {
-    return (jsx(Button, { prefix: iconName ? jsx(Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, className: twMerge("px-2 text-sm font-normal text-black hover:text-black", className), dataTestId: `button-cell-${dataTestId}`, variant: variant, children: children }));
+const ButtonCell = ({ children, className, "data-testid": dataTestId, iconColor = "primary", iconName, variant = "ghost-neutral", ...rest }) => {
+    return (jsx(Button, { prefix: iconName ? jsx(Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, className: twMerge("px-2 text-sm font-normal text-black hover:text-black", className), "data-testid": `button-cell-${dataTestId}`, variant: variant, children: children }));
 };
 
 const cvaCheckboxCell = cvaMerge([""]);
@@ -27,7 +27,7 @@ const cvaCheckboxCell = cvaMerge([""]);
  * @param {CheckboxCellProps} props - The props for the CheckboxCell component
  * @returns {ReactElement} CheckboxCell component
  */
-const CheckboxCell = ({ checked, className, dataTestId }) => {
+const CheckboxCell = ({ checked, className, "data-testid": dataTestId }) => {
     return (jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsx(Checkbox, { checked: checked, readOnly: true }) }));
 };
 
@@ -41,7 +41,7 @@ const cvaDateTimeSince$1 = cvaMerge(["slashed-zero", "text-neutral-500", "text-x
  * @param {DateTimeCellProps} props - The props for the DateTimeCell component
  * @returns {ReactElement} DateTimeCell component
  */
-const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, dataTestId, }) => {
+const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, "data-testid": dataTestId, }) => {
     if (!date) {
         return null;
     }
@@ -66,10 +66,10 @@ const cvaHighlightCell = cvaMerge(["flex", "gap-2"]);
  * @param {HighlightCellProps} props - The props for the HighlightCell component
  * @returns {ReactElement} HighlightCell component
  */
-const HighlightCell = ({ className, highlights, dataTestId }) => {
+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",
             size: "medium",
-            dataTestId: `${dataTestId}-${index}`,
+            "data-testid": `${dataTestId}-${index}`,
             ...(typeof highlight === "string" ? { children: highlight } : highlight) }, index))) }));
 };
 
@@ -91,14 +91,14 @@ const cvaIdentityCell = cvaMerge(["grid", "items-center", "text-sm", "gap-2"], {
  * @param {IdentityCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-const IdentityCell = ({ link, className, dataTestId, title, details = [], thumbnail, }) => {
+const IdentityCell = ({ link, className, "data-testid": dataTestId, 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", dataTestId: dataTestId ? `${dataTestId}-name` : undefined, variant: "tertiary", children: !link ? (title) : (jsx(ExternalLink, { color: "neutral", href: href ?? "", onClick: async (e) => {
+    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, { 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;
@@ -118,7 +118,7 @@ const IdentityCell = ({ link, className, dataTestId, title, details = [], thumbn
  * @param {ImageCellProps} props - The props for the Image component.
  * @returns {ReactElement} The Image component.
  */
-const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, dataTestId, ...rest }) => {
+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 });
 };
 
@@ -159,7 +159,7 @@ const cvaSecondaryRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "text-
  * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
  * @returns {ReactElement} MultiRowTableCell component
  */
-const MultiRowTableCell = ({ main, secondary, dataTestId, className }) => {
+const MultiRowTableCell = ({ main, secondary, "data-testid": dataTestId, className, }) => {
     return (jsx("div", { className: cvaMultiRowTableCell({ className }), children: jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsx("div", { className: cvaMainRowText(), children: main }) : main, secondary && typeof secondary === "string" ? (jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
 };
 
@@ -172,7 +172,7 @@ const MultiRowTableCell = ({ main, secondary, dataTestId, className }) => {
  * @param {ListTooltipProps<TItem>} props Component props.
  * @returns {ReactNode} Tooltip list markup.
  */
-const ListTooltip = ({ items, dataTestId, getLabel, getKey, loading, }) => {
+const ListTooltip = ({ items, "data-testid": dataTestId, getLabel, getKey, loading, }) => {
     const toDisplay = (item, index) => {
         if (getLabel) {
             return getLabel(item, index);
@@ -223,12 +223,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, dataTestId, className, onMouseEnter, }) => {
+const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, }) => {
     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, { className: "inline-flex items-center", dataTestId: 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, { className: "inline", dataTestId: dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: content ?? "" }) }), count > 1 ? (jsx(Tooltip, { className: "inline", dataTestId: 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, children: [icon ? (jsx(Tooltip, { 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, { className: "inline", "data-testid": dataTestId ? `${dataTestId}-content-tooltip` : undefined, disabled: !isTooltipVisible, label: content ?? "", placement: "bottom", children: content ?? "" }) }), count > 1 ? (jsx(Tooltip, { 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;
 };
 
 /**
@@ -249,7 +249,7 @@ 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, dataTestId }) => {
+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] }));
 };
 
@@ -263,7 +263,7 @@ 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, dataTestId }) => {
+const PlainDateCell = ({ locale, date, withDaysSince = true, className, "data-testid": dataTestId, }) => {
     if (!date) {
         return null;
     }
@@ -289,11 +289,11 @@ const DaysSince = ({ date, locale }) => {
  *
  * @param {ResizeHandelProps} props - Props for the resizable handle.
  * @param {boolean} [props.isResizing=false] - Indicates whether the handle is in a resizing state.
- * @param {string} [props.dataTestId] - A data-testid attribute for testing purposes.
+ * @param {string} [props."data-testid"] - A data-testid attribute for testing purposes.
  * @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, dataTestId, onMouseDown: onMouseDownHandler, className, ...rest }) => {
+const ResizeHandle = ({ isResizing = false, "data-testid": dataTestId, onMouseDown: onMouseDownHandler, className, ...rest }) => {
     const onMouseDown = (event) => {
         const resizeCursorClass = "cursor-col-resize";
         document.addEventListener("mouseup", () => {
@@ -386,11 +386,11 @@ const IconWithLoader = ({ action, size }) => {
  *
  * @param {object} props - Props for the sorting indicator.
  * @param {boolean} [props.sortingState=false] - Indicates the sorting state (ascending/descending).
- * @param {string} [props.dataTestId] - A data-testid attribute for testing purposes.
+ * @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.
  * @returns {ReactElement} A React element representing the sorting indicator.
  */
-const SortIndicator = ({ sortingState = false, dataTestId, className, ...rest }) => {
+const SortIndicator = ({ sortingState = false, "data-testid": dataTestId, className, ...rest }) => {
     return (jsx("div", { className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, role: "separator", ...rest }));
 };
 const cvaSortIndicator = cvaMerge([
@@ -434,7 +434,7 @@ const cvaSortIndicator = cvaMerge([
  * @param {TableRootProps} props - The props for the TableRoot component
  * @returns {ReactElement} TableRoot component
  */
-const TableRoot = ({ dataTestId, className, children, ...rest }) => {
+const TableRoot = ({ "data-testid": 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", "border-collapse", "grid-rows-min-fr", "grid"]);
@@ -447,9 +447,9 @@ const cvaTagsCell = cvaMerge(["flex", "gap-2"]);
  * @param {TagsCellProps} props - The props for the TagsCell component
  * @returns {ReactElement} TagsCell component
  */
-const TagsCell = ({ className, tags, dataTestId }) => {
+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",
-            dataTestId: `${dataTestId}-${index}`,
+            "data-testid": `${dataTestId}-${index}`,
             ...(typeof tag === "string" ? { children: tag } : tag) }, index))) }));
 };
 
@@ -463,7 +463,7 @@ const TagsCell = ({ className, tags, dataTestId }) => {
  * @param {TbodyProps} props - The props for the Tbody component
  * @returns {ReactElement} Tbody component
  */
-const Tbody = ({ dataTestId, className, children, ...rest }) => {
+const Tbody = ({ "data-testid": dataTestId, className, children, ...rest }) => {
     return (jsx("tbody", { className: className, "data-testid": dataTestId, ...rest, children: children }));
 };
 
@@ -477,7 +477,7 @@ const Tbody = ({ dataTestId, className, children, ...rest }) => {
  * @param {TdProps} props - The props for the Td component
  * @returns {ReactElement} Td component
  */
-const Td = ({ dataTestId, className, children, ...rest }) => {
+const Td = ({ "data-testid": dataTestId, className, children, ...rest }) => {
     return (jsx("td", { className: cvaTd({ className }), "data-testid": dataTestId, ...rest, children: Array.isArray(children)
             ? children
                 .filter(Boolean)
@@ -505,7 +505,7 @@ const cvaTextCellTooltip = cvaMerge(["grid"]);
  * @param {TextCellProps} props - The props for the TextCell component
  * @returns {ReactElement} TextCell component
  */
-const TextCell = ({ content = "", className, dataTestId }) => {
+const TextCell = ({ content = "", className, "data-testid": dataTestId }) => {
     const [isTooltipVisible, setIsTooltipVisible] = useState(false);
     const updateTooltipVisibility = (element) => {
         setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
@@ -523,7 +523,7 @@ const TextCell = ({ content = "", className, dataTestId }) => {
  * @param {TfootProps} props - The props for the Tfoot component
  * @returns {ReactElement} Tfoot component
  */
-const Tfoot = ({ dataTestId, className, children, ...rest }) => {
+const Tfoot = ({ "data-testid": dataTestId, className, children, ...rest }) => {
     return (jsx("tfoot", { className: className, "data-testid": dataTestId, ...rest, children: children }));
 };
 
@@ -537,7 +537,7 @@ const Tfoot = ({ dataTestId, className, children, ...rest }) => {
  * @param {ThProps} props - The props for the Th component
  * @returns {ReactElement} Th component
  */
-const Th = ({ dataTestId, className, children, ...rest }) => {
+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)
                 ? children
                     .filter(Boolean)
@@ -578,7 +578,7 @@ const cvaChildrenContainer = cvaMerge([
  * @param {TheadProps} props - The props for the Thead component
  * @returns {ReactElement} Thead component
  */
-const Thead = ({ dataTestId, className, children, sticky = true, ...rest }) => {
+const Thead = ({ "data-testid": dataTestId, className, children, sticky = true, ...rest }) => {
     return (jsx("thead", { className: cvaThead({ sticky, className }), "data-testid": dataTestId, ...rest, children: children }));
 };
 const cvaThead = cvaMerge(["bg-neutral-100", "text-left"], {
@@ -603,7 +603,7 @@ const cvaThead = cvaMerge(["bg-neutral-100", "text-left"], {
  * @param {TrProps} props - The props for the Tr component
  * @returns {ReactElement} Tr component
  */
-const Tr = ({ dataTestId, className, children, layout = "default", ...rest }) => {
+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 cvaTr = cvaMerge(["w-full", "h-max", "border-b", "border-neutral-200"], {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table-base-components",
-  "version": "1.7.118",
+  "version": "1.7.120",
   "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.10.49",
-    "@trackunit/ui-icons": "1.7.76",
-    "@trackunit/react-form-components": "1.8.116",
-    "@trackunit/css-class-variance-utilities": "1.7.75",
-    "@trackunit/date-and-time-utils": "1.7.75",
-    "@trackunit/shared-utils": "1.9.75",
+    "@trackunit/react-components": "1.10.51",
+    "@trackunit/ui-icons": "1.7.78",
+    "@trackunit/react-form-components": "1.8.118",
+    "@trackunit/css-class-variance-utilities": "1.7.77",
+    "@trackunit/date-and-time-utils": "1.7.77",
+    "@trackunit/shared-utils": "1.9.77",
     "tailwind-merge": "^2.0.0",
     "@js-temporal/polyfill": "^0.5.1"
   },

package/src/BaseTable.stories.d.ts

@@ -4,7 +4,7 @@ import { TableRootProps } from "./components/TableRoot";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ dataTestId, className, children, ...rest }: TableRootProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ "data-testid": dataTestId, className, children, ...rest }: TableRootProps) => import("react/jsx-runtime").JSX.Element;
     subcomponents: {
         Thead: ComponentType<unknown>;
         Th: ComponentType<unknown>;

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

@@ -12,4 +12,4 @@ export interface ButtonCellProps extends ButtonCommonProps {
  * @param {ButtonCellProps} props - The props for the ButtonCell component
  * @returns {ReactElement} ButtonCell component
  */
-export declare const ButtonCell: ({ children, className, dataTestId, iconColor, iconName, variant, ...rest }: ButtonCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonCell: ({ children, className, "data-testid": dataTestId, iconColor, iconName, variant, ...rest }: ButtonCellProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ import { ButtonCellProps } from "./ButtonCell";
 type Story = StoryObjWithOptionalArgs<typeof meta, "children">;
 declare const meta: {
     title: string;
-    component: ({ children, className, dataTestId, iconColor, iconName, variant, ...rest }: ButtonCellProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ children, className, "data-testid": dataTestId, iconColor, iconName, variant, ...rest }: ButtonCellProps) => import("react/jsx-runtime").JSX.Element;
     argTypes: {};
     parameters: {
         docs: {

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

@@ -9,4 +9,4 @@ export interface CheckboxCellProps extends CommonProps {
  * @param {CheckboxCellProps} props - The props for the CheckboxCell component
  * @returns {ReactElement} CheckboxCell component
  */
-export declare const CheckboxCell: ({ checked, className, dataTestId }: CheckboxCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxCell: ({ checked, className, "data-testid": dataTestId }: CheckboxCellProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,7 +5,7 @@ import "./CheckboxCell.variants";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ checked, className, dataTestId }: CheckboxCellProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ checked, className, "data-testid": dataTestId }: CheckboxCellProps) => import("react/jsx-runtime").JSX.Element;
     argTypes: {};
     parameters: {
         docs: {

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

@@ -36,7 +36,7 @@ export interface DateTimeCellProps extends CommonProps {
  * @param {DateTimeCellProps} props - The props for the DateTimeCell component
  * @returns {ReactElement} DateTimeCell component
  */
-export declare const DateTimeCell: ({ format, timeZone, locale, date, withTimeSince, className, dataTestId, }: DateTimeCellProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DateTimeCell: ({ format, timeZone, locale, date, withTimeSince, className, "data-testid": dataTestId, }: DateTimeCellProps) => import("react/jsx-runtime").JSX.Element | null;
 export interface TimeSinceProps extends Pick<DateTimeCellProps, "date" | "timeZone" | "locale"> {
     date: Date;
 }

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

@@ -5,7 +5,7 @@ import "./DateTimeCell.variants";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ format, timeZone, locale, date, withTimeSince, className, dataTestId, }: DateTimeCellProps) => import("react/jsx-runtime").JSX.Element | null;
+    component: ({ format, timeZone, locale, date, withTimeSince, className, "data-testid": dataTestId, }: DateTimeCellProps) => import("react/jsx-runtime").JSX.Element | null;
     argTypes: {};
     parameters: {
         docs: {

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

@@ -4,7 +4,7 @@ export interface HighlightCellProps extends CommonProps, HTMLAttributes<HTMLTabl
     /**
      * A id that can be used in tests to get the component
      */
-    dataTestId?: string;
+    "data-testid"?: string;
     /**
      * Custom classNames that will be merged with the default classNames.
      */
@@ -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, dataTestId }: HighlightCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HighlightCell: ({ className, highlights, "data-testid": dataTestId }: HighlightCellProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ import { HighlightCellProps } from "./HighlightCell";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ className, highlights, dataTestId }: HighlightCellProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, highlights, "data-testid": dataTestId }: HighlightCellProps) => import("react/jsx-runtime").JSX.Element;
     argTypes: {};
     parameters: {
         docs: {

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

@@ -2,7 +2,7 @@ import { CommonProps } from "@trackunit/react-components";
 import { ReactElement, ReactNode } from "react";
 export interface IdentityCellProps extends CommonProps {
     className?: string;
-    dataTestId?: string;
+    "data-testid"?: string;
     /** The main title or name to display */
     title?: ReactNode;
     /** Array of detail strings to display below the title (e.g., model, brand, serial number) */
@@ -26,4 +26,4 @@ export interface IdentityCellProps extends CommonProps {
  * @param {IdentityCellProps} props - The props for the LinkCell component
  * @returns {ReactElement} LinkCell component
  */
-export declare const IdentityCell: ({ link, className, dataTestId, title, details, thumbnail, }: IdentityCellProps) => ReactElement;
+export declare const IdentityCell: ({ link, className, "data-testid": dataTestId, title, details, thumbnail, }: IdentityCellProps) => ReactElement;

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

@@ -4,7 +4,7 @@ import { IdentityCellProps } from "./IdentityCell";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ link, className, dataTestId, title, details, thumbnail, }: IdentityCellProps) => ReactElement;
+    component: ({ link, className, "data-testid": dataTestId, title, details, thumbnail, }: IdentityCellProps) => ReactElement;
     argTypes: {};
     parameters: {
         docs: {

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

@@ -19,7 +19,7 @@ export interface ImageCellProps extends CommonProps {
     /**
      * A custom data-testid attribute for testing purposes.
      */
-    dataTestId?: string;
+    "data-testid"?: string;
 }
 /**
  * The `<ImageCell>` component is used for displaying images in a table cell.
@@ -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, dataTestId, ...rest }: ImageCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageCell: ({ imageUrl, alt, width, height, "data-testid": dataTestId, ...rest }: ImageCellProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,7 @@ import { ReactElement } from "react";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ imageUrl, alt, width, height, dataTestId, ...rest }: import("./ImageCell").ImageCellProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ imageUrl, alt, width, height, "data-testid": dataTestId, ...rest }: import("./ImageCell").ImageCellProps) => import("react/jsx-runtime").JSX.Element;
     argTypes: {};
     parameters: {
         docs: {

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

@@ -4,7 +4,7 @@ export interface LinkCellProps extends CommonProps, HTMLAttributes<HTMLTableSect
     /**
      * A id that can be used in tests to get the component
      */
-    dataTestId?: string;
+    "data-testid"?: string;
     /**
      * Custom classNames that will be merged with the default classNames.
      */

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

@@ -16,4 +16,4 @@ export interface MultiRowTableCellProps extends CommonProps {
  * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
  * @returns {ReactElement} MultiRowTableCell component
  */
-export declare const MultiRowTableCell: ({ main, secondary, dataTestId, className }: MultiRowTableCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiRowTableCell: ({ main, secondary, "data-testid": dataTestId, className, }: MultiRowTableCellProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ import { MultiRowTableCellProps } from "./MultiRowTableCell";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ main, secondary, dataTestId, className }: MultiRowTableCellProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ main, secondary, "data-testid": dataTestId, className, }: MultiRowTableCellProps) => import("react/jsx-runtime").JSX.Element;
     argTypes: {};
     parameters: {
         docs: {

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

@@ -8,7 +8,7 @@ export type ListTooltipProps<TItem = unknown> = {
     /** Items to render inside the tooltip. */
     items: Array<TItem>;
     /** Data test id for testing. */
-    dataTestId?: string;
+    "data-testid"?: string;
     /**
      * Custom label extractor. If omitted, strings/numbers/booleans are stringified,
      * React elements are returned as-is, and other objects are serialized.
@@ -31,4 +31,4 @@ export type ListTooltipProps<TItem = unknown> = {
  * @param {ListTooltipProps<TItem>} props Component props.
  * @returns {ReactNode} Tooltip list markup.
  */
-export declare const ListTooltip: <TItem = unknown>({ items, dataTestId, getLabel, getKey, loading, }: ListTooltipProps<TItem>) => import("react/jsx-runtime").JSX.Element;
+export declare const ListTooltip: <TItem = unknown>({ items, "data-testid": dataTestId, getLabel, getKey, loading, }: ListTooltipProps<TItem>) => import("react/jsx-runtime").JSX.Element;

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

@@ -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, 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, }: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -3,7 +3,7 @@ import { MultiValueTextCellProps } from "./MultiValueTextCell";
 import "./MultiValueTextCell.variants";
 declare const meta: {
     title: string;
-    component: ({ content, count, countTooltip, icon, iconTooltip, dataTestId, className, onMouseEnter, }: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element | null;
+    component: ({ content, count, countTooltip, icon, iconTooltip, "data-testid": dataTestId, className, onMouseEnter, }: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element | null;
     argTypes: {};
     parameters: {
         docs: {
@@ -19,7 +19,7 @@ export declare const PackageName: () => ReactElement;
 export declare const Default: {
     render: (props: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element;
     args: {
-        dataTestId: string;
+        "data-testid": string;
         count: number;
         content: string;
     };

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

@@ -16,7 +16,7 @@ export interface NumberCellProps extends CommonProps {
     /**
      * A custom data-testid attribute for testing purposes.
      */
-    dataTestId?: string;
+    "data-testid"?: string;
 }
 /**
  * The `<NumberCell>` component is used for displaying numbers with units in a table cell.
@@ -24,4 +24,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, dataTestId }: NumberCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberCell: ({ value, unit, className, "data-testid": dataTestId }: NumberCellProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,7 +5,7 @@ import "./NumberCell.variants";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ value, unit, className, dataTestId }: NumberCellProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ value, unit, className, "data-testid": dataTestId }: NumberCellProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         docs: {
             source: {

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

@@ -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, dataTestId }: PlainDateCellProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const PlainDateCell: ({ locale, date, withDaysSince, className, "data-testid": dataTestId, }: PlainDateCellProps) => import("react/jsx-runtime").JSX.Element | null;
 export interface DaysSinceProps extends Pick<PlainDateCellProps, "date" | "locale"> {
     date: Temporal.PlainDate;
 }

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

@@ -5,7 +5,7 @@ import "./PlainDateCell.variants";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ locale, date, withDaysSince, className, dataTestId }: PlainDateCellProps) => import("react/jsx-runtime").JSX.Element | null;
+    component: ({ locale, date, withDaysSince, className, "data-testid": dataTestId, }: PlainDateCellProps) => import("react/jsx-runtime").JSX.Element | null;
     argTypes: {};
     parameters: {
         docs: {

package/src/components/ResizeHandle.d.ts

@@ -8,8 +8,8 @@ export interface ResizeHandelProps extends CommonProps, HTMLAttributes<HTMLDivEl
  *
  * @param {ResizeHandelProps} props - Props for the resizable handle.
  * @param {boolean} [props.isResizing=false] - Indicates whether the handle is in a resizing state.
- * @param {string} [props.dataTestId] - A data-testid attribute for testing purposes.
+ * @param {string} [props."data-testid"] - A data-testid attribute for testing purposes.
  * @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, dataTestId, onMouseDown: onMouseDownHandler, className, ...rest }: ResizeHandelProps) => ReactElement;
+export declare const ResizeHandle: ({ isResizing, "data-testid": dataTestId, onMouseDown: onMouseDownHandler, className, ...rest }: ResizeHandelProps) => ReactElement;

package/src/components/SortIndicator.d.ts

@@ -4,7 +4,7 @@ export interface SortIndicatorProps extends CommonProps, React.HTMLAttributes<HT
     /**
      * A id that can be used in tests to get the component
      */
-    dataTestId?: string;
+    "data-testid"?: string;
     /**
      * Custom classNames that will be merged with the default classNames.
      */
@@ -23,8 +23,8 @@ export interface SortIndicatorProps extends CommonProps, React.HTMLAttributes<HT
  *
  * @param {object} props - Props for the sorting indicator.
  * @param {boolean} [props.sortingState=false] - Indicates the sorting state (ascending/descending).
- * @param {string} [props.dataTestId] - A data-testid attribute for testing purposes.
+ * @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.
  * @returns {ReactElement} A React element representing the sorting indicator.
  */
-export declare const SortIndicator: ({ sortingState, dataTestId, className, ...rest }: SortIndicatorProps) => ReactElement;
+export declare const SortIndicator: ({ sortingState, "data-testid": dataTestId, className, ...rest }: SortIndicatorProps) => ReactElement;

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

@@ -4,7 +4,7 @@ import { SortIndicatorProps } from "./SortIndicator";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ sortingState, dataTestId, className, ...rest }: SortIndicatorProps) => ReactElement;
+    component: ({ sortingState, "data-testid": dataTestId, className, ...rest }: SortIndicatorProps) => ReactElement;
     parameters: {
         docs: {
             source: {

package/src/components/TableRoot.d.ts

@@ -4,7 +4,7 @@ export interface TableRootProps extends CommonProps, HTMLAttributes<HTMLTableEle
     /**
      * A id that can be used in tests to get the component
      */
-    dataTestId?: string;
+    "data-testid"?: string;
     /**
      * Custom classNames that will be merged with the default classNames.
      */
@@ -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: ({ dataTestId, className, children, ...rest }: TableRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableRoot: ({ "data-testid": dataTestId, className, children, ...rest }: TableRootProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ export interface TagsCellProps extends CommonProps, HTMLAttributes<HTMLTableSect
     /**
      * A id that can be used in tests to get the component
      */
-    dataTestId?: string;
+    "data-testid"?: string;
     /**
      * Custom classNames that will be merged with the default classNames.
      */
@@ -20,4 +20,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, dataTestId }: TagsCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TagsCell: ({ className, tags, "data-testid": dataTestId }: TagsCellProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ import { TagsCellProps } from "./TagsCell";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ className, tags, dataTestId }: TagsCellProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, tags, "data-testid": dataTestId }: TagsCellProps) => import("react/jsx-runtime").JSX.Element;
     argTypes: {};
     parameters: {
         docs: {

package/src/components/Tbody.d.ts

@@ -4,7 +4,7 @@ export interface TbodyProps extends CommonProps, HTMLAttributes<HTMLTableSection
     /**
      * A id that can be used in tests to get the component
      */
-    dataTestId?: string;
+    "data-testid"?: string;
     /**
      * Custom classNames that will be merged with the default classNames.
      */
@@ -24,4 +24,4 @@ export interface TbodyProps extends CommonProps, HTMLAttributes<HTMLTableSection
  * @param {TbodyProps} props - The props for the Tbody component
  * @returns {ReactElement} Tbody component
  */
-export declare const Tbody: ({ dataTestId, className, children, ...rest }: TbodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tbody: ({ "data-testid": dataTestId, className, children, ...rest }: TbodyProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Td.d.ts

@@ -4,7 +4,7 @@ export interface TdProps extends CommonProps, HTMLAttributes<HTMLTableCellElemen
     /**
      * A id that can be used in tests to get the component
      */
-    dataTestId?: string;
+    "data-testid"?: string;
     /**
      * Custom classNames that will be merged with the default classNames.
      */
@@ -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: ({ dataTestId, className, children, ...rest }: TdProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Td: ({ "data-testid": dataTestId, className, children, ...rest }: TdProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -10,4 +10,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, dataTestId }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextCell: ({ content, className, "data-testid": dataTestId }: TextCellProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,7 +5,7 @@ import "./TextCell.variants";
 type Story = StoryObj<typeof meta>;
 declare const meta: {
     title: string;
-    component: ({ content, className, dataTestId }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ content, className, "data-testid": dataTestId }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
     argTypes: {};
     parameters: {
         docs: {

package/src/components/Tfoot.d.ts

@@ -4,7 +4,7 @@ export interface TfootProps extends CommonProps, HTMLAttributes<HTMLTableSection
     /**
      * A id that can be used in tests to get the component
      */
-    dataTestId?: string;
+    "data-testid"?: string;
     /**
      * Custom classNames that will be merged with the default classNames.
      */
@@ -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: ({ dataTestId, className, children, ...rest }: TfootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tfoot: ({ "data-testid": dataTestId, className, children, ...rest }: TfootProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Th.d.ts

@@ -4,7 +4,7 @@ export interface ThProps extends CommonProps, React.HTMLAttributes<HTMLTableCell
     /**
      * A id that can be used in tests to get the component
      */
-    dataTestId?: string;
+    "data-testid"?: string;
     /**
      * Custom classNames that will be merged with the default classNames.
      */
@@ -24,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, ...rest }: ThProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Th: ({ "data-testid": dataTestId, className, children, ...rest }: ThProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Thead.d.ts

@@ -4,7 +4,7 @@ export interface TheadProps extends CommonProps, HTMLAttributes<HTMLTableSection
     /**
      * A id that can be used in tests to get the component
      */
-    dataTestId?: string;
+    "data-testid"?: string;
     /**
      * Custom classNames that will be merged with the default classNames.
      */
@@ -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: ({ dataTestId, className, children, sticky, ...rest }: TheadProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Thead: ({ "data-testid": dataTestId, className, children, sticky, ...rest }: TheadProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/Tr.d.ts

@@ -4,7 +4,7 @@ export interface TrProps extends CommonProps, HTMLAttributes<HTMLTableRowElement
     /**
      * A id that can be used in tests to get the component
      */
-    dataTestId?: string;
+    "data-testid"?: string;
     /**
      * Custom classNames that will be merged with the default classNames.
      */
@@ -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: ({ dataTestId, className, children, layout, ...rest }: TrProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tr: ({ "data-testid": dataTestId, className, children, layout, ...rest }: TrProps) => import("react/jsx-runtime").JSX.Element;