@topconsultnpm/sdkui-react-beta 6.14.27 → 6.14.29

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

@@ -1,3 +1,7 @@
+import React from 'react';
+export interface ITMDropDownMenuRef {
+    focus: () => void;
+}
 export interface ITMDropDownMenu {
     content: JSX.Element;
     color?: string;
@@ -14,5 +18,5 @@ export interface ITMDropDownMenuItem {
     beginGroup?: boolean;
     onClick?: () => void;
 }
-declare const TMDropDownMenu: ({ content, items, disabled, color, backgroundColor, borderRadius }: ITMDropDownMenu) => import("react/jsx-runtime").JSX.Element;
+declare const TMDropDownMenu: React.ForwardRefExoticComponent<ITMDropDownMenu & React.RefAttributes<ITMDropDownMenuRef>>;
 export default TMDropDownMenu;

package/lib/components/base/TMDropDownMenu.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useState, forwardRef, useRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
 import ContextMenu from 'devextreme-react/context-menu';
 import { FontSize, TMColors } from '../../utils/theme';
@@ -30,10 +30,16 @@ const StyledMenuItem = styled.div `
     width: 100%;
     font-size: ${FontSize.defaultFontSize};
 `;
-const TMDropDownMenu = ({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius }) => {
+const TMDropDownMenu = forwardRef(({ content, items, disabled = false, color = TMColors.text_normal, backgroundColor = TMColors.default_background, borderRadius }, ref) => {
     const [id, setID] = useState('');
+    const dropDownMenuElementRef = useRef(null); // Ref all'elemento DOM div principale
     useEffect(() => { setID(genUniqueId()); }, [content]);
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            dropDownMenuElementRef.current?.focus();
+        },
+    }));
     const renderItemTemplate = (itemData) => (_jsxs(StyledMenuItem, { children: [itemData.icon && _jsx("div", { style: { display: 'flex', alignItems: 'center' }, children: itemData.icon }), _jsx("span", { style: { flexGrow: 1 }, children: itemData.text }), itemData.items && _jsx("span", { className: "dx-icon-spinright dx-icon", style: { marginLeft: '10px' } })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }), _jsx(ContextMenu, { target: `#idContainer${id}`, dataSource: items, showEvent: 'click', itemRender: renderItemTemplate })] }));
-};
+    return (_jsxs(_Fragment, { children: [_jsx(StyledContent, { id: `idContainer${id}`, ref: dropDownMenuElementRef, tabIndex: disabled ? -1 : 0, "$disabled": disabled, "$color": color, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, children: content }), _jsx(ContextMenu, { target: `#idContainer${id}`, dataSource: items, showEvent: 'click', itemRender: renderItemTemplate, onHidden: (e) => dropDownMenuElementRef.current?.focus() })] }));
+});
 export default TMDropDownMenu;

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

@@ -1,4 +1,7 @@
 import React from 'react';
+export interface ITMPanelRef {
+    focusPanel: () => void;
+}
 export interface ITMPanelProps {
     allowMaximize?: boolean;
     color?: string;
@@ -18,5 +21,5 @@ export interface ITMPanelProps {
     onMaximize?: (isMaximized: boolean) => void;
     onActiveChanged?: (isActive: boolean) => void;
 }
-declare const TMPanel: React.FC<ITMPanelProps>;
+declare const TMPanel: React.ForwardRefExoticComponent<ITMPanelProps & React.RefAttributes<ITMPanelRef>>;
 export default TMPanel;

package/lib/components/base/TMPanel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
 import { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
@@ -65,29 +65,53 @@ const StyledPanelContent = styled.div `
         outline: none;
     }
 `;
-const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', isVisible = true, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged }) => {
-    const [isActive, setIsActive] = useState(false);
+const TMPanel = forwardRef(({ allowMaximize = true, color, backgroundColor, backgroundColorContainer, children, showHeader = true, title, totalItems, displayedItemsCount, toolbar, padding = '5px', isVisible = true, onBack, onClose, onHeaderDoubleClick, onMaximize, onActiveChanged }, ref) => {
+    const [isPanelActive, setIsPanelActive] = useState(false);
     const [isMaximized, setIsMaximized] = useState(false);
-    const titleRowRef = useRef(null);
+    const panelRef = useRef(null);
+    const pendingFocusCheck = useRef(null); // Per un timer
+    // Espone i metodi imperativi tramite useImperativeHandle
+    useImperativeHandle(ref, () => ({
+        focusPanel: () => {
+            // Imposta il focus sul div StyledPanelContent
+            panelRef.current?.focus();
+        },
+    }));
+    const setActiveStatus = useCallback((isActive) => {
+        if (isPanelActive !== isActive) { // Solo se lo stato cambia
+            setIsPanelActive(isActive);
+            onActiveChanged?.(isActive);
+        }
+    }, [isPanelActive, onActiveChanged]);
     const handleFocus = useCallback(() => {
-        if (!isActive) {
-            setIsActive(true);
-            onActiveChanged?.(true);
+        // Se c'è un check di pending blur, annullalo
+        if (pendingFocusCheck.current) {
+            clearTimeout(pendingFocusCheck.current);
+            pendingFocusCheck.current = null;
         }
-    }, [isActive, onActiveChanged]);
-    const handleBlur = useCallback(() => {
-        // Usiamo un setTimeout per dare il tempo al browser di spostare il focus
-        // e controllare se il focus è andato a un figlio che poi si è disconnesso
-        // o se il focus è uscito definitivamente dal pannello
-        // setTimeout(() => {
-        if (!document.activeElement || !document.activeElement.closest('tmpanel-container')) {
-            if (isActive) {
-                setIsActive(false);
-                onActiveChanged?.(false);
-            }
+        setActiveStatus(true);
+    }, [setActiveStatus]);
+    const handleBlur = useCallback((event) => {
+        // Pulisci qualsiasi check precedente (importante se ci sono blur rapidi)
+        if (pendingFocusCheck.current) {
+            clearTimeout(pendingFocusCheck.current);
         }
-        // }, 0); // Un piccolo ritardo per consentire al browser di stabilire il nuovo activeElement
-    }, [isActive, onActiveChanged]);
+        // Programma un controllo dopo un brevissimo ritardo
+        // Questo permette al browser e a DevExtreme di stabilizzare il focus
+        pendingFocusCheck.current = setTimeout(() => {
+            const currentActiveElement = document.activeElement;
+            // Se l'elemento attivo corrente è all'interno del pannello,
+            // non fare nulla (il focus è interno)
+            if (panelRef.current?.contains(currentActiveElement)) {
+                setActiveStatus(true); // Assicurati che sia attivo
+            }
+            else {
+                // Il focus è realmente uscito
+                setActiveStatus(false);
+            }
+            pendingFocusCheck.current = null; // Resetta il timer
+        }, 50); // Piccolo ritardo, 50ms è un buon punto di partenza
+    }, [setActiveStatus]);
     // handler for external maximize management
     const handleMaximize = () => {
         setIsMaximized(prevState => {
@@ -98,21 +122,21 @@ const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColor
             return newValue;
         });
     };
-    return (_jsxs(StyledPanelContainer, { className: "tmpanel-container", "$isMaximized": onMaximize ? false : isMaximized, style: {
+    return (_jsxs(StyledPanelContainer, { className: "tmpanel-container", ref: panelRef, "$isMaximized": onMaximize ? false : isMaximized, style: {
             visibility: isVisible ? 'visible' : 'hidden',
-        }, children: [showHeader &&
-                _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isActive, onDoubleClick: () => {
+        }, tabIndex: -1, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, children: [showHeader &&
+                _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isPanelActive, onDoubleClick: () => {
                         if (onHeaderDoubleClick)
                             onHeaderDoubleClick();
                         else
                             allowMaximize && handleMaximize();
-                    }, tabIndex: -1, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, children: _jsxs("div", { style: {
+                    }, children: _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',
                             width: '100%',
                             minWidth: 0
-                        }, children: [_jsxs("div", { ref: titleRowRef, style: {
+                        }, children: [_jsxs("div", { style: {
                                     display: 'flex',
                                     flexDirection: 'row',
                                     alignItems: 'center',
@@ -143,6 +167,6 @@ const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColor
                                     marginLeft: 10
                                 }, 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`, tabIndex: -1, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, children: children })] }));
-};
+                                            : _jsx(IconWindowMaximize, { fontSize: 16 }), btnStyle: 'icon', onClick: handleMaximize }), onClose && _jsx(TMButton, { color: 'primaryOutline', caption: SDKUI_Localizator.Close, icon: _jsx(IconClearButton, {}), btnStyle: 'icon', onClick: () => { setIsMaximized(false); onClose?.(); } })] })] }) }), _jsx(StyledPanelContent, { "$height": showHeader ? "calc(100% - 40px)" : "100%", "$padding": padding, "$backgroundColor": backgroundColorContainer ?? `#FFFFFF`, children: children })] }));
+});
 export default TMPanel;

package/lib/components/choosers/TMDataListItemChooser.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { SDK_Localizator, DataListCacheService } from '@topconsultnpm/sdk-ts-beta';
 import { StyledDivHorizontal } from '../base/Styled';
 import { IconSearch, SDKUI_Localizator, TMImageLibrary } from '../../helper';
@@ -13,8 +13,12 @@ const TMDataListItemChooser = ({ labelColor, dataListId, icon, backgroundColor,
         const isPlaceholder = values?.[0] === placeHolder;
         return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMDataListItemViewer, { dataListId: dataListId, value: values?.[0] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, labelColor: labelColor, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, openEditorOnSummaryClick: openChooserBySingleClick, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
-                _jsx(TMDataListItemChooserForm, { allowMultipleSelection: allowMultipleSelection, title: titleForm, dataListId: dataListId, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
+    const summaryInputRef = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, placeHolder: placeHolder, labelColor: labelColor, icon: icon, buttons: buttons, readOnly: readOnly, backgroundColor: backgroundColor, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, label: label, openEditorOnSummaryClick: openChooserBySingleClick, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
+                _jsx(TMDataListItemChooserForm, { allowMultipleSelection: allowMultipleSelection, title: titleForm, dataListId: dataListId, selectedIDs: values, onClose: () => {
+                        setShowChooser(false);
+                        summaryInputRef.current?.focus();
+                    }, onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
 };
 export default TMDataListItemChooser;
 const cellRenderIcon = (data) => _jsx(TMImageLibrary, { imageID: data.data?.imageID });

package/lib/components/choosers/TMDynDataListItemChooser.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { DataColumnTypes, SDK_Localizator, DataListCacheService, SDK_Globals, LayoutModes } from '@topconsultnpm/sdk-ts-beta';
 import { IconDetails, IconSearch, getDataColumnName, Globalization, SDKUI_Localizator, searchResultDescriptorToSimpleArray, IsParametricQuery, IconWarning } from '../../helper';
 import { StyledDivHorizontal } from '../base/Styled';
@@ -13,6 +13,7 @@ const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick
     const [showChooser, setShowChooser] = useState(false);
     const [dynDl, setDynDl] = useState();
     const [dataSource, setDataSource] = useState();
+    const summaryInputRef = useRef(null);
     useEffect(() => {
         let d = md?.dynDL_Cfgs?.[0];
         if (md?.dynDL_IsMultiCfg == 1) {
@@ -80,7 +81,10 @@ const TMDynDataListItemChooser = ({ tid, md, titleForm, openChooserBySingleClick
         return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [dataSource && _jsxs(StyledDivHorizontal, { children: [getIcon(), _jsx("p", { style: { marginLeft: '5px' }, children: getDescription() })] }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
     return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { placeHolder: placeHolder, icon: icon, labelColor: labelColor, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, readOnly: readOnly, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(true), elementStyle: elementStyle, isModifiedWhen: isModifiedWhen, openEditorOnSummaryClick: openChooserBySingleClick, label: label, template: renderTemplate(), onClearClick: showClearButton ? () => { onValueChanged?.([]); } : undefined, validationItems: validationItems }), showChooser &&
-                _jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, title: titleForm, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => setShowChooser(false), onChoose: (IDs) => {
+                _jsx(TMDynDataListItemChooserForm, { TID: tid, MID: md?.id, dynDL: dynDl, title: titleForm, allowMultipleSelection: allowMultipleSelection, searchResult: dataSource, selectedIDs: values, onClose: () => {
+                        setShowChooser(false);
+                        summaryInputRef.current?.focus();
+                    }, onChoose: (IDs) => {
                         onValueChanged?.(IDs);
                         if (!dynDl)
                             return;

package/lib/components/choosers/TMUserChooser.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { OwnershipLevels, SDK_Localizator, UserLevels, UserListCacheService } from '@topconsultnpm/sdk-ts-beta';
 import { SDKUI_Localizator, IconSearch, IconUserLevelMember, IconUserLevelAdministrator, IconUserLevelSystemAdministrator, IconUserLevelAutonomousAdministrator, IconWarning, LocalizeOwnershipLevels, LocalizeUserLevels } from '../../helper';
 import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipSeparatorItem } from '../base/Styled';
@@ -14,12 +14,16 @@ const TMUserChooser = ({ labelColor, titleForm, filter, readOnly = false, icon,
     useEffect(() => {
         setShowChooser(initialShowChooser);
     }, [initialShowChooser]);
+    const summaryInputRef = useRef(null);
     const renderTemplate = () => {
         const isPlaceholder = values?.[0] === placeHolder;
         return (_jsxs(StyledDivHorizontal, { style: { minWidth: '125px', color: isPlaceholder ? '#a9a9a9' : 'inherit' }, children: [values && values.length > 0 && _jsx(TMUserIdViewer, { userId: values?.[0], showIcon: true, noneSelectionText: '' }), values && values.length > 1 && _jsx("p", { style: { marginLeft: '10px' }, children: `(+${values.length - 1} ${values.length == 2 ? 'altro' : 'altri'})` })] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { disabled: disabled, placeHolder: placeHolder, readOnly: readOnly, labelColor: labelColor, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(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, onClose: () => setShowChooser(false), onChoose: (IDs) => { onValueChanged?.(IDs); } })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(TMSummary, { ref: summaryInputRef, disabled: disabled, placeHolder: placeHolder, readOnly: readOnly, labelColor: labelColor, icon: icon, backgroundColor: backgroundColor, buttons: buttons, showBorder: showBorder, hasValue: values && values.length > 0, showClearButton: showClearButton, iconEditButton: _jsx(IconSearch, { fontSize: 16 }), onEditorClick: () => !readOnly && setShowChooser(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, onClose: () => {
+                        setShowChooser(false);
+                        summaryInputRef.current?.focus();
+                    }, 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 }) => {

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import { ITMEditorBase } from '../base/TMEditorBase';
-interface ITMSummary extends ITMEditorBase {
+export interface ITMSummaryRef {
+    focus: () => void;
+}
+interface ITMSummaryProps extends ITMEditorBase {
     showBorder?: boolean;
     borderRadius?: string;
     showEditButton?: boolean;
@@ -13,5 +16,5 @@ interface ITMSummary extends ITMEditorBase {
     onClearClick?: () => void;
     onValueChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
-declare const TMSummary: React.FunctionComponent<ITMSummary>;
+declare const TMSummary: React.ForwardRefExoticComponent<ITMSummaryProps & React.RefAttributes<ITMSummaryRef>>;
 export default TMSummary;

package/lib/components/editors/TMSummary.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
 import { FontSize, TMColors } from '../../utils/theme';
 import { StyledEditorContainer, StyledEditorIcon, StyledEditorLabel, TMEditorsDefaultBorderRadius, editorColorManager } from './TMEditorStyled';
@@ -46,11 +47,22 @@ const StyledEditorButtonIcon2 = styled.div `
         border-bottom-color: ${TMColors.primary};
      }
 `;
-const TMSummary = ({ placeHolder, readOnly, labelColor, hasValue, borderRadius = '4px', validationItems = [], buttons = [], label = '', onClearClick, openEditorOnSummaryClick = true, onEditorClick, backgroundColor = 'transparent', showBorder = true, isModifiedWhen, elementStyle, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, icon, showEditButton = true, showClearButton, iconEditButton, iconeEditTooltip, labelPosition = 'left', template, disabled = false, onValueChanged }) => {
+const TMSummary = forwardRef(({ placeHolder, readOnly, labelColor, hasValue, borderRadius = '4px', validationItems = [], buttons = [], label = '', onClearClick, openEditorOnSummaryClick = true, onEditorClick, backgroundColor = 'transparent', showBorder = true, isModifiedWhen, elementStyle, width = '100%', height = '100%', fontSize = FontSize.defaultFontSize, icon, showEditButton = true, showClearButton, iconEditButton, iconeEditTooltip, labelPosition = 'left', template, disabled = false, onValueChanged }, ref) => {
+    const summaryElementRef = useRef(null); // Ref all'elemento DOM div principale
+    // Espone il metodo focus() tramite useImperativeHandle
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            summaryElementRef.current?.focus();
+        },
+    }));
+    const handleClearClick = (e) => {
+        e.stopPropagation(); // Evita che il click sul bottone di clear propaghi all'onClick del div
+        onClearClick?.();
+    };
     const renderTemplateField = () => {
-        return (_jsxs(StyledSummaryTemplateInput, { "$readOnly": readOnly, tabIndex: 0, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, "$isModified": isModifiedWhen, "$vil": validationItems, "$disabled": disabled, "$showBorder": showBorder, "$fontSize": fontSize, "$width": width, "$height": height, onChange: onValueChanged, children: [_jsx("div", { onClick: () => { if (openEditorOnSummaryClick && !disabled)
+        return (_jsxs(StyledSummaryTemplateInput, { ref: summaryElementRef, "$readOnly": readOnly, tabIndex: 0, "$backgroundColor": backgroundColor, "$borderRadius": borderRadius, "$isModified": isModifiedWhen, "$vil": validationItems, "$disabled": disabled, "$showBorder": showBorder, "$fontSize": fontSize, "$width": width, "$height": height, onChange: onValueChanged, children: [_jsx("div", { onClick: () => { if (openEditorOnSummaryClick && !disabled)
                         onEditorClick?.(); }, onDoubleClick: () => { if (!openEditorOnSummaryClick && !disabled)
-                        onEditorClick?.(); }, style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', userSelect: 'text', alignItems: 'center', width: '100%', minHeight: '16px', cursor: (openEditorOnSummaryClick && !readOnly) ? 'pointer' : 'default' }, children: template }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '3px', justifyContent: 'flex-start', alignItems: 'center', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && hasValue && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onClearClick?.(), onClick: onClearClick, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Clear, children: _jsx(IconClearButton, {}) }) }), showEditButton && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onEditorClick?.(), onClick: onEditorClick, children: _jsx(TMTooltip, { content: iconeEditTooltip ?? SDKUI_Localizator.Update, children: iconEditButton ?? _jsx(IconPencil, {}) }) }), buttons.map((buttonItem) => {
+                        onEditorClick?.(); }, style: { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', userSelect: 'text', alignItems: 'center', width: '100%', minHeight: '16px', cursor: (openEditorOnSummaryClick && !readOnly) ? 'pointer' : 'default' }, children: template }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '3px', justifyContent: 'flex-start', alignItems: 'center', pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? 0.4 : 1 }, children: [showClearButton && hasValue && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onClearClick?.(), onClick: handleClearClick, children: _jsx(TMTooltip, { content: SDKUI_Localizator.Clear, children: _jsx(IconClearButton, {}) }) }), showEditButton && _jsx(StyledEditorButtonIcon2, { tabIndex: disabled ? -1 : 0, onKeyDown: (e) => e.code === 'Space' && onEditorClick?.(), onClick: onEditorClick, children: _jsx(TMTooltip, { content: iconeEditTooltip ?? SDKUI_Localizator.Update, children: iconEditButton ?? _jsx(IconPencil, {}) }) }), buttons.map((buttonItem) => {
                             return (_jsx(StyledEditorButtonIcon2, { onClick: buttonItem.onClick, children: _jsx(TMTooltip, { content: buttonItem.text, children: buttonItem.icon }) }, buttonItem.text));
                         })] })] }));
     };
@@ -61,5 +73,5 @@ const TMSummary = ({ placeHolder, readOnly, labelColor, hasValue, borderRadius =
         return (_jsxs(TMLayoutContainer, { direction: 'horizontal', children: [icon && _jsx(TMLayoutItem, { width: '20px', children: icon && _jsx(StyledEditorIcon, { "$disabled": disabled, "$vil": validationItems, "$isModified": isModifiedWhen, children: icon }) }), _jsx(TMLayoutItem, { children: _jsxs(StyledEditorContainer, { "$width": width, children: [label && renderLabel(), renderTemplateField(), _jsx(TMVilViewer, { vil: validationItems })] }) })] }));
     };
     return (_jsx("div", { style: elementStyle, children: renderSummary() }));
-};
+});
 export default TMSummary;

package/lib/components/features/documents/TMFileUploader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { IconFolderOpen, SDKUI_Localizator, formatBytes, IconClear, extensionHandler, IconCloseOutline } from '../../../helper';
 import usePreventFileDrop from '../../../hooks/usePreventFileDrop';
@@ -17,6 +17,8 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
     const [fileSize, setFileSize] = useState(undefined);
     const [fileExt, setFileExt] = useState(undefined);
     const uploaderRef = useRef(null);
+    // Ref al TMPanel per chiamare focusPanel()
+    const fileUploaderPanelRef = useRef(null);
     usePreventFileDrop([uploaderRef]);
     useEffect(() => {
         if (!defaultBlob) {
@@ -50,12 +52,18 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
         if (file)
             handleFile(file);
     };
-    const handleInputChange = (e) => {
-        const file = e.target.files?.[0];
+    // Funzione per rifocalizzare il pannello dopo la selezione del file
+    const refocusAfterFileInput = useCallback(() => {
+        fileUploaderPanelRef.current?.focusPanel();
+    }, []);
+    const handleInputChange = useCallback((event) => {
+        const file = event.target.files?.[0] || null;
         if (file)
             handleFile(file);
-    };
-    const clearFile = () => {
+        // Important: Rifocalizza dopo che il file input ha finito
+        refocusAfterFileInput();
+    }, [onFileUpload, refocusAfterFileInput]);
+    const clearFile = useCallback(() => {
         setUploadedFile(null);
         setFileName('');
         setFileSize(undefined);
@@ -65,15 +73,17 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
         if (fileInput) {
             fileInput.value = '';
         }
-    };
-    const browseHandler = () => {
+        // Rifocalizza dopo la cancellazione del file
+        refocusAfterFileInput();
+    }, [onFileUpload, refocusAfterFileInput]);
+    const browseHandler = useCallback(() => {
         document.getElementById('fileInput')?.click();
-    };
+    }, []);
     let content = !uploadedFile ?
-        _jsx("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: _jsxs(UploadContainer, { ref: uploaderRef, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsx("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }) }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? 'Clicca per sfogliare il tuo file' : 'Trascina il tuo file qui o fai doppio click per sfogliarlo' }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] }) }) :
+        _jsx("div", { style: { display: 'flex', gap: 10, width: '100%', height: '100%' }, children: _jsxs(UploadContainer, { ref: uploaderRef, tabIndex: 0, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: { backgroundColor: dragOver ? '#76b1e6' : 'white' }, onDoubleClick: browseHandler, "$isRequired": isRequired, children: [_jsx("div", { style: { display: 'flex', gap: '10px', flexDirection: 'column', position: 'absolute', right: 5, top: 5 }, children: _jsx(TMButton, { btnStyle: 'icon', caption: 'Sfoglia', color: isRequired && !uploadedFile ? 'error' : 'primary', onClick: browseHandler, icon: _jsx(IconFolderOpen, { fontSize: 22 }) }) }), _jsx("p", { style: { fontSize: '1.2rem', fontWeight: 'bold' }, children: deviceType === DeviceType.MOBILE ? 'Clicca per sfogliare il tuo file' : 'Trascina il tuo file qui o fai doppio click per sfogliarlo' }), isRequired && _jsxs("p", { style: { fontWeight: 'bold' }, children: [" ", SDKUI_Localizator.RequiredField, " "] })] }) }) :
         _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%', height: '100%' }, children: [_jsxs("div", { style: { backgroundColor: 'white', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 5 }, children: [_jsx("p", { children: "File name:" }), _jsxs("div", { style: { fontWeight: 'bold' }, children: [fileName, " ", _jsxs("span", { children: [" ", ` (${formatBytes(fileSize)})`, " "] })] })] }), uploadedFile && _jsx(TMButton, { btnStyle: 'icon', color: 'error', caption: 'Pulisci', onClick: clearFile, icon: _jsx(IconClear, { fontSize: 22 }) })] }), extensionHandler(fileExt) === FileExtensionHandler.READY_TO_SHOW ? _jsx(TMFileViewer, { fileBlob: uploadedFile, isResizingActive: isResizingActive }) :
                     _jsx("div", { style: { backgroundColor: '#f6dbdb', padding: '5px 10px', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'space-between', color: TMColors.error }, children: _jsxs("div", { children: [" ", 'Anteprima non disponibile.', fileExt && _jsx("b", { children: ` (*.${fileExt})` })] }) })] });
-    return (_jsx(TMPanel, { title: SDKUI_Localizator.FileUpload, onBack: deviceType === DeviceType.MOBILE ? () => onClose?.() : undefined, toolbar: deviceType !== DeviceType.MOBILE ? _jsx(StyledHeaderIcon, { onClick: onClose, "$color": 'white', children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) }) : undefined, children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '2px', display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), content] }) }));
+    return (_jsx(TMPanel, { ref: fileUploaderPanelRef, title: SDKUI_Localizator.FileUpload, onBack: deviceType === DeviceType.MOBILE ? () => onClose?.() : undefined, toolbar: deviceType !== DeviceType.MOBILE ? _jsx(StyledHeaderIcon, { onClick: onClose, "$color": 'white', children: _jsx(TMTooltip, { content: SDKUI_Localizator.Close, children: _jsx(IconCloseOutline, {}) }) }) : undefined, children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '2px', display: 'flex', flexDirection: 'column', gap: 10 }, children: [_jsx(HiddenInput, { id: "fileInput", type: "file", onChange: handleInputChange }), content] }) }));
 };
 const UploadContainer = styled.div ` 
 position: relative;

package/lib/components/features/search/TMSearchQueryEditor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { LayoutModes, DcmtTypeListCacheService, PlatformObjectValidator, MetadataDataTypes, QueryOperators, DataListCacheService, MetadataDataDomains, SDK_Localizator, UserListCacheService } from '@topconsultnpm/sdk-ts-beta';
 import styled from 'styled-components';
 import { LocalizeQueryOperators, getDefaultOperator, SDKUI_Localizator, IconUndo, IconPencil, IconDataList, IconFunction, IconMenuVertical, IconClearButton, displayMetadataValue, SDKUI_Globals } from '../../../helper';
@@ -248,6 +248,7 @@ const TMSearchWhereItemViewer = React.memo(({ isSelected = false, whereItem, sho
 });
 const WhereItemRow = React.memo(({ whereItem, index, dcmtTypesList, isExpertMode, isSelected, isEditable, currentEditingMID, queryParamsDynDataList, onItemChange, onItemSelect, onAdvancedMenuClick, onCascadeRefreshDynDataLists, onCascadeUpdateMIDs, onHideMobileEditor }) => {
     const deviceType = useDeviceType();
+    const dropDownMenuRef = useRef(null);
     // Trova il metadata descriptor per l'item corrente
     const md = useMemo(() => {
         const dtd = dcmtTypesList.find(o => o.id === whereItem.tid);
@@ -323,6 +324,7 @@ const WhereItemRow = React.memo(({ whereItem, index, dcmtTypesList, isExpertMode
                     icon: isEditable ? _jsx(IconUndo, {}) : _jsx(IconPencil, {}),
                     onClick: () => {
                         onAdvancedMenuClick({ tid: whereItem.tid, mid: whereItem.mid, button: AdvancedMenuButtons.MakeEditable });
+                        dropDownMenuRef.current?.focus();
                     }
                 }] : []),
             {
@@ -331,6 +333,7 @@ const WhereItemRow = React.memo(({ whereItem, index, dcmtTypesList, isExpertMode
                 onClick: () => {
                     onItemSelect(whereItem.tid, whereItem.mid); // Seleziona prima di chiamare l'azione
                     onAdvancedMenuClick({ tid: whereItem.tid, mid: whereItem.mid, button: AdvancedMenuButtons.DistinctValues });
+                    dropDownMenuRef.current?.focus();
                 }
             }
         ];
@@ -351,5 +354,5 @@ const WhereItemRow = React.memo(({ whereItem, index, dcmtTypesList, isExpertMode
                         ? _jsx(IconFunction, { color: "#1a89d3", fontSize: 14, style: { position: "absolute", top: '-5px', left: '-10px' } })
                         : isEditable
                             ? _jsx(IconPencil, { color: "#138603", fontSize: 14, style: { position: "absolute", top: '-5px', left: '-10px' } })
-                            : null] }), _jsx("div", { style: { gridColumn: 4 }, children: _jsx(TMDropDownMenu, { backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: advancedMenuItems }) })] }));
+                            : null] }), _jsx("div", { style: { gridColumn: 4 }, children: _jsx(TMDropDownMenu, { ref: dropDownMenuRef, backgroundColor: 'white', color: TMColors.button_icon, borderRadius: '3px', content: _jsx(TMButton, { btnStyle: 'icon', icon: _jsx(IconMenuVertical, {}), showTooltip: false }), items: advancedMenuItems }) })] }));
 });

package/lib/components/features/workflow/TMWorkflowPopup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
+import { useEffect, useState } from "react";
+import { SDK_Globals, UserListCacheService } from '@topconsultnpm/sdk-ts-beta';
 import styled from "styled-components";
 import { SDKUI_Localizator, IconApply, IconCloseOutline, IconUser, IconInfo } from "../../../helper";
 import { TMColors } from "../../../utils/theme";
@@ -66,7 +66,7 @@ export const WorkFlowApproveRejectPopUp = ({ TID = 0, DID = 0, deviceType = Devi
 };
 export const WorkFlowReAssignPopUp = ({ DID = 0, TID = 0, deviceType = DeviceType.DESKTOP, onClose, selectedItems = [], onCompleted }) => {
     const [commentValue, setCommentValue] = useState('');
-    const [selectedUserID, setSelectedUserID] = useState();
+    const [selectedUserID, setSelectedUserID] = useState([]);
     const [participants, setParticipants] = useState([]);
     const disable = commentValue.length === 0 || !selectedUserID;
     const count = () => { return selectedItems.length.toString() + ' Workitem'; };
@@ -80,7 +80,7 @@ export const WorkFlowReAssignPopUp = ({ DID = 0, TID = 0, deviceType = DeviceTyp
                 ? selectedItems.map(({ TID, DID }) => ({ TID, DID }))
                 : [{ TID, DID }];
             for (const { TID, DID } of items) {
-                await SDK_Globals.tmSession?.NewWorkflowEngine().WorkItem_ReassignAsync(TID, DID, selectedUserID, commentValue);
+                await SDK_Globals.tmSession?.NewWorkflowEngine().WorkItem_ReassignAsync(TID, DID, selectedUserID?.[0], commentValue);
             }
         }
         catch (e) {
@@ -92,9 +92,16 @@ export const WorkFlowReAssignPopUp = ({ DID = 0, TID = 0, deviceType = DeviceTyp
             TMSpinner.hide();
         }
     };
-    // useEffect(() => {
-    //     SDK_Globals.tmSession?.NewWorkflowEngine().RetrieveAllAsync().then((o) => console.log('WFs', o));
-    //     SDK_Globals.tmSession?.NewWorkflowEngine().RetrieveAsync(11283).then((o) => console.log('WF', o));
-    // }, [])
-    return (_jsx(TMModal, { toolbar: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconUser, { fontSize: 16 }), caption: 'Riassegna', disabled: disable, onClick: () => !disable && reAssignWorkFlowAsync(), advancedColor: TMColors.tertiary }), onClose: onClose, width: deviceType === DeviceType.MOBILE ? '95%' : '60%', height: '60%', isModal: true, title: 'Riassegna workflow ' + (selectedItems.length > 0 ? '(' + count() + ')' : ''), children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '10px', display: 'flex', flexDirection: 'column', gap: 5 }, children: [_jsx(TMUserChooser, { value: selectedUserID, onValueChanged: (e) => setSelectedUserID(e) }), _jsxs("p", { style: { color: commentValue.length === 0 ? TMColors.error : 'black' }, children: ["Commento ", commentValue.length === 0 && _jsx("span", { children: ' (Campo obbligatorio)' }), " "] }), _jsx(StyledTextArea, { "$isValid": commentValue.length !== 0, value: commentValue, onChange: (e) => setCommentValue(e.target.value) })] }) }));
+    useEffect(() => {
+        const items = selectedItems.length > 0
+            ? selectedItems.map(({ TID, DID }) => ({ TID, DID }))
+            : [{ TID, DID }];
+        SDK_Globals.tmSession?.NewWorkflowEngine().WFApprGetWFInfoAsync(items?.[0].TID).then(async (w) => {
+            let users = await UserListCacheService.GetAllAsync();
+            setParticipants(users.filter((u) => w?.participants?.some((p) => p.userID === u.id)));
+        }).catch(err => TMExceptionBoxManager.show({ exception: err }));
+    }, [selectedItems]);
+    return (_jsx(TMModal, { toolbar: _jsx(TMButton, { btnStyle: 'advanced', showTooltip: false, icon: _jsx(IconUser, { fontSize: 16 }), caption: 'Riassegna', disabled: disable, onClick: () => !disable && reAssignWorkFlowAsync(), advancedColor: TMColors.tertiary }), onClose: onClose, width: deviceType === DeviceType.MOBILE ? '95%' : '60%', height: '60%', isModal: true, title: 'Riassegna workflow ' + (selectedItems.length > 0 ? '(' + count() + ')' : ''), children: _jsxs("div", { style: { width: '100%', height: '100%', padding: '10px', display: 'flex', flexDirection: 'column', gap: 5 }, children: [_jsx(TMUserChooser, { dataSource: participants, values: selectedUserID, onValueChanged: (IDs) => {
+                        setSelectedUserID(IDs ?? []);
+                    } }), _jsxs("p", { style: { color: commentValue.length === 0 ? TMColors.error : 'black' }, children: ["Commento ", commentValue.length === 0 && _jsx("span", { children: ' (Campo obbligatorio)' }), " "] }), _jsx(StyledTextArea, { "$isValid": commentValue.length !== 0, value: commentValue, onChange: (e) => setCommentValue(e.target.value) })] }) }));
 };

package/lib/components/viewers/TMDataListItemViewer.js

@@ -42,7 +42,6 @@ const TMDataListItemViewer = ({ dataListId, value, viewMode = DataListViewModes.
         else {
             stringValue = value;
         }
-        console.log('getIcon', stringValue);
         if (FormulaHelper.isFormula(stringValue))
             return null;
         return dataListItem ? _jsx(TMImageLibrary, { imageID: dataListItem.imageID }) : _jsx(IconWarning, { color: TMColors.warning });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.14.27",
+    "version": "6.14.29",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -42,7 +42,7 @@
         "lib"
     ],
     "dependencies": {
-        "@topconsultnpm/sdk-ts-beta": "6.14.4",
+        "@topconsultnpm/sdk-ts-beta": "6.14.5",
         "buffer": "^6.0.3",
         "devextreme": "24.2.6",
         "devextreme-react": "24.2.6",