@topconsultnpm/sdkui-react-beta 6.13.34 → 6.13.36

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;

package/lib/components/base/TMPanelManagerToolbar.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { useDeviceType, DeviceType } from './TMDeviceProvider';
+import TMTooltip from './TMTooltip';
+const TMPanelManagerToolbar = (props) => {
+    const { allPanels, activeButtons, handleTogglePanel, updatedDisabledButton, updatedVisibleButton } = props;
+    const deviceType = useDeviceType();
+    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
+    const [filteredPanels, setFilteredPanels] = useState([]);
+    const [disabledButtons, setDisabledButtons] = useState({});
+    const [visibleButtons, setVisibleButtons] = useState({});
+    // Initialize visibility and disabled states
+    useEffect(() => {
+        const visible = {};
+        const disabled = {};
+        const filtered = allPanels
+            .filter((p) => {
+            const vis = !!p.config.toolbarOptions?.visible;
+            visible[p.fullId] = vis;
+            disabled[p.fullId] = !!p.config.toolbarOptions?.disabled;
+            return vis;
+        })
+            .sort((a, b) => (a.config.toolbarOptions?.orderNumber ?? 0) - (b.config.toolbarOptions?.orderNumber ?? 0));
+        setVisibleButtons(visible);
+        setDisabledButtons(disabled);
+        setFilteredPanels(filtered);
+    }, [allPanels]);
+    // Update disabled button
+    useEffect(() => {
+        if (updatedDisabledButton) {
+            setDisabledButtons((prev) => ({
+                ...prev,
+                [updatedDisabledButton.id]: updatedDisabledButton.value,
+            }));
+        }
+    }, [updatedDisabledButton]);
+    // Update visible button
+    useEffect(() => {
+        if (updatedVisibleButton) {
+            const { id, value } = updatedVisibleButton;
+            setVisibleButtons((prev) => ({ ...prev, [id]: value }));
+            setFilteredPanels((prev) => {
+                if (value) {
+                    const newPanel = allPanels.find((p) => p.fullId === id);
+                    if (newPanel && !prev.some((p) => p.fullId === id)) {
+                        return [...prev, newPanel].sort((a, b) => (a.config.toolbarOptions?.orderNumber ?? 0) - (b.config.toolbarOptions?.orderNumber ?? 0));
+                    }
+                    return prev;
+                }
+                else {
+                    return prev.filter((p) => p.fullId !== id);
+                }
+            });
+        }
+    }, [updatedVisibleButton, allPanels]);
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: isMobile ? 'row' : 'column',
+            gap: '6px',
+            alignItems: isMobile ? 'center' : 'flex-start',
+            justifyContent: isMobile ? 'center' : 'flex-start',
+            width: '100%',
+            height: '100%',
+        }, children: filteredPanels.map((p, idx) => {
+            const isActive = activeButtons[p.fullId];
+            const handleClick = p.config.buttonOptions?.onClick;
+            const isToolbarDisabled = disabledButtons[p.fullId];
+            // Separator JSX if beginGroup is true and NOT first button (otherwise no separator before first button)
+            const separator = (p.config.toolbarOptions?.beginGroup && idx > 0) ? (_jsx("div", { style: {
+                    width: isMobile ? '1px' : '80%',
+                    height: isMobile ? '80%' : '1px',
+                    backgroundColor: '#ccc',
+                    margin: isMobile ? '0 6px' : '6px 0',
+                    alignSelf: 'center',
+                } }, `sep-${p.fullId}`)) : null;
+            // Button JSX
+            const button = (_jsx(TMTooltip, { content: p.config.name, position: 'left', children: _jsx("button", { disabled: isToolbarDisabled, onClick: () => { handleTogglePanel(p.fullId); if (handleClick)
+                        handleClick(); }, style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height: '40px',
+                        width: '40px',
+                        border: 'none',
+                        borderRadius: '10px',
+                        fontSize: '18px',
+                        padding: '8px 10px',
+                        color: '#fff',
+                        transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                        cursor: isToolbarDisabled ? 'not-allowed' : 'pointer',
+                        opacity: isToolbarDisabled ? 0.6 : 1,
+                        backgroundColor: isActive ? '#81c784' : '#e57373',
+                    }, onMouseEnter: (e) => { if (!isToolbarDisabled) {
+                        e.currentTarget.style.transform = 'scale(1.1)';
+                    } }, onMouseLeave: (e) => { e.currentTarget.style.transform = 'scale(1)'; }, children: typeof p.config.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${p.config.toolbarOptions?.icon}` })) : (p.config.toolbarOptions?.icon) }) }, p.fullId));
+            // Return separator first, then button
+            return [separator, button];
+        }) }));
+};
+export default TMPanelManagerToolbar;

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

@@ -0,0 +1,36 @@
+import { ITMPanelProps } from "./TMPanel";
+export type TMPanelItemConfig = {
+    id: string;
+    name: string;
+    type: 'content' | 'button';
+    alternativePanelIds?: Array<string>;
+    buttonOptions?: {
+        onClick: () => void;
+    };
+    contentOptions?: {
+        height: string;
+        width: string;
+        visible?: boolean;
+        content?: JSX.Element | ((handleTogglePanel: (id: string) => void, handleToggleMaximize: (fullId: string) => void, handleVisibilityButton: (id: string, value: boolean) => void, handleDisableButton: (id: string, value: boolean) => void) => JSX.Element) | Array<TMPanelItemConfig>;
+        panelContainer?: ITMPanelProps;
+    };
+    toolbarOptions?: {
+        icon: string | JSX.Element;
+        isActive: boolean;
+        visible: boolean;
+        disabled?: boolean;
+        orderNumber?: number;
+        beginGroup?: boolean;
+    };
+};
+export type TMPanelEntry = {
+    fullId: string;
+    config: TMPanelItemConfig;
+    parentId: string | null;
+    childrenIds: Array<string>;
+    alternativePanelIds: Array<string>;
+};
+export declare const isPanelArray: (content: unknown) => content is Array<TMPanelItemConfig>;
+export declare const flattenPanels: (panels: Array<TMPanelItemConfig>, parentId?: string | null, parentPath?: string) => Array<TMPanelEntry>;
+export declare const isAtLeastOnePanelVisible: (activeButtons: Record<string, boolean>) => boolean;
+export declare const isExactlyOnePanelVisible: (activeButtons: Record<string, boolean>) => boolean;

package/lib/components/base/TMPanelManagerUtils.js

@@ -0,0 +1,27 @@
+// Type guard to check if a value is an array of TMPanelItemConfig objects.
+// Ensures that every item in the array is a non-null object with 'id' and 'contentOptions' properties.
+export const isPanelArray = (content) => Array.isArray(content) && content.every(p => typeof p === 'object' && p !== null && 'id' in p && 'contentOptions' in p);
+// Recursively flattens a nested array of panel configurations into a flat array of TMPanelEntry objects.
+// - panels: the input array of TMPanelItemConfig.
+// - parentId: optional ID of the parent panel (used for hierarchical relationships).
+// - parentPath: string path of ancestor IDs, used to build a full, unique identifier for each panel.
+export const flattenPanels = (panels, parentId = null, parentPath = '') => {
+    return panels.flatMap(panel => {
+        // Construct the full ID by appending the current panel ID to the parent path.
+        const fullId = parentPath ? `${parentPath}.${panel.id}` : panel.id;
+        let children = [];
+        // If the panel has nested content that is also a valid panel array, recursively flatten them.
+        if (isPanelArray(panel.contentOptions?.content)) {
+            children = flattenPanels(panel.contentOptions.content, fullId, fullId);
+        }
+        // Extract full IDs of all child entries.
+        const childrenIds = children.map(c => c.fullId);
+        const alternativePanelIds = panel.alternativePanelIds ?? [];
+        // Return the current panel as a TMPanelEntry followed by its flattened children.
+        return [{ fullId, config: panel, parentId, childrenIds, alternativePanelIds }, ...children];
+    });
+};
+// Checks if at least one panel is currently visible (i.e., at least one active button is true)
+export const isAtLeastOnePanelVisible = (activeButtons) => Object.values(activeButtons).some(Boolean);
+// Checks if exactly one panel is currently visible (i.e., only one active button is true)
+export const isExactlyOnePanelVisible = (activeButtons) => Object.values(activeButtons).filter(Boolean).length === 1;

package/lib/components/index.d.ts

@@ -14,8 +14,9 @@ export * from './base/TMToolbarCard';
 export * from './base/TMRightSidebar';
 export * from './base/TMTreeView';
 export * from './base/TMPanel';
-export { default as TMPanelManagerMatrix } from './base/TMPanelManagerMatrix';
-export * from './base/TMPanelManagerMatrixUtils';
+export { default as TMPanelManager } from './base/TMPanelManager';
+export { default as TMPanelManagerToolbar } from './base/TMPanelManagerToolbar';
+export * from './base/TMPanelManagerUtils';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';

package/lib/components/index.js

@@ -15,8 +15,9 @@ export * from './base/TMToolbarCard';
 export * from './base/TMRightSidebar';
 export * from './base/TMTreeView';
 export * from './base/TMPanel';
-export { default as TMPanelManagerMatrix } from './base/TMPanelManagerMatrix';
-export * from './base/TMPanelManagerMatrixUtils';
+export { default as TMPanelManager } from './base/TMPanelManager';
+export { default as TMPanelManagerToolbar } from './base/TMPanelManagerToolbar';
+export * from './base/TMPanelManagerUtils';
 export { default as CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';

package/package.json

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

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

@@ -1,9 +0,0 @@
-import { TMPanelManagerMatrixColumn, TMPanelManagerToolbar } from './TMPanelManagerMatrixUtils';
-export interface TMPanelManagerMatrixProps {
-    panelMatrixMap: Map<string, TMPanelManagerMatrixColumn>;
-    toolbar?: TMPanelManagerToolbar;
-    initialMobilePanelID?: string;
-    gutters?: number;
-}
-declare const TMPanelManagerMatrix: (props: TMPanelManagerMatrixProps) => import("react/jsx-runtime").JSX.Element;
-export default TMPanelManagerMatrix;

package/lib/components/base/TMPanelManagerMatrix.js

@@ -1,262 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useMemo, useState } from 'react';
-import { SDKUI_Globals, SDKUI_Localizator, IconInfo } from '../../helper';
-import { useDeviceType, DeviceType } from './TMDeviceProvider';
-import TMPanel from './TMPanel';
-import { calculatePanelSizes, DesktopToolbar, getDynamicColumnWidth, getInitialMobilePanelID, MobileToolbar } from './TMPanelManagerMatrixUtils';
-const TMPanelManagerMatrix = (props) => {
-    // Destructure props 
-    const { panelMatrixMap, toolbar, initialMobilePanelID, gutters = SDKUI_Globals.userSettings.themeSettings.gutters } = 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]);
-    // State for toolbar items
-    const [toolbarState, setToolbarState] = useState(toolbar);
-    // State to track which panel IDs are currently hidden
-    const [hiddenPanelIds, setHiddenPanelIds] = useState(() => {
-        const initialHidden = new Set();
-        if (isMobile) {
-            // Mobile: mostra solo il primo pannello
-            let firstMobilePanelID = initialMobilePanelID ?? getInitialMobilePanelID(panelMatrixMap);
-            panelMatrixMap.forEach(col => {
-                col.rows.forEach(row => {
-                    if (row.id !== firstMobilePanelID)
-                        initialHidden.add(row.id);
-                });
-            });
-        }
-        else {
-            // Desktop: nascondi quelli con hidden true
-            panelMatrixMap.forEach(col => {
-                col.rows.forEach(row => {
-                    if (row.hidden)
-                        initialHidden.add(row.id);
-                });
-            });
-        }
-        return initialHidden;
-    });
-    // State to store the current widths of all column, represented as a Map
-    const [columnWidths, setColumnWidths] = useState(new Map());
-    // State to store the current heights of all panels, represented as a Map
-    const [panelHeights, setPanelHeights] = useState(new Map());
-    // State to track maximized panel
-    const [maximizedPanelId, setMaximizedPanelId] = useState(null);
-    // Memoized computation of visible columns and the total number of visible panels
-    const { visibleColumns, totalVisiblePanels } = useMemo(() => {
-        let totalVisiblePanels = 0;
-        const visibleColumns = [];
-        for (const [columnKey, column] of panelMatrixMap.entries()) {
-            // Filter visible rows in the current column
-            const visibleRows = column.rows.filter(row => !hiddenPanelIds.has(row.id));
-            // If any visible rows exist, include the column and count them
-            if (visibleRows.length > 0) {
-                visibleColumns.push(columnKey);
-                totalVisiblePanels += visibleRows.length;
-            }
-        }
-        return { visibleColumns, totalVisiblePanels };
-    }, [panelMatrixMap, hiddenPanelIds]);
-    // Effect hook to update column widths
-    useEffect(() => {
-        const newColumnWidths = new Map();
-        Array.from(panelMatrixMap.entries()).forEach(([columnKey, col]) => {
-            if (!maximizedPanelId) {
-                const width = getDynamicColumnWidth(col, hiddenPanelIds, Array.from(panelMatrixMap.values()));
-                newColumnWidths.set(columnKey, { width });
-            }
-        });
-        setColumnWidths(newColumnWidths);
-    }, [panelMatrixMap, hiddenPanelIds, maximizedPanelId]);
-    // Effect hook to set initial hidden panels and their heights
-    useEffect(() => {
-        const initialHidden = new Set();
-        if (isMobile) {
-            // On mobile, only show the first selected mobile panel; hide the rest
-            let firstMobilePanelID = initialMobilePanelID ?? getInitialMobilePanelID(panelMatrixMap);
-            panelMatrixMap.forEach(col => {
-                col.rows.forEach(row => {
-                    if (row.id !== firstMobilePanelID)
-                        initialHidden.add(row.id);
-                });
-            });
-        }
-        else {
-            // On non-mobile devices, hide panels that are marked as `hidden`
-            panelMatrixMap.forEach(col => {
-                col.rows.forEach(row => {
-                    if (row.hidden)
-                        initialHidden.add(row.id);
-                });
-            });
-        }
-        // Update state with the calculated hidden panels and panel sizes
-        setHiddenPanelIds(initialHidden);
-        setPanelHeights(calculatePanelSizes(panelMatrixMap, initialHidden));
-    }, [panelMatrixMap, isMobile]);
-    // Function to toggle the disabled of a toolbar given its item
-    const toggleToolbarItemDisabled = (toolbarItem) => {
-        if (!toolbarItem)
-            return;
-        setToolbarState(prevToolbar => {
-            if (!prevToolbar)
-                return prevToolbar;
-            return {
-                ...prevToolbar,
-                items: prevToolbar.items.map(item => item.id === toolbarItem.id ? { ...item, disabled: !item.disabled } : item)
-            };
-        });
-    };
-    // Function to toggle the visibility of a toolbar given its item
-    const toggleToolbarItemVisibility = (toolbarItem) => {
-        if (!toolbarItem)
-            return;
-        setToolbarState(prevToolbar => {
-            if (!prevToolbar)
-                return prevToolbar;
-            return {
-                ...prevToolbar,
-                items: prevToolbar.items.map(item => item.id === toolbarItem.id ? { ...item, visible: !(item.visible ?? true) } : item)
-            };
-        });
-    };
-    // Function to toggle the visibility of a panel given its item
-    const togglePanelVisibility = (toolbarItem) => {
-        if (!toolbarItem)
-            return;
-        setHiddenPanelIds(prevHidden => {
-            let newHidden;
-            if (isMobile) {
-                // On mobile, make only the selected panel visible; hide all others
-                newHidden = new Set();
-                panelMatrixMap.forEach(col => {
-                    col.rows.forEach(row => {
-                        if (row.id !== toolbarItem.panelManagerMatrixRowId) {
-                            newHidden.add(row.id);
-                        }
-                    });
-                });
-            }
-            else {
-                // On non-mobile devices, toggle visibility normally
-                newHidden = new Set(prevHidden);
-                // Hide alternative panels if any
-                if (toolbarItem.alternativePanelManagerMatrixRowId?.length) {
-                    toolbarItem.alternativePanelManagerMatrixRowId.forEach(altId => newHidden.add(altId));
-                }
-                // Toggle clicked panel visibility
-                if (newHidden.has(toolbarItem.panelManagerMatrixRowId)) {
-                    newHidden.delete(toolbarItem.panelManagerMatrixRowId);
-                }
-                else {
-                    // If the panel is maximized, call maximizeMinimizePanelCallback to minimize it
-                    if (maximizedPanelId === toolbarItem.panelManagerMatrixRowId) {
-                        toogleMaximizeMinimizePanelCallback(toolbarItem.panelManagerMatrixRowId);
-                    }
-                    newHidden.add(toolbarItem.panelManagerMatrixRowId);
-                }
-            }
-            setPanelHeights(calculatePanelSizes(panelMatrixMap, newHidden));
-            return newHidden;
-        });
-    };
-    const toogleMaximizeMinimizePanelCallback = (id) => {
-        setMaximizedPanelId(prevId => (prevId === id ? null : id));
-    };
-    return (_jsx("div", { style: { width: '100%', height: '100%' }, children: _jsxs("div", { style: {
-                display: isMobile ? 'block' : 'flex',
-                flexDirection: 'row',
-                width: "100%",
-                height: '100%',
-                overflow: 'hidden',
-                position: 'relative',
-            }, children: [_jsx("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        width: (toolbarState && toolbarState.items.length > 0) ? `calc(100% - ${isMobile ? "0px" : "60px"})` : '100%',
-                        height: `calc(100% - ${isMobile ? "60px" : "0px"})`,
-                        overflow: 'hidden',
-                        // transition: 'width 0.3s',
-                    }, children: visibleColumns.length > 0 ? visibleColumns.map((column, colIndex) => {
-                        // Retrieve the column data from the panelMatrixMap using the current column key
-                        const col = panelMatrixMap.get(column);
-                        // Check if the current column contains the maximized panel
-                        const hasMaximized = !!col?.rows?.some(row => row.id === maximizedPanelId);
-                        const isLastColumn = colIndex === visibleColumns.length - 1;
-                        // Define the base style for all columns with flex layout, full height, smooth width transition, and no minimum width
-                        const columnBaseStyle = {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            height: '100%',
-                            // transition: isMobile ? 'none' : 'width 0.3s', 
-                            paddingRight: (!maximizedPanelId && !isLastColumn) ? `${gutters}px` : '0px'
-                        };
-                        // Declare a variable to hold the final computed style for the column
-                        let columnStyle;
-                        if (maximizedPanelId) {
-                            // If a panel is maximized, if it does, give the column full width
-                            columnStyle = hasMaximized ? { ...columnBaseStyle, width: '100%' } : { ...columnBaseStyle, width: '0px', overflow: 'hidden' };
-                        }
-                        else {
-                            // Otherwise, hide this column by setting width to 0 and hiding overflow
-                            const savedWidth = columnWidths.get(column)?.width ?? getDynamicColumnWidth(col, hiddenPanelIds, Array.from(panelMatrixMap.values()));
-                            columnStyle = { ...columnBaseStyle, width: savedWidth };
-                        }
-                        return (_jsx(React.Fragment, { children: _jsx("div", { style: columnStyle, children: col?.rows?.map((row) => {
-                                    const isHiddenPanel = hiddenPanelIds.has(row.id);
-                                    const visibleRows = col.rows?.filter(r => !hiddenPanelIds.has(r.id));
-                                    const isLastVisible = visibleRows.length > 0 && visibleRows[visibleRows.length - 1].id === row.id;
-                                    const isMaximized = maximizedPanelId === row.id;
-                                    const baseStyle = {
-                                        borderRadius: '8px',
-                                        display: 'block',
-                                        // transition: isMobile ? 'none' : 'all 0.3s ease',
-                                        paddingBottom: (isHiddenPanel || isLastVisible || isMaximized) ? '0px' : `${gutters}px`,
-                                    };
-                                    const hiddenStyle = {
-                                        minWidth: '0px',
-                                        width: '0px',
-                                        height: '0px',
-                                        visibility: 'hidden',
-                                        opacity: 0,
-                                    };
-                                    const maximizedStyle = {
-                                        minWidth: '50px',
-                                        width: '100%',
-                                        height: '100%',
-                                        visibility: 'visible',
-                                        opacity: 1,
-                                    };
-                                    const defaultStyle = {
-                                        minWidth: isHiddenPanel ? '0px' : '50px',
-                                        width: '100%',
-                                        height: isHiddenPanel ? '0px' : panelHeights.get(row.id)?.height ?? '100%',
-                                        visibility: isHiddenPanel ? 'hidden' : 'visible',
-                                        opacity: isHiddenPanel ? 0 : 1,
-                                    };
-                                    const panelStyle = maximizedPanelId ? (isMaximized ? { ...baseStyle, ...maximizedStyle } : hiddenStyle) : { ...baseStyle, ...defaultStyle };
-                                    return _jsx("div", { style: panelStyle, children: row.panel ? _jsx(TMPanel, { title: row.panel.title, totalItems: row.panel.totalItems ?? undefined, displayedItemsCount: row.panel.displayedItemsCount ?? undefined, showHeader: row.panel.showHeader ?? true, allowMaximize: !isMobile, onClose: (!isMobile && toolbarState) ? () => togglePanelVisibility(toolbarState.items.find(item => item.panelManagerMatrixRowId === row.id)) : undefined, onMaximize: () => toogleMaximizeMinimizePanelCallback(row.id), onHeaderDoubleClick: () => toogleMaximizeMinimizePanelCallback(row.id), children: _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toogleMaximizeMinimizePanelCallback, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) })
-                                            : _jsx("div", { style: { width: '100%', height: '100%' }, children: typeof row.content === "function" ? row.content(togglePanelVisibility, toogleMaximizeMinimizePanelCallback, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content }) }, "TMPanelManagerMatrix-r-" + row.id);
-                                }) }) }, "TMPanelManagerMatrix-c-" + column));
-                    }) : _jsxs("div", { style: {
-                            width: '100%',
-                            height: '100%',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            backgroundColor: '#fff',
-                            border: '1px solid #ddd',
-                            borderRadius: '12px',
-                            boxShadow: '0 4px 10px rgba(0, 0, 0, 0.05)',
-                            padding: '40px',
-                            textAlign: 'center',
-                            color: '#555',
-                            fontSize: '18px',
-                            gap: '16px'
-                        }, children: [_jsx(IconInfo, { style: { fontSize: 50 } }), _jsx("div", { children: SDKUI_Localizator.NoPanelSelected })] }) }), toolbarState && toolbarState.items.length > 0 && (!isMobile
-                    ? DesktopToolbar(toolbarState, hiddenPanelIds, togglePanelVisibility)
-                    : MobileToolbar(toolbarState, hiddenPanelIds, togglePanelVisibility))] }) }));
-};
-export default TMPanelManagerMatrix;

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

@@ -1,69 +0,0 @@
-import { ITMPanelProps } from './TMPanel';
-export declare const defaultTMPanelManagerToolbarStyles: {
-    container: {
-        backgroundColor: string;
-        padding: string;
-    };
-    items: {
-        width: string;
-        height: string;
-        inactiveBackgroundColor: string;
-        activeBackgroundColor: string;
-        borderRadius: string;
-        marginBottom: string;
-        iconFontSize: string;
-        iconColor: string;
-    };
-};
-export interface TMPanelManagerMatrixColumn {
-    rows: Array<TMPanelManagerMatrixRow>;
-    width?: string;
-}
-export interface ExtendedTMPanelProps extends ITMPanelProps {
-    showCustomMaximizeMinimizeButton?: boolean;
-}
-export interface TMPanelManagerMatrixRow {
-    id: string;
-    hidden: boolean;
-    content: JSX.Element | ((togglePanelVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toogleMaximizeMinimizePanelCallback: (id: string) => void, toggleToolbarItemDisabled: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void, toggleToolbarItemVisibility: (toolbarItem: TMPanelManagerToolbarItem | undefined) => void) => JSX.Element);
-    height?: string;
-    width?: string;
-    panel?: ExtendedTMPanelProps;
-}
-export interface TMPanelManagerToolbarStyles {
-    container?: {
-        backgroundColor?: string;
-        padding?: string;
-    };
-    items?: {
-        width?: string;
-        height?: string;
-        inactiveBackgroundColor?: string;
-        activeBackgroundColor?: string;
-        borderRadius?: string;
-        marginBottom?: string;
-        iconFontSize?: string;
-        iconColor?: string;
-    };
-}
-export interface TMPanelManagerToolbarItem {
-    id: string;
-    icon: string | JSX.Element;
-    tooltipName: string;
-    panelManagerMatrixRowId: string;
-    alternativePanelManagerMatrixRowId?: Array<string>;
-    beginGroup?: boolean;
-    disabled?: boolean;
-    visible?: boolean;
-}
-export interface TMPanelManagerToolbar {
-    items: Array<TMPanelManagerToolbarItem>;
-    styles?: TMPanelManagerToolbarStyles;
-}
-export declare const calculatePanelSizes: (panelMatrixMap: Map<string, TMPanelManagerMatrixColumn>, hiddenIds: Set<string>) => Map<string, {
-    height: string;
-}>;
-export declare const getInitialMobilePanelID: (panelMatrixMap: Map<string, TMPanelManagerMatrixColumn>) => string | undefined;
-export declare const DesktopToolbar: (toolbar: TMPanelManagerToolbar, hiddenPanelIds: Set<string>, togglePanelVisibility: (panel: TMPanelManagerToolbarItem) => void) => import("react/jsx-runtime").JSX.Element;
-export declare const MobileToolbar: (toolbar: TMPanelManagerToolbar, hiddenPanelIds: Set<string>, togglePanelVisibility: (panel: TMPanelManagerToolbarItem) => void) => import("react/jsx-runtime").JSX.Element;
-export declare const getDynamicColumnWidth: (col: TMPanelManagerMatrixColumn | undefined, hiddenPanelIds: Set<string>, allColumns: Array<TMPanelManagerMatrixColumn>) => string;

package/lib/components/base/TMPanelManagerMatrixUtils.js

@@ -1,155 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ScrollView } from "devextreme-react";
-import { SDKUI_Globals } from '../../helper';
-import TMTooltip from './TMTooltip';
-export const defaultTMPanelManagerToolbarStyles = {
-    container: {
-        backgroundColor: '#f0f0f0',
-        padding: '6px'
-    },
-    items: {
-        width: '35px',
-        height: '35px',
-        inactiveBackgroundColor: '#e57373',
-        activeBackgroundColor: '#81c784',
-        borderRadius: '50%',
-        marginBottom: '6px',
-        iconFontSize: "25px",
-        iconColor: '#ffffff'
-    }
-};
-;
-// Helper to calculate sizes based on hidden panel IDs
-export const calculatePanelSizes = (panelMatrixMap, hiddenIds) => {
-    const sizes = new Map();
-    panelMatrixMap.forEach((column) => {
-        const visiblePanels = column.rows.filter(p => !hiddenIds.has(p.id));
-        const hiddenPanels = column.rows.filter(p => hiddenIds.has(p.id));
-        if (visiblePanels.length > 0) {
-            const totalVisibleHeight = visiblePanels.reduce((sum, panel) => {
-                return sum + parseFloat(panel.height || '0');
-            }, 0);
-            visiblePanels.forEach(panel => {
-                const originalHeight = parseFloat(panel.height || '0');
-                const newHeightPercent = (originalHeight / totalVisibleHeight) * 100;
-                sizes.set(panel.id, { height: `${newHeightPercent}%` });
-            });
-        }
-        hiddenPanels.forEach(panel => {
-            sizes.set(panel.id, { height: '0%' });
-        });
-    });
-    return sizes;
-};
-export const getInitialMobilePanelID = (panelMatrixMap) => {
-    const firstEntry = panelMatrixMap.values().next().value?.rows;
-    if (!firstEntry)
-        return undefined;
-    const visiblePanel = firstEntry.find((row) => !row.hidden);
-    return visiblePanel?.id;
-};
-export const DesktopToolbar = (toolbar, hiddenPanelIds, togglePanelVisibility) => {
-    return _jsx("div", { style: {
-            width: '40px',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'flex-start',
-            borderRadius: '8px',
-            alignItems: 'center',
-            marginLeft: SDKUI_Globals.userSettings.themeSettings.gutters,
-            // customizable properties
-            backgroundColor: toolbar.styles?.container?.backgroundColor ?? defaultTMPanelManagerToolbarStyles.container.backgroundColor,
-            padding: toolbar.styles?.container?.padding ?? defaultTMPanelManagerToolbarStyles.container.padding,
-        }, children: toolbar.items.filter(item => item.visible !== false).map((item, index) => {
-            return _jsxs("div", { children: [item.beginGroup && index !== 0 && (_jsx("hr", { style: { margin: '10px 0', borderTop: '1px solid #c6c6c6', width: '100%' } })), _jsx("button", { disabled: item.disabled ?? false, style: {
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                            border: 'none',
-                            cursor: 'pointer',
-                            transition: 'background-color 0.3s, transform 0.2s',
-                            // customizable properties
-                            width: toolbar.styles?.items?.width ?? defaultTMPanelManagerToolbarStyles.items.width,
-                            height: toolbar.styles?.items?.height ?? defaultTMPanelManagerToolbarStyles.items.height,
-                            backgroundColor: item.disabled ? '#cccccc'
-                                : hiddenPanelIds.has(item.panelManagerMatrixRowId)
-                                    ? toolbar.styles?.items?.inactiveBackgroundColor ?? defaultTMPanelManagerToolbarStyles.items.inactiveBackgroundColor
-                                    : toolbar.styles?.items?.activeBackgroundColor ?? defaultTMPanelManagerToolbarStyles.items.activeBackgroundColor,
-                            borderRadius: toolbar.styles?.items?.borderRadius ?? defaultTMPanelManagerToolbarStyles.items.borderRadius,
-                            marginBottom: toolbar.styles?.items?.marginBottom ?? defaultTMPanelManagerToolbarStyles.items.marginBottom,
-                        }, onMouseEnter: (e) => {
-                            e.currentTarget.style.transform = 'scale(1.1)';
-                        }, onMouseLeave: (e) => {
-                            e.currentTarget.style.transform = 'scale(1)';
-                        }, onClick: () => togglePanelVisibility(item), children: _jsx(TMTooltip, { content: item.tooltipName, children: typeof item.icon === 'string' ? _jsx("i", { className: `dx-icon dx-icon-${item.icon}`, style: { fontSize: toolbar.styles?.items?.iconFontSize ?? defaultTMPanelManagerToolbarStyles.items.iconFontSize, color: toolbar.styles?.items?.iconColor ?? defaultTMPanelManagerToolbarStyles.items.iconColor } }) : item.icon }) })] }, "TMPanelManagerMatrix-Desktop-Toolbar-Item-" + item.id);
-        }) }, "TMPanelManagerMatrix-Desktop-Toolbar");
-};
-export const MobileToolbar = (toolbar, hiddenPanelIds, togglePanelVisibility) => {
-    return _jsx("div", { style: {
-            width: '100%',
-            height: '60px',
-            background: 'linear-gradient(135deg, #e0eafc, #cfdef3)',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            borderRadius: '12px',
-            boxShadow: '0 6px 10px rgba(0, 0, 0, 0.15)',
-            alignItems: 'center',
-            padding: '5px',
-        }, children: _jsx("div", { style: {
-                display: "flex",
-                overflow: "hidden",
-                borderRadius: "12px",
-                backgroundColor: "#ffffff",
-                boxShadow: "0 6px 12px rgba(0,0,0,0.1)",
-                width: "100%",
-                height: '100%',
-            }, children: _jsx(ScrollView, { direction: "horizontal", showScrollbar: "always", useNative: Number(SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar) === 1, style: { whiteSpace: "nowrap", width: "100%" }, children: _jsx("div", { style: { display: "flex", gap: "8px", justifyContent: "center", padding: "5px" }, children: toolbar.items.filter(item => item.visible !== false).map((item, index) => {
-                        return _jsxs("div", { style: { display: "flex", flexDirection: "row", alignItems: "center" }, children: [item.beginGroup && index !== 0 && (_jsx("div", { style: { height: '35px', width: '1px', backgroundColor: '#c6c6c6', margin: '0 8px' } })), _jsx("button", { disabled: item.disabled ?? false, style: {
-                                        display: 'flex',
-                                        justifyContent: 'center',
-                                        alignItems: 'center',
-                                        border: 'none',
-                                        cursor: 'pointer',
-                                        transition: 'background-color 0.3s, transform 0.2s',
-                                        // customizable properties
-                                        width: toolbar.styles?.items?.width ?? defaultTMPanelManagerToolbarStyles.items.width,
-                                        height: toolbar.styles?.items?.height ?? defaultTMPanelManagerToolbarStyles.items.height,
-                                        backgroundColor: item.disabled ? '#cccccc'
-                                            : hiddenPanelIds.has(item.panelManagerMatrixRowId)
-                                                ? toolbar.styles?.items?.inactiveBackgroundColor ?? defaultTMPanelManagerToolbarStyles.items.inactiveBackgroundColor
-                                                : toolbar.styles?.items?.activeBackgroundColor ?? defaultTMPanelManagerToolbarStyles.items.activeBackgroundColor,
-                                        borderRadius: toolbar.styles?.items?.borderRadius ?? defaultTMPanelManagerToolbarStyles.items.borderRadius,
-                                        marginBottom: toolbar.styles?.items?.marginBottom ?? defaultTMPanelManagerToolbarStyles.items.marginBottom,
-                                    }, onMouseEnter: (e) => {
-                                        e.currentTarget.style.transform = 'scale(1.1)';
-                                    }, onMouseLeave: (e) => {
-                                        e.currentTarget.style.transform = 'scale(1)';
-                                    }, onClick: () => togglePanelVisibility(item), children: _jsx(TMTooltip, { content: item.tooltipName, children: typeof item.icon === 'string' ? _jsx("i", { className: `dx-icon dx-icon-${item.icon}`, style: { fontSize: toolbar.styles?.items?.iconFontSize ?? defaultTMPanelManagerToolbarStyles.items.iconFontSize, color: toolbar.styles?.items?.iconColor ?? defaultTMPanelManagerToolbarStyles.items.iconColor } }) : item.icon }) })] }, "TMPanelManagerMatrix-Mobile-Toolbar-Item-" + item.id);
-                    }) }) }) }) }, "TMPanelManagerMatrix-Mobile-Toolbar");
-};
-export const getDynamicColumnWidth = (col, hiddenPanelIds, allColumns) => {
-    if (!col)
-        return '100%';
-    // If all rows in the column are hidden, return width 0%
-    const allRowsHidden = col.rows.every(row => hiddenPanelIds.has(row.id));
-    if (allRowsHidden)
-        return '100%';
-    // Calculate which columns are visible (at least one row not hidden)
-    const visibleColumns = allColumns.filter(c => c.rows.some(r => !hiddenPanelIds.has(r.id)));
-    const visibleCount = visibleColumns.length;
-    // If all columns are visible, use the original widths
-    if (visibleCount === allColumns.length) {
-        return col.width ?? `${100 / visibleCount}%`;
-    }
-    // If some columns are hidden, redistribute the 100% width among visible columns
-    // proportionally to their original widths
-    // First, sum the original widths (in percent) of the visible columns
-    const totalPercent = visibleColumns.reduce((sum, c) => {
-        const w = c.width ? parseFloat(c.width) : (100 / visibleCount);
-        return sum + w;
-    }, 0);
-    // Calculate the width percentage for this column based on its original width proportion
-    const thisPercent = col.width ? parseFloat(col.width) : (100 / visibleCount);
-    return `${(thisPercent / totalPercent) * 100}%`;
-};