@astryxdesign/core 0.7.4 → 0.7.5-canary.0418c47

package/dist/Popover/Popover.js

@@ -10,29 +10,74 @@
  *
  * For hover-triggered overlays, use HoverCard instead.
  *
+ * `presentation` chooses the surface, with the vocabulary DropdownMenu and
+ * Selector use: the anchored popover (the default), a BottomSheet, or
+ * `adaptive` — a BottomSheet on a compact touch screen and the popover
+ * elsewhere (the shared adaptive presentation policy), which is what iOS does
+ * with a popover unless the app keeps it. The surface is chosen when the
+ * popover opens; whichever is open stays until it closes. The BottomSheet
+ * loads on demand (lazyPopoverBottomSheet.ts).
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Popover/Popover.test.tsx
  * - /packages/core/src/Popover/index.ts
+ * - /packages/core/src/Popover/PopoverPresentation.test.tsx
  * - /apps/storybook/stories/Popover.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Popover/ (showcase blocks)
  */
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import { compactDefinition, DEFAULT_COMPACT_DEFINITION } from "../theme/themeAdaptations.js";
+import { useThemeDefinition } from "../theme/useTheme.js";
 import * as stylex from '@stylexjs/stylex';
 import { devWarn } from "../utils/devWarning.js";
 import { usePopover } from "./usePopover.js";
+import { FOCUSABLE_SELECTOR } from "../hooks/focusableSelector.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../Layer/layerViewportInset.stylex.js";
 import { layerViewportInset } from "../Layer/layerViewportInset.stylex.js";
 import { clampInlineSize, isIntrinsicInlineSize } from "../Layer/clampInlineSize.js";
+import "../theme/tokens.stylex.js";
 import { spacingVars } from "../theme/tokens.stylex.js";
 import { InteractiveRoleContext } from "../InteractiveRoleContext/InteractiveRoleContext.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BottomSheetEscapeContext } from "../BottomSheet/bottomSheetEscape.js";
+import { PopoverBottomSheet, preloadPopoverBottomSheet } from "./lazyPopoverBottomSheet.js";
+import { Button } from "../Button/index.js";
+import { useTranslator } from "../i18n/index.js";
+
 // =============================================================================
 // Helpers
 // =============================================================================
-
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const BUTTON_SELECTOR = 'button, [role="button"]';
+const subscribeToNothing = () => () => {};
+const notCompactTouch = () => false;
+
+/**
+ * The surface `presentation` resolves to now. `adaptive` takes the sheet on a
+ * compact screen with a coarse pointer, compact as the active theme defines
+ * it (spec:AST-012 FR9: narrower than its `md` point or shorter than 500).
+ * Only an adaptive popover reads the theme and subscribes to that query, so a
+ * default popover holds no viewport or document listener. The theme is the
+ * nearest Theme provider's; without one, the registered root theme's, as
+ * AppShell reads it (architecture:theme-application).
+ */
+function usePresentationSurface(presentation) {
+  const isAdaptive = presentation === 'adaptive';
+  const points = useThemeDefinition(isAdaptive)?.__adaptations?.widthBreakpoints;
+  const query = useMemo(() => (points == null ? DEFAULT_COMPACT_DEFINITION : compactDefinition(points)).coarsePointerQuery, [points]);
+  const subscribe = useCallback(onStoreChange => {
+    const mql = window.matchMedia(query);
+    mql.addEventListener('change', onStoreChange);
+    return () => mql.removeEventListener('change', onStoreChange);
+  }, [query]);
+  const getSnapshot = useCallback(() => window.matchMedia(query).matches, [query]);
+  const isCompactTouch = useSyncExternalStore(isAdaptive ? subscribe : subscribeToNothing, isAdaptive ? getSnapshot : notCompactTouch, notCompactTouch);
+  if (!isAdaptive) {
+    return presentation;
+  }
+  return isCompactTouch ? 'bottom-sheet' : 'popover';
+}
 /**
  * Find the trigger button inside a container element.
  * Looks for `<button>` or `[role="button"]` — either the element itself
@@ -45,10 +90,21 @@ function findTriggerButton(el) {
   return el.querySelector(BUTTON_SELECTOR);
 }
 
+/** The trigger's own name: its `aria-label`, else its text. */
+function readTriggerText(trigger) {
+  return trigger.getAttribute('aria-label')?.trim() || trigger.textContent?.trim() || '';
+}
+
 // =============================================================================
 // Types
 // =============================================================================
 
+/**
+ * The surface a Popover presents its content on: anchored to the trigger, in
+ * a BottomSheet, or adaptive (a BottomSheet on a compact touch screen, the
+ * popover elsewhere).
+ */
+
 /**
  * Props passed to render-prop children for explicit trigger wiring.
  */
@@ -58,6 +114,14 @@ function findTriggerButton(el) {
 // =============================================================================
 
 const styles = {
+  sheetFallbackClose: {
+    kVAEAm: "x10l6tqk xv7k90b",
+    kz4h6p: "x1hyvwdk x1rsz1da",
+    keoZOQ: "xdj266r x65r4up",
+    k1xSpc: "xb52w99",
+    kzqmXN: "xjkv29o",
+    $$css: true
+  },
   surfaceViewportFit: {
     kB7OPa: "x9f619",
     ks0D6T: "xc0b1yq",
@@ -139,15 +203,21 @@ export function Popover({
   hasAutoFocus,
   hasLightDismiss = true,
   hasEscapeDismiss = true,
+  presentation = 'popover',
   xstyle,
   className,
   style,
   'data-testid': testId
 }) {
+  const t = useTranslator();
   const wrapperRef = useRef(null);
   const measurementFrameRef = useRef(null);
   const [hasOverflow, setHasOverflow] = useState(false);
   const isControlled = isOpen !== undefined;
+  // The bottom-sheet presentation: the surface it resolves to now, and
+  // whether the sheet is the surface that is open.
+  const resolvedPresentation = usePresentationSurface(presentation);
+  const [isSheetOpenState, setIsSheetOpenState] = useState(false);
   const handlePopoverShow = useCallback(() => {
     onOpenChange?.(true);
   }, [onOpenChange]);
@@ -176,6 +246,121 @@ export function Popover({
     onShow: handlePopoverShow,
     onHide: handlePopoverHide
   });
+
+  // A controlled popover opens on the surface its presentation resolves to
+  // as it opens, and keeps that surface until it closes: a phone rotated past
+  // the compact width while the sheet is open keeps its sheet.
+  const [controlledSurface, setControlledSurface] = useState(null);
+  // The latch is set during render, as the controlled `isOpen` turns on or
+  // off, so the open surface is known in the same render that opens it.
+  if (isControlled) {
+    if (isOpen !== true && controlledSurface != null) {
+      setControlledSurface(null);
+    } else if (isOpen === true && controlledSurface == null) {
+      setControlledSurface(popover.isOpen ? 'popover' : resolvedPresentation);
+    }
+  }
+  const isSheetOpen = isControlled ? isOpen === true && controlledSurface === 'bottom-sheet' : isSheetOpenState;
+  // One presentation at a time (architecture:component-style-authoring
+  // INV7): the sheet is mounted, in place of the anchored layer, while it is
+  // the surface an opening would choose (a compact touch screen, or
+  // `'bottom-sheet'`) and the anchored popover is not the open one, while it
+  // is open, and through its exit after it was. Closed, it holds the content
+  // as the anchored layer does, so state kept in the content (a ticked box,
+  // typed text) survives a reopen. After a sheet closes on a screen that has
+  // stopped being compact, it stays through its exit, so the exit plays out
+  // and its dialog hands focus back to the trigger (component:Popover AR4),
+  // and gives way to the anchored layer once its dialog has closed.
+  const [hasSheetBeenOpen, setHasSheetBeenOpen] = useState(false);
+  // The trigger's text, which names a sheet that has no `label` (DEC-8).
+  const [triggerText, setTriggerText] = useState('');
+  if (isSheetOpen && !hasSheetBeenOpen) {
+    setHasSheetBeenOpen(true);
+  }
+  const isSheetMounted = isSheetOpen || hasSheetBeenOpen || resolvedPresentation === 'bottom-sheet' && !popover.isOpen;
+  const sheetPanelRef = useRef(null);
+  const [isSheetPanelAttached, setSheetPanelAttached] = useState(false);
+  const attachSheetPanel = useCallback(panel => {
+    sheetPanelRef.current = panel;
+    setSheetPanelAttached(panel != null);
+  }, []);
+  // Focus enters the sheet at each opening as it enters the anchored popover
+  // (FR2): a caller's `[data-autofocus]`, else the first genuine content
+  // control (never the injected fallback close, never BottomSheet's own
+  // scroll area), else that scroll area: the sheet's labelled surface, which
+  // paints the shared focus ring under the keyboard. It runs a frame after
+  // BottomSheet presents the dialog; BottomSheet is unchanged.
+  useEffect(() => {
+    if (!isSheetOpen || !isSheetPanelAttached) {
+      return;
+    }
+    const frame = requestAnimationFrame(() => {
+      const sheetPanel = sheetPanelRef.current;
+      if (sheetPanel == null) {
+        return;
+      }
+      const dialog = sheetPanel.closest('dialog');
+      if (dialog == null || !dialog.open) {
+        return;
+      }
+      const active = sheetPanel.ownerDocument.activeElement;
+      if (active != null && active !== sheetPanel && active !== dialog && sheetPanel.contains(active)) {
+        return;
+      }
+      const target = sheetPanel.querySelector('[data-autofocus]') ?? Array.from(sheetPanel.querySelectorAll(FOCUSABLE_SELECTOR)).find(element =>
+      // BottomSheet's scroll area is the panel's own child; content
+      // sits inside it.
+      element.parentElement !== sheetPanel && element.closest('[data-astryx-popover-fallback-close]') == null);
+      if (target != null) {
+        target.focus({
+          preventScroll: true
+        });
+        return;
+      }
+      // The scroll area is a tab stop only while its content overflows; it is
+      // focusable from script either way.
+      const surface = Array.from(sheetPanel.children).find(child => child instanceof HTMLElement && child.getAttribute('role') === 'group');
+      if (surface == null) {
+        return;
+      }
+      if (!surface.hasAttribute('tabindex')) {
+        surface.tabIndex = -1;
+      }
+      surface.focus({
+        preventScroll: true
+      });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [isSheetOpen, isSheetPanelAttached]);
+  useEffect(() => {
+    if (isSheetOpen || !hasSheetBeenOpen) {
+      return;
+    }
+    const dialog = sheetPanelRef.current?.closest('dialog');
+    if (dialog == null || !dialog.open) {
+      // eslint-disable-next-line @eslint-react/set-state-in-effect -- syncs with the sheet's <dialog>: it is already closed, so its close event has fired and its exit is over; unmount it
+      setHasSheetBeenOpen(false);
+      return;
+    }
+    const handleClose = () => setHasSheetBeenOpen(false);
+    dialog.addEventListener('close', handleClose);
+    return () => dialog.removeEventListener('close', handleClose);
+  }, [hasSheetBeenOpen, isSheetOpen]);
+  // An open on a compact touch screen shows the sheet at once: its module
+  // loads as soon as the sheet can be the surface, with nothing rendered.
+  useEffect(() => {
+    if (resolvedPresentation === 'bottom-sheet') {
+      preloadPopoverBottomSheet();
+    }
+  }, [resolvedPresentation]);
+  const isAnySurfaceOpen = popover.isOpen || isSheetOpen;
+  const sheetId = `${popover.id}-sheet`;
+  const setSheetOpen = useCallback(next => {
+    if (!isControlled) {
+      setIsSheetOpenState(next);
+    }
+    onOpenChange?.(next);
+  }, [isControlled, onOpenChange]);
   const measureOverflow = useCallback(() => {
     const surface = popover.contentRef.current;
     if (!surface) {
@@ -234,6 +419,13 @@ export function Popover({
   }, [content, popover.isOpen, scheduleOverflowMeasurement]);
 
   // Shared handler for click events on the trigger button.
+  // A render-prop trigger is the caller's element, reached through the ref
+  // the render prop hands it; its text names a sheet that has no `label`.
+  const renderTriggerRef = useRef(null);
+  const setRenderTrigger = useCallback(element => {
+    renderTriggerRef.current = element;
+    popover.triggerRef(element);
+  }, [popover]);
   const handleTriggerClick = useCallback(event => {
     // An aria-disabled trigger stays focusable but opens nothing
     // (spec:AST-085 FR2), even for a click dispatched straight on it.
@@ -241,8 +433,17 @@ export function Popover({
     if (!isEnabled || trigger instanceof Element && trigger.getAttribute('aria-disabled') === 'true') {
       return;
     }
+    // Opening chooses the surface; an open popover closes as a popover.
+    if (isSheetOpen || !popover.isOpen && resolvedPresentation === 'bottom-sheet') {
+      const opener = trigger instanceof HTMLElement ? trigger : renderTriggerRef.current;
+      if (opener != null) {
+        setTriggerText(readTriggerText(opener));
+      }
+      setSheetOpen(!isSheetOpen);
+      return;
+    }
     popover.toggle();
-  }, [isEnabled, popover]);
+  }, [isEnabled, isSheetOpen, popover, resolvedPresentation, setSheetOpen]);
 
   // Shared handler for keydown events on role="button" elements.
   // Native <button> synthesizes click on Enter/Space, but role="button"
@@ -260,9 +461,14 @@ export function Popover({
    */
   const attachTrigger = useCallback(button => {
     // ARIA attributes
-    button.setAttribute('aria-haspopup', popover.triggerProps['aria-haspopup']);
-    button.setAttribute('aria-expanded', String(popover.triggerProps['aria-expanded']));
-    button.setAttribute('aria-controls', popover.triggerProps['aria-controls']);
+    // The sheet's surface is a dialog whatever the popover's role.
+    button.setAttribute('aria-haspopup', isSheetMounted ? 'dialog' : popover.triggerProps['aria-haspopup']);
+    button.setAttribute('aria-expanded', String(isAnySurfaceOpen));
+    button.setAttribute('aria-controls', isSheetMounted ? sheetId : popover.triggerProps['aria-controls']);
+    // The trigger's text is in the DOM the caller rendered, read as the
+    // trigger attaches; it names a sheet that has no `label` (DEC-8).
+    // eslint-disable-next-line @eslint-react/set-state-in-effect -- reads the caller-rendered trigger's text, which only the DOM holds
+    setTriggerText(readTriggerText(button));
 
     // Event handlers
     button.addEventListener('click', handleTriggerClick);
@@ -281,7 +487,7 @@ export function Popover({
         button.removeEventListener('keydown', handleTriggerKeyDown);
       }
     };
-  }, [popover, handleTriggerClick, handleTriggerKeyDown]);
+  }, [popover, isAnySurfaceOpen, isSheetMounted, sheetId, handleTriggerClick, handleTriggerKeyDown]);
 
   // Sibling mode: attach to external anchorRef
   useIsomorphicLayoutEffect(() => {
@@ -345,35 +551,77 @@ export function Popover({
     };
   }, [anchorRef, popover, attachTrigger]);
 
-  // Sync controlled state
+  // Sync controlled state: show or hide the anchored popover, the one surface
+  // with an imperative API, to follow the latch. The sheet follows the latch
+  // in render (`isSheetOpen`).
   useIsomorphicLayoutEffect(() => {
     if (!isControlled) {
       return;
     }
-    if (isOpen && !popover.isOpen) {
+    if (!isOpen) {
+      if (popover.isOpen) {
+        popover.hide();
+      }
+      return;
+    }
+    if (controlledSurface === 'popover' && !popover.isOpen) {
       popover.show();
-    } else if (!isOpen && popover.isOpen) {
-      popover.hide();
     }
-  }, [isOpen, isControlled, popover]);
+  }, [isOpen, isControlled, popover, controlledSurface]);
 
   // Popover's one sizing fact: an explicit width wins over trigger matching.
   // Fit against the viewport is the layer runtime's (spec:AST-059).
   const popoverSizeXstyle = !width ? styles.matchTrigger : styles.customWidth(typeof width === 'string' && isIntrinsicInlineSize(width) ? width.trim() : clampInlineSize(width, layerViewportInset.maxInlineSizeFallback));
   const layerXstyle = [popoverSizeXstyle, layerAnimations[placement]];
 
+  // One instance of the content at a time: the sheet holds it while it is
+  // mounted, the anchored layer otherwise.
+  const isContentInSheet = isSheetMounted;
+  const anchoredContent = /*#__PURE__*/_jsx("div", {
+    "data-testid": isContentInSheet ? undefined : testId,
+    children: isContentInSheet ? null : content
+  });
+  // The sheet renders while it is the open surface and through its exit. It
+  // always light-dismisses: a tap outside it or a swipe down closes it,
+  // whatever `hasLightDismiss` says, so a finger always has a way out
+  // (DEC-8). Escape follows `hasEscapeDismiss`, and the fallback close stays
+  // hidden until it is reached, as on the anchored surface.
+  const sheet = isSheetMounted ? /*#__PURE__*/_jsx(BottomSheetEscapeContext, {
+    value: hasEscapeDismiss,
+    children: /*#__PURE__*/_jsxs(PopoverBottomSheet, {
+      ref: attachSheetPanel,
+      id: sheetId,
+      isOpen: isSheetOpen,
+      onOpenChange: setSheetOpen,
+      label: label ?? triggerText,
+      height: "tall",
+      padding: padding,
+      xstyle: xstyle,
+      className: className,
+      style: style,
+      "data-testid": isContentInSheet ? testId : undefined,
+      children: [isContentInSheet ? content : null, isContentInSheet && hasCloseButton !== false ? /*#__PURE__*/_jsx(Button, {
+        "data-astryx-popover-fallback-close": "",
+        variant: "secondary",
+        label: closeButtonLabel ?? t('@astryx.popover.close'),
+        onClick: () => setSheetOpen(false),
+        xstyle: styles.sheetFallbackClose
+      }) : null]
+    })
+  }) : null;
+
+  // The anchored layer, unless the sheet is the presentation that is mounted.
+  const anchoredLayer = isSheetMounted ? null : popover.render(anchoredContent, {
+    placement,
+    alignment,
+    offset: spacingVars['--spacing-1'],
+    xstyle: layerXstyle
+  });
+
   // Sibling mode: render only the popover (no wrapper needed)
   if (anchorRef && children == null) {
-    return /*#__PURE__*/_jsx(_Fragment, {
-      children: popover.render(/*#__PURE__*/_jsx("div", {
-        "data-testid": testId,
-        children: content
-      }), {
-        placement,
-        alignment,
-        offset: spacingVars['--spacing-1'],
-        xstyle: layerXstyle
-      })
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [anchoredLayer, sheet]
     });
   }
 
@@ -381,23 +629,15 @@ export function Popover({
   const isRenderProp = typeof children === 'function';
   if (isRenderProp) {
     const triggerProps = {
-      ref: popover.triggerRef,
+      ref: setRenderTrigger,
       // The caller renders and owns this trigger element.
       onClick: () => handleTriggerClick(),
       'aria-haspopup': 'dialog',
-      'aria-expanded': popover.isOpen,
-      'aria-controls': popover.id
+      'aria-expanded': isAnySurfaceOpen,
+      'aria-controls': isSheetMounted ? sheetId : popover.id
     };
     return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [children(triggerProps), popover.render(/*#__PURE__*/_jsx("div", {
-        "data-testid": testId,
-        children: content
-      }), {
-        placement,
-        alignment,
-        offset: spacingVars['--spacing-1'],
-        xstyle: layerXstyle
-      })]
+      children: [children(triggerProps), anchoredLayer, sheet]
     });
   }
 
@@ -412,15 +652,7 @@ export function Popover({
         },
         children: children
       })
-    }), popover.render(/*#__PURE__*/_jsx("div", {
-      "data-testid": testId,
-      children: content
-    }), {
-      placement,
-      alignment,
-      offset: spacingVars['--spacing-1'],
-      xstyle: layerXstyle
-    })]
+    }), anchoredLayer, sheet]
   });
 }
 Popover.displayName = 'Popover';

package/dist/Popover/index.d.ts

@@ -6,8 +6,8 @@
  *
  * SYNC: When adding new Popover files, update exports here
  */
-export { usePopover } from './usePopover';
-export type { UsePopoverOptions, UsePopoverReturn } from './usePopover';
-export { Popover } from './Popover';
-export type { PopoverProps, PopoverTriggerRenderProps } from './Popover';
+export { usePopover } from './usePopover.js';
+export type { UsePopoverOptions, UsePopoverReturn } from './usePopover.js';
+export { Popover } from './Popover.js';
+export type { PopoverPresentation, PopoverProps, PopoverTriggerRenderProps, } from './Popover.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Popover/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Popover/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAGH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAGtE,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAE,yBAAyB,EAAC,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Popover/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAGH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAGtE,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EACV,mBAAmB,EACnB,YAAY,EACZ,yBAAyB,GAC1B,MAAM,WAAW,CAAC"}

package/dist/Popover/lazyPopoverBottomSheet.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file lazyPopoverBottomSheet.ts
+ * @input Uses React lazy and Suspense, useIsHydrating and BottomSheet
+ * @output Exports `PopoverBottomSheet`, a BottomSheet that loads on its first
+ *   render, and `preloadPopoverBottomSheet`, which loads it without rendering
+ * @position Internal to Popover: the surface of its bottom-sheet presentation
+ *
+ * A Popover only renders a BottomSheet when its presentation asks for one, so
+ * the sheet (and its gestures) loads on demand and stays out of pages whose
+ * popovers stay anchored, as DropdownMenu's sheet does
+ * (DropdownMenu/lazyMenuBottomSheet.ts). It renders nothing until the module
+ * loads, and nothing on the server or in the render that hydrates server HTML
+ * (spec:AST-013 FR9); the closed sheet has no visible markup.
+ */
+import { type ComponentProps, type ReactElement } from 'react';
+import type { BottomSheet as EagerBottomSheet } from '../BottomSheet/BottomSheet.js';
+/**
+ * Loads the sheet's module with nothing rendered, so a Popover whose sheet
+ * can be the surface opens it at once.
+ */
+export declare function preloadPopoverBottomSheet(): void;
+export declare function PopoverBottomSheet(props: ComponentProps<typeof EagerBottomSheet>): ReactElement | null;
+//# sourceMappingURL=lazyPopoverBottomSheet.d.ts.map

package/dist/Popover/lazyPopoverBottomSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazyPopoverBottomSheet.d.ts","sourceRoot":"","sources":["../../src/Popover/lazyPopoverBottomSheet.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,WAAW,IAAI,gBAAgB,EAAC,MAAM,4BAA4B,CAAC;AAWhF;;;GAGG;AACH,wBAAgB,yBAAyB,IAAI,IAAI,CAEhD;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,GAC7C,YAAY,GAAG,IAAI,CASrB"}

package/dist/Popover/lazyPopoverBottomSheet.js

@@ -0,0 +1,40 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file lazyPopoverBottomSheet.ts
+ * @input Uses React lazy and Suspense, useIsHydrating and BottomSheet
+ * @output Exports `PopoverBottomSheet`, a BottomSheet that loads on its first
+ *   render, and `preloadPopoverBottomSheet`, which loads it without rendering
+ * @position Internal to Popover: the surface of its bottom-sheet presentation
+ *
+ * A Popover only renders a BottomSheet when its presentation asks for one, so
+ * the sheet (and its gestures) loads on demand and stays out of pages whose
+ * popovers stay anchored, as DropdownMenu's sheet does
+ * (DropdownMenu/lazyMenuBottomSheet.ts). It renders nothing until the module
+ * loads, and nothing on the server or in the render that hydrates server HTML
+ * (spec:AST-013 FR9); the closed sheet has no visible markup.
+ */
+import { createElement, lazy, Suspense } from 'react';
+import { useIsHydrating } from "../hooks/useIsHydrating.js";
+const loadBottomSheet = async () => import("../BottomSheet/BottomSheet.js");
+const LazyBottomSheet = /*#__PURE__*/lazy(async () => loadBottomSheet().then(module => ({
+  default: module.BottomSheet
+})));
+
+/**
+ * Loads the sheet's module with nothing rendered, so a Popover whose sheet
+ * can be the surface opens it at once.
+ */
+export function preloadPopoverBottomSheet() {
+  void loadBottomSheet();
+}
+export function PopoverBottomSheet(props) {
+  if (useIsHydrating()) {
+    return null;
+  }
+  return /*#__PURE__*/createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/createElement(LazyBottomSheet, props));
+}

package/dist/Popover/usePopover.d.ts

@@ -11,9 +11,9 @@
  * - /packages/core/src/Popover/index.ts
  */
 import React, { type ReactNode } from 'react';
-import { type ContextRenderProps } from '../Layer/useLayer';
+import { type ContextRenderProps } from '../Layer/useLayer.js';
 import type { StyleXStyles } from '@stylexjs/stylex';
-import type { SpacingStep } from '../utils/types';
+import type { SpacingStep } from '../utils/types.js';
 /**
  * Options for usePopover
  */

package/dist/Popover/usePopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/Popover/usePopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAW,KAAK,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAGpE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAgBnD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA6EhD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;;;;;;;OAaG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAE7C;;;;OAIG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAEnD;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAEpD;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAEvE;;OAEG;IACH,YAAY,EAAE;QACZ,eAAe,EAAE,QAAQ,GAAG,MAAM,CAAC;QACnC,eAAe,EAAE,OAAO,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAoPD,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,gBAAgB,CAE5E"}
+{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../src/Popover/usePopover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAW,KAAK,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAGpE,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAgBnD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AA+EhD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAEzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;;;;;;;OAaG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAE7C;;;;OAIG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAEnD;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,IAAI,EAAE,CAAC,OAAO,CAAC,EAAE;QAAC,aAAa,CAAC,EAAE,OAAO,CAAA;KAAC,KAAK,IAAI,CAAC;IAEpD;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IAEnB;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;;;;;;;;;OAWG;IACH,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,kBAAkB,KAAK,SAAS,CAAC;IAEvE;;OAEG;IACH,YAAY,EAAE;QACZ,eAAe,EAAE,QAAQ,GAAG,MAAM,CAAC;QACnC,eAAe,EAAE,OAAO,CAAC;QACzB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAwPD,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,gBAAgB,CAE5E"}

package/dist/Popover/usePopover.js

@@ -39,7 +39,9 @@ function attemptFocus(element) {
   } catch {
     // Ignore non-focusable elements; the caller will try the next target.
   }
-  return document.activeElement === element;
+  // The element's own document: a popover rendered into a second document
+  // (an iframe, a Picture-in-Picture window) never moves this one's focus.
+  return element.ownerDocument.activeElement === element;
 }
 function focusFirstContentControl(container) {
   const focusable = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(element => element.closest(FALLBACK_CLOSE_SELECTOR) == null);
@@ -187,13 +189,17 @@ function usePopoverImplementation(options = {}) {
 
   // Auto-focus first element when popover opens (unless skipped)
   useEffect(() => {
-    if (layer.isOpen && hasAutoFocus && !skipAutoFocusRef.current) {
-      // Use requestAnimationFrame to ensure DOM is ready
-      requestAnimationFrame(focusInitialTarget);
-    }
     // Reset the per-open focus preference after the popover closes.
     if (!layer.isOpen) {
       skipAutoFocusRef.current = false;
+      return;
+    }
+    if (hasAutoFocus && !skipAutoFocusRef.current) {
+      // Wait a frame so the content is mounted. A popover that closes or
+      // unmounts first cancels it: the frame would otherwise move focus into
+      // content that is no longer shown, after the close had left it alone.
+      const frame = requestAnimationFrame(focusInitialTarget);
+      return () => cancelAnimationFrame(frame);
     }
   }, [layer.isOpen, hasAutoFocus, focusInitialTarget]);
 

package/dist/PowerSearch/PowerSearch.d.ts

@@ -10,11 +10,11 @@
  * - /packages/cli/assets/templates/blocks/components/PowerSearch/ (showcase blocks)
  */
 import React, { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import { type TokenizerOverflowBehavior } from '../Tokenizer';
-import type { IconType } from '../Icon';
-import type { InputStatus, FieldStatusVariant } from '../Field';
-import type { PowerSearchConfig, PowerSearchFilter, PowerSearchChangeType, PowerSearchHandle, PowerSearchComponents } from './types';
+import type { BaseProps } from '../BaseProps.js';
+import { type TokenizerOverflowBehavior } from '../Tokenizer/index.js';
+import type { IconType } from '../Icon/index.js';
+import type { InputStatus, FieldStatusVariant } from '../Field/index.js';
+import type { PowerSearchConfig, PowerSearchFilter, PowerSearchChangeType, PowerSearchHandle, PowerSearchComponents } from './types.js';
 export type PowerSearchSize = 'sm' | 'md' | 'lg';
 export interface PowerSearchProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
     /** PowerSearch configuration defining available fields and operators. */

package/dist/PowerSearch/PowerSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PowerSearch.d.ts","sourceRoot":"","sources":["../../src/PowerSearch/PowerSearch.tsx"],"names":[],"mappings":"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"}

package/dist/PowerSearch/PowerSearch.js

@@ -764,15 +764,17 @@ export function PowerSearch({
   // Announce result-count changes to screen readers through a polite live
   // region, mirroring the way Typeahead announces its dropdown result count.
   // The count is otherwise only shown visually and stays silent to assistive
-  // tech. Skip the first run so the count already present on mount isn't
-  // announced unprompted — only user-driven changes are spoken.
+  // tech. Only a change after mount is spoken: the guard compares against the
+  // last announced text rather than a mounted flag, so StrictMode's effect
+  // replay (which resets a flag and would speak the count present on mount
+  // unprompted) announces nothing until the count changes.
   const announce = useAnnounce();
-  const hasMountedRef = useRef(false);
+  const announcedResultCountRef = useRef(resultCountText);
   useEffect(() => {
-    if (!hasMountedRef.current) {
-      hasMountedRef.current = true;
+    if (resultCountText === announcedResultCountRef.current) {
       return;
     }
+    announcedResultCountRef.current = resultCountText;
     if (resultCountText != null) {
       announce(resultCountText);
     }