@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/hover-card/index.js

@@ -0,0 +1,436 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { f as queryAll, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { Q as isFunction, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { n as createGuards, r as createMachine } from "../../core-CJ0MZr3D.js";
+import { n as trackDismissableElement } from "../../dismissable-KM1jPtNQ.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/hover-card/anatomy.ts
+const anatomy = createAnatomy("hover-card").parts("arrow", "arrowTip", "trigger", "positioner", "content");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/hover-card/dom.ts
+const getTriggerId = (scope, value) => {
+	const customId = scope.ids?.trigger;
+	if (customId != null) return isFunction(customId) ? customId(value) : customId;
+	return value ? `hover-card:${scope.id}:trigger:${value}` : `hover-card:${scope.id}:trigger`;
+};
+const getContentId = (scope) => scope.ids?.content ?? `hover-card:${scope.id}:content`;
+const getPositionerId = (scope) => scope.ids?.positioner ?? `hover-card:${scope.id}:popper`;
+const getArrowId = (scope) => scope.ids?.arrow ?? `hover-card:${scope.id}:arrow`;
+const getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
+const getContentEl = (scope) => scope.getById(getContentId(scope));
+const getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
+const getTriggerEls = (scope) => queryAll(scope.getRootNode(), `[data-scope="hover-card"][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/hover-card/connect.ts
+function connect(service, normalize) {
+	const { state, send, prop, context, scope } = service;
+	const open = state.hasTag("open");
+	const triggerValue = context.get("triggerValue");
+	const currentPlacement = context.get("currentPlacement");
+	const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
+	const popperStyles = getPlacementStyles({
+		...prop("positioning"),
+		placement: currentPlacement
+	});
+	return {
+		open,
+		setOpen(nextOpen) {
+			if (state.hasTag("open") === nextOpen) return;
+			if (prop("disabled")) return;
+			send({ type: nextOpen ? "OPEN" : "CLOSE" });
+		},
+		triggerValue,
+		setTriggerValue(value) {
+			send({
+				type: "TRIGGER_VALUE.SET",
+				value
+			});
+		},
+		reposition(options = {}) {
+			send({
+				type: "POSITIONING.SET",
+				options
+			});
+		},
+		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
+			});
+		},
+		getTriggerProps(props = {}) {
+			const { value } = props;
+			const current = value == null ? false : triggerValue === value;
+			return normalize.element({
+				...parts.trigger.attrs,
+				dir: prop("dir"),
+				"data-placement": currentPlacement,
+				"data-side": currentPlacementSide,
+				id: getTriggerId(scope, value),
+				"data-ownedby": scope.id,
+				"data-value": value,
+				"data-current": dataAttr(current),
+				"data-state": open ? "open" : "closed",
+				onPointerEnter(event) {
+					if (event.pointerType === "touch") return;
+					if (prop("disabled")) return;
+					send({
+						type: open && value != null && !current ? "TRIGGER_VALUE.SET" : "POINTER_ENTER",
+						src: "trigger",
+						value
+					});
+				},
+				onPointerLeave(event) {
+					if (event.pointerType === "touch") return;
+					if (prop("disabled")) return;
+					send({
+						type: "POINTER_LEAVE",
+						src: "trigger"
+					});
+				},
+				onFocus() {
+					if (prop("disabled")) return;
+					send({
+						type: open && value != null && !current ? "TRIGGER_VALUE.SET" : "TRIGGER_FOCUS",
+						value
+					});
+				},
+				onBlur() {
+					if (prop("disabled")) return;
+					send({ type: "TRIGGER_BLUR" });
+				}
+			});
+		},
+		getPositionerProps() {
+			return normalize.element({
+				id: getPositionerId(scope),
+				...parts.positioner.attrs,
+				dir: prop("dir"),
+				style: popperStyles.floating
+			});
+		},
+		getContentProps() {
+			return normalize.element({
+				...parts.content.attrs,
+				dir: prop("dir"),
+				id: getContentId(scope),
+				hidden: !open,
+				tabIndex: -1,
+				"data-state": open ? "open" : "closed",
+				"data-placement": currentPlacement,
+				"data-side": currentPlacementSide,
+				onPointerEnter(event) {
+					if (event.pointerType === "touch") return;
+					if (prop("disabled")) return;
+					send({
+						type: "POINTER_ENTER",
+						src: "content"
+					});
+				},
+				onPointerLeave(event) {
+					if (event.pointerType === "touch") return;
+					if (prop("disabled")) return;
+					send({
+						type: "POINTER_LEAVE",
+						src: "content"
+					});
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/hover-card/machine.ts
+const { not, and } = createGuards();
+const machine = createMachine({
+	props({ props }) {
+		return {
+			disabled: false,
+			openDelay: 600,
+			closeDelay: 300,
+			...props,
+			positioning: {
+				placement: "bottom",
+				...props.positioning
+			}
+		};
+	},
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") ? "open" : "closed";
+	},
+	context({ prop, bindable, scope }) {
+		return {
+			open: bindable(() => ({
+				defaultValue: prop("defaultOpen"),
+				value: prop("open")
+			})),
+			currentPlacement: bindable(() => ({ defaultValue: void 0 })),
+			isPointer: bindable(() => ({ defaultValue: false })),
+			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, context, action, prop, send }) {
+		track([() => prop("disabled")], () => {
+			if (prop("disabled")) send({
+				type: "CLOSE",
+				src: "disabled.change"
+			});
+		});
+		track([() => context.get("open")], () => {
+			action(["toggleVisibility"]);
+		});
+	},
+	on: { "TRIGGER_VALUE.SET": { actions: ["setTriggerValue", "reposition"] } },
+	states: {
+		closed: {
+			tags: ["closed"],
+			entry: ["clearIsPointer"],
+			on: {
+				"CONTROLLED.OPEN": { target: "open" },
+				POINTER_ENTER: {
+					target: "opening",
+					actions: ["setIsPointer", "setTriggerValue"]
+				},
+				TRIGGER_FOCUS: {
+					target: "opening",
+					actions: ["setTriggerValue"]
+				},
+				OPEN: {
+					target: "opening",
+					actions: ["setTriggerValue"]
+				}
+			}
+		},
+		opening: {
+			tags: ["closed"],
+			effects: ["waitForOpenDelay"],
+			on: {
+				OPEN_DELAY: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["invokeOnOpen"]
+				}],
+				"CONTROLLED.OPEN": { target: "open" },
+				"CONTROLLED.CLOSE": { target: "closed" },
+				POINTER_LEAVE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose", "toggleVisibility"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				TRIGGER_BLUR: [{
+					guard: and("isOpenControlled", not("isPointer")),
+					actions: ["invokeOnClose", "toggleVisibility"]
+				}, {
+					guard: not("isPointer"),
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				CLOSE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose", "toggleVisibility"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				"TRIGGER_VALUE.SET": { actions: ["setTriggerValue"] }
+			}
+		},
+		open: {
+			tags: ["open"],
+			effects: ["trackDismissableElement", "trackPositioning"],
+			on: {
+				"CONTROLLED.CLOSE": { target: "closed" },
+				POINTER_ENTER: { actions: ["setIsPointer"] },
+				POINTER_LEAVE: { target: "closing" },
+				CLOSE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				TRIGGER_BLUR: [{
+					guard: and("isOpenControlled", not("isPointer")),
+					actions: ["invokeOnClose"]
+				}, {
+					guard: not("isPointer"),
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				"POSITIONING.SET": { actions: ["reposition"] }
+			}
+		},
+		closing: {
+			tags: ["open"],
+			effects: ["trackPositioning", "waitForCloseDelay"],
+			on: {
+				CLOSE_DELAY: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				"CONTROLLED.CLOSE": { target: "closed" },
+				"CONTROLLED.OPEN": { target: "open" },
+				POINTER_ENTER: {
+					target: "open",
+					actions: ["setIsPointer"]
+				},
+				TRIGGER_FOCUS: {
+					target: "open",
+					actions: ["setTriggerValue"]
+				},
+				"TRIGGER_VALUE.SET": {
+					target: "open",
+					actions: ["setTriggerValue", "reposition"]
+				}
+			}
+		}
+	},
+	implementations: {
+		guards: {
+			isPointer: ({ context }) => !!context.get("isPointer"),
+			isOpenControlled: ({ prop }) => prop("open") != null
+		},
+		effects: {
+			waitForOpenDelay({ send, prop }) {
+				const id = setTimeout(() => {
+					send({ type: "OPEN_DELAY" });
+				}, prop("openDelay"));
+				return () => clearTimeout(id);
+			},
+			waitForCloseDelay({ send, prop }) {
+				const id = setTimeout(() => {
+					send({ type: "CLOSE_DELAY" });
+				}, prop("closeDelay"));
+				return () => clearTimeout(id);
+			},
+			trackPositioning({ context, prop, scope }) {
+				if (!context.get("currentPlacement")) context.set("currentPlacement", prop("positioning").placement);
+				const getPositionerEl$2 = () => getPositionerEl(scope);
+				const getTriggerEl = () => getActiveTriggerEl(scope, context.get("triggerValue"));
+				return getPlacement(getTriggerEl, getPositionerEl$2, {
+					...prop("positioning"),
+					defer: true,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			trackDismissableElement({ send, scope, prop }) {
+				const getContentEl$1 = () => getContentEl(scope);
+				return trackDismissableElement(getContentEl$1, {
+					type: "popover",
+					defer: true,
+					exclude: [getTriggerEl(scope), ...getTriggerEls(scope)].filter(Boolean),
+					onDismiss() {
+						send({
+							type: "CLOSE",
+							src: "interact-outside"
+						});
+					},
+					onInteractOutside: prop("onInteractOutside"),
+					onPointerDownOutside: prop("onPointerDownOutside"),
+					onFocusOutside(event) {
+						event.preventDefault();
+						prop("onFocusOutside")?.(event);
+					}
+				});
+			}
+		},
+		actions: {
+			invokeOnClose({ prop }) {
+				prop("onOpenChange")?.({ open: false });
+			},
+			invokeOnOpen({ prop }) {
+				prop("onOpenChange")?.({ open: true });
+			},
+			setIsPointer({ context }) {
+				context.set("isPointer", true);
+			},
+			clearIsPointer({ context }) {
+				context.set("isPointer", false);
+			},
+			reposition({ context, prop, scope, event }) {
+				const getPositionerEl$1 = () => getPositionerEl(scope);
+				const getTriggerEl = () => getActiveTriggerEl(scope, context.get("triggerValue"));
+				getPlacement(getTriggerEl, getPositionerEl$1, {
+					...prop("positioning"),
+					...event.options,
+					defer: true,
+					listeners: false,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			setTriggerValue({ context, event }) {
+				if (event.value === void 0) return;
+				context.set("triggerValue", event.value);
+			},
+			toggleVisibility({ prop, event, send }) {
+				queueMicrotask(() => {
+					send({
+						type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+						previousEvent: event
+					});
+				});
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/hover-card/props.ts
+const props = createProps()([
+	"closeDelay",
+	"defaultOpen",
+	"defaultTriggerValue",
+	"dir",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"onFocusOutside",
+	"onInteractOutside",
+	"onOpenChange",
+	"onPointerDownOutside",
+	"onTriggerValueChange",
+	"open",
+	"openDelay",
+	"positioning",
+	"triggerValue"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, props, splitProps };