@topconsultnpm/sdkui-react 6.20.0-dev1.11 → 6.20.0-dev1.110

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

@@ -10,6 +10,7 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
     $isDragging: boolean;
     $isConfigMode: boolean;
     $isConstrained?: boolean;
+    $bgColor?: string;
 }>, {
     $x: number;
     $y: number;
@@ -17,22 +18,37 @@ export declare const FloatingContainer: import("styled-components/dist/types").I
     $isDragging: boolean;
     $isConfigMode: boolean;
     $isConstrained?: boolean;
+    $bgColor?: string;
 }>> & string;
 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 ItemSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $orientation: "horizontal" | "vertical";
+    $isConfigMode: boolean;
+}>> & 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>, {
+export declare const ConfigButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ApplyButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & 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;
-}>> & string;
+}, "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 AddButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 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";
-}>> & string;
+export declare const UndoButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const DraggableItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $isDragging: boolean;
     $isDragOver: boolean;
 }>> & string;
 export declare const ContextMenuWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ButtonGroup: 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;

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

@@ -37,38 +37,35 @@ export const FloatingContainer = styled.div.attrs(props => ({
     },
 })) `
   position: ${props => props.$isConstrained ? 'absolute' : 'fixed'};
-  z-index: ${props => props.$isConfigMode ? 9999 : 10000};
+  z-index: ${props => props.$isConfigMode ? 9999 : 1500};
   display: flex;
   flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : 'column'};
   align-items: center;
-  background: ${props => props.$isDragging || props.$isConfigMode
-    ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-    : 'rgba(102, 126, 234, 0.9)'};
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: ${props => props.$bgColor || 'linear-gradient(135deg, #0071BC 0%, #1B1464 100%)'};
+  border: 1px solid #667eea;
   border-radius: 14px;
   padding: 6px;
   gap: 3px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
+              0 6px 16px rgba(0, 0, 0, 0.2);
   cursor: ${props => props.$isDragging ? 'grabbing' : 'default'};
   user-select: none;
   animation: ${props => props.$isConfigMode && css `${shake} 0.3s ease-in-out`};
   transition: none;
 
   &:hover {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: ${props => props.$bgColor || '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);
   }
 
   [data-theme='dark'] & {
-    background: ${props => props.$isDragging || props.$isConfigMode
-    ? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'
-    : 'rgba(26, 26, 46, 0.9)'};
-    border-color: rgba(255, 255, 255, 0.1);
+    background: ${props => props.$bgColor || 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'};
+    border: 1px solid #1a1a2e;
     
     &:hover {
-      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      background: ${props => props.$bgColor || 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'};
       border: 1px solid #1a1a2e;
     }
   }
@@ -77,7 +74,7 @@ export const GripHandle = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: ${props => props.$orientation === 'horizontal' ? '10px 6px' : '6px 10px'};
+  padding: ${props => props.$orientation === 'horizontal' ? '6px 4px' : '4px 6px'};
   cursor: grab;
   color: rgba(255, 255, 255, 0.7);
   transition: all 0.2s ease;
@@ -98,35 +95,79 @@ 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' ? '20px' : '1px'};
+  margin: ${props => props.$orientation === 'horizontal' ? '0 4px' : '4px 0'};
+  flex-shrink: 0;
+`;
+export const ItemSeparator = styled.div `
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+  
+  ${props => props.$isConfigMode ? `
+    /* Edit mode: look exactly like MenuButton */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    background: transparent;
+    border-radius: 8px;
+    cursor: grab;
+    position: relative;
+    
+    &::before {
+      content: '';
+      background: rgba(255, 255, 255, 0.25);
+      width: ${props.$orientation === 'horizontal' ? '2px' : '100%'};
+      height: ${props.$orientation === 'horizontal' ? '18px' : '2px'};
+      border-radius: 1px;
+    }
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+    
+    &:active {
+      opacity: 0.8;
+    }
+  ` : `
+    /* Normal mode: simple line with tight spacing */
+    background: rgba(255, 255, 255, 0.25);
+    width: ${props.$orientation === 'horizontal' ? '1px' : '100%'};
+    height: ${props.$orientation === 'horizontal' ? '20px' : '1px'};
+    margin: ${props.$orientation === 'horizontal' ? '0 2px' : '2px 0'};
+  `}
+`;
 export const MenuButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
-  background: transparent;
+  width: 30px;
+  height: 30px;
+  background: ${props => props.$isActive ? 'rgba(102, 179, 255, 0.3)' : 'transparent'};
   border: none;
   border-radius: 8px;
   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);
+    background: ${props => props.$isActive ? 'rgba(102, 179, 255, 0.4)' : 'rgba(255, 255, 255, 0.2)'};
   }
 
   &:active:not(:disabled) {
-    transform: scale(0.95);
+    opacity: 0.8;
   }
 
   &:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-    background: rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.4);
+    opacity: 0.5;
+    cursor: default;
+    color: rgba(255, 255, 255, 0.6);
   }
 
   svg {
@@ -138,37 +179,137 @@ export const ConfigButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
-  background: ${props => props.$isActive
-    ? 'rgba(0, 0, 0, 0.2)'
-    : 'rgba(0, 0, 0, 0.1)'};
-  border: 1px solid ${props => props.$isActive
-    ? 'rgba(255, 255, 255, 0.3)'
-    : 'rgba(255, 255, 255, 0.15)'};
+  width: 21px;
+  height: 21px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 4px;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.9);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+export const ApplyButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: rgba(34, 197, 94, 1);
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 3px;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(34, 197, 94, 1);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.9);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+export const CloseButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: rgba(239, 68, 68, 1);
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 3px;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(239, 68, 68, 1);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.9);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+export const ContextMenuButton = styled(MenuButton) `
+  svg {
+    transform: translateY(0);
+  }
+`;
+export const AddButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px dashed rgba(255, 255, 255, 0.4);
   border-radius: 8px;
   color: white;
-  font-size: 16px;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 0;
   cursor: pointer;
   transition: all 0.2s ease;
   position: relative;
+  margin-right: 6px;
+  margin-left: 8px;
+  padding: 0;
 
   &:hover {
-    background: ${props => props.$isActive
-    ? 'rgba(0, 0, 0, 0.25)'
-    : 'rgba(0, 0, 0, 0.15)'};
-    border-color: rgba(255, 255, 255, 0.35);
-    transform: scale(1.05);
+    background: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.6);
   }
 
   &:active {
     transform: scale(0.95);
   }
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
 `;
 export const RemoveButton = styled.button `
   position: absolute;
@@ -177,55 +318,60 @@ export const RemoveButton = styled.button `
   width: 20px;
   height: 20px;
   background: #ef4444;
-  border: 2px solid white;
+  border: none;
   border-radius: 50%;
   color: white;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: bold;
+  line-height: 0;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0;
   transition: all 0.2s ease;
   z-index: 1;
 
   &:hover {
     background: #dc2626;
-    transform: scale(1.15);
   }
 
   &:active {
-    transform: scale(0.9);
+    background: #b91c1c;
   }
 `;
-export const OrientationToggle = styled.button `
+export const UndoButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   background: transparent;
   border: none;
   border-radius: 4px;
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(249, 115, 22, 1);
   font-size: 10px;
   cursor: pointer;
   transition: all 0.2s ease;
   padding: 2px;
-  transform: ${props => props.$orientation === 'vertical' ? 'rotate(90deg)' : 'rotate(0deg)'};
 
-  &:hover {
+  &:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
+    color: rgba(249, 115, 22, 1);
   }
 
-  &:active {
-    transform: ${props => props.$orientation === 'vertical' ? 'rotate(90deg) scale(0.9)' : 'scale(0.9)'};
+  &:active:not(:disabled) {
+    transform: scale(0.9);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
   }
 
   svg {
-    width: 10px;
-    height: 10px;
+    width: 16px;
+    height: 16px;
   }
 `;
 export const DraggableItem = styled.div `
@@ -265,3 +411,9 @@ export const ContextMenuWrapper = styled.div `
   position: static;
   display: contents;
 `;
+export const ButtonGroup = styled.div `
+  display: flex;
+  flex-direction: ${props => props.$orientation === 'vertical' ? 'column' : 'row'};
+  align-items: center;
+  gap: 0;
+`;

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

@@ -6,15 +6,21 @@ export interface TMFloatingMenuItem {
     onClick: () => void;
     disabled?: boolean;
     isPinned?: boolean;
-    originalMenuItem?: TMContextMenuItemProps;
+    isSeparator?: boolean;
+    isToggle?: boolean;
+    staticItem?: React.ReactNode;
 }
 export interface TMFloatingMenuBarProps {
     containerRef: React.RefObject<HTMLElement | null>;
     contextMenuItems?: TMContextMenuItemProps[];
-    storageKey?: string;
     isConstrained?: boolean;
     defaultPosition?: Position;
     maxItems?: number;
+    contextMenuDefaultPinnedIds?: string[];
+    defaultOrientation?: 'horizontal' | 'vertical';
+    defaultItems?: TMFloatingMenuItem[];
+    disbaleConfigMode?: boolean;
+    bgColor?: string;
 }
 export interface Position {
     x: number;

package/lib/components/base/TMAccordionNew.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
-import { ContextMenu, LoadIndicator } from 'devextreme-react';
+import { LoadIndicator } from 'devextreme-react';
 import { LocalStorageService } from '@topconsultnpm/sdk-ts';
 import TMTooltip from './TMTooltip';
+import TMContextMenu from '../NewComponents/ContextMenu/TMContextMenu';
 const Container = styled.div `
     width: 100%;
     height: 100%;
@@ -154,12 +155,15 @@ const DEFAULT_COLORS = ['#339af0', '#fa5252', '#40c057', '#f59f00', '#e64980', '
 const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChange }) => {
     const [openAccordions, setOpenAccordions] = useState({});
     const [isInitialized, setIsInitialized] = useState(false);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [contextMenuItems, setContextMenuItems] = useState([]);
     const [focusedItem, setFocusedItem] = useState(undefined);
+    // Item context menu state
+    const [itemContextMenuVisible, setItemContextMenuVisible] = useState(false);
+    const [itemContextMenuPosition, setItemContextMenuPosition] = useState({ x: 0, y: 0 });
+    const [itemContextMenuItems, setItemContextMenuItems] = useState([]);
+    // Header context menu state
     const [headerContextGroupId, setHeaderContextGroupId] = useState(null);
     const [headerContextVisible, setHeaderContextVisible] = useState(false);
-    const [headerContextPosition, setHeaderContextPosition] = useState(null);
+    const [headerContextPosition, setHeaderContextPosition] = useState({ x: 0, y: 0 });
     useEffect(() => {
         const initialState = {};
         if (!groups || groups.length === 0) {
@@ -240,11 +244,21 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
         if (menuItems.length === 0) {
             return;
         }
-        setAnchorEl(event.currentTarget);
-        setContextMenuItems(menuItems);
+        // Convert to TMContextMenuItemProps format
+        const convertedItems = menuItems.map((mi) => ({
+            name: mi.text || mi.name || '',
+            // Only pass icon if it's a React element, not a string (DevExtreme used string icons)
+            icon: typeof mi.icon === 'string' ? undefined : mi.icon,
+            disabled: mi.disabled,
+            onClick: mi.onClick,
+            submenu: mi.items || mi.submenu,
+        }));
+        setItemContextMenuPosition({ x: event.clientX, y: event.clientY });
+        setItemContextMenuItems(convertedItems);
+        setItemContextMenuVisible(true);
     };
     const closeContextMenu = useCallback(() => {
-        setAnchorEl(null);
+        setItemContextMenuVisible(false);
     }, []);
     const handleHeaderContextMenu = (event, groupId) => {
         event.preventDefault();
@@ -260,12 +274,11 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
     };
     const closeHeaderContextMenu = useCallback(() => {
         setHeaderContextVisible(false);
-        setHeaderContextPosition(null);
         setHeaderContextGroupId(null);
     }, []);
     const headerContextMenuItems = headerContextGroupId ? [
         {
-            text: openAccordions[headerContextGroupId] ? 'Collassa' : 'Espandi',
+            name: openAccordions[headerContextGroupId] ? 'Collassa' : 'Espandi',
             onClick: () => {
                 toggleAccordion(headerContextGroupId);
                 closeHeaderContextMenu();
@@ -295,19 +308,19 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
         const color = getGroupColor(group, index);
         const isOpen = openAccordions[group.id] ?? true;
         if (group.customComponent) {
-            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen && (_jsx(CustomComponentContainer, { children: group.customComponent }))] }, group.id));
+            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), isOpen && (_jsx(CustomComponentContainer, { children: group.customComponent }))] }, group.id));
         }
         if (!group.dataSource || group.dataSource.length === 0)
             return null;
         if (!group.renderItem) {
-            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": 100, children: _jsxs(ErrorMessage, { children: ["\u26A0\uFE0F renderItem function is required for \"", group.title, "\" group"] }) })] }, group.id));
+            return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": 100, children: _jsxs(ErrorMessage, { children: ["\u26A0\uFE0F renderItem function is required for \"", group.title, "\" group"] }) })] }, group.id));
         }
         const itemHeight = group.itemHeight || 80;
         const maxHeight = group.dataSource.length * itemHeight + 20;
-        return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": maxHeight, children: _jsx(ItemsList, { children: group.dataSource.map((item, itemIndex) => {
+        return (_jsxs(AccordionItem, { children: [_jsxs(AccordionHeader, { id: `accordion-header-${group.id}`, "$color": color, "$isOpen": isOpen, onClick: (e) => handleHeaderClick(e, group.id), onContextMenu: (e) => handleHeaderContextMenu(e, group.id), children: [_jsxs(AccordionTitle, { children: [group.icon, _jsx(TitleText, { children: group.title })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px' }, children: [renderBadges(group, color), _jsx(ToggleIcon, { "$isOpen": isOpen, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4 6L8 10L12 6", stroke: "#495057", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), _jsx(AccordionContent, { "$isOpen": isOpen, "$maxHeight": maxHeight, children: _jsx(ItemsList, { children: group.dataSource.map((item, itemIndex) => {
                             const isSelected = selectedItem === item;
                             const isFocused = focusedItem === item;
-                            return (_jsx(ListItem, { "$isSelected": isSelected, "$color": color, onClick: () => handleItemClick(item, group), onDoubleClick: () => handleItemDoubleClick(item, group), onMouseEnter: () => setFocusedItem(item), onMouseLeave: () => setFocusedItem(undefined), onContextMenu: (e) => handleContextMenu(e, item, group), children: group.renderItem(item, isSelected, isFocused, color) }, itemIndex * 2));
+                            return (_jsx(ListItem, { id: `accordion-item-${group.id}-${itemIndex}`, className: "tm-accordion-list-item", "$isSelected": isSelected, "$color": color, onClick: () => handleItemClick(item, group), onDoubleClick: () => handleItemDoubleClick(item, group), onMouseEnter: () => setFocusedItem(item), onMouseLeave: () => setFocusedItem(undefined), onContextMenu: (e) => handleContextMenu(e, item, group), children: group.renderItem(item, isSelected, isFocused, color) }, itemIndex * 2));
                         }) }) })] }, group.id));
     };
     if (!isInitialized) {
@@ -321,6 +334,14 @@ const TMAccordion = ({ groups, localStorageKey, selectedItem, onSelectedItemChan
             event.preventDefault();
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Container, { onContextMenu: handleContainerContextMenu, children: groups.map((group, index) => renderAccordion(group, index)) }), anchorEl && contextMenuItems.length > 0 && (_jsx(ContextMenu, { dataSource: contextMenuItems, target: anchorEl, onHiding: closeContextMenu })), headerContextPosition && headerContextMenuItems.length > 0 && (_jsx(ContextMenu, { dataSource: headerContextMenuItems, visible: headerContextVisible, position: { my: 'left top', at: 'left top', offset: `${headerContextPosition.x} ${headerContextPosition.y}` }, onHiding: closeHeaderContextMenu }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Container, { onContextMenu: handleContainerContextMenu, children: groups.map((group, index) => renderAccordion(group, index)) }), _jsx(TMContextMenu, { items: itemContextMenuItems, target: ".tm-accordion-list-item", externalControl: {
+                    visible: itemContextMenuVisible,
+                    position: itemContextMenuPosition,
+                    onClose: closeContextMenu
+                } }), _jsx(TMContextMenu, { items: headerContextMenuItems, target: "[id^='accordion-header-']", externalControl: {
+                    visible: headerContextVisible,
+                    position: headerContextPosition,
+                    onClose: closeHeaderContextMenu
+                } })] }));
 };
 export default TMAccordion;