@torpor/ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @torpor/ui
 
+## 0.3.0
+
+### Minor Changes
+
+- 92438fc: !Edit: split Popover into Contextual, Modal and Popover
+- 42c6b60: !Fix: transitions
+
+### Patch Changes
+
+- 4f17acb: Fix: handle undefined $props in UI components
+- Updated dependencies [255aad3]
+- Updated dependencies [8b377a2]
+- Updated dependencies [450b739]
+- Updated dependencies [168dff3]
+- Updated dependencies [fc60fe0]
+- Updated dependencies [42c6b60]
+- Updated dependencies [2818679]
+- Updated dependencies [38fd0a5]
+- Updated dependencies [3e6f3f7]
+- Updated dependencies [051998b]
+  - @torpor/view@0.4.0
+  - @torpor/unplugin@0.2.1
+
+## 0.2.1
+
+### Patch Changes
+
+- 84f7d87: Fix: prop types
+- 34d17f7: Feat: UI Form component and client-side submit
+- Updated dependencies [f4716c5]
+- Updated dependencies [1253f7a]
+- Updated dependencies [6268e00]
+- Updated dependencies [f2fb547]
+  - @torpor/view@0.3.2
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/Accordion/Accordion.torp

@@ -1,5 +1,20 @@
 import { AccordionContextName, type AccordionContext, type ItemState } from "./AccordionTypes";
 
+interface AccordionProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time */
+	type?: "single" | "multiple",
+	/** The value of the expanded AccordionItem, or an array of values if the type is "multiple" */
+	value?: string | string[],
+	/** If set to true, the user cannot interact with any items in the Accordion */
+	disabled?: boolean,
+	/** Raised when the expanded item(s) have changed */
+	onchange?: (value: string | string[]) => void,
+}
+
 /**
  * A vertically stacked set of interactive headings that enable users to reveal
  * or hide associated sections of content.
@@ -18,15 +33,19 @@ import { AccordionContextName, type AccordionContext, type ItemState } from "./A
  * 	</AccordionItem>
  * </Accordion>
  * ```
- *
- * @prop {"single" | "multiple"} type -- Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time
- * @prop {string | string[]} value -- The value of the expanded AccordionItem, or an array of values if the type is "multiple"
- * @prop {boolean} disabled -- If set to true, the user cannot interact with any items in the Accordion
- * @prop {(value: string | string[]) => void} [onchange] -- Raised when the expanded item(s) have changed
  */
-export default function Accordion($props: any) {
-	$props.type ||= "single";
-	$props.value ||= $props.type === "single" ? "" : [];
+export default function Accordion($props: AccordionProps | undefined) {
+	let type = $props?.type ?? "single";
+
+	let $state = $watch({
+		value: $props?.value ?? (type === "single" ? "" : [] as string[])
+	});
+
+	$run(() => {
+		if ($props !== undefined) {
+			$props.value = $state.value;
+		}
+	});
 
 	let itemStates: ItemState[] = [];
 
@@ -44,13 +63,13 @@ export default function Accordion($props: any) {
 
 	$run(() => {
 		// HACK: This should probably be done with setters?
-		let newValue = $props.value;
+		let newValue = $state.value;
 
 		// Get the value
-		switch ($props.type) {
+		switch (type) {
 			case "single": {
 				// Ensure the value passed in was a string (in case e.g. the user has set values to ints)
-				newValue = newValue?.toString();
+				newValue = newValue.toString();
 				for (let item of itemStates) {
 					item.expanded = item.value === newValue;
 				}
@@ -69,18 +88,18 @@ export default function Accordion($props: any) {
 		}
 
 		// Set the value
-		$props.value = newValue;
+		$state.value = newValue;
 	})
 
 	$run(() => {
-		itemStates.forEach((s) => s.parentDisabled = $props.disabled);
+		itemStates.forEach((s) => s.parentDisabled = $props?.disabled === true);
 	});
 
 	// Dispatch the change event when the value changes
 	let firstChange = true;
 	$run(() => {
-		const ev = $props.onchange;
-		const value = $props.value;
+		const ev = $props?.onchange;
+		const value = $state.value;
 		if (firstChange) {
 			firstChange = false;
 		} else if (ev) {
@@ -100,21 +119,21 @@ export default function Accordion($props: any) {
 		}
 
 		// If we have a value, set whether the item should be expanded
-		if ($props.value) {
-			switch ($props.type) {
+		if ($state.value) {
+			switch (type) {
 				case "single": {
-					itemState.expanded = $props.value === itemState.value;
+					itemState.expanded = $state.value === itemState.value;
 					break;
 				}
 				case "multiple": {
-					itemState.expanded = $props.value.includes(itemState.value);
+					itemState.expanded = $state.value.includes(itemState.value);
 					break;
 				}
 			}
 		}
 
 		// Set whether the Accordion itself is disabled
-		itemState.parentDisabled = $props.disabled
+		itemState.parentDisabled = $props?.disabled === true
 
 		// Add the item's state to the array
 		itemStates.splice(itemState.index, 0, itemState);
@@ -131,13 +150,13 @@ export default function Accordion($props: any) {
 	}
 
 	function toggleItem(toggleValue: string) {
-		switch ($props.type) {
+		switch (type) {
 			case "single": {
 				for (let item of itemStates) {
 					// The item is expanded if it has the supplied value (i.e. if it was clicked) and if it
 					// wasn't already expanded (i.e. we collapse it if it was expanded and clicked)
 					if (item.value === toggleValue) {
-						$props.value = item.expanded ? "" : item.value;
+						$state.value = item.expanded ? "" : item.value;
 						break;
 					}
 				}
@@ -155,7 +174,7 @@ export default function Accordion($props: any) {
 						newValue.push(item.value);
 					}
 				}
-				$props.value = newValue.sort();
+				$state.value = newValue.sort();
 				break;
 			}
 		}
@@ -198,8 +217,8 @@ export default function Accordion($props: any) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-accordion ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-accordion ${$props?.class ?? ""}`.trim()}
 		>
 			<slot />
 		</div>

package/dist/Accordion/AccordionContent.torp

@@ -1,32 +1,38 @@
 import getId from "../utils/getId";
 import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
+interface AccordionContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether this content should act as a region. Set this when the content contains heading elements or a nested Accordion */
+	ariaRegion?: boolean,
+}
+
 /**
  * Content for an AccordionItem, which can be revealed or hidden by an associated AccordionTrigger.
- *
- * @prop {string} [id] -- An ID for the AccordionContent's div container
- * @prop {boolean} [ariaRegion] -- Whether this content should act as a region. Set this when the content contains heading elements or a nested Accordion
  */
-export default function AccordionContent($props: any) {
-	$props.id ||= getId();
+export default function AccordionContent($props: AccordionContentProps | undefined) {
+	let defaultId = getId();
 
 	const context = $context[AccordionItemContextName] as AccordionItemContext;
 	if (!context) {
 		throw new Error("AccordionContent must be contained within an AccordionItem");
 	}
-	let $state = $context[AccordionItemContextName].state
+	let $state = context.state
 
 	// Set the content ID so that it can be used with aria-controls in AccordionTrigger
-	$state.contentId = $props.id;
+	$state.contentId = $props?.id ?? defaultId;
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-accordion-content ${$props.class ?? ""}`.trim()}
-			role={$props.ariaRegion ? "region" : undefined}
+			id={$props?.id ?? defaultId}
+			class={`torp-accordion-content ${$props?.class ?? ""}`.trim()}
+			role={$props?.ariaRegion ? "region" : undefined}
 			aria-labelledby={$state.headerId}
-			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			data-state={$state.expanded ? "open" : "closed"}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			@if ($state.expanded) {
 				<slot />

package/dist/Accordion/AccordionHeader.torp

@@ -1,5 +1,14 @@
 import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
+interface AccordionHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The type of HTML header to use */
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+}
+
 /**
  * The header for an AccordionItem, which contains the AccordionTrigger.
  *
@@ -10,23 +19,21 @@ import { AccordionItemContextName, type AccordionItemContext } from "./Accordion
  * 	<AccordionTrigger />
  * </AccordionHeader>
  * ```
- *
- * @prop {"h1" | "h2" | "h3" | "h4" | "h5" | "h6"} as -- The type of HTML header to use
  */
-export default function AccordionHeader($props: any) {
+export default function AccordionHeader($props: AccordionHeaderProps | undefined) {
 	const context = $context[AccordionItemContextName] as AccordionItemContext;
 	if (!context) {
 		throw new Error("AccordionHeader must be contained within an AccordionItem");
 	}
-	let $state = $context[AccordionItemContextName].state
+	let $state = context.state
 
 	@render {
 		@// TODO: $props.as
 		<h4
-			{$props.id}
-			class={`torp-accordion-header ${$props.class ?? ""}`.trim()}
-			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			{$props?.id}
+			class={`torp-accordion-header ${$props?.class ?? ""}`.trim()}
+			data-state={$state.expanded ? "open" : "closed"}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />
 		</h4>

package/dist/Accordion/AccordionItem.torp

@@ -1,4 +1,19 @@
-import { AccordionContextName, AccordionItemContextName, type AccordionContext, type AccordionItemContext } from "./AccordionTypes";
+import { AccordionContextName, AccordionItemContextName, type ItemState, type AccordionContext, type AccordionItemContext } from "./AccordionTypes";
+
+interface AccordionItemProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The index of this item in the Accordion. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically */
+	index?: number,
+	/** A value for the item. Set this if you need more control over which item(s) are expanded. If you don't set this, the value will be set to the item's initial index */
+	value?: string,
+	/** If set to true, the user cannot interact with this AccordionItem */
+	disabled?: boolean,
+	/** Raised when this item is opened or closed */
+	ontoggle?: (open: boolean) => void,
+}
 
 /**
  * An item in an Accordion, which must consist of an AccordionTrigger and an AccordionContent.
@@ -13,22 +28,17 @@ import { AccordionContextName, AccordionItemContextName, type AccordionContext,
  * 	<AccordionContent />
  * </AccordionItem>
  * ```
- *
- * @prop {number} [index] -- The index of this item in the Accordion. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically
- * @prop {string} [value] -- A value for the item. Set this if you need more control over which item(s) are expanded. If you don't set this, the value will be set to the item's initial index
- * @prop {boolean} [disabled] -- If set to true, the user cannot interact with this AccordionItem
- * @prop {(boolean) => void} [ontoggle] -- Raised when this item is opened or closed
  */
-export default function AccordionItem($props: any) {
+export default function AccordionItem($props: AccordionItemProps | undefined) {
 	let $state: ItemState = $watch({
 		index: -1,
 		value: "",
 		expanded: false,
-		disabled: $props.disabled,
+		headerId: "",
+		contentId: "",
+		disabled: $props?.disabled ?? false,
 		parentDisabled: false,
-		get dataState() {
-			return this.expanded ? "open" : "closed";
-		},
+		setFocused
 	})
 
 	// Get stuff out of the AccordionContext
@@ -46,7 +56,7 @@ export default function AccordionItem($props: any) {
 	$context[AccordionItemContextName] = itemContext;
 
 	// Register this item with the parent Accordion, which will handle toggling expanded for all items
-	context.registerItem($state);
+	context.registerItem($state, setFocused);
 
 	// Remove the item from the parent Accordion when this item is destroyed
 	$run(() => {
@@ -58,7 +68,7 @@ export default function AccordionItem($props: any) {
 	// Dispatch the toggle event when the value of expanded changes
 	let firstToggle = true;
 	$run(() => {
-		const ev = $props.ontoggle;
+		const ev = $props?.ontoggle;
 		const expanded = $state.expanded;
 		if (firstToggle) {
 			firstToggle = false;
@@ -67,12 +77,19 @@ export default function AccordionItem($props: any) {
 		}
 	});
 
+	// Called from the parent Accordion; pass the focus command along to the AccordionButton
+	function setFocused() {
+		if (itemContext.setHeaderFocused) {
+			itemContext.setHeaderFocused();
+		}
+	}
+
 	@render {
 		<div
-			{$props.id}
-			class={`torp-accordion-item ${$props.class ?? ""}`.trim()}
-			data-state={$state.dataState}
-			data-disabled={$state.dataDisabled}
+			{$props?.id}
+			class={`torp-accordion-item ${$props?.class ?? ""}`.trim()}
+			data-state={$state.expanded ? "open" : "closed"}
+			data-disabled={$state.disabled ? "true" : undefined}
 		>
 			<slot />
 		</div>

package/dist/Accordion/AccordionTrigger.torp

@@ -1,23 +1,30 @@
 import getId from "../utils/getId";
 import { AccordionItemContextName, type AccordionItemContext } from "./AccordionTypes";
 
+interface AccordionTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
  * A header button for an AccordionItem, which can be used to reveal or hide an associated AccordionContent.
  */
-export default function AccordionTrigger() {
-	let button: HTMLButtonElement;
+export default function AccordionTrigger($props: AccordionTriggerProps | undefined) {
+	let defaultId = getId();
 
-	$props.id ||= getId();
+	let button: HTMLButtonElement;
 
 	// Get stuff out of the AccordionItemContext
 	const context = $context[AccordionItemContextName] as AccordionItemContext;
 	if (!context) {
 		throw new Error("AccordionTrigger must be contained within an AccordionItem");
 	}
-	let $state = $context[AccordionItemContextName].state;
+	let $state = context.state;
 
 	// Set the header ID so that it can be used with aria-labelledby in AccordionContent
-	$state.headerId = $props.id;
+	$state.headerId = $props?.id ?? defaultId;
 
 	// Let the item know how to set the button's focus
 	$state.setFocused = setFocused;
@@ -41,14 +48,14 @@ export default function AccordionTrigger() {
 	@render {
 		<button
 			type="button"
-			{$props.id}
-			class={`torp-accordion-trigger ${$props.class ?? ""}`.trim()}
+			id={$props?.id ?? defaultId}
+			class={`torp-accordion-trigger ${$props?.class ?? ""}`.trim()}
 			disabled={$state.disabled || $state.parentDisabled}
 			aria-expanded={$state.expanded.toString()}
-			aria-disabled={$state.disabled}
+			aria-disabled={$state.disabled ? "true" : undefined}
 			aria-controls={$state.contentId}
-			data-state={$state.dataState}
-			data-disabled={$state.disabled}
+			data-state={$state.expanded ? "open" : "closed"}
+			data-disabled={$state.disabled ? "true" : undefined}
 			&ref={button}
 			onclick={handleClick}
 			onkeydown={handleKey}

package/dist/Accordion/AccordionTypes.ts

@@ -13,21 +13,24 @@ export interface AccordionContext {
 }
 
 export interface AccordionItemContext {
-	/** Called when an AccordionItem is toggled */
+	/** Raised when an AccordionItem is toggled */
 	toggleItem: (value: string) => void;
-	/** Called when an AccordionHeader receives a keyboard event */
+	/** Raised when an AccordionHeader receives a keyboard event */
 	handleHeaderKey: (index: number, e: KeyboardEvent) => void;
 	/** The reactive state for an AccordionItem */
 	state: ItemState;
+	/** Called in an AccordionItem when its header needs to be focused */
+	setHeaderFocused?: () => void;
 }
 
 export interface ItemState {
 	index: number;
 	value: string;
 	expanded: boolean;
+	headerId: string;
+	contentId: string;
 	disabled: boolean;
 	parentDisabled: boolean;
-	dataState: "open" | "closed";
 	/** Called in the Accordion when a header needs to be focused */
 	setFocused: () => void;
 }

package/dist/Accordion/index.d.ts

@@ -1,90 +1,155 @@
 import { type SlotRender } from "@torpor/view";
 
 
+interface AccordionProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether a single AccordionItem or multiple AccordionItems can be expanded at the same time */
+	type?: "single" | "multiple",
+	/** The value of the expanded AccordionItem, or an array of values if the type is "multiple" */
+	value?: string | string[],
+	/** If set to true, the user cannot interact with any items in the Accordion */
+	disabled?: boolean,
+	/** Raised when the expanded item(s) have changed */
+	onchange?: (value: string | string[]) => void,
+}
+
 /**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
+ * A vertically stacked set of interactive headings that enable users to reveal
+ * or hide associated sections of content.
+ *
+ * See [the WAI ARIA guidelines for Accordions](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+ *
+ * The structure of an Accordion is:
+ *
+ * ```
+ * <Accordion>
+ * 	<AccordionItem>
+ * 		<AccordionHeader>
+ * 			<AccordionTrigger />
+ * 		</AccordionHeader>
+ * 		<AccordionContent />
+ * 	</AccordionItem>
+ * </Accordion>
+ * ```
  */
 declare function Accordion(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: AccordionProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface AccordionContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** Whether this content should act as a region. Set this when the content contains heading elements or a nested Accordion */
+	ariaRegion?: boolean,
+}
+
 /**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
+ * Content for an AccordionItem, which can be revealed or hidden by an associated AccordionTrigger.
  */
 declare function AccordionContent(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: AccordionContentProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface AccordionHeaderProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The type of HTML header to use */
+	as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6",
+}
+
 /**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
+ * The header for an AccordionItem, which contains the AccordionTrigger.
+ *
+ * The structure of an AccordionHeader is:
+ * 
+ * ```
+ * <AccordionHeader>
+ * 	<AccordionTrigger />
+ * </AccordionHeader>
+ * ```
  */
 declare function AccordionHeader(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: AccordionHeaderProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface AccordionItemProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+	/** The index of this item in the Accordion. Set this if you will be inserting, removing or sorting items. If you don't set this, it will be set automatically */
+	index?: number,
+	/** A value for the item. Set this if you need more control over which item(s) are expanded. If you don't set this, the value will be set to the item's initial index */
+	value?: string,
+	/** If set to true, the user cannot interact with this AccordionItem */
+	disabled?: boolean,
+	/** Raised when this item is opened or closed */
+	ontoggle?: (open: boolean) => void,
+}
+
 /**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
+ * An item in an Accordion, which must consist of an AccordionTrigger and an AccordionContent.
+ * 
+ * The structure of an AccordionItem is:
+ * 
+ * ```
+ * <AccordionItem>
+ * 	<AccordionHeader>
+ * 		<AccordionTrigger />
+ * 	</AccordionHeader>
+ * 	<AccordionContent />
+ * </AccordionItem>
+ * ```
  */
 declare function AccordionItem(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: any,
+	$props: AccordionItemProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
+interface AccordionTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Class name(s) for the root element */
+	class?: string,
+}
+
 /**
- * Mounts or hydrates the component into the supplied parent node.
- * @param $parent -- The parent node.
- * @param $anchor -- The node to mount the component before.
- * @param $props -- The values that have been passed into the component as properties.
- * @param $context -- Values that have been passed into the component from its ancestors.
- * @param $slots -- Functions for rendering children into slot nodes within the component.
+ * A header button for an AccordionItem, which can be used to reveal or hide an associated AccordionContent.
  */
 declare function AccordionTrigger(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props?: Record<PropertyKey, any>,
+	$props: AccordionTriggerProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;