@topconsultnpm/sdkui-react 6.20.0-dev1.49 → 6.20.0-dev1.50

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

@@ -136,7 +136,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
     };
     // iOS-specific touch handlers for long press
     const handleTouchStart = (e) => {
-        if (!isIOS)
+        if (!isIOS || trigger !== 'right')
             return;
         const touch = e.touches[0];
         touchStartPos.current = { x: touch.clientX, y: touch.clientY };
@@ -158,7 +158,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
         }, 500);
     };
     const handleTouchMove = (e) => {
-        if (!isIOS || !touchStartPos.current)
+        if (!isIOS || trigger !== 'right' || !touchStartPos.current)
             return;
         const touch = e.touches[0];
         const moveThreshold = 10; // pixels
@@ -174,7 +174,7 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
         }
     };
     const handleTouchEnd = () => {
-        if (!isIOS)
+        if (!isIOS || trigger !== 'right')
             return;
         if (longPressTimeoutRef.current) {
             clearTimeout(longPressTimeoutRef.current);
@@ -198,9 +198,6 @@ const TMContextMenu = ({ items, trigger = 'right', children, externalControl, ke
             }
         }
         else {
-            // Close menu if item has onClick (actual action) or keepOpenOnClick is false
-            // This allows pin icon clicks (onRightIconClick) to keep menu open while
-            // clicking the item itself closes it
             if (item.onClick || !keepOpenOnClick) {
                 handleClose();
             }

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

@@ -7,6 +7,24 @@ import * as S from './styles';
 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 = 100, }) => {
+    const percentToPixels = (percent, containerSize) => {
+        return (percent / 100) * containerSize;
+    };
+    const pixelsToPercent = (pixels, containerSize) => {
+        return (pixels / containerSize) * 100;
+    };
+    const isPixelFormat = (pos) => {
+        return pos.x > 100 || pos.y > 100;
+    };
+    const migrateToPercentage = (pixelPos) => {
+        const container = containerRef.current?.getBoundingClientRect();
+        const containerWidth = isConstrained && container ? container.width : window.innerWidth;
+        const containerHeight = isConstrained && container ? container.height : window.innerHeight;
+        return {
+            x: pixelsToPercent(pixelPos.x, containerWidth),
+            y: pixelsToPercent(pixelPos.y, containerHeight),
+        };
+    };
     const getDefaultConfig = () => ({
         orientation: 'horizontal',
         savedItemIds: [],
@@ -33,10 +51,10 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             const hasValidPosition = settings.position &&
                 typeof settings.position.x === 'number' &&
                 typeof settings.position.y === 'number' &&
-                !isNaN(settings.position.x) &&
-                !isNaN(settings.position.y) &&
-                isFinite(settings.position.x) &&
-                isFinite(settings.position.y);
+                !Number.isNaN(settings.position.x) &&
+                !Number.isNaN(settings.position.y) &&
+                Number.isFinite(settings.position.x) &&
+                Number.isFinite(settings.position.y);
             if (!hasValidPosition) {
                 console.warn('FloatingMenuBar: Invalid position, resetting to defaults');
                 resetFloatingBarSettings();
@@ -66,12 +84,23 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                     return getDefaultConfig();
                 }
             }
-            // Check if position was actually saved (not just the default class value)
-            const hasSavedPosition = settings.position.x !== 100 || settings.position.y !== 100 || validItemIds.length > 0;
+            // Migrate old pixel-based position to percentage-based
+            let finalPosition = settings.position;
+            if (isPixelFormat(settings.position) || settings.positionFormat === 'pixels') {
+                console.log('FloatingMenuBar: Migrating pixel-based position to percentage-based');
+                finalPosition = migrateToPercentage(settings.position);
+                // Save migrated position immediately
+                SDKUI_Globals.userSettings.searchSettings.floatingMenuBar = {
+                    orientation: validOrientation,
+                    itemIds: validItemIds,
+                    position: finalPosition,
+                    positionFormat: 'percentage',
+                };
+            }
             return {
                 orientation: validOrientation,
                 savedItemIds: validItemIds,
-                position: hasSavedPosition ? settings.position : defaultPosition,
+                position: finalPosition,
             };
         }
         catch (error) {
@@ -88,7 +117,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     };
     const initialConfig = loadConfig();
     const [state, setState] = useState({
-        position: initialConfig.position,
+        position: initialConfig.position, // Stored as percentage
         isDragging: false,
         isConfigMode: false,
         orientation: initialConfig.orientation,
@@ -98,6 +127,8 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const floatingRef = useRef(null);
     const dragOffset = useRef({ x: 0, y: 0 });
     const [dragOverIndex, setDragOverIndex] = useState(null);
+    const [pixelPosition, setPixelPosition] = useState({ x: 0, y: 0 }); // Calculated pixel position
+    const containerSizeRef = useRef({ width: 0, height: 0 });
     const stateSnapshot = useRef(null);
     const floatingBarItemIds = useRef(new Set());
     const floatingBarItemNames = useRef(new Set());
@@ -105,6 +136,39 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         floatingBarItemIds.current = new Set(state.items.map(i => i.id));
         floatingBarItemNames.current = new Set(state.items.map(i => i.name));
     }, [state.items]);
+    // Calculate pixel position from percentage when container size or position changes
+    useEffect(() => {
+        const updatePixelPosition = () => {
+            if (!containerRef.current || !floatingRef.current)
+                return;
+            const container = containerRef.current.getBoundingClientRect();
+            const floating = floatingRef.current.getBoundingClientRect();
+            const containerWidth = isConstrained ? container.width : window.innerWidth;
+            const containerHeight = isConstrained ? container.height : window.innerHeight;
+            containerSizeRef.current = { width: containerWidth, height: containerHeight };
+            let newX = percentToPixels(state.position.x, containerWidth);
+            let newY = percentToPixels(state.position.y, containerHeight);
+            newX = Math.max(0, Math.min(newX, containerWidth - floating.width));
+            newY = Math.max(0, Math.min(newY, containerHeight - floating.height));
+            setPixelPosition({ x: newX, y: newY });
+        };
+        updatePixelPosition();
+        const resizeObserver = new ResizeObserver(() => {
+            updatePixelPosition();
+        });
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        if (!isConstrained) {
+            window.addEventListener('resize', updatePixelPosition);
+        }
+        return () => {
+            resizeObserver.disconnect();
+            if (!isConstrained) {
+                window.removeEventListener('resize', updatePixelPosition);
+            }
+        };
+    }, [state.position, isConstrained]);
     const flattenMenuItems = useCallback((items, parentPath = '') => {
         const result = [];
         items.forEach((item, index) => {
@@ -243,15 +307,15 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             if (isConstrained) {
                 // For absolute positioning, offset is relative to container
                 dragOffset.current = {
-                    x: e.clientX - containerRect.left - state.position.x,
-                    y: e.clientY - containerRect.top - state.position.y,
+                    x: e.clientX - containerRect.left - pixelPosition.x,
+                    y: e.clientY - containerRect.top - pixelPosition.y,
                 };
             }
             else {
                 // For fixed positioning, offset is relative to viewport
                 dragOffset.current = {
-                    x: e.clientX - state.position.x,
-                    y: e.clientY - state.position.y,
+                    x: e.clientX - pixelPosition.x,
+                    y: e.clientY - pixelPosition.y,
                 };
             }
         }
@@ -284,14 +348,26 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             newX = Math.max(0, Math.min(newX, window.innerWidth - floating.width));
             newY = Math.max(0, Math.min(newY, window.innerHeight - floating.height));
         }
-        setState(s => ({
-            ...s,
-            position: { x: newX, y: newY },
-        }));
+        // Update pixel position directly during drag
+        setPixelPosition({ x: newX, y: newY });
     }, [state.isDragging, containerRef, isConstrained]);
     const handleMouseUp = useCallback(() => {
-        setState(s => ({ ...s, isDragging: false }));
-    }, []);
+        if (state.isDragging && containerSizeRef.current.width > 0) {
+            // Convert final pixel position to percentage before updating state
+            const percentagePosition = {
+                x: pixelsToPercent(pixelPosition.x, containerSizeRef.current.width),
+                y: pixelsToPercent(pixelPosition.y, containerSizeRef.current.height),
+            };
+            setState(s => ({
+                ...s,
+                isDragging: false,
+                position: percentagePosition,
+            }));
+        }
+        else {
+            setState(s => ({ ...s, isDragging: false }));
+        }
+    }, [state.isDragging, pixelPosition]);
     // Touch event handlers for tablet support
     const handleTouchStart = (e) => {
         if (state.isConfigMode)
@@ -301,14 +377,14 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
         if (containerRect) {
             if (isConstrained) {
                 dragOffset.current = {
-                    x: touch.clientX - containerRect.left - state.position.x,
-                    y: touch.clientY - containerRect.top - state.position.y,
+                    x: touch.clientX - containerRect.left - pixelPosition.x,
+                    y: touch.clientY - containerRect.top - pixelPosition.y,
                 };
             }
             else {
                 dragOffset.current = {
-                    x: touch.clientX - state.position.x,
-                    y: touch.clientY - state.position.y,
+                    x: touch.clientX - pixelPosition.x,
+                    y: touch.clientY - pixelPosition.y,
                 };
             }
         }
@@ -333,14 +409,24 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
             newX = Math.max(0, Math.min(newX, window.innerWidth - floating.width));
             newY = Math.max(0, Math.min(newY, window.innerHeight - floating.height));
         }
-        setState(s => ({
-            ...s,
-            position: { x: newX, y: newY },
-        }));
+        setPixelPosition({ x: newX, y: newY });
     }, [state.isDragging, containerRef, isConstrained]);
     const handleTouchEnd = useCallback(() => {
-        setState(s => ({ ...s, isDragging: false }));
-    }, []);
+        if (state.isDragging && containerSizeRef.current.width > 0) {
+            const percentagePosition = {
+                x: pixelsToPercent(pixelPosition.x, containerSizeRef.current.width),
+                y: pixelsToPercent(pixelPosition.y, containerSizeRef.current.height),
+            };
+            setState(s => ({
+                ...s,
+                isDragging: false,
+                position: percentagePosition,
+            }));
+        }
+        else {
+            setState(s => ({ ...s, isDragging: false }));
+        }
+    }, [state.isDragging, pixelPosition]);
     useEffect(() => {
         if (state.isDragging) {
             document.addEventListener('mousemove', handleMouseMove);
@@ -366,6 +452,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
                 orientation: state.orientation,
                 itemIds: state.items.map(item => item.id),
                 position: state.position,
+                positionFormat: 'percentage',
             };
         }
         catch (error) {
@@ -375,7 +462,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], isConstrained
     const toggleConfigMode = () => {
         setState(s => {
             if (!s.isConfigMode) {
-                // Entering edit mode - save snapshot
                 stateSnapshot.current = {
                     items: [...s.items],
                     orientation: s.orientation,
@@ -570,7 +656,7 @@ 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, onContextMenu: (e) => e.preventDefault(), children: [!state.isConfigMode ? (_jsx(ContextMenu, { items: [
+    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": pixelPosition.x, "$y": pixelPosition.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: () => {

package/lib/helper/SDKUI_Globals.d.ts

@@ -70,6 +70,7 @@ export declare class FloatingMenuBarSettings {
         x: number;
         y: number;
     };
+    positionFormat?: 'pixels' | 'percentage';
 }
 export declare class ArchivingSettings {
     mruTIDs: number[];

package/lib/helper/SDKUI_Globals.js

@@ -106,7 +106,7 @@ export class FloatingMenuBarSettings {
     constructor() {
         this.orientation = 'horizontal';
         this.itemIds = ['rel-det', 'rel-mst', 'dl'];
-        this.position = { x: 10, y: globalThis.window?.innerHeight ? globalThis.window.innerHeight - 215 : 100 };
+        this.position = { x: 1, y: 90 };
     }
 }
 export class ArchivingSettings {

package/lib/helper/SDKUI_Localizator.d.ts

@@ -204,7 +204,7 @@ export declare class SDKUI_Localizator {
     static get DownloadXMLAttachments(): string;
     static get Draft(): string;
     static get Drafts(): string;
-    static get DropFileHere(): "Ziehen Sie Ihre Datei hierher" | "Drop your file here" | "Suelta tu archivo aquí" | "Déposez votre fichier ici" | "Solte seu arquivo aqui";
+    static get DropFileHere(): "Ziehen Sie Ihre Datei hierher" | "Drop your file here" | "Suelta tu archivo aquí" | "Déposez votre fichier ici" | "Solte seu arquivo aqui" | "Trascina qui il tuo file";
     static get DropFileToShare(): string;
     static get Duplicate(): "Duplikat" | "Duplicate" | "Duplicar" | "Dupliquer" | "Duplicado" | "Duplica";
     static get Duplicate_ConfirmFor1(): "Möchten Sie '{{0}}' duplizieren?" | "Are you sure you want to duplicate '{{0}}'?" | "¿Estás seguro de que deseas duplicar '{{0}}'?" | "Êtes-vous sûr de vouloir dupliquer '{{0}}'?" | "Você tem certeza que deseja duplicar '{{0}}'?" | "Sei sicuro di voler duplicare '{{0}}'?";

package/lib/helper/SDKUI_Localizator.js

@@ -1996,7 +1996,7 @@ export class SDKUI_Localizator {
             case CultureIDs.Es_ES: return "Suelta tu archivo aquí";
             case CultureIDs.Fr_FR: return "Déposez votre fichier ici";
             case CultureIDs.Pt_PT: return "Solte seu arquivo aqui";
-            default: return "Drop your file here";
+            default: return "Trascina qui il tuo file";
         }
     }
     static get DropFileToShare() {

package/package.json

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