@topconsultnpm/sdkui-react-beta 6.14.29 → 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,3 +1,7 @@
+/** 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;
@@ -15,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.ForwardRefExoticComponent<ITMPanelProps & React.RefAttributes<ITMPanelRef>>;
 export default TMPanel;

package/lib/components/base/TMPanel.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Gestione TMPanel "attivo / non attivo" secondo una pattern ibrido (Controlled/Uncontrolled Component):
+1) Modalità Non Controllata (Uncontrolled): Se non gli viene passata la prop "isActive", il pannello gestisce lo stato "attivo" internamente. Per l'uso singolo ("plug-and-play").
+2) Modalità Controllata (Controlled): Se il genitore passa la prop "isActive", il pannello cede il controllo e si affida completamente al genitore. Ideale per layout con più pannelli che necessitano di coordinamento.
+*/
 import { useCallback, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import styled from 'styled-components';
 import { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
@@ -65,11 +69,18 @@ const StyledPanelContent = styled.div `
         outline: none;
     }
 `;
-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 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
+    // 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: () => {
@@ -77,41 +88,38 @@ const TMPanel = forwardRef(({ allowMaximize = true, color, backgroundColor, back
             panelRef.current?.focus();
         },
     }));
-    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
+    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 => {
@@ -122,10 +130,10 @@ const TMPanel = forwardRef(({ allowMaximize = true, color, backgroundColor, back
             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

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

@@ -22,7 +22,7 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
     usePreventFileDrop([uploaderRef]);
     useEffect(() => {
         if (!defaultBlob) {
-            clearFile();
+            clearFile(false);
             return;
         }
         ;
@@ -51,6 +51,7 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
         const file = e.dataTransfer.files[0];
         if (file)
             handleFile(file);
+        refocusAfterFileInput();
     };
     // Funzione per rifocalizzare il pannello dopo la selezione del file
     const refocusAfterFileInput = useCallback(() => {
@@ -63,7 +64,7 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
         // Important: Rifocalizza dopo che il file input ha finito
         refocusAfterFileInput();
     }, [onFileUpload, refocusAfterFileInput]);
-    const clearFile = useCallback(() => {
+    const clearFile = useCallback((refocus) => {
         setUploadedFile(null);
         setFileName('');
         setFileSize(undefined);
@@ -73,17 +74,18 @@ const TMFileUploader = ({ deviceType = DeviceType.DESKTOP, onClose, onFileUpload
         if (fileInput) {
             fileInput.value = '';
         }
-        // Rifocalizza dopo la cancellazione del file
-        refocusAfterFileInput();
+        //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, 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 }) :
+        _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, { 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] }) }));
+    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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.14.29",
+    "version": "6.14.30",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",