@harborclient/sdk 1.1.11 → 1.1.12

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AACtF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAS/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAqBnE,MAAM,WAAW,KAAM,SAAQ,IAAI,CACjC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,WAAW,GAAG,IAAI,GAAG,YAAY,GAAG,iBAAiB,GAAG,WAAW,GAAG,UAAU,CAC9F;IACC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,SAAc,EACd,gBAAgB,EAChB,cAAc,EACd,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgVrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VariableInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,GAAG,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AACtF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAS/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAwBnE,MAAM,WAAW,KAAM,SAAQ,IAAI,CACjC,wBAAwB,CAAC,KAAK,CAAC,EAC/B,UAAU,GAAG,WAAW,GAAG,IAAI,GAAG,YAAY,GAAG,iBAAiB,GAAG,WAAW,GAAG,UAAU,CAC9F;IACC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,SAAS,EAAE,QAAQ,EAAE,CAAC;IAEtB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAEzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,SAAc,EACd,gBAAgB,EAChB,cAAc,EACd,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA4lBrB"}

package/dist/components/VariableInput/index.js

@@ -6,6 +6,7 @@ import { useAutocomplete } from '../Autocomplete/useAutocomplete.js';
 import { Button } from '../Button/index.js';
 import { VariableTooltipValue } from '../VariableTooltip/index.js';
 import { Input } from '../forms/index.js';
+import { getFocusableElements } from '../useDialogFocus.js';
 import { cn } from '../utils.js';
 /** Delay after the pointer stops moving before a hover tooltip is shown. */
 const TOOLTIP_SHOW_DELAY_MS = 500;
@@ -19,12 +20,21 @@ const TOOLTIP_HIDE_DELAY_MS = 400;
  */
 export function VariableInput({ value, onChange, variables, placeholder, onKeyDown, className = '', wrapperClassName, onEditVariable, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, source, ...props }) {
     const safeValue = value ?? '';
+    const wrapperRef = useRef(null);
     const inputRef = useRef(null);
     const backdropRef = useRef(null);
-    const spanRefs = useRef(new Map());
+    const tokenButtonRefs = useRef(new Map());
+    const tooltipRef = useRef(null);
     const hideTimer = useRef(null);
     const showTimer = useRef(null);
+    const suppressReopen = useRef(false);
+    const pendingEnterFocus = useRef(false);
+    const tooltipEntered = useRef(false);
+    const tooltipSourceRef = useRef(null);
+    const activeTokenIndexRef = useRef(null);
     const [tooltip, setTooltip] = useState(null);
+    const [tooltipSource, setTooltipSource] = useState(null);
+    const [activeTokenIndex, setActiveTokenIndex] = useState(null);
     const tooltipId = useId();
     const { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, listboxId, onFocus: openAutocomplete, onBlur: closeAutocomplete, onInputKeyDown, selectItem, setActiveIndex, closeSuggestions } = useAutocomplete({
         source,
@@ -36,6 +46,13 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
      * Splits the input value into plain text and {{variable}} token spans for highlighting.
      */
     const tokens = useMemo(() => tokenizeVariables(safeValue), [safeValue]);
+    /**
+     * Keeps tooltip refs aligned with React state for timer and document handlers.
+     */
+    useEffect(() => {
+        tooltipSourceRef.current = tooltipSource;
+        activeTokenIndexRef.current = activeTokenIndex;
+    }, [tooltipSource, activeTokenIndex]);
     /**
      * Clears any pending tooltip hide timer.
      */
@@ -45,12 +62,55 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
             hideTimer.current = null;
         }
     };
+    /**
+     * Clears tooltip state regardless of source.
+     */
+    const dismissTooltip = () => {
+        pendingEnterFocus.current = false;
+        tooltipEntered.current = false;
+        setTooltip(null);
+        setTooltipSource(null);
+        setActiveTokenIndex(null);
+    };
+    /**
+     * Clears tooltip state and optionally refocuses the triggering token.
+     *
+     * @param refocusToken - When true, moves focus back to the active token without reopening.
+     */
+    const dismissFocusTooltip = (refocusToken = false) => {
+        const index = activeTokenIndexRef.current;
+        dismissTooltip();
+        if (refocusToken && index != null) {
+            suppressReopen.current = true;
+            tokenButtonRefs.current.get(index)?.focus();
+        }
+    };
+    /**
+     * Moves focus to the first control inside the open focus tooltip.
+     */
+    const focusFirstTooltipControl = () => {
+        const tooltipEl = tooltipRef.current;
+        if (!tooltipEl) {
+            return;
+        }
+        getFocusableElements(tooltipEl)[0]?.focus();
+        tooltipEntered.current = true;
+    };
     /**
      * Hides the tooltip after a short grace period so the pointer can reach it.
      */
     const scheduleHide = () => {
+        if (tooltipSourceRef.current === 'focus') {
+            return;
+        }
         cancelHide();
-        hideTimer.current = window.setTimeout(() => setTooltip(null), TOOLTIP_HIDE_DELAY_MS);
+        hideTimer.current = window.setTimeout(() => {
+            hideTimer.current = null;
+            if (tooltipSourceRef.current === 'focus') {
+                return;
+            }
+            dismissTooltip();
+        }, TOOLTIP_HIDE_DELAY_MS);
     };
     /**
      * Clears any pending tooltip show timer.
@@ -64,7 +124,7 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
     /**
      * Shows a tooltip for a variable token at the given screen position.
      */
-    const showTooltipForKey = (key, top, left) => {
+    const showTooltipForKey = (key, top, left, source, tokenIndex = null) => {
         setTooltip({
             key,
             value: resolveVariable(key, variables),
@@ -72,6 +132,8 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
             top,
             left
         });
+        setTooltipSource(source);
+        setActiveTokenIndex(tokenIndex);
     };
     /**
      * Shows the tooltip once the pointer has stopped moving for {@link TOOLTIP_SHOW_DELAY_MS}.
@@ -84,7 +146,7 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
         cancelShow();
         showTimer.current = window.setTimeout(() => {
             showTimer.current = null;
-            showTooltipForKey(key, top, left);
+            showTooltipForKey(key, top, left, 'hover', null);
         }, TOOLTIP_SHOW_DELAY_MS);
     };
     /**
@@ -94,6 +156,65 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
         cancelHide();
         cancelShow();
     }, []);
+    /**
+     * Traps Tab within the tooltip controls once focus has entered the tooltip.
+     *
+     * While focus is still on the token (tooltip open but not entered), Tab is left
+     * alone so it moves naturally between variable tokens; only pressing Enter moves
+     * focus into the tooltip and engages this trap.
+     */
+    useEffect(() => {
+        if (tooltipSource !== 'focus' || activeTokenIndex == null || !tooltip) {
+            return;
+        }
+        /**
+         * Cycles Tab and Shift+Tab within the tooltip controls while focus is inside it.
+         *
+         * @param event - Document keydown event.
+         */
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                dismissFocusTooltip(true);
+                return;
+            }
+            if (event.key !== 'Tab' || !tooltipEntered.current) {
+                return;
+            }
+            const tooltipEl = tooltipRef.current;
+            if (!tooltipEl) {
+                return;
+            }
+            const controls = getFocusableElements(tooltipEl);
+            if (controls.length === 0) {
+                event.preventDefault();
+                return;
+            }
+            event.preventDefault();
+            const active = document.activeElement;
+            const index = active ? controls.indexOf(active) : -1;
+            if (index === -1) {
+                controls[0].focus();
+                return;
+            }
+            const nextIndex = event.shiftKey
+                ? (index - 1 + controls.length) % controls.length
+                : (index + 1) % controls.length;
+            controls[nextIndex]?.focus();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [tooltipSource, activeTokenIndex, tooltip]);
+    /**
+     * Moves focus into the tooltip after Enter opens it.
+     */
+    useEffect(() => {
+        if (!pendingEnterFocus.current || tooltipSource !== 'focus' || !tooltip) {
+            return;
+        }
+        pendingEnterFocus.current = false;
+        focusFirstTooltipControl();
+    }, [tooltip, tooltipSource]);
     /**
      * Keeps the colored backdrop aligned with horizontal scroll in the input.
      */
@@ -108,13 +229,22 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
      * Updates the tooltip based on the current text caret position.
      */
     const updateTooltipFromCaret = () => {
+        if (tooltipSourceRef.current === 'focus') {
+            return;
+        }
         const input = inputRef.current;
         if (!input)
             return;
-        const offset = input.selectionStart ?? 0;
+        const selectionStart = input.selectionStart ?? 0;
+        const selectionEnd = input.selectionEnd ?? 0;
+        if (selectionStart !== selectionEnd) {
+            dismissTooltip();
+            return;
+        }
+        const offset = selectionStart;
         const match = getVariableTokenAtOffset(safeValue, offset);
         if (!match) {
-            setTooltip(null);
+            dismissTooltip();
             return;
         }
         let tokenIndex = -1;
@@ -126,27 +256,77 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
             }
             position += token.text.length;
         }
-        const span = tokenIndex >= 0 ? spanRefs.current.get(tokenIndex) : undefined;
-        if (span) {
-            const rect = span.getBoundingClientRect();
-            showTooltipForKey(match.key, rect.top, rect.left + rect.width / 2);
+        const tokenButton = tokenIndex >= 0 ? tokenButtonRefs.current.get(tokenIndex) : undefined;
+        if (tokenButton) {
+            const rect = tokenButton.getBoundingClientRect();
+            showTooltipForKey(match.key, rect.top, rect.left + rect.width / 2, 'hover', null);
             return;
         }
         const rect = input.getBoundingClientRect();
-        showTooltipForKey(match.key, rect.top, rect.left + rect.width / 2);
+        showTooltipForKey(match.key, rect.top, rect.left + rect.width / 2, 'hover', null);
+    };
+    /**
+     * Opens a focus-trapped tooltip for a keyboard-focused variable token.
+     *
+     * @param index - Token index within the rendered token list.
+     * @param key - Variable name from the {{key}} token.
+     * @param button - Focused token button element.
+     */
+    const handleTokenFocus = (index, key, button) => {
+        if (suppressReopen.current) {
+            suppressReopen.current = false;
+            return;
+        }
+        cancelHide();
+        cancelShow();
+        tooltipEntered.current = false;
+        const rect = button.getBoundingClientRect();
+        showTooltipForKey(key, rect.top, rect.left + rect.width / 2, 'focus', index);
+    };
+    /**
+     * Handles keyboard interaction on a variable token button.
+     */
+    const handleTokenKeyDown = (event, index, key) => {
+        if (event.key === 'Escape' && tooltipSource === 'focus' && activeTokenIndex != null) {
+            event.preventDefault();
+            event.stopPropagation();
+            dismissFocusTooltip(false);
+            return;
+        }
+        if (event.key !== 'Enter') {
+            return;
+        }
+        event.preventDefault();
+        if (tooltipSource === 'focus' && activeTokenIndex === index && tooltipRef.current) {
+            focusFirstTooltipControl();
+            return;
+        }
+        pendingEnterFocus.current = true;
+        const button = tokenButtonRefs.current.get(index);
+        if (!button) {
+            pendingEnterFocus.current = false;
+            return;
+        }
+        cancelHide();
+        cancelShow();
+        const rect = button.getBoundingClientRect();
+        showTooltipForKey(key, rect.top, rect.left + rect.width / 2, 'focus', index);
     };
     /**
      * Shows a tooltip when the pointer rests over a variable token span.
      */
     const handleMouseMove = (e) => {
+        if (tooltipSourceRef.current === 'focus') {
+            return;
+        }
         cancelHide();
         for (const [index, token] of tokens.entries()) {
             if (!token.key)
                 continue;
-            const span = spanRefs.current.get(index);
-            if (!span)
+            const tokenButton = tokenButtonRefs.current.get(index);
+            if (!tokenButton)
                 continue;
-            const rect = span.getBoundingClientRect();
+            const rect = tokenButton.getBoundingClientRect();
             if (e.clientX >= rect.left &&
                 e.clientX <= rect.right &&
                 e.clientY >= rect.top &&
@@ -162,9 +342,28 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
      * Cancels a pending show and hides the tooltip when the pointer leaves the input.
      */
     const handleMouseLeave = () => {
+        if (tooltipSourceRef.current === 'focus') {
+            return;
+        }
         cancelShow();
         scheduleHide();
     };
+    /**
+     * Closes any open tooltip when focus leaves the field.
+     */
+    const handleWrapperBlur = () => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper) {
+            return;
+        }
+        queueMicrotask(() => {
+            if (!wrapper.contains(document.activeElement)) {
+                cancelHide();
+                cancelShow();
+                dismissTooltip();
+            }
+        });
+    };
     /**
      * Handles keyboard events on the input, including tooltip dismissal.
      */
@@ -172,9 +371,9 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
         if (onInputKeyDown(event)) {
             return;
         }
-        if (event.key === 'Escape' && tooltip) {
+        if (event.key === 'Escape' && tooltip && tooltipSource !== 'focus') {
             event.preventDefault();
-            setTooltip(null);
+            dismissTooltip();
             return;
         }
         onKeyDown?.(event);
@@ -193,21 +392,36 @@ export function VariableInput({ value, onChange, variables, placeholder, onKeyDo
         }
     };
     const tooltipContent = tooltip ? getVariableTooltipContent(tooltip.key, variables) : null;
-    return (_jsxs("div", { ...props, className: cn('hc-variable-input relative min-w-0', wrapperClassName ?? 'flex-1'), children: [_jsx("div", { ref: backdropRef, "aria-hidden": true, className: "hc-variable-input-backdrop pointer-events-none absolute inset-0 overflow-hidden px-2.5 py-1.5 whitespace-nowrap text-inherit", children: safeValue ? (tokens.map((token, index) => token.key ? (_jsx("span", { ref: (el) => {
+    const focusTooltipOpen = tooltipSource === 'focus' && tooltip != null;
+    return (_jsxs("div", { ...props, ref: wrapperRef, className: cn('hc-variable-input relative min-w-0', wrapperClassName ?? 'flex-1'), onBlurCapture: handleWrapperBlur, children: [_jsx("div", { ref: backdropRef, className: "hc-variable-input-backdrop pointer-events-none absolute inset-0 overflow-hidden px-2.5 py-1.5 whitespace-nowrap text-inherit", children: safeValue ? (tokens.map((token, index) => token.key ? (_jsx("button", { type: "button", ref: (el) => {
                         if (el)
-                            spanRefs.current.set(index, el);
+                            tokenButtonRefs.current.set(index, el);
                         else
-                            spanRefs.current.delete(index);
-                    }, className: "hc-variable-input-token hc-variable-input-token-variable text-[#32D2E2]", children: token.text }, index)) : (_jsx("span", { className: "hc-variable-input-token", children: token.text }, index)))) : (_jsx("span", { className: "hc-variable-input-placeholder text-muted", children: placeholder })) }), _jsx(Input, { ref: inputRef, id: id, variant: "plain", role: source ? 'combobox' : undefined, "aria-autocomplete": source ? 'list' : undefined, "aria-expanded": source ? autocompleteOpen : undefined, "aria-controls": source && autocompleteOpen ? listboxId : undefined, "aria-activedescendant": source && autocompleteOpen && autocompleteActiveIndex >= 0
+                            tokenButtonRefs.current.delete(index);
+                    }, tabIndex: 0, "aria-label": `Variable ${token.key}`, "aria-expanded": focusTooltipOpen && activeTokenIndex === index ? true : undefined, "aria-describedby": focusTooltipOpen && activeTokenIndex === index ? tooltipId : undefined, className: cn('hc-variable-input-token hc-variable-input-token-variable font-inherit inline border-none bg-transparent p-0 text-[#32D2E2] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent'), onFocus: (event) => handleTokenFocus(index, token.key, event.currentTarget), onKeyDown: (event) => handleTokenKeyDown(event, index, token.key), children: token.text }, `${index}-${token.text}`)) : (_jsx("span", { "aria-hidden": true, className: "hc-variable-input-token", children: token.text }, `${index}-${token.text}`)))) : (_jsx("span", { "aria-hidden": true, className: "hc-variable-input-placeholder text-muted", children: placeholder })) }), _jsx(Input, { ref: inputRef, id: id, variant: "plain", role: source ? 'combobox' : undefined, "aria-autocomplete": source ? 'list' : undefined, "aria-expanded": source ? autocompleteOpen : undefined, "aria-controls": source && autocompleteOpen ? listboxId : undefined, "aria-activedescendant": source && autocompleteOpen && autocompleteActiveIndex >= 0
                     ? `${listboxId}-option-${autocompleteActiveIndex}`
-                    : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": tooltip ? tooltipId : undefined, className: cn('hc-variable-input-field relative w-full min-w-0 border-none bg-transparent px-2.5 py-1.5 text-transparent caret-text focus-visible:shadow-none', className), type: "text", placeholder: placeholder, value: safeValue, onChange: (e) => {
+                    : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": tooltip && tooltipSource !== 'focus' ? tooltipId : undefined, className: cn('hc-variable-input-field relative w-full min-w-0 border-none bg-transparent px-2.5 py-1.5 text-transparent caret-text focus-visible:shadow-none', className), type: "text", placeholder: placeholder, value: safeValue, onChange: (e) => {
                     onChange(e.target.value);
                     queueMicrotask(updateTooltipFromCaret);
                 }, onFocus: () => {
+                    if (tooltipSourceRef.current === 'focus') {
+                        dismissTooltip();
+                    }
                     openAutocomplete();
-                    updateTooltipFromCaret();
-                }, onBlur: closeAutocomplete, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onSelect: updateTooltipFromCaret, onClick: updateTooltipFromCaret, onScroll: syncScroll, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }), source && (_jsx(SuggestionList, { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, anchorRef: inputRef, listboxId: listboxId, onSelect: selectItem, onActiveIndexChange: setActiveIndex, onClose: closeSuggestions })), tooltip && tooltipContent && (_jsxs("div", { id: tooltipId, role: "tooltip", className: "hc-variable-input-tooltip pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-2 rounded-lg border border-separator bg-surface px-4 py-3 text-text shadow-md after:pointer-events-auto after:absolute after:right-0 after:-bottom-2 after:left-0 after:h-2 after:content-['']", style: { top: tooltip.top - 4, left: tooltip.left }, onMouseEnter: cancelHide, onMouseLeave: scheduleHide, children: [_jsx(VariableTooltipValue, { value: tooltipContent.text, variableKey: tooltip.key, muted: tooltipContent.muted }), onEditVariable && (_jsx(Button, { variant: "secondary", className: "hc-variable-input-tooltip-edit self-start", "aria-label": `Edit value for ${tooltip.key}`, onClick: () => {
+                }, onBlur: closeAutocomplete, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, onSelect: updateTooltipFromCaret, onClick: updateTooltipFromCaret, onScroll: syncScroll, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave }), source && (_jsx(SuggestionList, { open: autocompleteOpen, items: autocompleteItems, activeIndex: autocompleteActiveIndex, anchorRef: inputRef, listboxId: listboxId, onSelect: selectItem, onActiveIndexChange: setActiveIndex, onClose: closeSuggestions })), tooltip && tooltipContent && (_jsxs("div", { ref: tooltipRef, id: tooltipId, role: "tooltip", className: "hc-variable-input-tooltip pointer-events-auto fixed z-50 flex max-w-sm -translate-x-1/2 -translate-y-full flex-col gap-2 rounded-lg border border-separator bg-surface px-4 py-3 text-text shadow-md after:pointer-events-auto after:absolute after:right-0 after:-bottom-2 after:left-0 after:h-2 after:content-['']", style: { position: 'fixed', top: tooltip.top - 4, left: tooltip.left }, onMouseEnter: cancelHide, onMouseLeave: scheduleHide, children: [_jsx(VariableTooltipValue, { value: tooltipContent.text, variableKey: tooltip.key, muted: tooltipContent.muted, onClose: () => {
+                            if (tooltipSource === 'focus') {
+                                dismissFocusTooltip(true);
+                            }
+                            else {
+                                dismissTooltip();
+                            }
+                        } }), onEditVariable && (_jsx(Button, { variant: "secondary", className: "hc-variable-input-tooltip-edit self-start", "aria-label": `Edit value for ${tooltip.key}`, onClick: () => {
                             onEditVariable(tooltip.key);
-                            setTooltip(null);
+                            if (tooltipSource === 'focus') {
+                                dismissFocusTooltip(true);
+                            }
+                            else {
+                                dismissTooltip();
+                            }
                         }, children: "Edit value" }))] }))] }));
 }

package/dist/components/VariableTooltip/VariableTooltipValue.d.ts

@@ -12,10 +12,14 @@ interface Props {
      * When true, styles the value as muted placeholder text.
      */
     muted?: boolean;
+    /**
+     * When provided, renders a close control to the right of the copy button.
+     */
+    onClose?: () => void;
 }
 /**
- * Readonly resolved-value field with a copy control for variable tooltips.
+ * Readonly resolved-value field with copy and optional close controls for variable tooltips.
  */
-export declare function VariableTooltipValue({ value, variableKey, muted }: Props): JSX.Element;
+export declare function VariableTooltipValue({ value, variableKey, muted, onClose }: Props): JSX.Element;
 export {};
 //# sourceMappingURL=VariableTooltipValue.d.ts.map

package/dist/components/VariableTooltip/VariableTooltipValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableTooltipValue.d.ts","sourceRoot":"","sources":["../../../src/components/VariableTooltip/VariableTooltipValue.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMjC,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAkCtF"}
+{"version":3,"file":"VariableTooltipValue.d.ts","sourceRoot":"","sources":["../../../src/components/VariableTooltip/VariableTooltipValue.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMjC,UAAU,KAAK;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAgD/F"}

package/dist/components/VariableTooltip/VariableTooltipValue.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@harborclient/sdk/jsx-runtime";
-import { faCircleCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
+import { faCircleCheck, faCopy, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { useState } from '@harborclient/sdk/react';
 import { Button } from '../Button/index.js';
 import { FaIcon } from '../FaIcon/index.js';
 import { Input } from '../forms/index.js';
 import { cn } from '../utils.js';
 /**
- * Readonly resolved-value field with a copy control for variable tooltips.
+ * Readonly resolved-value field with copy and optional close controls for variable tooltips.
  */
-export function VariableTooltipValue({ value, variableKey, muted }) {
+export function VariableTooltipValue({ value, variableKey, muted, onClose }) {
     const [copied, setCopied] = useState(false);
     /**
      * Copies the resolved value to the clipboard and briefly confirms success in the icon.
@@ -21,5 +21,7 @@ export function VariableTooltipValue({ value, variableKey, muted }) {
     };
     return (_jsxs("div", { className: "hc-variable-tooltip-value-row flex items-center gap-1.5", children: [_jsx(Input, { readOnly: true, value: value, "aria-label": `Resolved value for ${variableKey}`, className: cn('min-w-0 flex-1', muted && 'text-muted') }), _jsx(Button, { type: "button", variant: "icon", "aria-label": copied ? `Copied value for ${variableKey}` : `Copy value for ${variableKey}`, onMouseDown: (event) => {
                     event.preventDefault();
-                }, onClick: handleCopy, children: _jsx(FaIcon, { icon: copied ? faCircleCheck : faCopy, className: "h-4 w-4" }) })] }));
+                }, onClick: handleCopy, children: _jsx(FaIcon, { icon: copied ? faCircleCheck : faCopy, className: "h-4 w-4" }) }), onClose && (_jsx(Button, { type: "button", variant: "icon", className: "hc-variable-tooltip-close", "aria-label": `Close tooltip for ${variableKey}`, onMouseDown: (event) => {
+                    event.preventDefault();
+                }, onClick: onClose, children: _jsx(FaIcon, { icon: faXmark, className: "h-4 w-4" }) }))] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"useDialogFocus.d.ts","sourceRoot":"","sources":["../../src/components/useDialogFocus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA8DvC;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAU1E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CA8D5E"}
+{"version":3,"file":"useDialogFocus.d.ts","sourceRoot":"","sources":["../../src/components/useDialogFocus.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAuFvC;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAI1E;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,CA8D5E"}

package/dist/components/useDialogFocus.js

@@ -53,6 +53,27 @@ function unlockOverlaySiblings(siblings) {
         setInertLocked(sibling, false);
     }
 }
+/**
+ * Returns whether a focusable element is visible enough to receive keyboard focus.
+ *
+ * @param element - Candidate focusable element.
+ */
+function isFocusableVisible(element) {
+    if (element.closest('[aria-hidden="true"]')) {
+        return false;
+    }
+    if (element.offsetParent !== null || getComputedStyle(element).position === 'fixed') {
+        return true;
+    }
+    let parent = element.parentElement;
+    while (parent) {
+        if (getComputedStyle(parent).position === 'fixed') {
+            return true;
+        }
+        parent = parent.parentElement;
+    }
+    return false;
+}
 /**
  * Returns visible, enabled focusable descendants of a container, excluding
  * elements inside `aria-hidden` subtrees.
@@ -62,14 +83,7 @@ function unlockOverlaySiblings(siblings) {
  */
 export function getFocusableElements(container) {
     const candidates = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
-    return candidates.filter((element) => {
-        if (element.closest('[aria-hidden="true"]'))
-            return false;
-        if (element.offsetParent === null && getComputedStyle(element).position !== 'fixed') {
-            return false;
-        }
-        return true;
-    });
+    return candidates.filter(isFocusableVisible);
 }
 /**
  * Traps keyboard focus within a dialog panel, inerts background siblings,

package/package.json

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