@topconsultnpm/sdkui-react 6.19.0-test.1 → 6.19.0-test2

package/lib/components/base/TMPopUp.js

@@ -20,65 +20,69 @@ export var ButtonNames;
     ButtonNames["OK"] = "OK";
     ButtonNames["CANCEL"] = "Cancel";
 })(ButtonNames || (ButtonNames = {}));
-const StyledExeptionToolbar = styled.div `
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 5px;
-    padding: 5px;
-    user-select: none;
-    border-top: 1px solid #f3f3f3;
-    /* background-color: ${TMColors.primary_container}; */
-    background-color: white;
+// Dimensioni minime di default per i popup
+const DEFAULT_MIN_WIDTH = 500;
+const DEFAULT_MIN_HEIGHT = 400;
+const StyledExeptionToolbar = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    padding: 5px;
+    user-select: none;
+    border-top: 1px solid #f3f3f3;
+    /* background-color: ${TMColors.primary_container}; */
+    background-color: white;
 `;
-const StyledMessageToolbar = styled.div `
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    gap: clamp(2px, 1vw, 5px);
-    padding: clamp(3px, 1vw, 5px);
-    user-select: none;
-    border-top: 1px solid #f3f3f3;
-    background-color: #ffffff;
-    z-index: 100;
-    flex-wrap: wrap;
-    
-    @media (max-width: 200px) {
-        flex-direction: column;
-        gap: 2px;
-        padding: 3px;
-        justify-content: center;
-    }
-    
-    @media (max-width: 150px) {
-        padding: 2px;
-        gap: 1px;
-    }
+const StyledMessageToolbar = styled.div `
+    position: sticky;
+    bottom: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: clamp(2px, 1vw, 5px);
+    padding: clamp(3px, 1vw, 5px);
+    user-select: none;
+    border-top: 1px solid #f3f3f3;
+    background-color: #ffffff;
+    z-index: 1;
+    flex-wrap: wrap;
+    
+    @media (max-width: 200px) {
+        flex-direction: column;
+        gap: 2px;
+        padding: 3px;
+        justify-content: center;
+    }
+    
+    @media (max-width: 150px) {
+        padding: 2px;
+        gap: 1px;
+    }
 `;
-const TabContextContainer = styled.div `
-    padding: 10px;
-    height: 100%;
-    width: 100%;
-    border-radius: 5px;
-    overflow: auto;
-    user-select: none;
-    position: relative;
+const TabContextContainer = styled.div `
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+    border-radius: 5px;
+    overflow: auto;
+    user-select: none;
+    position: relative;
 `;
-const StyledAppVersionText = styled.p `
-    width: '200px'; 
-    display: 'flex';
-    flex-direction: row; 
-    justify-content: space-between; 
-    align-items: center; 
-    color: ${props => props.$color};
+const StyledAppVersionText = styled.p `
+    width: '200px'; 
+    display: 'flex';
+    flex-direction: row; 
+    justify-content: space-between; 
+    align-items: center; 
+    color: ${props => props.$color};
 `;
-const StyledCopyInclipBoardButtonContainer = styled.div `
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
+const StyledCopyInclipBoardButtonContainer = styled.div `
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
 `;
 const Message = ({ msg }) => {
     let wrapper = document.createElement('div');
@@ -89,68 +93,70 @@ const Message = ({ msg }) => {
     }, []);
     return (_jsx("div", { ref: containerRef }));
 };
-const ResponsiveMessageContainer = styled.div `
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    background-color: #ffffff;
+const ResponsiveMessageContainer = styled.div `
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: #ffffff;
+    overflow: hidden;
 `;
-const ResponsiveMessageContent = styled.div `
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: clamp(8px, 2vw, 20px);
-    padding: clamp(8px, 3vw, 25px) clamp(5px, 2vw, 30px);
-    min-height: clamp(80px, 15vh, 120px);
-    
-    @media (min-width: 300px) {
-        flex-direction: ${props => props.$isMobile ? 'column' : 'row'};
-    }
-    
-    @media (max-width: 200px) {
-        padding: 5px;
-        gap: 5px;
-        min-height: 60px;
-    }
+const ResponsiveMessageContent = styled.div `
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: clamp(8px, 2vw, 20px);
+    padding: clamp(8px, 3vw, 25px) clamp(5px, 2vw, 30px);
+    min-height: clamp(80px, 15vh, 120px);
+    overflow: auto;
+    
+    @media (min-width: 300px) {
+        flex-direction: ${props => props.$isMobile ? 'column' : 'row'};
+    }
+    
+    @media (max-width: 200px) {
+        padding: 5px;
+        gap: 5px;
+        min-height: 60px;
+    }
 `;
-const ResponsiveToppyImage = styled.img `
-    width: clamp(25px, 8vw, 60px);
-    height: clamp(31px, 10vw, 75px);
-    flex-shrink: 0;
-    transform: ${props => props.$isMobile ? 'none' : 'translateY(8px)'};
-    
-    @media (max-width: 200px) {
-        width: 20px;
-        height: 25px;
-        transform: none;
-    }
-    
-    @media (min-width: 300px) {
-        transform: ${props => props.$isMobile ? 'none' : 'translateY(8px)'};
-    }
+const ResponsiveToppyImage = styled.img `
+    width: clamp(25px, 8vw, 60px);
+    height: clamp(31px, 10vw, 75px);
+    flex-shrink: 0;
+    transform: ${props => props.$isMobile ? 'none' : 'translateY(8px)'};
+    
+    @media (max-width: 200px) {
+        width: 20px;
+        height: 25px;
+        transform: none;
+    }
+    
+    @media (min-width: 300px) {
+        transform: ${props => props.$isMobile ? 'none' : 'translateY(8px)'};
+    }
 `;
-const ResponsiveMessageText = styled.div `
-    flex: 1;
-    text-align: center;
-    font-size: clamp(12px, 2.5vw, 14px);
-    line-height: clamp(1.2, 1.4, 1.4);
-    color: #333;
-    word-wrap: break-word;
-    overflow-wrap: break-word;
-    hyphens: auto;
-    min-width: 0;
-    
-    @media (min-width: 300px) {
-        text-align: ${props => props.$isMobile ? 'center' : 'left'};
-    }
-    
-    @media (max-width: 150px) {
-        font-size: 8px;
-        line-height: 1.1;
-    }
+const ResponsiveMessageText = styled.div `
+    flex: 1;
+    text-align: center;
+    font-size: clamp(12px, 2.5vw, 14px);
+    line-height: clamp(1.2, 1.4, 1.4);
+    color: #333;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    min-width: 0;
+    
+    @media (min-width: 300px) {
+        text-align: ${props => props.$isMobile ? 'center' : 'left'};
+    }
+    
+    @media (max-width: 150px) {
+        font-size: 8px;
+        line-height: 1.1;
+    }
 `;
 // ResponsiveButton wrapper component to avoid circular dependency
 const ResponsiveButton = (props) => {
@@ -163,8 +169,11 @@ const ResponsiveMessageBody = ({ message, isMobile, MessageToolbar, showToppy })
 const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', message = '', buttons, onClose, confirmOnEnter = false, showToppy = true, initialWidth = 'clamp(100px, 90vw, 400px)', initialHeight = 'auto' }) => {
     let deviceType = useDeviceType();
     const isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const popupRef = useRef(null);
     const [width, setWidth] = useState(initialWidth);
     const [height, setHeight] = useState(initialHeight);
+    const [minWidth, setMinWidth] = useState(0);
+    const [minHeight, setMinHeight] = useState(0);
     const [isVisible, setIsVisible] = useState(true);
     const [btns, setBtns] = useState(buttons || []);
     useEffect(() => {
@@ -176,6 +185,34 @@ const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', me
             setBtns(arr);
         }
     }, [buttons]);
+    /**
+     * Gestore chiamato quando il popup viene mostrato.
+     * Calcola e imposta le dimensioni minime del popup in base allo spazio disponibile.
+     * Le dimensioni minime sono il valore più piccolo tra le dimensioni effettive del parent e le dimensioni minime di default
+     */
+    const handleShown = () => {
+        // Usa requestAnimationFrame per attendere il completamento del rendering
+        requestAnimationFrame(() => {
+            if (popupRef.current && popupRef.current.instance) {
+                const instance = popupRef.current.instance();
+                if (instance) {
+                    // Ottiene l'elemento content del popup
+                    const element = instance.content();
+                    if (element) {
+                        const parentElement = element.parentElement;
+                        if (parentElement) {
+                            // Legge le dimensioni effettive del contenitore parent
+                            const widthPx = parentElement.offsetWidth;
+                            const heightPx = parentElement.offsetHeight;
+                            // Imposta le dimensioni minime usando il valore più piccolo tra le dimensioni disponibili e quelle di default
+                            setMinWidth(widthPx < DEFAULT_MIN_WIDTH ? widthPx : DEFAULT_MIN_WIDTH);
+                            setMinHeight(heightPx < DEFAULT_MIN_HEIGHT ? heightPx : DEFAULT_MIN_HEIGHT);
+                        }
+                    }
+                }
+            }
+        });
+    };
     const handleKeyDown = useCallback((e) => {
         if (confirmOnEnter && e.key === 'Enter') {
             e.preventDefault();
@@ -210,19 +247,51 @@ const TMMessageBox = ({ resizable = false, onButtonClick, title = 'TopMedia', me
         setWidth(e.width.toString());
         setHeight(e.height.toString());
     };
-    return (_jsx(Popup, { animation: undefined, visible: isVisible, showCloseButton: true, width: width, height: height, minHeight: 'clamp(100px, 20vh, 180px)', title: title, onHidden: () => { onClose?.(); setIsVisible(false); }, resizeEnabled: resizable, onResizeEnd: handleResizeEnd, wrapperAttr: { id: 'tm-messagebox-wrapper' }, onShown: () => {
+    return (_jsx(Popup, { ref: popupRef, animation: undefined, visible: isVisible, showCloseButton: true, width: width, height: height, minWidth: minWidth, minHeight: minHeight || 'clamp(100px, 20vh, 180px)', maxHeight: '95%', maxWidth: '95%', title: title, onHidden: () => { onClose?.(); setIsVisible(false); }, resizeEnabled: resizable, onShown: () => {
+            handleShown();
             const el = document.getElementById('tm-messagebox-wrapper');
             if (el)
                 el.style.zIndex = '20000';
-        }, children: _jsx(ResponsiveMessageBody, { message: message, isMobile: isMobile, MessageToolbar: MessageToolbar, showToppy: showToppy }) }));
+        }, onResizeEnd: handleResizeEnd, wrapperAttr: { id: 'tm-messagebox-wrapper' }, children: _jsx(ResponsiveMessageBody, { message: message, isMobile: isMobile, MessageToolbar: MessageToolbar, showToppy: showToppy }) }));
 };
 const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.appModule} v. ${SDK_Globals.appVersion}`, onClose }) => {
+    const popupRef = useRef(null);
     const [isVisible, setIsVisible] = useState(true);
+    const [minWidth, setMinWidth] = useState(0);
+    const [minHeight, setMinHeight] = useState(0);
     let d = new Date();
     let dateString = d.getDate() + '/' + d.getMonth() + 1 + '/' + d.getFullYear();
     let timeString = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ':' + d.getMilliseconds();
     let message = getExceptionMessage(exception);
     let deviceType = useDeviceType();
+    /**
+     * Gestore chiamato quando il popup viene mostrato.
+     * Calcola e imposta le dimensioni minime del popup in base allo spazio disponibile.
+     * Le dimensioni minime sono il valore più piccolo tra le dimensioni effettive del parent e le dimensioni minime di default
+     */
+    const handleShown = () => {
+        // Usa requestAnimationFrame per attendere il completamento del rendering
+        requestAnimationFrame(() => {
+            if (popupRef.current && popupRef.current.instance) {
+                const instance = popupRef.current.instance();
+                if (instance) {
+                    // Ottiene l'elemento content del popup
+                    const element = instance.content();
+                    if (element) {
+                        const parentElement = element.parentElement;
+                        if (parentElement) {
+                            // Legge le dimensioni effettive del contenitore parent
+                            const widthPx = parentElement.offsetWidth;
+                            const heightPx = parentElement.offsetHeight;
+                            // Imposta le dimensioni minime usando il valore più piccolo tra le dimensioni disponibili e quelle di default
+                            setMinWidth(widthPx < DEFAULT_MIN_WIDTH ? widthPx : DEFAULT_MIN_WIDTH);
+                            setMinHeight(heightPx < DEFAULT_MIN_HEIGHT ? heightPx : DEFAULT_MIN_HEIGHT);
+                        }
+                    }
+                }
+            }
+        });
+    };
     const getFullMessage = () => {
         let fullMessage = '';
         fullMessage += `${d}\n${'-' + JSON.stringify(exception)}\n` + `-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`;
@@ -235,7 +304,7 @@ const TMExceptionBox = ({ resizable = false, exception, title = `${SDK_Globals.a
     const ExceptionToolbar = () => {
         return (_jsxs(StyledExeptionToolbar, { children: [_jsx(TMButton, { color: 'primaryOutline', btnStyle: 'text', onClick: () => copyToClipBoard(getFullMessage()), caption: SDKUI_Localizator.CopyToClipboard, showTooltip: false }), _jsx(TMButton, { btnStyle: 'text', onClick: () => { onClose?.(); setIsVisible(false); }, caption: SDKUI_Localizator.Close, showTooltip: false, color: 'error' })] }));
     };
-    return (_jsx(Popup, { resizeEnabled: resizable, visible: isVisible, onHidden: () => { onClose?.(); setIsVisible(false); }, showCloseButton: true, width: calcResponsiveSizes(deviceType, '600px', '400px', '350px'), height: '350px', title: title, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: 'calc(100% - 50px)', children: _jsxs(TMTabGroup, { validationItems: [], children: [_jsxs(TMTab, { label: SDKUI_Localizator.Error, children: [_jsxs(TabContextContainer, { style: { height: 'calc(100% - 68px )', paddingRight: '40px' }, children: [_jsxs("p", { children: [" ", _jsx("span", { style: { color: TMColors.primary }, children: "Messaggio: " }), " ", message] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: '5px', marginTop: '5px' }, children: _jsxs("div", { children: [_jsxs("span", { style: { color: TMColors.primary }, children: [SDKUI_Localizator.Date, "  ", SDKUI_Localizator.Time.toLowerCase(), ": "] }), d.toString()] }) })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`Date: ${dateString}\nTime: ${timeString}\nMessage: ${message}`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.CompleteError, children: [_jsx(TabContextContainer, { style: { paddingRight: '40px' }, children: JSON.stringify(exception).replaceAll('{', '').replaceAll('}', '').split(`,"`).map((t, index) => (_jsxs("div", { style: { padding: '5px', borderBottom: '1px solid rgb(180,180,180)' }, children: ["\u261B", ' ' + (t.toLowerCase().includes('detail') ? (t.replaceAll(`"`, '').replaceAll(`:`, ': ').replaceAll(String.fromCharCode(92), '')) : (t.replaceAll(`"`, '').replaceAll(`:`, ': ')))] }, index))) }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(JSON.stringify(exception).replaceAll('{', '').replaceAll('}', '').replaceAll(',', '\n')), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.Details, children: [_jsxs(TabContextContainer, { children: [_jsxs(StyledAppVersionText, { "$color": TMColors.primary, children: [SDK_Globals.appModule, " ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.appVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.tertiary, children: ["SDKUI: ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkuiVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.success, children: ["SDK : ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkVersion })] })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] })] }) }), _jsx(TMLayoutItem, { height: '40px', children: _jsx(ExceptionToolbar, {}) })] }) }));
+    return (_jsx(Popup, { ref: popupRef, resizeEnabled: resizable, visible: isVisible, onHidden: () => { onClose?.(); setIsVisible(false); }, onShown: handleShown, showCloseButton: true, width: calcResponsiveSizes(deviceType, '600px', '400px', '350px'), height: '350px', minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', title: title, children: _jsxs(TMLayoutContainer, { children: [_jsx(TMLayoutItem, { height: 'calc(100% - 50px)', children: _jsxs(TMTabGroup, { validationItems: [], children: [_jsxs(TMTab, { label: SDKUI_Localizator.Error, children: [_jsxs(TabContextContainer, { style: { height: 'calc(100% - 68px )', paddingRight: '40px' }, children: [_jsxs("p", { children: [" ", _jsx("span", { style: { color: TMColors.primary }, children: "Messaggio: " }), " ", message] }), _jsx("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start', gap: '5px', marginTop: '5px' }, children: _jsxs("div", { children: [_jsxs("span", { style: { color: TMColors.primary }, children: [SDKUI_Localizator.Date, "  ", SDKUI_Localizator.Time.toLowerCase(), ": "] }), d.toString()] }) })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`Date: ${dateString}\nTime: ${timeString}\nMessage: ${message}`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.CompleteError, children: [_jsx(TabContextContainer, { style: { paddingRight: '40px' }, children: JSON.stringify(exception).replaceAll('{', '').replaceAll('}', '').split(`,"`).map((t, index) => (_jsxs("div", { style: { padding: '5px', borderBottom: '1px solid rgb(180,180,180)' }, children: ["\u261B", ' ' + (t.toLowerCase().includes('detail') ? (t.replaceAll(`"`, '').replaceAll(`:`, ': ').replaceAll(String.fromCharCode(92), '')) : (t.replaceAll(`"`, '').replaceAll(`:`, ': ')))] }, index))) }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(JSON.stringify(exception).replaceAll('{', '').replaceAll('}', '').replaceAll(',', '\n')), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] }), _jsxs(TMTab, { label: SDKUI_Localizator.Details, children: [_jsxs(TabContextContainer, { children: [_jsxs(StyledAppVersionText, { "$color": TMColors.primary, children: [SDK_Globals.appModule, " ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.appVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.tertiary, children: ["SDKUI: ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkuiVersion })] }), _jsxs(StyledAppVersionText, { "$color": TMColors.success, children: ["SDK : ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDK_Globals.sdkVersion })] })] }), _jsxs(StyledCopyInclipBoardButtonContainer, { children: [" ", _jsx(TMButton, { color: 'primaryOutline', onClick: () => copyToClipBoard(`-${SDK_Globals.appModule}: ${SDK_Globals.appVersion}\n` + `-SDKUI: ${SDK_Globals.sdkuiVersion}\n` + `-SDK: ${SDK_Globals.sdkVersion}\n`), btnStyle: 'toolbar', icon: _jsx(IconCopy, { fontSize: 18 }), caption: SDKUI_Localizator.CopyToClipboard }), " "] })] })] }) }), _jsx(TMLayoutItem, { height: '40px', children: _jsx(ExceptionToolbar, {}) })] }) }));
 };
 class TMExceptionBoxManager {
     static show({ title, exception, onClose }) {

package/lib/components/base/TMProgressBar.js

@@ -2,28 +2,28 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { getColor } from '../../helper';
 import { Colors } from '../../utils/theme';
-const StyledWrapper = styled.div `
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: center;
-    width: fit-content;
+const StyledWrapper = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    width: fit-content;
 `;
-const StyledProgressBarContainer = styled.div `
-    width: 200px;
-    background-color: white;
-    height: 12px;
-    border-radius: 5px;
-    border: 1px solid ${props => getColor(props.color)};
-    overflow: hidden;
+const StyledProgressBarContainer = styled.div `
+    width: 200px;
+    background-color: white;
+    height: 12px;
+    border-radius: 5px;
+    border: 1px solid ${props => getColor(props.color)};
+    overflow: hidden;
 `;
-const StyledProgressBar = styled.div.withConfig({ shouldForwardProp: prop => !['currentValue'].includes(prop) }) `
-    width: ${props => `${200 * props.currentValue}px`};
-    background: rgb(2,0,36);
-    background: linear-gradient(270deg, ${Colors.primary} 0%, ${Colors.primary} 35%, ${Colors.secondary});
-    height: 12px;
-    border-radius: 5px;
-    /* border: 1px solid ${props => getColor(props.color)}; */
+const StyledProgressBar = styled.div.withConfig({ shouldForwardProp: prop => !['currentValue'].includes(prop) }) `
+    width: ${props => `${200 * props.currentValue}px`};
+    background: rgb(2,0,36);
+    background: linear-gradient(270deg, ${Colors.primary} 0%, ${Colors.primary} 35%, ${Colors.secondary});
+    height: 12px;
+    border-radius: 5px;
+    /* border: 1px solid ${props => getColor(props.color)}; */
 `;
 const TMProgressBar = ({ currentValue = 0, color = 'primary', elementStyle, onAbort }) => {
     // console.log(currentValue)

package/lib/components/base/TMResizableMenu.js

@@ -65,34 +65,34 @@ export const TMResizableMenu = forwardRef(({ isVisible, onClose, top, left, bott
     return createPortal(menuContent, portalRoot);
 });
 export default TMResizableMenu;
-const MenuContainer = styled.div `
-  position: absolute;
-  display: ${({ $display }) => $display};
-  background-color: white;
-  border: 1px solid #ccc;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  overflow: auto;
-  max-width: ${({ $maxWidth }) => ($maxWidth ? `${$maxWidth}px` : 'none')};
-  max-height: ${({ $maxHeight }) => ($maxHeight ? `${$maxHeight}px` : 'none')};
-  border-radius: 6px;
-  padding: ${({ $padding }) => ($padding !== undefined ? `${$padding}px` : '16px')};
-  z-index: 1532;
-  min-width: ${({ $minWidth }) => `${$minWidth ?? 350}px`};
-  min-height: ${({ $minHeight }) => `${$minHeight ?? 500}px`};
+const MenuContainer = styled.div `
+  position: absolute;
+  display: ${({ $display }) => $display};
+  background-color: white;
+  border: 1px solid #ccc;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  overflow: auto;
+  max-width: ${({ $maxWidth }) => ($maxWidth ? `${$maxWidth}px` : 'none')};
+  max-height: ${({ $maxHeight }) => ($maxHeight ? `${$maxHeight}px` : 'none')};
+  border-radius: 6px;
+  padding: ${({ $padding }) => ($padding !== undefined ? `${$padding}px` : '16px')};
+  z-index: 1532;
+  min-width: ${({ $minWidth }) => `${$minWidth ?? 350}px`};
+  min-height: ${({ $minHeight }) => `${$minHeight ?? 500}px`};
 `;
-const ResizeHandle = styled.div `
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  right: 0;
-  bottom: 0;
-  cursor: se-resize;
-  background: linear-gradient(135deg, transparent 40%, #ccc 40%, #ccc 60%, transparent 60%);
+const ResizeHandle = styled.div `
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  right: 0;
+  bottom: 0;
+  cursor: se-resize;
+  background: linear-gradient(135deg, transparent 40%, #ccc 40%, #ccc 60%, transparent 60%);
 `;
-const ResizeOverlay = styled.div `
-  position: fixed;
-  inset: 0;
-  z-index: 1531;
-  pointer-events: all; 
-  cursor: se-resize;
+const ResizeOverlay = styled.div `
+  position: fixed;
+  inset: 0;
+  z-index: 1531;
+  pointer-events: all; 
+  cursor: se-resize;
 `;

package/lib/components/base/TMRightSidebar.js

@@ -36,45 +36,45 @@ const TMRightSidebar = ({ items = [], onItemClick, selectedItem, showPanel = fal
 };
 export default TMRightSidebar;
 // Styled Components
-const SidebarContainer = styled.div `
-  width: 30px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: #203e5a;
-  transition: width 0.3s ease;
-  border-bottom-right-radius: 10px;
+const SidebarContainer = styled.div `
+  width: 30px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #203e5a;
+  transition: width 0.3s ease;
+  border-bottom-right-radius: 10px;
 `;
-const StyledMenuItem = styled.div `
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 8px 0;
-  color: ${props => !props.$disabled ? (props.$isSelected ? props.$selectedColor ?? (TMColors.tertiary) : '#fff') : '#929292'};
-  cursor: ${props => props.$disabled ? 'default' : 'pointer'};
-  position: relative;
-  justify-content: center;
-  background-color: ${props => !props.$disabled ? (props.$isSelected ? '#2e2e2e' : 'transparent') : 'transparent'};
-  transition: background-color 0.3s ease, color 0.3s ease;
-
-  &:hover {
-    background-color: ${props => !props.$disabled && (TMColors.primaryColor)};
-  }
-
-  span {
-    position: absolute;
-    right: 40px;
-    white-space: nowrap;
-    overflow: hidden;
-    font-size: 14px;
-    opacity: ${({ $isHovered }) => ($isHovered ? 1 : 0)};
-    padding: 4px 8px;
-    background-color: #222;
-    border-radius: 4px;
-    color: #fff;
-    pointer-events: none;
-    transition: opacity 0.1s ease, transform 0.1s ease;
-    transform: ${({ $isHovered }) => ($isHovered ? 'translateX(0)' : 'translateX(20px)')};
-  }
+const StyledMenuItem = styled.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  color: ${props => !props.$disabled ? (props.$isSelected ? props.$selectedColor ?? (TMColors.tertiary) : '#fff') : '#929292'};
+  cursor: ${props => props.$disabled ? 'default' : 'pointer'};
+  position: relative;
+  justify-content: center;
+  background-color: ${props => !props.$disabled ? (props.$isSelected ? '#2e2e2e' : 'transparent') : 'transparent'};
+  transition: background-color 0.3s ease, color 0.3s ease;
+
+  &:hover {
+    background-color: ${props => !props.$disabled && (TMColors.primaryColor)};
+  }
+
+  span {
+    position: absolute;
+    right: 40px;
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 14px;
+    opacity: ${({ $isHovered }) => ($isHovered ? 1 : 0)};
+    padding: 4px 8px;
+    background-color: #222;
+    border-radius: 4px;
+    color: #fff;
+    pointer-events: none;
+    transition: opacity 0.1s ease, transform 0.1s ease;
+    transform: ${({ $isHovered }) => ($isHovered ? 'translateX(0)' : 'translateX(20px)')};
+  }
 `;