@topconsultnpm/sdkui-react-beta 6.13.43 → 6.13.45

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/TMSavedQuerySelector.js

@@ -65,7 +65,7 @@ const getSharingModeColor = (sharingMode) => {
 export const getTooltipBySqd = (sqd) => {
     if (!sqd)
         return null;
-    return (_jsxs("div", { style: { textAlign: "left" }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10 }, children: [_jsx(IconSavedQuery, { color: getSharingModeColor(sqd.sharingMode), fontSize: 20, style: { flexShrink: 0 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs("div", { children: ["ID: ", sqd.id] }), _jsxs("div", { children: ["Master TID: ", sqd.masterTID] }), sqd.description && _jsx("div", { children: `${SDKUI_Localizator.Description}: ${sqd.description}` })] })] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.OwnerName, ": ", sqd.ownerName, " (", sqd.ownerID, ")"] }), _jsx("div", { children: LocalizeSharingModes(sqd.sharingMode) }), _jsxs("div", { children: ["Default: ", sqd.isDefault == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Filtro semplice", ": ", sqd.isEasyWhere == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Esegui ricerca immediatamente", ": ", sqd.runSearchWhenSelected == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.CreationTime, ": ", Globalization.getDateTimeDisplayValue(sqd.creationTime)] }), _jsxs("div", { children: [SDKUI_Localizator.LastUpdateTime, ": ", Globalization.getDateTimeDisplayValue(sqd.lastUpdateTime)] })] }));
+    return (_jsxs("div", { style: { textAlign: "left", fontSize: '1rem', color: TMColors.primaryColor }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 10 }, children: [_jsx(IconSavedQuery, { color: getSharingModeColor(sqd.sharingMode), fontSize: 20, style: { flexShrink: 0 } }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs("div", { children: ["ID: ", sqd.id] }), _jsxs("div", { children: ["Master TID: ", sqd.masterTID] }), sqd.description && _jsx("div", { children: `${SDKUI_Localizator.Description}: ${sqd.description}` })] })] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.OwnerName, ": ", sqd.ownerName, " (", sqd.ownerID, ")"] }), _jsx("div", { children: LocalizeSharingModes(sqd.sharingMode) }), _jsxs("div", { children: ["Default: ", sqd.isDefault == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Filtro semplice", ": ", sqd.isEasyWhere == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsxs("div", { children: ["Esegui ricerca immediatamente", ": ", sqd.runSearchWhenSelected == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No] }), _jsx("hr", {}), _jsxs("div", { children: [SDKUI_Localizator.CreationTime, ": ", Globalization.getDateTimeDisplayValue(sqd.creationTime)] }), _jsxs("div", { children: [SDKUI_Localizator.LastUpdateTime, ": ", Globalization.getDateTimeDisplayValue(sqd.lastUpdateTime)] })] }));
 };
 const initialSQDsMaxItems = 12;
 const SavedQueryContexMenu = ({ sqd, manageDefault, isMobile, deleteAsync, favManageAsync, setDefaultAsync, setInfoSQD }) => _jsx(ContextMenu, { items: [

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

@@ -1,17 +1,20 @@
 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';
 var TMSearchViews;
 (function (TMSearchViews) {
     TMSearchViews[TMSearchViews["Search"] = 0] = "Search";
@@ -118,18 +121,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 +165,155 @@ 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 = SDKUI_Globals.userSettings.themeSettings.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/features/search/TMSearchQueryEditor.js

@@ -187,7 +187,7 @@ const TMSearchQueryEditor = ({ qd, fromDTD, dcmtTypesList = [], isOpenDistinctVa
                         }, onWhereItemChange: (newWi) => { handleWhereItemChanged(newWi); }, onHideEditor: () => { setCurrentEditingMID(0); } }) }, `${wi.tid}_${wi.mid}_${index}`))) })
             :
                 _jsx("div", { style: { display: 'grid', borderRadius: '8px', alignItems: 'center', overflow: 'auto', padding: '5px', gap: '8px', gridTemplateColumns: 'minmax(0, max-content) minmax(0, max-content) minmax(50%, 1fr)' }, children: qd?.where?.slice(0, showAllMdWhere ? qd?.where.length : initialMaxItems).map((whereItem, index) => {
-                        return (_jsxs(React.Fragment, { children: [_jsx("div", { id: `wi-item-${whereItem.mid}`, style: { gridColumn: 1 }, children: _jsx(TMMidViewer, { isMetadataSelected: showDistinctValuesPanel && whereItem.mid === focusedTidMid?.mid, showIcon: true, tid_mid: { tid: whereItem?.tid, mid: whereItem?.mid, aliasTID: whereItem?.alias } }) }), _jsx("div", { style: { gridColumn: 2, paddingLeft: '5px', paddingRight: '5px' }, children: _jsx(TMDropDownMenu, { backgroundColor: colorOperator, color: getOperatorColor(whereItem), items: getQueryOperatorsMenuItems(whereItem, index), content: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(whereItem.operator) }) }) }), _jsxs("div", { style: { gridColumn: 3, position: 'relative' }, onClick: () => { handleMetadataSelection(whereItem.tid, whereItem.mid); }, onFocus: () => { handleMetadataSelection(whereItem.tid, whereItem.mid); }, children: [_jsx(TMSearchWhereItemEditor, { isSelected: showDistinctValuesPanel && whereItem.mid === focusedTidMid?.mid, openChooserBySingleClick: !showDistinctValuesPanel, whereItem: whereItem, index: index, isEditableList: isEditableList(whereItem.mid), queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid == whereItem.mid)?.queryParams ?? [], onValueChanged: (values) => {
+                        return (_jsxs(React.Fragment, { children: [_jsx("div", { id: `wi-item-${whereItem.mid}`, style: { gridColumn: 1 }, children: _jsx(TMMidViewer, { color: TMColors.primaryColor, isMetadataSelected: showDistinctValuesPanel && whereItem.mid === focusedTidMid?.mid, showIcon: true, tid_mid: { tid: whereItem?.tid, mid: whereItem?.mid, aliasTID: whereItem?.alias } }) }), _jsx("div", { style: { gridColumn: 2, paddingLeft: '5px', paddingRight: '5px' }, children: _jsx(TMDropDownMenu, { backgroundColor: colorOperator, color: getOperatorColor(whereItem), items: getQueryOperatorsMenuItems(whereItem, index), content: _jsx(StyledItemWrapper, { children: LocalizeQueryOperators(whereItem.operator) }) }) }), _jsxs("div", { style: { gridColumn: 3, position: 'relative' }, onClick: () => { handleMetadataSelection(whereItem.tid, whereItem.mid); }, onFocus: () => { handleMetadataSelection(whereItem.tid, whereItem.mid); }, children: [_jsx(TMSearchWhereItemEditor, { isSelected: showDistinctValuesPanel && whereItem.mid === focusedTidMid?.mid, openChooserBySingleClick: !showDistinctValuesPanel, whereItem: whereItem, index: index, isEditableList: isEditableList(whereItem.mid), queryParamsDynDataList: dynDataListsToBeRefreshed.find(o => o.mid == whereItem.mid)?.queryParams ?? [], onValueChanged: (values) => {
                                                 handleWhereItemChanged({ ...whereItem, value1: values[0], value2: values[1] });
                                             }, onCascadeRefreshDynDataLists: (ddlToBeRefreshed) => {
                                                 let newDynDataListsToBeRefreshed = [];

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/lib/components/viewers/TMMidViewer.d.ts

@@ -2,9 +2,10 @@ import React from 'react';
 import { ITopMediaSession, LayoutModes, MetadataDescriptor } from '@topconsultnpm/sdk-ts-beta';
 import { TID_MID } from '../../ts';
 import { DataGridTypes } from 'devextreme-react/cjs/data-grid';
-export declare const TMMidViewer: ({ isMetadataSelected, tmSession, tid_mid, showCompleteName, showIcon, showId, noneSelectionText }: {
+export declare const TMMidViewer: ({ isMetadataSelected, color, tmSession, tid_mid, showCompleteName, showIcon, showId, noneSelectionText }: {
     tmSession?: ITopMediaSession;
     tid_mid: TID_MID | undefined;
+    color?: string;
     showCompleteName?: boolean;
     showIcon?: boolean;
     showId?: boolean;
@@ -14,13 +15,15 @@ export declare const TMMidViewer: ({ isMetadataSelected, tmSession, tid_mid, sho
 interface ITMMetadataIcon {
     tid: number | undefined;
     md: MetadataDescriptor | undefined;
+    color?: string;
     layoutMode?: LayoutModes;
     isMetadataSelected?: boolean;
 }
-export declare const TMMetadataIcon: ({ tid, md, layoutMode, isMetadataSelected }: ITMMetadataIcon) => import("react/jsx-runtime").JSX.Element | null;
+export declare const TMMetadataIcon: ({ tid, md, color, layoutMode, isMetadataSelected }: ITMMetadataIcon) => import("react/jsx-runtime").JSX.Element | null;
 interface ITMMetadataTooltip {
     tid: number | undefined;
     md: MetadataDescriptor | undefined;
+    color?: string;
     children?: React.ReactNode;
     layoutMode?: LayoutModes;
 }

package/lib/components/viewers/TMMidViewer.js

@@ -5,7 +5,7 @@ import { DcmtTypeListCacheService, LayoutModes, MetadataDataDomains, MetadataDat
 import { StyledDivHorizontal, StyledTooltipContainer, StyledTooltipItem, StyledTooltipSeparatorItem } from '../base/Styled';
 import TMTooltip from '../base/TMTooltip';
 import { TMColors } from '../../utils/theme';
-export const TMMidViewer = ({ isMetadataSelected = false, tmSession, tid_mid, showCompleteName, showIcon = false, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
+export const TMMidViewer = ({ isMetadataSelected = false, color, tmSession, tid_mid, showCompleteName, showIcon = false, showId = false, noneSelectionText = `<${SDKUI_Localizator.NoneSelection}>` }) => {
     const [md, setMd] = useState();
     const [dcmtTypeName, setDcmtTypeName] = useState();
     useEffect(() => {
@@ -29,22 +29,22 @@ export const TMMidViewer = ({ isMetadataSelected = false, tmSession, tid_mid, sh
     return (_jsxs(StyledDivHorizontal, { style: {
             whiteSpace: 'nowrap',
             overflow: 'hidden',
-            textOverflow: 'ellipsis'
-        }, children: [showIcon && _jsx(TMMetadataIcon, { isMetadataSelected: isMetadataSelected, tid: tid_mid?.tid, md: md }), _jsx("p", { title: displayName(), style: {
+            textOverflow: 'ellipsis',
+            color: md?.isRequired == 1 ? 'red' : color,
+        }, children: [showIcon && _jsx(TMMetadataIcon, { isMetadataSelected: isMetadataSelected, tid: tid_mid?.tid, md: md, color: color }), _jsx("p", { title: displayName(), style: {
                     textAlign: 'left',
                     marginLeft: showIcon ? '5px' : '',
-                    color: md?.isRequired == 1 ? 'red' : undefined,
                     whiteSpace: 'nowrap',
                     overflow: 'hidden',
                     textOverflow: 'ellipsis'
                 }, children: displayName() }), showId && _jsx("p", { style: { padding: '0px 3px' }, children: `(MID: ${tid_mid?.mid})` })] }));
 };
-export const TMMetadataIcon = ({ tid, md, layoutMode = LayoutModes.Update, isMetadataSelected = false }) => {
+export const TMMetadataIcon = ({ tid, md, color, layoutMode = LayoutModes.Update, isMetadataSelected = false }) => {
     let selectedMetadataStyle = { borderBottom: isMetadataSelected ? `thick solid ${TMColors.text_normal}` : 'none', height: 'max-content' };
     if (!md)
         return null;
     let isNumeratorInArk = md.dataDomain === MetadataDataDomains.Numerator && layoutMode === LayoutModes.Ark;
-    let iconColor = md.isRequired === 1 && !isNumeratorInArk ? TMColors.error : TMColors.text_normal;
+    let iconColor = md.isRequired === 1 && !isNumeratorInArk ? TMColors.error : (color ?? TMColors.text_normal);
     let icon = null;
     switch (md.dataDomain) {
         case MetadataDataDomains.Computed:
@@ -82,9 +82,9 @@ export const TMMetadataIcon = ({ tid, md, layoutMode = LayoutModes.Update, isMet
             }
             break;
     }
-    return (_jsx(_Fragment, { children: icon ? _jsx(TMMetadataTooltip, { tid: tid, md: md, layoutMode: layoutMode, children: icon }) : null }));
+    return (_jsx(_Fragment, { children: icon ? _jsx(TMMetadataTooltip, { tid: tid, md: md, layoutMode: layoutMode, color: color, children: icon }) : null }));
 };
-export const TMMetadataTooltip = ({ tid, md, children, layoutMode = LayoutModes.Update }) => {
+export const TMMetadataTooltip = ({ tid, md, color, children, layoutMode = LayoutModes.Update }) => {
     const _setDefaultValueForUI = (defaultValue) => {
         if (!defaultValue)
             return defaultValue;
@@ -95,7 +95,7 @@ export const TMMetadataTooltip = ({ tid, md, children, layoutMode = LayoutModes.
     let isNumeratorInArk = md?.dataDomain === MetadataDataDomains.Numerator && layoutMode === LayoutModes.Ark;
     const renderTooltipContent = (tid, md) => {
         return (!md ? null
-            : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { children: `${SDK_Globals.useLocalizedName ? md.nameLoc : md.name} (TID: ${tid}, MID: ${md.id})` }), md.description && _jsx(StyledTooltipItem, { children: md.description }), _jsx(StyledTooltipSeparatorItem, {}), _jsxs(StyledTooltipItem, { children: [md.dataType, " ", md.dataType == MetadataDataTypes.Varchar ? `(${md.length ?? 0})` : md.dataType == MetadataDataTypes.Number ? `(${md.length ?? 0},${md.scale ?? 0})` : '', md.isPrimaryKey === 1 ? ' (PK)' : ''] }), _jsx(StyledTooltipItem, { style: { color: md.isRequired === 1 && !isNumeratorInArk ? TMColors.error : TMColors.text_normal }, children: md.isRequired === 1 && !isNumeratorInArk ? SDKUI_Localizator.Required : SDKUI_Localizator.RequiredNOT }), md.dataDomain && _jsx(StyledTooltipItem, { children: md.dataDomain }), md.isLexProt == 1 && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes}` }), md.isLexProt == 2 && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.MetadataFlag}` }), md.isLexProt == 3 && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes} (${SDKUI_Localizator.MetadataFlag})` }), md.isFreeSearchInput && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search_Free}: ${SDKUI_Localizator.Yes}` }), md.isSpecialSearchOutput && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search_Special}: ${SDKUI_Localizator.Yes}` }), md.format?.format && md.format.format != MetadataFormats.None && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Format}: ${LocalizeMetadataFormats(md.format.format)}` }), md.defaultValue && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Default}: ${_setDefaultValueForUI(md.defaultValue)}` }), md.fromTID && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.MetadataRoot}: ${md.isRootMID == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No}` }), md.templateMID && _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Template}: ${md.templateMID}` }), md.perm && _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { "$color": 'primary', "$marginTop": '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, {}), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Archive}: ${md.perm.canArchive ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.View_Metadato}: ${md.perm.canView ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Search}: ${md.perm.canSearch ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { children: `${SDKUI_Localizator.Update}: ${md.perm.canUpdate ?? SDKUI_Localizator.No}` })] })] }));
+            : _jsxs(StyledTooltipContainer, { children: [_jsx(StyledTooltipItem, { "$color": color, children: `${SDK_Globals.useLocalizedName ? md.nameLoc : md.name} (TID: ${tid}, MID: ${md.id})` }), md.description && _jsx(StyledTooltipItem, { "$color": color, children: md.description }), _jsx(StyledTooltipSeparatorItem, { color: color }), _jsxs(StyledTooltipItem, { "$color": color, children: [md.dataType, " ", md.dataType == MetadataDataTypes.Varchar ? `(${md.length ?? 0})` : md.dataType == MetadataDataTypes.Number ? `(${md.length ?? 0},${md.scale ?? 0})` : '', md.isPrimaryKey === 1 ? ' (PK)' : ''] }), _jsx(StyledTooltipItem, { style: { color: md.isRequired === 1 && !isNumeratorInArk ? TMColors.error : color }, children: md.isRequired === 1 && !isNumeratorInArk ? SDKUI_Localizator.Required : SDKUI_Localizator.RequiredNOT }), md.dataDomain && _jsx(StyledTooltipItem, { "$color": color, children: md.dataDomain }), md.isLexProt == 1 && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes}` }), md.isLexProt == 2 && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.MetadataFlag}` }), md.isLexProt == 3 && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.LexProt}: ${SDKUI_Localizator.Yes} (${SDKUI_Localizator.MetadataFlag})` }), md.isFreeSearchInput && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Search_Free}: ${SDKUI_Localizator.Yes}` }), md.isSpecialSearchOutput && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Search_Special}: ${SDKUI_Localizator.Yes}` }), md.format?.format && md.format.format != MetadataFormats.None && _jsx(StyledTooltipItem, { color: color, children: `${SDKUI_Localizator.Format}: ${LocalizeMetadataFormats(md.format.format)}` }), md.defaultValue && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Default}: ${_setDefaultValueForUI(md.defaultValue)}` }), md.fromTID && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.MetadataRoot}: ${md.isRootMID == 1 ? SDKUI_Localizator.Yes : SDKUI_Localizator.No}` }), md.templateMID && _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Template}: ${md.templateMID}` }), md.perm && _jsxs(_Fragment, { children: [_jsx(StyledTooltipItem, { "$color": 'primary', "$marginTop": '5px', children: SDKUI_Localizator.Perms }), _jsx(StyledTooltipSeparatorItem, { color: color }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Archive}: ${md.perm.canArchive ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.View_Metadato}: ${md.perm.canView ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Search}: ${md.perm.canSearch ?? SDKUI_Localizator.No}` }), _jsx(StyledTooltipItem, { "$color": color, children: `${SDKUI_Localizator.Update}: ${md.perm.canUpdate ?? SDKUI_Localizator.No}` })] })] }));
     };
     return (_jsx("div", { style: { pointerEvents: 'all' }, children: _jsx(TMTooltip, { content: renderTooltipContent(tid, md), children: children }) }));
 };

package/lib/utils/theme.d.ts

@@ -47,6 +47,7 @@ declare class TMColors {
     static set backgroundColorHeader(theBackgroundColorHeader: string | undefined);
     static get colorHeader(): string | undefined;
     static set colorHeader(theColorHeader: string | undefined);
+    static separator: string;
 }
 declare class FontSize {
     static defaultFontSize: string;

package/lib/utils/theme.js

@@ -47,6 +47,7 @@ TMColors.isModified = "#E29000"; //= tertiary
 TMColors.card_background = "#CAD9EB";
 TMColors._backgroundColorHeader = "#CAD9EB";
 TMColors._colorHeader = "black";
+TMColors.separator = "#00A99D";
 class FontSize {
 }
 FontSize.defaultFontSize = '1rem';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.13.43",
+    "version": "6.13.45",
     "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",