@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/tooltip/index.js

@@ -0,0 +1,633 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { f as queryAll, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { l as isComposingEvent, m as isLeftClick, t as addDomEvent } from "../../event-bTItRgiw.js";
+import { n as getOverflowAncestors } from "../../overflow-C-zO1CWA.js";
+import { Q as isFunction, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { t as createStore } from "../../store-C5HvdLyc.js";
+import { n as ensureProps } from "../../warning-CrzBpWT1.js";
+import { n as createGuards, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { o as trackFocusVisible, r as isFocusVisible } from "../../focus-visible-DWdQf__4.js";
+import { n as getPlacement, r as getPlacementSide, t as getPlacementStyles } from "../../popper-DzBZzAe4.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/tooltip/anatomy.ts
+const anatomy = createAnatomy("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/tooltip/dom.ts
+const getTriggerId = (scope, value) => {
+	const customId = scope.ids?.trigger;
+	if (customId != null) return isFunction(customId) ? customId(value) : customId;
+	return value ? `tooltip:${scope.id}:trigger:${value}` : `tooltip:${scope.id}:trigger`;
+};
+const getContentId = (scope) => scope.ids?.content ?? `tooltip:${scope.id}:content`;
+const getArrowId = (scope) => scope.ids?.arrow ?? `tooltip:${scope.id}:arrow`;
+const getPositionerId = (scope) => scope.ids?.positioner ?? `tooltip:${scope.id}:popper`;
+const getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
+const getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
+const getTriggerEls = (scope) => queryAll(scope.getRootNode(), `[data-scope="tooltip"][data-part="trigger"][data-ownedby="${scope.id}"]`);
+const getActiveTriggerEl = (scope, value) => {
+	if (value == null) return getTriggerEl(scope) ?? getTriggerEls(scope)[0];
+	return scope.getById(getTriggerId(scope, value));
+};
+//#endregion
+//#region src/machines/tooltip/store.ts
+const store = createStore({
+	id: null,
+	prevId: null,
+	instant: false
+});
+//#endregion
+//#region src/machines/tooltip/connect.ts
+function connect(service, normalize) {
+	const { state, context, send, scope, prop, event: _event } = service;
+	const id = prop("id");
+	const hasAriaLabel = !!prop("aria-label");
+	const open = state.matches("open", "closing");
+	const triggerValue = context.get("triggerValue");
+	const currentPlacement = context.get("currentPlacement");
+	const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
+	const contentId = getContentId(scope);
+	const disabled = prop("disabled");
+	const popperStyles = getPlacementStyles({
+		...prop("positioning"),
+		placement: currentPlacement
+	});
+	return {
+		open,
+		setOpen(nextOpen) {
+			if (state.matches("open", "closing") === nextOpen) return;
+			send({ type: nextOpen ? "open" : "close" });
+		},
+		triggerValue,
+		setTriggerValue(value) {
+			send({
+				type: "triggerValue.set",
+				value: value ?? void 0
+			});
+		},
+		reposition(options = {}) {
+			send({
+				type: "positioning.set",
+				options
+			});
+		},
+		getTriggerProps(props = {}) {
+			const { value } = props;
+			const current = value == null ? false : triggerValue === value;
+			const triggerId = getTriggerId(scope, value);
+			return normalize.button({
+				...parts.trigger.attrs,
+				id: triggerId,
+				"data-ownedby": scope.id,
+				"data-value": value,
+				"data-current": dataAttr(current),
+				dir: prop("dir"),
+				"data-expanded": dataAttr(open),
+				"data-state": open ? "open" : "closed",
+				"aria-describedby": open ? contentId : void 0,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					if (!prop("closeOnClick")) return;
+					send({
+						type: open && value != null && !current ? "triggerValue.set" : "close",
+						src: "trigger.click",
+						value,
+						triggerId
+					});
+				},
+				onFocus(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					if (!isFocusVisible()) return;
+					send({
+						type: open && value != null && !current ? "triggerValue.set" : "open",
+						src: "trigger.focus",
+						value,
+						triggerId
+					});
+				},
+				onBlur(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					if (id !== store.get("id")) return;
+					if (!((event.relatedTarget ?? scope.getDoc().activeElement)?.closest(`[data-ownedby="${scope.id}"]`) != null)) send({
+						type: "close",
+						src: "trigger.blur",
+						value,
+						triggerId
+					});
+				},
+				onPointerDown(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					if (!isLeftClick(event)) return;
+					if (!prop("closeOnPointerDown")) return;
+					if (id === store.get("id")) send({
+						type: "close",
+						src: "trigger.pointerdown",
+						value,
+						triggerId
+					});
+				},
+				onPointerMove(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					if (event.pointerType === "touch") return;
+					send({
+						type: open && value != null && !current ? "triggerValue.set" : "pointer.move",
+						value,
+						triggerId
+					});
+				},
+				onPointerOver(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					if (event.pointerType === "touch") return;
+					send({
+						type: "pointer.move",
+						value,
+						triggerId
+					});
+				},
+				onPointerLeave() {
+					if (disabled) return;
+					send({ type: "pointer.leave" });
+				},
+				onPointerCancel() {
+					if (disabled) return;
+					send({ type: "pointer.leave" });
+				}
+			});
+		},
+		getArrowProps() {
+			return normalize.element({
+				id: getArrowId(scope),
+				...parts.arrow.attrs,
+				dir: prop("dir"),
+				style: popperStyles.arrow
+			});
+		},
+		getArrowTipProps() {
+			return normalize.element({
+				...parts.arrowTip.attrs,
+				dir: prop("dir"),
+				style: popperStyles.arrowTip
+			});
+		},
+		getPositionerProps() {
+			return normalize.element({
+				id: getPositionerId(scope),
+				...parts.positioner.attrs,
+				dir: prop("dir"),
+				style: popperStyles.floating
+			});
+		},
+		getContentProps() {
+			const isCurrentTooltip = store.get("id") === id;
+			const isPrevTooltip = store.get("prevId") === id;
+			const instant = store.get("instant") && (open && isCurrentTooltip || isPrevTooltip);
+			return normalize.element({
+				...parts.content.attrs,
+				dir: prop("dir"),
+				hidden: !open,
+				"data-state": open ? "open" : "closed",
+				"data-instant": dataAttr(instant),
+				role: hasAriaLabel ? void 0 : "tooltip",
+				id: hasAriaLabel ? void 0 : contentId,
+				"data-placement": currentPlacement,
+				"data-side": currentPlacementSide,
+				onPointerEnter() {
+					send({ type: "content.pointer.move" });
+				},
+				onPointerLeave() {
+					send({ type: "content.pointer.leave" });
+				},
+				style: { pointerEvents: prop("interactive") ? "auto" : "none" }
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/tooltip/machine.ts
+const { and, not } = createGuards();
+const machine = createMachine({
+	initialState: ({ prop }) => {
+		return prop("open") || prop("defaultOpen") ? "open" : "closed";
+	},
+	props({ props }) {
+		ensureProps(props, ["id"]);
+		const closeOnClick = props.closeOnClick ?? true;
+		const closeOnPointerDown = props.closeOnPointerDown ?? closeOnClick;
+		return {
+			openDelay: 400,
+			closeDelay: 150,
+			closeOnEscape: true,
+			interactive: false,
+			closeOnScroll: true,
+			disabled: false,
+			...props,
+			closeOnPointerDown,
+			closeOnClick,
+			positioning: {
+				placement: "bottom",
+				...props.positioning
+			}
+		};
+	},
+	effects: ["trackFocusVisible", "trackStore"],
+	context: ({ bindable, prop, scope }) => ({
+		currentPlacement: bindable(() => ({ defaultValue: void 0 })),
+		hasPointerMoveOpened: bindable(() => ({ defaultValue: null })),
+		triggerValue: bindable(() => ({
+			defaultValue: prop("defaultTriggerValue") ?? null,
+			value: prop("triggerValue"),
+			onChange(value) {
+				const onTriggerValueChange = prop("onTriggerValueChange");
+				if (!onTriggerValueChange) return;
+				onTriggerValueChange({
+					value,
+					triggerElement: getActiveTriggerEl(scope, value)
+				});
+			}
+		}))
+	}),
+	watch({ track, action, prop }) {
+		track([() => prop("disabled")], () => {
+			action(["closeIfDisabled"]);
+		});
+		track([() => prop("open")], () => {
+			action(["toggleVisibility"]);
+		});
+		track([() => prop("triggerValue")], () => {
+			action(["repositionImmediate"]);
+		});
+	},
+	on: { "triggerValue.set": { actions: ["setTriggerValue", "repositionImmediate"] } },
+	states: {
+		closed: {
+			entry: ["clearGlobalId"],
+			on: {
+				"controlled.open": { target: "open" },
+				open: [{
+					guard: "isOpenControlled",
+					actions: ["setTriggerValue", "invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["setTriggerValue", "invokeOnOpen"]
+				}],
+				"pointer.leave": { actions: ["clearPointerMoveOpened"] },
+				"pointer.move": [{
+					guard: and("noVisibleTooltip", not("hasPointerMoveOpened")),
+					target: "opening",
+					actions: ["setTriggerValue"]
+				}, {
+					guard: not("hasPointerMoveOpened"),
+					target: "open",
+					actions: [
+						"setPointerMoveOpened",
+						"invokeOnOpen",
+						"setTriggerValue"
+					]
+				}]
+			}
+		},
+		opening: {
+			effects: [
+				"trackScroll",
+				"trackPointerlockChange",
+				"waitForOpenDelay"
+			],
+			on: {
+				"after.openDelay": [{
+					guard: "isOpenControlled",
+					actions: ["setPointerMoveOpened", "invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["setPointerMoveOpened", "invokeOnOpen"]
+				}],
+				"controlled.open": { target: "open" },
+				"controlled.close": { target: "closed" },
+				open: [{
+					guard: "isOpenControlled",
+					actions: ["setTriggerValue", "invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["setTriggerValue", "invokeOnOpen"]
+				}],
+				"pointer.leave": [{
+					guard: "isOpenControlled",
+					actions: [
+						"clearPointerMoveOpened",
+						"invokeOnClose",
+						"toggleVisibility"
+					]
+				}, {
+					target: "closed",
+					actions: ["clearPointerMoveOpened", "invokeOnClose"]
+				}],
+				close: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose", "toggleVisibility"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}]
+			}
+		},
+		open: {
+			effects: [
+				"trackEscapeKey",
+				"trackScroll",
+				"trackPointerlockChange",
+				"trackPositioning"
+			],
+			entry: ["setGlobalId"],
+			on: {
+				"controlled.close": { target: "closed" },
+				close: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				"pointer.leave": [
+					{
+						guard: "isVisible",
+						target: "closing",
+						actions: ["clearPointerMoveOpened"]
+					},
+					{
+						guard: "isOpenControlled",
+						actions: ["clearPointerMoveOpened", "invokeOnClose"]
+					},
+					{
+						target: "closed",
+						actions: ["clearPointerMoveOpened", "invokeOnClose"]
+					}
+				],
+				"content.pointer.leave": {
+					guard: "isInteractive",
+					target: "closing"
+				},
+				"positioning.set": { actions: ["reposition"] },
+				"triggerValue.set": {
+					target: "closing",
+					actions: ["setTriggerValue", "immediateReopen"]
+				}
+			}
+		},
+		closing: {
+			effects: ["trackPositioning", "waitForCloseDelay"],
+			on: {
+				"after.closeDelay": [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				"controlled.close": { target: "closed" },
+				"controlled.open": { target: "open" },
+				close: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				"pointer.move": [{
+					guard: "isOpenControlled",
+					actions: [
+						"setPointerMoveOpened",
+						"setTriggerValue",
+						"invokeOnOpen",
+						"toggleVisibility"
+					]
+				}, {
+					target: "open",
+					actions: [
+						"setPointerMoveOpened",
+						"setTriggerValue",
+						"invokeOnOpen"
+					]
+				}],
+				"triggerValue.set": {
+					target: "open",
+					actions: ["setTriggerValue", "repositionImmediate"]
+				},
+				reopen: { target: "open" },
+				"content.pointer.move": {
+					guard: "isInteractive",
+					target: "open"
+				},
+				"positioning.set": { actions: ["reposition"] }
+			}
+		}
+	},
+	implementations: {
+		guards: {
+			noVisibleTooltip: () => store.get("id") === null,
+			isVisible: ({ prop }) => prop("id") === store.get("id"),
+			isInteractive: ({ prop }) => !!prop("interactive"),
+			hasPointerMoveOpened: ({ context }) => !!context.get("hasPointerMoveOpened"),
+			isOpenControlled: ({ prop }) => prop("open") !== void 0
+		},
+		actions: {
+			setGlobalId: ({ prop }) => {
+				const prevId = store.get("id");
+				const isInstant = prevId !== null && prevId !== prop("id");
+				store.update({
+					id: prop("id"),
+					prevId: isInstant ? prevId : null,
+					instant: isInstant
+				});
+			},
+			clearGlobalId: ({ prop }) => {
+				if (prop("id") === store.get("id")) store.update({
+					id: null,
+					prevId: null,
+					instant: false
+				});
+			},
+			invokeOnOpen: ({ prop }) => {
+				prop("onOpenChange")?.({ open: true });
+			},
+			invokeOnClose: ({ prop }) => {
+				prop("onOpenChange")?.({ open: false });
+			},
+			closeIfDisabled: ({ prop, send }) => {
+				if (!prop("disabled")) return;
+				send({
+					type: "close",
+					src: "disabled.change"
+				});
+			},
+			reposition: ({ context, event, prop, scope }) => {
+				if (event.type !== "positioning.set") return;
+				const getPositionerEl$1 = () => getPositionerEl(scope);
+				const getTriggerEl = () => getActiveTriggerEl(scope, context.get("triggerValue"));
+				getPlacement(getTriggerEl, getPositionerEl$1, {
+					...prop("positioning"),
+					...event.options,
+					listeners: false,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			repositionImmediate: ({ context, event, prop, scope }) => {
+				const triggerValue = event.value ?? context.get("triggerValue");
+				const getPositionerEl$2 = () => getPositionerEl(scope);
+				const getTriggerEl = () => getActiveTriggerEl(scope, triggerValue);
+				return getPlacement(getTriggerEl, getPositionerEl$2, {
+					...prop("positioning"),
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			toggleVisibility: ({ prop, event, send }) => {
+				queueMicrotask(() => {
+					send({
+						type: prop("open") ? "controlled.open" : "controlled.close",
+						previousEvent: event
+					});
+				});
+			},
+			setPointerMoveOpened: ({ context, event }) => {
+				const triggerId = event.triggerId ?? event.previousEvent?.triggerId;
+				context.set("hasPointerMoveOpened", triggerId ?? null);
+			},
+			clearPointerMoveOpened: ({ context }) => {
+				context.set("hasPointerMoveOpened", null);
+			},
+			setTriggerValue: ({ context, event }) => {
+				if (event.value === void 0) return;
+				context.set("triggerValue", event.value);
+			},
+			immediateReopen: ({ send }) => {
+				queueMicrotask(() => {
+					send({ type: "reopen" });
+				});
+			}
+		},
+		effects: {
+			trackFocusVisible: ({ scope }) => {
+				return trackFocusVisible({ root: scope.getRootNode?.() });
+			},
+			trackPositioning: ({ context, prop, scope }) => {
+				if (!context.get("currentPlacement")) context.set("currentPlacement", prop("positioning").placement);
+				const getPositionerEl$3 = () => getPositionerEl(scope);
+				const getTriggerEl = () => getActiveTriggerEl(scope, context.get("triggerValue"));
+				return getPlacement(getTriggerEl, getPositionerEl$3, {
+					...prop("positioning"),
+					defer: true,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			trackPointerlockChange: ({ send, scope }) => {
+				const doc = scope.getDoc();
+				const onChange = () => send({
+					type: "close",
+					src: "pointerlock:change"
+				});
+				return addDomEvent(doc, "pointerlockchange", onChange, false);
+			},
+			trackScroll: ({ send, prop, scope, context }) => {
+				if (!prop("closeOnScroll")) return;
+				const triggerValue = context.get("triggerValue");
+				const triggerEl = getActiveTriggerEl(scope, triggerValue);
+				if (!triggerEl) return;
+				const cleanups = getOverflowAncestors(triggerEl).map((overflowParent) => {
+					const onScroll = () => {
+						send({
+							type: "close",
+							src: "scroll"
+						});
+					};
+					return addDomEvent(overflowParent, "scroll", onScroll, {
+						passive: true,
+						capture: true
+					});
+				});
+				return () => {
+					cleanups.forEach((fn) => fn?.());
+				};
+			},
+			trackStore: ({ prop, send }) => {
+				let cleanup;
+				queueMicrotask(() => {
+					cleanup = store.subscribe(() => {
+						if (store.get("id") !== prop("id")) send({
+							type: "close",
+							src: "id.change"
+						});
+					});
+				});
+				return () => cleanup?.();
+			},
+			trackEscapeKey: ({ send, prop }) => {
+				if (!prop("closeOnEscape")) return;
+				const onKeyDown = (event) => {
+					if (isComposingEvent(event)) return;
+					if (event.key !== "Escape") return;
+					event.stopPropagation();
+					send({
+						type: "close",
+						src: "keydown.escape"
+					});
+				};
+				return addDomEvent(document, "keydown", onKeyDown, true);
+			},
+			waitForOpenDelay: ({ send, prop, event }) => {
+				const id = setTimeout(() => {
+					send({
+						type: "after.openDelay",
+						previousEvent: event
+					});
+				}, prop("openDelay"));
+				return () => clearTimeout(id);
+			},
+			waitForCloseDelay: ({ send, prop, event }) => {
+				const id = setTimeout(() => {
+					send({
+						type: "after.closeDelay",
+						previousEvent: event
+					});
+				}, prop("closeDelay"));
+				return () => clearTimeout(id);
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/tooltip/props.ts
+const props = createProps()([
+	"aria-label",
+	"closeDelay",
+	"closeOnClick",
+	"closeOnEscape",
+	"closeOnPointerDown",
+	"closeOnScroll",
+	"defaultOpen",
+	"defaultTriggerValue",
+	"dir",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"interactive",
+	"onOpenChange",
+	"onTriggerValueChange",
+	"open",
+	"openDelay",
+	"positioning",
+	"triggerValue"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, props, splitProps };