@botiverse/raft-ui 0.31.0 → 0.32.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [0.32.0](https://github.com/botiverse/raft-design/compare/v0.31.0...v0.32.0) (2026-10-23)
+
+### Added
+
+- **ChoiceList** (wip): `matchedValues`, for a product with its own search (a ranked people search shared with mentions). With it ChoiceList shows the values the caller's search found, in the caller's order, instead of matching `searchText` itself; the chosen rows still come first and "No match" still shows. A value given twice shows once. Pass matches for the current text, and keep the previous ones while a slower search works. ([#780](https://github.com/botiverse/raft-design/pull/780))
+  - Docs: https://raft-design.botiverse.build/components/choice-list/
+
 ## [0.31.0](https://github.com/botiverse/raft-design/compare/v0.30.0...v0.31.0) (2026-10-23)
 
 ### Design System

package/dist/wip.d.mts

@@ -762,6 +762,13 @@ type ChoiceListCommonProps = {
    */
   searchValue?: string;
   onSearchValueChange?: (value: string) => void;
+  /**
+   * The values of the items that match the search text, in the order to show
+   * them, for a caller with its own search (a ranked people search shared
+   * with mentions). With it ChoiceList doesn't match `searchText` itself; it
+   * still keeps the chosen rows first and says when nothing matches.
+   */
+  matchedValues?: readonly string[];
   /** The clear button's accessible name. */
   clearSearchLabel: string;
   /** The line under the chosen rows when nothing else matches. */

package/dist/wip.mjs

@@ -2400,15 +2400,18 @@ function searchTextOf(item) {
 	if (item.searchText !== void 0) return item.searchText;
 	return typeof item.label === "string" ? item.label : "";
 }
-function visibleItems(items, needle, pinned, chosen) {
+function visibleItems(items, needle, pinned, chosen, matchedValues) {
 	if (!needle) return {
 		rows: items,
 		noMatch: false
 	};
-	const matches = (item) => searchTextOf(item).toLowerCase().includes(needle);
-	const isPinned = (item) => pinned.includes(item.value);
+	const matched = matchedValues ? new Set(matchedValues) : null;
+	const matches = (item) => matched ? matched.has(item.value) : searchTextOf(item).toLowerCase().includes(needle);
+	const pinnedSet = new Set(pinned);
+	const isPinned = (item) => pinnedSet.has(item.value);
 	const top = items.filter((item) => isPinned(item) || chosen.includes(item.value) && !matches(item));
-	const rest = items.filter((item) => !top.includes(item) && matches(item));
+	const byValue = matchedValues ? new Map(items.map((item) => [item.value, item])) : null;
+	const rest = (byValue && matched ? [...matched].flatMap((value) => byValue.get(value) ?? []) : items).filter((item) => !top.includes(item) && matches(item));
 	return {
 		rows: [...top, ...rest],
 		noMatch: !items.some(matches)
@@ -2441,7 +2444,7 @@ function layoutSections(rows, groups) {
 	};
 }
 function ChoiceList(props) {
-	const { items, search = "auto", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled = false, searchLabel, searchPlaceholder, defaultSearchValue = "", searchValue, onSearchValueChange, clearSearchLabel, noMatchLabel, empty, groups, footer, fill = false, className } = props;
+	const { items, search = "auto", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled = false, searchLabel, searchPlaceholder, defaultSearchValue = "", searchValue, onSearchValueChange, matchedValues, clearSearchLabel, noMatchLabel, empty, groups, footer, fill = false, className } = props;
 	const value = props.value;
 	const chosen = useMemo(() => value === null ? [] : typeof value === "string" ? [value] : value, [value]);
 	const [ownQuery, setOwnQuery] = useState(defaultSearchValue);
@@ -2471,7 +2474,7 @@ function ChoiceList(props) {
 		setPinnedFor(query);
 		setPinned(chosen);
 	}
-	const { rows, noMatch } = visibleItems(items, searchable ? query.trim().toLowerCase() : "", pinned, chosen);
+	const { rows, noMatch } = visibleItems(items, searchable ? query.trim().toLowerCase() : "", pinned, chosen, matchedValues);
 	const hasAction = rows.some((item) => item.action !== void 0 && item.action !== null);
 	const slots = choiceList({
 		scroll: searchable && !fill,

package/package.json

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