elastic-input 0.3.4 → 0.3.6

package/README.md

@@ -455,6 +455,40 @@ Pass `HighlightOptions` for matched-paren highlighting:
 buildHighlightedHTML(tokens, DEFAULT_COLORS, { cursorOffset: 5 });
 ```
 
+## Query Formatting
+
+Pretty-print messy or minified queries with `formatQuery` — a pure function (no React or DOM required):
+
+```typescript
+import { formatQuery } from 'elastic-input';
+
+formatQuery('(status:active OR status:lead) AND deal_value:>5000 AND NOT tags:churned');
+// (status:active OR status:lead)
+// AND deal_value:>5000
+// AND NOT tags:churned
+
+formatQuery('(  (status:active AND deal_value:>10000) OR (status:lead AND tags:enterprise)  ) AND created:[2024-01-01 TO 2024-12-31]');
+// (
+//   status:active AND deal_value:>10000
+//   OR status:lead AND tags:enterprise
+// )
+// AND created:[2024-01-01 TO 2024-12-31]
+```
+
+Accepts a raw query string or a pre-parsed `ASTNode`. Options control line-break threshold and indentation:
+
+```typescript
+import type { FormatQueryOptions } from 'elastic-input';
+
+formatQuery(query, { maxLineLength: 80, indent: '\t' });
+```
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `maxLineLength` | `number` | `60` | Lines shorter than this stay inline |
+| `indent` | `string` | `'  '` (2 spaces) | Indent string per nesting level |
+| `whitespaceOperator` | `string` | — | Replace implicit AND (whitespace) with this operator (e.g. `'AND'`, `'&&'`) |
+
 ## Requirements
 
 ### Runtime (Browser)

package/dist/components/AutocompleteDropdown.d.ts

@@ -19,6 +19,8 @@ interface AutocompleteDropdownProps {
     renderSavedSearchItem?: (search: SavedSearch, isSelected: boolean) => React.ReactNode | null | undefined;
     renderDropdownHeader?: (context: CursorContext) => React.ReactNode | null | undefined;
     cursorContext?: CursorContext | null;
+    /** Ref callback to expose the dropdown list element for page-size calculations. */
+    listRefCallback?: (el: HTMLDivElement | null) => void;
     /** Custom class names for dropdown elements. */
     classNames?: {
         dropdown?: string;
@@ -26,5 +28,5 @@ interface AutocompleteDropdownProps {
         dropdownItem?: string;
     };
 }
-export declare function AutocompleteDropdown({ suggestions, selectedIndex, onSelect, position, colors, styles, visible, fixedWidth, renderHistoryItem, renderSavedSearchItem, renderDropdownHeader, cursorContext, classNames, }: AutocompleteDropdownProps): React.ReactPortal | null;
+export declare function AutocompleteDropdown({ suggestions, selectedIndex, onSelect, position, colors, styles, visible, fixedWidth, renderHistoryItem, renderSavedSearchItem, renderDropdownHeader, cursorContext, listRefCallback, classNames, }: AutocompleteDropdownProps): React.ReactPortal | null;
 export {};

package/dist/elastic-input.es.js

@@ -444,6 +444,7 @@ class Parser {
           operator: "AND",
           left: result,
           right,
+          implicit: true,
           start: result.start,
           end: right.end
         };
@@ -526,6 +527,7 @@ class Parser {
           operator: "AND",
           left,
           right,
+          implicit: true,
           start: left.start,
           end: right.end
         };
@@ -2749,6 +2751,7 @@ function AutocompleteDropdown({
   renderSavedSearchItem,
   renderDropdownHeader,
   cursorContext,
+  listRefCallback,
   classNames
 }) {
   const portalRef = React.useRef(null);
@@ -2784,7 +2787,10 @@ function AutocompleteDropdown({
     left: `${position.left}px`,
     ...fixedWidth != null ? { width: `${fixedWidth}px`, minWidth: "unset", maxWidth: "unset" } : {}
   };
-  const content = /* @__PURE__ */ React.createElement("div", { className: cx("ei-dropdown", classNames == null ? void 0 : classNames.dropdown), style: dropdownStyle, ref: listRef, onMouseDown: (e) => e.preventDefault() }, hasHeader && /* @__PURE__ */ React.createElement("div", { className: cx("ei-dropdown-header", classNames == null ? void 0 : classNames.dropdownHeader), style: {
+  const content = /* @__PURE__ */ React.createElement("div", { className: cx("ei-dropdown", classNames == null ? void 0 : classNames.dropdown), style: dropdownStyle, ref: (el) => {
+    listRef.current = el;
+    listRefCallback == null ? void 0 : listRefCallback(el);
+  }, onMouseDown: (e) => e.preventDefault() }, hasHeader && /* @__PURE__ */ React.createElement("div", { className: cx("ei-dropdown-header", classNames == null ? void 0 : classNames.dropdownHeader), style: {
     padding: mergedStyles.dropdownItemPadding || "4px 10px",
     fontSize: "11px",
     color: mergedColors.placeholder,
@@ -2817,6 +2823,9 @@ function AutocompleteDropdown({
     if (suggestion.type === "error") {
       return /* @__PURE__ */ React.createElement("div", { key: i, className: cx("ei-dropdown-item", "ei-dropdown-item--error", classNames == null ? void 0 : classNames.dropdownItem), style: { ...itemStyle, cursor: "default", opacity: 0.8 } }, /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-label", style: { ...getDropdownItemLabelStyle(), color: mergedColors.error } }, suggestion.label || "Error loading suggestions"));
     }
+    if (suggestion.type === "noResults") {
+      return /* @__PURE__ */ React.createElement("div", { key: i, className: cx("ei-dropdown-item", "ei-dropdown-item--no-results", classNames == null ? void 0 : classNames.dropdownItem), style: { ...itemStyle, cursor: "default", opacity: 0.7 } }, suggestion.customContent);
+    }
     if (suggestion.type === "loading") {
       return /* @__PURE__ */ React.createElement("div", { key: i, className: cx("ei-dropdown-item", "ei-dropdown-item--loading", classNames == null ? void 0 : classNames.dropdownItem), style: { ...itemStyle, cursor: "default", opacity: 0.6, justifyContent: "center" } }, /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-label", style: { ...getDropdownItemLabelStyle(), fontStyle: "italic" } }, suggestion.label || "Searching..."), /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-spinner", style: { marginLeft: "6px", display: "inline-block", animation: "elastic-input-spin 1s linear infinite", width: "14px", height: "14px", border: "2px solid", borderColor: `${mergedColors.placeholder} transparent ${mergedColors.placeholder} transparent`, borderRadius: "50%" } }));
     }
@@ -3622,6 +3631,155 @@ function dedup(ranges) {
   }
   return result;
 }
+const DEFAULT_MAX_LINE_LENGTH = 60;
+const DEFAULT_INDENT = "  ";
+function formatQuery(input, options) {
+  const maxLineLength = (options == null ? void 0 : options.maxLineLength) ?? DEFAULT_MAX_LINE_LENGTH;
+  const indent = (options == null ? void 0 : options.indent) ?? DEFAULT_INDENT;
+  const whitespaceOperator = options == null ? void 0 : options.whitespaceOperator;
+  let ast;
+  if (typeof input === "string") {
+    const tokens = new Lexer(input, { savedSearches: true, historySearch: true }).tokenize();
+    const parser = new Parser(tokens);
+    ast = parser.parse();
+  } else {
+    ast = input;
+  }
+  if (!ast) return typeof input === "string" ? input : "";
+  return printNode(ast, 0, maxLineLength, indent, whitespaceOperator);
+}
+function resolveOperator(node, whitespaceOperator) {
+  if (node.implicit) return whitespaceOperator ?? "";
+  return node.operator;
+}
+function inline(node, whitespaceOperator) {
+  switch (node.type) {
+    case "FieldValue": {
+      const val = node.quoted ? `"${node.value}"` : node.value;
+      const op = node.operator === ":" ? ":" : `:${node.operator}`;
+      let s = `${node.field}${op}${val}`;
+      if (node.fuzzy != null) s += `~${node.fuzzy}`;
+      if (node.proximity != null) s += `~${node.proximity}`;
+      if (node.boost != null) s += `^${node.boost}`;
+      return s;
+    }
+    case "BareTerm": {
+      let s = node.quoted ? `"${node.value}"` : node.value;
+      if (node.fuzzy != null) s += `~${node.fuzzy}`;
+      if (node.proximity != null) s += `~${node.proximity}`;
+      if (node.boost != null) s += `^${node.boost}`;
+      return s;
+    }
+    case "Range": {
+      const lb = node.lowerInclusive ? "[" : "{";
+      const rb = node.upperInclusive ? "]" : "}";
+      const lower = node.lowerQuoted ? `"${node.lower}"` : node.lower;
+      const upper = node.upperQuoted ? `"${node.upper}"` : node.upper;
+      const range = `${lb}${lower} TO ${upper}${rb}`;
+      return node.field ? `${node.field}:${range}` : range;
+    }
+    case "Regex":
+      return `/${node.pattern}/`;
+    case "SavedSearch":
+      return `#${node.name}`;
+    case "HistoryRef":
+      return `!${node.ref}`;
+    case "Not":
+      return `NOT ${inline(node.expression, whitespaceOperator)}`;
+    case "Group": {
+      let s = `(${inline(node.expression, whitespaceOperator)})`;
+      if (node.boost != null) s += `^${node.boost}`;
+      return s;
+    }
+    case "FieldGroup": {
+      let s = `${node.field}:(${inline(node.expression, whitespaceOperator)})`;
+      if (node.boost != null) s += `^${node.boost}`;
+      return s;
+    }
+    case "BooleanExpr": {
+      const op = resolveOperator(node, whitespaceOperator);
+      const sep = op ? ` ${op} ` : " ";
+      return `${inline(node.left, whitespaceOperator)}${sep}${inline(node.right, whitespaceOperator)}`;
+    }
+    case "Error":
+      return node.value;
+  }
+}
+function flattenChain(node) {
+  const op = node.operator;
+  const implicit = !!node.implicit;
+  const operands = [];
+  const collect = (n) => {
+    if (n.type === "BooleanExpr" && n.operator === op && !!n.implicit === implicit) {
+      collect(n.left);
+      collect(n.right);
+    } else {
+      operands.push(n);
+    }
+  };
+  collect(node);
+  return { operator: op, implicit, operands };
+}
+function containsGroups(node) {
+  if (node.type === "Group" || node.type === "FieldGroup") return true;
+  if (node.type === "BooleanExpr") return containsGroups(node.left) || containsGroups(node.right);
+  if (node.type === "Not") return containsGroups(node.expression);
+  return false;
+}
+function shouldBreakGroup(expr, maxLineLength) {
+  const inlined = inline(expr);
+  if (inlined.length > maxLineLength) return true;
+  if (containsGroups(expr)) return true;
+  return false;
+}
+function printNode(node, depth, maxLineLength, indent, whitespaceOperator) {
+  const pad = indent.repeat(depth);
+  switch (node.type) {
+    case "BooleanExpr": {
+      const { operator, implicit, operands } = flattenChain(node);
+      const displayOp = implicit ? whitespaceOperator ?? "" : operator;
+      const sep = displayOp ? ` ${displayOp} ` : " ";
+      const inlined = operands.map((o) => inline(o, whitespaceOperator)).join(sep);
+      if (inlined.length <= maxLineLength) {
+        return inlined;
+      }
+      const lines = operands.map((operand, i) => {
+        const printed = printNode(operand, depth, maxLineLength, indent, whitespaceOperator);
+        if (i === 0) return printed;
+        return displayOp ? `${pad}${displayOp} ${printed}` : `${pad}${printed}`;
+      });
+      return lines.join("\n");
+    }
+    case "Group": {
+      if (!shouldBreakGroup(node.expression, maxLineLength)) {
+        let s2 = `(${inline(node.expression, whitespaceOperator)})`;
+        if (node.boost != null) s2 += `^${node.boost}`;
+        return s2;
+      }
+      const inner = printNode(node.expression, depth + 1, maxLineLength, indent, whitespaceOperator);
+      let s = `(
+${indentLines(inner, depth + 1, indent)}
+${pad})`;
+      if (node.boost != null) s += `^${node.boost}`;
+      return s;
+    }
+    case "FieldGroup": {
+      let s = `${node.field}:(${inline(node.expression, whitespaceOperator)})`;
+      if (node.boost != null) s += `^${node.boost}`;
+      return s;
+    }
+    case "Not":
+      return `NOT ${printNode(node.expression, depth, maxLineLength, indent, whitespaceOperator)}`;
+    default:
+      return inline(node, whitespaceOperator);
+  }
+}
+function indentLines(text, depth, indent) {
+  const pad = indent.repeat(depth);
+  return text.split("\n").map((line) => {
+    return line.startsWith(pad) ? line : pad + line;
+  }).join("\n");
+}
 class UndoStack {
   constructor(maxSize = 100) {
     __publicField(this, "stack", []);
@@ -3802,11 +3960,14 @@ function ElasticInput(props) {
   const renderHistoryItem = dropdownConfig == null ? void 0 : dropdownConfig.renderHistoryItem;
   const renderSavedSearchItem = dropdownConfig == null ? void 0 : dropdownConfig.renderSavedSearchItem;
   const renderDropdownHeader = dropdownConfig == null ? void 0 : dropdownConfig.renderHeader;
+  const renderNoResults = dropdownConfig == null ? void 0 : dropdownConfig.renderNoResults;
   const autoSelect = (dropdownConfig == null ? void 0 : dropdownConfig.autoSelect) ?? false;
+  const homeEndKeys = (dropdownConfig == null ? void 0 : dropdownConfig.homeEndKeys) ?? false;
   const multiline = (featuresConfig == null ? void 0 : featuresConfig.multiline) !== false;
   const smartSelectAll = (featuresConfig == null ? void 0 : featuresConfig.smartSelectAll) ?? false;
   const expandSelection = (featuresConfig == null ? void 0 : featuresConfig.expandSelection) ?? false;
   const wildcardWrap = (featuresConfig == null ? void 0 : featuresConfig.wildcardWrap) ?? false;
+  const enableFormatQuery = (featuresConfig == null ? void 0 : featuresConfig.formatQuery) ?? false;
   const lexerOptions = React.useMemo(() => ({
     savedSearches: enableSavedSearches,
     historySearch: enableHistorySearch
@@ -3845,9 +4006,11 @@ function ElasticInput(props) {
     setEditorEl(el);
   }, []);
   const containerRef = React.useRef(null);
+  const dropdownListRef = React.useRef(null);
   const currentValueRef = React.useRef(value || defaultValue || "");
   const debounceTimerRef = React.useRef(null);
   const isComposingRef = React.useRef(false);
+  const keyConsumedByDropdownRef = React.useRef(false);
   const undoStackRef = React.useRef(new UndoStack());
   const typingGroupTimerRef = React.useRef(null);
   const abortControllerRef = React.useRef(null);
@@ -4037,6 +4200,24 @@ function ElasticInput(props) {
       return { ...s, customContent: custom };
     });
   }, [renderFieldHint]);
+  const tryShowNoResults = React.useCallback((context) => {
+    if (!renderNoResults) return false;
+    const content = renderNoResults({ cursorContext: context, partial: context.partial });
+    if (content == null) return false;
+    const noResultsSuggestion = {
+      text: "",
+      label: "",
+      type: "noResults",
+      customContent: content,
+      replaceStart: 0,
+      replaceEnd: 0
+    };
+    setSuggestions([noResultsSuggestion]);
+    setSelectedSuggestionIndex(-1);
+    setShowDatePicker(false);
+    showDropdownAtPosition(32, 300);
+    return true;
+  }, [renderNoResults]);
   const updateSuggestionsFromTokens = React.useCallback((toks, offset) => {
     var _a, _b, _c;
     const result = engineRef.current.getSuggestions(toks, offset);
@@ -4131,10 +4312,12 @@ function ElasticInput(props) {
         setAutocompleteContext(contextType);
         showDropdownAtPosition(newSuggestions.length * 32, 300);
       } else {
-        setShowDropdown(false);
-        setShowDatePicker(false);
-        setSuggestions([]);
         setAutocompleteContext(contextType);
+        if (!tryShowNoResults(result.context)) {
+          setShowDropdown(false);
+          setShowDatePicker(false);
+          setSuggestions([]);
+        }
       }
     } else {
       const token = result.context.token;
@@ -4230,17 +4413,20 @@ function ElasticInput(props) {
             showDropdownAtPosition(mapped.length * 32, 300);
           } else {
             const syncResult = engineRef.current.getSuggestions(stateRef.current.tokens, stateRef.current.cursorOffset);
-            const hintSuggestions = applyFieldHint(
-              syncResult.suggestions.filter((s) => s.type === "hint"),
-              syncResult.context
-            );
-            if (hintSuggestions.length > 0) {
-              setSuggestions(hintSuggestions);
-              setSelectedSuggestionIndex(syncResult.context.partial || autoSelect ? 0 : -1);
-              showDropdownAtPosition(hintSuggestions.length * 32, 300);
+            if (partial && tryShowNoResults(syncResult.context)) {
             } else {
-              setShowDropdown(false);
-              setSuggestions([]);
+              const hintSuggestions = applyFieldHint(
+                syncResult.suggestions.filter((s) => s.type === "hint"),
+                syncResult.context
+              );
+              if (hintSuggestions.length > 0) {
+                setSuggestions(hintSuggestions);
+                setSelectedSuggestionIndex(syncResult.context.partial || autoSelect ? 0 : -1);
+                showDropdownAtPosition(hintSuggestions.length * 32, 300);
+              } else if (!tryShowNoResults(syncResult.context)) {
+                setShowDropdown(false);
+                setSuggestions([]);
+              }
             }
           }
         } catch (e) {
@@ -4265,7 +4451,7 @@ function ElasticInput(props) {
         }
       }, debounceMs);
     }
-  }, [fetchSuggestionsProp, savedSearches, searchHistory, suggestDebounceMs, applyFieldHint, computeDropdownPosition, showDropdownAtPosition, dropdownAlignToInput, dropdownOpen, dropdownOpenIsCallback, dropdownMode, showOperators, effectiveMaxSuggestions, loadingDelay, autoSelect]);
+  }, [fetchSuggestionsProp, savedSearches, searchHistory, suggestDebounceMs, applyFieldHint, computeDropdownPosition, showDropdownAtPosition, dropdownAlignToInput, dropdownOpen, dropdownOpenIsCallback, dropdownMode, showOperators, effectiveMaxSuggestions, loadingDelay, autoSelect, tryShowNoResults]);
   updateSuggestionsRef.current = updateSuggestionsFromTokens;
   const closeDropdown = React.useCallback(() => {
     var _a;
@@ -4613,11 +4799,30 @@ function ElasticInput(props) {
     if (onChange) onChange(entry.value, newAst);
     if (onValidationChange) onValidationChange(newErrors);
   }, [colors, onChange, onValidationChange, closeDropdown]);
+  const getDropdownPageSize = React.useCallback(() => {
+    const list = dropdownListRef.current;
+    if (!list) return 10;
+    const visibleHeight = list.clientHeight;
+    const items = list.querySelectorAll(".ei-dropdown-item");
+    const firstItem = items[0];
+    if (!firstItem) return 10;
+    const itemHeight = firstItem.offsetHeight;
+    if (itemHeight <= 0) return 10;
+    return Math.max(1, Math.floor(visibleHeight / itemHeight));
+  }, []);
   const handleKeyDown = React.useCallback((e) => {
     var _a, _b;
     if (onKeyDownProp) onKeyDownProp(e);
     if (e.defaultPrevented) return;
     const s = stateRef.current;
+    if (enableFormatQuery && e.key === "F" && e.altKey && e.shiftKey && !e.ctrlKey && !e.metaKey) {
+      e.preventDefault();
+      const formatted = formatQuery(currentValueRef.current);
+      if (formatted !== currentValueRef.current) {
+        applyNewValue(formatted, formatted.length);
+      }
+      return;
+    }
     if (editorRef.current && editorRef.current.childNodes.length > 40) {
       const sel = window.getSelection();
       const hasSelection = sel != null && !sel.isCollapsed;
@@ -4768,24 +4973,49 @@ function ElasticInput(props) {
       handleInput();
       return;
     }
+    keyConsumedByDropdownRef.current = false;
     if (s.showDropdown && s.suggestions.length > 0) {
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
+          keyConsumedByDropdownRef.current = true;
           setSelectedSuggestionIndex((i) => i >= s.suggestions.length - 1 ? 0 : i + 1);
           return;
         case "ArrowUp":
           e.preventDefault();
+          keyConsumedByDropdownRef.current = true;
           setSelectedSuggestionIndex((i) => i <= 0 ? s.suggestions.length - 1 : i - 1);
           return;
-        case "PageDown":
+        case "PageDown": {
           e.preventDefault();
-          setSelectedSuggestionIndex((i) => Math.min(i + 10, s.suggestions.length - 1));
+          keyConsumedByDropdownRef.current = true;
+          const pageSize = getDropdownPageSize();
+          setSelectedSuggestionIndex((i) => Math.min(i + pageSize, s.suggestions.length - 1));
           return;
-        case "PageUp":
+        }
+        case "PageUp": {
           e.preventDefault();
-          setSelectedSuggestionIndex((i) => Math.max(i - 10, 0));
+          keyConsumedByDropdownRef.current = true;
+          const pageSize = getDropdownPageSize();
+          setSelectedSuggestionIndex((i) => Math.max(i - pageSize, 0));
           return;
+        }
+        case "Home":
+          if (homeEndKeys && s.selectedSuggestionIndex >= 0) {
+            e.preventDefault();
+            keyConsumedByDropdownRef.current = true;
+            setSelectedSuggestionIndex(0);
+            return;
+          }
+          break;
+        case "End":
+          if (homeEndKeys && s.selectedSuggestionIndex >= 0) {
+            e.preventDefault();
+            keyConsumedByDropdownRef.current = true;
+            setSelectedSuggestionIndex(s.suggestions.length - 1);
+            return;
+          }
+          break;
         case "Enter":
           if (s.selectedSuggestionIndex >= 0) {
             const selected = s.suggestions[s.selectedSuggestionIndex];
@@ -4889,8 +5119,12 @@ function ElasticInput(props) {
       if (onSearch) onSearch(currentValueRef.current, s.ast);
       return;
     }
-  }, [onSearch, closeDropdown, acceptSuggestion, applyNewValue, restoreUndoEntry, multiline, dropdownOpenIsCallback, dropdownMode, updateSuggestionsFromTokens, onKeyDownProp, onTabProp, smartSelectAll, expandSelection]);
+  }, [onSearch, closeDropdown, acceptSuggestion, applyNewValue, restoreUndoEntry, multiline, dropdownOpenIsCallback, dropdownMode, updateSuggestionsFromTokens, onKeyDownProp, onTabProp, smartSelectAll, expandSelection, homeEndKeys, getDropdownPageSize, enableFormatQuery]);
   const handleKeyUp = React.useCallback((e) => {
+    if (keyConsumedByDropdownRef.current) {
+      keyConsumedByDropdownRef.current = false;
+      return;
+    }
     const navKeys = ["ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"];
     if (navKeys.includes(e.key)) {
       if (!editorRef.current) return;
@@ -5034,6 +5268,9 @@ function ElasticInput(props) {
       renderSavedSearchItem,
       renderDropdownHeader,
       cursorContext,
+      listRefCallback: (el) => {
+        dropdownListRef.current = el;
+      },
       classNames: classNames ? { dropdown: classNames.dropdown, dropdownHeader: classNames.dropdownHeader, dropdownItem: classNames.dropdownItem } : void 0
     }
   ), showDatePicker && dropdownPosition ? /* @__PURE__ */ React.createElement(
@@ -5125,141 +5362,6 @@ function walk(node, groupField, out) {
       break;
   }
 }
-const INLINE_MAX_LENGTH = 60;
-const INDENT = "  ";
-function formatQuery(input) {
-  let ast;
-  if (typeof input === "string") {
-    const tokens = new Lexer(input, { savedSearches: true, historySearch: true }).tokenize();
-    const parser = new Parser(tokens);
-    ast = parser.parse();
-  } else {
-    ast = input;
-  }
-  if (!ast) return typeof input === "string" ? input : "";
-  return printNode(ast, 0);
-}
-function inline(node) {
-  switch (node.type) {
-    case "FieldValue": {
-      const val = node.quoted ? `"${node.value}"` : node.value;
-      const op = node.operator === ":" ? ":" : `:${node.operator}`;
-      let s = `${node.field}${op}${val}`;
-      if (node.fuzzy != null) s += `~${node.fuzzy}`;
-      if (node.proximity != null) s += `~${node.proximity}`;
-      if (node.boost != null) s += `^${node.boost}`;
-      return s;
-    }
-    case "BareTerm": {
-      let s = node.quoted ? `"${node.value}"` : node.value;
-      if (node.fuzzy != null) s += `~${node.fuzzy}`;
-      if (node.proximity != null) s += `~${node.proximity}`;
-      if (node.boost != null) s += `^${node.boost}`;
-      return s;
-    }
-    case "Range": {
-      const lb = node.lowerInclusive ? "[" : "{";
-      const rb = node.upperInclusive ? "]" : "}";
-      const lower = node.lowerQuoted ? `"${node.lower}"` : node.lower;
-      const upper = node.upperQuoted ? `"${node.upper}"` : node.upper;
-      const range = `${lb}${lower} TO ${upper}${rb}`;
-      return node.field ? `${node.field}:${range}` : range;
-    }
-    case "Regex":
-      return `/${node.pattern}/`;
-    case "SavedSearch":
-      return `#${node.name}`;
-    case "HistoryRef":
-      return `!${node.ref}`;
-    case "Not":
-      return `NOT ${inline(node.expression)}`;
-    case "Group": {
-      let s = `(${inline(node.expression)})`;
-      if (node.boost != null) s += `^${node.boost}`;
-      return s;
-    }
-    case "FieldGroup": {
-      let s = `${node.field}:(${inline(node.expression)})`;
-      if (node.boost != null) s += `^${node.boost}`;
-      return s;
-    }
-    case "BooleanExpr":
-      return `${inline(node.left)} ${node.operator} ${inline(node.right)}`;
-    case "Error":
-      return node.value;
-  }
-}
-function flattenChain(node) {
-  const op = node.operator;
-  const operands = [];
-  const collect = (n) => {
-    if (n.type === "BooleanExpr" && n.operator === op) {
-      collect(n.left);
-      collect(n.right);
-    } else {
-      operands.push(n);
-    }
-  };
-  collect(node);
-  return { operator: op, operands };
-}
-function containsGroups(node) {
-  if (node.type === "Group" || node.type === "FieldGroup") return true;
-  if (node.type === "BooleanExpr") return containsGroups(node.left) || containsGroups(node.right);
-  if (node.type === "Not") return containsGroups(node.expression);
-  return false;
-}
-function shouldBreakGroup(expr) {
-  const inlined = inline(expr);
-  if (inlined.length > INLINE_MAX_LENGTH) return true;
-  if (containsGroups(expr)) return true;
-  return false;
-}
-function printNode(node, depth) {
-  const pad = INDENT.repeat(depth);
-  switch (node.type) {
-    case "BooleanExpr": {
-      const { operator, operands } = flattenChain(node);
-      const inlined = operands.map((o) => inline(o)).join(` ${operator} `);
-      if (inlined.length <= INLINE_MAX_LENGTH) {
-        return inlined;
-      }
-      const lines = operands.map((operand, i) => {
-        const printed = printNode(operand, depth);
-        return i === 0 ? printed : `${pad}${operator} ${printed}`;
-      });
-      return lines.join("\n");
-    }
-    case "Group": {
-      if (!shouldBreakGroup(node.expression)) {
-        let s2 = `(${inline(node.expression)})`;
-        if (node.boost != null) s2 += `^${node.boost}`;
-        return s2;
-      }
-      const inner = printNode(node.expression, depth + 1);
-      let s = `(
-${indentLines(inner, depth + 1)}
-${pad})`;
-      if (node.boost != null) s += `^${node.boost}`;
-      return s;
-    }
-    case "FieldGroup": {
-      let s = `${node.field}:(${inline(node.expression)})`;
-      if (node.boost != null) s += `^${node.boost}`;
-      return s;
-    }
-    case "Not":
-      return `NOT ${printNode(node.expression, depth)}`;
-    default:
-      return inline(node);
-  }
-}
-function indentLines(text, depth) {
-  const pad = INDENT.repeat(depth);
-  return text.split("\n").map((line) => {
-    return line.startsWith(pad) ? line : pad + line;
-  }).join("\n");
-}
 export {
   AutocompleteEngine,
   DARK_COLORS,

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export type { AutocompleteOptions } from './autocomplete/AutocompleteEngine';
 export { extractValues } from './utils/extractValues';
 export type { ExtractedValue, ExtractedValueKind } from './utils/extractValues';
 export { formatQuery } from './utils/formatQuery';
+export type { FormatQueryOptions } from './utils/formatQuery';
 export { DEFAULT_COLORS, DARK_COLORS, DEFAULT_STYLES, DARK_STYLES } from './constants';
 export type { ElasticInputProps, ElasticInputAPI, FieldConfig, FieldsSource, FieldType, SavedSearch, HistoryEntry, SuggestionItem, ColorConfig, StyleConfig, ValidateValueContext, ValidationResult, ValidateReturn, TabContext, TabActionResult, DropdownConfig, DropdownOpenContext, DropdownOpenProp, FeaturesConfig, ClassNamesConfig, } from './types';
 export type { Token, TokenType } from './lexer/tokens';

package/dist/parser/ast.d.ts

@@ -24,6 +24,8 @@ export interface BooleanExprNode {
     operator: 'AND' | 'OR';
     left: ASTNode;
     right: ASTNode;
+    /** True when the operator was inferred from whitespace (no explicit AND/OR token). */
+    implicit?: boolean;
     start: number;
     end: number;
 }

package/dist/types.d.ts

@@ -269,6 +269,17 @@ export interface DropdownConfig {
      *  empty partial. When false, the first item is only pre-selected after the user
      *  starts typing a partial match. @default false */
     autoSelect?: boolean;
+    /** When true, Home/End keys navigate to the first/last dropdown item while the
+     *  dropdown is open and an item is already selected. When no item is selected
+     *  (index = -1), the keys pass through for normal text cursor movement. @default false */
+    homeEndKeys?: boolean;
+    /** Called when the engine returns zero suggestions. Return a React element to display
+     *  in the dropdown (e.g. "No results for …"), or null/undefined to hide the dropdown.
+     *  Not called during async loading (the spinner handles that). */
+    renderNoResults?: (context: {
+        cursorContext: CursorContext;
+        partial: string;
+    }) => React.ReactNode | null | undefined;
 }
 /**
  * Feature toggles for optional editing behaviors. All default to false except `multiline`.
@@ -282,6 +293,8 @@ export interface FeaturesConfig {
     expandSelection?: boolean;
     /** Pressing `*` with a single value token selected wraps it in wildcards. @default false */
     wildcardWrap?: boolean;
+    /** Enable Alt+Shift+F to pretty-print the query in-place using `formatQuery`. @default false */
+    formatQuery?: boolean;
     /** Enable `#name` saved-search syntax and autocomplete. When false, `#` is a regular character. @default false */
     savedSearches?: boolean;
     /** Enable `!query` history-search syntax and autocomplete. When false, `!` is a regular character. @default false */

package/dist/utils/formatQuery.d.ts

@@ -1,7 +1,18 @@
 import { ASTNode } from '../parser/ast';
 
+/** Options for `formatQuery` pretty-printing. */
+export interface FormatQueryOptions {
+    /** Max length before a line is broken into multiple lines. @default 60 */
+    maxLineLength?: number;
+    /** Indent string for each nesting level. @default '  ' (2 spaces) */
+    indent?: string;
+    /** When set, replaces implicit AND (whitespace between terms) with this operator
+     *  string in the output. By default, implicit AND is preserved as whitespace.
+     *  @example 'AND' — turns `status:active name:john` into `status:active AND name:john` */
+    whitespaceOperator?: string;
+}
 /**
  * Pretty-print an Elasticsearch query string.
  * Accepts a raw query string or a pre-parsed AST node.
  */
-export declare function formatQuery(input: string | ASTNode): string;
+export declare function formatQuery(input: string | ASTNode, options?: FormatQueryOptions): string;

package/package.json

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