@torpor/ui 1.0.1 → 1.1.0

package/dist/CommandPalette/index.d.ts

@@ -32,7 +32,16 @@ interface CommandPaletteProps {
  * shortcut or programmatically.
  *
  * The structure of a CommandPalette is a Modal containing a search input and
- * a filtered list of commands.
+ * a filtered list of commands:
+ *
+ * ```
+ * <CommandPalette>
+ * 	<CommandPaletteInput />
+ * 	<CommandPaletteList />
+ * </CommandPalette>
+ * ```
+ *
+ * With no children, the input and list are rendered automatically.
  */
 declare function CommandPalette(
 	$parent: ParentNode,
@@ -42,4 +51,81 @@ declare function CommandPalette(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { CommandPalette };
+
+
+interface CommandPaletteInputProps {
+	/** An ID for the input element */
+	id?: string;
+	/** Classes for the input element */
+	class?: ClassValue;
+	/** Styles for the input element */
+	style?: StyleValue;
+	/** Text to display in the input when it is empty; falls back to the palette's placeholder */
+	placeholder?: string;
+	/** An accessible name for the input; falls back to the palette's ariaLabel */
+	ariaLabel?: string;
+}
+
+/**
+ * The search input of a CommandPalette, filtering the commands as the user
+ * types.
+ */
+declare function CommandPaletteInput(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: CommandPaletteInputProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface CommandPaletteItemProps {
+	/** An ID for the item element */
+	id?: string;
+	/** Classes for the item element */
+	class?: ClassValue;
+	/** Styles for the item element */
+	style?: StyleValue;
+	/** The item's position in the list */
+	index: number;
+	/** The command that choosing this item runs */
+	command: Command;
+}
+
+/**
+ * One command of a CommandPalette, showing its label and shortcut hint.
+ * Choosing it runs the command and closes the palette.
+ */
+declare function CommandPaletteItem(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: CommandPaletteItemProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface CommandPaletteListProps {
+	/** An ID for the list element */
+	id?: string;
+	/** Classes for the list element */
+	class?: ClassValue;
+	/** Styles for the list element */
+	style?: StyleValue;
+}
+
+/**
+ * The list of a CommandPalette, showing the commands that match the current
+ * search text (or a message when none match).
+ */
+declare function CommandPaletteList(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: CommandPaletteListProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { CommandPalette, CommandPaletteInput, CommandPaletteItem, CommandPaletteList };

package/dist/CommandPalette/index.js

@@ -1,2 +1,5 @@
 import CommandPalette from "./CommandPalette.torp";
-export { CommandPalette };
+import CommandPaletteInput from "./CommandPaletteInput.torp";
+import CommandPaletteItem from "./CommandPaletteItem.torp";
+import CommandPaletteList from "./CommandPaletteList.torp";
+export { CommandPalette, CommandPaletteInput, CommandPaletteItem, CommandPaletteList };

package/dist/DataGrid/DataGrid.torp

@@ -1,5 +1,7 @@
 import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
-import { type DataColumn } from "./DataGridTypes";
+import { type DataColumn, type DataGridContext, DataGridContextName } from "./DataGridTypes";
+import DataGridCell from "./DataGridCell.torp";
+import DataGridColumnHeader from "./DataGridColumnHeader.torp";
 import type {
 	LoadRequest,
 	LoadResult,
@@ -63,7 +65,8 @@ interface DataGridProps {
  *
  * See [the WAI-ARIA guidelines for grids](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).
  *
- * The structure of a DataGrid is:
+ * The structure of a DataGrid is a table of DataGridColumnHeaders and
+ * DataGridCells, rendered automatically from the columns and rows:
  *
  * ```
  * <DataGrid columns={columns} data={rows}>
@@ -386,6 +389,17 @@ export default function DataGrid($props: DataGridProps) {
 		return `max-height:${getViewportHeight()}px;overflow:auto;`;
 	}
 
+	// Set the context to pass down to the headers and cells
+	let context: DataGridContext = {
+		toggleSort,
+		getAriaSort: ariaSort,
+		getAlignClass: alignClass,
+		getCellValue: cellValue,
+		isActiveCell,
+		getCellId: cellId,
+	};
+	$context[DataGridContextName] = context;
+
 	@render {
 		@try {
 			@await {
@@ -418,20 +432,7 @@ export default function DataGrid($props: DataGridProps) {
 						<tr role="row">
 							@for (let entry of columnEntries) {
 								@key = entry.column.key
-								<th
-									scope="col"
-									role="columnheader"
-									class={[alignClass(entry.column.align), entry.column.sortable ? "torp-data-grid-sortable" : undefined]}
-									aria-sort={ariaSort(entry.column.key)}
-								>
-									@if (entry.column.sortable) {
-										<button type="button" onclick={() => toggleSort(entry.column)}>
-											{entry.column.label ?? entry.column.key}
-										</button>
-									} else {
-										<span>{entry.column.label ?? entry.column.key}</span>
-									}
-								</th>
+								<DataGridColumnHeader column={entry.column} />
 							}
 						</tr>
 					</thead>
@@ -453,11 +454,10 @@ export default function DataGrid($props: DataGridProps) {
 								<tr role="row">
 									@for (let entry of columnEntries) {
 										@key = entry.column.key
-										<td
-											role="gridcell"
-											class={alignClass(entry.column.align)}
-											data-cell={cellId(rowEntry.index, entry.index)}
-											tabindex={isActiveCell(rowEntry.index, entry.index) ? 0 : -1}
+										<DataGridCell
+											column={entry.column}
+											rowIndex={rowEntry.index}
+											colIndex={entry.index}
 										>
 											<slot
 												row={rowEntry.row}
@@ -466,7 +466,7 @@ export default function DataGrid($props: DataGridProps) {
 											>
 												{cellValue(rowEntry.row, entry.column)}
 											</slot>
-										</td>
+										</DataGridCell>
 									}
 								</tr>
 							}

package/dist/DataGrid/DataGridCell.torp

@@ -0,0 +1,50 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { type DataColumn, type DataGridContext, DataGridContextName } from "./DataGridTypes";
+
+interface DataGridCellProps {
+	/** An ID for the cell element */
+	id?: string;
+	/** Classes for the cell element */
+	class?: ClassValue;
+	/** Styles for the cell element */
+	style?: StyleValue;
+	/** The column this cell is in (for alignment) */
+	column?: DataColumn;
+	/** The cell's row position */
+	rowIndex: number;
+	/** The cell's column position */
+	colIndex: number;
+}
+
+/**
+ * One cell of a DataGrid's body, carrying the roving tabindex for keyboard
+ * navigation. Cell content goes in the default slot.
+ */
+export default function DataGridCell($props: DataGridCellProps | undefined) {
+	// Get stuff out of the DataGrid context
+	const context = $context[DataGridContextName] as DataGridContext;
+	if (!context) {
+		throw new Error("DataGridCell must be contained within a DataGrid");
+	}
+
+	function getRowIndex(): number {
+		return $props?.rowIndex ?? 0;
+	}
+
+	function getColIndex(): number {
+		return $props?.colIndex ?? 0;
+	}
+
+	@render {
+		<td
+			{$props?.id}
+			role="gridcell"
+			class={[context.getAlignClass($props?.column?.align), $props?.class]}
+			{$props?.style}
+			data-cell={context.getCellId(getRowIndex(), getColIndex())}
+			tabindex={context.isActiveCell(getRowIndex(), getColIndex()) ? 0 : -1}
+		>
+			<slot />
+		</td>
+	}
+}

package/dist/DataGrid/DataGridColumnHeader.torp

@@ -0,0 +1,54 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { type DataColumn, type DataGridContext, DataGridContextName } from "./DataGridTypes";
+
+interface DataGridColumnHeaderProps {
+	/** An ID for the header element */
+	id?: string;
+	/** Classes for the header element */
+	class?: ClassValue;
+	/** Styles for the header element */
+	style?: StyleValue;
+	/** The column this header is for */
+	column: DataColumn;
+}
+
+/**
+ * One column header of a DataGrid, showing the column's label -- in a
+ * button that sorts by the column when it is sortable.
+ */
+export default function DataGridColumnHeader($props: DataGridColumnHeaderProps | undefined) {
+	// Get stuff out of the DataGrid context
+	const context = $context[DataGridContextName] as DataGridContext;
+	if (!context) {
+		throw new Error("DataGridColumnHeader must be contained within a DataGrid");
+	}
+
+	function getColumn(): DataColumn {
+		return $props?.column ?? { key: "" };
+	}
+
+	@render {
+		<th
+			{$props?.id}
+			scope="col"
+			role="columnheader"
+			class={[
+				context.getAlignClass(getColumn().align),
+				getColumn().sortable ? "torp-data-grid-sortable" : undefined,
+				$props?.class,
+			]}
+			{$props?.style}
+			aria-sort={context.getAriaSort(getColumn().key)}
+		>
+			<slot>
+				@if (getColumn().sortable) {
+					<button type="button" onclick={() => context.toggleSort(getColumn())}>
+						{getColumn().label ?? getColumn().key}
+					</button>
+				} else {
+					<span>{getColumn().label ?? getColumn().key}</span>
+				}
+			</slot>
+		</th>
+	}
+}

package/dist/DataGrid/DataGridTypes.ts

@@ -23,3 +23,20 @@ export interface DataGridCellSlot<T = any> {
 
 /** Data passed to the `onload` callback after each successful load */
 export type DataGridLoadEvent<T = any> = LoadResult<T>;
+
+export const DataGridContextName: unique symbol = Symbol.for("torp.DataGrid");
+
+export interface DataGridContext {
+	/** Sorts by a column, toggling the direction when already sorted by it */
+	toggleSort: (column: DataColumn) => void;
+	/** The aria-sort value for a column header */
+	getAriaSort: (key: string) => "ascending" | "descending" | undefined;
+	/** The alignment class for a column */
+	getAlignClass: (align: "start" | "center" | "end" | undefined) => string | undefined;
+	/** Extracts a cell's value from its row */
+	getCellValue: (row: any, column: DataColumn) => any;
+	/** Whether a cell is the single tab stop (roving tabindex) */
+	isActiveCell: (row: number, col: number) => boolean;
+	/** The data-cell ID for a cell */
+	getCellId: (row: number, col: number) => string;
+}

package/dist/DataGrid/index.d.ts

@@ -55,7 +55,8 @@ interface DataGridProps {
  *
  * See [the WAI-ARIA guidelines for grids](https://www.w3.org/WAI/ARIA/apg/patterns/grid/).
  *
- * The structure of a DataGrid is:
+ * The structure of a DataGrid is a table of DataGridColumnHeaders and
+ * DataGridCells, rendered automatically from the columns and rows:
  *
  * ```
  * <DataGrid columns={columns} data={rows}>
@@ -87,4 +88,58 @@ declare function DataGrid(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { DataGrid };
+
+
+interface DataGridCellProps {
+	/** An ID for the cell element */
+	id?: string;
+	/** Classes for the cell element */
+	class?: ClassValue;
+	/** Styles for the cell element */
+	style?: StyleValue;
+	/** The column this cell is in (for alignment) */
+	column?: DataColumn;
+	/** The cell's row position */
+	rowIndex: number;
+	/** The cell's column position */
+	colIndex: number;
+}
+
+/**
+ * One cell of a DataGrid's body, carrying the roving tabindex for keyboard
+ * navigation. Cell content goes in the default slot.
+ */
+declare function DataGridCell(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: DataGridCellProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface DataGridColumnHeaderProps {
+	/** An ID for the header element */
+	id?: string;
+	/** Classes for the header element */
+	class?: ClassValue;
+	/** Styles for the header element */
+	style?: StyleValue;
+	/** The column this header is for */
+	column: DataColumn;
+}
+
+/**
+ * One column header of a DataGrid, showing the column's label -- in a
+ * button that sorts by the column when it is sortable.
+ */
+declare function DataGridColumnHeader(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: DataGridColumnHeaderProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { DataGrid, DataGridCell, DataGridColumnHeader };

package/dist/DataGrid/index.js

@@ -1,3 +1,4 @@
-import { n as normalizeLoadResult } from "../loader-DEeG5vFY.js";
 import DataGrid from "./DataGrid.torp";
-export { DataGrid, normalizeLoadResult };
+import DataGridCell from "./DataGridCell.torp";
+import DataGridColumnHeader from "./DataGridColumnHeader.torp";
+export { DataGrid, DataGridCell, DataGridColumnHeader };

package/dist/DatePicker/DatePicker.torp

@@ -1,13 +1,4 @@
 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,
@@ -18,7 +9,9 @@ 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";
+import DatePickerContent from "./DatePickerContent.torp";
+import DatePickerTrigger from "./DatePickerTrigger.torp";
+import { type DatePickerContext, DatePickerContextName } from "./DatePickerTypes";
 
 interface DatePickerProps {
 	/** An ID for the root element */
@@ -47,12 +40,21 @@ 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.
  */
 export default function DatePicker($props: DatePickerProps | undefined) {
 	let defaultId = getId();
 
-	let content: HTMLDivElement;
+	let content: HTMLDivElement | undefined;
 	let closeOnClick = false;
 
 	// Wire up the enclosing Form and Field, if any
@@ -97,6 +99,33 @@ export default function DatePicker($props: DatePickerProps | undefined) {
 		setVisible(!$state.visible);
 	}
 
+	// Set the context to pass down to the trigger and content
+	let context: DatePickerContext = {
+		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(),
+		getValue: () => $state.value,
+		selectDate: handleDate,
+		close: handleClose,
+		registerContent: (el) => {
+			content = el;
+		},
+		unregisterContent: (el) => {
+			if (content === el) {
+				content = undefined;
+			}
+		},
+	};
+	$context[DatePickerContextName] = context;
+
 	function setVisible(visible: boolean) {
 		$state.visible = visible;
 		if (visible) {
@@ -154,69 +183,20 @@ export default function DatePicker($props: DatePickerProps | undefined) {
 		}
 	}
 
-	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>
+			<slot>
+				<DatePickerTrigger />
+				<DatePickerContent />
+			</slot>
 		</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/DatePickerContent.torp

@@ -0,0 +1,82 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import {
+	Calendar,
+	CalendarDay,
+	CalendarDayHeader,
+	CalendarGrid,
+	CalendarGridHeader,
+	CalendarHeader,
+	CalendarHeaderTrigger,
+} from "../Calendar/index";
+import { type DatePickerContext, DatePickerContextName } from "./DatePickerTypes";
+import DatePickerHeader from "./DatePickerHeader.torp";
+
+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.
+ */
+export default function DatePickerContent($props: DatePickerContentProps | undefined) {
+	// Get stuff out of the DatePicker context
+	const context = $context[DatePickerContextName] as DatePickerContext;
+	if (!context) {
+		throw new Error("DatePickerContent must be contained within a DatePicker");
+	}
+
+	@render {
+		<div
+			id={$props?.id ?? context.getContentId()}
+			class={[
+				"torp-date-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.getValue()}
+					onchange={context.selectDate}
+					onclose={context.close}
+				>
+					<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>
+			</slot>
+		</div>
+	}
+
+	@style {
+		/* Visibility only -- see SelectBoxContent */
+		.torp-date-picker-content.hidden {
+			display: none;
+		}
+	}
+}

package/dist/DatePicker/DatePickerTrigger.torp

@@ -0,0 +1,56 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { type DatePickerContext, DatePickerContextName } from "./DatePickerTypes";
+
+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.
+ */
+export default function DatePickerTrigger($props: DatePickerTriggerProps | undefined) {
+	// Get stuff out of the DatePicker context
+	const context = $context[DatePickerContextName] as DatePickerContext;
+	if (!context) {
+		throw new Error("DatePickerTrigger must be contained within a DatePicker");
+	}
+
+	function getDisabled(): boolean {
+		return $props?.disabled === true || context.getDisabled();
+	}
+
+	@render {
+		<button
+			type="button"
+			id={$props?.id ?? context.getTriggerId()}
+			class={["torp-date-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>
+	}
+}