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

package/build/components/AppServicesBar/AppServicesBar.d.ts

@@ -4,15 +4,12 @@ import { SxProps, Theme } from '@mui/material/styles';
 import { AppService } from '../../types/index.js';
 export interface AppServicesBarProps {
     appCode: string;
+    serviceCode: string;
     services: AppService[];
     isMaximized: boolean;
     dimensions: {
         width: number | string;
     };
-    features: {
-        sandboxMode: boolean;
-        initialServiceCode?: string;
-    };
     ui: {
         onStartDrag: DragControls['start'];
     };
@@ -20,6 +17,6 @@ export interface AppServicesBarProps {
     onClickServiceItem: (code: string) => void;
     sx?: SxProps<Theme>;
 }
-declare function AppServicesBar({ appCode, services, isMaximized, dimensions, features: { initialServiceCode }, ui: { onStartDrag }, onChangeServiceCode, onClickServiceItem, sx, }: Readonly<AppServicesBarProps>): import("react/jsx-runtime").JSX.Element | null;
+declare function AppServicesBar({ appCode, services, isMaximized, dimensions, serviceCode, ui: { onStartDrag }, onChangeServiceCode, onClickServiceItem, sx, }: Readonly<AppServicesBarProps>): import("react/jsx-runtime").JSX.Element | null;
 declare const _default: import("react").MemoExoticComponent<typeof AppServicesBar>;
 export default _default;

package/build/components/AppServicesBar/AppServicesBar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { memo, useCallback, useState } from 'react';
 import { AppServices } from '../index.js';
 import { StyledAppHeaderWrapper } from '../Toolbar/style';
-function AppServicesBar({ appCode, services, isMaximized, dimensions, features: { initialServiceCode }, ui: { onStartDrag }, onChangeServiceCode, onClickServiceItem, sx, }) {
+function AppServicesBar({ appCode, services, isMaximized, dimensions, serviceCode, ui: { onStartDrag }, onChangeServiceCode, onClickServiceItem, sx, }) {
     const [isDragging, setIsDragging] = useState(false);
     const onPointerDown = useCallback((e) => {
         onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
@@ -13,6 +13,6 @@ function AppServicesBar({ appCode, services, isMaximized, dimensions, features:
     };
     if (!appCode || !services.length)
         return null;
-    return (_jsx(StyledAppHeaderWrapper, Object.assign({ id: "app-header-wrapper", onPointerDown: onPointerDown, onPointerUp: onPointerUp, isDragging: isDragging, sx: sx }, { children: _jsx(AppServices, { onClickServiceItem: onClickServiceItem, dimensions: { width: dimensions.width }, serviceCode: initialServiceCode !== null && initialServiceCode !== void 0 ? initialServiceCode : '', services: services, isMaximized: isMaximized, appCode: appCode, onChangeServiceCode: onChangeServiceCode }) })));
+    return (_jsx(StyledAppHeaderWrapper, Object.assign({ id: "app-header-wrapper", onPointerDown: onPointerDown, onPointerUp: onPointerUp, isDragging: isDragging, sx: sx }, { children: _jsx(AppServices, { onClickServiceItem: onClickServiceItem, dimensions: { width: dimensions.width }, serviceCode: serviceCode, services: services, isMaximized: isMaximized, appCode: appCode, onChangeServiceCode: onChangeServiceCode }) })));
 }
 export default memo(AppServicesBar);

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/build/types/apps.d.ts

@@ -89,7 +89,7 @@ export type MFWidgetBaseProps = {
         hasReportsApp: boolean;
         hasHeader: boolean;
         sandboxMode: boolean;
-        serviceCode?: string;
+        initialServiceCode?: string;
     };
     segment: Pick<Segment, 'id' | 'brands' | 'countries'> & {
         defaultCountry?: SegmentCountry;

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