@fluentui/react-popover 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.11

package/Spec.md

@@ -238,6 +238,11 @@ export type PopoverProps = {
    */
   onOpenChange?: (e: OpenPopoverEvents, data: OpenEventData) => void;
 
+  /**
+   * Flag to open the Popover by hovering the trigger
+   */
+  openOnHover?: boolean;
+
   /**
    * Anchor the popover to an element other than the trigger
    */
@@ -284,6 +289,16 @@ export type PopoverProps = {
    * Do not render an arrow pointing to the target element. This is the `PopoverTrigger` unless `target` prop is used
    */
   noArrow?: boolean;
+
+  /**
+   * Sets the delay for closing popover on mouse leave
+   */
+  mouseLeaveDelay?: number;
+
+  /**
+   * Close when scrolling outside of it
+   */
+  closeOnScroll?: boolean;
 };
 ```
 
@@ -445,6 +460,11 @@ The popover closes with the escape key when the trigger or popover content has f
 
 The popover closes when a click happens outside the popover trigger or content.
 
+#### Scroll outside
+
+The context menu popover closes when scroll happens outside the popover trigger or content.
+When popover is configured with `closeOnScroll`, popover closes when scroll happens outside the popover trigger or content.
+
 ### Focus trap
 
 When the popover is configured to be a focus trap, focus the first focusable element inside the popover on open.

package/dist/{react-popover.d.ts → index.d.ts}

@@ -1,95 +1,127 @@
 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 { FC } from 'react';
+import type { FluentTriggerComponent } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
-import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
-import type { PopperVirtualElement } from '@fluentui/react-positioning';
+import { JSXElementConstructor } from 'react';
 import type { PortalProps } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
+import type { PositioningVirtualElement } from '@fluentui/react-positioning';
+import { Provider } from 'react';
+import { ProviderProps } from 'react';
 import * as React_2 from 'react';
-import type { usePopperMouseTarget } from '@fluentui/react-positioning';
+import { ReactElement } from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { usePositioningMouseTarget } from '@fluentui/react-positioning';
 
 export declare const arrowHeights: Record<PopoverSize, number>;
 
 /**
  * Data attached to open/close events
  */
-export declare type OnOpenChangeData = Pick<PopoverState, 'open'>;
+export declare type OnOpenChangeData = {
+    open: boolean;
+};
 
 /**
  * The supported events that will trigger open/close of the menu
  */
-export declare type OpenPopoverEvents = MouseEvent | TouchEvent | React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.FocusEvent<HTMLElement>;
+export declare type OpenPopoverEvents = MouseEvent | TouchEvent | React_2.FocusEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
 
 /**
  * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.
  */
 export declare const Popover: React_2.FC<PopoverProps>;
 
-export declare type PopoverCommons = Pick<PortalProps, 'mountNode'> & {
+/**
+ * Context shared between Popover and its children components
+ */
+export declare type PopoverContextValue = Pick<PopoverState, 'toggleOpen' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus' | 'inline'>;
+
+/**
+ * Popover Props
+ */
+export declare type PopoverProps = Pick<PortalProps, 'mountNode'> & {
     /**
-     * Controls the opening of the Popover
+     * A popover can appear styled with brand or inverted.
+     * When not specified, the default style is used.
      */
-    open: boolean;
+    appearance?: 'brand' | 'inverted';
+    /**
+     * Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.
+     * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.
+     */
+    children: [JSX.Element, JSX.Element] | JSX.Element;
+    /**
+     * Close when scroll outside of it
+     *
+     * @default false
+     */
+    closeOnScroll?: boolean;
     /**
      * Used to set the initial open state of the Popover in uncontrolled mode
+     *
+     * @default false
      */
     defaultOpen?: boolean;
+    /**
+     * Popovers are rendered out of DOM order on `document.body` by default, use this to render the popover in DOM order
+     *
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Sets the delay for closing popover on mouse leave
+     */
+    mouseLeaveDelay?: number;
+    /**
+     * Do not display the arrow
+     */
+    noArrow?: boolean;
     /**
      * Call back when the component requests to change value
      * The `open` value is used as a hint when directly controlling the component
      */
     onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;
     /**
-     * Flag to open the Popover by hovering the trigger
+     * Controls the opening of the Popover
+     *
+     * @default false
      */
-    openOnHover?: boolean;
+    open?: boolean;
     /**
      * Flag to open the Popover as a context menu. Disables all other interactions
+     *
+     * @default false
      */
     openOnContext?: boolean;
     /**
-     * Do not display the arrow
+     * Flag to open the Popover by hovering the trigger
+     *
+     * @default false
      */
-    noArrow?: boolean;
+    openOnHover?: boolean;
+    /**
+     * Configures the position of the Popover
+     */
+    positioning?: PositioningShorthand;
     /**
      * Determines popover padding and arrow size
+     *
      * @default medium
      */
     size?: PopoverSize;
-    /**
-     * A popover can appear styled with brand or inverted.
-     * When not specified, the default style is used.
-     */
-    appearance?: 'brand' | 'inverted';
     /**
      * Should trap focus
+     *
+     * @default false
      */
     trapFocus?: boolean;
-    /**
-     * Configures the position of the Popover
-     */
-    positioning?: PositioningShorthand;
 };
 
-export declare const PopoverContext: Context<PopoverContextValue>;
-
-/**
- * Context shared between Popover and its children components
- */
-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;
-};
+export declare const PopoverProvider: Provider<PopoverContextValue> & FC<ProviderProps<PopoverContextValue>>;
 
 /**
  * Determines popover padding and arrow size
@@ -99,32 +131,38 @@ export declare type PopoverSize = 'small' | 'medium' | 'large';
 /**
  * Popover State
  */
-export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children'> & {
+export declare type PopoverState = Pick<PopoverProps, 'appearance' | 'mountNode' | 'noArrow' | 'onOpenChange' | 'openOnContext' | 'openOnHover' | 'trapFocus'> & Required<Pick<PopoverProps, 'inline' | 'open'>> & Pick<PopoverProps, 'children'> & {
     /**
-     * Callback to open/close the Popover
-     */
-    setOpen: (e: OpenPopoverEvents, open: boolean) => void;
-    /**
-     * Ref of the PopoverTrigger
+     * Ref of the pointing arrow
      */
-    triggerRef: React_2.MutableRefObject<HTMLElement | null>;
+    arrowRef: React_2.MutableRefObject<HTMLDivElement | null>;
     /**
      * Ref of the PopoverSurface
      */
     contentRef: React_2.MutableRefObject<HTMLElement | null>;
-    /**
-     * Ref of the pointing arrow
-     */
-    arrowRef: React_2.MutableRefObject<HTMLDivElement | null>;
     /**
      * Anchors the popper to the mouse click for context events
      */
-    contextTarget: PopperVirtualElement | undefined;
+    contextTarget: PositioningVirtualElement | undefined;
+    popoverSurface: React_2.ReactElement | undefined;
+    popoverTrigger: React_2.ReactElement | undefined;
     /**
      * A callback to set the target of the popper to the mouse click for context events
      */
-    setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
+    setContextTarget: ReturnType<typeof usePositioningMouseTarget>[1];
+    /**
+     * Callback to open/close the Popover
+     */
+    setOpen: (e: OpenPopoverEvents, open: boolean) => void;
     size: NonNullable<PopoverProps['size']>;
+    /**
+     * Callback to toggle the open state of the Popover
+     */
+    toggleOpen: (e: OpenPopoverEvents) => void;
+    /**
+     * Ref of the PopoverTrigger
+     */
+    triggerRef: React_2.MutableRefObject<HTMLElement | null>;
 };
 
 /**
@@ -132,6 +170,8 @@ export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children
  */
 export declare const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;
 
+export declare const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
+
 /**
  * PopoverSurface Props
  */
@@ -141,15 +181,13 @@ export declare type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;
  * Names of the slots in PopoverSurfaceProps
  */
 export declare type PopoverSurfaceSlots = {
-    root: IntrinsicShorthandProps<'div'>;
+    root: Slot<'div'>;
 };
 
-export declare const popoverSurfaceSlots: Array<keyof PopoverSurfaceSlots>;
-
 /**
  * PopoverSurface State
  */
-export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {
+export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'appearance' | 'arrowRef' | 'inline' | 'mountNode' | 'noArrow' | 'size'> & {
     /**
      * CSS class for the arrow element
      */
@@ -159,71 +197,79 @@ export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> &
 /**
  * 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>;
+export declare const PopoverTrigger: React_2.FC<PopoverTriggerProps> & FluentTriggerComponent;
+
+export declare type PopoverTriggerChildProps = {
+    ref?: React_2.Ref<never>;
+} & Pick<React_2.HTMLAttributes<HTMLElement>, 'aria-haspopup' | 'onClick' | 'onContextMenu' | 'onKeyDown' | 'onMouseEnter' | 'onMouseLeave'>;
 
 /**
  * PopoverTrigger Props
  */
 export declare type PopoverTriggerProps = {
-    children: React_2.ReactElement;
+    children: (React_2.ReactElement & {
+        ref?: React_2.Ref<unknown>;
+    }) | ((props: PopoverTriggerChildProps) => React_2.ReactElement | null);
 };
 
 /**
  * PopoverTrigger State
  */
-export declare type PopoverTriggerState = PopoverTriggerProps;
+export declare type PopoverTriggerState = {
+    children: React_2.ReactElement | null;
+};
 
 /**
  * Render the final JSX of Popover
  */
-export declare const renderPopover: (state: PopoverState) => JSX.Element;
+export declare const renderPopover_unstable: (state: PopoverState) => JSX.Element;
 
 /**
  * Render the final JSX of PopoverSurface
  */
-export declare const renderPopoverSurface: (state: PopoverSurfaceState) => JSX.Element | null;
+export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element;
 
 /**
  * Render the final JSX of PopoverTrigger
  */
-export declare const renderPopoverTrigger: (state: PopoverTriggerState) => JSX.Element;
+export declare const renderPopoverTrigger_unstable: (state: PopoverTriggerState) => ReactElement<any, string | JSXElementConstructor<any>> | null;
 
 /**
  * Create the state required to render Popover.
  *
  * The returned state can be modified with hooks such as usePopoverStyles,
- * before being passed to renderPopover.
+ * before being passed to renderPopover_unstable.
  *
  * @param props - props from this instance of Popover
  */
-export declare const usePopover: (props: PopoverProps) => PopoverState;
+export declare const usePopover_unstable: (props: PopoverProps) => PopoverState;
 
-export declare const usePopoverContext: <T>(selector: ContextSelector<Pick<PopoverState, "mountNode" | "open" | "setOpen" | "triggerRef" | "contentRef" | "openOnHover" | "openOnContext" | "noArrow" | "arrowRef" | "size" | "appearance" | "trapFocus">, T>) => T;
+export declare const usePopoverContext_unstable: <T>(selector: ContextSelector<PopoverContextValue, T>) => T;
 
 /**
  * Create the state required to render PopoverSurface.
  *
- * The returned state can be modified with hooks such as usePopoverSurfaceStyles,
- * before being passed to renderPopoverSurface.
+ * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,
+ * before being passed to renderPopoverSurface_unstable.
  *
  * @param props - props from this instance of PopoverSurface
  * @param ref - reference to root HTMLDivElement of PopoverSurface
  */
-export declare const usePopoverSurface: (props: PopoverSurfaceProps, ref: React_2.Ref<HTMLDivElement>) => PopoverSurfaceState;
+export declare const usePopoverSurface_unstable: (props: PopoverSurfaceProps, ref: React_2.Ref<HTMLDivElement>) => PopoverSurfaceState;
 
 /**
  * Apply styling to the PopoverSurface slots based on the state
  */
-export declare const usePopoverSurfaceStyles: (state: PopoverSurfaceState) => PopoverSurfaceState;
+export declare const usePopoverSurfaceStyles_unstable: (state: PopoverSurfaceState) => PopoverSurfaceState;
 
 /**
  * Create the state required to render PopoverTrigger.
  *
  * The returned state can be modified with hooks such as usePopoverTriggerStyles,
- * before being passed to renderPopoverTrigger.
+ * before being passed to renderPopoverTrigger_unstable.
  *
  * @param props - props from this instance of PopoverTrigger
  */
-export declare const usePopoverTrigger: (props: PopoverTriggerProps) => PopoverTriggerState;
+export declare const usePopoverTrigger_unstable: (props: PopoverTriggerProps) => PopoverTriggerState;
 
 export { }

package/lib/Popover.js.map

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

package/lib/PopoverSurface.js.map

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

package/lib/PopoverTrigger.js.map

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

package/lib/components/Popover/Popover.js

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

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"sources":["components/Popover/Popover.tsx"],"names":[],"mappings":"AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AAGA;;AAEG;;AACH,OAAO,MAAM,OAAO,GAA2B,KAAK,IAAG;AACrD,QAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,CAAjC;AAEA,SAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CAJM;AAMP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { usePopover_unstable } from './usePopover';\nimport { renderPopover_unstable } from './renderPopover';\nimport type { PopoverProps } from './Popover.types';\n\n/**\n * Wrapper component that manages state for a PopoverTrigger and a PopoverSurface components.\n */\nexport const Popover: React.FC<PopoverProps> = props => {\n  const state = usePopover_unstable(props);\n\n  return renderPopover_unstable(state);\n};\n\nPopover.displayName = 'Popover';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.types.js","sourceRoot":"","sources":["../../../src/components/Popover/Popover.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Popover.types.js","sourceRoot":"../src/","sources":["components/Popover/Popover.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type {\n  PositioningVirtualElement,\n  PositioningShorthand,\n  usePositioningMouseTarget,\n} 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\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   * Do not display the arrow\n   */\n  noArrow?: 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?: boolean;\n};\n\n/**\n * Popover State\n */\nexport type PopoverState = Pick<\n  PopoverProps,\n  'appearance' | 'mountNode' | 'noArrow' | 'onOpenChange' | 'openOnContext' | 'openOnHover' | 'trapFocus'\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: ReturnType<typeof usePositioningMouseTarget>[1];\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/index.js.map

@@ -1 +1 @@
-{"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"}
+{"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"]}

package/lib/components/Popover/renderPopover.js

@@ -4,34 +4,38 @@ 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,
-      openOnContext = state.openOnContext,
-      openOnHover = state.openOnHover,
-      mountNode = state.mountNode,
-      arrowRef = state.arrowRef,
-      size = state.size,
-      noArrow = state.noArrow,
-      appearance = state.appearance,
-      trapFocus = state.trapFocus;
+export const renderPopover_unstable = state => {
+  const {
+    appearance,
+    arrowRef,
+    contentRef,
+    inline,
+    mountNode,
+    noArrow,
+    openOnContext,
+    openOnHover,
+    setOpen,
+    size,
+    toggleOpen,
+    trapFocus,
+    triggerRef
+  } = state;
   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
+      appearance,
+      arrowRef,
+      contentRef,
+      inline,
+      mountNode,
+      noArrow,
+      openOnContext,
+      openOnHover,
+      setOpen,
+      toggleOpen,
+      triggerRef,
+      size,
+      trapFocus
     }
-  }, state.children);
+  }, state.popoverTrigger, state.open && state.popoverSurface);
 };
 //# sourceMappingURL=renderPopover.js.map

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"sources":["components/Popover/renderPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,sBAA/B;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AACJ,IAAA,UADI;AAEJ,IAAA,QAFI;AAGJ,IAAA,UAHI;AAIJ,IAAA,MAJI;AAKJ,IAAA,SALI;AAMJ,IAAA,OANI;AAOJ,IAAA,aAPI;AAQJ,IAAA,WARI;AASJ,IAAA,OATI;AAUJ,IAAA,IAVI;AAWJ,IAAA,UAXI;AAYJ,IAAA,SAZI;AAaJ,IAAA;AAbI,MAcF,KAdJ;AAgBA,sBACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;AACtB,IAAA,KAAK,EAAE;AACL,MAAA,UADK;AAEL,MAAA,QAFK;AAGL,MAAA,UAHK;AAIL,MAAA,MAJK;AAKL,MAAA,SALK;AAML,MAAA,OANK;AAOL,MAAA,aAPK;AAQL,MAAA,WARK;AASL,MAAA,OATK;AAUL,MAAA,UAVK;AAWL,MAAA,UAXK;AAYL,MAAA,IAZK;AAaL,MAAA;AAbK;AADe,GAAxB,EAiBG,KAAK,CAAC,cAjBT,EAkBG,KAAK,CAAC,IAAN,IAAc,KAAK,CAAC,cAlBvB,CADF;AAsBD,CAvCM","sourcesContent":["import * as React from 'react';\nimport { PopoverContext } from '../../popoverContext';\nimport type { PopoverState } from './Popover.types';\n\n/**\n * Render the final JSX of Popover\n */\nexport const renderPopover_unstable = (state: PopoverState) => {\n  const {\n    appearance,\n    arrowRef,\n    contentRef,\n    inline,\n    mountNode,\n    noArrow,\n    openOnContext,\n    openOnHover,\n    setOpen,\n    size,\n    toggleOpen,\n    trapFocus,\n    triggerRef,\n  } = state;\n\n  return (\n    <PopoverContext.Provider\n      value={{\n        appearance,\n        arrowRef,\n        contentRef,\n        inline,\n        mountNode,\n        noArrow,\n        openOnContext,\n        openOnHover,\n        setOpen,\n        toggleOpen,\n        triggerRef,\n        size,\n        trapFocus,\n      }}\n    >\n      {state.popoverTrigger}\n      {state.open && state.popoverSurface}\n    </PopoverContext.Provider>\n  );\n};\n"],"sourceRoot":"../src/"}