@topconsultnpm/sdkui-react 6.19.0-dev2.47 → 6.19.0-dev2.49

package/lib/components/features/assistant/ToppyDraggableHelpCenter.js

@@ -1,14 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import Toppy from '../../../assets/Toppy-generico.png';
 import { DeviceType } from '../../base/TMDeviceProvider';
 import ToppySpeechBubble from './ToppySpeechBubble';
 /**
- * Styled component per il pulsante di Toppy
+ * Styled component per il contenitore di Toppy
  * Gestisce il posizionamento, le dimensioni e le animazioni
  */
-const ToppyButton = styled.button.attrs((props) => ({
+const ToppyButton = styled.div.attrs((props) => ({
     style: {
         // Applica left/top come stili inline per evitare la generazione di troppe classi CSS
         ...(props.$x !== undefined && props.$y !== undefined
@@ -30,7 +30,7 @@ const ToppyButton = styled.button.attrs((props) => ({
   /* Posizionamento di default quando non è draggato (x e y non sono definiti) */
   ${(props) => props.$x === undefined || props.$y === undefined
     ? `
-        bottom: -20px;
+        bottom: ${props.$isMobile ? '0px' : '-20px'};
         ${props.$align === 'left' ? 'left: 10px;' : 'right: 10px;'};
       `
     : ''}
@@ -39,6 +39,8 @@ const ToppyButton = styled.button.attrs((props) => ({
   z-index: 2147483647;
   background-color: transparent;
   border: none;
+  padding: 0;
+  outline: none;
 
   /* Dimensioni dinamiche in base allo stato collassato e al tipo di dispositivo
      Usa min() per adattarsi su schermi piccoli */
@@ -73,17 +75,14 @@ const ToppyButton = styled.button.attrs((props) => ({
     }
     return props.$isCollapsed ? '60px' : '140px';
 }};
-    pointer-events: none;
+    pointer-events: ${(props) => (props.$isMobile ? 'auto' : 'none')};
     border-radius: 50%; /* Rende l'immagine circolare */
     /* Rotazione leggera in base all'allineamento */
     transform: ${(props) => props.$align === 'left' ? 'rotate(20deg)' : 'rotate(-20deg)'};
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 
     /* Animazione di pulsazione quando è collassato per attirare l'attenzione */
-    ${(props) => props.$isCollapsed &&
-    `
-      animation: toppyPulse 1.5s infinite;
-    `}
+    ${(props) => props.$isCollapsed && `animation: toppyPulse 1.5s infinite;`}
   }
 
   /* Keyframes per l'animazione di pulsazione */
@@ -105,6 +104,19 @@ const ToppyButton = styled.button.attrs((props) => ({
     }
   }
 `;
+/**
+ * Overlay trasparente per bloccare le interazioni durante il drag
+ * Previene problemi di performance con iframe e altri elementi interattivi
+ */
+const DragOverlay = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2147483646;
+  cursor: grabbing;
+`;
 /**
  * Componente ToppyDraggableHelpCenter
  *
@@ -113,7 +125,7 @@ const ToppyButton = styled.button.attrs((props) => ({
  * contenitore e può essere collassato/espanso con un doppio click.
  */
 const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onToppyImageClick, initialIsCollapsed, isVisible = true, }) => {
-    // Ref per il pulsante principale
+    // Ref per il contenitore principale
     const buttonRef = useRef(null);
     // Stato per controllare se il componente è collassato o espanso
     const [isCollapsed, setIsCollapsed] = useState(initialIsCollapsed ?? false);
@@ -168,11 +180,12 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
                     maxX = Math.min(maxX, parentRect.width - extraWidth);
                 }
             }
-            const maxY = parentRect.height - rect.height;
+            const bubbleBuffer = 5; // Buffer per evitare che la bubble esca leggermente dai bordi
+            const maxY = parentRect.height - rect.height + 20; // +20px per permettere bottom: -20px
             // Verifica se la posizione corrente è fuori dai limiti
             const isOutOfBounds = position.x < minX ||
                 position.x > maxX ||
-                position.y < extraHeight ||
+                position.y < extraHeight + bubbleBuffer ||
                 position.y > maxY;
             // Se è fuori dai limiti, resetta alla posizione default
             if (isOutOfBounds) {
@@ -260,8 +273,11 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
         // Calcola la nuova posizione X rispettando i limiti
         const newX = Math.max(minX, Math.min(e.clientX - parentRect.left - dragOffset.current.x, maxX));
         // Calcola la nuova posizione Y rispettando i limiti
-        // Il limite superiore tiene conto dell'altezza della bubble
-        const newY = Math.max(extraHeight, Math.min(e.clientY - parentRect.top - dragOffset.current.y, parentRect.height - rect.height));
+        // Il limite superiore tiene conto dell'altezza della bubble + buffer di sicurezza
+        // Il limite inferiore include 20px extra per permettere bottom: -20px
+        const bubbleBuffer = 5; // Buffer per evitare che la bubble esca leggermente dai bordi
+        const maxY = parentRect.height - rect.height + 20;
+        const newY = Math.max(extraHeight + bubbleBuffer, Math.min(e.clientY - parentRect.top - dragOffset.current.y, maxY));
         setPosition({ x: newX, y: newY });
     };
     /**
@@ -299,7 +315,8 @@ const ToppyDraggableHelpCenter = ({ content, deviceType, align = 'right', onTopp
         }
         return undefined;
     }, [isDragging]);
-    return (_jsxs(ToppyButton, { ref: buttonRef, "$align": align, "$isDragging": isDragging, "$x": position?.x, "$y": position?.y, "$isVisible": isVisible, "$isCollapsed": isCollapsed, "$isMobile": isMobile, onMouseDown: handleMouseDown, onContextMenu: (e) => e.preventDefault(), onClick: (e) => { if (isMobile)
-            toggleCollapse(e); }, onDoubleClick: toggleCollapse, children: [(content && !isCollapsed) && (_jsx(ToppySpeechBubble, { ref: bubbleRef, align: align, children: content })), _jsx("img", { src: Toppy, alt: "Toppy Help", draggable: false })] }));
+    // Renderizza l'overlay solo durante il drag
+    const renderDragOverlay = isDragging && _jsx(DragOverlay, {});
+    return (_jsxs(_Fragment, { children: [renderDragOverlay, _jsxs(ToppyButton, { ref: buttonRef, "$align": align, "$isDragging": isDragging, "$x": position?.x, "$y": position?.y, "$isVisible": isVisible, "$isCollapsed": isCollapsed, "$isMobile": isMobile, onMouseDown: !isMobile ? handleMouseDown : undefined, onContextMenu: (e) => e.preventDefault(), onDoubleClick: !isMobile ? toggleCollapse : undefined, children: [(content && !isCollapsed) && (_jsx(ToppySpeechBubble, { ref: bubbleRef, align: align, children: content })), _jsx("img", { src: Toppy, alt: "Toppy Help", draggable: false, onClick: isMobile ? toggleCollapse : undefined })] })] }));
 };
 export default ToppyDraggableHelpCenter;

package/lib/components/features/documents/TMDcmtForm.js

@@ -1353,7 +1353,7 @@ const TMDcmtForm = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTa
                                                 isEditable: true,
                                                 value: FormulaHelper.addFormulaTag(newFormula.expression)
                                             }));
-                                        } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), (showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && (_jsx(ToppyDraggableHelpCenter, { deviceType: deviceType, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [showToppyForApprove && (workItems.length === 1 ?
+                                        } }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { deviceType: deviceType, onCompleted: handleWFOperationCompleted, TID: approvalVID, DID: DID, onClose: () => setShowMoreInfoPopup(false) }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }), (showToppyForApprove || showToppyForCompleteMoreInfo || showToppyForReferences) && (_jsx(ToppyDraggableHelpCenter, { initialIsCollapsed: false, deviceType: deviceType, content: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [showToppyForApprove && (workItems.length === 1 ?
                                         _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => setShowApprovePopup(true), onSignApprove: handleSignApprove, onReject: () => setShowRejectPopup(true), onReAssign: () => setShowReAssignPopup(true), onMoreInfo: () => setShowMoreInfoPopup(true), dtd: fromDTD })
                                         :
                                             _jsxs("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: [`Devi approvare ${workItems.length} workitem(s) per questo documento.`, `Vai alla sezione di approvazione.`] })), showToppyForCompleteMoreInfo && (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: 10, color: 'white', maxWidth: '180px', borderRadius: 10, background: '#1B1464 0% 0% no-repeat padding-box', border: '1px solid #FFFFFF' }, children: `${SDKUI_Localizator.MoreInfoCompleteRequestSentBy} ${taskMoreInfo?.fromName}!` }), _jsx(TMButton, { caption: SDKUI_Localizator.CommentAndComplete, color: 'success', showTooltip: false, onClick: () => {

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

@@ -585,7 +585,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
                                     setIsModifiedBatchUpdate(false);
                                     await refreshSelectionDataRowsAsync();
                                 }, onStatusChanged: (isModified) => { setIsModifiedBatchUpdate(isModified); } }), (showToppyForApprove && !showApprovePopup && !showRejectPopup && !showReAssignPopup && !showMoreInfoPopup && !openS4TViewer && !showTodoDcmtForm) &&
-                                _jsx(ToppyDraggableHelpCenter, { deviceType: deviceType, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => {
+                                _jsx(ToppyDraggableHelpCenter, { initialIsCollapsed: false, deviceType: deviceType, content: _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: _jsx(WorkFlowOperationButtons, { deviceType: deviceType, onApprove: () => {
                                                 setShowApprovePopup(true);
                                             }, onSignApprove: () => {
                                                 handleSignApprove();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react",
-    "version": "6.19.0-dev2.47",
+    "version": "6.19.0-dev2.49",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",