@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/editable/index.d.ts

@@ -0,0 +1,114 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.js";
+import { M as Service, S as EventObject, T as Machine } from "../../index-CFoN0L3C.js";
+import { b as PropTypes, g as RequiredBy, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusOutsideEvent, r as InteractOutsideEvent } from "../../index-C2865AJq.js";
+import "../../index-BdeZuSX6.js";
+//#region src/machines/editable/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "area" | "input" | "label" | "control" | "preview" | "editTrigger" | "submitTrigger" | "cancelTrigger">;
+//#endregion
+//#region src/machines/editable/types.d.ts
+interface ValueChangeDetails {
+  value: string;
+}
+interface EditChangeDetails {
+  edit: boolean;
+}
+type ActivationMode = "focus" | "dblclick" | "click" | "none";
+type SubmitMode = "enter" | "blur" | "both" | "none";
+type IntlTranslations = {
+  edit: string;
+  submit: string;
+  cancel: string;
+  input: string;
+};
+type ElementIds = Partial<{
+  root: string;
+  area: string;
+  label: string;
+  preview: string;
+  input: string;
+  control: string;
+  submitTrigger: string;
+  cancelTrigger: string;
+  editTrigger: string;
+}>;
+interface EditableProps extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
+  ids?: ElementIds | undefined;
+  invalid?: boolean | undefined;
+  name?: string | undefined;
+  form?: string | undefined;
+  autoResize?: boolean | undefined;
+  activationMode?: ActivationMode | undefined;
+  submitMode?: SubmitMode | undefined;
+  selectOnFocus?: boolean | undefined;
+  edit?: boolean | undefined;
+  defaultEdit?: boolean | undefined;
+  onEditChange?: ((details: EditChangeDetails) => void) | undefined;
+  maxLength?: number | undefined;
+  disabled?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  required?: boolean | undefined;
+  placeholder?: string | {
+    edit: string;
+    preview: string;
+  } | undefined;
+  translations?: IntlTranslations | undefined;
+  finalFocusEl?: (() => HTMLElement | null) | undefined;
+  value?: string | undefined;
+  defaultValue?: string | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  onValueRevert?: ((details: ValueChangeDetails) => void) | undefined;
+  onValueCommit?: ((details: ValueChangeDetails) => void) | undefined;
+}
+type PropsWithDefault = "activationMode" | "submitMode" | "selectOnFocus" | "translations";
+interface EditableSchema {
+  props: RequiredBy<EditableProps, PropsWithDefault>;
+  state: "edit" | "preview";
+  context: {
+    value: string;
+    previousValue: string;
+  };
+  computed: {
+    isInteractive: boolean;
+    submitOnEnter: boolean;
+    submitOnBlur: boolean;
+  };
+  action: string;
+  effect: string;
+  event: EventObject;
+  guard: string;
+}
+type EditableService = Service<EditableSchema>;
+type EditableMachine = Machine<EditableSchema>;
+interface EditableApi<T extends PropTypes = PropTypes> {
+  editing: boolean;
+  empty: boolean;
+  value: string;
+  valueText: string;
+  setValue: (value: string) => void;
+  clearValue: VoidFunction;
+  edit: VoidFunction;
+  cancel: VoidFunction;
+  submit: VoidFunction;
+  getRootProps: () => T["element"];
+  getAreaProps: () => T["element"];
+  getLabelProps: () => T["label"];
+  getInputProps: () => T["input"];
+  getPreviewProps: () => T["element"];
+  getEditTriggerProps: () => T["button"];
+  getControlProps: () => T["element"];
+  getSubmitTriggerProps: () => T["button"];
+  getCancelTriggerProps: () => T["button"];
+}
+//#endregion
+//#region src/machines/editable/connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<EditableSchema>, normalize: NormalizeProps<T>): EditableApi<T>;
+//#endregion
+//#region src/machines/editable/machine.d.ts
+declare const machine: Machine<EditableSchema>;
+//#endregion
+//#region src/machines/editable/props.d.ts
+declare const props: (keyof EditableProps)[];
+declare const splitProps: <Props extends Partial<EditableProps>>(props: Props) => [Partial<EditableProps>, Omit<Props, keyof EditableProps>];
+//#endregion
+export { type ActivationMode, type EditableApi as Api, type EditChangeDetails, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type IntlTranslations, type EditableMachine as Machine, type PointerDownOutsideEvent, type EditableProps as Props, type EditableService as Service, type SubmitMode, type ValueChangeDetails, anatomy, connect, machine, props, splitProps };

package/dist/machines/editable/index.js

@@ -0,0 +1,545 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { L as ariaAttr, p as contains, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { i as isApple } from "../../platform-BDB0wXUk.js";
+import { l as isComposingEvent } from "../../event-bTItRgiw.js";
+import { o as setElementValue } from "../../form-B1DW_w_3.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as trackInteractOutside } from "../../interact-outside-BjqIunFx.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/editable/anatomy.ts
+const anatomy = createAnatomy("editable").parts("root", "area", "label", "preview", "input", "editTrigger", "submitTrigger", "cancelTrigger", "control");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/editable/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `editable:${ctx.id}`;
+const getAreaId = (ctx) => ctx.ids?.area ?? `editable:${ctx.id}:area`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `editable:${ctx.id}:label`;
+const getPreviewId = (ctx) => ctx.ids?.preview ?? `editable:${ctx.id}:preview`;
+const getInputId = (ctx) => ctx.ids?.input ?? `editable:${ctx.id}:input`;
+const getControlId = (ctx) => ctx.ids?.control ?? `editable:${ctx.id}:control`;
+const getSubmitTriggerId = (ctx) => ctx.ids?.submitTrigger ?? `editable:${ctx.id}:submit`;
+const getCancelTriggerId = (ctx) => ctx.ids?.cancelTrigger ?? `editable:${ctx.id}:cancel`;
+const getEditTriggerId = (ctx) => ctx.ids?.editTrigger ?? `editable:${ctx.id}:edit`;
+const getInputEl = (ctx) => ctx.getById(getInputId(ctx));
+const getPreviewEl = (ctx) => ctx.getById(getPreviewId(ctx));
+const getSubmitTriggerEl = (ctx) => ctx.getById(getSubmitTriggerId(ctx));
+const getCancelTriggerEl = (ctx) => ctx.getById(getCancelTriggerId(ctx));
+const getEditTriggerEl = (ctx) => ctx.getById(getEditTriggerId(ctx));
+//#endregion
+//#region src/machines/editable/connect.ts
+function connect(service, normalize) {
+	const { state, context, send, prop, scope, computed } = service;
+	const disabled = !!prop("disabled");
+	const interactive = computed("isInteractive");
+	const readOnly = !!prop("readOnly");
+	const required = !!prop("required");
+	const invalid = !!prop("invalid");
+	const autoResize = !!prop("autoResize");
+	const translations = prop("translations");
+	const editing = state.matches("edit");
+	const placeholderProp = prop("placeholder");
+	const placeholder = typeof placeholderProp === "string" ? {
+		edit: placeholderProp,
+		preview: placeholderProp
+	} : placeholderProp;
+	const value = context.get("value");
+	const empty = value.trim() === "";
+	const valueText = empty ? placeholder?.preview ?? "" : value;
+	return {
+		editing,
+		empty,
+		value,
+		valueText,
+		setValue(value) {
+			send({
+				type: "VALUE.SET",
+				value,
+				src: "setValue"
+			});
+		},
+		clearValue() {
+			send({
+				type: "VALUE.SET",
+				value: "",
+				src: "clearValue"
+			});
+		},
+		edit() {
+			if (!interactive) return;
+			send({ type: "EDIT" });
+		},
+		cancel() {
+			if (!interactive) return;
+			send({ type: "CANCEL" });
+		},
+		submit() {
+			if (!interactive) return;
+			send({ type: "SUBMIT" });
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				dir: prop("dir")
+			});
+		},
+		getAreaProps() {
+			return normalize.element({
+				...parts.area.attrs,
+				id: getAreaId(scope),
+				dir: prop("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: getLabelId(scope),
+				dir: prop("dir"),
+				htmlFor: getInputId(scope),
+				"data-focus": dataAttr(editing),
+				"data-invalid": dataAttr(invalid),
+				"data-required": dataAttr(required),
+				onClick() {
+					if (editing) return;
+					getPreviewEl(scope)?.focus({ preventScroll: true });
+				}
+			});
+		},
+		getInputProps() {
+			return normalize.input({
+				...parts.input.attrs,
+				dir: prop("dir"),
+				"aria-label": translations?.input,
+				name: prop("name"),
+				form: prop("form"),
+				id: getInputId(scope),
+				hidden: autoResize ? void 0 : !editing,
+				placeholder: placeholder?.edit,
+				maxLength: prop("maxLength"),
+				required: prop("required"),
+				disabled,
+				"data-disabled": dataAttr(disabled),
+				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 exec = {
+						Escape() {
+							send({ type: "CANCEL" });
+							event.preventDefault();
+						},
+						Enter(event) {
+							if (!computed("submitOnEnter")) return;
+							const { localName } = event.currentTarget;
+							if (localName === "textarea") {
+								if (!(isApple() ? event.metaKey : event.ctrlKey)) return;
+								send({
+									type: "SUBMIT",
+									src: "keydown.enter"
+								});
+								return;
+							}
+							if (localName === "input" && !event.shiftKey && !event.metaKey) {
+								send({
+									type: "SUBMIT",
+									src: "keydown.enter"
+								});
+								event.preventDefault();
+							}
+						}
+					}[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: getPreviewId(scope),
+				...parts.preview.attrs,
+				dir: prop("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 (prop("activationMode") !== "click") return;
+					send({
+						type: "EDIT",
+						src: "click"
+					});
+				},
+				onFocus() {
+					if (!interactive) return;
+					if (prop("activationMode") !== "focus") return;
+					send({
+						type: "EDIT",
+						src: "focus"
+					});
+				},
+				onDoubleClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					if (prop("activationMode") !== "dblclick") return;
+					send({
+						type: "EDIT",
+						src: "dblclick"
+					});
+				},
+				style: autoResize ? {
+					whiteSpace: "pre",
+					gridArea: "1 / 1 / auto / auto",
+					visibility: editing ? "hidden" : void 0,
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				} : void 0
+			});
+		},
+		getEditTriggerProps() {
+			return normalize.button({
+				...parts.editTrigger.attrs,
+				id: getEditTriggerId(scope),
+				dir: prop("dir"),
+				"aria-label": translations?.edit,
+				hidden: editing,
+				type: "button",
+				disabled,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					send({
+						type: "EDIT",
+						src: "edit.click"
+					});
+				}
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				id: getControlId(scope),
+				...parts.control.attrs,
+				dir: prop("dir")
+			});
+		},
+		getSubmitTriggerProps() {
+			return normalize.button({
+				...parts.submitTrigger.attrs,
+				dir: prop("dir"),
+				id: getSubmitTriggerId(scope),
+				"aria-label": translations?.submit,
+				hidden: !editing,
+				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: prop("dir"),
+				"aria-label": translations?.cancel,
+				id: getCancelTriggerId(scope),
+				hidden: !editing,
+				type: "button",
+				disabled,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					send({
+						type: "CANCEL",
+						src: "cancel.click"
+					});
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/editable/machine.ts
+const machine = createMachine({
+	props({ props }) {
+		return {
+			activationMode: "focus",
+			submitMode: "both",
+			defaultValue: "",
+			selectOnFocus: true,
+			...props,
+			translations: {
+				input: "editable input",
+				edit: "edit",
+				submit: "submit",
+				cancel: "cancel",
+				...props.translations
+			}
+		};
+	},
+	initialState({ prop }) {
+		return prop("edit") || prop("defaultEdit") ? "edit" : "preview";
+	},
+	entry: ["focusInputIfNeeded"],
+	context: ({ bindable, prop }) => {
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				onChange(value) {
+					return prop("onValueChange")?.({ value });
+				}
+			})),
+			previousValue: bindable(() => ({ defaultValue: "" }))
+		};
+	},
+	watch({ track, action, context, prop }) {
+		track([() => context.get("value")], () => {
+			action(["syncInputValue"]);
+		});
+		track([() => prop("edit")], () => {
+			action(["toggleEditing"]);
+		});
+	},
+	computed: {
+		submitOnEnter({ prop }) {
+			const submitMode = prop("submitMode");
+			return submitMode === "both" || submitMode === "enter";
+		},
+		submitOnBlur({ prop }) {
+			const submitMode = prop("submitMode");
+			return submitMode === "both" || submitMode === "blur";
+		},
+		isInteractive({ prop }) {
+			return !(prop("disabled") || prop("readOnly"));
+		}
+	},
+	on: { "VALUE.SET": { actions: ["setValue"] } },
+	states: {
+		preview: {
+			entry: ["blurInput"],
+			on: {
+				"CONTROLLED.EDIT": {
+					target: "edit",
+					actions: ["setPreviousValue", "focusInput"]
+				},
+				EDIT: [{
+					guard: "isEditControlled",
+					actions: ["invokeOnEdit"]
+				}, {
+					target: "edit",
+					actions: [
+						"setPreviousValue",
+						"focusInput",
+						"invokeOnEdit"
+					]
+				}]
+			}
+		},
+		edit: {
+			effects: ["trackInteractOutside"],
+			entry: ["syncInputValue"],
+			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"
+					]
+				}]
+			}
+		}
+	},
+	implementations: {
+		guards: {
+			isEditControlled: ({ prop }) => prop("edit") != void 0,
+			isSubmitEvent: ({ event }) => event.previousEvent?.type === "SUBMIT"
+		},
+		effects: { trackInteractOutside({ send, scope, prop, computed }) {
+			return trackInteractOutside(getInputEl(scope), {
+				exclude(target) {
+					return [getCancelTriggerEl(scope), getSubmitTriggerEl(scope)].some((el) => contains(el, target));
+				},
+				onFocusOutside: prop("onFocusOutside"),
+				onPointerDownOutside: prop("onPointerDownOutside"),
+				onInteractOutside(event) {
+					prop("onInteractOutside")?.(event);
+					if (event.defaultPrevented) return;
+					const { focusable } = event.detail;
+					send({
+						type: computed("submitOnBlur") ? "SUBMIT" : "CANCEL",
+						src: "interact-outside",
+						focusable
+					});
+				}
+			});
+		} },
+		actions: {
+			restoreFocus({ event, scope, prop }) {
+				if (event.focusable) return;
+				raf(() => {
+					(prop("finalFocusEl")?.() ?? getEditTriggerEl(scope))?.focus({ preventScroll: true });
+				});
+			},
+			clearValue({ context }) {
+				context.set("value", "");
+			},
+			focusInputIfNeeded({ action, prop }) {
+				if (!(prop("edit") || prop("defaultEdit"))) return;
+				action(["focusInput"]);
+			},
+			focusInput({ scope, prop }) {
+				raf(() => {
+					const inputEl = getInputEl(scope);
+					if (!inputEl) return;
+					if (prop("selectOnFocus")) inputEl.select();
+					else inputEl.focus({ preventScroll: true });
+				});
+			},
+			invokeOnCancel({ prop, context }) {
+				const prev = context.get("previousValue");
+				prop("onValueRevert")?.({ value: prev });
+			},
+			invokeOnSubmit({ prop, context }) {
+				const value = context.get("value");
+				prop("onValueCommit")?.({ value });
+			},
+			invokeOnEdit({ prop }) {
+				prop("onEditChange")?.({ edit: true });
+			},
+			invokeOnPreview({ prop }) {
+				prop("onEditChange")?.({ edit: false });
+			},
+			toggleEditing({ prop, send, event }) {
+				send({
+					type: prop("edit") ? "CONTROLLED.EDIT" : "CONTROLLED.PREVIEW",
+					previousEvent: event
+				});
+			},
+			syncInputValue({ context, scope }) {
+				const inputEl = getInputEl(scope);
+				if (!inputEl) return;
+				setElementValue(inputEl, context.get("value"));
+			},
+			setValue({ context, prop, event }) {
+				const max = prop("maxLength");
+				const value = max != null ? event.value.slice(0, max) : event.value;
+				context.set("value", value);
+			},
+			setPreviousValue({ context }) {
+				context.set("previousValue", context.get("value"));
+			},
+			revertValue({ context }) {
+				const value = context.get("previousValue");
+				if (!value) return;
+				context.set("value", value);
+			},
+			blurInput({ scope }) {
+				getInputEl(scope)?.blur();
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/editable/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",
+	"defaultEdit",
+	"submitMode",
+	"translations",
+	"defaultValue",
+	"value"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, props, splitProps };