@topconsultnpm/sdkui-react 6.20.0-dev1.39 → 6.20.0-dev1.40

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

@@ -3,7 +3,7 @@ import { useState, useRef, useEffect } from 'react';
 import * as S from './styles';
 import { useIsMobile, useMenuPosition } from './hooks';
 import { IconArrowLeft } from '../../../helper';
-const TMContextMenu = ({ items, trigger = 'right', children, externalControl }) => {
+const TMContextMenu = ({ items, trigger = 'right', children, externalControl, keepOpenOnClick = false }) => {
     const [menuState, setMenuState] = useState({
         visible: false,
         position: { x: 0, y: 0 },
@@ -42,6 +42,47 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl })
             }));
         }
     }, [externalControl, items]);
+    // Update items when they change while menu is visible (for keepOpenOnClick behavior)
+    useEffect(() => {
+        if (!keepOpenOnClick)
+            return;
+        if (!externalControl && menuState.visible) {
+            setMenuState(prev => ({
+                ...prev,
+                submenuStack: [items],
+            }));
+            // Update hoveredSubmenus with fresh items while keeping them open
+            setHoveredSubmenus(prev => {
+                if (prev.length === 0)
+                    return prev;
+                // Rebuild hoveredSubmenus with updated items from the new items structure
+                return prev.map(submenu => {
+                    // Find the matching submenu in the new items structure
+                    const findSubmenuInItems = (searchItems) => {
+                        for (const item of searchItems) {
+                            if (item.submenu && item.submenu.length > 0) {
+                                // Check if this submenu matches (compare first item name as identifier)
+                                if (submenu.items.length > 0 && item.submenu.length > 0 &&
+                                    item.submenu[0].name === submenu.items[0].name) {
+                                    return item.submenu;
+                                }
+                                // Recursively search in nested submenus
+                                const found = findSubmenuInItems(item.submenu);
+                                if (found)
+                                    return found;
+                            }
+                        }
+                        return null;
+                    };
+                    const updatedItems = findSubmenuInItems(items);
+                    return {
+                        ...submenu,
+                        items: updatedItems || submenu.items, // Use updated items if found, otherwise keep old
+                    };
+                });
+            });
+        }
+    }, [items, menuState.visible, externalControl, keepOpenOnClick]);
     useEffect(() => {
         if (!menuState.visible)
             return;
@@ -109,8 +150,10 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl })
             // Desktop: Submenus are handled by hover, don't close menu
         }
         else {
-            // No submenu: close menu after executing action
-            handleClose();
+            // No submenu: close menu after executing action (unless keepOpenOnClick is true)
+            if (!keepOpenOnClick) {
+                handleClose();
+            }
         }
     };
     const handleBack = () => {

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

@@ -70,7 +70,7 @@ export const MenuItem = styled.div `
   align-items: center;
   justify-content: space-between;
   padding: 4px 12px;
-  cursor: ${props => props.$disabled ? 'not-allowed' : 'pointer'};
+  cursor: ${props => props.$disabled ? 'default' : 'pointer'};
   transition: all 0.15s ease;
   position: relative;
   user-select: none;

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

@@ -24,6 +24,7 @@ export interface TMContextMenuProps {
         };
         onClose: () => void;
     };
+    keepOpenOnClick?: boolean;
 }
 export interface Position {
     x: number;

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

@@ -4,9 +4,9 @@ import { ContextMenu } from '../ContextMenu';
 import ShowAlert from '../../base/TMAlert';
 import TMTooltip from '../../base/TMTooltip';
 import * as S from './styles';
-import { IconAdd, IconApply, IconMenuVertical, IconPencil, IconPin, IconUndo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { IconAdd, IconApply, IconMenuVertical, IconPin, IconUndo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
 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 = 8, }) => {
+const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 100, }) => {
     const getDefaultConfig = () => ({
         orientation: 'horizontal',
         savedItemIds: [],
@@ -57,10 +57,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 : 'horizontal';
             // Validate itemIds
             const validItemIds = Array.isArray(settings.itemIds) ? settings.itemIds : [];
-            // IMPORTANT: Detect old name-based configurations and reset them
-            // Old configs would have saved items, but those items don't have proper IDs from menu items
-            // New IDs are short like 'fav', 'dl', 'open-form', etc.
-            // If we detect old-style data (no items have valid IDs), reset to empty
             if (validItemIds.length > 0) {
                 // Check if any ID looks like the old format (contains language-specific text or is too long)
                 const hasOldFormatIds = validItemIds.some(id => typeof id === 'string' && (id.length > 20 || id.includes(' ')));
@@ -103,23 +99,17 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const dragOffset = useRef({ x: 0, y: 0 });
     const [dragOverIndex, setDragOverIndex] = useState(null);
     const stateSnapshot = useRef(null);
-    // Use refs to track item IDs without causing re-renders
     const floatingBarItemIds = useRef(new Set());
     const floatingBarItemNames = useRef(new Set());
-    // Update refs when items change, but don't trigger re-renders
     useEffect(() => {
         floatingBarItemIds.current = new Set(state.items.map(i => i.id));
         floatingBarItemNames.current = new Set(state.items.map(i => i.name));
     }, [state.items]);
-    // Convert menu items to flat list with pinned status
     const flattenMenuItems = useCallback((items, parentPath = '') => {
         const result = [];
         items.forEach((item, index) => {
-            // Use the actual item.id if available, otherwise fall back to generating from name
             const itemId = item.id || `${parentPath}${item.name}-${index}`;
-            // Only add items that have onClick (final actions, not submenu parents)
             if (item.onClick && !item.submenu) {
-                // Check if item is currently in the floating bar by ID only
                 const isPinned = state.items.some(i => i.id === itemId);
                 result.push({
                     id: itemId,
@@ -197,7 +187,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             onClick: foundItem?.onClick
         };
     }, [contextMenuItems]);
-    // Create context menu items for pinning (used by + button in edit mode)
     const getPinContextMenuItems = useCallback(() => {
         const flatItems = flattenMenuItems(contextMenuItems);
         const currentItemIds = new Set(state.items.map(i => i.id));
@@ -208,13 +197,11 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 const isAlreadyPinned = currentItemIds.has(itemId);
                 const pinItem = {
                     ...item,
-                    // Override onClick to pin instead of executing the action
                     onClick: item.onClick && !item.submenu ? () => {
                         if (flatItem && !isAlreadyPinned) {
                             togglePin(flatItem);
                         }
                     } : undefined,
-                    // Remove original disabled state - only disable already pinned items
                     disabled: isAlreadyPinned,
                 };
                 if (item.submenu) {
@@ -348,12 +335,25 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     };
     const toggleOrientation = () => {
         const newOrientation = state.orientation === 'horizontal' ? 'vertical' : 'horizontal';
-        // First, change the orientation
+        if (state.orientation === 'horizontal' && newOrientation === 'vertical') {
+            if (floatingRef.current) {
+                const floating = floatingRef.current.getBoundingClientRect();
+                const screenHeight = window.innerHeight;
+                if (floating.width > screenHeight - 70) {
+                    ShowAlert({
+                        mode: 'warning',
+                        title: 'Troppi elementi',
+                        message: 'Ci sono troppi elementi nella barra mobile per la modalità verticale.',
+                        duration: 4000,
+                    });
+                    return;
+                }
+            }
+        }
         setState(s => ({
             ...s,
             orientation: newOrientation,
         }));
-        // Then, after DOM updates, adjust position to stay in bounds
         requestAnimationFrame(() => {
             requestAnimationFrame(() => {
                 if (containerRef.current && floatingRef.current) {
@@ -441,24 +441,31 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         setState(s => ({ ...s, draggedItemIndex: null }));
         setDragOverIndex(null);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": state.position.x, "$y": state.position.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, children: [_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) }), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
+    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": state.position.x, "$y": state.position.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, onContextMenu: (e) => e.preventDefault(), children: [!state.isConfigMode ? (_jsx(ContextMenu, { items: [
+                            {
+                                name: SDKUI_Localizator.Configure,
+                                onClick: () => {
+                                    if (!state.isConfigMode) {
+                                        toggleConfigMode();
+                                    }
+                                },
+                            },
+                            {
+                                name: state.orientation === 'horizontal' ? 'Floating bar verticale' : 'Floating bar orizzontale',
+                                onClick: toggleOrientation,
+                            },
+                        ], trigger: "right", children: _jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) }) })) : (_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, onDoubleClick: handleGripDoubleClick, children: _jsx(IconDraggableDots, {}) })), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
                         // Get current state (disabled and onClick) from contextMenuItems
                         const currentState = getCurrentItemState(item.id);
                         const isDisabled = currentState.disabled || false;
                         const currentOnClick = currentState.onClick || item.onClick; // Fallback to stored onClick if not found
-                        return (_jsxs(S.DraggableItem, { "$isDragging": state.draggedItemIndex === index, "$isDragOver": dragOverIndex === index && state.draggedItemIndex !== index, draggable: state.isConfigMode, onDragStart: (e) => handleDragStart(e, index), onDragEnter: (e) => handleDragEnter(e, index), onDragOver: handleDragOver, onDragLeave: (e) => handleDragLeave(e, index), onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, children: [state.isConfigMode ? (_jsx(S.MenuButton, { onClick: () => {
-                                        if (state.isConfigMode || isDisabled)
-                                            return;
-                                        if (currentOnClick) {
-                                            currentOnClick();
-                                        }
-                                    }, disabled: isDisabled && !state.isConfigMode, children: item.icon })) : (_jsx(TMTooltip, { content: item.name, position: "top", children: _jsx(S.MenuButton, { onClick: () => {
+                        return (_jsxs(S.DraggableItem, { "$isDragging": state.draggedItemIndex === index, "$isDragOver": dragOverIndex === index && state.draggedItemIndex !== index, draggable: state.isConfigMode, onDragStart: (e) => handleDragStart(e, index), onDragEnter: (e) => handleDragEnter(e, index), onDragOver: handleDragOver, onDragLeave: (e) => handleDragLeave(e, index), onDrop: (e) => handleDrop(e, index), onDragEnd: handleDragEnd, children: [_jsx(TMTooltip, { content: item.name, position: "bottom", children: _jsx(S.MenuButton, { onClick: () => {
                                             if (state.isConfigMode || isDisabled)
                                                 return;
                                             if (currentOnClick) {
                                                 currentOnClick();
                                             }
-                                        }, disabled: 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: contextMenuItems, trigger: "left", children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) })), state.isConfigMode && state.items.length < maxItems && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: getPinContextMenuItems(), trigger: "left", children: _jsx(TMTooltip, { content: SDKUI_Localizator.Add, children: _jsx(S.AddButton, { children: _jsx(IconAdd, {}) }) }) })), _jsx(S.Separator, { "$orientation": state.orientation }), _jsxs(S.ButtonGroup, { "$orientation": state.orientation, children: [state.isConfigMode && (_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 }) }) })), state.isConfigMode ? (_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 }) }) })) : (_jsx(TMTooltip, { content: SDKUI_Localizator.Configure, position: state.orientation === 'horizontal' ? 'right' : 'top', children: _jsx(S.ConfigButton, { onClick: toggleConfigMode, children: _jsx(IconPencil, {}) }) }))] })] })] }));
+                                        }, 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: contextMenuItems, trigger: "left", 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 }) }) })] })] }))] })] }));
 };
 export default TMFloatingMenuBar;

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

@@ -127,7 +127,7 @@ export const MenuButton = styled.button `
 
   &:disabled {
     opacity: 0.5;
-    cursor: not-allowed;
+    cursor: default;
     color: rgba(255, 255, 255, 0.6);
   }
 
@@ -196,7 +196,7 @@ export const ApplyButton = styled.button `
 
   &:disabled {
     opacity: 0.3;
-    cursor: not-allowed;
+    cursor: default;
   }
 
   svg {
@@ -293,7 +293,7 @@ export const UndoButton = styled.button `
 
   &:disabled {
     opacity: 0.3;
-    cursor: not-allowed;
+    cursor: default;
   }
 
   svg {
@@ -340,7 +340,7 @@ export const ContextMenuWrapper = styled.div `
 `;
 export const ButtonGroup = styled.div `
   display: flex;
-  flex-direction: row;
+  flex-direction: ${props => props.$orientation === 'vertical' ? 'column' : 'row'};
   align-items: center;
   gap: 0;
 `;

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

@@ -600,7 +600,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
                                         _jsx(TMLayoutItem, { children: _jsx(TMSearchResultSelector, { searchResults: currentSearchResults, disableAccordionIfSingleCategory: disableAccordionIfSingleCategory, selectedTID: selectedSearchResultTID, selectedSearchResult: selectedSearchResult, autoSelectFirst: !isMobile || currentSearchResults.length === 1, onSelectionChanged: onSearchResultSelectionChanged }) })
                                         :
                                             _jsx(_Fragment, {}), _jsx(TMLayoutItem, { children: _jsxs("div", { ref: floatingBarContainerRef, style: { position: 'relative', height: '100%', width: '100%' }, children: [_jsx(TMSearchResultGrid, { showSearch: showSearch, fromDTD: fromDTD, allUsers: allUsers, inputFocusedItem: focusedItem, inputSelectedItems: selectedItems, searchResult: searchResults.length > 1 ? selectedSearchResult : searchResults[0], lastUpdateSearchTime: lastUpdateSearchTime, openInOffice: openInOffice, onDblClick: () => openFormHandler(LayoutModes.Update), floatingMenuItems: floatingMenuItems, onSelectionChanged: (items) => { setSelectedItems(items); }, onVisibleItemChanged: setVisibleItems, onFocusedItemChanged: setFocusedItem, onDownloadDcmtsAsync: async (inputDcmts, downloadType, downloadMode, _y, confirmAttachments) => await downloadDcmtsAsync(inputDcmts, downloadType, downloadMode, onFileOpened, confirmAttachments), showExportForm: showExportForm, onCloseExportForm: onCloseExportForm }), allowFloatingBar && showFloatingBar && deviceType !== DeviceType.MOBILE &&
-                                                    _jsx(TMFloatingMenuBar, { containerRef: floatingBarContainerRef, contextMenuItems: floatingMenuItems, isConstrained: true, defaultPosition: { x: 10, y: window.innerHeight - 215 }, maxItems: 8 })] }) })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { TID: focusedItem?.TID, DID: focusedItem?.DID, deviceType: deviceType, onCompleted: onWFOperationCompleted, onClose: () => setShowMoreInfoPopup(false) }), isOpenBatchUpdate && _jsx(TMBatchUpdateForm, { isModal: true, titleModal: `${SDKUI_Localizator.BatchUpdate} (${getSelectionDcmtInfo().length} documenti selezionati)`, inputDcmts: getSelectionDcmtInfo(), TID: focusedItem ? focusedItem?.TID : selectedItems[0]?.TID, DID: focusedItem ? focusedItem?.DID : selectedItems[0]?.DID, onBack: () => {
+                                                    _jsx(TMFloatingMenuBar, { containerRef: floatingBarContainerRef, contextMenuItems: floatingMenuItems, isConstrained: true, defaultPosition: { x: 10, y: window.innerHeight - 215 } })] }) })] }), showApprovePopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), isReject: 0, onClose: () => setShowApprovePopup(false) }), showRejectPopup && _jsx(WorkFlowApproveRejectPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), isReject: 1, onClose: () => setShowRejectPopup(false) }), showReAssignPopup && _jsx(WorkFlowReAssignPopUp, { deviceType: deviceType, onCompleted: onWFOperationCompleted, selectedItems: getSelectedDcmtsOrFocused(selectedItems, focusedItem), onClose: () => setShowReAssignPopup(false) }), showMoreInfoPopup && _jsx(WorkFlowMoreInfoPopUp, { TID: focusedItem?.TID, DID: focusedItem?.DID, deviceType: deviceType, onCompleted: onWFOperationCompleted, onClose: () => setShowMoreInfoPopup(false) }), isOpenBatchUpdate && _jsx(TMBatchUpdateForm, { isModal: true, titleModal: `${SDKUI_Localizator.BatchUpdate} (${getSelectionDcmtInfo().length} documenti selezionati)`, inputDcmts: getSelectionDcmtInfo(), TID: focusedItem ? focusedItem?.TID : selectedItems[0]?.TID, DID: focusedItem ? focusedItem?.DID : selectedItems[0]?.DID, onBack: () => {
                                     setIsOpenBatchUpdate(false);
                                 }, onSavedCallbackAsync: async () => {
                                     setIsOpenBatchUpdate(false);

package/package.json

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