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

package/lib/components/base/TMFileManagerThumbnailItems.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
-import { colors, TMFileItemContainer } from './TMFileManagerUtils';
+import { colors, getFileItemLinkUrl, TMFileItemContainer } from './TMFileManagerUtils';
 import { formatBytes, Globalization, renderHighlightedText, SDKUI_Localizator } from '../../helper';
 import TMTooltip from './TMTooltip';
 import TMDcmtIcon from '../features/documents/TMDcmtIcon';
@@ -35,6 +35,16 @@ const TMFileManagerThumbnailItems = (props) => {
             }
         }
     }, [items, lastSelectedIndexRef.current]);
+    // Apre l'item: i link non hanno un documento da aprire, si apre direttamente l'url in un nuovo tab
+    const openFileItem = useCallback((item) => {
+        const linkUrl = getFileItemLinkUrl(item);
+        if (linkUrl) {
+            window.open(linkUrl, '_blank', 'noopener,noreferrer');
+            return;
+        }
+        if (onDoubleClick)
+            onDoubleClick(item);
+    }, [onDoubleClick]);
     const handleKeyDown = useCallback((event) => {
         event.preventDefault();
         if (event.key === 'ArrowDown' && lastSelectedIndexRef.current !== null) {
@@ -44,21 +54,21 @@ const TMFileManagerThumbnailItems = (props) => {
                 lastSelectedIndexRef.current = currentIndex;
             }
         }
-        if (event.key === 'Enter' && selectedFiles.length === 1 && onDoubleClick) {
+        if (event.key === 'Enter' && selectedFiles.length === 1) {
             const currentItem = items.find(item => item.id === selectedFiles[0].id);
             if (currentItem)
-                onDoubleClick(currentItem);
+                openFileItem(currentItem);
         }
-    }, [items, lastSelectedIndexRef.current, selectedFiles]);
+    }, [items, lastSelectedIndexRef.current, selectedFiles, openFileItem]);
     // Double click handler with timeout cleanup
     const onDoubleClickHandler = useCallback((item) => {
         if (clickTimeoutRef.current) {
             clearTimeout(clickTimeoutRef.current);
             clickTimeoutRef.current = null;
         }
-        if (onDoubleClick && item)
-            onDoubleClick(item);
-    }, [onDoubleClick]);
+        if (item)
+            openFileItem(item);
+    }, [openFileItem]);
     const onClickHandler = useCallback((e, item) => {
         // If a click timeout is already running, clear it (distinguish between single and double clicks)
         if (clickTimeoutRef.current) {
@@ -144,8 +154,8 @@ const TMFileManagerThumbnailItems = (props) => {
                 bgHoverColor = isSelected ? colors.PRIMARY_BLUE : "#fff59d";
             }
             const editLockTooltipText = _jsxs(_Fragment, { children: [_jsxs("div", { style: { textAlign: "center" }, children: [editMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-edit" }), SDKUI_Localizator.CurrentUserExtract] })), lockMode && (_jsxs(_Fragment, { children: [_jsx("i", { style: { fontSize: "18px", color: colors.MEDIUM_GREEN, fontWeight: "bold" }, className: "dx-icon-lock" }), SDKUI_Localizator.ExtractedFromOtherUser] }))] }), _jsx("hr", {}), _jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedBy }), ": ", findCheckOutUserName(item) ?? '-', " (ID: ", item.checkOutUserID, ")"] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.ExtractedOn }), ": ", Globalization.getDateTimeDisplayValue(item.checkoutDate?.toString())] })] }), _jsx("hr", {}), _jsx("ul", { children: _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Version }), ": ", item.version ?? 1] }) }), _jsx("hr", {}), _jsxs("ul", { children: [_jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.Extension }), ": ", item.ext] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.CreationTime }), ": ", Globalization.getDateTimeDisplayValue(item.creationTime?.toString())] }), _jsxs("li", { children: ["- ", _jsx("span", { style: { fontWeight: 'bold' }, children: SDKUI_Localizator.LastUpdateTime }), ": ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime?.toString())] })] })] })] });
-            const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", item.id ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "DID:" }), " ", item.did ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "TID:" }), " ", item.tid ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", item.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Extension, ":"] }), " ", item.ext ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", item.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", item.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(item.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime)] })] }));
-            return _jsx(TMFileItemContainer, { className: "tm-file-manager-thumbnail-items", ref: containerRef, id: "tm-file-manager-thumbnail-item-" + item.id.toString(), "$backgroundColor": bgColor, "$bgHoverColor": bgHoverColor, "$textColor": textColor, onDoubleClick: () => onDoubleClickHandler(item), onContextMenu: (e) => onContextMenu(e, item), onClick: (e) => onClickHandler(e, item), tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { marginRight: '16px', flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center' }, children: [_jsx("div", { style: { width: '40px' }, children: _jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: 'openInNewWindow', tooltipContent: tooltipContent, isSigned: item.isSigned }) }), _jsxs("div", { style: { display: 'flex', justifyContent: 'center', width: '40px' }, children: [editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-lock" }) })] })] }), _jsxs("div", { style: { overflow: 'hidden', minWidth: 0 }, children: [_jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: '1rem', fontWeight: "bold" }, children: _jsx(TMTooltip, { parentStyle: { overflow: 'hidden' }, childStyle: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block' }, children: renderHighlightedText(item.name, searchText, isSelected) }) }), _jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: 'calc(1rem - 1px)' }, children: formatBytes(item.size ?? 0) })] })] }), item.version && (_jsx("div", { style: { flexShrink: 0, marginLeft: '12px', whiteSpace: 'nowrap' }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: _jsx("div", { style: { border: "2px solid #28a745", backgroundColor: "#28a745", color: "#ffffff", borderRadius: '50%', width: '30px', height: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: 'bold' }, children: item.version }) }) }))] }) }, "tm-file-manager-thumbnail-item-" + item.id);
+            const tooltipContent = (_jsxs("div", { style: { textAlign: 'left' }, children: [_jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "ID:" }), " ", item.id ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "DID:" }), " ", item.did ?? '-'] }), _jsxs("div", { children: [_jsx("span", { style: { fontWeight: 'bold' }, children: "TID:" }), " ", item.tid ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Name, ":"] }), " ", item.name ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Extension, ":"] }), " ", item.ext ?? '-'] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Author, ":"] }), " ", item.updaterName ?? '-'] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Version, ":"] }), " ", item.version] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Size, ":"] }), " ", formatBytes(item.size ?? 0)] }), _jsx("hr", {}), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.CreationTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.creationTime)] }), _jsxs("div", { children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.LastUpdateTime, ":"] }), " ", Globalization.getDateTimeDisplayValue(item.lastUpdateTime)] }), item.description && _jsxs(_Fragment, { children: [_jsx("hr", {}), _jsxs("div", { style: { maxWidth: '400px', overflowWrap: 'anywhere' }, children: [_jsxs("span", { style: { fontWeight: 'bold' }, children: [SDKUI_Localizator.Description, ":"] }), " ", item.description] })] })] }));
+            return _jsx(TMFileItemContainer, { className: "tm-file-manager-thumbnail-items", ref: containerRef, id: "tm-file-manager-thumbnail-item-" + item.id.toString(), $backgroundColor: bgColor, $bgHoverColor: bgHoverColor, $textColor: textColor, onDoubleClick: () => onDoubleClickHandler(item), onContextMenu: (e) => onContextMenu(e, item), onClick: (e) => onClickHandler(e, item), tabIndex: 0, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { marginRight: '16px', flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center' }, children: [_jsx("div", { style: { width: '40px' }, children: _jsx(TMDcmtIcon, { tid: item.tid, did: item.did, fileExtension: item.ext, downloadMode: getFileItemLinkUrl(item) !== undefined ? 'none' : 'openInNewWindow', tooltipContent: tooltipContent, isSigned: item.isSigned }) }), _jsxs("div", { style: { display: 'flex', justifyContent: 'center', width: '40px' }, children: [editMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-edit" }) }), lockMode && _jsx(TMTooltip, { content: editLockTooltipText, children: _jsx("i", { style: { fontSize: "18px", color: !isSelected ? colors.MEDIUM_GREEN : '#fff', fontWeight: "bold" }, className: "dx-icon-lock" }) })] })] }), _jsxs("div", { style: { overflow: 'hidden', minWidth: 0 }, children: [_jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: '1rem', fontWeight: "bold" }, children: _jsx(TMTooltip, { parentStyle: { overflow: 'hidden' }, childStyle: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block' }, children: renderHighlightedText(item.name, searchText, isSelected) }) }), _jsx("div", { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', display: 'block', fontSize: 'calc(1rem - 1px)' }, children: formatBytes(item.size ?? 0) })] })] }), item.version && (_jsx("div", { style: { flexShrink: 0, marginLeft: '12px', whiteSpace: 'nowrap' }, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Version, children: _jsx("div", { style: { border: "2px solid #28a745", backgroundColor: "#28a745", color: "#ffffff", borderRadius: '50%', width: '30px', height: '30px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '12px', fontWeight: 'bold' }, children: item.version }) }) }))] }) }, "tm-file-manager-thumbnail-item-" + item.id);
         }) });
 };
 export default TMFileManagerThumbnailItems;

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

@@ -26,6 +26,7 @@ export interface FileItem {
     version?: number;
     isSigned?: number;
 }
+export declare const resolveFileItemUserNames: (item: FileItem, users: Array<UserDescriptor>) => FileItem;
 export interface TMFileManagerTreeViewDirectory {
     id: number;
     text: string;
@@ -47,15 +48,14 @@ export declare const colors: {
     LIGHT_YELLOW: string;
     MEDIUM_GREEN: string;
 };
-export declare const TMFileItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor" | "$textColor" | "$bgHoverColor"> & {
+export declare const TMFileItemContainer: 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;
+}, {
     $backgroundColor?: string;
     $textColor?: string;
     $bgHoverColor?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$backgroundColor" | "$textColor" | "$bgHoverColor"> & {
-    $backgroundColor?: string;
-    $textColor?: string;
-    $bgHoverColor?: string;
-}, never>>> & string;
+}>> & string;
+export declare const getFileItemLinkUrl: (fileItem: FileItem | undefined) => string | undefined;
 export declare const findFileItems: (items: Array<FileItem>, id: number) => FileItem | undefined;
 export declare const setFolderTreeViewItems: (items: Array<FileItem>) => Array<TMFileManagerTreeViewDirectory>;
 export declare const buildFolderHierarchy: (fileSystemTree: WGTreeDescriptor | undefined, draftsFile: SearchResultDescriptor | undefined, archivedDocuments: Array<SearchResultDescriptor> | undefined, participants: Array<UserDescriptor> | undefined) => {

package/lib/components/base/TMFileManagerUtils.js

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { associateColumnsToRows, SIGNATURE_EXTENSIONS } from "../../helper";
+import { associateColumnsToRows, SIGNATURE_EXTENSIONS, WHATS_NEWS_FILE_NAME, WHATS_NEWS_LINK_URL } from "../../helper";
 /**
  * Verifica se un'estensione indica che il file è firmato digitalmente.
  * Controlla se l'estensione (es. "pdf.p7m", ".p7m", "p7m") contiene
@@ -12,6 +12,22 @@ export const isSigned = (ext) => {
     const parts = normalized.split('.');
     return parts.some(part => SIGNATURE_EXTENSIONS.has(part));
 };
+// Completa i nomi utente (autore e utente di check-out) di un FileItem quando mancano, risolvendoli dagli ID.
+export const resolveFileItemUserNames = (item, users) => {
+    if (!users || users.length === 0)
+        return item;
+    const isValidUserID = (id) => id !== undefined && Number.isFinite(id) && id > 0;
+    const needsUpdaterName = !item.updaterName && isValidUserID(item.updaterID);
+    const needsCheckOutUserName = !item.checkOutUserName && isValidUserID(item.checkOutUserID);
+    if (!needsUpdaterName && !needsCheckOutUserName)
+        return item;
+    const resolved = { ...item };
+    if (needsUpdaterName)
+        resolved.updaterName = users.find(user => user.id === item.updaterID)?.name ?? item.updaterName;
+    if (needsCheckOutUserName)
+        resolved.checkOutUserName = users.find(user => user.id === item.checkOutUserID)?.name ?? item.checkOutUserName;
+    return resolved;
+};
 export var TMFileManagerPageSize;
 (function (TMFileManagerPageSize) {
     TMFileManagerPageSize[TMFileManagerPageSize["Small"] = 30] = "Small";
@@ -47,6 +63,26 @@ export const TMFileItemContainer = styled.div `
         outline: none;
     }
 `;
+// Confronto case-insensitive con il nome del file
+const isWhatsNewsFileName = (name) => (name ?? '').toLowerCase() === WHATS_NEWS_FILE_NAME;
+// Ritorna l'url del link associato al file: un file il cui metadato "description" contiene un url http/https
+// e' un link, quindi non ha un file/documento da scaricare o da aprire nella form: si apre direttamente l'url
+export const getFileItemLinkUrl = (fileItem) => {
+    if (!fileItem || fileItem.isDirectory)
+        return undefined;
+    if (isWhatsNewsFileName(fileItem.name))
+        return WHATS_NEWS_LINK_URL;
+    const value = fileItem.description?.trim();
+    if (!value)
+        return undefined;
+    try {
+        const url = new URL(value);
+        return (url.protocol === 'http:' || url.protocol === 'https:') ? url.href : undefined;
+    }
+    catch {
+        return undefined;
+    }
+};
 // Function to find a specific file or folder based on its ID (used for finding nested items)
 export const findFileItems = (items, id) => {
     for (let item of items) {

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

@@ -22,10 +22,10 @@ declare const TMSplitterLayout: ({ animation, showSeparator, separatorColor, ove
     animation?: boolean;
     separatorColor?: string;
     separatorActiveColor?: string;
-    overflow?: "hidden" | "visible";
+    overflow?: 'hidden' | 'visible';
     showSeparator?: boolean;
     separatorSize?: number;
-    direction?: "horizontal" | "vertical";
+    direction?: 'horizontal' | 'vertical';
     children?: React.ReactNode;
     start?: string[];
     min?: string[];

package/lib/components/base/TMLayout.js

@@ -51,7 +51,7 @@ const StyledCardContext = styled.div `
     padding: ${props => props.$padding ? '5px' : '0'};
 `;
 const TMCard = ({ borderRadius = true, onClick, scrollX = false, scrollY = false, width = '100%', height = '100%', children, title = '', fontSize = FontSize.defaultFontSize, fontWeight, showBorder = true, padding = true, scroll = false, backgroundColor, color }) => {
-    return (_jsxs("div", { onClick: onClick, style: { width: width, height: height, fontSize: fontSize, overflow: 'hidden' }, children: [title.length > 0 && _jsx(StyledCardHeader, { "$borderRadius": borderRadius, "$fontWeight": fontWeight, "$backgroundColor": backgroundColor, "$color": color, children: title }), _jsxs(StyledCardContext, { "$scrollX": scrollX, "$scrollY": scrollY, "$scroll": scroll, "$padding": padding, "$showHeader": title.length > 0, style: { border: showBorder ? '2px solid #CAD9EB' : 'none', borderBottomLeftRadius: showBorder ? '3px' : '0', borderBottomRightRadius: showBorder ? '3px' : '0' }, children: [" ", children, " "] })] }));
+    return (_jsxs("div", { onClick: onClick, style: { width: width, height: height, fontSize: fontSize, overflow: 'hidden' }, children: [title.length > 0 && _jsx(StyledCardHeader, { $borderRadius: borderRadius, $fontWeight: fontWeight, $backgroundColor: backgroundColor, $color: color, children: title }), _jsxs(StyledCardContext, { $scrollX: scrollX, $scrollY: scrollY, $scroll: scroll, $padding: padding, $showHeader: title.length > 0, style: { border: showBorder ? '2px solid #CAD9EB' : 'none', borderBottomLeftRadius: showBorder ? '3px' : '0', borderBottomRightRadius: showBorder ? '3px' : '0' }, children: [" ", children, " "] })] }));
 };
 const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorColor = '#e4e4e4', overflow = 'hidden', separatorActiveColor = 'orange', separatorSize = 4, direction = 'horizontal', children, start = ['50%', '50%'], min = ['150px', '150px'], }) => {
     function isReactFragment(variableToInspect) {
@@ -191,11 +191,11 @@ const TMSplitterLayout = ({ animation = false, showSeparator = true, separatorCo
     return (_jsxs("div", { ref: containerRef, style: { display: 'flex', width: '100%', height: '100%', flexDirection: direction === 'vertical' ? 'column' : 'row', position: 'relative', }, children: [_jsxs("div", { style: { position: 'relative', transition: animation ? 'ease 300ms' : 'none', overflow: overflow, height: direction === 'vertical' ? start[0] : '100%', width: direction === 'horizontal' ? start[0] : '100%', minHeight: direction === 'vertical' ? min[0] : '100%', minWidth: direction === 'horizontal' ? min[0] : '100%', }, ref: firstDivRef, children: [" ", React.Children.toArray(children)[0], " ", isResizing && _jsx("div", { style: { position: 'absolute', top: '0px', left: '0px', zIndex: 1000, backgroundColor: 'transparent', width: '100%', height: '100%', pointerEvents: 'none' } }), " "] }), !isFrag && (_jsx("div", { ref: sepRef, style: { display: showSeparator ? 'block' : 'none', backgroundColor: separatorBgColor, cursor: direction === 'vertical' ? 's-resize' : 'e-resize', minWidth: direction === 'horizontal' ? `${separatorSize}px` : '100%', minHeight: direction === 'vertical' ? `${separatorSize}px` : '100%', } })), _jsxs("div", { style: { position: 'relative', transition: animation ? 'ease 300ms' : 'none', overflow: overflow, height: direction === 'vertical' ? start[1] : '100%', width: direction === 'horizontal' ? start[1] : '100%', minHeight: direction === 'vertical' ? min[1] : '100%', minWidth: direction === 'horizontal' ? min[1] : '100%', }, ref: secondDivRef, children: [" ", React.Children.toArray(children)[1], " ", isResizing && _jsx("div", { style: { position: 'absolute', top: '0px', left: '0px', zIndex: 1000, backgroundColor: 'transparent', width: '100%', height: '100%', pointerEvents: 'none' } }), " "] })] }));
 };
 const TMLayoutItem = ({ onClick, children, width = '100%', minWidth, maxWidth, maxHeight, height = '100%', minHeight }) => {
-    return (_jsx(StyledLayoutItem, { onClick: onClick, "$height": height, "$maxHeight": maxHeight, "$minHeight": minHeight, "$width": width, "$minWidth": minWidth, "$maxWidth": maxWidth, children: children }));
+    return (_jsx(StyledLayoutItem, { onClick: onClick, $height: height, $maxHeight: maxHeight, $minHeight: minHeight, $width: width, $minWidth: minWidth, $maxWidth: maxWidth, children: children }));
 };
 const TMLayoutContainer = ({ gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical', onContextMenu }) => {
     const renderedEls = () => { return (React.Children.map(children, child => (child))); };
-    return (_jsxs(StyledLayoutContainer, { "$alignItems": alignItems, "$justifyContent": justifyContent, onClick: onClick, onContextMenu: onContextMenu, "$direction": direction, style: { gap: gap }, children: [" ", renderedEls(), " "] }));
+    return (_jsxs(StyledLayoutContainer, { $alignItems: alignItems, $justifyContent: justifyContent, onClick: onClick, onContextMenu: onContextMenu, $direction: direction, style: { gap: gap }, children: [" ", renderedEls(), " "] }));
 };
 export { TMCard, TMLayoutItem, TMSplitterLayout };
 export default TMLayoutContainer;

package/lib/components/base/TMList.js

@@ -48,7 +48,7 @@ const TMList = ({ items }) => {
             onClick(); // Call the item's onClick handler if provided
     };
     return (_jsx(StyledListContainer, { children: items?.map((item, index) => {
-            return (_jsxs(StyledListItem, { "$isSelected": selectedIndex === index, onClick: () => handleItemClick(index, item.onClick), children: [_jsx(StyledIconWrapper, { children: item.icon }), _jsx("span", { children: item.text })] }, index));
+            return (_jsxs(StyledListItem, { $isSelected: selectedIndex === index, onClick: () => handleItemClick(index, item.onClick), children: [_jsx(StyledIconWrapper, { children: item.icon }), _jsx("span", { children: item.text })] }, index));
         }) }));
 };
 export default TMList;

package/lib/components/base/TMListView.js

@@ -265,7 +265,7 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
     }
     // map memo
     const memoList = useMemo(() => currentDataSource.map((data, index) => {
-        return (_jsx(StyledListItem, { "$isSelected": isSelected(data), "$color": getContrastColor(customColor).bgColor, "$textColor": getContrastColor(customColor).textColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => onItemDblClick && onItemDblClick(data), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: 5, padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: isSelected(data) ? 'red' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", exprKey + ' : ' + data[exprKey], " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index));
+        return (_jsx(StyledListItem, { $isSelected: isSelected(data), $color: getContrastColor(customColor).bgColor, $textColor: getContrastColor(customColor).textColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => onItemDblClick && onItemDblClick(data), children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', gap: 5, padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: isSelected(data) ? 'red' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", exprKey + ' : ' + data[exprKey], " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index));
     }), [currentDataSource, selectedItem, localShowId, customColor]);
     const groupedMemoList = useMemo(() => groupKeys.map((key, index) => {
         const groupingText = () => {
@@ -292,7 +292,7 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
                                     :
                                         _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: getContrastColor(customColor).textColor, color: getContrastColor(customColor).bgColor, boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] })
                                 :
-                                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: getContrastColor(customColor).textColor, color: getContrastColor(customColor).bgColor, boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] }), _jsxs("div", { style: { cursor: 'pointer' }, onClick: () => { let arr = [...openList]; arr[index] = !arr[index]; setOpenList(arr); }, children: [" ", openList[index] ? _jsx(IconUp, { fontSize: 12 }) : _jsx(IconDown, { fontSize: 12 }), " "] })] }) }), openList[index] && _jsx("div", { style: { width: '100%', height: '100%' }, children: groupByKey(currentDataSource, grouping)[key].map((data, index2) => (_jsx(StyledListItem, { "$isSelected": data === selectedItem, "$color": getContrastColor(customColor).bgColor, "$textColor": getContrastColor(customColor).textColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => { onItemDblClick && onItemDblClick(data); }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'column', padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: data === selectedItem ? 'red' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", 'ID: ' + data.id, " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index2))) })] }, index));
+                                    _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 10 }, children: [_jsx("p", { children: groupingText() }), _jsx("div", { style: { width: '16px', height: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: getContrastColor(customColor).textColor, color: getContrastColor(customColor).bgColor, boxShadow: '1px 1px 2px #00000020', borderRadius: '30px', fontWeight: 'bold' }, children: groupByKey(currentDataSource, grouping)[key].length })] }), _jsxs("div", { style: { cursor: 'pointer' }, onClick: () => { let arr = [...openList]; arr[index] = !arr[index]; setOpenList(arr); }, children: [" ", openList[index] ? _jsx(IconUp, { fontSize: 12 }) : _jsx(IconDown, { fontSize: 12 }), " "] })] }) }), openList[index] && _jsx("div", { style: { width: '100%', height: '100%' }, children: groupByKey(currentDataSource, grouping)[key].map((data, index2) => (_jsx(StyledListItem, { $isSelected: data === selectedItem, $color: getContrastColor(customColor).bgColor, $textColor: getContrastColor(customColor).textColor, onClick: () => { onSelectionChanged && onSelectionChanged(data); onItemClick && onItemClick(data); }, onDoubleClick: () => { onItemDblClick && onItemDblClick(data); }, children: _jsxs("div", { style: { width: '100%', height: 'max-content', display: 'flex', flexDirection: 'column', padding: '5px 5px' }, children: [localShowId && _jsxs("p", { style: { color: data === selectedItem ? 'red' : 'black', backgroundColor: `${customColor}20`, width: '100%', padding: '2px 5px', borderRadius: '5px', height: 'max-content', textAlign: 'left' }, children: [" ", 'ID: ' + data.id, " "] }), _jsxs("div", { style: { width: '100%', height: '100%' }, children: [" ", itemTemplate ? itemTemplate(data) : _jsx("div", {})] })] }) }, index2))) })] }, index));
     }), [currentDataSource, selectedItem, localShowId, customColor, openList, grouping, customGroupingHeaders]);
     // List height
     const listHeight = () => {
@@ -376,7 +376,7 @@ const TMListView = ({ customGroupingHeaders, headerBackGroundColor, header, show
                     grouping.length === 0 ? memoList : groupedMemoList :
                     searchValue.length > 0 ? _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data found" }) :
                         _jsx("div", { style: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: "No data" }) }), (searchValue.length > 0 || showOrderMenu) &&
-                _jsxs(StyledListViewFooter, { "$bgColor": `${customColor}20`, children: [showOrderMenu &&
+                _jsxs(StyledListViewFooter, { $bgColor: `${customColor}20`, children: [showOrderMenu &&
                             _jsxs("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("div", { style: { width: 'max-content' }, children: "Ordinato per" }), _jsx("div", { ref: orderRef, onClick: () => { setShowOrderOptions(!showOrderOptions); setOrderMenuVisible(!orderMenuVisible); }, style: { cursor: 'pointer', fontWeight: 'bold' }, children: orderedBy.length > 0 ? orderedBy : 'Nulla' }), orderedBy.length > 0 && _jsxs(TMTooltip, { content: orderDir ? 'ASC' : 'DESC', children: [" ", orderDir ? _jsx(IconUp, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(false), fontSize: 14 }) : _jsx(IconDown, { style: { cursor: 'pointer' }, onClick: () => setOrderDir(true), fontSize: 14 }), " "] }), _jsx(TMTooltip, { content: 'Annulla ordinamento', children: _jsx(IconCloseCircle, { style: { cursor: 'pointer' }, color: 'red', fontSize: 14, onClick: () => { setOrderedBy(''); setShowOrderMenu(false); setShowOrderOptions(false); } }) })] }), searchValue.length > 0 && _jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'flex-end', gap: 5 }, children: [_jsx(TMTooltip, { content: 'Visibili', children: _jsx(IconVisible, { fontSize: 14 }) }), currentDataSource.length] })] })] }));
 };
 export default TMListView;

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

@@ -14,6 +14,17 @@ interface ITMModal {
     askClosingConfirm?: boolean;
     showCloseButton?: boolean;
     showHeader?: boolean;
+    /** Se true, ricentra il popup ogni volta che cambiano width/height, annullando lo spostamento manuale */
+    recenterOnResize?: boolean;
+    /** Contenuto aggiuntivo nella barra del titolo, prima del pulsante di chiusura (es. un menu di opzioni) */
+    titleActions?: React.ReactNode;
+    /** Dimensioni in px al termine di un ridimensionamento manuale */
+    onResized?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    /** A ogni cambio di valore le dimensioni tornano a `width`/`height`, anche se invariate */
+    sizeResetToken?: number | string;
 }
 declare const TMModal: React.FC<ITMModal>;
 export default TMModal;

package/lib/components/base/TMModal.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from 'react';
 import { Popup } from 'devextreme-react';
+import { ToolbarItem } from 'devextreme-react/popup';
 import styled from 'styled-components';
 import { TMCard } from './TMLayout';
 import { FontSize, TMColors } from '../../utils/theme';
 import { IconWindowMaximize, IconWindowMinimize, svgToString } from '../../helper';
+/** Valori di `height` con cui il popup si dimensiona sul contenuto (vedi applyContentFillLayout) */
+const CONTENT_DRIVEN_HEIGHTS = ['auto', 'max-content', 'min-content', 'fit-content'];
 const StyledModal = styled.div `
     width: ${props => props.$width};
     height: ${props => props.$height};
@@ -39,10 +42,13 @@ const StyledModalContext = styled.div `
     overflow: auto;
     height: 100%;
 `;
-const TMModal = ({ resizable = true, expandable = false, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true, showHeader = true }) => {
+const TMModal = ({ resizable = true, expandable = false, isModal = true, title = '', toolbar, onClose, children, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, hidePopup = true, askClosingConfirm = false, showCloseButton = true, showHeader = true, recenterOnResize = false, titleActions, onResized, sizeResetToken }) => {
     const popupRef = useRef(null);
     const [initialWidth, setInitialWidth] = useState(width);
     const [initialHeight, setInitialHeight] = useState(height);
+    // Posizione controllata: un nuovo riferimento oggetto forza DevExtreme a riposizionare (ricentrare).
+    // Lasciata invariata durante il drag, così lo spostamento manuale viene preservato
+    const [position, setPosition] = useState(undefined);
     const [showPopup, setShowPopup] = useState(false);
     const [isResizing, setIsResizing] = useState(false);
     const [isFullScreen, setIsFullScreen] = useState(false);
@@ -51,6 +57,26 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
     const DEFAULT_MIN_HEIGHT = 400;
     const [minWidth, setMinWidth] = useState(0);
     const [minHeight, setMinHeight] = useState(0);
+    /**
+     * DevExtreme fissa in px l'altezza del contenuto del popup: se le dimensioni cambiano a popup
+     * già aperto (es. cambio step) resta quella del passo precedente e sotto rimane spazio vuoto.
+     * Come figlio flex il contenuto riempie il popup senza dipendere da quel calcolo.
+     * Non si applica alle altezze dimensionate sul contenuto (`auto`, `max-content`, ...):
+     * lì è il contenuto a dare l'altezza al popup e non c'è spazio da riempire.
+     */
+    const applyContentFillLayout = () => {
+        const content = popupRef.current?.instance()?.content();
+        const overlayContent = content?.parentElement;
+        if (!content || !overlayContent)
+            return;
+        const fill = !CONTENT_DRIVEN_HEIGHTS.some(value => initialHeight.trim().startsWith(value));
+        overlayContent.style.display = fill ? 'flex' : '';
+        overlayContent.style.flexDirection = fill ? 'column' : '';
+        content.style.flex = fill ? '1 1 auto' : '';
+        // Testata e toolbar inferiore restano alla loro altezza naturale
+        overlayContent.querySelectorAll(':scope > .dx-popup-title, :scope > .dx-popup-bottom')
+            .forEach(el => { el.style.flexShrink = fill ? '0' : ''; });
+    };
     /**
      * Gestore chiamato quando il popup viene mostrato.
      * Calcola e imposta le dimensioni minime del popup in base allo spazio disponibile.
@@ -59,6 +85,7 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
     const handleShown = () => {
         // Usa requestAnimationFrame per attendere il completamento del rendering
         requestAnimationFrame(() => {
+            applyContentFillLayout();
             if (popupRef.current && popupRef.current.instance) {
                 const instance = popupRef.current.instance();
                 if (instance) {
@@ -85,14 +112,27 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
     useEffect(() => {
         setInitialWidth(width);
         setInitialHeight(height);
-    }, [width, height]);
+        // Al cambio di dimensioni (es. cambio step) ricentra il popup con un nuovo riferimento oggetto,
+        // annullando l'eventuale spostamento manuale precedente
+        if (recenterOnResize)
+            setPosition({ my: 'center', at: 'center', of: window });
+        // Il token annulla un ridimensionamento manuale, che non cambia width/height
+    }, [width, height, recenterOnResize, sizeResetToken]);
+    // Dimensioni, testata e schermo pieno fanno rigenerare geometria ed elementi del popup:
+    // il layout flex del contenuto va riapplicato dopo il ridisegno (vedi applyContentFillLayout)
+    useEffect(() => {
+        const rafId = requestAnimationFrame(() => applyContentFillLayout());
+        return () => cancelAnimationFrame(rafId);
+    }, [initialWidth, initialHeight, title, isFullScreen, showPopup]);
     const handleResizeStart = () => {
         setIsResizing(true);
     };
     const handleResizeEnd = (e) => {
         setIsResizing(false);
-        setInitialWidth(e.width.toString());
-        setInitialHeight(e.height.toString());
+        // Le dimensioni arrivano in px: senza unità non sarebbero un valore CSS valido
+        setInitialWidth(`${e.width}px`);
+        setInitialHeight(`${e.height}px`);
+        onResized?.({ width: e.width, height: e.height });
     };
     const onHiding = (e) => {
         if (askClosingConfirm)
@@ -101,15 +141,9 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
             setShowPopup(false);
         onClose && onClose();
     };
-    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { ref: popupRef, showCloseButton: showHeader ? showCloseButton : false, showTitle: showHeader, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing && !isFullScreen, resizeEnabled: resizable && !isFullScreen, position: expandable && isFullScreen ? { my: 'center', at: 'center', of: window } : undefined, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, toolbarItems: showHeader && expandable ? [
-                {
-                    widget: 'dxButton',
-                    location: 'after',
-                    options: {
+    return (_jsx(_Fragment, { children: isModal ? (_jsxs(Popup, { ref: popupRef, showCloseButton: showHeader ? showCloseButton : false, showTitle: showHeader, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing && !isFullScreen, resizeEnabled: resizable && !isFullScreen, position: expandable && isFullScreen ? { my: 'center', at: 'center', of: window } : position, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, children: [showHeader && titleActions && (_jsx(ToolbarItem, { toolbar: 'top', location: 'after', render: () => _jsx(_Fragment, { children: titleActions }) })), showHeader && expandable && (_jsx(ToolbarItem, { toolbar: 'top', location: 'after', widget: 'dxButton', options: {
                         icon: isFullScreen ? svgToString(_jsx(IconWindowMinimize, {})) : svgToString(_jsx(IconWindowMaximize, {})),
                         onClick: () => setIsFullScreen(!isFullScreen)
-                    }
-                }
-            ] : undefined, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }, children: [toolbar && (_jsx(StyledModalToolbar, { children: toolbar })), _jsx("div", { style: { flex: 1, overflow: 'hidden', minHeight: 0 }, children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] }) })) : (_jsxs(StyledModal, { "$isModal": isModal, className: "temp-modal", "$fontSize": fontSize, "$width": initialWidth, "$height": initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
+                    } })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%', width: '100%' }, children: [toolbar && (_jsx(StyledModalToolbar, { children: toolbar })), _jsx("div", { style: { flex: 1, overflow: 'hidden', minHeight: 0 }, children: _jsx(TMCard, { showBorder: false, padding: false, scrollY: true, children: children }) })] })] })) : (_jsxs(StyledModal, { $isModal: isModal, className: "temp-modal", $fontSize: fontSize, $width: initialWidth, $height: initialHeight, children: [toolbar ? _jsx(StyledModalToolbar, { children: toolbar }) : _jsx(_Fragment, {}), _jsx(StyledModalContext, { children: children })] })) }));
 };
 export default TMModal;

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

@@ -10,6 +10,7 @@ export interface ITMPanelProps {
     children?: React.ReactNode;
     showHeader?: boolean;
     title?: React.ReactNode;
+    enableTitleMarquee?: boolean;
     displayedItemsCount?: number;
     totalItems?: number;
     toolbar?: any;
@@ -17,9 +18,14 @@ export interface ITMPanelProps {
     isVisible?: boolean;
     panelID?: string;
     isActive?: boolean;
+    /** Se fornita, in testata compare il bottone di ricarica: finché la Promise è pendente il pannello mostra il loader */
+    onRefresh?: () => void | Promise<void>;
+    /** Mostra il loader sul contenuto anche per caricamenti non avviati dal bottone di ricarica */
+    isRefreshing?: boolean;
     onActivate?: (panelID: string) => void;
     onActiveChanged?: (isActive: boolean) => void;
     onBack?: () => void;
+    backCaption?: string;
     onClose?: () => void;
     onHeaderDoubleClick?: () => void;
     onMaximize?: (isMaximized: boolean) => void;