fluentui-svelte 0.1.0

package/dist/components/calendar-view/calendar-view.svelte

@@ -0,0 +1,451 @@
+<script lang="ts">
+	import { SvelteDate } from 'svelte/reactivity';
+	import { setTabspotAttributes } from 'tabspot';
+	import { onMount } from 'svelte';
+	import { circOut } from 'svelte/easing';
+	import { Flyout } from '../../index.js';
+	import CalendarViewDays from './calendar-view-days.svelte';
+	import CalendarViewYears from './calendar-view-years.svelte';
+	import CalendarViewMonths from './calendar-view-months.svelte';
+	import CalendarViewHeader from './calendar-view-header.svelte';
+	import CalendarViewControls from './calendar-view-controls.svelte';
+	import {
+		floating as _floating,
+		getCSSDuration,
+		flyToOffset,
+		getOffset,
+		fadeScale,
+		reactiveBoundingRect
+	} from '../../internal/index.js';
+	import {
+		compareDates,
+		getPageByOffset,
+		hasBlackoutBetween,
+		indexOfDate,
+		rangeLength,
+		setCalendarViewContext,
+		startOfDay
+	} from './calendar-view.svelte.js';
+	import { CALENDAR_GRID_CONFIG, VIEW_PRECISION, cellDate, focusCalendarView } from './calendar-view-grid.js';
+	import { on } from 'svelte/events';
+	import { getReducedMotion } from '../../providers/fluentui-svelte/fluentui-svelte.js';
+	import type {
+		AnimationDirection,
+		CalendarViewProps,
+		CalendarViewState,
+		DateComparisonPrecision,
+		View
+	} from './types.js';
+
+	let {
+		ref = $bindable(),
+		value = $bindable(null),
+		range = $bindable({ start: null, end: null }),
+		view = 'days',
+		selectionMode = 'single',
+		blackoutBreaksRange,
+		minDate,
+		maxDate,
+		locale = 'en-US',
+		weekStart = 1,
+		blackoutDates,
+		headers,
+		floating,
+		onChange,
+		onRangeChange,
+		onViewChange,
+		...attributes
+	}: CalendarViewProps = $props();
+
+	const reducedMotion = getReducedMotion();
+
+	let viewAnimationDirection: AnimationDirection = $state('neutral');
+
+	let pageAnimationDirection: AnimationDirection = $state('neutral');
+
+	let pageAnimationDuration = $state(333);
+
+	let firstValue = $derived(Array.isArray(value) ? value[0] : (value ?? new Date()));
+
+	// svelte-ignore state_referenced_locally
+	let page = $state(
+		(!minDate || firstValue >= minDate) && (!maxDate || firstValue < maxDate)
+			? new Date(firstValue.getFullYear(), firstValue.getMonth(), 1)
+			: firstValue < minDate!
+				? new Date(minDate!.getFullYear(), minDate!.getMonth(), 1)
+				: new Date(maxDate!.getFullYear(), maxDate!.getMonth(), 1)
+	);
+
+	let boundingElement = reactiveBoundingRect();
+
+	let gridElement: HTMLElement | undefined = $state();
+
+	// Set when a view change starts from a grid cell, so the new grid can pick focus
+	// up where the old one left it. A change started from the header leaves it null:
+	// focus belongs to the button that is still there.
+	let pendingFocus: { date: Date; precision: DateComparisonPrecision } | null = null;
+
+	// live region is only announced when its text changes.
+	let liveMessage = $state('');
+
+	let dayFormat = $derived(new Intl.DateTimeFormat(locale, { dateStyle: 'long' }));
+
+	let dayRangeFormat = $derived(new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }));
+
+	function updatePage(amount: number = 0, directionOverride: AnimationDirection | undefined = undefined) {
+		page = getPageByOffset(amount, page, view);
+		if (directionOverride) {
+			pageAnimationDirection = directionOverride;
+			return;
+		}
+		if (amount <= -1) {
+			pageAnimationDirection = 'up';
+		} else if (amount >= 1) {
+			pageAnimationDirection = 'down';
+		} else {
+			pageAnimationDirection = 'neutral';
+		}
+	}
+
+	function updateView(e: Event, newView: View, focusDate?: Date) {
+		if ((view === 'days' && newView === 'months') || (view === 'months' && newView === 'years')) {
+			viewAnimationDirection = 'up';
+		} else if ((view === 'years' && newView === 'months') || (view === 'months' && newView === 'days')) {
+			viewAnimationDirection = 'down';
+		} else {
+			viewAnimationDirection = 'neutral';
+		}
+
+		pendingFocus = focusDate ? { date: focusDate, precision: VIEW_PRECISION[newView] } : null;
+		pageAnimationDirection = 'neutral';
+		view = newView;
+		updatePage();
+		onViewChange?.(e, newView);
+	}
+
+	function selectDay(e: Event, day: Date) {
+		if (selectionMode === 'range') {
+			selectRangeDay(e, day);
+			return;
+		}
+
+		if (selectionMode === 'multiple') {
+			const days = Array.isArray(value) ? value : value ? [value] : [];
+			const index = indexOfDate(days, day);
+
+			value = index === -1 ? [...days, day] : days.filter((_, i) => i !== index);
+		} else {
+			const single = Array.isArray(value) ? null : value;
+
+			value = single && compareDates(single, day) ? null : day;
+		}
+
+		onChange?.(e, value);
+	}
+
+	/**
+	 * One click of a range.
+	 *
+	 * The range is only ever built forwards: a click before the start, or one that
+	 * lands on a finished range, opens a new range on that day rather than stretching
+	 * or inverting the current one. Clicking the start again closes a range of a
+	 * single day
+	 */
+	function selectRangeDay(e: Event, day: Date) {
+		const start = range.start;
+		const restart =
+			!start ||
+			range.end !== null ||
+			startOfDay(day) < startOfDay(start) ||
+			// The consumer asked for ranges that claim every day they span, so a
+			// blocked day in the way makes this click a new start instead of an end.
+			(!!blackoutBreaksRange && hasBlackoutBetween(start, day, blackoutDates));
+
+		range = restart ? { start: day, end: null } : { start, end: day };
+
+		if (range.end) {
+			const days = rangeLength(range);
+			liveMessage = `${dayRangeFormat.formatRange(range.start!, range.end)} selected, ${days} ${days === 1 ? 'day' : 'days'}.`;
+		} else {
+			liveMessage = `${dayFormat.format(day)} selected as the start date. Choose the end date.`;
+		}
+
+		onRangeChange?.(e, range);
+	}
+
+	function clearSelection(e: Event) {
+		if (selectionMode === 'range') {
+			if (!range.start && !range.end) return;
+
+			range = { start: null, end: null };
+			liveMessage = 'Date range cleared.';
+			onRangeChange?.(e, range);
+			return;
+		}
+
+		value = selectionMode === 'multiple' ? [] : null;
+		onChange?.(e, value);
+	}
+
+	function selectMonth(e: Event, month: Date) {
+		page = new SvelteDate(month.setDate(1));
+		updateView(e, 'days', page);
+	}
+
+	function selectYear(e: Event, year: Date) {
+		page.setFullYear(year.getFullYear());
+		updateView(e, 'months', year);
+	}
+
+	const CALENDAR_STATE: CalendarViewState = {
+		get value() {
+			return value;
+		},
+		set value(v) {
+			value = v;
+		},
+		get range() {
+			return range;
+		},
+		set range(v) {
+			range = v;
+		},
+		get view() {
+			return view;
+		},
+		set view(v) {
+			view = v;
+		},
+		get page() {
+			return page;
+		},
+		set page(v) {
+			page = v;
+		},
+		get viewAnimationDirection() {
+			return viewAnimationDirection;
+		},
+		set viewAnimationDirection(v) {
+			viewAnimationDirection = v;
+		},
+		get pageAnimationDirection() {
+			return pageAnimationDirection;
+		},
+		set pageAnimationDirection(v) {
+			pageAnimationDirection = v;
+		}
+	};
+
+	// svelte-ignore state_referenced_locally
+	setCalendarViewContext({
+		config: {
+			minDate,
+			maxDate,
+			locale,
+			weekStart,
+			blackoutDates,
+			selectionMode,
+			blackoutBreaksRange,
+			headers
+		},
+		get state() {
+			return CALENDAR_STATE;
+		},
+		events: {
+			onChange: (e, value) => onChange?.(e, value),
+			onViewChange: (e, newView) => onViewChange?.(e, newView)
+		},
+		methods: {
+			updateView,
+			updatePage,
+			selectDay,
+			selectMonth,
+			selectYear,
+			clearSelection
+		}
+	});
+	$effect.pre(() => {
+		pageAnimationDuration = getCSSDuration('--fs-normal-duration') || 333;
+
+		if (floating?.ref && floating.ref instanceof HTMLElement) boundingElement.ref = floating.ref;
+	});
+
+	/** Which key zooms out of each view, and where it lands. */
+	const ZOOM: Record<View, { key: string; to: View }> = {
+		days: { key: 'ArrowUp', to: 'months' },
+		months: { key: 'ArrowUp', to: 'years' },
+		years: { key: 'ArrowDown', to: 'months' }
+	};
+
+	/**
+	 * Keys the calendar owns rather than the grid: `Ctrl` + arrow moves between views,
+	 * and `Delete` drops a range that can no longer be undone by clicking. Tabspot
+	 * never reports either, so one delegated listener on the grid covers all three
+	 * views and every cell.
+	 */
+	function calendarShortcuts(node: HTMLElement) {
+		return on(node, 'keydown', (event) => {
+			if (selectionMode === 'range' && (event.key === 'Delete' || event.key === 'Backspace')) {
+				event.preventDefault();
+				clearSelection(event);
+				return;
+			}
+
+			const zoom = ZOOM[view];
+
+			if (!event.ctrlKey || event.key !== zoom.key) return;
+
+			updateView(event, zoom.to, cellDate(event.target as Element) ?? undefined);
+		});
+	}
+
+	// Opening as a popup: hand focus to the grid so the arrows work straight away.
+	// An inline calendar is just part of the page and must not steal focus.
+	onMount(() => {
+		if (floating && gridElement) focusCalendarView(gridElement, null, VIEW_PRECISION[view]);
+	});
+
+	// The grid is rebuilt on every view change, so the root is registered again
+	// each time. This is necessary for tabspot to work correctly.
+	$effect(() => {
+		if (!gridElement) return;
+
+		setTabspotAttributes({ element: gridElement, config: CALENDAR_GRID_CONFIG });
+
+		if (!pendingFocus) return;
+
+		focusCalendarView(gridElement, pendingFocus.date, pendingFocus.precision);
+		pendingFocus = null;
+	});
+</script>
+
+<!--
+@component
+A calendar view lets a user view and interact with a calendar that they can navigate by month, year, or decade. A user can select a single date or multiple dates.
+
+This implementation is originally made by Tropix126 in his FluentSvelte library, I have changed several things but thanks to him for the original work.
+-->
+<div
+	class={['fs-calendar-view', { floating }]}
+	bind:this={ref}
+	in:flyToOffset={floating && floating.ref
+		? {
+				y: -floating.ref.getBoundingClientRect().height / 2,
+				offset:
+					floating.ref instanceof HTMLElement
+						? getOffset(floating.positionConfig) + floating.ref.getBoundingClientRect().height
+						: 0,
+				duration: pageAnimationDuration,
+				easing: circOut,
+				css: 'pointer-events: none;',
+				reducedMotion: reducedMotion()
+			}
+		: undefined}
+	{@attach floating?.ref ? _floating(floating.ref, floating.positionConfig) : undefined}
+	{...attributes}
+>
+	<Flyout>
+		<CalendarViewControls />
+		<div class="calendar-wrapper">
+			{#key view}
+				<div
+					bind:this={gridElement}
+					class="calendar-view-stack"
+					data-calendar-grid
+					{@attach calendarShortcuts}
+					in:fadeScale={{
+						duration: viewAnimationDirection !== 'neutral' ? 500 : 0,
+						easing: circOut,
+						baseScale: viewAnimationDirection === 'up' ? 1.29 : 0.84,
+						delay: viewAnimationDirection !== 'neutral' ? 150 : 0,
+						reducedMotion: reducedMotion()
+					}}
+					out:fadeScale={{
+						duration: viewAnimationDirection !== 'neutral' ? 150 : 0,
+						easing: circOut,
+						baseScale: viewAnimationDirection === 'up' ? 0.84 : 1.29,
+						delay: 0,
+						reducedMotion: reducedMotion()
+					}}
+				>
+					{#if view === 'days'}
+						<CalendarViewHeader />
+					{/if}
+
+					<!--
+						The page slides in and out of here. Clipping it at the viewport is what
+						keeps a flying month from crossing the weekday names: on a translucent
+						surface you cannot mask, only clip.
+					-->
+					<div class="page-viewport">
+						{#if view === 'days'}
+							<CalendarViewDays />
+						{:else if view === 'months'}
+							<CalendarViewMonths />
+						{:else if view === 'years'}
+							<CalendarViewYears />
+						{/if}
+					</div>
+				</div>
+			{/key}
+		</div>
+		{#if selectionMode === 'range'}
+			<!-- Building a range moves no focus and changes no label: this is the only thing that reports it. -->
+			<div class="fs-calendar-live-region" role="status" aria-live="polite">{liveMessage}</div>
+		{/if}
+	</Flyout>
+</div>
+
+<style>
+	.fs-calendar-view {
+		width: 320px;
+		min-width: 280px;
+		&.floating {
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+		& .calendar-wrapper {
+			overflow: hidden;
+			position: relative;
+			width: 100%;
+			aspect-ratio: 1;
+			& .calendar-view-stack {
+				padding: 0 0.5rem;
+				position: absolute;
+				inset: 0;
+				display: flex;
+				flex-direction: column;
+				background: var(--fs-layer-on-acrylic-default);
+				& .page-viewport {
+					position: relative;
+					overflow: hidden;
+					flex: 1;
+				}
+				& :global([data-calendar-page][inert]) {
+					z-index: -1;
+				}
+			}
+		}
+		& .fs-calendar-live-region {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			margin: -1px;
+			padding: 0;
+			overflow: hidden;
+			clip-path: inset(50%);
+			white-space: nowrap;
+			border: 0;
+		}
+		& :global(.fs-flyout) {
+			padding: 0;
+			overflow: hidden;
+			height: 100%;
+			flex-direction: column;
+			& :global(.wrapper) {
+				gap: 0;
+			}
+		}
+	}
+</style>

package/dist/components/calendar-view/calendar-view.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { CalendarViewProps } from './types.js';
+/**
+ * A calendar view lets a user view and interact with a calendar that they can navigate by month, year, or decade. A user can select a single date or multiple dates.
+ *
+ * This implementation is originally made by Tropix126 in his FluentSvelte library, I have changed several things but thanks to him for the original work.
+ */
+declare const CalendarView: import("svelte").Component<CalendarViewProps, {}, "ref" | "value" | "range">;
+type CalendarView = ReturnType<typeof CalendarView>;
+export default CalendarView;

package/dist/components/calendar-view/calendar-view.svelte.js

@@ -0,0 +1,196 @@
+import { createFSContext } from '../../internal/index.js';
+import { SvelteDate } from 'svelte/reactivity';
+export const [getCalendarViewContext, setCalendarViewContext] = createFSContext();
+/** Milliseconds in a day. Only ever used with `Math.round`, so DST cannot skew it. */
+const DAY_MS = 86_400_000;
+/**
+ * Midnight of `date`.
+ *
+ * Every date the grid renders is already at midnight, but a consumer can hand us a
+ * `range` or a `value` carrying a time, and a range must not change meaning because
+ * one of its ends happens to be half past two.
+ */
+export function startOfDay(date) {
+    return new SvelteDate(date.getFullYear(), date.getMonth(), date.getDate());
+}
+/** Whether a blacked-out date sits strictly inside the interval. Its ends do not count. */
+export function hasBlackoutBetween(from, to, blackoutDates) {
+    if (!blackoutDates?.length)
+        return false;
+    const min = startOfDay(from).getTime();
+    const max = startOfDay(to).getTime();
+    return blackoutDates.some((date) => {
+        const time = startOfDay(date).getTime();
+        return time > min && time < max;
+    });
+}
+/**
+ * Where `day` sits in a finished range, or `undefined` when it sits outside one.
+ *
+ * A range of a single day returns `undefined` too: there is no band to paint
+ * across one cell, and the day already reads as selected.
+ */
+export function rangePositionOf(day, range) {
+    if (!range.start || !range.end)
+        return undefined;
+    const time = startOfDay(day).getTime();
+    const start = startOfDay(range.start).getTime();
+    const end = startOfDay(range.end).getTime();
+    if (start === end)
+        return undefined;
+    if (time === start)
+        return 'start';
+    if (time === end)
+        return 'end';
+    return time > start && time < end ? 'between' : undefined;
+}
+/** The first and last day of the cell `date` stands for. */
+function cellSpan(date, precision) {
+    switch (precision) {
+        case 'month':
+            return [
+                new SvelteDate(date.getFullYear(), date.getMonth(), 1),
+                new SvelteDate(date.getFullYear(), date.getMonth() + 1, 0)
+            ];
+        case 'year':
+            return [new SvelteDate(date.getFullYear(), 0, 1), new SvelteDate(date.getFullYear(), 11, 31)];
+        default:
+            return [startOfDay(date), startOfDay(date)];
+    }
+}
+/**
+ * Whether the range touches the cell `date` stands for.
+ *
+ * A month or a year is one cell standing for many days, so it counts as covered the
+ * moment the range overlaps it at all — not only when an end of the range lands on it.
+ */
+export function rangeCovers(date, range, precision) {
+    if (!range.start)
+        return false;
+    const [from, to] = cellSpan(date, precision);
+    const start = startOfDay(range.start).getTime();
+    // Half-built, the range is just its start.
+    const end = startOfDay(range.end ?? range.start).getTime();
+    return start <= to.getTime() && end >= from.getTime();
+}
+/** How many days a finished range spans, both ends included. */
+export function rangeLength(range) {
+    if (!range.start || !range.end)
+        return 0;
+    return Math.round((startOfDay(range.end).getTime() - startOfDay(range.start).getTime()) / DAY_MS) + 1;
+}
+export function indexOfDate(array, date, precision = 'time') {
+    return array.findIndex((d) => compareDates(d, date, precision));
+}
+export function getWeekdayLocale(day, { locale = undefined, format = 'long', offset = 0 } = {}) {
+    const formatter = new Intl.DateTimeFormat(locale, {
+        weekday: format,
+        timeZone: 'UTC'
+    }).format(new SvelteDate(Date.UTC(2000, 1, day + offset - 1)));
+    // In some locales, the first letter may not be capitalized
+    return formatter.charAt(0).toUpperCase() + formatter.slice(1);
+}
+export function getPageByOffset(offset, page, view) {
+    if (view === 'days') {
+        return new SvelteDate(page.getFullYear(), page.getMonth() + offset, 1);
+    }
+    else if (view === 'months') {
+        return new SvelteDate(page.getFullYear() + offset, 0, 1);
+    }
+    else if (view === 'years') {
+        return new SvelteDate(Math.floor(page.getFullYear() / 10) * 10 + offset * 10, 0, 1);
+    }
+    // Fallback to current page if view is not recognized
+    return page;
+}
+export function getMonthLength(year, month) {
+    return new SvelteDate(year, month + 1, 0).getDate() - 1;
+}
+export function getMonthDays(year, month) {
+    const days = [];
+    for (let i = 0; i < getMonthLength(year, month) + 1; i++) {
+        days.push(new SvelteDate(year, month, i + 1));
+    }
+    return days;
+}
+export function compareDates(a, b, precision = 'time') {
+    switch (precision) {
+        case 'time':
+            return a.getTime() === b.getTime();
+        case 'day':
+            return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+        case 'month':
+            return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+        case 'year':
+            return a.getFullYear() === b.getFullYear();
+        case 'decade':
+            return Math.floor(a.getFullYear() / 10) * 10 === Math.floor(b.getFullYear() / 10) * 10;
+    }
+}
+export function getMonthLocale(month, { locale = undefined, format = 'long' } = {}) {
+    const formatter = new Intl.DateTimeFormat(locale, {
+        month: format
+    }).format(new SvelteDate(2000, month));
+    // In some locales, the first letter may not be capitalized
+    return formatter.charAt(0).toUpperCase() + formatter.slice(1);
+}
+export function getCalendarDays(date, weekStart = 0) {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const firstWeekday = new SvelteDate(year, month, 1).getDay();
+    const calendarRows = 6;
+    let days = [];
+    let nextMonth = month + 1;
+    let lastMonth = month - 1;
+    let nextMonthYear = year;
+    let lastMonthYear = year;
+    const daysBefore = (firstWeekday - weekStart + 7) % 7;
+    if (daysBefore > 0) {
+        if (lastMonth === -1) {
+            lastMonth = 11;
+            lastMonthYear = year - 1;
+        }
+        days = getMonthDays(lastMonthYear, lastMonth).slice(-daysBefore);
+    }
+    days = days.concat(getMonthDays(year, month));
+    if (nextMonth === 12) {
+        nextMonth = 0;
+        nextMonthYear = year + 1;
+    }
+    const daysAfter = 7 * calendarRows - days.length;
+    days = days.concat(getMonthDays(nextMonthYear, nextMonth).slice(0, daysAfter));
+    return days;
+}
+export function getYearMonths(year) {
+    const months = [];
+    for (let i = 0; i < 12; i++) {
+        months.push(new SvelteDate(year, i, 1));
+    }
+    return months;
+}
+export function getCalendarMonths(date) {
+    const year = date.getFullYear();
+    const months = [];
+    return months.concat(getYearMonths(year), getYearMonths(year + 1).slice(0, 4));
+}
+export function getCalendarYears(date) {
+    const decadeStart = Math.floor(date.getFullYear() / 10) * 10;
+    const years = [];
+    for (let i = 0; i < 12; i++) {
+        years.push(new SvelteDate(decadeStart + i, 0, 1));
+    }
+    if (decadeStart % 20 === 0) {
+        for (let i = 0; i < 2; i++) {
+            years.unshift(new SvelteDate(decadeStart - (i + 1), 0, 1));
+        }
+        for (let i = 0; i < 4; i++) {
+            years.push(new SvelteDate(decadeStart + i + 12, 0, 1));
+        }
+    }
+    else {
+        for (let i = 0; i < 6; i++) {
+            years.push(new SvelteDate(decadeStart + i + 12, 0, 1));
+        }
+    }
+    return years;
+}