@agilant/toga-blox 1.0.217 → 1.0.219

package/dist/components/TableCell/TableCell.js

@@ -40,7 +40,9 @@ const TableCell = ({ cell, isLastCell, expanded, onToggle, maxCharacters = DEFAU
     }, [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 min-w-full", style: {
                     maxWidth: `${cellMaxWidthWhenExpanded}ch`,
-                }, children: [_jsx("span", { className: `text-left pr-5 ${cellTextClassNames}`, children: fullText }), _jsx("span", { children: expandedCellActionButton }), _jsx("span", { onClick: (e) => {
+                }, children: [_jsx("span", { className: `text-left pr-5 ${cellTextClassNames}`, children: fullText }), _jsx("span", { children: typeof expandedCellActionButton === "function"
+                            ? expandedCellActionButton(fullText)
+                            : expandedCellActionButton }), _jsx("span", { onClick: (e) => {
                             e.stopPropagation();
                             onToggle();
                         }, className: linkTextClassNames, children: "Show less" })] }))) : (cell.render("Cell")) }) }, cellKey));

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

@@ -37,5 +37,5 @@ export interface TableCellProps {
     linkTextClassNames?: string;
     cellTextClassNames: string;
     onCellOverflow?: (isOverflowing: boolean) => void;
-    expandedCellActionButton?: ReactNode;
+    expandedCellActionButton?: ReactNode | ((fullText: string) => ReactNode);
 }

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

@@ -4,35 +4,33 @@ import { DataWithUUID, ToggleProps } from "../TableCell";
 export interface TableRowProps<T extends DataWithUUID> extends HTMLAttributes<HTMLTableRowElement> {
     row: Row<T>;
     prepareRow: (row: Row<T>) => void;
-    rowUuid?: string;
     activeIndex?: number;
     activeRowColor?: string;
     rowHoverClasses?: string;
     hasInfiniteScroll: boolean;
+    rowUuid?: string;
+    cellTextClassNames?: string;
+    onRowClick: (index: number, rowUuid: string, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
     cellExpandable?: boolean;
     expandedCells: Record<string, boolean>;
     toggleCell: (key: string) => void;
     ToggleComponent?: React.ComponentType<ToggleProps>;
     hasDropDown?: boolean;
-    expandedRowUuid?: string | null;
-    onToggleRow?: (uuid: string) => void;
     onFetchRowData?: (uuid: string) => Promise<void> | void;
     loadingIndicator?: ReactNode;
     errorIndicator?: (error: Error) => ReactNode;
     expandedContent?: ReactNode;
     linkTextClassNames?: string;
     rowClassNames?: string;
-    cellTextClassNames?: string;
     maxCharacters: number;
+    expandedRowUuid?: string | null;
+    onToggleRow?: (uuid: string) => void;
     cellColor: string;
     cellMaxWidthWhenExpanded: number;
     additionalCellClassNames: string;
-    onRowClick: (index: number, rowUuid: string, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
+    toggleComponent?: React.ComponentType<ToggleProps>;
     onRowOverflow?: (rowUuid: string, hasOverflow: boolean) => void;
-    /**
-     * Element to render in each expanded cell and in the row-level dropdown
-     */
     expandedCellActionButton?: ReactNode;
 }
-declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, activeRowColor, rowHoverClasses, rowClassNames, hasInfiniteScroll, cellExpandable, rowUuid, onRowClick, expandedCells, toggleCell, ToggleComponent, hasDropDown, expandedRowUuid, onToggleRow, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, linkTextClassNames, rowClassNames: extraRowClasses, cellTextClassNames, maxCharacters, cellColor, cellMaxWidthWhenExpanded, additionalCellClassNames, onRowOverflow, expandedCellActionButton, }: 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, expandedCellActionButton, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TableRow;

package/dist/components/TableRow/TableRow.js

@@ -1,26 +1,26 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// src/components/TableRow/TableRow.tsx
 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, cellExpandable = false, rowUuid, onRowClick, expandedCells, toggleCell, ToggleComponent, hasDropDown = false, expandedRowUuid = null, onToggleRow, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, linkTextClassNames = "", rowClassNames: extraRowClasses = "", cellTextClassNames = "", maxCharacters = 30, cellColor = "bg-blue-50", cellMaxWidthWhenExpanded = 50, additionalCellClassNames = "", onRowOverflow = () => { }, expandedCellActionButton = (_jsx("span", { className: "text-blue-500", children: "Action button here" })), }) => {
-    // ensure we always have an actionable element even if null was passed
-    const actionButton = expandedCellActionButton ?? (_jsx("span", { className: "text-blue-500", children: "Action button here" }));
+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 = () => { }, expandedCellActionButton = (_jsx("span", { className: "text-blue-500", children: "Action button here" })), }) => {
     prepareRow(row);
-    const rowClasses = `border-b border-b-navy-200 ${rowHoverClasses} ` +
-        `${activeIndex === row.index ? ` activeRow ${activeRowColor}` : ""} ` +
-        extraRowClasses;
+    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);
+    /* determine if *this* row is open */
     const isExpanded = hasDropDown && rowUuid === expandedRowUuid;
     const handleRowClick = async (e) => {
         onRowClick(row.index, rowUuid ?? "", e);
         if (hasDropDown && rowUuid && onToggleRow) {
             onToggleRow(rowUuid);
             if (!isExpanded && onFetchRowData) {
-                setIsLoading(true);
-                setError(null);
                 try {
+                    setIsLoading(true);
+                    setError(null);
                     await onFetchRowData(rowUuid);
                 }
                 catch (err) {
@@ -37,16 +37,22 @@ const TableRow = ({ row, prepareRow, activeIndex, activeRowColor = "bg-pink-100"
         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
+    // _ignoredKey extracts the key prop and stores it, it will be discarded
+    // ...safeRowProps gathers remaining props except key into obj using '...'
     const { key: _ignoredKey, ...safeRowProps } = row.getRowProps
         ? row.getRowProps()
         : {};
-    return (_jsxs(Fragment, { children: [_jsx("tr", { "data-testid": "table-row", className: rowClasses, onClick: handleRowClick, ...safeRowProps, children: row.cells.map((cell, idx) => {
+    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, 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), expandedCellActionButton: actionButton }, 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 p-4 flex items-center justify-between", children: isLoading ? (loadingIndicator ?? (_jsx("span", { children: "Loading..." }))) : error ? (errorIndicator ? (errorIndicator(error)) : (_jsxs("span", { className: "text-red-700", children: ["Error: ", error.message] }))) : expandedContent ? (expandedContent) : (_jsxs(_Fragment, { children: [_jsxs("span", { children: ["drop down \u2013 ", rowUuid] }), expandedCellActionButton] })) }, "expanded-dropdown-content") }) })) }))] }));
+                    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), expandedCellActionButton: expandedCellActionButton }, 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

@@ -102,7 +102,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 (_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) {
+    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, { expandedCellActionButton: _jsx(_Fragment, { children: "test" }), 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);

package/package.json

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