@torpor/ui 0.3.7 → 1.0.0

package/dist/DateRangePicker/DateRangePickerDay.torp

@@ -0,0 +1,137 @@
+import { type ClassValue, type StyleValue } from "@torpor/view";
+import { areDatesEqual } from "../utils/dateUtils";
+import { type CalendarContext, CalendarContextName } from "../Calendar/CalendarTypes";
+import {
+	type DateRangePickerContext,
+	DateRangePickerContextName,
+} from "./DateRangePickerTypes";
+
+// TODO: Internationalization?? On the server and/or the client...
+const formatDate = (date: Date): string => {
+	return new Intl.DateTimeFormat("en-US", {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	}).format(date);
+};
+
+interface DateRangePickerDayProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The date to display */
+	date: Date;
+	/** Whether the date is muted (i.e. not in the currently displayed month) */
+	muted?: boolean;
+	/** Whether the date is the active (keyboard cursor) date */
+	active?: boolean;
+	/** An ARIA label for describing the day to screen readers */
+	ariaLabel?: string | undefined;
+}
+
+/**
+ * A day in a DateRangePicker's calendar, which highlights the start and end
+ * of the range being selected, the dates in between, and a preview of the
+ * range while the user hovers.
+ */
+export default function DateRangePickerDay($props: DateRangePickerDayProps | undefined) {
+	// Ensure the value is a reactive date -- assigning a plain date to
+	// watched props/state wraps it automatically
+	$props!.date = new Date($unwrap($props?.date ?? new Date()));
+	let reactiveDate = $props!.date;
+
+	// Get stuff out of the Calendar context
+	const calendarContext = $context[CalendarContextName] as CalendarContext;
+	if (!calendarContext) {
+		throw new Error("DateRangePickerDay must be contained within a Calendar");
+	}
+
+	// Get stuff out of the DateRangePicker context
+	const rangeContext = $context[DateRangePickerContextName] as DateRangePickerContext;
+	if (!rangeContext) {
+		throw new Error("DateRangePickerDay must be contained within a DateRangePicker");
+	}
+
+	// Register this day with the parent Calendar, which will handle setting
+	// the active (keyboard cursor) date
+	calendarContext.registerDay(reactiveDate, setActive);
+
+	// This function is called by the parent Calendar to set this item's active value
+	function setActive(value: boolean) {
+		$props!.active = value;
+	}
+
+	function isToday() {
+		const today = new Date();
+		return areDatesEqual($props!.date, today);
+	}
+
+	function isStart(): boolean {
+		const start = rangeContext.getStart();
+		return !!start && areDatesEqual($props!.date, start);
+	}
+
+	function isEnd(): boolean {
+		const end = rangeContext.getEnd();
+		return !!end && areDatesEqual($props!.date, end);
+	}
+
+	// The end of the preview range is the hovered date while a range is being
+	// selected, or the real end once it's complete
+	function getRangeEnd(): Date | undefined {
+		return rangeContext.getEnd() ?? rangeContext.getPreview();
+	}
+
+	function isInRange(): boolean {
+		const start = rangeContext.getStart();
+		const end = getRangeEnd();
+		if (!start || !end) return false;
+		if (areDatesEqual($props!.date, start) || areDatesEqual($props!.date, end)) return false;
+		return $props!.date > start && $props!.date < end;
+	}
+
+	function handleClick() {
+		calendarContext.handleDay(reactiveDate);
+	}
+
+	function handleEnter() {
+		rangeContext.setPreview(new Date($props!.date));
+	}
+
+	@render {
+		<button
+			{$props?.id}
+			class={buildClass()}
+			{$props?.style}
+			type="button"
+			tabindex="-1"
+			onclick={handleClick}
+			onmouseenter={handleEnter}
+			aria-label={$props?.ariaLabel ?? formatDate($props!.date)}
+			aria-current={isToday() ? "date" : undefined}
+			aria-disabled={$props?.muted ? "true" : undefined}
+			data-range={isStart() ? "start" : isEnd() ? "end" : isInRange() ? "inside" : undefined}
+		>
+			<slot>
+				{$props!.date.getDate()}
+			</slot>
+		</button>
+	}
+
+	function buildClass() {
+		return [
+			"torp-date-range-day",
+			$props?.class,
+			{
+				muted: $props?.muted,
+				today: isToday(),
+				active: $props?.active,
+				selected: isStart() || isEnd(),
+				"in-range": isInRange(),
+			},
+		];
+	}
+}

package/dist/DateRangePicker/DateRangePickerTypes.ts

@@ -0,0 +1,21 @@
+export const DateRangePickerContextName: unique symbol = Symbol.for("torp.DateRangePicker");
+
+export interface DateRange {
+	/** The first date in the range */
+	start: Date;
+	/** The last date in the range */
+	end: Date;
+}
+
+export interface DateRangePickerContext {
+	/** The first date in the range being selected, as a plain (unwrapped) date */
+	getStart: () => Date | undefined;
+	/** The last date in the range, once the range is complete, as a plain date */
+	getEnd: () => Date | undefined;
+	/** The hovered date extending the preview range, as a plain date */
+	getPreview: () => Date | undefined;
+	/** Whether the user has picked a start date but not an end date yet */
+	isSelecting: () => boolean;
+	/** Sets the hovered date that extends the range preview */
+	setPreview: (date: Date | undefined) => void;
+}

package/dist/DateRangePicker/index.d.ts

@@ -0,0 +1,76 @@
+import { type SlotRender } from "@torpor/view";
+
+
+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.
+ */
+declare function DateRangePicker(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: DateRangePickerProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface DateRangePickerDayProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The date to display */
+	date: Date;
+	/** Whether the date is muted (i.e. not in the currently displayed month) */
+	muted?: boolean;
+	/** Whether the date is the active (keyboard cursor) date */
+	active?: boolean;
+	/** An ARIA label for describing the day to screen readers */
+	ariaLabel?: string | undefined;
+}
+
+/**
+ * A day in a DateRangePicker's calendar, which highlights the start and end
+ * of the range being selected, the dates in between, and a preview of the
+ * range while the user hovers.
+ */
+declare function DateRangePickerDay(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: DateRangePickerDayProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { DateRangePicker, DateRangePickerDay };

package/dist/DateRangePicker/index.js

@@ -0,0 +1,3 @@
+import DateRangePicker from "./DateRangePicker.torp";
+import DateRangePickerDay from "./DateRangePickerDay.torp";
+export { DateRangePicker, DateRangePickerDay };

package/dist/Dialog/Dialog.torp

@@ -1,32 +1,35 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
+import { type TrapFocusOptions, trapFocus } from "../mount/trapFocus";
+import {
+	type HandleButtonPress,
+	type PopoutContext,
+	PopoutContextName,
+} from "../utils/PopoutTypes";
 import getId from "../utils/getId";
-import { trapFocus, type TrapFocusOptions } from "../mount/trapFocus";
-import { ModalContextName, type ModalContext } from "../Modal/ModalTypes";
-import { PopoverContextName } from "../Popover/PopoverTypes";
-import { DialogContextName, type DialogContext, type DialogState, type HandleButtonPress } from "./DialogTypes";
+import { type DialogContext, DialogContextName, type DialogState } from "./DialogTypes";
 
 interface DialogProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** An ARIA label for describing the popover to screen readers  */
-	ariaLabel?: string,
+	ariaLabel?: string;
 	/** Whether the dialog should alert the user via the screen reader */
-	alert?: boolean,
+	alert?: boolean;
 }
 
 /**
  * A dialog that can be used to show a message to the user, or get information from the user.
- * 
+ *
  * Dialogs are typically shown within a Modal or Popover.
- * 
+ *
  * See [the WAI ARIA guidelines for Dialogs](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
- * 
+ *
  * The structure of a Dialog is:
- * 
+ *
  * ```
  * <Dialog>
  * 	<ModalOverlay /> (optional -- will set `modal` to true)
@@ -37,7 +40,7 @@ interface DialogProps {
  * 	</DialogFooter>
  * </Dialog>
  * ```
- * 
+ *
  */
 export default function Dialog($props: DialogProps | undefined) {
 	let defaultId = getId();
@@ -45,23 +48,26 @@ export default function Dialog($props: DialogProps | undefined) {
 	//let div: HTMLDivElement;
 
 	let trapFocusOptions: TrapFocusOptions = {
-		focusableElements: []
+		focusableElements: [],
 	};
 
-	// Maybe get stuff out of a Modal context
+	// Maybe get stuff out of a popout context
 	let modal = false;
-	let visible = true;
 	let handleButton: HandleButtonPress | undefined = undefined;
-	const modalContext = $context[ModalContextName] ?? $context[PopoverContextName] as ModalContext;
-	if (modalContext) {
+	const popoutContext = $context[PopoutContextName] as PopoutContext;
+	if (popoutContext) {
 		modal = true;
-		visible = modalContext.state.visible;
-		handleButton = modalContext.handleButton;
+		handleButton = popoutContext.handleButton;
 
-		modalContext.handleClickOutside = handleClickOutside;
-		// Set the focusFirstElement method in the ModalContext so that it can be
+		popoutContext.handleClickOutside = handleClickOutside;
+		// Set the focusFirstElement method in the PopoutContext so that it can be
 		// called after everything has been shown
-		modalContext.focusFirstElement = focusFirstElement;
+		popoutContext.focusFirstElement = focusFirstElement;
+
+		// Set the content ID and role so that triggers can use them with
+		// aria-controls / aria-haspopup
+		popoutContext.state.contentId = $props?.id ?? defaultId;
+		popoutContext.state.contentRole = "dialog";
 	}
 
 	// Set the IDs for using in the Dialog's ARIA attributes
@@ -69,14 +75,13 @@ export default function Dialog($props: DialogProps | undefined) {
 		dialogId: $props?.id ?? defaultId,
 		headerId: "",
 		bodyId: "",
-		visible
-	})
+	});
 
 	// Set the context to pass down to items
 	let context: DialogContext = {
 		handleButton,
 		state: $state,
-		anchorElement: modalContext ? modalContext.anchorElement : undefined
+		anchorElement: popoutContext ? popoutContext.anchorElement : undefined,
 	};
 	$context[DialogContextName] = context;
 
@@ -86,18 +91,17 @@ export default function Dialog($props: DialogProps | undefined) {
 		}
 	}
 
-	function handleClickOutside(e: MouseEvent) {
+	function handleClickOutside(e: MouseEvent | KeyboardEvent) {
 		// Don't allow the user to click outside -- they must press a button or
 		// the Esc key
 		e.preventDefault();
 		if (!modal) {
-			modalContext.state.visible = false;
+			popoutContext.state.visible = false;
 		}
 	}
 
 	function handleKey(e: KeyboardEvent) {
 		switch (e.key) {
-			case "Esc":
 			case "Escape": {
 				if (context.cancelButton) {
 					context.cancelButton.click();
@@ -128,7 +132,6 @@ export default function Dialog($props: DialogProps | undefined) {
 			aria-describedby={$state.bodyId ? $state.bodyId : undefined}
 			onkeydown={handleKey}
 			onmount={(el) => trapFocus(el, trapFocusOptions)}
-			@//&ref={div}
 		>
 			<slot />
 		</div>

package/dist/Dialog/DialogBody.torp

@@ -1,16 +1,16 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
-import { DialogContextName, type DialogContext } from "./DialogTypes";
+import { type DialogContext, DialogContextName } from "./DialogTypes";
 
 interface DialogBodyProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether the body content will be announced by screen readers when the Dialog is opened */
-	ariaAnnounce?: boolean,
+	ariaAnnounce?: boolean;
 }
 
 /**
@@ -33,11 +33,7 @@ export default function DialogBody($props: DialogBodyProps | undefined) {
 	}
 
 	@render {
-		<div
-			id={$props?.id ?? defaultId} 
-			class={["torp-dialog-body", $props?.class]} 
-			{$props?.style}
-		>
+		<div id={$props?.id ?? defaultId} class={["torp-dialog-body", $props?.class]} {$props?.style}>
 			<slot />
 		</div>
 	}

package/dist/Dialog/DialogButton.torp

@@ -1,26 +1,28 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
-import { DialogContextName, type DialogContext } from "./DialogTypes";
+import { type DialogContext, DialogContextName } from "./DialogTypes";
 
 interface DialogButtonProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** The value that should be returned when this button is pressed and the Dialog was invoked by calling showContextual, showPrompt or showPopover */
-	value?: any,
+	value?: any;
 	/** "confirm" if the button should respond to the Enter key or "cancel" if the button should respond to the Escape key */
-	type?: "confirm" | "cancel",
+	type?: "confirm" | "cancel";
 	/** Whether this button is disabled */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when the button is clicked */
-	onclick?: (e: MouseEvent) => void,
+	onclick?: (e: MouseEvent) => void;
+	/** Raised when a key is pressed down */
+	onkeydown?: (e: KeyboardEvent) => void;
 }
 
 /**
  * A button that is placed in a DialogFooter and signals a response by a user.
- * 
+ *
  */
 export default function DialogButton($props: DialogButtonProps | undefined) {
 	let button: HTMLButtonElement;
@@ -32,7 +34,7 @@ export default function DialogButton($props: DialogButtonProps | undefined) {
 	}
 	const handleButton = context.handleButton;
 
-	$mount(() => {
+	$onmount(() => {
 		// Store the confirm or cancel button in the DialogContext
 		if ($props?.type === "confirm") {
 			context.confirmButton = button;
@@ -43,7 +45,7 @@ export default function DialogButton($props: DialogButtonProps | undefined) {
 
 	function handleClick(e: MouseEvent) {
 		if ($props?.onclick) {
-			$props?.onclick(e)
+			$props?.onclick(e);
 		}
 		if (handleButton) {
 			handleButton($props?.type, $props?.value);
@@ -56,8 +58,9 @@ export default function DialogButton($props: DialogButtonProps | undefined) {
 			{$props?.id}
 			class={["torp-dialog-button", $props?.class]}
 			{$props?.style}
-			disabled={$props?.disabled}
+			{$props?.disabled}
 			onclick={handleClick}
+			{$props?.onkeydown}
 			&ref={button}
 		>
 			<slot />

package/dist/Dialog/DialogFooter.torp

@@ -4,9 +4,9 @@ interface DialogFooterProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -14,11 +14,7 @@ interface DialogFooterProps {
  */
 export default function DialogFooter($props: DialogFooterProps | undefined) {
 	@render {
-		<div
-			{$props?.id}
-			class={["torp-dialog-footer", $props?.class]}
-			{$props?.style}
-		>
+		<div {$props?.id} class={["torp-dialog-footer", $props?.class]} {$props?.style}>
 			<slot />
 		</div>
 	}

package/dist/Dialog/DialogHeader.torp

@@ -1,22 +1,22 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
 import getId from "../utils/getId";
-import { DialogContextName, type DialogContext } from "./DialogTypes";
+import { type DialogContext, DialogContextName } from "./DialogTypes";
 
 interface DialogHeaderProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether the header will be announced by screen readers when the Dialog is opened */
-	ariaAnnounce?: boolean,
+	ariaAnnounce?: boolean;
 }
 
 /**
  * The header for a Dialog. Content in the header will be announced by screen
  * readers when the Dialog is opened, unless ariaAnnounce is false.
- * 
+ *
  */
 export default function DialogHeader($props: DialogHeaderProps | undefined) {
 	let defaultId = getId();
@@ -34,11 +34,7 @@ export default function DialogHeader($props: DialogHeaderProps | undefined) {
 	}
 
 	@render {
-		<div
-			id={$props?.id ?? defaultId}
-			class={["torp-dialog-footer", $props?.class]}
-			{$props?.style}
-		>
+		<div id={$props?.id ?? defaultId} class={["torp-dialog-footer", $props?.class]} {$props?.style}>
 			<slot />
 		</div>
 	}

package/dist/Dialog/DialogTypes.ts

@@ -1,6 +1,6 @@
-export const DialogContextName = "Dialog";
+import { type HandleButtonPress } from "../utils/PopoutTypes";
 
-export type HandleButtonPress = (type: "confirm" | "cancel" | undefined, value?: any) => void;
+export const DialogContextName: unique symbol = Symbol.for("torp.Dialog");
 
 export interface DialogContext {
 	handleButton?: HandleButtonPress;

package/dist/Dialog/index.d.ts

@@ -5,24 +5,24 @@ interface DialogProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** An ARIA label for describing the popover to screen readers  */
-	ariaLabel?: string,
+	ariaLabel?: string;
 	/** Whether the dialog should alert the user via the screen reader */
-	alert?: boolean,
+	alert?: boolean;
 }
 
 /**
  * A dialog that can be used to show a message to the user, or get information from the user.
- * 
+ *
  * Dialogs are typically shown within a Modal or Popover.
- * 
+ *
  * See [the WAI ARIA guidelines for Dialogs](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
- * 
+ *
  * The structure of a Dialog is:
- * 
+ *
  * ```
  * <Dialog>
  * 	<ModalOverlay /> (optional -- will set `modal` to true)
@@ -33,7 +33,7 @@ interface DialogProps {
  * 	</DialogFooter>
  * </Dialog>
  * ```
- * 
+ *
  */
 declare function Dialog(
 	$parent: ParentNode,
@@ -49,11 +49,11 @@ interface DialogBodyProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether the body content will be announced by screen readers when the Dialog is opened */
-	ariaAnnounce?: boolean,
+	ariaAnnounce?: boolean;
 }
 
 /**
@@ -74,22 +74,24 @@ interface DialogButtonProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** The value that should be returned when this button is pressed and the Dialog was invoked by calling showContextual, showPrompt or showPopover */
-	value?: any,
+	value?: any;
 	/** "confirm" if the button should respond to the Enter key or "cancel" if the button should respond to the Escape key */
-	type?: "confirm" | "cancel",
+	type?: "confirm" | "cancel";
 	/** Whether this button is disabled */
-	disabled?: boolean,
+	disabled?: boolean;
 	/** Raised when the button is clicked */
-	onclick?: (e: MouseEvent) => void,
+	onclick?: (e: MouseEvent) => void;
+	/** Raised when a key is pressed down */
+	onkeydown?: (e: KeyboardEvent) => void;
 }
 
 /**
  * A button that is placed in a DialogFooter and signals a response by a user.
- * 
+ *
  */
 declare function DialogButton(
 	$parent: ParentNode,
@@ -105,9 +107,9 @@ interface DialogFooterProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 }
 
 /**
@@ -127,17 +129,17 @@ interface DialogHeaderProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Classes for the root element */
-	class?: ClassValue,
+	class?: ClassValue;
 	/** Styles for the root element */
-	style?: StyleValue,
+	style?: StyleValue;
 	/** Whether the header will be announced by screen readers when the Dialog is opened */
-	ariaAnnounce?: boolean,
+	ariaAnnounce?: boolean;
 }
 
 /**
  * The header for a Dialog. Content in the header will be announced by screen
  * readers when the Dialog is opened, unless ariaAnnounce is false.
- * 
+ *
  */
 declare function DialogHeader(
 	$parent: ParentNode,
@@ -147,4 +149,4 @@ declare function DialogHeader(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { Dialog, DialogBody, DialogButton, DialogFooter, DialogHeader };
+export { Dialog, DialogBody, DialogButton, DialogFooter, DialogHeader };