@torpor/ui 0.3.7 → 1.0.0

package/dist/ToolBar/ToolBarElement.torp

@@ -0,0 +1,51 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import { type ToolBarContext, ToolBarContextName } from "./ToolBarTypes";
+
+interface ToolBarElementProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** Whether this button is disabled  */
+	disabled?: boolean;
+	/** An element that can be focused via keyboard navigation */
+	element?: HTMLElement;
+}
+
+/**
+ * An element of any type that can be placed in a ToolBar.
+ *
+ */
+export default function ToolBarElement($props: ToolBarElementProps | undefined) {
+	// Get stuff out of the ToolBarContext
+	const menuContext = $context[ToolBarContextName] as ToolBarContext;
+	if (!menuContext) {
+		throw new Error("ToolBarElement must be contained within a ToolBar");
+	}
+	const { registerItem, handleItemKey, handleItemFocus } = menuContext;
+
+	// Register this item with the parent ToolBar and store the index
+	const { index } = registerItem({ setFocused, disabled: $props?.disabled });
+
+	function setFocused() {
+		if ($props?.element) {
+			$props.element.focus();
+		}
+	}
+
+	@render {
+		<div
+			{$props?.id}
+			class={["torp-tool-bar-div", $props?.class]}
+			{$props?.style}
+			tabindex="0"
+			aria-disabled={$props?.disabled ? "true" : undefined}
+			onkeydown={handleItemKey}
+			onfocus={() => handleItemFocus(index)}
+		>
+			<slot />
+		</div>
+	}
+}

package/dist/ToolBar/ToolBarPopout.torp

@@ -0,0 +1,45 @@
+import type { Bindable, ClassValue, StyleValue } from "@torpor/view";
+import SubmenuPopout from "../utils/SubmenuPopout.torp";
+
+interface ToolBarPopoutProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** Whether the popout is visible */
+	visible: Bindable<boolean | undefined>;
+	/** Raised when the popout has opened */
+	onopen?: () => void;
+	/** Raised when the popout has closed */
+	onclose?: (result: any) => void;
+}
+
+/**
+ * A popout that is attached to a toolbar button and can be used to show a submenu.
+ *
+ * The structure of a ToolBarPopout is:
+ *
+ * ```
+ * <ToolBarPopout>
+ * 	<ToolBarPopoutTrigger />
+ * 	<ToolBarPopoutContent />
+ * </ToolBarPopout>
+ * ```
+ */
+export default function ToolBarPopout($props: ToolBarPopoutProps | undefined) {
+	@render {
+		<SubmenuPopout
+			id={$props?.id}
+			class={["torp-tool-bar-popout", $props?.class]}
+			style={$props?.style}
+			visible={$props?.visible}
+			onopen={$props?.onopen}
+			onclose={$props?.onclose}
+			contentRole="menu"
+		>
+			<slot />
+		</SubmenuPopout>
+	}
+}

package/dist/ToolBar/ToolBarPopoutContent.torp

@@ -0,0 +1,34 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import SubmenuPopoutContent from "../utils/SubmenuPopoutContent.torp";
+
+interface ToolBarPopoutContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** Where the popout will be shown, relative to the popout button */
+	side?: "top" | "right" | "bottom" | "left";
+	/** How the popout will be aligned, relative to the popout button */
+	alignment?: "start" | "center" | "end";
+}
+
+/**
+ * The content that is displayed for a ToolBarPopout when it is open.
+ *
+ */
+export default function ToolBarPopoutContent($props: ToolBarPopoutContentProps | undefined) {
+	@render {
+		<SubmenuPopoutContent
+			id={$props?.id}
+			class={["torp-tool-bar-popout-content", $props?.class]}
+			style={$props?.style}
+			side={$props?.side}
+			alignment={$props?.alignment}
+			role="menu"
+		>
+			<slot />
+		</SubmenuPopoutContent>
+	}
+}

package/dist/ToolBar/ToolBarPopoutTrigger.torp

@@ -0,0 +1,47 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+import SubmenuPopoutTrigger from "../utils/SubmenuPopoutTrigger.torp";
+import { type ToolBarContext, ToolBarContextName } from "./ToolBarTypes";
+
+interface ToolBarPopoutTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The delay before showing the popout, in milliseconds */
+	hoverDelay?: number;
+	/** Whether this button is disabled */
+	disabled?: boolean;
+}
+
+/**
+ * A button that is placed in a ToolBar and signals a response by a user.
+ *
+ */
+export default function ToolBarPopoutTrigger($props: ToolBarPopoutTriggerProps | undefined) {
+	// Get stuff out of the ToolBarContext
+	const toolBarContext = $context[ToolBarContextName] as ToolBarContext;
+	if (!toolBarContext) {
+		throw new Error("ToolBarPopoutTrigger must be contained within a ToolBar");
+	}
+	const { registerItem, handleItemKey, handleItemFocus, handlePopout, orientation } =
+		toolBarContext;
+
+	@render {
+		<SubmenuPopoutTrigger
+			id={$props?.id}
+			class={["torp-tool-bar-popout-trigger", $props?.class]}
+			style={$props?.style}
+			hoverDelay={$props?.hoverDelay}
+			disabled={$props?.disabled}
+			openKey={orientation === "vertical" ? "ArrowRight" : "ArrowDown"}
+			registerItem={registerItem}
+			handleItemKey={handleItemKey}
+			handleItemFocus={handleItemFocus}
+			onActivate={handlePopout}
+		>
+			<slot />
+		</SubmenuPopoutTrigger>
+	}
+}

package/dist/ToolBar/ToolBarSeparator.torp

@@ -0,0 +1,21 @@
+import type { ClassValue, StyleValue } from "@torpor/view";
+
+interface ToolBarSeparatorProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+}
+
+/**
+ * An element in a menu that separates logical sets of menu items.
+ */
+export default function ToolBarSeparator($props: ToolBarSeparatorProps | undefined) {
+	@render {
+		<div {$props?.id} class={["torp-tool-bar-separator", $props?.class]} role="separator">
+			<slot />
+		</div>
+	}
+}

package/dist/ToolBar/ToolBarTypes.ts

@@ -0,0 +1,28 @@
+import type { SubmenuItemState } from "../utils/PopoutTypes";
+
+export const ToolBarContextName: unique symbol = Symbol.for("torp.ToolBar");
+export const ToolBarGroupContextName: unique symbol = Symbol.for("torp.ToolBarGroup");
+
+export interface ToolBarContext {
+	/** Called from a ToolBarLink or ToolBarButton when its button is focused */
+	handleItemFocus: (index: number) => void;
+
+	/** Called from a ToolBarLink or ToolBarButton when a key is pressed */
+	handleItemKey: (e: KeyboardEvent) => void;
+
+	/** Called from a MenuButton when a submenu is shown */
+	handlePopout: (index: number) => void;
+
+	/** Called from each ToolBarLink or ToolBarButton to register itself with this ToolBar */
+	registerItem: (item: ItemState) => { index: number };
+
+	orientation: "horizontal" | "vertical";
+}
+
+export interface ToolBarGroupContext {
+	state: {
+		headerId: string;
+	};
+}
+
+export type ItemState = SubmenuItemState;

package/dist/ToolBar/index.d.ts

@@ -0,0 +1,210 @@
+import { type SlotRender } from "@torpor/view";
+
+
+interface ToolBarProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** An ARIA label for describing the menu to screen readers  */
+	ariaLabel?: string | undefined;
+	/** The orientation of the menu, which affects keyboard navigation */
+	orientation?: "horizontal" | "vertical";
+}
+
+/**
+ * A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.
+ *
+ * See [the WAI ARIA guidelines for ToolBars](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/).
+ *
+ * The structure of a ToolBar is:
+ *
+ * ```
+ * <ToolBar>
+ *	 <ToolBarButton />
+ *	 <ToolBarSeparator /> (optional)
+ *	 <ToolBarPopout /> (optional)
+ *	 ...
+ * </ToolBar>
+ * ```
+ */
+declare function ToolBar(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ToolBarProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface ToolBarButtonProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** Whether this button is disabled  */
+	disabled?: boolean;
+	/** Raised when the button is clicked */
+	onclick?: (e: MouseEvent) => void;
+	/** Raised when a key is pressed down */
+	onkeydown?: (e: KeyboardEvent) => void;
+}
+
+/**
+ * A button that is placed in a ToolBar.
+ *
+ */
+declare function ToolBarButton(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ToolBarButtonProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface ToolBarElementProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** Whether this button is disabled  */
+	disabled?: boolean;
+	/** An element that can be focused via keyboard navigation */
+	element?: HTMLElement;
+}
+
+/**
+ * An element of any type that can be placed in a ToolBar.
+ *
+ */
+declare function ToolBarElement(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ToolBarElementProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface ToolBarPopoutProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** Whether the popout is visible */
+	visible: Bindable<boolean | undefined>;
+	/** Raised when the popout has opened */
+	onopen?: () => void;
+	/** Raised when the popout has closed */
+	onclose?: (result: any) => void;
+}
+
+/**
+ * A popout that is attached to a toolbar button and can be used to show a submenu.
+ *
+ * The structure of a ToolBarPopout is:
+ *
+ * ```
+ * <ToolBarPopout>
+ * 	<ToolBarPopoutTrigger />
+ * 	<ToolBarPopoutContent />
+ * </ToolBarPopout>
+ * ```
+ */
+declare function ToolBarPopout(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ToolBarPopoutProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface ToolBarPopoutContentProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** Where the popout will be shown, relative to the popout button */
+	side?: "top" | "right" | "bottom" | "left";
+	/** How the popout will be aligned, relative to the popout button */
+	alignment?: "start" | "center" | "end";
+}
+
+/**
+ * The content that is displayed for a ToolBarPopout when it is open.
+ *
+ */
+declare function ToolBarPopoutContent(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ToolBarPopoutContentProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface ToolBarPopoutTriggerProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+	/** The delay before showing the popout, in milliseconds */
+	hoverDelay?: number;
+	/** Whether this button is disabled */
+	disabled?: boolean;
+}
+
+/**
+ * A button that is placed in a ToolBar and signals a response by a user.
+ *
+ */
+declare function ToolBarPopoutTrigger(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ToolBarPopoutTriggerProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+
+
+interface ToolBarSeparatorProps {
+	/** An ID for the root element */
+	id?: string;
+	/** Classes for the root element */
+	class?: ClassValue;
+	/** Styles for the root element */
+	style?: StyleValue;
+}
+
+/**
+ * An element in a menu that separates logical sets of menu items.
+ */
+declare function ToolBarSeparator(
+	$parent: ParentNode,
+	$anchor: Node | null,
+	$props: ToolBarSeparatorProps | undefined,
+	$context?: Record<PropertyKey, any>,
+	$slots?: Record<string, SlotRender>,
+): void;
+
+export { ToolBar, ToolBarButton, ToolBarElement, ToolBarPopout, ToolBarPopoutContent, ToolBarPopoutTrigger, ToolBarSeparator };

package/dist/ToolBar/index.js

@@ -0,0 +1,8 @@
+import ToolBar from "./ToolBar.torp";
+import ToolBarButton from "./ToolBarButton.torp";
+import ToolBarElement from "./ToolBarElement.torp";
+import ToolBarPopout from "./ToolBarPopout.torp";
+import ToolBarPopoutContent from "./ToolBarPopoutContent.torp";
+import ToolBarPopoutTrigger from "./ToolBarPopoutTrigger.torp";
+import ToolBarSeparator from "./ToolBarSeparator.torp";
+export { ToolBar, ToolBarButton, ToolBarElement, ToolBarPopout, ToolBarPopoutContent, ToolBarPopoutTrigger, ToolBarSeparator };