@tap-payments/os-micro-frontend-shared 0.1.96-test.21 → 0.1.96-test.22

package/build/components/Window/Window.js

@@ -4,7 +4,9 @@ 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 { useTheme } from '@mui/material';
 function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder = 1 }, sandboxMode = false, }) {
+    const theme = useTheme();
     const [isDrag, setIsDrag] = useState(true);
     const modalRef = useRef(null);
     const constraintsRef = useRef(null);
@@ -16,9 +18,9 @@ function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragC
         onClick === null || onClick === void 0 ? void 0 : onClick();
         setIsDrag(false);
     };
-    const resizableStyle = useMemo(() => (Object.assign(Object.assign(Object.assign({}, resizableMainStyle), { maxWidth: width, borderRadius: !isMaximized ? 12 : '0 !important' }), (!isMaximized && {
+    const resizableStyle = useMemo(() => (Object.assign(Object.assign(Object.assign(Object.assign({}, resizableMainStyle), { maxWidth: width, borderRadius: !isMaximized ? 12 : '0 !important' }), (!isMaximized && {
         top: 0,
-    }))), [isMaximized, width]);
+    })), { background: sandboxMode ? theme.palette.common.lightOrange : theme.palette.background.transparent[0], backdropFilter: 'blur(32px)' })), [width, isMaximized, sandboxMode]);
     useEffect(() => {
         var _a;
         (_a = resizableRef.current) === null || _a === void 0 ? void 0 : _a.updateSize({
@@ -32,7 +34,7 @@ function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragC
                         left: 48 * (openOrder - 1),
                     })), animate: Object.assign(Object.assign({ width }, (isMaximized && {
                         width: '100vw',
-                    })), { scale: Number(!isMinimized), top: isMaximized ? 0 : HEADER_HEIGHT + FOOTER_HEIGHT * (openOrder - 1), left: isMaximized ? 0 : 48 * (openOrder - 1) }), ref: modalRef, maximized: isMaximized, transition: { duration: isMaximized ? 0.3 : 0 }, sandboxMode: sandboxMode }, { children: _jsx(Resizable, Object.assign({ ref: (c) => {
+                    })), { scale: Number(!isMinimized), top: isMaximized ? 0 : HEADER_HEIGHT + FOOTER_HEIGHT * (openOrder - 1), left: isMaximized ? 0 : 48 * (openOrder - 1) }), ref: modalRef, maximized: isMaximized, transition: { duration: isMaximized ? 0.3 : 0 } }, { children: _jsx(Resizable, Object.assign({ ref: (c) => {
                             resizableRef.current = c;
                         }, style: resizableStyle, minHeight: minHeight, minWidth: minWidth, maxHeight: maxHeight, maxWidth: maxWidth, onResizeStart: onResizeStart, onResizeStop: onResizeStop, onResize: (_, __, element) => {
                             onResize === null || onResize === void 0 ? void 0 : onResize(element);

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

@@ -265,7 +265,6 @@ export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     maximized?: boolean | undefined;
-    sandboxMode?: boolean | undefined;
 }, {}, {}>;
 export declare const AppContainerWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;

package/build/components/Window/style.js

@@ -30,7 +30,7 @@ export const initalStyle = {
 };
 export const ContentWrapper = styled(motion.div, {
     shouldForwardProp: (props) => props !== 'maximized',
-})(({ maximized, sandboxMode, theme }) => (Object.assign({ background: sandboxMode ? theme.palette.common.lightOrange : theme.palette.background.transparent[0], backdropFilter: 'blur(32px)', overflow: 'hidden', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', zIndex: 1, borderRadius: '12px' }, (maximized && {
+})(({ maximized }) => (Object.assign({ overflow: 'hidden', display: 'flex', flexDirection: 'column', width: '100%', height: '100%', zIndex: 1, borderRadius: '12px' }, (maximized && {
     transform: 'translate(0,0) !important',
 }))));
 export const AppContainerWrapper = styled(Box)(() => ({

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.96-test.21",
-  "testVersion": 21,
+  "version": "0.1.96-test.22",
+  "testVersion": 22,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",