@tap-payments/os-micro-frontend-shared 0.0.299 → 0.0.300

package/build/components/TableCells/CustomCells/ApplicationStatusCell/style.js

@@ -1,51 +1,22 @@
-import { styled } from '@mui/material';
-import { motion } from 'framer-motion';
-export const StyledAppsCell = styled('span')(({ theme }) => ({
+import { Box, styled } from '@mui/material';
+export const AppsWrapper = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-    justifyContent: 'flex-start',
     gap: theme.spacing(1),
+    borderRadius: '44px',
+    lineHeight: '120%',
 }));
-export const AppsStatusContainer = styled(motion.span)(({ theme, sourcesCount }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    position: 'absolute',
-    minWidth: `${sourcesCount * 6 + 36}px `,
-    minHeight: '24px',
-    cursor: 'default',
-    backgroundColor: theme.palette.background.paper,
-    borderRadius: '16px',
-}));
-export const AppTextLabel = styled('span')(() => ({
-    fontSize: '11px',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    padding: '2px 0',
-}));
-export const AppTextWrapper = styled('div')(() => ({
+export const IconWrapper = styled(Box)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    paddingInline: '4px',
-}));
-export const appStatusAnimation = (index, shadow, xDelta) => ({
-    start: {
-        x: index * 6,
-        transition: {
-            duration: 0.3,
-            type: 'tween',
-            ease: 'easeIn',
-        },
-    },
-    animate: {
-        x: xDelta ? index * xDelta : index * 40,
-        transition: {
-            duration: 0.3,
-            type: 'tween',
-            ease: 'easeOut',
-        },
-        boxShadow: shadow,
+    width: '23px',
+    height: '23px',
+    borderRadius: '50%',
+    border: `1px solid ${theme.palette.divider}`,
+    img: {
+        width: '18.5px',
+        height: '18.5px',
+        borderRadius: '50%',
     },
-});
+}));

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

@@ -24,5 +24,5 @@ export default function BrandsCell(_a) {
         overlayIcon: icon ? _jsx(VerificationIcon, { src: icon }) : null,
         label: brand.name,
     };
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(BrandsWrapper, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden' } }, { children: [_jsx(IconWithBadge, { mainIcon: item.icon, overlayIcon: item.overlayIcon, mainIconSize: 16, containerSize: 16, borderColor: "transparent" }, item.label), _jsx(Label, { children: brand.name })] })) })) }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(BrandsWrapper, { children: _jsx(Tooltip, Object.assign({ title: brand.name }, { children: _jsxs(Box, Object.assign({ display: "flex", alignItems: "center", gap: '5px', sx: { overflow: 'hidden' } }, { children: [_jsx(IconWithBadge, { mainIcon: item.icon, overlayIcon: item.overlayIcon }, item.label), _jsx(Label, { children: brand.name })] })) })) }) })));
 }

package/build/components/TableCells/CustomCells/BrandsCell/style.js

@@ -3,10 +3,9 @@ export const BrandsWrapper = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
-    border: '1px solid #F2F2F2',
     borderRadius: '44px',
-    padding: '4px 8px',
     lineHeight: '120%',
+    cursor: 'pointer',
 }));
 export const BrandName = styled('div')(({ theme }) => ({
     fontSize: '14px',

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

@@ -17,8 +17,7 @@ import Tooltip from '../../../Tooltip';
 import { ImageWrapper } from '../../../index.js';
 import { TableCell } from '../../../TableCells';
 import { segmentsIcons } from './constant';
-import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, referenceSourceAnimation } from './style';
-import IconWithBadge from '../../../IconWithBadge';
+import { ReferenceTextLabel, ReferenceTextWrapper, ReferenceSourcesContainer, StyledSourceCell, StyledSourceImage, referenceSourceAnimation, } from './style';
 function SegmentsCell(_a) {
     var { isTextShown } = _a, props = __rest(_a, ["isTextShown"]);
     const [isTooltipOpen, setIsTooltipOpen] = useState(false);
@@ -33,11 +32,11 @@ function SegmentsCell(_a) {
             }, onClose: () => {
                 setIsTooltipOpen(false);
             }, title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: referenceSourceAnimation(index, theme.shadows[4], isTextShown ? 83 : 0), sx: {
-                    width: isTextShown ? '79px' : '36px',
-                } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment) }) })) : (_jsx(IconWithBadge, { mainIcon: (segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) || segmentsIcons[segment], mainIconSize: segment === 'order' ? 11.82 : 16, containerSize: segment === 'order' ? 11.82 : 16, sx: Object.assign({}, ((segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) && { borderRadius: '40px' })), onError: (e) => {
+                    width: isTextShown ? '79px' : '24px',
+                } }, { children: isTextShown ? (_jsx(ReferenceTextWrapper, { children: _jsx(ReferenceTextLabel, { children: startCase(segment) }) })) : (_jsx(StyledSourceImage, { src: (segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) || segmentsIcons[segment], alt: segment, sx: Object.assign(Object.assign({}, (segment === 'order' && { width: '11.82px' })), ((segmentData === null || segmentData === void 0 ? void 0 : segmentData.icon) && { borderRadius: '40px' })), onError: (e) => {
                         e.currentTarget.src = segmentsIcons[segment];
                         e.currentTarget.style.borderRadius = '0px';
-                    }, borderColor: "transparent" })) })) }), `${segment}-${index}`));
+                    } })) })) }), `${segment}-${index}`));
     }), [props, segments, isTextShown, theme]);
     const referenceSourcesCount = (ReferenceSources === null || ReferenceSources === void 0 ? void 0 : ReferenceSources.length) || 0;
     return (_jsx(TableCell, Object.assign({}, props, { children: _jsx(StyledSourceCell, { children: referenceSourcesCount > 0 ? (_jsx(ReferenceSourcesContainer, Object.assign({ layout: true, className: "reference-sources-container", whileHover: "animate", animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {

package/build/components/TableCells/CustomCells/SegmentsCell/style.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/TableCells/CustomCells/SegmentsCell/style.js

@@ -6,6 +6,10 @@ export const StyledSourceCell = styled('span')(({ theme }) => ({
     justifyContent: 'flex-start',
     gap: theme.spacing(1),
 }));
+export const StyledSourceImage = styled('img')(() => ({
+    maxWidth: '12px',
+    maxHeight: '12px',
+}));
 export const ReferenceSourcesContainer = styled(motion.span)(({ theme, sourcesCount }) => ({
     display: 'flex',
     alignItems: 'center',
@@ -40,7 +44,7 @@ export const referenceSourceAnimation = (index, shadow, xDelta) => ({
         },
     },
     animate: {
-        x: xDelta ? index * xDelta : index * 40,
+        x: xDelta ? index * xDelta : index * 28,
         transition: {
             duration: 0.3,
             type: 'tween',

package/build/components/TableCells/CustomCells/StatusCell/constant.d.ts

@@ -38,23 +38,6 @@ export declare const payoutStatusIcons: {
     SETTLED: string;
     PENDING: string;
 };
-export declare const payoutStatusStyles: {
-    PAID_OUT: {
-        color: string;
-        background: string;
-        border: string;
-    };
-    SETTLED: {
-        color: string;
-        background: string;
-        border: string;
-    };
-    PENDING: {
-        color: string;
-        background: string;
-        border: string;
-    };
-};
 export declare const authorizedStatusIcons: {
     AUTHORIZED: string;
 };
@@ -62,20 +45,3 @@ export declare const capturedStatusesStyles: Record<(typeof unCapturedStatuses)[
     color: string;
     background: string;
 }>;
-export declare const chargeSheetViewChipStyles: {
-    ABANDONED: {
-        color: string;
-        background: string;
-        border: string;
-    };
-    CANCELLED: {
-        color: string;
-        background: string;
-        border: string;
-    };
-    INITIATED: {
-        color: string;
-        background: string;
-        border: string;
-    };
-};

package/build/components/TableCells/CustomCells/StatusCell/constant.js

@@ -82,23 +82,6 @@ export const payoutStatusIcons = {
     SETTLED: settledIcon,
     PENDING: settlementInitiatedIcon,
 };
-export const payoutStatusStyles = {
-    PAID_OUT: {
-        color: '#2ACE00',
-        background: '#2ACE001A',
-        border: 'none',
-    },
-    SETTLED: {
-        color: '#2ACE00',
-        background: 'transparent',
-        border: '1px solid #2ACE0066',
-    },
-    PENDING: {
-        color: '#FF7A00',
-        background: '#FF7A000D',
-        border: 'none',
-    },
-};
 export const authorizedStatusIcons = {
     AUTHORIZED: authorizedIcon,
 };
@@ -108,16 +91,3 @@ export const capturedStatusesStyles = {
         background: '#1F88D00D',
     },
 };
-export const chargeSheetViewChipStyles = Object.assign(Object.assign(Object.assign({}, unCapturedStatusesStyles), capturedStatusesStyles), { ABANDONED: {
-        color: '#FFD600',
-        background: 'white',
-        border: '1px solid #FFD60080',
-    }, CANCELLED: {
-        color: '#EDC806',
-        background: '#FFD6001A',
-        border: 'none',
-    }, INITIATED: {
-        color: '#8D8D94',
-        background: 'white',
-        border: '1px solid #8D8D941A',
-    } });

package/build/components/VirtualTable/SheetView/components/SheetViewTableRowLoading.d.ts

@@ -6,7 +6,8 @@ interface ISheetViewTableRowLoadingProps {
     animationType?: AnimationType;
     style?: CSSProperties;
     rowIndex?: number;
+    useTableBackground?: boolean;
 }
-declare function SheetViewTableRowLoading({ columns, style, index, animationType, rowIndex }: ISheetViewTableRowLoadingProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewTableRowLoading({ columns, style, index, animationType, rowIndex, useTableBackground, }: ISheetViewTableRowLoadingProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableRowLoading>;
 export default _default;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import Skeleton from '@mui/material/Skeleton';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import TableCell from '@mui/material/TableCell';
 import MUITableRow from '@mui/material/TableRow';
 import { areEqual } from 'react-window';
@@ -11,14 +11,16 @@ const StyledSkeleton = styled(Skeleton)(() => ({
     width: '100%',
     minWidth: '20px',
 }));
-function SheetViewTableRowLoading({ columns, style, index, animationType, rowIndex = 0 }) {
-    return (_jsx(MUITableRow, Object.assign({ sx: Object.assign(Object.assign({}, style), { display: 'flex', borderBottom: '1px solid #F2F2F2', minHeight: '28px', height: '28px', alignItems: 'center', '&:hover': {
+function SheetViewTableRowLoading({ columns, style, index, animationType, rowIndex = 0, useTableBackground = false, }) {
+    const theme = useTheme();
+    return (_jsx(MUITableRow, Object.assign({ sx: Object.assign(Object.assign({}, style), { display: 'flex', borderBottom: '1px solid #F2F2F2', minHeight: '28px', height: '28px', alignItems: 'center', backgroundColor: useTableBackground ? theme.palette.background.default : 'transparent', '&:hover': {
                 backgroundColor: 'transparent !important',
             } }), component: "div", hover: true }, { children: columns.map((column, colIndex) => {
             var _a;
             const isLastColumn = colIndex === columns.length - 1;
             const isFirstColumn = colIndex === 0;
-            const shouldShowActualData = isFirstColumn && column.render;
+            const isPinnedStart = column.pinned === 'start';
+            const shouldShowActualData = isFirstColumn && isPinnedStart;
             return (_jsx(TableCell, Object.assign({ sx: {
                     width: column.width || `${100 / columns.length}%` || '20%',
                     paddingBlock: '0',

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

@@ -4,5 +4,5 @@ interface InputsI {
     onCloseDropdown: (e: MouseEvent<HTMLElement>) => void;
     filter: IColumnFilter & IColumnFilterInputs;
 }
-declare function Inputs({ onCloseDropdown, filter: { options, onConfirm, data, isOnlyOneFilter, onClearFilterFields, wrapperSx } }: InputsI): import("react/jsx-runtime").JSX.Element;
+declare function Inputs({ onCloseDropdown, filter: { options, onConfirm, data, isOnlyOneFilter, onColumnFilterClearClick, wrapperSx } }: InputsI): import("react/jsx-runtime").JSX.Element;
 export default Inputs;

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

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { grayCloseIcon, searchIcon } from '../../../../../constants/index.js';
 import { Wrapper, Text, InputStyled, InputsWrapper, ClearButton, ClearWrapper } from './style';
 import { CancelButton, Footer, OkayButton } from '../style';
-function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOnlyOneFilter, onClearFilterFields, wrapperSx } }) {
+function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOnlyOneFilter, onColumnFilterClearClick, wrapperSx } }) {
     const [values, setValues] = useState({});
     useEffect(() => {
         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 : '' })); }, {}));
@@ -21,7 +21,7 @@ function Inputs({ onCloseDropdown, filter: { options = [], onConfirm, data, isOn
         onCloseDropdown(e);
     };
     const onClickClear = () => {
-        onClearFilterFields === null || onClearFilterFields === void 0 ? void 0 : onClearFilterFields();
+        onColumnFilterClearClick === null || onColumnFilterClearClick === void 0 ? void 0 : onColumnFilterClearClick();
         setValues(options.reduce((acc, { apiKey }) => (Object.assign(Object.assign({}, acc), { [apiKey]: '' })), {}));
     };
     const isInputHasValue = (key) => values[key] !== undefined && values[key].length > 0;

package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
 import type { ListChildComponentProps } from 'react-window';
-export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow, isSheetView }: {
+import type { IColumnProps } from '../../../../types/index.js';
+export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow, isSheetView, columns, currentRowCount, }: {
     isLoadingRow: boolean;
     isSheetView?: boolean | undefined;
+    columns?: IColumnProps<any>[] | undefined;
+    currentRowCount?: number | undefined;
 }) => import("react/jsx-runtime").JSX.Element>;
 export declare const StyledItemWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     showShadowHighlight?: boolean | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
+declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
 export default ListItemWrapper;

package/build/components/VirtualTable/components/virtualScroll/ListItemWrapper.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
@@ -19,9 +19,13 @@ import { ActionIcon } from '../../style';
 import { RowErrorState } from '../RowErrorState';
 import { StyledParagraph } from '../TableLastItem';
 import TableRow from '../TableRow';
-export const LastRowContent = React.memo(({ isLoadingRow, isSheetView }) => {
+import SheetViewTableRowLoading from '../../SheetView/components/SheetViewTableRowLoading';
+export const LastRowContent = React.memo(({ isLoadingRow, isSheetView, columns, currentRowCount, }) => {
     const { t } = useTranslation();
     if (isLoadingRow) {
+        if (isSheetView && (columns === null || columns === void 0 ? void 0 : columns.length)) {
+            return (_jsx(_Fragment, { children: Array.from({ length: 3 }, (_, i) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: "wave", rowIndex: (currentRowCount || 0) + i + 1, useTableBackground: true }, `loading-row-${i}`))) }));
+        }
         return (_jsxs(Box, Object.assign({ "data-testid": "ListItemWrapper_lastRowContent_isLoadingRow", sx: {
                 height: isSheetView ? '100%' : '24px',
                 width: '24px',
@@ -48,20 +52,33 @@ export const StyledItemWrapper = styled('div', {
 }));
 function ListItemWrapper(_a) {
     var _b;
-    var { index, style } = _a, _c = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned = false } = _c, restData = __rest(_c, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "limit", "totalCount", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView", "isPinned"]);
+    var { index, style } = _a, _c = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned = false } = _c, restData = __rest(_c, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView", "isPinned"]);
     const lastItemIndex = rows.length - 1;
     const row = rows[index];
     const isLoadingRow = isLoading && index === lastItemIndex + 1;
     const isLoadedRow = index <= newLoadedRowsEndIndex;
     const rowClickHandler = React.useCallback(createRowClickHandler(row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick), [row, rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick]);
-    const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler, isLoadingRow, areAllRowsLoaded, lastItemIndex]);
+    const memoizedRowProps = React.useMemo(() => (Object.assign(Object.assign({ showShadowHighlight: scrollToIndex === index, showLoadedStyle: isLoadedRow }, rowProps), { onClick: rowClickHandler })), [scrollToIndex, index, isLoadedRow, rowProps, rowClickHandler]);
+    const renderSheetViewLoadingRow = React.useCallback((lastRowContent) => {
+        return (_jsx(Box, Object.assign({ sx: {
+                minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT,
+                height: '100%',
+                width: '100%',
+            } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })));
+    }, [isError]);
     const memoizedListItemComponent = React.useMemo(() => {
-        const lastRowContent = _jsx(LastRowContent, { isSheetView: isSheetView, isLoadingRow: isLoadingRow });
+        const lastRowContent = _jsx(LastRowContent, { isSheetView: isSheetView, isLoadingRow: isLoadingRow, columns: columns, currentRowCount: rows.length });
         const isLastRow = isLoadingRow || (areAllRowsLoaded && index === lastItemIndex + 1);
         if (isPinned && isLastRow) {
+            if (isSheetView && isLoadingRow && columns && columns.length > 0) {
+                return renderSheetViewLoadingRow(lastRowContent);
+            }
             return (_jsx(Box, { sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT, height: '100%' } : { height: TABLE_ROW_HEIGHT })), { backgroundColor: '#F6F8FACC' }) }));
         }
         if (isLastRow) {
+            if (isSheetView && isLoadingRow && columns && columns.length > 0) {
+                return renderSheetViewLoadingRow(lastRowContent);
+            }
             return (_jsx(Box, Object.assign({ sx: Object.assign(Object.assign({}, (isSheetView ? { minHeight: SHEET_VIEW_TABLE_ROW_HEIGHT, height: '100%' } : { height: TABLE_ROW_HEIGHT })), { display: 'flex', justifyContent: 'center', alignItems: 'center' }) }, { children: _jsx(Box, Object.assign({ sx: {
                         backgroundColor: '#F6F8FACC',
                         display: 'flex',
@@ -72,7 +89,21 @@ function ListItemWrapper(_a) {
                     } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })) })));
         }
         return (_jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView, selectedCell: restData.selectedCell, selectedColumn: restData.selectedColumn, onCellClick: restData.onCellClick, isLastRow: index === rows.length - 1 }, `row-${index}`));
-    }, [restData, index, row, columns, memoizedRowProps, isSheetView]);
+    }, [
+        restData,
+        index,
+        row,
+        columns,
+        memoizedRowProps,
+        isSheetView,
+        isLoadingRow,
+        isError,
+        areAllRowsLoaded,
+        lastItemIndex,
+        isPinned,
+        rows.length,
+        renderSheetViewLoadingRow,
+    ]);
     return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - ((_b = renderedScrollTopRef === null || renderedScrollTopRef === void 0 ? void 0 : renderedScrollTopRef.current) !== null && _b !== void 0 ? _b : 0), willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
 }
 export default ListItemWrapper;

package/build/components/index.d.ts

@@ -94,6 +94,5 @@ export * from './StatusGroupChips';
 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

@@ -94,6 +94,5 @@ export * from './StatusGroupChips';
 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/constants/assets.d.ts

@@ -133,8 +133,6 @@ export declare const receiptBillIcon: string;
 export declare const newReceiptIcon: string;
 export declare const acceptanceAppIcon: string;
 export declare const acceptanceEnabledIcon: string;
-export declare const acceptanceBlueIcon: string;
-export declare const payoutsGreenIcon: string;
 export declare const acceptanceAppDisabledIcon: string;
 export declare const payoutAppDisabledIcon: string;
 export declare const payoutEnabledIcon: string;

package/build/constants/assets.js

@@ -134,8 +134,6 @@ export const receiptBillIcon = `${appBaseUrl}/receiptBill.svg`;
 export const newReceiptIcon = `${lightUrl}/newReceiptIcon.svg`;
 export const acceptanceAppIcon = `${appBaseUrl}/acceptance.svg`;
 export const acceptanceEnabledIcon = `${lightUrl}/acceptanceEnabled.svg`;
-export const acceptanceBlueIcon = `${lightUrl}/acceptanceBlue.svg`;
-export const payoutsGreenIcon = `${lightUrl}/payoutsGreen.svg`;
 export const acceptanceAppDisabledIcon = `${appBaseUrl}/acceptanceAppIconDisabled.svg`;
 export const payoutAppDisabledIcon = `${appBaseUrl}/payoutsAppIconDisabled.svg`;
 export const payoutEnabledIcon = `${lightUrl}/payoutEnabled.svg`;

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

@@ -12,7 +12,7 @@ export declare const chargeTableCellWidth: {
     readonly id: {
         readonly default: "225px";
         readonly text: "225px";
-        readonly sheet: "215px";
+        readonly sheet: "235px";
     };
     readonly product: {
         readonly default: "85px";
@@ -37,7 +37,7 @@ export declare const chargeTableCellWidth: {
     readonly customer: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "115px";
+        readonly sheet: "145px";
     };
     readonly source: {
         readonly default: "114px";
@@ -62,7 +62,7 @@ export declare const chargeTableCellWidth: {
     readonly destinations: {
         readonly default: "70px";
         readonly text: "240px";
-        readonly sheet: "380px";
+        readonly sheet: "340px";
     };
     readonly topup: {
         readonly default: "20px";
@@ -97,17 +97,17 @@ export declare const chargeTableCellWidth: {
     readonly receipt: {
         readonly default: "85px";
         readonly text: "150px";
-        readonly sheet: "135px";
+        readonly sheet: "155px";
     };
     readonly fees: {
         readonly default: "150px";
         readonly text: "150px";
-        readonly sheet: "150px";
+        readonly sheet: "170px";
     };
     readonly metadata: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "245px";
+        readonly sheet: "265px";
     };
     readonly settlement: {
         readonly default: "200px";
@@ -137,12 +137,12 @@ export declare const chargeTableCellWidth: {
     readonly auth_code: {
         readonly default: "80px";
         readonly text: "80px";
-        readonly sheet: "80px";
+        readonly sheet: "100px";
     };
     readonly rrn: {
         readonly default: "100px";
         readonly text: "100px";
-        readonly sheet: "83px";
+        readonly sheet: "105px";
     };
     readonly device: {
         readonly default: "70px";
@@ -182,21 +182,21 @@ export declare const chargeTableCellWidth: {
     readonly acquirer_ref: {
         readonly default: "125px";
         readonly text: "125px";
-        readonly sheet: "125px";
+        readonly sheet: "145px";
     };
     readonly order_ref: {
         readonly default: "200px";
         readonly text: "200px";
-        readonly sheet: "200px";
+        readonly sheet: "220px";
     };
     readonly payment_ref: {
         readonly default: "150px";
         readonly text: "150px";
-        readonly sheet: "150px";
+        readonly sheet: "170px";
     };
     readonly generic_ref: {
         readonly default: "125px";
         readonly text: "125px";
-        readonly sheet: "125px";
+        readonly sheet: "145px";
     };
 };

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

@@ -12,7 +12,7 @@ export const chargeTableCellWidth = {
     id: {
         default: '225px',
         text: '225px',
-        sheet: '215px',
+        sheet: '235px',
     },
     product: {
         default: '85px',
@@ -37,7 +37,7 @@ export const chargeTableCellWidth = {
     customer: {
         default: '180px',
         text: '180px',
-        sheet: '115px',
+        sheet: '145px',
     },
     source: {
         default: '114px',
@@ -62,7 +62,7 @@ export const chargeTableCellWidth = {
     destinations: {
         default: '70px',
         text: '240px',
-        sheet: '380px',
+        sheet: '340px',
     },
     topup: {
         default: '20px',
@@ -97,17 +97,17 @@ export const chargeTableCellWidth = {
     receipt: {
         default: '85px',
         text: '150px',
-        sheet: '135px',
+        sheet: '155px',
     },
     fees: {
         default: '150px',
         text: '150px',
-        sheet: '150px',
+        sheet: '170px',
     },
     metadata: {
         default: '180px',
         text: '180px',
-        sheet: '245px',
+        sheet: '265px',
     },
     settlement: {
         default: '200px',
@@ -137,12 +137,12 @@ export const chargeTableCellWidth = {
     auth_code: {
         default: '80px',
         text: '80px',
-        sheet: '80px',
+        sheet: '100px',
     },
     rrn: {
         default: '100px',
         text: '100px',
-        sheet: '83px',
+        sheet: '105px',
     },
     device: {
         default: '70px',
@@ -182,21 +182,21 @@ export const chargeTableCellWidth = {
     acquirer_ref: {
         default: '125px',
         text: '125px',
-        sheet: '125px',
+        sheet: '145px',
     },
     order_ref: {
         default: '200px',
         text: '200px',
-        sheet: '200px',
+        sheet: '220px',
     },
     payment_ref: {
         default: '150px',
         text: '150px',
-        sheet: '150px',
+        sheet: '170px',
     },
     generic_ref: {
         default: '125px',
         text: '125px',
-        sheet: '125px',
+        sheet: '145px',
     },
 };

package/build/types/table.d.ts

@@ -136,7 +136,7 @@ export type ColumnFilterValues = Record<string, string | string[] | Record<strin
 export type IColumnFilter = ({
     onConfirm?: (filterValues: ColumnFilterValues) => void;
     onClear: (apiKeys: string[]) => void;
-    onClearFilterFields?: () => void;
+    onColumnFilterClearClick?: () => void;
     data?: ColumnFilterValues;
     isOnlyOneFilter?: boolean;
     wrapperSx?: SxProps;

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.299",
-  "testVersion": 9,
+  "version": "0.0.300",
+  "testVersion": 5,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",