@tap-payments/os-micro-frontend-shared 0.1.101 → 0.1.103-test.107

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { StatusChipWithCopyProps } from '../StatusChipWithCopy';
+export interface AmountStatusChipProps extends StatusChipWithCopyProps {
+    amount?: string;
+    currency?: string;
+}
+declare function AmountStatusChip({ amount, currency, ...rest }: AmountStatusChipProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof AmountStatusChip>;
+export default _default;

package/build/components/AmountStatusChip/AmountStatusChip.js

@@ -0,0 +1,20 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import CurrencyIcon from '../CurrencyIcon';
+import { AmountLabel, CurrencyIconContainer, 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] })));
+}
+export default memo(AmountStatusChip);

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

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

package/build/components/AmountStatusChip/index.js

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

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

@@ -0,0 +1,4 @@
+/// <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

@@ -0,0 +1,27 @@
+import { styled } from '@mui/material/styles';
+import StatusChipWithCopy from '../StatusChipWithCopy';
+export const StyledAmountStatusChip = styled(StatusChipWithCopy)(() => ({
+    backgroundColor: '#EFF1F2',
+    border: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'none !important',
+    animation: 'none !important',
+    transform: 'none !important',
+    '& *': {
+        transition: 'none !important',
+        animation: 'none !important',
+        transform: 'none !important',
+    },
+}));
+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/ColorPicker/ColorPicker.d.ts

@@ -5,6 +5,9 @@ type ColorPickerProps = {
     onChange: (value: string) => void;
     onReset?: () => void;
     sx?: SxProps;
+    options?: {
+        hideReset?: boolean;
+    };
 };
-declare const ColorPicker: ({ id, value, onChange, onReset, sx }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ColorPicker: ({ id, value, onChange, onReset, sx, options }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default ColorPicker;

package/build/components/ColorPicker/ColorPicker.js

@@ -13,7 +13,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from 'react';
 import { RgbaColorPicker } from 'react-colorful';
 import { useTranslation } from 'react-i18next';
-import Color from 'color';
 import Box from '@mui/material/Box';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Divider from '@mui/material/Divider';
@@ -22,16 +21,8 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { CancelButton, ConfirmButton, Footer, StyledCloseButtonWrapper, StyledColorWidgetWrapper } from './style';
 import { closeXIcon } from '../../constants/index.js';
-const hexa2Rgba = (value) => {
-    const colorInstance = Color(value).rgb();
-    const { r, g, b, alpha = 1 } = colorInstance.object();
-    return {
-        value: { r, g, b, alpha },
-        stringified: `rgba(${r},${g},${b},${alpha})`,
-    };
-};
-const rgba2Hexa = (value) => Color(value).hexa();
-const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx }) => {
+import { hexa2Rgba, rgba2Hexa } from '../../utils/index.js';
+const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx, options }) => {
     const { t } = useTranslation();
     const [anchorEl, setAnchorEl] = useState(null);
     const rootRef = useRef(null);
@@ -54,6 +45,6 @@ const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx }) => {
         onChange(rgba2Hexa(Object.assign(Object.assign({}, rest), { alpha })));
         setAnchorEl(null);
     }, [onChange, color]);
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => setAnchorEl(null) }, { children: _jsxs(Stack, Object.assign({ ref: rootRef, bgcolor: "grey.400", borderRadius: "4px", p: "4px", pr: "12px", direction: "row", justifyContent: "space-between", spacing: 1, alignItems: "center", className: "color-picker" }, { children: [_jsxs(Stack, Object.assign({ sx: sx, direction: "row", spacing: 1, alignItems: "center", className: "color-picker__controls-wrapper" }, { children: [_jsx(Box, { borderRadius: "5px", width: 32, height: 32, sx: { backgroundColor: value }, className: "color-picker__viewer" }), _jsxs(Box, Object.assign({ className: "color-picker__actions-wrapper" }, { children: [_jsx(Typography, Object.assign({ className: "color-picker__label", fontWeight: 500, fontSize: 9, color: "text.primary", textTransform: "uppercase" }, { children: value })), _jsx(Typography, Object.assign({ className: "color-picker__edit-btn", role: "button", onClick: handleOpen, htmlFor: id, fontWeight: 500, fontSize: 9, color: "info.dark", component: "label", sx: { textDecoration: 'underline', cursor: 'pointer' } }, { children: "Edit" }))] }))] })), _jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", onClick: onReset }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) })), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "top" }, { children: _jsxs(StyledColorWidgetWrapper, Object.assign({ className: "color-picker__widget" }, { children: [_jsx(RgbaColorPicker, { color: color, onChange: setColor }), _jsx(Divider, { sx: { my: '12px' } }), _jsxs(Footer, Object.assign({ className: "color-picker__widget-actions" }, { children: [_jsx(CancelButton, Object.assign({ className: "color-picker__widget-actions__cancel", onClick: handleCancel }, { children: t('cancel') })), _jsx(ConfirmButton, Object.assign({ className: "color-picker__widget-actions__confirm", onClick: handleConfirm }, { children: t('okay') }))] }))] })) }))] })) })));
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => setAnchorEl(null) }, { children: _jsxs(Stack, Object.assign({ ref: rootRef, bgcolor: "grey.400", borderRadius: "4px", p: "4px", pr: "12px", direction: "row", justifyContent: "space-between", spacing: 1, alignItems: "center", className: "color-picker", sx: sx }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", className: "color-picker__controls-wrapper" }, { children: [_jsx(Box, { borderRadius: "5px", width: 32, height: 32, sx: { backgroundColor: value }, className: "color-picker__viewer" }), _jsxs(Box, Object.assign({ className: "color-picker__actions-wrapper" }, { children: [_jsx(Typography, Object.assign({ className: "color-picker__label", fontWeight: 500, fontSize: 9, color: "text.primary", textTransform: "uppercase" }, { children: value })), _jsx(Typography, Object.assign({ className: "color-picker__edit-btn", role: "button", onClick: handleOpen, htmlFor: id, fontWeight: 500, fontSize: 9, color: "info.dark", component: "label", sx: { textDecoration: 'underline', cursor: 'pointer' } }, { children: "Edit" }))] }))] })), !(options === null || options === void 0 ? void 0 : options.hideReset) ? (_jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", onClick: onReset }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) }))) : (_jsx("div", {})), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "top" }, { children: _jsxs(StyledColorWidgetWrapper, Object.assign({ className: "color-picker__widget" }, { children: [_jsx(RgbaColorPicker, { color: color, onChange: setColor }), _jsx(Divider, { sx: { my: '12px' } }), _jsxs(Footer, Object.assign({ className: "color-picker__widget-actions" }, { children: [_jsx(CancelButton, Object.assign({ className: "color-picker__widget-actions__cancel", onClick: handleCancel }, { children: t('cancel') })), _jsx(ConfirmButton, Object.assign({ className: "color-picker__widget-actions__confirm", onClick: handleConfirm }, { children: t('okay') }))] }))] })) }))] })) })));
 };
 export default ColorPicker;

package/build/components/StatusChip/StatusChip.d.ts

@@ -1,3 +1,3 @@
 import { ChipProps } from './type';
-declare const StatusChip: ({ children, unknownText, copyText, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatusChip: ({ children, unknownText, copyText, expandDirection, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
 export default StatusChip;

package/build/components/StatusChip/StatusChip.js

@@ -18,7 +18,7 @@ import { copyIcon, greenCheckIcon } from '../../constants/index.js';
 import { unknownGeographyColors } from './constants';
 import { ChipStyled, Wrapper, CopyWrapper } from './style';
 const StatusChip = (_a) => {
-    var { children, unknownText, copyText } = _a, props = __rest(_a, ["children", "unknownText", "copyText"]);
+    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;
@@ -38,12 +38,15 @@ const StatusChip = (_a) => {
             };
         }
     };
-    return (_jsxs(motion.div, Object.assign({ style: { position: 'relative' }, animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected, style: { position: 'absolute', top: 0, left: 0, zIndex: isSelected ? 3 : 0 } }, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
-                        paddingRight: isSelected && copyText ? 12 : 0,
-                    }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isSelected && copyText && (_jsx(CopyWrapper, { children: _jsx(motion.img, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { delay: isSelected ? 0.2 : 0, duration: 0.1 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : copyIcon, style: {
-                                        height: 12,
-                                        width: 12,
-                                        objectFit: 'contain',
-                                    } }) })) })] })) }))] })));
+    const isCopyActive = isSelected && copyText;
+    return (_jsxs(motion.div, Object.assign({ style: { position: 'relative' }, animate: { zIndex: isSelected ? 3 : 0 } }, { children: [_jsx(ChipStyled, Object.assign({}, props, { sx: { visibility: 'hidden', pointerEvents: 'none' } }, { children: _jsx(Wrapper, { children: children }) })), _jsx(motion.div, Object.assign({ style: { position: 'absolute', top: 0, zIndex: isSelected ? 3 : 0 }, animate: {
+                    left: isCopyActive && expandDirection === 'left' ? -12 : 0,
+                }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: _jsx(ChipStyled, Object.assign({}, props, { isSelected: isSelected }, { children: _jsxs(motion.div, Object.assign({ layout: "size", style: { display: 'flex', gap: '4px' }, animate: {
+                            paddingRight: isCopyActive ? 12 : 0,
+                        }, transition: { delay: isSelected ? 0 : 0.2, duration: 0.2 } }, { children: [_jsx(Wrapper, { children: children }), _jsx(AnimatePresence, { children: isCopyActive && (_jsx(CopyWrapper, { children: _jsx(motion.img, { initial: { opacity: 0, x: -5 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -2 }, transition: { delay: 0.2, duration: 0.1 }, onClick: handleCopy, src: showCopy ? greenCheckIcon : copyIcon, style: {
+                                            height: 12,
+                                            width: 12,
+                                            objectFit: 'contain',
+                                        } }) })) })] })) })) }))] })));
 };
 export default StatusChip;

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

@@ -11,6 +11,7 @@ export declare const ChipStyled: import("@emotion/styled").StyledComponent<impor
     maxWidth?: string | undefined;
     isSelected?: boolean | undefined;
     copyText?: string | undefined;
+    expandDirection?: "left" | "right" | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & 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/material/OverridableComponent").CommonProps | keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & {

package/build/components/StatusChip/type.d.ts

@@ -10,4 +10,5 @@ export type ChipProps = PropsWithChildren<{
     maxWidth?: string;
     isSelected?: boolean;
     copyText?: string;
+    expandDirection?: 'left' | 'right';
 } & BoxProps>;

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 } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { SHEET_VIEW_TABLE_THRESHOLD } from '../../../constants/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import { SheetViewTableContainer } from '../components/style';
@@ -37,30 +37,51 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
     const onPointerDown = (e) => {
         dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
-    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 }));
-    }, [
+    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,
+    }), [
         itemsCount,
         lastItemIndex,
         areAllRowsLoaded,
         loadMoreItems,
         threshold,
-        getItemSize,
-        getItemDataForContainer,
-        scrollToIndex,
         areTotalRowsNotFillingHeight,
         clearBackdropVisibilityTimeout,
-        handleScroll,
-        setShowBackdrop,
-        pinnedStartVirtualListRef,
-        pinnedEndVirtualListRef,
-        scrollableVirtualListRef,
+        overscanCount,
     ]);
+    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 = useCallback((columnsData) => (_jsx(VirtualTable, Object.assign({ columnsData: columnsData }, stableTableProps, dynamicTableProps, { isPinned: false, onScroll: scrollHandlers.scrollable, listRef: scrollableVirtualListRef }), "scrollable")), [stableTableProps, dynamicTableProps, scrollHandlers.scrollable, scrollableVirtualListRef]);
+    console.log({ selectedCell, selectedColumn, selectedRow, selectedChip });
+    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/LoadingMainTable.js

@@ -12,8 +12,10 @@ function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, s
                             minWidth: 'fit-content',
                         } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
                                 height: '100%',
+                                maxHeight: '100%',
                                 display: 'flex',
                                 flexDirection: 'column',
+                                overflow: 'hidden',
                             } }, { children: _jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false }) })) }))] })) })) })));
 }
 export default memo(LoadingMainTable);

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 } from 'react';
+import { memo, useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style';
 import { MainTableWrapper, UnpinnedTableHeaderWrapper } from '../style';
@@ -7,9 +7,35 @@ 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();
-    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: {
+    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: {
                             width: '100%',
                             minWidth: 'fit-content',
-                        } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false })) : (createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false)) })) }))] })) })) })));
+                        } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper", sx: {
+                                height: '100%',
+                                maxHeight: '100%',
+                                overflow: 'hidden',
+                            } }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false })) : (createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false)) })) }))] })) })) })));
 }
-export default memo(MainTable);
+export default memo(MainTable, (prevProps, nextProps) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const criticalProps = [
+        'hasPinnedStart',
+        'hasPinnedEnd',
+        'showHeader',
+        'showBackDrop',
+        'tableLoading',
+        'showNoDataView',
+        'isLoading',
+        'isError',
+        'hasTimeoutError',
+        'tableMode',
+    ];
+    const areCriticalPropsSame = criticalProps.every((prop) => prevProps[prop] === nextProps[prop]);
+    const areColumnsDataSame = ((_a = prevProps.unpinnedColumnsData) === null || _a === void 0 ? void 0 : _a.length) === ((_b = nextProps.unpinnedColumnsData) === null || _b === void 0 ? void 0 : _b.length) &&
+        ((_c = prevProps.unpinnedColumnsData) === null || _c === void 0 ? void 0 : _c.every((col, index) => { var _a, _b; return col.id === ((_b = (_a = nextProps.unpinnedColumnsData) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.id); }));
+    const arePinnedColumnsSame = ((_d = prevProps.pinnedStartColumns) === null || _d === void 0 ? void 0 : _d.length) === ((_e = nextProps.pinnedStartColumns) === null || _e === void 0 ? void 0 : _e.length) &&
+        ((_f = prevProps.pinnedEndColumns) === null || _f === void 0 ? void 0 : _f.length) === ((_g = nextProps.pinnedEndColumns) === null || _g === void 0 ? void 0 : _g.length);
+    return areCriticalPropsSame && areColumnsDataSame && arePinnedColumnsSame;
+});

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 } from 'react';
+import { memo, useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style';
 import { PinnedStartColumnWrapper, PinnedEndColumnWrapper } from '../style';
@@ -7,14 +7,41 @@ 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',
                         overflowX: 'hidden',
-                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": `SheetViewVirtualTable_PinnedTableLoading_${position}`, columns: columnsData, isLoading: true, isPinned: true })) : (createVirtualTableContainer(columnsData, containerKey, true, columnsWidth)) })) }))] })) }));
+                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper", sx: {
+                            height: '100%',
+                            maxHeight: '100%',
+                            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);
+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;
+});

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

@@ -1,19 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import uniqueId from 'lodash/uniqueId';
 import { calculateMaxAllowedRows } from '../../../../utils/index.js';
 import SheetViewTableRowLoading from './SheetViewTableRowLoading';
+import { SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
 const Wrapper = styled('section')(({ isLoaded = false, isPinned = false }) => ({
     overflow: 'hidden',
     paddingInline: isLoaded && !isPinned ? '32px' : '0px',
     backgroundColor: isLoaded && !isPinned ? 'rgba(255, 255, 255, 0.60)' : 'none',
     filter: isLoaded && !isPinned ? 'blur(8px)' : 'none',
     marginTop: isLoaded && !isPinned ? '1rem' : '0',
+    height: '100%',
+    maxHeight: '100%',
 }));
 function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount, isPinned = false, }) {
-    let maxAllowedRows = rowsCount || calculateMaxAllowedRows(isLoaded, isLoading);
-    maxAllowedRows = rowsCount || Math.max(maxAllowedRows, 25);
+    const [maxAllowedRows, setMaxAllowedRows] = useState(() => {
+        return rowsCount || Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 15);
+    });
+    useEffect(() => {
+        if (rowsCount) {
+            setMaxAllowedRows(rowsCount);
+            return;
+        }
+        const calculateRowsForContainer = () => {
+            var _a;
+            const wrapperElement = document.querySelector('[data-testid="SheetViewTableLoading"]');
+            if (!wrapperElement) {
+                return Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 25);
+            }
+            const containerHeight = ((_a = wrapperElement.parentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
+            const rowHeight = SHEET_VIEW_TABLE_ROW_HEIGHT;
+            const headerHeight = 40;
+            const availableHeight = containerHeight - headerHeight;
+            if (availableHeight <= 0) {
+                return Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 25);
+            }
+            const calculatedRows = Math.floor(availableHeight / rowHeight);
+            return Math.max(3, Math.min(calculatedRows + 2, 25));
+        };
+        const rows = calculateRowsForContainer();
+        setMaxAllowedRows(rows);
+        const handleResize = () => {
+            const calculatedRows = calculateRowsForContainer();
+            setMaxAllowedRows(calculatedRows);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [isLoaded, isLoading, rowsCount]);
     return (_jsx(Wrapper, Object.assign({ isLoaded: isLoaded, isPinned: isPinned, "data-testid": "SheetViewTableLoading" }, { children: [...Array(maxAllowedRows)].map((_, index) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: animationType, rowIndex: index, useTableBackground: !isPinned }, `i-${uniqueId('SheetViewTableLoadingRow_')}`))) })));
 }
 export default memo(SheetViewTableLoading);

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

@@ -30,4 +30,21 @@ function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded,
                     } }, { children: ListItemWrapper })));
             } }))) })));
 }
-export default memo(VirtualTable);
+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;
+});

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

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } 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);
     }, []);
-    return {
+    const tableStateAPI = useMemo(() => ({
         selectedCell,
         selectedColumn,
         selectedRow,
@@ -59,5 +59,17 @@ 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 } from 'react';
+import { useCallback, useMemo, useRef } 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,16 +24,20 @@ 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 === rows.length;
+        const isLastRow = areAllRowsLoaded && index === stableRowsLength.current;
         if (isLastRow) {
-            const usedHeight = rows.length * rowHeight;
+            const usedHeight = stableRowsLength.current * rowHeight;
             const remainingHeight = height - usedHeight;
             const minimumLastRowHeight = rowHeight * 2;
             return Math.max(remainingHeight, minimumLastRowHeight);
         }
         return rowHeight;
-    }, [areAllRowsLoaded, rows.length, rowHeight]);
+    }, [areAllRowsLoaded, rowHeight]);
     const commonItemDataParams = useMemo(() => {
         var _a;
         return [

package/build/components/VirtualTables/components/style.js

@@ -146,7 +146,7 @@ export const SheetViewTableContainer = styled(Box)(() => ({
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    height: 'calc(100vh - 300px)',
+    height: '100%',
     paddingInline: '28px',
     borderRadius: '8px',
     marginBottom: '16px !important',

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

@@ -0,0 +1,25 @@
+/// <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

@@ -0,0 +1,86 @@
+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;
+};

package/build/components/index.d.ts

@@ -105,4 +105,5 @@ export * from './LeftPeekRightExpandingChip';
 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 * from './LazyImage';

package/build/components/index.js

@@ -105,4 +105,5 @@ export * from './LeftPeekRightExpandingChip';
 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 * from './LazyImage';

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

@@ -57,12 +57,12 @@ export declare const authorizationTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "150px";
-        readonly sheet: "170px";
+        readonly sheet: "230px";
     };
     readonly amount: {
         readonly default: "170px";
         readonly text: "195px";
-        readonly sheet: "195px";
+        readonly sheet: "150px";
     };
     readonly destinations: {
         readonly default: "70px";

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

@@ -57,12 +57,12 @@ export const authorizationTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '150px',
-        sheet: '170px',
+        sheet: '230px',
     },
     amount: {
         default: '170px',
         text: '195px',
-        sheet: '195px',
+        sheet: '150px',
     },
     destinations: {
         default: '70px',

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

@@ -52,7 +52,7 @@ export declare const chargeTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "150px";
-        readonly sheet: "165px";
+        readonly sheet: "230px";
     };
     readonly payment_initiated: {
         readonly default: "150px";
@@ -222,7 +222,7 @@ export declare const chargeTableCellWidth: {
     readonly consolidated_amount: {
         readonly default: "180px";
         readonly text: "180px";
-        readonly sheet: "180px";
+        readonly sheet: "150px";
     };
     readonly customer_amount: {
         readonly default: "150px";

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

@@ -52,7 +52,7 @@ export const chargeTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '150px',
-        sheet: '165px',
+        sheet: '230px',
     },
     payment_initiated: {
         default: '150px',
@@ -222,7 +222,7 @@ export const chargeTableCellWidth = {
     consolidated_amount: {
         default: '180px',
         text: '180px',
-        sheet: '180px',
+        sheet: '150px',
     },
     customer_amount: {
         default: '150px',

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

@@ -62,12 +62,12 @@ export declare const destinationsTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "250px";
-        readonly sheet: "165px";
+        readonly sheet: "230px";
     };
     readonly amount: {
         readonly default: "195px";
         readonly text: "195px";
-        readonly sheet: "195px";
+        readonly sheet: "150px";
     };
     readonly status: {
         readonly default: "50px";

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

@@ -62,12 +62,12 @@ export const destinationsTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '250px',
-        sheet: '165px',
+        sheet: '230px',
     },
     amount: {
         default: '195px',
         text: '195px',
-        sheet: '195px',
+        sheet: '150px',
     },
     status: {
         default: '50px',

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

@@ -47,7 +47,7 @@ export declare const refundTableCellWidth: {
     readonly payment_agreement: {
         readonly default: "50px";
         readonly text: "200px";
-        readonly sheet: "165px";
+        readonly sheet: "230px";
     };
     readonly payment_initiated: {
         readonly default: "150px";
@@ -92,7 +92,7 @@ export declare const refundTableCellWidth: {
     readonly amount: {
         readonly default: "195px";
         readonly text: "195px";
-        readonly sheet: "180px";
+        readonly sheet: "150px";
     };
     readonly payouts: {
         readonly default: "195px";

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

@@ -47,7 +47,7 @@ export const refundTableCellWidth = {
     payment_agreement: {
         default: '50px',
         text: '200px',
-        sheet: '165px',
+        sheet: '230px',
     },
     payment_initiated: {
         default: '150px',
@@ -92,7 +92,7 @@ export const refundTableCellWidth = {
     amount: {
         default: '195px',
         text: '195px',
-        sheet: '180px',
+        sheet: '150px',
     },
     payouts: {
         default: '195px',

package/build/utils/color.d.ts

@@ -1,2 +1,13 @@
+import { ColorObject } from 'color';
 export declare function getRandomColor(): string;
 export declare function getRandomGradientColor(): string;
+export declare const hexa2Rgba: (value: string) => {
+    value: {
+        r: number;
+        g: number;
+        b: number;
+        alpha: number;
+    };
+    stringified: string;
+};
+export declare const rgba2Hexa: (value: ColorObject) => string;

package/build/utils/color.js

@@ -1,3 +1,4 @@
+import Color from 'color';
 export function getRandomColor() {
     const colors = [
         '#D6D6D6',
@@ -36,3 +37,12 @@ export function getRandomGradientColor() {
     ];
     return colors[Math.trunc(Math.random() * colors.length)];
 }
+export const hexa2Rgba = (value) => {
+    const colorInstance = Color(value).rgb();
+    const { r, g, b, alpha = 1 } = colorInstance.object();
+    return {
+        value: { r, g, b, alpha },
+        stringified: `rgba(${r},${g},${b},${alpha})`,
+    };
+};
+export const rgba2Hexa = (value) => Color(value).hexa();

package/build/utils/style.js

@@ -31,10 +31,6 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
 const getRowSelectionStyles = () => ({
     backgroundColor: SELECTION_COLORS.background,
     color: SELECTION_COLORS.primary,
-    border: 'none',
-    '&:before': {
-        border: 'none',
-    },
 });
 const getSingleCellSelectionStyles = () => ({
     border: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,

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.101",
-  "testVersion": 4,
+  "version": "0.1.103-test.107",
+  "testVersion": 107,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -118,15 +118,19 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.6",
     "prettier": "^2.8.8",
     "tsc-alias": "^1.8.16",
     "typescript": "5.0.2",
     "typescript-eslint": "^8.18.2",
-    "vite": "6.0.5",
+    "vite": "^7.1.4",
     "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",
@@ -136,4 +140,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}