@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/dialog/index.cjs

@@ -0,0 +1,378 @@
+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_initial_focus = require("../../initial-focus-BQxRRFPa.cjs");
+const require_raf = require("../../raf-BSDcY4UD.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_remove_scroll = require("../../remove-scroll-DTVA5f4w.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/dialog/anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("dialog").parts("trigger", "backdrop", "positioner", "content", "title", "description", "closeTrigger");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/dialog/dom.ts
+const getPositionerId = (ctx) => ctx.ids?.positioner ?? `dialog:${ctx.id}:positioner`;
+const getBackdropId = (ctx) => ctx.ids?.backdrop ?? `dialog:${ctx.id}:backdrop`;
+const getContentId = (ctx) => ctx.ids?.content ?? `dialog:${ctx.id}:content`;
+const getTriggerId = (ctx, value) => {
+	const customId = ctx.ids?.trigger;
+	if (customId != null) return require_utils.isFunction(customId) ? customId(value) : customId;
+	return value ? `dialog:${ctx.id}:trigger:${value}` : `dialog:${ctx.id}:trigger`;
+};
+const getTitleId = (ctx) => ctx.ids?.title ?? `dialog:${ctx.id}:title`;
+const getDescriptionId = (ctx) => ctx.ids?.description ?? `dialog:${ctx.id}:description`;
+const getCloseTriggerId = (ctx) => ctx.ids?.closeTrigger ?? `dialog:${ctx.id}:close`;
+const getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+const getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
+const getBackdropEl = (ctx) => ctx.getById(getBackdropId(ctx));
+const getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
+const getTitleEl = (ctx) => ctx.getById(getTitleId(ctx));
+const getDescriptionEl = (ctx) => ctx.getById(getDescriptionId(ctx));
+const getCloseTriggerEl = (ctx) => ctx.getById(getCloseTriggerId(ctx));
+const getTriggerEls = (ctx) => require_dom_query.queryAll(ctx.getRootNode(), `[data-scope="dialog"][data-part="trigger"][data-ownedby="${ctx.id}"]`);
+const getActiveTriggerEl = (ctx, value) => {
+	if (value == null) return getTriggerEl(ctx) ?? getTriggerEls(ctx)[0];
+	return ctx.getById(getTriggerId(ctx, value));
+};
+//#endregion
+//#region src/machines/dialog/connect.ts
+function connect(service, normalize) {
+	const { state, send, context, prop, scope } = service;
+	const ariaLabel = prop("aria-label");
+	const open = state.matches("open");
+	const triggerValue = context.get("triggerValue");
+	return {
+		open,
+		setOpen(nextOpen) {
+			if (state.matches("open") === nextOpen) return;
+			send({ type: nextOpen ? "OPEN" : "CLOSE" });
+		},
+		triggerValue,
+		setTriggerValue(value) {
+			send({
+				type: "TRIGGER_VALUE.SET",
+				value
+			});
+		},
+		getTriggerProps(props = {}) {
+			const { value } = props;
+			const current = value == null ? false : triggerValue === value;
+			return normalize.button({
+				...parts.trigger.attrs,
+				dir: prop("dir"),
+				id: getTriggerId(scope, value),
+				"data-ownedby": scope.id,
+				"data-value": value,
+				"aria-haspopup": "dialog",
+				type: "button",
+				"aria-expanded": value == null ? open : open && current,
+				"data-state": open ? "open" : "closed",
+				"aria-controls": getContentId(scope),
+				"data-current": require_dom_query.dataAttr(current),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({
+						type: open && value != null && !current ? "TRIGGER_VALUE.SET" : "TOGGLE",
+						value
+					});
+				}
+			});
+		},
+		getBackdropProps() {
+			return normalize.element({
+				...parts.backdrop.attrs,
+				dir: prop("dir"),
+				hidden: !open,
+				id: getBackdropId(scope),
+				"data-state": open ? "open" : "closed"
+			});
+		},
+		getPositionerProps() {
+			return normalize.element({
+				...parts.positioner.attrs,
+				dir: prop("dir"),
+				id: getPositionerId(scope),
+				style: require_utils.compact({ pointerEvents: !open || !prop("modal") ? "none" : void 0 })
+			});
+		},
+		getContentProps() {
+			const rendered = context.get("rendered");
+			return normalize.element({
+				...parts.content.attrs,
+				dir: prop("dir"),
+				role: prop("role"),
+				hidden: !open,
+				id: getContentId(scope),
+				tabIndex: -1,
+				"data-state": open ? "open" : "closed",
+				"aria-modal": prop("modal"),
+				"aria-label": ariaLabel || void 0,
+				"aria-labelledby": ariaLabel || !rendered.title ? void 0 : getTitleId(scope),
+				"aria-describedby": rendered.description ? getDescriptionId(scope) : void 0,
+				style: require_utils.compact({ pointerEvents: prop("modal") ? void 0 : "auto" })
+			});
+		},
+		getTitleProps() {
+			return normalize.element({
+				...parts.title.attrs,
+				dir: prop("dir"),
+				id: getTitleId(scope)
+			});
+		},
+		getDescriptionProps() {
+			return normalize.element({
+				...parts.description.attrs,
+				dir: prop("dir"),
+				id: getDescriptionId(scope)
+			});
+		},
+		getCloseTriggerProps() {
+			return normalize.button({
+				...parts.closeTrigger.attrs,
+				dir: prop("dir"),
+				id: getCloseTriggerId(scope),
+				type: "button",
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					event.stopPropagation();
+					send({ type: "CLOSE" });
+				}
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/dialog/machine.ts
+const machine = require_core.createMachine({
+	props({ props, scope }) {
+		const alertDialog = props.role === "alertdialog";
+		const initialFocusEl = alertDialog ? () => getCloseTriggerEl(scope) : void 0;
+		const modal = typeof props.modal === "boolean" ? props.modal : true;
+		return {
+			role: "dialog",
+			modal,
+			trapFocus: modal,
+			preventScroll: modal,
+			closeOnInteractOutside: modal && !alertDialog,
+			closeOnEscape: true,
+			restoreFocus: true,
+			initialFocusEl,
+			...props
+		};
+	},
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") ? "open" : "closed";
+	},
+	context({ bindable, prop, scope }) {
+		return {
+			rendered: 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)
+					});
+				}
+			}))
+		};
+	},
+	watch({ track, action, prop }) {
+		track([() => prop("open")], () => {
+			action(["toggleVisibility"]);
+		});
+	},
+	states: {
+		open: {
+			entry: ["checkRenderedElements", "setInitialFocus"],
+			effects: [
+				"trackDismissableElement",
+				"trapFocus",
+				"preventScroll",
+				"hideContentBelow"
+			],
+			on: {
+				"CONTROLLED.CLOSE": { target: "closed" },
+				CLOSE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				TOGGLE: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closed",
+					actions: ["invokeOnClose"]
+				}],
+				"TRIGGER_VALUE.SET": { actions: ["setTriggerValue"] }
+			}
+		},
+		closed: { on: {
+			"CONTROLLED.OPEN": { target: "open" },
+			OPEN: [{
+				guard: "isOpenControlled",
+				actions: ["invokeOnOpen", "setTriggerValue"]
+			}, {
+				target: "open",
+				actions: ["invokeOnOpen", "setTriggerValue"]
+			}],
+			TOGGLE: [{
+				guard: "isOpenControlled",
+				actions: ["invokeOnOpen", "setTriggerValue"]
+			}, {
+				target: "open",
+				actions: ["invokeOnOpen", "setTriggerValue"]
+			}],
+			"TRIGGER_VALUE.SET": { actions: ["setTriggerValue"] }
+		} }
+	},
+	implementations: {
+		guards: { isOpenControlled: ({ prop }) => prop("open") != void 0 },
+		effects: {
+			trackDismissableElement({ scope, send, prop }) {
+				const getContentEl$1 = () => getContentEl(scope);
+				return require_dismissable.trackDismissableElement(getContentEl$1, {
+					type: "dialog",
+					defer: true,
+					pointerBlocking: prop("modal"),
+					layerStyleTargets: [() => getBackdropEl(scope), () => getPositionerEl(scope)],
+					exclude: [getTriggerEl(scope), ...getTriggerEls(scope)].filter(Boolean),
+					onInteractOutside(event) {
+						prop("onInteractOutside")?.(event);
+						if (!prop("closeOnInteractOutside")) event.preventDefault();
+					},
+					persistentElements: prop("persistentElements"),
+					onFocusOutside: prop("onFocusOutside"),
+					onPointerDownOutside: prop("onPointerDownOutside"),
+					onRequestDismiss: prop("onRequestDismiss"),
+					onEscapeKeyDown(event) {
+						prop("onEscapeKeyDown")?.(event);
+						if (!prop("closeOnEscape")) event.preventDefault();
+					},
+					onDismiss() {
+						send({
+							type: "CLOSE",
+							src: "interact-outside"
+						});
+					}
+				});
+			},
+			preventScroll({ scope, prop }) {
+				if (!prop("preventScroll")) return;
+				return require_remove_scroll.preventBodyScroll(scope.getDoc());
+			},
+			trapFocus({ scope, prop, context }) {
+				if (!prop("trapFocus")) return;
+				const contentEl = () => getContentEl(scope);
+				return require_focus_trap.trapFocus(contentEl, {
+					preventScroll: true,
+					returnFocusOnDeactivate: !!prop("restoreFocus"),
+					initialFocus: prop("initialFocusEl"),
+					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
+				});
+			},
+			hideContentBelow({ scope, prop }) {
+				if (!prop("modal")) return;
+				const getElements = () => [getContentEl(scope)];
+				return require_aria_hidden.ariaHidden(getElements, { defer: true });
+			}
+		},
+		actions: {
+			setInitialFocus({ prop, scope }) {
+				if (prop("trapFocus")) return;
+				require_raf.raf(() => {
+					require_initial_focus.getInitialFocus({
+						root: getContentEl(scope),
+						getInitialEl: prop("initialFocusEl")
+					})?.focus({ preventScroll: true });
+				});
+			},
+			checkRenderedElements({ context, scope }) {
+				require_raf.raf(() => {
+					context.set("rendered", {
+						title: !!getTitleEl(scope),
+						description: !!getDescriptionEl(scope)
+					});
+				});
+			},
+			invokeOnClose({ prop }) {
+				prop("onOpenChange")?.({ open: false });
+			},
+			invokeOnOpen({ prop }) {
+				prop("onOpenChange")?.({ open: true });
+			},
+			setTriggerValue({ context, event }) {
+				if (event.value === void 0) return;
+				context.set("triggerValue", event.value);
+			},
+			toggleVisibility({ prop, send, event }) {
+				send({
+					type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					previousEvent: event
+				});
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/dialog/props.ts
+const props = require_create_props.createProps()([
+	"triggerValue",
+	"aria-label",
+	"closeOnEscape",
+	"closeOnInteractOutside",
+	"defaultTriggerValue",
+	"defaultOpen",
+	"dir",
+	"finalFocusEl",
+	"getRootNode",
+	"id",
+	"ids",
+	"initialFocusEl",
+	"modal",
+	"onTriggerValueChange",
+	"onEscapeKeyDown",
+	"onFocusOutside",
+	"onInteractOutside",
+	"onOpenChange",
+	"onPointerDownOutside",
+	"onRequestDismiss",
+	"open",
+	"persistentElements",
+	"preventScroll",
+	"restoreFocus",
+	"role",
+	"trapFocus"
+]);
+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/dialog/index.d.cts

@@ -0,0 +1,94 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.cjs";
+import { M as Service, 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";
+//#region src/machines/dialog/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"trigger" | "content" | "title" | "positioner" | "description" | "closeTrigger" | "backdrop">;
+//#endregion
+//#region src/machines/dialog/types.d.ts
+interface OpenChangeDetails {
+  open: boolean;
+}
+interface TriggerValueChangeDetails {
+  value: string | null;
+  triggerElement: HTMLElement | null;
+}
+type ElementIds = Partial<{
+  trigger: string | ((value?: string) => string);
+  positioner: string;
+  backdrop: string;
+  content: string;
+  closeTrigger: string;
+  title: string;
+  description: string;
+}>;
+interface DialogProps extends DirectionProperty, CommonProperties, DismissableElementHandlers, PersistentElementOptions {
+  ids?: ElementIds | undefined;
+  trapFocus?: boolean | undefined;
+  preventScroll?: boolean | undefined;
+  modal?: boolean | undefined;
+  initialFocusEl?: (() => MaybeElement) | undefined;
+  finalFocusEl?: (() => MaybeElement) | undefined;
+  restoreFocus?: boolean | undefined;
+  closeOnInteractOutside?: boolean | undefined;
+  closeOnEscape?: boolean | undefined;
+  "aria-label"?: string | undefined;
+  role?: "dialog" | "alertdialog" | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+  triggerValue?: string | null | undefined;
+  defaultTriggerValue?: string | null | undefined;
+  onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
+}
+type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "role" | "modal" | "trapFocus" | "restoreFocus" | "preventScroll" | "initialFocusEl";
+interface DialogSchema {
+  props: RequiredBy<DialogProps, PropsWithDefault>;
+  state: "open" | "closed";
+  context: {
+    rendered: {
+      title: boolean;
+      description: boolean;
+    };
+    triggerValue: string | null;
+  };
+  guard: "isOpenControlled";
+  effect: "trackDismissableElement" | "preventScroll" | "trapFocus" | "hideContentBelow";
+  action: "checkRenderedElements" | "setInitialFocus" | "invokeOnClose" | "invokeOnOpen" | "toggleVisibility" | "setTriggerValue";
+  event: {
+    type: "CONTROLLED.OPEN" | "CONTROLLED.CLOSE" | "OPEN" | "CLOSE" | "TOGGLE" | "TRIGGER_VALUE.SET";
+    value?: string | null | undefined;
+  };
+}
+type DialogService = Service<DialogSchema>;
+type DialogMachine = Machine<DialogSchema>;
+interface TriggerProps {
+  value?: string;
+}
+interface DialogApi<T extends PropTypes = PropTypes> {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerValue: string | null;
+  setTriggerValue: (value: string | null) => void;
+  getTriggerProps: (props?: TriggerProps) => T["button"];
+  getBackdropProps: () => T["element"];
+  getPositionerProps: () => T["element"];
+  getContentProps: () => T["element"];
+  getTitleProps: () => T["element"];
+  getDescriptionProps: () => T["element"];
+  getCloseTriggerProps: () => T["button"];
+}
+//#endregion
+//#region src/machines/dialog/connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<DialogSchema>, normalize: NormalizeProps<T>): DialogApi<T>;
+//#endregion
+//#region src/machines/dialog/machine.d.ts
+declare const machine: Machine<DialogSchema>;
+//#endregion
+//#region src/machines/dialog/props.d.ts
+declare const props: (keyof DialogProps)[];
+declare const splitProps: <Props extends Partial<DialogProps>>(props: Props) => [Partial<DialogProps>, Omit<Props, keyof DialogProps>];
+//#endregion
+export { type DialogApi as Api, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type DialogMachine as Machine, type OpenChangeDetails, type PointerDownOutsideEvent, type DialogProps as Props, type DialogService as Service, type TriggerProps, type TriggerValueChangeDetails, anatomy, connect, machine, props, splitProps };

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

@@ -0,0 +1,94 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.js";
+import { M as Service, 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";
+//#region src/machines/dialog/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"trigger" | "content" | "title" | "positioner" | "description" | "closeTrigger" | "backdrop">;
+//#endregion
+//#region src/machines/dialog/types.d.ts
+interface OpenChangeDetails {
+  open: boolean;
+}
+interface TriggerValueChangeDetails {
+  value: string | null;
+  triggerElement: HTMLElement | null;
+}
+type ElementIds = Partial<{
+  trigger: string | ((value?: string) => string);
+  positioner: string;
+  backdrop: string;
+  content: string;
+  closeTrigger: string;
+  title: string;
+  description: string;
+}>;
+interface DialogProps extends DirectionProperty, CommonProperties, DismissableElementHandlers, PersistentElementOptions {
+  ids?: ElementIds | undefined;
+  trapFocus?: boolean | undefined;
+  preventScroll?: boolean | undefined;
+  modal?: boolean | undefined;
+  initialFocusEl?: (() => MaybeElement) | undefined;
+  finalFocusEl?: (() => MaybeElement) | undefined;
+  restoreFocus?: boolean | undefined;
+  closeOnInteractOutside?: boolean | undefined;
+  closeOnEscape?: boolean | undefined;
+  "aria-label"?: string | undefined;
+  role?: "dialog" | "alertdialog" | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+  triggerValue?: string | null | undefined;
+  defaultTriggerValue?: string | null | undefined;
+  onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
+}
+type PropsWithDefault = "closeOnInteractOutside" | "closeOnEscape" | "role" | "modal" | "trapFocus" | "restoreFocus" | "preventScroll" | "initialFocusEl";
+interface DialogSchema {
+  props: RequiredBy<DialogProps, PropsWithDefault>;
+  state: "open" | "closed";
+  context: {
+    rendered: {
+      title: boolean;
+      description: boolean;
+    };
+    triggerValue: string | null;
+  };
+  guard: "isOpenControlled";
+  effect: "trackDismissableElement" | "preventScroll" | "trapFocus" | "hideContentBelow";
+  action: "checkRenderedElements" | "setInitialFocus" | "invokeOnClose" | "invokeOnOpen" | "toggleVisibility" | "setTriggerValue";
+  event: {
+    type: "CONTROLLED.OPEN" | "CONTROLLED.CLOSE" | "OPEN" | "CLOSE" | "TOGGLE" | "TRIGGER_VALUE.SET";
+    value?: string | null | undefined;
+  };
+}
+type DialogService = Service<DialogSchema>;
+type DialogMachine = Machine<DialogSchema>;
+interface TriggerProps {
+  value?: string;
+}
+interface DialogApi<T extends PropTypes = PropTypes> {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerValue: string | null;
+  setTriggerValue: (value: string | null) => void;
+  getTriggerProps: (props?: TriggerProps) => T["button"];
+  getBackdropProps: () => T["element"];
+  getPositionerProps: () => T["element"];
+  getContentProps: () => T["element"];
+  getTitleProps: () => T["element"];
+  getDescriptionProps: () => T["element"];
+  getCloseTriggerProps: () => T["button"];
+}
+//#endregion
+//#region src/machines/dialog/connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<DialogSchema>, normalize: NormalizeProps<T>): DialogApi<T>;
+//#endregion
+//#region src/machines/dialog/machine.d.ts
+declare const machine: Machine<DialogSchema>;
+//#endregion
+//#region src/machines/dialog/props.d.ts
+declare const props: (keyof DialogProps)[];
+declare const splitProps: <Props extends Partial<DialogProps>>(props: Props) => [Partial<DialogProps>, Omit<Props, keyof DialogProps>];
+//#endregion
+export { type DialogApi as Api, type ElementIds, type FocusOutsideEvent, type InteractOutsideEvent, type DialogMachine as Machine, type OpenChangeDetails, type PointerDownOutsideEvent, type DialogProps as Props, type DialogService as Service, type TriggerProps, type TriggerValueChangeDetails, anatomy, connect, machine, props, splitProps };