@paubox/ui 2.0.0 → 3.0.1

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) ─────────────────────
@@ -31069,11 +31069,20 @@ var formatDate = function(iso) {
 // with non-memoized callbacks from the parent) drove an infinite render
 // loop on pages that don't pass `localCandidates`.
 var EMPTY_CANDIDATES = [];
+// Default for the optional `decodeHeader` prop — pass-through.
+var identityDecode = function(s) {
+    return s;
+};
 // ─── Component ──────────────────────────────────────────────────────────────
 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, decodeHeader = param.decodeHeader, _param_testId = param.testId, testId = _param_testId === void 0 ? 'search-omnibox' : _param_testId, _param_initialQuery = param.initialQuery, initialQuery = _param_initialQuery === void 0 ? '' : _param_initialQuery;
+    // Local identity fallback for the optional decoder. Wrapping at use time
+    // (instead of defaulting via destructure) lets us keep the prop strictly
+    // optional and skip an extra closure allocation on every render when the
+    // caller doesn't pass one.
+    var decode = decodeHeader !== null && decodeHeader !== void 0 ? decodeHeader : identityDecode;
     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 +31226,7 @@ var SearchOmnibox = function(param) {
     ]);
     // Remote autocomplete fetch
     useEffect(function() {
-        if (mode !== 'remote' || !debouncedQuery) {
+        if (!fetchSuggestions || !debouncedQuery) {
             setResults([]);
             return;
         }
@@ -31272,7 +31281,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 +31330,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 +31348,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 +31491,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 +31521,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).
@@ -31807,17 +31820,28 @@ var SearchOmnibox = function(param) {
                                         children: /*#__PURE__*/ jsx(Close, {})
                                     })
                                 ]
-                            }, "recent-".concat(item.key));
+                            }, "recent-".concat(idx, "-").concat(item.key));
                         }
                         if (item.kind === 'result') {
                             var result = results.find(function(r) {
                                 return r.message_id === item.key;
                             });
                             if (!result) return null;
+                            // Decode RFC 2047 encoded-words ("=?UTF-8?Q?..?=") and other
+                            // wire-format escapes before rendering. Backend stores the
+                            // raw header bytes; presentation is the caller's concern via
+                            // the optional `decodeHeader` prop. When the prop is
+                            // unset (non-mail bars), `decode` is identity and this is a
+                            // no-op. Highlight markup is left as-is — it's a snippet
+                            // composed server-side from the indexed (already-tokenized)
+                            // text and shouldn't be re-decoded.
+                            var decodedSubject = decode(result.subject);
+                            var decodedFrom = decode(result.from);
                             var _result_to;
+                            var decodedTo = ((_result_to = result.to) !== null && _result_to !== void 0 ? _result_to : []).map(decode);
                             var participants = [
-                                result.from
-                            ].concat(_to_consumable_array$2((_result_to = result.to) !== null && _result_to !== void 0 ? _result_to : [])).filter(Boolean).join(', ');
+                                decodedFrom
+                            ].concat(_to_consumable_array$2(decodedTo)).filter(Boolean).join(', ');
                             return /*#__PURE__*/ jsxs(DropdownRow, {
                                 id: optionId,
                                 role: "option",
@@ -31841,7 +31865,7 @@ var SearchOmnibox = function(param) {
                                                     __html: sanitizeHighlight(result.highlight_subject)
                                                 }
                                             }) : /*#__PURE__*/ jsx("strong", {
-                                                children: result.subject
+                                                children: decodedSubject
                                             }),
                                             /*#__PURE__*/ jsx("span", {
                                                 style: {
@@ -31856,7 +31880,7 @@ var SearchOmnibox = function(param) {
                                         children: formatDate(result.timestamp)
                                     })
                                 ]
-                            }, "result-".concat(item.key));
+                            }, "result-".concat(idx, "-").concat(item.key));
                         }
                         if (item.kind === 'local') {
                             return /*#__PURE__*/ jsx(DropdownRow, {
@@ -31874,7 +31898,7 @@ var SearchOmnibox = function(param) {
                                 children: /*#__PURE__*/ jsx(RowText, {
                                     children: item.key
                                 })
-                            }, "local-".concat(item.key));
+                            }, "local-".concat(idx, "-").concat(item.key));
                         }
                         // footer
                         return /*#__PURE__*/ jsxs(FooterRow, {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "2.0.0",
+  "version": "3.0.1",
   "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,24 @@ 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 decoder applied to header fields (`from`, `to`, `subject`)
+     *  on suggestion rows before they're rendered. Use this to handle
+     *  RFC 2047 encoded-words ("=?UTF-8?Q?Re:_=E2=9A=A1?=") or other
+     *  on-the-wire encodings the backend hasn't already unwrapped.
+     *
+     *  Kept as a prop (rather than hardcoded) so the component stays
+     *  mail-agnostic; mail-bar callers wire in `decodeMimeHeader` from
+     *  paubox-next's `utils/mimeHeader`, non-mail bars can leave it
+     *  undefined. Defaults to identity. */
+    decodeHeader?: (value: string) => string;
+    /** 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, decodeHeader, testId, initialQuery, }: SearchOmniboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;