@hyvor/design 2.1.7 → 2.1.8-beta.2

package/dist/cloud/HyvorBar/BarSupport.svelte

@@ -111,7 +111,7 @@
 						{/snippet}
 					</ActionListItem>
 				</a>
-				<a href={SOCIAL_LINKS.blueksy} target="_blank">
+				<a href={SOCIAL_LINKS.bluesky} target="_blank">
 					<ActionListItem>
 						Bluesky
 						{#snippet start()}

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

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

package/dist/components/Tooltip/Tooltip.svelte

@@ -1,43 +1,22 @@
+<!-- @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 } from 'svelte';
+	import { tick, onMount, onDestroy } 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>;
-	}
 
-	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>;
+	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;
 
 	function positionTooltip() {
-		if (wrap && tooltipEl && show) {
+		if (wrap && tooltip && show) {
 			const wrapRect = wrap.getBoundingClientRect();
-			const tooltipRect = tooltipEl.getBoundingClientRect();
+			const tooltipRect = tooltip.getBoundingClientRect();
 
 			let top, left;
 
@@ -57,41 +36,36 @@
 				left = position === 'left' ? leftVal : wrapRect.right + 10;
 			}
 
-			tooltipEl.style.top = top + 'px';
-			tooltipEl.style.left = left + 'px';
+			tooltip.style.top = top + 'px';
+			tooltip.style.left = left + 'px';
 		}
 	}
 
-	function handleMouseEnter() {
+	async function handleMouseEnter() {
 		if (!disabled) {
-			clearTimeout(showTimeout);
-			showTimeout = setTimeout(async () => {
-				show = true;
-				await tick();
-				positionTooltip();
-			}, delay);
+			show = true;
+			await tick();
+			positionTooltip();
 		}
 	}
 
 	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);
 		};
 	});
@@ -99,23 +73,23 @@
 
 <div
 	class="tooltip-wrap {color}"
-	onmouseenter={handleMouseEnter}
-	onmouseleave={handleMouseLeave}
+	on:mouseenter={handleMouseEnter}
+	on:mouseleave={handleMouseLeave}
 	role="tooltip"
 	bind:this={wrap}
-	{...wrapperProps}
+	{...$$restProps}
 >
-	{@render children?.()}
+	<slot />
 
 	{#if !disabled && show}
 		<div
 			class="tooltip {position}"
 			style:max-width={maxWidth + 'px'}
-			bind:this={tooltipEl}
+			bind:this={tooltip}
 			transition:fade={{ duration: 100 }}
 		>
-			{#if tooltip}
-				{@render tooltip()}
+			{#if $$slots.tooltip}
+				<slot name="tooltip" />
 			{:else}
 				{text}
 			{/if}

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

@@ -1,17 +1,37 @@
-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>;
+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;
 }
-declare const Tooltip: import("svelte").Component<Props, {}, "show">;
-type Tooltip = ReturnType<typeof Tooltip>;
+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>;
 export default Tooltip;