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