@topconsultnpm/sdkui-react 6.22.0-dev4.4 → 6.22.0-dev4.6

package/lib/components/base/waitPanel/TMWaitPanelManager.js

@@ -4,6 +4,12 @@ import { SDKUI_Localizator } from '../../../helper';
 import TMWaitPanelView from './TMWaitPanelView';
 const Z_INDEX_BASE = 2147483601;
 const RESOLVED = Promise.resolve();
+/** Accumula un messaggio in testa, tenendo solo quelli visibili nel popover. */
+const pushMessage = (list, message, max) => {
+    list.unshift(message);
+    if (list.length > max)
+        list.length = max;
+};
 const pad2 = (n) => (n < 10 ? '0' + n : String(n));
 /** Formatta una durata in millisecondi come "42s", "3m 07s", "1h 12m". */
 const formatDuration = (ms) => {
@@ -37,6 +43,11 @@ class TMWaitPanelInstance {
         this._error = 0;
         this._secondaryValue = 0;
         this._secondaryMax = 0;
+        this._warningMessages = [];
+        this._errorMessages = [];
+        this.warningMessageTotal = 0;
+        this.errorMessageTotal = 0;
+        this.messagesDirty = false;
         // Ultimi valori scritti sul DOM: servono a non riscrivere testo identico.
         this.lastPercentText = '';
         this.lastSubtitleText = '';
@@ -55,8 +66,24 @@ class TMWaitPanelInstance {
         this.setTitle = (title) => { this._title = title; this.schedule(); };
         this.setSubtitle = (subtitle) => { this._subtitleOverride = subtitle; this.schedule(); };
         this.ok = (delta = 1) => { this._ok += delta; this.schedule(); };
-        this.warning = (delta = 1) => { this._warning += delta; this.schedule(); };
-        this.error = (delta = 1) => { this._error += delta; this.schedule(); };
+        this.warning = (delta = 1, message) => {
+            this._warning += delta;
+            if (message) {
+                pushMessage(this._warningMessages, message, this.maxVisibleMessages);
+                this.warningMessageTotal++;
+                this.messagesDirty = true;
+            }
+            this.schedule();
+        };
+        this.error = (delta = 1, message) => {
+            this._error += delta;
+            if (message) {
+                pushMessage(this._errorMessages, message, this.maxVisibleMessages);
+                this.errorMessageTotal++;
+                this.messagesDirty = true;
+            }
+            this.schedule();
+        };
         this.setSecondary = (patch) => {
             if (patch.value !== undefined)
                 this._secondaryValue = patch.value;
@@ -210,12 +237,18 @@ class TMWaitPanelInstance {
                 this.lastError = this._error;
                 nodes.errorValue.textContent = String(this._error);
             }
+            if (this.messagesDirty) {
+                this.messagesDirty = false;
+                this.flushMessages(nodes.warningPopover, nodes.warningList, this._warningMessages, this.warningMessageTotal);
+                this.flushMessages(nodes.errorPopover, nodes.errorList, this._errorMessages, this.errorMessageTotal);
+            }
             if (nodes.secondaryFill)
                 this.flushSecondary(nodes);
             if (this.options.showEta ?? true)
                 this.flushEta(nodes, ratio);
         };
         this.options = options;
+        this.maxVisibleMessages = Math.max(1, options.maxVisibleMessages ?? 5);
         this._max = options.max ?? 0;
         this._title = options.title ?? '';
         this._secondaryText = options.secondaryText ?? '';
@@ -256,6 +289,26 @@ class TMWaitPanelInstance {
             return template.replace('{{0}}', String(this._value)).replace('{{1}}', String(this._max));
         return this.options.subtitle ?? '';
     }
+    /** Riscrive la lista di un popover con gli ultimi messaggi e la riga "... e altri N". Il popover si apre solo se non e' vuoto. */
+    flushMessages(popover, list, messages, total) {
+        if (total === 0)
+            return;
+        const visible = messages.length;
+        const items = [];
+        for (let i = 0; i < visible; i++) {
+            const item = document.createElement('li');
+            item.textContent = messages[i];
+            items.push(item);
+        }
+        if (total > visible) {
+            const more = document.createElement('li');
+            more.className = 'tm-wait-panel-more';
+            more.textContent = SDKUI_Localizator.AndOthersCount.replace('{{0}}', String(total - visible));
+            items.push(more);
+        }
+        list.replaceChildren(...items);
+        popover.dataset.empty = 'false';
+    }
     /** Riversa sul DOM la seconda barra. Invocata solo quando la view l'ha renderizzata. */
     flushSecondary(nodes) {
         const ratio = this._secondaryMax > 0 ? Math.min(1, Math.max(0, this._secondaryValue / this._secondaryMax)) : 0;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 /** Guscio statico del wait panel: montato una sola volta e mai ri-renderizzato, il manager lo aggiorna via DOM. Le props sono valori iniziali. */
 /** Nodi DOM mutabili di cui il manager ha bisogno per aggiornare il pannello senza React. */
 export interface ITMWaitPanelNodes {
@@ -12,6 +13,11 @@ export interface ITMWaitPanelNodes {
     okValue: HTMLElement;
     warningValue: HTMLElement;
     errorValue: HTMLElement;
+    /** Popover delle pill: il manager riempie la lista e toglie `data-empty` al primo messaggio. */
+    warningPopover: HTMLElement;
+    warningList: HTMLElement;
+    errorPopover: HTMLElement;
+    errorList: HTMLElement;
     abortButton: HTMLButtonElement | null;
     /** Presenti solo con `showSecondary`: riga di avanzamento dell'operazione di dettaglio. */
     secondaryText: HTMLElement | null;
@@ -48,5 +54,5 @@ export interface ITMWaitPanelViewProps {
     /** Invocato dopo il commit con i nodi DOM da aggiornare imperativamente. */
     onMount?: (nodes: ITMWaitPanelNodes) => void;
 }
-declare const TMWaitPanelView: ({ title, subtitle, cancelable, showEta, showCounters, showSecondary, secondaryText, primaryLabel, secondaryLabel, zIndex, onAbort, onConfirmYes, onConfirmNo, onMount }: ITMWaitPanelViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMWaitPanelView: ({ title, subtitle, cancelable, showEta, showCounters, showSecondary, secondaryText, primaryLabel, secondaryLabel, zIndex, onAbort, onConfirmYes, onConfirmNo, onMount }: ITMWaitPanelViewProps) => React.JSX.Element;
 export default TMWaitPanelView;

package/lib/components/base/waitPanel/TMWaitPanelView.js

@@ -14,215 +14,245 @@ const getProgressColor = () => {
     catch { /* nessuna sessione: resta il default */ }
     return getAppModuleButtonColors(appModuleID).base;
 };
-const fadeIn = keyframes `
-    from { opacity: 0; }
-    to   { opacity: 1; }
+const fadeIn = keyframes `
+    from { opacity: 0; }
+    to   { opacity: 1; }
 `;
 // Sfondo su uno pseudo-elemento: il layer composito dell'animazione sgranerebbe Toppy.
-const StyledOverlay = styled.div `
-    position: fixed;
-    inset: 0;
-    z-index: ${props => props.$zIndex};
-
-    &::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background-color: rgba(17, 24, 39, 0.16);
-        animation: ${fadeIn} 140ms ease-out;
-    }
+const StyledOverlay = styled.div `
+    position: fixed;
+    inset: 0;
+    z-index: ${props => props.$zIndex};
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: rgba(17, 24, 39, 0.16);
+        animation: ${fadeIn} 140ms ease-out;
+    }
 `;
-const StyledCard = styled.div `
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 420px;
-    max-width: calc(100% - 24px);
-    max-height: calc(100% - 24px);
-    overflow-y: auto;
-    box-sizing: border-box;
-    padding: 22px 24px 18px 24px;
-    background: #ffffff;
-    border-radius: 16px;
-    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.22);
-    font-family: inherit;
+const StyledCard = styled.div `
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 420px;
+    max-width: calc(100% - 24px);
+    max-height: calc(100% - 24px);
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: 22px 24px 18px 24px;
+    background: #ffffff;
+    border-radius: 16px;
+    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.22);
+    font-family: inherit;
 `;
-const StyledHeader = styled.div `
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 16px;
+const StyledHeader = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
 `;
 // Ritaglio dal contenitore, non object-fit: cover darebbe un'altezza frazionaria e sgranerebbe l'immagine.
-const StyledToppyClip = styled.div `
-    height: 61px;
-    width: 68px;
-    overflow: hidden;
-    flex: 0 0 auto;
+const StyledToppyClip = styled.div `
+    height: 61px;
+    width: 68px;
+    overflow: hidden;
+    flex: 0 0 auto;
 `;
-const StyledToppy = styled.img `
-    display: block;
-    width: 68px;
-    height: 79px;
-    user-select: none;
-    -webkit-user-drag: none;
+const StyledToppy = styled.img `
+    display: block;
+    width: 68px;
+    height: 79px;
+    user-select: none;
+    -webkit-user-drag: none;
 `;
-const StyledHeaderText = styled.div `
-    flex: 1;
-    min-width: 0;
+const StyledHeaderText = styled.div `
+    flex: 1;
+    min-width: 0;
 `;
-const StyledTitle = styled.div `
-    font-size: 17px;
-    font-weight: 600;
-    color: #1f2937;
-    line-height: 1.3;
-    overflow-wrap: anywhere;
+const StyledTitle = styled.div `
+    font-size: 17px;
+    font-weight: 600;
+    color: #1f2937;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
 `;
-const StyledSubtitle = styled.div `
-    margin-top: 3px;
-    font-size: 13px;
-    color: #6b7280;
-    line-height: 1.3;
-    font-variant-numeric: tabular-nums;
-    overflow-wrap: anywhere;
+const StyledSubtitle = styled.div `
+    margin-top: 3px;
+    font-size: 13px;
+    color: #6b7280;
+    line-height: 1.3;
+    font-variant-numeric: tabular-nums;
+    overflow-wrap: anywhere;
 `;
 // Didascalia di una barra: con due avanzamenti e' l'unica cosa che dice quale sia quale.
-const StyledBarLabel = styled.div `
-    margin-top: 18px;
-    font-size: 11px;
-    font-weight: 700;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: #9aa3b2;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+const StyledBarLabel = styled.div `
+    margin-top: 18px;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: #9aa3b2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+const StyledPercentRow = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    margin-top: ${props => (props.$hasLabel ? '4px' : '18px')};
+`;
+const StyledPercent = styled.div `
+    font-size: 34px;
+    font-weight: 700;
+    color: #111827;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
 `;
-const StyledPercentRow = styled.div `
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 8px 12px;
-    margin-top: ${props => (props.$hasLabel ? '4px' : '18px')};
+const StyledCounters = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 6px;
+    padding-bottom: 3px;
 `;
-const StyledPercent = styled.div `
-    font-size: 34px;
-    font-weight: 700;
-    color: #111827;
-    line-height: 1;
-    font-variant-numeric: tabular-nums;
+const StyledPill = styled.span `
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px 2px 6px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 18px;
+    color: ${props => props.$color};
+    background: ${props => props.$background};
+    font-variant-numeric: tabular-nums;
+
+    svg { flex: 0 0 auto; }
 `;
-const StyledCounters = styled.div `
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 6px;
-    padding-bottom: 3px;
+// Fratello della card, non figlio: l'overflow della card lo taglierebbe. Coordinate dell'overlay, calcolate all'apertura.
+const StyledPopover = styled.div `
+    display: none;
+    position: absolute;
+    width: 320px;
+    max-width: calc(100% - 24px);
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: 10px 12px;
+    background: #ffffff;
+    border-left: 3px solid ${props => props.$accent};
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.22);
+    font-size: 12px;
+    color: #374151;
+
+    ul { margin: 6px 0 0 0; padding: 0; list-style: none; }
+    li { padding: 4px 0; border-top: 1px solid #eef1f6; overflow-wrap: anywhere; line-height: 1.35; }
+    li:first-child { border-top: none; }
+    li.tm-wait-panel-more { color: #8a94a6; font-style: italic; }
 `;
-const StyledPill = styled.span `
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 4px;
-    padding: 2px 8px 2px 6px;
-    border-radius: 999px;
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 18px;
-    color: ${props => props.$color};
-    background: ${props => props.$background};
-    font-variant-numeric: tabular-nums;
-
-    svg { flex: 0 0 auto; }
+const StyledPopoverTitle = styled.div `
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: ${props => props.$color};
 `;
-const StyledTrack = styled.div `
-    margin-top: 12px;
-    width: 100%;
-    height: 8px;
-    border-radius: 999px;
-    background: #e8edf4;
-    overflow: hidden;
+/** Tempo per spostare il mouse dalla pill al popover. */
+const POPOVER_HIDE_DELAY_MS = 250;
+const StyledTrack = styled.div `
+    margin-top: 12px;
+    width: 100%;
+    height: 8px;
+    border-radius: 999px;
+    background: #e8edf4;
+    overflow: hidden;
 `;
-const StyledFill = styled.div `
-    width: 100%;
-    height: 100%;
-    background: ${props => props.$color};
-    transform: scaleX(0);
-    transform-origin: left center;
-    transition: transform 120ms linear;
-    will-change: transform;
+const StyledFill = styled.div `
+    width: 100%;
+    height: 100%;
+    background: ${props => props.$color};
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition: transform 120ms linear;
+    will-change: transform;
 `;
-const StyledTimeRow = styled.div `
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    margin-top: 8px;
-    font-size: 12px;
-    color: #8a94a6;
-    font-variant-numeric: tabular-nums;
+const StyledTimeRow = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 8px;
+    font-size: 12px;
+    color: #8a94a6;
+    font-variant-numeric: tabular-nums;
 `;
 // Seconda barra: come la principale ma piu' piccola e in tono minore.
-const StyledSecondary = styled.div `
-    margin-top: ${props => (props.$hasLabel ? '4px' : '14px')};
+const StyledSecondary = styled.div `
+    margin-top: ${props => (props.$hasLabel ? '4px' : '14px')};
 `;
-const StyledSecondaryRow = styled.div `
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-    font-size: 12px;
-    color: #6b7280;
-    font-variant-numeric: tabular-nums;
+const StyledSecondaryRow = styled.div `
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    font-size: 12px;
+    color: #6b7280;
+    font-variant-numeric: tabular-nums;
 `;
-const StyledSecondaryText = styled.span `
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+const StyledSecondaryText = styled.span `
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 `;
-const StyledSecondaryTrack = styled.div `
-    margin-top: 5px;
-    width: 100%;
-    height: 5px;
-    border-radius: 999px;
-    background: #eef1f6;
-    overflow: hidden;
+const StyledSecondaryTrack = styled.div `
+    margin-top: 5px;
+    width: 100%;
+    height: 5px;
+    border-radius: 999px;
+    background: #eef1f6;
+    overflow: hidden;
 `;
-const StyledSecondaryFill = styled.div `
-    width: 100%;
-    height: 100%;
-    background: ${props => props.$color};
-    opacity: 0.55;
-    transform: scaleX(0);
-    transform-origin: left center;
-    transition: transform 120ms linear;
-    will-change: transform;
+const StyledSecondaryFill = styled.div `
+    width: 100%;
+    height: 100%;
+    background: ${props => props.$color};
+    opacity: 0.55;
+    transform: scaleX(0);
+    transform-origin: left center;
+    transition: transform 120ms linear;
+    will-change: transform;
 `;
-const StyledFooter = styled.div `
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    margin-top: 18px;
+const StyledFooter = styled.div `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: 18px;
 `;
-const StyledAbortButton = styled.button `
-    padding: 9px 18px;
-    border: 1px solid #d5dbe5;
-    border-radius: 10px;
-    background: #ffffff;
-    color: #374151;
-    font-size: 13px;
-    font-family: inherit;
-    cursor: pointer;
-    transition: background-color 120ms ease, border-color 120ms ease;
-
-    &:hover:not(:disabled) { background: #f3f5f9; border-color: #c3cbd8; }
-    &:active:not(:disabled) { background: #e9edf4; }
-    &:disabled { cursor: default; opacity: 0.55; }
+const StyledAbortButton = styled.button `
+    padding: 9px 18px;
+    border: 1px solid #d5dbe5;
+    border-radius: 10px;
+    background: #ffffff;
+    color: #374151;
+    font-size: 13px;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color 120ms ease, border-color 120ms ease;
+
+    &:hover:not(:disabled) { background: #f3f5f9; border-color: #c3cbd8; }
+    &:active:not(:disabled) { background: #e9edf4; }
+    &:disabled { cursor: default; opacity: 0.55; }
 `;
 const IconOk = () => (_jsx("svg", { width: '13', height: '13', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '3', strokeLinecap: 'round', strokeLinejoin: 'round', children: _jsx("polyline", { points: '20 6 9 17 4 12' }) }));
 const IconWarning = () => (_jsxs("svg", { width: '13', height: '13', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2.4', strokeLinecap: 'round', strokeLinejoin: 'round', children: [_jsx("path", { d: 'M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z' }), _jsx("line", { x1: '12', y1: '9', x2: '12', y2: '13' }), _jsx("line", { x1: '12', y1: '17', x2: '12.01', y2: '17' })] }));
@@ -238,6 +268,14 @@ const TMWaitPanelView = ({ title = '', subtitle = '', cancelable = false, showEt
     const okValueRef = useRef(null);
     const warningValueRef = useRef(null);
     const errorValueRef = useRef(null);
+    const overlayRef = useRef(null);
+    const warningPillRef = useRef(null);
+    const errorPillRef = useRef(null);
+    const warningPopoverRef = useRef(null);
+    const warningListRef = useRef(null);
+    const errorPopoverRef = useRef(null);
+    const errorListRef = useRef(null);
+    const hideTimerRef = useRef();
     const abortRef = useRef(null);
     const secondaryTextRef = useRef(null);
     const secondaryPercentRef = useRef(null);
@@ -249,6 +287,8 @@ const TMWaitPanelView = ({ title = '', subtitle = '', cancelable = false, showEt
             return;
         if (!okValueRef.current || !warningValueRef.current || !errorValueRef.current)
             return;
+        if (!warningPopoverRef.current || !warningListRef.current || !errorPopoverRef.current || !errorListRef.current)
+            return;
         onMount?.({
             confirm: confirmRef.current,
             title: titleRef.current,
@@ -260,15 +300,47 @@ const TMWaitPanelView = ({ title = '', subtitle = '', cancelable = false, showEt
             okValue: okValueRef.current,
             warningValue: warningValueRef.current,
             errorValue: errorValueRef.current,
+            warningPopover: warningPopoverRef.current,
+            warningList: warningListRef.current,
+            errorPopover: errorPopoverRef.current,
+            errorList: errorListRef.current,
             abortButton: abortRef.current,
             secondaryText: secondaryTextRef.current,
             secondaryPercent: secondaryPercentRef.current,
             secondaryFill: secondaryFillRef.current,
         });
         // Montaggio una tantum: da qui in avanti il manager aggiorna il pannello via DOM, non via render.
+        return () => clearTimeout(hideTimerRef.current);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(StyledOverlay, { $zIndex: zIndex, children: _jsxs(StyledCard, { role: 'dialog', "aria-live": 'polite', children: [_jsxs(StyledHeader, { children: [_jsx(StyledToppyClip, { children: _jsx(StyledToppy, { src: toppy, alt: '', draggable: false }) }), _jsxs(StyledHeaderText, { children: [_jsx(StyledTitle, { ref: titleRef, children: title }), _jsx(StyledSubtitle, { ref: subtitleRef, children: subtitle })] })] }), primaryLabel && _jsx(StyledBarLabel, { children: primaryLabel }), _jsxs(StyledPercentRow, { $hasLabel: !!primaryLabel, children: [_jsx(StyledPercent, { ref: percentRef, children: "0.00%" }), _jsxs(StyledCounters, { style: { display: showCounters ? 'flex' : 'none' }, children: [_jsxs(StyledPill, { $color: '#3E7B1C', $background: '#E8F5E0', children: [_jsx(IconOk, {}), _jsx("span", { ref: okValueRef, children: "0" })] }), _jsxs(StyledPill, { $color: '#8A6D00', $background: '#FBF3CF', children: [_jsx(IconWarning, {}), _jsx("span", { ref: warningValueRef, children: "0" })] }), _jsxs(StyledPill, { $color: '#B00F2B', $background: '#FBE1E6', children: [_jsx(IconError, {}), _jsx("span", { ref: errorValueRef, children: "0" })] })] })] }), _jsx(StyledTrack, { children: _jsx(StyledFill, { ref: fillRef, $color: getProgressColor() }) }), _jsxs(StyledTimeRow, { style: { visibility: showEta ? 'visible' : 'hidden' }, children: [_jsx("span", { ref: elapsedRef }), _jsx("span", { ref: remainingRef })] }), showSecondary && secondaryLabel && _jsx(StyledBarLabel, { children: secondaryLabel }), showSecondary &&
-                            _jsxs(StyledSecondary, { $hasLabel: !!secondaryLabel, children: [_jsxs(StyledSecondaryRow, { children: [_jsx(StyledSecondaryText, { ref: secondaryTextRef, children: secondaryText }), _jsx("span", { ref: secondaryPercentRef, children: "0.00%" })] }), _jsx(StyledSecondaryTrack, { children: _jsx(StyledSecondaryFill, { ref: secondaryFillRef, $color: getProgressColor() }) })] }), cancelable &&
-                            _jsx(StyledFooter, { children: _jsx(StyledAbortButton, { ref: abortRef, type: 'button', onClick: onAbort, children: SDKUI_Localizator.Abort }) })] }) }), _jsx(TMWaitPanelConfirm, { ref: confirmRef, zIndex: zIndex + 1, onYes: onConfirmYes, onNo: onConfirmNo })] }));
+    // Popover gestiti via DOM come il resto del pannello: nessuno stato React, nessun render durante il progresso.
+    const hidePopovers = () => {
+        clearTimeout(hideTimerRef.current);
+        if (warningPopoverRef.current)
+            warningPopoverRef.current.style.display = 'none';
+        if (errorPopoverRef.current)
+            errorPopoverRef.current.style.display = 'none';
+    };
+    const scheduleHide = () => {
+        clearTimeout(hideTimerRef.current);
+        hideTimerRef.current = setTimeout(hidePopovers, POPOVER_HIDE_DELAY_MS);
+    };
+    const cancelHide = () => clearTimeout(hideTimerRef.current);
+    /** Apre il popover sotto la pill, allineato a destra. Finche' non arriva un messaggio resta chiuso. */
+    const openPopover = (pill, popover) => {
+        const overlay = overlayRef.current;
+        if (!pill || !popover || !overlay || popover.dataset.empty !== 'false')
+            return;
+        hidePopovers();
+        const overlayRect = overlay.getBoundingClientRect();
+        const pillRect = pill.getBoundingClientRect();
+        const top = pillRect.bottom - overlayRect.top + 6;
+        popover.style.top = `${top}px`;
+        popover.style.right = `${Math.max(12, overlayRect.right - pillRect.right)}px`;
+        popover.style.maxHeight = `${Math.max(80, overlayRect.height - top - 12)}px`;
+        popover.style.display = 'block';
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(StyledOverlay, { ref: overlayRef, $zIndex: zIndex, children: [_jsxs(StyledCard, { role: 'dialog', "aria-live": 'polite', children: [_jsxs(StyledHeader, { children: [_jsx(StyledToppyClip, { children: _jsx(StyledToppy, { src: toppy, alt: '', draggable: false }) }), _jsxs(StyledHeaderText, { children: [_jsx(StyledTitle, { ref: titleRef, children: title }), _jsx(StyledSubtitle, { ref: subtitleRef, children: subtitle })] })] }), primaryLabel && _jsx(StyledBarLabel, { children: primaryLabel }), _jsxs(StyledPercentRow, { $hasLabel: !!primaryLabel, children: [_jsx(StyledPercent, { ref: percentRef, children: "0.00%" }), _jsxs(StyledCounters, { style: { display: showCounters ? 'flex' : 'none' }, children: [_jsxs(StyledPill, { $color: '#3E7B1C', $background: '#E8F5E0', children: [_jsx(IconOk, {}), _jsx("span", { ref: okValueRef, children: "0" })] }), _jsxs(StyledPill, { ref: warningPillRef, $color: '#8A6D00', $background: '#FBF3CF', onMouseEnter: () => openPopover(warningPillRef.current, warningPopoverRef.current), onMouseLeave: scheduleHide, onClick: () => openPopover(warningPillRef.current, warningPopoverRef.current), children: [_jsx(IconWarning, {}), _jsx("span", { ref: warningValueRef, children: "0" })] }), _jsxs(StyledPill, { ref: errorPillRef, $color: '#B00F2B', $background: '#FBE1E6', onMouseEnter: () => openPopover(errorPillRef.current, errorPopoverRef.current), onMouseLeave: scheduleHide, onClick: () => openPopover(errorPillRef.current, errorPopoverRef.current), children: [_jsx(IconError, {}), _jsx("span", { ref: errorValueRef, children: "0" })] })] })] }), _jsx(StyledTrack, { children: _jsx(StyledFill, { ref: fillRef, $color: getProgressColor() }) }), _jsxs(StyledTimeRow, { style: { visibility: showEta ? 'visible' : 'hidden' }, children: [_jsx("span", { ref: elapsedRef }), _jsx("span", { ref: remainingRef })] }), showSecondary && secondaryLabel && _jsx(StyledBarLabel, { children: secondaryLabel }), showSecondary &&
+                                _jsxs(StyledSecondary, { $hasLabel: !!secondaryLabel, children: [_jsxs(StyledSecondaryRow, { children: [_jsx(StyledSecondaryText, { ref: secondaryTextRef, children: secondaryText }), _jsx("span", { ref: secondaryPercentRef, children: "0.00%" })] }), _jsx(StyledSecondaryTrack, { children: _jsx(StyledSecondaryFill, { ref: secondaryFillRef, $color: getProgressColor() }) })] }), cancelable &&
+                                _jsx(StyledFooter, { children: _jsx(StyledAbortButton, { ref: abortRef, type: 'button', onClick: onAbort, children: SDKUI_Localizator.Abort }) })] }), _jsxs(StyledPopover, { ref: warningPopoverRef, $accent: '#E0B400', "data-empty": 'true', onMouseEnter: cancelHide, onMouseLeave: scheduleHide, children: [_jsx(StyledPopoverTitle, { $color: '#8A6D00', children: SDKUI_Localizator.LatestWarnings }), _jsx("ul", { ref: warningListRef })] }), _jsxs(StyledPopover, { ref: errorPopoverRef, $accent: '#B00F2B', "data-empty": 'true', onMouseEnter: cancelHide, onMouseLeave: scheduleHide, children: [_jsx(StyledPopoverTitle, { $color: '#B00F2B', children: SDKUI_Localizator.LatestErrors }), _jsx("ul", { ref: errorListRef })] })] }), _jsx(TMWaitPanelConfirm, { ref: confirmRef, zIndex: zIndex + 1, onYes: onConfirmYes, onNo: onConfirmNo })] }));
 };
 export default TMWaitPanelView;

package/lib/components/choosers/TMDistinctValues.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { calcResponsiveSizes, IconAll, IconDelete, IconPencil, IconRefresh, IconSelected, SDKUI_Localizator } from '../../helper';
 import TMButton from '../base/TMButton';
 import TMDataGrid from '../base/TMDataGrid';
-import { CounterItemKey } from '../base/TMCounterContainer';
+import { CounterItemKey, formatCount } from '../base/TMCounterContainer';
 import { useDeviceType } from '../base/TMDeviceProvider';
 import TMCheckBox from '../editors/TMCheckBox';
 import TMDropDown from '../editors/TMDropDown';
@@ -126,8 +126,8 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
             items.set(CounterItemKey.allItems, {
                 key: CounterItemKey.allItems,
                 show: true,
-                caption: `${counts.returned} restituiti su ${counts.found} trovati`,
-                value: `${counts.returned}/${counts.found}`,
+                caption: `${formatCount(counts.returned)} restituiti su ${formatCount(counts.found)} trovati`,
+                value: `${formatCount(counts.returned)}/${formatCount(counts.found)}`,
                 icon: _jsx(IconAll, {}),
                 order: -1
             });

package/lib/components/choosers/TMDynDataListItemChooser.d.ts

@@ -41,4 +41,4 @@ interface ITMDynDataListItemChooserFormProps extends ITMChooserFormProps<DataLis
     /** Se presente, sono i parametri da passare alla query per recuperare il dataSource  */
     queryParamsDynDataList?: string[];
 }
-export declare const TMDynDataListItemChooserForm: (props: ITMDynDataListItemChooserFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TMDynDataListItemChooserForm: (props: ITMDynDataListItemChooserFormProps) => React.JSX.Element;

package/lib/components/choosers/TMInvoiceRetrieveFormats.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 import { InvoiceRetrieveFormats } from '@topconsultnpm/sdk-ts';
 import { ITMEnumDataBinding } from '../../ts';
-declare const TMInvoiceRetrieveFormats: ({ value, valueOrig, onValueChanged, valuesToExclude, label, width }: ITMEnumDataBinding<InvoiceRetrieveFormats>) => import("react/jsx-runtime").JSX.Element;
+declare const TMInvoiceRetrieveFormats: ({ value, valueOrig, onValueChanged, valuesToExclude, label, width }: ITMEnumDataBinding<InvoiceRetrieveFormats>) => React.JSX.Element;
 export default TMInvoiceRetrieveFormats;