@topconsultnpm/sdkui-react 6.20.0-dev1.19 → 6.20.0-dev1.20

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

@@ -78,9 +78,8 @@ export const MenuItem = styled.div `
     opacity: ${props => props.$disabled ? 0.4 : 1};
   }
 
-  /* Keep right-icon-btn always enabled and visible */
+  /* Right icon button hidden by default, shown on hover */
   & .right-icon-btn {
-    opacity: 1 !important;
     cursor: pointer !important;
   }
 
@@ -89,6 +88,11 @@ export const MenuItem = styled.div `
       background: linear-gradient(90deg, #f0f7ff 0%, #e6f2ff 100%);
       color: #0066cc;
     `}
+    
+    /* Show right icon on hover */
+    & .right-icon-btn {
+      opacity: 1 !important;
+    }
   }
 
   &:active {
@@ -157,8 +161,8 @@ export const RightIconButton = styled.button.attrs({
   margin-left: 8px;
   border-radius: 6px;
   font-size: 14px;
-  opacity: 1 !important;
-  transition: all 0.15s ease;
+  opacity: 0 !important;
+  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
 
   &:hover {
     background: rgba(0, 0, 0, 0.05);

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

@@ -4,7 +4,7 @@ import { ContextMenu } from '../ContextMenu';
 import Notification from '../Notification';
 import TMTooltip from '../../base/TMTooltip';
 import * as S from './styles';
-import { IconApply, IconMenuKebab, IconMenuVertical, IconSettings, IconPin } from '../../../helper';
+import { IconApply, IconMenuKebab, IconMenuVertical, IconPencil, IconPin } 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 = [], storageKey = 'floatingMenuBar-config', isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) => {
     const loadConfig = () => {
@@ -347,7 +347,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
         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, children: _jsx(IconDraggableDots, {}) }), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ? _jsx(IconApply, {}) : _jsx(IconSettings, {}) }), 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, children: [_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, 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.name);
                         const isDisabled = currentState.disabled || false;
@@ -365,6 +365,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
                                                 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: enhancedContextMenuItems(), trigger: "left", children: _jsx(S.MenuButton, { children: _jsx(IconMenuVertical, {}) }) }, Array.from(pinnedItemIds).join(','))), !state.isConfigMode && (_jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }))] }), showMaxItemsNotification && (_jsx("div", { style: { position: 'fixed', top: '20px', left: '50%', transform: 'translateX(-50%)', zIndex: 100001 }, children: _jsx(Notification, { title: "Maximum Items Reached", message: `You have reached the maximum number of pinned items (${maxItems}). Please unpin an item before adding a new one.`, mode: "warning", position: "top-center", duration: 4000, closable: true, stopOnMouseEnter: true, hasProgress: true, onClose: () => setShowMaxItemsNotification(false) }) }))] }));
+                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: enhancedContextMenuItems(), trigger: "left", children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) }, Array.from(pinnedItemIds).join(','))), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ? _jsx(IconApply, {}) : _jsx(IconPencil, {}) }), !state.isConfigMode && (_jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }))] }), showMaxItemsNotification && (_jsx("div", { style: { position: 'fixed', top: '20px', left: '50%', transform: 'translateX(-50%)', zIndex: 100001 }, children: _jsx(Notification, { title: "Maximum Items Reached", message: `You have reached the maximum number of pinned items (${maxItems}). Please unpin an item before adding a new one.`, mode: "warning", position: "top-center", duration: 4000, closable: true, stopOnMouseEnter: true, hasProgress: true, onClose: () => setShowMaxItemsNotification(false) }) }))] }));
 };
 export default TMFloatingMenuBar;

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

@@ -21,12 +21,20 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
 export declare const GripHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $orientation: "horizontal" | "vertical";
 }>> & string;
+export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $orientation: "horizontal" | "vertical";
+}>> & string;
 export declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $isActive?: boolean;
 }>> & string;
 export declare const ConfigButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $isActive?: boolean;
 }>> & 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"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, never>> & string;
 export declare const RemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const OrientationToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $orientation: "horizontal" | "vertical";

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

@@ -55,7 +55,7 @@ export const FloatingContainer = styled.div.attrs(props => ({
   transition: none;
 
   &:hover {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #0071BC 0%, #1B1464 100%);
     border: 1px solid #667eea;
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
                 0 6px 16px rgba(0, 0, 0, 0.2);
@@ -98,6 +98,13 @@ export const GripHandle = styled.div `
     height: 14px;
   }
 `;
+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'};
+  margin: ${props => props.$orientation === 'horizontal' ? '0 4px' : '4px 0'};
+  flex-shrink: 0;
+`;
 export const MenuButton = styled.button `
   display: flex;
   align-items: center;
@@ -110,16 +117,15 @@ export const MenuButton = styled.button `
   color: white;
   font-size: 16px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background 0.2s ease;
   position: relative;
 
   &:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
   }
 
   &:active:not(:disabled) {
-    transform: scale(0.95);
+    opacity: 0.8;
   }
 
   &:disabled {
@@ -131,14 +137,15 @@ export const MenuButton = styled.button `
   svg {
     width: 18px;
     height: 18px;
+    transform: translateY(2px);
   }
 `;
 export const ConfigButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
+  width: 28px;
+  height: 28px;
   background: ${props => props.$isActive
     ? 'rgba(0, 0, 0, 0.2)'
     : 'rgba(0, 0, 0, 0.1)'};
@@ -147,9 +154,9 @@ export const ConfigButton = styled.button `
     : 'rgba(255, 255, 255, 0.15)'};
   border-radius: 8px;
   color: white;
-  font-size: 16px;
+  font-size: 14px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background 0.2s ease, border-color 0.2s ease;
   position: relative;
 
   &:hover {
@@ -157,16 +164,20 @@ export const ConfigButton = styled.button `
     ? 'rgba(0, 0, 0, 0.25)'
     : 'rgba(0, 0, 0, 0.15)'};
     border-color: rgba(255, 255, 255, 0.35);
-    transform: scale(1.05);
   }
 
   &:active {
-    transform: scale(0.95);
+    opacity: 0.8;
   }
 
   svg {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
+  }
+`;
+export const ContextMenuButton = styled(MenuButton) `
+  svg {
+    transform: translateY(0);
   }
 `;
 export const RemoveButton = styled.button `

package/lib/components/features/documents/TMDcmtPreview.js

@@ -19,20 +19,30 @@ let Document = null;
 let Page = null;
 let pdfjs = null;
 let isPdfLibraryLoaded = false;
+let loadingPromise = null;
 const loadPdfLibrary = async () => {
     if (isPdfLibraryLoaded)
         return;
-    try {
-        const reactPdf = await import('react-pdf');
-        Document = reactPdf.Document;
-        Page = reactPdf.Page;
-        pdfjs = reactPdf.pdfjs;
-        pdfjs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.mjs');
-        isPdfLibraryLoaded = true;
-    }
-    catch (error) {
-        console.error('Failed to load react-pdf library:', error);
-    }
+    if (loadingPromise)
+        return loadingPromise;
+    loadingPromise = (async () => {
+        try {
+            const reactPdf = await import('react-pdf');
+            Document = reactPdf.Document;
+            Page = reactPdf.Page;
+            pdfjs = reactPdf.pdfjs;
+            pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+            isPdfLibraryLoaded = true;
+        }
+        catch (error) {
+            console.error('Failed to load react-pdf library:', error);
+            throw error;
+        }
+        finally {
+            loadingPromise = null;
+        }
+    })();
+    return loadingPromise;
 };
 const ErrorContent = ({ error, isAbortError, onRetry }) => {
     if (isAbortError) {
@@ -183,16 +193,25 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
             window.removeEventListener('resize', checkIsMobile);
         };
     }, []);
-    useEffect(() => {
-        if (isMobile && fileType === 'application/pdf' && !isPdfLibraryLoaded && !pdfLibraryLoading) {
-            setPdfLibraryLoading(true);
-            loadPdfLibrary().finally(() => setPdfLibraryLoading(false));
-        }
-    }, [isMobile, fileType, pdfLibraryLoading]);
     useEffect(() => {
         if (fileBlob) {
-            setFileType(fileBlob.type);
+            const blobType = fileBlob.type;
+            setFileType(blobType);
             setFormattedXml(undefined);
+            // Load PDF library immediately if it's a PDF file on mobile
+            if (isMobile && blobType === 'application/pdf' && !isPdfLibraryLoaded && !pdfLibraryLoading) {
+                setPdfLibraryLoading(true);
+                loadPdfLibrary()
+                    .then(() => {
+                    console.log('PDF library loaded successfully');
+                })
+                    .catch((error) => {
+                    console.error('Failed to load PDF library:', error);
+                })
+                    .finally(() => {
+                    setPdfLibraryLoading(false);
+                });
+            }
             const fileName = fileBlob.name || '';
             const fileExtension = fileName.split('.').pop()?.toLowerCase() || '';
             const isConfigFile = ['config', 'cfg'].includes(fileExtension);

package/package.json

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