@destyler/dynamic 0.2.10 → 0.2.12

package/dist/index.d.mts

@@ -1,12 +1,9 @@
-import * as _destyler_anatomy0 from "@destyler/anatomy";
 import { FocusOutsideEvent, InteractOutsideEvent, InteractOutsideHandlers, PointerDownOutsideEvent } from "@destyler/interact-outside";
 import { LiveRegion } from "@destyler/live-region";
-import * as _destyler_xstate0 from "@destyler/xstate";
 import { AnyEventObject, XSend, XState } from "@destyler/xstate";
 import { CommonProperties, DirectionProperty, NormalizeProps, PropTypes, RequiredBy } from "@destyler/types";
-
 //#region src/anatomy.d.ts
-declare const anatomy: _destyler_anatomy0.AnatomyInstance<"root" | "label" | "control" | "input" | "clearTrigger" | "item" | "itemPreview" | "itemInput" | "itemText" | "itemDeleteTrigger">;
+export declare const anatomy: import("@destyler/anatomy").AnatomyInstance<"root" | "label" | "control" | "input" | "clearTrigger" | "item" | "itemPreview" | "itemInput" | "itemText" | "itemDeleteTrigger">;
 //#endregion
 //#region src/types.d.ts
 interface ValueChangeDetails {
@@ -345,15 +342,15 @@ interface MachineApi<T extends PropTypes = PropTypes> {
 }
 //#endregion
 //#region src/connect.d.ts
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 //#endregion
 //#region src/machine.d.ts
-declare function machine(userContext: UserDefinedContext): _destyler_xstate0.Machine<MachineContext, MachineState, _destyler_xstate0.AnyEventObject>;
+export declare function machine(userContext: UserDefinedContext): import("@destyler/xstate").Machine<MachineContext, MachineState, import("@destyler/xstate").AnyEventObject>;
 //#endregion
 //#region src/props.d.ts
-declare const props: ("id" | "ids" | "translations" | "maxLength" | "delimiter" | "autoFocus" | "disabled" | "readOnly" | "invalid" | "required" | "editable" | "inputValue" | "value" | "onValueChange" | "onInputValueChange" | "onHighlightChange" | "onValueInvalid" | "validate" | "blurBehavior" | "addOnPaste" | "max" | "allowOverflow" | "name" | "form" | "dir" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "id" | "ids" | "translations" | "maxLength" | "delimiter" | "autoFocus" | "disabled" | "readOnly" | "invalid" | "required" | "editable" | "inputValue" | "value" | "onValueChange" | "onInputValueChange" | "onHighlightChange" | "onValueInvalid" | "validate" | "blurBehavior" | "addOnPaste" | "max" | "allowOverflow" | "name" | "form" | "dir" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
-declare const itemProps: (keyof ItemProps)[];
-declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
+export declare const props: ("id" | "ids" | "translations" | "maxLength" | "delimiter" | "autoFocus" | "disabled" | "readOnly" | "invalid" | "required" | "editable" | "inputValue" | "value" | "onValueChange" | "onInputValueChange" | "onHighlightChange" | "onValueInvalid" | "validate" | "blurBehavior" | "addOnPaste" | "max" | "allowOverflow" | "name" | "form" | "dir" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside")[];
+export declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "id" | "ids" | "translations" | "maxLength" | "delimiter" | "autoFocus" | "disabled" | "readOnly" | "invalid" | "required" | "editable" | "inputValue" | "value" | "onValueChange" | "onInputValueChange" | "onHighlightChange" | "onValueInvalid" | "validate" | "blurBehavior" | "addOnPaste" | "max" | "allowOverflow" | "name" | "form" | "dir" | "getRootNode" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside">];
+export declare const itemProps: (keyof ItemProps)[];
+export declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
 //#endregion
-export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type FocusOutsideEvent, type HighlightChangeDetails, type InputValueChangeDetails, type InteractOutsideEvent, type IntlTranslations, type ItemProps, type ItemState, type PointerDownOutsideEvent, type ValidateArgs, type ValidityChangeDetails, type ValueChangeDetails, anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
+export type { MachineApi as Api, UserDefinedContext as Context, ElementIds, FocusOutsideEvent, HighlightChangeDetails, InputValueChangeDetails, InteractOutsideEvent, IntlTranslations, ItemProps, ItemState, PointerDownOutsideEvent, ValidateArgs, ValidityChangeDetails, ValueChangeDetails };

package/dist/index.mjs

@@ -6,11 +6,9 @@ import { createLiveRegion } from "@destyler/live-region";
 import { compact, createSplitProps, isEqual, removeAt, uniq } from "@destyler/utils";
 import { createMachine, guards } from "@destyler/xstate";
 import { createProps } from "@destyler/types";
-
 //#region src/anatomy.ts
 const anatomy = createAnatomy("dynamic").parts("root", "label", "control", "input", "clearTrigger", "item", "itemPreview", "itemInput", "itemText", "itemDeleteTrigger");
 const parts = anatomy.build();
-
 //#endregion
 //#region src/dom.ts
 const dom = createScope({
@@ -57,7 +55,6 @@ const dom = createScope({
 		dispatchInputValueEvent(inputEl, { value: ctx.valueAsString });
 	}
 });
-
 //#endregion
 //#region src/connect.ts
 function connect(state, send, normalize) {
@@ -217,13 +214,13 @@ function connect(state, send, normalize) {
 							if (isCombobox && isExpanded) return;
 							send("ARROW_LEFT");
 						},
-						ArrowRight(event$1) {
-							if (state.context.highlightedTagId) event$1.preventDefault();
+						ArrowRight(event) {
+							if (state.context.highlightedTagId) event.preventDefault();
 							if (isCombobox && isExpanded) return;
 							send("ARROW_RIGHT");
 						},
-						Escape(event$1) {
-							event$1.preventDefault();
+						Escape(event) {
+							event.preventDefault();
 							send("ESCAPE");
 						},
 						Backspace() {
@@ -232,10 +229,10 @@ function connect(state, send, normalize) {
 						Delete() {
 							send("DELETE");
 						},
-						Enter(event$1) {
+						Enter(event) {
 							if (isCombobox && isExpanded) return;
 							send("ENTER");
-							event$1.preventDefault();
+							event.preventDefault();
 						}
 					}[getEventKey(event, state.context)];
 					if (exec) exec(event);
@@ -255,22 +252,22 @@ function connect(state, send, normalize) {
 				defaultValue: state.context.valueAsString
 			});
 		},
-		getItemProps(props$1) {
+		getItemProps(props) {
 			return normalize.element({
 				...parts.item.attrs,
 				"dir": state.context.dir,
-				"data-value": props$1.value,
+				"data-value": props.value,
 				"data-disabled": dataAttr(disabled)
 			});
 		},
-		getItemPreviewProps(props$1) {
-			const itemState = getItemState(props$1);
+		getItemPreviewProps(props) {
+			const itemState = getItemState(props);
 			return normalize.element({
 				...parts.itemPreview.attrs,
 				"id": itemState.id,
 				"dir": state.context.dir,
 				"hidden": itemState.editing,
-				"data-value": props$1.value,
+				"data-value": props.value,
 				"data-disabled": dataAttr(disabled),
 				"data-highlighted": dataAttr(itemState.highlighted),
 				onPointerDown(event) {
@@ -290,8 +287,8 @@ function connect(state, send, normalize) {
 				}
 			});
 		},
-		getItemTextProps(props$1) {
-			const itemState = getItemState(props$1);
+		getItemTextProps(props) {
+			const itemState = getItemState(props);
 			return normalize.element({
 				...parts.itemText.attrs,
 				"dir": state.context.dir,
@@ -299,15 +296,15 @@ function connect(state, send, normalize) {
 				"data-highlighted": dataAttr(itemState.highlighted)
 			});
 		},
-		getItemInputProps(props$1) {
-			const itemState = getItemState(props$1);
+		getItemInputProps(props) {
+			const itemState = getItemState(props);
 			return normalize.input({
 				...parts.itemInput.attrs,
 				"dir": state.context.dir,
-				"aria-label": translations.tagEdited(props$1.value),
+				"aria-label": translations.tagEdited(props.value),
 				"aria-hidden": true,
 				"disabled": disabled,
-				"id": dom.getItemInputId(state.context, props$1),
+				"id": dom.getItemInputId(state.context, props),
 				"tabIndex": -1,
 				"hidden": !itemState.editing,
 				"defaultValue": itemState.editing ? state.context.editedTagValue : "",
@@ -320,7 +317,7 @@ function connect(state, send, normalize) {
 				onBlur(event) {
 					send({
 						type: "TAG_INPUT_BLUR",
-						target: event.relatedTarget,
+						relatedTarget: event.relatedTarget,
 						id: itemState.id
 					});
 				},
@@ -342,15 +339,15 @@ function connect(state, send, normalize) {
 				}
 			});
 		},
-		getItemDeleteTriggerProps(props$1) {
-			const id = dom.getItemId(state.context, props$1);
+		getItemDeleteTriggerProps(props) {
+			const id = dom.getItemId(state.context, props);
 			return normalize.button({
 				...parts.itemDeleteTrigger.attrs,
 				"dir": state.context.dir,
-				"id": dom.getItemDeleteTriggerId(state.context, props$1),
+				"id": dom.getItemDeleteTriggerId(state.context, props),
 				"type": "button",
 				"disabled": disabled,
-				"aria-label": translations.deleteTagTriggerLabel(props$1.value),
+				"aria-label": translations.deleteTagTriggerLabel(props.value),
 				"tabIndex": -1,
 				onPointerDown(event) {
 					if (!interactive) event.preventDefault();
@@ -393,9 +390,8 @@ function connect(state, send, normalize) {
 function endsWith(str, del) {
 	if (!del) return false;
 	if (typeof del === "string") return str.endsWith(del);
-	return (/* @__PURE__ */ new RegExp(`${del.source}$`)).test(str);
+	return new RegExp(`${del.source}$`).test(str);
 }
-
 //#endregion
 //#region src/machine.ts
 const { and, not, or } = guards;
@@ -474,13 +470,13 @@ function machine(userContext) {
 			}
 		},
 		computed: {
-			count: (ctx$1) => ctx$1.value.length,
-			valueAsString: (ctx$1) => JSON.stringify(ctx$1.value),
-			trimmedInputValue: (ctx$1) => ctx$1.inputValue.trim(),
-			isDisabled: (ctx$1) => !!ctx$1.disabled || ctx$1.fieldsetDisabled,
-			isInteractive: (ctx$1) => !(ctx$1.readOnly || ctx$1.isDisabled),
-			isAtMax: (ctx$1) => ctx$1.count === ctx$1.max,
-			isOverflowing: (ctx$1) => ctx$1.count > ctx$1.max
+			count: (ctx) => ctx.value.length,
+			valueAsString: (ctx) => JSON.stringify(ctx.value),
+			trimmedInputValue: (ctx) => ctx.inputValue.trim(),
+			isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,
+			isInteractive: (ctx) => !(ctx.readOnly || ctx.isDisabled),
+			isAtMax: (ctx) => ctx.count === ctx.max,
+			isOverflowing: (ctx) => ctx.count > ctx.max
 		},
 		watch: {
 			highlightedTagId: "logHighlightedTag",
@@ -686,33 +682,33 @@ function machine(userContext) {
 		}
 	}, {
 		guards: {
-			isInputRelatedTarget: (ctx$1, evt) => evt.relatedTarget === dom.getInputEl(ctx$1),
-			isAtMax: (ctx$1) => ctx$1.isAtMax,
-			hasHighlightedTag: (ctx$1) => ctx$1.highlightedTagId !== null,
-			isFirstTagHighlighted: (ctx$1) => {
-				return dom.getItemId(ctx$1, {
-					value: ctx$1.value[0],
+			isInputRelatedTarget: (ctx, evt) => evt.relatedTarget != null && evt.relatedTarget === dom.getInputEl(ctx),
+			isAtMax: (ctx) => ctx.isAtMax,
+			hasHighlightedTag: (ctx) => ctx.highlightedTagId !== null,
+			isFirstTagHighlighted: (ctx) => {
+				return dom.getItemId(ctx, {
+					value: ctx.value[0],
 					index: 0
-				}) === ctx$1.highlightedTagId;
+				}) === ctx.highlightedTagId;
 			},
-			isEditedTagEmpty: (ctx$1) => ctx$1.editedTagValue.trim() === "",
-			isLastTagHighlighted: (ctx$1) => {
-				const lastIndex = ctx$1.value.length - 1;
-				return dom.getItemId(ctx$1, {
-					value: ctx$1.value[lastIndex],
+			isEditedTagEmpty: (ctx) => ctx.editedTagValue.trim() === "",
+			isLastTagHighlighted: (ctx) => {
+				const lastIndex = ctx.value.length - 1;
+				return dom.getItemId(ctx, {
+					value: ctx.value[lastIndex],
 					index: lastIndex
-				}) === ctx$1.highlightedTagId;
+				}) === ctx.highlightedTagId;
 			},
-			isInputValueEmpty: (ctx$1) => ctx$1.trimmedInputValue.length === 0,
-			hasTags: (ctx$1) => ctx$1.value.length > 0,
-			allowOverflow: (ctx$1) => !!ctx$1.allowOverflow,
-			autoFocus: (ctx$1) => !!ctx$1.autoFocus,
-			addOnBlur: (ctx$1) => ctx$1.blurBehavior === "add",
-			clearOnBlur: (ctx$1) => ctx$1.blurBehavior === "clear",
-			addOnPaste: (ctx$1) => !!ctx$1.addOnPaste,
-			isTagEditable: (ctx$1) => !!ctx$1.editable,
-			isInputCaretAtStart(ctx$1) {
-				const input = dom.getInputEl(ctx$1);
+			isInputValueEmpty: (ctx) => ctx.trimmedInputValue.length === 0,
+			hasTags: (ctx) => ctx.value.length > 0,
+			allowOverflow: (ctx) => !!ctx.allowOverflow,
+			autoFocus: (ctx) => !!ctx.autoFocus,
+			addOnBlur: (ctx) => ctx.blurBehavior === "add",
+			clearOnBlur: (ctx) => ctx.blurBehavior === "clear",
+			addOnPaste: (ctx) => !!ctx.addOnPaste,
+			isTagEditable: (ctx) => !!ctx.editable,
+			isInputCaretAtStart(ctx) {
+				const input = dom.getInputEl(ctx);
 				if (!input) return false;
 				try {
 					return input.selectionStart === 0 && input.selectionEnd === 0;
@@ -722,15 +718,15 @@ function machine(userContext) {
 			}
 		},
 		activities: {
-			trackInteractOutside(ctx$1, _evt, { send }) {
-				return trackInteractOutside(dom.getInputEl(ctx$1), {
+			trackInteractOutside(ctx, _evt, { send }) {
+				return trackInteractOutside(dom.getInputEl(ctx), {
 					exclude(target) {
-						return contains(dom.getRootEl(ctx$1), target);
+						return contains(dom.getRootEl(ctx), target);
 					},
-					onFocusOutside: ctx$1.onFocusOutside,
-					onPointerDownOutside: ctx$1.onPointerDownOutside,
+					onFocusOutside: ctx.onFocusOutside,
+					onPointerDownOutside: ctx.onPointerDownOutside,
 					onInteractOutside(event) {
-						ctx$1.onInteractOutside?.(event);
+						ctx.onInteractOutside?.(event);
 						if (event.defaultPrevented) return;
 						send({
 							type: "BLUR",
@@ -739,10 +735,10 @@ function machine(userContext) {
 					}
 				});
 			},
-			trackFormControlState(ctx$1, _evt, { send, initialContext }) {
-				return trackFormControl(dom.getHiddenInputEl(ctx$1), {
+			trackFormControlState(ctx, _evt, { send, initialContext }) {
+				return trackFormControl(dom.getHiddenInputEl(ctx), {
 					onFieldsetDisabledChange(disabled) {
-						ctx$1.fieldsetDisabled = disabled;
+						ctx.fieldsetDisabled = disabled;
 					},
 					onFormReset() {
 						send({
@@ -753,19 +749,20 @@ function machine(userContext) {
 					}
 				});
 			},
-			autoResize(ctx$1) {
-				if (!ctx$1.editedTagValue || ctx$1.idx == null || !ctx$1.editable) return;
-				return autoResizeInput(dom.getTagInputEl(ctx$1, {
-					value: ctx$1.editedTagValue,
-					index: ctx$1.idx
-				}));
+			autoResize(ctx) {
+				if (!ctx.editedTagValue || ctx.idx == null || !ctx.editable) return;
+				const input = dom.getTagInputEl(ctx, {
+					value: ctx.editedTagValue,
+					index: ctx.idx
+				});
+				return autoResizeInput(input);
 			},
-			trackLiveRegion(ctx$1) {
-				ctx$1.liveRegion = createLiveRegion({
+			trackLiveRegion(ctx) {
+				ctx.liveRegion = createLiveRegion({
 					level: "assertive",
-					document: dom.getDoc(ctx$1)
+					document: dom.getDoc(ctx)
 				});
-				return () => ctx$1.liveRegion?.destroy();
+				return () => ctx.liveRegion?.destroy();
 			}
 		},
 		actions: {
@@ -778,223 +775,220 @@ function machine(userContext) {
 					id: evt.id
 				});
 			},
-			dispatchChangeEvent(ctx$1) {
-				dom.dispatchInputEvent(ctx$1);
+			dispatchChangeEvent(ctx) {
+				dom.dispatchInputEvent(ctx);
 			},
-			highlightNextTag(ctx$1) {
-				if (ctx$1.highlightedTagId == null) return;
-				const next = dom.getNextEl(ctx$1, ctx$1.highlightedTagId);
-				set.highlightedId(ctx$1, next?.id ?? null);
+			highlightNextTag(ctx) {
+				if (ctx.highlightedTagId == null) return;
+				const next = dom.getNextEl(ctx, ctx.highlightedTagId);
+				set.highlightedId(ctx, next?.id ?? null);
 			},
-			highlightFirstTag(ctx$1) {
+			highlightFirstTag(ctx) {
 				raf(() => {
-					const first = dom.getFirstEl(ctx$1);
-					set.highlightedId(ctx$1, first?.id ?? null);
+					const first = dom.getFirstEl(ctx);
+					set.highlightedId(ctx, first?.id ?? null);
 				});
 			},
-			highlightLastTag(ctx$1) {
-				const last = dom.getLastEl(ctx$1);
-				set.highlightedId(ctx$1, last?.id ?? null);
+			highlightLastTag(ctx) {
+				const last = dom.getLastEl(ctx);
+				set.highlightedId(ctx, last?.id ?? null);
 			},
-			highlightPrevTag(ctx$1) {
-				if (ctx$1.highlightedTagId == null) return;
-				const prev = dom.getPrevEl(ctx$1, ctx$1.highlightedTagId);
-				set.highlightedId(ctx$1, prev?.id ?? null);
+			highlightPrevTag(ctx) {
+				if (ctx.highlightedTagId == null) return;
+				const prev = dom.getPrevEl(ctx, ctx.highlightedTagId);
+				set.highlightedId(ctx, prev?.id ?? null);
 			},
-			highlightTag(ctx$1, evt) {
-				set.highlightedId(ctx$1, evt.id);
+			highlightTag(ctx, evt) {
+				set.highlightedId(ctx, evt.id);
 			},
-			highlightTagAtIndex(ctx$1) {
+			highlightTagAtIndex(ctx) {
 				raf(() => {
-					if (ctx$1.idx == null) return;
-					const tagEl = dom.getTagElAtIndex(ctx$1, ctx$1.idx);
+					if (ctx.idx == null) return;
+					const tagEl = dom.getTagElAtIndex(ctx, ctx.idx);
 					if (tagEl == null) return;
-					set.highlightedId(ctx$1, tagEl.id);
-					ctx$1.idx = void 0;
+					set.highlightedId(ctx, tagEl.id);
+					ctx.idx = void 0;
 				});
 			},
-			deleteTag(ctx$1, evt) {
-				const index = dom.getIndexOfId(ctx$1, evt.id);
-				const value = ctx$1.value[index];
-				ctx$1.log.prev = ctx$1.log.current;
-				ctx$1.log.current = {
+			deleteTag(ctx, evt) {
+				const index = dom.getIndexOfId(ctx, evt.id);
+				const value = ctx.value[index];
+				ctx.log.prev = ctx.log.current;
+				ctx.log.current = {
 					type: "delete",
 					value
 				};
-				set.value(ctx$1, removeAt(ctx$1.value, index));
+				set.value(ctx, removeAt(ctx.value, index));
 			},
-			deleteHighlightedTag(ctx$1) {
-				if (ctx$1.highlightedTagId == null) return;
-				const index = dom.getIndexOfId(ctx$1, ctx$1.highlightedTagId);
-				ctx$1.idx = index;
-				const value = ctx$1.value[index];
-				ctx$1.log.prev = ctx$1.log.current;
-				ctx$1.log.current = {
+			deleteHighlightedTag(ctx) {
+				if (ctx.highlightedTagId == null) return;
+				const index = dom.getIndexOfId(ctx, ctx.highlightedTagId);
+				ctx.idx = index;
+				const value = ctx.value[index];
+				ctx.log.prev = ctx.log.current;
+				ctx.log.current = {
 					type: "delete",
 					value
 				};
-				set.value(ctx$1, removeAt(ctx$1.value, index));
+				set.value(ctx, removeAt(ctx.value, index));
 			},
-			setEditedId(ctx$1, evt) {
-				ctx$1.editedTagId = evt.id ?? ctx$1.highlightedTagId;
-				ctx$1.idx = dom.getIndexOfId(ctx$1, ctx$1.editedTagId);
+			setEditedId(ctx, evt) {
+				ctx.editedTagId = evt.id ?? ctx.highlightedTagId;
+				ctx.idx = dom.getIndexOfId(ctx, ctx.editedTagId);
 			},
-			clearEditedId(ctx$1) {
-				ctx$1.editedTagId = null;
+			clearEditedId(ctx) {
+				ctx.editedTagId = null;
 			},
-			clearEditedTagValue(ctx$1) {
-				ctx$1.editedTagValue = "";
+			clearEditedTagValue(ctx) {
+				ctx.editedTagValue = "";
 			},
-			setEditedTagValue(ctx$1, evt) {
-				ctx$1.editedTagValue = evt.value;
+			setEditedTagValue(ctx, evt) {
+				ctx.editedTagValue = evt.value;
 			},
-			submitEditedTagValue(ctx$1) {
-				if (!ctx$1.editedTagId) return;
-				const index = dom.getIndexOfId(ctx$1, ctx$1.editedTagId);
-				set.valueAtIndex(ctx$1, index, ctx$1.editedTagValue ?? "");
-				ctx$1.log.prev = ctx$1.log.current;
-				ctx$1.log.current = {
+			submitEditedTagValue(ctx) {
+				if (!ctx.editedTagId) return;
+				const index = dom.getIndexOfId(ctx, ctx.editedTagId);
+				set.valueAtIndex(ctx, index, ctx.editedTagValue ?? "");
+				ctx.log.prev = ctx.log.current;
+				ctx.log.current = {
 					type: "update",
-					value: ctx$1.editedTagValue
+					value: ctx.editedTagValue
 				};
 			},
-			setValueAtIndex(ctx$1, evt) {
+			setValueAtIndex(ctx, evt) {
 				if (evt.value) {
-					ctx$1.value[evt.index] = evt.value;
-					ctx$1.log.prev = ctx$1.log.current;
-					ctx$1.log.current = {
+					set.valueAtIndex(ctx, evt.index, evt.value);
+					ctx.log.prev = ctx.log.current;
+					ctx.log.current = {
 						type: "update",
 						value: evt.value
 					};
 				} else throw new Error("You need to provide a value for the tag");
 			},
-			initializeEditedTagValue(ctx$1) {
-				if (!ctx$1.editedTagId) return;
-				const index = dom.getIndexOfId(ctx$1, ctx$1.editedTagId);
-				ctx$1.editedTagValue = ctx$1.value[index];
+			initializeEditedTagValue(ctx) {
+				if (!ctx.editedTagId) return;
+				const index = dom.getIndexOfId(ctx, ctx.editedTagId);
+				ctx.editedTagValue = ctx.value[index];
 			},
-			focusEditedTagInput(ctx$1) {
+			focusEditedTagInput(ctx) {
 				raf(() => {
-					dom.getEditInputEl(ctx$1)?.select();
+					dom.getEditInputEl(ctx)?.select();
 				});
 			},
-			setInputValue(ctx$1, evt) {
-				set.inputValue(ctx$1, evt.value);
+			setInputValue(ctx, evt) {
+				set.inputValue(ctx, evt.value);
 			},
-			clearHighlightedId(ctx$1) {
-				ctx$1.highlightedTagId = null;
+			clearHighlightedId(ctx) {
+				ctx.highlightedTagId = null;
 			},
-			focusInput(ctx$1) {
+			focusInput(ctx) {
 				raf(() => {
-					dom.getInputEl(ctx$1)?.focus();
+					dom.getInputEl(ctx)?.focus();
 				});
 			},
-			clearInputValue(ctx$1) {
+			clearInputValue(ctx) {
 				raf(() => {
-					set.inputValue(ctx$1, "");
+					set.inputValue(ctx, "");
 				});
 			},
-			syncInputValue(ctx$1) {
-				const inputEl = dom.getInputEl(ctx$1);
-				dom.setValue(inputEl, ctx$1.inputValue);
+			syncInputValue(ctx) {
+				const inputEl = dom.getInputEl(ctx);
+				dom.setValue(inputEl, ctx.inputValue);
 			},
-			syncEditedTagInputValue(ctx$1, evt) {
-				const id = ctx$1.editedTagId || ctx$1.highlightedTagId || evt.id;
+			syncEditedTagInputValue(ctx, evt) {
+				const id = ctx.editedTagId || ctx.highlightedTagId || evt.id;
 				if (id == null) return;
-				const editTagInputEl = dom.getById(ctx$1, `${id}:input`);
-				dom.setValue(editTagInputEl, ctx$1.editedTagValue);
+				const editTagInputEl = dom.getById(ctx, `${id}:input`);
+				dom.setValue(editTagInputEl, ctx.editedTagValue);
 			},
-			addTag(ctx$1, evt) {
-				const value = evt.value ?? ctx$1.trimmedInputValue;
-				if (ctx$1.validate?.({
+			addTag(ctx, evt) {
+				const value = evt.value ?? ctx.trimmedInputValue;
+				if (ctx.validate?.({
 					inputValue: value,
-					value: Array.from(ctx$1.value)
+					value: Array.from(ctx.value)
 				})) {
-					const nextValue = uniq(ctx$1.value.concat(value));
-					set.value(ctx$1, nextValue);
-					ctx$1.log.prev = ctx$1.log.current;
-					ctx$1.log.current = {
+					const nextValue = uniq(ctx.value.concat(value));
+					set.value(ctx, nextValue);
+					ctx.log.prev = ctx.log.current;
+					ctx.log.current = {
 						type: "add",
 						value
 					};
-				} else ctx$1.onValueInvalid?.({ reason: "invalidTag" });
+				} else ctx.onValueInvalid?.({ reason: "invalidTag" });
 			},
-			addTagFromPaste(ctx$1) {
+			addTagFromPaste(ctx) {
 				raf(() => {
-					const value = ctx$1.trimmedInputValue;
-					if (ctx$1.validate?.({
+					const value = ctx.trimmedInputValue;
+					if (ctx.validate?.({
 						inputValue: value,
-						value: Array.from(ctx$1.value)
+						value: Array.from(ctx.value)
 					})) {
-						const trimmedValue = ctx$1.delimiter ? value.split(ctx$1.delimiter).map((v) => v.trim()) : [value];
-						const nextValue = uniq(ctx$1.value.concat(...trimmedValue));
-						set.value(ctx$1, nextValue);
-						ctx$1.log.prev = ctx$1.log.current;
-						ctx$1.log.current = {
+						const trimmedValue = ctx.delimiter ? value.split(ctx.delimiter).map((v) => v.trim()) : [value];
+						const nextValue = uniq(ctx.value.concat(...trimmedValue));
+						set.value(ctx, nextValue);
+						ctx.log.prev = ctx.log.current;
+						ctx.log.current = {
 							type: "paste",
 							values: trimmedValue
 						};
-					} else ctx$1.onValueInvalid?.({ reason: "invalidTag" });
-					set.inputValue(ctx$1, "");
+					} else ctx.onValueInvalid?.({ reason: "invalidTag" });
+					set.inputValue(ctx, "");
 				});
 			},
-			clearTags(ctx$1) {
-				set.value(ctx$1, []);
-				ctx$1.log.prev = ctx$1.log.current;
-				ctx$1.log.current = { type: "clear" };
+			clearTags(ctx) {
+				set.value(ctx, []);
+				ctx.log.prev = ctx.log.current;
+				ctx.log.current = { type: "clear" };
 			},
-			setValue(ctx$1, evt) {
-				set.value(ctx$1, evt.value);
+			setValue(ctx, evt) {
+				set.value(ctx, evt.value);
 			},
-			invokeOnInvalid(ctx$1) {
-				if (ctx$1.isOverflowing) ctx$1.onValueInvalid?.({ reason: "rangeOverflow" });
+			invokeOnInvalid(ctx) {
+				if (ctx.isOverflowing) ctx.onValueInvalid?.({ reason: "rangeOverflow" });
 			},
-			clearLog(ctx$1) {
-				ctx$1.log = {
+			clearLog(ctx) {
+				ctx.log = {
 					prev: null,
 					current: null
 				};
 			},
-			logHighlightedTag(ctx$1) {
-				if (ctx$1.highlightedTagId == null) return;
-				const index = dom.getIndexOfId(ctx$1, ctx$1.highlightedTagId);
-				ctx$1.log.prev = ctx$1.log.current;
-				ctx$1.log.current = {
+			logHighlightedTag(ctx) {
+				if (ctx.highlightedTagId == null) return;
+				const index = dom.getIndexOfId(ctx, ctx.highlightedTagId);
+				ctx.log.prev = ctx.log.current;
+				ctx.log.current = {
 					type: "select",
-					value: ctx$1.value[index]
+					value: ctx.value[index]
 				};
 			},
-			announceLog(ctx$1) {
-				if (!ctx$1.log.current || ctx$1.liveRegion == null) return;
-				const region = ctx$1.liveRegion;
-				const { current, prev } = ctx$1.log;
+			announceLog(ctx) {
+				if (!ctx.log.current || ctx.liveRegion == null) return;
+				const region = ctx.liveRegion;
+				const { current, prev } = ctx.log;
 				let msg;
 				switch (current.type) {
 					case "add":
-						msg = ctx$1.translations.tagAdded(current.value);
+						msg = ctx.translations.tagAdded(current.value);
 						break;
 					case "delete":
-						msg = ctx$1.translations.tagDeleted(current.value);
+						msg = ctx.translations.tagDeleted(current.value);
 						break;
 					case "update":
-						msg = ctx$1.translations.tagUpdated(current.value);
+						msg = ctx.translations.tagUpdated(current.value);
 						break;
 					case "paste":
-						msg = ctx$1.translations.tagsPasted(current.values);
+						msg = ctx.translations.tagsPasted(current.values);
 						break;
 					case "select":
-						msg = ctx$1.translations.tagSelected(current.value);
-						if (prev?.type === "delete") msg = `${ctx$1.translations.tagDeleted(prev.value)}. ${msg}`;
-						else if (prev?.type === "update") msg = `${ctx$1.translations.tagUpdated(prev.value)}. ${msg}`;
-						break;
-					default: break;
+						msg = ctx.translations.tagSelected(current.value);
+						if (prev?.type === "delete") msg = `${ctx.translations.tagDeleted(prev.value)}. ${msg}`;
+						else if (prev?.type === "update") msg = `${ctx.translations.tagUpdated(prev.value)}. ${msg}`;
 				}
 				if (msg) region.announce(msg);
 			}
 		}
 	});
 }
-
 //#endregion
 //#region src/props.ts
 const props = createProps()([
@@ -1035,6 +1029,5 @@ const itemProps = createProps()([
 	"value"
 ]);
 const splitItemProps = createSplitProps(itemProps);
-
 //#endregion
-export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@destyler/dynamic",
   "type": "module",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "inputs render tags inside an input, followed by an actual text input.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
@@ -22,14 +22,14 @@
     "dist"
   ],
   "dependencies": {
-    "@destyler/auto-resize": "0.2.10",
-    "@destyler/dom": "0.2.10",
-    "@destyler/anatomy": "0.2.10",
-    "@destyler/live-region": "0.2.10",
-    "@destyler/types": "0.2.10",
-    "@destyler/utils": "0.2.10",
-    "@destyler/xstate": "0.2.10",
-    "@destyler/interact-outside": "0.2.10"
+    "@destyler/anatomy": "0.2.12",
+    "@destyler/auto-resize": "0.2.12",
+    "@destyler/dom": "0.2.12",
+    "@destyler/interact-outside": "0.2.12",
+    "@destyler/live-region": "0.2.12",
+    "@destyler/types": "0.2.12",
+    "@destyler/utils": "0.2.12",
+    "@destyler/xstate": "0.2.12"
   },
   "publishConfig": {
     "access": "public"