@sprawlify/primitives 0.0.1

package/dist/machines/dialog/index.cjs

@@ -0,0 +1,325 @@
+const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
+const require_dom_query = require('../../dom-query-CWZdWUGp.cjs');
+const require_aria_hidden = require('../../aria-hidden-DtLU6hSU.cjs');
+const require_utils = require('../../utils-_6frwjgJ.cjs');
+const require_core = require('../../core-CQFbMdTl.cjs');
+require('../../interact-outside-C8-oFBpB.cjs');
+const require_dismissable = require('../../dismissable-CTfKZ4OG.cjs');
+const require_focus_trap = require('../../focus-trap-D4i52S9A.cjs');
+const require_create_props = require('../../create-props-YKy7JIKj.cjs');
+const require_remove_scroll = require('../../remove-scroll-Uvzg1L9r.cjs');
+
+//#region src/machines/dialog/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/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) => ctx.ids?.trigger ?? `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));
+
+//#endregion
+//#region src/machines/dialog/dialog.connect.ts
+function connect(service, normalize) {
+	const { state, send, context, prop, scope } = service;
+	const ariaLabel = prop("aria-label");
+	const open = state.matches("open");
+	return {
+		open,
+		setOpen(nextOpen) {
+			if (state.matches("open") === nextOpen) return;
+			send({ type: nextOpen ? "OPEN" : "CLOSE" });
+		},
+		getTriggerProps() {
+			return normalize.button({
+				...parts.trigger.attrs,
+				dir: prop("dir"),
+				id: getTriggerId(scope),
+				"aria-haspopup": "dialog",
+				type: "button",
+				"aria-expanded": open,
+				"data-state": open ? "open" : "closed",
+				"aria-controls": getContentId(scope),
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					send({ type: "TOGGLE" });
+				}
+			});
+		},
+		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: { pointerEvents: open ? void 0 : "none" }
+			});
+		},
+		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": true,
+				"aria-label": ariaLabel || void 0,
+				"aria-labelledby": ariaLabel || !rendered.title ? void 0 : getTitleId(scope),
+				"aria-describedby": rendered.description ? getDescriptionId(scope) : void 0
+			});
+		},
+		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/dialog.machine.ts
+const machine = require_core.createMachine({
+	props({ props: props$1, scope }) {
+		const alertDialog = props$1.role === "alertdialog";
+		const initialFocusEl = alertDialog ? () => getCloseTriggerEl(scope) : void 0;
+		const modal = typeof props$1.modal === "boolean" ? props$1.modal : true;
+		return {
+			role: "dialog",
+			modal,
+			trapFocus: modal,
+			preventScroll: modal,
+			closeOnInteractOutside: !alertDialog,
+			closeOnEscape: true,
+			restoreFocus: true,
+			initialFocusEl,
+			...props$1
+		};
+	},
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") ? "open" : "closed";
+	},
+	context({ bindable }) {
+		return { rendered: bindable(() => ({ defaultValue: {
+			title: true,
+			description: true
+		} })) };
+	},
+	watch({ track, action, prop }) {
+		track([() => prop("open")], () => {
+			action(["toggleVisibility"]);
+		});
+	},
+	states: {
+		open: {
+			entry: ["checkRenderedElements", "syncZIndex"],
+			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"]
+				}]
+			}
+		},
+		closed: { on: {
+			"CONTROLLED.OPEN": { target: "open" },
+			OPEN: [{
+				guard: "isOpenControlled",
+				actions: ["invokeOnOpen"]
+			}, {
+				target: "open",
+				actions: ["invokeOnOpen"]
+			}],
+			TOGGLE: [{
+				guard: "isOpenControlled",
+				actions: ["invokeOnOpen"]
+			}, {
+				target: "open",
+				actions: ["invokeOnOpen"]
+			}]
+		} }
+	},
+	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"),
+					exclude: [getTriggerEl(scope)],
+					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 }) {
+				if (!prop("trapFocus")) return;
+				const contentEl = () => getContentEl(scope);
+				return require_focus_trap.trapFocus(contentEl, {
+					preventScroll: true,
+					returnFocusOnDeactivate: !!prop("restoreFocus"),
+					initialFocus: prop("initialFocusEl"),
+					setReturnFocus: (el) => prop("finalFocusEl")?.() ?? el,
+					getShadowRoot: true
+				});
+			},
+			hideContentBelow({ scope, prop }) {
+				if (!prop("modal")) return;
+				const getElements = () => [getContentEl(scope)];
+				return require_aria_hidden.ariaHidden(getElements, { defer: true });
+			}
+		},
+		actions: {
+			checkRenderedElements({ context, scope }) {
+				require_dom_query.raf(() => {
+					context.set("rendered", {
+						title: !!getTitleEl(scope),
+						description: !!getDescriptionEl(scope)
+					});
+				});
+			},
+			syncZIndex({ scope }) {
+				require_dom_query.raf(() => {
+					const contentEl = getContentEl(scope);
+					if (!contentEl) return;
+					const styles = require_dom_query.getComputedStyle(contentEl);
+					[getPositionerEl(scope), getBackdropEl(scope)].forEach((node) => {
+						node?.style.setProperty("--z-index", styles.zIndex);
+						node?.style.setProperty("--layer-index", styles.getPropertyValue("--layer-index"));
+					});
+				});
+			},
+			invokeOnClose({ prop }) {
+				prop("onOpenChange")?.({ open: false });
+			},
+			invokeOnOpen({ prop }) {
+				prop("onOpenChange")?.({ open: true });
+			},
+			toggleVisibility({ prop, send, event }) {
+				send({
+					type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE",
+					previousEvent: event
+				});
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/machines/dialog/dialog.props.ts
+const props = require_create_props.createProps()([
+	"aria-label",
+	"closeOnEscape",
+	"closeOnInteractOutside",
+	"dir",
+	"finalFocusEl",
+	"getRootNode",
+	"getRootNode",
+	"id",
+	"id",
+	"ids",
+	"initialFocusEl",
+	"modal",
+	"onEscapeKeyDown",
+	"onFocusOutside",
+	"onInteractOutside",
+	"onOpenChange",
+	"onPointerDownOutside",
+	"onRequestDismiss",
+	"defaultOpen",
+	"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,80 @@
+import { n as AnatomyInstance } from "../../create-anatomy-BGQ8pv8J.cjs";
+import { p as Machine, y as Service } from "../../types-DejIu60O.cjs";
+import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, s as MaybeElement, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+import { c as PointerDownOutsideEvent, n as FocusOutsideEvent, r as InteractOutsideEvent } from "../../index-C9-feK5c.cjs";
+import { r as PersistentElementOptions, t as DismissableElementHandlers } from "../../dismissable-layer-C7pZU2wi.cjs";
+
+//#region src/machines/dialog/dialog.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"title" | "trigger" | "content" | "positioner" | "description" | "closeTrigger" | "backdrop">;
+//#endregion
+//#region src/machines/dialog/dialog.types.d.ts
+interface OpenChangeDetails {
+  open: boolean;
+}
+type ElementIds = Partial<{
+  trigger: 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;
+}
+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;
+    };
+  };
+  guard: "isOpenControlled";
+  effect: "trackDismissableElement" | "preventScroll" | "trapFocus" | "hideContentBelow";
+  action: "checkRenderedElements" | "syncZIndex" | "invokeOnClose" | "invokeOnOpen" | "toggleVisibility";
+  event: {
+    type: "CONTROLLED.OPEN" | "CONTROLLED.CLOSE" | "OPEN" | "CLOSE" | "TOGGLE";
+  };
+}
+type DialogService = Service<DialogSchema>;
+type DialogMachine = Machine<DialogSchema>;
+interface DialogApi<T extends PropTypes = PropTypes> {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  getTriggerProps: () => 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/dialog.connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<DialogSchema>, normalize: NormalizeProps<T>): DialogApi<T>;
+//#endregion
+//#region src/machines/dialog/dialog.machine.d.ts
+declare const machine: Machine<DialogSchema>;
+//#endregion
+//#region src/machines/dialog/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, anatomy, connect, machine, props, splitProps };

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

@@ -0,0 +1,80 @@
+import { n as AnatomyInstance } from "../../create-anatomy-B3XYc-qG.mjs";
+import { p as Machine, y as Service } from "../../types-DDTcG99l.mjs";
+import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, s as MaybeElement, t as CommonProperties, x as PropTypes } from "../../index-C0MKXQmE.mjs";
+import { c as PointerDownOutsideEvent, n as FocusOutsideEvent, r as InteractOutsideEvent } from "../../index-BkzYij2j.mjs";
+import { r as PersistentElementOptions, t as DismissableElementHandlers } from "../../dismissable-layer-t_b0fk-p.mjs";
+
+//#region src/machines/dialog/dialog.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"title" | "trigger" | "content" | "positioner" | "description" | "closeTrigger" | "backdrop">;
+//#endregion
+//#region src/machines/dialog/dialog.types.d.ts
+interface OpenChangeDetails {
+  open: boolean;
+}
+type ElementIds = Partial<{
+  trigger: 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;
+}
+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;
+    };
+  };
+  guard: "isOpenControlled";
+  effect: "trackDismissableElement" | "preventScroll" | "trapFocus" | "hideContentBelow";
+  action: "checkRenderedElements" | "syncZIndex" | "invokeOnClose" | "invokeOnOpen" | "toggleVisibility";
+  event: {
+    type: "CONTROLLED.OPEN" | "CONTROLLED.CLOSE" | "OPEN" | "CLOSE" | "TOGGLE";
+  };
+}
+type DialogService = Service<DialogSchema>;
+type DialogMachine = Machine<DialogSchema>;
+interface DialogApi<T extends PropTypes = PropTypes> {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  getTriggerProps: () => 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/dialog.connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<DialogSchema>, normalize: NormalizeProps<T>): DialogApi<T>;
+//#endregion
+//#region src/machines/dialog/dialog.machine.d.ts
+declare const machine: Machine<DialogSchema>;
+//#endregion
+//#region src/machines/dialog/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, anatomy, connect, machine, props, splitProps };