dropdown-menu

1---
2import type { HTMLAttributes } from "astro/types"
3import type { Align, Side } from "@data-slot/dropdown-menu"
4 
5type Props = HTMLAttributes<"div"> & {
6  defaultOpen?: boolean
7  defaultValue?: string | null
8  defaultValues?: string[]
9  closeOnClickOutside?: boolean
10  closeOnEscape?: boolean
11  closeOnSelect?: boolean
12  highlightItemOnHover?: boolean
13  side?: Side
14  align?: Align
15  sideOffset?: number
16  alignOffset?: number
17  avoidCollisions?: boolean
18  collisionPadding?: number
19}
20 
21const {
22  class: className,
23  defaultOpen,
24  defaultValue,
25  defaultValues,
26  closeOnClickOutside,
27  closeOnEscape,
28  closeOnSelect,
29  highlightItemOnHover,
30  side,
31  align,
32  sideOffset,
33  alignOffset,
34  avoidCollisions,
35  collisionPadding,
36  ...props
37} = Astro.props
38 
39const defaultValuesAttr =
40  defaultValues === undefined ? undefined : JSON.stringify(defaultValues)
41---
42 
43<div
44  data-slot="dropdown-menu"
45  data-default-open={defaultOpen}
46  data-default-value={defaultValue}
47  data-default-values={defaultValuesAttr}
48  data-close-on-click-outside={closeOnClickOutside}
49  data-close-on-escape={closeOnEscape}
50  data-close-on-select={closeOnSelect}
51  data-highlight-item-on-hover={highlightItemOnHover}
52  data-side={side}
53  data-align={align}
54  data-side-offset={sideOffset}
55  data-align-offset={alignOffset}
56  data-avoid-collisions={avoidCollisions}
57  data-collision-padding={collisionPadding}
58  class={className}
59  {...props}
60>
61  <slot />
62</div>
63 
64<script>
65  import { create } from "@data-slot/dropdown-menu"
66 
67  create()
68</script>