@destyler/edit 0.0.7-beta.5 → 0.0.7-beta.9

package/dist/index.js

@@ -0,0 +1,529 @@
+import { createAnatomy } from "@destyler/anatomy";
+import { ariaAttr, contains, createScope, dataAttr, isApple, isComposingEvent, raf } from "@destyler/dom";
+import { trackInteractOutside } from "@destyler/interact-outside";
+import { compact, createSplitProps, isEqual } from "@destyler/utils";
+import { createMachine } from "@destyler/xstate";
+import { createProps } from "@destyler/types";
+
+//#region src/anatomy.ts
+const anatomy = createAnatomy("edit").parts("root", "area", "label", "preview", "input", "editTrigger", "submitTrigger", "cancelTrigger", "control");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/dom.ts
+const dom = createScope({
+	getRootId: (ctx) => ctx.ids?.root ?? `edit:${ctx.id}`,
+	getAreaId: (ctx) => ctx.ids?.area ?? `edit:${ctx.id}:area`,
+	getLabelId: (ctx) => ctx.ids?.label ?? `edit:${ctx.id}:label`,
+	getPreviewId: (ctx) => ctx.ids?.preview ?? `edit:${ctx.id}:preview`,
+	getInputId: (ctx) => ctx.ids?.input ?? `edit:${ctx.id}:input`,
+	getControlId: (ctx) => ctx.ids?.control ?? `edit:${ctx.id}:control`,
+	getSubmitTriggerId: (ctx) => ctx.ids?.submitTrigger ?? `edit:${ctx.id}:submit`,
+	getCancelTriggerId: (ctx) => ctx.ids?.cancelTrigger ?? `edit:${ctx.id}:cancel`,
+	getEditTriggerId: (ctx) => ctx.ids?.editTrigger ?? `edit:${ctx.id}:edit`,
+	getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
+	getPreviewEl: (ctx) => dom.getById(ctx, dom.getPreviewId(ctx)),
+	getSubmitTriggerEl: (ctx) => dom.getById(ctx, dom.getSubmitTriggerId(ctx)),
+	getCancelTriggerEl: (ctx) => dom.getById(ctx, dom.getCancelTriggerId(ctx)),
+	getEditTriggerEl: (ctx) => dom.getById(ctx, dom.getEditTriggerId(ctx))
+});
+
+//#endregion
+//#region src/connect.ts
+function connect(state, send, normalize) {
+	const disabled = state.context.disabled;
+	const interactive = state.context.isInteractive;
+	const readOnly = state.context.readOnly;
+	const invalid = state.context.invalid;
+	const autoResize = state.context.autoResize;
+	const translations = state.context.translations;
+	const editing = state.matches("edit");
+	const placeholderProp = state.context.placeholder;
+	const placeholder = typeof placeholderProp === "string" ? {
+		edit: placeholderProp,
+		preview: placeholderProp
+	} : placeholderProp;
+	const value = state.context.value;
+	const empty = value.trim() === "";
+	const valueText = empty ? placeholder?.preview ?? "" : value;
+	return {
+		editing,
+		empty,
+		value,
+		valueText,
+		setValue(value$1) {
+			send({
+				type: "VALUE.SET",
+				value: value$1,
+				src: "setValue"
+			});
+		},
+		clearValue() {
+			send({
+				type: "VALUE.SET",
+				value: "",
+				src: "clearValue"
+			});
+		},
+		edit() {
+			if (!interactive) return;
+			send("EDIT");
+		},
+		cancel() {
+			if (!interactive) return;
+			send("CANCEL");
+		},
+		submit() {
+			if (!interactive) return;
+			send("SUBMIT");
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: dom.getRootId(state.context),
+				dir: state.context.dir
+			});
+		},
+		getAreaProps() {
+			return normalize.element({
+				...parts.area.attrs,
+				"id": dom.getAreaId(state.context),
+				"dir": state.context.dir,
+				"style": autoResize ? { display: "inline-grid" } : void 0,
+				"data-focus": dataAttr(editing),
+				"data-disabled": dataAttr(disabled),
+				"data-placeholder-shown": dataAttr(empty)
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				"id": dom.getLabelId(state.context),
+				"dir": state.context.dir,
+				"htmlFor": dom.getInputId(state.context),
+				"data-focus": dataAttr(editing),
+				"data-invalid": dataAttr(invalid),
+				onClick() {
+					if (editing) return;
+					const previewEl = dom.getPreviewEl(state.context);
+					previewEl?.focus({ preventScroll: true });
+				}
+			});
+		},
+		getInputProps() {
+			return normalize.input({
+				...parts.input.attrs,
+				"dir": state.context.dir,
+				"aria-label": translations.input,
+				"name": state.context.name,
+				"form": state.context.form,
+				"id": dom.getInputId(state.context),
+				"hidden": autoResize ? void 0 : !editing,
+				"placeholder": placeholder?.edit,
+				"maxLength": state.context.maxLength,
+				"required": state.context.required,
+				"disabled": disabled,
+				"data-disabled": dataAttr(disabled),
+				"readOnly": readOnly,
+				"data-readonly": dataAttr(readOnly),
+				"aria-invalid": ariaAttr(invalid),
+				"data-invalid": dataAttr(invalid),
+				"data-autoresize": dataAttr(autoResize),
+				"defaultValue": value,
+				"size": autoResize ? 1 : void 0,
+				onChange(event) {
+					send({
+						type: "VALUE.SET",
+						src: "input.change",
+						value: event.currentTarget.value
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (isComposingEvent(event)) return;
+					const keyMap = {
+						Escape() {
+							send("CANCEL");
+							event.preventDefault();
+						},
+						Enter(event$1) {
+							if (!state.context.submitOnEnter) return;
+							const { localName } = event$1.currentTarget;
+							if (localName === "textarea") {
+								const submitMod = isApple() ? event$1.metaKey : event$1.ctrlKey;
+								if (!submitMod) return;
+								send({
+									type: "SUBMIT",
+									src: "keydown.enter"
+								});
+								return;
+							}
+							if (localName === "input" && !event$1.shiftKey && !event$1.metaKey) {
+								send({
+									type: "SUBMIT",
+									src: "keydown.enter"
+								});
+								event$1.preventDefault();
+							}
+						}
+					};
+					const exec = keyMap[event.key];
+					if (exec) exec(event);
+				},
+				"style": autoResize ? {
+					gridArea: "1 / 1 / auto / auto",
+					visibility: !editing ? "hidden" : void 0
+				} : void 0
+			});
+		},
+		getPreviewProps() {
+			return normalize.element({
+				"id": dom.getPreviewId(state.context),
+				...parts.preview.attrs,
+				"dir": state.context.dir,
+				"data-placeholder-shown": dataAttr(empty),
+				"aria-readonly": ariaAttr(readOnly),
+				"data-readonly": dataAttr(disabled),
+				"data-disabled": dataAttr(disabled),
+				"aria-disabled": ariaAttr(disabled),
+				"aria-invalid": ariaAttr(invalid),
+				"data-invalid": dataAttr(invalid),
+				"aria-label": translations.edit,
+				"data-autoresize": dataAttr(autoResize),
+				"children": valueText,
+				"hidden": autoResize ? void 0 : editing,
+				"tabIndex": interactive ? 0 : void 0,
+				onClick() {
+					if (!interactive) return;
+					if (state.context.activationMode !== "click") return;
+					send({
+						type: "EDIT",
+						src: "click"
+					});
+				},
+				onFocus() {
+					if (!interactive) return;
+					if (state.context.activationMode !== "focus") return;
+					send({
+						type: "EDIT",
+						src: "focus"
+					});
+				},
+				onDoubleClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					if (state.context.activationMode !== "dblclick") return;
+					send({
+						type: "EDIT",
+						src: "dblclick"
+					});
+				},
+				"style": autoResize ? {
+					whiteSpace: "pre",
+					userSelect: "none",
+					gridArea: "1 / 1 / auto / auto",
+					visibility: editing ? "hidden" : void 0,
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				} : void 0
+			});
+		},
+		getEditTriggerProps() {
+			return normalize.button({
+				...parts.editTrigger.attrs,
+				"id": dom.getEditTriggerId(state.context),
+				"dir": state.context.dir,
+				"aria-label": translations.edit,
+				"hidden": editing,
+				"type": "button",
+				"disabled": disabled,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					send({
+						type: "EDIT",
+						src: "edit.click"
+					});
+				}
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				id: dom.getControlId(state.context),
+				...parts.control.attrs,
+				dir: state.context.dir
+			});
+		},
+		getSubmitTriggerProps() {
+			return normalize.button({
+				...parts.submitTrigger.attrs,
+				"dir": state.context.dir,
+				"id": dom.getSubmitTriggerId(state.context),
+				"aria-label": translations.submit,
+				"hidden": !editing,
+				"disabled": disabled,
+				"type": "button",
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					send({
+						type: "SUBMIT",
+						src: "submit.click"
+					});
+				}
+			});
+		},
+		getCancelTriggerProps() {
+			return normalize.button({
+				...parts.cancelTrigger.attrs,
+				"dir": state.context.dir,
+				"aria-label": translations.cancel,
+				"id": dom.getCancelTriggerId(state.context),
+				"hidden": !editing,
+				"type": "button",
+				"disabled": disabled,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					send({
+						type: "CANCEL",
+						src: "cancel.click"
+					});
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machine.ts
+const submitOnEnter = (ctx) => ["both", "enter"].includes(ctx.submitMode);
+const submitOnBlur = (ctx) => ["both", "blur"].includes(ctx.submitMode);
+const sync = { value: (ctx) => {
+	const inputEl = dom.getInputEl(ctx);
+	dom.setValue(inputEl, ctx.value);
+} };
+const invoke = { change(ctx) {
+	ctx.onValueChange?.({ value: ctx.value });
+	sync.value(ctx);
+} };
+const set = { value(ctx, value) {
+	if (isEqual(ctx.value, value)) return;
+	ctx.value = value;
+	invoke.change(ctx);
+} };
+function machine(userContext) {
+	const ctx = compact(userContext);
+	return createMachine({
+		id: "editable",
+		initial: ctx.edit ? "edit" : "preview",
+		entry: ctx.edit ? ["focusInput"] : void 0,
+		context: {
+			activationMode: "focus",
+			submitMode: "both",
+			value: "",
+			previousValue: "",
+			selectOnFocus: true,
+			disabled: false,
+			readOnly: false,
+			...ctx,
+			translations: {
+				input: "editable input",
+				edit: "edit",
+				submit: "submit",
+				cancel: "cancel",
+				...ctx.translations
+			}
+		},
+		watch: {
+			value: ["syncInputValue"],
+			edit: ["toggleEditing"]
+		},
+		computed: {
+			submitOnEnter,
+			submitOnBlur,
+			isInteractive: (ctx$1) => !(ctx$1.disabled || ctx$1.readOnly)
+		},
+		on: { "VALUE.SET": { actions: "setValue" } },
+		states: {
+			preview: {
+				entry: ["blurInputIfNeeded"],
+				on: {
+					"CONTROLLED.EDIT": {
+						target: "edit",
+						actions: ["setPreviousValue", "focusInput"]
+					},
+					"EDIT": [{
+						guard: "isEditControlled",
+						actions: ["invokeOnEdit"]
+					}, {
+						target: "edit",
+						actions: [
+							"setPreviousValue",
+							"focusInput",
+							"invokeOnEdit"
+						]
+					}]
+				}
+			},
+			edit: {
+				activities: ["trackInteractOutside"],
+				on: {
+					"CONTROLLED.PREVIEW": [{
+						guard: "isSubmitEvent",
+						target: "preview",
+						actions: [
+							"setPreviousValue",
+							"restoreFocus",
+							"invokeOnSubmit"
+						]
+					}, {
+						target: "preview",
+						actions: [
+							"revertValue",
+							"restoreFocus",
+							"invokeOnCancel"
+						]
+					}],
+					"CANCEL": [{
+						guard: "isEditControlled",
+						actions: ["invokeOnPreview"]
+					}, {
+						target: "preview",
+						actions: [
+							"revertValue",
+							"restoreFocus",
+							"invokeOnCancel",
+							"invokeOnPreview"
+						]
+					}],
+					"SUBMIT": [{
+						guard: "isEditControlled",
+						actions: ["invokeOnPreview"]
+					}, {
+						target: "preview",
+						actions: [
+							"setPreviousValue",
+							"restoreFocus",
+							"invokeOnSubmit",
+							"invokeOnPreview"
+						]
+					}]
+				}
+			}
+		}
+	}, {
+		guards: {
+			isEditControlled: (ctx$1) => !!ctx$1["edit.controlled"],
+			isSubmitEvent: (_ctx, evt) => evt.previousEvent?.type === "SUBMIT"
+		},
+		activities: { trackInteractOutside(ctx$1, _evt, { send }) {
+			return trackInteractOutside(dom.getInputEl(ctx$1), {
+				exclude(target) {
+					const ignore = [dom.getCancelTriggerEl(ctx$1), dom.getSubmitTriggerEl(ctx$1)];
+					return ignore.some((el) => contains(el, target));
+				},
+				onFocusOutside: ctx$1.onFocusOutside,
+				onPointerDownOutside: ctx$1.onPointerDownOutside,
+				onInteractOutside(event) {
+					ctx$1.onInteractOutside?.(event);
+					if (event.defaultPrevented) return;
+					const { focusable } = event.detail;
+					send({
+						type: submitOnBlur(ctx$1) ? "SUBMIT" : "CANCEL",
+						src: "interact-outside",
+						focusable
+					});
+				}
+			});
+		} },
+		actions: {
+			restoreFocus(ctx$1, evt) {
+				if (evt.focusable) return;
+				raf(() => {
+					const finalEl = ctx$1.finalFocusEl?.() ?? dom.getEditTriggerEl(ctx$1);
+					finalEl?.focus({ preventScroll: true });
+				});
+			},
+			focusInput(ctx$1) {
+				raf(() => {
+					const inputEl = dom.getInputEl(ctx$1);
+					if (!inputEl) return;
+					if (ctx$1.selectOnFocus) inputEl.select();
+					else inputEl.focus({ preventScroll: true });
+				});
+			},
+			invokeOnCancel(ctx$1) {
+				ctx$1.onValueRevert?.({ value: ctx$1.previousValue });
+			},
+			invokeOnSubmit(ctx$1) {
+				ctx$1.onValueCommit?.({ value: ctx$1.value });
+			},
+			invokeOnEdit(ctx$1) {
+				ctx$1.onEditChange?.({ edit: true });
+			},
+			invokeOnPreview(ctx$1) {
+				ctx$1.onEditChange?.({ edit: false });
+			},
+			toggleEditing(ctx$1, evt, { send }) {
+				send({
+					type: ctx$1.edit ? "CONTROLLED.EDIT" : "CONTROLLED.PREVIEW",
+					previousEvent: evt
+				});
+			},
+			syncInputValue(ctx$1) {
+				sync.value(ctx$1);
+			},
+			setValue(ctx$1, evt) {
+				const value = ctx$1.maxLength != null ? evt.value.slice(0, ctx$1.maxLength) : evt.value;
+				set.value(ctx$1, value);
+			},
+			setPreviousValue(ctx$1) {
+				ctx$1.previousValue = ctx$1.value;
+			},
+			revertValue(ctx$1) {
+				set.value(ctx$1, ctx$1.previousValue);
+			},
+			blurInputIfNeeded(ctx$1) {
+				dom.getInputEl(ctx$1)?.blur();
+			}
+		}
+	});
+}
+
+//#endregion
+//#region src/props.ts
+const props = createProps()([
+	"activationMode",
+	"autoResize",
+	"dir",
+	"disabled",
+	"finalFocusEl",
+	"form",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"maxLength",
+	"name",
+	"onEditChange",
+	"onFocusOutside",
+	"onInteractOutside",
+	"onPointerDownOutside",
+	"onValueChange",
+	"onValueCommit",
+	"onValueRevert",
+	"placeholder",
+	"readOnly",
+	"required",
+	"selectOnFocus",
+	"edit",
+	"edit.controlled",
+	"submitMode",
+	"translations",
+	"value"
+]);
+const splitProps = createSplitProps(props);
+
+//#endregion
+export { anatomy, connect, machine, props, splitProps };

package/package.json

@@ -1,38 +1,32 @@
 {
   "name": "@destyler/edit",
   "type": "module",
-  "version": "0.0.7-beta.5",
+  "version": "0.0.7-beta.9",
   "description": "a component that allows users to edit text in place.",
   "author": "Elone Hoo <elonehoo@gmail.com>",
   "license": "MIT",
   "exports": {
-    ".": {
-      "types": "./dist/index.d.mts",
-      "default": "./dist/index.mjs"
-    },
-    "./*": "./*"
+    ".": "./dist/index.js"
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "*.d.ts",
     "dist"
   ],
   "dependencies": {
-    "@zag-js/anatomy": "^0.82.1",
-    "@zag-js/core": "^0.82.1",
-    "@zag-js/dom-event": "^0.80.0",
-    "@zag-js/dom-query": "^0.82.1",
-    "@zag-js/form-utils": "^0.81.1",
-    "@zag-js/interact-outside": "^0.82.1",
-    "@zag-js/types": "^0.82.1",
-    "@zag-js/utils": "^0.82.1"
+    "@destyler/dom": "0.0.7-beta.9",
+    "@destyler/interact-outside": "0.0.7-beta.9",
+    "@destyler/types": "0.0.7-beta.9",
+    "@destyler/anatomy": "0.0.7-beta.9",
+    "@destyler/xstate": "0.0.7-beta.9",
+    "@destyler/utils": "0.0.7-beta.9"
   },
   "scripts": {
     "clear": "rimraf ./dist",
     "clear:node_modules": "rimraf ./node_modules",
-    "build": "pnpm run clear && unbuild",
-    "stub": "unbuild --stub"
+    "build": "pnpm run clear && tsdown",
+    "watch": "tsdown --watch"
   }
 }