Function Dropdown

packages/console/app/src/component/dropdown.tsx:15–59

(props: DropdownProps)

}

export function Dropdown(props: DropdownProps) {
  const [store, setStore] = createStore({
    isOpen: props.open ?? false,
  })
  let dropdownRef: HTMLDivElement | undefined

  createEffect(() => {
    if (props.open !== undefined) {
      setStore("isOpen", props.open)
    }
  })

  createEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef && !dropdownRef.contains(event.target as Node)) {
        setStore("isOpen", false)
        props.onOpenChange?.(false)
      }
    }

    document.addEventListener("click", handleClickOutside)
    onCleanup(() => document.removeEventListener("click", handleClickOutside))
  })

  const toggle = () => {
    const newValue = !store.isOpen
    setStore("isOpen", newValue)
    props.onOpenChange?.(newValue)
  }

  return (
    <div data-component="dropdown" class={props.class} ref={dropdownRef}>
      <button data-slot="trigger" type="button" onClick={toggle}>
        {typeof props.trigger === "string" ? <span>{props.trigger}</span> : props.trigger}
        <IconChevron data-slot="chevron" />
      </button>

      <Show when={store.isOpen}>
        <div data-slot="dropdown" data-align={props.align ?? "left"}>
          {props.children}
        </div>
      </Show>
    </div>
  )
}

interface DropdownItemProps {
  children: JSX.Element