@sprawlify/primitives 0.1.11 → 0.1.12

package/dist/machines/combobox/index.mjs

@@ -1,7 +1,7 @@
 import { t as createAnatomy } from "../../create-anatomy-Dr0evdYy.mjs";
 import { Cn as setCaretToEnd, H as nextTick, I as scrollIntoView, L as clickIfLink, S as query, St as isLeftClick, W as raf, _t as isComposingEvent, bn as ariaAttr, bt as isDownloadingEvent, cn as isAnchorElement, ft as getEventKey, vt as isContextMenuEvent, wt as isOpeningInNewTab, xn as dataAttr, z as observeAttributes } from "../../dom-query-BFuRs3l4.mjs";
 import { At as remove, Y as match, ft as isEqual, mt as addOrRemove, rt as isBoolean, t as ensure, u as createSplitProps } from "../../utils-VVoZ_v29.mjs";
-import { s as ListCollection } from "../../collection-DgzidRvr.mjs";
+import { a as createSelectedItemMap, d as ListCollection, o as deriveSelectionState, s as resolveSelectedItems } from "../../collection-GSpaYJ2f.mjs";
 import { o as setup } from "../../core-CTtbW9qh.mjs";
 import "../../interact-outside-Ba50N1a5.mjs";
 import { n as trackDismissableElement } from "../../dismissable-B9k5K6f9.mjs";
@@ -92,7 +92,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,
@@ -564,9 +564,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(() => ({
@@ -578,15 +580,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 = deriveSelectionState({
+						values: value,
+						collection,
+						selectedItemMap: context.get("selectedItemMap")
+					});
+					const effectiveValue = prop("value") ?? value;
+					const effective = effectiveValue === value ? proposed : deriveSelectionState({
+						values: effectiveValue,
+						collection,
+						selectedItemMap: proposed.nextSelectedItemMap
+					});
+					context.set("selectedItemMap", effective.nextSelectedItemMap);
 					prop("onValueChange")?.({
 						value,
-						items: nextItems
+						items: proposed.selectedItems
 					});
 				}
 			})),
@@ -629,9 +638,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: createSelectedItemMap({
+					selectedItems: initialSelectedItems,
+					collection: prop("collection")
+				}) };
 			})
 		};
 	},
@@ -641,7 +652,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 }) => 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 }) {
@@ -676,156 +692,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: [
@@ -837,23 +859,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")),
@@ -861,7 +869,7 @@ const machine = createMachine({
 					},
 					{
 						guard: and("isCustomValue", not("hasHighlightedItem"), not("allowCustomValue")),
-						target: "focused",
+						target: "closed.focused",
 						actions: ["revertInputValue", "invokeOnClose"]
 					},
 					{
@@ -870,7 +878,7 @@ const machine = createMachine({
 					},
 					{
 						guard: "closeOnSelect",
-						target: "focused",
+						target: "closed.focused",
 						actions: [
 							"selectHighlightedItem",
 							"invokeOnClose",
@@ -879,16 +887,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"),
@@ -896,7 +894,7 @@ const machine = createMachine({
 					},
 					{
 						guard: "closeOnSelect",
-						target: "focused",
+						target: "closed.focused",
 						actions: [
 							"selectItem",
 							"invokeOnClose",
@@ -905,30 +903,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": [
@@ -938,7 +917,7 @@ const machine = createMachine({
 					},
 					{
 						guard: and("isCustomValue", not("allowCustomValue")),
-						target: "idle",
+						target: "closed.idle",
 						actions: ["revertInputValue", "invokeOnClose"]
 					},
 					{
@@ -946,7 +925,7 @@ const machine = createMachine({
 						actions: ["invokeOnClose"]
 					},
 					{
-						target: "idle",
+						target: "closed.idle",
 						actions: ["invokeOnClose"]
 					}
 				],
@@ -954,7 +933,7 @@ const machine = createMachine({
 					guard: "isOpenControlled",
 					actions: ["invokeOnClose"]
 				}, {
-					target: "focused",
+					target: "closed.focused",
 					actions: ["invokeOnClose", "setFinalFocus"]
 				}],
 				"VALUE.CLEAR": [{
@@ -965,7 +944,7 @@ const machine = createMachine({
 						"invokeOnClose"
 					]
 				}, {
-					target: "focused",
+					target: "closed.focused",
 					actions: [
 						"clearInputValue",
 						"clearSelectedItems",
@@ -973,156 +952,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"] }
+				} }
 			}
 		}
 	},
@@ -1494,10 +1416,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 = deriveSelectionState({
+						values: value,
+						collection,
+						selectedItemMap: context.get("selectedItemMap")
 					});
-					context.set("selectedItems", selectedItems);
+					context.set("selectedItemMap", next.nextSelectedItemMap);
 					const inputValue = match(prop("selectionBehavior"), {
 						preserve: context.get("inputValue"),
 						replace: collection.stringifyMany(value),