@tap-payments/os-micro-frontend-shared 0.0.72 → 0.0.73-pin-icon-v2

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/SearchButton/styles.d.ts

@@ -554,9 +554,9 @@ export declare const Icon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -269,9 +269,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -273,9 +273,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -262,9 +262,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/VirtualTable/SheetViewVirtualTable.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { IVirtualTable } from '../../types/index.js';
+interface ISheetViewVirtualTable extends Omit<IVirtualTable, 'isSheetView'> {
+    onColumnPin?: (columnId: string, isPinned: boolean) => void;
+    isPinnable?: boolean;
+}
+declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, onColumnPin, isPinnable, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
+export default _default;

package/build/components/VirtualTable/SheetViewVirtualTable.js

@@ -0,0 +1,149 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, memo, useState, useCallback, useRef } from 'react';
+import { useTheme } from '@mui/material/styles';
+import memoize from 'memoize-one';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { VariableSizeList } from 'react-window';
+import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN } from '../../constants/index.js';
+import { useDelayToSetValue } from '../../hooks/index.js';
+import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../utils/index.js';
+import TableFooter from './components/TableFooter/TableFooter';
+import TableLastItem from './components/TableLastItem';
+import TableNoData from './components/TableNoData';
+import ListItemWrapper from './components/virtualScroll/ListItemWrapper';
+import { StyledBox, StyledTableBox, TableContainer, TableWrapper } from './style';
+import SheetViewTableHeader from './components/SheetViewTableHeader';
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded) => ({
+    columns,
+    isLoading,
+    rows,
+    rowProps,
+    scrollToIndex,
+    totalCount,
+    lastItemIndex,
+    isError,
+    areAllRowsLoaded,
+    limit: totalCount,
+    newLoadedRowsEndIndex: lastItemIndex,
+    isSheetView: true,
+}));
+function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, onColumnPin, isPinnable = false, }) {
+    const theme = useTheme();
+    const [internalPinnedColumns, setInternalPinnedColumns] = useState(() => isPinnable ? columns.filter((c) => c.pinned).map((c) => c.id) : []);
+    const pinnedVirtualListRef = useRef(null);
+    const scrollableVirtualListRef = useRef(null);
+    const onPointerDown = (e) => {
+        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
+    };
+    const isDelayedFetchingNextPage = useDelayToSetValue({
+        value: isFetchingNextPage,
+        delay: 1000,
+    });
+    const [showBackDrop, setShowBackdrop] = useState(false);
+    const isError = hasError(error);
+    const tableLoading = isLoading !== null && isLoading !== void 0 ? isLoading : true;
+    const tableError = !isLoading && rows.length === 0 && isError && !isNotFoundError(error);
+    const tableEmpty = !isLoading && rows.length === 0;
+    const hasTimeoutError = isTimeoutError(error);
+    const lastItemIndex = rows.length - 1;
+    const shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+    const { pinnedColumnsData, unpinnedColumnsData } = useMemo(() => {
+        const pinned = shownColumns.filter((column) => internalPinnedColumns.includes(column.id));
+        const unpinned = shownColumns.filter((column) => !internalPinnedColumns.includes(column.id));
+        const sortedPinned = pinned.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); });
+        return {
+            pinnedColumnsData: sortedPinned,
+            unpinnedColumnsData: sortedUnpinned,
+        };
+    }, [shownColumns, internalPinnedColumns]);
+    const orderedColumns = useMemo(() => [...pinnedColumnsData, ...unpinnedColumnsData], [pinnedColumnsData, unpinnedColumnsData]);
+    const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
+    const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
+    const handleColumnPin = useCallback((columnId) => {
+        if (!isPinnable)
+            return;
+        const newPinnedColumns = internalPinnedColumns.includes(columnId)
+            ? internalPinnedColumns.filter((id) => id !== columnId)
+            : [...internalPinnedColumns, columnId];
+        setInternalPinnedColumns(newPinnedColumns);
+        onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, !internalPinnedColumns.includes(columnId));
+    }, [internalPinnedColumns, onColumnPin, isPinnable]);
+    const handleScrollableScroll = useCallback(({ scrollOffset, scrollUpdateWasRequested }) => {
+        if (pinnedVirtualListRef.current && !scrollUpdateWasRequested) {
+            pinnedVirtualListRef.current.scrollTo(scrollOffset);
+        }
+    }, [pinnedVirtualListRef]);
+    const handlePinnedScroll = useCallback(({ scrollOffset, scrollUpdateWasRequested }) => {
+        if (scrollableVirtualListRef.current && !scrollUpdateWasRequested) {
+            scrollableVirtualListRef.current.scrollTo(scrollOffset);
+        }
+    }, [scrollableVirtualListRef]);
+    const createVirtualTableContainer = (columnsToRender, containerKey, isPinned = false, fixedWidth) => {
+        var _a;
+        const itemData = createItemData(columnsToRender, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight);
+        const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
+            if (areAllRowsLoaded)
+                return;
+            yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
+        });
+        return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index < rows.length, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref: infiniteLoaderRef }) => (_jsx(AutoSizer, { children: ({ height, width }) => (_jsx(VariableSizeList, Object.assign({ ref: (list) => {
+                        infiniteLoaderRef(list);
+                        if (isPinned) {
+                            pinnedVirtualListRef.current = list;
+                        }
+                        else {
+                            scrollableVirtualListRef.current = list;
+                        }
+                    }, height: height, width: fixedWidth || width, itemCount: itemsCount, itemSize: () => rowHeight, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: TABLE_LIST_OVER_SCAN, onScroll: isPinned ? handlePinnedScroll : handleScrollableScroll, style: {
+                        overflowX: isPinned ? 'hidden' : 'auto',
+                        overflowY: 'auto',
+                    } }, { children: ListItemWrapper }))) })) })));
+    };
+    const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
+    const pinnedColumnsWidth = pinnedColumnsData.reduce((acc, col) => {
+        const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
+        return acc + width;
+    }, 0);
+    return (_jsxs(_Fragment, { children: [_jsxs(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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsx(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: _jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }) })) }))) : (_jsxs("div", Object.assign({ style: {
+                            display: 'flex',
+                            width: '100%',
+                            height: '100%',
+                            overflow: 'hidden',
+                        } }, { children: [pinnedColumnsData.length > 0 && (_jsxs("div", Object.assign({ style: {
+                                    width: `${pinnedColumnsWidth}px`,
+                                    zIndex: 10,
+                                    flex: '1 1 auto',
+                                    minWidth: 0,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    position: 'relative',
+                                } }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: pinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: internalPinnedColumns, onColumnPin: handleColumnPin, isPinnable: isPinnable })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+                                            width: '100%',
+                                            minWidth: 'fit-content',
+                                        } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(pinnedColumnsData, 'pinned', true, pinnedColumnsWidth) })) }))] }))), _jsx("div", Object.assign({ style: {
+                                    flex: '1 1 auto',
+                                    minWidth: 0,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    position: 'relative',
+                                } }, { 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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ isSheetView: true, "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx("div", Object.assign({ style: {
+                                                    flexShrink: 0,
+                                                    borderBottom: '1px solid #E0E0E0',
+                                                    height: 'auto',
+                                                } }, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: internalPinnedColumns, onColumnPin: handleColumnPin, isPinnable: isPinnable }) }))), _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) })) }))] })) })) }))] }))), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "SheetViewVirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+}
+export default memo(SheetViewVirtualTable);

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../types/index.js';
-declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

package/build/components/VirtualTable/VirtualTable.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, memo, useState } from 'react';
+import { useMemo, memo, useState, useRef, useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
 import memoize from 'memoize-one';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -34,7 +34,7 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     areAllRowsLoaded,
     isSheetView,
 }));
-function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView = false, }) {
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView = false, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
@@ -57,6 +57,12 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
     const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
     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);
+    useEffect(() => {
+        if (listRef.current && typeof listRef.current.resetAfterIndex === 'function') {
+            listRef.current.resetAfterIndex(0, true);
+        }
+    }, [isSheetView, tableRowHeight]);
     const renderTableContainer = useMemo(() => {
         const setBackdropVisibility = (isVisible) => {
             setShowBackdrop(isVisible);
@@ -66,24 +72,18 @@ function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader,
                 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 }, { children: ListItemWrapper }))) }))) })));
+        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 }))) }))) })));
     }, [
-        orderedColumns,
-        error,
-        isLoading,
         lastItemIndex,
         loadMoreItems,
-        rowHeight,
-        rows,
-        rowProps,
-        tableError,
-        tableLoading,
         threshold,
-        isDelayedFetchingNextPage,
         areAllRowsLoaded,
         areTotalRowsNotFillingHeight,
         itemsCount,
         tableRowHeight,
+        isSheetView,
+        itemData,
+        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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, 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: {

package/build/components/VirtualTable/components/SheetViewTableHeader.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { type TableHeadProps } from '@mui/material';
+import type { IColumnProps, IVirtualTable } from '../../../types/index.js';
+export declare const ActionIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const ColumnIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+interface StyledHeaderProps {
+    showBackDrop: boolean;
+}
+export declare const StyledHeader: import("@emotion/styled").StyledComponent<import("@mui/material").TableHeadOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
+    ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+}, "className" | "style" | "classes" | "children" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledHeaderProps, {}, {}>;
+interface SheetViewTableHeaderProps {
+    columns: IColumnProps[];
+    headerProps?: TableHeadProps;
+    columnsSorting?: IVirtualTable['columnsSorting'];
+    onColumnSort?: IVirtualTable['onColumnSort'];
+    showBackDrop: boolean;
+    pinnedColumns?: string[];
+    onColumnPin?: (columnId: string) => void;
+    isPinnable?: boolean;
+}
+declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
+export default _default;

package/build/components/VirtualTable/components/SheetViewTableHeader.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { Box, styled, useTheme } from '@mui/material';
+import TableHead from '@mui/material/TableHead';
+import MUITableRow from '@mui/material/TableRow';
+import Dropdown from '../../DropdownMenu';
+import { columnIcon, sortAzIcon, sortZaIcon } from '../../../constants/index.js';
+import ColumnFilter from './ColumnFilter';
+import { StyledCell } from '../style';
+export const ActionIcon = styled('img')(() => ({
+    width: '13.3px',
+    height: '13.3px',
+}));
+export const ColumnIcon = styled('img')(() => ({
+    width: '8px',
+    height: '6.4px',
+    cursor: 'pointer',
+}));
+const PinIcon = styled('div')(({ theme, isPinned }) => ({
+    width: '16px',
+    height: '16px',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '2px',
+    padding: '2px',
+    transition: 'all 0.2s ease',
+    backgroundColor: isPinned ? theme.palette.primary.main : 'transparent',
+    '&:hover': {
+        backgroundColor: isPinned ? theme.palette.primary.dark : theme.palette.action.hover,
+    },
+    '& svg': {
+        fill: isPinned ? theme.palette.primary.contrastText : theme.palette.text.secondary,
+        transition: 'fill 0.2s ease',
+    },
+}));
+export const StyledHeader = styled(TableHead, {
+    shouldForwardProp: (prop) => prop !== 'showBackDrop',
+})(({ showBackDrop, theme }) => ({
+    width: '100%',
+    minWidth: 'fit-content',
+    flex: '0 0 auto',
+    boxShadow: showBackDrop ? theme.shadows[23] : 'none',
+    backgroundColor: theme.palette.background.default,
+    zIndex: 1,
+}));
+const StyledMUITableRow = styled(MUITableRow)({
+    display: 'flex',
+    justifyContent: 'flex-start',
+    width: '100%',
+    minWidth: 'fit-content',
+});
+function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const theme = useTheme();
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleSortingOption = (columnId, order) => {
+        if (columnId) {
+            onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort({
+                [columnId]: order,
+            });
+            handleClose();
+        }
+    };
+    const handlePinClick = (columnId, event) => {
+        event.stopPropagation();
+        onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId);
+    };
+    const PinSVG = ({ isPinned }) => (_jsx("svg", Object.assign({ width: "12", height: "12", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z", fill: "currentColor" }) })));
+    return (_jsxs(StyledHeader, Object.assign({ component: "nav", "data-testid": "SheetViewVirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { sx: Object.assign({ width: '100%', minWidth: 'auto', overflowX: 'scroll' }, headerProps === null || headerProps === void 0 ? void 0 : headerProps.sx) }, { children: [_jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "SheetViewVirtualTable_TableHeader_StyledMUITableRow" }, { children: columns.map((column, colIndex) => {
+                    const { header, id, align, headerStyle, sortable, filter, pinnable } = column;
+                    const isFirst = id === columns[0].id;
+                    const isLast = id === columns[columns.length - 1].id;
+                    const isPinned = pinnedColumns.includes(id);
+                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "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, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, sx: Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'baseline', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset' }, headerStyle) }, { children: [isPinnable && pinnable && (_jsx(PinIcon, Object.assign({ isPinned: isPinned, onClick: (event) => handlePinClick(id, event), title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx(PinSVG, { isPinned: isPinned }) }))), typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "SheetViewTableHeader_columns_header", sx: { maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: header && (_jsx("span", Object.assign({ style: { textOverflow: 'ellipsis', width: '80%', overflow: 'hidden' }, "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id })] }), `${id}-${colIndex}`));
+                }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
+                    {
+                        label: 'Sort A-Z',
+                        name: 'asc',
+                        icon: _jsx(ActionIcon, { src: sortAzIcon, alt: "sort-icon" }),
+                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'asc',
+                        onClick: () => {
+                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'asc');
+                        },
+                    },
+                    {
+                        label: 'Sort Z-A',
+                        name: 'desc',
+                        icon: _jsx(ActionIcon, { src: sortZaIcon, alt: "sort-icon" }),
+                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id) || '']) === 'desc',
+                        onClick: () => {
+                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'desc');
+                        },
+                    },
+                ] })] })));
+}
+export default memo(SheetViewTableHeader);

package/build/components/VirtualTable/components/TableRow.js

@@ -10,7 +10,7 @@ function TableRow({ row, columns, index, rowProps, isSheetView }) {
             return null;
         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 });
+        return render ? render({ row, column, index, value: formattedValue }) : _jsx(_Fragment, { children: formattedValue });
     };
     const content = useMemo(() => (_jsx(_Fragment, { children: columns.map((column, colIndex) => {
             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, sx: Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start' }, column.cellStyle), isSheetView: isSheetView }, { children: renderCell(column) }), `${column.id}-${colIndex}`));

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

@@ -44,7 +44,8 @@ export const StyledItemWrapper = styled('div', {
     height: '100%',
 }));
 function ListItemWrapper(_a) {
-    var { index, style } = _a, _b = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView } = _b, restData = __rest(_b, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "limit", "totalCount", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView"]);
+    var _b;
+    var { index, style } = _a, _c = _a.data, { renderedScrollTopRef, rows, rowProps, columns, isLoading, scrollToIndex, limit, totalCount, newLoadedRowsEndIndex, isError, areAllRowsLoaded, isSheetView } = _c, restData = __rest(_c, ["renderedScrollTopRef", "rows", "rowProps", "columns", "isLoading", "scrollToIndex", "limit", "totalCount", "newLoadedRowsEndIndex", "isError", "areAllRowsLoaded", "isSheetView"]);
     const lastItemIndex = rows.length - 1;
     const row = rows[index];
     const isLoadingRow = isLoading && index === lastItemIndex + 1;
@@ -71,6 +72,6 @@ function ListItemWrapper(_a) {
         }
         return _jsx(TableRow, { index: index, row: row, columns: columns, rowProps: memoizedRowProps, isSheetView: isSheetView }, `row-${index}`);
     }, [restData, index, row, columns, memoizedRowProps, isSheetView]);
-    return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - renderedScrollTopRef.current, willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
+    return (_jsx("div", Object.assign({ "data-testid": "ListItemWrapper", style: Object.assign(Object.assign({}, style), { top: Number(style.top) - ((_b = renderedScrollTopRef === null || renderedScrollTopRef === void 0 ? void 0 : renderedScrollTopRef.current) !== null && _b !== void 0 ? _b : 0), willChange: 'top' }) }, { children: _jsx(StyledItemWrapper, Object.assign({ "data-testid": "ListItemWrapper_StyledItemWrapper" }, { children: memoizedListItemComponent })) })));
 }
 export default ListItemWrapper;

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

@@ -1,7 +1,8 @@
-import { VariableSizeListProps } from 'react-window';
-type ExtendedVariableSizeListProps = VariableSizeListProps & {
+import React from 'react';
+import { VariableSizeList, VariableSizeListProps } from 'react-window';
+declare const VirtualScrollList: React.ForwardRefExoticComponent<VariableSizeListProps<any> & {
     setBackdropVisibility: (isVisible: boolean) => void;
-    scrollToIndex?: number;
-};
-declare function VirtualScrollList({ itemData, children, setBackdropVisibility, scrollToIndex, ...restProps }: ExtendedVariableSizeListProps): import("react/jsx-runtime").JSX.Element;
+    scrollToIndex?: number | undefined;
+    listRef?: React.RefObject<VariableSizeList<any>> | undefined;
+} & React.RefAttributes<VariableSizeList<any>>>;
 export default VirtualScrollList;

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

@@ -16,15 +16,16 @@ import VirtualScrollInner from './VirtualScrollInner';
 import VirtualScrollOuter from './VirtualScrollOuter';
 import useScrollBackShadow from '../../hooks/useScrollBackShadow';
 import { VirtualScrollOuterProvider } from '../../context';
-function VirtualScrollList(_a) {
-    var { itemData, children, setBackdropVisibility, scrollToIndex } = _a, restProps = __rest(_a, ["itemData", "children", "setBackdropVisibility", "scrollToIndex"]);
+const VirtualScrollList = React.forwardRef((_a, ref) => {
+    var { itemData, children, setBackdropVisibility, scrollToIndex, listRef: externalListRef } = _a, restProps = __rest(_a, ["itemData", "children", "setBackdropVisibility", "scrollToIndex", "listRef"]);
     const { handleBackDropVisibility, clearBackdropVisibility, clearTimer } = useScrollBackShadow({
         setBackdropVisibility,
     });
     const renderedScrollTopRef = useRef(0);
     const scrollTopRef = useRef(undefined);
     const scrollLocked = useRef(false);
-    const listRef = useRef(null);
+    const internalListRef = useRef(null);
+    const listRef = ref || externalListRef || internalListRef;
     const scrollTo = useCallback(() => {
         var _a, _b;
         clearTimer();
@@ -38,7 +39,7 @@ function VirtualScrollList(_a) {
         }
         clearBackdropVisibility();
         return false;
-    }, []);
+    }, [clearBackdropVisibility, clearTimer, handleBackDropVisibility, listRef]);
     const handleScroll = React.useCallback((event) => {
         scrollTopRef.current = event.currentTarget.scrollTop;
         if (!scrollLocked.current) {
@@ -51,11 +52,11 @@ function VirtualScrollList(_a) {
         if ((scrollToIndex || 0) >= 0 && !Number.isNaN(scrollToIndex) && scrollToIndex !== undefined && ((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo)) {
             (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.scrollToItem(scrollToIndex, 'center');
         }
-    }, [scrollToIndex]);
+    }, [scrollToIndex, listRef]);
     const itemDataInternal = React.useMemo(() => (Object.assign(Object.assign({}, itemData), { renderedScrollTopRef })), [itemData]);
     const handleOnScroll = React.useCallback(() => {
         scrollLocked.current = scrollTo();
     }, [scrollTo]);
     return (_jsx(VirtualScrollOuterProvider, Object.assign({ value: handleScroll }, { children: _jsx(VariableSizeList, Object.assign({ ref: listRef, "data-testid": "VirtualScrollList", itemData: itemDataInternal, outerElementType: VirtualScrollOuter, innerElementType: VirtualScrollInner, onScroll: handleOnScroll }, restProps, { children: children })) })));
-}
+});
 export default VirtualScrollList;

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

@@ -26,7 +26,8 @@ interface StyledVirtualListProps {
 export declare const StyledVirtualList: import("@emotion/styled").StyledComponent<import("react-window").VariableSizeListProps<any> & {
     setBackdropVisibility: (isVisible: boolean) => void;
     scrollToIndex?: number | undefined;
-} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledVirtualListProps, {}, {}>;
+    listRef?: import("react").RefObject<import("react-window").VariableSizeList<any>> | undefined;
+} & import("react").RefAttributes<import("react-window").VariableSizeList<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & StyledVirtualListProps, {}, {}>;
 export declare const StyledTableRow: import("@emotion/styled").StyledComponent<import("@mui/material").TableRowOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
     ref?: ((instance: HTMLTableRowElement | null) => void) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
 }, "className" | "style" | "classes" | "children" | "sx" | "hover" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
@@ -303,9 +304,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/index.d.ts

@@ -12,6 +12,7 @@ export { default as Dialog, DialogToolbar } from './Dialog';
 export { default as Tooltip } from './Tooltip';
 export * from './RFH';
 export { default as VirtualTable, TableRowLoading, TableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, } from './VirtualTable';
+export { default as SheetViewVirtualTable } from './VirtualTable/SheetViewVirtualTable';
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
 export { default as StatusButton, ChevronIcon, type ChevronIconProps, type StatusButtonIcon, type StatusButtonProps } from './StatusButton';

package/build/components/index.js

@@ -12,6 +12,7 @@ export { default as Dialog, DialogToolbar } from './Dialog';
 export { default as Tooltip } from './Tooltip';
 export * from './RFH';
 export { default as VirtualTable, TableRowLoading, TableHeader, TableLastItem, TableLoading, TableLoadingWithCard, TableNoData, TableNoDataWithCard, LastRowContent, ListItemWrapperWithCard, RowErrorState, StyledItemWrapper, TableRow, TableRowLoadingWithCard, TableRowWithCard, VirtualScrollInner, VirtualScrollList, VirtualScrollOuter, VirtualTableWithCard, Inputs, List, ColumnFilter, StyledCell, } from './VirtualTable';
+export { default as SheetViewVirtualTable } from './VirtualTable/SheetViewVirtualTable';
 export { default as Widget, ListItem, WidgetHeader, WidgetList } from './Widget';
 export { default as TapLogo } from './TapLogo';
 export { default as StatusButton, ChevronIcon } from './StatusButton';

package/build/playground/VTDemo.d.ts

@@ -0,0 +1 @@
+export declare const VTDemo: () => import("react/jsx-runtime").JSX.Element;

package/build/playground/VTDemo.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, VirtualTable } from '../components/index.js';
+import { Box } from '@mui/material';
+export const VTDemo = () => {
+    const [isSheetView, setIsSheetView] = useState(false);
+    const toggleView = () => {
+        setIsSheetView((prev) => !prev);
+    };
+    return (_jsx(Box, Object.assign({ sx: {
+            width: '100%',
+            height: '100vh',
+            overflow: 'auto',
+            flexDirection: 'row',
+            display: 'flex',
+            justifyContent: 'center',
+            p: 3,
+            backgroundColor: 'gray',
+        } }, { children: _jsxs(Box, Object.assign({ "data-testid": "ChargesList", sx: {
+                position: 'relative',
+                display: 'flex',
+                flexDirection: 'column',
+                width: '80%',
+                height: '100%',
+            } }, { children: [_jsx(Button, Object.assign({ onClick: toggleView }, { children: "Toggle" })), _jsx(VirtualTable, { showHeader: true, showFooter: true, footerProps: {
+                        totalCount: 4,
+                        sandboxMode: false,
+                        maximized: false,
+                    }, loadMoreItems: () => Promise.resolve(), isLoading: false, isFetchingNextPage: false, rows: [
+                        { index: '1', date: 'date', order: 'order' },
+                        { index: '2', date: 'date', order: 'order' },
+                        { index: '3', date: 'date', order: 'order' },
+                    ], areAllRowsLoaded: true, columnsSorting: { id: 'asc' }, onColumnSort: () => { }, columns: [
+                        { id: 'index', header: '', width: '28px' },
+                        {
+                            id: 'date',
+                            header: 'Date',
+                            width: '170px',
+                        },
+                        {
+                            id: 'order',
+                            header: 'Order',
+                            width: '170px',
+                            filter: {
+                                onConfirm: undefined,
+                                onClear: () => { },
+                                type: 'inputs',
+                                options: [
+                                    {
+                                        placeholder: 'Order',
+                                        apiKey: 'orderID',
+                                    },
+                                ],
+                                data: {},
+                            },
+                        },
+                    ], error: null, triggerDataRefetch: () => Promise.resolve(), showBackgroundColor: false, tableTitle: "Acceptance-Charges", tableMode: 'sheet', dragControls: undefined, isSheetView: isSheetView })] })) })));
+};

package/build/playground/index.d.ts

@@ -0,0 +1 @@
+export { VTDemo } from './VTDemo';

package/build/playground/index.js

@@ -0,0 +1 @@
+export { VTDemo } from './VTDemo';

package/build/types/table.d.ts

@@ -30,6 +30,8 @@ export interface IColumnProps<R = any> {
     sortable?: boolean;
     hidden?: boolean;
     order?: number;
+    pinned?: boolean;
+    pinnable?: boolean;
     cellStyle?: React.CSSProperties;
     headerStyle?: React.CSSProperties;
     filter?: IColumnFilter;

package/package.json

@@ -1,129 +1,129 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.72",
-  "type": "module",
-  "main": "build/index.js",
-  "module": "build/index.js",
-  "types": "build/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./build/index.d.ts",
-      "import": "./build/index.js",
-      "require": "./build/index.js"
-    },
-    "./constants": {
-      "types": "./build/constants/index.d.ts",
-      "import": "./build/constants/index.js",
-      "require": "./build/constants/index.js"
-    },
-    "./components": {
-      "types": "./build/components/index.d.ts",
-      "import": "./build/components/index.js",
-      "require": "./build/components/index.js"
-    },
-    "./components/*": {
-      "types": "./build/components/*/index.d.ts",
-      "import": "./build/components/*/index.js",
-      "require": "./build/components/*/index.js"
-    },
-    "./hooks": {
-      "types": "./build/hooks/index.d.ts",
-      "import": "./build/hooks/index.js",
-      "require": "./build/hooks/index.js"
-    },
-    "./utils": {
-      "types": "./build/utils/index.d.ts",
-      "import": "./build/utils/index.js",
-      "require": "./build/utils/index.js"
-    },
-    "./theme": {
-      "types": "./build/theme/index.d.ts",
-      "import": "./build/theme/index.js",
-      "require": "./build/theme/index.js"
-    },
-    "./types": {
-      "types": "./build/types/index.d.ts",
-      "import": "./build/types/index.js",
-      "require": "./build/types/index.js"
-    }
-  },
-  "license": "MIT",
-  "author": {
-    "name": "Ahmed Sharkawy",
-    "email": "a.elsharkawy@tap.company"
-  },
-  "files": [
-    "build",
-    "readme.md"
-  ],
-  "scripts": {
-    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
-    "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
-    "dev": "vite",
-    "build": "tsc -b && vite build ",
-    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
-    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
-    "lint": "eslint . --color",
-    "lint:fix": "eslint src --fix --color",
-    "preview": "vite preview",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@hookform/resolvers": "^3.3.1",
-    "@mui/material": "^5.12.3",
-    "@uiw/react-json-view": "^2.0.0-alpha.16",
-    "axios": "^1.4.0",
-    "dayjs": "^1.11.8",
-    "framer-motion": "10.11.0",
-    "i18next": "^22.4.15",
-    "memoize-one": "^6.0.0",
-    "re-resizable": "^6.9.9",
-    "react": "^18.2.0",
-    "react-currency-input-field": "^3.6.11",
-    "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.45.4",
-    "react-hot-toast": "^2.4.1",
-    "react-i18next": "^12.2.2",
-    "react-multi-date-picker": "^4.1.2",
-    "react-router-dom": "^6.14.2",
-    "react-virtualized-auto-sizer": "^1.0.20",
-    "react-window": "^1.8.9",
-    "react-window-infinite-loader": "^1.0.9",
-    "react18-input-otp": "^1.1.4",
-    "recharts": "^2.15.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/lodash": "^4.17.15",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-virtualized-auto-sizer": "^1.0.8",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.14.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8",
-    "tsc-alias": "^1.8.16",
-    "typescript": "5.0.2",
-    "typescript-eslint": "^8.18.2",
-    "vite": "6.0.5",
-    "vite-tsconfig-paths": "^4.2.0"
-  },
-  "lint-staged": {
-    "src/**/*.{ts,tsx,json,js,jsx}": [
-      "yarn run prettier:fix",
-      "yarn run lint"
-    ]
-  }
-}
+{
+  "name": "@tap-payments/os-micro-frontend-shared",
+  "description": "Shared components and utilities for Tap Payments micro frontends",
+  "version": "0.0.73-pin-icon-v2",
+  "type": "module",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/index.js",
+      "require": "./build/index.js"
+    },
+    "./constants": {
+      "types": "./build/constants/index.d.ts",
+      "import": "./build/constants/index.js",
+      "require": "./build/constants/index.js"
+    },
+    "./components": {
+      "types": "./build/components/index.d.ts",
+      "import": "./build/components/index.js",
+      "require": "./build/components/index.js"
+    },
+    "./components/*": {
+      "types": "./build/components/*/index.d.ts",
+      "import": "./build/components/*/index.js",
+      "require": "./build/components/*/index.js"
+    },
+    "./hooks": {
+      "types": "./build/hooks/index.d.ts",
+      "import": "./build/hooks/index.js",
+      "require": "./build/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./build/utils/index.d.ts",
+      "import": "./build/utils/index.js",
+      "require": "./build/utils/index.js"
+    },
+    "./theme": {
+      "types": "./build/theme/index.d.ts",
+      "import": "./build/theme/index.js",
+      "require": "./build/theme/index.js"
+    },
+    "./types": {
+      "types": "./build/types/index.d.ts",
+      "import": "./build/types/index.js",
+      "require": "./build/types/index.js"
+    }
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Ahmed Sharkawy",
+    "email": "a.elsharkawy@tap.company"
+  },
+  "files": [
+    "build",
+    "readme.md"
+  ],
+  "scripts": {
+    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
+    "push": "npm version patch --no-git-tag-version && npm run ts:build && npm publish --access public",
+    "dev": "vite",
+    "build": "tsc -b && vite build ",
+    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
+    "lint": "eslint . --color",
+    "lint:fix": "eslint src --fix --color",
+    "preview": "vite preview",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.1",
+    "@mui/material": "^5.12.3",
+    "@uiw/react-json-view": "^2.0.0-alpha.16",
+    "axios": "^1.4.0",
+    "dayjs": "^1.11.8",
+    "framer-motion": "10.11.0",
+    "i18next": "^22.4.15",
+    "memoize-one": "^6.0.0",
+    "re-resizable": "^6.9.9",
+    "react": "^18.2.0",
+    "react-currency-input-field": "^3.6.11",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.45.4",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^12.2.2",
+    "react-multi-date-picker": "^4.1.2",
+    "react-router-dom": "^6.14.2",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
+    "react18-input-otp": "^1.1.4",
+    "recharts": "^2.15.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/lodash": "^4.17.15",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-virtualized-auto-sizer": "^1.0.8",
+    "@types/react-window": "^1.8.5",
+    "@types/react-window-infinite-loader": "^1.0.6",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
+    "tsc-alias": "^1.8.16",
+    "typescript": "5.0.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "6.0.5",
+    "vite-tsconfig-paths": "^4.2.0"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,json,js,jsx}": [
+      "yarn run prettier:fix",
+      "yarn run lint"
+    ]
+  }
+}