@botiverse/raft-ui 0.47.0 → 0.47.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [0.47.1](https://github.com/botiverse/raft-design/compare/v0.47.0...v0.47.1) (2026-10-28)
+
+### Fixed
+
+- **SelectActionItem:** when its action adds items above the row and the list stays open, the row keeps the highlight, so the next arrow key goes on from the row instead of from whatever item now sits at its old position. ([#873](https://github.com/botiverse/raft-design/pull/873))
+- **SelectActionItem:** the docs no longer ask for `aria-expanded`, which ARIA does not allow on an option; remove it where you added it. ([#873](https://github.com/botiverse/raft-design/pull/873))
+  - Docs: https://raft-design.botiverse.build/components/select/
+
 ## [0.47.0](https://github.com/botiverse/raft-design/compare/v0.46.0...v0.47.0) (2026-10-28)
 
 ### Changed

package/dist/index.d.mts

@@ -1157,8 +1157,9 @@ type SelectActionItemProps = StyledProps<Omit<Select$1.Item.Props, "value" | "la
 /**
  * An action row inside the list, placed last after a `SelectSeparator`, such as
  * Show All. It is reached by the arrow keys and typeahead like an item, but
- * pressing it runs `onAction` instead of choosing a value. Pass `aria-expanded`
- * when it shows or hides more of the list.
+ * pressing it runs `onAction` instead of choosing a value. It is an option to
+ * assistive technology, so it takes no `aria-expanded`: its label says what it
+ * does.
  */
 export declare function SelectActionItem({ className, onAction, closeOnAction, ...props }: SelectActionItemProps): import("react").JSX.Element;
 type SelectLabelProps = StyledProps<Select$1.Label.Props>;

package/dist/index.mjs

@@ -4211,7 +4211,7 @@ const select = tv({
 		itemText: ["min-w-0 flex-1 line-clamp-2 wrap-anywhere"],
 		itemDescription: [
 			"order-last min-w-0 basis-full wrap-anywhere",
-			"[[data-slot=select-item-leading]~&]:ps-[calc(--spacing(4)+--spacing(2.5))]",
+			"[[data-slot=select-item-leading]~&]:ps-[calc(--spacing(4)+(--spacing(2.5)))]",
 			"font-sans text-caption font-normal text-foreground-hint"
 		],
 		label: ["m-0", "font-sans text-footnote font-semibold text-foreground-muted"],
@@ -4277,6 +4277,24 @@ function findActionValue(value) {
 	if (value instanceof SelectActionValue) return value;
 	if (Array.isArray(value)) return value.find((entry) => entry instanceof SelectActionValue);
 }
+/**
+* Base UI keeps the highlight by position. When an action adds items above its
+* row, the same position then holds another item while focus stays on the row,
+* and the next arrow key starts from the wrong place. Once the list has
+* re-rendered, focus the list and then the row again: the row's focus handler
+* re-reads its position and moves the highlight back to it.
+*/
+function keepActionHighlighted(event) {
+	const target = event.target;
+	if (!(target instanceof Element)) return;
+	const row = target.closest("[data-slot=\"select-action-item\"]");
+	if (!row) return;
+	requestAnimationFrame(() => {
+		if (!row.isConnected || row.hasAttribute("data-highlighted")) return;
+		row.closest("[role=\"listbox\"]")?.focus({ preventScroll: true });
+		row.focus({ preventScroll: true });
+	});
+}
 function Select({ chrome = "default", onValueChange, onOpenChange, isItemEqualToValue, itemToStringLabel, itemToStringValue, ...props }) {
 	const pendingActionClose = useRef(void 0);
 	const handleValueChange = useCallback((next, details) => {
@@ -4290,6 +4308,7 @@ function Select({ chrome = "default", onValueChange, onOpenChange, isItemEqualTo
 		if (details.reason !== "item-press") return;
 		pendingActionClose.current = action.closeOnActionRef.current;
 		action.onActionRef.current?.(details.event);
+		if (!action.closeOnActionRef.current) keepActionHighlighted(details.event);
 	}, [onValueChange]);
 	const handleOpenChange = useCallback((open, details) => {
 		const closeOnAction = pendingActionClose.current;
@@ -4505,8 +4524,9 @@ function SelectItemDescription({ className, id, ...props }) {
 /**
 * An action row inside the list, placed last after a `SelectSeparator`, such as
 * Show All. It is reached by the arrow keys and typeahead like an item, but
-* pressing it runs `onAction` instead of choosing a value. Pass `aria-expanded`
-* when it shows or hides more of the list.
+* pressing it runs `onAction` instead of choosing a value. It is an option to
+* assistive technology, so it takes no `aria-expanded`: its label says what it
+* does.
 */
 function SelectActionItem({ className, onAction, closeOnAction = false, ...props }) {
 	const chrome = useSelectChrome();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.47.0",
+  "version": "0.47.1",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",