@sprawlify/primitives 0.0.1

package/dist/machines/popover/index.mjs

@@ -0,0 +1,426 @@
+import { t as createAnatomy } from "../../create-anatomy-BbDZbHpC.mjs";
+import { C as proxyTabFocus, Rt as isSafari, U as raf, W as getInitialFocus, _n as ariaAttr, vn as dataAttr, yt as isLeftClick } from "../../dom-query-DFCRhyj1.mjs";
+import { t as ariaHidden } from "../../aria-hidden-DqYx0f_y.mjs";
+import { u as createSplitProps } from "../../utils-BZyrxWWR.mjs";
+import { a as createMachine } from "../../core-DCFNMTZF.mjs";
+import "../../interact-outside-BplxR9cR.mjs";
+import { n as trackDismissableElement } from "../../dismissable-DDrx0xnH.mjs";
+import { t as trapFocus } from "../../focus-trap-D-bypQEJ.mjs";
+import { n as getPlacement, t as getPlacementStyles } from "../../popper-BPJeAtcA.mjs";
+import { t as createProps } from "../../create-props-BnF_vl-E.mjs";
+import { t as preventBodyScroll } from "../../remove-scroll-Lrfv79X_.mjs";
+
+//#region src/machines/popover/popover.anatomy.ts
+const anatomy = createAnatomy("popover").parts("arrow", "arrowTip", "anchor", "trigger", "indicator", "positioner", "content", "title", "description", "closeTrigger");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/popover/popover.dom.ts
+const getAnchorId = (scope) => scope.ids?.anchor ?? `popover:${scope.id}:anchor`;
+const getTriggerId = (scope) => scope.ids?.trigger ?? `popover:${scope.id}:trigger`;
+const getContentId = (scope) => scope.ids?.content ?? `popover:${scope.id}:content`;
+const getPositionerId = (scope) => scope.ids?.positioner ?? `popover:${scope.id}:popper`;
+const getArrowId = (scope) => scope.ids?.arrow ?? `popover:${scope.id}:arrow`;
+const getTitleId = (scope) => scope.ids?.title ?? `popover:${scope.id}:title`;
+const getDescriptionId = (scope) => scope.ids?.description ?? `popover:${scope.id}:desc`;
+const getCloseTriggerId = (scope) => scope.ids?.closeTrigger ?? `popover:${scope.id}:close`;
+const getAnchorEl = (scope) => scope.getById(getAnchorId(scope));
+const getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
+const getContentEl = (scope) => scope.getById(getContentId(scope));
+const getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
+const getTitleEl = (scope) => scope.getById(getTitleId(scope));
+const getDescriptionEl = (scope) => scope.getById(getDescriptionId(scope));
+
+//#endregion
+//#region src/machines/popover/popover.connect.ts
+function connect(service, normalize) {
+	const { state, context, send, computed, prop, scope } = service;
+	const open = state.matches("open");
+	const currentPlacement = context.get("currentPlacement");
+	const portalled = computed("currentPortalled");
+	const rendered = context.get("renderedElements");
+	const popperStyles = getPlacementStyles({
+		...prop("positioning"),
+		placement: currentPlacement
+	});
+	return {
+		portalled,
+		open,
+		setOpen(nextOpen) {
+			if (state.matches("open") === nextOpen) return;
+			send({ type: nextOpen ? "OPEN" : "CLOSE" });
+		},
+		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
+			});
+		},
+		getAnchorProps() {
+			return normalize.element({
+				...parts.anchor.attrs,
+				dir: prop("dir"),
+				id: getAnchorId(scope)
+			});
+		},
+		getTriggerProps() {
+			return normalize.button({
+				...parts.trigger.attrs,
+				dir: prop("dir"),
+				type: "button",
+				"data-placement": currentPlacement,
+				id: getTriggerId(scope),
+				"aria-haspopup": "dialog",
+				"aria-expanded": open,
+				"data-state": open ? "open" : "closed",
+				"aria-controls": getContentId(scope),
+				onPointerDown(event) {
+					if (!isLeftClick(event)) return;
+					if (isSafari()) event.currentTarget.focus();
+				},
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({ type: "TOGGLE" });
+				},
+				onBlur(event) {
+					send({
+						type: "TRIGGER_BLUR",
+						target: event.relatedTarget
+					});
+				}
+			});
+		},
+		getIndicatorProps() {
+			return normalize.element({
+				...parts.indicator.attrs,
+				dir: prop("dir"),
+				"data-state": open ? "open" : "closed"
+			});
+		},
+		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),
+				tabIndex: -1,
+				role: "dialog",
+				"aria-modal": ariaAttr(prop("modal")),
+				hidden: !open,
+				"data-state": open ? "open" : "closed",
+				"data-expanded": dataAttr(open),
+				"aria-labelledby": rendered.title ? getTitleId(scope) : void 0,
+				"aria-describedby": rendered.description ? getDescriptionId(scope) : void 0,
+				"data-placement": currentPlacement
+			});
+		},
+		getTitleProps() {
+			return normalize.element({
+				...parts.title.attrs,
+				id: getTitleId(scope),
+				dir: prop("dir")
+			});
+		},
+		getDescriptionProps() {
+			return normalize.element({
+				...parts.description.attrs,
+				id: getDescriptionId(scope),
+				dir: prop("dir")
+			});
+		},
+		getCloseTriggerProps() {
+			return normalize.button({
+				...parts.closeTrigger.attrs,
+				dir: prop("dir"),
+				id: getCloseTriggerId(scope),
+				type: "button",
+				"aria-label": "close",
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					event.stopPropagation();
+					send({ type: "CLOSE" });
+				}
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/popover/popover.machine.ts
+const machine = createMachine({
+	props({ props: props$1 }) {
+		return {
+			closeOnInteractOutside: true,
+			closeOnEscape: true,
+			autoFocus: true,
+			modal: false,
+			portalled: true,
+			...props$1,
+			positioning: {
+				placement: "bottom",
+				...props$1.positioning
+			}
+		};
+	},
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") ? "open" : "closed";
+	},
+	context({ bindable }) {
+		return {
+			currentPlacement: bindable(() => ({ defaultValue: void 0 })),
+			renderedElements: bindable(() => ({ defaultValue: {
+				title: true,
+				description: true
+			} }))
+		};
+	},
+	computed: { currentPortalled: ({ prop }) => !!prop("modal") || !!prop("portalled") },
+	watch({ track, prop, action }) {
+		track([() => prop("open")], () => {
+			action(["toggleVisibility"]);
+		});
+	},
+	entry: ["checkRenderedElements"],
+	states: {
+		closed: { on: {
+			"CONTROLLED.OPEN": {
+				target: "open",
+				actions: ["setInitialFocus"]
+			},
+			TOGGLE: [{
+				guard: "isOpenControlled",
+				actions: ["invokeOnOpen"]
+			}, {
+				target: "open",
+				actions: ["invokeOnOpen", "setInitialFocus"]
+			}],
+			OPEN: [{
+				guard: "isOpenControlled",
+				actions: ["invokeOnOpen"]
+			}, {
+				target: "open",
+				actions: ["invokeOnOpen", "setInitialFocus"]
+			}]
+		} },
+		open: {
+			effects: [
+				"trapFocus",
+				"preventScroll",
+				"hideContentBelow",
+				"trackPositioning",
+				"trackDismissableElement",
+				"proxyTabFocus"
+			],
+			on: {
+				"CONTROLLED.CLOSE": {
+					target: "closed",
+					actions: ["setFinalFocus"]
+				},
+				CLOSE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose", "setFinalFocus"]
+				}],
+				TOGGLE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				"POSITIONING.SET": { actions: ["reposition"] }
+			}
+		}
+	},
+	implementations: {
+		guards: { isOpenControlled: ({ prop }) => prop("open") != void 0 },
+		effects: {
+			trackPositioning({ context, prop, scope }) {
+				context.set("currentPlacement", prop("positioning").placement);
+				const anchorEl = getAnchorEl(scope) ?? getTriggerEl(scope);
+				const getPositionerEl$1 = () => getPositionerEl(scope);
+				return getPlacement(anchorEl, getPositionerEl$1, {
+					...prop("positioning"),
+					defer: true,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			trackDismissableElement({ send, prop, scope }) {
+				const getContentEl$1 = () => getContentEl(scope);
+				let restoreFocus = true;
+				return trackDismissableElement(getContentEl$1, {
+					type: "popover",
+					pointerBlocking: prop("modal"),
+					exclude: getTriggerEl(scope),
+					defer: true,
+					onEscapeKeyDown(event) {
+						prop("onEscapeKeyDown")?.(event);
+						if (prop("closeOnEscape")) return;
+						event.preventDefault();
+					},
+					onInteractOutside(event) {
+						prop("onInteractOutside")?.(event);
+						if (event.defaultPrevented) return;
+						restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
+						if (!prop("closeOnInteractOutside")) event.preventDefault();
+					},
+					onPointerDownOutside: prop("onPointerDownOutside"),
+					onFocusOutside: prop("onFocusOutside"),
+					persistentElements: prop("persistentElements"),
+					onRequestDismiss: prop("onRequestDismiss"),
+					onDismiss() {
+						send({
+							type: "CLOSE",
+							src: "interact-outside",
+							restoreFocus
+						});
+					}
+				});
+			},
+			proxyTabFocus({ prop, scope }) {
+				if (prop("modal") || !prop("portalled")) return;
+				const getContentEl$1 = () => getContentEl(scope);
+				return proxyTabFocus(getContentEl$1, {
+					triggerElement: getTriggerEl(scope),
+					defer: true,
+					getShadowRoot: true,
+					onFocus(el) {
+						el.focus({ preventScroll: true });
+					}
+				});
+			},
+			hideContentBelow({ prop, scope }) {
+				if (!prop("modal")) return;
+				const getElements = () => [getContentEl(scope), getTriggerEl(scope)];
+				return ariaHidden(getElements, { defer: true });
+			},
+			preventScroll({ prop, scope }) {
+				if (!prop("modal")) return;
+				return preventBodyScroll(scope.getDoc());
+			},
+			trapFocus({ prop, scope }) {
+				if (!prop("modal")) return;
+				const contentEl = () => getContentEl(scope);
+				return trapFocus(contentEl, {
+					initialFocus: () => getInitialFocus({
+						root: getContentEl(scope),
+						getInitialEl: prop("initialFocusEl"),
+						enabled: prop("autoFocus")
+					}),
+					getShadowRoot: true
+				});
+			}
+		},
+		actions: {
+			reposition({ event, prop, scope, context }) {
+				const anchorEl = getAnchorEl(scope) ?? getTriggerEl(scope);
+				const getPositionerEl$1 = () => getPositionerEl(scope);
+				getPlacement(anchorEl, getPositionerEl$1, {
+					...prop("positioning"),
+					...event.options,
+					defer: true,
+					listeners: false,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			checkRenderedElements({ context, scope }) {
+				raf(() => {
+					Object.assign(context.get("renderedElements"), {
+						title: !!getTitleEl(scope),
+						description: !!getDescriptionEl(scope)
+					});
+				});
+			},
+			setInitialFocus({ prop, scope }) {
+				if (prop("modal")) return;
+				raf(() => {
+					getInitialFocus({
+						root: getContentEl(scope),
+						getInitialEl: prop("initialFocusEl"),
+						enabled: prop("autoFocus")
+					})?.focus({ preventScroll: true });
+				});
+			},
+			setFinalFocus({ event, scope }) {
+				const restoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
+				if (restoreFocus != null && !restoreFocus) return;
+				raf(() => {
+					getTriggerEl(scope)?.focus({ preventScroll: true });
+				});
+			},
+			invokeOnOpen({ prop, flush }) {
+				flush(() => {
+					prop("onOpenChange")?.({ open: true });
+				});
+			},
+			invokeOnClose({ prop, flush }) {
+				flush(() => {
+					prop("onOpenChange")?.({ open: false });
+				});
+			},
+			toggleVisibility({ event, send, prop }) {
+				send({
+					type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					previousEvent: event
+				});
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/machines/popover/popover.props.ts
+const props = createProps()([
+	"autoFocus",
+	"closeOnEscape",
+	"closeOnInteractOutside",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"initialFocusEl",
+	"modal",
+	"onEscapeKeyDown",
+	"onFocusOutside",
+	"onInteractOutside",
+	"onOpenChange",
+	"onPointerDownOutside",
+	"onRequestDismiss",
+	"defaultOpen",
+	"open",
+	"persistentElements",
+	"portalled",
+	"positioning"
+]);
+const splitProps = createSplitProps(props);
+
+//#endregion
+export { anatomy, connect, machine, props, splitProps };

package/dist/machines/presence/index.cjs

@@ -0,0 +1,192 @@
+const require_dom_query = require('../../dom-query-CWZdWUGp.cjs');
+require('../../utils-_6frwjgJ.cjs');
+const require_core = require('../../core-CQFbMdTl.cjs');
+const require_create_props = require('../../create-props-YKy7JIKj.cjs');
+
+//#region src/machines/presence/presence.connect.ts
+function connect(service, normalize) {
+	const { state, send, context } = service;
+	const present = state.matches("mounted", "unmountSuspended");
+	return {
+		skip: !context.get("initial"),
+		present,
+		setNode(node) {
+			if (!node) return;
+			send({
+				type: "NODE.SET",
+				node
+			});
+		},
+		unmount() {
+			send({ type: "UNMOUNT" });
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/presence/presence.machine.ts
+const machine = require_core.createMachine({
+	props({ props: props$1 }) {
+		return {
+			...props$1,
+			present: !!props$1.present
+		};
+	},
+	initialState({ prop }) {
+		return prop("present") ? "mounted" : "unmounted";
+	},
+	refs() {
+		return {
+			node: null,
+			styles: null
+		};
+	},
+	context({ bindable }) {
+		return {
+			unmountAnimationName: bindable(() => ({ defaultValue: null })),
+			prevAnimationName: bindable(() => ({ defaultValue: null })),
+			present: bindable(() => ({ defaultValue: false })),
+			initial: bindable(() => ({
+				sync: true,
+				defaultValue: false
+			}))
+		};
+	},
+	exit: ["cleanupNode"],
+	watch({ track, prop, send }) {
+		track([() => prop("present")], () => {
+			send({ type: "PRESENCE.CHANGED" });
+		});
+	},
+	on: {
+		"NODE.SET": { actions: ["setupNode"] },
+		"PRESENCE.CHANGED": { actions: ["setInitial", "syncPresence"] }
+	},
+	states: {
+		mounted: { on: {
+			UNMOUNT: {
+				target: "unmounted",
+				actions: ["clearPrevAnimationName", "invokeOnExitComplete"]
+			},
+			"UNMOUNT.SUSPEND": { target: "unmountSuspended" }
+		} },
+		unmountSuspended: {
+			effects: ["trackAnimationEvents"],
+			on: {
+				MOUNT: {
+					target: "mounted",
+					actions: ["setPrevAnimationName"]
+				},
+				UNMOUNT: {
+					target: "unmounted",
+					actions: ["clearPrevAnimationName", "invokeOnExitComplete"]
+				}
+			}
+		},
+		unmounted: { on: { MOUNT: {
+			target: "mounted",
+			actions: ["setPrevAnimationName"]
+		} } }
+	},
+	implementations: {
+		actions: {
+			setInitial: ({ context }) => {
+				if (context.get("initial")) return;
+				queueMicrotask(() => {
+					context.set("initial", true);
+				});
+			},
+			invokeOnExitComplete: ({ prop, refs }) => {
+				prop("onExitComplete")?.();
+				const node = refs.get("node");
+				if (!node) return;
+				const event = new (require_dom_query.getWindow(node)).CustomEvent("exitcomplete", { bubbles: false });
+				node.dispatchEvent(event);
+			},
+			setupNode: ({ refs, event }) => {
+				if (refs.get("node") === event.node) return;
+				refs.set("node", event.node);
+				refs.set("styles", require_dom_query.getComputedStyle(event.node));
+			},
+			cleanupNode: ({ refs }) => {
+				refs.set("node", null);
+				refs.set("styles", null);
+			},
+			syncPresence: ({ context, refs, send, prop }) => {
+				const presentProp = prop("present");
+				if (presentProp) return send({
+					type: "MOUNT",
+					src: "presence.changed"
+				});
+				const node = refs.get("node");
+				if (!presentProp && node?.ownerDocument.visibilityState === "hidden") return send({
+					type: "UNMOUNT",
+					src: "visibilitychange"
+				});
+				require_dom_query.raf(() => {
+					const animationName = getAnimationName(refs.get("styles"));
+					context.set("unmountAnimationName", animationName);
+					if (animationName === "none" || animationName === context.get("prevAnimationName") || refs.get("styles")?.display === "none" || refs.get("styles")?.animationDuration === "0s") send({
+						type: "UNMOUNT",
+						src: "presence.changed"
+					});
+					else send({ type: "UNMOUNT.SUSPEND" });
+				});
+			},
+			setPrevAnimationName: ({ context, refs }) => {
+				require_dom_query.raf(() => {
+					context.set("prevAnimationName", getAnimationName(refs.get("styles")));
+				});
+			},
+			clearPrevAnimationName: ({ context }) => {
+				context.set("prevAnimationName", null);
+			}
+		},
+		effects: { trackAnimationEvents: ({ context, refs, send, prop }) => {
+			const node = refs.get("node");
+			if (!node) return;
+			const onStart = (event) => {
+				if ((event.composedPath?.()?.[0] ?? event.target) === node) context.set("prevAnimationName", getAnimationName(refs.get("styles")));
+			};
+			const onEnd = (event) => {
+				const animationName = getAnimationName(refs.get("styles"));
+				if (require_dom_query.getEventTarget(event) === node && animationName === context.get("unmountAnimationName") && !prop("present")) send({
+					type: "UNMOUNT",
+					src: "animationend"
+				});
+			};
+			const onCancel = (event) => {
+				if (require_dom_query.getEventTarget(event) === node && !prop("present")) send({
+					type: "UNMOUNT",
+					src: "animationcancel"
+				});
+			};
+			node.addEventListener("animationstart", onStart);
+			node.addEventListener("animationcancel", onCancel);
+			node.addEventListener("animationend", onEnd);
+			const cleanupStyles = require_dom_query.setStyle(node, { animationFillMode: "forwards" });
+			return () => {
+				node.removeEventListener("animationstart", onStart);
+				node.removeEventListener("animationcancel", onCancel);
+				node.removeEventListener("animationend", onEnd);
+				require_dom_query.nextTick(() => cleanupStyles());
+			};
+		} }
+	}
+});
+function getAnimationName(styles) {
+	return styles?.animationName || "none";
+}
+
+//#endregion
+//#region src/machines/presence/presence.props.ts
+const props = require_create_props.createProps()([
+	"onExitComplete",
+	"present",
+	"immediate"
+]);
+
+//#endregion
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;

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

@@ -0,0 +1,44 @@
+import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu60O.cjs";
+import { b as NormalizeProps, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+
+//#region src/machines/presence/presence.types.d.ts
+interface PresenceProps {
+  present?: boolean | undefined;
+  onExitComplete?: VoidFunction | undefined;
+  immediate?: boolean | undefined;
+}
+interface PresenceSchema {
+  refs: {
+    node: HTMLElement | null;
+    styles: CSSStyleDeclaration | null;
+  };
+  props: PresenceProps;
+  context: {
+    initial: boolean;
+    unmountAnimationName: string | null;
+    prevAnimationName: string | null;
+  };
+  state: "unmounted" | "unmountSuspended" | "mounted";
+  action: string;
+  effect: string;
+  event: EventObject;
+}
+type PresenceService = Service<PresenceSchema>;
+type PresenceMachine = Machine<PresenceSchema>;
+interface PresenceApi {
+  skip: boolean;
+  present: boolean;
+  setNode: (node: HTMLElement | null) => void;
+  unmount: VoidFunction;
+}
+//#endregion
+//#region src/machines/presence/presence.connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<PresenceSchema>, normalize: NormalizeProps<T>): PresenceApi;
+//#endregion
+//#region src/machines/presence/presence.machine.d.ts
+declare const machine: Machine<PresenceSchema>;
+//#endregion
+//#region src/machines/presence/presence.props.d.ts
+declare const props: (keyof PresenceProps)[];
+//#endregion
+export { type PresenceApi as Api, type PresenceMachine as Machine, type PresenceProps as Props, type PresenceService as Service, connect, machine, props };

package/dist/machines/presence/index.d.mts

@@ -0,0 +1,44 @@
+import { p as Machine, u as EventObject, y as Service } from "../../types-DDTcG99l.mjs";
+import { b as NormalizeProps, x as PropTypes } from "../../index-C0MKXQmE.mjs";
+
+//#region src/machines/presence/presence.types.d.ts
+interface PresenceProps {
+  present?: boolean | undefined;
+  onExitComplete?: VoidFunction | undefined;
+  immediate?: boolean | undefined;
+}
+interface PresenceSchema {
+  refs: {
+    node: HTMLElement | null;
+    styles: CSSStyleDeclaration | null;
+  };
+  props: PresenceProps;
+  context: {
+    initial: boolean;
+    unmountAnimationName: string | null;
+    prevAnimationName: string | null;
+  };
+  state: "unmounted" | "unmountSuspended" | "mounted";
+  action: string;
+  effect: string;
+  event: EventObject;
+}
+type PresenceService = Service<PresenceSchema>;
+type PresenceMachine = Machine<PresenceSchema>;
+interface PresenceApi {
+  skip: boolean;
+  present: boolean;
+  setNode: (node: HTMLElement | null) => void;
+  unmount: VoidFunction;
+}
+//#endregion
+//#region src/machines/presence/presence.connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<PresenceSchema>, normalize: NormalizeProps<T>): PresenceApi;
+//#endregion
+//#region src/machines/presence/presence.machine.d.ts
+declare const machine: Machine<PresenceSchema>;
+//#endregion
+//#region src/machines/presence/presence.props.d.ts
+declare const props: (keyof PresenceProps)[];
+//#endregion
+export { type PresenceApi as Api, type PresenceMachine as Machine, type PresenceProps as Props, type PresenceService as Service, connect, machine, props };