@fluentui/react-positioning - npm Package Compare versions

Comparing version 0.0.0-nightly906d31cfa320211115.1 to 0.0.0-nightly99adff5a9a20211125.1

CHANGELOG.json

@@ -5,12 +5,20 @@ {
     {
-      "date": "Mon, 15 Nov 2021 04:16:27 GMT",
-      "tag": "@fluentui/react-positioning_v0.0.0-nightly906d31cfa320211115.1",
-      "version": "0.0.0-nightly906d31cfa320211115.1",
+      "date": "Thu, 25 Nov 2021 04:13:56 GMT",
+      "tag": "@fluentui/react-positioning_v0.0.0-nightly99adff5a9a20211125.1",
+      "version": "0.0.0-nightly99adff5a9a20211125.1",
       "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-positioning",
+            "commit": "718e63006d8d07d24efab9c32942041963d78dc7",
+            "comment": "Migrate package to use solution style ts-configs"
+          }
+        ],
         "prerelease": [
           {
-            "author": "email not defined",
+            "author": "[e-mail]",
             "package": "@fluentui/react-positioning",
-            "commit": "05edacbae8d85aa6b3d4164f9cd7d1465b47f246",
-            "comment": "Release nightly v9"
+            "commit": "58db204f28af1d68df7260ff580cf91f0adcfb66",
+            "comment": "Add utility function to create styles for an arrow element"
           },
@@ -20,4 +28,4 @@ {
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly906d31cfa320211115.1",
-            "commit": "05edacbae8d85aa6b3d4164f9cd7d1465b47f246"
+            "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightly99adff5a9a20211125.1",
+            "commit": "82edadbaa0875da8b96295c6b41be3e0b2728832"
           },
@@ -27,4 +35,16 @@ {
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly906d31cfa320211115.1",
-            "commit": "05edacbae8d85aa6b3d4164f9cd7d1465b47f246"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly99adff5a9a20211125.1",
+            "commit": "82edadbaa0875da8b96295c6b41be3e0b2728832"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly99adff5a9a20211125.1",
+            "commit": "82edadbaa0875da8b96295c6b41be3e0b2728832"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightly99adff5a9a20211125.1",
+            "commit": "82edadbaa0875da8b96295c6b41be3e0b2728832"
           }
@@ -31,0 +51,0 @@ ]

CHANGELOG.md

 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Mon, 15 Nov 2021 04:16:27 GMT and should not be manually modified.
+This log was last generated on Thu, 25 Nov 2021 04:13:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly906d31cfa320211115.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly906d31cfa320211115.1)
+## [0.0.0-nightly99adff5a9a20211125.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly99adff5a9a20211125.1)
 
-Mon, 15 Nov 2021 04:16:27 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.3..@fluentui/react-positioning_v0.0.0-nightly906d31cfa320211115.1)
+Thu, 25 Nov 2021 04:13:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.3..@fluentui/react-positioning_v0.0.0-nightly99adff5a9a20211125.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/05edacbae8d85aa6b3d4164f9cd7d1465b47f246) by email not defined)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly906d31cfa320211115.1 ([commit](https://github.com/microsoft/fluentui/commit/05edacbae8d85aa6b3d4164f9cd7d1465b47f246) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly906d31cfa320211115.1 ([commit](https://github.com/microsoft/fluentui/commit/05edacbae8d85aa6b3d4164f9cd7d1465b47f246) by beachball)
+- Add utility function to create styles for an arrow element ([PR #20541](https://github.com/microsoft/fluentui/pull/20541) by [e-mail])
+- Bump @fluentui/react-make-styles to v0.0.0-nightly99adff5a9a20211125.1 ([commit](https://github.com/microsoft/fluentui/commit/82edadbaa0875da8b96295c6b41be3e0b2728832) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly99adff5a9a20211125.1 ([commit](https://github.com/microsoft/fluentui/commit/82edadbaa0875da8b96295c6b41be3e0b2728832) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly99adff5a9a20211125.1 ([commit](https://github.com/microsoft/fluentui/commit/82edadbaa0875da8b96295c6b41be3e0b2728832) by beachball)
+- Bump @fluentui/babel-make-styles to v0.0.0-nightly99adff5a9a20211125.1 ([commit](https://github.com/microsoft/fluentui/commit/82edadbaa0875da8b96295c6b41be3e0b2728832) by beachball)
 
@@ -18,0 +20,0 @@ ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.3)

dist/react-positioning.d.ts

@@ -0,3 +1,5 @@
+import type { MakeStylesStyleRule } from '@fluentui/make-styles';
 import * as PopperJs from '@popperjs/core';
 import * as React_2 from 'react';
+import type { Theme } from '@fluentui/react-theme';
 
@@ -11,2 +13,28 @@ export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
 /**
+ * Helper that creates a makeStyles rule for an arrow element.
+ * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
+ *
+ * ```ts
+ *   makeStyles({
+ *     arrowWithSize: createArrowStyles(5),
+ *
+ *     arrowWithoutSize: createArrowStyles(),
+ *     mediumArrow: { aspectRatio: 1, width: '4px' }
+ *     smallArrow: { aspectRatio: 1, width: '2px' }
+ *   })
+ *   ...
+ *
+ *   state.arrowWithSize.clasName = styles.arrowWithSize
+ *   state.arrowWithoutSize.className = mergeClases(
+ *     styles.arrowWithoutSize,
+ *     state.smallArrow && styles.smallArrow,
+ *     state.mediumArrow && styles.mediumArrow,
+ *   )
+ * ```
+ *
+ * @param size - dimensions of the square arrow element in pixels.
+ */
+export declare function createArrowStyles(size?: number): MakeStylesStyleRule<Theme>;
+
+/**
  * Creates a virtual element based on the position of a click event
@@ -13,0 +41,0 @@ * Can be used as a target for popper in scenarios such as context menus

lib-commonjs/createVirtualElementFromClick.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.createVirtualElementFromClick = void 0;
@@ -8,22 +11,26 @@ /**
  */
+
 function createVirtualElementFromClick(nativeEvent) {
-    const left = nativeEvent.clientX;
-    const top = nativeEvent.clientY;
-    const right = left + 1;
-    const bottom = top + 1;
-    function getBoundingClientRect() {
-        return {
-            left,
-            top,
-            right,
-            bottom,
-            height: 1,
-            width: 1,
-        };
-    }
+  const left = nativeEvent.clientX;
+  const top = nativeEvent.clientY;
+  const right = left + 1;
+  const bottom = top + 1;
+
+  function getBoundingClientRect() {
     return {
-        getBoundingClientRect,
+      left,
+      top,
+      right,
+      bottom,
+      height: 1,
+      width: 1
     };
+  }
+
+  return {
+    getBoundingClientRect
+  };
 }
+
 exports.createVirtualElementFromClick = createVirtualElementFromClick;
 //# sourceMappingURL=createVirtualElementFromClick.js.map

lib-commonjs/index.d.ts

@@ -0,5 +1,6 @@
+export * from './createVirtualElementFromClick';
+export * from './createArrowStyles';
 export * from './usePopper';
-export * from './createVirtualElementFromClick';
 export * from './usePopperMouseTarget';
 export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
 export * from './types';

lib-commonjs/index.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.mergeArrowOffset = exports.resolvePositioningShorthand = void 0;
-const tslib_1 = require("tslib");
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./createVirtualElementFromClick"), exports);
+
+tslib_1.__exportStar(require("./createArrowStyles"), exports);
+
 tslib_1.__exportStar(require("./usePopper"), exports);
-tslib_1.__exportStar(require("./createVirtualElementFromClick"), exports);
+
 tslib_1.__exportStar(require("./usePopperMouseTarget"), exports);
-var index_1 = require("./utils/index");
-Object.defineProperty(exports, "resolvePositioningShorthand", { enumerable: true, get: function () { return index_1.resolvePositioningShorthand; } });
-Object.defineProperty(exports, "mergeArrowOffset", { enumerable: true, get: function () { return index_1.mergeArrowOffset; } });
+
+var index_1 = /*#__PURE__*/require("./utils/index");
+
+Object.defineProperty(exports, "resolvePositioningShorthand", {
+  enumerable: true,
+  get: function () {
+    return index_1.resolvePositioningShorthand;
+  }
+});
+Object.defineProperty(exports, "mergeArrowOffset", {
+  enumerable: true,
+  get: function () {
+    return index_1.mergeArrowOffset;
+  }
+});
+
 tslib_1.__exportStar(require("./types"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/types.js

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

lib-commonjs/usePopper.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.usePopper = void 0;
-const react_utilities_1 = require("@fluentui/react-utilities");
-const react_shared_contexts_1 = require("@fluentui/react-shared-contexts");
-const index_1 = require("./utils/index");
-const PopperJs = require("@popperjs/core");
-const React = require("react");
-//
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+
+const index_1 = /*#__PURE__*/require("./utils/index");
+
+const PopperJs = /*#__PURE__*/require("@popperjs/core");
+
+const React = /*#__PURE__*/require("react"); //
 // Dev utils to detect if nodes have "autoFocus" props.
 //
+
 /**
@@ -16,16 +24,19 @@ * Detects if a passed HTML node has "autoFocus" prop on a React's fiber. Is needed as React handles autofocus behavior
  */
+
+
 function hasAutofocusProp(node) {
-    var _a;
-    // https://github.com/facebook/react/blob/848bb2426e44606e0a55dfe44c7b3ece33772485/packages/react-dom/src/client/ReactDOMHostConfig.js#L157-L166
-    const isAutoFocusableElement = node.nodeName === 'BUTTON' ||
-        node.nodeName === 'INPUT' ||
-        node.nodeName === 'SELECT' ||
-        node.nodeName === 'TEXTAREA';
-    if (isAutoFocusableElement) {
-        return !!((_a = index_1.getReactFiberFromNode(node)) === null || _a === void 0 ? void 0 : _a.pendingProps.autoFocus);
-    }
-    return false;
+  var _a; // https://github.com/facebook/react/blob/848bb2426e44606e0a55dfe44c7b3ece33772485/packages/react-dom/src/client/ReactDOMHostConfig.js#L157-L166
+
+
+  const isAutoFocusableElement = node.nodeName === 'BUTTON' || node.nodeName === 'INPUT' || node.nodeName === 'SELECT' || node.nodeName === 'TEXTAREA';
+
+  if (isAutoFocusableElement) {
+    return !!((_a = index_1.getReactFiberFromNode(node)) === null || _a === void 0 ? void 0 : _a.pendingProps.autoFocus);
+  }
+
+  return false;
 }
+
 function hasAutofocusFilter(node) {
-    return hasAutofocusProp(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+  return hasAutofocusProp(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
 }
@@ -39,184 +50,226 @@ /**
  */
+
+
 function usePopperOptions(options, popperOriginalPositionRef) {
-    const { arrowPadding, autoSize, coverTarget, flipBoundary, offset, onStateUpdate, overflowBoundary, 
+  const {
+    arrowPadding,
+    autoSize,
+    coverTarget,
+    flipBoundary,
+    offset,
+    onStateUpdate,
+    overflowBoundary,
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_disableTether, pinned, } = options;
-    const isRtl = react_shared_contexts_1.useFluent().dir === 'rtl';
-    const placement = index_1.getPlacement(options.align, options.position, isRtl);
-    const strategy = options.positionFixed ? 'fixed' : 'absolute';
-    const handleStateUpdate = react_utilities_1.useEventCallback(({ state }) => {
-        if (onStateUpdate) {
-            onStateUpdate(state);
+    unstable_disableTether,
+    pinned
+  } = options;
+  const isRtl = react_shared_contexts_1.useFluent().dir === 'rtl';
+  const placement = index_1.getPlacement(options.align, options.position, isRtl);
+  const strategy = options.positionFixed ? 'fixed' : 'absolute';
+  const handleStateUpdate = react_utilities_1.useEventCallback(({
+    state
+  }) => {
+    if (onStateUpdate) {
+      onStateUpdate(state);
+    }
+  });
+  const offsetModifier = React.useMemo(() => offset ? {
+    name: 'offset',
+    options: {
+      offset: isRtl ? index_1.applyRtlToOffset(offset) : offset
+    }
+  } : null, [offset, isRtl]);
+  return React.useCallback((target, container, arrow) => {
+    var _a;
+
+    const scrollParentElement = index_1.getScrollParent(container);
+    const hasScrollableElement = scrollParentElement ? scrollParentElement !== ((_a = scrollParentElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.body) : false;
+    const modifiers = [
+    /**
+     * We are setting the position to `fixed` in the first effect to prevent scroll jumps in case of the content
+     * with managed focus. Modifier sets the position to `fixed` before all other modifier effects. Another part of
+     * a patch modifies ".forceUpdate()" directly after a Popper will be created.
+     */
+    {
+      name: 'positionStyleFix',
+      enabled: true,
+      phase: 'afterWrite',
+      effect: ({
+        state,
+        instance
+      }) => {
+        // ".isFirstRun" is a part of our patch, on a first evaluation it will "undefined"
+        // should be disabled for subsequent runs as it breaks positioning for them
+        if (instance.isFirstRun !== false) {
+          popperOriginalPositionRef.current = state.elements.popper.style.position;
+          state.elements.popper.style.position = 'fixed';
         }
-    });
-    const offsetModifier = React.useMemo(() => offset
-        ? {
-            name: 'offset',
-            options: { offset: isRtl ? index_1.applyRtlToOffset(offset) : offset },
+
+        return () => undefined;
+      },
+      requires: []
+    }, {
+      name: 'flip',
+      options: {
+        flipVariations: true
+      }
+    },
+    /**
+     * pinned disables the flip modifier by setting flip.enabled to false; this
+     * disables automatic repositioning of the popper box; it will always be placed according to
+     * the values of `align` and `position` props, regardless of the size of the component, the
+     * reference element or the viewport.
+     */
+    pinned && {
+      name: 'flip',
+      enabled: false
+    },
+    /**
+     * When the popper box is placed in the context of a scrollable element, we need to set
+     * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent'
+     * (default is 'viewport') so that the popper box will stick with the targetRef when we
+     * scroll targetRef out of the viewport.
+     */
+    hasScrollableElement && {
+      name: 'flip',
+      options: {
+        boundary: 'clippingParents'
+      }
+    }, hasScrollableElement && {
+      name: 'preventOverflow',
+      options: {
+        boundary: 'clippingParents'
+      }
+    }, offsetModifier,
+    /**
+     * This modifier is necessary to retain behaviour from popper v1 where untethered poppers are allowed by
+     * default. i.e. popper is still rendered fully in the viewport even if anchor element is no longer in the
+     * viewport.
+     */
+    unstable_disableTether && {
+      name: 'preventOverflow',
+      options: {
+        altAxis: unstable_disableTether === 'all',
+        tether: false
+      }
+    }, flipBoundary && {
+      name: 'flip',
+      options: {
+        altBoundary: true,
+        boundary: index_1.getBoundary(container, flipBoundary)
+      }
+    }, overflowBoundary && {
+      name: 'preventOverflow',
+      options: {
+        altBoundary: true,
+        boundary: index_1.getBoundary(container, overflowBoundary)
+      }
+    }, {
+      name: 'onUpdate',
+      enabled: true,
+      phase: 'afterWrite',
+      fn: handleStateUpdate
+    }, {
+      // Similar code as popper-maxsize-modifier: https://github.com/atomiks/popper.js/blob/master/src/modifiers/maxSize.js
+      // popper-maxsize-modifier only calculates the max sizes.
+      // This modifier can apply max sizes always, or apply the max sizes only when overflow is detected
+      name: 'applyMaxSize',
+      enabled: !!autoSize,
+      phase: 'beforeWrite',
+      requiresIfExists: ['offset', 'preventOverflow', 'flip'],
+      options: {
+        altBoundary: true,
+        boundary: index_1.getBoundary(container, overflowBoundary)
+      },
+
+      fn({
+        state,
+        options: modifierOptions
+      }) {
+        const overflow = PopperJs.detectOverflow(state, modifierOptions);
+        const {
+          x,
+          y
+        } = state.modifiersData.preventOverflow || {
+          x: 0,
+          y: 0
+        };
+        const {
+          width,
+          height
+        } = state.rects.popper;
+        const basePlacement = index_1.getBasePlacement(state.placement);
+        const widthProp = basePlacement === 'left' ? 'left' : 'right';
+        const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
+        const applyMaxWidth = autoSize === 'always' || autoSize === 'width-always' || overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width');
+        const applyMaxHeight = autoSize === 'always' || autoSize === 'height-always' || overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height');
+
+        if (applyMaxWidth) {
+          state.styles.popper.maxWidth = `${width - overflow[widthProp] - x}px`;
         }
-        : null, [offset, isRtl]);
-    return React.useCallback((target, container, arrow) => {
-        var _a;
-        const scrollParentElement = index_1.getScrollParent(container);
-        const hasScrollableElement = scrollParentElement
-            ? scrollParentElement !== ((_a = scrollParentElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.body)
-            : false;
-        const modifiers = [
-            /**
-             * We are setting the position to `fixed` in the first effect to prevent scroll jumps in case of the content
-             * with managed focus. Modifier sets the position to `fixed` before all other modifier effects. Another part of
-             * a patch modifies ".forceUpdate()" directly after a Popper will be created.
-             */
-            {
-                name: 'positionStyleFix',
-                enabled: true,
-                phase: 'afterWrite',
-                effect: ({ state, instance }) => {
-                    // ".isFirstRun" is a part of our patch, on a first evaluation it will "undefined"
-                    // should be disabled for subsequent runs as it breaks positioning for them
-                    if (instance.isFirstRun !== false) {
-                        popperOriginalPositionRef.current = state.elements.popper.style.position;
-                        state.elements.popper.style.position = 'fixed';
-                    }
-                    return () => undefined;
-                },
-                requires: [],
-            },
-            { name: 'flip', options: { flipVariations: true } },
-            /**
-             * pinned disables the flip modifier by setting flip.enabled to false; this
-             * disables automatic repositioning of the popper box; it will always be placed according to
-             * the values of `align` and `position` props, regardless of the size of the component, the
-             * reference element or the viewport.
-             */
-            pinned && { name: 'flip', enabled: false },
-            /**
-             * When the popper box is placed in the context of a scrollable element, we need to set
-             * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent'
-             * (default is 'viewport') so that the popper box will stick with the targetRef when we
-             * scroll targetRef out of the viewport.
-             */
-            hasScrollableElement && { name: 'flip', options: { boundary: 'clippingParents' } },
-            hasScrollableElement && { name: 'preventOverflow', options: { boundary: 'clippingParents' } },
-            offsetModifier,
-            /**
-             * This modifier is necessary to retain behaviour from popper v1 where untethered poppers are allowed by
-             * default. i.e. popper is still rendered fully in the viewport even if anchor element is no longer in the
-             * viewport.
-             */
-            unstable_disableTether && {
-                name: 'preventOverflow',
-                options: { altAxis: unstable_disableTether === 'all', tether: false },
-            },
-            flipBoundary && {
-                name: 'flip',
-                options: {
-                    altBoundary: true,
-                    boundary: index_1.getBoundary(container, flipBoundary),
-                },
-            },
-            overflowBoundary && {
-                name: 'preventOverflow',
-                options: {
-                    altBoundary: true,
-                    boundary: index_1.getBoundary(container, overflowBoundary),
-                },
-            },
-            {
-                name: 'onUpdate',
-                enabled: true,
-                phase: 'afterWrite',
-                fn: handleStateUpdate,
-            },
-            {
-                // Similar code as popper-maxsize-modifier: https://github.com/atomiks/popper.js/blob/master/src/modifiers/maxSize.js
-                // popper-maxsize-modifier only calculates the max sizes.
-                // This modifier can apply max sizes always, or apply the max sizes only when overflow is detected
-                name: 'applyMaxSize',
-                enabled: !!autoSize,
-                phase: 'beforeWrite',
-                requiresIfExists: ['offset', 'preventOverflow', 'flip'],
-                options: {
-                    altBoundary: true,
-                    boundary: index_1.getBoundary(container, overflowBoundary),
-                },
-                fn({ state, options: modifierOptions }) {
-                    const overflow = PopperJs.detectOverflow(state, modifierOptions);
-                    const { x, y } = state.modifiersData.preventOverflow || { x: 0, y: 0 };
-                    const { width, height } = state.rects.popper;
-                    const basePlacement = index_1.getBasePlacement(state.placement);
-                    const widthProp = basePlacement === 'left' ? 'left' : 'right';
-                    const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
-                    const applyMaxWidth = autoSize === 'always' ||
-                        autoSize === 'width-always' ||
-                        (overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width'));
-                    const applyMaxHeight = autoSize === 'always' ||
-                        autoSize === 'height-always' ||
-                        (overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height'));
-                    if (applyMaxWidth) {
-                        state.styles.popper.maxWidth = `${width - overflow[widthProp] - x}px`;
-                    }
-                    if (applyMaxHeight) {
-                        state.styles.popper.maxHeight = `${height - overflow[heightProp] - y}px`;
-                    }
-                },
-            },
-            /**
-             * This modifier is necessary in order to render the pointer. Refs are resolved in effects, so it can't be
-             * placed under computed modifiers. Deep merge is not required as this modifier has only these properties.
-             */
-            {
-                name: 'arrow',
-                enabled: !!arrow,
-                options: { element: arrow, padding: arrowPadding },
-            },
-            /**
-             * Modifies popper offsets to cover the reference rect, but still keep edge alignment
-             */
-            {
-                name: 'coverTarget',
-                enabled: !!coverTarget,
-                phase: 'main',
-                requiresIfExists: ['offset', 'preventOverflow', 'flip'],
-                fn({ state }) {
-                    const basePlacement = index_1.getBasePlacement(state.placement);
-                    switch (basePlacement) {
-                        case 'bottom':
-                            state.modifiersData.popperOffsets.y -= state.rects.reference.height;
-                            break;
-                        case 'top':
-                            state.modifiersData.popperOffsets.y += state.rects.reference.height;
-                            break;
-                        case 'left':
-                            state.modifiersData.popperOffsets.x += state.rects.reference.width;
-                            break;
-                        case 'right':
-                            state.modifiersData.popperOffsets.x -= state.rects.reference.width;
-                            break;
-                    }
-                },
-            },
-        ].filter(Boolean); // filter boolean conditional spreading values
-        const popperOptions = {
-            modifiers,
-            placement,
-            strategy,
-            onFirstUpdate: state => handleStateUpdate({ state }),
-        };
-        return popperOptions;
-    }, [
-        arrowPadding,
-        autoSize,
-        coverTarget,
-        flipBoundary,
-        offsetModifier,
-        overflowBoundary,
-        placement,
-        strategy,
-        unstable_disableTether,
-        pinned,
-        // These can be skipped from deps as they will not ever change
-        handleStateUpdate,
-        popperOriginalPositionRef,
-    ]);
+
+        if (applyMaxHeight) {
+          state.styles.popper.maxHeight = `${height - overflow[heightProp] - y}px`;
+        }
+      }
+
+    },
+    /**
+     * This modifier is necessary in order to render the pointer. Refs are resolved in effects, so it can't be
+     * placed under computed modifiers. Deep merge is not required as this modifier has only these properties.
+     */
+    {
+      name: 'arrow',
+      enabled: !!arrow,
+      options: {
+        element: arrow,
+        padding: arrowPadding
+      }
+    },
+    /**
+     * Modifies popper offsets to cover the reference rect, but still keep edge alignment
+     */
+    {
+      name: 'coverTarget',
+      enabled: !!coverTarget,
+      phase: 'main',
+      requiresIfExists: ['offset', 'preventOverflow', 'flip'],
+
+      fn({
+        state
+      }) {
+        const basePlacement = index_1.getBasePlacement(state.placement);
+
+        switch (basePlacement) {
+          case 'bottom':
+            state.modifiersData.popperOffsets.y -= state.rects.reference.height;
+            break;
+
+          case 'top':
+            state.modifiersData.popperOffsets.y += state.rects.reference.height;
+            break;
+
+          case 'left':
+            state.modifiersData.popperOffsets.x += state.rects.reference.width;
+            break;
+
+          case 'right':
+            state.modifiersData.popperOffsets.x -= state.rects.reference.width;
+            break;
+        }
+      }
+
+    }].filter(Boolean); // filter boolean conditional spreading values
+
+    const popperOptions = {
+      modifiers,
+      placement,
+      strategy,
+      onFirstUpdate: state => handleStateUpdate({
+        state
+      })
+    };
+    return popperOptions;
+  }, [arrowPadding, autoSize, coverTarget, flipBoundary, offsetModifier, overflowBoundary, placement, strategy, unstable_disableTether, pinned, // These can be skipped from deps as they will not ever change
+  handleStateUpdate, popperOriginalPositionRef]);
 }
@@ -231,127 +284,134 @@ /**
  */
+
+
 function usePopper(options = {}) {
-    const { enabled = true } = options;
-    const isFirstMount = react_utilities_1.useFirstMount();
-    const popperOriginalPositionRef = React.useRef('absolute');
-    const resolvePopperOptions = usePopperOptions(options, popperOriginalPositionRef);
-    const popperInstanceRef = React.useRef(null);
-    const handlePopperUpdate = react_utilities_1.useEventCallback(() => {
-        var _a;
-        (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
-        popperInstanceRef.current = null;
-        const { target = targetRef.current } = options;
-        let popperInstance = null;
-        if (react_utilities_1.canUseDOM() && enabled) {
-            if (target && containerRef.current) {
-                popperInstance = PopperJs.createPopper(target, containerRef.current, resolvePopperOptions(target, containerRef.current, arrowRef.current));
-            }
+  const {
+    enabled = true
+  } = options;
+  const isFirstMount = react_utilities_1.useFirstMount();
+  const popperOriginalPositionRef = React.useRef('absolute');
+  const resolvePopperOptions = usePopperOptions(options, popperOriginalPositionRef);
+  const popperInstanceRef = React.useRef(null);
+  const handlePopperUpdate = react_utilities_1.useEventCallback(() => {
+    var _a;
+
+    (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+    popperInstanceRef.current = null;
+    const {
+      target = targetRef.current
+    } = options;
+    let popperInstance = null;
+
+    if (react_utilities_1.canUseDOM() && enabled) {
+      if (target && containerRef.current) {
+        popperInstance = PopperJs.createPopper(target, containerRef.current, resolvePopperOptions(target, containerRef.current, arrowRef.current));
+      }
+    }
+
+    if (popperInstance) {
+      /**
+       * The patch updates `.forceUpdate()` Popper function which restores the original position before the first
+       * forceUpdate() call. See also "positionStyleFix" modifier in usePopperOptions().
+       */
+      const originalForceUpdate = popperInstance.forceUpdate;
+      popperInstance.isFirstRun = true;
+
+      popperInstance.forceUpdate = () => {
+        if (popperInstance === null || popperInstance === void 0 ? void 0 : popperInstance.isFirstRun) {
+          popperInstance.state.elements.popper.style.position = popperOriginalPositionRef.current;
+          popperInstance.isFirstRun = false;
         }
-        if (popperInstance) {
-            /**
-             * The patch updates `.forceUpdate()` Popper function which restores the original position before the first
-             * forceUpdate() call. See also "positionStyleFix" modifier in usePopperOptions().
-             */
-            const originalForceUpdate = popperInstance.forceUpdate;
-            popperInstance.isFirstRun = true;
-            popperInstance.forceUpdate = () => {
-                if (popperInstance === null || popperInstance === void 0 ? void 0 : popperInstance.isFirstRun) {
-                    popperInstance.state.elements.popper.style.position = popperOriginalPositionRef.current;
-                    popperInstance.isFirstRun = false;
-                }
-                originalForceUpdate();
-            };
+
+        originalForceUpdate();
+      };
+    }
+
+    popperInstanceRef.current = popperInstance;
+  }); // Refs are managed by useCallbackRef() to handle ref updates scenarios.
+  //
+  // The first scenario are updates for a targetRef, we can handle it properly only via callback refs, but it causes
+  // re-renders (we would like to avoid them).
+  //
+  // The second problem is related to refs resolution on React's layer: refs are resolved in the same order as effects
+  // that causes an issue when you have a container inside a target, for example: a menu in ChatMessage.
+  //
+  // function ChatMessage(props) {
+  //   <div className="message" ref={targetRef}> // 3) ref will be resolved only now, but it's too late already
+  //     <Popper target={targetRef}> // 2) create a popper instance
+  //       <div className="menu" /> // 1) capture ref from this element
+  //     </Popper>
+  //   </div>
+  // }
+  //
+  // Check a demo on CodeSandbox: https://codesandbox.io/s/popper-refs-emy60.
+  //
+  // This again can be solved with callback refs. It's not a huge issue as with hooks we are moving popper's creation
+  // to ChatMessage itself, however, without `useCallback()` refs it's still a Pandora box.
+
+  const targetRef = index_1.useCallbackRef(null, handlePopperUpdate, true);
+  const containerRef = index_1.useCallbackRef(null, handlePopperUpdate, true);
+  const arrowRef = index_1.useCallbackRef(null, handlePopperUpdate, true);
+  React.useImperativeHandle(options.popperRef, () => ({
+    updatePosition: () => {
+      var _a;
+
+      (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.update();
+    }
+  }), []);
+  react_utilities_1.useIsomorphicLayoutEffect(() => {
+    handlePopperUpdate();
+    return () => {
+      var _a;
+
+      (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+      popperInstanceRef.current = null;
+    };
+  }, [handlePopperUpdate, options.enabled, options.target]);
+  react_utilities_1.useIsomorphicLayoutEffect(() => {
+    var _a;
+
+    if (!isFirstMount) {
+      (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(resolvePopperOptions(options.target || targetRef.current, containerRef.current, arrowRef.current));
+    }
+  }, // Missing deps:
+  // options.target - The useIsomorphicLayoutEffect before this will create a new popper instance if target changes
+  // isFirstMount - Should never change after mount
+  // arrowRef, containerRef, targetRef - Stable between renders
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [resolvePopperOptions]);
+
+  if (process.env.NODE_ENV !== 'production') {
+    // This checked should run only in development mode
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      var _a;
+
+      if (containerRef.current) {
+        const contentNode = containerRef.current;
+        const treeWalker = (_a = contentNode.ownerDocument) === null || _a === void 0 ? void 0 : _a.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {
+          acceptNode: hasAutofocusFilter
+        });
+
+        while (treeWalker === null || treeWalker === void 0 ? void 0 : treeWalker.nextNode()) {
+          const node = treeWalker.currentNode; // eslint-disable-next-line no-console
+
+          console.warn('<Popper>:', node); // eslint-disable-next-line no-console
+
+          console.warn(['<Popper>: ^ this node contains "autoFocus" prop on a React element. This can break the initial', 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills', '"autoFocus" behavior to solve inconsistencies between different browsers:', 'https://github.com/facebook/react/issues/11851#issuecomment-351787078', '\n', 'However, ".focus()" in this case occurs before any other React effects will be executed', '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really', 'want to use "autoFocus" please add "position: fixed" to styles of the element that is wrapped by', '"Popper".', `In general, it's not recommended to use "autoFocus" as it may break accessibility aspects:`, 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md', '\n', 'We suggest to use the "trapFocus" prop on Fluent components or a catch "ref" and then use', '"ref.current.focus" in React.useEffect():', 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element'].join(' '));
         }
-        popperInstanceRef.current = popperInstance;
-    });
-    // Refs are managed by useCallbackRef() to handle ref updates scenarios.
-    //
-    // The first scenario are updates for a targetRef, we can handle it properly only via callback refs, but it causes
-    // re-renders (we would like to avoid them).
-    //
-    // The second problem is related to refs resolution on React's layer: refs are resolved in the same order as effects
-    // that causes an issue when you have a container inside a target, for example: a menu in ChatMessage.
-    //
-    // function ChatMessage(props) {
-    //   <div className="message" ref={targetRef}> // 3) ref will be resolved only now, but it's too late already
-    //     <Popper target={targetRef}> // 2) create a popper instance
-    //       <div className="menu" /> // 1) capture ref from this element
-    //     </Popper>
-    //   </div>
-    // }
-    //
-    // Check a demo on CodeSandbox: https://codesandbox.io/s/popper-refs-emy60.
-    //
-    // This again can be solved with callback refs. It's not a huge issue as with hooks we are moving popper's creation
-    // to ChatMessage itself, however, without `useCallback()` refs it's still a Pandora box.
-    const targetRef = index_1.useCallbackRef(null, handlePopperUpdate, true);
-    const containerRef = index_1.useCallbackRef(null, handlePopperUpdate, true);
-    const arrowRef = index_1.useCallbackRef(null, handlePopperUpdate, true);
-    React.useImperativeHandle(options.popperRef, () => ({
-        updatePosition: () => {
-            var _a;
-            (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.update();
-        },
-    }), []);
-    react_utilities_1.useIsomorphicLayoutEffect(() => {
-        handlePopperUpdate();
-        return () => {
-            var _a;
-            (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
-            popperInstanceRef.current = null;
-        };
-    }, [handlePopperUpdate, options.enabled, options.target]);
-    react_utilities_1.useIsomorphicLayoutEffect(() => {
-        var _a;
-        if (!isFirstMount) {
-            (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(resolvePopperOptions(options.target || targetRef.current, containerRef.current, arrowRef.current));
-        }
-    }, 
-    // Missing deps:
-    // options.target - The useIsomorphicLayoutEffect before this will create a new popper instance if target changes
-    // isFirstMount - Should never change after mount
-    // arrowRef, containerRef, targetRef - Stable between renders
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [resolvePopperOptions]);
-    if (process.env.NODE_ENV !== 'production') {
-        // This checked should run only in development mode
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        React.useEffect(() => {
-            var _a;
-            if (containerRef.current) {
-                const contentNode = containerRef.current;
-                const treeWalker = (_a = contentNode.ownerDocument) === null || _a === void 0 ? void 0 : _a.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {
-                    acceptNode: hasAutofocusFilter,
-                });
-                while (treeWalker === null || treeWalker === void 0 ? void 0 : treeWalker.nextNode()) {
-                    const node = treeWalker.currentNode;
-                    // eslint-disable-next-line no-console
-                    console.warn('<Popper>:', node);
-                    // eslint-disable-next-line no-console
-                    console.warn([
-                        '<Popper>: ^ this node contains "autoFocus" prop on a React element. This can break the initial',
-                        'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',
-                        '"autoFocus" behavior to solve inconsistencies between different browsers:',
-                        'https://github.com/facebook/react/issues/11851#issuecomment-351787078',
-                        '\n',
-                        'However, ".focus()" in this case occurs before any other React effects will be executed',
-                        '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',
-                        'want to use "autoFocus" please add "position: fixed" to styles of the element that is wrapped by',
-                        '"Popper".',
-                        `In general, it's not recommended to use "autoFocus" as it may break accessibility aspects:`,
-                        'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',
-                        '\n',
-                        'We suggest to use the "trapFocus" prop on Fluent components or a catch "ref" and then use',
-                        '"ref.current.focus" in React.useEffect():',
-                        'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',
-                    ].join(' '));
-                }
-            }
-            // We run this check once, no need to add deps here
-            // TODO: Should be rework to handle options.enabled and contentRef updates
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, []);
-    }
-    return { targetRef, containerRef, arrowRef };
+      } // We run this check once, no need to add deps here
+      // TODO: Should be rework to handle options.enabled and contentRef updates
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    }, []);
+  }
+
+  return {
+    targetRef,
+    containerRef,
+    arrowRef
+  };
 }
+
 exports.usePopper = usePopper;
 //# sourceMappingURL=usePopper.js.map

lib-commonjs/usePopperMouseTarget.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.usePopperMouseTarget = void 0;
-const React = require("react");
-const createVirtualElementFromClick_1 = require("./createVirtualElementFromClick");
+
+const React = /*#__PURE__*/require("react");
+
+const createVirtualElementFromClick_1 = /*#__PURE__*/require("./createVirtualElementFromClick");
 /**
@@ -14,26 +19,34 @@ * A state hook that manages a popper virtual element from mouseevents.
  */
-const usePopperMouseTarget = (initialState) => {
-    const [virtualElement, setVirtualElement] = React.useState(initialState);
-    const setVirtualMouseTarget = (event) => {
-        if (event === undefined || event === null) {
-            setVirtualElement(undefined);
-            return;
-        }
-        let mouseevent;
-        if (!(event instanceof MouseEvent)) {
-            mouseevent = event.nativeEvent;
-        }
-        else {
-            mouseevent = event;
-        }
-        if (!(mouseevent instanceof MouseEvent) && process.env.NODE_ENV !== 'production') {
-            // eslint-disable-next-line no-console
-            console.error('usePopperMouseTarget should only be used with MouseEvent');
-        }
-        const contextTarget = createVirtualElementFromClick_1.createVirtualElementFromClick(mouseevent);
-        setVirtualElement(contextTarget);
-    };
-    return [virtualElement, setVirtualMouseTarget];
+
+
+const usePopperMouseTarget = initialState => {
+  const [virtualElement, setVirtualElement] = React.useState(initialState);
+
+  const setVirtualMouseTarget = event => {
+    if (event === undefined || event === null) {
+      setVirtualElement(undefined);
+      return;
+    }
+
+    let mouseevent;
+
+    if (!(event instanceof MouseEvent)) {
+      mouseevent = event.nativeEvent;
+    } else {
+      mouseevent = event;
+    }
+
+    if (!(mouseevent instanceof MouseEvent) && process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error('usePopperMouseTarget should only be used with MouseEvent');
+    }
+
+    const contextTarget = createVirtualElementFromClick_1.createVirtualElementFromClick(mouseevent);
+    setVirtualElement(contextTarget);
+  };
+
+  return [virtualElement, setVirtualMouseTarget];
 };
+
 exports.usePopperMouseTarget = usePopperMouseTarget;
 //# sourceMappingURL=usePopperMouseTarget.js.map

lib-commonjs/utils/getBasePlacement.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.getBasePlacement = void 0;
@@ -10,6 +13,8 @@ /**
  */
+
 function getBasePlacement(placement) {
-    return placement.split('-')[0];
+  return placement.split('-')[0];
 }
+
 exports.getBasePlacement = getBasePlacement;
 //# sourceMappingURL=getBasePlacement.js.map

lib-commonjs/utils/getBoundary.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.getBoundary = void 0;
-const getScrollParent_1 = require("./getScrollParent");
+
+const getScrollParent_1 = /*#__PURE__*/require("./getScrollParent");
 /**
  * Allows to mimic a behavior from V1 of Popper and accept `window` and `scrollParent` as strings.
  */
+
+
 function getBoundary(element, boundary) {
-    if (boundary === 'window') {
-        return element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
+  if (boundary === 'window') {
+    return element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
+  }
+
+  if (boundary === 'scrollParent') {
+    let boundariesNode = getScrollParent_1.getScrollParent(element);
+
+    if (boundariesNode.nodeName === 'BODY') {
+      boundariesNode = element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
     }
-    if (boundary === 'scrollParent') {
-        let boundariesNode = getScrollParent_1.getScrollParent(element);
-        if (boundariesNode.nodeName === 'BODY') {
-            boundariesNode = element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
-        }
-        return boundariesNode;
-    }
-    return boundary;
+
+    return boundariesNode;
+  }
+
+  return boundary;
 }
+
 exports.getBoundary = getBoundary;
 //# sourceMappingURL=getBoundary.js.map

lib-commonjs/utils/getReactFiberFromNode.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.getReactFiberFromNode = void 0;
 var WorkTag;
+
 (function (WorkTag) {
-    WorkTag[WorkTag["FunctionComponent"] = 0] = "FunctionComponent";
-    WorkTag[WorkTag["ClassComponent"] = 1] = "ClassComponent";
-    WorkTag[WorkTag["IndeterminateComponent"] = 2] = "IndeterminateComponent";
-    WorkTag[WorkTag["HostRoot"] = 3] = "HostRoot";
-    WorkTag[WorkTag["HostPortal"] = 4] = "HostPortal";
-    WorkTag[WorkTag["HostComponent"] = 5] = "HostComponent";
-    WorkTag[WorkTag["HostText"] = 6] = "HostText";
-    WorkTag[WorkTag["Fragment"] = 7] = "Fragment";
-    WorkTag[WorkTag["Mode"] = 8] = "Mode";
-    WorkTag[WorkTag["ContextConsumer"] = 9] = "ContextConsumer";
-    WorkTag[WorkTag["ContextProvider"] = 10] = "ContextProvider";
-    WorkTag[WorkTag["ForwardRef"] = 11] = "ForwardRef";
-    WorkTag[WorkTag["Profiler"] = 12] = "Profiler";
-    WorkTag[WorkTag["SuspenseComponent"] = 13] = "SuspenseComponent";
-    WorkTag[WorkTag["MemoComponent"] = 14] = "MemoComponent";
-    WorkTag[WorkTag["SimpleMemoComponent"] = 15] = "SimpleMemoComponent";
-    WorkTag[WorkTag["LazyComponent"] = 16] = "LazyComponent";
-    WorkTag[WorkTag["IncompleteClassComponent"] = 17] = "IncompleteClassComponent";
-    WorkTag[WorkTag["DehydratedFragment"] = 18] = "DehydratedFragment";
-    WorkTag[WorkTag["SuspenseListComponent"] = 19] = "SuspenseListComponent";
-    WorkTag[WorkTag["FundamentalComponent"] = 20] = "FundamentalComponent";
-    WorkTag[WorkTag["ScopeComponent"] = 21] = "ScopeComponent";
+  WorkTag[WorkTag["FunctionComponent"] = 0] = "FunctionComponent";
+  WorkTag[WorkTag["ClassComponent"] = 1] = "ClassComponent";
+  WorkTag[WorkTag["IndeterminateComponent"] = 2] = "IndeterminateComponent";
+  WorkTag[WorkTag["HostRoot"] = 3] = "HostRoot";
+  WorkTag[WorkTag["HostPortal"] = 4] = "HostPortal";
+  WorkTag[WorkTag["HostComponent"] = 5] = "HostComponent";
+  WorkTag[WorkTag["HostText"] = 6] = "HostText";
+  WorkTag[WorkTag["Fragment"] = 7] = "Fragment";
+  WorkTag[WorkTag["Mode"] = 8] = "Mode";
+  WorkTag[WorkTag["ContextConsumer"] = 9] = "ContextConsumer";
+  WorkTag[WorkTag["ContextProvider"] = 10] = "ContextProvider";
+  WorkTag[WorkTag["ForwardRef"] = 11] = "ForwardRef";
+  WorkTag[WorkTag["Profiler"] = 12] = "Profiler";
+  WorkTag[WorkTag["SuspenseComponent"] = 13] = "SuspenseComponent";
+  WorkTag[WorkTag["MemoComponent"] = 14] = "MemoComponent";
+  WorkTag[WorkTag["SimpleMemoComponent"] = 15] = "SimpleMemoComponent";
+  WorkTag[WorkTag["LazyComponent"] = 16] = "LazyComponent";
+  WorkTag[WorkTag["IncompleteClassComponent"] = 17] = "IncompleteClassComponent";
+  WorkTag[WorkTag["DehydratedFragment"] = 18] = "DehydratedFragment";
+  WorkTag[WorkTag["SuspenseListComponent"] = 19] = "SuspenseListComponent";
+  WorkTag[WorkTag["FundamentalComponent"] = 20] = "FundamentalComponent";
+  WorkTag[WorkTag["ScopeComponent"] = 21] = "ScopeComponent";
 })(WorkTag || (WorkTag = {}));
+
 function getReactFiberFromNode(elm) {
-    if (!elm) {
-        return null;
+  if (!elm) {
+    return null;
+  }
+
+  for (const k in elm) {
+    // React 16 uses "__reactInternalInstance$" prefix
+    // React 17 uses "__reactFiber$" prefix
+    // https://github.com/facebook/react/pull/18377
+    if (k.indexOf('__reactInternalInstance$') === 0 || k.indexOf('__reactFiber$') === 0) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      return elm[k];
     }
-    for (const k in elm) {
-        // React 16 uses "__reactInternalInstance$" prefix
-        // React 17 uses "__reactFiber$" prefix
-        // https://github.com/facebook/react/pull/18377
-        if (k.indexOf('__reactInternalInstance$') === 0 || k.indexOf('__reactFiber$') === 0) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            return elm[k];
-        }
-    }
-    throw new Error('getReactFiber(): Failed to find a React Fiber on a node');
+  }
+
+  throw new Error('getReactFiber(): Failed to find a React Fiber on a node');
 }
+
 exports.getReactFiberFromNode = getReactFiberFromNode;
 //# sourceMappingURL=getReactFiberFromNode.js.map

lib-commonjs/utils/getScrollParent.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.getScrollParent = exports.getParentNode = void 0;
@@ -9,9 +12,12 @@ /**
  */
-const getParentNode = (node) => {
-    if (node.nodeName === 'HTML') {
-        return node;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return node.parentNode || node.host;
+
+const getParentNode = node => {
+  if (node.nodeName === 'HTML') {
+    return node;
+  } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  return node.parentNode || node.host;
 };
+
 exports.getParentNode = getParentNode;
@@ -23,9 +29,12 @@ /**
  */
-const getStyleComputedProperty = (node) => {
-    var _a;
-    if (node.nodeType !== 1) {
-        return {};
-    }
-    const window = (_a = node.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
-    return window.getComputedStyle(node, null);
+
+const getStyleComputedProperty = node => {
+  var _a;
+
+  if (node.nodeType !== 1) {
+    return {};
+  }
+
+  const window = (_a = node.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+  return window.getComputedStyle(node, null);
 };
@@ -37,23 +46,34 @@ /**
  */
-const getScrollParent = (node) => {
-    // Return body, `getScroll` will take care to get the correct `scrollTop` from it
-    const parentNode = node && exports.getParentNode(node);
-    // eslint-disable-next-line
-    if (!parentNode)
-        return document.body;
-    switch (parentNode.nodeName) {
-        case 'HTML':
-        case 'BODY':
-            return parentNode.ownerDocument.body;
-        case '#document':
-            return parentNode.body;
-    }
-    // If any of the overflow props is defined for the node then we return it as the parent
-    const { overflow, overflowX, overflowY } = getStyleComputedProperty(parentNode);
-    if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
-        return parentNode;
-    }
-    return exports.getScrollParent(parentNode);
+
+
+const getScrollParent = node => {
+  // Return body, `getScroll` will take care to get the correct `scrollTop` from it
+  const parentNode = node && exports.getParentNode(node); // eslint-disable-next-line
+
+  if (!parentNode) return document.body;
+
+  switch (parentNode.nodeName) {
+    case 'HTML':
+    case 'BODY':
+      return parentNode.ownerDocument.body;
+
+    case '#document':
+      return parentNode.body;
+  } // If any of the overflow props is defined for the node then we return it as the parent
+
+
+  const {
+    overflow,
+    overflowX,
+    overflowY
+  } = getStyleComputedProperty(parentNode);
+
+  if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
+    return parentNode;
+  }
+
+  return exports.getScrollParent(parentNode);
 };
+
 exports.getScrollParent = getScrollParent;
 //# sourceMappingURL=getScrollParent.js.map

lib-commonjs/utils/index.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./getBasePlacement"), exports);
+
 tslib_1.__exportStar(require("./getBoundary"), exports);
+
 tslib_1.__exportStar(require("./getReactFiberFromNode"), exports);
+
 tslib_1.__exportStar(require("./getScrollParent"), exports);
+
 tslib_1.__exportStar(require("./mergeArrowOffset"), exports);
+
 tslib_1.__exportStar(require("./positioningHelper"), exports);
+
 tslib_1.__exportStar(require("./resolvePositioningShorthand"), exports);
+
 tslib_1.__exportStar(require("./useCallbackRef"), exports);
 //# sourceMappingURL=index.js.map

lib-commonjs/utils/mergeArrowOffset.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.mergeArrowOffset = void 0;
@@ -12,31 +15,38 @@ /**
  */
+
 function mergeArrowOffset(userOffset, arrowHeight) {
-    let offsetWithArrow = userOffset;
-    if (!userOffset) {
-        return [0, arrowHeight];
-    }
-    if (Array.isArray(offsetWithArrow)) {
-        setArrowOffset(offsetWithArrow, arrowHeight);
-        return offsetWithArrow;
-    }
-    if (typeof offsetWithArrow === 'function') {
-        const userOffsetFn = offsetWithArrow;
-        offsetWithArrow = offsetParams => {
-            const offset = userOffsetFn(offsetParams);
-            setArrowOffset(offset, arrowHeight);
-            return offset;
-        };
-    }
-    // This should never happen
-    return [0, 0];
+  let offsetWithArrow = userOffset;
+
+  if (!userOffset) {
+    return [0, arrowHeight];
+  }
+
+  if (Array.isArray(offsetWithArrow)) {
+    setArrowOffset(offsetWithArrow, arrowHeight);
+    return offsetWithArrow;
+  }
+
+  if (typeof offsetWithArrow === 'function') {
+    const userOffsetFn = offsetWithArrow;
+
+    offsetWithArrow = offsetParams => {
+      const offset = userOffsetFn(offsetParams);
+      setArrowOffset(offset, arrowHeight);
+      return offset;
+    };
+  } // This should never happen
+
+
+  return [0, 0];
 }
+
 exports.mergeArrowOffset = mergeArrowOffset;
+
 const setArrowOffset = (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=mergeArrowOffset.js.map

lib-commonjs/utils/positioningHelper.d.ts

@@ -6,3 +6,3 @@ import * as PopperJs from '@popperjs/core';
  */
-export declare const getPlacement: (align?: "top" | "bottom" | "start" | "end" | "center" | undefined, position?: "above" | "below" | "before" | "after" | undefined, rtl?: boolean | undefined) => PopperJs.Placement;
+export declare const getPlacement: (align?: "bottom" | "top" | "center" | "start" | "end" | undefined, position?: "above" | "below" | "before" | "after" | undefined, rtl?: boolean | undefined) => PopperJs.Placement;
 export declare const applyRtlToOffset: (offset: Offset | undefined) => Offset | undefined;

lib-commonjs/utils/positioningHelper.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.applyRtlToOffset = exports.getPlacement = void 0;
-const getPositionMap = (rtl) => ({
-    above: 'top',
-    below: 'bottom',
-    before: rtl ? 'right' : 'left',
-    after: rtl ? 'left' : 'right',
+
+const getPositionMap = rtl => ({
+  above: 'top',
+  below: 'bottom',
+  before: rtl ? 'right' : 'left',
+  after: rtl ? 'left' : 'right'
 });
-const getAlignmentMap = (rtl) => ({
-    start: rtl ? 'end' : 'start',
-    end: rtl ? 'start' : 'end',
-    top: 'start',
-    bottom: 'end',
-    center: '',
+
+const getAlignmentMap = rtl => ({
+  start: rtl ? 'end' : 'start',
+  end: rtl ? 'start' : 'end',
+  top: 'start',
+  bottom: 'end',
+  center: ''
 });
+
 const shouldAlignToCenter = (p, a) => {
-    const positionedVertically = p === 'above' || p === 'below';
-    const alignedVertically = a === 'top' || a === 'bottom';
-    return (positionedVertically && alignedVertically) || (!positionedVertically && !alignedVertically);
+  const positionedVertically = p === 'above' || p === 'below';
+  const alignedVertically = a === 'top' || a === 'bottom';
+  return positionedVertically && alignedVertically || !positionedVertically && !alignedVertically;
 };
@@ -25,23 +31,32 @@ /**
  */
+
+
 const getPlacement = (align, position, rtl) => {
-    const alignment = shouldAlignToCenter(position, align) ? 'center' : align;
-    const computedPosition = position && getPositionMap(rtl)[position];
-    const computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];
-    if (computedPosition && computedAlignmnent) {
-        return `${computedPosition}-${computedAlignmnent}`;
-    }
-    return computedPosition || 'auto';
+  const alignment = shouldAlignToCenter(position, align) ? 'center' : align;
+  const computedPosition = position && getPositionMap(rtl)[position];
+  const computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];
+
+  if (computedPosition && computedAlignmnent) {
+    return `${computedPosition}-${computedAlignmnent}`;
+  }
+
+  return computedPosition || 'auto';
 };
+
 exports.getPlacement = getPlacement;
-const applyRtlToOffset = (offset) => {
-    if (typeof offset === 'undefined') {
-        return undefined;
-    }
-    if (Array.isArray(offset)) {
-        offset[0] = offset[0] * -1;
-        return offset;
-    }
-    return ((param) => exports.applyRtlToOffset(offset(param)));
+
+const applyRtlToOffset = offset => {
+  if (typeof offset === 'undefined') {
+    return undefined;
+  }
+
+  if (Array.isArray(offset)) {
+    offset[0] = offset[0] * -1;
+    return offset;
+  }
+
+  return param => exports.applyRtlToOffset(offset(param));
 };
+
 exports.applyRtlToOffset = applyRtlToOffset;
 //# sourceMappingURL=positioningHelper.js.map

lib-commonjs/utils/resolvePositioningShorthand.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolvePositioningShorthand = void 0;
-// Look up table for shorthand to avoid parsing strings
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolvePositioningShorthand = void 0; // Look up table for shorthand to avoid parsing strings
+
 const shorthandLookup = {
-    above: { position: 'above', align: 'center' },
-    'above-start': { position: 'above', align: 'start' },
-    'above-end': { position: 'above', align: 'end' },
-    below: { position: 'below', align: 'center' },
-    'below-start': { position: 'below', align: 'start' },
-    'below-end': { position: 'below', align: 'end' },
-    before: { position: 'before', align: 'center' },
-    'before-top': { position: 'before', align: 'top' },
-    'before-bottom': { position: 'before', align: 'bottom' },
-    after: { position: 'after', align: 'center' },
-    'after-top': { position: 'after', align: 'top' },
-    'after-bottom': { position: 'after', align: 'bottom' },
+  above: {
+    position: 'above',
+    align: 'center'
+  },
+  'above-start': {
+    position: 'above',
+    align: 'start'
+  },
+  'above-end': {
+    position: 'above',
+    align: 'end'
+  },
+  below: {
+    position: 'below',
+    align: 'center'
+  },
+  'below-start': {
+    position: 'below',
+    align: 'start'
+  },
+  'below-end': {
+    position: 'below',
+    align: 'end'
+  },
+  before: {
+    position: 'before',
+    align: 'center'
+  },
+  'before-top': {
+    position: 'before',
+    align: 'top'
+  },
+  'before-bottom': {
+    position: 'before',
+    align: 'bottom'
+  },
+  after: {
+    position: 'after',
+    align: 'center'
+  },
+  'after-top': {
+    position: 'after',
+    align: 'top'
+  },
+  'after-bottom': {
+    position: 'after',
+    align: 'bottom'
+  }
 };
+
 function resolvePositioningShorthand(shorthand) {
-    if (shorthand === undefined || shorthand === null) {
-        return {};
-    }
-    if (typeof shorthand === 'string') {
-        return shorthandLookup[shorthand];
-    }
-    return shorthand;
+  if (shorthand === undefined || shorthand === null) {
+    return {};
+  }
+
+  if (typeof shorthand === 'string') {
+    return shorthandLookup[shorthand];
+  }
+
+  return shorthand;
 }
+
 exports.resolvePositioningShorthand = resolvePositioningShorthand;
 //# sourceMappingURL=resolvePositioningShorthand.js.map

lib-commonjs/utils/useCallbackRef.js

 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.useCallbackRef = void 0;
-const React = require("react");
-const react_utilities_1 = require("@fluentui/react-utilities");
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
@@ -23,34 +28,42 @@ * Creates a MutableRef with ref change callback. Is useful as React.useRef() doesn't notify you when its content
  */
+
+
 function useCallbackRef(initialValue, callback, skipInitialResolve) {
-    const isFirst = React.useRef(true);
-    const [ref] = React.useState(() => ({
-        // value
-        value: initialValue,
-        // last callback
-        callback,
-        // "memoized" public interface
-        facade: {
-            get current() {
-                return ref.value;
-            },
-            set current(value) {
-                const last = ref.value;
-                if (last !== value) {
-                    ref.value = value;
-                    if (skipInitialResolve && isFirst.current) {
-                        return;
-                    }
-                    ref.callback(value, last);
-                }
-            },
-        },
-    }));
-    react_utilities_1.useIsomorphicLayoutEffect(() => {
-        isFirst.current = false;
-    }, []);
-    // update callback
-    ref.callback = callback;
-    return ref.facade;
+  const isFirst = React.useRef(true);
+  const [ref] = React.useState(() => ({
+    // value
+    value: initialValue,
+    // last callback
+    callback,
+    // "memoized" public interface
+    facade: {
+      get current() {
+        return ref.value;
+      },
+
+      set current(value) {
+        const last = ref.value;
+
+        if (last !== value) {
+          ref.value = value;
+
+          if (skipInitialResolve && isFirst.current) {
+            return;
+          }
+
+          ref.callback(value, last);
+        }
+      }
+
+    }
+  }));
+  react_utilities_1.useIsomorphicLayoutEffect(() => {
+    isFirst.current = false;
+  }, []); // update callback
+
+  ref.callback = callback;
+  return ref.facade;
 }
+
 exports.useCallbackRef = useCallbackRef;
 //# sourceMappingURL=useCallbackRef.js.map

lib/createVirtualElementFromClick.js

@@ -6,20 +6,22 @@ /**
 export function createVirtualElementFromClick(nativeEvent) {
-    const left = nativeEvent.clientX;
-    const top = nativeEvent.clientY;
-    const right = left + 1;
-    const bottom = top + 1;
-    function getBoundingClientRect() {
-        return {
-            left,
-            top,
-            right,
-            bottom,
-            height: 1,
-            width: 1,
-        };
-    }
+  const left = nativeEvent.clientX;
+  const top = nativeEvent.clientY;
+  const right = left + 1;
+  const bottom = top + 1;
+
+  function getBoundingClientRect() {
     return {
-        getBoundingClientRect,
+      left,
+      top,
+      right,
+      bottom,
+      height: 1,
+      width: 1
     };
+  }
+
+  return {
+    getBoundingClientRect
+  };
 }
 //# sourceMappingURL=createVirtualElementFromClick.js.map

lib/index.d.ts

@@ -0,5 +1,6 @@
+export * from './createVirtualElementFromClick';
+export * from './createArrowStyles';
 export * from './usePopper';
-export * from './createVirtualElementFromClick';
 export * from './usePopperMouseTarget';
 export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
 export * from './types';

lib/index.js

@@ -0,3 +1,4 @@
+export * from './createVirtualElementFromClick';
+export * from './createArrowStyles';
 export * from './usePopper';
-export * from './createVirtualElementFromClick';
 export * from './usePopperMouseTarget';
@@ -4,0 +5,0 @@ export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';

lib/usePopper.js

 import { useEventCallback, useIsomorphicLayoutEffect, useFirstMount, canUseDOM } from '@fluentui/react-utilities';
 import { useFluent } from '@fluentui/react-shared-contexts';
-import { getScrollParent, applyRtlToOffset, getPlacement, getReactFiberFromNode, getBoundary, useCallbackRef, getBasePlacement, } from './utils/index';
+import { getScrollParent, applyRtlToOffset, getPlacement, getReactFiberFromNode, getBoundary, useCallbackRef, getBasePlacement } from './utils/index';
 import * as PopperJs from '@popperjs/core';
-import * as React from 'react';
-//
+import * as React from 'react'; //
 // Dev utils to detect if nodes have "autoFocus" props.
 //
+
 /**
@@ -13,16 +13,18 @@ * Detects if a passed HTML node has "autoFocus" prop on a React's fiber. Is needed as React handles autofocus behavior
  */
+
 function hasAutofocusProp(node) {
-    var _a;
-    // https://github.com/facebook/react/blob/848bb2426e44606e0a55dfe44c7b3ece33772485/packages/react-dom/src/client/ReactDOMHostConfig.js#L157-L166
-    const isAutoFocusableElement = node.nodeName === 'BUTTON' ||
-        node.nodeName === 'INPUT' ||
-        node.nodeName === 'SELECT' ||
-        node.nodeName === 'TEXTAREA';
-    if (isAutoFocusableElement) {
-        return !!((_a = getReactFiberFromNode(node)) === null || _a === void 0 ? void 0 : _a.pendingProps.autoFocus);
-    }
-    return false;
+  var _a; // https://github.com/facebook/react/blob/848bb2426e44606e0a55dfe44c7b3ece33772485/packages/react-dom/src/client/ReactDOMHostConfig.js#L157-L166
+
+
+  const isAutoFocusableElement = node.nodeName === 'BUTTON' || node.nodeName === 'INPUT' || node.nodeName === 'SELECT' || node.nodeName === 'TEXTAREA';
+
+  if (isAutoFocusableElement) {
+    return !!((_a = getReactFiberFromNode(node)) === null || _a === void 0 ? void 0 : _a.pendingProps.autoFocus);
+  }
+
+  return false;
 }
+
 function hasAutofocusFilter(node) {
-    return hasAutofocusProp(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+  return hasAutofocusProp(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
 }
@@ -36,184 +38,226 @@ /**
  */
+
+
 function usePopperOptions(options, popperOriginalPositionRef) {
-    const { arrowPadding, autoSize, coverTarget, flipBoundary, offset, onStateUpdate, overflowBoundary, 
+  const {
+    arrowPadding,
+    autoSize,
+    coverTarget,
+    flipBoundary,
+    offset,
+    onStateUpdate,
+    overflowBoundary,
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_disableTether, pinned, } = options;
-    const isRtl = useFluent().dir === 'rtl';
-    const placement = getPlacement(options.align, options.position, isRtl);
-    const strategy = options.positionFixed ? 'fixed' : 'absolute';
-    const handleStateUpdate = useEventCallback(({ state }) => {
-        if (onStateUpdate) {
-            onStateUpdate(state);
+    unstable_disableTether,
+    pinned
+  } = options;
+  const isRtl = useFluent().dir === 'rtl';
+  const placement = getPlacement(options.align, options.position, isRtl);
+  const strategy = options.positionFixed ? 'fixed' : 'absolute';
+  const handleStateUpdate = useEventCallback(({
+    state
+  }) => {
+    if (onStateUpdate) {
+      onStateUpdate(state);
+    }
+  });
+  const offsetModifier = React.useMemo(() => offset ? {
+    name: 'offset',
+    options: {
+      offset: isRtl ? applyRtlToOffset(offset) : offset
+    }
+  } : null, [offset, isRtl]);
+  return React.useCallback((target, container, arrow) => {
+    var _a;
+
+    const scrollParentElement = getScrollParent(container);
+    const hasScrollableElement = scrollParentElement ? scrollParentElement !== ((_a = scrollParentElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.body) : false;
+    const modifiers = [
+    /**
+     * We are setting the position to `fixed` in the first effect to prevent scroll jumps in case of the content
+     * with managed focus. Modifier sets the position to `fixed` before all other modifier effects. Another part of
+     * a patch modifies ".forceUpdate()" directly after a Popper will be created.
+     */
+    {
+      name: 'positionStyleFix',
+      enabled: true,
+      phase: 'afterWrite',
+      effect: ({
+        state,
+        instance
+      }) => {
+        // ".isFirstRun" is a part of our patch, on a first evaluation it will "undefined"
+        // should be disabled for subsequent runs as it breaks positioning for them
+        if (instance.isFirstRun !== false) {
+          popperOriginalPositionRef.current = state.elements.popper.style.position;
+          state.elements.popper.style.position = 'fixed';
         }
-    });
-    const offsetModifier = React.useMemo(() => offset
-        ? {
-            name: 'offset',
-            options: { offset: isRtl ? applyRtlToOffset(offset) : offset },
+
+        return () => undefined;
+      },
+      requires: []
+    }, {
+      name: 'flip',
+      options: {
+        flipVariations: true
+      }
+    },
+    /**
+     * pinned disables the flip modifier by setting flip.enabled to false; this
+     * disables automatic repositioning of the popper box; it will always be placed according to
+     * the values of `align` and `position` props, regardless of the size of the component, the
+     * reference element or the viewport.
+     */
+    pinned && {
+      name: 'flip',
+      enabled: false
+    },
+    /**
+     * When the popper box is placed in the context of a scrollable element, we need to set
+     * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent'
+     * (default is 'viewport') so that the popper box will stick with the targetRef when we
+     * scroll targetRef out of the viewport.
+     */
+    hasScrollableElement && {
+      name: 'flip',
+      options: {
+        boundary: 'clippingParents'
+      }
+    }, hasScrollableElement && {
+      name: 'preventOverflow',
+      options: {
+        boundary: 'clippingParents'
+      }
+    }, offsetModifier,
+    /**
+     * This modifier is necessary to retain behaviour from popper v1 where untethered poppers are allowed by
+     * default. i.e. popper is still rendered fully in the viewport even if anchor element is no longer in the
+     * viewport.
+     */
+    unstable_disableTether && {
+      name: 'preventOverflow',
+      options: {
+        altAxis: unstable_disableTether === 'all',
+        tether: false
+      }
+    }, flipBoundary && {
+      name: 'flip',
+      options: {
+        altBoundary: true,
+        boundary: getBoundary(container, flipBoundary)
+      }
+    }, overflowBoundary && {
+      name: 'preventOverflow',
+      options: {
+        altBoundary: true,
+        boundary: getBoundary(container, overflowBoundary)
+      }
+    }, {
+      name: 'onUpdate',
+      enabled: true,
+      phase: 'afterWrite',
+      fn: handleStateUpdate
+    }, {
+      // Similar code as popper-maxsize-modifier: https://github.com/atomiks/popper.js/blob/master/src/modifiers/maxSize.js
+      // popper-maxsize-modifier only calculates the max sizes.
+      // This modifier can apply max sizes always, or apply the max sizes only when overflow is detected
+      name: 'applyMaxSize',
+      enabled: !!autoSize,
+      phase: 'beforeWrite',
+      requiresIfExists: ['offset', 'preventOverflow', 'flip'],
+      options: {
+        altBoundary: true,
+        boundary: getBoundary(container, overflowBoundary)
+      },
+
+      fn({
+        state,
+        options: modifierOptions
+      }) {
+        const overflow = PopperJs.detectOverflow(state, modifierOptions);
+        const {
+          x,
+          y
+        } = state.modifiersData.preventOverflow || {
+          x: 0,
+          y: 0
+        };
+        const {
+          width,
+          height
+        } = state.rects.popper;
+        const basePlacement = getBasePlacement(state.placement);
+        const widthProp = basePlacement === 'left' ? 'left' : 'right';
+        const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
+        const applyMaxWidth = autoSize === 'always' || autoSize === 'width-always' || overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width');
+        const applyMaxHeight = autoSize === 'always' || autoSize === 'height-always' || overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height');
+
+        if (applyMaxWidth) {
+          state.styles.popper.maxWidth = `${width - overflow[widthProp] - x}px`;
         }
-        : null, [offset, isRtl]);
-    return React.useCallback((target, container, arrow) => {
-        var _a;
-        const scrollParentElement = getScrollParent(container);
-        const hasScrollableElement = scrollParentElement
-            ? scrollParentElement !== ((_a = scrollParentElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.body)
-            : false;
-        const modifiers = [
-            /**
-             * We are setting the position to `fixed` in the first effect to prevent scroll jumps in case of the content
-             * with managed focus. Modifier sets the position to `fixed` before all other modifier effects. Another part of
-             * a patch modifies ".forceUpdate()" directly after a Popper will be created.
-             */
-            {
-                name: 'positionStyleFix',
-                enabled: true,
-                phase: 'afterWrite',
-                effect: ({ state, instance }) => {
-                    // ".isFirstRun" is a part of our patch, on a first evaluation it will "undefined"
-                    // should be disabled for subsequent runs as it breaks positioning for them
-                    if (instance.isFirstRun !== false) {
-                        popperOriginalPositionRef.current = state.elements.popper.style.position;
-                        state.elements.popper.style.position = 'fixed';
-                    }
-                    return () => undefined;
-                },
-                requires: [],
-            },
-            { name: 'flip', options: { flipVariations: true } },
-            /**
-             * pinned disables the flip modifier by setting flip.enabled to false; this
-             * disables automatic repositioning of the popper box; it will always be placed according to
-             * the values of `align` and `position` props, regardless of the size of the component, the
-             * reference element or the viewport.
-             */
-            pinned && { name: 'flip', enabled: false },
-            /**
-             * When the popper box is placed in the context of a scrollable element, we need to set
-             * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent'
-             * (default is 'viewport') so that the popper box will stick with the targetRef when we
-             * scroll targetRef out of the viewport.
-             */
-            hasScrollableElement && { name: 'flip', options: { boundary: 'clippingParents' } },
-            hasScrollableElement && { name: 'preventOverflow', options: { boundary: 'clippingParents' } },
-            offsetModifier,
-            /**
-             * This modifier is necessary to retain behaviour from popper v1 where untethered poppers are allowed by
-             * default. i.e. popper is still rendered fully in the viewport even if anchor element is no longer in the
-             * viewport.
-             */
-            unstable_disableTether && {
-                name: 'preventOverflow',
-                options: { altAxis: unstable_disableTether === 'all', tether: false },
-            },
-            flipBoundary && {
-                name: 'flip',
-                options: {
-                    altBoundary: true,
-                    boundary: getBoundary(container, flipBoundary),
-                },
-            },
-            overflowBoundary && {
-                name: 'preventOverflow',
-                options: {
-                    altBoundary: true,
-                    boundary: getBoundary(container, overflowBoundary),
-                },
-            },
-            {
-                name: 'onUpdate',
-                enabled: true,
-                phase: 'afterWrite',
-                fn: handleStateUpdate,
-            },
-            {
-                // Similar code as popper-maxsize-modifier: https://github.com/atomiks/popper.js/blob/master/src/modifiers/maxSize.js
-                // popper-maxsize-modifier only calculates the max sizes.
-                // This modifier can apply max sizes always, or apply the max sizes only when overflow is detected
-                name: 'applyMaxSize',
-                enabled: !!autoSize,
-                phase: 'beforeWrite',
-                requiresIfExists: ['offset', 'preventOverflow', 'flip'],
-                options: {
-                    altBoundary: true,
-                    boundary: getBoundary(container, overflowBoundary),
-                },
-                fn({ state, options: modifierOptions }) {
-                    const overflow = PopperJs.detectOverflow(state, modifierOptions);
-                    const { x, y } = state.modifiersData.preventOverflow || { x: 0, y: 0 };
-                    const { width, height } = state.rects.popper;
-                    const basePlacement = getBasePlacement(state.placement);
-                    const widthProp = basePlacement === 'left' ? 'left' : 'right';
-                    const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
-                    const applyMaxWidth = autoSize === 'always' ||
-                        autoSize === 'width-always' ||
-                        (overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width'));
-                    const applyMaxHeight = autoSize === 'always' ||
-                        autoSize === 'height-always' ||
-                        (overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height'));
-                    if (applyMaxWidth) {
-                        state.styles.popper.maxWidth = `${width - overflow[widthProp] - x}px`;
-                    }
-                    if (applyMaxHeight) {
-                        state.styles.popper.maxHeight = `${height - overflow[heightProp] - y}px`;
-                    }
-                },
-            },
-            /**
-             * This modifier is necessary in order to render the pointer. Refs are resolved in effects, so it can't be
-             * placed under computed modifiers. Deep merge is not required as this modifier has only these properties.
-             */
-            {
-                name: 'arrow',
-                enabled: !!arrow,
-                options: { element: arrow, padding: arrowPadding },
-            },
-            /**
-             * Modifies popper offsets to cover the reference rect, but still keep edge alignment
-             */
-            {
-                name: 'coverTarget',
-                enabled: !!coverTarget,
-                phase: 'main',
-                requiresIfExists: ['offset', 'preventOverflow', 'flip'],
-                fn({ state }) {
-                    const basePlacement = getBasePlacement(state.placement);
-                    switch (basePlacement) {
-                        case 'bottom':
-                            state.modifiersData.popperOffsets.y -= state.rects.reference.height;
-                            break;
-                        case 'top':
-                            state.modifiersData.popperOffsets.y += state.rects.reference.height;
-                            break;
-                        case 'left':
-                            state.modifiersData.popperOffsets.x += state.rects.reference.width;
-                            break;
-                        case 'right':
-                            state.modifiersData.popperOffsets.x -= state.rects.reference.width;
-                            break;
-                    }
-                },
-            },
-        ].filter(Boolean); // filter boolean conditional spreading values
-        const popperOptions = {
-            modifiers,
-            placement,
-            strategy,
-            onFirstUpdate: state => handleStateUpdate({ state }),
-        };
-        return popperOptions;
-    }, [
-        arrowPadding,
-        autoSize,
-        coverTarget,
-        flipBoundary,
-        offsetModifier,
-        overflowBoundary,
-        placement,
-        strategy,
-        unstable_disableTether,
-        pinned,
-        // These can be skipped from deps as they will not ever change
-        handleStateUpdate,
-        popperOriginalPositionRef,
-    ]);
+
+        if (applyMaxHeight) {
+          state.styles.popper.maxHeight = `${height - overflow[heightProp] - y}px`;
+        }
+      }
+
+    },
+    /**
+     * This modifier is necessary in order to render the pointer. Refs are resolved in effects, so it can't be
+     * placed under computed modifiers. Deep merge is not required as this modifier has only these properties.
+     */
+    {
+      name: 'arrow',
+      enabled: !!arrow,
+      options: {
+        element: arrow,
+        padding: arrowPadding
+      }
+    },
+    /**
+     * Modifies popper offsets to cover the reference rect, but still keep edge alignment
+     */
+    {
+      name: 'coverTarget',
+      enabled: !!coverTarget,
+      phase: 'main',
+      requiresIfExists: ['offset', 'preventOverflow', 'flip'],
+
+      fn({
+        state
+      }) {
+        const basePlacement = getBasePlacement(state.placement);
+
+        switch (basePlacement) {
+          case 'bottom':
+            state.modifiersData.popperOffsets.y -= state.rects.reference.height;
+            break;
+
+          case 'top':
+            state.modifiersData.popperOffsets.y += state.rects.reference.height;
+            break;
+
+          case 'left':
+            state.modifiersData.popperOffsets.x += state.rects.reference.width;
+            break;
+
+          case 'right':
+            state.modifiersData.popperOffsets.x -= state.rects.reference.width;
+            break;
+        }
+      }
+
+    }].filter(Boolean); // filter boolean conditional spreading values
+
+    const popperOptions = {
+      modifiers,
+      placement,
+      strategy,
+      onFirstUpdate: state => handleStateUpdate({
+        state
+      })
+    };
+    return popperOptions;
+  }, [arrowPadding, autoSize, coverTarget, flipBoundary, offsetModifier, overflowBoundary, placement, strategy, unstable_disableTether, pinned, // These can be skipped from deps as they will not ever change
+  handleStateUpdate, popperOriginalPositionRef]);
 }
@@ -228,126 +272,132 @@ /**
  */
+
+
 export function usePopper(options = {}) {
-    const { enabled = true } = options;
-    const isFirstMount = useFirstMount();
-    const popperOriginalPositionRef = React.useRef('absolute');
-    const resolvePopperOptions = usePopperOptions(options, popperOriginalPositionRef);
-    const popperInstanceRef = React.useRef(null);
-    const handlePopperUpdate = useEventCallback(() => {
-        var _a;
-        (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
-        popperInstanceRef.current = null;
-        const { target = targetRef.current } = options;
-        let popperInstance = null;
-        if (canUseDOM() && enabled) {
-            if (target && containerRef.current) {
-                popperInstance = PopperJs.createPopper(target, containerRef.current, resolvePopperOptions(target, containerRef.current, arrowRef.current));
-            }
+  const {
+    enabled = true
+  } = options;
+  const isFirstMount = useFirstMount();
+  const popperOriginalPositionRef = React.useRef('absolute');
+  const resolvePopperOptions = usePopperOptions(options, popperOriginalPositionRef);
+  const popperInstanceRef = React.useRef(null);
+  const handlePopperUpdate = useEventCallback(() => {
+    var _a;
+
+    (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+    popperInstanceRef.current = null;
+    const {
+      target = targetRef.current
+    } = options;
+    let popperInstance = null;
+
+    if (canUseDOM() && enabled) {
+      if (target && containerRef.current) {
+        popperInstance = PopperJs.createPopper(target, containerRef.current, resolvePopperOptions(target, containerRef.current, arrowRef.current));
+      }
+    }
+
+    if (popperInstance) {
+      /**
+       * The patch updates `.forceUpdate()` Popper function which restores the original position before the first
+       * forceUpdate() call. See also "positionStyleFix" modifier in usePopperOptions().
+       */
+      const originalForceUpdate = popperInstance.forceUpdate;
+      popperInstance.isFirstRun = true;
+
+      popperInstance.forceUpdate = () => {
+        if (popperInstance === null || popperInstance === void 0 ? void 0 : popperInstance.isFirstRun) {
+          popperInstance.state.elements.popper.style.position = popperOriginalPositionRef.current;
+          popperInstance.isFirstRun = false;
         }
-        if (popperInstance) {
-            /**
-             * The patch updates `.forceUpdate()` Popper function which restores the original position before the first
-             * forceUpdate() call. See also "positionStyleFix" modifier in usePopperOptions().
-             */
-            const originalForceUpdate = popperInstance.forceUpdate;
-            popperInstance.isFirstRun = true;
-            popperInstance.forceUpdate = () => {
-                if (popperInstance === null || popperInstance === void 0 ? void 0 : popperInstance.isFirstRun) {
-                    popperInstance.state.elements.popper.style.position = popperOriginalPositionRef.current;
-                    popperInstance.isFirstRun = false;
-                }
-                originalForceUpdate();
-            };
+
+        originalForceUpdate();
+      };
+    }
+
+    popperInstanceRef.current = popperInstance;
+  }); // Refs are managed by useCallbackRef() to handle ref updates scenarios.
+  //
+  // The first scenario are updates for a targetRef, we can handle it properly only via callback refs, but it causes
+  // re-renders (we would like to avoid them).
+  //
+  // The second problem is related to refs resolution on React's layer: refs are resolved in the same order as effects
+  // that causes an issue when you have a container inside a target, for example: a menu in ChatMessage.
+  //
+  // function ChatMessage(props) {
+  //   <div className="message" ref={targetRef}> // 3) ref will be resolved only now, but it's too late already
+  //     <Popper target={targetRef}> // 2) create a popper instance
+  //       <div className="menu" /> // 1) capture ref from this element
+  //     </Popper>
+  //   </div>
+  // }
+  //
+  // Check a demo on CodeSandbox: https://codesandbox.io/s/popper-refs-emy60.
+  //
+  // This again can be solved with callback refs. It's not a huge issue as with hooks we are moving popper's creation
+  // to ChatMessage itself, however, without `useCallback()` refs it's still a Pandora box.
+
+  const targetRef = useCallbackRef(null, handlePopperUpdate, true);
+  const containerRef = useCallbackRef(null, handlePopperUpdate, true);
+  const arrowRef = useCallbackRef(null, handlePopperUpdate, true);
+  React.useImperativeHandle(options.popperRef, () => ({
+    updatePosition: () => {
+      var _a;
+
+      (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.update();
+    }
+  }), []);
+  useIsomorphicLayoutEffect(() => {
+    handlePopperUpdate();
+    return () => {
+      var _a;
+
+      (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+      popperInstanceRef.current = null;
+    };
+  }, [handlePopperUpdate, options.enabled, options.target]);
+  useIsomorphicLayoutEffect(() => {
+    var _a;
+
+    if (!isFirstMount) {
+      (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(resolvePopperOptions(options.target || targetRef.current, containerRef.current, arrowRef.current));
+    }
+  }, // Missing deps:
+  // options.target - The useIsomorphicLayoutEffect before this will create a new popper instance if target changes
+  // isFirstMount - Should never change after mount
+  // arrowRef, containerRef, targetRef - Stable between renders
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [resolvePopperOptions]);
+
+  if (process.env.NODE_ENV !== 'production') {
+    // This checked should run only in development mode
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      var _a;
+
+      if (containerRef.current) {
+        const contentNode = containerRef.current;
+        const treeWalker = (_a = contentNode.ownerDocument) === null || _a === void 0 ? void 0 : _a.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {
+          acceptNode: hasAutofocusFilter
+        });
+
+        while (treeWalker === null || treeWalker === void 0 ? void 0 : treeWalker.nextNode()) {
+          const node = treeWalker.currentNode; // eslint-disable-next-line no-console
+
+          console.warn('<Popper>:', node); // eslint-disable-next-line no-console
+
+          console.warn(['<Popper>: ^ this node contains "autoFocus" prop on a React element. This can break the initial', 'positioning of an element and cause a window jump effect. This issue occurs because React polyfills', '"autoFocus" behavior to solve inconsistencies between different browsers:', 'https://github.com/facebook/react/issues/11851#issuecomment-351787078', '\n', 'However, ".focus()" in this case occurs before any other React effects will be executed', '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really', 'want to use "autoFocus" please add "position: fixed" to styles of the element that is wrapped by', '"Popper".', `In general, it's not recommended to use "autoFocus" as it may break accessibility aspects:`, 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md', '\n', 'We suggest to use the "trapFocus" prop on Fluent components or a catch "ref" and then use', '"ref.current.focus" in React.useEffect():', 'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element'].join(' '));
         }
-        popperInstanceRef.current = popperInstance;
-    });
-    // Refs are managed by useCallbackRef() to handle ref updates scenarios.
-    //
-    // The first scenario are updates for a targetRef, we can handle it properly only via callback refs, but it causes
-    // re-renders (we would like to avoid them).
-    //
-    // The second problem is related to refs resolution on React's layer: refs are resolved in the same order as effects
-    // that causes an issue when you have a container inside a target, for example: a menu in ChatMessage.
-    //
-    // function ChatMessage(props) {
-    //   <div className="message" ref={targetRef}> // 3) ref will be resolved only now, but it's too late already
-    //     <Popper target={targetRef}> // 2) create a popper instance
-    //       <div className="menu" /> // 1) capture ref from this element
-    //     </Popper>
-    //   </div>
-    // }
-    //
-    // Check a demo on CodeSandbox: https://codesandbox.io/s/popper-refs-emy60.
-    //
-    // This again can be solved with callback refs. It's not a huge issue as with hooks we are moving popper's creation
-    // to ChatMessage itself, however, without `useCallback()` refs it's still a Pandora box.
-    const targetRef = useCallbackRef(null, handlePopperUpdate, true);
-    const containerRef = useCallbackRef(null, handlePopperUpdate, true);
-    const arrowRef = useCallbackRef(null, handlePopperUpdate, true);
-    React.useImperativeHandle(options.popperRef, () => ({
-        updatePosition: () => {
-            var _a;
-            (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.update();
-        },
-    }), []);
-    useIsomorphicLayoutEffect(() => {
-        handlePopperUpdate();
-        return () => {
-            var _a;
-            (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
-            popperInstanceRef.current = null;
-        };
-    }, [handlePopperUpdate, options.enabled, options.target]);
-    useIsomorphicLayoutEffect(() => {
-        var _a;
-        if (!isFirstMount) {
-            (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(resolvePopperOptions(options.target || targetRef.current, containerRef.current, arrowRef.current));
-        }
-    }, 
-    // Missing deps:
-    // options.target - The useIsomorphicLayoutEffect before this will create a new popper instance if target changes
-    // isFirstMount - Should never change after mount
-    // arrowRef, containerRef, targetRef - Stable between renders
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [resolvePopperOptions]);
-    if (process.env.NODE_ENV !== 'production') {
-        // This checked should run only in development mode
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        React.useEffect(() => {
-            var _a;
-            if (containerRef.current) {
-                const contentNode = containerRef.current;
-                const treeWalker = (_a = contentNode.ownerDocument) === null || _a === void 0 ? void 0 : _a.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {
-                    acceptNode: hasAutofocusFilter,
-                });
-                while (treeWalker === null || treeWalker === void 0 ? void 0 : treeWalker.nextNode()) {
-                    const node = treeWalker.currentNode;
-                    // eslint-disable-next-line no-console
-                    console.warn('<Popper>:', node);
-                    // eslint-disable-next-line no-console
-                    console.warn([
-                        '<Popper>: ^ this node contains "autoFocus" prop on a React element. This can break the initial',
-                        'positioning of an element and cause a window jump effect. This issue occurs because React polyfills',
-                        '"autoFocus" behavior to solve inconsistencies between different browsers:',
-                        'https://github.com/facebook/react/issues/11851#issuecomment-351787078',
-                        '\n',
-                        'However, ".focus()" in this case occurs before any other React effects will be executed',
-                        '(React.useEffect(), componentDidMount(), etc.) and we can not prevent this behavior. If you really',
-                        'want to use "autoFocus" please add "position: fixed" to styles of the element that is wrapped by',
-                        '"Popper".',
-                        `In general, it's not recommended to use "autoFocus" as it may break accessibility aspects:`,
-                        'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md',
-                        '\n',
-                        'We suggest to use the "trapFocus" prop on Fluent components or a catch "ref" and then use',
-                        '"ref.current.focus" in React.useEffect():',
-                        'https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element',
-                    ].join(' '));
-                }
-            }
-            // We run this check once, no need to add deps here
-            // TODO: Should be rework to handle options.enabled and contentRef updates
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, []);
-    }
-    return { targetRef, containerRef, arrowRef };
+      } // We run this check once, no need to add deps here
+      // TODO: Should be rework to handle options.enabled and contentRef updates
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    }, []);
+  }
+
+  return {
+    targetRef,
+    containerRef,
+    arrowRef
+  };
 }
 //# sourceMappingURL=usePopper.js.map

lib/usePopperMouseTarget.js

@@ -11,25 +11,31 @@ import * as React from 'react';
  */
-export const usePopperMouseTarget = (initialState) => {
-    const [virtualElement, setVirtualElement] = React.useState(initialState);
-    const setVirtualMouseTarget = (event) => {
-        if (event === undefined || event === null) {
-            setVirtualElement(undefined);
-            return;
-        }
-        let mouseevent;
-        if (!(event instanceof MouseEvent)) {
-            mouseevent = event.nativeEvent;
-        }
-        else {
-            mouseevent = event;
-        }
-        if (!(mouseevent instanceof MouseEvent) && process.env.NODE_ENV !== 'production') {
-            // eslint-disable-next-line no-console
-            console.error('usePopperMouseTarget should only be used with MouseEvent');
-        }
-        const contextTarget = createVirtualElementFromClick(mouseevent);
-        setVirtualElement(contextTarget);
-    };
-    return [virtualElement, setVirtualMouseTarget];
+
+export const usePopperMouseTarget = initialState => {
+  const [virtualElement, setVirtualElement] = React.useState(initialState);
+
+  const setVirtualMouseTarget = event => {
+    if (event === undefined || event === null) {
+      setVirtualElement(undefined);
+      return;
+    }
+
+    let mouseevent;
+
+    if (!(event instanceof MouseEvent)) {
+      mouseevent = event.nativeEvent;
+    } else {
+      mouseevent = event;
+    }
+
+    if (!(mouseevent instanceof MouseEvent) && process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error('usePopperMouseTarget should only be used with MouseEvent');
+    }
+
+    const contextTarget = createVirtualElementFromClick(mouseevent);
+    setVirtualElement(contextTarget);
+  };
+
+  return [virtualElement, setVirtualMouseTarget];
 };
 //# sourceMappingURL=usePopperMouseTarget.js.map

lib/utils/getBasePlacement.js

@@ -8,4 +8,4 @@ /**
 export function getBasePlacement(placement) {
-    return placement.split('-')[0];
+  return placement.split('-')[0];
 }
 //# sourceMappingURL=getBasePlacement.js.map

lib/utils/getBoundary.js

@@ -5,15 +5,20 @@ import { getScrollParent } from './getScrollParent';
  */
+
 export function getBoundary(element, boundary) {
-    if (boundary === 'window') {
-        return element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
+  if (boundary === 'window') {
+    return element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
+  }
+
+  if (boundary === 'scrollParent') {
+    let boundariesNode = getScrollParent(element);
+
+    if (boundariesNode.nodeName === 'BODY') {
+      boundariesNode = element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
     }
-    if (boundary === 'scrollParent') {
-        let boundariesNode = getScrollParent(element);
-        if (boundariesNode.nodeName === 'BODY') {
-            boundariesNode = element === null || element === void 0 ? void 0 : element.ownerDocument.documentElement;
-        }
-        return boundariesNode;
-    }
-    return boundary;
+
+    return boundariesNode;
+  }
+
+  return boundary;
 }
 //# sourceMappingURL=getBoundary.js.map

lib/utils/getReactFiberFromNode.js

 var WorkTag;
+
 (function (WorkTag) {
-    WorkTag[WorkTag["FunctionComponent"] = 0] = "FunctionComponent";
-    WorkTag[WorkTag["ClassComponent"] = 1] = "ClassComponent";
-    WorkTag[WorkTag["IndeterminateComponent"] = 2] = "IndeterminateComponent";
-    WorkTag[WorkTag["HostRoot"] = 3] = "HostRoot";
-    WorkTag[WorkTag["HostPortal"] = 4] = "HostPortal";
-    WorkTag[WorkTag["HostComponent"] = 5] = "HostComponent";
-    WorkTag[WorkTag["HostText"] = 6] = "HostText";
-    WorkTag[WorkTag["Fragment"] = 7] = "Fragment";
-    WorkTag[WorkTag["Mode"] = 8] = "Mode";
-    WorkTag[WorkTag["ContextConsumer"] = 9] = "ContextConsumer";
-    WorkTag[WorkTag["ContextProvider"] = 10] = "ContextProvider";
-    WorkTag[WorkTag["ForwardRef"] = 11] = "ForwardRef";
-    WorkTag[WorkTag["Profiler"] = 12] = "Profiler";
-    WorkTag[WorkTag["SuspenseComponent"] = 13] = "SuspenseComponent";
-    WorkTag[WorkTag["MemoComponent"] = 14] = "MemoComponent";
-    WorkTag[WorkTag["SimpleMemoComponent"] = 15] = "SimpleMemoComponent";
-    WorkTag[WorkTag["LazyComponent"] = 16] = "LazyComponent";
-    WorkTag[WorkTag["IncompleteClassComponent"] = 17] = "IncompleteClassComponent";
-    WorkTag[WorkTag["DehydratedFragment"] = 18] = "DehydratedFragment";
-    WorkTag[WorkTag["SuspenseListComponent"] = 19] = "SuspenseListComponent";
-    WorkTag[WorkTag["FundamentalComponent"] = 20] = "FundamentalComponent";
-    WorkTag[WorkTag["ScopeComponent"] = 21] = "ScopeComponent";
+  WorkTag[WorkTag["FunctionComponent"] = 0] = "FunctionComponent";
+  WorkTag[WorkTag["ClassComponent"] = 1] = "ClassComponent";
+  WorkTag[WorkTag["IndeterminateComponent"] = 2] = "IndeterminateComponent";
+  WorkTag[WorkTag["HostRoot"] = 3] = "HostRoot";
+  WorkTag[WorkTag["HostPortal"] = 4] = "HostPortal";
+  WorkTag[WorkTag["HostComponent"] = 5] = "HostComponent";
+  WorkTag[WorkTag["HostText"] = 6] = "HostText";
+  WorkTag[WorkTag["Fragment"] = 7] = "Fragment";
+  WorkTag[WorkTag["Mode"] = 8] = "Mode";
+  WorkTag[WorkTag["ContextConsumer"] = 9] = "ContextConsumer";
+  WorkTag[WorkTag["ContextProvider"] = 10] = "ContextProvider";
+  WorkTag[WorkTag["ForwardRef"] = 11] = "ForwardRef";
+  WorkTag[WorkTag["Profiler"] = 12] = "Profiler";
+  WorkTag[WorkTag["SuspenseComponent"] = 13] = "SuspenseComponent";
+  WorkTag[WorkTag["MemoComponent"] = 14] = "MemoComponent";
+  WorkTag[WorkTag["SimpleMemoComponent"] = 15] = "SimpleMemoComponent";
+  WorkTag[WorkTag["LazyComponent"] = 16] = "LazyComponent";
+  WorkTag[WorkTag["IncompleteClassComponent"] = 17] = "IncompleteClassComponent";
+  WorkTag[WorkTag["DehydratedFragment"] = 18] = "DehydratedFragment";
+  WorkTag[WorkTag["SuspenseListComponent"] = 19] = "SuspenseListComponent";
+  WorkTag[WorkTag["FundamentalComponent"] = 20] = "FundamentalComponent";
+  WorkTag[WorkTag["ScopeComponent"] = 21] = "ScopeComponent";
 })(WorkTag || (WorkTag = {}));
+
 export function getReactFiberFromNode(elm) {
-    if (!elm) {
-        return null;
+  if (!elm) {
+    return null;
+  }
+
+  for (const k in elm) {
+    // React 16 uses "__reactInternalInstance$" prefix
+    // React 17 uses "__reactFiber$" prefix
+    // https://github.com/facebook/react/pull/18377
+    if (k.indexOf('__reactInternalInstance$') === 0 || k.indexOf('__reactFiber$') === 0) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      return elm[k];
     }
-    for (const k in elm) {
-        // React 16 uses "__reactInternalInstance$" prefix
-        // React 17 uses "__reactFiber$" prefix
-        // https://github.com/facebook/react/pull/18377
-        if (k.indexOf('__reactInternalInstance$') === 0 || k.indexOf('__reactFiber$') === 0) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            return elm[k];
-        }
-    }
-    throw new Error('getReactFiber(): Failed to find a React Fiber on a node');
+  }
+
+  throw new Error('getReactFiber(): Failed to find a React Fiber on a node');
 }
 //# sourceMappingURL=getReactFiberFromNode.js.map

lib/utils/getScrollParent.js

@@ -6,8 +6,9 @@ /**
  */
-export const getParentNode = (node) => {
-    if (node.nodeName === 'HTML') {
-        return node;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return node.parentNode || node.host;
+export const getParentNode = node => {
+  if (node.nodeName === 'HTML') {
+    return node;
+  } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+  return node.parentNode || node.host;
 };
@@ -19,9 +20,12 @@ /**
  */
-const getStyleComputedProperty = (node) => {
-    var _a;
-    if (node.nodeType !== 1) {
-        return {};
-    }
-    const window = (_a = node.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
-    return window.getComputedStyle(node, null);
+
+const getStyleComputedProperty = node => {
+  var _a;
+
+  if (node.nodeType !== 1) {
+    return {};
+  }
+
+  const window = (_a = node.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+  return window.getComputedStyle(node, null);
 };
@@ -33,22 +37,32 @@ /**
  */
-export const getScrollParent = (node) => {
-    // Return body, `getScroll` will take care to get the correct `scrollTop` from it
-    const parentNode = node && getParentNode(node);
-    // eslint-disable-next-line
-    if (!parentNode)
-        return document.body;
-    switch (parentNode.nodeName) {
-        case 'HTML':
-        case 'BODY':
-            return parentNode.ownerDocument.body;
-        case '#document':
-            return parentNode.body;
-    }
-    // If any of the overflow props is defined for the node then we return it as the parent
-    const { overflow, overflowX, overflowY } = getStyleComputedProperty(parentNode);
-    if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
-        return parentNode;
-    }
-    return getScrollParent(parentNode);
+
+
+export const getScrollParent = node => {
+  // Return body, `getScroll` will take care to get the correct `scrollTop` from it
+  const parentNode = node && getParentNode(node); // eslint-disable-next-line
+
+  if (!parentNode) return document.body;
+
+  switch (parentNode.nodeName) {
+    case 'HTML':
+    case 'BODY':
+      return parentNode.ownerDocument.body;
+
+    case '#document':
+      return parentNode.body;
+  } // If any of the overflow props is defined for the node then we return it as the parent
+
+
+  const {
+    overflow,
+    overflowX,
+    overflowY
+  } = getStyleComputedProperty(parentNode);
+
+  if (/(auto|scroll|overlay)/.test(overflow + overflowY + overflowX)) {
+    return parentNode;
+  }
+
+  return getScrollParent(parentNode);
 };
 //# sourceMappingURL=getScrollParent.js.map

lib/utils/mergeArrowOffset.js

@@ -10,29 +10,34 @@ /**
 export function mergeArrowOffset(userOffset, arrowHeight) {
-    let offsetWithArrow = userOffset;
-    if (!userOffset) {
-        return [0, arrowHeight];
-    }
-    if (Array.isArray(offsetWithArrow)) {
-        setArrowOffset(offsetWithArrow, arrowHeight);
-        return offsetWithArrow;
-    }
-    if (typeof offsetWithArrow === 'function') {
-        const userOffsetFn = offsetWithArrow;
-        offsetWithArrow = offsetParams => {
-            const offset = userOffsetFn(offsetParams);
-            setArrowOffset(offset, arrowHeight);
-            return offset;
-        };
-    }
-    // This should never happen
-    return [0, 0];
+  let offsetWithArrow = userOffset;
+
+  if (!userOffset) {
+    return [0, arrowHeight];
+  }
+
+  if (Array.isArray(offsetWithArrow)) {
+    setArrowOffset(offsetWithArrow, arrowHeight);
+    return offsetWithArrow;
+  }
+
+  if (typeof offsetWithArrow === 'function') {
+    const userOffsetFn = offsetWithArrow;
+
+    offsetWithArrow = offsetParams => {
+      const offset = userOffsetFn(offsetParams);
+      setArrowOffset(offset, arrowHeight);
+      return offset;
+    };
+  } // This should never happen
+
+
+  return [0, 0];
 }
+
 const setArrowOffset = (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=mergeArrowOffset.js.map

lib/utils/positioningHelper.d.ts

@@ -6,3 +6,3 @@ import * as PopperJs from '@popperjs/core';
  */
-export declare const getPlacement: (align?: "top" | "bottom" | "start" | "end" | "center" | undefined, position?: "above" | "below" | "before" | "after" | undefined, rtl?: boolean | undefined) => PopperJs.Placement;
+export declare const getPlacement: (align?: "bottom" | "top" | "center" | "start" | "end" | undefined, position?: "above" | "below" | "before" | "after" | undefined, rtl?: boolean | undefined) => PopperJs.Placement;
 export declare const applyRtlToOffset: (offset: Offset | undefined) => Offset | undefined;

lib/utils/positioningHelper.js

@@ -1,18 +0,20 @@
-const getPositionMap = (rtl) => ({
-    above: 'top',
-    below: 'bottom',
-    before: rtl ? 'right' : 'left',
-    after: rtl ? 'left' : 'right',
+const getPositionMap = rtl => ({
+  above: 'top',
+  below: 'bottom',
+  before: rtl ? 'right' : 'left',
+  after: rtl ? 'left' : 'right'
 });
-const getAlignmentMap = (rtl) => ({
-    start: rtl ? 'end' : 'start',
-    end: rtl ? 'start' : 'end',
-    top: 'start',
-    bottom: 'end',
-    center: '',
+
+const getAlignmentMap = rtl => ({
+  start: rtl ? 'end' : 'start',
+  end: rtl ? 'start' : 'end',
+  top: 'start',
+  bottom: 'end',
+  center: ''
 });
+
 const shouldAlignToCenter = (p, a) => {
-    const positionedVertically = p === 'above' || p === 'below';
-    const alignedVertically = a === 'top' || a === 'bottom';
-    return (positionedVertically && alignedVertically) || (!positionedVertically && !alignedVertically);
+  const positionedVertically = p === 'above' || p === 'below';
+  const alignedVertically = a === 'top' || a === 'bottom';
+  return positionedVertically && alignedVertically || !positionedVertically && !alignedVertically;
 };
@@ -22,21 +24,27 @@ /**
  */
+
+
 export const getPlacement = (align, position, rtl) => {
-    const alignment = shouldAlignToCenter(position, align) ? 'center' : align;
-    const computedPosition = position && getPositionMap(rtl)[position];
-    const computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];
-    if (computedPosition && computedAlignmnent) {
-        return `${computedPosition}-${computedAlignmnent}`;
-    }
-    return computedPosition || 'auto';
+  const alignment = shouldAlignToCenter(position, align) ? 'center' : align;
+  const computedPosition = position && getPositionMap(rtl)[position];
+  const computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];
+
+  if (computedPosition && computedAlignmnent) {
+    return `${computedPosition}-${computedAlignmnent}`;
+  }
+
+  return computedPosition || 'auto';
 };
-export const applyRtlToOffset = (offset) => {
-    if (typeof offset === 'undefined') {
-        return undefined;
-    }
-    if (Array.isArray(offset)) {
-        offset[0] = offset[0] * -1;
-        return offset;
-    }
-    return ((param) => applyRtlToOffset(offset(param)));
+export const applyRtlToOffset = offset => {
+  if (typeof offset === 'undefined') {
+    return undefined;
+  }
+
+  if (Array.isArray(offset)) {
+    offset[0] = offset[0] * -1;
+    return offset;
+  }
+
+  return param => applyRtlToOffset(offset(param));
 };
 //# sourceMappingURL=positioningHelper.js.map

lib/utils/resolvePositioningShorthand.js

 // Look up table for shorthand to avoid parsing strings
 const shorthandLookup = {
-    above: { position: 'above', align: 'center' },
-    'above-start': { position: 'above', align: 'start' },
-    'above-end': { position: 'above', align: 'end' },
-    below: { position: 'below', align: 'center' },
-    'below-start': { position: 'below', align: 'start' },
-    'below-end': { position: 'below', align: 'end' },
-    before: { position: 'before', align: 'center' },
-    'before-top': { position: 'before', align: 'top' },
-    'before-bottom': { position: 'before', align: 'bottom' },
-    after: { position: 'after', align: 'center' },
-    'after-top': { position: 'after', align: 'top' },
-    'after-bottom': { position: 'after', align: 'bottom' },
+  above: {
+    position: 'above',
+    align: 'center'
+  },
+  'above-start': {
+    position: 'above',
+    align: 'start'
+  },
+  'above-end': {
+    position: 'above',
+    align: 'end'
+  },
+  below: {
+    position: 'below',
+    align: 'center'
+  },
+  'below-start': {
+    position: 'below',
+    align: 'start'
+  },
+  'below-end': {
+    position: 'below',
+    align: 'end'
+  },
+  before: {
+    position: 'before',
+    align: 'center'
+  },
+  'before-top': {
+    position: 'before',
+    align: 'top'
+  },
+  'before-bottom': {
+    position: 'before',
+    align: 'bottom'
+  },
+  after: {
+    position: 'after',
+    align: 'center'
+  },
+  'after-top': {
+    position: 'after',
+    align: 'top'
+  },
+  'after-bottom': {
+    position: 'after',
+    align: 'bottom'
+  }
 };
 export function resolvePositioningShorthand(shorthand) {
-    if (shorthand === undefined || shorthand === null) {
-        return {};
-    }
-    if (typeof shorthand === 'string') {
-        return shorthandLookup[shorthand];
-    }
-    return shorthand;
+  if (shorthand === undefined || shorthand === null) {
+    return {};
+  }
+
+  if (typeof shorthand === 'string') {
+    return shorthandLookup[shorthand];
+  }
+
+  return shorthand;
 }
 //# sourceMappingURL=resolvePositioningShorthand.js.map

lib/utils/useCallbackRef.js

@@ -20,33 +20,39 @@ import * as React from 'react';
  */
+
 export function useCallbackRef(initialValue, callback, skipInitialResolve) {
-    const isFirst = React.useRef(true);
-    const [ref] = React.useState(() => ({
-        // value
-        value: initialValue,
-        // last callback
-        callback,
-        // "memoized" public interface
-        facade: {
-            get current() {
-                return ref.value;
-            },
-            set current(value) {
-                const last = ref.value;
-                if (last !== value) {
-                    ref.value = value;
-                    if (skipInitialResolve && isFirst.current) {
-                        return;
-                    }
-                    ref.callback(value, last);
-                }
-            },
-        },
-    }));
-    useIsomorphicLayoutEffect(() => {
-        isFirst.current = false;
-    }, []);
-    // update callback
-    ref.callback = callback;
-    return ref.facade;
+  const isFirst = React.useRef(true);
+  const [ref] = React.useState(() => ({
+    // value
+    value: initialValue,
+    // last callback
+    callback,
+    // "memoized" public interface
+    facade: {
+      get current() {
+        return ref.value;
+      },
+
+      set current(value) {
+        const last = ref.value;
+
+        if (last !== value) {
+          ref.value = value;
+
+          if (skipInitialResolve && isFirst.current) {
+            return;
+          }
+
+          ref.callback(value, last);
+        }
+      }
+
+    }
+  }));
+  useIsomorphicLayoutEffect(() => {
+    isFirst.current = false;
+  }, []); // update callback
+
+  ref.callback = callback;
+  return ref.facade;
 }
 //# sourceMappingURL=useCallbackRef.js.map

package.json

 {
   "name": "@fluentui/react-positioning",
-  "version": "0.0.0-nightly906d31cfa320211115.1",
+  "version": "0.0.0-nightly99adff5a9a20211125.1",
   "description": "A react wrapper around Popper.js for Fluent UI",
@@ -23,5 +23,4 @@ "main": "lib-commonjs/index.js",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-positioning/src && yarn docs",
-    "storybook": "start-storybook",
-    "start": "yarn storybook"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-positioning/src && yarn docs",
+    "type-check": "tsc -b tsconfig.json"
   },
@@ -34,7 +33,9 @@ "devDependencies": {
     "react": "16.8.6",
-    "react-dom": "16.8.6"
+    "react-dom": "16.8.6",
+    "@fluentui/babel-make-styles": "0.0.0-nightly99adff5a9a20211125.1"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "0.0.0-nightly906d31cfa320211115.1",
-    "@fluentui/react-utilities": "0.0.0-nightly906d31cfa320211115.1",
+    "@fluentui/react-make-styles": "0.0.0-nightly99adff5a9a20211125.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly99adff5a9a20211125.1",
+    "@fluentui/react-utilities": "0.0.0-nightly99adff5a9a20211125.1",
     "@popperjs/core": "~2.4.3",
@@ -41,0 +42,0 @@ "tslib": "^2.1.0"

No alert changes

Improved metrics

Total package byte prevSize

231680

increased by4.07%

Number of package files

97

increased by6.59%

Lines of code

3969

increased by10.71%

Worsened metrics

Dependency count

9

increased by12.5%

Dev dependency count

7

increased by16.67%

Dependency changes

• + Added@fluentui/react-make-styles@0.0.0-nightly99adff5a9a20211125.1

• + Added@babel/runtime@7.26.7(transitive)

• + Added@emotion/hash@0.8.0(transitive)

• + Added@fluentui/make-styles@0.0.0-nightly99adff5a9a20211125.1(transitive)

• + Added@fluentui/react-make-styles@0.0.0-nightly99adff5a9a20211125.1(transitive)

• + Added@fluentui/react-shared-contexts@0.0.0-nightly99adff5a9a20211125.1(transitive)

• + Added@fluentui/react-theme@0.0.0-nightly99adff5a9a20211125.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightly99adff5a9a20211125.1(transitive)

• + Addedcsstype@2.6.21(transitive)

• + Addedinline-style-expand-shorthand@1.6.0(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedrtl-css-js@1.16.1(transitive)

• + Addedstylis@4.3.6(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly906d31cfa320211115.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly906d31cfa320211115.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly906d31cfa320211115.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly906d31cfa320211115.1(transitive)

• Updated@fluentui/react-shared-contexts@0.0.0-nightly99adff5a9a20211125.1

• Updated@fluentui/react-utilities@0.0.0-nightly99adff5a9a20211125.1