@topconsultnpm/sdkui-react 6.21.0-dev2.8 → 6.21.0-dev3.2

package/lib/components/base/TMAccordionNew.js

@@ -252,6 +252,7 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
             disabled: mi.disabled,
             onClick: mi.onClick,
             submenu: mi.items || mi.submenu,
+            beginGroup: mi.beginGroup ?? false
         }));
         setItemContextMenuPosition({ x: event.clientX, y: event.clientY });
         setItemContextMenuItems(convertedItems);

package/lib/components/base/TMAreaManager.js

@@ -5,7 +5,7 @@ import { FileDescriptor, FileFormats, FileTransferModes, SDK_Localizator, SDK_Gl
 import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
 import FileSystemError from "devextreme/file_management/error";
 import Button from "devextreme/ui/button";
-import { alert, confirm } from "devextreme/ui/dialog";
+import { alert, custom } from "devextreme/ui/dialog";
 import { loadMessages } from 'devextreme/localization';
 import { getFileManagerFolderColor, Globalization, IconAll, IconCloud, IconFolder, IconFolderForCSS, IconSelected, SDKUI_Localizator, svgToString } from '../../helper';
 import { TMExceptionBoxManager } from './TMPopUp';
@@ -253,8 +253,24 @@ const TMAreaManager = (props = { selectionMode: 'multiple', isPathChooser: false
                     else {
                         msg = SDKUI_Localizator.FileManager_QuestionAlreadyExistsFiles.replaceParams(resolvesForExistingFiles.length.toString());
                     }
-                    const result = confirm(msg, SDKUI_Localizator.Attention);
-                    result.then((dialogResult) => {
+                    const confirmDialog = custom({
+                        title: SDKUI_Localizator.Attention,
+                        messageHtml: `<div style="padding: 15px; font-size: 1rem; max-width: 500px; word-wrap: break-word; overflow-wrap: break-word;">${msg}</div>`,
+                        buttons: [
+                            {
+                                text: SDKUI_Localizator.Yes ?? "Yes",
+                                onClick: () => true,
+                                type: "default",
+                                stylingMode: "contained"
+                            },
+                            {
+                                text: SDKUI_Localizator.No ?? "No",
+                                onClick: () => false,
+                                stylingMode: "outlined"
+                            }
+                        ]
+                    });
+                    confirmDialog.show().then((dialogResult) => {
                         resolvesForNonExistingFiles.forEach((res) => {
                             res({
                                 cancel: false,

package/lib/components/base/TMDataGrid.js

@@ -22,7 +22,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     // 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, 
+    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, 
     // styles
     id, width = '100%', height = '100%', } = props;
     const internalRef = React.useRef(null);
@@ -354,7 +354,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                     // 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, 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, wordWrapEnabled: wordWrapEnabled, columnMinWidth: columnMinWidth, noDataText: noDataText, 
                     // styles
                     width: width, height: height, style: {
                         userSelect: 'none',

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

@@ -13,6 +13,7 @@ interface ITMModal {
     hidePopup?: boolean;
     askClosingConfirm?: boolean;
     showCloseButton?: boolean;
+    showHeader?: boolean;
 }
 declare const TMModal: React.FC<ITMModal>;
 export default TMModal;

package/lib/components/base/TMModal.js

@@ -39,7 +39,7 @@ 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 }) => {
+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 popupRef = useRef(null);
     const [initialWidth, setInitialWidth] = useState(width);
     const [initialHeight, setInitialHeight] = useState(height);
@@ -101,7 +101,7 @@ const TMModal = ({ resizable = true, expandable = false, isModal = true, title =
             setShowPopup(false);
         onClose && onClose();
     };
-    return (_jsx(_Fragment, { children: isModal ? (_jsx(Popup, { ref: popupRef, showCloseButton: showCloseButton, animation: undefined, minWidth: minWidth, minHeight: minHeight, maxHeight: '95%', maxWidth: '95%', dragEnabled: !isResizing, resizeEnabled: resizable, width: expandable && isFullScreen ? '95%' : initialWidth, height: expandable && isFullScreen ? '95%' : initialHeight, title: title, visible: showPopup, onShown: handleShown, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd, onHiding: onHiding, toolbarItems: expandable ? [
+    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, resizeEnabled: resizable, 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',

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

@@ -1,7 +1,3 @@
-/** Gestione TMPanel "attivo / non attivo" secondo una pattern ibrido (Controlled/Uncontrolled Component):
-1) Modalità Non Controllata (Uncontrolled): Se non gli viene passata la prop "isActive", il pannello gestisce lo stato "attivo" internamente. Per l'uso singolo ("plug-and-play").
-2) Modalità Controllata (Controlled): Se il genitore passa la prop "isActive", il pannello cede il controllo e si affida completamente al genitore. Ideale per layout con più pannelli che necessitano di coordinamento.
-*/
 import React from 'react';
 export interface ITMPanelRef {
     focusPanel: () => void;
@@ -28,5 +24,12 @@ export interface ITMPanelProps {
     onHeaderDoubleClick?: () => void;
     onMaximize?: (isMaximized: boolean) => void;
 }
+/**
+ * TMPanel - Pannello con supporto Controlled/Uncontrolled
+ *
+ * @prop isActive (opzionale)
+ *   - Se NON passata → Uncontrolled: gestione interna dello stato attivo (plug-and-play)
+ *   - Se passata → Controlled: il parent gestisce lo stato tramite onActivate
+ */
 declare const TMPanel: React.ForwardRefExoticComponent<ITMPanelProps & React.RefAttributes<ITMPanelRef>>;
 export default TMPanel;

package/lib/components/base/TMPanel.js

@@ -1,14 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Gestione TMPanel "attivo / non attivo" secondo una pattern ibrido (Controlled/Uncontrolled Component):
-1) Modalità Non Controllata (Uncontrolled): Se non gli viene passata la prop "isActive", il pannello gestisce lo stato "attivo" internamente. Per l'uso singolo ("plug-and-play").
-2) Modalità Controllata (Controlled): Se il genitore passa la prop "isActive", il pannello cede il controllo e si affida completamente al genitore. Ideale per layout con più pannelli che necessitano di coordinamento.
-*/
 import { useCallback, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
 import { getAppModuleGradient, IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
 import { Gutters } from '../../utils/theme';
+const StyledBackButton = styled.button `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 4px 10px;
+    border: 1px solid ${({ $isActive }) => $isActive ? 'rgba(37, 89, 165, 0.3)' : 'rgba(255, 255, 255, 0.4)'};
+    border-radius: 6px;
+    cursor: pointer;
+    font-weight: 500;
+    font-size: 0.85rem;
+    flex-shrink: 0;
+    transition: all 0.15s ease;
+    background-color: ${({ $isActive }) => $isActive ? '#FFFFFF' : '#2559A5'};
+    box-shadow: none;
+    
+    &&, && * {
+        color: ${({ $isActive }) => $isActive ? '#2559A5' : '#FFFFFF'} !important;
+    }
+    
+    svg {
+        font-size: 14px;
+    }
+`;
 import { AppModules, SDK_Globals } from '@topconsultnpm/sdk-ts';
+import { DeviceType, useDeviceType } from './TMDeviceProvider';
 const StyledPanelContainer = styled.div `
     width: 100%;
     height: 100%;
@@ -75,9 +96,19 @@ const StyledPanelContent = styled.div `
         outline: none;
     }
 `;
+/**
+ * TMPanel - Pannello con supporto Controlled/Uncontrolled
+ *
+ * @prop isActive (opzionale)
+ *   - Se NON passata → Uncontrolled: gestione interna dello stato attivo (plug-and-play)
+ *   - Se passata → Controlled: il parent gestisce lo stato tramite onActivate
+ */
 const TMPanel = forwardRef(({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', isVisible = true, panelID = 'tmpanel', isActive, // Questa prop determinerà la modalità
 onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged }, ref) => {
     const [isMaximized, setIsMaximized] = useState(false);
+    // Detect device type (e.g., mobile or desktop)
+    const deviceType = useDeviceType();
+    const isMobile = deviceType === DeviceType.MOBILE;
     // INTERNAL STATUS for UNCONTROLLED mode
     const [internalIsActive, setInternalIsActive] = useState(false);
     const panelRef = useRef(null);
@@ -149,36 +180,37 @@ onActivate, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged },
                             flexDirection: 'row',
                             alignItems: 'center',
                             width: '100%',
-                            minWidth: 0
-                        }, children: [_jsxs("div", { style: {
+                            minWidth: 0,
+                            flexWrap: 'nowrap',
+                            overflow: 'hidden'
+                        }, children: [onBack && _jsx("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
-                                    gap: '8px',
+                                    flexShrink: 0
+                                }, children: _jsxs(StyledBackButton, { "$isActive": currentIsActive, onClick: () => onBack ? onBack() : null, title: SDKUI_Localizator.Back, children: [_jsx(IconArrowLeft, {}), !isMobile && _jsx("span", { children: SDKUI_Localizator.Back })] }) }), _jsx("div", { style: {
                                     flex: 1,
-                                    minWidth: 0
-                                }, children: [onBack &&
-                                        _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconArrowLeft, {}), caption: SDKUI_Localizator.Back, onClick: onBack }), _jsx("div", { style: {
-                                            display: 'flex',
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                            overflow: 'hidden',
-                                        }, children: _jsxs("div", { style: {
-                                                whiteSpace: 'nowrap',
-                                                overflow: 'hidden',
-                                                textOverflow: 'ellipsis',
-                                                margin: 0
-                                            }, children: [title, isPositiveNumber(displayedItemsCount) && isPositiveNumber(totalItems)
-                                                    ? ` (${displayedItemsCount} / ${totalItems})`
-                                                    : isPositiveNumber(totalItems)
-                                                        ? ` (${totalItems})`
-                                                        : ''] }) })] }), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'flex-start',
+                                    minWidth: 0,
+                                    overflow: 'hidden',
+                                    padding: '0 8px'
+                                }, children: _jsxs("div", { style: {
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        margin: 0
+                                    }, children: [title, isPositiveNumber(displayedItemsCount) && isPositiveNumber(totalItems)
+                                            ? ` (${displayedItemsCount} / ${totalItems})`
+                                            : isPositiveNumber(totalItems)
+                                                ? ` (${totalItems})`
+                                                : ''] }) }), _jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
                                     gap: '5px',
-                                    flexShrink: 0,
-                                    marginLeft: 10
+                                    flexShrink: 0
                                 }, children: [toolbar, allowMaximize && _jsx(TMButton, { color: 'primaryOutline', caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized
                                             ? _jsx(IconWindowMinimize, { fontSize: 16 })
                                             : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsx(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, children: children })] }));

package/lib/components/base/TMTreeView.js

@@ -9,23 +9,28 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
             if (!focusedItem)
                 return;
             let newFocusedItem = null;
+            let handled = false;
             switch (event.key) {
                 case 'ArrowDown':
                     newFocusedItem = findNextItem(dataSource, focusedItem);
+                    handled = true;
                     break;
                 case 'ArrowUp':
                     newFocusedItem = findPreviousItem(dataSource, focusedItem);
+                    handled = true;
                     break;
                 case '+':
                     if (!focusedItem.expanded) {
                         handleNodeToggle(focusedItem.key, false);
                         newFocusedItem = { ...focusedItem, expanded: true };
+                        handled = true;
                     }
                     break;
                 case '-':
                     if (focusedItem.expanded) {
                         handleNodeToggle(focusedItem.key, false);
                         newFocusedItem = { ...focusedItem, expanded: false };
+                        handled = true;
                     }
                     break;
                 // case ' ':
@@ -40,12 +45,17 @@ const TMTreeView = ({ dataSource = [], focusedItem, selectedItems = [], allowMul
                 default:
                     break;
             }
+            if (handled) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
             if (newFocusedItem)
                 onFocusedItemChanged?.(newFocusedItem);
         };
-        window.addEventListener('keydown', handleKeyDown);
+        // Usa capture: true per intercettare l'evento PRIMA che DevExtreme Popup lo gestisca
+        window.addEventListener('keydown', handleKeyDown, true);
         return () => {
-            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keydown', handleKeyDown, true);
         };
     }, [focusedItem, dataSource, onFocusedItemChanged]);
     const findNextItem = (nodes, currentItem) => {

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

@@ -12,6 +12,7 @@ interface ITMWaitPanelProps {
     isCancelable?: boolean;
     abortController?: AbortController;
     onAbortClick?: (abortController: AbortController | undefined) => void;
+    useHighZIndex?: boolean;
 }
 export declare const TMWaitPanel: (props: ITMWaitPanelProps) => import("react/jsx-runtime").JSX.Element;
 interface ITMLayoutWaitingContainerProps extends ITMLayoutContainerProps {
@@ -27,6 +28,7 @@ interface ITMLayoutWaitingContainerProps extends ITMLayoutContainerProps {
     waitPanelMaxValueSecondary?: number;
     isCancelable?: boolean;
     abortController?: AbortController;
+    usePortal?: boolean;
 }
-export declare const TMLayoutWaitingContainer: ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutWaitingContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TMLayoutWaitingContainer: ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, usePortal, gap, onClick, justifyContent, alignItems, children, direction }: ITMLayoutWaitingContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/base/TMWaitPanel.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import TMLayoutContainer from './TMLayout';
 import { SDKUI_Localizator } from '../../helper';
@@ -8,7 +9,7 @@ const StyledWaitPanelOverlay = styled.div `
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 1501;
+    z-index: ${props => props.$useHighZIndex ? 2000000001 : 1501};
     transition: all; 
     overflow: visible; 
     background-color: rgba(0, 0, 0, 0.4);
@@ -18,13 +19,16 @@ const StyledWaitPanel = styled.div `
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 300px; 
-    height: ${(props) => props.$height};
+    width: 300px;
+    max-width: calc(100% - 20px);
+    height: auto;
+    max-height: calc(100% - 20px);
     background: white; 
     border-radius: 8px; 
     padding: 10px; 
     text-align: center; 
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    overflow: auto;
 `;
 const StyledTitle = styled.h2 ` margin: 0; font-size: 1.5em; color: #333; `;
 const StyledProgressBarContainer = styled.div ` width: 100%; height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden; margin: 20px 0; `;
@@ -33,7 +37,7 @@ const StyledProgressText = styled.p ` font-weight: bold; color: #333; margin: 0;
 const StyledMessage = styled.p ` color: #666; font-size: 0.9em; margin-top: 10px; `;
 const StyledAbortButton = styled.button ` background: #ff4d4d; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 1em; cursor: pointer; margin-top: 20px; &:hover { background: #ff6666; } `;
 export const TMWaitPanel = (props) => {
-    const { title, showPrimary, textPrimary, valuePrimary, maxValuePrimary, showSecondary, textSecondary, valueSecondary, maxValueSecondary, isCancelable, abortController, onAbortClick } = props;
+    const { title, showPrimary, textPrimary, valuePrimary, maxValuePrimary, showSecondary, textSecondary, valueSecondary, maxValueSecondary, isCancelable, abortController, onAbortClick, useHighZIndex } = props;
     const calculateProgress = (value = 0, maxValue = 0) => {
         if (maxValue === 0)
             return 0;
@@ -42,10 +46,11 @@ export const TMWaitPanel = (props) => {
     };
     let progressValue1 = calculateProgress(valuePrimary, maxValuePrimary);
     let progressValue2 = calculateProgress(valueSecondary, maxValueSecondary);
-    return (_jsx(StyledWaitPanelOverlay, { children: _jsxs(StyledWaitPanel, { "$height": (showPrimary && showSecondary) ? '350px' : '250px', children: [_jsx(StyledTitle, { children: title }), showPrimary &&
+    return (_jsx(StyledWaitPanelOverlay, { "$useHighZIndex": useHighZIndex, children: _jsxs(StyledWaitPanel, { children: [_jsx(StyledTitle, { children: title }), showPrimary &&
                     _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue1.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue1.toFixed(2), "%"] }), _jsx(StyledMessage, { children: textPrimary })] }), showSecondary &&
                     _jsxs("div", { style: { width: '100%', height: '100px' }, children: [_jsx(StyledProgressBarContainer, { children: _jsx(StyledProgressBar, { style: { width: `${progressValue2.toFixed(2)}%` } }) }), _jsxs(StyledProgressText, { children: [progressValue2.toFixed(2), "%"] }), _jsx(StyledMessage, { children: textSecondary })] }), isCancelable && _jsx(StyledAbortButton, { onClick: () => onAbortClick?.(abortController), children: SDKUI_Localizator.Abort })] }) }));
 };
-export const TMLayoutWaitingContainer = ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical' }) => {
-    return (_jsxs(TMLayoutContainer, { gap: gap, justifyContent: justifyContent, alignItems: alignItems, direction: direction, children: [children, showWaitPanel && (_jsx(TMWaitPanel, { title: waitPanelTitle, showPrimary: showWaitPanelPrimary, textPrimary: waitPanelTextPrimary, valuePrimary: waitPanelValuePrimary, maxValuePrimary: waitPanelMaxValuePrimary, showSecondary: showWaitPanelSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: isCancelable, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); } }))] }));
+export const TMLayoutWaitingContainer = ({ showWaitPanel, showWaitPanelPrimary, showWaitPanelSecondary, waitPanelTitle, waitPanelTextSecondary, waitPanelValueSecondary, waitPanelMaxValueSecondary, waitPanelTextPrimary, waitPanelValuePrimary, waitPanelMaxValuePrimary, isCancelable, abortController, usePortal = false, gap = 3, onClick, justifyContent = 'flex-start', alignItems = 'flex-start', children, direction = 'vertical' }) => {
+    const waitPanelElement = showWaitPanel ? (_jsx(TMWaitPanel, { title: waitPanelTitle, showPrimary: showWaitPanelPrimary, textPrimary: waitPanelTextPrimary, valuePrimary: waitPanelValuePrimary, maxValuePrimary: waitPanelMaxValuePrimary, showSecondary: showWaitPanelSecondary, textSecondary: waitPanelTextSecondary, valueSecondary: waitPanelValueSecondary, maxValueSecondary: waitPanelMaxValueSecondary, isCancelable: isCancelable, abortController: abortController, onAbortClick: (abortController) => { setTimeout(() => { abortController?.abort(); }, 1000); }, useHighZIndex: usePortal })) : null;
+    return (_jsxs(_Fragment, { children: [usePortal && waitPanelElement && createPortal(waitPanelElement, document.body), _jsxs(TMLayoutContainer, { gap: gap, justifyContent: justifyContent, alignItems: alignItems, direction: direction, children: [children, !usePortal && waitPanelElement] })] }));
 };

package/lib/components/choosers/TMDistinctValues.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { LayoutModes, MetadataDataDomains, AccessLevels, MetadataDataTypes, SDK_Globals, DcmtTypeListCacheService, DataColumnTypes } from '@topconsultnpm/sdk-ts';
+import { LayoutModes, MetadataDataDomains, AccessLevels, MetadataDataTypes, SDK_Globals, DcmtTypeListCacheService, DataColumnTypes, DataListViewModes } from '@topconsultnpm/sdk-ts';
 import styled from 'styled-components';
 import { SDKUI_Localizator, stringIsNullOrEmpty } from '../../helper';
 import TMDataGrid, { TMDataGridPageSize } from '../base/TMDataGrid';
@@ -9,14 +9,17 @@ import TMSpinner from '../base/TMSpinner';
 import TMCheckBox from '../editors/TMCheckBox';
 import TMPanel from '../base/TMPanel';
 import TMModal from '../base/TMModal';
+import { useDataListItem } from '../../hooks/useDataListItem';
+import { useDataUserIdItem } from '../../hooks/useDataUserIdItem';
 const StyledDistinctValues = styled.div `display: flex; flex-direction: column; height: 100%; overflow: hidden; gap: 10px;`;
-const StyledPanelContainer = styled.div ` width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; `;
 const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppendMode = true, showHeader = true, isModal, separator = " ", onSelectionChanged, onClosePanelCallback }) => {
     const [focusedItem, setFocusedItem] = useState();
     const [dataSource, setDataSource] = useState([]);
     const [isAppendMode, setIsAppendMode] = useState(false);
     const [md, setMd] = useState();
     const [currentValue, setCurrentValue] = useState('');
+    const { loadDataListsAsync, renderDataListCell, dataListsCache } = useDataListItem();
+    const { loadUsersAsync, renderUserIdViewer, usersCache } = useDataUserIdItem();
     useEffect(() => {
         getDistictValuesAsync();
     }, [mid]);
@@ -57,8 +60,23 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
         try {
             TMSpinner.show({ description: 'Caricamento dei valori distinti...' });
             let dtd = await DcmtTypeListCacheService.GetAsync(tid, true);
-            setMd(dtd?.metadata?.find(o => o.id === mid));
+            const currentMd = dtd?.metadata?.find(o => o.id === mid);
+            setMd(currentMd);
             let result = await SDK_Globals.tmSession?.NewSearchEngine().GetDistinctValuesAsync(tid, mid, 10000);
+            // Load DataList or UserID cache based on metadata domain
+            if (currentMd?.dataDomain === MetadataDataDomains.DataList && currentMd.dataListID) {
+                await loadDataListsAsync(new Set([currentMd.dataListID]));
+            }
+            if (currentMd?.dataDomain === MetadataDataDomains.UserID && result?.dtdResult?.rows) {
+                const userIDs = new Set();
+                result.dtdResult.rows.forEach((row) => {
+                    const userId = Number(row[0]);
+                    if (userId && userId > 0) {
+                        userIDs.add(userId);
+                    }
+                });
+                await loadUsersAsync(userIDs);
+            }
             setDataSource(convertDataTableToObject(result?.dtdResult));
         }
         catch (e) {
@@ -69,31 +87,27 @@ const TMDistinctValues = ({ tid, mid, layoutMode = LayoutModes.None, allowAppend
             TMSpinner.hide();
         }
     };
-    const getDcmtTypeAsync = async () => {
-        if (!tid)
-            return;
-        try {
-            TMSpinner.show({ description: 'Caricamento dei valori distinti...' });
-            let dtd = await DcmtTypeListCacheService.GetAsync(tid, true);
-            setMd(dtd?.metadata?.find(o => o.id === mid));
-        }
-        catch (e) {
-            let err = e;
-            TMExceptionBoxManager.show({ exception: err });
-        }
-        finally {
-            TMSpinner.hide();
-        }
-    };
     const onFocusedRowChanged = useCallback((e) => {
         setFocusedItem(e.row?.data);
     }, []);
+    const valueCellRender = useCallback((cellData) => {
+        if (!cellData || cellData.value === undefined)
+            return null;
+        if (md?.dataDomain === MetadataDataDomains.DataList && md.dataListID) {
+            return renderDataListCell(cellData.value, md.dataListID, md.dataListViewMode ?? DataListViewModes.None);
+        }
+        if (md?.dataDomain === MetadataDataDomains.UserID) {
+            return renderUserIdViewer(Number(cellData.value), true);
+        }
+        return _jsx("div", { children: cellData.text });
+    }, [md, renderDataListCell, renderUserIdViewer]);
     const customColumns = useMemo(() => {
+        const needsCellRender = md?.dataDomain === MetadataDataDomains.DataList || md?.dataDomain === MetadataDataDomains.UserID;
         return ([
-            { dataField: 'value', dataType: md?.dataType === MetadataDataTypes.DateTime ? 'date' : 'string', caption: md?.nameLoc, width: 'min-content' },
+            { dataField: 'value', dataType: md?.dataType === MetadataDataTypes.DateTime ? 'date' : 'string', caption: md?.nameLoc, width: 'min-content', ...(needsCellRender && { cellRender: valueCellRender }) },
             { dataField: 'Count', dataType: 'number', caption: 'N°' }
         ]);
-    }, [md]);
+    }, [md, valueCellRender]);
     const customSummary = useMemo(() => {
         return ({
             totalItems: [

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

@@ -16,6 +16,8 @@ interface ITMUserChooserProps extends ITMChooserProps {
     initialShowChooser?: boolean;
     /** Allow showing all users with toggle button */
     allowShowAllUsers?: boolean;
+    /** If true, uses UserListCacheService.GetAllAdminAsync() instead of GetAllAsync() */
+    adminMode?: boolean;
     /** Funzione per aggiornare lo stato di apertura della modale */
     updateIsModalOpen?: (isOpen: boolean) => void;
 }
@@ -30,6 +32,8 @@ interface ITMUserChooserFormProps extends ITMChooserFormProps<UserDescriptor> {
     hideShowId?: boolean;
     /** Allow showing all users with toggle button */
     allowShowAllUsers?: boolean;
+    /** If true, uses UserListCacheService.GetAllAdminAsync() instead of GetAllAsync() */
+    adminMode?: boolean;
 }
 export declare const TMUserChooserForm: React.FunctionComponent<ITMUserChooserFormProps>;
 export declare const TMUserIcon: ({ ud }: {

package/lib/components/choosers/TMUserChooser.js

@@ -8,7 +8,7 @@ import TMSummary from '../editors/TMSummary';
 import TMChooserForm from '../forms/TMChooserForm';
 import TMButton from '../base/TMButton';
 import TMDataUserIdItemViewer from '../viewers/TMDataUserIdItemViewer';
-const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon, width, dataSource, backgroundColor, openChooserBySingleClick, buttons = [], disabled = false, showBorder = true, hideRefresh = false, hideShowId = false, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton, initialShowChooser = false, allowShowAllUsers = false, updateIsModalOpen }) => {
+const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon, width, dataSource, backgroundColor, openChooserBySingleClick, buttons = [], disabled = false, showBorder = true, hideRefresh = false, hideShowId = false, elementStyle, allowMultipleSelection, values, isModifiedWhen, label, placeHolder, validationItems = [], onValueChanged, showClearButton, initialShowChooser = false, allowShowAllUsers = false, adminMode = false, updateIsModalOpen }) => {
     const [showChooser, setShowChooser] = useState(initialShowChooser);
     useEffect(() => {
         setShowChooser(initialShowChooser);
@@ -24,14 +24,14 @@ const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon,
                         updateIsModalOpen?.(true);
                     }
                 }, elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
-                _jsx(TMUserChooserForm, { title: titleForm, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, dataSource: dataSource, filter: filter, selectedIDs: values, hideRefresh: hideRefresh, hideShowId: hideShowId, allowShowAllUsers: allowShowAllUsers, onClose: () => {
+                _jsx(TMUserChooserForm, { title: titleForm, allowMultipleSelection: allowMultipleSelection, hasShowOnlySelectedItems: true, dataSource: dataSource, filter: filter, selectedIDs: values, hideRefresh: hideRefresh, hideShowId: hideShowId, allowShowAllUsers: allowShowAllUsers, adminMode: adminMode, onClose: () => {
                         setShowChooser(false);
                         summaryInputRef.current?.focus();
                         updateIsModalOpen?.(false);
                     }, onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMUserChooser;
-export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh = false, hideShowId = false, startWithShowOnlySelectedItems = true, filter, title, hasShowOnlySelectedItems, width, height, selectedIDs, dataSource, onClose, onChoose, allowShowAllUsers = false }) => {
+export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh = false, hideShowId = false, startWithShowOnlySelectedItems = true, filter, title, hasShowOnlySelectedItems, width, height, selectedIDs, dataSource, onClose, onChoose, allowShowAllUsers = false, adminMode = false }) => {
     const [currentDataSource, setCurrentDataSource] = useState(dataSource);
     const [showingAllUsers, setShowingAllUsers] = useState(false);
     const dataColumns = useMemo(() => {
@@ -45,8 +45,10 @@ export const TMUserChooserForm = ({ allowMultipleSelection, columns, hideRefresh
     const getItems = async (refreshCache) => {
         TMSpinner.show({ description: `${SDKUI_Localizator.Loading} - ${SDK_Localizator.Users} ...` });
         if (refreshCache)
-            UserListCacheService.RemoveAll();
-        let allUsers = await UserListCacheService.GetAllAsync();
+            adminMode ? UserListCacheService.RemoveAllAdmin() : UserListCacheService.RemoveAll();
+        let allUsers = adminMode
+            ? await UserListCacheService.GetAllAdminAsync()
+            : await UserListCacheService.GetAllAsync();
         let users = filter ? allUsers?.filter(filter) : allUsers;
         TMSpinner.hide();
         return users;

package/lib/components/editors/TMFormulaEditor.d.ts

@@ -27,11 +27,13 @@ export declare class FormulaDescriptor {
     mid?: number;
     metadataDataTypeDest?: MetadataDataTypes;
     tid?: number;
+    description?: string;
 }
 export declare const renderFormulaIcon: (iconType: FormulaIconTypes, tid?: number, md?: MetadataDescriptor) => import("react/jsx-runtime").JSX.Element;
 declare const TMFormulaEditor: React.FunctionComponent<ITMApplyFormProps<FormulaDescriptor>>;
 export default TMFormulaEditor;
 export declare class FormulaHelper {
+    static translateDescInFormula: (text: string, returnType?: string) => string;
     static isFormula(value: string | undefined): boolean;
     static removeFormulaTag(value: string | undefined): string | undefined;
     static addFormulaTag(value: string | undefined): string | undefined;