@topconsultnpm/sdkui-react 6.20.0-dev1.53 → 6.20.0-dev1.55

package/lib/components/NewComponents/ContextMenu/TMContextMenu.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import * as S from './styles';
 import { useIsMobile, useMenuPosition, useIsIOS } from './hooks';
 import { IconArrowLeft } from '../../../helper';
@@ -297,6 +298,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
                     display: 'inline-block',
                     WebkitTouchCallout: isIOS ? 'none' : undefined,
                     WebkitUserSelect: isIOS ? 'none' : undefined,
-                }, children: children })), menuState.visible && (_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }))] }));
+                }, children: children })), menuState.visible && createPortal(_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }), document.body)] }));
 };
 export default TMContextMenu;

package/lib/components/features/search/TMSavedQuerySelector.js

@@ -3,8 +3,8 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { SharingModes, SDK_Globals, SDK_Localizator } from '@topconsultnpm/sdk-ts';
 import { LocalizeSharingModes } from '../../../helper/Enum_Localizator';
-import ContextMenu from 'devextreme-react/context-menu';
-import { SDKUI_Localizator, Globalization, svgToString, IconStar, IconDelete, IconDashboard, IconSavedQuery, IconApply, IconInfo, IconCloseOutline } from '../../../helper';
+import TMContextMenu from '../../NewComponents/ContextMenu/TMContextMenu';
+import { SDKUI_Localizator, Globalization, IconStar, IconDelete, IconDashboard, IconSavedQuery, IconApply, IconInfo, IconCloseOutline } from '../../../helper';
 import { TMColors } from '../../../utils/theme';
 import ShowAlert from '../../base/TMAlert';
 import { TMMessageBoxManager, ButtonNames, TMExceptionBoxManager } from '../../base/TMPopUp';
@@ -81,45 +81,38 @@ export const getTooltipBySqd = (sqd) => {
     return (_jsxs("div", { style: { textAlign: "left", fontSize: '1rem', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10 }, children: [_jsx(IconSavedQuery, { color: getSharingModeColor(sqd.sharingMode), fontSize: 20, style: { flexShrink: 0 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs("div", { children: ["ID: ", sqd.id] }), _jsxs("div", { children: ["Master TID: ", sqd.masterTID] }), sqd.description && _jsx("div", { children: `${SDKUI_Localizator.Description}: ${sqd.description}` })] })] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.OwnerName, ": ", sqd.ownerName, " (", sqd.ownerID, ")"] }), _jsx("div", { children: LocalizeSharingModes(sqd.sharingMode) }), _jsxs("div", { children: ["Default: ", sqd.isDefault == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Filtro semplice", ": ", sqd.isEasyWhere == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Esegui ricerca immediatamente", ": ", sqd.runSearchWhenSelected == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.CreationTime, ": ", Globalization.getDateTimeDisplayValue(sqd.creationTime)] }), _jsxs("div", { children: [SDKUI_Localizator.LastUpdateTime, ": ", Globalization.getDateTimeDisplayValue(sqd.lastUpdateTime)] })] }));
 };
 const initialSQDsMaxItems = 12;
-const SavedQueryContexMenu = ({ sqd, manageDefault, isMobile, deleteAsync, favManageAsync, setDefaultAsync, setInfoSQD }) => _jsx(ContextMenu, { items: [
-        ...(manageDefault ? [{
-                text: SDKUI_Localizator.SetAsDefault2,
-                icon: svgToString(_jsx(IconStar, { color: 'rgb(248, 215, 117)' })),
-                onClick: () => setDefaultAsync(sqd)
-            }] : []),
-        {
-            text: SDKUI_Localizator.Delete,
-            disabled: (sqd.id == 1),
-            icon: svgToString(_jsx(IconDelete, {})),
-            onClick: () => deleteAsync(sqd)
-        },
-        {
-            text: SDKUI_Localizator.AddToHomePage,
-            disabled: (sqd.id == 1),
-            icon: svgToString(_jsx(IconDashboard, {})),
-            onClick: () => favManageAsync?.(sqd)
-        },
-        ...(isMobile ? [
-            {
-                text: SDKUI_Localizator.About,
-                icon: svgToString(_jsx(IconInfo, { color: TMColors.info })),
-                onClick: () => { setInfoSQD?.(sqd); }
-            }
-        ] : [])
-    ], target: `#sqd-item-${sqd.id}`, onItemClick: (e) => {
-        if (e.itemIndex == 0)
-            setDefaultAsync?.(sqd);
-        else if (e.itemIndex == 1)
-            deleteAsync?.(sqd);
-        else if (e.itemIndex == 2)
-            favManageAsync?.(sqd);
-    } });
+const getContextMenuItems = (sqd, manageDefault, isMobile, deleteAsync, setDefaultAsync, favManageAsync, setInfoSQD) => [
+    ...(manageDefault ? [{
+            name: SDKUI_Localizator.SetAsDefault2,
+            icon: _jsx(IconStar, { color: 'rgb(248, 215, 117)' }),
+            onClick: () => setDefaultAsync(sqd)
+        }] : []),
+    {
+        name: SDKUI_Localizator.Delete,
+        disabled: (sqd.id == 1),
+        icon: _jsx(IconDelete, {}),
+        onClick: () => deleteAsync(sqd)
+    },
+    {
+        name: SDKUI_Localizator.AddToHomePage,
+        disabled: (sqd.id == 1),
+        icon: _jsx(IconDashboard, {}),
+        onClick: () => favManageAsync?.(sqd)
+    },
+    ...(isMobile ? [{
+            name: SDKUI_Localizator.About,
+            icon: _jsx(IconInfo, { color: TMColors.info }),
+            onClick: () => { setInfoSQD?.(sqd); }
+        }] : [])
+];
 const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch = true, height, manageDefault = true, onItemClick, onDeleted, onFavoritesAdded, onRefreshData }) => {
     const [dataSource, setDataSource] = useState([]);
     const [selectedItem, setSelectedItem] = useState();
     const [searchText, setSearchText] = useState('');
     const [showAllRoot, setShowAllRoot] = useState(false);
     const [infoSQD, setInfoSQD] = useState();
+    // Context menu state
+    const [contextMenuState, setContextMenuState] = useState({ visible: false, position: { x: 0, y: 0 }, sqd: null });
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
     const panelRef = useOutsideClick(() => {
@@ -187,40 +180,52 @@ const TMSavedQuerySelector = React.memo(({ items, selectedId, allowShowSearch =
                     overflow: 'auto'
                 }, children: dataSource.slice(0, showAllRoot || searchText.length > 0 ? dataSource.length : initialSQDsMaxItems).filter(o => searchText.length <= 0 || (searchText.length > 0 && o.name?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())) || o.description?.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())).map((sqd, index) => {
                     const isCurrent = selectedItem?.id == sqd.id;
-                    return (_jsxs(StyledSqdItem, { id: `sqd-item-${sqd.id}`, "$isMobile": isMobile, onClick: () => {
+                    return (_jsx(StyledSqdItem, { "$isMobile": isMobile, onClick: () => {
                             setSelectedItem(sqd);
                             onItemClick?.(sqd);
-                        }, children: [_jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
-                                            marginRight: 4,
-                                            display: 'flex',
-                                            alignItems: 'center'
-                                        }, children: _jsx(TMTooltip, { content: getTooltipBySqd(sqd), children: _jsx(IconInfo, { color: TMColors.primaryColor }) }) })), _jsxs("div", { style: {
-                                            flex: 1,
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            minWidth: 0
-                                        }, children: [_jsx("p", { style: {
-                                                    fontSize: '1rem',
-                                                    fontWeight: sqd.id === 1 ? 600 : 'normal',
-                                                    whiteSpace: 'nowrap',
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    color: TMColors.primaryColor,
-                                                    paddingRight: '15px'
-                                                }, children: sqd.name }), manageDefault && sqd.isDefault == 1 && _jsx(IconStar, { fontSize: 16, color: 'rgb(248, 215, 117)' })] }), _jsx("span", { style: {
-                                            width: 24,
-                                            height: 24,
-                                            borderRadius: 24,
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            fontSize: '1rem',
-                                            fontWeight: 'bold',
-                                            marginLeft: 8,
-                                            visibility: isCurrent ? 'visible' : 'hidden'
-                                        }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }), _jsx(SavedQueryContexMenu, { sqd: sqd, manageDefault: manageDefault, isMobile: isMobile, setInfoSQD: setInfoSQD, setDefaultAsync: () => setDefaultSQDAsync(sqd), deleteAsync: () => deleteSQDAsync(sqd), favManageAsync: () => favManageSQDAsync(sqd) })] }, sqd.id));
+                        }, onContextMenu: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            setContextMenuState({
+                                visible: true,
+                                position: { x: e.clientX, y: e.clientY },
+                                sqd: sqd
+                            });
+                        }, children: _jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
+                                        marginRight: 4,
+                                        display: 'flex',
+                                        alignItems: 'center'
+                                    }, children: _jsx(TMTooltip, { content: getTooltipBySqd(sqd), children: _jsx(IconInfo, { color: TMColors.primaryColor }) }) })), _jsxs("div", { style: {
+                                        flex: 1,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        minWidth: 0
+                                    }, children: [_jsx("p", { style: {
+                                                fontSize: '1rem',
+                                                fontWeight: sqd.id === 1 ? 600 : 'normal',
+                                                whiteSpace: 'nowrap',
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                color: TMColors.primaryColor,
+                                                paddingRight: '15px'
+                                            }, children: sqd.name }), manageDefault && sqd.isDefault == 1 && _jsx(IconStar, { fontSize: 16, color: 'rgb(248, 215, 117)' })] }), _jsx("span", { style: {
+                                        width: 24,
+                                        height: 24,
+                                        borderRadius: 24,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        fontSize: '1rem',
+                                        fontWeight: 'bold',
+                                        marginLeft: 8,
+                                        visibility: isCurrent ? 'visible' : 'hidden'
+                                    }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }) }, sqd.id));
                 }) }), dataSource.length > initialSQDsMaxItems && searchText.length <= 0 &&
-                _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', padding: '10px', position: 'relative' }, children: _jsx(TMShowAllOrMaxItemsButton, { showAll: showAllRoot, dataSourceLength: dataSource.length, onClick: () => { setShowAllRoot(!showAllRoot); } }) }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoSQD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDK_Localizator.SavedQuery} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoSQD(undefined) })] }), getTooltipBySqd(infoSQD)] })] }));
+                _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', padding: '10px', position: 'relative' }, children: _jsx(TMShowAllOrMaxItemsButton, { showAll: showAllRoot, dataSourceLength: dataSource.length, onClick: () => { setShowAllRoot(!showAllRoot); } }) }), contextMenuState.sqd && (_jsx(TMContextMenu, { items: getContextMenuItems(contextMenuState.sqd, manageDefault, isMobile, deleteSQDAsync, setDefaultSQDAsync, favManageSQDAsync, setInfoSQD), externalControl: {
+                    visible: contextMenuState.visible,
+                    position: contextMenuState.position,
+                    onClose: () => setContextMenuState(prev => ({ ...prev, visible: false, sqd: null }))
+                } })), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoSQD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDK_Localizator.SavedQuery} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoSQD(undefined) })] }), getTooltipBySqd(infoSQD)] })] }));
 });
 export default TMSavedQuerySelector;

package/lib/helper/SDKUI_Localizator.d.ts

@@ -348,6 +348,7 @@ export declare class SDKUI_Localizator {
     static get Login(): string;
     static get LogDelete(): "Löschen der Logik" | "Logical delete" | "Cancelación lógica" | "Suppression logique" | "Lógica de cancelamento" | "Cancellazione logica";
     static get Logout(): "Abmelden" | "Logout" | "Cerrar sesión" | "Déconnexion" | "Sair" | "Esci";
+    static get LogScreenFolder(): "Ordner für Screenshot-Protokolle" | "Log screenshot folder" | "Carpeta de registro de capturas de pantalla" | "Dossier de journal des captures d'écran" | "Pasta de log de capturas de tela" | "Cartella di log screenshot";
     static get Low(): "Niedrig" | "Low" | "Baja" | "Faible" | "Baixa" | "Bassa";
     static get MakeEditable(): "Bearbeitbar machen" | "Make editable" | "Hacer editable" | "Rendre modifiable" | "Faça editável" | "Rendi editabile";
     static get Mark(): "Markierung" | "Mark" | "Marca" | "Marque" | "Segno";
@@ -533,7 +534,7 @@ export declare class SDKUI_Localizator {
     static get ReplaceDocument(): "Dokument ersetzen" | "Replace Document" | "Reemplazar Documento" | "Remplacer le Document" | "Substituir Documento" | "Sostituisci Documento";
     static get Request(): string;
     static get RequestTo(): string;
-    static get RequestType(): "Anforderungstyp" | "Request type" | "Tipo de solicitud" | "Type de demande" | "Tipo de requisição" | "Tipo richiesta";
+    static get SearchType(): "Suchtyp" | "Search type" | "Tipo de búsqueda" | "Type de recherche" | "Tipo de pesquisa" | "Tipo di ricerca";
     static get Required(): "Obligatorisch" | "Required" | "Obligatorio" | "Obbligatoire" | "Obrigatório" | "Obbligatorio";
     static get RequiredField(): "Erforderliches Feld" | "Required field" | "Campo obligatorio" | "Champ obligatoire" | "Campo obrigatório" | "Campo Obbligatorio";
     static get RequiredNOT(): "Nicht obligatorisch" | "Not mandatory" | "No obligatorio" | "Pas obligatoire" | "Não é obrigatório" | "Non obbligatorio";
@@ -630,6 +631,7 @@ export declare class SDKUI_Localizator {
     static get Statistics(): "Statistiken" | "Statistics" | "Estadística" | "Statistiques" | "Estatísticas" | "Statistiche";
     static get Status(): "Status" | "Estado" | "Statut" | "Stato";
     static get Subject(): "Betreff" | "Subject" | "Asunto" | "Objet" | "Assunto" | "Oggetto";
+    static get SubjectType(): "Betreff-Typ" | "Subject type" | "Tipo de asunto" | "Type de sujet" | "Tipo de assunto" | "Tipo soggetto";
     static get Summary(): "Zusammenfassung" | "Summary" | "Resumen" | "Résumé" | "Resumo" | "Riepilogo";
     static get SwitchUser(): "Benutzer wechseln" | "Switch user" | "Cambiar usuario" | "Changer d'utilisateur" | "Mudar de usuário" | "Cambia utente";
     static get TargetedSearch(): "Gezielte Suche" | "Targeted search" | "Búsqueda dirigida" | "Recherche ciblée" | "Pesquisa direcionada" | "Ricerca puntuale";

package/lib/helper/SDKUI_Localizator.js

@@ -3446,6 +3446,16 @@ export class SDKUI_Localizator {
             default: return "Esci";
         }
     }
+    static get LogScreenFolder() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Ordner für Screenshot-Protokolle";
+            case CultureIDs.En_US: return "Log screenshot folder";
+            case CultureIDs.Es_ES: return "Carpeta de registro de capturas de pantalla";
+            case CultureIDs.Fr_FR: return "Dossier de journal des captures d'écran";
+            case CultureIDs.Pt_PT: return "Pasta de log de capturas de tela";
+            default: return "Cartella di log screenshot";
+        }
+    }
     static get Low() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Niedrig";
@@ -5301,14 +5311,14 @@ export class SDKUI_Localizator {
             default: return "Richiedi a";
         }
     }
-    static get RequestType() {
+    static get SearchType() {
         switch (this._cultureID) {
-            case CultureIDs.De_DE: return "Anforderungstyp";
-            case CultureIDs.En_US: return "Request type";
-            case CultureIDs.Es_ES: return "Tipo de solicitud";
-            case CultureIDs.Fr_FR: return "Type de demande";
-            case CultureIDs.Pt_PT: return "Tipo de requisição";
-            default: return "Tipo richiesta";
+            case CultureIDs.De_DE: return "Suchtyp";
+            case CultureIDs.En_US: return "Search type";
+            case CultureIDs.Es_ES: return "Tipo de búsqueda";
+            case CultureIDs.Fr_FR: return "Type de recherche";
+            case CultureIDs.Pt_PT: return "Tipo de pesquisa";
+            default: return "Tipo di ricerca";
         }
     }
     static get Required() {
@@ -6272,6 +6282,16 @@ export class SDKUI_Localizator {
             default: return "Oggetto";
         }
     }
+    static get SubjectType() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Betreff-Typ";
+            case CultureIDs.En_US: return "Subject type";
+            case CultureIDs.Es_ES: return "Tipo de asunto";
+            case CultureIDs.Fr_FR: return "Type de sujet";
+            case CultureIDs.Pt_PT: return "Tipo de assunto";
+            default: return "Tipo soggetto";
+        }
+    }
     static get Summary() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Zusammenfassung";

package/lib/helper/helpers.js

@@ -667,7 +667,7 @@ export function versionAndBuildtypeInfo(module) {
     switch (module) {
         case moduleTypes.SDK:
         case moduleTypes.SDKUI:
-            return moduleVersion(module).replace("-hotfix", "+hotfix");
+            return moduleVersion(module).replace("-hotfix.", "+hotfix").replace("-hotfix", "+hotfix");
         default:
             return moduleVersion(module);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@topconsultnpm/sdkui-react",
-  "version": "6.20.0-dev1.53",
+  "version": "6.20.0-dev1.55",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",