@tap-payments/os-micro-frontend-shared 0.1.48-test.7 → 0.1.49

package/build/components/VirtualTables/components/TableRow.d.ts

@@ -13,11 +13,12 @@ interface ITableRowProps<R = any> {
     isSheetView?: boolean;
     selectedCell?: string | null;
     selectedColumn?: string | null;
+    selectedRow?: number | null;
     selectedChip?: string | null;
     onCellClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, pinnedType?: 'start' | 'end') => void;
     onChipClick?: (rowIndex: number, columnIndex: number, event: React.MouseEvent, chipIndex: number, pinnedType?: 'start' | 'end') => void;
     isLastRow?: boolean;
 }
-declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, selectedChip, onCellClick, isLastRow, onChipClick, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, selectedRow, selectedChip, onCellClick, isLastRow, onChipClick, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableRow>;
 export default _default;

package/build/components/VirtualTables/components/TableRow.js

@@ -4,8 +4,8 @@ import { memo, useMemo } from 'react';
 import { Box } from '@mui/material';
 import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from './style';
-import { getSelectionStyles } from '../../../utils/index.js';
-function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, selectedChip = null, onCellClick, isLastRow = false, onChipClick, }) {
+import { getSelectionStyles, getRowSelectionBorderStyles } from '../../../utils/index.js';
+function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, selectedRow = null, selectedChip = null, onCellClick, isLastRow = false, onChipClick, }) {
     const renderCell = (column, rowIndex, colIndex) => {
         const { render, format, selector } = column;
         const handleChipClick = (event, chipIndex) => {
@@ -24,16 +24,20 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
         })) : (_jsx(_Fragment, { children: formattedValue }));
     };
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
-            var _a, _b;
+            var _a, _b, _c;
             const cellKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${index}-${colIndex}`;
             const isCellSelected = selectedCell === cellKey;
             const columnKey = `${(_b = column.pinned) !== null && _b !== void 0 ? _b : 'default'}-${colIndex}`;
             const isColumnSelected = selectedColumn === columnKey;
-            const isSelected = isCellSelected || isColumnSelected;
+            const isRowSelected = selectedRow === index;
+            const isSelected = isCellSelected || isColumnSelected || isRowSelected;
+            const nextCellKey = colIndex < columns.length - 1 ? `${(_c = column.pinned) !== null && _c !== void 0 ? _c : 'default'}-${index}-${colIndex + 1}` : null;
+            const isNextCellSelected = nextCellKey ? selectedCell === nextCellKey : false;
             const selectionStyles = getSelectionStyles({
                 isSelected,
                 isCellSelected,
                 isColumnSelected,
+                isRowSelected,
                 isLastRow,
             });
             const isFirstColumn = column.id === columns[0].id;
@@ -44,10 +48,19 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
                 effectiveFirst = isFirstColumn && column.pinned !== 'start';
                 effectiveLast = isLastColumn && column.pinned !== 'end';
             }
+            const rowSelectionBorderStyles = isRowSelected
+                ? getRowSelectionBorderStyles({
+                    isCellSelected,
+                    isNextCellSelected,
+                    effectiveLast,
+                    isPinnedEnd: column.pinned === 'end',
+                    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: effectiveFirst, isLast: effectiveLast, onClick: (event) => {
                     onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, column.pinned);
-                }, 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 }, { children: _jsx(Box, Object.assign({ sx: Object.assign({}, (isSheetView && { position: 'relative', zIndex: 1 })) }, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
-        }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow, selectedChip, isSheetView]);
-    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));
+                }, sx: Object.assign(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), rowSelectionBorderStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: _jsx(Box, Object.assign({ sx: Object.assign({}, (isSheetView && { position: 'relative', zIndex: 1 })) }, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
+        }) })), [columns, row, index, selectedCell, selectedColumn, selectedRow, onCellClick, isLastRow, selectedChip, isSheetView]);
+    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, selectedRow: selectedRow, index: index }), content));
 }
 export default memo(TableRow, areEqual);

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

@@ -38,6 +38,9 @@ export declare const StyledTableRow: import("@emotion/styled").StyledComponent<i
     showShadowHighlight?: boolean | undefined;
     showLoadedStyle?: boolean | undefined;
     isSheetView?: boolean | undefined;
+    selectedRow?: number | null | undefined;
+    isSelected?: boolean | undefined;
+    index?: number | undefined;
 }, {}, {}>;
 export declare const StyledTableBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;

package/build/components/VirtualTables/components/style.js

@@ -5,6 +5,7 @@ import MUITableRow from '@mui/material/TableRow';
 import { motion } from 'framer-motion';
 import { TABLE_FOOTER_HEIGHT } from './TableFooter/style';
 import VirtualScrollList from './virtualScroll/VirtualScrollList';
+import { SELECTION_COLORS } from '../../../utils/index.js';
 export const TableWrapper = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'showNoDataView',
 })(({ showNoDataView }) => ({
@@ -63,8 +64,8 @@ export const StyledVirtualList = styled(VirtualScrollList, {
     backgroundColor: theme.palette.common.white,
 }))));
 export const StyledTableRow = styled(MUITableRow, {
-    shouldForwardProp: (props) => !['showShadowHighlight', 'showLoadedStyle', 'isSheetView'].includes(props),
-})(({ theme, showShadowHighlight, showLoadedStyle, isSheetView }) => (Object.assign({ display: 'flex', borderBottom: `1px solid ${theme === null || theme === void 0 ? void 0 : theme.palette.divider}`, position: 'relative', height: '100%', width: '100%' }, (!isSheetView && Object.assign(Object.assign({ paddingInline: '32px', '&:hover': {
+    shouldForwardProp: (props) => !['showShadowHighlight', 'showLoadedStyle', 'isSheetView', 'selectedRow', 'isSelected'].includes(props),
+})(({ theme, showShadowHighlight, showLoadedStyle, isSheetView, selectedRow, index }) => (Object.assign(Object.assign({ display: 'flex', borderBottom: `1px solid ${theme === null || theme === void 0 ? void 0 : theme.palette.divider}`, position: 'relative', height: '100%', width: '100%' }, (!isSheetView && Object.assign(Object.assign({ paddingInline: '32px', '&:hover': {
         boxShadow: theme.shadows[12],
         zIndex: 1,
         '.payment-sources-container': {
@@ -101,7 +102,10 @@ export const StyledTableRow = styled(MUITableRow, {
         position: 'absolute',
         left: 0,
     },
-}))))));
+})))), (isSheetView &&
+    selectedRow === index && {
+    border: `1.5px solid ${SELECTION_COLORS.primary}`,
+}))));
 export const StyledTableBox = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'showNoDataView' && prop !== 'scrollable',
 })(({ theme, showNoDataView, scrollable }) => ({

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

@@ -3,5 +3,6 @@ import { BoxProps } from '@mui/material/Box';
 interface WidgetI extends BoxProps {
     children: ReactNode;
 }
-declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<WidgetI, "ref"> & import("react").RefAttributes<HTMLElement>>>;
+declare function Widget({ children, ...props }: WidgetI): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Widget>;
 export default _default;

package/build/components/Widget/Widget.js

@@ -10,10 +10,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, forwardRef } from 'react';
+import { memo } from 'react';
 import { WidgetStyled } from './style';
-const Widget = forwardRef(function Widget(_a, ref) {
+function Widget(_a) {
     var { children } = _a, props = __rest(_a, ["children"]);
-    return (_jsx(WidgetStyled, Object.assign({ ref: ref, component: "article", "data-testid": "Widget" }, props, { children: children })));
-});
+    return (_jsx(WidgetStyled, Object.assign({ component: "article", "data-testid": "Widget" }, props, { children: children })));
+}
 export default memo(Widget);

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

@@ -13,7 +13,7 @@ export declare const ListItemStyled: import("@emotion/styled").StyledComponent<i
 }, 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<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" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "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" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderRadius" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "borderRight" | "borderLeft" | "className" | "classes" | "children" | "borderTop" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "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" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "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,7 +1,7 @@
 /// <reference types="react" />
 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" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "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" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderRadius" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "borderRight" | "borderLeft" | "className" | "classes" | "children" | "borderTop" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "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" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "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/utils/style.d.ts

@@ -8,8 +8,17 @@ interface GetSelectionStylesParams {
     isSelected: boolean;
     isCellSelected: boolean;
     isColumnSelected: boolean;
+    isRowSelected?: boolean;
     isLastRow: boolean;
 }
 type SelectionStyles = Record<string, string | Record<string, string>>;
-export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetSelectionStylesParams) => SelectionStyles;
+export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumnSelected, isRowSelected, isLastRow, }: GetSelectionStylesParams) => SelectionStyles;
+interface GetRowSelectionBorderStylesParams {
+    isCellSelected: boolean;
+    isNextCellSelected: boolean;
+    effectiveLast: boolean;
+    isPinnedEnd: boolean;
+    colIndex: number;
+}
+export declare const getRowSelectionBorderStyles: ({ isCellSelected, isNextCellSelected, effectiveLast, isPinnedEnd, colIndex, }: GetRowSelectionBorderStylesParams) => SelectionStyles;
 export {};

package/build/utils/style.js

@@ -5,18 +5,21 @@ export const SELECTION_COLORS = {
     transparent: 'transparent',
 };
 const BORDER_STYLES = {
-    thin: '1px',
-    thick: '1.5px',
+    thin: '0.5px',
+    thick: '1px',
     none: '0px',
 };
 const CELL_DIMENSIONS = {
     minHeight: '28px',
     fullHeight: '100%',
 };
-export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelected, isLastRow }) => {
+export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelected, isRowSelected, isLastRow, }) => {
     if (!isSelected) {
         return {};
     }
+    if (isRowSelected) {
+        return getRowSelectionStyles();
+    }
     if (isCellSelected && !isColumnSelected) {
         return getSingleCellSelectionStyles();
     }
@@ -25,12 +28,21 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
     }
     return {};
 };
+const getRowSelectionStyles = () => ({
+    backgroundColor: SELECTION_COLORS.background,
+    color: SELECTION_COLORS.primary,
+    border: 'none',
+    '&:before': {
+        border: 'none',
+    },
+});
 const getSingleCellSelectionStyles = () => ({
-    border: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,
+    border: `1.5px solid ${SELECTION_COLORS.primary}`,
     backgroundColor: SELECTION_COLORS.background,
     color: SELECTION_COLORS.primary,
+    borderRadius: '2px',
     '&:before': {
-        border: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,
+        border: `1.5px solid ${SELECTION_COLORS.primary}`,
     },
 });
 const getColumnSelectionStyles = (isLastRow) => {
@@ -60,3 +72,16 @@ const getBorderWidthForColumn = (isLastRow) => {
 const getBorderBottomForColumn = (isLastRow) => {
     return isLastRow ? `${BORDER_STYLES.thick} solid ${SELECTION_COLORS.primary}` : `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.border}`;
 };
+export const getRowSelectionBorderStyles = ({ isCellSelected, isNextCellSelected, effectiveLast, isPinnedEnd, colIndex, }) => (Object.assign(Object.assign(Object.assign({ borderRadius: '0px', '&:before': {
+        border: 'none',
+    }, '&:after': {
+        border: 'none',
+    }, border: `1.5px solid ${SELECTION_COLORS.primary}` }, (isCellSelected && Object.assign({ border: `1.5px solid ${SELECTION_COLORS.primary}` }, (isNextCellSelected && {
+    borderRight: `1.5px solid ${SELECTION_COLORS.primary}`,
+})))), (isCellSelected &&
+    colIndex > 0 && {
+    borderLeft: `1.5px solid ${SELECTION_COLORS.primary}`,
+})), (effectiveLast &&
+    isPinnedEnd && {
+    borderRight: `2.5px solid ${SELECTION_COLORS.primary}`,
+})));

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.1.48-test.7",
-  "testVersion": 7,
+  "version": "0.1.49",
+  "testVersion": 0,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -131,4 +131,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}