Popover

'use client'import { useEffect, useId, useReducer, useRef, type ComponentProps, type ReactNode } from 'react'export interface PopoverProps extends Omit<ComponentProps<'div'>, 'popover'> {  /** Whether the popover is open, when this component is told. Leave it out and the trigger opens it. */  open?: boolean  onOpenChange?: (open: boolean) => void  /** The button that opens the popover: spread what it is given on a button of your own. */  trigger?: (attributes: { popoverTarget: string }) => ReactNode  /** `auto` closes on a press outside and on Esc; `manual` stays until it is closed. */  mode?: 'auto' | 'manual'}/** * A popover. The browser opens it from the trigger, places it against the trigger and dismisses it; this * component only opens and closes it from `open`, and says when the browser did. */export function Popover({ open, onOpenChange, trigger, mode = 'auto', className, id, children, ...root }: PopoverProps) {  const generated = useId()  const name = id ?? generated  const element = useRef<HTMLDivElement>(null)  const heard = useRef(onOpenChange)  /** What the owner knows: the last state it set or was told. */  const known = useRef(false)  const [tick, again] = useReducer((count: number) => count + 1, 0)  useEffect(() => { heard.current = onOpenChange })  useEffect(() => {    const popover = element.current    if (!popover || open === undefined) return    const shown = popover.matches(':popover-open')    known.current = open    if (open && !shown) popover.showPopover()    else if (!open && shown) popover.hidePopover()  }, [open, tick])  useEffect(() => {    const popover = element.current    if (!popover) return    const report = () => {      const shown = popover.matches(':popover-open')      if (shown !== known.current) heard.current?.(known.current = shown)      // An `open` this component is told wins: if its owner did not take the change, the popover goes back.      again()    }    popover.addEventListener('toggle', report)    return () => popover.removeEventListener('toggle', report)  }, [])  return (    <>      {trigger?.({ popoverTarget: name })}      <div id={name} popover={mode} className={className ? `popover ${className}` : 'popover'} ref={element} {...root}>{children}</div>    </>  )}

<script lang="ts" module>  import type { Snippet } from 'svelte'  import type { HTMLAttributes } from 'svelte/elements'  export interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'popover'> {    /** Whether the popover is open. Bind it, or leave it out and the trigger opens it. */    open?: boolean    onOpenChange?: (open: boolean) => void    /** The button that opens the popover: spread what it is given on a button of your own. */    trigger?: Snippet<[{ popovertarget: string }]>    /** `auto` closes on a press outside and on Esc; `manual` stays until it is closed. */    mode?: 'auto' | 'manual'  }</script><script lang="ts">  import type { Attachment } from 'svelte/attachments'  let { open = $bindable(), onOpenChange, trigger, mode = 'auto', class: className, id, children, ...root }: PopoverProps = $props()  const generated = $props.id()  const name = $derived(id ?? generated)  /** What the owner knows: the last state it set or was told. */  let known = false  const presence: Attachment<HTMLDivElement> = (popover) => {    const report = () => {      const shown = popover.matches(':popover-open')      if (shown === known) return      open = known = shown      onOpenChange?.(known)    }    popover.addEventListener('toggle', report)    $effect(() => {      if (open === undefined) return      const shown = popover.matches(':popover-open')      known = open      if (open && !shown) popover.showPopover()      else if (!open && shown) popover.hidePopover()    })    return () => popover.removeEventListener('toggle', report)  }</script><!--  @component  A popover. The browser opens it from the trigger, places it against the trigger and dismisses it; this  component only opens and closes it from `open`, and says when the browser did.-->{@render trigger?.({ popovertarget: name })}<div id={name} popover={mode} class={['popover', className]} {@attach presence} {...root}>{@render children?.()}</div>

<script setup lang="ts">import { computed, nextTick, onMounted, useId, useTemplateRef, watch } from 'vue'defineOptions({ inheritAttrs: false })const { id, mode = 'auto' } = defineProps<{  id?: string  /** `auto` closes on a press outside and on Esc; `manual` stays until it is closed. */  mode?: 'auto' | 'manual'}>()/** Whether the popover is open: `v-model:open`. Leave it out and the trigger opens it. */const open = defineModel<boolean>('open')defineSlots<{  /** The button that opens the popover: bind what it is given on a button of your own. */  trigger?: (attributes: { popovertarget: string }) => unknown  default?: () => unknown}>()/* * A popover. The browser opens it from the trigger, places it against the trigger and dismisses it; this * component only opens and closes it from `open`, and says when the browser did. */const generated = useId()const name = computed(() => id ?? generated)const root = useTemplateRef<HTMLDivElement>('root')/** What the owner knows: the last state it set or was told. */let known = falseconst sync = () => {  const popover = root.value  if (!popover || open.value === undefined) return  const shown = popover.matches(':popover-open')  known = open.value  if (open.value && !shown) popover.showPopover()  else if (!open.value && shown) popover.hidePopover()}const report = () => {  const popover = root.value  if (!popover) return  const shown = popover.matches(':popover-open')  if (shown !== known) open.value = known = shown  // An `open` this component is told wins: if its owner did not take the change, the popover goes back.  void nextTick(sync)}onMounted(sync)watch(open, sync, { flush: 'post' })</script><template>  <slot name="trigger" v-bind="{ popovertarget: name }" />  <div :id="name" :popover="mode" class="popover" ref="root" v-bind="$attrs" @toggle="report"><slot /></div></template>