@zag-js/combobox 1.35.2 → 1.36.0

package/dist/combobox.machine.mjs

@@ -4,6 +4,11 @@ import { trackDismissableElement } from "@zag-js/dismissable";
 import { clickIfLink, nextTick, observeAttributes, raf, scrollIntoView, setCaretToEnd } from "@zag-js/dom-query";
 import { getInteractionModality, setInteractionModality, trackFocusVisible } from "@zag-js/focus-visible";
 import { getPlacement } from "@zag-js/popper";
+import {
+  createSelectedItemMap,
+  deriveSelectionState,
+  resolveSelectedItems
+} from "@zag-js/collection";
 import { addOrRemove, isBoolean, isEqual, match, remove } from "@zag-js/utils";
 import { collection } from "./combobox.collection.mjs";
 import * as dom from "./combobox.dom.mjs";
@@ -43,9 +48,11 @@ var machine = createMachine({
   },
   initialState({ prop }) {
     const open = prop("open") || prop("defaultOpen");
-    return open ? "suggesting" : "idle";
+    return open ? "open.suggesting" : "closed.idle";
   },
   context({ prop, bindable, getContext, getEvent }) {
+    const initialValue = prop("value") ?? prop("defaultValue") ?? [];
+    const initialSelectedItems = prop("collection").findMany(initialValue);
     return {
       currentPlacement: bindable(() => ({
         defaultValue: void 0
@@ -59,13 +66,21 @@ var machine = createMachine({
         },
         onChange(value) {
           const context = getContext();
-          const prevSelectedItems = context.get("selectedItems");
           const collection2 = prop("collection");
-          const findItems = (vals) => vals.map((v) => prevSelectedItems.find((item) => collection2.getItemValue(item) === v) || collection2.find(v));
-          const nextItems = findItems(value);
-          const effectiveValue = prop("value") || value;
-          context.set("selectedItems", findItems(effectiveValue));
-          prop("onValueChange")?.({ value, items: nextItems });
+          const selectedItemMap = context.get("selectedItemMap");
+          const proposed = deriveSelectionState({
+            values: value,
+            collection: collection2,
+            selectedItemMap
+          });
+          const effectiveValue = prop("value") ?? value;
+          const effective = effectiveValue === value ? proposed : deriveSelectionState({
+            values: effectiveValue,
+            collection: collection2,
+            selectedItemMap: proposed.nextSelectedItemMap
+          });
+          context.set("selectedItemMap", effective.nextSelectedItemMap);
+          prop("onValueChange")?.({ value, items: proposed.selectedItems });
         }
       })),
       highlightedValue: bindable(() => ({
@@ -102,10 +117,13 @@ var machine = createMachine({
         const highlightedItem = prop("collection").find(highlightedValue);
         return { defaultValue: highlightedItem };
       }),
-      selectedItems: bindable(() => {
-        const value = prop("value") || prop("defaultValue") || [];
-        const selectedItems = prop("collection").findMany(value);
-        return { defaultValue: selectedItems };
+      selectedItemMap: bindable(() => {
+        return {
+          defaultValue: createSelectedItemMap({
+            selectedItems: initialSelectedItems,
+            collection: prop("collection")
+          })
+        };
       })
     };
   },
@@ -115,7 +133,12 @@ var machine = createMachine({
     autoComplete: ({ prop }) => prop("inputBehavior") === "autocomplete",
     autoHighlight: ({ prop }) => prop("inputBehavior") === "autohighlight",
     hasSelectedItems: ({ context }) => context.get("value").length > 0,
-    valueAsString: ({ context, prop }) => prop("collection").stringifyItems(context.get("selectedItems")),
+    selectedItems: ({ context, prop }) => resolveSelectedItems({
+      values: context.get("value"),
+      collection: prop("collection"),
+      selectedItemMap: context.get("selectedItemMap")
+    }),
+    valueAsString: ({ computed, prop }) => prop("collection").stringifyItems(computed("selectedItems")),
     isCustomValue: ({ context, computed }) => context.get("inputValue") !== computed("valueAsString")
   },
   watch({ context, prop, track, action, send }) {
@@ -168,167 +191,173 @@ var machine = createMachine({
     }
   ]),
   states: {
-    idle: {
-      tags: ["idle", "closed"],
-      entry: ["scrollContentToTop", "clearHighlightedValue"],
-      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"]
+    closed: {
+      tags: ["closed"],
+      initial: "idle",
+      states: {
+        idle: {
+          tags: ["idle"],
+          entry: ["scrollContentToTop", "clearHighlightedValue"],
+          on: {
+            "CONTROLLED.OPEN": {
+              target: "open.interacting"
+            },
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "open.interacting",
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "INPUT.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "open.interacting",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "INPUT.FOCUS": {
+              target: "focused"
+            },
+            OPEN: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"]
+              },
+              {
+                target: "open.interacting",
+                actions: ["invokeOnOpen"]
+              }
+            ],
+            "VALUE.CLEAR": {
+              target: "focused",
+              actions: ["clearInputValue", "clearSelectedItems", "setInitialFocus"]
+            }
           }
-        ],
-        "INPUT.FOCUS": {
-          target: "focused"
         },
-        OPEN: [
-          {
-            guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
-          },
-          {
-            target: "interacting",
-            actions: ["invokeOnOpen"]
+        focused: {
+          tags: ["focused"],
+          entry: ["scrollContentToTop", "clearHighlightedValue"],
+          on: {
+            "CONTROLLED.OPEN": [
+              {
+                guard: "isChangeEvent",
+                target: "open.suggesting"
+              },
+              {
+                target: "open.interacting"
+              }
+            ],
+            "INPUT.CHANGE": [
+              {
+                guard: and("isOpenControlled", "openOnChange"),
+                actions: ["setInputValue", "invokeOnOpen", "highlightFirstItemIfNeeded"]
+              },
+              {
+                guard: "openOnChange",
+                target: "open.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: "open.interacting",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "open.interacting",
+                actions: ["setInitialFocus", "highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "INPUT.ARROW_DOWN": [
+              // == group 1 ==
+              {
+                guard: and("isOpenControlled", "autoComplete"),
+                actions: ["invokeOnOpen"]
+              },
+              {
+                guard: "autoComplete",
+                target: "open.interacting",
+                actions: ["invokeOnOpen"]
+              },
+              // == group 2 ==
+              {
+                guard: "isOpenControlled",
+                actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "open.interacting",
+                actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "INPUT.ARROW_UP": [
+              // == group 1 ==
+              {
+                guard: and("isOpenControlled", "autoComplete"),
+                actions: ["invokeOnOpen"]
+              },
+              {
+                guard: "autoComplete",
+                target: "open.interacting",
+                actions: ["invokeOnOpen"]
+              },
+              // == group 2 ==
+              {
+                guard: "isOpenControlled",
+                actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "open.interacting",
+                actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            OPEN: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"]
+              },
+              {
+                target: "open.interacting",
+                actions: ["invokeOnOpen"]
+              }
+            ],
+            "VALUE.CLEAR": {
+              actions: ["clearInputValue", "clearSelectedItems"]
+            }
           }
-        ],
-        "VALUE.CLEAR": {
-          target: "focused",
-          actions: ["clearInputValue", "clearSelectedItems", "setInitialFocus"]
         }
       }
     },
-    focused: {
-      tags: ["focused", "closed"],
-      entry: ["scrollContentToTop", "clearHighlightedValue"],
-      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": [
-          // == group 1 ==
-          {
-            guard: and("isOpenControlled", "autoComplete"),
-            actions: ["invokeOnOpen"]
-          },
-          {
-            guard: "autoComplete",
-            target: "interacting",
-            actions: ["invokeOnOpen"]
-          },
-          // == group 2 ==
-          {
-            guard: "isOpenControlled",
-            actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
-          },
-          {
-            target: "interacting",
-            actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
-          }
-        ],
-        "INPUT.ARROW_UP": [
-          // == group 1 ==
-          {
-            guard: and("isOpenControlled", "autoComplete"),
-            actions: ["invokeOnOpen"]
-          },
-          {
-            guard: "autoComplete",
-            target: "interacting",
-            actions: ["invokeOnOpen"]
-          },
-          // == group 2 ==
-          {
-            guard: "isOpenControlled",
-            actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
-          },
-          {
-            target: "interacting",
-            actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
-          }
-        ],
-        OPEN: [
-          {
-            guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
-          },
-          {
-            target: "interacting",
-            actions: ["invokeOnOpen"]
-          }
-        ],
-        "VALUE.CLEAR": {
-          actions: ["clearInputValue", "clearSelectedItems"]
-        }
-      }
-    },
-    interacting: {
+    open: {
       tags: ["open", "focused"],
       entry: ["setInitialFocus"],
       effects: ["trackFocusVisible", "scrollToHighlightedItem", "trackDismissableLayer", "trackPlacement"],
@@ -336,44 +365,11 @@ var machine = createMachine({
         "CONTROLLED.CLOSE": [
           {
             guard: "restoreFocus",
-            target: "focused",
+            target: "closed.focused",
             actions: ["setFinalFocus"]
           },
           {
-            target: "idle"
-          }
-        ],
-        CHILDREN_CHANGE: [
-          {
-            guard: "isHighlightedItemRemoved",
-            actions: ["clearHighlightedValue"]
-          },
-          {
-            actions: ["scrollToHighlightedItem"]
-          }
-        ],
-        "INPUT.HOME": {
-          actions: ["highlightFirstItem"]
-        },
-        "INPUT.END": {
-          actions: ["highlightLastItem"]
-        },
-        "INPUT.ARROW_DOWN": [
-          {
-            guard: and("autoComplete", "isLastItemHighlighted"),
-            actions: ["clearHighlightedValue", "scrollContentToTop"]
-          },
-          {
-            actions: ["highlightNextItem"]
-          }
-        ],
-        "INPUT.ARROW_UP": [
-          {
-            guard: and("autoComplete", "isFirstItemHighlighted"),
-            actions: ["clearHighlightedValue"]
-          },
-          {
-            actions: ["highlightPrevItem"]
+            target: "closed.idle"
           }
         ],
         "INPUT.ENTER": [
@@ -384,7 +380,7 @@ var machine = createMachine({
           },
           {
             guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
-            target: "focused",
+            target: "closed.focused",
             actions: ["revertInputValue", "invokeOnClose"]
           },
           // == group 2 ==
@@ -394,30 +390,13 @@ var machine = createMachine({
           },
           {
             guard: "closeOnSelect",
-            target: "focused",
+            target: "closed.focused",
             actions: ["selectHighlightedItem", "invokeOnClose", "setFinalFocus"]
           },
           {
             actions: ["selectHighlightedItem"]
           }
         ],
-        "INPUT.CHANGE": [
-          {
-            guard: "autoComplete",
-            target: "suggesting",
-            actions: ["setInputValue"]
-          },
-          {
-            target: "suggesting",
-            actions: ["clearHighlightedValue", "setInputValue"]
-          }
-        ],
-        "ITEM.POINTER_MOVE": {
-          actions: ["setHighlightedValue"]
-        },
-        "ITEM.POINTER_LEAVE": {
-          actions: ["clearHighlightedValue"]
-        },
         "ITEM.CLICK": [
           {
             guard: and("isOpenControlled", "closeOnSelect"),
@@ -425,39 +404,20 @@ var machine = createMachine({
           },
           {
             guard: "closeOnSelect",
-            target: "focused",
+            target: "closed.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",
+            target: "closed.focused",
             actions: ["invokeOnClose"]
           }
         ],
@@ -469,7 +429,7 @@ var machine = createMachine({
           },
           {
             guard: and("isCustomValue", not("allowCustomValue")),
-            target: "idle",
+            target: "closed.idle",
             actions: ["revertInputValue", "invokeOnClose"]
           },
           // == group 2 ==
@@ -478,7 +438,7 @@ var machine = createMachine({
             actions: ["invokeOnClose"]
           },
           {
-            target: "idle",
+            target: "closed.idle",
             actions: ["invokeOnClose"]
           }
         ],
@@ -488,7 +448,7 @@ var machine = createMachine({
             actions: ["invokeOnClose"]
           },
           {
-            target: "focused",
+            target: "closed.focused",
             actions: ["invokeOnClose", "setFinalFocus"]
           }
         ],
@@ -498,167 +458,140 @@ var machine = createMachine({
             actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
           },
           {
-            target: "focused",
+            target: "closed.focused",
             actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose", "setFinalFocus"]
           }
         ]
-      }
-    },
-    suggesting: {
-      tags: ["open", "focused"],
-      effects: ["trackFocusVisible", "trackDismissableLayer", "scrollToHighlightedItem", "trackPlacement"],
-      entry: ["setInitialFocus"],
-      on: {
-        "CONTROLLED.CLOSE": [
-          {
-            guard: "restoreFocus",
-            target: "focused",
-            actions: ["setFinalFocus"]
-          },
-          {
-            target: "idle"
-          }
-        ],
-        CHILDREN_CHANGE: [
-          {
-            guard: and("isHighlightedItemRemoved", "hasCollectionItems", "autoHighlight"),
-            actions: ["clearHighlightedValue", "highlightFirstItem"]
-          },
-          {
-            guard: "isHighlightedItemRemoved",
-            actions: ["clearHighlightedValue"]
-          },
-          {
-            guard: "autoHighlight",
-            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": [
-          // == group 1 ==
-          {
-            guard: and("isOpenControlled", "isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
-            actions: ["revertInputValue", "invokeOnClose"]
-          },
-          {
-            guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
-            target: "focused",
-            actions: ["revertInputValue", "invokeOnClose"]
-          },
-          // == group 2 ==
-          {
-            guard: and("isOpenControlled", "closeOnSelect"),
-            actions: ["selectHighlightedItem", "invokeOnClose"]
-          },
-          {
-            guard: "closeOnSelect",
-            target: "focused",
-            actions: ["selectHighlightedItem", "invokeOnClose", "setFinalFocus"]
-          },
-          {
-            actions: ["selectHighlightedItem"]
+      },
+      initial: "interacting",
+      states: {
+        interacting: {
+          on: {
+            CHILDREN_CHANGE: [
+              {
+                guard: "isHighlightedItemRemoved",
+                actions: ["clearHighlightedValue"]
+              },
+              {
+                actions: ["scrollToHighlightedItem"]
+              }
+            ],
+            "INPUT.HOME": {
+              actions: ["highlightFirstItem"]
+            },
+            "INPUT.END": {
+              actions: ["highlightLastItem"]
+            },
+            "INPUT.ARROW_DOWN": [
+              {
+                guard: and("autoComplete", "isLastItemHighlighted"),
+                actions: ["clearHighlightedValue", "scrollContentToTop"]
+              },
+              {
+                actions: ["highlightNextItem"]
+              }
+            ],
+            "INPUT.ARROW_UP": [
+              {
+                guard: and("autoComplete", "isFirstItemHighlighted"),
+                actions: ["clearHighlightedValue"]
+              },
+              {
+                actions: ["highlightPrevItem"]
+              }
+            ],
+            "INPUT.CHANGE": [
+              {
+                guard: "autoComplete",
+                target: "suggesting",
+                actions: ["setInputValue"]
+              },
+              {
+                target: "suggesting",
+                actions: ["clearHighlightedValue", "setInputValue"]
+              }
+            ],
+            "ITEM.POINTER_MOVE": {
+              actions: ["setHighlightedValue"]
+            },
+            "ITEM.POINTER_LEAVE": {
+              actions: ["clearHighlightedValue"]
+            },
+            "LAYER.ESCAPE": [
+              {
+                guard: and("isOpenControlled", "autoComplete"),
+                actions: ["syncInputValue", "invokeOnClose"]
+              },
+              {
+                guard: "autoComplete",
+                target: "closed.focused",
+                actions: ["syncInputValue", "invokeOnClose"]
+              },
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "closed.focused",
+                actions: ["invokeOnClose", "setFinalFocus"]
+              }
+            ]
           }
-        ],
-        "INPUT.CHANGE": {
-          actions: ["setInputValue"]
         },
-        "LAYER.ESCAPE": [
-          {
-            guard: "isOpenControlled",
-            actions: ["invokeOnClose"]
-          },
-          {
-            target: "focused",
-            actions: ["invokeOnClose"]
+        suggesting: {
+          on: {
+            CHILDREN_CHANGE: [
+              {
+                guard: and("isHighlightedItemRemoved", "hasCollectionItems", "autoHighlight"),
+                actions: ["clearHighlightedValue", "highlightFirstItem"]
+              },
+              {
+                guard: "isHighlightedItemRemoved",
+                actions: ["clearHighlightedValue"]
+              },
+              {
+                guard: "autoHighlight",
+                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.CHANGE": {
+              actions: ["setInputValue"]
+            },
+            "LAYER.ESCAPE": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnClose"]
+              },
+              {
+                target: "closed.focused",
+                actions: ["invokeOnClose"]
+              }
+            ],
+            "ITEM.POINTER_MOVE": {
+              target: "interacting",
+              actions: ["setHighlightedValue"]
+            },
+            "ITEM.POINTER_LEAVE": {
+              actions: ["clearHighlightedValue"]
+            }
           }
-        ],
-        "ITEM.POINTER_MOVE": {
-          target: "interacting",
-          actions: ["setHighlightedValue"]
-        },
-        "ITEM.POINTER_LEAVE": {
-          actions: ["clearHighlightedValue"]
-        },
-        "LAYER.INTERACT_OUTSIDE": [
-          // == group 1 ==
-          {
-            guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
-            actions: ["revertInputValue", "invokeOnClose"]
-          },
-          {
-            guard: and("isCustomValue", not("allowCustomValue")),
-            target: "idle",
-            actions: ["revertInputValue", "invokeOnClose"]
-          },
-          // == group 2 ==
-          {
-            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"]
-          }
-        ]
+        }
       }
     }
   },
@@ -1019,11 +952,9 @@ var machine = createMachine({
           const { context, prop } = params;
           const collection2 = prop("collection");
           const value = context.get("value");
-          const selectedItems = value.map((v) => {
-            const item = context.get("selectedItems").find((item2) => collection2.getItemValue(item2) === v);
-            return item || collection2.find(v);
-          });
-          context.set("selectedItems", selectedItems);
+          const selectedItemMap = context.get("selectedItemMap");
+          const next = deriveSelectionState({ values: value, collection: collection2, selectedItemMap });
+          context.set("selectedItemMap", next.nextSelectedItemMap);
           const inputValue = match(prop("selectionBehavior"), {
             preserve: context.get("inputValue"),
             replace: collection2.stringifyMany(value),