From 0cedb6314f578e74eae396f9a6d58cb9d6579534 Mon Sep 17 00:00:00 2001
From: Jake Lee Kennedy <jlkennedy127@gmail.com>
Date: Sun, 28 Apr 2024 16:37:03 +0100
Subject: [PATCH] feat: add zindex prop

---
 README.md              | 15 +++++----------
 src/lib/Popdown.svelte | 11 +++++++++--
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 7b77719..d8f6e1a 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,8 @@ Popover options:
 - `showContent` show the content slot, default is `false`
 - `calcX` optional - provide your own logic to calculate the X translation
 - `calcY` optional - provide your own logic to calculate the Y translation
+- `zIndex` optional - z-index for the content element, default is empty
+
 
 ## Examples
 
@@ -57,21 +59,14 @@ Popover options:
 Once you've created a project and installed dependencies with `yarn`, start a development server:
 
 ```bash
-npm run dev
+pnpm run dev
 
 # or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
+pnpm run dev -- --open
 ```
 
-```
-
-````
-
 ## Building
 
 ```bash
-npm run package
+pnpm run package
 ```
-````
diff --git a/src/lib/Popdown.svelte b/src/lib/Popdown.svelte
index 9ad516d..a6dc8e2 100644
--- a/src/lib/Popdown.svelte
+++ b/src/lib/Popdown.svelte
@@ -3,7 +3,7 @@
   import { portal } from 'svelte-portal';
   import { type Writable, writable } from 'svelte/store';
 
-  const isBrowser = 'document' in global && 'querySelector' in document;
+  const isBrowser = 'document' in globalThis && 'querySelector' in document;
 
   export let contentClass = '';
   export let position = 'outer-bottom inner-left';
@@ -11,6 +11,7 @@
   export let showContent = false;
   export let calcLeft: null | CalcPosition = null;
   export let calcTop: null | CalcPosition = null;
+  export let zIndex = null;
 
   let trigger: Writable<HTMLElement> = writable();
   let windowSize: Writable<number[]> = writable();
@@ -53,7 +54,13 @@
 </div>
 
 {#if target && showContent}
-  <div class="content {contentClass}" bind:this={$content} style:transform={$contentTransformStyle} use:portal={target}>
+  <div
+    class="content {contentClass}"
+    bind:this={$content}
+    style:transform={$contentTransformStyle}
+    style:zIndex
+    use:portal={target}
+  >
     <slot name="content" />
   </div>
 {/if}