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

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

@@ -1 +1 @@
-{"version":3,"file":"usePopover.js","sourceRoot":"../src/","sources":["components/Popover/usePopover.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  makeMergeProps,\n  useControllableValue,\n  useEventCallback,\n  useOnClickOutside,\n  useOnScrollOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  usePopper,\n  createVirtualElementFromClick,\n  resolvePositioningShorthand,\n  mergeArrowOffset,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { PopperVirtualElement } from '@fluentui/react-positioning';\nimport type { PopoverProps, PopoverState } from './Popover.types';\n\n/**\n * Names of the shorthand properties in PopoverProps\n */\nconst mergeProps = makeMergeProps<PopoverState>({});\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.\n *\n * @param props - props from this instance of Popover\n * @param defaultProps - (optional) default prop values provided by the implementing type\n */\nexport const usePopover = (props: PopoverProps, defaultProps?: PopoverProps): PopoverState => {\n  const state = mergeProps(\n    {\n      size: 'medium',\n      open: (undefined as unknown) as boolean, // mergeProps typings require this\n      setOpen: () => null,\n      triggerRef: { current: null },\n      contentRef: { current: null },\n      arrowRef: { current: null },\n      children: null,\n      setContextTarget: () => null,\n      contextTarget: undefined,\n    },\n    defaultProps,\n    props,\n  );\n\n  const [contextTarget, setContextTarget] = React.useState<PopperVirtualElement>();\n  state.setContextTarget = setContextTarget;\n  state.contextTarget = contextTarget;\n\n  useOpenState(state);\n  usePopoverRefs(state);\n\n  const { targetDocument } = useFluent();\n  useOnClickOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => state.setOpen(ev, false),\n    refs: [state.triggerRef, state.contentRef],\n    disabled: !state.open,\n  });\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => state.setOpen(ev, false),\n    refs: [state.triggerRef, state.contentRef],\n    disabled: !state.open || !state.openOnContext, // only close on scroll for context\n  });\n\n  return state;\n};\n\n/**\n * Creates and manages the Popover open state\n * @param state Popover state\n */\nfunction useOpenState(state: PopoverState): PopoverState {\n  const onOpenChange: PopoverState['onOpenChange'] = useEventCallback((e, data) => state.onOpenChange?.(e, data));\n\n  const [open, setOpen] = useControllableValue(state.open, state.defaultOpen);\n  state.open = open !== undefined ? open : state.open;\n  const setContextTarget = state.setContextTarget;\n\n  state.setOpen = React.useCallback(\n    (e, shouldOpen) => {\n      if (shouldOpen && e.type === 'contextmenu') {\n        const virtualElement = createVirtualElementFromClick((e as React.MouseEvent).nativeEvent);\n        setContextTarget(virtualElement);\n      }\n\n      if (!shouldOpen) {\n        setContextTarget(undefined);\n      }\n\n      setOpen(prevOpen => {\n        // More than one event (mouse, focus, keyboard) can request the Popover to close\n        // We assume the first event is the correct one\n        if (prevOpen !== shouldOpen) {\n          onOpenChange?.(e, { open: shouldOpen });\n        }\n\n        return shouldOpen;\n      });\n    },\n    [setOpen, onOpenChange, setContextTarget],\n  );\n\n  return state;\n}\n\n/**\n * Creates and sets the necessary trigger, target and content refs used by Popover\n * @param state Popover state\n */\nfunction usePopoverRefs(state: PopoverState): PopoverState {\n  const popperOptions = {\n    position: 'above' as const,\n    align: 'center' as const,\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 (popperOptions.coverTarget) {\n    state.noArrow = true;\n  }\n\n  if (!state.noArrow) {\n    popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeights[state.size]);\n  }\n\n  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePopper(popperOptions);\n\n  state.contentRef = contentRef;\n  state.triggerRef = triggerRef;\n  state.arrowRef = arrowRef;\n\n  return state;\n}\n"]}
+{"version":3,"file":"usePopover.js","sourceRoot":"../src/","sources":["components/Popover/usePopover.ts"],"names":[],"mappings":";;;;IAkBA;;;;;;;;OAQG;IACI,IAAM,UAAU,GAAG,UAAC,KAAmB,EAAE,YAA2B;QACnE,IAAA,KAAoC,wCAAoB,EAAE,EAAzD,aAAa,QAAA,EAAE,gBAAgB,QAA0B,CAAC;QACjE,IAAM,YAAY,GAAG,mBACnB,IAAI,EAAE,QAAQ,EACd,aAAa,eAAA;YACb,gBAAgB,kBAAA,IACb,KAAK,CACA,CAAC;QAEL,IAAA,KAAkB,YAAY,CAAC,YAAY,CAAC,EAA3C,IAAI,QAAA,EAAE,OAAO,QAA8B,CAAC;QACnD,IAAM,UAAU,GAAG,cAAc,CAAC,YAAY,CAAC,CAAC;QAExC,IAAA,cAAc,GAAK,iCAAS,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,UAAU,CAAC,UAAU,EAAE,UAAU,CAAC,UAAU,CAAC;YACpD,QAAQ,EAAE,CAAC,IAAI;SAChB,CAAC,CAAC;QACH,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,UAAU,CAAC,UAAU,EAAE,UAAU,CAAC,UAAU,CAAC;YACpD,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa;SAC/C,CAAC,CAAC;QAEH,8DACK,YAAY,GACZ,UAAU,KACb,IAAI,MAAA;YACJ,OAAO,SAAA;YACP,gBAAgB,kBAAA;YAChB,aAAa,eAAA,IACb;IACJ,CAAC,CAAC;IApCW,QAAA,UAAU,cAoCrB;IAEF;;OAEG;IACH,SAAS,YAAY,CACnB,KAA2G;QAE3G,IAAM,YAAY,GAAiC,kCAAgB,CAAC,UAAC,CAAC,EAAE,IAAI,yBAAK,KAAK,CAAC,YAAY,+CAAlB,KAAK,EAAgB,CAAC,EAAE,IAAI,IAAC,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,UAAA,QAAQ;gBACnB,gFAAgF;gBAChF,+CAA+C;gBAC/C,IAAI,QAAQ,KAAK,UAAU,EAAE;oBAC3B,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,CAAC,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE;iBACzC;gBAED,OAAO,UAAU,CAAC;YACpB,CAAC,CAAC,CAAC;QACL,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,KAAqH;QAErH,IAAM,aAAa,sBACjB,QAAQ,EAAE,OAAgB,EAC1B,KAAK,EAAE,QAAiB,EACxB,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,aAAa,CAAC,WAAW,EAAE;YAC7B,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;SACtB;QAED,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;YAClB,aAAa,CAAC,MAAM,GAAG,oCAAgB,CAAC,aAAa,CAAC,MAAM,EAAE,oBAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;SACzF;QAEK,IAAA,KAAgE,6BAAS,CAAC,aAAa,CAAC,EAA3E,UAAU,eAAA,EAAgB,UAAU,kBAAA,EAAE,QAAQ,cAA6B,CAAC;QAE/F,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 } from '@fluentui/react-shared-contexts';\nimport {\n  usePopper,\n  resolvePositioningShorthand,\n  mergeArrowOffset,\n  usePopperMouseTarget,\n} from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport type { OpenPopoverEvents, PopoverProps, PopoverState } from './Popover.types';\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.\n *\n * @param props - props from this instance of Popover\n * @param defaultProps - (optional) default prop values provided by the implementing type\n */\nexport const usePopover = (props: PopoverProps, defaultProps?: PopoverProps): PopoverState => {\n  const [contextTarget, setContextTarget] = usePopperMouseTarget();\n  const initialState = {\n    size: 'medium',\n    contextTarget,\n    setContextTarget,\n    ...props,\n  } as const;\n\n  const [open, setOpen] = useOpenState(initialState);\n  const popperRefs = usePopoverRefs(initialState);\n\n  const { targetDocument } = useFluent();\n  useOnClickOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [popperRefs.triggerRef, popperRefs.contentRef],\n    disabled: !open,\n  });\n  useOnScrollOutside({\n    contains: elementContains,\n    element: targetDocument,\n    callback: ev => setOpen(ev, false),\n    refs: [popperRefs.triggerRef, popperRefs.contentRef],\n    disabled: !open || !initialState.openOnContext, // only close on scroll for context\n  });\n\n  return {\n    ...initialState,\n    ...popperRefs,\n    open,\n    setOpen,\n    setContextTarget,\n    contextTarget,\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(prevOpen => {\n        // More than one event (mouse, focus, keyboard) can request the Popover to close\n        // We assume the first event is the correct one\n        if (prevOpen !== shouldOpen) {\n          onOpenChange?.(e, { open: shouldOpen });\n        }\n\n        return shouldOpen;\n      });\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'> & Pick<PopoverProps, 'positioning' | 'openOnContext' | 'noArrow'>,\n) {\n  const popperOptions = {\n    position: 'above' as const,\n    align: 'center' as const,\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 (popperOptions.coverTarget) {\n    state.noArrow = true;\n  }\n\n  if (!state.noArrow) {\n    popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeights[state.size]);\n  }\n\n  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePopper(popperOptions);\n\n  return {\n    triggerRef,\n    contentRef,\n    arrowRef,\n  } as const;\n}\n"]}

package/lib-amd/components/PopoverSurface/PopoverSurface.d.ts

@@ -3,4 +3,4 @@ import type { PopoverSurfaceProps } from './PopoverSurface.types';
 /**
  * PopoverSurface component renders react children in a positioned box
  */
-export declare const PopoverSurface: React.ForwardRefExoticComponent<PopoverSurfaceProps & React.RefAttributes<HTMLElement>>;
+export declare const PopoverSurface: React.ForwardRefExoticComponent<PopoverSurfaceProps & React.RefAttributes<HTMLDivElement>>;

package/lib-amd/components/PopoverSurface/PopoverSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverSurface.js","sourceRoot":"../src/","sources":["components/PopoverSurface/PopoverSurface.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,cAAc,GAAG,KAAK,CAAC,UAAU,CAAmC,UAAC,KAAK,EAAE,GAAG;QAC1F,IAAM,KAAK,GAAG,qCAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE5C,iDAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,2CAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import * as React from 'react';\nimport { usePopoverSurface } from './usePopoverSurface';\nimport { renderPopoverSurface } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles } from './usePopoverSurfaceStyles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface = React.forwardRef<HTMLElement, PopoverSurfaceProps>((props, ref) => {\n  const state = usePopoverSurface(props, ref);\n\n  usePopoverSurfaceStyles(state);\n  return renderPopoverSurface(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"]}
+{"version":3,"file":"PopoverSurface.js","sourceRoot":"../src/","sources":["components/PopoverSurface/PopoverSurface.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACU,QAAA,cAAc,GAAG,KAAK,CAAC,UAAU,CAAsC,UAAC,KAAK,EAAE,GAAG;QAC7F,IAAM,KAAK,GAAG,qCAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE5C,iDAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,2CAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import * as React from 'react';\nimport { usePopoverSurface } from './usePopoverSurface';\nimport { renderPopoverSurface } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles } from './usePopoverSurfaceStyles';\nimport type { PopoverSurfaceProps } from './PopoverSurface.types';\n\n/**\n * PopoverSurface component renders react children in a positioned box\n */\nexport const PopoverSurface = React.forwardRef<HTMLDivElement, PopoverSurfaceProps>((props, ref) => {\n  const state = usePopoverSurface(props, ref);\n\n  usePopoverSurfaceStyles(state);\n  return renderPopoverSurface(state);\n});\n\nPopoverSurface.displayName = 'PopoverSurface';\n"]}

package/lib-amd/components/PopoverSurface/PopoverSurface.types.d.ts

@@ -1,28 +1,20 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
 import type { PopoverContextValue } from '../../popoverContext';
 /**
  * PopoverSurface Props
  */
-export interface PopoverSurfaceProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
+export interface PopoverSurfaceProps extends ComponentProps<PopoverSurfaceSlots> {
 }
 /**
- * Names of the shorthand properties in PopoverSurfaceProps
+ * Names of the slots in PopoverSurfaceProps
  */
-export declare type PopoverSurfaceShorthandProps = never;
-/**
- * Names of PopoverSurfaceProps that have a default value in usePopoverSurface
- */
-export declare type PopoverSurfaceDefaultedProps = never;
+export declare type PopoverSurfaceSlots = {
+    root: IntrinsicShorthandProps<'div'>;
+};
 /**
  * PopoverSurface State
  */
-export interface PopoverSurfaceState extends ComponentStateCompat<PopoverSurfaceProps, PopoverSurfaceShorthandProps, PopoverSurfaceDefaultedProps>, Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'brand' | 'inverted'> {
-    ref: React.Ref<HTMLElement>;
-    /**
-     * Ref to the arrow element
-     */
-    arrowRef?: React.Ref<HTMLDivElement>;
+export interface PopoverSurfaceState extends ComponentState<PopoverSurfaceSlots>, Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'brand' | 'inverted' | 'arrowRef'> {
     /**
      * CSS class for the arrow element
      */

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverSurface.types.js","sourceRoot":"../src/","sources":["components/PopoverSurface/PopoverSurface.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentPropsCompat, ComponentStateCompat } from '@fluentui/react-utilities';\nimport type { PopoverContextValue } from '../../popoverContext';\n\n/**\n * PopoverSurface Props\n */\nexport interface PopoverSurfaceProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {}\n\n/**\n * Names of the shorthand properties in PopoverSurfaceProps\n */\nexport type PopoverSurfaceShorthandProps = never;\n\n/**\n * Names of PopoverSurfaceProps that have a default value in usePopoverSurface\n */\nexport type PopoverSurfaceDefaultedProps = never;\n\n/**\n * PopoverSurface State\n */\nexport interface PopoverSurfaceState\n  extends ComponentStateCompat<PopoverSurfaceProps, PopoverSurfaceShorthandProps, PopoverSurfaceDefaultedProps>,\n    Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'brand' | 'inverted'> {\n  ref: React.Ref<HTMLElement>;\n  /**\n   * Ref to the arrow element\n   */\n  arrowRef?: React.Ref<HTMLDivElement>;\n\n  /**\n   * CSS class for the arrow element\n   */\n  arrowClassName?: string;\n}\n"]}
+{"version":3,"file":"PopoverSurface.types.js","sourceRoot":"../src/","sources":["components/PopoverSurface/PopoverSurface.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';\nimport type { PopoverContextValue } from '../../popoverContext';\n\n/**\n * PopoverSurface Props\n */\nexport interface PopoverSurfaceProps extends ComponentProps<PopoverSurfaceSlots> {}\n\n/**\n * Names of the slots in PopoverSurfaceProps\n */\nexport type PopoverSurfaceSlots = {\n  root: IntrinsicShorthandProps<'div'>;\n};\n\n/**\n * PopoverSurface State\n */\nexport interface PopoverSurfaceState\n  extends ComponentState<PopoverSurfaceSlots>,\n    Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'brand' | 'inverted' | 'arrowRef'> {\n  /**\n   * CSS class for the arrow element\n   */\n  arrowClassName?: string;\n}\n"]}

package/lib-amd/components/PopoverSurface/renderPopoverSurface.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-portal"], function (require, exports, tslib_1, React, react_utilities_1, react_portal_1) {
+define(["require", "exports", "tslib", "react", "@fluentui/react-portal", "@fluentui/react-utilities", "./usePopoverSurface"], function (require, exports, tslib_1, React, react_portal_1, react_utilities_1, usePopoverSurface_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.renderPopoverSurface = void 0;
@@ -6,7 +6,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
      * Render the final JSX of PopoverSurface
      */
     var renderPopoverSurface = function (state) {
-        var _a = react_utilities_1.getSlotsCompat(state), slots = _a.slots, slotProps = _a.slotProps;
+        var _a = react_utilities_1.getSlots(state, usePopoverSurface_1.popoverSurfaceSlots), slots = _a.slots, slotProps = _a.slotProps;
         // TODO should hidden Popovers be supported ?
         if (!state.open) {
             return null;
@@ -14,7 +14,7 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
         return (React.createElement(react_portal_1.Portal, { mountNode: state.mountNode },
             React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
                 !state.noArrow && React.createElement("div", { ref: state.arrowRef, className: state.arrowClassName }),
-                state.children)));
+                slotProps.root.children)));
     };
     exports.renderPopoverSurface = renderPopoverSurface;
 });

package/lib-amd/components/PopoverSurface/renderPopoverSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderPopoverSurface.js","sourceRoot":"../src/","sources":["components/PopoverSurface/renderPopoverSurface.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAC,KAA0B;QACvD,IAAA,KAAuB,gCAAc,CAAC,KAAK,CAAC,EAA1C,KAAK,WAAA,EAAE,SAAS,eAA0B,CAAC;QAEnD,6CAA6C;QAC7C,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;YACf,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL,oBAAC,qBAAM,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS;YAChC,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;gBAC3B,CAAC,KAAK,CAAC,OAAO,IAAI,6BAAK,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,GAAI;gBAC/E,KAAK,CAAC,QAAQ,CACJ,CACN,CACV,CAAC;IACJ,CAAC,CAAC;IAhBW,QAAA,oBAAoB,wBAgB/B","sourcesContent":["import * as React from 'react';\nimport { getSlotsCompat } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface = (state: PopoverSurfaceState) => {\n  const { slots, slotProps } = getSlotsCompat(state);\n\n  // TODO should hidden Popovers be supported ?\n  if (!state.open) {\n    return null;\n  }\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      <slots.root {...slotProps.root}>\n        {!state.noArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n        {state.children}\n      </slots.root>\n    </Portal>\n  );\n};\n"]}
+{"version":3,"file":"renderPopoverSurface.js","sourceRoot":"../src/","sources":["components/PopoverSurface/renderPopoverSurface.tsx"],"names":[],"mappings":";;;;IAMA;;OAEG;IACI,IAAM,oBAAoB,GAAG,UAAC,KAA0B;QACvD,IAAA,KAAuB,0BAAQ,CAAsB,KAAK,EAAE,uCAAmB,CAAC,EAA9E,KAAK,WAAA,EAAE,SAAS,eAA8D,CAAC;QAEvF,6CAA6C;QAC7C,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;YACf,OAAO,IAAI,CAAC;SACb;QAED,OAAO,CACL,oBAAC,qBAAM,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS;YAChC,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;gBAC3B,CAAC,KAAK,CAAC,OAAO,IAAI,6BAAK,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,GAAI;gBAC/E,SAAS,CAAC,IAAI,CAAC,QAAQ,CACb,CACN,CACV,CAAC;IACJ,CAAC,CAAC;IAhBW,QAAA,oBAAoB,wBAgB/B","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\nimport { popoverSurfaceSlots } from './usePopoverSurface';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface = (state: PopoverSurfaceState) => {\n  const { slots, slotProps } = getSlots<PopoverSurfaceSlots>(state, popoverSurfaceSlots);\n\n  // TODO should hidden Popovers be supported ?\n  if (!state.open) {\n    return null;\n  }\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      <slots.root {...slotProps.root}>\n        {!state.noArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n        {slotProps.root.children}\n      </slots.root>\n    </Portal>\n  );\n};\n"]}

package/lib-amd/components/PopoverSurface/usePopoverSurface.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';
+import type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';
+export declare const popoverSurfaceSlots: Array<keyof PopoverSurfaceSlots>;
 /**
  * Create the state required to render PopoverSurface.
  *
@@ -7,7 +8,7 @@ import type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.
  * 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.Ref<HTMLElement>, defaultProps?: PopoverSurfaceProps | undefined) => PopoverSurfaceState;
+export declare const usePopoverSurface: (props: PopoverSurfaceProps, ref: React.Ref<HTMLDivElement>) => PopoverSurfaceState;

package/lib-amd/components/PopoverSurface/usePopoverSurface.js

@@ -1,8 +1,8 @@
 define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-tabster", "../../popoverContext"], function (require, exports, tslib_1, React, react_utilities_1, react_tabster_1, popoverContext_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.usePopoverSurface = void 0;
-    var mergeProps = react_utilities_1.makeMergeProps({});
+    exports.usePopoverSurface = exports.popoverSurfaceSlots = void 0;
+    exports.popoverSurfaceSlots = ['root'];
     /**
      * Create the state required to render PopoverSurface.
      *
@@ -10,10 +10,10 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
      * 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
      */
-    var usePopoverSurface = function (props, ref, defaultProps) {
+    var usePopoverSurface = function (props, ref) {
         var contentRef = popoverContext_1.usePopoverContext(function (context) { return context.contentRef; });
         var open = popoverContext_1.usePopoverContext(function (context) { return context.open; });
         var openOnHover = popoverContext_1.usePopoverContext(function (context) { return context.openOnHover; });
@@ -26,27 +26,29 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
         var inverted = popoverContext_1.usePopoverContext(function (context) { return context.inverted; });
         var trapFocus = popoverContext_1.usePopoverContext(function (context) { return context.trapFocus; });
         var modalAttributes = react_tabster_1.useModalAttributes({ trapFocus: trapFocus }).modalAttributes;
-        var state = mergeProps(tslib_1.__assign({ brand: brand,
+        var state = tslib_1.__assign(tslib_1.__assign({ brand: brand,
             inverted: inverted,
             noArrow: noArrow,
             size: size,
             arrowRef: arrowRef,
             open: open,
-            mountNode: mountNode, role: 'dialog', ref: react_utilities_1.useMergedRefs(ref, contentRef) }, modalAttributes), defaultProps, props);
-        var onMouseEnterOriginal = state.onMouseEnter, onMouseLeaveOriginal = state.onMouseLeave, onKeyDownOriginal = state.onKeyDown;
-        state.onMouseEnter = function (e) {
+            mountNode: mountNode }, props), { components: {
+                root: 'div',
+            }, root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({ ref: react_utilities_1.useMergedRefs(ref, contentRef), role: 'dialog' }, modalAttributes), props)) });
+        var _a = state.root, onMouseEnterOriginal = _a.onMouseEnter, onMouseLeaveOriginal = _a.onMouseLeave, onKeyDownOriginal = _a.onKeyDown;
+        state.root.onMouseEnter = function (e) {
             if (openOnHover) {
                 setOpen(e, true);
             }
             onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
         };
-        state.onMouseLeave = function (e) {
+        state.root.onMouseLeave = function (e) {
             if (openOnHover) {
                 setOpen(e, false);
             }
             onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(e);
         };
-        state.onKeyDown = function (e) {
+        state.root.onKeyDown = function (e) {
             var _a;
             // only close if the event happened inside the current popover
             // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack

package/lib-amd/components/PopoverSurface/usePopoverSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopoverSurface.js","sourceRoot":"../src/","sources":["components/PopoverSurface/usePopoverSurface.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusFinders, useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';\n\nconst mergeProps = makeMergeProps<PopoverSurfaceState>({});\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles,\n * before being passed to renderPopoverSurface.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLElement of PopoverSurface\n * @param defaultProps - (optional) default prop values provided by the implementing type\n */\nexport const usePopoverSurface = (\n  props: PopoverSurfaceProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: PopoverSurfaceProps,\n): PopoverSurfaceState => {\n  const contentRef = usePopoverContext(context => context.contentRef);\n  const open = usePopoverContext(context => context.open);\n  const openOnHover = usePopoverContext(context => context.openOnHover);\n  const setOpen = usePopoverContext(context => context.setOpen);\n  const mountNode = usePopoverContext(context => context.mountNode);\n  const arrowRef = usePopoverContext(context => context.arrowRef);\n  const size = usePopoverContext(context => context.size);\n  const noArrow = usePopoverContext(context => context.noArrow);\n  const brand = usePopoverContext(context => context.brand);\n  const inverted = usePopoverContext(context => context.inverted);\n  const trapFocus = usePopoverContext(context => context.trapFocus);\n  const { modalAttributes } = useModalAttributes({ trapFocus });\n\n  const state = mergeProps(\n    {\n      brand,\n      inverted,\n      noArrow,\n      size,\n      arrowRef,\n      open,\n      mountNode,\n      role: 'dialog',\n      ref: useMergedRefs(ref, contentRef),\n      ...modalAttributes,\n    },\n    defaultProps,\n    props,\n  );\n\n  const {\n    onMouseEnter: onMouseEnterOriginal,\n    onMouseLeave: onMouseLeaveOriginal,\n    onKeyDown: onKeyDownOriginal,\n  } = state;\n  state.onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n\n    onMouseEnterOriginal?.(e);\n  };\n\n  state.onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n\n    onMouseLeaveOriginal?.(e);\n  };\n\n  state.onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    // only close if the event happened inside the current popover\n    // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n    if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLElement)) {\n      setOpen(e, false);\n    }\n\n    onKeyDownOriginal?.(e);\n  };\n\n  const { findFirstFocusable } = useFocusFinders();\n\n  React.useEffect(() => {\n    if (state.open && contentRef.current) {\n      const firstFocusable = findFirstFocusable(contentRef.current);\n      firstFocusable?.focus();\n    }\n  }, [contentRef, findFirstFocusable, state.open]);\n  return state;\n};\n"]}
+{"version":3,"file":"usePopoverSurface.js","sourceRoot":"../src/","sources":["components/PopoverSurface/usePopoverSurface.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport { useFocusFinders, useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext } from '../../popoverContext';\nimport type { PopoverSurfaceProps, PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';\n\nexport const popoverSurfaceSlots: Array<keyof PopoverSurfaceSlots> = ['root'];\n\n/**\n * Create the state required to render PopoverSurface.\n *\n * The returned state can be modified with hooks such as usePopoverSurfaceStyles,\n * before being passed to renderPopoverSurface.\n *\n * @param props - props from this instance of PopoverSurface\n * @param ref - reference to root HTMLDivElement of PopoverSurface\n * @param defaultProps - (optional) default prop values provided by the implementing type\n */\nexport const usePopoverSurface = (props: PopoverSurfaceProps, ref: React.Ref<HTMLDivElement>): PopoverSurfaceState => {\n  const contentRef = usePopoverContext(context => context.contentRef);\n  const open = usePopoverContext(context => context.open);\n  const openOnHover = usePopoverContext(context => context.openOnHover);\n  const setOpen = usePopoverContext(context => context.setOpen);\n  const mountNode = usePopoverContext(context => context.mountNode);\n  const arrowRef = usePopoverContext(context => context.arrowRef);\n  const size = usePopoverContext(context => context.size);\n  const noArrow = usePopoverContext(context => context.noArrow);\n  const brand = usePopoverContext(context => context.brand);\n  const inverted = usePopoverContext(context => context.inverted);\n  const trapFocus = usePopoverContext(context => context.trapFocus);\n  const { modalAttributes } = useModalAttributes({ trapFocus });\n\n  const state: PopoverSurfaceState = {\n    brand,\n    inverted,\n    noArrow,\n    size,\n    arrowRef,\n    open,\n    mountNode,\n    ...props,\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, contentRef),\n      role: 'dialog',\n      ...modalAttributes,\n      ...props,\n    }),\n  };\n\n  const {\n    onMouseEnter: onMouseEnterOriginal,\n    onMouseLeave: onMouseLeaveOriginal,\n    onKeyDown: onKeyDownOriginal,\n  } = state.root;\n  state.root.onMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n\n    onMouseEnterOriginal?.(e);\n  };\n\n  state.root.onMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n\n    onMouseLeaveOriginal?.(e);\n  };\n\n  state.root.onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    // only close if the event happened inside the current popover\n    // If using a stack of inline popovers, the user should call `stopPropagation` to avoid dismissing the entire stack\n    if (e.key === 'Escape' && contentRef.current?.contains(e.target as HTMLDivElement)) {\n      setOpen(e, false);\n    }\n\n    onKeyDownOriginal?.(e);\n  };\n\n  const { findFirstFocusable } = useFocusFinders();\n\n  React.useEffect(() => {\n    if (state.open && contentRef.current) {\n      const firstFocusable = findFirstFocusable(contentRef.current);\n      firstFocusable?.focus();\n    }\n  }, [contentRef, findFirstFocusable, state.open]);\n  return state;\n};\n"]}

package/lib-amd/components/PopoverSurface/usePopoverSurfaceStyles.js

@@ -72,7 +72,7 @@ define(["require", "exports", "@fluentui/react-make-styles"], function (require,
      */
     var usePopoverSurfaceStyles = function (state) {
         var styles = useStyles();
-        state.className = react_make_styles_1.mergeClasses(styles.root, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.inverted && styles.inverted, state.brand && styles.brand, state.className);
+        state.root.className = react_make_styles_1.mergeClasses(styles.root, state.size === 'small' && styles.smallPadding, state.size === 'medium' && styles.mediumPadding, state.size === 'large' && styles.largePadding, state.inverted && styles.inverted, state.brand && styles.brand, state.root.className);
         state.arrowClassName = react_make_styles_1.mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
         return state;
     };

package/lib-amd/components/PopoverSurface/usePopoverSurfaceStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopoverSurfaceStyles.js","sourceRoot":"../src/","sources":["components/PopoverSurface/usePopoverSurfaceStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport type { PopoverSize } from '../Popover/Popover.types';\nimport type { PopoverSurfaceState } from './PopoverSurface.types';\n\nexport const arrowHeights: Record<PopoverSize, number> = {\n  small: 6,\n  medium: 8,\n  large: 8,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: theme => ({\n    backgroundColor: theme.alias.color.neutral.neutralBackground1,\n    boxShadow: theme.alias.shadow.shadow16,\n    borderRadius: '4px',\n  }),\n\n  inverted: theme => ({\n    // TODO: neutral background inverted missing from superset and theme\n    backgroundColor: theme.global.palette.grey[16],\n    color: theme.alias.color.neutral.neutralForegroundInverted,\n  }),\n\n  brand: theme => ({\n    backgroundColor: theme.alias.color.neutral.brandBackground,\n    // TODO: clarify with designers what foreground color should be with brand background,\n    color: theme.alias.color.neutral.neutralForegroundInverted,\n  }),\n\n  smallPadding: () => ({\n    padding: '12px',\n  }),\n\n  mediumPadding: () => ({\n    padding: '16px',\n  }),\n\n  largePadding: () => ({\n    padding: '20px',\n  }),\n\n  smallArrow: () => ({\n    width: `${Math.SQRT2 * arrowHeights.small}px`,\n    height: `${Math.SQRT2 * arrowHeights.small}px`,\n  }),\n\n  mediumLargeArrow: () => ({\n    width: `${Math.SQRT2 * arrowHeights.medium}px`,\n    height: `${Math.SQRT2 * arrowHeights.medium}px`,\n  }),\n\n  // TODO dedupe these styles with tooltip\n  arrow: theme => ({\n    position: 'absolute',\n    background: 'inherit',\n    visibility: 'hidden',\n    zIndex: -1,\n\n    ':before': {\n      content: '\"\"',\n      borderRadius: '4px',\n      position: 'absolute',\n      width: 'inherit',\n      height: 'inherit',\n      background: 'inherit',\n      visibility: 'visible',\n      borderBottomRightRadius: theme.global.borderRadius.small,\n      transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n    },\n\n    // Popper sets data-popper-placement on the root element, which is used to align the arrow\n    ':global([data-popper-placement^=\"top\"])': { bottom: 0, '--angle': '0' },\n    ':global([data-popper-placement^=\"right\"])': { left: 0, '--angle': '90deg' },\n    ':global([data-popper-placement^=\"bottom\"])': { top: 0, '--angle': '180deg' },\n    ':global([data-popper-placement^=\"left\"])': { right: 0, '--angle': '270deg' },\n  }),\n});\n\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles = (state: PopoverSurfaceState): PopoverSurfaceState => {\n  const styles = useStyles();\n  state.className = mergeClasses(\n    styles.root,\n    state.size === 'small' && styles.smallPadding,\n    state.size === 'medium' && styles.mediumPadding,\n    state.size === 'large' && styles.largePadding,\n    state.inverted && styles.inverted,\n    state.brand && styles.brand,\n    state.className,\n  );\n\n  state.arrowClassName = mergeClasses(\n    styles.arrow,\n    state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow,\n  );\n\n  return state;\n};\n"]}
+{"version":3,"file":"usePopoverSurfaceStyles.js","sourceRoot":"../src/","sources":["components/PopoverSurface/usePopoverSurfaceStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport type { PopoverSize } from '../Popover/Popover.types';\nimport type { PopoverSurfaceState } from './PopoverSurface.types';\n\nexport const arrowHeights: Record<PopoverSize, number> = {\n  small: 6,\n  medium: 8,\n  large: 8,\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: theme => ({\n    backgroundColor: theme.alias.color.neutral.neutralBackground1,\n    boxShadow: theme.alias.shadow.shadow16,\n    borderRadius: '4px',\n  }),\n\n  inverted: theme => ({\n    // TODO: neutral background inverted missing from superset and theme\n    backgroundColor: theme.global.palette.grey[16],\n    color: theme.alias.color.neutral.neutralForegroundInverted,\n  }),\n\n  brand: theme => ({\n    backgroundColor: theme.alias.color.neutral.brandBackground,\n    // TODO: clarify with designers what foreground color should be with brand background,\n    color: theme.alias.color.neutral.neutralForegroundInverted,\n  }),\n\n  smallPadding: () => ({\n    padding: '12px',\n  }),\n\n  mediumPadding: () => ({\n    padding: '16px',\n  }),\n\n  largePadding: () => ({\n    padding: '20px',\n  }),\n\n  smallArrow: () => ({\n    width: `${Math.SQRT2 * arrowHeights.small}px`,\n    height: `${Math.SQRT2 * arrowHeights.small}px`,\n  }),\n\n  mediumLargeArrow: () => ({\n    width: `${Math.SQRT2 * arrowHeights.medium}px`,\n    height: `${Math.SQRT2 * arrowHeights.medium}px`,\n  }),\n\n  // TODO dedupe these styles with tooltip\n  arrow: theme => ({\n    position: 'absolute',\n    background: 'inherit',\n    visibility: 'hidden',\n    zIndex: -1,\n\n    ':before': {\n      content: '\"\"',\n      borderRadius: '4px',\n      position: 'absolute',\n      width: 'inherit',\n      height: 'inherit',\n      background: 'inherit',\n      visibility: 'visible',\n      borderBottomRightRadius: theme.global.borderRadius.small,\n      transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n    },\n\n    // Popper sets data-popper-placement on the root element, which is used to align the arrow\n    ':global([data-popper-placement^=\"top\"])': { bottom: 0, '--angle': '0' },\n    ':global([data-popper-placement^=\"right\"])': { left: 0, '--angle': '90deg' },\n    ':global([data-popper-placement^=\"bottom\"])': { top: 0, '--angle': '180deg' },\n    ':global([data-popper-placement^=\"left\"])': { right: 0, '--angle': '270deg' },\n  }),\n});\n\n/**\n * Apply styling to the PopoverSurface slots based on the state\n */\nexport const usePopoverSurfaceStyles = (state: PopoverSurfaceState): PopoverSurfaceState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    styles.root,\n    state.size === 'small' && styles.smallPadding,\n    state.size === 'medium' && styles.mediumPadding,\n    state.size === 'large' && styles.largePadding,\n    state.inverted && styles.inverted,\n    state.brand && styles.brand,\n    state.root.className,\n  );\n\n  state.arrowClassName = mergeClasses(\n    styles.arrow,\n    state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow,\n  );\n\n  return state;\n};\n"]}

package/lib-amd/components/PopoverTrigger/usePopoverTrigger.js

@@ -2,7 +2,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.usePopoverTrigger = void 0;
-    var mergeProps = react_utilities_1.makeMergeProps({});
     /**
      * Create the state required to render PopoverTrigger.
      *
@@ -19,9 +18,6 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
         var openOnHover = popoverContext_1.usePopoverContext(function (context) { return context.openOnHover; });
         var openOnContext = popoverContext_1.usePopoverContext(function (context) { return context.openOnContext; });
         var triggerAttributes = react_tabster_1.useModalAttributes().triggerAttributes;
-        var state = mergeProps({
-            children: null,
-        }, defaultProps, props);
         var onContextMenu = react_utilities_1.useEventCallback(function (e) {
             var _a, _b;
             if (openOnContext) {
@@ -62,13 +58,14 @@ define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@f
             }
             (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
         });
-        var child = React.Children.only(state.children);
-        state.children = React.cloneElement(child, tslib_1.__assign({ 'aria-haspopup': 'true', onClick: onClick,
-            onMouseEnter: onMouseEnter,
-            onKeyDown: onKeyDown,
-            onMouseLeave: onMouseLeave,
-            onContextMenu: onContextMenu, ref: react_utilities_1.useMergedRefs(child.ref, triggerRef) }, triggerAttributes));
-        return state;
+        var child = React.Children.only(props.children);
+        return {
+            children: React.cloneElement(child, tslib_1.__assign({ 'aria-haspopup': 'true', onClick: onClick,
+                onMouseEnter: onMouseEnter,
+                onKeyDown: onKeyDown,
+                onMouseLeave: onMouseLeave,
+                onContextMenu: onContextMenu, ref: react_utilities_1.useMergedRefs(child.ref, triggerRef) }, triggerAttributes)),
+        };
     };
     exports.usePopoverTrigger = usePopoverTrigger;
 });

package/lib-amd/components/PopoverTrigger/usePopoverTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopoverTrigger.js","sourceRoot":"../src/","sources":["components/PopoverTrigger/usePopoverTrigger.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n  makeMergeProps,\n  useMergedRefs,\n  useEventCallback,\n  shouldPreventDefaultOnKeyDown,\n} from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext } from '../../popoverContext';\nimport type { PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\n\nconst mergeProps = makeMergeProps<PopoverTriggerState>({});\n\n/**\n * Create the state required to render PopoverTrigger.\n *\n * The returned state can be modified with hooks such as usePopoverTriggerStyles,\n * before being passed to renderPopoverTrigger.\n *\n * @param props - props from this instance of PopoverTrigger\n * @param defaultProps - (optional) default prop values provided by the implementing type\n */\nexport const usePopoverTrigger = (\n  props: PopoverTriggerProps,\n  defaultProps?: PopoverTriggerProps,\n): PopoverTriggerState => {\n  const setOpen = usePopoverContext(context => context.setOpen);\n  const open = usePopoverContext(context => context.open);\n  const triggerRef = usePopoverContext(context => context.triggerRef);\n  const openOnHover = usePopoverContext(context => context.openOnHover);\n  const openOnContext = usePopoverContext(context => context.openOnContext);\n  const { triggerAttributes } = useModalAttributes();\n\n  const state = mergeProps(\n    {\n      children: (null as unknown) as React.ReactElement,\n    },\n    defaultProps,\n    props,\n  );\n\n  const onContextMenu = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, true);\n    }\n\n    child.props?.onContextMenu?.(e);\n  });\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (!openOnContext) {\n      setOpen(e, !open);\n    }\n    child.props?.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    if (shouldPreventDefaultOnKeyDown(e) && (e.key === ' ' || e.key === 'Enter')) {\n      e.preventDefault();\n      (e.target as HTMLElement)?.click();\n    }\n\n    if (e.key === 'Escape') {\n      setOpen(e, false);\n    }\n\n    child.props?.onKeyDown?.(e);\n  });\n\n  const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n    child.props?.onMouseEnter?.(e);\n  });\n\n  const onMouseLeave = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n    child.props?.onMouseLeave?.(e);\n  });\n\n  const child = React.Children.only(state.children);\n  state.children = React.cloneElement(child, {\n    'aria-haspopup': 'true',\n    onClick,\n    onMouseEnter,\n    onKeyDown,\n    onMouseLeave,\n    onContextMenu,\n    ref: useMergedRefs(((child as unknown) as React.ReactElement & React.RefAttributes<unknown>).ref, triggerRef),\n    ...triggerAttributes,\n  });\n\n  return state;\n};\n"]}
+{"version":3,"file":"usePopoverTrigger.js","sourceRoot":"../src/","sources":["components/PopoverTrigger/usePopoverTrigger.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useMergedRefs, useEventCallback, shouldPreventDefaultOnKeyDown } from '@fluentui/react-utilities';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { usePopoverContext } from '../../popoverContext';\nimport type { PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';\n\n/**\n * Create the state required to render PopoverTrigger.\n *\n * The returned state can be modified with hooks such as usePopoverTriggerStyles,\n * before being passed to renderPopoverTrigger.\n *\n * @param props - props from this instance of PopoverTrigger\n * @param defaultProps - (optional) default prop values provided by the implementing type\n */\nexport const usePopoverTrigger = (\n  props: PopoverTriggerProps,\n  defaultProps?: PopoverTriggerProps,\n): PopoverTriggerState => {\n  const setOpen = usePopoverContext(context => context.setOpen);\n  const open = usePopoverContext(context => context.open);\n  const triggerRef = usePopoverContext(context => context.triggerRef);\n  const openOnHover = usePopoverContext(context => context.openOnHover);\n  const openOnContext = usePopoverContext(context => context.openOnContext);\n  const { triggerAttributes } = useModalAttributes();\n\n  const onContextMenu = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnContext) {\n      e.preventDefault();\n      setOpen(e, true);\n    }\n\n    child.props?.onContextMenu?.(e);\n  });\n\n  const onClick = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (!openOnContext) {\n      setOpen(e, !open);\n    }\n    child.props?.onClick?.(e);\n  });\n\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    if (shouldPreventDefaultOnKeyDown(e) && (e.key === ' ' || e.key === 'Enter')) {\n      e.preventDefault();\n      (e.target as HTMLElement)?.click();\n    }\n\n    if (e.key === 'Escape') {\n      setOpen(e, false);\n    }\n\n    child.props?.onKeyDown?.(e);\n  });\n\n  const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, true);\n    }\n    child.props?.onMouseEnter?.(e);\n  });\n\n  const onMouseLeave = useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n    if (openOnHover) {\n      setOpen(e, false);\n    }\n    child.props?.onMouseLeave?.(e);\n  });\n\n  const child = React.Children.only(props.children);\n  return {\n    children: React.cloneElement(child, {\n      'aria-haspopup': 'true',\n      onClick,\n      onMouseEnter,\n      onKeyDown,\n      onMouseLeave,\n      onContextMenu,\n      ref: useMergedRefs(((child as unknown) as React.ReactElement & React.RefAttributes<unknown>).ref, triggerRef),\n      ...triggerAttributes,\n    }),\n  };\n};\n"]}

package/lib-commonjs/common/isConformant.js

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

package/lib-commonjs/common/isConformant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,IAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;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,+BAAA,CAAA;AAH+C,GAA7D;AAMA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAVD,OAAA,CAAA,YAAA,GAAA,YAAA","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,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,IAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;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,+BAAA,CAAA;AAL+C,GAA7D;AAQA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAZD,OAAA,CAAA,YAAA,GAAA,YAAA","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-commonjs/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-commonjs/components/Popover/usePopover.js

@@ -18,12 +18,6 @@ var react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
 var react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
 
 var index_1 = /*#__PURE__*/require("../PopoverSurface/index");
-/**
- * Names of the shorthand properties in PopoverProps
- */
-
-
-var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps({});
 /**
  * Create the state required to render Popover.
  *
@@ -34,63 +28,53 @@ var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps({});
  * @param defaultProps - (optional) default prop values provided by the implementing type
  */
 
-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 usePopover = function (props, defaultProps) {
+  var _a = react_positioning_1.usePopperMouseTarget(),
       contextTarget = _a[0],
       setContextTarget = _a[1];
 
-  state.setContextTarget = setContextTarget;
-  state.contextTarget = contextTarget;
-  useOpenState(state);
-  usePopoverRefs(state);
+  var initialState = tslib_1.__assign({
+    size: 'medium',
+    contextTarget: contextTarget,
+    setContextTarget: setContextTarget
+  }, props);
+
+  var _b = useOpenState(initialState),
+      open = _b[0],
+      setOpen = _b[1];
+
+  var popperRefs = usePopoverRefs(initialState);
   var targetDocument = react_shared_contexts_1.useFluent().targetDocument;
   react_utilities_1.useOnClickOutside({
     contains: react_portal_1.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
   });
   react_utilities_1.useOnScrollOutside({
     contains: react_portal_1.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 tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, initialState), popperRefs), {
+    open: open,
+    setOpen: setOpen,
+    setContextTarget: setContextTarget,
+    contextTarget: contextTarget
   });
-  return state;
 };
 
 exports.usePopover = usePopover;
 /**
  * Creates and manages the Popover open state
- * @param state Popover state
  */
 
 function useOpenState(state) {
@@ -100,23 +84,26 @@ function useOpenState(state) {
     return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data);
   });
 
-  var _a = react_utilities_1.useControllableValue(state.open, state.defaultOpen),
+  var _a = react_utilities_1.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 = react_positioning_1.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) {
@@ -127,12 +114,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
  */
 
 
@@ -157,9 +143,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