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

package/lib/components/Popover/usePopover.js

@@ -1,14 +1,10 @@
+import { __assign } from "tslib";
 import * as React from 'react';
-import { makeMergeProps, useControllableValue, useEventCallback, useOnClickOutside, useOnScrollOutside, } from '@fluentui/react-utilities';
+import { useControllableState, useEventCallback, useOnClickOutside, useOnScrollOutside } from '@fluentui/react-utilities';
 import { useFluent } from '@fluentui/react-shared-contexts';
-import { usePopper, createVirtualElementFromClick } from '@fluentui/react-positioning';
+import { usePopper, resolvePositioningShorthand, mergeArrowOffset, usePopperMouseTarget } from '@fluentui/react-positioning';
 import { elementContains } from '@fluentui/react-portal';
 import { arrowHeights } from '../PopoverSurface/index';
-import { getOffsetWithArrow } from './getOffsetWithArrow';
-/**
- * Names of the shorthand properties in PopoverProps
- */
-var mergeProps = makeMergeProps({});
 /**
  * Create the state required to render Popover.
  *
@@ -16,98 +12,124 @@ var mergeProps = makeMergeProps({});
  * 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 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,
-        position: 'above',
-        align: 'center',
-        setContextTarget: function () { return null; },
-        contextTarget: undefined,
-    }, defaultProps, props);
-    // no reason to render arrow when covering the target
-    if (state.coverTarget) {
-        state.noArrow = true;
-    }
-    var _a = React.useState(), contextTarget = _a[0], setContextTarget = _a[1];
-    state.setContextTarget = setContextTarget;
-    state.contextTarget = contextTarget;
-    useOpenState(state);
-    usePopoverRefs(state);
-    var targetDocument = useFluent().targetDocument;
-    useOnClickOutside({
-        contains: elementContains,
-        element: targetDocument,
-        callback: function (ev) { return state.setOpen(ev, false); },
-        refs: [state.triggerRef, state.contentRef],
-        disabled: !state.open,
-    });
-    useOnScrollOutside({
-        contains: elementContains,
-        element: targetDocument,
-        callback: function (ev) { return state.setOpen(ev, false); },
-        refs: [state.triggerRef, state.contentRef],
-        disabled: !state.open || !state.openOnContext,
-    });
-    return state;
+
+export var usePopover = function (props) {
+  var _a = usePopperMouseTarget(),
+      contextTarget = _a[0],
+      setContextTarget = _a[1];
+
+  var initialState = __assign({
+    size: 'medium',
+    contextTarget: contextTarget,
+    setContextTarget: setContextTarget
+  }, props);
+
+  var _b = useOpenState(initialState),
+      open = _b[0],
+      setOpen = _b[1];
+
+  var popperRefs = usePopoverRefs(initialState);
+  var targetDocument = useFluent().targetDocument;
+  useOnClickOutside({
+    contains: elementContains,
+    element: targetDocument,
+    callback: function (ev) {
+      return setOpen(ev, false);
+    },
+    refs: [popperRefs.triggerRef, popperRefs.contentRef],
+    disabled: !open
+  });
+  useOnScrollOutside({
+    contains: elementContains,
+    element: targetDocument,
+    callback: function (ev) {
+      return setOpen(ev, false);
+    },
+    refs: [popperRefs.triggerRef, popperRefs.contentRef],
+    disabled: !open || !initialState.openOnContext
+  });
+  return __assign(__assign(__assign({}, initialState), popperRefs), {
+    open: open,
+    setOpen: setOpen,
+    setContextTarget: setContextTarget,
+    contextTarget: contextTarget
+  });
 };
 /**
  * Creates and manages the Popover open state
- * @param state Popover state
  */
+
 function useOpenState(state) {
-    var onOpenChange = useEventCallback(function (e, data) { var _a; return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data); });
-    var _a = useControllableValue(state.open, state.defaultOpen), open = _a[0], setOpen = _a[1];
-    state.open = open !== undefined ? open : state.open;
-    var setContextTarget = state.setContextTarget;
-    state.setOpen = React.useCallback(function (e, shouldOpen) {
-        if (shouldOpen && e.type === 'contextmenu') {
-            var virtualElement = createVirtualElementFromClick(e.nativeEvent);
-            setContextTarget(virtualElement);
-        }
-        if (!shouldOpen) {
-            setContextTarget(undefined);
-        }
-        setOpen(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) {
-                onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, { open: shouldOpen });
-            }
-            return shouldOpen;
+  var onOpenChange = useEventCallback(function (e, data) {
+    var _a;
+
+    return (_a = state.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(state, e, data);
+  });
+
+  var _a = useControllableState({
+    state: state.open,
+    defaultState: state.defaultOpen,
+    initialState: false
+  }),
+      open = _a[0],
+      setOpenState = _a[1];
+
+  state.open = open !== undefined ? open : state.open;
+  var setContextTarget = state.setContextTarget;
+  var setOpen = React.useCallback(function (e, shouldOpen) {
+    if (shouldOpen && e.type === 'contextmenu') {
+      setContextTarget(e);
+    }
+
+    if (!shouldOpen) {
+      setContextTarget(undefined);
+    }
+
+    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) {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(e, {
+          open: shouldOpen
         });
-    }, [setOpen, onOpenChange, setContextTarget]);
-    return state;
+      }
+
+      return shouldOpen;
+    });
+  }, [setOpenState, onOpenChange, setContextTarget]);
+  return [open, setOpen];
 }
 /**
  * Creates and sets the necessary trigger, target and content refs used by Popover
- * @param state Popover state
  */
+
+
 function usePopoverRefs(state) {
-    if (!state.noArrow) {
-        state.offset = getOffsetWithArrow(state.offset, arrowHeights[state.size]);
-    }
-    if (!state.target && state.openOnContext && state.contextTarget) {
-        state.target = state.contextTarget;
-    }
-    var _a = usePopper({
-        align: state.align,
-        position: state.position,
-        target: state.target,
-        coverTarget: state.coverTarget,
-        offset: state.offset,
-        arrowPadding: arrowHeights[state.size],
-    }), triggerRef = _a.targetRef, contentRef = _a.containerRef, arrowRef = _a.arrowRef;
-    state.contentRef = contentRef;
-    state.triggerRef = triggerRef;
-    state.arrowRef = arrowRef;
-    return state;
+  var popperOptions = __assign({
+    position: 'above',
+    align: 'center',
+    target: state.openOnContext ? state.contextTarget : undefined
+  }, resolvePositioningShorthand(state.positioning)); // no reason to render arrow when covering the target
+
+
+  if (popperOptions.coverTarget) {
+    state.noArrow = true;
+  }
+
+  if (!state.noArrow) {
+    popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeights[state.size]);
+  }
+
+  var _a = usePopper(popperOptions),
+      triggerRef = _a.targetRef,
+      contentRef = _a.containerRef,
+      arrowRef = _a.arrowRef;
+
+  return {
+    triggerRef: triggerRef,
+    contentRef: contentRef,
+    arrowRef: arrowRef
+  };
 }
 //# sourceMappingURL=usePopover.js.map

package/lib/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 { usePopper, PopperVirtualElement, createVirtualElementFromClick } from '@fluentui/react-positioning';\nimport { elementContains } from '@fluentui/react-portal';\nimport { PopoverProps, PopoverState } from './Popover.types';\nimport { arrowHeights } from '../PopoverSurface/index';\nimport { getOffsetWithArrow } from './getOffsetWithArrow';\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      position: 'above',\n      align: 'center',\n      setContextTarget: () => null,\n      contextTarget: undefined,\n    },\n    defaultProps,\n    props,\n  );\n\n  // no reason to render arrow when covering the target\n  if (state.coverTarget) {\n    state.noArrow = true;\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,\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  if (!state.noArrow) {\n    state.offset = getOffsetWithArrow(state.offset, arrowHeights[state.size]);\n  }\n\n  if (!state.target && state.openOnContext && state.contextTarget) {\n    state.target = state.contextTarget;\n  }\n\n  const { targetRef: triggerRef, containerRef: contentRef, arrowRef } = usePopper({\n    align: state.align,\n    position: state.position,\n    target: state.target,\n    coverTarget: state.coverTarget,\n    offset: state.offset,\n    arrowPadding: arrowHeights[state.size],\n  });\n\n  state.contentRef = contentRef;\n  state.triggerRef = triggerRef;\n  state.arrowRef = arrowRef;\n\n  return state;\n}\n"]}
+{"version":3,"sources":["../../../src/components/Popover/usePopover.ts"],"names":[],"mappings":"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","sourceRoot":""}

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

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

package/lib/components/PopoverSurface/PopoverSurface.js

@@ -5,10 +5,11 @@ import { usePopoverSurfaceStyles } from './usePopoverSurfaceStyles';
 /**
  * PopoverSurface component renders react children in a positioned box
  */
-export var PopoverSurface = React.forwardRef(function (props, ref) {
-    var state = usePopoverSurface(props, ref);
-    usePopoverSurfaceStyles(state);
-    return renderPopoverSurface(state);
+
+export var PopoverSurface = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = usePopoverSurface(props, ref);
+  usePopoverSurfaceStyles(state);
+  return renderPopoverSurface(state);
 });
 PopoverSurface.displayName = 'PopoverSurface';
 //# sourceMappingURL=PopoverSurface.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverSurface.js","sourceRoot":"../src/","sources":["components/PopoverSurface/PopoverSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE;;GAEG;AACH,MAAM,CAAC,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAAmC,UAAC,KAAK,EAAE,GAAG;IAC1F,IAAM,KAAK,GAAG,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAE5C,uBAAuB,CAAC,KAAK,CAAC,CAAC;IAC/B,OAAO,oBAAoB,CAAC,KAAK,CAAC,CAAC;AACrC,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import * as React from 'react';\nimport { usePopoverSurface } from './usePopoverSurface';\nimport { PopoverSurfaceProps } from './PopoverSurface.types';\nimport { renderPopoverSurface } from './renderPopoverSurface';\nimport { usePopoverSurfaceStyles } from './usePopoverSurfaceStyles';\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,"sources":["../../../src/components/PopoverSurface/PopoverSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,qBAAlC;AACA,SAAS,oBAAT,QAAqC,wBAArC;AACA,SAAS,uBAAT,QAAwC,2BAAxC;AAIA;;AAEG;;AACH,OAAO,IAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AAEA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AACA,SAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALuE,CAAjE;AAOP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourceRoot":""}

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

@@ -1,30 +1,21 @@
-import * as React from 'react';
-import { ComponentProps, ComponentState } from '@fluentui/react-utilities';
-import { PopoverContextValue } from '../../popoverContext';
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { PopoverContextValue } from '../../popoverContext';
 /**
  * PopoverSurface Props
  */
-export interface PopoverSurfaceProps extends ComponentProps, React.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;
-/**
- * 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 ComponentState<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 declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'open' | 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {
     /**
      * CSS class for the arrow element
      */
     arrowClassName?: string;
-}
+};

package/lib/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 { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { PopoverContextValue } from '../../popoverContext';\n\n/**\n * PopoverSurface Props\n */\nexport interface PopoverSurfaceProps extends ComponentProps, 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 ComponentState<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":"","sources":["../../../src/components/PopoverSurface/PopoverSurface.types.ts"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/PopoverSurface/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './PopoverSurface';\nexport * from './PopoverSurface.types';\nexport * from './renderPopoverSurface';\nexport * from './usePopoverSurface';\nexport * from './usePopoverSurfaceStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PopoverSurface/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC"}

package/lib/components/PopoverSurface/renderPopoverSurface.d.ts

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

package/lib/components/PopoverSurface/renderPopoverSurface.js

@@ -1,19 +1,27 @@
 import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
 import { Portal } from '@fluentui/react-portal';
+import { getSlots } from '@fluentui/react-utilities';
+import { popoverSurfaceSlots } from './usePopoverSurface';
 /**
  * Render the final JSX of PopoverSurface
  */
+
 export var renderPopoverSurface = function (state) {
-    var _a = getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
-    // TODO should hidden Popovers be supported ?
-    if (!state.open) {
-        return null;
-    }
-    return (React.createElement(Portal, { mountNode: state.mountNode },
-        React.createElement(slots.root, __assign({}, slotProps.root),
-            !state.noArrow && React.createElement("div", { ref: state.arrowRef, className: state.arrowClassName }),
-            state.children)));
+  var _a = getSlots(state, popoverSurfaceSlots),
+      slots = _a.slots,
+      slotProps = _a.slotProps; // TODO should hidden Popovers be supported ?
+
+
+  if (!state.open) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Portal, {
+    mountNode: state.mountNode
+  }, /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), !state.noArrow && /*#__PURE__*/React.createElement("div", {
+    ref: state.arrowRef,
+    className: state.arrowClassName
+  }), slotProps.root.children));
 };
 //# sourceMappingURL=renderPopoverSurface.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderPopoverSurface.js","sourceRoot":"../src/","sources":["components/PopoverSurface/renderPopoverSurface.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAGhD;;GAEG;AACH,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,KAA0B;IACvD,IAAA,KAAuB,QAAQ,CAAC,KAAK,CAAC,EAApC,KAAK,WAAA,EAAE,SAAS,eAAoB,CAAC;IAE7C,6CAA6C;IAC7C,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;QACf,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,MAAM,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS;QAChC,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI;YAC3B,CAAC,KAAK,CAAC,OAAO,IAAI,6BAAK,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,GAAI;YAC/E,KAAK,CAAC,QAAQ,CACJ,CACN,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport { PopoverSurfaceState } from './PopoverSurface.types';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderPopoverSurface = (state: PopoverSurfaceState) => {\n  const { slots, slotProps } = getSlots(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,"sources":["../../../src/components/PopoverSurface/renderPopoverSurface.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,mBAAT,QAAoC,qBAApC;AAEA;;AAEG;;AACH,OAAO,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA2B;AACvD,MAAA,EAAA,GAAuB,QAAQ,CAAsB,KAAtB,EAA6B,mBAA7B,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB,CADuD,CAG7D;;;AACA,MAAI,CAAC,KAAK,CAAC,IAAX,EAAiB;AACf,WAAO,IAAP;AACD;;AAED,sBACE,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO;AAAC,IAAA,SAAS,EAAE,KAAK,CAAC;AAAlB,GAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,CAAC,KAAK,CAAC,OAAP,iBAAkB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADrB,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF,CADF;AAQD,CAhBM","sourceRoot":""}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { 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,6 @@ import { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types
  * 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.Ref<HTMLElement>, defaultProps?: PopoverSurfaceProps | undefined) => PopoverSurfaceState;
+export declare const usePopoverSurface: (props: PopoverSurfaceProps, ref: React.Ref<HTMLDivElement>) => PopoverSurfaceState;

package/lib/components/PopoverSurface/usePopoverSurface.js

@@ -1,9 +1,9 @@
 import { __assign } from "tslib";
 import * as React from 'react';
-import { makeMergeProps, useMergedRefs } from '@fluentui/react-utilities';
+import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
 import { useFocusFinders, useModalAttributes } from '@fluentui/react-tabster';
 import { usePopoverContext } from '../../popoverContext';
-var mergeProps = makeMergeProps({});
+export var popoverSurfaceSlots = ['root'];
 /**
  * Create the state required to render PopoverSurface.
  *
@@ -11,58 +11,98 @@ var mergeProps = makeMergeProps({});
  * 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 var usePopoverSurface = function (props, ref, defaultProps) {
-    var contentRef = usePopoverContext(function (context) { return context.contentRef; });
-    var open = usePopoverContext(function (context) { return context.open; });
-    var openOnHover = usePopoverContext(function (context) { return context.openOnHover; });
-    var setOpen = usePopoverContext(function (context) { return context.setOpen; });
-    var mountNode = usePopoverContext(function (context) { return context.mountNode; });
-    var arrowRef = usePopoverContext(function (context) { return context.arrowRef; });
-    var size = usePopoverContext(function (context) { return context.size; });
-    var noArrow = usePopoverContext(function (context) { return context.noArrow; });
-    var brand = usePopoverContext(function (context) { return context.brand; });
-    var inverted = usePopoverContext(function (context) { return context.inverted; });
-    var trapFocus = usePopoverContext(function (context) { return context.trapFocus; });
-    var modalAttributes = useModalAttributes({ trapFocus: trapFocus }).modalAttributes;
-    var state = mergeProps(__assign({ brand: brand,
-        inverted: inverted,
-        noArrow: noArrow,
-        size: size,
-        arrowRef: arrowRef,
-        open: open,
-        mountNode: mountNode, role: 'dialog', ref: useMergedRefs(ref, contentRef) }, modalAttributes), defaultProps, props);
-    var onMouseEnterOriginal = state.onMouseEnter, onMouseLeaveOriginal = state.onMouseLeave, onKeyDownOriginal = state.onKeyDown;
-    state.onMouseEnter = function (e) {
-        if (openOnHover) {
-            setOpen(e, true);
-        }
-        onMouseEnterOriginal === null || onMouseEnterOriginal === void 0 ? void 0 : onMouseEnterOriginal(e);
-    };
-    state.onMouseLeave = function (e) {
-        if (openOnHover) {
-            setOpen(e, false);
-        }
-        onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(e);
-    };
-    state.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
-        if (e.key === 'Escape' && ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
-            setOpen(e, false);
-        }
-        onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
-    };
-    var findFirstFocusable = useFocusFinders().findFirstFocusable;
-    React.useEffect(function () {
-        if (state.open && contentRef.current) {
-            var firstFocusable = findFirstFocusable(contentRef.current);
-            firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
-        }
-    }, [contentRef, findFirstFocusable, state.open]);
-    return state;
+
+export var usePopoverSurface = function (props, ref) {
+  var contentRef = usePopoverContext(function (context) {
+    return context.contentRef;
+  });
+  var open = usePopoverContext(function (context) {
+    return context.open;
+  });
+  var openOnHover = usePopoverContext(function (context) {
+    return context.openOnHover;
+  });
+  var setOpen = usePopoverContext(function (context) {
+    return context.setOpen;
+  });
+  var mountNode = usePopoverContext(function (context) {
+    return context.mountNode;
+  });
+  var arrowRef = usePopoverContext(function (context) {
+    return context.arrowRef;
+  });
+  var size = usePopoverContext(function (context) {
+    return context.size;
+  });
+  var noArrow = usePopoverContext(function (context) {
+    return context.noArrow;
+  });
+  var appearance = usePopoverContext(function (context) {
+    return context.appearance;
+  });
+  var trapFocus = usePopoverContext(function (context) {
+    return context.trapFocus;
+  });
+  var modalAttributes = useModalAttributes({
+    trapFocus: trapFocus
+  }).modalAttributes;
+  var state = {
+    appearance: appearance,
+    noArrow: noArrow,
+    size: size,
+    arrowRef: arrowRef,
+    open: open,
+    mountNode: mountNode,
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps('div', __assign(__assign({
+      ref: 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.root.onMouseLeave = function (e) {
+    if (openOnHover) {
+      setOpen(e, false);
+    }
+
+    onMouseLeaveOriginal === null || onMouseLeaveOriginal === void 0 ? void 0 : onMouseLeaveOriginal(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
+
+
+    if (e.key === 'Escape' && ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+      setOpen(e, false);
+    }
+
+    onKeyDownOriginal === null || onKeyDownOriginal === void 0 ? void 0 : onKeyDownOriginal(e);
+  };
+
+  var findFirstFocusable = useFocusFinders().findFirstFocusable;
+  React.useEffect(function () {
+    if (state.open && contentRef.current) {
+      var firstFocusable = findFirstFocusable(contentRef.current);
+      firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+    }
+  }, [contentRef, findFirstFocusable, state.open]);
+  return state;
 };
 //# sourceMappingURL=usePopoverSurface.js.map