@sprawlify/primitives 0.1.10 → 0.1.12

package/dist/machines/combobox/index.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_create_anatomy = require("../../create-anatomy-BnwEmNnc.cjs");
 const require_dom_query = require("../../dom-query-BUO7rGsg.cjs");
 const require_utils = require("../../utils-ByNiZU8f.cjs");
-const require_collection = require("../../collection-BBgC8xCb.cjs");
+const require_collection = require("../../collection-D0Abtxc0.cjs");
 const require_core = require("../../core-Bw_czdwX.cjs");
 require("../../interact-outside-Bg-QSXqp.cjs");
 const require_dismissable = require("../../dismissable-DxjbwsOf.cjs");
@@ -93,7 +93,7 @@ function connect(service, normalize) {
 		value: context.get("value"),
 		valueAsString: computed("valueAsString"),
 		hasSelectedItems: computed("hasSelectedItems"),
-		selectedItems: context.get("selectedItems"),
+		selectedItems: computed("selectedItems"),
 		collection: prop("collection"),
 		multiple: !!prop("multiple"),
 		disabled: !!disabled,
@@ -565,9 +565,11 @@ const machine = createMachine({
 		};
 	},
 	initialState({ prop }) {
-		return prop("open") || prop("defaultOpen") ? "suggesting" : "idle";
+		return prop("open") || prop("defaultOpen") ? "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 })),
 			value: bindable(() => ({
@@ -579,15 +581,22 @@ const machine = createMachine({
 				},
 				onChange(value) {
 					const context = getContext();
-					const prevSelectedItems = context.get("selectedItems");
 					const collection = prop("collection");
-					const findItems = (vals) => vals.map((v) => prevSelectedItems.find((item) => collection.getItemValue(item) === v) || collection.find(v));
-					const nextItems = findItems(value);
-					const effectiveValue = prop("value") || value;
-					context.set("selectedItems", findItems(effectiveValue));
+					const proposed = require_collection.deriveSelectionState({
+						values: value,
+						collection,
+						selectedItemMap: context.get("selectedItemMap")
+					});
+					const effectiveValue = prop("value") ?? value;
+					const effective = effectiveValue === value ? proposed : require_collection.deriveSelectionState({
+						values: effectiveValue,
+						collection,
+						selectedItemMap: proposed.nextSelectedItemMap
+					});
+					context.set("selectedItemMap", effective.nextSelectedItemMap);
 					prop("onValueChange")?.({
 						value,
-						items: nextItems
+						items: proposed.selectedItems
 					});
 				}
 			})),
@@ -630,9 +639,11 @@ const machine = createMachine({
 				const highlightedValue = prop("highlightedValue");
 				return { defaultValue: prop("collection").find(highlightedValue) };
 			}),
-			selectedItems: bindable(() => {
-				const value = prop("value") || prop("defaultValue") || [];
-				return { defaultValue: prop("collection").findMany(value) };
+			selectedItemMap: bindable(() => {
+				return { defaultValue: require_collection.createSelectedItemMap({
+					selectedItems: initialSelectedItems,
+					collection: prop("collection")
+				}) };
 			})
 		};
 	},
@@ -642,7 +653,12 @@ const 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 }) => require_collection.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 }) {
@@ -677,156 +693,162 @@ const machine = createMachine({
 		actions: ["setInitialFocus"]
 	}]),
 	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"]
-				}],
-				"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", "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": [
-					{
-						guard: and("isOpenControlled", "autoComplete"),
-						actions: ["invokeOnOpen"]
-					},
-					{
-						guard: "autoComplete",
-						target: "interacting",
-						actions: ["invokeOnOpen"]
-					},
-					{
-						guard: "isOpenControlled",
-						actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
-					},
-					{
-						target: "interacting",
-						actions: ["highlightFirstOrSelectedItem", "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.ARROW_UP": [
-					{
-						guard: and("isOpenControlled", "autoComplete"),
-						actions: ["invokeOnOpen"]
-					},
-					{
-						guard: "autoComplete",
-						target: "interacting",
-						actions: ["invokeOnOpen"]
-					},
-					{
-						guard: "isOpenControlled",
-						actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
-					},
-					{
-						target: "interacting",
-						actions: ["highlightLastOrSelectedItem", "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": [
+							{
+								guard: and("isOpenControlled", "autoComplete"),
+								actions: ["invokeOnOpen"]
+							},
+							{
+								guard: "autoComplete",
+								target: "open.interacting",
+								actions: ["invokeOnOpen"]
+							},
+							{
+								guard: "isOpenControlled",
+								actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
+							},
+							{
+								target: "open.interacting",
+								actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
+							}
+						],
+						"INPUT.ARROW_UP": [
+							{
+								guard: and("isOpenControlled", "autoComplete"),
+								actions: ["invokeOnOpen"]
+							},
+							{
+								guard: "autoComplete",
+								target: "open.interacting",
+								actions: ["invokeOnOpen"]
+							},
+							{
+								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"] }
 					}
-				],
-				OPEN: [{
-					guard: "isOpenControlled",
-					actions: ["invokeOnOpen"]
-				}, {
-					target: "interacting",
-					actions: ["invokeOnOpen"]
-				}],
-				"VALUE.CLEAR": { actions: ["clearInputValue", "clearSelectedItems"] }
+				}
 			}
 		},
-		interacting: {
+		open: {
 			tags: ["open", "focused"],
 			entry: ["setInitialFocus"],
 			effects: [
@@ -838,23 +860,9 @@ const machine = createMachine({
 			on: {
 				"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": [
 					{
 						guard: and("isOpenControlled", "isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
@@ -862,7 +870,7 @@ const machine = createMachine({
 					},
 					{
 						guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
-						target: "focused",
+						target: "closed.focused",
 						actions: ["revertInputValue", "invokeOnClose"]
 					},
 					{
@@ -871,7 +879,7 @@ const machine = createMachine({
 					},
 					{
 						guard: "closeOnSelect",
-						target: "focused",
+						target: "closed.focused",
 						actions: [
 							"selectHighlightedItem",
 							"invokeOnClose",
@@ -880,16 +888,6 @@ const machine = createMachine({
 					},
 					{ 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"),
@@ -897,7 +895,7 @@ const machine = createMachine({
 					},
 					{
 						guard: "closeOnSelect",
-						target: "focused",
+						target: "closed.focused",
 						actions: [
 							"selectItem",
 							"invokeOnClose",
@@ -906,30 +904,11 @@ const machine = createMachine({
 					},
 					{ 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"]
 				}],
 				"LAYER.INTERACT_OUTSIDE": [
@@ -939,7 +918,7 @@ const machine = createMachine({
 					},
 					{
 						guard: and("isCustomValue", not("allowCustomValue")),
-						target: "idle",
+						target: "closed.idle",
 						actions: ["revertInputValue", "invokeOnClose"]
 					},
 					{
@@ -947,7 +926,7 @@ const machine = createMachine({
 						actions: ["invokeOnClose"]
 					},
 					{
-						target: "idle",
+						target: "closed.idle",
 						actions: ["invokeOnClose"]
 					}
 				],
@@ -955,7 +934,7 @@ const machine = createMachine({
 					guard: "isOpenControlled",
 					actions: ["invokeOnClose"]
 				}, {
-					target: "focused",
+					target: "closed.focused",
 					actions: ["invokeOnClose", "setFinalFocus"]
 				}],
 				"VALUE.CLEAR": [{
@@ -966,7 +945,7 @@ const machine = createMachine({
 						"invokeOnClose"
 					]
 				}, {
-					target: "focused",
+					target: "closed.focused",
 					actions: [
 						"clearInputValue",
 						"clearSelectedItems",
@@ -974,156 +953,99 @@ const machine = createMachine({
 						"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"]
-					},
-					{
+			},
+			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"]
+						}
+					]
+				} },
+				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"]
 					},
-					{
-						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": [
-					{
-						guard: and("isOpenControlled", "isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
-						actions: ["revertInputValue", "invokeOnClose"]
-					},
-					{
-						guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
-						target: "focused",
-						actions: ["revertInputValue", "invokeOnClose"]
-					},
-					{
-						guard: and("isOpenControlled", "closeOnSelect"),
-						actions: ["selectHighlightedItem", "invokeOnClose"]
-					},
-					{
-						guard: "closeOnSelect",
-						target: "focused",
-						actions: [
-							"selectHighlightedItem",
-							"invokeOnClose",
-							"setFinalFocus"
-						]
+					"INPUT.ARROW_UP": {
+						target: "interacting",
+						actions: ["highlightPrevItem"]
 					},
-					{ actions: ["selectHighlightedItem"] }
-				],
-				"INPUT.CHANGE": { actions: ["setInputValue"] },
-				"LAYER.ESCAPE": [{
-					guard: "isOpenControlled",
-					actions: ["invokeOnClose"]
-				}, {
-					target: "focused",
-					actions: ["invokeOnClose"]
-				}],
-				"ITEM.POINTER_MOVE": {
-					target: "interacting",
-					actions: ["setHighlightedValue"]
-				},
-				"ITEM.POINTER_LEAVE": { actions: ["clearHighlightedValue"] },
-				"LAYER.INTERACT_OUTSIDE": [
-					{
-						guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
-						actions: ["revertInputValue", "invokeOnClose"]
+					"INPUT.HOME": {
+						target: "interacting",
+						actions: ["highlightFirstItem"]
 					},
-					{
-						guard: and("isCustomValue", not("allowCustomValue")),
-						target: "idle",
-						actions: ["revertInputValue", "invokeOnClose"]
+					"INPUT.END": {
+						target: "interacting",
+						actions: ["highlightLastItem"]
 					},
-					{
+					"INPUT.CHANGE": { actions: ["setInputValue"] },
+					"LAYER.ESCAPE": [{
 						guard: "isOpenControlled",
 						actions: ["invokeOnClose"]
-					},
-					{
-						target: "idle",
+					}, {
+						target: "closed.focused",
 						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"
-						]
+					}],
+					"ITEM.POINTER_MOVE": {
+						target: "interacting",
+						actions: ["setHighlightedValue"]
 					},
-					{ 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"
-					]
-				}]
+					"ITEM.POINTER_LEAVE": { actions: ["clearHighlightedValue"] }
+				} }
 			}
 		}
 	},
@@ -1495,10 +1417,12 @@ const machine = createMachine({
 					const { context, prop } = params;
 					const collection = prop("collection");
 					const value = context.get("value");
-					const selectedItems = value.map((v) => {
-						return context.get("selectedItems").find((item) => collection.getItemValue(item) === v) || collection.find(v);
+					const next = require_collection.deriveSelectionState({
+						values: value,
+						collection,
+						selectedItemMap: context.get("selectedItemMap")
 					});
-					context.set("selectedItems", selectedItems);
+					context.set("selectedItemMap", next.nextSelectedItemMap);
 					const inputValue = require_utils.match(prop("selectionBehavior"), {
 						preserve: context.get("inputValue"),
 						replace: collection.stringifyMany(value),