@destyler/combobox 0.0.7-beta.7 → 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.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 };