@destyler/dynamic 0.0.7-beta.7 → 0.0.7-beta.9

package/dist/index.js

@@ -0,0 +1,1049 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { ariaAttr, contains, createScope, dataAttr, dispatchInputValueEvent, getEventKey, getNativeEvent, indexOfId, isComposingEvent, nextById, prevById, queryAll, raf, trackFormControl } from "@destyler/dom";
+import { autoResizeInput } from "@destyler/auto-resize";
+import { trackInteractOutside } from "@destyler/interact-outside";
+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("tagsInput").parts("root", "label", "control", "input", "clearTrigger", "item", "itemPreview", "itemInput", "itemText", "itemDeleteTrigger");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/dom.ts
+const dom = createScope({
+	getRootId: (ctx) => ctx.ids?.root ?? `dynamic:${ctx.id}`,
+	getInputId: (ctx) => ctx.ids?.input ?? `dynamic:${ctx.id}:input`,
+	getClearTriggerId: (ctx) => ctx.ids?.clearBtn ?? `dynamic:${ctx.id}:clear-btn`,
+	getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `dynamic:${ctx.id}:hidden-input`,
+	getLabelId: (ctx) => ctx.ids?.label ?? `dynamic:${ctx.id}:label`,
+	getControlId: (ctx) => ctx.ids?.control ?? `dynamic:${ctx.id}:control`,
+	getItemId: (ctx, opt) => ctx.ids?.item?.(opt) ?? `dynamic:${ctx.id}:tag:${opt.value}:${opt.index}`,
+	getItemDeleteTriggerId: (ctx, opt) => ctx.ids?.itemDeleteTrigger?.(opt) ?? `${dom.getItemId(ctx, opt)}:delete-btn`,
+	getItemInputId: (ctx, opt) => ctx.ids?.itemInput?.(opt) ?? `${dom.getItemId(ctx, opt)}:input`,
+	getEditInputId: (ctx) => `${ctx.editedTagId}:input`,
+	getTagInputEl: (ctx, opt) => dom.getById(ctx, dom.getItemInputId(ctx, opt)),
+	getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+	getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
+	getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
+	getEditInputEl: (ctx) => dom.getById(ctx, dom.getEditInputId(ctx)),
+	getTagElements: (ctx) => queryAll(dom.getRootEl(ctx), `[data-part=item-preview]:not([data-disabled])`),
+	getFirstEl: (ctx) => dom.getTagElements(ctx)[0],
+	getLastEl: (ctx) => dom.getTagElements(ctx)[dom.getTagElements(ctx).length - 1],
+	getPrevEl: (ctx, id) => prevById(dom.getTagElements(ctx), id, false),
+	getNextEl: (ctx, id) => nextById(dom.getTagElements(ctx), id, false),
+	getTagElAtIndex: (ctx, index) => dom.getTagElements(ctx)[index],
+	getIndexOfId: (ctx, id) => indexOfId(dom.getTagElements(ctx), id),
+	isInputFocused: (ctx) => dom.getDoc(ctx).activeElement === dom.getInputEl(ctx),
+	getHighlightedTagValue: (ctx) => {
+		if (!ctx.highlightedTagId) return null;
+		const tagEl = dom.getById(ctx, ctx.highlightedTagId);
+		return tagEl?.dataset.value ?? null;
+	},
+	setHoverIntent: (el) => {
+		const tagEl = el.closest("[data-part=item-preview]");
+		if (!tagEl) return;
+		tagEl.dataset.deleteIntent = "";
+	},
+	clearHoverIntent: (el) => {
+		const tagEl = el.closest("[data-part=item-preview]");
+		if (!tagEl) return;
+		delete tagEl.dataset.deleteIntent;
+	},
+	dispatchInputEvent(ctx) {
+		const inputEl = dom.getHiddenInputEl(ctx);
+		if (!inputEl) return;
+		dispatchInputValueEvent(inputEl, { value: ctx.valueAsString });
+	}
+});
+
+//#endregion
+//#region src/connect.ts
+function connect(state, send, normalize) {
+	const interactive = state.context.isInteractive;
+	const disabled = state.context.disabled;
+	const readOnly = state.context.readOnly;
+	const invalid = state.context.invalid || state.context.isOverflowing;
+	const translations = state.context.translations;
+	const focused = state.hasTag("focused");
+	const editingTag = state.matches("editing:tag");
+	const empty = state.context.count === 0;
+	function getItemState(options) {
+		const id = dom.getItemId(state.context, options);
+		return {
+			id,
+			editing: editingTag && state.context.editedTagId === id,
+			highlighted: id === state.context.highlightedTagId,
+			disabled: Boolean(options.disabled || disabled)
+		};
+	}
+	return {
+		empty,
+		inputValue: state.context.trimmedInputValue,
+		value: state.context.value,
+		valueAsString: state.context.valueAsString,
+		count: state.context.count,
+		atMax: state.context.isAtMax,
+		setValue(value) {
+			send({
+				type: "SET_VALUE",
+				value
+			});
+		},
+		clearValue(id) {
+			if (id) send({
+				type: "CLEAR_TAG",
+				id
+			});
+			else send("CLEAR_VALUE");
+		},
+		addValue(value) {
+			send({
+				type: "ADD_TAG",
+				value
+			});
+		},
+		setValueAtIndex(index, value) {
+			send({
+				type: "SET_VALUE_AT_INDEX",
+				index,
+				value
+			});
+		},
+		setInputValue(value) {
+			send({
+				type: "SET_INPUT_VALUE",
+				value
+			});
+		},
+		clearInputValue() {
+			send({
+				type: "SET_INPUT_VALUE",
+				value: ""
+			});
+		},
+		focus() {
+			dom.getInputEl(state.context)?.focus();
+		},
+		getItemState,
+		getRootProps() {
+			return normalize.element({
+				"dir": state.context.dir,
+				...parts.root.attrs,
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly),
+				"data-disabled": dataAttr(disabled),
+				"data-focus": dataAttr(focused),
+				"data-empty": dataAttr(empty),
+				"id": dom.getRootId(state.context),
+				onPointerDown() {
+					if (!interactive) return;
+					send("POINTER_DOWN");
+				}
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-readonly": dataAttr(readOnly),
+				"id": dom.getLabelId(state.context),
+				"dir": state.context.dir,
+				"htmlFor": dom.getInputId(state.context)
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				"id": dom.getControlId(state.context),
+				...parts.control.attrs,
+				"dir": state.context.dir,
+				"tabIndex": readOnly ? 0 : void 0,
+				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
+				"data-invalid": dataAttr(invalid),
+				"data-focus": dataAttr(focused)
+			});
+		},
+		getInputProps() {
+			return normalize.input({
+				...parts.input.attrs,
+				"dir": state.context.dir,
+				"data-invalid": dataAttr(invalid),
+				"aria-invalid": ariaAttr(invalid),
+				"data-readonly": dataAttr(readOnly),
+				"maxLength": state.context.maxLength,
+				"id": dom.getInputId(state.context),
+				"defaultValue": state.context.inputValue,
+				"autoComplete": "off",
+				"autoCorrect": "off",
+				"autoCapitalize": "none",
+				"disabled": disabled || readOnly,
+				onInput(event) {
+					const evt = getNativeEvent(event);
+					const value = event.currentTarget.value;
+					if (evt.inputType === "insertFromPaste") {
+						send({
+							type: "PASTE",
+							value
+						});
+						return;
+					}
+					if (endsWith(value, state.context.delimiter)) {
+						send("DELIMITER_KEY");
+						return;
+					}
+					send({
+						type: "TYPE",
+						value,
+						key: evt.inputType
+					});
+				},
+				onFocus() {
+					send("FOCUS");
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (isComposingEvent(event)) return;
+					const target = event.currentTarget;
+					const isCombobox = target.getAttribute("role") === "combobox";
+					const isExpanded = target.ariaExpanded === "true";
+					const keyMap = {
+						ArrowDown() {
+							send("ARROW_DOWN");
+						},
+						ArrowLeft() {
+							if (isCombobox && isExpanded) return;
+							send("ARROW_LEFT");
+						},
+						ArrowRight(event$1) {
+							if (state.context.highlightedTagId) event$1.preventDefault();
+							if (isCombobox && isExpanded) return;
+							send("ARROW_RIGHT");
+						},
+						Escape(event$1) {
+							event$1.preventDefault();
+							send("ESCAPE");
+						},
+						Backspace() {
+							send("BACKSPACE");
+						},
+						Delete() {
+							send("DELETE");
+						},
+						Enter(event$1) {
+							if (isCombobox && isExpanded) return;
+							send("ENTER");
+							event$1.preventDefault();
+						}
+					};
+					const key = getEventKey(event, state.context);
+					const exec = keyMap[key];
+					if (exec) exec(event);
+				}
+			});
+		},
+		getHiddenInputProps() {
+			return normalize.input({
+				type: "text",
+				hidden: true,
+				name: state.context.name,
+				form: state.context.form,
+				disabled,
+				readOnly,
+				required: state.context.required,
+				id: dom.getHiddenInputId(state.context),
+				defaultValue: state.context.valueAsString
+			});
+		},
+		getItemProps(props$1) {
+			return normalize.element({
+				...parts.item.attrs,
+				"dir": state.context.dir,
+				"data-value": props$1.value,
+				"data-disabled": dataAttr(disabled)
+			});
+		},
+		getItemPreviewProps(props$1) {
+			const itemState = getItemState(props$1);
+			return normalize.element({
+				...parts.itemPreview.attrs,
+				"id": itemState.id,
+				"dir": state.context.dir,
+				"hidden": itemState.editing,
+				"data-value": props$1.value,
+				"data-disabled": dataAttr(disabled),
+				"data-highlighted": dataAttr(itemState.highlighted),
+				onPointerDown(event) {
+					if (!interactive || itemState.disabled) return;
+					event.preventDefault();
+					send({
+						type: "POINTER_DOWN_TAG",
+						id: itemState.id
+					});
+				},
+				onDoubleClick() {
+					if (!interactive || itemState.disabled) return;
+					send({
+						type: "DOUBLE_CLICK_TAG",
+						id: itemState.id
+					});
+				}
+			});
+		},
+		getItemTextProps(props$1) {
+			const itemState = getItemState(props$1);
+			return normalize.element({
+				...parts.itemText.attrs,
+				"dir": state.context.dir,
+				"data-disabled": dataAttr(disabled),
+				"data-highlighted": dataAttr(itemState.highlighted)
+			});
+		},
+		getItemInputProps(props$1) {
+			const itemState = getItemState(props$1);
+			return normalize.input({
+				...parts.itemInput.attrs,
+				"dir": state.context.dir,
+				"aria-label": translations.tagEdited(props$1.value),
+				"aria-hidden": true,
+				"disabled": disabled,
+				"id": dom.getItemInputId(state.context, props$1),
+				"tabIndex": -1,
+				"hidden": !itemState.editing,
+				"defaultValue": itemState.editing ? state.context.editedTagValue : "",
+				onInput(event) {
+					send({
+						type: "TAG_INPUT_TYPE",
+						value: event.currentTarget.value
+					});
+				},
+				onBlur(event) {
+					send({
+						type: "TAG_INPUT_BLUR",
+						target: event.relatedTarget,
+						id: itemState.id
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (isComposingEvent(event)) return;
+					const keyMap = {
+						Enter() {
+							send("TAG_INPUT_ENTER");
+						},
+						Escape() {
+							send("TAG_INPUT_ESCAPE");
+						}
+					};
+					const exec = keyMap[event.key];
+					if (exec) {
+						event.preventDefault();
+						exec(event);
+					}
+				}
+			});
+		},
+		getItemDeleteTriggerProps(props$1) {
+			const id = dom.getItemId(state.context, props$1);
+			return normalize.button({
+				...parts.itemDeleteTrigger.attrs,
+				"dir": state.context.dir,
+				"id": dom.getItemDeleteTriggerId(state.context, props$1),
+				"type": "button",
+				"disabled": disabled,
+				"aria-label": translations.deleteTagTriggerLabel(props$1.value),
+				"tabIndex": -1,
+				onPointerDown(event) {
+					if (!interactive) event.preventDefault();
+				},
+				onPointerMove(event) {
+					if (!interactive) return;
+					dom.setHoverIntent(event.currentTarget);
+				},
+				onPointerLeave(event) {
+					if (!interactive) return;
+					dom.clearHoverIntent(event.currentTarget);
+				},
+				onClick() {
+					if (!interactive) return;
+					send({
+						type: "CLICK_DELETE_TAG",
+						id
+					});
+				}
+			});
+		},
+		getClearTriggerProps() {
+			return normalize.button({
+				...parts.clearTrigger.attrs,
+				"dir": state.context.dir,
+				"id": dom.getClearTriggerId(state.context),
+				"type": "button",
+				"data-readonly": dataAttr(readOnly),
+				"disabled": disabled,
+				"aria-label": translations.clearTriggerLabel,
+				"hidden": empty,
+				onClick() {
+					if (!interactive) return;
+					send("CLEAR_VALUE");
+				}
+			});
+		}
+	};
+}
+function endsWith(str, del) {
+	if (!del) return false;
+	if (typeof del === "string") return str.endsWith(del);
+	return (/* @__PURE__ */ new RegExp(`${del.source}$`)).test(str);
+}
+
+//#endregion
+//#region src/machine.ts
+const { and, not, or } = guards;
+const invoke = {
+	change: (ctx) => {
+		ctx.onValueChange?.({ value: Array.from(ctx.value) });
+		dom.dispatchInputEvent(ctx);
+	},
+	highlightChange: (ctx) => {
+		const highlightedValue = dom.getHighlightedTagValue(ctx);
+		ctx.onHighlightChange?.({ highlightedValue });
+	},
+	valueChange: (ctx) => {
+		ctx.onInputValueChange?.({ inputValue: ctx.inputValue });
+	}
+};
+const set = {
+	value: (ctx, value) => {
+		if (isEqual(ctx.value, value)) return;
+		ctx.value = value;
+		invoke.change(ctx);
+	},
+	valueAtIndex: (ctx, index, value) => {
+		if (isEqual(ctx.value[index], value)) return;
+		ctx.value[index] = value;
+		invoke.change(ctx);
+	},
+	highlightedId: (ctx, id) => {
+		if (isEqual(ctx.highlightedTagId, id)) return;
+		ctx.highlightedTagId = id;
+		invoke.highlightChange(ctx);
+	},
+	inputValue: (ctx, value) => {
+		if (isEqual(ctx.inputValue, value)) return;
+		ctx.inputValue = value;
+		invoke.valueChange(ctx);
+	}
+};
+function machine(userContext) {
+	const ctx = compact(userContext);
+	return createMachine({
+		id: "tags-input",
+		initial: ctx.autoFocus ? "focused:input" : "idle",
+		context: {
+			inputValue: "",
+			editedTagValue: "",
+			editedTagId: null,
+			highlightedTagId: null,
+			value: [],
+			dir: "ltr",
+			max: Infinity,
+			blurBehavior: void 0,
+			addOnPaste: false,
+			editable: true,
+			validate: () => true,
+			delimiter: ",",
+			disabled: false,
+			readOnly: false,
+			...ctx,
+			liveRegion: null,
+			log: {
+				current: null,
+				prev: null
+			},
+			fieldsetDisabled: false,
+			translations: {
+				clearTriggerLabel: "Clear all tags",
+				deleteTagTriggerLabel: (value) => `Delete tag ${value}`,
+				tagAdded: (value) => `Added tag ${value}`,
+				tagsPasted: (values) => `Pasted ${values.length} tags`,
+				tagEdited: (value) => `Editing tag ${value}. Press enter to save or escape to cancel.`,
+				tagUpdated: (value) => `Tag update to ${value}`,
+				tagDeleted: (value) => `Tag ${value} deleted`,
+				tagSelected: (value) => `Tag ${value} selected. Press enter to edit, delete or backspace to remove.`,
+				...ctx.translations
+			}
+		},
+		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
+		},
+		watch: {
+			highlightedTagId: "logHighlightedTag",
+			isOverflowing: "invokeOnInvalid",
+			log: "announceLog",
+			inputValue: "syncInputValue",
+			editedTagValue: "syncEditedTagInputValue"
+		},
+		activities: ["trackLiveRegion", "trackFormControlState"],
+		exit: ["clearLog"],
+		on: {
+			DOUBLE_CLICK_TAG: {
+				internal: true,
+				guard: "isTagEditable",
+				target: "editing:tag",
+				actions: ["setEditedId", "initializeEditedTagValue"]
+			},
+			POINTER_DOWN_TAG: {
+				internal: true,
+				target: "navigating:tag",
+				actions: ["highlightTag", "focusInput"]
+			},
+			CLICK_DELETE_TAG: {
+				target: "focused:input",
+				actions: ["deleteTag"]
+			},
+			SET_INPUT_VALUE: { actions: ["setInputValue"] },
+			SET_VALUE: { actions: ["setValue"] },
+			CLEAR_TAG: { actions: ["deleteTag"] },
+			SET_VALUE_AT_INDEX: { actions: ["setValueAtIndex"] },
+			CLEAR_VALUE: { actions: [
+				"clearTags",
+				"clearInputValue",
+				"focusInput"
+			] },
+			ADD_TAG: { actions: ["addTag"] },
+			INSERT_TAG: {
+				guard: and(or(not("isAtMax"), "allowOverflow"), not("isInputValueEmpty")),
+				actions: ["addTag", "clearInputValue"]
+			},
+			EXTERNAL_BLUR: [{
+				guard: "addOnBlur",
+				actions: "raiseInsertTagEvent"
+			}, {
+				guard: "clearOnBlur",
+				actions: "clearInputValue"
+			}]
+		},
+		states: {
+			"idle": { on: {
+				FOCUS: "focused:input",
+				POINTER_DOWN: {
+					guard: not("hasHighlightedTag"),
+					target: "focused:input"
+				}
+			} },
+			"focused:input": {
+				tags: ["focused"],
+				entry: ["focusInput", "clearHighlightedId"],
+				activities: ["trackInteractOutside"],
+				on: {
+					TYPE: { actions: "setInputValue" },
+					BLUR: [
+						{
+							guard: "addOnBlur",
+							target: "idle",
+							actions: "raiseInsertTagEvent"
+						},
+						{
+							guard: "clearOnBlur",
+							target: "idle",
+							actions: "clearInputValue"
+						},
+						{ target: "idle" }
+					],
+					ENTER: { actions: ["raiseInsertTagEvent"] },
+					DELIMITER_KEY: { actions: ["raiseInsertTagEvent"] },
+					ARROW_LEFT: {
+						guard: and("hasTags", "isInputCaretAtStart"),
+						target: "navigating:tag",
+						actions: "highlightLastTag"
+					},
+					BACKSPACE: {
+						target: "navigating:tag",
+						guard: and("hasTags", "isInputCaretAtStart"),
+						actions: "highlightLastTag"
+					},
+					DELETE: {
+						guard: "hasHighlightedTag",
+						actions: ["deleteHighlightedTag", "highlightTagAtIndex"]
+					},
+					PASTE: [{
+						guard: "addOnPaste",
+						actions: ["setInputValue", "addTagFromPaste"]
+					}, { actions: "setInputValue" }]
+				}
+			},
+			"navigating:tag": {
+				tags: ["focused"],
+				activities: ["trackInteractOutside"],
+				on: {
+					ARROW_RIGHT: [{
+						guard: and("hasTags", "isInputCaretAtStart", not("isLastTagHighlighted")),
+						actions: "highlightNextTag"
+					}, { target: "focused:input" }],
+					ARROW_LEFT: { actions: "highlightPrevTag" },
+					BLUR: {
+						target: "idle",
+						actions: "clearHighlightedId"
+					},
+					ENTER: {
+						guard: and("isTagEditable", "hasHighlightedTag"),
+						target: "editing:tag",
+						actions: [
+							"setEditedId",
+							"initializeEditedTagValue",
+							"focusEditedTagInput"
+						]
+					},
+					ARROW_DOWN: "focused:input",
+					ESCAPE: "focused:input",
+					TYPE: {
+						target: "focused:input",
+						actions: "setInputValue"
+					},
+					BACKSPACE: [
+						{
+							guard: "isFirstTagHighlighted",
+							actions: ["deleteHighlightedTag", "highlightFirstTag"]
+						},
+						{
+							guard: "hasHighlightedTag",
+							actions: ["deleteHighlightedTag", "highlightPrevTag"]
+						},
+						{ actions: ["highlightLastTag"] }
+					],
+					DELETE: {
+						target: "focused:input",
+						actions: ["deleteHighlightedTag", "highlightTagAtIndex"]
+					},
+					PASTE: [{
+						guard: "addOnPaste",
+						target: "focused:input",
+						actions: ["setInputValue", "addTagFromPaste"]
+					}, {
+						target: "focused:input",
+						actions: "setInputValue"
+					}]
+				}
+			},
+			"editing:tag": {
+				tags: ["editing", "focused"],
+				entry: "focusEditedTagInput",
+				activities: ["autoResize"],
+				on: {
+					TAG_INPUT_TYPE: { actions: "setEditedTagValue" },
+					TAG_INPUT_ESCAPE: {
+						target: "navigating:tag",
+						actions: [
+							"clearEditedTagValue",
+							"focusInput",
+							"clearEditedId",
+							"highlightTagAtIndex"
+						]
+					},
+					TAG_INPUT_BLUR: [{
+						guard: "isInputRelatedTarget",
+						target: "navigating:tag",
+						actions: [
+							"clearEditedTagValue",
+							"clearHighlightedId",
+							"clearEditedId"
+						]
+					}, {
+						target: "idle",
+						actions: [
+							"clearEditedTagValue",
+							"clearHighlightedId",
+							"clearEditedId",
+							"raiseExternalBlurEvent"
+						]
+					}],
+					TAG_INPUT_ENTER: [{
+						guard: "isEditedTagEmpty",
+						target: "navigating:tag",
+						actions: [
+							"deleteHighlightedTag",
+							"focusInput",
+							"clearEditedId",
+							"highlightTagAtIndex"
+						]
+					}, {
+						target: "navigating:tag",
+						actions: [
+							"submitEditedTagValue",
+							"focusInput",
+							"clearEditedId",
+							"highlightTagAtIndex"
+						]
+					}]
+				}
+			}
+		}
+	}, {
+		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) => {
+				const firstItemId = dom.getItemId(ctx$1, {
+					value: ctx$1.value[0],
+					index: 0
+				});
+				return firstItemId === ctx$1.highlightedTagId;
+			},
+			isEditedTagEmpty: (ctx$1) => ctx$1.editedTagValue.trim() === "",
+			isLastTagHighlighted: (ctx$1) => {
+				const lastIndex = ctx$1.value.length - 1;
+				const lastItemId = dom.getItemId(ctx$1, {
+					value: ctx$1.value[lastIndex],
+					index: lastIndex
+				});
+				return lastItemId === ctx$1.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);
+				if (!input) return false;
+				try {
+					return input.selectionStart === 0 && input.selectionEnd === 0;
+				} catch {
+					return input.value === "";
+				}
+			}
+		},
+		activities: {
+			trackInteractOutside(ctx$1, _evt, { send }) {
+				return trackInteractOutside(dom.getInputEl(ctx$1), {
+					exclude(target) {
+						return contains(dom.getRootEl(ctx$1), target);
+					},
+					onFocusOutside: ctx$1.onFocusOutside,
+					onPointerDownOutside: ctx$1.onPointerDownOutside,
+					onInteractOutside(event) {
+						ctx$1.onInteractOutside?.(event);
+						if (event.defaultPrevented) return;
+						send({
+							type: "BLUR",
+							src: "interact-outside"
+						});
+					}
+				});
+			},
+			trackFormControlState(ctx$1, _evt, { send, initialContext }) {
+				return trackFormControl(dom.getHiddenInputEl(ctx$1), {
+					onFieldsetDisabledChange(disabled) {
+						ctx$1.fieldsetDisabled = disabled;
+					},
+					onFormReset() {
+						send({
+							type: "SET_VALUE",
+							value: initialContext.value,
+							src: "form-reset"
+						});
+					}
+				});
+			},
+			autoResize(ctx$1) {
+				if (!ctx$1.editedTagValue || ctx$1.idx == null || !ctx$1.editable) return;
+				const input = dom.getTagInputEl(ctx$1, {
+					value: ctx$1.editedTagValue,
+					index: ctx$1.idx
+				});
+				return autoResizeInput(input);
+			},
+			trackLiveRegion(ctx$1) {
+				ctx$1.liveRegion = createLiveRegion({
+					level: "assertive",
+					document: dom.getDoc(ctx$1)
+				});
+				return () => ctx$1.liveRegion?.destroy();
+			}
+		},
+		actions: {
+			raiseInsertTagEvent(_, __, { self }) {
+				self.send("INSERT_TAG");
+			},
+			raiseExternalBlurEvent(_, evt, { self }) {
+				self.send({
+					type: "EXTERNAL_BLUR",
+					id: evt.id
+				});
+			},
+			dispatchChangeEvent(ctx$1) {
+				dom.dispatchInputEvent(ctx$1);
+			},
+			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);
+			},
+			highlightFirstTag(ctx$1) {
+				raf(() => {
+					const first = dom.getFirstEl(ctx$1);
+					set.highlightedId(ctx$1, first?.id ?? null);
+				});
+			},
+			highlightLastTag(ctx$1) {
+				const last = dom.getLastEl(ctx$1);
+				set.highlightedId(ctx$1, 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);
+			},
+			highlightTag(ctx$1, evt) {
+				set.highlightedId(ctx$1, evt.id);
+			},
+			highlightTagAtIndex(ctx$1) {
+				raf(() => {
+					if (ctx$1.idx == null) return;
+					const tagEl = dom.getTagElAtIndex(ctx$1, ctx$1.idx);
+					if (tagEl == null) return;
+					set.highlightedId(ctx$1, tagEl.id);
+					ctx$1.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 = {
+					type: "delete",
+					value
+				};
+				set.value(ctx$1, removeAt(ctx$1.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 = {
+					type: "delete",
+					value
+				};
+				set.value(ctx$1, removeAt(ctx$1.value, index));
+			},
+			setEditedId(ctx$1, evt) {
+				ctx$1.editedTagId = evt.id ?? ctx$1.highlightedTagId;
+				ctx$1.idx = dom.getIndexOfId(ctx$1, ctx$1.editedTagId);
+			},
+			clearEditedId(ctx$1) {
+				ctx$1.editedTagId = null;
+			},
+			clearEditedTagValue(ctx$1) {
+				ctx$1.editedTagValue = "";
+			},
+			setEditedTagValue(ctx$1, evt) {
+				ctx$1.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 = {
+					type: "update",
+					value: ctx$1.editedTagValue
+				};
+			},
+			setValueAtIndex(ctx$1, evt) {
+				if (evt.value) {
+					ctx$1.value[evt.index] = evt.value;
+					ctx$1.log.prev = ctx$1.log.current;
+					ctx$1.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];
+			},
+			focusEditedTagInput(ctx$1) {
+				raf(() => {
+					dom.getEditInputEl(ctx$1)?.select();
+				});
+			},
+			setInputValue(ctx$1, evt) {
+				set.inputValue(ctx$1, evt.value);
+			},
+			clearHighlightedId(ctx$1) {
+				ctx$1.highlightedTagId = null;
+			},
+			focusInput(ctx$1) {
+				raf(() => {
+					dom.getInputEl(ctx$1)?.focus();
+				});
+			},
+			clearInputValue(ctx$1) {
+				raf(() => {
+					set.inputValue(ctx$1, "");
+				});
+			},
+			syncInputValue(ctx$1) {
+				const inputEl = dom.getInputEl(ctx$1);
+				dom.setValue(inputEl, ctx$1.inputValue);
+			},
+			syncEditedTagInputValue(ctx$1, evt) {
+				const id = ctx$1.editedTagId || ctx$1.highlightedTagId || evt.id;
+				if (id == null) return;
+				const editTagInputEl = dom.getById(ctx$1, `${id}:input`);
+				dom.setValue(editTagInputEl, ctx$1.editedTagValue);
+			},
+			addTag(ctx$1, evt) {
+				const value = evt.value ?? ctx$1.trimmedInputValue;
+				const guard = ctx$1.validate?.({
+					inputValue: value,
+					value: Array.from(ctx$1.value)
+				});
+				if (guard) {
+					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 = {
+						type: "add",
+						value
+					};
+				} else ctx$1.onValueInvalid?.({ reason: "invalidTag" });
+			},
+			addTagFromPaste(ctx$1) {
+				raf(() => {
+					const value = ctx$1.trimmedInputValue;
+					const guard = ctx$1.validate?.({
+						inputValue: value,
+						value: Array.from(ctx$1.value)
+					});
+					if (guard) {
+						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 = {
+							type: "paste",
+							values: trimmedValue
+						};
+					} else ctx$1.onValueInvalid?.({ reason: "invalidTag" });
+					set.inputValue(ctx$1, "");
+				});
+			},
+			clearTags(ctx$1) {
+				set.value(ctx$1, []);
+				ctx$1.log.prev = ctx$1.log.current;
+				ctx$1.log.current = { type: "clear" };
+			},
+			setValue(ctx$1, evt) {
+				set.value(ctx$1, evt.value);
+			},
+			invokeOnInvalid(ctx$1) {
+				if (ctx$1.isOverflowing) ctx$1.onValueInvalid?.({ reason: "rangeOverflow" });
+			},
+			clearLog(ctx$1) {
+				ctx$1.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 = {
+					type: "select",
+					value: ctx$1.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;
+				let msg;
+				switch (current.type) {
+					case "add":
+						msg = ctx$1.translations.tagAdded(current.value);
+						break;
+					case "delete":
+						msg = ctx$1.translations.tagDeleted(current.value);
+						break;
+					case "update":
+						msg = ctx$1.translations.tagUpdated(current.value);
+						break;
+					case "paste":
+						msg = ctx$1.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;
+				}
+				if (msg) region.announce(msg);
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/props.ts
+const props = createProps()([
+	"addOnPaste",
+	"allowOverflow",
+	"autoFocus",
+	"blurBehavior",
+	"delimiter",
+	"dir",
+	"disabled",
+	"editable",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"inputValue",
+	"invalid",
+	"max",
+	"maxLength",
+	"name",
+	"onFocusOutside",
+	"onHighlightChange",
+	"onInputValueChange",
+	"onInteractOutside",
+	"onPointerDownOutside",
+	"onValueChange",
+	"onValueInvalid",
+	"required",
+	"readOnly",
+	"translations",
+	"validate",
+	"value"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()([
+	"index",
+	"disabled",
+	"value"
+]);
+const splitItemProps = createSplitProps(itemProps);
+
+//#endregion
+export { anatomy, connect, itemProps, machine, props, splitItemProps, splitProps };