@tap-payments/os-micro-frontend-shared 0.0.81 → 0.0.83

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

@@ -1,2 +1,2 @@
 import { ApplicationStatusCellProps } from './type';
-export default function ApplicationStatusCell({ acceptance, payout, ...props }: ApplicationStatusCellProps): import("react/jsx-runtime").JSX.Element;
+export default function ApplicationStatusCell({ acceptance, payout, hideAcceptance, hidePayout, ...props }: ApplicationStatusCellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -15,8 +15,8 @@ import Tooltip from '../../../Tooltip';
 import TableCell from '../../TableCell';
 import { AppsWrapper, IconWrapper } from './style';
 export default function ApplicationStatusCell(_a) {
-    var { acceptance, payout } = _a, props = __rest(_a, ["acceptance", "payout"]);
+    var { acceptance, payout, hideAcceptance, hidePayout } = _a, props = __rest(_a, ["acceptance", "payout", "hideAcceptance", "hidePayout"]);
     const isAcceptanceEnabled = (acceptance === null || acceptance === void 0 ? void 0 : acceptance.toLowerCase()) === 'enabled';
     const isPayoutEnabled = (payout === null || payout === void 0 ? void 0 : payout.toLowerCase()) === 'enabled';
-    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AppsWrapper, { children: [_jsx(Tooltip, Object.assign({ title: 'Acceptance' }, { children: _jsxs(IconWrapper, { children: [_jsx("img", { src: isAcceptanceEnabled ? acceptanceEnabledIcon : acceptanceDisabledRoundedIcon, alt: acceptance }), ' '] }) }), acceptance), _jsx(Tooltip, Object.assign({ title: 'Payouts' }, { children: _jsx(IconWrapper, { children: _jsx("img", { src: isPayoutEnabled ? payoutEnabledIcon : payoutDisabledRoundedIcon, alt: payout }) }) }), payout)] }) })));
+    return (_jsx(TableCell, Object.assign({}, props, { children: _jsxs(AppsWrapper, { children: [!hideAcceptance && (_jsx(Tooltip, Object.assign({ title: 'Acceptance' }, { children: _jsxs(IconWrapper, { children: [_jsx("img", { src: isAcceptanceEnabled ? acceptanceEnabledIcon : acceptanceDisabledRoundedIcon, alt: acceptance }), ' '] }) }), acceptance)), !hidePayout && (_jsx(Tooltip, Object.assign({ title: 'Payouts' }, { children: _jsx(IconWrapper, { children: _jsx("img", { src: isPayoutEnabled ? payoutEnabledIcon : payoutDisabledRoundedIcon, alt: payout }) }) }), payout))] }) })));
 }

package/build/components/TableCells/CustomCells/ApplicationStatusCell/type.d.ts

@@ -2,4 +2,6 @@ import { TableCellProps } from '@mui/material';
 export type ApplicationStatusCellProps = TableCellProps & {
     acceptance: 'enabled' | 'disabled';
     payout: 'enabled' | 'disabled';
+    hideAcceptance?: boolean;
+    hidePayout?: boolean;
 };

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/SheetView/SheetViewTableHeader.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { type TableHeadProps } from '@mui/material';
+import type { IColumnProps, IVirtualTable } from '../../../types/index.js';
+interface SheetViewTableHeaderProps {
+    columns: IColumnProps[];
+    headerProps?: TableHeadProps;
+    columnsSorting?: IVirtualTable['columnsSorting'];
+    onColumnSort?: IVirtualTable['onColumnSort'];
+    showBackDrop: boolean;
+    pinnedColumns?: string[];
+    onColumnPin?: (columnId: string, position: 'start' | 'end' | 'unpin') => void;
+    isPinnable?: boolean;
+    lastColumnId?: string | null;
+}
+declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeader>;
+export default _default;

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState } from 'react';
+import { Box, useTheme } from '@mui/material';
+import Dropdown from '../../DropdownMenu';
+import { columnIcon, pinIcon, sortAzIcon, sortZaIcon, unpinIcon } from '../../../constants/index.js';
+import ColumnFilter from '../components/ColumnFilter';
+import { StyledCell } from '../style';
+import { ActionIcon, ColumnIcon, PinIconContainer, StyledHeader, StyledMUITableRow } from './style';
+function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, }) {
+    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) => {
+        const isCurrentlyPinned = pinnedColumns.includes(columnId);
+        if (isCurrentlyPinned) {
+            onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'unpin');
+        }
+        else {
+            if (columnId === lastColumnId) {
+                onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'end');
+            }
+            else {
+                onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'start');
+            }
+        }
+    };
+    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);
+                    const isDefaultPinned = !!column.isDefaultPinned;
+                    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, isSheetView: true, sx: Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset' }, headerStyle) }, { children: [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 }), isPinnable && pinnable && !isDefaultPinned && (_jsx(PinIconContainer, Object.assign({ isPinned: isPinned, onClick: () => handlePinClick(id), title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] }), `${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/SheetView/SheetViewVirtualTable.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { IVirtualTable } from '../../../types/index.js';
+interface ISheetViewVirtualTable extends Omit<IVirtualTable, 'isSheetView'> {
+    onColumnPin?: (columnId: string, isPinned: boolean) => void;
+    isPinnable?: boolean;
+    clearBackdropVisibilityTimeout?: number;
+}
+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, clearBackdropVisibilityTimeout, isPinnable, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
+export default _default;

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

@@ -0,0 +1,120 @@
+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 } from 'react';
+import { useTheme } from '@mui/material/styles';
+import memoize from 'memoize-one';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN, TABLE_ROW_HEIGHT } 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, StyledVirtualList, TableContainer, TableWrapper } from '../style';
+import { SheetViewVirtualTableWrapper, PinnedStartColumnWrapper, PinnedEndColumnWrapper, MainTableWrapper, UnpinnedTableHeaderWrapper } from './style';
+import SheetViewTableHeader from './SheetViewTableHeader';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { usePinnedColumns } from './hooks/usePinnedColumns';
+import { useSynchronizedScroll } from './hooks/useSynchronizedScroll';
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned) => ({
+    columns,
+    isLoading,
+    rows,
+    rowProps,
+    scrollToIndex,
+    totalCount,
+    lastItemIndex,
+    isError,
+    areAllRowsLoaded,
+    limit: totalCount,
+    newLoadedRowsEndIndex: lastItemIndex,
+    isSheetView: true,
+    isPinned,
+}));
+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, clearBackdropVisibilityTimeout = 100, isPinnable = false, }) {
+    var _a, _b, _c;
+    const theme = useTheme();
+    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
+    const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
+    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 areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
+    const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
+    const pinnedStartItemData = createItemData(pinnedStartColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true);
+    const pinnedEndItemData = createItemData(pinnedEndColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_b = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _b !== void 0 ? _b : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, true);
+    const unpinnedItemData = createItemData(unpinnedColumnsData, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_c = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _c !== void 0 ? _c : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight, false);
+    const createVirtualTableContainer = useCallback((columnsToRender, containerKey, isPinned = false, fixedWidth) => {
+        const tableItemsCount = itemsCount;
+        const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
+            if (areAllRowsLoaded)
+                return;
+            yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
+        });
+        const currentItemData = containerKey === 'pinnedStart' ? pinnedStartItemData : containerKey === 'pinnedEnd' ? pinnedEndItemData : unpinnedItemData;
+        const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
+        const handleScrollCallback = (scrollProps) => {
+            const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
+            handleScroll(scrollProps, source);
+        };
+        return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: (index) => index !== lastItemIndex, itemCount: tableItemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered }) => (_jsx(AutoSizer, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: tableItemsCount, itemSize: () => rowHeight, 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',
+                    } }, { children: ListItemWrapper }))) })) })));
+    }, [
+        itemsCount,
+        areAllRowsLoaded,
+        loadMoreItems,
+        threshold,
+        rowHeight,
+        pinnedStartItemData,
+        pinnedEndItemData,
+        unpinnedItemData,
+        handleScroll,
+        scrollToIndex,
+        areTotalRowsNotFillingHeight,
+    ]);
+    const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
+    const pinnedStartColumnsWidth = useMemo(() => pinnedStartColumnsData.reduce((acc, col) => {
+        const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
+        return acc + width;
+    }, 0), [pinnedStartColumnsData]);
+    const pinnedEndColumnsWidth = useMemo(() => pinnedEndColumnsData.reduce((acc, col) => {
+        const width = typeof col.width === 'string' ? parseInt(col.width) : col.width || 100;
+        return acc + width;
+    }, 0), [pinnedEndColumnsData]);
+    const renderPinnedColumn = (position, columnsData, columnsWidth, pinnedColumnsList) => {
+        const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;
+        const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
+        if (columnsData.length === 0)
+            return null;
+        return (_jsx(Wrapper, Object.assign({ width: columnsWidth }, { 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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, 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 })), _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(columnsData, containerKey, true, columnsWidth) })) }))] })) })));
+    };
+    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(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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { 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 }) })), _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])] })), !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/SheetView/hooks/usePinnedColumns.d.ts

@@ -0,0 +1,11 @@
+import type { IColumnProps } from '../../../../types/index.js';
+export declare const usePinnedColumns: (columns: readonly IColumnProps[], isPinnable: boolean, onColumnPin?: ((columnId: string, isPinned: boolean) => void) | undefined) => {
+    pinnedStartColumns: string[];
+    pinnedEndColumns: string[];
+    handleColumnPin: (columnId: string, position?: 'start' | 'end' | 'unpin') => void;
+    pinnedStartColumnsData: IColumnProps<any>[];
+    pinnedEndColumnsData: IColumnProps<any>[];
+    unpinnedColumnsData: IColumnProps<any>[];
+    orderedColumns: IColumnProps<any>[];
+    lastColumnId: string | null;
+};

package/build/components/VirtualTable/SheetView/hooks/usePinnedColumns.js

@@ -0,0 +1,62 @@
+import { useState, useCallback, useMemo } from 'react';
+export const usePinnedColumns = (columns, isPinnable, onColumnPin) => {
+    const [pinnedStartColumns, setPinnedStartColumns] = useState(() => {
+        const userPinned = isPinnable ? columns.filter((c) => c.pinned === 'start').map((c) => c.id) : [];
+        const defaultPinned = columns.filter((c) => c.isDefaultPinned).map((c) => c.id);
+        return Array.from(new Set([...defaultPinned, ...userPinned]));
+    });
+    const [pinnedEndColumns, setPinnedEndColumns] = useState(() => {
+        return isPinnable ? columns.filter((c) => c.pinned === 'end').map((c) => c.id) : [];
+    });
+    const handleColumnPin = useCallback((columnId, position = 'start') => {
+        if (!isPinnable)
+            return;
+        let newPinnedStart = [...pinnedStartColumns];
+        let newPinnedEnd = [...pinnedEndColumns];
+        if (position === 'unpin') {
+            newPinnedStart = newPinnedStart.filter((id) => id !== columnId);
+            newPinnedEnd = newPinnedEnd.filter((id) => id !== columnId);
+        }
+        else if (position === 'start') {
+            newPinnedStart = [...newPinnedStart.filter((id) => id !== columnId), columnId];
+            newPinnedEnd = newPinnedEnd.filter((id) => id !== columnId);
+        }
+        else if (position === 'end') {
+            newPinnedEnd = [...newPinnedEnd.filter((id) => id !== columnId), columnId];
+            newPinnedStart = newPinnedStart.filter((id) => id !== columnId);
+        }
+        setPinnedStartColumns(newPinnedStart);
+        setPinnedEndColumns(newPinnedEnd);
+        const isPinned = newPinnedStart.includes(columnId) || newPinnedEnd.includes(columnId);
+        onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, isPinned);
+    }, [pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable]);
+    const shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+    const { pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData } = useMemo(() => {
+        const start = shownColumns.filter((column) => pinnedStartColumns.includes(column.id));
+        const end = shownColumns.filter((column) => pinnedEndColumns.includes(column.id));
+        const unpinned = shownColumns.filter((column) => !pinnedStartColumns.includes(column.id) && !pinnedEndColumns.includes(column.id));
+        const sortedStart = start.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); });
+        const sortedEnd = end.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); });
+        const sortedUnpinned = unpinned.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); });
+        return {
+            pinnedStartColumnsData: sortedStart,
+            pinnedEndColumnsData: sortedEnd,
+            unpinnedColumnsData: sortedUnpinned,
+        };
+    }, [shownColumns, pinnedStartColumns, pinnedEndColumns]);
+    const orderedColumns = useMemo(() => [...pinnedStartColumnsData, ...unpinnedColumnsData, ...pinnedEndColumnsData], [pinnedStartColumnsData, unpinnedColumnsData, pinnedEndColumnsData]);
+    const lastColumnId = useMemo(() => {
+        const lastCol = orderedColumns[orderedColumns.length - 1];
+        return lastCol ? lastCol.id : null;
+    }, [orderedColumns]);
+    return {
+        pinnedStartColumns,
+        pinnedEndColumns,
+        handleColumnPin,
+        pinnedStartColumnsData,
+        pinnedEndColumnsData,
+        unpinnedColumnsData,
+        orderedColumns,
+        lastColumnId,
+    };
+};

package/build/components/VirtualTable/SheetView/hooks/useSynchronizedScroll.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { VariableSizeList, ListOnScrollProps } from 'react-window';
+export declare const useSynchronizedScroll: () => {
+    pinnedStartVirtualListRef: import("react").RefObject<VariableSizeList<any>>;
+    scrollableVirtualListRef: import("react").RefObject<VariableSizeList<any>>;
+    pinnedEndVirtualListRef: import("react").RefObject<VariableSizeList<any>>;
+    handleScroll: ({ scrollOffset }: ListOnScrollProps, source: 'start' | 'end' | 'scrollable') => void;
+};

package/build/components/VirtualTable/SheetView/hooks/useSynchronizedScroll.js

@@ -0,0 +1,30 @@
+import { useRef, useCallback } from 'react';
+export const useSynchronizedScroll = () => {
+    const pinnedStartVirtualListRef = useRef(null);
+    const scrollableVirtualListRef = useRef(null);
+    const pinnedEndVirtualListRef = useRef(null);
+    const isScrollingSyncRef = useRef(false);
+    const handleScroll = useCallback(({ scrollOffset }, source) => {
+        if (isScrollingSyncRef.current)
+            return;
+        isScrollingSyncRef.current = true;
+        if (source !== 'start' && pinnedStartVirtualListRef.current) {
+            pinnedStartVirtualListRef.current.scrollTo(scrollOffset);
+        }
+        if (source !== 'end' && pinnedEndVirtualListRef.current) {
+            pinnedEndVirtualListRef.current.scrollTo(scrollOffset);
+        }
+        if (source !== 'scrollable' && scrollableVirtualListRef.current) {
+            scrollableVirtualListRef.current.scrollTo(scrollOffset);
+        }
+        requestAnimationFrame(() => {
+            isScrollingSyncRef.current = false;
+        });
+    }, []);
+    return {
+        pinnedStartVirtualListRef,
+        scrollableVirtualListRef,
+        pinnedEndVirtualListRef,
+        handleScroll,
+    };
+};

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

@@ -0,0 +1,3 @@
+export { default as SheetViewVirtualTable } from './SheetViewVirtualTable';
+export { default as SheetViewTableHeader } from './SheetViewTableHeader';
+export * from './style';

package/build/components/VirtualTable/SheetView/index.js

@@ -0,0 +1,3 @@
+export { default as SheetViewVirtualTable } from './SheetViewVirtualTable';
+export { default as SheetViewTableHeader } from './SheetViewTableHeader';
+export * from './style';

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

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+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>, {}>;
+export declare const PinIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isPinned: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+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 StyledMUITableRowProps {
+    component: string;
+}
+export declare const StyledMUITableRow: 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> & StyledMUITableRowProps, {}, {}>;
+export declare const SheetViewVirtualTableWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PinnedStartColumnWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    width: number;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, {}, {}>;
+export declare const PinnedEndColumnWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    width: number;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, {}, {}>;
+export declare const MainTableWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    hasPinnedStart: boolean;
+    hasPinnedEnd: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const UnpinnedTableHeaderWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};