@agilant/toga-blox 1.0.165 → 1.0.167

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

@@ -17,6 +17,7 @@ export interface TableRowProps<T extends DataWithUUID> {
     loadingIndicator?: ReactNode;
     errorIndicator?: (error: Error) => ReactNode;
     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, }: TableRowProps<T>) => import("react/jsx-runtime").JSX.Element;
+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;
 export default TableRow;

package/dist/components/TableRow/TableRow.js

@@ -18,7 +18,7 @@ rowUuid, columnInputs,
 /* click handler */
 onRowClick, 
 /* dropdown */
-hasDropDown = false, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, }) => {
+hasDropDown = false, onFetchRowData, loadingIndicator, errorIndicator, expandedContent, linkText = "text-blue-500", }) => {
     /* prepare react-table row */
     prepareRow(row);
     const isActive = activeIndex === row.index;
@@ -53,7 +53,7 @@ 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 }) }, cellProps.key));
+                    return (_jsx(Fragment, { children: _jsx(TableCell, { cell: cell, isLastCell: isLastCell, globalTrimActive: globalTrimActive, columnInputs: columnInputs, rowUuid: rowUuid, hasInfiniteScroll: hasInfiniteScroll, linkText: linkText }) }, cellProps.key));
                 }) }, 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/hooks/index.d.ts

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

package/dist/hooks/useTableInfiniteScroll.d.ts

@@ -1,16 +1,23 @@
-/** Options the consumer must pass in */
-export type UseTableInfiniteScrollOpts = {
-    rows: number;
+import type { VirtualItem } from "@tanstack/react-virtual";
+export interface useTableInfiniteScrollOptions {
+    /** Enable only when true */
     hasInfiniteScroll: boolean;
-    isLoadingMore: boolean;
-    onNeedMore: () => void;
-    rootMarginPx?: number;
-};
+    /** Flag from context/store indicating a load is already in progress */
+    infiniteScrollIsLoadingMore: boolean;
+    /** Number of rows currently loaded */
+    pageLength: number;
+    /** Total record count from the server (optional) */
+    totalRecords?: number;
+    /** Virtual items returned from useVirtualizer */
+    virtualItems: VirtualItem<HTMLDivElement>[];
+    /** Callback to fetch the next page */
+    loadNextPage: () => void;
+    /** How close to the end (in rows) before triggering load */
+    threshold?: number;
+}
 /**
- * Reusable hook — no app‑specific imports.
- * Returns { scrollRef, sentinelRef }.
+ * Triggers loadNextPage() when the last visible virtual row
+ * gets within `threshold` of `pageLength`, but stops once
+ * we've loaded all `totalRecords`.
  */
-export declare const useTableInfiniteScroll: ({ rows, hasInfiniteScroll, isLoadingMore, onNeedMore, rootMarginPx, }: UseTableInfiniteScrollOpts) => {
-    scrollRef: import("react").MutableRefObject<HTMLDivElement>;
-    sentinelRef: import("react").MutableRefObject<HTMLDivElement>;
-};
+export declare function useTableInfiniteScroll({ hasInfiniteScroll, infiniteScrollIsLoadingMore, pageLength, totalRecords, virtualItems, loadNextPage, threshold, }: useTableInfiniteScrollOptions): void;

package/dist/hooks/useTableInfiniteScroll.js

@@ -1,39 +1,28 @@
-import { useRef, useEffect, useLayoutEffect } from "react";
+import { useEffect } from "react";
 /**
- * Reusable hook — no app‑specific imports.
- * Returns { scrollRef, sentinelRef }.
+ * Triggers loadNextPage() when the last visible virtual row
+ * gets within `threshold` of `pageLength`, but stops once
+ * we've loaded all `totalRecords`.
  */
-export const useTableInfiniteScroll = ({ rows, hasInfiniteScroll, isLoadingMore, onNeedMore, rootMarginPx = 800, }) => {
-    const scrollRef = useRef(null);
-    const sentinelRef = useRef(null);
-    const scrollTop = useRef(0);
-    /* remember pixel offset */
+export function useTableInfiniteScroll({ hasInfiniteScroll, infiniteScrollIsLoadingMore, pageLength, totalRecords, virtualItems, loadNextPage, threshold = 5, }) {
     useEffect(() => {
-        const el = scrollRef.current;
-        if (!el)
+        if (!hasInfiniteScroll || infiniteScrollIsLoadingMore) {
             return;
-        const save = () => (scrollTop.current = el.scrollTop);
-        el.addEventListener("scroll", save);
-        return () => el.removeEventListener("scroll", save);
-    }, []);
-    /* observe sentinel */
-    useEffect(() => {
-        if (!hasInfiniteScroll)
+        }
+        if (totalRecords !== undefined && pageLength >= totalRecords) {
             return;
-        const observer = new IntersectionObserver(([e]) => {
-            if (e.isIntersecting && !isLoadingMore)
-                onNeedMore();
-        }, { root: scrollRef.current, rootMargin: `${rootMarginPx}px` });
-        const el = sentinelRef.current;
-        if (el)
-            observer.observe(el);
-        return () => observer.disconnect();
-    }, [hasInfiniteScroll, isLoadingMore, onNeedMore, rootMarginPx]);
-    /* restore offset after rows change */
-    useLayoutEffect(() => {
-        const el = scrollRef.current;
-        if (el)
-            el.scrollTop = scrollTop.current;
-    }, [rows]);
-    return { scrollRef, sentinelRef };
-};
+        }
+        const lastItem = virtualItems[virtualItems.length - 1];
+        if (lastItem && lastItem.index >= pageLength - threshold) {
+            loadNextPage();
+        }
+    }, [
+        hasInfiniteScroll,
+        infiniteScrollIsLoadingMore,
+        virtualItems,
+        pageLength,
+        totalRecords,
+        loadNextPage,
+        threshold,
+    ]);
+}

package/package.json

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