@topconsultnpm/sdkui-react-beta 6.14.28 → 6.14.30

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

@@ -3,7 +3,7 @@ import { Colors, ITMEditorBase } from './TMEditorBase';
 interface ITMDropDown extends ITMEditorBase {
     dataSource?: any[];
     color?: Colors;
-    value?: string | number | undefined;
+    value?: string | number;
     disabled?: boolean;
     onValueChanged?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }

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

@@ -1,4 +1,11 @@
+/** 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;
+}
 export interface ITMPanelProps {
     allowMaximize?: boolean;
     color?: string;
@@ -12,11 +19,14 @@ export interface ITMPanelProps {
     toolbar?: any;
     padding?: string;
     isVisible?: boolean;
+    panelID?: string;
+    isActive?: boolean;
+    onActivate?: (panelID: string) => void;
+    onActiveChanged?: (isActive: boolean) => void;
     onBack?: () => void;
     onClose?: () => void;
     onHeaderDoubleClick?: () => void;
     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,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef, useState } from 'react';
+/** 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 { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
@@ -65,46 +69,57 @@ 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 [isPanelActive, setIsPanelActive] = useState(false);
+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);
+    // INTERNAL STATUS for UNCONTROLLED mode
+    const [internalIsActive, setInternalIsActive] = useState(false);
     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(() => {
-        // Se c'è un check di pending blur, annullalo
+    // If `isActive` prop is passed (it is not undefined), the component is checked.
+    const isControlled = isActive !== undefined;
+    // Use parent state if checked, otherwise use internal state.
+    const currentIsActive = isControlled ? isActive : internalIsActive;
+    // Focus/blur management logic for UNCONTROLLED mode
+    const pendingFocusCheck = useRef(null);
+    // Espone i metodi imperativi tramite useImperativeHandle
+    useImperativeHandle(ref, () => ({
+        focusPanel: () => {
+            // Imposta il focus sul div StyledPanelContent
+            panelRef.current?.focus();
+        },
+    }));
+    const handleFocusUncontrolled = useCallback(() => {
         if (pendingFocusCheck.current) {
             clearTimeout(pendingFocusCheck.current);
             pendingFocusCheck.current = null;
         }
-        setActiveStatus(true);
-    }, [setActiveStatus]);
-    const handleBlur = useCallback((event) => {
-        // Pulisci qualsiasi check precedente (importante se ci sono blur rapidi)
+        if (!internalIsActive) {
+            setInternalIsActive(true);
+            onActiveChanged?.(true);
+        }
+    }, [internalIsActive, onActiveChanged]);
+    const handleBlurUncontrolled = useCallback(() => {
         if (pendingFocusCheck.current) {
             clearTimeout(pendingFocusCheck.current);
         }
-        // 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);
+            if (panelRef.current && !panelRef.current.contains(document.activeElement)) {
+                setInternalIsActive(false);
+                onActiveChanged?.(false);
             }
-            pendingFocusCheck.current = null; // Resetta il timer
-        }, 50); // Piccolo ritardo, 50ms è un buon punto di partenza
-    }, [setActiveStatus]);
+        }, 50);
+    }, [onActiveChanged]);
+    const handleActivation = () => {
+        if (isControlled) {
+            // In modalità controllata, notifica il genitore.
+            // Il genitore sarà responsabile di aggiornare la prop `isActive`.
+            onActivate?.(panelID);
+        }
+        else {
+            // In modalità non controllata, gestisci internamente.
+            handleFocusUncontrolled();
+        }
+    };
     // handler for external maximize management
     const handleMaximize = () => {
         setIsMaximized(prevState => {
@@ -115,10 +130,10 @@ const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColor
             return newValue;
         });
     };
-    return (_jsxs(StyledPanelContainer, { className: "tmpanel-container", ref: panelRef, "$isMaximized": onMaximize ? false : isMaximized, style: {
+    return (_jsxs(StyledPanelContainer, { ref: panelRef, "$isMaximized": onMaximize ? false : isMaximized, style: {
             visibility: isVisible ? 'visible' : 'hidden',
-        }, tabIndex: -1, onFocus: handleFocus, onBlur: handleBlur, onClick: handleFocus, children: [showHeader &&
-                _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": isPanelActive, onDoubleClick: () => {
+        }, tabIndex: -1, onFocus: !isControlled ? handleFocusUncontrolled : undefined, onBlur: !isControlled ? handleBlurUncontrolled : undefined, onClick: handleActivation, children: [showHeader &&
+                _jsx(StyledPanelHeader, { "$backgroundColor": backgroundColor, "$color": color, "$isActive": currentIsActive, onDoubleClick: () => {
                         if (onHeaderDoubleClick)
                             onHeaderDoubleClick();
                         else
@@ -161,5 +176,5 @@ const TMPanel = ({ allowMaximize = true, color, backgroundColor, backgroundColor
                                 }, 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 })] }));
-};
+});
 export default TMPanel;

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,10 +17,12 @@ 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) {
-            clearFile();
+            clearFile(false);
             return;
         }
         ;
@@ -49,13 +51,20 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
         const file = e.dataTransfer.files[0];
         if (file)
             handleFile(file);
+        refocusAfterFileInput();
     };
-    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((refocus) => {
         setUploadedFile(null);
         setFileName('');
         setFileSize(undefined);
@@ -65,15 +74,18 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
         if (fileInput) {
             fileInput.value = '';
         }
-    };
-    const browseHandler = () => {
+        //Rifocalizza dopo la cancellazione del file
+        if (refocus)
+            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, " "] })] }) }) :
-        _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: { 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(true), 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, panelID: 'file-uploader-panel', 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/workflow/TMWorkflowPopup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { SDK_Globals } from '@topconsultnpm/sdk-ts-beta';
+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";
@@ -92,12 +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));
-    // }, [])
-    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) => {
+    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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.14.28",
+    "version": "6.14.30",
     "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",