Overflow Actions

1"use client";
2// beui.dev/components/blocks/overflow-actions
3 
4import { MoreHorizontal, X } from "lucide-react";
5import {
6  AnimatePresence,
7  motion,
8  useReducedMotion,
9  type Transition,
10  type Variants,
11} from "motion/react";
12import {
13  useCallback,
14  useId,
15  useLayoutEffect,
16  useRef,
17  useState,
18  type ReactNode,
19} from "react";
20import { EASE_OUT } from "@/lib/ease";
21import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
22import { cn } from "@/lib/utils";
23 
24export type OverflowActionsSize = "sm" | "md";
25 
26export type OverflowActionItem = {
27  id: string;
28  label: ReactNode;
29  icon?: ReactNode;
30  onClick?: () => void;
31  disabled?: boolean;
32  ariaLabel?: string;
33};
34 
35export type OverflowActionsClassNames = {
36  root?: string;
37  track?: string;
38  action?: string;
39  primaryAction?: string;
40  overflowAction?: string;
41  toggle?: string;
42  icon?: string;
43  label?: string;
44};
45 
46export interface OverflowActionsProps {
47  primaryActions: OverflowActionItem[];
48  overflowActions: OverflowActionItem[];
49  expanded?: boolean;
50  defaultExpanded?: boolean;
51  onExpandedChange?: (expanded: boolean) => void;
52  onAction?: (item: OverflowActionItem) => void;
53  collapseOnAction?: boolean;
54  size?: OverflowActionsSize;
55  openLabel?: string;
56  closeLabel?: string;
57  className?: string;
58  classNames?: OverflowActionsClassNames;
59}
60 
61// This needs a softer layout spring than the app defaults so the overflow group
62// stays visually attached to the toggle while entering and leaving.
63const SHELL_TRANSITION: Transition = {
64  type: "spring",
65  stiffness: 220,
66  damping: 17,
67  mass: 0.85,
68};
69 
70const ICON_VARIANTS: Variants = {
71  hidden: { opacity: 0, filter: "blur(3px)" },
72  visible: {
73    opacity: 1,
74    filter: "blur(0px)",
75    transition: { duration: 0.18, ease: EASE_OUT },
76  },
77  exit: {
78    opacity: 0,
79    filter: "blur(3px)",
80    transition: { duration: 0.18, ease: EASE_OUT },
81  },
82};
83 
84const OVERFLOW_ACTION_VARIANTS: Variants = {
85  hidden: { opacity: 0, filter: "blur(4px)" },
86  visible: { opacity: 1, filter: "blur(0px)" },
87  exit: { opacity: 0, filter: "blur(4px)" },
88};
89 
90const TRACK_SIZE_CLASS: Record<OverflowActionsSize, string> = {
91  sm: "gap-1 p-1 text-xs",
92  md: "gap-1.5 p-1.5 text-sm",
93};
94 
95const GROUP_GAP_CLASS: Record<OverflowActionsSize, string> = {
96  sm: "gap-1",
97  md: "gap-1.5",
98};
99 
100const ACTION_SIZE_CLASS: Record<OverflowActionsSize, string> = {
101  sm: "h-8 min-w-8 gap-1.5 px-3",
102  md: "h-9 min-w-9 gap-2 px-3.5",
103};
104 
105// … truncated