@tap-payments/os-micro-frontend-shared 0.0.273-test.9 → 0.0.275-test.1

package/build/components/ScrollLoader/ScrollLoader.d.ts

@@ -0,0 +1,10 @@
+import React, { PropsWithChildren } from 'react';
+import { StackProps } from '@mui/material/Stack';
+export type ScrollLoaderProps<IRootProps extends object = StackProps> = PropsWithChildren<IRootProps & {
+    component?: React.FC<IRootProps> | React.ElementType;
+    loadMoreItems: () => Promise<unknown>;
+    loading?: boolean;
+    hasMore?: boolean;
+}>;
+declare const ScrollLoader: <IRootProps extends object = StackProps>(props: ScrollLoaderProps<IRootProps>) => import("react/jsx-runtime").JSX.Element;
+export default ScrollLoader;

package/build/components/ScrollLoader/ScrollLoader.js

@@ -0,0 +1,43 @@
+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 { useCallback, useEffect, useRef } from 'react';
+import Stack from '@mui/material/Stack';
+const OFFSET = 50;
+const ScrollLoader = (props) => {
+    const { component = Stack, loadMoreItems, hasMore, loading, children } = props, rootProps = __rest(props, ["component", "loadMoreItems", "hasMore", "loading", "children"]);
+    const loadMoreItemsRef = useRef(loadMoreItems);
+    loadMoreItemsRef.current = loadMoreItems;
+    const Component = component;
+    const containerRef = useRef(null);
+    const handleScroll = useCallback(() => {
+        const el = containerRef.current;
+        if (!el || loading || !hasMore)
+            return;
+        const isBottom = el.scrollHeight - el.scrollTop <= el.clientHeight + OFFSET;
+        if (isBottom)
+            loadMoreItemsRef.current();
+    }, [loading, hasMore]);
+    useEffect(() => {
+        loadMoreItemsRef.current().then(() => {
+            setTimeout(() => {
+                handleScroll();
+            }, 100);
+        });
+    }, []);
+    return (_jsx(Component, Object.assign({ overflow: "auto", height: "100%", maxHeight: "calc(100vh - 321px)", ref: containerRef, onScroll: handleScroll, style: {
+            overflow: 'auto',
+            height: '100%',
+            maxHeight: 'calc(100vh - 321px)',
+        } }, rootProps, { children: children })));
+};
+export default ScrollLoader;

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

@@ -0,0 +1,3 @@
+import ScrollLoader from './ScrollLoader';
+export default ScrollLoader;
+export * from './ScrollLoader';

package/build/components/ScrollLoader/index.js

@@ -0,0 +1,3 @@
+import ScrollLoader from './ScrollLoader';
+export default ScrollLoader;
+export * from './ScrollLoader';

package/build/components/TableCells/CustomCells/SalesChannelCell/SalesChannelCell.js

@@ -23,6 +23,7 @@ function SalesChannelCell(_a) {
         const channelCode = (_a = channel.code) === null || _a === void 0 ? void 0 : _a.replace(/_/g, '');
         return (_jsx(Tooltip, Object.assign({ title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: salesChannelAnimation(index, isTextShown ? 74 : 0), sx: {
                     width: isTextShown ? '70px' : '36px',
+                    cursor: 'pointer',
                 }, onClick: () => {
                     window.open(channel.address, '_blank');
                 } }, { children: isTextShown ? (_jsx(ChannelTextWrapper, { children: _jsx(ChannelTextLabel, { children: channelCode }) })) : (_jsx(StyledSourceImage, { src: channel.logo, alt: channelCode })) })) }), `${channel}-${index}`));

package/build/components/VirtualTable/SheetView/SheetViewTableHeader.js

@@ -8,11 +8,9 @@ import { StyledCell } from '../style';
 import { ActionIcon, ColumnIcon, PinIconContainer, StyledHeader, StyledMUITableRow, HeaderText } from './style';
 function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
     const [anchorEl, setAnchorEl] = useState(null);
-    const [columnFilterEl, setColumnFilterEl] = useState(null);
     const open = Boolean(anchorEl);
     const theme = useTheme();
     const handleClick = (event) => {
-        event.stopPropagation();
         setAnchorEl(event.currentTarget);
     };
     const handleClose = () => {
@@ -47,12 +45,7 @@ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort
                     const isPinned = pinnedColumns.includes(id);
                     const isDefaultPinned = !!column.isDefaultPinned;
                     const isSelected = selectedColumn === id;
-                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => {
-                            onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
-                            setColumnFilterEl(event.currentTarget);
-                        }, sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl, onClose: (event) => {
-                                    onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
-                                } }))), sortable && (_jsx(Box, Object.assign({ sx: { diplay: 'flex', alignItems: 'center' } }, { children: _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id }) }))), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
+                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event), sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, headerStyle) }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && _jsx(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id }), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
                                     event.stopPropagation();
                                     handlePinClick(id);
                                 }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${id}-${colIndex}`));

package/build/components/VirtualTable/SheetView/style.js

@@ -9,7 +9,6 @@ export const ColumnIcon = styled('img')(() => ({
     width: '8px',
     height: '6.4px',
     cursor: 'pointer',
-    marginTop: '2px',
 }));
 export const HeaderText = styled('span')(({ theme }) => ({
     color: theme.palette.text.primary,

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ColumnFilterProps } from './type';
-declare function ColumnFilter(filter: ColumnFilterProps): import("react/jsx-runtime").JSX.Element;
+import { IColumnFilter } from '../../../../types/index.js';
+declare function ColumnFilter(filter: IColumnFilter): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof ColumnFilter>;
 export default _default;

package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Popper from '@mui/material/Popper';
 import { closeIcon, columnIcon, whiteFilterIcon } from '../../../../constants/index.js';
 import Inputs from './Inputs';
@@ -8,14 +9,12 @@ import List from './List';
 import { FilterWrapper } from './style';
 import CustomBackdrop from '../../../CustomBackdrop';
 function ColumnFilter(filter) {
-    const { anchorEl, setAnchorEl, onClose } = filter;
+    const [anchorEl, setAnchorEl] = useState(null);
     const openDropdown = (event) => {
         setAnchorEl(event.currentTarget);
     };
-    const onCloseDropdown = (event) => {
-        event.stopPropagation();
+    const onCloseDropdown = () => {
         setAnchorEl(null);
-        onClose === null || onClose === void 0 ? void 0 : onClose(event);
     };
     const filterData = useMemo(() => { var _a; return ((_a = filter === null || filter === void 0 ? void 0 : filter.options) === null || _a === void 0 ? void 0 : _a.reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = filter === null || filter === void 0 ? void 0 : filter.data) === null || _a === void 0 ? void 0 : _a[apiKey] })); }, {})) || {}; }, [filter]);
     const listFilterData = useMemo(() => {
@@ -51,10 +50,10 @@ function ColumnFilter(filter) {
         }
         return null;
     }, [open, filter, anchorEl, setAnchorEl]);
-    return (_jsxs(_Fragment, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
-                            filter.onClear(filterApiKeys);
-                        } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
-                    zIndex: 9999,
-                } }, { children: renderFilter }))] }));
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
+                                filter.onClear(filterApiKeys);
+                            } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
+                        zIndex: 9999,
+                    } }, { children: renderFilter }))] })) })));
 }
 export default memo(ColumnFilter);

package/build/components/VirtualTable/components/ColumnFilter/Inputs/Inputs.d.ts

@@ -1,7 +1,6 @@
-import { MouseEvent } from 'react';
 import type { IColumnFilter, IColumnFilterInputs } from '../../../../../types/index.js';
 interface InputsI {
-    onCloseDropdown: (e: MouseEvent<HTMLElement>) => void;
+    onCloseDropdown: () => void;
     filter: IColumnFilter & IColumnFilterInputs;
 }
 declare function Inputs({ onCloseDropdown, filter: { options, onConfirm, data, isOnlyOneFilter, onColumnFilterClearClick, wrapperSx } }: InputsI): import("react/jsx-runtime").JSX.Element;

package/build/components/VirtualTable/components/ColumnFilter/Inputs/Inputs.js

@@ -13,12 +13,12 @@ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOn
         setValues((options || []).reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = data === null || data === void 0 ? void 0 : data[apiKey]) !== null && _a !== void 0 ? _a : '' })); }, {}));
     }, []);
     const { t } = useTranslation();
-    const onClickOkay = (e) => {
+    const onClickOkay = () => {
         onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(values);
-        onCloseDropdown(e);
+        onCloseDropdown();
     };
-    const onClickCancel = (e) => {
-        onCloseDropdown(e);
+    const onClickCancel = () => {
+        onCloseDropdown();
     };
     const onClickClear = () => {
         onColumnFilterClearClick === null || onColumnFilterClearClick === void 0 ? void 0 : onColumnFilterClearClick();

package/build/components/VirtualTable/components/ColumnFilter/List/List.d.ts

@@ -1,7 +1,7 @@
-import React, { MouseEvent } from 'react';
+import React from 'react';
 import type { IColumnFilter, IColumnFilterList } from '../../../../../types/index.js';
 interface ListI {
-    onCloseDropdown: (e: MouseEvent<HTMLElement>) => void;
+    onCloseDropdown: () => void;
     filter: IColumnFilter & IColumnFilterList;
     styles?: React.CSSProperties;
 }

package/build/components/VirtualTable/components/ColumnFilter/List/List.js

@@ -25,10 +25,10 @@ function List({ onCloseDropdown, filter, styles }) {
         if (filter.options)
             setItemsList(renderItems(filter.options));
     }, [filter === null || filter === void 0 ? void 0 : filter.data]);
-    const onClickCancel = (e) => {
-        onCloseDropdown(e);
+    const onClickCancel = () => {
+        onCloseDropdown();
     };
-    const onClickOkay = (e) => {
+    const onClickOkay = () => {
         var _a;
         const selectedValues = values.reduce((acc, { options, apiKey: parentKey, isSelected: isParentSelected }) => {
             if (options) {
@@ -45,7 +45,7 @@ function List({ onCloseDropdown, filter, styles }) {
         const selectedValueSet = new Set(selectedValues);
         if (Object.keys(values).length)
             (_a = filter === null || filter === void 0 ? void 0 : filter.onConfirm) === null || _a === void 0 ? void 0 : _a.call(filter, { [filter.apiKey]: [...selectedValueSet] });
-        onCloseDropdown(e);
+        onCloseDropdown();
     };
     const onUpdateMenuItems = (latestMenuItems) => {
         const resetItems = (items) => items.map(({ name, selected, menuItems, label }) => (Object.assign(Object.assign(Object.assign({}, (label && { placeholder: label })), { apiKey: name, isSelected: selected }), ((menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) && { options: resetItems(menuItems) }))));

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type TableErrorProps = {
+    isTimeoutError?: boolean;
+    tableError?: boolean;
+    sandboxMode?: boolean;
+    tableEmpty?: boolean;
+    error: Error | null;
+    triggerDataRefetch: () => Promise<unknown>;
+};
+declare const _default: import("react").MemoExoticComponent<(props: TableErrorProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/build/components/VirtualTable/components/TableError.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import ErrorList from './ErrorList';
+import { backendErrorHandler } from '../../../utils/index.js';
+import EmptyList from './EmptyList';
+const TableError = (props) => {
+    const { isTimeoutError, tableError, triggerDataRefetch, sandboxMode, tableEmpty, error } = props;
+    if (isTimeoutError) {
+        return (_jsx(ErrorList, { "data-testid": "VirtualTable_ErrorList_timeoutError", shouldMinimizeWidth: true, heading: "timeOut", message: "yourRequestOutPleaseTryAgain", triggerDataRefetch: triggerDataRefetch, sandboxMode: sandboxMode }));
+    }
+    const axiosErr = error;
+    if (tableError) {
+        const { formatted } = backendErrorHandler({ error: axiosErr, fallbackMessage: 'connectionErrorMsg' });
+        return (_jsx(ErrorList, { "data-testid": "VirtualTable_ErrorList_tableError", heading: "somethingWentWrong", message: formatted, triggerDataRefetch: triggerDataRefetch, sandboxMode: sandboxMode }));
+    }
+    if (tableEmpty) {
+        const { formatted } = backendErrorHandler({ error: axiosErr, fallbackMessage: 'tryAdjustingTheDateOrFilters' });
+        return _jsx(EmptyList, { sandboxMode: sandboxMode, heading: "nothingFound", message: formatted });
+    }
+    return (_jsx(ErrorList, { "data-testid": "VirtualTable_ErrorList_tableError", heading: "somethingWentWrong", message: "connectionErrorMsg", triggerDataRefetch: triggerDataRefetch, sandboxMode: sandboxMode }));
+};
+export default memo(TableError);

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

@@ -42,11 +42,9 @@ const StyledMUITableRow = styled(MUITableRow, {
 }))));
 function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, isSheetView }) {
     const [anchorEl, setAnchorEl] = useState(null);
-    const [columnFilterEl, setColumnFilterEl] = useState(null);
     const open = Boolean(anchorEl);
     const theme = useTheme();
     const handleClick = (event) => {
-        event.stopPropagation();
         setAnchorEl(event.currentTarget);
     };
     const handleClose = () => {
@@ -64,9 +62,7 @@ function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columns
                     const { header, id, align, headerStyle, sortable, filter } = column;
                     const isFirst = id === columns[0].id;
                     const isLast = id === columns[columns.length - 1].id;
-                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: isFirst, isLast: isLast, onClick: (event) => {
-                            setColumnFilterEl(event.currentTarget);
-                        }, sx: Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', fontWeight: 600 }, headerStyle), isSheetView: isSheetView }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl })), sortable && (_jsx(Box, Object.assign({ sx: { diplay: 'flex', alignItems: 'center' } }, { children: _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id }) })))] }), `${id}-${colIndex}`));
+                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: isFirst, isLast: isLast, sx: Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', fontWeight: 600 }, headerStyle), isSheetView: isSheetView }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id })] }), `${id}-${colIndex}`));
                 }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
                     {
                         label: 'Sort A-Z',

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

@@ -10,7 +10,7 @@ interface TableNoDataProps {
     triggerDataRefetch: () => Promise<unknown>;
     footerProps: IVirtualTable['footerProps'];
 }
-declare function TableNoData({ error, tableEmpty, isTimeoutError, tableError, tableLoading, orderedColumns, triggerDataRefetch, footerProps, }: TableNoDataProps): JSX.Element;
+declare function TableNoData({ error, tableEmpty, isTimeoutError, tableError, tableLoading, orderedColumns, triggerDataRefetch, footerProps, }: TableNoDataProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TableNoData {
     var displayName: string;
 }

package/build/components/VirtualTable/components/TableNoData.js

@@ -1,32 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
-import { backendErrorHandler } from '../../../utils/index.js';
-import EmptyList from './EmptyList/EmptyList';
-import ErrorList from './ErrorList/ErrorList';
 import TableLoading from './TableLoading';
 import { StyledSolidBackground } from '../style';
+import TableError from './TableError';
 function TableNoData({ error, tableEmpty, isTimeoutError, tableError, tableLoading, orderedColumns, triggerDataRefetch, footerProps, }) {
-    let content;
     if (tableLoading) {
-        content = (_jsx(StyledSolidBackground, Object.assign({ "data-testid": "VirtualTable_SolidBackground" }, { children: _jsx(TableLoading, { "data-testid": "VirtualTable_TableLoading", columns: orderedColumns, isLoading: true }) })));
+        return (_jsx(StyledSolidBackground, Object.assign({ "data-testid": "VirtualTable_SolidBackground" }, { children: _jsx(TableLoading, { "data-testid": "VirtualTable_TableLoading", columns: orderedColumns, isLoading: true }) })));
     }
-    else if (isTimeoutError) {
-        content = (_jsx(ErrorList, { "data-testid": "VirtualTable_ErrorList_timeoutError", shouldMinimizeWidth: true, heading: "timeOut", message: "yourRequestOutPleaseTryAgain", triggerDataRefetch: triggerDataRefetch, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode }));
-    }
-    else if (tableError) {
-        const axiosErr = error;
-        const { formatted } = backendErrorHandler({ error: axiosErr, fallbackMessage: 'connectionErrorMsg' });
-        content = (_jsx(ErrorList, { "data-testid": "VirtualTable_ErrorList_tableError", heading: "somethingWentWrong", message: formatted, triggerDataRefetch: triggerDataRefetch, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode }));
-    }
-    else if (tableEmpty) {
-        const axiosErr = error;
-        const { formatted } = backendErrorHandler({ error: axiosErr, fallbackMessage: 'tryAdjustingTheDateOrFilters' });
-        content = _jsx(EmptyList, { sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, heading: "nothingFound", message: formatted });
-    }
-    else {
-        content = (_jsx(ErrorList, { "data-testid": "VirtualTable_ErrorList_tableError", heading: "somethingWentWrong", message: "connectionErrorMsg", triggerDataRefetch: triggerDataRefetch, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode }));
-    }
-    return content;
+    return (_jsx(TableError, { isTimeoutError: isTimeoutError, tableEmpty: tableEmpty, tableError: tableError, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, error: error, triggerDataRefetch: triggerDataRefetch }));
 }
 TableNoData.displayName = 'TableNoData';
 export default memo(TableNoData);

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

@@ -3,6 +3,7 @@ export * from './EmptyList';
 export * from './ErrorList';
 export * from './TableFooter';
 export { default as TableFooter } from './TableFooter';
+export { default as TableError } from './TableError';
 export * from './virtualScroll';
 export * from './RowErrorState';
 export { default as TableHeader } from './TableHeader';

package/build/components/VirtualTable/components/index.js

@@ -3,6 +3,7 @@ export * from './EmptyList';
 export * from './ErrorList';
 export * from './TableFooter';
 export { default as TableFooter } from './TableFooter';
+export { default as TableError } from './TableError';
 export * from './virtualScroll';
 export * from './RowErrorState';
 export { default as TableHeader } from './TableHeader';

package/build/components/VirtualTable/style.js

@@ -29,7 +29,7 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
     backgroundColor: theme.palette.background.default,
 }));
 export const StyledCell = styled(TableCell, {
-    shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView', 'isSelected'].includes(prop),
+    shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView'].includes(prop),
 })(({ theme, isLast, isFirst, isSheetView, isSelected }) => (Object.assign(Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: isSheetView ? theme.palette.text.primary : theme.palette.grey[700], fontSize: isSheetView ? theme.typography.subtitle1.fontSize : theme.typography.caption.fontSize, height: '100%', fontWeight: isSheetView ? 400 : theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center' }, (isSheetView && {
     borderRight: isLast ? 'none' : `1px solid ${theme.palette.divider}`,
     paddingInline: '8px !important',

package/build/components/index.d.ts

@@ -12,7 +12,7 @@ export { default as Checkbox } from './Checkbox';
 export { default as Dialog, DialogToolbar } from './Dialog';
 export { default as Tooltip } from './Tooltip';
 export * from './RFH';
-export { default as VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, TableFooter, } from './VirtualTable';
+export { default as VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, TableFooter, TableError, } from './VirtualTable';
 export { default as SheetViewVirtualTable } from './VirtualTable/SheetView/SheetViewVirtualTable';
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
@@ -95,3 +95,5 @@ export * from './TableHeader';
 export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';
 export * from './SourceChips';
+export { default as ScrollLoader } from './ScrollLoader';
+export * from './ScrollLoader';

package/build/components/index.js

@@ -12,7 +12,7 @@ export { default as Checkbox } from './Checkbox';
 export { default as Dialog, DialogToolbar } from './Dialog';
 export { default as Tooltip } from './Tooltip';
 export * from './RFH';
-export { default as VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, TableFooter, } from './VirtualTable';
+export { default as VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, TableFooter, TableError, } from './VirtualTable';
 export { default as SheetViewVirtualTable } from './VirtualTable/SheetView/SheetViewVirtualTable';
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
@@ -95,3 +95,5 @@ export * from './TableHeader';
 export { default as RangeCalender } from './RangeCalender';
 export { default as AppServices } from './AppServices';
 export * from './SourceChips';
+export { default as ScrollLoader } from './ScrollLoader';
+export * from './ScrollLoader';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.273-test.9",
-  "testVersion": 9,
+  "version": "0.0.275-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",

package/build/components/VirtualTable/components/ColumnFilter/type.d.ts

@@ -1,7 +0,0 @@
-import { MouseEvent } from 'react';
-import { IColumnFilter } from '../../../../types/index.js';
-export type ColumnFilterProps = IColumnFilter & {
-    anchorEl: HTMLElement | null;
-    setAnchorEl: (el: HTMLElement | null) => void;
-    onClose?: (e: MouseEvent<HTMLElement>) => void;
-};

package/build/components/VirtualTable/components/ColumnFilter/type.js

@@ -1 +0,0 @@
-export {};