@agilant/toga-blox 1.0.39 → 1.0.41

package/dist/components/SortArrows/SortArrows.d.ts

@@ -1,5 +1,5 @@
 import { SortArrowsProps } from "./types";
-declare const SortArrows: <T extends object>({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon, }: SortArrowsProps<T> & {
+declare const SortArrows: <T extends object>({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon, directionContainerClassNames, }: SortArrowsProps<T> & {
     getFontAwesomeIconFn?: (iconName: string, iconStyle: string) => React.ReactElement | null;
 }) => JSX.Element | null;
 export default SortArrows;

package/dist/components/SortArrows/SortArrows.js

@@ -10,7 +10,7 @@ const SortArrows = ({ column, setSortColumn, slug, isNested, parentIndex, onSort
     numberClassNames: "absolute text-xs top-1.5 right-0 left-0",
     iconClassNames: "text-lg text-blue-400 relative hover:text-red-400",
     numberSize: "text-xl",
-}, }) => {
+}, directionContainerClassNames = "z-[9989] bg-white rounded flex flex-col border-1 absolute top-6 w-32", }) => {
     const containerRef = useRef(null);
     const { showArrowContainer, handleParentClick, handleResetSort, handleClick, isActive, activeDirection, sortOrderNumber, setShowArrowContainer, } = useSortArrowsViewModel({
         columnId: String(column.accessor),
@@ -26,7 +26,7 @@ const SortArrows = ({ column, setSortColumn, slug, isNested, parentIndex, onSort
         setShowArrowContainer(false);
         onRequestClose?.();
     };
-    return (_jsxs("div", { "data-testid": `sort-arrows-${slug}`, ref: containerRef, className: arrowContainerClassNames, onClick: handleParentClick, children: [isActive && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: `${counterIcon.iconClassNames} ${activeDirection === "desc" ? "rotate-180" : ""}`, children: _jsx("span", { className: `${counterIcon?.numberSize}`, children: getFontAwesomeIcon(counterIcon.icon, counterIcon.weight) }) }), _jsx("span", { className: `${counterIcon.numberClassNames} ${activeDirection === "desc" && " pb-0.5"}`, children: sortOrderNumber })] })), !isActive && (_jsxs(_Fragment, { children: [_jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "up", setColumn: () => { }, isActive: false }), _jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "down", setColumn: () => { }, isActive: false })] })), showArrowContainer && (_jsxs(motion.div, { className: `z-[9989] bg-white rounded flex flex-col border-1 absolute top-6 w-32 ${column.id === "col1" ? "left-[5px]" : ""}`, initial: "initial", animate: "animate", exit: "exit", children: [activeDirection !== "asc" && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: () => handleClick("up"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowUp", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Ascending" })] })), activeDirection !== "desc" && (_jsxs("div", { className: "flex p-1 hover:bg-blue-50 border-b-1", onClick: () => handleClick("down"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowDown", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Descending" })] })), isActive && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: handleResetSort, children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("rotateLeft", "solid") }), _jsx("span", { className: "flex-1 text-left pl-3", children: "Reset" })] }))] })), showArrowContainer &&
+    return (_jsxs("div", { "data-testid": `sort-arrows-${slug}`, ref: containerRef, className: arrowContainerClassNames, onClick: handleParentClick, children: [isActive && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: `${counterIcon.iconClassNames} ${activeDirection === "desc" ? "rotate-180" : ""}`, children: _jsx("span", { className: `${counterIcon?.numberSize}`, children: getFontAwesomeIcon(counterIcon.icon, counterIcon.weight) }) }), _jsx("span", { className: `${counterIcon.numberClassNames} ${activeDirection === "desc" && " pb-0.5"}`, children: sortOrderNumber })] })), !isActive && (_jsxs(_Fragment, { children: [_jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "up", setColumn: () => { }, isActive: false }), _jsx(SortArrowIcon, { slug: slug, parentIndex: parentIndex, columnName: String(column.render("Header")), direction: "down", setColumn: () => { }, isActive: false })] })), showArrowContainer && (_jsxs(motion.div, { className: `${directionContainerClassNames} ${column.id === "col1" ? "left-[5px]" : ""}`, initial: "initial", animate: "animate", exit: "exit", children: [activeDirection !== "asc" && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: () => handleClick("up"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowUp", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Ascending" })] })), activeDirection !== "desc" && (_jsxs("div", { className: "flex p-1 hover:bg-blue-50 border-b-1", onClick: () => handleClick("down"), children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("arrowDown", "regular") }), _jsx("span", { className: "flex-1 text-left pl-4", children: "Descending" })] })), isActive && (_jsxs("div", { className: "flex border-b-1 p-1 hover:bg-blue-50", onClick: handleResetSort, children: [_jsx("span", { className: "pl-1 text-primary", children: getFontAwesomeIcon("rotateLeft", "solid") }), _jsx("span", { className: "flex-1 text-left pl-3", children: "Reset" })] }))] })), showArrowContainer &&
                 renderPortalOverlay &&
                 renderPortalOverlay(handleClose)] }));
 };

package/dist/components/SortArrows/SortArrows.stories.js

@@ -36,6 +36,6 @@ export const WithOverlayAndIndexCount = {
                     numberClassNames: " absolute bottom-1.5 left-[10px] text-xs",
                     iconClassNames: "text-green-500 hover:text-red-400 text-2xl",
                     numberSize: "  text-red-500 top-0",
-                }, column: column, setSortColumn: setSortColumn, slug: "products", renderPortalOverlay: (onClose) => (_jsx("div", { className: "absolute top-0 left-0 w-[300px] h-[300px] bg-black bg-opacity-50 flex items-center justify-center", onClick: onClose })) }) }));
+                }, column: column, setSortColumn: setSortColumn, slug: "products", renderPortalOverlay: (onClose) => (_jsx("div", { className: "absolute top-0 left-0 w-[300px] h-[300px] bg-black bg-opacity-50 flex items-center justify-center", onClick: onClose })), directionContainerClassNames: "absolute top-6 w-32 bg-white rounded flex flex-col border-1 z-[9989]" }) }));
     },
 };

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

@@ -15,6 +15,7 @@ export interface SortArrowsProps<T extends object> {
         iconClassNames?: string;
         numberSize?: string;
     };
+    directionContainerClassNames?: string;
 }
 export interface CustomColumnInstance<T extends object> extends ColumnInstance<T> {
     accessor: string | number | symbol | ((row: T) => any);

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

@@ -1,15 +1,36 @@
+import React from "react";
+import { Row } from "react-table";
 import { DataWithUUID } from "../TableCell";
-import TableRowProps from ".";
-interface TableRowProps {
-    row: any;
-    prepareRow: (row: any) => void;
+/**
+ * The props for your reusable TableRow component.
+ *
+ * @template T - extends DataWithUUID
+ */
+export interface TableRowProps<T extends DataWithUUID> {
+    /** The row object from react-table */
+    row: Row<T>;
+    /** Function from react-table to prepare the row. */
+    prepareRow: (row: Row<T>) => void;
+    /** Optionally mark this row as active, comparing row.index to activeIndex. */
     activeIndex?: number;
+    /** Class to apply if the row is active. */
     activeRowColor?: string;
+    /** Globally enable/disable "trim" on cells. */
     globalTrimActive?: boolean;
+    /** A UUID for this row. */
     rowUuid?: string;
+    /** Column "inputs" or config array, if relevant to your TableCell. */
     columnInputs?: string[];
+    /** Classes for row hover styling. Defaults to "hover:bg-red-100 hover:cursor-pointer" */
     rowHoverClasses?: string;
-    onRowClick?: (index: number, rowUuid: string, event: React.MouseEvent) => void;
+    /**
+     * Called when the row is clicked.
+     *
+     * @param index - the row.index from react-table
+     * @param rowUuid - the row's UUID
+     * @param event - the click event on the <tr>
+     */
+    onRowClick?: (index: number, rowUuid: string, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
 }
-declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, columnInputs, activeRowColor, rowHoverClasses, onRowClick, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, columnInputs, activeRowColor, rowHoverClasses, onRowClick, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TableRow;

package/dist/components/TableRow/TableRow.js

@@ -9,9 +9,7 @@ const TableRow = ({ row, prepareRow, activeIndex, globalTrimActive, rowUuid, col
         rowClasses += ` activeRow ${activeRowColor}`;
     }
     return (_jsx("tr", { "data-testid": "table-row", className: `border-b border-b-navy-200 ${rowHoverClasses} ${rowClasses}`, ...(row.getRowProps ? row.getRowProps() : {}), onClick: (event) => {
-            if (onRowClick) {
-                onRowClick(row.index, rowUuid || "", event);
-            }
+            onRowClick?.(row.index, rowUuid || "", event);
         }, children: row.cells.map((cell, index) => {
             const isLastCell = index === row.cells.length - 1;
             const cellProps = cell.getCellProps();

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

@@ -4,16 +4,21 @@ import { render, screen, fireEvent } from "@testing-library/react";
 import TableRow from "./TableRow";
 describe("TableRow - Branch Coverage Tests", () => {
     const mockPrepareRow = vi.fn();
-    // Basic row object
     const baseMockRow = {
+        // REQUIRED BY Row<T>:
+        id: "mock-row-id",
         index: 0,
-        getRowProps: vi.fn(() => ({})),
+        original: { uuid: "mock-uuid" },
+        subRows: [],
         cells: [
             {
                 getCellProps: vi.fn(() => ({ key: "cell-0" })),
                 render: vi.fn(() => "Cell 0"),
             },
         ],
+        allCells: [],
+        values: {},
+        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 }) }) }));
@@ -27,18 +32,20 @@ describe("TableRow - Branch Coverage Tests", () => {
         const mockOnRowClick = vi.fn();
         render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow, onRowClick: mockOnRowClick, rowUuid: "some-uuid" }) }) }));
         fireEvent.click(screen.getByTestId("table-row"));
-        // Because rowUuid is defined, we expect 'some-uuid'
-        expect(mockOnRowClick).toHaveBeenCalledWith(baseMockRow.index, "some-uuid", expect.anything() // Synthetic event
+        expect(mockOnRowClick).toHaveBeenCalledWith(baseMockRow.index, // 0
+        "some-uuid", expect.anything() // Synthetic event
         );
     });
     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 }) }) }));
         fireEvent.click(screen.getByTestId("table-row"));
-        expect(mockOnRowClick).toHaveBeenCalledWith(baseMockRow.index, "", expect.anything());
+        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 }) }) }));
+        // onRowClick not provided; just ensure no crash
         fireEvent.click(screen.getByTestId("table-row"));
     });
 });

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

@@ -8,4 +8,5 @@ export interface TableRowProps<T extends object> {
     columnInputs?: string[];
     rowHoverClasses?: string;
     addRowToClickedRows?: (rowUuid: string) => void;
+    onRowClick?: (index: number, rowUuid: string, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.39",
+	"version": "1.0.41",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -40,7 +40,6 @@
 		"react-select": "^5.10.0",
 		"react-table": "^7.8.0",
 		"react-table-sticky": "^1.1.3",
-		"sass": "^1.83.4",
 		"storybook-addon-react-router-v6": "^2.0.15",
 		"tslib": "^2.3.0"
 	},
@@ -70,6 +69,7 @@
 		"postcss": "^8.4.32",
 		"react-hook-form": "^7.43.9",
 		"react-router-dom": "^6.16.0",
+		"sass": "^1.84.0",
 		"storybook": "^7.6.6",
 		"tailwindcss": "^3.4.0",
 		"typescript": "^5.7.3",