@tap-payments/os-micro-frontend-shared 0.0.78 → 0.0.79

package/build/components/VirtualTable/SheetView/hooks/usePinnedColumns.d.ts

@@ -0,0 +1,11 @@
+import type { IColumnProps } from '../../../../types/index.js';
+export declare const usePinnedColumns: (columns: readonly IColumnProps[], isPinnable: boolean, onColumnPin?: ((columnId: string, isPinned: boolean) => void) | undefined) => {
+    pinnedStartColumns: string[];
+    pinnedEndColumns: string[];
+    handleColumnPin: (columnId: string, position?: 'start' | 'end' | 'unpin') => void;
+    pinnedStartColumnsData: IColumnProps<any>[];
+    pinnedEndColumnsData: IColumnProps<any>[];
+    unpinnedColumnsData: IColumnProps<any>[];
+    orderedColumns: IColumnProps<any>[];
+    lastColumnId: string | null;
+};

package/build/components/VirtualTable/SheetView/hooks/usePinnedColumns.js

@@ -0,0 +1,62 @@
+import { useState, useCallback, useMemo } from 'react';
+export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
+    const [pinnedStartColumns, setPinnedStartColumns] = useState(() => {
+        const userPinned = isPinnable ? columns.filter((c) => c.pinned === 'start').map((c) => c.id) : [];
+        const defaultPinned = columns.filter((c) => c.isDefaultPinned).map((c) => c.id);
+        return Array.from(new Set([...defaultPinned, ...userPinned]));
+    });
+    const [pinnedEndColumns, setPinnedEndColumns] = useState(() => {
+        return isPinnable ? columns.filter((c) => c.pinned === 'end').map((c) => c.id) : [];
+    });
+    const handleColumnPin = useCallback((columnId, position = 'start') => {
+        if (!isPinnable)
+            return;
+        let newPinnedStart = [...pinnedStartColumns];
+        let newPinnedEnd = [...pinnedEndColumns];
+        if (position === 'unpin') {
+            newPinnedStart = newPinnedStart.filter((id) => id !== columnId);
+            newPinnedEnd = newPinnedEnd.filter((id) => id !== columnId);
+        }
+        else if (position === 'start') {
+            newPinnedStart = [...newPinnedStart.filter((id) => id !== columnId), columnId];
+            newPinnedEnd = newPinnedEnd.filter((id) => id !== columnId);
+        }
+        else if (position === 'end') {
+            newPinnedEnd = [...newPinnedEnd.filter((id) => id !== columnId), columnId];
+            newPinnedStart = newPinnedStart.filter((id) => id !== columnId);
+        }
+        setPinnedStartColumns(newPinnedStart);
+        setPinnedEndColumns(newPinnedEnd);
+        const isPinned = newPinnedStart.includes(columnId) || newPinnedEnd.includes(columnId);
+        onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, isPinned);
+    }, [pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable]);
+    const shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+    const { pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData } = useMemo(() => {
+        const start = shownColumns.filter((column) => pinnedStartColumns.includes(column.id));
+        const end = shownColumns.filter((column) => pinnedEndColumns.includes(column.id));
+        const unpinned = shownColumns.filter((column) => !pinnedStartColumns.includes(column.id) && !pinnedEndColumns.includes(column.id));
+        const sortedStart = start.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); });
+        const sortedEnd = end.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); });
+        const sortedUnpinned = unpinned.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); });
+        return {
+            pinnedStartColumnsData: sortedStart,
+            pinnedEndColumnsData: sortedEnd,
+            unpinnedColumnsData: sortedUnpinned,
+        };
+    }, [shownColumns, pinnedStartColumns, pinnedEndColumns]);
+    const orderedColumns = useMemo(() => [...pinnedStartColumnsData, ...unpinnedColumnsData, ...pinnedEndColumnsData], [pinnedStartColumnsData, unpinnedColumnsData, pinnedEndColumnsData]);
+    const lastColumnId = useMemo(() => {
+        const lastCol = orderedColumns[orderedColumns.length - 1];
+        return lastCol ? lastCol.id : null;
+    }, [orderedColumns]);
+    return {
+        pinnedStartColumns,
+        pinnedEndColumns,
+        handleColumnPin,
+        pinnedStartColumnsData,
+        pinnedEndColumnsData,
+        unpinnedColumnsData,
+        orderedColumns,
+        lastColumnId,
+    };
+};

package/build/components/VirtualTable/SheetView/hooks/useSynchronizedScroll.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { VariableSizeList, ListOnScrollProps } from 'react-window';
+export declare const useSynchronizedScroll: () => {
+    pinnedStartVirtualListRef: import("react").RefObject<VariableSizeList<any>>;
+    scrollableVirtualListRef: import("react").RefObject<VariableSizeList<any>>;
+    pinnedEndVirtualListRef: import("react").RefObject<VariableSizeList<any>>;
+    handleScroll: ({ scrollOffset }: ListOnScrollProps, source: 'start' | 'end' | 'scrollable') => void;
+};

package/build/components/VirtualTable/SheetView/hooks/useSynchronizedScroll.js

@@ -0,0 +1,30 @@
+import { useRef, useCallback } from 'react';
+export const useSynchronizedScroll = () => {
+    const pinnedStartVirtualListRef = useRef(null);
+    const scrollableVirtualListRef = useRef(null);
+    const pinnedEndVirtualListRef = useRef(null);
+    const isScrollingSyncRef = useRef(false);
+    const handleScroll = useCallback(({ scrollOffset }, source) => {
+        if (isScrollingSyncRef.current)
+            return;
+        isScrollingSyncRef.current = true;
+        if (source !== 'start' && pinnedStartVirtualListRef.current) {
+            pinnedStartVirtualListRef.current.scrollTo(scrollOffset);
+        }
+        if (source !== 'end' && pinnedEndVirtualListRef.current) {
+            pinnedEndVirtualListRef.current.scrollTo(scrollOffset);
+        }
+        if (source !== 'scrollable' && scrollableVirtualListRef.current) {
+            scrollableVirtualListRef.current.scrollTo(scrollOffset);
+        }
+        requestAnimationFrame(() => {
+            isScrollingSyncRef.current = false;
+        });
+    }, []);
+    return {
+        pinnedStartVirtualListRef,
+        scrollableVirtualListRef,
+        pinnedEndVirtualListRef,
+        handleScroll,
+    };
+};

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

@@ -0,0 +1,3 @@
+export { default as SheetViewVirtualTable } from './SheetViewVirtualTable';
+export { default as SheetViewTableHeader } from './SheetViewTableHeader';
+export * from './style';

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

@@ -0,0 +1,3 @@
+export { default as SheetViewVirtualTable } from './SheetViewVirtualTable';
+export { default as SheetViewTableHeader } from './SheetViewTableHeader';
+export * from './style';

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

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export declare const ActionIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const ColumnIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const PinIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isPinned: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+interface StyledHeaderProps {
+    showBackDrop: boolean;
+}
+export declare const StyledHeader: import("@emotion/styled").StyledComponent<import("@mui/material").TableHeadOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+    ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+}, "className" | "style" | "classes" | "children" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledHeaderProps, {}, {}>;
+interface StyledMUITableRowProps {
+    component: string;
+}
+export declare const StyledMUITableRow: 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;
+}, "className" | "style" | "classes" | "children" | "sx" | "hover" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledMUITableRowProps, {}, {}>;
+export declare const SheetViewVirtualTableWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PinnedStartColumnWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    width: number;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, {}, {}>;
+export declare const PinnedEndColumnWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    width: number;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, {}, {}>;
+export declare const MainTableWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    hasPinnedStart: boolean;
+    hasPinnedEnd: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const UnpinnedTableHeaderWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

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

@@ -0,0 +1,86 @@
+import { styled } from '@mui/material/styles';
+import { TableHead } from '@mui/material';
+import MUITableRow from '@mui/material/TableRow';
+export const ActionIcon = styled('img')(() => ({
+    width: '13.3px',
+    height: '13.3px',
+}));
+export const ColumnIcon = styled('img')(() => ({
+    width: '8px',
+    height: '6.4px',
+    cursor: 'pointer',
+}));
+export const PinIconContainer = styled('div')(({ theme, isPinned }) => ({
+    width: '16px',
+    height: 'auto',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '2px',
+    padding: '2px',
+    transition: 'all 0.2s ease',
+}));
+export const StyledHeader = styled(TableHead, {
+    shouldForwardProp: (prop) => prop !== 'showBackDrop',
+})(({ showBackDrop, theme }) => ({
+    width: '100%',
+    minWidth: 'fit-content',
+    flex: '0 0 auto',
+    boxShadow: showBackDrop ? theme.shadows[23] : 'none',
+    backgroundColor: theme.palette.background.default,
+    zIndex: 1,
+}));
+export const StyledMUITableRow = styled(MUITableRow)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-start',
+    width: '100%',
+    minWidth: 'fit-content',
+    height: '28px',
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.primary.light,
+}));
+export const SheetViewVirtualTableWrapper = styled('div')({
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+});
+const PinnedColumnBase = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'width',
+})(({ theme, width }) => ({
+    width: `${width}px`,
+    zIndex: 10,
+    flex: '0 0 auto',
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+    backgroundColor: theme.palette.primary.light,
+    border: '1px solid #F2F2F2',
+}));
+export const PinnedStartColumnWrapper = styled(PinnedColumnBase)({
+    marginLeft: '32px',
+    boxShadow: '4px 0px 24px 0px #00000014',
+});
+export const PinnedEndColumnWrapper = styled(PinnedColumnBase)({
+    marginRight: '32px',
+    boxShadow: '-4px 0px 24px 0px #00000014',
+});
+export const MainTableWrapper = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'hasPinnedStart' && prop !== 'hasPinnedEnd',
+})(({ hasPinnedStart, hasPinnedEnd }) => ({
+    flex: '1 1 auto',
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    border: '1px solid #F2F2F2',
+    marginLeft: hasPinnedStart ? '0' : '32px',
+    marginRight: hasPinnedEnd ? '0' : '32px',
+    position: 'relative',
+}));
+export const UnpinnedTableHeaderWrapper = styled('div')({
+    flexShrink: 0,
+    borderBottom: '1px solid #E0E0E0',
+    height: 'auto',
+});

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

@@ -6,5 +6,5 @@ export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow }
 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, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
+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

@@ -44,7 +44,8 @@ export const StyledItemWrapper = styled('div', {
     height: '100%',
 }));
 function ListItemWrapper(_a) {
-    var { index, style } = _a, _b = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView } = _b, restData = __rest(_b, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "limit", "totalCount", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView"]);
+    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;
@@ -54,6 +55,9 @@ function ListItemWrapper(_a) {
     const memoizedListItemComponent = React.useMemo(() => {
         const lastRowContent = _jsx(LastRowContent, { isLoadingRow: isLoadingRow });
         const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
+        if (isPinned && isLastRow) {
+            return _jsx(Box, { sx: { height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT, backgroundColor: '#F6F8FACC' } });
+        }
         if (isLastRow) {
             return (_jsx(Box, Object.assign({ sx: {
                     height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT,
@@ -71,6 +75,6 @@ function ListItemWrapper(_a) {
         }
         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) - renderedScrollTopRef.current, willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
+    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/VirtualScrollList.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { VariableSizeList, VariableSizeListProps } from 'react-window';
-type ExtendedVariableSizeListProps = VariableSizeListProps & {
+declare const VirtualScrollList: React.ForwardRefExoticComponent<VariableSizeListProps<any> & {
     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;
+    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

@@ -16,16 +16,17 @@ import VirtualScrollInner from './VirtualScrollInner';
 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"]);
+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 = externalListRef || internalListRef;
+    const listRef = ref || externalListRef || internalListRef;
     const scrollTo = useCallback(() => {
         var _a, _b;
         clearTimer();
@@ -54,9 +55,10 @@ function VirtualScrollList(_a) {
         }
     }, [scrollToIndex, listRef]);
     const itemDataInternal = React.useMemo(() => (Object.assign(Object.assign({}, itemData), { renderedScrollTopRef })), [itemData]);
-    const handleOnScroll = React.useCallback(() => {
+    const handleOnScroll = React.useCallback((props) => {
+        onScroll === null || onScroll === void 0 ? void 0 : onScroll(props);
         scrollLocked.current = scrollTo();
-    }, [scrollTo]);
-    return (_jsx(VirtualScrollOuterProvider, Object.assign({ value: handleScroll }, { children: _jsx(VariableSizeList, Object.assign({ ref: listRef, "data-testid": "VirtualScrollList", itemData: itemDataInternal, outerElementType: VirtualScrollOuter, innerElementType: VirtualScrollInner, onScroll: handleOnScroll }, restProps, { children: children })) })));
-}
+    }, [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/hooks/useScrollBackShadow.d.ts

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

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

@@ -1,5 +1,5 @@
 import { useRef, useEffect } from 'react';
-function useScrollBackShadow({ setBackdropVisibility }) {
+function useScrollBackShadow({ setBackdropVisibility, clearBackdropVisibilityTimeout }) {
     const timer = useRef(undefined);
     useEffect(() => {
         return () => {
@@ -12,7 +12,7 @@ function useScrollBackShadow({ setBackdropVisibility }) {
     const clearBackdropVisibility = () => {
         timer.current = setTimeout(() => {
             setBackdropVisibility(false);
-        }, 2000);
+        }, clearBackdropVisibilityTimeout || 2000);
     };
     const clearTimer = () => {
         clearTimeout(timer.current);

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

@@ -1,5 +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

@@ -1,5 +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/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 interface TableWrapperProps {
     showNoDataView?: boolean;
     isSheetView?: boolean;
@@ -28,7 +27,8 @@ export declare const StyledVirtualList: import("@emotion/styled").StyledComponen
     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, {}, {}>;
+    clearBackdropVisibilityTimeout?: number | undefined;
+} & import("react").RefAttributes<import("react-window").VariableSizeList<any>> & 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;
 }, "className" | "style" | "classes" | "children" | "sx" | "hover" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
@@ -305,9 +305,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/VirtualTable/style.js

@@ -32,6 +32,9 @@ export const StyledCell = styled(TableCell, {
     shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView'].includes(prop),
 })(({ theme, isLast, isFirst, isSheetView }) => (Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: theme.palette.grey[700], fontSize: theme.typography.caption.fontSize, height: '100%', fontWeight: theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center' }, (isSheetView && {
     borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
+    paddingInline: '0.375rem !important',
+    paddingLeft: '0.375rem !important',
+    paddingRight: '0.375rem !important',
 }))));
 export const StyledVirtualList = styled(VirtualScrollList, {
     shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),

package/build/components/index.d.ts

@@ -12,6 +12,7 @@ export { default as Dialog, DialogToolbar } from './Dialog';
 export { default as Tooltip } from './Tooltip';
 export * from './RFH';
 export { default as VirtualTable, TableRowLoading, TableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, } from './VirtualTable';
+export { default as SheetViewVirtualTable } from './VirtualTable/SheetView/SheetViewVirtualTable';
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
 export { default as StatusButton, ChevronIcon, type ChevronIconProps, type StatusButtonIcon, type StatusButtonProps } from './StatusButton';

package/build/components/index.js

@@ -12,6 +12,7 @@ export { default as Dialog, DialogToolbar } from './Dialog';
 export { default as Tooltip } from './Tooltip';
 export * from './RFH';
 export { default as VirtualTable, TableRowLoading, TableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, } from './VirtualTable';
+export { default as SheetViewVirtualTable } from './VirtualTable/SheetView/SheetViewVirtualTable';
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
 export { default as StatusButton, ChevronIcon } from './StatusButton';

package/build/constants/assets.d.ts

@@ -326,6 +326,8 @@ export declare const authenticationBiometricIcon: string;
 export declare const authenticationDeviceIcon: string;
 export declare const authenticationIssuerIcon: string;
 export declare const authenticationSchemeIcon: string;
+export declare const pinIcon: string;
+export declare const unpinIcon: string;
 export declare const switcherIcon: string;
 export declare const tokenSavedStatusIcon: string;
 export declare const tokenTransactedStatusIcon: string;

package/build/constants/assets.js

@@ -327,6 +327,8 @@ export const authenticationBiometricIcon = `${lightUrl}/status/authenticationBio
 export const authenticationDeviceIcon = `${lightUrl}/status/authenticationDevice.svg`;
 export const authenticationIssuerIcon = `${lightUrl}/status/authenticationIssuer.svg`;
 export const authenticationSchemeIcon = `${lightUrl}/status/authenticationScheme.svg`;
+export const pinIcon = `${lightUrl}/pin.svg`;
+export const unpinIcon = `${lightUrl}/unpin.svg`;
 export const switcherIcon = `${appBaseUrl}/switcher.svg`;
 export const tokenSavedStatusIcon = `${lightUrl}/status/table/tokensSaved.svg`;
 export const tokenTransactedStatusIcon = `${lightUrl}/status/table/tokensTransacted.svg`;

package/build/constants/table.d.ts

@@ -3,4 +3,4 @@ export declare const TABLE_CONTENT_ROW_HEIGHT = 70;
 export declare const TABLE_ROW_HEIGHT = 57;
 export declare const TABLE_THRESHOLD = 200;
 export declare const TABLE_LIST_OVER_SCAN = 5;
-export declare const SHEET_VIEW_TABLE_ROW_HEIGHT = 24;
+export declare const SHEET_VIEW_TABLE_ROW_HEIGHT = 28;

package/build/constants/table.js

@@ -3,4 +3,4 @@ export const TABLE_CONTENT_ROW_HEIGHT = 70;
 export const TABLE_ROW_HEIGHT = 57;
 export const TABLE_THRESHOLD = 200;
 export const TABLE_LIST_OVER_SCAN = 5;
-export const SHEET_VIEW_TABLE_ROW_HEIGHT = 24;
+export const SHEET_VIEW_TABLE_ROW_HEIGHT = 28;

package/build/types/table.d.ts

@@ -30,9 +30,12 @@ export interface IColumnProps<R = any> {
     sortable?: boolean;
     hidden?: boolean;
     order?: number;
+    pinned?: 'start' | 'end';
+    pinnable?: boolean;
     cellStyle?: React.CSSProperties;
     headerStyle?: React.CSSProperties;
     filter?: IColumnFilter;
+    isDefaultPinned?: boolean;
 }
 export interface TableFooterProps extends BoxProps {
     totalCount?: number;