@topconsultnpm/sdkui-react-beta 6.13.27 → 6.13.28

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

@@ -491,24 +491,24 @@ const TMDcmtForm = ({ showHeader = true, onSaveRecents, layoutMode = LayoutModes
                                         setFormData((prevItems) => prevItems.map((item) => item.tid == e.tid && item.mid === e.mid ? { ...item, value: e.newValue } : item));
                                     } }), (isModal && onClose) && _jsx("div", { id: "TMDcmtFormShowConfirmForClose-" + id })] }) }), showDcmtFormSidebar && _jsx(TMCommandsPanel, { isMobile: deviceType === DeviceType.MOBILE, items: [
                         ...(layoutMode === LayoutModes.Ark ? [
-                            { icon: _jsx(IconRoundFileUpload, { fontSize: 20 }), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
+                            { icon: _jsx(IconRoundFileUpload, {}), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
                                     setIsOpenPreview(!isOpenPreview); } }
                         ] : []),
                         ...(layoutMode !== LayoutModes.Ark ? [
-                            { icon: _jsx(IconShow, { fontSize: 20 }), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
+                            { icon: _jsx(IconShow, {}), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
                                     setIsOpenPreview(!isOpenPreview); } },
-                            { icon: _jsx(IconBoard, { fontSize: 20 }), selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) {
+                            { icon: _jsx(IconBoard, {}), selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) {
                                     closeMiddlePanel();
                                     setIsOpenBoard(!isOpenBoard);
                                 } } },
-                            { icon: _jsx(IconDcmtTypeSys, { fontSize: 20 }), selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) {
+                            { icon: _jsx(IconDcmtTypeSys, {}), selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) {
                                     closeMiddlePanel();
                                     setIsOpenSysMetadata(!isOpenSysMetadata);
                                 } } },
                         ] : []),
-                        ...(currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, { fontSize: 20 }), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
+                        ...(currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, {}), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
                                     setIsOpenMaster(!isOpenMaster); } }] : []),
-                        ...(currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { fontSize: 20, transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
+                        ...(currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
                                     setIsOpenDetails(!isOpenDetails); } }] : []),
                         ...customRightSidebarItems
                     ] }), isOpenDetails &&

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

@@ -395,12 +395,12 @@ const TMMasterDetailDcmts = ({ deviceType, inputDcmts, isForMaster, showCurrentD
                                             _jsx(TMTreeView, { dataSource: data, allowMultipleSelection: allowMultipleSelection, calculateItemsForNode: calculateItemsForNode, itemRender: renderItem, focusedItem: focusedItem, selectedItems: selectedItems, onFocusedItemChanged: handleFocusedItemChanged, onSelectionChanged: handleSelectedItemsChanged, onDataChanged: (items) => setData(updateHiddenProperty(items)) }) }), _jsx(TMLayoutItem, { children: focusedItem?.isDcmt ?
                                     _jsx(TMDcmtForm, { TID: focusedItem?.tid, DID: focusedItem.did, isClosable: deviceType !== DeviceType.MOBILE, allowNavigation: false, allowRelations: deviceType !== DeviceType.MOBILE, showDcmtFormSidebar: deviceType === DeviceType.MOBILE, showPreview: showPreview, showBoard: showBoard, showSysMetadata: showSysMetadata, showDcmtForm: showDcmtForm, onClose: () => { setShowDcmtForm(false); }, onClosePreview: () => { setShowPreview(false); } }) :
                                     _jsx(TMSearchResult, { context: SearchResultContext.METADATA_SEARCH, searchResults: focusedItem?.searchResult ?? [], showSearchResultSidebar: false, onClose: () => { setShowDcmtForm(false); }, onClosePreview: () => { setShowPreview(false); }, onTaskCreateRequest: onTaskCreateRequest }) })] }, "TMDetails-panel") }) }), _jsx(TMCommandsPanel, { isMobile: isMobile, items: [
-                    { icon: _jsx(IconShow, { fontSize: 20 }), selected: showPreview, onClick: () => { setShowPreview(!showPreview); } },
-                    { icon: _jsx(IconPreview, { fontSize: 20 }), selected: showDcmtForm, onClick: () => { setShowDcmtForm(!showDcmtForm); } },
-                    { icon: _jsx(IconBoard, { fontSize: 20 }), selected: showBoard, onClick: () => { setShowSysMetadata(false); setShowBoard(!showBoard); } },
-                    { icon: _jsx(IconDcmtTypeSys, { fontSize: 20 }), selected: showSysMetadata, onClick: () => { setShowBoard(false); setShowSysMetadata(!showSysMetadata); } },
-                    { icon: _jsx(IconCheckFile, { fontSize: 20 }), selected: showZeroDcmts, onClick: () => { setShowZeroDcmts(!showZeroDcmts); } },
-                    { icon: _jsx(IconDetailDcmts, { fontSize: 20, transform: 'scale(-1, 1)' }), disabled: !focusedItem?.isDcmt, onClick: () => { appendMasterDcmts?.(focusedItem?.tid, focusedItem?.did); } }
+                    { icon: _jsx(IconShow, {}), selected: showPreview, onClick: () => { setShowPreview(!showPreview); } },
+                    { icon: _jsx(IconPreview, {}), selected: showDcmtForm, onClick: () => { setShowDcmtForm(!showDcmtForm); } },
+                    { icon: _jsx(IconBoard, {}), selected: showBoard, onClick: () => { setShowSysMetadata(false); setShowBoard(!showBoard); } },
+                    { icon: _jsx(IconDcmtTypeSys, {}), selected: showSysMetadata, onClick: () => { setShowBoard(false); setShowSysMetadata(!showSysMetadata); } },
+                    { icon: _jsx(IconCheckFile, {}), selected: showZeroDcmts, onClick: () => { setShowZeroDcmts(!showZeroDcmts); } },
+                    { icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }), disabled: !focusedItem?.isDcmt, onClick: () => { appendMasterDcmts?.(focusedItem?.tid, focusedItem?.did); } }
                 ] })] }));
 };
 export default TMMasterDetailDcmts;

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

@@ -170,22 +170,22 @@ const TMSearch = ({ inputTID, inputSqdID, isExpertMode = SDKUI_Globals.userSetti
                                                                 // selectedId={currentSQD?.id}
                                                                 onItemClick: (sqd) => onSQDItemClick(sqd, setSQDAsync), onDeleted: (sqd) => onSQDDeleted(sqd, sqd.id == currentSQD?.id ? undefined : currentSQD, setSQDAsync) }) })] }) }) })] })] }) }), _jsx(TMCommandsPanel, { isMobile: isMobile, items: [
                             {
-                                icon: _jsx(IconTree, { fontSize: 20 }),
+                                icon: _jsx(IconTree, {}),
                                 selected: showTreesPanel,
                                 onClick: () => setShowTreesPanel(!showTreesPanel),
                             },
                             {
-                                icon: _jsx(IconProgressReady, { fontSize: 20 }),
+                                icon: _jsx(IconProgressReady, {}),
                                 selected: showRecentsPanel,
                                 onClick: () => setShowRecentsPanel(!showRecentsPanel),
                             },
                             {
-                                icon: _jsx(IconSavedQuery, { fontSize: 20 }),
+                                icon: _jsx(IconSavedQuery, {}),
                                 selected: showSavedQueryPanel,
                                 onClick: () => setShowSavedQueryPanel(!showSavedQueryPanel),
                             },
                             ...(searchResult.length > 0 ? [{
-                                    icon: _jsx(IconSearch, { fontSize: 20 }),
+                                    icon: _jsx(IconSearch, {}),
                                     disabled: searchResult.length <= 0,
                                     onClick: () => {
                                         if (searchResult.length > 0) {

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

@@ -468,19 +468,19 @@ const TMSearchResult = ({ context = SearchResultContext.METADATA_SEARCH, isVisib
                                                             ? _jsx(TMLayoutItem, { children: _jsx(TMDcmtPreview, { onClose: () => { setIsOpenPreview(false); onClosePreview?.(); }, dcmtData: currentDcmt, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev') }) })
                                                             : _jsx(_Fragment, {})] }) })
                                             : _jsx(_Fragment, {})] }) }) }), showSearchResultSidebar && _jsx(TMCommandsPanel, { isMobile: deviceType === DeviceType.MOBILE, items: [
-                        { icon: _jsx(IconShow, { fontSize: 20 }), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
+                        { icon: _jsx(IconShow, {}), selected: isOpenPreview, disabled: isPreviewDisabled, onClick: () => { if (!isPreviewDisabled)
                                 setIsOpenPreview(!isOpenPreview); } },
-                        { icon: _jsx(IconBoard, { fontSize: 20 }), selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) {
+                        { icon: _jsx(IconBoard, {}), selected: isOpenBoard, disabled: isBoardDisabled, onClick: () => { if (!isBoardDisabled) {
                                 closeMiddlePanel();
                                 setIsOpenBoard(!isOpenBoard);
                             } } },
-                        { icon: _jsx(IconDcmtTypeSys, { fontSize: 20 }), selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) {
+                        { icon: _jsx(IconDcmtTypeSys, {}), selected: isOpenSysMetadata, disabled: isSysMetadataDisabled, onClick: () => { if (!isSysMetadataDisabled) {
                                 closeMiddlePanel();
                                 setIsOpenSysMetadata(!isOpenSysMetadata);
                             } } },
-                        ...(currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, { fontSize: 20 }), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
+                        ...(currentTIDHasMasterRelations ? [{ icon: _jsx(IconDetailDcmts, {}), selected: isOpenMaster, disabled: isMasterDisabled, onClick: () => { if (!isMasterDisabled)
                                     setIsOpenMaster(!isOpenMaster); } }] : []),
-                        ...(currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { fontSize: 20, transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
+                        ...(currentTIDHasDetailRelations ? [{ icon: _jsx(IconDetailDcmts, { transform: 'scale(-1, 1)' }), selected: isOpenDetails, disabled: isDetailsDisabled, onClick: () => { if (!isDetailsDisabled)
                                     setIsOpenDetails(!isOpenDetails); } }] : []),
                     ] }), isOpenDetails &&
                     _jsx(StyledModalContainer, { style: { backgroundColor: 'white' }, children: _jsx(TMMasterDetailDcmts, { deviceType: deviceType, isForMaster: false, inputDcmts: getSelectionDcmtInfo(), allowNavigation: focusedItem && selectedItems.length <= 0, canNext: canNavigateHandler('next'), canPrev: canNavigateHandler('prev'), onNext: () => onNavigateHandler('next'), onPrev: () => onNavigateHandler('prev'), onBack: () => setIsOpenDetails(false) }) }), isOpenMaster &&

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ResizableGridProps {
+    panels: React.ReactNode[];
+    minPercents?: number[];
+    initialPercents?: number[];
+}
+declare const ResizableGrid: React.FC<ResizableGridProps>;
+export default ResizableGrid;

package/lib/components/layout/ResizableGrid.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ResizableGrid.tsx
+import React, { useRef, useState } from 'react';
+const ResizableGrid = ({ panels, minPercents, initialPercents, }) => {
+    const panelCount = panels.length;
+    const defaultMinPercents = minPercents ?? Array(panelCount).fill(0.1);
+    const [percents, setPercents] = useState(initialPercents ??
+        Array(panelCount).fill(1 / panelCount));
+    const containerRef = useRef(null);
+    const handleMouseDown = (idx, e) => {
+        e.preventDefault();
+        const startX = e.clientX;
+        const startPercents = [...percents];
+        const onMouseMove = (moveEvent) => {
+            if (!containerRef.current)
+                return;
+            const deltaPx = moveEvent.clientX - startX;
+            const containerWidth = containerRef.current.offsetWidth;
+            if (containerWidth === 0)
+                return;
+            const deltaPercent = deltaPx / containerWidth;
+            let newPercents = [...startPercents];
+            // Adjust the dragged panel and the next one
+            newPercents[idx] = Math.max(defaultMinPercents[idx], startPercents[idx] + deltaPercent);
+            newPercents[idx + 1] = Math.max(defaultMinPercents[idx + 1], startPercents[idx + 1] - deltaPercent);
+            // Normalize if overflows
+            const total = newPercents.reduce((a, b) => a + b, 0);
+            newPercents = newPercents.map(p => p / total);
+            setPercents(newPercents);
+        };
+        const onMouseUp = () => {
+            window.removeEventListener('mousemove', onMouseMove);
+            window.removeEventListener('mouseup', onMouseUp);
+        };
+        window.addEventListener('mousemove', onMouseMove);
+        window.addEventListener('mouseup', onMouseUp);
+    };
+    // Build gridTemplateColumns string
+    const gridTemplateColumns = percents
+        .map((p, i) => `${(p * 100).toFixed(2)}%${i < panelCount - 1 ? ' 6px' : ''}`)
+        .join(' ');
+    return (_jsx("div", { ref: containerRef, style: {
+            display: 'grid',
+            gridTemplateColumns,
+            width: '100%',
+            height: '100%',
+            position: 'relative',
+        }, children: panels.map((panel, idx) => (_jsxs(React.Fragment, { children: [_jsx("div", { style: { overflow: 'auto', height: '100%' }, children: panel }), idx < panelCount - 1 && (_jsx("div", { style: {
+                        cursor: 'col-resize',
+                        background: '#e0e0e0',
+                        width: 6,
+                        zIndex: 1,
+                        height: '100%',
+                    }, onMouseDown: e => handleMouseDown(idx, e) }))] }, idx))) }));
+};
+export default ResizableGrid;

package/lib/components/sidebar/TMCommandsPanel.js

@@ -3,9 +3,10 @@ import styled from 'styled-components';
 export const StyledCommandsPanel = styled.div `
     display: flex;
     flex-direction: ${({ $isMobile }) => ($isMobile ? 'row' : 'column')};
-    width: ${({ $isMobile }) => ($isMobile ? '100%' : '40px')};
-    height: ${({ $isMobile }) => ($isMobile ? '40px' : 'max-content')};
-    background: transparent linear-gradient(90deg, #E03A8B 9%, #C2388B 34%, #A63B8D 60%, #943C8D 83%, #8F3C8D 100%) 0% 0% no-repeat padding-box;
+    align-items: center;
+    width: ${({ $isMobile }) => ($isMobile ? '100%' : '50px')};
+    height: ${({ $isMobile }) => ($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;
     border-radius: ${({ $isMobile }) => ($isMobile ? '10px 10px 0 0' : '10px 0px 0px 10px')};
     padding: 10px;
     gap: 10px;
@@ -13,13 +14,14 @@ export const StyledCommandsPanel = styled.div `
 const TMCommandsPanel = ({ isMobile, items }) => (_jsx(StyledCommandsPanel, { "$isMobile": isMobile, children: items.map((iconProps, idx) => (_jsx("span", { style: {
             background: iconProps.selected ? 'white' : 'transparent',
             borderRadius: '6px',
-            color: iconProps.selected ? '#E03A8B' : 'white',
+            color: iconProps.selected ? '#005B97' : 'white',
             opacity: iconProps.disabled ? 0.4 : 1,
             cursor: iconProps.disabled ? 'not-allowed' : 'pointer',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            height: '24px',
-            width: '24px',
-        }, onClick: iconProps.disabled ? undefined : iconProps.onClick, children: iconProps.icon }, idx))) }));
+            height: '32px',
+            width: '32px',
+            margin: '0 auto',
+        }, onClick: iconProps.disabled ? undefined : iconProps.onClick, children: _jsx("span", { style: { fontSize: 24 }, children: iconProps.icon }) }, idx))) }));
 export default TMCommandsPanel;

package/package.json

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