@agilant/toga-blox 1.0.163 → 1.0.164

package/dist/components/TableCell/TableCell.js

@@ -1,26 +1,29 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, 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 ml-1 underline", }) => {
     const [expanded, setExpanded] = useState(false);
-    // Determine if we need a toggle
+    /* ---------- compute toggle state ---------- */
     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);
-    // Only stop propagation / toggle when hasToggle is true
+    /* ---------- click only when toggling ---------- */
     const handleToggle = (e) => {
         e.stopPropagation();
-        setExpanded((prev) => !prev);
+        setExpanded((p) => !p);
     };
-    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 */
+    /* ---------- classes ---------- */
+    const baseTd = "relative overflow-hidden font-light text-sm text-left px-5";
+    const wrapper = "min-h-[40px] flex select-none" + (hasToggle ? " cursor-pointer" : "");
+    return (_jsx("td", { ...cell.getCellProps(), className: isLastCell ? "" : baseTd, children: _jsx("div", { ...(hasToggle ? { onClick: handleToggle } : {}), className: wrapper, children: hasToggle ? (!expanded ? (
+            /* collapsed: inline with ellipsis + hover‑only link */
+            _jsxs("div", { className: "flex items-center group", children: [_jsx("span", { children: truncated }), _jsx("span", { className: "inline group-hover:hidden", children: "\u2026" }), _jsx("span", { className: `hidden group-hover:inline ${linkText}`, children: "Show more" })] })) : (
+            /* expanded: vertical stack so "Show less" is below */
+            _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: fullText }), _jsx("span", { className: linkText, children: "Show less" })] }))) : (
+            /* no toggle → let row handle all clicks */
             cell.render("Cell")) }) }));
 };
 export default TableCell;

package/package.json

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