@tap-payments/os-micro-frontend-shared 0.1.33-test.4 → 0.1.33-test.5

package/build/components/Window/Window.js

@@ -3,9 +3,8 @@ import { memo, useMemo, useState, useRef, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { Resizable } from 're-resizable';
 import { APP_WINDOW_Z_INDEX, FOOTER_HEIGHT, HEADER_HEIGHT } from '../../constants/index.js';
-import { contentStyle, ContentWrapper, initalStyle, resizableMainStyle, AppContainerWrapper, AppContainerContainer } from './style';
+import { contentStyle, ContentWrapper, initialStyle, resizableMainStyle, AppContainerWrapper, AppContainerContainer } from './style';
 function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder = 1 }, }) {
-    var _a, _b;
     const [isDrag, setIsDrag] = useState(true);
     const modalRef = useRef(null);
     const constraintsRef = useRef(null);
@@ -20,15 +19,6 @@ function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragC
     const resizableStyle = useMemo(() => (Object.assign(Object.assign(Object.assign({}, resizableMainStyle), { maxWidth: width, borderRadius: !isMaximized ? 12 : '0 !important' }), (!isMaximized && {
         top: 0,
     }))), [isMaximized, width]);
-    const dragConstraints = useMemo(() => {
-        var _a, _b, _c, _d;
-        return ({
-            top: 0,
-            left: 0,
-            right: window.innerWidth - ((_b = (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0) - 10,
-            bottom: window.innerHeight - ((_d = (_c = modalRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0) - 10,
-        });
-    }, [(_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth, (_b = modalRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight]);
     useEffect(() => {
         var _a;
         (_a = resizableRef.current) === null || _a === void 0 ? void 0 : _a.updateSize({
@@ -36,7 +26,7 @@ function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragC
             height: isMaximized ? '100vh' : '100%',
         });
     }, [isMaximized]);
-    return (_jsx(AppContainerWrapper, Object.assign({ id: "app-container-wrapper", "data-testid": "AppContainerWrapper" }, { children: _jsx(AppContainerContainer, Object.assign({ "data-testid": "AppContainerContainer" }, { children: _jsx(motion.div, Object.assign({ id: "app-content", "data-add-id": id, "data-testid": "AppContent", ref: constraintsRef, initial: initalStyle }, { children: _jsx(ContentWrapper, Object.assign({ id: "content-wrapper", drag: !isMaximized && isDrag, dragMomentum: false, dragConstraints: dragConstraints, onDragStart: onClick, onDragEnter: onClick, onClick: onClick, dragControls: dragControls, dragListener: false, style: Object.assign(Object.assign(Object.assign({}, (order && {
+    return (_jsx(AppContainerWrapper, Object.assign({ id: "app-container-wrapper", "data-testid": "AppContainerWrapper" }, { children: _jsx(AppContainerContainer, Object.assign({ "data-testid": "AppContainerContainer" }, { children: _jsx(motion.div, Object.assign({ id: "app-content", "data-add-id": id, "data-testid": "AppContent", ref: constraintsRef, initial: initialStyle }, { children: _jsx(ContentWrapper, Object.assign({ id: "content-wrapper", drag: !isMaximized && isDrag, dragMomentum: false, dragConstraints: constraintsRef, onDragStart: onClick, onDragEnter: onClick, onClick: onClick, dragControls: dragControls, dragListener: false, style: Object.assign(Object.assign(Object.assign({}, (order && {
                         zIndex: Number(order) + APP_WINDOW_Z_INDEX,
                     })), contentStyle), { height }), initial: Object.assign({ marginInline: 'auto', scale: 0, left: 0 }, (!isMaximized && {
                         left: 48 * (openOrder - 1),

package/build/components/Window/style.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 export declare const resizableMainStyle: CSSProperties;
 export declare const contentStyle: CSSProperties;
-export declare const initalStyle: any;
+export declare const initialStyle: any;
 export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/Window/style.js

@@ -19,7 +19,7 @@ export const contentStyle = {
     overflow: 'visible',
     borderRadius: '12px',
 };
-export const initalStyle = {
+export const initialStyle = {
     width: 'inherit',
     height: 'inherit',
     gridRowStart: 1,
@@ -30,15 +30,24 @@ export const initalStyle = {
 };
 export const ContentWrapper = styled(motion.div, {
     shouldForwardProp: (props) => props !== 'maximized',
-})(({ maximized }) => (Object.assign({ overflow: 'hidden', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', zIndex: 1, borderRadius: '12px' }, (maximized && {
-    transform: 'translate(0,0) !important',
-}))));
+})(({ maximized }) => (Object.assign({ overflow: 'hidden', display: 'flex', flexDirection: 'column', zIndex: 1, position: 'fixed', top: 0, left: 0 }, (maximized
+    ? {
+        width: '100vw',
+        height: '100vh',
+        borderRadius: 0,
+        transform: 'translate(0,0) !important',
+    }
+    : {
+        width: 'auto',
+        height: 'auto',
+        borderRadius: 12,
+    }))));
 export const AppContainerWrapper = styled(Box)(() => ({
     flexGrow: 1,
 }));
 export const AppContainerContainer = styled(motion.div)(() => ({
-    width: 'inherit',
-    height: '100%',
+    width: '100vw',
+    height: '100vh',
     overflow: 'hidden',
     flexGrow: 1,
     position: 'relative',

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.33-test.4",
-  "testVersion": 4,
+  "version": "0.1.33-test.5",
+  "testVersion": 5,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",