@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/editable/index.cjs

@@ -0,0 +1,550 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_create_anatomy = require("../../create-anatomy-BwDn25ph.cjs");
+const require_dom_query = require("../../dom-query-CQzY93XU.cjs");
+const require_platform = require("../../platform-BZS-dkZN.cjs");
+const require_event = require("../../event-DDz-mMhM.cjs");
+const require_form = require("../../form-CoupKpuP.cjs");
+const require_raf = require("../../raf-BSDcY4UD.cjs");
+const require_utils = require("../../utils-BH-oBBz2.cjs");
+const require_core = require("../../core-BNMw-JId.cjs");
+const require_interact_outside = require("../../interact-outside-Dphjr2Zh.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/editable/anatomy.ts
+const anatomy = require_create_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": require_dom_query.dataAttr(editing),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-placeholder-shown": require_dom_query.dataAttr(empty)
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				id: getLabelId(scope),
+				dir: prop("dir"),
+				htmlFor: getInputId(scope),
+				"data-focus": require_dom_query.dataAttr(editing),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-required": require_dom_query.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": require_dom_query.dataAttr(disabled),
+				readOnly,
+				"data-readonly": require_dom_query.dataAttr(readOnly),
+				"aria-invalid": require_dom_query.ariaAttr(invalid),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-autoresize": require_dom_query.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 (require_event.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 (!(require_platform.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": require_dom_query.dataAttr(empty),
+				"aria-readonly": require_dom_query.ariaAttr(readOnly),
+				"data-readonly": require_dom_query.dataAttr(disabled),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"aria-disabled": require_dom_query.ariaAttr(disabled),
+				"aria-invalid": require_dom_query.ariaAttr(invalid),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"aria-label": translations?.edit,
+				"data-autoresize": require_dom_query.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 = require_core.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 require_interact_outside.trackInteractOutside(getInputEl(scope), {
+				exclude(target) {
+					return [getCancelTriggerEl(scope), getSubmitTriggerEl(scope)].some((el) => require_dom_query.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;
+				require_raf.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 }) {
+				require_raf.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;
+				require_form.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 = require_create_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 = require_utils.createSplitProps(props);
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;

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

@@ -0,0 +1,114 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.cjs";
+import { M as Service, S as EventObject, T as Machine } from "../../index-BKgxIVbE.cjs";
+import { b as PropTypes, g as RequiredBy, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.cjs";
+import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusOutsideEvent, r as InteractOutsideEvent } from "../../index-C2865AJq.cjs";
+import "../../index-BF6G2RiC.cjs";
+//#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 };