@tap-payments/os-micro-frontend-shared 0.1.367-test.1-test.2-test.3 → 0.1.367-test.1-test.2-test.3-test.4

package/build/components/TableHeader/TableView/CreateViewDialog.js

@@ -18,7 +18,7 @@ import Toolbar, { StyledHeaderWrapperStyled } from '../../Toolbar';
 import { CloseIcon } from '../../ToolbarIcon';
 import { dragIcon, rightArrow, viewIcon } from '../../../constants/index.js';
 import { useWindowDimensions } from '../../../hooks/index.js';
-import { useSubmenuHover, useDialogPosition } from './hooks';
+import { useSubmenuHover } from './hooks';
 import { DIALOG_WIDTH, DIALOG_HEIGHT, DATE_COLUMN_CONFIG, TEMPLATE_NAME_MAX_LENGTH } from './constants';
 import { isDateColumn, getColumnCheckState, initializeEditingColumns, initializeCreateColumns, resetColumnsToDefault, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, } from './utils';
 import { DialogContentWrapper, ScrollableContent, TitleSection, ColumnListContainer, SelectAllHeader, ColumnItemRow, DragIconWrapper, CheckboxWrapper, FooterBar, CreateButtonWrapper, SubmenuPaper, SubmenuItem, DeleteButton, CreateButton, NameTextField, checkboxSx, getDialogPaperStyle, dialogSx, } from './styles';
@@ -27,7 +27,6 @@ function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], isLo
     const { height, width } = useWindowDimensions();
     const [templateName, setTemplateName] = useState('');
     const [selectedColumns, setSelectedColumns] = useState([]);
-    const { position, resetPosition, updatePosition } = useDialogPosition(width, height, DIALOG_WIDTH, DIALOG_HEIGHT);
     const { hoveredColumn, anchorEl, openSubmenu, closeSubmenu, cancelClose } = useSubmenuHover();
     const dateColumn = DATE_COLUMN_CONFIG;
     useEffect(() => {
@@ -43,8 +42,7 @@ function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], isLo
             setSelectedColumns([dateColumn, ...otherColumns]);
             setTemplateName('');
         }
-        resetPosition();
-    }, [availableColumns, open, editingView, resetPosition]);
+    }, [open, editingView, availableColumns]);
     const columnNames = useMemo(() => selectedColumns.map((col) => col.name), [selectedColumns]);
     const allSelected = useMemo(() => areAllColumnsSelected(selectedColumns), [selectedColumns]);
     const someSelected = useMemo(() => areSomeColumnsSelected(selectedColumns, allSelected), [selectedColumns, allSelected]);
@@ -84,7 +82,15 @@ function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], isLo
     });
     if (!open)
         return null;
-    return (_jsx(Draggable, Object.assign({ handle: "#draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]', position: position, onStop: (_, data) => updatePosition(data.x, data.y), bounds: { top: 10 } }, { children: _jsxs(Dialog, Object.assign({ disableEnforceFocus: true, open: open, onClose: onClose, hideBackdrop: true, PaperProps: { style: getDialogPaperStyle(DIALOG_WIDTH, DIALOG_HEIGHT) }, sx: dialogSx }, { children: [_jsx(StyledHeaderWrapperStyled, Object.assign({ id: "draggable-dialog-title", style: { cursor: 'move' } }, { children: _jsx(Toolbar, { isHovered: true, title: editingView ? 'Edit Custom View' : t('createCustomView') || 'Create Custom View', leftActions: _jsx(CloseIcon, { onClick: onClose }) }) })), _jsxs(DialogContentWrapper, { children: [_jsxs(ScrollableContent, { children: [_jsxs(TitleSection, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ sx: { fontSize: 24, fontWeight: 700, color: '#9F9F9F' } }, { children: "Custom" })), _jsx(Typography, Object.assign({ sx: { fontSize: 24, fontWeight: 700, color: '#20232B', lineHeight: 1.2 } }, { children: "View" }))] }), editingView && _jsx(DeleteButton, Object.assign({ onClick: handleDelete }, { children: "Delete View" }))] }), _jsx(Box, Object.assign({ sx: { mb: 3 } }, { children: _jsx(NameTextField, { fullWidth: true, label: _jsxs(Box, Object.assign({ component: "span" }, { children: ["Name", _jsx(Box, Object.assign({ component: "span", sx: { color: 'error.main' } }, { children: "*" }))] })), value: templateName, onChange: (e) => setTemplateName(e.target.value), inputProps: { maxLength: TEMPLATE_NAME_MAX_LENGTH }, size: "small", variant: "filled" }) })), _jsxs(ColumnListContainer, { children: [_jsxs(SelectAllHeader, Object.assign({ onClick: handleSelectAll }, { children: [_jsx(DragIconWrapper, { children: _jsx("img", { src: viewIcon, alt: "drag", style: { width: 16, height: 16, opacity: 0.5 } }) }), _jsx(CheckboxWrapper, { children: _jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, size: "small", sx: checkboxSx }) }), _jsx(Typography, Object.assign({ sx: { flex: 1, fontSize: 13, fontWeight: 500, color: 'text.primary', ml: 0.75 } }, { children: "Select All" })), _jsx(Link, Object.assign({ component: "button", type: "button", onClick: (e) => {
+    return (_jsx(Draggable, Object.assign({ handle: "#draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]' }, { children: _jsxs(Dialog, Object.assign({ disableEnforceFocus: true, open: open, onClose: onClose, hideBackdrop: true, PaperProps: { style: getDialogPaperStyle(DIALOG_WIDTH, DIALOG_HEIGHT) }, sx: dialogSx, TransitionProps: {
+                timeout: 0,
+            }, slotProps: {
+                backdrop: {
+                    sx: {
+                        transition: 'none',
+                    },
+                },
+            } }, { children: [_jsx(StyledHeaderWrapperStyled, Object.assign({ id: "draggable-dialog-title", style: { cursor: 'move' } }, { children: _jsx(Toolbar, { isHovered: true, title: editingView ? 'Edit Custom View' : t('createCustomView') || 'Create Custom View', leftActions: _jsx(CloseIcon, { onClick: onClose }) }) })), _jsxs(DialogContentWrapper, { children: [_jsxs(ScrollableContent, { children: [_jsxs(TitleSection, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ sx: { fontSize: 24, fontWeight: 700, color: '#9F9F9F' } }, { children: "Custom" })), _jsx(Typography, Object.assign({ sx: { fontSize: 24, fontWeight: 700, color: '#20232B', lineHeight: 1.2 } }, { children: "View" }))] }), editingView && _jsx(DeleteButton, Object.assign({ onClick: handleDelete }, { children: "Delete View" }))] }), _jsx(Box, Object.assign({ sx: { mb: 3 } }, { children: _jsx(NameTextField, { fullWidth: true, label: _jsxs(Box, Object.assign({ component: "span" }, { children: ["Name", _jsx(Box, Object.assign({ component: "span", sx: { color: 'error.main' } }, { children: "*" }))] })), value: templateName, onChange: (e) => setTemplateName(e.target.value), inputProps: { maxLength: TEMPLATE_NAME_MAX_LENGTH }, size: "small", variant: "filled" }) })), _jsxs(ColumnListContainer, { children: [_jsxs(SelectAllHeader, Object.assign({ onClick: handleSelectAll }, { children: [_jsx(DragIconWrapper, { children: _jsx("img", { src: viewIcon, alt: "drag", style: { width: 16, height: 16, opacity: 0.5 } }) }), _jsx(CheckboxWrapper, { children: _jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, size: "small", sx: checkboxSx }) }), _jsx(Typography, Object.assign({ sx: { flex: 1, fontSize: 13, fontWeight: 500, color: 'text.primary', ml: 0.75 } }, { children: "Select All" })), _jsx(Link, Object.assign({ component: "button", type: "button", onClick: (e) => {
                                                         e.stopPropagation();
                                                         handleResetToDefault();
                                                     }, underline: "none", sx: { fontSize: 13, fontWeight: 500, cursor: 'pointer', color: 'common.blue' } }, { children: "Reset to default" }))] })), _jsx(Box, Object.assign({ sx: { flex: 1, overflowY: 'auto', minHeight: 0 } }, { children: _jsx(Reorder.Group, Object.assign({ axis: "y", onReorder: handleReorder, values: columnNames, style: { listStyle: 'none', padding: 0, margin: 0 } }, { children: selectedColumns.map((column) => {

package/build/components/TableHeader/TableView/ViewsManager.js

@@ -64,6 +64,8 @@ function ViewsManager({ onViewChange, setIsViewVisible, setTableViews, tableView
     const handleOpenCreateDialog = () => {
         setEditingView(null);
         setIsCreateDialogOpen(true);
+        // Close the dropdown menu when opening the popup
+        setDefaultViewElement(null);
     };
     const handleOpenEditDialog = (view) => {
         setEditingView(view);
@@ -94,7 +96,7 @@ function ViewsManager({ onViewChange, setIsViewVisible, setTableViews, tableView
         handleCustomViewsChange(updatedViews);
         yield (onDeleteCustomView === null || onDeleteCustomView === void 0 ? void 0 : onDeleteCustomView(viewId));
     });
-    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ "data-testid": "ViewsManager" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewsManager_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(defaultViewEl), anchorEl: anchorViewEl, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onSelect: (e) => setDefaultViewElement(defaultViewEl ? null : e.currentTarget), setViews: (views) => {
+    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewsManager" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewsManager_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(defaultViewEl), anchorEl: anchorViewEl, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onSelect: (e) => setDefaultViewElement(defaultViewEl ? null : e.currentTarget), setViews: (views) => {
                                 if (resetTableViews) {
                                     resetTableViews({ id: views[0], label: views[0] });
                                 }

package/build/components/TableHeader/TableView/hooks.d.ts

@@ -10,7 +10,7 @@ export declare const useSubmenuHover: () => {
     cancelClose: () => void;
     forceClose: () => void;
 };
-export declare const useDialogPosition: (width: number, height: number, dialogWidth: number, dialogHeight: number) => {
+export declare const useDialogPosition: (dialogWidth: number, dialogHeight: number) => {
     position: {
         x: number;
         y: number;

package/build/components/TableHeader/TableView/hooks.js

@@ -44,17 +44,16 @@ export const useSubmenuHover = () => {
         forceClose,
     };
 };
-export const useDialogPosition = (width, height, dialogWidth, dialogHeight) => {
-    const [position, setPosition] = useState({
-        x: width / 2 - dialogWidth / 2,
-        y: height / 2 - dialogHeight / 2,
-    });
+export const useDialogPosition = (dialogWidth, dialogHeight) => {
+    const [position, setPosition] = useState({ x: 0, y: 0 });
     const resetPosition = useCallback(() => {
+        const centerX = window.innerWidth / 2 - dialogWidth / 2;
+        const centerY = window.innerHeight / 2 - dialogHeight / 2;
         setPosition({
-            x: width / 2 - dialogWidth / 2,
-            y: height / 2 - dialogHeight / 2,
+            x: Math.max(0, centerX),
+            y: Math.max(0, centerY),
         });
-    }, [width, height, dialogWidth, dialogHeight]);
+    }, [dialogWidth, dialogHeight]);
     const updatePosition = useCallback((x, y) => {
         setPosition({ x, y });
     }, []);

package/build/components/TableHeader/TableView/styles.d.ts

@@ -85,8 +85,15 @@ export declare const getDialogPaperStyle: (width: number, height: number) => {
 export declare const dialogSx: {
     backgroundColor: string;
     pointerEvents: string;
+    zIndex: number;
+    '& .MuiDialog-container': {
+        transition: string;
+        zIndex: number;
+    };
     '& .MuiDialog-paper': {
+        transition: string;
         pointerEvents: string;
+        zIndex: number;
     };
 };
 export declare const ResetHeaderBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/build/components/TableHeader/TableView/styles.js

@@ -28,6 +28,8 @@ export const ViewWrapper = styled(Box)(({ theme }) => ({
     textTransform: 'capitalize',
     position: 'relative',
     transition: '0.5s',
+    paddingRight: 0,
+    marginRight: 0,
     '&:after': {
         content: '""',
         position: 'absolute',
@@ -43,6 +45,10 @@ export const ViewWrapper = styled(Box)(({ theme }) => ({
         paddingInlineEnd: '9px',
         zIndex: -1,
     },
+    '& > *:last-child': {
+        marginRight: 0,
+        paddingRight: 0,
+    },
 }));
 export const ListStyled = styled(Box)(({ theme }) => ({
     background: theme.palette.common.white,
@@ -57,6 +63,8 @@ export const ListStyled = styled(Box)(({ theme }) => ({
 export const DropdownStyled = styled(Box)(() => ({
     minWidth: 160,
     position: 'relative',
+    marginRight: 0,
+    paddingRight: 0,
 }));
 export const MenuItem = styled(Box, { shouldForwardProp: (props) => props !== 'addColumnViewEl' })(({ theme }) => ({
     padding: theme.spacing(1),
@@ -298,7 +306,7 @@ export const checkboxSx = {
 };
 export const getDialogPaperStyle = (width, height) => ({
     margin: 0,
-    maxHeight: '90vh',
+    maxHeight: '100%',
     maxWidth: 'none',
     width,
     height,
@@ -309,8 +317,15 @@ export const getDialogPaperStyle = (width, height) => ({
 export const dialogSx = {
     backgroundColor: 'transparent',
     pointerEvents: 'none',
+    zIndex: 1300,
+    '& .MuiDialog-container': {
+        transition: 'none !important',
+        zIndex: 1300,
+    },
     '& .MuiDialog-paper': {
+        transition: 'none !important',
         pointerEvents: 'auto',
+        zIndex: 1300,
     },
 };
 export const ResetHeaderBox = styled(Box)(({ theme }) => ({

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.1.367-test.1-test.2-test.3",
-  "testVersion": 3,
+  "version": "0.1.367-test.1-test.2-test.3-test.4",
+  "testVersion": 4,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",