@topconsultnpm/sdkui-react 6.22.0-dev3.9 → 6.22.0-dev4.3

package/lib/components/base/TMPanel.js

@@ -3,100 +3,100 @@ import { useCallback, useRef, useState, forwardRef, useImperativeHandle } from '
 import styled, { css, keyframes } from 'styled-components';
 import { getAppModuleGradient, IconArrowLeft, IconClearButton, IconRefresh, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
-import { LoadIndicator } from 'devextreme-react/load-indicator';
+import { SpinnerGraphic } from './TMSpinner';
 import { TMExceptionBoxManager } from './TMPopUp';
 import { Gutters, TMColors } from '../../utils/theme';
-const StyledBackButton = styled.button `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    padding: 4px 10px;
-    border: 1px solid ${({ $isActive }) => $isActive ? 'rgba(37, 89, 165, 0.3)' : 'rgba(255, 255, 255, 0.4)'};
-    border-radius: 6px;
-    cursor: pointer;
-    font-weight: 500;
-    font-size: 0.85rem;
-    flex-shrink: 0;
-    transition: all 0.15s ease;
-    background-color: ${({ $isActive }) => $isActive ? '#FFFFFF' : '#2559A5'};
-    box-shadow: none;
-    
-    &&, && * {
-        color: ${({ $isActive }) => $isActive ? '#2559A5' : '#FFFFFF'} !important;
-    }
-    
-    svg {
-        font-size: 14px;
-    }
+const StyledBackButton = styled.button `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 4px 10px;
+    border: 1px solid ${({ $isActive }) => $isActive ? 'rgba(37, 89, 165, 0.3)' : 'rgba(255, 255, 255, 0.4)'};
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 0.85rem;
+    flex-shrink: 0;
+    transition: all 0.15s ease;
+    background-color: ${({ $isActive }) => $isActive ? '#FFFFFF' : '#2559A5'};
+    box-shadow: none;
+    
+    &&, && * {
+        color: ${({ $isActive }) => $isActive ? '#2559A5' : '#FFFFFF'} !important;
+    }
+    
+    svg {
+        font-size: 14px;
+    }
 `;
 import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
-const StyledPanelContainer = styled.div `
-    width: 100%;
-    height: 100%;
-    font-size: 1rem;
-    box-shadow: 3px 3px 5px #D3D3D3BF;
-    border-radius: 10px;
-    opacity: 1;
-    background: #FFFFFF;
-    min-height: 0; 
-    overflow: hidden;
-    position: ${({ $isMaximized }) => $isMaximized ? 'fixed' : 'relative'};
-    top: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
-    left: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
-    width: ${({ $isMaximized }) => $isMaximized ? `calc(100vw - 50px - (${Gutters.getGutters()}px * 2))` : '100%'};
-    height: ${({ $isMaximized }) => $isMaximized ? `calc(100vh - 50px - (${Gutters.getGutters()}px * 2))` : '100%'};
-    z-index: ${({ $isMaximized }) => $isMaximized ? 2000 : 'auto'};
-    margin: ${({ $isMaximized }) => $isMaximized ? `${Gutters.getGutters()}px` : '0'};
-    outline: none;
-    /* transition: all 0.2s; */
+const StyledPanelContainer = styled.div `
+    width: 100%;
+    height: 100%;
+    font-size: 1rem;
+    box-shadow: 3px 3px 5px #D3D3D3BF;
+    border-radius: 10px;
+    opacity: 1;
+    background: #FFFFFF;
+    min-height: 0; 
+    overflow: hidden;
+    position: ${({ $isMaximized }) => $isMaximized ? 'fixed' : 'relative'};
+    top: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
+    left: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
+    width: ${({ $isMaximized }) => $isMaximized ? `calc(100vw - 50px - (${Gutters.getGutters()}px * 2))` : '100%'};
+    height: ${({ $isMaximized }) => $isMaximized ? `calc(100vh - 50px - (${Gutters.getGutters()}px * 2))` : '100%'};
+    z-index: ${({ $isMaximized }) => $isMaximized ? 2000 : 'auto'};
+    margin: ${({ $isMaximized }) => $isMaximized ? `${Gutters.getGutters()}px` : '0'};
+    outline: none;
+    /* transition: all 0.2s; */
 `;
-const StyledPanelHeader = styled.div `
-    width:100% ;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 4px 10px;
+const StyledPanelHeader = styled.div `
+    width:100% ;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 4px 10px;
     background: ${({ $isActive, $backgroundColor, $activeGradient }) => $isActive
     ? ($activeGradient ??
         'linear-gradient(270deg, #46B5A2 16%, #3BAABC 34%, #3BAABC 34%, #3681AD 54%, #3368A5 72%, #2F549D 88%, #304F99 100%)')
-    : ($backgroundColor ?? '#F4F4F4')};
-    box-shadow: 3px 3px 5px #D3D3D3BF;
-    color: ${({ $isActive, $color }) => $isActive ? '#FFFFFF' : ($color ?? '#2559A5')};
-    border-top-right-radius: 10px;
-    border-top-left-radius: 10px;
-    height: 40px;
-    font-weight: 600;
-    outline: none;
-    &:focus {
-        outline: none;
-    }
-    // Ensure all children inherit the header color
-    &,
-    * {
-        color: ${({ $isActive, $color }) => $isActive ? '#FFFFFF' : ($color ?? '#2559A5')} !important;
-    }
+    : ($backgroundColor ?? '#F4F4F4')};
+    box-shadow: 3px 3px 5px #D3D3D3BF;
+    color: ${({ $isActive, $color }) => $isActive ? '#FFFFFF' : ($color ?? '#2559A5')};
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
+    height: 40px;
+    font-weight: 600;
+    outline: none;
+    &:focus {
+        outline: none;
+    }
+    // Ensure all children inherit the header color
+    &,
+    * {
+        color: ${({ $isActive, $color }) => $isActive ? '#FFFFFF' : ($color ?? '#2559A5')} !important;
+    }
 `;
-const StyledPanelContent = styled.div `
-    width: 100%;
-    height: ${props => props.$height};
-    min-height: 0; 
-    overflow: hidden;
-    border-bottom-right-radius: 10px;
-    border-bottom-left-radius: 10px;
-    padding: ${props => props.$padding};
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-    user-select: none;
-    -webkit-touch-callout: none;
-  -webkit-user-select: none;
-    outline: none;
-    &:focus {
-        outline: none;
-    }
+const StyledPanelContent = styled.div `
+    width: 100%;
+    height: ${props => props.$height};
+    min-height: 0; 
+    overflow: hidden;
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    padding: ${props => props.$padding};
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    user-select: none;
+    -webkit-touch-callout: none;
+  -webkit-user-select: none;
+    outline: none;
+    &:focus {
+        outline: none;
+    }
 `;
 // Allineata al TABLET_BREAKPOINT (768) di TMDeviceProvider
 const MOBILE_MEDIA_QUERY = '(max-width: 767.98px)';
@@ -105,102 +105,102 @@ const MOBILE_MEDIA_QUERY = '(max-width: 767.98px)';
 // la track (larga quanto il viewport) va a +100% della PROPRIA larghezza, il testo a -100%
 // della SUA. Le due animazioni hanno stessa durata ed easing, quindi lo scostamento netto
 // in ogni istante è esattamente e(t) * (viewport - testo).
-const panelTitleTrackMarquee = keyframes `
-    0%, 15% { transform: translateX(0); }
-    45%, 55% { transform: translateX(100%); }
-    85%, 100% { transform: translateX(0); }
+const panelTitleTrackMarquee = keyframes `
+    0%, 15% { transform: translateX(0); }
+    45%, 55% { transform: translateX(100%); }
+    85%, 100% { transform: translateX(0); }
 `;
-const panelTitleTextMarquee = keyframes `
-    0%, 15% { transform: translateX(0); }
-    45%, 55% { transform: translateX(-100%); }
-    85%, 100% { transform: translateX(0); }
+const panelTitleTextMarquee = keyframes `
+    0%, 15% { transform: translateX(0); }
+    45%, 55% { transform: translateX(-100%); }
+    85%, 100% { transform: translateX(0); }
 `;
 // Ritaglia il testo in eccesso: è l'unico box con overflow hidden, la track ci scorre dentro
-const StyledPanelTitleViewport = styled.div `
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    min-width: 0;
-    overflow: hidden;
-    padding: 0 8px;
+const StyledPanelTitleViewport = styled.div `
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0 8px;
 `;
 // Larga quanto il viewport: è il metro con cui il -100% del testo viene compensato.
-const StyledPanelTitleTrack = styled.div `
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    align-items: center;
-
-    ${({ $marquee }) => $marquee && css `
-        @media ${MOBILE_MEDIA_QUERY} {
-            animation: ${panelTitleTrackMarquee} 10s ease-in-out infinite;
-
-            @media (prefers-reduced-motion: reduce) {
-                animation: none;
-            }
-        }
-    `}
+const StyledPanelTitleTrack = styled.div `
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+
+    ${({ $marquee }) => $marquee && css `
+        @media ${MOBILE_MEDIA_QUERY} {
+            animation: ${panelTitleTrackMarquee} 10s ease-in-out infinite;
+
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+            }
+        }
+    `}
 `;
 // Senza $marquee resta il troncamento con i puntini di sempre
-const StyledPanelTitle = styled.div `
-    margin: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    ${({ $marquee }) => $marquee && css `
-        @media ${MOBILE_MEDIA_QUERY} {
-            flex: 0 0 auto;
-            width: max-content;
-            min-width: 100%;
-            max-width: none;
-            overflow: visible;
-            text-overflow: clip;
-            animation: ${panelTitleTextMarquee} 10s ease-in-out infinite;
-
-            @media (prefers-reduced-motion: reduce) {
-                animation: none;
-                width: auto;
-                min-width: 0;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-        }
-    `}
+const StyledPanelTitle = styled.div `
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    ${({ $marquee }) => $marquee && css `
+        @media ${MOBILE_MEDIA_QUERY} {
+            flex: 0 0 auto;
+            width: max-content;
+            min-width: 100%;
+            max-width: none;
+            overflow: visible;
+            text-overflow: clip;
+            animation: ${panelTitleTextMarquee} 10s ease-in-out infinite;
+
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+                width: auto;
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    `}
 `;
-const refreshSpin = keyframes `
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
+const refreshSpin = keyframes `
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
 `;
 // Fa girare l'icona per tutta la durata del ricaricamento
-const StyledRefreshIcon = styled.span `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    ${({ $isSpinning }) => $isSpinning && css `
-        animation: ${refreshSpin} 1s linear infinite;
-
-        @media (prefers-reduced-motion: reduce) {
-            animation: none;
-        }
-    `}
+const StyledRefreshIcon = styled.span `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    ${({ $isSpinning }) => $isSpinning && css `
+        animation: ${refreshSpin} 1s linear infinite;
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+        }
+    `}
 `;
 // Copre il solo contenuto del pannello (StyledPanelContent è position: relative con overflow hidden)
-const StyledPanelLoaderOverlay = styled.div `
-    position: absolute;
-    inset: 0;
-    z-index: 10;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    background: rgba(255, 255, 255, 0.65);
-    border-bottom-right-radius: 10px;
-    border-bottom-left-radius: 10px;
-    color: ${TMColors.primaryColor};
+const StyledPanelLoaderOverlay = styled.div `
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background: rgba(255, 255, 255, 0.65);
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    color: ${TMColors.primaryColor};
 `;
 /**
  * TMPanel - Pannello con supporto Controlled/Uncontrolled
@@ -295,7 +295,10 @@ onRefresh, isRefreshing, onActivate, onBack, backCaption = SDKUI_Localizator.Bac
     return (_jsxs(StyledPanelContainer, { ref: panelRef, $isMaximized: onMaximize ? false : isMaximized, style: {
             visibility: isVisible ? 'visible' : 'hidden',
         }, tabIndex: -1, onFocus: !isControlled ? handleFocusUncontrolled : undefined, onBlur: !isControlled ? handleBlurUncontrolled : undefined, onClick: handleActivation, onContextMenu: (e) => e.preventDefault(), children: [showHeader &&
-                _jsx(StyledPanelHeader, { $backgroundColor: backgroundColor, $color: color, $isActive: currentIsActive, onDoubleClick: () => {
+                _jsx(StyledPanelHeader, { $backgroundColor: backgroundColor, $color: color, $isActive: currentIsActive, onDoubleClick: (e) => {
+                        // Ignora il doppio click sui controlli dell'header
+                        if (e.target.closest('button, a, input, select, textarea, [role="button"]'))
+                            return;
                         if (onHeaderDoubleClick)
                             onHeaderDoubleClick();
                         else
@@ -326,6 +329,6 @@ onRefresh, isRefreshing, onActivate, onBack, backCaption = SDKUI_Localizator.Bac
                                 }, children: [toolbar, onRefresh && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Refresh, disabled: isBusy, icon: _jsx(StyledRefreshIcon, { $isSpinning: isBusy, children: _jsx(IconRefresh, {}) }), btnStyle: 'icon', onClick: handleRefresh }), allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
                                             ? _jsx(IconWindowMinimize, { fontSize: 16 })
                                             : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsxs(StyledPanelContent, { $height: showHeader ? "calc(100% - 40px)" : "100%", $padding: padding, $backgroundColor: backgroundColorContainer ?? `#FFFFFF`, children: [children, isBusy &&
-                        _jsxs(StyledPanelLoaderOverlay, { children: [_jsx(LoadIndicator, { height: 40, width: 40 }), _jsx("div", { children: SDKUI_Localizator.Loading })] })] })] }));
+                        _jsxs(StyledPanelLoaderOverlay, { children: [_jsx(SpinnerGraphic, {}), _jsx("div", { children: SDKUI_Localizator.Loading })] })] })] }));
 });
 export default TMPanel;

package/lib/components/base/TMSpinner.d.ts

@@ -8,10 +8,11 @@ interface ITMSpinner {
     onCancel?: () => void;
     cancelText?: string;
 }
+declare const SpinnerGraphic: () => React.JSX.Element;
 declare const Spinner: ({ backgroundColor, description, fontSize, width, flat, onCancel, cancelText }: ITMSpinner) => React.JSX.Element;
 declare class TMSpinner {
     static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText }?: ITMSpinner): void;
     static hide(): void;
 }
-export { Spinner };
+export { Spinner, SpinnerGraphic };
 export default TMSpinner;

package/lib/components/base/TMSpinner.js

@@ -157,13 +157,15 @@ const StyledCancelButton = styled.button `
         transform: scale(0.98);
     }
 `;
+// Grafica dello spinner (logo + 8 pallini animati), riusabile anche nei loader inline
+const SpinnerGraphic = () => (_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-54%, -54%)'
+            }, src: six, width: 35, alt: "" }), _jsxs(StyledSpinnerAnimation, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }));
 const Spinner = ({ backgroundColor = 'transparent', description = '', fontSize = FontSize.defaultFontSize, width = 'fit-content', flat = false, onCancel, cancelText = 'Annulla' }) => {
-    return (_jsx(StyledSpinnerContainer, { $backgroundColor: backgroundColor, children: _jsxs(StyledSpinnerWrapper, { $width: width, $flat: flat, $hasCancel: !!onCancel, children: [_jsxs("div", { style: { position: 'relative', width: '80px', height: '80px' }, children: [_jsx("img", { style: {
-                                position: 'absolute',
-                                top: '50%',
-                                left: '50%',
-                                transform: 'translate(-54%, -54%)'
-                            }, src: six, width: 35, alt: "" }), _jsxs(StyledSpinnerAnimation, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })] }), _jsx(StyledSpinnerDescription, { $fontSize: fontSize, children: description }), onCancel && (_jsx(StyledCancelButton, { onClick: onCancel, children: cancelText }))] }) }));
+    return (_jsx(StyledSpinnerContainer, { $backgroundColor: backgroundColor, children: _jsxs(StyledSpinnerWrapper, { $width: width, $flat: flat, $hasCancel: !!onCancel, children: [_jsx(SpinnerGraphic, {}), _jsx(StyledSpinnerDescription, { $fontSize: fontSize, children: description }), onCancel && (_jsx(StyledCancelButton, { onClick: onCancel, children: cancelText }))] }) }));
 };
 class TMSpinner {
     static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText } = {
@@ -183,5 +185,5 @@ class TMSpinner {
         container?.remove();
     }
 }
-export { Spinner };
+export { Spinner, SpinnerGraphic };
 export default TMSpinner;

package/lib/components/base/TMTabControl.d.ts

@@ -21,6 +21,8 @@ export interface TMTabPanelProps {
     closable?: boolean;
     /** Se false disabilita la rinomina su questo tab. Default true. */
     renamable?: boolean;
+    /** Se false il tab non si trascina e non accetta il rilascio di altri: resta al suo posto. Default true. */
+    movable?: boolean;
     children?: React.ReactNode;
 }
 /** Contenitore dichiarativo di un tab: figlio diretto di TMTabControl, non renderizza nulla di suo. */
@@ -70,6 +72,9 @@ export interface TMTabControlProps {
     contentStyle?: React.CSSProperties;
     /** Stile del contenitore esterno. */
     style?: React.CSSProperties;
+    /** Contenuto del chiamante in coda alla barra, a destra dei tab: es. i pulsanti di azione della pagina.
+        Fa parte della barra, quindi con hideBarWhenSingle e un solo tab non viene mostrato. */
+    toolbar?: React.ReactNode;
     children: React.ReactNode;
 }
 declare const TMTabControl: React.FC<TMTabControlProps>;

package/lib/components/base/TMTabControl.js

@@ -18,10 +18,11 @@ import { getAppModuleButtonColors, getAppModuleGradient, IconAdd, IconCloseOutli
 //   I tab non attivi restano sempre montati e solo spostati fuori schermo: nulla si ricarica ne perde stato.
 //   onTabClose        -> mostra la 'x' sui tab e la voce Chiudi nel menu contestuale.
 //   onTabRename       -> doppio clic (o voce Rinomina) per modificare il titolo in linea.
-//   onTabReorder      -> tab spostabili con il trascinamento.
+//   onTabReorder      -> tab spostabili con il trascinamento; il singolo tab si blocca con movable={false}.
 //   tabMenuItems      -> voci del chiamante nel menu del tasto destro sul tab, prima di Rinomina e Chiudi.
 //   contentAnimation  -> effetto del contenuto al cambio tab: 'fade' (default), 'slide', 'zoom' o 'none'.
 //   swipeEnabled      -> su touch si cambia tab trascinando il contenuto di lato.
+//   toolbar           -> contenuto del chiamante in coda alla barra, a destra dei tab (azioni di pagina).
 //
 // Da tastiera, con il focus sulla barra: frecce destra/giu al tab successivo, sinistra/su al precedente,
 // Home ed End al primo e all'ultimo. I tab disabilitati vengono saltati.
@@ -90,7 +91,7 @@ const VARIANTS = {
         joins: false
     })
 };
-/** Contenitore della barra: frecce ai lati e striscia dei tab in mezzo. */
+/** Contenitore della barra: frecce ai lati, striscia dei tab in mezzo ed eventuale toolbar in coda. */
 const TabsHeader = styled.div `
     display: flex;
     align-items: flex-end;
@@ -152,6 +153,16 @@ const AddButton = styled.button `
     &:active { background: ${({ $v }) => $v.buttonActive}; }
     &:focus, &:focus-visible { outline: none; }
 `;
+/** Contenuto libero del chiamante in coda alla barra: azioni di pagina allineate a destra dei tab.
+    E' position: relative cosi un menu a tendina del chiamante puo posizionarsi rispetto a quest'area. */
+const TabsToolbar = styled.div `
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-bottom: 3px;
+    padding-left: 8px;
+    position: relative;
+`;
 /** Area del contenuto: fa da riferimento ai pannelli nascosti, che restano montati ma non impaginati. */
 const ContentArea = styled.div `
     position: relative;
@@ -341,7 +352,7 @@ const shortenLabel = (label) => {
 /** Contenitore dichiarativo di un tab: figlio diretto di TMTabControl, non renderizza nulla di suo. */
 export const TMTabPanel = ({ children }) => _jsx(_Fragment, { children: children });
 const TMTabControl = (props) => {
-    const { selectedId, defaultSelectedId, onSelectedIdChange, hideBarWhenSingle = false, onTabClose, closableWhenSingle = false, onTabRename, onTabReorder, onTabAdd, tabMenuItems, addCaption = SDKUI_Localizator.AddTab, renameCaption = SDKUI_Localizator.Rename, closeCaption = SDKUI_Localizator.Close, closeOtherCaption = SDKUI_Localizator.CloseOtherTabs, variant = 'module', textColor, idleTextColor, contentAnimation = 'none', animationDuration = 300, swipeEnabled = true, contentStyle, style, children } = props;
+    const { selectedId, defaultSelectedId, onSelectedIdChange, hideBarWhenSingle = false, onTabClose, closableWhenSingle = false, onTabRename, onTabReorder, onTabAdd, tabMenuItems, addCaption = SDKUI_Localizator.AddTab, renameCaption = SDKUI_Localizator.Rename, closeCaption = SDKUI_Localizator.Close, closeOtherCaption = SDKUI_Localizator.CloseOtherTabs, variant = 'module', textColor, idleTextColor, contentAnimation = 'none', animationDuration = 300, swipeEnabled = true, contentStyle, style, toolbar, children } = props;
     const v = useMemo(() => VARIANTS[variant](), [variant]);
     const titleColor = textColor ?? v.textColor;
     const titleIdleColor = idleTextColor ?? v.idleTextColor;
@@ -578,11 +589,11 @@ const TMTabControl = (props) => {
                                         tabIndex: isActive ? 0 : -1, 
                                         // Con il titolo accorciato il nome per esteso lo mostra gia il tooltip
                                         title: canRename && !shortLabel ? 'Doppio clic per rinominare' : undefined, $active: isActive, $textColor: titleColor, $idleColor: titleIdleColor, disabled: p.props.disabled, onClick: () => handleSelect(p.props.id), onDoubleClick: () => canRename && setEditingId(p.props.id), children: [shortLabel ?? p.props.label, (p.props.badge ?? 0) > 0 && _jsx(TabBadge, { $color: p.props.badgeColor ?? '#E53935', children: p.props.badge })] }));
-                                    return (_jsxs(React.Fragment, { children: [showSeparator && _jsx(TabSeparator, { $v: v }), _jsxs(TabItem, { "data-tab-id": p.props.id, $v: v, $active: isActive, $dragging: dragId === p.props.id, draggable: !!onTabReorder && editingId !== p.props.id, 
+                                    return (_jsxs(React.Fragment, { children: [showSeparator && _jsx(TabSeparator, { $v: v }), _jsxs(TabItem, { "data-tab-id": p.props.id, $v: v, $active: isActive, $dragging: dragId === p.props.id, draggable: !!onTabReorder && p.props.movable !== false && editingId !== p.props.id, 
                                                 // Tipo MIME privato invece di 'text/plain': il tab non e rilasciabile fuori dalla barra
                                                 // (barra indirizzi, campi di ricerca, altre applicazioni) scrivendoci dentro il suo id
-                                                onDragStart: (e) => { setDragId(p.props.id); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData(TAB_DRAG_MIME, p.props.id); }, onDragOver: (e) => { if (!dragId || dragId === p.props.id)
-                                                    return; e.preventDefault(); e.dataTransfer.dropEffect = 'move'; setDropId(p.props.id); }, onDragLeave: () => setDropId(prev => prev === p.props.id ? undefined : prev), onDrop: (e) => { e.preventDefault(); if (dragId && dragId !== p.props.id)
+                                                onDragStart: (e) => { setDragId(p.props.id); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData(TAB_DRAG_MIME, p.props.id); }, onDragOver: (e) => { if (!dragId || dragId === p.props.id || p.props.movable === false)
+                                                    return; e.preventDefault(); e.dataTransfer.dropEffect = 'move'; setDropId(p.props.id); }, onDragLeave: () => setDropId(prev => prev === p.props.id ? undefined : prev), onDrop: (e) => { e.preventDefault(); if (dragId && dragId !== p.props.id && p.props.movable !== false)
                                                     onTabReorder?.(dragId, p.props.id); setDragId(undefined); setDropId(undefined); }, onDragEnd: () => { setDragId(undefined); setDropId(undefined); }, onContextMenu: (e) => openMenu(e, p.props.id), children: [editingId === p.props.id
                                                         // In rinomina: Invio conferma, Esc annulla, uscendo dal campo si conferma
                                                         ? _jsx(RenameInput, { autoFocus: true, defaultValue: String(p.props.label), onFocus: (e) => e.currentTarget.select(), onBlur: (e) => commitRename(p.props.id, e.currentTarget.value), onKeyDown: (e) => {
@@ -595,7 +606,7 @@ const TMTabControl = (props) => {
                                                             // width: auto annulla il max-content del tooltip, che impedirebbe al titolo di restringersi
                                                             ? _jsx(TMTooltip, { content: labelText, parentStyle: { display: 'flex', minWidth: 0 }, childStyle: { width: 'auto', minWidth: 0 }, children: tabButton })
                                                             : tabButton, canClose && _jsx(CloseButton, { $color: isActive ? v.textColor : v.idleTextColor, type: 'button', tabIndex: isActive ? 0 : -1, title: closeCaption, onClick: () => onTabClose?.(p.props.id), children: "\u00D7" }), isDropTarget && _jsx(DropMark, { $side: draggedIndex > index ? 'left' : 'right' })] })] }, p.props.id));
-                                }), onTabAdd && _jsx(AddButton, { $v: v, type: 'button', title: addCaption, onClick: onTabAdd, children: _jsx(IconAdd, { fontSize: 18 }) })] }), arrows.right && _jsx(NavButton, { $v: v, type: 'button', tabIndex: -1, onClick: () => scrollTabs(1), children: _jsx(IconRight, { fontSize: 18 }) })] }), menu.visible && menuItems.length > 0 &&
+                                }), onTabAdd && _jsx(AddButton, { $v: v, type: 'button', title: addCaption, onClick: onTabAdd, children: _jsx(IconAdd, { fontSize: 18 }) })] }), arrows.right && _jsx(NavButton, { $v: v, type: 'button', tabIndex: -1, onClick: () => scrollTabs(1), children: _jsx(IconRight, { fontSize: 18 }) }), toolbar && _jsx(TabsToolbar, { children: toolbar })] }), menu.visible && menuItems.length > 0 &&
                 _jsx(TMContextMenu, { items: menuItems, externalControl: { visible: menu.visible, position: menu.position, onClose: closeMenu } }), _jsx(ContentArea, { onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, children: mountedPanels.map(p => {
                     const isActive = p.props.id === activeId;
                     return (_jsx(ContentPane, { role: 'tabpanel', "aria-hidden": !isActive, $active: isActive, $anim: animation, $duration: animationDuration, $phase: animPhase, 

package/lib/components/base/TMTreeView.js

@@ -4,6 +4,17 @@ import { List } from 'react-window';
 import styled from 'styled-components';
 import { IconArrowLeft, IconArrowRight, IconChevronDown, IconChevronRight, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
+// Campi in cui frecce, +, - e spazio servono alla digitazione (checkbox e bottoni esclusi)
+const NON_TEXT_INPUT_TYPES = new Set(['checkbox', 'radio', 'button', 'submit', 'reset', 'image', 'file', 'color', 'range']);
+const isEditableElement = (el) => {
+    if (el.isContentEditable)
+        return true;
+    if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)
+        return true;
+    if (el instanceof HTMLInputElement)
+        return !NON_TEXT_INPUT_TYPES.has(el.type);
+    return false;
+};
 // Componente riga virtualizzata memoizzato
 const VirtualRowComponent = memo(({ ariaAttributes, index, style, flattenedItems, focusedItemKey, selectedItemKeys, allowMultipleSelection, hasVisibleItems, handleNodeToggle, handleNodeClick, handleCheckboxChange, hasPartialChildSelection, itemRender, onItemContextMenu }) => {
     const item = flattenedItems[index];
@@ -184,6 +195,9 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         const handleKeyDown = (event) => {
             if (!focusedItem)
                 return;
+            // Non rubare i tasti ai campi editabili (es. input di un pannello sovrapposto)
+            if (event.target instanceof HTMLElement && isEditableElement(event.target))
+                return;
             let newFocusedItem = null;
             let handled = false;
             switch (event.key) {
@@ -459,6 +473,12 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
         return selectedCount > 0 && selectedCount < childKeys.length;
     }, [flattenTree]);
     const hasVisibleItems = useCallback((node) => {
+        // Nodo già caricato: conta i figli visibili (isExpandible è solo una stima a priori)
+        if (node.isLoaded) {
+            if (!node.items)
+                return false;
+            return node.items.filter(o => !o.hidden).length > 0;
+        }
         // If node has explicit isExpandible value, use that
         if (node.isExpandible !== undefined) {
             return node.isExpandible;

package/lib/components/base/TMWaitPanel.js

@@ -34,7 +34,7 @@ const StyledTitle = styled.h2 ` margin: 0; font-size: 1.5em; color: #333; `;
 const StyledProgressBarContainer = styled.div ` width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; margin: 20px 0; `;
 const StyledProgressBar = styled.div ` height: 100%; background: #4caf50; transition: width 0.3s ease; `;
 const StyledProgressText = styled.p ` font-weight: bold; color: #333; margin: 0; `;
-const StyledMessage = styled.p ` color: #666; font-size: 0.9em; margin-top: 10px; `;
+const StyledMessage = styled.p ` color: #666; font-size: 0.9em; margin-top: 10px; white-space: pre-line; `;
 const StyledAbortButton = styled.button ` background: #ff4d4d; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 1em; cursor: pointer; margin-top: 20px; &:hover { background: #ff6666; } `;
 export const TMWaitPanel = (props) => {
     const { title, showPrimary, textPrimary, valuePrimary, maxValuePrimary, showSecondary, textSecondary, valueSecondary, maxValueSecondary, isCancelable, abortController, onAbortClick, useHighZIndex } = props;

package/lib/components/base/waitPanel/TMWaitPanelConfirm.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ITMWaitPanelConfirmProps {
+    /** Deve stare sopra l'overlay del pannello: il manager passa il suo z-index + 1. */
+    zIndex?: number;
+    /** Conferma: l'operazione va interrotta. */
+    onYes?: () => void;
+    /** Annulla: l'operazione riprende. Usata anche dalla X. */
+    onNo?: () => void;
+}
+/** Il ref punta all'overlay, che il manager mostra e nasconde via `style.display`. */
+declare const TMWaitPanelConfirm: React.ForwardRefExoticComponent<ITMWaitPanelConfirmProps & React.RefAttributes<HTMLDivElement>>;
+export default TMWaitPanelConfirm;