@eml-payments/ui-kit 1.1.2 → 1.1.4

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

@@ -1,14 +1,6 @@
 import { Table } from './Table';
-import type { TableProps } from './Table.types';
 import type { Meta, StoryObj } from '@storybook/react';
-interface ExtraArgs {
-    initialPageNo?: number;
-    initialPageSize?: number;
-}
-type TableStoryArgs = TableProps<{
-    id: string;
-}> & ExtraArgs;
-declare const meta: Meta<TableStoryArgs>;
+declare const meta: Meta<typeof Table>;
 export default meta;
 type Story = StoryObj<typeof Table>;
 export declare const Basic: Story;
@@ -30,4 +22,6 @@ export declare const WithHiddenHeader: Story;
 export declare const GroupedByDate: Story;
 export declare const WithSearch: Story;
 export declare const ServerSideSearch: Story;
-export declare const WithQueryParams: StoryObj<TableStoryArgs>;
+export declare const ClientPaginationWithQueryParams: StoryObj;
+export declare const ServerPaginationWithQueryParams: StoryObj;
+export declare const TwoTablesWithQueryParams: StoryObj;

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

@@ -44,18 +44,6 @@ const columns = [
 const meta = {
     title: 'UIKit/Table',
     component: Table,
-    args: {
-        initialPageNo: 1,
-        initialPageSize: 10,
-    },
-    decorators: [
-        (Story, context) => {
-            const { initialPageNo, initialPageSize } = context.args;
-            const query = `?pageNo=${initialPageNo}&pageSize=${initialPageSize}`;
-            window.history.replaceState({}, '', query);
-            return _jsx(Story, {});
-        },
-    ],
     tags: ['autodocs'],
     render: () => _jsx(Table, { id: "example-table", data: data, columns: columns }),
 };
@@ -279,12 +267,73 @@ export const ServerSideSearch = {
         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 })] }));
     },
 };
-export const WithQueryParams = {
+// 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: () => {
-        return (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsx(Table, { id: "url-sync-table", data: data, columns: columns, paginationMode: "client", showHeader: true })] }));
+        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 })] })] }));
     },
 };

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

@@ -37,8 +37,4 @@ export interface TableProps<T> {
     grouping?: string[];
     isSearchActive?: boolean;
     noSearchResultsMessage?: string;
-    queryParamKeys?: {
-        pageSize?: string;
-        pageNo?: string;
-    };
 }

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

@@ -2,7 +2,7 @@ import { type SortingState } from '@tanstack/react-table';
 import type { TableProps } from '../Table.types';
 export declare function useTableController<T extends {
     id: string;
-}>({ data, columns, checkboxSelection, checkboxPosition, paginationMode, sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage, isMultiRowSelection, selectedRowIds, rowIdKey, totalServerRows, onRefetch, showHeader, grouping, queryParamKeys, }: TableProps<T>): {
+}>({ id, data, columns, checkboxSelection, checkboxPosition, paginationMode, sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage, isMultiRowSelection, selectedRowIds, rowIdKey, totalServerRows, onRefetch, showHeader, grouping, }: TableProps<T>): {
     pageIndex: number;
     pageSize: number;
     canNextPage: boolean;

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

@@ -3,8 +3,7 @@ import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowMode
 import { applyFlexSizes, getCheckboxSelectionColumn } from '../table.helpers';
 import { usePaginationController } from './usePaginationController';
 import { useUrlPaginationSync } from './useUrlPaginationSync';
-export function useTableController({ data, columns, checkboxSelection, checkboxPosition = 'start', paginationMode = 'client', sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage = 10, isMultiRowSelection = true, selectedRowIds, rowIdKey = 'id', totalServerRows, onRefetch, showHeader = true, grouping, queryParamKeys, }) {
-    var _a;
+export function useTableController({ id, data, columns, checkboxSelection, checkboxPosition = 'start', paginationMode = 'client', sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage = 10, isMultiRowSelection = true, selectedRowIds, rowIdKey = 'id', totalServerRows, onRefetch, showHeader = true, grouping, }) {
     const safeData = Array.isArray(data) ? data : [];
     const stableGrouping = useMemo(() => grouping !== null && grouping !== void 0 ? grouping : [], [grouping]);
     const columnVisibility = useMemo(() => {
@@ -21,17 +20,9 @@ export function useTableController({ data, columns, checkboxSelection, checkboxP
         }
         return {};
     });
-    const { pageIndex, setPageIndex, pageSize, setPageSize } = useUrlPaginationSync(rowsPerPage, queryParamKeys);
-    const paginatedData = useMemo(() => {
-        if (paginationMode === 'server') {
-            return safeData;
-        }
-        const start = pageIndex * pageSize;
-        const end = start + pageSize;
-        return safeData.slice(start, end);
-    }, [safeData, pageIndex, pageSize, paginationMode]);
+    const { pageIndex, setPageIndex, pageSize, setPageSize } = useUrlPaginationSync(rowsPerPage, id);
     const table = useReactTable({
-        data: paginatedData,
+        data: safeData,
         columns: tableColumns,
         getRowId: (row) => String(row[rowIdKey]),
         state: {
@@ -43,12 +34,10 @@ export function useTableController({ data, columns, checkboxSelection, checkboxP
         },
         getSortedRowModel: getSortedRowModel(),
         getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: paginationMode !== 'server' ? getPaginationRowModel() : undefined,
-        manualPagination: true,
+        getPaginationRowModel: paginationMode === 'client' ? getPaginationRowModel() : undefined,
+        manualPagination: paginationMode === 'server',
         autoResetPageIndex: false,
-        pageCount: paginationMode === 'server'
-            ? Math.ceil((totalServerRows !== null && totalServerRows !== void 0 ? totalServerRows : 0) / pageSize)
-            : Math.ceil(((_a = safeData === null || safeData === void 0 ? void 0 : safeData.length) !== null && _a !== void 0 ? _a : 0) / pageSize),
+        pageCount: paginationMode === 'server' ? Math.ceil((totalServerRows !== null && totalServerRows !== void 0 ? totalServerRows : 0) / pageSize) : undefined,
         onPaginationChange: (updater) => {
             const next = typeof updater === 'function' ? updater({ pageIndex, pageSize }) : updater;
             setPageIndex(next.pageIndex);

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

@@ -1,11 +1,6 @@
-interface QueryParamKeys {
-    pageSize?: string;
-    pageNo?: string;
-}
-export declare function useUrlPaginationSync(rowsPerPage: number, queryParamKeys?: QueryParamKeys): {
+export declare function useUrlPaginationSync(rowsPerPage: number, tableId: string): {
     pageIndex: number;
     setPageIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
     pageSize: number;
     setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
 };
-export {};

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

@@ -1,18 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-export function useUrlPaginationSync(rowsPerPage, queryParamKeys = {}) {
-    const [searchParams, setSearchParams] = useSearchParams();
-    const pageSizeKey = queryParamKeys.pageSize || 'pageSize';
-    const pageNoKey = queryParamKeys.pageNo || 'pageNo';
+export function useUrlPaginationSync(rowsPerPage, tableId) {
+    const [searchParams] = useSearchParams();
+    const pageSizeKey = `${tableId}_pageSize`;
+    const pageNoKey = `${tableId}_pageNo`;
     const initialPageIndex = Math.max(parseInt(searchParams.get(pageNoKey) || '1') - 1, 0);
     const initialPageSize = Math.max(parseInt(searchParams.get(pageSizeKey) || String(rowsPerPage !== null && rowsPerPage !== void 0 ? rowsPerPage : 10)), 1);
     const [pageIndex, setPageIndex] = useState(initialPageIndex);
     const [pageSize, setPageSize] = useState(initialPageSize);
-    useEffect(() => {
-        const newParams = new URLSearchParams(searchParams);
-        newParams.set(pageNoKey, String(pageIndex + 1));
-        newParams.set(pageSizeKey, String(pageSize));
-        setSearchParams(newParams, { replace: true });
-    }, [pageIndex, pageSize]);
     return { pageIndex, setPageIndex, pageSize, setPageSize };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.1.2",
+	"version": "1.1.4",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",