@torpor/ui 0.3.7 → 1.0.0

package/dist/DatePicker/DatePicker.torp

@@ -0,0 +1,222 @@
+import { type Bindable, type ClassValue, type StyleValue } from "@torpor/view";
+import {
+	Calendar,
+	CalendarDay,
+	CalendarDayHeader,
+	CalendarGrid,
+	CalendarGridHeader,
+	CalendarHeader,
+	CalendarHeaderTrigger,
+} from "../Calendar/index";
+import {
+	type FieldContext,
+	FieldContextName,
+	type FormContext,
+	FormContextName,
+} from "../Form/FormTypes";
+import { formatDate } from "../utils/dateUtils";
+import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import getId from "../utils/getId";
+import createFormField from "../utils/formField";
+import DatePickerHeader from "./DatePickerHeader.torp";
+
+interface DatePickerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The name of the date picker's form data field */
+	name?: string;
+	/** The selected date */
+	value?: Bindable<Date | undefined>;
+	/** Text to display when the value is empty */
+	placeholder?: string;
+	/** The format for the displayed date (e.g. "d MMM yyyy") */
+	dateFormat?: string;
+	/** If set to true, the user cannot interact with this date picker */
+	disabled?: boolean;
+	/** An accessible name for the trigger button */
+	ariaLabel?: string;
+	/** Raised when the value has changed */
+	onchange?: (value: Date) => void;
+}
+
+/**
+ * An input for selecting a date from a calendar popout.
+ *
+ * The structure of a DatePicker is a trigger button that displays the
+ * selected date, with a selectable Calendar in a popout.
+ */
+export default function DatePicker($props: DatePickerProps | undefined) {
+	let defaultId = getId();
+
+	let content: HTMLDivElement;
+	let closeOnClick = false;
+
+	// Wire up the enclosing Form and Field, if any
+	const form = createFormField(
+		$props?.name,
+		$context[FormContextName] as FormContext | undefined,
+		$context[FieldContextName] as FieldContext | undefined,
+	);
+
+	function getDateFormat(): string {
+		return $props?.dateFormat ?? "yyyy-MM-dd";
+	}
+	function getDisabled(): boolean {
+		return $props?.disabled === true;
+	}
+
+	let $state = $watch({
+		value: undefined as Date | undefined,
+		visible: false,
+		triggerId: "",
+		contentId: "",
+	});
+
+	$bind($state, $props, "value");
+
+	// Set default IDs so that the trigger can use aria-controls and the
+	// content can be labelled by the trigger
+	$run(() => {
+		$state.triggerId = `${$props?.id ?? defaultId}-trigger`;
+		$state.contentId = `${$props?.id ?? defaultId}-content`;
+	});
+
+	function displayText(): string {
+		const value = $state.value;
+		if (value) {
+			return formatDate($unwrap(value), getDateFormat());
+		}
+		return $props?.placeholder || "-";
+	}
+
+	function toggle() {
+		setVisible(!$state.visible);
+	}
+
+	function setVisible(visible: boolean) {
+		$state.visible = visible;
+		if (visible) {
+			// HACK: Because this may be shown with a click, we need to wait for
+			// another mousedown before we close on click. Otherwise the click
+			// immediately bubbles up to the document
+			closeOnClick = false;
+			addDocumentEvent("mousedown", handleDocumentMouseDown);
+			addDocumentEvent("click", handleDocumentClick);
+			focusCalendar();
+		} else {
+			removeDocumentEvent("mousedown", handleDocumentMouseDown);
+			removeDocumentEvent("click", handleDocumentClick);
+		}
+	}
+
+	function focusCalendar() {
+		// Wait for the popout to be shown before focusing it
+		setTimeout(() => {
+			const grid = content?.querySelector(".torp-calendar-grid");
+			if (grid instanceof HTMLElement && !getDisabled()) {
+				grid.focus();
+			}
+		});
+	}
+
+	function handleDate(date: Date) {
+		$state.value = new Date(date);
+		$props?.onchange?.($state.value);
+		form.handleInput();
+		setVisible(false);
+		focusTrigger();
+	}
+
+	function handleClose() {
+		setVisible(false);
+		focusTrigger();
+	}
+
+	function focusTrigger() {
+		const trigger = document.getElementById($state.triggerId);
+		if (trigger instanceof HTMLElement) {
+			trigger.focus();
+		}
+	}
+
+	function handleDocumentMouseDown() {
+		closeOnClick = true;
+	}
+
+	function handleDocumentClick(e: MouseEvent) {
+		if (closeOnClick && content && !content.contains(e.target as HTMLElement)) {
+			e.preventDefault();
+			setVisible(false);
+		}
+	}
+
+	function handleClick(e: MouseEvent) {
+		// Don't close when the trigger itself is clicked
+		e.stopPropagation();
+		toggle();
+	}
+
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-date-picker", getDisabled() ? "torp-date-picker-disabled" : undefined, $props?.class]}
+			{$props?.style}
+		>
+			<button
+				type="button"
+				id={$state.triggerId}
+				class="torp-date-picker-trigger"
+				aria-haspopup="dialog"
+				aria-expanded={$state.visible ? "true" : "false"}
+				aria-controls={$state.visible ? $state.contentId : undefined}
+				aria-label={$props?.ariaLabel}
+				data-valid={form.valid ? "valid" : "invalid"}
+				aria-describedby={form.messageId}
+				aria-invalid={form.inField && !form.valid ? "true" : undefined}
+				onblur={() => form.handleBlur()}
+				disabled={getDisabled()}
+				onclick={handleClick}
+			>
+				{displayText()}
+			</button>
+
+			<div
+				id={$state.contentId}
+				class={["torp-date-picker-content", $state.visible ? undefined : "hidden"]}
+				aria-hidden={$state.visible ? undefined : "true"}
+				&ref={content}
+			>
+				<Calendar selectable {$state.value} onchange={handleDate} onclose={handleClose}>
+					<CalendarHeader>
+						<CalendarHeaderTrigger type="previous" />
+						<DatePickerHeader class="torp-date-picker-header" />
+						<CalendarHeaderTrigger type="next" />
+					</CalendarHeader>
+					<CalendarGridHeader>
+						@for (let day of $slot.days) {
+							<CalendarDayHeader {day.dayName} {day.shortDayName} />
+						}
+					</CalendarGridHeader>
+					<CalendarGrid>
+						<CalendarDay date={$slot.day.date} muted={$slot.day.muted} active={$slot.day.active} />
+					</CalendarGrid>
+				</Calendar>
+			</div>
+		</div>
+
+		@if (form.name) {
+			<input type="hidden" name={form.name} value={$state.value ? formatDate($unwrap($state.value), "yyyy-MM-dd") : ""} />
+		}
+	}
+
+	@style {
+		/* Visibility only -- see SelectBoxContent */
+		.torp-date-picker-content.hidden {
+			display: none;
+		}
+	}
+}

package/dist/DatePicker/DatePickerHeader.torp

@@ -0,0 +1,20 @@
+import { CalendarContextName, type CalendarContext } from "../Calendar/CalendarTypes";
+import { monthNames } from "../utils/dateUtils";
+
+/**
+ * Displays the month and year of the currently visible date in a Calendar.
+ * Must be contained within a Calendar.
+ */
+export default function DatePickerHeader($props: { class?: string }) {
+	const context = $context[CalendarContextName] as CalendarContext;
+	if (!context) {
+		throw new Error("DatePickerHeader must be contained within a Calendar");
+	}
+	const $state = context.state;
+
+	@render {
+		<h4 class={$props.class}>
+			{monthNames[$state.visibleDate.getMonth()]} {$state.visibleDate.getFullYear()}
+		</h4>
+	}
+}

package/dist/DatePicker/index.d.ts

@@ -0,0 +1,55 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface DatePickerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The name of the date picker's form data field */
+	name?: string;
+	/** The selected date */
+	value?: Bindable<Date | undefined>;
+	/** Text to display when the value is empty */
+	placeholder?: string;
+	/** The format for the displayed date (e.g. "d MMM yyyy") */
+	dateFormat?: string;
+	/** If set to true, the user cannot interact with this date picker */
+	disabled?: boolean;
+	/** An accessible name for the trigger button */
+	ariaLabel?: string;
+	/** Raised when the value has changed */
+	onchange?: (value: Date) => void;
+}
+
+/**
+ * An input for selecting a date from a calendar popout.
+ *
+ * The structure of a DatePicker is a trigger button that displays the
+ * selected date, with a selectable Calendar in a popout.
+ */
+declare function DatePicker(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: DatePickerProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+/**
+ * Displays the month and year of the currently visible date in a Calendar.
+ * Must be contained within a Calendar.
+ */
+declare function DatePickerHeader(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: { class?: string },
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { DatePicker, DatePickerHeader };

package/dist/DatePicker/index.js

@@ -0,0 +1,2 @@
+import DatePicker from "./DatePicker.torp";
+export { DatePicker };

package/dist/DateRangePicker/DateRangePicker.torp

@@ -0,0 +1,311 @@
+import { type Bindable, type ClassValue, type StyleValue } from "@torpor/view";
+import {
+	Calendar,
+	CalendarDayHeader,
+	CalendarGrid,
+	CalendarGridHeader,
+	CalendarHeader,
+	CalendarHeaderTrigger,
+} from "../Calendar/index";
+import DatePickerHeader from "../DatePicker/DatePickerHeader.torp";
+import {
+	type FieldContext,
+	FieldContextName,
+	type FormContext,
+	FormContextName,
+} from "../Form/FormTypes";
+import { areDatesEqual, formatDate } from "../utils/dateUtils";
+import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import getId from "../utils/getId";
+import createFormField from "../utils/formField";
+import { type DateRange, type DateRangePickerContext, DateRangePickerContextName } from "./DateRangePickerTypes";
+import DateRangePickerDay from "./DateRangePickerDay.torp";
+
+interface DateRangePickerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The name of the date range picker's form data fields; "-start" and "-end" are appended */
+	name?: string;
+	/** The selected date range */
+	value?: Bindable<DateRange | undefined>;
+	/** Text to display when the value is empty */
+	placeholder?: string;
+	/** The format for the displayed dates (e.g. "d MMM yyyy") */
+	dateFormat?: string;
+	/** If set to true, the user cannot interact with this date range picker */
+	disabled?: boolean;
+	/** An accessible name for the trigger button */
+	ariaLabel?: string;
+	/** Raised when a complete range has been selected */
+	onchange?: (value: DateRange) => void;
+}
+
+/**
+ * An input for selecting a range of dates from a calendar popout. The first
+ * click sets the start of the range and the second sets its end; clicking a
+ * date before the start begins a new range there, and a third click starts
+ * over.
+ *
+ * The structure of a DateRangePicker is a trigger button that displays the
+ * selected range, with a selectable Calendar in a popout.
+ */
+export default function DateRangePicker($props: DateRangePickerProps | undefined) {
+	let defaultId = getId();
+
+	let content: HTMLDivElement;
+	let closeOnClick = false;
+
+	// Wire up the enclosing Form and Field, if any
+	const form = createFormField(
+		$props?.name,
+		$context[FormContextName] as FormContext | undefined,
+		$context[FieldContextName] as FieldContext | undefined,
+	);
+
+	function getDateFormat(): string {
+		return $props?.dateFormat ?? "yyyy-MM-dd";
+	}
+	function getDisabled(): boolean {
+		return $props?.disabled === true;
+	}
+
+	let $state = $watch({
+		value: $props?.value as DateRange | undefined,
+		start: $props?.value?.start as Date | undefined,
+		end: $props?.value?.end as Date | undefined,
+		preview: undefined as Date | undefined,
+		visible: false,
+		triggerId: "",
+		contentId: "",
+	});
+
+	// Seed from the props so the initial value displays; $bind handles later
+	// pushes both ways
+	$bind($state, $props, "value");
+
+	// Set default IDs so that the trigger can use aria-controls and the
+	// content can be labelled by the trigger
+	$run(() => {
+		$state.triggerId = `${$props?.id ?? defaultId}-trigger`;
+		$state.contentId = `${$props?.id ?? defaultId}-content`;
+	});
+
+	// Set the context that days use to render range highlighting. Dates are
+	// unwrapped so that consumers can call date methods on them
+	const context: DateRangePickerContext = {
+		getStart,
+		getEnd: () => ($state.end ? ($unwrap($state.end) as Date) : undefined),
+		getPreview: () => ($state.preview ? ($unwrap($state.preview) as Date) : undefined),
+		isSelecting,
+		setPreview: (date) => {
+			if (isSelecting()) {
+				$state.preview = date ? new Date(date) : undefined;
+			}
+		},
+	};
+	$context[DateRangePickerContextName] = context;
+
+	function isSelecting(): boolean {
+		return $state.start !== undefined && $state.end === undefined;
+	}
+
+	// The range's endpoints count as selected, so their gridcells get
+	// aria-selected and screen readers announce them
+	function isDaySelected(date: Date): boolean {
+		const start = getStart();
+		if (start && areDatesEqual(date, start)) return true;
+		const end = $state.end ? ($unwrap($state.end) as Date) : undefined;
+		return !!end && areDatesEqual(date, end);
+	}
+
+	// The plain (unwrapped) start date, for comparisons
+	function getStart(): Date | undefined {
+		return $state.start ? ($unwrap($state.start) as Date) : undefined;
+	}
+
+	function displayText(): string {
+		const value = $state.value;
+		if (value?.start && value?.end) {
+			return `${formatDate($unwrap(value.start), getDateFormat())} – ${formatDate($unwrap(value.end), getDateFormat())}`;
+		}
+		return $props?.placeholder || "-";
+	}
+
+	function toggle() {
+		setVisible(!$state.visible);
+	}
+
+	function setVisible(visible: boolean) {
+		$state.visible = visible;
+		if (visible) {
+			// HACK: Because this may be shown with a click, we need to wait for
+			// another mousedown before we close on click. Otherwise the click
+			// immediately bubbles up to the document
+			closeOnClick = false;
+			addDocumentEvent("mousedown", handleDocumentMouseDown);
+			addDocumentEvent("click", handleDocumentClick);
+			focusCalendar();
+		} else {
+			removeDocumentEvent("mousedown", handleDocumentMouseDown);
+			removeDocumentEvent("click", handleDocumentClick);
+		}
+	}
+
+	function focusCalendar() {
+		// Wait for the popout to be shown before focusing it
+		setTimeout(() => {
+			const grid = content?.querySelector(".torp-calendar-grid");
+			if (grid instanceof HTMLElement && !getDisabled()) {
+				grid.focus();
+			}
+		});
+	}
+
+	function handleDay(date: Date) {
+		if (getDisabled()) return;
+
+		const start = getStart();
+		if (!isSelecting()) {
+			// Start a new range
+			$state.start = new Date(date);
+			$state.end = undefined;
+			$state.preview = undefined;
+		} else if (date < start!) {
+			// A date before the start begins a new range there
+			$state.start = new Date(date);
+			$state.preview = undefined;
+		} else {
+			// Complete the range
+			$state.end = new Date(date);
+			$state.preview = undefined;
+			complete();
+		}
+	}
+
+	function complete() {
+		$state.value = {
+			start: new Date($state.start!),
+			end: new Date($state.end!),
+		};
+		$props?.onchange?.($state.value);
+		form.handleInput();
+		setVisible(false);
+		focusTrigger();
+	}
+
+	function handleClose() {
+		setVisible(false);
+		focusTrigger();
+	}
+
+	function focusTrigger() {
+		const trigger = document.getElementById($state.triggerId);
+		if (trigger instanceof HTMLElement) {
+			trigger.focus();
+		}
+	}
+
+	function handleDocumentMouseDown() {
+		closeOnClick = true;
+	}
+
+	function handleDocumentClick(e: MouseEvent) {
+		if (closeOnClick && content && !content.contains(e.target as HTMLElement)) {
+			e.preventDefault();
+			setVisible(false);
+		}
+	}
+
+	function handleClick(e: MouseEvent) {
+		// Don't close when the trigger itself is clicked
+		e.stopPropagation();
+		toggle();
+	}
+
+	@render {
+		<div
+			{$props?.id}
+			class={[
+				"torp-date-range-picker",
+				getDisabled() ? "torp-date-range-picker-disabled" : undefined,
+				$props?.class,
+			]}
+			{$props?.style}
+		>
+			<button
+				type="button"
+				id={$state.triggerId}
+				class="torp-date-range-picker-trigger"
+				aria-haspopup="dialog"
+				aria-expanded={$state.visible ? "true" : "false"}
+				aria-controls={$state.visible ? $state.contentId : undefined}
+				aria-label={$props?.ariaLabel}
+				data-valid={form.valid ? "valid" : "invalid"}
+				aria-describedby={form.messageId}
+				aria-invalid={form.inField && !form.valid ? "true" : undefined}
+				onblur={() => form.handleBlur()}
+				disabled={getDisabled()}
+				onclick={handleClick}
+			>
+				{displayText()}
+			</button>
+
+			<div
+				id={$state.contentId}
+				class={["torp-date-range-picker-content", $state.visible ? undefined : "hidden"]}
+				aria-hidden={$state.visible ? undefined : "true"}
+				&ref={content}
+			>
+				<Calendar
+					selectable
+					value={$state.start}
+					isSelected={isDaySelected}
+					onchange={handleDay}
+					onclose={handleClose}
+				>
+					<CalendarHeader>
+						<CalendarHeaderTrigger type="previous" />
+						<DatePickerHeader class="torp-date-range-picker-header" />
+						<CalendarHeaderTrigger type="next" />
+					</CalendarHeader>
+					<CalendarGridHeader>
+						@for (let day of $slot.days) {
+							<CalendarDayHeader {day.dayName} {day.shortDayName} />
+						}
+					</CalendarGridHeader>
+					<CalendarGrid>
+						<DateRangePickerDay
+							date={$slot.day.date}
+							muted={$slot.day.muted}
+							active={$slot.day.active}
+						/>
+					</CalendarGrid>
+				</Calendar>
+			</div>
+		</div>
+
+		@if (form.name) {
+			<input
+				type="hidden"
+				name={`${form.name}-start`}
+				value={$state.value?.start ? formatDate($unwrap($state.value.start), "yyyy-MM-dd") : ""}
+			/>
+			<input
+				type="hidden"
+				name={`${form.name}-end`}
+				value={$state.value?.end ? formatDate($unwrap($state.value.end), "yyyy-MM-dd") : ""}
+			/>
+		}
+	}
+
+	@style {
+		/* Visibility only -- see SelectBoxContent */
+		.torp-date-range-picker-content.hidden {
+			display: none;
+		}
+	}
+}