@zag-js/combobox 0.49.0 → 0.51.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/dist/index.js CHANGED
@@ -1,1450 +1,2 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // src/index.ts
21
- var src_exports = {};
22
- __export(src_exports, {
23
- anatomy: () => anatomy,
24
- collection: () => collection,
25
- connect: () => connect,
26
- machine: () => machine
27
- });
28
- module.exports = __toCommonJS(src_exports);
29
-
30
- // src/combobox.anatomy.ts
31
- var import_anatomy = require("@zag-js/anatomy");
32
- var anatomy = (0, import_anatomy.createAnatomy)("combobox").parts(
33
- "root",
34
- "label",
35
- "input",
36
- "positioner",
37
- "control",
38
- "trigger",
39
- "content",
40
- "clearTrigger",
41
- "item",
42
- "itemText",
43
- "itemIndicator",
44
- "itemGroup",
45
- "itemGroupLabel"
46
- );
47
- var parts = anatomy.build();
48
-
49
- // src/combobox.collection.ts
50
- var import_collection = require("@zag-js/collection");
51
- var import_core = require("@zag-js/core");
52
- var collection = (options) => {
53
- return (0, import_core.ref)(new import_collection.Collection(options));
54
- };
55
- collection.empty = () => {
56
- return (0, import_core.ref)(new import_collection.Collection({ items: [] }));
57
- };
58
-
59
- // src/combobox.connect.ts
60
- var import_dom_event = require("@zag-js/dom-event");
61
- var import_dom_query2 = require("@zag-js/dom-query");
62
- var import_popper = require("@zag-js/popper");
63
-
64
- // src/combobox.dom.ts
65
- var import_dom_query = require("@zag-js/dom-query");
66
- var dom = (0, import_dom_query.createScope)({
67
- getRootId: (ctx) => ctx.ids?.root ?? `combobox:${ctx.id}`,
68
- getLabelId: (ctx) => ctx.ids?.label ?? `combobox:${ctx.id}:label`,
69
- getControlId: (ctx) => ctx.ids?.control ?? `combobox:${ctx.id}:control`,
70
- getInputId: (ctx) => ctx.ids?.input ?? `combobox:${ctx.id}:input`,
71
- getContentId: (ctx) => ctx.ids?.content ?? `combobox:${ctx.id}:content`,
72
- getListId: (ctx) => `combobox:${ctx.id}:listbox`,
73
- getPositionerId: (ctx) => ctx.ids?.positioner ?? `combobox:${ctx.id}:popper`,
74
- getTriggerId: (ctx) => ctx.ids?.trigger ?? `combobox:${ctx.id}:toggle-btn`,
75
- getClearTriggerId: (ctx) => ctx.ids?.clearTrigger ?? `combobox:${ctx.id}:clear-btn`,
76
- getItemGroupId: (ctx, id) => ctx.ids?.itemGroup?.(id) ?? `combobox:${ctx.id}:optgroup:${id}`,
77
- getItemGroupLabelId: (ctx, id) => ctx.ids?.itemGroupLabel?.(id) ?? `combobox:${ctx.id}:optgroup-label:${id}`,
78
- getItemId: (ctx, id) => `combobox:${ctx.id}:option:${id}`,
79
- getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
80
- getListEl: (ctx) => dom.getById(ctx, dom.getListId(ctx)),
81
- getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
82
- getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
83
- getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
84
- getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
85
- getClearTriggerEl: (ctx) => dom.getById(ctx, dom.getClearTriggerId(ctx)),
86
- isInputFocused: (ctx) => dom.getDoc(ctx).activeElement === dom.getInputEl(ctx),
87
- getHighlightedItemEl: (ctx) => {
88
- const value = ctx.highlightedValue;
89
- if (value == null)
90
- return;
91
- return dom.getContentEl(ctx)?.querySelector(`[role=option][data-value="${CSS.escape(value)}"`);
92
- }
93
- });
94
-
95
- // src/combobox.connect.ts
96
- function connect(state, send, normalize) {
97
- const translations = state.context.translations;
98
- const collection2 = state.context.collection;
99
- const disabled = state.context.disabled;
100
- const interactive = state.context.isInteractive;
101
- const invalid = state.context.invalid;
102
- const readOnly = state.context.readOnly;
103
- const open = state.hasTag("open");
104
- const focused = state.hasTag("focused");
105
- const isDialogPopup = state.context.popup === "dialog";
106
- const popperStyles = (0, import_popper.getPlacementStyles)({
107
- ...state.context.positioning,
108
- placement: state.context.currentPlacement
109
- });
110
- function getItemState(props) {
111
- const { item } = props;
112
- const disabled2 = collection2.isItemDisabled(item);
113
- const value = collection2.itemToValue(item);
114
- return {
115
- value,
116
- disabled: Boolean(disabled2 || disabled2),
117
- highlighted: state.context.highlightedValue === value,
118
- selected: state.context.value.includes(value)
119
- };
120
- }
121
- return {
122
- focused,
123
- open,
124
- inputValue: state.context.inputValue,
125
- inputEmpty: state.context.isInputValueEmpty,
126
- highlightedValue: state.context.highlightedValue,
127
- highlightedItem: state.context.highlightedItem,
128
- value: state.context.value,
129
- valueAsString: state.context.valueAsString,
130
- hasSelectedItems: state.context.hasSelectedItems,
131
- selectedItems: state.context.selectedItems,
132
- collection: state.context.collection,
133
- reposition(options = {}) {
134
- send({ type: "POSITIONING.SET", options });
135
- },
136
- setCollection(collection3) {
137
- send({ type: "COLLECTION.SET", value: collection3 });
138
- },
139
- highlightValue(value) {
140
- send({ type: "HIGHLIGHTED_VALUE.SET", value });
141
- },
142
- selectValue(value) {
143
- send({ type: "ITEM.SELECT", value });
144
- },
145
- setValue(value) {
146
- send({ type: "VALUE.SET", value });
147
- },
148
- setInputValue(value) {
149
- send({ type: "INPUT_VALUE.SET", value });
150
- },
151
- clearValue(value) {
152
- if (value != null) {
153
- send({ type: "ITEM.CLEAR", value });
154
- } else {
155
- send("VALUE.CLEAR");
156
- }
157
- },
158
- focus() {
159
- dom.getInputEl(state.context)?.focus();
160
- },
161
- setOpen(_open) {
162
- if (_open === open)
163
- return;
164
- send(_open ? "OPEN" : "CLOSE");
165
- },
166
- rootProps: normalize.element({
167
- ...parts.root.attrs,
168
- dir: state.context.dir,
169
- id: dom.getRootId(state.context),
170
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
171
- "data-readonly": (0, import_dom_query2.dataAttr)(readOnly)
172
- }),
173
- labelProps: normalize.label({
174
- ...parts.label.attrs,
175
- dir: state.context.dir,
176
- htmlFor: dom.getInputId(state.context),
177
- id: dom.getLabelId(state.context),
178
- "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
179
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
180
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
181
- "data-focus": (0, import_dom_query2.dataAttr)(focused),
182
- onClick(event) {
183
- if (!isDialogPopup)
184
- return;
185
- event.preventDefault();
186
- dom.getTriggerEl(state.context)?.focus({ preventScroll: true });
187
- }
188
- }),
189
- controlProps: normalize.element({
190
- ...parts.control.attrs,
191
- dir: state.context.dir,
192
- id: dom.getControlId(state.context),
193
- "data-state": open ? "open" : "closed",
194
- "data-focus": (0, import_dom_query2.dataAttr)(focused),
195
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
196
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid)
197
- }),
198
- positionerProps: normalize.element({
199
- ...parts.positioner.attrs,
200
- dir: state.context.dir,
201
- id: dom.getPositionerId(state.context),
202
- style: popperStyles.floating
203
- }),
204
- inputProps: normalize.input({
205
- ...parts.input.attrs,
206
- dir: state.context.dir,
207
- "aria-invalid": (0, import_dom_query2.ariaAttr)(invalid),
208
- "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
209
- name: state.context.name,
210
- form: state.context.form,
211
- disabled,
212
- autoFocus: state.context.autoFocus,
213
- autoComplete: "off",
214
- autoCorrect: "off",
215
- autoCapitalize: "none",
216
- spellCheck: "false",
217
- readOnly,
218
- placeholder: state.context.placeholder,
219
- id: dom.getInputId(state.context),
220
- type: "text",
221
- role: "combobox",
222
- defaultValue: state.context.inputValue,
223
- "aria-autocomplete": state.context.autoComplete ? "both" : "list",
224
- "aria-controls": isDialogPopup ? dom.getListId(state.context) : dom.getContentId(state.context),
225
- "aria-expanded": open,
226
- "data-state": open ? "open" : "closed",
227
- "aria-activedescendant": state.context.highlightedValue ? dom.getItemId(state.context, state.context.highlightedValue) : void 0,
228
- onClick() {
229
- if (!state.context.openOnClick)
230
- return;
231
- if (!interactive)
232
- return;
233
- send("INPUT.CLICK");
234
- },
235
- onFocus() {
236
- if (disabled)
237
- return;
238
- send("INPUT.FOCUS");
239
- },
240
- onBlur() {
241
- if (disabled)
242
- return;
243
- send("INPUT.BLUR");
244
- },
245
- onChange(event) {
246
- send({ type: "INPUT.CHANGE", value: event.currentTarget.value });
247
- },
248
- onKeyDown(event) {
249
- if (event.defaultPrevented)
250
- return;
251
- if (!interactive)
252
- return;
253
- const evt = (0, import_dom_event.getNativeEvent)(event);
254
- if (evt.ctrlKey || evt.shiftKey || evt.isComposing)
255
- return;
256
- const openOnKeyPress = state.context.openOnKeyPress;
257
- const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;
258
- const keypress = true;
259
- const keymap = {
260
- ArrowDown(event2) {
261
- if (!openOnKeyPress && !open)
262
- return;
263
- send({ type: event2.altKey ? "OPEN" : "INPUT.ARROW_DOWN", keypress });
264
- event2.preventDefault();
265
- },
266
- ArrowUp() {
267
- if (!openOnKeyPress && !open)
268
- return;
269
- send({ type: event.altKey ? "CLOSE" : "INPUT.ARROW_UP", keypress });
270
- event.preventDefault();
271
- },
272
- Home(event2) {
273
- if (isModifierKey)
274
- return;
275
- send({ type: "INPUT.HOME", keypress });
276
- if (open) {
277
- event2.preventDefault();
278
- }
279
- },
280
- End(event2) {
281
- if (isModifierKey)
282
- return;
283
- send({ type: "INPUT.END", keypress });
284
- if (open) {
285
- event2.preventDefault();
286
- }
287
- },
288
- Enter(event2) {
289
- if (evt.isComposing)
290
- return;
291
- send({ type: "INPUT.ENTER", keypress });
292
- if (open) {
293
- event2.preventDefault();
294
- }
295
- const itemEl = dom.getHighlightedItemEl(state.context);
296
- (0, import_dom_event.clickIfLink)(itemEl);
297
- },
298
- Escape() {
299
- send({ type: "INPUT.ESCAPE", keypress });
300
- event.preventDefault();
301
- }
302
- };
303
- const key = (0, import_dom_event.getEventKey)(event, state.context);
304
- const exec = keymap[key];
305
- exec?.(event);
306
- }
307
- }),
308
- triggerProps: normalize.button({
309
- ...parts.trigger.attrs,
310
- dir: state.context.dir,
311
- id: dom.getTriggerId(state.context),
312
- "aria-haspopup": isDialogPopup ? "dialog" : "listbox",
313
- type: "button",
314
- tabIndex: isDialogPopup ? 0 : -1,
315
- "aria-label": translations.triggerLabel,
316
- "aria-expanded": open,
317
- "data-state": open ? "open" : "closed",
318
- "aria-controls": open ? dom.getContentId(state.context) : void 0,
319
- disabled,
320
- "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
321
- "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
322
- onClick(event) {
323
- const evt = (0, import_dom_event.getNativeEvent)(event);
324
- if (!interactive)
325
- return;
326
- if (!(0, import_dom_event.isLeftClick)(evt))
327
- return;
328
- send("TRIGGER.CLICK");
329
- },
330
- onPointerDown(event) {
331
- if (!interactive)
332
- return;
333
- if (event.pointerType === "touch")
334
- return;
335
- event.preventDefault();
336
- queueMicrotask(() => {
337
- dom.getInputEl(state.context)?.focus({ preventScroll: true });
338
- });
339
- },
340
- onKeyDown(event) {
341
- if (event.defaultPrevented)
342
- return;
343
- if (!isDialogPopup)
344
- return;
345
- const keyMap = {
346
- ArrowDown() {
347
- send("INPUT.FOCUS");
348
- send("INPUT.ARROW_DOWN");
349
- (0, import_dom_query2.raf)(() => {
350
- dom.getInputEl(state.context)?.focus({ preventScroll: true });
351
- });
352
- },
353
- ArrowUp() {
354
- send("INPUT.FOCUS");
355
- send("INPUT.ARROW_UP");
356
- (0, import_dom_query2.raf)(() => {
357
- dom.getInputEl(state.context)?.focus({ preventScroll: true });
358
- });
359
- }
360
- };
361
- const key = (0, import_dom_event.getEventKey)(event, state.context);
362
- const exec = keyMap[key];
363
- if (exec) {
364
- exec(event);
365
- event.preventDefault();
366
- }
367
- }
368
- }),
369
- contentProps: normalize.element({
370
- ...parts.content.attrs,
371
- dir: state.context.dir,
372
- id: dom.getContentId(state.context),
373
- role: isDialogPopup ? "dialog" : "listbox",
374
- tabIndex: -1,
375
- hidden: !open,
376
- "data-state": open ? "open" : "closed",
377
- "aria-labelledby": dom.getLabelId(state.context),
378
- "aria-multiselectable": state.context.multiple && !isDialogPopup ? true : void 0,
379
- onPointerDown(event) {
380
- event.preventDefault();
381
- }
382
- }),
383
- // only used when triggerOnly: true
384
- listProps: normalize.element({
385
- id: dom.getListId(state.context),
386
- role: isDialogPopup ? "listbox" : void 0,
387
- "aria-multiselectable": isDialogPopup && state.context.multiple ? true : void 0
388
- }),
389
- clearTriggerProps: normalize.button({
390
- ...parts.clearTrigger.attrs,
391
- dir: state.context.dir,
392
- id: dom.getClearTriggerId(state.context),
393
- type: "button",
394
- tabIndex: -1,
395
- disabled,
396
- "aria-label": translations.clearTriggerLabel,
397
- "aria-controls": dom.getInputId(state.context),
398
- hidden: !state.context.value.length,
399
- onClick() {
400
- if (!interactive)
401
- return;
402
- send({ type: "VALUE.CLEAR", src: "clear-trigger" });
403
- }
404
- }),
405
- getItemState,
406
- getItemProps(props) {
407
- const itemState = getItemState(props);
408
- const value = itemState.value;
409
- return normalize.element({
410
- ...parts.item.attrs,
411
- dir: state.context.dir,
412
- id: dom.getItemId(state.context, value),
413
- role: "option",
414
- tabIndex: -1,
415
- "data-highlighted": (0, import_dom_query2.dataAttr)(itemState.highlighted),
416
- "data-state": itemState.selected ? "checked" : "unchecked",
417
- "aria-selected": itemState.highlighted,
418
- "aria-disabled": itemState.disabled,
419
- "data-disabled": (0, import_dom_query2.dataAttr)(itemState.disabled),
420
- "data-value": itemState.value,
421
- onPointerMove() {
422
- if (itemState.disabled)
423
- return;
424
- send({ type: "ITEM.POINTER_MOVE", value });
425
- },
426
- onPointerLeave() {
427
- if (props.persistFocus)
428
- return;
429
- if (itemState.disabled)
430
- return;
431
- const mouseMoved = state.previousEvent.type === "ITEM.POINTER_MOVE";
432
- if (!mouseMoved)
433
- return;
434
- send({ type: "ITEM.POINTER_LEAVE", value });
435
- },
436
- onPointerUp(event) {
437
- if ((0, import_dom_query2.isDownloadingEvent)(event))
438
- return;
439
- if ((0, import_dom_query2.isOpeningInNewTab)(event))
440
- return;
441
- if ((0, import_dom_event.isContextMenuEvent)(event))
442
- return;
443
- if (itemState.disabled)
444
- return;
445
- send({ type: "ITEM.CLICK", src: "pointerup", value });
446
- },
447
- onTouchEnd(event) {
448
- event.preventDefault();
449
- event.stopPropagation();
450
- }
451
- });
452
- },
453
- getItemTextProps(props) {
454
- const itemState = getItemState(props);
455
- return normalize.element({
456
- ...parts.itemText.attrs,
457
- dir: state.context.dir,
458
- "data-disabled": (0, import_dom_query2.dataAttr)(itemState.disabled),
459
- "data-highlighted": (0, import_dom_query2.dataAttr)(itemState.highlighted)
460
- });
461
- },
462
- getItemIndicatorProps(props) {
463
- const itemState = getItemState(props);
464
- return normalize.element({
465
- "aria-hidden": true,
466
- ...parts.itemIndicator.attrs,
467
- dir: state.context.dir,
468
- "data-state": itemState.selected ? "checked" : "unchecked",
469
- hidden: !itemState.selected
470
- });
471
- },
472
- getItemGroupProps(props) {
473
- const { id } = props;
474
- return normalize.element({
475
- ...parts.itemGroup.attrs,
476
- dir: state.context.dir,
477
- id: dom.getItemGroupId(state.context, id),
478
- "aria-labelledby": dom.getItemGroupLabelId(state.context, id)
479
- });
480
- },
481
- getItemGroupLabelProps(props) {
482
- const { htmlFor } = props;
483
- return normalize.element({
484
- ...parts.itemGroupLabel.attrs,
485
- dir: state.context.dir,
486
- id: dom.getItemGroupLabelId(state.context, htmlFor),
487
- role: "group"
488
- });
489
- }
490
- };
491
- }
492
-
493
- // src/combobox.machine.ts
494
- var import_aria_hidden = require("@zag-js/aria-hidden");
495
- var import_core2 = require("@zag-js/core");
496
- var import_dismissable = require("@zag-js/dismissable");
497
- var import_dom_query3 = require("@zag-js/dom-query");
498
- var import_popper2 = require("@zag-js/popper");
499
- var import_utils = require("@zag-js/utils");
500
- var { and, not } = import_core2.guards;
501
- function machine(userContext) {
502
- const ctx = (0, import_utils.compact)(userContext);
503
- return (0, import_core2.createMachine)(
504
- {
505
- id: "combobox",
506
- initial: ctx.open ? "suggesting" : "idle",
507
- context: {
508
- loopFocus: true,
509
- openOnClick: false,
510
- value: [],
511
- highlightedValue: null,
512
- inputValue: "",
513
- allowCustomValue: false,
514
- closeOnSelect: !ctx.multiple,
515
- inputBehavior: "none",
516
- selectionBehavior: "replace",
517
- openOnKeyPress: true,
518
- openOnChange: true,
519
- dismissable: true,
520
- popup: "listbox",
521
- ...ctx,
522
- highlightedItem: null,
523
- selectedItems: [],
524
- valueAsString: "",
525
- collection: ctx.collection ?? collection.empty(),
526
- positioning: {
527
- placement: "bottom",
528
- flip: false,
529
- sameWidth: true,
530
- ...ctx.positioning
531
- },
532
- translations: {
533
- triggerLabel: "Toggle suggestions",
534
- clearTriggerLabel: "Clear value",
535
- ...ctx.translations
536
- }
537
- },
538
- created: ["syncInitialValues", "syncSelectionBehavior"],
539
- computed: {
540
- isInputValueEmpty: (ctx2) => ctx2.inputValue.length === 0,
541
- isInteractive: (ctx2) => !(ctx2.readOnly || ctx2.disabled),
542
- autoComplete: (ctx2) => ctx2.inputBehavior === "autocomplete",
543
- autoHighlight: (ctx2) => ctx2.inputBehavior === "autohighlight",
544
- hasSelectedItems: (ctx2) => ctx2.value.length > 0
545
- },
546
- watch: {
547
- value: ["syncSelectedItems"],
548
- inputValue: ["syncInputValue"],
549
- highlightedValue: ["autofillInputValue"],
550
- multiple: ["syncSelectionBehavior"],
551
- open: ["toggleVisibility"]
552
- },
553
- on: {
554
- "HIGHLIGHTED_VALUE.SET": {
555
- actions: ["setHighlightedItem"]
556
- },
557
- "ITEM.SELECT": {
558
- actions: ["selectItem"]
559
- },
560
- "ITEM.CLEAR": {
561
- actions: ["clearItem"]
562
- },
563
- "VALUE.SET": {
564
- actions: ["setSelectedItems"]
565
- },
566
- "INPUT_VALUE.SET": {
567
- actions: "setInputValue"
568
- },
569
- "COLLECTION.SET": {
570
- actions: ["setCollection"]
571
- },
572
- "POSITIONING.SET": {
573
- actions: ["reposition"]
574
- }
575
- },
576
- states: {
577
- idle: {
578
- tags: ["idle", "closed"],
579
- entry: ["scrollContentToTop", "clearHighlightedItem"],
580
- on: {
581
- "CONTROLLED.OPEN": {
582
- target: "interacting"
583
- },
584
- "TRIGGER.CLICK": [
585
- {
586
- guard: "isOpenControlled",
587
- actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
588
- },
589
- {
590
- target: "interacting",
591
- actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
592
- }
593
- ],
594
- "INPUT.CLICK": [
595
- {
596
- guard: "isOpenControlled",
597
- actions: ["invokeOnOpen"]
598
- },
599
- {
600
- target: "interacting",
601
- actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
602
- }
603
- ],
604
- "INPUT.FOCUS": {
605
- target: "focused"
606
- },
607
- OPEN: [
608
- {
609
- guard: "isOpenControlled",
610
- actions: ["invokeOnOpen"]
611
- },
612
- {
613
- target: "interacting",
614
- actions: ["invokeOnOpen"]
615
- }
616
- ],
617
- "VALUE.CLEAR": {
618
- target: "focused",
619
- actions: ["clearInputValue", "clearSelectedItems"]
620
- }
621
- }
622
- },
623
- focused: {
624
- tags: ["focused", "closed"],
625
- entry: ["focusInputOrTrigger", "scrollContentToTop", "clearHighlightedItem"],
626
- on: {
627
- "CONTROLLED.OPEN": [
628
- {
629
- guard: "isChangeEvent",
630
- target: "suggesting"
631
- },
632
- {
633
- target: "interacting"
634
- }
635
- ],
636
- "INPUT.CHANGE": [
637
- {
638
- guard: and("isOpenControlled", "openOnChange"),
639
- actions: ["setInputValue", "invokeOnOpen"]
640
- },
641
- {
642
- guard: "openOnChange",
643
- target: "suggesting",
644
- actions: ["setInputValue", "invokeOnOpen"]
645
- },
646
- {
647
- actions: "setInputValue"
648
- }
649
- ],
650
- "LAYER.INTERACT_OUTSIDE": {
651
- target: "idle"
652
- },
653
- "INPUT.ESCAPE": {
654
- guard: and("isCustomValue", not("allowCustomValue")),
655
- actions: "revertInputValue"
656
- },
657
- "INPUT.BLUR": {
658
- target: "idle"
659
- },
660
- "INPUT.CLICK": [
661
- {
662
- guard: "isOpenControlled",
663
- actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
664
- },
665
- {
666
- target: "interacting",
667
- actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
668
- }
669
- ],
670
- "TRIGGER.CLICK": [
671
- {
672
- guard: "isOpenControlled",
673
- actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
674
- },
675
- {
676
- target: "interacting",
677
- actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
678
- }
679
- ],
680
- "INPUT.ARROW_DOWN": [
681
- // == group 1 ==
682
- {
683
- guard: and("isOpenControlled", "autoComplete"),
684
- actions: ["invokeOnOpen"]
685
- },
686
- {
687
- guard: "autoComplete",
688
- target: "interacting",
689
- actions: ["invokeOnOpen"]
690
- },
691
- // == group 2 ==
692
- {
693
- guard: "isOpenControlled",
694
- actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
695
- },
696
- {
697
- target: "interacting",
698
- actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
699
- }
700
- ],
701
- "INPUT.ARROW_UP": [
702
- // == group 1 ==
703
- {
704
- guard: "autoComplete",
705
- target: "interacting",
706
- actions: "invokeOnOpen"
707
- },
708
- {
709
- guard: "autoComplete",
710
- target: "interacting",
711
- actions: "invokeOnOpen"
712
- },
713
- // == group 2 ==
714
- {
715
- target: "interacting",
716
- actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
717
- },
718
- {
719
- target: "interacting",
720
- actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
721
- }
722
- ],
723
- OPEN: [
724
- {
725
- guard: "isOpenControlled",
726
- actions: ["invokeOnOpen"]
727
- },
728
- {
729
- target: "interacting",
730
- actions: ["invokeOnOpen"]
731
- }
732
- ],
733
- "VALUE.CLEAR": {
734
- actions: ["clearInputValue", "clearSelectedItems"]
735
- }
736
- }
737
- },
738
- interacting: {
739
- tags: ["open", "focused"],
740
- activities: [
741
- "scrollIntoView",
742
- "trackDismissableLayer",
743
- "computePlacement",
744
- "hideOtherElements",
745
- "trackContentHeight"
746
- ],
747
- on: {
748
- "CONTROLLED.CLOSE": [
749
- {
750
- guard: "restoreFocus",
751
- target: "focused"
752
- },
753
- {
754
- target: "idle"
755
- }
756
- ],
757
- "INPUT.HOME": {
758
- actions: ["highlightFirstItem"]
759
- },
760
- "INPUT.END": {
761
- actions: ["highlightLastItem"]
762
- },
763
- "INPUT.ARROW_DOWN": [
764
- {
765
- guard: and("autoComplete", "isLastItemHighlighted"),
766
- actions: ["clearHighlightedItem", "scrollContentToTop"]
767
- },
768
- {
769
- actions: ["highlightNextItem"]
770
- }
771
- ],
772
- "INPUT.ARROW_UP": [
773
- {
774
- guard: and("autoComplete", "isFirstItemHighlighted"),
775
- actions: "clearHighlightedItem"
776
- },
777
- {
778
- actions: "highlightPrevItem"
779
- }
780
- ],
781
- "INPUT.ENTER": [
782
- {
783
- guard: and("isOpenControlled", "closeOnSelect"),
784
- actions: ["selectHighlightedItem", "invokeOnClose"]
785
- },
786
- {
787
- guard: "closeOnSelect",
788
- target: "focused",
789
- actions: ["selectHighlightedItem", "invokeOnClose"]
790
- },
791
- {
792
- actions: ["selectHighlightedItem"]
793
- }
794
- ],
795
- "INPUT.CHANGE": [
796
- {
797
- guard: "autoComplete",
798
- target: "suggesting",
799
- actions: ["setInputValue", "invokeOnOpen"]
800
- },
801
- {
802
- target: "suggesting",
803
- actions: ["clearHighlightedItem", "setInputValue", "invokeOnOpen"]
804
- }
805
- ],
806
- "ITEM.POINTER_MOVE": {
807
- actions: ["setHighlightedItem"]
808
- },
809
- "ITEM.POINTER_LEAVE": {
810
- actions: ["clearHighlightedItem"]
811
- },
812
- "ITEM.CLICK": [
813
- {
814
- guard: and("isOpenControlled", "closeOnSelect"),
815
- actions: ["selectItem", "invokeOnClose"]
816
- },
817
- {
818
- guard: "closeOnSelect",
819
- target: "focused",
820
- actions: ["selectItem", "invokeOnClose"]
821
- },
822
- {
823
- actions: ["selectItem"]
824
- }
825
- ],
826
- "LAYER.ESCAPE": [
827
- {
828
- guard: and("isOpenControlled", "autoComplete"),
829
- actions: ["syncInputValue", "invokeOnClose"]
830
- },
831
- {
832
- guard: "autoComplete",
833
- target: "focused",
834
- actions: ["syncInputValue", "invokeOnClose"]
835
- },
836
- {
837
- guard: "isOpenControlled",
838
- actions: "invokeOnClose"
839
- },
840
- {
841
- target: "focused",
842
- actions: ["invokeOnClose"]
843
- }
844
- ],
845
- "TRIGGER.CLICK": [
846
- {
847
- guard: "isOpenControlled",
848
- actions: "invokeOnClose"
849
- },
850
- {
851
- target: "focused",
852
- actions: "invokeOnClose"
853
- }
854
- ],
855
- "LAYER.INTERACT_OUTSIDE": [
856
- // == group 1 ==
857
- {
858
- guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
859
- actions: ["revertInputValue", "invokeOnClose"]
860
- },
861
- {
862
- guard: and("isCustomValue", not("allowCustomValue")),
863
- target: "idle",
864
- actions: ["revertInputValue", "invokeOnClose"]
865
- },
866
- // == group 2 ==
867
- {
868
- guard: "isOpenControlled",
869
- actions: "invokeOnClose"
870
- },
871
- {
872
- target: "idle",
873
- actions: "invokeOnClose"
874
- }
875
- ],
876
- CLOSE: [
877
- {
878
- guard: "isOpenControlled",
879
- actions: "invokeOnClose"
880
- },
881
- {
882
- target: "focused",
883
- actions: "invokeOnClose"
884
- }
885
- ],
886
- "VALUE.CLEAR": [
887
- {
888
- guard: "isOpenControlled",
889
- actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
890
- },
891
- {
892
- target: "focused",
893
- actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
894
- }
895
- ]
896
- }
897
- },
898
- suggesting: {
899
- tags: ["open", "focused"],
900
- activities: [
901
- "trackDismissableLayer",
902
- "scrollIntoView",
903
- "computePlacement",
904
- "trackChildNodes",
905
- "hideOtherElements",
906
- "trackContentHeight"
907
- ],
908
- entry: ["focusInput"],
909
- on: {
910
- "CONTROLLED.CLOSE": [
911
- {
912
- guard: "restoreFocus",
913
- target: "focused"
914
- },
915
- {
916
- target: "idle"
917
- }
918
- ],
919
- CHILDREN_CHANGE: {
920
- actions: ["highlightFirstItem"]
921
- },
922
- "INPUT.ARROW_DOWN": {
923
- target: "interacting",
924
- actions: "highlightNextItem"
925
- },
926
- "INPUT.ARROW_UP": {
927
- target: "interacting",
928
- actions: "highlightPrevItem"
929
- },
930
- "INPUT.HOME": {
931
- target: "interacting",
932
- actions: ["highlightFirstItem"]
933
- },
934
- "INPUT.END": {
935
- target: "interacting",
936
- actions: ["highlightLastItem"]
937
- },
938
- "INPUT.ENTER": [
939
- {
940
- guard: and("isOpenControlled", "closeOnSelect"),
941
- actions: ["selectHighlightedItem", "invokeOnClose"]
942
- },
943
- {
944
- guard: "closeOnSelect",
945
- target: "focused",
946
- actions: ["selectHighlightedItem", "invokeOnClose"]
947
- },
948
- {
949
- actions: ["selectHighlightedItem"]
950
- }
951
- ],
952
- "INPUT.CHANGE": [
953
- {
954
- guard: "autoHighlight",
955
- actions: ["setInputValue"]
956
- },
957
- {
958
- actions: ["setInputValue"]
959
- }
960
- ],
961
- "LAYER.ESCAPE": [
962
- {
963
- guard: "isOpenControlled",
964
- actions: "invokeOnClose"
965
- },
966
- {
967
- target: "focused",
968
- actions: "invokeOnClose"
969
- }
970
- ],
971
- "ITEM.POINTER_MOVE": {
972
- target: "interacting",
973
- actions: "setHighlightedItem"
974
- },
975
- "ITEM.POINTER_LEAVE": {
976
- actions: "clearHighlightedItem"
977
- },
978
- "LAYER.INTERACT_OUTSIDE": [
979
- // == group 1 ==
980
- {
981
- guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
982
- actions: ["revertInputValue", "invokeOnClose"]
983
- },
984
- {
985
- guard: and("isCustomValue", not("allowCustomValue")),
986
- target: "idle",
987
- actions: ["revertInputValue", "invokeOnClose"]
988
- },
989
- // == group 2 ==
990
- {
991
- guard: "isOpenControlled",
992
- actions: "invokeOnClose"
993
- },
994
- {
995
- target: "idle",
996
- actions: "invokeOnClose"
997
- }
998
- ],
999
- "TRIGGER.CLICK": [
1000
- {
1001
- guard: "isOpenControlled",
1002
- actions: "invokeOnClose"
1003
- },
1004
- {
1005
- target: "focused",
1006
- actions: "invokeOnClose"
1007
- }
1008
- ],
1009
- "ITEM.CLICK": [
1010
- {
1011
- guard: and("isOpenControlled", "closeOnSelect"),
1012
- actions: ["selectItem", "invokeOnClose"]
1013
- },
1014
- {
1015
- guard: "closeOnSelect",
1016
- target: "focused",
1017
- actions: ["selectItem", "invokeOnClose"]
1018
- },
1019
- {
1020
- actions: ["selectItem"]
1021
- }
1022
- ],
1023
- CLOSE: [
1024
- {
1025
- guard: "isOpenControlled",
1026
- actions: "invokeOnClose"
1027
- },
1028
- {
1029
- target: "focused",
1030
- actions: "invokeOnClose"
1031
- }
1032
- ],
1033
- "VALUE.CLEAR": [
1034
- {
1035
- guard: "isOpenControlled",
1036
- actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
1037
- },
1038
- {
1039
- target: "focused",
1040
- actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
1041
- }
1042
- ]
1043
- }
1044
- }
1045
- }
1046
- },
1047
- {
1048
- guards: {
1049
- isInputValueEmpty: (ctx2) => ctx2.isInputValueEmpty,
1050
- autoComplete: (ctx2) => ctx2.autoComplete && !ctx2.multiple,
1051
- autoHighlight: (ctx2) => ctx2.autoHighlight,
1052
- isFirstItemHighlighted: (ctx2) => ctx2.collection.first() === ctx2.highlightedValue,
1053
- isLastItemHighlighted: (ctx2) => ctx2.collection.last() === ctx2.highlightedValue,
1054
- isCustomValue: (ctx2) => ctx2.inputValue !== ctx2.valueAsString,
1055
- allowCustomValue: (ctx2) => !!ctx2.allowCustomValue,
1056
- hasHighlightedItem: (ctx2) => ctx2.highlightedValue != null,
1057
- closeOnSelect: (ctx2) => !!ctx2.closeOnSelect,
1058
- isOpenControlled: (ctx2) => !!ctx2["open.controlled"],
1059
- openOnChange: (ctx2, evt) => {
1060
- if ((0, import_utils.isBoolean)(ctx2.openOnChange))
1061
- return ctx2.openOnChange;
1062
- return !!ctx2.openOnChange?.({ inputValue: evt.value });
1063
- },
1064
- restoreFocus: (_ctx, evt) => evt.restoreFocus == null ? true : !!evt.restoreFocus,
1065
- isChangeEvent: (_ctx, evt) => evt.previousEvent?.type === "INPUT.CHANGE"
1066
- },
1067
- activities: {
1068
- trackDismissableLayer(ctx2, _evt, { send }) {
1069
- if (!ctx2.dismissable)
1070
- return;
1071
- const contentEl = () => dom.getContentEl(ctx2);
1072
- return (0, import_dismissable.trackDismissableElement)(contentEl, {
1073
- defer: true,
1074
- exclude: () => [dom.getInputEl(ctx2), dom.getTriggerEl(ctx2), dom.getClearTriggerEl(ctx2)],
1075
- onFocusOutside: ctx2.onFocusOutside,
1076
- onPointerDownOutside: ctx2.onPointerDownOutside,
1077
- onInteractOutside: ctx2.onInteractOutside,
1078
- onEscapeKeyDown(event) {
1079
- event.preventDefault();
1080
- event.stopPropagation();
1081
- send("LAYER.ESCAPE");
1082
- },
1083
- onDismiss() {
1084
- send({ type: "LAYER.INTERACT_OUTSIDE", restoreFocus: false });
1085
- }
1086
- });
1087
- },
1088
- hideOtherElements(ctx2) {
1089
- return (0, import_aria_hidden.ariaHidden)([dom.getInputEl(ctx2), dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)]);
1090
- },
1091
- computePlacement(ctx2) {
1092
- const controlEl = () => dom.getControlEl(ctx2);
1093
- const positionerEl = () => dom.getPositionerEl(ctx2);
1094
- ctx2.currentPlacement = ctx2.positioning.placement;
1095
- return (0, import_popper2.getPlacement)(controlEl, positionerEl, {
1096
- ...ctx2.positioning,
1097
- defer: true,
1098
- onComplete(data) {
1099
- ctx2.currentPlacement = data.placement;
1100
- }
1101
- });
1102
- },
1103
- // in event the options are fetched (async), we still want to auto-highlight the first option
1104
- trackChildNodes(ctx2, _evt, { send }) {
1105
- if (!ctx2.autoHighlight)
1106
- return;
1107
- const exec = () => send("CHILDREN_CHANGE");
1108
- (0, import_dom_query3.raf)(() => exec());
1109
- const contentEl = () => dom.getContentEl(ctx2);
1110
- return (0, import_dom_query3.observeChildren)(contentEl, {
1111
- callback: exec,
1112
- defer: true
1113
- });
1114
- },
1115
- scrollIntoView(ctx2, _evt, { getState }) {
1116
- const inputEl = dom.getInputEl(ctx2);
1117
- const exec = (immediate) => {
1118
- const state = getState();
1119
- const pointer = state.event.type.startsWith("ITEM.POINTER");
1120
- if (pointer || !ctx2.highlightedValue)
1121
- return;
1122
- const optionEl = dom.getHighlightedItemEl(ctx2);
1123
- const contentEl = dom.getContentEl(ctx2);
1124
- if (ctx2.scrollToIndexFn) {
1125
- const highlightedIndex = ctx2.collection.indexOf(ctx2.highlightedValue);
1126
- ctx2.scrollToIndexFn({ index: highlightedIndex, immediate });
1127
- return;
1128
- }
1129
- (0, import_dom_query3.scrollIntoView)(optionEl, { rootEl: contentEl, block: "nearest" });
1130
- };
1131
- (0, import_dom_query3.raf)(() => exec(true));
1132
- return (0, import_dom_query3.observeAttributes)(inputEl, {
1133
- attributes: ["aria-activedescendant"],
1134
- callback: () => exec(false)
1135
- });
1136
- },
1137
- trackContentHeight(ctx2) {
1138
- let cleanup;
1139
- (0, import_dom_query3.raf)(() => {
1140
- const contentEl = dom.getContentEl(ctx2);
1141
- const listboxEl = dom.getListEl(ctx2);
1142
- if (!contentEl || !listboxEl)
1143
- return;
1144
- const win = dom.getWin(ctx2);
1145
- let rafId;
1146
- const observer = new win.ResizeObserver(() => {
1147
- rafId = requestAnimationFrame(() => {
1148
- contentEl.style.setProperty(`--height`, `${listboxEl.offsetHeight}px`);
1149
- });
1150
- });
1151
- observer.observe(contentEl);
1152
- cleanup = () => {
1153
- cancelAnimationFrame(rafId);
1154
- observer.unobserve(contentEl);
1155
- };
1156
- });
1157
- return () => cleanup?.();
1158
- }
1159
- },
1160
- actions: {
1161
- reposition(ctx2, evt) {
1162
- const controlEl = () => dom.getControlEl(ctx2);
1163
- const positionerEl = () => dom.getPositionerEl(ctx2);
1164
- (0, import_popper2.getPlacement)(controlEl, positionerEl, {
1165
- ...ctx2.positioning,
1166
- ...evt.options,
1167
- defer: true,
1168
- listeners: false,
1169
- onComplete(data) {
1170
- ctx2.currentPlacement = data.placement;
1171
- }
1172
- });
1173
- },
1174
- setHighlightedItem(ctx2, evt) {
1175
- set.highlightedItem(ctx2, evt.value);
1176
- },
1177
- clearHighlightedItem(ctx2) {
1178
- set.highlightedItem(ctx2, null, true);
1179
- },
1180
- selectHighlightedItem(ctx2) {
1181
- set.selectedItem(ctx2, ctx2.highlightedValue);
1182
- },
1183
- selectItem(ctx2, evt) {
1184
- set.selectedItem(ctx2, evt.value);
1185
- },
1186
- clearItem(ctx2, evt) {
1187
- const value = ctx2.value.filter((v) => v !== evt.value);
1188
- set.selectedItems(ctx2, value);
1189
- },
1190
- focusInput(ctx2) {
1191
- (0, import_dom_query3.raf)(() => {
1192
- if (dom.isInputFocused(ctx2))
1193
- return;
1194
- dom.getInputEl(ctx2)?.focus({ preventScroll: true });
1195
- });
1196
- },
1197
- focusInputOrTrigger(ctx2) {
1198
- queueMicrotask(() => {
1199
- if (ctx2.popup === "dialog") {
1200
- dom.getTriggerEl(ctx2)?.focus({ preventScroll: true });
1201
- } else {
1202
- dom.getInputEl(ctx2)?.focus({ preventScroll: true });
1203
- }
1204
- });
1205
- },
1206
- syncInputValue(ctx2, evt) {
1207
- const inputEl = dom.getInputEl(ctx2);
1208
- if (!inputEl)
1209
- return;
1210
- inputEl.value = ctx2.inputValue;
1211
- (0, import_dom_query3.raf)(() => {
1212
- if (!evt.keypress)
1213
- return;
1214
- const { selectionStart, selectionEnd } = inputEl;
1215
- if (Math.abs((selectionEnd ?? 0) - (selectionStart ?? 0)) !== 0)
1216
- return;
1217
- if (selectionStart !== 0)
1218
- return;
1219
- inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
1220
- });
1221
- },
1222
- setInputValue(ctx2, evt) {
1223
- set.inputValue(ctx2, evt.value);
1224
- },
1225
- clearInputValue(ctx2) {
1226
- set.inputValue(ctx2, "");
1227
- },
1228
- revertInputValue(ctx2) {
1229
- const inputValue = (0, import_utils.match)(ctx2.selectionBehavior, {
1230
- replace: ctx2.hasSelectedItems ? ctx2.valueAsString : "",
1231
- preserve: ctx2.inputValue,
1232
- clear: ""
1233
- });
1234
- set.inputValue(ctx2, inputValue);
1235
- },
1236
- syncInitialValues(ctx2) {
1237
- const selectedItems = ctx2.collection.items(ctx2.value);
1238
- const valueAsString = ctx2.collection.itemsToString(selectedItems);
1239
- ctx2.highlightedItem = ctx2.collection.item(ctx2.highlightedValue);
1240
- ctx2.selectedItems = selectedItems;
1241
- ctx2.valueAsString = valueAsString;
1242
- ctx2.inputValue = (0, import_utils.match)(ctx2.selectionBehavior, {
1243
- preserve: ctx2.inputValue || valueAsString,
1244
- replace: valueAsString,
1245
- clear: ""
1246
- });
1247
- },
1248
- syncSelectionBehavior(ctx2) {
1249
- if (ctx2.multiple) {
1250
- ctx2.selectionBehavior = "clear";
1251
- }
1252
- },
1253
- setSelectedItems(ctx2, evt) {
1254
- set.selectedItems(ctx2, evt.value);
1255
- },
1256
- clearSelectedItems(ctx2) {
1257
- set.selectedItems(ctx2, []);
1258
- },
1259
- scrollContentToTop(ctx2) {
1260
- if (ctx2.scrollToIndexFn) {
1261
- ctx2.scrollToIndexFn({ index: 0, immediate: true });
1262
- } else {
1263
- const contentEl = dom.getContentEl(ctx2);
1264
- if (!contentEl)
1265
- return;
1266
- contentEl.scrollTop = 0;
1267
- }
1268
- },
1269
- invokeOnOpen(ctx2) {
1270
- ctx2.onOpenChange?.({ open: true });
1271
- },
1272
- invokeOnClose(ctx2) {
1273
- ctx2.onOpenChange?.({ open: false });
1274
- },
1275
- highlightFirstItem(ctx2) {
1276
- (0, import_dom_query3.raf)(() => {
1277
- const value = ctx2.collection.first();
1278
- set.highlightedItem(ctx2, value);
1279
- });
1280
- },
1281
- highlightLastItem(ctx2) {
1282
- (0, import_dom_query3.raf)(() => {
1283
- const value = ctx2.collection.last();
1284
- set.highlightedItem(ctx2, value);
1285
- });
1286
- },
1287
- highlightNextItem(ctx2) {
1288
- let value = null;
1289
- if (ctx2.highlightedValue) {
1290
- value = ctx2.collection.next(ctx2.highlightedValue);
1291
- if (!value && ctx2.loopFocus)
1292
- value = ctx2.collection.first();
1293
- } else {
1294
- value = ctx2.collection.first();
1295
- }
1296
- set.highlightedItem(ctx2, value);
1297
- },
1298
- highlightPrevItem(ctx2) {
1299
- let value = null;
1300
- if (ctx2.highlightedValue) {
1301
- value = ctx2.collection.prev(ctx2.highlightedValue);
1302
- if (!value && ctx2.loopFocus)
1303
- value = ctx2.collection.last();
1304
- } else {
1305
- value = ctx2.collection.last();
1306
- }
1307
- set.highlightedItem(ctx2, value);
1308
- },
1309
- highlightFirstSelectedItem(ctx2) {
1310
- (0, import_dom_query3.raf)(() => {
1311
- const [value] = ctx2.collection.sort(ctx2.value);
1312
- set.highlightedItem(ctx2, value);
1313
- });
1314
- },
1315
- highlightFirstOrSelectedItem(ctx2) {
1316
- (0, import_dom_query3.raf)(() => {
1317
- let value = null;
1318
- if (ctx2.hasSelectedItems) {
1319
- value = ctx2.collection.sort(ctx2.value)[0];
1320
- } else {
1321
- value = ctx2.collection.first();
1322
- }
1323
- set.highlightedItem(ctx2, value);
1324
- });
1325
- },
1326
- highlightLastOrSelectedItem(ctx2) {
1327
- (0, import_dom_query3.raf)(() => {
1328
- let value = null;
1329
- if (ctx2.hasSelectedItems) {
1330
- value = ctx2.collection.sort(ctx2.value)[0];
1331
- } else {
1332
- value = ctx2.collection.last();
1333
- }
1334
- set.highlightedItem(ctx2, value);
1335
- });
1336
- },
1337
- autofillInputValue(ctx2, evt) {
1338
- const inputEl = dom.getInputEl(ctx2);
1339
- if (!ctx2.autoComplete || !inputEl || !evt.keypress)
1340
- return;
1341
- const valueText = ctx2.collection.valueToString(ctx2.highlightedValue);
1342
- (0, import_dom_query3.raf)(() => {
1343
- inputEl.value = valueText || ctx2.inputValue;
1344
- });
1345
- },
1346
- setCollection(ctx2, evt) {
1347
- ctx2.collection = evt.value;
1348
- },
1349
- syncSelectedItems(ctx2) {
1350
- const prevSelectedItems = ctx2.selectedItems;
1351
- ctx2.selectedItems = ctx2.value.map((v) => {
1352
- const foundItem = prevSelectedItems.find((item) => ctx2.collection.itemToValue(item) === v);
1353
- if (foundItem)
1354
- return foundItem;
1355
- return ctx2.collection.item(v);
1356
- });
1357
- },
1358
- toggleVisibility(ctx2, evt, { send }) {
1359
- send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
1360
- }
1361
- }
1362
- }
1363
- );
1364
- }
1365
- var invoke = {
1366
- valueChange: (ctx) => {
1367
- ctx.onValueChange?.({
1368
- value: Array.from(ctx.value),
1369
- items: ctx.selectedItems
1370
- });
1371
- const prevSelectedItems = ctx.selectedItems;
1372
- ctx.selectedItems = ctx.value.map((v) => {
1373
- const foundItem = prevSelectedItems.find((item) => ctx.collection.itemToValue(item) === v);
1374
- if (foundItem)
1375
- return foundItem;
1376
- return ctx.collection.item(v);
1377
- });
1378
- const valueAsString = ctx.collection.itemsToString(ctx.selectedItems);
1379
- ctx.valueAsString = valueAsString;
1380
- let nextInputValue;
1381
- if (ctx.getSelectionValue) {
1382
- nextInputValue = ctx.getSelectionValue({
1383
- inputValue: ctx.inputValue,
1384
- selectedItems: Array.from(ctx.selectedItems),
1385
- valueAsString
1386
- });
1387
- } else {
1388
- nextInputValue = (0, import_utils.match)(ctx.selectionBehavior, {
1389
- replace: ctx.valueAsString,
1390
- preserve: ctx.inputValue,
1391
- clear: ""
1392
- });
1393
- }
1394
- ctx.inputValue = nextInputValue;
1395
- invoke.inputChange(ctx);
1396
- },
1397
- highlightChange: (ctx) => {
1398
- ctx.onHighlightChange?.({
1399
- highlightedValue: ctx.highlightedValue,
1400
- highligtedItem: ctx.highlightedItem
1401
- });
1402
- ctx.highlightedItem = ctx.collection.item(ctx.highlightedValue);
1403
- },
1404
- inputChange: (ctx) => {
1405
- ctx.onInputValueChange?.({ inputValue: ctx.inputValue });
1406
- }
1407
- };
1408
- var set = {
1409
- selectedItem: (ctx, value, force = false) => {
1410
- if ((0, import_utils.isEqual)(ctx.value, value))
1411
- return;
1412
- if (value == null && !force)
1413
- return;
1414
- if (value == null && force) {
1415
- ctx.value = [];
1416
- invoke.valueChange(ctx);
1417
- return;
1418
- }
1419
- ctx.value = ctx.multiple ? (0, import_utils.addOrRemove)(ctx.value, value) : [value];
1420
- invoke.valueChange(ctx);
1421
- },
1422
- selectedItems: (ctx, value) => {
1423
- if ((0, import_utils.isEqual)(ctx.value, value))
1424
- return;
1425
- ctx.value = value;
1426
- invoke.valueChange(ctx);
1427
- },
1428
- highlightedItem: (ctx, value, force = false) => {
1429
- if ((0, import_utils.isEqual)(ctx.highlightedValue, value))
1430
- return;
1431
- if (!value && !force)
1432
- return;
1433
- ctx.highlightedValue = value || null;
1434
- invoke.highlightChange(ctx);
1435
- },
1436
- inputValue: (ctx, value) => {
1437
- if ((0, import_utils.isEqual)(ctx.inputValue, value))
1438
- return;
1439
- ctx.inputValue = value;
1440
- invoke.inputChange(ctx);
1441
- }
1442
- };
1443
- // Annotate the CommonJS export names for ESM import in node:
1444
- 0 && (module.exports = {
1445
- anatomy,
1446
- collection,
1447
- connect,
1448
- machine
1449
- });
1
+ "use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:true})};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from==="object"||typeof from==="function"){for(let key of __getOwnPropNames(from))if(!__hasOwnProp.call(to,key)&&key!==except)__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:true}),mod);var src_exports={};__export(src_exports,{anatomy:()=>anatomy,collection:()=>collection,connect:()=>connect,machine:()=>machine});module.exports=__toCommonJS(src_exports);var import_anatomy=require("@zag-js/anatomy");var anatomy=(0,import_anatomy.createAnatomy)("combobox").parts("root","label","input","positioner","control","trigger","content","clearTrigger","item","itemText","itemIndicator","itemGroup","itemGroupLabel");var parts=anatomy.build();var import_collection=require("@zag-js/collection");var import_core=require("@zag-js/core");var collection=options=>{return(0,import_core.ref)(new import_collection.Collection(options))};collection.empty=()=>{return(0,import_core.ref)(new import_collection.Collection({items:[]}))};var import_dom_event=require("@zag-js/dom-event");var import_dom_query2=require("@zag-js/dom-query");var import_popper=require("@zag-js/popper");var import_dom_query=require("@zag-js/dom-query");var dom=(0,import_dom_query.createScope)({getRootId:ctx=>ctx.ids?.root??`combobox:${ctx.id}`,getLabelId:ctx=>ctx.ids?.label??`combobox:${ctx.id}:label`,getControlId:ctx=>ctx.ids?.control??`combobox:${ctx.id}:control`,getInputId:ctx=>ctx.ids?.input??`combobox:${ctx.id}:input`,getContentId:ctx=>ctx.ids?.content??`combobox:${ctx.id}:content`,getPositionerId:ctx=>ctx.ids?.positioner??`combobox:${ctx.id}:popper`,getTriggerId:ctx=>ctx.ids?.trigger??`combobox:${ctx.id}:toggle-btn`,getClearTriggerId:ctx=>ctx.ids?.clearTrigger??`combobox:${ctx.id}:clear-btn`,getItemGroupId:(ctx,id)=>ctx.ids?.itemGroup?.(id)??`combobox:${ctx.id}:optgroup:${id}`,getItemGroupLabelId:(ctx,id)=>ctx.ids?.itemGroupLabel?.(id)??`combobox:${ctx.id}:optgroup-label:${id}`,getItemId:(ctx,id)=>`combobox:${ctx.id}:option:${id}`,getContentEl:ctx=>dom.getById(ctx,dom.getContentId(ctx)),getInputEl:ctx=>dom.getById(ctx,dom.getInputId(ctx)),getPositionerEl:ctx=>dom.getById(ctx,dom.getPositionerId(ctx)),getControlEl:ctx=>dom.getById(ctx,dom.getControlId(ctx)),getTriggerEl:ctx=>dom.getById(ctx,dom.getTriggerId(ctx)),getClearTriggerEl:ctx=>dom.getById(ctx,dom.getClearTriggerId(ctx)),getHighlightedItemEl:ctx=>{const value=ctx.highlightedValue;if(value==null)return;return(0,import_dom_query.query)(dom.getContentEl(ctx),`[role=option][data-value="${CSS.escape(value)}"`)},focusInputEl:ctx=>{const inputEl=dom.getInputEl(ctx);if(dom.getActiveElement(ctx)===inputEl)return;inputEl?.focus({preventScroll:true})},focusTriggerEl:ctx=>{const triggerEl=dom.getTriggerEl(ctx);if(dom.getActiveElement(ctx)===triggerEl)return;triggerEl?.focus({preventScroll:true})}});function connect(state,send,normalize){const translations=state.context.translations;const collection2=state.context.collection;const disabled=state.context.disabled;const interactive=state.context.isInteractive;const invalid=state.context.invalid;const readOnly=state.context.readOnly;const open=state.hasTag("open");const focused=state.hasTag("focused");const composite=state.context.composite;const highlightedValue=state.context.highlightedValue;const popperStyles=(0,import_popper.getPlacementStyles)({...state.context.positioning,placement:state.context.currentPlacement});function getItemState(props){const{item}=props;const disabled2=collection2.isItemDisabled(item);const value=collection2.itemToValue(item);return{value,disabled:Boolean(disabled2||disabled2),highlighted:highlightedValue===value,selected:state.context.value.includes(value)}}return{focused,open,inputValue:state.context.inputValue,highlightedValue,highlightedItem:state.context.highlightedItem,value:state.context.value,valueAsString:state.context.valueAsString,hasSelectedItems:state.context.hasSelectedItems,selectedItems:state.context.selectedItems,collection:state.context.collection,reposition(options={}){send({type:"POSITIONING.SET",options})},setCollection(collection3){send({type:"COLLECTION.SET",value:collection3})},setHighlightValue(value){send({type:"HIGHLIGHTED_VALUE.SET",value})},selectValue(value){send({type:"ITEM.SELECT",value})},setValue(value){send({type:"VALUE.SET",value})},setInputValue(value){send({type:"INPUT_VALUE.SET",value})},clearValue(value){if(value!=null){send({type:"ITEM.CLEAR",value})}else{send("VALUE.CLEAR")}},focus(){dom.getInputEl(state.context)?.focus()},setOpen(nextOpen){if(nextOpen===open)return;send(nextOpen?"OPEN":"CLOSE")},rootProps:normalize.element({...parts.root.attrs,dir:state.context.dir,id:dom.getRootId(state.context),"data-invalid":(0,import_dom_query2.dataAttr)(invalid),"data-readonly":(0,import_dom_query2.dataAttr)(readOnly)}),labelProps:normalize.label({...parts.label.attrs,dir:state.context.dir,htmlFor:dom.getInputId(state.context),id:dom.getLabelId(state.context),"data-readonly":(0,import_dom_query2.dataAttr)(readOnly),"data-disabled":(0,import_dom_query2.dataAttr)(disabled),"data-invalid":(0,import_dom_query2.dataAttr)(invalid),"data-focus":(0,import_dom_query2.dataAttr)(focused),onClick(event){if(composite)return;event.preventDefault();dom.getTriggerEl(state.context)?.focus({preventScroll:true})}}),controlProps:normalize.element({...parts.control.attrs,dir:state.context.dir,id:dom.getControlId(state.context),"data-state":open?"open":"closed","data-focus":(0,import_dom_query2.dataAttr)(focused),"data-disabled":(0,import_dom_query2.dataAttr)(disabled),"data-invalid":(0,import_dom_query2.dataAttr)(invalid)}),positionerProps:normalize.element({...parts.positioner.attrs,dir:state.context.dir,id:dom.getPositionerId(state.context),style:popperStyles.floating}),inputProps:normalize.input({...parts.input.attrs,dir:state.context.dir,"aria-invalid":(0,import_dom_query2.ariaAttr)(invalid),"data-invalid":(0,import_dom_query2.dataAttr)(invalid),name:state.context.name,form:state.context.form,disabled,autoFocus:state.context.autoFocus,autoComplete:"off",autoCorrect:"off",autoCapitalize:"none",spellCheck:"false",readOnly,placeholder:state.context.placeholder,id:dom.getInputId(state.context),type:"text",role:"combobox",defaultValue:state.context.inputValue,"aria-autocomplete":state.context.autoComplete?"both":"list","aria-controls":dom.getContentId(state.context),"aria-expanded":open,"data-state":open?"open":"closed","aria-activedescendant":highlightedValue?dom.getItemId(state.context,highlightedValue):void 0,onClick(event){if(event.defaultPrevented)return;if(!state.context.openOnClick)return;if(!interactive)return;send("INPUT.CLICK")},onFocus(){if(disabled)return;send("INPUT.FOCUS")},onBlur(){if(disabled)return;send("INPUT.BLUR")},onChange(event){send({type:"INPUT.CHANGE",value:event.currentTarget.value})},onKeyDown(event){if(event.defaultPrevented)return;if(!interactive)return;const evt=(0,import_dom_event.getNativeEvent)(event);if(evt.ctrlKey||evt.shiftKey||evt.isComposing)return;const openOnKeyPress=state.context.openOnKeyPress;const isModifierKey=event.ctrlKey||event.metaKey||event.shiftKey;const keypress=true;const keymap={ArrowDown(event2){if(!openOnKeyPress&&!open)return;send({type:event2.altKey?"OPEN":"INPUT.ARROW_DOWN",keypress});event2.preventDefault()},ArrowUp(){if(!openOnKeyPress&&!open)return;send({type:event.altKey?"CLOSE":"INPUT.ARROW_UP",keypress});event.preventDefault()},Home(event2){if(isModifierKey)return;send({type:"INPUT.HOME",keypress});if(open){event2.preventDefault()}},End(event2){if(isModifierKey)return;send({type:"INPUT.END",keypress});if(open){event2.preventDefault()}},Enter(event2){if(evt.isComposing)return;send({type:"INPUT.ENTER",keypress});if(open){event2.preventDefault()}const itemEl=dom.getHighlightedItemEl(state.context);(0,import_dom_event.clickIfLink)(itemEl)},Escape(){send({type:"INPUT.ESCAPE",keypress});event.preventDefault()}};const key=(0,import_dom_event.getEventKey)(event,state.context);const exec=keymap[key];exec?.(event)}}),getTriggerProps(props={}){return normalize.button({...parts.trigger.attrs,dir:state.context.dir,id:dom.getTriggerId(state.context),"aria-haspopup":composite?"listbox":"dialog",type:"button",tabIndex:props.focusable?void 0:-1,"aria-label":translations.triggerLabel,"aria-expanded":open,"data-state":open?"open":"closed","aria-controls":open?dom.getContentId(state.context):void 0,disabled,"data-focusable":(0,import_dom_query2.dataAttr)(props.focusable),"data-readonly":(0,import_dom_query2.dataAttr)(readOnly),"data-disabled":(0,import_dom_query2.dataAttr)(disabled),onFocus(){if(!props.focusable)return;send({type:"INPUT.FOCUS",src:"trigger"})},onClick(event){if(event.defaultPrevented)return;const evt=(0,import_dom_event.getNativeEvent)(event);if(!interactive)return;if(!(0,import_dom_event.isLeftClick)(evt))return;send("TRIGGER.CLICK")},onPointerDown(event){if(!interactive)return;if(event.pointerType==="touch")return;event.preventDefault();queueMicrotask(()=>{dom.getInputEl(state.context)?.focus({preventScroll:true})})},onKeyDown(event){if(event.defaultPrevented)return;if(composite)return;const keyMap={ArrowDown(){send({type:"INPUT.ARROW_DOWN",src:"trigger"})},ArrowUp(){send({type:"INPUT.ARROW_UP",src:"trigger"})}};const key=(0,import_dom_event.getEventKey)(event,state.context);const exec=keyMap[key];if(exec){exec(event);event.preventDefault()}}})},contentProps:normalize.element({...parts.content.attrs,dir:state.context.dir,id:dom.getContentId(state.context),role:!composite?"dialog":"listbox",tabIndex:-1,hidden:!open,"data-state":open?"open":"closed","aria-labelledby":dom.getLabelId(state.context),"aria-multiselectable":state.context.multiple&&composite?true:void 0,onPointerDown(event){event.preventDefault()}}),listProps:normalize.element({role:!composite?"listbox":void 0,"aria-labelledby":dom.getLabelId(state.context),"aria-multiselectable":state.context.multiple&&!composite?true:void 0}),clearTriggerProps:normalize.button({...parts.clearTrigger.attrs,dir:state.context.dir,id:dom.getClearTriggerId(state.context),type:"button",tabIndex:-1,disabled,"aria-label":translations.clearTriggerLabel,"aria-controls":dom.getInputId(state.context),hidden:!state.context.value.length,onPointerDown(event){event.preventDefault()},onClick(event){if(event.defaultPrevented)return;if(!interactive)return;send({type:"VALUE.CLEAR",src:"clear-trigger"})}}),getItemState,getItemProps(props){const itemState=getItemState(props);const value=itemState.value;return normalize.element({...parts.item.attrs,dir:state.context.dir,id:dom.getItemId(state.context,value),role:"option",tabIndex:-1,"data-highlighted":(0,import_dom_query2.dataAttr)(itemState.highlighted),"data-state":itemState.selected?"checked":"unchecked","aria-selected":itemState.highlighted,"aria-disabled":itemState.disabled,"data-disabled":(0,import_dom_query2.dataAttr)(itemState.disabled),"data-value":itemState.value,onPointerMove(){if(itemState.disabled)return;if(itemState.highlighted)return;send({type:"ITEM.POINTER_MOVE",value})},onPointerLeave(){if(props.persistFocus)return;if(itemState.disabled)return;const mouseMoved=state.previousEvent.type.includes("POINTER");if(!mouseMoved)return;send({type:"ITEM.POINTER_LEAVE",value})},onPointerUp(event){if((0,import_dom_query2.isDownloadingEvent)(event))return;if((0,import_dom_query2.isOpeningInNewTab)(event))return;if((0,import_dom_event.isContextMenuEvent)(event))return;if(itemState.disabled)return;send({type:"ITEM.CLICK",src:"pointerup",value})},onTouchEnd(event){event.preventDefault();event.stopPropagation()}})},getItemTextProps(props){const itemState=getItemState(props);return normalize.element({...parts.itemText.attrs,dir:state.context.dir,"data-disabled":(0,import_dom_query2.dataAttr)(itemState.disabled),"data-highlighted":(0,import_dom_query2.dataAttr)(itemState.highlighted)})},getItemIndicatorProps(props){const itemState=getItemState(props);return normalize.element({"aria-hidden":true,...parts.itemIndicator.attrs,dir:state.context.dir,"data-state":itemState.selected?"checked":"unchecked",hidden:!itemState.selected})},getItemGroupProps(props){const{id}=props;return normalize.element({...parts.itemGroup.attrs,dir:state.context.dir,id:dom.getItemGroupId(state.context,id),"aria-labelledby":dom.getItemGroupLabelId(state.context,id)})},getItemGroupLabelProps(props){const{htmlFor}=props;return normalize.element({...parts.itemGroupLabel.attrs,dir:state.context.dir,id:dom.getItemGroupLabelId(state.context,htmlFor),role:"group"})}}}var import_aria_hidden=require("@zag-js/aria-hidden");var import_core2=require("@zag-js/core");var import_dismissable=require("@zag-js/dismissable");var import_dom_query3=require("@zag-js/dom-query");var import_popper2=require("@zag-js/popper");var import_utils=require("@zag-js/utils");var{and,not}=import_core2.guards;function machine(userContext){const ctx=(0,import_utils.compact)(userContext);return(0,import_core2.createMachine)({id:"combobox",initial:ctx.open?"suggesting":"idle",context:{loopFocus:true,openOnClick:false,value:[],highlightedValue:null,inputValue:"",allowCustomValue:false,closeOnSelect:!ctx.multiple,inputBehavior:"none",selectionBehavior:"replace",openOnKeyPress:true,openOnChange:true,composite:true,...ctx,highlightedItem:null,selectedItems:[],valueAsString:"",collection:ctx.collection??collection.empty(),positioning:{placement:"bottom",flip:false,sameWidth:true,...ctx.positioning},translations:{triggerLabel:"Toggle suggestions",clearTriggerLabel:"Clear value",...ctx.translations}},created:["syncInitialValues","syncSelectionBehavior"],computed:{isInputValueEmpty:ctx2=>ctx2.inputValue.length===0,isInteractive:ctx2=>!(ctx2.readOnly||ctx2.disabled),autoComplete:ctx2=>ctx2.inputBehavior==="autocomplete",autoHighlight:ctx2=>ctx2.inputBehavior==="autohighlight",hasSelectedItems:ctx2=>ctx2.value.length>0},watch:{value:["syncSelectedItems"],inputValue:["syncInputValue"],highlightedValue:["syncHighlightedItem","autofillInputValue"],multiple:["syncSelectionBehavior"],open:["toggleVisibility"]},on:{"HIGHLIGHTED_VALUE.SET":{actions:["setHighlightedItem"]},"ITEM.SELECT":{actions:["selectItem"]},"ITEM.CLEAR":{actions:["clearItem"]},"VALUE.SET":{actions:["setSelectedItems"]},"INPUT_VALUE.SET":{actions:"setInputValue"},"COLLECTION.SET":{actions:["setCollection"]},"POSITIONING.SET":{actions:["reposition"]}},states:{idle:{tags:["idle","closed"],entry:["scrollContentToTop","clearHighlightedItem"],on:{"CONTROLLED.OPEN":{target:"interacting"},"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:["setInitialFocus","highlightFirstSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["setInitialFocus","highlightFirstSelectedItem","invokeOnOpen"]}],"INPUT.CLICK":[{guard:"isOpenControlled",actions:["highlightFirstSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["highlightFirstSelectedItem","invokeOnOpen"]}],"INPUT.FOCUS":{target:"focused"},OPEN:[{guard:"isOpenControlled",actions:["invokeOnOpen"]},{target:"interacting",actions:["invokeOnOpen"]}],"VALUE.CLEAR":{target:"focused",actions:["clearInputValue","clearSelectedItems","setInitialFocus"]}}},focused:{tags:["focused","closed"],entry:["scrollContentToTop","clearHighlightedItem"],on:{"CONTROLLED.OPEN":[{guard:"isChangeEvent",target:"suggesting"},{target:"interacting"}],"INPUT.CHANGE":[{guard:and("isOpenControlled","openOnChange"),actions:["setInputValue","invokeOnOpen","highlightFirstItemIfNeeded"]},{guard:"openOnChange",target:"suggesting",actions:["setInputValue","invokeOnOpen","highlightFirstItemIfNeeded"]},{actions:"setInputValue"}],"LAYER.INTERACT_OUTSIDE":{target:"idle"},"INPUT.ESCAPE":{guard:and("isCustomValue",not("allowCustomValue")),actions:"revertInputValue"},"INPUT.BLUR":{target:"idle"},"INPUT.CLICK":[{guard:"isOpenControlled",actions:["highlightFirstSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["highlightFirstSelectedItem","invokeOnOpen"]}],"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:["setInitialFocus","highlightFirstSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["setInitialFocus","highlightFirstSelectedItem","invokeOnOpen"]}],"INPUT.ARROW_DOWN":[{guard:and("isOpenControlled","autoComplete"),actions:["invokeOnOpen"]},{guard:"autoComplete",target:"interacting",actions:["invokeOnOpen"]},{guard:"isOpenControlled",actions:["highlightFirstOrSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["highlightFirstOrSelectedItem","invokeOnOpen"]}],"INPUT.ARROW_UP":[{guard:"autoComplete",target:"interacting",actions:"invokeOnOpen"},{guard:"autoComplete",target:"interacting",actions:"invokeOnOpen"},{target:"interacting",actions:["highlightLastOrSelectedItem","invokeOnOpen"]},{target:"interacting",actions:["highlightLastOrSelectedItem","invokeOnOpen"]}],OPEN:[{guard:"isOpenControlled",actions:["invokeOnOpen"]},{target:"interacting",actions:["invokeOnOpen"]}],"VALUE.CLEAR":{actions:["clearInputValue","clearSelectedItems"]}}},interacting:{tags:["open","focused"],entry:["setInitialFocus"],activities:["scrollToHighlightedItem","trackDismissableLayer","computePlacement","hideOtherElements"],on:{"CONTROLLED.CLOSE":[{guard:"restoreFocus",target:"focused",actions:["setFinalFocus"]},{target:"idle"}],"INPUT.HOME":{actions:["highlightFirstItem"]},"INPUT.END":{actions:["highlightLastItem"]},"INPUT.ARROW_DOWN":[{guard:and("autoComplete","isLastItemHighlighted"),actions:["clearHighlightedItem","scrollContentToTop"]},{actions:["highlightNextItem"]}],"INPUT.ARROW_UP":[{guard:and("autoComplete","isFirstItemHighlighted"),actions:"clearHighlightedItem"},{actions:"highlightPrevItem"}],"INPUT.ENTER":[{guard:and("isOpenControlled","closeOnSelect"),actions:["selectHighlightedItem","invokeOnClose"]},{guard:"closeOnSelect",target:"focused",actions:["selectHighlightedItem","invokeOnClose","setFinalFocus"]},{actions:["selectHighlightedItem"]}],"INPUT.CHANGE":[{guard:"autoComplete",target:"suggesting",actions:["setInputValue","invokeOnOpen"]},{target:"suggesting",actions:["clearHighlightedItem","setInputValue","invokeOnOpen"]}],"ITEM.POINTER_MOVE":{actions:["setHighlightedItem"]},"ITEM.POINTER_LEAVE":{actions:["clearHighlightedItem"]},"ITEM.CLICK":[{guard:and("isOpenControlled","closeOnSelect"),actions:["selectItem","invokeOnClose"]},{guard:"closeOnSelect",target:"focused",actions:["selectItem","invokeOnClose","setFinalFocus"]},{actions:["selectItem"]}],"LAYER.ESCAPE":[{guard:and("isOpenControlled","autoComplete"),actions:["syncInputValue","invokeOnClose"]},{guard:"autoComplete",target:"focused",actions:["syncInputValue","invokeOnClose"]},{guard:"isOpenControlled",actions:"invokeOnClose"},{target:"focused",actions:["invokeOnClose","setFinalFocus"]}],"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:"invokeOnClose"},{target:"focused",actions:"invokeOnClose"}],"LAYER.INTERACT_OUTSIDE":[{guard:and("isOpenControlled","isCustomValue",not("allowCustomValue")),actions:["revertInputValue","invokeOnClose"]},{guard:and("isCustomValue",not("allowCustomValue")),target:"idle",actions:["revertInputValue","invokeOnClose"]},{guard:"isOpenControlled",actions:"invokeOnClose"},{target:"idle",actions:"invokeOnClose"}],CLOSE:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"focused",actions:["invokeOnClose","setFinalFocus"]}],"VALUE.CLEAR":[{guard:"isOpenControlled",actions:["clearInputValue","clearSelectedItems","invokeOnClose"]},{target:"focused",actions:["clearInputValue","clearSelectedItems","invokeOnClose","setFinalFocus"]}]}},suggesting:{tags:["open","focused"],activities:["trackDismissableLayer","scrollToHighlightedItem","computePlacement","trackChildNodes","hideOtherElements"],entry:["setInitialFocus"],on:{"CONTROLLED.CLOSE":[{guard:"restoreFocus",target:"focused",actions:["setFinalFocus"]},{target:"idle"}],CHILDREN_CHANGE:{actions:["highlightFirstItem"]},"INPUT.ARROW_DOWN":{target:"interacting",actions:["highlightNextItem"]},"INPUT.ARROW_UP":{target:"interacting",actions:["highlightPrevItem"]},"INPUT.HOME":{target:"interacting",actions:["highlightFirstItem"]},"INPUT.END":{target:"interacting",actions:["highlightLastItem"]},"INPUT.ENTER":[{guard:and("isOpenControlled","closeOnSelect"),actions:["selectHighlightedItem","invokeOnClose"]},{guard:"closeOnSelect",target:"focused",actions:["selectHighlightedItem","invokeOnClose","setFinalFocus"]},{actions:["selectHighlightedItem"]}],"INPUT.CHANGE":[{guard:"autoHighlight",actions:["setInputValue"]},{actions:["setInputValue"]}],"LAYER.ESCAPE":[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"focused",actions:["invokeOnClose"]}],"ITEM.POINTER_MOVE":{target:"interacting",actions:["setHighlightedItem"]},"ITEM.POINTER_LEAVE":{actions:["clearHighlightedItem"]},"LAYER.INTERACT_OUTSIDE":[{guard:and("isOpenControlled","isCustomValue",not("allowCustomValue")),actions:["revertInputValue","invokeOnClose"]},{guard:and("isCustomValue",not("allowCustomValue")),target:"idle",actions:["revertInputValue","invokeOnClose"]},{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"idle",actions:["invokeOnClose"]}],"TRIGGER.CLICK":[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"focused",actions:["invokeOnClose"]}],"ITEM.CLICK":[{guard:and("isOpenControlled","closeOnSelect"),actions:["selectItem","invokeOnClose"]},{guard:"closeOnSelect",target:"focused",actions:["selectItem","invokeOnClose","setFinalFocus"]},{actions:["selectItem"]}],CLOSE:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"focused",actions:["invokeOnClose","setFinalFocus"]}],"VALUE.CLEAR":[{guard:"isOpenControlled",actions:["clearInputValue","clearSelectedItems","invokeOnClose"]},{target:"focused",actions:["clearInputValue","clearSelectedItems","invokeOnClose","setFinalFocus"]}]}}}},{guards:{isInputValueEmpty:ctx2=>ctx2.isInputValueEmpty,autoComplete:ctx2=>ctx2.autoComplete&&!ctx2.multiple,autoHighlight:ctx2=>ctx2.autoHighlight,isFirstItemHighlighted:ctx2=>ctx2.collection.first()===ctx2.highlightedValue,isLastItemHighlighted:ctx2=>ctx2.collection.last()===ctx2.highlightedValue,isCustomValue:ctx2=>ctx2.inputValue!==ctx2.valueAsString,allowCustomValue:ctx2=>!!ctx2.allowCustomValue,hasHighlightedItem:ctx2=>ctx2.highlightedValue!=null,closeOnSelect:ctx2=>!!ctx2.closeOnSelect,isOpenControlled:ctx2=>!!ctx2["open.controlled"],openOnChange:(ctx2,evt)=>{if((0,import_utils.isBoolean)(ctx2.openOnChange))return ctx2.openOnChange;return!!ctx2.openOnChange?.({inputValue:evt.value})},restoreFocus:(_ctx,evt)=>evt.restoreFocus==null?true:!!evt.restoreFocus,isChangeEvent:(_ctx,evt)=>evt.previousEvent?.type==="INPUT.CHANGE"},activities:{trackDismissableLayer(ctx2,_evt,{send}){if(ctx2.disableLayer)return;const contentEl=()=>dom.getContentEl(ctx2);return(0,import_dismissable.trackDismissableElement)(contentEl,{defer:true,exclude:()=>[dom.getInputEl(ctx2),dom.getTriggerEl(ctx2),dom.getClearTriggerEl(ctx2)],onFocusOutside:ctx2.onFocusOutside,onPointerDownOutside:ctx2.onPointerDownOutside,onInteractOutside:ctx2.onInteractOutside,onEscapeKeyDown(event){event.preventDefault();event.stopPropagation();send("LAYER.ESCAPE")},onDismiss(){send({type:"LAYER.INTERACT_OUTSIDE",restoreFocus:false})}})},hideOtherElements(ctx2){return(0,import_aria_hidden.ariaHidden)([dom.getInputEl(ctx2),dom.getContentEl(ctx2),dom.getTriggerEl(ctx2)])},computePlacement(ctx2){const controlEl=()=>dom.getControlEl(ctx2);const positionerEl=()=>dom.getPositionerEl(ctx2);ctx2.currentPlacement=ctx2.positioning.placement;return(0,import_popper2.getPlacement)(controlEl,positionerEl,{...ctx2.positioning,defer:true,onComplete(data){ctx2.currentPlacement=data.placement}})},trackChildNodes(ctx2,_evt,{send}){if(!ctx2.autoHighlight)return;const exec=()=>send("CHILDREN_CHANGE");const contentEl=()=>dom.getContentEl(ctx2);return(0,import_dom_query3.observeChildren)(contentEl,{callback:exec,defer:true})},scrollToHighlightedItem(ctx2,_evt,{getState}){const inputEl=dom.getInputEl(ctx2);let cleanups=[];const exec=immediate=>{const state=getState();const pointer=state.event.type.includes("POINTER");if(pointer||!ctx2.highlightedValue)return;const itemEl=dom.getHighlightedItemEl(ctx2);const contentEl=dom.getContentEl(ctx2);if(ctx2.scrollToIndexFn){const highlightedIndex=ctx2.collection.indexOf(ctx2.highlightedValue);ctx2.scrollToIndexFn({index:highlightedIndex,immediate});return}const rafCleanup2=(0,import_dom_query3.raf)(()=>{(0,import_dom_query3.scrollIntoView)(itemEl,{rootEl:contentEl,block:"nearest"})});cleanups.push(rafCleanup2)};const rafCleanup=(0,import_dom_query3.raf)(()=>exec(true));cleanups.push(rafCleanup);const observerCleanup=(0,import_dom_query3.observeAttributes)(inputEl,{attributes:["aria-activedescendant"],callback:()=>exec(false)});cleanups.push(observerCleanup);return()=>{cleanups.forEach(cleanup=>cleanup())}}},actions:{reposition(ctx2,evt){const controlEl=()=>dom.getControlEl(ctx2);const positionerEl=()=>dom.getPositionerEl(ctx2);(0,import_popper2.getPlacement)(controlEl,positionerEl,{...ctx2.positioning,...evt.options,defer:true,listeners:false,onComplete(data){ctx2.currentPlacement=data.placement}})},setHighlightedItem(ctx2,evt){if(evt.value==null)return;set.highlightedValue(ctx2,evt.value)},clearHighlightedItem(ctx2){set.highlightedValue(ctx2,null,true)},selectHighlightedItem(ctx2){set.value(ctx2,ctx2.highlightedValue)},selectItem(ctx2,evt){if(evt.value==null)return;set.value(ctx2,evt.value)},clearItem(ctx2,evt){if(evt.value==null)return;const value=ctx2.value.filter(v=>v!==evt.value);set.value(ctx2,value)},setInitialFocus(ctx2){(0,import_dom_query3.raf)(()=>{dom.focusInputEl(ctx2)})},setFinalFocus(ctx2){(0,import_dom_query3.raf)(()=>{const triggerEl=dom.getTriggerEl(ctx2);if(triggerEl?.dataset.focusable==null){dom.focusInputEl(ctx2)}else{dom.focusTriggerEl(ctx2)}})},syncInputValue(ctx2){const inputEl=dom.getInputEl(ctx2);if(!inputEl)return;inputEl.value=ctx2.inputValue;queueMicrotask(()=>{const{selectionStart,selectionEnd}=inputEl;if(Math.abs((selectionEnd??0)-(selectionStart??0))!==0)return;if(selectionStart!==0)return;inputEl.setSelectionRange(inputEl.value.length,inputEl.value.length)})},setInputValue(ctx2,evt){set.inputValue(ctx2,evt.value)},clearInputValue(ctx2){set.inputValue(ctx2,"")},revertInputValue(ctx2){const inputValue=(0,import_utils.match)(ctx2.selectionBehavior,{replace:ctx2.hasSelectedItems?ctx2.valueAsString:"",preserve:ctx2.inputValue,clear:""});set.inputValue(ctx2,inputValue)},syncInitialValues(ctx2){const selectedItems=ctx2.collection.items(ctx2.value);const valueAsString=ctx2.collection.itemsToString(selectedItems);ctx2.highlightedItem=ctx2.collection.item(ctx2.highlightedValue);ctx2.selectedItems=selectedItems;ctx2.valueAsString=valueAsString;ctx2.inputValue=(0,import_utils.match)(ctx2.selectionBehavior,{preserve:ctx2.inputValue||valueAsString,replace:valueAsString,clear:""})},syncSelectionBehavior(ctx2){if(ctx2.multiple){ctx2.selectionBehavior="clear"}},setSelectedItems(ctx2,evt){if(!(0,import_utils.isArray)(evt.value))return;set.value(ctx2,evt.value)},clearSelectedItems(ctx2){set.value(ctx2,[])},scrollContentToTop(ctx2){if(ctx2.scrollToIndexFn){ctx2.scrollToIndexFn({index:0,immediate:true})}else{const contentEl=dom.getContentEl(ctx2);if(!contentEl)return;contentEl.scrollTop=0}},invokeOnOpen(ctx2){ctx2.onOpenChange?.({open:true})},invokeOnClose(ctx2){ctx2.onOpenChange?.({open:false})},highlightFirstItem(ctx2){(0,import_dom_query3.raf)(()=>{const value=ctx2.collection.first();set.highlightedValue(ctx2,value)})},highlightFirstItemIfNeeded(ctx2){if(!ctx2.autoHighlight)return;(0,import_dom_query3.raf)(()=>{const value=ctx2.collection.first();set.highlightedValue(ctx2,value)})},highlightLastItem(ctx2){(0,import_dom_query3.raf)(()=>{const value=ctx2.collection.last();set.highlightedValue(ctx2,value)})},highlightNextItem(ctx2){let value=null;if(ctx2.highlightedValue){value=ctx2.collection.next(ctx2.highlightedValue);if(!value&&ctx2.loopFocus)value=ctx2.collection.first()}else{value=ctx2.collection.first()}set.highlightedValue(ctx2,value)},highlightPrevItem(ctx2){let value=null;if(ctx2.highlightedValue){value=ctx2.collection.prev(ctx2.highlightedValue);if(!value&&ctx2.loopFocus)value=ctx2.collection.last()}else{value=ctx2.collection.last()}set.highlightedValue(ctx2,value)},highlightFirstSelectedItem(ctx2){(0,import_dom_query3.raf)(()=>{const[value]=ctx2.collection.sort(ctx2.value);set.highlightedValue(ctx2,value)})},highlightFirstOrSelectedItem(ctx2){(0,import_dom_query3.raf)(()=>{let value=null;if(ctx2.hasSelectedItems){value=ctx2.collection.sort(ctx2.value)[0]}else{value=ctx2.collection.first()}set.highlightedValue(ctx2,value)})},highlightLastOrSelectedItem(ctx2){(0,import_dom_query3.raf)(()=>{let value=null;if(ctx2.hasSelectedItems){value=ctx2.collection.sort(ctx2.value)[0]}else{value=ctx2.collection.last()}set.highlightedValue(ctx2,value)})},autofillInputValue(ctx2,evt){const inputEl=dom.getInputEl(ctx2);if(!ctx2.autoComplete||!inputEl||!evt.keypress)return;const valueText=ctx2.collection.valueToString(ctx2.highlightedValue);(0,import_dom_query3.raf)(()=>{inputEl.value=valueText||ctx2.inputValue})},setCollection(ctx2,evt){ctx2.collection=evt.value},syncSelectedItems(ctx2){sync.valueChange(ctx2)},syncHighlightedItem(ctx2){sync.highlightChange(ctx2)},toggleVisibility(ctx2,evt,{send}){send({type:ctx2.open?"CONTROLLED.OPEN":"CONTROLLED.CLOSE",previousEvent:evt})}}})}var sync={valueChange:ctx=>{const prevSelectedItems=ctx.selectedItems;ctx.selectedItems=ctx.value.map(v=>{const foundItem=prevSelectedItems.find(item=>ctx.collection.itemToValue(item)===v);if(foundItem)return foundItem;return ctx.collection.item(v)});const valueAsString=ctx.collection.itemsToString(ctx.selectedItems);ctx.valueAsString=valueAsString;let inputValue;if(ctx.getSelectionValue){inputValue=ctx.getSelectionValue({inputValue:ctx.inputValue,selectedItems:Array.from(ctx.selectedItems),valueAsString})}else{inputValue=(0,import_utils.match)(ctx.selectionBehavior,{replace:ctx.valueAsString,preserve:ctx.inputValue,clear:""})}set.inputValue(ctx,inputValue)},highlightChange:ctx=>{ctx.highlightedItem=ctx.collection.item(ctx.highlightedValue)}};var invoke={valueChange:ctx=>{sync.valueChange(ctx);ctx.onValueChange?.({value:Array.from(ctx.value),items:Array.from(ctx.selectedItems)})},highlightChange:ctx=>{sync.highlightChange(ctx);ctx.onHighlightChange?.({highlightedValue:ctx.highlightedValue,highlightedItem:ctx.highlightedItem})},inputChange:ctx=>{ctx.onInputValueChange?.({inputValue:ctx.inputValue})}};var set={value:(ctx,value,force=false)=>{if((0,import_utils.isEqual)(ctx.value,value))return;if(value==null&&!force)return;if(value==null&&force){ctx.value=[];invoke.valueChange(ctx);return}if((0,import_utils.isArray)(value)){ctx.value=value}else if(value!=null){ctx.value=ctx.multiple?(0,import_utils.addOrRemove)(ctx.value,value):[value]}invoke.valueChange(ctx)},highlightedValue:(ctx,value,force=false)=>{if((0,import_utils.isEqual)(ctx.highlightedValue,value))return;if(!value&&!force)return;ctx.highlightedValue=value||null;invoke.highlightChange(ctx)},inputValue:(ctx,value)=>{if((0,import_utils.isEqual)(ctx.inputValue,value))return;ctx.inputValue=value;invoke.inputChange(ctx)}};0&&(module.exports={anatomy,collection,connect,machine});
1450
2
  //# sourceMappingURL=index.js.map