@topconsultnpm/sdkui-react 6.22.0-t1 → 6.22.0-t3

package/lib/components/layout/panelManager/TMPanelManagerContainer.js

@@ -18,20 +18,20 @@ const StyledPanelContainerWrapper = styled.div `
 `;
 // Styled Component per il gutter (separatore)
 const StyledResizerGutter = styled.div `
-  cursor: ${props => (props.$direction === 'horizontal' ? 'col-resize' : 'row-resize')};
-  ${props => (props.$direction === 'horizontal' ? `width: ${Gutters.getGutters()}px;` : `height: ${Gutters.getGutters()}px;`)}
+  cursor: ${props => (!props.$canResize ? 'default' : props.$direction === 'horizontal' ? 'col-resize' : 'row-resize')};
+  ${props => (props.$direction === 'horizontal' ? `width: ${props.$size}px;` : `height: ${props.$size}px;`)}
   flex-shrink: 0;
   background-color: "transparent";
   z-index: 10;
 `;
 const TMPanelManagerContainer = (props) => {
-    const { panels, showToolbar, direction, parentId, minPanelSizePx = 150 } = props;
+    const { panels, showToolbar, direction, parentId, minPanelSizePx = 150, gutterSizePx } = props;
     const { panelVisibility, setPanelDimensionsById, hasVisiblePanels, maximizedPanels, updateIsResizingActive } = useTMPanelManagerContext();
     // 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]);
-    const gutters = Gutters.getGutters();
+    const gutters = gutterSizePx ?? Gutters.getGutters();
     // References to store information related to resizing
     // startMousePos: stores the mouse position when resizing starts (x or y coordinate)
     const startMousePos = useRef(0);
@@ -47,6 +47,19 @@ const TMPanelManagerContainer = (props) => {
     const containerRef = useRef(null);
     // Count how many child panels are currently visible (based on panelVisibility)
     const currentlyVisibleChildrenCount = panels.filter(panel => panelVisibility[panel.id]).length;
+    /**
+     * Pannello ridimensionabile più prossimo a partire da `from` nella direzione `step`:
+     * i pannelli non visibili e quelli collassati (che vivono del solo ingombro minimo) si saltano,
+     * altrimenti il trascinamento del separatore assegnerebbe spazio a un pannello ridotto
+     */
+    const findResizablePanelId = (from, step) => {
+        for (let i = from; i >= 0 && i < panels.length; i += step) {
+            const candidate = panels[i];
+            if (panelVisibility[candidate.id] && candidate.contentOptions?.isCollapsed !== true)
+                return candidate.id;
+        }
+        return null;
+    };
     // If this component has a parent panel, and the parent panel is visible,
     // but none of the current child panels are visible, return null to avoid rendering empty container
     if (parentId && panelVisibility[parentId] && currentlyVisibleChildrenCount === 0) {
@@ -153,17 +166,9 @@ const TMPanelManagerContainer = (props) => {
                     width: (isMobile || maximizedPanels.length > 0) ? '100%' : showToolbar ? `calc(100% - 70px)` : '100%',
                     height: isMobile ? (showToolbar ? `calc(100% - 55px)` : '100%') : '100%',
                     flexDirection: 'row'
-                }, children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(StyledPanelContainerWrapper, { ref: containerRef, "$direction": direction, "$hasVisiblePanels": hasVisiblePanels(), children: panels.map((panel, index) => {
+                }, children: _jsxs("div", { style: { width: "100%", height: "100%" }, children: [_jsx(StyledPanelContainerWrapper, { ref: containerRef, $direction: direction, $hasVisiblePanels: hasVisiblePanels(), children: panels.map((panel, index) => {
                                 // Check if current panel is visible according to context state
                                 const isVisible = panelVisibility[panel.id];
-                                // Find the closest previous visible panel's ID to place the resizer gutter between
-                                let prevPanelIdForGutter = null;
-                                for (let i = index - 1; i >= 0; i--) {
-                                    if (panelVisibility[panels[i].id]) {
-                                        prevPanelIdForGutter = panels[i].id;
-                                        break;
-                                    }
-                                }
                                 /*
                                   Determine if we should show the gutter (resize handle) before this panel.
                                   The gutter is shown only if:
@@ -171,6 +176,11 @@ const TMPanelManagerContainer = (props) => {
                                     - at least one visible panel was encountered before this one
                                 */
                                 const showGutter = isVisible && hasSeenVisiblePanel && maximizedPanels.length === 0;
+                                // I due pannelli su cui agisce il separatore: i più prossimi fra quelli ridimensionabili.
+                                // Senza una coppia valida (es. tutti i vicini collassati) il separatore resta solo un divisorio
+                                const resizeFromId = showGutter ? findResizablePanelId(index - 1, -1) : null;
+                                const resizeToId = showGutter ? findResizablePanelId(index, 1) : null;
+                                const canResize = resizeFromId !== null && resizeToId !== null && resizeFromId !== resizeToId;
                                 // Update the flag once a visible panel is found, so gutters after it are shown correctly
                                 if (isVisible) {
                                     hasSeenVisiblePanel = true;
@@ -178,7 +188,7 @@ const TMPanelManagerContainer = (props) => {
                                 // If the panel has child panels, render a nested TMPanelManagerContainer or a component
                                 if (panel.children && panel.children.length > 0) {
                                     const jsxComponent = panel.contentOptions?.component;
-                                    return (_jsxs(React.Fragment, { children: [showGutter && (_jsx(StyledResizerGutter, { "$direction": direction, onMouseDown: (e) => startResizing(e, prevPanelIdForGutter, panel.id) })), _jsx(TMPanelWrapper, { panel: panel, children: jsxComponent
+                                    return (_jsxs(React.Fragment, { children: [showGutter && (_jsx(StyledResizerGutter, { $direction: direction, $size: gutters, $canResize: canResize, onMouseDown: canResize ? (e) => startResizing(e, resizeFromId, resizeToId) : undefined })), _jsx(TMPanelWrapper, { panel: panel, children: jsxComponent
                                                     ? React.isValidElement(jsxComponent)
                                                         ? React.cloneElement(jsxComponent, { groupId: panel.id, mainDirection: panel.childrenGroupDirection || direction })
                                                         : jsxComponent
@@ -186,7 +196,7 @@ const TMPanelManagerContainer = (props) => {
                                 }
                                 // If the panel has a component specified, render it with a possible gutter before it
                                 if (panel.contentOptions && panel.contentOptions.component) {
-                                    return (_jsxs(React.Fragment, { children: [showGutter && (_jsx(StyledResizerGutter, { "$direction": direction, onMouseDown: (e) => startResizing(e, prevPanelIdForGutter, panel.id) })), _jsx(TMPanelWrapper, { panel: panel, children: panel.contentOptions.component })] }, panel.id));
+                                    return (_jsxs(React.Fragment, { children: [showGutter && (_jsx(StyledResizerGutter, { $direction: direction, $size: gutters, $canResize: canResize, onMouseDown: canResize ? (e) => startResizing(e, resizeFromId, resizeToId) : undefined })), _jsx(TMPanelWrapper, { panel: panel, children: panel.contentOptions.component })] }, panel.id));
                                 }
                                 // If no children or components, render nothing for this panel
                                 return null;

package/lib/components/layout/panelManager/TMPanelManagerContext.js

@@ -14,12 +14,14 @@ export const TMPanelManagerProvider = (props) => {
     const defaultPanelDimensionsRef = useRef(defaultDimensions);
     // Memoize the panel hierarchy map to avoid re-generating it on every render unless `panels` change
     const hierarchyMap = useMemo(() => generatePanelHierarchyMap(panels), [panels]);
-    // State to track the dimensions (width and height) of each panel, initialized with props
-    const [panelDimensions, setPanelDimensions] = useState(initialDimensions);
+    // State to track the visibility and the dimensions (width and height) of each panel, initialized with props
+    const [panelLayout, setPanelLayout] = useState({ visibility: {}, dimensions: initialDimensions });
+    // Visibility of each panel, keyed by panel ID
+    const panelVisibility = panelLayout.visibility;
+    // Dimensions of each panel, keyed by panel ID
+    const panelDimensions = panelLayout.dimensions;
     // IDs of maximized panels, including their parents if present
     const [maximizedPanels, setMaximizedPanels] = useState([]);
-    // State to track the visibility of each panel, keyed by panel ID
-    const [panelVisibility, setPanelVisibility] = useState({});
     // State to track visibility of toolbar buttons, keyed by panel ID
     const [toolbarButtonsVisibility, setToolbarButtonsVisibility] = useState({});
     // State to track disabled status of toolbar buttons, keyed by panel ID
@@ -31,94 +33,73 @@ export const TMPanelManagerProvider = (props) => {
         setToolbarButtonsVisibility(visibilityMap);
         setToolbarButtonsDisabled(disabledMap);
     }, []);
-    // Callback to update the visibility state of a specific panel and its related hierarchy
-    const adjustPanelVisibilityAndSize = useCallback((id, isVisible, prevVisibility) => {
+    // Callback to update the visibility state of a specific panel and its related hierarchy, redistributing the dimensions accordingly
+    const adjustPanelVisibilityAndSize = useCallback((id, isVisible, prevLayout) => {
         // Clone previous visibility state to work with
-        let updatedVisibility = { ...prevVisibility };
-        if (isMobile) {
-            if (isVisible) {
-                // On mobile, showing one panel hides all others first
-                updatedVisibility = Object.keys(prevVisibility).reduce((acc, key) => { acc[key] = false; return acc; }, {});
-                // Recursively determine and show parent panels
-                const parentsToShow = showParentRecursively(id, hierarchyMap);
-                parentsToShow.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                // Show the target panel
-                updatedVisibility[id] = true;
-                // Redistribute dimensions to account for newly shown panel
-                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility));
-            }
-            else {
-                // Hide the panel
-                updatedVisibility[id] = false;
-                // Recursively hide parents
-                const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
-                parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                4;
-                // Redistribute dimensions after hiding
-                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updatedVisibility));
+        let updatedVisibility = { ...prevLayout.visibility };
+        let updatedDimensions;
+        if (isVisible) {
+            // On mobile, showing one panel hides all others first
+            if (isMobile) {
+                updatedVisibility = Object.keys(prevLayout.visibility).reduce((acc, key) => { acc[key] = false; return acc; }, {});
             }
+            // Recursively determine and show parent panels
+            const parentsToShow = showParentRecursively(id, hierarchyMap);
+            parentsToShow.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
+            // Show the target panel
+            updatedVisibility[id] = true;
+            // Redistribute dimensions to account for newly shown panel
+            updatedDimensions = redistributeDimensionsOnShow(id, prevLayout.dimensions, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
         }
         else {
-            if (isVisible) {
-                // On desktop, show panel and its parents without hiding others
-                const parentsToShow = showParentRecursively(id, hierarchyMap);
-                parentsToShow.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                // Show the panel
-                updatedVisibility[id] = true;
-                // Adjust panel dimensions accordingly
-                setPanelDimensions(prev => redistributeDimensionsOnShow(id, prev, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility));
-            }
-            else {
-                // Hide the panel
-                updatedVisibility[id] = false;
-                // Recursively hide parent panels
-                const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
-                parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
-                // Adjust dimensions after hiding
-                setPanelDimensions(prev => redistributeDimensionsOnHide(id, prev, hierarchyMap, updatedVisibility));
-            }
+            // Hide the panel
+            updatedVisibility[id] = false;
+            // Recursively hide parents
+            const parentsToHide = hideParentRecursively(id, hierarchyMap, updatedVisibility);
+            parentsToHide.forEach(([pid, visible]) => { updatedVisibility[pid] = visible; });
+            // Redistribute dimensions after hiding
+            updatedDimensions = redistributeDimensionsOnHide(id, prevLayout.dimensions, hierarchyMap, updatedVisibility);
         }
-        return updatedVisibility;
+        return { visibility: updatedVisibility, dimensions: updatedDimensions };
     }, [hierarchyMap, isMobile]);
     // On initial mount: initialize panel visibility using the provided `initialVisibility` config
     // Each panel's visibility is processed through `updatePanelVisibility` to ensure hierarchy logic is applied
     useEffect(() => {
         if (isPersistenceEnabled) {
             // If persistence is enabled, visibility and dimensions are already synced from persisted state, so just set them directly
-            setPanelVisibility(initialVisibility);
-            setPanelDimensions(initialDimensions);
+            setPanelLayout({ visibility: initialVisibility, dimensions: initialDimensions });
         }
         else {
             // If persistence is not enabled, recalculate visibility and dimensions based on the initial visibility, applying the hierarchy logic
-            let updated = { ...initialVisibility };
-            Object.entries(initialVisibility).forEach(([id, isVisible]) => {
-                updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+            setPanelLayout(prev => {
+                let updated = { visibility: { ...initialVisibility }, dimensions: prev.dimensions };
+                Object.entries(initialVisibility).forEach(([id, isVisible]) => {
+                    updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+                });
+                return updated;
             });
-            // Update panel visibility state with recalculated values
-            setPanelVisibility(updated);
         }
     }, []);
     // On mobile devices: automatically show the initial mobile panel when layout switches to mobile
     // This ensures the correct panel is visible by default on smaller screens
     useEffect(() => {
         if (isMobile) {
-            setPanelVisibility(prev => {
-                return adjustPanelVisibilityAndSize(initialMobilePanelId, true, prev);
-            });
+            setPanelLayout(prev => adjustPanelVisibilityAndSize(initialMobilePanelId, true, prev));
         }
         else {
             if (isPersistenceEnabled) {
                 // If persistence is enabled, visibility and dimensions are already synced from persisted state, so just set them directly
-                setPanelVisibility(initialVisibility);
+                setPanelLayout(prev => ({ ...prev, visibility: initialVisibility }));
             }
             else {
                 // If persistence is not enabled, recalculate visibility and dimensions based on the initial visibility, applying the hierarchy logic
-                let updated = { ...initialVisibility };
-                Object.entries(initialVisibility).forEach(([id, isVisible]) => {
-                    updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+                setPanelLayout(prev => {
+                    let updated = { visibility: { ...initialVisibility }, dimensions: prev.dimensions };
+                    Object.entries(initialVisibility).forEach(([id, isVisible]) => {
+                        updated = adjustPanelVisibilityAndSize(id, isVisible, updated);
+                    });
+                    return updated;
                 });
-                // Update panel visibility state with recalculated values
-                setPanelVisibility(updated);
             }
         }
     }, [isMobile]);
@@ -131,9 +112,9 @@ export const TMPanelManagerProvider = (props) => {
         // Update state to track which panels are maximized
         setMaximizedPanels(toMaximize);
         // Update panel dimensions accordingly
-        setPanelDimensions(prev => {
+        setPanelLayout(prev => {
             const newDimensions = {};
-            Object.keys(prev).forEach(pid => {
+            Object.keys(prev.dimensions).forEach(pid => {
                 if (toMaximize.includes(pid)) {
                     // For maximized panels (target + parents), set width and height to 100%
                     newDimensions[pid] = { width: '100%', height: '100%' };
@@ -143,31 +124,31 @@ export const TMPanelManagerProvider = (props) => {
                     newDimensions[pid] = { width: '0%', height: '0%' };
                 }
             });
-            return newDimensions;
+            return { ...prev, dimensions: newDimensions };
         });
     }, [hierarchyMap]);
     // Restore all panels to their original dimensions
     const resetMaximization = useCallback(() => {
         // Clear the list of maximized panels to exit maximize mode
         setMaximizedPanels([]);
-        // Clone the current visibility state of panels
-        let updatedVisibility = { ...panelVisibility };
         // Start with the initial panel dimensions as the base for restoration
-        let nextDimensions = { ...defaultPanelDimensionsRef.current };
-        nextDimensions = Object.entries(updatedVisibility).reduce((acc, [id, isVisible]) => {
-            if (isVisible) {
-                // If the panel is visible, adjust dimensions to show it properly
-                acc = redistributeDimensionsOnShow(id, acc, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
-            }
-            else {
-                // If the panel is hidden, adjust dimensions to hide it
-                acc = redistributeDimensionsOnHide(id, acc, hierarchyMap, updatedVisibility);
-            }
-            return acc;
-        }, defaultPanelDimensionsRef.current);
-        // Apply the recalculated dimensions to the panel state
-        setPanelDimensions(nextDimensions);
-    }, [panelVisibility, hierarchyMap]);
+        setPanelLayout(prev => {
+            const updatedVisibility = prev.visibility;
+            const nextDimensions = Object.entries(updatedVisibility).reduce((acc, [id, isVisible]) => {
+                if (isVisible) {
+                    // If the panel is visible, adjust dimensions to show it properly
+                    acc = redistributeDimensionsOnShow(id, acc, defaultPanelDimensionsRef.current, hierarchyMap, updatedVisibility);
+                }
+                else {
+                    // If the panel is hidden, adjust dimensions to hide it
+                    acc = redistributeDimensionsOnHide(id, acc, hierarchyMap, updatedVisibility);
+                }
+                return acc;
+            }, defaultPanelDimensionsRef.current);
+            // Apply the recalculated dimensions to the panel state
+            return { ...prev, dimensions: nextDimensions };
+        });
+    }, [hierarchyMap]);
     // Toggle the maximized state of a panel by its ID
     const toggleMaximize = useCallback((id) => {
         if (maximizedPanels.includes(id)) {
@@ -186,17 +167,11 @@ export const TMPanelManagerProvider = (props) => {
             // If it is maximized, first reset all maximized panels to their original state
             resetMaximization();
             // Then update the visibility of the panel, toggling its current state
-            setPanelVisibility(prev => {
-                const isCurrentlyVisible = prev[id];
-                return adjustPanelVisibilityAndSize(id, !isCurrentlyVisible, prev);
-            });
+            setPanelLayout(prev => adjustPanelVisibilityAndSize(id, !prev.visibility[id], prev));
         }
         else {
             // If the panel is not maximized, simply toggle its visibility
-            setPanelVisibility(prev => {
-                const isCurrentlyVisible = prev[id];
-                return adjustPanelVisibilityAndSize(id, !isCurrentlyVisible, prev);
-            });
+            setPanelLayout(prev => adjustPanelVisibilityAndSize(id, !prev.visibility[id], prev));
         }
     }, [maximizedPanels, resetMaximization, adjustPanelVisibilityAndSize]);
     // Sets the visibility of a panel by its ID to a specific value (true = show, false = hide)
@@ -206,14 +181,14 @@ export const TMPanelManagerProvider = (props) => {
             resetMaximization();
         }
         // Then update the visibility state of the panel to the given value
-        setPanelVisibility(prev => adjustPanelVisibilityAndSize(id, isVisible, prev));
+        setPanelLayout(prev => adjustPanelVisibilityAndSize(id, isVisible, prev));
     }, [maximizedPanels, resetMaximization, adjustPanelVisibilityAndSize]);
     // Sets the dimensions (width and height) of a specific panel by its ID
     const setPanelDimensionsById = useCallback((id, width, height) => {
         // Update the ref holding the initial dimensions
         defaultPanelDimensionsRef.current = { ...defaultPanelDimensionsRef.current, [id]: { width, height } };
         // Update the panel dimensions state
-        setPanelDimensions(prev => ({ ...prev, [id]: { width, height } }));
+        setPanelLayout(prev => ({ ...prev, dimensions: { ...prev.dimensions, [id]: { width, height } } }));
     }, []);
     // Checks if there is at least one panel currently visible
     const hasVisiblePanels = useCallback(() => {

package/lib/components/layout/panelManager/TMPanelManagerToolbar.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
 import { TMPanelDefinition } from './types';
-export declare const StyledToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isDisabled" | "$isActive"> & {
+export declare const StyledToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $isActive?: boolean;
     $isDisabled?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isDisabled" | "$isActive"> & {
-    $isActive?: boolean;
-    $isDisabled?: boolean;
-}, never>>> & string;
+}>> & string;
 interface TMPanelManagerToolbarProps {
     panels: Array<TMPanelDefinition>;
 }

package/lib/components/layout/panelManager/TMPanelManagerToolbar.js

@@ -77,7 +77,7 @@ const TMPanelManagerToolbar = (props) => {
             const isDisabled = toolbarButtonsDisabled[visibleLeafPanel.id];
             const count = visibleLeafPanel.toolbarOptions?.count ?? 0;
             const tooltip = visibleLeafPanel.toolbarOptions?.tooltip ?? '';
-            return _jsx(TMTooltip, { content: tooltip || (visibleLeafPanel.name + (count > 0 ? ": " + count : '')), position: isMobile ? 'top' : 'left', children: _jsxs(StyledToolbarButton, { disabled: isDisabled, "$isDisabled": isDisabled, onClick: () => onClickCallback(visibleLeafPanel.id, isActive), "$isActive": isActive || visibleLeafPanel.toolbarOptions?.alwaysActiveColor, children: [typeof visibleLeafPanel.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${visibleLeafPanel.toolbarOptions?.icon}` })) : (visibleLeafPanel.toolbarOptions?.icon), (!isActive && count > 0) && _jsxs(Badge, { "$background": visibleLeafPanel.toolbarOptions?.countBackgroundColor, children: [" ", formatCount(count), " "] })] }, visibleLeafPanel.id) }, visibleLeafPanel.id);
+            return _jsx(TMTooltip, { content: tooltip || (visibleLeafPanel.name + (count > 0 ? ": " + count : '')), position: isMobile ? 'top' : 'left', children: _jsxs(StyledToolbarButton, { disabled: isDisabled, $isDisabled: isDisabled, onClick: () => onClickCallback(visibleLeafPanel.id, isActive), $isActive: isActive || visibleLeafPanel.toolbarOptions?.alwaysActiveColor, children: [typeof visibleLeafPanel.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${visibleLeafPanel.toolbarOptions?.icon}` })) : (visibleLeafPanel.toolbarOptions?.icon), (!isActive && count > 0) && _jsxs(Badge, { $background: visibleLeafPanel.toolbarOptions?.countBackgroundColor, children: [" ", formatCount(count), " "] })] }, visibleLeafPanel.id) }, visibleLeafPanel.id);
         }) }));
 };
 export default TMPanelManagerToolbar;

package/lib/components/layout/panelManager/TMPanelWrapper.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo, useState, useEffect } from 'react';
 import { useTMPanelManagerContext } from './TMPanelManagerContext';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
@@ -34,8 +34,8 @@ const TMPanelWrapper = (props) => {
         // Applica 'flex' o 'none' solo se è già stato reso visibile almeno una volta
         display: isCurrentlyVisible ? 'flex' : 'none',
         flexDirection: 'column',
-        minWidth: '50px',
-        minHeight: '50px',
+        minWidth: panel.contentOptions?.minWidth ?? '50px',
+        minHeight: panel.contentOptions?.minHeight ?? '50px',
         width: width,
         height: height,
         pointerEvents: 'auto',

package/lib/components/layout/panelManager/types.d.ts

@@ -12,6 +12,9 @@ export interface TMPanelDefinition {
         isClosable?: boolean;
         isMaximizable?: boolean;
         panelContainer?: ITMPanelProps;
+        minWidth?: string;
+        minHeight?: string;
+        isCollapsed?: boolean;
     };
     toolbarOptions?: {
         icon: string | JSX.Element;

package/lib/components/layout/panelManager/utils.js

@@ -97,18 +97,20 @@ export const redistributeDimensionsOnHide = (hiddenPanelId, currentDimensions, h
     const hiddenWidthNum = parseFloat(hiddenDims.width);
     const hiddenHeightNum = parseFloat(hiddenDims.height);
     const visibleSiblings = siblings.filter(siblingId => panelVisibility[siblingId]);
-    const widthIncrement = hiddenWidthNum / visibleSiblings.length;
-    const heightIncrement = hiddenHeightNum / visibleSiblings.length;
     let newDimensions = { ...currentDimensions };
-    visibleSiblings.forEach(siblingId => {
-        const siblingDims = newDimensions[siblingId] || { width: '0%', height: '0%' };
-        const siblingWidthNum = parseFloat(siblingDims.width) || 0;
-        const siblingHeightNum = parseFloat(siblingDims.height) || 0;
-        const newWidthNum = Math.min(siblingWidthNum + widthIncrement, 100);
-        const newHeightNum = Math.min(siblingHeightNum + heightIncrement, 100);
-        newDimensions[siblingId] = { width: `${newWidthNum}%`, height: `${newHeightNum}%` };
-    });
-    newDimensions[hiddenPanelId] = { width: '0%', height: '0%' };
+    if (visibleSiblings.length > 0) {
+        const widthIncrement = hiddenWidthNum / visibleSiblings.length;
+        const heightIncrement = hiddenHeightNum / visibleSiblings.length;
+        visibleSiblings.forEach(siblingId => {
+            const siblingDims = newDimensions[siblingId] || { width: '0%', height: '0%' };
+            const siblingWidthNum = parseFloat(siblingDims.width) || 0;
+            const siblingHeightNum = parseFloat(siblingDims.height) || 0;
+            const newWidthNum = Math.min(siblingWidthNum + widthIncrement, 100);
+            const newHeightNum = Math.min(siblingHeightNum + heightIncrement, 100);
+            newDimensions[siblingId] = { width: `${newWidthNum}%`, height: `${newHeightNum}%` };
+        });
+        newDimensions[hiddenPanelId] = { width: '0%', height: '0%' };
+    }
     // Ora controllo se il parent non ha più figli visibili e chiamo ricorsivamente
     if (parentId) {
         const parentInfo = hierarchyMap.get(parentId);

package/lib/components/pages/TMPage.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect } from "react";
 import { SDK_Globals, ObjectClasses, ResultTypes } from "@topconsultnpm/sdk-ts";
 import DataGrid, { Column, GroupPanel, Grouping, HeaderFilter, LoadPanel, Pager, Paging, Scrolling, SearchPanel, Selection } from "devextreme-react/data-grid";
@@ -14,9 +14,8 @@ import { FontSize, TMColors } from "../../utils/theme";
 import selectionManagerImage from '../../assets/multipleSelectionManager.jpg';
 import { DeviceType, useDeviceType } from "../base/TMDeviceProvider";
 import { TMResultManager } from "../forms/TMResultDialog";
-import { TMLayoutWaitingContainer } from "../base/TMWaitPanel";
+import TMWaitPanelManager from "../base/waitPanel/TMWaitPanelManager";
 import TMToolbarCard from "../base/TMToolbarCard";
-let abortController = new AbortController();
 const TMPage = ({ id, objClass = ObjectClasses.None, listDisabled = false, lastRefreshTime, objType, listInsteadOfContent, detailInsteadOfContent, routePage, customButtons, customColumns, searchText, detailForm, detailTitlePathKeys, deps, onSelectionChanged, onCountersChanged }) => {
     const deviceType = useDeviceType();
     let gridInstance;
@@ -28,12 +27,6 @@ const TMPage = ({ id, objClass = ObjectClasses.None, listDisabled = false, lastR
     const [selectedItems, setSelectedItems] = useState([]);
     const [visibleItems, setVisibleItems] = useState([]);
     const [formMode, setFormMode] = useState(FormModes.Update);
-    const [showWaitPanel, setShowWaitPanel] = useState(false);
-    const [waitPanelTitle, setWaitPanelTitle] = useState('');
-    const [showPrimary, setShowPrimary] = useState(false);
-    const [waitPanelTextPrimary, setWaitPanelTextPrimary] = useState('');
-    const [waitPanelValuePrimary, setWaitPanelValuePrimary] = useState(0);
-    const [waitPanelMaxValuePrimary, setWaitPanelMaxValuePrimary] = useState(0);
     let objName = PlatformObjectService.getName(objClass, objType);
     let objNames = PlatformObjectService.getName(objClass, objType, true);
     useEffect(() => { gridInstance?.instance().searchByText(searchText ?? ''); }, [searchText]);
@@ -95,31 +88,36 @@ const TMPage = ({ id, objClass = ObjectClasses.None, listDisabled = false, lastR
                 break;
         }
         const doOperationAsync = async () => {
-            setShowWaitPanel(true);
-            setShowPrimary(true);
-            setWaitPanelTitle(operationTitle);
-            abortController = new AbortController();
+            const waitPanel = TMWaitPanelManager.show({
+                title: operationTitle,
+                max: selectedItems.length,
+                cancelable: true,
+            });
             let result = [];
-            setWaitPanelMaxValuePrimary(selectedItems.length);
-            for (let i = 0; i < selectedItems.length; i++) {
-                if (abortController.signal.aborted) {
-                    result.push({ rowIndex: i, id1: selectedItems[i].id, id2: 0, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborati ${i + 1} lavori` });
-                    break;
-                }
-                setWaitPanelValuePrimary(i + 1);
-                setWaitPanelTextPrimary(`Documento ${i + 1} di ${selectedItems.length}`);
-                try {
-                    await PlatformObjectService.deleteAsync(objClass, selectedItems[i]?.id);
-                    result.push({ rowIndex: i, id1: selectedItems[i].id, id2: 0, description: objType?.toString(), resultType: ResultTypes.SUCCESS });
-                }
-                catch (ex) {
-                    result.push({ rowIndex: i, id1: selectedItems[i].id, id2: 0, resultType: ResultTypes.ERROR, description: getExceptionMessage(ex) });
+            try {
+                for (let i = 0; i < selectedItems.length; i++) {
+                    if (waitPanel.aborted) {
+                        result.push({ rowIndex: i, id1: selectedItems[i].id, id2: 0, resultType: ResultTypes.WARNING, description: `Operazione interrotta. Elaborati ${i} lavori` });
+                        waitPanel.warning();
+                        break;
+                    }
+                    waitPanel.setSubtitle(`Documento ${i + 1} di ${selectedItems.length}`);
+                    try {
+                        await PlatformObjectService.deleteAsync(objClass, selectedItems[i]?.id);
+                        result.push({ rowIndex: i, id1: selectedItems[i].id, id2: 0, description: objType?.toString(), resultType: ResultTypes.SUCCESS });
+                        waitPanel.ok();
+                    }
+                    catch (ex) {
+                        result.push({ rowIndex: i, id1: selectedItems[i].id, id2: 0, resultType: ResultTypes.ERROR, description: getExceptionMessage(ex) });
+                        waitPanel.error();
+                    }
+                    // Avanza a elaborazione conclusa: con un solo elemento la barra non parte dal 100%
+                    await waitPanel.step();
                 }
             }
-            setWaitPanelMaxValuePrimary(0);
-            setWaitPanelValuePrimary(0);
-            setWaitPanelTextPrimary('');
-            setShowWaitPanel(false);
+            finally {
+                waitPanel.close();
+            }
             TMResultManager.show(result, operationTitle, "JobID", undefined);
             await loadDataAsync();
         };
@@ -208,7 +206,7 @@ const TMPage = ({ id, objClass = ObjectClasses.None, listDisabled = false, lastR
         });
     };
     const cellRenderObjectIcon = (data) => { return PlatformObjectService.getIcon(objClass, data.row.data); };
-    return (_jsx(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: showWaitPanel, showWaitPanelPrimary: showPrimary, waitPanelTitle: waitPanelTitle, waitPanelTextPrimary: waitPanelTextPrimary, waitPanelValuePrimary: waitPanelValuePrimary, waitPanelMaxValuePrimary: waitPanelMaxValuePrimary, isCancelable: true, abortController: abortController, children: _jsxs(TMSplitterLayout, { direction: "horizontal", showSeparator: showList && deviceType !== DeviceType.MOBILE, separatorSize: 10, separatorColor: 'transparent', separatorActiveColor: 'transparent', start: showList ? deviceType !== DeviceType.MOBILE ? ['30%', '70%'] : ['100%', '0%'] : ['0', '100%'], min: ['0px', '0px'], children: [listInsteadOfContent ??
+    return (_jsx(TMLayoutContainer, { direction: 'vertical', children: _jsxs(TMSplitterLayout, { direction: "horizontal", showSeparator: showList && deviceType !== DeviceType.MOBILE, separatorSize: 10, separatorColor: 'transparent', separatorActiveColor: 'transparent', start: showList ? deviceType !== DeviceType.MOBILE ? ['30%', '70%'] : ['100%', '0%'] : ['0', '100%'], min: ['0px', '0px'], children: [listInsteadOfContent ??
                     _jsxs(TMToolbarCard, { title: objNames, children: [_jsx(ToolbarPage, {}), _jsxs(DataGrid, { disabled: selectionListDisabled, ref: (grid) => (gridInstance = grid), height: "calc(100% - 35px)", width: 'calc(100% - 5px)', dataSource: items, keyExpr: "id", allowColumnResizing: true, columnResizingMode: "widget", allowColumnReordering: true, showBorders: false, onContentReady: (e) => {
                                     setVisibleItems(e.component.getVisibleRows().map((row) => { return row.data; }));
                                     e.component.selectRows(selectedItems?.map((item) => item.id), false);

package/lib/components/query/TMQueryCountButton.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import TMButton from '../base/TMButton';
 import { getQueryCountAsync, IconCount, IsParametricQuery, SDKUI_Localizator } from '../../helper';
 import { useQueryParametersDialog } from '../../hooks/useQueryParametersDialog';

package/lib/components/query/TMQueryEditor.d.ts

@@ -2,18 +2,22 @@ import React from 'react';
 import { QueryDescriptor, ValidationItem } from '@topconsultnpm/sdk-ts';
 import { ITMApplyFormProps, FormModes } from '../../ts';
 import type { TMContextMenuItemProps } from '../NewComponents/ContextMenu/types';
-export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$borderRadius"> & {
+export declare const StyledRowItem: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $borderRadius?: string;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$borderRadius"> & {
-    $borderRadius?: string;
-}, never>>> & string;
-export declare const StyledAccordionItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const StyledAccordionItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & {
-    $disabled?: boolean;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$disabled"> & {
+}>> & string;
+export declare const StyledAccordionItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const StyledAccordionItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: React.CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
     $disabled?: boolean;
-}, never>>> & string;
+}>> & string;
 export declare const colorValue = "rgba(224,224,224,.5)";
 export declare const colorBrackets = "rgba(209,52,56,.3)";
 export declare const colorOperator = "rgba(16,124,16,.3)";
@@ -43,6 +47,9 @@ interface ITMQueryEditor extends ITMApplyFormProps<QueryDescriptor> {
     isExpertMode?: boolean;
     validateSelect?: boolean;
     validateOrderBy?: boolean;
+    /** Richiede almeno un filtro: senza, l'errore compare nell'elenco e l'applica resta disabilitato.
+     *  Default false — una query senza filtri è legittima quasi ovunque nel prodotto. */
+    validateWhereRequired?: boolean;
     showDistinct?: boolean;
     raiseWarningForOnlyMetadataDcmtTypes?: boolean;
     borderRadius?: string;