@astryxdesign/core 0.1.2-canary.bd8c3d3 → 0.1.2-canary.bfcbf64

package/dist/Toast/ToastViewport.js

@@ -2,11 +2,12 @@
 
 'use client';
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { spacingVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
+import { INTERACTIVE_SELECTORS } from "../hooks/useClickableContainer.js";
 import { Toast } from "./Toast.js";
 import { ToastContext } from "./ToastContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -74,6 +75,39 @@ export function ToastViewport({
   const [exitingIds, setExitingIds] = useState(new Set());
   const toastsRef = useRef(toasts);
   toastsRef.current = toasts;
+
+  // Show the popover on mount so it enters the top layer.
+  const viewportRef = useRef(null);
+  // The element that was focused before the user jumped into the viewport
+  // (via F6). Used to restore focus once all toasts are dismissed so focus
+  // never falls to <body>.
+  const prevFocusRef = useRef(null);
+  // When a toast is dismissed while focus lives inside it, we need to move
+  // focus to a sensible neighbor after that toast unmounts. This holds the
+  // id of the toast whose removal should trigger a focus handoff.
+  const focusHandoffIdRef = useRef(null);
+  // The next toast id that should receive focus once the dismissed toast has
+  // unmounted, or 'restore' to fall back to the previously-focused element.
+  const pendingFocusRef = useRef(null);
+
+  // Collect a focusable control within a toast node, if any.
+  // Reuses the canonical INTERACTIVE_SELECTORS list (native controls plus
+  // role-based interactive elements) instead of a hand-rolled subset, then
+  // narrows to the first candidate that can actually receive focus —
+  // excluding elements opted out with `tabindex="-1"` and disabled controls.
+  const getFocusable = useCallback(container => {
+    if (!container) {
+      return null;
+    }
+    const candidates = container.querySelectorAll(INTERACTIVE_SELECTORS);
+    for (const candidate of candidates) {
+      if (candidate.getAttribute('tabindex') === '-1' || candidate.hasAttribute('disabled') || candidate.getAttribute('aria-disabled') === 'true') {
+        continue;
+      }
+      return candidate;
+    }
+    return null;
+  }, []);
   const addToast = useCallback(entry => {
     setToasts(prev => {
       const {
@@ -97,6 +131,25 @@ export function ToastViewport({
     if (entry) {
       entry.options.onHide?.(reason);
     }
+    // If focus currently lives inside the toast being dismissed, remember
+    // that its removal must hand focus off to a neighbor (or the element
+    // focused before the user entered the viewport) rather than <body>.
+    const el = viewportRef.current;
+    const active = document.activeElement;
+    const dismissedNode = el?.querySelector(`[data-toast-id="${id}"]`) ?? null;
+    if (dismissedNode && active instanceof Node && dismissedNode.contains(active)) {
+      focusHandoffIdRef.current = id;
+      // Pick the neighbor to receive focus while the DOM is still intact:
+      // prefer the next toast, then the previous, else restore.
+      const remaining = toastsRef.current.filter(t => t.id !== id);
+      if (remaining.length > 0) {
+        const dismissedIndex = toastsRef.current.findIndex(t => t.id === id);
+        const next = toastsRef.current[dismissedIndex + 1] ?? toastsRef.current[dismissedIndex - 1];
+        pendingFocusRef.current = next ? next.id : 'restore';
+      } else {
+        pendingFocusRef.current = 'restore';
+      }
+    }
     setExitingIds(prev => {
       if (prev.has(id)) {
         return prev;
@@ -115,6 +168,41 @@ export function ToastViewport({
     });
     setToasts(prev => prev.filter(t => t.id !== id));
   }, []);
+
+  // After a dismissed toast unmounts, hand focus off so it never falls to
+  // <body>. Runs in a layout effect once the toast list no longer contains
+  // the dismissed toast.
+  useLayoutEffect(() => {
+    const handoffId = focusHandoffIdRef.current;
+    const target = pendingFocusRef.current;
+    if (handoffId == null || target == null) {
+      return;
+    }
+    // Wait until the dismissed toast is actually gone from the list.
+    if (toasts.some(t => t.id === handoffId)) {
+      return;
+    }
+    focusHandoffIdRef.current = null;
+    pendingFocusRef.current = null;
+    const el = viewportRef.current;
+    if (target !== 'restore' && el) {
+      const nextNode = el.querySelector(`[data-toast-id="${target}"]`);
+      const focusable = getFocusable(nextNode) ?? nextNode;
+      if (focusable) {
+        focusable.focus();
+        return;
+      }
+    }
+    // No remaining toast to receive focus — restore the previously-focused
+    // element if it's still connected, else fall back to the container.
+    const prev = prevFocusRef.current;
+    prevFocusRef.current = null;
+    if (prev && prev.isConnected) {
+      prev.focus();
+    } else if (el) {
+      el.focus();
+    }
+  }, [toasts, getFocusable]);
   const findByUniqueID = useCallback(uid => {
     return toastsRef.current.find(t => t.options.uniqueID === uid);
   }, []);
@@ -139,7 +227,6 @@ export function ToastViewport({
   }
 
   // Show the popover on mount so it enters the top layer
-  const viewportRef = useRef(null);
   useEffect(() => {
     if (!isTopLayer) {
       return;
@@ -153,13 +240,54 @@ export function ToastViewport({
       }
     }
   }, [isTopLayer]);
+
+  // F6 jumps focus into the toast viewport — the standard "go to
+  // notifications" affordance. Focus the first control in the newest toast,
+  // or the viewport container if none. Toasts are non-modal, so this only
+  // moves focus in; Shift+Tab / Escape let focus leave naturally.
+  const hasToasts = toasts.length > 0;
+  useEffect(() => {
+    if (!hasToasts) {
+      return;
+    }
+    const handleKeyDown = e => {
+      if (e.key !== 'F6') {
+        return;
+      }
+      const el = viewportRef.current;
+      if (!el) {
+        return;
+      }
+      // Already inside the viewport — nothing to do.
+      const active = document.activeElement;
+      if (active instanceof Node && el.contains(active)) {
+        return;
+      }
+      e.preventDefault();
+      // Remember where focus was so it can be restored on dismiss.
+      if (active instanceof HTMLElement) {
+        prevFocusRef.current = active;
+      }
+      // Newest toast is the last one rendered in the DOM.
+      const toastNodes = el.querySelectorAll('[data-toast-id]');
+      const newest = toastNodes[toastNodes.length - 1] ?? null;
+      const focusable = getFocusable(newest) ?? newest ?? el;
+      focusable.focus();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [hasToasts, getFocusable]);
   const posStyle = position === 'topEnd' ? styles.topEnd : position === 'topStart' ? styles.topStart : position === 'bottomStart' ? styles.bottomStart : styles.bottomEnd;
   return /*#__PURE__*/_jsxs(ToastContext, {
     value: contextValue,
     children: [children, /*#__PURE__*/_jsx("div", {
       ref: viewportRef,
       role: "region",
-      "aria-label": "Notifications"
+      "aria-label": "Notifications",
+      "aria-modal": false,
+      tabIndex: -1
       // popover="manual" promotes to the top layer (above dialogs).
       // Omitted inside dialogs where the viewport is already in a top layer.
       ,
@@ -174,6 +302,7 @@ export function ToastViewport({
         const dur = o.autoHideDuration ?? 5000;
         const isExiting = exitingIds.has(entry.id);
         return /*#__PURE__*/_jsx("div", {
+          "data-toast-id": entry.id,
           ...{
             0: {
               className: "x67bb7w xrvj5dj x1tu4anv xvmdzux xjshnde xuedmi6 xsagj69 xlr8y92 x1sopeo2 x5rzir7"

package/dist/Toolbar/Toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAoH5D,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC;AAEtC,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC7D,gDAAgD;IAChD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC;CACnD;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,YAAY,EACZ,aAAa,EACb,UAAU,EACV,KAAK,EACL,IAAW,EACX,GAAO,EACP,WAA0B,EAC1B,OAAuB,EACvB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAgGd;yBA/Ge,OAAO"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,4BAA4B,CAAC;AAoH5D,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC;AAEtC,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC7D,gDAAgD;IAChD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IAEzB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC;CACnD;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,YAAY,EACZ,aAAa,EACb,UAAU,EACV,KAAK,EACL,IAAW,EACX,GAAO,EACP,WAA0B,EAC1B,OAAuB,EACvB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,YAAY,+BAmGd;yBAlHe,OAAO"}

package/dist/Toolbar/Toolbar.js

@@ -175,10 +175,13 @@ export function Toolbar({
   const gapVar = spacingVars[spacingStepToVar[gap]];
   const {
     listRef,
-    handleKeyDown
+    handleKeyDown,
+    handleFocus
   } = useListFocus({
-    itemSelector: 'button, input, [tabindex="0"]',
-    orientation
+    itemSelector: 'button, input, [tabindex]',
+    orientation,
+    hasRovingTabIndex: true,
+    hasCaretGuard: true
   });
   return /*#__PURE__*/_jsx(SizeProvider, {
     value: size,
@@ -196,6 +199,7 @@ export function Toolbar({
         "aria-label": label,
         "aria-orientation": orientation,
         onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
         ...mergeProps(themeProps('toolbar', {
           size
         }), stylex.props(hasCenterContent ? styles.baseGrid : styles.baseFlex, orientation === 'vertical' && styles.vertical, sizeStyles.base, dynamicStyles.gap(gapVar), dynamicStyles.tabIndicatorBottom(`calc(-1 * (${blockPaddingVarForSize[size]}${dividers?.includes('bottom') ? ' + 1px' : ''}))`))),

package/dist/TreeList/TreeList.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file TreeList.tsx
- * @input Uses React, StyleX, theme tokens, TreeListItem, TreeListTypes
+ * @input Uses React, StyleX, theme tokens, TreeListItem, TreeListTypes, useTreeFocus
  * @output Exports TreeList component, TreeListProps type
  * @position Core implementation; consumed by index.ts
  *

package/dist/TreeList/TreeList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,gBAAgB,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAOvE,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA0CD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAoB,EACpB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,aAAa,+BAsGf;yBA/Ge,QAAQ"}
+{"version":3,"file":"TreeList.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeList.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAwC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,gBAAgB,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAQvE,OAAO,EAAC,KAAK,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAE1B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAsED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,OAAoB,EACpB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,aAAa,+BA4Jf;yBArKe,QAAQ"}

package/dist/TreeList/TreeList.js

@@ -4,7 +4,7 @@
 
 /**
  * @file TreeList.tsx
- * @input Uses React, StyleX, theme tokens, TreeListItem, TreeListTypes
+ * @input Uses React, StyleX, theme tokens, TreeListItem, TreeListTypes, useTreeFocus
  * @output Exports TreeList component, TreeListProps type
  * @position Core implementation; consumed by index.ts
  *
@@ -21,6 +21,7 @@ import { spacingVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { TreeListItem } from "./TreeListItem.js";
 import { themeProps } from "../utils/themeProps.js";
+import { useTreeFocus } from "../hooks/useTreeFocus.js";
 
 // =============================================================================
 // Types
@@ -55,6 +56,34 @@ function collectExpandedKeys(items) {
   return keys;
 }
 
+/**
+ * Compute the initial roving-tabindex owner: the first selected enabled item
+ * in document order, else the first enabled item, else the first item.
+ * Only the top-level candidates are considered for the default so the tab stop
+ * is reachable even when the tree is fully collapsed.
+ */
+function findDefaultActiveId(items) {
+  let firstEnabled;
+  const walk = list => {
+    for (const item of list) {
+      if (item.isSelected && item.isDisabled !== true) {
+        return item.id;
+      }
+      if (firstEnabled == null && item.isDisabled !== true) {
+        firstEnabled = item.id;
+      }
+      if (item.children != null && item.children.length > 0) {
+        const selected = walk(item.children);
+        if (selected != null) {
+          return selected;
+        }
+      }
+    }
+    return undefined;
+  };
+  return walk(items) ?? firstEnabled ?? items[0]?.id;
+}
+
 // =============================================================================
 // Component
 // =============================================================================
@@ -106,6 +135,48 @@ export function TreeList({
       return next;
     });
   }, [expandedKeysFromProps]);
+
+  // ---------------------------------------------------------------------------
+  // Roving tabindex + APG tree keyboard model (via useTreeFocus)
+  // ---------------------------------------------------------------------------
+
+  // The treeitem that currently owns the tree's single tab stop. The hook moves
+  // it around via onActiveChange; a data-driven default seeds it (selected item
+  // or first enabled).
+  const [activeId, setActiveId] = useState(() => findDefaultActiveId(items));
+
+  // If the seed id is no longer present (items changed), fall back to a valid
+  // default so the tree always has exactly one reachable tab stop.
+  const resolvedActiveId = useMemo(() => {
+    if (activeId == null) {
+      return findDefaultActiveId(items);
+    }
+    const exists = list => list.some(item => item.id === activeId || item.children != null && exists(item.children));
+    return exists(items) ? activeId : findDefaultActiveId(items);
+  }, [activeId, items]);
+
+  // Enter/Space activation: prefer the treeitem's own inner action (link or
+  // button); return true when handled so the hook does not also toggle. Scoped
+  // to this treeitem's own row — never a descendant treeitem's action inside an
+  // expanded group.
+  const activateItem = useCallback(current => {
+    const candidates = current.querySelectorAll('a[href], button:not([aria-label="Toggle children"])');
+    for (const candidate of candidates) {
+      if (candidate.closest('[role="treeitem"]') === current) {
+        candidate.click();
+        return true;
+      }
+    }
+    return false;
+  }, []);
+  const {
+    treeRef,
+    handleKeyDown
+  } = useTreeFocus({
+    onToggleExpand: handleToggle,
+    onActivate: activateItem,
+    onActiveChange: setActiveId
+  });
   function renderItems(items, nestedLevel, ancestorsIsLast) {
     return items.map((item, index) => {
       const isLast = index === items.length - 1;
@@ -131,7 +202,10 @@ export function TreeList({
         isExpanded: isExpanded,
         onToggle: handleToggle,
         density: density,
-        renderedChildren: renderedChildren
+        renderedChildren: renderedChildren,
+        posInSet: index + 1,
+        setSize: items.length,
+        isTabbable: item.id === resolvedActiveId
       }, item.id);
     });
   }
@@ -148,8 +222,10 @@ export function TreeList({
       },
       children: header
     }), /*#__PURE__*/_jsx("ul", {
+      ref: treeRef,
       role: "tree",
       "aria-labelledby": header != null ? headerId : undefined,
+      onKeyDown: handleKeyDown,
       ...{
         className: "x1ghz6dp x1717udv x3ct3a4"
       },

package/dist/TreeList/TreeListItem.d.ts

@@ -31,8 +31,17 @@ export interface TreeListItemInternalProps {
     density: TreeListDensity;
     /** Pre-rendered children subtree (rendered by the parent recursion) */
     renderedChildren?: ReactNode;
+    /** 1-based position of this item among its siblings (aria-posinset). */
+    posInSet: number;
+    /** Number of siblings at this level (aria-setsize). */
+    setSize: number;
+    /**
+     * Whether this treeitem currently owns the tree's single tab stop
+     * (roving tabindex). Exactly one visible treeitem is tabbable at a time.
+     */
+    isTabbable: boolean;
 }
-export declare function TreeListItem({ id, label, description, startContent, endContent, onClick, href, target, isDisabled, isSelected, hasChildren, nestedLevel, isLast, ancestorsIsLast, isExpanded, onToggle, density, renderedChildren, }: TreeListItemInternalProps): import("react").JSX.Element;
+export declare function TreeListItem({ id, label, description, startContent, endContent, onClick, href, target, isDisabled, isSelected, hasChildren, nestedLevel, isLast, ancestorsIsLast, isExpanded, onToggle, density, renderedChildren, posInSet, setSize, isTabbable, }: TreeListItemInternalProps): import("react").JSX.Element;
 export declare namespace TreeListItem {
     var displayName: string;
 }

package/dist/TreeList/TreeListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAcrD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AA0MrD,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B;AAMD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,OAAO,EACP,gBAAgB,GACjB,EAAE,yBAAyB,+BAyK3B;yBA5Le,YAAY"}
+{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAcrD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAoNrD,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BA2L3B;yBAjNe,YAAY"}

package/dist/TreeList/TreeListItem.js

@@ -21,6 +21,8 @@ import { getIcon } from "../Icon/globalIconRegistry.js";
 import { mergeProps } from "../utils/index.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { TreeListBranches } from "./TreeListBranches.js";
+import "./treeListItem.markers.stylex.js";
+import { treeItemScope } from "./treeListItem.markers.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
 
 // =============================================================================
@@ -28,6 +30,15 @@ import { themeProps } from "../utils/themeProps.js";
 // =============================================================================
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
+  wrapper: {
+    kH6xsr: "x3ct3a4",
+    kogj98: "x1ghz6dp",
+    kmVPX3: "x1717udv",
+    kVAEAm: "x1n2onr6",
+    kzqmXN: "xh8yej3",
+    kI3sdo: "x1a2a7pz",
+    $$css: true
+  },
   contentWrapper: {
     kaIpWk: "xh6dtrn",
     k1xSpc: "x78zum5",
@@ -50,8 +61,8 @@ const styles = {
     $$css: true
   },
   focusVisibleOutline: {
-    kI3sdo: "x1a2a7pz x1irc7jg",
-    kInvED: "x1wfwxd8 xdjuwb3",
+    kI3sdo: "x1a2a7pz xr21g96 x1irc7jg",
+    kInvED: "x1wfwxd8 xs4y3kv xdjuwb3",
     $$css: true
   },
   disabled: {
@@ -133,7 +144,10 @@ export function TreeListItem({
   isExpanded,
   onToggle,
   density,
-  renderedChildren
+  renderedChildren,
+  posInSet,
+  setSize,
+  isTabbable
 }) {
   const labelId = useId();
   const descriptionId = useId();
@@ -198,7 +212,11 @@ export function TreeListItem({
     type: "button",
     "aria-expanded": isExpanded,
     "aria-label": "Toggle children",
-    disabled: isDisabled,
+    disabled: isDisabled
+    // Roving tabindex lives on the treeitem row; the chevron toggle is not
+    // a separate tab stop. Row-level Enter/Space forwards to this button.
+    ,
+    tabIndex: -1,
     onClick: handleToggle,
     ...{
       className: "x78zum5 x6s0dn4 xl56j7k x12xnipv x6b6gus xho7bvi x1ypdohk xv9yike xx3sua9 x11g1kdw xmequkd"
@@ -224,8 +242,11 @@ export function TreeListItem({
       target: target,
       "aria-disabled": isDisabled || undefined,
       "aria-labelledby": labelId,
-      "aria-describedby": description != null ? descriptionId : undefined,
-      tabIndex: isDisabled ? -1 : undefined,
+      "aria-describedby": description != null ? descriptionId : undefined
+      // Roving tabindex lives on the treeitem row; inner action is not a
+      // separate tab stop. Activation is forwarded from the row.
+      ,
+      tabIndex: -1,
       ...{
         className: "xmper1u xln7xf2 x1heor9g x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h x1hl2dhg x1a2a7pz"
       },
@@ -235,7 +256,11 @@ export function TreeListItem({
       onClick: onClick,
       disabled: isDisabled,
       "aria-labelledby": labelId,
-      "aria-describedby": description != null ? descriptionId : undefined,
+      "aria-describedby": description != null ? descriptionId : undefined
+      // Roving tabindex lives on the treeitem row; inner action is not a
+      // separate tab stop. Activation is forwarded from the row.
+      ,
+      tabIndex: -1,
       ...{
         className: "xmper1u xln7xf2 x1heor9g x78zum5 xdt5ytf x98rzlu xeuugli x1yc453h x1a2a7pz"
       },
@@ -257,9 +282,18 @@ export function TreeListItem({
     "aria-expanded": hasChildren ? isExpanded : undefined,
     "aria-selected": isSelected || undefined,
     "aria-disabled": isDisabled || undefined,
-    ...{
-      className: "x3ct3a4 x1ghz6dp x1717udv x1n2onr6 xh8yej3"
-    },
+    "aria-level": nestedLevel + 1,
+    "aria-posinset": posInSet,
+    "aria-setsize": setSize
+    // Roving tabindex: exactly one visible treeitem is tabbable at a time.
+    // Disabled items are skipped by the tree keyboard handler but remain
+    // in the accessibility tree.
+    ,
+    tabIndex: isDisabled ? -1 : isTabbable ? 0 : -1,
+    "data-tree-id": id,
+    "data-tree-level": nestedLevel + 1,
+    "data-tree-disabled": isDisabled || undefined,
+    ...stylex.props(styles.wrapper, treeItemScope),
     children: [/*#__PURE__*/_jsx("div", {
       ...{
         className: "x12gdq22"

package/dist/TreeList/treeListItem.markers.stylex.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @file treeListItem.markers.stylex.ts
+ * @input Uses StyleX defineMarker
+ * @output Exports treeItemScope marker
+ * @position Scoped marker; consumed by TreeListItem.tsx
+ *
+ * SYNC: When modified, update /packages/core/src/TreeList/TreeListItem.tsx
+ */
+import * as stylex from '@stylexjs/stylex';
+/**
+ * Scoped marker placed on each treeitem row (`<li role="treeitem">`).
+ * Binds the row's `:focus-visible` outline to its OWN treeitem, so focusing
+ * a parent treeitem does not leak the focus ring onto descendant rows.
+ */
+export declare const treeItemScope: ReturnType<typeof stylex.defineMarker>;
+//# sourceMappingURL=treeListItem.markers.stylex.d.ts.map

package/dist/TreeList/treeListItem.markers.stylex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeListItem.markers.stylex.d.ts","sourceRoot":"","sources":["../../src/TreeList/treeListItem.markers.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CAC1C,CAAC"}

package/dist/TreeList/treeListItem.markers.stylex.js

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file treeListItem.markers.stylex.ts
+ * @input Uses StyleX defineMarker
+ * @output Exports treeItemScope marker
+ * @position Scoped marker; consumed by TreeListItem.tsx
+ *
+ * SYNC: When modified, update /packages/core/src/TreeList/TreeListItem.tsx
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * Scoped marker placed on each treeitem row (`<li role="treeitem">`).
+ * Binds the row's `:focus-visible` outline to its OWN treeitem, so focusing
+ * a parent treeitem does not leak the focus ring onto descendant rows.
+ */
+export const treeItemScope = {
+  x1g2q90y: "x1g2q90y",
+  $$css: true
+};

package/dist/Typeahead/BaseTypeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAanD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAO1D,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAuGD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,EAmdrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"BaseTypeahead.d.ts","sourceRoot":"","sources":["../../src/Typeahead/BaseTypeahead.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAMZ,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAcnD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAC,MAAM,SAAS,CAAC;AAO1D,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,IAAI,CACxE,SAAS,CAAC,WAAW,CAAC,EACtB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;OAEG;IACH,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IAEhB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE/D;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAuGD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,EAggBrB,CAAC,CAAC,SAAS,cAAc,EAC5B,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,KACzB,KAAK,CAAC,YAAY,CAAC"}

package/dist/Typeahead/BaseTypeahead.js

@@ -19,6 +19,7 @@
 import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { usePopover } from "../Popover/usePopover.js";
+import { useAnnounce } from "../hooks/useAnnounce.js";
 import { TypeaheadItem } from "./TypeaheadItem.js";
 import { Icon } from "../Icon/index.js";
 import "../theme/tokens.stylex.js";
@@ -158,6 +159,11 @@ export const BaseTypeahead = function BaseTypeahead({
   const listboxId = useId();
   const inputRef = useRef(null);
   const fallbackAnchorRef = useRef(null);
+
+  // Announce result counts / "no results" to screen readers via a persistent
+  // live region (comboboxes-6). The combobox's own popup carries no working
+  // live region, so highlight/result changes were previously silent.
+  const announce = useAnnounce();
   const [query, setQuery] = useState('');
   const [results, setResults] = useState([]);
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
@@ -239,11 +245,17 @@ export const BaseTypeahead = function BaseTypeahead({
         return;
       }
       resultsGenRef.current = gen;
-      setResults(searchResults.slice(0, maxMenuItems));
+      const shown = searchResults.slice(0, maxMenuItems);
+      setResults(shown);
       setHighlightedIndex(searchResults.length > 0 ? 0 : -1);
       if (searchResults.length > 0 || searchQuery.length > 0) {
         showLayer();
       }
+      // Announce the outcome only for an active query (not the initial
+      // focus-open), so screen-reader users hear result counts / no-results.
+      if (searchQuery.length > 0) {
+        announce(shown.length === 0 ? emptySearchResultsText : `${shown.length} ${shown.length === 1 ? 'result' : 'results'}`);
+      }
     } catch {
       if (searchGenRef.current !== gen) {
         return;
@@ -255,7 +267,7 @@ export const BaseTypeahead = function BaseTypeahead({
         setIsLoading(false);
       }
     }
-  }, [searchSource, maxMenuItems, showLayer]);
+  }, [searchSource, maxMenuItems, showLayer, announce, emptySearchResultsText]);
 
   // Perform bootstrap
   const performBootstrap = useCallback(async () => {
@@ -296,6 +308,8 @@ export const BaseTypeahead = function BaseTypeahead({
       searchSource.cancel?.();
       setResults([]);
       setHasSearched(false);
+      // Clear any lingering result-count / no-results announcement.
+      announce('');
       popover.hide();
       return;
     }
@@ -311,7 +325,7 @@ export const BaseTypeahead = function BaseTypeahead({
     } else {
       searchTimeoutRef.current = setTimeout(triggerSearch, debounceMs);
     }
-  }, [onChangeQuery, hasEntriesOnFocus, performSearch, performBootstrap, popover, debounceMs, searchSource]);
+  }, [onChangeQuery, hasEntriesOnFocus, performSearch, performBootstrap, popover, debounceMs, searchSource, announce]);
 
   // Handle input change
   const handleInputChange = useCallback(e => {
@@ -351,6 +365,29 @@ export const BaseTypeahead = function BaseTypeahead({
     }
   }, [isDisabled, hasEntriesOnFocus, results.length, query.length, performBootstrap, showLayer]);
 
+  // Handle blur — close the dropdown when focus leaves the input for an
+  // element that is neither inside the field wrapper (anchor) nor inside the
+  // dropdown popover. The native popover="auto" light-dismiss only fires on
+  // outside pointer clicks and Escape; it does not close when focus moves away
+  // via the keyboard (Tab) or programmatically, which would otherwise leave an
+  // orphaned open menu. Clicking a result moves focus onto the option (it is
+  // tabIndex={-1}, so it lives inside the popover) and selection re-focuses the
+  // input, so this only closes on a genuine focus-out of the whole field.
+  const handleBlur = useCallback(e => {
+    if (!popover.isOpen) {
+      return;
+    }
+    const next = e.relatedTarget;
+    if (next) {
+      const anchorEl = anchorRef?.current ?? fallbackAnchorRef.current;
+      const popoverEl = document.getElementById(popover.id);
+      if (anchorEl?.contains(next) || popoverEl?.contains(next)) {
+        return;
+      }
+    }
+    popover.hide();
+  }, [popover, anchorRef]);
+
   // Keyboard navigation
   const handleKeyDown = useCallback(e => {
     externalOnKeyDown?.(e);
@@ -451,6 +488,7 @@ export const BaseTypeahead = function BaseTypeahead({
         });
       },
       onFocus: handleFocus,
+      onBlur: handleBlur,
       onKeyDown: handleKeyDown,
       placeholder: placeholder,
       disabled: isDisabled,