elastic-input 0.3.5 → 0.3.6

package/README.md

@@ -487,6 +487,7 @@ formatQuery(query, { maxLineLength: 80, indent: '\t' });
 |--------|------|---------|-------------|
 | `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
 

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
         };
@@ -2821,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%" } }));
     }
@@ -3626,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", []);
@@ -3806,12 +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
@@ -4044,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);
@@ -4138,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;
@@ -4237,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) {
@@ -4272,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;
@@ -4636,6 +4815,14 @@ function ElasticInput(props) {
     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;
@@ -4932,7 +5119,7 @@ function ElasticInput(props) {
       if (onSearch) onSearch(currentValueRef.current, s.ast);
       return;
     }
-  }, [onSearch, closeDropdown, acceptSuggestion, applyNewValue, restoreUndoEntry, multiline, dropdownOpenIsCallback, dropdownMode, updateSuggestionsFromTokens, onKeyDownProp, onTabProp, smartSelectAll, expandSelection, homeEndKeys, getDropdownPageSize]);
+  }, [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;
@@ -5175,143 +5362,6 @@ function walk(node, groupField, out) {
       break;
   }
 }
-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;
-  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);
-}
-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, maxLineLength) {
-  const inlined = inline(expr);
-  if (inlined.length > maxLineLength) return true;
-  if (containsGroups(expr)) return true;
-  return false;
-}
-function printNode(node, depth, maxLineLength, indent) {
-  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 <= maxLineLength) {
-        return inlined;
-      }
-      const lines = operands.map((operand, i) => {
-        const printed = printNode(operand, depth, maxLineLength, indent);
-        return i === 0 ? printed : `${pad}${operator} ${printed}`;
-      });
-      return lines.join("\n");
-    }
-    case "Group": {
-      if (!shouldBreakGroup(node.expression, maxLineLength)) {
-        let s2 = `(${inline(node.expression)})`;
-        if (node.boost != null) s2 += `^${node.boost}`;
-        return s2;
-      }
-      const inner = printNode(node.expression, depth + 1, maxLineLength, indent);
-      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)})`;
-      if (node.boost != null) s += `^${node.boost}`;
-      return s;
-    }
-    case "Not":
-      return `NOT ${printNode(node.expression, depth, maxLineLength, indent)}`;
-    default:
-      return inline(node);
-  }
-}
-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");
-}
 export {
   AutocompleteEngine,
   DARK_COLORS,

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

@@ -273,6 +273,13 @@ export interface DropdownConfig {
      *  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`.
@@ -286,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

@@ -6,6 +6,10 @@ export interface FormatQueryOptions {
     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.

package/package.json

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