@topconsultnpm/sdkui-react-beta 6.13.65 → 6.13.67

package/lib/components/base/TMPanelManager.js

@@ -1,478 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, 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, toolbarMode = 0, gutters = SDKUI_Globals.userSettings.themeSettings.gutters, minPanelPercent = 5 } = 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]);
-    // Active buttons state & panel map
-    const [activeButtons, setActiveButtons] = useState({});
-    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 (allPanels.length > 0) {
-            const initialButtons = Object.fromEntries(allPanels.map(p => [p.fullId, p.config.toolbarOptions?.isActive ?? false]));
-            setActiveButtons(initialButtons);
-        }
-    }, [allPanels]);
-    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 < minPanelPercent) {
-                    newCurrent = minPanelPercent;
-                    newNext = total - newCurrent;
-                }
-                else if (newNext < minPanelPercent) {
-                    newNext = minPanelPercent;
-                    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, panelMap]);
-    // 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", { 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, onBack: panel.contentOptions.panelContainer.onBack, onClose: () => handleTogglePanel(fullId), onMaximize: () => handleToggleMaximize(fullId), onHeaderDoubleClick: () => handleToggleMaximize(fullId), allowMaximize: !isMobile, toolbar: panel.contentOptions.panelContainer.toolbar, 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%', gap: !isMobile ? gutters : 0 }, children: [_jsx("div", { style: {
-                    display: 'flex',
-                    flexGrow: 1,
-                    width: isAtLeastOnePanelVisible(activeButtons) ? `calc(100% - ${showToolbar ? (isMobile ? 0 : 70) : 0}px)` : '0%',
-                    height: isAtLeastOnePanelVisible(activeButtons) ? `calc(100% - ${isMobile ? 55 : 0}px)` : '0%',
-                    visibility: isAtLeastOnePanelVisible(activeButtons) ? 'visible' : 'hidden',
-                    flexDirection: 'row',
-                }, children: renderPanels(panels, '', 'horizontal') }), !isAtLeastOnePanelVisible(activeButtons) && (_jsxs("div", { style: {
-                    width: `calc(100% - ${showToolbar ? (isMobile ? 0 : 70) : 0}px)`,
-                    height: `calc(100% - ${isMobile ? 55 : 0}px)`,
-                    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: toolbarMode === 0 ? {
-                    width: isMobile ? '100%' : '50px',
-                    height: isMobile ? '50px' : '100%',
-                    borderLeft: '1px solid #ccc',
-                    display: 'flex',
-                    flexDirection: isMobile ? 'row' : 'column',
-                    padding: '10px',
-                    boxSizing: 'border-box',
-                    gap: '10px',
-                    backgroundColor: '#f9f9f9',
-                } : {
-                    display: 'flex',
-                    flexDirection: isMobile ? 'row' : 'column',
-                    alignItems: 'center',
-                    width: isMobile ? '100%' : '50px',
-                    height: isMobile ? '50px' : 'max-content',
-                    background: 'transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box',
-                    borderRadius: isMobile ? '10px' : '10px 0px 0px 10px',
-                    padding: '10px',
-                    gap: '10px'
-                }, children: _jsx(TMPanelManagerToolbar, { allPanels: allPanels, activeButtons: activeButtons, handleTogglePanel: handleTogglePanel, updatedDisabledButton: updatedDisabledButton, updatedVisibleButton: updatedVisibleButton, toolbarMode: toolbarMode }) })] }));
-};
-export default TMPanelManager;

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

@@ -1,23 +0,0 @@
-import React from 'react';
-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;
-    };
-    toolbarMode?: number;
-}
-declare const TMPanelManagerToolbar: (props: TNPanelManagerToolbarProps) => import("react/jsx-runtime").JSX.Element;
-export default TMPanelManagerToolbar;
-export declare const StyledToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $toolbarMode?: number;
-    $isActive?: boolean;
-    $isDisabled?: boolean;
-}>> & string;

package/lib/components/base/TMPanelManagerToolbar.js

@@ -1,109 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
-import { useDeviceType, DeviceType } from './TMDeviceProvider';
-import TMTooltip from './TMTooltip';
-const TMPanelManagerToolbar = (props) => {
-    const { allPanels, activeButtons, handleTogglePanel, updatedDisabledButton, updatedVisibleButton, toolbarMode = 0 } = 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',
-            alignItems: 'center',
-            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: isMobile ? 'top' : 'left', children: _jsx(StyledToolbarButton, { "$toolbarMode": toolbarMode, "$isActive": isActive || p.config.toolbarOptions?.alwaysActiveColor, "$isDisabled": isToolbarDisabled, disabled: isToolbarDisabled, onClick: () => { handleTogglePanel(p.fullId); if (handleClick)
-                        handleClick(); }, onMouseEnter: (e) => { if (!isToolbarDisabled && toolbarMode === 0) {
-                        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;
-export const StyledToolbarButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: ${({ $toolbarMode }) => ($toolbarMode === 0 ? '40px' : '32px')};
-  width: ${({ $toolbarMode }) => ($toolbarMode === 0 ? '40px' : '32px')};
-  border: none;
-  border-radius: ${({ $toolbarMode }) => ($toolbarMode === 0 ? '10px' : '8px')};
-  font-size: 18px;
-  padding: ${({ $toolbarMode }) => ($toolbarMode === 0 ? '8px 10px' : '0px')}; ;
-  color: #fff;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.6 : 1)};
-  background: ${({ $toolbarMode, $isActive }) => $toolbarMode === 0
-    ? ($isActive ? '#81c784' : '#e57373')
-    : ($isActive ? 'rgba(255,255,255,0.35)' : 'transparent')};
-
-  &:hover {
-    background: ${({ $toolbarMode, $isDisabled }) => $toolbarMode !== 0 && !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
-  }
-`;

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

@@ -1,37 +0,0 @@
-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;
-        alwaysActiveColor?: 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;