@topconsultnpm/sdkui-react 6.20.0-dev1.61 → 6.20.0-dev1.63

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

@@ -20,6 +20,41 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
     const longPressTimeoutRef = useRef(null);
     const touchStartPos = useRef(null);
     const { openLeft, openUp, isCalculated } = useMenuPosition(menuRef, menuState.position);
+    // Adjust menu position on mobile to prevent overflow
+    useEffect(() => {
+        if (!isMobile || !menuState.visible || !menuRef.current)
+            return;
+        const adjustPosition = () => {
+            const menuElement = menuRef.current;
+            if (!menuElement)
+                return;
+            const menuRect = menuElement.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const currentY = menuState.position.y;
+            // Check if menu overflows bottom of viewport
+            const menuBottom = currentY + menuRect.height;
+            const overflowBottom = menuBottom - viewportHeight;
+            if (overflowBottom > 0) {
+                // Calculate new Y position to fit menu in viewport
+                let newY = currentY - overflowBottom - 10; // 10px padding from edge
+                // Ensure menu doesn't go above viewport top
+                if (newY < 10) {
+                    newY = 10;
+                }
+                // Only update if position actually changed
+                if (newY !== currentY) {
+                    setMenuState(prev => ({
+                        ...prev,
+                        position: { ...prev.position, y: newY }
+                    }));
+                }
+            }
+        };
+        // Wait for menu to render before adjusting
+        requestAnimationFrame(() => {
+            requestAnimationFrame(adjustPosition);
+        });
+    }, [isMobile, menuState.visible, menuState.position.y]);
     const handleClose = () => {
         if (externalControl) {
             externalControl.onClose();

package/lib/components/base/TMDropDownMenu.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, forwardRef, useRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
-import ContextMenu from 'devextreme-react/context-menu';
-import { FontSize, TMColors } from '../../utils/theme';
+import { ContextMenu as TMContextMenu } from '../NewComponents/ContextMenu';
+import { TMColors } from '../../utils/theme';
 import { genUniqueId } from '../../helper';
 const StyledContent = styled.div `
     cursor: pointer;
@@ -22,14 +22,6 @@ const StyledContent = styled.div `
         border-bottom-color: ${TMColors.primary};
     }
 `;
-const StyledMenuItem = styled.div `
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 6px;
-    width: 100%;
-    font-size: ${FontSize.defaultFontSize};
-`;
 const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius, onMenuShown }, ref) => {
     const [id, setID] = useState('');
     const dropDownMenuElementRef = useRef(null); // Ref all'elemento DOM div principale
@@ -39,7 +31,32 @@ const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = T
             dropDownMenuElementRef.current?.focus();
         },
     }));
-    const renderItemTemplate = (itemData) => (_jsxs(StyledMenuItem, { children: [itemData.icon && _jsx("div", { style: { display: 'flex', alignItems: 'center' }, children: itemData.icon }), _jsx("span", { style: { flexGrow: 1 }, children: itemData.text }), itemData.items && _jsx("span", { className: "dx-icon-spinright dx-icon", style: { marginLeft: '10px' } })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }), _jsx(ContextMenu, { target: `#idContainer${id}`, dataSource: items, showEvent: 'click', itemRender: renderItemTemplate, onShown: (e) => onMenuShown?.(), onHidden: (e) => dropDownMenuElementRef.current?.focus() })] }));
+    // Converter function: ITMDropDownMenuItem -> TMContextMenuItemProps
+    const convertToContextMenuItems = (dropDownItems) => {
+        if (!dropDownItems)
+            return [];
+        return dropDownItems.map(item => ({
+            name: item.text,
+            icon: item.icon,
+            disabled: item.disabled,
+            beginGroup: item.beginGroup,
+            onClick: item.onClick,
+            submenu: item.items ? convertToContextMenuItems(item.items) : undefined,
+        }));
+    };
+    const [menuVisible, setMenuVisible] = useState(false);
+    const handleMenuOpen = () => {
+        setMenuVisible(true);
+        onMenuShown?.();
+    };
+    const handleMenuClose = () => {
+        setMenuVisible(false);
+        dropDownMenuElementRef.current?.focus();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, onClick: !disabled ? handleMenuOpen : undefined, children: content }), _jsx(TMContextMenu, { items: convertToContextMenuItems(items), target: `#idContainer${id}`, trigger: "left", externalControl: {
+                    visible: menuVisible,
+                    position: { x: 0, y: 0 },
+                    onClose: handleMenuClose,
+                } })] }));
 });
 export default TMDropDownMenu;

package/lib/components/base/TMPanel.js

@@ -133,7 +133,7 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
     };
     return (_jsxs(StyledPanelContainer, { ref: panelRef, "$isMaximized": onMaximize ? false : isMaximized, style: {
             visibility: isVisible ? 'visible' : 'hidden',
-        }, tabIndex: -1, onFocus: !isControlled ? handleFocusUncontrolled : undefined, onBlur: !isControlled ? handleBlurUncontrolled : undefined, onClick: handleActivation, children: [showHeader &&
+        }, tabIndex: -1, onFocus: !isControlled ? handleFocusUncontrolled : undefined, onBlur: !isControlled ? handleBlurUncontrolled : undefined, onClick: handleActivation, onContextMenu: (e) => e.preventDefault(), children: [showHeader &&
                 _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": currentIsActive, onDoubleClick: () => {
                         if (onHeaderDoubleClick)
                             onHeaderDoubleClick();

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

@@ -593,7 +593,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
         currentTIDHasDetailRelations, canArchiveMasterRelation, canArchiveDetailRelation,
         hasManyToManyRelation, customButtonsLayout
     ]);
-    const searchResutlToolbar = _jsxs(_Fragment, { children: [(dcmtsReturned != dcmtsFound) && _jsx("p", { style: { backgroundColor: `white`, color: TMColors.primaryColor, textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${dcmtsReturned}/${dcmtsFound} restituiti` }), context === SearchResultContext.FAVORITES_AND_RECENTS &&
+    const searchResutlToolbar = _jsxs(_Fragment, { children: [(dcmtsReturned != dcmtsFound) && _jsx("p", { style: { textAlign: 'center', padding: '1px 4px', borderRadius: '3px', display: 'flex' }, children: `${dcmtsReturned}/${dcmtsFound} restituiti` }), context === SearchResultContext.FAVORITES_AND_RECENTS &&
                 _jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '5px' }, children: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconDelete, { color: 'white' }), caption: "Rimuovi da " + (selectedSearchResult?.category === "Favorites" ? '"Preferiti"' : '"Recenti"'), disabled: getSelectedDcmtsOrFocused(selectedItems, focusedItem).length <= 0, onClick: removeDcmtFromFavsOrRecents }) }), _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconRefresh, { color: 'white' }), caption: SDKUI_Localizator.Refresh, onClick: onRefreshSearchAsync }), _jsx(TMContextMenu, { items: floatingMenuItems, trigger: "left", children: _jsx(IconMenuVertical, { color: 'white', cursor: 'pointer' }) })] });
     const tmSearchResult = useMemo(() => (!searchResults || searchResults.length <= 0)
         ? _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%' }, children: [_jsx(IconBoard, { fontSize: 96 }), _jsx("div", { style: { fontSize: "15px", marginTop: "10px" }, children: SDKUI_Localizator.NoDcmtFound }), openAddDocumentForm && _jsx("div", { style: { marginTop: "10px" }, children: _jsx(TMButton, { fontSize: "15px", icon: _jsx("i", { className: 'dx-icon-share' }), caption: SDKUI_Localizator.Share, onClick: openAddDocumentForm }) })] })

package/lib/components/grids/TMRecentsManager.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { useCallback, useEffect, useState } from 'react';
-import ReactDOMServer from 'react-dom/server';
 import { DcmtTypeListCacheService } from '@topconsultnpm/sdk-ts';
-import ContextMenu from 'devextreme-react/context-menu';
+import { ContextMenu as TMContextMenu } from '../NewComponents/ContextMenu';
 import { IconDelete, SDKUI_Localizator, IconApply, IconInfo, IconCloseOutline } from '../../helper';
 import { TMColors } from '../../utils/theme';
 import { DeviceType } from '../base/TMDeviceProvider';
@@ -62,11 +61,15 @@ const StyledRecentTidItem = styled.div `
         margin-bottom: 0;
     }
 `;
-const iconDelete = () => ReactDOMServer.renderToString(_jsx(IconDelete, {}));
 const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, accessFilter = 'all', onSelectedTID, onDeletedTID }) => {
     const [showDcmtTypeChooser, setShowDcmtTypeChooser] = useState(false);
     const [recentDcmtTypes, setRecentDcmtTypes] = useState([]);
     const [infoDTD, setInfoDTD] = useState();
+    const [contextMenuState, setContextMenuState] = useState({
+        visible: false,
+        position: { x: 0, y: 0 },
+        tid: null
+    });
     // Handler for the cache refresh event
     const handleCacheRefresh = useCallback(async () => {
         // Retrieve all document types without metadata from the refreshed cache
@@ -114,7 +117,10 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, accessFilter = '
                                     textOverflow: 'ellipsis'
                                 }, children: `${SDKUI_Localizator.AllDcmtTypes} (${DcmtTypeListCacheService.CacheCount(true, accessFilter)})` }) }) }, 0), recentDcmtTypes.map((dtd) => {
                         const isCurrent = currentMruTID == dtd.id;
-                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, children: [_jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
+                        return (_jsxs(StyledRecentTidItem, { id: `tid-${dtd.id}`, "$isMobile": isMobile, onClick: () => { onSelectedTID?.(dtd.id ?? 0); }, onContextMenu: (e) => {
+                                e.preventDefault();
+                                setContextMenuState({ visible: true, position: { x: e.clientX, y: e.clientY }, tid: dtd.id ?? null });
+                            }, children: [_jsxs(StyledDivHorizontal, { style: { alignItems: 'center', gap: 8, width: '100%' }, children: [!isMobile && (_jsx("span", { className: "info-icon", style: {
                                                 marginRight: 4,
                                                 display: 'flex',
                                                 alignItems: 'center'
@@ -135,20 +141,24 @@ const TMRecentsManager = ({ deviceType, mruTIDs, currentMruTID, accessFilter = '
                                                 fontWeight: 'bold',
                                                 marginLeft: 8,
                                                 visibility: isCurrent ? 'visible' : 'hidden'
-                                            }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }), _jsx(ContextMenu, { dataSource: [
+                                            }, children: _jsx(IconApply, { fontSize: 24, color: 'green' }) })] }), contextMenuState.tid === dtd.id && (_jsx(TMContextMenu, { items: [
                                         {
-                                            text: SDKUI_Localizator.Remove,
-                                            icon: iconDelete(),
+                                            name: SDKUI_Localizator.Remove,
+                                            icon: _jsx(IconDelete, {}),
                                             onClick: () => { onDeletedTID?.(dtd.id ?? 0); }
                                         },
                                         ...(isMobile ? [
                                             {
-                                                text: SDKUI_Localizator.About,
-                                                icon: ReactDOMServer.renderToString(_jsx(IconInfo, { color: TMColors.info })),
+                                                name: SDKUI_Localizator.About,
+                                                icon: _jsx(IconInfo, { color: TMColors.info }),
                                                 onClick: () => { setInfoDTD(dtd); }
                                             }
                                         ] : [])
-                                    ], target: `#tid-${dtd.id}` })] }, dtd.id));
+                                    ], target: `#tid-${dtd.id}`, externalControl: {
+                                        visible: contextMenuState.visible,
+                                        position: contextMenuState.position,
+                                        onClose: () => setContextMenuState({ visible: false, position: { x: 0, y: 0 }, tid: null })
+                                    } }))] }, dtd.id));
                     })] }), showDcmtTypeChooser &&
                 _jsx(TMDcmtTypeChooserForm, { accessFilter: accessFilter, onClose: () => setShowDcmtTypeChooser(false), onChoose: (tids) => { onSelectedTID?.(tids?.[0] ?? 0); } }), _jsxs(StyledOffCanvasPanel, { ref: panelRef, "$isOpen": isMobile && infoDTD !== undefined, children: [_jsxs(StyledDivHorizontal, { style: { gap: 10, padding: '10px 8px', width: '100%', alignItems: 'center' }, children: [_jsx("p", { style: { fontSize: '1.1rem', fontWeight: 'bold' }, children: `${SDKUI_Localizator.DcmtType} - ${SDKUI_Localizator.About}` }), _jsx(IconCloseOutline, { style: { marginLeft: 'auto', cursor: 'pointer' }, onClick: () => setInfoDTD(undefined) })] }), renderDTDTooltipContent(infoDTD)] })] }));
 };

package/lib/components/index.d.ts

@@ -16,6 +16,7 @@ export * from './base/TMTreeView';
 export * from './base/TMPanel';
 export * from './base/TMResizableMenu';
 export * from './base/TMAccordionNew';
+export * from './NewComponents/ContextMenu';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';

package/lib/components/index.js

@@ -17,6 +17,7 @@ export * from './base/TMTreeView';
 export * from './base/TMPanel';
 export * from './base/TMResizableMenu';
 export * from './base/TMAccordionNew';
+export * from './NewComponents/ContextMenu';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';

package/lib/helper/SDKUI_Localizator.d.ts

@@ -84,6 +84,7 @@ export declare class SDKUI_Localizator {
     static get CancelCheckOut(): string;
     static get CassettoDoganaleExportMRN(): "MRN-Erholung für den Export" | "MRN recovery for export" | "Recuperación MRN para exportación" | "Récupération MRN pour l'export" | "Recuperação MRN para exportação" | "Recupero MRN per Export";
     static get CassettoDoganaleExportVU(): "Wiederherstellung des Ausreisevisums" | "Exit Visa Recovery" | "Recuperación de Visa de Salida" | "Sortie Récupération Visa" | "Recuperação de Visto de Saída" | "Recupero Visto Uscire per Export";
+    static get CassettoDoganaleExportEUR1(): "EUR1-Erholung für den Export" | "EUR1 recovery for export" | "Recuperación EUR1 para exportación" | "Récupération EUR1 pour l'export" | "Recuperação EUR1 para exportação" | "Recupero EUR1 per Export";
     static get CassettoDoganaleImportMRN(): "MRN-Erholung für den Import" | "MRN recovery for import" | "Recuperación MRN para importación" | "Récupération MRN à l'import" | "Recuperação MRN para importação" | "Recupero MRN per Import";
     static get CassettoDoganalePlus_UserName(): "STD-Benutzer des ADM-Portals" | "STD User of the ADM Portal" | "Usuario STD del Portal ADM" | "Utilisateur STD du portail ADM" | "Utilizador DST do Portal ADM" | "Utente STD del Portale ADM";
     static get Cancel(): "Abbrechen" | "Cancel" | "Anular" | "Annuler" | "Cancelar" | "Annulla";
@@ -246,6 +247,8 @@ export declare class SDKUI_Localizator {
     static get ExpertMode(): "Expertenmodus" | "Expert mode" | "Modo experto" | "Mode expert" | "Modo especialista" | "Modalità esperto";
     static get Expiring(): "Ablaufend" | "Expiring" | "Por vencer" | "Expirant" | "Vencendo" | "In scadenza";
     static get Export(): "Exportieren" | "Export" | "Exportar" | "Exporter" | "Esporta";
+    static get ExportEUR1(): "Exportieren EUR1" | "Export EUR1" | "Exportar EUR1" | "Exporter EUR1" | "Export - EUR1";
+    static get ExportEUR1OutputFile(): "Dateipfad für den Export (EUR1)" | "File Path for Export (EUR1)" | "Ruta de archivo para exportación (EUR1)" | "Chemin du fichier à exporter (EUR1)" | "Caminho do arquivo para exportação (EUR1)" | "Percorso del File per Export (EUR1)";
     static get ExportTo(): string;
     static get ExportMRN(): "Exportieren MRN" | "Export MRN" | "Exportar MRN" | "Exporter MRN";
     static get ExportMRNDayBack(): "Anzahl der Tage für die Exportdatenwiederherstellung (MRN)" | "Number of days for export data recovery (MRN)" | "Número de días para la recuperación de datos de exportación (MRN)" | "Nombre de jours pour la récupération des données d'exportation (MRN)" | "Número de dias para recuperação de dados de exportação (MRN)" | "Numero di giorni per il recupero dei dati di Export (MRN)";

package/lib/helper/SDKUI_Localizator.js

@@ -795,6 +795,16 @@ export class SDKUI_Localizator {
             default: return "Recupero Visto Uscire per Export";
         }
     }
+    static get CassettoDoganaleExportEUR1() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "EUR1-Erholung für den Export";
+            case CultureIDs.En_US: return "EUR1 recovery for export";
+            case CultureIDs.Es_ES: return "Recuperación EUR1 para exportación";
+            case CultureIDs.Fr_FR: return "Récupération EUR1 pour l'export";
+            case CultureIDs.Pt_PT: return "Recuperação EUR1 para exportação";
+            default: return "Recupero EUR1 per Export";
+        }
+    }
     static get CassettoDoganaleImportMRN() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "MRN-Erholung für den Import";
@@ -2427,6 +2437,26 @@ export class SDKUI_Localizator {
             default: return "Esporta";
         }
     }
+    static get ExportEUR1() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Exportieren EUR1";
+            case CultureIDs.En_US: return "Export EUR1";
+            case CultureIDs.Es_ES: return "Exportar EUR1";
+            case CultureIDs.Fr_FR: return "Exporter EUR1";
+            case CultureIDs.Pt_PT: return "Exportar EUR1";
+            default: return "Export - EUR1";
+        }
+    }
+    static get ExportEUR1OutputFile() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Dateipfad für den Export (EUR1)";
+            case CultureIDs.En_US: return "File Path for Export (EUR1)";
+            case CultureIDs.Es_ES: return "Ruta de archivo para exportación (EUR1)";
+            case CultureIDs.Fr_FR: return "Chemin du fichier à exporter (EUR1)";
+            case CultureIDs.Pt_PT: return "Caminho do arquivo para exportação (EUR1)";
+            default: return "Percorso del File per Export (EUR1)";
+        }
+    }
     static get ExportTo() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Exportieren nach...";

package/package.json

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