elastic-input 0.3.6 → 0.3.7

package/dist/components/AutocompleteDropdown.d.ts

@@ -1,5 +1,5 @@
 import { Suggestion } from '../autocomplete/suggestionTypes';
-import { ColorConfig, StyleConfig, HistoryEntry, SavedSearch } from '../types';
+import { ColorConfig, StyleConfig, HistoryEntry, SavedSearch, SuggestionItem } from '../types';
 import { CursorContext } from '../parser/Parser';
 import * as React from 'react';
 interface AutocompleteDropdownProps {
@@ -21,6 +21,8 @@ interface AutocompleteDropdownProps {
     cursorContext?: CursorContext | null;
     /** Ref callback to expose the dropdown list element for page-size calculations. */
     listRefCallback?: (el: HTMLDivElement | null) => void;
+    /** Controls the type badge in dropdown items. false=hide, true=default, callback=custom. */
+    renderType?: boolean | ((type: string, suggestion: SuggestionItem) => React.ReactNode | null | undefined);
     /** Custom class names for dropdown elements. */
     classNames?: {
         dropdown?: string;
@@ -28,5 +30,5 @@ interface AutocompleteDropdownProps {
         dropdownItem?: string;
     };
 }
-export declare function AutocompleteDropdown({ suggestions, selectedIndex, onSelect, position, colors, styles, visible, fixedWidth, renderHistoryItem, renderSavedSearchItem, renderDropdownHeader, cursorContext, listRefCallback, classNames, }: AutocompleteDropdownProps): React.ReactPortal | null;
+export declare function AutocompleteDropdown({ suggestions, selectedIndex, onSelect, position, colors, styles, visible, fixedWidth, renderHistoryItem, renderSavedSearchItem, renderDropdownHeader, cursorContext, listRefCallback, renderType, classNames, }: AutocompleteDropdownProps): React.ReactPortal | null;
 export {};

package/dist/elastic-input.es.js

@@ -1217,6 +1217,7 @@ const DARK_COLORS = {
 const DEFAULT_STYLES = {
   fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace",
   fontSize: "14px",
+  lineHeight: "1.5",
   inputMinHeight: "40px",
   inputPadding: "8px 12px",
   inputBorderWidth: "2px",
@@ -2127,7 +2128,7 @@ function getEditableStyle(colors, styles) {
     outline: "none",
     fontSize: styles.fontSize,
     fontFamily: styles.fontFamily,
-    lineHeight: "1.5",
+    lineHeight: styles.lineHeight,
     backgroundColor: colors.background,
     color: colors.text,
     caretColor: colors.cursor,
@@ -2155,7 +2156,7 @@ function getPlaceholderStyle(colors, styles) {
     pointerEvents: "none",
     fontSize: styles.fontSize,
     fontFamily: styles.fontFamily,
-    lineHeight: "1.5",
+    lineHeight: styles.lineHeight,
     userSelect: "none"
   };
 }
@@ -2752,6 +2753,7 @@ function AutocompleteDropdown({
   renderDropdownHeader,
   cursorContext,
   listRefCallback,
+  renderType,
   classNames
 }) {
   const portalRef = React.useRef(null);
@@ -2902,7 +2904,10 @@ function AutocompleteDropdown({
       },
       /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-label", style: getDropdownItemLabelStyle() }, highlightMatch(suggestion.label, suggestion.matchPartial, isSelected)),
       suggestion.description && /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-desc", style: getDropdownItemDescStyle() }, suggestion.description),
-      suggestion.type && suggestion.type !== "hint" && /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-type", style: getDropdownItemTypeStyle(isSelected, mergedStyles) }, suggestion.type)
+      renderType !== false && suggestion.type && suggestion.type !== "hint" && (() => {
+        const content2 = typeof renderType === "function" ? renderType(suggestion.type, { text: suggestion.text, label: suggestion.label, description: suggestion.description, type: suggestion.type }) : suggestion.type;
+        return content2 != null ? /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-type", style: getDropdownItemTypeStyle(isSelected, mergedStyles) }, content2) : null;
+      })()
     );
   }));
   return ReactDOM.createPortal(content, portalRef.current);
@@ -3961,6 +3966,7 @@ function ElasticInput(props) {
   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 renderType = dropdownConfig == null ? void 0 : dropdownConfig.renderType;
   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;
@@ -5271,6 +5277,7 @@ function ElasticInput(props) {
       listRefCallback: (el) => {
         dropdownListRef.current = el;
       },
+      renderType,
       classNames: classNames ? { dropdown: classNames.dropdown, dropdownHeader: classNames.dropdownHeader, dropdownItem: classNames.dropdownItem } : void 0
     }
   ), showDatePicker && dropdownPosition ? /* @__PURE__ */ React.createElement(

package/dist/types.d.ts

@@ -158,6 +158,8 @@ export interface StyleConfig {
     fontFamily?: string;
     /** Base font size for the input. */
     fontSize?: string;
+    /** Line height for the input text and placeholder. @default '1.5' */
+    lineHeight?: string;
     /** Minimum height of the input element. */
     inputMinHeight?: string;
     /** Padding inside the input element. */
@@ -280,6 +282,12 @@ export interface DropdownConfig {
         cursorContext: CursorContext;
         partial: string;
     }) => React.ReactNode | null | undefined;
+    /** Controls the type badge shown in dropdown items.
+     *  - `false` — hide the badge entirely
+     *  - `true` (default) — show the raw `suggestion.type` string
+     *  - callback `(type, suggestion) => ReactNode` — custom render per item; return null to hide
+     */
+    renderType?: boolean | ((type: string, suggestion: SuggestionItem) => React.ReactNode | null | undefined);
 }
 /**
  * Feature toggles for optional editing behaviors. All default to false except `multiline`.

package/package.json

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