elastic-input 0.3.3 → 0.3.5

package/README.md

@@ -127,6 +127,8 @@ Implicit AND is supported — `status:active level:ERROR` is equivalent to `stat
 | `onTab` | `(context) => TabActionResult` | — | Override Tab key behavior (accept/blur/submit) |
 | `validateValue` | `(ctx) => ValidateReturn` | — | Custom validation for all value types |
 | `parseDate` | `(value: string) => Date \| null` | — | Custom date parser for validation and date picker init |
+| `plainModeLength` | `number` | — | Character count at which highlighting, autocomplete, and validation are disabled for performance |
+| `interceptPaste` | `(text, event) => string \| null \| Promise<…>` | — | Transform or cancel pasted text before insertion; supports async |
 
 ## Field Configuration
 
@@ -348,6 +350,14 @@ const myColors: ColorConfig = {
   cursor: '#1f2328',
   dropdownSelected: '#0969da',
   dropdownHover: '#f6f8fa',
+  // Per-field-type value colors (overrides fieldValue for typed fields)
+  valueTypes: {
+    string: '#0550ae',
+    number: '#0a3069',
+    date: '#8250df',
+    boolean: '#cf222e',
+    ip: '#116329',
+  },
 };
 ```
 
@@ -445,6 +455,39 @@ 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 |
+
 ## 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/components/HighlightedContent.d.ts

@@ -1,9 +1,11 @@
 import { Token } from '../lexer/tokens';
-import { ColorConfig } from '../types';
+import { ColorConfig, FieldType } from '../types';
 
 export interface HighlightOptions {
     cursorOffset?: number;
     /** Custom class name appended to every token span. */
     tokenClassName?: string;
+    /** Field lookup map for per-type value coloring (keyed by field name and aliases). */
+    fieldTypeMap?: Map<string, FieldType>;
 }
 export declare function buildHighlightedHTML(tokens: Token[], colorConfig?: ColorConfig, options?: HighlightOptions): string;

package/dist/elastic-input.es.js

@@ -1180,7 +1180,8 @@ const DEFAULT_COLORS = {
   regexAlternation: "#8250df",
   regexText: "#0a3069",
   matchedParenBg: "#fff3cd",
-  warning: "#d4a72c"
+  warning: "#d4a72c",
+  valueTypes: {}
 };
 const DARK_COLORS = {
   fieldName: "#79c0ff",
@@ -1208,7 +1209,8 @@ const DARK_COLORS = {
   regexAlternation: "#d2a8ff",
   regexText: "#a5d6ff",
   matchedParenBg: "#3d3222",
-  warning: "#e3b341"
+  warning: "#e3b341",
+  valueTypes: {}
 };
 const DEFAULT_STYLES = {
   fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace",
@@ -2623,9 +2625,60 @@ function buildHighlightedHTML(tokens, colorConfig, options) {
   const colors = mergeColors(colorConfig);
   if (tokens.length === 0) return "";
   const parenMatch = (options == null ? void 0 : options.cursorOffset) !== void 0 ? findMatchingParen(tokens, options.cursorOffset) : null;
-  return tokens.map((token) => {
+  const valueTypes = colorConfig == null ? void 0 : colorConfig.valueTypes;
+  const fieldTypeMap = options == null ? void 0 : options.fieldTypeMap;
+  let tokenFieldTypes;
+  if (valueTypes && fieldTypeMap) {
+    tokenFieldTypes = new Array(tokens.length);
+    let pendingFieldName;
+    let sawColon = false;
+    const groupStack = [];
+    for (let i = 0; i < tokens.length; i++) {
+      const t = tokens[i];
+      if (t.type === TokenType.FIELD_NAME) {
+        pendingFieldName = t.value;
+        sawColon = false;
+      } else if (t.type === TokenType.COLON && pendingFieldName) {
+        sawColon = true;
+      } else if (t.type === TokenType.WHITESPACE) ;
+      else if (t.type === TokenType.LPAREN) {
+        if (sawColon && pendingFieldName) {
+          groupStack.push(fieldTypeMap.get(pendingFieldName.toLowerCase()));
+        } else {
+          groupStack.push(void 0);
+        }
+        pendingFieldName = void 0;
+        sawColon = false;
+      } else if (t.type === TokenType.RPAREN) {
+        groupStack.pop();
+        pendingFieldName = void 0;
+        sawColon = false;
+      } else if (t.type === TokenType.VALUE || t.type === TokenType.QUOTED_VALUE || t.type === TokenType.RANGE || t.type === TokenType.REGEX || t.type === TokenType.WILDCARD) {
+        if (sawColon && pendingFieldName) {
+          tokenFieldTypes[i] = fieldTypeMap.get(pendingFieldName.toLowerCase());
+        } else if (groupStack.length > 0) {
+          tokenFieldTypes[i] = groupStack[groupStack.length - 1];
+        }
+        pendingFieldName = void 0;
+        sawColon = false;
+      } else if (t.type === TokenType.AND || t.type === TokenType.OR || t.type === TokenType.NOT) {
+        pendingFieldName = void 0;
+        sawColon = false;
+      } else {
+        pendingFieldName = void 0;
+        sawColon = false;
+      }
+    }
+  }
+  return tokens.map((token, tokenIndex) => {
     const colorKey = TOKEN_COLOR_MAP[token.type] || "text";
-    const color = colors[colorKey] || colors.text;
+    let color = colors[colorKey] || colors.text;
+    if (valueTypes && tokenFieldTypes) {
+      const ft = tokenFieldTypes[tokenIndex];
+      if (ft && valueTypes[ft]) {
+        color = valueTypes[ft];
+      }
+    }
     const escapedValue = escapeHTML(token.value);
     if (token.type === TokenType.WHITESPACE) {
       return escapedValue.replace(/\n/g, "<br>");
@@ -2696,6 +2749,7 @@ function AutocompleteDropdown({
   renderSavedSearchItem,
   renderDropdownHeader,
   cursorContext,
+  listRefCallback,
   classNames
 }) {
   const portalRef = React.useRef(null);
@@ -2731,7 +2785,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,
@@ -3725,7 +3782,9 @@ function ElasticInput(props) {
     onBlur: onBlurProp,
     onTab: onTabProp,
     validateValue,
-    parseDate: parseDateProp
+    parseDate: parseDateProp,
+    plainModeLength,
+    interceptPaste
   } = props;
   const dropdownOpen = (dropdownConfig == null ? void 0 : dropdownConfig.open) ?? (dropdownConfig == null ? void 0 : dropdownConfig.mode) ?? "always";
   const dropdownOpenIsCallback = typeof dropdownOpen === "function";
@@ -3747,6 +3806,8 @@ 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 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;
@@ -3772,6 +3833,16 @@ function ElasticInput(props) {
       cancelled = true;
     };
   }, [fieldsProp]);
+  const fieldTypeMap = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const f of resolvedFields) {
+      map.set(f.name.toLowerCase(), f.type);
+      if (f.aliases) {
+        for (const a of f.aliases) map.set(a.toLowerCase(), f.type);
+      }
+    }
+    return map;
+  }, [resolvedFields]);
   const editorRef = React.useRef(null);
   const [editorEl, setEditorEl] = React.useState(null);
   const editorRefCallback = React.useCallback((el) => {
@@ -3779,9 +3850,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);
@@ -3818,6 +3891,9 @@ function ElasticInput(props) {
   const [validationErrors, setValidationErrors] = React.useState([]);
   const [isFocused, setIsFocused] = React.useState(false);
   const [isEmpty, setIsEmpty] = React.useState(!currentValueRef.current);
+  const [isPlainMode, setIsPlainMode] = React.useState(
+    plainModeLength != null && currentValueRef.current.length >= plainModeLength
+  );
   const [cursorOffset, setCursorOffset] = React.useState(0);
   const [selectionEnd, setSelectionEnd] = React.useState(0);
   const [autocompleteContext, setAutocompleteContext] = React.useState("");
@@ -3887,11 +3963,34 @@ function ElasticInput(props) {
   const HIGHLIGHT_DEBOUNCE_MS = 60;
   const applyHighlight = React.useCallback((tokens2, offset) => {
     if (!editorRef.current) return;
-    const html = buildHighlightedHTML(tokens2, colors, { cursorOffset: offset, tokenClassName: classNames == null ? void 0 : classNames.token });
+    const html = buildHighlightedHTML(tokens2, colors, { cursorOffset: offset, tokenClassName: classNames == null ? void 0 : classNames.token, fieldTypeMap });
     editorRef.current.innerHTML = html;
     setCaretCharOffset(editorRef.current, offset);
   }, [colors]);
   const processInput = React.useCallback((text, updateDropdown) => {
+    const plain = plainModeLength != null && text.length >= plainModeLength;
+    setIsPlainMode(plain);
+    if (plain) {
+      setTokens([]);
+      setAst(null);
+      setValidationErrors([]);
+      setIsEmpty(text.length === 0);
+      setSuggestions([]);
+      setShowDropdown(false);
+      setShowDatePicker(false);
+      if (editorRef.current) {
+        const offset = getCaretCharOffset(editorRef.current);
+        if (editorRef.current.querySelector("span")) {
+          editorRef.current.textContent = text;
+          setCaretCharOffset(editorRef.current, offset);
+        }
+        setCursorOffset(offset);
+        setSelectionEnd(offset);
+      }
+      if (onChange) onChange(text, null);
+      if (onValidationChange) onValidationChange([]);
+      return;
+    }
     const lexer = new Lexer(text, lexerOptions);
     const newTokens = lexer.tokenize();
     const parser = new Parser(newTokens);
@@ -3933,7 +4032,7 @@ function ElasticInput(props) {
     }
     if (onChange) onChange(text, newAst);
     if (onValidationChange) onValidationChange(newErrors);
-  }, [colors, onChange, onValidationChange, applyHighlight]);
+  }, [colors, onChange, onValidationChange, applyHighlight, plainModeLength]);
   const applyFieldHint = React.useCallback((suggestions2, context) => {
     if (!renderFieldHint || context.type !== "FIELD_VALUE" || !context.fieldName) return suggestions2;
     const resolved = engineRef.current.resolveField(context.fieldName);
@@ -4035,7 +4134,7 @@ function ElasticInput(props) {
         setSuggestions(newSuggestions);
         if (!dropdownAlignToInput) setShowDropdown(false);
         setShowDatePicker(false);
-        setSelectedSuggestionIndex(result.context.partial ? 0 : -1);
+        setSelectedSuggestionIndex(result.context.partial || autoSelect ? 0 : -1);
         setAutocompleteContext(contextType);
         showDropdownAtPosition(newSuggestions.length * 32, 300);
       } else {
@@ -4134,7 +4233,7 @@ function ElasticInput(props) {
           mapped = mapped.slice(0, effectiveMaxSuggestions);
           if (mapped.length > 0) {
             setSuggestions(mapped);
-            setSelectedSuggestionIndex(partial ? 0 : -1);
+            setSelectedSuggestionIndex(partial || autoSelect ? 0 : -1);
             showDropdownAtPosition(mapped.length * 32, 300);
           } else {
             const syncResult = engineRef.current.getSuggestions(stateRef.current.tokens, stateRef.current.cursorOffset);
@@ -4144,7 +4243,7 @@ function ElasticInput(props) {
             );
             if (hintSuggestions.length > 0) {
               setSuggestions(hintSuggestions);
-              setSelectedSuggestionIndex(syncResult.context.partial ? 0 : -1);
+              setSelectedSuggestionIndex(syncResult.context.partial || autoSelect ? 0 : -1);
               showDropdownAtPosition(hintSuggestions.length * 32, 300);
             } else {
               setShowDropdown(false);
@@ -4173,7 +4272,7 @@ function ElasticInput(props) {
         }
       }, debounceMs);
     }
-  }, [fetchSuggestionsProp, savedSearches, searchHistory, suggestDebounceMs, applyFieldHint, computeDropdownPosition, showDropdownAtPosition, dropdownAlignToInput, dropdownOpen, dropdownOpenIsCallback, dropdownMode, showOperators, effectiveMaxSuggestions, loadingDelay]);
+  }, [fetchSuggestionsProp, savedSearches, searchHistory, suggestDebounceMs, applyFieldHint, computeDropdownPosition, showDropdownAtPosition, dropdownAlignToInput, dropdownOpen, dropdownOpenIsCallback, dropdownMode, showOperators, effectiveMaxSuggestions, loadingDelay, autoSelect]);
   updateSuggestionsRef.current = updateSuggestionsFromTokens;
   const closeDropdown = React.useCallback(() => {
     var _a;
@@ -4231,7 +4330,7 @@ function ElasticInput(props) {
     const syntaxErrors = parser.getErrors().map((e) => ({ message: e.message, start: e.start, end: e.end }));
     const newErrors = [...syntaxErrors, ...validatorRef.current.validate(newAst, validateValueRef.current, parseDateProp)];
     if (editorRef.current) {
-      const html = buildHighlightedHTML(newTokens, colors, { cursorOffset: newCursorPos, tokenClassName: classNames == null ? void 0 : classNames.token });
+      const html = buildHighlightedHTML(newTokens, colors, { cursorOffset: newCursorPos, tokenClassName: classNames == null ? void 0 : classNames.token, fieldTypeMap });
       editorRef.current.innerHTML = html;
       setCaretCharOffset(editorRef.current, newCursorPos);
     }
@@ -4441,7 +4540,7 @@ function ElasticInput(props) {
     if (matchKey === prevParenMatchRef.current && !colorsChanged) return;
     prevParenMatchRef.current = matchKey;
     const savedOffset = getCaretCharOffset(editorRef.current);
-    const html = buildHighlightedHTML(currentTokens, colors, { cursorOffset: effectiveCursor, tokenClassName: classNames == null ? void 0 : classNames.token });
+    const html = buildHighlightedHTML(currentTokens, colors, { cursorOffset: effectiveCursor, tokenClassName: classNames == null ? void 0 : classNames.token, fieldTypeMap });
     editorRef.current.innerHTML = html;
     setCaretCharOffset(editorRef.current, savedOffset);
   }, [cursorOffset, selectionEnd, isFocused, colors]);
@@ -4503,7 +4602,7 @@ function ElasticInput(props) {
     const newErrors = [...syntaxErrors, ...validatorRef.current.validate(newAst, validateValueRef.current, parseDateProp)];
     const hasSelection = entry.selStart != null && entry.selStart !== entry.cursorPos;
     if (editorRef.current) {
-      const html = buildHighlightedHTML(newTokens, colors, { cursorOffset: entry.cursorPos, tokenClassName: classNames == null ? void 0 : classNames.token });
+      const html = buildHighlightedHTML(newTokens, colors, { cursorOffset: entry.cursorPos, tokenClassName: classNames == null ? void 0 : classNames.token, fieldTypeMap });
       editorRef.current.innerHTML = html;
       if (hasSelection) {
         setSelectionCharRange(editorRef.current, entry.selStart, entry.cursorPos);
@@ -4521,6 +4620,17 @@ 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);
@@ -4590,7 +4700,7 @@ function ElasticInput(props) {
           const newAst = parser.parse();
           const syntaxErrors = parser.getErrors().map((err) => ({ message: err.message, start: err.start, end: err.end }));
           const newErrors = [...syntaxErrors, ...validatorRef.current.validate(newAst, validateValueRef.current, parseDateProp)];
-          const html = buildHighlightedHTML(newTokens, colors, { cursorOffset: newSelEnd, tokenClassName: classNames == null ? void 0 : classNames.token });
+          const html = buildHighlightedHTML(newTokens, colors, { cursorOffset: newSelEnd, tokenClassName: classNames == null ? void 0 : classNames.token, fieldTypeMap });
           editorRef.current.innerHTML = html;
           setSelectionCharRange(editorRef.current, newSelStart, newSelEnd);
           setTokens(newTokens);
@@ -4676,16 +4786,49 @@ function ElasticInput(props) {
       handleInput();
       return;
     }
+    keyConsumedByDropdownRef.current = false;
     if (s.showDropdown && s.suggestions.length > 0) {
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
-          setSelectedSuggestionIndex((i) => Math.min(i + 1, s.suggestions.length - 1));
+          keyConsumedByDropdownRef.current = true;
+          setSelectedSuggestionIndex((i) => i >= s.suggestions.length - 1 ? 0 : i + 1);
           return;
         case "ArrowUp":
           e.preventDefault();
-          setSelectedSuggestionIndex((i) => Math.max(i - 1, -1));
+          keyConsumedByDropdownRef.current = true;
+          setSelectedSuggestionIndex((i) => i <= 0 ? s.suggestions.length - 1 : i - 1);
+          return;
+        case "PageDown": {
+          e.preventDefault();
+          keyConsumedByDropdownRef.current = true;
+          const pageSize = getDropdownPageSize();
+          setSelectedSuggestionIndex((i) => Math.min(i + pageSize, s.suggestions.length - 1));
+          return;
+        }
+        case "PageUp": {
+          e.preventDefault();
+          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];
@@ -4789,8 +4932,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]);
   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;
@@ -4806,12 +4953,10 @@ function ElasticInput(props) {
     requestAnimationFrame(() => {
       if (editorRef.current) {
         const toks = stateRef.current.tokens;
-        if (toks.length > 0) {
-          const offset = getCaretCharOffset(editorRef.current);
-          triggerSuggestionsFromNavigation(toks, offset);
-        } else {
-          triggerSuggestionsFromNavigation([], 0);
-        }
+        const offset = toks.length > 0 ? getCaretCharOffset(editorRef.current) : 0;
+        setCursorOffset(offset);
+        setSelectionEnd(offset);
+        triggerSuggestionsFromNavigation(toks, offset);
       }
     });
   }, [handleInput, triggerSuggestionsFromNavigation, onFocusProp]);
@@ -4836,16 +4981,31 @@ function ElasticInput(props) {
     }
     triggerSuggestionsFromNavigation(stateRef.current.tokens, selRange.start);
   }, [triggerSuggestionsFromNavigation, closeDropdown]);
-  const handlePaste = React.useCallback((e) => {
-    e.preventDefault();
-    const pastedText = normalizeTypographicChars(e.clipboardData.getData("text/plain"));
+  const doPaste = React.useCallback((text) => {
     if (typingGroupTimerRef.current) {
       clearTimeout(typingGroupTimerRef.current);
       typingGroupTimerRef.current = null;
     }
-    insertTextAtCursor(pastedText);
+    insertTextAtCursor(text);
     handleInput();
   }, [handleInput]);
+  const handlePaste = React.useCallback((e) => {
+    e.preventDefault();
+    const pastedText = normalizeTypographicChars(e.clipboardData.getData("text/plain"));
+    if (interceptPaste) {
+      const result = interceptPaste(pastedText, e);
+      if (result != null && typeof (result == null ? void 0 : result.then) === "function") {
+        result.then((transformed) => {
+          if (transformed != null) doPaste(transformed);
+        }).catch(() => {
+        });
+      } else if (result != null) {
+        doPaste(result);
+      }
+    } else {
+      doPaste(pastedText);
+    }
+  }, [interceptPaste, doPaste]);
   const handleDateSelect = React.useCallback((dateStr) => {
     const s = stateRef.current;
     const saved = datePickerReplaceRef.current;
@@ -4921,6 +5081,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(
@@ -5012,6 +5175,143 @@ 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,
@@ -5023,5 +5323,6 @@ export {
   Parser,
   Validator,
   buildHighlightedHTML,
-  extractValues
+  extractValues,
+  formatQuery
 };

package/dist/index.d.ts

@@ -9,6 +9,8 @@ export { AutocompleteEngine } from './autocomplete/AutocompleteEngine';
 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/types.d.ts

@@ -140,6 +140,14 @@ export interface ColorConfig {
     matchedParenBg?: string;
     /** Warning-severity squiggly underlines (e.g. ambiguous precedence). */
     warning?: string;
+    /** Per-field-type value colors. Overrides `fieldValue` for values belonging to a typed field. */
+    valueTypes?: {
+        string?: string;
+        number?: string;
+        date?: string;
+        boolean?: string;
+        ip?: string;
+    };
 }
 /**
  * Structural and layout style overrides for the input and dropdown.
@@ -257,6 +265,14 @@ export interface DropdownConfig {
     /** Custom renderer for a header above the suggestion list. Return a React element,
      *  or null/undefined for no header. */
     renderHeader?: (context: CursorContext) => React.ReactNode | null | undefined;
+    /** Automatically select the first suggestion when the dropdown opens, even with an
+     *  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;
 }
 /**
  * Feature toggles for optional editing behaviors. All default to false except `multiline`.
@@ -295,21 +311,6 @@ export interface ElasticInputAPI {
     /** Selects a character range in the input. Focuses the input if not already focused. */
     setSelection: (start: number, end: number) => void;
 }
-/**
- * Props for the ElasticInput component.
- *
- * @example
- * ```tsx
- * <ElasticInput
- *   fields={[
- *     { name: 'status', type: 'string', suggestions: ['active', 'inactive'] },
- *     { name: 'price', type: 'number' },
- *   ]}
- *   onSearch={(query, ast) => console.log('Search:', query)}
- *   placeholder="Search..."
- * />
- * ```
- */
 /** Context passed to the `onTab` callback. */
 export interface TabContext {
     /** The currently selected suggestion, or `null` if nothing is highlighted. */
@@ -356,6 +357,21 @@ export interface ClassNamesConfig {
 }
 /** Field definitions — either a static array or an async loader function. */
 export type FieldsSource = FieldConfig[] | (() => Promise<FieldConfig[]>);
+/**
+ * Props for the ElasticInput component.
+ *
+ * @example
+ * ```tsx
+ * <ElasticInput
+ *   fields={[
+ *     { name: 'status', type: 'string', suggestions: ['active', 'inactive'] },
+ *     { name: 'price', type: 'number' },
+ *   ]}
+ *   onSearch={(query, ast) => console.log('Search:', query)}
+ *   placeholder="Search..."
+ * />
+ * ```
+ */
 export interface ElasticInputProps {
     /** Field definitions that determine autocomplete, validation, and syntax highlighting. Accepts a static array or an async loader function. */
     fields: FieldsSource;
@@ -438,4 +454,27 @@ export interface ElasticInputProps {
      * The built-in parser handles YYYY-MM-DD, ISO 8601, and `now±Xd` syntax.
      */
     parseDate?: (value: string) => Date | null;
+    /** When the input text reaches this character count, syntax highlighting, autocomplete,
+     *  and validation are disabled and the input becomes a plain text box. `0` = always plain. */
+    plainModeLength?: number;
+    /**
+     * Intercept paste events before text is inserted. Receives the plain-text clipboard
+     * content and the original ClipboardEvent. Return:
+     * - A `string` to insert that text instead of the original
+     * - `null` to cancel the paste entirely
+     * - A `Promise` resolving to either — the component remains fully interactive while
+     *   the promise is pending (no text is inserted until it resolves)
+     *
+     * @example
+     * ```tsx
+     * interceptPaste={async (text) => {
+     *   if (text.includes('\n')) {
+     *     const choice = await showDialog('Join lines with AND?');
+     *     return choice ? text.split('\n').join(' AND ') : text;
+     *   }
+     *   return text; // pass through unchanged
+     * }}
+     * ```
+     */
+    interceptPaste?: (text: string, event: React.ClipboardEvent) => string | null | Promise<string | null>;
 }

package/dist/utils/formatQuery.d.ts

@@ -0,0 +1,14 @@
+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;
+}
+/**
+ * Pretty-print an Elasticsearch query string.
+ * Accepts a raw query string or a pre-parsed AST node.
+ */
+export declare function formatQuery(input: string | ASTNode, options?: FormatQueryOptions): string;

package/package.json

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