From d9117431d6b67edc1f5d906430845dd6027ca4a0 Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Tue, 28 Dec 2021 15:12:16 -1000
Subject: [PATCH] Add an id to PopoverOverlay

---
 src/lib/components/popover/PopoverOverlay.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/lib/components/popover/PopoverOverlay.svelte b/src/lib/components/popover/PopoverOverlay.svelte
index 17b55d2..2364fe1 100644
--- a/src/lib/components/popover/PopoverOverlay.svelte
+++ b/src/lib/components/popover/PopoverOverlay.svelte
@@ -6,12 +6,14 @@
   import type { SupportedAs } from "$lib/internal/elements";
   import type { HTMLActionArray } from "$lib/hooks/use-actions";
   import Render, { Features } from "$lib/utils/Render.svelte";
+  import { useId } from "$lib/hooks/use-id";
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
   export let as: SupportedAs = "div";
   export let use: HTMLActionArray = [];
 
   let api = usePopoverContext("PopoverOverlay");
+  let id = `headlessui-popover-overlay-${useId()}`;
 
   let openClosedState = useOpenClosed();
 
@@ -25,10 +27,13 @@
   }
 
   $: slotProps = { open: $api.popoverState === PopoverStates.Open };
+
+  $: propsWeControl = { id };
 </script>
 
 <Render
   {...$$restProps}
+  {...propsWeControl}
   {as}
   {slotProps}
   use={[...use, forwardEvents]}