@tap-payments/os-micro-frontend-shared 0.0.81 → 0.0.83

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

@@ -27,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> & {
@@ -304,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/apps.d.ts

@@ -98,6 +98,23 @@ export declare const APP_CODES: {
                     };
                 };
             };
+            retailer: {
+                code: string;
+                functions: {
+                    view: {
+                        code: string;
+                    };
+                    sandbox: {
+                        code: string;
+                    };
+                    jsonApi: {
+                        code: string;
+                    };
+                    reports: {
+                        code: string;
+                    };
+                };
+            };
         };
     };
     acceptance: {

package/build/constants/apps.js

@@ -42,6 +42,10 @@ export const APP_CODES = {
                 code: 'MERCHANT',
                 functions: Object.assign({}, SERVICE_COMMON_FUNCTIONS),
             },
+            retailer: {
+                code: 'RETAILER',
+                functions: Object.assign({}, SERVICE_COMMON_FUNCTIONS),
+            },
         },
     },
     acceptance: {

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/cell/walletStatementTableCellWidth.d.ts

@@ -35,7 +35,7 @@ export declare const walletStatementTableCellWidth: {
         readonly sheet: "400px";
     };
     readonly source: {
-        readonly default: "100px";
+        readonly default: "75px";
         readonly text: "125px";
         readonly sheet: "125px";
     };

package/build/constants/table/cell/walletStatementTableCellWidth.js

@@ -35,7 +35,7 @@ export const walletStatementTableCellWidth = {
         sheet: '400px',
     },
     source: {
-        default: '100px',
+        default: '75px',
         text: '125px',
         sheet: '125px',
     },

package/build/constants/table/cell/walletTableCellWidth.d.ts

@@ -15,7 +15,7 @@ export declare const walletTableCellWidth: {
         readonly sheet: "250px";
     };
     readonly source: {
-        readonly default: "70px";
+        readonly default: "75px";
         readonly text: "125px";
         readonly sheet: "125px";
     };

package/build/constants/table/cell/walletTableCellWidth.js

@@ -15,7 +15,7 @@ export const walletTableCellWidth = {
         sheet: '250px',
     },
     source: {
-        default: '70px',
+        default: '75px',
         text: '125px',
         sheet: '125px',
     },

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;