@topconsultnpm/sdkui-react 6.20.0-dev1.21 → 6.20.0-dev1.23

package/lib/components/base/TMCustomButton.js

@@ -4,18 +4,49 @@ import TMModal from './TMModal';
 import styled from 'styled-components';
 import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
 import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
+import { DeviceType, useDeviceType } from './TMDeviceProvider';
 const IframeContainer = styled.div `
   display: flex;
   height: 100%;
   flex-direction: column;
+  position: relative;
 `;
 const StyledIframe = styled.iframe `
   border: none;
   flex: 1;
 `;
+const LoadingOverlay = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(128, 128, 128, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+
+  &::after {
+    content: '';
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
 const TMCustomButton = (props) => {
     const { button, isModal = true, formData, selectedItems, onClose } = props;
     const { appName: scriptUrl, arguments: args } = button;
+    const Device = useDeviceType();
     const iframeRef = useRef(null);
     const attributes = useMemo(() => getButtonAttributes(args, formData, selectedItems), [args, formData, selectedItems]);
     const RunOnce = button.mode === "RunOnce";
@@ -28,6 +59,13 @@ const TMCustomButton = (props) => {
     const [waitPanelValue, setWaitPanelValue] = useState(0);
     const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(selectedItemsCount);
     const [abortController, setAbortController] = useState(undefined);
+    // Aggiungi timestamp all'URL per evitare cache
+    const iframeUrl = useMemo(() => {
+        if (!scriptUrl)
+            return '';
+        const separator = scriptUrl.includes('?') ? '&' : '?';
+        return `${scriptUrl}${separator}t=${Date.now()}`;
+    }, [scriptUrl]);
     const targetOrigin = useMemo(() => {
         if (!scriptUrl)
             return '*';
@@ -40,6 +78,7 @@ const TMCustomButton = (props) => {
         }
     }, [scriptUrl]);
     const handleLoad = () => setLoading(false);
+    const isMobile = Device === DeviceType.MOBILE;
     const handleError = () => {
         setLoading(false);
         setError(true);
@@ -81,7 +120,6 @@ const TMCustomButton = (props) => {
     useEffect(() => {
         if (loading || error)
             return;
-        //if(error) clearTimeout(timeoutIframe);
         if (!RunOnce && selectedItemsCount > 0) {
             // esegui per ogni item selezionato
             const controller = new AbortController();
@@ -102,7 +140,6 @@ const TMCustomButton = (props) => {
                     onClose?.();
                 }, 2000);
             }
-            //clearTimeout(timeoutIframe);
         }
     }, [loading, error, RunOnce]);
     useEffect(() => {
@@ -111,7 +148,7 @@ const TMCustomButton = (props) => {
             onClose?.();
         }
     }, []);
-    const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: scriptUrl })] }));
-    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: '60%', height: '70%', resizable: true, expandable: true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
+    const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [loading && _jsx(LoadingOverlay, {}), error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: iframeUrl })] }));
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
 };
 export default TMCustomButton;

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

@@ -15,35 +15,7 @@ import { StyledAnimatedComponentOpacity } from '../../base/Styled';
 import TMPanel from '../../base/TMPanel';
 import TMTooltip from '../../base/TMTooltip';
 import { ContextMenu } from '../../NewComponents/ContextMenu';
-let Document = null;
-let Page = null;
-let pdfjs = null;
-let isPdfLibraryLoaded = false;
-let loadingPromise = null;
-const loadPdfLibrary = async () => {
-    if (isPdfLibraryLoaded)
-        return;
-    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;
-};
+import TMPdfViewer from '../../../helper/TMPdfViewer';
 const ErrorContent = ({ error, isAbortError, onRetry }) => {
     if (isAbortError) {
         return (_jsx(StyledAnimatedComponentOpacity, { style: { width: '100%', height: '100%' }, children: _jsxs(StyledPanelStatusContainer, { children: [_jsx(IconCloseOutline, { fontSize: 92, color: TMColors.error }), _jsxs(StyledPreviewNotAvailable, { children: [_jsx("div", { children: error }), _jsx("div", { children: SDKUI_Localizator.PreviewNotAvailable })] }), _jsx(TMButton, { caption: SDKUI_Localizator.TryAgain, onClick: onRetry, showTooltip: false })] }) }));
@@ -166,53 +138,11 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
     const [blobUrl, setBlobUrl] = useState(undefined);
     const [fileType, setFileType] = useState(undefined);
     const [formattedXml, setFormattedXml] = useState(undefined);
-    const [isMobile, setIsMobile] = useState(false);
-    const [numPages, setNumPages] = useState(0);
-    const [pdfLibraryLoading, setPdfLibraryLoading] = useState(false);
-    useEffect(() => {
-        const checkIsMobile = () => {
-            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
-            // Only detect actual mobile/tablet devices, NOT desktop browsers
-            const isMobileDevice = 
-            // Traditional mobile detection (phones and tablets)
-            /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent) ||
-                // Additional Android tablet detection (covers tablets in landscape)
-                /android.*tablet|android.*mobile/i.test(userAgent) ||
-                // Touch-only devices (excludes laptops with touchscreen)
-                (('ontouchstart' in window || navigator.maxTouchPoints > 0) &&
-                    !/Windows NT|Macintosh|Linux/.test(userAgent)) ||
-                // Small screen mobile devices only
-                (window.screen.width <= 768 && /Mobi|Android/i.test(userAgent));
-            setIsMobile(isMobileDevice);
-        };
-        checkIsMobile();
-        // Listen for orientation changes (important for tablets)
-        window.addEventListener('orientationchange', checkIsMobile);
-        window.addEventListener('resize', checkIsMobile);
-        return () => {
-            window.removeEventListener('orientationchange', checkIsMobile);
-            window.removeEventListener('resize', checkIsMobile);
-        };
-    }, []);
     useEffect(() => {
         if (fileBlob) {
             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);
@@ -269,36 +199,10 @@ export const TMFileViewer = ({ fileBlob, isResizingActive }) => {
     if (fileBlob.type.includes('image')) {
         return (_jsx(ImageViewer, { fileBlob: fileBlob, alt: '' }));
     }
-    if (fileType === 'application/pdf' && isMobile) {
-        if (!isPdfLibraryLoaded || pdfLibraryLoading || !Document || !Page) {
-            return (_jsxs("div", { style: {
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    height: '100%',
-                    flexDirection: 'column',
-                    gap: '10px'
-                }, children: [_jsx(IconPreview, { fontSize: 64 }), _jsxs("div", { children: [SDKUI_Localizator.Loading, "..."] })] }));
-        }
-        return (_jsx(PDFViewerContainer, { children: _jsx(Document, { file: blobUrl, onLoadSuccess: ({ numPages }) => setNumPages(numPages), loading: _jsxs("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        height: '100%',
-                        flexDirection: 'column',
-                        gap: '10px'
-                    }, children: [_jsx(IconPreview, { fontSize: 64 }), _jsxs("div", { children: [SDKUI_Localizator.Loading, "..."] })] }), error: _jsxs("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        height: '100%',
-                        flexDirection: 'column',
-                        gap: '10px'
-                    }, children: [_jsx(IconCloseOutline, { fontSize: 64, color: TMColors.error }), _jsx("div", { children: "Errore nel caricamento del PDF" })] }), children: Array.from(new Array(numPages), (el, index) => (_jsx(Page, { pageNumber: index + 1, renderTextLayer: false, renderAnnotationLayer: false, width: window.innerWidth }, `page_${index + 1}`))) }) }));
+    if (fileType === 'application/pdf') {
+        return _jsx(TMPdfViewer, { pdfBlob: fileBlob, isResizingActive: isResizingActive, enableFitToWidth: true });
     }
-    return (_jsx("iframe", { srcDoc: formattedXml ? `<html><body>${formattedXml}</body></html>` : undefined, src: !formattedXml
-            ? (fileType === 'application/pdf' ? `${blobUrl}#view=FitH&scrollbar=1` : blobUrl)
-            : undefined, title: "File Viewer", width: "100%", height: "100%", style: { border: 'none', zIndex: 0, pointerEvents: isResizingActive === true ? "none" : "auto" } }, blobUrl));
+    return (_jsx("iframe", { srcDoc: formattedXml ? `<html><body>${formattedXml}</body></html>` : undefined, src: !formattedXml ? blobUrl : undefined, title: "File Viewer", width: "100%", height: "100%", style: { border: 'none', zIndex: 0, pointerEvents: isResizingActive === true ? "none" : "auto" } }, blobUrl));
 };
 const ImageViewer = ({ fileBlob, alt = 'Image', className }) => {
     const containerRef = useRef(null);

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

@@ -360,7 +360,7 @@ const TMSearchResult = ({ allTasks = [], getAllTasks, deleteTaskByIdsCallback, a
     const customButtonMenuItems = () => {
         const customButtonsItems = customButtonsLayout?.customButtons?.filter((customButton) => customButton.isForSearchResult && customButton.isForSearchResult > 0)
             .map((customButton) => ({
-            icon: svgToString(TMImageLibrary({ imageID: customButton.glyphID, showPath: false })),
+            icon: svgToString(TMImageLibrary({ imageID: customButton.glyphID, showPath: true })),
             text: customButton.title || 'Bottone personalizzato',
             onClick: () => setCustomButton(customButton)
         }));

package/lib/helper/TMPdfViewer.d.ts

@@ -0,0 +1,8 @@
+interface TMPdfViewerProps {
+    pdfBlob: Blob;
+    title?: string;
+    isResizingActive?: boolean;
+    enableFitToWidth?: boolean;
+}
+declare const TMPdfViewer: (props: TMPdfViewerProps) => import("react/jsx-runtime").JSX.Element;
+export default TMPdfViewer;

package/lib/helper/TMPdfViewer.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef, useCallback } from "react";
+import { pdfjs, Document, Page } from 'react-pdf';
+import styled from "styled-components";
+import { LoadIndicator } from 'devextreme-react/load-indicator';
+import { IconCloseOutline } from "./TMIcons";
+import { SDKUI_Localizator } from "./SDKUI_Localizator";
+import { TMColors } from "../utils/theme";
+pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
+const PDFViewerContainer = styled.div `
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #f5f5f5;
+  position: relative;
+  
+  .react-pdf__Document {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 0;
+  }
+  
+  .react-pdf__Page {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    margin: 0 auto;
+  }
+  
+  .react-pdf__Page__canvas {
+    max-width: 100%;
+    height: auto !important;
+  }
+`;
+const LoadingOverlay = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(245, 245, 245, 0.95);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`;
+const TMPdfViewer = (props) => {
+    const { pdfBlob, title = "Anteprima PDF", isResizingActive, enableFitToWidth = false } = props;
+    const [isMobile, setIsMobile] = useState(false);
+    const [totalPagesNumber, setTotalPagesNumber] = useState(0);
+    const [loadedPagesNumber, setLoadedPagesNumber] = useState(0);
+    const [visiblePages, setVisiblePages] = useState(new Set([1]));
+    const [pdfUrl, setPdfUrl] = useState("");
+    const observerRef = useRef(null);
+    useEffect(() => {
+        const checkIsMobile = () => {
+            const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+            // Detect actual mobile/tablet devices
+            const isMobileDevice = 
+            // User agent detection (phones and tablets)
+            /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent) ||
+                // Media query for touch devices with coarse pointer (more reliable than screen width)
+                (window.matchMedia?.('(hover: none) and (pointer: coarse)').matches ?? false) ||
+                // Touch-capable devices excluding desktop OS
+                (navigator.maxTouchPoints > 1 && !/Win|Mac|Linux x86_64/i.test(userAgent));
+            setIsMobile(isMobileDevice);
+        };
+        checkIsMobile();
+        // Create URL for iframe
+        const url = URL.createObjectURL(pdfBlob);
+        setPdfUrl(url);
+        return () => {
+            if (url) {
+                URL.revokeObjectURL(url);
+            }
+        };
+    }, [pdfBlob]);
+    /**
+     * Callback per l'Intersection Observer che gestisce il lazy loading delle pagine PDF.
+     * Viene chiamato ogni volta che una pagina entra o esce dal viewport (area visibile).
+     *
+     * - Monitora quando gli elementi (pagine) diventano visibili
+     * - Aggiunge il numero di pagina al Set delle pagine visibili quando entra nel viewport
+     * - Il rootMargin di 500px carica le pagine prima che siano effettivamente visibili (preloading)
+     */
+    const pageObserverCallback = useCallback((entries) => {
+        entries.forEach(entry => {
+            const pageNum = parseInt(entry.target.getAttribute('data-page-number') || '0');
+            if (entry.isIntersecting) {
+                // Aggiunge la pagina al Set di quelle da renderizzare
+                setVisiblePages(prev => new Set([...prev, pageNum]));
+            }
+        });
+    }, []);
+    /**
+     * Crea e configura l'Intersection Observer per il lazy loading.
+     *
+     * Configurazione:
+     * - root: null → osserva rispetto al viewport del browser
+     * - rootMargin: '500px' → inizia il caricamento 500px prima che la pagina sia visibile (buffer)
+     * - threshold: 0.01 → trigger quando anche solo l'1% dell'elemento è visibile
+     *
+     * Benefici:
+     * - Non blocca l'UI durante il rendering
+     * - Carica solo le pagine necessarie
+     * - Migliora le performance su PDF con molte pagine
+     */
+    useEffect(() => {
+        observerRef.current = new IntersectionObserver(pageObserverCallback, {
+            root: null,
+            rootMargin: '500px',
+            threshold: 0.01
+        });
+        return () => {
+            // Cleanup: disconnette l'observer quando il componente viene smontato
+            observerRef.current?.disconnect();
+        };
+    }, [pageObserverCallback]);
+    // Use iframe for desktop, react-pdf for mobile
+    if (!isMobile && pdfUrl) {
+        return (_jsx(PDFViewerContainer, { children: _jsx("iframe", { src: `${pdfUrl}#${enableFitToWidth ? 'view=FitH&' : ''}scrollbar=1`, title: title, style: {
+                    width: '100%',
+                    height: '100%',
+                    border: 'none',
+                    zIndex: 0,
+                    pointerEvents: isResizingActive === true ? "none" : "auto"
+                } }, pdfUrl) }));
+    }
+    return _jsxs(PDFViewerContainer, { children: [loadedPagesNumber === 0 && totalPagesNumber > 0 && _jsx(LoadingOverlay, { children: _jsxs("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        flexDirection: 'column',
+                        gap: '10px'
+                    }, children: [_jsx(LoadIndicator, { height: 60, width: 60 }), _jsxs("div", { children: [SDKUI_Localizator.Loading, "..."] })] }) }), _jsx("div", { style: { display: loadedPagesNumber > 0 && totalPagesNumber > 0 ? 'block' : 'none' }, children: _jsx(Document, { file: pdfBlob, onLoadSuccess: ({ numPages }) => {
+                        setTotalPagesNumber(numPages);
+                        setLoadedPagesNumber(0);
+                    }, loading: _jsxs("div", { style: {
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            height: '100%',
+                            flexDirection: 'column',
+                            gap: '10px'
+                        }, children: [_jsx(LoadIndicator, { height: 60, width: 60 }), _jsxs("div", { children: [SDKUI_Localizator.Loading, "..."] })] }), error: _jsxs("div", { style: {
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            height: '100%',
+                            flexDirection: 'column',
+                            gap: '10px'
+                        }, children: [_jsx(IconCloseOutline, { fontSize: 64, color: TMColors.error }), _jsx("div", { children: "Errore nel caricamento del PDF" })] }), children: Array.from(new Array(totalPagesNumber), (el, index) => {
+                        const pageNumber = index + 1;
+                        const shouldRender = visiblePages.has(pageNumber);
+                        return (_jsx("div", { "data-page-number": pageNumber, ref: (el) => {
+                                if (el && observerRef.current) {
+                                    observerRef.current.observe(el);
+                                }
+                            }, style: {
+                                minHeight: shouldRender ? 'auto' : '1000px',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center'
+                            }, children: shouldRender && (_jsx(Page, { pageNumber: pageNumber, renderTextLayer: false, renderAnnotationLayer: false, width: Math.min(window.innerWidth - 40, 1200), loading: _jsx("div", { style: { padding: '20px' }, children: _jsx(LoadIndicator, { height: 40, width: 40 }) }), onLoadSuccess: () => {
+                                    setLoadedPagesNumber(prev => prev + 1);
+                                } })) }, `page_${pageNumber}`));
+                    }) }) })] });
+};
+export default TMPdfViewer;

package/lib/helper/index.d.ts

@@ -9,6 +9,7 @@ export * from './queryHelper';
 export * from './TMUtils';
 export * from './TMCommandsContextMenu';
 export * from './TMConditionalWrapper';
+export * from './TMPdfViewer';
 export * from './TMToppyMessage';
 export * from './GlobalStyles';
 export * from './checkinCheckoutManager';

package/lib/helper/index.js

@@ -9,6 +9,7 @@ export * from './queryHelper';
 export * from './TMUtils';
 export * from './TMCommandsContextMenu';
 export * from './TMConditionalWrapper';
+export * from './TMPdfViewer';
 export * from './TMToppyMessage';
 export * from './GlobalStyles';
 export * from './checkinCheckoutManager';

package/package.json

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

package/lib/components/NewComponents/Notification/Notification.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { NotificationProps } from './types';
-declare const Notification: React.FC<NotificationProps>;
-export default Notification;

package/lib/components/NewComponents/Notification/Notification.js

@@ -1,60 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import * as S from './styles';
-const Notification = ({ title, message, mode = 'info', position = 'top-right', duration = 3000, closable = false, stopOnMouseEnter = true, hasProgress = true, onClose, }) => {
-    const [state, setState] = useState({
-        visible: true,
-        isPaused: false,
-        progress: 100,
-    });
-    const timeoutRef = useRef(undefined);
-    const remainingTimeRef = useRef(duration);
-    const pauseTimeRef = useRef(0);
-    const closeNotification = () => {
-        setState(prev => ({ ...prev, visible: false }));
-        setTimeout(() => {
-            onClose?.();
-        }, 300);
-    };
-    useEffect(() => {
-        // Set up auto-close timer
-        timeoutRef.current = setTimeout(() => {
-            closeNotification();
-        }, duration);
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, [duration]);
-    const handleMouseEnter = () => {
-        if (!stopOnMouseEnter)
-            return;
-        // Pause the timer
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            pauseTimeRef.current = Date.now();
-        }
-        setState(prev => ({ ...prev, isPaused: true }));
-    };
-    const handleMouseLeave = () => {
-        if (!stopOnMouseEnter)
-            return;
-        // Resume the timer with remaining time
-        const pauseDuration = Date.now() - pauseTimeRef.current;
-        remainingTimeRef.current = Math.max(0, remainingTimeRef.current - pauseDuration);
-        timeoutRef.current = setTimeout(() => {
-            closeNotification();
-        }, remainingTimeRef.current);
-        setState(prev => ({ ...prev, isPaused: false }));
-    };
-    const handleClose = (e) => {
-        e.stopPropagation();
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        closeNotification();
-    };
-    return (_jsxs(S.NotificationContainer, { "$position": position, "$mode": mode, "$visible": state.visible, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "alert", "aria-live": "assertive", children: [_jsxs(S.NotificationContent, { children: [_jsx(S.NotificationTitle, { children: title }), _jsx(S.NotificationMessage, { children: message })] }), closable && (_jsx(S.CloseButton, { onClick: handleClose, "aria-label": "Close notification", children: "\u00D7" })), hasProgress && (_jsx(S.ProgressBar, { "$duration": duration, "$mode": mode, "$isPaused": state.isPaused }))] }));
-};
-export default Notification;

package/lib/components/NewComponents/Notification/NotificationContainer.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { NotificationPosition } from './types';
-interface NotificationContainerProps {
-    position: NotificationPosition;
-    children: React.ReactNode;
-}
-declare const NotificationContainer: React.FC<NotificationContainerProps>;
-export default NotificationContainer;

package/lib/components/NewComponents/Notification/NotificationContainer.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-const Container = styled.div `
-  position: fixed;
-  z-index: 10002;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  pointer-events: none;
-
-  ${props => {
-    const isTop = props.$position.startsWith('top');
-    const isBottom = props.$position.startsWith('bottom');
-    const isLeft = props.$position.endsWith('left');
-    const isRight = props.$position.endsWith('right');
-    const isCenter = props.$position.endsWith('center');
-    return `
-      ${isTop ? 'top: 24px;' : ''}
-      ${isBottom ? 'bottom: 24px;' : ''}
-      ${isLeft ? 'left: 24px;' : ''}
-      ${isRight ? 'right: 24px;' : ''}
-      ${isCenter ? 'left: 50%; transform: translateX(-50%);' : ''}
-    `;
-}}
-
-  & > * {
-    pointer-events: auto;
-  }
-`;
-const NotificationContainer = ({ position, children }) => {
-    return _jsx(Container, { "$position": position, children: children });
-};
-export default NotificationContainer;

package/lib/components/NewComponents/Notification/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './Notification';
-export * from './types';

package/lib/components/NewComponents/Notification/index.js

@@ -1,2 +0,0 @@
-export { default } from './Notification';
-export * from './types';

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

@@ -1,21 +0,0 @@
-import type { NotificationMode, NotificationPosition } from './types';
-export declare const NotificationContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $position: NotificationPosition;
-    $mode: NotificationMode;
-    $visible: boolean;
-}>> & string;
-export declare const NotificationContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const NotificationTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const NotificationMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 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 ProgressBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | 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<HTMLDivElement> | null | undefined;
-}>, {
-    $duration: number;
-    $mode: NotificationMode;
-    $isPaused: boolean;
-}>, {
-    $duration: number;
-    $mode: NotificationMode;
-    $isPaused: boolean;
-}>> & string;

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

@@ -1,180 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-const slideInFromTop = keyframes `
-  from {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-const slideInFromBottom = keyframes `
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-const slideOut = keyframes `
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-`;
-const getModeColors = (mode) => {
-    const colors = {
-        success: {
-            bg: '#10b981',
-            bgDark: '#059669',
-            border: '#34d399',
-            text: '#ffffff',
-        },
-        error: {
-            bg: '#ef4444',
-            bgDark: '#dc2626',
-            border: '#f87171',
-            text: '#ffffff',
-        },
-        warning: {
-            bg: '#f59e0b',
-            bgDark: '#d97706',
-            border: '#fbbf24',
-            text: '#ffffff',
-        },
-        info: {
-            bg: '#3b82f6',
-            bgDark: '#2563eb',
-            border: '#60a5fa',
-            text: '#ffffff',
-        },
-    };
-    return colors[mode];
-};
-export const NotificationContainer = styled.div `
-  position: relative;
-  z-index: 1;
-  min-width: 320px;
-  max-width: 420px;
-  background: ${props => getModeColors(props.$mode).bg};
-  border-radius: 12px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2),
-              0 4px 12px rgba(0, 0, 0, 0.15);
-  padding: 16px 20px;
-  animation: ${props => {
-    if (!props.$visible)
-        return slideOut;
-    return props.$position.startsWith('top') ? slideInFromTop : slideInFromBottom;
-}} 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  backdrop-filter: blur(10px);
-  border: 2px solid ${props => getModeColors(props.$mode).border};
-  color: ${props => getModeColors(props.$mode).text};
-  overflow: hidden;
-
-  [data-theme='dark'] & {
-    background: ${props => getModeColors(props.$mode).bgDark};
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
-                0 4px 12px rgba(0, 0, 0, 0.3);
-  }
-
-  @media (max-width: 768px) {
-    min-width: 280px;
-    max-width: calc(100vw - 48px);
-  }
-`;
-export const NotificationContent = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding-right: 24px;
-`;
-export const NotificationTitle = styled.div `
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.4;
-  letter-spacing: -0.01em;
-`;
-export const NotificationMessage = styled.div `
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.5;
-  opacity: 0.95;
-`;
-export const CloseButton = styled.button `
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  background: transparent;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  transition: all 0.15s ease;
-  font-size: 18px;
-  line-height: 1;
-  padding: 0;
-  opacity: 0.8;
-
-  &:hover {
-    opacity: 1;
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-
-  &:focus {
-    outline: 2px solid rgba(255, 255, 255, 0.5);
-    outline-offset: 2px;
-  }
-`;
-export const ProgressBar = styled.div.attrs(props => ({
-    style: {
-        animationDuration: `${props.$duration}ms`,
-    },
-})) `
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 4px;
-  width: 100%;
-  background: ${props => getModeColors(props.$mode).border};
-  border-radius: 0 0 0 10px;
-  box-shadow: 0 0 8px ${props => getModeColors(props.$mode).border};
-  transform-origin: left;
-  animation: progress-shrink linear forwards;
-  animation-play-state: ${props => props.$isPaused ? 'paused' : 'running'};
-
-  @keyframes progress-shrink {
-    from {
-      transform: scaleX(1);
-    }
-    to {
-      transform: scaleX(0);
-    }
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 20px;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
-  }
-`;

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

@@ -1,18 +0,0 @@
-export type NotificationMode = 'warning' | 'info' | 'error' | 'success';
-export type NotificationPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export interface NotificationProps {
-    title: string;
-    message: string;
-    mode?: NotificationMode;
-    position?: NotificationPosition;
-    duration?: number;
-    closable?: boolean;
-    stopOnMouseEnter?: boolean;
-    hasProgress?: boolean;
-    onClose?: () => void;
-}
-export interface NotificationState {
-    visible: boolean;
-    isPaused: boolean;
-    progress: number;
-}

package/lib/components/NewComponents/Notification/types.js

@@ -1 +0,0 @@
-export {};