@fluentui/react-positioning - npm Package Compare versions -...

lib-commonjs/createArrowStyles.d.ts

lib-commonjs/createArrowStyles.js

lib-commonjs/createArrowStyles.js.map

lib/createArrowStyles.d.ts

lib/createArrowStyles.js

lib/createArrowStyles.js.map

122

CHANGELOG.json

		@@ -5,5 +5,5 @@ {
		{
		"date": "Fri, 29 Oct 2021 06:39:52 GMT",
		"tag": "@fluentui/react-positioning_v0.0.0-nightly0e0cf06c3420211029.1",
		"version": "0.0.0-nightly0e0cf06c3420211029.1",
		"date": "Thu, 02 Dec 2021 04:16:16 GMT",
		"tag": "@fluentui/react-positioning_v0.0.0-nightly554221a5aa20211202.1",
		"version": "0.0.0-nightly554221a5aa20211202.1",
		"comments": {
		@@ -14,10 +14,22 @@ "prerelease": [
		"package": "@fluentui/react-positioning",
		"commit": "3535f78f7af73f13f2c1e7470293fb5e592866de",
		"commit": "09da80c5c669ccd56bbfd16c53fd632f4579aa3b",
		"comment": "Release nightly v9"
		},
		{
		"author": "olfedias@microsoft.com",
		"package": "@fluentui/react-positioning",
		"commit": "a76afe26daad901ff5458ffdda7e66e600d5bcac",
		"comment": "use new types from makeStyles core"
		},
		{
		"author": "olfedias@microsoft.com",
		"package": "@fluentui/react-positioning",
		"commit": "967d6b74cf0507685a24e0cfaa8c7b9d52a351e1",
		"comment": "update styles to not use CSS shorthands"
		},
		{
		"author": "beachball",
		"package": "@fluentui/react-positioning",
		"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly0e0cf06c3420211029.1",
		"commit": "3535f78f7af73f13f2c1e7470293fb5e592866de"
		"comment": "Bump @fluentui/react-make-styles to v0.0.0-nightly554221a5aa20211202.1",
		"commit": "09da80c5c669ccd56bbfd16c53fd632f4579aa3b"
		},
		@@ -27,4 +39,16 @@ {
		"package": "@fluentui/react-positioning",
		"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly0e0cf06c3420211029.1",
		"commit": "3535f78f7af73f13f2c1e7470293fb5e592866de"
		"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly554221a5aa20211202.1",
		"commit": "09da80c5c669ccd56bbfd16c53fd632f4579aa3b"
		},
		{
		"author": "beachball",
		"package": "@fluentui/react-positioning",
		"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly554221a5aa20211202.1",
		"commit": "09da80c5c669ccd56bbfd16c53fd632f4579aa3b"
		},
		{
		"author": "beachball",
		"package": "@fluentui/react-positioning",
		"comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightly554221a5aa20211202.1",
		"commit": "09da80c5c669ccd56bbfd16c53fd632f4579aa3b"
		}
		@@ -35,2 +59,84 @@ ]
		{
		"date": "Thu, 25 Nov 2021 08:34:15 GMT",
		"tag": "@fluentui/react-positioning_v9.0.0-beta.4",
		"version": "9.0.0-beta.4",
		"comments": {
		"none": [
		{
		"author": "lingfangao@hotmail.com",
		"package": "@fluentui/react-positioning",
		"commit": "718e63006d8d07d24efab9c32942041963d78dc7",
		"comment": "Migrate package to use solution style ts-configs"
		}
		],
		"prerelease": [
		{
		"author": "lingfangao@hotmail.com",
		"package": "@fluentui/react-positioning",
		"commit": "58db204f28af1d68df7260ff580cf91f0adcfb66",
		"comment": "Add utility function to create styles for an arrow element"
		},
		{
		"author": "beachball",
		"package": "@fluentui/react-positioning",
		"comment": "Bump @fluentui/react-make-styles to v9.0.0-beta.4",
		"commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
		},
		{
		"author": "beachball",
		"package": "@fluentui/react-positioning",
		"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-beta.4",
		"commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
		},
		{
		"author": "beachball",
		"package": "@fluentui/react-positioning",
		"comment": "Bump @fluentui/react-utilities to v9.0.0-beta.4",
		"commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
		},
		{
		"author": "beachball",
		"package": "@fluentui/react-positioning",
		"comment": "Bump @fluentui/babel-make-styles to v9.0.0-beta.4",
		"commit": "48d236ac53a4950fabc3ddd52f91dac93ca0195b"
		}
		]
		}
		},
		{
		"date": "Fri, 12 Nov 2021 13:25:30 GMT",
		"tag": "@fluentui/react-positioning_v9.0.0-beta.3",
		"version": "9.0.0-beta.3",
		"comments": {
		"prerelease": [
		{
		"author": "gcox@microsoft.com",
		"package": "@fluentui/react-positioning",
		"commit": "c9bd5b5a02ae94a8239ce1b56cac2f0d0dbd3586",
		"comment": "Updated beta and RC components to ES2019"
		},
		{
		"author": "beachball",
		"package": "@fluentui/react-positioning",
		"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-beta.3",
		"commit": "742342e52c65066f779232e4e1302fedf0dd460d"
		},
		{
		"author": "beachball",
		"package": "@fluentui/react-positioning",
		"comment": "Bump @fluentui/react-utilities to v9.0.0-beta.3",
		"commit": "742342e52c65066f779232e4e1302fedf0dd460d"
		}
		],
		"none": [
		{
		"author": "lingfangao@hotmail.com",
		"package": "@fluentui/react-positioning",
		"commit": "00f70581480b536e723fb69edf0ae617beac4807",
		"comment": "Remove beta release tag"
		}
		]
		}
		},
		{
		"date": "Wed, 27 Oct 2021 12:14:21 GMT",
		@@ -37,0 +143,0 @@ "tag": "@fluentui/react-positioning_v9.0.0-beta.2",

42

CHANGELOG.md

		# Change Log - @fluentui/react-positioning

		This log was last generated on Fri, 29 Oct 2021 06:39:52 GMT and should not be manually modified.
		This log was last generated on Thu, 02 Dec 2021 04:16:16 GMT and should not be manually modified.

		<!-- Start content -->

		## [0.0.0-nightly0e0cf06c3420211029.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly0e0cf06c3420211029.1)
		## [0.0.0-nightly554221a5aa20211202.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly554221a5aa20211202.1)

		Fri, 29 Oct 2021 06:39:52 GMT
		[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.2..@fluentui/react-positioning_v0.0.0-nightly0e0cf06c3420211029.1)
		Thu, 02 Dec 2021 04:16:16 GMT
		[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.4..@fluentui/react-positioning_v0.0.0-nightly554221a5aa20211202.1)

		### Changes

		- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/3535f78f7af73f13f2c1e7470293fb5e592866de) by email not defined)
		- Bump @fluentui/react-shared-contexts to v0.0.0-nightly0e0cf06c3420211029.1 ([commit](https://github.com/microsoft/fluentui/commit/3535f78f7af73f13f2c1e7470293fb5e592866de) by beachball)
		- Bump @fluentui/react-utilities to v0.0.0-nightly0e0cf06c3420211029.1 ([commit](https://github.com/microsoft/fluentui/commit/3535f78f7af73f13f2c1e7470293fb5e592866de) by beachball)
		- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/09da80c5c669ccd56bbfd16c53fd632f4579aa3b) by email not defined)
		- use new types from makeStyles core ([PR #20786](https://github.com/microsoft/fluentui/pull/20786) by olfedias@microsoft.com)
		- update styles to not use CSS shorthands ([PR #20842](https://github.com/microsoft/fluentui/pull/20842) by olfedias@microsoft.com)
		- Bump @fluentui/react-make-styles to v0.0.0-nightly554221a5aa20211202.1 ([commit](https://github.com/microsoft/fluentui/commit/09da80c5c669ccd56bbfd16c53fd632f4579aa3b) by beachball)
		- Bump @fluentui/react-shared-contexts to v0.0.0-nightly554221a5aa20211202.1 ([commit](https://github.com/microsoft/fluentui/commit/09da80c5c669ccd56bbfd16c53fd632f4579aa3b) by beachball)
		- Bump @fluentui/react-utilities to v0.0.0-nightly554221a5aa20211202.1 ([commit](https://github.com/microsoft/fluentui/commit/09da80c5c669ccd56bbfd16c53fd632f4579aa3b) by beachball)
		- Bump @fluentui/babel-make-styles to v0.0.0-nightly554221a5aa20211202.1 ([commit](https://github.com/microsoft/fluentui/commit/09da80c5c669ccd56bbfd16c53fd632f4579aa3b) by beachball)

		## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.4)

		Thu, 25 Nov 2021 08:34:15 GMT
		[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.3..@fluentui/react-positioning_v9.0.0-beta.4)

		### Changes

		- Add utility function to create styles for an arrow element ([PR #20541](https://github.com/microsoft/fluentui/pull/20541) by lingfangao@hotmail.com)
		- Bump @fluentui/react-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
		- Bump @fluentui/react-shared-contexts to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
		- Bump @fluentui/react-utilities to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)
		- Bump @fluentui/babel-make-styles to v9.0.0-beta.4 ([PR #20762](https://github.com/microsoft/fluentui/pull/20762) by beachball)

		## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.3)

		Fri, 12 Nov 2021 13:25:30 GMT
		[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.2..@fluentui/react-positioning_v9.0.0-beta.3)

		### Changes

		- Updated beta and RC components to ES2019 ([PR #20405](https://github.com/microsoft/fluentui/pull/20405) by gcox@microsoft.com)
		- Bump @fluentui/react-shared-contexts to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)
		- Bump @fluentui/react-utilities to v9.0.0-beta.3 ([PR #20583](https://github.com/microsoft/fluentui/pull/20583) by beachball)

		## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-beta.2)
		@@ -19,0 +47,0 @@

28

dist/react-positioning.d.ts

		@@ -0,3 +1,5 @@
		import type { MakeStylesStyleRule } from '@fluentui/react-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.className = styles.arrowWithSize
		* state.arrowWithoutSize.className = mergeClasses(
		* 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

39

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) {
		var left = nativeEvent.clientX;
		var top = nativeEvent.clientY;
		var right = left + 1;
		var bottom = top + 1;
		function getBoundingClientRect() {
		return {
		left: left,
		top: top,
		right: right,
		bottom: 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: getBoundingClientRect,
		left,
		top,
		right,
		bottom,
		height: 1,
		width: 1
		};
		}

		return {
		getBoundingClientRect
		};
		}

		exports.createVirtualElementFromClick = createVirtualElementFromClick;
		//# sourceMappingURL=createVirtualElementFromClick.js.map

3

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';

34

lib-commonjs/index.js

		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.mergeArrowOffset = exports.resolvePositioningShorthand = void 0;
		var 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

5

lib-commonjs/types.js

		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });

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

701

lib-commonjs/usePopper.js

		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.usePopper = void 0;
		var react_utilities_1 = require("@fluentui/react-utilities");
		var react_shared_contexts_1 = require("@fluentui/react-shared-contexts");
		var index_1 = require("./utils/index");
		var PopperJs = require("@popperjs/core");
		var 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
		var 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,190 +50,226 @@ /**
		*/


		function usePopperOptions(options, popperOriginalPositionRef) {
		var arrowPadding = options.arrowPadding, autoSize = options.autoSize, coverTarget = options.coverTarget, flipBoundary = options.flipBoundary, offset = options.offset, onStateUpdate = options.onStateUpdate, overflowBoundary = options.overflowBoundary,
		const {
		arrowPadding,
		autoSize,
		coverTarget,
		flipBoundary,
		offset,
		onStateUpdate,
		overflowBoundary,
		// eslint-disable-next-line @typescript-eslint/naming-convention
		unstable_disableTether = options.unstable_disableTether, pinned = options.pinned;
		var isRtl = react_shared_contexts_1.useFluent().dir === 'rtl';
		var placement = index_1.getPlacement(options.align, options.position, isRtl);
		var strategy = options.positionFixed ? 'fixed' : 'absolute';
		var handleStateUpdate = react_utilities_1.useEventCallback(function (_a) {
		var state = _a.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';
		}
		});
		var offsetModifier = React.useMemo(function () {
		return offset
		? {
		name: 'offset',
		options: { offset: isRtl ? index_1.applyRtlToOffset(offset) : offset },
		}
		: null;
		}, [offset, isRtl]);
		return React.useCallback(function (target, container, arrow) {
		var _a;
		var scrollParentElement = index_1.getScrollParent(container);
		var hasScrollableElement = scrollParentElement
		? scrollParentElement !== ((_a = scrollParentElement.ownerDocument) === null \|\| _a === void 0 ? void 0 : _a.body)
		: false;
		var 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: function (_a) {
		var state = _a.state, instance = _a.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 function () { 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: function (_a) {
		var state = _a.state, modifierOptions = _a.options;
		var overflow = PopperJs.detectOverflow(state, modifierOptions);
		var _b = state.modifiersData.preventOverflow \|\| { x: 0, y: 0 }, x = _b.x, y = _b.y;
		var _c = state.rects.popper, width = _c.width, height = _c.height;
		var basePlacement = index_1.getBasePlacement(state.placement);
		var widthProp = basePlacement === 'left' ? 'left' : 'right';
		var heightProp = basePlacement === 'top' ? 'top' : 'bottom';
		var applyMaxWidth = autoSize === 'always' \|\|
		autoSize === 'width-always' \|\|
		(overflow[widthProp] > 0 && (autoSize === true \|\| autoSize === 'width'));
		var 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: function (_a) {
		var state = _a.state;
		var 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
		var popperOptions = {
		modifiers: modifiers,
		placement: placement,
		strategy: strategy,
		onFirstUpdate: function (state) { return handleStateUpdate({ state: state }); },

		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
		};
		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,
		]);
		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]);
		}
		@@ -237,128 +284,134 @@ /**
		*/
		function usePopper(options) {
		if (options === void 0) { options = {}; }
		var _a = options.enabled, enabled = _a === void 0 ? true : _a;
		var isFirstMount = react_utilities_1.useFirstMount();
		var popperOriginalPositionRef = React.useRef('absolute');
		var resolvePopperOptions = usePopperOptions(options, popperOriginalPositionRef);
		var popperInstanceRef = React.useRef(null);
		var handlePopperUpdate = react_utilities_1.useEventCallback(function () {
		var _a;
		(_a = popperInstanceRef.current) === null \|\| _a === void 0 ? void 0 : _a.destroy();
		popperInstanceRef.current = null;
		var _b = options.target, target = _b === void 0 ? targetRef.current : _b;
		var popperInstance = null;
		if (react_utilities_1.canUseDOM() && enabled) {
		if (target && containerRef.current) {
		popperInstance = PopperJs.createPopper(target, containerRef.current, resolvePopperOptions(target, containerRef.current, arrowRef.current));
		}


		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));
		}
		}

		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().
		*/
		var originalForceUpdate_1 = popperInstance.forceUpdate;
		popperInstance.isFirstRun = true;
		popperInstance.forceUpdate = function () {
		if (popperInstance === null \|\| popperInstance === void 0 ? void 0 : popperInstance.isFirstRun) {
		popperInstance.state.elements.popper.style.position = popperOriginalPositionRef.current;
		popperInstance.isFirstRun = false;
		}
		originalForceUpdate_1();
		};

		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.
		var targetRef = index_1.useCallbackRef(null, handlePopperUpdate, true);
		var containerRef = index_1.useCallbackRef(null, handlePopperUpdate, true);
		var arrowRef = index_1.useCallbackRef(null, handlePopperUpdate, true);
		React.useImperativeHandle(options.popperRef, function () { return ({
		updatePosition: function () {
		var _a;
		(_a = popperInstanceRef.current) === null \|\| _a === void 0 ? void 0 : _a.update();
		},
		}); }, []);
		react_utilities_1.useIsomorphicLayoutEffect(function () {
		handlePopperUpdate();
		return function () {
		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(function () {
		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(function () {
		var _a;
		if (containerRef.current) {
		var contentNode = containerRef.current;
		var 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()) {
		var 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: targetRef, containerRef: containerRef, arrowRef: 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

63

lib-commonjs/usePopperMouseTarget.js

		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.usePopperMouseTarget = void 0;
		var React = require("react");
		var 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.
		*/
		var usePopperMouseTarget = function (initialState) {
		var _a = React.useState(initialState), virtualElement = _a[0], setVirtualElement = _a[1];
		var setVirtualMouseTarget = function (event) {
		if (event === undefined \|\| event === null) {
		setVirtualElement(undefined);
		return;
		}
		var 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');
		}
		var 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

9

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

35

lib-commonjs/utils/getBoundary.js

		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.getBoundary = void 0;
		var 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') {
		var 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

1

lib-commonjs/utils/getReactFiberFromNode.d.ts

		@@ -1,2 +0,1 @@
		/// <reference types="custom-global" />
		import * as React from 'react';
		@@ -3,0 +2,0 @@ declare type ReactEventResponder<E, C> = {

80

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 (var 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

86

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 @@ /**
		*/
		var getParentNode = function (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 @@ /**
		*/
		var getStyleComputedProperty = function (node) {
		var _a;
		if (node.nodeType !== 1) {
		return {};
		}
		var 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 @@ /**
		*/
		var getScrollParent = function (node) {
		// Return body, `getScroll` will take care to get the correct `scrollTop` from it
		var 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
		var _a = getStyleComputedProperty(parentNode), overflow = _a.overflow, overflowX = _a.overflowX, overflowY = _a.overflowY;
		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

16

lib-commonjs/utils/index.js

		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });
		var 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

62

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) {
		var offsetWithArrow = userOffset;
		if (!userOffset) {
		return [0, arrowHeight];
		}
		if (Array.isArray(offsetWithArrow)) {
		setArrowOffset(offsetWithArrow, arrowHeight);
		return offsetWithArrow;
		}
		if (typeof offsetWithArrow === 'function') {
		var userOffsetFn_1 = offsetWithArrow;
		offsetWithArrow = function (offsetParams) {
		var offset = userOffsetFn_1(offsetParams);
		setArrowOffset(offset, arrowHeight);
		return offset;
		};
		}
		// This should never happen
		return [0, 0];
		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;
		var setArrowOffset = function (offset, arrowHeight) {
		if (offset[1] !== null && offset[1] !== undefined) {
		offset[1] += arrowHeight;
		}
		else {
		offset[1] = arrowHeight;
		}

		const setArrowOffset = (offset, arrowHeight) => {
		if (offset[1] !== null && offset[1] !== undefined) {
		offset[1] += arrowHeight;
		} else {
		offset[1] = arrowHeight;
		}
		};
		//# sourceMappingURL=mergeArrowOffset.js.map

2

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" \| "end" \| "start" \| undefined, position?: "after" \| "above" \| "below" \| "before" \| undefined, rtl?: boolean \| undefined) => PopperJs.Placement;
		export declare const applyRtlToOffset: (offset: Offset \| undefined) => Offset \| undefined;

85

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;
		var getPositionMap = function (rtl) { return ({
		above: 'top',
		below: 'bottom',
		before: rtl ? 'right' : 'left',
		after: rtl ? 'left' : 'right',
		}); };
		var getAlignmentMap = function (rtl) { return ({
		start: rtl ? 'end' : 'start',
		end: rtl ? 'start' : 'end',
		top: 'start',
		bottom: 'end',
		center: '',
		}); };
		var shouldAlignToCenter = function (p, a) {
		var positionedVertically = p === 'above' \|\| p === 'below';
		var alignedVertically = a === 'top' \|\| a === 'bottom';
		return (positionedVertically && alignedVertically) \|\| (!positionedVertically && !alignedVertically);

		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 shouldAlignToCenter = (p, a) => {
		const positionedVertically = p === 'above' \|\| p === 'below';
		const alignedVertically = a === 'top' \|\| a === 'bottom';
		return positionedVertically && alignedVertically \|\| !positionedVertically && !alignedVertically;
		};
		@@ -25,23 +31,32 @@ /**
		*/
		var getPlacement = function (align, position, rtl) {
		var alignment = shouldAlignToCenter(position, align) ? 'center' : align;
		var computedPosition = position && getPositionMap(rtl)[position];
		var computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];
		if (computedPosition && computedAlignmnent) {
		return computedPosition + "-" + computedAlignmnent;
		}
		return computedPosition \|\| 'auto';


		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';
		};

		exports.getPlacement = getPlacement;
		var applyRtlToOffset = function (offset) {
		if (typeof offset === 'undefined') {
		return undefined;
		}
		if (Array.isArray(offset)) {
		offset[0] = offset[0] * -1;
		return offset;
		}
		return (function (param) { return 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

89

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
		var 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' },

		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'
		}
		};

		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

77

lib-commonjs/utils/useCallbackRef.js

		"use strict";
		Object.defineProperty(exports, "__esModule", { value: true });

		Object.defineProperty(exports, "__esModule", {
		value: true
		});
		exports.useCallbackRef = void 0;
		var React = require("react");
		var 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) {
		var isFirst = React.useRef(true);
		var ref = React.useState(function () { return ({
		// value
		value: initialValue,
		// last callback
		callback: callback,
		// "memoized" public interface
		facade: {
		get current() {
		return ref.value;
		},
		set current(value) {
		var last = ref.value;
		if (last !== value) {
		ref.value = value;
		if (skipInitialResolve && isFirst.current) {
		return;
		}
		ref.callback(value, last);
		}
		},
		},
		}); })[0];
		react_utilities_1.useIsomorphicLayoutEffect(function () {
		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

32

lib/createVirtualElementFromClick.js

		@@ -6,20 +6,22 @@ /**
		export function createVirtualElementFromClick(nativeEvent) {
		var left = nativeEvent.clientX;
		var top = nativeEvent.clientY;
		var right = left + 1;
		var bottom = top + 1;
		function getBoundingClientRect() {
		return {
		left: left,
		top: top,
		right: right,
		bottom: 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: getBoundingClientRect,
		left,
		top,
		right,
		bottom,
		height: 1,
		width: 1
		};
		}

		return {
		getBoundingClientRect
		};
		}
		//# sourceMappingURL=createVirtualElementFromClick.js.map

3

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';

3

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';

683

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
		var 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,190 +38,226 @@ /**
		*/


		function usePopperOptions(options, popperOriginalPositionRef) {
		var arrowPadding = options.arrowPadding, autoSize = options.autoSize, coverTarget = options.coverTarget, flipBoundary = options.flipBoundary, offset = options.offset, onStateUpdate = options.onStateUpdate, overflowBoundary = options.overflowBoundary,
		const {
		arrowPadding,
		autoSize,
		coverTarget,
		flipBoundary,
		offset,
		onStateUpdate,
		overflowBoundary,
		// eslint-disable-next-line @typescript-eslint/naming-convention
		unstable_disableTether = options.unstable_disableTether, pinned = options.pinned;
		var isRtl = useFluent().dir === 'rtl';
		var placement = getPlacement(options.align, options.position, isRtl);
		var strategy = options.positionFixed ? 'fixed' : 'absolute';
		var handleStateUpdate = useEventCallback(function (_a) {
		var state = _a.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';
		}
		});
		var offsetModifier = React.useMemo(function () {
		return offset
		? {
		name: 'offset',
		options: { offset: isRtl ? applyRtlToOffset(offset) : offset },
		}
		: null;
		}, [offset, isRtl]);
		return React.useCallback(function (target, container, arrow) {
		var _a;
		var scrollParentElement = getScrollParent(container);
		var hasScrollableElement = scrollParentElement
		? scrollParentElement !== ((_a = scrollParentElement.ownerDocument) === null \|\| _a === void 0 ? void 0 : _a.body)
		: false;
		var 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: function (_a) {
		var state = _a.state, instance = _a.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 function () { 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: function (_a) {
		var state = _a.state, modifierOptions = _a.options;
		var overflow = PopperJs.detectOverflow(state, modifierOptions);
		var _b = state.modifiersData.preventOverflow \|\| { x: 0, y: 0 }, x = _b.x, y = _b.y;
		var _c = state.rects.popper, width = _c.width, height = _c.height;
		var basePlacement = getBasePlacement(state.placement);
		var widthProp = basePlacement === 'left' ? 'left' : 'right';
		var heightProp = basePlacement === 'top' ? 'top' : 'bottom';
		var applyMaxWidth = autoSize === 'always' \|\|
		autoSize === 'width-always' \|\|
		(overflow[widthProp] > 0 && (autoSize === true \|\| autoSize === 'width'));
		var 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: function (_a) {
		var state = _a.state;
		var 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
		var popperOptions = {
		modifiers: modifiers,
		placement: placement,
		strategy: strategy,
		onFirstUpdate: function (state) { return handleStateUpdate({ state: state }); },

		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
		};
		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,
		]);
		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]);
		}
		@@ -234,127 +272,132 @@ /**
		*/
		export function usePopper(options) {
		if (options === void 0) { options = {}; }
		var _a = options.enabled, enabled = _a === void 0 ? true : _a;
		var isFirstMount = useFirstMount();
		var popperOriginalPositionRef = React.useRef('absolute');
		var resolvePopperOptions = usePopperOptions(options, popperOriginalPositionRef);
		var popperInstanceRef = React.useRef(null);
		var handlePopperUpdate = useEventCallback(function () {
		var _a;
		(_a = popperInstanceRef.current) === null \|\| _a === void 0 ? void 0 : _a.destroy();
		popperInstanceRef.current = null;
		var _b = options.target, target = _b === void 0 ? targetRef.current : _b;
		var popperInstance = null;
		if (canUseDOM() && enabled) {
		if (target && containerRef.current) {
		popperInstance = PopperJs.createPopper(target, containerRef.current, resolvePopperOptions(target, containerRef.current, arrowRef.current));
		}


		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));
		}
		}

		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().
		*/
		var originalForceUpdate_1 = popperInstance.forceUpdate;
		popperInstance.isFirstRun = true;
		popperInstance.forceUpdate = function () {
		if (popperInstance === null \|\| popperInstance === void 0 ? void 0 : popperInstance.isFirstRun) {
		popperInstance.state.elements.popper.style.position = popperOriginalPositionRef.current;
		popperInstance.isFirstRun = false;
		}
		originalForceUpdate_1();
		};

		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.
		var targetRef = useCallbackRef(null, handlePopperUpdate, true);
		var containerRef = useCallbackRef(null, handlePopperUpdate, true);
		var arrowRef = useCallbackRef(null, handlePopperUpdate, true);
		React.useImperativeHandle(options.popperRef, function () { return ({
		updatePosition: function () {
		var _a;
		(_a = popperInstanceRef.current) === null \|\| _a === void 0 ? void 0 : _a.update();
		},
		}); }, []);
		useIsomorphicLayoutEffect(function () {
		handlePopperUpdate();
		return function () {
		var _a;
		(_a = popperInstanceRef.current) === null \|\| _a === void 0 ? void 0 : _a.destroy();
		popperInstanceRef.current = null;
		};
		}, [handlePopperUpdate, options.enabled, options.target]);
		useIsomorphicLayoutEffect(function () {
		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(function () {
		var _a;
		if (containerRef.current) {
		var contentNode = containerRef.current;
		var 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()) {
		var 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: targetRef, containerRef: containerRef, arrowRef: 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

50

lib/usePopperMouseTarget.js

		@@ -11,25 +11,31 @@ import * as React from 'react';
		*/
		export var usePopperMouseTarget = function (initialState) {
		var _a = React.useState(initialState), virtualElement = _a[0], setVirtualElement = _a[1];
		var setVirtualMouseTarget = function (event) {
		if (event === undefined \|\| event === null) {
		setVirtualElement(undefined);
		return;
		}
		var 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');
		}
		var 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

2

lib/utils/getBasePlacement.js

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

25

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') {
		var 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

1

lib/utils/getReactFiberFromNode.d.ts

		@@ -1,2 +0,1 @@
		/// <reference types="custom-global" />
		import * as React from 'react';
		@@ -3,0 +2,0 @@ declare type ReactEventResponder<E, C> = {

74

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 (var 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

78

lib/utils/getScrollParent.js

		@@ -6,8 +6,9 @@ /**
		*/
		export var getParentNode = function (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 @@ /**
		*/
		var getStyleComputedProperty = function (node) {
		var _a;
		if (node.nodeType !== 1) {
		return {};
		}
		var 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 var getScrollParent = function (node) {
		// Return body, `getScroll` will take care to get the correct `scrollTop` from it
		var 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
		var _a = getStyleComputedProperty(parentNode), overflow = _a.overflow, overflowX = _a.overflowX, overflowY = _a.overflowY;
		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

55

lib/utils/mergeArrowOffset.js

		@@ -10,29 +10,34 @@ /**
		export function mergeArrowOffset(userOffset, arrowHeight) {
		var offsetWithArrow = userOffset;
		if (!userOffset) {
		return [0, arrowHeight];
		}
		if (Array.isArray(offsetWithArrow)) {
		setArrowOffset(offsetWithArrow, arrowHeight);
		return offsetWithArrow;
		}
		if (typeof offsetWithArrow === 'function') {
		var userOffsetFn_1 = offsetWithArrow;
		offsetWithArrow = function (offsetParams) {
		var offset = userOffsetFn_1(offsetParams);
		setArrowOffset(offset, arrowHeight);
		return offset;
		};
		}
		// This should never happen
		return [0, 0];
		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];
		}
		var setArrowOffset = function (offset, arrowHeight) {
		if (offset[1] !== null && offset[1] !== undefined) {
		offset[1] += arrowHeight;
		}
		else {
		offset[1] = arrowHeight;
		}

		const setArrowOffset = (offset, arrowHeight) => {
		if (offset[1] !== null && offset[1] !== undefined) {
		offset[1] += arrowHeight;
		} else {
		offset[1] = arrowHeight;
		}
		};
		//# sourceMappingURL=mergeArrowOffset.js.map

2

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" \| "end" \| "start" \| undefined, position?: "after" \| "above" \| "below" \| "before" \| undefined, rtl?: boolean \| undefined) => PopperJs.Placement;
		export declare const applyRtlToOffset: (offset: Offset \| undefined) => Offset \| undefined;

76

lib/utils/positioningHelper.js

		@@ -1,18 +0,20 @@
		var getPositionMap = function (rtl) { return ({
		above: 'top',
		below: 'bottom',
		before: rtl ? 'right' : 'left',
		after: rtl ? 'left' : 'right',
		}); };
		var getAlignmentMap = function (rtl) { return ({
		start: rtl ? 'end' : 'start',
		end: rtl ? 'start' : 'end',
		top: 'start',
		bottom: 'end',
		center: '',
		}); };
		var shouldAlignToCenter = function (p, a) {
		var positionedVertically = p === 'above' \|\| p === 'below';
		var alignedVertically = a === 'top' \|\| a === 'bottom';
		return (positionedVertically && alignedVertically) \|\| (!positionedVertically && !alignedVertically);
		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 shouldAlignToCenter = (p, a) => {
		const positionedVertically = p === 'above' \|\| p === 'below';
		const alignedVertically = a === 'top' \|\| a === 'bottom';
		return positionedVertically && alignedVertically \|\| !positionedVertically && !alignedVertically;
		};
		@@ -22,21 +24,27 @@ /**
		*/
		export var getPlacement = function (align, position, rtl) {
		var alignment = shouldAlignToCenter(position, align) ? 'center' : align;
		var computedPosition = position && getPositionMap(rtl)[position];
		var computedAlignmnent = alignment && getAlignmentMap(rtl)[alignment];
		if (computedPosition && computedAlignmnent) {
		return computedPosition + "-" + computedAlignmnent;
		}
		return computedPosition \|\| 'auto';


		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';
		};
		export var applyRtlToOffset = function (offset) {
		if (typeof offset === 'undefined') {
		return undefined;
		}
		if (Array.isArray(offset)) {
		offset[0] = offset[0] * -1;
		return offset;
		}
		return (function (param) { return 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

78

lib/utils/resolvePositioningShorthand.js

		// Look up table for shorthand to avoid parsing strings
		var 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' },
		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'
		}
		};
		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

64

lib/utils/useCallbackRef.js

		@@ -20,33 +20,39 @@ import * as React from 'react';
		*/

		export function useCallbackRef(initialValue, callback, skipInitialResolve) {
		var isFirst = React.useRef(true);
		var ref = React.useState(function () { return ({
		// value
		value: initialValue,
		// last callback
		callback: callback,
		// "memoized" public interface
		facade: {
		get current() {
		return ref.value;
		},
		set current(value) {
		var last = ref.value;
		if (last !== value) {
		ref.value = value;
		if (skipInitialResolve && isFirst.current) {
		return;
		}
		ref.callback(value, last);
		}
		},
		},
		}); })[0];
		useIsomorphicLayoutEffect(function () {
		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

16

package.json

		{
		"name": "@fluentui/react-positioning",
		"version": "0.0.0-nightly0e0cf06c3420211029.1",
		"version": "0.0.0-nightly554221a5aa20211202.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-nightly554221a5aa20211202.1"
		},
		"dependencies": {
		"@fluentui/react-shared-contexts": "0.0.0-nightly0e0cf06c3420211029.1",
		"@fluentui/react-utilities": "0.0.0-nightly0e0cf06c3420211029.1",
		"@fluentui/react-make-styles": "0.0.0-nightly554221a5aa20211202.1",
		"@fluentui/react-shared-contexts": "0.0.0-nightly554221a5aa20211202.1",
		"@fluentui/react-utilities": "0.0.0-nightly554221a5aa20211202.1",
		"@popperjs/core": "~2.4.3",
		@@ -50,3 +51,2 @@ "tslib": "^2.1.0"
		"beachball": {
		"tag": "beta",
		"disallowedChangeTypes": [
		@@ -53,0 +53,0 @@ "major",

lib-commonjs/createVirtualElementFromClick.js.map