@tap-payments/os-micro-frontend-shared 0.1.96-test.24 → 0.1.96-test.25

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

@@ -34,7 +34,7 @@ export const ChannelTextWrapper = styled('div')(() => ({
     justifyContent: 'center',
     paddingInline: '4px',
 }));
-export const salesChannelAnimation = (index, xDelta) => ({
+export const salesChannelAnimation = (index, xDelta, isLastChannel) => ({
     start: {
         x: index * 6,
         transition: {
@@ -43,12 +43,11 @@ export const salesChannelAnimation = (index, xDelta) => ({
             ease: 'easeIn',
         },
     },
-    animate: {
-        x: xDelta ? index * xDelta : index * 39,
-        transition: {
+    animate: Object.assign({ x: xDelta ? index * xDelta : index * 39, transition: {
             duration: 0.3,
             type: 'tween',
             ease: 'easeOut',
-        },
-    },
+        } }, (isLastChannel && {
+        boxShadow: '7px 0px 8px 0px #F2F2F2',
+    })),
 });

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

@@ -38,7 +38,9 @@ function SegmentsCell(_a) {
                     }, borderColor: "transparent" })) })) }), `${segment.name}-${index}`));
     }), [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: {
+    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 when state changes
+                animate: isTooltipOpen ? 'animate' : 'start', sourcesCount: referenceSourcesCount, variants: { animate: { width: referenceSourcesCount * (6 + 32) } }, style: {
                     zIndex: 29,
                 } }, { children: ReferenceSources }))) : null }) })));
 }

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

@@ -20,19 +20,24 @@ function SourceMergedCell(_a) {
     const iconsList = useMemo(() => icons.filter((icon) => Boolean(icon.icon)), [icons]);
     const [isHovering, setIsHovering] = useState(false);
     const centerIconIndex = Math.max(centerIconKey ? iconsList.findIndex((icon) => icon.key === centerIconKey) : 0, 0);
+    // Create refs for each icon to measure their actual widths
     const iconRefs = useRef([]);
     const [iconMeasurements, setIconMeasurements] = useState(new Map());
+    // For sheet mode, always show all icons inline
     const isSheetMode = tableMode === 'sheet';
+    // Measure icons after render and on table mode change
     useEffect(() => {
         if (isSheetMode)
-            return;
+            return; // Skip measurements for sheet mode as we don't need hover animations
         setTimeout(() => {
             const tableMode = isTextShown ? 'text' : 'default';
             const newMeasurements = new Map();
             iconRefs.current.forEach((ref, index) => {
                 if (ref) {
                     const width = ref.getBoundingClientRect().width;
+                    // Get existing measurements or create new
                     const existingMeasurement = iconMeasurements.get(index) || { default: 0, text: 0 };
+                    // Update only the current table mode's measurement
                     newMeasurements.set(index, Object.assign(Object.assign({}, existingMeasurement), { [tableMode]: width }));
                 }
             });
@@ -59,6 +64,7 @@ function SourceMergedCell(_a) {
                         if (!icon)
                             return;
                         const tableMode = isTextShown ? 'text' : 'default';
+                        // To keep x position of each icon while hovering consistent
                         const xHoverPosition = getIconXTranslation({
                             iconsList: iconsList.map((iconObj, i) => {
                                 const measurements = iconMeasurements.get(i);

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

@@ -28,6 +28,7 @@ function StatusCell(_a) {
         } }, { children: _jsx(StatusContainer, Object.assign({ initial: "initial", whileHover: "hover", animate: "start" }, { children: statusesList.map((status, index) => {
                 if (!status)
                     return;
+                // To keep x position of each icon while hovering consistent
                 const xHoverPosition = (index - centerIconIndex) * xGapValue;
                 const isIconAfterCenterIcon = index > centerIconIndex;
                 const isIconBeforeCenterIcon = index < centerIconIndex;

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

@@ -14,16 +14,16 @@ import Tooltip from '../../../Tooltip';
 import CountryFlag from '../../../CountryFlag';
 import { TableCell } from '../../../TableCells';
 import { walletIcon } from '../../../../constants/index.js';
-import { getCountryName } from '../../../../utils/index.js';
+import { getCountryNameByISO } from '../../../../utils/index.js';
 import { WalletCellContainer, WalletIcon, WalletIdContainer, WalletWrapper } from './style';
 import { GeographyBox, StatusIconWrapper } from '../style';
 function WalletCell(_a) {
     var { walletId, country, showCountry = true } = _a, props = __rest(_a, ["walletId", "country", "showCountry"]);
-    const icon = country && (_jsx(Tooltip, Object.assign({ title: getCountryName(country) }, { children: _jsx(CountryFlag, { code: country, sx: { padding: '1px' } }) })));
+    const icon = country && (_jsx(Tooltip, Object.assign({ title: getCountryNameByISO(country) }, { children: _jsx(CountryFlag, { code: country, sx: { padding: '1px' } }) })));
     return (_jsx(TableCell, Object.assign({ style: {
             textAlign: 'center',
             overflow: 'visible',
-        } }, props, { children: _jsxs(WalletCellContainer, { children: [showCountry && (_jsx(StatusIconWrapper, { children: _jsx(Tooltip, Object.assign({ title: country ? getCountryName(country) : '' }, { children: _jsx(GeographyBox, Object.assign({ sx: {
+        } }, props, { children: _jsxs(WalletCellContainer, { children: [showCountry && (_jsx(StatusIconWrapper, { children: _jsx(Tooltip, Object.assign({ title: country ? getCountryNameByISO(country) : '' }, { children: _jsx(GeographyBox, Object.assign({ sx: {
                                 visibility: 'visible',
                             }, variant: undefined }, { children: icon })) })) })), _jsxs(WalletWrapper, { children: [_jsx(WalletIcon, { src: walletIcon, alt: "wallet-icon" }), walletId && _jsxs(WalletIdContainer, { children: ["\u00B7\u00B7\u00B7\u00B7 ", walletId === null || walletId === void 0 ? void 0 : walletId.substring(((walletId === null || walletId === void 0 ? void 0 : walletId.length) || 0) - 4)] })] })] }) })));
 }

package/build/components/TableView/CustomViews.js

@@ -6,6 +6,7 @@ import { Reorder } from 'framer-motion';
 import Box from '@mui/material/Box';
 import Menu from '@mui/material/Menu';
 import { useTheme } from '@mui/material/styles';
+// import MenuItem from '@components/NestedDropdown/MenuItem'
 import { downArrowIcon } from '../../constants/index.js';
 import { ButtonStyled, ListStyled, DropdownStyled } from './style';
 import { NestedMenuItem as MenuItem } from '../NestedDropdown';
@@ -52,6 +53,7 @@ function CustomViews({ open, onSelect, setTableViews: setColumns, tableViews, an
                                         setColumns === null || setColumns === void 0 ? void 0 : setColumns(newMenuItems || []);
                                     }, onSelect: (selectedChild, parentName) => {
                                         handleUnSelectColumn(selectedChild[0]);
+                                        // modifySelectedColumns(selectedChild)
                                         const newMenuItems = columns === null || columns === void 0 ? void 0 : columns.map((menuItem) => {
                                             var _a;
                                             if (menuItem.name === parentName) {

package/build/components/TableView/TableView.js

@@ -29,6 +29,7 @@ function TableView({ onViewChange, setIsViewVisible, setTableViews, tableViews,
     const onClose = () => {
         setAnchorViewEl(null);
         setIsViewVisible(false);
+        // to be removed
         setSelectedViewInfo({ label: 'Default', id: 'default' });
     };
     const handleSelectedViewInfo = (selected) => {

package/build/components/Timepicker/Timepicker.js

@@ -25,6 +25,7 @@ export function TimePicker({ onChange, defaultTime, enableRealTimeChange }) {
     };
     const onClose = () => {
         setAnchorEl(null);
+        // Return the 12-hour format with period to match the Time type
         onChange === null || onChange === void 0 ? void 0 : onChange({ hour: hours, minute: minutes, period: period });
     };
     const onClickPeriod = (selectedPeriod) => {

package/build/components/Timepicker/utils.js

@@ -1,10 +1,12 @@
+// Convert 24-hour format to 12-hour format properly
 export const convertTo12Hour = (hour24) => {
     if (hour24 === 0)
-        return 12;
+        return 12; // Midnight (0) becomes 12 AM
     if (hour24 <= 12)
-        return hour24;
-    return hour24 - 12;
+        return hour24; // 1-12 stays the same
+    return hour24 - 12; // 13-23 becomes 1-11
 };
+// Get the period (AM/PM) from 24-hour format
 export const getPeriodFrom24Hour = (hour24) => {
     return hour24 >= 12 ? 'PM' : 'AM';
 };
@@ -13,12 +15,14 @@ export const getDefaultHour = () => {
     const currentHour = new Date().getHours();
     return convertTo12Hour(currentHour);
 };
+// Convert 12-hour format back to 24-hour format correctly
 export const convertTo24Hour = (hour12, period) => {
     if (period === 'AM' && hour12 === 12) {
-        return 0;
+        return 0; // 12 AM = 0 hours
     }
     else if (period === 'PM' && hour12 !== 12) {
-        return hour12 + 12;
+        return hour12 + 12; // 1-11 PM = 13-23 hours
     }
+    // 12 PM stays as 12 hours, 1-11 AM stays the same
     return hour12;
 };

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

@@ -1,3 +1,3 @@
 import ToggleView from './ToggleView';
+export { type ToggleViewsValues, ToggleViews } from './types';
 export default ToggleView;
-export * from './types';

package/build/components/ToggleView/index.js

@@ -1,3 +1,3 @@
 import ToggleView from './ToggleView';
+export { ToggleViews } from './types';
 export default ToggleView;
-export * from './types';

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

@@ -7,7 +7,9 @@ import { SheetViewVirtualTableWrapper } from './style';
 import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths } from './hooks';
 import { PinnedColumn, MainTable, LoadingMainTable, NoDataView, VirtualTable } from './components';
 function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, }) {
+    // Custom hooks for state management
     const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
+    // Table data processing
     const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView, lastItemIndex, areTotalRowsNotFillingHeight, itemsCount, isDelayedFetchingNextPage, } = useTableData({
         rows,
         isLoading,
@@ -15,9 +17,13 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         isFetchingNextPage,
         areAllRowsLoaded,
     });
+    // Column management
     const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
+    // Scroll synchronization
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
+    // Column width calculations
     const { pinnedStartColumnsWidth, pinnedEndColumnsWidth } = usePinnedColumnsWidths(pinnedStartColumnsData, pinnedEndColumnsData);
+    // Virtual table container logic
     const { getItemSize, getItemDataForContainer } = useVirtualTableContainer({
         rowHeight,
         areAllRowsLoaded,
@@ -84,6 +90,10 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
     };
     const commonPropsWithTableStates = Object.assign(Object.assign({}, baseCommonProps), { hasTimeoutError,
         tableLoading });
-    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, { children: showNoDataView ? (tableLoading ? (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(LoadingMainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) : (_jsx(NoDataView, Object.assign({ tableLoading: tableLoading, tableError: tableError, tableEmpty: tableEmpty, hasTimeoutError: hasTimeoutError, orderedColumns: orderedColumns, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }, baseCommonProps)))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(MainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, { children: showNoDataView ? (tableLoading ? (
+                // Show same table structure with pinned columns during loading, but with skeleton rows
+                _jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(LoadingMainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) : (
+                // Non-loading error states
+                _jsx(NoDataView, Object.assign({ tableLoading: tableLoading, tableError: tableError, tableEmpty: tableEmpty, hasTimeoutError: hasTimeoutError, orderedColumns: orderedColumns, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }, baseCommonProps)))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(MainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
 }
 export default memo(SheetViewVirtualTable);

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

@@ -28,11 +28,13 @@ function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, so
         setColumnFilterEl(cellRef.current);
     };
     const handleCellClick = (event) => {
+        // Only fire column click when clicking on the cell itself, not on child elements
         if (event.target === event.currentTarget) {
             onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, event, pinned);
         }
     };
     const handleHeaderInnerClick = (event) => {
+        // Prevent event bubbling to parent cell
         event.stopPropagation();
         onOpenFilterDropdown();
     };

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

@@ -16,6 +16,7 @@ const Wrapper = styled('section')(({ isLoaded = false, isPinned = false }) => ({
 }));
 function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount = 13, isPinned = false, }) {
     const [maxAllowedRows, setMaxAllowedRows] = useState(() => {
+        // Use provided rowsCount or calculate initial value
         return rowsCount || Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 15);
     });
     useEffect(() => {
@@ -23,6 +24,7 @@ function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoa
             setMaxAllowedRows(rowsCount);
             return;
         }
+        // Calculate rows that fit in the available container height
         const calculateRowsForContainer = () => {
             var _a;
             const wrapperElement = document.querySelector('[data-testid="SheetViewTableLoading"]');
@@ -30,13 +32,14 @@ function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoa
                 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 rowHeight = SHEET_VIEW_TABLE_ROW_HEIGHT; // Standard row height for SheetView
+            const headerHeight = 40; // Approximate header height
             const availableHeight = containerHeight - headerHeight;
             if (availableHeight <= 0) {
                 return Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 25);
             }
             const calculatedRows = Math.floor(availableHeight / rowHeight);
+            // Ensure we have at least 3 rows for loading state, but cap at a reasonable maximum
             return Math.max(3, Math.min(calculatedRows + 2, 25));
         };
         const rows = calculateRowsForContainer();

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

@@ -20,10 +20,14 @@ function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded,
             return;
         yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
     });
-    return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref }, { children: ({ height, width }) => {
+    return (
+    // @ts-ignore
+    _jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref }, { children: ({ height, width }) => {
                 const itemSize = (index) => getItemSize(index, height);
                 const itemData = getItemData(columnsData, isPinned, height);
-                return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemCount, itemSize: itemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: overscanCount, setBackdropVisibility: setBackdropVisibility, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: onScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
+                return (
+                // @ts-ignore
+                _jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemCount, itemSize: itemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: overscanCount, setBackdropVisibility: setBackdropVisibility, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: onScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
                         overflowX: isPinned ? 'hidden' : 'auto',
                         paddingBottom: isPinned ? '25px' : '13px',
                         backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',

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

@@ -9,6 +9,7 @@ export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
         if (!isPinnable)
             return [];
         const userPinned = columns.filter((c) => c.pinned === 'end').map((c) => c.id);
+        // Automatically pin the last column to the end if no end-pinned columns exist
         const visibleColumns = columns.filter((column) => !column.hidden);
         const lastColumn = visibleColumns[visibleColumns.length - 1];
         if (userPinned.length === 0 && lastColumn && !lastColumn.pinned && !lastColumn.isDefaultPinned) {
@@ -43,6 +44,7 @@ export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
         const start = shownColumns.filter((column) => pinnedStartColumns.includes(column.id));
         const end = shownColumns.filter((column) => pinnedEndColumns.includes(column.id));
         const unpinned = shownColumns.filter((column) => !pinnedStartColumns.includes(column.id) && !pinnedEndColumns.includes(column.id));
+        // Sort arrays by order and preserve original column properties including width
         const sortedStart = start.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); });
         const sortedEnd = end.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); });
         const sortedUnpinned = unpinned.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); });

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

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { useDelayToSetValue } from '../../../../hooks/index.js';
 import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../../utils/index.js';
+// Type guard to check if error is AxiosError
 const isAxiosError = (error) => {
     return error !== null && 'isAxiosError' in error && error.isAxiosError === true;
 };

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

@@ -21,6 +21,7 @@ export const useTableState = () => {
     }, [selectedChip, setSelectedChip, setSelectedCell, setSelectedRow]);
     const handleCellClick = useCallback((rowIndex, columnIndex, event, pinnedType) => {
         event.stopPropagation();
+        // If clicking on any cell in the pinned start section, select the entire row
         if (pinnedType === 'start' && columnIndex === 0) {
             setSelectedRow((prev) => (prev === rowIndex ? null : rowIndex));
             setSelectedCell(null);
@@ -28,6 +29,7 @@ export const useTableState = () => {
             setSelectedChip(null);
             return;
         }
+        // Otherwise, handle normal cell selection
         const cellKey = `${pinnedType !== null && pinnedType !== void 0 ? pinnedType : 'default'}-${rowIndex}-${columnIndex}`;
         setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
         setSelectedColumn(null);

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

@@ -27,10 +27,11 @@ export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, is
     const getItemSize = useCallback((index, height) => {
         const isLastRow = areAllRowsLoaded && index === rows.length;
         if (isLastRow) {
+            // Calculate remaining height: total height - (number of data rows * row height)
             const usedHeight = rows.length * rowHeight;
             const remainingHeight = height - usedHeight;
-            const minimumLastRowHeight = rowHeight * 2;
-            return Math.max(remainingHeight, minimumLastRowHeight);
+            const minimumLastRowHeight = rowHeight * 2; // Minimum height is 2x rowHeight
+            return Math.max(remainingHeight, minimumLastRowHeight); // Ensure minimum 2x row height
         }
         return rowHeight;
     }, [areAllRowsLoaded, rows.length, rowHeight]);

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

@@ -67,7 +67,7 @@ const PinnedColumnBase = styled('div')(({ theme }) => ({
     backgroundColor: theme.palette.primary.light,
     borderTop: '1px solid #F2F2F2',
     borderBottom: '1px solid #F2F2F2',
-    overflow: 'hidden',
+    overflow: 'hidden', // Ensure border radius is applied properly
 }));
 export const PinnedStartColumnWrapper = styled(PinnedColumnBase)({
     boxShadow: '4px 0px 24px 0px #00000014',

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

@@ -58,6 +58,7 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
     const itemData = createItemData(orderedColumns, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, isSheetView);
     const tableRowHeight = isSheetView ? SHEET_VIEW_TABLE_ROW_HEIGHT : TABLE_ROW_HEIGHT;
     const listRef = useRef(null);
+    // Reset row heights when isSheetView or tableRowHeight changes
     useEffect(() => {
         if (listRef.current && typeof listRef.current.resetAfterIndex === 'function') {
             listRef.current.resetAfterIndex(0, true);
@@ -68,11 +69,16 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
             setShowBackdrop(isVisible);
         };
         const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
+            // TODO: start index and stop index are not working as expected
+            // console.log('startIndex', startIndex, 'stopIndex', stopIndex,
+            // 'rows.length', rows.length)
             if (areAllRowsLoaded)
                 return;
             yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
         });
-        return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => tableRowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: isSheetView, listRef: listRef }, { children: ListItemWrapper }))) }), `${footerProps === null || footerProps === void 0 ? void 0 : footerProps.maximized}-${isMinimized}`)) })));
+        return (
+        // @ts-ignore
+        _jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => tableRowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN, isSheetView: isSheetView, listRef: listRef }, { children: ListItemWrapper }))) }), `${footerProps === null || footerProps === void 0 ? void 0 : footerProps.maximized}-${isMinimized}`)) })));
     }, [
         isMinimized,
         footerProps === null || footerProps === void 0 ? void 0 : footerProps.maximized,
@@ -91,6 +97,10 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
     return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [showHeader && (_jsx(TableHeader, { "data-testid": "VirtualTable_TableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, isSheetView: isSheetView })), showNoDataView ? (_jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })) : (_jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                                         width: '100%',
                                         minWidth: 'fit-content',
-                                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * tableRowHeight, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+                                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem
+                    // rows height + header height
+                    , { 
+                        // rows height + header height
+                        height: (itemsCount + 1) * tableRowHeight, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
 }
 export default memo(VirtualTable);

package/build/components/VirtualTables/VirtualTableWithCard/VirtualTableWithCard.js

@@ -57,11 +57,16 @@ function VirtualTableWithCard({ rows, threshold = TABLE_THRESHOLD, rowProps, foo
             setShowBackdrop(isVisible);
         };
         const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
+            // TODO: start index and stop index are not working as expected
+            // console.log('startIndex', startIndex, 'stopIndex', stopIndex,
+            // 'rows.length', rows.length)
             if (areAllRowsLoaded)
                 return;
             yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
         });
-        return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(Box, Object.assign({ sx: { height: `${tableHeight - (tableHeaderHeight !== null && tableHeaderHeight !== void 0 ? tableHeaderHeight : 0)}px` }, id: "auto-sizer-wrapper" }, { children: _jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height: h, width: w }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: h || 0, width: w || 0, itemCount: itemsCount, itemSize: () => rowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN }, { children: ListItemWrapperWithCard }))) })) }))) })));
+        return (
+        // @ts-ignore
+        _jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(Box, Object.assign({ sx: { height: `${tableHeight - (tableHeaderHeight !== null && tableHeaderHeight !== void 0 ? tableHeaderHeight : 0)}px` }, id: "auto-sizer-wrapper" }, { children: _jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height: h, width: w }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: h || 0, width: w || 0, itemCount: itemsCount, itemSize: () => rowHeight, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN }, { children: ListItemWrapperWithCard }))) })) }))) })));
     }, [
         error,
         isLoading,

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

@@ -8,6 +8,7 @@ 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 } }) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     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 : '' })); }, {}));

package/build/components/VirtualTables/components/TableFooter/TableFooter.js

@@ -17,6 +17,15 @@ import { StyledFooter, Label, Title, ValueWrapper, EngravingLine } from './style
 function TableFooter(_a) {
     var { totalCount, showBackDrop = false, showSeparator, sandboxMode, maximized, children } = _a, other = __rest(_a, ["totalCount", "showBackDrop", "showSeparator", "sandboxMode", "maximized", "children"]);
     const { t } = useTranslation();
+    // const min = 10000
+    // const max = 50000
+    // const average = 30000
+    // const sum = 100000
+    // const currency = 'SAR'
+    // const { integerAmount: minIntegerAmount, decimalAmount: minDecimalAmount } = formatAmount(min)
+    // const { integerAmount: maxIntegerAmount, decimalAmount: maxDecimalAmount } = formatAmount(max)
+    // const { integerAmount: averageIntegerAmount, decimalAmount: averageDecimalAmount } = formatAmount(average)
+    // const { integerAmount: sumIntegerAmount, decimalAmount: sumDecimalAmount } = formatAmount(sum)
     return (_jsxs(StyledFooter, Object.assign({ component: "footer", "data-testid": "TableFooter", maximized: maximized !== null && maximized !== void 0 ? maximized : false, sandboxMode: sandboxMode, showBackDrop: showBackDrop, areTotalRowsNotFillingHeight: !!showSeparator }, other, { children: [showSeparator && _jsx(EngravingLine, {}), totalCount || totalCount === 0 ? (_jsxs(Label, Object.assign({ sx: { gap: '6px', cursor: 'text' } }, { children: [_jsx(Title, { children: t('count') }), _jsx(ValueWrapper, { children: formatNumber(totalCount || 0) })] }))) : null, children] })));
 }
 export default React.memo(TableFooter);

package/build/components/VirtualTables/components/TableRow.js

@@ -38,14 +38,19 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
                 isRowSelected,
                 isLastRow,
             });
+            // Determine if this cell should be treated as first/last for border radius
             const isFirstColumn = column.id === columns[0].id;
             const isLastColumn = column.id === columns[columns.length - 1].id;
+            // For scrollable table, adjust first/last based on pinned tables
             let effectiveFirst = isFirstColumn;
             let effectiveLast = isLastColumn;
             if (!column.pinned) {
+                // If there are pinned start columns, scrollable table shouldn't have left border radius
                 effectiveFirst = isFirstColumn && column.pinned !== 'start';
+                // If there are pinned end columns, scrollable table shouldn't have right border radius
                 effectiveLast = isLastColumn && column.pinned !== 'end';
             }
+            // Handle border styling for row selection
             const rowSelectionBorderStyles = isRowSelected
                 ? getRowSelectionBorderStyles({
                     effectiveFirst,

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

@@ -39,6 +39,7 @@ export const LastRowContent = React.memo(({ isLoadingRow, isSheetView, columns,
     }
     return _jsx(StyledParagraph, Object.assign({ "data-testid": "ListItemWrapper_lastRowContent" }, { children: t('allRecordsHaveBeenSuccessfullyLoaded') }));
 });
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const createRowClickHandler = (row, onRowClick) => (e) => {
     var _a;
     (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
@@ -58,6 +59,7 @@ function ListItemWrapper(_a) {
     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]);
+    // Memoize the row props object
     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: {

package/build/components/VirtualTables/components/virtualScroll/ListItemWrapperWithCard.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import TableRowWithCard from '../TableRowWithCard';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const createRowClickHandler = (row, onRowClick) => (e) => {
     var _a;
     (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
@@ -19,6 +20,7 @@ function ListItemWrapperWithCard({ index, style, data: { renderedScrollTopRef, r
     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]);
+    // Memoize the row props object
     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 memoizedListItemComponent = React.useMemo(() => _jsx(TableRowWithCard, { index: index, row: row, renderCardComponent: renderCardComponent, rowProps: memoizedRowProps }, `row-${index}`), [index, row, memoizedRowProps]);
     return (_jsx("div", Object.assign({ "data-testid": "ListCardWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - renderedScrollTopRef.current, willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListCardWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));

package/build/components/VirtualTables/components/virtualScroll/VirtualScrollList.js

@@ -22,10 +22,21 @@ const VirtualScrollList = React.forwardRef((_a, ref) => {
         setBackdropVisibility,
         clearBackdropVisibilityTimeout,
     });
+    // renderedScrollTopRef - when render is started (listRef.current.scrollTo is called)
+    //   this ref holds scrollTop position which has been passed to scrollTo function
+    // scrollTopRef - this is scrollTop from last onScroll event.
+    //   onScroll can be fired when render is still in progress. So scrollTop will be just saved
+    //   When scroll will end, saved scrollTop will be used to start new render.
+    //   Subsequent onScroll will overwrite this number, as we will not render intermediate scroll states
+    // scrollLocked - is true, when render has been started.
+    //   This is used to now start several renders simulaneously
+    // listRef - VariableSizeList ref to call scrollTo method
     const renderedScrollTopRef = useRef(0);
     const scrollTopRef = useRef(undefined);
     const scrollLocked = useRef(false);
+    // Use external ref if provided, otherwise create local
     const internalListRef = useRef(null);
+    // If ref is provided, use it; else use externalListRef; else use internalListRef
     const listRef = ref || externalListRef || internalListRef;
     const scrollTo = useCallback(() => {
         var _a, _b;
@@ -59,6 +70,10 @@ const VirtualScrollList = React.forwardRef((_a, ref) => {
         onScroll === null || onScroll === void 0 ? void 0 : onScroll(props);
         scrollLocked.current = scrollTo();
     }, [scrollTo, onScroll]);
-    return (_jsx(VirtualScrollOuterProvider, Object.assign({ value: handleScroll }, { children: _jsx(VariableSizeList, Object.assign({ ref: listRef, "data-testid": "VirtualScrollList", itemData: itemDataInternal, outerElementType: VirtualScrollOuter, innerElementType: VirtualScrollInner }, restProps, { onScroll: handleOnScroll }, { children: children })) })));
+    return (_jsx(VirtualScrollOuterProvider, Object.assign({ value: handleScroll }, { children: _jsx(VariableSizeList, Object.assign({ ref: listRef, "data-testid": "VirtualScrollList", itemData: itemDataInternal, 
+            // @ts-ignore
+            outerElementType: VirtualScrollOuter, 
+            // @ts-ignore
+            innerElementType: VirtualScrollInner }, restProps, { onScroll: handleOnScroll }, { children: children })) })));
 });
 export default VirtualScrollList;

package/build/components/Widget/style.js

@@ -43,6 +43,7 @@ export const ItemText = styled(Text)(({ theme }) => ({
     fontSize: '11px',
     fontWeight: 500,
     lineHeight: '13.2px',
+    // width: 110
 }));
 export const ItemTextWrapper = styled(Box)(() => ({
     display: 'flex',

package/build/components/Window/style.js

@@ -19,6 +19,7 @@ export const contentStyle = {
     overflow: 'visible',
     borderRadius: '12px',
 };
+// eslint-disable-next-line
 export const initalStyle = {
     width: 'inherit',
     height: 'inherit',

package/build/components/index.d.ts

@@ -12,7 +12,8 @@ export { default as Checkbox } from './Checkbox';
 export { default as Dialog, DialogToolbar } from './Dialog';
 export { default as Tooltip } from './Tooltip';
 export * from './RFH';
-export { VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, TableFooter, TableError, } from './VirtualTables';
+export { VirtualTable, TableRowLoading, TableHeader as VirtualTableHeader, // To not to be confused/conflicted with the other seperated `components/TableHeader`
+TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, TableFooter, TableError, } from './VirtualTables';
 export { default as SheetViewVirtualTable } from './VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable';
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
@@ -108,10 +109,13 @@ export { default as LazyImage } from './LazyImage';
 export { default as AmountStatusChip, type AmountStatusChipProps } from './AmountStatusChip';
 export { default as AuthenticationTypeChip, type AuthenticationTypeChipProps } from './AuthenticationTypeChip';
 export * from './LazyImage';
-export { default as ListLayout } from './ListLayout';
-export * from './ListLayout';
-export { default as ToggleView } from './ToggleView';
-export * from './ToggleView';
+export { default as SearchListInput } from './SearchListInput';
+export { default as ErrorToast } from './ErrorToast';
+export { default as ToggleView, type ToggleViewsValues, ToggleViews } from './ToggleView';
+export { default as LanguageDropdown } from './LanguageDropdown';
+export { default as DisplayAmount } from './DisplayAmount';
+export { default as AmountInput } from './AmountInput';
 export { default as AppServicesBar } from './AppServicesBar';
 export * from './AppServicesBar';
-export { default as MFWidgetLoader } from './MFWidgetLoader';
+export { default as ListLayout } from './ListLayout';
+export * from './ListLayout';