@tap-payments/os-micro-frontend-shared 0.0.183 → 0.0.184

package/build/components/VirtualTable/components/TableRow.js

@@ -0,0 +1,20 @@
+import { createElement as _createElement } from "react";
+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';
+function TableRow({ row, columns, index, rowProps, isSheetView }) {
+    const renderCell = (column) => {
+        const { render, format, selector } = column;
+        if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
+            return null;
+        const value = selector ? selector({ row, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : row[column === null || column === void 0 ? void 0 : column.id];
+        const formattedValue = format ? format({ value, row, index }) : value;
+        return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
+    };
+    const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
+            return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, sx: Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start' }, column.cellStyle), isSheetView: isSheetView }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
+        }) })), [columns, row]);
+    return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
+}
+export default memo(TableRow, areEqual);

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

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import type { AnimationType, IColumnProps } from '../../../types/index.js';
+interface ITableRowLoadingProps {
+    columns: IColumnProps[];
+    index?: number;
+    animationType?: AnimationType;
+    style?: CSSProperties;
+}
+declare function TableRowLoading({ columns, style, index, animationType }: ITableRowLoadingProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TableRowLoading>;
+export default _default;

package/build/components/VirtualTable/components/TableRowLoading.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import { styled } from '@mui/material/styles';
+import TableCell from '@mui/material/TableCell';
+import MUITableRow from '@mui/material/TableRow';
+import { areEqual } from 'react-window';
+const StyledSkeleton = styled(Skeleton)(({ theme }) => ({
+    backgroundColor: theme.palette.grey[100],
+    borderRadius: '64px',
+    minWidth: '20px',
+}));
+function TableRowLoading({ columns, style, index, animationType }) {
+    return (_jsx(MUITableRow, Object.assign({ sx: Object.assign(Object.assign({}, style), { display: 'flex', borderBottom: '1px solid #e3e8ee', '&:hover': {
+                backgroundColor: 'transparent !important',
+            } }), component: "div", hover: true }, { children: columns.map((column, colIndex) => (_jsx(TableCell, Object.assign({ sx: {
+                width: column.width || `${100 / columns.length}%` || '20%',
+                paddingInline: '0.6875rem',
+            }, component: "div" }, { children: _jsx(StyledSkeleton, { variant: "rectangular", animation: animationType }) }), `${column.id}-${colIndex}`))) }), index));
+}
+export default memo(TableRowLoading, areEqual);

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

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+import { VirtualTableWithCardProps } from '../VirtualTableWithCard';
+interface ITableRowLoadingProps {
+    index?: number;
+    style?: CSSProperties;
+    cardLoadingComponent: VirtualTableWithCardProps['cardLoadingComponent'];
+}
+declare function TableRowLoadingWithCard({ style, index, cardLoadingComponent: CardLoadingComponent }: ITableRowLoadingProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TableRowLoadingWithCard>;
+export default _default;

package/build/components/VirtualTable/components/TableRowLoadingWithCard.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import TableCell from '@mui/material/TableCell';
+import MUITableRow from '@mui/material/TableRow';
+import { areEqual } from 'react-window';
+function TableRowLoadingWithCard({ style, index, cardLoadingComponent: CardLoadingComponent }) {
+    return (_jsx(MUITableRow, Object.assign({ sx: Object.assign(Object.assign({}, style), { display: 'flex', padding: 0, '&:hover': {
+                backgroundColor: 'transparent !important',
+            } }), component: "div" }, { children: _jsx(TableCell, Object.assign({ sx: {
+                padding: 0,
+                flex: 1,
+            }, component: "div" }, { children: CardLoadingComponent })) }), index));
+}
+export default memo(TableRowLoadingWithCard, areEqual);

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { TableRowProps } from '@mui/material';
+import { VirtualTableWithCardProps } from '../VirtualTableWithCard';
+interface ITableRowProps<R = any> {
+    row: R;
+    index: number;
+    rowProps?: TableRowProps & {
+        showShadowHighlight?: boolean;
+        onRowClick?: (row: R) => void;
+        showLoadedStyle?: boolean;
+    };
+    renderCardComponent: VirtualTableWithCardProps['renderCardComponent'];
+}
+declare function TableRowWithCard({ row, index, rowProps, renderCardComponent: RenderCardComponent }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TableRowWithCard>;
+export default _default;

package/build/components/VirtualTable/components/TableRowWithCard.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { memo } from 'react';
+import { areEqual } from 'react-window';
+import { StyledTableRow } from '../style';
+function TableRowWithCard({ row, index, rowProps, renderCardComponent: RenderCardComponent }) {
+    return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index }), RenderCardComponent && _jsx(RenderCardComponent, Object.assign({}, row))));
+}
+export default memo(TableRowWithCard, areEqual);

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

@@ -0,0 +1,16 @@
+export { default as ColumnFilter, Inputs, List } from './ColumnFilter';
+export * from './EmptyList';
+export * from './ErrorList';
+export * from './TableFooter';
+export * from './virtualScroll';
+export * from './RowErrorState';
+export { default as TableHeader } from './TableHeader';
+export { default as TableLastItem } from './TableLastItem';
+export { default as TableLoading } from './TableLoading';
+export { default as TableLoadingWithCard } from './TableLoadingWithCard';
+export { default as TableNoData } from './TableNoData';
+export { default as TableNoDataWithCard } from './TableNoDataWithCard';
+export { default as TableRow } from './TableRow';
+export { default as TableRowLoading } from './TableRowLoading';
+export { default as TableRowLoadingWithCard } from './TableRowLoadingWithCard';
+export { default as TableRowWithCard } from './TableRowWithCard';

package/build/components/VirtualTable/components/index.js

@@ -0,0 +1,16 @@
+export { default as ColumnFilter, Inputs, List } from './ColumnFilter';
+export * from './EmptyList';
+export * from './ErrorList';
+export * from './TableFooter';
+export * from './virtualScroll';
+export * from './RowErrorState';
+export { default as TableHeader } from './TableHeader';
+export { default as TableLastItem } from './TableLastItem';
+export { default as TableLoading } from './TableLoading';
+export { default as TableLoadingWithCard } from './TableLoadingWithCard';
+export { default as TableNoData } from './TableNoData';
+export { default as TableNoDataWithCard } from './TableNoDataWithCard';
+export { default as TableRow } from './TableRow';
+export { default as TableRowLoading } from './TableRowLoading';
+export { default as TableRowLoadingWithCard } from './TableRowLoadingWithCard';
+export { default as TableRowWithCard } from './TableRowWithCard';

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ListChildComponentProps } from 'react-window';
+export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow }: {
+    isLoadingRow: boolean;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const StyledItemWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    showShadowHighlight?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
+export default ListItemWrapper;

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

@@ -0,0 +1,75 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import { blueCircleLoaderIcon, tableBackgroundLoader, TABLE_ROW_HEIGHT, SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
+import { ActionIcon } from '../../style';
+import { RowErrorState } from '../RowErrorState';
+import { StyledParagraph } from '../TableLastItem';
+import TableRow from '../TableRow';
+export const LastRowContent = React.memo(({ isLoadingRow }) => {
+    const { t } = useTranslation();
+    if (isLoadingRow) {
+        return (_jsxs(Box, Object.assign({ "data-testid": "ListItemWrapper_lastRowContent_isLoadingRow", sx: {
+                height: '24px',
+                width: '24px',
+                borderRadius: '50%',
+                background: 'transparent',
+                position: 'relative',
+            } }, { children: [_jsx(ActionIcon, { sx: { position: 'absolute' }, src: tableBackgroundLoader }), _jsx(ActionIcon, { sx: { position: 'absolute', padding: '3px' }, src: blueCircleLoaderIcon, alt: "tableLoadingSpinnerIcon", className: "spinner-loader", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } })] })));
+    }
+    return _jsx(StyledParagraph, Object.assign({ "data-testid": "ListItemWrapper_lastRowContent" }, { children: t('allRecordsHaveBeenSuccessfullyLoaded') }));
+});
+const createRowClickHandler = (row, onRowClick) => (e) => {
+    var _a;
+    (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
+};
+export const StyledItemWrapper = styled('div', {
+    shouldForwardProp: (props) => props !== 'showShadowHighlight',
+})(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    height: '100%',
+}));
+function ListItemWrapper(_a) {
+    var _b;
+    var { index, style } = _a, _c = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned = false } = _c, restData = __rest(_c, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "limit", "totalCount", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView", "isPinned"]);
+    const lastItemIndex = rows.length - 1;
+    const row = rows[index];
+    const isLoadingRow = isLoading && index === lastItemIndex + 1;
+    const isLoadedRow = index <= newLoadedRowsEndIndex;
+    const rowClickHandler = React.useCallback(createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
+    const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler, isLoadingRow, areAllRowsLoaded, lastItemIndex]);
+    const memoizedListItemComponent = React.useMemo(() => {
+        const lastRowContent = _jsx(LastRowContent, { isLoadingRow: isLoadingRow });
+        const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
+        if (isPinned && isLastRow) {
+            return (_jsx(Box, { sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT } : { height: TABLE_ROW_HEIGHT })), { backgroundColor: '#F6F8FACC' }) }));
+        }
+        if (isLastRow) {
+            return (_jsx(Box, Object.assign({ sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT } : { height: TABLE_ROW_HEIGHT })), { display: 'flex', justifyContent: 'center', alignItems: 'center' }) }, { children: _jsx(Box, Object.assign({ sx: {
+                        backgroundColor: '#F6F8FACC',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        width: '100%',
+                        height: '100%',
+                    } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })) })));
+        }
+        return _jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView }, `row-${index}`);
+    }, [restData, index, row, columns, memoizedRowProps, isSheetView]);
+    return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - ((_b = renderedScrollTopRef === null || renderedScrollTopRef === void 0 ? void 0 : renderedScrollTopRef.current) !== null && _b !== void 0 ? _b : 0), willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
+}
+export default ListItemWrapper;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ListChildComponentProps } from 'react-window';
+export declare const StyledItemWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    showShadowHighlight?: boolean | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare function ListItemWrapperWithCard({ index, style, data: { renderedScrollTopRef, rows, rowProps, isLoading, scrollToIndex, newLoadedRowsEndIndex, areAllRowsLoaded, renderCardComponent }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
+export default ListItemWrapperWithCard;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import TableRowWithCard from '../TableRowWithCard';
+const createRowClickHandler = (row, onRowClick) => (e) => {
+    var _a;
+    (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
+    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row);
+};
+export const StyledItemWrapper = styled('div', {
+    shouldForwardProp: (props) => props !== 'showShadowHighlight',
+})(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    height: '100%',
+}));
+function ListItemWrapperWithCard({ index, style, data: { renderedScrollTopRef, rows, rowProps, isLoading, scrollToIndex, newLoadedRowsEndIndex, areAllRowsLoaded, renderCardComponent }, }) {
+    const lastItemIndex = rows.length - 1;
+    const row = rows[index];
+    const isLoadingRow = isLoading && index === lastItemIndex + 1;
+    const isLoadedRow = index <= newLoadedRowsEndIndex;
+    const rowClickHandler = React.useCallback(createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
+    const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler, isLoadingRow, areAllRowsLoaded, lastItemIndex]);
+    const memoizedListItemComponent = React.useMemo(() => _jsx(TableRowWithCard, { index: index, row: row, renderCardComponent: renderCardComponent, rowProps: memoizedRowProps }, `row-${index}`), [index, row, memoizedRowProps]);
+    return (_jsx("div", Object.assign({ "data-testid": "ListCardWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - renderedScrollTopRef.current, willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListCardWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
+}
+export default ListItemWrapperWithCard;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface VirtualScrollInnerProps {
+    children: React.ReactNode;
+}
+declare const VirtualScrollInner: React.ForwardRefExoticComponent<VirtualScrollInnerProps & React.RefAttributes<HTMLDivElement>>;
+export default VirtualScrollInner;

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

@@ -0,0 +1,20 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Box from '@mui/material/Box';
+const VirtualScrollInner = React.forwardRef((_a, ref) => {
+    var { children } = _a, restProps = __rest(_a, ["children"]);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, Object.assign({ "data-testid": "VirtualScrollInner", className: "VirtualScrollInner", style: { position: 'sticky', top: 0 } }, { children: children })), _jsx("div", Object.assign({ ref: ref }, restProps))] }));
+});
+VirtualScrollInner.displayName = 'VirtualScrollInner';
+export default VirtualScrollInner;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { VariableSizeList, VariableSizeListProps } from 'react-window';
+declare const VirtualScrollList: React.ForwardRefExoticComponent<VariableSizeListProps<any> & {
+    setBackdropVisibility: (isVisible: boolean) => void;
+    scrollToIndex?: number | undefined;
+    listRef?: React.RefObject<VariableSizeList<any>> | undefined;
+    clearBackdropVisibilityTimeout?: number | undefined;
+} & React.RefAttributes<VariableSizeList<any>>>;
+export default VirtualScrollList;

package/build/components/VirtualTable/components/virtualScroll/VirtualScrollList.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 React, { useRef, useCallback, useEffect } from 'react';
+import { VariableSizeList } from 'react-window';
+import VirtualScrollInner from './VirtualScrollInner';
+import VirtualScrollOuter from './VirtualScrollOuter';
+import useScrollBackShadow from '../../hooks/useScrollBackShadow';
+import { VirtualScrollOuterProvider } from '../../context';
+const VirtualScrollList = React.forwardRef((_a, ref) => {
+    var { itemData, children, setBackdropVisibility, scrollToIndex, listRef: externalListRef, onScroll, clearBackdropVisibilityTimeout } = _a, restProps = __rest(_a, ["itemData", "children", "setBackdropVisibility", "scrollToIndex", "listRef", "onScroll", "clearBackdropVisibilityTimeout"]);
+    const { handleBackDropVisibility, clearBackdropVisibility, clearTimer } = useScrollBackShadow({
+        setBackdropVisibility,
+        clearBackdropVisibilityTimeout,
+    });
+    const renderedScrollTopRef = useRef(0);
+    const scrollTopRef = useRef(undefined);
+    const scrollLocked = useRef(false);
+    const internalListRef = useRef(null);
+    const listRef = ref || externalListRef || internalListRef;
+    const scrollTo = useCallback(() => {
+        var _a, _b;
+        clearTimer();
+        if (scrollTopRef.current !== undefined && listRef.current) {
+            scrollLocked.current = false;
+            renderedScrollTopRef.current = scrollTopRef.current;
+            scrollTopRef.current = undefined;
+            handleBackDropVisibility();
+            (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo) === null || _b === void 0 ? void 0 : _b.call(_a, renderedScrollTopRef.current);
+            return true;
+        }
+        clearBackdropVisibility();
+        return false;
+    }, [clearBackdropVisibility, clearTimer, handleBackDropVisibility, listRef]);
+    const handleScroll = React.useCallback((event) => {
+        scrollTopRef.current = event.currentTarget.scrollTop;
+        if (!scrollLocked.current) {
+            scrollLocked.current = true;
+            scrollTo();
+        }
+    }, [scrollTo]);
+    useEffect(() => {
+        var _a, _b;
+        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]);
+    const itemDataInternal = React.useMemo(() => (Object.assign(Object.assign({}, itemData), { renderedScrollTopRef })), [itemData]);
+    const handleOnScroll = React.useCallback((props) => {
+        onScroll === null || onScroll === void 0 ? void 0 : onScroll(props);
+        scrollLocked.current = scrollTo();
+    }, [scrollTo, onScroll]);
+    return (_jsx(VirtualScrollOuterProvider, Object.assign({ value: handleScroll }, { children: _jsx(VariableSizeList, Object.assign({ ref: listRef, "data-testid": "VirtualScrollList", itemData: itemDataInternal, outerElementType: VirtualScrollOuter, innerElementType: VirtualScrollInner }, restProps, { onScroll: handleOnScroll }, { children: children })) })));
+});
+export default VirtualScrollList;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ScrollFnType } from '../../context';
+interface VirtualScrollOuterProps {
+    children: React.ReactNode;
+    onScroll: ScrollFnType;
+}
+declare const VirtualScrollOuter: React.ForwardRefExoticComponent<VirtualScrollOuterProps & React.RefAttributes<HTMLDivElement>>;
+export default VirtualScrollOuter;

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

@@ -0,0 +1,21 @@
+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 React, { useContext } from 'react';
+import { VirtualScrollOuterContext } from '../../context';
+const VirtualScrollOuter = React.forwardRef((_a, ref) => {
+    var { onScroll, children } = _a, restProps = __rest(_a, ["onScroll", "children"]);
+    const handleScroll = useContext(VirtualScrollOuterContext);
+    return (_jsx("div", Object.assign({ className: "VirtualScrollOuter", onScroll: handleScroll, ref: ref }, restProps, { children: children })));
+});
+VirtualScrollOuter.displayName = 'VirtualScrollOuter';
+export default VirtualScrollOuter;

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

@@ -0,0 +1,5 @@
+export * from './ListItemWrapper';
+export { default as ListItemWrapperWithCard } from './ListItemWrapperWithCard';
+export { default as VirtualScrollInner } from './VirtualScrollInner';
+export { default as VirtualScrollList } from './VirtualScrollList';
+export { default as VirtualScrollOuter } from './VirtualScrollOuter';

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

@@ -0,0 +1,5 @@
+export * from './ListItemWrapper';
+export { default as ListItemWrapperWithCard } from './ListItemWrapperWithCard';
+export { default as VirtualScrollInner } from './VirtualScrollInner';
+export { default as VirtualScrollList } from './VirtualScrollList';
+export { default as VirtualScrollOuter } from './VirtualScrollOuter';

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

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import { ScrollFnType } from './context';
+type VirtualScrollOuterProviderProps = {
+    children: ReactNode;
+    value: ScrollFnType;
+};
+export declare const VirtualScrollOuterProvider: ({ children, value }: VirtualScrollOuterProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/VirtualTable/context/Provider.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VirtualScrollOuterContext } from './context';
+export const VirtualScrollOuterProvider = ({ children, value }) => (_jsx(VirtualScrollOuterContext.Provider, Object.assign({ value: value }, { children: children })));

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

@@ -0,0 +1,7 @@
+import { UIEvent, UIEventHandler } from 'react';
+import { ListOnScrollProps } from 'react-window';
+export type ScrollFnType = ((props: ListOnScrollProps) => void) | ((event: UIEvent<HTMLDivElement>) => void) | UIEventHandler<HTMLDivElement>;
+export type VirtualScrollOuterContextValues = {
+    handleScroll?: ScrollFnType;
+};
+export declare const VirtualScrollOuterContext: import("react").Context<ScrollFnType | null>;

package/build/components/VirtualTable/context/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const VirtualScrollOuterContext = createContext(null);

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

@@ -0,0 +1,2 @@
+export * from './context';
+export { VirtualScrollOuterProvider } from './Provider';

package/build/components/VirtualTable/context/index.js

@@ -0,0 +1,2 @@
+export * from './context';
+export { VirtualScrollOuterProvider } from './Provider';

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

@@ -0,0 +1,10 @@
+interface ScrollShadowProps {
+    setBackdropVisibility: (isVisible: boolean) => void;
+    clearBackdropVisibilityTimeout?: number;
+}
+declare function useScrollBackShadow({ setBackdropVisibility, clearBackdropVisibilityTimeout }: ScrollShadowProps): {
+    handleBackDropVisibility: () => void;
+    clearBackdropVisibility: () => void;
+    clearTimer: () => void;
+};
+export default useScrollBackShadow;

package/build/components/VirtualTable/hooks/useScrollBackShadow.js

@@ -0,0 +1,26 @@
+import { useRef, useEffect } from 'react';
+function useScrollBackShadow({ setBackdropVisibility, clearBackdropVisibilityTimeout }) {
+    const timer = useRef(undefined);
+    useEffect(() => {
+        return () => {
+            clearTimeout(timer.current);
+        };
+    }, []);
+    const handleBackDropVisibility = () => {
+        setBackdropVisibility(true);
+    };
+    const clearBackdropVisibility = () => {
+        timer.current = setTimeout(() => {
+            setBackdropVisibility(false);
+        }, clearBackdropVisibilityTimeout || 2000);
+    };
+    const clearTimer = () => {
+        clearTimeout(timer.current);
+    };
+    return {
+        handleBackDropVisibility,
+        clearBackdropVisibility,
+        clearTimer,
+    };
+}
+export default useScrollBackShadow;

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

@@ -0,0 +1,6 @@
+import VirtualTable from './VirtualTable';
+export { default as VirtualTableWithCard } from './VirtualTableWithCard';
+export * from './components';
+export * from './SheetView';
+export { StyledCell } from './style';
+export default VirtualTable;

package/build/components/VirtualTable/index.js

@@ -0,0 +1,6 @@
+import VirtualTable from './VirtualTable';
+export { default as VirtualTableWithCard } from './VirtualTableWithCard';
+export * from './components';
+export * from './SheetView';
+export { StyledCell } from './style';
+export default VirtualTable;