@w5-ui/svelte 0.8.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w5-ui/svelte",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Svelte 5 components for the Dash UI design system - mirrors the @w5-ui/react API 1:1. Part of Webber's design systems.",
   "keywords": [
     "svelte",

package/src/lib/components/ContextMenu.svelte

@@ -26,6 +26,7 @@
 <script lang="ts">
   import { onDestroy, tick } from 'svelte';
   import Pill from './Pill.svelte';
+  import { computeMenuPosition } from './menu-position';
 
   const PILL_SLOT = '{pill}';
 
@@ -71,10 +72,29 @@
     }, []),
   );
 
-  const menuW = 168;
-  let menuH = $derived(items.length * 30 + 8);
-  let cx = $derived(Math.min(x, (typeof window !== 'undefined' ? window.innerWidth : 1200) - menuW - 8));
-  let cy = $derived(Math.min(y, (typeof window !== 'undefined' ? window.innerHeight : 800) - menuH - 8));
+  /** Space kept between the menu and every viewport edge. */
+  const MENU_MARGIN = 8;
+  // Placed from the menu's MEASURED size once it is in the DOM, by the
+  // effect below. Effects run before the browser paints, so the menu is
+  // never seen at this starting point.
+  let cx = $state(0);
+  let cy = $state(0);
+  $effect(() => {
+    void items;
+    if (!open || menuEl === undefined) return;
+    const { width, height } = menuEl.getBoundingClientRect();
+    const placed = computeMenuPosition({
+      x,
+      y,
+      menuWidth: width,
+      menuHeight: height,
+      viewportWidth: window.innerWidth,
+      viewportHeight: window.innerHeight,
+      margin: MENU_MARGIN,
+    });
+    cx = placed.left;
+    cy = placed.top;
+  });
 
   function activate(id: string) {
     onaction?.(id);

package/src/lib/components/menu-position.ts

@@ -0,0 +1,38 @@
+/**
+ * Where a context menu opens: at the pointer, the way OS menus do.
+ *
+ * Takes the menu's MEASURED size, never a guess: menus hold labels of
+ * any length, and a guessed width let a long one run off the edge.
+ *   - It opens at the pointer when it fits.
+ *   - It flips to the pointer's left (or above it) when it would cross
+ *     the right edge (or the bottom).
+ *   - When neither side has room, it is clamped inside the margins, and
+ *     a menu bigger than the viewport is pinned to the margin.
+ *
+ * Pure. The React twin is `packages/react/src/components/menu-position.ts`.
+ */
+export interface MenuPositionInput {
+  /** The pointer, in viewport coordinates. */
+  x: number
+  y: number
+  menuWidth: number
+  menuHeight: number
+  viewportWidth: number
+  viewportHeight: number
+  /** Space kept between the menu and every viewport edge. */
+  margin: number
+}
+
+function along(pointer: number, size: number, viewport: number, margin: number): number {
+  const far = viewport - margin
+  if (pointer + size <= far) return Math.max(margin, pointer)
+  if (pointer - size >= margin) return pointer - size
+  return Math.max(margin, Math.min(pointer, far - size))
+}
+
+export function computeMenuPosition(input: MenuPositionInput): { left: number; top: number } {
+  return {
+    left: along(input.x, input.menuWidth, input.viewportWidth, input.margin),
+    top: along(input.y, input.menuHeight, input.viewportHeight, input.margin),
+  }
+}