Accordion

1"use client";
2 
3import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
4import { AnimatePresence, motion } from "motion/react";
5import type { HTMLMotionProps, Transition } from "motion/react";
6import {
7  createContext,
8  useCallback,
9  useContext,
10  useEffect,
11  useImperativeHandle,
12  useMemo,
13  useRef,
14  useState,
15} from "react";
16import type { ComponentProps } from "react";
17 
18import { cn } from "@/lib/utils";
19 
20interface AccordionItemContextType {
21  canAnimate: boolean;
22  isOpen: boolean;
23  setCanAnimate: (canAnimate: boolean) => void;
24  setIsOpen: (open: boolean) => void;
25}
26 
27const AccordionItemContext = createContext<AccordionItemContextType | undefined>(undefined);
28 
29const useAccordionItem = (): AccordionItemContextType => {
30  const context = useContext(AccordionItemContext);
31  if (!context) {
32    throw new Error("useAccordionItem must be used within an AccordionItem");
33  }
34  return context;
35};
36 
37type AccordionValue = string | string[];
38 
39type AccordionProps = Omit<
40  ComponentProps<typeof AccordionPrimitive.Root>,
41  "defaultValue" | "multiple" | "onValueChange" | "value"
42> & {
43  type?: "single" | "multiple";
44  collapsible?: boolean;
45  value?: AccordionValue;
46  defaultValue?: AccordionValue;
47  onValueChange?: (value: AccordionValue) => void;
48};
49 
50const normalizeAccordionValue = (value: AccordionValue | undefined): string[] | undefined => {
51  if (value === undefined) {
52    return undefined;
53  }
54 
55  if (Array.isArray(value)) {
56    return value;
57  }
58 
59  return value === "" ? [] : [value];
60};
61 
62const Accordion = ({
63  type = "single",
64  collapsible = false,
65  value,
66  defaultValue,
67  onValueChange,
68  ...props
69}: AccordionProps) => {
70  const multiple = type === "multiple";
71 
72  const handleValueChange = useCallback(
73    (nextValue: (unknown | null)[]) => {
74      if (!onValueChange) {
75        return;
76      }
77 
78      const nextStringValues = nextValue.filter((item): item is string => typeof item === "string");
79 
80      if (multiple) {
81        onValueChange(nextStringValues);
82        return;
83      }
84 
85      const [firstValue] = nextStringValues;
86      if (firstValue !== undefined) {
87        onValueChange(firstValue);
88        return;
89      }
90 
91      if (collapsible) {
92        onValueChange("");
93      }
94    },
95    [collapsible, multiple, onValueChange],
96  );
97 
98  return (
99    <AccordionPrimitive.Root
100      data-slot="accordion"
101      defaultValue={normalizeAccordionValue(defaultValue)}
102      multiple={multiple}
103// … truncated