@tap-payments/os-micro-frontend-shared 0.0.65 → 0.0.69-sheetview-container-v2

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/VirtualTable/VirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../types/index.js';
-declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

package/build/components/VirtualTable/VirtualTable.js

@@ -33,7 +33,7 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     isError,
     areAllRowsLoaded,
 }));
-function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, }) {
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView = false, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
@@ -83,9 +83,9 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
         itemsCount,
     ]);
     const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
-    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [showHeader && (_jsx(TableHeader, { "data-testid": "VirtualTable_TableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop })), showNoDataView ? (_jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })) : (_jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, Object.assign({ isSheetView: isSheetView }, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [showHeader && (_jsx(TableHeader, { "data-testid": "VirtualTable_TableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop })), showNoDataView ? (_jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })) : (_jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                                         width: '100%',
                                         minWidth: 'fit-content',
-                                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+                                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] })), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
 }
 export default memo(VirtualTable);

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

@@ -312,7 +312,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLImageElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const TableContainer: 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;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isSheetView?: boolean | undefined;
+}, {}, {}>;
 export declare const StyledCardsBox: 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;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {

package/build/components/VirtualTable/style.js

@@ -98,8 +98,6 @@ export const StyledTableBox = styled(Box, {
     paddingBottom: showBackgroundColor ? '52px' : '0',
     display: 'flex',
     flexDirection: 'column',
-    borderBottomLeftRadius: theme.spacing(1.5),
-    borderBottomRightRadius: theme.spacing(1.5),
 }));
 export const ActionIcon = styled(motion.img)(() => ({
     width: '24px',
@@ -107,11 +105,15 @@ export const ActionIcon = styled(motion.img)(() => ({
     position: 'relative',
     zIndex: 2,
 }));
-export const TableContainer = styled(Box)(() => ({
+export const TableContainer = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'isSheetView',
+})(({ isSheetView }) => ({
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
     height: '100%',
+    border: isSheetView ? '1px solid #F2F2F2' : 'none',
+    marginX: isSheetView ? '32px' : '0',
 }));
 export const StyledCardsBox = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'showNoDataView',

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

@@ -2,45 +2,56 @@ export declare const authenticationsTableCellWidth: {
     readonly id: {
         readonly default: "180px";
         readonly text: "180px";
+        readonly sheet: "180px";
     };
     readonly payouts: {
         readonly default: "150px";
         readonly text: "250px";
+        readonly sheet: "250px";
     };
     readonly reference: {
         readonly default: "150px";
         readonly text: "250px";
+        readonly sheet: "250px";
     };
     readonly customer: {
         readonly default: "180px";
         readonly text: "180px";
+        readonly sheet: "180px";
     };
     readonly device: {
         readonly default: "150px";
         readonly text: "250px";
+        readonly sheet: "250px";
     };
     readonly source: {
         readonly default: "94px";
         readonly text: "125px";
+        readonly sheet: "125px";
     };
     readonly authenticate: {
         readonly default: "18px";
         readonly text: "250px";
+        readonly sheet: "250px";
     };
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "250px";
+        readonly sheet: "250px";
     };
     readonly amount: {
         readonly default: "195px";
         readonly text: "195px";
+        readonly sheet: "195px";
     };
     readonly status: {
         readonly default: "150px";
         readonly text: "250px";
+        readonly sheet: "250px";
     };
     readonly actions: {
         readonly default: "100px";
         readonly text: "100px";
+        readonly sheet: "100px";
     };
 };

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

@@ -2,45 +2,56 @@ export const authenticationsTableCellWidth = {
     id: {
         default: '180px',
         text: '180px',
+        sheet: '180px',
     },
     payouts: {
         default: '150px',
         text: '250px',
+        sheet: '250px',
     },
     reference: {
         default: '150px',
         text: '250px',
+        sheet: '250px',
     },
     customer: {
         default: '180px',
         text: '180px',
+        sheet: '180px',
     },
     device: {
         default: '150px',
         text: '250px',
+        sheet: '250px',
     },
     source: {
         default: '94px',
         text: '125px',
+        sheet: '125px',
     },
     authenticate: {
         default: '18px',
         text: '250px',
+        sheet: '250px',
     },
     payment_agreement: {
         default: '50px',
         text: '250px',
+        sheet: '250px',
     },
     amount: {
         default: '195px',
         text: '195px',
+        sheet: '195px',
     },
     status: {
         default: '150px',
         text: '250px',
+        sheet: '250px',
     },
     actions: {
         default: '100px',
         text: '100px',
+        sheet: '100px',
     },
 };

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

@@ -2,129 +2,161 @@ export declare const authorizationTableCellWidth: {
     readonly charge_id: {
         readonly default: "240px";
         readonly text: "240px";
+        readonly sheet: "240px";
     };
     readonly id: {
         readonly default: "225px";
         readonly text: "225px";
+        readonly sheet: "225px";
     };
     readonly auto: {
         readonly default: "70px";
         readonly text: "90px";
+        readonly sheet: "90px";
     };
     readonly balance: {
         readonly default: "60px";
         readonly text: "60px";
+        readonly sheet: "60px";
     };
     readonly product: {
         readonly default: "85px";
         readonly text: "85px";
+        readonly sheet: "85px";
     };
     readonly date: {
         readonly default: "170px";
         readonly text: "170px";
+        readonly sheet: "170px";
     };
     readonly order: {
         readonly default: "80px";
         readonly text: "80px";
+        readonly sheet: "80px";
     };
     readonly customer: {
         readonly default: "170px";
         readonly text: "180px";
+        readonly sheet: "180px";
     };
     readonly reference: {
         readonly default: "95px";
         readonly text: "180px";
+        readonly sheet: "180px";
     };
     readonly source: {
         readonly default: "104px";
         readonly text: "125px";
+        readonly sheet: "125px";
     };
     readonly authenticate: {
         readonly default: "55px";
         readonly text: "250px";
+        readonly sheet: "250px";
     };
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "150px";
+        readonly sheet: "150px";
     };
     readonly amount: {
         readonly default: "170px";
         readonly text: "195px";
+        readonly sheet: "195px";
     };
     readonly destinations: {
         readonly default: "70px";
         readonly text: "240px";
+        readonly sheet: "240px";
     };
     readonly topup: {
         readonly default: "20px";
         readonly text: "95px";
+        readonly sheet: "95px";
     };
     readonly status: {
         readonly default: "77px";
         readonly text: "100px";
+        readonly sheet: "100px";
     };
     readonly merchant: {
         readonly default: "110px";
         readonly text: "150px";
+        readonly sheet: "150px";
     };
     readonly charge: {
         readonly default: "150px";
         readonly text: "150px";
+        readonly sheet: "150px";
     };
     readonly track: {
         readonly default: "220px";
         readonly text: "220px";
+        readonly sheet: "220px";
     };
     readonly payment: {
         readonly default: "150px";
         readonly text: "150px";
+        readonly sheet: "150px";
     };
     readonly receipt: {
         readonly default: "85px";
         readonly text: "150px";
+        readonly sheet: "150px";
     };
     readonly fees: {
         readonly default: "150px";
         readonly text: "150px";
+        readonly sheet: "150px";
     };
     readonly metadata: {
         readonly default: "185px";
         readonly text: "185px";
+        readonly sheet: "185px";
     };
     readonly settlement: {
         readonly default: "200px";
         readonly text: "200px";
+        readonly sheet: "200px";
     };
     readonly gateway: {
         readonly default: "180px";
         readonly text: "180px";
+        readonly sheet: "180px";
     };
     readonly actions: {
         readonly default: "80px";
         readonly text: "100px";
+        readonly sheet: "100px";
     };
     readonly payment_id: {
         readonly default: "150px";
         readonly text: "150px";
+        readonly sheet: "150px";
     };
     readonly auth_code: {
         readonly default: "80px";
         readonly text: "80px";
+        readonly sheet: "80px";
     };
     readonly rrn: {
         readonly default: "100px";
         readonly text: "100px";
+        readonly sheet: "100px";
     };
     readonly transaction_id: {
         readonly default: "120px";
         readonly text: "120px";
+        readonly sheet: "120px";
     };
     readonly device: {
         readonly default: "60px";
         readonly text: "190px";
+        readonly sheet: "190px";
     };
     readonly card_no: {
         readonly default: "120px";
         readonly text: "120px";
+        readonly sheet: "120px";
     };
 };

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

@@ -2,129 +2,161 @@ export const authorizationTableCellWidth = {
     charge_id: {
         default: '240px',
         text: '240px',
+        sheet: '240px',
     },
     id: {
         default: '225px',
         text: '225px',
+        sheet: '225px',
     },
     auto: {
         default: '70px',
         text: '90px',
+        sheet: '90px',
     },
     balance: {
         default: '60px',
         text: '60px',
+        sheet: '60px',
     },
     product: {
         default: '85px',
         text: '85px',
+        sheet: '85px',
     },
     date: {
         default: '170px',
         text: '170px',
+        sheet: '170px',
     },
     order: {
         default: '80px',
         text: '80px',
+        sheet: '80px',
     },
     customer: {
         default: '170px',
         text: '180px',
+        sheet: '180px',
     },
     reference: {
         default: '95px',
         text: '180px',
+        sheet: '180px',
     },
     source: {
         default: '104px',
         text: '125px',
+        sheet: '125px',
     },
     authenticate: {
         default: '55px',
         text: '250px',
+        sheet: '250px',
     },
     payment_agreement: {
         default: '50px',
         text: '150px',
+        sheet: '150px',
     },
     amount: {
         default: '170px',
         text: '195px',
+        sheet: '195px',
     },
     destinations: {
         default: '70px',
         text: '240px',
+        sheet: '240px',
     },
     topup: {
         default: '20px',
         text: '95px',
+        sheet: '95px',
     },
     status: {
         default: '77px',
         text: '100px',
+        sheet: '100px',
     },
     merchant: {
         default: '110px',
         text: '150px',
+        sheet: '150px',
     },
     charge: {
         default: '150px',
         text: '150px',
+        sheet: '150px',
     },
     track: {
         default: '220px',
         text: '220px',
+        sheet: '220px',
     },
     payment: {
         default: '150px',
         text: '150px',
+        sheet: '150px',
     },
     receipt: {
         default: '85px',
         text: '150px',
+        sheet: '150px',
     },
     fees: {
         default: '150px',
         text: '150px',
+        sheet: '150px',
     },
     metadata: {
         default: '185px',
         text: '185px',
+        sheet: '185px',
     },
     settlement: {
         default: '200px',
         text: '200px',
+        sheet: '200px',
     },
     gateway: {
         default: '180px',
         text: '180px',
+        sheet: '180px',
     },
     actions: {
         default: '80px',
         text: '100px',
+        sheet: '100px',
     },
     payment_id: {
         default: '150px',
         text: '150px',
+        sheet: '150px',
     },
     auth_code: {
         default: '80px',
         text: '80px',
+        sheet: '80px',
     },
     rrn: {
         default: '100px',
         text: '100px',
+        sheet: '100px',
     },
     transaction_id: {
         default: '120px',
         text: '120px',
+        sheet: '120px',
     },
     device: {
         default: '60px',
         text: '190px',
+        sheet: '190px',
     },
     card_no: {
         default: '120px',
         text: '120px',
+        sheet: '120px',
     },
 };