@tap-payments/os-micro-frontend-shared 0.1.9-test.1 → 0.1.9-test.1-test.2

package/build/components/VirtualTables/VirtualTable/VirtualTableList.js

@@ -0,0 +1,27 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { TABLE_LIST_OVER_SCAN } from '../../../constants/index.js';
+import ListItemWrapper from '../components/virtualScroll/ListItemWrapper';
+import { StyledVirtualList } from '../components/style';
+function VirtualTableList({ rowsLength, itemsCount, threshold, tableRowHeight, areAllRowsLoaded, isFetchingNextPage, loadMoreItems, itemData, areTotalRowsNotFillingHeight, scrollToIndex, setBackdropVisibility, listRef, }) {
+    const isItemLoaded = useCallback((index) => index < rowsLength, [rowsLength]);
+    const handleOnLoadMoreItems = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (areAllRowsLoaded || isFetchingNextPage)
+            return;
+        yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
+    }), [areAllRowsLoaded, isFetchingNextPage, loadMoreItems]);
+    const itemSizeForIndex = useCallback(() => tableRowHeight, [tableRowHeight]);
+    return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: isItemLoaded, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: itemSizeForIndex, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: false, listRef: listRef }, { children: ListItemWrapper }))) }))) })));
+}
+export default memo(VirtualTableList);

package/build/components/VirtualTables/VirtualTable/useVirtualTable.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { VariableSizeList } from 'react-window';
+import type { IVirtualTable } from '../../../types/index.js';
+export type UseVirtualTableArgs = Pick<IVirtualTable, 'columns' | 'rows' | 'rowProps' | 'footerProps' | 'isLoading' | 'error' | 'isFetchingNextPage' | 'scrollToIndex' | 'areAllRowsLoaded' | 'loadMoreItems'>;
+export declare function useVirtualTable({ columns, rows, rowProps, footerProps, isLoading, error, isFetchingNextPage, scrollToIndex, areAllRowsLoaded, loadMoreItems, }: Readonly<UseVirtualTableArgs>): {
+    isDelayedFetchingNextPage: boolean;
+    isError: boolean;
+    tableLoading: boolean;
+    tableError: boolean;
+    tableEmpty: boolean;
+    hasTimeoutError: boolean;
+    showNoDataView: boolean;
+    orderedColumns: import("../../../types/index.js").IColumnProps<any>[];
+    areTotalRowsNotFillingHeight: boolean;
+    itemsCount: number;
+    itemData: {
+        columns: any;
+        isLoading: boolean;
+        rows: any[];
+        rowProps: any;
+        scrollToIndex: number | undefined;
+        totalCount: number;
+        lastItemIndex: number;
+        isError: boolean;
+        areAllRowsLoaded: boolean;
+    };
+    listRef: import("react").RefObject<VariableSizeList<any>>;
+    showBackDrop: boolean;
+    setBackdropVisibility: (isVisible: boolean) => void;
+    loadMoreItemsSafe: () => Promise<void>;
+};

package/build/components/VirtualTables/VirtualTable/useVirtualTable.js

@@ -0,0 +1,70 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import memoize from 'memoize-one';
+import { useDelayToSetValue } from '../../../hooks/index.js';
+import { hasError, isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError } from '../../../utils/index.js';
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded) => ({
+    columns,
+    isLoading,
+    rows,
+    rowProps,
+    scrollToIndex,
+    totalCount,
+    lastItemIndex,
+    isError,
+    areAllRowsLoaded,
+}));
+export function useVirtualTable({ columns, rows, rowProps, footerProps, isLoading, error, isFetchingNextPage, scrollToIndex, areAllRowsLoaded = false, loadMoreItems, }) {
+    var _a;
+    const isDelayedFetchingNextPage = !!useDelayToSetValue({ value: isFetchingNextPage, delay: 1000 });
+    const [showBackDrop, setShowBackdrop] = useState(false);
+    const isError = hasError(error);
+    const tableLoading = isLoading !== null && isLoading !== void 0 ? isLoading : true;
+    const tableError = !isLoading && rows.length === 0 && isError && !isNotFoundError(error);
+    const tableEmpty = !isLoading && rows.length === 0;
+    const hasTimeoutError = isTimeoutError(error);
+    const lastItemIndex = rows.length - 1;
+    const shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+    const orderedColumns = useMemo(() => shownColumns.slice().sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); }), [shownColumns]);
+    const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
+    const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
+    const itemData = createItemData(orderedColumns, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight);
+    const listRef = useRef(null);
+    useEffect(() => {
+        if (listRef.current && typeof listRef.current.resetAfterIndex === 'function') {
+            listRef.current.resetAfterIndex(0, true);
+        }
+    }, []);
+    const setBackdropVisibility = useCallback((isVisible) => {
+        setShowBackdrop(isVisible);
+    }, []);
+    const loadMoreItemsSafe = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
+    }), [loadMoreItems]);
+    const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
+    return {
+        isDelayedFetchingNextPage,
+        isError,
+        tableLoading,
+        tableError,
+        tableEmpty,
+        hasTimeoutError,
+        showNoDataView,
+        orderedColumns,
+        areTotalRowsNotFillingHeight,
+        itemsCount,
+        itemData,
+        listRef,
+        showBackDrop,
+        setBackdropVisibility,
+        loadMoreItemsSafe,
+    };
+}

package/build/components/VirtualTables/components/TableRow.js

@@ -3,7 +3,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from './style';
-import { getSelectionStyles } from '../utils/getSelectionStyles';
+import { getSelectionStyles } from './utils';
 function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
     const renderCell = (column) => {
         const { render, format, selector } = column;

package/build/components/VirtualTables/components/style.d.ts

@@ -114,7 +114,7 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;

package/build/components/Window/style.d.ts

@@ -70,7 +70,7 @@ export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
@@ -337,7 +337,7 @@ export declare const AppContainerContainer: import("@emotion/styled").StyledComp
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "link" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "move" | "execute" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;

package/build/types/table.d.ts

@@ -126,7 +126,6 @@ export interface IVirtualTable<R = any> {
         width: string | number;
     };
     dragControls?: DragControls;
-    isSheetView?: boolean;
 }
 export type ColumnFilterValues = Record<string, string | string[] | Record<string, boolean> | {
     phone: string;

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.1.9-test.1",
-  "testVersion": 1,
+  "version": "0.1.9-test.1-test.2",
+  "testVersion": 2,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",