@topconsultnpm/sdkui-react-beta 6.13.43 → 6.13.44

package/lib/components/features/documents/TMDcmtForm.js

@@ -454,7 +454,7 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                 gap: SDKUI_Globals.userSettings.themeSettings.gutters,
                 width: '100%',
                 height: '100%',
-            }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel()) && deviceType !== DeviceType.MOBILE && isOpenDcmtForm, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], children: [_jsx(TMLayoutItem, { children: _jsx(TMPanel, { showHeader: showHeader, title: fromDTD?.nameLoc, toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {}), onBack: isClosable && deviceType !== DeviceType.MOBILE ? undefined : handleClose, onClose: isClosable ? handleClose : undefined, children: metadataValuesSource.length > 0 && _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
+            }, children: [_jsx("div", { style: { flex: 1, minWidth: 0, height: '100%' }, children: _jsxs(TMLayoutWaitingContainer, { direction: 'vertical', showWaitPanel: useWaitPanelLocalState ? showWaitPanelLocal : showWaitPanel, showWaitPanelPrimary: useWaitPanelLocalState ? showPrimaryLocal : showPrimary, showWaitPanelSecondary: useWaitPanelLocalState ? showSecondaryLocal : showSecondary, waitPanelTitle: useWaitPanelLocalState ? waitPanelTitleLocal : waitPanelTitle, waitPanelTextPrimary: useWaitPanelLocalState ? waitPanelTextPrimaryLocal : waitPanelTextPrimary, waitPanelValuePrimary: useWaitPanelLocalState ? waitPanelValuePrimaryLocal : waitPanelValuePrimary, waitPanelMaxValuePrimary: useWaitPanelLocalState ? waitPanelMaxValuePrimaryLocal : waitPanelMaxValuePrimary, waitPanelTextSecondary: useWaitPanelLocalState ? waitPanelTextSecondaryLocal : waitPanelTextSecondary, waitPanelValueSecondary: useWaitPanelLocalState ? waitPanelValueSecondaryLocal : waitPanelValueSecondary, waitPanelMaxValueSecondary: useWaitPanelLocalState ? waitPanelMaxValueSecondaryLocal : waitPanelMaxValueSecondary, isCancelable: useWaitPanelLocalState ? dcmtFile ? dcmtFile.size >= 1000000 : false : true, abortController: useWaitPanelLocalState ? abortControllerLocal : abortController, children: [_jsxs(TMSplitterLayout, { direction: 'horizontal', overflow: 'visible', separatorSize: SDKUI_Globals.userSettings.themeSettings.gutters, separatorColor: 'transparent', showSeparator: (isOpenPreview || isOpenMiddlePanel()) && deviceType !== DeviceType.MOBILE && isOpenDcmtForm, start: getPrimarySplitterStartLayout(), min: deviceType !== DeviceType.MOBILE && isOpenDcmtForm ? ['150px', '0'] : ['0', '0'], children: [_jsx(TMLayoutItem, { children: _jsx(TMPanel, { showHeader: showHeader, title: fromDTD?.nameLoc, toolbar: allowNavigation ? formToolbar : _jsx(_Fragment, {}), onBack: (isClosable && deviceType !== DeviceType.MOBILE) ? undefined : handleClose, onClose: isClosable ? handleClose : undefined, children: metadataValuesSource.length > 0 && _jsxs(StyledToolbarCardContainer, { children: [_jsx(TMMetadataValues, { TID: TID, metadataValues: metadataValuesSource, metadataValuesOrig: metadataValuesSourceOrig, isExpertMode: isExpertMode, isOpenDistinctValues: isOpenDistinctValues, openChooserBySingleClick: !isOpenDistinctValues, selectedMID: focusedMetadataValue?.mid, layoutMode: layoutMode, deviceType: deviceType, validationItems: validationItems, onFocusedItemChanged: (item) => { (item?.mid !== focusedMetadataValue?.mid) && setFocusedMetadataValue(item); }, onValueChanged: (newItems) => {
                                                             setFormData((prevItems) => prevItems.map((item) => {
                                                                 const newItem = newItems.find((newItem) => newItem.tid === item.tid && newItem.mid === item.mid);
                                                                 return newItem ? { ...item, ...newItem } : item;

package/lib/components/features/search/TMSearch.js

@@ -1,17 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { SavedQueryCacheService, DcmtTypeListCacheService, SDK_Localizator } from '@topconsultnpm/sdk-ts-beta';
 import TMSavedQuerySelector from './TMSavedQuerySelector';
 import TMTreeSelector from './TMTreeSelector';
 import { TabPanel, Item } from 'devextreme-react/tab-panel';
 import TMSearchQueryPanel, { refreshLastSearch } from './TMSearchQueryPanel';
-import { getSysAllDcmtsSQD, IconArrowRight, IconFilter, IconRecentlyViewed, IconSavedQuery, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
+import { getSysAllDcmtsSQD, IconFilter, IconInfo, IconRecentlyViewed, IconSavedQuery, IconTree, SDKUI_Globals, SDKUI_Localizator } from '../../../helper';
 import TMSearchResult from './TMSearchResult';
 import TMRecentsManager from '../../grids/TMRecentsManager';
 import { SearchResultContext } from '../../../ts';
 import { useDeviceType, DeviceType } from '../../base/TMDeviceProvider';
 import { StyledMultiViewPanel } from '../../base/Styled';
-import TMPanelManager from '../../base/TMPanelManager';
+import { TMPanelManagerContextProvider, useTMPanelContext } from '../../layout/panel/TMPanelContext';
+import { TMPanelToolbar } from '../../layout/panel/TMPanelToolbar';
+import { useResizablePanels } from '../../layout/panel/useResizablePanels';
+import TMPanel from '../../base/TMPanel';
+import { Gutters } from '../../../utils/theme';
 var TMSearchViews;
 (function (TMSearchViews) {
     TMSearchViews[TMSearchViews["Search"] = 0] = "Search";
@@ -118,18 +122,18 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
             await setSqdAsync?.(sqdToBeSet);
     }, []);
     const isMobile = deviceType === DeviceType.MOBILE;
-    const renderTMTreeSelector = (handleTogglePanel) => _jsx(TMTreeSelector, { onClosePanel: () => handleTogglePanel('TMTreeSelector'), onSelectedTIDChanged: (tid) => {
+    const renderTMTreeSelector = (handleTogglePanel) => _jsx(TMTreeSelector, { onClosePanel: () => handleTogglePanel?.('TMTreeSelector'), onSelectedTIDChanged: (tid) => {
             setCurrentTID(tid);
             if (tid && mruTIDs.includes(tid))
                 setCurrentMruTID(tid);
             else
                 setCurrentMruTID(0);
-            isMobile && handleTogglePanel('TMSearchQueryPanel');
+            isMobile && handleTogglePanel?.('TMSearchQueryPanel');
         } });
     const renderTMRecentsManager = (handleTogglePanel) => _jsx(TMRecentsManager, { mruTIDs: mruTIDs, currentMruTID: currentMruTID, deviceType: deviceType, onSelectedTID: (tid) => {
             setCurrentMruTID(tid);
             setCurrentTID(tid);
-            isMobile && handleTogglePanel('TMSearchQueryPanel');
+            isMobile && handleTogglePanel?.('TMSearchQueryPanel');
         }, onDeletedTID: (tid) => {
             let newMruTIDS = mruTIDs.slice();
             let index = newMruTIDS.findIndex(o => o == tid);
@@ -162,90 +166,156 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
         } });
     const renderTMSavedQuerySelector = (handleTogglePanel) => _jsxs(TabPanel, { width: "100%", height: "100%", showNavButtons: true, repaintChangesOnly: true, selectedIndex: currentSQDMode, onSelectedIndexChange: (index) => setCurrentSQDMode(index), children: [(currentTID || currentSQD) ? _jsx(Item, { title: fromDTD?.nameLoc, children: _jsx(TMSavedQuerySelector, { allowShowSearch: false, items: filteredByTIDSQDs, selectedId: currentSQD?.id, onRefreshData: () => { loadDataSQDsAsync(true); }, onItemClick: (sqd) => {
                         onSQDItemClick(sqd, setSQDAsync);
-                        isMobile && handleTogglePanel('TMSearchQueryPanel');
+                        isMobile && handleTogglePanel?.('TMSearchQueryPanel');
                     }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? filteredByTIDSQDs.find(o => o.id == 1) : currentSQD, setSQDAsync) }) }) : _jsx(_Fragment, {}), _jsx(Item, { title: SDKUI_Localizator.Alls2, children: _jsx(TMSavedQuerySelector, { allowShowSearch: true, items: allSQDs, manageDefault: false, 
                     // selectedId={currentSQD?.id}
                     onItemClick: (sqd) => {
                         onSQDItemClick(sqd, setSQDAsync);
-                        isMobile && handleTogglePanel('TMSearchQueryPanel');
+                        isMobile && handleTogglePanel?.('TMSearchQueryPanel');
                     }, onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] });
-    const panelsConfig = [
-        {
-            id: 'TMTreeSelector',
-            name: SDK_Localizator.Trees,
-            toolbarOptions: { icon: _jsx(IconTree, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 1 },
-            type: 'content',
-            contentOptions: {
-                visible: true,
-                height: '100%',
-                width: '20%',
-                content: renderTMTreeSelector,
-            },
-        },
-        {
-            id: 'TMRecentsManager',
-            name: "Scorciatoie",
-            toolbarOptions: { icon: _jsx(IconRecentlyViewed, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 2 },
-            type: 'content',
-            contentOptions: {
-                visible: true,
-                height: '100%',
-                width: '20%',
-                content: (handleTogglePanel) => renderTMRecentsManager(handleTogglePanel),
-                panelContainer: {
-                    title: "Scorciatoie",
-                    totalItems: mruTIDs.length,
-                    allowMaximize: !isMobile
-                },
-            },
-        },
-        {
-            id: 'TMSearchQueryPanel',
-            name: SDK_Localizator.QueryWhere,
-            toolbarOptions: { icon: _jsx(IconFilter, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 3 },
-            type: 'content',
-            contentOptions: {
-                visible: true,
-                height: '100%',
-                width: '40%',
-                content: renderTMSearchQueryPanel,
-            },
-        },
-        {
-            id: 'TMSavedQuerySelector',
-            name: SDK_Localizator.SavedQueries,
-            toolbarOptions: { icon: _jsx(IconSavedQuery, { fontSize: 24 }), visible: true, isActive: true, orderNumber: 4 },
-            type: 'content',
-            contentOptions: {
-                visible: true,
-                height: '100%',
-                width: '20%',
-                content: renderTMSavedQuerySelector,
-                panelContainer: {
-                    title: SDK_Localizator.SavedQueries,
-                    allowMaximize: !isMobile
-                },
-            },
-        },
-        {
-            id: 'goToResult',
-            name: 'Vai a risultato',
-            toolbarOptions: {
-                icon: _jsx(IconArrowRight, { fontSize: 24 }),
-                visible: searchResult.length > 0,
-                isActive: searchResult.length > 0,
-                orderNumber: 5,
-                beginGroup: true
-            },
-            type: 'button',
-            buttonOptions: {
-                onClick: () => setCurrentSearchView(TMSearchViews.Result),
-            },
-        },
-    ];
-    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManager, { panels: panelsConfig, initialMobilePanelId: 'TMRecentsManager', toolbarMode: 1 }) }), searchResult.length > 0 &&
+    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManagerContextProvider, { panels: panels, initialMobilePanelId: "TMRecentsManager", children: _jsx(TMSearchPanelContent, { isMobile: isMobile, panelTMTreeSelector: renderTMTreeSelector, panelTMRecentsManager: renderTMRecentsManager, panelTMSearchQueryPanel: renderTMSearchQueryPanel(), panelTMSavedQuerySelector: renderTMSavedQuerySelector }) }) }), searchResult.length > 0 &&
                 _jsx(TMSearchResult, { isVisible: currentSearchView === TMSearchViews.Result, context: SearchResultContext.METADATA_SEARCH, searchResults: searchResult, onRefreshAfterAddDcmtToFavs: onRefreshAfterAddDcmtToFavs, onRefreshSearchAsync: async () => {
                         setSearchResult(await refreshLastSearch(lastQdSearched) ?? []);
                     }, onTaskCreateRequest: onTaskCreateRequest, onClose: () => { setCurrentSearchView(TMSearchViews.Search); } })] }));
 };
+const TMSearchPanelContent = ({ isMobile, panelTMTreeSelector, panelTMRecentsManager, panelTMSearchQueryPanel, panelTMSavedQuerySelector }) => {
+    const gutters = Gutters.getGutters();
+    console.log('TMSearchPanelContent gutters', gutters);
+    const { visibility, maximizedPanelId, getPanelDimensions, togglePanel, toggleMaximizePanel, setPanelDisabledById, setPanelVisibility, hasVisiblePanels } = useTMPanelContext();
+    const containerRef = useRef(null);
+    const { onMouseDown } = useResizablePanels(containerRef);
+    const { width: widthPanel1, height: heightPanel1 } = getPanelDimensions('TMTreeSelector');
+    const { width: widthPanel2, height: heightPanel2 } = getPanelDimensions('TMRecentsManager');
+    const { width: widthPanel3, height: heightPanel3 } = getPanelDimensions('TMSearchQueryPanel');
+    const { width: widthPanel4, height: heightPanel4 } = getPanelDimensions('TMSavedQuerySelector');
+    return (_jsxs("div", { style: { display: 'flex', height: '100%', width: '100%', flexDirection: isMobile ? 'column' : 'row', gap: gutters }, children: [_jsx("div", { style: {
+                    display: 'flex',
+                    flexGrow: 1,
+                    width: `calc(100% - ${isMobile ? 0 : 70}px)`,
+                    height: `calc(100% - ${isMobile ? 55 : 0}px)`,
+                    flexDirection: 'row'
+                }, children: _jsxs("div", { style: { width: '100%', height: '100%' }, children: [_jsxs("div", { ref: containerRef, style: {
+                                display: hasVisiblePanels() ? 'flex' : 'none',
+                                width: '100%',
+                                height: '100%',
+                            }, children: [_jsx("div", { style: {
+                                        display: visibility.TMTreeSelector ? 'block' : 'none',
+                                        width: widthPanel1,
+                                        height: heightPanel1,
+                                        overflow: 'hidden',
+                                    }, children: panelTMTreeSelector(() => togglePanel('TMSearchQueryPanel')) }), visibility.TMTreeSelector && visibility.TMRecentsManager && maximizedPanelId === null && (_jsx("div", { style: {
+                                        background: 'transparent',
+                                        cursor: 'col-resize',
+                                        width: `${gutters}px`,
+                                        height: '100%',
+                                        userSelect: 'none',
+                                    }, onMouseDown: (e) => onMouseDown(e, 'TMTreeSelector', 'TMRecentsManager', true) })), _jsx("div", { style: {
+                                        display: visibility.TMRecentsManager ? 'block' : 'none',
+                                        width: widthPanel2,
+                                        height: heightPanel2,
+                                        overflow: 'hidden',
+                                    }, children: _jsx(TMPanel, { title: 'Scorciatoie', onClose: () => togglePanel('TMRecentsManager'), onMaximize: () => toggleMaximizePanel('TMRecentsManager'), onHeaderDoubleClick: () => toggleMaximizePanel('TMRecentsManager'), allowMaximize: !isMobile, children: panelTMRecentsManager(() => togglePanel('TMSearchQueryPanel')) }) }), visibility.TMRecentsManager && visibility.TMSearchQueryPanel && maximizedPanelId === null && (_jsx("div", { style: {
+                                        background: 'transparent',
+                                        cursor: 'col-resize',
+                                        width: `${gutters}px`,
+                                        height: '100%',
+                                        userSelect: 'none',
+                                    }, onMouseDown: (e) => onMouseDown(e, 'TMRecentsManager', 'TMSearchQueryPanel', true) })), _jsx("div", { style: {
+                                        display: visibility.TMSearchQueryPanel ? 'block' : 'none',
+                                        width: widthPanel3,
+                                        height: heightPanel3,
+                                        overflow: 'hidden',
+                                    }, children: panelTMSearchQueryPanel }), visibility.TMSearchQueryPanel && visibility.TMSavedQuerySelector && maximizedPanelId === null && (_jsx("div", { style: {
+                                        background: 'transparent',
+                                        cursor: 'col-resize',
+                                        width: `${gutters}px`,
+                                        height: '100%',
+                                        userSelect: 'none',
+                                    }, onMouseDown: (e) => onMouseDown(e, 'TMSearchQueryPanel', 'TMSavedQuerySelector', true) })), _jsx("div", { style: {
+                                        display: visibility.TMSavedQuerySelector ? 'block' : 'none',
+                                        width: widthPanel4,
+                                        height: heightPanel4,
+                                        overflow: 'hidden',
+                                    }, children: _jsx(TMPanel, { title: SDK_Localizator.SavedQueries, onClose: () => togglePanel('TMSavedQuerySelector'), onMaximize: () => toggleMaximizePanel('TMSavedQuerySelector'), onHeaderDoubleClick: () => toggleMaximizePanel('TMSavedQuerySelector'), allowMaximize: !isMobile, children: panelTMSavedQuerySelector(() => togglePanel('TMSearchQueryPanel')) }) })] }), _jsxs("div", { style: {
+                                display: hasVisiblePanels() ? 'none' : 'flex',
+                                flexDirection: 'column',
+                                width: '100%',
+                                height: '100%',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                fontSize: '1.5rem',
+                                fontWeight: 'bold',
+                                color: '#888',
+                                backgroundColor: '#fff',
+                                borderRadius: '10px'
+                            }, children: [_jsx(IconInfo, { style: { fontSize: 50 } }), _jsx("div", { children: SDKUI_Localizator.NoPanelSelected })] })] }) }), _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(TMPanelToolbar, {}) })] }));
+};
 export default TMSearch;
+const panels = [
+    {
+        id: 'TMTreeSelector',
+        name: SDK_Localizator.Trees,
+        children: [],
+        contentOptions: {
+            width: '20%',
+            height: '100%',
+        },
+        toolbarOptions: {
+            icon: _jsx(IconTree, { fontSize: 24 }),
+            visible: true,
+            isActive: true
+        }
+    },
+    {
+        id: 'TMRecentsManager',
+        name: 'Scorciatoie',
+        children: [],
+        contentOptions: {
+            width: '20%',
+            height: '100%',
+        },
+        toolbarOptions: {
+            icon: _jsx(IconRecentlyViewed, { fontSize: 24 }),
+            visible: true,
+            isActive: true
+        }
+    },
+    {
+        id: 'TMSearchQueryPanel',
+        name: SDK_Localizator.QueryWhere,
+        children: [],
+        contentOptions: {
+            width: '40%',
+            height: '100%',
+        },
+        toolbarOptions: {
+            icon: _jsx(IconFilter, { fontSize: 24 }),
+            visible: false,
+            isActive: true
+        }
+    },
+    {
+        id: 'TMSavedQuerySelector',
+        name: SDK_Localizator.SavedQueries,
+        children: [],
+        contentOptions: {
+            width: '20%',
+            height: '100%',
+        },
+        toolbarOptions: {
+            icon: _jsx(IconSavedQuery, { fontSize: 24 }),
+            visible: true,
+            isActive: true
+        }
+    },
+];

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

@@ -35,7 +35,7 @@ interface ITMPanelManagerContext {
     setPanelDisabledById: (id: string, disabled: boolean) => void;
     hasVisiblePanels: () => boolean;
 }
-export declare function useTMPanelConext(): ITMPanelManagerContext;
+export declare function useTMPanelContext(): ITMPanelManagerContext;
 interface TMPanelContextProviderProps {
     panels: Array<TMPanelManagerItemContext>;
     initialMobilePanelId: string;

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

@@ -4,10 +4,10 @@ import { DeviceType, useDeviceType } from '../../base/TMDeviceProvider';
 // Creazione del context
 const TMPanelManagerContext = createContext(undefined);
 // Hook custom per accedere al context
-export function useTMPanelConext() {
+export function useTMPanelContext() {
     const context = useContext(TMPanelManagerContext);
     if (!context) {
-        throw new Error('useTMPanelConext must be used within a TMPanelContextProvider');
+        throw new Error('useTMPanelContext must be used within a TMPanelContextProvider');
     }
     return context;
 }

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

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { useTMPanelConext } from './TMPanelContext';
+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 } = useTMPanelConext();
+    const { panelTree, togglePanel, calculateEffectiveVisibility } = useTMPanelContext();
     const deviceType = useDeviceType();
     let isMobile = useMemo(() => { return deviceType === DeviceType.MOBILE; }, [deviceType]);
     // Ricorsivamente trova tutti i pannelli parent (hanno figli)

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

@@ -1,7 +1,7 @@
 import { useRef, useCallback } from 'react';
-import { useTMPanelConext } from './TMPanelContext';
+import { useTMPanelContext } from './TMPanelContext';
 export function useResizablePanels(containerRef) {
-    const { getPanelDimensions, updatePanelSize } = useTMPanelConext();
+    const { getPanelDimensions, updatePanelSize } = useTMPanelContext();
     const resizingRef = useRef(null);
     const getSizePercent = useCallback((panelId, isRow) => {
         const dim = getPanelDimensions(panelId);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.13.43",
+    "version": "6.13.44",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
@@ -42,7 +42,7 @@
         "lib"
     ],
     "dependencies": {
-        "@topconsultnpm/sdk-ts-beta": "6.13.7",
+        "@topconsultnpm/sdk-ts-beta": "6.13.8",
         "buffer": "^6.0.3",
         "devextreme": "24.2.6",
         "devextreme-react": "24.2.6",