@addev-be/ui 3.3.0 → 3.3.3

package/src/components/layout/ContextMenu/ContextMenu.tsx

@@ -1,471 +1,471 @@
-import React, {
-  HTMLAttributes,
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-
-import { cn } from '@helpers/cn';
-
-interface GlobalContextMenuContextValue {
-  currentMenuId: string | null;
-  setCurrentMenuId: (id: string | null) => void;
-}
-
-const GlobalContextMenuContext = createContext<
-  GlobalContextMenuContextValue | undefined
->(undefined);
-
-export const GlobalContextMenuProvider: React.FC<{
-  children: React.ReactNode;
-}> = ({ children }) => {
-  const [currentMenuId, setCurrentMenuId] = useState<string | null>(null);
-
-  useEffect(() => {
-    const handleClick = () => setCurrentMenuId(null);
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-  }, []);
-
-  return (
-    <GlobalContextMenuContext.Provider
-      value={{ currentMenuId, setCurrentMenuId }}
-    >
-      {children}
-    </GlobalContextMenuContext.Provider>
-  );
-};
-
-const useGlobalContextMenu = () => {
-  const context = useContext(GlobalContextMenuContext);
-  if (!context) {
-    throw new Error(
-      'ContextMenu must be used within GlobalContextMenuProvider'
-    );
-  }
-  return context;
-};
-
-interface ContextMenuContextValue {
-  menuId: string;
-  isOpen: boolean;
-  position: { x: number; y: number };
-  openMenu: (x: number, y: number) => void;
-  closeMenu: () => void;
-}
-
-const ContextMenuContext = createContext<ContextMenuContextValue | undefined>(
-  undefined
-);
-
-const useContextMenu = () => {
-  const context = useContext(ContextMenuContext);
-  if (!context) {
-    throw new Error('ContextMenu components must be used within a ContextMenu');
-  }
-  return context;
-};
-
-let menuIdCounter = 0;
-
-export interface ContextMenuProps {
-  children: React.ReactNode;
-}
-
-export const ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {
-  const { currentMenuId, setCurrentMenuId } = useGlobalContextMenu();
-  const [menuId] = useState(() => `context-menu-${menuIdCounter++}`);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-
-  const isOpen = currentMenuId === menuId;
-
-  const openMenu = (x: number, y: number) => {
-    setPosition({ x, y });
-    setCurrentMenuId(menuId);
-  };
-
-  const closeMenu = () => {
-    if (currentMenuId === menuId) {
-      setCurrentMenuId(null);
-    }
-  };
-
-  return (
-    <ContextMenuContext.Provider
-      value={{ menuId, isOpen, position, openMenu, closeMenu }}
-    >
-      {children}
-    </ContextMenuContext.Provider>
-  );
-};
-
-export interface ContextMenuTriggerProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export const ContextMenuTrigger = React.forwardRef<
-  HTMLDivElement,
-  ContextMenuTriggerProps
->(({ children, className, ...props }, ref) => {
-  const { openMenu } = useContextMenu();
-
-  const handleContextMenu = (e: React.MouseEvent) => {
-    e.preventDefault();
-    openMenu(e.clientX, e.clientY);
-  };
-
-  return (
-    <div
-      ref={ref}
-      onContextMenu={handleContextMenu}
-      className={cn('cursor-pointer', className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-ContextMenuTrigger.displayName = 'ContextMenuTrigger';
-
-export interface ContextMenuContentProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export const ContextMenuContent = React.forwardRef<
-  HTMLDivElement,
-  ContextMenuContentProps
->(({ children, className, ...props }, ref) => {
-  const { isOpen, position } = useContextMenu();
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (isOpen && contentRef.current) {
-      const rect = contentRef.current.getBoundingClientRect();
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-
-      let adjustedX = position.x;
-      let adjustedY = position.y;
-
-      if (position.x + rect.width > viewportWidth) {
-        adjustedX = viewportWidth - rect.width - 10;
-      }
-
-      if (position.y + rect.height > viewportHeight) {
-        adjustedY = viewportHeight - rect.height - 10;
-      }
-
-      contentRef.current.style.left = `${adjustedX}px`;
-      contentRef.current.style.top = `${adjustedY}px`;
-    }
-  }, [isOpen, position]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div
-      ref={(node) => {
-        if (typeof ref === 'function') ref(node);
-        else if (ref) ref.current = node;
-        contentRef.current = node;
-      }}
-      className={cn(
-        'fixed z-50 min-w-[12rem] bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95',
-        'rounded-theme-md p-theme-xs',
-        className
-      )}
-      onClick={(e) => e.stopPropagation()}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-ContextMenuContent.displayName = 'ContextMenuContent';
-
-export interface ContextMenuItemProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  disabled?: boolean;
-  onSelect?: () => void;
-}
-
-export const ContextMenuItem = React.forwardRef<
-  HTMLDivElement,
-  ContextMenuItemProps
->(({ children, className, disabled, onSelect, ...props }, ref) => {
-  const { closeMenu } = useContextMenu();
-
-  const handleClick = () => {
-    if (!disabled && onSelect) {
-      onSelect();
-      closeMenu();
-    }
-  };
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        'relative flex cursor-pointer select-none items-center text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-        'px-theme-sm py-theme-xs rounded-theme-sm',
-        disabled && 'pointer-events-none opacity-50',
-        className
-      )}
-      onClick={handleClick}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-ContextMenuItem.displayName = 'ContextMenuItem';
-
-export interface ContextMenuSeparatorProps extends HTMLAttributes<HTMLDivElement> {}
-
-export const ContextMenuSeparator = React.forwardRef<
-  HTMLDivElement,
-  ContextMenuSeparatorProps
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn('bg-border h-px my-theme-xs', className)}
-      {...props}
-    />
-  );
-});
-
-ContextMenuSeparator.displayName = 'ContextMenuSeparator';
-
-export interface ContextMenuLabelProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export const ContextMenuLabel = React.forwardRef<
-  HTMLDivElement,
-  ContextMenuLabelProps
->(({ children, className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        'font-semibold text-foreground px-theme-sm py-theme-xs text-theme-sm',
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-ContextMenuLabel.displayName = 'ContextMenuLabel';
-
-interface SubMenuContextValue {
-  isOpen: boolean;
-  openSubMenu: () => void;
-  closeSubMenu: () => void;
-}
-
-const SubMenuContext = createContext<SubMenuContextValue | undefined>(
-  undefined
-);
-
-const useSubMenu = () => {
-  const context = useContext(SubMenuContext);
-  if (!context) {
-    throw new Error('SubMenu components must be used within a ContextMenuSub');
-  }
-  return context;
-};
-
-export interface ContextMenuSubProps {
-  children: React.ReactNode;
-}
-
-export const ContextMenuSub: React.FC<ContextMenuSubProps> = ({ children }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const openSubMenu = () => {
-    if (closeTimerRef.current) {
-      clearTimeout(closeTimerRef.current);
-      closeTimerRef.current = null;
-    }
-    setIsOpen(true);
-  };
-
-  const closeSubMenu = () => {
-    closeTimerRef.current = setTimeout(() => {
-      setIsOpen(false);
-      closeTimerRef.current = null;
-    }, 150);
-  };
-
-  useEffect(() => {
-    return () => {
-      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
-    };
-  }, []);
-
-  return (
-    <SubMenuContext.Provider value={{ isOpen, openSubMenu, closeSubMenu }}>
-      <div className="relative w-full">{children}</div>
-    </SubMenuContext.Provider>
-  );
-};
-
-export interface ContextMenuSubTriggerProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  disabled?: boolean;
-}
-
-export const ContextMenuSubTrigger = React.forwardRef<
-  HTMLDivElement,
-  ContextMenuSubTriggerProps
->(({ children, className, disabled, ...props }, ref) => {
-  const { openSubMenu } = useSubMenu();
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        'flex cursor-pointer select-none items-center justify-between text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
-        'px-theme-sm py-theme-xs rounded-theme-sm',
-        disabled && 'pointer-events-none opacity-50',
-        className
-      )}
-      onMouseEnter={openSubMenu}
-      onClick={(e) => e.stopPropagation()}
-      {...props}
-    >
-      {children}
-      <svg
-        width="15"
-        height="15"
-        viewBox="0 0 15 15"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className="ml-auto"
-      >
-        <path
-          d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
-          fill="currentColor"
-          fillRule="evenodd"
-          clipRule="evenodd"
-        />
-      </svg>
-    </div>
-  );
-});
-
-ContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';
-
-export interface ContextMenuSubContentProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
-
-export const ContextMenuSubContent = React.forwardRef<
-  HTMLDivElement,
-  ContextMenuSubContentProps
->(({ children, className, ...props }, ref) => {
-  const { isOpen, openSubMenu, closeSubMenu } = useSubMenu();
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState<{
-    left?: string;
-    right?: string;
-    top?: string;
-  }>({});
-
-  useEffect(() => {
-    const handleMouseLeave = (e: MouseEvent) => {
-      if (
-        contentRef.current &&
-        !contentRef.current.contains(e.relatedTarget as Node)
-      ) {
-        const triggerParent = contentRef.current.parentElement;
-        if (triggerParent && !triggerParent.contains(e.relatedTarget as Node)) {
-          closeSubMenu();
-        }
-      }
-    };
-
-    const element = contentRef.current?.parentElement;
-    if (element) {
-      element.addEventListener('mouseleave', handleMouseLeave);
-      return () => element.removeEventListener('mouseleave', handleMouseLeave);
-    }
-  }, [closeSubMenu]);
-
-  useEffect(() => {
-    if (isOpen && contentRef.current) {
-      const submenuRect = contentRef.current.getBoundingClientRect();
-      const parentElement = contentRef.current.parentElement;
-
-      if (parentElement) {
-        const parentRect = parentElement.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        const spaceOnRight = viewportWidth - parentRect.right;
-        const spaceOnLeft = parentRect.left;
-
-        const newPosition: { left?: string; right?: string; top?: string } = {};
-
-        if (spaceOnRight >= submenuRect.width + 8) {
-          newPosition.left = '100%';
-        } else if (spaceOnLeft >= submenuRect.width + 8) {
-          newPosition.right = '100%';
-        } else {
-          newPosition.left = '100%';
-        }
-
-        if (parentRect.top + submenuRect.height > viewportHeight) {
-          const adjustedTop = Math.max(
-            0,
-            viewportHeight - submenuRect.height - 10
-          );
-          newPosition.top = `${adjustedTop - parentRect.top}px`;
-        } else {
-          newPosition.top = '0';
-        }
-
-        setPosition(newPosition);
-      }
-    }
-  }, [isOpen]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div
-      ref={(node) => {
-        if (typeof ref === 'function') ref(node);
-        else if (ref) ref.current = node;
-        contentRef.current = node;
-      }}
-      className={cn(
-        'absolute min-w-[12rem] overflow-hidden bg-popover text-popover-foreground shadow-lg border border-border animate-in fade-in-0 zoom-in-95 z-50',
-        'rounded-theme-md p-theme-xs',
-        className
-      )}
-      style={{
-        left: position.left,
-        right: position.right,
-        top: position.top || '0',
-      }}
-      onMouseEnter={openSubMenu}
-      onClick={(e) => e.stopPropagation()}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
-
-ContextMenuSubContent.displayName = 'ContextMenuSubContent';
+import React, {
+  HTMLAttributes,
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import { cn } from '@helpers/cn';
+
+interface GlobalContextMenuContextValue {
+  currentMenuId: string | null;
+  setCurrentMenuId: (id: string | null) => void;
+}
+
+const GlobalContextMenuContext = createContext<
+  GlobalContextMenuContextValue | undefined
+>(undefined);
+
+export const GlobalContextMenuProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const [currentMenuId, setCurrentMenuId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const handleClick = () => setCurrentMenuId(null);
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+  }, []);
+
+  return (
+    <GlobalContextMenuContext.Provider
+      value={{ currentMenuId, setCurrentMenuId }}
+    >
+      {children}
+    </GlobalContextMenuContext.Provider>
+  );
+};
+
+const useGlobalContextMenu = () => {
+  const context = useContext(GlobalContextMenuContext);
+  if (!context) {
+    throw new Error(
+      'ContextMenu must be used within GlobalContextMenuProvider'
+    );
+  }
+  return context;
+};
+
+interface ContextMenuContextValue {
+  menuId: string;
+  isOpen: boolean;
+  position: { x: number; y: number };
+  openMenu: (x: number, y: number) => void;
+  closeMenu: () => void;
+}
+
+const ContextMenuContext = createContext<ContextMenuContextValue | undefined>(
+  undefined
+);
+
+const useContextMenu = () => {
+  const context = useContext(ContextMenuContext);
+  if (!context) {
+    throw new Error('ContextMenu components must be used within a ContextMenu');
+  }
+  return context;
+};
+
+let menuIdCounter = 0;
+
+export interface ContextMenuProps {
+  children: React.ReactNode;
+}
+
+export const ContextMenu: React.FC<ContextMenuProps> = ({ children }) => {
+  const { currentMenuId, setCurrentMenuId } = useGlobalContextMenu();
+  const [menuId] = useState(() => `context-menu-${menuIdCounter++}`);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  const isOpen = currentMenuId === menuId;
+
+  const openMenu = (x: number, y: number) => {
+    setPosition({ x, y });
+    setCurrentMenuId(menuId);
+  };
+
+  const closeMenu = () => {
+    if (currentMenuId === menuId) {
+      setCurrentMenuId(null);
+    }
+  };
+
+  return (
+    <ContextMenuContext.Provider
+      value={{ menuId, isOpen, position, openMenu, closeMenu }}
+    >
+      {children}
+    </ContextMenuContext.Provider>
+  );
+};
+
+export interface ContextMenuTriggerProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const ContextMenuTrigger = React.forwardRef<
+  HTMLDivElement,
+  ContextMenuTriggerProps
+>(({ children, className, ...props }, ref) => {
+  const { openMenu } = useContextMenu();
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+    openMenu(e.clientX, e.clientY);
+  };
+
+  return (
+    <div
+      ref={ref}
+      onContextMenu={handleContextMenu}
+      className={cn('cursor-pointer', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+ContextMenuTrigger.displayName = 'ContextMenuTrigger';
+
+export interface ContextMenuContentProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const ContextMenuContent = React.forwardRef<
+  HTMLDivElement,
+  ContextMenuContentProps
+>(({ children, className, ...props }, ref) => {
+  const { isOpen, position } = useContextMenu();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen && contentRef.current) {
+      const rect = contentRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      let adjustedX = position.x;
+      let adjustedY = position.y;
+
+      if (position.x + rect.width > viewportWidth) {
+        adjustedX = viewportWidth - rect.width - 10;
+      }
+
+      if (position.y + rect.height > viewportHeight) {
+        adjustedY = viewportHeight - rect.height - 10;
+      }
+
+      contentRef.current.style.left = `${adjustedX}px`;
+      contentRef.current.style.top = `${adjustedY}px`;
+    }
+  }, [isOpen, position]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      ref={(node) => {
+        if (typeof ref === 'function') ref(node);
+        else if (ref) ref.current = node;
+        contentRef.current = node;
+      }}
+      className={cn(
+        'fixed z-50 min-w-[12rem] bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95',
+        'rounded-theme-md p-theme-xs',
+        className
+      )}
+      onClick={(e) => e.stopPropagation()}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+ContextMenuContent.displayName = 'ContextMenuContent';
+
+export interface ContextMenuItemProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  disabled?: boolean;
+  onSelect?: () => void;
+}
+
+export const ContextMenuItem = React.forwardRef<
+  HTMLDivElement,
+  ContextMenuItemProps
+>(({ children, className, disabled, onSelect, ...props }, ref) => {
+  const { closeMenu } = useContextMenu();
+
+  const handleClick = () => {
+    if (!disabled && onSelect) {
+      onSelect();
+      closeMenu();
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'relative flex cursor-pointer select-none items-center text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+        'px-theme-sm py-theme-xs rounded-theme-sm',
+        disabled && 'pointer-events-none opacity-50',
+        className
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+ContextMenuItem.displayName = 'ContextMenuItem';
+
+export interface ContextMenuSeparatorProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const ContextMenuSeparator = React.forwardRef<
+  HTMLDivElement,
+  ContextMenuSeparatorProps
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn('bg-border h-px my-theme-xs', className)}
+      {...props}
+    />
+  );
+});
+
+ContextMenuSeparator.displayName = 'ContextMenuSeparator';
+
+export interface ContextMenuLabelProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const ContextMenuLabel = React.forwardRef<
+  HTMLDivElement,
+  ContextMenuLabelProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'font-semibold text-foreground px-theme-sm py-theme-xs text-theme-sm',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+ContextMenuLabel.displayName = 'ContextMenuLabel';
+
+interface SubMenuContextValue {
+  isOpen: boolean;
+  openSubMenu: () => void;
+  closeSubMenu: () => void;
+}
+
+const SubMenuContext = createContext<SubMenuContextValue | undefined>(
+  undefined
+);
+
+const useSubMenu = () => {
+  const context = useContext(SubMenuContext);
+  if (!context) {
+    throw new Error('SubMenu components must be used within a ContextMenuSub');
+  }
+  return context;
+};
+
+export interface ContextMenuSubProps {
+  children: React.ReactNode;
+}
+
+export const ContextMenuSub: React.FC<ContextMenuSubProps> = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const openSubMenu = () => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    setIsOpen(true);
+  };
+
+  const closeSubMenu = () => {
+    closeTimerRef.current = setTimeout(() => {
+      setIsOpen(false);
+      closeTimerRef.current = null;
+    }, 150);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
+  }, []);
+
+  return (
+    <SubMenuContext.Provider value={{ isOpen, openSubMenu, closeSubMenu }}>
+      <div className="relative w-full">{children}</div>
+    </SubMenuContext.Provider>
+  );
+};
+
+export interface ContextMenuSubTriggerProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  disabled?: boolean;
+}
+
+export const ContextMenuSubTrigger = React.forwardRef<
+  HTMLDivElement,
+  ContextMenuSubTriggerProps
+>(({ children, className, disabled, ...props }, ref) => {
+  const { openSubMenu } = useSubMenu();
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex cursor-pointer select-none items-center justify-between text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+        'px-theme-sm py-theme-xs rounded-theme-sm',
+        disabled && 'pointer-events-none opacity-50',
+        className
+      )}
+      onMouseEnter={openSubMenu}
+      onClick={(e) => e.stopPropagation()}
+      {...props}
+    >
+      {children}
+      <svg
+        width="15"
+        height="15"
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="ml-auto"
+      >
+        <path
+          d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        />
+      </svg>
+    </div>
+  );
+});
+
+ContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';
+
+export interface ContextMenuSubContentProps extends HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const ContextMenuSubContent = React.forwardRef<
+  HTMLDivElement,
+  ContextMenuSubContentProps
+>(({ children, className, ...props }, ref) => {
+  const { isOpen, openSubMenu, closeSubMenu } = useSubMenu();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<{
+    left?: string;
+    right?: string;
+    top?: string;
+  }>({});
+
+  useEffect(() => {
+    const handleMouseLeave = (e: MouseEvent) => {
+      if (
+        contentRef.current &&
+        !contentRef.current.contains(e.relatedTarget as Node)
+      ) {
+        const triggerParent = contentRef.current.parentElement;
+        if (triggerParent && !triggerParent.contains(e.relatedTarget as Node)) {
+          closeSubMenu();
+        }
+      }
+    };
+
+    const element = contentRef.current?.parentElement;
+    if (element) {
+      element.addEventListener('mouseleave', handleMouseLeave);
+      return () => element.removeEventListener('mouseleave', handleMouseLeave);
+    }
+  }, [closeSubMenu]);
+
+  useEffect(() => {
+    if (isOpen && contentRef.current) {
+      const submenuRect = contentRef.current.getBoundingClientRect();
+      const parentElement = contentRef.current.parentElement;
+
+      if (parentElement) {
+        const parentRect = parentElement.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        const spaceOnRight = viewportWidth - parentRect.right;
+        const spaceOnLeft = parentRect.left;
+
+        const newPosition: { left?: string; right?: string; top?: string } = {};
+
+        if (spaceOnRight >= submenuRect.width + 8) {
+          newPosition.left = '100%';
+        } else if (spaceOnLeft >= submenuRect.width + 8) {
+          newPosition.right = '100%';
+        } else {
+          newPosition.left = '100%';
+        }
+
+        if (parentRect.top + submenuRect.height > viewportHeight) {
+          const adjustedTop = Math.max(
+            0,
+            viewportHeight - submenuRect.height - 10
+          );
+          newPosition.top = `${adjustedTop - parentRect.top}px`;
+        } else {
+          newPosition.top = '0';
+        }
+
+        setPosition(newPosition);
+      }
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      ref={(node) => {
+        if (typeof ref === 'function') ref(node);
+        else if (ref) ref.current = node;
+        contentRef.current = node;
+      }}
+      className={cn(
+        'absolute min-w-[12rem] overflow-hidden bg-popover text-popover-foreground shadow-lg border border-border animate-in fade-in-0 zoom-in-95 z-50',
+        'rounded-theme-md p-theme-xs',
+        className
+      )}
+      style={{
+        left: position.left,
+        right: position.right,
+        top: position.top || '0',
+      }}
+      onMouseEnter={openSubMenu}
+      onClick={(e) => e.stopPropagation()}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
+
+ContextMenuSubContent.displayName = 'ContextMenuSubContent';