@finsweet/webflow-apps-utils 1.0.15 → 1.0.17

package/dist/ui/components/button/Button.svelte

@@ -148,7 +148,7 @@
 </script>
 
 {#if shouldShowTooltip}
-	<Tooltip {...tooltip}>
+	<Tooltip {...tooltip} stopPropagation={false}>
 		{#snippet target()}
 			<button
 				bind:this={buttonElement}

package/dist/ui/components/controlled-buttons/ControlledButtons.svelte

@@ -23,6 +23,7 @@
 						listener={button.popupTrigger || 'click'}
 						listenerout={button.popupTrigger || 'click'}
 						width="210px"
+						stopPropagation={false}
 					>
 						{#snippet target()}
 							<Button
@@ -84,6 +85,7 @@
 						placement={button.tooltip?.placement || 'top'}
 						offsetVal={10}
 						showArrow={button.tooltip?.showArrow !== false}
+						stopPropagation={false}
 					>
 						{#snippet target()}
 							<Button
@@ -186,6 +188,7 @@
 		min-width: 150px;
 		background: var(--background);
 		border-radius: 4px;
+		width: 100%;
 	}
 	.popup-content-icon {
 		display: flex;

package/dist/ui/components/section/Section.svelte

@@ -187,13 +187,14 @@
 			message={defaultDisabledMessage}
 			width={disabledTooltipWidth}
 			class="not-allowed"
+			stopPropagation={false}
 		>
 			{#snippet target()}
 				{@render sectionContent()}
 			{/snippet}
 		</Tooltip>
 	{:else if shouldShowTooltip}
-		<Tooltip {...tooltip}>
+		<Tooltip {...tooltip} stopPropagation={false}>
 			{#snippet target()}
 				{@render sectionContent()}
 			{/snippet}

package/dist/ui/components/text/Text.stories.svelte

@@ -227,7 +227,8 @@
 			active: true,
 			title: 'Remove',
 			subtitle: 'Alt + click',
-			description: 'This will remove the current selection.'
+			description: 'This will remove the current selection.',
+			onclick: () => console.log('Popup action clicked')
 		}
 	}}
 />

package/dist/ui/components/text/Text.svelte

@@ -550,6 +550,7 @@
 				bind:hidden={isPopupHidden}
 				listener="click"
 				listenerout="click"
+				stopPropagation={false}
 			>
 				{#snippet target()}
 					<span class="dropdown-label item {popupConfig.active ? 'active' : ''}">

package/dist/ui/components/tooltip/Tooltip.svelte

@@ -12,41 +12,15 @@
 	import { writable } from 'svelte/store';
 	import { v4 as uuidv4 } from 'uuid';
 
+	import { TooltipInfoCircleFilled } from '../../icons';
+	import ToolTipInfoCircleIcon from '../../icons/ToolTipInfoCircleIcon.svelte';
 	import { cleanupTooltipMessage } from '../../../utils';
 
 	import Text from '../text/Text.svelte';
+	import type { TooltipProps } from './types';
 
 	const activeTooltips = writable<string[]>([]);
 
-	interface Props {
-		message?: string;
-		listener?: 'click' | 'hover';
-		listenerout?: 'click' | 'hover';
-		placement?: Placement;
-		position?: string;
-		showArrow?: boolean;
-		offsetVal?: number;
-		hidden?: boolean;
-		disabled?: boolean;
-		tooltipIcon?: Component | null;
-		tooltipIconColor?: string;
-		width?: string;
-		padding?: string;
-		raw?: boolean;
-		isActive?: boolean;
-		fallbackPlacements?: Placement[];
-		stopPropagation?: boolean;
-		fontColor?: string;
-		bgColor?: string;
-		class?: string;
-		/** Target element snippet */
-		target?: Snippet;
-		/** Tooltip content snippet */
-		tooltip?: Snippet;
-		onshow?: (event: boolean) => void;
-		onclose?: (event: boolean) => void;
-	}
-
 	let {
 		message = '',
 		listener = 'hover',
@@ -68,11 +42,12 @@
 		fontColor = 'var(--text2)',
 		bgColor = '',
 		class: className = '',
+		targetClassName = '',
 		target,
 		tooltip,
 		onshow,
 		onclose
-	}: Props = $props();
+	}: TooltipProps = $props();
 
 	type TooltipInstance = {
 		toggle: HTMLElement;
@@ -303,6 +278,8 @@
 		}
 	});
 
+	let isClickTarget = $state(listener === 'click' && listenerout === 'click');
+
 	const formattedMessage = $derived(cleanupTooltipMessage(message));
 
 	onMount(async () => {
@@ -331,9 +308,12 @@
 	});
 </script>
 
-<div class="target" bind:this={targetElement} aria-describedby={tooltipId}>
+<div class="target {targetClassName}" bind:this={targetElement} aria-describedby={tooltipId}>
 	{#if target}
 		{@render target()}
+	{:else}
+		<!-- Default target for Demo only -->
+		<Text link label={isClickTarget ? 'Click me' : 'Hover me'} />
 	{/if}
 
 	<div
@@ -384,6 +364,9 @@
 		font-weight: 500;
 		font-size: 11px;
 	}
+	.target {
+		display: inline-flex;
+	}
 	.tooltip {
 		display: none;
 		top: 0;

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

@@ -1,34 +1,6 @@
-import { type Placement } from '@floating-ui/dom';
-import { type Component, type Snippet } from 'svelte';
-interface Props {
-    message?: string;
-    listener?: 'click' | 'hover';
-    listenerout?: 'click' | 'hover';
-    placement?: Placement;
-    position?: string;
-    showArrow?: boolean;
-    offsetVal?: number;
-    hidden?: boolean;
-    disabled?: boolean;
-    tooltipIcon?: Component | null;
-    tooltipIconColor?: string;
-    width?: string;
-    padding?: string;
-    raw?: boolean;
-    isActive?: boolean;
-    fallbackPlacements?: Placement[];
-    stopPropagation?: boolean;
-    fontColor?: string;
-    bgColor?: string;
-    class?: string;
-    /** Target element snippet */
-    target?: Snippet;
-    /** Tooltip content snippet */
-    tooltip?: Snippet;
-    onshow?: (event: boolean) => void;
-    onclose?: (event: boolean) => void;
-}
-declare const Tooltip: Component<Props, {
+import { type Component } from 'svelte';
+import type { TooltipProps } from './types';
+declare const Tooltip: Component<TooltipProps, {
     show: () => void | undefined;
     hide: () => void | undefined;
 }, "hidden" | "isActive">;

package/dist/ui/components/tooltip/types.d.ts

@@ -2,6 +2,14 @@ import type { Placement } from '@floating-ui/dom';
 import type { Component, Snippet } from 'svelte';
 export type TooltipListener = 'click' | 'hover';
 export interface TooltipProps {
+    /**
+     * Event handler for tooltip show
+     */
+    onshow?: (event: boolean) => void;
+    /**
+     * Event handler for tooltip show
+     */
+    onclose?: (event: boolean) => void;
     /**
      * The tooltip message content
      */
@@ -74,6 +82,10 @@ export interface TooltipProps {
      * Font color for tooltip text
      */
     fontColor?: string;
+    /**
+     * Target element class name
+     */
+    targetClassName?: string;
     /**
      * Target element snippet (what triggers the tooltip)
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {