@fluentui/react-popover 9.14.4 → 9.14.6

package/CHANGELOG.md

@@ -1,12 +1,43 @@
 # Change Log - @fluentui/react-popover
 
-This log was last generated on Wed, 24 Jun 2026 11:03:40 GMT and should not be manually modified.
+<!-- This log was last generated on Tue, 11 Aug 2026 17:16:02 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## [9.14.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.6)
+
+Tue, 11 Aug 2026 17:16:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.14.5..@fluentui/react-popover_v9.14.6)
+
+### Patches
+
+- Ship ESM-first (type:module): valid ESM under lib/, CommonJS under lib-commonjs/*.cjs, and drop the `node` export condition - bare-Node `import` resolves ESM, `require` resolves CJS; node-targeted bundlers tree-shake. ([PR #36327](https://github.com/microsoft/fluentui/pull/36327) by martinhochel@microsoft.com)
+- Bump @fluentui/keyboard-keys to v9.0.9 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-aria to v9.17.14 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.19 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-motion to v9.16.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-portal to v9.8.15 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-positioning to v9.23.1 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-tabster to v9.26.17 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.2.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.26.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+
+## [9.14.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.5)
+
+Tue, 04 Aug 2026 10:12:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.14.4..@fluentui/react-popover_v9.14.5)
+
+### Patches
+
+- fix: close Popover on focus escape only when focus was inside the surface, so a popover whose focus never entered (e.g. an external input stays focused) is not dismissed when focus moves programmatically ([PR #36440](https://github.com/microsoft/fluentui/pull/36440) by petrduda@microsoft.com)
+- Bump @fluentui/react-positioning to v9.23.0 ([PR #36453](https://github.com/microsoft/fluentui/pull/36453) by beachball)
+
 ## [9.14.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.14.4)
 
-Wed, 24 Jun 2026 11:03:40 GMT 
+Wed, 24 Jun 2026 11:09:52 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.14.3..@fluentui/react-popover_v9.14.4)
 
 ### Patches

package/dist/index.d.cts

@@ -0,0 +1,338 @@
+import type { ARIAButtonResultProps } from '@fluentui/react-aria';
+import type { ARIAButtonType } from '@fluentui/react-aria';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ContextSelector } from '@fluentui/react-context-selector';
+import { FC } from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { JSXElement } from '@fluentui/react-utilities';
+import type { PortalProps } from '@fluentui/react-portal';
+import type { PositioningShorthand } from '@fluentui/react-positioning';
+import type { PositioningVirtualElement } from '@fluentui/react-positioning';
+import type { PresenceMotionSlotProps } from '@fluentui/react-motion';
+import { Provider } from 'react';
+import { ProviderProps } from 'react';
+import type * as React_2 from 'react';
+import type { SetVirtualMouseTarget } from '@fluentui/react-positioning';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { TriggerProps } from '@fluentui/react-utilities';
+
+export declare const arrowHeights: Record<PopoverSize, number>;
+
+declare type InternalPopoverSlots = {
+    surfaceMotion: NonNullable<Slot<PresenceMotionSlotProps>>;
+};
+
+/**
+ * Data attached to open/close events
+ */
+export declare type OnOpenChangeData = {
+    open: boolean;
+};
+
+/**
+ * The supported events that will trigger open/close of the menu
+ */
+export declare type OpenPopoverEvents = MouseEvent | TouchEvent | FocusEvent | React_2.FocusEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
+
+/**
+ * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
+ */
+export declare const Popover: React_2.FC<PopoverProps>;
+
+/**
+ * Context shared between Popover and its children components
+ */
+export declare type PopoverContextValue = Pick<PopoverState, 'open' | 'toggleOpen' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'withArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus' | 'inertTrapFocus' | 'inline'>;
+
+export declare type PopoverContextValues = {
+    popover: PopoverContextValue;
+};
+
+/**
+ * Popover Props
+ */
+export declare type PopoverProps = ComponentProps<Partial<PopoverSlots>> & Pick<PortalProps, 'mountNode'> & {
+    /**
+     * A popover can appear styled with brand or inverted.
+     * When not specified, the default style is used.
+     */
+    appearance?: 'brand' | 'inverted';
+    /**
+     * Can contain two children including `PopoverTrigger` and `PopoverSurface`.
+     * Alternatively can only contain `PopoverSurface` if using a custom `target`.
+     */
+    children: [JSXElement, JSXElement] | JSXElement;
+    /**
+     * Close when scroll outside of it
+     *
+     * @default false
+     */
+    closeOnScroll?: boolean;
+    /**
+     * Used to set the initial open state of the Popover in uncontrolled mode
+     *
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order
+     *
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Sets the delay for closing popover on mouse leave
+     */
+    mouseLeaveDelay?: number;
+    /**
+     * Display an arrow pointing to the target.
+     *
+     * @default false
+     */
+    withArrow?: boolean;
+    /**
+     * Call back when the component requests to change value
+     * The `open` value is used as a hint when directly controlling the component
+     */
+    onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;
+    /**
+     * Controls the opening of the Popover
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Flag to open the Popover as a context menu. Disables all other interactions
+     *
+     * @default false
+     */
+    openOnContext?: boolean;
+    /**
+     * Flag to open the Popover by hovering the trigger
+     *
+     * @default false
+     */
+    openOnHover?: boolean;
+    /**
+     * Flag to close the Popover when an iframe outside a PopoverSurface is focused
+     *
+     * @default true
+     */
+    closeOnIframeFocus?: boolean;
+    /**
+     * Configures the position of the Popover.
+     * Explore [Positioning docs](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--docs) for more options.
+     */
+    positioning?: PositioningShorthand;
+    /**
+     * Determines popover padding and arrow size
+     *
+     * @default medium
+     */
+    size?: PopoverSize;
+    /**
+     * Should trap focus
+     *
+     * @default false
+     */
+    trapFocus?: boolean;
+    /**
+     * Must be used with the `trapFocus` prop
+     * Enables older Fluent UI focus trap behavior where the user
+     * cannot tab into the window outside of the document. This is now
+     * non-standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
+     * where the focus trap involves setting outside elements inert.
+     *
+     * @deprecated this behavior is default provided now, to opt-out of it in favor of standard behavior use the `inertTrapFocus` property
+     */
+    legacyTrapFocus?: boolean;
+    /**
+     * Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)
+     * where the focus trap involves setting outside elements inert,
+     * making navigation leak from the trapped area back to the browser toolbar and vice-versa.
+     *
+     * @default false
+     */
+    inertTrapFocus?: boolean;
+    /**
+     * By default Popover focuses the first focusable element in PopoverSurface on open.
+     * Specify `disableAutoFocus` to prevent this behavior.
+     *
+     * @default false
+     */
+    unstable_disableAutoFocus?: boolean;
+};
+
+export declare const PopoverProvider: Provider<PopoverContextValue> & FC<ProviderProps<PopoverContextValue>>;
+
+/**
+ * Determines popover padding and arrow size
+ */
+export declare type PopoverSize = 'small' | 'medium' | 'large';
+
+declare type PopoverSlots = {
+    /**
+     * Slot for the surface motion animation.
+     * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).
+     */
+    surfaceMotion: Slot<PresenceMotionSlotProps>;
+};
+
+/**
+ * Popover State
+ */
+export declare type PopoverState = ComponentState<InternalPopoverSlots> & Pick<PopoverProps, 'appearance' | 'mountNode' | 'onOpenChange' | 'openOnContext' | 'openOnHover' | 'trapFocus' | 'withArrow' | 'inertTrapFocus'> & Required<Pick<PopoverProps, 'inline' | 'open'>> & Pick<PopoverProps, 'children'> & {
+    /**
+     * Ref of the pointing arrow
+     */
+    arrowRef: React_2.MutableRefObject<HTMLDivElement | null>;
+    /**
+     * Ref of the PopoverSurface
+     */
+    contentRef: React_2.MutableRefObject<HTMLElement | null>;
+    /**
+     * Anchors the popper to the mouse click for context events
+     */
+    contextTarget: PositioningVirtualElement | undefined;
+    popoverSurface: React_2.ReactElement | undefined;
+    popoverTrigger: React_2.ReactElement | undefined;
+    /**
+     * A callback to set the target of the popper to the mouse click for context events
+     */
+    setContextTarget: SetVirtualMouseTarget;
+    /**
+     * Callback to open/close the Popover
+     */
+    setOpen: (e: OpenPopoverEvents, open: boolean) => void;
+    size: NonNullable<PopoverProps['size']>;
+    /**
+     * Callback to toggle the open state of the Popover
+     */
+    toggleOpen: (e: OpenPopoverEvents) => void;
+    /**
+     * Ref of the PopoverTrigger
+     */
+    triggerRef: React_2.MutableRefObject<HTMLElement | null>;
+};
+
+/**
+ * PopoverSurface component renders react children in a positioned box
+ */
+export declare const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;
+
+export declare const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
+
+/**
+ * PopoverSurface Props
+ */
+export declare type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;
+
+/**
+ * Names of the slots in PopoverSurfaceProps
+ */
+export declare type PopoverSurfaceSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * PopoverSurface State
+ */
+export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'appearance' | 'arrowRef' | 'inline' | 'mountNode' | 'size' | 'withArrow'> & {
+    /**
+     * CSS class for the arrow element
+     */
+    arrowClassName?: string;
+};
+
+/**
+ * Wraps a trigger element as an only child and adds the necessary event handling to open a popover.
+ */
+export declare const PopoverTrigger: React_2.FC<PopoverTriggerProps>;
+
+/**
+ * Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog
+ */
+export declare type PopoverTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<Type, Props & {
+    'aria-expanded'?: 'true' | 'false';
+    ref: React_2.Ref<unknown>;
+    onMouseEnter: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
+    onMouseLeave: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
+    onContextMenu: React_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>;
+}>;
+
+/**
+ * PopoverTrigger Props
+ */
+export declare type PopoverTriggerProps = TriggerProps<PopoverTriggerChildProps> & {
+    /**
+     * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.
+     * @default false
+     */
+    disableButtonEnhancement?: boolean;
+};
+
+/**
+ * PopoverTrigger State
+ */
+export declare type PopoverTriggerState = {
+    children: React_2.ReactElement | null;
+};
+
+/**
+ * Render the final JSX of Popover
+ */
+export declare const renderPopover_unstable: (state: PopoverState, contextValues?: PopoverContextValues) => JSXElement;
+
+/**
+ * Render the final JSX of PopoverSurface
+ */
+export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSXElement;
+
+/**
+ * Render the final JSX of PopoverTrigger
+ */
+export declare const renderPopoverTrigger_unstable: (state: PopoverTriggerState) => JSXElement | null;
+
+/**
+ * Create the state required to render Popover.
+ *
+ * The returned state can be modified with hooks such as usePopoverStyles,
+ * before being passed to renderPopover_unstable.
+ *
+ * @param props - props from this instance of Popover
+ */
+export declare const usePopover_unstable: (props: PopoverProps) => PopoverState;
+
+export declare const usePopoverContext_unstable: <T>(selector: ContextSelector<PopoverContextValue, T>) => T;
+
+export declare function usePopoverContextValues_unstable(state: PopoverState): PopoverContextValues;
+
+/**
+ * Create the state required to render PopoverSurface.
+ *
+ * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,
+ * before being passed to renderPopoverSurface_unstable.
+ *
+ * @param props - props from this instance of PopoverSurface
+ * @param ref - reference to root HTMLDivElement of PopoverSurface
+ */
+export declare const usePopoverSurface_unstable: (props: PopoverSurfaceProps, ref: React_2.Ref<HTMLDivElement>) => PopoverSurfaceState;
+
+/**
+ * Apply styling to the PopoverSurface slots based on the state
+ */
+export declare const usePopoverSurfaceStyles_unstable: (state: PopoverSurfaceState) => PopoverSurfaceState;
+
+/**
+ * Create the state required to render PopoverTrigger.
+ *
+ * The returned state can be modified with hooks such as usePopoverTriggerStyles,
+ * before being passed to renderPopoverTrigger_unstable.
+ *
+ * @param props - props from this instance of PopoverTrigger
+ */
+export declare const usePopoverTrigger_unstable: (props: PopoverTriggerProps) => PopoverTriggerState;
+
+export { }

package/lib/Popover.js

@@ -1 +1 @@
-export { Popover, renderPopover_unstable, usePopover_unstable, usePopoverContextValues_unstable } from './components/Popover/index';
+export { Popover, renderPopover_unstable, usePopover_unstable, usePopoverContextValues_unstable } from "./components/Popover/index.js";

package/lib/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Popover.ts"],"sourcesContent":["export type {\n  OnOpenChangeData,\n  OpenPopoverEvents,\n  PopoverContextValues,\n  PopoverProps,\n  PopoverSize,\n  PopoverState,\n} from './components/Popover/index';\nexport {\n  Popover,\n  renderPopover_unstable,\n  usePopover_unstable,\n  usePopoverContextValues_unstable,\n} from './components/Popover/index';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","usePopoverContextValues_unstable"],"mappings":"AAQA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,mBAAmB,EACnBC,gCAAgC,QAC3B,6BAA6B"}
+{"version":3,"sources":["../src/Popover.ts"],"sourcesContent":["export type {\n  OnOpenChangeData,\n  OpenPopoverEvents,\n  PopoverContextValues,\n  PopoverProps,\n  PopoverSize,\n  PopoverState,\n} from './components/Popover/index';\nexport {\n  Popover,\n  renderPopover_unstable,\n  usePopover_unstable,\n  usePopoverContextValues_unstable,\n} from './components/Popover/index';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","usePopoverContextValues_unstable"],"mappings":"AAQA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,mBAAmB,EACnBC,gCAAgC,QAC3B,gCAA6B"}

package/lib/PopoverSurface.js

@@ -1 +1 @@
-export { PopoverSurface, arrowHeights, popoverSurfaceClassNames, renderPopoverSurface_unstable, usePopoverSurfaceStyles_unstable, usePopoverSurface_unstable } from './components/PopoverSurface/index';
+export { PopoverSurface, arrowHeights, popoverSurfaceClassNames, renderPopoverSurface_unstable, usePopoverSurfaceStyles_unstable, usePopoverSurface_unstable } from "./components/PopoverSurface/index.js";

package/lib/PopoverSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/PopoverSurface.ts"],"sourcesContent":["export type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './components/PopoverSurface/index';\nexport {\n  PopoverSurface,\n  arrowHeights,\n  popoverSurfaceClassNames,\n  renderPopoverSurface_unstable,\n  usePopoverSurfaceStyles_unstable,\n  usePopoverSurface_unstable,\n} from './components/PopoverSurface/index';\n"],"names":["PopoverSurface","arrowHeights","popoverSurfaceClassNames","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","usePopoverSurface_unstable"],"mappings":"AACA,SACEA,cAAc,EACdC,YAAY,EACZC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,oCAAoC"}
+{"version":3,"sources":["../src/PopoverSurface.ts"],"sourcesContent":["export type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './components/PopoverSurface/index';\nexport {\n  PopoverSurface,\n  arrowHeights,\n  popoverSurfaceClassNames,\n  renderPopoverSurface_unstable,\n  usePopoverSurfaceStyles_unstable,\n  usePopoverSurface_unstable,\n} from './components/PopoverSurface/index';\n"],"names":["PopoverSurface","arrowHeights","popoverSurfaceClassNames","renderPopoverSurface_unstable","usePopoverSurfaceStyles_unstable","usePopoverSurface_unstable"],"mappings":"AACA,SACEA,cAAc,EACdC,YAAY,EACZC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,uCAAoC"}

package/lib/PopoverTrigger.js

@@ -1 +1 @@
-export { PopoverTrigger, renderPopoverTrigger_unstable, usePopoverTrigger_unstable } from './components/PopoverTrigger/index';
+export { PopoverTrigger, renderPopoverTrigger_unstable, usePopoverTrigger_unstable } from "./components/PopoverTrigger/index.js";

package/lib/PopoverTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/PopoverTrigger.ts"],"sourcesContent":["export type {\n  PopoverTriggerChildProps,\n  PopoverTriggerProps,\n  PopoverTriggerState,\n} from './components/PopoverTrigger/index';\nexport {\n  PopoverTrigger,\n  renderPopoverTrigger_unstable,\n  usePopoverTrigger_unstable,\n} from './components/PopoverTrigger/index';\n"],"names":["PopoverTrigger","renderPopoverTrigger_unstable","usePopoverTrigger_unstable"],"mappings":"AAKA,SACEA,cAAc,EACdC,6BAA6B,EAC7BC,0BAA0B,QACrB,oCAAoC"}
+{"version":3,"sources":["../src/PopoverTrigger.ts"],"sourcesContent":["export type {\n  PopoverTriggerChildProps,\n  PopoverTriggerProps,\n  PopoverTriggerState,\n} from './components/PopoverTrigger/index';\nexport {\n  PopoverTrigger,\n  renderPopoverTrigger_unstable,\n  usePopoverTrigger_unstable,\n} from './components/PopoverTrigger/index';\n"],"names":["PopoverTrigger","renderPopoverTrigger_unstable","usePopoverTrigger_unstable"],"mappings":"AAKA,SACEA,cAAc,EACdC,6BAA6B,EAC7BC,0BAA0B,QACrB,uCAAoC"}

package/lib/components/Popover/Popover.js

@@ -1,7 +1,7 @@
 'use client';
-import { usePopover_unstable } from './usePopover';
-import { usePopoverContextValues_unstable } from './usePopoverContextValues';
-import { renderPopover_unstable } from './renderPopover';
+import { usePopover_unstable } from "./usePopover.js";
+import { usePopoverContextValues_unstable } from "./usePopoverContextValues.js";
+import { renderPopover_unstable } from "./renderPopover.js";
 /**
  * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
  */ export const Popover = (props)=>{

package/lib/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { usePopoverContextValues_unstable } from './usePopoverContextValues';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n  const state = usePopover_unstable(props);\n  const contextValues = usePopoverContextValues_unstable(state);\n\n  return renderPopover_unstable(state, contextValues);\n};\n\nPopover.displayName = 'Popover';\n"],"names":["usePopover_unstable","usePopoverContextValues_unstable","renderPopover_unstable","Popover","props","state","contextValues","displayName"],"mappings":"AAAA;AAGA,SAASA,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,sBAAsB,QAAQ,kBAAkB;AAGzD;;CAEC,GACD,OAAO,MAAMC,UAAkCC,CAAAA;IAC7C,MAAMC,QAAQL,oBAAoBI;IAClC,MAAME,gBAAgBL,iCAAiCI;IAEvD,OAAOH,uBAAuBG,OAAOC;AACvC,EAAE;AAEFH,QAAQI,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { usePopoverContextValues_unstable } from './usePopoverContextValues';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n  const state = usePopover_unstable(props);\n  const contextValues = usePopoverContextValues_unstable(state);\n\n  return renderPopover_unstable(state, contextValues);\n};\n\nPopover.displayName = 'Popover';\n"],"names":["usePopover_unstable","usePopoverContextValues_unstable","renderPopover_unstable","Popover","props","state","contextValues","displayName"],"mappings":"AAAA;AAGA,SAASA,mBAAmB,QAAQ,kBAAe;AACnD,SAASC,gCAAgC,QAAQ,+BAA4B;AAC7E,SAASC,sBAAsB,QAAQ,qBAAkB;AAGzD;;CAEC,GACD,OAAO,MAAMC,UAAkCC,CAAAA;IAC7C,MAAMC,QAAQL,oBAAoBI;IAClC,MAAME,gBAAgBL,iCAAiCI;IAEvD,OAAOH,uBAAuBG,OAAOC;AACvC,EAAE;AAEFH,QAAQI,WAAW,GAAG"}

package/lib/components/Popover/PopoverSurfaceMotion.js

@@ -1,6 +1,6 @@
-import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';
-import { fadeAtom, slideAtom } from '@fluentui/react-motion-components-preview';
-import { POSITIONING_SLIDE_DIRECTION_VAR_X as slideDirectionVarX, POSITIONING_SLIDE_DIRECTION_VAR_Y as slideDirectionVarY } from '@fluentui/react-positioning';
+import { createPresenceComponent, motionTokens } from "@fluentui/react-motion";
+import { fadeAtom, slideAtom } from "@fluentui/react-motion-components-preview";
+import { POSITIONING_SLIDE_DIRECTION_VAR_X as slideDirectionVarX, POSITIONING_SLIDE_DIRECTION_VAR_Y as slideDirectionVarY } from "@fluentui/react-positioning";
 // Shared timing constants for the enter animation.
 const duration = motionTokens.durationSlower;
 const easing = motionTokens.curveDecelerateMid;

package/lib/components/Popover/index.js

@@ -1,4 +1,4 @@
-export { Popover } from './Popover';
-export { renderPopover_unstable } from './renderPopover';
-export { usePopover_unstable } from './usePopover';
-export { usePopoverContextValues_unstable } from './usePopoverContextValues';
+export { Popover } from "./Popover.js";
+export { renderPopover_unstable } from "./renderPopover.js";
+export { usePopover_unstable } from "./usePopover.js";
+export { usePopoverContextValues_unstable } from "./usePopoverContextValues.js";

package/lib/components/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Popover/index.ts"],"sourcesContent":["export { Popover } from './Popover';\nexport type { OnOpenChangeData, OpenPopoverEvents, PopoverProps, PopoverSize, PopoverState } from './Popover.types';\nexport { renderPopover_unstable } from './renderPopover';\nexport { usePopover_unstable } from './usePopover';\nexport { usePopoverContextValues_unstable } from './usePopoverContextValues';\nexport type { PopoverContextValues } from './usePopoverContextValues';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","usePopoverContextValues_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gCAAgC,QAAQ,4BAA4B"}
+{"version":3,"sources":["../src/components/Popover/index.ts"],"sourcesContent":["export { Popover } from './Popover';\nexport type { OnOpenChangeData, OpenPopoverEvents, PopoverProps, PopoverSize, PopoverState } from './Popover.types';\nexport { renderPopover_unstable } from './renderPopover';\nexport { usePopover_unstable } from './usePopover';\nexport { usePopoverContextValues_unstable } from './usePopoverContextValues';\nexport type { PopoverContextValues } from './usePopoverContextValues';\n"],"names":["Popover","renderPopover_unstable","usePopover_unstable","usePopoverContextValues_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,eAAY;AAEpC,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,mBAAmB,QAAQ,kBAAe;AACnD,SAASC,gCAAgC,QAAQ,+BAA4B"}

package/lib/components/Popover/renderPopover.js

@@ -1,8 +1,8 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import * as React from 'react';
-import { assertSlots } from '@fluentui/react-utilities';
-import { MotionRefForwarder } from '@fluentui/react-motion';
-import { PopoverContext, popoverContextDefaultValue } from '../../popoverContext';
+import * as React from "react";
+import { assertSlots } from "@fluentui/react-utilities";
+import { MotionRefForwarder } from "@fluentui/react-motion";
+import { PopoverContext, popoverContextDefaultValue } from "../../popoverContext.js";
 /**
  * Render the final JSX of Popover
  */ export const renderPopover_unstable = (state, contextValues)=>{

package/lib/components/Popover/renderPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Popover/renderPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { assertSlots, type JSXElement } from '@fluentui/react-utilities';\nimport { MotionRefForwarder } from '@fluentui/react-motion';\nimport { PopoverContext, popoverContextDefaultValue } from '../../popoverContext';\nimport type { InternalPopoverSlots, PopoverState } from './Popover.types';\nimport type { PopoverContextValues } from './usePopoverContextValues';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState, contextValues?: PopoverContextValues): JSXElement => {\n  assertSlots<InternalPopoverSlots>(state);\n\n  return (\n    <PopoverContext.Provider value={contextValues?.popover ?? popoverContextDefaultValue}>\n      {state.popoverTrigger}\n      {state.popoverSurface && (\n        <state.surfaceMotion>\n          <MotionRefForwarder>\n            {/* Casting here as content should be equivalent to <PopoverSurface /> */}\n            {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n            {state.popoverSurface as React.ReactElement}\n          </MotionRefForwarder>\n        </state.surfaceMotion>\n      )}\n    </PopoverContext.Provider>\n  );\n};\n"],"names":["React","assertSlots","MotionRefForwarder","PopoverContext","popoverContextDefaultValue","renderPopover_unstable","state","contextValues","Provider","value","popover","popoverTrigger","popoverSurface","surfaceMotion"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAyB,4BAA4B;AACzE,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,uBAAuB;AAIlF;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC;IAC1DN,YAAkCK;QAGAC;IADlC,qBACE,MAACJ,eAAeK,QAAQ;QAACC,OAAOF,CAAAA,yBAAAA,0BAAAA,oCAAAA,cAAeG,OAAO,cAAtBH,oCAAAA,yBAA0BH;;YACvDE,MAAMK,cAAc;YACpBL,MAAMM,cAAc,kBACnB,KAACN,MAAMO,aAAa;0BAClB,cAAA,KAACX;8BAGEI,MAAMM,cAAc;;;;;AAMjC,EAAE"}
+{"version":3,"sources":["../src/components/Popover/renderPopover.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\nimport { assertSlots, type JSXElement } from '@fluentui/react-utilities';\nimport { MotionRefForwarder } from '@fluentui/react-motion';\nimport { PopoverContext, popoverContextDefaultValue } from '../../popoverContext';\nimport type { InternalPopoverSlots, PopoverState } from './Popover.types';\nimport type { PopoverContextValues } from './usePopoverContextValues';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState, contextValues?: PopoverContextValues): JSXElement => {\n  assertSlots<InternalPopoverSlots>(state);\n\n  return (\n    <PopoverContext.Provider value={contextValues?.popover ?? popoverContextDefaultValue}>\n      {state.popoverTrigger}\n      {state.popoverSurface && (\n        <state.surfaceMotion>\n          <MotionRefForwarder>\n            {/* Casting here as content should be equivalent to <PopoverSurface /> */}\n            {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n            {state.popoverSurface as React.ReactElement}\n          </MotionRefForwarder>\n        </state.surfaceMotion>\n      )}\n    </PopoverContext.Provider>\n  );\n};\n"],"names":["React","assertSlots","MotionRefForwarder","PopoverContext","popoverContextDefaultValue","renderPopover_unstable","state","contextValues","Provider","value","popover","popoverTrigger","popoverSurface","surfaceMotion"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAyB,4BAA4B;AACzE,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,0BAAuB;AAIlF;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC;IAC1DN,YAAkCK;QAGAC;IADlC,qBACE,MAACJ,eAAeK,QAAQ;QAACC,OAAOF,CAAAA,yBAAAA,0BAAAA,oCAAAA,cAAeG,OAAO,cAAtBH,oCAAAA,yBAA0BH;;YACvDE,MAAMK,cAAc;YACpBL,MAAMM,cAAc,kBACnB,KAACN,MAAMO,aAAa;0BAClB,cAAA,KAACX;8BAGEI,MAAMM,cAAc;;;;;AAMjC,EAAE"}

package/lib/components/Popover/usePopover.js

@@ -1,13 +1,13 @@
 'use client';
-import * as React from 'react';
-import { useControllableState, useEventCallback, useOnClickOutside, useOnScrollOutside, elementContains, useTimeout } from '@fluentui/react-utilities';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { usePositioning, resolvePositioningShorthand, mergeArrowOffset, usePositioningMouseTarget, usePositioningSlideDirection } from '@fluentui/react-positioning';
-import { useFocusFinders, useActivateModal } from '@fluentui/react-tabster';
-import { arrowHeights } from '../PopoverSurface/index';
-import { popoverSurfaceBorderRadius } from './constants';
-import { presenceMotionSlot } from '@fluentui/react-motion';
-import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
+import * as React from "react";
+import { useControllableState, useEventCallback, useOnClickOutside, useOnScrollOutside, elementContains, useTimeout } from "@fluentui/react-utilities";
+import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
+import { usePositioning, resolvePositioningShorthand, mergeArrowOffset, usePositioningMouseTarget, usePositioningSlideDirection } from "@fluentui/react-positioning";
+import { useFocusFinders, useActivateModal } from "@fluentui/react-tabster";
+import { arrowHeights } from "../PopoverSurface/index.js";
+import { popoverSurfaceBorderRadius } from "./constants.js";
+import { presenceMotionSlot } from "@fluentui/react-motion";
+import { PopoverSurfaceMotion } from "./PopoverSurfaceMotion.js";
 /**
  * Create the state required to render Popover.
  *
@@ -104,10 +104,12 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
         disabled: !open || !closeOnScroll
     });
     var _props_closeOnFocusOutside;
-    // When trapFocus is enabled, close the popover if focus is programmatically moved outside
-    // (e.g. via element.focus()), which doesn't trigger click or scroll dismiss handlers.
+    // When trapFocus is enabled, dismiss the popover only on a genuine inside -> outside focus
+    // transition. Focus that was never inside - e.g. a consumer keeping focus on an external element
+    // via `unstable_disableAutoFocus` - must not dismiss it on an outside -> outside focus change.
     // Internal `closeOnFocusOutside` prop allows consumers to opt out during gradual rollout.
     const closeOnFocusOutside = (_props_closeOnFocusOutside = props.closeOnFocusOutside) !== null && _props_closeOnFocusOutside !== void 0 ? _props_closeOnFocusOutside : true;
+    const focusWasInsideRef = React.useRef(false);
     const closeOnFocusOutCallback = useEventCallback((ev)=>{
         var _ev_composedPath_;
         const target = (_ev_composedPath_ = ev.composedPath()[0]) !== null && _ev_composedPath_ !== void 0 ? _ev_composedPath_ : ev.target;
@@ -117,8 +119,14 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
         if (!contentElement) {
             return;
         }
-        const isOutside = !elementContains(contentElement, target) && !elementContains(triggerElement, target);
-        if (isOutside) {
+        const isInside = elementContains(contentElement, target) || elementContains(triggerElement, target);
+        if (isInside) {
+            focusWasInsideRef.current = true;
+            return;
+        }
+        // Only dismiss if focus previously lived inside the popover.
+        if (focusWasInsideRef.current) {
+            focusWasInsideRef.current = false;
             setOpen(ev, false);
         }
     });
@@ -126,6 +134,7 @@ import { PopoverSurfaceMotion } from './PopoverSurfaceMotion';
         if (!open || !props.trapFocus || !closeOnFocusOutside) {
             return;
         }
+        focusWasInsideRef.current = false;
         targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('focusin', closeOnFocusOutCallback, true);
         return ()=>{
             targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('focusin', closeOnFocusOutCallback, true);