wehub-resource-sync
566 lines
17 KiB
TypeScript
566 lines
17 KiB
TypeScript
//@ts-nocheck
|
|
"use client";
|
|
|
|
import * as React from "react";
|
|
import { createPortal } from "react-dom";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import type { HTMLMotionProps } from "framer-motion";
|
|
import { cn } from "@/utils/cn";
|
|
import { useDropdownHover } from "@/components/hooks/use-dropdown-hover";
|
|
|
|
interface MenuContextValue {
|
|
open: boolean;
|
|
setOpen: (open: boolean) => void;
|
|
triggerRef: React.RefObject<HTMLElement>;
|
|
}
|
|
|
|
const MenuContext = React.createContext<MenuContextValue | undefined>(
|
|
undefined,
|
|
);
|
|
|
|
function useMenu() {
|
|
const context = React.useContext(MenuContext);
|
|
if (!context) {
|
|
throw new Error("useMenu must be used within a Menu");
|
|
}
|
|
return context;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* Menu
|
|
* -----------------------------------------------------------------------------------------------*/
|
|
|
|
interface MenuProps {
|
|
open?: boolean;
|
|
onOpenChange?: (open: boolean) => void;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function Menu({
|
|
open: controlledOpen,
|
|
onOpenChange,
|
|
children,
|
|
}: MenuProps) {
|
|
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
|
|
const triggerRef = React.useRef<HTMLElement>(null);
|
|
|
|
const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
|
|
const setOpen = React.useCallback(
|
|
(value: boolean) => {
|
|
if (controlledOpen === undefined) {
|
|
setUncontrolledOpen(value);
|
|
}
|
|
onOpenChange?.(value);
|
|
},
|
|
[controlledOpen, onOpenChange],
|
|
);
|
|
|
|
return (
|
|
<MenuContext.Provider value={{ open, setOpen, triggerRef }}>
|
|
{children}
|
|
</MenuContext.Provider>
|
|
);
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuTrigger
|
|
* -----------------------------------------------------------------------------------------------*/
|
|
|
|
interface MenuTriggerProps
|
|
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
asChild?: boolean;
|
|
}
|
|
|
|
export const MenuTrigger = React.forwardRef<
|
|
HTMLButtonElement,
|
|
MenuTriggerProps
|
|
>(({ onClick, asChild, children, ...props }, forwardedRef) => {
|
|
const { open, setOpen, triggerRef } = useMenu();
|
|
|
|
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
onClick?.(e);
|
|
if (!e.defaultPrevented) {
|
|
setOpen(!open);
|
|
}
|
|
};
|
|
|
|
const setRefs = React.useCallback(
|
|
(node: HTMLElement | null) => {
|
|
if (forwardedRef) {
|
|
if (typeof forwardedRef === "function") {
|
|
forwardedRef(node as HTMLButtonElement);
|
|
} else {
|
|
forwardedRef.current = node as HTMLButtonElement;
|
|
}
|
|
}
|
|
(triggerRef as React.MutableRefObject<HTMLElement | null>).current = node;
|
|
},
|
|
[forwardedRef, triggerRef],
|
|
);
|
|
|
|
if (asChild && React.isValidElement(children)) {
|
|
const childOnClick = (children as any).props?.onClick as
|
|
| ((e: React.MouseEvent<any>) => void)
|
|
| undefined;
|
|
return React.cloneElement(children as any, {
|
|
...props,
|
|
ref: setRefs,
|
|
onClick: (e: React.MouseEvent<any>) => {
|
|
// Invoke child's onClick first so it can prevent default behavior
|
|
childOnClick?.(e);
|
|
if (e.defaultPrevented) return;
|
|
// Fall back to MenuTrigger's own click handler
|
|
handleClick(e as any);
|
|
},
|
|
});
|
|
}
|
|
|
|
return (
|
|
<button ref={setRefs} onClick={handleClick} {...props}>
|
|
{children}
|
|
</button>
|
|
);
|
|
});
|
|
|
|
MenuTrigger.displayName = "MenuTrigger";
|
|
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuContent
|
|
* -----------------------------------------------------------------------------------------------*/
|
|
|
|
interface MenuContentProps extends Omit<HTMLMotionProps<"div">, "ref"> {
|
|
align?: "start" | "center" | "end";
|
|
side?: "top" | "bottom" | "left" | "right";
|
|
sideOffset?: number;
|
|
alignOffset?: number;
|
|
matchTriggerWidth?: boolean;
|
|
}
|
|
|
|
function MenuPortal({
|
|
children,
|
|
open,
|
|
}: {
|
|
children: React.ReactNode;
|
|
open: boolean;
|
|
}) {
|
|
const [shouldRender, setShouldRender] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
if (open) {
|
|
setShouldRender(true);
|
|
}
|
|
}, [open]);
|
|
|
|
if (!shouldRender) return null;
|
|
|
|
return createPortal(
|
|
<AnimatePresence
|
|
onExitComplete={() => {
|
|
if (!open) {
|
|
setShouldRender(false);
|
|
}
|
|
}}
|
|
>
|
|
{children}
|
|
</AnimatePresence>,
|
|
document.body,
|
|
);
|
|
}
|
|
|
|
export const MenuContent = React.forwardRef<HTMLDivElement, MenuContentProps>(
|
|
(
|
|
{
|
|
className,
|
|
align = "start",
|
|
side = "bottom",
|
|
sideOffset = 8,
|
|
alignOffset = 0,
|
|
matchTriggerWidth = false,
|
|
children,
|
|
...props
|
|
},
|
|
ref,
|
|
) => {
|
|
const { open, setOpen, triggerRef } = useMenu();
|
|
const [position, setPosition] = React.useState<{
|
|
top: number;
|
|
left: number;
|
|
} | null>(null);
|
|
const [menuWidth, setMenuWidth] = React.useState<number>(0);
|
|
const menuRef = React.useRef<HTMLDivElement | null>(null);
|
|
|
|
React.useEffect(() => {
|
|
if (open && triggerRef.current) {
|
|
const updatePosition = () => {
|
|
if (!triggerRef.current) return;
|
|
|
|
const rect = triggerRef.current.getBoundingClientRect();
|
|
const menuPosition = { top: 0, left: 0 };
|
|
|
|
// Calculate vertical position based on side
|
|
if (side === "top") {
|
|
menuPosition.top = rect.top - sideOffset;
|
|
} else if (side === "bottom") {
|
|
menuPosition.top = rect.bottom + sideOffset;
|
|
} else if (side === "left" || side === "right") {
|
|
menuPosition.top = rect.top;
|
|
}
|
|
|
|
// Calculate horizontal position based on side and alignment
|
|
if (side === "left") {
|
|
menuPosition.left = rect.left - sideOffset;
|
|
} else if (side === "right") {
|
|
menuPosition.left = rect.right + sideOffset;
|
|
} else if (side === "top" || side === "bottom") {
|
|
// For top/bottom placement, handle alignment
|
|
if (align === "start") {
|
|
menuPosition.left = rect.left + alignOffset;
|
|
} else if (align === "center") {
|
|
menuPosition.left = rect.left + rect.width / 2;
|
|
} else if (align === "end") {
|
|
menuPosition.left = rect.right + alignOffset;
|
|
}
|
|
}
|
|
|
|
setPosition(menuPosition);
|
|
if (matchTriggerWidth) {
|
|
setMenuWidth(rect.width);
|
|
}
|
|
};
|
|
|
|
// Initial position calculation
|
|
updatePosition();
|
|
|
|
// Update position on scroll/resize
|
|
window.addEventListener("scroll", updatePosition, true);
|
|
window.addEventListener("resize", updatePosition);
|
|
|
|
return () => {
|
|
window.removeEventListener("scroll", updatePosition, true);
|
|
window.removeEventListener("resize", updatePosition);
|
|
};
|
|
}
|
|
}, [
|
|
open,
|
|
side,
|
|
align,
|
|
sideOffset,
|
|
alignOffset,
|
|
matchTriggerWidth,
|
|
triggerRef,
|
|
]);
|
|
|
|
// Separate effect to handle menu width calculations after render
|
|
React.useEffect(() => {
|
|
if (open && position && menuRef.current && triggerRef.current) {
|
|
const rect = triggerRef.current.getBoundingClientRect();
|
|
const menuRect = menuRef.current.getBoundingClientRect();
|
|
|
|
// Adjust position for end alignment
|
|
if (align === "end" && (side === "top" || side === "bottom")) {
|
|
setPosition((prev) => ({
|
|
...prev!,
|
|
left: rect.right - menuRect.width + alignOffset,
|
|
}));
|
|
} else if (
|
|
align === "center" &&
|
|
(side === "top" || side === "bottom")
|
|
) {
|
|
setPosition((prev) => ({
|
|
...prev!,
|
|
left: rect.left + rect.width / 2 - menuRect.width / 2,
|
|
}));
|
|
}
|
|
}
|
|
}, [open, position, align, side, alignOffset]);
|
|
|
|
return (
|
|
<MenuPortal open={open}>
|
|
{open && position && (
|
|
<>
|
|
{/* Backdrop */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 z-[90]"
|
|
onClick={() => setOpen(false)}
|
|
/>
|
|
|
|
{/* Menu */}
|
|
<motion.div
|
|
ref={(node: HTMLDivElement | null) => {
|
|
if (ref) {
|
|
if (typeof ref === "function") {
|
|
ref(node);
|
|
}
|
|
}
|
|
menuRef.current = node;
|
|
}}
|
|
initial={{ opacity: 0, y: -6, scale: 1, filter: "blur(1px)" }}
|
|
animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
|
|
exit={{ opacity: 0, y: 8, scale: 0.98, filter: "blur(1px)" }}
|
|
transition={{
|
|
ease: [0.1, 0.1, 0.25, 1],
|
|
duration: 0.2,
|
|
}}
|
|
className={cn(
|
|
"fixed z-[100] min-w-[8rem] overflow-hidden rounded-16 border border-border-faint bg-white",
|
|
className,
|
|
)}
|
|
style={{
|
|
top: position.top,
|
|
left: position.left,
|
|
boxShadow:
|
|
"0px 12px 24px rgba(0, 0, 0, 0.08), 0px 4px 8px rgba(0, 0, 0, 0.04)",
|
|
width: matchTriggerWidth && menuWidth ? menuWidth : undefined,
|
|
transform: (() => {
|
|
let transforms = [];
|
|
|
|
// Handle vertical transforms for top/bottom sides
|
|
if (side === "top") {
|
|
transforms.push("translateY(-100%)");
|
|
}
|
|
|
|
// Handle horizontal transforms for left/right sides
|
|
if (side === "left") {
|
|
transforms.push("translateX(-100%)");
|
|
}
|
|
|
|
// No transform needed for align="end" since we calculate position directly
|
|
if (side === "top" || side === "bottom") {
|
|
if (align === "center") {
|
|
// Center alignment already handled in position calculation
|
|
}
|
|
} else if (side === "left" || side === "right") {
|
|
if (align === "center") {
|
|
transforms.push("translateY(-50%)");
|
|
} else if (align === "end") {
|
|
transforms.push("translateY(-100%)");
|
|
}
|
|
}
|
|
|
|
return transforms.join(" ") || undefined;
|
|
})(),
|
|
}}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
</>
|
|
)}
|
|
</MenuPortal>
|
|
);
|
|
},
|
|
);
|
|
|
|
MenuContent.displayName = "MenuContent";
|
|
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuItem
|
|
* -----------------------------------------------------------------------------------------------*/
|
|
|
|
interface MenuItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
inset?: boolean;
|
|
variant?: "default" | "danger" | "active" | "ghost";
|
|
}
|
|
|
|
export const MenuItem = React.forwardRef<HTMLButtonElement, MenuItemProps>(
|
|
(
|
|
{ className, inset, onClick, variant = "default", children, ...props },
|
|
ref,
|
|
) => {
|
|
const { setOpen } = useMenu();
|
|
|
|
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
onClick?.(e);
|
|
if (!e.defaultPrevented) {
|
|
setOpen(false);
|
|
}
|
|
};
|
|
|
|
const baseStyles =
|
|
"relative flex w-full cursor-pointer select-none items-center gap-8 rounded-12 px-8 py-6 min-h-[36px] text-sm outline-none transition-all data-[disabled]:pointer-events-none data-[disabled]:opacity-50 active:scale-[0.98]";
|
|
|
|
const variantStyles = {
|
|
default:
|
|
"text-foreground-dimmer hover:text-foreground hover:bg-transparent",
|
|
danger: "text-red-600/70 hover:text-red-600 hover:bg-red-50",
|
|
active: "text-heat-100 bg-heat-8 hover:bg-heat-12",
|
|
ghost: "hover:bg-transparent",
|
|
};
|
|
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
className={cn(
|
|
baseStyles,
|
|
variantStyles[variant],
|
|
inset && "pl-14",
|
|
className,
|
|
)}
|
|
onClick={handleClick}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
},
|
|
);
|
|
|
|
MenuItem.displayName = "MenuItem";
|
|
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuLabel
|
|
* -----------------------------------------------------------------------------------------------*/
|
|
|
|
interface MenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
inset?: boolean;
|
|
}
|
|
|
|
export const MenuLabel = React.forwardRef<HTMLDivElement, MenuLabelProps>(
|
|
({ className, inset, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"px-8 py-1.5 text-sm font-semibold",
|
|
inset && "pl-8",
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
),
|
|
);
|
|
|
|
MenuLabel.displayName = "MenuLabel";
|
|
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuSeparator
|
|
* -----------------------------------------------------------------------------------------------*/
|
|
|
|
export const MenuSeparator = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn("mx-0 my-1 h-px bg-border-faint", className)}
|
|
{...props}
|
|
/>
|
|
));
|
|
|
|
MenuSeparator.displayName = "MenuSeparator";
|
|
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuGroup
|
|
* -----------------------------------------------------------------------------------------------*/
|
|
|
|
interface MenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
withHoverBackground?: boolean;
|
|
}
|
|
|
|
export const MenuGroup = React.forwardRef<HTMLDivElement, MenuGroupProps>(
|
|
({ className, withHoverBackground = true, children, ...props }, ref) => {
|
|
const { backgroundRef, onMouseEnter, onMouseLeave, onClick } =
|
|
useDropdownHover();
|
|
|
|
if (withHoverBackground) {
|
|
// Clone children and add hover handlers
|
|
const enhancedChildren = React.Children.map(children, (child) => {
|
|
if (React.isValidElement(child) && child.type === MenuItem) {
|
|
const isActive = child.props.variant === "active";
|
|
const isDanger = child.props.variant === "danger";
|
|
// Don't apply hover background to active or danger items
|
|
const shouldApplyHoverBg = !isActive && !isDanger;
|
|
|
|
return React.cloneElement(child as React.ReactElement<any>, {
|
|
onMouseEnter: shouldApplyHoverBg
|
|
? (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
onMouseEnter(e);
|
|
child.props.onMouseEnter?.(e);
|
|
}
|
|
: child.props.onMouseEnter,
|
|
onMouseLeave: shouldApplyHoverBg
|
|
? (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
onMouseLeave();
|
|
child.props.onMouseLeave?.(e);
|
|
}
|
|
: child.props.onMouseLeave,
|
|
onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
|
|
if (shouldApplyHoverBg) onClick(e);
|
|
child.props.onClick?.(e);
|
|
},
|
|
});
|
|
}
|
|
return child;
|
|
});
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn("relative space-y-2 px-8 py-2", className)}
|
|
{...props}
|
|
>
|
|
<div
|
|
className="absolute top-0 left-8 right-8 opacity-0 z-[1] pointer-events-none bg-black-alpha-4 rounded-12 h-36"
|
|
ref={backgroundRef}
|
|
/>
|
|
{enhancedChildren}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn("space-y-2 px-8 py-2", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
MenuGroup.displayName = "MenuGroup";
|
|
|
|
/* -------------------------------------------------------------------------------------------------
|
|
* MenuHeader
|
|
* -----------------------------------------------------------------------------------------------*/
|
|
|
|
export { MenuHeader } from "./menu-header";
|
|
|
|
/*
|
|
* Example Usage:
|
|
*
|
|
* <Menu>
|
|
* <MenuTrigger asChild>
|
|
* <button>Open Menu</button>
|
|
* </MenuTrigger>
|
|
* <MenuContent className="w-256">
|
|
* <MenuHeader title="Title" onClose={() => setOpen(false)} />
|
|
*
|
|
* <MenuGroup>
|
|
* <MenuItem onClick={handleAction}>
|
|
* <Icon className="w-16 h-16" />
|
|
* <span>Action Item</span>
|
|
* </MenuItem>
|
|
*
|
|
* <MenuItem variant="active">
|
|
* <span>Active Item</span>
|
|
* </MenuItem>
|
|
*
|
|
* <MenuSeparator className="!my-2" />
|
|
*
|
|
* <MenuItem variant="danger" onClick={handleDelete}>
|
|
* <span>Delete</span>
|
|
* </MenuItem>
|
|
* </MenuGroup>
|
|
* </MenuContent>
|
|
* </Menu>
|
|
*
|
|
* MenuGroup automatically handles hover background animations
|
|
* MenuItem has built-in styling with variants: default, active, danger, ghost
|
|
* All padding and spacing is handled centrally
|
|
*/
|