@topconsultnpm/sdkui-react-beta 6.13.34 → 6.13.35

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

@@ -11,7 +11,6 @@ export declare const StyledPanelPage: import("styled-components/dist/types").ISt
     $isOpen?: boolean;
     $padding?: string;
     $background?: string;
-    $withMenu?: boolean;
 }>> & string;
 export declare const StyledOffCanvasPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isOpen: boolean;

package/lib/components/base/Styled.js

@@ -36,26 +36,18 @@ export const StyledToolbarForm = styled.div `
     gap: 2px;
     background-color: ${TMColors.toolbar_background};
 `;
-export const StyledPanelPage = styled.div ` 
-  position: absolute; 
-  width: calc(100% - 50px); 
-  top: ${(props) => props.$isOpen ? '50px' : '-9999px'}; 
-  left: ${(props) => props.$isOpen ? '50px' : '-9999px'}; 
-  visibility: ${(props) => props.$isOpen ? 'visible' : 'hidden'}; 
-  bottom: 0; 
-  border-radius: 0px; 
-  background: ${(props) => props.$background ?? 'transparent'}; 
-  z-index: 1500; 
+export const StyledPanelPage = styled.div `
+  position: absolute;
+  width: calc(100% - 50px);
+  top: ${(props) => props.$isOpen ? '50px' : '-9999px'};
+  left: ${(props) => props.$isOpen ? '50px' : '-9999px'};
+  visibility: ${(props) => props.$isOpen ? 'visible' : 'hidden'};
+  bottom: 0;
+  border-radius: 0px;
+  background: ${(props) => props.$background ?? 'transparent'};
+  z-index: 1500;
   overflow: hidden;
-
-  @media (min-width: 768px) {
-    padding: ${(props) => props.$padding ?? `${Gutters.defaultDesktop}px`};
-    padding-right: ${(props) => props.$withMenu ? '0' : 'auto'};
-  }
-
-  @media (max-width: 767px) {
-    padding: ${(props) => props.$padding ?? `${Gutters.defaultMobile}px`};
-  }
+  padding: ${props => props.$padding ?? `${Gutters.getGutters()}px`};
 `;
 export const StyledOffCanvasPanel = styled.div `
   position: fixed;

package/lib/components/base/TMPanel.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
+import { IconArrowLeft, IconClearButton, IconWindowMaximize, IconWindowMinimize, isPositiveNumber, SDKUI_Localizator } from '../../helper';
 import TMButton from './TMButton';
 const StyledPanelContainer = styled.div `
     width: 100%;
@@ -16,10 +16,10 @@ const StyledPanelContainer = styled.div `
     position: ${({ $isMaximized }) => $isMaximized ? 'fixed' : 'relative'};
     top: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
     left: ${({ $isMaximized }) => $isMaximized ? '50px' : 'auto'};
-    width: ${({ $isMaximized }) => $isMaximized ? `calc(100vw - 50px - (${SDKUI_Globals.userSettings.themeSettings.gutters}px * 2))` : '100%'};
-    height: ${({ $isMaximized }) => $isMaximized ? `calc(100vh - 50px - (${SDKUI_Globals.userSettings.themeSettings.gutters}px * 2))` : '100%'};
+    width: ${({ $isMaximized }) => $isMaximized ? 'calc(100vw - 90px)' : '100%'};
+    height: ${({ $isMaximized }) => $isMaximized ? 'calc(100vh - 90px)' : '100%'};
     z-index: ${({ $isMaximized }) => $isMaximized ? 2000 : 'auto'};
-    margin: ${({ $isMaximized }) => $isMaximized ? `${SDKUI_Globals.userSettings.themeSettings.gutters}px` : '0'};
+    margin: ${({ $isMaximized }) => $isMaximized ? '20px' : '0'};
     /* transition: all 0.2s; */
 `;
 const StyledPanelHeader = styled.div `

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

@@ -0,0 +1,9 @@
+import { TMPanelItemConfig } from './TMPanelManagerUtils';
+type TMPanelManagerProps = {
+    panels: Array<TMPanelItemConfig>;
+    initialMobilePanelId: string;
+    showToolbar?: boolean;
+    gutters?: number;
+};
+declare const TMPanelManager: (props: TMPanelManagerProps) => import("react/jsx-runtime").JSX.Element;
+export default TMPanelManager;

package/lib/components/base/TMPanelManager.js

@@ -0,0 +1,465 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { flattenPanels, isAtLeastOnePanelVisible, isPanelArray } from './TMPanelManagerUtils';
+import { SDKUI_Globals, IconInfo, SDKUI_Localizator } from '../../helper';
+import { useDeviceType, DeviceType } from './TMDeviceProvider';
+import TMPanel from './TMPanel';
+import TMPanelManagerToolbar from './TMPanelManagerToolbar';
+const TMPanelManager = (props) => {
+    const { panels, initialMobilePanelId, showToolbar = true, gutters = SDKUI_Globals.userSettings.themeSettings.gutters } = props;
+    const deviceType = useDeviceType();
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const allPanels = useMemo(() => flattenPanels(panels), [panels]);
+    const panelMap = useMemo(() => {
+        const map = new Map();
+        allPanels.forEach(p => map.set(p.fullId, p));
+        return map;
+    }, [allPanels]);
+    const panelRefs = useRef({});
+    // Active buttons state & panel map
+    const [activeButtons, setActiveButtons] = useState(() => Object.fromEntries(allPanels.map(p => [p.fullId, p.config.toolbarOptions?.isActive ?? false])));
+    const [originalSizes, setOriginalSizes] = useState(new Map());
+    const [panelsState, setPanelsState] = useState(new Map());
+    const [maximizedPanelPath, setMaximizedPanelPath] = useState([]);
+    const [isRowDragging, setIsRowDragging] = useState(null);
+    const [isColumnDragging, setIsColumnDragging] = useState(null);
+    const [updatedDisabledButton, setUpdatedDisabledButton] = useState(undefined);
+    const [updatedVisibleButton, setUpdatedVisibleButton] = useState(undefined);
+    // Initialize two new Maps to store panel state and their original sizes
+    useEffect(() => {
+        const newState = new Map();
+        const newOriginalSizes = new Map();
+        // Recursive function to initialize panel map data
+        const initPanelsMap = (panels, parentPath = '') => {
+            panels.forEach(panel => {
+                // Skip if the panel has no contentOptions
+                if (!panel.contentOptions)
+                    return;
+                // Construct a unique full ID for each panel based on its parent path
+                const fullId = parentPath ? `${parentPath}.${panel.id}` : panel.id;
+                // Use default values '0' if width/height is not provided
+                const width = panel.contentOptions.width;
+                const height = panel.contentOptions.height;
+                // Check if the panel contains nested children
+                const hasChildren = Array.isArray(panel.contentOptions.content);
+                // Store the original width and height for future reference
+                newOriginalSizes.set(fullId, { width, height });
+                // Determine the layout orientation
+                // A panel is considered a "column" layout if height is 100% and width isn't.
+                // A panel is considered a "row" layout if width is 100% and height isn't.
+                const isColumn = height === '100%' && width !== '100%';
+                const isRow = width === '100%' && height !== '100%';
+                // Save the current panel's state including dimensions and layout direction
+                newState.set(fullId, { width, height, isColumn, isRow, });
+                // If the panel has nested children, recursively initialize their states
+                if (hasChildren) {
+                    initPanelsMap(panel.contentOptions.content, fullId);
+                }
+            });
+        };
+        initPanelsMap(panels);
+        setOriginalSizes(newOriginalSizes);
+        setPanelsState(newState);
+    }, [panels]);
+    useEffect(() => {
+        // If there are no original sizes available, exit early
+        if (!originalSizes.size)
+            return;
+        // Clone the current state of the panels into a new Map to modify it safely
+        const newState = new Map(panelsState);
+        // Helper function to check if a panel is currently maximized
+        const isMaximized = (panelId) => maximizedPanelPath.includes(panelId);
+        // Iterate through all panel sizes stored in originalSizes
+        for (const [panelId, sizes] of originalSizes.entries()) {
+            const currentPanel = newState.get(panelId);
+            if (!currentPanel) {
+                // If for some reason the panel doesn't exist in state, skip it
+                continue;
+            }
+            if (isMaximized(panelId)) {
+                // If the panel is maximized, set its dimensions to take up the full available space
+                newState.set(panelId, { ...currentPanel, width: '100%', height: '100%' });
+            }
+            else if (maximizedPanelPath.length > 0) {
+                // If at least one panel is maximized, collapse all others to zero size
+                newState.set(panelId, { ...currentPanel, width: '0', height: '0' });
+            }
+            else {
+                // If no panels are maximized, restore their original dimensions
+                newState.set(panelId, { ...currentPanel, width: sizes.width, height: sizes.height });
+            }
+        }
+        // Apply the updated panel states
+        setPanelsState(newState);
+        // Run this effect whenever maximizedPanelPath or originalSizes change
+    }, [maximizedPanelPath, originalSizes]);
+    useEffect(() => {
+        const isDragging = isColumnDragging || isRowDragging;
+        // Handles the end of dragging (mouse release)
+        const onMouseUp = () => {
+            setIsColumnDragging(null);
+            setIsRowDragging(null);
+            document.body.style.userSelect = '';
+        };
+        // Handles column resizing during dragging
+        const onColumnMouseMove = (e) => {
+            if (!isColumnDragging)
+                return;
+            const columnKeys = getKeysByOrientation('column');
+            const currentIndex = columnKeys.indexOf(isColumnDragging);
+            const nextKey = columnKeys[currentIndex + 1];
+            if (!nextKey)
+                return;
+            const deltaPercent = (e.movementX / window.innerWidth) * 100;
+            resizePanels(columnKeys, currentIndex, nextKey, deltaPercent, 'width');
+        };
+        // Handles row resizing during dragging
+        const onRowMouseMove = (e) => {
+            if (!isRowDragging)
+                return;
+            const rowKeys = getKeysByOrientation('row');
+            const currentIndex = rowKeys.indexOf(isRowDragging);
+            const nextKey = rowKeys[currentIndex + 1];
+            if (!nextKey)
+                return;
+            const deltaPercent = (e.movementY / window.innerHeight) * 100;
+            resizePanels(rowKeys, currentIndex, nextKey, deltaPercent, 'height');
+        };
+        // Returns panel keys that match the given orientation (row or column)
+        const getKeysByOrientation = (type) => {
+            return Array.from(panelsState.entries())
+                .filter(([_, value]) => (type === 'row' ? value.isRow : value.isColumn))
+                .map(([key]) => key);
+        };
+        // Shared resizing logic for both rows and columns
+        const resizePanels = (keys, currentIndex, nextKey, deltaPercent, dimension) => {
+            setPanelsState(prev => {
+                const updated = new Map(prev);
+                const updatedOriginalSizes = new Map(originalSizes);
+                const currentKey = keys[currentIndex];
+                const currentSize = parseFloat(updated.get(currentKey)?.[dimension] || '0');
+                const nextSize = parseFloat(updated.get(nextKey)?.[dimension] || '0');
+                const total = currentSize + nextSize;
+                let newCurrent = Math.min(currentSize + deltaPercent, 100);
+                let newNext = Math.min(nextSize - deltaPercent, 100);
+                // Enforce minimum panel size
+                if (newCurrent < 5) {
+                    newCurrent = 5;
+                    newNext = total - newCurrent;
+                }
+                else if (newNext < 5) {
+                    newNext = 5;
+                    newCurrent = total - newNext;
+                }
+                // Safely get current and next panel data
+                const currentPanel = updated.get(currentKey);
+                const nextPanel = updated.get(nextKey);
+                // Ensure both panels exist before updating
+                if (!currentPanel || !nextPanel)
+                    return prev;
+                // Update panel dimensions
+                updated.set(currentKey, { ...currentPanel, [dimension]: `${newCurrent}%` });
+                updated.set(nextKey, { ...nextPanel, [dimension]: `${newNext}%` });
+                // Update original sizes for persistence
+                updatedOriginalSizes.set(currentKey, { ...currentPanel, [dimension]: `${newCurrent}%` });
+                updatedOriginalSizes.set(nextKey, { ...nextPanel, [dimension]: `${newNext}%` });
+                setOriginalSizes(updatedOriginalSizes);
+                return updated;
+            });
+        };
+        // Add event listeners when dragging starts
+        if (isDragging) {
+            if (isColumnDragging) {
+                window.addEventListener('mousemove', onColumnMouseMove);
+            }
+            else if (isRowDragging) {
+                window.addEventListener('mousemove', onRowMouseMove);
+            }
+            window.addEventListener('mouseup', onMouseUp);
+            document.body.style.userSelect = 'none'; // Prevents text selection during drag
+        }
+        // Cleanup function to remove event listeners
+        return () => {
+            window.removeEventListener('mousemove', onColumnMouseMove);
+            window.removeEventListener('mousemove', onRowMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+            document.body.style.userSelect = '';
+        };
+    }, [isColumnDragging, isRowDragging, panelsState, originalSizes]);
+    useEffect(() => {
+        if (isMobile) {
+            setActiveButtons(prev => {
+                // Clone the previous state to avoid mutating it directly
+                const newActive = { ...prev };
+                // Get the panel object from the panel map
+                const panel = panelMap.get(initialMobilePanelId);
+                Object.keys(newActive).forEach(panelId => {
+                    newActive[panelId] = false;
+                });
+                // Toggle the selected panel's visibility
+                newActive[initialMobilePanelId] = true;
+                // If the panel is being hidden and has children, recursively hide its children
+                if (panel && panel.childrenIds.length > 0 && !newActive[initialMobilePanelId]) {
+                    const hideChildrenRecursively = (ids) => {
+                        ids.forEach(childId => {
+                            newActive[childId] = false;
+                            const childPanel = panelMap.get(childId);
+                            if (childPanel?.childrenIds.length) {
+                                hideChildrenRecursively(childPanel.childrenIds);
+                            }
+                        });
+                    };
+                    hideChildrenRecursively(panel.childrenIds);
+                }
+                // After toggling, ensure the visibility of parent panels is in sync with their children
+                if (panel?.parentId) {
+                    syncParentVisibilityWithChildren(panel.parentId, newActive);
+                }
+                // Return the updated visibility map
+                return newActive;
+            });
+        }
+    }, [isMobile]);
+    // Handler for starting to drag a column divider (for resizing panels horizontally)
+    const onColumnMouseDown = (panelKey) => {
+        setIsColumnDragging(panelKey); // Set the state to indicate which column is being dragged
+    };
+    // Handler for starting to drag a row divider (for resizing panels vertically)
+    const onRowMouseDown = (rowKey) => {
+        setIsRowDragging(rowKey); // Set the state to indicate which row is being dragged
+    };
+    // Function to disable a toolbar button by its ID
+    const handleDisableButton = (id, value) => {
+        // Update state to inform toolbar which button should be disabled/enabled
+        setUpdatedDisabledButton({ id, value });
+    };
+    // Function to change the visibility of a toolbar button by its ID
+    const handleVisibilityButton = (id, value) => {
+        // Update state to inform toolbar which button should be shown/hidden
+        setUpdatedVisibleButton({ id, value });
+    };
+    /**
+     * Recursively updates the visibility status of parent panels based on the visibility of their child panels.
+     * If all children are hidden, the parent is hidden.
+     * If at least one child is visible, the parent is shown. Propagates visibility changes up the tree.
+    */
+    const syncParentVisibilityWithChildren = (panelId, visibleMap) => {
+        const panel = panelMap.get(panelId);
+        if (!panel || panel.childrenIds.length === 0)
+            return;
+        const allChildrenHidden = panel.childrenIds.every(id => !visibleMap[id]);
+        if (allChildrenHidden && visibleMap[panelId]) {
+            visibleMap[panelId] = false;
+            if (panel.parentId) {
+                syncParentVisibilityWithChildren(panel.parentId, visibleMap);
+            }
+        }
+        else if (!allChildrenHidden && !visibleMap[panelId]) {
+            visibleMap[panelId] = true;
+        }
+    };
+    /**
+     * Toggles the maximized state of a panel based on its full ID.
+     * If the panel is already maximized (i.e., the maximized path matches its hierarchy path),
+     * it will be unmaximized. Otherwise, it will be maximized along with its ancestor panels.
+     * The full dot-separated ID of the panel (e.g., "root.section.panel")
+    */
+    const handleToggleMaximize = (fullId) => {
+        // Split the full panel ID into its segments (e.g., ["root", "section", "panel"])
+        const segments = fullId.split('.');
+        // Build the full path hierarchy up to this panel (e.g., ["root", "root.section", "root.section.panel"])
+        const path = segments.map((_, i) => segments.slice(0, i + 1).join('.'));
+        // Check if this panel is already maximized by comparing path arrays
+        const isAlreadyMaximized = maximizedPanelPath.length === path.length && maximizedPanelPath.every((v, i) => v === path[i]);
+        if (isAlreadyMaximized) {
+            // Unmaximize by clearing the maximized path
+            setMaximizedPanelPath([]);
+        }
+        else {
+            // Maximize this panel and its parent hierarchy
+            setMaximizedPanelPath(path);
+        }
+    };
+    /**
+     * Toggles the active (visible) state of a panel by its ID.
+     * - On **desktop**, the panel's visibility is toggled independently,
+     *   and if the panel is hidden, all its child panels are also recursively hidden.
+     * - On **mobile**, only one panel can be visible at a time:
+     *   activating a panel will hide all others, including their children.
+     * After updating visibility, the function also ensures that each parent panel's
+     * visibility is synchronized with the state of its children.
+     *
+   */
+    const handleTogglePanel = (id) => {
+        // If the panel is currently maximized, toggle its maximization state first
+        if (maximizedPanelPath.includes(id)) {
+            handleToggleMaximize(id);
+        }
+        // Update the activeButtons state
+        setActiveButtons(prev => {
+            // Clone the previous state to avoid mutating it directly
+            const newActive = { ...prev };
+            // Get the panel object from the panel map
+            const panel = panelMap.get(id);
+            // Determine if the current panel is currently visible
+            const currentlyVisible = !!newActive[id];
+            // Mobile-specific behavior: only one panel can be visible at a time
+            if (isMobile) {
+                // Hide all panels
+                Object.keys(newActive).forEach(panelId => {
+                    newActive[panelId] = false;
+                });
+                // Toggle the selected panel's visibility
+                newActive[id] = !currentlyVisible;
+                // If the panel is being hidden and has children, recursively hide its children
+                if (panel && panel.childrenIds.length > 0 && !newActive[id]) {
+                    const hideChildrenRecursively = (ids) => {
+                        ids.forEach(childId => {
+                            newActive[childId] = false;
+                            const childPanel = panelMap.get(childId);
+                            if (childPanel?.childrenIds.length) {
+                                hideChildrenRecursively(childPanel.childrenIds);
+                            }
+                        });
+                    };
+                    hideChildrenRecursively(panel.childrenIds);
+                }
+            }
+            else {
+                // Desktop behavior: toggle visibility of the selected panel
+                if (!currentlyVisible) {
+                    // If the panel is currently not visible (we are activating it)
+                    if (panel?.alternativePanelIds.length) {
+                        // If the panel has alternative panels defined
+                        panel.alternativePanelIds.forEach(altId => {
+                            // Deactivate each alternative panel
+                            newActive[altId] = false;
+                        });
+                    }
+                    // Activate the selected panel
+                    newActive[id] = true;
+                }
+                else {
+                    // The panel is currently visible, so we are deactivating it
+                    newActive[id] = false;
+                }
+                // If hiding the panel and it has children, hide them recursively
+                if (panel && panel.childrenIds.length > 0 && !newActive[id]) {
+                    const hideChildrenRecursively = (ids) => {
+                        ids.forEach(childId => {
+                            newActive[childId] = false;
+                            const childPanel = panelMap.get(childId);
+                            if (childPanel?.childrenIds.length) {
+                                hideChildrenRecursively(childPanel.childrenIds);
+                            }
+                        });
+                    };
+                    hideChildrenRecursively(panel.childrenIds);
+                }
+            }
+            // After toggling, ensure the visibility of parent panels is in sync with their children
+            if (panel?.parentId) {
+                syncParentVisibilityWithChildren(panel.parentId, newActive);
+            }
+            // Return the updated visibility map
+            return newActive;
+        });
+    };
+    // Render panels
+    const renderPanels = (panels, parentPath = '', direction = 'horizontal') => {
+        const visiblePanels = panels.filter(p => {
+            const fullId = parentPath ? `${parentPath}.${p.id}` : p.id;
+            return p.contentOptions?.content && activeButtons[fullId];
+        });
+        const keys = visiblePanels.map(p => (parentPath ? `${parentPath}.${p.id}` : p.id));
+        const totalSize = keys.reduce((sum, key) => {
+            const entry = panelsState.get(key);
+            const size = parseFloat(direction === 'horizontal' ? entry?.width || '0' : entry?.height || '0');
+            return sum + size;
+        }, 0);
+        const sizeMap = Object.fromEntries(keys.map(key => {
+            const entry = panelsState.get(key);
+            const size = parseFloat(direction === 'horizontal' ? entry?.width || '0' : entry?.height || '0');
+            const percent = totalSize > 0 ? (size / totalSize) * 100 : 0;
+            return [key, `${percent}%`];
+        }));
+        return panels.map(panel => {
+            if (!panel.contentOptions)
+                return null;
+            const fullId = parentPath ? `${parentPath}.${panel.id}` : panel.id;
+            const isActive = activeButtons[fullId];
+            const hasChildren = isPanelArray(panel.contentOptions?.content);
+            const isLastVisible = keys.indexOf(fullId) === keys.length - 1;
+            const flexDirection = direction === 'horizontal' ? 'row' : 'column';
+            const panelStyle = {
+                display: 'flex',
+                flexDirection,
+                width: direction === 'horizontal' ? (isActive ? sizeMap[fullId] : '0%') : '100%',
+                height: direction === 'vertical' ? (isActive ? sizeMap[fullId] : '0%') : '100%',
+                visibility: isActive ? 'visible' : 'hidden',
+                overflow: 'hidden',
+                position: 'relative',
+            };
+            const contentStyle = {
+                flexGrow: 1,
+                overflow: 'auto',
+            };
+            return (_jsxs("div", { ref: el => {
+                    panelRefs.current[fullId] = el;
+                }, style: panelStyle, children: [_jsx("div", { style: contentStyle, children: hasChildren
+                            ? renderPanels(panel.contentOptions.content, fullId, 'vertical')
+                            : panel.contentOptions?.panelContainer ? _jsx(TMPanel, { title: panel.contentOptions.panelContainer.title, totalItems: panel.contentOptions.panelContainer.totalItems, displayedItemsCount: panel.contentOptions.panelContainer.displayedItemsCount, onClose: () => handleTogglePanel(fullId), onMaximize: () => handleToggleMaximize(fullId), allowMaximize: !isMobile, children: typeof panel.contentOptions.content === "function" ? panel.contentOptions.content(handleTogglePanel, handleToggleMaximize, handleVisibilityButton, handleDisableButton) : panel.contentOptions.content })
+                                :
+                                    typeof panel.contentOptions.content === "function" ? panel.contentOptions.content(handleTogglePanel, handleToggleMaximize, handleVisibilityButton, handleDisableButton) : panel.contentOptions.content }), !isLastVisible && isActive && maximizedPanelPath.length === 0 && (_jsx("div", { style: {
+                            cursor: direction === 'horizontal' ? 'col-resize' : 'row-resize',
+                            userSelect: 'none',
+                            flexShrink: 0,
+                            backgroundColor: 'transparent',
+                            width: direction === 'horizontal' ? '4px' : '100%',
+                            height: direction === 'vertical' ? '4px' : '100%',
+                            marginLeft: maximizedPanelPath.length === 0 && direction === 'horizontal' ? `${(gutters - 4) / 2}px` : undefined,
+                            marginTop: maximizedPanelPath.length === 0 && direction === 'vertical' ? `${(gutters - 4) / 2}px` : undefined,
+                            marginRight: maximizedPanelPath.length === 0 && direction === 'horizontal' ? `${(gutters - 4) / 2}px` : undefined,
+                            marginBottom: maximizedPanelPath.length === 0 && direction === 'vertical' ? `${(gutters - 4) / 2}px` : undefined,
+                        }, onMouseDown: () => {
+                            if (direction === 'horizontal') {
+                                onColumnMouseDown(fullId);
+                            }
+                            else {
+                                onRowMouseDown(fullId);
+                            }
+                        } }))] }, fullId));
+        });
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: isMobile ? 'column' : 'row', height: '100%', width: '100%' }, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    flexGrow: 1,
+                    width: isAtLeastOnePanelVisible(activeButtons) ? `calc(100% - ${showToolbar ? (isMobile ? 0 : 60) : 0}px)` : '0%',
+                    height: isAtLeastOnePanelVisible(activeButtons) ? `calc(100% - ${isMobile ? 60 : 0}px)` : '0%',
+                    visibility: isAtLeastOnePanelVisible(activeButtons) ? 'visible' : 'hidden',
+                    flexDirection: 'row',
+                }, children: renderPanels(panels, '', 'horizontal') }), !isAtLeastOnePanelVisible(activeButtons) && (_jsxs("div", { style: {
+                    width: '100%',
+                    height: isMobile ? 'calc(100% - 60px)' : '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: '#fff',
+                    borderRadius: '12px',
+                    textAlign: 'center',
+                    color: '#555',
+                    fontSize: '18px',
+                }, children: [_jsx(IconInfo, { style: { fontSize: 50 } }), _jsx("div", { children: SDKUI_Localizator.NoPanelSelected })] })), showToolbar && _jsx("div", { style: {
+                    width: isMobile ? '100%' : '60px',
+                    height: isMobile ? '60px' : '100%',
+                    borderLeft: '1px solid #ccc',
+                    display: 'flex',
+                    flexDirection: isMobile ? 'row' : 'column',
+                    padding: '8px',
+                    boxSizing: 'border-box',
+                    gap: '6px',
+                    backgroundColor: '#f9f9f9',
+                }, children: _jsx(TMPanelManagerToolbar, { allPanels: allPanels, activeButtons: activeButtons, handleTogglePanel: handleTogglePanel, updatedDisabledButton: updatedDisabledButton, updatedVisibleButton: updatedVisibleButton }) })] }));
+};
+export default TMPanelManager;

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

@@ -0,0 +1,16 @@
+import { TMPanelEntry } from './TMPanelManagerUtils';
+interface TNPanelManagerToolbarProps {
+    allPanels: Array<TMPanelEntry>;
+    activeButtons: Record<string, boolean>;
+    handleTogglePanel: (id: string) => void;
+    updatedDisabledButton?: {
+        id: string;
+        value: boolean;
+    };
+    updatedVisibleButton?: {
+        id: string;
+        value: boolean;
+    };
+}
+declare const TMPanelManagerToolbar: (props: TNPanelManagerToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export default TMPanelManagerToolbar;