@raystack/apsara 0.18.6 → 0.19.0

package/dist/index.js

@@ -4362,7 +4362,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign = function() {
@@ -4396,7 +4396,12 @@ function __spreadArray(to, from, pack) {
         }
     }
     return to.concat(ar || Array.prototype.slice.call(from));
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var zeroRightClassName = 'right-scroll-bar-position';
 var fullWidthClassName = 'width-before-scroll-bar';
@@ -32114,7 +32119,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] = useState({});
     const convertedChildren = Children.toArray(children);
     const header = convertedChildren.find((child) => child.type === DataTableToolbar) || null;
@@ -32122,18 +32127,15 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
     const detail = convertedChildren.find((child) => child.type === TableDetailContainer) ||
         null;
     const [tableState, setTableState] = useState({});
-    const tableData = isLoading
-        ? [...new Array(loaderRow)].map((_, i) => ({ id: i }))
-        : data;
+    const observerRef = useRef(null);
+    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 = 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,
@@ -32149,7 +32151,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,
@@ -32165,6 +32167,25 @@ function DataTableRoot({ columns, data, emptyState, children, parentStyle, isLoa
         initialState,
         state: tableState,
     });
+    const lastRowRef = useCallback((node) => {
+        if (isLoading)
+            return;
+        if (observerRef.current)
+            observerRef.current.disconnect();
+        observerRef.current = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && onLoadMore) {
+                onLoadMore();
+            }
+        });
+        if (node)
+            observerRef.current.observe(node);
+    }, [isLoading, onLoadMore]);
+    useEffect(() => {
+        return () => {
+            if (observerRef.current)
+                observerRef.current.disconnect();
+        };
+    }, []);
     const tableStyle = {
         ...(table.getRowModel().rows?.length
             ? { width: "100%" }
@@ -32197,11 +32218,13 @@ 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)))) : (jsxRuntimeExports.jsx(Table.Row, { children: jsxRuntimeExports.jsx(Table.Cell, { colSpan: columns.length, children: emptyState || "No results." }) })), isLoading && getLoader(loaderRow, columns)] })] }), detail] })] }), footer] }) }));
 }
 const DataTable = Object.assign(DataTableRoot, {
     Toolbar: DataTableToolbar,