@topconsultnpm/sdkui-react 6.22.0-dev2.43 → 6.22.0-dev2.45

package/lib/components/sidebar/TMHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useMemo } from 'react';
 import six from '../../assets/six.png';
-import { getAvatarColor, IconCloseOutline, IconCopy, openApps, SDKUI_Localizator } from '../../helper';
+import { getAvatarColor, IconCloseOutline, IconCopy, IconOpenInNew, openApps, SDKUI_Localizator, WHATS_NEWS_LINK_URL } from '../../helper';
 import styled, { keyframes } from 'styled-components';
 import { SDK_Globals, AuthenticationModes, AppModules, UserLevels, CultureIDs } from '@topconsultnpm/sdk-ts';
 import { TMColors } from '../../utils/theme';
@@ -10,6 +10,7 @@ import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 import { TMAboutApp } from './TMAboutApp';
 import ShowAlert from '../base/TMAlert';
 import TMResizableMenu from '../base/TMResizableMenu';
+import TMTooltip from '../base/TMTooltip';
 import it from '../../assets/italy.svg';
 import de from '../../assets/german.svg';
 import fr from '../../assets/france.svg';
@@ -253,10 +254,10 @@ const TMHeader = ({ customButtons = _jsx(_Fragment, {}), onMenusOpen, showSettin
                     e.preventDefault();
                     setMenuStatus(prev => !prev);
                 }, children: _jsx(UserAvatar, { "$bgColor": avatarColor, children: userInitials }) }), menuStatus &&
-                _jsx(TMResizableMenu, { ref: menuRef, isVisible: menuStatus, top: 60, right: 10, resizable: false, maxWidth: 300, minWidth: 300, maxHeight: 180, minHeight: 180, padding: 0, children: _jsxs(MenuContainer, { children: [_jsxs(UserProfileSection, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, height: 'max-content' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, height: 'max-content' }, children: [_jsx(AvatarContainer, { children: _jsx(UserAvatarLarge, { "$bgColor": avatarColor, children: userInitials }) }), _jsxs(UserInfo, { children: [_jsxs(UserNameContainer, { children: [_jsx(UserName, { children: userName }), _jsx(CultureFlag, { src: cultureFlag, alt: cultureName, title: cultureName })] }), domain && _jsx(SessionInfo, { style: { padding: 0, margin: 0 }, children: `(${domain})` })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', gap: 5 }, children: [_jsx(SessionInfo, { children: endpoint }), _jsx(SessionInfo, { children: archiveId + ' (' + archiveDesc + ')' })] })] }), _jsx(CopyIcon, { onClick: (e) => {
-                                            e.stopPropagation();
-                                            copyUserInfoToClipboard(userName, cultureId, archiveId, archiveDesc, endpoint, domain);
-                                        }, title: SDKUI_Localizator.CopyUserInfo, children: _jsx(IconCopy, { fontSize: 12 }) }), _jsx(LogoutButton, { onClick: () => {
+                _jsx(TMResizableMenu, { ref: menuRef, isVisible: menuStatus, top: 60, right: 10, resizable: false, maxWidth: 300, minWidth: 300, maxHeight: 188, minHeight: 188, padding: 0, children: _jsxs(MenuContainer, { children: [_jsxs(UserProfileSection, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, height: 'max-content', flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, height: 'max-content' }, children: [_jsx(AvatarContainer, { children: _jsx(UserAvatarLarge, { "$bgColor": avatarColor, children: userInitials }) }), _jsxs(UserInfo, { children: [_jsxs(UserNameContainer, { children: [_jsx(UserName, { children: userName }), _jsx(CultureFlag, { src: cultureFlag, alt: cultureName, title: cultureName })] }), domain && _jsx(SessionInfo, { style: { padding: 0, margin: 0 }, children: `(${domain})` })] })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', gap: 5, flex: 1, minWidth: 0 }, children: [_jsx(SessionInfo, { children: endpoint }), _jsx(SessionInfo, { children: archiveId + ' (' + archiveDesc + ')' })] }), _jsxs(HeaderMenuActions, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.CopyUserInfo, children: _jsx(HeaderMenuActionIcon, { "$color": '#605e5c', onClick: (e) => {
+                                                                        e.stopPropagation();
+                                                                        copyUserInfoToClipboard(userName, cultureId, archiveId, archiveDesc, endpoint, domain);
+                                                                    }, children: _jsx(IconCopy, { fontSize: 14 }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.ShowReleaseNotesInfo, children: _jsx(HeaderMenuActionIcon, { as: 'a', "$color": TMColors.primary, href: WHATS_NEWS_LINK_URL, target: '_blank', rel: 'noopener noreferrer', onClick: (e) => e.stopPropagation(), children: _jsx(IconOpenInNew, { fontSize: 14 }) }) })] })] })] }), _jsx(LogoutButton, { onClick: () => {
                                             setMenuStatus(false);
                                             onLogout && onLogout();
                                         }, children: _jsx(LogoutText, { children: SDKUI_Localizator.Logout }) })] }), _jsxs(BottomActionsContainer, { children: [isTopMediaAuth && (_jsx(BottomActionButton, { onClick: () => {
@@ -468,8 +469,9 @@ const MenuContainer = styled.div `
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
 `;
 const UserProfileSection = styled.div `
+    position: relative;
     display: flex;
-    padding: 20px;  
+    padding: 16px 20px;  
     background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
     border-bottom: 1px solid #e1e5e9;
     gap: 12px;
@@ -515,7 +517,7 @@ const CultureFlag = styled.img `
 `;
 const LogoutButton = styled.div `
     position: absolute;
-    top: 20px;
+    top: 16px;
     right: 20px;
     cursor: pointer;
     transition: all 0.2s ease;
@@ -546,29 +548,37 @@ const AvatarContainer = styled.div `
     position: relative;
     flex-shrink: 0;
 `;
-const CopyIcon = styled.div `
-    position: absolute;
-    bottom: 50px;
-    right: 15px;
-    width: 20px;
-    height: 20px;
+const HeaderMenuActions = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex-shrink: 0;
+`;
+const HeaderMenuActionIcon = styled.div `
+    width: 22px;
+    height: 22px;
     background: white;
-    border: 1px solid #e1e5e9;
+    border: 1px solid ${props => props.$color}55;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    color: #605e5c;
     transition: all 0.2s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    z-index: 10;
-    opacity: 0.6;
+    text-decoration: none;
 
-    &:hover {
-        background: #b7b7b7;
+    /* "&&" alza la specificita': un eventuale "a, a:visited { color: inherit }"
+       dell'app ospite vincerebbe sulla singola classe di styled-components */
+    &&,
+    &&:visited {
+        color: ${props => props.$color};
+    }
+
+    &&:hover {
+        background: ${props => props.$color};
+        border-color: ${props => props.$color};
         color: white;
-        opacity: 1;
     }
 
     &:active {

package/lib/components/viewers/TMDataListItemViewer.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DataListViewModes } from '@topconsultnpm/sdk-ts';
 import { DataGridTypes } from 'devextreme-react/data-grid';
 interface ITMDataListItemViewerProps {
@@ -8,6 +7,6 @@ interface ITMDataListItemViewerProps {
     showTooltip?: boolean;
     width?: string;
 }
-declare const TMDataListItemViewer: ({ dataListId, value, viewMode, showTooltip, width }: ITMDataListItemViewerProps) => React.JSX.Element | null;
+declare const TMDataListItemViewer: ({ dataListId, value, viewMode, showTooltip, width }: ITMDataListItemViewerProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TMDataListItemViewer;
-export declare const cellRenderDataListItem: (data: DataGridTypes.ColumnCellTemplateData, dataListId?: number, viewMode?: DataListViewModes) => React.JSX.Element;
+export declare const cellRenderDataListItem: (data: DataGridTypes.ColumnCellTemplateData, dataListId?: number, viewMode?: DataListViewModes) => import("react/jsx-runtime").JSX.Element;

package/lib/components/viewers/TMDataUserIdItemViewer.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 import { DataGridTypes } from 'devextreme-react/data-grid';
 interface ITMDataUserIdItemViewerProps {
     userId?: number;
     showIcon?: boolean;
 }
-declare const TMDataUserIdItemViewer: ({ userId, showIcon }: ITMDataUserIdItemViewerProps) => React.JSX.Element | null;
+declare const TMDataUserIdItemViewer: ({ userId, showIcon }: ITMDataUserIdItemViewerProps) => import("react/jsx-runtime").JSX.Element | null;
 export default TMDataUserIdItemViewer;
-export declare const cellRenderUserIdItem: (data: DataGridTypes.ColumnCellTemplateData, showIcon?: boolean) => React.JSX.Element;
+export declare const cellRenderUserIdItem: (data: DataGridTypes.ColumnCellTemplateData, showIcon?: boolean) => import("react/jsx-runtime").JSX.Element;

package/lib/components/viewers/TMMidViewer.d.ts

@@ -22,7 +22,7 @@ interface ITMMetadataIcon {
     isMetadataSelected?: boolean;
     elementStyle?: React.CSSProperties;
 }
-export declare const TMMetadataIcon: ({ tid, md, color, layoutMode, isMetadataSelected, elementStyle }: ITMMetadataIcon) => React.JSX.Element | null;
+export declare const TMMetadataIcon: ({ tid, md, color, layoutMode, isMetadataSelected, elementStyle }: ITMMetadataIcon) => import("react/jsx-runtime").JSX.Element | null;
 interface ITMMetadataTooltip {
     tid: number | undefined;
     md: MetadataDescriptor | undefined;
@@ -31,6 +31,6 @@ interface ITMMetadataTooltip {
     layoutMode?: LayoutModes;
 }
 export declare const TMMetadataTooltip: React.FC<ITMMetadataTooltip>;
-export declare const cellRenderMID: (data: DataGridTypes.ColumnCellTemplateData, noneSelectionText?: string, tid?: number) => React.JSX.Element;
+export declare const cellRenderMID: (data: DataGridTypes.ColumnCellTemplateData, noneSelectionText?: string, tid?: number) => import("react/jsx-runtime").JSX.Element;
 export declare const getDisplayAlias: (dcmtTypeName: string | undefined, alias: string | undefined) => string | undefined;
 export {};

package/lib/components/viewers/TMTidViewer.d.ts

@@ -252,5 +252,5 @@ export interface ITMTidViewerProps {
 }
 declare const TMTidViewer: React.FC<ITMTidViewerProps>;
 export default TMTidViewer;
-export declare const cellRenderTID: (data: DataGridTypes.ColumnCellTemplateData, noneSelectionText?: string) => React.JSX.Element;
-export declare const renderDTDTooltipContent: (dtd: DcmtTypeDescriptor | undefined) => React.JSX.Element | null;
+export declare const cellRenderTID: (data: DataGridTypes.ColumnCellTemplateData, noneSelectionText?: string) => import("react/jsx-runtime").JSX.Element;
+export declare const renderDTDTooltipContent: (dtd: DcmtTypeDescriptor | undefined) => import("react/jsx-runtime").JSX.Element | null;

package/lib/helper/SDKUI_Globals.d.ts

@@ -37,6 +37,7 @@ export declare class UserSettings {
     dcmtCheckoutInfo: CheckoutInfo[];
     defaultCheckInOutFolder: string;
     documentDownloadSettings: DocumentDownloadSettings;
+    lastSeenAppVersion: string;
     constructor(skipCssUpdate?: boolean);
     /** Load settings from local storage or other sources */
     static LoadSettings(userID: number | undefined, archiveID: string | undefined): UserSettings;

package/lib/helper/SDKUI_Globals.js

@@ -59,6 +59,7 @@ export class UserSettings {
         this.dcmtCheckoutInfo = [];
         this.defaultCheckInOutFolder = DEFAULT_CHECK_IN_OUT_FOLDER;
         this.documentDownloadSettings = new DocumentDownloadSettings();
+        this.lastSeenAppVersion = '';
         this.themeSettings = new ThemeSettings(skipCssUpdate);
     }
     /** Load settings from local storage or other sources */

package/lib/helper/SDKUI_Localizator.d.ts

@@ -43,6 +43,10 @@ export declare class SDKUI_Localizator {
     static get Apply(): "Anwenden" | "Apply" | "Aplicar" | "Applique" | "Applica";
     static get ApplyAndClose(): "Anwenden und Schließen" | "Apply and close" | "Aplicar y cerrar" | "Applique et ferme" | "Aplicar e fechar" | "Applica e chiudi";
     static get ApplyContextualFilter(): string;
+    static get AppUpdatedMessage(): string;
+    static get AppUpdatedMessageFromTo(): string;
+    static get AppUpdatedSubMessage(): string;
+    static get AppUpdatedTitle(): string;
     static get Approve(): "Genehmigen" | "Approve" | "Aprobar" | "Approuver" | "Aprovar" | "Approva";
     static get Archive(): "Archiv" | "Archive" | "Almacenar" | "Armazena" | "Archivia";
     static get ArchiveConstraint(): "Archivierungsbeschränkung" | "Archive constraint" | "Vínculo de almacenamiento" | "Contrainte d'archivage" | "Armazenamento de restrição" | "Vincolo di archiviazione";
@@ -220,6 +224,7 @@ export declare class SDKUI_Localizator {
     static get DiagramItemTypes_End(): "Ende" | "End" | "Fin" | "Fim" | "Fine";
     static get Disabled(): "Deaktiviert" | "Disabled" | "Deshabilitado" | "Désactivé" | "Desabilitado" | "Disabilitato";
     static get DisableMultipleSelection(): string;
+    static get DiscoverWhatsNew(): string;
     static get DisplayFormat(): string;
     static get DisplayNameMethod(): string;
     static get DisplayNameMethod_Abstract(): string;
@@ -803,6 +808,7 @@ export declare class SDKUI_Localizator {
     static get ShowLeftPanel(): "Linkes Panel anzeigen" | "Show left panel" | "Mostrar panel izquierdo" | "Afficher le panneau de gauche" | "Mostrar painel esquerdo" | "Mostra il pannello sinistro";
     static get ShowMasterInfo(): string;
     static get ShowPartialResults(): string;
+    static get ShowReleaseNotesInfo(): string;
     static get ShowSearch(): "Suche anzeigen" | "Show search" | "Mostrar búsqueda" | "Afficher la recherche" | "Mostrar pesquisa" | "Mostra ricerca";
     static get ShowSharedDocuments(): "Gemeinsame Dokumente anzeigen" | "Show shared documents" | "Mostrar documentos compartidos" | "Afficher les documents partagés" | "Mostrar documentos compartilhados" | "Mostra documenti condivisi";
     static get ShowColumnSeparatingLines(): string;

package/lib/helper/SDKUI_Localizator.js

@@ -384,6 +384,46 @@ export class SDKUI_Localizator {
             default: return "Applica filtro contestuale";
         }
     }
+    static get AppUpdatedMessage() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Die Anwendung wurde auf Version {{0}} aktualisiert.";
+            case CultureIDs.En_US: return "The application has been updated to version {{0}}.";
+            case CultureIDs.Es_ES: return "La aplicación se ha actualizado a la versión {{0}}.";
+            case CultureIDs.Fr_FR: return "L'application a été mise à jour vers la version {{0}}.";
+            case CultureIDs.Pt_PT: return "A aplicação foi atualizada para a versão {{0}}.";
+            default: return "L'applicazione è stata aggiornata alla versione {{0}}.";
+        }
+    }
+    static get AppUpdatedMessageFromTo() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Die Anwendung wurde von Version {{0}} auf Version {{1}} aktualisiert.";
+            case CultureIDs.En_US: return "The application has been updated from version {{0}} to version {{1}}.";
+            case CultureIDs.Es_ES: return "La aplicación se ha actualizado de la versión {{0}} a la versión {{1}}.";
+            case CultureIDs.Fr_FR: return "L'application a été mise à jour de la version {{0}} à la version {{1}}.";
+            case CultureIDs.Pt_PT: return "A aplicação foi atualizada da versão {{0}} para a versão {{1}}.";
+            default: return "L'applicazione è stata aggiornata dalla versione {{0}} alla versione {{1}}.";
+        }
+    }
+    static get AppUpdatedSubMessage() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Entdecken Sie die neuen Funktionen und Verbesserungen dieser Version.";
+            case CultureIDs.En_US: return "Discover the new features and improvements introduced in this version.";
+            case CultureIDs.Es_ES: return "Descubra las nuevas funciones y mejoras introducidas en esta versión.";
+            case CultureIDs.Fr_FR: return "Découvrez les nouvelles fonctionnalités et améliorations de cette version.";
+            case CultureIDs.Pt_PT: return "Descubra as novas funcionalidades e melhorias desta versão.";
+            default: return "Scopri le nuove funzionalità e i miglioramenti introdotti in questa versione.";
+        }
+    }
+    static get AppUpdatedTitle() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Aktualisierung abgeschlossen";
+            case CultureIDs.En_US: return "Update completed";
+            case CultureIDs.Es_ES: return "Actualización completada";
+            case CultureIDs.Fr_FR: return "Mise à jour terminée";
+            case CultureIDs.Pt_PT: return "Atualização concluída";
+            default: return "Aggiornamento completato";
+        }
+    }
     static get Approve() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Genehmigen";
@@ -2149,6 +2189,16 @@ export class SDKUI_Localizator {
             default: return "Disabilita selezione multipla";
         }
     }
+    static get DiscoverWhatsNew() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Neuigkeiten entdecken";
+            case CultureIDs.En_US: return "Discover what's new";
+            case CultureIDs.Es_ES: return "Descubre las novedades";
+            case CultureIDs.Fr_FR: return "Découvrir les nouveautés";
+            case CultureIDs.Pt_PT: return "Descobrir as novidades";
+            default: return "Scopri le novità";
+        }
+    }
     static get DisplayFormat() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Anzeigeformat";
@@ -8010,6 +8060,16 @@ export class SDKUI_Localizator {
             default: return "Mostra risultati parziali";
         }
     }
+    static get ShowReleaseNotesInfo() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Informationen zu den Versionshinweisen anzeigen";
+            case CultureIDs.En_US: return "Show release notes information";
+            case CultureIDs.Es_ES: return "Mostrar información sobre las notas de la versión";
+            case CultureIDs.Fr_FR: return "Afficher les informations sur les notes de version";
+            case CultureIDs.Pt_PT: return "Mostrar informações sobre as notas de versão";
+            default: return "Mostra informazioni sulle note di rilascio";
+        }
+    }
     static get ShowSearch() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Suche anzeigen";

package/lib/helper/TMAppUpdatedModal.d.ts

@@ -0,0 +1 @@
+export declare const TMAppUpdatedModal: () => import("react/jsx-runtime").JSX.Element | null;

package/lib/helper/TMAppUpdatedModal.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { useDeviceType, TMModal } from '../components';
+import { calcResponsiveSizes, WHATS_NEWS_LINK_URL } from './helpers';
+import { SDKUI_Globals } from './SDKUI_Globals';
+import { SDKUI_Localizator } from './SDKUI_Localizator';
+import { IconUpdate, IconOpenInNew } from './TMIcons';
+import { getAppModuleButtonColors } from './TMUtils';
+const Content = styled.div `
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background-color: #ffffff;
+`;
+const Header = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 14px;
+    padding: 32px 30px 26px 30px;
+    background-color: ${({ $backgroundColor }) => $backgroundColor};
+    color: #ffffff;
+    text-align: center;
+`;
+const HeaderIcon = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 68px;
+    height: 68px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.18);
+    border: 1px solid rgba(255, 255, 255, 0.35);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
+`;
+const HeaderTitle = styled.h2 `
+    margin: 0;
+    font-size: 22px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+`;
+const VersionBadge = styled.span `
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 999px;
+    background-color: rgba(255, 255, 255, 0.22);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+`;
+const Body = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 26px 30px 22px 30px;
+    text-align: center;
+`;
+const Message = styled.p `
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.6;
+    color: #242424;
+`;
+const SubMessage = styled.p `
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.6;
+    color: #6b6b6b;
+`;
+const Footer = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 0 30px 28px 30px;
+`;
+const BaseButton = styled.button `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-width: 150px;
+    padding: 10px 18px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+`;
+const PrimaryButton = styled(BaseButton) `
+    border: 1px solid ${({ $base }) => $base};
+    background-color: ${({ $base }) => $base};
+    color: #ffffff;
+
+    &:hover {
+        background-color: ${({ $hover }) => $hover};
+        border-color: ${({ $hover }) => $hover};
+        box-shadow: 0 2px 8px ${({ $shadow }) => $shadow};
+    }
+`;
+const SecondaryButton = styled(BaseButton) `
+    border: 1px solid #d5d5d5;
+    background-color: #ffffff;
+    color: #444444;
+
+    &:hover {
+        background-color: #f3f3f3;
+        border-color: #bdbdbd;
+    }
+`;
+export const TMAppUpdatedModal = () => {
+    const deviceType = useDeviceType();
+    const currentVersion = SDK_Globals.appVersion ?? '';
+    const appModuleID = SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER;
+    const appModuleColors = useMemo(() => getAppModuleButtonColors(appModuleID), [appModuleID]);
+    const [previousVersion] = useState(() => SDKUI_Globals.userSettings.lastSeenAppVersion ?? '');
+    const [isOpen, setIsOpen] = useState(() => currentVersion !== '' && previousVersion !== currentVersion);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        SDKUI_Globals.userSettings.lastSeenAppVersion = currentVersion;
+    }, [isOpen, currentVersion]);
+    const onClose = () => { setIsOpen(false); };
+    if (!isOpen)
+        return null;
+    return (_jsx(TMModal, { width: calcResponsiveSizes(deviceType, '520px', '520px', '95%'), height: 'auto', showHeader: false, resizable: false, onClose: onClose, children: _jsxs(Content, { children: [_jsxs(Header, { "$backgroundColor": appModuleColors.base, children: [_jsx(HeaderIcon, { children: _jsx(IconUpdate, { fontSize: 34 }) }), _jsx(HeaderTitle, { children: SDKUI_Localizator.AppUpdatedTitle }), _jsx(VersionBadge, { children: `${SDK_Globals.appModule} ${currentVersion}` })] }), _jsxs(Body, { children: [_jsx(Message, { children: previousVersion
+                                ? SDKUI_Localizator.AppUpdatedMessageFromTo.replaceParams(previousVersion, currentVersion)
+                                : SDKUI_Localizator.AppUpdatedMessage.replaceParams(currentVersion) }), _jsx(SubMessage, { children: SDKUI_Localizator.AppUpdatedSubMessage })] }), _jsxs(Footer, { children: [_jsxs(PrimaryButton, { "$base": appModuleColors.base, "$hover": appModuleColors.hover, "$shadow": appModuleColors.shadow, onClick: () => window.open(WHATS_NEWS_LINK_URL, '_blank', 'noopener,noreferrer'), children: [_jsx(IconOpenInNew, { fontSize: 18 }), SDKUI_Localizator.DiscoverWhatsNew] }), _jsx(SecondaryButton, { onClick: onClose, children: SDKUI_Localizator.Close })] })] }) }));
+};

package/lib/helper/TMCommandsContextMenu.d.ts

@@ -12,5 +12,5 @@ interface TMCommandsContextMenuProps {
     trigger?: 'right' | 'left';
     children?: React.ReactNode;
 }
-export declare const TMCommandsContextMenu: React.MemoExoticComponent<({ target, menuItems, id, showEvent, onHiding, trigger, children }: TMCommandsContextMenuProps) => React.JSX.Element>;
+export declare const TMCommandsContextMenu: React.MemoExoticComponent<({ target, menuItems, id, showEvent, onHiding, trigger, children }: TMCommandsContextMenuProps) => import("react/jsx-runtime").JSX.Element>;
 export {};