@astryxdesign/core 0.7.7-canary.bf14580 → 0.7.7-canary.c19ca12

package/dist/Toast/ToastViewport.js

@@ -13,13 +13,14 @@
  * SYNC: When placement, stacking, hosting, focus, announcement, or safe-area
  *   behavior changes, update ToastViewport.test.tsx, Toast.doc.mjs, and Toast.stories.tsx.
  */
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 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 { getNodeText } from "../utils/getNodeText.js";
+import { moveFocusLeftBehind, noteFocusWithin } from "../utils/focusReturn.js";
 import { INTERACTIVE_SELECTORS } from "../hooks/useClickableContainer.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import { layerTextReset } from "../Layer/layerTextReset.stylex.js";
@@ -122,7 +123,8 @@ function ToastRow({
   isExiting,
   isReversed,
   onExited,
-  onDismiss
+  onDismiss,
+  isLiveRegion
 }) {
   const o = entry.options;
   const type = o.type ?? 'info';
@@ -194,12 +196,16 @@ function ToastRow({
         isExiting: isExiting,
         gestureDirection: isReversed ? -1 : 1,
         onDismiss: reason => onDismiss(entry.id, reason),
-        renderContent: o.renderContent
+        renderContent: o.renderContent,
+        timerKey: entry.id,
+        isLiveRegion: isLiveRegion
       })
     })
   });
 }
 ToastRow.displayName = 'ToastRow';
+const hasActiveModalOutlet = () => getActiveModalOutlet() != null;
+const hasNoModalOutlet = () => false;
 
 /**
  * Container that renders and manages toast notifications. Place at the root
@@ -260,6 +266,11 @@ export function ToastViewport({
   // 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);
+  // The id of a toast whose overwrite updated a row that held focus. If the
+  // update removed the focused control, the commit hands focus off.
+  const overwriteFocusRef = useRef(null);
+  // Where focus was inside a toast whose dismissal hands focus off.
+  const dismissFocusNoteRef = useRef(null);
 
   // Collect a focusable control within a toast node, if any.
   // Reuses the canonical INTERACTIVE_SELECTORS list (native controls plus
@@ -280,13 +291,9 @@ export function ToastViewport({
     return null;
   }, []);
 
-  // Announce toasts through the persistent singleton live regions. Each
-  // <Toast> also renders its own role="status"/"alert" region, but that region
-  // is "born with content" — mounted together with its text — which many
-  // screen readers do not announce (see useAnnounce.ts); the singleton regions
-  // are mounted empty and only mutated afterwards, so they are what actually
-  // guarantees the announcement (the per-toast markup is kept for browse-mode
-  // discoverability). The announcement happens in addToast — the imperative
+  // Announce toasts through the persistent singleton live regions. They are
+  // mounted empty and only mutated afterwards, which screen readers announce
+  // (see useAnnounce.ts). The announcement happens in addToast — the imperative
   // dispatch path invoked once per useToast() call from an event handler,
   // never from render — so each toast is announced exactly once by
   // construction, independent of the React render lifecycle (StrictMode
@@ -294,6 +301,12 @@ export function ToastViewport({
   // re-renders never re-announce). It is client-only (addToast never runs
   // during SSR), so it is SSR-safe.
   const announce = useAnnounce();
+  // An open native modal hides the body-level channel above from assistive
+  // technology, so while the viewport is hosted in one, each card announces
+  // itself through its own live region instead. Outside a modal the cards
+  // carry none, so a card updated in place is announced once.
+  const hasModalOutlet = useSyncExternalStore(subscribeModalOutlets, hasActiveModalOutlet, hasNoModalOutlet);
+  const isModalHosted = isTopLayer && hasModalOutlet;
   const addToast = useCallback(entry => {
     const {
       uniqueID,
@@ -326,7 +339,26 @@ export function ToastViewport({
     if (overwritten && renderedToastsRef.current.includes(overwritten)) {
       replacedRef.current.set(overwritten.id, overwritten);
     }
-    const projected = overwritten ? committed.map(t => t === overwritten ? entry : t) : [...committed, entry];
+    // An overwrite of a toast that is not leaving keeps its row, so the card
+    // updates in place and focus inside it stays. A leaving namesake
+    // is replaced by a new row, which enters again.
+    const keepsRow = overwritten != null && !exitingIdsRef.current.has(overwritten.id);
+    const placed = keepsRow ? {
+      ...entry,
+      rowKey: overwritten.rowKey ?? overwritten.id
+    } : entry;
+    if (keepsRow) {
+      // If the update removes the focused control, the commit hands focus
+      // off as a dismissal does.
+      const note = noteFocusWithin(viewportRef.current?.querySelector(`[data-toast-id="${overwritten.id}"]`));
+      if (note != null) {
+        overwriteFocusRef.current = {
+          id: placed.id,
+          note
+        };
+      }
+    }
+    const projected = overwritten ? committed.map(t => t === overwritten ? placed : t) : [...committed, placed];
     // `maxVisible={0}` shows every toast (FR7): nothing leaves the window.
     const firstVisible = maxVisible > 0 ? projected.length - maxVisible : 0;
     const cutIds = new Set(projected.filter((t, i) => i < firstVisible && exitingIdsRef.current.has(t.id)).map(t => t.id));
@@ -349,7 +381,7 @@ export function ToastViewport({
         }
       }
     }
-    pending.set(entry.id, entry);
+    pending.set(entry.id, placed);
     // An overwrite swaps a new entry, with a new id, into the replaced
     // toast's place, so the old row leaves the DOM without ever being
     // dismissed. Its settled id is dropped by the prune below, which covers
@@ -360,7 +392,7 @@ export function ToastViewport({
       // replaced namesake as leaving since, which must not turn the
       // overwrite into an append. An ignored collision already returned.
       const kept = prev.filter(t => !cutIds.has(t.id));
-      return overwritten && kept.includes(overwritten) ? kept.map(t => t === overwritten ? entry : t) : [...kept, entry];
+      return overwritten && kept.includes(overwritten) ? kept.map(t => t === overwritten ? placed : t) : [...kept, placed];
     });
   }, [announce, maxVisible]);
   const removeToast = useCallback((id, reason) => {
@@ -383,9 +415,15 @@ export function ToastViewport({
     // 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;
+    // A toast an overwrite replaced in place no longer owns its row: the
+    // replacement does, so dismissing the replaced toast leaves the row, and
+    // focus in it, to the replacement.
+    const rowKey = entry.rowKey ?? entry.id;
+    const isReplacedInPlace = !toastsRef.current.some(t => t.id === id) && toastsRef.current.some(t => t.rowKey === rowKey);
+    const dismissedNode = isReplacedInPlace ? null : el?.querySelector(`[data-toast-id="${id}"]`) ?? null;
     if (dismissedNode && active instanceof Node && dismissedNode.contains(active)) {
       focusHandoffIdRef.current = id;
+      dismissFocusNoteRef.current = noteFocusWithin(dismissedNode);
       // Pick the toast to receive focus while the DOM is still intact: the
       // nearest one after it, then before it, that shows once it is gone
       // (FR10), else restore. The list may already run ahead of the render
@@ -441,6 +479,31 @@ export function ToastViewport({
     setToasts(prev => prev.filter(t => t.id !== id));
   }, []);
 
+  // Moves focus to a control in the target toast, else in another toast that
+  // shows (newest first), else back to the element focused before focus
+  // entered the viewport, so a handoff never drops focus to <body>.
+  const handOffFocus = useCallback((note, targetId) => {
+    const el = viewportRef.current;
+    const rowFor = id => el?.querySelector(`[data-toast-id="${id}"]`) ?? null;
+    const shownIds = toastsRef.current.slice(maxVisibleRef.current > 0 ? -maxVisibleRef.current : 0).map(t => t.id).reverse();
+    const candidates = targetId == null ? [] : [targetId, ...shownIds.filter(id => id !== targetId)];
+    let target = null;
+    for (const id of candidates) {
+      target = getFocusable(rowFor(id));
+      if (target != null) {
+        break;
+      }
+    }
+    const prev = prevFocusRef.current;
+    const isReturning = target == null && prev != null && prev.isConnected;
+    if (target == null) {
+      target = isReturning ? prev : el;
+    }
+    if (moveFocusLeftBehind(note, target) && isReturning) {
+      prevFocusRef.current = null;
+    }
+  }, [getFocusable]);
+
   // 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.
@@ -456,25 +519,21 @@ export function ToastViewport({
     }
     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();
+    const note = dismissFocusNoteRef.current;
+    dismissFocusNoteRef.current = null;
+    handOffFocus(note, target === 'restore' ? null : target);
+  }, [toasts, handOffFocus]);
+
+  // After an overwrite updated a row that held focus: focus stays on the same
+  // control, or, if the update removed it, moves as a dismissal hands it off.
+  useLayoutEffect(() => {
+    const overwrite = overwriteFocusRef.current;
+    if (overwrite == null) {
+      return;
     }
-  }, [toasts, getFocusable]);
+    overwriteFocusRef.current = null;
+    handOffFocus(overwrite.note, overwrite.id);
+  }, [toasts, handOffFocus]);
   const findByUniqueID = useCallback(uid => {
     return toastsRef.current.find(t => t.options.uniqueID === uid);
   }, []);
@@ -663,8 +722,9 @@ export function ToastViewport({
         isExiting: exitingIds.has(entry.id),
         isReversed: isReversed,
         onExited: handleExited,
-        onDismiss: removeToast
-      }, entry.id))
+        onDismiss: removeToast,
+        isLiveRegion: isModalHosted
+      }, entry.rowKey ?? entry.id))
     })
   });
   return /*#__PURE__*/_jsxs(ToastContext, {

package/dist/Toast/types.d.ts

@@ -31,9 +31,10 @@ export interface ToastOptions {
     /**
      * Replaces the content of this toast's card with your own layout.
      *
-     * Astryx keeps the card, live-region role and auto-hide behavior, then hands
-     * the renderer this toast's content, resolved settings and `dismiss`
-     * callback. The renderer owns every control inside its layout; call
+     * Astryx keeps the card and its auto-hide behavior (inside a
+     * `ToastViewport` the viewport announces the toast, and while a modal hosts
+     * the viewport the card announces itself), then hands the
+     * renderer this toast's content, resolved settings and `dismiss` callback. The renderer owns every control inside its layout; call
      * `dismiss` from the control that should close the toast. Astryx does not
      * inject a fallback control into custom content.
      *
@@ -85,5 +86,10 @@ export interface ToastEntry {
     id: string;
     options: ToastOptions;
     createdAt: number;
+    /**
+     * The row's identity in the stack. A uniqueID overwrite keeps the replaced
+     * toast's, so the card updates in place and focus inside it stays.
+     */
+    rowKey?: string;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/Toast/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Toast/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,gDAAgD;AAChD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,6DAA6D;AAC7D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,CAAC;AAEhF,mEAAmE;AACnE,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE5D,wCAAwC;AACxC,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEnD,mCAAmC;AACnC,MAAM,WAAW,YAAY;IAC3B,+BAA+B;IAC/B,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;;;OAaG;IACH,aAAa,CAAC,EAAE,oBAAoB,CAAC;IAErC,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,gDAAgD;IAChD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC/C;AAED,oDAAoD;AACpD,MAAM,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC;AAExC,wDAAwD;AACxD,MAAM,WAAW,uBAAuB;IACtC,yDAAyD;IACzD,IAAI,EAAE,SAAS,CAAC;IAChB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,4EAA4E;IAC5E,IAAI,EAAE,SAAS,CAAC;IAChB,8CAA8C;IAC9C,UAAU,EAAE,OAAO,CAAC;IACpB,0DAA0D;IAC1D,gBAAgB,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,EAAE,cAAc,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,CACjC,KAAK,EAAE,uBAAuB,KAC3B,SAAS,CAAC;AAEf,oDAAoD;AACpD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,YAAY,KAAK,cAAc,CAAC;AAEpE,iDAAiD;AACjD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Toast/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,gDAAgD;AAChD,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,6DAA6D;AAC7D,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,CAAC;AAEhF,mEAAmE;AACnE,MAAM,MAAM,sBAAsB,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE5D,wCAAwC;AACxC,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEnD,mCAAmC;AACnC,MAAM,WAAW,YAAY;IAC3B,+BAA+B;IAC/B,IAAI,EAAE,SAAS,CAAC;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gEAAgE;IAChE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;;;;OAcG;IACH,aAAa,CAAC,EAAE,oBAAoB,CAAC;IAErC,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,gDAAgD;IAChD,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC/C;AAED,oDAAoD;AACpD,MAAM,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC;AAExC,wDAAwD;AACxD,MAAM,WAAW,uBAAuB;IACtC,yDAAyD;IACzD,IAAI,EAAE,SAAS,CAAC;IAChB,2EAA2E;IAC3E,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,4EAA4E;IAC5E,IAAI,EAAE,SAAS,CAAC;IAChB,8CAA8C;IAC9C,UAAU,EAAE,OAAO,CAAC;IACpB,0DAA0D;IAC1D,gBAAgB,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,EAAE,cAAc,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,CACjC,KAAK,EAAE,uBAAuB,KAC3B,SAAS,CAAC;AAEf,oDAAoD;AACpD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,YAAY,KAAK,cAAc,CAAC;AAEpE,iDAAiD;AACjD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/Token/Token.d.ts

@@ -12,7 +12,7 @@
  * - /apps/storybook/stories/Token.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/Token/ (showcase blocks)
  */
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { BaseProps } from '../BaseProps.js';
 import type { TokenColorMap } from './index.js';
 /**
@@ -95,7 +95,7 @@ export interface TokenProps extends BaseProps<HTMLElement> {
  * <Token label="Link" href="/path" />
  * ```
  */
-export declare function Token({ label, size, color, icon, isDisabled, onRemove, onClick, href, description, endContent, isLabelHidden, xstyle, className, style, 'data-testid': testId, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ref, ...rest }: TokenProps): import("react").JSX.Element;
+export declare function Token({ label, size, color, icon, isDisabled, onRemove, onClick, href, description, endContent, isLabelHidden, xstyle, className, style, 'data-testid': testId, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-haspopup': ariaHasPopup, 'aria-expanded': ariaExpanded, ref, ...rest }: TokenProps): import("react").JSX.Element;
 export declare namespace Token {
     var displayName: string;
 }

package/dist/Token/Token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAc3C;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,WAAW,CAAC;IACxD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA6JD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,KAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAqB,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,+BAwQZ;yBA5Re,KAAK"}
+{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/Token/Token.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAiB1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAe3C;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,aAAa,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,WAAW,CAAC;IACxD,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA6JD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,KAAiB,EACjB,IAAI,EACJ,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAqB,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,eAAe,EAAE,YAAY,EAC7B,GAAG,EACH,GAAG,IAAI,EACR,EAAE,UAAU,+BA8QZ;yBApSe,KAAK"}

package/dist/Token/Token.js

@@ -16,6 +16,7 @@
  * - /apps/storybook/stories/Token.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/Token/ (showcase blocks)
  */
+import { use } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, sizeVars, durationVars, easeVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -29,6 +30,7 @@ import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { usePressFeedback } from "../hooks/usePressFeedback.js";
 import { disabledInteractionProps } from "../utils/disabledInteraction.js";
+import { TokenNamingContext } from "./TokenNamingContext.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/Token/Token.generated.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -216,6 +218,8 @@ export function Token({
   'data-testid': testId,
   'aria-labelledby': ariaLabelledBy,
   'aria-describedby': ariaDescribedBy,
+  'aria-haspopup': ariaHasPopup,
+  'aria-expanded': ariaExpanded,
   ref,
   ...rest
 }) {
@@ -230,6 +234,7 @@ export function Token({
     onClick,
     isDisabled
   });
+  const naming = use(TokenNamingContext);
 
   // When role is 'button' via context (no explicit onClick), treat as
   // if onClick was provided — the popover attaches its own handler.
@@ -237,7 +242,7 @@ export function Token({
   const removeButton = onRemove != null && /*#__PURE__*/_jsx("button", {
     type: "button",
     "aria-label": t('@astryx.token.remove', {
-      label
+      label: naming?.removeName ?? label
     }),
     onClick: e => {
       e.stopPropagation();
@@ -268,12 +273,14 @@ export function Token({
     }), endContent, removeButton]
   });
 
-  // Naming inputs reach the element that owns the token's action: the inner
-  // button of a clickable token, otherwise the root
+  // Naming and popup inputs reach the element that owns the token's action:
+  // the inner button of a clickable token, otherwise the root
   // (architecture:public-component-api INV5).
   const labellingProps = {
     'aria-labelledby': ariaLabelledBy,
-    'aria-describedby': ariaDescribedBy
+    'aria-describedby': ariaDescribedBy,
+    'aria-haspopup': ariaHasPopup,
+    'aria-expanded': ariaExpanded
   };
   const sharedProps = {
     'data-testid': testId,
@@ -398,6 +405,7 @@ export function Token({
       children: [icon, /*#__PURE__*/_jsx("button", {
         type: "button",
         onClick: effectiveOnClick,
+        "aria-label": ariaLabelledBy == null ? naming?.actionName : undefined,
         ...labellingProps,
         "aria-disabled": isDisabled || undefined,
         ...(isDisabled ? disabledInteractionProps() : null),

package/dist/Token/TokenNamingContext.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Names for a Token whose visible text runs past its label. PowerSearch
+ * provides them: its tokens show the value as `endContent`.
+ *
+ * - `actionName` names a clickable token's inner button in place of `label`.
+ * - `removeName` names the remove button in place of `label`. The remove word
+ *   still comes from the catalog, so each locale keeps its word order.
+ */
+export interface TokenNaming {
+    actionName?: string;
+    removeName?: string;
+}
+export declare const TokenNamingContext: import("react").Context<TokenNaming | null>;
+//# sourceMappingURL=TokenNamingContext.d.ts.map

package/dist/Token/TokenNamingContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenNamingContext.d.ts","sourceRoot":"","sources":["../../src/Token/TokenNamingContext.ts"],"names":[],"mappings":"AAaA;;;;;;;GAOG;AACH,MAAM,WAAW,WAAW;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,6CAA0C,CAAC"}

package/dist/Token/TokenNamingContext.js

@@ -0,0 +1,23 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file TokenNamingContext.ts
+ * @input Naming parts from a caller whose token value renders outside its label
+ * @output Internal context: the names of a token's action and remove button
+ * @position Internal to Core; not exported from the Token entry point
+ */
+import { createContext } from 'react';
+
+/**
+ * Names for a Token whose visible text runs past its label. PowerSearch
+ * provides them: its tokens show the value as `endContent`.
+ *
+ * - `actionName` names a clickable token's inner button in place of `label`.
+ * - `removeName` names the remove button in place of `label`. The remove word
+ *   still comes from the catalog, so each locale keeps its word order.
+ */
+
+export const TokenNamingContext = /*#__PURE__*/createContext(null);
+TokenNamingContext.displayName = 'TokenNamingContext';

package/dist/Tooltip/useTooltip.d.ts

@@ -1,7 +1,8 @@
 /**
  * @file useTooltip.tsx
  * @input Uses useLayer, usePressPin, React hooks
- * @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips,
+ * @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips
+ *   and imperative show() and hide() for an app-built toggle trigger,
  *   and the module-only useTooltipWithTriggerBehavior that InfoTip's press-to-pin uses
  * @position Layer hook; builds on useLayer for tooltip behavior
  *
@@ -133,6 +134,23 @@ export interface TooltipReturn {
      * silent no-op.
      */
     renderTooltip: (children: ReactNode, props?: Omit<ContextRenderProps, 'positioning'>) => ReactNode;
+    /**
+     * Opens the tooltip now and keeps it open until `hide()`, Escape, a press
+     * outside, or focus leaving its trigger, as a pinned tooltip does. Its text
+     * is announced once. Reports through `onShow`. Under a controlled `isOpen`,
+     * it calls `onShow` and does not change `isOpen`. Does nothing while
+     * `isEnabled` is false.
+     *
+     * Use `show()` and `hide()` to build a toggle-style trigger: your own button
+     * calls them, sets `aria-describedby` and `aria-controls` to `describedBy`
+     * and `aria-expanded` (true while shown), and keeps its own accessible name.
+     */
+    show: () => void;
+    /**
+     * Closes the tooltip now. Reports through `onHide`. Under a controlled
+     * `isOpen`, it calls `onHide` and does not change `isOpen`.
+     */
+    hide: () => void;
 }
 /**
  * Hook for tooltip behavior with hover/focus triggers.

package/dist/Tooltip/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;GASG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAC;AAKhE,OAAO,EAAc,KAAK,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AA0C5E;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;CAChB;AAyBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAOtE;AAED;;;GAGG;AACH,MAAM,WAAW,iCAAkC,SAAQ,cAAc;IACvE;;;;;;;;;;;;OAYG;IACH,eAAe,CAAC,EAAE,oBAAoB,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,6BAA6B,CAC3C,OAAO,GAAE,iCAAsC,GAC9C,aAAa,CAqdf"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAC;AAKhE,OAAO,EAAc,KAAK,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AA0C5E;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;;;;;;;;;OAUG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;;OAGG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAOtE;AAED;;;GAGG;AACH,MAAM,WAAW,iCAAkC,SAAQ,cAAc;IACvE;;;;;;;;;;;;OAYG;IACH,eAAe,CAAC,EAAE,oBAAoB,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,6BAA6B,CAC3C,OAAO,GAAE,iCAAsC,GAC9C,aAAa,CA2df"}

package/dist/Tooltip/useTooltip.js

@@ -5,14 +5,16 @@
 /**
  * @file useTooltip.tsx
  * @input Uses useLayer, usePressPin, React hooks
- * @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips,
+ * @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips
+ *   and imperative show() and hide() for an app-built toggle trigger,
  *   and the module-only useTooltipWithTriggerBehavior that InfoTip's press-to-pin uses
  * @position Layer hook; builds on useLayer for tooltip behavior
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Tooltip/index.ts
  */
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createTriggerFocusGate } from "../utils/triggerFocus.js";
 import * as stylex from '@stylexjs/stylex';
 import { useLayerInternal } from "../Layer/useLayer.js";
 import { useAnnounceRenderedText } from "../hooks/useAnnounceRenderedText.js";
@@ -52,28 +54,6 @@ const styles = {
  * Touch trigger behavior for tooltips
  */
 
-/**
- * Check if an element is naturally focusable
- */
-function isFocusable(element) {
-  // Elements with explicit tabindex
-  if (element.hasAttribute('tabindex')) {
-    return element.tabIndex >= 0;
-  }
-
-  // Naturally focusable elements
-  const focusableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];
-  if (focusableTags.includes(element.tagName)) {
-    return !element.disabled;
-  }
-
-  // Elements with contenteditable
-  if (element.isContentEditable) {
-    return true;
-  }
-  return false;
-}
-
 /**
  * Hook for tooltip behavior with hover/focus triggers.
  *
@@ -187,6 +167,9 @@ export function useTooltipWithTriggerBehavior(options = {}) {
     isHeldOpen: isPressHeldOpen,
     attach: attachPressPin,
     unpin: unpinPress,
+    hold: holdPress,
+    release: releasePress,
+    isAppHeld,
     isPinShown,
     touch: {
       isTouchPointerRef,
@@ -289,25 +272,11 @@ export function useTooltipWithTriggerBehavior(options = {}) {
     scheduleHide();
   }, [isTouchPointerRef, layerId, scheduleHide]);
 
-  // Under `auto`, whether focus counts is decided when it arrives, not when
-  // the listeners attach: a roving-tabindex member that was `tabindex="-1"`
-  // then can be the tab stop now. A trigger that receives focus is focusable
-  // by definition; focus inside it counts only while the trigger is
-  // focusable too, so a plain wrapper still ignores its children's focus.
-  const isFocusForTrigger = useCallback(e => {
-    if (focusTrigger === 'always') {
-      return true;
-    }
-    const triggerEl = e.currentTarget;
-    return triggerEl != null && (e.target === triggerEl || isFocusable(triggerEl));
-  }, [focusTrigger]);
-
-  // Whether the trigger's current focus counted when it arrived, so its blur
-  // hides the tooltip even if the trigger has since left the tab order.
-  const focusCountedRef = useRef(false);
+  // Under `auto`, whether focus counts is decided when it arrives, and a
+  // focus that counted still hides on blur (utils/triggerFocus.ts).
+  const [focusGate] = useState(createTriggerFocusGate);
   const handleFocusIn = useCallback(e => {
-    focusCountedRef.current = isFocusForTrigger(e);
-    if (!isEnabled || !focusCountedRef.current) {
+    if (!focusGate.focusIn(e, focusTrigger) || !isEnabled) {
       return;
     }
     // A tap focuses the trigger it activates, and `:focus-visible` does not
@@ -326,18 +295,17 @@ export function useTooltipWithTriggerBehavior(options = {}) {
     }
     clearTimeouts();
     showLayer();
-  }, [isEnabled, isFocusForTrigger, isTouchInteraction, clearTimeouts, showLayer]);
+  }, [focusGate, focusTrigger, isEnabled, isTouchInteraction, clearTimeouts, showLayer]);
 
   // A pinned tooltip's focus-leave close is the pin's own: it listens on the
   // trigger whatever `focusTrigger` is. This schedules the unpinned hide,
   // which a held tooltip skips.
   const handleFocusOut = useCallback(e => {
-    if (!focusCountedRef.current && !isFocusForTrigger(e)) {
+    if (!focusGate.focusOut(e, focusTrigger)) {
       return;
     }
-    focusCountedRef.current = false;
     scheduleHide();
-  }, [isFocusForTrigger, scheduleHide]);
+  }, [focusGate, focusTrigger, scheduleHide]);
 
   // Pressing the trigger hides its own tooltip: once the control is activated
   // the hint has served its purpose, and a tooltip lingering over a
@@ -347,9 +315,10 @@ export function useTooltipWithTriggerBehavior(options = {}) {
   // A touch press is a different gesture (it may be the only way to open the
   // tooltip at all), so the touch path answers it first.
   const handlePointerDown = useCallback(event => {
-    // A press on a toggle trigger pins or closes through its click. It
-    // neither hides the preview here nor waits for a tap verdict.
-    if (isToggleTrigger(triggerRef.current)) {
+    // A toggle trigger's press pins or closes through its click. The app's
+    // hide() closes a held tooltip. Neither path hides here or waits for a
+    // tap verdict.
+    if (isToggleTrigger(triggerRef.current) || isAppHeld()) {
       return;
     }
     if (handleTouchPointerDown(event)) {
@@ -360,7 +329,7 @@ export function useTooltipWithTriggerBehavior(options = {}) {
     }
     clearTimeouts();
     hideLayer();
-  }, [isToggleTrigger, handleTouchPointerDown, isOpen, clearTimeouts, hideLayer]);
+  }, [isToggleTrigger, isAppHeld, handleTouchPointerDown, isOpen, clearTimeouts, hideLayer]);
 
   // Interaction ref that handles event listeners only
   const interactionRef = useCallback(el => {
@@ -384,7 +353,7 @@ export function useTooltipWithTriggerBehavior(options = {}) {
       el.addEventListener('pointerdown', handlePointerDown);
 
       // Focus listeners unless focus never opens the tooltip; `auto` decides
-      // per event (isFocusForTrigger).
+      // per event (utils/triggerFocus.ts).
       if (focusTrigger !== 'never') {
         el.addEventListener('focusin', handleFocusIn);
         el.addEventListener('focusout', handleFocusOut);
@@ -425,9 +394,11 @@ export function useTooltipWithTriggerBehavior(options = {}) {
       showLayer();
     } else {
       clearTimeouts();
+      // A pin or app hold ends when the consumer closes the tooltip.
+      unpinPress();
       hideLayer();
     }
-  }, [isOpen, clearTimeouts, showLayer, hideLayer]);
+  }, [isOpen, clearTimeouts, showLayer, hideLayer, unpinPress]);
 
   // Dismiss on Escape (WCAG 1.4.13 — dismissible) through the shared layer
   // stack. A visible tip is the top-most layer, so it takes the press and
@@ -507,12 +478,22 @@ export function useTooltipWithTriggerBehavior(options = {}) {
       children: children
     }), renderProps);
   }, [renderLayer, placement, alignment, popoverXstyle, cancelHide, scheduleHide, contentRefs]);
+  const show = useCallback(() => {
+    clearTimeouts();
+    holdPress();
+  }, [clearTimeouts, holdPress]);
+  const hide = useCallback(() => {
+    clearTimeouts();
+    releasePress();
+  }, [clearTimeouts, releasePress]);
   return {
     ref,
     positionRef: layerRef,
     interactionRef,
     anchorId: layerAnchorId,
     describedBy: layerId,
-    renderTooltip
+    renderTooltip,
+    show,
+    hide
   };
 }

package/dist/Typeahead/TypeaheadItem.d.ts

@@ -31,7 +31,8 @@ export interface TypeaheadItemProps<T extends SearchableItem = SearchableItem> e
      */
     isDisabled?: boolean;
     /**
-     * Group label for grouping items visually.
+     * This prop has no effect. Set `item.auxiliaryData.group` on search-source
+     * items to group results in Typeahead or BaseTypeahead.
      */
     group?: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadItem.d.ts","sourceRoot":"","sources":["../../src/Typeahead/TypeaheadItem.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EACtD,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,UAAkB,EAClB,KAAK,EAAE,MAAM,EACb,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBAyBvB;yBApCe,aAAa"}
+{"version":3,"file":"TypeaheadItem.d.ts","sourceRoot":"","sources":["../../src/Typeahead/TypeaheadItem.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EACtD,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,UAAkB,EAClB,KAAK,EAAE,MAAM,EACb,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBAyBvB;yBApCe,aAAa"}