@tap-payments/os-micro-frontend-shared 0.0.257 → 0.0.258-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/Menu/Menu.d.ts

@@ -5,6 +5,6 @@ interface MenuProps extends PopperProps {
     children: ReactNode;
     popperSx?: SxProps<Theme>;
 }
-declare function Menu({ open, anchorEl, children, sx, placement, popperSx }: MenuProps): import("react/jsx-runtime").JSX.Element;
+declare function Menu({ open, anchorEl, children, sx, placement, popperSx, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Menu>;
 export default _default;

package/build/components/Menu/Menu.js

@@ -1,8 +1,20 @@
+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 Popper from '@mui/material/Popper';
 import { Dropdown } from './style';
-function Menu({ open, anchorEl, children, sx, placement, popperSx }) {
-    return (_jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: placement || 'bottom-start', sx: popperSx }, { children: _jsx(Dropdown, Object.assign({ sx: sx }, { children: children })) }), "menu"));
+function Menu(_a) {
+    var { open, anchorEl, children, sx, placement, popperSx } = _a, props = __rest(_a, ["open", "anchorEl", "children", "sx", "placement", "popperSx"]);
+    return (_jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: placement || 'bottom-start', sx: popperSx }, props, { children: _jsx(Dropdown, Object.assign({ className: "MuiPopper-dropdown", sx: sx }, { children: children })) }), "menu"));
 }
 export default memo(Menu);

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

@@ -13,7 +13,11 @@ interface SheetViewTableHeaderProps {
     lastColumnId?: string | null;
     selectedColumn?: string | null;
     onColumnClick?: (columnId: string, event: React.MouseEvent) => void;
+    openFilterColumnId?: string | null;
+    filterAnchorEl?: HTMLElement | null;
+    onFilterOpen?: (columnId: string, anchorEl: HTMLElement) => void;
+    onFilterClose?: () => void;
 }
-declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, }: SheetViewTableHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, openFilterColumnId: externalOpenFilterColumnId, filterAnchorEl: externalFilterAnchorEl, onFilterOpen: externalOnFilterOpen, onFilterClose: externalOnFilterClose, }: 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

@@ -6,22 +6,44 @@ import { columnIcon, pinIcon, sortAzIcon, sortZaIcon, unpinIcon } from '../../..
 import ColumnFilter from '../components/ColumnFilter';
 import { StyledCell } from '../style';
 import { ActionIcon, ColumnIcon, PinIconContainer, StyledHeader, StyledMUITableRow, HeaderText } from './style';
-function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, }) {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
+function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, pinnedColumns = [], onColumnPin, isPinnable = false, lastColumnId, selectedColumn = null, onColumnClick, openFilterColumnId: externalOpenFilterColumnId, filterAnchorEl: externalFilterAnchorEl, onFilterOpen: externalOnFilterOpen, onFilterClose: externalOnFilterClose, }) {
+    const [sortAnchorEl, setSortAnchorEl] = useState(null);
+    const sortOpen = Boolean(sortAnchorEl);
+    const [internalOpenFilterColumnId, setInternalOpenFilterColumnId] = useState(null);
+    const [internalFilterAnchorEl, setInternalFilterAnchorEl] = useState(null);
+    const openFilterColumnId = externalOpenFilterColumnId !== undefined ? externalOpenFilterColumnId : internalOpenFilterColumnId;
+    const filterAnchorEl = externalFilterAnchorEl !== undefined ? externalFilterAnchorEl : internalFilterAnchorEl;
     const theme = useTheme();
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
+    const handleSortClick = (event) => {
+        setSortAnchorEl(event.currentTarget);
     };
-    const handleClose = () => {
-        setAnchorEl(null);
+    const handleSortClose = () => {
+        setSortAnchorEl(null);
+    };
+    const handleFilterOpen = (columnId) => (event) => {
+        if (externalOnFilterOpen) {
+            externalOnFilterOpen(columnId, event.currentTarget);
+        }
+        else {
+            setInternalOpenFilterColumnId(columnId);
+            setInternalFilterAnchorEl(event.currentTarget);
+        }
+    };
+    const handleFilterClose = () => {
+        if (externalOnFilterClose) {
+            externalOnFilterClose();
+        }
+        else {
+            setInternalOpenFilterColumnId(null);
+            setInternalFilterAnchorEl(null);
+        }
     };
     const handleSortingOption = (columnId, order) => {
         if (columnId) {
             onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort({
                 [columnId]: order,
             });
-            handleClose();
+            handleSortClose();
         }
     };
     const handlePinClick = (columnId) => {
@@ -45,27 +67,32 @@ function SheetViewTableHeader({ columns, headerProps, showBackDrop, onColumnSort
                     const isPinned = pinnedColumns.includes(id);
                     const isDefaultPinned = !!column.isDefaultPinned;
                     const isSelected = selectedColumn === id;
-                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event), 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', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, 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(HeaderText, Object.assign({ "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 && !isLast && (_jsx(PinIconContainer, Object.assign({ onClick: (event) => {
+                    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, onClick: (event) => onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event), 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', cursor: 'pointer', boxSizing: 'border-box', border: isSelected ? '2px solid #1F88D0' : '1px solid #F2F2F2', backgroundColor: isSelected ? '#F2F2F2' : '#FCFCFC', height: isSelected ? '100%' : 'auto', minHeight: isSelected ? '28px' : 'auto' }, 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(HeaderText, Object.assign({ "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell_header_text" }, { children: header })) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { externalAnchorEl: openFilterColumnId === id ? filterAnchorEl : null, externalOpen: openFilterColumnId === id, onExternalOpen: handleFilterOpen(id), onExternalClose: handleFilterClose }))), sortable && (_jsx(ColumnIcon, { onClick: sortable
+                                    ? (event) => {
+                                        event.stopPropagation();
+                                        handleSortClick(event);
+                                    }
+                                    : undefined, src: columnIcon, alt: "column-icon", "data-id": id })), 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" }) })))] }), `${id}-${colIndex}`));
-                }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
+                }) })), _jsx(Dropdown, { open: sortOpen, onClose: handleSortClose, anchorEl: sortAnchorEl, 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',
+                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id) || '']) === 'asc',
                         onClick: () => {
-                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'asc');
+                            handleSortingOption(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.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',
+                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id) || '']) === 'desc',
                         onClick: () => {
-                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'desc');
+                            handleSortingOption(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id, 'desc');
                         },
                     },
                 ] })] })));

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

@@ -50,20 +50,31 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
     const [selectedCell, setSelectedCell] = useState(null);
     const [selectedColumn, setSelectedColumn] = useState(null);
+    const [openFilterColumnId, setOpenFilterColumnId] = useState(null);
+    const [filterAnchorEl, setFilterAnchorEl] = useState(null);
     const handleCellClick = useCallback((rowIndex, columnId, event) => {
         event.stopPropagation();
         const cellKey = `${rowIndex}-${columnId}`;
         setSelectedCell((prev) => (prev === cellKey ? null : cellKey));
         setSelectedColumn(null);
     }, []);
+    const handleFilterOpen = useCallback((columnId, anchorEl) => {
+        setOpenFilterColumnId(columnId);
+        setFilterAnchorEl(anchorEl);
+    }, []);
+    const handleFilterClose = useCallback(() => {
+        setOpenFilterColumnId(null);
+        setFilterAnchorEl(null);
+    }, []);
     const handleColumnClick = useCallback((columnId, event) => {
         event.stopPropagation();
-        if (event.target !== event.currentTarget) {
-            return;
+        const column = orderedColumns.find((col) => col.id === columnId);
+        if (column === null || column === void 0 ? void 0 : column.filter) {
+            handleFilterOpen(columnId, event.currentTarget);
         }
         setSelectedColumn((prev) => (prev === columnId ? null : columnId));
         setSelectedCell(null);
-    }, []);
+    }, [orderedColumns, handleFilterOpen]);
     const onPointerDown = (e) => {
         dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
@@ -131,13 +142,13 @@ function SheetViewVirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, sho
         const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
         if (columnsData.length === 0)
             return null;
-        return (_jsx(Wrapper, { children: _jsxs(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-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, selectedColumn: selectedColumn, onColumnClick: handleColumnClick })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+        return (_jsx(Wrapper, { children: _jsxs(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-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, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, openFilterColumnId: openFilterColumnId, filterAnchorEl: filterAnchorEl, onFilterOpen: handleFilterOpen, onFilterClose: handleFilterClose })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                             width: '100%',
                             minWidth: 'fit-content',
                             overflowX: 'hidden',
                         } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: createVirtualTableContainer(columnsData, containerKey, true, columnsWidth) })) }))] })) }));
     };
-    return (_jsxs(_Fragment, { children: [_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, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+    return (_jsxs(_Fragment, { children: [_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, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: handleColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: handleColumnClick, openFilterColumnId: openFilterColumnId, filterAnchorEl: filterAnchorEl, onFilterOpen: handleFilterOpen, onFilterClose: handleFilterClose }) })), _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))] }));

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

@@ -1,5 +1,11 @@
-/// <reference types="react" />
+import { MouseEvent } from 'react';
 import { IColumnFilter } from '../../../../types/index.js';
-declare function ColumnFilter(filter: IColumnFilter): import("react/jsx-runtime").JSX.Element;
+type ColumnFilterProps = IColumnFilter & {
+    externalAnchorEl?: HTMLElement | null;
+    externalOpen?: boolean;
+    onExternalOpen?: (event: MouseEvent<HTMLElement>) => void;
+    onExternalClose?: () => void;
+};
+declare function ColumnFilter(props: ColumnFilterProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof ColumnFilter>;
 export default _default;

package/build/components/VirtualTable/components/ColumnFilter/ColumnFilter.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useState } from 'react';
+import { memo, useMemo, useState, useCallback } from 'react';
 import Box from '@mui/material/Box';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Popper from '@mui/material/Popper';
@@ -8,50 +8,62 @@ import Inputs from './Inputs';
 import List from './List';
 import { FilterWrapper } from './style';
 import CustomBackdrop from '../../../CustomBackdrop';
-function ColumnFilter(filter) {
-    const [anchorEl, setAnchorEl] = useState(null);
+function ColumnFilter(props) {
+    const { externalAnchorEl, externalOpen, onExternalOpen, onExternalClose } = props;
+    const [internalAnchorEl, setInternalAnchorEl] = useState(null);
+    const anchorEl = externalAnchorEl !== undefined ? externalAnchorEl : internalAnchorEl;
+    const open = externalOpen !== undefined ? externalOpen : Boolean(internalAnchorEl);
     const openDropdown = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const onCloseDropdown = () => {
-        setAnchorEl(null);
+        if (onExternalOpen) {
+            onExternalOpen(event);
+        }
+        else {
+            setInternalAnchorEl(event.currentTarget);
+        }
     };
-    const filterData = useMemo(() => { var _a; return ((_a = filter === null || filter === void 0 ? void 0 : filter.options) === null || _a === void 0 ? void 0 : _a.reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = filter === null || filter === void 0 ? void 0 : filter.data) === null || _a === void 0 ? void 0 : _a[apiKey] })); }, {})) || {}; }, [filter]);
+    const onCloseDropdown = useCallback(() => {
+        if (onExternalClose) {
+            onExternalClose();
+        }
+        else {
+            setInternalAnchorEl(null);
+        }
+    }, [onExternalClose]);
+    const filterData = useMemo(() => { var _a; return ((_a = props === null || props === void 0 ? void 0 : props.options) === null || _a === void 0 ? void 0 : _a.reduce((acc, { apiKey }) => { var _a; return (Object.assign(Object.assign({}, acc), { [apiKey]: (_a = props === null || props === void 0 ? void 0 : props.data) === null || _a === void 0 ? void 0 : _a[apiKey] })); }, {})) || {}; }, [props]);
     const listFilterData = useMemo(() => {
         var _a;
-        const listFilter = filter;
+        const listFilter = props;
         const rawData = (_a = listFilter === null || listFilter === void 0 ? void 0 : listFilter.data) === null || _a === void 0 ? void 0 : _a[listFilter.apiKey];
         return Array.isArray(rawData) ? rawData : [];
-    }, [filter]);
+    }, [props]);
     const showClearIcon = useMemo(() => Object.values(filterData || {}).some((value) => {
         if (typeof value === 'string' || Array.isArray(value))
             return value.length > 0;
         return Boolean(value);
     }) || listFilterData.length > 0, [filterData, listFilterData]);
-    const open = Boolean(anchorEl);
     const filterApiKeys = useMemo(() => {
         var _a;
-        if (filter.type === 'list') {
-            return [filter.apiKey];
+        if (props.type === 'list') {
+            return [props.apiKey];
         }
-        return (_a = ((filter === null || filter === void 0 ? void 0 : filter.options) || [])) === null || _a === void 0 ? void 0 : _a.map(({ apiKey }) => apiKey);
-    }, [filter]);
+        return (_a = ((props === null || props === void 0 ? void 0 : props.options) || [])) === null || _a === void 0 ? void 0 : _a.map(({ apiKey }) => apiKey);
+    }, [props]);
     const renderFilter = useMemo(() => {
-        if (filter.type === 'list')
-            return _jsx(List, { onCloseDropdown: onCloseDropdown, filter: filter });
-        if (filter.type === 'inputs')
-            return _jsx(Inputs, { onCloseDropdown: onCloseDropdown, filter: filter });
-        if (filter.type === 'custom') {
+        if (props.type === 'list')
+            return _jsx(List, { onCloseDropdown: onCloseDropdown, filter: props });
+        if (props.type === 'inputs')
+            return _jsx(Inputs, { onCloseDropdown: onCloseDropdown, filter: props });
+        if (props.type === 'custom') {
             const componentSharedProps = {
                 anchorEl,
-                setAnchorEl,
+                setAnchorEl: externalAnchorEl !== undefined ? undefined : setInternalAnchorEl,
             };
-            return filter.render(componentSharedProps);
+            return props.render(componentSharedProps);
         }
         return null;
-    }, [open, filter, anchorEl, setAnchorEl]);
+    }, [props, anchorEl, externalAnchorEl, setInternalAnchorEl, onCloseDropdown]);
     return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(Box, Object.assign({ component: "section", "data-testid": "ColumnFilter", sx: { position: 'relative', display: 'flex', alignItems: 'center' } }, { children: [showClearIcon ? (_jsxs(FilterWrapper, { children: [_jsx(Box, { component: "img", "data-testid": "ColumnFilter_whiteFilterIcon", src: whiteFilterIcon, alt: "filter-icon", sx: { marginInlineEnd: '2px', height: 6 }, onClick: openDropdown }), _jsx(Box, { component: "img", "data-testid": "ColumnFilter_closeIcon", src: closeIcon, alt: "close-icon", onClick: () => {
-                                filter.onClear(filterApiKeys);
+                                props.onClear(filterApiKeys);
                             } })] })) : (_jsx(Box, { component: "img", "data-testid": "ColumnFilter_columnIcon", src: columnIcon, alt: "column-icon", sx: { cursor: 'pointer', marginTop: '2px' }, onClick: openDropdown })), open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start", sx: {
                         zIndex: 9999,
                     } }, { children: renderFilter }))] })) })));

package/build/components/VirtualTable/components/TableHeader.js

@@ -41,45 +41,70 @@ const StyledMUITableRow = styled(MUITableRow, {
     paddingBlock: 0,
 }))));
 function TableHeader({ columns, headerProps, showBackDrop, onColumnSort, columnsSorting, isSheetView }) {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
+    const [sortAnchorEl, setSortAnchorEl] = useState(null);
+    const sortOpen = Boolean(sortAnchorEl);
+    const [openFilterColumnId, setOpenFilterColumnId] = useState(null);
+    const [filterAnchorEl, setFilterAnchorEl] = useState(null);
     const theme = useTheme();
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
+    const handleSortClick = (event) => {
+        setSortAnchorEl(event.currentTarget);
     };
-    const handleClose = () => {
-        setAnchorEl(null);
+    const handleColumnHeaderClick = (event, column) => {
+        if (column.filter) {
+            setOpenFilterColumnId(column.id);
+            setFilterAnchorEl(event.currentTarget);
+            return;
+        }
+        if (column.sortable) {
+            setSortAnchorEl(event.currentTarget);
+        }
+    };
+    const handleFilterOpen = (columnId) => (event) => {
+        setOpenFilterColumnId(columnId);
+        setFilterAnchorEl(event.currentTarget);
+    };
+    const handleFilterClose = () => {
+        setOpenFilterColumnId(null);
+        setFilterAnchorEl(null);
+    };
+    const handleSortClose = () => {
+        setSortAnchorEl(null);
     };
     const handleSortingOption = (columnId, order) => {
         if (columnId) {
             onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort({
                 [columnId]: order,
             });
-            handleClose();
+            handleSortClose();
         }
     };
     return (_jsxs(StyledHeader, Object.assign({ component: "nav", "data-testid": "VirtualTable_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": "VirtualTable_TableHeader_StyledMUITableRow", isSheetView: isSheetView }, { children: columns.map((column, colIndex) => {
                     const { header, id, align, headerStyle, sortable, filter } = column;
                     const isFirst = id === columns[0].id;
                     const isLast = id === columns[columns.length - 1].id;
-                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_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, isFirst: isFirst, isLast: isLast, sx: Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', fontWeight: 600 }, headerStyle), isSheetView: isSheetView }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_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": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && _jsx(ColumnFilter, Object.assign({}, filter)), sortable && _jsx(ColumnIcon, { onClick: sortable ? handleClick : undefined, src: columnIcon, alt: "column-icon", "data-id": id })] }), `${id}-${colIndex}`));
-                }) })), _jsx(Dropdown, { open: open, onClose: handleClose, anchorEl: anchorEl, menuItems: [
+                    return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "VirtualTable_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, isFirst: isFirst, isLast: isLast, onClick: (event) => handleColumnHeaderClick(event, column), sx: Object.assign({ paddingInline: '0.6875rem', paddingLeft: isFirst ? '0' : '0.6875rem', paddingRight: isLast ? '0' : '0.6875rem', display: 'flex', gap: theme.spacing(0.5), alignItems: 'center', justifyContent: align === 'right' ? 'flex-end' : 'flex-start', width: column.width, textAlign: align, overflow: 'unset', fontWeight: 600, cursor: column.filter || column.sortable ? 'pointer' : 'default' }, headerStyle), isSheetView: isSheetView }, { children: [typeof header === 'function' ? (header()) : (_jsx(Box, Object.assign({ "data-testid": "TableHeader_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": "VirtualTable_TableHeader_StyledCell_header_text" }, { children: header }))) }))), filter && (_jsx(ColumnFilter, Object.assign({}, filter, { externalAnchorEl: openFilterColumnId === id ? filterAnchorEl : null, externalOpen: openFilterColumnId === id, onExternalOpen: handleFilterOpen(id), onExternalClose: handleFilterClose }))), sortable && (_jsx(ColumnIcon, { onClick: sortable
+                                    ? (event) => {
+                                        event.stopPropagation();
+                                        handleSortClick(event);
+                                    }
+                                    : undefined, src: columnIcon, alt: "column-icon", "data-id": id }))] }), `${id}-${colIndex}`));
+                }) })), _jsx(Dropdown, { open: sortOpen, onClose: handleSortClose, anchorEl: sortAnchorEl, 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',
+                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id) || '']) === 'asc',
                         onClick: () => {
-                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'asc');
+                            handleSortingOption(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.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',
+                        selected: (columnsSorting === null || columnsSorting === void 0 ? void 0 : columnsSorting[(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id) || '']) === 'desc',
                         onClick: () => {
-                            handleSortingOption(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.dataset.id, 'desc');
+                            handleSortingOption(sortAnchorEl === null || sortAnchorEl === void 0 ? void 0 : sortAnchorEl.dataset.id, 'desc');
                         },
                     },
                 ] })] })));

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.0.257",
-  "testVersion": 2,
+  "version": "0.0.258-test.3",
+  "testVersion": 3,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -131,4 +131,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}