Aurora Listbox

1"use client"
2 
3import * as React from "react"
4import { Button } from "./button"
5import { cn } from "@/lib/utils"
6 
7type ListboxOrientation = "vertical" | "horizontal"
8 
9export interface ListboxProps extends React.HTMLAttributes<HTMLDivElement> {
10  orientation?: ListboxOrientation
11}
12 
13function Listbox({
14  className,
15  style,
16  ref,
17  orientation = "vertical",
18  onKeyDown,
19  ...props
20}: ListboxProps & { ref?: React.Ref<HTMLDivElement> }) {
21  const handleKeyDown = React.useCallback(
22    (event: React.KeyboardEvent<HTMLDivElement>) => {
23      onKeyDown?.(event)
24      if (event.defaultPrevented) return
25 
26      const root = event.currentTarget
27      const options = Array.from(
28        root.querySelectorAll<HTMLButtonElement>('[role="option"]:not(:disabled)'),
29      )
30 
31      if (options.length === 0) return
32 
33      const activeElement =
34        event.target instanceof HTMLElement
35          ? event.target.closest<HTMLButtonElement>('[role="option"]')
36          : null
37      const currentIndex = activeElement
38        ? options.indexOf(activeElement)
39        : options.findIndex((option) => option.getAttribute("aria-selected") === "true")
40 
41      let nextIndex = currentIndex >= 0 ? currentIndex : 0
42      const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown"
43      const previousKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp"
44 
45      if (event.key === nextKey) {
46        nextIndex = currentIndex >= 0 ? (currentIndex + 1) % options.length : 0
47      } else if (event.key === previousKey) {
48        nextIndex =
49          currentIndex >= 0
50            ? (currentIndex - 1 + options.length) % options.length
51            : options.length - 1
52      } else if (event.key === "Home") {
53        nextIndex = 0
54      } else if (event.key === "End") {
55        nextIndex = options.length - 1
56      } else {
57        return
58      }
59 
60      event.preventDefault()
61      const nextOption = options[nextIndex]
62      nextOption.focus()
63    },
64    [onKeyDown, orientation],
65  )
66 
67  return (
68    <div
69      ref={ref}
70      role="listbox"
71      aria-orientation={orientation}
72      className={cn(
73        "overflow-hidden rounded-[var(--aurora-radius-2)] border p-2",
74        className,
75      )}
76      style={{
77        background: "var(--aurora-panel-strong)",
78        borderColor: "var(--aurora-border-strong)",
79        boxShadow: "var(--aurora-shadow-strong), var(--aurora-highlight-strong)",
80        ...style,
81      }}
82      onKeyDown={handleKeyDown}
83      {...props}
84    />
85  )
86}
87 
88// … truncated