fix(popover) Close popover on click on another popover nearby

src/lib/ui/core/Popover/Popover.svelte

@@ -11,6 +11,8 @@
   import { cn } from '$ui/utils/index.js'
   import { flyAndScaleOutTransition } from '$ui/utils/transitions.js'
 
+  import { useCloseOnOutsideClick } from './closeOutside.svelte.js'
+
   type TProps = {
     class?: string
     children?: PopoverTriggerProps['child']
@@ -30,6 +32,7 @@
     openDelay?: number
     closeDelay?: number
     openOnHover?: boolean
+    closeOnOutsideClick?: boolean
   }
 
   let {
@@ -39,6 +42,7 @@
     noStyles = false,
     matchTriggerWidth = false,
     openOnHover = false,
+    closeOnOutsideClick = false,
     isOpened = $bindable(false),
 
     openDelay = 0,
@@ -54,17 +58,24 @@
   }: TProps = $props()
 
   const preventFocus = (e: Event) => e.preventDefault()
+
+  const { triggerEl, contentEl } = useCloseOnOutsideClick({
+    enabled: closeOnOutsideClick,
+    getIsOpened: () => isOpened,
+    close: () => (isOpened = false),
+  })
 </script>
 
 <Popover.Root {...rootProps} bind:open={isOpened}>
-  <Popover.Trigger child={children} {openDelay} {closeDelay} {openOnHover} />
+  <Popover.Trigger bind:ref={triggerEl.$} child={children} {openDelay} {closeDelay} {openOnHover} />
 
   <Popover.Portal disabled={!portalTo} to={portalTo}>
     <Popover.Content
       sideOffset={8}
       onCloseAutoFocus={preventFocus}
       onOpenAutoFocus={preventFocus}
       {...contentProps}
+      bind:ref={contentEl.$}
       {align}
       {side}
       forceMount

src/lib/ui/core/Popover/closeOutside.svelte.ts

@@ -0,0 +1,51 @@
+import { on } from 'svelte/events'
+
+type TCloseOutsideProps = {
+  getIsOpened: () => boolean
+  close: () => void
+  enabled?: boolean
+}
+
+export const useCloseOnOutsideClick = ({
+  getIsOpened,
+  close,
+  enabled = true,
+}: TCloseOutsideProps) => {
+  let triggerEl = $state<HTMLElement | null>(null)
+  let contentEl = $state<HTMLElement | null>(null)
+
+  const isOpened = $derived(getIsOpened())
+
+  if (enabled) {
+    $effect(() => {
+      if (!isOpened) return
+
+      return on(window, 'pointerdown', (e) => {
+        if (contentEl && e.composedPath().includes(contentEl)) return
+        if (triggerEl && e.composedPath().includes(triggerEl)) return
+
+        close()
+      })
+    })
+  }
+
+  return {
+    triggerEl: {
+      get $() {
+        return triggerEl
+      },
+      set $(el: HTMLElement | null) {
+        triggerEl = el
+      },
+    },
+
+    contentEl: {
+      get $() {
+        return contentEl
+      },
+      set $(el: HTMLElement | null) {
+        contentEl = el
+      },
+    },
+  }
+}

src/lib/ui/core/Tooltip/Tooltip.svelte

@@ -8,6 +8,8 @@
   import { useMelt } from '$ui/utils/melt-ui.js'
   import { flyAndScaleOutTransition } from '$ui/utils/transitions.js'
 
+  import { useCloseOnOutsideClick } from '../Popover/closeOutside.svelte.js'
+
   type FloatingConfig = NonNullable<CreateTooltipProps['positioning']>
 
   type TooltipType = 'plain' | 'arrow'
@@ -63,19 +65,11 @@
 
   useMelt(triggerRef, trigger)
 
-  let contentEl = $state<HTMLElement>()
-
-  if (closeOnOutsideClick) {
-    $effect(() => {
-      if (!$open) return
-
-      return on(window, 'pointerdown', (e) => {
-        if (contentEl && e.composedPath().includes(contentEl)) return
-
-        open.set(false)
-      })
-    })
-  }
+  const { contentEl } = useCloseOnOutsideClick({
+    enabled: closeOnOutsideClick,
+    getIsOpened: () => $open,
+    close: () => open.set(false),
+  })
 
   $effect(() => {
     open.set(isOpened)
@@ -87,7 +81,7 @@
 {#if $open}
   <div
     {...$content}
-    bind:this={contentEl}
+    bind:this={contentEl.$}
     use:content
     out:flyAndScaleOutTransition
     class={cn(

src/stories/Design System - Core UI/Popover/PopoverWithButton.svelte → src/stories/Design System - Core UI/Popover/HoverWithButton.svelte

@@ -10,23 +10,19 @@
     {/snippet}
 
     {#snippet content()}
-      <section class="max-w-64">
-        This popover opens on hover and its content is aligned with the start of the trigger.
-      </section>
+      <section class="max-w-64">This popover can stay open on another button click</section>
     {/snippet}
   </Popover>
 
   <Button variant="fill">Some Button</Button>
 
-  <Popover openOnHover side="bottom" align="end">
+  <Popover openOnHover side="bottom" align="end" closeOnOutsideClick>
     {#snippet children({ props })}
       <Button variant="border" {...props}>Hover Popover</Button>
     {/snippet}
 
     {#snippet content()}
-      <section class="max-w-64">
-        This popover also opens on hover, with content aligned to the end of the trigger.
-      </section>
+      <section class="max-w-64">This popover should close on click outside of its content</section>
     {/snippet}
   </Popover>
 </main>

src/stories/Design System - Core UI/Popover/index.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/svelte'
 
 import component from './index.svelte'
-import PopoverWithButtonComponent from './PopoverWithButton.svelte'
+import HoverWithButtonComponent from './HoverWithButton.svelte'
 import PositionedPopover from './PositionedPopover.svelte'
 
 const meta = {
@@ -22,8 +22,8 @@ export const PopoverWithPositionConfig: StoryObj<typeof PositionedPopover> = {
   }),
 }
 
-export const PopoverWithButton: StoryObj<typeof PopoverWithButtonComponent> = {
+export const HoverWithButton: StoryObj<typeof HoverWithButtonComponent> = {
   render: () => ({
-    Component: PopoverWithButtonComponent,
+    Component: HoverWithButtonComponent,
   }),
 }