@fluentui/react-popover - npm Package Compare versions

Comparing version 9.0.0-alpha.20 to 9.0.0-alpha.21

CHANGELOG.json

@@ -5,3 +5,26 @@ {
     {
-      "date": "Fri, 23 Jul 2021 07:34:43 GMT",
+      "date": "Mon, 26 Jul 2021 07:34:11 GMT",
+      "tag": "@fluentui/react-popover_v9.0.0-alpha.21",
+      "version": "9.0.0-alpha.21",
+      "comments": {
+        "prerelease": [
+          {
+            "comment": "add Babel plugins to build pipeline",
+            "author": "[e-mail]",
+            "commit": "19db6cb57a237073b0bb50d07eb921b1ce2e0c61",
+            "package": "@fluentui/react-popover"
+          }
+        ],
+        "none": [
+          {
+            "comment": "Bump @fluentui/babel-make-styles to v9.0.0-alpha.31",
+            "author": "[e-mail]",
+            "commit": "8c249a1c1a8dcc4b0d9877e5d5e8e6d126063788",
+            "package": "@fluentui/react-popover"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 23 Jul 2021 07:38:19 GMT",
       "tag": "@fluentui/react-popover_v9.0.0-alpha.20",
@@ -8,0 +31,0 @@ "version": "9.0.0-alpha.20",

CHANGELOG.md

 # Change Log - @fluentui/react-popover
 
-This log was last generated on Fri, 23 Jul 2021 07:34:43 GMT and should not be manually modified.
+This log was last generated on Mon, 26 Jul 2021 07:34:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-alpha.21)
+
+Mon, 26 Jul 2021 07:34:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-alpha.20..@fluentui/react-popover_v9.0.0-alpha.21)
+
+### Changes
+
+- add Babel plugins to build pipeline ([PR #18968](https://github.com/microsoft/fluentui/pull/18968) by [e-mail])
+
 ## [9.0.0-alpha.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-popover_v9.0.0-alpha.20)
 
-Fri, 23 Jul 2021 07:34:43 GMT 
+Fri, 23 Jul 2021 07:38:19 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-popover_v9.0.0-alpha.19..@fluentui/react-popover_v9.0.0-alpha.20)
@@ -11,0 +20,0 @@

lib-commonjs/common/isConformant.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.isConformant = void 0;
-var react_conformance_1 = require("@fluentui/react-conformance");
+
+var react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
+
 function isConformant(testInfo) {
-    var defaultOptions = {
-        asPropHandlesRef: true,
-        componentPath: module.parent.filename.replace('.test', ''),
-    };
-    react_conformance_1.isConformant(defaultOptions, testInfo);
+  var defaultOptions = {
+    asPropHandlesRef: true,
+    componentPath: module.parent.filename.replace('.test', '')
+  };
+  react_conformance_1.isConformant(defaultOptions, testInfo);
 }
+
 exports.isConformant = isConformant;
 //# sourceMappingURL=isConformant.js.map

lib-commonjs/common/mockUsePopoverContext.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.mockPopoverContext = void 0;
-var tslib_1 = require("tslib");
-var popoverContext_1 = require("../popoverContext");
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var popoverContext_1 = /*#__PURE__*/require("../popoverContext");
 /**
@@ -11,11 +16,36 @@ * A test utility to mock the usePopoverContext hook that relies on context selector
  */
+
+
 var mockPopoverContext = function (options) {
-    if (options === void 0) { options = {}; }
-    var mockContext = tslib_1.__assign({ open: false, setOpen: function () { return null; }, triggerRef: { current: null }, contentRef: { current: null }, arrowRef: { current: null }, target: undefined, openOnContext: false, openOnHover: false, size: 'medium' }, options);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    popoverContext_1.usePopoverContext.mockImplementation(function (selector) {
-        return selector(mockContext);
-    });
+  if (options === void 0) {
+    options = {};
+  }
+
+  var mockContext = tslib_1.__assign({
+    open: false,
+    setOpen: function () {
+      return null;
+    },
+    triggerRef: {
+      current: null
+    },
+    contentRef: {
+      current: null
+    },
+    arrowRef: {
+      current: null
+    },
+    target: undefined,
+    openOnContext: false,
+    openOnHover: false,
+    size: 'medium'
+  }, options); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  popoverContext_1.usePopoverContext.mockImplementation(function (selector) {
+    return selector(mockContext);
+  });
 };
+
 exports.mockPopoverContext = mockPopoverContext;
 //# sourceMappingURL=mockUsePopoverContext.js.map

lib-commonjs/components/Popover/getOffsetWithArrow.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.getOffsetWithArrow = void 0;
@@ -9,31 +12,38 @@ /**
  */
+
 function getOffsetWithArrow(userOffset, arrowHeight) {
-    var offsetWithArrow = userOffset;
-    if (!userOffset) {
-        return [0, arrowHeight];
-    }
-    if (Array.isArray(offsetWithArrow)) {
-        setArrowOffset(offsetWithArrow, arrowHeight);
-        return offsetWithArrow;
-    }
-    if (typeof offsetWithArrow === 'function') {
-        var userOffsetFn_1 = offsetWithArrow;
-        offsetWithArrow = function (offsetParams) {
-            var offset = userOffsetFn_1(offsetParams);
-            setArrowOffset(offset, arrowHeight);
-            return offset;
-        };
-    }
-    // This should never happen
-    return [0, 0];
+  var offsetWithArrow = userOffset;
+
+  if (!userOffset) {
+    return [0, arrowHeight];
+  }
+
+  if (Array.isArray(offsetWithArrow)) {
+    setArrowOffset(offsetWithArrow, arrowHeight);
+    return offsetWithArrow;
+  }
+
+  if (typeof offsetWithArrow === 'function') {
+    var userOffsetFn_1 = offsetWithArrow;
+
+    offsetWithArrow = function (offsetParams) {
+      var offset = userOffsetFn_1(offsetParams);
+      setArrowOffset(offset, arrowHeight);
+      return offset;
+    };
+  } // This should never happen
+
+
+  return [0, 0];
 }
+
 exports.getOffsetWithArrow = getOffsetWithArrow;
+
 var setArrowOffset = function (offset, arrowHeight) {
-    if (offset[1] !== null && offset[1] !== undefined) {
-        offset[1] += arrowHeight;
-    }
-    else {
-        offset[1] = arrowHeight;
-    }
+  if (offset[1] !== null && offset[1] !== undefined) {
+    offset[1] += arrowHeight;
+  } else {
+    offset[1] = arrowHeight;
+  }
 };
 //# sourceMappingURL=getOffsetWithArrow.js.map

lib-commonjs/components/Popover/index.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./Popover"), exports);
+
 tslib_1.__exportStar(require("./Popover.types"), exports);
+
 tslib_1.__exportStar(require("./renderPopover"), exports);
+
 tslib_1.__exportStar(require("./usePopover"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/components/Popover/Popover.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.Popover = void 0;
-var usePopover_1 = require("./usePopover");
-var renderPopover_1 = require("./renderPopover");
+
+var usePopover_1 = /*#__PURE__*/require("./usePopover");
+
+var renderPopover_1 = /*#__PURE__*/require("./renderPopover");
 /**
  * Popover component
  */
+
+
 var Popover = function (props) {
-    var state = usePopover_1.usePopover(props);
-    return renderPopover_1.renderPopover(state);
+  var state = usePopover_1.usePopover(props);
+  return renderPopover_1.renderPopover(state);
 };
+
 exports.Popover = Popover;
 exports.Popover.displayName = 'Popover';
 //# sourceMappingURL=Popover.js.map

lib-commonjs/components/Popover/Popover.types.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=Popover.types.js.map

lib-commonjs/components/Popover/renderPopover.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.renderPopover = void 0;
-var React = require("react");
-var popoverContext_1 = require("../../popoverContext");
+
+var React = /*#__PURE__*/require("react");
+
+var popoverContext_1 = /*#__PURE__*/require("../../popoverContext");
 /**
  * Render the final JSX of Popover
  */
+
+
 var renderPopover = function (state) {
-    var open = state.open, setOpen = state.setOpen, triggerRef = state.triggerRef, contentRef = state.contentRef, target = state.target, openOnContext = state.openOnContext, openOnHover = state.openOnHover, mountNode = state.mountNode, arrowRef = state.arrowRef, size = state.size, noArrow = state.noArrow, brand = state.brand, inverted = state.inverted, trapFocus = state.trapFocus;
-    return (React.createElement(popoverContext_1.PopoverContext.Provider, { value: {
-            open: open,
-            setOpen: setOpen,
-            triggerRef: triggerRef,
-            contentRef: contentRef,
-            target: target,
-            openOnHover: openOnHover,
-            openOnContext: openOnContext,
-            mountNode: mountNode,
-            arrowRef: arrowRef,
-            size: size,
-            noArrow: noArrow,
-            brand: brand,
-            inverted: inverted,
-            trapFocus: trapFocus,
-        } }, state.children));
+  var open = state.open,
+      setOpen = state.setOpen,
+      triggerRef = state.triggerRef,
+      contentRef = state.contentRef,
+      target = state.target,
+      openOnContext = state.openOnContext,
+      openOnHover = state.openOnHover,
+      mountNode = state.mountNode,
+      arrowRef = state.arrowRef,
+      size = state.size,
+      noArrow = state.noArrow,
+      brand = state.brand,
+      inverted = state.inverted,
+      trapFocus = state.trapFocus;
+  return React.createElement(popoverContext_1.PopoverContext.Provider, {
+    value: {
+      open: open,
+      setOpen: setOpen,
+      triggerRef: triggerRef,
+      contentRef: contentRef,
+      target: target,
+      openOnHover: openOnHover,
+      openOnContext: openOnContext,
+      mountNode: mountNode,
+      arrowRef: arrowRef,
+      size: size,
+      noArrow: noArrow,
+      brand: brand,
+      inverted: inverted,
+      trapFocus: trapFocus
+    }
+  }, state.children);
 };
+
 exports.renderPopover = renderPopover;
 //# sourceMappingURL=renderPopover.js.map

lib-commonjs/components/Popover/usePopover.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.usePopover = void 0;
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var react_shared_contexts_1 = require("@fluentui/react-shared-contexts");
-var react_positioning_1 = require("@fluentui/react-positioning");
-var react_portal_1 = require("@fluentui/react-portal");
-var index_1 = require("../PopoverSurface/index");
-var getOffsetWithArrow_1 = require("./getOffsetWithArrow");
+
+var React = /*#__PURE__*/require("react");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+
+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");
+
+var getOffsetWithArrow_1 = /*#__PURE__*/require("./getOffsetWithArrow");
 /**
  * Names of the shorthand properties in PopoverProps
  */
-var mergeProps = react_utilities_1.makeMergeProps({});
+
+
+var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps({});
 /**
@@ -24,42 +36,62 @@ * Create the state required to render Popover.
  */
+
 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 = 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); },
-        refs: [state.triggerRef, state.contentRef],
-        disabled: !state.open,
-    });
-    react_utilities_1.useOnScrollOutside({
-        contains: react_portal_1.elementContains,
-        element: targetDocument,
-        callback: function (ev) { return state.setOpen(ev, false); },
-        refs: [state.triggerRef, state.contentRef],
-        disabled: !state.open || !state.openOnContext,
-    });
-    return state;
+  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 = 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);
+    },
+    refs: [state.triggerRef, state.contentRef],
+    disabled: !state.open
+  });
+  react_utilities_1.useOnScrollOutside({
+    contains: react_portal_1.elementContains,
+    element: targetDocument,
+    callback: function (ev) {
+      return state.setOpen(ev, false);
+    },
+    refs: [state.triggerRef, state.contentRef],
+    disabled: !state.open || !state.openOnContext
+  });
+  return state;
 };
+
 exports.usePopover = usePopover;
@@ -70,25 +102,39 @@ /**
  */
+
 function useOpenState(state) {
-    var onOpenChange = react_utilities_1.useEventCallback(function (e, data) { var _a; 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), 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 = react_positioning_1.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 = react_utilities_1.useEventCallback(function (e, data) {
+    var _a;
+
+    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),
+      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 = react_positioning_1.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
         });
-    }, [setOpen, onOpenChange, setContextTarget]);
-    return state;
+      }
+
+      return shouldOpen;
+    });
+  }, [setOpen, onOpenChange, setContextTarget]);
+  return state;
 }
@@ -99,22 +145,30 @@ /**
  */
+
+
 function usePopoverRefs(state) {
-    if (!state.noArrow) {
-        state.offset = getOffsetWithArrow_1.getOffsetWithArrow(state.offset, index_1.arrowHeights[state.size]);
-    }
-    if (!state.target && state.openOnContext && state.contextTarget) {
-        state.target = state.contextTarget;
-    }
-    var _a = react_positioning_1.usePopper({
-        align: state.align,
-        position: state.position,
-        target: state.target,
-        coverTarget: state.coverTarget,
-        offset: state.offset,
-        arrowPadding: index_1.arrowHeights[state.size],
-    }), triggerRef = _a.targetRef, contentRef = _a.containerRef, arrowRef = _a.arrowRef;
-    state.contentRef = contentRef;
-    state.triggerRef = triggerRef;
-    state.arrowRef = arrowRef;
-    return state;
+  if (!state.noArrow) {
+    state.offset = getOffsetWithArrow_1.getOffsetWithArrow(state.offset, index_1.arrowHeights[state.size]);
+  }
+
+  if (!state.target && state.openOnContext && state.contextTarget) {
+    state.target = state.contextTarget;
+  }
+
+  var _a = react_positioning_1.usePopper({
+    align: state.align,
+    position: state.position,
+    target: state.target,
+    coverTarget: state.coverTarget,
+    offset: state.offset,
+    arrowPadding: index_1.arrowHeights[state.size]
+  }),
+      triggerRef = _a.targetRef,
+      contentRef = _a.containerRef,
+      arrowRef = _a.arrowRef;
+
+  state.contentRef = contentRef;
+  state.triggerRef = triggerRef;
+  state.arrowRef = arrowRef;
+  return state;
 }
 //# sourceMappingURL=usePopover.js.map

lib-commonjs/components/PopoverSurface/index.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./PopoverSurface"), exports);
+
 tslib_1.__exportStar(require("./PopoverSurface.types"), exports);
+
 tslib_1.__exportStar(require("./renderPopoverSurface"), exports);
+
 tslib_1.__exportStar(require("./usePopoverSurface"), exports);
+
 tslib_1.__exportStar(require("./usePopoverSurfaceStyles"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/components/PopoverSurface/PopoverSurface.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.PopoverSurface = void 0;
-var React = require("react");
-var usePopoverSurface_1 = require("./usePopoverSurface");
-var renderPopoverSurface_1 = require("./renderPopoverSurface");
-var usePopoverSurfaceStyles_1 = require("./usePopoverSurfaceStyles");
+
+var React = /*#__PURE__*/require("react");
+
+var usePopoverSurface_1 = /*#__PURE__*/require("./usePopoverSurface");
+
+var renderPopoverSurface_1 = /*#__PURE__*/require("./renderPopoverSurface");
+
+var usePopoverSurfaceStyles_1 = /*#__PURE__*/require("./usePopoverSurfaceStyles");
 /**
  * PopoverSurface component renders react children in a positioned box
  */
-exports.PopoverSurface = React.forwardRef(function (props, ref) {
-    var state = usePopoverSurface_1.usePopoverSurface(props, ref);
-    usePopoverSurfaceStyles_1.usePopoverSurfaceStyles(state);
-    return renderPopoverSurface_1.renderPopoverSurface(state);
+
+
+exports.PopoverSurface = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = usePopoverSurface_1.usePopoverSurface(props, ref);
+  usePopoverSurfaceStyles_1.usePopoverSurfaceStyles(state);
+  return renderPopoverSurface_1.renderPopoverSurface(state);
 });
 exports.PopoverSurface.displayName = 'PopoverSurface';
 //# sourceMappingURL=PopoverSurface.js.map

lib-commonjs/components/PopoverSurface/PopoverSurface.types.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=PopoverSurface.types.js.map

lib-commonjs/components/PopoverSurface/renderPopoverSurface.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.renderPopoverSurface = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var react_portal_1 = require("@fluentui/react-portal");
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var React = /*#__PURE__*/require("react");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
 /**
  * Render the final JSX of PopoverSurface
  */
+
+
 var renderPopoverSurface = function (state) {
-    var _a = react_utilities_1.getSlotsCompat(state), slots = _a.slots, slotProps = _a.slotProps;
-    // TODO should hidden Popovers be supported ?
-    if (!state.open) {
-        return null;
-    }
-    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)));
+  var _a = react_utilities_1.getSlotsCompat(state),
+      slots = _a.slots,
+      slotProps = _a.slotProps; // TODO should hidden Popovers be supported ?
+
+
+  if (!state.open) {
+    return null;
+  }
+
+  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));
 };
+
 exports.renderPopoverSurface = renderPopoverSurface;
 //# sourceMappingURL=renderPopoverSurface.js.map

lib-commonjs/components/PopoverSurface/usePopoverSurface.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.usePopoverSurface = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var react_tabster_1 = require("@fluentui/react-tabster");
-var popoverContext_1 = require("../../popoverContext");
-var mergeProps = react_utilities_1.makeMergeProps({});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var React = /*#__PURE__*/require("react");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
+var popoverContext_1 = /*#__PURE__*/require("../../popoverContext");
+
+var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps({});
 /**
@@ -20,54 +29,94 @@ * Create the state required to render PopoverSurface.
  */
+
 var usePopoverSurface = function (props, ref, defaultProps) {
-    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; });
-    var setOpen = popoverContext_1.usePopoverContext(function (context) { return context.setOpen; });
-    var mountNode = popoverContext_1.usePopoverContext(function (context) { return context.mountNode; });
-    var arrowRef = popoverContext_1.usePopoverContext(function (context) { return context.arrowRef; });
-    var size = popoverContext_1.usePopoverContext(function (context) { return context.size; });
-    var noArrow = popoverContext_1.usePopoverContext(function (context) { return context.noArrow; });
-    var brand = popoverContext_1.usePopoverContext(function (context) { return context.brand; });
-    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,
-        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) {
-        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 = react_tabster_1.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;
+  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;
+  });
+  var setOpen = popoverContext_1.usePopoverContext(function (context) {
+    return context.setOpen;
+  });
+  var mountNode = popoverContext_1.usePopoverContext(function (context) {
+    return context.mountNode;
+  });
+  var arrowRef = popoverContext_1.usePopoverContext(function (context) {
+    return context.arrowRef;
+  });
+  var size = popoverContext_1.usePopoverContext(function (context) {
+    return context.size;
+  });
+  var noArrow = popoverContext_1.usePopoverContext(function (context) {
+    return context.noArrow;
+  });
+  var brand = popoverContext_1.usePopoverContext(function (context) {
+    return context.brand;
+  });
+  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,
+    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) {
+    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 = react_tabster_1.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;
 };
+
 exports.usePopoverSurface = usePopoverSurface;
 //# sourceMappingURL=usePopoverSurface.js.map

lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.usePopoverSurfaceStyles = exports.arrowHeights = void 0;
-var react_make_styles_1 = require("@fluentui/react-make-styles");
+
+var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
 exports.arrowHeights = {
-    small: 6,
-    medium: 8,
-    large: 8,
+  small: 6,
+  medium: 8,
+  large: 8
 };
@@ -13,58 +18,62 @@ /**
  */
-var useStyles = react_make_styles_1.makeStyles({
-    root: function (theme) { return ({
-        backgroundColor: theme.alias.color.neutral.neutralBackground1,
-        boxShadow: theme.alias.shadow.shadow16,
-        borderRadius: '4px',
-    }); },
-    inverted: function (theme) { return ({
-        // TODO: neutral background inverted missing from superset and theme
-        backgroundColor: theme.global.palette.grey[16],
-        color: theme.alias.color.neutral.neutralForegroundInverted,
-    }); },
-    brand: function (theme) { return ({
-        backgroundColor: theme.alias.color.neutral.brandBackground,
-        // TODO: clarify with designers what foreground color should be with brand background,
-        color: theme.alias.color.neutral.neutralForegroundInverted,
-    }); },
-    smallPadding: function () { return ({
-        padding: '12px',
-    }); },
-    mediumPadding: function () { return ({
-        padding: '16px',
-    }); },
-    largePadding: function () { return ({
-        padding: '20px',
-    }); },
-    smallArrow: function () { return ({
-        width: Math.SQRT2 * exports.arrowHeights.small + "px",
-        height: Math.SQRT2 * exports.arrowHeights.small + "px",
-    }); },
-    mediumLargeArrow: function () { return ({
-        width: Math.SQRT2 * exports.arrowHeights.medium + "px",
-        height: Math.SQRT2 * exports.arrowHeights.medium + "px",
-    }); },
-    // TODO dedupe these styles with tooltip
-    arrow: function (theme) { return ({
-        position: 'absolute',
-        background: 'inherit',
-        visibility: 'hidden',
-        zIndex: -1,
-        ':before': {
-            content: '""',
-            borderRadius: '4px',
-            position: 'absolute',
-            width: 'inherit',
-            height: 'inherit',
-            background: 'inherit',
-            visibility: 'visible',
-            borderBottomRightRadius: theme.global.borderRadius.small,
-            transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',
-        },
-        // Popper sets data-popper-placement on the root element, which is used to align the arrow
-        ':global([data-popper-placement^="top"])': { bottom: 0, '--angle': '0' },
-        ':global([data-popper-placement^="right"])': { left: 0, '--angle': '90deg' },
-        ':global([data-popper-placement^="bottom"])': { top: 0, '--angle': '180deg' },
-        ':global([data-popper-placement^="left"])': { right: 0, '--angle': '270deg' },
-    }); },
+
+var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "root": {
+    "De3pzq": "fpnz0vo",
+    "E5pizo": ["f1w99gcg", "f1rtvzsr"],
+    "Dimara": "ff3glw6"
+  },
+  "inverted": {
+    "De3pzq": "f87skp6",
+    "sj55zd": "fvxcxse"
+  },
+  "brand": {
+    "De3pzq": "ffpa81x",
+    "sj55zd": "fvxcxse"
+  },
+  "smallPadding": {
+    "z8tnut": "f1kcqot9",
+    "z189sj": ["f11qrl6u", "fjlbh76"],
+    "Byoj8tv": "fpe6lb7",
+    "uwmqm3": ["fjlbh76", "f11qrl6u"]
+  },
+  "mediumPadding": {
+    "z8tnut": "fqag9an",
+    "z189sj": ["f1gbmcue", "f1rh9g5y"],
+    "Byoj8tv": "fp67ikv",
+    "uwmqm3": ["f1rh9g5y", "f1gbmcue"]
+  },
+  "largePadding": {
+    "z8tnut": "fc7z3ec",
+    "z189sj": ["fat0sn4", "fekwl8i"],
+    "Byoj8tv": "fe2my4m",
+    "uwmqm3": ["fekwl8i", "fat0sn4"]
+  },
+  "smallArrow": {},
+  "mediumLargeArrow": {},
+  "arrow": {
+    "qhf8xq": "f1euv43f",
+    "ayd6f0": "f1uo6wrk",
+    "Bcdw1i0": "fd7fpy0",
+    "Bj3rh1h": "f1bsuimh",
+    "rurcny": "fuzzvh5",
+    "zf3lio": "f1qudtws",
+    "xx9plb": "fxf9f1y",
+    "Bdn98qo": "f103af6e",
+    "Bbc2r3f": "f15umuo5",
+    "B4zgs9e": "ffo048g",
+    "Bex5imi": "fkk33zh",
+    "px8gyy": ["f1goijxq", "fgrotbq"],
+    "h6z6rw": ["fzd2j21", "f2549he"],
+    "hl6cv3": "fotnskf",
+    "Bh2vraf": "f1n8855c",
+    "yayu3t": ["f1nq055x", "f13ohf3"],
+    "wedwtw": "fsw6im5",
+    "rhl9o9": "ftghsr9",
+    "Bu8t5uz": "f159pzir",
+    "B6q6orb": ["f1l8vbt4", "fsxzh25"],
+    "Bwwlvwl": "fm1ycve"
+  }
+}, {
+  "d": [".fpnz0vo{background-color:var(--alias-color-neutral-neutralBackground1);}", ".f1w99gcg{box-shadow:var(--alias-shadow-shadow16);}", ".f1rtvzsr{box-shadow:var(--alias-shadow-shadow-16);}", ".ff3glw6{border-radius:4px;}", ".f87skp6{background-color:var(--global-palette-grey-16);}", ".fvxcxse{color:var(--alias-color-neutral-neutralForegroundInverted);}", ".ffpa81x{background-color:var(--alias-color-neutral-brandBackground);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fqag9an{padding-top:16px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fp67ikv{padding-bottom:16px;}", ".fc7z3ec{padding-top:20px;}", ".fat0sn4{padding-right:20px;}", ".fekwl8i{padding-left:20px;}", ".fe2my4m{padding-bottom:20px;}", ".f1euv43f{position:absolute;}", ".f1uo6wrk{background:inherit;}", ".fd7fpy0{visibility:hidden;}", ".f1bsuimh{z-index:-1;}", ".fuzzvh5:before{content:\"\";}", ".f1qudtws:before{border-radius:4px;}", ".fxf9f1y:before{position:absolute;}", ".f103af6e:before{width:inherit;}", ".f15umuo5:before{height:inherit;}", ".ffo048g:before{background:inherit;}", ".fkk33zh:before{visibility:visible;}", ".f1goijxq:before{border-bottom-right-radius:var(--global-borderRadius-small);}", ".fgrotbq:before{border-bottom-left-radius:var(--global-borderRadius-small);}", ".fzd2j21:before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);}", ".f2549he:before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);}", "[data-popper-placement^=\"top\"] .fotnskf{bottom:0;}", "[data-popper-placement^=\"top\"] .f1n8855c{--angle:0;}", "[data-popper-placement^=\"right\"] .f1nq055x{left:0;}", "[data-popper-placement^=\"right\"] .f13ohf3{right:0;}", "[data-popper-placement^=\"right\"] .fsw6im5{--angle:90deg;}", "[data-popper-placement^=\"bottom\"] .ftghsr9{top:0;}", "[data-popper-placement^=\"bottom\"] .f159pzir{--angle:180deg;}", "[data-popper-placement^=\"left\"] .f1l8vbt4{right:0;}", "[data-popper-placement^=\"left\"] .fsxzh25{left:0;}", "[data-popper-placement^=\"left\"] .fm1ycve{--angle:270deg;}"]
 });
@@ -74,9 +83,12 @@ /**
  */
+
+
 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.arrowClassName = react_make_styles_1.mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
-    return 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.arrowClassName = react_make_styles_1.mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
+  return state;
 };
+
 exports.usePopoverSurfaceStyles = usePopoverSurfaceStyles;
 //# sourceMappingURL=usePopoverSurfaceStyles.js.map

lib-commonjs/components/PopoverTrigger/index.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./PopoverTrigger"), exports);
+
 tslib_1.__exportStar(require("./PopoverTrigger.types"), exports);
+
 tslib_1.__exportStar(require("./renderPopoverTrigger"), exports);
+
 tslib_1.__exportStar(require("./usePopoverTrigger"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/components/PopoverTrigger/PopoverTrigger.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.PopoverTrigger = void 0;
-var usePopoverTrigger_1 = require("./usePopoverTrigger");
-var renderPopoverTrigger_1 = require("./renderPopoverTrigger");
+
+var usePopoverTrigger_1 = /*#__PURE__*/require("./usePopoverTrigger");
+
+var renderPopoverTrigger_1 = /*#__PURE__*/require("./renderPopoverTrigger");
 /**
  * PopoverTrigger component
  */
+
+
 var PopoverTrigger = function (props) {
-    var state = usePopoverTrigger_1.usePopoverTrigger(props);
-    return renderPopoverTrigger_1.renderPopoverTrigger(state);
+  var state = usePopoverTrigger_1.usePopoverTrigger(props);
+  return renderPopoverTrigger_1.renderPopoverTrigger(state);
 };
+
 exports.PopoverTrigger = PopoverTrigger;
 exports.PopoverTrigger.displayName = 'PopoverTrigger';
 //# sourceMappingURL=PopoverTrigger.js.map

lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=PopoverTrigger.types.js.map

lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.renderPopoverTrigger = void 0;
@@ -7,6 +10,8 @@ /**
  */
+
 var renderPopoverTrigger = function (state) {
-    return state.children;
+  return state.children;
 };
+
 exports.renderPopoverTrigger = renderPopoverTrigger;
 //# sourceMappingURL=renderPopoverTrigger.js.map

lib-commonjs/components/PopoverTrigger/usePopoverTrigger.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.usePopoverTrigger = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var react_tabster_1 = require("@fluentui/react-tabster");
-var popoverContext_1 = require("../../popoverContext");
-var mergeProps = react_utilities_1.makeMergeProps({});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var React = /*#__PURE__*/require("react");
+
+var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+var react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
+
+var popoverContext_1 = /*#__PURE__*/require("../../popoverContext");
+
+var mergeProps = /*#__PURE__*/react_utilities_1.makeMergeProps({});
 /**
@@ -19,61 +28,88 @@ * Create the state required to render PopoverTrigger.
  */
+
 var usePopoverTrigger = function (props, defaultProps) {
-    var setOpen = popoverContext_1.usePopoverContext(function (context) { return context.setOpen; });
-    var open = popoverContext_1.usePopoverContext(function (context) { return context.open; });
-    var triggerRef = popoverContext_1.usePopoverContext(function (context) { return context.triggerRef; });
-    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) {
-            e.preventDefault();
-            setOpen(e, true);
-        }
-        (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onContextMenu) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-    });
-    var onClick = react_utilities_1.useEventCallback(function (e) {
-        var _a, _b;
-        if (!openOnContext) {
-            setOpen(e, !open);
-        }
-        (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-    });
-    var onKeyDown = react_utilities_1.useEventCallback(function (e) {
-        var _a, _b, _c;
-        if (react_utilities_1.shouldPreventDefaultOnKeyDown(e) && (e.key === ' ' || e.key === 'Enter')) {
-            e.preventDefault();
-            (_a = e.target) === null || _a === void 0 ? void 0 : _a.click();
-        }
-        if (e.key === 'Escape') {
-            setOpen(e, false);
-        }
-        (_c = (_b = child.props) === null || _b === void 0 ? void 0 : _b.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(_b, e);
-    });
-    var onMouseEnter = react_utilities_1.useEventCallback(function (e) {
-        var _a, _b;
-        if (openOnHover) {
-            setOpen(e, true);
-        }
-        (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-    });
-    var onMouseLeave = react_utilities_1.useEventCallback(function (e) {
-        var _a, _b;
-        if (openOnHover) {
-            setOpen(e, false);
-        }
-        (_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.props.ref, triggerRef) }, triggerAttributes));
-    return state;
+  var setOpen = popoverContext_1.usePopoverContext(function (context) {
+    return context.setOpen;
+  });
+  var open = popoverContext_1.usePopoverContext(function (context) {
+    return context.open;
+  });
+  var triggerRef = popoverContext_1.usePopoverContext(function (context) {
+    return context.triggerRef;
+  });
+  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) {
+      e.preventDefault();
+      setOpen(e, true);
+    }
+
+    (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onContextMenu) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+  });
+  var onClick = react_utilities_1.useEventCallback(function (e) {
+    var _a, _b;
+
+    if (!openOnContext) {
+      setOpen(e, !open);
+    }
+
+    (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+  });
+  var onKeyDown = react_utilities_1.useEventCallback(function (e) {
+    var _a, _b, _c;
+
+    if (react_utilities_1.shouldPreventDefaultOnKeyDown(e) && (e.key === ' ' || e.key === 'Enter')) {
+      e.preventDefault();
+      (_a = e.target) === null || _a === void 0 ? void 0 : _a.click();
+    }
+
+    if (e.key === 'Escape') {
+      setOpen(e, false);
+    }
+
+    (_c = (_b = child.props) === null || _b === void 0 ? void 0 : _b.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+  });
+  var onMouseEnter = react_utilities_1.useEventCallback(function (e) {
+    var _a, _b;
+
+    if (openOnHover) {
+      setOpen(e, true);
+    }
+
+    (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+  });
+  var onMouseLeave = react_utilities_1.useEventCallback(function (e) {
+    var _a, _b;
+
+    if (openOnHover) {
+      setOpen(e, false);
+    }
+
+    (_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.props.ref, triggerRef)
+  }, triggerAttributes));
+  return state;
 };
+
 exports.usePopoverTrigger = usePopoverTrigger;
 //# sourceMappingURL=usePopoverTrigger.js.map

lib-commonjs/index.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./Popover"), exports);
+
 tslib_1.__exportStar(require("./PopoverSurface"), exports);
+
 tslib_1.__exportStar(require("./popoverContext"), exports);
+
 tslib_1.__exportStar(require("./PopoverTrigger"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/Popover.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./components/Popover/index"), exports);
 //# sourceMappingURL=Popover.js.map

lib-commonjs/Popover.stories.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.InternalUpdateContent = exports.NestedPopovers = exports.WithCustomTrigger = exports.Controlled = exports.AnchorToTarget = exports.Default = void 0;
-var tslib_1 = require("tslib");
-var React = require("react");
-var index_1 = require("./index");
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
+var React = /*#__PURE__*/require("react");
+
+var index_1 = /*#__PURE__*/require("./index");
+
 var ExampleContent = function () {
-    return (React.createElement("div", null,
-        React.createElement("h3", null, "Popover content"),
-        React.createElement("div", null, "This is some popover content")));
+  return React.createElement("div", null, React.createElement("h3", null, "Popover content"), React.createElement("div", null, "This is some popover content"));
 };
-var Default = function (props) { return (React.createElement(index_1.Popover, tslib_1.__assign({}, props),
-    React.createElement(index_1.PopoverTrigger, null,
-        React.createElement("button", null, "Popover trigger")),
-    React.createElement(index_1.PopoverSurface, null,
-        React.createElement(ExampleContent, null),
-        React.createElement("div", null,
-            React.createElement("button", null, "Action"),
-            React.createElement("button", null, "Action"))))); };
-exports.Default = Default;
-// @FIXME - remove manually specified argTypes once `react-components` package will use new storybook setup(DX)
+
+var Default = function (props) {
+  return React.createElement(index_1.Popover, tslib_1.__assign({}, props), React.createElement(index_1.PopoverTrigger, null, React.createElement("button", null, "Popover trigger")), React.createElement(index_1.PopoverSurface, null, React.createElement(ExampleContent, null), React.createElement("div", null, React.createElement("button", null, "Action"), React.createElement("button", null, "Action"))));
+};
+
+exports.Default = Default; // @FIXME - remove manually specified argTypes once `react-components` package will use new storybook setup(DX)
 // https://github.com/microsoft/fluentui/issues/18514
+
 exports.Default.argTypes = {
-    openOnContext: {
-        defaultValue: false,
-        control: 'boolean',
+  openOnContext: {
+    defaultValue: false,
+    control: 'boolean'
+  },
+  openOnHover: {
+    defaultValue: false,
+    control: 'boolean'
+  },
+  position: {
+    type: {
+      name: 'string',
+      required: false
     },
-    openOnHover: {
-        defaultValue: false,
-        control: 'boolean',
+    control: {
+      type: 'select',
+      options: ['above', 'below', 'before', 'after']
+    }
+  },
+  align: {
+    type: {
+      name: 'string',
+      required: false
     },
-    position: {
-        type: { name: 'string', required: false },
-        control: {
-            type: 'select',
-            options: ['above', 'below', 'before', 'after'],
-        },
+    control: {
+      type: 'select',
+      options: ['top', 'bottom', 'start', 'end', 'center']
+    }
+  },
+  size: {
+    type: {
+      name: 'string',
+      required: false
     },
-    align: {
-        type: { name: 'string', required: false },
-        control: {
-            type: 'select',
-            options: ['top', 'bottom', 'start', 'end', 'center'],
-        },
-    },
-    size: {
-        type: { name: 'string', required: false },
-        control: {
-            type: 'select',
-            options: ['small', 'medium', 'large'],
-        },
-    },
-    trapFocus: {
-        defaultValue: true,
-        control: 'boolean',
-    },
+    control: {
+      type: 'select',
+      options: ['small', 'medium', 'large']
+    }
+  },
+  trapFocus: {
+    defaultValue: true,
+    control: 'boolean'
+  }
 };
 exports.Default.parameters = {
-    controls: {
-        disable: false,
-    },
+  controls: {
+    disable: false
+  }
 };
+
 var AnchorToTarget = function () {
-    var _a = React.useState(), target = _a[0], setTarget = _a[1];
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", null,
-            React.createElement(index_1.Popover, { target: target },
-                React.createElement(index_1.PopoverTrigger, null,
-                    React.createElement("button", null, "Popover trigger")),
-                React.createElement(index_1.PopoverSurface, null,
-                    React.createElement(ExampleContent, null)))),
-        React.createElement("button", { ref: setTarget }, "Custom target")));
+  var _a = React.useState(),
+      target = _a[0],
+      setTarget = _a[1];
+
+  return React.createElement(React.Fragment, null, React.createElement("div", null, React.createElement(index_1.Popover, {
+    target: target
+  }, React.createElement(index_1.PopoverTrigger, null, React.createElement("button", null, "Popover trigger")), React.createElement(index_1.PopoverSurface, null, React.createElement(ExampleContent, null)))), React.createElement("button", {
+    ref: setTarget
+  }, "Custom target"));
 };
+
 exports.AnchorToTarget = AnchorToTarget;
+
 var Controlled = function () {
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
-    var handleOpenChange = function (_, data) { return setOpen(data.open || false); };
-    return (React.createElement(index_1.Popover, { open: open, onOpenChange: handleOpenChange },
-        React.createElement(index_1.PopoverTrigger, null,
-            React.createElement("button", null, "Controlled trigger")),
-        React.createElement(index_1.PopoverSurface, null,
-            React.createElement(ExampleContent, null))));
+  var _a = React.useState(false),
+      open = _a[0],
+      setOpen = _a[1];
+
+  var handleOpenChange = function (_, data) {
+    return setOpen(data.open || false);
+  };
+
+  return React.createElement(index_1.Popover, {
+    open: open,
+    onOpenChange: handleOpenChange
+  }, React.createElement(index_1.PopoverTrigger, null, React.createElement("button", null, "Controlled trigger")), React.createElement(index_1.PopoverSurface, null, React.createElement(ExampleContent, null)));
 };
+
 exports.Controlled = Controlled;
+
 var WithCustomTrigger = function () {
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
-    var _b = React.useState(null), target = _b[0], setTarget = _b[1];
-    var onClick = function () { return setOpen(function (s) { return !s; }); };
-    var onOpenChange = function (_, data) { return setOpen(data.open || false); };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { "aria-haspopup": true, ref: setTarget, onClick: onClick }, "Custom trigger"),
-        React.createElement(index_1.Popover, { target: target, open: open, onOpenChange: onOpenChange },
-            React.createElement(index_1.PopoverSurface, null,
-                React.createElement(ExampleContent, null)))));
+  var _a = React.useState(false),
+      open = _a[0],
+      setOpen = _a[1];
+
+  var _b = React.useState(null),
+      target = _b[0],
+      setTarget = _b[1];
+
+  var onClick = function () {
+    return setOpen(function (s) {
+      return !s;
+    });
+  };
+
+  var onOpenChange = function (_, data) {
+    return setOpen(data.open || false);
+  };
+
+  return React.createElement(React.Fragment, null, React.createElement("button", {
+    "aria-haspopup": true,
+    ref: setTarget,
+    onClick: onClick
+  }, "Custom trigger"), React.createElement(index_1.Popover, {
+    target: target,
+    open: open,
+    onOpenChange: onOpenChange
+  }, React.createElement(index_1.PopoverSurface, null, React.createElement(ExampleContent, null))));
 };
+
 exports.WithCustomTrigger = WithCustomTrigger;
-var FirstNestedPopover = function () { return (React.createElement(index_1.Popover, { trapFocus: true },
-    React.createElement(index_1.PopoverTrigger, null,
-        React.createElement("button", null, "First nested trigger")),
-    React.createElement(index_1.PopoverSurface, null,
-        React.createElement(ExampleContent, null),
-        React.createElement("button", null, "First nested button"),
-        React.createElement(SecondNestedPopover, null),
-        React.createElement(SecondNestedPopover, null)))); };
-var SecondNestedPopover = function () { return (React.createElement(index_1.Popover, { trapFocus: true },
-    React.createElement(index_1.PopoverTrigger, null,
-        React.createElement("button", null, "Second nested trigger")),
-    React.createElement(index_1.PopoverSurface, null,
-        React.createElement(ExampleContent, null),
-        React.createElement("button", null, "Second nested button")))); };
+
+var FirstNestedPopover = function () {
+  return React.createElement(index_1.Popover, {
+    trapFocus: true
+  }, React.createElement(index_1.PopoverTrigger, null, React.createElement("button", null, "First nested trigger")), React.createElement(index_1.PopoverSurface, null, React.createElement(ExampleContent, null), React.createElement("button", null, "First nested button"), React.createElement(SecondNestedPopover, null), React.createElement(SecondNestedPopover, null)));
+};
+
+var SecondNestedPopover = function () {
+  return React.createElement(index_1.Popover, {
+    trapFocus: true
+  }, React.createElement(index_1.PopoverTrigger, null, React.createElement("button", null, "Second nested trigger")), React.createElement(index_1.PopoverSurface, null, React.createElement(ExampleContent, null), React.createElement("button", null, "Second nested button")));
+};
+
 var NestedPopovers = function () {
-    return (React.createElement(index_1.Popover, { trapFocus: true },
-        React.createElement(index_1.PopoverTrigger, null,
-            React.createElement("button", null, "Root trigger")),
-        React.createElement(index_1.PopoverSurface, null,
-            React.createElement(ExampleContent, null),
-            React.createElement("button", null, "Root button"),
-            React.createElement(FirstNestedPopover, null))));
+  return React.createElement(index_1.Popover, {
+    trapFocus: true
+  }, React.createElement(index_1.PopoverTrigger, null, React.createElement("button", null, "Root trigger")), React.createElement(index_1.PopoverSurface, null, React.createElement(ExampleContent, null), React.createElement("button", null, "Root button"), React.createElement(FirstNestedPopover, null)));
 };
-exports.NestedPopovers = NestedPopovers;
-// Used for internal testing
+
+exports.NestedPopovers = NestedPopovers; // Used for internal testing
+
 var InternalUpdateContent = function () {
-    var _a = React.useState(true), visible = _a[0], setVisible = _a[1];
-    var changeContent = function () { return setVisible(false); };
-    return (React.createElement(index_1.Popover, null,
-        React.createElement(index_1.PopoverTrigger, null,
-            React.createElement("button", null, "Popover trigger")),
-        React.createElement(index_1.PopoverSurface, null,
-            React.createElement(ExampleContent, null),
-            visible ? (React.createElement("div", null,
-                React.createElement("button", { onClick: changeContent }, "Action"))) : (React.createElement("div", null, "The second panel")))));
+  var _a = React.useState(true),
+      visible = _a[0],
+      setVisible = _a[1];
+
+  var changeContent = function () {
+    return setVisible(false);
+  };
+
+  return React.createElement(index_1.Popover, null, React.createElement(index_1.PopoverTrigger, null, React.createElement("button", null, "Popover trigger")), React.createElement(index_1.PopoverSurface, null, React.createElement(ExampleContent, null), visible ? React.createElement("div", null, React.createElement("button", {
+    onClick: changeContent
+  }, "Action")) : React.createElement("div", null, "The second panel")));
 };
+
 exports.InternalUpdateContent = InternalUpdateContent;
 exports.default = {
-    title: 'Components/Popover',
-    component: index_1.Popover,
+  title: 'Components/Popover',
+  component: index_1.Popover
 };
 //# sourceMappingURL=Popover.stories.js.map

lib-commonjs/popoverContext.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.usePopoverContext = exports.PopoverContext = void 0;
-var react_context_selector_1 = require("@fluentui/react-context-selector");
-exports.PopoverContext = react_context_selector_1.createContext({
-    open: false,
-    setOpen: function () { return null; },
-    triggerRef: { current: null },
-    contentRef: { current: null },
-    arrowRef: { current: null },
-    target: undefined,
-    openOnContext: false,
-    openOnHover: false,
-    size: 'medium',
-    trapFocus: false,
+
+var react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+
+exports.PopoverContext = /*#__PURE__*/react_context_selector_1.createContext({
+  open: false,
+  setOpen: function () {
+    return null;
+  },
+  triggerRef: {
+    current: null
+  },
+  contentRef: {
+    current: null
+  },
+  arrowRef: {
+    current: null
+  },
+  target: undefined,
+  openOnContext: false,
+  openOnHover: false,
+  size: 'medium',
+  trapFocus: false
 });
+
 var usePopoverContext = function (selector) {
-    return react_context_selector_1.useContextSelector(exports.PopoverContext, selector);
+  return react_context_selector_1.useContextSelector(exports.PopoverContext, selector);
 };
+
 exports.usePopoverContext = usePopoverContext;
 //# sourceMappingURL=popoverContext.js.map

lib-commonjs/PopoverSurface.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./components/PopoverSurface/index"), exports);
 //# sourceMappingURL=PopoverSurface.js.map

lib-commonjs/PopoverTrigger.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./components/PopoverTrigger/index"), exports);
 //# sourceMappingURL=PopoverTrigger.js.map

lib/common/isConformant.js

 import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
 export function isConformant(testInfo) {
-    var defaultOptions = {
-        asPropHandlesRef: true,
-        componentPath: module.parent.filename.replace('.test', ''),
-    };
-    baseIsConformant(defaultOptions, testInfo);
+  var defaultOptions = {
+    asPropHandlesRef: true,
+    componentPath: module.parent.filename.replace('.test', '')
+  };
+  baseIsConformant(defaultOptions, testInfo);
 }
 //# sourceMappingURL=isConformant.js.map

lib/common/mockUsePopoverContext.js

@@ -8,10 +8,33 @@ import { __assign } from "tslib";
  */
+
 export var mockPopoverContext = function (options) {
-    if (options === void 0) { options = {}; }
-    var mockContext = __assign({ open: false, setOpen: function () { return null; }, triggerRef: { current: null }, contentRef: { current: null }, arrowRef: { current: null }, target: undefined, openOnContext: false, openOnHover: false, size: 'medium' }, options);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    usePopoverContext.mockImplementation(function (selector) {
-        return selector(mockContext);
-    });
+  if (options === void 0) {
+    options = {};
+  }
+
+  var mockContext = __assign({
+    open: false,
+    setOpen: function () {
+      return null;
+    },
+    triggerRef: {
+      current: null
+    },
+    contentRef: {
+      current: null
+    },
+    arrowRef: {
+      current: null
+    },
+    target: undefined,
+    openOnContext: false,
+    openOnHover: false,
+    size: 'medium'
+  }, options); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  usePopoverContext.mockImplementation(function (selector) {
+    return selector(mockContext);
+  });
 };
 //# sourceMappingURL=mockUsePopoverContext.js.map

lib/components/Popover/getOffsetWithArrow.js

@@ -7,29 +7,34 @@ /**
 export function getOffsetWithArrow(userOffset, arrowHeight) {
-    var offsetWithArrow = userOffset;
-    if (!userOffset) {
-        return [0, arrowHeight];
-    }
-    if (Array.isArray(offsetWithArrow)) {
-        setArrowOffset(offsetWithArrow, arrowHeight);
-        return offsetWithArrow;
-    }
-    if (typeof offsetWithArrow === 'function') {
-        var userOffsetFn_1 = offsetWithArrow;
-        offsetWithArrow = function (offsetParams) {
-            var offset = userOffsetFn_1(offsetParams);
-            setArrowOffset(offset, arrowHeight);
-            return offset;
-        };
-    }
-    // This should never happen
-    return [0, 0];
+  var offsetWithArrow = userOffset;
+
+  if (!userOffset) {
+    return [0, arrowHeight];
+  }
+
+  if (Array.isArray(offsetWithArrow)) {
+    setArrowOffset(offsetWithArrow, arrowHeight);
+    return offsetWithArrow;
+  }
+
+  if (typeof offsetWithArrow === 'function') {
+    var userOffsetFn_1 = offsetWithArrow;
+
+    offsetWithArrow = function (offsetParams) {
+      var offset = userOffsetFn_1(offsetParams);
+      setArrowOffset(offset, arrowHeight);
+      return offset;
+    };
+  } // This should never happen
+
+
+  return [0, 0];
 }
+
 var setArrowOffset = function (offset, arrowHeight) {
-    if (offset[1] !== null && offset[1] !== undefined) {
-        offset[1] += arrowHeight;
-    }
-    else {
-        offset[1] = arrowHeight;
-    }
+  if (offset[1] !== null && offset[1] !== undefined) {
+    offset[1] += arrowHeight;
+  } else {
+    offset[1] = arrowHeight;
+  }
 };
 //# sourceMappingURL=getOffsetWithArrow.js.map

lib/components/Popover/Popover.js

@@ -6,7 +6,8 @@ import { usePopover } from './usePopover';
  */
+
 export var Popover = function (props) {
-    var state = usePopover(props);
-    return renderPopover(state);
+  var state = usePopover(props);
+  return renderPopover(state);
 };
 Popover.displayName = 'Popover';
 //# sourceMappingURL=Popover.js.map

lib/components/Popover/renderPopover.js

@@ -6,21 +6,37 @@ import * as React from 'react';
  */
+
 export var renderPopover = function (state) {
-    var open = state.open, setOpen = state.setOpen, triggerRef = state.triggerRef, contentRef = state.contentRef, target = state.target, openOnContext = state.openOnContext, openOnHover = state.openOnHover, mountNode = state.mountNode, arrowRef = state.arrowRef, size = state.size, noArrow = state.noArrow, brand = state.brand, inverted = state.inverted, trapFocus = state.trapFocus;
-    return (React.createElement(PopoverContext.Provider, { value: {
-            open: open,
-            setOpen: setOpen,
-            triggerRef: triggerRef,
-            contentRef: contentRef,
-            target: target,
-            openOnHover: openOnHover,
-            openOnContext: openOnContext,
-            mountNode: mountNode,
-            arrowRef: arrowRef,
-            size: size,
-            noArrow: noArrow,
-            brand: brand,
-            inverted: inverted,
-            trapFocus: trapFocus,
-        } }, state.children));
+  var open = state.open,
+      setOpen = state.setOpen,
+      triggerRef = state.triggerRef,
+      contentRef = state.contentRef,
+      target = state.target,
+      openOnContext = state.openOnContext,
+      openOnHover = state.openOnHover,
+      mountNode = state.mountNode,
+      arrowRef = state.arrowRef,
+      size = state.size,
+      noArrow = state.noArrow,
+      brand = state.brand,
+      inverted = state.inverted,
+      trapFocus = state.trapFocus;
+  return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
+    value: {
+      open: open,
+      setOpen: setOpen,
+      triggerRef: triggerRef,
+      contentRef: contentRef,
+      target: target,
+      openOnHover: openOnHover,
+      openOnContext: openOnContext,
+      mountNode: mountNode,
+      arrowRef: arrowRef,
+      size: size,
+      noArrow: noArrow,
+      brand: brand,
+      inverted: inverted,
+      trapFocus: trapFocus
+    }
+  }, state.children);
 };
 //# sourceMappingURL=renderPopover.js.map

lib/components/Popover/usePopover.js

 import * as React from 'react';
-import { makeMergeProps, useControllableValue, useEventCallback, useOnClickOutside, useOnScrollOutside, } from '@fluentui/react-utilities';
+import { makeMergeProps, useControllableValue, useEventCallback, useOnClickOutside, useOnScrollOutside } from '@fluentui/react-utilities';
 import { useFluent } from '@fluentui/react-shared-contexts';
@@ -11,3 +11,4 @@ import { usePopper, createVirtualElementFromClick } from '@fluentui/react-positioning';
  */
-var mergeProps = makeMergeProps({});
+
+var mergeProps = /*#__PURE__*/makeMergeProps({});
 /**
@@ -22,41 +23,60 @@ * Create the state required to render Popover.
  */
+
 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;
+  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;
 };
@@ -67,25 +87,39 @@ /**
  */
+
 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 = 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
         });
-    }, [setOpen, onOpenChange, setContextTarget]);
-    return state;
+      }
+
+      return shouldOpen;
+    });
+  }, [setOpen, onOpenChange, setContextTarget]);
+  return state;
 }
@@ -96,22 +130,30 @@ /**
  */
+
+
 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;
+  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;
 }
 //# sourceMappingURL=usePopover.js.map

lib/components/PopoverSurface/PopoverSurface.js

@@ -8,8 +8,9 @@ import * as React from 'react';
  */
-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

lib/components/PopoverSurface/renderPopoverSurface.js

@@ -8,13 +8,20 @@ import { __assign } from "tslib";
  */
+
 export var renderPopoverSurface = function (state) {
-    var _a = getSlotsCompat(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 = getSlotsCompat(state),
+      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
+  }), state.children));
 };
 //# sourceMappingURL=renderPopoverSurface.js.map

lib/components/PopoverSurface/usePopoverSurface.js

@@ -6,3 +6,3 @@ import { __assign } from "tslib";
 import { usePopoverContext } from '../../popoverContext';
-var mergeProps = makeMergeProps({});
+var mergeProps = /*#__PURE__*/makeMergeProps({});
 /**
@@ -18,53 +18,92 @@ * Create the state required to render 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;
+  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;
 };
 //# sourceMappingURL=usePopoverSurface.js.map

lib/components/PopoverSurface/usePopoverSurfaceStyles.js

@@ -1,6 +0,6 @@
-import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses } from '@fluentui/react-make-styles';
 export var arrowHeights = {
-    small: 6,
-    medium: 8,
-    large: 8,
+  small: 6,
+  medium: 8,
+  large: 8
 };
@@ -10,58 +10,68 @@ /**
  */
-var useStyles = makeStyles({
-    root: function (theme) { return ({
-        backgroundColor: theme.alias.color.neutral.neutralBackground1,
-        boxShadow: theme.alias.shadow.shadow16,
-        borderRadius: '4px',
-    }); },
-    inverted: function (theme) { return ({
-        // TODO: neutral background inverted missing from superset and theme
-        backgroundColor: theme.global.palette.grey[16],
-        color: theme.alias.color.neutral.neutralForegroundInverted,
-    }); },
-    brand: function (theme) { return ({
-        backgroundColor: theme.alias.color.neutral.brandBackground,
-        // TODO: clarify with designers what foreground color should be with brand background,
-        color: theme.alias.color.neutral.neutralForegroundInverted,
-    }); },
-    smallPadding: function () { return ({
-        padding: '12px',
-    }); },
-    mediumPadding: function () { return ({
-        padding: '16px',
-    }); },
-    largePadding: function () { return ({
-        padding: '20px',
-    }); },
-    smallArrow: function () { return ({
-        width: Math.SQRT2 * arrowHeights.small + "px",
-        height: Math.SQRT2 * arrowHeights.small + "px",
-    }); },
-    mediumLargeArrow: function () { return ({
-        width: Math.SQRT2 * arrowHeights.medium + "px",
-        height: Math.SQRT2 * arrowHeights.medium + "px",
-    }); },
-    // TODO dedupe these styles with tooltip
-    arrow: function (theme) { return ({
-        position: 'absolute',
-        background: 'inherit',
-        visibility: 'hidden',
-        zIndex: -1,
-        ':before': {
-            content: '""',
-            borderRadius: '4px',
-            position: 'absolute',
-            width: 'inherit',
-            height: 'inherit',
-            background: 'inherit',
-            visibility: 'visible',
-            borderBottomRightRadius: theme.global.borderRadius.small,
-            transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',
-        },
-        // Popper sets data-popper-placement on the root element, which is used to align the arrow
-        ':global([data-popper-placement^="top"])': { bottom: 0, '--angle': '0' },
-        ':global([data-popper-placement^="right"])': { left: 0, '--angle': '90deg' },
-        ':global([data-popper-placement^="bottom"])': { top: 0, '--angle': '180deg' },
-        ':global([data-popper-placement^="left"])': { right: 0, '--angle': '270deg' },
-    }); },
+
+var useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "De3pzq": "fpnz0vo",
+    "E5pizo": ["f1w99gcg", "f1rtvzsr"],
+    "Dimara": "ff3glw6"
+  },
+  "inverted": {
+    "De3pzq": "f87skp6",
+    "sj55zd": "fvxcxse"
+  },
+  "brand": {
+    "De3pzq": "ffpa81x",
+    "sj55zd": "fvxcxse"
+  },
+  "smallPadding": {
+    "z8tnut": "f1kcqot9",
+    "z189sj": ["f11qrl6u", "fjlbh76"],
+    "Byoj8tv": "fpe6lb7",
+    "uwmqm3": ["fjlbh76", "f11qrl6u"]
+  },
+  "mediumPadding": {
+    "z8tnut": "fqag9an",
+    "z189sj": ["f1gbmcue", "f1rh9g5y"],
+    "Byoj8tv": "fp67ikv",
+    "uwmqm3": ["f1rh9g5y", "f1gbmcue"]
+  },
+  "largePadding": {
+    "z8tnut": "fc7z3ec",
+    "z189sj": ["fat0sn4", "fekwl8i"],
+    "Byoj8tv": "fe2my4m",
+    "uwmqm3": ["fekwl8i", "fat0sn4"]
+  },
+  "smallArrow": {
+    "a9b677": "f1smug5u",
+    "Bqenvij": "f11ci07v"
+  },
+  "mediumLargeArrow": {
+    "a9b677": "ftmg478",
+    "Bqenvij": "f7bsbfx"
+  },
+  "arrow": {
+    "qhf8xq": "f1euv43f",
+    "ayd6f0": "f1uo6wrk",
+    "Bcdw1i0": "fd7fpy0",
+    "Bj3rh1h": "f1bsuimh",
+    "rurcny": "fuzzvh5",
+    "zf3lio": "f1qudtws",
+    "xx9plb": "fxf9f1y",
+    "Bdn98qo": "f103af6e",
+    "Bbc2r3f": "f15umuo5",
+    "B4zgs9e": "ffo048g",
+    "Bex5imi": "fkk33zh",
+    "px8gyy": ["f1goijxq", "fgrotbq"],
+    "h6z6rw": ["fzd2j21", "f2549he"],
+    "hl6cv3": "fotnskf",
+    "Bh2vraf": "f1n8855c",
+    "yayu3t": ["f1nq055x", "f13ohf3"],
+    "wedwtw": "fsw6im5",
+    "rhl9o9": "ftghsr9",
+    "Bu8t5uz": "f159pzir",
+    "B6q6orb": ["f1l8vbt4", "fsxzh25"],
+    "Bwwlvwl": "fm1ycve"
+  }
+}, {
+  "d": [".fpnz0vo{background-color:var(--alias-color-neutral-neutralBackground1);}", ".f1w99gcg{box-shadow:var(--alias-shadow-shadow16);}", ".f1rtvzsr{box-shadow:var(--alias-shadow-shadow-16);}", ".ff3glw6{border-radius:4px;}", ".f87skp6{background-color:var(--global-palette-grey-16);}", ".fvxcxse{color:var(--alias-color-neutral-neutralForegroundInverted);}", ".ffpa81x{background-color:var(--alias-color-neutral-brandBackground);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fqag9an{padding-top:16px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fp67ikv{padding-bottom:16px;}", ".fc7z3ec{padding-top:20px;}", ".fat0sn4{padding-right:20px;}", ".fekwl8i{padding-left:20px;}", ".fe2my4m{padding-bottom:20px;}", ".f1smug5u{width:8.485281374238571px;}", ".f11ci07v{height:8.485281374238571px;}", ".ftmg478{width:11.313708498984761px;}", ".f7bsbfx{height:11.313708498984761px;}", ".f1euv43f{position:absolute;}", ".f1uo6wrk{background:inherit;}", ".fd7fpy0{visibility:hidden;}", ".f1bsuimh{z-index:-1;}", ".fuzzvh5:before{content:\"\";}", ".f1qudtws:before{border-radius:4px;}", ".fxf9f1y:before{position:absolute;}", ".f103af6e:before{width:inherit;}", ".f15umuo5:before{height:inherit;}", ".ffo048g:before{background:inherit;}", ".fkk33zh:before{visibility:visible;}", ".f1goijxq:before{border-bottom-right-radius:var(--global-borderRadius-small);}", ".fgrotbq:before{border-bottom-left-radius:var(--global-borderRadius-small);}", ".fzd2j21:before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);}", ".f2549he:before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);}", "[data-popper-placement^=\"top\"] .fotnskf{bottom:0;}", "[data-popper-placement^=\"top\"] .f1n8855c{--angle:0;}", "[data-popper-placement^=\"right\"] .f1nq055x{left:0;}", "[data-popper-placement^=\"right\"] .f13ohf3{right:0;}", "[data-popper-placement^=\"right\"] .fsw6im5{--angle:90deg;}", "[data-popper-placement^=\"bottom\"] .ftghsr9{top:0;}", "[data-popper-placement^=\"bottom\"] .f159pzir{--angle:180deg;}", "[data-popper-placement^=\"left\"] .f1l8vbt4{right:0;}", "[data-popper-placement^=\"left\"] .fsxzh25{left:0;}", "[data-popper-placement^=\"left\"] .fm1ycve{--angle:270deg;}"]
 });
@@ -71,8 +81,10 @@ /**
  */
+
+
 export var usePopoverSurfaceStyles = function (state) {
-    var styles = useStyles();
-    state.className = 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.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
-    return state;
+  var styles = useStyles();
+  state.className = 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.arrowClassName = mergeClasses(styles.arrow, state.size === 'small' ? styles.smallArrow : styles.mediumLargeArrow);
+  return state;
 };
 //# sourceMappingURL=usePopoverSurfaceStyles.js.map

lib/components/PopoverTrigger/PopoverTrigger.js

@@ -6,7 +6,8 @@ import { usePopoverTrigger } from './usePopoverTrigger';
  */
+
 export var PopoverTrigger = function (props) {
-    var state = usePopoverTrigger(props);
-    return renderPopoverTrigger(state);
+  var state = usePopoverTrigger(props);
+  return renderPopoverTrigger(state);
 };
 PopoverTrigger.displayName = 'PopoverTrigger';
 //# sourceMappingURL=PopoverTrigger.js.map

lib/components/PopoverTrigger/renderPopoverTrigger.js

@@ -5,4 +5,4 @@ /**
 export var renderPopoverTrigger = function (state) {
-    return state.children;
+  return state.children;
 };
 //# sourceMappingURL=renderPopoverTrigger.js.map

lib/components/PopoverTrigger/usePopoverTrigger.js

 import { __assign } from "tslib";
 import * as React from 'react';
-import { makeMergeProps, useMergedRefs, useEventCallback, shouldPreventDefaultOnKeyDown, } from '@fluentui/react-utilities';
+import { makeMergeProps, useMergedRefs, useEventCallback, shouldPreventDefaultOnKeyDown } from '@fluentui/react-utilities';
 import { useModalAttributes } from '@fluentui/react-tabster';
 import { usePopoverContext } from '../../popoverContext';
-var mergeProps = makeMergeProps({});
+var mergeProps = /*#__PURE__*/makeMergeProps({});
 /**
@@ -16,60 +16,86 @@ * Create the state required to render PopoverTrigger.
  */
+
 export var usePopoverTrigger = function (props, defaultProps) {
-    var setOpen = usePopoverContext(function (context) { return context.setOpen; });
-    var open = usePopoverContext(function (context) { return context.open; });
-    var triggerRef = usePopoverContext(function (context) { return context.triggerRef; });
-    var openOnHover = usePopoverContext(function (context) { return context.openOnHover; });
-    var openOnContext = usePopoverContext(function (context) { return context.openOnContext; });
-    var triggerAttributes = useModalAttributes().triggerAttributes;
-    var state = mergeProps({
-        children: null,
-    }, defaultProps, props);
-    var onContextMenu = useEventCallback(function (e) {
-        var _a, _b;
-        if (openOnContext) {
-            e.preventDefault();
-            setOpen(e, true);
-        }
-        (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onContextMenu) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-    });
-    var onClick = useEventCallback(function (e) {
-        var _a, _b;
-        if (!openOnContext) {
-            setOpen(e, !open);
-        }
-        (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-    });
-    var onKeyDown = useEventCallback(function (e) {
-        var _a, _b, _c;
-        if (shouldPreventDefaultOnKeyDown(e) && (e.key === ' ' || e.key === 'Enter')) {
-            e.preventDefault();
-            (_a = e.target) === null || _a === void 0 ? void 0 : _a.click();
-        }
-        if (e.key === 'Escape') {
-            setOpen(e, false);
-        }
-        (_c = (_b = child.props) === null || _b === void 0 ? void 0 : _b.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(_b, e);
-    });
-    var onMouseEnter = useEventCallback(function (e) {
-        var _a, _b;
-        if (openOnHover) {
-            setOpen(e, true);
-        }
-        (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-    });
-    var onMouseLeave = useEventCallback(function (e) {
-        var _a, _b;
-        if (openOnHover) {
-            setOpen(e, false);
-        }
-        (_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, __assign({ 'aria-haspopup': 'true', onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        onKeyDown: onKeyDown,
-        onMouseLeave: onMouseLeave,
-        onContextMenu: onContextMenu, ref: useMergedRefs(child.props.ref, triggerRef) }, triggerAttributes));
-    return state;
+  var setOpen = usePopoverContext(function (context) {
+    return context.setOpen;
+  });
+  var open = usePopoverContext(function (context) {
+    return context.open;
+  });
+  var triggerRef = usePopoverContext(function (context) {
+    return context.triggerRef;
+  });
+  var openOnHover = usePopoverContext(function (context) {
+    return context.openOnHover;
+  });
+  var openOnContext = usePopoverContext(function (context) {
+    return context.openOnContext;
+  });
+  var triggerAttributes = useModalAttributes().triggerAttributes;
+  var state = mergeProps({
+    children: null
+  }, defaultProps, props);
+  var onContextMenu = useEventCallback(function (e) {
+    var _a, _b;
+
+    if (openOnContext) {
+      e.preventDefault();
+      setOpen(e, true);
+    }
+
+    (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onContextMenu) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+  });
+  var onClick = useEventCallback(function (e) {
+    var _a, _b;
+
+    if (!openOnContext) {
+      setOpen(e, !open);
+    }
+
+    (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+  });
+  var onKeyDown = useEventCallback(function (e) {
+    var _a, _b, _c;
+
+    if (shouldPreventDefaultOnKeyDown(e) && (e.key === ' ' || e.key === 'Enter')) {
+      e.preventDefault();
+      (_a = e.target) === null || _a === void 0 ? void 0 : _a.click();
+    }
+
+    if (e.key === 'Escape') {
+      setOpen(e, false);
+    }
+
+    (_c = (_b = child.props) === null || _b === void 0 ? void 0 : _b.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+  });
+  var onMouseEnter = useEventCallback(function (e) {
+    var _a, _b;
+
+    if (openOnHover) {
+      setOpen(e, true);
+    }
+
+    (_b = (_a = child.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+  });
+  var onMouseLeave = useEventCallback(function (e) {
+    var _a, _b;
+
+    if (openOnHover) {
+      setOpen(e, false);
+    }
+
+    (_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 = /*#__PURE__*/React.cloneElement(child, __assign({
+    'aria-haspopup': 'true',
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onKeyDown: onKeyDown,
+    onMouseLeave: onMouseLeave,
+    onContextMenu: onContextMenu,
+    ref: useMergedRefs(child.props.ref, triggerRef)
+  }, triggerAttributes));
+  return state;
 };
 //# sourceMappingURL=usePopoverTrigger.js.map

lib/Popover.stories.js

 import { __assign } from "tslib";
 import * as React from 'react';
 import { Popover, PopoverTrigger, PopoverSurface } from './index';
+
 var ExampleContent = function () {
-    return (React.createElement("div", null,
-        React.createElement("h3", null, "Popover content"),
-        React.createElement("div", null, "This is some popover content")));
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "Popover content"), /*#__PURE__*/React.createElement("div", null, "This is some popover content"));
 };
-export var Default = function (props) { return (React.createElement(Popover, __assign({}, props),
-    React.createElement(PopoverTrigger, null,
-        React.createElement("button", null, "Popover trigger")),
-    React.createElement(PopoverSurface, null,
-        React.createElement(ExampleContent, null),
-        React.createElement("div", null,
-            React.createElement("button", null, "Action"),
-            React.createElement("button", null, "Action"))))); };
-// @FIXME - remove manually specified argTypes once `react-components` package will use new storybook setup(DX)
+
+export var Default = function (props) {
+  return /*#__PURE__*/React.createElement(Popover, __assign({}, props), /*#__PURE__*/React.createElement(PopoverTrigger, null, /*#__PURE__*/React.createElement("button", null, "Popover trigger")), /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement(ExampleContent, null), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", null, "Action"), /*#__PURE__*/React.createElement("button", null, "Action"))));
+}; // @FIXME - remove manually specified argTypes once `react-components` package will use new storybook setup(DX)
 // https://github.com/microsoft/fluentui/issues/18514
+
 Default.argTypes = {
-    openOnContext: {
-        defaultValue: false,
-        control: 'boolean',
+  openOnContext: {
+    defaultValue: false,
+    control: 'boolean'
+  },
+  openOnHover: {
+    defaultValue: false,
+    control: 'boolean'
+  },
+  position: {
+    type: {
+      name: 'string',
+      required: false
     },
-    openOnHover: {
-        defaultValue: false,
-        control: 'boolean',
+    control: {
+      type: 'select',
+      options: ['above', 'below', 'before', 'after']
+    }
+  },
+  align: {
+    type: {
+      name: 'string',
+      required: false
     },
-    position: {
-        type: { name: 'string', required: false },
-        control: {
-            type: 'select',
-            options: ['above', 'below', 'before', 'after'],
-        },
+    control: {
+      type: 'select',
+      options: ['top', 'bottom', 'start', 'end', 'center']
+    }
+  },
+  size: {
+    type: {
+      name: 'string',
+      required: false
     },
-    align: {
-        type: { name: 'string', required: false },
-        control: {
-            type: 'select',
-            options: ['top', 'bottom', 'start', 'end', 'center'],
-        },
-    },
-    size: {
-        type: { name: 'string', required: false },
-        control: {
-            type: 'select',
-            options: ['small', 'medium', 'large'],
-        },
-    },
-    trapFocus: {
-        defaultValue: true,
-        control: 'boolean',
-    },
+    control: {
+      type: 'select',
+      options: ['small', 'medium', 'large']
+    }
+  },
+  trapFocus: {
+    defaultValue: true,
+    control: 'boolean'
+  }
 };
 Default.parameters = {
-    controls: {
-        disable: false,
-    },
+  controls: {
+    disable: false
+  }
 };
 export var AnchorToTarget = function () {
-    var _a = React.useState(), target = _a[0], setTarget = _a[1];
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", null,
-            React.createElement(Popover, { target: target },
-                React.createElement(PopoverTrigger, null,
-                    React.createElement("button", null, "Popover trigger")),
-                React.createElement(PopoverSurface, null,
-                    React.createElement(ExampleContent, null)))),
-        React.createElement("button", { ref: setTarget }, "Custom target")));
+  var _a = React.useState(),
+      target = _a[0],
+      setTarget = _a[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Popover, {
+    target: target
+  }, /*#__PURE__*/React.createElement(PopoverTrigger, null, /*#__PURE__*/React.createElement("button", null, "Popover trigger")), /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement(ExampleContent, null)))), /*#__PURE__*/React.createElement("button", {
+    ref: setTarget
+  }, "Custom target"));
 };
 export var Controlled = function () {
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
-    var handleOpenChange = function (_, data) { return setOpen(data.open || false); };
-    return (React.createElement(Popover, { open: open, onOpenChange: handleOpenChange },
-        React.createElement(PopoverTrigger, null,
-            React.createElement("button", null, "Controlled trigger")),
-        React.createElement(PopoverSurface, null,
-            React.createElement(ExampleContent, null))));
+  var _a = React.useState(false),
+      open = _a[0],
+      setOpen = _a[1];
+
+  var handleOpenChange = function (_, data) {
+    return setOpen(data.open || false);
+  };
+
+  return /*#__PURE__*/React.createElement(Popover, {
+    open: open,
+    onOpenChange: handleOpenChange
+  }, /*#__PURE__*/React.createElement(PopoverTrigger, null, /*#__PURE__*/React.createElement("button", null, "Controlled trigger")), /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement(ExampleContent, null)));
 };
 export var WithCustomTrigger = function () {
-    var _a = React.useState(false), open = _a[0], setOpen = _a[1];
-    var _b = React.useState(null), target = _b[0], setTarget = _b[1];
-    var onClick = function () { return setOpen(function (s) { return !s; }); };
-    var onOpenChange = function (_, data) { return setOpen(data.open || false); };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { "aria-haspopup": true, ref: setTarget, onClick: onClick }, "Custom trigger"),
-        React.createElement(Popover, { target: target, open: open, onOpenChange: onOpenChange },
-            React.createElement(PopoverSurface, null,
-                React.createElement(ExampleContent, null)))));
+  var _a = React.useState(false),
+      open = _a[0],
+      setOpen = _a[1];
+
+  var _b = React.useState(null),
+      target = _b[0],
+      setTarget = _b[1];
+
+  var onClick = function () {
+    return setOpen(function (s) {
+      return !s;
+    });
+  };
+
+  var onOpenChange = function (_, data) {
+    return setOpen(data.open || false);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    "aria-haspopup": true,
+    ref: setTarget,
+    onClick: onClick
+  }, "Custom trigger"), /*#__PURE__*/React.createElement(Popover, {
+    target: target,
+    open: open,
+    onOpenChange: onOpenChange
+  }, /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement(ExampleContent, null))));
 };
-var FirstNestedPopover = function () { return (React.createElement(Popover, { trapFocus: true },
-    React.createElement(PopoverTrigger, null,
-        React.createElement("button", null, "First nested trigger")),
-    React.createElement(PopoverSurface, null,
-        React.createElement(ExampleContent, null),
-        React.createElement("button", null, "First nested button"),
-        React.createElement(SecondNestedPopover, null),
-        React.createElement(SecondNestedPopover, null)))); };
-var SecondNestedPopover = function () { return (React.createElement(Popover, { trapFocus: true },
-    React.createElement(PopoverTrigger, null,
-        React.createElement("button", null, "Second nested trigger")),
-    React.createElement(PopoverSurface, null,
-        React.createElement(ExampleContent, null),
-        React.createElement("button", null, "Second nested button")))); };
+
+var FirstNestedPopover = function () {
+  return /*#__PURE__*/React.createElement(Popover, {
+    trapFocus: true
+  }, /*#__PURE__*/React.createElement(PopoverTrigger, null, /*#__PURE__*/React.createElement("button", null, "First nested trigger")), /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement(ExampleContent, null), /*#__PURE__*/React.createElement("button", null, "First nested button"), /*#__PURE__*/React.createElement(SecondNestedPopover, null), /*#__PURE__*/React.createElement(SecondNestedPopover, null)));
+};
+
+var SecondNestedPopover = function () {
+  return /*#__PURE__*/React.createElement(Popover, {
+    trapFocus: true
+  }, /*#__PURE__*/React.createElement(PopoverTrigger, null, /*#__PURE__*/React.createElement("button", null, "Second nested trigger")), /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement(ExampleContent, null), /*#__PURE__*/React.createElement("button", null, "Second nested button")));
+};
+
 export var NestedPopovers = function () {
-    return (React.createElement(Popover, { trapFocus: true },
-        React.createElement(PopoverTrigger, null,
-            React.createElement("button", null, "Root trigger")),
-        React.createElement(PopoverSurface, null,
-            React.createElement(ExampleContent, null),
-            React.createElement("button", null, "Root button"),
-            React.createElement(FirstNestedPopover, null))));
-};
-// Used for internal testing
+  return /*#__PURE__*/React.createElement(Popover, {
+    trapFocus: true
+  }, /*#__PURE__*/React.createElement(PopoverTrigger, null, /*#__PURE__*/React.createElement("button", null, "Root trigger")), /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement(ExampleContent, null), /*#__PURE__*/React.createElement("button", null, "Root button"), /*#__PURE__*/React.createElement(FirstNestedPopover, null)));
+}; // Used for internal testing
+
 export var InternalUpdateContent = function () {
-    var _a = React.useState(true), visible = _a[0], setVisible = _a[1];
-    var changeContent = function () { return setVisible(false); };
-    return (React.createElement(Popover, null,
-        React.createElement(PopoverTrigger, null,
-            React.createElement("button", null, "Popover trigger")),
-        React.createElement(PopoverSurface, null,
-            React.createElement(ExampleContent, null),
-            visible ? (React.createElement("div", null,
-                React.createElement("button", { onClick: changeContent }, "Action"))) : (React.createElement("div", null, "The second panel")))));
+  var _a = React.useState(true),
+      visible = _a[0],
+      setVisible = _a[1];
+
+  var changeContent = function () {
+    return setVisible(false);
+  };
+
+  return /*#__PURE__*/React.createElement(Popover, null, /*#__PURE__*/React.createElement(PopoverTrigger, null, /*#__PURE__*/React.createElement("button", null, "Popover trigger")), /*#__PURE__*/React.createElement(PopoverSurface, null, /*#__PURE__*/React.createElement(ExampleContent, null), visible ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    onClick: changeContent
+  }, "Action")) : /*#__PURE__*/React.createElement("div", null, "The second panel")));
 };
 export default {
-    title: 'Components/Popover',
-    component: Popover,
+  title: 'Components/Popover',
+  component: Popover
 };
 //# sourceMappingURL=Popover.stories.js.map

lib/popoverContext.js

 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
-export var PopoverContext = createContext({
-    open: false,
-    setOpen: function () { return null; },
-    triggerRef: { current: null },
-    contentRef: { current: null },
-    arrowRef: { current: null },
-    target: undefined,
-    openOnContext: false,
-    openOnHover: false,
-    size: 'medium',
-    trapFocus: false,
+export var PopoverContext = /*#__PURE__*/createContext({
+  open: false,
+  setOpen: function () {
+    return null;
+  },
+  triggerRef: {
+    current: null
+  },
+  contentRef: {
+    current: null
+  },
+  arrowRef: {
+    current: null
+  },
+  target: undefined,
+  openOnContext: false,
+  openOnHover: false,
+  size: 'medium',
+  trapFocus: false
 });
 export var usePopoverContext = function (selector) {
-    return useContextSelector(PopoverContext, selector);
+  return useContextSelector(PopoverContext, selector);
 };
 //# sourceMappingURL=popoverContext.js.map

package.json

 {
   "name": "@fluentui/react-popover",
-  "version": "9.0.0-alpha.20",
+  "version": "9.0.0-alpha.21",
   "description": "Popover component for Fluent UI",
@@ -29,4 +29,5 @@ "main": "lib-commonjs/index.js",
   "devDependencies": {
+    "@fluentui/babel-make-styles": "^9.0.0-alpha.31",
     "@fluentui/eslint-plugin": "^1.3.2",
-    "@fluentui/jest-serializer-make-styles": "^9.0.0-alpha.27",
+    "@fluentui/jest-serializer-make-styles": "^9.0.0-alpha.28",
     "@fluentui/react-conformance": "^0.4.3",
@@ -47,7 +48,7 @@ "@fluentui/scripts": "^1.0.0",
     "@fluentui/react-context-selector": "^9.0.0-alpha.19",
-    "@fluentui/react-make-styles": "^9.0.0-alpha.51",
-    "@fluentui/react-portal": "^9.0.0-alpha.32",
-    "@fluentui/react-positioning": "^9.0.0-alpha.36",
-    "@fluentui/react-shared-contexts": "^9.0.0-alpha.18",
-    "@fluentui/react-tabster": "^9.0.0-alpha.45",
+    "@fluentui/react-make-styles": "^9.0.0-alpha.52",
+    "@fluentui/react-portal": "^9.0.0-alpha.33",
+    "@fluentui/react-positioning": "^9.0.0-alpha.37",
+    "@fluentui/react-shared-contexts": "^9.0.0-alpha.19",
+    "@fluentui/react-tabster": "^9.0.0-alpha.46",
     "@fluentui/react-utilities": "^9.0.0-alpha.35",
@@ -54,0 +55,0 @@ "tslib": "^2.1.0"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2810716

increased by0.28%

Number of package files

769

increased by0.13%

Lines of code

11233

increased by3.24%

Worsened metrics

Dev dependency count

15

increased by7.14%

Dependency changes

• Updated@fluentui/react-make-styles@^9.0.0-alpha.52

• Updated@fluentui/react-portal@^9.0.0-alpha.33

• Updated@fluentui/react-positioning@^9.0.0-alpha.37

• Updated@fluentui/react-shared-contexts@^9.0.0-alpha.19

• Updated@fluentui/react-tabster@^9.0.0-alpha.46