@eml-payments/ui-kit 1.8.13 → 1.8.15

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/context/UIKitProvider.js

@@ -11,18 +11,17 @@ function resolveColorValue(value, isDark) {
     return isDark ? ((_b = (_a = value.dark) !== null && _a !== void 0 ? _a : value.light) !== null && _b !== void 0 ? _b : '') : ((_d = (_c = value.light) !== null && _c !== void 0 ? _c : value.dark) !== null && _d !== void 0 ? _d : '');
 }
 function mergeTheme(user) {
-    var _a;
     return {
         ...defaultTheme,
         ...user,
         colors: {
             ...defaultTheme.colors,
-            ...((_a = user === null || user === void 0 ? void 0 : user.colors) !== null && _a !== void 0 ? _a : {}),
+            ...user === null || user === void 0 ? void 0 : user.colors,
         },
     };
 }
 function applyThemeToRoot(theme, isDark) {
-    if (typeof window === 'undefined') {
+    if (globalThis.window === undefined) {
         return;
     }
     const root = document.documentElement;

package/dist/src/stories/Page.js

@@ -4,5 +4,5 @@ import { Header } from './Header';
 import './page.css';
 export const Page = () => {
     const [user, setUser] = React.useState();
-    return (_jsxs("article", { children: [_jsx(Header, { user: user, onLogin: () => setUser({ name: 'Jane Doe' }), onLogout: () => setUser(undefined), onCreateAccount: () => setUser({ name: 'Jane Doe' }) }), _jsxs("section", { className: "storybook-page", children: [_jsx("h2", { children: "Pages in Storybook" }), _jsxs("p", { children: ["We recommend building UIs with a", ' ', _jsx("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: _jsx("strong", { children: "component-driven" }) }), ' ', "process starting with atomic components and ending with pages."] }), _jsx("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }), _jsxs("ul", { children: [_jsx("li", { children: "Use a higher-level connected component. Storybook helps you compose such data from the \"args\" of child component stories" }), _jsx("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })] }), _jsxs("p", { children: ["Get a guided tutorial on component-driven development at", ' ', _jsx("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }), ". Read more in the", ' ', _jsx("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }), "."] }), _jsxs("div", { className: "tip-wrapper", children: [_jsx("span", { className: "tip", children: "Tip" }), " Adjust the width of the canvas with the", ' ', _jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", fillRule: "evenodd", children: _jsx("path", { d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z", id: "a", fill: "#999" }) }) }), "Viewports addon in the toolbar"] })] })] }));
+    return (_jsxs("article", { children: [_jsx(Header, { user: user, onLogin: () => setUser({ name: 'Jane Doe' }), onLogout: () => setUser(undefined), onCreateAccount: () => setUser({ name: 'Jane Doe' }) }), _jsxs("section", { className: "storybook-page", children: [_jsx("h2", { children: "Pages in Storybook" }), _jsxs("p", { children: ["We recommend building UIs with a", ' ', _jsx("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: _jsx("strong", { children: "component-driven" }) }), ' ', "process starting with atomic components and ending with pages."] }), _jsx("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }), _jsxs("ul", { children: [_jsx("li", { children: "Use a higher-level connected component. Storybook helps you compose such data from the \"args\" of child component stories" }), _jsx("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })] }), _jsxs("p", { children: ["Get a guided tutorial on component-driven development at", ' ', _jsx("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }), ". Read more in the", ' ', _jsx("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }), '.'] }), _jsxs("div", { className: "tip-wrapper", children: [_jsx("span", { className: "tip", children: "Tip" }), " Adjust the width of the canvas with the", ' ', _jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", fillRule: "evenodd", children: _jsx("path", { d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z", id: "a", fill: "#999" }) }) }), "Viewports addon in the toolbar"] })] })] }));
 };

package/package.json

@@ -1,16 +1,12 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.8.13",
+	"version": "1.8.15",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
 	"bugs": {
 		"url": "https://github.com/EML-Payments/arlo.npm.uikit/issues"
 	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/EML-Payments/arlo.npm.uikit.git"
-	},
 	"license": "MIT",
 	"author": "EML Payments",
 	"type": "commonjs",

package/dist/src/assets/index.d.ts

@@ -1,2 +0,0 @@
-export declare const creditCardFrost = "./credit-card-frost.png";
-export declare const creditCardFront = "./credit-card-front.png";

package/dist/src/assets/index.js

@@ -1,3 +0,0 @@
-// Asset path constants for consumption by consuming applications
-export const creditCardFrost = './credit-card-frost.png';
-export const creditCardFront = './credit-card-front.png';

package/dist/src/assets/index.ts

@@ -1,3 +0,0 @@
-// Asset path constants for consumption by consuming applications
-export const creditCardFrost = './credit-card-frost.png';
-export const creditCardFront = './credit-card-front.png';