@topconsultnpm/sdkui-react 6.20.0-dev1.6 → 6.20.0-dev1.60

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

@@ -0,0 +1,2 @@
+export { default } from './TMFloatingMenuBar';
+export * from './types';

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

@@ -0,0 +1,2 @@
+export { default } from './TMFloatingMenuBar';
+export * from './types';

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

@@ -0,0 +1,51 @@
+export declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $visible: boolean;
+}>> & string;
+export declare const FloatingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | 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<HTMLDivElement> | null | undefined;
+}>, {
+    $x: number;
+    $y: number;
+    $orientation: "horizontal" | "vertical";
+    $isDragging: boolean;
+    $isConfigMode: boolean;
+    $isConstrained?: boolean;
+}>, {
+    $x: number;
+    $y: number;
+    $orientation: "horizontal" | "vertical";
+    $isDragging: boolean;
+    $isConfigMode: boolean;
+    $isConstrained?: boolean;
+}>> & 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").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 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 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 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

@@ -0,0 +1,385 @@
+import styled, { keyframes, css } from 'styled-components';
+const fadeIn = keyframes `
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+const shake = keyframes `
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-2px); }
+  75% { transform: translateX(2px); }
+`;
+export const Overlay = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  z-index: 9998;
+  display: ${props => props.$visible ? 'block' : 'none'};
+  animation: ${fadeIn} 0.2s ease-out;
+  backdrop-filter: blur(2px);
+
+  [data-theme='dark'] & {
+    background: rgba(0, 0, 0, 0.8);
+  }
+`;
+export const FloatingContainer = styled.div.attrs(props => ({
+    style: {
+        left: `${props.$x}px`,
+        top: `${props.$y}px`,
+    },
+})) `
+  position: ${props => props.$isConstrained ? 'absolute' : 'fixed'};
+  z-index: ${props => props.$isConfigMode ? 9999 : 10000};
+  display: flex;
+  flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : 'column'};
+  align-items: center;
+  background: linear-gradient(135deg, #0071BC 0%, #1B1464 100%);
+  border: 1px solid #667eea;
+  border-radius: 14px;
+  padding: 6px;
+  gap: 3px;
+  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, #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: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    border: 1px solid #1a1a2e;
+    
+    &:hover {
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      border: 1px solid #1a1a2e;
+    }
+  }
+`;
+export const GripHandle = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${props => props.$orientation === 'horizontal' ? '10px 6px' : '6px 10px'};
+  cursor: grab;
+  color: rgba(255, 255, 255, 0.7);
+  transition: all 0.2s ease;
+  border-radius: 6px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 1);
+  }
+
+  &:active {
+    cursor: grabbing;
+    background: rgba(255, 255, 255, 0.15);
+  }
+
+  svg {
+    width: 14px;
+    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 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: 34px;
+    height: 34px;
+    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' ? '20px' : '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' ? '24px' : '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;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  position: relative;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  &:active:not(:disabled) {
+    opacity: 0.8;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+    color: rgba(255, 255, 255, 0.6);
+  }
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+export const ConfigButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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 ContextMenuButton = styled(MenuButton) `
+  svg {
+    transform: translateY(0);
+  }
+`;
+export const AddButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px dashed rgba(255, 255, 255, 0.4);
+  border-radius: 8px;
+  color: white;
+  font-size: 20px;
+  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: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`;
+export const RemoveButton = styled.button `
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  background: #ef4444;
+  border: none;
+  border-radius: 50%;
+  color: white;
+  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;
+  }
+
+  &:active {
+    background: #b91c1c;
+  }
+`;
+export const UndoButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: rgba(249, 115, 22, 1);
+  font-size: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 2px;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(249, 115, 22, 1);
+  }
+
+  &:active:not(:disabled) {
+    transform: scale(0.9);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+export const DraggableItem = styled.div `
+  position: relative;
+  opacity: ${props => props.$isDragging ? 0.3 : 1};
+  transform: ${props => {
+    if (props.$isDragging)
+        return 'scale(1.1) rotate(5deg)';
+    if (props.$isDragOver)
+        return 'scale(1.05)';
+    return 'scale(1)';
+}};
+  transition: all 0.2s ease;
+  filter: ${props => props.$isDragging ? 'brightness(1.3)' : 'brightness(1)'};
+  
+  ${props => props.$isDragging && css `
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    z-index: 100;
+  `}
+  
+  ${props => props.$isDragOver && css `
+    &::before {
+      content: '';
+      position: absolute;
+      top: -4px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 40px;
+      height: 3px;
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 2px;
+      box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
+    }
+  `}
+`;
+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

@@ -0,0 +1,29 @@
+import type { TMContextMenuItemProps } from '../ContextMenu';
+export interface TMFloatingMenuItem {
+    id: string;
+    name: string;
+    icon: React.ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    isPinned?: boolean;
+    isSeparator?: boolean;
+}
+export interface TMFloatingMenuBarProps {
+    containerRef: React.RefObject<HTMLElement | null>;
+    contextMenuItems?: TMContextMenuItemProps[];
+    isConstrained?: boolean;
+    defaultPosition?: Position;
+    maxItems?: number;
+}
+export interface Position {
+    x: number;
+    y: number;
+}
+export interface TMFloatingMenuBarState {
+    position: Position;
+    isDragging: boolean;
+    isConfigMode: boolean;
+    orientation: 'horizontal' | 'vertical';
+    items: TMFloatingMenuItem[];
+    draggedItemIndex: number | null;
+}

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

@@ -0,0 +1 @@
+export {};

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;