@topconsultnpm/sdkui-react 6.17.0-test9

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

@@ -0,0 +1,257 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { generatePanelHierarchyMap, hideParentRecursively, showParentRecursively, redistributeDimensionsOnHide, redistributeDimensionsOnShow, getToolbarStates } from './utils';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+// Create a React context for the panel state and actions
+const TMPanelManagerContext = createContext(undefined);
+export const TMPanelManagerProvider = (props) => {
+    const { children, panels, initialVisibility, defaultDimensions, initialDimensions, initialMobilePanelId, isPersistenceEnabled = false } = props;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook
+    const deviceType = useDeviceType();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    // Ref to persist the initial panel dimensions across renders without causing re-renders
+    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);
+    // 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
+    const [toolbarButtonsDisabled, setToolbarButtonsDisabled] = useState({});
+    // State to track if a resizing operation is currently active (mouse drag on gutter)
+    const [isResizingActive, setIsResizingActive] = useState(false);
+    useEffect(() => {
+        const { visibilityMap, disabledMap } = getToolbarStates(panels);
+        setToolbarButtonsVisibility(visibilityMap);
+        setToolbarButtonsDisabled(disabledMap);
+    }, []);
+    // Callback to update the visibility state of a specific panel and its related hierarchy
+    const adjustPanelVisibilityAndSize = useCallback((id, isVisible, prevVisibility) => {
+        // 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));
+            }
+        }
+        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));
+            }
+        }
+        return updatedVisibility;
+    }, [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);
+        }
+        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);
+            });
+            // 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);
+            });
+        }
+        else {
+            let updated = { ...initialVisibility };
+            Object.entries(initialVisibility).forEach(([id, isVisible]) => {
+                updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+            });
+            setPanelVisibility(updated);
+        }
+    }, [isMobile]);
+    // Function to maximize a panel (and its parent panels)
+    const maximizePanel = useCallback((id) => {
+        // Get all parent panel IDs recursively for the given panel ID
+        const parents = showParentRecursively(id, hierarchyMap).map(([pid]) => pid);
+        // Combine parents and the current panel ID into one array to maximize
+        const toMaximize = [...parents, id];
+        // Update state to track which panels are maximized
+        setMaximizedPanels(toMaximize);
+        // Update panel dimensions accordingly
+        setPanelDimensions(prev => {
+            const newDimensions = {};
+            Object.keys(prev).forEach(pid => {
+                if (toMaximize.includes(pid)) {
+                    // For maximized panels (target + parents), set width and height to 100%
+                    newDimensions[pid] = { width: '100%', height: '100%' };
+                }
+                else {
+                    // For all other panels, collapse by setting dimensions to 0%
+                    newDimensions[pid] = { width: '0%', height: '0%' };
+                }
+            });
+            return 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]);
+    // Toggle the maximized state of a panel by its ID
+    const toggleMaximize = useCallback((id) => {
+        if (maximizedPanels.includes(id)) {
+            // If already maximized, restore 
+            resetMaximization();
+        }
+        else {
+            // Otherwise, maximize the selected panel and its parents
+            maximizePanel(id);
+        }
+    }, [maximizedPanels, maximizePanel, resetMaximization]);
+    // Toggles the visibility of a panel by its I
+    const togglePanelVisibility = useCallback((id) => {
+        // Check if the panel to toggle is currently maximized
+        if (maximizedPanels.length > 0) {
+            // 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);
+            });
+        }
+        else {
+            // If the panel is not maximized, simply toggle its visibility
+            setPanelVisibility(prev => {
+                const isCurrentlyVisible = prev[id];
+                return adjustPanelVisibilityAndSize(id, !isCurrentlyVisible, prev);
+            });
+        }
+    }, [maximizedPanels, resetMaximization, adjustPanelVisibilityAndSize]);
+    // Sets the visibility of a panel by its ID to a specific value (true = show, false = hide)
+    const setPanelVisibilityById = useCallback((id, isVisible) => {
+        // If we are trying to hide a panel that is currently maximized, first reset the maximization to restore normal view before hiding
+        if (maximizedPanels.length > 0) {
+            resetMaximization();
+        }
+        // Then update the visibility state of the panel to the given value
+        setPanelVisibility(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 } }));
+    }, []);
+    // Checks if there is at least one panel currently visible
+    const hasVisiblePanels = useCallback(() => {
+        // Returns true if any value in the visibility map is `true`
+        return Object.values(panelVisibility).some(isVisible => isVisible);
+    }, [panelVisibility]);
+    // Callback to update the visibility of a toolbar button by panel ID
+    const setToolbarButtonVisibility = useCallback((id, isVisible) => {
+        setToolbarButtonsVisibility(prev => ({ ...prev, [id]: isVisible }));
+    }, []);
+    // Callback to update the disabled state of a toolbar button by panel ID
+    const setToolbarButtonDisabled = useCallback((id, isDisabled) => {
+        setToolbarButtonsDisabled(prev => ({ ...prev, [id]: isDisabled }));
+    }, []);
+    const updateIsResizingActive = useCallback((isActive) => {
+        setIsResizingActive(isActive);
+    }, []);
+    // Counts how many panels are currently visible and are not parent panels
+    const countVisibleLeafPanels = useCallback(() => {
+        // Get panel IDs that are leaf nodes (i.e., have no children)
+        const leafPanelIds = Array.from(hierarchyMap.entries()).filter(([_, info]) => info.childrenIds.length === 0).map(([id]) => id);
+        // Count how many of those are currently visible
+        return leafPanelIds.filter(id => panelVisibility[id]).length;
+    }, [hierarchyMap, panelVisibility]);
+    return (_jsx(TMPanelManagerContext.Provider, { value: {
+            panelVisibility,
+            panelDimensions,
+            togglePanelVisibility,
+            setPanelVisibilityById,
+            setPanelDimensionsById,
+            hasVisiblePanels,
+            maximizedPanels,
+            toggleMaximize,
+            toolbarButtonsVisibility,
+            toolbarButtonsDisabled,
+            setToolbarButtonVisibility,
+            setToolbarButtonDisabled,
+            isResizingActive,
+            updateIsResizingActive,
+            countVisibleLeafPanels
+        }, children: children }));
+};
+export const useTMPanelManagerContext = () => {
+    const context = useContext(TMPanelManagerContext);
+    if (context === undefined) {
+        throw new Error('useTMPanelManagerContext must be used within a TMPanelManagerProvider');
+    }
+    return context;
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TMPanelDefinition } from './types';
+export declare const StyledToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $isActive?: boolean;
+    $isDisabled?: boolean;
+}>> & string;
+interface TMPanelManagerToolbarProps {
+    panels: Array<TMPanelDefinition>;
+}
+declare const TMPanelManagerToolbar: (props: TMPanelManagerToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export default TMPanelManagerToolbar;

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

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { useTMPanelManagerContext } from './TMPanelManagerContext';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+import { flattenPanels } from './utils';
+import TMTooltip from '../../base/TMTooltip';
+export const StyledToolbarButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  width: 32px;
+  border: none;
+  border-radius: 8px;
+  font-size: 18px;
+  padding: 0px;
+  color: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.6 : 1)};
+  background: ${({ $isActive }) => $isActive ? 'rgba(255,255,255,0.35)' : 'transparent'};
+  position: relative;
+  &:hover {
+    background: ${({ $isDisabled }) => !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
+  }
+`;
+const Badge = styled.span `
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  background: ${(props) => props.$background || "#ff5252"};
+  color: white;
+  font-size: 10px;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 4px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+`;
+const TMPanelManagerToolbar = (props) => {
+    const { panels } = props;
+    const { togglePanelVisibility, countVisibleLeafPanels, panelVisibility, toolbarButtonsDisabled, toolbarButtonsVisibility } = useTMPanelManagerContext();
+    const deviceType = useDeviceType();
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const [visibleLeafPanels, setVisibleLeafPanels] = useState([]);
+    useEffect(() => {
+        const visibleLeafPanelsSorted = flattenPanels(panels)
+            .filter(panel => toolbarButtonsVisibility[panel.id] && !panel.children?.length)
+            .sort((a, b) => (a.toolbarOptions?.orderNumber ?? 0) - (b.toolbarOptions?.orderNumber ?? 0));
+        setVisibleLeafPanels(visibleLeafPanelsSorted);
+    }, [toolbarButtonsVisibility, panels]);
+    const onClickCallback = (panelId, isActive) => {
+        if (isActive && countVisibleLeafPanels() <= 1) {
+            return undefined;
+        }
+        togglePanelVisibility(panelId);
+    };
+    const formatCount = (count) => {
+        if (count > 999)
+            return "999+";
+        return count.toString();
+    };
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: isMobile ? 'row' : 'column',
+            gap: '6px',
+            alignItems: 'center',
+            justifyContent: isMobile ? 'center' : 'flex-start',
+            width: '100%',
+            height: '100%'
+        }, children: visibleLeafPanels.filter(panel => toolbarButtonsVisibility[panel.id]).map(visibleLeafPanel => {
+            const isActive = panelVisibility[visibleLeafPanel.id];
+            const isDisabled = toolbarButtonsDisabled[visibleLeafPanel.id];
+            const count = visibleLeafPanel.toolbarOptions?.count ?? 0;
+            const tooltip = visibleLeafPanel.toolbarOptions?.tooltip ?? '';
+            return _jsx(TMTooltip, { content: tooltip || (visibleLeafPanel.name + (count > 0 ? ": " + count : '')), position: isMobile ? 'top' : 'left', children: _jsxs(StyledToolbarButton, { disabled: isDisabled, "$isDisabled": isDisabled, onClick: () => onClickCallback(visibleLeafPanel.id, isActive), "$isActive": isActive || visibleLeafPanel.toolbarOptions?.alwaysActiveColor, children: [typeof visibleLeafPanel.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${visibleLeafPanel.toolbarOptions?.icon}` })) : (visibleLeafPanel.toolbarOptions?.icon), (!isActive && count > 0) && _jsxs(Badge, { "$background": visibleLeafPanel.toolbarOptions?.countBackgroundColor, children: [" ", formatCount(count), " "] })] }, visibleLeafPanel.id) }, visibleLeafPanel.id);
+        }) }));
+};
+export default TMPanelManagerToolbar;

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import type { TMPanelDefinition, TMPanelDimensionsMap } from './types';
+interface TMPanelManagerWithPersistenceProps {
+    children: ReactNode;
+    panels: Array<TMPanelDefinition>;
+    initialVisibility: {
+        [id: string]: boolean;
+    };
+    defaultDimensions: TMPanelDimensionsMap;
+    initialDimensions: TMPanelDimensionsMap;
+    initialMobilePanelId: string;
+    isPersistenceEnabled?: boolean;
+    persistPanelStates?: (state: Record<string, {
+        visible: boolean;
+        width: string;
+        height: string;
+    }>) => void;
+    persistedPanelStates?: Record<string, any>;
+}
+export declare const TMPanelManagerWithPersistenceProvider: (props: TMPanelManagerWithPersistenceProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { TMPanelManagerProvider, useTMPanelManagerContext } from './TMPanelManagerContext';
+export const TMPanelManagerWithPersistenceProvider = (props) => {
+    const { children, panels, initialVisibility, defaultDimensions, initialDimensions, initialMobilePanelId, isPersistenceEnabled = false, persistedPanelStates, persistPanelStates } = props;
+    // Track when persisted state is loaded
+    const [loaded, setLoaded] = useState(false);
+    // State for visibility and dimensions based on persisted state (or fallback to props)
+    const [persistedInitialVisibility, setPersistedInitialVisibility] = useState(initialVisibility);
+    const [persistedInitialDimensions, setPersistedInitialDimensions] = useState(initialDimensions);
+    // Effect to initialize panel state from persisted data
+    useEffect(() => {
+        const loadPersistedState = () => {
+            if (persistedPanelStates && typeof persistedPanelStates === 'object' && Object.keys(persistedPanelStates).length > 0) {
+                try {
+                    const visibility = {};
+                    const dimensions = {};
+                    for (const [key, panel] of Object.entries(persistedPanelStates)) {
+                        visibility[key] = panel.visible;
+                        dimensions[key] = { width: panel.width, height: panel.height };
+                    }
+                    setPersistedInitialVisibility(visibility);
+                    setPersistedInitialDimensions(dimensions);
+                }
+                catch (err) {
+                    console.warn('Error retrieving data', err);
+                }
+            }
+            // Mark that initial load is complete (even if nothing is loaded)
+            setLoaded(true);
+        };
+        loadPersistedState();
+    }, []);
+    if (!loaded)
+        return null;
+    return (_jsxs(TMPanelManagerProvider, { panels: panels, initialVisibility: persistedInitialVisibility, defaultDimensions: defaultDimensions, initialDimensions: persistedInitialDimensions, initialMobilePanelId: initialMobilePanelId, isPersistenceEnabled: isPersistenceEnabled, children: [_jsx(PanelDimensionPersistenceEffect, { persistPanelStates: persistPanelStates }), children] }));
+};
+// Effect to watch for panel visibility and size changes and persist them
+const PanelDimensionPersistenceEffect = (props) => {
+    const { persistPanelStates } = props;
+    const { panelDimensions, panelVisibility, maximizedPanels } = useTMPanelManagerContext();
+    // Track if this is the first time persistence effect runs after initialization
+    const didSkipFirstSave = React.useRef(false);
+    useEffect(() => {
+        if (Object.keys(panelVisibility).length === 0 || Object.keys(panelDimensions).length === 0)
+            return;
+        // Skip the very first save to avoid saving immediately after init
+        if (!didSkipFirstSave.current) {
+            didSkipFirstSave.current = true;
+            return;
+        }
+        // If any panel is maximized, don't persist to avoid saving intermediate states
+        if (maximizedPanels.length > 0)
+            return;
+        const panelState = {};
+        for (const panelKey in panelVisibility) {
+            const visibility = panelVisibility[panelKey] ?? false;
+            const dimensions = panelDimensions[panelKey] ?? { width: "0%", height: "0%" };
+            panelState[panelKey] = { visible: visibility, width: dimensions.width, height: dimensions.height };
+        }
+        persistPanelStates?.(panelState);
+    }, [panelVisibility, panelDimensions, maximizedPanels]);
+    return null;
+};

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

@@ -0,0 +1,8 @@
+import { 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;
+export default TMPanelWrapper;

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

@@ -0,0 +1,59 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo, useState, useEffect } from 'react';
+import { useTMPanelManagerContext } from './TMPanelManagerContext';
+import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
+import TMPanel from '../../base/TMPanel';
+const TMPanelWrapper = (props) => {
+    const { panel, children } = props;
+    const { panelVisibility, panelDimensions, togglePanelVisibility, maximizedPanels, toggleMaximize, countVisibleLeafPanels } = useTMPanelManagerContext();
+    // Default to true if isMaximizable or isClosable is undefined, ensuring safe and expected behavior
+    const isMaximizable = panel.contentOptions?.isMaximizable ?? true;
+    const isClosable = panel.contentOptions?.isClosable ?? true;
+    // Get the current device type (e.g., mobile, tablet, desktop) using a custom hook
+    const deviceType = useDeviceType();
+    // This avoids unnecessary re-renders by only recalculating when deviceType changes
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    // Extract panel dimensions based on panel id
+    const width = panelDimensions[panel.id]?.width ?? '0%';
+    const height = panelDimensions[panel.id]?.height ?? '0%';
+    // Determine visibility:
+    // - If any panels are maximized, only show those maximized panels
+    // - Otherwise, rely on the normal panel visibility state
+    const isCurrentlyVisible = maximizedPanels.length > 0 ? maximizedPanels.includes(panel.id) : panelVisibility[panel.id];
+    // NUOVO STATO: Traccia se il pannello è mai stato reso visibile
+    const [hasBeenRenderedOnce, setHasBeenRenderedOnce] = useState(isCurrentlyVisible);
+    // NUOVO useEffect: Aggiorna hasBeenRenderedOnce quando il pannello diventa visibile per la prima volta
+    useEffect(() => {
+        if (isCurrentlyVisible && !hasBeenRenderedOnce) {
+            setHasBeenRenderedOnce(true);
+        }
+    }, [isCurrentlyVisible, hasBeenRenderedOnce]);
+    const panelStyles = {
+        margin: '0',
+        boxSizing: 'border-box',
+        // Applica 'flex' o 'none' solo se è già stato reso visibile almeno una volta
+        display: isCurrentlyVisible ? 'flex' : 'none',
+        flexDirection: 'column',
+        minWidth: '50px',
+        minHeight: '50px',
+        width: width,
+        height: height,
+        pointerEvents: 'auto',
+    };
+    // Rende il pannello solo se è attualmente visibile O se è già stato reso visibile una volta.
+    // Se non è mai stato reso visibile E non è attualmente visibile, non renderizza nulla (o un placeholder vuoto).
+    if (!isCurrentlyVisible && !hasBeenRenderedOnce) {
+        return null;
+    }
+    // Clona il child e passa una prop 'isVisible'
+    let childWithProps = children;
+    if (React.isValidElement(children) && typeof children.type === 'function') {
+        childWithProps = React.cloneElement(children, { isVisible: isCurrentlyVisible });
+    }
+    return (_jsx("div", { "data-panel-id": panel.id, style: panelStyles, children: panel.contentOptions?.panelContainer ?
+            _jsxs(TMPanel, { ...panel.contentOptions.panelContainer, allowMaximize: !isMobile && countVisibleLeafPanels() > 1, onHeaderDoubleClick: isMaximizable && countVisibleLeafPanels() > 1 ? () => toggleMaximize(panel.id) : undefined, onMaximize: isMaximizable && countVisibleLeafPanels() > 1 ? () => toggleMaximize(panel.id) : undefined, onClose: isClosable && countVisibleLeafPanels() > 1 ? () => togglePanelVisibility(panel.id) : undefined, children: [childWithProps, " "] })
+            :
+                childWithProps // Usa i children clonati
+     }));
+};
+export default TMPanelWrapper;

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

@@ -0,0 +1,42 @@
+import { ReactNode } from "react";
+import { ITMPanelProps } from "../../base/TMPanel";
+export type TMPanelDirection = 'horizontal' | 'vertical';
+export interface TMPanelDefinition {
+    id: string;
+    name: string;
+    children?: Array<TMPanelDefinition>;
+    currentGroupDirection?: TMPanelDirection;
+    childrenGroupDirection?: TMPanelDirection;
+    contentOptions?: {
+        component: ReactNode;
+        isClosable?: boolean;
+        isMaximizable?: boolean;
+        panelContainer?: ITMPanelProps;
+    };
+    toolbarOptions?: {
+        icon: string | JSX.Element;
+        visible: boolean;
+        isActive: boolean;
+        disabled?: boolean;
+        orderNumber?: number;
+        beginGroup?: boolean;
+        alwaysActiveColor?: boolean;
+        count?: number;
+        tooltip?: ReactNode | string;
+        countBackgroundColor?: string;
+    };
+}
+export interface TMPanelHierarchyInfo {
+    groupDirection: TMPanelDirection;
+    parentId: string | undefined;
+    childrenIds: Array<string>;
+    siblingIds: Array<string>;
+}
+export type TMPanelHierarchyMap = Map<string, TMPanelHierarchyInfo>;
+export type TMPanelDimensions = {
+    width: string;
+    height: string;
+};
+export type TMPanelDimensionsMap = {
+    [id: string]: TMPanelDimensions;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,21 @@
+import { TMPanelDefinition, TMPanelDimensionsMap, TMPanelHierarchyMap } from "./types";
+export declare const flattenPanels: (panels: Array<TMPanelDefinition>) => Array<TMPanelDefinition>;
+export declare function getToolbarStates(panels: Array<TMPanelDefinition>): {
+    visibilityMap: {
+        [id: string]: boolean;
+    };
+    disabledMap: {
+        [id: string]: boolean;
+    };
+};
+export declare const generatePanelHierarchyMap: (panels: Array<TMPanelDefinition>) => TMPanelHierarchyMap;
+export declare const showParentRecursively: (panelId: string, hierarchyMap: TMPanelHierarchyMap) => Array<[string, boolean]>;
+export declare const hideParentRecursively: (panelId: string, hierarchyMap: TMPanelHierarchyMap, currentVisibility: {
+    [id: string]: boolean;
+}) => Array<[string, boolean]>;
+export declare const redistributeDimensionsOnHide: (hiddenPanelId: string, currentDimensions: TMPanelDimensionsMap, hierarchyMap: TMPanelHierarchyMap, panelVisibility: {
+    [id: string]: boolean;
+}) => TMPanelDimensionsMap;
+export declare const redistributeDimensionsOnShow: (shownPanelId: string, currentDimensions: TMPanelDimensionsMap, initialDimensions: TMPanelDimensionsMap, hierarchyMap: TMPanelHierarchyMap, panelVisibility: {
+    [id: string]: boolean;
+}) => TMPanelDimensionsMap;