@r2digisolutions/components 0.14.14 → 0.14.16

package/dist/components/molecules/DateTimePicker/DateTimePicker.stories.d.ts

@@ -25,11 +25,11 @@ declare const meta: {
         format: "24h";
         minuteStep: number;
         label: string;
-        closeOnSelect: true;
+        closeOnSelect: false;
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const TwelveHour: Story;
-export declare const KeepOpen: Story;
+export declare const InstantClose: Story;

package/dist/components/molecules/DateTimePicker/DateTimePicker.stories.js

@@ -12,13 +12,13 @@ const meta = {
         format: '24h',
         minuteStep: 5,
         label: 'Date & time',
-        closeOnSelect: true
+        closeOnSelect: false
     }
 };
 export default meta;
 export const Default = {};
 export const TwelveHour = { args: { format: '12h' } };
-export const KeepOpen = {
-    name: 'Keep open after select',
-    args: { closeOnSelect: false }
+export const InstantClose = {
+    name: 'Instant commit (legacy)',
+    args: { closeOnSelect: true }
 };

package/dist/components/molecules/DateTimePicker/DateTimePicker.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
+	import { on } from 'svelte/events';
+	import Button from '../../atoms/Button/Button.svelte';
 	import Calendar from '../Calendar/Calendar.svelte';
 	import type { CalendarDot } from '../Calendar/Calendar.svelte';
 	import type { TimeFormat } from '../TimePicker/TimePicker.svelte';
+	import { i18n } from '../../../utils/i18n.svelte.js';
+	import { createId } from '../../../utils/id.js';
 
 	interface DateTimePickerProps {
 		/** Date part `YYYY-MM-DD`. */
@@ -20,7 +24,13 @@
 		dots?: CalendarDot[];
 		format?: TimeFormat;
 		minuteStep?: number;
+		/**
+		 * When false (default), edits stay in the panel until Save; Cancel discards.
+		 * When true, each pick commits immediately and may close the panel.
+		 */
 		closeOnSelect?: boolean;
+		cancelLabel?: string;
+		saveLabel?: string;
 		class?: string;
 		onchange?: (detail: { date: string; time: string; value: string }) => void;
 	}
@@ -39,14 +49,31 @@
 		dots = [],
 		format = '24h',
 		minuteStep = 5,
-		closeOnSelect = true,
+		closeOnSelect = false,
+		cancelLabel,
+		saveLabel,
 		class: className = '',
 		onchange
 	}: DateTimePickerProps = $props();
 
-	let rootEl = $state<HTMLDivElement | null>(null);
+	let triggerEl = $state<HTMLElement | null>(null);
+	let panelEl = $state<HTMLDivElement | null>(null);
 	let hourListEl = $state<HTMLDivElement | null>(null);
 	let minuteListEl = $state<HTMLDivElement | null>(null);
+	let placed = $state(false);
+	let panelId = $state('');
+	let draftDate = $state('');
+	let draftTime = $state('');
+
+	const resolvedCancelLabel = $derived(cancelLabel ?? i18n.t('cancel'));
+	const resolvedSaveLabel = $derived(saveLabel ?? i18n.t('save'));
+	const confirmMode = $derived(!closeOnSelect);
+	const panelDate = $derived(confirmMode ? draftDate : date);
+	const panelTime = $derived(confirmMode ? draftTime : time);
+
+	$effect(() => {
+		panelId ||= createId('datetimepicker');
+	});
 
 	const hours24 = Array.from({ length: 24 }, (_, i) => i);
 	const minutes = $derived(
@@ -82,7 +109,6 @@
 		onchange?.({ date, time, value });
 	}
 
-	// Keep parts in sync when `value` is set externally
 	$effect(() => {
 		if (!value) return;
 		const [d, t] = value.includes('T') ? value.split('T') : [value, time];
@@ -93,7 +119,7 @@
 		}
 	});
 
-	const parsedTime = $derived(parseTime(time));
+	const parsedTime = $derived(parseTime(panelTime));
 	const selectedH = $derived(parsedTime?.h ?? null);
 	const selectedM = $derived(parsedTime?.m ?? null);
 
@@ -122,40 +148,171 @@
 		return formatTimeDisplay(time);
 	});
 
+	function estimatePanelSize() {
+		return { panelW: 672, panelH: confirmMode ? 432 : 380 };
+	}
+
+	function beginDraft() {
+		draftDate = date;
+		draftTime = time || '09:00';
+	}
+
+	function setPanelDate(next: string) {
+		if (confirmMode) draftDate = next;
+		else date = next;
+	}
+
+	function setPanelTime(next: string) {
+		if (confirmMode) draftTime = next;
+		else time = next;
+	}
+
+	function commitDraft() {
+		date = draftDate;
+		time = draftTime || '09:00';
+		emit();
+		setOpen(false);
+	}
+
+	function cancelDraft() {
+		setOpen(false);
+	}
+
+	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;
+
+		const vv = window.visualViewport;
+		const viewW = vv?.width ?? window.innerWidth;
+		const viewH = vv?.height ?? window.innerHeight;
+		const viewLeft = vv?.offsetLeft ?? 0;
+		const viewTop = vv?.offsetTop ?? 0;
+		const gap = 8;
+		const pad = 8;
+		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,
+			viewH - pad * 2
+		);
+
+		const spaceBelow = viewTop + viewH - trigger.bottom - gap - pad;
+		const spaceAbove = trigger.top - viewTop - gap - pad;
+		const side: 'top' | 'bottom' = spaceBelow < panelH && spaceAbove > spaceBelow ? 'top' : 'bottom';
+
+		let top = side === 'bottom' ? trigger.bottom + gap : trigger.top - panelH - gap;
+		let left = trigger.left;
+
+		left = Math.min(Math.max(viewLeft + pad, left), viewLeft + viewW - panelW - pad);
+		top = Math.min(Math.max(viewTop + pad, top), viewTop + viewH - panelH - pad);
+
+		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() {
+		queueMicrotask(() => {
+			positionPanel();
+			requestAnimationFrame(() => {
+				positionPanel();
+				requestAnimationFrame(() => positionPanel({ show: true }));
+			});
+		});
+	}
+
+	function syncNative() {
+		if (!panelEl) return;
+		const isOpen = panelEl.matches(':popover-open');
+		try {
+			if (open && !isOpen) panelEl.showPopover();
+			else if (!open && isOpen) panelEl.hidePopover();
+		} catch {
+			/* ignore */
+		}
+	}
+
 	function setOpen(next: boolean) {
-		if (disabled) return;
+		if (disabled && next) return;
 		open = next;
 	}
 
-	function onDocPointerDown(e: PointerEvent) {
-		if (!open || !rootEl) return;
-		const path = typeof e.composedPath === 'function' ? e.composedPath() : [];
-		if (path.includes(rootEl) || rootEl.contains(e.target as Node)) return;
-		setOpen(false);
+	function handleBeforeToggle(event: ToggleEvent) {
+		if (event.newState === 'open') {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			if (confirmMode) beginDraft();
+			placed = false;
+			positionPanel({ measure: false });
+		} else {
+			placed = false;
+		}
 	}
 
-	function onKey(e: KeyboardEvent) {
-		if (e.key === 'Escape' && open) setOpen(false);
+	function handleToggle(event: ToggleEvent) {
+		open = event.newState === 'open';
+		if (open) schedulePosition();
+		else placed = false;
 	}
 
+	$effect(() => {
+		open;
+		queueMicrotask(() => {
+			syncNative();
+			if (open) positionPanel();
+		});
+	});
+
+	$effect(() => {
+		if (!open) return;
+		const offResize = on(window, 'resize', () => positionPanel());
+		const offScroll = on(window, 'scroll', () => positionPanel(), { capture: true });
+		return () => {
+			offResize();
+			offScroll();
+		};
+	});
+
 	function handleDateChange(detail: { value: string }) {
-		date = detail.value;
-		if (!time) time = '09:00';
-		emit();
-		if (closeOnSelect && date && time) setOpen(false);
+		setPanelDate(detail.value);
+		const currentTime = confirmMode ? draftTime : time;
+		if (!currentTime) setPanelTime('09:00');
+		if (!confirmMode) {
+			emit();
+			if (closeOnSelect && date && time) setOpen(false);
+		}
 	}
 
 	function pickHour(h: number) {
 		const m = selectedM ?? 0;
-		time = toTime(h, m);
-		emit();
+		setPanelTime(toTime(h, m));
+		if (!confirmMode) emit();
 	}
 
 	function pickMinute(m: number) {
 		const h = selectedH ?? 9;
-		time = toTime(h, m);
-		emit();
-		if (closeOnSelect && date && time) setOpen(false);
+		setPanelTime(toTime(h, m));
+		if (!confirmMode) {
+			emit();
+			if (closeOnSelect && date && time) setOpen(false);
+		}
 	}
 
 	function clear(e: MouseEvent) {
@@ -184,14 +341,13 @@
 	});
 </script>
 
-<svelte:document onpointerdown={onDocPointerDown} onkeydown={onKey} />
-
-<div class={['relative w-full min-w-[20rem] max-w-[22rem]', className]} bind:this={rootEl}>
+<div class={['w-full min-w-[20rem] max-w-[22rem]', className]}>
 	{#if label}
 		<span class="mb-1.5 block text-sm font-medium text-primary">{label}</span>
 	{/if}
 
 	<div
+		bind:this={triggerEl}
 		class={[
 			'flex h-10 w-full items-center overflow-hidden rounded-xl border border-border bg-surface-elevated transition-colors',
 			open && 'border-brand-500 ring-2 ring-brand-500/20',
@@ -201,8 +357,11 @@
 		<button
 			type="button"
 			{disabled}
-			onclick={() => setOpen(!open)}
+			popovertarget={panelId}
+			popovertargetaction="toggle"
 			aria-expanded={open}
+			aria-haspopup="dialog"
+			aria-controls={panelId}
 			class={[
 				'flex h-full min-w-0 flex-1 items-center gap-2 px-3.5 text-left text-sm',
 				'hover:bg-surface-overlay focus-visible:outline-none',
@@ -241,85 +400,125 @@
 		{/if}
 	</div>
 
-	{#if open}
-		<div
-			role="dialog"
-			aria-label="Choose date and time"
-			class="absolute left-0 z-50 mt-2 flex w-max max-w-[min(100vw-1rem,42rem)] flex-col overflow-hidden rounded-2xl border border-border bg-surface-elevated shadow-xl sm:flex-row sm:items-stretch"
-			onpointerdown={(e) => e.stopPropagation()}
-		>
-			<div class="w-[22rem] shrink-0 p-3.5">
-				<Calendar
-					mode="single"
-					bind:value={date}
-					{min}
-					{max}
-					{disabledDates}
-					{dots}
-					framed={false}
-					class="w-full"
-					onchange={handleDateChange}
-				/>
-			</div>
-			<div
-				class="flex w-full shrink-0 flex-col border-t border-border sm:w-40 sm:border-l sm:border-t-0"
-			>
-				<span
-					class="shrink-0 border-b border-border px-3 py-2.5 text-center text-[11px] font-medium uppercase tracking-wide text-muted"
+	<div
+		bind:this={panelEl}
+		id={panelId}
+		popover="auto"
+		role="dialog"
+		aria-label="Choose date and time"
+		onbeforetoggle={handleBeforeToggle}
+		ontoggle={handleToggle}
+		data-placed={placed ? true : undefined}
+		class="datetime-picker-popover m-0 flex w-max max-w-[min(100vw-1rem,42rem)] flex-col overflow-hidden rounded-2xl border border-border bg-surface-elevated shadow-xl outline-none"
+	>
+		{#key open}
+			<div class="flex flex-col sm:flex-row sm:items-stretch">
+				<div class="w-[22rem] shrink-0 p-1.5">
+					<Calendar
+						mode="single"
+						value={panelDate}
+						{min}
+						{max}
+						{disabledDates}
+						{dots}
+						framed={false}
+						class="w-full"
+						onchange={handleDateChange}
+					/>
+				</div>
+				<div
+					class="flex w-full shrink-0 flex-col border-t border-border sm:w-40 sm:border-l sm:border-t-0"
 				>
-					Time
-				</span>
-				<div class="grid min-h-0 flex-1 grid-cols-2 divide-x divide-border">
-					<div
-						bind:this={hourListEl}
-						class="h-[18.5rem] overflow-y-auto p-1.5"
-						role="listbox"
-						aria-label="Hours"
+					<span
+						class="shrink-0 border-b border-border px-3 py-2.5 text-center text-[11px] font-medium uppercase tracking-wide text-muted"
 					>
-						{#each hours24 as h (h)}
-							<button
-								type="button"
-								role="option"
-								aria-pressed={selectedH === h}
-								aria-selected={selectedH === h}
-								onclick={() => pickHour(h)}
-								class={[
-									'w-full rounded-lg px-2 py-1.5 text-sm transition-colors',
-									selectedH === h
-										? 'bg-brand-500 font-semibold text-white'
-										: 'text-primary hover:bg-surface-overlay'
-								]}
-							>
-								{hourLabel(h)}
-							</button>
-						{/each}
-					</div>
-					<div
-						bind:this={minuteListEl}
-						class="h-[18.5rem] overflow-y-auto p-1.5"
-						role="listbox"
-						aria-label="Minutes"
-					>
-						{#each minutes as m (m)}
-							<button
-								type="button"
-								role="option"
-								aria-pressed={selectedM === m}
-								aria-selected={selectedM === m}
-								onclick={() => pickMinute(m)}
-								class={[
-									'w-full rounded-lg px-2 py-1.5 text-sm transition-colors',
-									selectedM === m
-										? 'bg-brand-500 font-semibold text-white'
-										: 'text-primary hover:bg-surface-overlay'
-								]}
-							>
-								{pad(m)}
-							</button>
-						{/each}
+						Time
+					</span>
+					<div class="grid min-h-0 flex-1 grid-cols-2 divide-x divide-border">
+						<div
+							bind:this={hourListEl}
+							class="h-[18.5rem] overflow-y-auto p-1.5"
+							role="listbox"
+							aria-label="Hours"
+						>
+							{#each hours24 as h (h)}
+								<button
+									type="button"
+									role="option"
+									aria-pressed={selectedH === h}
+									aria-selected={selectedH === h}
+									onclick={() => pickHour(h)}
+									class={[
+										'w-full rounded-lg px-2 py-1.5 text-sm transition-colors',
+										selectedH === h
+											? 'bg-brand-500 font-semibold text-white'
+											: 'text-primary hover:bg-surface-overlay'
+									]}
+								>
+									{hourLabel(h)}
+								</button>
+							{/each}
+						</div>
+						<div
+							bind:this={minuteListEl}
+							class="h-[18.5rem] overflow-y-auto p-1.5"
+							role="listbox"
+							aria-label="Minutes"
+						>
+							{#each minutes as m (m)}
+								<button
+									type="button"
+									role="option"
+									aria-pressed={selectedM === m}
+									aria-selected={selectedM === m}
+									onclick={() => pickMinute(m)}
+									class={[
+										'w-full rounded-lg px-2 py-1.5 text-sm transition-colors',
+										selectedM === m
+											? 'bg-brand-500 font-semibold text-white'
+											: 'text-primary hover:bg-surface-overlay'
+									]}
+								>
+									{pad(m)}
+								</button>
+							{/each}
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
-	{/if}
+			{#if confirmMode}
+				<div class="flex items-center justify-end gap-2 border-t border-border px-3 py-2.5">
+					<Button type="button" variant="ghost" size="sm" onclick={cancelDraft}>
+						{resolvedCancelLabel}
+					</Button>
+					<Button type="button" size="sm" disabled={!draftDate} onclick={commitDraft}>
+						{resolvedSaveLabel}
+					</Button>
+				</div>
+			{/if}
+		{/key}
+	</div>
 </div>
+
+<style>
+	.datetime-picker-popover {
+		position: fixed;
+		inset: unset;
+		margin: 0;
+		width: max-content;
+		height: max-content;
+	}
+
+	.datetime-picker-popover:popover-open {
+		display: flex;
+	}
+
+	.datetime-picker-popover:popover-open:not([data-placed]) {
+		visibility: hidden;
+		pointer-events: none;
+	}
+
+	.datetime-picker-popover:not(:popover-open) {
+		display: none;
+	}
+</style>

package/dist/components/molecules/DateTimePicker/DateTimePicker.svelte.d.ts

@@ -17,7 +17,13 @@ interface DateTimePickerProps {
     dots?: CalendarDot[];
     format?: TimeFormat;
     minuteStep?: number;
+    /**
+     * When false (default), edits stay in the panel until Save; Cancel discards.
+     * When true, each pick commits immediately and may close the panel.
+     */
     closeOnSelect?: boolean;
+    cancelLabel?: string;
+    saveLabel?: string;
     class?: string;
     onchange?: (detail: {
         date: string;

package/dist/components/molecules/DateTimePicker/DateTimePickerStory.svelte

@@ -6,7 +6,7 @@
 		format = '24h',
 		minuteStep = 5,
 		label = 'Date & time',
-		closeOnSelect = true
+		closeOnSelect = false
 	}: {
 		format?: TimeFormat;
 		minuteStep?: number;

package/dist/components/molecules/NumberInput/NumberInput.svelte

@@ -105,6 +105,9 @@
 			{disabled}
 			{size}
 			{status}
+			{min}
+			{max}
+			{step}
 			type="number"
 			bind:value={text}
 			onblur={() => commit(text)}
@@ -151,6 +154,9 @@
 			{disabled}
 			{size}
 			{status}
+			{min}
+			{max}
+			{step}
 			type="number"
 			bind:value={text}
 			onblur={() => commit(text)}
@@ -193,6 +199,9 @@
 			{disabled}
 			{size}
 			{status}
+			{min}
+			{max}
+			{step}
 			type="number"
 			bind:value={text}
 			onblur={() => commit(text)}

package/package.json

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