@r2digisolutions/components 0.8.5 → 0.8.6

package/dist/components/molecules/Calendar/Calendar.svelte

@@ -62,7 +62,22 @@
 	const today = new Date();
 	const todayIso = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
 
-	let view = $state(new Date(today.getFullYear(), today.getMonth(), 1));
+	function monthFromIso(iso: string | undefined) {
+		if (!iso) return null;
+		const [y, m] = iso.split('-').map(Number);
+		if (!Number.isFinite(y) || !Number.isFinite(m)) return null;
+		return new Date(y, m - 1, 1);
+	}
+
+	function selectionIso() {
+		if (mode === 'range') return start;
+		if (mode === 'multiple') return values[0];
+		return value;
+	}
+
+	let view = $state(
+		monthFromIso(selectionIso()) ?? new Date(today.getFullYear(), today.getMonth(), 1)
+	);
 	let panel = $state<Panel>('days');
 	/** Which month column owns the month/year picker when months=2. */
 	let pickerOffset = $state(0);

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

@@ -433,50 +433,52 @@
 			months === 2 ? 'max-w-[min(42rem,calc(100vw-1rem))]' : 'max-w-[20rem]'
 		]}
 	>
-		{#if mode === 'single'}
-			<Calendar
-				mode="single"
-				{months}
-				bind:value
-				{min}
-				{max}
-				{disabledDates}
-				{enabledDates}
-				{dots}
-				framed={false}
-				locale={dateLocale}
-				onchange={handleChange}
-			/>
-		{:else if mode === 'multiple'}
-			<Calendar
-				mode="multiple"
-				{months}
-				bind:values
-				{min}
-				{max}
-				{disabledDates}
-				{enabledDates}
-				{dots}
-				framed={false}
-				locale={dateLocale}
-				onchange={handleChange}
-			/>
-		{:else}
-			<Calendar
-				mode="range"
-				{months}
-				bind:start
-				bind:end
-				{min}
-				{max}
-				{disabledDates}
-				{enabledDates}
-				{dots}
-				framed={false}
-				locale={dateLocale}
-				onchange={handleChange}
-			/>
-		{/if}
+		{#key `${open}:${start}:${value}`}
+			{#if mode === 'single'}
+				<Calendar
+					mode="single"
+					{months}
+					bind:value
+					{min}
+					{max}
+					{disabledDates}
+					{enabledDates}
+					{dots}
+					framed={false}
+					locale={dateLocale}
+					onchange={handleChange}
+				/>
+			{:else if mode === 'multiple'}
+				<Calendar
+					mode="multiple"
+					{months}
+					bind:values
+					{min}
+					{max}
+					{disabledDates}
+					{enabledDates}
+					{dots}
+					framed={false}
+					locale={dateLocale}
+					onchange={handleChange}
+				/>
+			{:else}
+				<Calendar
+					mode="range"
+					{months}
+					bind:start
+					bind:end
+					{min}
+					{max}
+					{disabledDates}
+					{enabledDates}
+					{dots}
+					framed={false}
+					locale={dateLocale}
+					onchange={handleChange}
+				/>
+			{/if}
+		{/key}
 	</div>
 </div>
 

package/package.json

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