@tap-payments/os-micro-frontend-shared 0.0.273-test.11 → 0.0.273-test.12

package/build/components/CustomBackdrop/CustomBackdrop.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
-declare function CustomBackdrop(props: BoxProps): import("react/jsx-runtime").JSX.Element;
+declare function CustomBackdrop(props: BoxProps): import("react").ReactPortal;
 declare const _default: import("react").MemoExoticComponent<typeof CustomBackdrop>;
 export default _default;

package/build/components/CustomBackdrop/CustomBackdrop.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
+import ReactDOM from 'react-dom';
 import { CustomBackdropStyled } from './style';
 function CustomBackdrop(props) {
-    return _jsx(CustomBackdropStyled, Object.assign({}, props));
+    return ReactDOM.createPortal(_jsx(CustomBackdropStyled, Object.assign({}, props)), document.body);
 }
 export default memo(CustomBackdrop);

package/build/components/CustomBackdrop/style.js

@@ -5,5 +5,5 @@ export const CustomBackdropStyled = styled(Box)(() => ({
     bottom: 0,
     right: 0,
     left: 0,
-    zIndex: 2,
+    zIndex: 999,
 }));

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

@@ -8,17 +8,8 @@ import { PinIconContainer, HeaderText } from '../../style';
 import ColumnSort from '../../../../VirtualTable/components/ColumnSort';
 function TableCell({ column: { header, id, align, headerStyle, sortable, filter, pinnable, width, order }, isFirst, isLast, isSelected, isDefaultPinned, onColumnSort, columnsSorting, onColumnPin, isPinnable, lastColumnId, onColumnClick, pinnedColumns, }) {
     const [columnFilterEl, setColumnFilterEl] = useState(null);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const open = Boolean(anchorEl);
     const checkIsPanned = useCallback((columnId) => pinnedColumns === null || pinnedColumns === void 0 ? void 0 : pinnedColumns.includes(columnId), [pinnedColumns]);
     const isPinned = useMemo(() => checkIsPanned(id), [id, checkIsPanned]);
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-    const handleClick = (event) => {
-        event.stopPropagation();
-        setAnchorEl(event.currentTarget);
-    };
     const handlePinClick = (columnId) => {
         if (checkIsPanned(columnId)) {
             onColumnPin === null || onColumnPin === void 0 ? void 0 : onColumnPin(columnId, 'unpin');
@@ -32,14 +23,6 @@ function TableCell({ column: { header, id, align, headerStyle, sortable, filter,
             }
         }
     };
-    const handleSortingOption = (columnId, columnOrder) => {
-        if (columnId) {
-            onColumnSort === null || onColumnSort === void 0 ? void 0 : onColumnSort({
-                [columnId]: columnOrder,
-            });
-            handleClose();
-        }
-    };
     return (_jsxs(StyledCell, Object.assign({ "data-id": id, component: "div", "data-testid": "SheetViewVirtualTable_TableHeader_StyledCell", "data-column-id": id, "data-column-width": width, "data-column-width-used": width, "data-column-align": align, "data-column-order": order, "data-column-header": typeof header === 'string' ? header : 'component', "data-column-sortable": !!sortable, "data-column-filterable": !!filter, "data-column-pinned": isPinned, isFirst: isFirst, isLast: isLast, isSheetView: true, onClick: (event) => {
             onColumnClick === null || onColumnClick === void 0 ? void 0 : onColumnClick(id, event);
             setColumnFilterEl(event.currentTarget);

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

@@ -53,8 +53,6 @@ function ColumnFilter(filter) {
     }, [open, filter, anchorEl, setAnchorEl]);
     return (_jsxs(_Fragment, { 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);
-                        } })] })) : (_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 }))] }));
+                        } })] })) : (_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" }, { children: renderFilter }))] }));
 }
 export default memo(ColumnFilter);

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.273-test.11",
-  "testVersion": 11,
+  "version": "0.0.273-test.12",
+  "testVersion": 12,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",