@fluentui/react-popover 9.0.0-alpha.8 → 9.0.0-nightly.f81b28ceb3.1

package/dist/react-popover.d.ts

@@ -1,19 +1,21 @@
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
-import { Context } from '@fluentui/react-context-selector';
-import { ContextSelector } from '@fluentui/react-context-selector';
-import { PopperOptions } from '@fluentui/react-positioning';
-import { PopperVirtualElement } from '@fluentui/react-positioning';
-import { PortalProps } from '@fluentui/react-portal';
+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 { ForwardRefComponent } from '@fluentui/react-utilities';
+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>;
 
 /**
  * Data attached to open/close events
  */
-export declare interface OnOpenChangeData extends Pick<PopoverState, 'open'> {
-}
+export declare type OnOpenChangeData = Pick<PopoverState, 'open'>;
 
 /**
  * The supported events that will trigger open/close of the menu
@@ -21,32 +23,15 @@ export declare interface OnOpenChangeData extends Pick<PopoverState, 'open'> {
 export declare type OpenPopoverEvents = MouseEvent | TouchEvent | React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.FocusEvent<HTMLElement>;
 
 /**
- * Popover component
+ * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
  */
 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' | 'target' | '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<PopperOptions, 'position' | 'align' | 'offset' | 'coverTarget' | 'target'>, Pick<PortalProps, 'mountNode'> {
-    children: React_2.ReactNode;
+export declare type PopoverCommons = 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
      */
@@ -74,25 +59,37 @@ export declare interface PopoverProps extends Pick<PopperOptions, 'position' | '
      */
     size?: PopoverSize;
     /**
-     * Uses brand colour as background
-     * Mutually exclusive with `inverted`
+     * A popover can appear styled with brand or inverted.
+     * When not specified, the default style is used.
      */
-    brand?: boolean;
-    /**
-     * Inverts the foreground/background colour of the popover
-     * Mutually exclusive with `brand`
-     */
-    inverted?: boolean;
+    appearance?: 'brand' | 'inverted';
     /**
      * Should trap focus
      */
     trapFocus?: boolean;
-}
+    /**
+     * Configures the position of the Popover
+     */
+    positioning?: PositioningShorthand;
+};
+
+export declare const PopoverContext: Context<PopoverContextValue>;
 
 /**
- * Names of the shorthand properties in PopoverProps
+ * Context shared between Popover and its children components
  */
-export declare type PopoverShorthandProps = never;
+export declare type PopoverContextValue = Pick<PopoverState, 'open' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus'>;
+
+/**
+ * Popover Props
+ */
+export declare type PopoverProps = 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
@@ -102,11 +99,7 @@ export declare type PopoverSize = 'small' | 'medium' | 'large';
 /**
  * Popover State
  */
-export declare interface PopoverState extends ComponentState<PopoverProps, PopoverShorthandProps, PopoverDefaultedProps> {
-    /**
-     * Open state of the Popover
-     */
-    open: boolean;
+export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children'> & {
     /**
      * Callback to open/close the Popover
      */
@@ -130,63 +123,55 @@ export declare interface PopoverState extends ComponentState<PopoverProps, Popov
     /**
      * 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: ForwardRefComponent<PopoverSurfaceProps>;
 
 /**
  * PopoverSurface Props
  */
-export declare interface PopoverSurfaceProps extends ComponentProps, React_2.HTMLAttributes<HTMLElement> {
-}
+export declare type PopoverSurfaceProps = 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 ComponentState<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 type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {
     /**
      * CSS class for the arrow element
      */
     arrowClassName?: string;
-}
+};
 
 /**
- * PopoverTrigger component
+ * Wraps a trigger element as an only child and adds the necessary event handling to open a popover.
  */
 export declare const PopoverTrigger: React_2.FC<PopoverTriggerProps>;
 
 /**
  * PopoverTrigger Props
  */
-export declare interface PopoverTriggerProps {
+export declare type PopoverTriggerProps = {
     children: React_2.ReactElement;
-}
+};
 
 /**
  * PopoverTrigger State
  */
-export declare interface PopoverTriggerState extends PopoverTriggerProps {
-}
+export declare type PopoverTriggerState = PopoverTriggerProps;
 
 /**
  * Render the final JSX of Popover
@@ -210,11 +195,10 @@ export declare const renderPopoverTrigger: (state: PopoverTriggerState) => JSX.E
  * before being passed to renderPopover.
  *
  * @param props - props from this instance of Popover
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const usePopover: (props: PopoverProps, defaultProps?: PopoverProps | undefined) => PopoverState;
+export declare const usePopover: (props: PopoverProps) => PopoverState;
 
-export declare const usePopoverContext: <T>(selector: ContextSelector<PopoverContextValue, T>) => T;
+export declare const usePopoverContext: <T>(selector: ContextSelector<Pick<PopoverState, "mountNode" | "open" | "setOpen" | "triggerRef" | "contentRef" | "openOnHover" | "openOnContext" | "noArrow" | "arrowRef" | "size" | "appearance" | "trapFocus">, T>) => T;
 
 /**
  * Create the state required to render PopoverSurface.
@@ -223,10 +207,9 @@ 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 defaultProps - (optional) default prop values provided by the implementing type
+ * @param ref - reference to root HTMLDivElement of PopoverSurface
  */
-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
@@ -240,8 +223,7 @@ export declare const usePopoverSurfaceStyles: (state: PopoverSurfaceState) => Po
  * before being passed to renderPopoverTrigger.
  *
  * @param props - props from this instance of PopoverTrigger
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const usePopoverTrigger: (props: PopoverTriggerProps, defaultProps?: PopoverTriggerProps | undefined) => PopoverTriggerState;
+export declare const usePopoverTrigger: (props: PopoverTriggerProps) => PopoverTriggerState;
 
 export { }

package/lib/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sourceRoot":"../src/","sources":["Popover.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Popover/index';\n"]}
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../src/Popover.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/lib/PopoverSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverSurface.js","sourceRoot":"../src/","sources":["PopoverSurface.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './components/PopoverSurface/index';\n"]}
+{"version":3,"file":"PopoverSurface.js","sourceRoot":"","sources":["../src/PopoverSurface.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC"}

package/lib/PopoverTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverTrigger.js","sourceRoot":"../src/","sources":["PopoverTrigger.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './components/PopoverTrigger/index';\n"]}
+{"version":3,"file":"PopoverTrigger.js","sourceRoot":"","sources":["../src/PopoverTrigger.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC"}

package/lib/common/isConformant.d.ts

@@ -1,4 +1,4 @@
-import { IsConformantOptions } from '@fluentui/react-conformance';
+import type { IsConformantOptions } from '@fluentui/react-conformance';
 export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
     componentPath?: string;
 }): void;

package/lib/common/isConformant.js

@@ -1,9 +1,13 @@
 import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
+import makeStylesTests from '@fluentui/react-conformance-make-styles';
 export function isConformant(testInfo) {
-    var defaultOptions = {
-        asPropHandlesRef: true,
-        componentPath: module.parent.filename.replace('.test', ''),
-    };
-    baseIsConformant(defaultOptions, 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);
 }
 //# sourceMappingURL=isConformant.js.map

package/lib/common/isConformant.js.map

@@ -1 +1 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAuB,MAAM,6BAA6B,CAAC;AAEpG,MAAM,UAAU,YAAY,CAC1B,QAAyF;IAEzF,IAAM,cAAc,GAAyC;QAC3D,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC7D,CAAC;IAEF,gBAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\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  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}
+{"version":3,"sources":["../../src/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","sourceRoot":""}

package/lib/common/mockUsePopoverContext.d.ts

@@ -1,4 +1,4 @@
-import { PopoverContextValue } from '../popoverContext';
+import type { PopoverContextValue } from '../popoverContext';
 /**
  * A test utility to mock the usePopoverContext hook that relies on context selector
  * Don't forget to call `jest.mock(**\/popupContext.ts)` while using this

package/lib/common/mockUsePopoverContext.js

@@ -5,12 +5,34 @@ import { usePopoverContext } from '../popoverContext';
  * Don't forget to call `jest.mock(**\/popupContext.ts)` while using this
  * @param options Popover context values to set for testing
  */
+
 export var mockPopoverContext = function (options) {
-    if (options === void 0) { options = {}; }
-    var mockContext = __assign({ open: false, setOpen: function () { return null; }, triggerRef: { current: null }, contentRef: { current: null }, arrowRef: { current: null }, target: undefined, openOnContext: false, openOnHover: false, size: 'medium' }, options);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    usePopoverContext.mockImplementation(function (selector) {
-        return selector(mockContext);
-    });
+  if (options === void 0) {
+    options = {};
+  }
+
+  var mockContext = __assign({
+    open: false,
+    setOpen: function () {
+      return null;
+    },
+    triggerRef: {
+      current: null
+    },
+    contentRef: {
+      current: null
+    },
+    arrowRef: {
+      current: null
+    },
+    openOnContext: false,
+    openOnHover: false,
+    size: 'medium'
+  }, options); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  usePopoverContext.mockImplementation(function (selector) {
+    return selector(mockContext);
+  });
 };
 //# sourceMappingURL=mockUsePopoverContext.js.map

package/lib/common/mockUsePopoverContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"mockUsePopoverContext.js","sourceRoot":"../src/","sources":["common/mockUsePopoverContext.ts"],"names":[],"mappings":";AAAA,OAAO,EAAuB,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3E;;;;GAIG;AACH,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAC,OAA0C;IAA1C,wBAAA,EAAA,YAA0C;IAC3E,IAAM,WAAW,cACf,IAAI,EAAE,KAAK,EACX,OAAO,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI,EACnB,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAC7B,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAC7B,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAC3B,MAAM,EAAE,SAAS,EACjB,aAAa,EAAE,KAAK,EACpB,WAAW,EAAE,KAAK,EAClB,IAAI,EAAE,QAAQ,IACX,OAAO,CACX,CAAC;IACF,8DAA8D;IAC7D,iBAA+B,CAAC,kBAAkB,CAAC,UAAC,QAA+C;QAClG,OAAO,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { PopoverContextValue, usePopoverContext } from '../popoverContext';\n\n/**\n * A test utility to mock the usePopoverContext hook that relies on context selector\n * Don't forget to call `jest.mock(**\\/popupContext.ts)` while using this\n * @param options Popover context values to set for testing\n */\nexport const mockPopoverContext = (options: Partial<PopoverContextValue> = {}) => {\n  const mockContext: PopoverContextValue = {\n    open: false,\n    setOpen: () => null,\n    triggerRef: { current: null },\n    contentRef: { current: null },\n    arrowRef: { current: null },\n    target: undefined,\n    openOnContext: false,\n    openOnHover: false,\n    size: 'medium',\n    ...options,\n  };\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (usePopoverContext as jest.Mock).mockImplementation((selector: (context: PopoverContextValue) => any) => {\n    return selector(mockContext);\n  });\n};\n"]}
+{"version":3,"sources":["../../src/common/mockUsePopoverContext.ts"],"names":[],"mappings":";AAAA,SAAS,iBAAT,QAAkC,mBAAlC;AAGA;;;;AAIG;;AACH,OAAO,IAAM,kBAAkB,GAAG,UAAC,OAAD,EAA2C;AAA1C,MAAA,OAAA,KAAA,KAAA,CAAA,EAAA;AAAA,IAAA,OAAA,GAAA,EAAA;AAA0C;;AAC3E,MAAM,WAAW,GAAA,QAAA,CAAA;AACf,IAAA,IAAI,EAAE,KADS;AAEf,IAAA,OAAO,EAAE,YAAA;AAAM,aAAA,IAAA;AAAI,KAFJ;AAGf,IAAA,UAAU,EAAE;AAAE,MAAA,OAAO,EAAE;AAAX,KAHG;AAIf,IAAA,UAAU,EAAE;AAAE,MAAA,OAAO,EAAE;AAAX,KAJG;AAKf,IAAA,QAAQ,EAAE;AAAE,MAAA,OAAO,EAAE;AAAX,KALK;AAMf,IAAA,aAAa,EAAE,KANA;AAOf,IAAA,WAAW,EAAE,KAPE;AAQf,IAAA,IAAI,EAAE;AARS,GAAA,EASZ,OATY,CAAjB,CAD2E,CAY3E;;;AACC,EAAA,iBAA+B,CAAC,kBAAhC,CAAmD,UAAC,QAAD,EAAgD;AAClG,WAAO,QAAQ,CAAC,WAAD,CAAf;AACD,GAFA;AAGF,CAhBM","sourceRoot":""}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { PopoverProps } from './Popover.types';
+import type { PopoverProps } from './Popover.types';
 /**
- * Popover component
+ * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
  */
 export declare const Popover: React.FC<PopoverProps>;

package/lib/components/Popover/Popover.js

@@ -1,11 +1,12 @@
 import { usePopover } from './usePopover';
 import { renderPopover } from './renderPopover';
 /**
- * Popover component
+ * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
  */
+
 export var Popover = function (props) {
-    var state = usePopover(props);
-    return renderPopover(state);
+  var state = usePopover(props);
+  return renderPopover(state);
 };
 Popover.displayName = 'Popover';
 //# sourceMappingURL=Popover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sourceRoot":"../src/","sources":["components/Popover/Popover.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;GAEG;AACH,MAAM,CAAC,IAAM,OAAO,GAA2B,UAAA,KAAK;IAClD,IAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;IAEhC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { usePopover } from './usePopover';\nimport { PopoverProps } from './Popover.types';\nimport { renderPopover } from './renderPopover';\n\n/**\n * Popover component\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n  const state = usePopover(props);\n\n  return renderPopover(state);\n};\n\nPopover.displayName = 'Popover';\n"]}
+{"version":3,"sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AACA,SAAS,UAAT,QAA2B,cAA3B;AACA,SAAS,aAAT,QAA8B,iBAA9B;AAGA;;AAEG;;AACH,OAAO,IAAM,OAAO,GAA2B,UAAA,KAAA,EAAK;AAClD,MAAM,KAAK,GAAG,UAAU,CAAC,KAAD,CAAxB;AAEA,SAAO,aAAa,CAAC,KAAD,CAApB;AACD,CAJM;AAMP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourceRoot":""}

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

@@ -1,20 +1,15 @@
 import * as React from 'react';
-import { PopperOptions, PopperVirtualElement } from '@fluentui/react-positioning';
-import { PortalProps } from '@fluentui/react-portal';
-import { ComponentState } from '@fluentui/react-utilities';
+import type { PopperVirtualElement, PositioningShorthand, usePopperMouseTarget } from '@fluentui/react-positioning';
+import type { PortalProps } from '@fluentui/react-portal';
 /**
  * Determines popover padding and arrow size
  */
 export declare type PopoverSize = 'small' | 'medium' | 'large';
-/**
- * Popover Props
- */
-export interface PopoverProps extends Pick<PopperOptions, 'position' | 'align' | 'offset' | 'coverTarget' | 'target'>, Pick<PortalProps, 'mountNode'> {
-    children: React.ReactNode;
+export declare type PopoverCommons = 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
      */
@@ -42,36 +37,33 @@ export interface PopoverProps extends Pick<PopperOptions, 'position' | 'align' |
      */
     size?: PopoverSize;
     /**
-     * Uses brand colour as background
-     * Mutually exclusive with `inverted`
+     * A popover can appear styled with brand or inverted.
+     * When not specified, the default style is used.
      */
-    brand?: boolean;
-    /**
-     * Inverts the foreground/background colour of the popover
-     * Mutually exclusive with `brand`
-     */
-    inverted?: boolean;
+    appearance?: 'brand' | 'inverted';
     /**
      * Should trap focus
      */
     trapFocus?: boolean;
-}
-/**
- * Names of the shorthand properties in PopoverProps
- */
-export declare type PopoverShorthandProps = never;
+    /**
+     * Configures the position of the Popover
+     */
+    positioning?: PositioningShorthand;
+};
 /**
- * Names of PopoverProps that have a default value in usePopover
+ * Popover Props
  */
-export declare type PopoverDefaultedProps = never;
+export declare type PopoverProps = 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 ComponentState<PopoverProps, PopoverShorthandProps, PopoverDefaultedProps> {
-    /**
-     * Open state of the Popover
-     */
-    open: boolean;
+export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children'> & {
     /**
      * Callback to open/close the Popover
      */
@@ -95,14 +87,13 @@ export interface PopoverState extends ComponentState<PopoverProps, PopoverShorth
     /**
      * 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']>;
-}
+};
 /**
  * Data attached to open/close events
  */
-export interface OnOpenChangeData extends Pick<PopoverState, 'open'> {
-}
+export declare type OnOpenChangeData = Pick<PopoverState, 'open'>;
 /**
  * The supported events that will trigger open/close of the menu
  */

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 { PopperOptions, PopperVirtualElement } from '@fluentui/react-positioning';\nimport { PortalProps } from '@fluentui/react-portal';\nimport { ComponentState } 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\n  extends Pick<PopperOptions, 'position' | 'align' | 'offset' | 'coverTarget' | 'target'>,\n    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/**\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 ComponentState<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":"","sources":["../../../src/components/Popover/Popover.types.ts"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC","sourcesContent":["export * from './Popover';\nexport * from './Popover.types';\nexport * from './renderPopover';\nexport * from './usePopover';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC"}

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

@@ -1,4 +1,4 @@
-import { PopoverState } from './Popover.types';
+import type { PopoverState } from './Popover.types';
 /**
  * Render the final JSX of Popover
  */

package/lib/components/Popover/renderPopover.js

@@ -3,23 +3,35 @@ import { PopoverContext } from '../../popoverContext';
 /**
  * Render the final JSX of Popover
  */
+
 export var renderPopover = function (state) {
-    var open = state.open, setOpen = state.setOpen, triggerRef = state.triggerRef, contentRef = state.contentRef, target = state.target, openOnContext = state.openOnContext, openOnHover = state.openOnHover, mountNode = state.mountNode, arrowRef = state.arrowRef, size = state.size, noArrow = state.noArrow, brand = state.brand, inverted = state.inverted, trapFocus = state.trapFocus;
-    return (React.createElement(PopoverContext.Provider, { value: {
-            open: open,
-            setOpen: setOpen,
-            triggerRef: triggerRef,
-            contentRef: contentRef,
-            target: target,
-            openOnHover: openOnHover,
-            openOnContext: openOnContext,
-            mountNode: mountNode,
-            arrowRef: arrowRef,
-            size: size,
-            noArrow: noArrow,
-            brand: brand,
-            inverted: inverted,
-            trapFocus: trapFocus,
-        } }, state.children));
+  var open = state.open,
+      setOpen = state.setOpen,
+      triggerRef = state.triggerRef,
+      contentRef = state.contentRef,
+      openOnContext = state.openOnContext,
+      openOnHover = state.openOnHover,
+      mountNode = state.mountNode,
+      arrowRef = state.arrowRef,
+      size = state.size,
+      noArrow = state.noArrow,
+      appearance = state.appearance,
+      trapFocus = state.trapFocus;
+  return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
+    value: {
+      open: open,
+      setOpen: setOpen,
+      triggerRef: triggerRef,
+      contentRef: contentRef,
+      openOnHover: openOnHover,
+      openOnContext: openOnContext,
+      mountNode: mountNode,
+      arrowRef: arrowRef,
+      size: size,
+      noArrow: noArrow,
+      appearance: appearance,
+      trapFocus: trapFocus
+    }
+  }, state.children);
 };
 //# sourceMappingURL=renderPopover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderPopover.js","sourceRoot":"../src/","sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGtD;;GAEG;AACH,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,KAAmB;IAE7C,IAAA,IAAI,GAcF,KAAK,KAdH,EACJ,OAAO,GAaL,KAAK,QAbA,EACP,UAAU,GAYR,KAAK,WAZG,EACV,UAAU,GAWR,KAAK,WAXG,EACV,MAAM,GAUJ,KAAK,OAVD,EACN,aAAa,GASX,KAAK,cATM,EACb,WAAW,GAQT,KAAK,YARI,EACX,SAAS,GAOP,KAAK,UAPE,EACT,QAAQ,GAMN,KAAK,SANC,EACR,IAAI,GAKF,KAAK,KALH,EACJ,OAAO,GAIL,KAAK,QAJA,EACP,KAAK,GAGH,KAAK,MAHF,EACL,QAAQ,GAEN,KAAK,SAFC,EACR,SAAS,GACP,KAAK,UADE,CACD;IAEV,OAAO,CACL,oBAAC,cAAc,CAAC,QAAQ,IACtB,KAAK,EAAE;YACL,IAAI,MAAA;YACJ,OAAO,SAAA;YACP,UAAU,YAAA;YACV,UAAU,YAAA;YACV,MAAM,QAAA;YACN,WAAW,aAAA;YACX,aAAa,eAAA;YACb,SAAS,WAAA;YACT,QAAQ,UAAA;YACR,IAAI,MAAA;YACJ,OAAO,SAAA;YACP,KAAK,OAAA;YACL,QAAQ,UAAA;YACR,SAAS,WAAA;SACV,IAEA,KAAK,CAAC,QAAQ,CACS,CAC3B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport { PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover = (state: PopoverState) => {\n  const {\n    open,\n    setOpen,\n    triggerRef,\n    contentRef,\n    target,\n    openOnContext,\n    openOnHover,\n    mountNode,\n    arrowRef,\n    size,\n    noArrow,\n    brand,\n    inverted,\n    trapFocus,\n  } = state;\n\n  return (\n    <PopoverContext.Provider\n      value={{\n        open,\n        setOpen,\n        triggerRef,\n        contentRef,\n        target,\n        openOnHover,\n        openOnContext,\n        mountNode,\n        arrowRef,\n        size,\n        noArrow,\n        brand,\n        inverted,\n        trapFocus,\n      }}\n    >\n      {state.children}\n    </PopoverContext.Provider>\n  );\n};\n"]}
+{"version":3,"sources":["../../../src/components/Popover/renderPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,sBAA/B;AAGA;;AAEG;;AACH,OAAO,IAAM,aAAa,GAAG,UAAC,KAAD,EAAoB;AAE7C,MAAA,IAAI,GAYF,KAAK,CAZH,IAAJ;AAAA,MACA,OAAO,GAWL,KAAK,CAXA,OADP;AAAA,MAEA,UAAU,GAUR,KAAK,CAVG,UAFV;AAAA,MAGA,UAAU,GASR,KAAK,CATG,UAHV;AAAA,MAIA,aAAa,GAQX,KAAK,CARM,aAJb;AAAA,MAKA,WAAW,GAOT,KAAK,CAPI,WALX;AAAA,MAMA,SAAS,GAMP,KAAK,CANE,SANT;AAAA,MAOA,QAAQ,GAKN,KAAK,CALC,QAPR;AAAA,MAQA,IAAI,GAIF,KAAK,CAJH,IARJ;AAAA,MASA,OAAO,GAGL,KAAK,CAHA,OATP;AAAA,MAUA,UAAU,GAER,KAAK,CAFG,UAVV;AAAA,MAWA,SAAS,GACP,KAAK,CADE,SAXT;AAcF,sBACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;AACtB,IAAA,KAAK,EAAE;AACL,MAAA,IAAI,EAAA,IADC;AAEL,MAAA,OAAO,EAAA,OAFF;AAGL,MAAA,UAAU,EAAA,UAHL;AAIL,MAAA,UAAU,EAAA,UAJL;AAKL,MAAA,WAAW,EAAA,WALN;AAML,MAAA,aAAa,EAAA,aANR;AAOL,MAAA,SAAS,EAAA,SAPJ;AAQL,MAAA,QAAQ,EAAA,QARH;AASL,MAAA,IAAI,EAAA,IATC;AAUL,MAAA,OAAO,EAAA,OAVF;AAWL,MAAA,UAAU,EAAA,UAXL;AAYL,MAAA,SAAS,EAAA;AAZJ;AADe,GAAxB,EAgBG,KAAK,CAAC,QAhBT,CADF;AAoBD,CApCM","sourceRoot":""}

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

@@ -1,4 +1,4 @@
-import { PopoverProps, PopoverState } from './Popover.types';
+import type { PopoverProps, PopoverState } from './Popover.types';
 /**
  * Create the state required to render Popover.
  *
@@ -6,6 +6,5 @@ import { PopoverProps, PopoverState } from './Popover.types';
  * before being passed to renderPopover.
  *
  * @param props - props from this instance of Popover
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const usePopover: (props: PopoverProps, defaultProps?: PopoverProps | undefined) => PopoverState;
+export declare const usePopover: (props: PopoverProps) => PopoverState;