@topconsultnpm/sdkui-react 6.22.0-t1 → 6.22.0-t3

package/lib/components/base/TMTabControl.js

@@ -0,0 +1,664 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import styled, { css, keyframes } from 'styled-components';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
+import TMTooltip from './TMTooltip';
+import { ButtonNames, TMMessageBoxManager } from './TMPopUp';
+import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { getAppModuleButtonColors, getAppModuleGradient, IconAdd, IconCloseOutline, IconEdit, IconLeft, IconRight, SDKUI_Localizator } from '../../helper';
+// =============================================
+// TMTabControl: gestore di tab generico (barra + contenuto), senza DevExtreme.
+//
+//   <TMTabControl hideBarWhenSingle onTabClose={...} onTabRename={...} onTabReorder={...}>
+//       <TMTabPanel id='main' label='Ricerca' closable={false}>{ ...contenuto... }</TMTabPanel>
+//   </TMTabControl>
+//
+// Comportamenti chiave:
+//   hideBarWhenSingle -> con un solo tab la barra non si disegna: si vede solo il contenuto.
+//   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; 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.
+//
+// Il contenuto e sempre montato nell'ordine di prima apparizione dei tab: spostarli cambia solo la
+// barra, non il DOM del contenuto, cosi nulla viene rimontato ne perde stato o scroll.
+// =============================================
+const ACCENT = '#0F6CBD'; // Bordo del campo di rinomina e segnaposto di rilascio
+const TEXT_ACTIVE = '#1B2B44'; // Titolo del tab attivo: il blu scuro dei testi dell'applicazione
+const TAB_BG = '#FFFFFF'; // Linguetta attiva
+const TAB_RADIUS = 10;
+const TAB_CORNERS = `${TAB_RADIUS}px ${TAB_RADIUS}px 0 0`; // Linguetta arrotondata solo in alto, appoggiata al contenuto
+const SWIPE_MIN_DISTANCE = 60; // Trascinamento minimo in px perche lo swipe valga come cambio tab
+const TAB_DRAG_MIME = 'application/x-tm-tab'; // Formato dei dati trascinati: riconosciuto solo dai tab
+/** Colore del modulo in uso: Surfer blu #2559a5, Designer bordeaux #482234, Orchestrator verde #1d6f42. */
+const moduleColor = () => getAppModuleButtonColors(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER).base;
+// Un tema per voce: sono funzioni perche module e moduleFilled leggono il colore del modulo al momento dell'uso.
+const VARIANTS = {
+    // Barra senza fondo: solo il tab attivo e una scheda, schiarita verso il basso fino a fondersi col contenuto
+    card: () => {
+        const accent = moduleColor();
+        return {
+            stripBg: 'transparent',
+            tabBg: `linear-gradient(180deg, ${accent}1F 0%, ${accent}0A 55%, ${TAB_BG} 100%)`,
+            idleTabBg: 'transparent',
+            tabRadius: TAB_CORNERS,
+            tabGap: '2px',
+            textColor: accent,
+            idleTextColor: `${accent}CC`,
+            stripPadding: '0 2px',
+            divider: '#D6DEEA',
+            // Nessuna ombra: il tab attivo si riconosce dal fondo sfumato e dal titolo nel colore del modulo
+            tabShadow: 'none',
+            joins: false,
+            tabHover: `${accent}12`,
+            buttonHover: `${accent}1A`,
+            buttonActive: `${accent}29`
+        };
+    },
+    // Le tinte del modulo in uso (Surfer blu, Designer bordeaux, Orchestrator verde) su tab bianco
+    module: () => {
+        const accent = moduleColor();
+        return {
+            stripBg: `${accent}14`,
+            tabBg: TAB_BG,
+            idleTabBg: 'transparent',
+            tabRadius: TAB_CORNERS,
+            tabGap: '0',
+            textColor: accent,
+            idleTextColor: `${accent}CC`,
+            stripPadding: `0 ${TAB_RADIUS}px`,
+            divider: `${accent}33`,
+            tabShadow: 'none',
+            joins: true,
+            tabHover: 'rgba(255, 255, 255, 0.55)',
+            buttonHover: 'rgba(255, 255, 255, 0.75)',
+            buttonActive: 'rgba(255, 255, 255, 0.95)'
+        };
+    },
+    // Come module, ma il tab attivo e riempito dal gradiente del modulo e il titolo e bianco
+    moduleFilled: () => ({
+        ...VARIANTS.module(),
+        tabBg: getAppModuleGradient(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER),
+        textColor: '#FFFFFF',
+        // Un raccordo non si puo dipingere con un gradiente: il tab resta staccato dal contenuto
+        joins: false
+    })
+};
+/** 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; }
+`;
+/** 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; }
+`;
+/** 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; }
+`;
+/** 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 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); }
+`;
+// 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_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) {
+        case 'fade': return ANIM_FADE;
+        case 'zoom': return ANIM_ZOOM;
+        case 'slide': return forward ? ANIM_SLIDE_FORWARD : ANIM_SLIDE_BACK;
+        default: return undefined;
+    }
+};
+/** 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 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 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; }
+`;
+/** 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; }
+`;
+/** 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;
+`;
+/** 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 MAX_LABEL_CHARS = 30;
+const LABEL_COUNTER = /\s*\(\d+\)$/;
+/**
+ * Titolo tagliato ai primi MAX_LABEL_CHARS caratteri del nome, con i puntini di sospensione e il
+ * numero progressivo in coda (es. 'NomeLunghissimoLunghi... (2)'). undefined se il titolo ci sta gia.
+ */
+const shortenLabel = (label) => {
+    const counter = label.match(LABEL_COUNTER)?.[0] ?? '';
+    const name = label.slice(0, label.length - counter.length);
+    return name.length > MAX_LABEL_CHARS ? `${name.slice(0, MAX_LABEL_CHARS).trimEnd()}…${counter}` : undefined;
+};
+/** 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, toolbar, children } = props;
+    const v = useMemo(() => VARIANTS[variant](), [variant]);
+    const titleColor = textColor ?? v.textColor;
+    const titleIdleColor = idleTextColor ?? v.idleTextColor;
+    // Legge i TMTabPanel figli scartando quelli senza id o nascosti.
+    const panels = useMemo(() => React.Children.toArray(children)
+        .filter((c) => React.isValidElement(c) && c.props?.id != null)
+        .filter(c => c.props.visible !== false), [children]);
+    const [internalId, setInternalId] = useState(defaultSelectedId);
+    const [editingId, setEditingId] = useState(undefined); // Tab con il titolo in rinomina
+    const [dragId, setDragId] = useState(undefined); // Tab che si sta trascinando
+    const [dropId, setDropId] = useState(undefined); // Tab sopra cui si rilascerebbe
+    const [menu, setMenu] = useState({ visible: false, position: { x: 0, y: 0 } });
+    const [arrows, setArrows] = useState({ left: false, right: false });
+    const stripRef = useRef(null);
+    // Ordine di prima apparizione dei tab: il contenuto resta montato sempre nella stessa posizione
+    // del DOM, cosi spostare o rinominare un tab non rimonta e non ricarica nulla.
+    const mountOrder = useRef(new Map());
+    const mountSeq = useRef(0);
+    panels.forEach(p => { if (!mountOrder.current.has(p.props.id))
+        mountOrder.current.set(p.props.id, ++mountSeq.current); });
+    const mountedPanels = useMemo(() => [...panels].sort((a, b) => (mountOrder.current.get(a.props.id) ?? 0) - (mountOrder.current.get(b.props.id) ?? 0)), [panels]);
+    // Il tab attivo: prop in modalita controllata, altrimenti stato interno, altrimenti il primo.
+    const activeId = selectedId ?? internalId ?? panels[0]?.props.id;
+    const activePanel = panels.find(p => p.props.id === activeId);
+    // Con un solo tab e hideBarWhenSingle la barra sparisce: resta solo il contenuto.
+    const showBar = !(hideBarWhenSingle && panels.length <= 1);
+    // Se il tab attivo sparisce (chiuso o nascosto) ripiega sul primo disponibile.
+    useEffect(() => {
+        if (activePanel || panels.length === 0)
+            return;
+        const fallbackId = panels[0].props.id;
+        if (selectedId === undefined)
+            setInternalId(fallbackId);
+        onSelectedIdChange?.(fallbackId);
+    }, [activePanel, panels, selectedId, onSelectedIdChange]);
+    // Le frecce compaiono solo quando i tab non entrano tutti nella barra.
+    const refreshArrows = useCallback(() => {
+        const el = stripRef.current;
+        if (!el)
+            return;
+        const maxScroll = el.scrollWidth - el.clientWidth;
+        const next = { left: el.scrollLeft > 1, right: el.scrollLeft < maxScroll - 1 };
+        setArrows(prev => (prev.left === next.left && prev.right === next.right) ? prev : next);
+    }, []);
+    // Firma dei titoli: rinominando un tab cambia la larghezza della striscia e le frecce vanno ricalcolate
+    const labelsSignature = panels.map(p => typeof p.props.label === 'string' ? p.props.label : '').join('|');
+    useEffect(() => {
+        const el = stripRef.current;
+        if (!el)
+            return;
+        refreshArrows();
+        const observer = new ResizeObserver(refreshArrows);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [refreshArrows, panels.length, labelsSignature, showBar]);
+    // Cambiando tab quello attivo viene portato a vista se era fuori dalla parte visibile.
+    useEffect(() => {
+        if (!activeId)
+            return;
+        stripRef.current?.querySelector(`[data-tab-id="${activeId}"]`)?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+    }, [activeId]);
+    // Verso dell'ultimo cambio tab: serve allo 'slide', che entra dal lato da cui si arriva.
+    const activeIndex = panels.findIndex(p => p.props.id === activeId);
+    const prevIndexRef = useRef(activeIndex);
+    const goingForward = activeIndex >= prevIndexRef.current;
+    useEffect(() => { prevIndexRef.current = activeIndex; }, [activeIndex]);
+    const animation = useMemo(() => pickAnimation(contentAnimation, goingForward), [contentAnimation, goingForward]);
+    const [animPhase, setAnimPhase] = useState('done');
+    useLayoutEffect(() => {
+        if (!animation) {
+            setAnimPhase('done');
+            return;
+        }
+        setAnimPhase('hold');
+        let end = 0;
+        // Il fotogramma successivo arriva a disegno del contenuto gia fatto: da li in poi resta solo da muovere
+        const frame = requestAnimationFrame(() => {
+            setAnimPhase('run');
+            // A effetto finito si toglie il livello grafico dedicato: i testi tornano nitidi come prima
+            end = window.setTimeout(() => setAnimPhase('done'), animationDuration + 60);
+        });
+        return () => { cancelAnimationFrame(frame); clearTimeout(end); };
+    }, [activeId, animation, animationDuration]);
+    const scrollTabs = (direction) => {
+        const el = stripRef.current;
+        if (el)
+            el.scrollBy({ left: direction * Math.max(120, el.clientWidth * 0.6), behavior: 'smooth' });
+    };
+    const handleSelect = (id) => {
+        if (selectedId === undefined)
+            setInternalId(id); // Aggiorna lo stato solo se non controllato
+        onSelectedIdChange?.(id);
+    };
+    // Primo tab abilitato partendo da 'from' e muovendosi di 'delta': i disabilitati si saltano.
+    const nextEnabledId = (from, delta) => {
+        for (let i = from + delta; i >= 0 && i < panels.length; i += delta) {
+            if (!panels[i].props.disabled)
+                return panels[i].props.id;
+        }
+        return undefined;
+    };
+    const focusTab = (id) => stripRef.current?.querySelector(`[data-tab-button="${id}"]`)?.focus();
+    // Frecce come nei tab DevExpress: destra e giu al successivo, sinistra e su al precedente, Home ed End ai capi.
+    const handleBarKeyDown = (e) => {
+        if (editingId)
+            return; // Durante la rinomina i tasti appartengono all'input
+        const current = panels.findIndex(p => p.props.id === activeId);
+        let target;
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                target = nextEnabledId(current, 1);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                target = nextEnabledId(current, -1);
+                break;
+            case 'Home':
+                target = nextEnabledId(-1, 1);
+                break;
+            case 'End':
+                target = nextEnabledId(panels.length, -1);
+                break;
+            default: return;
+        }
+        e.preventDefault(); // Le frecce non devono scorrere la pagina ne la striscia dei tab
+        if (!target)
+            return;
+        handleSelect(target);
+        focusTab(target); // Il focus segue la selezione: la freccia dopo parte dal nuovo tab
+    };
+    // Swipe touch sul contenuto: trascinando verso sinistra si va al tab successivo, verso destra al precedente.
+    const swipeStart = useRef(undefined);
+    const handleTouchStart = (e) => {
+        if (!swipeEnabled || e.touches.length !== 1) {
+            swipeStart.current = undefined;
+            return;
+        }
+        swipeStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+    };
+    const handleTouchEnd = (e) => {
+        const start = swipeStart.current;
+        swipeStart.current = undefined;
+        if (!start)
+            return;
+        const dx = e.changedTouches[0].clientX - start.x;
+        const dy = e.changedTouches[0].clientY - start.y;
+        if (Math.abs(dx) < SWIPE_MIN_DISTANCE || Math.abs(dx) < Math.abs(dy) * 2)
+            return;
+        const target = nextEnabledId(panels.findIndex(p => p.props.id === activeId), dx < 0 ? 1 : -1);
+        if (target)
+            handleSelect(target);
+    };
+    // Chiude la rinomina salvando il nuovo titolo solo se non vuoto.
+    const commitRename = (id, value) => {
+        const label = value.trim();
+        if (label)
+            onTabRename?.(id, label);
+        setEditingId(undefined);
+    };
+    const closeMenu = () => setMenu(prev => ({ ...prev, visible: false, id: undefined }));
+    // Voci del menu di un tab: prima quelle del chiamante, poi quelle che il tab consente fra
+    // Rinomina, Chiudi, Chiudi gli altri e Aggiungi.
+    const buildMenuItems = useCallback((id) => {
+        const panel = panels.find(p => p.props.id === id);
+        if (!panel)
+            return [];
+        const custom = tabMenuItems?.(panel.props.id) ?? [];
+        const items = [...custom];
+        const ownFirst = items.length; // Il primo comando del controllo apre un gruppo sotto le voci del chiamante
+        // Se il chiamante ha gia una voce con lo stesso testo (tipicamente Chiudi) vince la sua: il controllo non la ripete
+        const customNames = new Set(custom.filter(i => i.visible !== false).map(i => i.name));
+        const pushOwn = (item, beginGroup) => {
+            if (customNames.has(item.name))
+                return;
+            items.push({ ...item, beginGroup: beginGroup ?? (items.length === ownFirst && ownFirst > 0) });
+        };
+        if (onTabRename && panel.props.renamable !== false && typeof panel.props.label === 'string') {
+            // 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, 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
+        const others = onTabClose ? panels.filter(p => p.props.id !== panel.props.id && p.props.closable !== false) : [];
+        if (onTabClose && others.length > 0) {
+            pushOwn({
+                name: closeOtherCaption, icon: _jsx(IconCloseOutline, { fontSize: 18 }), onClick: () => {
+                    closeMenu();
+                    TMMessageBoxManager.show({
+                        title: closeOtherCaption,
+                        message: SDKUI_Localizator.CloseTabs_ConfirmForN.replaceParams(others.length),
+                        buttons: [ButtonNames.YES, ButtonNames.NO],
+                        onButtonClick: (e) => { if (e === ButtonNames.YES)
+                            others.forEach(t => onTabClose(t.props.id)); }
+                    });
+                }
+            });
+        }
+        if (onTabAdd) {
+            pushOwn({ name: addCaption, icon: _jsx(IconAdd, { fontSize: 18 }), onClick: () => { closeMenu(); onTabAdd(); } }, items.length > 0);
+        }
+        return items;
+    }, [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();
+        e.stopPropagation();
+        // Senza voci non si apre niente: lasciare lo stato aperto farebbe comparire il menu
+        // a sorpresa appena le voci tornano disponibili, es. all'apertura di un altro tab.
+        if (buildMenuItems(id).length === 0)
+            return;
+        setMenu({ visible: true, position: { x: e.clientX, y: e.clientY }, id });
+    };
+    const menuItems = useMemo(() => buildMenuItems(menu.id), [buildMenuItems, menu.id]);
+    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,
+                                    // 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);
+                                    // Separatore solo tra due tab entrambi inattivi, come nel browser
+                                    const showSeparator = index > 0 && !isActive && panels[index - 1].props.id !== activeId;
+                                    // Titoli lunghi (es. certi tipi documento): si accorciano e il nome intero va nel tooltip
+                                    const labelText = typeof p.props.label === 'string' ? p.props.label : undefined;
+                                    const shortLabel = labelText ? shortenLabel(labelText) : undefined;
+                                    const tabButton = (_jsxs(TabButton, { type: 'button', role: 'tab', "data-tab-button": p.props.id, "aria-selected": isActive, 
+                                        // Con il Tab si entra e si esce dalla barra in un colpo solo: dentro si gira con le frecce
+                                        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 && 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 || 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) => {
+                                                                if (e.key === 'Enter')
+                                                                    commitRename(p.props.id, e.currentTarget.value);
+                                                                else if (e.key === 'Escape')
+                                                                    setEditingId(undefined);
+                                                            } })
+                                                        : shortLabel
+                                                            // 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 }) }), 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, 
+                        // Il tab inattivo resta a grandezza piena ma fuori campo: griglie e pannelli non si rimisurano a zero
+                        style: isActive ? contentStyle : { ...contentStyle, position: 'absolute', top: 0, left: '-9999px', width: '100%', height: '100%', visibility: 'hidden' }, children: p.props.children }, p.props.id));
+                }) })] }));
+};
+export default TMTabControl;
+export const useTMTabs = ({ label, newLabel }) => {
+    const [items, setItems] = useState([{ id: 'tab-1', label }]);
+    const [activeId, setActiveId] = useState('tab-1');
+    const seq = useRef(1); // Contatore degli id generati
+    const itemsRef = useRef(items); // Lista corrente leggibile dalle callback senza rigenerarle
+    itemsRef.current = items;
+    const labelRef = useRef({ label, newLabel });
+    labelRef.current = { label, newLabel };
+    const add = useCallback((customLabel) => {
+        const index = ++seq.current;
+        const id = `tab-${index}`;
+        const { label, newLabel } = labelRef.current;
+        setItems(prev => [...prev, { id, label: customLabel ?? (newLabel ? newLabel(index) : `${label} ${index}`) }]);
+        setActiveId(id);
+        return id;
+    }, []);
+    const close = useCallback((id) => {
+        const prev = itemsRef.current;
+        const index = prev.findIndex(t => t.id === id);
+        if (index < 0)
+            return;
+        const next = prev.filter(t => t.id !== id);
+        itemsRef.current = next; // aggiorno subito: cosi piu chiusure nello stesso tick non si sovrascrivono
+        setItems(next);
+        // Chiudendo il tab attivo si passa al precedente, come fa il browser
+        setActiveId(curr => curr === id ? (next[Math.max(0, index - 1)]?.id ?? curr) : curr);
+    }, []);
+    const rename = useCallback((id, label) => setItems(prev => prev.map(t => t.id === id ? { ...t, label } : t)), []);
+    const move = useCallback((draggedId, targetId) => setItems(prev => {
+        const from = prev.findIndex(t => t.id === draggedId);
+        const to = prev.findIndex(t => t.id === targetId);
+        if (from < 0 || to < 0 || from === to)
+            return prev;
+        const next = [...prev];
+        next.splice(to, 0, next.splice(from, 1)[0]);
+        return next;
+    }), []);
+    const controlProps = useMemo(() => ({
+        selectedId: activeId,
+        onSelectedIdChange: setActiveId,
+        onTabClose: close,
+        onTabRename: rename,
+        onTabReorder: move,
+        onTabAdd: () => { add(); }
+    }), [activeId, add, close, rename, move]);
+    return { items, activeId, setActiveId, add, close, rename, move, controlProps };
+};