@valerius_petrini/corekit-ui 0.1.83 → 0.1.84

package/dist/actions/portal.d.ts

@@ -0,0 +1,3 @@
+export declare function portal(node: HTMLElement, target?: string): {
+    destroy(): void;
+};

package/dist/actions/portal.js

@@ -0,0 +1,9 @@
+export function portal(node, target = 'body') {
+    const targetEl = document.querySelector(target);
+    targetEl.appendChild(node);
+    return {
+        destroy() {
+            node.remove();
+        }
+    };
+}

package/dist/components/inputs/ColorInput/index.svelte

@@ -19,6 +19,7 @@
     import { Input } from "..";
 
     import Pipette from "@lucide/svelte/icons/pipette";
+	import { portal } from "../../../actions/portal";
 
     let { 
         children = undefined, 
@@ -89,6 +90,7 @@
 
         const { x, y } = await computePosition(element, floatingEl, {
             placement: "bottom-start",
+            strategy: "absolute",
             middleware: [
                 offset(8),
                 flip(),
@@ -300,8 +302,9 @@
         {@const hsv = hexToHsv(value || "#000000")}
         <div
             bind:this={floatingEl}
+            use:portal
             transition:fly={{ y: -10, duration: 200 }}
-            class="fixed z-999999 bg-sub-background rounded-md p-4 flex gap-2.5 flex-wrap"
+            class="absolute z-999999 bg-sub-background rounded-md p-4 flex gap-2.5 flex-wrap"
             style="top: {dropdownY}px; left: {dropdownX}px; min-width: {referenceWidth}px; max-width: calc(100vw - 16px);"
         >
             <div class="color-canvas relative rounded h-36 cursor-crosshair" style="background-color: hsl({hue}, 100%, 50%);" bind:this={canvasEl}>

package/dist/components/inputs/Combobox/index.svelte

@@ -11,6 +11,7 @@
     import BaseInput from "../helper/BaseInput.svelte";
     import Text from "../../typography/Text/index.svelte";
     import { fly } from "svelte/transition";
+	import { portal } from "../../../actions/portal";
 
     let { 
         children = undefined, 
@@ -90,6 +91,7 @@
 
             const { x, y } = await computePosition(element!, node, {
                 placement: "bottom-start",
+                strategy: "absolute",
                 middleware: [offset(8), flip(), shift({ padding: 8 })]
             });
 
@@ -223,7 +225,8 @@
         {#if isFocused}
             <div
                 use:initFloating
-                style="position: fixed; top: {dropdownY}px; left: {dropdownX}px; width: {referenceWidth}px;"
+                use:portal
+                style="position: absolute; top: {dropdownY}px; left: {dropdownX}px; width: {referenceWidth}px;"
                 style:visibility={ready ? "visible" : "hidden"}
                 transition:fly={{ y: -10, duration: 200 }}
                 class="z-999999 overflow-hidden border border-white/10 bg-sub-background shadow-xl shadow-black/40 {getSizeStyleClass(radius, 'radius')}"

package/dist/components/navigation/Navbar/NavbarDropdown.svelte

@@ -14,6 +14,7 @@
 
     import ChevronUp from "@lucide/svelte/icons/chevron-up";
     import ChevronDown from "@lucide/svelte/icons/chevron-down";
+	import { portal } from "../../../actions/portal.js";
 
     let {
         children = undefined,
@@ -46,6 +47,7 @@
         async function updatePosition() {
             const { x: fx, y: fy, placement } = await computePosition(element!, node, {
                 placement: "bottom-start",
+                strategy: "absolute",
                 middleware: [offset(4), flip(), shift({ padding: 12 })],
             });
             x = fx;
@@ -102,8 +104,9 @@
 {#if open}
     <div
         use:initDropdown
+        use:portal
         role="menu"
-        style="position: fixed; top: {y}px; left: {x}px;"
+        style="position: absolute; top: {y}px; left: {x}px;"
         class="z-100 shadow-lg"
         style:visibility={ready ? "visible" : "hidden"}
     >

package/dist/components/overlay/Tooltip/index.svelte

@@ -15,6 +15,7 @@
         autoUpdate
 
     } from "@floating-ui/dom";
+	import { portal } from "../../../actions/portal.js";
 
     let {
         text,
@@ -44,6 +45,7 @@
 
         const { x: fx, y: fy, placement, middlewareData } = await computePosition(trigger, tooltipEl, {
             placement: position,
+            strategy: "absolute",
             middleware: [
                 offset(8),
                 flip(),
@@ -156,8 +158,9 @@
 {#if visible}
     <div
         bind:this={tooltipEl}
+        use:portal
         role="tooltip"
-        style="position: fixed; top: {y}px; left: {x}px;"
+        style="position: absolute; top: {y}px; left: {x}px;"
         class="z-999999 {interactive ? 'pointer-events-auto' : 'pointer-events-none'}"
         onmouseenter={onTooltipEnter}
         onmouseleave={onTooltipLeave}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valerius_petrini/corekit-ui",
-	"version": "0.1.83",
+	"version": "0.1.84",
 	"description": "Component Library used across all my projects",
 	"author": "Valerius Petrini Jr.",
 	"license": "MIT",