@zag-js/combobox 1.35.2 → 1.35.3

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.
Files changed (7) hide show
  1. package/dist/combobox.connect.js +1 -1
  2. package/dist/combobox.connect.mjs +1 -1
  3. package/dist/combobox.machine.js +332 -405
  4. package/dist/combobox.machine.mjs +336 -405
  5. package/dist/combobox.types.d.mts +3 -2
  6. package/dist/combobox.types.d.ts +3 -2
  7. package/package.json +11 -11
package/dist/combobox.machine.js CHANGED
@@ -38,6 +38,7 @@ var import_dismissable = require("@zag-js/dismissable");
38
38
  var import_dom_query = require("@zag-js/dom-query");
39
39
  var import_focus_visible = require("@zag-js/focus-visible");
40
40
  var import_popper = require("@zag-js/popper");
41
+ var import_collection = require("@zag-js/collection");
41
42
  var import_utils = require("@zag-js/utils");
42
43
  var import_combobox = require("./combobox.collection.js");
43
44
  var dom = __toESM(require("./combobox.dom.js"));
@@ -77,9 +78,11 @@ var machine = createMachine({
77
78
  },
78
79
  initialState({ prop }) {
79
80
  const open = prop("open") || prop("defaultOpen");
80
- return open ? "suggesting" : "idle";
81
+ return open ? "open.suggesting" : "closed.idle";
81
82
  },
82
83
  context({ prop, bindable, getContext, getEvent }) {
84
+ const initialValue = prop("value") ?? prop("defaultValue") ?? [];
85
+ const initialSelectedItems = prop("collection").findMany(initialValue);
83
86
  return {
84
87
  currentPlacement: bindable(() => ({
85
88
  defaultValue: void 0
@@ -93,13 +96,21 @@ var machine = createMachine({
93
96
  },
94
97
  onChange(value) {
95
98
  const context = getContext();
96
- const prevSelectedItems = context.get("selectedItems");
97
99
  const collection2 = prop("collection");
98
- const findItems = (vals) => vals.map((v) => prevSelectedItems.find((item) => collection2.getItemValue(item) === v) || collection2.find(v));
99
- const nextItems = findItems(value);
100
- const effectiveValue = prop("value") || value;
101
- context.set("selectedItems", findItems(effectiveValue));
102
- prop("onValueChange")?.({ value, items: nextItems });
100
+ const selectedItemMap = context.get("selectedItemMap");
101
+ const proposed = (0, import_collection.deriveSelectionState)({
102
+ values: value,
103
+ collection: collection2,
104
+ selectedItemMap
105
+ });
106
+ const effectiveValue = prop("value") ?? value;
107
+ const effective = effectiveValue === value ? proposed : (0, import_collection.deriveSelectionState)({
108
+ values: effectiveValue,
109
+ collection: collection2,
110
+ selectedItemMap: proposed.nextSelectedItemMap
111
+ });
112
+ context.set("selectedItemMap", effective.nextSelectedItemMap);
113
+ prop("onValueChange")?.({ value, items: proposed.selectedItems });
103
114
  }
104
115
  })),
105
116
  highlightedValue: bindable(() => ({
@@ -136,10 +147,13 @@ var machine = createMachine({
136
147
  const highlightedItem = prop("collection").find(highlightedValue);
137
148
  return { defaultValue: highlightedItem };
138
149
  }),
139
- selectedItems: bindable(() => {
140
- const value = prop("value") || prop("defaultValue") || [];
141
- const selectedItems = prop("collection").findMany(value);
142
- return { defaultValue: selectedItems };
150
+ selectedItemMap: bindable(() => {
151
+ return {
152
+ defaultValue: (0, import_collection.createSelectedItemMap)({
153
+ selectedItems: initialSelectedItems,
154
+ collection: prop("collection")
155
+ })
156
+ };
143
157
  })
144
158
  };
145
159
  },
@@ -149,7 +163,12 @@ var machine = createMachine({
149
163
  autoComplete: ({ prop }) => prop("inputBehavior") === "autocomplete",
150
164
  autoHighlight: ({ prop }) => prop("inputBehavior") === "autohighlight",
151
165
  hasSelectedItems: ({ context }) => context.get("value").length > 0,
152
- valueAsString: ({ context, prop }) => prop("collection").stringifyItems(context.get("selectedItems")),
166
+ selectedItems: ({ context, prop }) => (0, import_collection.resolveSelectedItems)({
167
+ values: context.get("value"),
168
+ collection: prop("collection"),
169
+ selectedItemMap: context.get("selectedItemMap")
170
+ }),
171
+ valueAsString: ({ computed, prop }) => prop("collection").stringifyItems(computed("selectedItems")),
153
172
  isCustomValue: ({ context, computed }) => context.get("inputValue") !== computed("valueAsString")
154
173
  },
155
174
  watch({ context, prop, track, action, send }) {
@@ -202,167 +221,173 @@ var machine = createMachine({
202
221
  }
203
222
  ]),
204
223
  states: {
205
- idle: {
206
- tags: ["idle", "closed"],
207
- entry: ["scrollContentToTop", "clearHighlightedValue"],
208
- on: {
209
- "CONTROLLED.OPEN": {
210
- target: "interacting"
211
- },
212
- "TRIGGER.CLICK": [
213
- {
214
- guard: "isOpenControlled",
215
- actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
216
- },
217
- {
218
- target: "interacting",
219
- actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
220
- }
221
- ],
222
- "INPUT.CLICK": [
223
- {
224
- guard: "isOpenControlled",
225
- actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
226
- },
227
- {
228
- target: "interacting",
229
- actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
224
+ closed: {
225
+ tags: ["closed"],
226
+ initial: "idle",
227
+ states: {
228
+ idle: {
229
+ tags: ["idle"],
230
+ entry: ["scrollContentToTop", "clearHighlightedValue"],
231
+ on: {
232
+ "CONTROLLED.OPEN": {
233
+ target: "open.interacting"
234
+ },
235
+ "TRIGGER.CLICK": [
236
+ {
237
+ guard: "isOpenControlled",
238
+ actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
239
+ },
240
+ {
241
+ target: "open.interacting",
242
+ actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
243
+ }
244
+ ],
245
+ "INPUT.CLICK": [
246
+ {
247
+ guard: "isOpenControlled",
248
+ actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
249
+ },
250
+ {
251
+ target: "open.interacting",
252
+ actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
253
+ }
254
+ ],
255
+ "INPUT.FOCUS": {
256
+ target: "focused"
257
+ },
258
+ OPEN: [
259
+ {
260
+ guard: "isOpenControlled",
261
+ actions: ["invokeOnOpen"]
262
+ },
263
+ {
264
+ target: "open.interacting",
265
+ actions: ["invokeOnOpen"]
266
+ }
267
+ ],
268
+ "VALUE.CLEAR": {
269
+ target: "focused",
270
+ actions: ["clearInputValue", "clearSelectedItems", "setInitialFocus"]
271
+ }
230
272
  }
231
- ],
232
- "INPUT.FOCUS": {
233
- target: "focused"
234
273
  },
235
- OPEN: [
236
- {
237
- guard: "isOpenControlled",
238
- actions: ["invokeOnOpen"]
239
- },
240
- {
241
- target: "interacting",
242
- actions: ["invokeOnOpen"]
274
+ focused: {
275
+ tags: ["focused"],
276
+ entry: ["scrollContentToTop", "clearHighlightedValue"],
277
+ on: {
278
+ "CONTROLLED.OPEN": [
279
+ {
280
+ guard: "isChangeEvent",
281
+ target: "open.suggesting"
282
+ },
283
+ {
284
+ target: "open.interacting"
285
+ }
286
+ ],
287
+ "INPUT.CHANGE": [
288
+ {
289
+ guard: and("isOpenControlled", "openOnChange"),
290
+ actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
291
+ },
292
+ {
293
+ guard: "openOnChange",
294
+ target: "open.suggesting",
295
+ actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
296
+ },
297
+ {
298
+ actions: ["setInputValue"]
299
+ }
300
+ ],
301
+ "LAYER.INTERACT_OUTSIDE": {
302
+ target: "idle"
303
+ },
304
+ "INPUT.ESCAPE": {
305
+ guard: and("isCustomValue", not("allowCustomValue")),
306
+ actions: ["revertInputValue"]
307
+ },
308
+ "INPUT.BLUR": {
309
+ target: "idle"
310
+ },
311
+ "INPUT.CLICK": [
312
+ {
313
+ guard: "isOpenControlled",
314
+ actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
315
+ },
316
+ {
317
+ target: "open.interacting",
318
+ actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
319
+ }
320
+ ],
321
+ "TRIGGER.CLICK": [
322
+ {
323
+ guard: "isOpenControlled",
324
+ actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
325
+ },
326
+ {
327
+ target: "open.interacting",
328
+ actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
329
+ }
330
+ ],
331
+ "INPUT.ARROW_DOWN": [
332
+ // == group 1 ==
333
+ {
334
+ guard: and("isOpenControlled", "autoComplete"),
335
+ actions: ["invokeOnOpen"]
336
+ },
337
+ {
338
+ guard: "autoComplete",
339
+ target: "open.interacting",
340
+ actions: ["invokeOnOpen"]
341
+ },
342
+ // == group 2 ==
343
+ {
344
+ guard: "isOpenControlled",
345
+ actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
346
+ },
347
+ {
348
+ target: "open.interacting",
349
+ actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
350
+ }
351
+ ],
352
+ "INPUT.ARROW_UP": [
353
+ // == group 1 ==
354
+ {
355
+ guard: and("isOpenControlled", "autoComplete"),
356
+ actions: ["invokeOnOpen"]
357
+ },
358
+ {
359
+ guard: "autoComplete",
360
+ target: "open.interacting",
361
+ actions: ["invokeOnOpen"]
362
+ },
363
+ // == group 2 ==
364
+ {
365
+ guard: "isOpenControlled",
366
+ actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
367
+ },
368
+ {
369
+ target: "open.interacting",
370
+ actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
371
+ }
372
+ ],
373
+ OPEN: [
374
+ {
375
+ guard: "isOpenControlled",
376
+ actions: ["invokeOnOpen"]
377
+ },
378
+ {
379
+ target: "open.interacting",
380
+ actions: ["invokeOnOpen"]
381
+ }
382
+ ],
383
+ "VALUE.CLEAR": {
384
+ actions: ["clearInputValue", "clearSelectedItems"]
385
+ }
243
386
  }
244
- ],
245
- "VALUE.CLEAR": {
246
- target: "focused",
247
- actions: ["clearInputValue", "clearSelectedItems", "setInitialFocus"]
248
387
  }
249
388
  }
250
389
  },
251
- focused: {
252
- tags: ["focused", "closed"],
253
- entry: ["scrollContentToTop", "clearHighlightedValue"],
254
- on: {
255
- "CONTROLLED.OPEN": [
256
- {
257
- guard: "isChangeEvent",
258
- target: "suggesting"
259
- },
260
- {
261
- target: "interacting"
262
- }
263
- ],
264
- "INPUT.CHANGE": [
265
- {
266
- guard: and("isOpenControlled", "openOnChange"),
267
- actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
268
- },
269
- {
270
- guard: "openOnChange",
271
- target: "suggesting",
272
- actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
273
- },
274
- {
275
- actions: ["setInputValue"]
276
- }
277
- ],
278
- "LAYER.INTERACT_OUTSIDE": {
279
- target: "idle"
280
- },
281
- "INPUT.ESCAPE": {
282
- guard: and("isCustomValue", not("allowCustomValue")),
283
- actions: ["revertInputValue"]
284
- },
285
- "INPUT.BLUR": {
286
- target: "idle"
287
- },
288
- "INPUT.CLICK": [
289
- {
290
- guard: "isOpenControlled",
291
- actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
292
- },
293
- {
294
- target: "interacting",
295
- actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
296
- }
297
- ],
298
- "TRIGGER.CLICK": [
299
- {
300
- guard: "isOpenControlled",
301
- actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
302
- },
303
- {
304
- target: "interacting",
305
- actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
306
- }
307
- ],
308
- "INPUT.ARROW_DOWN": [
309
- // == group 1 ==
310
- {
311
- guard: and("isOpenControlled", "autoComplete"),
312
- actions: ["invokeOnOpen"]
313
- },
314
- {
315
- guard: "autoComplete",
316
- target: "interacting",
317
- actions: ["invokeOnOpen"]
318
- },
319
- // == group 2 ==
320
- {
321
- guard: "isOpenControlled",
322
- actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
323
- },
324
- {
325
- target: "interacting",
326
- actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
327
- }
328
- ],
329
- "INPUT.ARROW_UP": [
330
- // == group 1 ==
331
- {
332
- guard: and("isOpenControlled", "autoComplete"),
333
- actions: ["invokeOnOpen"]
334
- },
335
- {
336
- guard: "autoComplete",
337
- target: "interacting",
338
- actions: ["invokeOnOpen"]
339
- },
340
- // == group 2 ==
341
- {
342
- guard: "isOpenControlled",
343
- actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
344
- },
345
- {
346
- target: "interacting",
347
- actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
348
- }
349
- ],
350
- OPEN: [
351
- {
352
- guard: "isOpenControlled",
353
- actions: ["invokeOnOpen"]
354
- },
355
- {
356
- target: "interacting",
357
- actions: ["invokeOnOpen"]
358
- }
359
- ],
360
- "VALUE.CLEAR": {
361
- actions: ["clearInputValue", "clearSelectedItems"]
362
- }
363
- }
364
- },
365
- interacting: {
390
+ open: {
366
391
  tags: ["open", "focused"],
367
392
  entry: ["setInitialFocus"],
368
393
  effects: ["trackFocusVisible", "scrollToHighlightedItem", "trackDismissableLayer", "trackPlacement"],
@@ -370,44 +395,11 @@ var machine = createMachine({
370
395
  "CONTROLLED.CLOSE": [
371
396
  {
372
397
  guard: "restoreFocus",
373
- target: "focused",
398
+ target: "closed.focused",
374
399
  actions: ["setFinalFocus"]
375
400
  },
376
401
  {
377
- target: "idle"
378
- }
379
- ],
380
- CHILDREN_CHANGE: [
381
- {
382
- guard: "isHighlightedItemRemoved",
383
- actions: ["clearHighlightedValue"]
384
- },
385
- {
386
- actions: ["scrollToHighlightedItem"]
387
- }
388
- ],
389
- "INPUT.HOME": {
390
- actions: ["highlightFirstItem"]
391
- },
392
- "INPUT.END": {
393
- actions: ["highlightLastItem"]
394
- },
395
- "INPUT.ARROW_DOWN": [
396
- {
397
- guard: and("autoComplete", "isLastItemHighlighted"),
398
- actions: ["clearHighlightedValue", "scrollContentToTop"]
399
- },
400
- {
401
- actions: ["highlightNextItem"]
402
- }
403
- ],
404
- "INPUT.ARROW_UP": [
405
- {
406
- guard: and("autoComplete", "isFirstItemHighlighted"),
407
- actions: ["clearHighlightedValue"]
408
- },
409
- {
410
- actions: ["highlightPrevItem"]
402
+ target: "closed.idle"
411
403
  }
412
404
  ],
413
405
  "INPUT.ENTER": [
@@ -418,7 +410,7 @@ var machine = createMachine({
418
410
  },
419
411
  {
420
412
  guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
421
- target: "focused",
413
+ target: "closed.focused",
422
414
  actions: ["revertInputValue", "invokeOnClose"]
423
415
  },
424
416
  // == group 2 ==
@@ -428,30 +420,13 @@ var machine = createMachine({
428
420
  },
429
421
  {
430
422
  guard: "closeOnSelect",
431
- target: "focused",
423
+ target: "closed.focused",
432
424
  actions: ["selectHighlightedItem", "invokeOnClose", "setFinalFocus"]
433
425
  },
434
426
  {
435
427
  actions: ["selectHighlightedItem"]
436
428
  }
437
429
  ],
438
- "INPUT.CHANGE": [
439
- {
440
- guard: "autoComplete",
441
- target: "suggesting",
442
- actions: ["setInputValue"]
443
- },
444
- {
445
- target: "suggesting",
446
- actions: ["clearHighlightedValue", "setInputValue"]
447
- }
448
- ],
449
- "ITEM.POINTER_MOVE": {
450
- actions: ["setHighlightedValue"]
451
- },
452
- "ITEM.POINTER_LEAVE": {
453
- actions: ["clearHighlightedValue"]
454
- },
455
430
  "ITEM.CLICK": [
456
431
  {
457
432
  guard: and("isOpenControlled", "closeOnSelect"),
@@ -459,39 +434,20 @@ var machine = createMachine({
459
434
  },
460
435
  {
461
436
  guard: "closeOnSelect",
462
- target: "focused",
437
+ target: "closed.focused",
463
438
  actions: ["selectItem", "invokeOnClose", "setFinalFocus"]
464
439
  },
465
440
  {
466
441
  actions: ["selectItem"]
467
442
  }
468
443
  ],
469
- "LAYER.ESCAPE": [
470
- {
471
- guard: and("isOpenControlled", "autoComplete"),
472
- actions: ["syncInputValue", "invokeOnClose"]
473
- },
474
- {
475
- guard: "autoComplete",
476
- target: "focused",
477
- actions: ["syncInputValue", "invokeOnClose"]
478
- },
479
- {
480
- guard: "isOpenControlled",
481
- actions: ["invokeOnClose"]
482
- },
483
- {
484
- target: "focused",
485
- actions: ["invokeOnClose", "setFinalFocus"]
486
- }
487
- ],
488
444
  "TRIGGER.CLICK": [
489
445
  {
490
446
  guard: "isOpenControlled",
491
447
  actions: ["invokeOnClose"]
492
448
  },
493
449
  {
494
- target: "focused",
450
+ target: "closed.focused",
495
451
  actions: ["invokeOnClose"]
496
452
  }
497
453
  ],
@@ -503,7 +459,7 @@ var machine = createMachine({
503
459
  },
504
460
  {
505
461
  guard: and("isCustomValue", not("allowCustomValue")),
506
- target: "idle",
462
+ target: "closed.idle",
507
463
  actions: ["revertInputValue", "invokeOnClose"]
508
464
  },
509
465
  // == group 2 ==
@@ -512,7 +468,7 @@ var machine = createMachine({
512
468
  actions: ["invokeOnClose"]
513
469
  },
514
470
  {
515
- target: "idle",
471
+ target: "closed.idle",
516
472
  actions: ["invokeOnClose"]
517
473
  }
518
474
  ],
@@ -522,7 +478,7 @@ var machine = createMachine({
522
478
  actions: ["invokeOnClose"]
523
479
  },
524
480
  {
525
- target: "focused",
481
+ target: "closed.focused",
526
482
  actions: ["invokeOnClose", "setFinalFocus"]
527
483
  }
528
484
  ],
@@ -532,167 +488,140 @@ var machine = createMachine({
532
488
  actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
533
489
  },
534
490
  {
535
- target: "focused",
491
+ target: "closed.focused",
536
492
  actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose", "setFinalFocus"]
537
493
  }
538
494
  ]
539
- }
540
- },
541
- suggesting: {
542
- tags: ["open", "focused"],
543
- effects: ["trackFocusVisible", "trackDismissableLayer", "scrollToHighlightedItem", "trackPlacement"],
544
- entry: ["setInitialFocus"],
545
- on: {
546
- "CONTROLLED.CLOSE": [
547
- {
548
- guard: "restoreFocus",
549
- target: "focused",
550
- actions: ["setFinalFocus"]
551
- },
552
- {
553
- target: "idle"
554
- }
555
- ],
556
- CHILDREN_CHANGE: [
557
- {
558
- guard: and("isHighlightedItemRemoved", "hasCollectionItems", "autoHighlight"),
559
- actions: ["clearHighlightedValue", "highlightFirstItem"]
560
- },
561
- {
562
- guard: "isHighlightedItemRemoved",
563
- actions: ["clearHighlightedValue"]
564
- },
565
- {
566
- guard: "autoHighlight",
567
- actions: ["highlightFirstItem"]
568
- }
569
- ],
570
- "INPUT.ARROW_DOWN": {
571
- target: "interacting",
572
- actions: ["highlightNextItem"]
573
- },
574
- "INPUT.ARROW_UP": {
575
- target: "interacting",
576
- actions: ["highlightPrevItem"]
577
- },
578
- "INPUT.HOME": {
579
- target: "interacting",
580
- actions: ["highlightFirstItem"]
581
- },
582
- "INPUT.END": {
583
- target: "interacting",
584
- actions: ["highlightLastItem"]
585
- },
586
- "INPUT.ENTER": [
587
- // == group 1 ==
588
- {
589
- guard: and("isOpenControlled", "isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
590
- actions: ["revertInputValue", "invokeOnClose"]
591
- },
592
- {
593
- guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
594
- target: "focused",
595
- actions: ["revertInputValue", "invokeOnClose"]
596
- },
597
- // == group 2 ==
598
- {
599
- guard: and("isOpenControlled", "closeOnSelect"),
600
- actions: ["selectHighlightedItem", "invokeOnClose"]
601
- },
602
- {
603
- guard: "closeOnSelect",
604
- target: "focused",
605
- actions: ["selectHighlightedItem", "invokeOnClose", "setFinalFocus"]
606
- },
607
- {
608
- actions: ["selectHighlightedItem"]
495
+ },
496
+ initial: "interacting",
497
+ states: {
498
+ interacting: {
499
+ on: {
500
+ CHILDREN_CHANGE: [
501
+ {
502
+ guard: "isHighlightedItemRemoved",
503
+ actions: ["clearHighlightedValue"]
504
+ },
505
+ {
506
+ actions: ["scrollToHighlightedItem"]
507
+ }
508
+ ],
509
+ "INPUT.HOME": {
510
+ actions: ["highlightFirstItem"]
511
+ },
512
+ "INPUT.END": {
513
+ actions: ["highlightLastItem"]
514
+ },
515
+ "INPUT.ARROW_DOWN": [
516
+ {
517
+ guard: and("autoComplete", "isLastItemHighlighted"),
518
+ actions: ["clearHighlightedValue", "scrollContentToTop"]
519
+ },
520
+ {
521
+ actions: ["highlightNextItem"]
522
+ }
523
+ ],
524
+ "INPUT.ARROW_UP": [
525
+ {
526
+ guard: and("autoComplete", "isFirstItemHighlighted"),
527
+ actions: ["clearHighlightedValue"]
528
+ },
529
+ {
530
+ actions: ["highlightPrevItem"]
531
+ }
532
+ ],
533
+ "INPUT.CHANGE": [
534
+ {
535
+ guard: "autoComplete",
536
+ target: "suggesting",
537
+ actions: ["setInputValue"]
538
+ },
539
+ {
540
+ target: "suggesting",
541
+ actions: ["clearHighlightedValue", "setInputValue"]
542
+ }
543
+ ],
544
+ "ITEM.POINTER_MOVE": {
545
+ actions: ["setHighlightedValue"]
546
+ },
547
+ "ITEM.POINTER_LEAVE": {
548
+ actions: ["clearHighlightedValue"]
549
+ },
550
+ "LAYER.ESCAPE": [
551
+ {
552
+ guard: and("isOpenControlled", "autoComplete"),
553
+ actions: ["syncInputValue", "invokeOnClose"]
554
+ },
555
+ {
556
+ guard: "autoComplete",
557
+ target: "closed.focused",
558
+ actions: ["syncInputValue", "invokeOnClose"]
559
+ },
560
+ {
561
+ guard: "isOpenControlled",
562
+ actions: ["invokeOnClose"]
563
+ },
564
+ {
565
+ target: "closed.focused",
566
+ actions: ["invokeOnClose", "setFinalFocus"]
567
+ }
568
+ ]
609
569
  }
610
- ],
611
- "INPUT.CHANGE": {
612
- actions: ["setInputValue"]
613
570
  },
614
- "LAYER.ESCAPE": [
615
- {
616
- guard: "isOpenControlled",
617
- actions: ["invokeOnClose"]
618
- },
619
- {
620
- target: "focused",
621
- actions: ["invokeOnClose"]
571
+ suggesting: {
572
+ on: {
573
+ CHILDREN_CHANGE: [
574
+ {
575
+ guard: and("isHighlightedItemRemoved", "hasCollectionItems", "autoHighlight"),
576
+ actions: ["clearHighlightedValue", "highlightFirstItem"]
577
+ },
578
+ {
579
+ guard: "isHighlightedItemRemoved",
580
+ actions: ["clearHighlightedValue"]
581
+ },
582
+ {
583
+ guard: "autoHighlight",
584
+ actions: ["highlightFirstItem"]
585
+ }
586
+ ],
587
+ "INPUT.ARROW_DOWN": {
588
+ target: "interacting",
589
+ actions: ["highlightNextItem"]
590
+ },
591
+ "INPUT.ARROW_UP": {
592
+ target: "interacting",
593
+ actions: ["highlightPrevItem"]
594
+ },
595
+ "INPUT.HOME": {
596
+ target: "interacting",
597
+ actions: ["highlightFirstItem"]
598
+ },
599
+ "INPUT.END": {
600
+ target: "interacting",
601
+ actions: ["highlightLastItem"]
602
+ },
603
+ "INPUT.CHANGE": {
604
+ actions: ["setInputValue"]
605
+ },
606
+ "LAYER.ESCAPE": [
607
+ {
608
+ guard: "isOpenControlled",
609
+ actions: ["invokeOnClose"]
610
+ },
611
+ {
612
+ target: "closed.focused",
613
+ actions: ["invokeOnClose"]
614
+ }
615
+ ],
616
+ "ITEM.POINTER_MOVE": {
617
+ target: "interacting",
618
+ actions: ["setHighlightedValue"]
619
+ },
620
+ "ITEM.POINTER_LEAVE": {
621
+ actions: ["clearHighlightedValue"]
622
+ }
622
623
  }
623
- ],
624
- "ITEM.POINTER_MOVE": {
625
- target: "interacting",
626
- actions: ["setHighlightedValue"]
627
- },
628
- "ITEM.POINTER_LEAVE": {
629
- actions: ["clearHighlightedValue"]
630
- },
631
- "LAYER.INTERACT_OUTSIDE": [
632
- // == group 1 ==
633
- {
634
- guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
635
- actions: ["revertInputValue", "invokeOnClose"]
636
- },
637
- {
638
- guard: and("isCustomValue", not("allowCustomValue")),
639
- target: "idle",
640
- actions: ["revertInputValue", "invokeOnClose"]
641
- },
642
- // == group 2 ==
643
- {
644
- guard: "isOpenControlled",
645
- actions: ["invokeOnClose"]
646
- },
647
- {
648
- target: "idle",
649
- actions: ["invokeOnClose"]
650
- }
651
- ],
652
- "TRIGGER.CLICK": [
653
- {
654
- guard: "isOpenControlled",
655
- actions: ["invokeOnClose"]
656
- },
657
- {
658
- target: "focused",
659
- actions: ["invokeOnClose"]
660
- }
661
- ],
662
- "ITEM.CLICK": [
663
- {
664
- guard: and("isOpenControlled", "closeOnSelect"),
665
- actions: ["selectItem", "invokeOnClose"]
666
- },
667
- {
668
- guard: "closeOnSelect",
669
- target: "focused",
670
- actions: ["selectItem", "invokeOnClose", "setFinalFocus"]
671
- },
672
- {
673
- actions: ["selectItem"]
674
- }
675
- ],
676
- CLOSE: [
677
- {
678
- guard: "isOpenControlled",
679
- actions: ["invokeOnClose"]
680
- },
681
- {
682
- target: "focused",
683
- actions: ["invokeOnClose", "setFinalFocus"]
684
- }
685
- ],
686
- "VALUE.CLEAR": [
687
- {
688
- guard: "isOpenControlled",
689
- actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
690
- },
691
- {
692
- target: "focused",
693
- actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose", "setFinalFocus"]
694
- }
695
- ]
624
+ }
696
625
  }
697
626
  }
698
627
  },
@@ -1053,11 +982,9 @@ var machine = createMachine({
1053
982
  const { context, prop } = params;
1054
983
  const collection2 = prop("collection");
1055
984
  const value = context.get("value");
1056
- const selectedItems = value.map((v) => {
1057
- const item = context.get("selectedItems").find((item2) => collection2.getItemValue(item2) === v);
1058
- return item || collection2.find(v);
1059
- });
1060
- context.set("selectedItems", selectedItems);
985
+ const selectedItemMap = context.get("selectedItemMap");
986
+ const next = (0, import_collection.deriveSelectionState)({ values: value, collection: collection2, selectedItemMap });
987
+ context.set("selectedItemMap", next.nextSelectedItemMap);
1061
988
  const inputValue = (0, import_utils.match)(prop("selectionBehavior"), {
1062
989
  preserve: context.get("inputValue"),
1063
990
  replace: collection2.stringifyMany(value),