@eml-payments/ui-kit 1.7.8 → 1.8.0

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

@@ -0,0 +1,3 @@
+import type { PageSizeSelectorProps, PaginationControlsProps } from './PaginationControls.types';
+export declare const PageSizeSelector: ({ id, value, onChange, options, label, className, size, }: PageSizeSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationFooter: <T>({ table, tableId, paginationMode, onPageSizeChange, totalServerRows, onNextPage, onPrevPage, }: PaginationControlsProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SelectWrapper } from '../../SelectWrapper';
+import { cn } from '../../../lib/utils';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import { Button } from '../../Button';
+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" }) })] }));
+};
+export const PaginationFooter = ({ table, tableId, paginationMode = 'client', onPageSizeChange, totalServerRows, onNextPage, onPrevPage, }) => {
+    const { pageIndex, pageSize } = table.getState().pagination;
+    const totalRows = paginationMode === 'server' ? (totalServerRows !== null && totalServerRows !== void 0 ? totalServerRows : 0) : table.getFilteredRowModel().rows.length;
+    const startRow = pageIndex * pageSize + 1;
+    const endRow = 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) => {
+                    const newSize = Number(val);
+                    table.setPageSize(newSize);
+                    onPageSizeChange === null || onPageSizeChange === void 0 ? void 0 : onPageSizeChange(newSize);
+                }, 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", className: cn({ '!bg-transparent': !table.getCanPreviousPage() }), onClick: onPrevPage, disabled: !table.getCanPreviousPage(), children: _jsx(FaChevronLeft, { className: "!w-3 !h-3" }) }), _jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Next page", onClick: onNextPage, className: cn({ '!bg-transparent': !table.getCanNextPage() }), disabled: !table.getCanNextPage(), children: _jsx(FaChevronRight, { className: "w-3! h-3!" }) })] }))] }));
+};

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

@@ -0,0 +1,24 @@
+import type { Table } from '@tanstack/react-table';
+import type { SelectWrapperProps } from '../../SelectWrapper';
+import { PaginationMode } from '../Table.types';
+export interface PaginationControlsProps<T> {
+    tableId: string;
+    table: Table<T>;
+    paginationMode?: PaginationMode;
+    totalServerRows?: number;
+    pageSizeOptions?: string[];
+    onPageSizeChange?: (size: number) => void;
+    onNextPage: () => void;
+    onPrevPage: () => void;
+    canNextPage: boolean;
+    canPrevPage: boolean;
+}
+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/PaginationControls.types.js

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

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

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

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { flexRender } from '@tanstack/react-table';
+import { classNames } from '../../utils/classNames';
+import { PaginationFooter } from './Pagination/PaginationControls';
+import { useTableController } from './hooks/useTableController';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { DropdownWrapper } from '../DropdownWrapper';
+import { FiMoreHorizontal } from 'react-icons/fi';
+import { Button } from '../Button';
+export function Table(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { table, setPageSize, showHeader, height, virtualizationEnabled, rowVirtualizer, hasNextPage, parentScrollRef, loaderRef, infiniteScroll, ...pagination } = useTableController(props);
+    let tableContent;
+    const noResultsMessage = props.isSearchActive
+        ? ((_a = props.noSearchResultsMessage) !== null && _a !== void 0 ? _a : 'No results meet your search criteria')
+        : ((_b = props.noRowsMessage) !== null && _b !== void 0 ? _b : 'No rows to display');
+    if (props.isLoading && props.showSkeletonRows) {
+        tableContent = Array.from({ length: 3 }).map(() => (_jsx("tr", { className: "border-t animate-pulse", children: table.getVisibleFlatColumns().map((__c) => (_jsx("td", { className: "px-4 py-2", children: _jsx("div", { className: "h-4 w-3/4 bg-(--uikit-tertiary) rounded" }) }, `skeleton-cell-${__c.id}`))) }, "skeleton-row")));
+    }
+    else if (!virtualizationEnabled &&
+        table.getRowModel().rows.length === 0 &&
+        !props.isLoading &&
+        (!(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled) || !hasNextPage)) {
+        tableContent = (_jsx("tr", { children: _jsx("td", { colSpan: table.getVisibleFlatColumns().length + (props.tableActionsDropdown ? 1 : 0), className: "px-4 py-8 text-center text-muted-foreground", children: noResultsMessage }) }));
+    }
+    else if (!virtualizationEnabled) {
+        const renderRow = (row) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            const rows = [];
+            const isRowClickable = (_a = props.isRowClickable) === null || _a === void 0 ? void 0 : _a.call(props, row.original);
+            if (row.getIsGrouped() && row.groupingColumnId) {
+                const column = table.getColumn(row.groupingColumnId);
+                const bgColor = (_c = (_b = column === null || column === void 0 ? void 0 : column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.bgColor) !== null && _c !== void 0 ? _c : 'transparent';
+                rows.push(_jsx("tr", { className: "border-none", children: _jsx("td", { colSpan: table.getVisibleLeafColumns().length, className: "p-0", children: _jsx("div", { className: "px-4 py-4 text-sm text-muted-foreground", style: { backgroundColor: bgColor }, children: row.getGroupingValue(row.groupingColumnId) }) }) }, `group-${row.id}`));
+                row.subRows.forEach((subRow) => {
+                    rows.push(...renderRow(subRow));
+                });
+            }
+            else {
+                rows.push(_jsxs("tr", { className: classNames('border-t', isRowClickable && 'cursor-pointer', row.getIsSelected() && 'bg-(--uikit-primary-10)'), onClick: () => { var _a; return isRowClickable && ((_a = props.onRowClick) === null || _a === void 0 ? void 0 : _a.call(props, row.original)); }, children: [row.getVisibleCells().map((cell) => {
+                            const width = cell.column.getSize();
+                            return (_jsx("td", { style: { width }, className: cell.column.id === 'select' ? 'p-1' : 'p-4', children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                        }), props.tableActionsDropdown && (_jsx("td", { className: "w-[40px] px-2 py-2 text-right", children: _jsx(DropdownWrapper, { structure: (_d = props.tableActionsDropdown.structure) !== null && _d !== void 0 ? _d : 'default', options: props.tableActionsDropdown.getOptions(row.original), menuAlignment: props.tableActionsDropdown.menuAlignment, isTriggerElementDisabled: typeof props.tableActionsDropdown.isDisabled === 'function'
+                                    ? props.tableActionsDropdown.isDisabled(row.original)
+                                    : props.tableActionsDropdown.isDisabled, triggerElement: (_g = (_f = (_e = props.tableActionsDropdown).renderCustomTrigger) === null || _f === void 0 ? void 0 : _f.call(_e, row.original)) !== null && _g !== void 0 ? _g : (_jsx(Button, { "aria-label": "Open actions menu", title: "Open actions menu", size: "icon", variant: "ghost", disabled: typeof props.tableActionsDropdown.isDisabled === 'function'
+                                        ? props.tableActionsDropdown.isDisabled(row.original)
+                                        : ((_h = props.tableActionsDropdown.isDisabled) !== null && _h !== void 0 ? _h : false), className: "p-1 focus-visible:outline-hidden focus-visible:ring-0", children: _jsx(FiMoreHorizontal, { size: 16 }) })) }) }))] }, row.original[((_j = props.rowIdKey) !== null && _j !== void 0 ? _j : 'id')]));
+            }
+            return rows;
+        };
+        tableContent = table.getRowModel().rows.flatMap(renderRow);
+    }
+    const virtualItems = virtualizationEnabled && rowVirtualizer ? rowVirtualizer.getVirtualItems() : [];
+    const colSpanFull = table.getVisibleFlatColumns().length + (props.tableActionsDropdown ? 1 : 0);
+    const paddingTop = virtualItems.length ? virtualItems[0].start : 0;
+    const lastVirtual = virtualItems[virtualItems.length - 1];
+    const totalSize = (_d = (_c = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.getTotalSize) === null || _c === void 0 ? void 0 : _c.call(rowVirtualizer)) !== null && _d !== void 0 ? _d : 0;
+    const end = lastVirtual ? lastVirtual.end : 0;
+    const paddingBottom = Math.max(totalSize - end, 0);
+    const tableRows = table.getRowModel().rows;
+    const isTrulyEmpty = tableRows.length === 0 && !props.isLoading && !hasNextPage;
+    return (_jsxs("div", { ref: parentScrollRef, style: { height }, className: "relative w-full overflow-auto", children: [props.isLoading && (_jsx("div", { className: classNames('mui-loader', showHeader ? 'mt-4' : 'mt-0') })), _jsx("div", { className: "rounded-t-(--uikit-radius) overflow-y-hidden overflow-x-auto", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed bg-[#ffffff]', props.className), role: "table", id: props.id, children: [showHeader && (_jsx("thead", { className: "bg-(--uikit-tertiary)", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { className: "p-4", children: [headerGroup.headers.map((header) => {
+                                        return (_jsx("th", { scope: "col", style: { width: header.getSize() }, className: classNames('select-none text-[14px] font-bold ', header.id === 'select' ? 'p-0' : ' p-4 text-left cursor-pointer'), onClick: !(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled) && 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()), !(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled) && header.column.getCanSort() && (_jsx("span", { className: "text-xs", children: {
+                                                            asc: _jsx(FaChevronUp, {}),
+                                                            desc: _jsx(FaChevronDown, {}),
+                                                        }[header.column.getIsSorted()] || null }))] }) }, header.id));
+                                    }), props.tableActionsDropdown && _jsx("th", { className: "w-[40px] px-2 py-2 text-right" })] }, headerGroup.id))) })), _jsx("tbody", { 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: noResultsMessage }) })), virtualItems.map((vi) => {
+                                        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                                        const isLoaderRow = vi.index >= tableRows.length;
+                                        if (isLoaderRow) {
+                                            return (_jsx("tr", { className: "border-t", children: _jsx("td", { colSpan: colSpanFull, className: "px-4 py-2", children: hasNextPage
+                                                        ? ((_a = infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.loadingMoreMessage) !== null && _a !== void 0 ? _a : 'Loading more...')
+                                                        : ((_b = infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.noMoreDataMessage) !== null && _b !== void 0 ? _b : 'Nothing more to load') }) }, `loader-${vi.key}`));
+                                        }
+                                        const row = tableRows[vi.index];
+                                        const isRowClickable = (_c = props.isRowClickable) === null || _c === void 0 ? void 0 : _c.call(props, row.original);
+                                        return (_jsxs("tr", { className: classNames('border-t', isRowClickable && 'cursor-pointer', (row === null || row === void 0 ? void 0 : row.getIsSelected()) && 'bg-(--uikit-primary-10)'), onClick: () => { var _a; return isRowClickable && ((_a = props.onRowClick) === null || _a === void 0 ? void 0 : _a.call(props, row.original)); }, children: [row === null || row === void 0 ? void 0 : row.getVisibleCells().map((cell) => {
+                                                    const width = cell.column.getSize();
+                                                    return (_jsx("td", { style: { width }, className: cell.column.id === 'select' ? 'p-1' : 'p-4', children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                                }), props.tableActionsDropdown && (_jsx("td", { className: "w-[40px] px-2 py-2 text-right", children: _jsx(DropdownWrapper, { structure: (_d = props.tableActionsDropdown.structure) !== null && _d !== void 0 ? _d : 'default', options: props.tableActionsDropdown.getOptions(row.original), menuAlignment: props.tableActionsDropdown.menuAlignment, isTriggerElementDisabled: typeof props.tableActionsDropdown.isDisabled === 'function'
+                                                            ? props.tableActionsDropdown.isDisabled(row.original)
+                                                            : props.tableActionsDropdown.isDisabled, triggerElement: (_g = (_f = (_e = props.tableActionsDropdown).renderCustomTrigger) === null || _f === void 0 ? void 0 : _f.call(_e, row.original)) !== null && _g !== void 0 ? _g : (_jsx(Button, { "aria-label": "Open actions menu", title: "Open actions menu", size: "icon", variant: "ghost", disabled: typeof props.tableActionsDropdown.isDisabled ===
+                                                                'function'
+                                                                ? props.tableActionsDropdown.isDisabled(row.original)
+                                                                : ((_h = props.tableActionsDropdown.isDisabled) !== null && _h !== void 0 ? _h : false), className: "p-1 focus-visible:outline-hidden focus-visible:ring-0", children: _jsx(FiMoreHorizontal, { size: 16 }) })) }) }))] }, row.original[((_j = props.rowIdKey) !== null && _j !== void 0 ? _j : 'id')]));
+                                    }), _jsx("tr", { style: { height: `${paddingBottom}px` }, children: _jsx("td", { colSpan: colSpanFull }) })] })) : (_jsxs(_Fragment, { children: [tableContent, (infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled) && !isTrulyEmpty && (_jsx("tr", { ref: loaderRef, className: "border-t", children: _jsx("td", { colSpan: colSpanFull, className: "px-4 py-2", children: props.isLoading || hasNextPage
+                                                ? ((_e = infiniteScroll.loadingMoreMessage) !== null && _e !== void 0 ? _e : 'Loading more...')
+                                                : ((_f = infiniteScroll.noMoreDataMessage) !== null && _f !== void 0 ? _f : 'Nothing more to load') }) }))] })) })] }) }), !((_g = props.infiniteScroll) === null || _g === void 0 ? void 0 : _g.enabled) && (_jsx(PaginationFooter, { tableId: props.id, table: table, paginationMode: props.paginationMode, totalServerRows: props.totalServerRows, onPageSizeChange: setPageSize, ...pagination }))] }));
+}

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

@@ -0,0 +1,31 @@
+import { Table } from './Table';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof Table>;
+export declare const Basic: Story;
+export declare const NoRows: Story;
+export declare const LoadingWithSkeleton: Story;
+export declare const ClientPagination: Story;
+export declare const ServerSidePagination: Story;
+export declare const WithCheckboxSelection: Story;
+export declare const WithDisabledSelection: Story;
+export declare const WithSingleRowSelection: Story;
+export declare const WithDefaultRowsSelected: Story;
+export declare const FlexColumnWidths: Story;
+export declare const WithControlledSorting: Story;
+export declare const WithRowActionsDropdown: Story;
+export declare const WithPartiallyDisabledRowActionsDropdown: Story;
+export declare const WithDisabledRowActionsDropdownItem: Story;
+export declare const WithRowClickHandler: Story;
+export declare const WithHiddenHeader: Story;
+export declare const GroupedByDate: Story;
+export declare const WithSearch: Story;
+export declare const ServerSideSearch: Story;
+export declare const ClientPaginationWithQueryParams: StoryObj;
+export declare const ServerPaginationWithQueryParams: StoryObj;
+export declare const TwoTablesWithQueryParams: StoryObj;
+export declare const InfiniteScrollVirtualized: StoryObj;
+export declare const InfiniteScrollNonVirtual: StoryObj;
+export declare const NoRowsInfiniteScrollNonVirtual: StoryObj;
+export declare const NoRowsInfiniteScrollVirtualized: StoryObj;

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

@@ -0,0 +1,479 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Table } from './Table';
+import { SearchInput } from '../SearchInput';
+import { useLocation } from 'react-router-dom';
+const CurrentUrl = () => {
+    const location = useLocation();
+    return _jsxs("div", { children: ["Current URL: ", location.search] });
+};
+const data = Array.from({ length: 10 }).map((_, i) => ({
+    id: `user-${i + 1}`,
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    role: i % 2 === 0 ? 'Admin' : 'User',
+}));
+const disabledIds = new Set(['user-1', 'user-2', 'user-3']);
+const columns = [
+    {
+        accessorKey: 'id',
+        header: 'ID',
+        flex: 1,
+    },
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        flex: 1,
+    },
+    {
+        accessorKey: 'email',
+        header: 'Email',
+        cell: ({ row }) => (_jsx("a", { href: `mailto:${row.original.email}`, className: "text-blue-600 underline", children: row.original.email })),
+        flex: 1,
+    },
+    {
+        accessorKey: 'role',
+        header: 'Role',
+        cell: ({ row }) => {
+            const role = row.original.role;
+            return _jsx("span", { className: role === 'Admin' ? 'text-red-500 font-bold' : '', children: role });
+        },
+        flex: 1,
+    },
+];
+const meta = {
+    title: 'UIKit/Table',
+    component: Table,
+    tags: ['autodocs'],
+    render: () => _jsx(Table, { id: "example-table", data: data, columns: columns }),
+};
+export default meta;
+export const Basic = {
+    render: () => _jsx(Table, { id: "example-table", data: data, columns: columns }),
+};
+export const NoRows = {
+    render: () => _jsx(Table, { id: "example-table", data: [], columns: columns }),
+};
+export const LoadingWithSkeleton = {
+    render: () => _jsx(Table, { id: "example-table", data: [], columns: columns, isLoading: true, showSkeletonRows: true, rowsPerPage: 5 }),
+};
+export const ClientPagination = {
+    render: () => _jsx(Table, { id: "example-table", data: data, columns: columns, paginationMode: "client", rowsPerPage: 5 }),
+};
+const fetchServerData = (pageIndex, pageSize, query) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            const start = pageIndex * pageSize;
+            const data = Array.from({ length: pageSize }).map((_, i) => {
+                const id = start + i + 1;
+                return {
+                    id: `user-${id}`,
+                    name: `User ${id}`,
+                    email: `user${id}@example.com`,
+                    role: id % 2 === 0 ? 'Admin' : 'User',
+                };
+            });
+            const filteredData = query
+                ? data.filter((row) => row.name.toLowerCase().includes(query.toLowerCase()))
+                : data;
+            resolve(filteredData);
+        }, 500);
+    });
+};
+export const ServerSidePagination = {
+    render: () => {
+        const [data, setData] = useState([]);
+        const [isLoading, setIsLoading] = useState(false);
+        const fetchData = useCallback(async (pageIndex, pageSize) => {
+            setIsLoading(true);
+            const results = await fetchServerData(pageIndex, pageSize);
+            setData(results);
+            setIsLoading(false);
+        }, []);
+        return (_jsx(Table, { id: "server-table", data: data, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchData, isLoading: isLoading }));
+    },
+};
+const handleSelectionChange = (selectedRowIds) => {
+    console.log('Selected Row IDs:', selectedRowIds);
+    // Update your state or perform actions based on selected rows
+};
+export const WithCheckboxSelection = {
+    render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, checkboxPosition: "start", paginationMode: "client", onSelectionChange: handleSelectionChange })),
+};
+export const WithDisabledSelection = {
+    render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, checkboxPosition: "start", enableRowSelection: (row) => row.original.role !== 'Admin' })),
+};
+export const WithSingleRowSelection = {
+    render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, isMultiRowSelection: false })),
+};
+export const WithDefaultRowsSelected = {
+    render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, selectedRowIds: ['user-1', 'user-3'] })),
+};
+export const FlexColumnWidths = {
+    render: () => {
+        const testColumns = [
+            { accessorKey: 'id', header: 'ID', flex: 1 },
+            { accessorKey: 'name', header: 'Name', flex: 2 },
+            { accessorKey: 'email', header: 'Email', flex: 3 },
+            { accessorKey: 'role', header: 'Role', flex: 1 },
+        ];
+        return (_jsx(Table, { id: "example-table", data: data, columns: testColumns, paginationMode: "client", checkboxSelection: false, rowsPerPage: 5 }));
+    },
+};
+export const WithControlledSorting = {
+    render: () => {
+        const [sorting, setSorting] = useState([{ id: 'name', desc: true }]);
+        return (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, paginationMode: "client", sorting: sorting, onSortingChange: setSorting, rowsPerPage: 5 }));
+    },
+};
+export const WithRowActionsDropdown = {
+    render: () => {
+        const getOptions = (user) => [
+            {
+                label: 'Edit',
+                onClick: () => alert(`Edit ${user.name}`),
+            },
+            {
+                label: 'Delete',
+                onClick: () => alert(`Delete ${user.name}`),
+            },
+        ];
+        return (_jsx(Table, { id: "example-table", data: data, columns: columns, tableActionsDropdown: {
+                getOptions,
+                structure: 'default',
+                menuAlignment: 'end',
+            } }));
+    },
+};
+export const WithPartiallyDisabledRowActionsDropdown = {
+    render: () => {
+        const getOptions = (user) => [
+            {
+                label: 'Edit',
+                onClick: () => alert(`Edit ${user.name}`),
+            },
+            {
+                label: 'Delete',
+                onClick: () => alert(`Delete ${user.name}`),
+            },
+        ];
+        return (_jsx(Table, { id: "example-table", data: data, columns: columns, tableActionsDropdown: {
+                getOptions,
+                structure: 'default',
+                menuAlignment: 'end',
+                isDisabled: (row) => disabledIds.has(row.id),
+            } }));
+    },
+};
+export const WithDisabledRowActionsDropdownItem = {
+    render: () => {
+        const getOptions = (user) => [
+            {
+                label: 'Edit',
+                onClick: () => alert(`Edit ${user.name}`),
+            },
+            {
+                label: 'Delete',
+                onClick: () => alert(`Delete ${user.name}`),
+                disabled: user.role === 'Admin',
+            },
+        ];
+        return (_jsx(Table, { id: "example-table", data: data, columns: columns, tableActionsDropdown: {
+                getOptions,
+                structure: 'default',
+                menuAlignment: 'end',
+            } }));
+    },
+};
+export const WithRowClickHandler = {
+    render: () => {
+        return (_jsx(Table, { id: "clickable-rows-table", data: data, columns: columns, isRowClickable: (row) => row.role !== 'Admin', onRowClick: (row) => {
+                console.log('Row clicked:', row);
+                alert(`Clicked on ${row.name}`);
+            } }));
+    },
+};
+export const WithHiddenHeader = {
+    render: () => _jsx(Table, { id: "header-hidden-table", data: data, columns: columns, showHeader: false }),
+};
+const dates = [
+    new Date().toISOString(),
+    new Date(Date.now() + 86400000).toISOString(),
+    new Date(Date.now() + 2 * 86400000).toISOString(),
+];
+const groupingData = Array.from({ length: 5 }).map((_, i) => ({
+    id: `user-${i + 1}`,
+    date: dates[i % dates.length],
+    name: `User ${i + 1}`,
+    amount: Math.floor(Math.random() * 1000) + 100,
+}));
+const groupingColumns = [
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        flex: 1,
+    },
+    {
+        accessorKey: 'amount',
+        header: 'Amount',
+        cell: ({ row }) => (_jsxs("span", { style: { textAlign: 'right', display: 'block' }, children: ["$", row.original.amount.toFixed(2)] })),
+        flex: 1,
+    },
+    {
+        accessorKey: 'date',
+        header: 'Last Updated',
+        flex: 1,
+        enableGrouping: true,
+        getGroupingValue: (row) => new Date(row.date).toLocaleDateString('en-GB'),
+        meta: {
+            bgColor: '#f5f5f5',
+        },
+    },
+];
+export const GroupedByDate = {
+    render: () => (_jsx(Table, { id: "header-hidden-table", data: groupingData, columns: groupingColumns, showHeader: false, grouping: ['date'] })),
+};
+function useSearch(data, selector, minChars = 3) {
+    const [query, setQuery] = useState('');
+    const isSearchActive = query.trim().length >= minChars;
+    const filteredData = useMemo(() => {
+        if (!isSearchActive)
+            return data;
+        const lowerQuery = query.toLowerCase();
+        return data.filter((item) => selector(item).toLowerCase().includes(lowerQuery));
+    }, [query, isSearchActive, data, selector]);
+    return { query, setQuery, filteredData, isSearchActive };
+}
+export const WithSearch = {
+    render: () => {
+        const { setQuery, filteredData, isSearchActive } = useSearch(data, (user) => user.name);
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { style: { width: '300px' }, children: _jsx(SearchInput, { onSearch: (q) => setQuery(q), onClear: () => setQuery(''), placeholder: "Search by name..." }) }), _jsx(Table, { id: "search-table", data: filteredData, columns: columns, isSearchActive: isSearchActive })] }));
+    },
+};
+export const ServerSideSearch = {
+    render: () => {
+        const [data, setData] = useState([]);
+        const [isLoading, setIsLoading] = useState(false);
+        const [query, setQuery] = useState('');
+        const fetchData = useCallback(async (pageIndex, pageSize) => {
+            setIsLoading(true);
+            const results = await fetchServerData(pageIndex, pageSize, query);
+            setData(results);
+            setIsLoading(false);
+        }, [query]);
+        useEffect(() => {
+            fetchData(0, 10);
+        }, [fetchData]);
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { style: { width: '300px' }, children: _jsx(SearchInput, { onSearch: (q) => setQuery(q), onClear: () => setQuery(''), placeholder: "Search users..." }) }), _jsx(Table, { id: "server-search-table", data: data, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchData, isLoading: isLoading, isSearchActive: query.trim().length >= 3 })] }));
+    },
+};
+// Note: Does not update state search params
+export const ClientPaginationWithQueryParams = {
+    args: {
+        initialPageNo: 2,
+        initialPageSize: 5,
+    },
+    decorators: [
+        (Story, context) => {
+            const { initialPageNo, initialPageSize } = context.args;
+            const query = `?clients_pageNo=${initialPageNo}&clients_pageSize=${initialPageSize}`;
+            window.history.replaceState({}, '', query);
+            return _jsx(Story, {});
+        },
+    ],
+    render: () => (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsx(Table, { id: "clients", data: data, columns: columns, paginationMode: "client", showHeader: true })] })),
+};
+// Note: Does not update state search params
+export const ServerPaginationWithQueryParams = {
+    args: {
+        initialPageNo: 2,
+        initialPageSize: 5,
+    },
+    decorators: [
+        (Story, context) => {
+            const { initialPageNo, initialPageSize } = context.args;
+            const query = `?clients_pageNo=${initialPageNo}&clients_pageSize=${initialPageSize}`;
+            window.history.replaceState({}, '', query);
+            return _jsx(Story, {});
+        },
+    ],
+    render: () => {
+        const [data, setData] = useState([]);
+        const [isLoading, setIsLoading] = useState(false);
+        const fetchData = useCallback(async (pageIndex, pageSize) => {
+            setIsLoading(true);
+            const results = await fetchServerData(pageIndex, pageSize);
+            setData(results);
+            setIsLoading(false);
+        }, []);
+        return (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsx(Table, { id: "clients", data: data, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchData, isLoading: isLoading, showHeader: true })] }));
+    },
+};
+// Note: Does not update state search params
+export const TwoTablesWithQueryParams = {
+    args: {
+        clientsInitialPageNo: 2,
+        clientsInitialPageSize: 5,
+        usersInitialPageNo: 3,
+        usersInitialPageSize: 10,
+    },
+    decorators: [
+        (Story, context) => {
+            const { clientsInitialPageNo, clientsInitialPageSize, usersInitialPageNo, usersInitialPageSize } = context.args;
+            const query = `?clients_pageNo=${clientsInitialPageNo}&clients_pageSize=${clientsInitialPageSize}&users_pageNo=${usersInitialPageNo}&users_pageSize=${usersInitialPageSize}`;
+            window.history.replaceState({}, '', query);
+            return _jsx(Story, {});
+        },
+    ],
+    render: () => {
+        const [usersData, setUsersData] = useState([]);
+        const [isLoadingUsers, setIsLoadingUsers] = useState(false);
+        const fetchUsersData = useCallback(async (pageIndex, pageSize) => {
+            setIsLoadingUsers(true);
+            const results = await fetchServerData(pageIndex, pageSize);
+            setUsersData(results);
+            setIsLoadingUsers(false);
+        }, []);
+        return (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsxs("div", { style: { display: 'flex', gap: '2rem' }, children: [_jsx(Table, { id: "clients", data: data, columns: columns, paginationMode: "client", showHeader: true }), _jsx(Table, { id: "users", data: usersData, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchUsersData, isLoading: isLoadingUsers, showHeader: true })] })] }));
+    },
+};
+function fetchInfiniteUsers(limit, offset = 0) {
+    const start = offset * limit;
+    const rows = Array.from({ length: limit }).map((_, i) => {
+        const idx = start + i + 1;
+        return {
+            id: `user-${idx}`,
+            name: `User ${idx}`,
+            email: `user${idx}@example.com`,
+            role: idx % 2 === 0 ? 'Admin' : 'User',
+        };
+    });
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            const nextOffset = offset + 1;
+            const maxPages = Math.ceil(100 / limit);
+            const hasMore = nextOffset < maxPages;
+            resolve({ rows, nextOffset, hasMore });
+        }, 300);
+    });
+}
+export const InfiniteScrollVirtualized = {
+    name: 'Infinite Scroll — Virtualized',
+    render: () => {
+        const [rows, setRows] = useState([]);
+        const [nextOffset, setNextOffset] = useState(0);
+        const [hasNextPage, setHasNextPage] = useState(true);
+        const [isFetchingNextPage, setIsFetchingNextPage] = useState(false);
+        useEffect(() => {
+            (async () => {
+                setIsFetchingNextPage(true);
+                const res = await fetchInfiniteUsers(20, 0);
+                setRows(res.rows);
+                setNextOffset(res.nextOffset);
+                setHasNextPage(res.hasMore);
+                setIsFetchingNextPage(false);
+            })();
+        }, []);
+        const fetchNextPage = useCallback(async () => {
+            if (isFetchingNextPage || !hasNextPage)
+                return;
+            setIsFetchingNextPage(true);
+            const res = await fetchInfiniteUsers(20, nextOffset);
+            setRows((prev) => [...prev, ...res.rows]);
+            setNextOffset(res.nextOffset);
+            setHasNextPage(res.hasMore);
+            setIsFetchingNextPage(false);
+        }, [isFetchingNextPage, hasNextPage, nextOffset]);
+        return (_jsx("div", { children: _jsx(Table, { id: "infinite-virtualized", height: 500, data: rows, columns: columns, showHeader: true, infiniteScroll: {
+                    enabled: true,
+                    hasNextPage,
+                    isFetchingNextPage,
+                    fetchNextPage,
+                }, virtualization: {
+                    enabled: true,
+                    rowEstimate: 48,
+                    overscan: 6,
+                } }) }));
+    },
+};
+export const InfiniteScrollNonVirtual = {
+    name: 'Infinite Scroll — Non-virtual',
+    render: () => {
+        const [rows, setRows] = useState([]);
+        const [nextOffset, setNextOffset] = useState(0);
+        const [hasNextPage, setHasNextPage] = useState(true);
+        const [isFetchingNextPage, setIsFetchingNextPage] = useState(false);
+        useEffect(() => {
+            (async () => {
+                setIsFetchingNextPage(true);
+                const res = await fetchInfiniteUsers(20, 0);
+                setRows(res.rows);
+                setNextOffset(res.nextOffset);
+                setHasNextPage(res.hasMore);
+                setIsFetchingNextPage(false);
+            })();
+        }, []);
+        const fetchNextPage = useCallback(async () => {
+            if (isFetchingNextPage || !hasNextPage)
+                return;
+            setIsFetchingNextPage(true);
+            const res = await fetchInfiniteUsers(20, nextOffset);
+            setRows((prev) => [...prev, ...res.rows]);
+            setNextOffset(res.nextOffset);
+            setHasNextPage(res.hasMore);
+            setIsFetchingNextPage(false);
+        }, [isFetchingNextPage, hasNextPage, nextOffset]);
+        return (_jsx("div", { children: _jsx(Table, { id: "infinite-nonvirtual", height: "80vh", data: rows, columns: columns, showHeader: true, infiniteScroll: {
+                    enabled: true,
+                    hasNextPage,
+                    isFetchingNextPage,
+                    fetchNextPage,
+                    rootMarginPx: 300,
+                }, virtualization: {
+                    enabled: false,
+                } }) }));
+    },
+};
+export const NoRowsInfiniteScrollNonVirtual = {
+    name: 'Empty State — Infinite Scroll (Non-virtual)',
+    render: () => {
+        const [rows] = useState([]);
+        const [hasNextPage] = useState(false);
+        const [isFetchingNextPage] = useState(false);
+        const fetchNextPage = useCallback(async () => {
+            // no-op: truly empty scenario
+            return;
+        }, []);
+        return (_jsx("div", { children: _jsx(Table, { id: "no-rows-infinite-nonvirtual", height: 500, data: rows, columns: columns, showHeader: true, isSearchActive: false, isLoading: false, noRowsMessage: "No rows to display", infiniteScroll: {
+                    enabled: true,
+                    hasNextPage,
+                    isFetchingNextPage,
+                    fetchNextPage,
+                    rootMarginPx: 300,
+                }, virtualization: {
+                    enabled: false,
+                } }) }));
+    },
+};
+export const NoRowsInfiniteScrollVirtualized = {
+    name: 'Empty State — Infinite Scroll (Virtualized)',
+    render: () => {
+        const [rows] = useState([]);
+        const [hasNextPage] = useState(false);
+        const [isFetchingNextPage] = useState(false);
+        const fetchNextPage = useCallback(async () => {
+            // no-op: truly empty scenario
+            return;
+        }, []);
+        return (_jsx("div", { children: _jsx(Table, { id: "no-rows-infinite-virtualized", height: 500, data: rows, columns: columns, showHeader: true, isSearchActive: false, isLoading: false, noRowsMessage: "No rows to display", infiniteScroll: {
+                    enabled: true,
+                    hasNextPage,
+                    isFetchingNextPage,
+                    fetchNextPage,
+                }, virtualization: {
+                    enabled: true,
+                    rowEstimate: 48,
+                    overscan: 6,
+                } }) }));
+    },
+};

package/dist/src/components/Table/hooks/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>[] | undefined;
+    flatData?: T[] | undefined;
+    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/hooks/useInfiniteScrolling.js

@@ -0,0 +1,96 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+export function useInfiniteScrolling(params) {
+    var _a;
+    const { dataPages, flatData, infiniteScroll, virtualization, parentScrollRef, loaderRef } = params;
+    const isInfinite = !!(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled);
+    const hasNextPage = !!(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.hasNextPage);
+    const isFetchingNextPage = !!(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 = !!(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 = virtualItems.length ? virtualItems[virtualItems.length - 1].index : -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 : 300}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/hooks/usePaginationController.d.ts

@@ -0,0 +1,16 @@
+import type { Table } from '@tanstack/react-table';
+import { PaginationMode } from '../Table.types';
+interface UsePaginationControllerOptions<T> {
+    table: Table<T>;
+    paginationMode: PaginationMode;
+    onRefetch?: (pageIndex: number, pageSize: number) => void;
+}
+export declare function usePaginationController<T>({ table, paginationMode, onRefetch }: UsePaginationControllerOptions<T>): {
+    pageIndex: number;
+    pageSize: number;
+    canNextPage: boolean;
+    canPrevPage: boolean;
+    onNextPage: () => void;
+    onPrevPage: () => void;
+};
+export {};

package/dist/src/components/Table/hooks/usePaginationController.js

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useMemo } from 'react';
+export function usePaginationController({ table, paginationMode, onRefetch }) {
+    const { pageIndex, pageSize } = table.getState().pagination;
+    const canNextPage = table.getCanNextPage();
+    const canPrevPage = table.getCanPreviousPage();
+    const onNextPage = useCallback(() => {
+        if (canNextPage) {
+            table.nextPage();
+        }
+    }, [canNextPage, table]);
+    const onPrevPage = useCallback(() => {
+        if (canPrevPage) {
+            table.previousPage();
+        }
+    }, [canPrevPage, table]);
+    // Only refetch in server mode
+    useEffect(() => {
+        if (paginationMode === 'server' && onRefetch) {
+            onRefetch(pageIndex, pageSize);
+        }
+    }, [paginationMode, pageIndex, pageSize, onRefetch]);
+    return useMemo(() => ({
+        pageIndex,
+        pageSize,
+        canNextPage,
+        canPrevPage,
+        onNextPage,
+        onPrevPage,
+    }), [pageIndex, pageSize, canNextPage, canPrevPage, onNextPage, onPrevPage]);
+}

package/dist/src/components/Table/hooks/useTableController.d.ts

@@ -0,0 +1,26 @@
+import { type SortingState } from '@tanstack/react-table';
+import type { TableProps } from '../Table.types';
+export declare function useTableController<T extends {
+    id: string;
+}>({ id, height, data, columns, checkboxSelection, checkboxPosition, paginationMode, sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage, isMultiRowSelection, selectedRowIds, rowIdKey, totalServerRows, onRefetch, showHeader, grouping, infiniteScroll, virtualization, }: TableProps<T>): {
+    pageIndex: number;
+    pageSize: number;
+    canNextPage: boolean;
+    canPrevPage: boolean;
+    onNextPage: () => void;
+    onPrevPage: () => void;
+    table: import("@tanstack/table-core").Table<T>;
+    height: string | number | undefined;
+    showHeader: boolean;
+    grouping: string[] | undefined;
+    setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setPageIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    sorting: SortingState;
+    virtualizationEnabled: boolean;
+    rowVirtualizer: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element> | undefined;
+    hasNextPage: boolean;
+    parentScrollRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    loaderRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
+    infiniteScroll: import("..").InfiniteScrollOptions | undefined;
+    virtualization: import("..").VirtualizationOptions | undefined;
+};

package/dist/src/components/Table/hooks/useTableController.js

@@ -0,0 +1,146 @@
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getGroupedRowModel, getExpandedRowModel, } from '@tanstack/react-table';
+import { applyFlexSizes, getCheckboxSelectionColumn } from '../table.helpers';
+import { usePaginationController } from './usePaginationController';
+import { useUrlPaginationSync } from './useUrlPaginationSync';
+import { useInfiniteScrolling } from './useInfiniteScrolling';
+export function useTableController({ id, height, data, columns, checkboxSelection, checkboxPosition = 'start', paginationMode = 'client', sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage = 10, isMultiRowSelection = true, selectedRowIds, rowIdKey = 'id', totalServerRows, onRefetch, showHeader = true, grouping, infiniteScroll, virtualization, }) {
+    const safeData = Array.isArray(data) ? data : [];
+    const stableGrouping = useMemo(() => grouping !== null && grouping !== void 0 ? grouping : [], [grouping]);
+    const parentScrollRef = useRef(null);
+    const loaderRef = useRef(null);
+    const columnVisibility = useMemo(() => {
+        return Object.fromEntries(stableGrouping.map((columnId) => [columnId, false]));
+    }, [stableGrouping]);
+    const [containerWidth, setContainerWidth] = useState(0);
+    useLayoutEffect(() => {
+        if (!parentScrollRef.current)
+            return;
+        const ro = new ResizeObserver(([entry]) => {
+            setContainerWidth(entry.contentRect.width);
+        });
+        ro.observe(parentScrollRef.current);
+        return () => ro.disconnect();
+    }, []);
+    const [tableColumns, setTableColumns] = useState(() => applyFlexSizes(columns !== null && columns !== void 0 ? columns : [], containerWidth, !!(virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled)));
+    const [internalSorting, setInternalSorting] = useState(sorting !== null && sorting !== void 0 ? sorting : []);
+    const [internalRowSelection, setInternalRowSelection] = useState(() => {
+        if (selectedRowIds) {
+            return selectedRowIds.reduce((acc, id) => {
+                acc[id] = true;
+                return acc;
+            }, {});
+        }
+        return {};
+    });
+    const { pageIndex, setPageIndex, pageSize, setPageSize } = useUrlPaginationSync(rowsPerPage, id);
+    const isInfinite = !!(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled);
+    const dataPages = useMemo(() => {
+        if (!isInfinite) {
+            return undefined;
+        }
+        return [{ rows: safeData }];
+    }, [isInfinite, safeData.length]);
+    const infiniteOpts = useMemo(() => infiniteScroll, [infiniteScroll]);
+    const virtualizationOpts = useMemo(() => virtualization, [virtualization]);
+    const { allRows, virtualizationEnabled, rowVirtualizer, hasNextPage } = useInfiniteScrolling({
+        dataPages,
+        flatData: data,
+        infiniteScroll: infiniteOpts,
+        virtualization: virtualizationOpts,
+        parentScrollRef,
+        loaderRef,
+    });
+    const dataForTable = useMemo(() => (virtualizationEnabled || isInfinite ? allRows : safeData), [virtualizationEnabled, isInfinite, allRows, safeData]);
+    const table = useReactTable({
+        data: dataForTable,
+        columns: tableColumns,
+        getRowId: (row) => String(row[rowIdKey]),
+        state: {
+            ...(isInfinite ? {} : { pagination: { pageIndex, pageSize } }),
+            sorting: sorting !== null && sorting !== void 0 ? sorting : internalSorting,
+            rowSelection: internalRowSelection,
+            grouping: stableGrouping,
+            columnVisibility,
+        },
+        getSortedRowModel: getSortedRowModel(),
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: !isInfinite && paginationMode === 'client' ? getPaginationRowModel() : undefined,
+        manualPagination: !isInfinite && paginationMode === 'server',
+        autoResetPageIndex: false,
+        pageCount: !isInfinite && paginationMode === 'server' ? Math.ceil((totalServerRows !== null && totalServerRows !== void 0 ? totalServerRows : 0) / pageSize) : undefined,
+        onPaginationChange: (updater) => {
+            if (isInfinite)
+                return;
+            const next = typeof updater === 'function' ? updater({ pageIndex, pageSize }) : updater;
+            setPageIndex(next.pageIndex);
+            setPageSize(next.pageSize);
+        },
+        onSortingChange: (updater) => {
+            const nextSorting = typeof updater === 'function' ? updater(sorting !== null && sorting !== void 0 ? sorting : internalSorting) : updater;
+            setInternalSorting(nextSorting);
+            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(nextSorting);
+        },
+        enableRowSelection: enableRowSelection !== null && enableRowSelection !== void 0 ? enableRowSelection : true,
+        onRowSelectionChange: (updater) => {
+            const newSelection = typeof updater === 'function' ? updater(internalRowSelection) : updater;
+            setInternalRowSelection(newSelection);
+            if (onSelectionChange) {
+                const selectedIdsArray = Object.keys(newSelection).filter((id) => newSelection[id]);
+                onSelectionChange(selectedIdsArray);
+            }
+        },
+        enableMultiRowSelection: isMultiRowSelection,
+        getGroupedRowModel: getGroupedRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+    });
+    useEffect(() => {
+        if (paginationMode === 'none') {
+            setPageIndex(0);
+        }
+    }, [paginationMode, setPageIndex]);
+    const pagination = usePaginationController({
+        table,
+        paginationMode,
+        onRefetch,
+    });
+    const selectionColumn = useMemo(() => {
+        return checkboxSelection ? getCheckboxSelectionColumn(table) : null;
+    }, [checkboxSelection, table]);
+    useEffect(() => {
+        const normalized = applyFlexSizes(columns !== null && columns !== void 0 ? columns : [], containerWidth, !!(virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled));
+        let finalColumns;
+        if (checkboxSelection && selectionColumn) {
+            if (checkboxPosition === 'start') {
+                finalColumns = [selectionColumn, ...normalized];
+            }
+            else if (checkboxPosition === 'end') {
+                finalColumns = [...normalized, selectionColumn];
+            }
+            else {
+                finalColumns = normalized;
+            }
+        }
+        else {
+            finalColumns = normalized;
+        }
+        setTableColumns(finalColumns);
+    }, [columns, checkboxSelection, checkboxPosition, containerWidth, virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled]);
+    return {
+        table,
+        height,
+        showHeader,
+        grouping,
+        setPageSize,
+        setPageIndex,
+        sorting: sorting !== null && sorting !== void 0 ? sorting : internalSorting,
+        virtualizationEnabled,
+        rowVirtualizer,
+        hasNextPage,
+        parentScrollRef,
+        loaderRef,
+        infiniteScroll,
+        virtualization,
+        ...pagination,
+    };
+}

package/dist/src/types/index.d.ts

@@ -1 +1,2 @@
 export * from '../config/uikitConfig';
+export type { DateRange } from 'react-day-picker';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.7.8",
+	"version": "1.8.0",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
@@ -74,7 +74,7 @@
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.19",
 		"intl-tel-input": "^26.9.1",
-		"lucide-react": "^0.577.0",
+		"lucide-react": "^1.8.0",
 		"prettier": "^3.6.2",
 		"react": ">=18.0.0",
 		"react-day-picker": "^9.13.0",