@topconsultnpm/sdkui-react 6.19.0-dev2.26 → 6.19.0-dev2.28

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TMContextMenuProps } from './types';
+declare const TMContextMenu: React.FC<TMContextMenuProps>;
+export default TMContextMenu;

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

@@ -0,0 +1,187 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import * as S from './styles';
+import { useIsMobile, useMenuPosition } from './hooks';
+const TMContextMenu = ({ items, trigger = 'right', children }) => {
+    const [menuState, setMenuState] = useState({
+        visible: false,
+        position: { x: 0, y: 0 },
+        submenuStack: [items],
+        parentNames: [],
+    });
+    const [hoveredSubmenus, setHoveredSubmenus] = useState([]);
+    const isMobile = useIsMobile();
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    const submenuTimeoutRef = useRef(null);
+    const { openLeft, openUp } = useMenuPosition(menuRef, menuState.position);
+    const handleClose = () => {
+        setMenuState(prev => ({
+            ...prev,
+            visible: false,
+            submenuStack: [items],
+            parentNames: [],
+        }));
+        setHoveredSubmenus([]);
+    };
+    useEffect(() => {
+        if (!menuState.visible)
+            return;
+        const handleClickOutside = (event) => {
+            const target = event.target;
+            // Check if click is inside main menu
+            if (menuRef.current?.contains(target)) {
+                return;
+            }
+            // Check if click is inside any submenu
+            const submenus = document.querySelectorAll('[data-submenu="true"]');
+            for (const submenu of Array.from(submenus)) {
+                if (submenu.contains(target)) {
+                    return;
+                }
+            }
+            // Click is outside all menus, close them
+            handleClose();
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('touchstart', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('touchstart', handleClickOutside);
+        };
+    }, [menuState.visible]);
+    const handleContextMenu = (e) => {
+        if (trigger === 'right') {
+            e.preventDefault();
+            setMenuState({
+                visible: true,
+                position: { x: e.clientX, y: e.clientY },
+                submenuStack: [items],
+                parentNames: [],
+            });
+        }
+    };
+    const handleClick = (e) => {
+        if (trigger === 'left') {
+            e.preventDefault();
+            setMenuState({
+                visible: true,
+                position: { x: e.clientX, y: e.clientY },
+                submenuStack: [items],
+                parentNames: [],
+            });
+        }
+    };
+    const handleItemClick = (item) => {
+        if (item.disabled)
+            return;
+        // Always execute onClick if present
+        if (item.onClick) {
+            item.onClick();
+        }
+        if (item.submenu && item.submenu.length > 0) {
+            if (isMobile) {
+                // Mobile: Push submenu to stack
+                setMenuState(prev => ({
+                    ...prev,
+                    submenuStack: [...prev.submenuStack, item.submenu],
+                    parentNames: [...prev.parentNames, item.name],
+                }));
+            }
+            // Desktop: Submenus are handled by hover, don't close menu
+        }
+        else {
+            // No submenu: close menu after executing action
+            handleClose();
+        }
+    };
+    const handleBack = () => {
+        setMenuState(prev => ({
+            ...prev,
+            submenuStack: prev.submenuStack.slice(0, -1),
+            parentNames: prev.parentNames.slice(0, -1),
+        }));
+    };
+    const handleMouseEnter = (item, event, depth = 0) => {
+        if (isMobile || !item.submenu || item.submenu.length === 0)
+            return;
+        if (submenuTimeoutRef.current) {
+            clearTimeout(submenuTimeoutRef.current);
+            submenuTimeoutRef.current = null;
+        }
+        const rect = event.currentTarget.getBoundingClientRect();
+        // Calculate if submenu should open upward based on available space
+        // Estimate submenu height: ~35px per item (accounting for smaller padding) + container padding
+        const estimatedSubmenuHeight = (item.submenu.length * 35) + 8;
+        const spaceBelow = window.innerHeight - rect.top;
+        const spaceAbove = rect.bottom;
+        // Open upward only if there's not enough space below AND there's more space above
+        const shouldOpenUp = spaceBelow < estimatedSubmenuHeight && spaceAbove > spaceBelow;
+        // Remove all submenus at this depth and deeper
+        setHoveredSubmenus(prev => {
+            const filtered = prev.filter(sub => sub.depth < depth);
+            if (!item.submenu)
+                return filtered;
+            return [
+                ...filtered,
+                {
+                    items: item.submenu,
+                    parentRect: rect,
+                    depth: depth,
+                    openUp: shouldOpenUp,
+                }
+            ];
+        });
+    };
+    const handleMouseLeave = (depth = 0) => {
+        if (isMobile)
+            return;
+        if (submenuTimeoutRef.current) {
+            clearTimeout(submenuTimeoutRef.current);
+        }
+        const targetDepth = depth;
+        submenuTimeoutRef.current = setTimeout(() => {
+            setHoveredSubmenus(prev => prev.filter(sub => sub.depth < targetDepth));
+        }, 300);
+    };
+    const handleSubmenuMouseEnter = () => {
+        if (submenuTimeoutRef.current) {
+            clearTimeout(submenuTimeoutRef.current);
+            submenuTimeoutRef.current = null;
+        }
+    };
+    useEffect(() => {
+        return () => {
+            if (submenuTimeoutRef.current) {
+                clearTimeout(submenuTimeoutRef.current);
+            }
+        };
+    }, []);
+    const renderMenuItems = (menuItems, depth = 0) => {
+        return menuItems
+            .filter(item => item.visible !== false)
+            .map((item, idx) => {
+            const itemKey = `${item.name}-${idx}`.replaceAll(/\s+/g, '-');
+            const handleClick = (e) => {
+                if (item.disabled)
+                    return;
+                e.stopPropagation();
+                handleItemClick(item);
+            };
+            const handleRightIconClick = (e) => {
+                e.stopPropagation();
+                // if (item.disabled) return;
+                item.onRightIconClick?.();
+            };
+            return (_jsxs(S.MenuItem, { "$disabled": item.disabled, "$hasSubmenu": !!item.submenu && item.submenu.length > 0, "$beginGroup": item.beginGroup, onMouseDown: handleClick, onMouseEnter: (e) => !isMobile && handleMouseEnter(item, e, depth + 1), onMouseLeave: () => !isMobile && handleMouseLeave(depth + 1), children: [_jsxs(S.MenuItemContent, { children: [item.icon && _jsx(S.IconWrapper, { children: item.icon }), _jsx(S.MenuItemName, { children: item.name })] }), item.rightIcon && item.onRightIconClick && (_jsx(S.RightIconButton, { onClick: handleRightIconClick, onMouseDown: (e) => e.stopPropagation(), "aria-label": `Action for ${item.name}`, children: item.rightIcon })), item.submenu && item.submenu.length > 0 && (_jsx(S.SubmenuIndicator, { "$isMobile": isMobile, children: isMobile ? '›' : '▸' }))] }, itemKey));
+        });
+    };
+    const currentMenu = menuState.submenuStack.at(-1) || items;
+    const currentParentName = menuState.parentNames.at(-1) || '';
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, onClick: handleClick, onKeyDown: (e) => {
+                    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}`)))] }))] }));
+};
+export default TMContextMenu;

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

@@ -0,0 +1,11 @@
+export declare const useIsMobile: () => boolean;
+export declare const useClickOutside: (callback: () => void) => import("react").RefObject<HTMLDivElement>;
+interface Position {
+    x: number;
+    y: number;
+}
+export declare const useMenuPosition: (menuRef: React.RefObject<HTMLDivElement | null>, position: Position) => {
+    openLeft: boolean;
+    openUp: boolean;
+};
+export {};

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

@@ -0,0 +1,48 @@
+import { useState, useEffect, useRef } from 'react';
+export const useIsMobile = () => {
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        const checkMobile = () => {
+            const mobile = globalThis.innerWidth <= 768 || 'ontouchstart' in globalThis;
+            setIsMobile(mobile);
+        };
+        checkMobile();
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
+    return isMobile;
+};
+export const useClickOutside = (callback) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        const handleClick = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                callback();
+            }
+        };
+        document.addEventListener('mousedown', handleClick);
+        document.addEventListener('touchstart', handleClick);
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+            document.removeEventListener('touchstart', handleClick);
+        };
+    }, [callback]);
+    return ref;
+};
+export const useMenuPosition = (menuRef, position) => {
+    const [adjustedPosition, setAdjustedPosition] = useState({ openLeft: false, openUp: false });
+    useEffect(() => {
+        if (!menuRef.current)
+            return;
+        const menuRect = menuRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const spaceRight = viewportWidth - position.x;
+        const spaceBottom = viewportHeight - position.y;
+        setAdjustedPosition({
+            openLeft: spaceRight < menuRect.width + 20,
+            openUp: spaceBottom < menuRect.height + 20,
+        });
+    }, [position, menuRef]);
+    return adjustedPosition;
+};

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

@@ -0,0 +1,2 @@
+export { default as ContextMenu } from './TMContextMenu';
+export type { TMContextMenuItemProps, TMContextMenuProps } from './types';

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

@@ -0,0 +1 @@
+export { default as ContextMenu } from './TMContextMenu';

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

@@ -0,0 +1,27 @@
+export declare const MenuContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $x: number;
+    $y: number;
+    $openLeft: boolean;
+    $openUp: 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;
+    $hasSubmenu?: boolean;
+    $beginGroup?: boolean;
+}>> & string;
+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 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;
+export declare const Submenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $parentRect: DOMRect;
+    $openUp?: boolean;
+}>> & string;
+export declare const MobileMenuHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BackButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const HeaderTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const MenuDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,308 @@
+import styled, { keyframes } from 'styled-components';
+const fadeIn = keyframes `
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+const slideIn = keyframes `
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+export const MenuContainer = styled.div `
+  position: fixed;
+  left: ${props => props.$openLeft ? 'auto' : `${props.$x}px`};
+  right: ${props => props.$openLeft ? `${window.innerWidth - props.$x}px` : 'auto'};
+  top: ${props => props.$openUp ? 'auto' : `${props.$y}px`};
+  bottom: ${props => props.$openUp ? `${window.innerHeight - props.$y}px` : 'auto'};
+  z-index: 10000;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
+              0 2px 8px rgba(0, 0, 0, 0.08);
+  min-width: max-content;
+  width: max-content;
+  padding: 4px 0;
+  animation: ${fadeIn} 0.15s ease-out;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+
+  [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);
+  }
+`;
+export const MenuItem = styled.div `
+  display: flex;
+  align-items: center;
+  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;
+  font-size: 13px;
+  color: ${props => props.$disabled ? '#999' : '#1a1a1a'};
+  font-weight: 500;
+  ${props => props.$beginGroup && `
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    margin-top: 4px;
+    padding-top: 8px;
+  `}
+
+  &:hover {
+    ${props => !props.$disabled && `
+      background: linear-gradient(90deg, #f0f7ff 0%, #e6f2ff 100%);
+      color: #0066cc;
+      padding-left: 14px;
+    `}
+  }
+
+  &:active {
+    ${props => !props.$disabled && `
+      background: linear-gradient(90deg, #e6f2ff 0%, #d9ebff 100%);
+      transform: scale(0.98);
+    `}
+  }
+
+  [data-theme='dark'] & {
+    color: ${props => props.$disabled ? '#666' : '#e0e0e0'};
+    ${props => props.$beginGroup && `
+      border-top-color: rgba(255, 255, 255, 0.1);
+    `}
+
+    &:hover {
+      ${props => !props.$disabled && `
+        background: linear-gradient(90deg, #1a3a52 0%, #1e4159 100%);
+        color: #4db8ff;
+      `}
+    }
+
+    &:active {
+      ${props => !props.$disabled && `
+        background: linear-gradient(90deg, #1e4159 0%, #234a66 100%);
+      `}
+    }
+  }
+
+  @media (max-width: 768px) {
+    padding: 14px 16px;
+    font-size: 15px;
+  }
+`;
+export const MenuItemContent = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+`;
+export const IconWrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  width: 18px;
+  height: 18px;
+`;
+export const MenuItemName = styled.span `
+  flex: 1;
+  white-space: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  line-height: 1.4;
+`;
+export const RightIconButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 4px 8px;
+  margin-left: 8px;
+  border-radius: 6px;
+  color: inherit;
+  font-size: 14px;
+  opacity: 0.6;
+  transition: all 0.15s ease;
+
+  &:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.05);
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  [data-theme='dark'] & {
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+`;
+export const SubmenuIndicator = styled.span `
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  margin-left: 8px;
+  opacity: 0.6;
+  transition: transform 0.15s ease;
+
+  ${MenuItem}:hover & {
+    ${props => !props.$isMobile && `
+      transform: translateX(2px);
+      opacity: 1;
+    `}
+  }
+`;
+export const Submenu = styled.div `
+  position: fixed;
+  left: ${props => {
+    const spaceOnRight = globalThis.innerWidth - props.$parentRect.right;
+    return spaceOnRight > 240 ? `${props.$parentRect.right - 8}px` : 'auto';
+}};
+  right: ${props => {
+    const spaceOnRight = globalThis.innerWidth - props.$parentRect.right;
+    return spaceOnRight > 240 ? 'auto' : `${globalThis.innerWidth - props.$parentRect.left + 8}px`;
+}};
+  /* Vertical positioning: Each submenu independently decides direction based on its own space */
+  top: ${props => {
+    // If openUp is true, don't anchor to top
+    return props.$openUp ? 'auto' : `${props.$parentRect.top - 8}px`;
+}};
+  bottom: ${props => {
+    // If openUp is true, anchor to bottom and grow upward
+    return props.$openUp ? `${globalThis.innerHeight - props.$parentRect.bottom - 8}px` : 'auto';
+}};
+  z-index: 10001;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
+              0 2px 8px rgba(0, 0, 0, 0.08);
+  min-width: max-content;
+  width: max-content;
+  padding: 4px 0;
+  animation: ${slideIn} 0.15s ease-out;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  
+  /* Add invisible padding to bridge the gap - works for both sides */
+  &::before {
+    content: '';
+    position: absolute;
+    right: 100%;
+    top: 0;
+    bottom: 0;
+    width: 15px;
+    background: transparent;
+  }
+  
+  /* Bridge on the right side for nested submenus */
+  &::after {
+    content: '';
+    position: absolute;
+    left: 100%;
+    top: 0;
+    bottom: 0;
+    width: 15px;
+    background: transparent;
+  }
+
+  [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);
+  }
+`;
+export const MobileMenuHeader = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+  margin-bottom: 8px;
+  gap: 12px;
+  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
+  border-radius: 12px 12px 0 0;
+
+  [data-theme='dark'] & {
+    background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 100%);
+    border-bottom-color: rgba(255, 255, 255, 0.1);
+  }
+`;
+export const BackButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0066cc;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  font-size: 18px;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: #0052a3;
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  [data-theme='dark'] & {
+    background: #4db8ff;
+    color: #1a1a1a;
+
+    &:hover {
+      background: #66c2ff;
+    }
+  }
+`;
+export const HeaderTitle = styled.h3 `
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1a1a1a;
+  flex: 1;
+
+  [data-theme='dark'] & {
+    color: #e0e0e0;
+  }
+`;
+export const MenuDivider = styled.div `
+  height: 1px;
+  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
+  margin: 8px 0;
+
+  [data-theme='dark'] & {
+    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
+  }
+`;
+export const Overlay = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background: transparent;
+`;

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

@@ -0,0 +1,26 @@
+export interface TMContextMenuItemProps {
+    name: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    submenu?: TMContextMenuItemProps[];
+    visible?: boolean;
+    rightIcon?: React.ReactNode;
+    onRightIconClick?: () => void;
+    beginGroup?: boolean;
+}
+export interface TMContextMenuProps {
+    items: TMContextMenuItemProps[];
+    trigger?: 'right' | 'left';
+    children?: React.ReactNode;
+}
+export interface Position {
+    x: number;
+    y: number;
+}
+export interface MenuState {
+    visible: boolean;
+    position: Position;
+    submenuStack: TMContextMenuItemProps[][];
+    parentNames: string[];
+}

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

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { TMFloatingMenuBarProps } from './types';
+declare const TMFloatingMenuBar: React.FC<TMFloatingMenuBarProps>;
+export default TMFloatingMenuBar;