@topconsultnpm/sdkui-react 6.20.0-dev1.4 → 6.20.0-dev1.41

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,307 @@
+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, useIsIOS } from './hooks';
+import { IconArrowLeft } from '../../../helper';
+const TMContextMenu = ({ items, trigger = 'right', children, externalControl, keepOpenOnClick = false }) => {
+    const [menuState, setMenuState] = useState({
+        visible: false,
+        position: { x: 0, y: 0 },
+        submenuStack: [items],
+        parentNames: [],
+    });
+    const [hoveredSubmenus, setHoveredSubmenus] = useState([]);
+    const isMobile = useIsMobile();
+    const isIOS = useIsIOS();
+    const menuRef = useRef(null);
+    const triggerRef = useRef(null);
+    const submenuTimeoutRef = useRef(null);
+    const longPressTimeoutRef = useRef(null);
+    const touchStartPos = useRef(null);
+    const { openLeft, openUp, isCalculated } = useMenuPosition(menuRef, menuState.position);
+    const handleClose = () => {
+        if (externalControl) {
+            externalControl.onClose();
+        }
+        else {
+            setMenuState(prev => ({
+                ...prev,
+                visible: false,
+                submenuStack: [items],
+                parentNames: [],
+            }));
+        }
+        setHoveredSubmenus([]);
+    };
+    // Sync with external control when provided
+    useEffect(() => {
+        if (externalControl) {
+            setMenuState(prev => ({
+                ...prev,
+                visible: externalControl.visible,
+                position: externalControl.position,
+                submenuStack: [items],
+                parentNames: [],
+            }));
+        }
+    }, [externalControl, items]);
+    // Update items when they change while menu is visible (for keepOpenOnClick behavior)
+    useEffect(() => {
+        if (!keepOpenOnClick)
+            return;
+        if (!externalControl && menuState.visible) {
+            setMenuState(prev => ({
+                ...prev,
+                submenuStack: [items],
+            }));
+            // Update hoveredSubmenus with fresh items while keeping them open
+            setHoveredSubmenus(prev => {
+                if (prev.length === 0)
+                    return prev;
+                // Rebuild hoveredSubmenus with updated items from the new items structure
+                return prev.map(submenu => {
+                    // Find the matching submenu in the new items structure
+                    const findSubmenuInItems = (searchItems) => {
+                        for (const item of searchItems) {
+                            if (item.submenu && item.submenu.length > 0) {
+                                // Check if this submenu matches (compare first item name as identifier)
+                                if (submenu.items.length > 0 && item.submenu.length > 0 &&
+                                    item.submenu[0].name === submenu.items[0].name) {
+                                    return item.submenu;
+                                }
+                                // Recursively search in nested submenus
+                                const found = findSubmenuInItems(item.submenu);
+                                if (found)
+                                    return found;
+                            }
+                        }
+                        return null;
+                    };
+                    const updatedItems = findSubmenuInItems(items);
+                    return {
+                        ...submenu,
+                        items: updatedItems || submenu.items, // Use updated items if found, otherwise keep old
+                    };
+                });
+            });
+        }
+    }, [items, menuState.visible, externalControl, keepOpenOnClick]);
+    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: [],
+            });
+        }
+    };
+    // iOS-specific touch handlers for long press
+    const handleTouchStart = (e) => {
+        if (!isIOS || trigger !== 'right')
+            return;
+        const touch = e.touches[0];
+        touchStartPos.current = { x: touch.clientX, y: touch.clientY };
+        if (longPressTimeoutRef.current) {
+            clearTimeout(longPressTimeoutRef.current);
+        }
+        longPressTimeoutRef.current = setTimeout(() => {
+            if (touchStartPos.current) {
+                if ('vibrate' in navigator) {
+                    navigator.vibrate(50);
+                }
+                setMenuState({
+                    visible: true,
+                    position: { x: touchStartPos.current.x, y: touchStartPos.current.y },
+                    submenuStack: [items],
+                    parentNames: [],
+                });
+            }
+        }, 500);
+    };
+    const handleTouchMove = (e) => {
+        if (!isIOS || !touchStartPos.current)
+            return;
+        const touch = e.touches[0];
+        const moveThreshold = 10; // pixels
+        // If finger moved too much, cancel long press
+        const deltaX = Math.abs(touch.clientX - touchStartPos.current.x);
+        const deltaY = Math.abs(touch.clientY - touchStartPos.current.y);
+        if (deltaX > moveThreshold || deltaY > moveThreshold) {
+            if (longPressTimeoutRef.current) {
+                clearTimeout(longPressTimeoutRef.current);
+                longPressTimeoutRef.current = null;
+            }
+            touchStartPos.current = null;
+        }
+    };
+    const handleTouchEnd = () => {
+        if (!isIOS)
+            return;
+        // Clear long press timeout if touch ended before long press completed
+        if (longPressTimeoutRef.current) {
+            clearTimeout(longPressTimeoutRef.current);
+            longPressTimeoutRef.current = null;
+        }
+        touchStartPos.current = null;
+    };
+    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 (unless keepOpenOnClick is true)
+            if (!keepOpenOnClick) {
+                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);
+            }
+            if (longPressTimeoutRef.current) {
+                clearTimeout(longPressTimeoutRef.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), title: item.tooltip, 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: [!externalControl && children && (_jsx("div", { ref: triggerRef, onContextMenu: handleContextMenu, onClick: handleClick, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onTouchCancel: handleTouchEnd, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        handleClick(e);
+                    }
+                }, role: "button", tabIndex: 0, style: {
+                    display: 'inline-block',
+                    WebkitTouchCallout: isIOS ? 'none' : undefined,
+                    WebkitUserSelect: isIOS ? 'none' : undefined,
+                }, children: children })), menuState.visible && (_jsxs(_Fragment, { children: [_jsxs(S.MenuContainer, { ref: menuRef, "$x": menuState.position.x, "$y": menuState.position.y, "$openLeft": openLeft, "$openUp": openUp, "$isPositioned": isCalculated, "$externalControl": !!externalControl, children: [isMobile && menuState.parentNames.length > 0 && (_jsxs(S.MobileMenuHeader, { children: [_jsx(S.BackButton, { onClick: handleBack, "aria-label": "Go back", children: _jsx(IconArrowLeft, {}) }), _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,13 @@
+export declare const useIsIOS: () => boolean;
+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) => {
+    isCalculated: boolean;
+    openLeft: boolean;
+    openUp: boolean;
+};
+export {};

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

@@ -0,0 +1,61 @@
+import { useState, useEffect, useLayoutEffect, useRef } from 'react';
+export const useIsIOS = () => {
+    const [isIOS, setIsIOS] = useState(false);
+    useEffect(() => {
+        const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+            (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+        setIsIOS(iOS);
+    }, []);
+    return isIOS;
+};
+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 });
+    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;
+        const spaceRight = viewportWidth - position.x;
+        const spaceBottom = viewportHeight - position.y;
+        setAdjustedPosition({
+            openLeft: spaceRight < menuRect.width + 20,
+            openUp: spaceBottom < menuRect.height + 20,
+        });
+        setIsCalculated(true);
+    }, [position, menuRef]);
+    return { ...adjustedPosition, isCalculated };
+};

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,31 @@
+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;
+    $isPositioned: boolean;
+    $externalControl?: 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("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;
+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;