@tap-payments/os-micro-frontend-shared 0.0.90 → 0.0.91

package/build/components/TableCells/CustomCells/ActionCell/constant.d.ts

@@ -25,4 +25,7 @@ export declare const actionIcons: {
     reverse: string;
     destination: string;
     invoice: string;
+    users: string;
+    brand: string;
+    clipboard: string;
 };

package/build/components/TableCells/CustomCells/ActionCell/constant.js

@@ -1,5 +1,5 @@
 import { BadgeVariants } from '../../../CountBadge';
-import { flagIcon, clockIcon, disputeIcon, redFlagIcon, cancelledIcon, closedFlagIcon, orangeFlagIcon, refundInitiatedIcon, viewInvoiceIcon, reverseActionIcon, voidedIcon, capturedDropdownIcon, destinationReversedTableIcon, } from '../../../../constants/index.js';
+import { flagIcon, clockIcon, disputeIcon, redFlagIcon, cancelledIcon, closedFlagIcon, orangeFlagIcon, refundInitiatedIcon, viewInvoiceIcon, reverseActionIcon, voidedIcon, capturedDropdownIcon, destinationReversedTableIcon, brandPlaceholderIcon, usersIcon, clipboardIcon, } from '../../../../constants/index.js';
 export const flags = {
     GRAY: { icon: closedFlagIcon, color: '#CFCFCF' },
     ORANGE: { icon: orangeFlagIcon, color: '#FFD503' },
@@ -21,4 +21,7 @@ export const actionIcons = {
     reverse: reverseActionIcon,
     destination: destinationReversedTableIcon,
     invoice: viewInvoiceIcon,
+    users: usersIcon,
+    brand: brandPlaceholderIcon,
+    clipboard: clipboardIcon,
 };

package/build/components/TableCells/CustomCells/ActionCell/hooks/useActionCell.d.ts

@@ -12,7 +12,7 @@ export declare function useActionCell({ actions, isDropdownShown, onCloseDropdow
         label: string;
         onClick: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
         onRightClick?: ((e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void) | undefined;
-        icon: "reverse" | "refund" | "destination" | "cancel" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice";
+        icon: "brand" | "users" | "reverse" | "refund" | "destination" | "cancel" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard";
         isLoading?: boolean | undefined;
         isError?: boolean | undefined;
         isSuccess?: boolean | undefined;

package/build/components/TableCells/CustomCells/ActionCell/style.d.ts

@@ -280,5 +280,5 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     sizes?: string | undefined;
     srcSet?: string | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLImageElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    icon?: "reverse" | "refund" | "destination" | "cancel" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | undefined;
+    icon?: "brand" | "users" | "reverse" | "refund" | "destination" | "cancel" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard" | undefined;
 }, {}, {}>;

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

@@ -79,6 +79,8 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         };
         return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: tableItemsCount, itemSize: () => rowHeight, itemData: currentItemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setShowBackdrop, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: handleScrollCallback, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
                         overflowX: isPinned ? 'hidden' : 'auto',
+                        paddingBottom: '12px',
+                        backgroundColor: isPinned ? 'transparent' : theme.palette.background.default,
                     } }, { children: ListItemWrapper }))) })) })));
     }, [
         itemsCount,
@@ -112,7 +114,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
                             minWidth: 'fit-content',
                         } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) })));
     };
-    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_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: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_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({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [showNoDataView ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_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: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_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, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                                                     width: '100%',
                                                     minWidth: 'fit-content',
                                                 } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "SheetViewVirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));

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

@@ -86,6 +86,7 @@ export const MainTableWrapper = styled('div', {
     marginLeft: hasPinnedStart ? '0' : '32px',
     marginRight: hasPinnedEnd ? '0' : '32px',
     position: 'relative',
+    scrollbarWidth: 'auto',
 }));
 export const UnpinnedTableHeaderWrapper = styled('div')({
     flexShrink: 0,

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

@@ -56,15 +56,10 @@ function ListItemWrapper(_a) {
         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' } });
+            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: {
-                    height: isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT,
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                } }, { children: _jsx(Box, Object.assign({ sx: {
+            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',

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

@@ -41,6 +41,7 @@ export declare const StyledTableBox: import("@emotion/styled").StyledComponent<i
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     showBackgroundColor: boolean;
     showNoDataView: boolean;
+    scrollable?: boolean | undefined;
 }, {}, {}>;
 export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;

package/build/components/VirtualTable/style.js

@@ -82,8 +82,8 @@ export const StyledTableRow = styled(MUITableRow, {
     },
 }))))));
 export const StyledTableBox = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'showBackgroundColor' && prop !== 'showNoDataView',
-})(({ theme, showBackgroundColor, showNoDataView }) => ({
+    shouldForwardProp: (prop) => prop !== 'showBackgroundColor' && prop !== 'showNoDataView' && prop !== 'scrollable',
+})(({ theme, showBackgroundColor, showNoDataView, scrollable }) => ({
     position: 'relative',
     backgroundColor: showBackgroundColor ? theme.palette.background.default : 'transparent',
     height: '100%',
@@ -91,6 +91,24 @@ export const StyledTableBox = styled(Box, {
     paddingBottom: showBackgroundColor ? '52px' : '0',
     display: 'flex',
     flexDirection: 'column',
+    '&:hover': {
+        scrollbarWidth: scrollable ? 'auto' : 'none',
+    },
+    '&::-webkit-scrollbar': {
+        display: 'block',
+        height: '13px',
+    },
+    '&::-webkit-scrollbar-track': {
+        background: 'white',
+        border: '1px solid #F2F2F2',
+    },
+    '&::-webkit-scrollbar-thumb': {
+        backgroundColor: '#DADCDF',
+        borderRadius: '32px',
+        border: '3px solid transparent',
+        backgroundClip: 'content-box',
+        minHeight: '20px',
+    },
 }));
 export const ActionIcon = styled(motion.img)(() => ({
     width: '24px',

package/build/constants/assets.d.ts

@@ -351,6 +351,8 @@ export declare const agreementInstallmentIcon: string;
 export declare const agreementSavedCardIcon: string;
 export declare const agreementSubscriptionIcon: string;
 export declare const brandPlaceholderIcon: string;
+export declare const usersIcon: string;
+export declare const clipboardIcon: string;
 export declare const noAgreementIcon: string;
 export declare const getPaymentMethodsIcon: (source: string) => string;
 export declare const getCountriesIcon: (source: string) => string;

package/build/constants/assets.js

@@ -352,6 +352,8 @@ export const agreementInstallmentIcon = `${lightUrl}/status/InstallmentAgreement
 export const agreementSavedCardIcon = `${lightUrl}/status/CardAgreementIcon.svg`;
 export const agreementSubscriptionIcon = `${lightUrl}/status/SubscriptionAgreementIcon.svg`;
 export const brandPlaceholderIcon = `${lightUrl}/brandPlaceholder.svg`;
+export const usersIcon = `${lightUrl}/users-icons.svg`;
+export const clipboardIcon = `${lightUrl}/Board-Icons.svg`;
 export const noAgreementIcon = `${appBaseUrl}/No Agreement.svg`;
 export const getPaymentMethodsIcon = (source) => `${lightUrl}/payment-method/v2/${source}.svg`;
 export const getCountriesIcon = (source) => `${lightUrl}/country/${source}.svg`;

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.90",
+  "version": "0.0.91",
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",