@fluentui/react-popover 9.3.6 → 9.4.0

package/CHANGELOG.json

@@ -2,7 +2,66 @@
   "name": "@fluentui/react-popover",
   "entries": [
     {
-      "date": "Wed, 04 Jan 2023 01:35:37 GMT",
+      "date": "Mon, 09 Jan 2023 14:31:45 GMT",
+      "tag": "@fluentui/react-popover_v9.4.0",
+      "version": "9.4.0",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-popover",
+            "commit": "abae9f7a10d544d8d6b530b974fff235cfd2f956",
+            "comment": "chore: introduce more barrel file api within /scripts"
+          }
+        ],
+        "minor": [
+          {
+            "author": "yuanboxue@microsoft.com",
+            "package": "@fluentui/react-popover",
+            "commit": "46dc6befc9db655c2763908d91c7c603f1063af4",
+            "comment": "feat: add new prop unstable_disableAutoFocus on Popover"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-popover",
+            "comment": "Bump @fluentui/react-aria to v9.3.5",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-popover",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.5",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-popover",
+            "comment": "Bump @fluentui/react-portal to v9.1.0",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-popover",
+            "comment": "Bump @fluentui/react-positioning to v9.3.7",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-popover",
+            "comment": "Bump @fluentui/react-tabster to v9.3.6",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-popover",
+            "comment": "Bump @fluentui/react-utilities to v9.4.0",
+            "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 Jan 2023 01:40:16 GMT",
       "tag": "@fluentui/react-popover_v9.3.6",
       "version": "9.3.6",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-popover
 
-This log was last generated on Wed, 04 Jan 2023 01:35:37 GMT and should not be manually modified.
+This log was last generated on Mon, 09 Jan 2023 14:31:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.4.0)
+
+Mon, 09 Jan 2023 14:31:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.3.6..@fluentui/react-popover_v9.4.0)
+
+### Minor changes
+
+- feat: add new prop unstable_disableAutoFocus on Popover ([PR #26141](https://github.com/microsoft/fluentui/pull/26141) by yuanboxue@microsoft.com)
+- Bump @fluentui/react-aria to v9.3.5 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.5 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-portal to v9.1.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-positioning to v9.3.7 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-tabster to v9.3.6 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+- Bump @fluentui/react-utilities to v9.4.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
+
 ## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.3.6)
 
-Wed, 04 Jan 2023 01:35:37 GMT 
+Wed, 04 Jan 2023 01:40:16 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.3.5..@fluentui/react-popover_v9.3.6)
 
 ### Patches

package/dist/index.d.ts

@@ -134,6 +134,13 @@ export declare type PopoverProps = Pick<PortalProps, 'mountNode'> & {
      * @default false
      */
     legacyTrapFocus?: UseModalAttributesOptions['legacyTrapFocus'];
+    /**
+     * 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>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type {\n  PositioningVirtualElement,\n  PositioningShorthand,\n  SetVirtualMouseTarget,\n} from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { UseModalAttributesOptions } from '@fluentui/react-tabster';\n\n/**\n * Determines popover padding and arrow size\n */\nexport type PopoverSize = 'small' | 'medium' | 'large';\n\n/**\n * Popover Props\n */\nexport type PopoverProps = Pick<PortalProps, 'mountNode'> & {\n  /**\n   * A popover can appear styled with brand or inverted.\n   * When not specified, the default style is used.\n   */\n  appearance?: 'brand' | 'inverted';\n\n  /**\n   * Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.\n   * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.\n   */\n  children: [JSX.Element, JSX.Element] | JSX.Element;\n\n  /**\n   * Close when scroll outside of it\n   *\n   * @default false\n   */\n  closeOnScroll?: boolean;\n\n  /**\n   * Used to set the initial open state of the Popover in uncontrolled mode\n   *\n   * @default false\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order\n   *\n   * @default false\n   */\n  inline?: boolean;\n\n  /**\n   * Sets the delay for closing popover on mouse leave\n   */\n  mouseLeaveDelay?: number;\n\n  /**\n   * Display an arrow pointing to the target.\n   *\n   * @default false\n   */\n  withArrow?: boolean;\n\n  /**\n   * Call back when the component requests to change value\n   * The `open` value is used as a hint when directly controlling the component\n   */\n  onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;\n\n  /**\n   * Controls the opening of the Popover\n   *\n   * @default false\n   */\n  open?: boolean;\n\n  /**\n   * Flag to open the Popover as a context menu. Disables all other interactions\n   *\n   * @default false\n   */\n  openOnContext?: boolean;\n\n  /**\n   * Flag to open the Popover by hovering the trigger\n   *\n   * @default false\n   */\n  openOnHover?: boolean;\n\n  /**\n   * Configures the position of the Popover\n   */\n  positioning?: PositioningShorthand;\n\n  /**\n   * Determines popover padding and arrow size\n   *\n   * @default medium\n   */\n  size?: PopoverSize;\n\n  /**\n   * Should trap focus\n   *\n   * @default false\n   */\n  trapFocus?: UseModalAttributesOptions['trapFocus'];\n\n  /**\n   * Must be used with the `trapFocus` prop\n   * Enables older Fluent UI focus trap behavior where the user\n   * cannot tab into the window outside of the document. This is now\n   * non-standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n   * where the focus trap involves setting outside elements inert.\n   *\n   * @default false\n   */\n  legacyTrapFocus?: UseModalAttributesOptions['legacyTrapFocus'];\n};\n\n/**\n * Popover State\n */\nexport type PopoverState = Pick<\n  PopoverProps,\n  | 'appearance'\n  | 'mountNode'\n  | 'onOpenChange'\n  | 'openOnContext'\n  | 'openOnHover'\n  | 'trapFocus'\n  | 'withArrow'\n  | 'legacyTrapFocus'\n> &\n  Required<Pick<PopoverProps, 'inline' | 'open'>> &\n  Pick<PopoverProps, 'children'> & {\n    /**\n     * Ref of the pointing arrow\n     */\n    arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Ref of the PopoverSurface\n     */\n    contentRef: React.MutableRefObject<HTMLElement | null>;\n\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget: PositioningVirtualElement | undefined;\n\n    popoverSurface: React.ReactElement | undefined;\n\n    popoverTrigger: React.ReactElement | undefined;\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: SetVirtualMouseTarget;\n\n    /**\n     * Callback to open/close the Popover\n     */\n    setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n\n    size: NonNullable<PopoverProps['size']>;\n\n    /**\n     * Callback to toggle the open state of the Popover\n     */\n    toggleOpen: (e: OpenPopoverEvents) => void;\n\n    /**\n     * Ref of the PopoverTrigger\n     */\n    triggerRef: React.MutableRefObject<HTMLElement | null>;\n  };\n\n/**\n * Data attached to open/close events\n */\nexport type OnOpenChangeData = { open: boolean };\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n  | MouseEvent\n  | TouchEvent\n  | React.FocusEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.MouseEvent<HTMLElement>;\n"]}
+{"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type {\n  PositioningVirtualElement,\n  PositioningShorthand,\n  SetVirtualMouseTarget,\n} from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { UseModalAttributesOptions } from '@fluentui/react-tabster';\n\n/**\n * Determines popover padding and arrow size\n */\nexport type PopoverSize = 'small' | 'medium' | 'large';\n\n/**\n * Popover Props\n */\nexport type PopoverProps = Pick<PortalProps, 'mountNode'> & {\n  /**\n   * A popover can appear styled with brand or inverted.\n   * When not specified, the default style is used.\n   */\n  appearance?: 'brand' | 'inverted';\n\n  /**\n   * Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.\n   * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.\n   */\n  children: [JSX.Element, JSX.Element] | JSX.Element;\n\n  /**\n   * Close when scroll outside of it\n   *\n   * @default false\n   */\n  closeOnScroll?: boolean;\n\n  /**\n   * Used to set the initial open state of the Popover in uncontrolled mode\n   *\n   * @default false\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order\n   *\n   * @default false\n   */\n  inline?: boolean;\n\n  /**\n   * Sets the delay for closing popover on mouse leave\n   */\n  mouseLeaveDelay?: number;\n\n  /**\n   * Display an arrow pointing to the target.\n   *\n   * @default false\n   */\n  withArrow?: boolean;\n\n  /**\n   * Call back when the component requests to change value\n   * The `open` value is used as a hint when directly controlling the component\n   */\n  onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;\n\n  /**\n   * Controls the opening of the Popover\n   *\n   * @default false\n   */\n  open?: boolean;\n\n  /**\n   * Flag to open the Popover as a context menu. Disables all other interactions\n   *\n   * @default false\n   */\n  openOnContext?: boolean;\n\n  /**\n   * Flag to open the Popover by hovering the trigger\n   *\n   * @default false\n   */\n  openOnHover?: boolean;\n\n  /**\n   * Configures the position of the Popover\n   */\n  positioning?: PositioningShorthand;\n\n  /**\n   * Determines popover padding and arrow size\n   *\n   * @default medium\n   */\n  size?: PopoverSize;\n\n  /**\n   * Should trap focus\n   *\n   * @default false\n   */\n  trapFocus?: UseModalAttributesOptions['trapFocus'];\n\n  /**\n   * Must be used with the `trapFocus` prop\n   * Enables older Fluent UI focus trap behavior where the user\n   * cannot tab into the window outside of the document. This is now\n   * non-standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n   * where the focus trap involves setting outside elements inert.\n   *\n   * @default false\n   */\n  legacyTrapFocus?: UseModalAttributesOptions['legacyTrapFocus'];\n\n  /**\n   * By default Popover focuses the first focusable element in PopoverSurface on open.\n   * Specify `disableAutoFocus` to prevent this behavior.\n   *\n   * @default false\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_disableAutoFocus?: boolean;\n};\n\n/**\n * Popover State\n */\nexport type PopoverState = Pick<\n  PopoverProps,\n  | 'appearance'\n  | 'mountNode'\n  | 'onOpenChange'\n  | 'openOnContext'\n  | 'openOnHover'\n  | 'trapFocus'\n  | 'withArrow'\n  | 'legacyTrapFocus'\n> &\n  Required<Pick<PopoverProps, 'inline' | 'open'>> &\n  Pick<PopoverProps, 'children'> & {\n    /**\n     * Ref of the pointing arrow\n     */\n    arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Ref of the PopoverSurface\n     */\n    contentRef: React.MutableRefObject<HTMLElement | null>;\n\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget: PositioningVirtualElement | undefined;\n\n    popoverSurface: React.ReactElement | undefined;\n\n    popoverTrigger: React.ReactElement | undefined;\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: SetVirtualMouseTarget;\n\n    /**\n     * Callback to open/close the Popover\n     */\n    setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n\n    size: NonNullable<PopoverProps['size']>;\n\n    /**\n     * Callback to toggle the open state of the Popover\n     */\n    toggleOpen: (e: OpenPopoverEvents) => void;\n\n    /**\n     * Ref of the PopoverTrigger\n     */\n    triggerRef: React.MutableRefObject<HTMLElement | null>;\n  };\n\n/**\n * Data attached to open/close events\n */\nexport type OnOpenChangeData = { open: boolean };\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n  | MouseEvent\n  | TouchEvent\n  | React.FocusEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.MouseEvent<HTMLElement>;\n"]}

package/lib/components/Popover/usePopover.js

@@ -97,12 +97,15 @@ export const usePopover_unstable = props => {
   } = useFocusFinders();
   React.useEffect(() => {
     var _a;
+    if (props.unstable_disableAutoFocus) {
+      return;
+    }
     if (open && positioningRefs.contentRef.current) {
       const containerTabIndex = (_a = positioningRefs.contentRef.current.getAttribute('tabIndex')) !== null && _a !== void 0 ? _a : undefined;
       const firstFocusable = isNaN(containerTabIndex) ? findFirstFocusable(positioningRefs.contentRef.current) : positioningRefs.contentRef.current;
       firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
     }
-  }, [findFirstFocusable, open, positioningRefs.contentRef]);
+  }, [findFirstFocusable, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);
   return {
     ...initialState,
     ...positioningRefs,

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

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","elementContains","useFocusFinders","arrowHeights","popoverSurfaceBorderRadius","usePopover_unstable","props","contextTarget","setContextTarget","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeoutRef","useRef","setOpen","e","shouldOpen","clearTimeout","current","Event","persist","type","setTimeout","mouseLeaveDelay","useEffect","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","closeOnScroll","openOnContext","findFirstFocusable","containerTabIndex","getAttribute","firstFocusable","isNaN","focus","inline","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","target","positioning","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/usePopover.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useControllableState,\n  useEventCallback,\n  useOnClickOutside,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  usePositioning,\n  resolvePositioningShorthand,\n  mergeArrowOffset,\n  usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n  const initialState = {\n    size: 'medium',\n    contextTarget,\n    setContextTarget,\n    ...props,\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at most two children');\n    }\n  }\n\n  let popoverTrigger: React.ReactElement | undefined = undefined;\n  let popoverSurface: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    popoverTrigger = children[0];\n    popoverSurface = children[1];\n  } else if (children.length === 1) {\n    popoverSurface = children[0];\n  }\n\n  const [open, setOpenState] = useOpenState(initialState);\n\n  const setOpenTimeoutRef = React.useRef(0);\n\n  const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n    clearTimeout(setOpenTimeoutRef.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave') {\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeoutRef.current = setTimeout(() => {\n        setOpenState(e, shouldOpen);\n      }, props.mouseLeaveDelay ?? 500);\n    } else {\n      setOpenState(e, shouldOpen);\n    }\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeoutRef.current);\n    };\n  }, []);\n\n  const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n    e => {\n      setOpen(e, !open);\n    },\n    [setOpen, open],\n  );\n\n  const positioningRefs = usePopoverRefs(initialState);\n\n  const { targetDocument } = useFluent();\n  useOnClickOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open,\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open || !closeOnScroll,\n  });\n\n  const { findFirstFocusable } = useFocusFinders();\n\n  React.useEffect(() => {\n    if (open && positioningRefs.contentRef.current) {\n      const containerTabIndex = positioningRefs.contentRef.current.getAttribute('tabIndex') ?? undefined;\n      const firstFocusable = isNaN(containerTabIndex)\n        ? findFirstFocusable(positioningRefs.contentRef.current)\n        : positioningRefs.contentRef.current;\n      firstFocusable?.focus();\n    }\n  }, [findFirstFocusable, open, positioningRefs.contentRef]);\n\n  return {\n    ...initialState,\n    ...positioningRefs,\n    popoverTrigger,\n    popoverSurface,\n    open,\n    setOpen,\n    toggleOpen,\n    setContextTarget,\n    contextTarget,\n    inline: props.inline ?? false,\n  };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n  state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n  const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n  state.open = open !== undefined ? open : state.open;\n  const setContextTarget = state.setContextTarget;\n\n  const setOpen = React.useCallback(\n    (e: OpenPopoverEvents, shouldOpen: boolean) => {\n      if (shouldOpen && e.type === 'contextmenu') {\n        setContextTarget(e as React.MouseEvent);\n      }\n\n      if (!shouldOpen) {\n        setContextTarget(undefined);\n      }\n\n      setOpenState(shouldOpen);\n      onOpenChange?.(e, { open: shouldOpen });\n    },\n    [setOpenState, onOpenChange, setContextTarget],\n  );\n\n  return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n  state: Pick<PopoverState, 'size' | 'contextTarget'> &\n    Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n  const positioningOptions = {\n    position: 'above' as const,\n    align: 'center' as const,\n    arrowPadding: 2 * popoverSurfaceBorderRadius,\n    target: state.openOnContext ? state.contextTarget : undefined,\n    ...resolvePositioningShorthand(state.positioning),\n  };\n\n  // no reason to render arrow when covering the target\n  if (positioningOptions.coverTarget) {\n    state.withArrow = false;\n  }\n\n  if (state.withArrow) {\n    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n  }\n\n  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n  return {\n    triggerRef,\n    contentRef,\n    arrowRef,\n  } as const;\n}\n"]}
+{"version":3,"mappings":"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","names":["React","useControllableState","useEventCallback","useOnClickOutside","useOnScrollOutside","useFluent_unstable","useFluent","usePositioning","resolvePositioningShorthand","mergeArrowOffset","usePositioningMouseTarget","elementContains","useFocusFinders","arrowHeights","popoverSurfaceBorderRadius","usePopover_unstable","props","contextTarget","setContextTarget","initialState","size","children","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeoutRef","useRef","setOpen","e","shouldOpen","clearTimeout","current","Event","persist","type","setTimeout","mouseLeaveDelay","useEffect","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","contains","element","callback","ev","refs","triggerRef","contentRef","disabled","closeOnScroll","openOnContext","findFirstFocusable","unstable_disableAutoFocus","containerTabIndex","getAttribute","firstFocusable","isNaN","focus","inline","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","target","positioning","coverTarget","withArrow","offset","targetRef","containerRef","arrowRef"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/usePopover.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useControllableState,\n  useEventCallback,\n  useOnClickOutside,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  usePositioning,\n  resolvePositioningShorthand,\n  mergeArrowOffset,\n  usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n  const initialState = {\n    size: 'medium',\n    contextTarget,\n    setContextTarget,\n    ...props,\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at most two children');\n    }\n  }\n\n  let popoverTrigger: React.ReactElement | undefined = undefined;\n  let popoverSurface: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    popoverTrigger = children[0];\n    popoverSurface = children[1];\n  } else if (children.length === 1) {\n    popoverSurface = children[0];\n  }\n\n  const [open, setOpenState] = useOpenState(initialState);\n\n  const setOpenTimeoutRef = React.useRef(0);\n\n  const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n    clearTimeout(setOpenTimeoutRef.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave') {\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeoutRef.current = setTimeout(() => {\n        setOpenState(e, shouldOpen);\n      }, props.mouseLeaveDelay ?? 500);\n    } else {\n      setOpenState(e, shouldOpen);\n    }\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeoutRef.current);\n    };\n  }, []);\n\n  const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n    e => {\n      setOpen(e, !open);\n    },\n    [setOpen, open],\n  );\n\n  const positioningRefs = usePopoverRefs(initialState);\n\n  const { targetDocument } = useFluent();\n  useOnClickOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open,\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open || !closeOnScroll,\n  });\n\n  const { findFirstFocusable } = useFocusFinders();\n\n  React.useEffect(() => {\n    if (props.unstable_disableAutoFocus) {\n      return;\n    }\n\n    if (open && positioningRefs.contentRef.current) {\n      const containerTabIndex = positioningRefs.contentRef.current.getAttribute('tabIndex') ?? undefined;\n      const firstFocusable = isNaN(containerTabIndex)\n        ? findFirstFocusable(positioningRefs.contentRef.current)\n        : positioningRefs.contentRef.current;\n      firstFocusable?.focus();\n    }\n  }, [findFirstFocusable, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\n\n  return {\n    ...initialState,\n    ...positioningRefs,\n    popoverTrigger,\n    popoverSurface,\n    open,\n    setOpen,\n    toggleOpen,\n    setContextTarget,\n    contextTarget,\n    inline: props.inline ?? false,\n  };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n  state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n  const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n  state.open = open !== undefined ? open : state.open;\n  const setContextTarget = state.setContextTarget;\n\n  const setOpen = React.useCallback(\n    (e: OpenPopoverEvents, shouldOpen: boolean) => {\n      if (shouldOpen && e.type === 'contextmenu') {\n        setContextTarget(e as React.MouseEvent);\n      }\n\n      if (!shouldOpen) {\n        setContextTarget(undefined);\n      }\n\n      setOpenState(shouldOpen);\n      onOpenChange?.(e, { open: shouldOpen });\n    },\n    [setOpenState, onOpenChange, setContextTarget],\n  );\n\n  return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n  state: Pick<PopoverState, 'size' | 'contextTarget'> &\n    Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n  const positioningOptions = {\n    position: 'above' as const,\n    align: 'center' as const,\n    arrowPadding: 2 * popoverSurfaceBorderRadius,\n    target: state.openOnContext ? state.contextTarget : undefined,\n    ...resolvePositioningShorthand(state.positioning),\n  };\n\n  // no reason to render arrow when covering the target\n  if (positioningOptions.coverTarget) {\n    state.withArrow = false;\n  }\n\n  if (state.withArrow) {\n    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n  }\n\n  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n  return {\n    triggerRef,\n    contentRef,\n    arrowRef,\n  } as const;\n}\n"]}

package/lib-amd/components/Popover/Popover.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type {\n  PositioningVirtualElement,\n  PositioningShorthand,\n  SetVirtualMouseTarget,\n} from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { UseModalAttributesOptions } from '@fluentui/react-tabster';\n\n/**\n * Determines popover padding and arrow size\n */\nexport type PopoverSize = 'small' | 'medium' | 'large';\n\n/**\n * Popover Props\n */\nexport type PopoverProps = Pick<PortalProps, 'mountNode'> & {\n  /**\n   * A popover can appear styled with brand or inverted.\n   * When not specified, the default style is used.\n   */\n  appearance?: 'brand' | 'inverted';\n\n  /**\n   * Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.\n   * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.\n   */\n  children: [JSX.Element, JSX.Element] | JSX.Element;\n\n  /**\n   * Close when scroll outside of it\n   *\n   * @default false\n   */\n  closeOnScroll?: boolean;\n\n  /**\n   * Used to set the initial open state of the Popover in uncontrolled mode\n   *\n   * @default false\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order\n   *\n   * @default false\n   */\n  inline?: boolean;\n\n  /**\n   * Sets the delay for closing popover on mouse leave\n   */\n  mouseLeaveDelay?: number;\n\n  /**\n   * Display an arrow pointing to the target.\n   *\n   * @default false\n   */\n  withArrow?: boolean;\n\n  /**\n   * Call back when the component requests to change value\n   * The `open` value is used as a hint when directly controlling the component\n   */\n  onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;\n\n  /**\n   * Controls the opening of the Popover\n   *\n   * @default false\n   */\n  open?: boolean;\n\n  /**\n   * Flag to open the Popover as a context menu. Disables all other interactions\n   *\n   * @default false\n   */\n  openOnContext?: boolean;\n\n  /**\n   * Flag to open the Popover by hovering the trigger\n   *\n   * @default false\n   */\n  openOnHover?: boolean;\n\n  /**\n   * Configures the position of the Popover\n   */\n  positioning?: PositioningShorthand;\n\n  /**\n   * Determines popover padding and arrow size\n   *\n   * @default medium\n   */\n  size?: PopoverSize;\n\n  /**\n   * Should trap focus\n   *\n   * @default false\n   */\n  trapFocus?: UseModalAttributesOptions['trapFocus'];\n\n  /**\n   * Must be used with the `trapFocus` prop\n   * Enables older Fluent UI focus trap behavior where the user\n   * cannot tab into the window outside of the document. This is now\n   * non-standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n   * where the focus trap involves setting outside elements inert.\n   *\n   * @default false\n   */\n  legacyTrapFocus?: UseModalAttributesOptions['legacyTrapFocus'];\n};\n\n/**\n * Popover State\n */\nexport type PopoverState = Pick<\n  PopoverProps,\n  | 'appearance'\n  | 'mountNode'\n  | 'onOpenChange'\n  | 'openOnContext'\n  | 'openOnHover'\n  | 'trapFocus'\n  | 'withArrow'\n  | 'legacyTrapFocus'\n> &\n  Required<Pick<PopoverProps, 'inline' | 'open'>> &\n  Pick<PopoverProps, 'children'> & {\n    /**\n     * Ref of the pointing arrow\n     */\n    arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Ref of the PopoverSurface\n     */\n    contentRef: React.MutableRefObject<HTMLElement | null>;\n\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget: PositioningVirtualElement | undefined;\n\n    popoverSurface: React.ReactElement | undefined;\n\n    popoverTrigger: React.ReactElement | undefined;\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: SetVirtualMouseTarget;\n\n    /**\n     * Callback to open/close the Popover\n     */\n    setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n\n    size: NonNullable<PopoverProps['size']>;\n\n    /**\n     * Callback to toggle the open state of the Popover\n     */\n    toggleOpen: (e: OpenPopoverEvents) => void;\n\n    /**\n     * Ref of the PopoverTrigger\n     */\n    triggerRef: React.MutableRefObject<HTMLElement | null>;\n  };\n\n/**\n * Data attached to open/close events\n */\nexport type OnOpenChangeData = { open: boolean };\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n  | MouseEvent\n  | TouchEvent\n  | React.FocusEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.MouseEvent<HTMLElement>;\n"]}
+{"version":3,"file":"Popover.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type {\n  PositioningVirtualElement,\n  PositioningShorthand,\n  SetVirtualMouseTarget,\n} from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { UseModalAttributesOptions } from '@fluentui/react-tabster';\n\n/**\n * Determines popover padding and arrow size\n */\nexport type PopoverSize = 'small' | 'medium' | 'large';\n\n/**\n * Popover Props\n */\nexport type PopoverProps = Pick<PortalProps, 'mountNode'> & {\n  /**\n   * A popover can appear styled with brand or inverted.\n   * When not specified, the default style is used.\n   */\n  appearance?: 'brand' | 'inverted';\n\n  /**\n   * Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.\n   * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.\n   */\n  children: [JSX.Element, JSX.Element] | JSX.Element;\n\n  /**\n   * Close when scroll outside of it\n   *\n   * @default false\n   */\n  closeOnScroll?: boolean;\n\n  /**\n   * Used to set the initial open state of the Popover in uncontrolled mode\n   *\n   * @default false\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order\n   *\n   * @default false\n   */\n  inline?: boolean;\n\n  /**\n   * Sets the delay for closing popover on mouse leave\n   */\n  mouseLeaveDelay?: number;\n\n  /**\n   * Display an arrow pointing to the target.\n   *\n   * @default false\n   */\n  withArrow?: boolean;\n\n  /**\n   * Call back when the component requests to change value\n   * The `open` value is used as a hint when directly controlling the component\n   */\n  onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;\n\n  /**\n   * Controls the opening of the Popover\n   *\n   * @default false\n   */\n  open?: boolean;\n\n  /**\n   * Flag to open the Popover as a context menu. Disables all other interactions\n   *\n   * @default false\n   */\n  openOnContext?: boolean;\n\n  /**\n   * Flag to open the Popover by hovering the trigger\n   *\n   * @default false\n   */\n  openOnHover?: boolean;\n\n  /**\n   * Configures the position of the Popover\n   */\n  positioning?: PositioningShorthand;\n\n  /**\n   * Determines popover padding and arrow size\n   *\n   * @default medium\n   */\n  size?: PopoverSize;\n\n  /**\n   * Should trap focus\n   *\n   * @default false\n   */\n  trapFocus?: UseModalAttributesOptions['trapFocus'];\n\n  /**\n   * Must be used with the `trapFocus` prop\n   * Enables older Fluent UI focus trap behavior where the user\n   * cannot tab into the window outside of the document. This is now\n   * non-standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n   * where the focus trap involves setting outside elements inert.\n   *\n   * @default false\n   */\n  legacyTrapFocus?: UseModalAttributesOptions['legacyTrapFocus'];\n\n  /**\n   * By default Popover focuses the first focusable element in PopoverSurface on open.\n   * Specify `disableAutoFocus` to prevent this behavior.\n   *\n   * @default false\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_disableAutoFocus?: boolean;\n};\n\n/**\n * Popover State\n */\nexport type PopoverState = Pick<\n  PopoverProps,\n  | 'appearance'\n  | 'mountNode'\n  | 'onOpenChange'\n  | 'openOnContext'\n  | 'openOnHover'\n  | 'trapFocus'\n  | 'withArrow'\n  | 'legacyTrapFocus'\n> &\n  Required<Pick<PopoverProps, 'inline' | 'open'>> &\n  Pick<PopoverProps, 'children'> & {\n    /**\n     * Ref of the pointing arrow\n     */\n    arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Ref of the PopoverSurface\n     */\n    contentRef: React.MutableRefObject<HTMLElement | null>;\n\n    /**\n     * Anchors the popper to the mouse click for context events\n     */\n    contextTarget: PositioningVirtualElement | undefined;\n\n    popoverSurface: React.ReactElement | undefined;\n\n    popoverTrigger: React.ReactElement | undefined;\n\n    /**\n     * A callback to set the target of the popper to the mouse click for context events\n     */\n    setContextTarget: SetVirtualMouseTarget;\n\n    /**\n     * Callback to open/close the Popover\n     */\n    setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n\n    size: NonNullable<PopoverProps['size']>;\n\n    /**\n     * Callback to toggle the open state of the Popover\n     */\n    toggleOpen: (e: OpenPopoverEvents) => void;\n\n    /**\n     * Ref of the PopoverTrigger\n     */\n    triggerRef: React.MutableRefObject<HTMLElement | null>;\n  };\n\n/**\n * Data attached to open/close events\n */\nexport type OnOpenChangeData = { open: boolean };\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n  | MouseEvent\n  | TouchEvent\n  | React.FocusEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.MouseEvent<HTMLElement>;\n"]}

package/lib-amd/components/Popover/usePopover.js

@@ -86,6 +86,9 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
         var findFirstFocusable = react_tabster_1.useFocusFinders().findFirstFocusable;
         React.useEffect(function () {
             var _a;
+            if (props.unstable_disableAutoFocus) {
+                return;
+            }
             if (open && positioningRefs.contentRef.current) {
                 var containerTabIndex = (_a = positioningRefs.contentRef.current.getAttribute('tabIndex')) !== null && _a !== void 0 ? _a : undefined;
                 var firstFocusable = isNaN(containerTabIndex)
@@ -93,7 +96,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
                     : positioningRefs.contentRef.current;
                 firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
             }
-        }, [findFirstFocusable, open, positioningRefs.contentRef]);
+        }, [findFirstFocusable, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);
         return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, initialState), positioningRefs), { popoverTrigger: popoverTrigger, popoverSurface: popoverSurface, open: open, setOpen: setOpen, toggleOpen: toggleOpen, setContextTarget: setContextTarget, contextTarget: contextTarget, inline: (_a = props.inline) !== null && _a !== void 0 ? _a : false });
     };
     exports.usePopover_unstable = usePopover_unstable;

package/lib-amd/components/Popover/usePopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/Popover/usePopover.ts"],"names":[],"mappings":";;;;IAoBA;;;;;;;OAOG;IACI,IAAM,mBAAmB,GAAG,UAAC,KAAmB;;QAC/C,IAAA,KAAoC,6CAAyB,EAAE,EAA9D,aAAa,QAAA,EAAE,gBAAgB,QAA+B,CAAC;QACtE,IAAM,YAAY,GAAG,mBACnB,IAAI,EAAE,QAAQ,EACd,aAAa,eAAA,EACb,gBAAgB,kBAAA,IACb,KAAK,CACA,CAAC;QAEX,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAyB,CAAC;QAEhF,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;YACzC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;gBACzB,sCAAsC;gBACtC,OAAO,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAC;aACzD;YAED,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;gBACvB,sCAAsC;gBACtC,OAAO,CAAC,IAAI,CAAC,2CAA2C,CAAC,CAAC;aAC3D;SACF;QAED,IAAI,cAAc,GAAmC,SAAS,CAAC;QAC/D,IAAI,cAAc,GAAmC,SAAS,CAAC;QAC/D,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;YACzB,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;YAC7B,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;SAC9B;aAAM,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;YAChC,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;SAC9B;QAEK,IAAA,KAAuB,YAAY,CAAC,YAAY,CAAC,EAAhD,IAAI,QAAA,EAAE,YAAY,QAA8B,CAAC;QAExD,IAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAE1C,IAAM,OAAO,GAAG,kCAAgB,CAAC,UAAC,CAAoB,EAAE,UAAmB;;YACzE,YAAY,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;YACxC,IAAI,CAAC,CAAC,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE;gBACtC,gDAAgD;gBAChD,CAAC,CAAC,OAAO,EAAE,CAAC;aACb;YAED,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,EAAE;gBAC3B,kCAAkC;gBAClC,6DAA6D;gBAC7D,aAAa;gBACb,iBAAiB,CAAC,OAAO,GAAG,UAAU,CAAC;oBACrC,YAAY,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;gBAC9B,CAAC,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,GAAG,CAAC,CAAC;aAClC;iBAAM;gBACL,YAAY,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;aAC7B;QACH,CAAC,CAAC,CAAC;QAEH,2BAA2B;QAC3B,kEAAkE;QAClE,KAAK,CAAC,SAAS,CAAC;YACd,OAAO;gBACL,YAAY,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;YAC1C,CAAC,CAAC;QACJ,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,IAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,UAAA,CAAC;YACC,OAAO,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC,EACD,CAAC,OAAO,EAAE,IAAI,CAAC,CAChB,CAAC;QAEF,IAAM,eAAe,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;QAE7C,IAAA,cAAc,GAAK,0CAAS,EAAE,eAAhB,CAAiB;QACvC,mCAAiB,CAAC;YAChB,QAAQ,EAAE,8BAAe;YACzB,OAAO,EAAE,cAAc;YACvB,QAAQ,EAAE,UAAA,EAAE,IAAI,OAAA,OAAO,CAAC,EAAE,EAAE,KAAK,CAAC,EAAlB,CAAkB;YAClC,IAAI,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,eAAe,CAAC,UAAU,CAAC;YAC9D,QAAQ,EAAE,CAAC,IAAI;SAChB,CAAC,CAAC;QAEH,uEAAuE;QACvE,IAAM,aAAa,GAAG,YAAY,CAAC,aAAa,IAAI,YAAY,CAAC,aAAa,CAAC;QAC/E,oCAAkB,CAAC;YACjB,QAAQ,EAAE,8BAAe;YACzB,OAAO,EAAE,cAAc;YACvB,QAAQ,EAAE,UAAA,EAAE,IAAI,OAAA,OAAO,CAAC,EAAE,EAAE,KAAK,CAAC,EAAlB,CAAkB;YAClC,IAAI,EAAE,CAAC,eAAe,CAAC,UAAU,EAAE,eAAe,CAAC,UAAU,CAAC;YAC9D,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa;SAClC,CAAC,CAAC;QAEK,IAAA,kBAAkB,GAAK,+BAAe,EAAE,mBAAtB,CAAuB;QAEjD,KAAK,CAAC,SAAS,CAAC;;YACd,IAAI,IAAI,IAAI,eAAe,CAAC,UAAU,CAAC,OAAO,EAAE;gBAC9C,IAAM,iBAAiB,GAAG,MAAA,eAAe,CAAC,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,CAAC,mCAAI,SAAS,CAAC;gBACnG,IAAM,cAAc,GAAG,KAAK,CAAC,iBAAiB,CAAC;oBAC7C,CAAC,CAAC,kBAAkB,CAAC,eAAe,CAAC,UAAU,CAAC,OAAO,CAAC;oBACxD,CAAC,CAAC,eAAe,CAAC,UAAU,CAAC,OAAO,CAAC;gBACvC,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,EAAE,CAAC;aACzB;QACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,IAAI,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC;QAE3D,8DACK,YAAY,GACZ,eAAe,KAClB,cAAc,gBAAA,EACd,cAAc,gBAAA,EACd,IAAI,MAAA,EACJ,OAAO,SAAA,EACP,UAAU,YAAA,EACV,gBAAgB,kBAAA,EAChB,aAAa,eAAA,EACb,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,mCAAI,KAAK,IAC7B;IACJ,CAAC,CAAC;IAnHW,QAAA,mBAAmB,uBAmH9B;IAEF;;OAEG;IACH,SAAS,YAAY,CACnB,KAA2G;QAE3G,IAAM,YAAY,GAAiC,kCAAgB,CAAC,UAAC,CAAC,EAAE,IAAI,YAAK,OAAA,MAAA,KAAK,CAAC,YAAY,+CAAlB,KAAK,EAAgB,CAAC,EAAE,IAAI,CAAC,CAAA,EAAA,CAAC,CAAC;QAE1G,IAAA,KAAuB,sCAAoB,CAAC;YAChD,KAAK,EAAE,KAAK,CAAC,IAAI;YACjB,YAAY,EAAE,KAAK,CAAC,WAAW;YAC/B,YAAY,EAAE,KAAK;SACpB,CAAC,EAJK,IAAI,QAAA,EAAE,YAAY,QAIvB,CAAC;QACH,KAAK,CAAC,IAAI,GAAG,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;QACpD,IAAM,gBAAgB,GAAG,KAAK,CAAC,gBAAgB,CAAC;QAEhD,IAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAC/B,UAAC,CAAoB,EAAE,UAAmB;YACxC,IAAI,UAAU,IAAI,CAAC,CAAC,IAAI,KAAK,aAAa,EAAE;gBAC1C,gBAAgB,CAAC,CAAqB,CAAC,CAAC;aACzC;YAED,IAAI,CAAC,UAAU,EAAE;gBACf,gBAAgB,CAAC,SAAS,CAAC,CAAC;aAC7B;YAED,YAAY,CAAC,UAAU,CAAC,CAAC;YACzB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAC1C,CAAC,EACD,CAAC,YAAY,EAAE,YAAY,EAAE,gBAAgB,CAAC,CAC/C,CAAC;QAEF,OAAO,CAAC,IAAI,EAAE,OAAO,CAAU,CAAC;IAClC,CAAC;IAED;;OAEG;IACH,SAAS,cAAc,CACrB,KACmE;QAEnE,IAAM,kBAAkB,sBACtB,QAAQ,EAAE,OAAgB,EAC1B,KAAK,EAAE,QAAiB,EACxB,YAAY,EAAE,CAAC,GAAG,sCAA0B,EAC5C,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,IAC1D,+CAA2B,CAAC,KAAK,CAAC,WAAW,CAAC,CAClD,CAAC;QAEF,qDAAqD;QACrD,IAAI,kBAAkB,CAAC,WAAW,EAAE;YAClC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;SACzB;QAED,IAAI,KAAK,CAAC,SAAS,EAAE;YACnB,kBAAkB,CAAC,MAAM,GAAG,oCAAgB,CAAC,kBAAkB,CAAC,MAAM,EAAE,oBAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;SACnG;QAEK,IAAA,KAAgE,kCAAc,CAAC,kBAAkB,CAAC,EAArF,UAAU,eAAA,EAAgB,UAAU,kBAAA,EAAE,QAAQ,cAAuC,CAAC;QAEzG,OAAO;YACL,UAAU,YAAA;YACV,UAAU,YAAA;YACV,QAAQ,UAAA;SACA,CAAC;IACb,CAAC","sourcesContent":["import * as React from 'react';\nimport {\n  useControllableState,\n  useEventCallback,\n  useOnClickOutside,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  usePositioning,\n  resolvePositioningShorthand,\n  mergeArrowOffset,\n  usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n  const initialState = {\n    size: 'medium',\n    contextTarget,\n    setContextTarget,\n    ...props,\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at most two children');\n    }\n  }\n\n  let popoverTrigger: React.ReactElement | undefined = undefined;\n  let popoverSurface: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    popoverTrigger = children[0];\n    popoverSurface = children[1];\n  } else if (children.length === 1) {\n    popoverSurface = children[0];\n  }\n\n  const [open, setOpenState] = useOpenState(initialState);\n\n  const setOpenTimeoutRef = React.useRef(0);\n\n  const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n    clearTimeout(setOpenTimeoutRef.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave') {\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeoutRef.current = setTimeout(() => {\n        setOpenState(e, shouldOpen);\n      }, props.mouseLeaveDelay ?? 500);\n    } else {\n      setOpenState(e, shouldOpen);\n    }\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeoutRef.current);\n    };\n  }, []);\n\n  const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n    e => {\n      setOpen(e, !open);\n    },\n    [setOpen, open],\n  );\n\n  const positioningRefs = usePopoverRefs(initialState);\n\n  const { targetDocument } = useFluent();\n  useOnClickOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open,\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open || !closeOnScroll,\n  });\n\n  const { findFirstFocusable } = useFocusFinders();\n\n  React.useEffect(() => {\n    if (open && positioningRefs.contentRef.current) {\n      const containerTabIndex = positioningRefs.contentRef.current.getAttribute('tabIndex') ?? undefined;\n      const firstFocusable = isNaN(containerTabIndex)\n        ? findFirstFocusable(positioningRefs.contentRef.current)\n        : positioningRefs.contentRef.current;\n      firstFocusable?.focus();\n    }\n  }, [findFirstFocusable, open, positioningRefs.contentRef]);\n\n  return {\n    ...initialState,\n    ...positioningRefs,\n    popoverTrigger,\n    popoverSurface,\n    open,\n    setOpen,\n    toggleOpen,\n    setContextTarget,\n    contextTarget,\n    inline: props.inline ?? false,\n  };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n  state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n  const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n  state.open = open !== undefined ? open : state.open;\n  const setContextTarget = state.setContextTarget;\n\n  const setOpen = React.useCallback(\n    (e: OpenPopoverEvents, shouldOpen: boolean) => {\n      if (shouldOpen && e.type === 'contextmenu') {\n        setContextTarget(e as React.MouseEvent);\n      }\n\n      if (!shouldOpen) {\n        setContextTarget(undefined);\n      }\n\n      setOpenState(shouldOpen);\n      onOpenChange?.(e, { open: shouldOpen });\n    },\n    [setOpenState, onOpenChange, setContextTarget],\n  );\n\n  return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n  state: Pick<PopoverState, 'size' | 'contextTarget'> &\n    Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n  const positioningOptions = {\n    position: 'above' as const,\n    align: 'center' as const,\n    arrowPadding: 2 * popoverSurfaceBorderRadius,\n    target: state.openOnContext ? state.contextTarget : undefined,\n    ...resolvePositioningShorthand(state.positioning),\n  };\n\n  // no reason to render arrow when covering the target\n  if (positioningOptions.coverTarget) {\n    state.withArrow = false;\n  }\n\n  if (state.withArrow) {\n    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n  }\n\n  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n  return {\n    triggerRef,\n    contentRef,\n    arrowRef,\n  } as const;\n}\n"]}
+{"version":3,"file":"usePopover.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-popover/src/components/Popover/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  useControllableState,\n  useEventCallback,\n  useOnClickOutside,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  usePositioning,\n  resolvePositioningShorthand,\n  mergeArrowOffset,\n  usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n  const initialState = {\n    size: 'medium',\n    contextTarget,\n    setContextTarget,\n    ...props,\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at most two children');\n    }\n  }\n\n  let popoverTrigger: React.ReactElement | undefined = undefined;\n  let popoverSurface: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    popoverTrigger = children[0];\n    popoverSurface = children[1];\n  } else if (children.length === 1) {\n    popoverSurface = children[0];\n  }\n\n  const [open, setOpenState] = useOpenState(initialState);\n\n  const setOpenTimeoutRef = React.useRef(0);\n\n  const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n    clearTimeout(setOpenTimeoutRef.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave') {\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeoutRef.current = setTimeout(() => {\n        setOpenState(e, shouldOpen);\n      }, props.mouseLeaveDelay ?? 500);\n    } else {\n      setOpenState(e, shouldOpen);\n    }\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeoutRef.current);\n    };\n  }, []);\n\n  const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n    e => {\n      setOpen(e, !open);\n    },\n    [setOpen, open],\n  );\n\n  const positioningRefs = usePopoverRefs(initialState);\n\n  const { targetDocument } = useFluent();\n  useOnClickOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open,\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open || !closeOnScroll,\n  });\n\n  const { findFirstFocusable } = useFocusFinders();\n\n  React.useEffect(() => {\n    if (props.unstable_disableAutoFocus) {\n      return;\n    }\n\n    if (open && positioningRefs.contentRef.current) {\n      const containerTabIndex = positioningRefs.contentRef.current.getAttribute('tabIndex') ?? undefined;\n      const firstFocusable = isNaN(containerTabIndex)\n        ? findFirstFocusable(positioningRefs.contentRef.current)\n        : positioningRefs.contentRef.current;\n      firstFocusable?.focus();\n    }\n  }, [findFirstFocusable, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\n\n  return {\n    ...initialState,\n    ...positioningRefs,\n    popoverTrigger,\n    popoverSurface,\n    open,\n    setOpen,\n    toggleOpen,\n    setContextTarget,\n    contextTarget,\n    inline: props.inline ?? false,\n  };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n  state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n  const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n  state.open = open !== undefined ? open : state.open;\n  const setContextTarget = state.setContextTarget;\n\n  const setOpen = React.useCallback(\n    (e: OpenPopoverEvents, shouldOpen: boolean) => {\n      if (shouldOpen && e.type === 'contextmenu') {\n        setContextTarget(e as React.MouseEvent);\n      }\n\n      if (!shouldOpen) {\n        setContextTarget(undefined);\n      }\n\n      setOpenState(shouldOpen);\n      onOpenChange?.(e, { open: shouldOpen });\n    },\n    [setOpenState, onOpenChange, setContextTarget],\n  );\n\n  return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n  state: Pick<PopoverState, 'size' | 'contextTarget'> &\n    Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n  const positioningOptions = {\n    position: 'above' as const,\n    align: 'center' as const,\n    arrowPadding: 2 * popoverSurfaceBorderRadius,\n    target: state.openOnContext ? state.contextTarget : undefined,\n    ...resolvePositioningShorthand(state.positioning),\n  };\n\n  // no reason to render arrow when covering the target\n  if (positioningOptions.coverTarget) {\n    state.withArrow = false;\n  }\n\n  if (state.withArrow) {\n    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n  }\n\n  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n  return {\n    triggerRef,\n    contentRef,\n    arrowRef,\n  } as const;\n}\n"]}

package/lib-commonjs/components/Popover/usePopover.js

@@ -103,12 +103,15 @@ const usePopover_unstable = props => {
   } = react_tabster_1.useFocusFinders();
   React.useEffect(() => {
     var _a;
+    if (props.unstable_disableAutoFocus) {
+      return;
+    }
     if (open && positioningRefs.contentRef.current) {
       const containerTabIndex = (_a = positioningRefs.contentRef.current.getAttribute('tabIndex')) !== null && _a !== void 0 ? _a : undefined;
       const firstFocusable = isNaN(containerTabIndex) ? findFirstFocusable(positioningRefs.contentRef.current) : positioningRefs.contentRef.current;
       firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
     }
-  }, [findFirstFocusable, open, positioningRefs.contentRef]);
+  }, [findFirstFocusable, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);
   return {
     ...initialState,
     ...positioningRefs,

package/lib-commonjs/components/Popover/usePopover.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["usePopover_unstable","props","contextTarget","setContextTarget","react_positioning_1","initialState","size","children","React","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeoutRef","useRef","setOpen","react_utilities_1","e","shouldOpen","clearTimeout","current","Event","persist","type","setTimeout","mouseLeaveDelay","useEffect","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","react_shared_contexts_1","contains","react_portal_1","element","callback","ev","refs","triggerRef","contentRef","disabled","closeOnScroll","openOnContext","findFirstFocusable","react_tabster_1","containerTabIndex","getAttribute","firstFocusable","isNaN","focus","inline","exports","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","constants_1","target","positioning","coverTarget","withArrow","offset","index_1","targetRef","containerRef","arrowRef"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/usePopover.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useControllableState,\n  useEventCallback,\n  useOnClickOutside,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  usePositioning,\n  resolvePositioningShorthand,\n  mergeArrowOffset,\n  usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n  const initialState = {\n    size: 'medium',\n    contextTarget,\n    setContextTarget,\n    ...props,\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at most two children');\n    }\n  }\n\n  let popoverTrigger: React.ReactElement | undefined = undefined;\n  let popoverSurface: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    popoverTrigger = children[0];\n    popoverSurface = children[1];\n  } else if (children.length === 1) {\n    popoverSurface = children[0];\n  }\n\n  const [open, setOpenState] = useOpenState(initialState);\n\n  const setOpenTimeoutRef = React.useRef(0);\n\n  const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n    clearTimeout(setOpenTimeoutRef.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave') {\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeoutRef.current = setTimeout(() => {\n        setOpenState(e, shouldOpen);\n      }, props.mouseLeaveDelay ?? 500);\n    } else {\n      setOpenState(e, shouldOpen);\n    }\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeoutRef.current);\n    };\n  }, []);\n\n  const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n    e => {\n      setOpen(e, !open);\n    },\n    [setOpen, open],\n  );\n\n  const positioningRefs = usePopoverRefs(initialState);\n\n  const { targetDocument } = useFluent();\n  useOnClickOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open,\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open || !closeOnScroll,\n  });\n\n  const { findFirstFocusable } = useFocusFinders();\n\n  React.useEffect(() => {\n    if (open && positioningRefs.contentRef.current) {\n      const containerTabIndex = positioningRefs.contentRef.current.getAttribute('tabIndex') ?? undefined;\n      const firstFocusable = isNaN(containerTabIndex)\n        ? findFirstFocusable(positioningRefs.contentRef.current)\n        : positioningRefs.contentRef.current;\n      firstFocusable?.focus();\n    }\n  }, [findFirstFocusable, open, positioningRefs.contentRef]);\n\n  return {\n    ...initialState,\n    ...positioningRefs,\n    popoverTrigger,\n    popoverSurface,\n    open,\n    setOpen,\n    toggleOpen,\n    setContextTarget,\n    contextTarget,\n    inline: props.inline ?? false,\n  };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n  state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n  const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n  state.open = open !== undefined ? open : state.open;\n  const setContextTarget = state.setContextTarget;\n\n  const setOpen = React.useCallback(\n    (e: OpenPopoverEvents, shouldOpen: boolean) => {\n      if (shouldOpen && e.type === 'contextmenu') {\n        setContextTarget(e as React.MouseEvent);\n      }\n\n      if (!shouldOpen) {\n        setContextTarget(undefined);\n      }\n\n      setOpenState(shouldOpen);\n      onOpenChange?.(e, { open: shouldOpen });\n    },\n    [setOpenState, onOpenChange, setContextTarget],\n  );\n\n  return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n  state: Pick<PopoverState, 'size' | 'contextTarget'> &\n    Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n  const positioningOptions = {\n    position: 'above' as const,\n    align: 'center' as const,\n    arrowPadding: 2 * popoverSurfaceBorderRadius,\n    target: state.openOnContext ? state.contextTarget : undefined,\n    ...resolvePositioningShorthand(state.positioning),\n  };\n\n  // no reason to render arrow when covering the target\n  if (positioningOptions.coverTarget) {\n    state.withArrow = false;\n  }\n\n  if (state.withArrow) {\n    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n  }\n\n  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n  return {\n    triggerRef,\n    contentRef,\n    arrowRef,\n  } as const;\n}\n"]}
+{"version":3,"mappings":"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","names":["usePopover_unstable","props","contextTarget","setContextTarget","react_positioning_1","initialState","size","children","React","Children","toArray","process","env","NODE_ENV","length","console","warn","popoverTrigger","undefined","popoverSurface","open","setOpenState","useOpenState","setOpenTimeoutRef","useRef","setOpen","react_utilities_1","e","shouldOpen","clearTimeout","current","Event","persist","type","setTimeout","mouseLeaveDelay","useEffect","toggleOpen","useCallback","positioningRefs","usePopoverRefs","targetDocument","react_shared_contexts_1","contains","react_portal_1","element","callback","ev","refs","triggerRef","contentRef","disabled","closeOnScroll","openOnContext","findFirstFocusable","react_tabster_1","unstable_disableAutoFocus","containerTabIndex","getAttribute","firstFocusable","isNaN","focus","inline","exports","state","onOpenChange","data","defaultState","defaultOpen","positioningOptions","position","align","arrowPadding","constants_1","target","positioning","coverTarget","withArrow","offset","index_1","targetRef","containerRef","arrowRef"],"sourceRoot":"../src/","sources":["packages/react-components/react-popover/src/components/Popover/usePopover.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useControllableState,\n  useEventCallback,\n  useOnClickOutside,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  usePositioning,\n  resolvePositioningShorthand,\n  mergeArrowOffset,\n  usePositioningMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\nimport { popoverSurfaceBorderRadius } from './constants';\n\n/**\n * Create the state required to render Popover.\n *\n * The returned state can be modified with hooks such as usePopoverStyles,\n * before being passed to renderPopover_unstable.\n *\n * @param props - props from this instance of Popover\n */\nexport const usePopover_unstable = (props: PopoverProps): PopoverState => {\n  const [contextTarget, setContextTarget] = usePositioningMouseTarget();\n  const initialState = {\n    size: 'medium',\n    contextTarget,\n    setContextTarget,\n    ...props,\n  } as const;\n\n  const children = React.Children.toArray(props.children) as React.ReactElement[];\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (children.length === 0) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at least one child');\n    }\n\n    if (children.length > 2) {\n      // eslint-disable-next-line no-console\n      console.warn('Popover must contain at most two children');\n    }\n  }\n\n  let popoverTrigger: React.ReactElement | undefined = undefined;\n  let popoverSurface: React.ReactElement | undefined = undefined;\n  if (children.length === 2) {\n    popoverTrigger = children[0];\n    popoverSurface = children[1];\n  } else if (children.length === 1) {\n    popoverSurface = children[0];\n  }\n\n  const [open, setOpenState] = useOpenState(initialState);\n\n  const setOpenTimeoutRef = React.useRef(0);\n\n  const setOpen = useEventCallback((e: OpenPopoverEvents, shouldOpen: boolean) => {\n    clearTimeout(setOpenTimeoutRef.current);\n    if (!(e instanceof Event) && e.persist) {\n      // < React 17 still uses pooled synthetic events\n      e.persist();\n    }\n\n    if (e.type === 'mouseleave') {\n      // FIXME leaking Node timeout type\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      setOpenTimeoutRef.current = setTimeout(() => {\n        setOpenState(e, shouldOpen);\n      }, props.mouseLeaveDelay ?? 500);\n    } else {\n      setOpenState(e, shouldOpen);\n    }\n  });\n\n  // Clear timeout on unmount\n  // Setting state after a component unmounts can cause memory leaks\n  React.useEffect(() => {\n    return () => {\n      clearTimeout(setOpenTimeoutRef.current);\n    };\n  }, []);\n\n  const toggleOpen = React.useCallback<PopoverState['toggleOpen']>(\n    e => {\n      setOpen(e, !open);\n    },\n    [setOpen, open],\n  );\n\n  const positioningRefs = usePopoverRefs(initialState);\n\n  const { targetDocument } = useFluent();\n  useOnClickOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open,\n  });\n\n  // only close on scroll for context, or when closeOnScroll is specified\n  const closeOnScroll = initialState.openOnContext || initialState.closeOnScroll;\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [positioningRefs.triggerRef, positioningRefs.contentRef],\n    disabled: !open || !closeOnScroll,\n  });\n\n  const { findFirstFocusable } = useFocusFinders();\n\n  React.useEffect(() => {\n    if (props.unstable_disableAutoFocus) {\n      return;\n    }\n\n    if (open && positioningRefs.contentRef.current) {\n      const containerTabIndex = positioningRefs.contentRef.current.getAttribute('tabIndex') ?? undefined;\n      const firstFocusable = isNaN(containerTabIndex)\n        ? findFirstFocusable(positioningRefs.contentRef.current)\n        : positioningRefs.contentRef.current;\n      firstFocusable?.focus();\n    }\n  }, [findFirstFocusable, open, positioningRefs.contentRef, props.unstable_disableAutoFocus]);\n\n  return {\n    ...initialState,\n    ...positioningRefs,\n    popoverTrigger,\n    popoverSurface,\n    open,\n    setOpen,\n    toggleOpen,\n    setContextTarget,\n    contextTarget,\n    inline: props.inline ?? false,\n  };\n};\n\n/**\n * Creates and manages the Popover open state\n */\nfunction useOpenState(\n  state: Pick<PopoverState, 'setContextTarget' | 'onOpenChange'> & Pick<PopoverProps, 'open' | 'defaultOpen'>,\n) {\n  const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const [open, setOpenState] = useControllableState({\n    state: state.open,\n    defaultState: state.defaultOpen,\n    initialState: false,\n  });\n  state.open = open !== undefined ? open : state.open;\n  const setContextTarget = state.setContextTarget;\n\n  const setOpen = React.useCallback(\n    (e: OpenPopoverEvents, shouldOpen: boolean) => {\n      if (shouldOpen && e.type === 'contextmenu') {\n        setContextTarget(e as React.MouseEvent);\n      }\n\n      if (!shouldOpen) {\n        setContextTarget(undefined);\n      }\n\n      setOpenState(shouldOpen);\n      onOpenChange?.(e, { open: shouldOpen });\n    },\n    [setOpenState, onOpenChange, setContextTarget],\n  );\n\n  return [open, setOpen] as const;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n */\nfunction usePopoverRefs(\n  state: Pick<PopoverState, 'size' | 'contextTarget'> &\n    Pick<PopoverProps, 'positioning' | 'openOnContext' | 'withArrow'>,\n) {\n  const positioningOptions = {\n    position: 'above' as const,\n    align: 'center' as const,\n    arrowPadding: 2 * popoverSurfaceBorderRadius,\n    target: state.openOnContext ? state.contextTarget : undefined,\n    ...resolvePositioningShorthand(state.positioning),\n  };\n\n  // no reason to render arrow when covering the target\n  if (positioningOptions.coverTarget) {\n    state.withArrow = false;\n  }\n\n  if (state.withArrow) {\n    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeights[state.size]);\n  }\n\n  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePositioning(positioningOptions);\n\n  return {\n    triggerRef,\n    contentRef,\n    arrowRef,\n  } as const;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-popover",
-  "version": "9.3.6",
+  "version": "9.4.0",
   "description": "Popover component for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -34,14 +34,14 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.1",
-    "@fluentui/react-aria": "^9.3.4",
-    "@fluentui/react-context-selector": "^9.1.4",
-    "@fluentui/react-portal": "^9.0.15",
-    "@fluentui/react-positioning": "^9.3.6",
+    "@fluentui/react-aria": "^9.3.5",
+    "@fluentui/react-context-selector": "^9.1.5",
+    "@fluentui/react-portal": "^9.1.0",
+    "@fluentui/react-positioning": "^9.3.7",
     "@fluentui/react-shared-contexts": "^9.1.4",
-    "@fluentui/react-tabster": "^9.3.5",
+    "@fluentui/react-tabster": "^9.3.6",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.3.1",
+    "@fluentui/react-utilities": "^9.4.0",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },