@paubox/ui 1.19.0 → 2.0.0

package/index.esm.js

@@ -31063,11 +31063,17 @@ var formatDate = function(iso) {
     }
     return null;
 };
+// Stable empty-array reference for the `localCandidates` default. Using
+// `localCandidates = []` would allocate a fresh array on every render,
+// which churns the local-autocomplete effect's dep array and (combined
+// with non-memoized callbacks from the parent) drove an infinite render
+// loop on pages that don't pass `localCandidates`.
+var EMPTY_CANDIDATES = [];
 // ─── 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, onSubmitFullSearch = param.onSubmitFullSearch, _param_localCandidates = param.localCandidates, localCandidates = _param_localCandidates === void 0 ? [] : _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_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;
     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];
@@ -31269,43 +31275,82 @@ var SearchOmnibox = function(param) {
         mode,
         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);
-    // 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') {
-            if (lastLocalNotifyRef.current === q) return;
-            lastLocalNotifyRef.current = q;
-            onLocalQueryChange === null || onLocalQueryChange === void 0 ? void 0 : onLocalQueryChange(q);
-        } else {
-            onSubmitFullSearch === null || onSubmitFullSearch === void 0 ? void 0 : onSubmitFullSearch(q);
-        }
+    // 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() {
+        onCommitRef.current = onCommit;
     }, [
-        mode,
-        onLocalQueryChange,
-        onSubmitFullSearch
+        onCommit
     ]);
-    // Local autocomplete: filter candidates client-side
+    useEffect(function() {
+        onLiveChangeRef.current = onLiveChange;
+    }, [
+        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;
         var q = debouncedQuery.trim().toLowerCase();
         if (!q) {
-            setLocalMatches([]);
+            setLocalMatches(function(prev) {
+                return prev.length === 0 ? prev : [];
+            });
         } else {
-            setLocalMatches(localCandidates.filter(function(c) {
+            var next = localCandidates.filter(function(c) {
                 return c.toLowerCase().includes(q);
-            }).slice(0, 5));
+            }).slice(0, 5);
+            setLocalMatches(function(prev) {
+                return prev.length === next.length && prev.every(function(v, i) {
+                    return v === next[i];
+                }) ? prev : next;
+            });
         }
-        notifyParent(debouncedQuery);
     }, [
         debouncedQuery,
         mode,
-        localCandidates,
-        notifyParent
+        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`.
+    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.
@@ -31504,7 +31549,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 [
@@ -31516,14 +31561,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 [
@@ -31535,7 +31580,7 @@ var SearchOmnibox = function(param) {
             return _ref.apply(this, arguments);
         };
     }(), [
-        notifyParent,
+        fireCommit,
         recordSearch
     ]);
     var selectResult = useCallback(function(result) {
@@ -31549,11 +31594,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) {
@@ -31688,10 +31733,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.0",
+  "version": "2.0.0",
   "type": "module",
   "private": false,
   "publishConfig": {

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

@@ -51,17 +51,25 @@ export interface SearchOmniboxProps {
      * 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
+     *  (remote mode only; 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;
+    /** 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;
     /** Local mode only: candidate strings to filter against (e.g. ruleset names, usernames). */
     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, mode, withHistory, onResultClick, onCommit, onLiveChange, localCandidates, testId, initialQuery, }: SearchOmniboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;