@topconsultnpm/sdkui-react-beta 6.13.38 → 6.13.39

package/lib/components/base/TMPanelManager.js

@@ -82,7 +82,7 @@ const TMPanelManager = (props) => {
             }
             else if (maximizedPanelPath.length > 0) {
                 // If at least one panel is maximized, collapse all others to zero size
-                newState.set(panelId, { ...currentPanel, width: '0', height: '0' });
+                newState.set(panelId, { ...currentPanel, width: '0%', height: '0%' });
             }
             else {
                 // If no panels are maximized, restore their original dimensions

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { TMPanelEntry } from './TMPanelManagerUtils';
 interface TNPanelManagerToolbarProps {
     allPanels: Array<TMPanelEntry>;
@@ -15,3 +16,8 @@ interface TNPanelManagerToolbarProps {
 }
 declare const TMPanelManagerToolbar: (props: TNPanelManagerToolbarProps) => import("react/jsx-runtime").JSX.Element;
 export default TMPanelManagerToolbar;
+export declare const StyledToolbarButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $toolbarMode?: number;
+    $isActive?: boolean;
+    $isDisabled?: boolean;
+}>> & string;

package/lib/components/base/TMPanelManagerToolbar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
 import { useDeviceType, DeviceType } from './TMDeviceProvider';
 import TMTooltip from './TMTooltip';
 const TMPanelManagerToolbar = (props) => {
@@ -75,37 +76,8 @@ const TMPanelManagerToolbar = (props) => {
                     alignSelf: 'center',
                 } }, `sep-${p.fullId}`)) : null;
             // Button JSX
-            const button = (_jsx(TMTooltip, { content: p.config.name, position: isMobile ? 'top' : 'left', children: _jsx("button", { disabled: isToolbarDisabled, onClick: () => { handleTogglePanel(p.fullId); if (handleClick)
-                        handleClick(); }, style: toolbarMode === 0 ? {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        height: '40px',
-                        width: '40px',
-                        border: 'none',
-                        borderRadius: '10px',
-                        fontSize: '18px',
-                        padding: '8px 10px',
-                        color: '#fff',
-                        transition: 'transform 0.2s ease, box-shadow 0.2s ease',
-                        cursor: isToolbarDisabled ? 'not-allowed' : 'pointer',
-                        opacity: isToolbarDisabled ? 0.6 : 1,
-                        backgroundColor: isActive || p.config.toolbarOptions?.alwaysActiveColor ? '#81c784' : '#e57373',
-                    } : {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        height: '32px',
-                        width: '32px',
-                        border: 'none',
-                        borderRadius: '10px',
-                        fontSize: '18px',
-                        transition: 'transform 0.2s ease, box-shadow 0.2s ease',
-                        cursor: isToolbarDisabled ? 'not-allowed' : 'pointer',
-                        opacity: isToolbarDisabled ? 0.6 : 1,
-                        color: isActive || p.config.toolbarOptions?.alwaysActiveColor ? '#005B97' : '#FFFFFF',
-                        backgroundColor: isActive || p.config.toolbarOptions?.alwaysActiveColor ? '#FFFFFF' : 'transparent',
-                    }, onMouseEnter: (e) => { if (!isToolbarDisabled) {
+            const button = (_jsx(TMTooltip, { content: p.config.name, position: isMobile ? 'top' : 'left', children: _jsx(StyledToolbarButton, { "$toolbarMode": toolbarMode, "$isActive": isActive || p.config.toolbarOptions?.alwaysActiveColor, "$isDisabled": isToolbarDisabled, disabled: isToolbarDisabled, onClick: () => { handleTogglePanel(p.fullId); if (handleClick)
+                        handleClick(); }, onMouseEnter: (e) => { if (!isToolbarDisabled && toolbarMode === 0) {
                         e.currentTarget.style.transform = 'scale(1.1)';
                     } }, onMouseLeave: (e) => { e.currentTarget.style.transform = 'scale(1)'; }, children: typeof p.config.toolbarOptions?.icon === 'string' ? (_jsx("i", { className: `dx-icon dx-icon-${p.config.toolbarOptions?.icon}` })) : (p.config.toolbarOptions?.icon) }) }, p.fullId));
             // Return separator first, then button
@@ -113,3 +85,25 @@ const TMPanelManagerToolbar = (props) => {
         }) }));
 };
 export default TMPanelManagerToolbar;
+export const StyledToolbarButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${({ $toolbarMode }) => ($toolbarMode === 0 ? '40px' : '32px')};
+  width: ${({ $toolbarMode }) => ($toolbarMode === 0 ? '40px' : '32px')};
+  border: none;
+  border-radius: ${({ $toolbarMode }) => ($toolbarMode === 0 ? '10px' : '8px')};
+  font-size: 18px;
+  padding: ${({ $toolbarMode }) => ($toolbarMode === 0 ? '8px 10px' : '0px')}; ;
+  color: #fff;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.6 : 1)};
+  background: ${({ $toolbarMode, $isActive }) => $toolbarMode === 0
+    ? ($isActive ? '#81c784' : '#e57373')
+    : ($isActive ? 'rgba(255,255,255,0.35)' : 'transparent')};
+
+  &:hover {
+    background: ${({ $toolbarMode, $isDisabled }) => $toolbarMode !== 0 && !$isDisabled ? 'rgba(255,255,255,0.35)' : undefined};
+  }
+`;

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

@@ -243,7 +243,7 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
             },
         },
     ];
-    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManager, { panels: panels, initialMobilePanelId: 'TMTreeSelector', toolbarMode: 1 }) }), searchResult.length > 0 &&
+    return (_jsxs(_Fragment, { children: [_jsx(StyledMultiViewPanel, { "$isVisible": currentSearchView === TMSearchViews.Search, children: _jsx(TMPanelManager, { panels: panels, initialMobilePanelId: 'TMRecentsManager', toolbarMode: 1 }) }), 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); } })] }));

package/package.json

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