@eml-payments/ui-kit 1.3.3 → 1.4.3

package/dist/src/components/Table/BaseTable/BaseTable.stories.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createColumnHelper, getCoreRowModel, getSortedRowModel, useReactTable, flexRender, } from '@tanstack/react-table';
+import { useState } from 'react';
+import { BaseTable } from './BaseTable';
+const data = Array.from({ length: 5 }).map((_, i) => ({
+    id: `user-${i + 1}`,
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    role: i % 2 === 0 ? 'Admin' : 'User',
+}));
+const columnHelper = createColumnHelper();
+const columns = [
+    columnHelper.accessor('name', { header: 'Name' }),
+    columnHelper.accessor('email', { header: 'Email' }),
+    columnHelper.accessor('role', { header: 'Role' }),
+];
+function BaseTableHarness({ rows, isLoading, }) {
+    const [sorting, setSorting] = useState([]);
+    const table = useReactTable({
+        data: rows,
+        columns,
+        state: { sorting },
+        onSortingChange: setSorting,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getRowId: (row) => row.id,
+    });
+    return (_jsx(BaseTable, { table: table, height: 400, isLoading: isLoading, renderBody: () => table.getRowModel().rows.map((row) => (_jsx("tr", { className: "border-t", children: row.getVisibleCells().map((cell) => (_jsx("td", { className: "p-4", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) }));
+}
+const meta = {
+    title: 'UIKit/Table/BaseTable',
+};
+export default meta;
+export const Basic = {
+    render: () => _jsx(BaseTableHarness, { rows: data }),
+};
+export const Empty = {
+    render: () => _jsx(BaseTableHarness, { rows: [] }),
+};
+export const Loading = {
+    render: () => _jsx(BaseTableHarness, { rows: [], isLoading: true }),
+};

package/dist/src/components/Table/BaseTable/BaseTable.types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/src/components/Table/BaseTable/TableHeader.d.ts

@@ -0,0 +1,7 @@
+import { type Table } from '@tanstack/react-table';
+interface TableHeaderProps<T> {
+    table: Table<T>;
+    hasActions?: boolean;
+}
+export declare function TableHeader<T>({ table, hasActions }: Readonly<TableHeaderProps<T>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/Table/BaseTable/TableHeader.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from '../../../utils';
+import { flexRender } from '@tanstack/react-table';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+export function TableHeader({ table, hasActions }) {
+    return (_jsx("thead", { className: "bg-(--uikit-tertiary)", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { children: [headerGroup.headers.map((header) => {
+                    var _a;
+                    return (_jsx("th", { scope: "col", style: { width: header.column.getSize() }, className: classNames('select-none text-[14px] font-bold', header.id === 'select' ? 'p-0' : 'p-4 text-left cursor-pointer'), onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined, children: _jsxs("div", { className: classNames('w-full h-full', header.id === 'select'
+                                ? 'flex justify-center items-center'
+                                : 'flex items-center gap-2'), children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (_jsx("span", { className: "text-xs", children: (_a = {
+                                        asc: _jsx(FaChevronUp, {}),
+                                        desc: _jsx(FaChevronDown, {}),
+                                    }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : null }))] }) }, header.id));
+                }), hasActions && _jsx("th", { className: "w-[40px] px-2 py-2 text-right" })] }, headerGroup.id))) }));
+}

package/dist/src/components/Table/BaseTable/index.d.ts

@@ -0,0 +1 @@
+export { BaseTable } from './BaseTable';

package/dist/src/components/Table/BaseTable/index.js

@@ -0,0 +1 @@
+export { BaseTable } from './BaseTable';

package/dist/src/components/Table/InfiniteTable/InfiniteTable.d.ts

@@ -0,0 +1,4 @@
+import type { InfiniteTableProps } from './InfiniteTable.props';
+export declare function InfiniteTable<T extends {
+    id: string;
+}>(props: Readonly<InfiniteTableProps<T>>): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Table/InfiniteTable/InfiniteTable.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { flexRender } from '@tanstack/react-table';
+import { BaseTable } from '../BaseTable/BaseTable';
+import { classNames } from '../../../utils';
+import { useInfiniteTableController } from './useInfiniteTableController';
+import { DropdownWrapper } from '../../DropdownWrapper';
+import { Button } from '../../Button';
+import { FiMoreHorizontal } from 'react-icons/fi';
+export function InfiniteTable(props) {
+    var _a, _b;
+    const { table, rows, parentScrollRef, loaderRef, virtualizationEnabled, rowVirtualizer, hasNextPage, isFetchingNextPage, tableActionsDropdown, } = useInfiniteTableController(props);
+    const hasActions = Boolean(tableActionsDropdown);
+    const colSpanFull = table.getVisibleFlatColumns().length + (hasActions ? 1 : 0);
+    const virtualItems = virtualizationEnabled && rowVirtualizer ? rowVirtualizer.getVirtualItems() : [];
+    const paddingTop = virtualItems.length ? virtualItems[0].start : 0;
+    const lastVirtual = virtualItems.at(-1);
+    const totalSize = (_b = (_a = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.getTotalSize) === null || _a === void 0 ? void 0 : _a.call(rowVirtualizer)) !== null && _b !== void 0 ? _b : 0;
+    const end = lastVirtual ? lastVirtual.end : 0;
+    const paddingBottom = Math.max(totalSize - end, 0);
+    const isTrulyEmpty = rows.length === 0 && !hasNextPage && !isFetchingNextPage;
+    const renderActionsCell = (row) => {
+        var _a, _b, _c, _d;
+        if (!tableActionsDropdown) {
+            return null;
+        }
+        return (_jsx("td", { className: "w-[40px] px-2 py-2 text-right", children: _jsx(DropdownWrapper, { structure: (_a = tableActionsDropdown.structure) !== null && _a !== void 0 ? _a : 'default', options: tableActionsDropdown.getOptions(row.original), menuAlignment: tableActionsDropdown.menuAlignment, isTriggerElementDisabled: typeof tableActionsDropdown.isDisabled === 'function'
+                    ? tableActionsDropdown.isDisabled(row.original)
+                    : tableActionsDropdown.isDisabled, triggerElement: (_c = (_b = tableActionsDropdown.renderCustomTrigger) === null || _b === void 0 ? void 0 : _b.call(tableActionsDropdown, row.original)) !== null && _c !== void 0 ? _c : (_jsx(Button, { "aria-label": "Open actions menu", title: "Open actions menu", size: "icon", variant: "ghost", disabled: typeof tableActionsDropdown.isDisabled === 'function'
+                        ? tableActionsDropdown.isDisabled(row.original)
+                        : ((_d = tableActionsDropdown.isDisabled) !== null && _d !== void 0 ? _d : false), className: "p-1 focus-visible:outline-hidden focus-visible:ring-0", children: _jsx(FiMoreHorizontal, { size: 16 }) })) }) }));
+    };
+    return (_jsx(BaseTable, { table: table, height: props.height, showHeader: true, isLoading: props.isLoading, className: props.className, containerRef: parentScrollRef, renderBody: () => {
+            var _a, _b;
+            return (_jsx(_Fragment, { children: virtualizationEnabled && rowVirtualizer ? (_jsxs(_Fragment, { children: [_jsx("tr", { style: { height: `${paddingTop}px` }, children: _jsx("td", { colSpan: colSpanFull }) }), isTrulyEmpty && (_jsx("tr", { children: _jsx("td", { colSpan: colSpanFull, className: "px-4 py-8 text-center text-muted-foreground", children: (_a = props.noRowsMessage) !== null && _a !== void 0 ? _a : 'No rows to display' }) })), virtualItems.map((vi) => {
+                            var _a;
+                            const isLoaderRow = vi.index >= rows.length;
+                            if (isLoaderRow) {
+                                return (_jsx("tr", { className: "border-t", children: _jsx("td", { colSpan: colSpanFull, className: "px-4 py-2", children: hasNextPage ? 'Loading more...' : 'Nothing more to load' }) }, `loader-${vi.key}`));
+                            }
+                            const row = rows[vi.index];
+                            const clickable = (_a = props.isRowClickable) === null || _a === void 0 ? void 0 : _a.call(props, row.original);
+                            return (_jsxs("tr", { className: classNames('border-t hover:bg-gray-50', clickable && 'cursor-pointer'), onClick: () => { var _a; return clickable && ((_a = props.onRowClick) === null || _a === void 0 ? void 0 : _a.call(props, row.original)); }, children: [row.getVisibleCells().map((cell) => (_jsx("td", { style: { width: cell.column.getSize() }, className: "p-4", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))), hasActions && renderActionsCell(row)] }, row.id));
+                        }), _jsx("tr", { style: { height: `${paddingBottom}px` }, children: _jsx("td", { colSpan: colSpanFull }) })] })) : (_jsxs(_Fragment, { children: [isTrulyEmpty && (_jsx("tr", { children: _jsx("td", { colSpan: colSpanFull, className: "px-4 py-8 text-center text-muted-foreground", children: (_b = props.noRowsMessage) !== null && _b !== void 0 ? _b : 'No rows to display' }) })), rows.map((row) => {
+                            var _a;
+                            const clickable = (_a = props.isRowClickable) === null || _a === void 0 ? void 0 : _a.call(props, row.original);
+                            return (_jsxs("tr", { className: classNames('border-t hover:bg-gray-50', clickable && 'cursor-pointer'), onClick: () => { var _a; return clickable && ((_a = props.onRowClick) === null || _a === void 0 ? void 0 : _a.call(props, row.original)); }, children: [row.getVisibleCells().map((cell) => (_jsx("td", { style: { width: cell.column.getSize() }, className: "p-4", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))), hasActions && renderActionsCell(row)] }, row.id));
+                        }), hasNextPage && (_jsx("tr", { ref: loaderRef, className: "border-t", children: _jsx("td", { colSpan: colSpanFull, className: "px-4 py-2", children: isFetchingNextPage ? 'Loading more...' : 'Scroll to load more' }) }))] })) }));
+        } }));
+}

package/dist/src/components/Table/InfiniteTable/InfiniteTable.props.d.ts

@@ -0,0 +1,32 @@
+import type { ColumnDef, SortingState } from '@tanstack/react-table';
+import type { ITableActionsDropdownProps } from '../Table.types';
+export interface InfiniteTableProps<T extends {
+    id: string;
+}> {
+    id: string;
+    data: T[];
+    columns: ColumnDef<T, unknown>[];
+    height?: number;
+    hasMore: boolean;
+    isFetchingMore: boolean;
+    onLoadMore: () => void;
+    virtualization?: {
+        enabled: boolean;
+        rowEstimate?: number;
+        overscan?: number;
+    };
+    sorting?: SortingState;
+    onSortingChange?: (state: SortingState) => void;
+    grouping?: string[];
+    isLoading?: boolean;
+    className?: string;
+    noRowsMessage?: string;
+    onRowClick?: (row: T) => void;
+    isRowClickable?: (row: T) => boolean;
+    onGroupRowClick?: (args: {
+        columnId: string;
+        value: unknown;
+        rows: T[];
+    }) => void;
+    tableActionsDropdown?: ITableActionsDropdownProps<T>;
+}

package/dist/src/components/Table/InfiniteTable/InfiniteTable.props.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/Table/InfiniteTable/InfiniteTable.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { InfiniteTable } from './InfiniteTable';
+declare const meta: Meta<typeof InfiniteTable>;
+export default meta;
+type Story = StoryObj<typeof InfiniteTable>;
+export declare const InfiniteScrollVirtualized: Story;
+export declare const InfiniteScrollNonVirtual: Story;
+export declare const InfiniteScrollVirtualizedWithActions: Story;

package/dist/src/components/Table/InfiniteTable/InfiniteTable.stories.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { InfiniteTable } from './InfiniteTable';
+const TOTAL_USERS = 100;
+const ALL_USERS = Array.from({ length: TOTAL_USERS }).map((_, i) => ({
+    id: `user-${i + 1}`,
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    age: 18 + ((i * 7) % 50),
+}));
+async function fetchInfiniteUsers(limit, offset) {
+    await new Promise((r) => setTimeout(r, 500));
+    const rows = ALL_USERS.slice(offset, offset + limit);
+    const nextOffset = offset + rows.length;
+    const hasMore = nextOffset < TOTAL_USERS;
+    return {
+        rows,
+        nextOffset,
+        hasMore,
+    };
+}
+const columns = [
+    { accessorKey: 'name', header: 'Name', cell: (info) => info.getValue() },
+    { accessorKey: 'email', header: 'Email', cell: (info) => info.getValue() },
+    { accessorKey: 'age', header: 'Age', cell: (info) => info.getValue() },
+];
+const meta = {
+    title: 'UIKit/Table/InfiniteTable',
+    component: InfiniteTable,
+};
+export default meta;
+function useInfiniteUsers(pageSize = 20) {
+    const [rows, setRows] = useState([]);
+    const [nextOffset, setNextOffset] = useState(0);
+    const [hasMore, setHasMore] = useState(true);
+    const [isFetchingMore, setIsFetchingMore] = useState(false);
+    useEffect(() => {
+        (async () => {
+            setIsFetchingMore(true);
+            const res = await fetchInfiniteUsers(pageSize, 0);
+            setRows(res.rows);
+            setNextOffset(res.nextOffset);
+            setHasMore(res.hasMore);
+            setIsFetchingMore(false);
+        })();
+    }, [pageSize]);
+    const onLoadMore = useCallback(async () => {
+        if (isFetchingMore || !hasMore)
+            return;
+        setIsFetchingMore(true);
+        const res = await fetchInfiniteUsers(pageSize, nextOffset);
+        setRows((prev) => [...prev, ...res.rows]);
+        setNextOffset(res.nextOffset);
+        setHasMore(res.hasMore);
+        setIsFetchingMore(false);
+    }, [isFetchingMore, hasMore, nextOffset, pageSize]);
+    return { rows, hasMore, isFetchingMore, onLoadMore };
+}
+function InfiniteScrollVirtualizedExample() {
+    const { rows, hasMore, isFetchingMore, onLoadMore } = useInfiniteUsers();
+    return (_jsx("div", { children: _jsx(InfiniteTable, { id: "infinite-virtualized", height: 500, data: rows, columns: columns, hasMore: hasMore, isFetchingMore: isFetchingMore, onLoadMore: onLoadMore, virtualization: {
+                enabled: true,
+                rowEstimate: 48,
+                overscan: 6,
+            } }) }));
+}
+export const InfiniteScrollVirtualized = {
+    name: 'Infinite Scroll — Virtualized',
+    render: () => _jsx(InfiniteScrollVirtualizedExample, {}),
+};
+function InfiniteScrollNonVirtualExample() {
+    const { rows, hasMore, isFetchingMore, onLoadMore } = useInfiniteUsers();
+    return (_jsx("div", { children: _jsx(InfiniteTable, { id: "infinite-nonvirtual", height: 500, data: rows, columns: columns, hasMore: hasMore, isFetchingMore: isFetchingMore, onLoadMore: onLoadMore, virtualization: { enabled: false } }) }));
+}
+export const InfiniteScrollNonVirtual = {
+    name: 'Infinite Scroll — Non-virtual',
+    render: () => _jsx(InfiniteScrollNonVirtualExample, {}),
+};
+function InfiniteScrollVirtualizedWithActionsExample() {
+    const { rows, hasMore, isFetchingMore, onLoadMore } = useInfiniteUsers();
+    return (_jsx(InfiniteTable, { id: "infinite-virtualized-actions", height: 500, data: rows, columns: columns, hasMore: hasMore, isFetchingMore: isFetchingMore, onLoadMore: onLoadMore, virtualization: {
+            enabled: true,
+            rowEstimate: 48,
+            overscan: 6,
+        }, onRowClick: (row) => {
+            alert(`Row clicked: ${row.name}`);
+        }, isRowClickable: () => true, tableActionsDropdown: {
+            structure: 'default',
+            getOptions: (row) => [
+                {
+                    label: 'View',
+                    onClick: () => alert(`View ${row.name}`),
+                },
+                {
+                    label: 'Edit',
+                    onClick: () => alert(`Edit ${row.name}`),
+                },
+                {
+                    label: 'Delete',
+                    variant: 'destructive',
+                    onClick: () => alert(`Delete ${row.name}`),
+                },
+            ],
+        } }));
+}
+export const InfiniteScrollVirtualizedWithActions = {
+    name: 'Infinite Scroll — Virtualized (Row Click & Actions)',
+    render: () => _jsx(InfiniteScrollVirtualizedWithActionsExample, {}),
+};

package/dist/src/components/Table/InfiniteTable/index.d.ts

@@ -0,0 +1,2 @@
+export { InfiniteTable } from './InfiniteTable';
+export type { InfiniteTableProps } from './InfiniteTable.props';

package/dist/src/components/Table/InfiniteTable/index.js

@@ -0,0 +1 @@
+export { InfiniteTable } from './InfiniteTable';

package/dist/src/components/Table/InfiniteTable/useInfiniteScrollTrigger.d.ts

@@ -0,0 +1,12 @@
+interface UseInfiniteScrollTriggerOptions {
+    hasMore: boolean;
+    isFetching: boolean;
+    onLoadMore: () => void;
+    rootRef?: React.RefObject<Element | null>;
+    rootMargin?: string;
+    disabled?: boolean;
+}
+export declare function useInfiniteScrollTrigger({ hasMore, isFetching, onLoadMore, rootRef, rootMargin, disabled, }: UseInfiniteScrollTriggerOptions): {
+    sentinelRef: (el: HTMLDivElement | null) => void;
+};
+export {};

package/dist/src/components/Table/InfiniteTable/useInfiniteScrollTrigger.js

@@ -0,0 +1,31 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+export function useInfiniteScrollTrigger({ hasMore, isFetching, onLoadMore, rootRef, rootMargin = '200px', disabled = false, }) {
+    const [node, setNode] = useState(null);
+    const sentinelRef = useCallback((el) => setNode(el), []);
+    const lockRef = useRef(false);
+    useEffect(() => {
+        var _a;
+        if (disabled) {
+            return;
+        }
+        if (!node) {
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            if (!entry.isIntersecting) {
+                return;
+            }
+            if (!hasMore || isFetching) {
+                return;
+            }
+            if (lockRef.current) {
+                return;
+            }
+            lockRef.current = true;
+            Promise.resolve(onLoadMore()).finally(() => (lockRef.current = false));
+        }, { root: (_a = rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) !== null && _a !== void 0 ? _a : null, rootMargin, threshold: 0.01 });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [disabled, node, hasMore, isFetching, onLoadMore, rootMargin, rootRef]);
+    return { sentinelRef };
+}

package/dist/src/components/Table/InfiniteTable/useInfiniteScrolling.d.ts

@@ -0,0 +1,29 @@
+import { type RefObject } from 'react';
+import { type Virtualizer } from '@tanstack/react-virtual';
+import type { InfiniteScrollOptions, VirtualizationOptions } from '../Table.types';
+type PageEnvelope<T> = {
+    rows: T[];
+};
+export interface UseInfiniteScrollingParams<T extends {
+    id: string;
+}> {
+    dataPages?: PageEnvelope<T>[];
+    flatData?: T[];
+    infiniteScroll?: InfiniteScrollOptions;
+    virtualization?: VirtualizationOptions;
+    parentScrollRef: RefObject<HTMLDivElement | null>;
+    loaderRef?: RefObject<HTMLElement | null>;
+}
+export interface UseInfiniteScrollingReturn<T extends {
+    id: string;
+}> {
+    allRows: T[];
+    virtualizationEnabled: boolean;
+    rowVirtualizer?: Virtualizer<HTMLDivElement, Element>;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+}
+export declare function useInfiniteScrolling<T extends {
+    id: string;
+}>(params: UseInfiniteScrollingParams<T>): UseInfiniteScrollingReturn<T>;
+export {};

package/dist/src/components/Table/InfiniteTable/useInfiniteScrolling.js

@@ -0,0 +1,103 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+const ROOT_MARGIN_PX = 300;
+export function useInfiniteScrolling(params) {
+    var _a, _b, _c;
+    const { dataPages, flatData, infiniteScroll, virtualization, parentScrollRef, loaderRef } = params;
+    const isInfinite = Boolean(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled);
+    const hasNextPage = Boolean(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.hasNextPage);
+    const isFetchingNextPage = Boolean(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.isFetchingNextPage);
+    const fetchNextPage = infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.fetchNextPage;
+    const allRows = useMemo(() => {
+        if (isInfinite && Array.isArray(dataPages)) {
+            const byId = new Map();
+            for (const p of dataPages) {
+                for (const r of p.rows) {
+                    byId.set(String(r.id), r);
+                }
+            }
+            return Array.from(byId.values());
+        }
+        return flatData !== null && flatData !== void 0 ? flatData : [];
+    }, [isInfinite, dataPages, flatData]);
+    const virtualizationEnabled = Boolean(virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled);
+    const rowVirtualizer = useVirtualizer({
+        count: allRows.length + (isInfinite && hasNextPage ? 1 : 0),
+        getScrollElement: () => parentScrollRef.current,
+        estimateSize: () => { var _a; return (_a = virtualization === null || virtualization === void 0 ? void 0 : virtualization.rowEstimate) !== null && _a !== void 0 ? _a : 48; },
+        overscan: (_a = virtualization === null || virtualization === void 0 ? void 0 : virtualization.overscan) !== null && _a !== void 0 ? _a : 6,
+    });
+    const loadLockRef = useRef(false);
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    const lastVirtualIndex = (_c = (_b = virtualItems.at(-1)) === null || _b === void 0 ? void 0 : _b.index) !== null && _c !== void 0 ? _c : -1;
+    const loaderIndex = allRows.length;
+    useEffect(() => {
+        if (!virtualizationEnabled || !isInfinite) {
+            return;
+        }
+        if (!fetchNextPage || !hasNextPage || isFetchingNextPage) {
+            return;
+        }
+        if (allRows.length === 0) {
+            return;
+        }
+        if (lastVirtualIndex < loaderIndex || loadLockRef.current) {
+            return;
+        }
+        loadLockRef.current = true;
+        Promise.resolve(fetchNextPage()).finally(() => {
+            loadLockRef.current = false;
+        });
+    }, [
+        virtualizationEnabled,
+        isInfinite,
+        hasNextPage,
+        isFetchingNextPage,
+        fetchNextPage,
+        lastVirtualIndex,
+        loaderIndex,
+        allRows.length,
+    ]);
+    useEffect(() => {
+        var _a, _b;
+        if (!isInfinite || virtualizationEnabled) {
+            return;
+        }
+        if (!(loaderRef === null || loaderRef === void 0 ? void 0 : loaderRef.current) || !fetchNextPage) {
+            return;
+        }
+        const rootMargin = `${(_a = infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.rootMarginPx) !== null && _a !== void 0 ? _a : ROOT_MARGIN_PX}px`;
+        const observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            if (entry.isIntersecting && hasNextPage && !isFetchingNextPage) {
+                fetchNextPage();
+            }
+        }, {
+            root: (_b = parentScrollRef.current) !== null && _b !== void 0 ? _b : null,
+            rootMargin: `0px 0px ${rootMargin} 0px`,
+            threshold: 0.01,
+        });
+        const el = loaderRef.current;
+        observer.observe(el);
+        return () => {
+            observer.unobserve(el);
+            observer.disconnect();
+        };
+    }, [
+        isInfinite,
+        virtualizationEnabled,
+        hasNextPage,
+        isFetchingNextPage,
+        fetchNextPage,
+        infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.rootMarginPx,
+        parentScrollRef,
+        loaderRef,
+    ]);
+    return {
+        allRows,
+        virtualizationEnabled,
+        rowVirtualizer,
+        hasNextPage,
+        isFetchingNextPage,
+    };
+}

package/dist/src/components/Table/InfiniteTable/useInfiniteTableController.d.ts

@@ -0,0 +1,14 @@
+import type { InfiniteTableProps } from './InfiniteTable.props';
+export declare function useInfiniteTableController<T extends {
+    id: string;
+}>(props: Readonly<InfiniteTableProps<T>>): {
+    table: import("@tanstack/table-core").Table<T>;
+    rows: import("@tanstack/table-core").Row<T>[];
+    parentScrollRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    loaderRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
+    virtualizationEnabled: boolean;
+    rowVirtualizer: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element> | undefined;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+    tableActionsDropdown: import("..").ITableActionsDropdownProps<T> | undefined;
+};

package/dist/src/components/Table/InfiniteTable/useInfiniteTableController.js

@@ -0,0 +1,76 @@
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
+import { applyFlexSizes } from '../table.helpers';
+import { useInfiniteScrolling } from './useInfiniteScrolling';
+export function useInfiniteTableController(props) {
+    const { data, columns, hasMore, isFetchingMore, onLoadMore, virtualization, tableActionsDropdown } = props;
+    const safeData = useMemo(() => (Array.isArray(data) ? data : []), [data]);
+    const parentScrollRef = useRef(null);
+    const loaderRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    useLayoutEffect(() => {
+        if (!parentScrollRef.current) {
+            return;
+        }
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const ro = new ResizeObserver(([entry]) => {
+            setContainerWidth(entry.contentRect.width);
+        });
+        ro.observe(parentScrollRef.current);
+        return () => ro.disconnect();
+    }, []);
+    const virtualizationOpts = useMemo(() => {
+        if (!virtualization) {
+            return undefined;
+        }
+        return {
+            enabled: virtualization.enabled,
+            rowEstimate: virtualization.rowEstimate,
+            overscan: virtualization.overscan,
+        };
+    }, [virtualization]);
+    const infiniteScrollOpts = useMemo(() => ({
+        enabled: true,
+        hasNextPage: hasMore,
+        isFetchingNextPage: isFetchingMore,
+        fetchNextPage: onLoadMore,
+    }), [hasMore, isFetchingMore, onLoadMore]);
+    const dataPages = useMemo(() => [{ rows: safeData }], [safeData]);
+    const { allRows, virtualizationEnabled, rowVirtualizer, hasNextPage } = useInfiniteScrolling({
+        dataPages,
+        flatData: safeData,
+        infiniteScroll: infiniteScrollOpts,
+        virtualization: virtualizationOpts,
+        parentScrollRef,
+        loaderRef,
+    });
+    // For InfiniteTable, we are ALWAYS in infinite mode, so table data is allRows
+    const tableColumns = useMemo(() => {
+        return applyFlexSizes(columns !== null && columns !== void 0 ? columns : [], containerWidth, Boolean(virtualizationEnabled));
+    }, [columns, containerWidth, virtualizationEnabled]);
+    const table = useReactTable({
+        data: allRows,
+        columns: tableColumns,
+        getRowId: (row) => String(row.id),
+        getCoreRowModel: getCoreRowModel(),
+        manualPagination: true,
+        autoResetPageIndex: false,
+        meta: {
+            hasActions: Boolean(tableActionsDropdown),
+        },
+    });
+    const rows = table.getRowModel().rows;
+    return {
+        table,
+        rows,
+        parentScrollRef,
+        loaderRef,
+        virtualizationEnabled,
+        rowVirtualizer,
+        hasNextPage,
+        isFetchingNextPage: isFetchingMore,
+        tableActionsDropdown,
+    };
+}

package/dist/src/components/Table/Pagination/PageSizeSelector.d.ts

@@ -0,0 +1,2 @@
+import type { PageSizeSelectorProps } from './Pagination.types';
+export declare const PageSizeSelector: ({ id, value, onChange, options, label, className, size, }: PageSizeSelectorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Table/Pagination/PageSizeSelector.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectWrapper } from '../../SelectWrapper';
+import { cn } from '../../../lib/utils';
+export const PageSizeSelector = ({ id, value, onChange, options = ['5', '10', '20', '50', '100'], label = 'Rows per page:', className, size = 'default', }) => {
+    return (_jsxs("div", { className: cn('flex items-center gap-2 text-xs', className), id: `page-size-select-${id}`, children: [_jsx("label", { htmlFor: `page-size-select-${id}`, children: label }), _jsx("div", { className: "w-fit", children: _jsx(SelectWrapper, { size: size, value: value, onChange: onChange, options: options.map((option) => ({
+                        label: option,
+                        value: option,
+                    })), className: "bg-transparent shadow-none border-none gap-1" }) })] }));
+};

package/dist/src/components/Table/Pagination/Pagination.types.d.ts

@@ -0,0 +1,21 @@
+import type { SelectWrapperProps } from '../../SelectWrapper';
+export interface PaginationControlsProps {
+    tableId: string;
+    pageIndex: number;
+    pageSize: number;
+    totalRows: number;
+    canNextPage: boolean;
+    canPrevPage: boolean;
+    onNextPage: () => void;
+    onPrevPage: () => void;
+    onPageSizeChange: (size: number) => void;
+}
+export type PageSizeSelectorProps = {
+    id: string;
+    value: string;
+    onChange: (val: string) => void;
+    options?: string[];
+    label?: string;
+    className?: SelectWrapperProps['className'];
+    size?: SelectWrapperProps['size'];
+};

package/dist/src/components/Table/Pagination/Pagination.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/Table/Pagination/PaginationFooter.d.ts

@@ -0,0 +1,2 @@
+import type { PaginationControlsProps } from './Pagination.types';
+export declare const PaginationFooter: ({ tableId, pageIndex, pageSize, totalRows, canNextPage, canPrevPage, onNextPage, onPrevPage, onPageSizeChange, }: PaginationControlsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Table/Pagination/PaginationFooter.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6';
+import { PageSizeSelector } from './PageSizeSelector';
+import { Button } from '../../Button';
+import { cn } from '../../../lib/utils';
+export const PaginationFooter = ({ tableId, pageIndex, pageSize, totalRows, canNextPage, canPrevPage, onNextPage, onPrevPage, onPageSizeChange, }) => {
+    const startRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
+    const endRow = totalRows === 0 ? 0 : Math.min((pageIndex + 1) * pageSize, totalRows);
+    return (_jsxs("div", { className: "flex justify-end items-center gap-6 px-4 py-2 text-xs text-(--uikit-textSecondary) w-full", children: [_jsx(PageSizeSelector, { id: tableId, value: String(pageSize), onChange: (val) => onPageSizeChange(Number(val)), size: "small", label: "Rows per page" }), totalRows > 0 && _jsx("div", { id: `page-indicator-${tableId}`, children: `${startRow} - ${endRow} of ${totalRows}` }), totalRows > 0 && (_jsxs("div", { className: "flex gap-2", id: `pagination-controls-${tableId}`, children: [_jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Previous page", onClick: onPrevPage, disabled: !canPrevPage, className: cn({ '!bg-transparent': !canPrevPage }), children: _jsx(FaChevronLeft, { className: "!w-3 !h-3" }) }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Next page", onClick: onNextPage, disabled: !canNextPage, className: cn({ '!bg-transparent': !canNextPage }), children: _jsx(FaChevronRight, { className: "!w-3 !h-3" }) })] }))] }));
+};

package/dist/src/components/Table/Pagination/index.d.ts

@@ -1,2 +1,3 @@
-export * from './PaginationControls';
-export * from './PaginationControls.types';
+export * from './PageSizeSelector';
+export * from './PaginationFooter';
+export * from './Pagination.types';

package/dist/src/components/Table/Pagination/index.js

@@ -1,2 +1,3 @@
-export * from './PaginationControls';
-export * from './PaginationControls.types';
+export * from './PageSizeSelector';
+export * from './PaginationFooter';
+export * from './Pagination.types';