@topconsultnpm/sdkui-react-beta 6.14.27 → 6.14.28

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.js

@@ -66,28 +66,45 @@ const StyledPanelContent = styled.div `
     }
 `;
 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 [isPanelActive, setIsPanelActive] = useState(false);
     const [isMaximized, setIsMaximized] = useState(false);
-    const titleRowRef = useRef(null);
+    const panelRef = useRef(null);
+    const pendingFocusCheck = useRef(null); // Per un timer
+    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 +115,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 +160,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/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,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
 import styled from "styled-components";
 import { SDKUI_Localizator, IconApply, IconCloseOutline, IconUser, IconInfo } from "../../../helper";
@@ -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) {
@@ -96,5 +96,8 @@ export const WorkFlowReAssignPopUp = ({ DID = 0, TID = 0, deviceType = DeviceTyp
     //     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(() => { }, []);
+    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, { 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.28",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",