@paubox/ui 1.19.1 → 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, onSubmitFullSearch = param.onSubmitFullSearch, _param_localCandidates = param.localCandidates, localCandidates = _param_localCandidates === void 0 ? EMPTY_CANDIDATES : _param_localCandidates, onLocalQueryChange = param.onLocalQueryChange, _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,56 +31272,56 @@ var SearchOmnibox = function(param) {
     }, [
         debouncedQuery,
         bar,
-        mode,
+        fetchSuggestions,
         apiFetch
     ]);
-    // Tracks the last query value we've notified the local-mode parent about,
-    // so synchronous notifications from clear / Enter / selectLocal aren't
-    // echoed ~200ms later by the debounced local-autocomplete effect.
-    var lastLocalNotifyRef = useRef(undefined);
-    // Hold the parent callbacks in refs so `notifyParent` is stable across
-    // renders. Otherwise any caller passing inline arrow functions for
-    // `onSubmitFullSearch` / `onLocalQueryChange` (the common case) would
-    // re-allocate `notifyParent` every render, triggering the local-
-    // autocomplete effect on every render, which in turn calls
-    // `setLocalMatches([])` — a new empty-array reference every time — and
-    // re-renders forever. Refs decouple the parent's reference identity
-    // from the effect's dep array.
-    var onSubmitFullSearchRef = useRef(onSubmitFullSearch);
-    var onLocalQueryChangeRef = useRef(onLocalQueryChange);
+    // Tracks the last query value we've notified the parent about via the
+    // debounced live-change path, so a synchronous commit (Enter / footer /
+    // recent / local) isn't echoed ~200ms later when the debounced effect
+    // fires for the same query.
+    var lastLiveChangeRef = useRef(undefined);
+    // Hold the parent callbacks in refs so the firing functions stay stable
+    // across renders. Otherwise any caller passing inline arrow functions
+    // (the common case) would re-allocate the firing closures every render,
+    // churning effect dependencies and triggering loops. Refs decouple the
+    // parent's reference identity from our effect deps.
+    var onCommitRef = useRef(onCommit);
+    var onLiveChangeRef = useRef(onLiveChange);
     useEffect(function() {
-        onSubmitFullSearchRef.current = onSubmitFullSearch;
+        onCommitRef.current = onCommit;
     }, [
-        onSubmitFullSearch
+        onCommit
     ]);
     useEffect(function() {
-        onLocalQueryChangeRef.current = onLocalQueryChange;
-    }, [
-        onLocalQueryChange
-    ]);
-    // Route parent notifications to the mode-appropriate callback. In local
-    // mode we dedupe so non-idempotent consumers don't see the same query
-    // twice (once synchronously, once via debounce).
-    var notifyParent = useCallback(function(q) {
-        if (mode === 'local') {
-            var _onLocalQueryChangeRef_current;
-            if (lastLocalNotifyRef.current === q) return;
-            lastLocalNotifyRef.current = q;
-            (_onLocalQueryChangeRef_current = onLocalQueryChangeRef.current) === null || _onLocalQueryChangeRef_current === void 0 ? void 0 : _onLocalQueryChangeRef_current.call(onLocalQueryChangeRef, q);
-        } else {
-            var _onSubmitFullSearchRef_current;
-            (_onSubmitFullSearchRef_current = onSubmitFullSearchRef.current) === null || _onSubmitFullSearchRef_current === void 0 ? void 0 : _onSubmitFullSearchRef_current.call(onSubmitFullSearchRef, q);
-        }
+        onLiveChangeRef.current = onLiveChange;
     }, [
-        mode
-    ]);
+        onLiveChange
+    ]);
+    // Fire when the user has explicitly committed (Enter, footer click,
+    // recent-row select, local-row select). Always invokes onCommit, in both
+    // modes. Also seeds `lastLiveChangeRef` so the imminent debounced
+    // `notifyLiveChange` doesn't re-fire for the same query.
+    var fireCommit = useCallback(function(q) {
+        var _onCommitRef_current;
+        lastLiveChangeRef.current = q;
+        (_onCommitRef_current = onCommitRef.current) === null || _onCommitRef_current === void 0 ? void 0 : _onCommitRef_current.call(onCommitRef, q);
+    }, []);
+    // Fire when the debounced query changes — every keystroke (200ms after
+    // the last). Deduped so repeated identical values don't fire twice.
+    // Invokes onLiveChange in both modes.
+    var notifyLiveChange = useCallback(function(q) {
+        var _onLiveChangeRef_current;
+        if (lastLiveChangeRef.current === q) return;
+        lastLiveChangeRef.current = q;
+        (_onLiveChangeRef_current = onLiveChangeRef.current) === null || _onLiveChangeRef_current === void 0 ? void 0 : _onLiveChangeRef_current.call(onLiveChangeRef, q);
+    }, []);
     // Local autocomplete: filter candidates client-side.
     // The `setLocalMatches` calls are guarded against no-op writes — calling
     // setState with a fresh `[]` literal every render is enough to cause a
     // 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) {
@@ -31337,12 +31337,20 @@ var SearchOmnibox = function(param) {
                 }) ? prev : next;
             });
         }
-        notifyParent(debouncedQuery);
     }, [
         debouncedQuery,
-        mode,
-        localCandidates,
-        notifyParent
+        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 `fetchSuggestions`.
+    useEffect(function() {
+        notifyLiveChange(debouncedQuery);
+    }, [
+        debouncedQuery,
+        notifyLiveChange
     ]);
     // Note: click-outside dismissal is handled by Popper's built-in useClickOutside
     // (it watches the anchorRef + its own container ref) via the onClose callback.
@@ -31474,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__'
@@ -31500,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).
@@ -31541,7 +31553,7 @@ var SearchOmnibox = function(param) {
                 // empty input is a legitimate "clear filter, show everything" action.
                 // recordSearch itself guards against recording empty strings, so we
                 // don't pollute history.
-                notifyParent(q);
+                fireCommit(q);
                 void recordSearch(q);
                 setFocused(false);
                 return [
@@ -31553,14 +31565,14 @@ var SearchOmnibox = function(param) {
             return _ref.apply(this, arguments);
         };
     }(), [
-        notifyParent,
+        fireCommit,
         recordSearch
     ]);
     var selectRecent = useCallback(function() {
         var _ref = _async_to_generator(function(q) {
             return _ts_generator(this, function(_state) {
                 setQuery(q);
-                notifyParent(q);
+                fireCommit(q);
                 void recordSearch(q);
                 setFocused(false);
                 return [
@@ -31572,7 +31584,7 @@ var SearchOmnibox = function(param) {
             return _ref.apply(this, arguments);
         };
     }(), [
-        notifyParent,
+        fireCommit,
         recordSearch
     ]);
     var selectResult = useCallback(function(result) {
@@ -31586,11 +31598,11 @@ var SearchOmnibox = function(param) {
     ]);
     var selectLocal = useCallback(function(s) {
         setQuery(s);
-        notifyParent(s);
+        fireCommit(s);
         void recordSearch(s);
         setFocused(false);
     }, [
-        notifyParent,
+        fireCommit,
         recordSearch
     ]);
     var handleKeyDown = function(e) {
@@ -31725,10 +31737,10 @@ var SearchOmnibox = function(param) {
                         onClick: function() {
                             var _inputRef_current;
                             setQuery('');
-                            // Clearing the input is a "remove the filter" action: notify
-                            // the parent so the page-level data resets to its unfiltered
+                            // Clearing the input is a "remove the filter" action — fire
+                            // commit so the page-level data resets to its unfiltered
                             // state, the same way pressing Enter on an empty input would.
-                            notifyParent('');
+                            fireCommit('');
                             // After a prior commit the dropdown is closed (`focused=false`)
                             // even though the input has DOM focus. Re-engage explicitly so
                             // the recent-searches view reappears for the now-empty input.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "1.19.1",
+  "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,21 +66,33 @@ 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;
-    /** Remote mode: called when user clicks a result row in the dropdown. */
+    /** Called when the user clicks a result row in the live-results dropdown
+     *  (only fires when `fetchSuggestions !== false`; the dropdown is a
+     *  pb_search-fed top-5 list). */
     onResultClick?: (result: SearchOmniboxResult) => void;
-    /** Called when user presses Enter (or clicks the "All results" footer) to commit a full search. */
-    onSubmitFullSearch?: (query: string) => void;
-    /** Local mode only: candidate strings to filter against (e.g. ruleset names, usernames). */
+    /** Called when the user **commits** a search — explicit action.
+     *  Triggers: Enter on the input (no row highlighted), click on the
+     *  "All search results for X" footer row, Enter or click on a
+     *  recent-search row, Enter or click on a local-match row.
+     *  Fires in both `local` and `remote` modes. */
+    onCommit?: (query: string) => void;
+    /** Called when the user's typed query changes, debounced (~200ms).
+     *  Lets pages live-filter their table or fetch as the user types.
+     *  Fires in both `local` and `remote` modes. Optional — pages that
+     *  only care about explicit commits should just not pass this. */
+    onLiveChange?: (query: string) => void;
+    /** 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[];
-    /** Local mode: fires when the (debounced) query changes; let the page filter its own table. */
-    onLocalQueryChange?: (query: string) => void;
     /** 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, onSubmitFullSearch, localCandidates, onLocalQueryChange, 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;