@r2digisolutions/components 0.8.6 → 0.8.8

package/dist/components/molecules/DatePicker/DatePicker.svelte

@@ -91,9 +91,13 @@
 
 	let triggerEl = $state<HTMLElement | null>(null);
 	let panelEl = $state<HTMLDivElement | null>(null);
-	let panelStyle = $state('margin:0;inset:auto;');
+	/** Hide the native popover until top/left are applied (UA default is 0,0). */
+	let placed = $state(false);
 	let activeField = $state<'start' | 'end' | 'value'>('value');
 	let panelId = $state('');
+	/** In-progress range while the popover is open. Parent props stay put until both days exist. */
+	let draftStart = $state('');
+	let draftEnd = $state('');
 
 	$effect(() => {
 		panelId ||= createId('datepicker');
@@ -110,6 +114,9 @@
 		});
 	}
 
+	const shownStart = $derived(open && mode === 'range' ? draftStart : start);
+	const shownEnd = $derived(open && mode === 'range' ? draftEnd : end);
+
 	const fieldLabel = $derived.by(() => {
 		if (mode === 'single') return value ? formatIso(value) : placeholder;
 		if (mode === 'multiple') {
@@ -117,8 +124,8 @@
 			if (values.length === 1) return formatIso(values[0]);
 			return `${values.length} dates`;
 		}
-		if (start && end) return `${formatIso(start)} → ${formatIso(end)}`;
-		if (start) return `${formatIso(start)} → …`;
+		if (shownStart && shownEnd) return `${formatIso(shownStart)} → ${formatIso(shownEnd)}`;
+		if (shownStart) return `${formatIso(shownStart)} → …`;
 		return placeholder;
 	});
 
@@ -128,9 +135,15 @@
 		return { side, align: align ?? (months === 2 ? 'center' : 'start') };
 	}
 
-	function positionPanel() {
-		if (!triggerEl || !panelEl) return;
-		if (!panelEl.matches(':popover-open')) return;
+	function estimatePanelSize() {
+		const monthW = months === 2 ? 288 : 320;
+		const panelW = months === 2 ? monthW * 2 + 24 : monthW + 16;
+		return { panelW, panelH: 360 };
+	}
+
+	function positionPanel(opts: { measure?: boolean; show?: boolean } = {}) {
+		if (!triggerEl) return;
+		if (opts.show) placed = true;
 
 		const trigger = triggerEl.getBoundingClientRect();
 		if (trigger.width < 2 && trigger.height < 2) return;
@@ -142,9 +155,16 @@
 		const viewTop = vv?.offsetTop ?? 0;
 		const gap = 8;
 		const pad = 8;
-
-		const panelW = Math.min(panelEl.offsetWidth || 320, viewW - pad * 2);
-		const panelH = Math.min(panelEl.offsetHeight || 360, 420);
+		const estimated = estimatePanelSize();
+		const canMeasure = opts.measure !== false && !!panelEl?.matches(':popover-open');
+		const panelW = Math.min(
+			canMeasure && panelEl?.offsetWidth ? panelEl.offsetWidth : estimated.panelW,
+			viewW - pad * 2
+		);
+		const panelH = Math.min(
+			canMeasure && panelEl?.offsetHeight ? panelEl.offsetHeight : estimated.panelH,
+			420
+		);
 
 		const fixed = parsePlacement(placement);
 		let side: 'top' | 'bottom' = fixed?.side ?? 'bottom';
@@ -167,15 +187,19 @@
 		left = Math.min(Math.max(viewLeft + pad, left), viewLeft + viewW - panelW - pad);
 		top = Math.min(Math.max(viewTop + pad, top), viewTop + viewH - panelH - pad);
 
-		panelStyle = [
-			'margin:0',
-			'inset:auto',
-			`top:${Math.round(top)}px`,
-			`left:${Math.round(left)}px`,
-			'right:auto',
-			'bottom:auto',
-			'width:max-content'
-		].join(';');
+		// Imperative styles in `beforetoggle`: a Svelte `style={}` binding
+		// flushes too late and the UA popover paints at 0,0 first.
+		if (panelEl) {
+			const s = panelEl.style;
+			s.setProperty('margin', '0');
+			s.setProperty('inset', 'auto');
+			s.setProperty('top', `${Math.round(top)}px`);
+			s.setProperty('left', `${Math.round(left)}px`);
+			s.setProperty('right', 'auto');
+			s.setProperty('bottom', 'auto');
+			s.setProperty('width', 'max-content');
+			s.setProperty('visibility', placed ? 'visible' : 'hidden');
+		}
 	}
 
 	function schedulePosition() {
@@ -183,7 +207,7 @@
 			positionPanel();
 			requestAnimationFrame(() => {
 				positionPanel();
-				requestAnimationFrame(positionPanel);
+				requestAnimationFrame(() => positionPanel({ show: true }));
 			});
 		});
 	}
@@ -205,15 +229,35 @@
 	}
 
 	function handleBeforeToggle(event: ToggleEvent) {
-		if (event.newState === 'open' && disabled) {
-			event.preventDefault();
+		if (event.newState === 'open') {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			beginRangeDraft();
+			placed = false;
+			// Set top/left before the first paint — UA popover defaults to 0,0.
+			positionPanel({ measure: false });
+		} else {
+			placed = false;
+		}
+	}
+
+	function beginRangeDraft() {
+		draftStart = start;
+		draftEnd = end;
+		// Opening "Hasta" with a complete range: keep start, wait for a new end.
+		if (mode === 'range' && activeField === 'end' && start && end) {
+			draftEnd = '';
 		}
 	}
 
 	function handleToggle(event: ToggleEvent) {
 		const next = event.newState === 'open';
+		if (next) beginRangeDraft();
 		open = next;
 		if (next) schedulePosition();
+		else placed = false;
 	}
 
 	$effect(() => {
@@ -241,17 +285,23 @@
 		start: string;
 		end: string;
 	}) {
+		if (mode === 'range') {
+			// Keep the in-progress day local. Parent (URL/filters) only gets a complete range.
+			if (detail.start && detail.end) {
+				start = detail.start;
+				end = detail.end;
+				onchange?.(detail);
+				if (closeOnSelect) setOpen(false);
+			}
+			return;
+		}
+
 		onchange?.(detail);
 
 		if (!closeOnSelect) return;
 
 		if (mode === 'single' && detail.value) {
 			setOpen(false);
-			return;
-		}
-
-		if (mode === 'range' && detail.start && detail.end) {
-			setOpen(false);
 		}
 	}
 
@@ -313,8 +363,8 @@
 				]}
 			>
 				<span class="text-[11px] font-medium tracking-wide text-muted uppercase">{startLabel}</span>
-				<span class={['truncate text-sm', start ? 'text-primary' : 'text-muted']}>
-					{start ? formatIso(start) : startPlaceholder}
+				<span class={['truncate text-sm', shownStart ? 'text-primary' : 'text-muted']}>
+					{shownStart ? formatIso(shownStart) : startPlaceholder}
 				</span>
 			</button>
 			<div class="w-px self-stretch bg-border" aria-hidden="true"></div>
@@ -336,8 +386,8 @@
 				]}
 			>
 				<span class="text-[11px] font-medium tracking-wide text-muted uppercase">{endLabel}</span>
-				<span class={['truncate text-sm', end ? 'text-primary' : 'text-muted']}>
-					{end ? formatIso(end) : endPlaceholder}
+				<span class={['truncate text-sm', shownEnd ? 'text-primary' : 'text-muted']}>
+					{shownEnd ? formatIso(shownEnd) : endPlaceholder}
 				</span>
 			</button>
 			{#if hasValue && !disabled}
@@ -427,13 +477,13 @@
 		aria-label="Choose date"
 		onbeforetoggle={handleBeforeToggle}
 		ontoggle={handleToggle}
-		style={panelStyle}
+		data-placed={placed ? true : undefined}
 		class={[
 			'datepicker-popover m-0 w-max rounded-2xl border border-border bg-surface-elevated p-2 shadow-xl outline-none',
 			months === 2 ? 'max-w-[min(42rem,calc(100vw-1rem))]' : 'max-w-[20rem]'
 		]}
 	>
-		{#key `${open}:${start}:${value}`}
+		{#key open}
 			{#if mode === 'single'}
 				<Calendar
 					mode="single"
@@ -466,8 +516,8 @@
 				<Calendar
 					mode="range"
 					{months}
-					bind:start
-					bind:end
+					bind:start={draftStart}
+					bind:end={draftEnd}
 					{min}
 					{max}
 					{disabledDates}
@@ -496,6 +546,11 @@
 		display: block;
 	}
 
+	.datepicker-popover:popover-open:not([data-placed]) {
+		visibility: hidden;
+		pointer-events: none;
+	}
+
 	.datepicker-popover:not(:popover-open) {
 		display: none;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.8.6",
+	"version": "0.8.8",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",