@tap-payments/os-micro-frontend-shared 0.1.133-test.10 → 0.1.133-test.3

package/LICENSE

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

package/README.md

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

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

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { SHEET_VIEW_TABLE_THRESHOLD } from '../../../constants/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import { SheetViewTableContainer } from '../components/style';
 import { SheetViewVirtualTableWrapper } from './style';
-import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths } from './hooks';
+import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths, usePerformanceOptimizations, } from './hooks';
 import { PinnedColumn, MainTable, LoadingMainTable, NoDataView, VirtualTable } from './components';
 function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, }) {
+    const { stableColumns, columnMetrics, createStableCallback } = usePerformanceOptimizations(columns);
     const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
     const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView, lastItemIndex, areTotalRowsNotFillingHeight, itemsCount, isDelayedFetchingNextPage, } = useTableData({
         rows,
@@ -15,7 +16,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         isFetchingNextPage,
         areAllRowsLoaded,
     });
-    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
+    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(stableColumns, isPinnable, onColumnPin);
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
     const { pinnedStartColumnsWidth, pinnedEndColumnsWidth } = usePinnedColumnsWidths(pinnedStartColumnsData, pinnedEndColumnsData);
     const { getItemSize, getItemDataForContainer } = useVirtualTableContainer({
@@ -37,41 +38,43 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
     const onPointerDown = (e) => {
         dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
-    const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
-        const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
-        const handleScrollCallback = (scrollProps) => {
-            const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
-            handleScroll(scrollProps, source);
-        };
-        return (_jsx(VirtualTable, { columnsData: columnsData, itemCount: itemsCount, lastItemIndex: lastItemIndex, areAllRowsLoaded: areAllRowsLoaded, loadMoreItems: loadMoreItems, threshold: threshold, getItemSize: getItemSize, getItemData: getItemDataForContainer, isPinned: isPinned, fixedWidth: fixedWidth, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, onScroll: handleScrollCallback, setBackdropVisibility: setShowBackdrop, listRef: listRef, overscanCount: overscanCount }));
-    }, [
-        itemsCount,
-        lastItemIndex,
+    const stableOnColumnSort = useMemo(() => (onColumnSort ? createStableCallback('onColumnSort', onColumnSort) : undefined), [onColumnSort, createStableCallback]);
+    const stableOnColumnPin = useMemo(() => handleColumnPin
+        ? createStableCallback('handleColumnPin', handleColumnPin)
+        :
+            createStableCallback('noopColumnPin', () => { }), [handleColumnPin, createStableCallback]);
+    const stableOnColumnClick = useMemo(() => (handleColumnClick ? createStableCallback('handleColumnClick', handleColumnClick) : undefined), [handleColumnClick, createStableCallback]);
+    const baseCommonProps = useMemo(() => ({
+        showHeader,
+        columnsSorting,
+        onColumnSort: stableOnColumnSort,
+        headerProps,
+        showBackDrop,
+        onColumnPin: stableOnColumnPin,
+        isPinnable,
+        lastColumnId,
+        selectedColumn,
+        onColumnClick: stableOnColumnClick,
+        tableTitle,
         areAllRowsLoaded,
-        loadMoreItems,
-        threshold,
-        getItemSize,
-        getItemDataForContainer,
+        isFetchingNextPage,
         scrollToIndex,
-        areTotalRowsNotFillingHeight,
-        clearBackdropVisibilityTimeout,
-        handleScroll,
-        setShowBackdrop,
-        pinnedStartVirtualListRef,
-        pinnedEndVirtualListRef,
-        scrollableVirtualListRef,
-    ]);
-    const baseCommonProps = {
+        isLoading,
+        isError,
+        tableMode,
+        showNoDataView,
+        tableBodyStyles,
+    }), [
         showHeader,
         columnsSorting,
-        onColumnSort,
+        stableOnColumnSort,
         headerProps,
         showBackDrop,
-        onColumnPin: handleColumnPin,
+        stableOnColumnPin,
         isPinnable,
-        lastColumnId,
+        columnMetrics.lastColumnId,
         selectedColumn,
-        onColumnClick: handleColumnClick,
+        stableOnColumnClick,
         tableTitle,
         areAllRowsLoaded,
         isFetchingNextPage,
@@ -81,9 +84,44 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         tableMode,
         showNoDataView,
         tableBodyStyles,
-    };
-    const commonPropsWithTableStates = Object.assign(Object.assign({}, baseCommonProps), { hasTimeoutError,
-        tableLoading });
-    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, { children: showNoDataView ? (tableLoading ? (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(LoadingMainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) : (_jsx(NoDataView, Object.assign({ tableLoading: tableLoading, tableError: tableError, tableEmpty: tableEmpty, hasTimeoutError: hasTimeoutError, orderedColumns: orderedColumns, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }, baseCommonProps)))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(MainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+    ]);
+    const commonPropsWithTableStates = useMemo(() => (Object.assign(Object.assign({}, baseCommonProps), { hasTimeoutError,
+        tableLoading })), [baseCommonProps, hasTimeoutError, tableLoading]);
+    const virtualTableBaseProps = useMemo(() => ({
+        itemCount: itemsCount,
+        lastItemIndex,
+        areAllRowsLoaded,
+        loadMoreItems,
+        threshold,
+        getItemSize,
+        getItemData: getItemDataForContainer,
+        scrollToIndex,
+        areTotalRowsNotFillingHeight,
+        clearBackdropVisibilityTimeout,
+        setBackdropVisibility: setShowBackdrop,
+        overscanCount,
+    }), [
+        itemsCount,
+        lastItemIndex,
+        areAllRowsLoaded,
+        loadMoreItems,
+        threshold,
+        getItemSize,
+        getItemDataForContainer,
+        scrollToIndex,
+        areTotalRowsNotFillingHeight,
+        clearBackdropVisibilityTimeout,
+        setShowBackdrop,
+        overscanCount,
+    ]);
+    const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
+        const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
+        const handleScrollCallback = (scrollProps) => {
+            const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
+            handleScroll(scrollProps, source);
+        };
+        return (_jsx(VirtualTable, Object.assign({}, virtualTableBaseProps, { columnsData: columnsData, isPinned: isPinned, fixedWidth: fixedWidth, onScroll: handleScrollCallback, listRef: listRef })));
+    }, [virtualTableBaseProps, handleScroll, pinnedStartVirtualListRef, pinnedEndVirtualListRef, scrollableVirtualListRef]);
+    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, { children: showNoDataView ? (tableLoading ? (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, { position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates })), _jsx(LoadingMainTable, { hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, commonProps: commonPropsWithTableStates }), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, { position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates }))] })) : (_jsx(NoDataView, { tableLoading: tableLoading, tableError: tableError, tableEmpty: tableEmpty, hasTimeoutError: hasTimeoutError, orderedColumns: orderedColumns, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps, commonProps: baseCommonProps }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, { position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates })), _jsx(MainTable, { hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates }), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, { position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates }))] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
 }
 export default memo(SheetViewVirtualTable);

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { LoadingMainTableProps } from '../types';
-declare function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, }: LoadingMainTableProps): import("react/jsx-runtime").JSX.Element;
+declare function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, pinnedStartColumns, pinnedEndColumns, commonProps, }: LoadingMainTableProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof LoadingMainTable>;
 export default _default;

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

@@ -5,8 +5,9 @@ import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style'
 import { MainTableWrapper, UnpinnedTableHeaderWrapper } from '../style';
 import SheetViewTableHeader from './SheetViewTableHeader';
 import SheetViewTableLoading from './SheetViewTableLoading';
-function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, }) {
+function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, pinnedStartColumns, pinnedEndColumns, commonProps, }) {
     const theme = useTheme();
+    const { showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, } = commonProps;
     return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox_Loading", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
                             width: '100%',
                             minWidth: 'fit-content',

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { MainTableProps } from '../types';
-declare function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, tableLoading, createVirtualTableContainer, }: MainTableProps): import("react/jsx-runtime").JSX.Element;
+declare function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, pinnedStartColumns, pinnedEndColumns, createVirtualTableContainer, commonProps, }: MainTableProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof MainTable>;
 export default _default;

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

@@ -5,8 +5,9 @@ import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style'
 import { MainTableWrapper, UnpinnedTableHeaderWrapper } from '../style';
 import SheetViewTableHeader from './SheetViewTableHeader';
 import SheetViewTableLoading from './SheetViewTableLoading';
-function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, tableLoading, createVirtualTableContainer, }) {
+function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, pinnedStartColumns, pinnedEndColumns, createVirtualTableContainer, commonProps, }) {
     const theme = useTheme();
+    const { showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, tableLoading, } = commonProps;
     return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                             width: '100%',
                             minWidth: 'fit-content',

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { NoDataViewProps } from '../types';
-declare function NoDataView({ tableLoading, tableError, tableEmpty, hasTimeoutError, orderedColumns, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, tableMode, tableBodyStyles, error, triggerDataRefetch, footerProps, }: NoDataViewProps): import("react/jsx-runtime").JSX.Element;
+declare function NoDataView({ tableLoading, tableError, tableEmpty, hasTimeoutError, orderedColumns, error, triggerDataRefetch, footerProps, commonProps, }: NoDataViewProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof NoDataView>;
 export default _default;

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

@@ -5,8 +5,9 @@ import { StyledTableBox, TableWrapper } from '../../components/style';
 import { UnpinnedTableHeaderWrapper } from '../style';
 import TableNoData from '../../components/TableNoData';
 import SheetViewTableHeader from './SheetViewTableHeader';
-function NoDataView({ tableLoading, tableError, tableEmpty, hasTimeoutError, orderedColumns, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, tableMode, tableBodyStyles, error, triggerDataRefetch, footerProps, }) {
+function NoDataView({ tableLoading, tableError, tableEmpty, hasTimeoutError, orderedColumns, error, triggerDataRefetch, footerProps, commonProps, }) {
     const theme = useTheme();
+    const { showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, tableMode, tableBodyStyles, } = commonProps;
     const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
     return (_jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: tableBodyStyles }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [], onColumnPin: onColumnPin, isPinnable: false, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick }) })), _jsx(TableNoData, { error: error || null, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch || (() => Promise.resolve()), footerProps: footerProps })] })) })));
 }

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { PinnedColumnProps } from '../types';
-declare function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, hasPinnedStart, hasPinnedEnd, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableLoading, createVirtualTableContainer, }: PinnedColumnProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList, hasPinnedStart, hasPinnedEnd, createVirtualTableContainer, commonProps, }: PinnedColumnProps): import("react/jsx-runtime").JSX.Element | null;
 declare const _default: import("react").MemoExoticComponent<typeof PinnedColumn>;
 export default _default;

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

@@ -5,8 +5,9 @@ import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style'
 import { PinnedStartColumnWrapper, PinnedEndColumnWrapper } from '../style';
 import SheetViewTableHeader from './SheetViewTableHeader';
 import SheetViewTableLoading from './SheetViewTableLoading';
-function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, hasPinnedStart, hasPinnedEnd, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableLoading, createVirtualTableContainer, }) {
+function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList, hasPinnedStart, hasPinnedEnd, createVirtualTableContainer, commonProps, }) {
     const theme = useTheme();
+    const { showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableLoading, } = commonProps;
     if (columnsData.length === 0)
         return null;
     const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;

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

@@ -1,12 +1,95 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { StyledHeader, StyledMUITableRow } from '../style';
 import SheetViewTableHeaderCell from './SheetViewTableHeaderCell';
 function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
-    return (_jsx(StyledHeader, Object.assign({ component: "nav", "data-testid": "SheetViewVirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { children: _jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "SheetViewVirtualTable_TableHeader_StyledMUITableRow" }, { children: columns.map((column, colIndex) => {
-                var _a;
-                const columnKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${colIndex}`;
-                return (_jsx(SheetViewTableHeaderCell, { column: column, colIndex: colIndex, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === columnKey, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick }, `${column.id}-${colIndex}`));
-            }) })) })));
+    const [openFilterColumn, setOpenFilterColumn] = useState(null);
+    const [filterElements, setFilterElements] = useState({});
+    const handleFilterOpen = useCallback((columnId, element) => {
+        setOpenFilterColumn(columnId);
+        setFilterElements((prev) => (Object.assign(Object.assign({}, prev), { [columnId]: element })));
+    }, []);
+    const handleFilterClose = useCallback((columnId) => {
+        setOpenFilterColumn(null);
+        setFilterElements((prev) => {
+            const _a = prev, _b = columnId, removed = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+            return rest;
+        });
+    }, []);
+    const columnElements = useMemo(() => {
+        return columns.map((column, colIndex) => {
+            var _a;
+            const columnKey = `${(_a = column.pinned) !== null && _a !== void 0 ? _a : 'default'}-${colIndex}`;
+            const columnId = column.id;
+            const isFilterOpen = openFilterColumn === columnId;
+            const filterElement = isFilterOpen ? filterElements[columnId] : null;
+            return (_jsx(SheetViewTableHeaderCell, { column: column, colIndex: colIndex, isFirst: column.id === columns[0].id, isLast: column.id === columns[columns.length - 1].id, isDefaultPinned: !!column.isDefaultPinned, isSelected: selectedColumn === columnKey, onColumnSort: onColumnSort, columnsSorting: columnsSorting, pinnedColumns: pinnedColumns, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, onColumnClick: onColumnClick, columnFilterEl: filterElement, onFilterOpen: handleFilterOpen, onFilterClose: handleFilterClose }, `${columnId}-${colIndex}`));
+        });
+    }, [
+        columns,
+        selectedColumn,
+        onColumnSort,
+        columnsSorting,
+        pinnedColumns,
+        onColumnPin,
+        isPinnable,
+        lastColumnId,
+        onColumnClick,
+        openFilterColumn,
+        filterElements,
+        handleFilterOpen,
+        handleFilterClose,
+    ]);
+    return (_jsx(StyledHeader, Object.assign({ component: "nav", "data-testid": "SheetViewVirtualTable_TableHeader_StyledHeader", showBackDrop: showBackDrop }, headerProps, { children: _jsx(StyledMUITableRow, Object.assign({ component: "section", "data-testid": "SheetViewVirtualTable_TableHeader_StyledMUITableRow" }, { children: columnElements })) })));
 }
-export default memo(SheetViewTableHeader);
+function areHeaderEqual(prevProps, nextProps) {
+    if (prevProps.showBackDrop !== nextProps.showBackDrop ||
+        prevProps.isPinnable !== nextProps.isPinnable ||
+        prevProps.lastColumnId !== nextProps.lastColumnId ||
+        prevProps.selectedColumn !== nextProps.selectedColumn ||
+        prevProps.onColumnSort !== nextProps.onColumnSort ||
+        prevProps.onColumnPin !== nextProps.onColumnPin ||
+        prevProps.onColumnClick !== nextProps.onColumnClick) {
+        return false;
+    }
+    if (prevProps.columns.length !== nextProps.columns.length) {
+        return false;
+    }
+    for (let i = 0; i < prevProps.columns.length; i++) {
+        const prevCol = prevProps.columns[i];
+        const nextCol = nextProps.columns[i];
+        if (prevCol.id !== nextCol.id ||
+            prevCol.header !== nextCol.header ||
+            prevCol.width !== nextCol.width ||
+            prevCol.pinned !== nextCol.pinned ||
+            prevCol.sortable !== nextCol.sortable ||
+            prevCol.pinnable !== nextCol.pinnable ||
+            prevCol.hidden !== nextCol.hidden ||
+            prevCol.order !== nextCol.order ||
+            prevCol.isDefaultPinned !== nextCol.isDefaultPinned) {
+            return false;
+        }
+        if (prevCol.filter !== nextCol.filter) {
+            if (!prevCol.filter || !nextCol.filter)
+                return false;
+            if (prevCol.filter.type !== nextCol.filter.type || JSON.stringify(prevCol.filter.data) !== JSON.stringify(nextCol.filter.data)) {
+                return false;
+            }
+        }
+    }
+    return (JSON.stringify(prevProps.pinnedColumns) === JSON.stringify(nextProps.pinnedColumns) &&
+        JSON.stringify(prevProps.columnsSorting) === JSON.stringify(nextProps.columnsSorting) &&
+        JSON.stringify(prevProps.headerProps) === JSON.stringify(nextProps.headerProps));
+}
+export default memo(SheetViewTableHeader, areHeaderEqual);

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

@@ -8,7 +8,10 @@ interface SheetViewTableHeaderCellProps extends Pick<SheetViewTableHeaderProps,
     isLast: boolean;
     isSelected: boolean;
     isDefaultPinned: boolean;
+    columnFilterEl?: HTMLElement | null;
+    onFilterOpen?: (columnId: string, element: HTMLElement) => void;
+    onFilterClose?: (columnId: string) => void;
 }
-declare function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, pinned }, colIndex, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }: SheetViewTableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, pinned }, colIndex, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, columnFilterEl, onFilterOpen, onFilterClose, }: SheetViewTableHeaderCellProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableHeaderCell>;
 export default _default;

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

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useMemo, useRef } from 'react';
 import Box from '@mui/material/Box';
 import { pinIcon, unpinIcon } from '../../../../constants/index.js';
 import ColumnFilter from '../../components/ColumnFilter';
 import { StyledCell, TableHeaderInner } from '../../components/style';
 import { PinIconContainer, HeaderText } from '../style';
 import ColumnSort from '../../components/ColumnSort';
-function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, pinned }, colIndex, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }) {
-    const [columnFilterEl, setColumnFilterEl] = useState(null);
+function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order, pinned }, colIndex, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, columnFilterEl, onFilterOpen, onFilterClose, }) {
     const cellRef = useRef(null);
-    const checkIsPanned = useCallback((columnId) => pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.includes(columnId), [pinnedColumns]);
-    const isPinned = useMemo(() => checkIsPanned(id), [id, checkIsPanned]);
-    const handlePinClick = (columnId) => {
-        if (checkIsPanned(columnId)) {
+    const isPinned = useMemo(() => {
+        var _a;
+        return (_a = pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.includes(id)) !== null && _a !== void 0 ? _a : false;
+    }, [pinnedColumns, id]);
+    const handlePinClick = useCallback((columnId) => {
+        if (pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.includes(columnId)) {
             onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'unpin');
         }
         else {
@@ -23,19 +24,34 @@ function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, so
                 onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'start');
             }
         }
-    };
-    const onOpenFilterDropdown = () => {
-        setColumnFilterEl(cellRef.current);
-    };
-    const handleCellClick = (event) => {
+    }, [pinnedColumns, onColumnPin, lastColumnId]);
+    const onOpenFilterDropdown = useCallback(() => {
+        if (cellRef.current) {
+            onFilterOpen === null || onFilterOpen === void 0 ? void 0 : onFilterOpen(id, cellRef.current);
+        }
+    }, [onFilterOpen, id]);
+    const handleCellClick = useCallback((event) => {
         if (event.target === event.currentTarget) {
             onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, event, pinned);
         }
-    };
-    const handleHeaderInnerClick = (event) => {
+    }, [onColumnClick, colIndex, pinned]);
+    const handleHeaderInnerClick = useCallback((event) => {
         event.stopPropagation();
         onOpenFilterDropdown();
-    };
+    }, [onOpenFilterDropdown]);
+    const handlePinClickMemoized = useCallback((event) => {
+        event.stopPropagation();
+        handlePinClick(id);
+    }, [handlePinClick, id]);
+    const stableFilterProps = useMemo(() => {
+        if (!filter)
+            return null;
+        return Object.assign(Object.assign({}, filter), { anchorEl: columnFilterEl || null, setAnchorEl: (element) => {
+                if (element === null) {
+                    onFilterClose === null || onFilterClose === void 0 ? void 0 : onFilterClose(id);
+                }
+            } });
+    }, [filter, columnFilterEl, onFilterClose, id]);
     return (_jsx(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, ref: cellRef, onClick: handleCellClick, sx: (theme) => (Object.assign({ display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width, textAlign: align, overflow: 'unset', cursor: 'pointer', boxSizing: 'border-box', border: '0.5px solid transparent', borderColor: isSelected ? '#1F88D0' : '#F2F2F2', borderBottom: isSelected ? '0.5px solid transparent' : '0.5px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', minHeight: '28px', position: 'relative', '&:before': {
                 content: '""',
                 borderBottom: 'none',
@@ -44,11 +60,40 @@ function SheetViewTableHeaderCell({ column: { header, id, align, headerStyle, so
                 right: 0,
                 left: 0,
                 bottom: 0,
-            } }, headerStyle)) }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: handleHeaderInnerClick }, { 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(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter, { anchorEl: columnFilterEl, setAnchorEl: setColumnFilterEl })), sortable && (_jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: (e) => {
-                        onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(colIndex, e, pinned);
-                    } })), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
-                        event.stopPropagation();
-                        handlePinClick(id);
-                    }, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] })) })));
+            } }, headerStyle)) }, { children: _jsxs(TableHeaderInner, Object.assign({ onClick: handleHeaderInnerClick }, { 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(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && stableFilterProps && _jsx(ColumnFilter, Object.assign({}, stableFilterProps)), sortable && _jsx(ColumnSort, { columnId: id, onColumnSort: onColumnSort, columnsSorting: columnsSorting, onClick: handleCellClick }), isPinnable && pinnable && !isDefaultPinned && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: handlePinClickMemoized, title: isPinned ? 'Unpin column' : 'Pin column' }, { children: _jsx("img", { src: isPinned ? unpinIcon : pinIcon, alt: "pin-icon" }) })))] })) })));
+}
+function areEqual(prevProps, nextProps) {
+    if (prevProps.column.id !== nextProps.column.id ||
+        prevProps.column.header !== nextProps.column.header ||
+        prevProps.column.width !== nextProps.column.width ||
+        prevProps.column.pinned !== nextProps.column.pinned ||
+        prevProps.column.sortable !== nextProps.column.sortable ||
+        prevProps.column.pinnable !== nextProps.column.pinnable ||
+        prevProps.column.hidden !== nextProps.column.hidden ||
+        prevProps.column.order !== nextProps.column.order) {
+        return false;
+    }
+    if (prevProps.column.filter !== nextProps.column.filter) {
+        if (!prevProps.column.filter || !nextProps.column.filter)
+            return false;
+        if (JSON.stringify(prevProps.column.filter) !== JSON.stringify(nextProps.column.filter)) {
+            return false;
+        }
+    }
+    return (prevProps.colIndex === nextProps.colIndex &&
+        prevProps.isFirst === nextProps.isFirst &&
+        prevProps.isLast === nextProps.isLast &&
+        prevProps.isSelected === nextProps.isSelected &&
+        prevProps.isDefaultPinned === nextProps.isDefaultPinned &&
+        prevProps.isPinnable === nextProps.isPinnable &&
+        prevProps.lastColumnId === nextProps.lastColumnId &&
+        prevProps.columnFilterEl === nextProps.columnFilterEl &&
+        prevProps.onColumnSort === nextProps.onColumnSort &&
+        prevProps.onColumnPin === nextProps.onColumnPin &&
+        prevProps.onColumnClick === nextProps.onColumnClick &&
+        prevProps.onFilterOpen === nextProps.onFilterOpen &&
+        prevProps.onFilterClose === nextProps.onFilterClose &&
+        JSON.stringify(prevProps.pinnedColumns) === JSON.stringify(nextProps.pinnedColumns) &&
+        JSON.stringify(prevProps.columnsSorting) === JSON.stringify(nextProps.columnsSorting));
 }
-export default memo(SheetViewTableHeaderCell);
+export default memo(SheetViewTableHeaderCell, areEqual);

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

@@ -8,26 +8,29 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import InfiniteLoader from 'react-window-infinite-loader';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { SHEET_VIEW_TABLE_LIST_OVER_SCAN } from '../../../../constants/index.js';
 import ListItemWrapper from '../../components/virtualScroll/ListItemWrapper';
 import { StyledVirtualList } from '../../components/style';
 function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded, loadMoreItems, threshold, getItemSize, getItemData, isPinned, fixedWidth, scrollToIndex, areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout, onScroll, setBackdropVisibility, listRef, overscanCount = SHEET_VIEW_TABLE_LIST_OVER_SCAN, }) {
-    const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
+    const handleOnLoadMoreItems = useCallback(() => __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 !== lastItemIndex, itemCount: itemCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref }, { children: ({ height, width }) => {
-                const itemSize = (index) => getItemSize(index, height);
-                const itemData = getItemData(columnsData, isPinned, height);
-                return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemCount, itemSize: itemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: overscanCount, setBackdropVisibility: setBackdropVisibility, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: onScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: {
-                        overflowX: isPinned ? 'hidden' : 'auto',
-                        paddingBottom: isPinned ? '25px' : '13px',
-                        backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',
-                    } }, { children: ListItemWrapper })));
-            } }))) })));
+    }), [areAllRowsLoaded, loadMoreItems]);
+    const isItemLoaded = useCallback((index) => index !== lastItemIndex, [lastItemIndex]);
+    const listStyle = useMemo(() => ({
+        overflowX: isPinned ? 'hidden' : 'auto',
+        paddingBottom: isPinned ? '25px' : '13px',
+        backgroundColor: isPinned ? 'transparent' : '#F6F8FACC',
+    }), [isPinned]);
+    return (_jsx(InfiniteLoader, Object.assign({ isItemLoaded: isItemLoaded, itemCount: itemCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref }, { children: ({ height, width }) => (_jsx(MemoizedVirtualList, { listRef: listRef, height: height, width: fixedWidth || width, itemCount: itemCount, getItemSize: getItemSize, getItemData: getItemData, columnsData: columnsData, isPinned: isPinned, onItemsRendered: onItemsRendered, overscanCount: overscanCount, setBackdropVisibility: setBackdropVisibility, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, onScroll: onScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, listStyle: listStyle })) }))) })));
 }
+const MemoizedVirtualList = memo(function MemoizedVirtualList({ listRef, height, width, itemCount, getItemSize, getItemData, columnsData, isPinned, onItemsRendered, overscanCount, setBackdropVisibility, scrollToIndex, areTotalRowsNotFillingHeight, onScroll, clearBackdropVisibilityTimeout, listStyle, }) {
+    const itemSize = useCallback((index) => getItemSize(index, height), [getItemSize, height]);
+    const itemData = useMemo(() => getItemData(columnsData, isPinned, height), [getItemData, columnsData, isPinned, height]);
+    return (_jsx(StyledVirtualList, Object.assign({ listRef: listRef, height: height, width: width, itemCount: itemCount, itemSize: itemSize, itemData: itemData, onItemsRendered: onItemsRendered, overscanCount: overscanCount, setBackdropVisibility: setBackdropVisibility, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, useIsScrolling: true, onScroll: onScroll, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, style: listStyle }, { children: ListItemWrapper })));
+});
 export default memo(VirtualTable);