@sprawlify/primitives 0.0.1

package/dist/machines/tooltip/index.cjs

@@ -0,0 +1,516 @@
+const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
+const require_dom_query = require('../../dom-query-CWZdWUGp.cjs');
+const require_utils = require('../../utils-_6frwjgJ.cjs');
+const require_core = require('../../core-CQFbMdTl.cjs');
+const require_focus_visible = require('../../focus-visible-DYTWdWpa.cjs');
+const require_popper = require('../../popper-D0FAW_p7.cjs');
+const require_create_props = require('../../create-props-YKy7JIKj.cjs');
+
+//#region src/machines/tooltip/tooltip.anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/tooltip/tooltip.dom.ts
+const getTriggerId = (scope) => scope.ids?.trigger ?? `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));
+
+//#endregion
+//#region src/machines/tooltip/tooltip.store.ts
+const store = require_utils.createStore({ id: null });
+
+//#endregion
+//#region src/machines/tooltip/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 triggerId = getTriggerId(scope);
+	const contentId = getContentId(scope);
+	const disabled = prop("disabled");
+	const popperStyles = require_popper.getPlacementStyles({
+		...prop("positioning"),
+		placement: context.get("currentPlacement")
+	});
+	return {
+		open,
+		setOpen(nextOpen) {
+			if (state.matches("open", "closing") === nextOpen) return;
+			send({ type: nextOpen ? "open" : "close" });
+		},
+		reposition(options = {}) {
+			send({
+				type: "positioning.set",
+				options
+			});
+		},
+		getTriggerProps() {
+			return normalize.button({
+				...parts.trigger.attrs,
+				id: triggerId,
+				dir: prop("dir"),
+				"data-expanded": require_dom_query.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: "close",
+						src: "trigger.click"
+					});
+				},
+				onFocus(event) {
+					queueMicrotask(() => {
+						if (event.defaultPrevented) return;
+						if (disabled) return;
+						if (_event.src === "trigger.pointerdown") return;
+						if (!require_focus_visible.isFocusVisible()) return;
+						send({
+							type: "open",
+							src: "trigger.focus"
+						});
+					});
+				},
+				onBlur(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					if (id === store.get("id")) send({
+						type: "close",
+						src: "trigger.blur"
+					});
+				},
+				onPointerDown(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					if (!require_dom_query.isLeftClick(event)) return;
+					if (!prop("closeOnPointerDown")) return;
+					if (id === store.get("id")) send({
+						type: "close",
+						src: "trigger.pointerdown"
+					});
+				},
+				onPointerMove(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					if (event.pointerType === "touch") return;
+					send({ type: "pointer.move" });
+				},
+				onPointerOver(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					if (event.pointerType === "touch") return;
+					send({ type: "pointer.move" });
+				},
+				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() {
+			return normalize.element({
+				...parts.content.attrs,
+				dir: prop("dir"),
+				hidden: !open,
+				"data-state": open ? "open" : "closed",
+				role: hasAriaLabel ? void 0 : "tooltip",
+				id: hasAriaLabel ? void 0 : contentId,
+				"data-placement": context.get("currentPlacement"),
+				onPointerEnter() {
+					send({ type: "content.pointer.move" });
+				},
+				onPointerLeave() {
+					send({ type: "content.pointer.leave" });
+				},
+				style: { pointerEvents: prop("interactive") ? "auto" : "none" }
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/tooltip/tooltip.machine.ts
+const { and, not } = require_core.createGuards();
+const machine = require_core.createMachine({
+	initialState: ({ prop }) => {
+		return prop("open") || prop("defaultOpen") ? "open" : "closed";
+	},
+	props({ props: props$1 }) {
+		const closeOnClick = props$1.closeOnClick ?? true;
+		const closeOnPointerDown = props$1.closeOnPointerDown ?? closeOnClick;
+		return {
+			id: "x",
+			openDelay: 400,
+			closeDelay: 150,
+			closeOnEscape: true,
+			interactive: false,
+			closeOnScroll: true,
+			disabled: false,
+			...props$1,
+			closeOnPointerDown,
+			closeOnClick,
+			positioning: {
+				placement: "bottom",
+				...props$1.positioning
+			}
+		};
+	},
+	effects: ["trackFocusVisible", "trackStore"],
+	context: ({ bindable }) => ({
+		currentPlacement: bindable(() => ({ defaultValue: void 0 })),
+		hasPointerMoveOpened: bindable(() => ({ defaultValue: false }))
+	}),
+	watch({ track, action, prop }) {
+		track([() => prop("disabled")], () => {
+			action(["closeIfDisabled"]);
+		});
+		track([() => prop("open")], () => {
+			action(["toggleVisibility"]);
+		});
+	},
+	states: {
+		closed: {
+			entry: ["clearGlobalId"],
+			on: {
+				"controlled.open": { target: "open" },
+				open: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["invokeOnOpen"]
+				}],
+				"pointer.leave": { actions: ["clearPointerMoveOpened"] },
+				"pointer.move": [{
+					guard: and("noVisibleTooltip", not("hasPointerMoveOpened")),
+					target: "opening"
+				}, {
+					guard: not("hasPointerMoveOpened"),
+					target: "open",
+					actions: ["setPointerMoveOpened", "invokeOnOpen"]
+				}]
+			}
+		},
+		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: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["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"] }
+			}
+		},
+		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",
+						"invokeOnOpen",
+						"toggleVisibility"
+					]
+				}, {
+					target: "open",
+					actions: ["setPointerMoveOpened", "invokeOnOpen"]
+				}],
+				"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 }) => {
+				store.set("id", prop("id"));
+			},
+			clearGlobalId: ({ prop }) => {
+				if (prop("id") === store.get("id")) store.set("id", null);
+			},
+			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);
+				return require_popper.getPlacement(getTriggerEl(scope), getPositionerEl$1, {
+					...prop("positioning"),
+					...event.options,
+					defer: true,
+					listeners: false,
+					onComplete(data) {
+						context.set("currentPlacement", data.placement);
+					}
+				});
+			},
+			toggleVisibility: ({ prop, event, send }) => {
+				queueMicrotask(() => {
+					send({
+						type: prop("open") ? "controlled.open" : "controlled.close",
+						previousEvent: event
+					});
+				});
+			},
+			setPointerMoveOpened: ({ context }) => {
+				context.set("hasPointerMoveOpened", true);
+			},
+			clearPointerMoveOpened: ({ context }) => {
+				context.set("hasPointerMoveOpened", false);
+			}
+		},
+		effects: {
+			trackFocusVisible: ({ scope }) => {
+				return require_focus_visible.trackFocusVisible({ root: scope.getRootNode?.() });
+			},
+			trackPositioning: ({ context, prop, scope }) => {
+				if (!context.get("currentPlacement")) context.set("currentPlacement", prop("positioning").placement);
+				const getPositionerEl$1 = () => getPositionerEl(scope);
+				return require_popper.getPlacement(getTriggerEl(scope), getPositionerEl$1, {
+					...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 require_dom_query.addDomEvent(doc, "pointerlockchange", onChange, false);
+			},
+			trackScroll: ({ send, prop, scope }) => {
+				if (!prop("closeOnScroll")) return;
+				const triggerEl = getTriggerEl(scope);
+				if (!triggerEl) return;
+				const cleanups = require_dom_query.getOverflowAncestors(triggerEl).map((overflowParent) => {
+					const onScroll = () => {
+						send({
+							type: "close",
+							src: "scroll"
+						});
+					};
+					return require_dom_query.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 (require_dom_query.isComposingEvent(event)) return;
+					if (event.key !== "Escape") return;
+					event.stopPropagation();
+					send({
+						type: "close",
+						src: "keydown.escape"
+					});
+				};
+				return require_dom_query.addDomEvent(document, "keydown", onKeyDown, true);
+			},
+			waitForOpenDelay: ({ send, prop }) => {
+				const id = setTimeout(() => {
+					send({ type: "after.openDelay" });
+				}, prop("openDelay"));
+				return () => clearTimeout(id);
+			},
+			waitForCloseDelay: ({ send, prop }) => {
+				const id = setTimeout(() => {
+					send({ type: "after.closeDelay" });
+				}, prop("closeDelay"));
+				return () => clearTimeout(id);
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/machines/tooltip/tooltip.props.ts
+const props = require_create_props.createProps()([
+	"aria-label",
+	"closeDelay",
+	"closeOnEscape",
+	"closeOnPointerDown",
+	"closeOnScroll",
+	"closeOnClick",
+	"dir",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"interactive",
+	"onOpenChange",
+	"defaultOpen",
+	"open",
+	"openDelay",
+	"positioning"
+]);
+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/tooltip/index.d.cts

@@ -0,0 +1,71 @@
+import { n as AnatomyInstance } from "../../create-anatomy-BGQ8pv8J.cjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu60O.cjs";
+import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+import { c as Placement, d as PositioningOptions } from "../../types-DiIdKZ3K.cjs";
+
+//#region src/machines/tooltip/tooltip.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"trigger" | "content" | "arrow" | "positioner" | "arrowTip">;
+//#endregion
+//#region src/machines/tooltip/tooltip.types.d.ts
+interface OpenChangeDetails {
+  open: boolean;
+}
+type ElementIds = Partial<{
+  trigger: string;
+  content: string;
+  arrow: string;
+  positioner: string;
+}>;
+interface TooltipProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  openDelay?: number | undefined;
+  closeDelay?: number | undefined;
+  closeOnPointerDown?: boolean | undefined;
+  closeOnEscape?: boolean | undefined;
+  closeOnScroll?: boolean | undefined;
+  closeOnClick?: boolean | undefined;
+  interactive?: boolean | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+  "aria-label"?: string | undefined;
+  positioning?: PositioningOptions | undefined;
+  disabled?: boolean | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+}
+type PropsWithDefault = "openDelay" | "closeDelay" | "closeOnPointerDown" | "closeOnEscape" | "closeOnScroll" | "closeOnClick" | "interactive" | "id" | "positioning";
+interface TooltipSchema {
+  state: "open" | "closed" | "opening" | "closing";
+  props: RequiredBy<TooltipProps, PropsWithDefault>;
+  context: {
+    currentPlacement: Placement | undefined;
+    hasPointerMoveOpened: boolean;
+  };
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type TooltipService = Service<TooltipSchema>;
+type TooltipMachine = Machine<TooltipSchema>;
+interface TooltipApi<T extends PropTypes = PropTypes> {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  reposition: (options?: Partial<PositioningOptions>) => void;
+  getTriggerProps: () => T["button"];
+  getArrowProps: () => T["element"];
+  getArrowTipProps: () => T["element"];
+  getPositionerProps: () => T["element"];
+  getContentProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/tooltip/tooltip.connect.d.ts
+declare function connect<P extends PropTypes>(service: Service<TooltipSchema>, normalize: NormalizeProps<P>): TooltipApi<P>;
+//#endregion
+//#region src/machines/tooltip/tooltip.machine.d.ts
+declare const machine: Machine<TooltipSchema>;
+//#endregion
+//#region src/machines/tooltip/tooltip.props.d.ts
+declare const props: (keyof TooltipProps)[];
+declare const splitProps: <Props extends Partial<TooltipProps>>(props: Props) => [Partial<TooltipProps>, Omit<Props, keyof TooltipProps>];
+//#endregion
+export { type TooltipApi as Api, type ElementIds, type TooltipMachine as Machine, type OpenChangeDetails, type Placement, type PositioningOptions, type TooltipProps as Props, type TooltipService as Service, anatomy, connect, machine, props, splitProps };

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

@@ -0,0 +1,71 @@
+import { n as AnatomyInstance } from "../../create-anatomy-B3XYc-qG.mjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DDTcG99l.mjs";
+import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-C0MKXQmE.mjs";
+import { p as PositioningOptions, u as Placement } from "../../index-D96rs8B0.mjs";
+
+//#region src/machines/tooltip/tooltip.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"trigger" | "content" | "arrow" | "positioner" | "arrowTip">;
+//#endregion
+//#region src/machines/tooltip/tooltip.types.d.ts
+interface OpenChangeDetails {
+  open: boolean;
+}
+type ElementIds = Partial<{
+  trigger: string;
+  content: string;
+  arrow: string;
+  positioner: string;
+}>;
+interface TooltipProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  openDelay?: number | undefined;
+  closeDelay?: number | undefined;
+  closeOnPointerDown?: boolean | undefined;
+  closeOnEscape?: boolean | undefined;
+  closeOnScroll?: boolean | undefined;
+  closeOnClick?: boolean | undefined;
+  interactive?: boolean | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+  "aria-label"?: string | undefined;
+  positioning?: PositioningOptions | undefined;
+  disabled?: boolean | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+}
+type PropsWithDefault = "openDelay" | "closeDelay" | "closeOnPointerDown" | "closeOnEscape" | "closeOnScroll" | "closeOnClick" | "interactive" | "id" | "positioning";
+interface TooltipSchema {
+  state: "open" | "closed" | "opening" | "closing";
+  props: RequiredBy<TooltipProps, PropsWithDefault>;
+  context: {
+    currentPlacement: Placement | undefined;
+    hasPointerMoveOpened: boolean;
+  };
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type TooltipService = Service<TooltipSchema>;
+type TooltipMachine = Machine<TooltipSchema>;
+interface TooltipApi<T extends PropTypes = PropTypes> {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  reposition: (options?: Partial<PositioningOptions>) => void;
+  getTriggerProps: () => T["button"];
+  getArrowProps: () => T["element"];
+  getArrowTipProps: () => T["element"];
+  getPositionerProps: () => T["element"];
+  getContentProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/tooltip/tooltip.connect.d.ts
+declare function connect<P extends PropTypes>(service: Service<TooltipSchema>, normalize: NormalizeProps<P>): TooltipApi<P>;
+//#endregion
+//#region src/machines/tooltip/tooltip.machine.d.ts
+declare const machine: Machine<TooltipSchema>;
+//#endregion
+//#region src/machines/tooltip/tooltip.props.d.ts
+declare const props: (keyof TooltipProps)[];
+declare const splitProps: <Props extends Partial<TooltipProps>>(props: Props) => [Partial<TooltipProps>, Omit<Props, keyof TooltipProps>];
+//#endregion
+export { type TooltipApi as Api, type ElementIds, type TooltipMachine as Machine, type OpenChangeDetails, type Placement, type PositioningOptions, type TooltipProps as Props, type TooltipService as Service, anatomy, connect, machine, props, splitProps };