@lotics/ui 7.7.0 → 7.8.0

package/AGENTS.md

@@ -227,7 +227,10 @@ parts render the CHROME, composed as children — never a render-prop pile:
 
 It's a SELECT by default (`ComboboxInput` with NO `icon` → a trailing chevron); opt INTO the
 search-box look with `ComboboxInput icon="search"` only when typing-to-search is primary (a
-large/remote set). `allowCustom` appends a "Create …" row (`customOptionLabel`) when the query
+large/remote set). For a select that the user can RESET, pass `clearable` + `onClear` (deselect):
+the chevron shows while the field is empty and a clear ✕ replaces it once there's a value/query;
+pressing ✕ clears the text and reopens the full-browse list, so `onClear` lands back on the whole
+set (on focus an empty field already browses everything — `recentOptions ?? all`). `allowCustom` appends a "Create …" row (`customOptionLabel`) when the query
 matches no option, emitting the typed text as the value — so a value not in the known set means
 CREATE. Wire that branch to a create overlay (a modal `Dialog` for 4+ fields, an anchored popover
 for 1–3) that builds the new record and attaches it; existing matches attach directly. The create

package/package.json

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

package/src/combobox.tsx

@@ -182,7 +182,13 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
   const single = value ?? null;
   const reflectedText = single ? (single.label ?? single.value) : "";
 
-  const [query, setQuery] = useState(reflectSelection && single ? reflectedText : "");
+  // The live edit buffer. `null` = the user isn't editing: the input reflects the
+  // committed selection's label and the list browses the FULL set. A string (incl.
+  // "") = the user is searching: the input shows it and the list filters by it.
+  // This one nullable carries the bit that (value, inputText) alone can't — after
+  // selecting FPP, the input reads "FPP" whether the user just reopened (browse)
+  // or retyped it (filter); `draft` is null in the first case, "FPP" in the second.
+  const [draft, setDraft] = useState<string | null>(null);
   const [open, setOpen] = useState(autoFocus);
   const triggerRef = useRef<View>(null);
   const inputRef = useRef<RNTextInput>(null);
@@ -197,9 +203,11 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
   const isServer = onSearchChange !== undefined;
   const debouncedSearch = useDebouncedCallback(onSearchChange ?? (() => {}), searchDebounceMs);
 
-  // The displayed text equals the reflected selection until the user types — show
-  // ALL options then (browse), not the list filtered to the selected label.
-  const filterQuery = reflectSelection && single && query === reflectedText ? "" : query;
+  // What the input shows: the live draft while editing, else the reflected label.
+  const inputText = draft ?? (reflectSelection && single ? reflectedText : "");
+  // What the list filters by: nothing while reflecting a selection (browse), the
+  // draft while editing — so retyping the selected label still filters to it.
+  const filterQuery = draft ?? "";
 
   const findOption = useCallback(
     (val: T): PickerOption<T, D> =>
@@ -215,7 +223,9 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
         debouncedSearch.cancel();
         onSearchChange?.("");
       }
-      setQuery(reflectSelection ? (opt.label ?? opt.value) : "");
+      // Stop editing — the input reflects the new label (or clears, when
+      // reflectSelection is off) and the next open browses the full set.
+      setDraft(null);
       setOpen(false);
       // The refocus below must not reopen the just-closed menu.
       suppressFocusOpenRef.current = true;
@@ -247,7 +257,7 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
 
   const handleChangeText = useCallback(
     (text: string) => {
-      setQuery(text);
+      setDraft(text);
       if (!disabled) setOpen(true);
       if (isServer) debouncedSearch(text);
     },
@@ -285,7 +295,7 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     // Boundary cast: the engine is generic per-instance, the context type is not.
     // `ComboboxContent` casts back to its own `<T, D>` before touching rows.
     list: list as unknown as UseOptionList<string, unknown>,
-    query,
+    query: inputText,
     open,
     showList,
     loading,
@@ -349,9 +359,14 @@ export interface ComboboxInputProps {
 export function ComboboxInput(props: ComboboxInputProps) {
   const { icon, placeholder, clearable = false, onClear, clearLabel, accessibilityLabel, testID } = props;
   const ctx = useComboboxContext("ComboboxInput");
-  // Select mode (no leading icon): a trailing chevron so the field reads as a
-  // picker, not a free-text search. The clear ✕ owns the right slot when present.
-  const showChevron = !icon && !clearable;
+  // Select mode (no leading icon): the right slot holds the clear ✕ when the field
+  // carries text (a reflected selection or a live query) AND it's clearable;
+  // otherwise the trailing chevron, so an EMPTY picker still reads as a picker.
+  // The two never show together — ✕ replaces the chevron once there's something to
+  // clear, and pressing it resets the query + reopens the browse list (via
+  // `handleChangeText("")`) so the consumer's `onClear` lands back on the full set.
+  const showClear = clearable && ctx.query.length > 0;
+  const showChevron = !icon && !showClear;
 
   return (
     <View ref={ctx.triggerRef}>
@@ -375,7 +390,9 @@ export function ComboboxInput(props: ComboboxInputProps) {
         autoCorrect={false}
         accessibilityLabel={accessibilityLabel}
         style={[
-          showChevron ? styles.selectInput : undefined,
+          // Select mode reserves the right gutter for whichever trailing affordance
+          // is up (chevron when empty, ✕ when there's text) so neither overlaps it.
+          !icon ? styles.selectInput : undefined,
           // Gate on `showList`, not `open`: an empty query with no options has
           // `open=true` but renders NO dropdown, so a ring tied to `open` would
           // show with nothing below it AND linger after blur (no popover fires a