@torpor/ui 1.0.1 → 1.1.0

package/dist/ColorPicker/ColorPicker.torp

@@ -6,9 +6,11 @@ import {
 	FormContextName,
 } from "../Form/FormTypes";
 import FormValues from "../Form/FormValues.torp";
-import { defaultPalette, parseHex } from "../utils/colorUtils";
+import { defaultPalette } from "../utils/colorUtils";
 import createFormField from "../utils/formField";
 import ColorPalette from "./ColorPalette.torp";
+import ColorPickerInput from "./ColorPickerInput.torp";
+import { type ColorPickerContext, ColorPickerContextName } from "./ColorPickerTypes";
 
 interface ColorPickerProps {
 	/** An ID for the root element */
@@ -43,10 +45,19 @@ interface ColorPickerProps {
  * ```
  * <ColorPicker name="accent" showInput &value={$state.accent} />
  * ```
+ *
+ * The structure of a ColorPicker is:
+ *
+ * ```
+ * <ColorPicker>
+ * 	<ColorPalette />
+ * 	<ColorPickerInput />
+ * </ColorPicker>
+ * ```
+ *
+ * With no children, the palette and input are rendered automatically.
  */
 export default function ColorPicker($props: ColorPickerProps | undefined) {
-	let hexInput: HTMLInputElement;
-
 	// Wire up the enclosing Form and Field, if any
 	const form = createFormField(
 		$props?.name,
@@ -60,96 +71,46 @@ export default function ColorPicker($props: ColorPickerProps | undefined) {
 
 	let $state = $watch({
 		value: undefined as string | undefined,
-
-		// Text while the hex input is being typed into; committed on blur or
-		// Enter, invalid text reverting like NumberInput
-		text: "",
-		editing: false,
 	});
 
 	$bind($state, $props, "value");
 
-	function handleSelect(value: string | undefined) {
-		$state.text = value ?? "";
-		form.handleInput();
-		$props?.onchange?.(value);
-	}
-
-	function commit() {
-		$state.editing = false;
-		const next = parseHex($state.text);
-		if ($state.text.trim() !== "" && !next) {
-			// Not a color: revert to the last committed value
-			$state.text = $state.value ?? "";
-			return;
-		}
+	function commitValue(next: string | undefined) {
 		if (next !== $state.value) {
 			$state.value = next;
 			form.handleInput();
 			$props?.onchange?.(next);
 		}
-		$state.text = $state.value ?? "";
 	}
 
-	function handleInput(e: Event) {
-		const el = e.currentTarget as HTMLInputElement;
-		$state.editing = true;
-		$state.text = el.value;
-	}
-
-	function handleKey(e: KeyboardEvent) {
-		if (e.key === "Enter") {
-			e.preventDefault();
-			commit();
-		}
-	}
-
-	function handleChange() {
-		commit();
+	function handleSelect(value: string | undefined) {
+		commitValue(value);
 	}
 
-	// Keep the input's value in sync with the text; typing sets the
-	// property directly, so an attribute alone would not update it
-	function syncInput() {
-		if (hexInput && !$state.editing && hexInput.value !== $state.text) {
-			hexInput.value = $state.text;
-		}
-	}
-	$run(() => {
-		const text = $state.text;
-		const editing = $state.editing;
-		if (hexInput && !editing && hexInput.value !== text) {
-			hexInput.value = text;
-		}
-	});
-	$onmount(() => syncInput());
+	// Set the context to pass down to the input
+	let context: ColorPickerContext = {
+		getDisabled,
+		getValue: () => $state.value,
+		getAriaLabel: () => $props?.ariaLabel,
+		commitValue,
+	};
+	$context[ColorPickerContextName] = context;
 
 	@render {
 		<div class={["torp-color-picker", $props?.class]} {$props?.style}>
-			<ColorPalette
-				class="torp-color-picker-palette"
-				colors={$props?.colors ?? defaultPalette}
-				value={$state.value}
-				disabled={getDisabled()}
-				ariaLabel={$props?.ariaLabel}
-				onchange={handleSelect}
-			/>
-			@if ($props?.showInput) {
-				<input
-					&ref={hexInput}
-					type="text"
-					class="torp-color-picker-input"
-					spellcheck="false"
-					placeholder="#rrggbb"
-					aria-label={$props?.ariaLabel ? `${$props.ariaLabel} hex value` : "Hex value"}
-					value={$state.editing ? $state.text : $state.value ?? ""}
+			<slot>
+				<ColorPalette
+					class="torp-color-picker-palette"
+					colors={$props?.colors ?? defaultPalette}
+					value={$state.value}
 					disabled={getDisabled()}
-					oninput={handleInput}
-					onchange={handleChange}
-					onblur={handleChange}
-					onkeydown={handleKey}
+					ariaLabel={$props?.ariaLabel}
+					onchange={handleSelect}
 				/>
-			}
+				@if ($props?.showInput) {
+					<ColorPickerInput />
+				}
+			</slot>
 		</div>
 
 		<FormValues name={form.name} value={$state.value} />

package/dist/ColorPicker/ColorPickerInput.torp

@@ -0,0 +1,122 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { parseHex } from "../utils/colorUtils";
+import { type ColorPickerContext, ColorPickerContextName } from "./ColorPickerTypes";
+
+interface ColorPickerInputProps {
+	/** An ID for the input element */
+	id?: string;
+	/** Classes for the input element */
+	class?: ClassValue;
+	/** Styles for the input element */
+	style?: StyleValue;
+	/** An accessible name for the input; falls back to the picker's ariaLabel */
+	ariaLabel?: string;
+	/** If set to true, the user cannot interact with this input */
+	disabled?: boolean;
+}
+
+/**
+ * The hex text field of a ColorPicker, for entering arbitrary colors as
+ * "#rrggbb". Values commit on blur or Enter, invalid text reverting like
+ * NumberInput.
+ */
+export default function ColorPickerInput($props: ColorPickerInputProps | undefined) {
+	let hexInput: HTMLInputElement | undefined;
+
+	// Get stuff out of the ColorPicker context
+	const context = $context[ColorPickerContextName] as ColorPickerContext;
+	if (!context) {
+		throw new Error("ColorPickerInput must be contained within a ColorPicker");
+	}
+
+	function getDisabled(): boolean {
+		return $props?.disabled === true || context.getDisabled();
+	}
+
+	function label(): string {
+		const base = $props?.ariaLabel ?? context.getAriaLabel();
+		return base ? `${base} hex value` : "Hex value";
+	}
+
+	let $state = $watch({
+		// Text while the hex input is being typed into; committed on blur or
+		// Enter, invalid text reverting like NumberInput
+		text: "",
+		editing: false,
+	});
+
+	function display(): string {
+		return $state.editing ? $state.text : context.getValue() ?? "";
+	}
+
+	function commit() {
+		$state.editing = false;
+		const next = parseHex($state.text);
+		if ($state.text.trim() !== "" && !next) {
+			// Not a color: revert to the last committed value
+			$state.text = context.getValue() ?? "";
+			return;
+		}
+		context.commitValue(next);
+		$state.text = context.getValue() ?? "";
+	}
+
+	function handleInput(e: Event) {
+		const el = e.currentTarget as HTMLInputElement;
+		$state.editing = true;
+		$state.text = el.value;
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			commit();
+		}
+	}
+
+	function handleChange() {
+		commit();
+	}
+
+	// Keep the input's value in sync with the text; typing sets the
+	// property directly, so an attribute alone would not update it
+	function syncInput() {
+		if (hexInput && !$state.editing && hexInput.value !== display()) {
+			hexInput.value = display();
+		}
+	}
+	$run(() => {
+		const text = display();
+		const editing = $state.editing;
+		if (hexInput && !editing && hexInput.value !== text) {
+			hexInput.value = text;
+		}
+	});
+	$onmount(() => syncInput());
+
+	@render {
+		<input
+			{$props?.id}
+			type="text"
+			class={["torp-color-picker-input", $props?.class]}
+			{$props?.style}
+			spellcheck="false"
+			placeholder="#rrggbb"
+			aria-label={label()}
+			value={display()}
+			disabled={getDisabled()}
+			oninput={handleInput}
+			onchange={handleChange}
+			onblur={handleChange}
+			onkeydown={handleKey}
+			onmount={(el) => {
+				hexInput = el;
+				return () => {
+					if (hexInput === el) {
+						hexInput = undefined;
+					}
+				};
+			}}
+		/>
+	}
+}

package/dist/ColorPicker/ColorPickerTypes.ts

@@ -0,0 +1,12 @@
+export const ColorPickerContextName: unique symbol = Symbol.for("torp.ColorPicker");
+
+export interface ColorPickerContext {
+	/** Whether the user cannot interact with the picker */
+	getDisabled: () => boolean;
+	/** The selected color as "#rrggbb"; undefined if nothing is selected */
+	getValue: () => string | undefined;
+	/** An accessible name for the picker */
+	getAriaLabel: () => string | undefined;
+	/** Commits a hex input value, reporting it when it changes the value */
+	commitValue: (value: string | undefined) => void;
+}

package/dist/ColorPicker/index.d.ts

@@ -73,6 +73,17 @@ interface ColorPickerProps {
  * ```
  * <ColorPicker name="accent" showInput &value={$state.accent} />
  * ```
+ *
+ * The structure of a ColorPicker is:
+ *
+ * ```
+ * <ColorPicker>
+ * 	<ColorPalette />
+ * 	<ColorPickerInput />
+ * </ColorPicker>
+ * ```
+ *
+ * With no children, the palette and input are rendered automatically.
  */
 declare function ColorPicker(
 	$parent: ParentNode,
@@ -82,4 +93,32 @@ declare function ColorPicker(
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { ColorPalette, ColorPicker };
+
+
+interface ColorPickerInputProps {
+	/** An ID for the input element */
+	id?: string;
+	/** Classes for the input element */
+	class?: ClassValue;
+	/** Styles for the input element */
+	style?: StyleValue;
+	/** An accessible name for the input; falls back to the picker's ariaLabel */
+	ariaLabel?: string;
+	/** If set to true, the user cannot interact with this input */
+	disabled?: boolean;
+}
+
+/**
+ * The hex text field of a ColorPicker, for entering arbitrary colors as
+ * "#rrggbb". Values commit on blur or Enter, invalid text reverting like
+ * NumberInput.
+ */
+declare function ColorPickerInput(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ColorPickerInputProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { ColorPalette, ColorPicker, ColorPickerInput };

package/dist/ColorPicker/index.js

@@ -1,3 +1,4 @@
 import ColorPalette from "./ColorPalette.torp";
 import ColorPicker from "./ColorPicker.torp";
-export { ColorPalette, ColorPicker };
+import ColorPickerInput from "./ColorPickerInput.torp";
+export { ColorPalette, ColorPicker, ColorPickerInput };

package/dist/CommandPalette/CommandPalette.torp

@@ -3,6 +3,12 @@ import Modal from "../Modal/Modal.torp";
 import ModalContent from "../Modal/ModalContent.torp";
 import ModalOverlay from "../Modal/ModalOverlay.torp";
 import getId from "../utils/getId";
+import CommandPaletteInput from "./CommandPaletteInput.torp";
+import CommandPaletteList from "./CommandPaletteList.torp";
+import {
+	type CommandPaletteContext,
+	CommandPaletteContextName,
+} from "./CommandPaletteTypes";
 import type { Command } from "./CommandTypes";
 
 interface CommandPaletteProps {
@@ -36,11 +42,20 @@ 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.
  */
 export default function CommandPalette($props: CommandPaletteProps | undefined) {
 	let defaultId = getId();
-	let input: HTMLInputElement;
+	let input: HTMLInputElement | undefined;
 
 	function getDisabled(command: Command): boolean {
 		return command.disabled === true;
@@ -91,6 +106,10 @@ export default function CommandPalette($props: CommandPaletteProps | undefined)
 		return filteredCommands()[$state.activeIndex];
 	}
 
+	function listId(): string {
+		return `${$props?.id ?? defaultId}-list`;
+	}
+
 	function optionId(index: number): string {
 		return `${$props?.id ?? defaultId}-option-${index}`;
 	}
@@ -102,6 +121,30 @@ export default function CommandPalette($props: CommandPaletteProps | undefined)
 		$props?.onrun?.(command);
 	}
 
+	// Set the context to pass down to the input, list and items
+	let context: CommandPaletteContext = {
+		getListId: listId,
+		getItemId: optionId,
+		getActiveItemId: () => optionId($state.activeIndex),
+		getPlaceholder: () => $props?.placeholder,
+		getAriaLabel: () => $props?.ariaLabel,
+		handleInput,
+		handleKey,
+		registerInput: (el) => {
+			input = el;
+		},
+		unregisterInput: (el) => {
+			if (input === el) {
+				input = undefined;
+			}
+		},
+		getFilteredCommands: filteredCommands,
+		isActiveCommand: (index) => $state.activeIndex === index,
+		runCommand,
+		getEmptyText: () => $props?.emptyText ?? "No results",
+	};
+	$context[CommandPaletteContextName] = context;
+
 	function handleInput(e: Event) {
 		$state.search = (e.currentTarget as HTMLInputElement).value;
 	}
@@ -162,46 +205,10 @@ export default function CommandPalette($props: CommandPaletteProps | undefined)
 			<Modal {$state.visible}>
 				<ModalOverlay />
 				<ModalContent class="torp-command-palette-content">
-					<input
-						class="torp-command-palette-input"
-						type="text"
-						role="combobox"
-						aria-expanded="true"
-						aria-controls={`${$props?.id ?? defaultId}-list`}
-						aria-activedescendant={optionId($state.activeIndex)}
-						aria-autocomplete="list"
-						aria-label={$props?.ariaLabel}
-						placeholder={$props?.placeholder}
-						&ref={input}
-						oninput={handleInput}
-						onkeydown={handleKey}
-					/>
-					<ul class="torp-command-palette-list" role="listbox" id={`${$props?.id ?? defaultId}-list`}>
-						@for (let [index, command] of filteredCommands().entries()) {
-							@key = command.value
-							<li
-								class="torp-command-palette-item"
-								role="option"
-								id={optionId(index)}
-								aria-selected={$state.activeIndex === index ? "true" : "false"}
-								aria-disabled={getDisabled(command) ? "true" : undefined}
-								data-state={$state.activeIndex === index ? "active" : "inactive"}
-								onclick={() => runCommand(command)}
-							>
-								<span class="torp-command-palette-label">{command.label}</span>
-								@if (command.shortcut) {
-									<span class="torp-command-palette-shortcut" aria-hidden="true">
-										{command.shortcut}
-									</span>
-								}
-							</li>
-						}
-						@if (filteredCommands().length === 0) {
-							<li class="torp-command-palette-empty">
-								{$props?.emptyText ?? "No results"}
-							</li>
-						}
-					</ul>
+					<slot>
+						<CommandPaletteInput />
+						<CommandPaletteList />
+					</slot>
 				</ModalContent>
 			</Modal>
 		</div>
@@ -214,10 +221,5 @@ export default function CommandPalette($props: CommandPaletteProps | undefined)
 			display: flex;
 			flex-direction: column;
 		}
-		.torp-command-palette-list {
-			list-style: none;
-			margin: 0;
-			padding: 0;
-		}
 	}
 }

package/dist/CommandPalette/CommandPaletteInput.torp

@@ -0,0 +1,51 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { type CommandPaletteContext, CommandPaletteContextName } from "./CommandPaletteTypes";
+
+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.
+ */
+export default function CommandPaletteInput($props: CommandPaletteInputProps | undefined) {
+	// Get stuff out of the CommandPalette context
+	const context = $context[CommandPaletteContextName] as CommandPaletteContext;
+	if (!context) {
+		throw new Error("CommandPaletteInput must be contained within a CommandPalette");
+	}
+
+	@render {
+		<input
+			{$props?.id}
+			class={["torp-command-palette-input", $props?.class]}
+			{$props?.style}
+			type="text"
+			role="combobox"
+			aria-expanded="true"
+			aria-controls={context.getListId()}
+			aria-activedescendant={context.getActiveItemId()}
+			aria-autocomplete="list"
+			aria-label={$props?.ariaLabel ?? context.getAriaLabel()}
+			placeholder={$props?.placeholder ?? context.getPlaceholder()}
+			oninput={context.handleInput}
+			onkeydown={context.handleKey}
+			onmount={(el) => {
+				context.registerInput(el);
+				return () => {
+					context.unregisterInput(el);
+				};
+			}}
+		/>
+	}
+}

package/dist/CommandPalette/CommandPaletteItem.torp

@@ -0,0 +1,62 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { type CommandPaletteContext, CommandPaletteContextName } from "./CommandPaletteTypes";
+import type { Command } from "./CommandTypes";
+
+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.
+ */
+export default function CommandPaletteItem($props: CommandPaletteItemProps | undefined) {
+	// Get stuff out of the CommandPalette context
+	const context = $context[CommandPaletteContextName] as CommandPaletteContext;
+	if (!context) {
+		throw new Error("CommandPaletteItem must be contained within a CommandPalette");
+	}
+
+	function getIndex(): number {
+		return $props?.index ?? 0;
+	}
+
+	function getCommand(): Command | undefined {
+		return $props?.command;
+	}
+
+	function getDisabled(): boolean {
+		return getCommand()?.disabled === true;
+	}
+
+	@render {
+		<li
+			id={$props?.id ?? context.getItemId(getIndex())}
+			class={["torp-command-palette-item", $props?.class]}
+			{$props?.style}
+			role="option"
+			aria-selected={context.isActiveCommand(getIndex()) ? "true" : "false"}
+			aria-disabled={getDisabled() ? "true" : undefined}
+			data-state={context.isActiveCommand(getIndex()) ? "active" : "inactive"}
+			onclick={() => context.runCommand(getCommand())}
+		>
+			<slot>
+				<span class="torp-command-palette-label">{getCommand()?.label}</span>
+				@if (getCommand()?.shortcut) {
+					<span class="torp-command-palette-shortcut" aria-hidden="true">
+						{getCommand()?.shortcut}
+					</span>
+				}
+			</slot>
+		</li>
+	}
+}

package/dist/CommandPalette/CommandPaletteList.torp

@@ -0,0 +1,55 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { type CommandPaletteContext, CommandPaletteContextName } from "./CommandPaletteTypes";
+import CommandPaletteItem from "./CommandPaletteItem.torp";
+
+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).
+ */
+export default function CommandPaletteList($props: CommandPaletteListProps | undefined) {
+	// Get stuff out of the CommandPalette context
+	const context = $context[CommandPaletteContextName] as CommandPaletteContext;
+	if (!context) {
+		throw new Error("CommandPaletteList must be contained within a CommandPalette");
+	}
+
+	@render {
+		<ul
+			id={$props?.id ?? context.getListId()}
+			class={["torp-command-palette-list", $props?.class]}
+			{$props?.style}
+			role="listbox"
+		>
+			<slot>
+				@for (let [index, command] of context.getFilteredCommands().entries()) {
+					@key = command.value
+					<CommandPaletteItem {index} {command} />
+				}
+			</slot>
+			@if (context.getFilteredCommands().length === 0) {
+				<li class="torp-command-palette-empty">
+					{context.getEmptyText()}
+				</li>
+			}
+		</ul>
+	}
+
+	@style {
+		/* Headless: layout only, so the input sits above the list. All
+		   appearance is up to the consuming theme */
+		.torp-command-palette-list {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+	}
+}

package/dist/CommandPalette/CommandPaletteTypes.ts

@@ -0,0 +1,32 @@
+import type { Command } from "./CommandTypes";
+
+export const CommandPaletteContextName: unique symbol = Symbol.for("torp.CommandPalette");
+
+export interface CommandPaletteContext {
+	/** The ID of the command list, for the input's aria-controls */
+	getListId: () => string;
+	/** The ID of a command option, for aria-activedescendant */
+	getItemId: (index: number) => string;
+	/** The ID of the active command option */
+	getActiveItemId: () => string;
+	/** Text to display in the input when it is empty */
+	getPlaceholder: () => string | undefined;
+	/** An accessible name for the input */
+	getAriaLabel: () => string | undefined;
+	/** Handles typing in the input */
+	handleInput: (e: Event) => void;
+	/** Handles arrow/Enter/Escape keys in the input */
+	handleKey: (e: KeyboardEvent) => void;
+	/** Called from the input when it is added */
+	registerInput: (el: HTMLInputElement) => void;
+	/** Called from the input when it is removed */
+	unregisterInput: (el: HTMLInputElement) => void;
+	/** The commands that match the current search text */
+	getFilteredCommands: () => Command[];
+	/** Whether a command is the active (highlighted) one */
+	isActiveCommand: (index: number) => boolean;
+	/** Runs a command and closes the palette */
+	runCommand: (command: Command | undefined) => void;
+	/** Text to display when no commands match the search */
+	getEmptyText: () => string;
+}