elastic-input 0.3.4 → 0.3.5

package/README.md

@@ -455,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/elastic-input.es.js

@@ -2749,6 +2749,7 @@ function AutocompleteDropdown({
   renderSavedSearchItem,
   renderDropdownHeader,
   cursorContext,
+  listRefCallback,
   classNames
 }) {
   const portalRef = React.useRef(null);
@@ -2784,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,
@@ -3803,6 +3807,7 @@ function ElasticInput(props) {
   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;
@@ -3845,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);
@@ -4613,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);
@@ -4768,24 +4786,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 +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;
@@ -5034,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(
@@ -5125,9 +5175,11 @@ function walk(node, groupField, out) {
       break;
   }
 }
-const INLINE_MAX_LENGTH = 60;
-const INDENT = "  ";
-function formatQuery(input) {
+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();
@@ -5137,7 +5189,7 @@ function formatQuery(input) {
     ast = input;
   }
   if (!ast) return typeof input === "string" ? input : "";
-  return printNode(ast, 0);
+  return printNode(ast, 0, maxLineLength, indent);
 }
 function inline(node) {
   switch (node.type) {
@@ -5209,36 +5261,36 @@ function containsGroups(node) {
   if (node.type === "Not") return containsGroups(node.expression);
   return false;
 }
-function shouldBreakGroup(expr) {
+function shouldBreakGroup(expr, maxLineLength) {
   const inlined = inline(expr);
-  if (inlined.length > INLINE_MAX_LENGTH) return true;
+  if (inlined.length > maxLineLength) return true;
   if (containsGroups(expr)) return true;
   return false;
 }
-function printNode(node, depth) {
-  const pad = INDENT.repeat(depth);
+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 <= INLINE_MAX_LENGTH) {
+      if (inlined.length <= maxLineLength) {
         return inlined;
       }
       const lines = operands.map((operand, i) => {
-        const printed = printNode(operand, depth);
+        const printed = printNode(operand, depth, maxLineLength, indent);
         return i === 0 ? printed : `${pad}${operator} ${printed}`;
       });
       return lines.join("\n");
     }
     case "Group": {
-      if (!shouldBreakGroup(node.expression)) {
+      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);
+      const inner = printNode(node.expression, depth + 1, maxLineLength, indent);
       let s = `(
-${indentLines(inner, depth + 1)}
+${indentLines(inner, depth + 1, indent)}
 ${pad})`;
       if (node.boost != null) s += `^${node.boost}`;
       return s;
@@ -5249,13 +5301,13 @@ ${pad})`;
       return s;
     }
     case "Not":
-      return `NOT ${printNode(node.expression, depth)}`;
+      return `NOT ${printNode(node.expression, depth, maxLineLength, indent)}`;
     default:
       return inline(node);
   }
 }
-function indentLines(text, depth) {
-  const pad = INDENT.repeat(depth);
+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");

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/types.d.ts

@@ -269,6 +269,10 @@ 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;
 }
 /**
  * Feature toggles for optional editing behaviors. All default to false except `multiline`.

package/dist/utils/formatQuery.d.ts

@@ -1,7 +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): 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.5",
   "description": "Syntax-aware smart autocomplete input for Elastic query syntax",
   "license": "MIT",
   "repository": {