expandable

1"use client"
2 
3import React, {
4  createContext,
5  ReactNode,
6  useContext,
7  useEffect,
8  useState,
9} from "react"
10import {
11  AnimatePresence,
12  HTMLMotionProps,
13  motion,
14  TargetAndTransition,
15  useMotionValue,
16  useSpring,
17} from "motion/react"
18import useMeasure from "react-use-measure"
19 
20import { cn } from "@/lib/utils"
21 
22const springConfig = { stiffness: 200, damping: 20, bounce: 0.2 }
23 
24interface ExpandableContextType {
25  isExpanded: boolean // Indicates whether the component is expanded
26  toggleExpand: () => void // Function to toggle the expanded state
27  expandDirection: "vertical" | "horizontal" | "both" // Direction of expansion
28  expandBehavior: "replace" | "push" // How the expansion affects surrounding content
29  transitionDuration: number // Duration of the expansion/collapse animation
30  easeType:
31    | "easeInOut"
32    | "easeIn"
33    | "easeOut"
34    | "linear"
35    | [number, number, number, number] // Easing function for the animation
36  initialDelay: number // Delay before the animation starts
37  onExpandEnd?: () => void // Callback function when expansion ends
38  onCollapseEnd?: () => void // Callback function when collapse ends
39}
40 
41// Create a context with default values
42const ExpandableContext = createContext<ExpandableContextType>({
43  isExpanded: false,
44  toggleExpand: () => {},
45  expandDirection: "vertical", // 'vertical' | 'horizontal' | 'both' // Direction of expansion
46  expandBehavior: "replace", // How the expansion affects surrounding content
47  transitionDuration: 0.3, // Duration of the expansion/collapse animation
48  easeType: "easeInOut" as const, // Easing function for the animation
49  initialDelay: 0,
50})
51 
52// Custom hook to use the ExpandableContext
53const useExpandable = () => useContext(ExpandableContext)
54 
55type ExpandablePropsBase = Omit<HTMLMotionProps<"div">, "children">
56 
57interface ExpandableProps extends ExpandablePropsBase {
58  children: ReactNode | ((props: { isExpanded: boolean }) => ReactNode)
59  expanded?: boolean
60  onToggle?: () => void
61  transitionDuration?: number
62  easeType?:
63    | "easeInOut"
64    | "easeIn"
65    | "easeOut"
66    | "linear"
67    | [number, number, number, number]
68  expandDirection?: "vertical" | "horizontal" | "both"
69  expandBehavior?: "replace" | "push"
70  initialDelay?: number
71  onExpandStart?: () => void
72  onExpandEnd?: () => void
73  onCollapseStart?: () => void
74  onCollapseEnd?: () => void
75}
76// ROOT Expand component
77const Expandable = React.forwardRef<HTMLDivElement, ExpandableProps>(
78  (
79    {
80      children,
81// … truncated