@destyler/combobox 0.0.7-beta.5 → 0.0.7-beta.9
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/dist/index.d.ts +389 -380
- package/dist/index.js +1401 -0
- package/package.json +15 -20
- package/dist/index.cjs +0 -1475
- package/dist/index.d.cts +0 -419
- package/dist/index.d.mts +0 -419
- package/dist/index.mjs +0 -1470
package/dist/index.d.cts
DELETED
|
@@ -1,419 +0,0 @@
|
|
|
1
|
-
import * as _zag_js_anatomy from '@zag-js/anatomy';
|
|
2
|
-
import { CollectionItem, CollectionOptions, ListCollection } from '@zag-js/collection';
|
|
3
|
-
export { CollectionItem, CollectionOptions } from '@zag-js/collection';
|
|
4
|
-
import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
|
|
5
|
-
import * as _zag_js_core from '@zag-js/core';
|
|
6
|
-
import { StateMachine, Machine } from '@zag-js/core';
|
|
7
|
-
import { InteractOutsideHandlers } from '@zag-js/dismissable';
|
|
8
|
-
export { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/dismissable';
|
|
9
|
-
import { PositioningOptions, Placement } from '@zag-js/popper';
|
|
10
|
-
export { Placement, PositioningOptions } from '@zag-js/popper';
|
|
11
|
-
|
|
12
|
-
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "clearTrigger" | "content" | "control" | "input" | "item" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "label" | "list" | "positioner" | "trigger">;
|
|
13
|
-
|
|
14
|
-
declare function collection<T extends CollectionItem>(options: CollectionOptions<T>): ListCollection<T>;
|
|
15
|
-
declare namespace collection {
|
|
16
|
-
var empty: () => ListCollection<CollectionItem>;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
interface ValueChangeDetails<T extends CollectionItem = CollectionItem> {
|
|
20
|
-
value: string[];
|
|
21
|
-
items: T[];
|
|
22
|
-
}
|
|
23
|
-
interface HighlightChangeDetails<T extends CollectionItem = CollectionItem> {
|
|
24
|
-
highlightedValue: string | null;
|
|
25
|
-
highlightedItem: T | null;
|
|
26
|
-
}
|
|
27
|
-
interface InputValueChangeDetails {
|
|
28
|
-
inputValue: string;
|
|
29
|
-
}
|
|
30
|
-
interface OpenChangeDetails {
|
|
31
|
-
open: boolean;
|
|
32
|
-
}
|
|
33
|
-
interface ScrollToIndexDetails {
|
|
34
|
-
index: number;
|
|
35
|
-
immediate?: boolean | undefined;
|
|
36
|
-
}
|
|
37
|
-
interface IntlTranslations {
|
|
38
|
-
triggerLabel?: string | undefined;
|
|
39
|
-
clearTriggerLabel?: string | undefined;
|
|
40
|
-
}
|
|
41
|
-
type ElementIds = Partial<{
|
|
42
|
-
root: string;
|
|
43
|
-
label: string;
|
|
44
|
-
control: string;
|
|
45
|
-
input: string;
|
|
46
|
-
content: string;
|
|
47
|
-
trigger: string;
|
|
48
|
-
clearTrigger: string;
|
|
49
|
-
item: (id: string, index?: number) => string;
|
|
50
|
-
positioner: string;
|
|
51
|
-
itemGroup: (id: string | number) => string;
|
|
52
|
-
itemGroupLabel: (id: string | number) => string;
|
|
53
|
-
}>;
|
|
54
|
-
interface PublicContext<T extends CollectionItem = CollectionItem> extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
|
|
55
|
-
/**
|
|
56
|
-
* Whether the combobox is open
|
|
57
|
-
*/
|
|
58
|
-
'open'?: boolean | undefined;
|
|
59
|
-
/**
|
|
60
|
-
* Whether the combobox open state is controlled by the user
|
|
61
|
-
*/
|
|
62
|
-
'open.controlled'?: boolean | undefined;
|
|
63
|
-
/**
|
|
64
|
-
* The ids of the elements in the combobox. Useful for composition.
|
|
65
|
-
*/
|
|
66
|
-
'ids'?: ElementIds | undefined;
|
|
67
|
-
/**
|
|
68
|
-
* The current value of the combobox's input
|
|
69
|
-
*/
|
|
70
|
-
'inputValue': string;
|
|
71
|
-
/**
|
|
72
|
-
* The `name` attribute of the combobox's input. Useful for form submission
|
|
73
|
-
*/
|
|
74
|
-
'name'?: string | undefined;
|
|
75
|
-
/**
|
|
76
|
-
* The associate form of the combobox.
|
|
77
|
-
*/
|
|
78
|
-
'form'?: string | undefined;
|
|
79
|
-
/**
|
|
80
|
-
* Whether the combobox is disabled
|
|
81
|
-
*/
|
|
82
|
-
'disabled'?: boolean | undefined;
|
|
83
|
-
/**
|
|
84
|
-
* Whether the combobox is readonly. This puts the combobox in a "non-editable" mode
|
|
85
|
-
* but the user can still interact with it
|
|
86
|
-
*/
|
|
87
|
-
'readOnly'?: boolean | undefined;
|
|
88
|
-
/**
|
|
89
|
-
* Whether the combobox is invalid
|
|
90
|
-
*/
|
|
91
|
-
'invalid'?: boolean | undefined;
|
|
92
|
-
/**
|
|
93
|
-
* Whether the combobox is required
|
|
94
|
-
*/
|
|
95
|
-
'required'?: boolean | undefined;
|
|
96
|
-
/**
|
|
97
|
-
* The placeholder text of the combobox's input
|
|
98
|
-
*/
|
|
99
|
-
'placeholder'?: string | undefined;
|
|
100
|
-
/**
|
|
101
|
-
* The active item's id. Used to set the `aria-activedescendant` attribute
|
|
102
|
-
*/
|
|
103
|
-
'highlightedValue': string | null;
|
|
104
|
-
/**
|
|
105
|
-
* The keys of the selected items
|
|
106
|
-
*/
|
|
107
|
-
'value': string[];
|
|
108
|
-
/**
|
|
109
|
-
* Defines the auto-completion behavior of the combobox.
|
|
110
|
-
*
|
|
111
|
-
* - `autohighlight`: The first focused item is highlighted as the user types
|
|
112
|
-
* - `autocomplete`: Navigating the listbox with the arrow keys selects the item and the input is updated
|
|
113
|
-
*
|
|
114
|
-
* @default "none"
|
|
115
|
-
*/
|
|
116
|
-
'inputBehavior': 'autohighlight' | 'autocomplete' | 'none';
|
|
117
|
-
/**
|
|
118
|
-
* The behavior of the combobox input when an item is selected
|
|
119
|
-
*
|
|
120
|
-
* - `replace`: The selected item string is set as the input value
|
|
121
|
-
* - `clear`: The input value is cleared
|
|
122
|
-
* - `preserve`: The input value is preserved
|
|
123
|
-
*
|
|
124
|
-
* @default "replace"
|
|
125
|
-
*/
|
|
126
|
-
'selectionBehavior': 'clear' | 'replace' | 'preserve';
|
|
127
|
-
/**
|
|
128
|
-
* Whether to autofocus the input on mount
|
|
129
|
-
*/
|
|
130
|
-
'autoFocus'?: boolean | undefined;
|
|
131
|
-
/**
|
|
132
|
-
* Whether to open the combobox popup on initial click on the input
|
|
133
|
-
* @default false
|
|
134
|
-
*/
|
|
135
|
-
'openOnClick'?: boolean | undefined;
|
|
136
|
-
/**
|
|
137
|
-
* Whether to show the combobox when the input value changes
|
|
138
|
-
* @default true
|
|
139
|
-
*/
|
|
140
|
-
'openOnChange'?: boolean | ((details: InputValueChangeDetails) => boolean) | undefined;
|
|
141
|
-
/**
|
|
142
|
-
* Whether to allow typing custom values in the input
|
|
143
|
-
*/
|
|
144
|
-
'allowCustomValue'?: boolean | undefined;
|
|
145
|
-
/**
|
|
146
|
-
* Whether to loop the keyboard navigation through the items
|
|
147
|
-
* @default true
|
|
148
|
-
*/
|
|
149
|
-
'loopFocus'?: boolean | undefined;
|
|
150
|
-
/**
|
|
151
|
-
* The positioning options to dynamically position the menu
|
|
152
|
-
*/
|
|
153
|
-
'positioning': PositioningOptions;
|
|
154
|
-
/**
|
|
155
|
-
* Function called when the input's value changes
|
|
156
|
-
*/
|
|
157
|
-
'onInputValueChange'?: ((details: InputValueChangeDetails) => void) | undefined;
|
|
158
|
-
/**
|
|
159
|
-
* Function called when a new item is selected
|
|
160
|
-
*/
|
|
161
|
-
'onValueChange'?: ((details: ValueChangeDetails<T>) => void) | undefined;
|
|
162
|
-
/**
|
|
163
|
-
* Function called when an item is highlighted using the pointer
|
|
164
|
-
* or keyboard navigation.
|
|
165
|
-
*/
|
|
166
|
-
'onHighlightChange'?: ((details: HighlightChangeDetails<T>) => void) | undefined;
|
|
167
|
-
/**
|
|
168
|
-
* Function called when the popup is opened
|
|
169
|
-
*/
|
|
170
|
-
'onOpenChange'?: ((details: OpenChangeDetails) => void) | undefined;
|
|
171
|
-
/**
|
|
172
|
-
* Specifies the localized strings that identifies the accessibility elements and their states
|
|
173
|
-
*/
|
|
174
|
-
'translations': IntlTranslations;
|
|
175
|
-
/**
|
|
176
|
-
* The collection of items
|
|
177
|
-
*/
|
|
178
|
-
'collection': ListCollection<any>;
|
|
179
|
-
/**
|
|
180
|
-
* Whether to allow multiple selection.
|
|
181
|
-
*
|
|
182
|
-
* **Good to know:** When `multiple` is `true`, the `selectionBehavior` is automatically set to `clear`.
|
|
183
|
-
* It is recommended to render the selected items in a separate container.
|
|
184
|
-
*/
|
|
185
|
-
'multiple'?: boolean | undefined;
|
|
186
|
-
/**
|
|
187
|
-
* Whether to close the combobox when an item is selected.
|
|
188
|
-
*/
|
|
189
|
-
'closeOnSelect'?: boolean | undefined;
|
|
190
|
-
/**
|
|
191
|
-
* Whether to open the combobox on arrow key press
|
|
192
|
-
* @default true
|
|
193
|
-
*/
|
|
194
|
-
'openOnKeyPress': boolean;
|
|
195
|
-
/**
|
|
196
|
-
* Function to scroll to a specific index
|
|
197
|
-
*/
|
|
198
|
-
'scrollToIndexFn'?: ((details: ScrollToIndexDetails) => void) | undefined;
|
|
199
|
-
/**
|
|
200
|
-
* Whether the combobox is a composed with other composite widgets like tabs
|
|
201
|
-
* @default true
|
|
202
|
-
*/
|
|
203
|
-
'composite': boolean;
|
|
204
|
-
/**
|
|
205
|
-
* Whether to disable registering this a dismissable layer
|
|
206
|
-
*/
|
|
207
|
-
'disableLayer'?: boolean | undefined;
|
|
208
|
-
}
|
|
209
|
-
type UserDefinedContext<T extends CollectionItem = CollectionItem> = RequiredBy<PublicContext<T>, 'id' | 'collection'>;
|
|
210
|
-
type ComputedContext = Readonly<{
|
|
211
|
-
/**
|
|
212
|
-
* @computed
|
|
213
|
-
* Whether the input's value is empty
|
|
214
|
-
*/
|
|
215
|
-
isInputValueEmpty: boolean;
|
|
216
|
-
/**
|
|
217
|
-
* @computed
|
|
218
|
-
* Whether the combobox is interactive
|
|
219
|
-
*/
|
|
220
|
-
isInteractive: boolean;
|
|
221
|
-
/**
|
|
222
|
-
* @computed
|
|
223
|
-
*/
|
|
224
|
-
autoComplete: boolean;
|
|
225
|
-
/**
|
|
226
|
-
* @computed
|
|
227
|
-
*/
|
|
228
|
-
autoHighlight: boolean;
|
|
229
|
-
/**
|
|
230
|
-
* @computed
|
|
231
|
-
* Whether there's a selected option
|
|
232
|
-
*/
|
|
233
|
-
hasSelectedItems: boolean;
|
|
234
|
-
}>;
|
|
235
|
-
interface PrivateContext<T extends CollectionItem = CollectionItem> {
|
|
236
|
-
/**
|
|
237
|
-
* @internal
|
|
238
|
-
* The placement of the combobox popover.
|
|
239
|
-
*/
|
|
240
|
-
currentPlacement?: Placement | undefined;
|
|
241
|
-
/**
|
|
242
|
-
* The highlighted item
|
|
243
|
-
*/
|
|
244
|
-
highlightedItem: T | null;
|
|
245
|
-
/**
|
|
246
|
-
* @internal
|
|
247
|
-
* The selected items
|
|
248
|
-
*/
|
|
249
|
-
selectedItems: T[];
|
|
250
|
-
/**
|
|
251
|
-
* @internal
|
|
252
|
-
* The display value of the combobox (based on the selected items)
|
|
253
|
-
*/
|
|
254
|
-
valueAsString: string;
|
|
255
|
-
}
|
|
256
|
-
interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
|
|
257
|
-
}
|
|
258
|
-
interface MachineState {
|
|
259
|
-
value: 'idle' | 'focused' | 'suggesting' | 'interacting';
|
|
260
|
-
tags: 'open' | 'focused' | 'idle' | 'closed';
|
|
261
|
-
}
|
|
262
|
-
type State = StateMachine.State<MachineContext, MachineState>;
|
|
263
|
-
type Send = StateMachine.Send<StateMachine.AnyEventObject>;
|
|
264
|
-
type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
|
|
265
|
-
interface TriggerProps {
|
|
266
|
-
/**
|
|
267
|
-
* Whether the trigger is focusable
|
|
268
|
-
*/
|
|
269
|
-
focusable?: boolean | undefined;
|
|
270
|
-
}
|
|
271
|
-
interface ItemProps {
|
|
272
|
-
/**
|
|
273
|
-
* Whether hovering outside should clear the highlighted state
|
|
274
|
-
*/
|
|
275
|
-
persistFocus?: boolean | undefined;
|
|
276
|
-
/**
|
|
277
|
-
* The item to render
|
|
278
|
-
*/
|
|
279
|
-
item: CollectionItem;
|
|
280
|
-
}
|
|
281
|
-
interface ItemState {
|
|
282
|
-
/**
|
|
283
|
-
* The value of the item
|
|
284
|
-
*/
|
|
285
|
-
value: string;
|
|
286
|
-
/**
|
|
287
|
-
* Whether the item is disabled
|
|
288
|
-
*/
|
|
289
|
-
disabled: boolean;
|
|
290
|
-
/**
|
|
291
|
-
* Whether the item is selected
|
|
292
|
-
*/
|
|
293
|
-
selected: boolean;
|
|
294
|
-
/**
|
|
295
|
-
* Whether the item is highlighted via pointer or keyboard navigation
|
|
296
|
-
*/
|
|
297
|
-
highlighted: boolean;
|
|
298
|
-
}
|
|
299
|
-
interface ItemGroupProps {
|
|
300
|
-
id: string;
|
|
301
|
-
}
|
|
302
|
-
interface ItemGroupLabelProps {
|
|
303
|
-
htmlFor: string;
|
|
304
|
-
}
|
|
305
|
-
interface MachineApi<T extends PropTypes = PropTypes, V extends CollectionItem = CollectionItem> {
|
|
306
|
-
/**
|
|
307
|
-
* Whether the combobox is focused
|
|
308
|
-
*/
|
|
309
|
-
focused: boolean;
|
|
310
|
-
/**
|
|
311
|
-
* Whether the combobox is open
|
|
312
|
-
*/
|
|
313
|
-
open: boolean;
|
|
314
|
-
/**
|
|
315
|
-
* The value of the combobox input
|
|
316
|
-
*/
|
|
317
|
-
inputValue: string;
|
|
318
|
-
/**
|
|
319
|
-
* The value of the highlighted item
|
|
320
|
-
*/
|
|
321
|
-
highlightedValue: string | null;
|
|
322
|
-
/**
|
|
323
|
-
* The highlighted item
|
|
324
|
-
*/
|
|
325
|
-
highlightedItem: V | null;
|
|
326
|
-
/**
|
|
327
|
-
* The value of the combobox input
|
|
328
|
-
*/
|
|
329
|
-
setHighlightValue: (value: string) => void;
|
|
330
|
-
/**
|
|
331
|
-
* Function to sync the selected items with the value.
|
|
332
|
-
* Useful when `value` is updated from async sources.
|
|
333
|
-
*/
|
|
334
|
-
syncSelectedItems: () => void;
|
|
335
|
-
/**
|
|
336
|
-
* The selected items
|
|
337
|
-
*/
|
|
338
|
-
selectedItems: V[];
|
|
339
|
-
/**
|
|
340
|
-
* Whether there's a selected item
|
|
341
|
-
*/
|
|
342
|
-
hasSelectedItems: boolean;
|
|
343
|
-
/**
|
|
344
|
-
* The selected item keys
|
|
345
|
-
*/
|
|
346
|
-
value: string[];
|
|
347
|
-
/**
|
|
348
|
-
* The string representation of the selected items
|
|
349
|
-
*/
|
|
350
|
-
valueAsString: string;
|
|
351
|
-
/**
|
|
352
|
-
* Function to select a value
|
|
353
|
-
*/
|
|
354
|
-
selectValue: (value: string) => void;
|
|
355
|
-
/**
|
|
356
|
-
* Function to set the value of the combobox
|
|
357
|
-
*/
|
|
358
|
-
setValue: (value: string[]) => void;
|
|
359
|
-
/**
|
|
360
|
-
* Function to clear the value of the combobox
|
|
361
|
-
*/
|
|
362
|
-
clearValue: (value?: string) => void;
|
|
363
|
-
/**
|
|
364
|
-
* Function to focus on the combobox input
|
|
365
|
-
*/
|
|
366
|
-
focus: () => void;
|
|
367
|
-
/**
|
|
368
|
-
* Function to set the input value of the combobox
|
|
369
|
-
*/
|
|
370
|
-
setInputValue: (value: string) => void;
|
|
371
|
-
/**
|
|
372
|
-
* Returns the state of a combobox item
|
|
373
|
-
*/
|
|
374
|
-
getItemState: (props: ItemProps) => ItemState;
|
|
375
|
-
/**
|
|
376
|
-
* Function to open or close the combobox
|
|
377
|
-
*/
|
|
378
|
-
setOpen: (open: boolean) => void;
|
|
379
|
-
/**
|
|
380
|
-
* Function to toggle the combobox
|
|
381
|
-
*/
|
|
382
|
-
collection: ListCollection<V>;
|
|
383
|
-
/**
|
|
384
|
-
* Function to set the collection of items
|
|
385
|
-
*/
|
|
386
|
-
setCollection: (collection: ListCollection<V>) => void;
|
|
387
|
-
/**
|
|
388
|
-
* Function to set the positioning options
|
|
389
|
-
*/
|
|
390
|
-
reposition: (options?: Partial<PositioningOptions>) => void;
|
|
391
|
-
/**
|
|
392
|
-
* Whether the combobox allows multiple selections
|
|
393
|
-
*/
|
|
394
|
-
multiple: boolean;
|
|
395
|
-
/**
|
|
396
|
-
* Whether the combobox is disabled
|
|
397
|
-
*/
|
|
398
|
-
disabled: boolean;
|
|
399
|
-
getRootProps: () => T['element'];
|
|
400
|
-
getLabelProps: () => T['label'];
|
|
401
|
-
getControlProps: () => T['element'];
|
|
402
|
-
getPositionerProps: () => T['element'];
|
|
403
|
-
getInputProps: () => T['input'];
|
|
404
|
-
getContentProps: () => T['element'];
|
|
405
|
-
getTriggerProps: (props?: TriggerProps) => T['button'];
|
|
406
|
-
getClearTriggerProps: () => T['button'];
|
|
407
|
-
getListProps: () => T['element'];
|
|
408
|
-
getItemProps: (props: ItemProps) => T['element'];
|
|
409
|
-
getItemTextProps: (props: ItemProps) => T['element'];
|
|
410
|
-
getItemIndicatorProps: (props: ItemProps) => T['element'];
|
|
411
|
-
getItemGroupProps: (props: ItemGroupProps) => T['element'];
|
|
412
|
-
getItemGroupLabelProps: (props: ItemGroupLabelProps) => T['element'];
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
declare function connect<T extends PropTypes, V extends CollectionItem>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T, V>;
|
|
416
|
-
|
|
417
|
-
declare function machine<T extends CollectionItem>(userContext: UserDefinedContext<T>): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
418
|
-
|
|
419
|
-
export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type HighlightChangeDetails, type InputValueChangeDetails, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type OpenChangeDetails, type ScrollToIndexDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, machine };
|