@agilant/toga-blox 1.0.206 → 1.0.208

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

@@ -1,3 +1,3 @@
 import { TableCellProps } from "./types";
-declare const TableCell: ({ cell, isLastCell, expanded, onToggle, maxCharacters, cellMaxWidthWhenExpanded, cellColor, additionalCellClassNames, toggleComponent: ToggleComponent, cellExpandable, linkTextClassNames, cellTextClassNames, onOverflow, cellKey, }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableCell: ({ cell, isLastCell, expanded, onToggle, maxCharacters, cellMaxWidthWhenExpanded, cellColor, additionalCellClassNames, toggleComponent: ToggleComponent, cellExpandable, linkTextClassNames, cellTextClassNames, onCellOverflow, }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
 export default TableCell;

package/dist/components/TableCell/TableCell.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/components/TableCell/TableCell.tsx
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 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.
@@ -8,7 +8,8 @@ const DefaultCollapsedToggle = ({ onToggle, truncated, className = "", linkTextC
         e.stopPropagation();
         onToggle();
     }, children: _jsxs("span", { children: [truncated, "\u2026", _jsx("span", { className: `hidden group-hover:inline text-purple-500 ml-1 underline ${linkTextClassNames}`, children: "Show more" })] }) }));
-const TableCell = ({ cell, isLastCell, 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", cellTextClassNames = "", onOverflow = () => { }, cellKey, }) => {
+const TableCell = ({ cell, isLastCell, 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", cellTextClassNames = "", onCellOverflow = () => { }, }) => {
+    const prev = useRef();
     // --- truncation logic ---
     const isString = typeof cell.value === "string";
     const fullText = isString ? cell.value : "";
@@ -30,10 +31,14 @@ const TableCell = ({ cell, isLastCell, expanded, onToggle, maxCharacters = DEFAU
             }
             : {},
     });
-    const { key: domKey, ...safeCellProps } = rawCellProps;
+    const { key: cellKey, ...safeCellProps } = rawCellProps;
+    console.warn(fullText.length, "LENGTH");
     useEffect(() => {
-        onOverflow(isLong);
-    }, [isLong, onOverflow]);
+        if (prev.current !== needsToggle) {
+            onCellOverflow(needsToggle);
+            prev.current = needsToggle;
+        }
+    }, [needsToggle, onCellOverflow]);
     return (_jsx("td", { ...safeCellProps, className: isStickyColumn ? undefined : isLastCell ? "" : baseTd, children: _jsx("div", { className: wrapper, style: { maxWidth: `${cellMaxWidthWhenExpanded}ch` }, children: needsToggle ? (!expanded ? (_jsx(ToggleComponent, { expanded: expanded, onToggle: onToggle, truncated: truncated, fullText: fullText, className: additionalCellClassNames, linkTextClassNames: linkTextClassNames })) : (_jsxs("div", { className: "flex flex-col", style: {
                     maxWidth: `${cellMaxWidthWhenExpanded}ch`,
                 }, children: [_jsx("span", { className: `text-left pr-5 ${cellTextClassNames}`, children: fullText }), _jsx("span", { onClick: (e) => {

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

@@ -35,6 +35,5 @@ export interface TableCellProps {
     /** classes for both “more” & “less” links */
     linkTextClassNames?: string;
     cellTextClassNames: string;
-    onOverflow?: (overflowing: boolean) => void;
-    cellKey: string;
+    onCellOverflow?: (isOverflowing: boolean) => void;
 }

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

@@ -29,7 +29,7 @@ export interface TableRowProps<T extends DataWithUUID> {
     cellMaxWidthWhenExpanded: number;
     additionalCellClassNames: string;
     toggleComponent?: React.ComponentType<ToggleProps>;
-    onCellOverflow?: (cellKey: string, isOverflowing: boolean) => void;
+    onRowOverflow?: (rowUuid: string, hasOverflow: boolean) => void;
 }
-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, cellTextClassNames, onCellOverflow, }: 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, cellTextClassNames, onRowOverflow, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TableRow;

package/dist/components/TableRow/TableRow.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/components/TableRow/TableRow.tsx
-import { Fragment, useState } from "react";
+import { Fragment, useState, useCallback } 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, expandedRowUuid = null, cellExpandable = false, onToggleRow, maxCharacters = 30, cellColor = "bg-blue-50", cellMaxWidthWhenExpanded = 50, additionalCellClassNames = "", toggleComponent = undefined, linkTextClassNames = "", cellTextClassNames = "", onCellOverflow, }) => {
+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 = "", cellTextClassNames = "", onRowOverflow = () => { }, }) => {
     prepareRow(row);
     const rowClasses = `border-primary${activeIndex === row.index ? ` activeRow ${activeRowColor}` : ""}`;
+    const [overflowMap, setOverflowMap] = useState({});
     /* keep fetch/loading local */
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
@@ -31,6 +32,15 @@ const TableRow = ({ row, prepareRow, activeIndex, activeRowColor = "bg-pink-100"
             }
         }
     };
+    const handleOverflow = useCallback((cellKey, isOverflowing) => {
+        setOverflowMap((m) => {
+            const next = { ...m, [cellKey]: isOverflowing };
+            const anyOverflow = Object.values(next).some(Boolean);
+            // notify parent of overall row overflow
+            onRowOverflow?.(rowUuid, anyOverflow);
+            return next;
+        });
+    }, [onRowOverflow, rowUuid]);
     // Fix: Key is discarded from the spread obj, react still gets key just not from spread i.e. key={rowUuid}
     // Pull props ahead of time and separate out 'key'
     // If row.getRowProps exists, call function, else use empty
@@ -41,10 +51,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}`;
-                    const handleOverflow = (isOverflowing) => {
-                        onCellOverflow?.(cellKey, isOverflowing);
-                    };
-                    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, cellTextClassNames: cellTextClassNames, onOverflow: handleOverflow, cellKey: cellKey }, 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, cellTextClassNames: cellTextClassNames, onCellOverflow: (isOverflowing) => handleOverflow(cellKey, isOverflowing) }, 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

@@ -11,7 +11,7 @@ const sampleData = {
     uuid: "12345",
     name: "John Doe",
     age: 30,
-    address: "123 Main St, Springfield, IL 62701, USA – apartment 4B",
+    address: "123 Main St, Springfield, IL 62701, USA – apartment 4B 123 Main St, Springfield, IL 62701, USA – apartment 4B 123 Main St, Springfield, IL 62701, USA – apartment 4B 123 Main St, Springfield, IL 62701, USA – apartment 4B",
     email: "john.doe@example.com",
     phone: "+1 555-123-4567",
     status: "Active",
@@ -97,13 +97,17 @@ export default meta;
 const Template = (args) => {
     // ── cell-level state (unchanged) ──
     const [expandedCells, setExpandedCells] = React.useState({});
+    const [rowHasOverflow, setRowHasOverflow] = React.useState(false);
     const toggleCell = React.useCallback((key) => setExpandedCells((s) => ({ ...s, [key]: !s[key] })), []);
     // ── **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, { 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 }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { marginBottom: 12 }, children: ["\uD83D\uDEA8 Row overflow?", " ", _jsx("strong", { children: rowHasOverflow ? "YES" : "no" })] }), _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, onRowOverflow: (_uuid, anyOverflow) => {
+                            console.log("onRowOverflow:", anyOverflow);
+                            setRowHasOverflow(anyOverflow);
+                        } }) }) })] }));
 };
 /* ------------------------------------------------------------------ */
 /*                               STORIES                              */
@@ -117,6 +121,7 @@ Default.args = {
     globalTrimActive: false,
     hasDropDown: false,
     rowUuid: sampleData.uuid,
+    cellExpandable: true,
 };
 export const ExpandableRow = Template.bind({});
 ExpandableRow.args = {
@@ -129,7 +134,7 @@ 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, 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: "" })] }) }));
+    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: "", cellExpandable: true }), _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: "" })] }) }));
 };
 export const WithCustomToggle = Template.bind({});
 WithCustomToggle.args = {

package/package.json

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