@topconsultnpm/sdkui-react-beta 6.13.49 → 6.13.51

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

@@ -0,0 +1,212 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef, useMemo } from 'react';
+import styled from 'styled-components';
+import { useTMPanelManagerContext } from './TMPanelManagerContext';
+import TMPanelWrapper from './TMPanelWrapper';
+import TMPanelManagerToolbar from './TMPanelManagerToolbar';
+import { IconInfo, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+// Styled Component per il contenitore principale di PanelContainer
+const StyledPanelContainerWrapper = styled.div `
+  display: ${props => (props.$hasVisiblePanels ? 'flex' : 'none')};
+  flex-direction: ${props => (props.$direction === 'vertical' ? 'column' : 'row')};
+  height: 100%;
+  width: 100%;
+  // overflow: hidden;
+`;
+// Styled Component per il gutter (separatore)
+const StyledResizerGutter = styled.div `
+  cursor: ${props => (props.$direction === 'horizontal' ? 'col-resize' : 'row-resize')};
+  ${props => (props.$direction === 'horizontal' ? `width: ${SDKUI_Globals.userSettings.themeSettings.gutters}px;` : `height: ${SDKUI_Globals.userSettings.themeSettings.gutters}px;`)}
+  flex-shrink: 0;
+  background-color: "transparent";
+  z-index: 10;
+`;
+const TMPanelManagerContainer = (props) => {
+    const { panels, showToolbar, direction, parentId } = props;
+    const { panelVisibility, setPanelDimensionsById, hasVisiblePanels, maximizedPanels, updateIsResizingActive } = useTMPanelManagerContext();
+    // 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]);
+    const gutters = SDKUI_Globals.userSettings.themeSettings.gutters;
+    // References to store information related to resizing
+    // startMousePos: stores the mouse position when resizing starts (x or y coordinate)
+    const startMousePos = useRef(0);
+    // initialPanelSizesOnDragStart: stores width/height percentages of panels at drag start
+    const initialPanelSizesOnDragStart = useRef({});
+    // resizingPanelId: ID of the panel currently being resized
+    const resizingPanelId = useRef(null);
+    // nextPanelId: ID of the adjacent panel that is resized in tandem
+    const nextPanelId = useRef(null);
+    // Variable to track if a visible panel has been encountered yet during rendering
+    let hasSeenVisiblePanel = false;
+    // Ref to the container DOM element that holds all the panels; used for size calculations
+    const containerRef = useRef(null);
+    // Count how many child panels are currently visible (based on panelVisibility)
+    const currentlyVisibleChildrenCount = panels.filter(panel => panelVisibility[panel.id]).length;
+    // If this component has a parent panel, and the parent panel is visible,
+    // but none of the current child panels are visible, return null to avoid rendering empty container
+    if (parentId && panelVisibility[parentId] && currentlyVisibleChildrenCount === 0) {
+        return null;
+    }
+    // Handles mouse movement during panel resizing
+    const onMouseMove = (e) => {
+        e.preventDefault();
+        // Get the IDs of the panels being resized and the initial sizes saved at drag start
+        const currentId = resizingPanelId.current;
+        const nextId = nextPanelId.current;
+        const initialSizes = initialPanelSizesOnDragStart.current;
+        // If any info is missing, exit early
+        if (!currentId || !nextId || !initialSizes[currentId] || !initialSizes[nextId])
+            return;
+        // Get the container size (width or height depending on direction)
+        const containerSize = direction === 'horizontal' ? containerRef.current?.offsetWidth || 1 : containerRef.current?.offsetHeight || 1;
+        // Calculate how much the mouse moved in pixels and as a percentage relative to container size
+        const deltaPx = (direction === 'horizontal' ? e.clientX : e.clientY) - startMousePos.current;
+        const deltaPercent = (deltaPx / containerSize) * 100;
+        // Parse initial panel sizes (width or height) in percentage
+        const initialCurrent = parseFloat(direction === 'horizontal' ? initialSizes[currentId].width : initialSizes[currentId].height);
+        const initialNext = parseFloat(direction === 'horizontal' ? initialSizes[nextId].width : initialSizes[nextId].height);
+        // Calculate new sizes by adding/subtracting deltaPercent
+        let newCurrent = initialCurrent + deltaPercent;
+        let newNext = initialNext - deltaPercent;
+        // Set a minimum size threshold (to prevent panels from collapsing)
+        const minPercent = (50 / containerSize) * 100;
+        // Correct sizes if they go below the minimum
+        if (newCurrent < minPercent) {
+            newCurrent = minPercent;
+            newNext = initialCurrent + initialNext - minPercent;
+        }
+        else if (newNext < minPercent) {
+            newNext = minPercent;
+            newCurrent = initialCurrent + initialNext - minPercent;
+        }
+        // Update panel sizes (width or height depending on direction)
+        if (direction === 'horizontal') {
+            setPanelDimensionsById(currentId, `${newCurrent}%`, `100%`);
+            setPanelDimensionsById(nextId, `${newNext}%`, `100%`);
+        }
+        else {
+            setPanelDimensionsById(currentId, `100%`, `${newCurrent}%`);
+            setPanelDimensionsById(nextId, `100%`, `${newNext}%`);
+        }
+    };
+    // Handles mouse release (end of resizing)
+    const onMouseUp = (e) => {
+        e.preventDefault();
+        // Disable resizing state
+        updateIsResizingActive(false);
+        // Reset the refs controlling resizing
+        resizingPanelId.current = null;
+        nextPanelId.current = null;
+        initialPanelSizesOnDragStart.current = {};
+        // Remove the event listeners added during resizing
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+        // Reset cursor and text selection styles to defaults
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    };
+    // Starts the resizing process when mouse is pressed on the gutter
+    const startResizing = (e, currentId, nextId) => {
+        e.preventDefault();
+        const container = containerRef.current;
+        if (!container)
+            return;
+        // Find the two panel elements in the DOM by their data-panel-id attributes
+        const currentEl = container.querySelector(`[data-panel-id="${currentId}"]`);
+        const nextEl = container.querySelector(`[data-panel-id="${nextId}"]`);
+        if (!currentEl || !nextEl)
+            return;
+        // Set the refs for the panels currently resizing
+        resizingPanelId.current = currentId;
+        nextPanelId.current = nextId;
+        // Save the initial mouse position (X or Y based on direction)
+        startMousePos.current = direction === 'horizontal' ? e.clientX : e.clientY;
+        // Enable resizing state (for UI feedback if needed)
+        updateIsResizingActive(true);
+        // Calculate and save the initial panel sizes as percentages of container size
+        const containerWidth = container.offsetWidth;
+        const containerHeight = container.offsetHeight;
+        initialPanelSizesOnDragStart.current = {
+            [currentId]: {
+                width: `${(currentEl.offsetWidth / containerWidth) * 100}%`,
+                height: `${(currentEl.offsetHeight / containerHeight) * 100}%`,
+            },
+            [nextId]: {
+                width: `${(nextEl.offsetWidth / containerWidth) * 100}%`,
+                height: `${(nextEl.offsetHeight / containerHeight) * 100}%`,
+            },
+        };
+        // Attach global mousemove and mouseup listeners to track dragging anywhere on screen
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+        // Change the cursor to indicate resizing
+        document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
+        document.body.style.userSelect = 'none';
+    };
+    return (_jsxs("div", { style: { display: 'flex', height: '100%', width: '100%', flexDirection: isMobile ? 'column' : 'row', gap: gutters }, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    width: (isMobile || maximizedPanels.length > 0) ? '100%' : showToolbar ? `calc(100% - 70px)` : '100%',
+                    height: isMobile ? (showToolbar ? `calc(100% - 55px)` : '100%') : '100%',
+                    flexDirection: 'row'
+                }, children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(StyledPanelContainerWrapper, { ref: containerRef, "$direction": direction, "$hasVisiblePanels": hasVisiblePanels(), children: panels.map((panel, index) => {
+                                // Check if current panel is visible according to context state
+                                const isVisible = panelVisibility[panel.id];
+                                // Find the closest previous visible panel's ID to place the resizer gutter between
+                                let prevPanelIdForGutter = null;
+                                for (let i = index - 1; i >= 0; i--) {
+                                    if (panelVisibility[panels[i].id]) {
+                                        prevPanelIdForGutter = panels[i].id;
+                                        break;
+                                    }
+                                }
+                                /*
+                                  Determine if we should show the gutter (resize handle) before this panel.
+                                  The gutter is shown only if:
+                                    - this panel is visible
+                                    - at least one visible panel was encountered before this one
+                                */
+                                const showGutter = isVisible && hasSeenVisiblePanel && maximizedPanels.length === 0;
+                                // Update the flag once a visible panel is found, so gutters after it are shown correctly
+                                if (isVisible) {
+                                    hasSeenVisiblePanel = true;
+                                }
+                                // If the panel has child panels, render a nested TMPanelManagerContainer or a component
+                                if (panel.children && panel.children.length > 0) {
+                                    const ComponentToRender = panel.contentOptions?.component;
+                                    return (_jsxs(React.Fragment, { children: [showGutter && (_jsx(StyledResizerGutter, { "$direction": direction, onMouseDown: (e) => startResizing(e, prevPanelIdForGutter, panel.id) })), _jsx(TMPanelWrapper, { panel: panel, children: ComponentToRender
+                                                    ? _jsx(ComponentToRender, { groupId: panel.id, mainDirection: panel.childrenGroupDirection || direction })
+                                                    : _jsx(TMPanelManagerContainer, { panels: panel.children, direction: panel.childrenGroupDirection || direction, parentId: panel.id, showToolbar: false }) })] }, panel.id));
+                                }
+                                // If the panel has a component specified, render it with a possible gutter before it
+                                if (panel.contentOptions && panel.contentOptions.component) {
+                                    return (_jsxs(React.Fragment, { children: [showGutter && (_jsx(StyledResizerGutter, { "$direction": direction, onMouseDown: (e) => startResizing(e, prevPanelIdForGutter, panel.id) })), _jsx(TMPanelWrapper, { panel: panel, children: _jsx(panel.contentOptions.component, {}) })] }, panel.id));
+                                }
+                                // If no children or components, render nothing for this panel
+                                return null;
+                            }) }), _jsxs("div", { style: {
+                                display: hasVisiblePanels() ? 'none' : 'flex',
+                                flexDirection: 'column',
+                                width: '100%',
+                                height: '100%',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                fontSize: '1.5rem',
+                                color: 'rgb(37, 89, 165)',
+                                backgroundColor: '#fff',
+                                borderRadius: '10px'
+                            }, children: [_jsx(IconInfo, { style: { fontSize: 50 } }), _jsx("div", { children: SDKUI_Localizator.NoPanelSelected })] })] }) }), (showToolbar && maximizedPanels.length === 0) && _jsx("div", { style: {
+                    display: 'flex',
+                    flexDirection: isMobile ? 'row' : 'column',
+                    alignItems: 'center',
+                    width: isMobile ? '100%' : '50px',
+                    height: isMobile ? '50px' : 'max-content',
+                    background: 'transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box',
+                    borderRadius: isMobile ? '10px' : '10px 0px 0px 10px',
+                    padding: '10px',
+                    gap: '10px'
+                }, children: _jsx(TMPanelManagerToolbar, { panels: panels }) })] }));
+};
+export default TMPanelManagerContainer;

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

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import type { TMPanelDefinition, TMPanelDimensionsMap } from './types';
+interface TMPanelManagerContextType {
+    panelVisibility: {
+        [id: string]: boolean;
+    };
+    panelDimensions: TMPanelDimensionsMap;
+    togglePanelVisibility: (id: string) => void;
+    setPanelVisibilityById: (id: string, isVisible: boolean) => void;
+    setPanelDimensionsById: (id: string, width: string, height: string) => void;
+    hasVisiblePanels: () => boolean;
+    maximizedPanels: Array<string>;
+    toggleMaximize: (id: string) => void;
+    toolbarButtonsVisibility: {
+        [id: string]: boolean;
+    };
+    toolbarButtonsDisabled: {
+        [id: string]: boolean;
+    };
+    setToolbarButtonVisibility: (id: string, isVisible: boolean) => void;
+    setToolbarButtonDisabled: (id: string, isDisabled: boolean) => void;
+    isResizingActive: boolean;
+    updateIsResizingActive: (isActive: boolean) => void;
+}
+interface TMPanelManagerProviderProps {
+    children: ReactNode;
+    panels: Array<TMPanelDefinition>;
+    initialVisibility: {
+        [id: string]: boolean;
+    };
+    initialDimensions: TMPanelDimensionsMap;
+    initialMobilePanelId: string;
+}
+export declare const TMPanelManagerProvider: (props: TMPanelManagerProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useTMPanelManagerContext: () => TMPanelManagerContextType;
+export {};

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

@@ -0,0 +1,234 @@
+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, initialDimensions, initialVisibility, initialMobilePanelId } = 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 initialPanelDimensionsRef = useRef(initialDimensions);
+    // 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);
+    }, [panels]);
+    // Callback to update the visibility state of a specific panel and its related hierarchy
+    const updatePanelVisibility = useCallback((id, isVisible, prevVisibility) => {
+        // Clone previous visibility state to work with
+        let updated = { ...prevVisibility };
+        if (isMobile) {
+            if (isVisible) {
+                // On mobile, showing one panel hides all others first
+                updated = 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]) => { updated[pid] = visible; });
+                // Show the target panel
+                updated[id] = true;
+                // Redistribute dimensions to account for newly shown panel
+                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, initialPanelDimensionsRef.current, hierarchyMap, updated));
+            }
+            else {
+                // Hide the panel
+                updated[id] = false;
+                // Recursively hide parents
+                const parentsToHide = hideParentRecursively(id, hierarchyMap, updated);
+                parentsToHide.forEach(([pid, visible]) => { updated[pid] = visible; });
+                4;
+                // Redistribute dimensions after hiding
+                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updated));
+            }
+        }
+        else {
+            if (isVisible) {
+                // On desktop, show panel and its parents without hiding others
+                const parentsToShow = showParentRecursively(id, hierarchyMap);
+                parentsToShow.forEach(([pid, visible]) => { updated[pid] = visible; });
+                // Show the panel
+                updated[id] = true;
+                // Adjust panel dimensions accordingly
+                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, initialPanelDimensionsRef.current, hierarchyMap, updated));
+            }
+            else {
+                // Hide the panel
+                updated[id] = false;
+                // Recursively hide parent panels
+                const parentsToHide = hideParentRecursively(id, hierarchyMap, updated);
+                parentsToHide.forEach(([pid, visible]) => { updated[pid] = visible; });
+                // Adjust dimensions after hiding
+                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updated));
+            }
+        }
+        return updated;
+    }, [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(() => {
+        let updated = { ...initialVisibility };
+        Object.entries(initialVisibility).forEach(([id, isVisible]) => {
+            updated = updatePanelVisibility(id, isVisible, updated);
+        });
+        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 updatePanelVisibility(initialMobilePanelId, true, prev);
+            });
+        }
+    }, [isMobile, updatePanelVisibility]);
+    // 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);
+        4;
+        // 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 = { ...initialPanelDimensionsRef.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, initialPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
+            }
+            else {
+                // If the panel is hidden, adjust dimensions to hide it
+                acc = redistributeDimensionsOnHide(id, acc, hierarchyMap, updatedVisibility);
+            }
+            return acc;
+        }, initialPanelDimensionsRef.current);
+        // Apply the recalculated dimensions to the panel state
+        setPanelDimensions(nextDimensions);
+    }, [initialVisibility, 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 updatePanelVisibility(id, !isCurrentlyVisible, prev);
+            });
+        }
+        else {
+            // If the panel is not maximized, simply toggle its visibility
+            setPanelVisibility(prev => {
+                const isCurrentlyVisible = prev[id];
+                return updatePanelVisibility(id, !isCurrentlyVisible, prev);
+            });
+        }
+    }, [maximizedPanels, resetMaximization, updatePanelVisibility]);
+    // 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 => updatePanelVisibility(id, isVisible, prev));
+    }, [maximizedPanels, resetMaximization, updatePanelVisibility]);
+    // 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
+        initialPanelDimensionsRef.current = { ...initialPanelDimensionsRef.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);
+    }, []);
+    return (_jsx(TMPanelManagerContext.Provider, { value: {
+            panelVisibility,
+            panelDimensions,
+            togglePanelVisibility,
+            setPanelVisibilityById,
+            setPanelDimensionsById,
+            hasVisiblePanels,
+            maximizedPanels,
+            toggleMaximize,
+            toolbarButtonsVisibility,
+            toolbarButtonsDisabled,
+            setToolbarButtonVisibility,
+            setToolbarButtonDisabled,
+            isResizingActive,
+            updateIsResizingActive
+        }, children: children }));
+};
+export const useTMPanelManagerContext = () => {
+    const context = useContext(TMPanelManagerContext);
+    if (context === undefined) {
+        throw new Error('useTMPanelContext must be used within a TMPanelProvider');
+    }
+    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,58 @@
+import { jsx as _jsx } 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'};
+  &:hover {
+    background: ${({ $isDisabled }) => !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
+  }
+`;
+const TMPanelManagerToolbar = (props) => {
+    const { panels } = props;
+    // Get panel visibility toggling function and visibility state from context
+    const { togglePanelVisibility, panelVisibility, toolbarButtonsDisabled, toolbarButtonsVisibility } = useTMPanelManagerContext();
+    // 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]);
+    const [visibleLeafPanels, setVisibleLeafPanels] = useState([]);
+    useEffect(() => {
+        // Flatten panels, filter visible leaf nodes, and sort by orderNumber
+        const visibleLeafPanelsSorted = flattenPanels(panels)
+            .filter(panel => panel.toolbarOptions?.visible && !panel.children?.length)
+            .sort((a, b) => (a.toolbarOptions?.orderNumber ?? 0) - (b.toolbarOptions?.orderNumber ?? 0));
+        // Update state with the filtered and sorted leaf panels for the toolbar
+        setVisibleLeafPanels(visibleLeafPanelsSorted);
+    }, [panels]);
+    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];
+            return _jsx(TMTooltip, { content: visibleLeafPanel.name, position: isMobile ? 'top' : 'left', children: _jsx(StyledToolbarButton, { disabled: isDisabled, "$isDisabled": isDisabled, onClick: () => togglePanelVisibility(visibleLeafPanel.id), "$isActive": isActive || visibleLeafPanel.toolbarOptions?.alwaysActiveColor, children: typeof visibleLeafPanel.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${visibleLeafPanel.toolbarOptions?.icon}` })) : (visibleLeafPanel.toolbarOptions?.icon) }, visibleLeafPanel.id) }, visibleLeafPanel.id);
+        }) }));
+};
+export default TMPanelManagerToolbar;

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;
+export default TMPanelWrapper;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTMPanelManagerContext } from './TMPanelManagerContext';
+import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
+import TMPanel from '../../base/TMPanel';
+const TMPanelWrapper = (props) => {
+    const { panel, children } = props;
+    const { panelVisibility, panelDimensions, togglePanelVisibility, maximizedPanels, toggleMaximize } = useTMPanelManagerContext();
+    // 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;
+    const height = panelDimensions[panel.id].height;
+    // Determine visibility: 
+    // - If any panels are maximized, only show those maximized panels
+    // - Otherwise, rely on the normal panel visibility state
+    const isVisible = maximizedPanels.length > 0 ? maximizedPanels.includes(panel.id) : panelVisibility[panel.id];
+    const panelStyles = {
+        margin: '0',
+        // overflow: 'hidden',
+        boxSizing: 'border-box',
+        display: isVisible ? 'flex' : 'none',
+        flexDirection: 'column',
+        minWidth: '50px',
+        minHeight: '50px',
+        width: width,
+        height: height,
+        pointerEvents: 'auto',
+    };
+    return (_jsx("div", { "data-panel-id": panel.id, style: panelStyles, children: panel.contentOptions?.panelContainer ?
+            _jsx(TMPanel, { ...panel.contentOptions.panelContainer, allowMaximize: !isMobile, onHeaderDoubleClick: () => toggleMaximize(panel.id), onMaximize: () => toggleMaximize(panel.id), onClose: () => togglePanelVisibility(panel.id), children: children }) : children }));
+};
+export default TMPanelWrapper;

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

@@ -0,0 +1,36 @@
+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: React.ComponentType<any>;
+        panelContainer?: ITMPanelProps;
+    };
+    toolbarOptions?: {
+        icon: string | JSX.Element;
+        visible: boolean;
+        isActive: boolean;
+        disabled?: boolean;
+        orderNumber?: number;
+        beginGroup?: boolean;
+        alwaysActiveColor?: boolean;
+    };
+}
+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 {};