@tap-payments/os-micro-frontend-shared 0.1.9 → 0.1.10-test.1-test.8-test.9-test.10

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

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

@@ -17,7 +17,6 @@ import { TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN } from '../../../constants/index.
 import { useDelayToSetValue } from '../../../hooks/index.js';
 import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../../utils/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
-import TableNoData from '../components/TableNoData';
 import { SheetViewTableNoData } from './components';
 import ListItemWrapper from '../components/virtualScroll/ListItemWrapper';
 import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from '../components/style';
@@ -25,7 +24,7 @@ import { SheetViewVirtualTableWrapper, PinnedStartColumnWrapper, PinnedEndColumn
 import SheetViewTableHeader from './components/SheetViewTableHeader';
 import { usePinnedColumns } from './hooks/usePinnedColumns';
 import { useSynchronizedScroll } from './hooks/useSynchronizedScroll';
-const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, containerHeight, rowHeight) => ({
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, onCellClick, containerHeight, rowHeight, tablePosition, hasPinnedStart, hasPinnedEnd, isLoadMoreLoading = false) => ({
     columns,
     isLoading,
     rows,
@@ -44,6 +43,10 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     onCellClick,
     containerHeight,
     rowHeight,
+    tablePosition,
+    hasPinnedStart,
+    hasPinnedEnd,
+    isLoadMoreLoading,
 }));
 function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, }) {
     const theme = useTheme();
@@ -103,7 +106,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
                         return rowHeight;
                     };
                     const commonItemDataParams = [
-                        isDelayedFetchingNextPage,
+                        isLoading,
                         rows,
                         rowProps,
                         scrollToIndex,
@@ -113,12 +116,11 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
                         areAllRowsLoaded,
                     ];
                     const commonItemDataSuffix = [selectedCell, selectedColumn, handleCellClick, height, rowHeight];
-                    const getItemDataForContainer = (columnsData, isPinnedColumn) => createItemData(columnsData, ...commonItemDataParams, isPinnedColumn, ...commonItemDataSuffix);
+                    const getItemDataForContainer = (columnsData, isPinnedColumn, tablePos) => createItemData(columnsData, ...commonItemDataParams, isPinnedColumn, ...commonItemDataSuffix, tablePos, pinnedStartColumnsData.length > 0, pinnedEndColumnsData.length > 0, isFetchingNextPage);
                     const currentItemData = containerKey === 'pinnedStart'
-                        ? getItemDataForContainer(pinnedStartColumnsData, true)
-                        : containerKey === 'pinnedEnd'
-                            ? getItemDataForContainer(pinnedEndColumnsData, true)
-                            : getItemDataForContainer(unpinnedColumnsData, false);
+                        ? Object.assign(Object.assign({}, getItemDataForContainer(pinnedStartColumnsData, true, 'pinnedStart')), { isFetchingNextPage: isFetchingNextPage }) : containerKey === 'pinnedEnd'
+                        ? Object.assign(Object.assign({}, getItemDataForContainer(pinnedEndColumnsData, true, 'pinnedEnd')), { isFetchingNextPage: isFetchingNextPage }) : Object.assign(Object.assign({}, getItemDataForContainer(unpinnedColumnsData, false, 'scrollable')), { isFetchingNextPage: isFetchingNextPage });
+                    console.log({ currentItemData });
                     return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: tableItemsCount, itemSize: getItemSize, itemData: currentItemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, setBackdropVisibility: setShowBackdrop, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: handleScrollCallback, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
                             overflowX: isPinned ? 'hidden' : 'auto',
                             paddingBottom: isPinned ? '25px' : '13px',
@@ -150,9 +152,10 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         pinnedEndVirtualListRef,
         pinnedStartVirtualListRef,
         scrollableVirtualListRef,
-        theme.palette.background.default,
+        isFetchingNextPage,
+        tableLoading,
     ]);
-    const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
+    const showNoDataView = tableEmpty || hasTimeoutError;
     const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {
         const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
         return acc + width;
@@ -166,27 +169,13 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
         if (columnsData.length === 0)
             return null;
-        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: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+        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: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, tablePosition: position === 'start' ? 'pinnedStart' : 'pinnedEnd', hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 })), _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: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TableContainer, { children: showNoDataView ? (tableLoading ? (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox_Loading", "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, sx: {
-                        marginLeft: '28px',
-                        maxHeight: 'calc(100vh - 300px)',
-                        overflow: 'auto',
-                    } }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: 'auto' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
-                                    width: '100%',
-                                    minWidth: 'fit-content',
-                                    height: 'auto',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
-                                        height: 'auto',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                    } }, { children: _jsx(SheetViewTableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))] })) }))) : (_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 }, { children: _jsxs(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })] })) })))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { 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: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    return (_jsxs(_Fragment, { children: [_jsx(TableContainer, { children: showNoDataView ? (_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 }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: handleColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, tablePosition: "scrollable", hasPinnedStart: false, hasPinnedEnd: false }) })), _jsx(SheetViewTableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })] })) }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [renderPinnedColumn('start', pinnedStartColumnsData, pinnedStartColumnsWidth, pinnedStartColumns), _jsx(MainTableWrapper, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }, { 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: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, tablePosition: "scrollable", hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0 }) })), _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: createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false) })) }))] })) })) })), renderPinnedColumn('end', pinnedEndColumnsData, pinnedEndColumnsWidth, [...pinnedStartColumns, ...pinnedEndColumns])] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/SheetViewTableHeader.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type TableHeadProps } from '@mui/material/TableHead';
-import type { IColumnProps, IVirtualTable } from '../../../../../types/index.js';
+import type { IColumnProps, IVirtualTable, TablePosition } from '../../../../../types/index.js';
 interface SheetViewTableHeaderProps {
     columns: IColumnProps[];
     headerProps?: TableHeadProps;
@@ -13,7 +13,10 @@ interface SheetViewTableHeaderProps {
     lastColumnId?: string | null;
     selectedColumn?: string | null;
     onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
+    tablePosition?: TablePosition;
+    hasPinnedStart?: boolean;
+    hasPinnedEnd?: boolean;
 }
-declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tablePosition, hasPinnedStart, hasPinnedEnd, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
 export default _default;

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

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { StyledHeader, StyledMUITableRow } from '../../style';
 import TableCell from './TableCell';
-function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
+function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, tablePosition = 'scrollable', hasPinnedStart = false, hasPinnedEnd = false, }) {
     return (_jsx(StyledHeader, Object.assign({ component: "nav", "data-testid": "SheetViewVirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { children: _jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "SheetViewVirtualTable_TableHeader_StyledMUITableRow" }, { children: columns.map((column, colIndex) => {
-                return (_jsx(TableCell, { column: column, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === column.id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick }, `${column.id}-${colIndex}`));
+                return (_jsx(TableCell, { column: column, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === column.id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick, tablePosition: tablePosition, hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, `${column.id}-${colIndex}`));
             }) })) })));
 }
 export default memo(SheetViewTableHeader);

package/build/components/VirtualTables/SheetViewVirtualTable/components/SheetViewTableHeader/TableCell.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { IColumnProps } from '../../../../../types/index.js';
+import type { IColumnProps, TablePosition } from '../../../../../types/index.js';
 import { SheetViewTableHeaderProps } from './type';
 interface TableCellProps extends Pick<SheetViewTableHeaderProps, 'onColumnSort' | 'columnsSorting' | 'onColumnPin' | 'isPinnable' | 'lastColumnId' | 'onColumnClick' | 'pinnedColumns'> {
     column: IColumnProps;
@@ -7,7 +7,10 @@ interface TableCellProps extends Pick<SheetViewTableHeaderProps, 'onColumnSort'
     isLast: boolean;
     isSelected: boolean;
     isDefaultPinned: boolean;
+    tablePosition?: TablePosition;
+    hasPinnedStart?: boolean;
+    hasPinnedEnd?: boolean;
 }
-declare function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }: TableCellProps): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, tablePosition, hasPinnedStart, hasPinnedEnd, }: TableCellProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableCell>;
 export default _default;

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

@@ -6,7 +6,7 @@ import ColumnFilter from '../../../components/ColumnFilter';
 import { StyledCell } from '../../../components/style';
 import { PinIconContainer, HeaderText } from '../../style';
 import ColumnSort from '../../../../VirtualTables/components/ColumnSort';
-function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }) {
+function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, tablePosition = 'scrollable', hasPinnedStart = false, hasPinnedEnd = false, }) {
     const [columnFilterEl, setColumnFilterEl] = useState(null);
     const checkIsPanned = useCallback((columnId) => pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.includes(columnId), [pinnedColumns]);
     const isPinned = useMemo(() => checkIsPanned(id), [id, checkIsPanned]);
@@ -23,7 +23,13 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
             }
         }
     };
-    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => {
+    let effectiveFirst = isFirst;
+    let effectiveLast = isLast;
+    if (tablePosition === 'scrollable') {
+        effectiveFirst = isFirst && !hasPinnedStart;
+        effectiveLast = isLast && !hasPinnedEnd;
+    }
+    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, "data-column-pinned": isPinned, isFirst: effectiveFirst, isLast: effectiveLast, isSheetView: true, onClick: (event) => {
             onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
             setColumnFilterEl(event.currentTarget);
         }, sx: (theme) => (Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '1px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', minHeight: isSelected ? '28px' : 'auto', position: 'relative', '&:before': {

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

@@ -68,18 +68,21 @@ const PinnedColumnBase = styled('div')(({ theme }) => ({
     backgroundColor: theme.palette.primary.light,
     borderTop: '1px solid #F2F2F2',
     borderBottom: '1px solid #F2F2F2',
+    overflow: 'hidden',
 }));
 export const PinnedStartColumnWrapper = styled(PinnedColumnBase)({
-    marginLeft: '32px',
     boxShadow: '4px 0px 24px 0px #00000014',
     borderLeft: '1px solid #F2F2F2',
     borderRight: 'none',
+    borderTopLeftRadius: '12px',
+    borderBottomLeftRadius: '12px',
 });
 export const PinnedEndColumnWrapper = styled(PinnedColumnBase)({
-    marginRight: '32px',
     boxShadow: '-4px 0px 24px 0px #00000014',
     borderRight: '1px solid #F2F2F2',
     borderLeft: 'none',
+    borderTopRightRadius: '12px',
+    borderBottomRightRadius: '12px',
 });
 export const MainTableWrapper = styled('div', {
     shouldForwardProp: (prop) => prop !== 'hasPinnedStart' && prop !== 'hasPinnedEnd',
@@ -92,10 +95,13 @@ export const MainTableWrapper = styled('div', {
     borderBottom: '1px solid #F2F2F2',
     borderLeft: hasPinnedStart ? 'none' : '1px solid #F2F2F2',
     borderRight: hasPinnedEnd ? 'none' : '1px solid #F2F2F2',
-    marginLeft: hasPinnedStart ? '0' : '32px',
-    marginRight: hasPinnedEnd ? '0' : '32px',
     position: 'relative',
     scrollbarWidth: 'auto',
+    overflow: 'hidden',
+    borderTopLeftRadius: hasPinnedStart ? '0' : '12px',
+    borderBottomLeftRadius: hasPinnedStart ? '0' : '12px',
+    borderTopRightRadius: hasPinnedEnd ? '0' : '12px',
+    borderBottomRightRadius: hasPinnedEnd ? '0' : '12px',
 }));
 export const UnpinnedTableHeaderWrapper = styled('div')({
     flexShrink: 0,

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

@@ -86,7 +86,7 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
         scrollToIndex,
     ]);
     const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
-    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({ isSheetView: isSheetView, "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: {
+    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))] }));

package/build/components/VirtualTables/components/TableRow.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { TableRowProps } from '@mui/material';
-import type { IColumnProps } from '../../../types/index.js';
+import type { IColumnProps, TablePosition } from '../../../types/index.js';
 interface ITableRowProps<R = any> {
     row: R;
     columns: Array<IColumnProps<R>>;
@@ -15,7 +15,14 @@ interface ITableRowProps<R = any> {
     selectedColumn?: string | null;
     onCellClick?: (rowIndex: number, columnId: string, event: React.MouseEvent) => void;
     isLastRow?: boolean;
+    isFirstRow?: boolean;
+    tablePosition?: TablePosition;
+    hasPinnedStart?: boolean;
+    hasPinnedEnd?: boolean;
+    isLoading?: boolean;
+    isFetchingNextPage?: boolean;
+    isLoadMoreLoading?: boolean;
 }
-declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, onCellClick, isLastRow, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell, selectedColumn, onCellClick, isLastRow, isFirstRow, tablePosition, hasPinnedStart, hasPinnedEnd, isLoading, isFetchingNextPage, isLoadMoreLoading, }: Readonly<ITableRowProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof TableRow>;
 export default _default;

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

@@ -1,14 +1,23 @@
 import { createElement as _createElement } from "react";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
+import Skeleton from '@mui/material/Skeleton';
 import { areEqual } from 'react-window';
 import { StyledCell, StyledTableRow } from './style';
 import { getSelectionStyles } from '../utils/getSelectionStyles';
-function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, }) {
-    const renderCell = (column) => {
-        const { render, format, selector } = column;
+function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = null, selectedColumn = null, onCellClick, isLastRow = false, isFirstRow, tablePosition = 'scrollable', hasPinnedStart, hasPinnedEnd, isLoading, isFetchingNextPage, isLoadMoreLoading, }) {
+    const renderCell = (column, colIndex) => {
+        const { render, format, selector, pinned } = column;
         if (!(column === null || column === void 0 ? void 0 : column.id) || !row)
             return null;
+        const shouldShowSkeleton = isLoading && !(colIndex === 0 && pinned === 'start');
+        if (shouldShowSkeleton) {
+            return (_jsx(Skeleton, { variant: "rectangular", width: "100%", height: 16, animation: "wave", sx: {
+                    backgroundColor: '#F4F4F4',
+                    borderRadius: '64px',
+                    minWidth: '20px',
+                } }));
+        }
         const value = selector ? selector({ row, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : row[column === null || column === void 0 ? void 0 : column.id];
         const formattedValue = format ? format({ value, row, index }) : value;
         return render ? render({ row, column, index, value: row[column === null || column === void 0 ? void 0 : column.id] }) : _jsx(_Fragment, { children: formattedValue });
@@ -25,8 +34,33 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
                 isColumnSelected,
                 isLastRow,
             });
-            return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event), sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: renderCell(column) }), `${column.id}-${colIndex}`));
-        }) })), [columns, row, index, selectedCell, selectedColumn, onCellClick, isLastRow]);
+            const isFirstColumn = column.id === columns[0].id;
+            const isLastColumn = column.id === columns[columns.length - 1].id;
+            let effectiveFirst = isFirstColumn;
+            let effectiveLast = isLastColumn;
+            if (!column.pinned) {
+                effectiveFirst = isFirstColumn && !hasPinnedStart;
+                effectiveLast = isLastColumn && !hasPinnedEnd;
+            }
+            return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: effectiveFirst, isLast: effectiveLast, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, columnIdStr, event), sx: Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: renderCell(column, colIndex) }), `${column.id}-${colIndex}`));
+        }) })), [
+        columns,
+        row,
+        index,
+        selectedCell,
+        selectedColumn,
+        onCellClick,
+        isLastRow,
+        isFirstRow,
+        tablePosition,
+        hasPinnedStart,
+        hasPinnedEnd,
+        isLoading,
+        isFetchingNextPage,
+        isLoadMoreLoading,
+        isSheetView,
+        renderCell,
+    ]);
     return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
 }
 export default memo(TableRow, areEqual);

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 interface TableWrapperProps {
     showNoDataView?: boolean;
-    isSheetView?: boolean;
 }
 export declare const TableWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;

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

@@ -6,8 +6,8 @@ import { motion } from 'framer-motion';
 import { TABLE_FOOTER_HEIGHT } from './TableFooter/style';
 import VirtualScrollList from './virtualScroll/VirtualScrollList';
 export const TableWrapper = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'showNoDataView' && prop !== 'isSheetView',
-})(({ showNoDataView, isSheetView }) => ({
+    shouldForwardProp: (prop) => prop !== 'showNoDataView',
+})(({ showNoDataView }) => ({
     display: 'flex',
     flexDirection: 'column',
     height: '100%',
@@ -15,8 +15,7 @@ export const TableWrapper = styled(Box, {
     minWidth: showNoDataView ? 'unset' : 'fit-content',
     overflow: 'hidden',
     overflowX: showNoDataView ? 'hidden' : 'scroll',
-    margin: isSheetView ? '0 32px' : '0',
-    border: isSheetView ? '1px solid #F2F2F2' : 'none',
+    margin: '0px',
 }));
 export const StyledBox = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'hidePadding',
@@ -30,24 +29,26 @@ export const StyledSolidBackground = styled(Box)(({ theme }) => ({
 }));
 export const StyledCell = styled(TableCell, {
     shouldForwardProp: (prop) => !['isLast', 'isFirst', 'isSheetView', 'isSelected'].includes(prop),
-})(({ theme, isLast, isFirst, isSheetView, isSelected }) => (Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: isSheetView ? theme.palette.text.primary : theme.palette.grey[700], fontSize: isSheetView ? theme.typography.subtitle1.fontSize : theme.typography.caption.fontSize, height: '100%', fontWeight: isSheetView ? 400 : theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center', cursor: 'pointer' }, (isSheetView && {
-    borderRight: isLast ? '1px solid transparent' : `1px solid ${theme.palette.divider}`,
-    paddingInline: '8px !important',
-    paddingLeft: '8px !important',
-    paddingRight: '8px !important',
-    position: 'relative',
-    borderTop: '1px solid transparent',
-    borderLeft: '1px solid transparent',
-    '&:before': {
-        content: '""',
-        borderRight: isLast ? 'none' : '1px solid transparent',
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        left: 0,
-        bottom: 0,
-    },
-}))));
+})(({ theme, isLast, isFirst, isSheetView }) => {
+    return Object.assign({ paddingBlock: '0', paddingInline: '0.3875rem !important', paddingLeft: isFirst ? '0 !important' : '0.3875rem !important', paddingRight: isLast ? '0 !important' : '0.3875rem !important', color: isSheetView ? theme.palette.text.primary : theme.palette.grey[700], fontSize: isSheetView ? theme.typography.subtitle1.fontSize : theme.typography.caption.fontSize, height: '100%', fontWeight: isSheetView ? 400 : theme.typography.fontWeightRegular, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'flex', alignItems: 'center', cursor: 'pointer' }, (isSheetView && {
+        borderRight: isLast ? '1px solid transparent' : `1px solid ${theme.palette.divider}`,
+        paddingInline: '8px !important',
+        paddingLeft: '8px !important',
+        paddingRight: '8px !important',
+        position: 'relative',
+        borderTop: '1px solid transparent',
+        borderLeft: '1px solid transparent',
+        '&:before': {
+            content: '""',
+            borderRight: isLast ? 'none' : '1px solid transparent',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            left: 0,
+            bottom: 0,
+        },
+    }));
+});
 export const StyledVirtualList = styled(VirtualScrollList, {
     shouldForwardProp: (prop) => !['areTotalRowsNotFillingHeight', 'isSheetView'].includes(prop),
 })(({ theme, areTotalRowsNotFillingHeight, isSheetView }) => (Object.assign({ backgroundColor: areTotalRowsNotFillingHeight ? 'transparent' : theme.palette.background.default }, (isSheetView && {
@@ -132,6 +133,9 @@ export const TableContainer = styled(Box)(() => ({
     display: 'flex',
     flexDirection: 'column',
     height: '100%',
+    paddingInline: '28px',
+    borderRadius: '8px',
+    marginBottom: '11px !important',
 }));
 export const StyledCardsBox = styled(Box, {
     shouldForwardProp: (prop) => prop !== 'showNoDataView',

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

@@ -10,5 +10,5 @@ export declare const LastRowContent: React.MemoExoticComponent<({ isLoadingRow,
 export declare const StyledItemWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     showShadowHighlight?: boolean | undefined;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
+declare function ListItemWrapper({ index, style, data: { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned, isLoadMoreLoading, ...restData }, }: Readonly<ListChildComponentProps>): import("react/jsx-runtime").JSX.Element;
 export default ListItemWrapper;

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

@@ -52,7 +52,7 @@ export const StyledItemWrapper = styled('div', {
 }));
 function ListItemWrapper(_a) {
     var _b;
-    var { index, style } = _a, _c = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned = false } = _c, restData = __rest(_c, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView", "isPinned"]);
+    var { index, style } = _a, _c = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView, isPinned = false, isLoadMoreLoading = false } = _c, restData = __rest(_c, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView", "isPinned", "isLoadMoreLoading"]);
     const lastItemIndex = rows.length - 1;
     const row = rows[index];
     const isLoadingRow = isLoading && index === lastItemIndex + 1;
@@ -88,7 +88,7 @@ function ListItemWrapper(_a) {
                         height: '100%',
                     } }, { children: isError ? _jsx(RowErrorState, {}) : lastRowContent })) })));
         }
-        return (_jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView, selectedCell: restData.selectedCell, selectedColumn: restData.selectedColumn, onCellClick: restData.onCellClick, isLastRow: index === rows.length - 1 }, `row-${index}`));
+        return (_jsx(TableRow, Object.assign({ index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView, isLastRow: index === rows.length - 1, isFirstRow: index === 0, isLoading: isLoading, isLoadMoreLoading: isLoadMoreLoading }, restData), `row-${index}`));
     }, [
         restData,
         index,
@@ -103,6 +103,7 @@ function ListItemWrapper(_a) {
         isPinned,
         rows.length,
         renderSheetViewLoadingRow,
+        isLoadMoreLoading,
     ]);
     return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - ((_b = renderedScrollTopRef === null || renderedScrollTopRef === void 0 ? void 0 : renderedScrollTopRef.current) !== null && _b !== void 0 ? _b : 0), willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
 }

package/build/constants/assets.d.ts

@@ -1,6 +1,13 @@
 export declare const lightUrl: string;
 export declare const appBaseUrl: string;
 export declare const functionBaseUrl: string;
+export declare const getLightUrlIcon: (source: string) => string;
+export declare const getPaymentMethodsIcon: (source: string) => string;
+export declare const getPaymentIssuersIcon: (source: string) => string;
+export declare const getCountriesIcon: (source: string) => string;
+export declare const getServiceFunctionIcon: (functionCode: string) => string;
+export declare const getCurrenciesIcon: (currency: string) => string;
+export declare const getAuthorityIcon: (authority: string) => string;
 export declare const SARIconImage: string;
 export declare const DirhamIconImage: string;
 export declare const abandonedIcon: string;
@@ -360,11 +367,6 @@ export declare const brandPlaceholderIcon: string;
 export declare const usersIcon: string;
 export declare const clipboardIcon: string;
 export declare const noAgreementIcon: string;
-export declare const getPaymentMethodsIcon: (source: string) => string;
-export declare const getPaymentIssuersIcon: (source: string) => string;
-export declare const getCountriesIcon: (source: string) => string;
-export declare const getCurrenciesIcon: (currency: string) => string;
-export declare const getAuthorityIcon: (authority: string) => string;
 export declare const acceptanceWindowIcon: string;
 export declare const walletWindowIcon: string;
 export declare const billingWindowIcon: string;
@@ -424,7 +426,6 @@ export declare const redVerifyIcon: string;
 export declare const closedVerifyIcon: string;
 export declare const archivedVerifyIcon: string;
 export declare const penIcon: string;
-export declare const getServiceFunctionIcon: (functionCode: string) => string;
 export declare const listShadowBg: string;
 export declare const defaultCountryIcon: string;
 export declare const defaultDeviceIcon: string;

package/build/constants/assets.js

@@ -2,6 +2,16 @@ const cdnUrl = 'https://cdn.tap.company/tap-assets';
 export const lightUrl = `${cdnUrl}/icons/dashboard/light`;
 export const appBaseUrl = `${lightUrl}/other`;
 export const functionBaseUrl = `${lightUrl}/function`;
+export const getLightUrlIcon = (source) => `${lightUrl}/${source}.svg`;
+export const getPaymentMethodsIcon = (source) => `${lightUrl}/payment-method/v2/${source}.svg`;
+export const getPaymentIssuersIcon = (source) => `${lightUrl}/payment-issuer/${source}.svg`;
+export const getCountriesIcon = (source) => `${lightUrl}/country/${source}.svg`;
+export const getServiceFunctionIcon = (functionCode) => `${lightUrl}/function/${functionCode}.svg`;
+export const getCurrenciesIcon = (currency) => `${cdnUrl}/currency/v2/light/${currency}.svg`;
+export const getAuthorityIcon = (authority) => {
+    const authorityWithoutSpaces = authority.replace(/\s/g, '');
+    return `${cdnUrl}/icons/dashboard/light/authority/v2/${authorityWithoutSpaces}.svg`;
+};
 export const SARIconImage = `${lightUrl}/currency/sar.svg`;
 export const DirhamIconImage = `${lightUrl}/currency/dirham.svg`;
 export const abandonedIcon = `${lightUrl}/abandoned.svg`;
@@ -361,14 +371,6 @@ export const brandPlaceholderIcon = `${lightUrl}/brandPlaceholder.svg`;
 export const usersIcon = `${lightUrl}/users-icons.svg`;
 export const clipboardIcon = `${lightUrl}/Board-Icons.svg`;
 export const noAgreementIcon = `${appBaseUrl}/No Agreement.svg`;
-export const getPaymentMethodsIcon = (source) => `${lightUrl}/payment-method/v2/${source}.svg`;
-export const getPaymentIssuersIcon = (source) => `${lightUrl}/payment-issuer/${source}.svg`;
-export const getCountriesIcon = (source) => `${lightUrl}/country/${source}.svg`;
-export const getCurrenciesIcon = (currency) => `${cdnUrl}/currency/v2/light/${currency}.svg`;
-export const getAuthorityIcon = (authority) => {
-    const authorityWithoutSpaces = authority.replace(/\s/g, '');
-    return `${cdnUrl}/icons/dashboard/light/authority/v2/${authorityWithoutSpaces}.svg`;
-};
 export const acceptanceWindowIcon = `${lightUrl}/window/acceptance.svg`;
 export const walletWindowIcon = `${lightUrl}/window/wallet.svg`;
 export const billingWindowIcon = `${lightUrl}/window/billing.svg`;
@@ -428,7 +430,6 @@ export const redVerifyIcon = `${lightUrl}/redVerifyIcon.svg`;
 export const closedVerifyIcon = `${lightUrl}/closedVerifyIcon.svg`;
 export const archivedVerifyIcon = `${lightUrl}/archivedVerifyIcon.svg`;
 export const penIcon = `${lightUrl}/penIcon.svg`;
-export const getServiceFunctionIcon = (functionCode) => `${lightUrl}/function/${functionCode}.svg`;
 export const listShadowBg = `${appBaseUrl}/listShadow.svg`;
 export const defaultCountryIcon = `${lightUrl}/defaultCountryIcon.svg`;
 export const defaultDeviceIcon = `${lightUrl}/defaultDeviceIcon.svg`;

package/build/types/table.d.ts

@@ -96,6 +96,7 @@ export interface IColumnFilterCustom {
 }
 export type AnimationType = false | 'pulse' | 'wave' | undefined;
 export type TableMode = 'sheet' | 'text' | 'default';
+export type TablePosition = 'pinnedStart' | 'pinnedEnd' | 'scrollable';
 export interface IVirtualTable<R = any> {
     rows: R[];
     columns: Array<IColumnProps<R>>;

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.9",
-  "testVersion": 0,
+  "version": "0.1.10-test.1-test.8-test.9-test.10",
+  "testVersion": 10,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -131,4 +131,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}