@destyler/combobox 0.2.11 → 0.2.12

package/dist/index.d.mts

@@ -1,17 +1,14 @@
-import * as _destyler_anatomy0 from "@destyler/anatomy";
 import { CollectionItem, CollectionItem as CollectionItem$1, CollectionOptions, CollectionOptions as CollectionOptions$1, ListCollection } from "@destyler/collection";
-import * as _destyler_xstate0 from "@destyler/xstate";
 import { AnyEventObject, Machine, XSend, XState } from "@destyler/xstate";
 import { Placement, PositioningOptions } from "@destyler/popper";
 import { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from "@destyler/dismissable";
 import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
-
 //#region src/anatomy.d.ts
-declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "clearTrigger" | "content" | "control" | "input" | "item" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "label" | "list" | "positioner" | "trigger">;
+export declare const anatomy: import("@destyler/anatomy").AnatomyInstance<"root" | "label" | "control" | "input" | "content" | "trigger" | "clearTrigger" | "item" | "positioner" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "list">;
 //#endregion
 //#region src/collection.d.ts
-declare function collection<T extends CollectionItem$1>(options: CollectionOptions$1<T>): ListCollection<T>;
-declare namespace collection {
+export declare function collection<T extends CollectionItem$1>(options: CollectionOptions$1<T>): ListCollection<T>;
+export declare namespace collection {
   var empty: () => ListCollection<CollectionItem$1>;
 }
 //#endregion
@@ -431,9 +428,9 @@ interface MachineApi<T extends PropTypes = PropTypes, V extends CollectionItem =
 }
 //#endregion
 //#region src/connect.d.ts
-declare function connect<T extends PropTypes, V extends CollectionItem>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T, V>;
+export declare function connect<T extends PropTypes, V extends CollectionItem>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T, V>;
 //#endregion
 //#region src/machine.d.ts
-declare function machine<T extends CollectionItem>(userContext: UserDefinedContext<T>): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+export declare function machine<T extends CollectionItem>(userContext: UserDefinedContext<T>): import("@destyler/xstate").Machine<MachineContext, MachineState, import("@destyler/xstate").AnyEventObject>;
 //#endregion
-export { type MachineApi as Api, type CollectionItem, type CollectionOptions, type UserDefinedContext as Context, type ElementIds, type FocusOutsideEvent, type HighlightChangeDetails, type InputValueChangeDetails, type InteractOutsideEvent, type IntlTranslations, type ItemGroupLabelProps, type ItemGroupProps, type ItemProps, type ItemState, type NavigateDetails, type OpenChangeDetails, type Placement, type PointerDownOutsideEvent, type PositioningOptions, type ScrollToIndexDetails, type Service, type TriggerProps, type ValueChangeDetails, anatomy, collection, connect, machine };
+export type { MachineApi as Api, CollectionItem, CollectionOptions, UserDefinedContext as Context, ElementIds, FocusOutsideEvent, HighlightChangeDetails, InputValueChangeDetails, InteractOutsideEvent, IntlTranslations, ItemGroupLabelProps, ItemGroupProps, ItemProps, ItemState, NavigateDetails, OpenChangeDetails, Placement, PointerDownOutsideEvent, PositioningOptions, ScrollToIndexDetails, Service, TriggerProps, ValueChangeDetails };

package/dist/index.mjs

@@ -6,11 +6,9 @@ import { getPlacement, getPlacementStyles } from "@destyler/popper";
 import { ariaHidden } from "@destyler/aria-hidden";
 import { trackDismissableElement } from "@destyler/dismissable";
 import { addOrRemove, compact, isArray, isBoolean, isControlled, isEqual, isPropUserProvided, match, resolveControllableOpen, resolveControllableProp, withControllableProvided } from "@destyler/utils";
-
 //#region src/anatomy.ts
 const anatomy = createAnatomy("combobox").parts("root", "clearTrigger", "content", "control", "input", "item", "itemGroup", "itemGroupLabel", "itemIndicator", "itemText", "label", "list", "positioner", "trigger");
 const parts = anatomy.build();
-
 //#endregion
 //#region src/collection.ts
 function collection(options) {
@@ -19,7 +17,6 @@ function collection(options) {
 collection.empty = () => {
 	return ref(new ListCollection({ items: [] }));
 };
-
 //#endregion
 //#region src/dom.ts
 const dom = createScope({
@@ -43,7 +40,7 @@ const dom = createScope({
 	getHighlightedItemEl: (ctx) => {
 		const value = ctx.highlightedValue;
 		if (value == null) return;
-		const selector = `[role=option][data-value="${CSS.escape(value)}"`;
+		const selector = `[role=option][data-value="${CSS.escape(value)}"]`;
 		return query(dom.getContentEl(ctx), selector);
 	},
 	focusInputEl: (ctx) => {
@@ -57,12 +54,11 @@ const dom = createScope({
 		triggerEl?.focus({ preventScroll: true });
 	}
 });
-
 //#endregion
 //#region src/connect.ts
 function connect(state, send, normalize) {
 	const translations = state.context.translations;
-	const collection$1 = state.context.collection;
+	const collection = state.context.collection;
 	const disabled = state.context.disabled;
 	const interactive = state.context.isInteractive;
 	const invalid = state.context.invalid;
@@ -76,11 +72,11 @@ function connect(state, send, normalize) {
 		placement: state.context.currentPlacement
 	});
 	function getItemState(props) {
-		const disabled$1 = collection$1.getItemDisabled(props.item);
-		const value = collection$1.getItemValue(props.item);
+		const itemDisabled = collection.getItemDisabled(props.item);
+		const value = collection.getItemValue(props.item);
 		return {
 			value,
-			disabled: Boolean(disabled$1 || disabled$1),
+			disabled: Boolean(disabled || itemDisabled),
 			highlighted: highlightedValue === value,
 			selected: state.context.value.includes(value)
 		};
@@ -107,10 +103,10 @@ function connect(state, send, normalize) {
 				options
 			});
 		},
-		setCollection(collection$2) {
+		setCollection(collection) {
 			send({
 				type: "COLLECTION.SET",
-				value: collection$2
+				value: collection
 			});
 		},
 		setHighlightValue(value) {
@@ -250,13 +246,13 @@ function connect(state, send, normalize) {
 					const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;
 					const keypress = true;
 					const exec = {
-						ArrowDown(event$1) {
+						ArrowDown(event) {
 							if (!openOnKeyPress && !open) return;
 							send({
-								type: event$1.altKey ? "OPEN" : "INPUT.ARROW_DOWN",
+								type: event.altKey ? "OPEN" : "INPUT.ARROW_DOWN",
 								keypress
 							});
-							event$1.preventDefault();
+							event.preventDefault();
 						},
 						ArrowUp() {
 							if (!openOnKeyPress && !open) return;
@@ -266,28 +262,28 @@ function connect(state, send, normalize) {
 							});
 							event.preventDefault();
 						},
-						Home(event$1) {
+						Home(event) {
 							if (isModifierKey) return;
 							send({
 								type: "INPUT.HOME",
 								keypress
 							});
-							if (open) event$1.preventDefault();
+							if (open) event.preventDefault();
 						},
-						End(event$1) {
+						End(event) {
 							if (isModifierKey) return;
 							send({
 								type: "INPUT.END",
 								keypress
 							});
-							if (open) event$1.preventDefault();
+							if (open) event.preventDefault();
 						},
-						Enter(event$1) {
+						Enter(event) {
 							send({
 								type: "INPUT.ENTER",
 								keypress
 							});
-							if (open) event$1.preventDefault();
+							if (open) event.preventDefault();
 							const itemEl = dom.getHighlightedItemEl(state.context);
 							if (isAnchorElement(itemEl)) state.context.navigate({
 								value: state.context.highlightedValue,
@@ -435,6 +431,7 @@ function connect(state, send, normalize) {
 				"data-disabled": dataAttr(itemState.disabled),
 				"data-value": itemState.value,
 				onPointerMove() {
+					if (!interactive) return;
 					if (itemState.disabled) return;
 					if (itemState.highlighted) return;
 					send({
@@ -443,6 +440,7 @@ function connect(state, send, normalize) {
 					});
 				},
 				onPointerLeave() {
+					if (!interactive) return;
 					if (props.persistFocus) return;
 					if (itemState.disabled) return;
 					if (!state.previousEvent.type.includes("POINTER")) return;
@@ -452,6 +450,7 @@ function connect(state, send, normalize) {
 					});
 				},
 				onClick(event) {
+					if (event.defaultPrevented || !interactive) return;
 					if (isDownloadingEvent(event)) return;
 					if (isOpeningInNewTab(event)) return;
 					if (isContextMenuEvent(event)) return;
@@ -504,7 +503,6 @@ function connect(state, send, normalize) {
 		}
 	};
 }
-
 //#endregion
 //#region src/machine.ts
 const { and, not } = guards;
@@ -652,11 +650,11 @@ function machine(userContext) {
 		},
 		created: ["syncInitialValues", "syncSelectionBehavior"],
 		computed: {
-			isInputValueEmpty: (ctx$1) => ctx$1.inputValue.length === 0,
-			isInteractive: (ctx$1) => !(ctx$1.readOnly || ctx$1.disabled),
-			autoComplete: (ctx$1) => ctx$1.inputBehavior === "autocomplete",
-			autoHighlight: (ctx$1) => ctx$1.inputBehavior === "autohighlight",
-			hasSelectedItems: (ctx$1) => ctx$1.value.length > 0
+			isInputValueEmpty: (ctx) => ctx.inputValue.length === 0,
+			isInteractive: (ctx) => !(ctx.readOnly || ctx.disabled),
+			autoComplete: (ctx) => ctx.inputBehavior === "autocomplete",
+			autoHighlight: (ctx) => ctx.inputBehavior === "autohighlight",
+			hasSelectedItems: (ctx) => ctx.value.length > 0
 		},
 		watch: {
 			value: ["syncSelectedItems"],
@@ -798,8 +796,7 @@ function machine(userContext) {
 					],
 					"INPUT.ARROW_UP": [
 						{
-							guard: "autoComplete",
-							target: "interacting",
+							guard: and("isOpenControlled", "autoComplete"),
 							actions: "invokeOnOpen"
 						},
 						{
@@ -808,7 +805,7 @@ function machine(userContext) {
 							actions: "invokeOnOpen"
 						},
 						{
-							target: "interacting",
+							guard: "isOpenControlled",
 							actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
 						},
 						{
@@ -1120,37 +1117,37 @@ function machine(userContext) {
 		}
 	}, {
 		guards: {
-			isInputValueEmpty: (ctx$1) => ctx$1.isInputValueEmpty,
-			autoComplete: (ctx$1) => ctx$1.autoComplete && !ctx$1.multiple,
-			autoHighlight: (ctx$1) => ctx$1.autoHighlight,
-			isFirstItemHighlighted: (ctx$1) => ctx$1.collection.firstValue === ctx$1.highlightedValue,
-			isLastItemHighlighted: (ctx$1) => ctx$1.collection.lastValue === ctx$1.highlightedValue,
-			isCustomValue: (ctx$1) => ctx$1.inputValue !== ctx$1.valueAsString,
-			allowCustomValue: (ctx$1) => !!ctx$1.allowCustomValue,
-			hasHighlightedItem: (ctx$1) => ctx$1.highlightedValue != null,
-			closeOnSelect: (ctx$1) => !!ctx$1.closeOnSelect,
-			isOpenControlled: (ctx$1) => isControlled(ctx$1, "open"),
-			openOnChange: (ctx$1, evt) => {
-				if (isBoolean(ctx$1.openOnChange)) return ctx$1.openOnChange;
-				return !!ctx$1.openOnChange?.({ inputValue: evt.value });
+			isInputValueEmpty: (ctx) => ctx.isInputValueEmpty,
+			autoComplete: (ctx) => ctx.autoComplete && !ctx.multiple,
+			autoHighlight: (ctx) => ctx.autoHighlight,
+			isFirstItemHighlighted: (ctx) => ctx.collection.firstValue === ctx.highlightedValue,
+			isLastItemHighlighted: (ctx) => ctx.collection.lastValue === ctx.highlightedValue,
+			isCustomValue: (ctx) => ctx.inputValue !== ctx.valueAsString,
+			allowCustomValue: (ctx) => !!ctx.allowCustomValue,
+			hasHighlightedItem: (ctx) => ctx.highlightedValue != null,
+			closeOnSelect: (ctx) => !!ctx.closeOnSelect,
+			isOpenControlled: (ctx) => isControlled(ctx, "open"),
+			openOnChange: (ctx, evt) => {
+				if (isBoolean(ctx.openOnChange)) return ctx.openOnChange;
+				return !!ctx.openOnChange?.({ inputValue: evt.value });
 			},
 			restoreFocus: (_ctx, evt) => evt.restoreFocus == null ? true : !!evt.restoreFocus,
 			isChangeEvent: (_ctx, evt) => evt.previousEvent?.type === "INPUT.CHANGE"
 		},
 		activities: {
-			trackDismissableLayer(ctx$1, _evt, { send }) {
-				if (ctx$1.disableLayer) return;
-				const contentEl = () => dom.getContentEl(ctx$1);
+			trackDismissableLayer(ctx, _evt, { send }) {
+				if (ctx.disableLayer) return;
+				const contentEl = () => dom.getContentEl(ctx);
 				return trackDismissableElement(contentEl, {
 					defer: true,
 					exclude: () => [
-						dom.getInputEl(ctx$1),
-						dom.getTriggerEl(ctx$1),
-						dom.getClearTriggerEl(ctx$1)
+						dom.getInputEl(ctx),
+						dom.getTriggerEl(ctx),
+						dom.getClearTriggerEl(ctx)
 					],
-					onFocusOutside: ctx$1.onFocusOutside,
-					onPointerDownOutside: ctx$1.onPointerDownOutside,
-					onInteractOutside: ctx$1.onInteractOutside,
+					onFocusOutside: ctx.onFocusOutside,
+					onPointerDownOutside: ctx.onPointerDownOutside,
+					onInteractOutside: ctx.onInteractOutside,
 					onEscapeKeyDown(event) {
 						event.preventDefault();
 						event.stopPropagation();
@@ -1164,57 +1161,57 @@ function machine(userContext) {
 					}
 				});
 			},
-			hideOtherElements(ctx$1) {
+			hideOtherElements(ctx) {
 				return ariaHidden([
-					dom.getInputEl(ctx$1),
-					dom.getContentEl(ctx$1),
-					dom.getTriggerEl(ctx$1),
-					dom.getClearTriggerEl(ctx$1)
+					dom.getInputEl(ctx),
+					dom.getContentEl(ctx),
+					dom.getTriggerEl(ctx),
+					dom.getClearTriggerEl(ctx)
 				]);
 			},
-			computePlacement(ctx$1) {
-				const controlEl = () => dom.getControlEl(ctx$1);
-				const positionerEl = () => dom.getPositionerEl(ctx$1);
-				ctx$1.currentPlacement = ctx$1.positioning.placement;
+			computePlacement(ctx) {
+				const controlEl = () => dom.getControlEl(ctx);
+				const positionerEl = () => dom.getPositionerEl(ctx);
+				ctx.currentPlacement = ctx.positioning.placement;
 				return getPlacement(controlEl, positionerEl, {
-					...ctx$1.positioning,
+					...ctx.positioning,
 					defer: true,
 					onComplete(data) {
-						ctx$1.currentPlacement = data.placement;
+						ctx.currentPlacement = data.placement;
 					}
 				});
 			},
-			trackChildNodes(ctx$1, _evt, { send }) {
-				if (!ctx$1.autoHighlight) return;
+			trackChildNodes(ctx, _evt, { send }) {
+				if (!ctx.autoHighlight) return;
 				const exec = () => send("CHILDREN_CHANGE");
-				const contentEl = () => dom.getContentEl(ctx$1);
+				const contentEl = () => dom.getContentEl(ctx);
 				return observeChildren(contentEl, {
 					callback: exec,
 					defer: true
 				});
 			},
-			scrollToHighlightedItem(ctx$1, _evt, { getState }) {
-				const inputEl = dom.getInputEl(ctx$1);
+			scrollToHighlightedItem(ctx, _evt, { getState }) {
+				const inputEl = dom.getInputEl(ctx);
 				const cleanups = [];
 				const exec = (immediate) => {
-					if (getState().event.type.includes("POINTER") || !ctx$1.highlightedValue) return;
-					const itemEl = dom.getHighlightedItemEl(ctx$1);
-					const contentEl = dom.getContentEl(ctx$1);
-					if (ctx$1.scrollToIndexFn) {
-						const highlightedIndex = ctx$1.collection.indexOf(ctx$1.highlightedValue);
-						ctx$1.scrollToIndexFn({
+					if (getState().event.type.includes("POINTER") || !ctx.highlightedValue) return;
+					const itemEl = dom.getHighlightedItemEl(ctx);
+					const contentEl = dom.getContentEl(ctx);
+					if (ctx.scrollToIndexFn) {
+						const highlightedIndex = ctx.collection.indexOf(ctx.highlightedValue);
+						ctx.scrollToIndexFn({
 							index: highlightedIndex,
 							immediate
 						});
 						return;
 					}
-					const rafCleanup$1 = raf(() => {
+					const rafCleanup = raf(() => {
 						scrollIntoView(itemEl, {
 							rootEl: contentEl,
 							block: "nearest"
 						});
 					});
-					cleanups.push(rafCleanup$1);
+					cleanups.push(rafCleanup);
 				};
 				const rafCleanup = raf(() => exec(true));
 				cleanups.push(rafCleanup);
@@ -1229,56 +1226,56 @@ function machine(userContext) {
 			}
 		},
 		actions: {
-			reposition(ctx$1, evt) {
-				const controlEl = () => dom.getControlEl(ctx$1);
-				const positionerEl = () => dom.getPositionerEl(ctx$1);
+			reposition(ctx, evt) {
+				const controlEl = () => dom.getControlEl(ctx);
+				const positionerEl = () => dom.getPositionerEl(ctx);
 				getPlacement(controlEl, positionerEl, {
-					...ctx$1.positioning,
+					...ctx.positioning,
 					...evt.options,
 					defer: true,
 					listeners: false,
 					onComplete(data) {
-						ctx$1.currentPlacement = data.placement;
+						ctx.currentPlacement = data.placement;
 					}
 				});
 			},
-			setHighlightedItem(ctx$1, evt) {
+			setHighlightedItem(ctx, evt) {
 				if (evt.value == null) return;
-				set.highlightedValue(ctx$1, evt.value);
+				set.highlightedValue(ctx, evt.value);
 			},
-			clearHighlightedItem(ctx$1) {
-				set.highlightedValue(ctx$1, null, true);
+			clearHighlightedItem(ctx) {
+				set.highlightedValue(ctx, null, true);
 			},
-			selectHighlightedItem(ctx$1) {
-				set.value(ctx$1, ctx$1.highlightedValue);
-				set.inputValue(ctx$1, getInputValue(ctx$1));
+			selectHighlightedItem(ctx) {
+				set.value(ctx, ctx.highlightedValue);
+				set.inputValue(ctx, getInputValue(ctx));
 			},
-			selectItem(ctx$1, evt) {
+			selectItem(ctx, evt) {
 				if (evt.value == null) return;
-				set.value(ctx$1, evt.value);
-				set.inputValue(ctx$1, getInputValue(ctx$1));
+				set.value(ctx, evt.value);
+				set.inputValue(ctx, getInputValue(ctx));
 			},
-			clearItem(ctx$1, evt) {
+			clearItem(ctx, evt) {
 				if (evt.value == null) return;
-				const value = ctx$1.value.filter((v) => v !== evt.value);
-				set.value(ctx$1, value);
-				set.inputValue(ctx$1, getInputValue(ctx$1));
+				const value = ctx.value.filter((v) => v !== evt.value);
+				set.value(ctx, value);
+				set.inputValue(ctx, getInputValue(ctx));
 			},
-			setInitialFocus(ctx$1) {
+			setInitialFocus(ctx) {
 				raf(() => {
-					dom.focusInputEl(ctx$1);
+					dom.focusInputEl(ctx);
 				});
 			},
-			setFinalFocus(ctx$1) {
+			setFinalFocus(ctx) {
 				raf(() => {
-					if (dom.getTriggerEl(ctx$1)?.dataset.focusable == null) dom.focusInputEl(ctx$1);
-					else dom.focusTriggerEl(ctx$1);
+					if (dom.getTriggerEl(ctx)?.dataset.focusable == null) dom.focusInputEl(ctx);
+					else dom.focusTriggerEl(ctx);
 				});
 			},
-			syncInputValue(ctx$1) {
-				const inputEl = dom.getInputEl(ctx$1);
+			syncInputValue(ctx) {
+				const inputEl = dom.getInputEl(ctx);
 				if (!inputEl) return;
-				inputEl.value = ctx$1.inputValue;
+				inputEl.value = ctx.inputValue;
 				queueMicrotask(() => {
 					const { selectionStart, selectionEnd } = inputEl;
 					if (Math.abs((selectionEnd ?? 0) - (selectionStart ?? 0)) !== 0) return;
@@ -1286,146 +1283,145 @@ function machine(userContext) {
 					inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
 				});
 			},
-			setInputValue(ctx$1, evt) {
-				set.inputValue(ctx$1, evt.value);
+			setInputValue(ctx, evt) {
+				set.inputValue(ctx, evt.value);
 			},
-			clearInputValue(ctx$1) {
-				set.inputValue(ctx$1, "");
+			clearInputValue(ctx) {
+				set.inputValue(ctx, "");
 			},
-			revertInputValue(ctx$1) {
-				const inputValue = match(ctx$1.selectionBehavior, {
-					replace: ctx$1.hasSelectedItems ? ctx$1.valueAsString : "",
-					preserve: ctx$1.inputValue,
+			revertInputValue(ctx) {
+				const inputValue = match(ctx.selectionBehavior, {
+					replace: ctx.hasSelectedItems ? ctx.valueAsString : "",
+					preserve: ctx.inputValue,
 					clear: ""
 				});
-				set.inputValue(ctx$1, inputValue);
+				set.inputValue(ctx, inputValue);
 			},
-			syncInitialValues(ctx$1) {
-				const selectedItems = ctx$1.collection.findMany(ctx$1.value);
-				const valueAsString = ctx$1.collection.stringifyMany(ctx$1.value);
-				ctx$1.highlightedItem = ctx$1.collection.find(ctx$1.highlightedValue);
-				ctx$1.selectedItems = selectedItems;
-				ctx$1.valueAsString = valueAsString;
-				if (ctx$1.inputValue.trim() || ctx$1.multiple) return;
-				ctx$1.inputValue = match(ctx$1.selectionBehavior, {
-					preserve: ctx$1.inputValue || valueAsString,
+			syncInitialValues(ctx) {
+				const selectedItems = ctx.collection.findMany(ctx.value);
+				const valueAsString = ctx.collection.stringifyMany(ctx.value);
+				ctx.highlightedItem = ctx.collection.find(ctx.highlightedValue);
+				ctx.selectedItems = selectedItems;
+				ctx.valueAsString = valueAsString;
+				if (isControlled(ctx, "inputValue") || ctx.inputValue.trim() || ctx.multiple) return;
+				ctx.inputValue = match(ctx.selectionBehavior, {
+					preserve: ctx.inputValue || valueAsString,
 					replace: valueAsString,
 					clear: ""
 				});
 			},
-			syncSelectionBehavior(ctx$1) {
-				if (ctx$1.multiple) ctx$1.selectionBehavior = "clear";
+			syncSelectionBehavior(ctx) {
+				if (ctx.multiple) ctx.selectionBehavior = "clear";
 			},
-			setSelectedItems(ctx$1, evt) {
+			setSelectedItems(ctx, evt) {
 				if (!isArray(evt.value)) return;
-				set.value(ctx$1, evt.value);
-				set.inputValue(ctx$1, getInputValue(ctx$1));
+				set.value(ctx, evt.value);
+				set.inputValue(ctx, getInputValue(ctx));
 			},
-			clearSelectedItems(ctx$1) {
-				set.value(ctx$1, []);
-				set.inputValue(ctx$1, getInputValue(ctx$1));
+			clearSelectedItems(ctx) {
+				set.value(ctx, []);
+				set.inputValue(ctx, getInputValue(ctx));
 			},
-			scrollContentToTop(ctx$1) {
-				if (ctx$1.scrollToIndexFn) ctx$1.scrollToIndexFn({
+			scrollContentToTop(ctx) {
+				if (ctx.scrollToIndexFn) ctx.scrollToIndexFn({
 					index: 0,
 					immediate: true
 				});
 				else {
-					const contentEl = dom.getContentEl(ctx$1);
+					const contentEl = dom.getContentEl(ctx);
 					if (!contentEl) return;
 					contentEl.scrollTop = 0;
 				}
 			},
-			invokeOnOpen(ctx$1) {
-				ctx$1.onOpenChange?.({ open: true });
+			invokeOnOpen(ctx) {
+				ctx.onOpenChange?.({ open: true });
 			},
-			invokeOnClose(ctx$1) {
-				ctx$1.onOpenChange?.({ open: false });
+			invokeOnClose(ctx) {
+				ctx.onOpenChange?.({ open: false });
 			},
-			highlightFirstItem(ctx$1) {
+			highlightFirstItem(ctx) {
 				raf(() => {
-					const value = ctx$1.collection.firstValue;
-					set.highlightedValue(ctx$1, value, true);
+					const value = ctx.collection.firstValue;
+					set.highlightedValue(ctx, value, true);
 				});
 			},
-			highlightFirstItemIfNeeded(ctx$1) {
-				if (!ctx$1.autoHighlight) return;
+			highlightFirstItemIfNeeded(ctx) {
+				if (!ctx.autoHighlight) return;
 				raf(() => {
-					const value = ctx$1.collection.firstValue;
-					set.highlightedValue(ctx$1, value);
+					const value = ctx.collection.firstValue;
+					set.highlightedValue(ctx, value);
 				});
 			},
-			highlightLastItem(ctx$1) {
+			highlightLastItem(ctx) {
 				raf(() => {
-					const value = ctx$1.collection.lastValue;
-					set.highlightedValue(ctx$1, value);
+					const value = ctx.collection.lastValue;
+					set.highlightedValue(ctx, value);
 				});
 			},
-			highlightNextItem(ctx$1) {
+			highlightNextItem(ctx) {
 				let value = null;
-				if (ctx$1.highlightedValue) {
-					value = ctx$1.collection.getNextValue(ctx$1.highlightedValue);
-					if (!value && ctx$1.loopFocus) value = ctx$1.collection.firstValue;
-				} else value = ctx$1.collection.firstValue;
-				set.highlightedValue(ctx$1, value);
+				if (ctx.highlightedValue) {
+					value = ctx.collection.getNextValue(ctx.highlightedValue);
+					if (!value && ctx.loopFocus) value = ctx.collection.firstValue;
+				} else value = ctx.collection.firstValue;
+				set.highlightedValue(ctx, value);
 			},
-			highlightPrevItem(ctx$1) {
+			highlightPrevItem(ctx) {
 				let value = null;
-				if (ctx$1.highlightedValue) {
-					value = ctx$1.collection.getPreviousValue(ctx$1.highlightedValue);
-					if (!value && ctx$1.loopFocus) value = ctx$1.collection.lastValue;
-				} else value = ctx$1.collection.lastValue;
-				set.highlightedValue(ctx$1, value);
+				if (ctx.highlightedValue) {
+					value = ctx.collection.getPreviousValue(ctx.highlightedValue);
+					if (!value && ctx.loopFocus) value = ctx.collection.lastValue;
+				} else value = ctx.collection.lastValue;
+				set.highlightedValue(ctx, value);
 			},
-			highlightFirstSelectedItem(ctx$1) {
+			highlightFirstSelectedItem(ctx) {
 				raf(() => {
-					const [value] = ctx$1.collection.sort(ctx$1.value);
-					set.highlightedValue(ctx$1, value);
+					const [value] = ctx.collection.sort(ctx.value);
+					set.highlightedValue(ctx, value);
 				});
 			},
-			highlightFirstOrSelectedItem(ctx$1) {
+			highlightFirstOrSelectedItem(ctx) {
 				raf(() => {
 					let value = null;
-					if (ctx$1.hasSelectedItems) value = ctx$1.collection.sort(ctx$1.value)[0];
-					else value = ctx$1.collection.firstValue;
-					set.highlightedValue(ctx$1, value);
+					if (ctx.hasSelectedItems) value = ctx.collection.sort(ctx.value)[0];
+					else value = ctx.collection.firstValue;
+					set.highlightedValue(ctx, value);
 				});
 			},
-			highlightLastOrSelectedItem(ctx$1) {
+			highlightLastOrSelectedItem(ctx) {
 				raf(() => {
 					let value = null;
-					if (ctx$1.hasSelectedItems) value = ctx$1.collection.sort(ctx$1.value)[0];
-					else value = ctx$1.collection.lastValue;
-					set.highlightedValue(ctx$1, value);
+					if (ctx.hasSelectedItems) value = ctx.collection.sort(ctx.value)[0];
+					else value = ctx.collection.lastValue;
+					set.highlightedValue(ctx, value);
 				});
 			},
-			autofillInputValue(ctx$1, evt) {
-				const inputEl = dom.getInputEl(ctx$1);
-				if (!ctx$1.autoComplete || !inputEl || !evt.keypress) return;
-				const valueText = ctx$1.collection.stringify(ctx$1.highlightedValue);
+			autofillInputValue(ctx, evt) {
+				const inputEl = dom.getInputEl(ctx);
+				if (!ctx.autoComplete || !inputEl || !evt.keypress) return;
+				const valueText = ctx.collection.stringify(ctx.highlightedValue);
 				raf(() => {
-					inputEl.value = valueText || ctx$1.inputValue;
+					inputEl.value = valueText || ctx.inputValue;
 				});
 			},
-			setCollection(ctx$1, evt) {
-				ctx$1.collection = evt.value;
+			setCollection(ctx, evt) {
+				ctx.collection = evt.value;
 			},
-			syncSelectedItems(ctx$1) {
-				sync.valueChange(ctx$1);
-				set.inputValue(ctx$1, getInputValue(ctx$1));
+			syncSelectedItems(ctx) {
+				sync.valueChange(ctx);
+				set.inputValue(ctx, getInputValue(ctx));
 			},
-			syncHighlightedItem(ctx$1) {
-				sync.highlightChange(ctx$1);
+			syncHighlightedItem(ctx) {
+				sync.highlightChange(ctx);
 			},
-			toggleVisibility(ctx$1, evt, { send }) {
+			toggleVisibility(ctx, evt, { send }) {
 				send({
-					type: ctx$1.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					type: ctx.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
 					previousEvent: evt
 				});
 			}
 		}
 	});
 }
-
 //#endregion
-export { anatomy, collection, connect, machine };
+export { anatomy, collection, connect, machine };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/combobox",
   "type": "module",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "autocomplete input and command palette with a list of suggestions.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,15 +22,15 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/aria-hidden": "0.2.11",
-    "@destyler/anatomy": "0.2.11",
-    "@destyler/collection": "0.2.11",
-    "@destyler/dom": "0.2.11",
-    "@destyler/dismissable": "0.2.11",
-    "@destyler/popper": "0.2.11",
-    "@destyler/utils": "0.2.11",
-    "@destyler/xstate": "0.2.11",
-    "@destyler/types": "0.2.11"
+    "@destyler/anatomy": "0.2.12",
+    "@destyler/aria-hidden": "0.2.12",
+    "@destyler/collection": "0.2.12",
+    "@destyler/dismissable": "0.2.12",
+    "@destyler/dom": "0.2.12",
+    "@destyler/popper": "0.2.12",
+    "@destyler/types": "0.2.12",
+    "@destyler/utils": "0.2.12",
+    "@destyler/xstate": "0.2.12"
   },
   "publishConfig": {
     "access": "public"