@tap-payments/os-micro-frontend-shared 0.1.96-test.1 → 0.1.96-test.12

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

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

@@ -15,7 +15,7 @@ export declare const Charge: import("@emotion/styled").StyledComponent<import("@
 export declare const DropDownChargeGapColumn: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledAmount: import("@emotion/styled").StyledComponent<Pick<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
     ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "width" | "height" | "hidden" | "type" | "color" | "content" | "translate" | "value" | "list" | "form" | "slot" | "style" | "title" | "name" | "ref" | "pattern" | "key" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "multiple" | "autoComplete" | "readOnly" | "required" | "max" | "src" | "alt" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "min" | "accept" | "capture" | "checked" | "formEncType" | "minLength"> & {
+}, "width" | "height" | "hidden" | "type" | "color" | "content" | "translate" | "name" | "value" | "list" | "form" | "slot" | "style" | "title" | "ref" | "pattern" | "key" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "multiple" | "autoComplete" | "readOnly" | "required" | "max" | "src" | "alt" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "min" | "accept" | "capture" | "checked" | "formEncType" | "minLength"> & {
     allowDecimals?: boolean | undefined;
     allowNegativeValue?: boolean | undefined;
     id?: string | undefined;

package/build/components/AppServices/AppServices.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
-import { AppDetails, UserApp } from '../../types/index.js';
+import { AppService } from '../../types/index.js';
 import { ServiceItemProps } from './ServiceItem';
 interface AppServicesProps extends Pick<ServiceItemProps, 'onClickServiceItem'> {
-    appInfo: AppDetails;
-    userApp?: UserApp;
-    onChangeAppServiceCode?: (serviceCode: string) => void;
+    serviceCode: string;
+    services: AppService[];
+    isMaximized: boolean;
+    appCode: string;
+    dimensions: {
+        width: string | number;
+    };
+    onChangeServiceCode?: (serviceCode: string) => void;
 }
-declare function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceItem }: AppServicesProps): import("react/jsx-runtime").JSX.Element;
+declare function AppServices({ isMaximized, serviceCode, dimensions, appCode, services, onChangeServiceCode, onClickServiceItem, }: Readonly<AppServicesProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof AppServices>;
 export default _default;

package/build/components/AppServices/AppServices.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { memo, useEffect, useRef, useState, useMemo } from 'react';
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router';
 import { StyledIconForDropDown, StyledMenuTitle, StyledOption, StyledSelect, StyledSelectComponent } from '../index.js';
 import { APP_CODES, blackHeadingDownArrow, blueHeadingDropdownArrow } from '../../constants/index.js';
 import { getNameText } from '../../utils/index.js';
@@ -11,21 +10,20 @@ import { Wrapper } from './style';
 const selectedIcon = (props) => {
     return (_jsx(StyledIconForDropDown, { src: props.className.includes('MuiSelect-iconOpen') ? blueHeadingDropdownArrow : blackHeadingDownArrow, alt: "dropdown" }));
 };
-function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceItem }) {
+function AppServices({ isMaximized, serviceCode, dimensions, appCode, services, onChangeServiceCode, onClickServiceItem, }) {
     const [initServicesWidth, setInitServicesWidth] = useState(0);
     const [isDropdown, setIsDropdown] = useState(false);
     const [selectedOption, setSelectedOption] = useState('');
     const servicesRef = useRef(null);
     const [openDropdown, setOpenDropdown] = React.useState(false);
-    const pathname = useLocation();
     const { i18n } = useTranslation();
-    const services = useMemo(() => {
-        var _a, _b;
-        if (appInfo.appCode === APP_CODES.account.code) {
-            return (_a = userApp === null || userApp === void 0 ? void 0 : userApp.app_services.filter((service) => service.code === APP_CODES.account.services.account.code)) !== null && _a !== void 0 ? _a : [];
+    const servicesList = useMemo(() => {
+        var _a;
+        if (appCode === APP_CODES.account.code) {
+            return (_a = services.filter((service) => service.code === APP_CODES.account.services.account.code)) !== null && _a !== void 0 ? _a : [];
         }
-        return (_b = userApp === null || userApp === void 0 ? void 0 : userApp.app_services) !== null && _b !== void 0 ? _b : [];
-    }, [appInfo.appCode, userApp === null || userApp === void 0 ? void 0 : userApp.app_services]);
+        return services !== null && services !== void 0 ? services : [];
+    }, [appCode, services]);
     const handleChange = (event) => {
         setSelectedOption(event.target.value);
     };
@@ -34,8 +32,8 @@ function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceI
     };
     const activeTabTitle = useMemo(() => {
         var _a, _b;
-        return getNameText((_b = (_a = services.filter((service) => service.code.toLowerCase() === decodeURIComponent(appInfo.serviceCode).toLowerCase())) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name, i18n.language);
-    }, [pathname, appInfo.serviceCode]);
+        return getNameText((_b = (_a = servicesList.filter((service) => service.code.toLowerCase() === decodeURIComponent(serviceCode).toLowerCase())) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name, i18n.language);
+    }, [servicesList, i18n.language, serviceCode]);
     useEffect(() => {
         setSelectedOption(activeTabTitle);
     }, [activeTabTitle]);
@@ -47,14 +45,14 @@ function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceI
         setInitServicesWidth(((_a = servicesRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) + iconSize + iconGap + iconMargin);
     }, []);
     useEffect(() => {
-        setIsDropdown(Number(appInfo === null || appInfo === void 0 ? void 0 : appInfo.dimensions.width) < initServicesWidth + 10);
-    }, [appInfo === null || appInfo === void 0 ? void 0 : appInfo.dimensions.width]);
-    const navigateToService = (serviceCode) => {
-        onChangeAppServiceCode === null || onChangeAppServiceCode === void 0 ? void 0 : onChangeAppServiceCode(serviceCode);
+        setIsDropdown(Number(dimensions.width) < initServicesWidth + 10);
+    }, [dimensions.width, initServicesWidth]);
+    const navigateToService = (newServiceCode) => {
+        onChangeServiceCode === null || onChangeServiceCode === void 0 ? void 0 : onChangeServiceCode(newServiceCode);
         setOpenDropdown(false);
     };
     const renderValue = (selected) => _jsx(StyledSelectComponent, { children: selected });
-    return (_jsxs(Wrapper, Object.assign({ maximized: appInfo.isMaximized }, { children: [services.length && !isDropdown && (_jsx(Box, Object.assign({ ref: servicesRef, display: "flex", gap: "8px", flexDirection: "row", sx: { userSelect: 'none' } }, { children: services.map((service, idx) => (_jsx(ServiceItem, { appInfo: appInfo, onClickServiceItem: onClickServiceItem, navigateToMenuItem: navigateToService, name: getNameText(service.name, i18n.language) || '', code: service.code }, `service-item-${service.code}-${idx}`))) }))), services.length && isDropdown && (_jsx(StyledSelect, Object.assign({ open: openDropdown, onClick: handleOpenDropdown, displayEmpty: true, inputProps: { 'aria-label': 'Without label' }, MenuProps: {
+    return (_jsxs(Wrapper, Object.assign({ maximized: isMaximized }, { children: [!!services.length && !isDropdown && (_jsx(Box, Object.assign({ ref: servicesRef, display: "flex", gap: "8px", flexDirection: "row", sx: { userSelect: 'none' } }, { children: services.map((service, idx) => (_jsx(ServiceItem, { activeCode: serviceCode, onClickServiceItem: onClickServiceItem, navigateToMenuItem: navigateToService, name: getNameText(service.name, i18n.language) || '', code: service.code }, `service-item-${service.code}-${idx}`))) }))), !!services.length && isDropdown && (_jsx(StyledSelect, Object.assign({ open: openDropdown, onClick: handleOpenDropdown, displayEmpty: true, inputProps: { 'aria-label': 'Without label' }, MenuProps: {
                     anchorOrigin: {
                         vertical: 40,
                         horizontal: 83,
@@ -74,7 +72,7 @@ function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceI
                         paddingTop: '0px !important',
                         paddingBottom: '0px !important',
                     },
-                } }, { children: services.map((service) => {
+                } }, { children: services.map((service, idx) => {
                     var _a;
                     if (((_a = getNameText(service.name, i18n.language)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.toLowerCase())) {
                         return null;
@@ -83,7 +81,7 @@ function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceI
                             e.preventDefault();
                             e.stopPropagation();
                             navigateToService(service.code);
-                        } }, { children: _jsx(StyledMenuTitle, { children: getNameText(service.name, i18n.language) }) })));
+                        } }, { children: _jsx(StyledMenuTitle, { children: getNameText(service.name, i18n.language) }) }), `option-${service.code}-${idx}`));
                 }) })))] })));
 }
 export default memo(AppServices);

package/build/components/AppServices/ServiceItem.d.ts

@@ -1,14 +1,12 @@
 /// <reference types="react" />
-import { AppDetails } from '../../types/index.js';
 export interface ServiceItemProps {
-    appInfo: AppDetails;
+    activeCode: string;
     isDropdown?: boolean;
     name: string;
     code: string;
-    onDropdownClick?: () => void;
     navigateToMenuItem: (serviceCode: string) => void;
     onClickServiceItem?: (code: string) => void;
 }
-declare function ServiceItem({ isDropdown, name, code, appInfo, onDropdownClick, navigateToMenuItem, onClickServiceItem }: ServiceItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ServiceItem({ isDropdown, name, code, activeCode, navigateToMenuItem, onClickServiceItem }: Readonly<ServiceItemProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof ServiceItem>;
 export default _default;

package/build/components/AppServices/ServiceItem.js

@@ -5,7 +5,7 @@ import { DropdownMenu, Icon } from '../index.js';
 import { isInsightService } from '../../utils/index.js';
 import { homeIcon, newWindowIcon } from '../../constants/index.js';
 import { ServiceItemStyled } from './style';
-function ServiceItem({ isDropdown = false, name, code, appInfo, onDropdownClick, navigateToMenuItem, onClickServiceItem }) {
+function ServiceItem({ isDropdown = false, name, code, activeCode, navigateToMenuItem, onClickServiceItem }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const { t } = useTranslation();
     const open = Boolean(anchorEl);
@@ -13,7 +13,7 @@ function ServiceItem({ isDropdown = false, name, code, appInfo, onDropdownClick,
         setAnchorEl(null);
     };
     const isHomeService = isInsightService(code);
-    return (_jsxs(_Fragment, { children: [_jsx(ServiceItemStyled, Object.assign({ isDropdown: isDropdown, className: appInfo.serviceCode.toLowerCase() === code.toLowerCase() ? 'active' : '', onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx(ServiceItemStyled, Object.assign({ isDropdown: isDropdown, className: activeCode.toLowerCase() === code.toLowerCase() ? 'active' : '', onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     navigateToMenuItem(code);
@@ -31,8 +31,6 @@ function ServiceItem({ isDropdown = false, name, code, appInfo, onDropdownClick,
                             e.stopPropagation();
                             onClickServiceItem === null || onClickServiceItem === void 0 ? void 0 : onClickServiceItem(code);
                             handleClose();
-                            if (onDropdownClick)
-                                onDropdownClick();
                         },
                     },
                 ] })] }));

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { DragControls } from 'framer-motion';
+import { SxProps, Theme } from '@mui/material/styles';
+import { AppService } from '../../types/index.js';
+export interface AppServicesBarProps {
+    appCode: string;
+    services: AppService[];
+    isMaximized: boolean;
+    dimensions: {
+        width: number | string;
+    };
+    features: {
+        sandboxMode: boolean;
+        initialServiceCode?: string;
+    };
+    ui: {
+        onStartDrag: DragControls['start'];
+    };
+    onChangeServiceCode: (serviceCode: string) => void;
+    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 const _default: import("react").MemoExoticComponent<typeof AppServicesBar>;
+export default _default;

package/build/components/AppServicesBar/AppServicesBar.js

@@ -0,0 +1,18 @@
+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, }) {
+    const [isDragging, setIsDragging] = useState(false);
+    const onPointerDown = useCallback((e) => {
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
+        setIsDragging(true);
+    }, [onStartDrag, setIsDragging]);
+    const onPointerUp = () => {
+        setIsDragging(false);
+    };
+    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 }) })));
+}
+export default memo(AppServicesBar);

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

@@ -0,0 +1,3 @@
+import AppServicesBar from './AppServicesBar';
+export * from './AppServicesBar';
+export default AppServicesBar;

package/build/components/AppServicesBar/index.js

@@ -0,0 +1,3 @@
+import AppServicesBar from './AppServicesBar';
+export * from './AppServicesBar';
+export default AppServicesBar;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const AppContainerHeader: 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;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/AppServicesBar/style.js

@@ -0,0 +1,6 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const AppContainerHeader = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center'
+}));

package/build/components/ListLayout/ListLayout.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { ListLayoutStyled } from './styles';
+interface ListLayoutProps extends ComponentPropsWithoutRef<typeof ListLayoutStyled> {
+}
+declare function ListLayout({ children, ...props }: Readonly<ListLayoutProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace ListLayout {
+    var displayName: string;
+}
+declare const _default: import("react").MemoExoticComponent<typeof ListLayout>;
+export default _default;

package/build/components/ListLayout/ListLayout.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { ListLayoutStyled } from './styles';
+function ListLayout(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (_jsx(ListLayoutStyled, Object.assign({ component: 'article', "data-testid": 'ListLayout' }, props, { children: children })));
+}
+ListLayout.displayName = 'ListLayout';
+export default memo(ListLayout);

package/build/components/ListLayout/index.d.ts

@@ -0,0 +1,2 @@
+import ListLayout from './ListLayout';
+export default ListLayout;

package/build/components/ListLayout/index.js

@@ -0,0 +1,2 @@
+import ListLayout from './ListLayout';
+export default ListLayout;

package/build/components/ListLayout/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ListLayoutStyled: 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;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/ListLayout/styles.js

@@ -0,0 +1,9 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const ListLayoutStyled = styled(Box)(() => ({
+    flex: 1,
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+}));

package/build/components/SearchButton/styles.d.ts

@@ -9,12 +9,12 @@ export declare const StyledInput: import("@emotion/styled").StyledComponent<{
     color?: string | undefined;
     content?: string | undefined;
     translate?: "yes" | "no" | undefined;
+    name?: string | undefined;
     value?: string | number | readonly string[] | undefined;
     list?: string | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     title?: string | undefined;
-    name?: string | undefined;
     className?: string | undefined;
     pattern?: string | undefined;
     defaultChecked?: boolean | undefined;

package/build/components/ToggleView/ToggleView.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ToggleViews, ToggleViewsValues } from './types';
+declare const DEFAULT_TOGGLE_VIEWS: {
+    icon: import("react/jsx-runtime").JSX.Element;
+    value: ToggleViews;
+}[];
+export interface ToggleViewProps {
+    onToggleClick: (view: ToggleViewsValues) => void;
+    currentView: ToggleViewsValues;
+    getOverrideViews?: (defaultViews: typeof DEFAULT_TOGGLE_VIEWS) => {
+        icon: React.ReactNode;
+        value: ToggleViewsValues;
+    }[];
+}
+declare const ToggleView: (props: ToggleViewProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ToggleView;

package/build/components/ToggleView/ToggleView.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cardViewButtonIcon, listViewButtonIcon } from '../../constants/index.js';
+import { ActiveOverlay, ViewButton } from './style';
+import { ToggleViews } from './types';
+import { useMemo } from 'react';
+import ToggleWrapper from './ToggleWrapper';
+const DEFAULT_TOGGLE_VIEWS = [
+    {
+        icon: _jsx("img", { src: cardViewButtonIcon, alt: "card" }),
+        value: ToggleViews.CARDS,
+    },
+    {
+        icon: _jsx("img", { src: listViewButtonIcon, alt: ToggleViews.LIST }),
+        value: ToggleViews.LIST,
+    },
+];
+const ToggleView = (props) => {
+    const { currentView, onToggleClick, getOverrideViews } = props;
+    const views = useMemo(() => {
+        if (getOverrideViews)
+            return getOverrideViews(DEFAULT_TOGGLE_VIEWS);
+        return DEFAULT_TOGGLE_VIEWS;
+    }, [getOverrideViews]);
+    const viewIndex = useMemo(() => views.findIndex((view) => view.value === currentView), [views, currentView]);
+    if (!onToggleClick)
+        return null;
+    return (_jsxs(ToggleWrapper, { children: [views.map((view) => (_jsx(ViewButton, Object.assign({ onClick: () => onToggleClick(view.value), sx: {
+                    height: '11.6px',
+                    width: '11.6px',
+                }, isActive: currentView === view.value }, { children: view.icon }), view.value))), _jsx(ActiveOverlay, { activeIndex: viewIndex })] }));
+};
+export default ToggleView;

package/build/components/ToggleView/ToggleWrapper.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { type BoxProps } from '@mui/material/Box';
+declare const ToggleWrapper: (props: PropsWithChildren<BoxProps>) => import("react/jsx-runtime").JSX.Element;
+export default ToggleWrapper;

package/build/components/ToggleView/ToggleWrapper.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ToggleWrapperStyled } from './style';
+const ToggleWrapper = (props) => {
+    const viewTogglers = React.Children.count(props.children) - 1;
+    return _jsx(ToggleWrapperStyled, Object.assign({}, props, { sx: { width: viewTogglers * 30 + 2 } }));
+};
+export default ToggleWrapper;

package/build/components/ToggleView/index.d.ts

@@ -0,0 +1,3 @@
+import ToggleView from './ToggleView';
+export default ToggleView;
+export * from './types';

package/build/components/ToggleView/index.js

@@ -0,0 +1,3 @@
+import ToggleView from './ToggleView';
+export default ToggleView;
+export * from './types';

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const ToggleWrapperStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ViewButton: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isActive: boolean;
+}, {}, {}>;
+export declare const ActiveOverlay: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    activeIndex: number;
+}, {}, {}>;

package/build/components/ToggleView/style.js

@@ -0,0 +1,31 @@
+import { Box, styled } from '@mui/material';
+export const ToggleWrapperStyled = styled(Box)(({ theme }) => ({
+    height: '32px',
+    borderRadius: '4px',
+    backgroundColor: theme.palette.action.hover,
+    padding: '2px',
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    cursor: 'pointer'
+}));
+export const ViewButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ isActive }) => ({
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    zIndex: 2,
+    opacity: isActive ? 1 : 0.5
+}));
+export const ActiveOverlay = styled(Box, { shouldForwardProp: (props) => props !== 'activeIndex' })(({ theme, activeIndex }) => ({
+    position: 'absolute',
+    top: 2,
+    left: activeIndex * 30 + 2,
+    transition: 'all 0.25s ease-in-out',
+    width: '28px',
+    height: '28px',
+    backgroundColor: theme.palette.common.white,
+    borderRadius: '2px',
+    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)'
+}));

package/build/components/ToggleView/types.d.ts

@@ -0,0 +1,6 @@
+export declare enum ToggleViews {
+    LIST = "LIST",
+    CARDS = "CARDS",
+    MAP = "MAP"
+}
+export type ToggleViewsValues = `${ToggleViews}` | (string & {});

package/build/components/ToggleView/types.js

@@ -0,0 +1,6 @@
+export var ToggleViews;
+(function (ToggleViews) {
+    ToggleViews["LIST"] = "LIST";
+    ToggleViews["CARDS"] = "CARDS";
+    ToggleViews["MAP"] = "MAP";
+})(ToggleViews || (ToggleViews = {}));

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

@@ -13,6 +13,12 @@ export declare const StyledHeaderWrapper: import("@emotion/styled").StyledCompon
     maximized?: boolean | undefined;
     isDragging?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledAppHeaderWrapper: 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;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    sandboxMode?: boolean | undefined;
+    isDragging?: boolean | undefined;
+}, {}, {}>;
 export declare const ToolbarStyled: 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;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {

package/build/components/Toolbar/style.js

@@ -44,6 +44,11 @@ export const StyledHeaderWrapper = styled('div', {
 })), (isDragging && {
     cursor: 'move',
 })), { margin: 0 })));
+export const StyledAppHeaderWrapper = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'maximized' && prop !== 'isDragging',
+})(({ isDragging }) => (Object.assign(Object.assign({}, (isDragging && {
+    cursor: 'move',
+})), { margin: 0 })));
 export const ToolbarStyled = styled(Box, {
     shouldForwardProp: (props) => props !== 'maximized' && props !== 'isHovered',
 })(({ theme, maximized }) => (Object.assign(Object.assign({ height: 32, position: 'relative', display: 'flex', width: '100%', justifyContent: 'center', transition: 'all 0.5s ease-in-out', borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }, (maximized && {

package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ISheetViewVirtualTable } from './types';
-declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
 export default _default;

package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.js

@@ -6,7 +6,7 @@ import { SheetViewTableContainer } from '../components/style';
 import { SheetViewVirtualTableWrapper } from './style';
 import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths } from './hooks';
 import { PinnedColumn, MainTable, LoadingMainTable, NoDataView, VirtualTable } from './components';
-function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, }) {
+function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, }) {
     const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
     const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView, lastItemIndex, areTotalRowsNotFillingHeight, itemsCount, isDelayedFetchingNextPage, } = useTableData({
         rows,
@@ -35,7 +35,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         handleChipClick,
     });
     const onPointerDown = (e) => {
-        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
     };
     const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
         const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;

package/build/components/VirtualTables/VirtualTable/VirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../../types/index.js';
-declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView, isMinimized, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView, isMinimized, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

package/build/components/VirtualTables/VirtualTable/VirtualTable.js

@@ -34,11 +34,11 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     areAllRowsLoaded,
     isSheetView,
 }));
-function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView = false, isMinimized, }) {
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
-        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
     };
     const isDelayedFetchingNextPage = useDelayToSetValue({
         value: isFetchingNextPage,

package/build/components/VirtualTables/VirtualTableWithCard/VirtualTableWithCard.d.ts

@@ -8,6 +8,6 @@ export interface VirtualTableWithCardProps extends Omit<IVirtualTable, 'showHead
     tableHeight: number;
     tableHeaderHeight?: number;
 }
-declare function VirtualTableWithCard({ rows, threshold, rowProps, footerProps, rowHeight, isLoading, error, tableHeader, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, renderCardComponent, cardLoadingComponent, tableHeight, tableHeaderHeight, noDataComponent, dragControls, }: VirtualTableWithCardProps): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTableWithCard({ rows, threshold, rowProps, footerProps, rowHeight, isLoading, error, tableHeader, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, renderCardComponent, cardLoadingComponent, tableHeight, tableHeaderHeight, noDataComponent, onStartDrag, }: Readonly<VirtualTableWithCardProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTableWithCard>;
 export default _default;

package/build/components/VirtualTables/VirtualTableWithCard/VirtualTableWithCard.js

@@ -32,11 +32,11 @@ const createItemData = memoize((isLoading, rows, rowProps, scrollToIndex, lastIt
     areAllRowsLoaded,
     renderCardComponent,
 }));
-function VirtualTableWithCard({ rows, threshold = TABLE_THRESHOLD, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, tableHeader, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, renderCardComponent, cardLoadingComponent, tableHeight, tableHeaderHeight, noDataComponent, dragControls, }) {
+function VirtualTableWithCard({ rows, threshold = TABLE_THRESHOLD, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, tableHeader, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, renderCardComponent, cardLoadingComponent, tableHeight, tableHeaderHeight, noDataComponent, onStartDrag, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
-        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
     };
     const isDelayedFetchingNextPage = useDelayToSetValue({
         value: isFetchingNextPage,

package/build/components/VirtualTables/components/style.js

@@ -146,7 +146,7 @@ export const SheetViewTableContainer = styled(Box)(() => ({
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    height: '100%',
+    height: 'calc(100vh - 300px)',
     paddingInline: '28px',
     borderRadius: '8px',
     marginBottom: '16px !important',

package/build/components/index.d.ts

@@ -97,6 +97,10 @@ export { default as AppServices } from './AppServices';
 export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';
 export * from './TooltipChip';
+export { default as ListLayout } from './ListLayout';
+export * from './ListLayout';
+export { default as ToggleView } from './ToggleView';
+export * from './ToggleView';
 export * from './RightLeftExpandingCenterChip';
 export { default as StatusChipWithCopy } from './StatusChipWithCopy';
 export * from './RadioButton';
@@ -106,3 +110,5 @@ export { default as ColorPicker } from './ColorPicker';
 export { default as WindowBackdrop } from './WindowBackdrop';
 export { default as LazyImage } from './LazyImage';
 export * from './LazyImage';
+export { default as AppServicesBar } from './AppServicesBar';
+export * from './AppServicesBar';

package/build/components/index.js

@@ -97,6 +97,10 @@ export { default as AppServices } from './AppServices';
 export { default as ScrollLoader } from './ScrollLoader';
 export * from './ScrollLoader';
 export * from './TooltipChip';
+export { default as ListLayout } from './ListLayout';
+export * from './ListLayout';
+export { default as ToggleView } from './ToggleView';
+export * from './ToggleView';
 export * from './RightLeftExpandingCenterChip';
 export { default as StatusChipWithCopy } from './StatusChipWithCopy';
 export * from './RadioButton';
@@ -106,3 +110,5 @@ export { default as ColorPicker } from './ColorPicker';
 export { default as WindowBackdrop } from './WindowBackdrop';
 export { default as LazyImage } from './LazyImage';
 export * from './LazyImage';
+export { default as AppServicesBar } from './AppServicesBar';
+export * from './AppServicesBar';

package/build/constants/apps.d.ts

@@ -719,3 +719,6 @@ export declare const APP_ICONS: {
     toolbarIconUrl: string;
 }[];
 export declare const excludedApps: string[];
+export declare const MF_APPS_MAPPER: Readonly<{
+    TERMINALS: "TERMINALS";
+}>;

package/build/constants/apps.js

@@ -359,3 +359,6 @@ export const APP_ICONS = [
     },
 ];
 export const excludedApps = ['login'];
+export const MF_APPS_MAPPER = Object.freeze({
+    TERMINALS: 'TERMINALS',
+});

package/build/types/apps.d.ts

@@ -1,6 +1,11 @@
 import { ColumnsView } from './column';
-import { TextAndLang } from './user';
+import { Segment, SegmentCountry, TextAndLang } from './user';
 import { BusinessMerchant } from './merchant';
+import type { i18n } from 'i18next';
+import type { DragControls } from 'framer-motion';
+import { Theme } from '@mui/material';
+import { CalenderMode } from './theme';
+import { Timezone } from './appConfig';
 export interface AccountAppPayload {
     disabledAccountDataFetching?: boolean;
     isAccountDetailsOpen: boolean;
@@ -63,3 +68,47 @@ export interface UserApp {
     name: TextAndLang[];
     app_services: AppService[];
 }
+export type MFWidgetBaseProps = {
+    id: string;
+    i18n?: i18n;
+    app?: UserApp;
+    appWindow: {
+        isMinimized: boolean;
+        isMaximized: boolean;
+        order: number;
+        dimensions: Pick<AppDetails['dimensions'], 'width' | 'height'>;
+    };
+    features: {
+        hasReportsApp: boolean;
+        hasHeader: boolean;
+        sandboxMode: boolean;
+        initialServiceCode?: string;
+    };
+    segment: Pick<Segment, 'id' | 'brands' | 'countries'> & {
+        defaultCountry?: SegmentCountry;
+    };
+    ui: {
+        theme: Theme;
+        onStartDrag: DragControls['start'];
+    };
+    calendar: {
+        mode: CalenderMode;
+        onSwitch: (mode: CalenderMode) => void;
+    };
+    navigation: {
+        openAppService: (navigation: {
+            id?: string;
+            appCode: string;
+            serviceCode: string;
+        }) => void;
+        openApp: (app: Pick<AppDetails, 'appCode' | 'serviceCode' | 'payload'> & {
+            sandboxMode?: boolean;
+        }) => void;
+    };
+    timezone: {
+        current?: Timezone | null;
+        default?: Timezone;
+        onChange: (timezone: Timezone) => void;
+        onChangeHistory: (timezone: Timezone) => void;
+    };
+};

package/build/types/table.d.ts

@@ -136,7 +136,7 @@ export interface IVirtualTable<R = any> {
         height: string | number;
         width: string | number;
     };
-    dragControls?: DragControls;
+    onStartDrag?: DragControls['start'];
     isSheetView?: boolean;
     isMinimized?: boolean;
 }

package/build/utils/style.js

@@ -31,6 +31,10 @@ export const getSelectionStyles = ({ isSelected, isCellSelected, isColumnSelecte
 const getRowSelectionStyles = () => ({
     backgroundColor: SELECTION_COLORS.background,
     color: SELECTION_COLORS.primary,
+    border: 'none',
+    '&:before': {
+        border: 'none',
+    },
 });
 const getSingleCellSelectionStyles = () => ({
     border: `${BORDER_STYLES.thin} solid ${SELECTION_COLORS.primary}`,

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.96-test.1",
-  "testVersion": 1,
+  "version": "0.1.96-test.12",
+  "testVersion": 12,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
   "types": "build/index.d.ts",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
       "types": "./build/index.d.ts",
       "import": "./build/index.js",
@@ -127,6 +128,32 @@
     "vite": "6.0.5",
     "vite-tsconfig-paths": "^4.2.0"
   },
+  "peerDependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "@mui/material": "^5",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "framer-motion": "^10",
+    "react-hook-form": "^7",
+    "@hookform/resolvers": "^3",
+    "react-router-dom": "^7",
+    "i18next": "^22",
+    "react-i18next": "^12",
+    "react-multi-date-picker": "^4",
+    "dayjs": "^1",
+    "react-dropzone": "^14",
+    "react-hot-toast": "^2",
+    "recharts": "^2",
+    "react-window": "^1.8",
+    "react-window-infinite-loader": "^1",
+    "react-virtualized-auto-sizer": "^1",
+    "re-resizable": "^6",
+    "react-draggable": "^4",
+    "react-currency-input-field": "^3",
+    "react18-input-otp": "^1",
+    "@uiw/react-json-view": "^2.0.0-alpha"
+  },
   "lint-staged": {
     "src/**/*.{ts,tsx,json,js,jsx}": [
       "yarn run prettier:fix",