@eml-payments/ui-kit 1.7.5 → 1.7.6

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

@@ -230,15 +230,48 @@ const CurrentUrl = () => {
     return (_jsxs("div", { style: { fontSize: 12, marginBottom: 8 }, children: ["Current URL: ", _jsx("code", { children: location.search })] }));
 };
 export const WithQueryParamsSync = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Single table with generic URL params "page" and "size". Default behavior when scoped is not provided or scoped={false}.',
+            },
+        },
+    },
     decorators: [
         (Story) => {
-            const query = `?clients_pageNo=2&clients_pageSize=5`;
+            const query = `?page=2&size=5`;
             globalThis.history.replaceState({}, '', query);
             return _jsx(Story, {});
         },
     ],
     render: () => (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsx(StandardTable, { id: "clients", data: data, columns: columns, paginationMode: "client" })] })),
 };
+function MultiTableWithScopedPaginationExample() {
+    const productsData = Array.from({ length: 20 }).map((_, i) => ({
+        id: `product-${i + 1}`,
+        name: `Product ${i + 1}`,
+        email: `product${i + 1}@example.com`,
+        role: i % 2 === 0 ? 'Featured' : 'Regular',
+    }));
+    return (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsxs("div", { style: { marginBottom: 40 }, children: [_jsx("h3", { style: { marginBottom: 8 }, children: "Users Table (scoped pagination)" }), _jsx(StandardTable, { id: "users", data: data, columns: columns, paginationMode: "client", rowsPerPage: 5, scoped: true })] }), _jsxs("div", { children: [_jsx("h3", { style: { marginBottom: 8 }, children: "Products Table (scoped pagination)" }), _jsx(StandardTable, { id: "products", data: productsData, columns: columns, paginationMode: "client", rowsPerPage: 5, scoped: true })] })] }));
+}
+export const WithScopedMultiTablePagination = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Multiple tables on one page, each with scoped URL params. When scoped={true}, each table uses its id to generate unique URL keys like usersPage/usersSize and productsPage/productsSize, enabling independent pagination state.',
+            },
+        },
+    },
+    decorators: [
+        (Story) => {
+            const query = `?usersPage=1&usersSize=5&productsPage=1&productsSize=5`;
+            globalThis.history.replaceState({}, '', query);
+            return _jsx(Story, {});
+        },
+    ],
+    render: () => _jsx(MultiTableWithScopedPaginationExample, {}),
+};
 /** Simulates a server fetch with latency. Used by server-side query-param stories. */
 async function fetchServerData(pageIndex, pageSize) {
     await new Promise((r) => setTimeout(r, 500));
@@ -267,31 +300,46 @@ function ServerPaginationWithQueryParamsExample() {
 export const ServerPaginationWithQueryParams = {
     decorators: [
         (Story) => {
-            globalThis.history.replaceState({}, '', '?clients_pageNo=2&clients_pageSize=5');
+            globalThis.history.replaceState({}, '', '?page=2&size=5');
             return _jsx(Story, {});
         },
     ],
     render: () => _jsx(ServerPaginationWithQueryParamsExample, {}),
 };
-function TwoTablesWithQueryParamsExample() {
+function ServerPaginationMultiTableExample() {
     const [usersRows, setUsersRows] = useState([]);
-    const [isLoadingUsers, setIsLoadingUsers] = useState(false);
+    const [usersLoading, setUsersLoading] = useState(false);
+    const [productsRows, setProductsRows] = useState([]);
+    const [productsLoading, setProductsLoading] = useState(false);
     const fetchUsersData = useCallback(async (pageIndex, pageSize) => {
-        setIsLoadingUsers(true);
+        setUsersLoading(true);
         const results = await fetchServerData(pageIndex, pageSize);
         setUsersRows(results);
-        setIsLoadingUsers(false);
+        setUsersLoading(false);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsxs("div", { style: { display: 'flex', gap: '2rem' }, children: [_jsx(StandardTable, { id: "clients", data: data, columns: columns, paginationMode: "client" }), _jsx(StandardTable, { id: "users", data: usersRows, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchUsersData, isLoading: isLoadingUsers })] })] }));
+    const fetchProductsData = useCallback(async (pageIndex, pageSize) => {
+        setProductsLoading(true);
+        const results = await fetchServerData(pageIndex, pageSize);
+        setProductsRows(results);
+        setProductsLoading(false);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsxs("div", { style: { marginBottom: 40 }, children: [_jsx("h3", { style: { marginBottom: 8 }, children: "Users (scoped server pagination)" }), _jsx(StandardTable, { id: "users", data: usersRows, columns: columns, paginationMode: "server", rowsPerPage: 5, totalServerRows: 100, onRefetch: fetchUsersData, isLoading: usersLoading, scoped: true })] }), _jsxs("div", { children: [_jsx("h3", { style: { marginBottom: 8 }, children: "Products (scoped server pagination)" }), _jsx(StandardTable, { id: "products", data: productsRows, columns: columns, paginationMode: "server", rowsPerPage: 5, totalServerRows: 100, onRefetch: fetchProductsData, isLoading: productsLoading, scoped: true })] })] }));
 }
-export const TwoTablesWithQueryParams = {
+export const ServerPaginationMultiTableWithQueryParams = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Multiple server-paginated tables with scoped URL params. Each table independently fetches server data while maintaining separate pagination state in the URL.',
+            },
+        },
+    },
     decorators: [
         (Story) => {
-            globalThis.history.replaceState({}, '', '?clients_pageNo=2&clients_pageSize=5&users_pageNo=3&users_pageSize=10');
+            globalThis.history.replaceState({}, '', '?usersPage=1&usersSize=5&productsPage=1&productsSize=5');
             return _jsx(Story, {});
         },
     ],
-    render: () => _jsx(TwoTablesWithQueryParamsExample, {}),
+    render: () => _jsx(ServerPaginationMultiTableExample, {}),
 };
 export const GroupedAccordion = {
     render: () => (_jsx(StandardTable, { id: "grouped-accordion", data: groupingData, columns: groupingColumns, showHeader: false, grouping: ['date'], enableAccordion: true, paginationMode: "client", showGroupedTotal: true })),

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

@@ -1,4 +1,4 @@
-import type { TableInputProps, StandardPaginationProps } from '../Table.types';
+import type { StandardTableProps as BaseStandardTableProps } from '../Table.types';
 export type StandardTableProps<T extends {
     id: string;
-}> = TableInputProps<T> & StandardPaginationProps;
+}, TId extends string = string> = BaseStandardTableProps<T, TId>;

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

@@ -1,7 +1,7 @@
 import type { StandardTableProps } from '../Table.types';
 export declare function useStandardTableController<T extends {
     id: string;
-}>(props: StandardTableProps<T>): {
+}, TId extends string = string>(props: StandardTableProps<T, TId>): {
     table: import("@tanstack/table-core").Table<T>;
     height: string | number | undefined;
     showHeader: boolean;

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

@@ -6,7 +6,7 @@ import { usePaginationController } from '../Pagination/usePaginationController';
 export function useStandardTableController(props) {
     const { id, data, columns, rowIdKey = 'id', height, showHeader = true, 
     // pagination
-    paginationMode = 'client', rowsPerPage = 10, totalServerRows, onRefetch, 
+    paginationMode = 'client', rowsPerPage = 10, scoped, totalServerRows, onRefetch, 
     // sorting / grouping
     sorting, onSortingChange, grouping, enableAccordion, 
     // search
@@ -40,9 +40,20 @@ export function useStandardTableController(props) {
         ro.observe(parentScrollRef.current);
         return () => ro.disconnect();
     }, []);
-    const { initialPageIndex, initialPageSize, syncToUrl } = useUrlPaginationSync(id, rowsPerPage);
+    const { initialPageIndex, initialPageSize, syncToUrl } = useUrlPaginationSync({
+        defaultPageSize: rowsPerPage,
+        tableId: id,
+        scoped,
+        enabled: paginationMode !== 'none',
+    });
     const [pageIndex, setPageIndex] = useState(initialPageIndex);
     const [pageSize, setPageSize] = useState(initialPageSize);
+    useEffect(() => {
+        setPageIndex(initialPageIndex);
+    }, [initialPageIndex]);
+    useEffect(() => {
+        setPageSize(initialPageSize);
+    }, [initialPageSize]);
     const [internalSorting, setInternalSorting] = useState(sorting !== null && sorting !== void 0 ? sorting : []);
     const [expanded, setExpanded] = useState(true);
     const stableGrouping = useMemo(() => grouping !== null && grouping !== void 0 ? grouping : [], [grouping]);

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: "mui-loader mt-4" }), _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;