@wirekyt/dom 0.0.1 → 0.0.2

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

@@ -0,0 +1,441 @@
+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_utils = require("../../utils-BH-oBBz2.cjs");
+const require_core = require("../../core-BNMw-JId.cjs");
+const require_dismissable = require("../../dismissable-C0bixtzl.cjs");
+const require_popper = require("../../popper-DkAAS9VE.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/hover-card/anatomy.ts
+const anatomy = require_create_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 require_utils.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) => require_dom_query.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 ? require_popper.getPlacementSide(currentPlacement) : void 0;
+	const popperStyles = require_popper.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": require_dom_query.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 } = require_core.createGuards();
+const machine = require_core.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 require_popper.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 require_dismissable.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"));
+				require_popper.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 = require_create_props.createProps()([
+	"closeDelay",
+	"defaultOpen",
+	"defaultTriggerValue",
+	"dir",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"onFocusOutside",
+	"onInteractOutside",
+	"onOpenChange",
+	"onPointerDownOutside",
+	"onTriggerValueChange",
+	"open",
+	"openDelay",
+	"positioning",
+	"triggerValue"
+]);
+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/hover-card/index.d.cts

@@ -0,0 +1,82 @@
+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";
+import { p as PositioningOptions, u as Placement } from "../../index-3tNJficI.cjs";
+//#region src/machines/hover-card/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"trigger" | "content" | "arrow" | "arrowTip" | "positioner">;
+//#endregion
+//#region src/machines/hover-card/types.d.ts
+interface OpenChangeDetails {
+  open: boolean;
+}
+interface TriggerValueChangeDetails {
+  value: string | null;
+  triggerElement: HTMLElement | null;
+}
+type ElementIds = Partial<{
+  trigger: string | ((value?: string) => string);
+  content: string;
+  positioner: string;
+  arrow: string;
+}>;
+interface HoverCardProps extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
+  ids?: ElementIds | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+  openDelay?: number | undefined;
+  closeDelay?: number | undefined;
+  disabled?: boolean | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+  positioning?: PositioningOptions | undefined;
+  triggerValue?: string | null | undefined;
+  defaultTriggerValue?: string | null | undefined;
+  onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
+}
+type PropsWithDefault = "openDelay" | "closeDelay" | "positioning";
+interface PrivateContext {
+  currentPlacement: Placement | undefined;
+  isPointer: boolean;
+  open: boolean;
+  triggerValue: string | null;
+}
+interface HoverCardSchema {
+  props: RequiredBy<HoverCardProps, PropsWithDefault>;
+  context: PrivateContext;
+  state: "opening" | "open" | "closing" | "closed";
+  tag: "open" | "closed";
+  action: string;
+  event: EventObject;
+  guard: string;
+  effect: string;
+}
+type HoverCardService = Service<HoverCardSchema>;
+type HoverCardMachine = Machine<HoverCardSchema>;
+interface TriggerProps {
+  value?: string;
+}
+interface HoverCardApi<T extends PropTypes = PropTypes> {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerValue: string | null;
+  setTriggerValue: (value: string | null) => void;
+  reposition: (options?: Partial<PositioningOptions>) => void;
+  getArrowProps: () => T["element"];
+  getArrowTipProps: () => T["element"];
+  getTriggerProps: (props?: TriggerProps) => T["element"];
+  getPositionerProps: () => T["element"];
+  getContentProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/hover-card/connect.d.ts
+declare function connect<T extends PropTypes>(service: HoverCardService, normalize: NormalizeProps<T>): HoverCardApi<T>;
+//#endregion
+//#region src/machines/hover-card/machine.d.ts
+declare const machine: Machine<HoverCardSchema>;
+//#endregion
+//#region src/machines/hover-card/props.d.ts
+declare const props: (keyof HoverCardProps)[];
+declare const splitProps: <Props extends Partial<HoverCardProps>>(props: Props) => [Partial<HoverCardProps>, Omit<Props, keyof HoverCardProps>];
+//#endregion
+export { type HoverCardApi as Api, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type HoverCardMachine as Machine, type OpenChangeDetails, type Placement, type PointerDownOutsideEvent, type PositioningOptions, type HoverCardProps as Props, type HoverCardService as Service, type TriggerProps, type TriggerValueChangeDetails, anatomy, connect, machine, props, splitProps };

package/dist/machines/hover-card/index.d.ts

@@ -0,0 +1,82 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.js";
+import { M as Service, S as EventObject, T as Machine } from "../../index-CFoN0L3C.js";
+import { b as PropTypes, g as RequiredBy, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusOutsideEvent, r as InteractOutsideEvent } from "../../index-C2865AJq.js";
+import "../../index-BdeZuSX6.js";
+import { p as PositioningOptions, u as Placement } from "../../index-3tNJficI.js";
+//#region src/machines/hover-card/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"trigger" | "content" | "arrow" | "arrowTip" | "positioner">;
+//#endregion
+//#region src/machines/hover-card/types.d.ts
+interface OpenChangeDetails {
+  open: boolean;
+}
+interface TriggerValueChangeDetails {
+  value: string | null;
+  triggerElement: HTMLElement | null;
+}
+type ElementIds = Partial<{
+  trigger: string | ((value?: string) => string);
+  content: string;
+  positioner: string;
+  arrow: string;
+}>;
+interface HoverCardProps extends DirectionProperty, CommonProperties, InteractOutsideHandlers {
+  ids?: ElementIds | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+  openDelay?: number | undefined;
+  closeDelay?: number | undefined;
+  disabled?: boolean | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+  positioning?: PositioningOptions | undefined;
+  triggerValue?: string | null | undefined;
+  defaultTriggerValue?: string | null | undefined;
+  onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
+}
+type PropsWithDefault = "openDelay" | "closeDelay" | "positioning";
+interface PrivateContext {
+  currentPlacement: Placement | undefined;
+  isPointer: boolean;
+  open: boolean;
+  triggerValue: string | null;
+}
+interface HoverCardSchema {
+  props: RequiredBy<HoverCardProps, PropsWithDefault>;
+  context: PrivateContext;
+  state: "opening" | "open" | "closing" | "closed";
+  tag: "open" | "closed";
+  action: string;
+  event: EventObject;
+  guard: string;
+  effect: string;
+}
+type HoverCardService = Service<HoverCardSchema>;
+type HoverCardMachine = Machine<HoverCardSchema>;
+interface TriggerProps {
+  value?: string;
+}
+interface HoverCardApi<T extends PropTypes = PropTypes> {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerValue: string | null;
+  setTriggerValue: (value: string | null) => void;
+  reposition: (options?: Partial<PositioningOptions>) => void;
+  getArrowProps: () => T["element"];
+  getArrowTipProps: () => T["element"];
+  getTriggerProps: (props?: TriggerProps) => T["element"];
+  getPositionerProps: () => T["element"];
+  getContentProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/hover-card/connect.d.ts
+declare function connect<T extends PropTypes>(service: HoverCardService, normalize: NormalizeProps<T>): HoverCardApi<T>;
+//#endregion
+//#region src/machines/hover-card/machine.d.ts
+declare const machine: Machine<HoverCardSchema>;
+//#endregion
+//#region src/machines/hover-card/props.d.ts
+declare const props: (keyof HoverCardProps)[];
+declare const splitProps: <Props extends Partial<HoverCardProps>>(props: Props) => [Partial<HoverCardProps>, Omit<Props, keyof HoverCardProps>];
+//#endregion
+export { type HoverCardApi as Api, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type HoverCardMachine as Machine, type OpenChangeDetails, type Placement, type PointerDownOutsideEvent, type PositioningOptions, type HoverCardProps as Props, type HoverCardService as Service, type TriggerProps, type TriggerValueChangeDetails, anatomy, connect, machine, props, splitProps };