@torpor/ui 0.0.17 → 0.1.0

package/dist/Popover/PopoverContentStatic.torp

@@ -0,0 +1,78 @@
+import { addDocumentEvent, removeDocumentEvent } from "../utils/documentEvents";
+import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+
+/**
+ * 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.
+ */
+export default function PopoverContentStatic($props: any) {
+	let div: HTMLDivElement;
+
+	// Get stuff out of the PopoverContext
+	const context = $context[PopoverContextName] as PopoverContext;
+	if (!context) {
+		throw new Error("PopoverContentStatic must be contained within a Popover");
+	}
+	let $state = context.state;
+
+	let closeOnClick = false;
+
+	let first = true;
+	$run(() => {
+		let visible = $state.visible;
+
+		if (first) {
+			first = false;
+			return;
+		}
+
+		if (visible) {
+			// HACK: Because this Popover could be shown with a click, we need to wait for another mousedown
+			// before we close on click. Otherwise the click immediately bubbles to the document
+			closeOnClick = false;
+			addDocumentEvent("mousedown", handleDocumentMouseDown);
+			addDocumentEvent("click", handleDocumentClick);
+			// Wait for the content div to be shown, set its position, and listen for window resize to re-position
+			//await tick();
+			if (context.focusFirstElement) {
+				context.focusFirstElement();
+			}
+		} else {
+			removeDocumentEvent("mousedown", handleDocumentMouseDown);
+			removeDocumentEvent("click", handleDocumentClick);
+			// Focus the anchor element per WAI guidelines
+			if (context.anchorElement?.focus) {
+				context.anchorElement.focus();
+			}
+		}
+	});
+
+	function handleDocumentMouseDown() {
+		closeOnClick = true;
+	}
+
+	function handleDocumentClick(e: MouseEvent) {
+		if (
+			closeOnClick &&
+			div &&
+			!div.contains(e.target as HTMLElement) &&
+			(!context.anchorElement || !context.anchorElement.contains(e.target as HTMLElement))
+		) {
+			context.handleClickOutside!(e);
+		}
+	}
+
+	@render {
+		<div style="display: content;">
+			@if ($state.visible) {
+				<div
+					id={$props.id}
+					class={`torp-popover-content-static ${$props.class ?? ""}`.trim()}
+					&ref={div}
+				>
+					<:slot />
+				</div>
+			}
+		</div>
+	}
+}

package/dist/Popover/PopoverOverlay.torp

@@ -0,0 +1,32 @@
+import { disableScroll } from "../mount/disableScroll";
+import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+
+/**
+ * The background overlay for a Popover. Adding an overlay automatically sets the Popover to modal.
+ */
+export default function PopoverOverlay($props: any) {
+	// Get stuff out of the PopoverContext
+	const context = $context[PopoverContextName] as PopoverContext;
+	if (!context) {
+		throw new Error("PopoverOverlay must be contained within a Popover");
+	}
+	let $state = context.state;
+
+	// Any Popover with an overlay is modal
+	context.modal = true;
+
+	@render {
+		<div style="display: content;">
+			@if ($state.visible) {
+				<div
+					id={$props.id}
+					class={`torp-popover-overlay ${$props.class ?? ""}`.trim()}
+					tabindex="-1"
+					:onmount={(el) => disableScroll(el)}
+				>
+					<:slot />
+				</div>
+			}
+		</div>
+	}
+}

package/dist/Popover/PopoverTrigger.torp

@@ -0,0 +1,29 @@
+import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+
+/**
+ * The button that causes a Popover to appear or disappear.
+ */
+export default function PopoverTrigger($props: any) {
+	// Get stuff out of the PopoverContext
+	const context = $context[PopoverContextName] as PopoverContext;
+	if (!context) {
+		throw new Error("PopoverTrigger must be contained within a Popover");
+	}
+	let $state = context.state;
+
+	function handleClick() {
+		$state.visible = !$state.visible;
+	}
+
+	@render {
+		<button
+			type="button"
+			id={$props.id}
+			class={`torp-popover-trigger ${$props.class ?? ""}`.trim()}
+			onclick={handleClick}
+			&ref={context.anchorElement}
+		>
+			<:slot />
+		</button>
+	}
+}

package/dist/Popover/PopoverTriggerContextual.torp

@@ -0,0 +1,37 @@
+import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+
+/**
+ * The element that causes a Popover to appear or disappear when right-clicked.
+ */
+export default function PopoverTriggerContextual($props: any) {
+	// Get stuff out of the PopoverContext
+	const context = $context[PopoverContextName] as PopoverContext;
+	if (!context) {
+		throw new Error("PopoverTriggerContextual must be contained within a Contextual");
+	}
+	let $state = context.state;
+
+	function handleContextual(e: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) {
+		e.preventDefault();
+		if ($state.position) {
+			// Get the position relative to the element, so we can reposition on scroll
+			const rect = e.currentTarget.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 {
+		<div
+			id={$props.id}
+			class={`torp-popover-trigger-contextual ${$props.class ?? ""}`.trim()}
+			oncontextmenu={handleContextual}
+			&ref={context.anchorElement}
+		>
+			<:slot />
+		</div>
+	}
+}

package/dist/Popover/PopoverTriggerHover.torp

@@ -0,0 +1,30 @@
+
+import { PopoverContextName, type PopoverContext } from "./PopoverTypes";
+import hoverTrigger from "../mount/hoverTrigger";
+
+/**
+ * The div that causes a Popover to appear or disappear when hovered.
+ */
+export default function PopoverTriggerHover($props: any) {
+	// Get stuff out of the PopoverContext
+	const context = $context[PopoverContextName] as PopoverContext;
+	if (!context) {
+		throw new Error("PopoverTriggerHover must be contained within a Popover");
+	}
+	let $state = context.state;
+
+	function handleHover() {
+		$state.visible = !$state.visible
+	}
+
+	@render {
+		<div
+			id={$props.id}
+			class={`torp-popover-trigger-hover ${$props.class ?? ""}`.trim()}
+			:onmount={(el) => hoverTrigger(el, { onHover: handleHover, onExit: handleHover })}
+			&ref={context.anchorElement}
+		>
+			<:slot />
+		</div>
+	}
+}

package/dist/Popover/PopoverTypes.ts

@@ -0,0 +1,30 @@
+export const PopoverContextName = "Popover";
+
+/** The shared context for popover components (Contextual, Prompt and Popover) */
+export interface PopoverContext {
+	handleButton: (type: "confirm" | "cancel" | undefined, value?: any) => void;
+	// HACK: We need to be able to let children (i.e. Dialogs) override the click outside functionality
+	// There may be a more elegant way to accomplish this too
+	handleClickOutside?: (e: MouseEvent) => void;
+	state: PopoverState;
+	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
+	// We need to be able to manually set the order to
+	// 1. set visible (so we have an element with content)
+	// 2. set position (so the element is in the right place)
+	// 3. set focus (for accessibility)
+	// There may be a more elegant way to accomplish this!
+	focusFirstElement?: () => void;
+}
+
+export interface PopoverState {
+	visible: boolean;
+	position: Point;
+}
+
+export interface Point {
+	x: number;
+	y: number;
+}

package/dist/Popover/index.cjs

@@ -0,0 +1,222 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Popover/index.ts
+var Popover_exports = {};
+__export(Popover_exports, {
+  Popover: () => Popover_default,
+  PopoverContentAnchored: () => PopoverContentAnchored_default,
+  PopoverContentContextual: () => PopoverContentContextual_default,
+  PopoverContentStatic: () => PopoverContentStatic_default,
+  PopoverOverlay: () => PopoverOverlay_default,
+  PopoverTrigger: () => PopoverTrigger_default,
+  PopoverTriggerContextual: () => PopoverTriggerContextual_default,
+  PopoverTriggerHover: () => PopoverTriggerHover_default,
+  clickPopover: () => clickPopover,
+  contextPopover: () => contextPopover,
+  hoverPopover: () => hoverPopover,
+  showPopover: () => showPopover,
+  showPopoverPrompt: () => showPopoverPrompt
+});
+module.exports = __toCommonJS(Popover_exports);
+
+// src/Popover/Popover.torp
+import Popover_default from "./Popover.torp";
+
+// src/Popover/PopoverContentAnchored.torp
+import PopoverContentAnchored_default from "./PopoverContentAnchored.torp";
+
+// src/Popover/PopoverContentContextual.torp
+import PopoverContentContextual_default from "./PopoverContentContextual.torp";
+
+// src/Popover/PopoverContentStatic.torp
+import PopoverContentStatic_default from "./PopoverContentStatic.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);
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Popover,
+  PopoverContentAnchored,
+  PopoverContentContextual,
+  PopoverContentStatic,
+  PopoverOverlay,
+  PopoverTrigger,
+  PopoverTriggerContextual,
+  PopoverTriggerHover,
+  clickPopover,
+  contextPopover,
+  hoverPopover,
+  showPopover,
+  showPopoverPrompt
+});
+//# sourceMappingURL=index.cjs.map

package/dist/Popover/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Popover/index.ts","../../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":["import Popover from \"./Popover.torp\";\nimport PopoverContentAnchored from \"./PopoverContentAnchored.torp\";\nimport PopoverContentContextual from \"./PopoverContentContextual.torp\";\nimport PopoverContentStatic from \"./PopoverContentStatic.torp\";\nimport PopoverOverlay from \"./PopoverOverlay.torp\";\nimport PopoverTrigger from \"./PopoverTrigger.torp\";\nimport PopoverTriggerContextual from \"./PopoverTriggerContextual.torp\";\nimport PopoverTriggerHover from \"./PopoverTriggerHover.torp\";\nimport clickPopover from \"./mountClickPopover\";\nimport contextPopover from \"./mountContextPopover\";\nimport hoverPopover from \"./mountHoverPopover\";\nimport showPopover from \"./showPopover\";\nimport showPopoverPrompt from \"./showPopoverPrompt\";\n\nexport {\n\tPopover,\n\tPopoverOverlay,\n\tPopoverTrigger,\n\tPopoverTriggerHover,\n\tPopoverTriggerContextual,\n\tPopoverContentAnchored,\n\tPopoverContentContextual,\n\tPopoverContentStatic,\n\tshowPopover,\n\tshowPopoverPrompt,\n\tclickPopover,\n\tcontextPopover,\n\thoverPopover,\n};\n","// 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"]}

package/dist/Popover/index.js

@@ -0,0 +1,183 @@
+// src/Popover/Popover.torp
+import Popover_default from "./Popover.torp";
+
+// src/Popover/PopoverContentAnchored.torp
+import PopoverContentAnchored_default from "./PopoverContentAnchored.torp";
+
+// src/Popover/PopoverContentContextual.torp
+import PopoverContentContextual_default from "./PopoverContentContextual.torp";
+
+// src/Popover/PopoverContentStatic.torp
+import PopoverContentStatic_default from "./PopoverContentStatic.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,
+  PopoverContentAnchored_default as PopoverContentAnchored,
+  PopoverContentContextual_default as PopoverContentContextual,
+  PopoverContentStatic_default as PopoverContentStatic,
+  PopoverOverlay_default as PopoverOverlay,
+  PopoverTrigger_default as PopoverTrigger,
+  PopoverTriggerContextual_default as PopoverTriggerContextual,
+  PopoverTriggerHover_default as PopoverTriggerHover,
+  clickPopover,
+  contextPopover,
+  hoverPopover,
+  showPopover,
+  showPopoverPrompt
+};
+//# sourceMappingURL=index.js.map