@topconsultnpm/sdkui-react 6.20.0-dev1.123 → 6.20.0-dev1.124

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

@@ -239,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 => {
@@ -266,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;
   }
 
@@ -328,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/FloatingMenuBar/TMFloatingMenuBar.js

@@ -7,7 +7,7 @@ import * as S from './styles';
 import { IconDelete, IconMenuVertical, IconPin, IconRotate, IconSeparator, SDKUI_Globals } from '../../../helper';
 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: 1, y: 90 }, defaultOrientation = 'horizontal', maxItems = 100, contextMenuDefaultPinnedIds = [], defaultItems = [], enableConfigMode = true, bgColor = undefined, hasContextMenu = true, pinnedItemIds: externalPinnedItemIds, onPinChange, }) => {
+const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained = false, defaultPosition = { x: 1, y: 90 }, defaultOrientation = 'horizontal', maxItems = 100, defaultPinnedItems = [], fixedItems = [], enableConfigMode = true, bgColor = undefined, hasContextMenu = true, pinnedItemIds: externalPinnedItemIds, onPinChange, }) => {
     const percentToPixels = (percent, containerSize) => {
         return (percent / 100) * containerSize;
     };
@@ -28,7 +28,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     };
     const getDefaultConfig = () => ({
         orientation: defaultOrientation,
-        savedItemIds: contextMenuDefaultPinnedIds,
+        savedItemIds: defaultPinnedItems,
         position: defaultPosition,
     });
     const resetFloatingBarSettings = () => {
@@ -44,14 +44,14 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         if (!enableConfigMode) {
             return {
                 orientation: defaultOrientation,
-                savedItemIds: contextMenuDefaultPinnedIds,
+                savedItemIds: defaultPinnedItems,
                 position: defaultPosition,
             };
         }
         try {
             const settings = SDKUI_Globals.userSettings.searchSettings.floatingMenuBar;
-            // If localStorage is empty (first time), use props as defaults
-            if (!settings || !settings.position || !settings.itemIds) {
+            // If localStorage is empty (first time) or itemIds is empty array, use props as defaults
+            if (!settings || !settings.position || !settings.itemIds || settings.itemIds.length === 0) {
                 return getDefaultConfig();
             }
             // Validate position
@@ -145,6 +145,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const isSyncingFromExternal = useRef(false);
     const isLocalChange = useRef(false);
     const dragStartPosition = useRef(null);
+    const isItemsInitialized = useRef(false);
     useEffect(() => {
         floatingBarItemIds.current = new Set(state.items.map(i => i.id));
         floatingBarItemNames.current = new Set(state.items.map(i => i.name));
@@ -204,49 +205,56 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         });
         return result;
     }, [state.items]);
-    // Restore items on mount from savedItemIds
+    // Restore items on mount (and when contextMenuItems become available) from savedItemIds
     useEffect(() => {
-        if (contextMenuItems.length > 0 || initialConfig.savedItemIds.length > 0 || defaultItems.length > 0) {
-            const flatItems = flattenMenuItems(contextMenuItems);
-            let itemsToSet = [];
-            // If enableConfigMode is false and defaultItems provided, use only defaultItems
-            if (!enableConfigMode && defaultItems.length > 0) {
-                itemsToSet = defaultItems;
-            }
-            else if (enableConfigMode && initialConfig.savedItemIds.length > 0) {
-                // Restore items in the saved order from localStorage (only if config mode is enabled)
-                const restoredItems = initialConfig.savedItemIds
-                    .map((id) => {
-                    if (id.startsWith('separator-')) {
-                        return {
-                            id,
-                            name: 'Separator',
-                            icon: _jsx(Separator, {}),
-                            onClick: () => { },
-                            isSeparator: true,
-                        };
-                    }
-                    return flatItems.find(item => item.id === id);
-                })
-                    .filter((item) => item !== undefined);
-                itemsToSet = restoredItems;
-            }
-            else if (contextMenuDefaultPinnedIds.length > 0) {
-                // First time: Use contextMenuDefaultPinnedIds from props to find items by ID
-                const defaultPinnedItems = contextMenuDefaultPinnedIds
-                    .map((id) => flatItems.find(item => item.id === id))
-                    .filter((item) => item !== undefined);
-                itemsToSet = defaultPinnedItems;
-            }
-            else if (defaultItems.length > 0) {
-                // Use defaultItems as fallback
-                itemsToSet = defaultItems;
-            }
-            if (itemsToSet.length > 0) {
-                setState(s => ({ ...s, items: itemsToSet }));
+        // For enableConfigMode=false: always sync with fixedItems
+        if (!enableConfigMode) {
+            if (fixedItems.length > 0) {
+                setState(s => ({ ...s, items: fixedItems }));
             }
+            return;
+        }
+        // For enableConfigMode=true: only initialize once
+        if (isItemsInitialized.current)
+            return;
+        // Wait until contextMenuItems is populated
+        if (contextMenuItems.length === 0)
+            return;
+        const flatItems = flattenMenuItems(contextMenuItems);
+        if (flatItems.length === 0)
+            return;
+        let itemsToSet = [];
+        if (initialConfig.savedItemIds.length > 0) {
+            // Restore items in the saved order from localStorage
+            const restoredItems = initialConfig.savedItemIds
+                .map((id) => {
+                if (id.startsWith('separator-')) {
+                    return {
+                        id,
+                        name: 'Separator',
+                        icon: _jsx(Separator, {}),
+                        onClick: () => { },
+                        isSeparator: true,
+                    };
+                }
+                return flatItems.find(item => item.id === id);
+            })
+                .filter((item) => item !== undefined);
+            itemsToSet = restoredItems;
+        }
+        // If still empty, try defaultPinnedItems
+        if (itemsToSet.length === 0 && defaultPinnedItems.length > 0) {
+            const resolvedDefaultItems = defaultPinnedItems
+                .map((id) => flatItems.find(item => item.id === id))
+                .filter((item) => item !== undefined);
+            itemsToSet = resolvedDefaultItems;
         }
-    }, enableConfigMode ? [] : [defaultItems]); // Update when defaultItems change if config mode is disabled
+        if (itemsToSet.length > 0) {
+            isItemsInitialized.current = true;
+            setState(s => ({ ...s, items: itemsToSet }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [contextMenuItems, fixedItems, enableConfigMode]);
     // Sync with external pinnedItemIds when they change (from parent component)
     useEffect(() => {
         // Skip sync if a local change was just made (e.g. right-click remove/add separator)
@@ -256,6 +264,10 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         }
         if (externalPinnedItemIds === undefined || !enableConfigMode)
             return;
+        // Skip sync if external is empty but we have initialized items (first login case)
+        // The parent hook starts with [] but we've initialized with defaults
+        if (externalPinnedItemIds.length === 0 && state.items.length > 0)
+            return;
         const flatItems = flattenMenuItems(contextMenuItems);
         // Build items from external pinned IDs
         const itemsFromExternal = externalPinnedItemIds

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

@@ -16,9 +16,9 @@ export interface TMFloatingMenuBarProps {
     isConstrained?: boolean;
     defaultPosition?: Position;
     maxItems?: number;
-    contextMenuDefaultPinnedIds?: string[];
+    defaultPinnedItems?: string[];
     defaultOrientation?: 'horizontal' | 'vertical';
-    defaultItems?: TMFloatingMenuItem[];
+    fixedItems?: TMFloatingMenuItem[];
     enableConfigMode?: boolean;
     bgColor?: string;
     hasContextMenu?: boolean;

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

@@ -614,7 +614,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: _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: 1, y: 88 }, contextMenuDefaultPinnedIds: ['rel-det', 'rel-mst', 'dl'], defaultOrientation: 'horizontal', hasContextMenu: false, pinnedItemIds: pinnedItemIds, onPinChange: setPinnedItemIds })] }), 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: 1, y: 88 }, defaultPinnedItems: ['rel-det', 'rel-mst', 'dl'], defaultOrientation: 'horizontal', hasContextMenu: false, pinnedItemIds: pinnedItemIds, onPinChange: setPinnedItemIds })] }), 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/lib/components/features/workflow/diagram/WFDiagram.js

@@ -1822,7 +1822,7 @@ const WFDiagram = ({ xmlDiagramString, currentSetID, allowEdit = true, onDiagram
     }, [isFullScreen]);
     const diagramContent = (_jsxs(CanvasContainer, { onDoubleClick: handleCanvasDoubleClick, children: [_jsx("input", { ref: fileInputRef, type: "file", accept: ".xml" // Filtra per file XML
                 , onChange: handleFileChange, style: { display: 'none' } }), SDK_Globals.tmSession?.SessionDescr?.appModuleID === AppModules.SURFER ?
-                _jsx(TMFloatingMenuBar, { containerRef: diagramRef, defaultPosition: { x: 45, y: 85 }, enableConfigMode: false, defaultItems: [
+                _jsx(TMFloatingMenuBar, { containerRef: diagramRef, defaultPosition: { x: 45, y: 85 }, enableConfigMode: false, fixedItems: [
                         { icon: _jsx(IconZoomIn, {}), name: SDKUI_Localizator.ZoomIn, disabled: isAutoZoomEnabled, onClick: () => { handleZoomIn(); }, id: 'zoom-in', isPinned: true },
                         { icon: _jsx(IconZoomOut, {}), name: SDKUI_Localizator.ZoomOut, disabled: isAutoZoomEnabled, onClick: () => { handleZoomOut(); }, id: 'zoom-out', isPinned: true },
                         { icon: _jsx(IconZoomAuto, {}), name: 'AutoZoom', onClick: () => { handleToggleAutoZoom(); }, id: 'zoom-auto', isPinned: true, isToggle: isAutoZoomEnabled },

package/package.json

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