@lotics/ui 1.14.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/menu_list_item.tsx

@@ -1,6 +1,7 @@
 import { Ref } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { Text } from "./text";
+import { colors } from "./colors";
 import { Icon, IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
 
@@ -11,13 +12,38 @@ export interface MenuListItemProps {
   description?: string;
   right?: React.ReactNode;
   onPress?: () => void;
+  onHoverIn?: () => void;
+  /** Persistent selection highlight (e.g. the current value in a listbox). */
+  selected?: boolean;
+  /** Roving keyboard highlight, driven by the controlling input via
+   *  `aria-activedescendant`. Distinct from `selected`. */
+  focused?: boolean;
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
   testID?: string;
+  /** DOM id, referenced by a combobox input's `aria-activedescendant`. */
+  nativeID?: string;
+  /** ARIA role. Defaults to `button`; pass `option` for a listbox row. */
+  role?: "menuitem" | "button" | "option";
 }
 
 export function MenuListItem(props: MenuListItemProps) {
-  const { ref, icon, title, description, right, onPress, disabled, style, testID } = props;
+  const {
+    ref,
+    icon,
+    title,
+    description,
+    right,
+    onPress,
+    onHoverIn,
+    selected,
+    focused,
+    disabled,
+    style,
+    testID,
+    nativeID,
+    role = "button",
+  } = props;
 
   const resolvedIcon =
     typeof icon === "string" ? <Icon size={20} name={icon as IconName} /> : icon;
@@ -39,18 +65,26 @@ export function MenuListItem(props: MenuListItemProps) {
     </>
   );
 
-  const containerStyle = [styles.container, style];
+  const containerStyle = [
+    styles.container,
+    selected && styles.selected,
+    focused && !selected && styles.focused,
+    style,
+  ];
 
   if (onPress) {
     return (
       <PressableHighlight
         ref={ref}
         testID={testID}
+        nativeID={nativeID}
         onPress={onPress}
+        onHoverIn={onHoverIn}
         disabled={disabled}
         style={containerStyle}
-        accessibilityRole="button"
+        role={role}
         accessibilityLabel={description ? `${title}, ${description}` : title}
+        aria-selected={selected || undefined}
         aria-disabled={disabled || undefined}
       >
         {inner}
@@ -79,4 +113,10 @@ const styles = StyleSheet.create({
     gap: 2,
     alignItems: "flex-start",
   },
+  selected: {
+    backgroundColor: colors.zinc["100"],
+  },
+  focused: {
+    backgroundColor: colors.zinc["50"],
+  },
 });

package/src/search_select.tsx

@@ -9,9 +9,8 @@ import {
 import { useCallback, useEffect, useId, useRef, useState, type ReactNode } from "react";
 import { colors } from "./colors";
 import { Text } from "./text";
-import { Icon } from "./icon";
 import { TextInputField } from "./text_input_field";
-import { MenuButton } from "./menu_button";
+import { MenuListItem } from "./menu_list_item";
 import { ActivityIndicator } from "./activity_indicator";
 import { Popover, PopoverContent } from "./popover";
 import type { PickerOption } from "./picker";
@@ -30,13 +29,20 @@ export interface SearchSelectProps<T extends string = string, D = unknown> {
   /** Shown — under a heading — when the box is focused but empty (e.g. the
    *  output of `useRecents`). Omit for no recents. */
   recentOptions?: PickerOption<T, D>[];
-  /** Render a rich row from the option (use its `data` payload). Falls back to
-   *  `option.label`. */
-  renderOptionContent?: (option: PickerOption<T, D>) => ReactNode;
-  /** Marks the matching row as the current selection (check + highlight). The
-   *  box itself stays a search affordance — the selection is shown by the host. */
+  /** Row subtitle, read from the option's `data` payload. The row's structure
+   *  and height are owned by the component (a MenuListItem) so every result
+   *  reads consistently — consumers supply data, not markup. */
+  getOptionDescription?: (option: PickerOption<T, D>) => string | undefined;
+  /** Leading accessory (e.g. a status dot / avatar). */
+  renderOptionIcon?: (option: PickerOption<T, D>) => ReactNode;
+  /** Trailing accessory (e.g. a `Badge`). */
+  renderOptionRight?: (option: PickerOption<T, D>) => ReactNode;
+  /** Marks the matching row as the current selection (a highlight). The box
+   *  itself stays a search affordance — the selection is shown by the host. */
   selectedValue?: T | null;
-  /** Show a spinner while results are in flight. */
+  /** True only on the initial load (no results yet) — show a spinner. During
+   *  revalidation / typing, pass the query's (SWR-style) `loading`, which stays
+   *  false while previous rows are kept, so the list never blanks. */
   loading?: boolean;
   /** Debounce for `onSearchChange`, in ms. Default 200. */
   searchDebounceMs?: number;
@@ -53,14 +59,15 @@ export interface SearchSelectProps<T extends string = string, D = unknown> {
   style?: StyleProp<ViewStyle>;
 }
 
-const OPTION_HEIGHT = 44;
+// Approximate row height (MenuListItem: title + description) for scroll-into-view.
+const OPTION_HEIGHT = 52;
 
 /**
- * Search-first combobox: an always-visible search input (the "panel") whose
- * typing drives a debounced, server-side search; results drop into a Popover
- * listbox below. Focused while empty, it offers `recentOptions`. Picking a row
- * fires `onValueChange` and clears the box for the next search — the selection
- * itself is rendered by the host (a summary above, details below).
+ * Search-first combobox: an always-visible white search panel whose typing
+ * drives a debounced, server-side search; results drop into a Popover listbox
+ * of MenuListItem rows below. Focused while empty, it offers `recentOptions`.
+ * Picking a row fires `onValueChange` and clears the box for the next search —
+ * the selection itself is rendered by the host (a summary above, details below).
  *
  * Focus stays on the input the whole time (Popover `manageFocus={false}`); the
  * input owns the keyboard (↑/↓ move the active row via `aria-activedescendant`,
@@ -74,7 +81,9 @@ export function SearchSelect<T extends string = string, D = unknown>(
     onSearchChange,
     onValueChange,
     recentOptions,
-    renderOptionContent,
+    getOptionDescription,
+    renderOptionIcon,
+    renderOptionRight,
     selectedValue = null,
     loading = false,
     searchDebounceMs = 200,
@@ -185,6 +194,7 @@ export function SearchSelect<T extends string = string, D = unknown>(
           autoFocus={autoFocus}
           autoCapitalize="none"
           autoCorrect={false}
+          style={styles.input}
           role="combobox"
           aria-expanded={showList}
           aria-controls={listboxId}
@@ -224,7 +234,7 @@ export function SearchSelect<T extends string = string, D = unknown>(
               // react-native-web forwards it verbatim for assistive tech.
               role={"listbox" as "list"}
             >
-              {loading && searching ? (
+              {loading ? (
                 <View style={styles.statusRow}>
                   <ActivityIndicator />
                 </View>
@@ -235,37 +245,23 @@ export function SearchSelect<T extends string = string, D = unknown>(
                   </Text>
                 </View>
               ) : (
-                list.map((opt, i) => {
-                  const isSelected = opt.value === selectedValue;
-                  return (
-                    <MenuButton
-                      key={opt.value}
-                      nativeID={optionId(i)}
-                      testID={`search-option-${opt.value}`}
-                      role="option"
-                      title={
-                        renderOptionContent ? (
-                          renderOptionContent(opt)
-                        ) : (
-                          <Text userSelect="none" numberOfLines={1}>
-                            {opt.label ?? opt.value}
-                          </Text>
-                        )
-                      }
-                      accessibilityLabel={opt.label ?? opt.value}
-                      focused={i === activeIndex}
-                      selected={isSelected}
-                      right={
-                        isSelected ? (
-                          <Icon name="check" size={18} color={colors.zinc["950"]} />
-                        ) : undefined
-                      }
-                      disabled={opt.disabled}
-                      onPress={() => handleSelect(i)}
-                      onHoverIn={() => setActiveIndex(i)}
-                    />
-                  );
-                })
+                list.map((opt, i) => (
+                  <MenuListItem
+                    key={opt.value}
+                    nativeID={optionId(i)}
+                    testID={`search-option-${opt.value}`}
+                    role="option"
+                    icon={renderOptionIcon?.(opt)}
+                    title={opt.label ?? opt.value}
+                    description={getOptionDescription?.(opt)}
+                    right={renderOptionRight?.(opt)}
+                    focused={i === activeIndex}
+                    selected={opt.value === selectedValue}
+                    disabled={opt.disabled}
+                    onPress={() => handleSelect(i)}
+                    onHoverIn={() => setActiveIndex(i)}
+                  />
+                ))
               )}
             </ScrollView>
           </View>
@@ -276,6 +272,10 @@ export function SearchSelect<T extends string = string, D = unknown>(
 }
 
 const styles = StyleSheet.create({
+  input: {
+    backgroundColor: colors.background,
+    boxShadow: colors.border_shadow,
+  },
   menu: {
     gap: 2,
   },