@max-ts/svelte 1.10.8 → 1.10.11

package/dist/assets/styles.css

@@ -3453,18 +3453,6 @@ img, picture, video, canvas {
 .styles_content__1ovcrev8[data-side="top"] {
   animation: styles_fadeIn__1ovcrev0 150ms ease-out, styles_slideInFromBottom__1ovcrev5 150ms ease-out;
 }
-.styles_content__1ovcrev8[data-side="bottom"][data-state="closed"] {
-  animation: styles_fadeOut__1ovcrev1 150ms ease-out, styles_zoomOut__1ovcrev3 150ms ease-out, styles_slideInFromTop__1ovcrev4 150ms ease-out reverse;
-}
-.styles_content__1ovcrev8[data-side="left"][data-state="closed"] {
-  animation: styles_fadeOut__1ovcrev1 150ms ease-out, styles_zoomOut__1ovcrev3 150ms ease-out, styles_slideInFromEnd__1ovcrev6 150ms ease-out reverse;
-}
-.styles_content__1ovcrev8[data-side="right"][data-state="closed"] {
-  animation: styles_fadeOut__1ovcrev1 150ms ease-out, styles_zoomOut__1ovcrev3 150ms ease-out, styles_slideInFromStart__1ovcrev7 150ms ease-out reverse;
-}
-.styles_content__1ovcrev8[data-side="top"][data-state="closed"] {
-  animation: styles_fadeOut__1ovcrev1 150ms ease-out, styles_zoomOut__1ovcrev3 150ms ease-out, styles_slideInFromBottom__1ovcrev5 150ms ease-out reverse;
-}
 .styles_arrow__1ovcrev9 {
   fill: var(--colors-background-tooltip);
   width: 14px;

package/dist/components/Tooltip/Tooltip.js

@@ -1,139 +1,41 @@
 import Portal from "../Portal/Portal.js";
+import { TooltipStore } from "./store.svelte.js";
 import __default__ from "./styles.css.js";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-import { tick, untrack } from "svelte";
 //#region src/components/Tooltip/Tooltip.svelte
-let activeDismiss = null;
 var root_5 = $.from_svg(`<svg viewBox="0 0 7.68 4.35" xmlns="http://www.w3.org/2000/svg"><path d="m 0.52372243,0.10910656 c -0.1676883,0 -0.3188698,0.10099765 -0.38304509,0.25594925 -0.0641698,0.1548964 -0.0287017,0.3332318 0.0898753,0.4518088 L 3.5473966,4.1337031 c 0.077725,0.07778 0.1832001,0.1214516 0.2931533,0.1214516 0.1099531,0 0.2154286,-0.043672 0.2932085,-0.1214516 L 7.4505968,0.81686461 c 0.118577,-0.118577 0.1540119,-0.2969124 0.089831,-0.4518088 C 7.476247,0.21010421 7.3251098,0.10910656 7.1573882,0.10910656 Z" fill="inherit"></path></svg>`);
 var root_2 = $.from_html(`<div role="tooltip" data-slot="tooltip-content"><!> <!></div>`);
 var root = $.from_html(`<span style="display: contents;" data-slot="tooltip-trigger"><!></span> <!>`, 1);
 function Tooltip($$anchor, $$props) {
 	$.push($$props, true);
-	const ANIMATION_DURATION = 150;
-	let open = $.prop($$props, "open", 15, false), alignOffset = $.prop($$props, "alignOffset", 3, 0), sideOffset = $.prop($$props, "sideOffset", 3, 10), side = $.prop($$props, "side", 3, "top"), align = $.prop($$props, "align", 3, "center"), arrow = $.prop($$props, "arrow", 3, false), delayDuration = $.prop($$props, "delayDuration", 3, 200);
-	let triggerEl;
-	let contentEl = $.state(void 0);
-	let visible = $.state(false);
-	let delayTimer;
-	let closeTimer;
-	let position = $.state({
-		top: 0,
-		left: 0
-	});
-	const tooltipId = `tooltip-${Math.random().toString(36).slice(2, 11)}`;
-	function updatePosition() {
-		if (!triggerEl || !$.get(contentEl)) return;
-		const triggerRect = triggerEl.getBoundingClientRect();
-		const contentRect = $.get(contentEl).getBoundingClientRect();
-		let top = 0;
-		let left = 0;
-		switch (side()) {
-			case "top":
-				top = triggerRect.top - contentRect.height - sideOffset();
-				left = triggerRect.left + (triggerRect.width - contentRect.width) / 2;
-				break;
-			case "bottom":
-				top = triggerRect.bottom + sideOffset();
-				left = triggerRect.left + (triggerRect.width - contentRect.width) / 2;
-				break;
-			case "left":
-				top = triggerRect.top + (triggerRect.height - contentRect.height) / 2;
-				left = triggerRect.left - contentRect.width - sideOffset();
-				break;
-			case "right":
-				top = triggerRect.top + (triggerRect.height - contentRect.height) / 2;
-				left = triggerRect.right + sideOffset();
-				break;
+	let offset = $.prop($$props, "offset", 3, 10), placement = $.prop($$props, "placement", 3, "top"), arrow = $.prop($$props, "arrow", 3, false), delayDuration = $.prop($$props, "delayDuration", 3, 200);
+	const store = new TooltipStore({
+		get placement() {
+			return placement();
+		},
+		get offset() {
+			return offset();
+		},
+		get delayDuration() {
+			return delayDuration();
 		}
-		if (side() === "top" || side() === "bottom") if (align() === "start") left = triggerRect.left + alignOffset();
-		else if (align() === "end") left = triggerRect.right - contentRect.width - alignOffset();
-		else left += alignOffset();
-		else if (align() === "start") top = triggerRect.top + alignOffset();
-		else if (align() === "end") top = triggerRect.bottom - contentRect.height - alignOffset();
-		else top += alignOffset();
-		$.set(position, {
-			top,
-			left
-		});
-	}
-	function dismiss() {
-		clearTimeout(delayTimer);
-		clearTimeout(closeTimer);
-		if (activeDismiss === dismiss) activeDismiss = null;
-		open(false);
-		$.set(visible, false);
-	}
-	function show() {
-		if (activeDismiss && activeDismiss !== dismiss) activeDismiss();
-		clearTimeout(closeTimer);
-		clearTimeout(delayTimer);
-		activeDismiss = dismiss;
-		delayTimer = setTimeout(() => {
-			open(true);
-		}, delayDuration());
-	}
-	function hide() {
-		clearTimeout(delayTimer);
-		if (activeDismiss === dismiss) activeDismiss = null;
-		open(false);
-	}
-	function handleKeydown(event) {
-		if (event.key === "Escape" && open()) hide();
-	}
-	$.user_effect(() => {
-		if (open()) {
-			clearTimeout(closeTimer);
-			$.set(visible, true);
-			tick().then(updatePosition);
-		} else if (untrack(() => $.get(visible))) closeTimer = setTimeout(() => {
-			$.set(visible, false);
-		}, ANIMATION_DURATION);
-	});
-	$.user_effect(() => {
-		if (!open()) return;
-		window.addEventListener("scroll", updatePosition, true);
-		window.addEventListener("resize", updatePosition);
-		return () => {
-			window.removeEventListener("scroll", updatePosition, true);
-			window.removeEventListener("resize", updatePosition);
-		};
 	});
-	$.user_effect(() => {
-		return () => dismiss();
-	});
-	function attachTrigger(node) {
-		const el = node.firstElementChild;
-		if (!el) return;
-		triggerEl = el;
-		el.addEventListener("mouseenter", show);
-		el.addEventListener("mouseleave", hide);
-		el.addEventListener("focusin", show);
-		el.addEventListener("focusout", hide);
-		el.setAttribute("aria-describedby", tooltipId);
-		return () => {
-			el.removeEventListener("mouseenter", show);
-			el.removeEventListener("mouseleave", hide);
-			el.removeEventListener("focusin", show);
-			el.removeEventListener("focusout", hide);
-			el.removeAttribute("aria-describedby");
-			triggerEl = void 0;
-		};
-	}
+	$.user_effect(() => () => store.destroy());
 	var fragment = root();
-	$.event("keydown", $.window, handleKeydown);
+	$.event("keydown", $.window, (e) => e.key === "Escape" && store.open && store.hide());
 	var span = $.first_child(fragment);
-	var node_1 = $.child(span);
-	$.snippet(node_1, () => $$props.children ?? $.noop);
+	var node = $.child(span);
+	$.snippet(node, () => $$props.children ?? $.noop);
 	$.reset(span);
-	$.attach(span, () => attachTrigger);
-	var node_2 = $.sibling(span, 2);
+	$.attach(span, () => store.attachTrigger);
+	var node_1 = $.sibling(span, 2);
 	var consequent_2 = ($$anchor) => {
 		Portal($$anchor, {
 			children: ($$anchor, $$slotProps) => {
 				var div = root_2();
 				let styles_1;
-				var node_3 = $.child(div);
+				var node_2 = $.child(div);
 				var consequent = ($$anchor) => {
 					var text = $.text();
 					$.template_effect(() => $.set_text(text, $$props.content));
@@ -141,48 +43,52 @@ function Tooltip($$anchor, $$props) {
 				};
 				var alternate = ($$anchor) => {
 					var fragment_3 = $.comment();
-					var node_4 = $.first_child(fragment_3);
-					$.snippet(node_4, () => $$props.content ?? $.noop);
+					var node_3 = $.first_child(fragment_3);
+					$.snippet(node_3, () => $$props.content ?? $.noop);
 					$.append($$anchor, fragment_3);
 				};
-				$.if(node_3, ($$render) => {
+				$.if(node_2, ($$render) => {
 					if (typeof $$props.content === "string") $$render(consequent);
 					else $$render(alternate, -1);
 				});
-				var node_5 = $.sibling(node_3, 2);
+				var node_4 = $.sibling(node_2, 2);
 				var consequent_1 = ($$anchor) => {
 					var svg = root_5();
 					$.template_effect(() => {
 						$.set_class(svg, 0, $.clsx([__default__.arrow, $$props.arrowClass]));
-						$.set_attribute(svg, "data-side", side());
+						$.set_attribute(svg, "data-side", store.placement);
 					});
 					$.append($$anchor, svg);
 				};
-				$.if(node_5, ($$render) => {
+				$.if(node_4, ($$render) => {
 					if (arrow()) $$render(consequent_1);
 				});
 				$.reset(div);
-				$.bind_this(div, ($$value) => $.set(contentEl, $$value), () => $.get(contentEl));
+				$.attach(div, () => store.attachContent);
 				$.template_effect(() => {
-					$.set_attribute(div, "id", tooltipId);
-					$.set_attribute(div, "data-state", open() ? "open" : "closed");
-					$.set_attribute(div, "data-side", side());
+					$.set_attribute(div, "id", store.tooltipId);
+					$.set_attribute(div, "data-state", store.open ? "open" : "closed");
+					$.set_attribute(div, "data-side", store.placement);
 					$.set_class(div, 1, $.clsx([__default__.content, $$props.class]));
 					styles_1 = $.set_style(div, "", styles_1, {
 						position: "fixed",
-						top: `${$.get(position).top ?? ""}px`,
-						left: `${$.get(position).left ?? ""}px`
+						top: `${store.y ?? ""}px`,
+						left: `${store.x ?? ""}px`
 					});
 				});
-				$.event("mouseenter", div, show);
-				$.event("mouseleave", div, hide);
+				$.event("mouseenter", div, function(...$$args) {
+					store.keepOpen?.apply(this, $$args);
+				});
+				$.event("mouseleave", div, function(...$$args) {
+					store.hide?.apply(this, $$args);
+				});
 				$.append($$anchor, div);
 			},
 			$$slots: { default: true }
 		});
 	};
-	$.if(node_2, ($$render) => {
-		if ($.get(visible)) $$render(consequent_2);
+	$.if(node_1, ($$render) => {
+		if (store.visible) $$render(consequent_2);
 	});
 	$.append($$anchor, fragment);
 	$.pop();

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

@@ -1,4 +1,4 @@
 import type { TooltipProps } from './types';
-declare const Tooltip: import("svelte").Component<TooltipProps, {}, "open">;
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/components/Tooltip/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Tooltip } from './Tooltip.svelte';
-export type { TooltipAlign, TooltipProps, TooltipSide } from './types';
+export type { TooltipProps } from './types';

package/dist/components/Tooltip/store.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { TooltipProps } from './types';
+type Options = Pick<TooltipProps, 'delayDuration' | 'placement' | 'offset'>;
+export declare class TooltipStore {
+    #private;
+    open: boolean;
+    visible: boolean;
+    x: number;
+    y: number;
+    readonly tooltipId: string;
+    private static active;
+    private static readonly CLOSE_DURATION;
+    private triggerEl;
+    private cleanupAutoUpdate;
+    private delayTimer;
+    private closeTimer;
+    constructor(options: Options);
+    get placement(): import("@floating-ui/dom").Placement | undefined;
+    show: () => void;
+    hide: () => void;
+    keepOpen: () => void;
+    attachTrigger: (node: HTMLElement) => (() => void) | undefined;
+    attachContent: (node: HTMLElement) => (() => void) | undefined;
+    destroy(): void;
+    private forceClose;
+}
+export {};

package/dist/components/Tooltip/store.svelte.js

@@ -0,0 +1,108 @@
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+//#region src/components/Tooltip/store.svelte.ts
+var TooltipStore = class TooltipStore {
+	open = $state(false);
+	visible = $state(false);
+	x = $state(0);
+	y = $state(0);
+	#options = $state({
+		delayDuration: 300,
+		placement: "top",
+		offset: 8
+	});
+	tooltipId = `tooltip-${Math.random().toString(36).slice(2, 11)}`;
+	static active = null;
+	static CLOSE_DURATION = 150;
+	triggerEl;
+	cleanupAutoUpdate;
+	delayTimer;
+	closeTimer;
+	constructor(options) {
+		this.#options = {
+			...this.#options,
+			...options
+		};
+	}
+	get placement() {
+		return this.#options.placement;
+	}
+	show = () => {
+		if (TooltipStore.active && TooltipStore.active !== this) TooltipStore.active.forceClose();
+		clearTimeout(this.closeTimer);
+		clearTimeout(this.delayTimer);
+		TooltipStore.active = this;
+		this.delayTimer = setTimeout(() => {
+			this.visible = true;
+			this.open = true;
+		}, this.#options.delayDuration);
+	};
+	hide = () => {
+		clearTimeout(this.delayTimer);
+		if (TooltipStore.active === this) TooltipStore.active = null;
+		this.open = false;
+		this.closeTimer = setTimeout(() => {
+			this.visible = false;
+		}, TooltipStore.CLOSE_DURATION);
+	};
+	keepOpen = () => {
+		clearTimeout(this.closeTimer);
+		clearTimeout(this.delayTimer);
+		this.open = true;
+		TooltipStore.active = this;
+	};
+	attachTrigger = (node) => {
+		const el = node.firstElementChild;
+		if (!el) return;
+		this.triggerEl = el;
+		el.addEventListener("mouseenter", this.show);
+		el.addEventListener("mouseleave", this.hide);
+		el.addEventListener("focusin", this.show);
+		el.addEventListener("focusout", this.hide);
+		el.setAttribute("aria-describedby", this.tooltipId);
+		return () => {
+			el.removeEventListener("mouseenter", this.show);
+			el.removeEventListener("mouseleave", this.hide);
+			el.removeEventListener("focusin", this.show);
+			el.removeEventListener("focusout", this.hide);
+			el.removeAttribute("aria-describedby");
+			this.triggerEl = void 0;
+		};
+	};
+	attachContent = (node) => {
+		if (!this.triggerEl) return;
+		this.cleanupAutoUpdate = autoUpdate(this.triggerEl, node, () => {
+			if (!this.triggerEl) return;
+			computePosition(this.triggerEl, node, {
+				placement: this.#options.placement,
+				strategy: "fixed",
+				middleware: [
+					offset({ mainAxis: this.#options.offset }),
+					flip(),
+					shift({ padding: 8 })
+				]
+			}).then(({ x, y, placement }) => {
+				this.x = x;
+				this.y = y;
+				this.#options.placement = placement;
+			});
+		});
+		return () => {
+			this.cleanupAutoUpdate?.();
+			this.cleanupAutoUpdate = void 0;
+		};
+	};
+	destroy() {
+		this.forceClose();
+	}
+	forceClose() {
+		clearTimeout(this.delayTimer);
+		clearTimeout(this.closeTimer);
+		if (TooltipStore.active === this) TooltipStore.active = null;
+		this.open = false;
+		this.visible = false;
+		this.cleanupAutoUpdate?.();
+		this.cleanupAutoUpdate = void 0;
+	}
+};
+//#endregion
+export { TooltipStore };

package/dist/components/Tooltip/types.d.ts

@@ -1,16 +1,12 @@
+import type { Placement } from '@floating-ui/dom';
 import type { Snippet } from 'svelte';
-export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
-export type TooltipAlign = 'start' | 'center' | 'end';
 export type TooltipProps = {
-    open?: boolean;
     delayDuration?: number;
     content?: Snippet<[]> | string;
     children?: Snippet<[]>;
     arrow?: boolean;
-    align?: TooltipAlign;
-    sideOffset?: number;
-    alignOffset?: number;
-    side?: TooltipSide;
+    offset?: number;
     class?: string;
     arrowClass?: string;
+    placement?: Placement;
 };

package/dist/components/index.d.ts

@@ -32,5 +32,5 @@ export { Slider, type SliderProps } from './Slider';
 export { SliderInput, type SliderInputProps } from './SliderInput';
 export { Spinner, type SpinnerSize } from './Spinner';
 export { Tabs, type TabsProps } from './Tabs';
-export { Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, } from './Tooltip';
+export { Tooltip, type TooltipProps, } from './Tooltip';
 export { Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, } from './Typography';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@max-ts/svelte",
-  "version": "1.10.8",
+  "version": "1.10.11",
   "type": "module",
   "description": "Svelte component library.",
   "author": "Tsepelev Maksim",
@@ -67,6 +67,7 @@
     "vitest-browser-svelte": "^2.1.0"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.7.6",
     "@lucide/svelte": "^0.577.0",
     "bits-ui": "^2.16.3"
   },