@topconsultnpm/sdkui-react 6.20.0-dev1.99 → 6.20.0-test1

package/lib/assets/headergradient.svg

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Livello_2" data-name="Livello 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 505.45">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: url(#Sfumatura_senza_nome_6);
+      }
+
+      .cls-1, .cls-2, .cls-3, .cls-4 {
+        opacity: .5;
+      }
+
+      .cls-5 {
+        clip-path: url(#clippath-2);
+      }
+
+      .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 {
+        fill: none;
+      }
+
+      .cls-2 {
+        fill: url(#Sfumatura_senza_nome_2);
+      }
+
+      .cls-6 {
+        clip-path: url(#clippath-3);
+      }
+
+      .cls-8 {
+        clip-path: url(#clippath);
+      }
+
+      .cls-3 {
+        fill: url(#Sfumatura_senza_nome_3-2);
+      }
+
+      .cls-9 {
+        clip-path: url(#clippath-1);
+      }
+
+      .cls-4 {
+        fill: url(#Sfumatura_senza_nome_3);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="cls-7" x="1237.53" y="0" width="682.47" height="326.62"/>
+    </clipPath>
+    <radialGradient id="Sfumatura_senza_nome_3" data-name="Sfumatura senza nome 3" cx="1285.93" cy="3418.23" fx="1285.93" fy="3418.23" r="50" gradientTransform="translate(-6983.46 -9577.73) scale(6.82 2.8)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2459a4"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <clipPath id="clippath-1">
+      <rect class="cls-7" x="0" y="0" width="682.47" height="326.62" transform="translate(682.47 326.62) rotate(-180)"/>
+    </clipPath>
+    <radialGradient id="Sfumatura_senza_nome_6" data-name="Sfumatura senza nome 6" cx="1673.12" cy="3418.23" fx="1673.12" fy="3418.23" r="50" gradientTransform="translate(11545.93 -9577.73) rotate(-180) scale(6.82 -2.8)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2459a4"/>
+      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+    </radialGradient>
+    <clipPath id="clippath-2">
+      <rect class="cls-7" x="0" y="0" width="1055.7" height="297.5"/>
+    </clipPath>
+    <radialGradient id="Sfumatura_senza_nome_3-2" data-name="Sfumatura senza nome 3" cx="955.6" cy="3436.6" fx="955.6" fy="3436.6" r="50" gradientTransform="translate(-9560.44 -8770.57) scale(10.56 2.55)" xlink:href="#Sfumatura_senza_nome_3"/>
+    <clipPath id="clippath-3">
+      <rect class="cls-7" x="297.09" y="0" width="1055.7" height="505.45"/>
+    </clipPath>
+    <radialGradient id="Sfumatura_senza_nome_2" data-name="Sfumatura senza nome 2" cx="983.74" cy="3351.83" fx="983.74" fy="3351.83" r="50" gradientTransform="translate(-9560.44 -14533.91) scale(10.56 4.33)" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#2459a4"/>
+      <stop offset="1" stop-color="#fff"/>
+    </radialGradient>
+  </defs>
+  <g id="Livello_1-2" data-name="Livello 1">
+    <g>
+      <g class="cls-8">
+        <ellipse class="cls-4" cx="1792.58" cy="-7.96" rx="341.23" ry="139.98"/>
+      </g>
+      <g class="cls-9">
+        <ellipse class="cls-1" cx="127.42" cy="-7.96" rx="341.23" ry="139.98"/>
+      </g>
+      <g class="cls-5">
+        <ellipse class="cls-3" cx="527.85" cy="-7.25" rx="527.85" ry="127.5"/>
+      </g>
+      <g class="cls-6">
+        <ellipse class="cls-2" cx="824.94" cy="-12.32" rx="527.85" ry="216.62"/>
+      </g>
+    </g>
+  </g>
+</svg>

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

@@ -12,6 +12,8 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
         parentNames: [],
     });
     const [hoveredSubmenus, setHoveredSubmenus] = useState([]);
+    // Tracks items whose rightIconProps have been clicked, so the icon color flips immediately
+    const [toggledItemIds, setToggledItemIds] = useState(new Set());
     const isMobile = useIsMobile();
     const isIOS = useIsIOS();
     const menuRef = useRef(null);
@@ -35,6 +37,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
             }));
         }
         setHoveredSubmenus([]);
+        setToggledItemIds(new Set());
     };
     // Sync with external control when provided
     useEffect(() => {
@@ -61,8 +64,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
             const touchEvent = e;
             const element = e.currentTarget;
             const touch = touchEvent.touches[0];
-            // Prevent text selection during long press
-            e.preventDefault();
             let state = touchStateMap.get(element);
             if (!state) {
                 state = { timeout: null, startX: 0, startY: 0, longPressTriggered: false };
@@ -85,6 +86,8 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                     clientX: touch.clientX,
                     clientY: touch.clientY,
                 });
+                // Mark this as our synthetic event
+                syntheticEvent.isSynthetic = true;
                 element.dispatchEvent(syntheticEvent);
                 if (state)
                     state.timeout = null;
@@ -123,8 +126,11 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                 state.longPressTriggered = false;
             }
         };
-        // Prevent default iOS context menu
+        // Prevent default iOS context menu (but allow our synthetic events)
         const handleContextMenu = (e) => {
+            // Don't prevent our own synthetic contextmenu events
+            if (e.isSynthetic)
+                return;
             e.preventDefault();
             e.stopPropagation();
             return false;
@@ -132,13 +138,12 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
         // Attach listeners to all matching elements
         elements.forEach(element => {
             const el = element;
-            // Prevent iOS native callout and text selection
+            // Prevent iOS native callout and text selection - must be set before touch starts
             const style = el.style;
             style.webkitTouchCallout = 'none';
             style.webkitUserSelect = 'none';
-            style.userSelect = 'none';
-            el.addEventListener('touchstart', handleTouchStart, { passive: false });
-            el.addEventListener('touchmove', handleTouchMove, { passive: false });
+            el.addEventListener('touchstart', handleTouchStart, { passive: true });
+            el.addEventListener('touchmove', handleTouchMove, { passive: true });
             el.addEventListener('touchend', handleTouchEnd);
             el.addEventListener('touchcancel', handleTouchEnd);
             el.addEventListener('contextmenu', handleContextMenu);
@@ -147,10 +152,10 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
         return () => {
             elements.forEach(element => {
                 const el = element;
+                // Restore webkit properties
                 const style = el.style;
                 style.webkitTouchCallout = '';
                 style.webkitUserSelect = '';
-                style.userSelect = '';
                 el.removeEventListener('touchstart', handleTouchStart);
                 el.removeEventListener('touchmove', handleTouchMove);
                 el.removeEventListener('touchend', handleTouchEnd);
@@ -212,9 +217,10 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
         if (!menuState.visible)
             return;
         const handleClickOutside = (event) => {
-            // On iOS, prevent closing immediately after opening (within 300ms)
+            // On iOS, prevent closing immediately after opening (within 500ms for iOS, 300ms for others)
             // This handles the case where touchend from long-press triggers touchstart listener
-            if (Date.now() - menuOpenedAtRef.current < 300) {
+            const delay = isIOS ? 500 : 300;
+            if (Date.now() - menuOpenedAtRef.current < delay) {
                 return;
             }
             const target = event.target;
@@ -244,8 +250,17 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
     const handleContextMenu = (e) => {
         if (trigger === 'right') {
             e.preventDefault();
-            e.stopPropagation(); // Prevent event from bubbling to close other menus prematurely
-            // Small delay to ensure other menus receive the contextmenu event and close first
+            // Close any other open context menus by dispatching a synthetic contextmenu event to document
+            // This triggers the document listener in other ContextMenu instances to close them
+            const syntheticEvent = new MouseEvent('contextmenu', {
+                bubbles: true,
+                cancelable: true,
+                clientX: -1000, // Position outside viewport so it doesn't interfere
+                clientY: -1000,
+            });
+            document.dispatchEvent(syntheticEvent);
+            e.stopPropagation(); // Prevent event from bubbling after closing others
+            // Small delay to ensure other menus close first
             setTimeout(() => {
                 setMenuState({
                     visible: true,
@@ -418,13 +433,36 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                 e.stopPropagation();
                 handleItemClick(item);
             };
-            const handleRightIconClick = (e) => {
+            const handleRightIconPropsClick = (e) => {
+                e.preventDefault();
                 e.stopPropagation();
-                // if (item.disabled) return;
-                item.onRightIconClick?.();
-                handleClose();
+                e.nativeEvent.stopImmediatePropagation();
+                item.rightIconProps?.onClick?.();
+                if (item.id) {
+                    setToggledItemIds(prev => {
+                        const next = new Set(prev);
+                        if (next.has(item.id))
+                            next.delete(item.id);
+                        else
+                            next.add(item.id);
+                        return next;
+                    });
+                }
             };
-            return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, "data-disabled": item.disabled ? "true" : undefined, onMouseDown: handleClick, onMouseEnter: (e) => !isMobile && handleMouseEnter(item, e, depth + 1), onMouseLeave: () => !isMobile && handleMouseLeave(depth + 1), title: item.tooltip, children: [_jsxs(S.MenuItemContent, { children: [item.icon && _jsx(S.IconWrapper, { children: item.icon }), _jsx(S.MenuItemName, { children: item.name })] }), item.rightIcon && item.onRightIconClick && (_jsx(S.RightIconButton, { onClick: handleRightIconClick, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: item.rightIcon })), item.submenu && item.submenu.length > 0 && (_jsx(S.SubmenuIndicator, { "$isMobile": isMobile, children: isMobile ? '›' : '▸' }))] }, itemKey));
+            // rightIconProps takes precedence over rightIcon
+            let rightIconElement = null;
+            let rightIconClickHandler = null;
+            if (item.rightIconProps) {
+                const rip = item.rightIconProps;
+                const wasToggled = item.id ? toggledItemIds.has(item.id) : false;
+                const isActive = wasToggled ? !rip.isActive : rip.isActive;
+                const color = isActive ? (rip.activeColor || '#d32f2f') : (rip.inactiveColor || '#626262');
+                rightIconElement = _jsx("span", { style: { color, display: 'flex', alignItems: 'center' }, children: rip.icon });
+                if (rip.onClick) {
+                    rightIconClickHandler = handleRightIconPropsClick;
+                }
+            }
+            return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, "data-disabled": item.disabled ? "true" : undefined, onMouseDown: handleClick, onMouseEnter: (e) => !isMobile && handleMouseEnter(item, e, depth + 1), onMouseLeave: () => !isMobile && handleMouseLeave(depth + 1), title: item.tooltip, children: [_jsxs(S.MenuItemContent, { children: [item.icon && _jsx(S.IconWrapper, { children: item.icon }), _jsx(S.MenuItemName, { children: item.name })] }), rightIconElement && rightIconClickHandler ? (_jsx(S.RightIconButton, { onClick: rightIconClickHandler, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: rightIconElement })) : rightIconElement ? (_jsx(S.IconWrapper, { children: rightIconElement })) : null, item.submenu && item.submenu.length > 0 && (_jsx(S.SubmenuIndicator, { "$isMobile": isMobile, children: isMobile ? '›' : '▸' }))] }, itemKey));
         });
     };
     const currentParentName = menuState.parentNames.at(-1) || '';
@@ -433,7 +471,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                         handleClick(e);
                     }
                 }, role: "button", tabIndex: 0, style: {
-                    display: 'inline-block',
+                    // display: 'inline-block',
                     WebkitTouchCallout: isIOS ? 'none' : undefined,
                     WebkitUserSelect: isIOS ? 'none' : undefined,
                 }, 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, "$needsScroll": needsScroll, "$maxHeight": maxHeight, 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)] }));

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

@@ -103,6 +103,8 @@ export const MenuItem = styled.div `
   transition: all 0.15s ease;
   position: relative;
   user-select: none;
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
   font-size: var(--base-font-size, 13px);
   color: ${props => props.$disabled ? '#999' : '#1a1a1a'};
   font-weight: 500;
@@ -237,11 +239,11 @@ export const Submenu = styled.div `
   position: fixed;
   left: ${props => {
     const spaceOnRight = globalThis.innerWidth - props.$parentRect.right;
-    return spaceOnRight > 240 ? `${props.$parentRect.right - 8}px` : 'auto';
+    return spaceOnRight > 240 ? `${props.$parentRect.right - 4}px` : 'auto';
 }};
   right: ${props => {
     const spaceOnRight = globalThis.innerWidth - props.$parentRect.right;
-    return spaceOnRight > 240 ? 'auto' : `${globalThis.innerWidth - props.$parentRect.left + 8}px`;
+    return spaceOnRight > 240 ? 'auto' : `${globalThis.innerWidth - props.$parentRect.left + 4}px`;
 }};
   /* Vertical positioning: Each submenu independently decides direction based on its own space */
   top: ${props => {
@@ -264,25 +266,25 @@ export const Submenu = styled.div `
   backdrop-filter: blur(10px);
   border: 1px solid rgba(0, 0, 0, 0.06);
   
-  /* Add invisible padding to bridge the gap - works for both sides */
+  /* Invisible hover bridge on the LEFT side (for submenus opening left) */
   &::before {
     content: '';
     position: absolute;
     right: 100%;
-    top: 0;
-    bottom: 0;
-    width: 15px;
+    top: -20px;
+    bottom: -20px;
+    width: 25px;
     background: transparent;
   }
   
-  /* Bridge on the right side for nested submenus */
+  /* Invisible hover bridge on the RIGHT side (for submenus opening right) */
   &::after {
     content: '';
     position: absolute;
     left: 100%;
-    top: 0;
-    bottom: 0;
-    width: 15px;
+    top: -20px;
+    bottom: -20px;
+    width: 25px;
     background: transparent;
   }
 
@@ -326,30 +328,7 @@ export const Submenu = styled.div `
     &::-webkit-scrollbar-thumb:hover {
       background: rgba(0, 0, 0, 0.3);
     }
-  ` : `
-    /* Fallback max-height for submenus that fit */
-    max-height: calc(100vh - 40px);
-    overflow-y: auto;
-    overflow-x: hidden;
-    
-    &::-webkit-scrollbar {
-      width: 8px;
-    }
-    
-    &::-webkit-scrollbar-track {
-      background: rgba(0, 0, 0, 0.05);
-      border-radius: 4px;
-    }
-    
-    &::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.2);
-      border-radius: 4px;
-    }
-    
-    &::-webkit-scrollbar-thumb:hover {
-      background: rgba(0, 0, 0, 0.3);
-    }
-  `}
+  ` : ``}
   
   [data-theme='dark'] & {
     &::-webkit-scrollbar-track {

package/lib/components/NewComponents/ContextMenu/types.d.ts

@@ -1,3 +1,10 @@
+export interface RightIconProps {
+    icon: React.ReactNode;
+    activeColor?: string;
+    inactiveColor?: string;
+    isActive?: boolean;
+    onClick?: () => void;
+}
 export interface TMContextMenuItemProps {
     id?: string;
     name: string;
@@ -6,8 +13,7 @@ export interface TMContextMenuItemProps {
     onClick?: (data?: any) => void;
     submenu?: TMContextMenuItemProps[];
     visible?: boolean;
-    rightIcon?: React.ReactNode;
-    onRightIconClick?: () => void;
+    rightIconProps?: RightIconProps;
     beginGroup?: boolean;
     tooltip?: string;
     operationType?: 'singleRow' | 'multiRow';