@tap-payments/os-micro-frontend-shared 0.1.103-test.122 → 0.1.103-test.5

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

package/build/components/AmountStatusChip/AmountStatusChip.js

@@ -11,10 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo } from 'react';
-import CurrencyIcon from '../CurrencyIcon';
-import { AmountLabel, CurrencyIconContainer, StyledAmountStatusChip } from './style';
+import { AmountLabel, StyledAmountStatusChip } from './style';
 function AmountStatusChip(_a) {
     var { amount, currency } = _a, rest = __rest(_a, ["amount", "currency"]);
-    return (_jsxs(StyledAmountStatusChip, Object.assign({ expandDirection: "left" }, rest, { children: [currency && (_jsx(AmountLabel, { children: _jsx(CurrencyIconContainer, { children: _jsx(CurrencyIcon, { currency: currency, fontSize: 10 }) }) })), amount] })));
+    return (_jsxs(StyledAmountStatusChip, Object.assign({ expandDirection: "left" }, rest, { children: [currency && _jsx(AmountLabel, { children: currency }), amount] })));
 }
 export default memo(AmountStatusChip);

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

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 export declare const StyledAmountStatusChip: import("@emotion/styled").StyledComponent<import("../StatusChipWithCopy").StatusChipWithCopyProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const AmountLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const CurrencyIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/AmountStatusChip/style.js

@@ -16,12 +16,6 @@ export const StyledAmountStatusChip = styled(StatusChipWithCopy)(() => ({
     },
 }));
 export const AmountLabel = styled('span')(() => ({
-    marginRight: '2px',
-    display: 'flex',
-    alignItems: 'center',
-}));
-export const CurrencyIconContainer = styled('span')(() => ({
-    marginInline: '1.5px',
     display: 'flex',
     alignItems: 'center',
 }));

package/build/components/AuthenticationTypeChip/AuthenticationTypeChip.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { StatusChipWithCopyProps } from '../StatusChipWithCopy';
+import { chipAuthenticationTypes } from './constants';
+export interface AuthenticationTypeChipProps extends StatusChipWithCopyProps {
+    title: keyof typeof chipAuthenticationTypes;
+}
+declare function AuthenticationTypeChip({ title, ...rest }: AuthenticationTypeChipProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof AuthenticationTypeChip>;
+export default _default;

package/build/components/AuthenticationTypeChip/AuthenticationTypeChip.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import StatusChipWithCopy from '../StatusChipWithCopy';
+import { chipAuthenticationTypes } from './constants';
+function AuthenticationTypeChip(_a) {
+    var { title } = _a, rest = __rest(_a, ["title"]);
+    const authenticationType = chipAuthenticationTypes[title];
+    return (_jsx(StatusChipWithCopy, Object.assign({}, rest, { sx: Object.assign(Object.assign({}, authenticationType.styles), rest.sx) }, { children: authenticationType.text })));
+}
+export default memo(AuthenticationTypeChip);

package/build/components/AuthenticationTypeChip/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const chipAuthenticationTypes: {
+    '3DS': {
+        text: string;
+    };
+    'Non-3DS': {
+        text: string;
+        styles: {
+            bgColor: string;
+            borderColor: string;
+            textColor: string;
+        };
+    };
+    'Device Biometric': {
+        text: string;
+    };
+};

package/build/components/AuthenticationTypeChip/constants.js

@@ -0,0 +1,13 @@
+import { emptyStatusChipColors } from '../../constants/index.js';
+export const chipAuthenticationTypes = {
+    '3DS': {
+        text: '3DS',
+    },
+    'Non-3DS': {
+        text: 'Non 3DS',
+        styles: Object.assign({}, emptyStatusChipColors),
+    },
+    'Device Biometric': {
+        text: 'Biometric',
+    },
+};

package/build/components/AuthenticationTypeChip/index.d.ts

@@ -0,0 +1,3 @@
+import AuthenticationTypeChip from './AuthenticationTypeChip';
+export { type AuthenticationTypeChipProps } from './AuthenticationTypeChip';
+export default AuthenticationTypeChip;

package/build/components/AuthenticationTypeChip/index.js

@@ -0,0 +1,2 @@
+import AuthenticationTypeChip from './AuthenticationTypeChip';
+export default AuthenticationTypeChip;

package/build/components/StatusChip/StatusChip.js

@@ -15,15 +15,15 @@ import { useTranslation } from 'react-i18next';
 import { AnimatePresence, motion } from 'framer-motion';
 import { copyText as copyTextHandler } from '../../utils/index.js';
 import { copyIcon, greenCheckIcon } from '../../constants/index.js';
-import { unknownGeographyColors } from './constants';
 import { ChipStyled, Wrapper, CopyWrapper } from './style';
+import { emptyStatusChipColors } from 'src/constants/chips/statusChips';
 const StatusChip = (_a) => {
     var { children, unknownText, copyText, expandDirection = 'right' } = _a, props = __rest(_a, ["children", "unknownText", "copyText", "expandDirection"]);
     const [showCopy, setShowCopy] = useState(false);
     const { t } = useTranslation();
     const isSelected = props.isSelected;
     if (!children) {
-        return (_jsx(ChipStyled, Object.assign({}, unknownGeographyColors, props, { isSelected: false, sx: (theme) => ({ borderColor: theme.palette.divider }) }, { children: unknownText ? t(unknownText) : t('unknown') })));
+        return (_jsx(ChipStyled, Object.assign({}, emptyStatusChipColors, props, { isSelected: false, sx: (theme) => ({ borderColor: theme.palette.divider }) }, { children: unknownText ? t(unknownText) : t('unknown') })));
     }
     const handleCopy = (e) => {
         e.stopPropagation();

package/build/components/StatusChip/style.js

@@ -3,8 +3,8 @@ import { styled } from '@mui/material/styles';
 export const ChipStyled = styled(Box, {
     shouldForwardProp: (prop) => !['textColor', 'bgColor', 'borderColor', 'disabled', 'padding', 'maxWidth', 'isSelected'].includes(prop),
 })(({ theme, isSelected, textColor = theme.palette.text.primary, bgColor = '#EFF1F2', borderColor = '#EFF1F2', disabled = false, padding, maxWidth, }) => {
-    return Object.assign({ display: 'flex', alignItems: 'center', gap: '4px', height: '18px', padding: padding || '0px 9.5px', borderRadius: '30px', border: `1px solid ${borderColor}`, backgroundColor: bgColor, color: textColor, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', fontSize: '11px', minWidth: '67px', maxWidth: maxWidth || 'none', width: 'fit-content', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box', borderColor: theme.palette.common.white }, (isSelected && {
-        boxShadow: 'rgb(242, 242, 242) 7px 0px 8px 2px',
+    return Object.assign({ display: 'flex', alignItems: 'center', gap: '4px', height: '18px', padding: padding || '0px 9.5px', borderRadius: '30px', border: `1px solid ${borderColor}`, backgroundColor: bgColor, color: textColor, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', fontSize: '11px', minWidth: '67px', maxWidth: maxWidth || 'none', width: 'fit-content', overflow: 'hidden', textOverflow: maxWidth ? 'ellipsis' : 'unset', boxSizing: 'border-box' }, (isSelected && {
+        boxShadow: 'white 7px 0px 8px 2px',
     }));
 });
 export const Wrapper = styled(Box)(() => ({

package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import { SHEET_VIEW_TABLE_THRESHOLD } from '../../../constants/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import { SheetViewTableContainer } from '../components/style';
@@ -37,50 +37,30 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
     const onPointerDown = (e) => {
         dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
-    const scrollHandlers = useMemo(() => ({
-        start: (scrollProps) => handleScroll(scrollProps, 'start'),
-        end: (scrollProps) => handleScroll(scrollProps, 'end'),
-        scrollable: (scrollProps) => handleScroll(scrollProps, 'scrollable'),
-    }), [handleScroll]);
-    const stableTableProps = useMemo(() => ({
-        itemCount: itemsCount,
-        lastItemIndex,
-        areAllRowsLoaded,
-        loadMoreItems,
-        threshold,
-        areTotalRowsNotFillingHeight,
-        clearBackdropVisibilityTimeout,
-        overscanCount,
-    }), [
+    const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
+        const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
+        const handleScrollCallback = (scrollProps) => {
+            const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
+            handleScroll(scrollProps, source);
+        };
+        return (_jsx(VirtualTable, { columnsData: columnsData, itemCount: itemsCount, lastItemIndex: lastItemIndex, areAllRowsLoaded: areAllRowsLoaded, loadMoreItems: loadMoreItems, threshold: threshold, getItemSize: getItemSize, getItemData: getItemDataForContainer, isPinned: isPinned, fixedWidth: fixedWidth, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, onScroll: handleScrollCallback, setBackdropVisibility: setShowBackdrop, listRef: listRef, overscanCount: overscanCount }));
+    }, [
         itemsCount,
         lastItemIndex,
         areAllRowsLoaded,
         loadMoreItems,
         threshold,
+        getItemSize,
+        getItemDataForContainer,
+        scrollToIndex,
         areTotalRowsNotFillingHeight,
         clearBackdropVisibilityTimeout,
-        overscanCount,
+        handleScroll,
+        setShowBackdrop,
+        pinnedStartVirtualListRef,
+        pinnedEndVirtualListRef,
+        scrollableVirtualListRef,
     ]);
-    const dynamicTableProps = useMemo(() => ({
-        getItemSize,
-        getItemData: getItemDataForContainer,
-        scrollToIndex,
-        setBackdropVisibility: setShowBackdrop,
-    }), [getItemSize, getItemDataForContainer, scrollToIndex, setShowBackdrop]);
-    const createPinnedStartTable = useCallback((columnsData, fixedWidth) => (_jsx(VirtualTable, Object.assign({ columnsData: columnsData }, stableTableProps, dynamicTableProps, { isPinned: true, fixedWidth: fixedWidth, onScroll: scrollHandlers.start, listRef: pinnedStartVirtualListRef }), "pinned-start")), [stableTableProps, dynamicTableProps, scrollHandlers.start, pinnedStartVirtualListRef]);
-    const createPinnedEndTable = useCallback((columnsData, fixedWidth) => (_jsx(VirtualTable, Object.assign({ columnsData: columnsData }, stableTableProps, dynamicTableProps, { isPinned: true, fixedWidth: fixedWidth, onScroll: scrollHandlers.end, listRef: pinnedEndVirtualListRef }), "pinned-end")), [stableTableProps, dynamicTableProps, scrollHandlers.end, pinnedEndVirtualListRef]);
-    const createScrollableTable = (columnsData) => (_jsx(VirtualTable, Object.assign({ columnsData: columnsData }, stableTableProps, dynamicTableProps, { isPinned: false, onScroll: scrollHandlers.scrollable, listRef: scrollableVirtualListRef }), "scrollable"));
-    const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
-        switch (containerKey) {
-            case 'pinnedStart':
-                return createPinnedStartTable(columnsData, fixedWidth);
-            case 'pinnedEnd':
-                return createPinnedEndTable(columnsData, fixedWidth);
-            case 'scrollable':
-            default:
-                return createScrollableTable(columnsData);
-        }
-    }, [createPinnedStartTable, createPinnedEndTable, createScrollableTable]);
     const baseCommonProps = {
         showHeader,
         columnsSorting,

package/build/components/VirtualTables/SheetViewVirtualTable/components/MainTable.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style';
 import { MainTableWrapper, UnpinnedTableHeaderWrapper } from '../style';
@@ -7,9 +7,7 @@ import SheetViewTableHeader from './SheetViewTableHeader';
 import SheetViewTableLoading from './SheetViewTableLoading';
 function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, tableLoading, createVirtualTableContainer, }) {
     const theme = useTheme();
-    const allPinnedColumns = useMemo(() => [...pinnedStartColumns, ...pinnedEndColumns], [pinnedStartColumns, pinnedEndColumns]);
-    const memoizedTableBodyStyles = useMemo(() => (Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' })), [tableBodyStyles]);
-    return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { 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-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: memoizedTableBodyStyles }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: allPinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { 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-table-mode": tableMode, height: "100%", dir: theme.direction, 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: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }) })), _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", sx: {

package/build/components/VirtualTables/SheetViewVirtualTable/components/PinnedColumn.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style';
 import { PinnedStartColumnWrapper, PinnedEndColumnWrapper } from '../style';
@@ -7,15 +7,10 @@ import SheetViewTableHeader from './SheetViewTableHeader';
 import SheetViewTableLoading from './SheetViewTableLoading';
 function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, hasPinnedStart, hasPinnedEnd, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableLoading, createVirtualTableContainer, }) {
     const theme = useTheme();
-    const { Wrapper, containerKey } = useMemo(() => {
-        const key = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
-        return {
-            Wrapper: position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper,
-            containerKey: key,
-        };
-    }, [position]);
     if (columnsData.length === 0)
         return null;
+    const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;
+    const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
     return (_jsx(Wrapper, { children: _jsxs(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-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: position === 'start' ? 'pinnedStart' : 'pinnedEnd', hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                         width: '100%',
                         minWidth: 'fit-content',
@@ -26,22 +21,4 @@ function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList,
                             overflow: 'hidden',
                         } }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": `SheetViewVirtualTable_PinnedTableLoading_${position}`, columns: columnsData, isLoading: true, isPinned: true })) : (createVirtualTableContainer(columnsData, containerKey, true, columnsWidth)) })) }))] })) }));
 }
-export default memo(PinnedColumn, (prevProps, nextProps) => {
-    var _a, _b, _c, _d, _e, _f;
-    const criticalProps = [
-        'position',
-        'columnsWidth',
-        'showHeader',
-        'showBackDrop',
-        'tableLoading',
-        'showNoDataView',
-        'hasPinnedStart',
-        'hasPinnedEnd',
-    ];
-    const areCriticalPropsSame = criticalProps.every((prop) => prevProps[prop] === nextProps[prop]);
-    const areColumnsDataSame = ((_a = prevProps.columnsData) === null || _a === void 0 ? void 0 : _a.length) === ((_b = nextProps.columnsData) === null || _b === void 0 ? void 0 : _b.length) &&
-        ((_c = prevProps.columnsData) === null || _c === void 0 ? void 0 : _c.every((col, index) => { var _a, _b, _c, _d; return col.id === ((_b = (_a = nextProps.columnsData) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.id) && col.width === ((_d = (_c = nextProps.columnsData) === null || _c === void 0 ? void 0 : _c[index]) === null || _d === void 0 ? void 0 : _d.width); }));
-    const arePinnedColumnsSame = ((_d = prevProps.pinnedColumnsList) === null || _d === void 0 ? void 0 : _d.length) === ((_e = nextProps.pinnedColumnsList) === null || _e === void 0 ? void 0 : _e.length) &&
-        ((_f = prevProps.pinnedColumnsList) === null || _f === void 0 ? void 0 : _f.every((col, index) => { var _a; return col === ((_a = nextProps.pinnedColumnsList) === null || _a === void 0 ? void 0 : _a[index]); }));
-    return areCriticalPropsSame && areColumnsDataSame && arePinnedColumnsSame;
-});
+export default memo(PinnedColumn);

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

@@ -30,21 +30,4 @@ function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded,
                     } }, { children: ListItemWrapper })));
             } }))) })));
 }
-export default memo(VirtualTable, (prevProps, nextProps) => {
-    var _a, _b, _c;
-    const propsToCompare = [
-        'columnsData',
-        'itemCount',
-        'lastItemIndex',
-        'areAllRowsLoaded',
-        'isPinned',
-        'fixedWidth',
-        'scrollToIndex',
-        'areTotalRowsNotFillingHeight',
-        'overscanCount',
-    ];
-    const areCriticalPropsSame = propsToCompare.every((key) => prevProps[key] === nextProps[key]);
-    const areColumnsDataSame = ((_a = prevProps.columnsData) === null || _a === void 0 ? void 0 : _a.length) === ((_b = nextProps.columnsData) === null || _b === void 0 ? void 0 : _b.length) &&
-        ((_c = prevProps.columnsData) === null || _c === void 0 ? void 0 : _c.every((col, index) => { var _a, _b, _c, _d; return col.id === ((_b = (_a = nextProps.columnsData) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.id) && col.width === ((_d = (_c = nextProps.columnsData) === null || _c === void 0 ? void 0 : _c[index]) === null || _d === void 0 ? void 0 : _d.width); }));
-    return areCriticalPropsSame && areColumnsDataSame;
-});
+export default memo(VirtualTable);

package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useTableState.js

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback } from 'react';
 export const useTableState = () => {
     const [selectedCell, setSelectedCell] = useState(null);
     const [selectedColumn, setSelectedColumn] = useState(null);
@@ -48,7 +48,7 @@ export const useTableState = () => {
         setSelectedChip(null);
         setSelectedRow(null);
     }, []);
-    const tableStateAPI = useMemo(() => ({
+    return {
         selectedCell,
         selectedColumn,
         selectedRow,
@@ -59,17 +59,5 @@ export const useTableState = () => {
         handleCellClick,
         handleColumnClick,
         resetSelection,
-    }), [
-        selectedCell,
-        selectedColumn,
-        selectedRow,
-        showBackDrop,
-        selectedChip,
-        setShowBackdrop,
-        handleChipClick,
-        handleCellClick,
-        handleColumnClick,
-        resetSelection,
-    ]);
-    return tableStateAPI;
+    };
 };

package/build/components/VirtualTables/SheetViewVirtualTable/hooks/useVirtualTableContainer.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo } from 'react';
 import memoize from 'memoize-one';
 const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, selectedRow, selectedChip, onCellClick, onChipClick, containerHeight, rowHeight) => ({
     columns,
@@ -24,20 +24,16 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     rowHeight,
 }));
 export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, selectedRow, selectedChip, handleCellClick, handleChipClick, }) => {
-    const stableRowsLength = useRef(rows.length);
-    if (stableRowsLength.current !== rows.length) {
-        stableRowsLength.current = rows.length;
-    }
     const getItemSize = useCallback((index, height) => {
-        const isLastRow = areAllRowsLoaded && index === stableRowsLength.current;
+        const isLastRow = areAllRowsLoaded && index === rows.length;
         if (isLastRow) {
-            const usedHeight = stableRowsLength.current * rowHeight;
+            const usedHeight = rows.length * rowHeight;
             const remainingHeight = height - usedHeight;
             const minimumLastRowHeight = rowHeight * 2;
             return Math.max(remainingHeight, minimumLastRowHeight);
         }
         return rowHeight;
-    }, [areAllRowsLoaded, rowHeight]);
+    }, [areAllRowsLoaded, rows.length, rowHeight]);
     const commonItemDataParams = useMemo(() => {
         var _a;
         return [

package/build/components/index.d.ts

@@ -106,4 +106,5 @@ export { default as ColorPicker } from './ColorPicker';
 export { default as WindowBackdrop } from './WindowBackdrop';
 export { default as LazyImage } from './LazyImage';
 export { default as AmountStatusChip, type AmountStatusChipProps } from './AmountStatusChip';
+export { default as AuthenticationTypeChip, type AuthenticationTypeChipProps } from './AuthenticationTypeChip';
 export * from './LazyImage';

package/build/components/index.js

@@ -106,4 +106,5 @@ export { default as ColorPicker } from './ColorPicker';
 export { default as WindowBackdrop } from './WindowBackdrop';
 export { default as LazyImage } from './LazyImage';
 export { default as AmountStatusChip } from './AmountStatusChip';
+export { default as AuthenticationTypeChip } from './AuthenticationTypeChip';
 export * from './LazyImage';

package/build/constants/chips/index.d.ts

@@ -0,0 +1 @@
+export * from './statusChips';

package/build/constants/chips/index.js

@@ -0,0 +1 @@
+export * from './statusChips';

package/build/{components/StatusChip/constants.d.ts → constants/chips/statusChips.d.ts}

@@ -1,4 +1,4 @@
-export declare const unknownGeographyColors: {
+export declare const emptyStatusChipColors: {
     bgColor: string;
     borderColor: string;
     textColor: string;

package/build/{components/StatusChip/constants.js → constants/chips/statusChips.js}

@@ -1,4 +1,4 @@
-export const unknownGeographyColors = {
+export const emptyStatusChipColors = {
     bgColor: 'white',
     borderColor: '#F2F2F2',
     textColor: '#20232B33',

package/build/constants/index.d.ts

@@ -12,3 +12,4 @@ export * from './table';
 export * from './toggleOptions';
 export * from './payment';
 export * from './segment';
+export * from './chips';

package/build/constants/index.js

@@ -12,3 +12,4 @@ export * from './table';
 export * from './toggleOptions';
 export * from './payment';
 export * from './segment';
+export * from './chips';

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.103-test.122",
-  "testVersion": 122,
+  "version": "0.1.103-test.5",
+  "testVersion": 5,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -118,19 +118,15 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.1.6",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
     "prettier": "^2.8.8",
     "tsc-alias": "^1.8.16",
     "typescript": "5.0.2",
     "typescript-eslint": "^8.18.2",
-    "vite": "^7.1.4",
+    "vite": "6.0.5",
     "vite-tsconfig-paths": "^4.2.0"
   },
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
-  },
   "lint-staged": {
     "src/**/*.{ts,tsx,json,js,jsx}": [
       "yarn run prettier:fix",

package/build/components/VirtualTables/optimization/AnimationOptimizations.d.ts

@@ -1,25 +0,0 @@
-/// <reference types="react" />
-export declare const useAnimationOptimization: (isAnimating: boolean) => ((callback: () => void) => void) | null;
-export declare const OptimizedAnimatedCell: import("react").MemoExoticComponent<({ children, ...props }: {
-    [key: string]: unknown;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element>;
-export declare const animationStyles: {
-    slideIn: {
-        transform: string;
-        transition: string;
-    };
-    slideOut: {
-        transform: string;
-        transition: string;
-    };
-    fadeIn: {
-        opacity: number;
-        transition: string;
-    };
-    fadeOut: {
-        opacity: number;
-        transition: string;
-    };
-};
-export declare const useScrollOptimization: () => boolean;

package/build/components/VirtualTables/optimization/AnimationOptimizations.js

@@ -1,86 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useMemo, useRef, useEffect } from 'react';
-const optimizedCellStyles = {
-    willChange: 'transform, opacity',
-    transform: 'translateZ(0)',
-    contain: 'layout style paint',
-};
-export const useAnimationOptimization = (isAnimating) => {
-    const animationFrameRef = useRef();
-    const throttledUpdate = useMemo(() => {
-        if (!isAnimating)
-            return null;
-        return (callback) => {
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
-            animationFrameRef.current = requestAnimationFrame(callback);
-        };
-    }, [isAnimating]);
-    useEffect(() => {
-        return () => {
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current);
-            }
-        };
-    }, []);
-    return throttledUpdate;
-};
-export const OptimizedAnimatedCell = memo((_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (_jsx("div", Object.assign({ style: optimizedCellStyles }, props, { children: children })));
-}, (prevProps, nextProps) => {
-    return prevProps.isAnimating === nextProps.isAnimating && prevProps.children === nextProps.children;
-});
-export const animationStyles = {
-    slideIn: {
-        transform: 'translateX(0)',
-        transition: 'transform 0.2s ease-out',
-    },
-    slideOut: {
-        transform: 'translateX(-100%)',
-        transition: 'transform 0.2s ease-out',
-    },
-    fadeIn: {
-        opacity: 1,
-        transition: 'opacity 0.15s ease-out',
-    },
-    fadeOut: {
-        opacity: 0,
-        transition: 'opacity 0.15s ease-out',
-    },
-};
-export const useScrollOptimization = () => {
-    const isScrolling = useRef(false);
-    const scrollTimeoutRef = useRef();
-    useEffect(() => {
-        const handleScroll = () => {
-            isScrolling.current = true;
-            if (scrollTimeoutRef.current) {
-                clearTimeout(scrollTimeoutRef.current);
-            }
-            scrollTimeoutRef.current = setTimeout(() => {
-                isScrolling.current = false;
-            }, 150);
-        };
-        window.addEventListener('scroll', handleScroll, { passive: true });
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-            if (scrollTimeoutRef.current) {
-                clearTimeout(scrollTimeoutRef.current);
-            }
-        };
-    }, []);
-    return isScrolling.current;
-};