@alpaca-editor/core 1.0.4109 → 1.0.4111

package/src/components/ui/context-menu.tsx

@@ -1,164 +1,246 @@
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import * as React from "react";
+import { createPortal } from "react-dom";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 
 import { cn } from "../../lib/utils";
 
-function ContextMenu({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+type Position = { x: number; y: number } | null;
+
+interface ContextMenuState {
+  isOpen: boolean;
+  position: Position;
+  openAt: (position: { x: number; y: number }) => void;
+  close: () => void;
+  registerContainer: (el: HTMLElement | null) => void;
+  unregisterContainer: (el: HTMLElement | null) => void;
+}
+
+const ContextMenuRootContext = React.createContext<ContextMenuState | null>(
+  null,
+);
+
+function useContextMenuRoot(): ContextMenuState {
+  const ctx = React.useContext(ContextMenuRootContext);
+  if (!ctx)
+    throw new Error("ContextMenu components must be used within ContextMenu");
+  return ctx;
+}
+
+function ContextMenu({ children }: { children: React.ReactNode }) {
+  const [position, setPosition] = React.useState<Position>(null);
+  const containersRef = React.useRef(new Set<HTMLElement>());
+
+  const isOpen = position !== null;
+
+  const openAt = React.useCallback((pos: { x: number; y: number }) => {
+    setPosition(pos);
+  }, []);
+
+  const close = React.useCallback(() => {
+    setPosition(null);
+  }, []);
+
+  const registerContainer = React.useCallback((el: HTMLElement | null) => {
+    if (el) containersRef.current.add(el);
+  }, []);
+
+  const unregisterContainer = React.useCallback((el: HTMLElement | null) => {
+    if (el) containersRef.current.delete(el);
+  }, []);
+
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close();
+    };
+    const handlePointerDown = (e: MouseEvent | PointerEvent) => {
+      const target = e.target as Node | null;
+      let inside = false;
+      containersRef.current.forEach((el) => {
+        if (el.contains(target as Node)) inside = true;
+      });
+      if (!inside) close();
+    };
+    window.addEventListener("keydown", handleKeyDown, true);
+    // Use bubble phase so capture-phase handlers inside the menu can stop propagation
+    window.addEventListener("pointerdown", handlePointerDown as any);
+    window.addEventListener("contextmenu", handlePointerDown as any);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, true);
+      window.removeEventListener("pointerdown", handlePointerDown as any);
+      window.removeEventListener("contextmenu", handlePointerDown as any);
+    };
+  }, [isOpen, close]);
+
+  const value = React.useMemo<ContextMenuState>(
+    () => ({
+      isOpen,
+      position,
+      openAt,
+      close,
+      registerContainer,
+      unregisterContainer,
+    }),
+    [isOpen, position, openAt, close, registerContainer, unregisterContainer],
+  );
+
   return (
-    <ContextMenuPrimitive.Root
-      data-slot="context-menu"
-      data-testid="context-menu"
-      {...props}
-    />
+    <ContextMenuRootContext.Provider value={value}>
+      <div data-slot="context-menu" data-testid="context-menu">
+        {children}
+      </div>
+    </ContextMenuRootContext.Provider>
   );
 }
 
-function ContextMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+type TriggerProps = {
+  asChild?: boolean;
+  children: React.ReactElement;
+} & React.HTMLAttributes<HTMLElement>;
+
+function ContextMenuTrigger({ asChild, children, ...rest }: TriggerProps) {
+  const { openAt } = useContextMenuRoot();
+
+  const onContextMenu = (e: React.MouseEvent<HTMLElement>) => {
+    if (rest.onContextMenu) rest.onContextMenu(e);
+    e.preventDefault();
+    e.stopPropagation();
+    openAt({ x: e.clientX, y: e.clientY });
+  };
+
+  if (asChild && React.isValidElement(children)) {
+    const childOnContextMenu = (children.props as any)?.onContextMenu as
+      | ((ev: React.MouseEvent<any>) => void)
+      | undefined;
+    const composedOnContextMenu = (e: React.MouseEvent<HTMLElement>) => {
+      if (childOnContextMenu) (childOnContextMenu as any)(e);
+      onContextMenu(e);
+    };
+    return React.cloneElement(
+      children as any,
+      {
+        onContextMenu: composedOnContextMenu,
+      } as any,
+    );
+  }
+
   return (
-    <ContextMenuPrimitive.Trigger
+    <span
       data-slot="context-menu-trigger"
       data-testid="context-menu-trigger"
-      {...props}
-    />
+      onContextMenu={onContextMenu}
+      {...rest}
+    >
+      {children}
+    </span>
   );
 }
 
 function ContextMenuGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  children,
+  className,
+}: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <ContextMenuPrimitive.Group
+    <div
       data-slot="context-menu-group"
       data-testid="context-menu-group"
-      {...props}
-    />
-  );
-}
-
-function ContextMenuPortal({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return (
-    <ContextMenuPrimitive.Portal
-      data-slot="context-menu-portal"
-      data-testid="context-menu-portal"
-      {...props}
-    />
-  );
-}
-
-function ContextMenuSub({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return (
-    <ContextMenuPrimitive.Sub
-      data-slot="context-menu-sub"
-      data-testid="context-menu-sub"
-      {...props}
-    />
+      className={className}
+    >
+      {children}
+    </div>
   );
 }
 
-function ContextMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot="context-menu-radio-group"
-      data-testid="context-menu-radio-group"
-      {...props}
-    />
-  );
+function ContextMenuPortal({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
 }
 
-function ContextMenuSubTrigger({
+function ContextMenuContent({
   className,
-  inset,
   children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
-}) {
-  return (
-    <ContextMenuPrimitive.SubTrigger
-      data-slot="context-menu-sub-trigger"
-      data-testid="context-menu-sub-trigger"
-      data-inset={inset}
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const { isOpen, position, close, registerContainer, unregisterContainer } =
+    useContextMenuRoot();
+  const contentRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => {
+    const el = contentRef.current;
+    registerContainer(el);
+    return () => unregisterContainer(el);
+  }, [registerContainer, unregisterContainer]);
+
+  if (!isOpen || !position) return null;
+
+  const OFFSET = 1;
+  const left = position.x + OFFSET;
+  const top = position.y + OFFSET;
+
+  const node = (
+    <div
+      ref={contentRef}
+      data-slot="context-menu-content"
+      data-testid="context-menu-content"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-visible rounded-md border font-light shadow-md",
         className,
       )}
-      {...props}
+      style={{ position: "fixed", left, top }}
+      onKeyDownCapture={(e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          close();
+        }
+      }}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
     >
       {children}
-      <ChevronRightIcon className="ml-auto" />
-    </ContextMenuPrimitive.SubTrigger>
+    </div>
   );
-}
 
-function ContextMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
-  return (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.SubContent
-        data-slot="context-menu-sub-content"
-        data-testid="context-menu-sub-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 font-light shadow-lg",
-          className,
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  );
+  return createPortal(node, document.body);
 }
 
-function ContextMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
-  return (
-    <ContextMenuPrimitive.Portal>
-      <ContextMenuPrimitive.Content
-        data-slot="context-menu-content"
-        data-testid="context-menu-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-visible rounded-md border font-light shadow-md",
-          className,
-        )}
-        {...props}
-      />
-    </ContextMenuPrimitive.Portal>
-  );
-}
+type ItemCommonProps = {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+  onSelect?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+  disabled?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
 
 function ContextMenuItem({
   className,
   inset,
   variant = "default",
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
-}) {
+  onClick,
+  onSelect,
+  ...rest
+}: ItemCommonProps) {
+  const { close } = useContextMenuRoot();
+  const disabled = rest.disabled ?? false;
+
+  const handle = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    if (onClick) onClick(e);
+    if (onSelect) onSelect(e);
+    close();
+  };
   return (
-    <ContextMenuPrimitive.Item
+    <div
+      role="menuitem"
       data-slot="context-menu-item"
       data-testid="context-menu-item"
       data-inset={inset}
       data-variant={variant}
+      data-disabled={disabled ? "" : undefined}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
         className,
       )}
-      {...props}
+      onClick={handle}
+      {...rest}
     />
   );
 }
@@ -167,63 +249,99 @@ function ContextMenuCheckboxItem({
   className,
   children,
   checked,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  onClick,
+  ...rest
+}: {
+  className?: string;
+  children?: React.ReactNode;
+  checked?: boolean;
+  disabled?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>) {
+  const { close } = useContextMenuRoot();
+  const handle = (e: React.MouseEvent<HTMLDivElement>) => {
+    if ((rest as any).disabled) return;
+    if (onClick) onClick(e);
+    close();
+  };
   return (
-    <ContextMenuPrimitive.CheckboxItem
+    <div
       data-slot="context-menu-checkbox-item"
       data-testid="context-menu-checkbox-item"
+      data-disabled={(rest as any).disabled ? "" : undefined}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
         className,
       )}
-      checked={checked}
-      {...props}
+      onClick={handle}
+      {...rest}
     >
       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </ContextMenuPrimitive.ItemIndicator>
+        {checked ? <CheckIcon className="size-4" /> : null}
       </span>
       {children}
-    </ContextMenuPrimitive.CheckboxItem>
+    </div>
+  );
+}
+
+function ContextMenuRadioGroup({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      data-slot="context-menu-radio-group"
+      data-testid="context-menu-radio-group"
+    >
+      {children}
+    </div>
   );
 }
 
 function ContextMenuRadioItem({
   className,
   children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  checked,
+  onClick,
+  ...rest
+}: {
+  className?: string;
+  children?: React.ReactNode;
+  checked?: boolean;
+  disabled?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>) {
+  const { close } = useContextMenuRoot();
+  const handle = (e: React.MouseEvent<HTMLDivElement>) => {
+    if ((rest as any).disabled) return;
+    if (onClick) onClick(e);
+    close();
+  };
   return (
-    <ContextMenuPrimitive.RadioItem
+    <div
       data-slot="context-menu-radio-item"
       data-testid="context-menu-radio-item"
+      data-disabled={(rest as any).disabled ? "" : undefined}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
         className,
       )}
-      {...props}
+      onClick={handle}
+      {...rest}
     >
       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <ContextMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </ContextMenuPrimitive.ItemIndicator>
+        {checked ? <CircleIcon className="size-2 fill-current" /> : null}
       </span>
       {children}
-    </ContextMenuPrimitive.RadioItem>
+    </div>
   );
 }
 
 function ContextMenuLabel({
   className,
   inset,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  ...rest
+}: {
+  className?: string;
   inset?: boolean;
-}) {
+} & React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <ContextMenuPrimitive.Label
+    <div
       data-slot="context-menu-label"
       data-testid="context-menu-label"
       data-inset={inset}
@@ -231,28 +349,29 @@ function ContextMenuLabel({
         "text-foreground px-2 py-1.5 text-xs font-light data-[inset]:pl-8",
         className,
       )}
-      {...props}
+      {...rest}
     />
   );
 }
 
 function ContextMenuSeparator({
   className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  ...rest
+}: React.HTMLAttributes<HTMLDivElement>) {
   return (
-    <ContextMenuPrimitive.Separator
+    <div
+      role="separator"
       data-slot="context-menu-separator"
       data-testid="context-menu-separator"
       className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
+      {...rest}
     />
   );
 }
 
 function ContextMenuShortcut({
   className,
-  ...props
+  ...rest
 }: React.ComponentProps<"span">) {
   return (
     <span
@@ -262,11 +381,135 @@ function ContextMenuShortcut({
         "text-muted-foreground ml-auto text-xs tracking-widest",
         className,
       )}
-      {...props}
+      {...rest}
     />
   );
 }
 
+// Submenu
+interface SubmenuContextState {
+  isOpen: boolean;
+  setOpen: (open: boolean) => void;
+  triggerRef: React.RefObject<HTMLDivElement | null>;
+}
+
+const SubmenuContext = React.createContext<SubmenuContextState | null>(null);
+
+function ContextMenuSub({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = React.useRef<HTMLDivElement>(null);
+  const value = React.useMemo(
+    () => ({ isOpen: open, setOpen, triggerRef }),
+    [open],
+  );
+  return (
+    <SubmenuContext.Provider value={value}>
+      <div data-slot="context-menu-sub" data-testid="context-menu-sub">
+        {children}
+      </div>
+    </SubmenuContext.Provider>
+  );
+}
+
+function useSubmenu(): SubmenuContextState {
+  const ctx = React.useContext(SubmenuContext);
+  if (!ctx)
+    throw new Error(
+      "ContextMenuSub components must be used within ContextMenuSub",
+    );
+  return ctx;
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  disabled,
+  ...rest
+}: {
+  className?: string;
+  inset?: boolean;
+  children?: React.ReactNode;
+  disabled?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>) {
+  const { setOpen, triggerRef } = useSubmenu();
+
+  const openSub = (e: React.SyntheticEvent) => {
+    e.stopPropagation();
+    if (!disabled) setOpen(true);
+  };
+
+  return (
+    <div
+      ref={triggerRef}
+      data-slot="context-menu-sub-trigger"
+      data-testid="context-menu-sub-trigger"
+      data-inset={inset}
+      data-disabled={disabled ? "" : undefined}
+      className={cn(
+        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        className,
+      )}
+      onMouseEnter={openSub}
+      onClick={openSub}
+      {...rest}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </div>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  children,
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const { isOpen, setOpen, triggerRef } = useSubmenu();
+  const { registerContainer, unregisterContainer } = useContextMenuRoot();
+  const ref = React.useRef<HTMLDivElement | null>(null);
+
+  const [coords, setCoords] = React.useState<{ left: number; top: number }>({
+    left: 0,
+    top: 0,
+  });
+
+  React.useEffect(() => {
+    const trig = triggerRef.current;
+    if (!trig) return;
+    const rect = trig.getBoundingClientRect();
+    setCoords({ left: rect.right, top: rect.top });
+  }, [triggerRef.current, isOpen]);
+
+  React.useEffect(() => {
+    const el = ref.current;
+    registerContainer(el);
+    return () => unregisterContainer(el);
+  }, [registerContainer, unregisterContainer]);
+
+  if (!isOpen) return null;
+
+  const node = (
+    <div
+      ref={ref}
+      data-slot="context-menu-sub-content"
+      data-testid="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 font-light shadow-lg",
+        className,
+      )}
+      style={{ position: "fixed", left: coords.left, top: coords.top }}
+      onMouseLeave={() => setOpen(false)}
+      onMouseEnter={() => setOpen(true)}
+      onMouseDownCapture={(e) => e.stopPropagation()}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {children}
+    </div>
+  );
+
+  return createPortal(node, document.body);
+}
+
 export {
   ContextMenu,
   ContextMenuCheckboxItem,

package/src/components/ui/dialog.tsx

@@ -50,13 +50,15 @@ function DialogContent({
   className,
   children,
   showCloseButton = true,
+  overlayClassName,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
+  overlayClassName?: string;
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
+      <DialogOverlay className={overlayClassName} />
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(