@harborclient/sdk 1.0.67 → 1.0.69

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/ClosingTabShell.d.ts

@@ -0,0 +1,20 @@
+import type { JSX, ReactNode } from 'react';
+interface Props {
+    /**
+     * Tab row content to measure and collapse horizontally.
+     */
+    children: ReactNode;
+    /**
+     * Called after the close width transition finishes.
+     */
+    onComplete: () => void;
+}
+/**
+ * Horizontally collapses a tab row with a quick width and opacity "zap out".
+ *
+ * Keeps children mounted until the width transition reaches zero so siblings
+ * do not reflow until the animation completes.
+ */
+export declare function ClosingTabShell({ children, onComplete }: Props): JSX.Element | null;
+export {};
+//# sourceMappingURL=ClosingTabShell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClosingTabShell.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/ClosingTabShell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAsD,MAAM,OAAO,CAAC;AAEhG,UAAU,KAAK;IACb;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AA+HD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA0CnF"}

package/dist/components/TabBar/ClosingTabShell.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx } from "@harborclient/sdk/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from '@harborclient/sdk/react';
+/**
+ * Returns whether the user prefers reduced motion.
+ *
+ * @returns True when the OS requests minimized animation.
+ */
+function prefersReducedMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * Manages width collapse state for a single closing tab shell.
+ *
+ * @param onComplete - Invoked after the close animation finishes.
+ * @returns State and handlers for the animated shell.
+ */
+function useClosingTabShell(onComplete) {
+    const innerRef = useRef(null);
+    const completedRef = useRef(false);
+    const [collapsed, setCollapsed] = useState(false);
+    const [contentWidth, setContentWidth] = useState(0);
+    const [transitionEnabled, setTransitionEnabled] = useState(false);
+    const [reducedMotion, setReducedMotion] = useState(prefersReducedMotion);
+    /**
+     * Subscribes to OS reduced-motion preference changes.
+     */
+    useEffect(() => {
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        /**
+         * Updates reduced-motion state when the OS preference changes.
+         */
+        const handleChange = () => {
+            setReducedMotion(mediaQuery.matches);
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, []);
+    /**
+     * Measures the tab row so the outer shell can animate from its natural width to zero.
+     */
+    useLayoutEffect(() => {
+        if (!innerRef.current) {
+            return;
+        }
+        const element = innerRef.current;
+        /**
+         * Writes the latest measured width from layout or resize observation.
+         *
+         * @param width - Measured inner width in pixels.
+         */
+        const applyWidth = (width) => {
+            if (width > 0) {
+                setContentWidth(width);
+            }
+        };
+        const observer = new ResizeObserver(([entry]) => {
+            applyWidth(entry.contentRect.width);
+        });
+        observer.observe(element);
+        applyWidth(element.getBoundingClientRect().width);
+        return () => observer.disconnect();
+    }, []);
+    /**
+     * Starts the collapse animation after the first paint, or completes immediately
+     * when reduced motion is enabled.
+     */
+    useEffect(() => {
+        if (reducedMotion) {
+            onComplete();
+            return;
+        }
+        if (contentWidth <= 0) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            setTransitionEnabled(true);
+            requestAnimationFrame(() => {
+                setCollapsed(true);
+            });
+        });
+    }, [contentWidth, onComplete, reducedMotion]);
+    /**
+     * Finishes the exit animation once the width transition completes.
+     */
+    const handleTransitionEnd = useCallback((event) => {
+        if (event.propertyName !== 'width' || completedRef.current) {
+            return;
+        }
+        completedRef.current = true;
+        onComplete();
+    }, [onComplete]);
+    return {
+        collapsed,
+        contentWidth,
+        innerRef,
+        reducedMotion,
+        transitionEnabled,
+        handleTransitionEnd
+    };
+}
+/**
+ * Horizontally collapses a tab row with a quick width and opacity "zap out".
+ *
+ * Keeps children mounted until the width transition reaches zero so siblings
+ * do not reflow until the animation completes.
+ */
+export function ClosingTabShell({ children, onComplete }) {
+    const { collapsed, contentWidth, innerRef, reducedMotion, transitionEnabled, handleTransitionEnd } = useClosingTabShell(onComplete);
+    if (reducedMotion) {
+        return null;
+    }
+    const outerClassName = [
+        'flex shrink-0 overflow-hidden',
+        transitionEnabled
+            ? 'transition-[width] duration-150 ease-in motion-reduce:transition-none'
+            : 'transition-none'
+    ].join(' ');
+    const innerClassName = [
+        'flex shrink-0',
+        transitionEnabled
+            ? 'transition-[opacity,transform] duration-150 ease-in origin-right motion-reduce:transition-none'
+            : 'transition-none',
+        collapsed ? 'scale-x-95 opacity-0' : 'scale-x-100 opacity-100'
+    ].join(' ');
+    return (_jsx("div", { className: outerClassName, style: { width: collapsed ? 0 : contentWidth }, onTransitionEnd: handleTransitionEnd, "aria-hidden": true, inert: true, children: _jsx("div", { ref: innerRef, className: innerClassName, children: children }) }));
+}

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

@@ -0,0 +1,58 @@
+import type { JSX, MouseEvent } from 'react';
+import type { TabBarItem, TabBarSortableCursor } from './types.js';
+interface Props<TId extends string | number> {
+    /**
+     * Tab row data to render.
+     */
+    item: TabBarItem<TId>;
+    /**
+     * Tab order index for the tab label; all tabs stay in sequential Tab order.
+     */
+    tabIndex: number;
+    /**
+     * Stable dnd-kit sortable id for this tab row.
+     */
+    sortableId: string;
+    /**
+     * When true, drag reordering is disabled for this tab.
+     */
+    sortableDisabled?: boolean;
+    /**
+     * When true, renders a non-interactive snapshot for the close animation.
+     */
+    exiting?: boolean;
+    /**
+     * Prefix for tab element ids (for example `request-tab-`).
+     */
+    tabIdPrefix: string;
+    /**
+     * Prefix for linked tab panel ids (for example `request-tabpanel-`).
+     */
+    panelIdPrefix: string;
+    /**
+     * Maximum width class for the tab shell.
+     */
+    maxTabWidthClass?: string;
+    /**
+     * Cursor style when sortable drag is enabled.
+     */
+    sortableCursor?: TabBarSortableCursor;
+    /**
+     * Called when the user selects this tab.
+     */
+    onSelect: (id: TId) => void;
+    /**
+     * Called when the user closes this tab.
+     */
+    onClose: (id: TId) => void;
+    /**
+     * Called when the user opens the tab context menu.
+     */
+    onContextMenu?: (id: TId, event: MouseEvent<HTMLDivElement>) => void;
+}
+/**
+ * Single document-style tab row with close button and optional drag reordering.
+ */
+export declare function TabBarShell<TId extends string | number>({ item, tabIndex, sortableId, sortableDisabled, exiting, tabIdPrefix, panelIdPrefix, maxTabWidthClass, sortableCursor, onSelect, onClose, onContextMenu }: Props<TId>): JSX.Element;
+export {};
+//# sourceMappingURL=TabBarShell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabBarShell.d.ts","sourceRoot":"","sources":["../../../src/components/TabBar/TabBarShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAC;AAI5D,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAGnE,UAAU,KAAK,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACzC;;OAEG;IACH,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC;IAEtB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAEtC;;OAEG;IACH,QAAQ,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAE5B;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAE3B;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACtE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,EAAE,EACvD,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,gBAAwB,EACxB,OAAe,EACf,WAAW,EACX,aAAa,EACb,gBAAkC,EAClC,cAA0B,EAC1B,QAAQ,EACR,OAAO,EACP,aAAa,EACd,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,OAAO,CA4E1B"}