@fluentui/react-popover 9.0.0-alpha.40 → 9.0.0-alpha.44

package/CHANGELOG.json

@@ -2,7 +2,73 @@
   "name": "@fluentui/react-popover",
   "entries": [
     {
-      "date": "Fri, 10 Sep 2021 16:29:54 GMT",
+      "date": "Fri, 17 Sep 2021 07:32:57 GMT",
+      "tag": "@fluentui/react-popover_v9.0.0-alpha.44",
+      "version": "9.0.0-alpha.44",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-popover",
+            "commit": "90d71a0914acbb73a0365d60a85237e3d58ef575",
+            "comment": "Bump @fluentui/react-popover to v9.0.0-alpha.44"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Sep 2021 07:38:39 GMT",
+      "tag": "@fluentui/react-popover_v9.0.0-alpha.43",
+      "version": "9.0.0-alpha.43",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-popover",
+            "comment": "Fix typings in React.forwardRef",
+            "commit": "fbe41e2877a20ce0f3c01b5188e17c12f941cc4c"
+          },
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-popover",
+            "commit": "fbe41e2877a20ce0f3c01b5188e17c12f941cc4c",
+            "comment": "Bump @fluentui/react-popover to v9.0.0-alpha.43"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 14 Sep 2021 20:09:02 GMT",
+      "tag": "@fluentui/react-popover_v9.0.0-alpha.42",
+      "version": "9.0.0-alpha.42",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bsunderhus@microsoft.com",
+            "package": "@fluentui/react-popover",
+            "commit": "10495c31fb5c5cf48b4665601a75a0cfabb6a03c",
+            "comment": "Bump @fluentui/react-popover to v9.0.0-alpha.42"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 14 Sep 2021 07:38:18 GMT",
+      "tag": "@fluentui/react-popover_v9.0.0-alpha.41",
+      "version": "9.0.0-alpha.41",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-popover",
+            "comment": "refactor(Popover): Remove mergeProps and migrate to simple slots",
+            "commit": "fe05da92ddc2742135a689b7b990f8152bd752c3"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 10 Sep 2021 16:31:53 GMT",
       "tag": "@fluentui/react-popover_v9.0.0-alpha.40",
       "version": "9.0.0-alpha.40",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,49 @@
 # Change Log - @fluentui/react-popover
 
-This log was last generated on Fri, 10 Sep 2021 16:29:54 GMT and should not be manually modified.
+This log was last generated on Fri, 17 Sep 2021 07:32:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.44](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-alpha.44)
+
+Fri, 17 Sep 2021 07:32:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-alpha.43..@fluentui/react-popover_v9.0.0-alpha.44)
+
+### Changes
+
+- Bump @fluentui/react-popover to v9.0.0-alpha.44 ([PR #19840](https://github.com/microsoft/fluentui/pull/19840) by Humberto.Morimoto@microsoft.com)
+
+## [9.0.0-alpha.43](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-alpha.43)
+
+Thu, 16 Sep 2021 07:38:39 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-alpha.42..@fluentui/react-popover_v9.0.0-alpha.43)
+
+### Changes
+
+- Fix typings in React.forwardRef ([PR #19815](https://github.com/microsoft/fluentui/pull/19815) by behowell@microsoft.com)
+- Bump @fluentui/react-popover to v9.0.0-alpha.43 ([PR #19815](https://github.com/microsoft/fluentui/pull/19815) by behowell@microsoft.com)
+
+## [9.0.0-alpha.42](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-alpha.42)
+
+Tue, 14 Sep 2021 20:09:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-alpha.41..@fluentui/react-popover_v9.0.0-alpha.42)
+
+### Changes
+
+- Bump @fluentui/react-popover to v9.0.0-alpha.42 ([PR #19155](https://github.com/microsoft/fluentui/pull/19155) by bsunderhus@microsoft.com)
+
+## [9.0.0-alpha.41](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-alpha.41)
+
+Tue, 14 Sep 2021 07:38:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-alpha.40..@fluentui/react-popover_v9.0.0-alpha.41)
+
+### Changes
+
+- refactor(Popover): Remove mergeProps and migrate to simple slots ([PR #19605](https://github.com/microsoft/fluentui/pull/19605) by lingfangao@hotmail.com)
+
 ## [9.0.0-alpha.40](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-alpha.40)
 
-Fri, 10 Sep 2021 16:29:54 GMT 
+Fri, 10 Sep 2021 16:31:53 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-alpha.39..@fluentui/react-popover_v9.0.0-alpha.40)
 
 ### Changes

package/dist/react-popover.d.ts

@@ -1,11 +1,13 @@
-import type { ComponentPropsCompat } from '@fluentui/react-utilities';
-import type { ComponentStateCompat } from '@fluentui/react-utilities';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
 import type { Context } from '@fluentui/react-context-selector';
 import type { ContextSelector } from '@fluentui/react-context-selector';
+import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
 import type { PopperVirtualElement } from '@fluentui/react-positioning';
 import type { PortalProps } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
+import type { usePopperMouseTarget } from '@fluentui/react-positioning';
 
 export declare const arrowHeights: Record<PopoverSize, number>;
 
@@ -25,28 +27,11 @@ export declare type OpenPopoverEvents = MouseEvent | TouchEvent | React_2.MouseE
  */
 export declare const Popover: React_2.FC<PopoverProps>;
 
-export declare const PopoverContext: Context<PopoverContextValue>;
-
-/**
- * Context shared between Popover and its children components
- */
-export declare interface PopoverContextValue extends Pick<PopoverState, 'open' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'brand' | 'inverted' | 'trapFocus'> {
-}
-
-/**
- * Names of PopoverProps that have a default value in usePopover
- */
-export declare type PopoverDefaultedProps = never;
-
-/**
- * Popover Props
- */
-export declare interface PopoverProps extends Pick<PortalProps, 'mountNode'> {
-    children: React_2.ReactNode;
+export declare interface PopoverCommons extends Pick<PortalProps, 'mountNode'> {
     /**
      * Controls the opening of the Popover
      */
-    open?: boolean;
+    open: boolean;
     /**
      * Used to set the initial open state of the Popover in uncontrolled mode
      */
@@ -93,10 +78,24 @@ export declare interface PopoverProps extends Pick<PortalProps, 'mountNode'> {
     positioning?: PositioningShorthand;
 }
 
+export declare const PopoverContext: Context<PopoverContextValue>;
+
+/**
+ * Context shared between Popover and its children components
+ */
+export declare interface PopoverContextValue extends Pick<PopoverState, 'open' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'brand' | 'inverted' | 'trapFocus'> {
+}
+
 /**
- * Names of the shorthand properties in PopoverProps
+ * Popover Props
  */
-export declare type PopoverShorthandProps = never;
+export declare interface PopoverProps extends Partial<PopoverCommons> {
+    /**
+     * Can contain two children including {@link PopoverTrigger} and {@link PopoverPopover}.
+     * Alternatively can only contain {@link PopoverPopover} if using a custom `target`.
+     */
+    children: [JSX.Element, JSX.Element] | JSX.Element;
+}
 
 /**
  * Determines popover padding and arrow size
@@ -106,11 +105,7 @@ export declare type PopoverSize = 'small' | 'medium' | 'large';
 /**
  * Popover State
  */
-export declare interface PopoverState extends ComponentStateCompat<PopoverProps, PopoverShorthandProps, PopoverDefaultedProps> {
-    /**
-     * Open state of the Popover
-     */
-    open: boolean;
+export declare interface PopoverState extends PopoverCommons, Pick<PopoverProps, 'children'> {
     /**
      * Callback to open/close the Popover
      */
@@ -134,40 +129,34 @@ export declare interface PopoverState extends ComponentStateCompat<PopoverProps,
     /**
      * A callback to set the target of the popper to the mouse click for context events
      */
-    setContextTarget: React_2.Dispatch<PopperVirtualElement | undefined>;
+    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
     size: NonNullable<PopoverProps['size']>;
 }
 
 /**
  * PopoverSurface component renders react children in a positioned box
  */
-export declare const PopoverSurface: React_2.ForwardRefExoticComponent<PopoverSurfaceProps & React_2.RefAttributes<HTMLElement>>;
-
-/**
- * Names of PopoverSurfaceProps that have a default value in usePopoverSurface
- */
-export declare type PopoverSurfaceDefaultedProps = never;
+export declare const PopoverSurface: React_2.ForwardRefExoticComponent<PopoverSurfaceProps & React_2.RefAttributes<HTMLDivElement>>;
 
 /**
  * PopoverSurface Props
  */
-export declare interface PopoverSurfaceProps extends ComponentPropsCompat, React_2.HTMLAttributes<HTMLElement> {
+export declare interface PopoverSurfaceProps extends ComponentProps<PopoverSurfaceSlots> {
 }
 
 /**
- * Names of the shorthand properties in PopoverSurfaceProps
+ * Names of the slots in PopoverSurfaceProps
  */
-export declare type PopoverSurfaceShorthandProps = never;
+export declare type PopoverSurfaceSlots = {
+    root: IntrinsicShorthandProps<'div'>;
+};
+
+export declare const popoverSurfaceSlots: Array<keyof PopoverSurfaceSlots>;
 
 /**
  * PopoverSurface State
  */
-export declare interface PopoverSurfaceState extends ComponentStateCompat<PopoverSurfaceProps, PopoverSurfaceShorthandProps, PopoverSurfaceDefaultedProps>, Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'brand' | 'inverted'> {
-    ref: React_2.Ref<HTMLElement>;
-    /**
-     * Ref to the arrow element
-     */
-    arrowRef?: React_2.Ref<HTMLDivElement>;
+export declare interface PopoverSurfaceState extends ComponentState<PopoverSurfaceSlots>, Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'brand' | 'inverted' | 'arrowRef'> {
     /**
      * CSS class for the arrow element
      */
@@ -227,10 +216,10 @@ export declare const usePopoverContext: <T>(selector: ContextSelector<PopoverCon
  * before being passed to renderPopoverSurface.
  *
  * @param props - props from this instance of PopoverSurface
- * @param ref - reference to root HTMLElement of PopoverSurface
+ * @param ref - reference to root HTMLDivElement of PopoverSurface
  * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const usePopoverSurface: (props: PopoverSurfaceProps, ref: React_2.Ref<HTMLElement>, defaultProps?: PopoverSurfaceProps | undefined) => PopoverSurfaceState;
+export declare const usePopoverSurface: (props: PopoverSurfaceProps, ref: React_2.Ref<HTMLDivElement>) => PopoverSurfaceState;
 
 /**
  * Apply styling to the PopoverSurface slots based on the state

package/lib/common/isConformant.js

@@ -4,6 +4,8 @@ export function isConformant(testInfo) {
   var defaultOptions = {
     asPropHandlesRef: true,
     componentPath: module.parent.filename.replace('.test', ''),
+    // TODO // https://github.com/microsoft/fluentui/issues/19522
+    skipAsPropTests: true,
     extraTests: makeStylesTests
   };
   baseIsConformant(defaultOptions, testInfo);

package/lib/common/isConformant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE;AAH+C,GAA7D;AAMA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';\nimport makeStylesTests from '@fluentui/react-conformance-make-styles';\n\nexport function isConformant<TProps = {}>(\n  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n  const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n    extraTests: makeStylesTests as TestObject<TProps>,\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D;AACA,IAAA,eAAe,EAAE,IAJ0C;AAK3D,IAAA,UAAU,EAAE;AAL+C,GAA7D;AAQA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourcesContent":["import { isConformant as baseIsConformant } from '@fluentui/react-conformance';\nimport type { IsConformantOptions, TestObject } from '@fluentui/react-conformance';\nimport makeStylesTests from '@fluentui/react-conformance-make-styles';\n\nexport function isConformant<TProps = {}>(\n  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n  const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n    // TODO // https://github.com/microsoft/fluentui/issues/19522\n    skipAsPropTests: true,\n    extraTests: makeStylesTests as TestObject<TProps>,\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"],"sourceRoot":"../src/"}

package/lib/components/Popover/Popover.types.d.ts

@@ -1,20 +1,15 @@
 import * as React from 'react';
-import type { PopperVirtualElement, PositioningShorthand } from '@fluentui/react-positioning';
+import type { PopperVirtualElement, PositioningShorthand, usePopperMouseTarget } from '@fluentui/react-positioning';
 import type { PortalProps } from '@fluentui/react-portal';
-import type { ComponentStateCompat } from '@fluentui/react-utilities';
 /**
  * Determines popover padding and arrow size
  */
 export declare type PopoverSize = 'small' | 'medium' | 'large';
-/**
- * Popover Props
- */
-export interface PopoverProps extends Pick<PortalProps, 'mountNode'> {
-    children: React.ReactNode;
+export interface PopoverCommons extends Pick<PortalProps, 'mountNode'> {
     /**
      * Controls the opening of the Popover
      */
-    open?: boolean;
+    open: boolean;
     /**
      * Used to set the initial open state of the Popover in uncontrolled mode
      */
@@ -61,21 +56,19 @@ export interface PopoverProps extends Pick<PortalProps, 'mountNode'> {
     positioning?: PositioningShorthand;
 }
 /**
- * Names of the shorthand properties in PopoverProps
- */
-export declare type PopoverShorthandProps = never;
-/**
- * Names of PopoverProps that have a default value in usePopover
+ * Popover Props
  */
-export declare type PopoverDefaultedProps = never;
+export interface PopoverProps extends Partial<PopoverCommons> {
+    /**
+     * Can contain two children including {@link PopoverTrigger} and {@link PopoverPopover}.
+     * Alternatively can only contain {@link PopoverPopover} if using a custom `target`.
+     */
+    children: [JSX.Element, JSX.Element] | JSX.Element;
+}
 /**
  * Popover State
  */
-export interface PopoverState extends ComponentStateCompat<PopoverProps, PopoverShorthandProps, PopoverDefaultedProps> {
-    /**
-     * Open state of the Popover
-     */
-    open: boolean;
+export interface PopoverState extends PopoverCommons, Pick<PopoverProps, 'children'> {
     /**
      * Callback to open/close the Popover
      */
@@ -99,7 +92,7 @@ export interface PopoverState extends ComponentStateCompat<PopoverProps, Popover
     /**
      * A callback to set the target of the popper to the mouse click for context events
      */
-    setContextTarget: React.Dispatch<PopperVirtualElement | undefined>;
+    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
     size: NonNullable<PopoverProps['size']>;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PopperVirtualElement, PositioningShorthand } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentStateCompat } from '@fluentui/react-utilities';\n\n/**\n * Determines popover padding and arrow size\n */\nexport type PopoverSize = 'small' | 'medium' | 'large';\n\n/**\n * Popover Props\n */\nexport interface PopoverProps extends Pick<PortalProps, 'mountNode'> {\n  children: React.ReactNode;\n  /**\n   * Controls the opening of the Popover\n   */\n  open?: boolean;\n  /**\n   * Used to set the initial open state of the Popover in uncontrolled mode\n   */\n  defaultOpen?: boolean;\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   * Flag to open the Popover by hovering the trigger\n   */\n  openOnHover?: boolean;\n  /**\n   * Flag to open the Popover as a context menu. Disables all other interactions\n   */\n  openOnContext?: boolean;\n  /**\n   * Do not display the arrow\n   */\n  noArrow?: boolean;\n  /**\n   * Determines popover padding and arrow size\n   * @default medium\n   */\n  size?: PopoverSize;\n  /**\n   * Uses brand colour as background\n   * Mutually exclusive with `inverted`\n   */\n  brand?: boolean;\n  /**\n   * Inverts the foreground/background colour of the popover\n   * Mutually exclusive with `brand`\n   */\n  inverted?: boolean;\n\n  /**\n   * Should trap focus\n   */\n  trapFocus?: boolean;\n\n  /**\n   * Configures the position of the Popover\n   */\n  positioning?: PositioningShorthand;\n}\n\n/**\n * Names of the shorthand properties in PopoverProps\n */\nexport type PopoverShorthandProps = never;\n\n/**\n * Names of PopoverProps that have a default value in usePopover\n */\nexport type PopoverDefaultedProps = never;\n\n/**\n * Popover State\n */\nexport interface PopoverState extends ComponentStateCompat<PopoverProps, PopoverShorthandProps, PopoverDefaultedProps> {\n  /**\n   * Open state of the Popover\n   */\n  open: boolean;\n  /**\n   * Callback to open/close the Popover\n   */\n  setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n  /**\n   * Ref of the PopoverTrigger\n   */\n  triggerRef: React.MutableRefObject<HTMLElement | null>;\n  /**\n   * Ref of the PopoverSurface\n   */\n  contentRef: React.MutableRefObject<HTMLElement | null>;\n  /**\n   * Ref of the pointing arrow\n   */\n  arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n  /**\n   * Anchors the popper to the mouse click for context events\n   */\n  contextTarget: PopperVirtualElement | undefined;\n  /**\n   * A callback to set the target of the popper to the mouse click for context events\n   */\n  setContextTarget: React.Dispatch<PopperVirtualElement | undefined>;\n\n  size: NonNullable<PopoverProps['size']>;\n}\n\n/**\n * Data attached to open/close events\n */\nexport interface OnOpenChangeData extends Pick<PopoverState, 'open'> {}\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n  | MouseEvent\n  | TouchEvent\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n"]}
+{"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PopperVirtualElement, PositioningShorthand, usePopperMouseTarget } from '@fluentui/react-positioning';\nimport type { PortalProps } from '@fluentui/react-portal';\n\n/**\n * Determines popover padding and arrow size\n */\nexport type PopoverSize = 'small' | 'medium' | 'large';\n\nexport interface PopoverCommons extends Pick<PortalProps, 'mountNode'> {\n  /**\n   * Controls the opening of the Popover\n   */\n  open: boolean;\n  /**\n   * Used to set the initial open state of the Popover in uncontrolled mode\n   */\n  defaultOpen?: boolean;\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   * Flag to open the Popover by hovering the trigger\n   */\n  openOnHover?: boolean;\n  /**\n   * Flag to open the Popover as a context menu. Disables all other interactions\n   */\n  openOnContext?: boolean;\n  /**\n   * Do not display the arrow\n   */\n  noArrow?: boolean;\n  /**\n   * Determines popover padding and arrow size\n   * @default medium\n   */\n  size?: PopoverSize;\n  /**\n   * Uses brand colour as background\n   * Mutually exclusive with `inverted`\n   */\n  brand?: boolean;\n  /**\n   * Inverts the foreground/background colour of the popover\n   * Mutually exclusive with `brand`\n   */\n  inverted?: boolean;\n\n  /**\n   * Should trap focus\n   */\n  trapFocus?: boolean;\n\n  /**\n   * Configures the position of the Popover\n   */\n  positioning?: PositioningShorthand;\n}\n\n/**\n * Popover Props\n */\nexport interface PopoverProps extends Partial<PopoverCommons> {\n  /**\n   * Can contain two children including {@link PopoverTrigger} and {@link PopoverPopover}.\n   * Alternatively can only contain {@link PopoverPopover} if using a custom `target`.\n   */\n  children: [JSX.Element, JSX.Element] | JSX.Element;\n}\n\n/**\n * Popover State\n */\nexport interface PopoverState extends PopoverCommons, Pick<PopoverProps, 'children'> {\n  /**\n   * Callback to open/close the Popover\n   */\n  setOpen: (e: OpenPopoverEvents, open: boolean) => void;\n  /**\n   * Ref of the PopoverTrigger\n   */\n  triggerRef: React.MutableRefObject<HTMLElement | null>;\n  /**\n   * Ref of the PopoverSurface\n   */\n  contentRef: React.MutableRefObject<HTMLElement | null>;\n  /**\n   * Ref of the pointing arrow\n   */\n  arrowRef: React.MutableRefObject<HTMLDivElement | null>;\n  /**\n   * Anchors the popper to the mouse click for context events\n   */\n  contextTarget: PopperVirtualElement | undefined;\n  /**\n   * A callback to set the target of the popper to the mouse click for context events\n   */\n  setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];\n\n  size: NonNullable<PopoverProps['size']>;\n}\n\n/**\n * Data attached to open/close events\n */\nexport interface OnOpenChangeData extends Pick<PopoverState, 'open'> {}\n\n/**\n * The supported events that will trigger open/close of the menu\n */\nexport type OpenPopoverEvents =\n  | MouseEvent\n  | TouchEvent\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n"]}

package/lib/components/Popover/usePopover.js

@@ -1,15 +1,10 @@
 import { __assign } from "tslib";
 import * as React from 'react';
-import { makeMergeProps, useControllableValue, useEventCallback, useOnClickOutside, useOnScrollOutside } from '@fluentui/react-utilities';
+import { useControllableState, useEventCallback, useOnClickOutside, useOnScrollOutside } from '@fluentui/react-utilities';
 import { useFluent } from '@fluentui/react-shared-contexts';
-import { usePopper, createVirtualElementFromClick, resolvePositioningShorthand, mergeArrowOffset } from '@fluentui/react-positioning';
+import { usePopper, resolvePositioningShorthand, mergeArrowOffset, usePopperMouseTarget } from '@fluentui/react-positioning';
 import { elementContains } from '@fluentui/react-portal';
 import { arrowHeights } from '../PopoverSurface/index';
-/**
- * Names of the shorthand properties in PopoverProps
- */
-
-var mergeProps = /*#__PURE__*/makeMergeProps({});
 /**
  * Create the state required to render Popover.
  *
@@ -21,60 +16,49 @@ var mergeProps = /*#__PURE__*/makeMergeProps({});
  */
 
 export var usePopover = function (props, defaultProps) {
-  var state = mergeProps({
-    size: 'medium',
-    open: undefined,
-    setOpen: function () {
-      return null;
-    },
-    triggerRef: {
-      current: null
-    },
-    contentRef: {
-      current: null
-    },
-    arrowRef: {
-      current: null
-    },
-    children: null,
-    setContextTarget: function () {
-      return null;
-    },
-    contextTarget: undefined
-  }, defaultProps, props);
-
-  var _a = React.useState(),
+  var _a = usePopperMouseTarget(),
       contextTarget = _a[0],
       setContextTarget = _a[1];
 
-  state.setContextTarget = setContextTarget;
-  state.contextTarget = contextTarget;
-  useOpenState(state);
-  usePopoverRefs(state);
+  var initialState = __assign({
+    size: 'medium',
+    contextTarget: contextTarget,
+    setContextTarget: setContextTarget
+  }, props);
+
+  var _b = useOpenState(initialState),
+      open = _b[0],
+      setOpen = _b[1];
+
+  var popperRefs = usePopoverRefs(initialState);
   var targetDocument = useFluent().targetDocument;
   useOnClickOutside({
     contains: elementContains,
     element: targetDocument,
     callback: function (ev) {
-      return state.setOpen(ev, false);
+      return setOpen(ev, false);
     },
-    refs: [state.triggerRef, state.contentRef],
-    disabled: !state.open
+    refs: [popperRefs.triggerRef, popperRefs.contentRef],
+    disabled: !open
   });
   useOnScrollOutside({
     contains: elementContains,
     element: targetDocument,
     callback: function (ev) {
-      return state.setOpen(ev, false);
+      return setOpen(ev, false);
     },
-    refs: [state.triggerRef, state.contentRef],
-    disabled: !state.open || !state.openOnContext
+    refs: [popperRefs.triggerRef, popperRefs.contentRef],
+    disabled: !open || !initialState.openOnContext
+  });
+  return __assign(__assign(__assign({}, initialState), popperRefs), {
+    open: open,
+    setOpen: setOpen,
+    setContextTarget: setContextTarget,
+    contextTarget: contextTarget
   });
-  return state;
 };
 /**
  * Creates and manages the Popover open state
- * @param state Popover state
  */
 
 function useOpenState(state) {
@@ -84,23 +68,26 @@ function useOpenState(state) {
     return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data);
   });
 
-  var _a = useControllableValue(state.open, state.defaultOpen),
+  var _a = useControllableState({
+    state: state.open,
+    defaultState: state.defaultOpen,
+    initialState: false
+  }),
       open = _a[0],
-      setOpen = _a[1];
+      setOpenState = _a[1];
 
   state.open = open !== undefined ? open : state.open;
   var setContextTarget = state.setContextTarget;
-  state.setOpen = React.useCallback(function (e, shouldOpen) {
+  var setOpen = React.useCallback(function (e, shouldOpen) {
     if (shouldOpen && e.type === 'contextmenu') {
-      var virtualElement = createVirtualElementFromClick(e.nativeEvent);
-      setContextTarget(virtualElement);
+      setContextTarget(e);
     }
 
     if (!shouldOpen) {
       setContextTarget(undefined);
     }
 
-    setOpen(function (prevOpen) {
+    setOpenState(function (prevOpen) {
       // More than one event (mouse, focus, keyboard) can request the Popover to close
       // We assume the first event is the correct one
       if (prevOpen !== shouldOpen) {
@@ -111,12 +98,11 @@ function useOpenState(state) {
 
       return shouldOpen;
     });
-  }, [setOpen, onOpenChange, setContextTarget]);
-  return state;
+  }, [setOpenState, onOpenChange, setContextTarget]);
+  return [open, setOpen];
 }
 /**
  * Creates and sets the necessary trigger, target and content refs used by Popover
- * @param state Popover state
  */
 
 
@@ -141,9 +127,10 @@ function usePopoverRefs(state) {
       contentRef = _a.containerRef,
       arrowRef = _a.arrowRef;
 
-  state.contentRef = contentRef;
-  state.triggerRef = triggerRef;
-  state.arrowRef = arrowRef;
-  return state;
+  return {
+    triggerRef: triggerRef,
+    contentRef: contentRef,
+    arrowRef: arrowRef
+  };
 }
 //# sourceMappingURL=usePopover.js.map