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

package/lib/components/base/TMAreaManager.js

@@ -10,7 +10,8 @@ import { loadMessages } from 'devextreme/localization';
 import { getFileManagerFolderColor, Globalization, IconAll, IconCloud, IconFolder, IconFolderForCSS, IconSelected, SDKUI_Localizator, svgToString } from '../../helper';
 import { TMExceptionBoxManager } from './TMPopUp';
 import ShowAlert from './TMAlert';
-import { TMLayoutWaitingContainer } from './TMWaitPanel';
+import TMLayoutContainer from './TMLayout';
+import TMWaitPanelManager from './waitPanel/TMWaitPanelManager';
 import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
 import { IconPdf, IconTxt, IconXls, IconDocx, IconImage, IconZip, IconXml, IconMp4, IconEmail, IconPpt, IconSigned, IconExe, IconHtml, IconDwg, IconDicom, IconSlddrw } from '../../assets/thumbnails';
 import styled from 'styled-components';
@@ -89,17 +90,6 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
     const [counterValues, setCounterValues] = useState(new Map());
     // State to maintain the selection mode (File System Item - right panel)
     const [selectionMode, setSelectionMode] = useState('single');
-    /* State to manage the Wait Panel */
-    const [showWaitPanel, setShowWaitPanel] = useState(false);
-    const [waitPanelTitle, setWaitPanelTitle] = useState('');
-    const [showPrimary, setShowPrimary] = useState(false);
-    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
-    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
-    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
-    const [showSecondary, setShowSecondary] = useState(false);
-    const [waitPanelTextSecondary, setWaitPanelTextSecondary] = useState('');
-    const [waitPanelValueSecondary, setWaitPanelValueSecondary] = useState(0);
-    const [waitPanelMaxValueSecondary, setWaitPanelMaxValueSecondary] = useState(0);
     // Timer ID to store reference for any scheduled operation
     let timerId = null;
     // Prefix for area folder names
@@ -430,44 +420,55 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
         }
     };
     const downloadItems = async (items) => {
+        const files = items.filter(item => !item.isDirectory);
+        const isBatch = files.length > 1;
+        const waitPanel = TMWaitPanelManager.show({
+            title: "Download",
+            max: isBatch ? files.length : 0,
+            cancelable: true,
+            showCounters: false,
+            showSecondary: isBatch,
+            primaryLabel: isBatch ? 'File' : undefined,
+            secondaryLabel: isBatch ? 'File corrente' : undefined,
+        });
+        abortController = waitPanel.abortController;
+        const publishBytes = (loaded, total) => {
+            const text = total > 0
+                ? `Downloading... ${Globalization.getNumberDisplayValue(loaded, true)} / ${Globalization.getNumberDisplayValue(total, true)}`
+                : '';
+            if (isBatch)
+                waitPanel.setSecondary({ value: loaded, max: total, text });
+            else
+                waitPanel.update({ value: loaded, max: total, subtitle: text });
+        };
+        // Un solo avviso per tutta l'operazione: con più file riporta quanti ne sono stati scaricati.
+        let downloaded = 0;
+        const showInterrupted = () => ShowAlert({
+            mode: 'warning',
+            title: "Download",
+            duration: 3000,
+            message: isBatch ? SDKUI_Localizator.DownloadInterruptedFiles.replaceParams(downloaded, files.length) : SDKUI_Localizator.DownloadInterrupted,
+        });
         try {
-            setShowWaitPanel(true);
-            setShowPrimary(items.length > 1);
-            setShowSecondary(true);
-            setWaitPanelTitle("Download");
-            abortController = new AbortController();
-            let i = 0;
-            setWaitPanelMaxValuePrimary(items.length);
-            let firstBlock = true;
-            let maxFileSize = 0;
-            for (const item of items) {
-                if (item.isDirectory)
-                    continue;
-                if (abortController.signal.aborted) {
-                    ShowAlert({ message: 'Operazione interrotta', mode: 'warning', title: "Download files", duration: 3000 });
+            for (const item of files) {
+                if (waitPanel.aborted) {
+                    showInterrupted();
                     return;
                 }
-                setWaitPanelTextPrimary(`Download ${item.name}`);
+                if (isBatch)
+                    waitPanel.setSubtitle(`Download ${item.name}`);
                 const ad = item.dataItem.dataItem;
                 const aid = ad?.id;
                 const subFolder = item.parentPath === ad.name ? '' : item.parentPath.replace(ad.name + '/', '');
                 const tms = props.tmSession ?? SDK_Globals.tmSession;
-                const file = await tms?.NewAreaEngine().RetrieveFileAsync(aid, subFolder, item.name, FileFormats.None, abortController.signal, (pd) => {
-                    if (firstBlock) {
-                        maxFileSize = pd.ProgressBarMaximum ?? 0;
-                        setWaitPanelMaxValueSecondary(maxFileSize);
-                        firstBlock = false;
-                    }
-                    setWaitPanelValueSecondary(pd.ProgressBarValue);
-                    setWaitPanelTextSecondary(`Downloading... ${Globalization.getNumberDisplayValue(pd.ProgressBarValue, true)} / ${Globalization.getNumberDisplayValue(maxFileSize, true)}`);
-                    if (pd.ProgressBarValue === pd.ProgressBarMaximum) {
-                        setWaitPanelMaxValueSecondary(0);
-                        setWaitPanelValueSecondary(0);
-                        setWaitPanelTextSecondary('');
-                        firstBlock = true;
-                    }
-                });
-                setWaitPanelValuePrimary(i + 1);
+                let file;
+                try {
+                    file = await tms?.NewAreaEngine().RetrieveFileAsync(aid, subFolder, item.name, FileFormats.None, waitPanel.signal, (pd) => publishBytes(pd.ProgressBarValue, pd.ProgressBarMaximum ?? 0));
+                }
+                finally {
+                    if (isBatch)
+                        publishBytes(0, 0);
+                }
                 const fileURL = window.URL.createObjectURL(file);
                 const alink2 = document.createElement('a');
                 alink2.href = fileURL;
@@ -475,25 +476,22 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
                 alink2.target = "_blank";
                 alink2.rel = "noreferrer";
                 alink2.click();
-                i++;
+                downloaded++;
+                if (isBatch)
+                    await waitPanel.step();
             }
+            if (files.length > 0)
+                ShowAlert({ mode: 'success', message: SDKUI_Localizator.OperationSuccess, title: "Download", duration: 3000 });
         }
         catch (ex) {
             const err = ex;
-            if (err.name === 'CanceledError') {
-                ShowAlert({ message: err.message, mode: 'warning', duration: 3000, title: 'Abort' });
-            }
+            if (waitPanel.aborted || err.name === 'CanceledError')
+                showInterrupted();
             else
                 TMExceptionBoxManager.show({ exception: ex });
         }
         finally {
-            setWaitPanelTextPrimary('');
-            setWaitPanelMaxValuePrimary(0);
-            setWaitPanelValuePrimary(0);
-            setWaitPanelTextSecondary('');
-            setWaitPanelMaxValueSecondary(0);
-            setWaitPanelValueSecondary(0);
-            setShowWaitPanel(false);
+            waitPanel.close();
         }
     };
     // Asynchronous function to retrieve the items in a given directory (parentDirectory)
@@ -767,7 +765,7 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
         }
     };
     const folderColor = getFileManagerFolderColor(SDK_Globals.tmSession?.SessionDescr?.appModuleID ?? AppModules.SURFER);
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, showWaitPanelSecondary: showSecondary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, waitPanelTextSecondary: waitPanelTextSecondary, waitPanelValueSecondary: waitPanelValueSecondary, waitPanelMaxValueSecondary: waitPanelMaxValueSecondary, isCancelable: true, abortController: abortController, children: _jsxs(StyledFileManagerWrapper, { "$folderColor": folderColor, style: { width: "100%", height: "100%" }, children: [_jsxs(FileManager, { width: props.width, ref: fileManagerRef, height: `calc(${props.height} - 30px)`, onItemMoving: onItemCopying, onItemCopying: onItemCopying, onFileUploading: onFileUploading, fileSystemProvider: areaProvider, customizeThumbnail: customizeIcon, rootFolderName: SDK_Localizator.Areas, onSelectionChanged: onSelectionChanged, onDirectoryCreating: onDirectoryCreating, onFocusedItemChanged: onFocusedItemChanged, onSelectedFileOpened: onSelectedFileOpened, onContextMenuItemClick: onContextMenuItemClick, 
+    return (_jsx(TMLayoutContainer, { direction: 'vertical', children: _jsxs(StyledFileManagerWrapper, { $folderColor: folderColor, style: { width: "100%", height: "100%" }, children: [_jsxs(FileManager, { width: props.width, ref: fileManagerRef, height: `calc(${props.height} - 30px)`, onItemMoving: onItemCopying, onItemCopying: onItemCopying, onFileUploading: onFileUploading, fileSystemProvider: areaProvider, customizeThumbnail: customizeIcon, rootFolderName: SDK_Localizator.Areas, onSelectionChanged: onSelectionChanged, onDirectoryCreating: onDirectoryCreating, onFocusedItemChanged: onFocusedItemChanged, onSelectedFileOpened: onSelectedFileOpened, onContextMenuItemClick: onContextMenuItemClick, 
                     /* onItemMoved={() => setCounter(counter => counter + 1)}
                     onItemCopied={() => setCounter(counter => counter + 1)}
                     onItemDeleted={() => setCounter(counter => counter - 1)}

package/lib/components/base/TMButton.js

@@ -1,4 +1,4 @@
-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, forwardRef, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
@@ -287,7 +287,7 @@ const TMButton = forwardRef((props, ref) => {
             return (_jsx(StyledIconButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, padding: padding, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: icon }));
         }
         else if (btnStyle === 'advanced') {
-            return (_jsxs(StyledAdvancedButton, { ref: ref, "$width": width ?? '90px', "$height": height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), "$isDisabled": disabled, "$isPrimaryOutline": advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), onMouseDown: (e) => !disabled && onMouseDown?.(e), children: [_jsx(StyledAdvancedButtonIcon, { "$color": advancedColor, "$isVisible": isHovered, "$isDisabled": disabled, "$type": advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { "$color": advancedColor, "$isDisabled": disabled, "$type": advancedType, "$reserveArrow": hasSecondaryActions, children: caption })] }));
+            return (_jsxs(StyledAdvancedButton, { ref: ref, $width: width ?? '90px', $height: height ?? '30px', onMouseOver: () => !disabled && setIsHovered(true), onMouseOut: () => setIsHovered(false), $isDisabled: disabled, $isPrimaryOutline: advancedType === 'primary' && (advancedColor === 'primaryOutline' || color === 'primaryOutline'), onClick: () => !disabled && onClick?.(), onMouseDown: (e) => !disabled && onMouseDown?.(e), children: [_jsx(StyledAdvancedButtonIcon, { $color: advancedColor, $isVisible: isHovered, $isDisabled: disabled, $type: advancedType, children: icon }), _jsx(StyledAdvancedButtonText, { $color: advancedColor, $isDisabled: disabled, $type: advancedType, $reserveArrow: hasSecondaryActions, children: caption })] }));
         }
         else {
             return (_jsx(StyledTextButton, { ref: ref, color: color, caption: caption, disabled: disabled, fontSize: fontSize, onClick: onClick, onMouseDown: (e) => !disabled && onMouseDown?.(e), children: caption }));
@@ -296,12 +296,12 @@ const TMButton = forwardRef((props, ref) => {
     const renderTooltip = () => {
         return (showTooltip &&
             _jsxs(_Fragment, { children: [caption &&
-                        _jsx(StyledButtonTooltipHeader, { "$description": description, children: _jsx(StyledButtonTooltipItem, { "$color": color, children: caption }) }), description && _jsx(StyledButtonTooltipItem, { children: description })] }));
+                        _jsx(StyledButtonTooltipHeader, { $description: description, children: _jsx(StyledButtonTooltipItem, { $color: color, children: caption }) }), description && _jsx(StyledButtonTooltipItem, { children: description })] }));
     };
     const buttonWithTooltip = showTooltip
         ? _jsx(TMTooltip, { hideAfterDelay: true, content: renderTooltip(), children: renderedButton() })
         : renderedButton();
-    const renderSplitButton = () => (_jsxs(StyledSplitContainer, { ref: splitContainerRef, children: [buttonWithTooltip, _jsx(StyledSplitArrow, { type: 'button', "$isDisabled": disabled, "$isOpen": isDropdownOpen, "aria-haspopup": 'menu', "aria-expanded": isDropdownOpen, onClick: (e) => { e.stopPropagation(); toggleDropdown(); }, onMouseDown: (e) => e.stopPropagation(), children: _jsx(IconChevronDown, { fontSize: 14 }) }), isDropdownOpen && createPortal(_jsx(StyledDropdown, { ref: dropdownRef, role: 'menu', "$left": dropdownPos.left, "$top": dropdownPos.top, "$minWidth": dropdownPos.minWidth, children: secondaryActions.map((action, idx) => (_jsxs(StyledDropdownItem, { type: 'button', role: 'menuitem', "$disabled": action.disabled, disabled: action.disabled, onClick: () => {
+    const renderSplitButton = () => (_jsxs(StyledSplitContainer, { ref: splitContainerRef, children: [buttonWithTooltip, _jsx(StyledSplitArrow, { type: 'button', $isDisabled: disabled, $isOpen: isDropdownOpen, "aria-haspopup": 'menu', "aria-expanded": isDropdownOpen, onClick: (e) => { e.stopPropagation(); toggleDropdown(); }, onMouseDown: (e) => e.stopPropagation(), children: _jsx(IconChevronDown, { fontSize: 14 }) }), isDropdownOpen && createPortal(_jsx(StyledDropdown, { ref: dropdownRef, role: 'menu', $left: dropdownPos.left, $top: dropdownPos.top, $minWidth: dropdownPos.minWidth, children: secondaryActions.map((action, idx) => (_jsxs(StyledDropdownItem, { type: 'button', role: 'menuitem', $disabled: action.disabled, disabled: action.disabled, onClick: () => {
                         if (action.disabled)
                             return;
                         setIsDropdownOpen(false);

package/lib/components/base/TMClosableList.js

@@ -67,8 +67,8 @@ const TMClosableList = ({ dataSource, visibility = false, label, inline = false,
     const renderedItems = () => {
         return (dataSource.map((item, index) => (_jsx(StyledClosableItem, { children: item }, index))));
     };
-    return (_jsxs(StyledClosableContainer, { "$isMobile": devicrType === DeviceType.TABLET, "$padding": hasPadding ? '5px' : '0', children: [_jsxs(StyledClosableContext, { children: [label && _jsxs(StyledClosableLabel, { "$isMobile": devicrType === DeviceType.MOBILE, "$inline": inline, children: [label, ":"] }), status ?
-                        _jsxs(StyledClosableItems, { "$isMobile": devicrType === DeviceType.MOBILE, "$inline": inline, children: ["  ", renderedItems(), " "] }) :
-                        _jsxs(StyledClosableItems, { "$isMobile": devicrType === DeviceType.MOBILE, "$inline": inline, children: [" ", _jsxs(StyledClosableItem, { children: [" ", dataSource[0], " "] }), " "] })] }), dataSource.length > 1 && _jsxs(StyledClosabelIcon, { onClick: () => setStatus(!status), children: [!status && _jsxs(StyledClosableItemsCount, { children: [" (", _jsx("span", { children: "+" }), " ", dataSource.length - 1, " ", dataSource.length === 2 ? SDKUI_Localizator.OneMore : SDKUI_Localizator.More, ") "] }), !status ? _jsx(IconRight, { fontSize: 14 }) : _jsx(IconDown, { fontSize: 14 })] })] }));
+    return (_jsxs(StyledClosableContainer, { $isMobile: devicrType === DeviceType.TABLET, $padding: hasPadding ? '5px' : '0', children: [_jsxs(StyledClosableContext, { children: [label && _jsxs(StyledClosableLabel, { $isMobile: devicrType === DeviceType.MOBILE, $inline: inline, children: [label, ":"] }), status ?
+                        _jsxs(StyledClosableItems, { $isMobile: devicrType === DeviceType.MOBILE, $inline: inline, children: ["  ", renderedItems(), " "] }) :
+                        _jsxs(StyledClosableItems, { $isMobile: devicrType === DeviceType.MOBILE, $inline: inline, children: [" ", _jsxs(StyledClosableItem, { children: [" ", dataSource[0], " "] }), " "] })] }), dataSource.length > 1 && _jsxs(StyledClosabelIcon, { onClick: () => setStatus(!status), children: [!status && _jsxs(StyledClosableItemsCount, { children: [" (", _jsx("span", { children: "+" }), " ", dataSource.length - 1, " ", dataSource.length === 2 ? SDKUI_Localizator.OneMore : SDKUI_Localizator.More, ") "] }), !status ? _jsx(IconRight, { fontSize: 14 }) : _jsx(IconDown, { fontSize: 14 })] })] }));
 };
 export default TMClosableList;

package/lib/components/base/TMCustomButton.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState, useMemo } from 'react';
 import TMModal from './TMModal';
 import styled from 'styled-components';
-import { SDKUI_Localizator, TMLayoutWaitingContainer } from '../..';
+import { SDKUI_Localizator } from '../..';
 import { getButtonAttributes, getSelectedItem } from '../../helper/dcmtsHelper';
 import { DeviceType, useDeviceType } from './TMDeviceProvider';
+import TMWaitPanelManager from './waitPanel/TMWaitPanelManager';
 const IframeContainer = styled.div `
   display: flex;
   height: 100%;
@@ -53,12 +54,6 @@ const TMCustomButton = (props) => {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(false);
     const itemsToProcess = useMemo(() => selectedItems && selectedItems.length > 0 ? selectedItems : [attributes], [selectedItems, attributes]);
-    // Stati per il wait panel
-    const [showWaitPanel, setShowWaitPanel] = useState(itemsToProcess.length > 0 && !RunOnce);
-    const [waitPanelText, setWaitPanelText] = useState(SDKUI_Localizator.CustomButtonActions.replaceParams(1, itemsToProcess.length));
-    const [waitPanelValue, setWaitPanelValue] = useState(0);
-    const [waitPanelMaxValue, setWaitPanelMaxValue] = useState(itemsToProcess.length);
-    const [abortController, setAbortController] = useState(undefined);
     // Aggiungi timestamp all'URL per evitare cache
     const iframeUrl = useMemo(() => {
         if (!scriptUrl)
@@ -83,41 +78,45 @@ const TMCustomButton = (props) => {
         setLoading(false);
         setError(true);
     };
-    const executeSequentially = async (controller) => {
+    const executeSequentially = async () => {
         if (!itemsToProcess)
             return;
-        for (const [index, item] of itemsToProcess.entries()) {
-            if (controller.signal.aborted)
-                break;
-            setWaitPanelText(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, itemsToProcess.length));
-            setWaitPanelValue(index);
-            // Attendi che l'iframe sia pronto e invia il messaggio
-            await new Promise((resolve) => {
-                const checkIframe = setInterval(() => {
-                    if (iframeRef.current?.contentWindow) {
-                        clearInterval(checkIframe);
-                        if (selectedItems && selectedItems.length > 0) {
-                            //devo convertire item in formData
-                            const processedItem = getSelectedItem(args, formData, item);
-                            postMessageIframe(processedItem);
-                        }
-                        else {
-                            postMessageIframe(item);
+        const waitPanel = TMWaitPanelManager.show({
+            title: SDKUI_Localizator.CustomButtonAction,
+            max: itemsToProcess.length,
+            cancelable: true,
+            showCounters: false,
+        });
+        try {
+            for (const [index, item] of itemsToProcess.entries()) {
+                if (waitPanel.aborted)
+                    break;
+                waitPanel.setSubtitle(SDKUI_Localizator.CustomButtonActions.replaceParams(index + 1, itemsToProcess.length));
+                // Attendi che l'iframe sia pronto e invia il messaggio
+                await new Promise((resolve) => {
+                    const checkIframe = setInterval(() => {
+                        if (iframeRef.current?.contentWindow) {
+                            clearInterval(checkIframe);
+                            if (selectedItems && selectedItems.length > 0) {
+                                //devo convertire item in formData
+                                const processedItem = getSelectedItem(args, formData, item);
+                                postMessageIframe(processedItem);
+                            }
+                            else {
+                                postMessageIframe(item);
+                            }
+                            // Attendi prima di passare al prossimo
+                            setTimeout(resolve, 500);
                         }
-                        //imposta 100% se sono all'ultimo item
-                        if (index === itemsToProcess.length - 1)
-                            setWaitPanelValue(index + 1);
-                        // Attendi prima di passare al prossimo
-                        setTimeout(() => {
-                            setWaitPanelValue(index + 1);
-                            resolve();
-                        }, 500);
-                    }
-                }, 100);
-            });
+                    }, 100);
+                });
+                await waitPanel.step();
+            }
+        }
+        finally {
+            waitPanel.close();
+            onClose?.();
         }
-        setShowWaitPanel(false);
-        onClose?.();
     };
     const postMessageIframe = (data) => {
         console.log("TMCustomButton - postMessageIframe - data:", data);
@@ -130,14 +129,7 @@ const TMCustomButton = (props) => {
             return;
         if (!RunOnce && itemsToProcess.length > 0) {
             // esegui per ogni item selezionato
-            const controller = new AbortController();
-            controller.signal.addEventListener('abort', () => {
-                setShowWaitPanel(false);
-                onClose?.();
-            });
-            setAbortController(controller);
-            setWaitPanelMaxValue(itemsToProcess.length);
-            executeSequentially(controller);
+            executeSequentially();
         }
         else {
             // Modalità RunOnce: invia dati all'iframe quando è caricato
@@ -157,6 +149,6 @@ const TMCustomButton = (props) => {
         }
     }, []);
     const iframeContent = (_jsxs(IframeContainer, { style: !RunOnce ? { visibility: 'hidden' } : {}, children: [loading && _jsx(LoadingOverlay, {}), error && _jsx("div", { children: "Si \u00E8 verificato un errore nel caricamento del contenuto." }), !error && _jsx(StyledIframe, { ref: iframeRef, loading: 'lazy', onLoad: handleLoad, onError: handleError, src: iframeUrl })] }));
-    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && (_jsxs(_Fragment, { children: [_jsx(TMLayoutWaitingContainer, { showWaitPanel: showWaitPanel, waitPanelTitle: SDKUI_Localizator.CustomButtonAction, showWaitPanelPrimary: true, waitPanelTextPrimary: waitPanelText, waitPanelValuePrimary: waitPanelValue, waitPanelMaxValuePrimary: waitPanelMaxValue, showWaitPanelSecondary: false, isCancelable: true, abortController: abortController, children: undefined }), iframeContent] }));
+    return isModal && RunOnce ? (_jsx(TMModal, { title: button.title, width: isMobile ? '95%' : '60%', height: isMobile ? '95%' : '70%', resizable: isMobile ? false : true, expandable: isMobile ? false : true, onClose: onClose, children: iframeContent })) : !RunOnce && iframeContent;
 };
 export default TMCustomButton;

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

@@ -34,6 +34,8 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     searchPanelToolbarPosition?: 'before' | 'default';
     /** Trigger to set focus on SearchPanel (only if visible) - change the number to trigger focus */
     searchPanelFocusTrigger?: number;
+    /** Riporta il fuoco nella casella di ricerca dopo che la griglia ha applicato il testo digitato, così si può continuare a scrivere */
+    keepSearchPanelFocus?: boolean;
     /** Show the header filter */
     showHeaderFilter?: boolean;
     /** Show the filter panel */

package/lib/components/base/TMDataGrid.js

@@ -19,11 +19,11 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     // main properties
     keyExpr = 'id', dataSource, focusedRowEnabled = true, hoverStateEnabled = true, focusedRowKey, selectedRowKeys = [], 
     // custom options
-    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showHeaderColumnChooser = false, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusTrigger = 0, counterConfig = { show: false, items: new Map() }, compactPager = false, onHasFiltersChange, customContextMenuItems, 
+    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showHeaderColumnChooser = false, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusTrigger = 0, keepSearchPanelFocus = true, counterConfig = { show: false, items: new Map() }, compactPager = false, onHasFiltersChange, customContextMenuItems, 
     // events and callbacks
     onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onCellDblClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, onKeyDown, scrolling = { mode: 'standard', useNative: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1 }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
     // other properties
-    disabled = false, autoNavigateToFocusedRow = true, columnResizingMode = 'widget', columnHidingEnabled = true, columnAutoWidth = true, allowColumnResizing = true, allowColumnReordering = true, showBorders = true, showRowLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines === 1, showColumnLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines === 1, showColumnHeaders = true, rowAlternationEnabled = false, wordWrapEnabled = false, noDataText, columnMinWidth, 
+    disabled = false, autoNavigateToFocusedRow = true, columnResizingMode = 'widget', columnHidingEnabled = true, columnAutoWidth = true, allowColumnResizing = true, allowColumnReordering = true, showBorders = true, showRowLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines === 1, showColumnLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines === 1, showColumnHeaders = true, rowAlternationEnabled = false, repaintChangesOnly = false, wordWrapEnabled = false, noDataText, columnMinWidth, 
     // styles
     id, width = '100%', height = '100%', } = props;
     const internalRef = React.useRef(null);
@@ -42,6 +42,9 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     const gridContainerRef = useRef(null);
     // Ref per evitare focus ripetuti sulla search panel
     const searchPanelFocusedRef = useRef(false);
+    // true quando il testo è stato confermato mentre si stava scrivendo: il fuoco va rimesso nella casella
+    const restoreSearchPanelFocusRef = useRef(false);
+    const getSearchPanelInput = useCallback(() => internalRef.current?.instance().element().querySelector('.dx-datagrid-search-panel input'), []);
     useEffect(() => {
         const count = getRecordCount(dataSource);
         setTotalRecordCount(count);
@@ -342,12 +345,33 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                 }
             }, 100);
         }
-    }, [onContentReady, showSearchPanel, searchPanelFocusTrigger]);
+        /* Applicando il testo la griglia ricostruisce la propria barra di intestazione, e con essa la casella di
+           ricerca: senza rimettere il fuoco si dovrebbe cliccare di nuovo nella casella per continuare a scrivere.
+           Il rinvio serve ad agire sulla casella definitiva, non su quella che sta per essere sostituita. */
+        if (restoreSearchPanelFocusRef.current) {
+            restoreSearchPanelFocusRef.current = false;
+            setTimeout(() => {
+                const searchInput = getSearchPanelInput();
+                if (!searchInput || document.activeElement === searchInput)
+                    return;
+                searchInput.focus();
+                // Il cursore va in fondo al testo già digitato: si continua a scrivere da dove si era rimasti
+                const caretPosition = searchInput.value.length;
+                searchInput.setSelectionRange(caretPosition, caretPosition);
+            }, 0);
+        }
+    }, [onContentReady, showSearchPanel, searchPanelFocusTrigger, getSearchPanelInput]);
     const onOptionChangedCallback = useCallback((e) => {
         // Assicurati che component esista
         const grid = e.component;
         if (!grid)
             return;
+        // Il testo digitato viene confermato dopo una pausa: se il fuoco è ancora nella casella, va conservato.
+        // Senza la casella a video non c'è nulla da riportare a fuoco: il testo può cambiare solo da codice
+        if (keepSearchPanelFocus && showSearchPanel && e.fullName === 'searchPanel.text') {
+            const searchInput = getSearchPanelInput();
+            restoreSearchPanelFocusRef.current = !!searchInput && document.activeElement === searchInput;
+        }
         // Controlla se il cambiamento riguarda i filtri
         const isFilterChange = e.fullName === 'filterValue' || (e.fullName?.startsWith('columns') && e.fullName.endsWith('filterValues'));
         if (isFilterChange) {
@@ -374,7 +398,11 @@ const TMDataGrid = React.forwardRef((props, ref) => {
         }
         // Propaga l'evento originale
         onOptionChanged?.(e);
-    }, [onOptionChanged, onHasFiltersChange]);
+    }, [onOptionChanged, onHasFiltersChange, keepSearchPanelFocus, showSearchPanel, getSearchPanelInput]);
+    /* Ricreare questo oggetto a ogni render lo farebbe leggere come un cambiamento da devextreme-react, che confronta
+       le opzioni per riferimento: ogni cambio di headerFilter invalida la barra di intestazione della griglia, cioè
+       proprio dove sta la casella di ricerca. Tenendolo stabile la barra viene ricostruita solo quando serve davvero. */
+    const headerFilterSearch = useMemo(() => ({ enabled: true, ...headerFilter?.search }), [headerFilter?.search]);
     // In modalità compatta il pager usa il displayMode 'compact' di DevExtreme (page numbers sostituiti da "pagina / totale"),
     // salvo displayMode esplicito passato dal chiamante
     const effectivePager = useMemo(() => {
@@ -382,20 +410,20 @@ const TMDataGrid = React.forwardRef((props, ref) => {
             return pager;
         return { ...pager, displayMode: pager.displayMode ?? 'compact' };
     }, [pager, compactPager]);
-    return _jsxs(StyledDataGridContainer, { "$compactPager": compactPager, style: { width: "100%", height: "100%" }, children: [_jsx(HeaderFilterMenuGlobalStyle, {}), _jsx("div", { ref: gridContainerRef, style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
+    return _jsxs(StyledDataGridContainer, { $compactPager: compactPager, style: { width: "100%", height: "100%" }, children: [_jsx(HeaderFilterMenuGlobalStyle, {}), _jsx("div", { ref: gridContainerRef, style: { width: "100%", height: counterConfig.show ? "calc(100% - 25px)" : "100%" }, children: _jsxs(DataGrid, { ref: internalRef, id: id, className: `tm-datagrid ${hasFilters ? 'has-filters' : ''}`, 
                     // main properties
                     keyExpr: keyExpr, dataSource: dataSource, selectedRowKeys: selectedRowKeys, focusedRowEnabled: focusedRowEnabled, hoverStateEnabled: hoverStateEnabled, 
                     // events and callbacks
                     onSelectionChanged: onSelectionChangedCallback, onRowDblClick: onRowDblClickCallback, onRowPrepared: onRowPrepared, onContextMenuPreparing: onContextMenuPreparingCallback, onToolbarPreparing: onToolbarPreparingCallback, onFocusedRowChanged: onFocusedRowChanged, onRowClick: onRowClick, onCellClick: onCellClick, onCellDblClick: onCellDblClick, onOptionChanged: onOptionChangedCallback, onContentReady: onContentReadyCallback, onInitialized: onInitialized, customizeColumns: customizeColumns, onEditorPreparing: onEditorPreparing, onCellPrepared: onCellPrepared, onRowUpdating: onRowUpdating, onRowExpanded: onRowExpanded, onRowCollapsed: onRowCollapsed, onRowUpdated: onRowUpdated, onSaved: onSaved, onEditCanceled: onEditCanceled, onEditingStart: onEditingStart, onEditingChange: onEditingChange, onKeyDown: onKeyDown, 
                     // other properties
-                    disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, wordWrapEnabled: wordWrapEnabled, columnMinWidth: columnMinWidth, noDataText: noDataText, 
+                    disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, repaintChangesOnly: repaintChangesOnly, wordWrapEnabled: wordWrapEnabled, columnMinWidth: columnMinWidth, noDataText: noDataText, 
                     // styles
                     width: width, height: height, style: {
                         userSelect: 'none',
                         // Temporary: iOS-specific styles to prevent default long-press menu and text selection
                         WebkitTouchCallout: 'none',
                         WebkitUserSelect: 'none'
-                    }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column, alignment: column.alignment ?? 'left' }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter, search: { enabled: true, ...headerFilter?.search } }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), effectivePager && _jsx(Pager, { ...effectivePager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) }), customContextMenuItems && (_jsx(TMContextMenu, { target: ".dx-data-row", items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
+                    }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column, alignment: column.alignment ?? 'left' }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter, search: headerFilterSearch }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), effectivePager && _jsx(Pager, { ...effectivePager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) }), customContextMenuItems && (_jsx(TMContextMenu, { target: ".dx-data-row", items: processCustomContextMenuItems(customContextMenuItems, customContextMenuRowKey), externalControl: {
                     visible: customContextMenuVisible,
                     position: customContextMenuPosition,
                     onClose: () => setCustomContextMenuVisible(false)

package/lib/components/base/TMDropDownMenu.js

@@ -43,6 +43,6 @@ const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = T
             submenu: item.items ? convertToContextMenuItems(item.items) : undefined,
         }));
     };
-    return (_jsx(TMContextMenu, { items: convertToContextMenuItems(items), trigger: "left", children: _jsx(StyledContent, { ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }) }));
+    return (_jsx(TMContextMenu, { items: convertToContextMenuItems(items), trigger: "left", children: _jsx(StyledContent, { ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, $disabled: disabled, $color: color, $backgroundColor: backgroundColor, $borderRadius: borderRadius, children: content }) }));
 });
 export default TMDropDownMenu;

package/lib/components/base/TMFileManagerDataGridView.js

@@ -1,4 +1,4 @@
-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, useMemo, useState } from "react";
 import { getFileItemLinkUrl } from "./TMFileManagerUtils";
 import { formatBytes, Globalization, renderHighlightedText, SDKUI_Localizator } from "../../helper";

package/lib/components/base/TMFileManagerThumbnailItems.js

@@ -1,4 +1,4 @@
-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, getFileItemLinkUrl, TMFileItemContainer } from './TMFileManagerUtils';
 import { formatBytes, Globalization, renderHighlightedText, SDKUI_Localizator } from '../../helper';
@@ -155,7 +155,7 @@ const TMFileManagerThumbnailItems = (props) => {
             }
             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)] }), 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);
+            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/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;