@finsweet/webflow-apps-utils 1.0.24 → 1.0.25

package/dist/ui/components/color-picker/ColorPicker.svelte

@@ -50,28 +50,6 @@
 		id
 	}: Props = $props();
 
-	// Remove local inputValue state
-	// let inputValue = $state(color);
-
-	// Helper: normalize hex to 6-digit uppercase
-	// function normalizeHex(value: string): string {
-	// 	if (/^#[A-Fa-f0-9]{3}$/.test(value)) {
-	// 		return (
-	// 			'#' +
-	// 			value
-	// 				.slice(1)
-	// 				.split('')
-	// 				.map((c) => c + c)
-	// 				.join('')
-	// 				.toUpperCase()
-	// 		);
-	// 	}
-	// 	if (/^#[A-Fa-f0-9]{6}$/.test(value)) {
-	// 		return value.toUpperCase();
-	// 	}
-	// 	return value;
-	// }
-
 	function isValidColor(value: string): boolean {
 		const hexRegex = /^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/;
 		return hexRegex.test(value.startsWith('#') ? value.slice(1) : value);
@@ -211,11 +189,19 @@
 		color = fullColor.hex;
 	}
 
+	function handleDragEnd() {
+		// Signal the tooltip to ignore the next click event
+		// This prevents the tooltip from closing when dragging and releasing outside
+		tooltipRef?.ignoreNextClickEvent?.();
+	}
+
 	let showColorSelect = $state(defaultShowColorSelect);
+	let tooltipRef: { ignoreNextClickEvent?: () => void } | undefined = $state();
 </script>
 
 <div class="color-picker">
 	<Tooltip
+		bind:this={tooltipRef}
 		listener="click"
 		listenerout="click"
 		showArrow={false}
@@ -235,7 +221,7 @@
 		{/snippet}
 		{#snippet tooltip()}
 			{#if showColorSelect}
-				<ColorSelect bind:color oncolorchange={handleFullColorChange} />
+				<ColorSelect bind:color oncolorchange={handleFullColorChange} ondragend={handleDragEnd} />
 			{/if}
 		{/snippet}
 	</Tooltip>
@@ -275,6 +261,11 @@
 			0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset,
 			0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset,
 			0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset;
+
+		user-select: none;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
 	}
 
 	.color-picker__swatch {

package/dist/ui/components/color-picker/ColorSelect.svelte

@@ -12,9 +12,14 @@
 		alpha: number;
 	}
 
-	let { color = $bindable('#fff'), oncolorchange } = $props<{
+	let {
+		color = $bindable('#fff'),
+		oncolorchange,
+		ondragend
+	} = $props<{
 		color?: string;
 		oncolorchange?: (fullColor: ColorObject) => void;
+		ondragend?: () => void;
 	}>();
 
 	function setColor(newColor: string) {
@@ -510,6 +515,8 @@
 		if (isDragging) {
 			isDragging = false;
 			dragTarget = null;
+			// Signal that a drag operation just ended
+			ondragend?.();
 		}
 
 		// Reset drag detection state

package/dist/ui/components/color-picker/ColorSelect.svelte.d.ts

@@ -24,6 +24,7 @@ interface ColorObject {
 type $$ComponentProps = {
     color?: string;
     oncolorchange?: (fullColor: ColorObject) => void;
+    ondragend?: () => void;
 };
 declare const ColorSelect: import("svelte").Component<$$ComponentProps, {}, "color">;
 type ColorSelect = ReturnType<typeof ColorSelect>;

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

@@ -64,6 +64,7 @@
 	let arrowElement: HTMLDivElement | undefined = $state();
 	let observer: MutationObserver | null = null;
 	let documentClickListener: ((event: MouseEvent) => void) | null = null;
+	let ignoreNextClick = $state(false);
 	const tooltipId = `tooltip-${uuidv4()}`;
 
 	/**
@@ -214,6 +215,12 @@
 
 			// Store reference to the click handler for cleanup
 			documentClickListener = (event: MouseEvent) => {
+				// Ignore clicks that happen immediately after a drag operation
+				if (ignoreNextClick) {
+					ignoreNextClick = false;
+					return;
+				}
+
 				if (
 					tooltipElement &&
 					toggle &&
@@ -263,6 +270,9 @@
 
 	export const show = () => tooltipInstance?.showTooltip();
 	export const hide = () => tooltipInstance?.hideTooltip();
+	export const ignoreNextClickEvent = () => {
+		ignoreNextClick = true;
+	};
 
 	// Svelte 5 effect for hidden prop
 	$effect(() => {

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

@@ -3,6 +3,7 @@ import type { TooltipProps } from './types';
 declare const Tooltip: Component<TooltipProps, {
     show: () => void | undefined;
     hide: () => void | undefined;
+    ignoreNextClickEvent: () => void;
 }, "hidden" | "isActive">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/package.json

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