@raystack/apsara 0.18.6 → 0.19.1

package/dist/index.cjs

@@ -32134,7 +32134,7 @@ function Skeleton({ count = 1, wrapper: Wrapper, className: customClassName, con
         : elements));
 }
 
-function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, initialState, loaderRow = 5, onRowClick, onStateChange = () => { }, ...props }) {
+function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoading = false, ShouldShowHeader = true, initialState, loaderRow = 2, onRowClick, onStateChange = () => { }, onLoadMore, ...props }) {
     const [tableCustomFilter, setTableCustomFilter] = React.useState({});
     const convertedChildren = React.Children.toArray(children);
     const header = convertedChildren.find((child) => child.type === DataTableToolbar) || null;
@@ -32142,18 +32142,40 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
     const detail = convertedChildren.find((child) => child.type === TableDetailContainer) ||
         null;
     const [tableState, setTableState] = React.useState({});
-    const tableData = isLoading
-        ? [...new Array(loaderRow)].map((_, i) => ({ id: i }))
-        : data;
+    const observerRef = React.useRef(null);
+    const lastRowRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!onLoadMore)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && !isLoading) {
+                onLoadMore();
+            }
+        }, { threshold: 0.1 });
+        observerRef.current = observer;
+        return () => observer.disconnect();
+    }, [onLoadMore]);
+    React.useEffect(() => {
+        const observer = observerRef.current;
+        const lastRow = lastRowRef.current;
+        if (observer && lastRow) {
+            observer.disconnect();
+            observer.observe(lastRow);
+        }
+        return () => {
+            if (observer && lastRow) {
+                observer.unobserve(lastRow);
+            }
+        };
+    }, [isLoading]);
+    const getLoader = (loaderRow, columns) => ([...new Array(loaderRow)].map((_, rowIndex) => (jsxRuntimeExports.jsx(Table.Row, { children: columns.map((_, colIndex) => (jsxRuntimeExports.jsx(Table.Cell, { children: jsxRuntimeExports.jsx(Skeleton, { containerClassName: styles$4.flex1, highlightColor: "var(--background-base)", baseColor: "var(--background-base-hover)" }) }, `col_${colIndex}`))) }, `row_${rowIndex}`))));
     const { filteredColumns, addFilterColumn, removeFilterColumn, resetColumns } = useTableColumn();
     const columnWithCustomFilter = React.useMemo(() => columns.map((col) => {
         const colId = col.id || col?.accessorKey;
         const filterFn = colId && tableCustomFilter.hasOwnProperty(colId)
             ? tableCustomFilter[colId]
             : undefined;
-        const cell = isLoading
-            ? () => (jsxRuntimeExports.jsx(Skeleton, { containerClassName: styles$4.flex1, highlightColor: "var(--background-base)", baseColor: "var(--background-base-hover)" }))
-            : col.cell;
+        const { cell } = col;
         return {
             ...col,
             cell,
@@ -32169,7 +32191,7 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
         setTableCustomFilter((old) => ({ ...old, [id]: filterFn }));
     };
     const table = useReactTable({
-        data: tableData,
+        data,
         columns: columnWithCustomFilter,
         globalFilterFn: "auto",
         enableRowSelection: true,
@@ -32217,11 +32239,14 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
                                                                         }[header.column.getIsSorted()] ?? jsxRuntimeExports.jsx(CaretSortIcon, {})
                                                                         : null] }) }, `${header.id}_${index}`));
                                                     }) }, headerGroup.id)))
-                                                : null }), jsxRuntimeExports.jsx(Table.Body, { children: table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => (jsxRuntimeExports.jsx(Table.Row, { "data-state": row.getIsSelected() && "selected", onClick: () => onRowClick?.(row.original), className: isLoading
-                                                    ? ""
-                                                    : `${styles$4.tRow} ${onRowClick ? styles$4.tRowClick : ""}`, children: row.getVisibleCells().map((cell, index) => (jsxRuntimeExports.jsx(Table.Cell, { style: {
-                                                        ...(cell.column.columnDef?.meta?.style ?? {}),
-                                                    }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `${cell.id}_${index}`))) }, row.id)))) : (jsxRuntimeExports.jsx(Table.Row, { children: jsxRuntimeExports.jsx(Table.Cell, { colSpan: columns.length, children: emptyState || "No results." }) })) })] }), detail] })] }), footer] }) }));
+                                                : null }), jsxRuntimeExports.jsxs(Table.Body, { children: [table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row, rowIndex) => (jsxRuntimeExports.jsx(Table.Row, { "data-state": row.getIsSelected() && "selected", onClick: () => onRowClick?.(row.original), className: isLoading
+                                                        ? ""
+                                                        : `${styles$4.tRow} ${onRowClick ? styles$4.tRowClick : ""}`, ref: rowIndex === table.getRowModel().rows.length - 1
+                                                        ? lastRowRef
+                                                        : null, children: row.getVisibleCells().map((cell, index) => (jsxRuntimeExports.jsx(Table.Cell, { style: {
+                                                            ...(cell.column.columnDef?.meta?.style ?? {}),
+                                                        }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, `${cell.id}_${index}`))) }, row.id)))) : (!isLoading ?
+                                                    jsxRuntimeExports.jsx(Table.Row, { children: jsxRuntimeExports.jsx(Table.Cell, { colSpan: columns.length, children: emptyState || "No results." }) }) : jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {})), isLoading && getLoader(loaderRow, columns)] })] }), detail] })] }), footer] }) }));
 }
 const DataTable = Object.assign(DataTableRoot, {
     Toolbar: DataTableToolbar,