@eml-payments/ui-kit 1.7.5 → 1.7.6

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/components/Table/hooks/useUrlPaginationSync.d.ts

@@ -1,4 +1,10 @@
-export declare function useUrlPaginationSync(tableId: string, defaultPageSize: number): {
+export interface UseUrlPaginationSyncOptions {
+    defaultPageSize: number;
+    tableId?: string;
+    scoped?: boolean;
+    enabled?: boolean;
+}
+export declare function useUrlPaginationSync({ defaultPageSize, tableId, scoped, enabled, }: UseUrlPaginationSyncOptions): {
     initialPageIndex: number;
     initialPageSize: number;
     syncToUrl: (pageIndex: number, pageSize: number) => void;

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

@@ -1,23 +1,65 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
-export function useUrlPaginationSync(tableId, defaultPageSize) {
+function getPaginationParamKeys(tableId) {
+    if (tableId) {
+        return {
+            pageNoKey: `${tableId}Page`,
+            pageSizeKey: `${tableId}Size`,
+        };
+    }
+    return {
+        pageNoKey: 'page',
+        pageSizeKey: 'size',
+    };
+}
+export function useUrlPaginationSync({ defaultPageSize, tableId, scoped = false, enabled = true, }) {
     const [searchParams, setSearchParams] = useSearchParams();
-    const pageNoKey = `${tableId}_pageNo`;
-    const pageSizeKey = `${tableId}_pageSize`;
-    const [initialPageIndex] = useState(() => {
+    const { pageNoKey, pageSizeKey } = useMemo(() => getPaginationParamKeys(scoped ? tableId : undefined), [tableId, scoped]);
+    const initialPageIndex = useMemo(() => {
+        if (!enabled) {
+            return 0;
+        }
         const raw = Number(searchParams.get(pageNoKey));
-        return Number.isFinite(raw) && raw > 0 ? raw - 1 : 0;
-    });
-    const [initialPageSize] = useState(() => {
+        const oneBased = Number.isFinite(raw) && raw > 0 ? raw : 1;
+        return oneBased - 1;
+    }, [enabled, searchParams, pageNoKey]);
+    const initialPageSize = useMemo(() => {
+        if (!enabled) {
+            return defaultPageSize;
+        }
         const raw = Number(searchParams.get(pageSizeKey));
         return Number.isFinite(raw) && raw > 0 ? raw : defaultPageSize;
-    });
+    }, [enabled, searchParams, pageSizeKey, defaultPageSize]);
     const syncToUrl = useCallback((pageIndex, pageSize) => {
+        if (!enabled) {
+            return;
+        }
         const next = new URLSearchParams(searchParams);
         next.set(pageNoKey, String(pageIndex + 1)); // 1-based
         next.set(pageSizeKey, String(pageSize));
         setSearchParams(next, { replace: true });
-    }, [pageNoKey, pageSizeKey, searchParams, setSearchParams]);
+    }, [enabled, searchParams, setSearchParams, pageNoKey, pageSizeKey]);
+    useEffect(() => {
+        if (enabled) {
+            return;
+        }
+        if (!searchParams.has(pageNoKey) && !searchParams.has(pageSizeKey)) {
+            return;
+        }
+        const next = new URLSearchParams(searchParams);
+        next.delete(pageNoKey);
+        next.delete(pageSizeKey);
+        setSearchParams(next, { replace: true });
+    }, [enabled, searchParams, setSearchParams, pageNoKey, pageSizeKey]);
+    // Ensure active table pagination params exist (also when param keys change).
+    useEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        if (!searchParams.has(pageNoKey) || !searchParams.has(pageSizeKey)) {
+            syncToUrl(initialPageIndex, initialPageSize);
+        }
+    }, [enabled, searchParams, pageNoKey, pageSizeKey, initialPageIndex, initialPageSize, syncToUrl]);
     return {
         initialPageIndex,
         initialPageSize,

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

@@ -0,0 +1,4 @@
+type IsAsciiLetter<C extends string> = C extends Lowercase<C> ? (C extends Uppercase<C> ? false : true) : false;
+type IsLowerAlphaNum<S extends string> = S extends '' ? true : S extends `${infer First}${infer Rest}` ? IsAsciiLetter<First> extends true ? IsLowerAlphaNum<Rest> : First extends `${number}` ? IsLowerAlphaNum<Rest> : false : false;
+export type ScopedTableId<T extends string> = string extends T ? string : T extends `${infer First}${infer Rest}` ? IsAsciiLetter<First> extends true ? IsLowerAlphaNum<Rest> extends true ? T : never : never : never;
+export {};

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

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

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

@@ -12,7 +12,7 @@ export const Default = {
     render: () => (_jsx(TooltipStoryWrapper, { content: "Simple tooltip", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const LongTextResponsive = {
-    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\r\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\r\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
+    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const OnDifferentSides = {
     render: () => (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(TooltipStoryWrapper, { content: "Top tooltip", side: "top", children: _jsx(Button, { children: "Top" }) }), _jsx(TooltipStoryWrapper, { content: "Bottom tooltip", side: "bottom", children: _jsx(Button, { children: "Bottom" }) }), _jsx(TooltipStoryWrapper, { content: "Left tooltip", side: "left", children: _jsx(Button, { children: "Left" }) }), _jsx(TooltipStoryWrapper, { content: "Right tooltip", side: "right", children: _jsx(Button, { children: "Right" }) })] })),

package/package.json

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