@torpor/ui 1.0.1 → 1.1.0

package/dist/DatePicker/DatePickerTypes.ts

@@ -0,0 +1,36 @@
+export const DatePickerContextName: unique symbol = Symbol.for("torp.DatePicker");
+
+export interface DatePickerContext {
+	/** Whether the user cannot interact with the date picker */
+	getDisabled: () => boolean;
+	/** The ID of the trigger, for the content's aria-labelledby */
+	getTriggerId: () => string;
+	/** The ID of the content, for the trigger's aria-controls */
+	getContentId: () => string;
+	/** Whether the popout is visible */
+	isVisible: () => boolean;
+	/** Toggles the popout */
+	toggle: () => void;
+	/** The text displayed in the trigger */
+	getDisplayText: () => string;
+	/** An accessible name for the trigger */
+	getAriaLabel: () => string | undefined;
+	/** Whether the picker is contained within a Form Field */
+	inField: () => boolean;
+	/** Whether the picker's value is currently valid */
+	valid: () => boolean;
+	/** The ID of the Field's Message component, for aria-describedby */
+	messageId: () => string | undefined;
+	/** Called when the trigger loses focus */
+	handleBlur: () => void;
+	/** The selected date */
+	getValue: () => Date | undefined;
+	/** Selects a date, closing the popout */
+	selectDate: (date: Date) => void;
+	/** Closes the popout, returning focus to the trigger */
+	close: () => void;
+	/** Called from the content when it is added */
+	registerContent: (el: HTMLDivElement) => void;
+	/** Called from the content when it is removed */
+	unregisterContent: (el: HTMLDivElement) => void;
+}

package/dist/DatePicker/index.d.ts

@@ -28,7 +28,16 @@ interface DatePickerProps {
  * 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.
+ * selected date, with a selectable Calendar in a popout:
+ *
+ * ```
+ * <DatePicker>
+ * 	<DatePickerTrigger />
+ * 	<DatePickerContent />
+ * </DatePicker>
+ * ```
+ *
+ * With no children, the trigger and content are rendered automatically.
  */
 declare function DatePicker(
 	$parent: ParentNode,
@@ -40,6 +49,29 @@ declare function DatePicker(
 
 
 
+interface DatePickerContentProps {
+	/** An ID for the content element */
+	id?: string;
+	/** Classes for the content element */
+	class?: ClassValue;
+	/** Styles for the content element */
+	style?: StyleValue;
+}
+
+/**
+ * The popout of a DatePicker, containing the calendar the user selects a
+ * date from.
+ */
+declare function DatePickerContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: DatePickerContentProps | 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.
@@ -52,4 +84,31 @@ declare function DatePickerHeader(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { DatePicker, DatePickerHeader };
+
+
+interface DatePickerTriggerProps {
+	/** An ID for the trigger element */
+	id?: string;
+	/** Classes for the trigger element */
+	class?: ClassValue;
+	/** Styles for the trigger element */
+	style?: StyleValue;
+	/** An accessible name for the trigger; falls back to the picker's ariaLabel */
+	ariaLabel?: string;
+	/** If set to true, the user cannot interact with this trigger */
+	disabled?: boolean;
+}
+
+/**
+ * The button of a DatePicker that displays the selected date and opens the
+ * calendar popout.
+ */
+declare function DatePickerTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: DatePickerTriggerProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { DatePicker, DatePickerContent, DatePickerHeader, DatePickerTrigger };

package/dist/DatePicker/index.js

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

package/dist/DateRangePicker/DateRangePicker.torp

@@ -1,13 +1,4 @@
 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,
@@ -18,8 +9,15 @@ 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";
+import {
+	type DateRange,
+	type DateRangePickerContext,
+	DateRangePickerContextName,
+	type DateRangePickerShellContext,
+	DateRangePickerShellContextName,
+} from "./DateRangePickerTypes";
+import DateRangePickerContent from "./DateRangePickerContent.torp";
+import DateRangePickerTrigger from "./DateRangePickerTrigger.torp";
 
 interface DateRangePickerProps {
 	/** An ID for the root element */
@@ -51,12 +49,21 @@ interface DateRangePickerProps {
  * over.
  *
  * The structure of a DateRangePicker is a trigger button that displays the
- * selected range, with a selectable Calendar in a popout.
+ * selected range, with a selectable Calendar in a popout:
+ *
+ * ```
+ * <DateRangePicker>
+ * 	<DateRangePickerTrigger />
+ * 	<DateRangePickerContent />
+ * </DateRangePicker>
+ * ```
+ *
+ * With no children, the trigger and content are rendered automatically.
  */
 export default function DateRangePicker($props: DateRangePickerProps | undefined) {
 	let defaultId = getId();
 
-	let content: HTMLDivElement;
+	let content: HTMLDivElement | undefined;
 	let closeOnClick = false;
 
 	// Wire up the enclosing Form and Field, if any
@@ -139,6 +146,34 @@ export default function DateRangePicker($props: DateRangePickerProps | undefined
 		setVisible(!$state.visible);
 	}
 
+	// Set the context to pass down to the trigger and content
+	let shell: DateRangePickerShellContext = {
+		getDisabled,
+		getTriggerId: () => $state.triggerId,
+		getContentId: () => $state.contentId,
+		isVisible: () => $state.visible,
+		toggle,
+		getDisplayText: displayText,
+		getAriaLabel: () => $props?.ariaLabel,
+		inField: () => form.inField,
+		valid: () => form.valid,
+		messageId: () => form.messageId,
+		handleBlur: () => form.handleBlur(),
+		getStartValue: () => $state.start,
+		isDaySelected,
+		selectDay: handleDay,
+		close: handleClose,
+		registerContent: (el) => {
+			content = el;
+		},
+		unregisterContent: (el) => {
+			if (content === el) {
+				content = undefined;
+			}
+		},
+	};
+	$context[DateRangePickerShellContextName] = shell;
+
 	function setVisible(visible: boolean) {
 		$state.visible = visible;
 		if (visible) {
@@ -224,12 +259,6 @@ export default function DateRangePicker($props: DateRangePickerProps | undefined
 		}
 	}
 
-	function handleClick(e: MouseEvent) {
-		// Don't close when the trigger itself is clicked
-		e.stopPropagation();
-		toggle();
-	}
-
 	@render {
 		<div
 			{$props?.id}
@@ -240,56 +269,10 @@ export default function DateRangePicker($props: DateRangePickerProps | undefined
 			]}
 			{$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>
+			<slot>
+				<DateRangePickerTrigger />
+				<DateRangePickerContent />
+			</slot>
 		</div>
 
 		@if (form.name) {
@@ -305,11 +288,4 @@ export default function DateRangePicker($props: DateRangePickerProps | undefined
 			/>
 		}
 	}
-
-	@style {
-		/* Visibility only -- see SelectBoxContent */
-		.torp-date-range-picker-content.hidden {
-			display: none;
-		}
-	}
 }

package/dist/DateRangePicker/DateRangePickerContent.torp

@@ -0,0 +1,90 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import {
+	Calendar,
+	CalendarDayHeader,
+	CalendarGrid,
+	CalendarGridHeader,
+	CalendarHeader,
+	CalendarHeaderTrigger,
+} from "../Calendar/index";
+import DatePickerHeader from "../DatePicker/DatePickerHeader.torp";
+import DateRangePickerDay from "./DateRangePickerDay.torp";
+import {
+	type DateRangePickerShellContext,
+	DateRangePickerShellContextName,
+} from "./DateRangePickerTypes";
+
+interface DateRangePickerContentProps {
+	/** An ID for the content element */
+	id?: string;
+	/** Classes for the content element */
+	class?: ClassValue;
+	/** Styles for the content element */
+	style?: StyleValue;
+}
+
+/**
+ * The popout of a DateRangePicker, containing the calendar the user selects
+ * a range of dates from.
+ */
+export default function DateRangePickerContent($props: DateRangePickerContentProps | undefined) {
+	// Get stuff out of the DateRangePicker context
+	const context = $context[DateRangePickerShellContextName] as DateRangePickerShellContext;
+	if (!context) {
+		throw new Error("DateRangePickerContent must be contained within a DateRangePicker");
+	}
+
+	@render {
+		<div
+			id={$props?.id ?? context.getContentId()}
+			class={[
+				"torp-date-range-picker-content",
+				context.isVisible() ? undefined : "hidden",
+				$props?.class,
+			]}
+			{$props?.style}
+			aria-hidden={context.isVisible() ? undefined : "true"}
+			onmount={(el) => {
+				context.registerContent(el);
+				return () => {
+					context.unregisterContent(el);
+				};
+			}}
+		>
+			<slot>
+				<Calendar
+					selectable
+					value={context.getStartValue()}
+					isSelected={context.isDaySelected}
+					onchange={context.selectDay}
+					onclose={context.close}
+				>
+					<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>
+			</slot>
+		</div>
+	}
+
+	@style {
+		/* Visibility only -- see SelectBoxContent */
+		.torp-date-range-picker-content.hidden {
+			display: none;
+		}
+	}
+}

package/dist/DateRangePicker/DateRangePickerTrigger.torp

@@ -0,0 +1,59 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import {
+	type DateRangePickerShellContext,
+	DateRangePickerShellContextName,
+} from "./DateRangePickerTypes";
+
+interface DateRangePickerTriggerProps {
+	/** An ID for the trigger element */
+	id?: string;
+	/** Classes for the trigger element */
+	class?: ClassValue;
+	/** Styles for the trigger element */
+	style?: StyleValue;
+	/** An accessible name for the trigger; falls back to the picker's ariaLabel */
+	ariaLabel?: string;
+	/** If set to true, the user cannot interact with this trigger */
+	disabled?: boolean;
+}
+
+/**
+ * The button of a DateRangePicker that displays the selected range and
+ * opens the calendar popout.
+ */
+export default function DateRangePickerTrigger($props: DateRangePickerTriggerProps | undefined) {
+	// Get stuff out of the DateRangePicker context
+	const context = $context[DateRangePickerShellContextName] as DateRangePickerShellContext;
+	if (!context) {
+		throw new Error("DateRangePickerTrigger must be contained within a DateRangePicker");
+	}
+
+	function getDisabled(): boolean {
+		return $props?.disabled === true || context.getDisabled();
+	}
+
+	@render {
+		<button
+			type="button"
+			id={$props?.id ?? context.getTriggerId()}
+			class={["torp-date-range-picker-trigger", $props?.class]}
+			{$props?.style}
+			aria-haspopup="dialog"
+			aria-expanded={context.isVisible() ? "true" : "false"}
+			aria-controls={context.isVisible() ? context.getContentId() : undefined}
+			aria-label={$props?.ariaLabel ?? context.getAriaLabel()}
+			data-valid={context.valid() ? "valid" : "invalid"}
+			aria-describedby={context.messageId()}
+			aria-invalid={context.inField() && !context.valid() ? "true" : undefined}
+			onblur={() => context.handleBlur()}
+			disabled={getDisabled()}
+			onclick={(e: MouseEvent) => {
+				// Don't close when the trigger itself is clicked
+				e.stopPropagation();
+				context.toggle();
+			}}
+		>
+			<slot>{context.getDisplayText()}</slot>
+		</button>
+	}
+}

package/dist/DateRangePicker/DateRangePickerTypes.ts

@@ -19,3 +19,44 @@ export interface DateRangePickerContext {
 	/** Sets the hovered date that extends the range preview */
 	setPreview: (date: Date | undefined) => void;
 }
+
+export const DateRangePickerShellContextName: unique symbol = Symbol.for(
+	"torp.DateRangePickerShell",
+);
+
+export interface DateRangePickerShellContext {
+	/** Whether the user cannot interact with the date range picker */
+	getDisabled: () => boolean;
+	/** The ID of the trigger, for the content's aria-labelledby */
+	getTriggerId: () => string;
+	/** The ID of the content, for the trigger's aria-controls */
+	getContentId: () => string;
+	/** Whether the popout is visible */
+	isVisible: () => boolean;
+	/** Toggles the popout */
+	toggle: () => void;
+	/** The text displayed in the trigger */
+	getDisplayText: () => string;
+	/** An accessible name for the trigger */
+	getAriaLabel: () => string | undefined;
+	/** Whether the picker is contained within a Form Field */
+	inField: () => boolean;
+	/** Whether the picker's value is currently valid */
+	valid: () => boolean;
+	/** The ID of the Field's Message component, for aria-describedby */
+	messageId: () => string | undefined;
+	/** Called when the trigger loses focus */
+	handleBlur: () => void;
+	/** The start of the range being selected */
+	getStartValue: () => Date | undefined;
+	/** Whether a day is one of the range's endpoints, for aria-selected */
+	isDaySelected: (date: Date) => boolean;
+	/** Handles a day being picked, completing the range on the second pick */
+	selectDay: (date: Date) => void;
+	/** Closes the popout, returning focus to the trigger */
+	close: () => void;
+	/** Called from the content when it is added */
+	registerContent: (el: HTMLDivElement) => void;
+	/** Called from the content when it is removed */
+	unregisterContent: (el: HTMLDivElement) => void;
+}

package/dist/DateRangePicker/index.d.ts

@@ -31,7 +31,16 @@ interface DateRangePickerProps {
  * over.
  *
  * The structure of a DateRangePicker is a trigger button that displays the
- * selected range, with a selectable Calendar in a popout.
+ * selected range, with a selectable Calendar in a popout:
+ *
+ * ```
+ * <DateRangePicker>
+ * 	<DateRangePickerTrigger />
+ * 	<DateRangePickerContent />
+ * </DateRangePicker>
+ * ```
+ *
+ * With no children, the trigger and content are rendered automatically.
  */
 declare function DateRangePicker(
 	$parent: ParentNode,
@@ -43,6 +52,29 @@ declare function DateRangePicker(
 
 
 
+interface DateRangePickerContentProps {
+	/** An ID for the content element */
+	id?: string;
+	/** Classes for the content element */
+	class?: ClassValue;
+	/** Styles for the content element */
+	style?: StyleValue;
+}
+
+/**
+ * The popout of a DateRangePicker, containing the calendar the user selects
+ * a range of dates from.
+ */
+declare function DateRangePickerContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: DateRangePickerContentProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
 interface DateRangePickerDayProps {
 	/** An ID for the root element */
 	id?: string;
@@ -73,4 +105,31 @@ declare function DateRangePickerDay(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { DateRangePicker, DateRangePickerDay };
+
+
+interface DateRangePickerTriggerProps {
+	/** An ID for the trigger element */
+	id?: string;
+	/** Classes for the trigger element */
+	class?: ClassValue;
+	/** Styles for the trigger element */
+	style?: StyleValue;
+	/** An accessible name for the trigger; falls back to the picker's ariaLabel */
+	ariaLabel?: string;
+	/** If set to true, the user cannot interact with this trigger */
+	disabled?: boolean;
+}
+
+/**
+ * The button of a DateRangePicker that displays the selected range and
+ * opens the calendar popout.
+ */
+declare function DateRangePickerTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: DateRangePickerTriggerProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { DateRangePicker, DateRangePickerContent, DateRangePickerDay, DateRangePickerTrigger };

package/dist/DateRangePicker/index.js

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

package/dist/Progress/Progress.torp

@@ -1,4 +1,6 @@
 import type { ClassValue, StyleValue } from "@torpor/view";
+import { type ProgressContext, ProgressContextName } from "./ProgressTypes";
+import ProgressIndicator from "./ProgressIndicator.torp";
 
 interface ProgressProps {
 	/** An ID for the root element */
@@ -24,6 +26,16 @@ interface ProgressProps {
  * specific value or as indeterminate when the extent is unknown.
  *
  * See [the WAI ARIA guidelines for Progress Bars](https://www.w3.org/WAI/ARIA/apg/patterns/progressbar/).
+ *
+ * The structure of a Progress is:
+ *
+ * ```
+ * <Progress>
+ * 	<ProgressIndicator />
+ * </Progress>
+ * ```
+ *
+ * With no children, the indicator is rendered automatically.
  */
 export default function Progress($props: ProgressProps | undefined) {
 	function getMin(): number {
@@ -49,6 +61,13 @@ export default function Progress($props: ProgressProps | undefined) {
 		return ((getValue() - min) / (max - min)) * 100;
 	}
 
+	// Set the context to pass down to the indicator
+	let context: ProgressContext = {
+		isIndeterminate,
+		getPct,
+	};
+	$context[ProgressContextName] = context;
+
 	@render {
 		<div
 			{$props?.id}
@@ -62,27 +81,18 @@ export default function Progress($props: ProgressProps | undefined) {
 			aria-valuetext={$props?.valuetext}
 			data-state={isIndeterminate() ? "indeterminate" : "determinate"}
 		>
-			<div
-				class="torp-progress-bar"
-				data-state={isIndeterminate() ? "indeterminate" : "determinate"}
-				style={isIndeterminate() ? undefined : `width: ${getPct()}%;`}
-			/>
+			<slot>
+				<ProgressIndicator />
+			</slot>
 		</div>
 	}
 
 	@style {
-		/* Headless: layout only, so the bar fills the track proportionally.
-		   All appearance is up to the consuming theme */
+		/* Headless: layout only, so the indicator fills the track. All
+		   appearance is up to the consuming theme */
 		.torp-progress {
 			position: relative;
 			overflow: hidden;
 		}
-		.torp-progress-bar {
-			position: absolute;
-			inset: 0 auto 0 0;
-		}
-		.torp-progress-bar[data-state="indeterminate"] {
-			width: 100%;
-		}
 	}
 }