@harborclient/sdk 1.0.68 → 1.0.69

package/dist/components/RowActionsMenu/Submenu.d.ts

@@ -0,0 +1,49 @@
+import type { JSX } from 'react';
+import type { MenuItem } from './index.js';
+interface Props {
+    /**
+     * Grouped flyout entries, mirroring `RowActionsMenu`'s `groups` shape.
+     */
+    groups: MenuItem[][];
+    /**
+     * Bounding rect of the parent row that anchors this flyout.
+     */
+    anchorRect: DOMRect;
+    /**
+     * Id applied to the flyout panel for `aria-controls` on the anchor row.
+     */
+    menuElementId: string;
+    /**
+     * Called when a leaf item is activated. The caller is responsible for
+     * closing the whole menu tree and invoking the item's `onSelect`.
+     */
+    onSelectItem: (item: MenuItem) => void;
+    /**
+     * Closes just this flyout and returns focus to the anchor row.
+     */
+    onRequestClose: () => void;
+    /**
+     * Closes the entire menu tree, e.g. when the user tabs out.
+     */
+    onCloseAll: () => void;
+    /**
+     * Forwarded so the parent can cancel a pending auto-close while the
+     * pointer is over the flyout panel itself.
+     */
+    onMouseEnter: () => void;
+    /**
+     * Forwarded so the parent can schedule closing this flyout once the
+     * pointer leaves the panel.
+     */
+    onMouseLeave: () => void;
+}
+/**
+ * Flyout panel opened beside a `RowActionsMenu` row that has a `submenu`.
+ * Portaled to `document.body` with fixed positioning, matching the main
+ * panel's styling and keyboard behavior (roving tabindex, typeahead,
+ * Home/End). `ArrowLeft` and `Tab` bubble a close request to the parent
+ * instead of being handled locally.
+ */
+export declare function Submenu({ groups, anchorRect, menuElementId, onSelectItem, onRequestClose, onCloseAll, onMouseEnter, onMouseLeave }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=Submenu.d.ts.map

package/dist/components/RowActionsMenu/Submenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Submenu.d.ts","sourceRoot":"","sources":["../../../src/components/RowActionsMenu/Submenu.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAgBhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAK3C,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IAEvB;;;OAGG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IAEzB;;;OAGG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,UAAU,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,UAAU,EACV,YAAY,EACZ,YAAY,EACb,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA+MrB"}

package/dist/components/RowActionsMenu/Submenu.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from '@harborclient/sdk/react';
+import { FaIcon } from '../FaIcon/index.js';
+import { MENU_MIN_WIDTH_PX, clampMenuPosition, getSubmenuAnchoredPosition } from '../menuPosition.js';
+import { portalToBody } from '../portalToBody.js';
+import { findAdjacentEnabledIndex, findEdgeEnabledIndex, isMenuItemEnabled, menuItemClass } from '../rowActionsMenuHelpers.js';
+import { cn, resolveMenuTypeahead } from '../utils.js';
+/** Milliseconds before an accumulated typeahead search resets. */
+const TYPEAHEAD_TIMEOUT_MS = 500;
+/**
+ * Flyout panel opened beside a `RowActionsMenu` row that has a `submenu`.
+ * Portaled to `document.body` with fixed positioning, matching the main
+ * panel's styling and keyboard behavior (roving tabindex, typeahead,
+ * Home/End). `ArrowLeft` and `Tab` bubble a close request to the parent
+ * instead of being handled locally.
+ */
+export function Submenu({ groups, anchorRect, menuElementId, onSelectItem, onRequestClose, onCloseAll, onMouseEnter, onMouseLeave }) {
+    const panelRef = useRef(null);
+    const itemRefs = useRef([]);
+    const typeaheadBuffer = useRef('');
+    const typeaheadTimer = useRef(null);
+    const flatItems = useMemo(() => groups.flat(), [groups]);
+    const itemLabels = useMemo(() => flatItems.map((item) => item.label), [flatItems]);
+    const [focusedIndex, setFocusedIndex] = useState(() => findEdgeEnabledIndex(flatItems, false) ?? 0);
+    const [position, setPosition] = useState(() => getSubmenuAnchoredPosition(anchorRect, { width: MENU_MIN_WIDTH_PX, height: 0 }));
+    /**
+     * Clears the accumulated typeahead buffer.
+     */
+    const clearTypeahead = useCallback(() => {
+        typeaheadBuffer.current = '';
+        if (typeaheadTimer.current != null) {
+            window.clearTimeout(typeaheadTimer.current);
+            typeaheadTimer.current = null;
+        }
+    }, []);
+    /**
+     * Focuses a flyout item by index and updates roving tabindex state.
+     */
+    const focusItem = useCallback((index) => {
+        setFocusedIndex(index);
+        requestAnimationFrame(() => {
+            itemRefs.current[index]?.focus();
+        });
+    }, []);
+    /**
+     * Moves focus into the flyout as soon as it mounts.
+     */
+    useEffect(() => {
+        requestAnimationFrame(() => {
+            itemRefs.current[focusedIndex]?.focus();
+        });
+        // Intentionally runs once on mount; the flyout is remounted per anchor,
+        // so `focusedIndex` never needs to re-trigger this effect.
+    }, []);
+    /**
+     * Positions the flyout beside the anchor row once its size is known,
+     * flipping sides and clamping so it stays inside the viewport.
+     */
+    useLayoutEffect(() => {
+        const panelRect = panelRef.current?.getBoundingClientRect();
+        const size = {
+            width: panelRect?.width ?? MENU_MIN_WIDTH_PX,
+            height: panelRect?.height ?? 0
+        };
+        const requested = getSubmenuAnchoredPosition(anchorRect, size);
+        setPosition(size.height > 0 ? clampMenuPosition(requested, size) : requested);
+    }, [anchorRect, groups]);
+    /**
+     * Handles keyboard navigation within the flyout. `ArrowLeft` and `Tab`
+     * stop propagation and delegate closing to the parent, since the parent
+     * panel would otherwise also react to the bubbled event.
+     */
+    const handleKeyDown = (event) => {
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            event.stopPropagation();
+            onCloseAll();
+            return;
+        }
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            event.stopPropagation();
+            onRequestClose();
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            const direction = event.key === 'ArrowDown' ? 1 : -1;
+            const nextIndex = findAdjacentEnabledIndex(flatItems, focusedIndex, direction);
+            if (nextIndex != null) {
+                event.preventDefault();
+                event.stopPropagation();
+                clearTypeahead();
+                focusItem(nextIndex);
+            }
+            return;
+        }
+        if (event.key === 'Home') {
+            const firstIndex = findEdgeEnabledIndex(flatItems, false);
+            if (firstIndex != null) {
+                event.preventDefault();
+                event.stopPropagation();
+                clearTypeahead();
+                focusItem(firstIndex);
+            }
+            return;
+        }
+        if (event.key === 'End') {
+            const lastIndex = findEdgeEnabledIndex(flatItems, true);
+            if (lastIndex != null) {
+                event.preventDefault();
+                event.stopPropagation();
+                clearTypeahead();
+                focusItem(lastIndex);
+            }
+            return;
+        }
+        const typeahead = resolveMenuTypeahead(itemLabels, focusedIndex, event.key, typeaheadBuffer.current);
+        if (typeahead) {
+            const candidate = flatItems[typeahead.index];
+            if (!candidate || !isMenuItemEnabled(candidate)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            typeaheadBuffer.current = typeahead.buffer;
+            if (typeaheadTimer.current != null) {
+                window.clearTimeout(typeaheadTimer.current);
+            }
+            typeaheadTimer.current = window.setTimeout(() => {
+                typeaheadBuffer.current = '';
+                typeaheadTimer.current = null;
+            }, TYPEAHEAD_TIMEOUT_MS);
+            focusItem(typeahead.index);
+        }
+    };
+    return portalToBody(_jsx("div", { ref: panelRef, id: menuElementId, role: "menu", className: "hc-row-actions-menu-panel hc-row-actions-submenu-panel app-no-drag fixed z-50 min-w-[200px] rounded-md border border-separator bg-surface py-1 shadow-md", style: { left: position.x, top: position.y }, onKeyDown: handleKeyDown, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: groups.map((group, groupIndex) => {
+            let flatIndex = groups.slice(0, groupIndex).reduce((count, g) => count + g.length, 0);
+            return (_jsx("div", { className: groupIndex > 0
+                    ? 'hc-row-actions-menu-group border-t border-separator'
+                    : 'hc-row-actions-menu-group', children: group.map((item) => {
+                    const itemIndex = flatIndex++;
+                    const isCheckboxItem = item.checked !== undefined;
+                    const isDisabled = item.disabled === true;
+                    return (_jsxs("button", { ref: (el) => {
+                            itemRefs.current[itemIndex] = isDisabled ? null : el;
+                        }, type: "button", role: isCheckboxItem ? 'menuitemcheckbox' : 'menuitem', "aria-checked": isCheckboxItem ? item.checked : undefined, "aria-disabled": isDisabled || undefined, disabled: isDisabled, tabIndex: isDisabled ? -1 : itemIndex === focusedIndex ? 0 : -1, className: cn('hc-row-actions-menu-item', menuItemClass(item.variant, isDisabled)), onClick: (e) => {
+                            e.stopPropagation();
+                            if (isDisabled) {
+                                return;
+                            }
+                            onSelectItem(item);
+                        }, children: [isCheckboxItem ? (_jsx("span", { className: "hc-row-actions-menu-item-check inline-flex w-4 shrink-0 justify-center", "aria-hidden": true, children: item.checked ? _jsx(FaIcon, { icon: faCheck, className: "h-3 w-3" }) : null })) : null, _jsx("span", { className: "hc-row-actions-menu-item-label min-w-0", children: item.label })] }, item.label));
+                }) }, groupIndex));
+        }) }));
+}

package/dist/components/RowActionsMenu/index.d.ts

@@ -1,14 +1,36 @@
-import type { ComponentPropsWithoutRef, JSX } from 'react';
-export type MenuItem = {
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
+import { type ButtonVariant } from '../Button/index.js';
+interface MenuItemBase {
     label: string;
-    onSelect: () => void;
     variant?: 'default' | 'danger';
     /**
      * When set, renders the item as a checkbox-style menu entry with a leading
      * checkmark slot. `true` shows the check; `false` reserves the slot for alignment.
      */
     checked?: boolean;
-};
+    /**
+     * When true, renders a non-interactive informational row excluded from keyboard
+     * focus and activation.
+     */
+    disabled?: boolean;
+}
+/**
+ * A single row in a `RowActionsMenu`. An item is either a leaf action that
+ * runs `onSelect`, or a parent that opens a `submenu` flyout beside it (shown
+ * with a trailing caret) — never both.
+ */
+export type MenuItem = (MenuItemBase & {
+    onSelect: () => void;
+    submenu?: undefined;
+}) | (MenuItemBase & {
+    onSelect?: undefined;
+    /**
+     * Grouped entries shown in a flyout beside this row when it is hovered,
+     * clicked, or activated with `ArrowRight`/`Enter`.
+     */
+    submenu: MenuItem[][];
+});
 interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
     /**
      * Grouped menu entries shown when the trigger is open. Each inner array is
@@ -27,10 +49,41 @@ interface Props extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
      * Called when the user opens or closes a menu.
      */
     onOpenChange: (id: string | null) => void;
+    /**
+     * Visual style for the menu trigger button. Defaults to `icon` (hamburger).
+     */
+    triggerVariant?: ButtonVariant;
+    /**
+     * Optional label rendered beside the trigger icon. When set, the trigger
+     * switches from icon-only to a labeled control.
+     */
+    triggerLabel?: ReactNode;
+    /**
+     * Icon shown in the trigger. Defaults to the hamburger icon.
+     */
+    triggerIcon?: IconDefinition;
+    /**
+     * Accessible name for the trigger. Defaults to "Row actions" for icon-only
+     * triggers or `triggerLabel` when a label is provided.
+     */
+    triggerAriaLabel?: string;
+    /**
+     * Tooltip for the trigger button.
+     */
+    triggerTitle?: string;
+    /**
+     * Additional classes merged onto the trigger button.
+     */
+    triggerClassName?: string;
 }
 /**
  * Hamburger-triggered dropdown for row-level actions (rename, delete, etc.).
+ *
+ * The menu panel is portaled to `document.body` with fixed positioning so it is
+ * not clipped by overflow-hidden sidebar or scroll containers. Items with a
+ * `submenu` open a nested flyout panel beside them on hover, click, or
+ * `ArrowRight`/`Enter`.
  */
-export declare function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, className, ...props }: Props): JSX.Element;
+export declare function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, triggerVariant, triggerLabel, triggerIcon, triggerAriaLabel, triggerTitle, triggerClassName, className, ...props }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/RowActionsMenu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RowActionsMenu/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAK1E,MAAM,MAAM,QAAQ,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;;OAGG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;OAEG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAgBD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,MAAM,EACN,UAAU,EACV,YAAY,EACZ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA0PrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RowActionsMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAUxE,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrF,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAkBhE,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAChB,CAAC,YAAY,GAAG;IAAE,QAAQ,EAAE,MAAM,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,SAAS,CAAA;CAAE,CAAC,GAC9D,CAAC,YAAY,GAAG;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,EAAE,QAAQ,EAAE,EAAE,CAAC;CACvB,CAAC,CAAC;AAEP,UAAU,KAAM,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACvE;;;OAGG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1B;;OAEG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAE1C;;OAEG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC;IAE/B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAE7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAUD;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,MAAM,EACN,UAAU,EACV,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,WAAoB,EACpB,gBAAgB,EAChB,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkjBrB"}

package/dist/components/RowActionsMenu/index.js

@@ -1,34 +1,50 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
-import { faBars, faCheck } from '@fortawesome/free-solid-svg-icons';
-import { useCallback, useEffect, useMemo, useRef, useState } from '@harborclient/sdk/react';
+import { faBars, faCaretRight, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from '@harborclient/sdk/react';
 import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
-import { cn, resolveMenuTypeahead, resolveTabListKeyAction } from '../utils.js';
+import { MENU_MIN_WIDTH_PX, clampMenuPosition, getTriggerAnchoredMenuPosition } from '../menuPosition.js';
+import { portalToBody } from '../portalToBody.js';
+import { findAdjacentEnabledIndex, findEdgeEnabledIndex, isMenuItemEnabled, menuItemClass } from '../rowActionsMenuHelpers.js';
+import { cn, resolveMenuTypeahead } from '../utils.js';
+import { Submenu } from './Submenu.js';
 const TYPEAHEAD_TIMEOUT_MS = 500;
-/**
- * Tailwind classes for a single menu item button.
- */
-function menuItemClass(variant) {
-    const base = 'flex w-full cursor-pointer items-center gap-2 border-none bg-transparent px-3.5 py-1.5 text-left text-[16px] app-no-drag';
-    return variant === 'danger'
-        ? `${base} text-text hover:bg-danger/15 hover:text-danger`
-        : `${base} text-text hover:bg-selection`;
-}
+/** Delay before a hovered row's submenu opens, so passing over rows doesn't flash flyouts. */
+const SUBMENU_OPEN_DELAY_MS = 120;
+/** Delay before a submenu closes after the pointer leaves its row and panel. */
+const SUBMENU_CLOSE_DELAY_MS = 200;
 /**
  * Hamburger-triggered dropdown for row-level actions (rename, delete, etc.).
+ *
+ * The menu panel is portaled to `document.body` with fixed positioning so it is
+ * not clipped by overflow-hidden sidebar or scroll containers. Items with a
+ * `submenu` open a nested flyout panel beside them on hover, click, or
+ * `ArrowRight`/`Enter`.
  */
-export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, className, ...props }) {
+export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, triggerVariant, triggerLabel, triggerIcon = faBars, triggerAriaLabel, triggerTitle, triggerClassName, className, ...props }) {
     const isOpen = openMenuId === menuId;
     const menuElementId = `${menuId}-menu`;
+    const submenuElementId = `${menuId}-submenu`;
     const rootRef = useRef(null);
     const triggerRef = useRef(null);
+    const panelRef = useRef(null);
     const itemRefs = useRef([]);
     const typeaheadBuffer = useRef('');
     const typeaheadTimer = useRef(null);
     const wasOpenRef = useRef(isOpen);
+    const submenuOpenTimer = useRef(null);
+    const submenuCloseTimer = useRef(null);
     const [focusedIndex, setFocusedIndex] = useState(0);
+    const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 });
+    const [openSubmenuIndex, setOpenSubmenuIndex] = useState(null);
     const flatItems = useMemo(() => groups.flat(), [groups]);
     const itemLabels = useMemo(() => flatItems.map((item) => item.label), [flatItems]);
+    const hasEnabledItems = useMemo(() => flatItems.some((item) => isMenuItemEnabled(item)), [flatItems]);
+    const isLabeledTrigger = triggerLabel != null;
+    const resolvedTriggerVariant = triggerVariant ?? (isLabeledTrigger ? 'secondary' : 'icon');
+    const resolvedTriggerTitle = triggerTitle ?? (isLabeledTrigger ? undefined : 'Actions');
+    const resolvedTriggerAriaLabel = triggerAriaLabel ??
+        (typeof triggerLabel === 'string' ? triggerLabel : isLabeledTrigger ? 'Menu' : 'Row actions');
     /**
      * Clears the accumulated typeahead buffer.
      */
@@ -39,16 +55,102 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, class
             typeaheadTimer.current = null;
         }
     }, []);
+    /**
+     * Cancels any pending submenu open/close timers.
+     */
+    const clearSubmenuTimers = useCallback(() => {
+        if (submenuOpenTimer.current != null) {
+            window.clearTimeout(submenuOpenTimer.current);
+            submenuOpenTimer.current = null;
+        }
+        if (submenuCloseTimer.current != null) {
+            window.clearTimeout(submenuCloseTimer.current);
+            submenuCloseTimer.current = null;
+        }
+    }, []);
     /**
      * Closes the menu and returns focus to the trigger button.
      */
     const closeMenu = useCallback(() => {
         clearTypeahead();
+        clearSubmenuTimers();
         onOpenChange(null);
         requestAnimationFrame(() => {
             triggerRef.current?.focus();
         });
-    }, [clearTypeahead, onOpenChange]);
+    }, [clearSubmenuTimers, clearTypeahead, onOpenChange]);
+    /**
+     * Opens the submenu belonging to the item at `index` immediately, canceling
+     * any pending open/close timers.
+     */
+    const openSubmenuAt = useCallback((index) => {
+        clearSubmenuTimers();
+        setOpenSubmenuIndex(index);
+    }, [clearSubmenuTimers]);
+    /**
+     * Closes the currently open submenu and returns focus to its parent row.
+     */
+    const closeSubmenuAndRefocus = useCallback(() => {
+        clearSubmenuTimers();
+        setOpenSubmenuIndex((current) => {
+            if (current != null) {
+                requestAnimationFrame(() => {
+                    itemRefs.current[current]?.focus();
+                });
+            }
+            return null;
+        });
+    }, [clearSubmenuTimers]);
+    /**
+     * Schedules opening the submenu at `index` after a short hover-intent
+     * delay, so moving the pointer across sibling rows doesn't flash flyouts.
+     */
+    const scheduleOpenSubmenu = useCallback((index) => {
+        clearSubmenuTimers();
+        submenuOpenTimer.current = window.setTimeout(() => {
+            submenuOpenTimer.current = null;
+            setOpenSubmenuIndex(index);
+        }, SUBMENU_OPEN_DELAY_MS);
+    }, [clearSubmenuTimers]);
+    /**
+     * Schedules closing the open submenu after a short delay, giving the
+     * pointer time to travel from the row into the flyout panel.
+     */
+    const scheduleCloseSubmenu = useCallback(() => {
+        if (submenuOpenTimer.current != null) {
+            window.clearTimeout(submenuOpenTimer.current);
+            submenuOpenTimer.current = null;
+        }
+        submenuCloseTimer.current = window.setTimeout(() => {
+            submenuCloseTimer.current = null;
+            setOpenSubmenuIndex(null);
+        }, SUBMENU_CLOSE_DELAY_MS);
+    }, []);
+    /**
+     * Handles pointer hover over a row: opens that row's submenu (immediately
+     * if a different submenu is already open, otherwise after a short delay),
+     * or schedules closing the open submenu when hovering a row without one.
+     */
+    const handleItemMouseEnter = useCallback((item, itemIndex) => {
+        if (item.submenu) {
+            if (openSubmenuIndex === itemIndex) {
+                clearSubmenuTimers();
+            }
+            else if (openSubmenuIndex != null) {
+                openSubmenuAt(itemIndex);
+            }
+            else {
+                scheduleOpenSubmenu(itemIndex);
+            }
+            return;
+        }
+        if (openSubmenuIndex != null) {
+            scheduleCloseSubmenu();
+        }
+        else {
+            clearSubmenuTimers();
+        }
+    }, [clearSubmenuTimers, openSubmenuAt, openSubmenuIndex, scheduleCloseSubmenu, scheduleOpenSubmenu]);
     /**
      * Focuses a menu item by index and updates roving tabindex state.
      */
@@ -62,11 +164,35 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, class
      * Opens the menu and focuses the first or last item.
      */
     const openMenu = useCallback((focusLast = false) => {
-        if (flatItems.length === 0)
+        if (!hasEnabledItems)
             return;
-        setFocusedIndex(focusLast ? flatItems.length - 1 : 0);
+        const edgeIndex = findEdgeEnabledIndex(flatItems, focusLast);
+        if (edgeIndex == null)
+            return;
+        setFocusedIndex(edgeIndex);
         onOpenChange(menuId);
-    }, [flatItems.length, menuId, onOpenChange]);
+    }, [flatItems, hasEnabledItems, menuId, onOpenChange]);
+    /**
+     * Updates fixed menu coordinates from the trigger and measured panel size.
+     */
+    const updateMenuPosition = useCallback(() => {
+        const trigger = triggerRef.current;
+        if (!trigger) {
+            return;
+        }
+        const triggerRect = trigger.getBoundingClientRect();
+        const panelRect = panelRef.current?.getBoundingClientRect();
+        const menuSize = {
+            width: panelRect?.width ?? MENU_MIN_WIDTH_PX,
+            height: panelRect?.height ?? 0
+        };
+        const requested = getTriggerAnchoredMenuPosition(triggerRect, menuSize);
+        if (menuSize.height > 0) {
+            setMenuPosition(clampMenuPosition(requested, menuSize));
+            return;
+        }
+        setMenuPosition(requested);
+    }, []);
     /**
      * Moves focus into the menu after it opens and item refs are mounted.
      */
@@ -79,30 +205,66 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, class
         wasOpenRef.current = isOpen;
     }, [focusedIndex, isOpen]);
     /**
-     * Resets item refs when the menu closes.
+     * Resets item refs and submenu state when the menu closes.
      */
     useEffect(() => {
         if (!isOpen) {
             itemRefs.current = [];
             setFocusedIndex(0);
+            setOpenSubmenuIndex(null);
             clearTypeahead();
+            clearSubmenuTimers();
         }
-    }, [clearTypeahead, isOpen]);
+    }, [clearSubmenuTimers, clearTypeahead, isOpen]);
     /**
-     * Closes the menu on outside click or Escape while it is open.
+     * Re-clamps the portaled menu after mount once panel dimensions are known.
+     */
+    useLayoutEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        updateMenuPosition();
+    }, [groups, isOpen, updateMenuPosition]);
+    /**
+     * Tracks trigger movement while the menu is open so fixed coordinates stay aligned.
+     */
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+        updateMenuPosition();
+        window.addEventListener('scroll', updateMenuPosition, true);
+        window.addEventListener('resize', updateMenuPosition);
+        return () => {
+            window.removeEventListener('scroll', updateMenuPosition, true);
+            window.removeEventListener('resize', updateMenuPosition);
+        };
+    }, [isOpen, updateMenuPosition]);
+    /**
+     * Closes the menu on outside click, and closes the open submenu (or, if
+     * none is open, the whole menu) on Escape, while the menu is open.
      */
     useEffect(() => {
         if (!isOpen)
             return;
         const handleMouseDown = (e) => {
-            if (rootRef.current && !rootRef.current.contains(e.target)) {
-                closeMenu();
+            const target = e.target;
+            if (rootRef.current?.contains(target) ||
+                panelRef.current?.contains(target) ||
+                document.getElementById(submenuElementId)?.contains(target)) {
+                return;
             }
+            closeMenu();
         };
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
                 e.preventDefault();
-                closeMenu();
+                if (openSubmenuIndex != null) {
+                    closeSubmenuAndRefocus();
+                }
+                else {
+                    closeMenu();
+                }
             }
         };
         document.addEventListener('mousedown', handleMouseDown);
@@ -111,7 +273,7 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, class
             document.removeEventListener('mousedown', handleMouseDown);
             document.removeEventListener('keydown', handleKeyDown);
         };
-    }, [closeMenu, isOpen]);
+    }, [closeMenu, closeSubmenuAndRefocus, isOpen, openSubmenuIndex, submenuElementId]);
     /**
      * Handles keyboard interaction on the menu trigger when closed.
      */
@@ -129,24 +291,59 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, class
         }
     };
     /**
-     * Handles keyboard navigation within the open menu.
+     * Handles keyboard navigation within the open menu. Arrow/Home/End/typeahead
+     * are ignored while a submenu has focus, since `Submenu` stops propagation
+     * for the keys it handles itself.
      */
     const handleMenuKeyDown = (event) => {
-        if (flatItems.length === 0)
+        if (!hasEnabledItems)
             return;
         if (event.key === 'Tab') {
             closeMenu();
             return;
         }
-        const arrowIndex = resolveTabListKeyAction(event.key, focusedIndex, flatItems.length);
-        if (arrowIndex !== null) {
-            event.preventDefault();
-            clearTypeahead();
-            focusItem(arrowIndex);
+        if (event.key === 'ArrowRight') {
+            const candidate = flatItems[focusedIndex];
+            if (candidate?.submenu) {
+                event.preventDefault();
+                openSubmenuAt(focusedIndex);
+            }
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            const direction = event.key === 'ArrowDown' ? 1 : -1;
+            const nextIndex = findAdjacentEnabledIndex(flatItems, focusedIndex, direction);
+            if (nextIndex != null) {
+                event.preventDefault();
+                clearTypeahead();
+                focusItem(nextIndex);
+            }
+            return;
+        }
+        if (event.key === 'Home') {
+            const firstIndex = findEdgeEnabledIndex(flatItems, false);
+            if (firstIndex != null) {
+                event.preventDefault();
+                clearTypeahead();
+                focusItem(firstIndex);
+            }
+            return;
+        }
+        if (event.key === 'End') {
+            const lastIndex = findEdgeEnabledIndex(flatItems, true);
+            if (lastIndex != null) {
+                event.preventDefault();
+                clearTypeahead();
+                focusItem(lastIndex);
+            }
             return;
         }
         const typeahead = resolveMenuTypeahead(itemLabels, focusedIndex, event.key, typeaheadBuffer.current);
         if (typeahead) {
+            const candidate = flatItems[typeahead.index];
+            if (!candidate || !isMenuItemEnabled(candidate)) {
+                return;
+            }
             event.preventDefault();
             typeaheadBuffer.current = typeahead.buffer;
             if (typeaheadTimer.current != null) {
@@ -159,28 +356,69 @@ export function RowActionsMenu({ groups, menuId, openMenuId, onOpenChange, class
             focusItem(typeahead.index);
         }
     };
-    return (_jsxs("div", { ref: rootRef, ...props, className: cn('hc-row-actions-menu relative shrink-0', className), children: [_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", className: "hc-row-actions-menu-trigger", title: "Actions", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: (e) => {
-                    e.stopPropagation();
-                    if (isOpen) {
-                        closeMenu();
-                    }
-                    else {
-                        openMenu(false);
-                    }
-                }, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: faBars, className: "h-3.5 w-3.5" }) }), isOpen && (_jsx("div", { id: menuElementId, role: "menu", className: "hc-row-actions-menu-panel app-no-drag absolute top-full right-0 z-10 mt-0.5 min-w-[200px] rounded-md border border-separator bg-surface py-1 shadow-md", onKeyDown: handleMenuKeyDown, children: groups.map((group, groupIndex) => {
-                    let flatIndex = groups.slice(0, groupIndex).reduce((count, g) => count + g.length, 0);
-                    return (_jsx("div", { className: groupIndex > 0
-                            ? 'hc-row-actions-menu-group border-t border-separator'
-                            : 'hc-row-actions-menu-group', children: group.map((item) => {
-                            const itemIndex = flatIndex++;
-                            const isCheckboxItem = item.checked !== undefined;
-                            return (_jsxs("button", { ref: (el) => {
-                                    itemRefs.current[itemIndex] = el;
-                                }, type: "button", role: isCheckboxItem ? 'menuitemcheckbox' : 'menuitem', "aria-checked": isCheckboxItem ? item.checked : undefined, tabIndex: itemIndex === focusedIndex ? 0 : -1, className: cn('hc-row-actions-menu-item', menuItemClass(item.variant)), onClick: (e) => {
-                                    e.stopPropagation();
-                                    closeMenu();
-                                    item.onSelect();
-                                }, children: [isCheckboxItem ? (_jsx("span", { className: "hc-row-actions-menu-item-check inline-flex w-4 shrink-0 justify-center", "aria-hidden": true, children: item.checked ? _jsx(FaIcon, { icon: faCheck, className: "h-3 w-3" }) : null })) : null, _jsx("span", { className: "hc-row-actions-menu-item-label min-w-0", children: item.label })] }, item.label));
-                        }) }, groupIndex));
-                }) }))] }));
+    const openSubmenuItem = openSubmenuIndex != null ? flatItems[openSubmenuIndex] : undefined;
+    const openSubmenuAnchorRect = openSubmenuIndex != null ? itemRefs.current[openSubmenuIndex]?.getBoundingClientRect() : null;
+    const menuPanel = isOpen ? (_jsx("div", { ref: panelRef, id: menuElementId, role: "menu", className: "hc-row-actions-menu-panel app-no-drag fixed z-50 min-w-[200px] rounded-md border border-separator bg-surface py-1 shadow-md", style: { left: menuPosition.x, top: menuPosition.y }, onKeyDown: handleMenuKeyDown, onMouseLeave: () => {
+            if (openSubmenuIndex != null) {
+                scheduleCloseSubmenu();
+            }
+        }, children: groups.map((group, groupIndex) => {
+            let flatIndex = groups.slice(0, groupIndex).reduce((count, g) => count + g.length, 0);
+            return (_jsx("div", { className: groupIndex > 0
+                    ? 'hc-row-actions-menu-group border-t border-separator'
+                    : 'hc-row-actions-menu-group', children: group.map((item) => {
+                    const itemIndex = flatIndex++;
+                    const isCheckboxItem = item.checked !== undefined;
+                    const isDisabled = item.disabled === true;
+                    const hasSubmenu = item.submenu !== undefined;
+                    return (_jsxs("button", { ref: (el) => {
+                            itemRefs.current[itemIndex] = isDisabled ? null : el;
+                        }, type: "button", role: isCheckboxItem ? 'menuitemcheckbox' : 'menuitem', "aria-checked": isCheckboxItem ? item.checked : undefined, "aria-disabled": isDisabled || undefined, "aria-haspopup": hasSubmenu ? 'menu' : undefined, "aria-expanded": hasSubmenu ? openSubmenuIndex === itemIndex : undefined, "aria-controls": hasSubmenu && openSubmenuIndex === itemIndex ? submenuElementId : undefined, disabled: isDisabled, tabIndex: isDisabled ? -1 : itemIndex === focusedIndex ? 0 : -1, className: cn('hc-row-actions-menu-item', menuItemClass(item.variant, isDisabled)), onMouseEnter: () => {
+                            if (!isDisabled) {
+                                handleItemMouseEnter(item, itemIndex);
+                            }
+                        }, onClick: (e) => {
+                            e.stopPropagation();
+                            if (isDisabled) {
+                                return;
+                            }
+                            if (item.submenu) {
+                                if (openSubmenuIndex === itemIndex) {
+                                    closeSubmenuAndRefocus();
+                                }
+                                else {
+                                    openSubmenuAt(itemIndex);
+                                }
+                                return;
+                            }
+                            closeMenu();
+                            item.onSelect();
+                        }, children: [isCheckboxItem ? (_jsx("span", { className: "hc-row-actions-menu-item-check inline-flex w-4 shrink-0 justify-center", "aria-hidden": true, children: item.checked ? _jsx(FaIcon, { icon: faCheck, className: "h-3 w-3" }) : null })) : null, _jsx("span", { className: "hc-row-actions-menu-item-label min-w-0", children: item.label }), hasSubmenu ? (_jsx(FaIcon, { icon: faCaretRight, className: "ml-auto h-3 w-3 shrink-0", "aria-hidden": true })) : null] }, item.label));
+                }) }, groupIndex));
+        }) })) : null;
+    const submenuPanel = openSubmenuItem?.submenu && openSubmenuAnchorRect ? (_jsx(Submenu, { groups: openSubmenuItem.submenu, anchorRect: openSubmenuAnchorRect, menuElementId: submenuElementId, onSelectItem: (item) => {
+            closeMenu();
+            item.onSelect?.();
+        }, onRequestClose: closeSubmenuAndRefocus, onCloseAll: closeMenu, onMouseEnter: clearSubmenuTimers, onMouseLeave: scheduleCloseSubmenu })) : null;
+    const labeledTriggerVariant = resolvedTriggerVariant === 'icon' || resolvedTriggerVariant === 'iconDanger'
+        ? 'secondary'
+        : resolvedTriggerVariant;
+    const triggerButton = isLabeledTrigger ? (_jsxs(Button, { innerRef: triggerRef, type: "button", variant: labeledTriggerVariant, className: cn('hc-row-actions-menu-trigger', triggerClassName), title: resolvedTriggerTitle, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: (e) => {
+            e.stopPropagation();
+            if (isOpen) {
+                closeMenu();
+            }
+            else {
+                openMenu(false);
+            }
+        }, onKeyDown: handleTriggerKeyDown, children: [_jsx(FaIcon, { icon: triggerIcon, className: "h-3.5 w-3.5", "aria-hidden": true }), triggerLabel] })) : (_jsx(Button, { innerRef: triggerRef, type: "button", variant: "icon", className: cn('hc-row-actions-menu-trigger', triggerClassName), title: resolvedTriggerTitle, "aria-label": resolvedTriggerAriaLabel, "aria-haspopup": "menu", "aria-expanded": isOpen, "aria-controls": isOpen ? menuElementId : undefined, onClick: (e) => {
+            e.stopPropagation();
+            if (isOpen) {
+                closeMenu();
+            }
+            else {
+                openMenu(false);
+            }
+        }, onKeyDown: handleTriggerKeyDown, children: _jsx(FaIcon, { icon: triggerIcon, className: "h-3.5 w-3.5" }) }));
+    return (_jsxs("div", { ref: rootRef, ...props, className: cn('hc-row-actions-menu shrink-0', className), children: [triggerButton, menuPanel ? portalToBody(menuPanel) : null, submenuPanel] }));
 }

package/dist/components/TabBar/TabContextMenu.d.ts

@@ -1,15 +1,6 @@
 import type { JSX } from 'react';
 import type { MenuItem } from '../RowActionsMenu/index.js';
-interface Position {
-    /**
-     * Viewport X coordinate where the menu was opened.
-     */
-    x: number;
-    /**
-     * Viewport Y coordinate where the menu was opened.
-     */
-    y: number;
-}
+import { type MenuPosition } from '../menuPosition.js';
 interface Props {
     /**
      * Grouped menu entries. Each inner array is one visual group separated by a divider.
@@ -18,7 +9,7 @@ interface Props {
     /**
      * Cursor position used to anchor the menu panel.
      */
-    position: Position;
+    position: MenuPosition;
     /**
      * Called when the menu should close without selecting an item.
      */

package/dist/components/TabBar/TabContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/TabContextMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAI3D,UAAU,QAAQ;IAChB;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IAEV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;CACX;AAED,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,QAAQ,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAgCD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkJvF"}
+{"version":3,"file":"TabContextMenu.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/TabContextMenu.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAChD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,KAAK,YAAY,EAAqB,MAAM,oBAAoB,CAAC;AAI1E,UAAU,KAAK;IACb;;OAEG;IACH,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;IAErB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAgBD;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkJvF"}

package/dist/components/TabBar/TabContextMenu.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from '@harborclient/sdk/react';
+import { clampMenuPosition } from '../menuPosition.js';
 import { portalToBody } from '../portalToBody.js';
 import { cn, resolveTabListKeyAction } from '../utils.js';
 /**
@@ -13,21 +14,6 @@ function menuItemClass(variant) {
         ? `${base} text-text hover:bg-danger/15 hover:text-danger`
         : `${base} text-text hover:bg-selection`;
 }
-/**
- * Clamps a menu position so the panel stays fully inside the viewport.
- *
- * @param position - Requested top-left coordinates.
- * @param size - Measured menu width and height.
- */
-function clampMenuPosition(position, size) {
-    const margin = 8;
-    const maxX = Math.max(margin, window.innerWidth - size.width - margin);
-    const maxY = Math.max(margin, window.innerHeight - size.height - margin);
-    return {
-        x: Math.min(Math.max(position.x, margin), maxX),
-        y: Math.min(Math.max(position.y, margin), maxY)
-    };
-}
 /**
  * Cursor-positioned context menu for tab bars, rendered in a portal at the click point.
  */
@@ -126,7 +112,7 @@ export function TabContextMenu({ groups, position, onClose }) {
                         }, type: "button", role: "menuitem", tabIndex: itemIndex === focusedIndex ? 0 : -1, className: cn('hc-tab-context-menu-item', menuItemClass(item.variant)), onClick: (event) => {
                             event.stopPropagation();
                             closeMenu();
-                            item.onSelect();
+                            item.onSelect?.();
                         }, children: item.label }, item.label));
                 }) }, groupIndex));
         }) }));

package/dist/components/menuPosition.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Viewport coordinates for a fixed-position menu panel.
+ */
+export interface MenuPosition {
+    /** Left edge in viewport pixels. */
+    x: number;
+    /** Top edge in viewport pixels. */
+    y: number;
+}
+/**
+ * Measured menu panel dimensions.
+ */
+export interface MenuSize {
+    /** Panel width in pixels. */
+    width: number;
+    /** Panel height in pixels. */
+    height: number;
+}
+/** Minimum gap between a menu panel and the viewport edge. */
+export declare const MENU_VIEWPORT_MARGIN_PX = 8;
+/** Gap between a trigger button and its dropdown panel. */
+export declare const MENU_TRIGGER_OFFSET_PX = 2;
+/** Default minimum menu width used before the panel is measured. */
+export declare const MENU_MIN_WIDTH_PX = 200;
+/**
+ * Clamps a menu position so the panel stays fully inside the viewport.
+ *
+ * @param position - Requested top-left coordinates.
+ * @param size - Measured menu width and height.
+ */
+export declare function clampMenuPosition(position: MenuPosition, size: MenuSize): MenuPosition;
+/**
+ * Computes menu coordinates anchored below and right-aligned to a trigger button.
+ *
+ * @param triggerRect - Trigger bounding rect in viewport coordinates.
+ * @param menuSize - Measured or estimated menu dimensions.
+ */
+export declare function getTriggerAnchoredMenuPosition(triggerRect: DOMRect, menuSize: MenuSize): MenuPosition;
+/**
+ * Computes flyout coordinates anchored beside a parent menu row, preferring
+ * the right side and flipping to the left when the right side would overflow
+ * the viewport.
+ *
+ * @param anchorRect - Bounding rect of the parent row that owns the flyout.
+ * @param menuSize - Measured or estimated flyout dimensions.
+ */
+export declare function getSubmenuAnchoredPosition(anchorRect: DOMRect, menuSize: MenuSize): MenuPosition;
+//# sourceMappingURL=menuPosition.d.ts.map

package/dist/components/menuPosition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuPosition.d.ts","sourceRoot":"","sources":["../../src/components/menuPosition.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,oCAAoC;IACpC,CAAC,EAAE,MAAM,CAAC;IAEV,mCAAmC;IACnC,CAAC,EAAE,MAAM,CAAC;CACX;AAED;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IAEd,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,8DAA8D;AAC9D,eAAO,MAAM,uBAAuB,IAAI,CAAC;AAEzC,2DAA2D;AAC3D,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,oEAAoE;AACpE,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,GAAG,YAAY,CAQtF;AAED;;;;;GAKG;AACH,wBAAgB,8BAA8B,CAC5C,WAAW,EAAE,OAAO,EACpB,QAAQ,EAAE,QAAQ,GACjB,YAAY,CAKd;AAED;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAG,YAAY,CAUhG"}

package/dist/components/menuPosition.js

@@ -0,0 +1,49 @@
+/** Minimum gap between a menu panel and the viewport edge. */
+export const MENU_VIEWPORT_MARGIN_PX = 8;
+/** Gap between a trigger button and its dropdown panel. */
+export const MENU_TRIGGER_OFFSET_PX = 2;
+/** Default minimum menu width used before the panel is measured. */
+export const MENU_MIN_WIDTH_PX = 200;
+/**
+ * Clamps a menu position so the panel stays fully inside the viewport.
+ *
+ * @param position - Requested top-left coordinates.
+ * @param size - Measured menu width and height.
+ */
+export function clampMenuPosition(position, size) {
+    const margin = MENU_VIEWPORT_MARGIN_PX;
+    const maxX = Math.max(margin, window.innerWidth - size.width - margin);
+    const maxY = Math.max(margin, window.innerHeight - size.height - margin);
+    return {
+        x: Math.min(Math.max(position.x, margin), maxX),
+        y: Math.min(Math.max(position.y, margin), maxY)
+    };
+}
+/**
+ * Computes menu coordinates anchored below and right-aligned to a trigger button.
+ *
+ * @param triggerRect - Trigger bounding rect in viewport coordinates.
+ * @param menuSize - Measured or estimated menu dimensions.
+ */
+export function getTriggerAnchoredMenuPosition(triggerRect, menuSize) {
+    return {
+        x: triggerRect.right - menuSize.width,
+        y: triggerRect.bottom + MENU_TRIGGER_OFFSET_PX
+    };
+}
+/**
+ * Computes flyout coordinates anchored beside a parent menu row, preferring
+ * the right side and flipping to the left when the right side would overflow
+ * the viewport.
+ *
+ * @param anchorRect - Bounding rect of the parent row that owns the flyout.
+ * @param menuSize - Measured or estimated flyout dimensions.
+ */
+export function getSubmenuAnchoredPosition(anchorRect, menuSize) {
+    const fitsOnRight = anchorRect.right + MENU_TRIGGER_OFFSET_PX + menuSize.width + MENU_VIEWPORT_MARGIN_PX <=
+        window.innerWidth;
+    const x = fitsOnRight
+        ? anchorRect.right + MENU_TRIGGER_OFFSET_PX
+        : anchorRect.left - menuSize.width - MENU_TRIGGER_OFFSET_PX;
+    return { x, y: anchorRect.top };
+}

package/dist/components/rowActionsMenuHelpers.d.ts

@@ -1,4 +1,21 @@
 import type { MenuItem } from './RowActionsMenu/index.js';
+/**
+ * Tailwind classes for a single menu item button, shared by the main
+ * `RowActionsMenu` panel and its flyout `Submenu` panels.
+ */
+export declare function menuItemClass(variant: MenuItem['variant'], disabled?: boolean): string;
+/**
+ * Returns whether a menu item can receive focus or activate an action.
+ */
+export declare function isMenuItemEnabled(item: MenuItem): boolean;
+/**
+ * Finds the next enabled flat item index in the requested direction.
+ */
+export declare function findAdjacentEnabledIndex(items: MenuItem[], fromIndex: number, direction: -1 | 1): number | null;
+/**
+ * Returns the first or last enabled flat item index.
+ */
+export declare function findEdgeEnabledIndex(items: MenuItem[], fromEnd: boolean): number | null;
 /**
  * Builds an optional reorder group for move-up/move-down row actions.
  *

package/dist/components/rowActionsMenuHelpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rowActionsMenuHelpers.d.ts","sourceRoot":"","sources":["../../src/components/rowActionsMenuHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE1D;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,GACzC,QAAQ,EAAE,EAAE,CAsBd"}
+{"version":3,"file":"rowActionsMenuHelpers.d.ts","sourceRoot":"","sources":["../../src/components/rowActionsMenuHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE1D;;;GAGG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAatF;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,CAEzD;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,QAAQ,EAAE,EACjB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,GAChB,MAAM,GAAG,IAAI,CAWf;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAWvF;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,CAAC,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,GACzC,QAAQ,EAAE,EAAE,CAsBd"}

package/dist/components/rowActionsMenuHelpers.js

@@ -1,3 +1,50 @@
+/**
+ * Tailwind classes for a single menu item button, shared by the main
+ * `RowActionsMenu` panel and its flyout `Submenu` panels.
+ */
+export function menuItemClass(variant, disabled) {
+    const base = 'flex w-full items-center gap-2 border-none bg-transparent px-3.5 py-1.5 text-left text-[16px] app-no-drag';
+    if (disabled) {
+        return `${base} cursor-not-allowed text-muted opacity-60`;
+    }
+    const interactive = `${base} cursor-pointer`;
+    return variant === 'danger'
+        ? `${interactive} text-text hover:bg-danger/15 hover:text-danger`
+        : `${interactive} text-text hover:bg-selection`;
+}
+/**
+ * Returns whether a menu item can receive focus or activate an action.
+ */
+export function isMenuItemEnabled(item) {
+    return !item.disabled;
+}
+/**
+ * Finds the next enabled flat item index in the requested direction.
+ */
+export function findAdjacentEnabledIndex(items, fromIndex, direction) {
+    let index = fromIndex + direction;
+    while (index >= 0 && index < items.length) {
+        if (isMenuItemEnabled(items[index])) {
+            return index;
+        }
+        index += direction;
+    }
+    return null;
+}
+/**
+ * Returns the first or last enabled flat item index.
+ */
+export function findEdgeEnabledIndex(items, fromEnd) {
+    if (fromEnd) {
+        for (let index = items.length - 1; index >= 0; index -= 1) {
+            if (isMenuItemEnabled(items[index])) {
+                return index;
+            }
+        }
+        return null;
+    }
+    return items.findIndex((item) => isMenuItemEnabled(item));
+}
 /**
  * Builds an optional reorder group for move-up/move-down row actions.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@harborclient/sdk",
-  "version": "1.0.68",
+  "version": "1.0.69",
   "description": "TypeScript SDK for HarborClient development.",
   "keywords": [
     "harborclient",