@tap-payments/os-micro-frontend-shared 0.0.258-test.2 → 0.0.258-test.3

package/build/components/VirtualTable/components/TableHeader.js

@@ -41,45 +41,70 @@ const StyledMUITableRow = styled(MUITableRow, {
     paddingBlock: 0,
 }))));
 function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, isSheetView }) {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
+    const [sortAnchorEl, setSortAnchorEl] = useState(null);
+    const sortOpen = Boolean(sortAnchorEl);
+    const [openFilterColumnId, setOpenFilterColumnId] = useState(null);
+    const [filterAnchorEl, setFilterAnchorEl] = useState(null);
     const theme = useTheme();
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
+    const handleSortClick = (event) => {
+        setSortAnchorEl(event.currentTarget);
     };
-    const handleClose = () => {
-        setAnchorEl(null);
+    const handleColumnHeaderClick = (event, column) => {
+        if (column.filter) {
+            setOpenFilterColumnId(column.id);
+            setFilterAnchorEl(event.currentTarget);
+            return;
+        }
+        if (column.sortable) {
+            setSortAnchorEl(event.currentTarget);
+        }
+    };
+    const handleFilterOpen = (columnId) => (event) => {
+        setOpenFilterColumnId(columnId);
+        setFilterAnchorEl(event.currentTarget);
+    };
+    const handleFilterClose = () => {
+        setOpenFilterColumnId(null);
+        setFilterAnchorEl(null);
+    };
+    const handleSortClose = () => {
+        setSortAnchorEl(null);
     };
     const handleSortingOption = (columnId, order) => {
         if (columnId) {
             onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort({
                 [columnId]: order,
             });
-            handleClose();
+            handleSortClose();
         }
     };
     return (_jsxs(StyledHeader, Object.assign({ component: "nav", "data-testid": "VirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { sx: Object.assign({ width: '100%', minWidth: 'auto', overflowX: 'scroll' }, headerProps === null || headerProps === void 0 ? void 0 : headerProps.sx) }, { children: [_jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "VirtualTable_TableHeader_StyledMUITableRow", isSheetView: isSheetView }, { children: columns.map((column, colIndex) => {
                     const { header, id, align, headerStyle, sortable, filter } = column;
                     const isFirst = id === columns[0].id;
                     const isLast = id === columns[columns.length - 1].id;
-                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_TableHeader_StyledCell", "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: isFirst, isLast: isLast, sx: Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', fontWeight: 600 }, headerStyle), isSheetView: isSheetView }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id })] }), `${id}-${colIndex}`));
-                }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
+                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_TableHeader_StyledCell", "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: isFirst, isLast: isLast, onClick: (event) => handleColumnHeaderClick(event, column), sx: Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', fontWeight: 600, cursor: column.filter || column.sortable ? 'pointer' : 'default' }, headerStyle), isSheetView: isSheetView }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { externalAnchorEl: openFilterColumnId === id ? filterAnchorEl : null, externalOpen: openFilterColumnId === id, onExternalOpen: handleFilterOpen(id), onExternalClose: handleFilterClose }))), sortable && (_jsx(ColumnIcon, { onClick: sortable
+                                    ? (event) => {
+                                        event.stopPropagation();
+                                        handleSortClick(event);
+                                    }
+                                    : undefined, src: columnIcon, alt: "column-icon", "data-id": id }))] }), `${id}-${colIndex}`));
+                }) })), _jsx(Dropdown, { open: sortOpen, onClose: handleSortClose, anchorEl: sortAnchorEl, menuItems: [
                     {
                         label: 'Sort A-Z',
                         name: 'asc',
                         icon: _jsx(ActionIcon, { src: sortAzIcon, alt: "sort-icon" }),
-                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'asc',
+                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id) || '']) === 'asc',
                         onClick: () => {
-                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'asc');
+                            handleSortingOption(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id, 'asc');
                         },
                     },
                     {
                         label: 'Sort Z-A',
                         name: 'desc',
                         icon: _jsx(ActionIcon, { src: sortZaIcon, alt: "sort-icon" }),
-                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'desc',
+                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id) || '']) === 'desc',
                         onClick: () => {
-                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'desc');
+                            handleSortingOption(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id, 'desc');
                         },
                     },
                 ] })] })));

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

@@ -3,7 +3,7 @@ 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';
-import { getBorderStyle } from '../utils/getBorderStyle';
+import { getSelectionStyles } from '../utils/getSelectionStyles';
 function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
     const renderCell = (column) => {
         const { render, format, selector } = column;
@@ -19,13 +19,13 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
             const isCellSelected = selectedCell === cellKey;
             const isColumnSelected = selectedColumn === columnIdStr;
             const isSelected = isCellSelected || isColumnSelected;
-            const borderStyle = getBorderStyle({
+            const selectionStyles = getSelectionStyles({
                 isSelected,
                 isCellSelected,
                 isColumnSelected,
                 isLastRow,
             });
-            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, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event), sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, borderStyle), column.cellStyle), isSheetView: isSheetView }, { children: renderCell(column) }), `${column.id}-${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, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event), sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected && (column === null || column === void 0 ? void 0 : column.isDefaultPinned) }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
         }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow]);
     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));
 }

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

@@ -18,6 +18,7 @@ export declare const StyledCell: import("@emotion/styled").StyledComponent<impor
     isLast: boolean;
     isFirst: boolean;
     isSheetView?: boolean | undefined;
+    isSelected?: boolean | undefined;
 }, {}, {}>;
 interface StyledVirtualListProps {
     areTotalRowsNotFillingHeight: boolean;

package/build/components/VirtualTable/style.js

@@ -30,11 +30,16 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
 }));
 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 && {
+})(({ theme, isLast, isFirst, isSheetView, isSelected }) => (Object.assign(Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: isSheetView ? theme.palette.text.primary : theme.palette.grey[700], fontSize: isSheetView ? theme.typography.subtitle1.fontSize : theme.typography.caption.fontSize, height: '100%', fontWeight: isSheetView ? 400 : theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center' }, (isSheetView && {
     borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
     paddingInline: '8px !important',
     paddingLeft: '8px !important',
     paddingRight: '8px !important',
+})), (isSelected && {
+    color: '#1F88D0 !important',
+    '& *': {
+        color: '#1F88D0 !important',
+    },
 }))));
 export const StyledVirtualList = styled(VirtualScrollList, {
     shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),

package/build/components/VirtualTable/utils/{getBorderStyle.d.ts → getSelectionStyles.d.ts}

@@ -1,12 +1,13 @@
-interface GetBorderStyleParams {
+interface GetSelectionStylesParams {
     isSelected: boolean;
     isCellSelected: boolean;
     isColumnSelected: boolean;
     isLastRow: boolean;
 }
-export declare const getBorderStyle: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetBorderStyleParams) => {
+export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetSelectionStylesParams) => {
     border?: undefined;
     backgroundColor?: undefined;
+    color?: undefined;
     borderWidth?: undefined;
     borderStyle?: undefined;
     borderColor?: undefined;
@@ -18,6 +19,7 @@ export declare const getBorderStyle: ({ isSelected, isCellSelected, isColumnSele
 } | {
     border: string;
     backgroundColor: string;
+    color: string;
     borderWidth?: undefined;
     borderStyle?: undefined;
     borderColor?: undefined;
@@ -31,11 +33,12 @@ export declare const getBorderStyle: ({ isSelected, isCellSelected, isColumnSele
     borderStyle: string;
     borderColor: string;
     borderBottom: string;
-    backgroundColor: string;
     height: string;
     minHeight: string;
     display: string;
     alignItems: string;
     border?: undefined;
+    backgroundColor?: undefined;
+    color?: undefined;
 };
 export {};

package/build/components/VirtualTable/utils/{getBorderStyle.js → getSelectionStyles.js}

@@ -1,19 +1,19 @@
-export const getBorderStyle = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
+export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
     if (!isSelected)
         return {};
     if (isCellSelected && !isColumnSelected) {
         return {
-            border: '0.5px solid #1F88D0',
-            backgroundColor: '#F4F9FC',
+            border: '2px solid #1F88D0',
+            backgroundColor: 'white',
+            color: '#1F88D0',
         };
     }
     if (isColumnSelected) {
         return {
-            borderWidth: isLastRow ? '0px 0.5px 1px 0.5px' : '0px 0.5px 0px 0.5px',
+            borderWidth: isLastRow ? '0px 1.5px 1px 1.5px' : '0px 1.5px 0px 1.5px',
             borderStyle: 'solid',
             borderColor: '#1F88D0',
-            borderBottom: !isLastRow ? '1px solid #F2F2F2' : '0.5px solid #1F88D0',
-            backgroundColor: '#F4F9FC',
+            borderBottom: !isLastRow ? '1px solid #F2F2F2' : '1.5px solid #1F88D0',
             height: '100%',
             minHeight: '28px',
             display: 'flex',

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

@@ -11,7 +11,9 @@ export declare const Header: import("@emotion/styled").StyledComponent<import("@
 export declare const ListItemStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
-export declare const ItemText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<any, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+export declare const ItemText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const ItemTextWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const TitleStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<any, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
+export declare const TitleStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
     component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const StyledWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/constants/index.d.ts

@@ -10,3 +10,4 @@ export * from './timezones';
 export * from './currency';
 export * from './table';
 export * from './toggleOptions';
+export * from './payment';

package/build/constants/index.js

@@ -10,3 +10,4 @@ export * from './timezones';
 export * from './currency';
 export * from './table';
 export * from './toggleOptions';
+export * from './payment';

package/build/constants/payment.d.ts

@@ -0,0 +1,5 @@
+export declare const PAYMENT_TYPES: {
+    name: string;
+    label: string;
+    icon: string;
+}[];

package/build/constants/payment.js

@@ -0,0 +1,38 @@
+import { lightUrl } from './assets';
+export const PAYMENT_TYPES = [
+    {
+        name: 'CARD',
+        label: 'Card',
+        icon: `${lightUrl}/payment-method/card.svg`,
+    },
+    {
+        name: 'EXPRESS',
+        label: 'Express Checkout',
+        icon: `${lightUrl}/express_checkout.svg`,
+    },
+    {
+        name: 'DEVICE',
+        label: 'Device',
+        icon: `${lightUrl}/device.svg`,
+    },
+    {
+        name: 'PT_WALLET',
+        label: 'Pass-Thru Wallet',
+        icon: `${lightUrl}/passThruWallet.svg`,
+    },
+    {
+        name: 'SV_WALLET',
+        label: 'Stored Value Wallet',
+        icon: `${lightUrl}/storedValueWallet.svg`,
+    },
+    {
+        name: 'BNPL',
+        label: 'Buy Now Pay Later',
+        icon: `${lightUrl}/buyNowPayLater.svg`,
+    },
+    {
+        name: 'CASH',
+        label: 'Cash Wallet',
+        icon: `${lightUrl}/cash.svg`,
+    },
+];

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

@@ -77,7 +77,7 @@ export declare const chargeTableCellWidth: {
     readonly merchant: {
         readonly default: "100px";
         readonly text: "150px";
-        readonly sheet: "115px";
+        readonly sheet: "190px";
     };
     readonly charge: {
         readonly default: "150px";
@@ -122,7 +122,7 @@ export declare const chargeTableCellWidth: {
     readonly actions: {
         readonly default: "100px";
         readonly text: "100px";
-        readonly sheet: "315px";
+        readonly sheet: "85px";
     };
     readonly payment_id: {
         readonly default: "150px";

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

@@ -77,7 +77,7 @@ export const chargeTableCellWidth = {
     merchant: {
         default: '100px',
         text: '150px',
-        sheet: '115px',
+        sheet: '190px',
     },
     charge: {
         default: '150px',
@@ -122,7 +122,7 @@ export const chargeTableCellWidth = {
     actions: {
         default: '100px',
         text: '100px',
-        sheet: '315px',
+        sheet: '85px',
     },
     payment_id: {
         default: '150px',

package/build/types/analytics.d.ts

@@ -27,5 +27,6 @@ export interface AnalyticsDetails {
 export declare enum ChargeBreakDownType {
     PaymentMethod = "PAYMENT_METHOD",
     PaymentCurrency = "PAYMENT_CURRENCY",
-    PaymentScheme = "PAYMENT_SCHEME"
+    PaymentScheme = "PAYMENT_SCHEME",
+    PaymentType = "PAYMENT_TYPE"
 }

package/build/types/analytics.js

@@ -3,4 +3,5 @@ export var ChargeBreakDownType;
     ChargeBreakDownType["PaymentMethod"] = "PAYMENT_METHOD";
     ChargeBreakDownType["PaymentCurrency"] = "PAYMENT_CURRENCY";
     ChargeBreakDownType["PaymentScheme"] = "PAYMENT_SCHEME";
+    ChargeBreakDownType["PaymentType"] = "PAYMENT_TYPE";
 })(ChargeBreakDownType || (ChargeBreakDownType = {}));

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.258-test.2",
-  "testVersion": 2,
+  "version": "0.0.258-test.3",
+  "testVersion": 3,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -72,7 +72,10 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.3.1",
+    "@mui/material": "^5.12.3",
     "@uiw/react-json-view": "^2.0.0-alpha.16",
     "axios": "^1.4.0",
     "dayjs": "^1.11.8",
@@ -80,12 +83,16 @@
     "i18next": "^22.4.15",
     "memoize-one": "^6.0.0",
     "re-resizable": "^6.9.9",
+    "react": "^18.2.0",
     "react-currency-input-field": "^3.6.11",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.45.4",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "^12.2.2",
+    "react-multi-date-picker": "^4.1.2",
+    "react-router-dom": "^7.7.0",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
@@ -113,23 +120,7 @@
     "typescript": "5.0.2",
     "typescript-eslint": "^8.18.2",
     "vite": "6.0.5",
-    "vite-tsconfig-paths": "^4.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^7.7.0",
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.12.3",
-    "react-multi-date-picker": "^4.1.2"
-  },
-  "peerDependencies": {
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-router": "7.7.0",
-    "@emotion/react": "11.11.0",
-    "@emotion/styled": "11.11.0",
-    "@mui/material": "5.12.3",
-    "react-multi-date-picker": "4.1.2"
+    "vite-tsconfig-paths": "^4.2.0"
   },
   "lint-staged": {
     "src/**/*.{ts,tsx,json,js,jsx}": [