noph-ui 0.52.0 → 0.53.0

package/dist/date-picker/DockedDateTimePicker.svelte

@@ -1,23 +1,13 @@
 <script lang="ts">
-	import { exitVisibility } from './exitVisibility.svelte.js'
 	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 { formReset } from '../form-reset.js'
-	import { syncOpenEffect } from '../popover.svelte.js'
-	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 DockedPickerField from './DockedPickerField.svelte'
+	import MonthPanel from './MonthPanel.svelte'
 	import TimeColumn from './TimeColumn.svelte'
+	import { clampMinutes, isHourReachable, isMinuteWithin, stepOf } from './timeUtils.js'
 	import {
-		addMonths,
-		clampMonthInYear,
-		compareDays,
-		compareTimes,
 		DEFAULT_YEAR_RANGE,
 		formatDateTime,
 		formatTwoDigits,
@@ -25,19 +15,16 @@
 		getDayPeriodLabels,
 		getFirstDayOfWeek,
 		getHourLabels,
-		getMonthNames,
-		getWeekRowCount,
 		HOURS_IN_DAY,
-		isMonthWithin,
 		isSameDay,
 		isTimeWithin,
-		isYearWithin,
 		MINUTES_IN_DAY,
 		MINUTES_IN_HOUR,
 		minutesOfDay,
 		parseDateTimeInput,
 		parseISODate,
 		parseISODateTime,
+		parseISOTime,
 		startOfMonth,
 		toISODate,
 		toISODateTime,
@@ -52,8 +39,6 @@
 		defaultValue,
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars -- pulled out of the rest props on purpose
 		type,
-		'aria-invalid': ariaInvalid,
-		style,
 		displayMonth = $bindable(),
 		open = $bindable(false),
 		element = $bindable(),
@@ -65,15 +50,7 @@
 		isDateEnabled,
 		adjacentMonthDays = false,
 		label = 'Date and time',
-		supportingText,
-		issues,
 		variant = 'outlined',
-		name,
-		form,
-		required,
-		disabled,
-		readonly,
-		noAsterisk,
 		autocomplete = 'off',
 		minuteStep = 5,
 		hour12: hourCycle,
@@ -89,37 +66,23 @@
 		openCalendarLabel = 'Show date and time picker',
 		invalidDateMessage = 'Enter a valid date and time.',
 		selectedDateLabel = 'selected',
+		shortcutLabels,
 		hourLabel = 'Hour',
 		minuteLabel = 'Minute',
 		dayPeriodLabel = 'AM or PM',
-		onchange,
-		oninput,
-		onblur,
 		...attributes
 	}: DockedDateTimePickerProps = $props()
 
 	const ISO_PATTERN = 'YYYY-MM-DDTHH:mm'
 	const HALF_DAY = (HOURS_IN_DAY / 2) * MINUTES_IN_HOUR
 
-	const uid = $props.id()
-
-	let menuElement = $state<HTMLDivElement>()
-	// Keeps the content while the menu animates out, so it fades as a whole, not as an empty box.
-	const exit = exitVisibility()
-	let mode = $state<'days' | 'months' | 'years'>('days')
-	let listMode = $state<'months' | 'years' | undefined>(undefined)
+	let field = $state<DockedPickerField>()
+	let panel = $state<MonthPanel>()
 	let pendingDay = $state<ISODate | undefined>(undefined)
 	let pendingMinutes = $state(0)
-	let focusedDay = $state<Date | undefined>(undefined)
-	let inputElement = $state<HTMLInputElement | HTMLTextAreaElement>()
-	let valueInput = $state<HTMLInputElement>()
-
-	let typed = $state.raw<{ source: string | 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(parseISODateTime(min))
 	let maxDate = $derived(parseISODateTime(max, MINUTES_IN_DAY - 1))
 	let current = $derived<string | undefined>(
@@ -143,109 +106,37 @@
 	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 defaultMinutes = $derived.by(() => {
-		const parsed = parseISODateTime(`2000-01-01T${defaultTime}`)
-		return parsed ? minutesOfDay(parsed) : 0
-	})
-
-	const setMode = (next: 'days' | 'months' | 'years') => {
-		if (mode === next) return
-		mode = next
-		if (next !== 'days') listMode = next
-	}
-
-	const leaveList = async () => {
-		setMode('days')
-		await tick()
-		focusCalendar()
-	}
-
-	const formatValue = () => {
-		if (!committed) return ''
-		return localeKnown ? formatDateTime(committed, locale, hour12) : toISODateTime(committed)
-	}
-
-	let text = $derived(typed && typed.source === current ? 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),
-	)
+	let defaultMinutes = $derived(parseISOTime(defaultTime) ?? 0)
 
 	let pendingHour = $derived(Math.floor(pendingMinutes / MINUTES_IN_HOUR))
 	let pendingPeriod = $derived(pendingMinutes < HALF_DAY ? 0 : 1)
 	let periodLabels = $derived(getDayPeriodLabels(locale))
 	let hourLabels = $derived(getHourLabels(locale, hour12))
 
-	const spanOffered = (from: number, to: number) => {
-		if (!pendingDayDate) return true
-		const start = withMinutes(pendingDayDate, from)
-		const end = withMinutes(pendingDayDate, to)
-		return (
-			(!minDate || compareTimes(end, minDate) >= 0) &&
-			(!maxDate || compareTimes(start, maxDate) <= 0)
-		)
-	}
+	// The bounds hold the time only on their own days.
+	const boundsOn = (day: Date | undefined) => ({
+		min: day && minDate && isSameDay(day, minDate) ? minutesOfDay(minDate) : undefined,
+		max: day && maxDate && isSameDay(day, maxDate) ? minutesOfDay(maxDate) : undefined,
+	})
+	let bounds = $derived(boundsOn(pendingDayDate))
+	let step = $derived(stepOf(minuteStep))
+	const usable = (minutes: number) => isMinuteWithin(minutes, bounds.min, bounds.max)
+	const reachable = (hour: number) => isHourReachable(hour, step, usable)
 
 	let hourOptions = $derived(
 		hourLabels.map((hourText, index) => {
 			const hour = hour12 ? pendingPeriod * 12 + index : index
-			return {
-				value: hour,
-				label: hourText,
-				disabled: !spanOffered(
-					hour * MINUTES_IN_HOUR,
-					hour * MINUTES_IN_HOUR + MINUTES_IN_HOUR - 1,
-				),
-			}
+			return { value: hour, label: hourText, disabled: !reachable(hour) }
 		}),
 	)
 
 	let minuteOptions = $derived(
-		Array.from({ length: Math.ceil(MINUTES_IN_HOUR / minuteStep) }, (_, index) => {
-			const minute = index * minuteStep
-			const at = pendingHour * MINUTES_IN_HOUR + minute
+		Array.from({ length: Math.ceil(MINUTES_IN_HOUR / step) }, (_, index) => {
+			const minute = index * step
 			return {
 				value: minute,
 				label: formatTwoDigits(minute, locale),
-				disabled: !spanOffered(at, at),
+				disabled: !usable(pendingHour * MINUTES_IN_HOUR + minute),
 			}
 		}),
 	)
@@ -254,7 +145,7 @@
 		periodLabels.map((periodText, index) => ({
 			value: index,
 			label: periodText,
-			disabled: !spanOffered(index * HALF_DAY, index * HALF_DAY + HALF_DAY - 1),
+			disabled: !Array.from({ length: 12 }, (_, hour) => index * 12 + hour).some(reachable),
 		})),
 	)
 
@@ -262,354 +153,141 @@
 		displayMonth = toISODate(startOfMonth(date))
 	}
 
-	const commit = (next: string | undefined) => {
-		if (current === next) return
-		value = next
-		onchange?.(next)
-	}
-
-	const restoreDefault = () => {
-		const next = typeof defaultValue === 'string' ? defaultValue : undefined
-		if (valueInput) valueInput.value = next ?? ''
-		queueMicrotask(() => {
-			typed = undefined
-			invalidText = undefined
-			pendingDay = undefined
-			pendingMinutes = 0
-			value = next
-			text = formatValue()
-		})
-	}
-
-	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()
-	}
-
-	export const show = () => openPicker()
-
-	export const close = () => {
-		if (isShowing()) menuElement?.hidePopover()
-	}
-
-	syncOpenEffect(
-		() => menuElement,
-		() => open,
-		show,
-		close,
-	)
-
-	const focusCalendar = () => {
-		menuElement?.querySelector<HTMLElement>('.np-calendar-day[tabindex="0"]')?.focus()
-	}
-
-	const closePicker = (restoreFocus = true) => {
-		menuElement?.hidePopover()
-		if (restoreFocus) {
-			element?.querySelector<HTMLElement>('input')?.focus()
-		}
-	}
-
-	const clampMinutesToDay = (day: Date, minutes: number) => {
-		let next = minutes
-		if (minDate && isSameDay(day, minDate)) next = Math.max(next, minutesOfDay(minDate))
-		if (maxDate && isSameDay(day, maxDate)) next = Math.min(next, minutesOfDay(maxDate))
-		return next
-	}
-
 	const selectDay = (date: Date) => {
+		const { min, max } = boundsOn(date)
 		pendingDay = toISODate(date)
-		pendingMinutes = clampMinutesToDay(date, pendingMinutes)
+		pendingMinutes = clampMinutes(pendingMinutes, min, max)
 		setMonth(date)
-		focusedDay = date
 	}
 
 	const setTime = (minutes: number) => {
-		pendingMinutes = pendingDayDate ? clampMinutesToDay(pendingDayDate, minutes) : minutes
+		pendingMinutes = clampMinutes(minutes, bounds.min, bounds.max)
 	}
 
-	const confirm = () => {
-		typed = undefined
-		invalidText = undefined
-		commit(pendingDate ? toISODateTime(pendingDate) : undefined)
-		closePicker()
+	const usableDate = (text: string) => {
+		const parsed = parseDateTimeInput(text, locale, hour12)
+		if (!parsed || !isTimeWithin(parsed, minDate, maxDate)) return undefined
+		return (isDateEnabled?.(parsed) ?? true) ? toISODateTime(parsed) : undefined
 	}
 
-	const usableDate = (typed: string) => {
-		const parsed = parseDateTimeInput(typed, locale, hour12)
-		if (!parsed) return undefined
-		if (!isTimeWithin(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 ? toISODateTime(parsed) : undefined)
-		if (parsed) setMonth(parsed)
-		typed = { source: current, text: next }
-		invalidText = undefined
-	}
-
-	const handleBlur = () => {
-		if (!text.trim()) {
-			invalidText = undefined
-			return
-		}
-		const parsed = usableDate(text)
-		invalidText = parsed ? undefined : text
-		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))
-		leaveList()
-	}
-
-	const chooseYear = (year: number) => {
-		setMonth(new Date(year, clampMonthInYear(year, monthDate.getMonth(), minDate, maxDate), 1))
-		leaveList()
-	}
+	export const show = () => field?.show()
+	export const close = () => field?.close()
 </script>
 
-<TextField
+<DockedPickerField
 	{...attributes}
-	class={['np-docked-date-time-picker', attributes.class]}
-	style={`anchor-name:--${uid};${style ?? ''}`}
+	bind:this={field}
+	kind="date-time-picker"
+	bind:value
+	bind:open
+	bind:element
+	{current}
+	resetValue={typeof defaultValue === 'string' ? defaultValue : undefined}
 	{label}
 	{variant}
-	{issues}
-	{disabled}
-	{readonly}
-	{required}
-	{noAsterisk}
 	{autocomplete}
-	supportingText={supportingText ?? pattern}
-	bind:value={text}
-	bind:element
-	bind:inputElement
-	aria-invalid={inputInvalid || issues?.length || ariaInvalid === true || ariaInvalid === 'true'
-		? 'true'
-		: undefined}
-	oninput={(event) => {
-		handleInput(event)
-		oninput?.(event)
+	{pattern}
+	openLabel={openCalendarLabel}
+	invalidMessage={invalidDateMessage}
+	format={() =>
+		committed
+			? localeKnown
+				? formatDateTime(committed, locale, hour12)
+				: toISODateTime(committed)
+			: ''}
+	parse={usableDate}
+	ontyped={(moment) => setMonth(parseISODateTime(moment)!)}
+	onrestore={() => {
+		pendingDay = undefined
+		pendingMinutes = 0
 	}}
-	onblur={(event) => {
-		handleBlur()
-		onblur?.(event)
+	onmenukeydown={(event) => panel?.handleKeydown(event)}
+	onopen={async () => {
+		monthBeforeOpen = displayMonth
+		pendingDay = committed ? toISODate(committed) : undefined
+		pendingMinutes = committed ? minutesOfDay(committed) : defaultMinutes
+		await tick()
+		panel?.focus()
 	}}
->
-	{#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
-	bind:this={valueInput}
-	{@attach formReset(restoreDefault)}
-	class="np-docked-date-time-picker-value"
-	type="hidden"
-	value={current ?? ''}
-	{name}
-	{form}
-	{disabled}
-/>
-
-<Menu
-	id="{uid}-calendar"
-	role="dialog"
-	aria-label={label}
-	aria-modal="false"
-	class="np-docked-date-time-picker-menu"
-	style={`position-anchor:--${uid};`}
-	--np-menu-justify-self="none"
-	--np-menu-position-area="bottom span-right"
-	--np-menu-over-anchor-position-area="span-all span-right"
-	--np-menu-margin="0"
-	--np-menu-container-color="var(--np-docked-date-time-picker-container-color, var(--np-color-surface-container-high))"
-	--np-menu-container-shape="var(--np-docked-date-time-picker-container-shape, var(--np-shape-corner-large))"
-	anchor={element}
-	bind:element={menuElement}
-	bind:open
-	ontoggle={({ newState }) => {
-		if (newState === 'open') {
-			exit.show()
-			monthBeforeOpen = displayMonth
-			pendingDay = committed ? toISODate(committed) : undefined
-			pendingMinutes = committed ? minutesOfDay(committed) : defaultMinutes
-			focusCalendarWhenReady()
-		}
-		if (newState === 'closed') {
-			// Reset once the menu is gone, not while it still shows.
-			exit.scheduleExit(menuElement, () => {
-				setMode('days')
-				listMode = undefined
-				focusedDay = undefined
-				displayMonth = monthBeforeOpen
-			})
-		}
+	onclosed={() => {
+		panel?.reset()
+		displayMonth = monthBeforeOpen
 	}}
 >
-	{#if open || exit.visible}
-		<div
-			class="np-docked-date-time-picker-container"
-			style:--np-calendar-rows={rowCount}
-			style:--np-time-columns={hour12 ? 3 : 2}
-		>
-			<div class="np-docked-date-time-picker-panels">
-				<div class="np-docked-date-time-picker-date">
-					<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')}
-					/>
-
-					<div class="np-docked-date-time-picker-views">
-						<div class="np-docked-date-time-picker-body" inert={mode !== 'days'}>
-							<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>
-
-						{#if listMode}
-							<div class={['np-docked-date-time-picker-menu-view', mode !== 'days' && 'open']}>
-								<div class="np-docked-date-time-picker-menu-shade">
-									<Divider --np-divider-color="var(--np-color-outline-variant)" />
-									{#if listMode === '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>
-							</div>
-						{/if}
-					</div>
-				</div>
+	{#snippet icon()}
+		<CalendarToday />
+	{/snippet}
+	<div class="np-docked-date-time-picker-container" style:--np-time-columns={hour12 ? 3 : 2}>
+		<div class="np-docked-date-time-picker-panels">
+			<div class="np-docked-date-time-picker-date">
+				<MonthPanel
+					bind:this={panel}
+					month={monthDate}
+					selected={pendingDate}
+					min={minDate}
+					max={maxDate}
+					{locale}
+					firstDayOfWeek={firstDayOfWeek ?? getFirstDayOfWeek(locale)}
+					{yearRange}
+					{isDateEnabled}
+					{adjacentMonthDays}
+					today={todayValue}
+					{previousMonthLabel}
+					{nextMonthLabel}
+					{previousYearLabel}
+					{nextYearLabel}
+					{selectMonthLabel}
+					{selectYearLabel}
+					{selectedDateLabel}
+					{shortcutLabels}
+					onmonth={setMonth}
+					onselect={selectDay}
+				/>
+			</div>
 
-				<div class="np-docked-date-time-picker-time">
-					<div class="np-docked-date-time-picker-columns">
-						<TimeColumn
-							aria-label={hourLabel}
-							options={hourOptions}
-							value={pendingHour}
-							onselect={(hour) =>
-								setTime(hour * MINUTES_IN_HOUR + (pendingMinutes % MINUTES_IN_HOUR))}
-						/>
+			<div class="np-docked-date-time-picker-time">
+				<div class="np-docked-date-time-picker-columns">
+					<TimeColumn
+						aria-label={hourLabel}
+						options={hourOptions}
+						value={pendingHour}
+						onselect={(hour) =>
+							setTime(hour * MINUTES_IN_HOUR + (pendingMinutes % MINUTES_IN_HOUR))}
+					/>
+					<TimeColumn
+						aria-label={minuteLabel}
+						options={minuteOptions}
+						value={pendingMinutes % MINUTES_IN_HOUR}
+						onselect={(minute) => setTime(pendingHour * MINUTES_IN_HOUR + minute)}
+					/>
+					{#if hour12}
 						<TimeColumn
-							aria-label={minuteLabel}
-							options={minuteOptions}
-							value={pendingMinutes % MINUTES_IN_HOUR}
-							onselect={(minute) => setTime(pendingHour * MINUTES_IN_HOUR + minute)}
+							aria-label={dayPeriodLabel}
+							options={periodOptions}
+							value={pendingPeriod}
+							onselect={(period) => setTime((pendingMinutes % HALF_DAY) + period * HALF_DAY)}
 						/>
-						{#if hour12}
-							<TimeColumn
-								aria-label={dayPeriodLabel}
-								options={periodOptions}
-								value={pendingPeriod}
-								onselect={(period) => setTime((pendingMinutes % HALF_DAY) + period * HALF_DAY)}
-							/>
-						{/if}
-					</div>
+					{/if}
 				</div>
 			</div>
+		</div>
 
-			<Divider --np-divider-color="var(--np-color-outline-variant)" />
-			<div class="np-docked-date-time-picker-actions">
-				<Button type="button" variant="text" onclick={() => closePicker()}>{cancelLabel}</Button>
-				<Button type="button" variant="text" onclick={confirm}>{confirmLabel}</Button>
-			</div>
+		<Divider --np-divider-color="var(--np-color-outline-variant)" />
+		<div class="np-docked-date-time-picker-actions">
+			<Button type="button" variant="text" onclick={() => field?.closePicker()}
+				>{cancelLabel}</Button
+			>
+			<Button
+				type="button"
+				variant="text"
+				onclick={() => field?.confirm(pendingDate ? toISODateTime(pendingDate) : undefined)}
+				>{confirmLabel}</Button
+			>
 		</div>
-	{/if}
-</Menu>
+	</div>
+</DockedPickerField>
 
 <style>
-	:global(.np-docked-date-time-picker-menu .np-menu) {
-		padding: 0;
-	}
-
 	.np-docked-date-time-picker-container {
 		box-sizing: border-box;
 		display: flex;
@@ -634,19 +312,6 @@
 		padding-bottom: 0.75rem;
 	}
 
-	.np-docked-date-time-picker-date :global(.np-date-picker-header) {
-		margin-inline: 0.75rem;
-	}
-
-	.np-docked-date-time-picker-views {
-		position: relative;
-		margin-top: 1.875rem;
-	}
-
-	.np-docked-date-time-picker-body {
-		padding-inline: 0.75rem;
-	}
-
 	.np-docked-date-time-picker-time {
 		position: relative;
 		height: 12rem;
@@ -701,66 +366,4 @@
 	:global(.np-docked-date-time-picker-actions .np-button) {
 		height: 2.25rem;
 	}
-
-	.np-docked-date-time-picker-menu-view {
-		position: absolute;
-		inset: 0;
-		overflow: hidden;
-		visibility: hidden;
-	}
-
-	.np-docked-date-time-picker-menu-view.open {
-		visibility: visible;
-	}
-
-	.np-docked-date-time-picker-menu-shade {
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		translate: 0 -100%;
-		opacity: 0.6;
-		background-color: var(
-			--np-docked-date-time-picker-container-color,
-			var(--np-color-surface-container-high)
-		);
-	}
-
-	.np-docked-date-time-picker-menu-view.open .np-docked-date-time-picker-menu-shade {
-		translate: 0 0;
-		opacity: 1;
-	}
-
-	.np-docked-date-time-picker-menu-view :global(.np-date-picker-selection-list) {
-		flex: 1;
-		min-height: 0;
-	}
-
-	@media (prefers-reduced-motion: no-preference) {
-		.np-docked-date-time-picker-menu-view {
-			transition: visibility var(--np-motion-expressive-default-effects);
-		}
-
-		.np-docked-date-time-picker-menu-shade {
-			transition:
-				translate var(--np-motion-expressive-default-effects),
-				opacity var(--np-motion-expressive-fast-effects);
-		}
-
-		.np-docked-date-time-picker-menu-view.open .np-docked-date-time-picker-menu-shade {
-			transition:
-				translate var(--np-motion-expressive-default-effects),
-				opacity var(--np-motion-expressive-default-effects);
-		}
-
-		@starting-style {
-			.np-docked-date-time-picker-menu-view.open .np-docked-date-time-picker-menu-shade {
-				translate: 0 -100%;
-				opacity: 0.6;
-			}
-		}
-	}
-
-	.np-docked-date-time-picker-container :global(.np-divider) {
-		flex: none;
-	}
 </style>