svelte-headless-components - npm Package Compare versions

Comparing version 0.0.12 to 0.0.13

dist/components/popover/backdrop.d.ts

 export declare function getBackdropNode(): HTMLDivElement | null;
-export declare function showBackdrop(behindNode: HTMLElement): void;
-export declare function hideBackdrop(): void;
+export declare function showBackdrop(backdropNode: HTMLElement, behindNode: HTMLElement): void;
+export declare function hideBackdrop(backdropNode: HTMLElement): void;

dist/components/popover/backdrop.js

 import { BROWSER } from 'esm-env';
-import { get, writable } from 'svelte/store';
-const backdropNode = writable(null);
-function setUpBackdrop() {
+export function getBackdropNode() {
     if (BROWSER) {
@@ -14,3 +12,2 @@ const node = document.createElement('div');
         node.style.display = 'none';
-        backdropNode.set(node);
         return node;
@@ -22,26 +19,15 @@ }
 }
-export function getBackdropNode() {
-    let node = get(backdropNode);
-    if (node === null) {
-        node = setUpBackdrop();
-    }
-    return node;
-}
-export function showBackdrop(behindNode) {
+export function showBackdrop(backdropNode, behindNode) {
     const computedZIndex = getComputedStyle(behindNode).zIndex;
     let zIndex = computedZIndex ? parseInt(computedZIndex) : 1;
-    const node = getBackdropNode();
     const parent = behindNode.parentNode;
-    if (node && parent) {
-        parent.prepend(node);
+    if (backdropNode && parent) {
+        parent.prepend(backdropNode);
         zIndex -= 1;
-        node.style.zIndex = zIndex.toString();
-        node.style.display = 'block';
+        backdropNode.style.zIndex = zIndex.toString();
+        backdropNode.style.display = 'block';
     }
 }
-export function hideBackdrop() {
-    const node = getBackdropNode();
-    if (node) {
-        node.style.display = 'none';
-    }
+export function hideBackdrop(backdropNode) {
+    backdropNode.style.display = 'none';
 }

dist/components/popover/popover.js

@@ -86,3 +86,2 @@ import { BROWSER } from 'esm-env';
         let isBackdropClicking = false;
-        const backdropNode = getBackdropNode();
         if (BROWSER) {
@@ -104,3 +103,6 @@ node.addEventListener(triggerEvent, triggerClick);
     function customContent(node) {
-        showBackdrop(node);
+        if (backdropNode) {
+            showBackdrop(backdropNode, node);
+            node.style.position = config?.floatingUi?.strategy ?? 'absolute';
+        }
         return {
@@ -113,5 +115,6 @@ destroy: () => {
     const triggerEvent = config?.triggerEvent ?? 'mouseup';
+    const backdropNode = getBackdropNode();
     isOpen.subscribe((value) => {
-        if (!value) {
-            hideBackdrop();
+        if (!value && backdropNode) {
+            hideBackdrop(backdropNode);
         }
@@ -118,0 +121,0 @@ });

package.json

 {
   "name": "svelte-headless-components",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "license": "MIT",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Worsened metrics

Total package byte prevSize

48090

decreased by-0.17%

Lines of code

1021

decreased by-1.07%

No dependency changes