@topconsultnpm/sdkui-react-beta 6.13.76 → 6.13.77

package/lib/components/index.d.ts

@@ -78,6 +78,9 @@ export { default as TMFileManagerThumbnailItems } from "./base/TMFileManagerThum
 export { default as TMCounterContainer } from "./base/TMCounterContainer";
 export * from "./base/TMCounterContainer";
 export { default as TMAreaManager } from "./base/TMAreaManager";
-export * from "./layout/panel/TMPanelContext";
-export * from "./layout/panel/TMPanelToolbar";
-export * from "./layout/panel/useResizablePanels";
+export * from "./layout/panelManager/TMPanelManagerContainer";
+export * from "./layout/panelManager/TMPanelManagerContext";
+export * from "./layout/panelManager/TMPanelManagerToolbar";
+export * from "./layout/panelManager/TMPanelWrapper";
+export * from "./layout/panelManager/types";
+export * from "./layout/panelManager/utils";

package/lib/components/index.js

@@ -93,7 +93,10 @@ export { default as TMFileManagerThumbnailItems } from "./base/TMFileManagerThum
 export { default as TMCounterContainer } from "./base/TMCounterContainer";
 export * from "./base/TMCounterContainer";
 export { default as TMAreaManager } from "./base/TMAreaManager";
-// layout
-export * from "./layout/panel/TMPanelContext";
-export * from "./layout/panel/TMPanelToolbar";
-export * from "./layout/panel/useResizablePanels";
+// panel manager
+export * from "./layout/panelManager/TMPanelManagerContainer";
+export * from "./layout/panelManager/TMPanelManagerContext";
+export * from "./layout/panelManager/TMPanelManagerToolbar";
+export * from "./layout/panelManager/TMPanelWrapper";
+export * from "./layout/panelManager/types";
+export * from "./layout/panelManager/utils";

package/package.json

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

package/lib/components/layout/TMPanelLayout.d.ts

@@ -1,39 +0,0 @@
-import React, { ReactNode } from 'react';
-type TMPanelManagerNewProps = {
-    children: ReactNode;
-    showToolbar?: boolean;
-    emptyContent?: ReactNode;
-};
-type TMPanelGroupProps = {
-    orientation?: 'horizontal' | 'vertical';
-    allowItemResize?: boolean;
-    gutters?: number;
-    panelVisibility?: boolean[];
-    onTogglePanel?: (idx: number) => void;
-    panelLabels?: string[];
-    children: ReactNode;
-    parentVisibility?: boolean;
-    parentPanelCount?: number;
-    parentPanelVisibility?: boolean[];
-    parentOnTogglePanel?: (idx: number, path: number[]) => void;
-    path?: number[];
-};
-type TMPanelItemProps = {
-    width?: string;
-    height?: string;
-    minWidth?: string;
-    minHeight?: string;
-    children: ReactNode;
-    style?: React.CSSProperties;
-    label?: string;
-};
-export declare const TMPanelItem: React.FC<TMPanelItemProps>;
-export declare const TMPanelGroup: React.FC<TMPanelGroupProps>;
-declare const TMPanelLayout: React.FC<TMPanelManagerNewProps>;
-export default TMPanelLayout;
-type TMPanelLayoutToolbarProps = {
-    panelLabels: string[];
-    panelVisibility: boolean[];
-    onTogglePanel: (idx: number) => void;
-};
-export declare const TMPanelLayoutToolbar: React.FC<TMPanelLayoutToolbarProps>;

package/lib/components/layout/TMPanelLayout.js

@@ -1,318 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef, useState, Children, cloneElement, isValidElement, useEffect, useMemo, } from 'react';
-import { SDKUI_Globals } from '../../helper';
-import { useDeviceType } from '../base/TMDeviceProvider';
-export const TMPanelItem = (props) => (_jsx("div", { style: {
-        flexBasis: props.width || props.height || 'auto',
-        minWidth: props.minWidth,
-        minHeight: props.minHeight,
-        flexGrow: 0,
-        flexShrink: 0,
-        height: '100%',
-        width: '100%',
-        // overflow: 'auto',
-        position: 'relative',
-        boxSizing: 'border-box',
-        display: 'flex',
-        flexDirection: 'column',
-        ...props.style,
-    }, children: props.children }));
-// Utility: recursively determine if a child is a group
-function isGroup(child) {
-    return child?.type?.displayName === 'TMPanelGroup';
-}
-TMPanelItem.displayName = 'TMPanelItem';
-export const TMPanelGroup = ({ orientation = 'horizontal', allowItemResize = false, gutters = SDKUI_Globals.userSettings.themeSettings.gutters, panelVisibility, onTogglePanel, panelLabels, children, parentVisibility = true, parentPanelCount, parentPanelVisibility, parentOnTogglePanel, path = [], ...rest }) => {
-    const childArray = Children.toArray(children).filter(Boolean);
-    const panelCount = childArray.length;
-    // Initial sizes in percent
-    const [sizes, setSizes] = useState(childArray.map((child) => orientation === 'horizontal'
-        ? child.props.width
-            ? parseFloat(child.props.width)
-            : 100 / panelCount
-        : child.props.height
-            ? parseFloat(child.props.height)
-            : 100 / panelCount));
-    // Compute effective visibility for each child (recursively for groups)
-    const effectiveVisibility = childArray.map((child, idx) => {
-        if (isValidElement(child) && isGroup(child)) {
-            // For nested groups, pass down visibility
-            return !panelVisibility || panelVisibility[idx];
-        }
-        return !panelVisibility || panelVisibility[idx];
-    });
-    // Recursively render children, and collect which are visible
-    const renderedPanels = [];
-    const renderedSizes = [];
-    const renderedPaths = [];
-    let accHidden = 0;
-    for (let i = 0; i < panelCount; i++) {
-        const child = childArray[i];
-        const visible = effectiveVisibility[i];
-        let childIsVisible = visible;
-        let renderedChild = child;
-        let childPath = [...path, i];
-        if (isValidElement(child) && isGroup(child)) {
-            // Recursively render group
-            renderedChild = cloneElement(child, {
-                parentVisibility: visible,
-                parentPanelCount: panelCount,
-                parentPanelVisibility: panelVisibility,
-                parentOnTogglePanel: parentOnTogglePanel || onTogglePanel,
-                path: childPath,
-            });
-            // If the group renders nothing, treat as hidden
-            // We'll check after rendering below
-        }
-        // For groups, check if they actually rendered anything
-        let actuallyVisible = childIsVisible;
-        if (isValidElement(child) && isGroup(child)) {
-            // If the group is not visible (returns null), treat as hidden
-            // We'll check after rendering below
-            // For now, optimistically add, and filter after
-            renderedPanels.push(renderedChild);
-            renderedSizes.push(sizes[i] + accHidden);
-            renderedPaths.push(childPath);
-            accHidden = 0;
-        }
-        else if (childIsVisible) {
-            renderedPanels.push(renderedChild);
-            renderedSizes.push(sizes[i] + accHidden);
-            renderedPaths.push(childPath);
-            accHidden = 0;
-        }
-        else {
-            accHidden += sizes[i];
-        }
-    }
-    // Remove panels that are null (hidden nested groups)
-    let filteredPanels = [];
-    let filteredSizes = [];
-    let filteredPaths = [];
-    let filteredAccHidden = 0;
-    for (let i = 0; i < renderedPanels.length; i++) {
-        if (renderedPanels[i] !== null && renderedPanels[i] !== undefined) {
-            filteredPanels.push(renderedPanels[i]);
-            filteredSizes.push(renderedSizes[i] + filteredAccHidden);
-            filteredPaths.push(renderedPaths[i]);
-            filteredAccHidden = 0;
-        }
-        else {
-            filteredAccHidden += renderedSizes[i];
-        }
-    }
-    // --- CORRECTED MERGING LOGIC: merge hidden into previous visible, or into the first visible if at the start ---
-    // Merge hidden panel sizes into the nearest visible sibling (prefer previous, else next)
-    const mergedPanels = [];
-    const mergedSizes = [];
-    const mergedPaths = [];
-    let lastVisibleIdx = -1;
-    for (let i = 0; i < filteredPanels.length; i++) {
-        if (filteredPanels[i] !== null && filteredPanels[i] !== undefined) {
-            // If there were hidden panels before the first visible, merge their sizes into this first visible
-            if (lastVisibleIdx === -1 && i > 0) {
-                let acc = 0;
-                for (let j = 0; j < i; j++)
-                    acc += filteredSizes[j];
-                mergedSizes.push(filteredSizes[i] + acc);
-            }
-            else {
-                mergedSizes.push(filteredSizes[i]);
-            }
-            mergedPanels.push(filteredPanels[i]);
-            mergedPaths.push(filteredPaths[i]);
-            lastVisibleIdx = mergedSizes.length - 1;
-        }
-        else {
-            // Hidden panel: merge its size into the last visible panel (if any)
-            if (lastVisibleIdx >= 0) {
-                mergedSizes[lastVisibleIdx] += filteredSizes[i];
-            }
-        }
-    }
-    // If nothing is visible, tell parent to treat this group as hidden
-    if (mergedPanels.length === 0 || parentVisibility === false) {
-        return null;
-    }
-    // Resizing logic (same as before, but for visible panels)
-    const containerRef = useRef(null);
-    const [dragIndex, setDragIndex] = useState(null);
-    const [startPos, setStartPos] = useState(0);
-    const [startSizes, setStartSizes] = useState([]);
-    const handleMouseDown = (idx) => (e) => {
-        setDragIndex(idx);
-        setStartSizes([...mergedSizes]);
-        setStartPos(orientation === 'horizontal' ? e.clientX : e.clientY);
-        document.body.style.userSelect = 'none';
-    };
-    useEffect(() => {
-        if (dragIndex === null)
-            return;
-        const handleMouseMove = (e) => {
-            if (!containerRef.current)
-                return;
-            const rect = containerRef.current.getBoundingClientRect();
-            const total = orientation === 'horizontal' ? rect.width : rect.height;
-            const currentPos = orientation === 'horizontal' ? e.clientX : e.clientY;
-            const deltaPx = currentPos - startPos;
-            const deltaPercent = (deltaPx / total) * 100;
-            let newSizes = [...startSizes];
-            let left = Math.max(5, startSizes[dragIndex] + deltaPercent);
-            let right = Math.max(5, startSizes[dragIndex + 1] - deltaPercent);
-            // Prevent overflow
-            const sum = startSizes[dragIndex] + startSizes[dragIndex + 1];
-            if (left + right > sum) {
-                if (left > sum - 5)
-                    left = sum - 5;
-                if (right > sum - 5)
-                    right = sum - 5;
-            }
-            newSizes[dragIndex] = left;
-            newSizes[dragIndex + 1] = right;
-            // Update the original sizes array for all panels
-            let newAllSizes = [...sizes];
-            let visIdx = 0;
-            for (let k = 0; k < panelCount; k++) {
-                if (effectiveVisibility[k]) {
-                    // Only update for visible panels
-                    newAllSizes[k] = newSizes[visIdx++];
-                }
-            }
-            setSizes(newAllSizes);
-        };
-        const handleMouseUp = () => {
-            setDragIndex(null);
-            document.body.style.userSelect = '';
-        };
-        window.addEventListener('mousemove', handleMouseMove);
-        window.addEventListener('mouseup', handleMouseUp);
-        return () => {
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
-        };
-    }, [dragIndex, orientation, startPos, startSizes, effectiveVisibility, sizes, panelCount]);
-    return (_jsx("div", { ref: containerRef, style: {
-            display: 'flex',
-            flexDirection: orientation === 'horizontal' ? 'row' : 'column',
-            width: '100%',
-            height: '100%',
-            position: 'relative',
-            overflow: 'hidden',
-            gap: allowItemResize ? 0 : gutters,
-        }, ...rest, children: mergedPanels.map((child, idx) => (_jsxs(React.Fragment, { children: [isValidElement(child) && !isGroup(child)
-                    ? cloneElement(child, {
-                        style: {
-                            ...(child.props.style || {}),
-                            flexBasis: `${mergedSizes[idx]}%`,
-                            height: orientation === 'vertical'
-                                ? `${mergedSizes[idx]}%`
-                                : '100%',
-                            width: orientation === 'horizontal'
-                                ? `${mergedSizes[idx]}%`
-                                : '100%',
-                        },
-                    })
-                    : child, allowItemResize && idx < mergedPanels.length - 1 && (_jsx("div", { style: {
-                        cursor: orientation === 'horizontal'
-                            ? 'col-resize'
-                            : 'row-resize',
-                        background: 'transparent',
-                        width: orientation === 'horizontal' ? gutters : '100%',
-                        height: orientation === 'vertical' ? gutters : '100%',
-                        zIndex: 10,
-                        userSelect: 'none',
-                        flexShrink: 0,
-                        flexGrow: 0,
-                        borderRadius: 3,
-                        minHeight: orientation === 'horizontal' ? '100%' : gutters,
-                        minWidth: orientation === 'vertical' ? '100%' : gutters,
-                    }, onMouseDown: handleMouseDown(idx) }))] }, mergedPaths[idx].join('-')))) }));
-};
-TMPanelGroup.displayName = 'TMPanelGroup';
-function getAllPanelPaths(children, path = []) {
-    const arr = Children.toArray(children).filter(Boolean);
-    let result = [];
-    arr.forEach((child, idx) => {
-        if (isValidElement(child) && isGroup(child)) {
-            result = result.concat(getAllPanelPaths(child.props.children, [...path, idx]));
-        }
-        else if (isValidElement(child)) {
-            result.push({ label: child.props?.label || `Panel ${path.concat(idx).join('-')}`, path: path.concat(idx) });
-        }
-    });
-    return result;
-}
-const TMPanelLayout = ({ children, showToolbar = true, emptyContent, }) => {
-    // Only support a single TMPanelGroup as direct child for simplicity
-    const group = Children.only(children);
-    const childArray = Children.toArray(group.props.children).filter(Boolean);
-    // Build a flat list of all panel paths and labels for the toolbar
-    const allPanels = useMemo(() => getAllPanelPaths(group.props.children), [group.props.children]);
-    const [panelVisibility, setPanelVisibility] = useState(childArray.map(() => true));
-    // Helper to check if all panels (recursively) are hidden
-    function isAllPanelsHidden() {
-        // For now, just check top-level
-        return panelVisibility.every(v => !v);
-    }
-    // Toggle panel visibility by path (only top-level supported for now)
-    const handleTogglePanel = (idx) => {
-        setPanelVisibility((prev) => {
-            if (prev.filter(Boolean).length === 1 && prev[idx])
-                return prev;
-            const newArr = [...prev];
-            newArr[idx] = !newArr[idx];
-            return newArr;
-        });
-    };
-    // For nested: you can extend this to track nested visibility state if needed
-    const allHidden = isAllPanelsHidden();
-    const deviceType = useDeviceType();
-    const isMobile = useMemo(() => deviceType === 'mobile', [deviceType]);
-    return (_jsx("div", { style: {
-            width: '100%',
-            height: '100%',
-            position: 'relative',
-            overflow: 'hidden',
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: _jsxs("div", { style: { display: 'flex', flexDirection: isMobile ? 'column' : 'row', height: '100%', width: '100%', gap: !isMobile ? SDKUI_Globals.userSettings.themeSettings.gutters : 0 }, children: [!allHidden &&
-                    cloneElement(group, {
-                        panelVisibility,
-                        onTogglePanel: handleTogglePanel,
-                        panelLabels: allPanels.map(p => p.label),
-                    }), showToolbar && (_jsx("div", { style: {
-                        display: 'flex',
-                        flexDirection: isMobile ? 'row' : 'column',
-                        alignItems: 'center',
-                        width: isMobile ? '100%' : '50px',
-                        height: isMobile ? '50px' : 'max-content',
-                        background: 'transparent linear-gradient(90deg, #CCE0F4 0%, #7EC1E7 14%, #39A6DB 28%, #1E9CD7 35%, #0075BE 78%, #005B97 99%) 0% 0% no-repeat padding-box',
-                        borderRadius: isMobile ? '10px' : '10px 0px 0px 10px',
-                        padding: '10px',
-                        gap: '10px'
-                    }, children: _jsx(TMPanelLayoutToolbar, { panelLabels: allPanels.map(p => p.label), panelVisibility: panelVisibility, onTogglePanel: handleTogglePanel }) })), allHidden && (_jsx("div", { style: {
-                        position: 'absolute',
-                        left: 0,
-                        top: 0,
-                        width: '100%',
-                        height: '100%',
-                        background: '#fafbfc',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        zIndex: 1,
-                    }, children: emptyContent || (_jsx("span", { style: { color: '#888', fontSize: 18 }, children: "No panels visible" })) }))] }) }));
-};
-export default TMPanelLayout;
-export const TMPanelLayoutToolbar = ({ panelLabels, panelVisibility, onTogglePanel, }) => {
-    return (_jsx("div", { children: panelLabels.map((label, idx) => (_jsxs("button", { style: {
-                margin: 2,
-                padding: '4px 10px',
-                borderRadius: 4,
-                border: panelVisibility[idx] ? '2px solid #1976d2' : '1px solid #bbb',
-                background: panelVisibility[idx] ? '#1976d2' : '#eee',
-                color: panelVisibility[idx] ? '#fff' : '#555',
-                cursor: 'pointer',
-                opacity: 1,
-            }, onClick: () => onTogglePanel(idx), children: [panelVisibility[idx] ? 'Hide' : 'Show', " ", label] }, idx))) }));
-};

package/lib/components/layout/panel/TMPanelContext.d.ts

@@ -1,45 +0,0 @@
-import { ReactNode } from 'react';
-export interface TMPanelManagerItemContext {
-    id: string;
-    name: string;
-    contentOptions: {
-        width: string;
-        height: string;
-    };
-    toolbarOptions: {
-        icon: string | JSX.Element;
-        visible: boolean;
-        isActive: boolean;
-        disabled?: boolean;
-        orderNumber?: number;
-        beginGroup?: boolean;
-        alwaysActiveColor?: boolean;
-    };
-    children: Array<TMPanelManagerItemContext>;
-}
-interface ITMPanelManagerContext {
-    panelTree: Array<TMPanelManagerItemContext>;
-    visibility: Record<string, boolean>;
-    calculateEffectiveVisibility: Record<string, boolean>;
-    setPanelVisibility: (id: string, visible: boolean) => void;
-    togglePanel: (id: string) => void;
-    findPanelById: (id: string) => TMPanelManagerItemContext | undefined;
-    getPanelDimensions: (id: string) => {
-        width: string;
-        height: string;
-    };
-    toggleMaximizePanel: (id: string) => void;
-    maximizedPanelId: string | null;
-    updatePanelSize: (id: string, width: string | number, height: string | number) => void;
-    setPanelVisibleById: (id: string, visible: boolean) => void;
-    setPanelDisabledById: (id: string, disabled: boolean) => void;
-    hasVisiblePanels: () => boolean;
-}
-export declare function useTMPanelContext(): ITMPanelManagerContext;
-interface TMPanelContextProviderProps {
-    panels: Array<TMPanelManagerItemContext>;
-    initialMobilePanelId: string;
-    children: ReactNode;
-}
-export declare const TMPanelManagerContextProvider: (props: TMPanelContextProviderProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/components/layout/panel/TMPanelContext.js

@@ -1,314 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo, useState, useEffect, } from 'react';
-import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
-// Creazione del context
-const TMPanelManagerContext = createContext(undefined);
-// Hook custom per accedere al context
-export function useTMPanelContext() {
-    const context = useContext(TMPanelManagerContext);
-    if (!context) {
-        throw new Error('useTMPanelContext must be used within a TMPanelContextProvider');
-    }
-    return context;
-}
-// Provider del context
-export const TMPanelManagerContextProvider = (props) => {
-    const { panels, initialMobilePanelId, children } = props;
-    const [panelTree, setPanelTree] = useState(panels);
-    const [maximizedPanelId, setMaximizedPanelId] = useState(null);
-    const deviceType = useDeviceType();
-    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
-    useEffect(() => {
-        if (isMobile) {
-            setVisibility(prev => updatePanelVisibility(initialMobilePanelId, true, prev));
-        }
-    }, [isMobile]);
-    // Stato iniziale per dimensioni pannelli
-    const [panelSizes, setPanelSizes] = useState(() => {
-        const sizes = {};
-        const flattenPanels = (panels) => panels.reduce((acc, p) => [...acc, p, ...flattenPanels(p.children)], []);
-        const allPanels = flattenPanels(panelTree);
-        allPanels.forEach(panel => {
-            sizes[panel.id] = { width: panel.contentOptions.width, height: panel.contentOptions.height };
-        });
-        return sizes;
-    });
-    // Trova un pannello tramite ID
-    const findPanelById = (id) => {
-        const findRecursive = (panels) => {
-            for (const panel of panels) {
-                if (panel.id === id)
-                    return panel;
-                const found = findRecursive(panel.children);
-                if (found)
-                    return found;
-            }
-            return undefined;
-        };
-        return findRecursive(panelTree);
-    };
-    // Mappa figlio -> genitori
-    const parentMap = useMemo(() => {
-        const map = new Map();
-        const buildMap = (panels, parents = []) => {
-            for (const panel of panels) {
-                map.set(panel.id, [...parents]);
-                buildMap(panel.children, [...parents, panel.id]);
-            }
-        };
-        buildMap(panelTree);
-        return map;
-    }, [panelTree]);
-    // Mappa genitore -> figli
-    const parentToChildrenMap = useMemo(() => {
-        const map = new Map();
-        const buildMap = (panels) => {
-            for (const panel of panels) {
-                map.set(panel.id, panel.children.map(c => c.id));
-                buildMap(panel.children);
-            }
-        };
-        buildMap(panelTree);
-        return map;
-    }, [panelTree]);
-    // Stato visibilità iniziale
-    const getInitialVisibility = (panels) => {
-        const vis = {};
-        const collect = (panels) => {
-            for (const panel of panels) {
-                vis[panel.id] = panel.toolbarOptions?.isActive ?? false;
-                collect(panel.children);
-            }
-        };
-        collect(panels);
-        return vis;
-    };
-    const [visibility, setVisibility] = useState(() => getInitialVisibility(panelTree));
-    const getParentsOfPanel = (id) => parentMap.get(id) || [];
-    // Visibilità effettiva tenendo conto della gerarchia
-    const calculateEffectiveVisibility = useMemo(() => {
-        if (maximizedPanelId) {
-            return { ...visibility };
-        }
-        const updatedVisibility = { ...visibility };
-        const propagateToParents = (id) => {
-            for (const parent of parentMap.get(id) || []) {
-                if (!updatedVisibility[parent]) {
-                    updatedVisibility[parent] = true;
-                    propagateToParents(parent);
-                }
-            }
-        };
-        Object.entries(updatedVisibility).forEach(([id, isVisible]) => {
-            if (isVisible)
-                propagateToParents(id);
-        });
-        const deactivateIfNoVisibleChildren = (parentId) => {
-            const children = parentToChildrenMap.get(parentId) || [];
-            if (children.length === 0)
-                return;
-            const anyVisible = children.some(id => updatedVisibility[id]);
-            if (!anyVisible && updatedVisibility[parentId]) {
-                updatedVisibility[parentId] = false;
-                for (const grand of parentMap.get(parentId) || []) {
-                    deactivateIfNoVisibleChildren(grand);
-                }
-            }
-        };
-        for (const parentId of parentToChildrenMap.keys()) {
-            deactivateIfNoVisibleChildren(parentId);
-        }
-        return updatedVisibility;
-    }, [visibility, parentMap, parentToChildrenMap, maximizedPanelId]);
-    // Calcolo delle dimensioni dinamiche in base alla visibilità
-    const dynamicSizesMap = useMemo(() => {
-        const flattenPanels = (panels) => panels.reduce((acc, p) => [...acc, p, ...flattenPanels(p.children)], []);
-        const allPanels = flattenPanels(panelTree);
-        const originalHeights = new Map();
-        const originalWidths = new Map();
-        allPanels.forEach(panel => {
-            originalHeights.set(panel.id, parseFloat(panel.contentOptions.height) || 0);
-            originalWidths.set(panel.id, parseFloat(panel.contentOptions.width) || 0);
-        });
-        if (maximizedPanelId) {
-            const parents = getParentsOfPanel(maximizedPanelId);
-            const allowed = new Set([maximizedPanelId, ...parents]);
-            const sizesMap = {};
-            allPanels.forEach(panel => {
-                sizesMap[panel.id] = allowed.has(panel.id)
-                    ? { width: '100%', height: '100%' }
-                    : { width: '0%', height: '0%' };
-            });
-            return sizesMap;
-        }
-        const calcSiblingSizes = (siblings, originalSizes) => {
-            const visibleSiblings = siblings.filter(s => calculateEffectiveVisibility[s.id]);
-            const totalVisible = visibleSiblings.reduce((sum, s) => sum + (originalSizes.get(s.id) || 0), 0);
-            const totalAll = siblings.reduce((sum, s) => sum + (originalSizes.get(s.id) || 0), 0);
-            const map = {};
-            visibleSiblings.forEach(s => {
-                const orig = originalSizes.get(s.id) || 0;
-                map[s.id] = totalVisible === 0 ? 0 : (orig / totalVisible) * totalAll;
-            });
-            siblings.forEach(s => {
-                if (!calculateEffectiveVisibility[s.id])
-                    map[s.id] = 0;
-            });
-            return map;
-        };
-        const widthSizesMap = {};
-        const heightSizesMap = {};
-        Object.assign(widthSizesMap, calcSiblingSizes(panelTree, originalWidths));
-        Object.assign(heightSizesMap, calcSiblingSizes(panelTree, originalHeights));
-        const processChildrenSizes = (panels) => {
-            panels.forEach(panel => {
-                if (panel.children.length > 0) {
-                    Object.assign(widthSizesMap, calcSiblingSizes(panel.children, originalWidths));
-                    Object.assign(heightSizesMap, calcSiblingSizes(panel.children, originalHeights));
-                    processChildrenSizes(panel.children);
-                }
-            });
-        };
-        processChildrenSizes(panelTree);
-        const sizesMap = {};
-        allPanels.forEach(panel => {
-            const width = Math.min(widthSizesMap[panel.id] ?? 0, 100);
-            const height = Math.min(heightSizesMap[panel.id] ?? 0, 100);
-            sizesMap[panel.id] = {
-                width: calculateEffectiveVisibility[panel.id] ? `${width.toFixed(2)}%` : '0%',
-                height: calculateEffectiveVisibility[panel.id] ? `${height.toFixed(2)}%` : '0%',
-            };
-        });
-        return sizesMap;
-    }, [calculateEffectiveVisibility, panelTree, maximizedPanelId]);
-    // Ottieni dimensioni di un pannello (override -> dinamico -> default)
-    const getPanelDimensions = (id) => {
-        if (panelSizes[id])
-            return panelSizes[id];
-        if (dynamicSizesMap[id])
-            return dynamicSizesMap[id];
-        const panel = findPanelById(id);
-        return panel ? { width: panel.contentOptions.width, height: panel.contentOptions.height } : { width: 'auto', height: 'auto' };
-    };
-    // Imposta manualmente le dimensioni di un pannello
-    const updatePanelSize = (id, width, height) => {
-        setPanelSizes(prev => ({
-            ...prev,
-            [id]: {
-                width: typeof width === 'number' ? `${width}%` : width,
-                height: typeof height === 'number' ? `${height}%` : height,
-            },
-        }));
-    };
-    // Quando cambia visibilità o massimizzazione, resetta override
-    useEffect(() => {
-        setPanelSizes({});
-    }, [visibility, maximizedPanelId]);
-    // Massimizza o ripristina un pannello
-    const toggleMaximizePanel = (id) => {
-        setMaximizedPanelId(prev => (prev === id ? null : id));
-    };
-    const updatePanelVisibility = (id, visible, currentVisibility) => {
-        let next = { ...currentVisibility };
-        if (!visible && maximizedPanelId === id) {
-            setMaximizedPanelId(null);
-        }
-        // Se siamo su mobile, resettiamo tutto tranne il pannello selezionato e i suoi parent
-        if (isMobile && visible) {
-            const parents = parentMap.get(id) || [];
-            // Imposta tutti i pannelli come invisibili tranne il selezionato e i suoi parent
-            Object.keys(next).forEach(panelId => {
-                next[panelId] = (panelId === id || parents.includes(panelId));
-            });
-            // Applichiamo propagazione verso l’alto (attivazione dei genitori)
-            const activateParents = (childId) => {
-                for (const parent of parentMap.get(childId) || []) {
-                    if (!next[parent]) {
-                        next[parent] = true;
-                        activateParents(parent);
-                    }
-                }
-            };
-            activateParents(id);
-            return next;
-        }
-        // Normal behavior (desktop)
-        next[id] = visible;
-        if (visible) {
-            const activateParents = (childId) => {
-                for (const parent of parentMap.get(childId) || []) {
-                    if (!next[parent]) {
-                        next[parent] = true;
-                        activateParents(parent);
-                    }
-                }
-            };
-            activateParents(id);
-        }
-        else {
-            const deactivateParents = (childId) => {
-                for (const parent of parentMap.get(childId) || []) {
-                    const children = parentToChildrenMap.get(parent) || [];
-                    const anyVisible = children.some(cId => next[cId]);
-                    if (!anyVisible && next[parent]) {
-                        next[parent] = false;
-                        deactivateParents(parent);
-                    }
-                }
-            };
-            deactivateParents(id);
-        }
-        return next;
-    };
-    // Attiva/disattiva visibilità di un pannello
-    const togglePanel = (id) => {
-        setVisibility(prev => updatePanelVisibility(id, !prev[id], prev));
-    };
-    // Imposta visibilità esplicita di un pannello
-    const setPanelVisibility = (id, visible) => {
-        setVisibility(prev => updatePanelVisibility(id, visible, prev));
-    };
-    // Cambia la visibilità direttamente nel pannello (opzionale, ma richiesto da te)
-    const setPanelVisibleById = (id, visible) => {
-        setPanelTree(prevTree => {
-            const update = (panels) => panels.map(panel => {
-                if (panel.id === id) {
-                    return { ...panel, toolbarOptions: { ...panel.toolbarOptions, visible } };
-                }
-                return { ...panel, children: update(panel.children) };
-            });
-            return update(prevTree);
-        });
-    };
-    // Cambia il valore di disabled direttamente nel pannello
-    const setPanelDisabledById = (id, disabled) => {
-        setPanelTree(prevTree => {
-            const update = (panels) => panels.map(panel => {
-                if (panel.id === id) {
-                    return { ...panel, toolbarOptions: { ...panel.toolbarOptions, disabled, } };
-                }
-                return { ...panel, children: update(panel.children) };
-            });
-            return update(prevTree);
-        });
-    };
-    const hasVisiblePanels = () => {
-        return Object.values(calculateEffectiveVisibility).some(visible => visible);
-    };
-    // Valori esposti dal context
-    return (_jsx(TMPanelManagerContext.Provider, { value: {
-            panelTree,
-            visibility,
-            calculateEffectiveVisibility,
-            setPanelVisibility,
-            togglePanel,
-            findPanelById,
-            getPanelDimensions,
-            toggleMaximizePanel,
-            maximizedPanelId,
-            updatePanelSize,
-            setPanelVisibleById,
-            setPanelDisabledById,
-            hasVisiblePanels
-        }, children: children }));
-};

package/lib/components/layout/panel/TMPanelToolbar.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare const TMPanelToolbar: () => import("react/jsx-runtime").JSX.Element;
-export declare const StyledToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $isActive?: boolean;
-    $isDisabled?: boolean;
-}>> & string;

package/lib/components/layout/panel/TMPanelToolbar.js

@@ -1,66 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { useTMPanelContext } from './TMPanelContext';
-import styled from 'styled-components';
-import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
-import TMTooltip from '../../base/TMTooltip';
-export const TMPanelToolbar = () => {
-    const { panelTree, togglePanel, calculateEffectiveVisibility } = useTMPanelContext();
-    const deviceType = useDeviceType();
-    let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
-    // Ricorsivamente trova tutti i pannelli parent (hanno figli)
-    const getParentIds = (panels, parents = new Set()) => {
-        for (const panel of panels) {
-            if (panel.children.length > 0) {
-                parents.add(panel.id);
-                getParentIds(panel.children, parents);
-            }
-        }
-        return parents;
-    };
-    // Ricorsivamente trova tutti i pannelli foglia (senza figli)
-    const getLeafPanels = (panels, leaves = []) => {
-        for (const panel of panels) {
-            if (panel.children.length === 0) {
-                leaves.push(panel);
-            }
-            else {
-                getLeafPanels(panel.children, leaves);
-            }
-        }
-        return leaves;
-    };
-    const parentIds = getParentIds(panelTree);
-    const leafPanels = getLeafPanels(panelTree);
-    return (_jsx("div", { style: {
-            display: 'flex',
-            flexDirection: isMobile ? 'row' : 'column',
-            gap: '6px',
-            alignItems: 'center',
-            justifyContent: isMobile ? 'center' : 'flex-start',
-            width: '100%',
-            height: '100%'
-        }, children: leafPanels.filter(panel => panel.toolbarOptions.visible).map((item) => {
-            const isActive = calculateEffectiveVisibility[item.id];
-            return _jsx(TMTooltip, { content: item.name, position: isMobile ? 'top' : 'left', children: _jsx(StyledToolbarButton, { "$isActive": isActive || item.toolbarOptions?.alwaysActiveColor, "$isDisabled": item.toolbarOptions?.disabled, disabled: item.toolbarOptions?.disabled, onClick: () => { togglePanel(item.id); }, children: typeof item.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${item.toolbarOptions?.icon}` })) : (item.toolbarOptions?.icon) }) }, item.id);
-        }) }));
-};
-export const StyledToolbarButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  width: 32px;
-  border: none;
-  border-radius: 8px;
-  font-size: 18px;
-  padding: 0px;
-  color: #fff;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.6 : 1)};
-  background: ${({ $isActive }) => $isActive ? 'rgba(255,255,255,0.35)' : 'transparent'};
-  &:hover {
-    background: ${({ $isDisabled }) => !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
-  }
-`;

package/lib/components/layout/panel/useResizablePanels.d.ts

@@ -1,3 +0,0 @@
-export declare function useResizablePanels(containerRef: React.RefObject<HTMLDivElement | null>): {
-    onMouseDown: (e: React.MouseEvent, panelBeforeId: string, panelAfterId: string, isRow: boolean) => void;
-};

package/lib/components/layout/panel/useResizablePanels.js

@@ -1,67 +0,0 @@
-import { useRef, useCallback } from 'react';
-import { useTMPanelContext } from './TMPanelContext';
-export function useResizablePanels(containerRef) {
-    const { getPanelDimensions, updatePanelSize } = useTMPanelContext();
-    const resizingRef = useRef(null);
-    const getSizePercent = useCallback((panelId, isRow) => {
-        const dim = getPanelDimensions(panelId);
-        return isRow
-            ? parseFloat(dim.width.replace('%', ''))
-            : parseFloat(dim.height.replace('%', ''));
-    }, [getPanelDimensions]);
-    const getContainerSize = useCallback((isRow) => {
-        if (!containerRef.current)
-            return 0;
-        return isRow ? containerRef.current.clientWidth : containerRef.current.clientHeight;
-    }, [containerRef]);
-    const updateSize = useCallback((panelId, sizePercent, otherDimension, isRow) => {
-        if (isRow) {
-            updatePanelSize(panelId, `${sizePercent.toFixed(2)}%`, otherDimension);
-        }
-        else {
-            updatePanelSize(panelId, otherDimension, `${sizePercent.toFixed(2)}%`);
-        }
-    }, [updatePanelSize]);
-    const onMouseMove = useCallback((e) => {
-        const data = resizingRef.current;
-        if (!data || !containerRef.current)
-            return;
-        const { panelBeforeId, panelAfterId, startPos, startSizeBefore, startSizeAfter, isRow } = data;
-        const containerSize = getContainerSize(isRow);
-        const currentPos = isRow ? e.clientX : e.clientY;
-        const delta = currentPos - startPos;
-        const sizeBeforePx = (startSizeBefore / 100) * containerSize + delta;
-        const sizeAfterPx = (startSizeAfter / 100) * containerSize - delta;
-        if (sizeBeforePx < 50 || sizeAfterPx < 50)
-            return;
-        const newSizeBefore = (sizeBeforePx / containerSize) * 100;
-        const newSizeAfter = (sizeAfterPx / containerSize) * 100;
-        const dimBefore = getPanelDimensions(panelBeforeId);
-        const dimAfter = getPanelDimensions(panelAfterId);
-        const otherDimBefore = isRow ? dimBefore.height : dimBefore.width;
-        const otherDimAfter = isRow ? dimAfter.height : dimAfter.width;
-        updateSize(panelBeforeId, newSizeBefore, otherDimBefore, isRow);
-        updateSize(panelAfterId, newSizeAfter, otherDimAfter, isRow);
-    }, [getContainerSize, getPanelDimensions, updateSize, containerRef]);
-    const onMouseUp = useCallback(() => {
-        resizingRef.current = null;
-        window.removeEventListener('mousemove', onMouseMove);
-        window.removeEventListener('mouseup', onMouseUp);
-    }, [onMouseMove]);
-    const onMouseDown = useCallback((e, panelBeforeId, panelAfterId, isRow) => {
-        e.preventDefault();
-        if (!containerRef.current)
-            return;
-        resizingRef.current = {
-            panelBeforeId,
-            panelAfterId,
-            isRow,
-            startPos: isRow ? e.clientX : e.clientY,
-            startSizeBefore: getSizePercent(panelBeforeId, isRow),
-            startSizeAfter: getSizePercent(panelAfterId, isRow),
-        };
-        window.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('mouseup', onMouseUp);
-    }, [getSizePercent, onMouseMove, onMouseUp, containerRef]);
-    return { onMouseDown };
-}