elastic-input 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/dist/components/AutocompleteDropdown.d.ts +7 -1
- package/dist/components/DateRangePicker.d.ts +3 -1
- package/dist/components/ElasticInput.d.ts +1 -1
- package/dist/components/HighlightedContent.d.ts +2 -0
- package/dist/components/ValidationSquiggles.d.ts +6 -1
- package/dist/elastic-input.es.js +3723 -2402
- package/dist/highlighting/rangeHighlight.d.ts +1 -1
- package/dist/highlighting/regexHighlight.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/types.d.ts +60 -2
- package/dist/utils/cx.d.ts +2 -0
- package/dist/utils/domUtils.d.ts +6 -0
- package/dist/validation/Validator.d.ts +2 -1
- package/dist/validation/dateValidator.d.ts +2 -1
- package/package.json +1 -1
|
@@ -7,4 +7,4 @@ export interface RangePart {
|
|
|
7
7
|
text: string;
|
|
8
8
|
}
|
|
9
9
|
export declare function tokenizeRangeContent(value: string): RangePart[];
|
|
10
|
-
export declare function buildRangeHTML(token: Token, colors: Required<ColorConfig
|
|
10
|
+
export declare function buildRangeHTML(token: Token, colors: Required<ColorConfig>, tokenClassName?: string): string;
|
|
@@ -7,4 +7,4 @@ export interface RegexPart {
|
|
|
7
7
|
text: string;
|
|
8
8
|
}
|
|
9
9
|
export declare function tokenizeRegexContent(value: string): RegexPart[];
|
|
10
|
-
export declare function buildRegexHTML(token: Token, colors: Required<ColorConfig
|
|
10
|
+
export declare function buildRegexHTML(token: Token, colors: Required<ColorConfig>, tokenClassName?: string): string;
|
package/dist/index.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export type { AutocompleteOptions } from './autocomplete/AutocompleteEngine';
|
|
|
10
10
|
export { extractValues } from './utils/extractValues';
|
|
11
11
|
export type { ExtractedValue, ExtractedValueKind } from './utils/extractValues';
|
|
12
12
|
export { DEFAULT_COLORS, DARK_COLORS, DEFAULT_STYLES, DARK_STYLES } from './constants';
|
|
13
|
-
export type { ElasticInputProps, ElasticInputAPI, FieldConfig, FieldsSource, FieldType, SavedSearch, HistoryEntry, SuggestionItem, ColorConfig, StyleConfig, ValidateValueContext, ValidationResult, ValidateReturn, TabContext, TabActionResult, DropdownConfig, FeaturesConfig, } from './types';
|
|
13
|
+
export type { ElasticInputProps, ElasticInputAPI, FieldConfig, FieldsSource, FieldType, SavedSearch, HistoryEntry, SuggestionItem, ColorConfig, StyleConfig, ValidateValueContext, ValidationResult, ValidateReturn, TabContext, TabActionResult, DropdownConfig, DropdownOpenContext, DropdownOpenProp, FeaturesConfig, ClassNamesConfig, } from './types';
|
|
14
14
|
export type { Token, TokenType } from './lexer/tokens';
|
|
15
15
|
export type { ASTNode } from './parser/ast';
|
|
16
16
|
export type { CursorContext, CursorContextType } from './parser/Parser';
|
package/dist/types.d.ts
CHANGED
|
@@ -193,9 +193,32 @@ export interface StyleConfig {
|
|
|
193
193
|
* Configuration for the autocomplete dropdown: when it appears, what it shows, and
|
|
194
194
|
* how suggestion items are rendered. All properties are optional with sensible defaults.
|
|
195
195
|
*/
|
|
196
|
+
/** Context passed to a `dropdown.open` callback. */
|
|
197
|
+
export interface DropdownOpenContext {
|
|
198
|
+
/** What caused this evaluation. */
|
|
199
|
+
trigger: 'input' | 'navigation' | 'ctrlSpace' | 'modeChange';
|
|
200
|
+
/** Current cursor context from the parser. */
|
|
201
|
+
context: CursorContext;
|
|
202
|
+
/** Suggestions the engine has computed (may be empty). */
|
|
203
|
+
suggestions: Suggestion[];
|
|
204
|
+
/** Whether the dropdown is currently visible. */
|
|
205
|
+
isOpen: boolean;
|
|
206
|
+
}
|
|
207
|
+
/**
|
|
208
|
+
* Value for `dropdown.open`. A string constant for common presets,
|
|
209
|
+
* or a callback for custom logic.
|
|
210
|
+
*
|
|
211
|
+
* Callback return values:
|
|
212
|
+
* - `true` — force the dropdown open (the engine still decides *what* to show)
|
|
213
|
+
* - `false` — force the dropdown closed
|
|
214
|
+
* - `null` — no opinion; let the engine decide
|
|
215
|
+
*/
|
|
216
|
+
export type DropdownOpenProp = 'always' | 'never' | 'manual' | 'input' | ((ctx: DropdownOpenContext) => boolean | null);
|
|
196
217
|
export interface DropdownConfig {
|
|
197
|
-
/** Controls when the dropdown appears.
|
|
198
|
-
*
|
|
218
|
+
/** Controls when the dropdown appears. Accepts a preset string or a callback.
|
|
219
|
+
* @default 'always' */
|
|
220
|
+
open?: DropdownOpenProp;
|
|
221
|
+
/** @deprecated Use `open` instead. */
|
|
199
222
|
mode?: 'always' | 'never' | 'manual' | 'input';
|
|
200
223
|
/** When true, the dropdown spans the full input width instead of following the caret. @default false */
|
|
201
224
|
alignToInput?: boolean;
|
|
@@ -299,6 +322,32 @@ export interface TabActionResult {
|
|
|
299
322
|
/** Trigger `onSearch` with the current (post-accept) query. */
|
|
300
323
|
submit?: boolean;
|
|
301
324
|
}
|
|
325
|
+
/**
|
|
326
|
+
* Custom CSS class names for key DOM elements.
|
|
327
|
+
* Applied alongside the static `ei-*` classes (not replacing them).
|
|
328
|
+
*/
|
|
329
|
+
export interface ClassNamesConfig {
|
|
330
|
+
/** Outer container div. */
|
|
331
|
+
container?: string;
|
|
332
|
+
/** The contentEditable editor div. */
|
|
333
|
+
editor?: string;
|
|
334
|
+
/** The placeholder text div. */
|
|
335
|
+
placeholder?: string;
|
|
336
|
+
/** The autocomplete dropdown container. */
|
|
337
|
+
dropdown?: string;
|
|
338
|
+
/** The dropdown header div. */
|
|
339
|
+
dropdownHeader?: string;
|
|
340
|
+
/** Each dropdown suggestion item div. */
|
|
341
|
+
dropdownItem?: string;
|
|
342
|
+
/** Each syntax-highlighted token span (in the HTML output). */
|
|
343
|
+
token?: string;
|
|
344
|
+
/** Validation squiggly underline divs. */
|
|
345
|
+
squiggly?: string;
|
|
346
|
+
/** Error/warning tooltip div. */
|
|
347
|
+
tooltip?: string;
|
|
348
|
+
/** The date picker container. */
|
|
349
|
+
datePicker?: string;
|
|
350
|
+
}
|
|
302
351
|
/** Field definitions — either a static array or an async loader function. */
|
|
303
352
|
export type FieldsSource = FieldConfig[] | (() => Promise<FieldConfig[]>);
|
|
304
353
|
export interface ElasticInputProps {
|
|
@@ -328,6 +377,8 @@ export interface ElasticInputProps {
|
|
|
328
377
|
placeholder?: string;
|
|
329
378
|
/** CSS class name applied to the outer container `<div>`. */
|
|
330
379
|
className?: string;
|
|
380
|
+
/** Custom CSS classes for key DOM elements (container, editor, dropdown, etc.). */
|
|
381
|
+
classNames?: ClassNamesConfig;
|
|
331
382
|
/** Inline styles applied to the outer container `<div>`. */
|
|
332
383
|
style?: React.CSSProperties;
|
|
333
384
|
/** Dropdown behavior, rendering, and appearance configuration. */
|
|
@@ -374,4 +425,11 @@ export interface ElasticInputProps {
|
|
|
374
425
|
* severity), a `{ message, severity }` object, or `null` if valid.
|
|
375
426
|
*/
|
|
376
427
|
validateValue?: (context: ValidateValueContext) => ValidateReturn;
|
|
428
|
+
/**
|
|
429
|
+
* Custom date parser for date-typed fields. Called during validation and date picker
|
|
430
|
+
* initialization. Return a `Date` if the string is a valid date, or `null` if not.
|
|
431
|
+
* When provided, values accepted by this parser bypass the built-in date format checks.
|
|
432
|
+
* The built-in parser handles YYYY-MM-DD, ISO 8601, and `now±Xd` syntax.
|
|
433
|
+
*/
|
|
434
|
+
parseDate?: (value: string) => Date | null;
|
|
377
435
|
}
|
package/dist/utils/domUtils.d.ts
CHANGED
|
@@ -13,6 +13,12 @@ export declare function getContainerOffset(container: HTMLElement): {
|
|
|
13
13
|
top: number;
|
|
14
14
|
left: number;
|
|
15
15
|
};
|
|
16
|
+
/**
|
|
17
|
+
* Cap the height used for dropdown positioning to the rendered max height.
|
|
18
|
+
* The CSS maxHeight clips the dropdown visually, but the flip logic needs
|
|
19
|
+
* the actual rendered size to avoid positioning the dropdown off-screen.
|
|
20
|
+
*/
|
|
21
|
+
export declare function capDropdownHeight(contentHeight: number, maxHeightPx: number): number;
|
|
16
22
|
export declare function getDropdownPosition(caretRect: DOMRect, dropdownHeight: number, dropdownWidth: number): {
|
|
17
23
|
top: number;
|
|
18
24
|
left: number;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ASTNode } from '../parser/ast';
|
|
2
2
|
import { FieldConfig, ValidateReturn, ValidateValueContext } from '../types';
|
|
3
|
+
import { ParseDateFn } from './dateValidator';
|
|
3
4
|
|
|
4
5
|
/** Callback type for external value validation. */
|
|
5
6
|
export type ValidateValueFn = (context: ValidateValueContext) => ValidateReturn;
|
|
@@ -19,7 +20,7 @@ export interface ValidationError {
|
|
|
19
20
|
export declare class Validator {
|
|
20
21
|
private fields;
|
|
21
22
|
constructor(fields: FieldConfig[]);
|
|
22
|
-
validate(ast: ASTNode | null, validateValueFn?: ValidateValueFn): ValidationError[];
|
|
23
|
+
validate(ast: ASTNode | null, validateValueFn?: ValidateValueFn, parseDateFn?: ParseDateFn): ValidationError[];
|
|
23
24
|
private walkNode;
|
|
24
25
|
/** Walk inside a FieldGroup, validating bare terms / field values against the group's field config. */
|
|
25
26
|
private walkFieldGroup;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export type ParseDateFn = (value: string) => Date | null;
|
|
2
|
+
export declare function validateDate(value: string, parseDateFn?: ParseDateFn): string | null;
|