@topconsultnpm/sdkui-react-beta 6.13.13 → 6.13.14

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,237 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useState } from 'react';
+import { SDKUI_Globals, SDKUI_Localizator, IconWindowMinimize, IconWindowMaximize, IconInfo } from '../../helper';
+import TMButton from './TMButton';
+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(new Set());
+    // 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) {
+                        maximizeMinimizePanelCallback(true, toolbarItem.panelManagerMatrixRowId);
+                    }
+                    newHidden.add(toolbarItem.panelManagerMatrixRowId);
+                }
+            }
+            setPanelHeights(calculatePanelSizes(panelMatrixMap, newHidden));
+            return newHidden;
+        });
+    };
+    const maximizeMinimizePanelCallback = (isMaximized, id) => {
+        const maximized = isMaximized ? null : id;
+        setMaximizedPanelId(maximized);
+    };
+    return (_jsx("div", { style: { width: '100%', height: '100%' }, children: _jsxs("div", { style: {
+                display: isMobile ? 'block' : 'flex',
+                flexDirection: 'row',
+                width: "100%",
+                height: '100%'
+            }, children: [_jsx("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        width: (toolbarState && toolbarState.items.length > 0) ? `calc(100% - ${isMobile ? "0px" : "40px"})` : '100%',
+                        height: `calc(100% - ${isMobile ? "60px" : "0px"})`,
+                        columnGap: maximizedPanelId ? '0px' : `${gutters}px`,
+                    }, 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', };
+                        // 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 = {
+                                        backgroundColor: '#f5f5f5',
+                                        borderRadius: '8px',
+                                        display: 'block',
+                                        transition: isMobile ? 'none' : 'all 0.3s ease',
+                                        boxShadow: '0 0 8px #D3D3D3BF',
+                                    };
+                                    const hiddenStyle = {
+                                        minWidth: '0px',
+                                        width: '0px',
+                                        height: '0px',
+                                        visibility: 'hidden',
+                                        opacity: 0,
+                                        marginBottom: '0px',
+                                    };
+                                    const maximizedStyle = {
+                                        minWidth: '50px',
+                                        width: '100%',
+                                        height: '100%',
+                                        visibility: 'visible',
+                                        opacity: 1,
+                                        marginBottom: '0px',
+                                    };
+                                    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,
+                                        marginBottom: (isHiddenPanel || isLastVisible) ? '0px' : `${gutters}px`,
+                                    };
+                                    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, onHeaderDoubleClick: () => maximizeMinimizePanelCallback(isMaximized, row.id), onClose: (!isMobile && toolbarState) ? () => togglePanelVisibility(toolbarState.items.find(item => item.panelManagerMatrixRowId === row.id)) : undefined, allowMaximize: false, toolbar: _jsx("div", { style: { width: 'max-content', display: 'flex', alignItems: 'center', gap: '10px' }, children: ((row.panel?.showCustomMaximizeMinimizeButton ?? true) && !isMobile && totalVisiblePanels > 1) && _jsx(TMButton, { caption: isMaximized ? SDKUI_Localizator.Minimize : SDKUI_Localizator.Maximize, icon: isMaximized ? _jsx(IconWindowMinimize, {}) : _jsx(IconWindowMaximize, {}), btnStyle: 'icon', onClick: () => maximizeMinimizePanelCallback(isMaximized, row.id) }) }), children: typeof row.content === "function" ? row.content(togglePanelVisibility, toggleToolbarItemDisabled, toggleToolbarItemVisibility) : row.content })
+                                            : typeof row.content === "function" ? row.content(togglePanelVisibility, 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

@@ -0,0 +1,69 @@
+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, 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

@@ -0,0 +1,155 @@
+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 '0%';
+    // If all rows in the column are hidden, return width 0%
+    const allRowsHidden = col.rows.every(row => hiddenPanelIds.has(row.id));
+    if (allRowsHidden)
+        return '0%';
+    // 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}%`;
+};

package/lib/components/index.d.ts

@@ -14,6 +14,8 @@ 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 CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';

package/lib/components/index.js

@@ -15,6 +15,8 @@ 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 CounterBar } from './base/TMCounterBar';
 export { default as TMProgressBar } from './base/TMProgressBar';
 export { default as TMSpinner } from './base/TMSpinner';

package/lib/helper/SDKUI_Localizator.d.ts

@@ -242,6 +242,7 @@ export declare class SDKUI_Localizator {
     static get NoDcmtFound(): "Kein Dokument gefunden" | "No documents found" | "Ningún documento encontrado" | "Pas de documents trouvés" | "Nenhum documento encontrado" | "Nessun documento trovato";
     static get NoMessages(): string;
     static get NoMessagesFound(): string;
+    static get NoPanelSelected(): string;
     static get NoResultsFound(): string;
     static get NoneSelection(): "Keine Auswahl" | "No selection" | "Ninguna selección" | "Pas de sélections" | "Nenhuma seleção" | "Nessuna selezione";
     static get OfSystem(): "Des Systems" | "Of system" | "Del sistema" | "Du système" | "Do sistema" | "Di sistema";

package/lib/helper/SDKUI_Localizator.js

@@ -2371,6 +2371,16 @@ export class SDKUI_Localizator {
             default: return "Nessun messaggio trovato";
         }
     }
+    static get NoPanelSelected() {
+        switch (this._cultureID) {
+            case CultureIDs.De_DE: return "Kein Panel ausgewählt";
+            case CultureIDs.En_US: return "No panel selected";
+            case CultureIDs.Es_ES: return "Ningún panel seleccionado";
+            case CultureIDs.Fr_FR: return "Aucun panneau sélectionné";
+            case CultureIDs.Pt_PT: return "Nenhum painel selecionado";
+            default: return "Nessun pannello selezionato";
+        }
+    }
     static get NoResultsFound() {
         switch (this._cultureID) {
             case CultureIDs.De_DE: return "Kein Ergebnis gefunden";

package/package.json

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