@paubox/ui 2.0.0 → 3.0.0

package/index.esm.js

@@ -30939,12 +30939,12 @@ function _templateObject9() {
 }
 function _templateObject10() {
     var data = _tagged_template_literal$5([
-        "\n  border-top: 1px solid ",
-        ";\n  ",
+        "\n  ",
         "\n  color: ",
-        ";\n  html.dark & {\n    border-top-color: ",
-        ";\n    color: ",
-        ";\n  }\n"
+        ";\n  html.dark & {\n    color: ",
+        ";\n  }\n  /* Divider above the footer only when there are suggestion rows above\n     it. When the footer is the only item in the dropdown (fetchSuggestions\n     false, no candidates, non-empty query), the static border-top would\n     bleed past the rounded corners of the dropdown container as a stray\n     line at the top of the menu. */\n  &:not(:first-child) {\n    border-top: 1px solid ",
+        ";\n    html.dark & {\n      border-top-color: ",
+        ";\n    }\n  }\n"
     ]);
     _templateObject10 = function _templateObject() {
         return data;
@@ -30992,7 +30992,7 @@ var DropdownRow = styled.button(_templateObject6$1(), spacing(1), spacing(1), sp
 var RowIcon = styled.span(_templateObject7$1(), neutral500$1);
 var RowText = styled.span(_templateObject8$1());
 var RowMeta = styled.span(_templateObject9(), $paragraph300Regular, neutral600$1, neutral300$1);
-var FooterRow = styled(DropdownRow)(_templateObject10(), neutral200$1, $paragraph200Regular, neutral700$1, surfaceRaised, neutral300$1);
+var FooterRow = styled(DropdownRow)(_templateObject10(), $paragraph200Regular, neutral700$1, neutral300$1, neutral200$1, surfaceRaised);
 var PressEnter = styled.span(_templateObject11(), $paragraph300Regular, neutral500$1);
 var DeleteHandle = styled.span(_templateObject12());
 // ─── Inline icons (kept local to avoid bloating @icons) ─────────────────────
@@ -31073,7 +31073,7 @@ var EMPTY_CANDIDATES = [];
 var SearchOmnibox = function(param) {
     var bar = param.bar, _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? 'Search' : _param_placeholder, _param_pbSearchBaseUrl = param.pbSearchBaseUrl, pbSearchBaseUrl = _param_pbSearchBaseUrl === void 0 ? '' : _param_pbSearchBaseUrl, _param_getAuthToken = param.getAuthToken, getAuthToken = _param_getAuthToken === void 0 ? function() {
         return '';
-    } : _param_getAuthToken, _param_mode = param.mode, mode = _param_mode === void 0 ? 'remote' : _param_mode, _param_withHistory = param.withHistory, withHistory = _param_withHistory === void 0 ? true : _param_withHistory, onResultClick = param.onResultClick, onCommit = param.onCommit, onLiveChange = param.onLiveChange, _param_localCandidates = param.localCandidates, localCandidates = _param_localCandidates === void 0 ? EMPTY_CANDIDATES : _param_localCandidates, _param_testId = param.testId, testId = _param_testId === void 0 ? 'search-omnibox' : _param_testId, _param_initialQuery = param.initialQuery, initialQuery = _param_initialQuery === void 0 ? '' : _param_initialQuery;
+    } : _param_getAuthToken, _param_fetchSuggestions = param.fetchSuggestions, fetchSuggestions = _param_fetchSuggestions === void 0 ? true : _param_fetchSuggestions, _param_withHistory = param.withHistory, withHistory = _param_withHistory === void 0 ? true : _param_withHistory, onResultClick = param.onResultClick, onCommit = param.onCommit, onLiveChange = param.onLiveChange, _param_localCandidates = param.localCandidates, localCandidates = _param_localCandidates === void 0 ? EMPTY_CANDIDATES : _param_localCandidates, _param_testId = param.testId, testId = _param_testId === void 0 ? 'search-omnibox' : _param_testId, _param_initialQuery = param.initialQuery, initialQuery = _param_initialQuery === void 0 ? '' : _param_initialQuery;
     var _useState = _sliced_to_array$4(useState(initialQuery), 2), query = _useState[0], setQuery = _useState[1];
     var _useState1 = _sliced_to_array$4(useState(initialQuery), 2), debouncedQuery = _useState1[0], setDebouncedQuery = _useState1[1];
     var _useState2 = _sliced_to_array$4(useState(false), 2), focused = _useState2[0], setFocused = _useState2[1];
@@ -31217,7 +31217,7 @@ var SearchOmnibox = function(param) {
     ]);
     // Remote autocomplete fetch
     useEffect(function() {
-        if (mode !== 'remote' || !debouncedQuery) {
+        if (!fetchSuggestions || !debouncedQuery) {
             setResults([]);
             return;
         }
@@ -31272,7 +31272,7 @@ var SearchOmnibox = function(param) {
     }, [
         debouncedQuery,
         bar,
-        mode,
+        fetchSuggestions,
         apiFetch
     ]);
     // Tracks the last query value we've notified the parent about via the
@@ -31321,7 +31321,7 @@ var SearchOmnibox = function(param) {
     // re-render even when the previous state was also `[]`, because React
     // bails out only on Object.is equality.
     useEffect(function() {
-        if (mode !== 'local') return;
+        if (fetchSuggestions) return;
         var q = debouncedQuery.trim().toLowerCase();
         if (!q) {
             setLocalMatches(function(prev) {
@@ -31339,13 +31339,13 @@ var SearchOmnibox = function(param) {
         }
     }, [
         debouncedQuery,
-        mode,
+        fetchSuggestions,
         localCandidates
     ]);
     // Live-change notification: fires on debounced typing in both modes.
     // Pages that want to live-filter their table (or fetch as the user
     // types) pass `onLiveChange`; pages that only care about explicit
-    // commits leave it out. Independent of `mode`.
+    // commits leave it out. Independent of `fetchSuggestions`.
     useEffect(function() {
         notifyLiveChange(debouncedQuery);
     }, [
@@ -31482,20 +31482,24 @@ var SearchOmnibox = function(param) {
             });
         }
         if (dropdownState === 'results') {
-            if (mode === 'local') {
-                return localMatches.map(function(s) {
-                    return {
-                        kind: 'local',
-                        key: s
-                    };
-                });
-            }
-            return _to_consumable_array$2(results.slice(0, 5).map(function(r) {
+            // Per PRD §1.5 every typing-state dropdown ends in the
+            // "All search results for X — Press ENTER" footer row, regardless
+            // of how many (or whether any) suggestion rows precede it. Bars
+            // with fetchSuggestions=false and no localCandidates therefore show
+            // only the footer when the user has typed text, which is the only
+            // mobile-friendly affordance for committing the search.
+            var suggestionRows = !fetchSuggestions ? localMatches.map(function(s) {
+                return {
+                    kind: 'local',
+                    key: s
+                };
+            }) : results.slice(0, 5).map(function(r) {
                 return {
                     kind: 'result',
                     key: r.message_id
                 };
-            })).concat([
+            });
+            return _to_consumable_array$2(suggestionRows).concat([
                 {
                     kind: 'footer',
                     key: '__footer__'
@@ -31508,7 +31512,7 @@ var SearchOmnibox = function(param) {
         recent,
         results,
         localMatches,
-        mode
+        fetchSuggestions
     ]);
     // Reset highlight whenever the item set changes — including same-length
     // swaps (e.g. one page of 5 results replaced by a different 5 + footer).

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "type": "module",
   "private": false,
   "publishConfig": {

package/src/lib/SearchOmnibox/SearchOmnibox.d.ts

@@ -25,19 +25,38 @@ export interface SearchOmniboxProps {
     placeholder?: string;
     /**
      * Base URL of the pb_search service (no trailing slash).
-     * Required when `mode='remote'` or `withHistory !== false`. Ignored otherwise.
+     * Required when `fetchSuggestions !== false` or `withHistory !== false`. Ignored otherwise.
      */
     pbSearchBaseUrl?: string;
     /**
      * Returns the current Bearer token to send to pb_search.
-     * Required when `mode='remote'` or `withHistory !== false`. Ignored otherwise.
+     * Required when `fetchSuggestions !== false` or `withHistory !== false`. Ignored otherwise.
      */
     getAuthToken?: () => Promise<string> | string;
     /**
-     * 'remote' (default for mail bars) — autocomplete dropdown fetches results from pb_search.
-     * 'local' — autocomplete dropdown filters `localCandidates` client-side; recent searches still come from Redis (unless `withHistory` is false).
+     * Whether to fetch suggestion rows from pb_search as the user types.
+     * Defaults to `true`.
+     *
+     * - `true` — fires `GET /search/autocomplete` against pb_search on
+     *   debounced typing and renders the top-5 hits above the footer row.
+     *   Use on bars whose data is indexed in pb_search (every mail bar
+     *   today).
+     * - `false` — never fetches `/search/autocomplete`. If `localCandidates`
+     *   is passed, those are filtered client-side and shown as suggestions;
+     *   otherwise only the footer row appears. Use on bars whose data
+     *   isn't indexed in pb_search (rulesets, relays, settings, etc.).
+     *
+     * Independent of:
+     *  - `withHistory`, which gates recent-search behavior (Redis), and
+     *  - the Tab-accept ghost text, which is sourced from recent search
+     *    history and is always on when `withHistory` is enabled.
+     *
+     * Named `fetchSuggestions` rather than `autocomplete` to avoid
+     * collision with the Tab-accept ghost-text autocomplete feature —
+     * both could reasonably be called "autocomplete" but they're
+     * independent.
      */
-    mode?: 'remote' | 'local';
+    fetchSuggestions?: boolean;
     /**
      * Whether to use Redis-backed recent-search history. Defaults to `true`.
      *
@@ -47,12 +66,13 @@ export interface SearchOmniboxProps {
      * - Ghost-text tab autocomplete is disabled (it's sourced from recent searches)
      *
      * Set this to `false` for config / list pages that don't need per-user history.
-     * Pairs naturally with `mode='local'` to keep the component fully decoupled
-     * from pb_search.
+     * Pairs naturally with `fetchSuggestions={false}` to keep the component
+     * fully decoupled from pb_search.
      */
     withHistory?: boolean;
     /** Called when the user clicks a result row in the live-results dropdown
-     *  (remote mode only; the dropdown is a pb_search-fed top-5 list). */
+     *  (only fires when `fetchSuggestions !== false`; the dropdown is a
+     *  pb_search-fed top-5 list). */
     onResultClick?: (result: SearchOmniboxResult) => void;
     /** Called when the user **commits** a search — explicit action.
      *  Triggers: Enter on the input (no row highlighted), click on the
@@ -65,11 +85,14 @@ export interface SearchOmniboxProps {
      *  Fires in both `local` and `remote` modes. Optional — pages that
      *  only care about explicit commits should just not pass this. */
     onLiveChange?: (query: string) => void;
-    /** Local mode only: candidate strings to filter against (e.g. ruleset names, usernames). */
+    /** Optional candidate strings to filter client-side when
+     *  `fetchSuggestions={false}` (e.g. ruleset names, usernames). Ignored
+     *  when `fetchSuggestions` is truthy — pb_search drives the suggestions
+     *  instead. */
     localCandidates?: string[];
     /** Test id prefix; defaults to `search-omnibox`. */
     testId?: string;
     /** Optional initial query (e.g. when restoring from URL state). */
     initialQuery?: string;
 }
-export declare const SearchOmnibox: ({ bar, placeholder, pbSearchBaseUrl, getAuthToken, mode, withHistory, onResultClick, onCommit, onLiveChange, localCandidates, testId, initialQuery, }: SearchOmniboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SearchOmnibox: ({ bar, placeholder, pbSearchBaseUrl, getAuthToken, fetchSuggestions, withHistory, onResultClick, onCommit, onLiveChange, localCandidates, testId, initialQuery, }: SearchOmniboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;