@lotics/ui 7.19.2 → 7.19.3

package/package.json

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

package/src/use_option_list.test.ts

@@ -190,4 +190,43 @@ describe("useOptionList", () => {
     });
     expect(view.result.current.rows.map((r) => r.option.value)).toEqual(["z"]);
   });
+
+  it("controlled server-filtered mode browses recents on an empty query", () => {
+    const recentOptions = [
+      { value: "r1", label: "Recent one" },
+      { value: "r2", label: "Recent two" },
+    ];
+    // A server search has nothing for an empty term — recents are the idle list.
+    const params: UseOptionListParams<string, false> = {
+      options: [],
+      search: { mode: "controlled", query: "", serverFiltered: true },
+      recentOptions,
+    };
+    const view = renderHook((p: UseOptionListParams<string, false>) => useOptionList(p), {
+      initialProps: params,
+    });
+    expect(view.result.current.searching).toBe(false);
+    expect(view.result.current.rows.map((r) => r.option.value)).toEqual(["r1", "r2"]);
+    // Typing hands the list back to the server's results.
+    view.rerender({
+      ...params,
+      options: [{ value: "z", label: "Zucchini" }],
+      search: { mode: "controlled", query: "zu", serverFiltered: true },
+    });
+    expect(view.result.current.rows.map((r) => r.option.value)).toEqual(["z"]);
+  });
+
+  it("an empty controlled query without recents browses the full option set", () => {
+    // The `recentOptions ?? options` idle contract — a consumer that supplies
+    // browse options (server or local) and no recents keeps its full list.
+    for (const serverFiltered of [true, false]) {
+      const view = renderHook((p: UseOptionListParams<string, false>) => useOptionList(p), {
+        initialProps: {
+          options: OPTS,
+          search: { mode: "controlled" as const, query: "", serverFiltered },
+        },
+      });
+      expect(view.result.current.rows.map((r) => r.option.value)).toEqual(["a", "b", "c"]);
+    }
+  });
 });

package/src/use_option_list.ts

@@ -172,12 +172,15 @@ export function useOptionList<T extends string, MULTI extends boolean = false, D
     [options],
   );
   const filtered = useMemo(() => {
-    if (searchMode === "none" || serverFiltered) return cleanOptions;
+    if (searchMode === "none") return cleanOptions;
     if (!searching) {
       // Empty query: a controlled (Combobox) field browses recents, else its full
-      // local set; an internal field shows everything.
+      // local set; an internal field shows everything. This must precede the
+      // server-filtered short-circuit — a server search returns nothing for an
+      // empty term, so recents are the only idle content it has.
       return searchMode === "controlled" ? (recentOptions ?? cleanOptions) : cleanOptions;
     }
+    if (serverFiltered) return cleanOptions;
     const q = normalizeForSearch(query);
     return cleanOptions.filter((o) => normalizeForSearch(o.label ?? o.value).includes(q));
   }, [searchMode, serverFiltered, searching, cleanOptions, recentOptions, query]);