@tap-payments/os-micro-frontend-shared 0.0.290 → 0.0.292

package/build/components/ScrollLoader/ScrollLoader.d.ts

@@ -0,0 +1,10 @@
+import React, { PropsWithChildren } from 'react';
+import { StackProps } from '@mui/material/Stack';
+export type ScrollLoaderProps<IRootProps extends object = StackProps> = PropsWithChildren<IRootProps & {
+    component?: React.FC<IRootProps> | React.ElementType;
+    loadMoreItems: () => Promise<unknown>;
+    loading?: boolean;
+    hasMore?: boolean;
+}>;
+declare const ScrollLoader: <IRootProps extends object = StackProps>(props: ScrollLoaderProps<IRootProps>) => import("react/jsx-runtime").JSX.Element;
+export default ScrollLoader;

package/build/components/ScrollLoader/ScrollLoader.js

@@ -0,0 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Stack from '@mui/material/Stack';
+const OFFSET = 50;
+const isNearBottom = (el, offset = OFFSET) => {
+    const scrollBottom = el.scrollTop + el.clientHeight;
+    const scrollHeight = el.scrollHeight;
+    return scrollHeight - scrollBottom <= offset;
+};
+const ScrollLoader = (props) => {
+    const { component = Stack, loadMoreItems, hasMore, loading, children } = props, rootProps = __rest(props, ["component", "loadMoreItems", "hasMore", "loading", "children"]);
+    const [initialChecked, setInitialChecked] = useState(false);
+    const loadMoreItemsRef = useRef(loadMoreItems);
+    const containerRef = useRef(null);
+    loadMoreItemsRef.current = loadMoreItems;
+    const Component = component;
+    const handleScroll = useCallback(() => {
+        const el = containerRef.current;
+        if (!el || loading || !hasMore)
+            return;
+        const isBottom = isNearBottom(el);
+        if (isBottom)
+            loadMoreItemsRef.current();
+    }, [loading, hasMore]);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        el.addEventListener('scroll', handleScroll);
+        return () => el.removeEventListener('scroll', handleScroll);
+    }, [handleScroll]);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el || loading)
+            return;
+        const timeout = setTimeout(() => {
+            const isBottom = isNearBottom(el);
+            if (isBottom && !initialChecked) {
+                loadMoreItemsRef.current();
+                setInitialChecked(true);
+            }
+        }, 2000);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [loading, initialChecked]);
+    return (_jsx(Component, Object.assign({ overflow: "auto", ref: containerRef, style: {
+            overflow: 'auto',
+            height: '100%',
+            maxHeight: '100%',
+        } }, rootProps, { children: children })));
+};
+export default ScrollLoader;

package/build/components/ScrollLoader/index.d.ts

@@ -0,0 +1,3 @@
+import ScrollLoader from './ScrollLoader';
+export default ScrollLoader;
+export * from './ScrollLoader';

package/build/components/ScrollLoader/index.js

@@ -0,0 +1,3 @@
+import ScrollLoader from './ScrollLoader';
+export default ScrollLoader;
+export * from './ScrollLoader';

package/build/components/VirtualTable/SheetView/SheetViewVirtualTable.js

@@ -123,7 +123,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
                             overflowX: isPinned ? 'hidden' : 'auto',
                             paddingBottom: isPinned ? '25px' : '13px',
                             backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',
-                        } }, { children: ListItemWrapper })));
+                        } }, { children: ListItemWrapper }), `${containerKey}-${rows.length}`));
                 } })) })));
     }, [
         itemsCount,
@@ -186,7 +186,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
                                         height: 'auto',
                                         display: 'flex',
                                         flexDirection: 'column',
-                                    } }, { children: _jsx(SheetViewTableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))] })) }))) : (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) })))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+                                    } }, { children: _jsx(SheetViewTableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))] })) }))) : (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })] })) })))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                                                 width: '100%',
                                                 minWidth: 'fit-content',
                                             } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));

package/build/components/VirtualTable/components/index.d.ts

@@ -1,4 +1,4 @@
-export { default as ColumnFilter, Inputs, List, CustomColumnFilterProps } from './ColumnFilter';
+export { default as ColumnFilter, Inputs, List, type CustomColumnFilterProps } from './ColumnFilter';
 export * from './EmptyList';
 export * from './ErrorList';
 export * from './TableFooter';

package/build/components/index.d.ts

@@ -95,3 +95,5 @@ export * from './TableHeader';
 export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';
 export * from './SourceChips';
+export { default as ScrollLoader } from './ScrollLoader';
+export * from './ScrollLoader';

package/build/components/index.js

@@ -95,3 +95,5 @@ export * from './TableHeader';
 export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';
 export * from './SourceChips';
+export { default as ScrollLoader } from './ScrollLoader';
+export * from './ScrollLoader';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.290",
-  "testVersion": 6,
+  "version": "0.0.292",
+  "testVersion": 0,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",