@abhivarde/svelte-drawer 0.0.20 → 0.0.21

package/README.md

@@ -231,6 +231,43 @@ Snap points allow the drawer to rest at predefined heights, creating an iOS-like
 - Use `bind:activeSnapPoint` to programmatically control the current position
 - Use `onSnapPointChange` callback to react to snap changes
 
+### Portal Support
+
+Render the drawer in a portal to avoid z-index conflicts in complex layouts.
+```svelte
+<script>
+	import { Drawer, DrawerOverlay, DrawerContent, DrawerHandle } from '@abhivarde/svelte-drawer';
+
+	let open = $state(false);
+</script>
+
+<!-- Enable portal (renders at end of body) -->
+<Drawer bind:open portal={true}>
+	<DrawerOverlay class="fixed inset-0 bg-black/40" />
+	<DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-lg p-4">
+		<DrawerHandle class="mb-8" />
+		<h2>Portal Drawer</h2>
+		<p>This drawer is rendered in a portal, preventing z-index issues.</p>
+	</DrawerContent>
+</Drawer>
+
+<!-- Custom portal container -->
+<Drawer bind:open portal={true} portalContainer="#custom-portal">
+	<DrawerOverlay />
+	<DrawerContent>
+		<h2>Custom Portal</h2>
+	</DrawerContent>
+</Drawer>
+
+<div id="custom-portal"></div>
+```
+
+**When to use portals:**
+- Complex layouts with nested z-index contexts
+- Third-party component libraries with fixed positioning
+- Modals inside scrollable containers
+- Preventing overflow: hidden conflicts
+
 ## Variants
 
 Available variants for `DrawerVariants` component:
@@ -259,9 +296,11 @@ Main wrapper component that manages drawer state and animations.
 - `onOpenChange` (function, optional) - Callback when open state changes
 - `direction` ('bottom' | 'top' | 'left' | 'right', default: 'bottom') - Direction from which drawer slides
 - `closeOnEscape` (boolean, optional, default: true) - Whether Escape key closes the drawer
-- `snapPoints` (number[], optional) - Array of snap positions between 0-1, where 1 is fully open (e.g., `[0.25, 0.5, 0.9]`)
+- `snapPoints` (number[], optional) - Array of snap positions between 0-1
 - `activeSnapPoint` (number, bindable, optional) - Current active snap point value
-- `onSnapPointChange` (function, optional) - Callback fired when the drawer snaps to a different point
+- `onSnapPointChange` (function, optional) - Callback fired when snap changes
+- `portal` (boolean, optional, default: false) - Render drawer in a portal
+- `portalContainer` (HTMLElement | string, optional) - Custom portal container element or selector
 
 ### DrawerOverlay
 

package/dist/components/Drawer.svelte

@@ -2,6 +2,7 @@
   import { Tween } from "svelte/motion";
   import { expoOut } from "svelte/easing";
   import { setContext, onMount } from "svelte";
+  import DrawerPortal from "./DrawerPortal.svelte";
 
   let {
     open = $bindable(false),
@@ -11,6 +12,8 @@
     snapPoints = undefined,
     activeSnapPoint = $bindable(undefined),
     onSnapPointChange = undefined,
+    portal = false,
+    portalContainer = undefined,
     children,
   } = $props();
 
@@ -143,4 +146,10 @@
   });
 </script>
 
-{@render children()}
+{#if portal}
+  <DrawerPortal container={portalContainer}>
+    {@render children()}
+  </DrawerPortal>
+{:else}
+  {@render children()}
+{/if}

package/dist/components/Drawer.svelte.d.ts

@@ -6,6 +6,8 @@ declare const Drawer: import("svelte").Component<{
     snapPoints?: any;
     activeSnapPoint?: any;
     onSnapPointChange?: any;
+    portal?: boolean;
+    portalContainer?: any;
     children: any;
 }, {}, "open" | "activeSnapPoint">;
 type Drawer = ReturnType<typeof Drawer>;

package/dist/components/DrawerPortal.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let {
+    children,
+    container = undefined,
+  }: {
+    children?: any;
+    container?: HTMLElement | string;
+  } = $props();
+
+  let portalContainer = $state<HTMLElement | null>(null);
+  let mounted = $state(false);
+
+  onMount(() => {
+    if (container) {
+      if (typeof container === "string") {
+        portalContainer = document.querySelector(container);
+      } else {
+        portalContainer = container;
+      }
+    } else {
+      portalContainer = document.createElement("div");
+      portalContainer.setAttribute("data-drawer-portal", "");
+      document.body.appendChild(portalContainer);
+    }
+
+    mounted = true;
+
+    return () => {
+      if (
+        !container &&
+        portalContainer &&
+        document.body.contains(portalContainer)
+      ) {
+        document.body.removeChild(portalContainer);
+      }
+    };
+  });
+</script>
+
+{#if mounted && portalContainer}
+  {#each [children] as child}
+    {@render child?.()}
+  {/each}
+{/if}
+
+<style>
+  :global([data-drawer-portal]) {
+    position: relative;
+    z-index: 9999;
+  }
+</style>

package/dist/components/DrawerPortal.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    children?: any;
+    container?: HTMLElement | string;
+};
+declare const DrawerPortal: import("svelte").Component<$$ComponentProps, {}, "">;
+type DrawerPortal = ReturnType<typeof DrawerPortal>;
+export default DrawerPortal;

package/dist/index.d.ts

@@ -3,4 +3,5 @@ export { default as DrawerContent } from "./components/DrawerContent.svelte";
 export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
 export { default as DrawerVariants } from "./components/DrawerVariants.svelte";
 export { default as DrawerHandle } from "./components/DrawerHandle.svelte";
-export type { DrawerProps, DrawerContentProps, DrawerOverlayProps, DrawerHandleProps, DrawerVariant, DrawerVariantsProps, } from "./types";
+export { default as DrawerPortal } from "./components/DrawerPortal.svelte";
+export type { DrawerProps, DrawerContentProps, DrawerOverlayProps, DrawerHandleProps, DrawerVariant, DrawerVariantsProps, DrawerPortalProps, } from "./types";

package/dist/index.js

@@ -3,3 +3,4 @@ export { default as DrawerContent } from "./components/DrawerContent.svelte";
 export { default as DrawerOverlay } from "./components/DrawerOverlay.svelte";
 export { default as DrawerVariants } from "./components/DrawerVariants.svelte";
 export { default as DrawerHandle } from "./components/DrawerHandle.svelte";
+export { default as DrawerPortal } from "./components/DrawerPortal.svelte";

package/dist/types.d.ts

@@ -6,6 +6,8 @@ export interface DrawerProps {
     snapPoints?: number[];
     activeSnapPoint?: number;
     onSnapPointChange?: (snapPoint: number) => void;
+    portal?: boolean;
+    portalContainer?: HTMLElement | string;
 }
 export interface DrawerContentProps {
     class?: string;
@@ -17,6 +19,9 @@ export interface DrawerOverlayProps {
 export interface DrawerHandleProps {
     class?: string;
 }
+export interface DrawerPortalProps {
+    container?: HTMLElement | string;
+}
 export type DrawerVariant = "default" | "sheet" | "dialog" | "minimal" | "sidebar";
 export interface DrawerVariantsProps {
     variant?: DrawerVariant;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abhivarde/svelte-drawer",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "A drawer component for Svelte 5, inspired by Vaul",
   "author": "Abhi Varde",
   "license": "MIT",