@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/popover/index.d.ts

@@ -0,0 +1,107 @@
+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, s as MaybeElement, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import { c as PointerDownOutsideEvent, n as FocusOutsideEvent, r as InteractOutsideEvent } from "../../index-C2865AJq.js";
+import { r as PersistentElementOptions, t as DismissableElementHandlers } from "../../dismissable-layer-BTX5EvXw.js";
+import "../../index-BdeZuSX6.js";
+import { p as PositioningOptions, u as Placement } from "../../index-3tNJficI.js";
+//#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 };

package/dist/machines/popover/index.js

@@ -0,0 +1,511 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { L as ariaAttr, f as queryAll, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { f as isSafari } from "../../platform-BDB0wXUk.js";
+import { m as isLeftClick } from "../../event-bTItRgiw.js";
+import { t as getInitialFocus } from "../../initial-focus-BrN5tT2X.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { t as proxyTabFocus } from "../../proxy-tab-focus-DWMXvAfO.js";
+import { t as ariaHidden } from "../../aria-hidden-CEXexb2I.js";
+import { Q as isFunction, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { r as createMachine } from "../../core-CJ0MZr3D.js";
+import { n as trackDismissableElement } from "../../dismissable-KM1jPtNQ.js";
+import { t as trapFocus } from "../../focus-trap-89E5I9nm.js";
+import { n as getPlacement, r as getPlacementSide, t as getPlacementStyles } from "../../popper-DzBZzAe4.js";
+import { t as preventBodyScroll } from "../../remove-scroll-WEheFCiq.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/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/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 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) => 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 ? getPlacementSide(currentPlacement) : void 0;
+	const portalled = computed("currentPortalled");
+	const rendered = context.get("renderedElements");
+	const triggerValue = context.get("triggerValue");
+	const popperStyles = 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": dataAttr(current),
+				"aria-haspopup": "dialog",
+				"aria-expanded": value == null ? open : open && current,
+				"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: 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": 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,
+				"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 = 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 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 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 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 ariaHidden(getElements, { defer: true });
+			},
+			preventScroll({ prop, scope }) {
+				if (!prop("modal")) return;
+				return preventBodyScroll(scope.getDoc());
+			},
+			trapFocus({ prop, scope, context }) {
+				if (!prop("modal")) return;
+				const contentEl = () => getContentEl(scope);
+				return trapFocus(contentEl, {
+					preventScroll: true,
+					returnFocusOnDeactivate: !!prop("restoreFocus"),
+					initialFocus: () => 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"));
+				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 }) {
+				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, prop, scope, context }) {
+				const eventRestoreFocus = event.restoreFocus ?? event.previousEvent?.restoreFocus;
+				if (eventRestoreFocus != null && !eventRestoreFocus) return;
+				if (!prop("restoreFocus")) return;
+				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 = 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 = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, props, splitProps };