Unfold List

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7interface UnfoldState {
8  open: string[]
9  toggle: (value: string) => void
10  duration: number
11}
12 
13const UnfoldContext = React.createContext<UnfoldState | null>(null)
14 
15function useUnfold() {
16  const context = React.useContext(UnfoldContext)
17  if (!context) {
18    throw new Error("UnfoldItem must be rendered inside an UnfoldList.")
19  }
20  return context
21}
22 
23export interface UnfoldListProps extends Omit<
24  React.ComponentProps<"div">,
25  "defaultValue" | "onChange"
26> {
27  /** One panel open at a time, or as many as the reader wants. */
28  type?: "single" | "multiple"
29  /** Panels open before anyone has touched the list. */
30  defaultValue?: string | string[]
31  /** Open panels, if you are holding the state yourself. */
32  value?: string | string[]
33  /** Called with the open panels whenever they change. */
34  onValueChange?: (value: string[]) => void
35  /** In `single` mode, allow the open panel to be closed again. */
36  collapsible?: boolean
37  /** Milliseconds one panel takes to unfold. */
38  duration?: number
39}
40 
41const toArray = (value: string | string[] | undefined) =>
42  value === undefined ? [] : Array.isArray(value) ? value : [value]
43 
44export function UnfoldList({
45  children,
46  className,
47  type = "single",
48  defaultValue,
49  value,
50  onValueChange,
51  collapsible = true,
52  duration = 320,
53  ...props
54}: UnfoldListProps) {
55  const [ownOpen, setOwnOpen] = React.useState(() => toArray(defaultValue))
56  const isControlled = value !== undefined
57  const open = isControlled ? toArray(value) : ownOpen
58 
59  const toggle = React.useCallback(
60    (item: string) => {
61      const isOpen = open.includes(item)
62      const next =
63        type === "single"
64          ? isOpen
65            ? collapsible
66              ? []
67              : open
68            : [item]
69          : isOpen
70            ? open.filter((entry) => entry !== item)
71            : [...open, item]
72 
73      if (!isControlled) {
74        setOwnOpen(next)
75      }
76      onValueChange?.(next)
77    },
78    [open, type, collapsible, isControlled, onValueChange]
79  )
80 
81  const state = React.useMemo(
82    () => ({ open, toggle, duration }),
83    [open, toggle, duration]
84  )
85 
86  return (
87    <UnfoldContext.Provider value={state}>
88      <div
89        data-slot="unfold-list"
90        className={cn(
91          "divide-border border-border divide-y border-y",
92          className
93        )}
94        {...props}
95      >
96        {children}
97      </div>
98    </UnfoldContext.Provider>
99// … truncated