@eml-payments/ui-kit 1.1.3 → 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;
@@ -32,3 +24,4 @@ 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;

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,18 +267,36 @@ 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 })] }));
     },
 };
+// Note: Does not update state search params 
 export const ClientPaginationWithQueryParams = {
     args: {
         initialPageNo: 2,
         initialPageSize: 5,
     },
-    render: () => (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsx(Table, { id: "client-pagination-table", data: data, columns: columns, paginationMode: "client", showHeader: true })] })),
+    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);
@@ -300,6 +306,34 @@ export const ServerPaginationWithQueryParams = {
             setData(results);
             setIsLoading(false);
         }, []);
-        return (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsx(Table, { id: "server-pagination-table", data: data, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchData, isLoading: isLoading, showHeader: true })] }));
+        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 })] })] }));
     },
 };

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,7 +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, }) {
+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(() => {
@@ -20,7 +20,7 @@ export function useTableController({ data, columns, checkboxSelection, checkboxP
         }
         return {};
     });
-    const { pageIndex, setPageIndex, pageSize, setPageSize } = useUrlPaginationSync(rowsPerPage, queryParamKeys);
+    const { pageIndex, setPageIndex, pageSize, setPageSize } = useUrlPaginationSync(rowsPerPage, id);
     const table = useReactTable({
         data: safeData,
         columns: tableColumns,
@@ -37,9 +37,7 @@ export function useTableController({ data, columns, checkboxSelection, checkboxP
         getPaginationRowModel: paginationMode === 'client' ? getPaginationRowModel() : undefined,
         manualPagination: paginationMode === 'server',
         autoResetPageIndex: false,
-        pageCount: paginationMode === 'server'
-            ? Math.ceil((totalServerRows !== null && totalServerRows !== void 0 ? totalServerRows : 0) / pageSize)
-            : undefined,
+        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.3",
+	"version": "1.1.4",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",