@eml-payments/ui-kit 1.6.0 → 1.7.1

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

@@ -1,96 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,146 +0,0 @@
-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,
-    };
-}