@topconsultnpm/sdkui-react 6.20.0-dev1.2 → 6.20.0-dev1.20

package/lib/components/NewComponents/ContextMenu/TMContextMenu.js

@@ -14,7 +14,7 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
     const menuRef = useRef(null);
     const triggerRef = useRef(null);
     const submenuTimeoutRef = useRef(null);
-    const { openLeft, openUp } = useMenuPosition(menuRef, menuState.position);
+    const { openLeft, openUp, isCalculated } = useMenuPosition(menuRef, menuState.position);
     const handleClose = () => {
         setMenuState(prev => ({
             ...prev,
@@ -182,6 +182,6 @@ const TMContextMenu = ({ items, trigger = 'right', children }) => {
                     if (e.key === 'Enter' || e.key === ' ') {
                         handleClick(e);
                     }
-                }, role: "button", tabIndex: 0, style: { display: 'inline-block' }, children: children }), menuState.visible && (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { onClick: handleClose }), _jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: "\u2190" }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }))] }));
+                }, role: "button", tabIndex: 0, style: { display: 'inline-block' }, children: children }), menuState.visible && (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { onClick: handleClose }), _jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: "\u2190" }), _jsx(S.HeaderTitle, { children: currentParentName })] })), renderMenuItems(currentMenu, 0)] }), !isMobile && hoveredSubmenus.map((submenu, idx) => (_jsx(S.Submenu, { "$parentRect": submenu.parentRect, "$openUp": submenu.openUp, "data-submenu": "true", onMouseEnter: handleSubmenuMouseEnter, onMouseLeave: () => handleMouseLeave(submenu.depth), children: renderMenuItems(submenu.items, submenu.depth) }, `submenu-${submenu.depth}-${idx}`)))] }))] }));
 };
 export default TMContextMenu;

package/lib/components/NewComponents/ContextMenu/hooks.d.ts

@@ -5,6 +5,7 @@ interface Position {
     y: number;
 }
 export declare const useMenuPosition: (menuRef: React.RefObject<HTMLDivElement | null>, position: Position) => {
+    isCalculated: boolean;
     openLeft: boolean;
     openUp: boolean;
 };

package/lib/components/NewComponents/ContextMenu/hooks.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useLayoutEffect, useRef } from 'react';
 export const useIsMobile = () => {
     const [isMobile, setIsMobile] = useState(false);
     useEffect(() => {
@@ -31,9 +31,12 @@ export const useClickOutside = (callback) => {
 };
 export const useMenuPosition = (menuRef, position) => {
     const [adjustedPosition, setAdjustedPosition] = useState({ openLeft: false, openUp: false });
-    useEffect(() => {
-        if (!menuRef.current)
+    const [isCalculated, setIsCalculated] = useState(false);
+    useLayoutEffect(() => {
+        if (!menuRef.current) {
+            setIsCalculated(false);
             return;
+        }
         const menuRect = menuRef.current.getBoundingClientRect();
         const viewportWidth = window.innerWidth;
         const viewportHeight = window.innerHeight;
@@ -43,6 +46,7 @@ export const useMenuPosition = (menuRef, position) => {
             openLeft: spaceRight < menuRect.width + 20,
             openUp: spaceBottom < menuRect.height + 20,
         });
+        setIsCalculated(true);
     }, [position, menuRef]);
-    return adjustedPosition;
+    return { ...adjustedPosition, isCalculated };
 };

package/lib/components/NewComponents/ContextMenu/styles.d.ts

@@ -3,6 +3,7 @@ export declare const MenuContainer: import("styled-components/dist/types").IStyl
     $y: number;
     $openLeft: boolean;
     $openUp: boolean;
+    $isPositioned: boolean;
 }>> & string;
 export declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled?: boolean;
@@ -12,7 +13,9 @@ export declare const MenuItem: import("styled-components/dist/types").IStyledCom
 export declare const MenuItemContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const IconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export declare const MenuItemName: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const RightIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const RightIconButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}>, never>, never>> & string;
 export declare const SubmenuIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
     $isMobile?: boolean;
 }>> & string;

package/lib/components/NewComponents/ContextMenu/styles.js

@@ -36,6 +36,13 @@ export const MenuContainer = styled.div `
   animation: ${fadeIn} 0.15s ease-out;
   backdrop-filter: blur(10px);
   border: 1px solid rgba(0, 0, 0, 0.06);
+  opacity: ${props => props.$isPositioned ? 1 : 0};
+  transition: opacity 0.05s ease-in;
+
+  /* Reset color inheritance from parent with !important to override panel header styles */
+  & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+    color: #1a1a1a !important;
+  }
 
   [data-theme='dark'] & {
     background: #2a2a2a;
@@ -43,6 +50,10 @@ export const MenuContainer = styled.div `
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                 0 2px 8px rgba(0, 0, 0, 0.3);
   }
+
+  [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+    color: #e0e0e0 !important;
+  }
 `;
 export const MenuItem = styled.div `
   display: flex;
@@ -50,7 +61,6 @@ export const MenuItem = styled.div `
   justify-content: space-between;
   padding: 4px 12px;
   cursor: ${props => props.$disabled ? 'not-allowed' : 'pointer'};
-  opacity: ${props => props.$disabled ? 0.4 : 1};
   transition: all 0.15s ease;
   position: relative;
   user-select: none;
@@ -63,12 +73,26 @@ export const MenuItem = styled.div `
     padding-top: 8px;
   `}
 
+  /* Apply opacity only to direct children except right-icon-btn */
+  & > *:not(.right-icon-btn) {
+    opacity: ${props => props.$disabled ? 0.4 : 1};
+  }
+
+  /* Right icon button hidden by default, shown on hover */
+  & .right-icon-btn {
+    cursor: pointer !important;
+  }
+
   &:hover {
     ${props => !props.$disabled && `
       background: linear-gradient(90deg, #f0f7ff 0%, #e6f2ff 100%);
       color: #0066cc;
-      padding-left: 14px;
     `}
+    
+    /* Show right icon on hover */
+    & .right-icon-btn {
+      opacity: 1 !important;
+    }
   }
 
   &:active {
@@ -124,23 +148,23 @@ export const MenuItemName = styled.span `
   overflow-wrap: break-word;
   line-height: 1.4;
 `;
-export const RightIconButton = styled.button `
+export const RightIconButton = styled.button.attrs({
+    className: 'right-icon-btn'
+}) `
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: none;
-  cursor: pointer;
+  cursor: pointer !important;
   padding: 4px 8px;
   margin-left: 8px;
   border-radius: 6px;
-  color: inherit;
   font-size: 14px;
-  opacity: 0.6;
-  transition: all 0.15s ease;
+  opacity: 0 !important;
+  transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
 
   &:hover {
-    opacity: 1;
     background: rgba(0, 0, 0, 0.05);
     transform: scale(1.1);
   }
@@ -223,12 +247,21 @@ export const Submenu = styled.div `
     background: transparent;
   }
 
+  /* Reset color inheritance from parent with !important to override panel header styles */
+  & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+    color: #1a1a1a !important;
+  }
+
   [data-theme='dark'] & {
     background: #2a2a2a;
     border-color: rgba(255, 255, 255, 0.1);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                 0 2px 8px rgba(0, 0, 0, 0.3);
   }
+
+  [data-theme='dark'] & *:not(svg):not(.right-icon-btn):not(.right-icon-btn *) {
+    color: #e0e0e0 !important;
+  }
 `;
 export const MobileMenuHeader = styled.div `
   display: flex;

package/lib/components/NewComponents/FloatingMenuBar/TMFloatingMenuBar.js

@@ -4,7 +4,7 @@ import { ContextMenu } from '../ContextMenu';
 import Notification from '../Notification';
 import TMTooltip from '../../base/TMTooltip';
 import * as S from './styles';
-import { IconApply, IconMenuKebab, IconMenuVertical, IconSettings, IconStar } from '../../../helper';
+import { IconApply, IconMenuKebab, IconMenuVertical, IconPencil, IconPin } from '../../../helper';
 const IconDraggableDots = (props) => (_jsx("svg", { fontSize: 18, viewBox: "0 0 24 24", fill: "currentColor", height: "1em", width: "1em", ...props, children: _jsx("path", { d: "M9 3a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm10-18a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0zm0 9a2 2 0 11-4 0 2 2 0 014 0z" }) }));
 const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = 'floatingMenuBar-config', isConstrained = false, defaultPosition = { x: 100, y: 100 }, maxItems = 8, }) => {
     const loadConfig = () => {
@@ -60,7 +60,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
                 result.push({
                     id: itemId,
                     name: item.name,
-                    icon: item.icon || _jsx(IconStar, {}),
+                    icon: item.icon || _jsx(IconPin, {}),
                     onClick: item.onClick,
                     disabled: item.disabled,
                     isPinned: pinnedItemIds.has(itemId),
@@ -150,7 +150,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
                 const isInFloatingBar = currentItemIds.has(itemId) || currentItemNames.has(item.name);
                 const enhanced = {
                     ...item,
-                    rightIcon: item.onClick && !item.submenu ? (isInFloatingBar ? _jsx(IconStar, { color: "#FFD700" }) : _jsx(IconStar, {})) : undefined,
+                    rightIcon: item.onClick && !item.submenu ? (isInFloatingBar ? _jsx(IconPin, { color: "#e12a2a" }) : _jsx(IconPin, {})) : undefined,
                     onRightIconClick: item.onClick && !item.submenu ? () => {
                         if (flatItem) {
                             togglePin(flatItem);
@@ -347,7 +347,7 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
         setState(s => ({ ...s, draggedItemIndex: null }));
         setDragOverIndex(null);
     };
-    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": state.position.x, "$y": state.position.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, children: [_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, children: _jsx(IconDraggableDots, {}) }), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ? _jsx(IconApply, {}) : _jsx(IconSettings, {}) }), state.items.map((item, index) => {
+    return (_jsxs(_Fragment, { children: [_jsx(S.Overlay, { "$visible": state.isConfigMode }), _jsxs(S.FloatingContainer, { ref: floatingRef, "$x": state.position.x, "$y": state.position.y, "$orientation": state.orientation, "$isDragging": state.isDragging, "$isConfigMode": state.isConfigMode, "$isConstrained": isConstrained, children: [_jsx(S.GripHandle, { "$orientation": state.orientation, onMouseDown: handleMouseDown, children: _jsx(IconDraggableDots, {}) }), _jsx(S.Separator, { "$orientation": state.orientation }), state.items.map((item, index) => {
                         // Get current state (disabled and onClick) from contextMenuItems
                         const currentState = getCurrentItemState(item.name);
                         const isDisabled = currentState.disabled || false;
@@ -365,6 +365,6 @@ const TMFloatingMenuBar = ({ containerRef, contextMenuItems = [], storageKey = '
                                                 currentOnClick();
                                             }
                                         }, disabled: isDisabled, children: item.icon }) })), state.isConfigMode && (_jsx(S.RemoveButton, { onClick: () => removeItem(item.id), children: "\u00D7" }))] }, item.id));
-                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: enhancedContextMenuItems(), trigger: "left", children: _jsx(S.MenuButton, { children: _jsx(IconMenuVertical, {}) }) }, Array.from(pinnedItemIds).join(','))), !state.isConfigMode && (_jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }))] }), showMaxItemsNotification && (_jsx("div", { style: { position: 'fixed', top: '20px', left: '50%', transform: 'translateX(-50%)', zIndex: 100001 }, children: _jsx(Notification, { title: "Maximum Items Reached", message: `You have reached the maximum number of pinned items (${maxItems}). Please unpin an item before adding a new one.`, mode: "warning", position: "top-center", duration: 4000, closable: true, stopOnMouseEnter: true, hasProgress: true, onClose: () => setShowMaxItemsNotification(false) }) }))] }));
+                    }), !state.isConfigMode && contextMenuItems.length > 0 && (_jsx(ContextMenu, { items: enhancedContextMenuItems(), trigger: "left", children: _jsx(S.ContextMenuButton, { children: _jsx(IconMenuVertical, {}) }) }, Array.from(pinnedItemIds).join(','))), _jsx(S.ConfigButton, { onClick: toggleConfigMode, "$isActive": state.isConfigMode, children: state.isConfigMode ? _jsx(IconApply, {}) : _jsx(IconPencil, {}) }), !state.isConfigMode && (_jsx(S.OrientationToggle, { "$orientation": state.orientation, onClick: toggleOrientation, children: _jsx(IconMenuKebab, {}) }))] }), showMaxItemsNotification && (_jsx("div", { style: { position: 'fixed', top: '20px', left: '50%', transform: 'translateX(-50%)', zIndex: 100001 }, children: _jsx(Notification, { title: "Maximum Items Reached", message: `You have reached the maximum number of pinned items (${maxItems}). Please unpin an item before adding a new one.`, mode: "warning", position: "top-center", duration: 4000, closable: true, stopOnMouseEnter: true, hasProgress: true, onClose: () => setShowMaxItemsNotification(false) }) }))] }));
 };
 export default TMFloatingMenuBar;

package/lib/components/NewComponents/FloatingMenuBar/styles.d.ts

@@ -21,12 +21,20 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
 export declare const GripHandle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $orientation: "horizontal" | "vertical";
 }>> & string;
+export declare const Separator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $orientation: "horizontal" | "vertical";
+}>> & string;
 export declare const MenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $isActive?: boolean;
 }>> & string;
 export declare const ConfigButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $isActive?: boolean;
 }>> & string;
+export declare const ContextMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$isActive"> & {
+    $isActive?: boolean;
+}, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, never>> & string;
 export declare const RemoveButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const OrientationToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
     $orientation: "horizontal" | "vertical";

package/lib/components/NewComponents/FloatingMenuBar/styles.js

@@ -55,7 +55,7 @@ export const FloatingContainer = styled.div.attrs(props => ({
   transition: none;
 
   &:hover {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #0071BC 0%, #1B1464 100%);
     border: 1px solid #667eea;
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
                 0 6px 16px rgba(0, 0, 0, 0.2);
@@ -98,6 +98,13 @@ export const GripHandle = styled.div `
     height: 14px;
   }
 `;
+export const Separator = styled.div `
+  background: rgba(255, 255, 255, 0.25);
+  width: ${props => props.$orientation === 'horizontal' ? '1px' : '100%'};
+  height: ${props => props.$orientation === 'horizontal' ? '24px' : '1px'};
+  margin: ${props => props.$orientation === 'horizontal' ? '0 4px' : '4px 0'};
+  flex-shrink: 0;
+`;
 export const MenuButton = styled.button `
   display: flex;
   align-items: center;
@@ -110,36 +117,35 @@ export const MenuButton = styled.button `
   color: white;
   font-size: 16px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background 0.2s ease;
   position: relative;
 
   &:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
   }
 
   &:active:not(:disabled) {
-    transform: scale(0.95);
+    opacity: 0.8;
   }
 
   &:disabled {
-    opacity: 0.3;
+    opacity: 0.5;
     cursor: not-allowed;
-    background: rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.4);
+    color: rgba(255, 255, 255, 0.6);
   }
 
   svg {
     width: 18px;
     height: 18px;
+    transform: translateY(2px);
   }
 `;
 export const ConfigButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
+  width: 28px;
+  height: 28px;
   background: ${props => props.$isActive
     ? 'rgba(0, 0, 0, 0.2)'
     : 'rgba(0, 0, 0, 0.1)'};
@@ -148,9 +154,9 @@ export const ConfigButton = styled.button `
     : 'rgba(255, 255, 255, 0.15)'};
   border-radius: 8px;
   color: white;
-  font-size: 16px;
+  font-size: 14px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: background 0.2s ease, border-color 0.2s ease;
   position: relative;
 
   &:hover {
@@ -158,16 +164,20 @@ export const ConfigButton = styled.button `
     ? 'rgba(0, 0, 0, 0.25)'
     : 'rgba(0, 0, 0, 0.15)'};
     border-color: rgba(255, 255, 255, 0.35);
-    transform: scale(1.05);
   }
 
   &:active {
-    transform: scale(0.95);
+    opacity: 0.8;
   }
 
   svg {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
+  }
+`;
+export const ContextMenuButton = styled(MenuButton) `
+  svg {
+    transform: translateY(0);
   }
 `;
 export const RemoveButton = styled.button `

package/lib/components/base/TMAccordion.js

@@ -47,12 +47,12 @@ const StyledGroupTemplate = styled.div `
     &::after {
         content: '';
         display: block;
-        width: 90%;
+        width: calc(100% - 35px);
         margin: 0 auto;
         border-bottom: 1px solid #00A99D;
         margin-top: 8px;
         position: absolute;
-        left: 5%;
+        left: 35px;
         bottom: 0;
     }
 `;

package/lib/components/base/TMCustomButton.js

@@ -8,7 +8,6 @@ const IframeContainer = styled.div `
   display: flex;
   height: 100%;
   flex-direction: column;
-  padding-left: 15px;
 `;
 const StyledIframe = styled.iframe `
   border: none;

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

@@ -39,8 +39,8 @@ export interface TMDataGridProps<T> extends IDataGridOptions {
     showFilterPanel?: boolean;
     /** Show the load panel */
     showLoadPanel?: boolean;
-    /** Show the column chooser */
-    showColumnChooser?: boolean;
+    /** Show the header column chooser in context menu */
+    showHeaderColumnChooser?: boolean;
     /** Show the search panel */
     showSearchPanel?: boolean;
     /** Show the group panel */

package/lib/components/base/TMDataGrid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail } from 'devextreme-react/data-grid';
+import DataGrid, { Column, HeaderFilter, Selection, Scrolling, LoadPanel, SearchPanel, Pager, Sorting, Paging, FilterPanel, ColumnChooser, Grouping, GroupPanel, Summary, Editing, FilterRow, StateStoring, RowDragging, MasterDetail, Position, ColumnChooserSearch, ColumnChooserSelection } from 'devextreme-react/data-grid';
 import DataSource from 'devextreme/data/data_source';
 import { IconAll, IconSelected, IconVisible, SDKUI_Globals, SDKUI_Localizator } from '../../helper';
 import TMCounterContainer, { CounterItemKey } from './TMCounterContainer';
@@ -16,9 +16,9 @@ const TMDataGrid = React.forwardRef((props, ref) => {
     // main properties
     keyExpr = 'id', dataSource, focusedRowEnabled = true, hoverStateEnabled = true, focusedRowKey, selectedRowKeys = [], 
     // custom options
-    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusStarting = false, counterConfig = { show: false, items: new Map() }, onHasFiltersChange, 
+    dataColumns = [], pageSize = TMDataGridPageSize.Large, showHeaderFilter = true, showFilterPanel = true, showHeaderColumnChooser = false, showLoadPanel = true, showSearchPanel = true, searchPanelToolbarPosition = 'before', searchPanelFocusStarting = false, counterConfig = { show: false, items: new Map() }, onHasFiltersChange, 
     // events and callbacks
-    onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onCellDblClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, onKeyDown, scrolling = { mode: 'standard', useNative: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1 }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, columnChooser, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
+    onSelectionChanged, onFocusedRowChanged, onRowDblClick, onRowClick, onCellClick, onCellDblClick, onOptionChanged, onContentReady, onContextMenuPreparing, onInitialized, onEditorPreparing, onCellPrepared, onRowPrepared, onRowUpdating, onRowExpanded, onRowCollapsed, onRowUpdated, onSaved, onEditCanceled, onEditingStart, onEditingChange, customizeColumns, onKeyDown, scrolling = { mode: 'standard', useNative: SDKUI_Globals.userSettings?.themeSettings.gridSettings.useNativeScrollbar === 1 }, paging = { enabled: true, pageSize: pageSize }, pager = { visible: true, showInfo: true, showNavigationButtons: true }, selection = { mode: 'multiple', showCheckBoxesMode: "always", selectAllMode: "allPages" }, sorting, summary, stateStoring, grouping, groupPanel, filterRow, headerFilter, editing, rowDragging, masterDetail, 
     // other properties
     disabled = false, autoNavigateToFocusedRow = true, columnResizingMode = 'widget', columnHidingEnabled = true, columnAutoWidth = true, allowColumnResizing = true, allowColumnReordering = true, showBorders = true, showRowLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showRowLines === 1, showColumnLines = SDKUI_Globals.userSettings?.themeSettings.gridSettings.showColumnLines === 1, showColumnHeaders = true, rowAlternationEnabled = false, wordWrapEnabled = false, noDataText, 
     // styles
@@ -146,7 +146,18 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                 e.items = [...updatedContextMenuItems];
             }
         }
-    }, [updateContextMenuItems, onContextMenuPreparing]);
+        // Add column chooser to header context menu
+        if (e.target === 'header' && showHeaderColumnChooser) {
+            e.items = e.items || [];
+            e.items.push({
+                text: SDKUI_Localizator.ShowColumnSelection,
+                icon: 'columnchooser',
+                onItemClick: () => {
+                    internalRef.current?.instance().showColumnChooser();
+                }
+            });
+        }
+    }, [updateContextMenuItems, onContextMenuPreparing, showHeaderColumnChooser]);
     // Handle toolbar preparation, especially for the search panel
     const onToolbarPreparingCallback = useCallback((e) => {
         if (e === undefined || e.toolbarOptions === undefined || e.toolbarOptions.items === undefined)
@@ -223,7 +234,7 @@ const TMDataGrid = React.forwardRef((props, ref) => {
                     // other properties
                     disabled: disabled, autoNavigateToFocusedRow: autoNavigateToFocusedRow, focusedRowKey: focusedRowKey, columnHidingEnabled: columnHidingEnabled, columnResizingMode: columnResizingMode, columnAutoWidth: columnAutoWidth, allowColumnResizing: allowColumnResizing, allowColumnReordering: allowColumnReordering, showBorders: showBorders, showRowLines: showRowLines, showColumnLines: showColumnLines, showColumnHeaders: showColumnHeaders, rowAlternationEnabled: rowAlternationEnabled, wordWrapEnabled: wordWrapEnabled, noDataText: noDataText, 
                     // styles
-                    width: width, height: height, style: { userSelect: 'none' }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), columnChooser && _jsx(ColumnChooser, { ...columnChooser }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) })] });
+                    width: width, height: height, style: { userSelect: 'none' }, children: [dataColumns.map((column, index) => (_jsx(Column, { ...column }, column.caption + index.toString()))), sorting && _jsx(Sorting, { ...sorting }), selection && _jsx(Selection, { ...selection }), scrolling && _jsx(Scrolling, { ...scrolling }), summary && _jsx(Summary, { ...summary }), showHeaderFilter && _jsx(HeaderFilter, { visible: true, ...headerFilter }), rowDragging && _jsx(RowDragging, { ...rowDragging }), filterRow && _jsx(FilterRow, { ...filterRow }), showFilterPanel && _jsx(FilterPanel, { visible: true }), showHeaderColumnChooser && _jsxs(ColumnChooser, { height: "400px", enabled: !showHeaderColumnChooser, mode: "select", children: [_jsx(Position, { my: "center", at: "center", of: window }), _jsx(ColumnChooserSearch, { enabled: true }), _jsx(ColumnChooserSelection, { allowSelectAll: false, selectByClick: true, recursive: true })] }), stateStoring && _jsx(StateStoring, { ...stateStoring }), groupPanel && _jsx(GroupPanel, { ...groupPanel }), _jsx(Grouping, { contextMenuEnabled: true, ...grouping }), _jsx(LoadPanel, { enabled: showLoadPanel }), _jsx(SearchPanel, { visible: showSearchPanel, searchVisibleColumnsOnly: true, highlightSearchText: true }), editing && _jsx(Editing, { ...editing }), paging && _jsx(Paging, { ...paging }), pager && _jsx(Pager, { ...pager, visible: totalRecordCount > pageSize }), masterDetail && _jsx(MasterDetail, { ...masterDetail })] }) }), counterConfig.show && _jsx("div", { style: { width: "100%", height: "25px", display: "flex", alignItems: "center", gap: "15px", backgroundColor: "#e0e0e0" }, children: _jsx(TMCounterContainer, { items: counterValues, bgColorContainer: counterConfig.bgColorContainer, bgColorItem: counterConfig.bgColorItem, hoverColorItem: counterConfig.hoverColorItem, textColorItem: counterConfig.textColorItem }) })] });
 });
 export default TMDataGrid;
 const getRecordCount = (dataSource) => {

package/lib/components/editors/TMHtmlEditor.js

@@ -170,7 +170,7 @@ const TMHtmlEditor = (props) => {
                         justifyContent: 'flex-end',
                         fontSize: 12,
                         color: '#6c757d',
-                        marginTop: 4,
+                        marginTop: showInfoIcon ? 0 : 4,
                         gap: 4,
                     }, children: [`${Math.max(charactersRemaining, 0)} ${SDKUI_Localizator.CharactersRemaining}`, showInfoIcon && (_jsx(TMTooltip, { content: 'Markup HTML', children: _jsx("span", { className: "dx-icon-codeblock", style: { fontSize: 22, cursor: 'pointer' }, onClick: () => {
                                     TMMessageBoxManager.show({

package/lib/components/editors/TMMetadataValues.js

@@ -389,17 +389,35 @@ const TMMetadataValues = ({ showCheckBoxes = ShowCheckBoxesMode.Never, checkPerm
         return (_jsxs("div", { style: { width: '100%' }, children: [draftData.length > 0 && _jsx(TMAccordion, { title: SDKUI_Localizator.Draft, children: draftData.map(item => renderMetadataItem(item, isReadOnly)) }), checkOutData.length > 0 && _jsx(TMAccordion, { title: `${SDKUI_Localizator.CheckIn}/${SDKUI_Localizator.CheckOut}`, children: checkOutData.map(item => renderMetadataItem(item, true)) })] }));
     }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
     const layoutChronology = useMemo(() => {
-        const chronologyData = [];
+        // Definiamo l'ordine desiderato: Version, Tipo, Dimensione, Autore, Data Ultima modifica
+        const desiredChronologyOrder = [
+            ChronologyMIDs.Ver,
+            SystemMIDsAsNumber.FileExt,
+            SystemMIDsAsNumber.FileSize,
+            ChronologyMIDs.AuthorID,
+            ChronologyMIDs.CheckInTime,
+        ];
+        const tempChronologyDataMap = {};
         metadataValues.forEach(item => {
             switch (item.md?.id) {
                 case ChronologyMIDs.Ver:
                 case ChronologyMIDs.AuthorID:
-                    chronologyData.push(item);
+                case ChronologyMIDs.CheckInTime:
+                case SystemMIDsAsNumber.FileExt:
+                case SystemMIDsAsNumber.FileSize:
+                    tempChronologyDataMap[item.md.id] = item;
                     break;
                 default:
                     break;
             }
         });
+        // Visualizziamo nell'ordine desiderato
+        const chronologyData = [];
+        desiredChronologyOrder.forEach(id => {
+            if (tempChronologyDataMap[id]) {
+                chronologyData.push(tempChronologyDataMap[id]);
+            }
+        });
         return (_jsx("div", { style: { width: '100%' }, children: chronologyData.length > 0 && chronologyData.map(item => renderMetadataItem(item, isReadOnly)) }));
     }, [metadataValues, showCheckBoxes, showNullValueCheckBoxes, isReadOnly, dynDataListsToBeRefreshed, validationItems, selectedMID, isOpenDistinctValues, openChooserBySingleClick, metadataValuesOrig]);
     const layoutDsAttachs = useMemo(() => {

package/lib/components/features/documents/TMDcmtBlog.d.ts

@@ -1,16 +1,10 @@
 import React from 'react';
 import { HomeBlogPost, TaskDescriptor } from '@topconsultnpm/sdk-ts';
 interface ITMDcmtBlogProps {
-    blogsDatasource: HomeBlogPost[];
-    setBlogsDatasource: (posts: HomeBlogPost[]) => void;
-    hasLoadedDataOnce: boolean;
-    setHasLoadedDataOnce: (loaded: boolean) => void;
-    lastLoadedDid: number | undefined;
-    setLastLoadedDid: (did: number | undefined) => void;
     tid: number | undefined;
     did: number | undefined;
-    fetchBlogDataAsync: (tid: number | undefined, did: number | undefined) => Promise<void>;
     isVisible?: boolean;
+    fetchBlogDataTrigger?: number;
     allTasks?: Array<TaskDescriptor>;
     getAllTasks?: () => Promise<void>;
     deleteTaskByIdsCallback?: (deletedTaskIds: Array<number>) => Promise<void>;

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

@@ -6,13 +6,40 @@ import { TMNothingToShow } from './TMDcmtPreview';
 import { IconBoard, SDKUI_Localizator } from '../../../helper';
 import TMBlogCommentForm from '../blog/TMBlogCommentForm';
 import TMBlogsPost from '../../grids/TMBlogsPost';
-const TMDcmtBlog = ({ blogsDatasource, setBlogsDatasource, hasLoadedDataOnce, setHasLoadedDataOnce, lastLoadedDid, setLastLoadedDid, tid, did, fetchBlogDataAsync, isVisible, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
+import TMSpinner from '../../base/TMSpinner';
+import { TMExceptionBoxManager } from '../../base/TMPopUp';
+const TMDcmtBlog = ({ tid, did, isVisible, fetchBlogDataTrigger, allTasks = [], getAllTasks, deleteTaskByIdsCallback, addTaskCallback, editTaskCallback, handleNavigateToWGs, handleNavigateToDossiers }) => {
+    const [blogsDatasource, setBlogsDatasource] = useState([]);
+    const [hasLoadedDataOnce, setHasLoadedDataOnce] = useState(false); //traccia se *qualsiasi* dato è stato caricato per la prima volta
+    const [lastLoadedDid, setLastLoadedDid] = useState(undefined); // `lastLoadedDid` tiene traccia dell'ultimo `did` per cui abbiamo caricato i dati
     // State to manage show comment form selected file
     const [showCommentForm, setShowCommentForm] = useState(false);
     const [externalBlogPost, setExternalBlogPost] = useState(undefined);
+    const fetchBlogDataAsync = useCallback(async (tid, did) => {
+        try {
+            TMSpinner.show({ description: 'Caricamento - Bacheca...' });
+            const res = await SDK_Globals.tmSession?.NewSearchEngine().BlogRetrieveAsync(tid, did);
+            setBlogsDatasource(res ?? []);
+            setHasLoadedDataOnce(true);
+            setLastLoadedDid(did);
+        }
+        catch (e) {
+            let err = e;
+            TMExceptionBoxManager.show({ exception: err });
+        }
+        finally {
+            TMSpinner.hide();
+        }
+    }, []);
     const showCommentFormCallback = useCallback(() => {
         setShowCommentForm(true);
     }, []);
+    // useEffect per triggerare il fetch dall'esterno tramite props
+    useEffect(() => {
+        if (fetchBlogDataTrigger !== undefined && fetchBlogDataTrigger > 0) {
+            fetchBlogDataAsync(tid, did);
+        }
+    }, [fetchBlogDataTrigger, fetchBlogDataAsync, tid, did]);
     useEffect(() => {
         if (!tid || !did) {
             setBlogsDatasource([]);
@@ -21,7 +48,7 @@ const TMDcmtBlog = ({ blogsDatasource, setBlogsDatasource, hasLoadedDataOnce, se
         }
         // Condizione per eseguire il fetch:
         // 1. Il pannello è visibile
-        // 2. E (non abbiamo ancora caricato dati O il `did` è cambiato rispetto all'ultima volta)
+        // 2. E (non abbiamo ancora caricato dati o il `did` è cambiato rispetto all'ultima volta)
         const shouldFetch = isVisible && (!hasLoadedDataOnce || did !== lastLoadedDid);
         // Esegui la chiamata API solo se il pannello è visibile E i dati non sono già stati caricati
         // O, se vuoi ricaricare ogni volta che diventa visibile (ma è meno efficiente per "pesante")