@makolabs/ripple 3.3.0 → 3.4.1

package/dist/forms/DateRange.svelte

@@ -3,17 +3,15 @@
 	import { buildTestId } from '../helper/testid.js';
 	import { Size } from '../variants.js';
 	import { formSizeTokens } from './form-size.js';
+	import Popover from '../elements/popover/Popover.svelte';
+	import Calendar from './calendar/Calendar.svelte';
 	import type { DateRangeProps } from '../index.js';
-	import Portal from '../utils/Portal.svelte';
-	import { fly } from 'svelte/transition';
-	import { quintOut } from 'svelte/easing';
-	import { onMount } from 'svelte';
 
 	let {
 		startDate = $bindable(),
 		endDate = $bindable(),
-		minDate = new Date(new Date().getFullYear() - 5, 0, 1),
-		maxDate = new Date(new Date().getFullYear() + 5, 11, 31),
+		minDate,
+		maxDate,
 		disabled = false,
 		class: className = '',
 		placeholder = 'Select date range',
@@ -28,224 +26,47 @@
 		testId
 	}: DateRangeProps = $props();
 
+	let open = $state(false);
 	const tokens = $derived(formSizeTokens[size]);
+	const hasErrors = $derived(errors?.length > 0);
+	const hasValue = $derived(!!startDate || !!endDate);
 
-	let isMobile = $state(
-		typeof window !== 'undefined' && window.matchMedia('(max-width: 639.98px)').matches
-	);
-	onMount(() => {
-		const mql = window.matchMedia('(max-width: 639.98px)');
-		const handler = (e: MediaQueryListEvent) => (isMobile = e.matches);
-		mql.addEventListener('change', handler);
-		return () => mql.removeEventListener('change', handler);
-	});
-
-	let isOpen = $state(false);
-	let hoveredDate = $state<Date | null>(null);
-	let datePickerRef = $state<HTMLDivElement | null>(null);
-	let calendarRef = $state<HTMLDivElement | null>(null);
-
-	let viewMode = $state<'days' | 'months' | 'years'>('days');
-	let viewDate = $state(new Date());
-
-	const handleOutsideClick = (event: MouseEvent) => {
-		if (isOpen && datePickerRef && calendarRef) {
-			const target = event.target as Node;
-			if (!datePickerRef.contains(target) && !calendarRef.contains(target)) {
-				isOpen = false;
-			}
-		}
-	};
-
-	function formatDate(date: Date | null): string {
+	function formatDate(date: Date | undefined): string {
 		if (!date) return '';
-		const year = date.getFullYear();
-		const month = String(date.getMonth() + 1).padStart(2, '0');
-		const day = String(date.getDate()).padStart(2, '0');
-		return format.replace('yyyy', String(year)).replace('MM', month).replace('dd', day);
-	}
-
-	function getDaysInMonth(month: Date): {
-		date: Date;
-		isCurrentMonth: boolean;
-		isToday: boolean;
-		isSelected: boolean;
-		isInRange: boolean;
-		isDisabled: boolean;
-	}[] {
-		const year = month.getFullYear();
-		const monthIndex = month.getMonth();
-		const daysInMonth = new Date(year, monthIndex + 1, 0).getDate();
-
-		const firstDay = new Date(year, monthIndex, 1);
-
-		const firstDayOfWeek = firstDay.getDay();
-
-		const daysFromPrevMonth = firstDayOfWeek;
-
-		const prevMonth = new Date(year, monthIndex, 0);
-		const prevMonthDays = prevMonth.getDate();
-
-		const daysInCalendar = 42; // 6 rows of 7 days
-		const daysFromNextMonth = daysInCalendar - daysInMonth - daysFromPrevMonth;
-
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const today = new Date();
-		today.setHours(0, 0, 0, 0);
-
-		const days = [];
-
-		for (let i = daysFromPrevMonth - 1; i >= 0; i--) {
-			const date = new Date(year, monthIndex - 1, prevMonthDays - i);
-			days.push({
-				date,
-				isCurrentMonth: false,
-				isToday: date.getTime() === today.getTime(),
-				isSelected: isDateSelected(date),
-				isInRange: isDateInRange(date),
-				isDisabled: isDateDisabled(date)
-			});
-		}
-
-		for (let i = 1; i <= daysInMonth; i++) {
-			const date = new Date(year, monthIndex, i);
-			days.push({
-				date,
-				isCurrentMonth: true,
-				isToday: date.getTime() === today.getTime(),
-				isSelected: isDateSelected(date),
-				isInRange: isDateInRange(date),
-				isDisabled: isDateDisabled(date)
-			});
-		}
-
-		for (let i = 1; i <= daysFromNextMonth; i++) {
-			const date = new Date(year, monthIndex + 1, i);
-			days.push({
-				date,
-				isCurrentMonth: false,
-				isToday: date.getTime() === today.getTime(),
-				isSelected: isDateSelected(date),
-				isInRange: isDateInRange(date),
-				isDisabled: isDateDisabled(date)
-			});
-		}
-
-		return days;
-	}
-
-	function isDateSelected(date: Date): boolean {
-		return Boolean(
-			(startDate && isSameDate(date, startDate)) || (endDate && isSameDate(date, endDate))
-		);
+		const yyyy = String(date.getFullYear());
+		const MM = String(date.getMonth() + 1).padStart(2, '0');
+		const dd = String(date.getDate()).padStart(2, '0');
+		return format.replace('yyyy', yyyy).replace('MM', MM).replace('dd', dd);
 	}
 
-	function isDateInRange(date: Date): boolean {
-		if (!startDate || !endDate) {
-			if (startDate && hoveredDate) {
-				const hoverStart = startDate < hoveredDate ? startDate : hoveredDate;
-				const hoverEnd = startDate < hoveredDate ? hoveredDate : startDate;
-				return date >= hoverStart && date <= hoverEnd;
-			}
-			return false;
-		}
-
-		return date >= startDate && date <= endDate;
-	}
-
-	function isDateDisabled(date: Date): boolean {
-		return date < minDate || date > maxDate || disabled;
-	}
-
-	function isSameDate(date1: Date, date2: Date): boolean {
-		return (
-			date1.getDate() === date2.getDate() &&
-			date1.getMonth() === date2.getMonth() &&
-			date1.getFullYear() === date2.getFullYear()
-		);
-	}
-
-	function handleDateClick(date: Date): void {
-		if (isDateDisabled(date)) return;
-
-		if (!startDate || (startDate && endDate)) {
-			startDate = date;
-			endDate = undefined;
-		} else if (startDate && !endDate) {
-			if (date < startDate) {
-				endDate = startDate;
-				startDate = date;
-			} else {
-				endDate = date;
-			}
-		}
+	const triggerText = $derived.by(() => {
+		if (startDate && endDate) return `${formatDate(startDate)} - ${formatDate(endDate)}`;
+		if (startDate) return `${formatDate(startDate)} - Select end date`;
+		return placeholder;
+	});
 
+	function handleSelect(sel: Date | { from: Date | null; to: Date | null }): void {
+		// Calendar emits the {from, to} shape in range mode. The Date
+		// branch is unreachable here but narrows the type for the compiler.
+		if (sel instanceof Date) return;
+		startDate = sel.from ?? undefined;
+		endDate = sel.to ?? undefined;
 		onselect?.({ startDate, endDate });
-
-		if (startDate && endDate) {
-			isOpen = false;
-		}
-	}
-
-	function handleDateHover(date: Date): void {
-		hoveredDate = date;
-	}
-
-	function nextMonth(): void {
-		viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
-	}
-
-	function prevMonth(): void {
-		viewDate = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1);
-	}
-
-	function showMonths(): void {
-		viewMode = 'months';
-	}
-
-	function showYears(): void {
-		viewMode = 'years';
-	}
-
-	function selectMonth(month: number): void {
-		viewDate = new Date(viewDate.getFullYear(), month, 1);
-		viewMode = 'days';
-	}
-
-	function selectYear(year: number): void {
-		viewDate = new Date(year, viewDate.getMonth(), 1);
-		viewMode = 'months';
-	}
-
-	function getMonthName(monthIndex: number): string {
-		return new Date(2000, monthIndex, 1).toLocaleString('default', { month: 'long' });
+		if (startDate && endDate) open = false;
 	}
 
-	function toggleDatepicker(): void {
-		if (disabled) return;
-		isOpen = !isOpen;
-	}
-
-	function clearDates(event: Event): void {
+	function clearDates(event: MouseEvent): void {
 		event.stopPropagation();
 		startDate = undefined;
 		endDate = undefined;
 		onselect?.({ startDate, endDate });
 	}
 
-	$effect(() => {
-		if (startDate && endDate) {
-			viewDate = new Date(startDate);
-		}
-	});
-
 	function getValue(): string {
 		return `${startDate ? formatDate(startDate) : ''}:${endDate ? formatDate(endDate) : ''}`;
 	}
 </script>
 
-<svelte:window onmousedown={handleOutsideClick} />
-
 <input type="hidden" name={`${name}[start]`} value={startDate?.toISOString()} />
 <input type="hidden" name={`${name}[end]`} value={endDate?.toISOString()} />
 <input type="hidden" name={`${name}[format]`} value={format} />
@@ -253,10 +74,9 @@
 
 <div
 	class={cn('relative block w-full', className)}
-	bind:this={datePickerRef}
 	data-testid={buildTestId('date-range', undefined, testId)}
 >
-	<div class="relative">
+	<Popover trigger="manual" bind:open placement="bottom" {disabled}>
 		<button
 			{id}
 			type="button"
@@ -269,23 +89,21 @@
 				tokens.shadow,
 				disabled
 					? 'bg-default-100 text-default-400 cursor-not-allowed opacity-50'
-					: errors?.length
-						? 'border-danger-300 focus-within:ring-danger-500 focus-within:border-danger-500 focus-within:ring-2'
+					: hasErrors
+						? 'border-danger-300 focus-within:border-danger-500 focus-within:ring-danger-500 focus-within:ring-2'
 						: 'focus-visible:border-primary-500 focus-visible:ring-primary-500 hover:border-default-400 focus-visible:ring-2'
 			)}
-			onclick={toggleDatepicker}
+			onclick={() => {
+				if (!disabled) open = !open;
+			}}
 			data-testid={buildTestId('date-range', 'trigger', testId)}
 			aria-haspopup="true"
-			aria-expanded={isOpen}
-			aria-describedby={errors?.length ? `${id}-errors` : undefined}
+			aria-expanded={open}
+			aria-describedby={hasErrors ? `${id}-errors` : undefined}
 			{disabled}
 		>
-			<span class={startDate && endDate ? 'text-default-900' : 'text-default-500'}>
-				{startDate && endDate
-					? `${formatDate(startDate)} - ${formatDate(endDate)}`
-					: startDate
-						? `${formatDate(startDate)} - Select end date`
-						: placeholder}
+			<span class={hasValue ? 'text-default-900' : 'text-default-500'}>
+				{triggerText}
 			</span>
 			<svg class={cn('text-default-400', tokens.iconSize)} viewBox="0 0 20 20" fill="currentColor">
 				<path
@@ -296,254 +114,61 @@
 			</svg>
 		</button>
 
-		{#if startDate || endDate}
-			<button
-				type="button"
-				class={cn(
-					'text-default-400 hover:text-default-500 absolute top-1/2 -translate-y-1/2',
-					// Sit just left of the calendar icon; use the token gap
-					// so the clear button stays visually tied to the icon.
-					'right-8'
-				)}
-				onclick={clearDates}
-				data-testid={buildTestId('date-range', 'clear', testId)}
-				aria-label="Clear dates"
-			>
-				<svg class={cn(tokens.iconSize)} viewBox="0 0 20 20" fill="currentColor">
-					<path
-						fill-rule="evenodd"
-						d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-						clip-rule="evenodd"
-					/>
-				</svg>
-			</button>
-		{/if}
-	</div>
+		{#snippet content()}
+			<!-- Wrap Calendar in our own card so the labelled footer
+			     reads as part of the same surface. Calendar's default
+			     border/shadow are neutralized via class so we don't
+			     get a card-in-card. -->
+			<div class="border-default-200 rounded-lg border bg-white shadow-xs">
+				<Calendar
+					mode="range"
+					valueStart={startDate ?? null}
+					valueEnd={endDate ?? null}
+					{minDate}
+					{maxDate}
+					{size}
+					class="rounded-none border-0 shadow-none"
+					onselect={handleSelect}
+				/>
+				{#if hasValue}
+					<div
+						class="border-default-200 text-default-500 flex flex-wrap justify-between gap-x-4 gap-y-1 border-t px-3 py-2 text-xs"
+					>
+						<div>{startDate ? `${startLabel}: ${formatDate(startDate)}` : ''}</div>
+						<div>{endDate ? `${endLabel}: ${formatDate(endDate)}` : ''}</div>
+					</div>
+				{/if}
+			</div>
+		{/snippet}
+	</Popover>
 
-	{#if errors?.length}
+	{#if hasValue && !disabled}
+		<button
+			type="button"
+			class={cn(
+				'text-default-400 hover:text-default-500 absolute top-1/2 -translate-y-1/2',
+				// Sit just left of the calendar icon; the trigger has the icon at far right.
+				'right-8'
+			)}
+			onclick={clearDates}
+			data-testid={buildTestId('date-range', 'clear', testId)}
+			aria-label="Clear dates"
+		>
+			<svg class={cn(tokens.iconSize)} viewBox="0 0 20 20" fill="currentColor">
+				<path
+					fill-rule="evenodd"
+					d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		</button>
+	{/if}
+
+	{#if hasErrors}
 		<div id="{id}-errors" data-testid={buildTestId('date-range', 'errors', testId)}>
 			{#each errors as error, i (i)}
 				<p class="text-danger-600 mt-1 text-sm">{error}</p>
 			{/each}
 		</div>
 	{/if}
-
-	{#if isOpen && !isMobile}
-		<Portal target={datePickerRef}>
-			<div
-				bind:this={calendarRef}
-				class="ring-opacity-5 ring-default-300 absolute z-10 mt-1 w-full origin-top-left rounded-md bg-white p-4 shadow-lg ring-1 focus:outline-none"
-				data-testid={buildTestId('date-range', 'panel', testId)}
-				transition:fly={{ y: -8, duration: 300, easing: quintOut }}
-			>
-				{@render calendarContent()}
-			</div>
-		</Portal>
-	{/if}
-
-	{#if isOpen && isMobile}
-		<Portal target={datePickerRef}>
-			<button
-				type="button"
-				class="fixed inset-0 z-[9998] cursor-pointer bg-black/40 backdrop-blur-sm"
-				aria-label="Close"
-				onclick={() => (isOpen = false)}
-			></button>
-			<div
-				class="fixed inset-x-0 bottom-0 z-[9999] flex max-h-[85vh] min-h-48 flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl"
-				transition:fly={{ y: 300, duration: 200, easing: quintOut }}
-				bind:this={calendarRef}
-			>
-				<div class="flex justify-center py-2">
-					<div class="bg-default-300 h-1 w-8 rounded-full"></div>
-				</div>
-				<div class="flex-1 cursor-pointer overflow-y-auto p-4">
-					{@render calendarContent()}
-				</div>
-			</div>
-		</Portal>
-	{/if}
 </div>
-
-{#snippet calendarContent()}
-	<div class="mb-2 flex items-center justify-between">
-		{#if viewMode === 'days'}
-			<button
-				type="button"
-				aria-label="Previous month"
-				class="text-default-500 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md p-1 text-sm"
-				onclick={prevMonth}
-			>
-				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
-					><path
-						fill-rule="evenodd"
-						d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-						clip-rule="evenodd"
-					/></svg
-				>
-			</button>
-			<button
-				type="button"
-				class="text-default-700 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md px-2 py-1 text-sm font-medium"
-				onclick={showMonths}
-			>
-				{getMonthName(viewDate.getMonth())}
-				{viewDate.getFullYear()}
-			</button>
-			<button
-				type="button"
-				aria-label="Next month"
-				class="text-default-500 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md p-1 text-sm"
-				onclick={nextMonth}
-			>
-				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
-					><path
-						fill-rule="evenodd"
-						d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-						clip-rule="evenodd"
-					/></svg
-				>
-			</button>
-		{:else if viewMode === 'months'}
-			<button
-				type="button"
-				aria-label="Previous year"
-				class="text-default-500 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md p-1 text-sm"
-				onclick={() => (viewDate = new Date(viewDate.getFullYear() - 1, viewDate.getMonth(), 1))}
-			>
-				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
-					><path
-						fill-rule="evenodd"
-						d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-						clip-rule="evenodd"
-					/></svg
-				>
-			</button>
-			<button
-				type="button"
-				class="text-default-700 inline-flex cursor-pointer items-center rounded-md px-2 py-1 text-sm font-medium"
-				onclick={showYears}>{viewDate.getFullYear()}</button
-			>
-			<button
-				type="button"
-				aria-label="Next year"
-				class="text-default-500 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md p-1 text-sm"
-				onclick={() => (viewDate = new Date(viewDate.getFullYear() + 1, viewDate.getMonth(), 1))}
-			>
-				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
-					><path
-						fill-rule="evenodd"
-						d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-						clip-rule="evenodd"
-					/></svg
-				>
-			</button>
-		{:else if viewMode === 'years'}
-			<button
-				type="button"
-				aria-label="Previous years"
-				class="text-default-500 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md p-1 text-sm"
-				onclick={() => (viewDate = new Date(viewDate.getFullYear() - 12, viewDate.getMonth(), 1))}
-			>
-				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
-					><path
-						fill-rule="evenodd"
-						d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-						clip-rule="evenodd"
-					/></svg
-				>
-			</button>
-			<button
-				type="button"
-				class="text-default-700 inline-flex cursor-pointer items-center rounded-md px-2 py-1 text-sm font-medium"
-				>{viewDate.getFullYear() - 6} - {viewDate.getFullYear() + 5}</button
-			>
-			<button
-				type="button"
-				aria-label="Next years"
-				class="text-default-500 hover:bg-default-100 inline-flex cursor-pointer items-center rounded-md p-1 text-sm"
-				onclick={() => (viewDate = new Date(viewDate.getFullYear() + 12, viewDate.getMonth(), 1))}
-			>
-				<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
-					><path
-						fill-rule="evenodd"
-						d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-						clip-rule="evenodd"
-					/></svg
-				>
-			</button>
-		{/if}
-	</div>
-
-	{#if viewMode === 'days'}
-		<div class="text-default-500 mb-1 grid grid-cols-7 gap-1 text-center text-xs font-medium">
-			<div>Su</div>
-			<div>Mo</div>
-			<div>Tu</div>
-			<div>We</div>
-			<div>Th</div>
-			<div>Fr</div>
-			<div>Sa</div>
-		</div>
-		<div class="grid grid-cols-7 gap-1">
-			{#each getDaysInMonth(viewDate) as { date, isCurrentMonth, isToday, isSelected, isInRange, isDisabled } (date.getTime())}
-				<button
-					type="button"
-					class={cn(
-						'flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-sm font-medium',
-						isDisabled ? 'text-default-300 cursor-not-allowed' : 'hover:bg-default-100',
-						isSelected ? 'bg-primary-500 hover:bg-primary-600 text-white' : '',
-						isInRange && !isSelected ? 'bg-primary-100 text-primary-800' : '',
-						!isCurrentMonth && !isSelected && !isInRange ? 'text-default-400' : '',
-						isToday && !isSelected ? 'border-primary-500 border' : ''
-					)}
-					onclick={() => handleDateClick(date)}
-					onmouseenter={() => handleDateHover(date)}
-					disabled={isDisabled}>{date.getDate()}</button
-				>
-			{/each}
-		</div>
-	{:else if viewMode === 'months'}
-		<div class="grid grid-cols-3 gap-2">
-			<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-			{#each Array(12).fill(0) as _, month (month)}
-				<button
-					type="button"
-					class={cn(
-						'flex cursor-pointer items-center justify-center rounded-md px-2 py-1 text-sm font-medium',
-						viewDate.getMonth() === month
-							? 'bg-primary-500 text-white'
-							: 'text-default-700 hover:bg-default-100'
-					)}
-					onclick={() => selectMonth(month)}>{getMonthName(month).substring(0, 3)}</button
-				>
-			{/each}
-		</div>
-	{:else if viewMode === 'years'}
-		<div class="grid grid-cols-3 gap-2">
-			<!-- eslint-disable-next-line @typescript-eslint/no-unused-vars -->
-			{#each Array(12).fill(0) as _, i (i)}
-				{@const year = viewDate.getFullYear() - 6 + i}
-				<button
-					type="button"
-					class={cn(
-						'flex cursor-pointer items-center justify-center rounded-md px-2 py-1 text-sm font-medium',
-						viewDate.getFullYear() === year
-							? 'bg-primary-500 text-white'
-							: 'text-default-700 hover:bg-default-100'
-					)}
-					onclick={() => selectYear(year)}>{year}</button
-				>
-			{/each}
-		</div>
-	{/if}
-
-	{#if startDate || endDate}
-		<div
-			class="border-default-200 text-default-500 mt-4 flex flex-wrap justify-between gap-x-4 gap-y-1 border-t pt-3 text-xs"
-		>
-			<div>{startDate ? `${startLabel}: ${formatDate(startDate)}` : ''}</div>
-			<div>{endDate ? `${endLabel}: ${formatDate(endDate)}` : ''}</div>
-		</div>
-	{/if}
-{/snippet}

package/dist/forms/Textarea.svelte

@@ -23,6 +23,7 @@
 		class: className = '',
 		oninput,
 		onblur,
+		onkeydown,
 		testId
 	}: TextareaProps = $props();
 
@@ -103,6 +104,7 @@
 		{value}
 		oninput={handleInput}
 		onblur={handleBlur}
+		{onkeydown}
 	></textarea>
 
 	{#if showCount && maxLength !== undefined}