elastic-input 0.3.1 → 0.3.2

package/dist/autocomplete/suggestionTypes.d.ts

@@ -1,7 +1,7 @@
 export interface Suggestion {
     text: string;
     label: string;
-    description?: string;
+    description?: any;
     type?: string;
     replaceStart: number;
     replaceEnd: number;

package/dist/elastic-input.es.js

@@ -1180,7 +1180,8 @@ const DEFAULT_COLORS = {
   regexAlternation: "#8250df",
   regexText: "#0a3069",
   matchedParenBg: "#fff3cd",
-  warning: "#d4a72c"
+  warning: "#d4a72c",
+  historyDescription: "#656d76"
 };
 const DARK_COLORS = {
   fieldName: "#79c0ff",
@@ -1208,7 +1209,8 @@ const DARK_COLORS = {
   regexAlternation: "#d2a8ff",
   regexText: "#a5d6ff",
   matchedParenBg: "#3d3222",
-  warning: "#e3b341"
+  warning: "#e3b341",
+  historyDescription: "#484f58"
 };
 const DEFAULT_STYLES = {
   fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace",
@@ -1530,7 +1532,7 @@ class AutocompleteEngine {
     return this.searchHistory.slice(0, this.maxSuggestions).map((h) => ({
       text: AutocompleteEngine.wrapHistoryQuery(h.query),
       label: h.label || h.query,
-      description: h.timestamp ? new Date(h.timestamp).toLocaleDateString() : void 0,
+      description: h.description,
       type: "history",
       replaceStart: start,
       replaceEnd: end,
@@ -2799,7 +2801,7 @@ function AutocompleteDropdown({
           whiteSpace: "normal",
           wordBreak: "break-all",
           width: "100%"
-        } }, highlightMatch(suggestion.label, suggestion.matchPartial, isSelected)), /* @__PURE__ */ React.createElement("span", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" } }, suggestion.description && /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-desc", style: { ...getDropdownItemDescStyle(), flex: 1 } }, suggestion.description), /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-type", style: { ...getDropdownItemTypeStyle(isSelected, mergedStyles), marginLeft: "auto" } }, "history")))
+        } }, highlightMatch(suggestion.label, suggestion.matchPartial, isSelected)), /* @__PURE__ */ React.createElement("span", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" } }, suggestion.description != null && /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-desc", style: { ...getDropdownItemDescStyle(), flex: 1, color: mergedColors.historyDescription, opacity: 1 } }, suggestion.description), /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-type", style: { ...getDropdownItemTypeStyle(isSelected, mergedStyles), marginLeft: "auto" } }, "history")))
       );
     }
     if (suggestion.type === "savedSearch" && renderSavedSearchItem && suggestion.sourceData) {
@@ -3735,13 +3737,14 @@ function ElasticInput(props) {
   const effectiveMaxSuggestions = maxSuggestions || DEFAULT_MAX_SUGGESTIONS;
   const suggestDebounceMs = dropdownConfig == null ? void 0 : dropdownConfig.suggestDebounceMs;
   const dropdownMaxHeightPx = parseInt((stylesProp == null ? void 0 : stylesProp.dropdownMaxHeight) || "300", 10) || 300;
-  const enableSavedSearches = (featuresConfig == null ? void 0 : featuresConfig.savedSearches) ?? false;
-  const enableHistorySearch = (featuresConfig == null ? void 0 : featuresConfig.historySearch) ?? false;
+  const enableSavedSearches = (featuresConfig == null ? void 0 : featuresConfig.savedSearches) ?? !!savedSearches;
+  const enableHistorySearch = (featuresConfig == null ? void 0 : featuresConfig.historySearch) ?? !!searchHistory;
   const showSavedSearchHint = (dropdownConfig == null ? void 0 : dropdownConfig.showSavedSearchHint) ?? enableSavedSearches;
   const showHistoryHint = (dropdownConfig == null ? void 0 : dropdownConfig.showHistoryHint) ?? enableHistorySearch;
   const showOperators = (dropdownConfig == null ? void 0 : dropdownConfig.showOperators) !== false;
   const triggerOnNavigation = (dropdownOpenIsCallback || dropdownMode !== "input") && (dropdownConfig == null ? void 0 : dropdownConfig.onNavigation) !== false;
   const navigationDelay = (dropdownConfig == null ? void 0 : dropdownConfig.navigationDelay) ?? 0;
+  const loadingDelay = (dropdownConfig == null ? void 0 : dropdownConfig.loadingDelay) ?? 0;
   const renderFieldHint = dropdownConfig == null ? void 0 : dropdownConfig.renderFieldHint;
   const renderHistoryItem = dropdownConfig == null ? void 0 : dropdownConfig.renderHistoryItem;
   const renderSavedSearchItem = dropdownConfig == null ? void 0 : dropdownConfig.renderSavedSearchItem;
@@ -3786,6 +3789,7 @@ function ElasticInput(props) {
   const abortControllerRef = React.useRef(null);
   const highlightTimerRef = React.useRef(null);
   const navDelayTimerRef = React.useRef(null);
+  const loadingDelayTimerRef = React.useRef(null);
   const asyncActiveRef = React.useRef(false);
   const datePickerInitRef = React.useRef(null);
   const datePickerReplaceRef = React.useRef(null);
@@ -3993,6 +3997,10 @@ function ElasticInput(props) {
       asyncActiveRef.current = false;
       (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      if (loadingDelayTimerRef.current) {
+        clearTimeout(loadingDelayTimerRef.current);
+        loadingDelayTimerRef.current = null;
+      }
       const init = computeDatePickerInit(result.context, parseDateProp);
       const prevInit = datePickerInitRef.current;
       datePickerInitRef.current = init;
@@ -4020,6 +4028,10 @@ function ElasticInput(props) {
       asyncActiveRef.current = false;
       (_b = abortControllerRef.current) == null ? void 0 : _b.abort();
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+      if (loadingDelayTimerRef.current) {
+        clearTimeout(loadingDelayTimerRef.current);
+        loadingDelayTimerRef.current = null;
+      }
       const newSuggestions = applyFieldHint(result.suggestions, result.context);
       if (newSuggestions.length > 0) {
         setSuggestions(newSuggestions);
@@ -4038,20 +4050,28 @@ function ElasticInput(props) {
       const token = result.context.token;
       const start = token ? token.start : offset;
       const end = token ? token.end : offset;
-      const loadingLabel = "Searching...";
-      const loadingSuggestion = {
-        text: "",
-        label: loadingLabel,
-        type: "loading",
-        replaceStart: start,
-        replaceEnd: end
+      const showSpinner = () => {
+        loadingDelayTimerRef.current = null;
+        const loadingSuggestion = {
+          text: "",
+          label: "Searching...",
+          type: "loading",
+          replaceStart: start,
+          replaceEnd: end
+        };
+        setSuggestions([loadingSuggestion]);
+        if (!dropdownAlignToInput) setShowDropdown(false);
+        setShowDatePicker(false);
+        setSelectedSuggestionIndex(-1);
+        showDropdownAtPosition(32, 300);
       };
-      setSuggestions([loadingSuggestion]);
-      if (!dropdownAlignToInput) setShowDropdown(false);
-      setShowDatePicker(false);
-      setSelectedSuggestionIndex(-1);
+      if (loadingDelayTimerRef.current) clearTimeout(loadingDelayTimerRef.current);
+      if (loadingDelay > 0) {
+        loadingDelayTimerRef.current = setTimeout(showSpinner, loadingDelay);
+      } else {
+        showSpinner();
+      }
       setAutocompleteContext(contextType);
-      showDropdownAtPosition(32, 300);
     }
     if (willFetchAsync) {
       const partial = result.context.partial;
@@ -4086,7 +4106,7 @@ function ElasticInput(props) {
             mapped = fetched.map((h) => ({
               text: AutocompleteEngine.wrapHistoryQuery(h.query),
               label: h.label || h.query,
-              description: h.timestamp ? new Date(h.timestamp).toLocaleDateString() : void 0,
+              description: h.description,
               type: "history",
               replaceStart: start,
               replaceEnd: end,
@@ -4109,6 +4129,10 @@ function ElasticInput(props) {
               matchPartial: partial
             }));
           }
+          if (loadingDelayTimerRef.current) {
+            clearTimeout(loadingDelayTimerRef.current);
+            loadingDelayTimerRef.current = null;
+          }
           mapped = mapped.slice(0, effectiveMaxSuggestions);
           if (mapped.length > 0) {
             setSuggestions(mapped);
@@ -4130,6 +4154,10 @@ function ElasticInput(props) {
             }
           }
         } catch (e) {
+          if (loadingDelayTimerRef.current) {
+            clearTimeout(loadingDelayTimerRef.current);
+            loadingDelayTimerRef.current = null;
+          }
           if (!controller.signal.aborted) {
             const errorMsg = e instanceof Error ? e.message : "Error loading suggestions";
             const errorSuggestion = {
@@ -4147,7 +4175,7 @@ function ElasticInput(props) {
         }
       }, debounceMs);
     }
-  }, [fetchSuggestionsProp, savedSearches, searchHistory, suggestDebounceMs, applyFieldHint, computeDropdownPosition, showDropdownAtPosition, dropdownAlignToInput, dropdownOpen, dropdownOpenIsCallback, dropdownMode, showOperators, effectiveMaxSuggestions]);
+  }, [fetchSuggestionsProp, savedSearches, searchHistory, suggestDebounceMs, applyFieldHint, computeDropdownPosition, showDropdownAtPosition, dropdownAlignToInput, dropdownOpen, dropdownOpenIsCallback, dropdownMode, showOperators, effectiveMaxSuggestions, loadingDelay]);
   updateSuggestionsRef.current = updateSuggestionsFromTokens;
   const closeDropdown = React.useCallback(() => {
     var _a;
@@ -4348,6 +4376,7 @@ function ElasticInput(props) {
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
       if (highlightTimerRef.current) clearTimeout(highlightTimerRef.current);
       if (navDelayTimerRef.current) clearTimeout(navDelayTimerRef.current);
+      if (loadingDelayTimerRef.current) clearTimeout(loadingDelayTimerRef.current);
       (_a = abortControllerRef.current) == null ? void 0 : _a.abort();
     };
   }, []);

package/dist/types.d.ts

@@ -67,10 +67,10 @@ export interface SavedSearch {
 export interface HistoryEntry {
     /** The query string from the history entry. */
     query: string;
-    /** Unix timestamp (ms) of when the query was executed. Used for ordering. */
-    timestamp?: number;
     /** Optional label for display in the autocomplete dropdown. Falls back to `query`. */
     label?: string;
+    /** Optional description shown below the label (e.g. date, category). Rendered as-is. */
+    description?: React.ReactNode;
 }
 /** An item returned by the async `fetchSuggestions` callback for field value autocomplete. */
 export interface SuggestionItem {
@@ -140,6 +140,8 @@ export interface ColorConfig {
     matchedParenBg?: string;
     /** Warning-severity squiggly underlines (e.g. ambiguous precedence). */
     warning?: string;
+    /** Color for history item descriptions. Set to `'transparent'` to hide. */
+    historyDescription?: string;
 }
 /**
  * Structural and layout style overrides for the input and dropdown.
@@ -241,6 +243,10 @@ export interface DropdownConfig {
      *  immediate. If the user types before the delay elapses, the timer is cancelled.
      *  Ignored when `onNavigation` is false. @default 0 */
     navigationDelay?: number;
+    /** Delay in ms before showing the "Searching..." spinner on first entry into an
+     *  async field. If the fetch resolves before the delay, the spinner never appears.
+     *  Subsequent keystrokes preserve previous results regardless of this setting. @default 0 */
+    loadingDelay?: number;
     /** Custom renderer for field value hints. Return a React element for rich content,
      *  or null/undefined for the default hint. */
     renderFieldHint?: (field: FieldConfig, partial: string) => React.ReactNode | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elastic-input",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Syntax-aware smart autocomplete input for Elastic query syntax",
   "license": "MIT",
   "repository": {