@hyvor/design 2.1.6-beta.1 → 2.1.7

package/dist/cloud/HyvorBar/Organization/BarOrganization.svelte

@@ -28,7 +28,7 @@
 	position="bottom"
 	text="Switch Organization"
 	disabled={disableTooltip}
-	style="height: 100%"
+	wrapperProps={{ style: 'height: 100%' }}
 >
 	<button class="wrap" onclick={() => (show = true)} bind:this={trigger}>
 		<div class="data">

package/dist/components/Tooltip/Tooltip.svelte

@@ -1,22 +1,43 @@
-<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
 <script lang="ts">
-	import { tick, onMount, onDestroy } from 'svelte';
+	import { tick, onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props {
+		text?: string;
+		position?: 'top' | 'bottom' | 'left' | 'right';
+		color?: 'black' | 'accent' | 'soft' | 'danger';
+		show?: boolean;
+		maxWidth?: number;
+		disabled?: boolean;
+		delay?: number;
+		children?: Snippet;
+		tooltip?: Snippet;
+		wrapperProps?: HTMLAttributes<HTMLDivElement>;
+	}
 
-	export let text: string = '';
-	export let position: 'top' | 'bottom' | 'left' | 'right' = 'top';
-	export let color: 'black' | 'accent' | 'soft' | 'danger' = 'black';
-	export let show = false;
-	export let maxWidth: number = 300;
-	export let disabled = false;
-
-	let wrap: HTMLDivElement;
-	let tooltip: HTMLDivElement;
+	let {
+		text = '',
+		position = 'top',
+		color = 'black',
+		show = $bindable(false),
+		maxWidth = 300,
+		disabled = false,
+		delay = 100,
+		children,
+		tooltip,
+		wrapperProps = {}
+	}: Props = $props();
+
+	let wrap: HTMLDivElement | undefined = $state();
+	let tooltipEl: HTMLDivElement | undefined = $state();
+	let showTimeout: ReturnType<typeof setTimeout>;
 
 	function positionTooltip() {
-		if (wrap && tooltip && show) {
+		if (wrap && tooltipEl && show) {
 			const wrapRect = wrap.getBoundingClientRect();
-			const tooltipRect = tooltip.getBoundingClientRect();
+			const tooltipRect = tooltipEl.getBoundingClientRect();
 
 			let top, left;
 
@@ -36,36 +57,41 @@
 				left = position === 'left' ? leftVal : wrapRect.right + 10;
 			}
 
-			tooltip.style.top = top + 'px';
-			tooltip.style.left = left + 'px';
+			tooltipEl.style.top = top + 'px';
+			tooltipEl.style.left = left + 'px';
 		}
 	}
 
-	async function handleMouseEnter() {
+	function handleMouseEnter() {
 		if (!disabled) {
-			show = true;
-			await tick();
-			positionTooltip();
+			clearTimeout(showTimeout);
+			showTimeout = setTimeout(async () => {
+				show = true;
+				await tick();
+				positionTooltip();
+			}, delay);
 		}
 	}
 
 	function handleMouseLeave() {
+		clearTimeout(showTimeout);
 		show = false;
 	}
 
-	$: {
+	$effect(() => {
 		if (text) {
 			tick().then(() => {
 				positionTooltip();
 			});
 		}
-	}
+	});
 
 	onMount(() => {
 		positionTooltip();
 		document.addEventListener('scroll', positionTooltip);
 
 		return () => {
+			clearTimeout(showTimeout);
 			document.removeEventListener('scroll', positionTooltip);
 		};
 	});
@@ -73,23 +99,23 @@
 
 <div
 	class="tooltip-wrap {color}"
-	on:mouseenter={handleMouseEnter}
-	on:mouseleave={handleMouseLeave}
+	onmouseenter={handleMouseEnter}
+	onmouseleave={handleMouseLeave}
 	role="tooltip"
 	bind:this={wrap}
-	{...$$restProps}
+	{...wrapperProps}
 >
-	<slot />
+	{@render children?.()}
 
 	{#if !disabled && show}
 		<div
 			class="tooltip {position}"
 			style:max-width={maxWidth + 'px'}
-			bind:this={tooltip}
+			bind:this={tooltipEl}
 			transition:fade={{ duration: 100 }}
 		>
-			{#if $$slots.tooltip}
-				<slot name="tooltip" />
+			{#if tooltip}
+				{@render tooltip()}
 			{:else}
 				{text}
 			{/if}

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

@@ -1,37 +1,17 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props {
+    text?: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    color?: 'black' | 'accent' | 'soft' | 'danger';
+    show?: boolean;
+    maxWidth?: number;
+    disabled?: boolean;
+    delay?: number;
+    children?: Snippet;
+    tooltip?: Snippet;
+    wrapperProps?: HTMLAttributes<HTMLDivElement>;
 }
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Tooltip: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    text?: string | undefined;
-    position?: "top" | "bottom" | "left" | "right" | undefined;
-    color?: "black" | "accent" | "soft" | "danger" | undefined;
-    show?: boolean | undefined;
-    maxWidth?: number | undefined;
-    disabled?: boolean | undefined;
-}, {
-    default: {};
-    tooltip: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    tooltip: {};
-}, {}, string>;
-type Tooltip = InstanceType<typeof Tooltip>;
+declare const Tooltip: import("svelte").Component<Props, {}, "show">;
+type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.1.6-beta.1",
+	"version": "2.1.7",
 	"license": "MIT",
 	"private": false,
 	"repository": {