noph-ui 0.35.0 → 0.37.0

package/dist/date-picker/DockedDatePicker.svelte

@@ -1,11 +1,524 @@
 <script lang="ts">
+	import Button from '../button/Button.svelte'
 	import IconButton from '../button/IconButton.svelte'
+	import Divider from '../divider/Divider.svelte'
 	import CalendarToday from '../icons/CalendarToday.svelte'
+	import Menu from '../menu/Menu.svelte'
 	import TextField from '../text-field/TextField.svelte'
+	import { onMount, tick } from 'svelte'
+	import Calendar from './Calendar.svelte'
+	import CalendarHeader from './CalendarHeader.svelte'
+	import SelectionList from './SelectionList.svelte'
+	import {
+		addMonths,
+		clampMonthInYear,
+		compareDays,
+		DEFAULT_YEAR_RANGE,
+		formatDate,
+		getDatePattern,
+		getFirstDayOfWeek,
+		getMonthNames,
+		getWeekRowCount,
+		isMonthWithin,
+		isWithin,
+		isYearWithin,
+		parseDateInput,
+		parseISODate,
+		startOfMonth,
+		toISODate,
+		today as getToday,
+	} from './dateUtils.js'
+	import { afterTwoFrames } from './enterAnimation.js'
+	import type { DockedDatePickerProps, ISODate } from './types.js'
+
+	let {
+		value = $bindable(),
+		displayMonth = $bindable(),
+		open = $bindable(false),
+		element = $bindable(),
+		locale,
+		firstDayOfWeek,
+		min,
+		max,
+		yearRange = DEFAULT_YEAR_RANGE,
+		isDateEnabled,
+		adjacentMonthDays = false,
+		label = 'Date',
+		supportingText,
+		issues,
+		variant = 'outlined',
+		name,
+		form,
+		required,
+		disabled,
+		readonly,
+		noAsterisk,
+		autocomplete = 'off',
+		cancelLabel = 'Cancel',
+		confirmLabel = 'OK',
+		nextMonthLabel = 'Next month',
+		previousMonthLabel = 'Previous month',
+		nextYearLabel = 'Next year',
+		previousYearLabel = 'Previous year',
+		selectMonthLabel = 'Select month',
+		selectYearLabel = 'Select year',
+		openCalendarLabel = 'Show date picker',
+		invalidDateMessage = 'Enter a valid date.',
+		selectedDateLabel = 'selected',
+		onchange,
+		...attributes
+	}: DockedDatePickerProps = $props()
+
+	const ISO_PATTERN = 'YYYY-MM-DD'
+
+	const uid = $props.id()
+
+	let anchorElement = $state<HTMLDivElement>()
+	let menuElement = $state<HTMLDivElement>()
+	let mode = $state<'days' | 'months' | 'years'>('days')
+	let pending = $state<ISODate | undefined>(undefined)
+	let focusedDay = $state<Date | undefined>(undefined)
+	let inputElement = $state<HTMLInputElement | HTMLTextAreaElement>()
+
+	let typed = $state.raw<{ source: ISODate | null | undefined; text: string } | undefined>()
+	let invalidText = $state<string | undefined>()
+	let monthBeforeOpen: ISODate | undefined
+
+	let todayValue = $derived(getToday())
+	let week = $derived(firstDayOfWeek ?? getFirstDayOfWeek(locale))
+	let minDate = $derived(parseISODate(min))
+	let maxDate = $derived(parseISODate(max))
+	let committed = $derived(parseISODate(value))
+	let pendingDate = $derived(open ? parseISODate(pending) : committed)
+	let mounted = $state(false)
+
+	onMount(() => {
+		mounted = true
+	})
+
+	let localeKnown = $derived(locale !== undefined || mounted)
+	let pattern = $derived(localeKnown ? getDatePattern(locale) : ISO_PATTERN)
+	let monthDate = $derived(
+		parseISODate(displayMonth) ?? startOfMonth(pendingDate ?? committed ?? todayValue),
+	)
+	let monthNames = $derived(getMonthNames(locale, 'long'))
+	let shortMonthNames = $derived(getMonthNames(locale, 'short'))
+	let rowCount = $derived(getWeekRowCount(monthDate, week))
+
+	let viewEnter = $state(false)
+	let cancelViewEnter: (() => void) | undefined
+
+	const setMode = (next: 'days' | 'months' | 'years') => {
+		if (mode === next) return
+		mode = next
+		cancelViewEnter?.()
+		viewEnter = true
+		cancelViewEnter = afterTwoFrames(() => (viewEnter = false))
+	}
+
+	const formatValue = () => {
+		if (!committed) return ''
+		return localeKnown ? formatDate(committed, locale) : toISODate(committed)
+	}
+
+	let text = $derived(typed && typed.source === value ? typed.text : formatValue())
+
+	let inputInvalid = $derived(invalidText !== undefined && invalidText === text)
+
+	let monthOptions = $derived(
+		monthNames.map((monthName, index) => ({
+			value: index,
+			label: monthName,
+			disabled: !isMonthWithin(monthDate.getFullYear(), index, minDate, maxDate),
+		})),
+	)
+
+	let yearOptions = $derived(
+		Array.from({ length: yearRange[1] - yearRange[0] + 1 }, (_, index) => {
+			const year = yearRange[0] + index
+			return {
+				value: year,
+				label: `${year}`,
+				disabled: !isYearWithin(year, minDate, maxDate),
+			}
+		}),
+	)
+
+	let canPreviousMonth = $derived(
+		!minDate ||
+			compareDays(new Date(monthDate.getFullYear(), monthDate.getMonth(), 0), minDate) >= 0,
+	)
+	let canNextMonth = $derived(
+		!maxDate ||
+			compareDays(new Date(monthDate.getFullYear(), monthDate.getMonth() + 1, 1), maxDate) <= 0,
+	)
+	let canPreviousYear = $derived(
+		monthDate.getFullYear() > yearRange[0] &&
+			(!minDate || compareDays(addMonths(monthDate, -12), startOfMonth(minDate)) >= 0),
+	)
+	let canNextYear = $derived(
+		monthDate.getFullYear() < yearRange[1] &&
+			(!maxDate || compareDays(addMonths(monthDate, 12), startOfMonth(maxDate)) <= 0),
+	)
+
+	const setMonth = (date: Date) => {
+		displayMonth = toISODate(startOfMonth(date))
+	}
+
+	const commit = (next: ISODate | undefined) => {
+		if (value === next) return
+		value = next
+		onchange?.(next)
+	}
+
+	const isShowing = () => !!menuElement?.matches(':popover-open')
+
+	const openPicker = () => {
+		if (isShowing()) return
+		if (disabled || readonly) {
+			open = false
+			return
+		}
+		menuElement?.showPopover()
+	}
+
+	const focusCalendarWhenReady = async () => {
+		await tick()
+		focusCalendar()
+	}
+
+	$effect(() => {
+		if (open) openPicker()
+		else if (isShowing()) menuElement?.hidePopover()
+	})
+
+	const focusCalendar = () => {
+		menuElement?.querySelector<HTMLElement>('.np-calendar-day[tabindex="0"]')?.focus()
+	}
+
+	const closePicker = (restoreFocus = true) => {
+		menuElement?.hidePopover()
+		if (restoreFocus) {
+			anchorElement?.querySelector<HTMLElement>('input')?.focus()
+		}
+	}
+
+	const selectDay = (date: Date) => {
+		pending = toISODate(date)
+		setMonth(date)
+		focusedDay = date
+	}
+
+	const confirm = () => {
+		typed = undefined
+		invalidText = undefined
+		commit(pending)
+		closePicker()
+	}
+
+	const usableDate = (typed: string) => {
+		const parsed = parseDateInput(typed, locale)
+		if (!parsed) return undefined
+		if (!isWithin(parsed, minDate, maxDate)) return undefined
+		return (isDateEnabled?.(parsed) ?? true) ? parsed : undefined
+	}
+
+	const handleInput = (event: Event) => {
+		const next = (event.currentTarget as HTMLInputElement).value
+		const parsed = usableDate(next)
+		commit(parsed ? toISODate(parsed) : undefined)
+		if (parsed) setMonth(parsed)
+		// Recorded after the commit, so that it is remembered against the value it just produced.
+		typed = { source: value, text: next }
+		invalidText = undefined
+	}
+
+	const handleBlur = () => {
+		if (!text.trim()) {
+			invalidText = undefined
+			return
+		}
+		const parsed = usableDate(text)
+		invalidText = parsed ? undefined : text
+		// Leaving the field tidies a loose entry: dropping what was typed falls back to the
+		// canonical formatting of the value it produced.
+		if (parsed) typed = undefined
+	}
+
+	$effect(() => {
+		const input = inputElement
+		if (!input) return
+		const unusable = text.trim() !== '' && !usableDate(text)
+		input.setCustomValidity(unusable ? invalidDateMessage : '')
+	})
+
+	const chooseMonth = (month: number) => {
+		setMonth(new Date(monthDate.getFullYear(), month, 1))
+		setMode('days')
+	}
+
+	const chooseYear = (year: number) => {
+		// A year is offered as soon as any of its days is in range, so keeping the month the list was
+		// opened from can land on a month where nothing at all is selectable.
+		setMonth(new Date(year, clampMonthInYear(year, monthDate.getMonth(), minDate, maxDate), 1))
+		setMode('days')
+	}
 </script>
 
-<TextField label="Date" supportingText="MM/DD/YYYY">
-	{#snippet end()}
-		<IconButton><CalendarToday /></IconButton>
-	{/snippet}
-</TextField>
+<div {...attributes} bind:this={element} class={['np-docked-date-picker', attributes.class]}>
+	<div class="np-docked-date-picker-anchor" bind:this={anchorElement} style:anchor-name="--{uid}">
+		<TextField
+			{label}
+			{variant}
+			{issues}
+			{disabled}
+			{readonly}
+			{required}
+			{noAsterisk}
+			{autocomplete}
+			supportingText={supportingText ?? pattern}
+			bind:value={text}
+			bind:inputElement
+			aria-invalid={inputInvalid || issues?.length ? 'true' : undefined}
+			oninput={handleInput}
+			onblur={handleBlur}
+		>
+			{#snippet end()}
+				<IconButton
+					type="button"
+					aria-label={openCalendarLabel}
+					aria-expanded={open}
+					aria-haspopup="dialog"
+					aria-controls={open ? `${uid}-calendar` : undefined}
+					{disabled}
+					onclick={() => {
+						if (open) closePicker()
+						else openPicker()
+					}}
+				>
+					<CalendarToday />
+				</IconButton>
+			{/snippet}
+		</TextField>
+		<input
+			class="np-docked-date-picker-value"
+			type="hidden"
+			value={value ?? ''}
+			{name}
+			{form}
+			{disabled}
+		/>
+	</div>
+
+	<Menu
+		id="{uid}-calendar"
+		role="dialog"
+		aria-label={label}
+		aria-modal="false"
+		class="np-docked-date-picker-menu"
+		style={`position-anchor:--${uid};`}
+		--np-menu-justify-self="none"
+		--np-menu-position-area="bottom span-right"
+		--np-menu-margin="0"
+		--np-menu-container-color="var(--np-docked-date-picker-container-color, var(--np-color-surface-container-high))"
+		--np-menu-container-shape="var(--np-docked-date-picker-container-shape, var(--np-shape-corner-large))"
+		anchor={anchorElement}
+		bind:element={menuElement}
+		bind:open
+		ontoggle={({ newState }) => {
+			if (newState === 'open') {
+				monthBeforeOpen = displayMonth
+				pending = value ?? undefined
+				focusCalendarWhenReady()
+			}
+			if (newState === 'closed') {
+				setMode('days')
+				focusedDay = undefined
+				displayMonth = monthBeforeOpen
+			}
+		}}
+	>
+		{#if open}
+			<div
+				class={['np-docked-date-picker-container', mode !== 'days' && 'menu']}
+				style:--np-calendar-rows={rowCount}
+			>
+				<CalendarHeader
+					{mode}
+					monthLabel={shortMonthNames[monthDate.getMonth()]}
+					yearLabel={`${monthDate.getFullYear()}`}
+					{canPreviousMonth}
+					{canNextMonth}
+					{canPreviousYear}
+					{canNextYear}
+					{previousMonthLabel}
+					{nextMonthLabel}
+					{previousYearLabel}
+					{nextYearLabel}
+					{selectMonthLabel}
+					{selectYearLabel}
+					monthListId="{uid}-months"
+					yearListId="{uid}-years"
+					onpreviousmonth={() => setMonth(addMonths(monthDate, -1))}
+					onnextmonth={() => setMonth(addMonths(monthDate, 1))}
+					onpreviousyear={() => setMonth(addMonths(monthDate, -12))}
+					onnextyear={() => setMonth(addMonths(monthDate, 12))}
+					ontogglemonths={() => setMode(mode === 'months' ? 'days' : 'months')}
+					ontoggleyears={() => setMode(mode === 'years' ? 'days' : 'years')}
+				/>
+
+				{#if mode === 'days'}
+					<div class={['np-docked-date-picker-body', viewEnter && 'entering']}>
+						<Calendar
+							month={monthDate}
+							selected={pendingDate}
+							min={minDate}
+							max={maxDate}
+							{locale}
+							firstDayOfWeek={week}
+							{isDateEnabled}
+							{adjacentMonthDays}
+							dynamicRows
+							todayDate={todayValue}
+							focusedDate={focusedDay}
+							selectedLabel={selectedDateLabel}
+							onselect={selectDay}
+							onmonthstep={(delta) => setMonth(addMonths(monthDate, delta))}
+							onfocusday={(date) => {
+								focusedDay = date
+								if (
+									date.getMonth() !== monthDate.getMonth() ||
+									date.getFullYear() !== monthDate.getFullYear()
+								) {
+									setMonth(date)
+								}
+							}}
+						/>
+					</div>
+					<div class="np-docked-date-picker-actions">
+						<Button type="button" variant="text" onclick={() => closePicker()}>{cancelLabel}</Button
+						>
+						<Button type="button" variant="text" onclick={confirm}>{confirmLabel}</Button>
+					</div>
+				{:else}
+					<div class={['np-docked-date-picker-menu-view', viewEnter && 'entering']}>
+						<Divider --np-divider-color="var(--np-color-outline-variant)" />
+						{#if mode === 'months'}
+							<SelectionList
+								id="{uid}-months"
+								aria-label={selectMonthLabel}
+								options={monthOptions}
+								value={monthDate.getMonth()}
+								onselect={chooseMonth}
+							/>
+						{:else}
+							<SelectionList
+								id="{uid}-years"
+								aria-label={selectYearLabel}
+								options={yearOptions}
+								value={monthDate.getFullYear()}
+								onselect={chooseYear}
+							/>
+						{/if}
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</Menu>
+</div>
+
+<style>
+	.np-docked-date-picker {
+		display: inline-flex;
+		flex-direction: column;
+	}
+
+	.np-docked-date-picker-anchor {
+		display: inline-flex;
+		position: relative;
+	}
+
+	:global(.np-docked-date-picker-menu .np-menu) {
+		padding: 0;
+	}
+
+	.np-docked-date-picker-container {
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		width: var(--np-docked-date-picker-container-width, 22.5rem);
+		max-width: 100%;
+		padding-top: 1.25rem;
+		color: var(--np-color-on-surface);
+	}
+
+	.np-docked-date-picker-container :global(.np-date-picker-header) {
+		margin-inline: 0.75rem;
+	}
+
+	.np-docked-date-picker-body {
+		padding-top: 1.875rem;
+		padding-inline: 0.75rem;
+	}
+
+	.np-docked-date-picker-actions {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		gap: 0.5rem;
+		margin-top: auto;
+		margin-inline: 0.75rem;
+		padding-top: 0.5rem;
+		padding-bottom: 0.75rem;
+	}
+
+	:global(.np-docked-date-picker-actions .np-button) {
+		height: 2.25rem;
+	}
+
+	.np-docked-date-picker-container.menu {
+		padding-bottom: 1.25rem;
+	}
+
+	.np-docked-date-picker-menu-view {
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		margin-top: 1.875rem;
+		height: calc(2.5rem + var(--np-calendar-rows) * 3rem);
+	}
+
+	.np-docked-date-picker-menu-view :global(.np-date-picker-selection-list) {
+		flex: 1;
+		min-height: 0;
+	}
+
+	.np-docked-date-picker-menu-view.entering {
+		height: 0;
+		margin-top: 0;
+		opacity: 0.6;
+		transition: none;
+	}
+
+	.np-docked-date-picker-body.entering {
+		opacity: 0.6;
+		transition: none;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-docked-date-picker-menu-view {
+			transition:
+				height var(--np-motion-expressive-default-effects),
+				margin-top var(--np-motion-expressive-default-effects),
+				opacity var(--np-motion-expressive-default-effects);
+		}
+
+		.np-docked-date-picker-body {
+			transition: opacity var(--np-motion-expressive-default-effects);
+		}
+	}
+
+	.np-docked-date-picker-container :global(.np-divider) {
+		flex: none;
+	}
+</style>

package/dist/date-picker/DockedDatePicker.svelte.d.ts

@@ -1,18 +1,4 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DockedDatePicker: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DockedDatePicker = InstanceType<typeof DockedDatePicker>;
+import type { DockedDatePickerProps } from './types.ts';
+declare const DockedDatePicker: import("svelte").Component<DockedDatePickerProps, {}, "value" | "element" | "displayMonth" | "open">;
+type DockedDatePicker = ReturnType<typeof DockedDatePicker>;
 export default DockedDatePicker;

package/dist/date-picker/SelectionList.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import CheckIcon from '../icons/CheckIcon.svelte'
+	import { arrowKeyNav } from '../keyboard-nav.js'
+	import Ripple from '../ripple/Ripple.svelte'
+	import type { Attachment } from 'svelte/attachments'
+	import type { HTMLAttributes } from 'svelte/elements'
+
+	interface SelectionOption {
+		value: number
+		label: string
+		disabled?: boolean
+	}
+
+	interface SelectionListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
+		options: SelectionOption[]
+		value?: number
+		onselect?: (value: number) => void
+	}
+
+	let { options, value, onselect, ...attributes }: SelectionListProps = $props()
+
+	const handleKeydown = arrowKeyNav('[role="option"]')
+
+	let tabStopValue = $derived.by(() => {
+		if (options.some((option) => option.value === value)) return value
+		const offered = options.filter((option) => !option.disabled)
+		const pool = offered.length ? offered : options
+		if (!pool.length) return undefined
+		if (value === undefined) return pool[0].value
+		return pool.reduce((nearest, option) =>
+			Math.abs(option.value - value) < Math.abs(nearest.value - value) ? option : nearest,
+		).value
+	})
+
+	const centerInList: Attachment<HTMLElement> = (element) => {
+		const list = element.closest<HTMLElement>('.np-date-picker-selection-list')
+		if (!list) return
+		list.scrollTop = element.offsetTop - list.clientHeight / 2 + element.offsetHeight / 2
+	}
+</script>
+
+<div
+	{...attributes}
+	role="listbox"
+	tabindex="-1"
+	class={['np-date-picker-selection-list', attributes.class]}
+	onkeydown={handleKeydown}
+>
+	{#each options as option (option.value)}
+		{@const selected = option.value === value}
+		<button
+			{@attach selected && centerInList}
+			type="button"
+			role="option"
+			aria-selected={selected}
+			aria-disabled={option.disabled}
+			tabindex={option.value === tabStopValue ? 0 : -1}
+			class={['np-date-picker-selection-option', selected && 'selected']}
+			onclick={() => {
+				if (option.disabled) return
+				onselect?.(option.value)
+			}}
+		>
+			<span class="np-date-picker-selection-check" aria-hidden="true">
+				{#if selected}
+					<CheckIcon />
+				{/if}
+			</span>
+			<span class="np-date-picker-selection-label">{option.label}</span>
+			{#if !option.disabled}
+				<Ripple />
+			{/if}
+		</button>
+	{/each}
+</div>
+
+<style>
+	.np-date-picker-selection-list {
+		position: relative;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		flex: 1;
+		min-height: 0;
+		scrollbar-color: var(--np-color-surface-container-high) transparent;
+		scrollbar-width: thin;
+	}
+
+	.np-date-picker-selection-list:focus-visible {
+		outline: none;
+	}
+
+	.np-date-picker-selection-option {
+		font: inherit;
+		-webkit-tap-highlight-color: transparent;
+		background: none;
+		border: 0;
+		margin: 0;
+		width: 100%;
+		box-sizing: border-box;
+		height: 3rem;
+		padding-inline: 1rem;
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		cursor: pointer;
+		position: relative;
+		text-align: start;
+		color: var(--np-color-on-surface);
+	}
+
+	.np-date-picker-selection-option.selected {
+		background-color: var(
+			--np-date-picker-menu-selected-container-color,
+			var(--np-color-surface-variant)
+		);
+	}
+
+	.np-date-picker-selection-option[aria-disabled='true'] {
+		cursor: default;
+		color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
+	}
+
+	.np-date-picker-selection-check {
+		display: flex;
+		width: 1.5rem;
+		height: 1.5rem;
+		flex: none;
+	}
+
+	:global(.np-date-picker-selection-check svg) {
+		width: 1.5rem;
+		height: 1.5rem;
+		fill: currentColor;
+	}
+
+	.np-date-picker-selection-label {
+		font-size: 1rem;
+		line-height: 1.5rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.np-date-picker-selection-option:focus-visible {
+		outline: 3px solid var(--np-color-secondary);
+		outline-offset: -3px;
+	}
+</style>

package/dist/date-picker/SelectionList.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface SelectionOption {
+    value: number;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectionListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
+    options: SelectionOption[];
+    value?: number;
+    onselect?: (value: number) => void;
+}
+declare const SelectionList: import("svelte").Component<SelectionListProps, {}, "">;
+type SelectionList = ReturnType<typeof SelectionList>;
+export default SelectionList;