@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/ui/tree.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
-import { Children, createContext, isValidElement, useContext, useRef, useState } from "react";
+import { Children, createContext, isValidElement, useContext, useEffect, useId, useRef, useState } from "react";
 import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRightIcon } from "lucide-react";
@@ -34,8 +34,18 @@ function compareTreeItems(a, b) {
 	if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
 	return 0;
 }
-function visibleItems(items) {
-	return [...items.values()].filter((item) => !item.disabled && item.node.checkVisibility()).sort(compareTreeItems);
+function isUnderExpandedAncestors(item, items, expanded) {
+	for (let parentValue = item.parentValue; parentValue !== void 0; parentValue = items.get(parentValue)?.parentValue) if (!expanded.has(parentValue)) return false;
+	return true;
+}
+function reachableItems(items, expanded) {
+	return [...items.values()].filter((item) => isUnderExpandedAncestors(item, items, expanded)).sort(compareTreeItems);
+}
+function resolveTabStop(items, expanded, selected, focusedValue) {
+	const reachable = reachableItems(items, expanded);
+	if (reachable.some((item) => item.value === focusedValue)) return focusedValue;
+	const enabled = reachable.filter((item) => !item.disabled);
+	return (enabled.find((item) => selected.has(item.value)) ?? enabled[0])?.value ?? null;
 }
 function focusItem(item, ctx) {
 	if (!item) return;
@@ -55,40 +65,56 @@ function handleTypeahead(event, items, index, ctx, typeahead) {
 	const now = Date.now();
 	typeahead.current.query = now - typeahead.current.at > TYPEAHEAD_TIMEOUT ? event.key : typeahead.current.query + event.key;
 	typeahead.current.at = now;
-	const query = typeahead.current.query.toLowerCase();
-	const match = [...items.slice(index + 1), ...items.slice(0, index + 1)].find((item) => labelOf(item, ctx).toLowerCase().startsWith(query));
+	const typed = typeahead.current.query.toLowerCase();
+	const query = [...typed].every((character) => character === typed[0]) ? typed.charAt(0) : typed;
+	const searchStart = query.length === 1 ? index + 1 : index;
+	const match = [...items.slice(searchStart), ...items.slice(0, searchStart)].find((item) => labelOf(item, ctx).toLowerCase().startsWith(query));
 	if (match) focusItem(match, ctx);
 }
-function registeredItemFromTarget(target, root, itemsByNode) {
-	let node = target;
-	while (node && root.contains(node)) {
-		const item = itemsByNode.get(node);
-		if (item) return item;
-		if (node === root) return;
-		node = node.parentElement;
-	}
-}
 function getTreeKeyboardState(event, ctx) {
 	if (event.defaultPrevented || !(event.target instanceof HTMLElement)) return null;
-	const current = ctx.getItemFromTarget(event.target, event.currentTarget);
-	if (!current) return null;
-	const items = ctx.getVisibleItems();
-	const index = items.indexOf(current);
+	const item = ctx.getItemFromTarget(event.target, event.currentTarget);
+	if (!item) return null;
+	const items = ctx.getNavigableItems();
+	const index = items.indexOf(item);
 	if (index === -1) return null;
 	return {
-		value: current.value,
+		item,
 		items,
 		index,
-		isBranch: current.expandable,
-		isExpanded: ctx.expanded.has(current.value),
-		level: current.level
+		isExpanded: ctx.expanded.has(item.value)
 	};
 }
+const RTL_ARROW_KEYS = {
+	ArrowLeft: "ArrowRight",
+	ArrowRight: "ArrowLeft"
+};
+function handleInlineArrow(key, { item, items, index, isExpanded }, ctx) {
+	const isBranch = item.expandable && !item.disabled;
+	if (key === "ArrowRight") {
+		if (!isBranch) return;
+		if (isExpanded) focusItem(items[index + 1], ctx);
+		else ctx.toggleExpanded(item.value, true, "keyboard");
+		return;
+	}
+	if (isBranch && isExpanded) ctx.toggleExpanded(item.value, false, "keyboard");
+	else focusParentItem(items, index, item.level, ctx);
+}
+function activateItem(key, item, ctx) {
+	if (item.disabled) return;
+	if (key === " ") {
+		ctx.select(item.value, "keyboard", ctx.selectionMode === "multiple");
+		return;
+	}
+	ctx.select(item.value, "keyboard", false);
+	if (item.expandable) ctx.toggleExpanded(item.value, void 0, "keyboard");
+}
 function handleTreeKeyDown(event, ctx, typeahead) {
 	const state = getTreeKeyboardState(event, ctx);
 	if (!state) return;
-	const { value, items, index, isBranch, isExpanded, level } = state;
-	switch (event.key) {
+	const { item, items, index } = state;
+	const key = getComputedStyle(event.currentTarget).direction === "rtl" && RTL_ARROW_KEYS[event.key] || event.key;
+	switch (key) {
 		case "ArrowDown":
 			event.preventDefault();
 			focusItem(items[index + 1], ctx);
@@ -98,14 +124,9 @@ function handleTreeKeyDown(event, ctx, typeahead) {
 			focusItem(items[index - 1], ctx);
 			break;
 		case "ArrowRight":
-			event.preventDefault();
-			if (isBranch && !isExpanded) ctx.toggleExpanded(value, true, "keyboard");
-			else if (isBranch && isExpanded) focusItem(items[index + 1], ctx);
-			break;
 		case "ArrowLeft":
 			event.preventDefault();
-			if (isBranch && isExpanded) ctx.toggleExpanded(value, false, "keyboard");
-			else focusParentItem(items, index, level, ctx);
+			handleInlineArrow(key, state, ctx);
 			break;
 		case "Home":
 			event.preventDefault();
@@ -116,13 +137,9 @@ function handleTreeKeyDown(event, ctx, typeahead) {
 			focusItem(items[items.length - 1], ctx);
 			break;
 		case "Enter":
-			event.preventDefault();
-			ctx.select(value, "keyboard", false);
-			if (isBranch) ctx.toggleExpanded(value, void 0, "keyboard");
-			break;
 		case " ":
 			event.preventDefault();
-			ctx.select(value, "keyboard", ctx.selectionMode === "multiple");
+			activateItem(key, item, ctx);
 			break;
 		default: handleTypeahead(event, items, index, ctx, typeahead);
 	}
@@ -132,31 +149,23 @@ function Tree({ selectionMode = "single", indicator, value, defaultValue, onValu
 	const [selectedState, setSelectedState] = useState(() => new Set(defaultValue));
 	const [expandedState, setExpandedState] = useState(() => new Set(defaultExpandedValue));
 	const [focusedValue, setFocusedValue] = useState(null);
+	const [items, setItems] = useState(() => /* @__PURE__ */ new Map());
+	const [registerItem] = useState(() => (item) => {
+		setItems((current) => new Map(current).set(item.value, item));
+		return () => setItems((current) => {
+			if (current.get(item.value) !== item) return current;
+			const next = new Map(current);
+			next.delete(item.value);
+			return next;
+		});
+	});
 	const selected = value ? new Set(value) : selectedState;
 	const expanded = expandedValue ? new Set(expandedValue) : expandedState;
 	const typeahead = useRef({
 		query: "",
 		at: 0
 	});
-	const itemsRef = useRef(/* @__PURE__ */ new Map());
-	const itemsByNodeRef = useRef(/* @__PURE__ */ new WeakMap());
 	const labelsRef = useRef(/* @__PURE__ */ new Map());
-	const seededFocusRef = useRef(false);
-	const registerItem = (item) => {
-		const previous = itemsRef.current.get(item.value);
-		if (previous) itemsByNodeRef.current.delete(previous.node);
-		itemsRef.current.set(item.value, item);
-		itemsByNodeRef.current.set(item.node, item);
-		if (!seededFocusRef.current && !item.disabled) {
-			seededFocusRef.current = true;
-			setFocusedValue(item.value);
-		}
-		return () => {
-			if (itemsRef.current.get(item.value) !== item) return;
-			itemsRef.current.delete(item.value);
-			itemsByNodeRef.current.delete(item.node);
-		};
-	};
 	const registerLabel = (itemValue, node) => {
 		if (!node) return;
 		labelsRef.current.set(itemValue, node);
@@ -164,10 +173,15 @@ function Tree({ selectionMode = "single", indicator, value, defaultValue, onValu
 			if (labelsRef.current.get(itemValue) === node) labelsRef.current.delete(itemValue);
 		};
 	};
-	const getVisibleItems = () => visibleItems(itemsRef.current);
-	const getItemFromTarget = (target, root) => registeredItemFromTarget(target, root, itemsByNodeRef.current);
+	const getNavigableItems = () => reachableItems(items, expanded).filter((item) => item.node.checkVisibility());
+	const getItemFromTarget = (target, root) => {
+		const node = target.closest("[data-control-family=\"tree\"][data-slot=\"item\"]");
+		if (!(node instanceof HTMLLIElement) || !root.contains(node)) return;
+		const item = items.get(node.dataset.value ?? "");
+		return item?.node === node ? item : void 0;
+	};
 	const getLabel = (itemValue) => labelsRef.current.get(itemValue)?.textContent ?? "";
-	const getItem = (itemValue) => itemsRef.current.get(itemValue);
+	const getItem = (itemValue) => items.get(itemValue);
 	const select = (itemValue, reason, toggle) => {
 		if (selectionMode === "none") return;
 		let next;
@@ -201,10 +215,10 @@ function Tree({ selectionMode = "single", indicator, value, defaultValue, onValu
 		indicator: resolvedIndicator,
 		selected,
 		expanded,
-		focusedValue,
+		tabStopValue: resolveTabStop(items, expanded, selected, focusedValue),
 		registerItem,
 		registerLabel,
-		getVisibleItems,
+		getNavigableItems,
 		getItemFromTarget,
 		getLabel,
 		getItem,
@@ -252,33 +266,48 @@ function Tree({ selectionMode = "single", indicator, value, defaultValue, onValu
 }
 function TreeItem({ value, disabled = false, label, className, style, children, ref, ...props }) {
 	const tree = useTree();
-	const level = (useContext(TreeItemContext)?.level ?? 0) + 1;
+	const parent = useContext(TreeItemContext);
+	const parentValue = parent?.value;
+	const level = (parent?.level ?? 0) + 1;
 	const expandable = Children.toArray(children).some((child) => isValidElement(child) && child.type === TreeItemContent);
+	const labelId = useId();
+	const [labelled, setLabelled] = useState(false);
+	const nodeRef = useRef(null);
+	const { registerItem } = tree;
+	useEffect(() => {
+		const node = nodeRef.current;
+		if (!node) return;
+		return registerItem({
+			value,
+			parentValue,
+			node,
+			level,
+			disabled,
+			expandable,
+			label
+		});
+	}, [
+		registerItem,
+		value,
+		parentValue,
+		level,
+		disabled,
+		expandable,
+		label
+	]);
 	const expanded = expandable && tree.expanded.has(value);
 	const selected = tree.selected.has(value);
 	const itemContext = {
 		value,
 		level,
 		disabled,
-		expandable
+		expandable,
+		labelId,
+		setLabelled
 	};
 	const itemRef = (node) => {
-		const itemNode = node instanceof HTMLLIElement ? node : null;
-		const refCleanup = setRef(ref, itemNode);
-		if (!itemNode) return;
-		const unregister = tree.registerItem({
-			value,
-			node: itemNode,
-			level,
-			disabled,
-			expandable,
-			label
-		});
-		return () => {
-			unregister();
-			if (typeof refCleanup === "function") refCleanup();
-			else setRef(ref, null);
-		};
+		nodeRef.current = node instanceof HTMLLIElement ? node : null;
+		return setRef(ref, nodeRef.current);
 	};
 	const baseClass = cn("list-none", className);
 	const itemStyle = {
@@ -286,6 +315,7 @@ function TreeItem({ value, disabled = false, label, className, style, children,
 		...style
 	};
 	const shared = {
+		"aria-labelledby": labelled ? labelId : void 0,
 		...props,
 		"data-control-ui": "tree",
 		"data-control-family": "tree",
@@ -298,7 +328,7 @@ function TreeItem({ value, disabled = false, label, className, style, children,
 		"aria-level": level,
 		"aria-selected": tree.selectionMode === "none" ? void 0 : selected,
 		"aria-disabled": disabled || void 0,
-		tabIndex: tree.focusedValue === value ? 0 : -1,
+		tabIndex: tree.tabStopValue === value ? 0 : -1,
 		style: itemStyle
 	};
 	if (!expandable) return /* @__PURE__ */ jsx(TreeItemContext.Provider, {
@@ -321,7 +351,7 @@ function TreeItem({ value, disabled = false, label, className, style, children,
 				...shared,
 				role: "treeitem",
 				"aria-expanded": expanded,
-				tabIndex: tree.focusedValue === value ? 0 : -1,
+				tabIndex: shared.tabIndex,
 				"data-state": expanded ? "open" : "closed",
 				className: cn(renderProps.className, baseClass)
 			}),
@@ -353,7 +383,7 @@ function TreeItemTrigger({ className, children, onClick, render, ...props }) {
 				if (item.expandable) tree.toggleExpanded(item.value);
 				focusItem(tree.getItem(item.value), tree);
 			},
-			className: cn("flex cursor-pointer select-none items-center", "pl-[calc(var(--\\_tree-level,1)*1.25rem)]", "aria-disabled:pointer-events-none", className),
+			className: cn("flex cursor-pointer select-none items-center", "aria-disabled:pointer-events-none", className),
 			children
 		}
 	});
@@ -378,12 +408,20 @@ function TreeItemIndicator({ className, children, ...props }) {
 		"aria-hidden": true,
 		className: cn("inline-flex shrink-0 items-center justify-center", className),
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" })
+		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, {
+			"data-icon-dir": "inline",
+			className: "size-4"
+		})
 	});
 }
 function TreeItemLabel({ className, children, render, ref, ...props }) {
 	const tree = useTree();
 	const item = useTreeItem();
+	const { setLabelled } = item;
+	useEffect(() => {
+		setLabelled(true);
+		return () => setLabelled(false);
+	}, [setLabelled]);
 	const labelRef = (node) => {
 		const unregister = tree.registerLabel(item.value, node);
 		const cleanup = setRef(ref, node);
@@ -398,8 +436,10 @@ function TreeItemLabel({ className, children, render, ref, ...props }) {
 		defaultTagName: "span",
 		render,
 		props: {
+			title: typeof children === "string" ? children : void 0,
 			...props,
 			ref: labelRef,
+			id: item.labelId,
 			"data-control-ui": "tree",
 			"data-control-family": "tree",
 			"data-slot": "item-label",

package/dist/ui/trigger-menu.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
+import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
@@ -33,8 +34,11 @@ function TriggerMenu({ open, onOpenChange, anchorRect, side = "top", align = "st
 				"data-popup-part": "list-surface",
 				initialFocus: false,
 				finalFocus: false,
-				className: cn("max-h-[min(18rem,var(--available-height))] w-64 max-w-[var(--available-width)] overflow-y-auto", className),
-				children
+				className: cn("grid max-h-[min(18rem,var(--available-height))] w-64 max-w-[var(--available-width)] grid-rows-[minmax(0,1fr)]", className),
+				children: /* @__PURE__ */ jsx(ScrollArea, {
+					lockAxis: "x",
+					children
+				})
 			})
 		}) })
 	});
@@ -99,6 +103,7 @@ function TriggerMenuGroup({ className, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-kind": "trigger-menu",
 		"data-slot": "group",
+		role: "group",
 		className: cn("flex flex-col", className),
 		...props
 	});

package/dist/user-ask.d.ts

@@ -6,7 +6,7 @@ import { CSSProperties, ComponentProps } from "react";
 type UserAskStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
-export declare function UserAsk({ onComplete, onDismiss, autoFocus, className, children, ...props }: UserAskProps): import("react").JSX.Element;
+export declare function UserAsk({ onComplete, onDismiss, autoFocus, questionStatusLabel, className, children, ...props }: UserAskProps): import("react").JSX.Element;
 export type UserAskHeaderProps = ComponentProps<"header"> & {
   style?: CSSProperties & UserAskKnobStyle;
 };
@@ -44,8 +44,13 @@ export type UserAskFooterProps = ComponentProps<"footer"> & {
   style?: CSSProperties & UserAskKnobStyle;
 };
 export declare function UserAskFooter({ className, ...props }: UserAskFooterProps): import("react").JSX.Element;
-export type UserAskDismissProps = ComponentProps<typeof Button>;
-export declare function UserAskDismiss({ className, children, onClick, ...props }: UserAskDismissProps): import("react").JSX.Element;
-export type UserAskSubmitProps = ComponentProps<typeof Button>;
-export declare function UserAskSubmit({ className, children, disabled, onClick, ...props }: UserAskSubmitProps): import("react").JSX.Element;
+export type UserAskDismissProps = ComponentProps<typeof Button> & {
+  label?: string;
+};
+export declare function UserAskDismiss({ label, className, children, onClick, ...props }: UserAskDismissProps): import("react").JSX.Element;
+export type UserAskSubmitProps = ComponentProps<typeof Button> & {
+  continueLabel?: string;
+  submitLabel?: string;
+};
+export declare function UserAskSubmit({ continueLabel, submitLabel, className, children, disabled, onClick, ...props }: UserAskSubmitProps): import("react").JSX.Element;
 //#endregion

package/dist/user-ask.js

@@ -1,9 +1,10 @@
 "use client";
 import { cn } from "./lib/cn.js";
 import { Button } from "./ui/button.js";
+import { LiveStatus } from "./ui/live-status.js";
 import { useUserAsk } from "./hooks/use-user-ask.js";
 import { Kbd } from "./ui/kbd.js";
-import { createContext, useContext, useEffect, useId, useRef } from "react";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronLeft, ChevronRight, PencilLine } from "lucide-react";
 //#region src/user-ask.tsx
@@ -19,13 +20,18 @@ function useUserAskQuestionContext() {
 	if (!context) throw new Error("UserAsk options must be rendered inside <UserAskQuestion>.");
 	return context;
 }
-function UserAsk({ onComplete, onDismiss, autoFocus = false, className, children, ...props }) {
+function defaultQuestionStatusLabel(current, total, title) {
+	return `Question ${current} of ${total}: ${title}`;
+}
+function UserAsk({ onComplete, onDismiss, autoFocus = false, questionStatusLabel = defaultQuestionStatusLabel, className, children, ...props }) {
 	const ask = useUserAsk({
 		onComplete,
 		onDismiss
 	});
 	const titleId = useId();
 	const panelRef = useRef(null);
+	const [hasNavigated, setHasNavigated] = useState(false);
+	const questionStatus = hasNavigated && ask.activeQuestion ? questionStatusLabel(ask.activeIndex + 1, ask.questions.length, ask.activeQuestion.title) : "";
 	useEffect(() => {
 		if (autoFocus) panelRef.current?.focus();
 	}, [autoFocus]);
@@ -33,6 +39,7 @@ function UserAsk({ onComplete, onDismiss, autoFocus = false, className, children
 	useEffect(() => {
 		if (lastActiveIndex.current === ask.activeIndex) return;
 		lastActiveIndex.current = ask.activeIndex;
+		setHasNavigated(true);
 		const panel = panelRef.current;
 		const active = document.activeElement;
 		const activeIsUsable = active instanceof HTMLElement && panel?.contains(active) && active.checkVisibility();
@@ -43,7 +50,7 @@ function UserAsk({ onComplete, onDismiss, autoFocus = false, className, children
 			...ask,
 			titleId
 		},
-		children: /* @__PURE__ */ jsx("section", {
+		children: /* @__PURE__ */ jsxs("section", {
 			ref: panelRef,
 			"data-control-ui": "user-ask",
 			"data-control-family": "user-ask",
@@ -54,7 +61,7 @@ function UserAsk({ onComplete, onDismiss, autoFocus = false, className, children
 			onKeyDown: ask.handleKeyDown,
 			className: cn("relative w-full", className),
 			...props,
-			children
+			children: [children, /* @__PURE__ */ jsx(LiveStatus, { message: questionStatus })]
 		})
 	});
 }
@@ -212,6 +219,7 @@ function UserAskOption({ value, recommended = false, disabled = false, className
 			role: question.multiple ? "checkbox" : "radio",
 			"aria-checked": selected,
 			disabled,
+			tabIndex: ask.isTabStop(question.id, key) ? 0 : -1,
 			"data-control-ui": "user-ask",
 			"data-control-family": "user-ask",
 			"data-slot": "option",
@@ -297,6 +305,7 @@ function UserAskOptionInput({ label = "Other", placeholder = "Type your own answ
 		role: question.multiple ? "checkbox" : "radio",
 		"aria-checked": false,
 		disabled,
+		tabIndex: ask.isTabStop(question.id, key) ? 0 : -1,
 		"data-control-ui": "user-ask",
 		"data-control-family": "user-ask",
 		"data-slot": "option",
@@ -334,7 +343,7 @@ function UserAskOptionInput({ label = "Other", placeholder = "Type your own answ
 			type: "button",
 			role: "checkbox",
 			"aria-checked": true,
-			"aria-label": `Clear ${label}`,
+			"aria-label": label,
 			"data-control-ui": "user-ask",
 			"data-control-family": "user-ask",
 			"data-slot": "option-indicator",
@@ -343,12 +352,17 @@ function UserAskOptionInput({ label = "Other", placeholder = "Type your own answ
 			onClick: () => ask.select(question.id, key),
 			className: "inline-flex shrink-0 items-center justify-center",
 			children: /* @__PURE__ */ jsx(Check, { className: "size-3" })
-		}) : /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
+		}) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": true,
+			"aria-label": label,
+			tabIndex: -1,
 			"data-control-ui": "user-ask",
 			"data-control-family": "user-ask",
 			"data-slot": "option-indicator",
 			"data-selected": "",
+			onClick: () => inputRef.current?.focus(),
 			className: "inline-flex shrink-0 items-center justify-center",
 			children: /* @__PURE__ */ jsx(PencilLine, { className: "size-3" })
 		}), /* @__PURE__ */ jsx("input", {
@@ -376,7 +390,7 @@ function UserAskFooter({ className, ...props }) {
 		...props
 	});
 }
-function UserAskDismiss({ className, children, onClick, ...props }) {
+function UserAskDismiss({ label = "Dismiss", className, children, onClick, ...props }) {
 	const ask = useUserAskContext();
 	function handleClick(event) {
 		onClick?.(event);
@@ -389,13 +403,17 @@ function UserAskDismiss({ className, children, onClick, ...props }) {
 		type: "button",
 		variant: "quiet",
 		size: "xs",
+		"aria-keyshortcuts": "Escape",
 		onClick: handleClick,
 		className: cn(className),
 		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Dismiss", /* @__PURE__ */ jsx(Kbd, { children: "esc" })] })
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [label, /* @__PURE__ */ jsx(Kbd, {
+			"aria-hidden": "true",
+			children: "Esc"
+		})] })
 	});
 }
-function UserAskSubmit({ className, children, disabled, onClick, ...props }) {
+function UserAskSubmit({ continueLabel = "Continue", submitLabel = "Submit answers", className, children, disabled, onClick, ...props }) {
 	const ask = useUserAskContext();
 	function handleClick(event) {
 		onClick?.(event);
@@ -410,10 +428,12 @@ function UserAskSubmit({ className, children, disabled, onClick, ...props }) {
 		tone: "primary",
 		size: "xs",
 		disabled: disabled ?? !ask.canContinue,
+		"aria-keyshortcuts": "Enter",
 		onClick: handleClick,
 		className,
 		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: ["Continue", /* @__PURE__ */ jsx(Kbd, {
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [ask.isLastQuestion ? submitLabel : continueLabel, /* @__PURE__ */ jsx(Kbd, {
+			"aria-hidden": "true",
 			"data-user-ask-submit-kbd": "true",
 			children: "⏎"
 		})] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {
@@ -40,6 +40,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "diff": "^9.0.0",
+    "frimousse": "^0.4.0",
     "libphonenumber-js": "^1.13.13",
     "lucide-react": "^1.47.0",
     "prosemirror-commands": "^1.7.2",
@@ -69,6 +70,9 @@
     "diff": {
       "optional": true
     },
+    "frimousse": {
+      "optional": true
+    },
     "libphonenumber-js": {
       "optional": true
     },

package/dist/hooks/use-keyboard-navigation.d.ts

@@ -1,3 +0,0 @@
-//#region src/hooks/use-keyboard-navigation.d.ts
-export declare function useKeyboardNavigation(): boolean;
-//#endregion

package/dist/hooks/use-keyboard-navigation.js

@@ -1,22 +0,0 @@
-import { useEffect, useState } from "react";
-//#region src/hooks/use-keyboard-navigation.ts
-function useKeyboardNavigation() {
-	const [keyboardNavigation, setKeyboardNavigation] = useState(false);
-	useEffect(() => {
-		function markKeyboardNavigation(event) {
-			if (event.key === "Tab") setKeyboardNavigation(true);
-		}
-		function clearKeyboardNavigation() {
-			setKeyboardNavigation(false);
-		}
-		document.addEventListener("keydown", markKeyboardNavigation, true);
-		document.addEventListener("pointerdown", clearKeyboardNavigation, true);
-		return () => {
-			document.removeEventListener("keydown", markKeyboardNavigation, true);
-			document.removeEventListener("pointerdown", clearKeyboardNavigation, true);
-		};
-	}, []);
-	return keyboardNavigation;
-}
-//#endregion
-export { useKeyboardNavigation };