@topconsultnpm/sdkui-react 6.20.0-dev1.67 → 6.20.0-dev1.68

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

@@ -59,6 +59,8 @@ 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 };
@@ -75,16 +77,27 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                 // Haptic feedback
                 if ('vibrate' in navigator)
                     navigator.vibrate(50);
-                const syntheticEvent = new MouseEvent('contextmenu', {
+                // First, trigger a click to select/focus the item
+                const clickEvent = new MouseEvent('click', {
                     bubbles: true,
                     cancelable: true,
                     clientX: touch.clientX,
                     clientY: touch.clientY,
                 });
-                element.dispatchEvent(syntheticEvent);
+                element.dispatchEvent(clickEvent);
+                // Small delay to ensure click is processed before opening context menu
+                setTimeout(() => {
+                    const syntheticEvent = new MouseEvent('contextmenu', {
+                        bubbles: true,
+                        cancelable: true,
+                        clientX: touch.clientX,
+                        clientY: touch.clientY,
+                    });
+                    element.dispatchEvent(syntheticEvent);
+                }, 10);
                 if (state)
                     state.timeout = null;
-            }, 500);
+            }, 400);
         };
         const handleTouchMove = (e) => {
             const touchEvent = e;
@@ -122,14 +135,16 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
         // Attach listeners to all matching elements
         elements.forEach(element => {
             const el = element;
-            // Prevent iOS native callout
+            // Prevent iOS native callout and text selection
             const style = el.style;
             style.webkitTouchCallout = 'none';
             style.webkitUserSelect = 'none';
-            el.addEventListener('touchstart', handleTouchStart, { passive: true });
+            style.userSelect = 'none';
+            el.addEventListener('touchstart', handleTouchStart, { passive: false });
             el.addEventListener('touchmove', handleTouchMove, { passive: true });
             el.addEventListener('touchend', handleTouchEnd);
             el.addEventListener('touchcancel', handleTouchEnd);
+            el.addEventListener('contextmenu', (e) => e.preventDefault(), { capture: true });
             el.addEventListener('click', handleClick, { capture: true });
         });
         return () => {
@@ -138,6 +153,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                 const style = el.style;
                 style.webkitTouchCallout = '';
                 style.webkitUserSelect = '';
+                style.userSelect = '';
                 el.removeEventListener('touchstart', handleTouchStart);
                 el.removeEventListener('touchmove', handleTouchMove);
                 el.removeEventListener('touchend', handleTouchEnd);
@@ -268,7 +284,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                     parentNames: [],
                 });
             }
-        }, 500);
+        }, 400);
     };
     const handleTouchMove = (e) => {
         if (!isIOS || trigger !== 'right' || !touchStartPos.current)
@@ -411,6 +427,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, target, externalCon
                     display: 'inline-block',
                     WebkitTouchCallout: isIOS ? 'none' : undefined,
                     WebkitUserSelect: isIOS ? 'none' : undefined,
+                    userSelect: 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, 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/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -4,7 +4,8 @@ import { ContextMenu } from '../ContextMenu';
 import ShowAlert from '../../base/TMAlert';
 import TMTooltip from '../../base/TMTooltip';
 import * as S from './styles';
-import { IconAdd, IconApply, IconMenuVertical, IconPin, IconSeparator, IconUndo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { IconAdd, IconCloseOutline, IconMenuVertical, IconPin, IconSave, IconSeparator, IconUndo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { ButtonNames, TMMessageBoxManager } from '../../base/TMPopUp';
 const Separator = (props) => (_jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M12 2v20", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" }) }));
 const IconDraggableDots = (props) => (_jsx("svg", { fontSize: 18, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M9 3a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm10-18a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0z" }) }));
 const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 100, }) => {
@@ -603,6 +604,45 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         const snapshotIds = stateSnapshot.current.items.map(i => i.id).join(',');
         return currentIds !== snapshotIds;
     };
+    const handleClose = () => {
+        // If all items removed, exit without asking and restore last items
+        if (state.items.length === 0 && stateSnapshot.current) {
+            setState(s => ({
+                ...s,
+                items: [...stateSnapshot.current.items],
+                orientation: stateSnapshot.current.orientation,
+                position: { ...stateSnapshot.current.position },
+                isConfigMode: false,
+            }));
+            stateSnapshot.current = null;
+            return;
+        }
+        // If no changes, simply exit config mode
+        if (!hasChanges()) {
+            stateSnapshot.current = null;
+            const cleanedItems = removeTrailingSeparators(state.items);
+            setState(s => ({ ...s, isConfigMode: false, items: cleanedItems }));
+            return;
+        }
+        // If there are changes, ask for confirmation
+        TMMessageBoxManager.show({
+            message: 'Perderai le tue modifiche, sei sicuro?',
+            buttons: [ButtonNames.YES, ButtonNames.NO],
+            onButtonClick: (buttonName) => {
+                if (buttonName === ButtonNames.YES && stateSnapshot.current) {
+                    // Restore snapshot and exit config mode
+                    setState(s => ({
+                        ...s,
+                        items: [...stateSnapshot.current.items],
+                        orientation: stateSnapshot.current.orientation,
+                        position: { ...stateSnapshot.current.position },
+                        isConfigMode: false,
+                    }));
+                    stateSnapshot.current = null;
+                }
+            },
+        });
+    };
     const toggleOrientation = () => {
         const newOrientation = state.orientation === 'horizontal' ? 'vertical' : 'horizontal';
         if (state.orientation === 'horizontal' && newOrientation === 'vertical') {
@@ -740,6 +780,8 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                                                 currentOnClick();
                                             }
                                         }, disabled: state.isConfigMode ? isDisabled && !state.isConfigMode : isDisabled, children: item.icon }) }), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] }, item.id));
-                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getContextMenuItemsWithPinIcons(), trigger: "left", keepOpenOnClick: true, children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) })), state.isConfigMode && state.items.length < maxItems && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getPinContextMenuItems(), trigger: "left", keepOpenOnClick: true, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx(S.AddButton, { children: _jsx(IconAdd, {}) }) }) })), state.isConfigMode && (_jsxs(_Fragment, { children: [_jsx(S.Separator, { "$orientation": state.orientation }), _jsxs(S.ButtonGroup, { "$orientation": state.orientation, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Undo, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.UndoButton, { onClick: handleUndo, disabled: !hasChanges(), children: _jsx(IconUndo, { fontSize: 18 }) }) }), _jsx(TMTooltip, { content: state.items.length === 0 ? 'Devi aggiungere almeno un item' : SDKUI_Localizator.ApplyAndClose, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.ApplyButton, { onClick: toggleConfigMode, disabled: state.items.length === 0, children: _jsx(IconApply, { fontSize: 20 }) }) })] })] }))] })] }));
+                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getContextMenuItemsWithPinIcons(), trigger: "left", keepOpenOnClick: true, children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) })), state.isConfigMode && state.items.length < maxItems && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getPinContextMenuItems(), trigger: "left", keepOpenOnClick: true, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx(S.AddButton, { children: _jsx(IconAdd, {}) }) }) })), state.isConfigMode && (_jsxs(_Fragment, { children: [_jsx(S.Separator, { "$orientation": state.orientation }), _jsxs(S.ButtonGroup, { "$orientation": state.orientation, children: [_jsx(TMTooltip, { content: SDKUI_Localizator.Undo, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.UndoButton, { onClick: handleUndo, disabled: !hasChanges(), children: _jsx(IconUndo, { fontSize: 18 }) }) }), _jsx(TMTooltip, { content: state.items.length === 0
+                                            ? 'Devi aggiungere almeno un item'
+                                            : SDKUI_Localizator.Save, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.ApplyButton, { onClick: toggleConfigMode, disabled: state.items.length === 0 || !hasChanges(), children: _jsx(IconSave, { fontSize: 20 }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.Close, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.CloseButton, { onClick: handleClose, children: _jsx(IconCloseOutline, { fontSize: 20 }) }) })] })] }))] })] }));
 };
 export default TMFloatingMenuBar;

package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts

@@ -33,6 +33,7 @@ export declare const MenuButton: import("styled-components/dist/types").IStyledC
 }>> & string;
 export declare const ConfigButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const ApplyButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const ContextMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isActive"> & {
     $isActive?: boolean;
 }, "ref"> & {

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

@@ -74,7 +74,7 @@ export const GripHandle = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: ${props => props.$orientation === 'horizontal' ? '10px 6px' : '6px 10px'};
+  padding: ${props => props.$orientation === 'horizontal' ? '6px 4px' : '4px 6px'};
   cursor: grab;
   color: rgba(255, 255, 255, 0.7);
   transition: all 0.2s ease;
@@ -98,7 +98,7 @@ export const GripHandle = styled.div `
 export const Separator = styled.div `
   background: rgba(255, 255, 255, 0.25);
   width: ${props => props.$orientation === 'horizontal' ? '1px' : '100%'};
-  height: ${props => props.$orientation === 'horizontal' ? '24px' : '1px'};
+  height: ${props => props.$orientation === 'horizontal' ? '20px' : '1px'};
   margin: ${props => props.$orientation === 'horizontal' ? '0 4px' : '4px 0'};
   flex-shrink: 0;
 `;
@@ -111,8 +111,8 @@ export const ItemSeparator = styled.div `
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 34px;
-    height: 34px;
+    width: 30px;
+    height: 30px;
     background: transparent;
     border-radius: 8px;
     cursor: grab;
@@ -122,7 +122,7 @@ export const ItemSeparator = styled.div `
       content: '';
       background: rgba(255, 255, 255, 0.25);
       width: ${props.$orientation === 'horizontal' ? '2px' : '100%'};
-      height: ${props.$orientation === 'horizontal' ? '20px' : '2px'};
+      height: ${props.$orientation === 'horizontal' ? '18px' : '2px'};
       border-radius: 1px;
     }
     
@@ -137,7 +137,7 @@ export const ItemSeparator = styled.div `
     /* Normal mode: simple line with tight spacing */
     background: rgba(255, 255, 255, 0.25);
     width: ${props.$orientation === 'horizontal' ? '1px' : '100%'};
-    height: ${props.$orientation === 'horizontal' ? '24px' : '1px'};
+    height: ${props.$orientation === 'horizontal' ? '20px' : '1px'};
     margin: ${props.$orientation === 'horizontal' ? '0 2px' : '2px 0'};
   `}
 `;
@@ -145,8 +145,8 @@ export const MenuButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
+  width: 30px;
+  height: 30px;
   background: transparent;
   border: none;
   border-radius: 8px;
@@ -243,6 +243,40 @@ export const ApplyButton = styled.button `
     height: 20px;
   }
 `;
+export const CloseButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: rgba(239, 68, 68, 1);
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 3px;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(239, 68, 68, 1);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.9);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
 export const ContextMenuButton = styled(MenuButton) `
   svg {
     transform: translateY(0);
@@ -252,13 +286,13 @@ export const AddButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: 26px;
+  height: 26px;
   background: rgba(255, 255, 255, 0.15);
   border: 1px dashed rgba(255, 255, 255, 0.4);
   border-radius: 8px;
   color: white;
-  font-size: 20px;
+  font-size: 18px;
   font-weight: bold;
   line-height: 0;
   cursor: pointer;

package/package.json

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