@agilant/toga-blox 1.0.167 → 1.0.170

package/dist/api/apiFunctions.d.ts

@@ -0,0 +1,5 @@
+import { Options } from "../utils/queryHelpers";
+export declare const apiGet: <TData = unknown>(route: string, options?: Options, params?: Record<string, any>) => Promise<TData>;
+export declare const apiPost: <TData = unknown>(route: string, data: Record<string, any>, options?: Options, params?: Record<string, any>) => Promise<TData>;
+export declare const apiPut: <TData = unknown>(route: string, data?: Record<string, any>, options?: Options, params?: Record<string, any>) => Promise<TData>;
+export declare const apiDelete: <TData = unknown>(route: string, data?: Record<string, any>, options?: Options, params?: Record<string, any>) => Promise<TData>;

package/dist/api/apiFunctions.js

@@ -0,0 +1,46 @@
+// src/api/apiFunctions.ts
+import { assembleOptions } from "../utils/queryHelpers";
+import axiosInstance from "./axiosInstance";
+export const apiGet = async (route, options = {}, params = {}) => {
+    let url = route;
+    const optionsString = assembleOptions(options);
+    if (optionsString) {
+        url += route.includes("?") ? "&" : "?";
+        url += optionsString;
+    }
+    const response = await axiosInstance.get(url, { params });
+    return response.data;
+};
+export const apiPost = async (route, data, options = {}, params = {}) => {
+    let url = route;
+    const optionsString = assembleOptions(options);
+    if (optionsString) {
+        url += route.includes("?") ? "&" : "?";
+        url += optionsString;
+    }
+    const response = await axiosInstance.post(url, data, { params });
+    return response.data;
+};
+export const apiPut = async (route, data = {}, options = {}, params = {}) => {
+    let url = route;
+    const optionsString = assembleOptions(options);
+    if (optionsString) {
+        url += route.includes("?") ? "&" : "?";
+        url += optionsString;
+    }
+    const response = await axiosInstance.put(url, data, { params });
+    return response.data;
+};
+export const apiDelete = async (route, data = {}, options = {}, params = {}) => {
+    let url = route;
+    const optionsString = assembleOptions(options);
+    if (optionsString) {
+        url += route.includes("?") ? "&" : "?";
+        url += optionsString;
+    }
+    const response = await axiosInstance.delete(url, {
+        data,
+        params,
+    });
+    return response.data;
+};

package/dist/api/axiosInstance.d.ts

@@ -0,0 +1,3 @@
+export declare const UserLoginRequiredEvent: Event;
+declare const axiosInstance: import("axios").AxiosInstance;
+export default axiosInstance;

package/dist/api/axiosInstance.js

@@ -0,0 +1,139 @@
+import axios from "axios";
+import * as Sentry from "@sentry/react";
+// Event to indicate when user login is required
+export const UserLoginRequiredEvent = new Event("UserLoginRequired");
+// Assemble the base URL based on environment variables
+const fullHostName = window.location.hostname.toUpperCase();
+const hostName = fullHostName.split(".");
+const host = "VITE_API_" + hostName[0];
+const baseURL = import.meta.env[host] || import.meta.env.VITE_API;
+// Initialize axios instance with base configurations
+const axiosInstance = axios.create({
+    baseURL,
+    headers: {
+        "Content-Type": "application/json",
+    },
+    timeout: 10000, // Optional: Set a timeout for requests
+});
+// Function to fetch a public access token for unauthenticated requests
+const fetchPublicToken = async () => {
+    try {
+        const response = await axios.post(`${baseURL}/auth/public`, null, {
+            headers: { "Content-Type": "application/json" },
+        });
+        localStorage.setItem("accessToken", response.data.data.tokens.access);
+        localStorage.setItem("refreshToken", response.data.data.tokens.refresh);
+        return response.data.data.tokens.access;
+    }
+    catch (error) {
+        console.error("Failed to fetch public token:", error);
+        Sentry.captureMessage("Failed to fetch public token Error", {
+            level: "error",
+            tags: {
+                errorType: "API",
+                authentication: "failed",
+            },
+            extra: {
+                message: "Failed to fetch public token",
+                details: error instanceof Error ? error.message : error,
+            },
+        });
+    }
+    return null;
+};
+// Function to refresh the access token using the refresh token
+const refreshAccessToken = async () => {
+    const refreshToken = localStorage.getItem("refreshToken");
+    if (refreshToken) {
+        try {
+            const response = await axios.post(`${baseURL}/auth/refresh`, null, {
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${refreshToken}`,
+                },
+            });
+            if (response.data?.data?.tokens?.access) {
+                localStorage.setItem("accessToken", response.data.data.tokens.access);
+                return response.data.data.tokens.access;
+            }
+        }
+        catch (error) {
+            console.error("Failed to refresh token:", error);
+            Sentry.captureMessage("Failed to fetch refresh token Error", {
+                level: "error",
+                tags: {
+                    errorType: "API",
+                    authentication: "failed",
+                },
+                extra: {
+                    message: "Failed to fetch refresh token",
+                    details: error instanceof Error ? error.message : error,
+                },
+            });
+        }
+    }
+    return null;
+};
+// Request interceptor to add Authorization header
+axiosInstance.interceptors.request.use(async (config) => {
+    let token;
+    const userString = localStorage.getItem("user");
+    if (userString) {
+        // If 'user' exists in localStorage, use the 'accessToken'
+        token = localStorage.getItem("accessToken");
+    }
+    else {
+        // If no 'user' exists, fetch the public token
+        token = await fetchPublicToken();
+    }
+    if (token) {
+        config.headers["Authorization"] = `Bearer ${token}`;
+    }
+    return config;
+}, (error) => {
+    Sentry.captureMessage("Axios Instance request error", {
+        level: "error",
+        tags: {
+            errorType: "API",
+            authentication: "failed",
+        },
+        extra: {
+            message: "Axios Instance request error",
+            details: error instanceof Error ? error.message : error,
+        },
+    });
+    return Promise.reject(error);
+});
+// Response interceptor to handle 401 errors
+axiosInstance.interceptors.response.use((response) => response, async (error) => {
+    const originalRequest = error.config;
+    // Handle 401 Unauthorized errors
+    if (error.response?.status === 401 && !originalRequest._retry) {
+        originalRequest._retry = true;
+        // Attempt to refresh the access token
+        const newToken = await refreshAccessToken();
+        if (newToken) {
+            // Set the new token in the headers and retry the request
+            originalRequest.headers["Authorization"] = `Bearer ${newToken}`;
+            return axiosInstance(originalRequest);
+        }
+        else {
+            // If refresh fails, trigger login required event
+            window.dispatchEvent(UserLoginRequiredEvent);
+        }
+    }
+    Sentry.captureMessage("Axios Instance response error", {
+        level: "error",
+        tags: {
+            errorType: "API",
+            authentication: "failed",
+        },
+        extra: {
+            message: "Axios Instance response error",
+            status: error.response?.status,
+            details: error instanceof Error ? error.message : error,
+        },
+    });
+    return Promise.reject(error);
+});
+export default axiosInstance;

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

@@ -1,3 +1,12 @@
-import { DataWithUUID, TableCellProps } from "./types";
-declare const TableCell: <T extends DataWithUUID>({ cell, isLastCell, hasInfiniteScroll, linkText, }: TableCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+import { DataWithUUID } from "./types";
+export interface TableCellProps<T extends DataWithUUID> {
+    cell: any;
+    isLastCell: boolean;
+    hasInfiniteScroll: boolean;
+    rowUuid?: string;
+    expanded: boolean;
+    onToggle: () => void;
+    linkText?: string;
+}
+declare const TableCell: <T extends DataWithUUID>({ cell, isLastCell, hasInfiniteScroll, expanded, onToggle, linkText, }: TableCellProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TableCell;

package/dist/components/TableCell/TableCell.js

@@ -1,29 +1,25 @@
 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);
-    /* ---------- compute toggle state ---------- */
+const TableCell = ({ cell, isLastCell, hasInfiniteScroll, expanded, onToggle, linkText = "text-purple-500 ml-1 underline", }) => {
+    /* decide if this cell even needs a toggle */
     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);
-    /* ---------- click only when toggling ---------- */
+    /* stop row click when toggling */
     const handleToggle = (e) => {
-        e.stopPropagation();
-        setExpanded((p) => !p);
+        e.stopPropagation(); // ← prevents bubbling to the <tr>
+        onToggle();
     };
-    /* ---------- 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: [_jsxs("span", { children: [truncated, "\u2026", _jsx("span", { className: `hidden group-hover:inline ${linkText}`, children: "Show more" })] }), _jsx("span", { className: "inline group-hover:hidden" })] })) : (
-            /* expanded: vertical stack so "Show less" is below */
+            /* collapsed view */
+            _jsx("div", { className: "flex items-center group", children: _jsxs("span", { children: [truncated, "\u2026", _jsx("span", { className: `hidden group-hover:inline ${linkText}`, children: "Show more" })] }) })) : (
+            /* expanded view */
             _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 */
+            /* no toggle required */
             cell.render("Cell")) }) }));
 };
 export default TableCell;

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

@@ -10,7 +10,7 @@ const sampleData = {
 export default {
     title: "Table/TableCell",
     component: TableCell,
-    tags: ["autodocs"], // 👈 enables automatic Docs tab
+    tags: ["autodocs"],
     argTypes: {
         hasInfiniteScroll: {
             control: "boolean",
@@ -35,7 +35,9 @@ export default {
     },
 };
 /* ---------- template ---------- */
-const Template = (args) => (_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { ...args }) }) }) }));
+const Template = (args) => (_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { expanded: false, onToggle: function () {
+                    throw new Error("Function not implemented.");
+                }, ...args }) }) }) }));
 /* ---------- stories ---------- */
 export const Default = Template.bind({});
 Default.args = {

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

@@ -55,18 +55,24 @@ 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, { ...defaultProps }) }) }) }));
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { expanded: false, onToggle: function () {
+                            throw new Error("Function not implemented.");
+                        }, ...defaultProps }) }) }) }));
         const trimmedText = `${sampleData.address.substring(0, 30)}...`;
         expect(screen.getByText(trimmedText)).toBeInTheDocument();
     });
     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, { ...props }) }) }) }));
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { 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, { ...props }) }) }) }));
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { expanded: false, onToggle: function () {
+                            throw new Error("Function not implemented.");
+                        }, ...props }) }) }) }));
         const cell = screen.getByRole("cell");
         expect(cell).not.toHaveClass("relative overflow-hidden font-light text-sm text-left z-0 px-5");
     });
@@ -79,7 +85,9 @@ describe("TableCell Component", () => {
                 render: (type) => (type === "Cell" ? "42" : null),
             },
         };
-        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { ...numericValueProps }) }) }) }));
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx("tr", { children: _jsx(TableCell, { expanded: false, onToggle: function () {
+                            throw new Error("Function not implemented.");
+                        }, ...numericValueProps }) }) }) }));
         expect(screen.getByText("42")).toBeInTheDocument();
     });
 });

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

@@ -7,11 +7,11 @@ export interface TableRowProps<T extends DataWithUUID> {
     activeIndex?: number;
     activeRowColor?: string;
     rowHoverClasses?: string;
-    globalTrimActive?: boolean;
     hasInfiniteScroll: boolean;
     rowUuid?: string;
-    columnInputs?: string[];
     onRowClick: (index: number, rowUuid: string, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>) => void;
+    expandedCells: Record<string, boolean>;
+    toggleCell: (key: string) => void;
     hasDropDown?: boolean;
     onFetchRowData?: (uuid: string) => Promise<void> | void;
     loadingIndicator?: ReactNode;
@@ -19,5 +19,5 @@ export interface TableRowProps<T extends DataWithUUID> {
     expandedContent?: ReactNode;
     linkText?: string;
 }
-declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, activeRowColor, rowHoverClasses, globalTrimActive, hasInfiniteScroll, rowUuid, columnInputs, onRowClick, hasDropDown, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, linkText, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TableRow: <T extends DataWithUUID>({ row, prepareRow, activeIndex, activeRowColor, rowHoverClasses, hasInfiniteScroll, rowUuid, onRowClick, expandedCells, toggleCell, hasDropDown, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, linkText, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default TableRow;

package/dist/components/TableRow/TableRow.js

@@ -7,29 +7,24 @@ import TableCell from "../TableCell";
 /*                               COMPONENT                            */
 /* ------------------------------------------------------------------ */
 const TableRow = ({ 
-/* react‑table */
+/* react-table */
 row, prepareRow, 
 /* visual */
 activeIndex, activeRowColor = "bg-pink-100", rowHoverClasses = "hover:bg-navy-100 hover:cursor-pointer", 
-/* cell props */
-globalTrimActive = false, hasInfiniteScroll, 
-/* meta */
-rowUuid, columnInputs, 
-/* click handler */
-onRowClick, 
+/* behaviour / meta */
+hasInfiniteScroll, rowUuid, onRowClick, 
+/* expansion store */
+expandedCells, toggleCell, 
 /* dropdown */
 hasDropDown = false, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, linkText = "text-blue-500", }) => {
-    /* prepare react-table row */
-    prepareRow(row);
-    const isActive = activeIndex === row.index;
-    let rowClasses = "border-primary";
-    if (isActive)
-        rowClasses += ` activeRow ${activeRowColor}`;
+    prepareRow(row); // react-table must be prepared before render
+    /* mark active row */
+    const rowClasses = `border-primary${activeIndex === row.index ? ` activeRow ${activeRowColor}` : ""}`;
     /* local dropdown state */
     const [isExpanded, setIsExpanded] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
-    /* row‑click: call your passed‑in handler, then dropdown logic */
+    /* handle row click + dropdown logic */
     const handleRowClick = async (e) => {
         onRowClick(row.index, rowUuid ?? "", e);
         if (hasDropDown) {
@@ -52,8 +47,8 @@ hasDropDown = false, onFetchRowData, loadingIndicator, errorIndicator, expandedC
     };
     return (_jsxs(Fragment, { children: [_jsx("tr", { "data-testid": "table-row", className: `border-b border-b-navy-200 ${rowHoverClasses} ${rowClasses}`, ...(row.getRowProps ? row.getRowProps() : {}), onClick: handleRowClick, children: row.cells.map((cell, idx) => {
                     const isLastCell = idx === row.cells.length - 1;
-                    const cellProps = cell.getCellProps();
-                    return (_jsx(Fragment, { children: _jsx(TableCell, { cell: cell, isLastCell: isLastCell, globalTrimActive: globalTrimActive, columnInputs: columnInputs, rowUuid: rowUuid, hasInfiniteScroll: hasInfiniteScroll, linkText: linkText }) }, cellProps.key));
+                    const cellKey = `${rowUuid ?? "no-uuid"}-${cell.column.id}`;
+                    return (_jsx(TableCell, { cell: cell, isLastCell: isLastCell, hasInfiniteScroll: hasInfiniteScroll, rowUuid: rowUuid, expanded: expandedCells[cellKey] ?? false, onToggle: () => toggleCell(cellKey), linkText: linkText }, 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

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// stories/TableRow.stories.tsx
+import React from "react";
 import TableRow from "./TableRow";
 const sampleData = {
     uuid: "12345",
     name: "John Doe",
     age: 30,
-    address: "123 Main St, Springfield, IL 62701, United States of America – apartment 4B",
+    address: "123 Main St, Springfield, IL 62701, USA – apartment 4B",
     email: "john.doe@example.com",
-    phone: "+1 555‑123‑4567",
+    phone: "+1 555-123-4567",
     status: "Active",
     expandedContent: (_jsx("div", { className: "size-96 bg-blue-300 flex items-center justify-center", children: "Custom element passed in \u2013 12345" })),
 };
@@ -14,41 +16,44 @@ const sampleData2 = {
     uuid: "67890",
     name: "Jane Smith",
     age: 25,
-    address: "456 Another St, Springfield, IL 62702, United States of America",
+    address: "456 Another St, Springfield, IL 62702, USA",
     email: "jane.smith@example.com",
-    phone: "+1 555‑987‑6543",
+    phone: "+1 555-987-6543",
     status: "Inactive",
 };
-/* ------------------------------------------------------------------ */
-/*                       MOCK REACT‑TABLE CELLS                       */
-/* ------------------------------------------------------------------ */
 const makeCells = (d) => [
     {
+        column: { id: "name" },
         value: d.name,
         render: (t) => (t === "Cell" ? d.name : null),
         getCellProps: () => ({}),
     },
     {
+        column: { id: "age" },
         value: d.age,
         render: (t) => (t === "Cell" ? d.age.toString() : null),
         getCellProps: () => ({}),
     },
     {
+        column: { id: "address" },
         value: d.address,
         render: (t) => (t === "Cell" ? d.address : null),
         getCellProps: () => ({}),
     },
     {
+        column: { id: "email" },
         value: d.email,
         render: (t) => (t === "Cell" ? d.email : null),
         getCellProps: () => ({}),
     },
     {
+        column: { id: "phone" },
         value: d.phone,
         render: (t) => (t === "Cell" ? d.phone : null),
         getCellProps: () => ({}),
     },
     {
+        column: { id: "status" },
         value: d.status,
         render: (t) => t === "Cell" ? (_jsx("span", { className: d.status === "Active"
                 ? "text-green-500"
@@ -70,7 +75,7 @@ const makeMockRow = (d, idx, cells) => ({
 });
 const mockRow = makeMockRow(sampleData, 0, cellsForRow1);
 const mockRow2 = makeMockRow(sampleData2, 1, cellsForRow2);
-const prepareRow = () => { }; // no‑op for Storybook
+const prepareRow = () => { }; // no-op for Storybook
 /* ------------------------------------------------------------------ */
 /*                        STORYBOOK CONFIG                            */
 /* ------------------------------------------------------------------ */
@@ -78,28 +83,19 @@ const meta = {
     title: "Table/TableRow",
     component: TableRow,
     tags: ["autodocs"],
-    decorators: [
-        (Story) => (_jsx("div", { onClickCapture: (e) => {
-                const t = e.target.innerText;
-                if (t === "Show more" || t === "Show less") {
-                    alert("from cell");
-                }
-            }, children: _jsx(Story, {}) })),
-    ],
-    argTypes: {
-        hasInfiniteScroll: { control: "boolean" },
-        hasDropDown: { control: "boolean" },
-        onRowClick: { action: "row clicked" },
-    },
-    parameters: {
-        layout: "centered",
-    },
+    parameters: { layout: "centered" },
 };
 export default meta;
 /* ------------------------------------------------------------------ */
 /*                              TEMPLATE                              */
 /* ------------------------------------------------------------------ */
-const Template = (args) => (_jsx("table", { className: "min-w-[700px]", children: _jsx("tbody", { children: _jsx(TableRow, { ...args, hasInfiniteScroll: args.hasInfiniteScroll ?? true, onRowClick: args.onRowClick ?? (() => alert("from row")) }) }) }));
+const Template = (args) => {
+    const [expandedCells, setExpandedCells] = React.useState({});
+    const toggleCell = React.useCallback((key) => setExpandedCells((s) => ({ ...s, [key]: !s[key] })), []);
+    return (_jsx("table", { className: "min-w-[700px]", children: _jsx("tbody", { children: _jsx(TableRow, { 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")) }) }) }));
+};
 /* ------------------------------------------------------------------ */
 /*                               STORIES                              */
 /* ------------------------------------------------------------------ */
@@ -107,12 +103,11 @@ export const Default = Template.bind({});
 Default.args = {
     row: mockRow,
     prepareRow,
-    hasInfiniteScroll: true, // ✅ required
-    onRowClick: () => alert("from row"), // ✅ required
-    globalTrimActive: false, // optional
-    hasDropDown: false, // optional
-    rowUuid: sampleData.uuid, // optional
-    // (you can omit activeIndex, columnInputs, rowHoverClasses—they’re optional)
+    hasInfiniteScroll: true,
+    onRowClick: () => alert("from row"),
+    globalTrimActive: false,
+    hasDropDown: false,
+    rowUuid: sampleData.uuid,
 };
 export const ExpandableRow = Template.bind({});
 ExpandableRow.args = {
@@ -120,4 +115,8 @@ ExpandableRow.args = {
     hasDropDown: true,
     expandedContent: sampleData.expandedContent,
 };
-export const MultipleRows = () => (_jsx("table", { className: "min-w-[700px]", children: _jsxs("tbody", { children: [_jsx(TableRow, { row: mockRow, prepareRow: prepareRow, hasInfiniteScroll: true, onRowClick: () => alert("from row"), globalTrimActive: false, hasDropDown: true, rowUuid: sampleData.uuid, expandedContent: sampleData.expandedContent }), _jsx(TableRow, { row: mockRow2, prepareRow: prepareRow, hasInfiniteScroll: true, onRowClick: () => alert("from row"), globalTrimActive: false, hasDropDown: false, rowUuid: sampleData2.uuid })] }) }));
+export const MultipleRows = () => {
+    const [expandedCells, setExpandedCells] = React.useState({});
+    const toggleCell = React.useCallback((key) => setExpandedCells((s) => ({ ...s, [key]: !s[key] })), []);
+    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 }), _jsx(TableRow, { row: mockRow2, prepareRow: prepareRow, hasInfiniteScroll: true, onRowClick: () => alert("from row"), hasDropDown: false, rowUuid: "2", expandedCells: expandedCells, toggleCell: toggleCell })] }) }));
+};

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

@@ -23,18 +23,24 @@ describe("TableRow - Branch Coverage Tests", () => {
     it("covers isActive = true (row is active)", () => {
         render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: { ...baseMockRow, index: 5 }, prepareRow: mockPrepareRow, activeIndex: 5, hasInfiniteScroll: false, onRowClick: function (index, rowUuid, event) {
                         throw new Error("Function not implemented.");
+                    }, expandedCells: undefined, toggleCell: function (key) {
+                        throw new Error("Function not implemented.");
                     } }) }) }));
         expect(screen.getByTestId("table-row")).toHaveClass("activeRow");
     });
     it("covers isActive = false (row is NOT active)", () => {
         render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: { ...baseMockRow, index: 2 }, prepareRow: mockPrepareRow, activeIndex: 5, hasInfiniteScroll: false, onRowClick: function (index, rowUuid, event) {
                         throw new Error("Function not implemented.");
+                    }, expandedCells: undefined, toggleCell: function (key) {
+                        throw new Error("Function not implemented.");
                     } }) }) }));
         expect(screen.getByTestId("table-row")).not.toHaveClass("activeRow");
     });
     it("covers onRowClick = defined + rowUuid = provided", () => {
         const mockOnRowClick = vi.fn();
-        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow, onRowClick: mockOnRowClick, rowUuid: "some-uuid", hasInfiniteScroll: false }) }) }));
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow, onRowClick: mockOnRowClick, rowUuid: "some-uuid", hasInfiniteScroll: false, expandedCells: undefined, toggleCell: function (key) {
+                        throw new Error("Function not implemented.");
+                    } }) }) }));
         fireEvent.click(screen.getByTestId("table-row"));
         expect(mockOnRowClick).toHaveBeenCalledWith(baseMockRow.index, // 0
         "some-uuid", expect.anything() // Synthetic event
@@ -42,7 +48,9 @@ describe("TableRow - Branch Coverage Tests", () => {
     });
     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, hasInfiniteScroll: false }) }) }));
+        render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow, onRowClick: mockOnRowClick, hasInfiniteScroll: false, expandedCells: undefined, toggleCell: function (key) {
+                        throw new Error("Function not implemented.");
+                    } }) }) }));
         fireEvent.click(screen.getByTestId("table-row"));
         expect(mockOnRowClick).toHaveBeenCalledWith(baseMockRow.index, // 0
         "", expect.anything());
@@ -50,6 +58,8 @@ describe("TableRow - Branch Coverage Tests", () => {
     it("covers onRowClick = NOT defined", () => {
         render(_jsx("table", { children: _jsx("tbody", { children: _jsx(TableRow, { row: baseMockRow, prepareRow: mockPrepareRow, hasInfiniteScroll: false, onRowClick: function (index, rowUuid, event) {
                         throw new Error("Function not implemented.");
+                    }, expandedCells: undefined, toggleCell: function (key) {
+                        throw new Error("Function not implemented.");
                     } }) }) }));
         // onRowClick not provided; just ensure no crash
         fireEvent.click(screen.getByTestId("table-row"));

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useTableInfiniteScroll } from "./useTableInfiniteScroll";
 export type { useTableInfiniteScrollOptions } from "./useTableInfiniteScroll";
+export { useApiQuery } from "./useApiQuery";

package/dist/hooks/index.js

@@ -1 +1,2 @@
 export { useTableInfiniteScroll } from "./useTableInfiniteScroll";
+export { useApiQuery } from "./useApiQuery";

package/dist/hooks/useApiMutation.d.ts

@@ -0,0 +1,2 @@
+import { UseMutationOptions, UseMutationResult } from "@tanstack/react-query";
+export declare const useApiMutation: <TData = unknown, TError = unknown, TVariables extends Record<string, any> = {}, TContext = unknown>(method: "POST" | "PUT" | "DELETE", route: string, options?: Record<string, any>, mutationOptions?: Omit<UseMutationOptions<TData, TError, TVariables, TContext>, "mutationFn">) => UseMutationResult<TData, TError, TVariables, TContext>;

package/dist/hooks/useApiMutation.js

@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient, } from "@tanstack/react-query";
+import { apiDelete, apiPost, apiPut } from "../api/apiFunctions";
+export const useApiMutation = (method, route, options = {}, mutationOptions) => {
+    const queryClient = useQueryClient();
+    const mutationFn = (payload) => {
+        switch (method) {
+            case "POST":
+                return apiPost(route, payload, options);
+            case "PUT":
+                return apiPut(route, payload, options);
+            case "DELETE":
+                return apiDelete(route, payload, options);
+            default:
+                throw new Error(`Unsupported method: ${method}`);
+        }
+    };
+    return useMutation({
+        mutationFn,
+        onSuccess: () => {
+            // Invalidate all queries (or scope it to specific keys)
+            queryClient.invalidateQueries();
+        },
+        ...mutationOptions,
+    });
+};

package/dist/hooks/useApiQuery.d.ts

@@ -0,0 +1,2 @@
+import { UseQueryOptions, QueryKey } from "@tanstack/react-query";
+export declare const useApiQuery: <TQueryFnData = unknown, TError = unknown, TData = TQueryFnData, TQueryKey extends QueryKey = readonly unknown[]>(key: TQueryKey, route: string, options?: {}, payload?: {}, queryOptions?: Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryKey" | "queryFn">) => import("@tanstack/react-query").UseQueryResult<TData, TError>;

package/dist/hooks/useApiQuery.js

@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiGet } from "../api/apiFunctions";
+export const useApiQuery = (key, route, options = {}, payload = {}, queryOptions) => {
+    return useQuery({
+        queryKey: key,
+        queryFn: () => apiGet(route, options, payload),
+        ...queryOptions,
+    });
+};

package/dist/utils/queryHelpers.d.ts

@@ -0,0 +1,67 @@
+export interface Options {
+    fields?: any;
+    where?: any;
+    join?: any;
+    ojoin?: any;
+    sort?: any;
+    [key: string]: any;
+}
+export interface OptionsType {
+    transactionId?: string;
+    fields?: (string | Field | {
+        location: string[];
+        shipToAddress: string[];
+    })[];
+    sort?: any;
+    slug?: string;
+    id?: string;
+    join?: Array<{
+        [key: string]: {
+            [key: string]: string;
+        };
+    }>;
+    where?: {
+        [key: string]: any;
+        and?: any[];
+        or?: any[];
+    };
+    recordsPerPage?: number;
+    page?: number;
+}
+export interface ExtendedOptionsType extends Omit<OptionsType, "fields"> {
+    depth?: number;
+    fields?: (string | Field | {
+        location: string[];
+        shipToAddress: string[];
+    })[];
+    where?: any;
+    join?: any;
+    ojoin?: any;
+    sort?: any;
+    recordsPerPage?: number;
+    page?: number;
+}
+export interface Field {
+    [key: string]: string | string[] | Field;
+}
+export interface ExtendedOptionsType extends Omit<OptionsType, "fields"> {
+    depth?: number;
+    fields?: (string | Field | {
+        location: string[];
+        shipToAddress: string[];
+    })[];
+    where?: any;
+    join?: any;
+    ojoin?: any;
+    sort?: any;
+    recordsPerPage?: number;
+    page?: number;
+    [key: string]: any;
+}
+export declare function assembleOptions(options: Options): string;
+export declare function assembleOptionsFields(fields: any, prefix?: string): string[];
+export declare function assembleOptionsWhere(input: Record<string, any>): string;
+export declare function assembleOptionsJoin(input: Record<string, any>): string;
+export declare function assembleOptionsSort(input: any): string;
+export declare function urlEncode(input: string, encodeSpecialChars?: boolean): string;
+export declare function toCamelCase(slug: string): string;

package/dist/utils/queryHelpers.js

@@ -0,0 +1,132 @@
+export function assembleOptions(options) {
+    const queryString = new URLSearchParams();
+    for (const optionKey in options) {
+        const optionVal = options[optionKey];
+        switch (optionKey.toLowerCase()) {
+            case "fields":
+                queryString.set("fields", assembleOptionsFields(optionVal).join(","));
+                break;
+            case "where":
+                queryString.set("where", assembleOptionsWhere(optionVal));
+                break;
+            case "join":
+                queryString.set("join", assembleOptionsJoin(optionVal));
+                break;
+            case "ojoin":
+                queryString.set("ojoin", assembleOptionsJoin(optionVal));
+                break;
+            case "sort":
+                queryString.set("sort", assembleOptionsSort(optionVal));
+                break;
+            default:
+                queryString.set(optionKey, optionVal);
+        }
+    }
+    // Decode URI because URLSearchParams automatically encodes URI components
+    return decodeURIComponent(queryString.toString());
+}
+export function assembleOptionsFields(fields, prefix = "") {
+    let output = [];
+    for (const key in fields) {
+        const value = fields[key];
+        if (typeof value === "object" && value !== null) {
+            let newPrefix = prefix + (isNaN(Number(key)) ? key : "") + ".";
+            if (newPrefix === ".") {
+                newPrefix = "";
+            }
+            if (newPrefix.slice(-2) === "..") {
+                newPrefix = newPrefix.slice(0, -1);
+            }
+            output = output.concat(assembleOptionsFields(value, newPrefix));
+        }
+        else {
+            output.push(prefix + value);
+        }
+    }
+    return output;
+}
+export function assembleOptionsWhere(input) {
+    const output = [];
+    let operator = "and";
+    for (const key in input) {
+        const value = input[key];
+        operator = key.toUpperCase();
+        for (const fieldConditions of value) {
+            for (const field in fieldConditions) {
+                const conditions = fieldConditions[field];
+                const childOperator = field.toUpperCase();
+                if (childOperator === "AND" || childOperator === "OR") {
+                    output.push(assembleOptionsWhere({ [childOperator]: conditions }));
+                }
+                else {
+                    for (let comparison in conditions) {
+                        let conditionValue = conditions[comparison];
+                        comparison = comparison.replace(/<>/g, "ne");
+                        comparison = comparison.replace(/>=/g, "ge");
+                        comparison = comparison.replace(/>/g, "gt");
+                        comparison = comparison.replace(/<=/g, "le");
+                        comparison = comparison.replace(/</g, "lt");
+                        comparison = comparison.replace(/==/g, "eq");
+                        comparison = comparison.replace(/!=/g, "ne");
+                        comparison = comparison.replace(/=/g, "eq");
+                        comparison = comparison.replace(/not/g, "not");
+                        comparison = comparison.replace(/like/g, "like");
+                        comparison = comparison.replace(/contains/g, "contains");
+                        comparison = comparison.replace(/starts/g, "starts");
+                        comparison = comparison.replace(/ends/g, "ends");
+                        comparison = comparison.replace(/excludes/g, "excludes");
+                        conditionValue = urlEncode(conditionValue);
+                        output.push(`${field}:${comparison}:${conditionValue}`);
+                    }
+                }
+            }
+        }
+    }
+    return `(${output.join(`,${operator},`)})`;
+}
+export function assembleOptionsJoin(input) {
+    const out = [];
+    for (const item of Object.values(input)) {
+        let thisJoin = "";
+        for (const table in item) {
+            const value = item[table];
+            thisJoin += table + ":";
+            const thisJoinConditions = [];
+            for (const fieldA in value) {
+                const fieldB = value[fieldA];
+                thisJoinConditions.push(`${fieldA}=${fieldB}`);
+            }
+            thisJoin += thisJoinConditions.join(";");
+        }
+        out.push(thisJoin);
+    }
+    return out.join(",");
+}
+export function assembleOptionsSort(input) {
+    if (Array.isArray(input)) {
+        return input.join(",");
+    }
+    else if (typeof input === "string") {
+        return input;
+    }
+    else {
+        return "";
+    }
+}
+export function urlEncode(input, encodeSpecialChars = true) {
+    if (encodeSpecialChars && input) {
+        input = input.replace(/[%&?]/g, (match) => {
+            return encodeURIComponent(match);
+        });
+        input = input.replace(/[!'()*\-._~]/g, (c) => {
+            return "%" + c.charCodeAt(0).toString(16).toUpperCase();
+        });
+        return input;
+    }
+    else {
+        return encodeURIComponent(input);
+    }
+}
+export function toCamelCase(slug) {
+    return slug.replace(/-([a-z])/g, (letter) => letter.toUpperCase());
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.167",
+	"version": "1.0.170",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -31,6 +31,7 @@
 		"@storybook/addon-viewport": "^7.6.10",
 		"@tanstack/react-virtual": "^3.1.3",
 		"@tanstack/virtual-core": "^3.1.3",
+		"axios": "^1.8.4",
 		"classnames": "^2.5.1",
 		"esbuild-wasm": "^0.23.0",
 		"framer-motion": "^11.0.8",
@@ -50,6 +51,7 @@
 		"@fortawesome/fontawesome-svg-core": "^6.5.1",
 		"@fortawesome/free-solid-svg-icons": "^6.5.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
+		"@sentry/react": "^8.55.0",
 		"@storybook/addon-a11y": "^7.6.8",
 		"@storybook/addon-essentials": "^7.6.6",
 		"@storybook/addon-interactions": "^7.6.6",
@@ -79,13 +81,23 @@
 		"typescript": "^5.7.3",
 		"vite": "^4.5.1",
 		"vite-tsconfig-paths": "^4.2.2",
-		"vitest": "^1.6.0"
+		"vitest": "^1.6.0",
+		"@tanstack/query-sync-storage-persister": "^5.59.20",
+		"@tanstack/react-query": "^5.59.19",
+		"@tanstack/react-query-devtools": "^5.59.19",
+		"@tanstack/react-query-persist-client": "^5.59.20"
 	},
 	"peerDependencies": {
 		"@fortawesome/fontawesome-svg-core": "^6.5.1",
 		"@fortawesome/free-solid-svg-icons": "^6.5.2",
 		"@fortawesome/react-fontawesome": "^0.2.2",
+		"@sentry/react": "^8.50.0",
+		"axios": "^1.8.4",
 		"react-hook-form": "^7.43.9",
-		"react-router-dom": "^6.16.0"
+		"react-router-dom": "^6.16.0",
+		"@tanstack/query-sync-storage-persister": "^5.59.20",
+		"@tanstack/react-query": "^5.59.19",
+		"@tanstack/react-query-devtools": "^5.59.19",
+		"@tanstack/react-query-persist-client": "^5.59.20"
 	}
 }