@topconsultnpm/sdkui-react 6.22.0-dev2.9 → 6.22.0-t2

package/lib/components/base/TMPanel.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef, useState, forwardRef, useImperativeHandle } from 'react';
-import styled from 'styled-components';
-import { getAppModuleGradient, IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
+import styled, { css, keyframes } from 'styled-components';
+import { getAppModuleGradient, IconArrowLeft, IconClearButton, IconRefresh, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
-import { Gutters } from '../../utils/theme';
+import { LoadIndicator } from 'devextreme-react/load-indicator';
+import { TMExceptionBoxManager } from './TMPopUp';
+import { Gutters, TMColors } from '../../utils/theme';
 const StyledBackButton = styled.button `
     display: flex;
     align-items: center;
@@ -96,6 +98,110 @@ const StyledPanelContent = styled.div `
         outline: none;
     }
 `;
+// Allineata al TABLET_BREAKPOINT (768) di TMDeviceProvider
+const MOBILE_MEDIA_QUERY = '(max-width: 767.98px)';
+// L'eccedenza da scorrere è "larghezza viewport - larghezza testo", ma nessuna delle due
+// è nota al CSS. La si ottiene componendo due percentuali che si risolvono su box diversi:
+// la track (larga quanto il viewport) va a +100% della PROPRIA larghezza, il testo a -100%
+// della SUA. Le due animazioni hanno stessa durata ed easing, quindi lo scostamento netto
+// in ogni istante è esattamente e(t) * (viewport - testo).
+const panelTitleTrackMarquee = keyframes `
+    0%, 15% { transform: translateX(0); }
+    45%, 55% { transform: translateX(100%); }
+    85%, 100% { transform: translateX(0); }
+`;
+const panelTitleTextMarquee = keyframes `
+    0%, 15% { transform: translateX(0); }
+    45%, 55% { transform: translateX(-100%); }
+    85%, 100% { transform: translateX(0); }
+`;
+// Ritaglia il testo in eccesso: è l'unico box con overflow hidden, la track ci scorre dentro
+const StyledPanelTitleViewport = styled.div `
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0 8px;
+`;
+// Larga quanto il viewport: è il metro con cui il -100% del testo viene compensato.
+const StyledPanelTitleTrack = styled.div `
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+
+    ${({ $marquee }) => $marquee && css `
+        @media ${MOBILE_MEDIA_QUERY} {
+            animation: ${panelTitleTrackMarquee} 10s ease-in-out infinite;
+
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+            }
+        }
+    `}
+`;
+// Senza $marquee resta il troncamento con i puntini di sempre
+const StyledPanelTitle = styled.div `
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    ${({ $marquee }) => $marquee && css `
+        @media ${MOBILE_MEDIA_QUERY} {
+            flex: 0 0 auto;
+            width: max-content;
+            min-width: 100%;
+            max-width: none;
+            overflow: visible;
+            text-overflow: clip;
+            animation: ${panelTitleTextMarquee} 10s ease-in-out infinite;
+
+            @media (prefers-reduced-motion: reduce) {
+                animation: none;
+                width: auto;
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    `}
+`;
+const refreshSpin = keyframes `
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+`;
+// Fa girare l'icona per tutta la durata del ricaricamento
+const StyledRefreshIcon = styled.span `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    ${({ $isSpinning }) => $isSpinning && css `
+        animation: ${refreshSpin} 1s linear infinite;
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+        }
+    `}
+`;
+// Copre il solo contenuto del pannello (StyledPanelContent è position: relative con overflow hidden)
+const StyledPanelLoaderOverlay = styled.div `
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background: rgba(255, 255, 255, 0.65);
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    color: ${TMColors.primaryColor};
+`;
 /**
  * TMPanel - Pannello con supporto Controlled/Uncontrolled
  *
@@ -103,9 +209,27 @@ const StyledPanelContent = styled.div `
  *   - Se NON passata → Uncontrolled: gestione interna dello stato attivo (plug-and-play)
  *   - Se passata → Controlled: il parent gestisce lo stato tramite onActivate
  */
-const TMPanel = forwardRef(({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', isVisible = true, panelID = 'tmpanel', isActive, // Questa prop determinerà la modalità
-onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged }, ref) => {
+const TMPanel = forwardRef(({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, enableTitleMarquee = false, totalItems, displayedItemsCount, toolbar, padding = '5px', isVisible = true, panelID = 'tmpanel', isActive, // Questa prop determinerà la modalità
+onRefresh, isRefreshing, onActivate, onBack, backCaption = SDKUI_Localizator.Back, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged }, ref) => {
     const [isMaximized, setIsMaximized] = useState(false);
+    const [isRefreshingInternal, setIsRefreshingInternal] = useState(false);
+    // Il loader compare sia per il refresh dalla testata sia per i caricamenti segnalati dal contenuto
+    const isBusy = isRefreshing || isRefreshingInternal;
+    const handleRefresh = useCallback(async () => {
+        if (isRefreshingInternal)
+            return;
+        setIsRefreshingInternal(true);
+        // Il finally garantisce che loader e rotellina si fermino anche se il ricaricamento fallisce
+        try {
+            await onRefresh?.();
+        }
+        catch (ex) {
+            TMExceptionBoxManager.show({ exception: ex });
+        }
+        finally {
+            setIsRefreshingInternal(false);
+        }
+    }, [isRefreshingInternal, onRefresh]);
     // Detect device type (e.g., mobile or desktop)
     const deviceType = useDeviceType();
     const isMobile = deviceType === DeviceType.MOBILE;
@@ -157,6 +281,7 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
             handleFocusUncontrolled();
         }
     };
+    const titleMarqueeKey = enableTitleMarquee && (typeof title === 'string' || typeof title === 'number') ? String(title) : undefined;
     // handler for external maximize management
     const handleMaximize = () => {
         setIsMaximized(prevState => {
@@ -188,31 +313,19 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     flexShrink: 0
-                                }, children: _jsxs(StyledBackButton, { "$isActive": currentIsActive, onClick: () => onBack ? onBack() : null, title: SDKUI_Localizator.Back, children: [_jsx(IconArrowLeft, {}), !isMobile && _jsx("span", { children: SDKUI_Localizator.Back })] }) }), _jsx("div", { style: {
-                                    flex: 1,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'flex-start',
-                                    minWidth: 0,
-                                    overflow: 'hidden',
-                                    padding: '0 8px'
-                                }, children: _jsxs("div", { style: {
-                                        whiteSpace: 'nowrap',
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        margin: 0
-                                    }, children: [title, isPositiveNumber(displayedItemsCount) && isPositiveNumber(totalItems)
-                                            ? ` (${displayedItemsCount} / ${totalItems})`
-                                            : isPositiveNumber(totalItems)
-                                                ? ` (${totalItems})`
-                                                : ''] }) }), _jsxs("div", { style: {
+                                }, children: _jsxs(StyledBackButton, { "$isActive": currentIsActive, onClick: () => onBack ? onBack() : null, title: backCaption, children: [_jsx(IconArrowLeft, {}), !isMobile && _jsx("span", { children: backCaption })] }) }), _jsx(StyledPanelTitleViewport, { children: _jsx(StyledPanelTitleTrack, { "$marquee": enableTitleMarquee, children: _jsxs(StyledPanelTitle, { "$marquee": enableTitleMarquee, children: [title, isPositiveNumber(displayedItemsCount) && isPositiveNumber(totalItems)
+                                                ? ` (${displayedItemsCount} / ${totalItems})`
+                                                : isPositiveNumber(totalItems)
+                                                    ? ` (${totalItems})`
+                                                    : ''] }) }, titleMarqueeKey) }), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     gap: '5px',
                                     flexShrink: 0
-                                }, children: [toolbar, allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
+                                }, children: [toolbar, onRefresh && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Refresh, disabled: isBusy, icon: _jsx(StyledRefreshIcon, { "$isSpinning": isBusy, children: _jsx(IconRefresh, {}) }), btnStyle: 'icon', onClick: handleRefresh }), allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
                                             ? _jsx(IconWindowMinimize, { fontSize: 16 })
-                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsx(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, children: children })] }));
+                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsxs(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, children: [children, isBusy &&
+                        _jsxs(StyledPanelLoaderOverlay, { children: [_jsx(LoadIndicator, { height: 40, width: 40 }), _jsx("div", { children: SDKUI_Localizator.Loading })] })] })] }));
 });
 export default TMPanel;

package/lib/components/base/TMPopUp.js

@@ -60,6 +60,9 @@ export const sanitizeException = (exception) => {
     catch {
         return exception;
     }
+    if (plain && typeof plain === 'object' && !Array.isArray(plain) && plain.message === undefined && typeof exception.message === 'string') {
+        plain.message = exception.message;
+    }
     return redactSensitiveValue(plain);
 };
 const StyledExeptionToolbar = styled.div `

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

@@ -1,3 +1,4 @@
+import React from 'react';
 interface ITMSpinner {
     backgroundColor?: string;
     fontSize?: string;
@@ -7,7 +8,7 @@ interface ITMSpinner {
     onCancel?: () => void;
     cancelText?: string;
 }
-declare const Spinner: ({ backgroundColor, description, fontSize, width, flat, onCancel, cancelText }: ITMSpinner) => import("react/jsx-runtime").JSX.Element;
+declare const Spinner: ({ backgroundColor, description, fontSize, width, flat, onCancel, cancelText }: ITMSpinner) => React.JSX.Element;
 declare class TMSpinner {
     static show({ description, backgroundColor, fontSize, flat, onCancel, cancelText }?: ITMSpinner): void;
     static hide(): void;

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

@@ -9,6 +9,7 @@ interface ITMTooltipProps extends ITooltipOptions {
     hideAfterDelay?: boolean;
     parentStyle?: React.CSSProperties;
     childStyle?: React.CSSProperties;
+    allowContentInteraction?: boolean;
 }
-declare const TMTooltip: ({ children, position, content, hideAfterDelay, parentStyle, childStyle }: 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/TMTooltip.js

@@ -1,20 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Tooltip } from 'devextreme-react/tooltip';
 import { genUniqueId } from '../../helper';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
-const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle }) => {
+/** Tempo per spostare il mouse dall'elemento al contenuto del tooltip, quando è interattivo */
+const HIDE_DELAY_MS = 400;
+const TMTooltip = ({ children, position, content, hideAfterDelay, parentStyle, childStyle, allowContentInteraction = false }) => {
     const [showTooltip, setShowTooltip] = useState(false);
-    const [id, setID] = useState('');
-    useEffect(() => { setID(genUniqueId()); }, [children]);
+    const [id] = useState(() => genUniqueId());
+    const hideTimerRef = useRef();
     useEffect(() => {
-        window.addEventListener('click', () => setShowTooltip(false));
-        return () => window.removeEventListener('click', () => setShowTooltip(false));
+        const hide = () => setShowTooltip(false);
+        window.addEventListener('click', hide);
+        return () => window.removeEventListener('click', hide);
     }, []);
+    useEffect(() => { return () => clearTimeout(hideTimerRef.current); }, []);
     const deviceType = useDeviceType();
-    return (_jsxs("div", { style: parentStyle, children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content', ...childStyle }, onMouseEnter: () => { setShowTooltip(true); }, onMouseLeave: () => { setShowTooltip(false); }, onTouchStart: () => { setShowTooltip(true); }, onClick: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
+    const cancelHide = () => clearTimeout(hideTimerRef.current);
+    const show = () => { cancelHide(); setShowTooltip(true); };
+    const hide = () => {
+        cancelHide();
+        if (!allowContentInteraction) {
+            setShowTooltip(false);
+            return;
+        }
+        hideTimerRef.current = setTimeout(() => setShowTooltip(false), HIDE_DELAY_MS);
+    };
+    return (_jsxs("div", { style: parentStyle, children: [_jsx("div", { id: `idContainerTooltip${id}`, style: { display: 'flex', alignItems: 'center', height: 'max-content', width: 'max-content', ...childStyle }, onMouseEnter: show, onMouseLeave: hide, onTouchStart: show, onClick: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
                     return; setTimeout(() => { setShowTooltip(false); }, 1500); }, onTouchEnd: () => { if (deviceType === DeviceType.DESKTOP || !hideAfterDelay)
                     return; setTimeout(() => { setShowTooltip(false); }, 1500); }, children: children }), content &&
-                _jsx(Tooltip, { target: `#idContainerTooltip${id}`, hideOnOutsideClick: true, visible: showTooltip, position: position ?? 'bottom', onHidden: () => setShowTooltip(false), children: content })] }));
+                _jsx(Tooltip, { target: `#idContainerTooltip${id}`, hideOnOutsideClick: true, visible: showTooltip, position: position ?? 'bottom', onHidden: () => setShowTooltip(false), children: allowContentInteraction
+                        ? _jsx("div", { style: { pointerEvents: 'all' }, onMouseEnter: cancelHide, onMouseLeave: hide, children: content })
+                        : content })] }));
 };
 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;