@agilant/toga-blox 1.0.196 → 1.0.197

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

@@ -9,6 +9,8 @@ export interface TableCellProps<T extends DataWithUUID> {
     linkText?: string;
     cellExpandable?: boolean;
     maxCharacters?: number;
+    maxWidthWhenExpanded?: number;
+    cellColor: string;
 }
-declare const TableCell: <T extends DataWithUUID>({ cell, isLastCell, hasInfiniteScroll, expanded, onToggle, linkText, cellExpandable, maxCharacters, }: TableCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TableCell: <T extends DataWithUUID>({ cell, isLastCell, hasInfiniteScroll, expanded, onToggle, linkText, cellExpandable, maxCharacters, maxWidthWhenExpanded, cellColor, }: TableCellProps<T>) => 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";
 const MAX_CHARS = 30;
-const TableCell = ({ cell, isLastCell, hasInfiniteScroll, expanded, onToggle, linkText = "text-purple-500 ml-1 underline", cellExpandable = false, maxCharacters, }) => {
+const TableCell = ({ cell, isLastCell, hasInfiniteScroll, expanded, onToggle, linkText = "text-purple-500 ml-1 underline", cellExpandable = false, maxCharacters, maxWidthWhenExpanded = 50, cellColor = "bg-blue-50", }) => {
     /* decide if this cell even needs a toggle */
     const isString = typeof cell.value === "string";
     const fullText = isString ? cell.value : "";
@@ -18,7 +18,7 @@ const TableCell = ({ cell, isLastCell, hasInfiniteScroll, expanded, onToggle, li
         : 0;
     const stickyClass = isStickyColumn ? cell.column?.className || "" : "";
     const baseTd = "relative overflow-hidden font-light text-sm text-left px-5";
-    const wrapper = "min-h-[40px] flex select-none" + (hasToggle ? " cursor-pointer" : "");
+    const wrapper = `${cellColor} min-h-[40px] flex select-none${hasToggle ? " cursor-pointer" : ""}`;
     // FIX: extract key before spreading props into <td>
     const rawCellProps = cell.getCellProps({
         className: isLastCell ? "" : baseTd,
@@ -33,11 +33,13 @@ 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-center group", children: _jsxs("span", { children: [truncated, "\u2026", _jsx("span", { ...(hasToggle
+            _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", children: [_jsx("span", { children: fullText }), _jsx("span", { ...(hasToggle
+            _jsxs("div", { className: `flex flex-col `, style: {
+                    maxWidth: `${maxWidthWhenExpanded}ch`,
+                }, children: [_jsx("span", { children: fullText }), _jsx("span", { ...(hasToggle
                             ? { onClick: handleToggle }
                             : {}), className: linkText, children: "Show less" })] }))) : (
             /* no toggle required */

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

@@ -37,7 +37,7 @@ const Template = (args) => {
         getCellProps: () => ({}),
         column: {},
     };
-    return (_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { ...args, cell: fakeCell, expanded: expanded, onToggle: () => setExpanded((e) => !e) }) }) }) }));
+    return (_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { cellColor: "", ...args, cell: fakeCell, expanded: expanded, onToggle: () => setExpanded((e) => !e) }) }) }) }));
 };
 /* ---------- stories ---------- */
 export const Default = Template.bind({});

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

@@ -55,7 +55,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, { expanded: false, onToggle: function () {
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { cellColor: "", expanded: false, onToggle: function () {
                             throw new Error("Function not implemented.");
                         }, ...defaultProps }) }) }) }));
         const trimmedText = `${sampleData.address.substring(0, 30)}...`;
@@ -63,14 +63,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, { expanded: false, onToggle: function () {
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { 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, { expanded: false, onToggle: function () {
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { cellColor: "", expanded: false, onToggle: function () {
                             throw new Error("Function not implemented.");
                         }, ...props }) }) }) }));
         const cell = screen.getByRole("cell");
@@ -85,7 +85,7 @@ describe("TableCell Component", () => {
                 render: (type) => (type === "Cell" ? "42" : null),
             },
         };
-        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { expanded: false, onToggle: function () {
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { cellColor: "", expanded: false, onToggle: function () {
                             throw new Error("Function not implemented.");
                         }, ...numericValueProps }) }) }) }));
         expect(screen.getByText("42")).toBeInTheDocument();

package/dist/components/TableRow/TableRow.js

@@ -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 }, cellKey));
+                    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: "" }, 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/package.json

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