@w5-ui/react 0.7.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w5-ui/react",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "React 18 components for the Dash UI design system - ~170 dashboard-focused components with full type defs and SSR support. Part of Webber's design systems.",
   "keywords": [
     "react",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@w5-ui/assets": "^0.2.1",
-    "@w5-ui/tokens": "^0.7.0"
+    "@w5-ui/tokens": "^0.8.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.0",

package/src/components/ContextMenu.tsx

@@ -1,5 +1,9 @@
-import { useState, useRef, useEffect, useId } from 'react'
+import { useState, useRef, useEffect, useId, useLayoutEffect } from 'react'
 import type { KeyboardEvent } from 'react'
+import { computeMenuPosition } from './menu-position'
+
+/** Space kept between the menu and every viewport edge. */
+const MENU_MARGIN = 8
 
 export interface ContextMenuItem {
   id: string
@@ -36,6 +40,25 @@ export function ContextMenu({
   const menuId = `${uid}-ctxmenu`
   const [activeIdx, setActiveIdx] = useState(0)
   const menuRef = useRef<HTMLUListElement>(null)
+  // Placed from the menu's MEASURED size once it is in the DOM. A layout
+  // effect runs before the browser paints, so the menu is never seen at
+  // this starting point.
+  const [position, setPosition] = useState({ left: 0, top: 0 })
+  useLayoutEffect(() => {
+    if (!open || menuRef.current === null) return
+    const { width, height } = menuRef.current.getBoundingClientRect()
+    setPosition(
+      computeMenuPosition({
+        x,
+        y,
+        menuWidth: width,
+        menuHeight: height,
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight,
+        margin: MENU_MARGIN,
+      }),
+    )
+  }, [open, x, y, items])
 
   const actionItems = items.reduce<ContextMenuItem[]>((acc, e) => {
     if (!('separator' in e)) acc.push(e)
@@ -85,11 +108,6 @@ export function ContextMenu({
 
   if (!open) return null
 
-  const menuW = 168
-  const menuH = items.length * 30 + 8
-  const cx = Math.min(x, window.innerWidth - menuW - 8)
-  const cy = Math.min(y, window.innerHeight - menuH - 8)
-
   return (
     <ul
       ref={menuRef}
@@ -98,7 +116,7 @@ export function ContextMenu({
       aria-label={label}
       tabIndex={-1}
       className="ctx-menu"
-      style={{ left: cx, top: cy }}
+      style={{ left: position.left, top: position.top }}
       onKeyDown={onKeyDown}
     >
       {items.map((entry, i) => {

package/src/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 Svelte twin is `packages/svelte/src/lib/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),
+  }
+}