@topconsultnpm/sdkui-react 6.22.0-dev2.9 → 6.22.0-t2

package/lib/components/layout/panelManager/TMPanelManagerContext.js

@@ -14,12 +14,14 @@ export const TMPanelManagerProvider = (props) => {
     const defaultPanelDimensionsRef = useRef(defaultDimensions);
     // Memoize the panel hierarchy map to avoid re-generating it on every render unless `panels` change
     const hierarchyMap = useMemo(() => generatePanelHierarchyMap(panels), [panels]);
-    // State to track the dimensions (width and height) of each panel, initialized with props
-    const [panelDimensions, setPanelDimensions] = useState(initialDimensions);
+    // State to track the visibility and the dimensions (width and height) of each panel, initialized with props
+    const [panelLayout, setPanelLayout] = useState({ visibility: {}, dimensions: initialDimensions });
+    // Visibility of each panel, keyed by panel ID
+    const panelVisibility = panelLayout.visibility;
+    // Dimensions of each panel, keyed by panel ID
+    const panelDimensions = panelLayout.dimensions;
     // IDs of maximized panels, including their parents if present
     const [maximizedPanels, setMaximizedPanels] = useState([]);
-    // State to track the visibility of each panel, keyed by panel ID
-    const [panelVisibility, setPanelVisibility] = useState({});
     // State to track visibility of toolbar buttons, keyed by panel ID
     const [toolbarButtonsVisibility, setToolbarButtonsVisibility] = useState({});
     // State to track disabled status of toolbar buttons, keyed by panel ID
@@ -31,94 +33,73 @@ export const TMPanelManagerProvider = (props) => {
         setToolbarButtonsVisibility(visibilityMap);
         setToolbarButtonsDisabled(disabledMap);
     }, []);
-    // Callback to update the visibility state of a specific panel and its related hierarchy
-    const adjustPanelVisibilityAndSize = useCallback((id, isVisible, prevVisibility) => {
+    // Callback to update the visibility state of a specific panel and its related hierarchy, redistributing the dimensions accordingly
+    const adjustPanelVisibilityAndSize = useCallback((id, isVisible, prevLayout) => {
         // Clone previous visibility state to work with
-        let updatedVisibility = { ...prevVisibility };
-        if (isMobile) {
-            if (isVisible) {
-                // On mobile, showing one panel hides all others first
-                updatedVisibility = Object.keys(prevVisibility).reduce((acc, key) => { acc[key] = false; return acc; }, {});
-                // Recursively determine and show parent panels
-                const parentsToShow = showParentRecursively(id, hierarchyMap);
-                parentsToShow.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                // Show the target panel
-                updatedVisibility[id] = true;
-                // Redistribute dimensions to account for newly shown panel
-                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility));
-            }
-            else {
-                // Hide the panel
-                updatedVisibility[id] = false;
-                // Recursively hide parents
-                const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
-                parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                4;
-                // Redistribute dimensions after hiding
-                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updatedVisibility));
+        let updatedVisibility = { ...prevLayout.visibility };
+        let updatedDimensions;
+        if (isVisible) {
+            // On mobile, showing one panel hides all others first
+            if (isMobile) {
+                updatedVisibility = Object.keys(prevLayout.visibility).reduce((acc, key) => { acc[key] = false; return acc; }, {});
             }
+            // Recursively determine and show parent panels
+            const parentsToShow = showParentRecursively(id, hierarchyMap);
+            parentsToShow.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
+            // Show the target panel
+            updatedVisibility[id] = true;
+            // Redistribute dimensions to account for newly shown panel
+            updatedDimensions = redistributeDimensionsOnShow(id, prevLayout.dimensions, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
         }
         else {
-            if (isVisible) {
-                // On desktop, show panel and its parents without hiding others
-                const parentsToShow = showParentRecursively(id, hierarchyMap);
-                parentsToShow.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                // Show the panel
-                updatedVisibility[id] = true;
-                // Adjust panel dimensions accordingly
-                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility));
-            }
-            else {
-                // Hide the panel
-                updatedVisibility[id] = false;
-                // Recursively hide parent panels
-                const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
-                parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                // Adjust dimensions after hiding
-                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updatedVisibility));
-            }
+            // Hide the panel
+            updatedVisibility[id] = false;
+            // Recursively hide parents
+            const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
+            parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
+            // Redistribute dimensions after hiding
+            updatedDimensions = redistributeDimensionsOnHide(id, prevLayout.dimensions, hierarchyMap, updatedVisibility);
         }
-        return updatedVisibility;
+        return { visibility: updatedVisibility, dimensions: updatedDimensions };
     }, [hierarchyMap, isMobile]);
     // On initial mount: initialize panel visibility using the provided `initialVisibility` config
     // Each panel's visibility is processed through `updatePanelVisibility` to ensure hierarchy logic is applied
     useEffect(() => {
         if (isPersistenceEnabled) {
             // If persistence is enabled, visibility and dimensions are already synced from persisted state, so just set them directly
-            setPanelVisibility(initialVisibility);
-            setPanelDimensions(initialDimensions);
+            setPanelLayout({ visibility: initialVisibility, dimensions: initialDimensions });
         }
         else {
             // If persistence is not enabled, recalculate visibility and dimensions based on the initial visibility, applying the hierarchy logic
-            let updated = { ...initialVisibility };
-            Object.entries(initialVisibility).forEach(([id, isVisible]) => {
-                updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+            setPanelLayout(prev => {
+                let updated = { visibility: { ...initialVisibility }, dimensions: prev.dimensions };
+                Object.entries(initialVisibility).forEach(([id, isVisible]) => {
+                    updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+                });
+                return updated;
             });
-            // Update panel visibility state with recalculated values
-            setPanelVisibility(updated);
         }
     }, []);
     // On mobile devices: automatically show the initial mobile panel when layout switches to mobile
     // This ensures the correct panel is visible by default on smaller screens
     useEffect(() => {
         if (isMobile) {
-            setPanelVisibility(prev => {
-                return adjustPanelVisibilityAndSize(initialMobilePanelId, true, prev);
-            });
+            setPanelLayout(prev => adjustPanelVisibilityAndSize(initialMobilePanelId, true, prev));
         }
         else {
             if (isPersistenceEnabled) {
                 // If persistence is enabled, visibility and dimensions are already synced from persisted state, so just set them directly
-                setPanelVisibility(initialVisibility);
+                setPanelLayout(prev => ({ ...prev, visibility: initialVisibility }));
             }
             else {
                 // If persistence is not enabled, recalculate visibility and dimensions based on the initial visibility, applying the hierarchy logic
-                let updated = { ...initialVisibility };
-                Object.entries(initialVisibility).forEach(([id, isVisible]) => {
-                    updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+                setPanelLayout(prev => {
+                    let updated = { visibility: { ...initialVisibility }, dimensions: prev.dimensions };
+                    Object.entries(initialVisibility).forEach(([id, isVisible]) => {
+                        updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+                    });
+                    return updated;
                 });
-                // Update panel visibility state with recalculated values
-                setPanelVisibility(updated);
             }
         }
     }, [isMobile]);
@@ -131,9 +112,9 @@ export const TMPanelManagerProvider = (props) => {
         // Update state to track which panels are maximized
         setMaximizedPanels(toMaximize);
         // Update panel dimensions accordingly
-        setPanelDimensions(prev => {
+        setPanelLayout(prev => {
             const newDimensions = {};
-            Object.keys(prev).forEach(pid => {
+            Object.keys(prev.dimensions).forEach(pid => {
                 if (toMaximize.includes(pid)) {
                     // For maximized panels (target + parents), set width and height to 100%
                     newDimensions[pid] = { width: '100%', height: '100%' };
@@ -143,31 +124,31 @@ export const TMPanelManagerProvider = (props) => {
                     newDimensions[pid] = { width: '0%', height: '0%' };
                 }
             });
-            return newDimensions;
+            return { ...prev, dimensions: newDimensions };
         });
     }, [hierarchyMap]);
     // Restore all panels to their original dimensions
     const resetMaximization = useCallback(() => {
         // Clear the list of maximized panels to exit maximize mode
         setMaximizedPanels([]);
-        // Clone the current visibility state of panels
-        let updatedVisibility = { ...panelVisibility };
         // Start with the initial panel dimensions as the base for restoration
-        let nextDimensions = { ...defaultPanelDimensionsRef.current };
-        nextDimensions = Object.entries(updatedVisibility).reduce((acc, [id, isVisible]) => {
-            if (isVisible) {
-                // If the panel is visible, adjust dimensions to show it properly
-                acc = redistributeDimensionsOnShow(id, acc, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
-            }
-            else {
-                // If the panel is hidden, adjust dimensions to hide it
-                acc = redistributeDimensionsOnHide(id, acc, hierarchyMap, updatedVisibility);
-            }
-            return acc;
-        }, defaultPanelDimensionsRef.current);
-        // Apply the recalculated dimensions to the panel state
-        setPanelDimensions(nextDimensions);
-    }, [panelVisibility, hierarchyMap]);
+        setPanelLayout(prev => {
+            const updatedVisibility = prev.visibility;
+            const nextDimensions = Object.entries(updatedVisibility).reduce((acc, [id, isVisible]) => {
+                if (isVisible) {
+                    // If the panel is visible, adjust dimensions to show it properly
+                    acc = redistributeDimensionsOnShow(id, acc, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
+                }
+                else {
+                    // If the panel is hidden, adjust dimensions to hide it
+                    acc = redistributeDimensionsOnHide(id, acc, hierarchyMap, updatedVisibility);
+                }
+                return acc;
+            }, defaultPanelDimensionsRef.current);
+            // Apply the recalculated dimensions to the panel state
+            return { ...prev, dimensions: nextDimensions };
+        });
+    }, [hierarchyMap]);
     // Toggle the maximized state of a panel by its ID
     const toggleMaximize = useCallback((id) => {
         if (maximizedPanels.includes(id)) {
@@ -186,17 +167,11 @@ export const TMPanelManagerProvider = (props) => {
             // If it is maximized, first reset all maximized panels to their original state
             resetMaximization();
             // Then update the visibility of the panel, toggling its current state
-            setPanelVisibility(prev => {
-                const isCurrentlyVisible = prev[id];
-                return adjustPanelVisibilityAndSize(id, !isCurrentlyVisible, prev);
-            });
+            setPanelLayout(prev => adjustPanelVisibilityAndSize(id, !prev.visibility[id], prev));
         }
         else {
             // If the panel is not maximized, simply toggle its visibility
-            setPanelVisibility(prev => {
-                const isCurrentlyVisible = prev[id];
-                return adjustPanelVisibilityAndSize(id, !isCurrentlyVisible, prev);
-            });
+            setPanelLayout(prev => adjustPanelVisibilityAndSize(id, !prev.visibility[id], prev));
         }
     }, [maximizedPanels, resetMaximization, adjustPanelVisibilityAndSize]);
     // Sets the visibility of a panel by its ID to a specific value (true = show, false = hide)
@@ -206,14 +181,14 @@ export const TMPanelManagerProvider = (props) => {
             resetMaximization();
         }
         // Then update the visibility state of the panel to the given value
-        setPanelVisibility(prev => adjustPanelVisibilityAndSize(id, isVisible, prev));
+        setPanelLayout(prev => adjustPanelVisibilityAndSize(id, isVisible, prev));
     }, [maximizedPanels, resetMaximization, adjustPanelVisibilityAndSize]);
     // Sets the dimensions (width and height) of a specific panel by its ID
     const setPanelDimensionsById = useCallback((id, width, height) => {
         // Update the ref holding the initial dimensions
         defaultPanelDimensionsRef.current = { ...defaultPanelDimensionsRef.current, [id]: { width, height } };
         // Update the panel dimensions state
-        setPanelDimensions(prev => ({ ...prev, [id]: { width, height } }));
+        setPanelLayout(prev => ({ ...prev, dimensions: { ...prev.dimensions, [id]: { width, height } } }));
     }, []);
     // Checks if there is at least one panel currently visible
     const hasVisiblePanels = useCallback(() => {

package/lib/components/layout/panelManager/TMPanelManagerToolbar.d.ts

@@ -1,14 +1,13 @@
 import React from 'react';
 import { TMPanelDefinition } from './types';
-export declare const StyledToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isDisabled" | "$isActive"> & {
+export declare const StyledToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $isActive?: boolean;
     $isDisabled?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isDisabled" | "$isActive"> & {
-    $isActive?: boolean;
-    $isDisabled?: boolean;
-}, never>>> & string;
+}>> & string;
 interface TMPanelManagerToolbarProps {
     panels: Array<TMPanelDefinition>;
 }
-declare const TMPanelManagerToolbar: (props: TMPanelManagerToolbarProps) => import("react/jsx-runtime").JSX.Element;
+declare const TMPanelManagerToolbar: (props: TMPanelManagerToolbarProps) => React.JSX.Element;
 export default TMPanelManagerToolbar;

package/lib/components/layout/panelManager/TMPanelManagerWithPersistenceProvider.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import type { TMPanelDefinition, TMPanelDimensionsMap } from './types';
 interface TMPanelManagerWithPersistenceProps {
     children: ReactNode;
@@ -17,5 +17,5 @@ interface TMPanelManagerWithPersistenceProps {
     }>) => void;
     persistedPanelStates?: Record<string, any>;
 }
-export declare const TMPanelManagerWithPersistenceProvider: (props: TMPanelManagerWithPersistenceProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TMPanelManagerWithPersistenceProvider: (props: TMPanelManagerWithPersistenceProps) => React.JSX.Element | null;
 export {};

package/lib/components/layout/panelManager/TMPanelWrapper.d.ts

@@ -1,8 +1,8 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { TMPanelDefinition } from './types';
 interface TMPanelWrapperProps {
     panel: TMPanelDefinition;
     children: ReactNode;
 }
-declare const TMPanelWrapper: (props: TMPanelWrapperProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const TMPanelWrapper: (props: TMPanelWrapperProps) => React.JSX.Element | null;
 export default TMPanelWrapper;

package/lib/components/layout/panelManager/TMPanelWrapper.js

@@ -34,8 +34,8 @@ const TMPanelWrapper = (props) => {
         // Applica 'flex' o 'none' solo se è già stato reso visibile almeno una volta
         display: isCurrentlyVisible ? 'flex' : 'none',
         flexDirection: 'column',
-        minWidth: '50px',
-        minHeight: '50px',
+        minWidth: panel.contentOptions?.minWidth ?? '50px',
+        minHeight: panel.contentOptions?.minHeight ?? '50px',
         width: width,
         height: height,
         pointerEvents: 'auto',

package/lib/components/layout/panelManager/types.d.ts

@@ -12,6 +12,9 @@ export interface TMPanelDefinition {
         isClosable?: boolean;
         isMaximizable?: boolean;
         panelContainer?: ITMPanelProps;
+        minWidth?: string;
+        minHeight?: string;
+        isCollapsed?: boolean;
     };
     toolbarOptions?: {
         icon: string | JSX.Element;

package/lib/components/layout/panelManager/utils.js

@@ -97,18 +97,20 @@ export const redistributeDimensionsOnHide = (hiddenPanelId, currentDimensions, h
     const hiddenWidthNum = parseFloat(hiddenDims.width);
     const hiddenHeightNum = parseFloat(hiddenDims.height);
     const visibleSiblings = siblings.filter(siblingId => panelVisibility[siblingId]);
-    const widthIncrement = hiddenWidthNum / visibleSiblings.length;
-    const heightIncrement = hiddenHeightNum / visibleSiblings.length;
     let newDimensions = { ...currentDimensions };
-    visibleSiblings.forEach(siblingId => {
-        const siblingDims = newDimensions[siblingId] || { width: '0%', height: '0%' };
-        const siblingWidthNum = parseFloat(siblingDims.width) || 0;
-        const siblingHeightNum = parseFloat(siblingDims.height) || 0;
-        const newWidthNum = Math.min(siblingWidthNum + widthIncrement, 100);
-        const newHeightNum = Math.min(siblingHeightNum + heightIncrement, 100);
-        newDimensions[siblingId] = { width: `${newWidthNum}%`, height: `${newHeightNum}%` };
-    });
-    newDimensions[hiddenPanelId] = { width: '0%', height: '0%' };
+    if (visibleSiblings.length > 0) {
+        const widthIncrement = hiddenWidthNum / visibleSiblings.length;
+        const heightIncrement = hiddenHeightNum / visibleSiblings.length;
+        visibleSiblings.forEach(siblingId => {
+            const siblingDims = newDimensions[siblingId] || { width: '0%', height: '0%' };
+            const siblingWidthNum = parseFloat(siblingDims.width) || 0;
+            const siblingHeightNum = parseFloat(siblingDims.height) || 0;
+            const newWidthNum = Math.min(siblingWidthNum + widthIncrement, 100);
+            const newHeightNum = Math.min(siblingHeightNum + heightIncrement, 100);
+            newDimensions[siblingId] = { width: `${newWidthNum}%`, height: `${newHeightNum}%` };
+        });
+        newDimensions[hiddenPanelId] = { width: '0%', height: '0%' };
+    }
     // Ora controllo se il parent non ha più figli visibili e chiamo ricorsivamente
     if (parentId) {
         const parentInfo = hierarchyMap.get(parentId);

package/lib/components/pages/TMPage.d.ts

@@ -34,5 +34,5 @@ interface ITMPage<T> {
     /** Indica il cambiamento dei contatori della lista (totali, selezionati e visibili) */
     onCountersChanged?: (totalItemsCount: number, selectedItemsCount: number, visibleItemsCount: number) => void;
 }
-declare const TMPage: <T>({ id, objClass, listDisabled, lastRefreshTime, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps, onSelectionChanged, onCountersChanged }: ITMPage<T>) => import("react/jsx-runtime").JSX.Element;
+declare const TMPage: <T>({ id, objClass, listDisabled, lastRefreshTime, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps, onSelectionChanged, onCountersChanged }: ITMPage<T>) => React.JSX.Element;
 export default TMPage;

package/lib/components/query/TMQueryEditor.d.ts

@@ -2,18 +2,22 @@ import React from 'react';
 import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { ITMApplyFormProps, FormModes } from '../../ts';
 import type { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
-export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$borderRadius"> & {
+export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $borderRadius?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$borderRadius"> & {
-    $borderRadius?: string;
-}, never>>> & string;
-export declare const StyledAccordionItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledAccordionItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & {
-    $disabled?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & {
+}>> & string;
+export declare const StyledAccordionItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledAccordionItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $disabled?: boolean;
-}, never>>> & string;
+}>> & string;
 export declare const colorValue = "rgba(224,224,224,.5)";
 export declare const colorBrackets = "rgba(209,52,56,.3)";
 export declare const colorOperator = "rgba(16,124,16,.3)";

package/lib/components/settings/SettingsAppearance.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 declare const SettingsAppearance: ({ landingPagesOptions, permissions, showConfirmPopup }: {
     landingPagesOptions?: {
         display: string;
@@ -11,5 +12,5 @@ declare const SettingsAppearance: ({ landingPagesOptions, permissions, showConfi
         workFlowLicense: boolean;
     };
     showConfirmPopup?: (title: string, onConfirm: () => void) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export default SettingsAppearance;

package/lib/components/sidebar/TMAboutApp.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 interface TMAboutAppProps {
     app: boolean;
     skdui: boolean;
     sdk: boolean;
     websdk: boolean;
 }
-export declare const TMAboutApp: (props: TMAboutAppProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TMAboutApp: (props: TMAboutAppProps) => React.JSX.Element;
 export {};

package/lib/components/sidebar/TMCommandsPanel.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-export declare const StyledCommandsPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isMobile"> & {
+export declare const StyledCommandsPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $isMobile?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$isMobile"> & {
-    $isMobile?: boolean;
-}, never>>> & string;
+}>> & string;
 export interface TMCommandItemProps {
     icon: React.ReactNode;
     selected?: boolean;

package/lib/components/sidebar/TMHeader.d.ts

@@ -36,8 +36,8 @@ export declare const TMSearchBar: ({ searchValue, onSearchValueChanged, maxWidth
     marginLeft?: string;
     searchValue: string;
     onSearchValueChanged: (value: string) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 declare const TMHeader: React.FC<ITMHeader>;
 export default TMHeader;
-export declare function IconHeaderNotifications(props: Readonly<React.SVGProps<SVGSVGElement>>): import("react/jsx-runtime").JSX.Element;
-export declare function IconHeaderSettings(props: Readonly<React.SVGProps<SVGSVGElement>>): import("react/jsx-runtime").JSX.Element;
+export declare function IconHeaderNotifications(props: Readonly<React.SVGProps<SVGSVGElement>>): React.JSX.Element;
+export declare function IconHeaderSettings(props: Readonly<React.SVGProps<SVGSVGElement>>): React.JSX.Element;

package/lib/components/sidebar/TMHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useRef, useMemo } from 'react';
 import six from '../../assets/six.png';
-import { getAvatarColor, IconCloseOutline, IconCopy, openApps, SDKUI_Localizator } from '../../helper';
+import { getAvatarColor, IconCloseOutline, IconCopy, IconOpenInNew, openApps, SDKUI_Localizator, WHATS_NEWS_LINK_URL } from '../../helper';
 import styled, { keyframes } from 'styled-components';
 import { SDK_Globals, AuthenticationModes, AppModules, UserLevels, CultureIDs } from '@topconsultnpm/sdk-ts';
 import { TMColors } from '../../utils/theme';
@@ -10,6 +10,7 @@ import { DeviceType, useDeviceType } from '../base/TMDeviceProvider';
 import { TMAboutApp } from './TMAboutApp';
 import ShowAlert from '../base/TMAlert';
 import TMResizableMenu from '../base/TMResizableMenu';
+import TMTooltip from '../base/TMTooltip';
 import it from '../../assets/italy.svg';
 import de from '../../assets/german.svg';
 import fr from '../../assets/france.svg';
@@ -253,10 +254,10 @@ const TMHeader = ({ customButtons = _jsx(_Fragment, {}), onMenusOpen, showSettin
                     e.preventDefault();
                     setMenuStatus(prev => !prev);
                 }, children: _jsx(UserAvatar, { "$bgColor": avatarColor, children: userInitials }) }), menuStatus &&
-                _jsx(TMResizableMenu, { ref: menuRef, isVisible: menuStatus, top: 60, right: 10, resizable: false, maxWidth: 300, minWidth: 300, maxHeight: 180, minHeight: 180, padding: 0, children: _jsxs(MenuContainer, { children: [_jsxs(UserProfileSection, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, height: 'max-content' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, height: 'max-content' }, children: [_jsx(AvatarContainer, { children: _jsx(UserAvatarLarge, { "$bgColor": avatarColor, children: userInitials }) }), _jsxs(UserInfo, { children: [_jsxs(UserNameContainer, { children: [_jsx(UserName, { children: userName }), _jsx(CultureFlag, { src: cultureFlag, alt: cultureName, title: cultureName })] }), domain && _jsx(SessionInfo, { style: { padding: 0, margin: 0 }, children: `(${domain})` })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', gap: 5 }, children: [_jsx(SessionInfo, { children: endpoint }), _jsx(SessionInfo, { children: archiveId + ' (' + archiveDesc + ')' })] })] }), _jsx(CopyIcon, { onClick: (e) => {
-                                            e.stopPropagation();
-                                            copyUserInfoToClipboard(userName, cultureId, archiveId, archiveDesc, endpoint, domain);
-                                        }, title: SDKUI_Localizator.CopyUserInfo, children: _jsx(IconCopy, { fontSize: 12 }) }), _jsx(LogoutButton, { onClick: () => {
+                _jsx(TMResizableMenu, { ref: menuRef, isVisible: menuStatus, top: 60, right: 10, resizable: false, maxWidth: 300, minWidth: 300, maxHeight: 188, minHeight: 188, padding: 0, children: _jsxs(MenuContainer, { children: [_jsxs(UserProfileSection, { children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, height: 'max-content', flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12, height: 'max-content' }, children: [_jsx(AvatarContainer, { children: _jsx(UserAvatarLarge, { "$bgColor": avatarColor, children: userInitials }) }), _jsxs(UserInfo, { children: [_jsxs(UserNameContainer, { children: [_jsx(UserName, { children: userName }), _jsx(CultureFlag, { src: cultureFlag, alt: cultureName, title: cultureName })] }), domain && _jsx(SessionInfo, { style: { padding: 0, margin: 0 }, children: `(${domain})` })] })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', gap: 5, flex: 1, minWidth: 0 }, children: [_jsx(SessionInfo, { children: endpoint }), _jsx(SessionInfo, { children: archiveId + ' (' + archiveDesc + ')' })] }), _jsxs(HeaderMenuActions, { children: [_jsx(TMTooltip, { content: SDKUI_Localizator.CopyUserInfo, children: _jsx(HeaderMenuActionIcon, { "$color": '#605e5c', onClick: (e) => {
+                                                                        e.stopPropagation();
+                                                                        copyUserInfoToClipboard(userName, cultureId, archiveId, archiveDesc, endpoint, domain);
+                                                                    }, children: _jsx(IconCopy, { fontSize: 14 }) }) }), _jsx(TMTooltip, { content: SDKUI_Localizator.ShowReleaseNotesInfo, children: _jsx(HeaderMenuActionIcon, { as: 'a', "$color": TMColors.primary, href: WHATS_NEWS_LINK_URL, target: '_blank', rel: 'noopener noreferrer', onClick: (e) => e.stopPropagation(), children: _jsx(IconOpenInNew, { fontSize: 14 }) }) })] })] })] }), _jsx(LogoutButton, { onClick: () => {
                                             setMenuStatus(false);
                                             onLogout && onLogout();
                                         }, children: _jsx(LogoutText, { children: SDKUI_Localizator.Logout }) })] }), _jsxs(BottomActionsContainer, { children: [isTopMediaAuth && (_jsx(BottomActionButton, { onClick: () => {
@@ -468,8 +469,9 @@ const MenuContainer = styled.div `
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
 `;
 const UserProfileSection = styled.div `
+    position: relative;
     display: flex;
-    padding: 20px;  
+    padding: 16px 20px;  
     background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
     border-bottom: 1px solid #e1e5e9;
     gap: 12px;
@@ -515,7 +517,7 @@ const CultureFlag = styled.img `
 `;
 const LogoutButton = styled.div `
     position: absolute;
-    top: 20px;
+    top: 16px;
     right: 20px;
     cursor: pointer;
     transition: all 0.2s ease;
@@ -546,29 +548,37 @@ const AvatarContainer = styled.div `
     position: relative;
     flex-shrink: 0;
 `;
-const CopyIcon = styled.div `
-    position: absolute;
-    bottom: 50px;
-    right: 15px;
-    width: 20px;
-    height: 20px;
+const HeaderMenuActions = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex-shrink: 0;
+`;
+const HeaderMenuActionIcon = styled.div `
+    width: 22px;
+    height: 22px;
     background: white;
-    border: 1px solid #e1e5e9;
+    border: 1px solid ${props => props.$color}55;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    color: #605e5c;
     transition: all 0.2s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    z-index: 10;
-    opacity: 0.6;
+    text-decoration: none;
 
-    &:hover {
-        background: #b7b7b7;
+    /* "&&" alza la specificita': un eventuale "a, a:visited { color: inherit }"
+       dell'app ospite vincerebbe sulla singola classe di styled-components */
+    &&,
+    &&:visited {
+        color: ${props => props.$color};
+    }
+
+    &&:hover {
+        background: ${props => props.$color};
+        border-color: ${props => props.$color};
         color: white;
-        opacity: 1;
     }
 
     &:active {

package/lib/components/viewers/TMDataListItemViewer.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DataListViewModes } from '@topconsultnpm/sdk-ts';
 import { DataGridTypes } from 'devextreme-react/data-grid';
 interface ITMDataListItemViewerProps {
@@ -7,6 +8,6 @@ interface ITMDataListItemViewerProps {
     showTooltip?: boolean;
     width?: string;
 }
-declare const TMDataListItemViewer: ({ dataListId, value, viewMode, showTooltip, width }: ITMDataListItemViewerProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const TMDataListItemViewer: ({ dataListId, value, viewMode, showTooltip, width }: ITMDataListItemViewerProps) => React.JSX.Element | null;
 export default TMDataListItemViewer;
-export declare const cellRenderDataListItem: (data: DataGridTypes.ColumnCellTemplateData, dataListId?: number, viewMode?: DataListViewModes) => import("react/jsx-runtime").JSX.Element;
+export declare const cellRenderDataListItem: (data: DataGridTypes.ColumnCellTemplateData, dataListId?: number, viewMode?: DataListViewModes) => React.JSX.Element;

package/lib/components/viewers/TMDataUserIdItemViewer.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { DataGridTypes } from 'devextreme-react/data-grid';
 interface ITMDataUserIdItemViewerProps {
     userId?: number;
     showIcon?: boolean;
 }
-declare const TMDataUserIdItemViewer: ({ userId, showIcon }: ITMDataUserIdItemViewerProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const TMDataUserIdItemViewer: ({ userId, showIcon }: ITMDataUserIdItemViewerProps) => React.JSX.Element | null;
 export default TMDataUserIdItemViewer;
-export declare const cellRenderUserIdItem: (data: DataGridTypes.ColumnCellTemplateData, showIcon?: boolean) => import("react/jsx-runtime").JSX.Element;
+export declare const cellRenderUserIdItem: (data: DataGridTypes.ColumnCellTemplateData, showIcon?: boolean) => React.JSX.Element;

package/lib/components/viewers/TMMidViewer.d.ts

@@ -22,7 +22,7 @@ interface ITMMetadataIcon {
     isMetadataSelected?: boolean;
     elementStyle?: React.CSSProperties;
 }
-export declare const TMMetadataIcon: ({ tid, md, color, layoutMode, isMetadataSelected, elementStyle }: ITMMetadataIcon) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TMMetadataIcon: ({ tid, md, color, layoutMode, isMetadataSelected, elementStyle }: ITMMetadataIcon) => React.JSX.Element | null;
 interface ITMMetadataTooltip {
     tid: number | undefined;
     md: MetadataDescriptor | undefined;
@@ -31,6 +31,6 @@ interface ITMMetadataTooltip {
     layoutMode?: LayoutModes;
 }
 export declare const TMMetadataTooltip: React.FC<ITMMetadataTooltip>;
-export declare const cellRenderMID: (data: DataGridTypes.ColumnCellTemplateData, noneSelectionText?: string, tid?: number) => import("react/jsx-runtime").JSX.Element;
+export declare const cellRenderMID: (data: DataGridTypes.ColumnCellTemplateData, noneSelectionText?: string, tid?: number) => React.JSX.Element;
 export declare const getDisplayAlias: (dcmtTypeName: string | undefined, alias: string | undefined) => string | undefined;
 export {};