@tap-payments/os-micro-frontend-shared 0.1.35 → 0.1.36-9.fix.1

package/build/utils/error.js

@@ -4,10 +4,12 @@ export const isNetworkError = (error) => {
 export const hasError = (error) => {
     return Boolean(error);
 };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const isTimeoutError = (error) => {
     var _a, _b;
     return (_b = ((error === null || error === void 0 ? void 0 : error.code) === 'ECONNABORTED' || ((_a = error === null || error === void 0 ? void 0 : error.message) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes('timeout')))) !== null && _b !== void 0 ? _b : false;
 };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const isNotFoundError = (error) => {
     var _a, _b, _c, _d, _e, _f;
     if (((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.status) === 404)

package/build/utils/freshdesk.js

@@ -17,6 +17,7 @@ const prepareFreshDeskData = ({ individualDetails, activeSegment, language, }) =
     };
 };
 export const setFreshDeskProperties = ({ individualDetails, activeSegment, language, }) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const fcWidgetObj = window.fcWidget;
     if (!fcWidgetObj) {
         return;
@@ -46,6 +47,7 @@ export const setFreshDeskProperties = ({ individualDetails, activeSegment, langu
     });
 };
 export const openFreshDeskChat = () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const fcWidgetObj = window.fcWidget;
     if (!fcWidgetObj) {
         return;

package/build/utils/geography.js

@@ -1,7 +1,7 @@
 export const getGeographyBoxColor = (palette) => ({
     Local: palette.success.light,
     Regional: palette.info.light,
-    Global: palette.warning.light,
+    Global: palette.warning.light, // yellow
 });
 export const geographyMap = {
     G: 'Global',

package/build/utils/index.d.ts

@@ -41,3 +41,7 @@ export * from './flag';
 export * from './encrypt';
 export * from './day';
 export * from './style';
+export * from './boolean';
+export * from './columnResizeStorage';
+export * from './timezone';
+export * from './merchantSource';

package/build/utils/index.js

@@ -41,3 +41,7 @@ export * from './flag';
 export * from './encrypt';
 export * from './day';
 export * from './style';
+export * from './boolean';
+export * from './columnResizeStorage';
+export * from './timezone';
+export * from './merchantSource';

package/build/utils/localStorage.d.ts

@@ -1,4 +1,5 @@
-import { AppDetails, Segment, Timezone } from '../types/index.js';
+import { AppDetails, WindowPreview, Segment, TableMode, Timezone } from '../types/index.js';
+import { SheetViewColumnsData } from './columnResizeStorage';
 export declare function setSecretKey(): void;
 export declare function getSecretKey(): string | null;
 export declare function removeSecretKey(): void;
@@ -26,4 +27,12 @@ export declare const getCalenderTimezone: () => Timezone | null;
 export declare const getCalenderTimezoneHistory: () => Timezone | null;
 export declare const removeCalenderTimezone: () => void;
 export declare const removeCalenderTimezoneHistory: () => void;
+export declare const setGlobalTableModeStorage: (mode: TableMode) => void;
+export declare const getGlobalTableModeStorage: () => TableMode;
+export declare const removeGlobalTableModeStorage: () => void;
+export declare const setSheetViewColumnsStorage: (data: SheetViewColumnsData) => void;
+export declare const getSheetViewColumnsStorage: () => SheetViewColumnsData;
+export declare const setPreviewStorage: (previews: WindowPreview[]) => void;
+export declare const getPreviewStorage: () => WindowPreview[];
+export declare const removePreviewStorage: () => void;
 export declare const clearTapOsLocalStorage: () => void;

package/build/utils/localStorage.js

@@ -10,6 +10,9 @@ const REPORT_PREFIX = 'tap-dashboard-report';
 const APP_VERSION = 'tap-dashboard-app-version';
 const CALENDER_TIMEZONE = 'tap-dashboard-calender-timezone';
 const CALENDER_TIMEZONE_HISTORY = 'tap-dashboard-calender-timezone-history';
+const GLOBAL_TABLE_MODE_KEY = 'tap-dashboard-global-table-mode';
+const SHEETVIEW_COLUMNS_KEY = 'sheetview_columns';
+const PREVIEW_STORAGE_KEY = 'dock-preview-windows';
 export function setSecretKey() {
     localStorage.setItem(SECRET_KEY_LOCAL_STORAGE, TEST_SECRET_KEY);
 }
@@ -22,6 +25,7 @@ export function removeSecretKey() {
 export function removeConnectMetaData() {
     localStorage.removeItem(CONNECT_META_DATA);
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function setNavigationData(data) {
     localStorage.setItem(NAVIGATION_DATA, JSON.stringify(data));
 }
@@ -38,6 +42,7 @@ export function getNavigationData() {
                 }
             });
         });
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
     }
     catch (error) {
         return null;
@@ -58,15 +63,18 @@ export const removeLoggedInUserJwtToken = () => {
 export const removeLoggedInUserData = () => {
     localStorage.removeItem(USER_DATA_KEY);
 };
+// eslint-disable-next-line
 export const setLoggedInUserData = (data) => {
     localStorage.setItem(USER_DATA_KEY, JSON.stringify(data));
 };
+// eslint-disable-next-line
 export const getLoggedInUserData = () => {
     const data = localStorage.getItem(USER_DATA_KEY);
     if (!data)
         return null;
     try {
         return JSON.parse(data);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
     }
     catch (error) {
         return null;
@@ -127,6 +135,7 @@ export const getCalenderTimezone = () => {
         if (!data)
             return null;
         return JSON.parse(data);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
     }
     catch (error) {
         return null;
@@ -138,6 +147,7 @@ export const getCalenderTimezoneHistory = () => {
         if (!data)
             return null;
         return JSON.parse(data);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
     }
     catch (error) {
         return null;
@@ -149,6 +159,45 @@ export const removeCalenderTimezone = () => {
 export const removeCalenderTimezoneHistory = () => {
     localStorage.removeItem(CALENDER_TIMEZONE_HISTORY);
 };
+export const setGlobalTableModeStorage = (mode) => {
+    localStorage.setItem(GLOBAL_TABLE_MODE_KEY, mode);
+};
+export const getGlobalTableModeStorage = () => {
+    return localStorage.getItem(GLOBAL_TABLE_MODE_KEY) || 'default';
+};
+export const removeGlobalTableModeStorage = () => {
+    localStorage.removeItem(GLOBAL_TABLE_MODE_KEY);
+};
+export const setSheetViewColumnsStorage = (data) => localStorage.setItem(SHEETVIEW_COLUMNS_KEY, JSON.stringify(data));
+export const getSheetViewColumnsStorage = () => JSON.parse(localStorage.getItem(SHEETVIEW_COLUMNS_KEY) || '{}');
+export const setPreviewStorage = (previews) => {
+    try {
+        localStorage.setItem(PREVIEW_STORAGE_KEY, JSON.stringify(previews));
+    }
+    catch (error) {
+        console.warn('Failed to save preview cache:', error);
+    }
+};
+export const getPreviewStorage = () => {
+    try {
+        const cached = localStorage.getItem(PREVIEW_STORAGE_KEY);
+        if (!cached)
+            return [];
+        const data = JSON.parse(cached);
+        return data;
+    }
+    catch (error) {
+        return [];
+    }
+};
+export const removePreviewStorage = () => {
+    try {
+        localStorage.removeItem(PREVIEW_STORAGE_KEY);
+    }
+    catch (error) {
+        console.warn('Failed to remove preview storage:', error);
+    }
+};
 export const clearTapOsLocalStorage = () => {
     removeSecretKey();
     removeConnectMetaData();
@@ -159,4 +208,6 @@ export const clearTapOsLocalStorage = () => {
     removeAppVersion();
     removeCalenderTimezone();
     removeCalenderTimezoneHistory();
+    removeGlobalTableModeStorage();
+    removePreviewStorage();
 };

package/build/utils/merchant.js

@@ -1,9 +1,12 @@
 export const getMerchantIds = (activeSegment) => {
     var _a;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return (_a = activeSegment === null || activeSegment === void 0 ? void 0 : activeSegment.countries) === null || _a === void 0 ? void 0 : _a.reduce((acc, country) => {
         const { entities } = country;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const ids = entities.reduce((entitiesAcc, entity) => {
             const { merchants } = entity;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             const entitiesAccIds = (merchants || []).map((merchant) => merchant.legacy_id);
             return [...entitiesAcc, ...entitiesAccIds];
         }, []);

package/build/utils/merchantSource.d.ts

@@ -0,0 +1,30 @@
+import { TextAndLang } from '../types/index.js';
+interface Source {
+    code: string;
+    name: TextAndLang[];
+}
+interface PaymentMethod extends Source {
+    payment_methods: Source[];
+}
+export declare function transformPaymentMethodsData(data?: PaymentMethod[]): {
+    name: string;
+    type: string;
+    options: {
+        name: string;
+        type: string;
+        icon: string;
+        options: {
+            name: string | undefined;
+            type: string;
+        }[];
+    }[] | undefined;
+};
+export declare function transformPaymentSchemesData(data?: Source[]): {
+    name: string;
+    type: string;
+    options: {
+        name: string;
+        type: string;
+    }[];
+};
+export {};

package/build/utils/merchantSource.js

@@ -0,0 +1,36 @@
+import capitalize from 'lodash/capitalize';
+import startCase from 'lodash/startCase';
+import { PAYMENT_TYPES_ICONS } from '../constants/index.js';
+import { getNameText } from './language';
+export function transformPaymentMethodsData(data) {
+    return {
+        name: 'Payment Methods',
+        type: 'payment_methods',
+        options: data === null || data === void 0 ? void 0 : data.map((category) => {
+            var _a, _b;
+            return {
+                name: capitalize(startCase(getNameText(category === null || category === void 0 ? void 0 : category.name))),
+                type: category === null || category === void 0 ? void 0 : category.code,
+                icon: (_a = PAYMENT_TYPES_ICONS[category.code]) !== null && _a !== void 0 ? _a : PAYMENT_TYPES_ICONS.CARD,
+                options: (_b = category.payment_methods) === null || _b === void 0 ? void 0 : _b.map((method) => ({
+                    name: getNameText(method.name),
+                    type: method.code,
+                })),
+            };
+        }),
+    };
+}
+export function transformPaymentSchemesData(data = []) {
+    return {
+        name: 'Payment Schemes',
+        type: 'payment_scheme',
+        options: data
+            .filter((scheme) => scheme.code)
+            .map((scheme) => {
+            return {
+                name: capitalize(startCase(getNameText(scheme === null || scheme === void 0 ? void 0 : scheme.name))),
+                type: scheme === null || scheme === void 0 ? void 0 : scheme.code,
+            };
+        }),
+    };
+}

package/build/utils/navigation.d.ts

@@ -6,7 +6,7 @@ export declare const openNewAppAttrs: ({ appCode, serviceCode, sandboxMode, payl
     numberOfOpenedApps: number;
     segmentId: string;
 }) => {
-    payload?: (Record<string, any> & import("../types/index.js").AppPayload) | undefined;
+    payload?: (Record<string, any> & Omit<import("../types/index.js").DefaultServicePayload, never> & object) | undefined;
     segmentId: string;
     appCode: string;
     serviceCode: string;

package/build/utils/number.d.ts

@@ -4,3 +4,5 @@ export declare const stringToNumber: (value: string) => number;
 export declare const numberToString: (value: number, fixed?: number) => string;
 export declare function pad(num: number, length?: number): string;
 export declare function isNegative(num: number): boolean;
+export declare const getRoundedAmount: (amount: number, decimals: number) => number;
+export declare const getAmountPlaceholder: (decimals: number) => string;

package/build/utils/number.js

@@ -1,3 +1,4 @@
+import round from 'lodash/round';
 export function formatOrdinal(num) {
     if (!num)
         return '';
@@ -12,6 +13,7 @@ export const stringToNumber = (value) => {
     try {
         const number = parseFloat(value);
         return isNaN(number) ? 0 : number;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
     }
     catch (e) {
         return 0;
@@ -28,3 +30,9 @@ export function pad(num, length = 2) {
 export function isNegative(num) {
     return Math.sign(num) === -1;
 }
+export const getRoundedAmount = (amount, decimals) => {
+    return round(amount, decimals);
+};
+export const getAmountPlaceholder = (decimals) => {
+    return `0.${'0'.repeat(decimals)}`;
+};

package/build/utils/object.d.ts

@@ -1,6 +1,7 @@
 export declare function removeUndefinedValues(obj: Record<string, unknown>): {
     [k: string]: unknown;
 };
+export declare const isEmptyValue: (value: unknown) => boolean;
 export declare function removeUndefinedArrayValues(obj: Record<string, unknown>): {
     [k: string]: unknown;
 };

package/build/utils/object.js

@@ -1,14 +1,15 @@
 export function removeUndefinedValues(obj) {
     return Object.fromEntries(Object.entries(obj).filter(([, value]) => value !== undefined));
 }
+export const isEmptyValue = (value) => value === undefined || value === null || value === '';
 export function removeUndefinedArrayValues(obj) {
     return Object.fromEntries(Object.entries(obj).filter(([, value]) => {
         if (Array.isArray(value)) {
-            return value.length > 0 && (value === null || value === void 0 ? void 0 : value.some((v) => !!v));
+            return value.length > 0 && (value === null || value === void 0 ? void 0 : value.some((v) => !isEmptyValue(v)));
         }
         if (typeof value === 'object') {
-            return Object.values(value || {}).some((v) => !!v);
+            return Object.values(value || {}).some((v) => !isEmptyValue(v));
         }
-        return !!value;
+        return !isEmptyValue(value);
     }));
 }

package/build/utils/segment.d.ts

@@ -1,2 +1,59 @@
-import { Segment, SegmentData } from '../types/index.js';
-export declare const getSegmentData: (segments: Segment[], activeSegmentId: string, activeSegments: Segment[]) => SegmentData;
+import { SelectedSegment, Segment, SegmentData } from '../types/index.js';
+export declare const getSegmentData: (segments: Segment[], activeSegmentId: string, activeSegments: SelectedSegment[]) => SegmentData;
+export declare const getBusinessSegmentConfig: ({ merchantsIds, options }: {
+    merchantsIds: string[];
+    options?: Record<string, unknown> | undefined;
+}) => {
+    business?: undefined;
+} | {
+    business: {
+        merchant: string[];
+    };
+};
+export declare const getNonBusinessSegmentConfig: ({ segmentCode, segmentId, segmentTypeCode, merchantsIds, options, }: {
+    segmentCode: string;
+    segmentTypeCode: string;
+    segmentId: string;
+    merchantsIds?: string[] | undefined;
+    options?: Record<string, unknown> | undefined;
+}) => {
+    business?: undefined;
+} | {
+    business: {
+        merchant: string[];
+    };
+} | {
+    payment_provider: {
+        technology: {
+            orchestrator: string[];
+        };
+        institution?: undefined;
+    };
+} | {
+    payment_provider: {
+        technology: {
+            gateway: string[];
+        };
+        institution?: undefined;
+    };
+} | {
+    payment_provider: {
+        institution: {
+            facilitator: string[];
+        };
+        technology?: undefined;
+    };
+} | {
+    payment_provider: {
+        institution: {
+            acquirer: string[];
+        };
+        technology?: undefined;
+    };
+} | {
+    platform: string[];
+    payment_provider?: undefined;
+} | {
+    development_agency: string[];
+    payment_provider?: undefined;
+};

package/build/utils/segment.js

@@ -1,3 +1,4 @@
+import { SEGMENT_CODE } from '../types/index.js';
 import { getDefaultEntityCountry } from './entity';
 export const getSegmentData = (segments, activeSegmentId, activeSegments) => {
     var _a, _b, _c;
@@ -10,3 +11,50 @@ export const getSegmentData = (segments, activeSegmentId, activeSegments) => {
     return Object.assign(Object.assign({}, newSegment), { defaultCountry,
         defaultEntity });
 };
+export const getBusinessSegmentConfig = ({ merchantsIds, options }) => {
+    if (!merchantsIds || !(merchantsIds === null || merchantsIds === void 0 ? void 0 : merchantsIds.length))
+        return {};
+    return { business: Object.assign({ merchant: merchantsIds }, options) };
+};
+export const getNonBusinessSegmentConfig = ({ segmentCode, segmentId, segmentTypeCode, merchantsIds = [], options = {}, }) => {
+    const code = SEGMENT_CODE.PSP === segmentTypeCode ? segmentCode : segmentTypeCode;
+    const specialBusinessSegmentsIDs = ['payment_facilitator_14po8231419aIsi1fN7F385'];
+    if (specialBusinessSegmentsIDs.includes(segmentId)) {
+        return getBusinessSegmentConfig({ merchantsIds, options });
+    }
+    if (code === SEGMENT_CODE.PAYMENT_TECHNOLOGY) {
+        return {
+            payment_provider: {
+                technology: Object.assign({ orchestrator: [segmentId] }, options),
+            },
+        };
+    }
+    if (code === SEGMENT_CODE.PAYMENT_GATEWAY || code === SEGMENT_CODE.PAYMENT_GATEWAY_PROVIDER) {
+        return {
+            payment_provider: {
+                technology: Object.assign({ gateway: [segmentId] }, options),
+            },
+        };
+    }
+    if (code === SEGMENT_CODE.PAYMENT_FACILITATOR) {
+        return {
+            payment_provider: {
+                institution: Object.assign({ facilitator: [segmentId] }, options),
+            },
+        };
+    }
+    if (code === SEGMENT_CODE.PAYMENT_ACQUIRER) {
+        return {
+            payment_provider: {
+                institution: Object.assign({ acquirer: [segmentId] }, options),
+            },
+        };
+    }
+    if (code === SEGMENT_CODE.PLATFORM) {
+        return Object.assign({ platform: [segmentId] }, options);
+    }
+    if (code === SEGMENT_CODE.DEVELOPMENT) {
+        return Object.assign({ development_agency: [segmentId] }, options);
+    }
+    return {};
+};

package/build/utils/source.d.ts

@@ -2,3 +2,4 @@ export declare const getPaymentTypeKey: (payment?: {
     wallet?: string;
     type?: string;
 }) => string | undefined;
+export declare const isSamePaymentSource: (a?: string, b?: string) => boolean;

package/build/utils/source.js

@@ -2,3 +2,8 @@ export const getPaymentTypeKey = (payment) => {
     const walletTypeIcon = (payment === null || payment === void 0 ? void 0 : payment.wallet) === 'SV Wallet' ? 'walletStoredValue' : 'walletPassThru';
     return (payment === null || payment === void 0 ? void 0 : payment.type) === 'Wallet' ? walletTypeIcon : payment === null || payment === void 0 ? void 0 : payment.type;
 };
+const PAYMENT_SOURCE_ALIASES = {
+    AMERICAN_EXPRESS: 'AMEX',
+};
+const normalizePaymentSource = (value) => { var _a; return (_a = PAYMENT_SOURCE_ALIASES[value.toUpperCase()]) !== null && _a !== void 0 ? _a : value.toUpperCase(); };
+export const isSamePaymentSource = (a, b) => !!a && !!b && normalizePaymentSource(a) === normalizePaymentSource(b);

package/build/utils/string.d.ts

@@ -7,4 +7,12 @@ export declare const copyText: (text: string) => void;
 export declare const capitalizeFirstLetter: (text: string) => string;
 export declare const percentageToNumber: (percentageStr: string) => number;
 export declare const maskValue: (value: string) => string;
+/**
+ * Transforms a string by replacing a separator with a replacement character and applying proper case formatting
+ * @param text - The string to transform
+ * @param separator - The separator to replace (defaults to underscore)
+ * @param replacement - The replacement character (defaults to space)
+ * @returns The transformed string with proper case formatting
+ */
 export declare const transformStringToProperCase: (text: string, separator?: string | RegExp, replacement?: string) => string;
+export declare const capitalizeString: (text?: string) => string;

package/build/utils/string.js

@@ -1,4 +1,4 @@
-import startCase from 'lodash/startCase';
+import { capitalize, startCase } from 'lodash';
 export const removePrefixFromString = (str, prefix) => {
     if (!prefix) {
         return str;
@@ -34,6 +34,7 @@ export const copyText = (text) => {
     else {
         const textArea = document.createElement('textarea');
         textArea.value = text;
+        // Avoid scrolling to bottom
         textArea.style.top = '0';
         textArea.style.left = '0';
         textArea.style.position = 'fixed';
@@ -53,7 +54,19 @@ export const percentageToNumber = (percentageStr) => {
     return parseFloat(number) || 0;
 };
 export const maskValue = (value) => `••• ${value.slice(-4)}`;
+/**
+ * Transforms a string by replacing a separator with a replacement character and applying proper case formatting
+ * @param text - The string to transform
+ * @param separator - The separator to replace (defaults to underscore)
+ * @param replacement - The replacement character (defaults to space)
+ * @returns The transformed string with proper case formatting
+ */
 export const transformStringToProperCase = (text, separator = /_/g, replacement = ' ') => {
+    // Replace separator with replacement character
     const updatedText = text.replace(separator, replacement);
+    // Apply proper case formatting
     return startCase(updatedText);
 };
+export const capitalizeString = (text) => {
+    return capitalize(startCase(text));
+};

package/build/utils/style.d.ts

@@ -1,9 +1,33 @@
+export declare const SELECTION_COLORS: {
+    readonly primary: "#1F88D0";
+    readonly background: "white";
+    readonly border: "#F2F2F2";
+    readonly transparent: "transparent";
+};
 interface GetSelectionStylesParams {
+    /** Whether the current cell/row is selected */
     isSelected: boolean;
+    /** Whether this is a single cell selection */
     isCellSelected: boolean;
+    /** Whether this is part of a column selection */
     isColumnSelected: boolean;
+    /** Whether this is part of a row selection */
+    isRowSelected?: boolean;
+    /** Whether this is the last row in the selection */
     isLastRow: boolean;
 }
 type SelectionStyles = Record<string, string | Record<string, string>>;
-export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumnSelected, isLastRow }: GetSelectionStylesParams) => SelectionStyles;
+/**
+ * Generates CSS styles for table cell selection states
+ *
+ * @param params - Selection state parameters
+ * @returns CSS-in-JS style object for the selected cell/column
+ */
+export declare const getSelectionStyles: ({ isSelected, isCellSelected, isColumnSelected, isRowSelected, isLastRow, }: GetSelectionStylesParams) => SelectionStyles;
+interface GetRowSelectionBorderStylesParams {
+    effectiveFirst: boolean;
+    isPinnedStart: boolean;
+    isPinnedEnd: boolean;
+}
+export declare const getRowSelectionBorderStyles: ({ effectiveFirst, isPinnedStart, isPinnedEnd }: GetRowSelectionBorderStylesParams) => SelectionStyles;
 export {};

package/build/utils/style.js

@@ -1,40 +1,67 @@
-const SELECTION_COLORS = {
+// Selection style constants
+export const SELECTION_COLORS = {
     primary: '#1F88D0',
     background: 'white',
     border: '#F2F2F2',
     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 }) => {
+/**
+ * Generates CSS styles for table cell selection states
+ *
+ * @param params - Selection state parameters
+ * @returns CSS-in-JS style object for the selected cell/column
+ */
+export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelected, isRowSelected, isLastRow, }) => {
+    // Early return for non-selected cells
     if (!isSelected) {
         return {};
     }
+    // Row selection styles
+    if (isRowSelected) {
+        return getRowSelectionStyles();
+    }
+    // Single cell selection styles
     if (isCellSelected && !isColumnSelected) {
         return getSingleCellSelectionStyles();
     }
+    // Column selection styles
     if (isColumnSelected) {
         return getColumnSelectionStyles(isLastRow);
     }
     return {};
 };
+/**
+ * Returns styles for row selection
+ */
+const getRowSelectionStyles = () => ({
+    backgroundColor: SELECTION_COLORS.background,
+    color: SELECTION_COLORS.primary,
+});
+/**
+ * Returns styles for a single selected cell
+ */
 const getSingleCellSelectionStyles = () => ({
     border: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,
     backgroundColor: SELECTION_COLORS.background,
     color: SELECTION_COLORS.primary,
-    '&:before': {
-        border: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,
-    },
+    borderRadius: '2px',
 });
+/**
+ * Returns styles for column selection
+ *
+ * @param isLastRow - Whether this is the last row in the selection
+ */
 const getColumnSelectionStyles = (isLastRow) => {
-    const borderWidth = getBorderWidthForColumn(isLastRow);
+    const borderWidth = getBorderWidthForColumn();
     const borderBottom = getBorderBottomForColumn(isLastRow);
     return {
         borderWidth,
@@ -45,18 +72,24 @@ const getColumnSelectionStyles = (isLastRow) => {
         minHeight: CELL_DIMENSIONS.minHeight,
         display: 'flex',
         alignItems: 'center',
-        '&:before': {
-            borderWidth,
-            borderBottom: isLastRow
-                ? `${BORDER_STYLES.thick} solid ${SELECTION_COLORS.primary}`
-                : `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.transparent}`,
-        },
     };
 };
-const getBorderWidthForColumn = (isLastRow) => {
-    const { none, thick } = BORDER_STYLES;
-    return isLastRow ? `${none} ${thick} ${thick} ${thick}` : `${none} ${thick} ${none} ${thick}`;
+/**
+ * Calculates border width for column selection
+ */
+const getBorderWidthForColumn = () => {
+    const { none, thin } = BORDER_STYLES;
+    return `${none} ${thin} ${thin} ${thin}`;
 };
+/**
+ * Calculates border bottom for column selection
+ */
 const getBorderBottomForColumn = (isLastRow) => {
     return isLastRow ? `${BORDER_STYLES.thick} solid ${SELECTION_COLORS.primary}` : `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.border}`;
 };
+export const getRowSelectionBorderStyles = ({ effectiveFirst, isPinnedStart, isPinnedEnd }) => ({
+    borderTop: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,
+    borderBottom: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,
+    borderRight: `${BORDER_STYLES.thin} solid ${isPinnedEnd ? SELECTION_COLORS.primary : 'none'}`,
+    borderLeft: `${BORDER_STYLES.thin} solid ${isPinnedStart && effectiveFirst ? SELECTION_COLORS.primary : 'transparent'}`,
+});