@agilant/toga-blox 1.0.162 → 1.0.163

package/dist/components/TableCell/TableCell.js

@@ -1,29 +1,26 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// src/components/TableCell/TableCell.tsx
 import { useState } from "react";
 const MAX_CHARS = 30;
-const TableCell = ({ cell, isLastCell, hasInfiniteScroll, linkText = "text-purple-500 text-primary ml-1 underline", }) => {
+const TableCell = ({ cell, isLastCell, hasInfiniteScroll, linkText = "text-purple-500 ml-1 underline", }) => {
     const [expanded, setExpanded] = useState(false);
-    /* ---------- value helpers ---------- */
+    // Determine if we need a toggle
     const isString = typeof cell.value === "string";
     const fullText = isString ? cell.value : "";
     const isLong = isString && fullText.length > MAX_CHARS;
+    const hasToggle = hasInfiniteScroll && isLong;
     const truncated = fullText.slice(0, MAX_CHARS);
-    /* ---------- class strings ---------- */
-    const tableDataCls = "relative overflow-hidden font-light text-sm text-left z-0 px-5";
-    const cellContainerCls = "min-h-[40px] flex items-center group select-none" +
-        (hasInfiniteScroll && isLong ? " cursor-pointer" : "");
-    /* ---------- toggle ---------- */
+    // Only stop propagation / toggle when hasToggle is true
     const handleToggle = (e) => {
         e.stopPropagation();
-        if (hasInfiniteScroll && isLong)
-            setExpanded((prev) => !prev);
+        setExpanded((prev) => !prev);
     };
-    return (_jsx("td", { ...cell.getCellProps(), className: isLastCell ? "" : tableDataCls, children: _jsx("div", { className: cellContainerCls, onClick: handleToggle, children: isString && isLong && hasInfiniteScroll ? (!expanded ? (
-            /* ---------- COLLAPSED ---------- */
-            _jsxs("span", { children: [truncated, _jsx("span", { className: "inline group-hover:hidden", children: "\u2026" }), _jsx("span", { className: `hidden group-hover:inline ${linkText}`, children: "Show more" })] })) : (
-            /* ---------- EXPANDED ---------- */
-            _jsxs("span", { children: [fullText, _jsx("span", { className: linkText, children: "Show less" })] }))) : (
-            /* non‑string, short string, or infinite scroll disabled */
+    const baseTdCls = "relative overflow-hidden font-light text-sm text-left px-5";
+    const cellWrapperCls = "min-h-[40px] flex items-center";
+    return (_jsx("td", { ...cell.getCellProps(), className: isLastCell ? "" : baseTdCls, children: _jsx("div", { className: cellWrapperCls, ...(hasToggle
+                ? { onClick: handleToggle, style: { cursor: "pointer" } }
+                : {}), children: hasToggle ? (!expanded ? (_jsxs(_Fragment, { children: [truncated, _jsx("span", { className: "inline group-hover:hidden", children: "\u2026" }), _jsx("span", { className: linkText, children: "Show more" })] })) : (_jsxs(_Fragment, { children: [fullText, _jsx("span", { className: linkText, children: "Show less" })] }))) : (
+            /* no toggle: render normally, clicks bubble to row */
             cell.render("Cell")) }) }));
 };
 export default TableCell;

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

@@ -8,10 +8,10 @@ export interface TableRowProps<T extends DataWithUUID> {
     activeRowColor?: string;
     rowHoverClasses?: string;
     globalTrimActive?: boolean;
-    hasInfiniteScroll?: boolean;
+    hasInfiniteScroll: boolean;
     rowUuid?: string;
     columnInputs?: string[];
-    onRowClick?: (index: number, rowUuid: string, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
+    onRowClick: (index: number, rowUuid: string, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
     hasDropDown?: boolean;
     onFetchRowData?: (uuid: string) => Promise<void> | void;
     loadingIndicator?: ReactNode;

package/dist/components/TableRow/TableRow.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/components/TableRow/TableRow.tsx
 import { Fragment, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import TableCell from "../TableCell";
@@ -8,30 +9,29 @@ import TableCell from "../TableCell";
 const TableRow = ({ 
 /* react‑table */
 row, prepareRow, 
-/* visual / interaction */
-activeIndex, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-red-100 hover:cursor-pointer", 
-/* cell behaviour */
-globalTrimActive, hasInfiniteScroll = false, 
-/* row meta */
+/* visual */
+activeIndex, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-navy-100 hover:cursor-pointer", 
+/* cell props */
+globalTrimActive = false, hasInfiniteScroll, 
+/* meta */
 rowUuid, columnInputs, 
-/* callbacks */
+/* click handler */
 onRowClick, 
-/* expandable row */
+/* dropdown */
 hasDropDown = false, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, }) => {
-    /* prepare row for rendering */
+    /* prepare react-table row */
     prepareRow(row);
     const isActive = activeIndex === row.index;
     let rowClasses = "border-primary";
-    if (isActive) {
+    if (isActive)
         rowClasses += ` activeRow ${activeRowColor}`;
-    }
-    /* local state for dropdown expansion */
+    /* local dropdown state */
     const [isExpanded, setIsExpanded] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
-    /* handle row click (fires dropdown & optional fetch) */
-    const handleRowClick = async (event) => {
-        onRowClick?.(row.index, rowUuid || "", event);
+    /* row‑click: call your passed‑in handler, then dropdown logic */
+    const handleRowClick = async (e) => {
+        onRowClick(row.index, rowUuid ?? "", e);
         if (hasDropDown) {
             setIsExpanded((prev) => !prev);
             if (onFetchRowData && rowUuid) {

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

@@ -1,16 +1,7 @@
-import { Meta } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import TableRow from "./TableRow";
-declare const _default: Meta<typeof TableRow>;
-export default _default;
+declare const meta: Meta<typeof TableRow>;
+export default meta;
 export declare const Default: any;
 export declare const ExpandableRow: any;
-export declare const MultipleRows: {
-    (): import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        docs: {
-            description: {
-                story: string;
-            };
-        };
-    };
-};
+export declare const MultipleRows: StoryFn;

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

@@ -58,7 +58,6 @@ const makeCells = (d) => [
 ];
 const cellsForRow1 = makeCells(sampleData);
 const cellsForRow2 = makeCells(sampleData2);
-/* react‑table’s Row type is mocked for Storybook preview */
 const makeMockRow = (d, idx, cells) => ({
     index: idx,
     id: String(idx),
@@ -71,37 +70,36 @@ const makeMockRow = (d, idx, cells) => ({
 });
 const mockRow = makeMockRow(sampleData, 0, cellsForRow1);
 const mockRow2 = makeMockRow(sampleData2, 1, cellsForRow2);
-const prepareRow = () => { }; // no‑op for the mock
+const prepareRow = () => { }; // no‑op for Storybook
 /* ------------------------------------------------------------------ */
 /*                        STORYBOOK CONFIG                            */
 /* ------------------------------------------------------------------ */
-export default {
+const meta = {
     title: "Table/TableRow",
     component: TableRow,
     tags: ["autodocs"],
+    decorators: [
+        (Story) => (_jsx("div", { onClickCapture: (e) => {
+                const t = e.target.innerText;
+                if (t === "Show more" || t === "Show less") {
+                    alert("from cell");
+                }
+            }, children: _jsx(Story, {}) })),
+    ],
     argTypes: {
-        hasInfiniteScroll: {
-            control: "boolean",
-            description: "When **true**, long strings in cells truncate to 30 chars and can expand on click.",
-        },
-        hasDropDown: {
-            control: "boolean",
-            description: "Whether this row has the sliding dropdown section.",
-        },
+        hasInfiniteScroll: { control: "boolean" },
+        hasDropDown: { control: "boolean" },
+        onRowClick: { action: "row clicked" },
     },
     parameters: {
         layout: "centered",
-        docs: {
-            description: {
-                component: "Demonstrates the reusable **TableRow** and nested **TableCell**: click a truncated cell to ‘Show more / Show less’, and (optionally) expand the entire row via dropdown.",
-            },
-        },
     },
 };
+export default meta;
 /* ------------------------------------------------------------------ */
 /*                              TEMPLATE                              */
 /* ------------------------------------------------------------------ */
-const Template = (args) => (_jsx("table", { className: "min-w-[700px]", children: _jsx("tbody", { children: _jsx(TableRow, { ...args }) }) }));
+const Template = (args) => (_jsx("table", { className: "min-w-[700px]", children: _jsx("tbody", { children: _jsx(TableRow, { ...args, hasInfiniteScroll: args.hasInfiniteScroll ?? true, onRowClick: args.onRowClick ?? (() => alert("from row")) }) }) }));
 /* ------------------------------------------------------------------ */
 /*                               STORIES                              */
 /* ------------------------------------------------------------------ */
@@ -109,17 +107,12 @@ export const Default = Template.bind({});
 Default.args = {
     row: mockRow,
     prepareRow,
-    hasInfiniteScroll: true,
-    globalTrimActive: false,
-    hasDropDown: false,
-    rowUuid: sampleData.uuid,
-};
-Default.parameters = {
-    docs: {
-        description: {
-            story: "Click the **address** cell to toggle between its truncated preview and the full text.",
-        },
-    },
+    hasInfiniteScroll: true, // ✅ required
+    onRowClick: () => alert("from row"), // ✅ required
+    globalTrimActive: false, // optional
+    hasDropDown: false, // optional
+    rowUuid: sampleData.uuid, // optional
+    // (you can omit activeIndex, columnInputs, rowHoverClasses—they’re optional)
 };
 export const ExpandableRow = Template.bind({});
 ExpandableRow.args = {
@@ -127,19 +120,4 @@ ExpandableRow.args = {
     hasDropDown: true,
     expandedContent: sampleData.expandedContent,
 };
-ExpandableRow.parameters = {
-    docs: {
-        description: {
-            story: "Row showcasing **both** the cell truncate/expand **and** the sliding dropdown. " +
-                "Click the address cell for ‘Show more’, and click the row itself for the dropdown.",
-        },
-    },
-};
-export const MultipleRows = () => (_jsx("table", { className: "min-w-[700px]", children: _jsxs("tbody", { children: [_jsx(TableRow, { row: mockRow, prepareRow: prepareRow, hasInfiniteScroll: true, hasDropDown: true, expandedContent: sampleData.expandedContent, rowUuid: sampleData.uuid }), _jsx(TableRow, { row: mockRow2, prepareRow: prepareRow, hasInfiniteScroll: true, hasDropDown: false, rowUuid: sampleData2.uuid })] }) }));
-MultipleRows.parameters = {
-    docs: {
-        description: {
-            story: "Two‑row table: the first row includes both cell truncation and a dropdown; the second row is static.",
-        },
-    },
-};
+export const MultipleRows = () => (_jsx("table", { className: "min-w-[700px]", children: _jsxs("tbody", { children: [_jsx(TableRow, { row: mockRow, prepareRow: prepareRow, hasInfiniteScroll: true, onRowClick: () => alert("from row"), globalTrimActive: false, hasDropDown: true, rowUuid: sampleData.uuid, expandedContent: sampleData.expandedContent }), _jsx(TableRow, { row: mockRow2, prepareRow: prepareRow, hasInfiniteScroll: true, onRowClick: () => alert("from row"), globalTrimActive: false, hasDropDown: false, rowUuid: sampleData2.uuid })] }) }));

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

@@ -21,16 +21,20 @@ describe("TableRow - Branch Coverage Tests", () => {
         getRowProps: vi.fn(() => ({ key: "row-props-0" })),
     };
     it("covers isActive = true (row is active)", () => {
-        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: { ...baseMockRow, index: 5 }, prepareRow: mockPrepareRow, activeIndex: 5 }) }) }));
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: { ...baseMockRow, index: 5 }, prepareRow: mockPrepareRow, activeIndex: 5, hasInfiniteScroll: false, onRowClick: function (index, rowUuid, event) {
+                        throw new Error("Function not implemented.");
+                    } }) }) }));
         expect(screen.getByTestId("table-row")).toHaveClass("activeRow");
     });
     it("covers isActive = false (row is NOT active)", () => {
-        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: { ...baseMockRow, index: 2 }, prepareRow: mockPrepareRow, activeIndex: 5 }) }) }));
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: { ...baseMockRow, index: 2 }, prepareRow: mockPrepareRow, activeIndex: 5, hasInfiniteScroll: false, onRowClick: function (index, rowUuid, event) {
+                        throw new Error("Function not implemented.");
+                    } }) }) }));
         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" }) }) }));
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow, onRowClick: mockOnRowClick, rowUuid: "some-uuid", hasInfiniteScroll: false }) }) }));
         fireEvent.click(screen.getByTestId("table-row"));
         expect(mockOnRowClick).toHaveBeenCalledWith(baseMockRow.index, // 0
         "some-uuid", expect.anything() // Synthetic event
@@ -38,13 +42,15 @@ describe("TableRow - Branch Coverage Tests", () => {
     });
     it("covers onRowClick = defined + rowUuid = undefined (so calls empty string)", () => {
         const mockOnRowClick = vi.fn();
-        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow, onRowClick: mockOnRowClick }) }) }));
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow, onRowClick: mockOnRowClick, hasInfiniteScroll: false }) }) }));
         fireEvent.click(screen.getByTestId("table-row"));
         expect(mockOnRowClick).toHaveBeenCalledWith(baseMockRow.index, // 0
         "", expect.anything());
     });
     it("covers onRowClick = NOT defined", () => {
-        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow }) }) }));
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow, hasInfiniteScroll: false, onRowClick: function (index, rowUuid, event) {
+                        throw new Error("Function not implemented.");
+                    } }) }) }));
         // 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.162",
+	"version": "1.0.163",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",