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

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ValidationItem } from '@topconsultnpm/sdk-ts';
 export interface ITMTabProps {
     title: string;
@@ -7,14 +8,14 @@ export declare const TMTab: ({ label, propsToBeValidated, children }: {
     label?: string;
     propsToBeValidated?: string[] | undefined;
     children?: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const TMTabItemBadge: ({ vil }: {
     vil: ValidationItem[];
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 declare const TMTabGroup: ({ children, fontSize, validationItems, onTabIndexChanged }: {
     onTabIndexChanged?: (e: number) => void;
     children: any;
     fontSize?: string;
     validationItems?: ValidationItem[];
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default TMTabGroup;

package/lib/components/base/TMTabControl.js

@@ -92,106 +92,106 @@ const VARIANTS = {
     })
 };
 /** 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};
+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;
+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) {
@@ -202,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+\)$/;

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) => import("react/jsx-runtime").JSX.Element;
+declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction }: ITMTooltipProps) => React.JSX.Element;
 export default TMTooltip;

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

@@ -29,13 +29,19 @@ 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) => import("react/jsx-runtime").JSX.Element;
+declare const TMTreeView: ({ dataSource, focusedItem, selectedItems, allowMultipleSelection, onDataChanged, calculateItemsForNode, itemRender, onNodeUpdate, onFocusedItemChanged, onSelectionChanged, shouldDelayFocusOnEvent, onItemContextMenu, autoSelectChildren, itemsPerPage, showLoadMoreButton, enableVirtualization }: ITMTreeViewProps) => React.JSX.Element;
 export default TMTreeView;
-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"> & {
+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;
+}, {
     $isSelected?: boolean;
-}, 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;
+}>> & 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;

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

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

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

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

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ITMLayoutContainerProps } from './TMLayout';
 interface ITMWaitPanelProps {
     title?: string;
@@ -14,7 +15,7 @@ interface ITMWaitPanelProps {
     onAbortClick?: (abortController: AbortController | undefined) => void;
     useHighZIndex?: boolean;
 }
-export declare const TMWaitPanel: (props: ITMWaitPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TMWaitPanel: (props: ITMWaitPanelProps) => React.JSX.Element;
 interface ITMLayoutWaitingContainerProps extends ITMLayoutContainerProps {
     showWaitPanel?: boolean;
     waitPanelTitle?: string;
@@ -30,5 +31,5 @@ interface ITMLayoutWaitingContainerProps extends ITMLayoutContainerProps {
     abortController?: AbortController;
     usePortal?: boolean;
 }
-export declare const TMLayoutWaitingContainer: ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, usePortal, gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutWaitingContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TMLayoutWaitingContainer: ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, usePortal, gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutWaitingContainerProps) => React.JSX.Element;
 export {};

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

@@ -21,6 +21,8 @@ export interface ITMWaitPanelOptions {
     /** Didascalie fisse sopra le due barre, es. "Documenti" e "File corrente". Omesse: nessuna riga. */
     primaryLabel?: string;
     secondaryLabel?: string;
+    /** Quanti messaggi di warning / errore mostrare nel popover delle pill. Default: 5. */
+    maxVisibleMessages?: number;
     /** Invocato quando l'utente interrompe */
     onAbort?: () => void;
 }
@@ -67,10 +69,10 @@ export interface ITMWaitPanelHandle {
     setSubtitle(subtitle: string | undefined): void;
     /** Incrementa il contatore verde (default +1). */
     ok(delta?: number): void;
-    /** Incrementa il contatore giallo (default +1). */
-    warning(delta?: number): void;
-    /** Incrementa il contatore rosso (default +1). */
-    error(delta?: number): void;
+    /** Incrementa il contatore giallo (default +1). Il messaggio, se presente, finisce nel popover della pill. */
+    warning(delta?: number, message?: string): void;
+    /** Incrementa il contatore rosso (default +1). Il messaggio, se presente, finisce nel popover della pill. */
+    error(delta?: number, message?: string): void;
     /** Aggiornamento cumulativo: i contatori qui sono valori assoluti, non incrementi. */
     update(patch: ITMWaitPanelUpdate): void;
     /** Aggiorna la barra secondaria. Senza `showSecondary` non ha effetto. */
@@ -104,6 +106,12 @@ declare class TMWaitPanelInstance implements ITMWaitPanelHandle {
     private _secondaryValue;
     private _secondaryMax;
     private _secondaryText;
+    private readonly maxVisibleMessages;
+    private readonly _warningMessages;
+    private readonly _errorMessages;
+    private warningMessageTotal;
+    private errorMessageTotal;
+    private messagesDirty;
     private lastPercentText;
     private lastSubtitleText;
     private lastElapsedText;
@@ -129,8 +137,8 @@ declare class TMWaitPanelInstance implements ITMWaitPanelHandle {
     setTitle: (title: string) => void;
     setSubtitle: (subtitle: string | undefined) => void;
     ok: (delta?: number) => void;
-    warning: (delta?: number) => void;
-    error: (delta?: number) => void;
+    warning: (delta?: number, message?: string) => void;
+    error: (delta?: number, message?: string) => void;
     setSecondary: (patch: ITMWaitPanelSecondaryUpdate) => void;
     update: (patch: ITMWaitPanelUpdate) => void;
     close: () => void;
@@ -148,6 +156,8 @@ declare class TMWaitPanelInstance implements ITMWaitPanelHandle {
     private schedule;
     /** Riversa sul DOM lo stato corrente (barra, percentuale, testi, contatori), saltando cio' che non e' cambiato. */
     private flush;
+    /** 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. */
+    private flushMessages;
     /** Riversa sul DOM la seconda barra. Invocata solo quando la view l'ha renderizzata. */
     private flushSecondary;
     /** Aggiorna la riga dei tempi: trascorso al netto delle pause e stima del rimanente. */