@tap-payments/os-micro-frontend-shared 0.0.70-sheet-view-table-row-v3 → 0.0.72

package/build/components/SearchButton/SearchButton.js

@@ -38,8 +38,10 @@ function SearchButton(_a) {
     };
     const onKeyDown = (event) => {
         if (event.key === 'Enter') {
-            onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(event.currentTarget.value);
+            onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(value);
         }
+    };
+    const onChange = (event) => {
         setValue(event.currentTarget.value);
     };
     return (_jsxs(Wrapper, { children: [_jsx(AnimatePresence, { children: isInputShown && (_jsxs(_Fragment, { children: [_jsx(StyledInput, { initial: {
@@ -50,6 +52,6 @@ function SearchButton(_a) {
                                 width: 30,
                                 border: `1px solid ${theme.palette.divider}`,
                                 boxShadow: 'none',
-                            }, placeholder: t('search') || '', onKeyDown: onKeyDown }), _jsx(Icon, { style: { right: 48 }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, src: grayCloseIcon, alt: "close", onClick: onReset }), _jsx(Icon, { style: { right: 9 }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, src: searchBlueIcon, alt: "search", onClick: onSubmit })] })) }), _jsx(StyledSearchButton, Object.assign({}, props, { variant: isInputShown ? 'active' : 'inActive', icon: "search", onClick: onSearchClick }))] }));
+                            }, placeholder: t('search') || '', onKeyDown: onKeyDown, onChange: onChange }), _jsx(Icon, { style: { right: 48 }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, src: grayCloseIcon, alt: "close", onClick: onReset }), _jsx(Icon, { style: { right: 9 }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, src: searchBlueIcon, alt: "search", onClick: onSubmit })] })) }), _jsx(StyledSearchButton, Object.assign({}, props, { variant: isInputShown ? 'active' : 'inActive', icon: "search", onClick: onSearchClick }))] }));
 }
 export default memo(SearchButton);

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../types/index.js';
-declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

package/build/components/VirtualTable/VirtualTable.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, memo, useState, useRef, useEffect } from 'react';
+import { useMemo, memo, useState } from 'react';
 import { useTheme } from '@mui/material/styles';
 import memoize from 'memoize-one';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -34,7 +34,7 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     areAllRowsLoaded,
     isSheetView,
 }));
-function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView = false, }) {
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView = false, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
@@ -57,12 +57,6 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
     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, isSheetView);
     const tableRowHeight = isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT;
-    const listRef = useRef(null);
-    useEffect(() => {
-        if (listRef.current && typeof listRef.current.resetAfterIndex === 'function') {
-            listRef.current.resetAfterIndex(0, true);
-        }
-    }, [isSheetView, tableRowHeight]);
     const renderTableContainer = useMemo(() => {
         const setBackdropVisibility = (isVisible) => {
             setShowBackdrop(isVisible);
@@ -72,18 +66,24 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
                 return;
             yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
         });
-        return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, 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: () => tableRowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: isSheetView, listRef: listRef }, { children: ListItemWrapper }))) }))) })));
+        return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, 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: () => tableRowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: isSheetView }, { children: ListItemWrapper }))) }))) })));
     }, [
+        orderedColumns,
+        error,
+        isLoading,
         lastItemIndex,
         loadMoreItems,
+        rowHeight,
+        rows,
+        rowProps,
+        tableError,
+        tableLoading,
         threshold,
+        isDelayedFetchingNextPage,
         areAllRowsLoaded,
         areTotalRowsNotFillingHeight,
         itemsCount,
         tableRowHeight,
-        isSheetView,
-        itemData,
-        scrollToIndex,
     ]);
     const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
     return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_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: isSheetView, "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [showHeader && (_jsx(TableHeader, { "data-testid": "VirtualTable_TableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, isSheetView: isSheetView })), showNoDataView ? (_jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })) : (_jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {

package/build/components/VirtualTable/components/virtualScroll/VirtualScrollList.d.ts

@@ -1,9 +1,7 @@
-import React from 'react';
-import { VariableSizeList, VariableSizeListProps } from 'react-window';
+import { VariableSizeListProps } from 'react-window';
 type ExtendedVariableSizeListProps = VariableSizeListProps & {
     setBackdropVisibility: (isVisible: boolean) => void;
     scrollToIndex?: number;
-    listRef?: React.RefObject<VariableSizeList>;
 };
-declare function VirtualScrollList({ itemData, children, setBackdropVisibility, scrollToIndex, listRef: externalListRef, ...restProps }: ExtendedVariableSizeListProps): import("react/jsx-runtime").JSX.Element;
+declare function VirtualScrollList({ itemData, children, setBackdropVisibility, scrollToIndex, ...restProps }: ExtendedVariableSizeListProps): import("react/jsx-runtime").JSX.Element;
 export default VirtualScrollList;

package/build/components/VirtualTable/components/virtualScroll/VirtualScrollList.js

@@ -17,15 +17,14 @@ import VirtualScrollOuter from './VirtualScrollOuter';
 import useScrollBackShadow from '../../hooks/useScrollBackShadow';
 import { VirtualScrollOuterProvider } from '../../context';
 function VirtualScrollList(_a) {
-    var { itemData, children, setBackdropVisibility, scrollToIndex, listRef: externalListRef } = _a, restProps = __rest(_a, ["itemData", "children", "setBackdropVisibility", "scrollToIndex", "listRef"]);
+    var { itemData, children, setBackdropVisibility, scrollToIndex } = _a, restProps = __rest(_a, ["itemData", "children", "setBackdropVisibility", "scrollToIndex"]);
     const { handleBackDropVisibility, clearBackdropVisibility, clearTimer } = useScrollBackShadow({
         setBackdropVisibility,
     });
     const renderedScrollTopRef = useRef(0);
     const scrollTopRef = useRef(undefined);
     const scrollLocked = useRef(false);
-    const internalListRef = useRef(null);
-    const listRef = externalListRef || internalListRef;
+    const listRef = useRef(null);
     const scrollTo = useCallback(() => {
         var _a, _b;
         clearTimer();
@@ -39,7 +38,7 @@ function VirtualScrollList(_a) {
         }
         clearBackdropVisibility();
         return false;
-    }, [clearBackdropVisibility, clearTimer, handleBackDropVisibility, listRef]);
+    }, []);
     const handleScroll = React.useCallback((event) => {
         scrollTopRef.current = event.currentTarget.scrollTop;
         if (!scrollLocked.current) {
@@ -52,7 +51,7 @@ function VirtualScrollList(_a) {
         if ((scrollToIndex || 0) >= 0 && !Number.isNaN(scrollToIndex) && scrollToIndex !== undefined && ((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo)) {
             (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.scrollToItem(scrollToIndex, 'center');
         }
-    }, [scrollToIndex, listRef]);
+    }, [scrollToIndex]);
     const itemDataInternal = React.useMemo(() => (Object.assign(Object.assign({}, itemData), { renderedScrollTopRef })), [itemData]);
     const handleOnScroll = React.useCallback(() => {
         scrollLocked.current = scrollTo();

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

@@ -26,7 +26,6 @@ interface StyledVirtualListProps {
 export declare const StyledVirtualList: import("@emotion/styled").StyledComponent<import("react-window").VariableSizeListProps<any> & {
     setBackdropVisibility: (isVisible: boolean) => void;
     scrollToIndex?: number | undefined;
-    listRef?: import("react").RefObject<import("react-window").VariableSizeList<any>> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledVirtualListProps, {}, {}>;
 export declare const StyledTableRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     ref?: ((instance: HTMLTableRowElement | null) => void) | import("react").RefObject<HTMLTableRowElement> | null | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.70-sheet-view-table-row-v3",
+  "version": "0.0.72",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",

package/build/playground/VTDemo.d.ts

@@ -1 +0,0 @@
-export declare const VTDemo: () => import("react/jsx-runtime").JSX.Element;

package/build/playground/VTDemo.js

@@ -1,58 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Button, VirtualTable } from '../components/index.js';
-import { Box } from '@mui/material';
-export const VTDemo = () => {
-    const [isSheetView, setIsSheetView] = useState(false);
-    const toggleView = () => {
-        setIsSheetView((prev) => !prev);
-    };
-    return (_jsx(Box, Object.assign({ sx: {
-            width: '100%',
-            height: '100vh',
-            overflow: 'auto',
-            flexDirection: 'row',
-            display: 'flex',
-            justifyContent: 'center',
-            p: 3,
-            backgroundColor: 'gray',
-        } }, { children: _jsxs(Box, Object.assign({ "data-testid": "ChargesList", sx: {
-                position: 'relative',
-                display: 'flex',
-                flexDirection: 'column',
-                width: '80%',
-                height: '100%',
-            } }, { children: [_jsx(Button, Object.assign({ onClick: toggleView }, { children: "Toggle" })), _jsx(VirtualTable, { showHeader: true, showFooter: true, footerProps: {
-                        totalCount: 4,
-                        sandboxMode: false,
-                        maximized: false,
-                    }, loadMoreItems: () => Promise.resolve(), isLoading: false, isFetchingNextPage: false, rows: [
-                        { index: '1', date: 'date', order: 'order' },
-                        { index: '2', date: 'date', order: 'order' },
-                        { index: '3', date: 'date', order: 'order' },
-                    ], areAllRowsLoaded: true, columnsSorting: { id: 'asc' }, onColumnSort: () => { }, columns: [
-                        { id: 'index', header: '', width: '28px' },
-                        {
-                            id: 'date',
-                            header: 'Date',
-                            width: '170px',
-                        },
-                        {
-                            id: 'order',
-                            header: 'Order',
-                            width: '170px',
-                            filter: {
-                                onConfirm: undefined,
-                                onClear: () => { },
-                                type: 'inputs',
-                                options: [
-                                    {
-                                        placeholder: 'Order',
-                                        apiKey: 'orderID',
-                                    },
-                                ],
-                                data: {},
-                            },
-                        },
-                    ], error: null, triggerDataRefetch: () => Promise.resolve(), showBackgroundColor: false, tableTitle: "Acceptance-Charges", tableMode: 'sheet', dragControls: undefined, isSheetView: isSheetView })] })) })));
-};

package/build/playground/index.d.ts

@@ -1 +0,0 @@
-export { VTDemo } from './VTDemo';

package/build/playground/index.js

@@ -1 +0,0 @@
-export { VTDemo } from './VTDemo';