elastic-input 0.2.0 → 0.3.1
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 +4 -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 +62 -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
|
@@ -49,6 +49,8 @@ export interface FieldConfig {
|
|
|
49
49
|
description?: string;
|
|
50
50
|
/** Custom placeholder hint shown in the dropdown while typing a value for this field (e.g. "Search by company name..."). Overrides the default type-based hint. Set to `false` to suppress the hint entirely. */
|
|
51
51
|
placeholder?: string | false;
|
|
52
|
+
/** Whether `fetchSuggestions` should be called for this field. Defaults to `true`. Set to `false` to skip the async fetch entirely (no "Searching..." spinner, no dropdown). */
|
|
53
|
+
suggestions?: boolean;
|
|
52
54
|
}
|
|
53
55
|
/** A saved/named search that users can reference with `#name` syntax. */
|
|
54
56
|
export interface SavedSearch {
|
|
@@ -193,9 +195,32 @@ export interface StyleConfig {
|
|
|
193
195
|
* Configuration for the autocomplete dropdown: when it appears, what it shows, and
|
|
194
196
|
* how suggestion items are rendered. All properties are optional with sensible defaults.
|
|
195
197
|
*/
|
|
198
|
+
/** Context passed to a `dropdown.open` callback. */
|
|
199
|
+
export interface DropdownOpenContext {
|
|
200
|
+
/** What caused this evaluation. */
|
|
201
|
+
trigger: 'input' | 'navigation' | 'ctrlSpace' | 'modeChange';
|
|
202
|
+
/** Current cursor context from the parser. */
|
|
203
|
+
context: CursorContext;
|
|
204
|
+
/** Suggestions the engine has computed (may be empty). */
|
|
205
|
+
suggestions: Suggestion[];
|
|
206
|
+
/** Whether the dropdown is currently visible. */
|
|
207
|
+
isOpen: boolean;
|
|
208
|
+
}
|
|
209
|
+
/**
|
|
210
|
+
* Value for `dropdown.open`. A string constant for common presets,
|
|
211
|
+
* or a callback for custom logic.
|
|
212
|
+
*
|
|
213
|
+
* Callback return values:
|
|
214
|
+
* - `true` — force the dropdown open (the engine still decides *what* to show)
|
|
215
|
+
* - `false` — force the dropdown closed
|
|
216
|
+
* - `null` — no opinion; let the engine decide
|
|
217
|
+
*/
|
|
218
|
+
export type DropdownOpenProp = 'always' | 'never' | 'manual' | 'input' | ((ctx: DropdownOpenContext) => boolean | null);
|
|
196
219
|
export interface DropdownConfig {
|
|
197
|
-
/** Controls when the dropdown appears.
|
|
198
|
-
*
|
|
220
|
+
/** Controls when the dropdown appears. Accepts a preset string or a callback.
|
|
221
|
+
* @default 'always' */
|
|
222
|
+
open?: DropdownOpenProp;
|
|
223
|
+
/** @deprecated Use `open` instead. */
|
|
199
224
|
mode?: 'always' | 'never' | 'manual' | 'input';
|
|
200
225
|
/** When true, the dropdown spans the full input width instead of following the caret. @default false */
|
|
201
226
|
alignToInput?: boolean;
|
|
@@ -299,6 +324,32 @@ export interface TabActionResult {
|
|
|
299
324
|
/** Trigger `onSearch` with the current (post-accept) query. */
|
|
300
325
|
submit?: boolean;
|
|
301
326
|
}
|
|
327
|
+
/**
|
|
328
|
+
* Custom CSS class names for key DOM elements.
|
|
329
|
+
* Applied alongside the static `ei-*` classes (not replacing them).
|
|
330
|
+
*/
|
|
331
|
+
export interface ClassNamesConfig {
|
|
332
|
+
/** Outer container div. */
|
|
333
|
+
container?: string;
|
|
334
|
+
/** The contentEditable editor div. */
|
|
335
|
+
editor?: string;
|
|
336
|
+
/** The placeholder text div. */
|
|
337
|
+
placeholder?: string;
|
|
338
|
+
/** The autocomplete dropdown container. */
|
|
339
|
+
dropdown?: string;
|
|
340
|
+
/** The dropdown header div. */
|
|
341
|
+
dropdownHeader?: string;
|
|
342
|
+
/** Each dropdown suggestion item div. */
|
|
343
|
+
dropdownItem?: string;
|
|
344
|
+
/** Each syntax-highlighted token span (in the HTML output). */
|
|
345
|
+
token?: string;
|
|
346
|
+
/** Validation squiggly underline divs. */
|
|
347
|
+
squiggly?: string;
|
|
348
|
+
/** Error/warning tooltip div. */
|
|
349
|
+
tooltip?: string;
|
|
350
|
+
/** The date picker container. */
|
|
351
|
+
datePicker?: string;
|
|
352
|
+
}
|
|
302
353
|
/** Field definitions — either a static array or an async loader function. */
|
|
303
354
|
export type FieldsSource = FieldConfig[] | (() => Promise<FieldConfig[]>);
|
|
304
355
|
export interface ElasticInputProps {
|
|
@@ -328,6 +379,8 @@ export interface ElasticInputProps {
|
|
|
328
379
|
placeholder?: string;
|
|
329
380
|
/** CSS class name applied to the outer container `<div>`. */
|
|
330
381
|
className?: string;
|
|
382
|
+
/** Custom CSS classes for key DOM elements (container, editor, dropdown, etc.). */
|
|
383
|
+
classNames?: ClassNamesConfig;
|
|
331
384
|
/** Inline styles applied to the outer container `<div>`. */
|
|
332
385
|
style?: React.CSSProperties;
|
|
333
386
|
/** Dropdown behavior, rendering, and appearance configuration. */
|
|
@@ -374,4 +427,11 @@ export interface ElasticInputProps {
|
|
|
374
427
|
* severity), a `{ message, severity }` object, or `null` if valid.
|
|
375
428
|
*/
|
|
376
429
|
validateValue?: (context: ValidateValueContext) => ValidateReturn;
|
|
430
|
+
/**
|
|
431
|
+
* Custom date parser for date-typed fields. Called during validation and date picker
|
|
432
|
+
* initialization. Return a `Date` if the string is a valid date, or `null` if not.
|
|
433
|
+
* When provided, values accepted by this parser bypass the built-in date format checks.
|
|
434
|
+
* The built-in parser handles YYYY-MM-DD, ISO 8601, and `now±Xd` syntax.
|
|
435
|
+
*/
|
|
436
|
+
parseDate?: (value: string) => Date | null;
|
|
377
437
|
}
|
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;
|