@abhivarde/svelte-drawer 1.0.1 → 1.0.3

package/dist/components/DrawerContent.svelte

@@ -189,22 +189,17 @@
     }
   }
 
-  let contentInnerRef = $state<HTMLElement | null>(null);
-
   $effect(() => {
-    if (!autoHeight || !contentInnerRef) return;
-
-    const ro = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (!entry) return;
-      const totalHeight = entry.contentRect.height;
-      const viewportH = window.innerHeight;
-      const pct = Math.max(0, ((viewportH - totalHeight) / viewportH) * 100);
-      drawer.drawerPosition.set(pct, { duration: 200 });
-    });
-
-    ro.observe(contentInnerRef);
-    return () => ro.disconnect();
+    if (drawer.open && trapFocus && contentElement) {
+      tick().then(() => {
+        const focusable = getFocusableElements();
+        if (focusable[0]) {
+          focusable[0].focus({ preventScroll: true });
+        } else {
+          contentElement?.focus({ preventScroll: true });
+        }
+      });
+    }
   });
 
   onMount(() => {
@@ -219,7 +214,9 @@
   <div
     bind:this={contentElement}
     class={className}
-    style="transform: {getTransform()}; z-index: 50; touch-action: none;"
+    style="transform: {getTransform()}; z-index: 50; touch-action: none;{autoHeight
+      ? ' height: auto;'
+      : ''}"
     tabindex="-1"
     role="dialog"
     aria-modal="true"
@@ -227,8 +224,6 @@
     ontouchstart={onPointerDown}
     {...restProps}
   >
-    <div bind:this={contentInnerRef}>
-      {@render children()}
-    </div>
+    {@render children()}
   </div>
 {/if}

package/package.json

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