@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/popover/index.cjs

@@ -0,0 +1,516 @@
+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_platform = require("../../platform-BZS-dkZN.cjs");
+const require_event = require("../../event-DDz-mMhM.cjs");
+const require_initial_focus = require("../../initial-focus-BQxRRFPa.cjs");
+const require_raf = require("../../raf-BSDcY4UD.cjs");
+const require_proxy_tab_focus = require("../../proxy-tab-focus-NthYgHdY.cjs");
+const require_aria_hidden = require("../../aria-hidden-Y7iJHPMr.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_focus_trap = require("../../focus-trap-D7jKsfHW.cjs");
+const require_popper = require("../../popper-DkAAS9VE.cjs");
+const require_remove_scroll = require("../../remove-scroll-DTVA5f4w.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/popover/anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("popover").parts("arrow", "arrowTip", "anchor", "trigger", "indicator", "positioner", "content", "title", "description", "closeTrigger");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/popover/dom.ts
+const getAnchorId = (scope) => scope.ids?.anchor ?? `popover:${scope.id}:anchor`;
+const getTriggerId = (scope, value) => {
+	const customId = scope.ids?.trigger;
+	if (customId != null) return require_utils.isFunction(customId) ? customId(value) : customId;
+	return value ? `popover:${scope.id}:trigger:${value}` : `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 getTriggerEls = (scope) => require_dom_query.queryAll(scope.getRootNode(), `[data-scope="popover"][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));
+};
+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/connect.ts
+function connect(service, normalize) {
+	const { state, context, send, computed, prop, scope } = service;
+	const translations = prop("translations");
+	const open = state.matches("open");
+	const currentPlacement = context.get("currentPlacement");
+	const currentPlacementSide = currentPlacement ? require_popper.getPlacementSide(currentPlacement) : void 0;
+	const portalled = computed("currentPortalled");
+	const rendered = context.get("renderedElements");
+	const triggerValue = context.get("triggerValue");
+	const popperStyles = require_popper.getPlacementStyles({
+		...prop("positioning"),
+		placement: currentPlacement
+	});
+	return {
+		portalled,
+		open,
+		setOpen(nextOpen) {
+			if (state.matches("open") === nextOpen) 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
+			});
+		},
+		getAnchorProps() {
+			return normalize.element({
+				...parts.anchor.attrs,
+				dir: prop("dir"),
+				id: getAnchorId(scope)
+			});
+		},
+		getTriggerProps(props = {}) {
+			const { value } = props;
+			const current = value == null ? false : triggerValue === value;
+			return normalize.button({
+				...parts.trigger.attrs,
+				dir: prop("dir"),
+				type: "button",
+				"data-placement": currentPlacement,
+				"data-side": currentPlacementSide,
+				id: getTriggerId(scope, value),
+				"data-ownedby": scope.id,
+				"data-value": value,
+				"data-current": require_dom_query.dataAttr(current),
+				"aria-haspopup": "dialog",
+				"aria-expanded": value == null ? open : open && current,
+				"data-state": open ? "open" : "closed",
+				"aria-controls": getContentId(scope),
+				onPointerDown(event) {
+					if (!require_event.isLeftClick(event)) return;
+					if (require_platform.isSafari()) event.currentTarget.focus();
+				},
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({
+						type: open && value != null && !current ? "TRIGGER_VALUE.SET" : "TOGGLE",
+						value
+					});
+				},
+				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": require_dom_query.ariaAttr(prop("modal")),
+				hidden: !open,
+				"data-state": open ? "open" : "closed",
+				"data-expanded": require_dom_query.dataAttr(open),
+				"aria-labelledby": rendered.title ? getTitleId(scope) : void 0,
+				"aria-describedby": rendered.description ? getDescriptionId(scope) : void 0,
+				"data-placement": currentPlacement,
+				"data-side": currentPlacementSide
+			});
+		},
+		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": translations.closeTriggerLabel,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					event.stopPropagation();
+					send({ type: "CLOSE" });
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/popover/machine.ts
+const machine = require_core.createMachine({
+	props({ props }) {
+		return {
+			closeOnInteractOutside: true,
+			closeOnEscape: true,
+			autoFocus: true,
+			modal: false,
+			portalled: true,
+			restoreFocus: true,
+			...props,
+			translations: {
+				closeTriggerLabel: "close",
+				...props.translations
+			},
+			positioning: {
+				placement: "bottom",
+				...props.positioning
+			}
+		};
+	},
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") ? "open" : "closed";
+	},
+	context({ bindable, prop, scope }) {
+		return {
+			currentPlacement: bindable(() => ({ defaultValue: void 0 })),
+			renderedElements: bindable(() => ({ defaultValue: {
+				title: true,
+				description: true
+			} })),
+			triggerValue: bindable(() => ({
+				defaultValue: prop("defaultTriggerValue") ?? null,
+				value: prop("triggerValue"),
+				onChange(value) {
+					const onTriggerValueChange = prop("onTriggerValueChange");
+					if (!onTriggerValueChange) return;
+					onTriggerValueChange({
+						value,
+						triggerElement: getActiveTriggerEl(scope, value)
+					});
+				}
+			}))
+		};
+	},
+	computed: { currentPortalled: ({ prop }) => !!prop("modal") || !!prop("portalled") },
+	watch({ track, prop, action }) {
+		track([() => prop("open")], () => {
+			action(["toggleVisibility"]);
+		});
+	},
+	entry: ["checkRenderedElements"],
+	on: { "TRIGGER_VALUE.SET": { actions: ["setTriggerValue", "reposition"] } },
+	states: {
+		closed: { on: {
+			"CONTROLLED.OPEN": {
+				target: "open",
+				actions: ["setInitialFocus"]
+			},
+			TOGGLE: [{
+				guard: "isOpenControlled",
+				actions: ["invokeOnOpen", "setTriggerValue"]
+			}, {
+				target: "open",
+				actions: [
+					"invokeOnOpen",
+					"setTriggerValue",
+					"setInitialFocus"
+				]
+			}],
+			OPEN: [{
+				guard: "isOpenControlled",
+				actions: ["invokeOnOpen", "setTriggerValue"]
+			}, {
+				target: "open",
+				actions: [
+					"invokeOnOpen",
+					"setTriggerValue",
+					"setInitialFocus"
+				]
+			}]
+		} },
+		open: {
+			effects: [
+				"trapFocus",
+				"preventScroll",
+				"hideContentBelow",
+				"trackDismissableElement",
+				"trackPositioning",
+				"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);
+				const getPositionerEl$2 = () => getPositionerEl(scope);
+				const getTriggerEl = () => anchorEl ?? 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, prop, scope }) {
+				const getContentEl$2 = () => getContentEl(scope);
+				let restoreFocus = true;
+				return require_dismissable.trackDismissableElement(getContentEl$2, {
+					type: "popover",
+					pointerBlocking: prop("modal"),
+					exclude: [getTriggerEl(scope), ...getTriggerEls(scope)].filter(Boolean),
+					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, context }) {
+				if (prop("modal") || !prop("portalled")) return;
+				const getContentEl$1 = () => getContentEl(scope);
+				return require_proxy_tab_focus.proxyTabFocus(getContentEl$1, {
+					triggerElement: getActiveTriggerEl(scope, context.get("triggerValue")),
+					defer: true,
+					getShadowRoot: true,
+					onFocus(el) {
+						el.focus({ preventScroll: true });
+					}
+				});
+			},
+			hideContentBelow({ prop, scope, context }) {
+				if (!prop("modal")) return;
+				const getElements = () => [getContentEl(scope), getActiveTriggerEl(scope, context.get("triggerValue"))];
+				return require_aria_hidden.ariaHidden(getElements, { defer: true });
+			},
+			preventScroll({ prop, scope }) {
+				if (!prop("modal")) return;
+				return require_remove_scroll.preventBodyScroll(scope.getDoc());
+			},
+			trapFocus({ prop, scope, context }) {
+				if (!prop("modal")) return;
+				const contentEl = () => getContentEl(scope);
+				return require_focus_trap.trapFocus(contentEl, {
+					preventScroll: true,
+					returnFocusOnDeactivate: !!prop("restoreFocus"),
+					initialFocus: () => require_initial_focus.getInitialFocus({
+						root: getContentEl(scope),
+						getInitialEl: prop("initialFocusEl"),
+						enabled: prop("autoFocus")
+					}),
+					setReturnFocus: (el) => {
+						const finalFocusEl = prop("finalFocusEl")?.();
+						if (finalFocusEl) return finalFocusEl;
+						const triggerValue = context.get("triggerValue");
+						if (triggerValue) {
+							const activeTriggerEl = getActiveTriggerEl(scope, triggerValue);
+							if (activeTriggerEl) return activeTriggerEl;
+						}
+						const fallbackTrigger = getTriggerEls(scope)[0];
+						if (fallbackTrigger) return fallbackTrigger;
+						return el;
+					},
+					getShadowRoot: true
+				});
+			}
+		},
+		actions: {
+			reposition({ event, prop, scope, context }) {
+				const anchorEl = getAnchorEl(scope);
+				const getPositionerEl$1 = () => getPositionerEl(scope);
+				const getTriggerEl = () => anchorEl ?? 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);
+			},
+			checkRenderedElements({ context, scope }) {
+				require_raf.raf(() => {
+					Object.assign(context.get("renderedElements"), {
+						title: !!getTitleEl(scope),
+						description: !!getDescriptionEl(scope)
+					});
+				});
+			},
+			setInitialFocus({ prop, scope }) {
+				if (prop("modal")) return;
+				require_raf.raf(() => {
+					require_initial_focus.getInitialFocus({
+						root: getContentEl(scope),
+						getInitialEl: prop("initialFocusEl"),
+						enabled: prop("autoFocus")
+					})?.focus({ preventScroll: true });
+				});
+			},
+			setFinalFocus({ event, prop, scope, context }) {
+				const eventRestoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
+				if (eventRestoreFocus != null && !eventRestoreFocus) return;
+				if (!prop("restoreFocus")) return;
+				require_raf.raf(() => {
+					const finalFocusEl = prop("finalFocusEl")?.();
+					if (finalFocusEl) {
+						finalFocusEl.focus({ preventScroll: true });
+						return;
+					}
+					getActiveTriggerEl(scope, context.get("triggerValue"))?.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/props.ts
+const props = require_create_props.createProps()([
+	"autoFocus",
+	"closeOnEscape",
+	"closeOnInteractOutside",
+	"defaultOpen",
+	"defaultTriggerValue",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"finalFocusEl",
+	"initialFocusEl",
+	"modal",
+	"onEscapeKeyDown",
+	"onFocusOutside",
+	"onInteractOutside",
+	"onOpenChange",
+	"onPointerDownOutside",
+	"onTriggerValueChange",
+	"onRequestDismiss",
+	"open",
+	"persistentElements",
+	"portalled",
+	"restoreFocus",
+	"positioning",
+	"translations",
+	"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/popover/index.d.cts

@@ -0,0 +1,107 @@
+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, s as MaybeElement, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.cjs";
+import { c as PointerDownOutsideEvent, n as FocusOutsideEvent, r as InteractOutsideEvent } from "../../index-C2865AJq.cjs";
+import { r as PersistentElementOptions, t as DismissableElementHandlers } from "../../dismissable-layer-Ch5niVaq.cjs";
+import "../../index-BF6G2RiC.cjs";
+import { p as PositioningOptions, u as Placement } from "../../index-3tNJficI.cjs";
+//#region src/machines/popover/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"trigger" | "content" | "indicator" | "arrow" | "title" | "arrowTip" | "positioner" | "anchor" | "description" | "closeTrigger">;
+//#endregion
+//#region src/machines/popover/types.d.ts
+interface OpenChangeDetails {
+  open: boolean;
+}
+interface TriggerValueChangeDetails {
+  value: string | null;
+  triggerElement: HTMLElement | null;
+}
+interface IntlTranslations {
+  closeTriggerLabel?: string | undefined;
+}
+type ElementIds = Partial<{
+  anchor: string;
+  trigger: string | ((value?: string) => string);
+  content: string;
+  title: string;
+  description: string;
+  closeTrigger: string;
+  positioner: string;
+  arrow: string;
+}>;
+interface PopoverProps extends CommonProperties, DirectionProperty, DismissableElementHandlers, PersistentElementOptions {
+  translations?: IntlTranslations | undefined;
+  ids?: ElementIds | undefined;
+  modal?: boolean | undefined;
+  portalled?: boolean | undefined;
+  autoFocus?: boolean | undefined;
+  initialFocusEl?: (() => HTMLElement | null) | undefined;
+  finalFocusEl?: (() => MaybeElement) | undefined;
+  restoreFocus?: boolean | undefined;
+  closeOnInteractOutside?: boolean | undefined;
+  closeOnEscape?: boolean | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+  positioning?: PositioningOptions | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+  triggerValue?: string | null | undefined;
+  defaultTriggerValue?: string | null | undefined;
+  onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
+}
+type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "modal" | "portalled" | "autoFocus" | "restoreFocus" | "positioning" | "translations";
+type ComputedContext = Readonly<{
+  currentPortalled: boolean;
+}>;
+interface PrivateContext {
+  renderedElements: {
+    title: boolean;
+    description: boolean;
+  };
+  currentPlacement?: Placement | undefined;
+  triggerValue: string | null;
+}
+interface PopoverSchema {
+  props: RequiredBy<PopoverProps, PropsWithDefault>;
+  state: "open" | "closed";
+  context: PrivateContext;
+  computed: ComputedContext;
+  event: EventObject;
+  action: string;
+  effect: string;
+  guard: string;
+}
+type PopoverService = Service<PopoverSchema>;
+type PopoverMachine = Machine<PopoverSchema>;
+interface TriggerProps {
+  value?: string;
+}
+interface PopoverApi<T extends PropTypes = PropTypes> {
+  portalled: boolean;
+  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"];
+  getAnchorProps: () => T["element"];
+  getTriggerProps: (props?: TriggerProps) => T["button"];
+  getIndicatorProps: () => T["element"];
+  getPositionerProps: () => T["element"];
+  getContentProps: () => T["element"];
+  getTitleProps: () => T["element"];
+  getDescriptionProps: () => T["element"];
+  getCloseTriggerProps: () => T["button"];
+}
+//#endregion
+//#region src/machines/popover/connect.d.ts
+declare function connect<T extends PropTypes>(service: PopoverService, normalize: NormalizeProps<T>): PopoverApi<T>;
+//#endregion
+//#region src/machines/popover/machine.d.ts
+declare const machine: Machine<PopoverSchema>;
+//#endregion
+//#region src/machines/popover/props.d.ts
+declare const props: (keyof PopoverProps)[];
+declare const splitProps: <Props extends Partial<PopoverProps>>(props: Props) => [Partial<PopoverProps>, Omit<Props, keyof PopoverProps>];
+//#endregion
+export { type PopoverApi as Api, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type IntlTranslations, type PopoverMachine as Machine, type OpenChangeDetails, type Placement, type PointerDownOutsideEvent, type PositioningOptions, type PopoverProps as Props, type PopoverService as Service, type TriggerProps, type TriggerValueChangeDetails, anatomy, connect, machine, props, splitProps };