@tap-payments/os-micro-frontend-shared 0.1.96 → 0.1.97-test.102

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,50 @@ 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]);
+    const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
+        switch (containerKey) {
+            case 'pinnedStart':
+                return createPinnedStartTable(columnsData, fixedWidth);
+            case 'pinnedEnd':
+                return createPinnedEndTable(columnsData, fixedWidth);
+            case 'scrollable':
+            default:
+                return createScrollableTable(columnsData);
+        }
+    }, [createPinnedStartTable, createPinnedEndTable, createScrollableTable]);
     const baseCommonProps = {
         showHeader,
         columnsSorting,

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } 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,31 @@ 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)) })) }))] })) })) })));
 }
-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';
@@ -9,12 +9,35 @@ function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList,
     const theme = useTheme();
     if (columnsData.length === 0)
         return null;
-    const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;
-    const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
+    const { Wrapper, containerKey } = useMemo(() => {
+        const key = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
+        return {
+            Wrapper: position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper,
+            containerKey: key,
+        };
+    }, [position]);
     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)) })) }))] })) }));
 }
-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/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/optimization/AnimationOptimizations.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export declare const useAnimationOptimization: (isAnimating: boolean) => ((callback: () => void) => void) | null;
+export declare const OptimizedAnimatedCell: import("react").MemoExoticComponent<({ children, isAnimating, ...props }: {
+    [key: string]: any;
+    children: React.ReactNode;
+    isAnimating: boolean;
+}) => 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, isAnimating } = _a, props = __rest(_a, ["children", "isAnimating"]);
+    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/constants/apps.d.ts

@@ -12,6 +12,20 @@ export declare const SERVICE_COMMON_FUNCTIONS: {
         code: string;
     };
 };
+export declare const BUSINESS_FUNCTIONS: {
+    updateEntity: {
+        code: string;
+    };
+    updateBrand: {
+        code: string;
+    };
+    updateUsers: {
+        code: string;
+    };
+    createUsers: {
+        code: string;
+    };
+};
 export declare const APP_CODES: {
     tokens: {
         code: string;
@@ -84,6 +98,18 @@ export declare const APP_CODES: {
             merchant: {
                 code: string;
                 functions: {
+                    updateEntity: {
+                        code: string;
+                    };
+                    updateBrand: {
+                        code: string;
+                    };
+                    updateUsers: {
+                        code: string;
+                    };
+                    createUsers: {
+                        code: string;
+                    };
                     view: {
                         code: string;
                     };
@@ -101,6 +127,18 @@ export declare const APP_CODES: {
             retailer: {
                 code: string;
                 functions: {
+                    updateEntity: {
+                        code: string;
+                    };
+                    updateBrand: {
+                        code: string;
+                    };
+                    updateUsers: {
+                        code: string;
+                    };
+                    createUsers: {
+                        code: string;
+                    };
                     view: {
                         code: string;
                     };

package/build/constants/apps.js

@@ -14,6 +14,20 @@ export const SERVICE_COMMON_FUNCTIONS = {
         code: 'REPORTS',
     },
 };
+export const BUSINESS_FUNCTIONS = {
+    updateEntity: {
+        code: 'UPDATE ENTITY',
+    },
+    updateBrand: {
+        code: 'UPDATE BRAND',
+    },
+    updateUsers: {
+        code: 'UPDATE USERS',
+    },
+    createUsers: {
+        code: 'CREATE USERS',
+    },
+};
 export const APP_CODES = {
     tokens: {
         code: 'TOKEN',
@@ -40,11 +54,11 @@ export const APP_CODES = {
         services: {
             merchant: {
                 code: 'MERCHANT',
-                functions: Object.assign({}, SERVICE_COMMON_FUNCTIONS),
+                functions: Object.assign(Object.assign({}, SERVICE_COMMON_FUNCTIONS), BUSINESS_FUNCTIONS),
             },
             retailer: {
                 code: 'RETAILER',
-                functions: Object.assign({}, SERVICE_COMMON_FUNCTIONS),
+                functions: Object.assign(Object.assign({}, SERVICE_COMMON_FUNCTIONS), BUSINESS_FUNCTIONS),
             },
         },
     },

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.96",
-  "testVersion": 0,
+  "version": "0.1.97-test.102",
+  "testVersion": 102,
   "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/"
   }
-}
+}