@topconsultnpm/sdkui-react 6.22.0-dev3.8 → 6.22.0-dev4.10

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,97 +91,107 @@ const VARIANTS = {
         joins: false
     })
 };
-/** Contenitore della barra: frecce ai lati e striscia dei tab in mezzo. */
-const TabsHeader = styled.div `
-    display: flex;
-    align-items: flex-end;
-    width: 100%;
-    flex-shrink: 0;
-    padding: 4px 4px 0 4px;
-    background: ${({ $v }) => $v.stripBg};
+/** 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;
+    width: 100%;
+    flex-shrink: 0;
+    padding: 4px 4px 0 4px;
+    background: ${({ $v }) => $v.stripBg};
 `;
 /** Striscia scorrevole dei tab: la scrollbar resta nascosta, si scorre con le frecce. */
-const TabsStrip = styled.div `
-    display: flex;
-    align-items: flex-end;
-    flex: 1;
-    min-width: 0;
-    gap: ${({ $v }) => $v.tabGap};
-    padding: ${({ $v }) => $v.stripPadding};
-    overflow-x: auto;
-    scroll-behavior: smooth;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    &::-webkit-scrollbar { display: none; }
+const TabsStrip = styled.div `
+    display: flex;
+    align-items: flex-end;
+    flex: 1;
+    min-width: 0;
+    gap: ${({ $v }) => $v.tabGap};
+    padding: ${({ $v }) => $v.stripPadding};
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar { display: none; }
 `;
 /** Freccia di scorrimento: compare solo se i tab non entrano nella barra. */
-const NavButton = styled.button `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    height: 28px;
-    margin-bottom: 3px;
-    flex-shrink: 0;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background: transparent;
-    color: ${({ $v }) => $v.idleTextColor};
-    cursor: pointer;
-    transition: background 0.18s ease-out, color 0.18s ease-out;
-    &:hover { background: ${({ $v }) => $v.buttonHover}; color: ${TEXT_ACTIVE}; }
-    &:focus, &:focus-visible { outline: none; }
+const NavButton = styled.button `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 28px;
+    margin-bottom: 3px;
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: ${({ $v }) => $v.idleTextColor};
+    cursor: pointer;
+    transition: background 0.18s ease-out, color 0.18s ease-out;
+    &:hover { background: ${({ $v }) => $v.buttonHover}; color: ${TEXT_ACTIVE}; }
+    &:focus, &:focus-visible { outline: none; }
 `;
 /** Pulsante '+' subito dopo l'ultimo tab, come il nuovo tab del browser. */
-const AddButton = styled.button `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    margin: 0 0 3px 4px;
-    flex-shrink: 0;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    background: transparent;
-    color: ${({ $v }) => $v.idleTextColor};
-    cursor: pointer;
-    transition: background 0.18s ease-out, color 0.18s ease-out;
-    &:hover { background: ${({ $v }) => $v.buttonHover}; color: ${TEXT_ACTIVE}; }
-    &:active { background: ${({ $v }) => $v.buttonActive}; }
-    &:focus, &:focus-visible { outline: none; }
+const AddButton = styled.button `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    margin: 0 0 3px 4px;
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: ${({ $v }) => $v.idleTextColor};
+    cursor: pointer;
+    transition: background 0.18s ease-out, color 0.18s ease-out;
+    &:hover { background: ${({ $v }) => $v.buttonHover}; color: ${TEXT_ACTIVE}; }
+    &: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;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
+const ContentArea = styled.div `
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
 `;
-const ANIM_FADE = keyframes `
-    from { opacity: 0; transform: translate3d(0, 10px, 0); }
-    50% { opacity: 1; }
-    to { opacity: 1; transform: translate3d(0, 0, 0); }
+const ANIM_FADE = keyframes `
+    from { opacity: 0; transform: translate3d(0, 10px, 0); }
+    50% { opacity: 1; }
+    to { opacity: 1; transform: translate3d(0, 0, 0); }
 `;
 // Entra appena piu piccolo e leggermente piu in basso: sembra posarsi al suo posto invece di comparire
-const ANIM_ZOOM = keyframes `
-    from { opacity: 0; transform: translate3d(0, 6px, 0) scale3d(0.985, 0.985, 1); }
-    50% { opacity: 1; }
-    to { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
+const ANIM_ZOOM = keyframes `
+    from { opacity: 0; transform: translate3d(0, 6px, 0) scale3d(0.985, 0.985, 1); }
+    50% { opacity: 1; }
+    to { opacity: 1; transform: translate3d(0, 0, 0) scale3d(1, 1, 1); }
 `;
 // Lo scorrimento segue il verso dello spostamento: da destra andando avanti, da sinistra tornando indietro
-const ANIM_SLIDE_FORWARD = keyframes `
-    from { opacity: 0; transform: translate3d(24px, 0, 0); }
-    50% { opacity: 1; }
-    to { opacity: 1; transform: translate3d(0, 0, 0); }
+const ANIM_SLIDE_FORWARD = keyframes `
+    from { opacity: 0; transform: translate3d(24px, 0, 0); }
+    50% { opacity: 1; }
+    to { opacity: 1; transform: translate3d(0, 0, 0); }
 `;
-const ANIM_SLIDE_BACK = keyframes `
-    from { opacity: 0; transform: translate3d(-24px, 0, 0); }
-    50% { opacity: 1; }
-    to { opacity: 1; transform: translate3d(0, 0, 0); }
+const ANIM_SLIDE_BACK = keyframes `
+    from { opacity: 0; transform: translate3d(-24px, 0, 0); }
+    50% { opacity: 1; }
+    to { opacity: 1; transform: translate3d(0, 0, 0); }
 `;
 const pickAnimation = (animation, forward) => {
     switch (animation) {
@@ -191,141 +202,141 @@ const pickAnimation = (animation, forward) => {
     }
 };
 /** Contenitore di un singolo tab: l'animazione parte da sola perche il pannello inattivo non ne ha nessuna. */
-const ContentPane = styled.div `
-    ${({ $active, $anim, $duration, $phase }) => $active && $anim && $phase !== 'done' && css `
-        /* Livello grafico dedicato creato subito, mentre il pannello e ancora trasparente: quando il
-           movimento parte non resta nulla da ridisegnare e l'effetto scorre senza perdere fotogrammi */
-        will-change: opacity, transform;
-        backface-visibility: hidden;
-        transform: translateZ(0);
-        opacity: 0;
-
-        /* Decelerazione lunga e continua: parte deciso e si posa, senza strappi ne rimbalzi */
-        ${$phase === 'run' && css `animation: ${$anim} ${$duration}ms cubic-bezier(0.32, 0.72, 0, 1) both;`}
-
-        /* Chi ha chiesto meno animazioni nel sistema vede il cambio tab immediato */
-        @media (prefers-reduced-motion: reduce) { animation: none; opacity: 1; transform: none; }
-    `}
+const ContentPane = styled.div `
+    ${({ $active, $anim, $duration, $phase }) => $active && $anim && $phase !== 'done' && css `
+        /* Livello grafico dedicato creato subito, mentre il pannello e ancora trasparente: quando il
+           movimento parte non resta nulla da ridisegnare e l'effetto scorre senza perdere fotogrammi */
+        will-change: opacity, transform;
+        backface-visibility: hidden;
+        transform: translateZ(0);
+        opacity: 0;
+
+        /* Decelerazione lunga e continua: parte deciso e si posa, senza strappi ne rimbalzi */
+        ${$phase === 'run' && css `animation: ${$anim} ${$duration}ms cubic-bezier(0.32, 0.72, 0, 1) both;`}
+
+        /* Chi ha chiesto meno animazioni nel sistema vede il cambio tab immediato */
+        @media (prefers-reduced-motion: reduce) { animation: none; opacity: 1; transform: none; }
+    `}
 `;
-const TabSeparator = styled.div `
-    width: 1px;
-    height: 18px;
-    margin-bottom: 8px;
-    flex-shrink: 0;
-    background: ${({ $v }) => $v.divider};
+const TabSeparator = styled.div `
+    width: 1px;
+    height: 18px;
+    margin-bottom: 8px;
+    flex-shrink: 0;
+    background: ${({ $v }) => $v.divider};
 `;
-const DropMark = styled.div `
-    position: absolute;
-    top: 2px;
-    bottom: 0;
-    width: 3px;
-    border-radius: 2px;
-    background: ${ACCENT};
-    left: ${({ $side }) => ($side === 'left' ? '-2px' : 'auto')};
-    right: ${({ $side }) => ($side === 'right' ? '-2px' : 'auto')};
+const DropMark = styled.div `
+    position: absolute;
+    top: 2px;
+    bottom: 0;
+    width: 3px;
+    border-radius: 2px;
+    background: ${ACCENT};
+    left: ${({ $side }) => ($side === 'left' ? '-2px' : 'auto')};
+    right: ${({ $side }) => ($side === 'right' ? '-2px' : 'auto')};
 `;
-const TabItem = styled.div `
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: 2px;
-    height: 32px;
-    padding: 0 6px 0 12px;
-    max-width: 330px;
-    user-select: none;
-    border-radius: ${({ $v }) => $v.tabRadius};
-    background: ${({ $active, $v }) => ($active ? $v.tabBg : $v.idleTabBg)};
-    /* Stile card: ombra verso l'alto, sotto il tab poggia sul contenuto */
-    box-shadow: ${({ $active, $v }) => ($active ? $v.tabShadow : 'none')};
-    opacity: ${({ $dragging }) => ($dragging ? 0.4 : 1)};
-    z-index: ${({ $active }) => ($active ? 2 : 1)};
-    transition: background 0.18s ease-out, box-shadow 0.18s ease-out, opacity 0.18s ease-out;
-    &:hover { background: ${({ $active, $v }) => ($active ? $v.tabBg : $v.tabHover)}; }
-    &::before, &::after {
-        content: '';
-        position: absolute;
-        bottom: 0;
-        width: ${TAB_RADIUS}px;
-        height: ${TAB_RADIUS}px;
-        display: ${({ $active, $v }) => ($active && $v.joins ? 'block' : 'none')};
-    }
-    &::before {
-        left: -${TAB_RADIUS}px;
-        background: ${({ $v }) => $v.joins ? `radial-gradient(circle at 0 0, transparent ${TAB_RADIUS - 0.5}px, ${$v.tabBg} ${TAB_RADIUS}px)` : 'none'};
-    }
-    &::after {
-        right: -${TAB_RADIUS}px;
-        background: ${({ $v }) => $v.joins ? `radial-gradient(circle at ${TAB_RADIUS}px 0, transparent ${TAB_RADIUS - 0.5}px, ${$v.tabBg} ${TAB_RADIUS}px)` : 'none'};
-    }
+const TabItem = styled.div `
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    height: 32px;
+    padding: 0 6px 0 12px;
+    max-width: 330px;
+    user-select: none;
+    border-radius: ${({ $v }) => $v.tabRadius};
+    background: ${({ $active, $v }) => ($active ? $v.tabBg : $v.idleTabBg)};
+    /* Stile card: ombra verso l'alto, sotto il tab poggia sul contenuto */
+    box-shadow: ${({ $active, $v }) => ($active ? $v.tabShadow : 'none')};
+    opacity: ${({ $dragging }) => ($dragging ? 0.4 : 1)};
+    z-index: ${({ $active }) => ($active ? 2 : 1)};
+    transition: background 0.18s ease-out, box-shadow 0.18s ease-out, opacity 0.18s ease-out;
+    &:hover { background: ${({ $active, $v }) => ($active ? $v.tabBg : $v.tabHover)}; }
+    &::before, &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        width: ${TAB_RADIUS}px;
+        height: ${TAB_RADIUS}px;
+        display: ${({ $active, $v }) => ($active && $v.joins ? 'block' : 'none')};
+    }
+    &::before {
+        left: -${TAB_RADIUS}px;
+        background: ${({ $v }) => $v.joins ? `radial-gradient(circle at 0 0, transparent ${TAB_RADIUS - 0.5}px, ${$v.tabBg} ${TAB_RADIUS}px)` : 'none'};
+    }
+    &::after {
+        right: -${TAB_RADIUS}px;
+        background: ${({ $v }) => $v.joins ? `radial-gradient(circle at ${TAB_RADIUS}px 0, transparent ${TAB_RADIUS - 0.5}px, ${$v.tabBg} ${TAB_RADIUS}px)` : 'none'};
+    }
 `;
-const TabButton = styled.button `
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    max-width: 290px;
-    height: 100%;
-    padding: 0 8px 0 0;
-    border: none;
-    background: none;
-    font-family: inherit;
-    font-size: 13px;
-    font-weight: ${({ $active }) => ($active ? 600 : 500)};
-    /* !important perche contenitori come l'intestazione del TMPanel impongono il proprio colore
-       a tutti i discendenti con '*, & { color: ... !important }': senza, il titolo lo eredita da li */
-    color: ${({ $active, $textColor, $idleColor }) => ($active ? $textColor : $idleColor)} !important;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: pointer;
-    &:disabled { color: #BDBDBD !important; cursor: default; }
-    &:focus, &:focus-visible { outline: none; }
+const TabButton = styled.button `
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 290px;
+    height: 100%;
+    padding: 0 8px 0 0;
+    border: none;
+    background: none;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: ${({ $active }) => ($active ? 600 : 500)};
+    /* !important perche contenitori come l'intestazione del TMPanel impongono il proprio colore
+       a tutti i discendenti con '*, & { color: ... !important }': senza, il titolo lo eredita da li */
+    color: ${({ $active, $textColor, $idleColor }) => ($active ? $textColor : $idleColor)} !important;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    &:disabled { color: #BDBDBD !important; cursor: default; }
+    &:focus, &:focus-visible { outline: none; }
 `;
 /** Pulsante 'x' per chiudere il tab: stesso colore del titolo accanto. */
-const CloseButton = styled.button `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-    padding: 0;
-    border: none;
-    border-radius: 4px;
-    background: none;
-    color: ${({ $color }) => $color} !important;
-    font-size: 14px;
-    line-height: 1;
-    font-family: inherit;
-    cursor: pointer;
-
-    &:hover { background: rgba(0, 0, 0, 0.15); }
-    &:focus, &:focus-visible { outline: none; }
+const CloseButton = styled.button `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    background: none;
+    color: ${({ $color }) => $color} !important;
+    font-size: 14px;
+    line-height: 1;
+    font-family: inherit;
+    cursor: pointer;
+
+    &:hover { background: rgba(0, 0, 0, 0.15); }
+    &:focus, &:focus-visible { outline: none; }
 `;
 /** Casella di testo mostrata al posto del titolo durante la rinomina. */
-const RenameInput = styled.input `
-    margin: 4px 2px 4px 10px;
-    padding: 2px 4px;
-    width: 130px;
-    font-family: inherit;
-    font-size: 13px;
-    font-weight: 600;
-    color: ${TEXT_ACTIVE};
-    background: ${TAB_BG};
-    border: 1px solid ${ACCENT};
-    border-radius: 4px;
-    outline: none;
+const RenameInput = styled.input `
+    margin: 4px 2px 4px 10px;
+    padding: 2px 4px;
+    width: 130px;
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    color: ${TEXT_ACTIVE};
+    background: ${TAB_BG};
+    border: 1px solid ${ACCENT};
+    border-radius: 4px;
+    outline: none;
 `;
 /** Badge numerico a pillola accanto al titolo (es. conteggio errori). */
-const TabBadge = styled.span `
-    background: ${({ $color }) => $color};
-    color: #fff !important;
-    font-size: 11px;
-    font-weight: 700;
-    line-height: 16px;
-    min-width: 16px;
-    padding: 0 5px;
-    border-radius: 999em;
-    text-align: center;
+const TabBadge = styled.span `
+    background: ${({ $color }) => $color};
+    color: #fff !important;
+    font-size: 11px;
+    font-weight: 700;
+    line-height: 16px;
+    min-width: 16px;
+    padding: 0 5px;
+    border-radius: 999em;
+    text-align: center;
 `;
 const MAX_LABEL_CHARS = 30;
 const LABEL_COUNTER = /\s*\(\d+\)$/;
@@ -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, 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;
@@ -523,8 +534,8 @@ const TMTabControl = (props) => {
             // L'input si apre dopo la chiusura del menu, altrimenti perde subito il focus
             pushOwn({ name: renameCaption, icon: _jsx(IconEdit, { fontSize: 18 }), onClick: () => { closeMenu(); setTimeout(() => setEditingId(panel.props.id), 0); } });
         }
-        // Come per la 'x': l'ultimo tab rimasto non si chiude
-        if (onTabClose && panel.props.closable !== false && panels.length > 1) {
+        // Come per la 'x': l'ultimo tab rimasto non si chiude, salvo closableWhenSingle
+        if (onTabClose && panel.props.closable !== false && (closableWhenSingle || panels.length > 1)) {
             pushOwn({ name: closeCaption, icon: _jsx(IconCloseOutline, { fontSize: 18 }), onClick: () => { closeMenu(); onTabClose(panel.props.id); } });
         }
         // Chiude in blocco gli altri tab chiudibili, ma prima chiede conferma dicendo quanti sono
@@ -547,7 +558,7 @@ const TMTabControl = (props) => {
             pushOwn({ name: addCaption, icon: _jsx(IconAdd, { fontSize: 18 }), onClick: () => { closeMenu(); onTabAdd(); } }, items.length > 0);
         }
         return items;
-    }, [panels, tabMenuItems, onTabRename, onTabClose, onTabAdd, renameCaption, closeCaption, closeOtherCaption, addCaption]);
+    }, [panels, tabMenuItems, onTabRename, onTabClose, closableWhenSingle, onTabAdd, renameCaption, closeCaption, closeOtherCaption, addCaption]);
     // Tasto destro sul tab: niente menu del browser, si apre quello con Rinomina e Chiudi.
     const openMenu = (e, id) => {
         e.preventDefault();
@@ -562,8 +573,9 @@ const TMTabControl = (props) => {
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 0, ...style }, children: [showBar &&
                 _jsxs(TabsHeader, { $v: v, onContextMenu: (e) => e.preventDefault(), children: [arrows.left && _jsx(NavButton, { $v: v, type: 'button', tabIndex: -1, onClick: () => scrollTabs(-1), children: _jsx(IconLeft, { fontSize: 18 }) }), _jsxs(TabsStrip, { $v: v, ref: stripRef, role: 'tablist', onScroll: refreshArrows, onKeyDown: handleBarKeyDown, children: [panels.map((p, index) => {
                                     const isActive = p.props.id === activeId;
-                                    // Con un solo tab la 'x' sparisce: non deve essere possibile restare senza contenuto
-                                    const canClose = !!onTabClose && p.props.closable !== false && panels.length > 1;
+                                    // Con un solo tab la 'x' sparisce: non deve essere possibile restare senza contenuto,
+                                    // a meno che closableWhenSingle non consenta di chiudere anche l'ultimo tab.
+                                    const canClose = !!onTabClose && p.props.closable !== false && (closableWhenSingle || panels.length > 1);
                                     const canRename = !!onTabRename && p.props.renamable !== false && typeof p.props.label === 'string';
                                     const isDropTarget = !!dragId && dropId === p.props.id && dragId !== p.props.id;
                                     const draggedIndex = panels.findIndex(t => t.props.id === dragId);
@@ -577,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) => {
@@ -594,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/TMTooltip.d.ts

@@ -11,5 +11,5 @@ interface ITMTooltipProps extends ITooltipOptions {
     childStyle?: React.CSSProperties;
     allowContentInteraction?: boolean;
 }
-declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction }: ITMTooltipProps) => React.JSX.Element;
+declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction }: ITMTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default TMTooltip;

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

@@ -29,19 +29,13 @@ interface ITMTreeViewProps {
     showLoadMoreButton?: boolean;
     enableVirtualization?: boolean;
 }
-declare const TMTreeView: ({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren, itemsPerPage, showLoadMoreButton, enableVirtualization }: ITMTreeViewProps) => React.JSX.Element;
+declare const TMTreeView: ({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren, itemsPerPage, showLoadMoreButton, enableVirtualization }: ITMTreeViewProps) => import("react/jsx-runtime").JSX.Element;
 export default TMTreeView;
-export declare const StyledTreeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;
-export declare const StyledItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;
-export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}, {
+export declare const StyledTreeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledTreeNode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isSelected"> & {
     $isSelected?: boolean;
-}>> & string;
-export declare const StyledStickyPaginator: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
-    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
-}> & string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isSelected"> & {
+    $isSelected?: boolean;
+}, never>>> & string;
+export declare const StyledStickyPaginator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

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/TMUserAvatar.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 interface TMUserAvatarProps {
     displayName: string;
     nameForColorCalculation: string;
     tooltipName?: string;
     returnType?: 'jsx' | 'svg';
 }
-declare const TMUserAvatar: (props: TMUserAvatarProps) => string | React.JSX.Element;
+declare const TMUserAvatar: (props: TMUserAvatarProps) => string | import("react/jsx-runtime").JSX.Element;
 export default TMUserAvatar;

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

@@ -1,6 +1,5 @@
-import React from 'react';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
 declare const TMVilViewer: ({ vil }: {
     vil?: ValidationItem[];
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default TMVilViewer;