"use client"; // Adapted from beui.dev/components/blocks/expandable-action-bar import { Archive, Bell, Copy, Download, Send, Settings, } from "lucide-react"; import { AnimatePresence, LayoutGroup, motion, type Transition, useReducedMotion, } from "motion/react"; import { type FocusEvent, type MouseEvent, type PointerEvent, type ReactNode, type RefObject, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; /* -------------------------------------------------------------------------- */ /* Inlined touch / gesture helpers (self-contained registry file) */ /* -------------------------------------------------------------------------- */ const isHoveringPointer = (event: { pointerType: string; buttons: number; }) => event.pointerType !== "touch" && event.buttons === 0; type DismissBehavior = "pass-through" | "consume"; interface DismissOptions { behavior?: DismissBehavior; escape?: boolean; ignore?: (target: Element) => boolean; } const openScopes = new Set<(target: Element) => boolean>(); function claimedByAnotherScope( self: (target: Element) => boolean, target: Element, ) { for (const scope of openScopes) { if (scope !== self && scope(target)) return true; } return false; } function consumeActivation(source: Event) { const swallow = (event: globalThis.MouseEvent) => { event.preventDefault(); event.stopPropagation(); release(); }; const restart = (event: Event) => { if (event !== source) release(); }; const release = () => { window.removeEventListener("click", swallow, true); window.removeEventListener("pointerdown", restart, true); window.removeEventListener("pointercancel", restart, true); window.removeEventListener("keydown", release, true); }; window.addEventListener("click", swallow, true); window.addEventListener("pointerdown", restart, true); window.addEventListener("pointercancel", restart, true); window.addEventListener("keydown", release, true); } function useDismiss( open: boolean, onDismiss: () => void, ref: RefObject | null, { behavior = "pass-through", escape: dismissOnEscape = true, ignore, }: DismissOptions = {}, ) { useEffect(() => { if (!open) return; const inside = (target: Element) => Boolean(ref?.current?.contains(target)) || Boolean(ignore?.(target)); const onKey = (event: KeyboardEvent) => { if (dismissOnEscape && event.key === "Escape") onDismiss(); }; const onPointer = (event: globalThis.PointerEvent) => { const target = event.target as Element | null; if (!target || inside(target)) return; if (behavior === "consume" && !claimedByAnotherScope(inside, target)) { consumeActivation(event); } onDismiss(); }; openScopes.add(inside); window.addEventListener("keydown", onKey); window.addEventListener("pointerdown", onPointer, true); return () => { openScopes.delete(inside); window.removeEventListener("keydown", onKey); window.removeEventListener("pointerdown", onPointer, true); }; }, [open, onDismiss, ref, behavior, dismissOnEscape, ignore]); } interface BoundaryEvent { pointerId: number; pointerType: string; buttons: number; } interface HoverGesture { enter: (event: BoundaryEvent) => boolean; leave: (event: BoundaryEvent) => boolean; } function useHoverGesture(): HoverGesture { const contact = useRef(new Set()); return useMemo( () => ({ enter: (event) => { if (isHoveringPointer(event)) { contact.current.delete(event.pointerId); return true; } contact.current.add(event.pointerId); return false; }, leave: (event) => { const arrivedInContact = contact.current.delete(event.pointerId); return !arrivedInContact && event.pointerType !== "touch"; }, }), [], ); } interface TapRecord { pointerType: string; state: S; } interface TapGesture { start: (event: { pointerType: string }, state: S) => void; take: () => TapRecord | null; drop: () => void; } function useTapGesture(): TapGesture { const record = useRef | null>(null); return useMemo( () => ({ start: (event, state) => { record.current = { pointerType: event.pointerType, state }; }, take: () => { const spent = record.current; record.current = null; return spent; }, drop: () => { record.current = null; }, }), [], ); } /* -------------------------------------------------------------------------- */ /* ExpandableActionBar */ /* -------------------------------------------------------------------------- */ export type ExpandableActionBarSize = "sm" | "md"; export type ExpandableActionBarItem = { id: string; label: ReactNode; icon: ReactNode; onClick?: () => void; disabled?: boolean; active?: boolean; badge?: ReactNode; shortcut?: ReactNode; }; export type ExpandableActionBarClassNames = { root?: string; track?: string; item?: string; activeItem?: string; icon?: string; label?: string; badge?: string; shortcut?: string; }; export interface ExpandableActionBarProps { items: ExpandableActionBarItem[]; expanded?: boolean; defaultExpanded?: boolean; onExpandedChange?: (expanded: boolean) => void; activeId?: string; onAction?: (item: ExpandableActionBarItem) => void; size?: ExpandableActionBarSize; /** * Expand when a hovering pointer rests on the bar. Default true. * On touch: first tap expands (no action), second tap acts. */ expandOnHover?: boolean; expandOnFocus?: boolean; collapseDelay?: number; className?: string; classNames?: ExpandableActionBarClassNames; renderItem?: ( item: ExpandableActionBarItem, state: { expanded: boolean; active: boolean }, ) => ReactNode; } const ITEM_TRANSITION: Transition = { type: "spring", stiffness: 460, damping: 34, mass: 0.62, }; const LABEL_TRANSITION: Transition = { type: "spring", stiffness: 380, damping: 32, mass: 0.7, }; const SIZE_CLASS: Record = { sm: "min-h-9 gap-1 p-1 text-xs", md: "min-h-11 gap-1.5 p-1.5 text-sm", }; const ITEM_SIZE_CLASS: Record = { sm: "h-7 min-w-7 px-1.5", md: "h-8 min-w-8 px-2", }; const ICON_SIZE_CLASS: Record = { sm: "h-3.5 w-3.5", md: "h-4 w-4", }; function useControllableExpanded({ expanded, defaultExpanded, onExpandedChange, }: { expanded?: boolean; defaultExpanded?: boolean; onExpandedChange?: (expanded: boolean) => void; }) { const [internalExpanded, setInternalExpanded] = useState( defaultExpanded ?? false, ); const isControlled = expanded !== undefined; const value = expanded ?? internalExpanded; const setValue = useCallback( (next: boolean) => { if (!isControlled) setInternalExpanded(next); onExpandedChange?.(next); }, [isControlled, onExpandedChange], ); return [value, setValue] as const; } export function ExpandableActionBar({ items, expanded, defaultExpanded = false, onExpandedChange, activeId, onAction, size = "md", expandOnHover = true, expandOnFocus = true, collapseDelay = 90, className, classNames, renderItem, }: ExpandableActionBarProps) { const reduce = useReducedMotion(); const layoutId = useId(); const [isExpanded, setIsExpanded] = useControllableExpanded({ expanded, defaultExpanded, onExpandedChange, }); const [hoveredId, setHoveredId] = useState(null); const [tapExpanded, setTapExpanded] = useState(false); const collapseTimer = useRef(null); const trackRef = useRef(null); const tap = useTapGesture(); const hover = useHoverGesture(); const clearCollapseTimer = useCallback(() => { if (collapseTimer.current) window.clearTimeout(collapseTimer.current); collapseTimer.current = null; }, []); const open = useCallback(() => { clearCollapseTimer(); setIsExpanded(true); }, [clearCollapseTimer, setIsExpanded]); const close = useCallback(() => { clearCollapseTimer(); const timer = window.setTimeout(() => { setIsExpanded(false); setHoveredId(null); setTapExpanded(false); }, collapseDelay); collapseTimer.current = timer; }, [clearCollapseTimer, collapseDelay, setIsExpanded]); useEffect(() => clearCollapseTimer, [clearCollapseTimer]); const wasExpanded = useRef(isExpanded); useEffect(() => { if (wasExpanded.current && !isExpanded) setTapExpanded(false); wasExpanded.current = isExpanded; }, [isExpanded]); useDismiss(tapExpanded && isExpanded, close, trackRef, { behavior: "consume", }); const onRootPointerEnter = (event: PointerEvent) => { if (hover.enter(event) && expandOnHover) open(); }; const onRootPointerLeave = (event: PointerEvent) => { if (!hover.leave(event)) return; setHoveredId(null); if (expandOnHover) close(); }; const onRootFocus = () => { if (expandOnFocus) open(); }; const onRootBlur = (event: FocusEvent) => { if ( !event.currentTarget.contains(event.relatedTarget as Node) && expandOnFocus ) { close(); } }; const activeItemId = activeId ?? items.find((item) => item.active)?.id; const highlightId = hoveredId ?? activeItemId; return ( {items.map((item) => { const isActive = item.active || activeId === item.id; const isHighlighted = highlightId === item.id; return ( ) => { if (!hover.enter(event)) return; clearCollapseTimer(); setHoveredId(item.id); }} onPointerDown={(event: PointerEvent) => { tap.start(event, isExpanded); }} onPointerCancel={tap.drop} onKeyDown={tap.drop} onClick={(event: MouseEvent) => { event.currentTarget.blur(); const gesture = tap.take(); const firstTap = gesture !== null && gesture.pointerType !== "mouse" && !gesture.state && !tapExpanded; if (firstTap && expandOnHover) { setTapExpanded(true); open(); setHoveredId(item.id); return; } item.onClick?.(); onAction?.(item); }} whileTap={reduce || item.disabled ? undefined : { scale: 0.96 }} transition={ITEM_TRANSITION} className={cn( "relative isolate inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full font-medium text-muted-foreground outline-none transition-[color,background-color] duration-150 ease-out", "focus-visible:text-foreground disabled:pointer-events-none disabled:opacity-40", isHighlighted && "text-foreground", ITEM_SIZE_CLASS[size], classNames?.item, isActive && classNames?.activeItem, )} > {isHighlighted ? ( ) : null} {renderItem ? ( renderItem(item, { expanded: isExpanded, active: isActive }) ) : ( <> {item.icon} {item.label} {item.shortcut ? ( {item.shortcut} ) : null} {item.badge ? ( {item.badge} ) : null} )} ); })} ); } export function useExpandableActionBar(items: ExpandableActionBarItem[]) { const [expanded, setExpanded] = useState(false); const [activeId, setActiveId] = useState(items[0]?.id); const activeItem = useMemo( () => items.find((item) => item.id === activeId), [activeId, items], ); return useMemo( () => ({ expanded, setExpanded, activeId, setActiveId, activeItem }), [activeId, activeItem, expanded], ); } /* -------------------------------------------------------------------------- */ /* Demo */ /* -------------------------------------------------------------------------- */ const ACTIONS: ExpandableActionBarItem[] = [ { id: "send", label: "ارسال", icon: , shortcut: "S", }, { id: "copy", label: "کپی", icon: , shortcut: "C", }, { id: "download", label: "خروجی", icon: , shortcut: "E", }, { id: "archive", label: "بایگانی", icon: , }, { id: "alerts", label: "هشدارها", icon: , badge: "۳", }, { id: "settings", label: "تنظیمات", icon: , }, ]; /** پیش‌نمایش فارسی — نوار اکشن جمع‌شونده با لیبل روی هاور/فوکوس. */ export default function ExpandableActionBarExample() { const [expanded, setExpanded] = useState(false); const [activeId, setActiveId] = useState("send"); const items = useMemo( () => ACTIONS.map((item) => ({ ...item, active: item.id === activeId, })), [activeId], ); return (

setActiveId(item.id)} classNames={{ item: "group", }} />
setExpanded((current) => !current)} className="relative flex h-9 w-30 items-center justify-center overflow-hidden rounded-full border border-border bg-card text-xs font-medium text-foreground transition-colors hover:bg-muted" whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.96 }} > {expanded ? "جمع کردن" : "باز کردن"}
); }