@agilant/toga-blox 1.0.199 → 1.0.201

package/dist/components/TableCell/TableCell.d.ts

@@ -1,16 +1,3 @@
-import { DataWithUUID } from "./types";
-export interface TableCellProps<T extends DataWithUUID> {
-    cell: any;
-    isLastCell: boolean;
-    hasInfiniteScroll: boolean;
-    rowUuid?: string;
-    expanded: boolean;
-    onToggle: () => void;
-    linkText?: string;
-    cellExpandable?: boolean;
-    maxCharacters?: number;
-    cellMaxWidthWhenExpanded?: number;
-    cellColor: string;
-}
-declare const TableCell: <T extends DataWithUUID>({ cell, isLastCell, hasInfiniteScroll, expanded, onToggle, linkText, cellExpandable, maxCharacters, cellMaxWidthWhenExpanded, cellColor, }: TableCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+import { TableCellProps } from "./types";
+declare const TableCell: ({ cell, isLastCell, hasInfiniteScroll, expanded, onToggle, maxCharacters, cellMaxWidthWhenExpanded, cellColor, additionalCellClassNames, toggleComponent: ToggleComponent, cellExpandable, linkTextClassNames, }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
 export default TableCell;

package/dist/components/TableCell/TableCell.js

@@ -1,28 +1,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const MAX_CHARS = 30;
-const TableCell = ({ cell, isLastCell, hasInfiniteScroll, expanded, onToggle, linkText = "text-purple-500 ml-1 underline", cellExpandable = false, maxCharacters, cellMaxWidthWhenExpanded = 50, cellColor = "bg-blue-500", }) => {
-    /* decide if this cell even needs a toggle */
+const DEFAULT_MAX_CHARS = 30;
+// Default only implements the **collapsed** “Show more” UI.
+// We’ll never use its expanded branch, since expanded is handled below.
+const DefaultCollapsedToggle = ({ onToggle, truncated, className = "", linkTextClassNames = "text-purple-500 ml-1 underline", }) => (_jsx("div", { className: `flex items-center group ${className}`, onClick: (e) => {
+        e.stopPropagation();
+        onToggle();
+    }, children: _jsxs("span", { children: [truncated, "\u2026", _jsx("span", { className: "hidden group-hover:inline text-purple-500 ml-1 underline", children: "Show more" })] }) }));
+const TableCell = ({ cell, isLastCell, hasInfiniteScroll, expanded, onToggle, maxCharacters = DEFAULT_MAX_CHARS, cellMaxWidthWhenExpanded = 50, cellColor = "bg-blue-500", additionalCellClassNames = "", toggleComponent: ToggleComponent = DefaultCollapsedToggle, cellExpandable = false, linkTextClassNames = "text-purple-500 ml-1 underline", }) => {
+    // --- truncation logic ---
     const isString = typeof cell.value === "string";
     const fullText = isString ? cell.value : "";
     const isLong = isString && fullText.length > maxCharacters;
-    const hasToggle = cellExpandable && isLong;
     const truncated = fullText.slice(0, maxCharacters);
-    /* stop row click when toggling */
-    const handleToggle = (e) => {
-        e.stopPropagation(); // ← prevents bubbling to the <tr>
-        onToggle();
-    };
+    const needsToggle = cellExpandable && isLong;
+    // --- sticky support ---
     const isStickyColumn = cell?.column?.sticky === "left";
-    const stickyLeft = isStickyColumn && cell.column?.style
-        ? cell.column.style.left ?? 0
-        : 0;
-    const stickyClass = isStickyColumn ? cell.column?.className || "" : "";
-    const baseTd = `relative overflow-hidden font-light text-sm text-left px-5  ${cellColor}`;
-    const wrapper = ` min-h-[40px] flex select-none  ${cellColor} ${hasToggle ? " cursor-pointer" : ""}`;
-    // FIX: extract key before spreading props into <td>
+    const baseTd = `relative overflow-hidden font-light text-sm text-left px-5 ${cellColor}`;
+    const wrapper = `min-h-[40px] flex select-none ${cellColor} ${needsToggle ? "cursor-pointer" : ""}`;
+    // extract key before spreading
     const rawCellProps = cell.getCellProps({
         className: isLastCell ? "" : baseTd,
-        style: cell.column?.sticky === "left"
+        style: isStickyColumn
             ? {
                 position: "sticky",
                 left: cell.column.style?.left || 0,
@@ -30,19 +28,18 @@ const TableCell = ({ cell, isLastCell, hasInfiniteScroll, expanded, onToggle, li
             }
             : {},
     });
-    const { key: cellKey, ...safeCellProps } = Object.assign({}, rawCellProps);
-    return (_jsx("td", { ...safeCellProps, className: isStickyColumn ? undefined : isLastCell ? "" : baseTd, children: _jsx("div", { className: wrapper, children: hasToggle ? (!expanded ? (
-            /* collapsed view */
-            _jsx("div", { className: "flex items-start group", children: _jsxs("span", { children: [truncated, "\u2026", _jsx("span", { ...(hasToggle
-                                ? { onClick: handleToggle }
-                                : {}), className: `hidden group-hover:inline ${linkText}`, children: "Show more" })] }) })) : (
-            /* expanded view */
-            _jsxs("div", { className: `flex flex-col `, style: {
+    const { key: cellKey, ...safeCellProps } = rawCellProps;
+    return (_jsx("td", { ...safeCellProps, className: isStickyColumn ? undefined : isLastCell ? "" : baseTd, children: _jsx("div", { className: wrapper, style: { maxWidth: `${cellMaxWidthWhenExpanded}ch` }, children: needsToggle ? (!expanded ? (
+            // **collapsed**: use your ToggleComponent (portal-friendly)
+            _jsx(ToggleComponent, { expanded: expanded, onToggle: onToggle, truncated: truncated, fullText: fullText, className: additionalCellClassNames, linkTextClassNames: linkTextClassNames })) : (
+            // **expanded**: always use this constant layout
+            _jsxs("div", { className: "flex flex-col", style: {
                     maxWidth: `${cellMaxWidthWhenExpanded}ch`,
-                }, children: [_jsx("span", { children: fullText }), _jsx("span", { ...(hasToggle
-                            ? { onClick: handleToggle }
-                            : {}), className: linkText, children: "Show less" })] }))) : (
-            /* no toggle required */
+                }, children: [_jsx("span", { className: "text-left pr-5", children: fullText }), _jsx("span", { onClick: (e) => {
+                            e.stopPropagation();
+                            onToggle();
+                        }, className: linkTextClassNames, children: "Show less" })] }))) : (
+            // no truncation needed
             cell.render("Cell")) }) }, cellKey));
 };
 export default TableCell;

package/dist/components/TableCell/TableCell.stories.d.ts

@@ -6,3 +6,4 @@ export declare const Default: any;
 export declare const CollapsedByDefault: any;
 export declare const NoExpand: any;
 export declare const LastCell: any;
+export declare const WithCustomToggle: any;

package/dist/components/TableCell/TableCell.stories.js

@@ -1,9 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // src/components/TableCell/TableCell.stories.tsx
 import { useState } from "react";
 import TableCell from ".";
+// ----- Custom Toggle component -----
+const CustomToggle = ({ expanded, onToggle, truncated, fullText, className = "", linkTextClassNames = "text-purple-500 ml-1 underline", }) => (_jsx("button", { onClick: (e) => {
+        e.stopPropagation();
+        onToggle();
+    }, className: `px-2 py-1 border rounded ${className}`, children: expanded ? (_jsxs(_Fragment, { children: [fullText, " ", _jsx("span", { className: linkTextClassNames, children: "\u25B2 Less" })] })) : (_jsxs(_Fragment, { children: [truncated, "\u2026 ", _jsx("span", { className: linkTextClassNames, children: "\u25BC More" })] })) }));
 const sampleData = {
-    uuid: "12345",
     address: "123 Main St, Springfield, IL, 62701, United States of America — this is a very long address so we can show the expand behavior.",
 };
 /* ---------- story config ---------- */
@@ -37,7 +41,7 @@ const Template = (args) => {
         getCellProps: () => ({}),
         column: {},
     };
-    return (_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { cellColor: "", ...args, cell: fakeCell, expanded: expanded, onToggle: () => setExpanded((e) => !e) }) }) }) }));
+    return (_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { additionalCellClassNames: "", cellColor: "", ...args, cell: fakeCell, expanded: expanded, onToggle: () => setExpanded((e) => !e) }) }) }) }));
 };
 /* ---------- stories ---------- */
 export const Default = Template.bind({});
@@ -62,3 +66,11 @@ LastCell.args = {
     isLastCell: true,
     cellExpandable: true,
 };
+export const WithCustomToggle = Template.bind({});
+WithCustomToggle.args = {
+    isLastCell: false,
+    cellExpandable: true,
+    maxCharacters: 20,
+    toggleComponent: CustomToggle,
+    hasInfiniteScroll: true,
+};

package/dist/components/TableCell/TableCell.test.js

@@ -9,6 +9,7 @@ const sampleData = {
     age: 30,
     address: "123 Main St, Springfield, IL, 62701, United States of America",
 };
+//FIXME: THIS SHOULD NOT BE ANY
 const defaultProps = {
     globalTrimActive: true,
     rowUuid: sampleData.uuid,
@@ -55,7 +56,7 @@ const defaultProps = {
 };
 describe("TableCell Component", () => {
     it("trims the text when globalTrimActive is true", () => {
-        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { cellColor: "", expanded: false, onToggle: function () {
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { additionalCellClassNames: "", cellColor: "", expanded: false, onToggle: function () {
                             throw new Error("Function not implemented.");
                         }, ...defaultProps }) }) }) }));
         const trimmedText = `${sampleData.address.substring(0, 30)}...`;
@@ -63,14 +64,14 @@ describe("TableCell Component", () => {
     });
     it("does not trim the text when globalTrimActive is false", () => {
         const props = { ...defaultProps, globalTrimActive: false };
-        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { cellColor: "", expanded: false, onToggle: function () {
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { additionalCellClassNames: "", cellColor: "", expanded: false, onToggle: function () {
                             throw new Error("Function not implemented.");
                         }, ...props }) }) }) }));
         expect(screen.getByText(sampleData.address)).toBeInTheDocument();
     });
     it("applies different styles when isLastCell is true", () => {
         const props = { ...defaultProps, isLastCell: true };
-        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { cellColor: "", expanded: false, onToggle: function () {
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { additionalCellClassNames: "", cellColor: "", expanded: false, onToggle: function () {
                             throw new Error("Function not implemented.");
                         }, ...props }) }) }) }));
         const cell = screen.getByRole("cell");
@@ -85,7 +86,7 @@ describe("TableCell Component", () => {
                 render: (type) => (type === "Cell" ? "42" : null),
             },
         };
-        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { cellColor: "", expanded: false, onToggle: function () {
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { additionalCellClassNames: "", cellColor: "", expanded: false, onToggle: function () {
                             throw new Error("Function not implemented.");
                         }, ...numericValueProps }) }) }) }));
         expect(screen.getByText("42")).toBeInTheDocument();

package/dist/components/TableCell/types.d.ts

@@ -1,14 +1,37 @@
-import { Cell } from "react-table";
 export interface DataWithUUID {
     uuid?: string;
 }
-export interface TableCellProps<T extends object> {
-    cell: Cell<T>;
+export interface ToggleProps {
+    expanded: boolean;
+    onToggle: () => void;
+    truncated: string;
+    fullText: string;
+    className?: string;
+    linkTextClassNames?: string;
+}
+export interface TableCellProps {
+    /** the react-table cell object */
+    cell: any;
+    /** is this the last column? */
     isLastCell: boolean;
+    /** do we want truncation/expand behavior? */
+    cellExpandable?: boolean;
+    /** current collapsed/expanded state */
+    expanded: boolean;
+    /** toggle callback */
+    onToggle: () => void;
+    /** text-slice length (default 30) */
+    maxCharacters?: number;
+    /** width in `ch` when expanded (default 50) */
+    cellMaxWidthWhenExpanded?: number;
+    /** background color utility (e.g. “bg-blue-50”) */
+    cellColor?: string;
+    /** extra wrapper classes */
+    additionalCellClassNames?: string;
+    /** if true, will show “Show more / Show less” */
     hasInfiniteScroll: boolean;
-    globalTrimActive?: boolean;
-    rowUuid?: string;
-    columnInputs?: string[];
-    rowHoverClasses?: string;
-    linkText?: string;
+    /** override the collapsed UI */
+    toggleComponent?: React.ComponentType<ToggleProps>;
+    /** classes for both “more” & “less” links */
+    linkTextClassNames?: string;
 }

package/dist/components/TableRow/TableRow.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import { Row } from "react-table";
-import { DataWithUUID } from "../TableCell";
+import { DataWithUUID, ToggleProps } from "../TableCell";
 export interface TableRowProps<T extends DataWithUUID> {
     row: Row<T>;
     prepareRow: (row: Row<T>) => void;
@@ -13,18 +13,21 @@ export interface TableRowProps<T extends DataWithUUID> {
     cellExpandable?: boolean;
     expandedCells: Record<string, boolean>;
     toggleCell: (key: string) => void;
+    ToggleComponent?: React.ComponentType<ToggleProps>;
     hasDropDown?: boolean;
     onFetchRowData?: (uuid: string) => Promise<void> | void;
     loadingIndicator?: ReactNode;
     errorIndicator?: (error: Error) => ReactNode;
     expandedContent?: ReactNode;
-    linkText?: string;
+    linkTextClassNames?: string;
     rowClassNames?: string;
     maxCharacters: number;
     expandedRowUuid?: string | null;
     onToggleRow?: (uuid: string) => void;
     cellColor: string;
     cellMaxWidthWhenExpanded: number;
+    additionalCellClassNames: string;
+    toggleComponent?: React.ComponentType<ToggleProps>;
 }
-declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, activeRowColor, rowHoverClasses, rowClassNames, hasInfiniteScroll, rowUuid, onRowClick, expandedCells, toggleCell, hasDropDown, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, linkText, expandedRowUuid, cellExpandable, onToggleRow, maxCharacters, cellColor, cellMaxWidthWhenExpanded, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, activeRowColor, rowHoverClasses, rowClassNames, hasInfiniteScroll, rowUuid, onRowClick, expandedCells, toggleCell, hasDropDown, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, expandedRowUuid, cellExpandable, onToggleRow, maxCharacters, cellColor, cellMaxWidthWhenExpanded, additionalCellClassNames, toggleComponent, linkTextClassNames, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TableRow;

package/dist/components/TableRow/TableRow.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import TableCell from "../TableCell";
-const TableRow = ({ row, prepareRow, activeIndex, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-navy-100 hover:cursor-pointer", rowClassNames = "", hasInfiniteScroll, rowUuid, onRowClick, expandedCells, toggleCell, hasDropDown = false, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, linkText = "text-blue-500", expandedRowUuid = null, cellExpandable = false, onToggleRow, maxCharacters = 30, cellColor = "bg-blue-50", cellMaxWidthWhenExpanded = 50, }) => {
+const TableRow = ({ row, prepareRow, activeIndex, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-navy-100 hover:cursor-pointer", rowClassNames = "", hasInfiniteScroll, rowUuid, onRowClick, expandedCells, toggleCell, hasDropDown = false, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, expandedRowUuid = null, cellExpandable = false, onToggleRow, maxCharacters = 30, cellColor = "bg-blue-50", cellMaxWidthWhenExpanded = 50, additionalCellClassNames = "", toggleComponent = undefined, linkTextClassNames = "text-purple-500 ml-1 underline", }) => {
     prepareRow(row);
     const rowClasses = `border-primary${activeIndex === row.index ? ` activeRow ${activeRowColor}` : ""}`;
     /* keep fetch/loading local */
@@ -41,7 +41,7 @@ const TableRow = ({ row, prepareRow, activeIndex, activeRowColor = "bg-pink-100"
         : {};
     return (_jsxs(Fragment, { children: [_jsx("tr", { "data-testid": "table-row", className: `border-b border-b-navy-200 ${rowHoverClasses} ${rowClasses} ${rowClassNames}`, onClick: handleRowClick, ...safeRowProps, children: row.cells.map((cell, idx) => {
                     const cellKey = `${rowUuid ?? "no-uuid"}-${cell.column.id}`;
-                    return (_jsx(TableCell, { cell: cell, isLastCell: idx === row.cells.length - 1, hasInfiniteScroll: hasInfiniteScroll, cellExpandable: cellExpandable, rowUuid: rowUuid, expanded: expandedCells[cellKey] ?? false, onToggle: () => toggleCell(cellKey), linkText: linkText, maxCharacters: maxCharacters, cellColor: cellColor, cellMaxWidthWhenExpanded: cellMaxWidthWhenExpanded }, cellKey));
+                    return (_jsx(TableCell, { cell: cell, isLastCell: idx === row.cells.length - 1, hasInfiniteScroll: hasInfiniteScroll, cellExpandable: cellExpandable, expanded: expandedCells[cellKey] ?? false, onToggle: () => toggleCell(cellKey), linkTextClassNames: linkTextClassNames, maxCharacters: maxCharacters, cellColor: cellColor, cellMaxWidthWhenExpanded: cellMaxWidthWhenExpanded, additionalCellClassNames: additionalCellClassNames, toggleComponent: toggleComponent }, cellKey));
                 }) }, rowUuid), hasDropDown && (_jsx(AnimatePresence, { children: isExpanded && (_jsx("tr", { "data-testid": "expanded-row", children: _jsx("td", { colSpan: row.cells.length, className: "p-0", children: _jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.3 }, className: "overflow-hidden w-full", children: isLoading ? (loadingIndicator ?? (_jsx("span", { children: "Loading..." }))) : error ? (errorIndicator ? (errorIndicator(error)) : (_jsxs("span", { className: "text-red-700", children: ["Error: ", error.message] }))) : (expandedContent ?? (_jsxs("span", { children: ["drop down \u2013 ", rowUuid] }))) }, "expanded-dropdown-content") }) })) }))] }));
 };
 export default TableRow;

package/dist/components/TableRow/TableRow.stories.js

@@ -96,7 +96,7 @@ const Template = (args) => {
     // ── **new** single-row expansion state ──
     const [expandedRowUuid, setExpandedRowUuid] = React.useState(null);
     const onToggleRow = React.useCallback((uuid) => setExpandedRowUuid((prev) => (prev === uuid ? null : uuid)), []);
-    return (_jsx("table", { className: "min-w-[700px]", children: _jsx("tbody", { children: _jsx(TableRow, { cellColor: "", cellMaxWidthWhenExpanded: 0, row: undefined, prepareRow: function (row) {
+    return (_jsx("table", { className: "min-w-[700px]", children: _jsx("tbody", { children: _jsx(TableRow, { additionalCellClassNames: "", cellColor: "", cellMaxWidthWhenExpanded: 0, row: undefined, prepareRow: function (row) {
                     throw new Error("Function not implemented.");
                 }, ...args, expandedCells: expandedCells, toggleCell: toggleCell, hasInfiniteScroll: args.hasInfiniteScroll ?? true, onRowClick: args.onRowClick ?? (() => alert("from row")), expandedRowUuid: expandedRowUuid, onToggleRow: onToggleRow, maxCharacters: 30 }) }) }));
 };
@@ -124,5 +124,5 @@ export const MultipleRows = () => {
     const toggleCell = React.useCallback((key) => setExpandedCells((s) => ({ ...s, [key]: !s[key] })), []);
     const [expandedRowUuid, setExpandedRowUuid] = React.useState(null);
     const onToggleRow = React.useCallback((uuid) => setExpandedRowUuid((prev) => (prev === uuid ? null : uuid)), []);
-    return (_jsx("table", { className: "min-w-[700px]", children: _jsxs("tbody", { children: [_jsx(TableRow, { row: mockRow, prepareRow: prepareRow, hasInfiniteScroll: true, onRowClick: () => alert("from row"), hasDropDown: true, rowUuid: "1", expandedContent: sampleData.expandedContent, expandedCells: expandedCells, toggleCell: toggleCell, expandedRowUuid: expandedRowUuid, onToggleRow: onToggleRow, maxCharacters: 30, cellColor: "", cellMaxWidthWhenExpanded: 0 }), _jsx(TableRow, { row: mockRow2, prepareRow: prepareRow, hasInfiniteScroll: true, onRowClick: () => alert("from row"), hasDropDown: false, rowUuid: "2", expandedContent: sampleData.expandedContent, expandedCells: expandedCells, toggleCell: toggleCell, expandedRowUuid: expandedRowUuid, onToggleRow: onToggleRow, cellExpandable: true, maxCharacters: 30, cellColor: "", cellMaxWidthWhenExpanded: 0 })] }) }));
+    return (_jsx("table", { className: "min-w-[700px]", children: _jsxs("tbody", { children: [_jsx(TableRow, { row: mockRow, prepareRow: prepareRow, hasInfiniteScroll: true, onRowClick: () => alert("from row"), hasDropDown: true, rowUuid: "1", expandedContent: sampleData.expandedContent, expandedCells: expandedCells, toggleCell: toggleCell, expandedRowUuid: expandedRowUuid, onToggleRow: onToggleRow, maxCharacters: 30, cellColor: "", cellMaxWidthWhenExpanded: 0, additionalCellClassNames: "" }), _jsx(TableRow, { row: mockRow2, prepareRow: prepareRow, hasInfiniteScroll: true, onRowClick: () => alert("from row"), hasDropDown: false, rowUuid: "2", expandedContent: sampleData.expandedContent, expandedCells: expandedCells, toggleCell: toggleCell, expandedRowUuid: expandedRowUuid, onToggleRow: onToggleRow, cellExpandable: true, maxCharacters: 30, cellColor: "", cellMaxWidthWhenExpanded: 0, additionalCellClassNames: "" })] }) }));
 };

package/dist/components/TableRow/TableRow.test.js

@@ -25,7 +25,7 @@ describe("TableRow - Branch Coverage Tests", () => {
                         throw new Error("Function not implemented.");
                     }, expandedCells: undefined, toggleCell: function (key) {
                         throw new Error("Function not implemented.");
-                    }, maxCharacters: 0, cellColor: "", cellMaxWidthWhenExpanded: 0 }) }) }));
+                    }, maxCharacters: 0, cellColor: "", cellMaxWidthWhenExpanded: 0, additionalCellClassNames: "" }) }) }));
         expect(screen.getByTestId("table-row")).toHaveClass("activeRow");
     });
     it("covers isActive = false (row is NOT active)", () => {
@@ -33,14 +33,14 @@ describe("TableRow - Branch Coverage Tests", () => {
                         throw new Error("Function not implemented.");
                     }, expandedCells: undefined, toggleCell: function (key) {
                         throw new Error("Function not implemented.");
-                    }, maxCharacters: 0, cellColor: "", cellMaxWidthWhenExpanded: 0 }) }) }));
+                    }, maxCharacters: 0, cellColor: "", cellMaxWidthWhenExpanded: 0, additionalCellClassNames: "" }) }) }));
         expect(screen.getByTestId("table-row")).not.toHaveClass("activeRow");
     });
     it("covers onRowClick = defined + rowUuid = provided", () => {
         const mockOnRowClick = vi.fn();
         render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow, onRowClick: mockOnRowClick, rowUuid: "some-uuid", hasInfiniteScroll: false, expandedCells: undefined, toggleCell: function (key) {
                         throw new Error("Function not implemented.");
-                    }, maxCharacters: 0, cellColor: "", cellMaxWidthWhenExpanded: 0 }) }) }));
+                    }, maxCharacters: 0, cellColor: "", cellMaxWidthWhenExpanded: 0, additionalCellClassNames: "" }) }) }));
         fireEvent.click(screen.getByTestId("table-row"));
         expect(mockOnRowClick).toHaveBeenCalledWith(baseMockRow.index, // 0
         "some-uuid", expect.anything() // Synthetic event
@@ -50,7 +50,7 @@ describe("TableRow - Branch Coverage Tests", () => {
         const mockOnRowClick = vi.fn();
         render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow, onRowClick: mockOnRowClick, hasInfiniteScroll: false, expandedCells: undefined, toggleCell: function (key) {
                         throw new Error("Function not implemented.");
-                    }, maxCharacters: 0, cellColor: "", cellMaxWidthWhenExpanded: 0 }) }) }));
+                    }, maxCharacters: 0, cellColor: "", cellMaxWidthWhenExpanded: 0, additionalCellClassNames: "" }) }) }));
         fireEvent.click(screen.getByTestId("table-row"));
         expect(mockOnRowClick).toHaveBeenCalledWith(baseMockRow.index, // 0
         "", expect.anything());
@@ -60,7 +60,7 @@ describe("TableRow - Branch Coverage Tests", () => {
                         throw new Error("Function not implemented.");
                     }, expandedCells: undefined, toggleCell: function (key) {
                         throw new Error("Function not implemented.");
-                    }, maxCharacters: 0, cellColor: "", cellMaxWidthWhenExpanded: 0 }) }) }));
+                    }, maxCharacters: 0, cellColor: "", cellMaxWidthWhenExpanded: 0, additionalCellClassNames: "" }) }) }));
         // onRowClick not provided; just ensure no crash
         fireEvent.click(screen.getByTestId("table-row"));
     });

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.199",
+	"version": "1.0.201",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",