@wirekyt/dom 0.0.1 → 0.0.2

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

@@ -0,0 +1,82 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.js";
+import { M as Service, T as Machine } from "../../index-CFoN0L3C.js";
+import { b as PropTypes, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import "../../index-BdeZuSX6.js";
+//#region src/machines/collapsible/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "content" | "indicator">;
+//#endregion
+//#region src/machines/collapsible/types.d.ts
+interface OpenChangeDetails {
+  open: boolean;
+}
+type ElementIds = Partial<{
+  root: string;
+  content: string;
+  trigger: string;
+}>;
+interface CollapsibleProps extends CommonProperties, DirectionProperty {
+  ids?: ElementIds | undefined;
+  open?: boolean | undefined;
+  defaultOpen?: boolean | undefined;
+  onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+  onExitComplete?: VoidFunction | undefined;
+  disabled?: boolean | undefined;
+  collapsedHeight?: number | string | undefined;
+  collapsedWidth?: number | string | undefined;
+}
+interface CollapsibleSchema {
+  state: "open" | "closed" | "closing";
+  props: CollapsibleProps;
+  context: {
+    size: {
+      width: number;
+      height: number;
+    };
+    initial: boolean;
+  };
+  refs: {
+    stylesRef: any;
+    cleanup: VoidFunction | undefined;
+  };
+  guard: "isOpenControlled";
+  event: {
+    type: "controlled.open";
+  } | {
+    type: "controlled.close";
+  } | {
+    type: "open";
+  } | {
+    type: "close";
+  } | {
+    type: "size.measure";
+  } | {
+    type: "animation.end";
+  };
+  action: "setInitial" | "clearInitial" | "cleanupNode" | "measureSize" | "computeSize" | "invokeOnOpen" | "invokeOnClose" | "invokeOnExitComplete" | "toggleVisibility";
+  effect: "trackEnterAnimation" | "trackExitAnimation" | "trackTabbableElements";
+}
+type CollapsibleService = Service<CollapsibleSchema>;
+type CollapsibleMachine = Machine<CollapsibleSchema>;
+interface CollapsibleApi<T extends PropTypes = PropTypes> {
+  open: boolean;
+  visible: boolean;
+  disabled: boolean;
+  setOpen: (open: boolean) => void;
+  measureSize: VoidFunction;
+  getRootProps: () => T["element"];
+  getTriggerProps: () => T["button"];
+  getContentProps: () => T["element"];
+  getIndicatorProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/collapsible/connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<CollapsibleSchema>, normalize: NormalizeProps<T>): CollapsibleApi<T>;
+//#endregion
+//#region src/machines/collapsible/machine.d.ts
+declare const machine: Machine<CollapsibleSchema>;
+//#endregion
+//#region src/machines/collapsible/props.d.ts
+declare const props: (keyof CollapsibleProps)[];
+declare const splitProps: <Props extends Partial<CollapsibleProps>>(props: Props) => [Partial<CollapsibleProps>, Omit<Props, keyof CollapsibleProps>];
+//#endregion
+export { type CollapsibleApi as Api, type ElementIds, type CollapsibleMachine as Machine, type OpenChangeDetails, type CollapsibleProps as Props, type CollapsibleService as Service, anatomy, connect, machine, props, splitProps };

package/dist/machines/collapsible/index.js

@@ -0,0 +1,358 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { t as getComputedStyle } from "../../computed-style-B1MKlCoo.js";
+import { s as getEventTarget } from "../../event-bTItRgiw.js";
+import { c as getTabbables } from "../../tabbable-CDA1YMjZ.js";
+import { i as raf, n as nextTick } from "../../raf-Dhvm7f1e.js";
+import { n as observeChildren } from "../../mutation-observer-qObPUo3D.js";
+import { r as setStyle, t as setAttribute } from "../../set-CFNGOW5W.js";
+import { F as toPx, n as createSplitProps } from "../../utils-Cht5XaHf.js";
+import { r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/collapsible/anatomy.ts
+const anatomy = createAnatomy("collapsible").parts("root", "trigger", "content", "indicator");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/collapsible/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `collapsible:${ctx.id}`;
+const getContentId = (ctx) => ctx.ids?.content ?? `collapsible:${ctx.id}:content`;
+const getTriggerId = (ctx) => ctx.ids?.trigger ?? `collapsible:${ctx.id}:trigger`;
+const getContentEl = (ctx) => ctx.getById(getContentId(ctx));
+//#endregion
+//#region src/machines/collapsible/connect.ts
+function connect(service, normalize) {
+	const { state, send, context, scope, prop } = service;
+	const visible = state.matches("open") || state.matches("closing");
+	const open = state.matches("open");
+	const closed = state.matches("closed");
+	const { width, height } = context.get("size");
+	const disabled = !!prop("disabled");
+	const collapsedHeight = prop("collapsedHeight");
+	const collapsedWidth = prop("collapsedWidth");
+	const hasCollapsedHeight = collapsedHeight != null;
+	const hasCollapsedWidth = collapsedWidth != null;
+	const hasCollapsedSize = hasCollapsedHeight || hasCollapsedWidth;
+	const skip = !context.get("initial") && open;
+	return {
+		disabled,
+		visible,
+		open,
+		measureSize() {
+			send({ type: "size.measure" });
+		},
+		setOpen(nextOpen) {
+			if (state.matches("open") === nextOpen) return;
+			send({ type: nextOpen ? "open" : "close" });
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				"data-state": open ? "open" : "closed",
+				dir: prop("dir"),
+				id: getRootId(scope)
+			});
+		},
+		getContentProps() {
+			return normalize.element({
+				...parts.content.attrs,
+				id: getContentId(scope),
+				"data-collapsible": "",
+				"data-state": skip ? void 0 : open ? "open" : "closed",
+				"data-disabled": dataAttr(disabled),
+				"data-has-collapsed-size": dataAttr(hasCollapsedSize),
+				hidden: !visible && !hasCollapsedSize,
+				dir: prop("dir"),
+				style: {
+					"--height": toPx(height),
+					"--width": toPx(width),
+					"--collapsed-height": toPx(collapsedHeight),
+					"--collapsed-width": toPx(collapsedWidth),
+					...closed && hasCollapsedHeight && {
+						overflow: "hidden",
+						minHeight: toPx(collapsedHeight),
+						maxHeight: toPx(collapsedHeight)
+					},
+					...closed && hasCollapsedWidth && {
+						overflow: "hidden",
+						minWidth: toPx(collapsedWidth),
+						maxWidth: toPx(collapsedWidth)
+					}
+				}
+			});
+		},
+		getTriggerProps() {
+			return normalize.element({
+				...parts.trigger.attrs,
+				id: getTriggerId(scope),
+				dir: prop("dir"),
+				type: "button",
+				"data-state": open ? "open" : "closed",
+				"data-disabled": dataAttr(disabled),
+				"aria-controls": getContentId(scope),
+				"aria-expanded": visible || false,
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (disabled) return;
+					send({ type: open ? "close" : "open" });
+				}
+			});
+		},
+		getIndicatorProps() {
+			return normalize.element({
+				...parts.indicator.attrs,
+				dir: prop("dir"),
+				"data-state": open ? "open" : "closed",
+				"data-disabled": dataAttr(disabled)
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/collapsible/machine.ts
+const machine = createMachine({
+	initialState({ prop }) {
+		return prop("open") || prop("defaultOpen") ? "open" : "closed";
+	},
+	context({ bindable }) {
+		return {
+			size: bindable(() => ({
+				defaultValue: {
+					height: 0,
+					width: 0
+				},
+				sync: true
+			})),
+			initial: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	refs() {
+		return {
+			cleanup: void 0,
+			stylesRef: void 0
+		};
+	},
+	watch({ track, prop, action }) {
+		track([() => prop("open")], () => {
+			action([
+				"setInitial",
+				"computeSize",
+				"toggleVisibility"
+			]);
+		});
+	},
+	exit: ["cleanupNode"],
+	states: {
+		closed: {
+			effects: ["trackTabbableElements"],
+			on: {
+				"controlled.open": { target: "open" },
+				open: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: [
+						"setInitial",
+						"computeSize",
+						"invokeOnOpen"
+					]
+				}]
+			}
+		},
+		closing: {
+			effects: ["trackExitAnimation"],
+			on: {
+				"controlled.close": { target: "closed" },
+				"controlled.open": { target: "open" },
+				open: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnOpen"]
+				}, {
+					target: "open",
+					actions: ["setInitial", "invokeOnOpen"]
+				}],
+				close: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnExitComplete"]
+				}, {
+					target: "closed",
+					actions: [
+						"setInitial",
+						"computeSize",
+						"invokeOnExitComplete"
+					]
+				}],
+				"animation.end": {
+					target: "closed",
+					actions: ["invokeOnExitComplete", "clearInitial"]
+				}
+			}
+		},
+		open: {
+			effects: ["trackEnterAnimation"],
+			on: {
+				"controlled.close": { target: "closing" },
+				close: [{
+					guard: "isOpenControlled",
+					actions: ["invokeOnClose"]
+				}, {
+					target: "closing",
+					actions: [
+						"setInitial",
+						"computeSize",
+						"invokeOnClose"
+					]
+				}],
+				"size.measure": { actions: ["measureSize"] },
+				"animation.end": { actions: ["clearInitial"] }
+			}
+		}
+	},
+	implementations: {
+		guards: { isOpenControlled: ({ prop }) => prop("open") != void 0 },
+		effects: {
+			trackEnterAnimation: ({ send, scope }) => {
+				let cleanup;
+				const rafCleanup = raf(() => {
+					const contentEl = getContentEl(scope);
+					if (!contentEl) return;
+					const animationName = getComputedStyle(contentEl).animationName;
+					if (!animationName || animationName === "none") {
+						send({ type: "animation.end" });
+						return;
+					}
+					const onEnd = (event) => {
+						if (getEventTarget(event) === contentEl) send({ type: "animation.end" });
+					};
+					contentEl.addEventListener("animationend", onEnd);
+					cleanup = () => {
+						contentEl.removeEventListener("animationend", onEnd);
+					};
+				});
+				return () => {
+					rafCleanup();
+					cleanup?.();
+				};
+			},
+			trackExitAnimation: ({ send, scope }) => {
+				let cleanup;
+				const rafCleanup = raf(() => {
+					const contentEl = getContentEl(scope);
+					if (!contentEl) return;
+					const animationName = getComputedStyle(contentEl).animationName;
+					if (!animationName || animationName === "none") {
+						send({ type: "animation.end" });
+						return;
+					}
+					const onEnd = (event) => {
+						if (getEventTarget(event) === contentEl) send({ type: "animation.end" });
+					};
+					contentEl.addEventListener("animationend", onEnd);
+					const restoreStyles = setStyle(contentEl, { animationFillMode: "forwards" });
+					cleanup = () => {
+						contentEl.removeEventListener("animationend", onEnd);
+						nextTick(() => restoreStyles());
+					};
+				});
+				return () => {
+					rafCleanup();
+					cleanup?.();
+				};
+			},
+			trackTabbableElements: ({ scope, prop }) => {
+				if (!prop("collapsedHeight") && !prop("collapsedWidth")) return;
+				const contentEl = getContentEl(scope);
+				if (!contentEl) return;
+				const applyInertToTabbables = () => {
+					const restoreAttrs = getTabbables(contentEl).map((tabbable) => setAttribute(tabbable, "inert", ""));
+					return () => {
+						restoreAttrs.forEach((attr) => attr());
+					};
+				};
+				let restoreInert = applyInertToTabbables();
+				const observerCleanup = observeChildren(contentEl, { callback() {
+					restoreInert();
+					restoreInert = applyInertToTabbables();
+				} });
+				return () => {
+					restoreInert();
+					observerCleanup();
+				};
+			}
+		},
+		actions: {
+			setInitial: ({ context, flush }) => {
+				flush(() => {
+					context.set("initial", true);
+				});
+			},
+			clearInitial: ({ context }) => {
+				context.set("initial", false);
+			},
+			cleanupNode: ({ refs }) => {
+				refs.set("stylesRef", null);
+			},
+			measureSize: ({ context, scope }) => {
+				const contentEl = getContentEl(scope);
+				if (!contentEl) return;
+				const { height, width } = contentEl.getBoundingClientRect();
+				context.set("size", {
+					height,
+					width
+				});
+			},
+			computeSize: ({ refs, scope, context }) => {
+				refs.get("cleanup")?.();
+				const rafCleanup = raf(() => {
+					const contentEl = getContentEl(scope);
+					if (!contentEl) return;
+					const hidden = contentEl.hidden;
+					contentEl.style.animationName = "none";
+					contentEl.style.animationDuration = "0s";
+					contentEl.hidden = false;
+					const rect = contentEl.getBoundingClientRect();
+					context.set("size", {
+						height: rect.height,
+						width: rect.width
+					});
+					if (context.get("initial")) {
+						contentEl.style.animationName = "";
+						contentEl.style.animationDuration = "";
+					}
+					contentEl.hidden = hidden;
+				});
+				refs.set("cleanup", rafCleanup);
+			},
+			invokeOnOpen: ({ prop }) => {
+				prop("onOpenChange")?.({ open: true });
+			},
+			invokeOnClose: ({ prop }) => {
+				prop("onOpenChange")?.({ open: false });
+			},
+			invokeOnExitComplete: ({ prop }) => {
+				prop("onExitComplete")?.();
+			},
+			toggleVisibility: ({ prop, send }) => {
+				send({ type: prop("open") ? "controlled.open" : "controlled.close" });
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/collapsible/props.ts
+const props = createProps()([
+	"dir",
+	"disabled",
+	"getRootNode",
+	"id",
+	"ids",
+	"collapsedHeight",
+	"collapsedWidth",
+	"onExitComplete",
+	"onOpenChange",
+	"defaultOpen",
+	"open"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, props, splitProps };