@geomak/ui 1.9.0 → 2.0.0

package/dist/index.d.cts

@@ -853,42 +853,79 @@ interface MenuBarProps {
  */
 declare function MenuBar({ items }: MenuBarProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * A single action in the context menu.
+ *
+ * - Leaf items (no `children`) call `onClick` when activated.
+ * - Parent items (with `children`) open a sub-menu on hover / arrow-right.
+ * - `disabled` items render but cannot be activated; screen readers
+ *   announce them as disabled.
+ */
 interface ContextMenuActionItem {
-    key: string | number;
+    key: React$1.Key;
+    /** Label shown for the item. May be plain text or a node. */
     value: React$1.ReactNode;
     icon?: React$1.ReactNode;
-    onClick?: (path?: string, reportType?: string) => void;
-    path?: string;
-    reportType?: string;
+    /** Fires when the item is activated. Ignored when `children` is set. */
+    onClick?: () => void;
+    /** Optional sub-menu items. */
     children?: ContextMenuActionItem[];
-}
-interface ContextMenuPosition {
-    x: number;
-    y: number;
+    /** Render as disabled — still visible but not activatable. */
+    disabled?: boolean;
 }
 interface ContextMenuProps {
+    /** Top-level items. Each may carry nested `children` for sub-menus. */
     items: ContextMenuActionItem[];
-    position: ContextMenuPosition;
-    visible: boolean;
-    onClose: () => void;
+    /**
+     * The element that should respond to right-click. The entire React
+     * subtree underneath becomes the trigger area. Wrap an existing
+     * component / div / image — anything you can right-click on.
+     */
+    children: React$1.ReactNode;
 }
 /**
- * Right-click context menu positioned at arbitrary screen coordinates.
- *
- * Decoupled from `useData()` — the app manages `visible`, `position`, and
- * `items` in its own state and passes them here.
+ * Right-click context menu, built on `@radix-ui/react-context-menu`.
  *
- * @example
- * const [ctx, setCtx] = useState({ visible: false, items: [], position: { x: 0, y: 0 } })
+ * **Idiomatic usage**: wrap the element that should respond to right-click.
+ * Radix handles positioning (avoids viewport edges automatically), keyboard
+ * navigation (↑↓ to move, → to open sub-menu, ← to close, Enter to activate,
+ * Esc to dismiss), focus management, and portal-based stacking.
  *
- * <div onContextMenu={(e) => {
- *   e.preventDefault()
- *   setCtx({ visible: true, items: menuItems, position: { x: e.clientX, y: e.clientY } })
- * }}>...</div>
+ * @example Basic — flat menu
+ * ```tsx
+ * <ContextMenu
+ *   items={[
+ *     { key: 'edit',   value: 'Edit',   onClick: () => openEditor() },
+ *     { key: 'delete', value: 'Delete', onClick: () => askDelete() },
+ *   ]}
+ * >
+ *   <Card vessel={vessel} />
+ * </ContextMenu>
+ * ```
  *
- * <ContextMenu {...ctx} onClose={() => setCtx(c => ({ ...c, visible: false }))} />
+ * @example With sub-menu
+ * ```tsx
+ * <ContextMenu
+ *   items={[
+ *     {
+ *       key: 'export', value: 'Export',
+ *       children: [
+ *         { key: 'csv',  value: 'as CSV',  onClick: () => exportCsv() },
+ *         { key: 'xlsx', value: 'as Excel', onClick: () => exportXlsx() },
+ *       ],
+ *     },
+ *   ]}
+ * >
+ *   <Table rows={rows} />
+ * </ContextMenu>
+ * ```
  */
-declare function ContextMenu({ items, position, visible, onClose }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+declare function ContextMenu({ items, children }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+/** @deprecated The Radix rewrite positions the menu automatically — no coordinates needed. */
+interface ContextMenuPosition {
+    x: number;
+    y: number;
+}
 
 interface WizardStep {
     /** Ref to the DOM element to highlight */

package/dist/index.d.ts

@@ -853,42 +853,79 @@ interface MenuBarProps {
  */
 declare function MenuBar({ items }: MenuBarProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * A single action in the context menu.
+ *
+ * - Leaf items (no `children`) call `onClick` when activated.
+ * - Parent items (with `children`) open a sub-menu on hover / arrow-right.
+ * - `disabled` items render but cannot be activated; screen readers
+ *   announce them as disabled.
+ */
 interface ContextMenuActionItem {
-    key: string | number;
+    key: React$1.Key;
+    /** Label shown for the item. May be plain text or a node. */
     value: React$1.ReactNode;
     icon?: React$1.ReactNode;
-    onClick?: (path?: string, reportType?: string) => void;
-    path?: string;
-    reportType?: string;
+    /** Fires when the item is activated. Ignored when `children` is set. */
+    onClick?: () => void;
+    /** Optional sub-menu items. */
     children?: ContextMenuActionItem[];
-}
-interface ContextMenuPosition {
-    x: number;
-    y: number;
+    /** Render as disabled — still visible but not activatable. */
+    disabled?: boolean;
 }
 interface ContextMenuProps {
+    /** Top-level items. Each may carry nested `children` for sub-menus. */
     items: ContextMenuActionItem[];
-    position: ContextMenuPosition;
-    visible: boolean;
-    onClose: () => void;
+    /**
+     * The element that should respond to right-click. The entire React
+     * subtree underneath becomes the trigger area. Wrap an existing
+     * component / div / image — anything you can right-click on.
+     */
+    children: React$1.ReactNode;
 }
 /**
- * Right-click context menu positioned at arbitrary screen coordinates.
- *
- * Decoupled from `useData()` — the app manages `visible`, `position`, and
- * `items` in its own state and passes them here.
+ * Right-click context menu, built on `@radix-ui/react-context-menu`.
  *
- * @example
- * const [ctx, setCtx] = useState({ visible: false, items: [], position: { x: 0, y: 0 } })
+ * **Idiomatic usage**: wrap the element that should respond to right-click.
+ * Radix handles positioning (avoids viewport edges automatically), keyboard
+ * navigation (↑↓ to move, → to open sub-menu, ← to close, Enter to activate,
+ * Esc to dismiss), focus management, and portal-based stacking.
  *
- * <div onContextMenu={(e) => {
- *   e.preventDefault()
- *   setCtx({ visible: true, items: menuItems, position: { x: e.clientX, y: e.clientY } })
- * }}>...</div>
+ * @example Basic — flat menu
+ * ```tsx
+ * <ContextMenu
+ *   items={[
+ *     { key: 'edit',   value: 'Edit',   onClick: () => openEditor() },
+ *     { key: 'delete', value: 'Delete', onClick: () => askDelete() },
+ *   ]}
+ * >
+ *   <Card vessel={vessel} />
+ * </ContextMenu>
+ * ```
  *
- * <ContextMenu {...ctx} onClose={() => setCtx(c => ({ ...c, visible: false }))} />
+ * @example With sub-menu
+ * ```tsx
+ * <ContextMenu
+ *   items={[
+ *     {
+ *       key: 'export', value: 'Export',
+ *       children: [
+ *         { key: 'csv',  value: 'as CSV',  onClick: () => exportCsv() },
+ *         { key: 'xlsx', value: 'as Excel', onClick: () => exportXlsx() },
+ *       ],
+ *     },
+ *   ]}
+ * >
+ *   <Table rows={rows} />
+ * </ContextMenu>
+ * ```
  */
-declare function ContextMenu({ items, position, visible, onClose }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+declare function ContextMenu({ items, children }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+/** @deprecated The Radix rewrite positions the menu automatically — no coordinates needed. */
+interface ContextMenuPosition {
+    x: number;
+    y: number;
+}
 
 interface WizardStep {
     /** Ref to the DOM element to highlight */

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-GKXP6OJJ.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React9, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback, useId } from 'react';
+import React8, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback, useId } from 'react';
 import { createPortal } from 'react-dom';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
@@ -10,6 +10,7 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as Accordion from '@radix-ui/react-accordion';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as Toast from '@radix-ui/react-toast';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as Popover from '@radix-ui/react-popover';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -1355,124 +1356,82 @@ function MenuBar({ items }) {
     )
   );
 }
-function ContextMenu({ items, position, visible, onClose }) {
-  const contextRef = useRef(null);
-  const childMenuRef = useRef(null);
-  const [hasArrowUp, setHasArrowUp] = useState(true);
-  const [childArrowUp, setChildArrowUp] = useState(false);
-  const [hoveredItem, setHoveredItem] = useState(-1);
-  const [hoveredChild, setHoveredChild] = useState(-1);
-  const [activeChildren, setActiveChildren] = useState([]);
-  useEffect(() => {
-    const clickAway = ({ target }) => {
-      if (contextRef.current && !contextRef.current.contains(target)) {
-        if (childMenuRef.current) {
-          childMenuRef.current.classList.add("opacity-0");
-          childMenuRef.current.style.left = "0px";
-          childMenuRef.current.style.top = "0px";
-        }
-        setActiveChildren([]);
-        onClose();
-      }
-    };
-    window.addEventListener("click", clickAway);
-    return () => window.removeEventListener("click", clickAway);
-  }, [onClose]);
-  useEffect(() => {
-    const current = contextRef.current;
-    const child = childMenuRef.current;
-    if (!current || !child) return;
-    const { height, width } = current.getBoundingClientRect();
-    if (position.y + height >= window.innerHeight) {
-      current.style.top = `${position.y - (height - 40)}px`;
-      setHasArrowUp(false);
-    } else {
-      current.style.top = `${position.y}px`;
-      setHasArrowUp(true);
-    }
-    current.style.left = `${position.x}px`;
-    child.style.width = `${width}px`;
-    child.classList.add("opacity-0");
-  }, [position]);
-  const onItemClick = (e, item) => {
-    if (item.onClick) {
-      if (childMenuRef.current) {
-        childMenuRef.current.classList.add("opacity-0");
-        childMenuRef.current.style.left = "0px";
-        childMenuRef.current.style.top = "0px";
-      }
-      setActiveChildren([]);
-      item.onClick(item.path, item.reportType);
-    } else if (item.children?.length) {
-      const targetBbox = e.target.getBoundingClientRect();
-      const childHeight = childMenuRef.current?.getBoundingClientRect().height ?? 0;
-      const contextBbox = contextRef.current?.getBoundingClientRect() ?? { y: 0, width: 0};
-      const contextWidth = contextBbox.width;
-      if (targetBbox.y + childHeight >= window.innerHeight) {
-        setChildArrowUp(false);
-        if (childMenuRef.current) childMenuRef.current.style.top = `${targetBbox.y - childHeight}px`;
-      } else {
-        setChildArrowUp(true);
-        if (childMenuRef.current)
-          childMenuRef.current.style.top = `${targetBbox.y - contextBbox.y + targetBbox.height / 2 - 10}px`;
-      }
-      setActiveChildren(item.children);
-      if (childMenuRef.current) {
-        childMenuRef.current.classList.remove("opacity-0");
-        childMenuRef.current.style.left = `${Math.round(contextWidth + 10)}px`;
+function ContextMenu({ items, children }) {
+  return /* @__PURE__ */ jsxs(ContextMenuPrimitive.Root, { children: [
+    /* @__PURE__ */ jsx(ContextMenuPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+      ContextMenuPrimitive.Content,
+      {
+        className: CONTENT_CLASSNAME,
+        collisionPadding: 8,
+        children: items.map((item) => renderItem(item))
       }
-    }
-  };
-  if (!visible) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
+    ) })
+  ] });
+}
+var CONTENT_CLASSNAME = [
+  // Surface — semantic tokens, both modes covered
+  "min-w-[180px] rounded-lg border border-border bg-surface shadow-lg",
+  "p-1 z-[500000] text-sm text-foreground",
+  // Entry animation matches the Tooltip / Dropdown style
+  "animate-in fade-in-0 zoom-in-95",
+  "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+  // Outline reset — Radix handles focus internally
+  "focus:outline-none"
+].join(" ");
+var ITEM_CLASSNAME = [
+  "flex items-center justify-between gap-3 rounded-md px-2 py-1.5 cursor-pointer select-none",
+  "transition-colors duration-100",
+  "data-[highlighted]:bg-accent data-[highlighted]:text-accent-fg",
+  "data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:bg-transparent data-[disabled]:text-foreground-muted",
+  "focus:outline-none"
+].join(" ");
+function renderItem(item) {
+  if (item.children && item.children.length > 0) {
+    return /* @__PURE__ */ jsxs(ContextMenuPrimitive.Sub, { children: [
+      /* @__PURE__ */ jsxs(
+        ContextMenuPrimitive.SubTrigger,
+        {
+          disabled: item.disabled,
+          className: ITEM_CLASSNAME,
+          children: [
+            /* @__PURE__ */ jsx(ContextMenuLabel, { icon: item.icon, value: item.value }),
+            /* @__PURE__ */ jsx(ChevronRight2, {})
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+        ContextMenuPrimitive.SubContent,
+        {
+          className: CONTENT_CLASSNAME,
+          sideOffset: 2,
+          alignOffset: -4,
+          collisionPadding: 8,
+          children: item.children.map((sub) => renderItem(sub))
+        }
+      ) })
+    ] }, item.key);
+  }
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Item,
     {
-      ref: contextRef,
-      className: `transition-all duration-150 absolute rounded-lg bg-ice text-prussian-blue z-30 flex ${hasArrowUp && hoveredItem === 0 ? "context-arrow-up context-arrow-hovered" : !hasArrowUp && hoveredItem === items.length - 1 ? "context-arrow-down context-arrow-hovered" : hasArrowUp ? "context-arrow-up" : "context-arrow-down"}`,
-      children: [
-        /* @__PURE__ */ jsx("ul", { className: "z-50", children: items.map((item, index) => /* @__PURE__ */ jsxs(
-          "li",
-          {
-            onContextMenu: (e) => e.preventDefault(),
-            onMouseEnter: () => setHoveredItem(index),
-            onMouseLeave: () => setHoveredItem(-1),
-            className: `flex items-center justify-between transition-all duration-300 p-2 cursor-pointer hover:bg-ice-dark ${index === 0 ? "rounded-tl-lg rounded-tr-lg" : ""} ${index === items.length - 1 ? "rounded-bl-lg rounded-br-lg" : ""}`,
-            onClick: (e) => onItemClick(e, item),
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pointer-events-none", children: [
-                item.icon,
-                item.value
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "pointer-events-none", children: item.children && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) }) })
-            ]
-          },
-          item.key
-        )) }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: childMenuRef,
-            className: `transition-all duration-150 absolute rounded-lg bg-ice text-prussian-blue ${childArrowUp && hoveredChild === 0 ? "context-arrow-up context-arrow-hovered" : !childArrowUp && hoveredChild === activeChildren.length - 1 ? "context-arrow-down context-arrow-hovered" : childArrowUp ? "context-arrow-up" : "context-arrow-down"}`,
-            children: /* @__PURE__ */ jsx("ul", { children: activeChildren.map((item, index) => /* @__PURE__ */ jsxs(
-              "li",
-              {
-                className: `flex items-center gap-2 p-2 cursor-pointer transition-all duration-150 hover:bg-ice-dark ${index === 0 ? "rounded-tl-lg rounded-tr-lg" : ""} ${index === activeChildren.length - 1 ? "rounded-bl-lg rounded-br-lg" : ""}`,
-                onClick: () => item.onClick?.(item.path, item.reportType),
-                onMouseEnter: () => setHoveredChild(index),
-                onMouseLeave: () => setHoveredChild(-1),
-                children: [
-                  item.icon,
-                  item.value
-                ]
-              },
-              index
-            )) })
-          }
-        )
-      ]
-    }
+      disabled: item.disabled,
+      onSelect: () => item.onClick?.(),
+      className: ITEM_CLASSNAME,
+      children: /* @__PURE__ */ jsx(ContextMenuLabel, { icon: item.icon, value: item.value })
+    },
+    item.key
   );
 }
+function ContextMenuLabel({ icon, value }) {
+  return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: value })
+  ] });
+}
+function ChevronRight2() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4 flex-shrink-0", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+}
 function Wizard({ children, steps, storageKey = "po_wizard" }) {
   const wizardRef = useRef(null);
   const [activeStep, setActiveStep] = useState(0);
@@ -1539,7 +1498,7 @@ function Wizard({ children, steps, storageKey = "po_wizard" }) {
     children
   ] });
 }
-var SearchInput = React9.forwardRef(function SearchInput2({
+var SearchInput = React8.forwardRef(function SearchInput2({
   value,
   onChange,
   disabled,
@@ -1854,7 +1813,7 @@ function TableBody({
   return /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
     const rowKey = getRowKey(row, i);
     const isExpanded = expanded.has(rowKey);
-    return /* @__PURE__ */ jsxs(React9.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React8.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "tr",
         {
@@ -2451,7 +2410,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React9.useId().replace(/:/g, "");
+  const id = React8.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {
@@ -3293,7 +3252,7 @@ function getMonthDays(year, month) {
   }
   return days;
 }
-var ChevronRight2 = ({ color = colors_default.PALETTE["prussian-blue"] }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+var ChevronRight3 = ({ color = colors_default.PALETTE["prussian-blue"] }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
 var DoubleChevronRight2 = ({ color = colors_default.PALETTE["prussian-blue"] }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
 var ChevronDown2 = ({ color = colors_default.PALETTE["prussian-blue"] }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) });
 function DatePickerBase({
@@ -3408,13 +3367,13 @@ function DatePickerBase({
           children: isExpanded && /* @__PURE__ */ jsxs("div", { className: "pt-3", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center mx-auto w-max", children: [
               /* @__PURE__ */ jsx("span", { onClick: () => setCurrentYear((y) => y - 1), className: "cursor-pointer rotate-180 p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsx(DoubleChevronRight2, {}) }),
-              /* @__PURE__ */ jsx("span", { onClick: toPrevMonth, className: "cursor-pointer rotate-180 p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsx(ChevronRight2, {}) }),
+              /* @__PURE__ */ jsx("span", { onClick: toPrevMonth, className: "cursor-pointer rotate-180 p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsx(ChevronRight3, {}) }),
               /* @__PURE__ */ jsxs("span", { className: "font-bold text-prussian-blue select-none w-[130px] text-center", children: [
                 currentYear,
                 " ",
                 MONTHS[currentMonth]
               ] }),
-              /* @__PURE__ */ jsx("span", { onClick: toNextMonth, className: "cursor-pointer p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsx(ChevronRight2, {}) }),
+              /* @__PURE__ */ jsx("span", { onClick: toNextMonth, className: "cursor-pointer p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsx(ChevronRight3, {}) }),
               /* @__PURE__ */ jsx("span", { onClick: () => setCurrentYear((y) => y + 1), className: "cursor-pointer p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsx(DoubleChevronRight2, {}) })
             ] }),
             /* @__PURE__ */ jsx("div", { className: "flex gap-3 p-2", children: renderCalendar().map((weekDay, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [