@torpor/ui 0.2.1 → 0.3.0

package/dist/Popover/Popover.torp

@@ -15,31 +15,43 @@ interface PopoverProps {
 	position?: Point,
 	/** A function to be called when the user selects a response */
 	callback?: ((value: any) => void),
+	/** Raised when the popover is opened or closed */
+	ontoggle?: (open: boolean) => void,
+	/** Raised when the popover has opened */
+	onopen?: () => void,
+	/** Raised when the popover has closed */
+	onclose?: (result: any) => void,
 }
 
 /**
- * A popover that can be used to show rich content or obtain information from a user.
- *
- * See [the WAI ARIA guidelines for Dialogs](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
+ * A popover window that is shown to the user relative to an anchor element.
  *
  * The structure of a Popover is:
  *
  * ```
  * <Popover>
- * 	<PopoverOverlay /> (optional, if modal)
- * 	<PopoverTrigger/PopoverTriggerContextual/PopoverTriggerHover /> (optional)
- * 	<PopoverContent/PopoverContentAnchored/PopoverContentContextual />
+ * 	<PopoverTrigger /> (optional)
+ * 	<PopoverContent />
  * </Popover>
  * ```
  */
-export default function Popover($props: PopoverProps) {
-	$props ??= $watch({});
-
+export default function Popover($props: PopoverProps | undefined) {
 	let $state: PopoverState = $watch({
 		visible: false,
 		position: { x: 0, y: 0 }
 	})
 
+	// Sync props and state
+	$run(() => {
+		$state.visible = $props?.visible ?? false;
+		$state.position = $props?.position ?? { x: 0, y: 0 };
+	});
+	$run(() => {
+		if ($props !== undefined) {
+			$props.visible = $state.visible;
+		}
+	});
+
 	let result: any;
 
 	// Set the context to pass down to items
@@ -47,23 +59,17 @@ export default function Popover($props: PopoverProps) {
 		handleButton,
 		handleClickOutside,
 		state: $state,
-		modal: $props.modal,
-		anchorElement: $unwrap($props.anchor),
+		modal: $props?.modal,
+		anchorElement: $props?.anchor ? $unwrap($props.anchor) : undefined,
 	};
 	$context[PopoverContextName] = context;
 
-	// Copy props into state whenever they change
-	$run(() => {
-		$state.visible = $props.visible ?? false;
-		$state.position = $props.position ?? { x: 0, y: 0 };
-	})
-
-	// Dispatch the toggle event when the popout is opened or closed
+	// Dispatch the toggle event when the popover is opened or closed
 	let firstToggle = true;
 	$run(() => {
-		const ontoggle = $props.ontoggle;
-		const onopen = $props.onopen;
-		const onclose = $props.onclose;
+		const ontoggle = $props?.ontoggle;
+		const onopen = $props?.onopen;
+		const onclose = $props?.onclose;
 		const visible = $state.visible;
 		if (firstToggle) {
 			firstToggle = false;
@@ -98,8 +104,8 @@ export default function Popover($props: PopoverProps) {
 		$state.visible = false;
 
 		// Call the callback
-		if ($props.callback) {
-			$props.callback(result);
+		if ($props?.callback) {
+			$props?.callback(result);
 		}
 	}
 
@@ -110,8 +116,8 @@ export default function Popover($props: PopoverProps) {
 
 	@render {
 		<div
-			{$props.id}
-			class={`torp-popover ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-popover ${$props?.class ?? ""}`.trim()}
 		>
 			<slot />
 		</div>

package/dist/Popover/PopoverContent.torp

@@ -1,4 +1,6 @@
 import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import getScrollParent from "../utils/getScrollParent";
+import setPopoverPosition from "../utils/setPopoverPosition";
 import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
 
 interface PopoverContentProps {
@@ -6,15 +8,17 @@ interface PopoverContentProps {
 	id?: string;
 	/** Class name(s) for the root element */
 	class?: string,
+	/** Where the popover will be shown, relative to the popover trigger */
+	side?: "top" | "right" | "bottom" | "left",
+	/** How the popover will be aligned, relative to the popover trigger */
+	alignment?: "start" | "center" | "end",
 }
 
 /**
- * The content that is displayed for a Popover when it is open, such as a Dialog
- * in the middle of the screen or a div that slides in from the side.
+ * The content that is displayed for a Popover when it is open, displayed
+ * alongside an element.
  */
-export default function PopoverContent($props: PopoverContentProps) {
-	$props ??= $watch({});
-
+export default function PopoverContent($props?: PopoverContentProps | undefined) {
 	let div: HTMLDivElement;
 	let shown = false;
 	let closeOnClick = false;
@@ -41,6 +45,12 @@ export default function PopoverContent($props: PopoverContentProps) {
 		addDocumentEvent("mousedown", handleDocumentMouseDown);
 		addDocumentEvent("click", handleDocumentClick);
 
+		// Set the position and listen for window resize and scroll to reset the position
+		setPosition();
+		const anchorElement = context.anchorElement!
+		const scrollParent = getScrollParent(anchorElement)
+		scrollParent.addEventListener("resize", setPosition);
+		scrollParent.addEventListener("scroll", setPosition);
 		if (context.focusFirstElement) {
 			context.focusFirstElement();
 		}
@@ -52,9 +62,13 @@ export default function PopoverContent($props: PopoverContentProps) {
 		removeDocumentEvent("mousedown", handleDocumentMouseDown);
 		removeDocumentEvent("click", handleDocumentClick);
 
-		// Focus the anchor element per WAI guidelines
-		if (context.anchorElement?.focus) {
-			context.anchorElement.focus();
+		// Stop listening for window resize and focus the anchor element per WAI guidelines
+		const anchorElement = context.anchorElement!
+		const scrollParent = getScrollParent(anchorElement)
+		scrollParent.removeEventListener("resize", setPosition);
+		scrollParent.removeEventListener("scroll", setPosition);
+		if (anchorElement.focus) {
+			anchorElement.focus();
 		}
 	}
 
@@ -69,15 +83,26 @@ export default function PopoverContent($props: PopoverContentProps) {
 			!div.contains(e.target as HTMLElement) &&
 			(!context.anchorElement || !context.anchorElement.contains(e.target as HTMLElement))
 		) {
+			e.preventDefault();
 			context.handleClickOutside!(e);
 		}
 	}
 
+	function setPosition() {
+		if (!context.anchorElement) {
+			throw new Error("Popover must have an anchor element");
+		}
+
+		let side = $props?.side ?? "bottom";
+		let alignment = $props?.alignment ?? "center";
+		setPopoverPosition(context.anchorElement, div, side, alignment);
+	}
+
 	@render {
 		@if ($state.visible) {
 			<div
-				{$props.id}
-				class={`torp-popover-content ${$props.class ?? ""}`.trim()}
+				{$props?.id}
+				class={`torp-popover-content ${$props?.class ?? ""}`.trim()}
 				&ref={div}
 				onmount={show}
 			>

package/dist/Popover/PopoverTrigger.torp

@@ -1,17 +1,20 @@
 import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+import hoverTrigger from "../mount/hoverTrigger";
 
 interface PopoverTriggerProps {
 	/** An ID for the root element */
 	id?: string;
 	/** Class name(s) for the root element */
 	class?: string,
+	/** Whether the popover is activated by click/press or by hover **/
+	activation?: "press" | "hover"
 }
 
 /**
  * The button that causes a Popover to appear or disappear.
  */
-export default function PopoverTrigger($props: PopoverTriggerProps) {
-	$props ??= $watch({});
+export default function PopoverTrigger($props: PopoverTriggerProps | undefined) {
+	let activation = $props?.activation ?? "press";
 
 	// Get stuff out of the PopoverContext
 	const context = $context[PopoverContextName] as PopoverContext;
@@ -21,15 +24,32 @@ export default function PopoverTrigger($props: PopoverTriggerProps) {
 	let $state = context.state;
 
 	function handleClick() {
+		if (activation !== "press") return;
+
 		$state.visible = !$state.visible;
 	}
 
+	function handleHover(node: HTMLElement, e: MouseEvent) {
+		if (activation !== "hover") return;
+
+		if ($state.position) {
+			// Get the position relative to the element, so we can reposition on scroll
+			const rect = node.getBoundingClientRect();
+			const x = e.clientX - rect.left;
+			const y = e.clientY - rect.top;
+			$state.position = { x, y };
+			//$state.position = { x: window.scrollX + e.clientX, y: window.scrollY + e.clientY };
+		}
+		$state.visible = !$state.visible
+	}
+
 	@render {
 		<button
 			type="button"
-			{$props.id}
-			class={`torp-popover-trigger ${$props.class ?? ""}`.trim()}
+			{$props?.id}
+			class={`torp-popover-trigger ${$props?.class ?? ""}`.trim()}
 			onclick={handleClick}
+			onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
 			&ref={context.anchorElement}
 		>
 			<slot />

package/dist/Popover/PopoverTypes.ts

@@ -7,7 +7,7 @@ export interface PopoverContext {
 	// There may be a more elegant way to accomplish this too
 	handleClickOutside?: (e: MouseEvent) => void;
 	state: PopoverState;
-	modal: boolean;
+	//modal: boolean;
 	anchorElement?: HTMLElement;
 	// HACK: focusFirstElement is necessary because if we focus the first element e.g. in a Dialog's
 	// onMount, it will scroll the page to the focused element and mess up our careful positioning

package/dist/Popover/index.d.ts

@@ -16,114 +16,44 @@ interface PopoverProps {
 	position?: Point,
 	/** A function to be called when the user selects a response */
 	callback?: ((value: any) => void),
+	/** Raised when the popover is opened or closed */
+	ontoggle?: (open: boolean) => void,
+	/** Raised when the popover has opened */
+	onopen?: () => void,
+	/** Raised when the popover has closed */
+	onclose?: (result: any) => void,
 }
 
 /**
- * A popover that can be used to show rich content or obtain information from a user.
- *
- * See [the WAI ARIA guidelines for Dialogs](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/).
+ * A popover window that is shown to the user relative to an anchor element.
  *
  * The structure of a Popover is:
  *
  * ```
  * <Popover>
- * 	<PopoverOverlay /> (optional, if modal)
- * 	<PopoverTrigger/PopoverTriggerContextual/PopoverTriggerHover /> (optional)
- * 	<PopoverContent/PopoverContentAnchored/PopoverContentContextual />
+ * 	<PopoverTrigger /> (optional)
+ * 	<PopoverContent />
  * </Popover>
  * ```
  */
 declare function Popover(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: PopoverProps,
+	$props: PopoverProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
 
 
-interface PopoverContentProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-}
-
-/**
- * The content that is displayed for a Popover when it is open, such as a Dialog
- * in the middle of the screen or a div that slides in from the side.
- */
-declare function PopoverContent(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: PopoverContentProps,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-
-
-interface PopoverContentAnchoredProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-	/** Where the popover will be shown, relative to the popover button */
-	side?: "top" | "right" | "bottom" | "left",
-	/** How the popover will be aligned, relative to the popover button */
-	alignment?: "start" | "center" | "end",
-}
-
 /**
  * The content that is displayed for a Popover when it is open, displayed
  * alongside an element.
  */
-declare function PopoverContentAnchored(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: PopoverContentAnchoredProps,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-
-
-interface PopoverContentContextualProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-}
-
-/**
- * The content that is displayed for a Popover when it is open, displayed at the
- * position that the user right-clicked.
- */
-declare function PopoverContentContextual(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: PopoverContentContextualProps,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-
-
-interface PopoverOverlayProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-}
-
-/**
- * The background overlay for a Popover. Adding an overlay automatically sets the Popover to modal.
- */
-declare function PopoverOverlay(
+declare function PopoverContent(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: PopoverOverlayProps,
+	$props?: PopoverContentProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
@@ -135,6 +65,8 @@ interface PopoverTriggerProps {
 	id?: string;
 	/** Class name(s) for the root element */
 	class?: string,
+	/** Whether the popover is activated by click/press or by hover **/
+	activation?: "press" | "hover"
 }
 
 /**
@@ -143,49 +75,9 @@ interface PopoverTriggerProps {
 declare function PopoverTrigger(
 	$parent: ParentNode,
 	$anchor: Node | null,
-	$props: PopoverTriggerProps,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-
-
-interface PopoverTriggerContextualProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-}
-
-/**
- * The element that causes a Popover to appear or disappear when right-clicked.
- */
-declare function PopoverTriggerContextual(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: PopoverTriggerContextualProps,
-	$context?: Record<PropertyKey, any>,
-	$slots?: Record<string, SlotRender>,
-): void;
-
-
-
-interface PopoverTriggerHoverProps {
-	/** An ID for the root element */
-	id?: string;
-	/** Class name(s) for the root element */
-	class?: string,
-}
-
-/**
- * The div that causes a Popover to appear or disappear when hovered.
- */
-declare function PopoverTriggerHover(
-	$parent: ParentNode,
-	$anchor: Node | null,
-	$props: PopoverTriggerHoverProps,
+	$props: PopoverTriggerProps | undefined,
 	$context?: Record<PropertyKey, any>,
 	$slots?: Record<string, SlotRender>,
 ): void;
 
-export { Popover, PopoverContent, PopoverContentAnchored, PopoverContentContextual, PopoverOverlay, PopoverTrigger, PopoverTriggerContextual, PopoverTriggerHover };
+export { Popover, PopoverContent, PopoverTrigger };

package/dist/Popover/index.js

@@ -4,180 +4,18 @@ import Popover_default from "./Popover.torp";
 // src/Popover/PopoverContent.torp
 import PopoverContent_default from "./PopoverContent.torp";
 
-// src/Popover/PopoverContentAnchored.torp
-import PopoverContentAnchored_default from "./PopoverContentAnchored.torp";
-
-// src/Popover/PopoverContentContextual.torp
-import PopoverContentContextual_default from "./PopoverContentContextual.torp";
-
-// src/Popover/PopoverOverlay.torp
-import PopoverOverlay_default from "./PopoverOverlay.torp";
-
 // src/Popover/PopoverTrigger.torp
 import PopoverTrigger_default from "./PopoverTrigger.torp";
 
-// src/Popover/PopoverTriggerContextual.torp
-import PopoverTriggerContextual_default from "./PopoverTriggerContextual.torp";
-
-// src/Popover/PopoverTriggerHover.torp
-import PopoverTriggerHover_default from "./PopoverTriggerHover.torp";
-
 // src/Popover/showPopover.ts
 function showPopover(popover, anchor, props, target) {
   const allProps = Object.assign({}, props, { anchor });
   popover(target || anchor.parentElement || document.body, null, allProps);
 }
-
-// src/Popover/mountClickPopover.ts
-function clickPopover(node, options) {
-  const { popover, props } = options;
-  node.addEventListener("click", handleClick);
-  function handleClick(e) {
-    e.preventDefault();
-    show();
-  }
-  let div;
-  function show() {
-    if (div) {
-      document.body.removeChild(div);
-    }
-    div = document.createElement("div");
-    document.body.appendChild(div);
-    showPopover(popover, node, props, div);
-  }
-  return {
-    destroy() {
-      node.removeEventListener("click", handleClick);
-      if (div) {
-        document.body.removeChild(div);
-      }
-    }
-  };
-}
-
-// src/Popover/mountContextPopover.ts
-function contextPopover(node, options) {
-  const { popover, props } = options;
-  node.addEventListener("contextmenu", handleClick);
-  function handleClick(e) {
-    e.preventDefault();
-    show();
-  }
-  let div;
-  function show() {
-    if (div) {
-      document.body.removeChild(div);
-    }
-    div = document.createElement("div");
-    document.body.appendChild(div);
-    showPopover(popover, node, props, div);
-  }
-  return {
-    destroy() {
-      node.removeEventListener("contextmenu", handleClick);
-      if (div) {
-        document.body.removeChild(div);
-      }
-    }
-  };
-}
-
-// src/mount/hoverTrigger.ts
-function hoverTrigger(node, options) {
-  const { onHover, onExit } = options;
-  const hoverDelay = options.hoverDelay || 1e3;
-  const touchDelay = options.touchDelay || 1e3;
-  let interval;
-  node.addEventListener("mouseenter", handleMouseEnter);
-  node.addEventListener("mouseleave", handleMouseLeave);
-  node.addEventListener("mousemove", handleMouseMove);
-  node.addEventListener("touchstart", handleMouseEnter);
-  node.addEventListener("touchend", handleMouseLeave);
-  function handleMouseEnter(e) {
-    e.preventDefault();
-    if (!interval) {
-      const delay = e.type.startsWith("mouse") ? hoverDelay : touchDelay;
-      interval = setTimeout(() => onHover(node, e), delay);
-    }
-  }
-  function handleMouseLeave(e) {
-    if (interval) {
-      clearTimeout(interval);
-      interval = void 0;
-    }
-    if (onExit) {
-      onExit(node, e);
-    }
-  }
-  function handleMouseMove(e) {
-    if (interval) {
-      clearTimeout(interval);
-      interval = setTimeout(() => onHover(node, e), hoverDelay);
-    }
-  }
-  return () => {
-    node.removeEventListener("mouseenter", handleMouseEnter);
-    node.removeEventListener("mouseleave", handleMouseLeave);
-    node.removeEventListener("mousemove", handleMouseMove);
-    node.removeEventListener("touchstart", handleMouseEnter);
-    node.removeEventListener("touchend", handleMouseLeave);
-  };
-}
-
-// src/Popover/mountHoverPopover.ts
-function hoverPopover(node, options) {
-  const { popover, props, hoverDelay, touchDelay } = options;
-  let div;
-  function onHover(node2, e) {
-    if (div) {
-      document.body.removeChild(div);
-    }
-    div = document.createElement("div");
-    document.body.appendChild(div);
-    const rect = node2.getBoundingClientRect();
-    let position;
-    if (e.type.startsWith("mouse")) {
-      const me = e;
-      position = { x: me.clientX - rect.left, y: me.clientY - rect.top };
-    } else {
-      const te = e;
-      position = {
-        x: te.touches[0].clientX - rect.left,
-        y: te.touches[0].clientY - rect.top
-      };
-    }
-    const allProps = Object.assign({}, props, { anchor: node2, position });
-    showPopover(popover, node2, allProps, div);
-  }
-  function onExit() {
-    if (div) {
-      document.body.removeChild(div);
-      div = void 0;
-    }
-  }
-  return hoverTrigger(node, { onHover, onExit, hoverDelay, touchDelay });
-}
-
-// src/Popover/showPopoverPrompt.ts
-function showPopoverPrompt(popover, props, target) {
-  return new Promise((resolve) => {
-    const allProps = Object.assign({}, props, { callback: resolve });
-    popover(target || document.body, null, allProps);
-  });
-}
 export {
   Popover_default as Popover,
   PopoverContent_default as PopoverContent,
-  PopoverContentAnchored_default as PopoverContentAnchored,
-  PopoverContentContextual_default as PopoverContentContextual,
-  PopoverOverlay_default as PopoverOverlay,
   PopoverTrigger_default as PopoverTrigger,
-  PopoverTriggerContextual_default as PopoverTriggerContextual,
-  PopoverTriggerHover_default as PopoverTriggerHover,
-  clickPopover,
-  contextPopover,
-  hoverPopover,
-  showPopover,
-  showPopoverPrompt
+  showPopover
 };
 //# sourceMappingURL=index.js.map

package/dist/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Popover/showPopover.ts","../../src/Popover/mountClickPopover.ts","../../src/Popover/mountContextPopover.ts","../../src/mount/hoverTrigger.ts","../../src/Popover/mountHoverPopover.ts","../../src/Popover/showPopoverPrompt.ts"],"sourcesContent":["// TODO: Allow passing in a variable -- so that you can show an inline popover\nimport type { Component } from \"@torpor/view\";\n\n/**\n * Shows a popover component in code.\n * @param popover The popover component\n * @param anchor The element to use as an anchor for the popover component\n * @param props The properties for the popover component\n * @param target The target element to show the popover in\n * @returns The value selected by the user\n */\nexport default function showPopover(\n\tpopover: Component,\n\tanchor: HTMLElement,\n\tprops?: Record<PropertyKey, any>,\n\ttarget?: Element,\n): void {\n\t// Add the anchor element to the properties\n\tconst allProps = Object.assign({}, props, { anchor });\n\n\t// Create the popover\n\t// TODO: This needs to clean up after itself, like the mount methods do\n\tpopover(target || anchor.parentElement || document.body, null, allProps);\n}\n","import type { Component } from \"@torpor/view\";\nimport showPopover from \"./showPopover\";\n\ninterface ClickPopoverOptions {\n\tpopover: Component;\n\tprops?: Record<PropertyKey, any>;\n}\n\n/**\n * A mount directive for showing a popover when an element is clicked.\n * @param node The element to show the popover for\n * @param options Options for showing the popover, consisting of the popover component and any props\n */\nexport default function clickPopover(node: HTMLElement, options: ClickPopoverOptions) {\n\tconst { popover, props } = options;\n\n\t// Add a click event handler to the node\n\tnode.addEventListener(\"click\", handleClick);\n\n\tfunction handleClick(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tshow();\n\t}\n\n\tlet div: HTMLDivElement;\n\n\tfunction show() {\n\t\t// Show the popover in a div\n\t\tif (div) {\n\t\t\tdocument.body.removeChild(div);\n\t\t}\n\t\tdiv = document.createElement(\"div\");\n\t\tdocument.body.appendChild(div);\n\n\t\tshowPopover(popover, node, props, div);\n\t}\n\n\treturn {\n\t\tdestroy(): void {\n\t\t\t// Remove the event listener from the node on destroy\n\t\t\tnode.removeEventListener(\"click\", handleClick);\n\n\t\t\t// Remove the div we added\n\t\t\t// TODO: Should we do this in more places?\n\t\t\tif (div) {\n\t\t\t\tdocument.body.removeChild(div);\n\t\t\t}\n\t\t},\n\t};\n}\n","import type { Component } from \"@torpor/view\";\nimport showPopover from \"./showPopover\";\n\ninterface ContextPopoverOptions {\n\tpopover: Component;\n\tprops?: Record<PropertyKey, any>;\n}\n\n/**\n * A mount directive for showing a popover when the user opens an element's context menu.\n * @param node The element to show the popover for\n * @param options Options for showing the popover, consisting of the popover component and any props\n */\nexport default function contextPopover(node: HTMLElement, options: ContextPopoverOptions) {\n\tconst { popover, props } = options;\n\n\t// Add a contextmenu event handler to the node\n\tnode.addEventListener(\"contextmenu\", handleClick);\n\n\tfunction handleClick(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tshow();\n\t}\n\n\tlet div: HTMLDivElement;\n\n\tfunction show() {\n\t\t// Show the popover in a div\n\t\tif (div) {\n\t\t\tdocument.body.removeChild(div);\n\t\t}\n\t\tdiv = document.createElement(\"div\");\n\t\tdocument.body.appendChild(div);\n\n\t\tshowPopover(popover, node, props, div);\n\t}\n\n\treturn {\n\t\tdestroy(): void {\n\t\t\t// Remove the event listener from the node on destroy\n\t\t\tnode.removeEventListener(\"contextmenu\", handleClick);\n\n\t\t\t// Remove the div we added\n\t\t\t// TODO: Should we do this in more places?\n\t\t\tif (div) {\n\t\t\t\tdocument.body.removeChild(div);\n\t\t\t}\n\t\t},\n\t};\n}\n","interface HoverTriggerOptions {\n\tonHover: (node: HTMLElement, e: TouchEvent | MouseEvent) => void;\n\tonExit?: (node: HTMLElement, e: TouchEvent | MouseEvent) => void;\n\thoverDelay?: number;\n\ttouchDelay?: number;\n}\n\nexport default function hoverTrigger(node: HTMLElement, options: HoverTriggerOptions): () => void {\n\tconst { onHover, onExit } = options;\n\tconst hoverDelay = options.hoverDelay || 1000;\n\tconst touchDelay = options.touchDelay || 1000;\n\n\tlet interval: NodeJS.Timeout | undefined;\n\n\t// Add click event handlers to the node\n\tnode.addEventListener(\"mouseenter\", handleMouseEnter);\n\tnode.addEventListener(\"mouseleave\", handleMouseLeave);\n\tnode.addEventListener(\"mousemove\", handleMouseMove);\n\tnode.addEventListener(\"touchstart\", handleMouseEnter);\n\tnode.addEventListener(\"touchend\", handleMouseLeave);\n\n\tfunction handleMouseEnter(e: MouseEvent | TouchEvent) {\n\t\t// Handle the hover after a delay\n\t\te.preventDefault();\n\t\tif (!interval) {\n\t\t\tconst delay = e.type.startsWith(\"mouse\") ? hoverDelay : touchDelay;\n\t\t\tinterval = setTimeout(() => onHover(node, e), delay);\n\t\t}\n\t}\n\n\tfunction handleMouseLeave(e: MouseEvent | TouchEvent) {\n\t\t// Prevent short hovers or touches from firing the event\n\t\tif (interval) {\n\t\t\tclearTimeout(interval);\n\t\t\tinterval = undefined;\n\t\t}\n\n\t\tif (onExit) {\n\t\t\tonExit(node, e);\n\t\t}\n\t}\n\n\tfunction handleMouseMove(e: MouseEvent) {\n\t\t// Reset the interval on mouse move\n\t\tif (interval) {\n\t\t\tclearTimeout(interval);\n\t\t\tinterval = setTimeout(() => onHover(node, e), hoverDelay);\n\t\t}\n\t}\n\n\t// Remove the event listeners from the node on destroy\n\treturn () => {\n\t\tnode.removeEventListener(\"mouseenter\", handleMouseEnter);\n\t\tnode.removeEventListener(\"mouseleave\", handleMouseLeave);\n\t\tnode.removeEventListener(\"mousemove\", handleMouseMove);\n\t\tnode.removeEventListener(\"touchstart\", handleMouseEnter);\n\t\tnode.removeEventListener(\"touchend\", handleMouseLeave);\n\t};\n}\n","import type { Component } from \"@torpor/view\";\nimport hoverTrigger from \"../mount/hoverTrigger\";\nimport showPopover from \"./showPopover\";\n\ninterface HoverPopoverOptions {\n\tpopover: Component;\n\tprops?: Record<PropertyKey, any>;\n\thoverDelay?: number;\n\ttouchDelay?: number;\n}\n\n/**\n * A mount directive for showing a popover when an element is hovered.\n * @param node The element to show the popover for\n * @param options Options for showing the popover, consisting of the popover component, any props and delays for hover and touch\n */\nexport default function hoverPopover(node: HTMLElement, options: HoverPopoverOptions): () => void {\n\tconst { popover, props, hoverDelay, touchDelay } = options;\n\n\tlet div: HTMLDivElement | undefined;\n\n\tfunction onHover(node: HTMLElement, e: MouseEvent | TouchEvent) {\n\t\t// Show the popover in a div\n\t\tif (div) {\n\t\t\tdocument.body.removeChild(div);\n\t\t}\n\t\tdiv = document.createElement(\"div\");\n\t\tdocument.body.appendChild(div);\n\n\t\t// Get the position relative to the element, so we can reposition on scroll\n\t\tconst rect = node.getBoundingClientRect();\n\t\tlet position: { x: number; y: number };\n\t\tif (e.type.startsWith(\"mouse\")) {\n\t\t\tconst me = e as MouseEvent;\n\t\t\tposition = { x: me.clientX - rect.left, y: me.clientY - rect.top };\n\t\t} else {\n\t\t\tconst te = e as TouchEvent;\n\t\t\tposition = {\n\t\t\t\tx: te.touches[0].clientX - rect.left,\n\t\t\t\ty: te.touches[0].clientY - rect.top,\n\t\t\t};\n\t\t}\n\t\tconst allProps = Object.assign({}, props, { anchor: node, position });\n\n\t\tshowPopover(popover, node, allProps, div);\n\t}\n\n\tfunction onExit() {\n\t\t// Remove the div\n\t\tif (div) {\n\t\t\tdocument.body.removeChild(div);\n\t\t\tdiv = undefined;\n\t\t}\n\t}\n\n\treturn hoverTrigger(node, { onHover, onExit, hoverDelay, touchDelay });\n}\n","import type { Component } from \"@torpor/view\";\n\n/**\n * Shows a popover component in code, and asynchronously returns the value selected by the user.\n * @param popover The popover component\n * @param props The properties for the popover component\n * @param target The target element to show the popover in\n * @returns The value selected by the user\n */\nexport default function showPopoverPrompt(\n\tpopover: Component,\n\tprops?: Record<PropertyKey, any>,\n\ttarget?: Element,\n): Promise<void> {\n\treturn new Promise((resolve) => {\n\t\t// Add the promise as the callback\n\t\tconst allProps = Object.assign({}, props, { callback: resolve });\n\n\t\t// Create the popover\n\t\t// TODO: This needs to clean up after itself, like the use methods do\n\t\tpopover(target || document.body, null, allProps);\n\t});\n}\n"],"mappings":"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","names":["node"]}
+{"version":3,"sources":["../../src/Popover/showPopover.ts"],"sourcesContent":["// TODO: Allow passing in a variable -- so that you can show an inline popover\nimport type { Component } from \"@torpor/view\";\n\n/**\n * Shows a popover component in code.\n * @param popover The popover component\n * @param anchor The element to use as an anchor for the popover component\n * @param props The properties for the popover component\n * @param target The target element to show the popover in\n * @returns The value selected by the user\n */\nexport default function showPopover(\n\tpopover: Component,\n\tanchor: HTMLElement,\n\tprops?: Record<PropertyKey, any>,\n\ttarget?: Element,\n): void {\n\t// Add the anchor element to the properties\n\tconst allProps = Object.assign({}, props, { anchor });\n\n\t// Create the popover\n\t// TODO: This needs to clean up after itself, like the mount methods do\n\tpopover(target || anchor.parentElement || document.body, null, allProps);\n}\n"],"mappings":";;;;;;;;;;AAWe,SAAR,YACN,SACA,QACA,OACA,QACO;AAEP,QAAM,WAAW,OAAO,OAAO,CAAC,GAAG,OAAO,EAAE,OAAO,CAAC;AAIpD,UAAQ,UAAU,OAAO,iBAAiB,SAAS,MAAM,MAAM,QAAQ;AACxE;","names":[]}