@fluentui/react-positioning 0.0.0-nightlya372ad979820211103.1 → 0.0.0-nightlya54302c0b220211124.1

package/CHANGELOG.json

@@ -2,28 +2,63 @@
   "name": "@fluentui/react-positioning",
   "entries": [
     {
-      "date": "Wed, 03 Nov 2021 08:24:05 GMT",
-      "tag": "@fluentui/react-positioning_v0.0.0-nightlya372ad979820211103.1",
-      "version": "0.0.0-nightlya372ad979820211103.1",
+      "date": "Wed, 24 Nov 2021 04:12:45 GMT",
+      "tag": "@fluentui/react-positioning_v0.0.0-nightlya54302c0b220211124.1",
+      "version": "0.0.0-nightlya54302c0b220211124.1",
       "comments": {
         "prerelease": [
           {
-            "author": "email not defined",
+            "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 v0.0.0-nightlya54302c0b220211124.1",
+            "commit": "e3c1bd15060ac276670338660c7965b877e333f4"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightlya54302c0b220211124.1",
+            "commit": "e3c1bd15060ac276670338660c7965b877e333f4"
+          }
+        ]
+      }
+    },
+    {
+      "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": "ff9c0a60767a2dbd1afdc71659a5daee5f2068dd",
-            "comment": "Release nightly v9"
+            "commit": "c9bd5b5a02ae94a8239ce1b56cac2f0d0dbd3586",
+            "comment": "Updated beta and RC components to ES2019"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightlya372ad979820211103.1",
-            "commit": "ff9c0a60767a2dbd1afdc71659a5daee5f2068dd"
+            "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 v0.0.0-nightlya372ad979820211103.1",
-            "commit": "ff9c0a60767a2dbd1afdc71659a5daee5f2068dd"
+            "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"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,19 +1,30 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Wed, 03 Nov 2021 08:24:05 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Nov 2021 04:12:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightlya372ad979820211103.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightlya372ad979820211103.1)
+## [0.0.0-nightlya54302c0b220211124.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightlya54302c0b220211124.1)
 
-Wed, 03 Nov 2021 08:24:05 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.2..@fluentui/react-positioning_v0.0.0-nightlya372ad979820211103.1)
+Wed, 24 Nov 2021 04:12:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-beta.3..@fluentui/react-positioning_v0.0.0-nightlya54302c0b220211124.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/ff9c0a60767a2dbd1afdc71659a5daee5f2068dd) by email not defined)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightlya372ad979820211103.1 ([commit](https://github.com/microsoft/fluentui/commit/ff9c0a60767a2dbd1afdc71659a5daee5f2068dd) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightlya372ad979820211103.1 ([commit](https://github.com/microsoft/fluentui/commit/ff9c0a60767a2dbd1afdc71659a5daee5f2068dd) by beachball)
+- 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 v0.0.0-nightlya54302c0b220211124.1 ([commit](https://github.com/microsoft/fluentui/commit/e3c1bd15060ac276670338660c7965b877e333f4) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightlya54302c0b220211124.1 ([commit](https://github.com/microsoft/fluentui/commit/e3c1bd15060ac276670338660c7965b877e333f4) 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)
 

package/dist/react-positioning.d.ts

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

package/lib/createArrowStyles.d.ts

@@ -0,0 +1,27 @@
+import type { MakeStylesStyleRule } from '@fluentui/make-styles';
+import type { Theme } from '@fluentui/react-theme';
+/**
+ * Helper that creates a makeStyles rule for an arrow element.
+ * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
+ *
+ * ```ts
+ *   makeStyles({
+ *     arrowWithSize: createArrowStyles(5),
+ *
+ *     arrowWithoutSize: createArrowStyles(),
+ *     mediumArrow: { aspectRatio: 1, width: '4px' }
+ *     smallArrow: { aspectRatio: 1, width: '2px' }
+ *   })
+ *   ...
+ *
+ *   state.arrowWithSize.clasName = styles.arrowWithSize
+ *   state.arrowWithoutSize.className = mergeClases(
+ *     styles.arrowWithoutSize,
+ *     state.smallArrow && styles.smallArrow,
+ *     state.mediumArrow && styles.mediumArrow,
+ *   )
+ * ```
+ *
+ * @param size - dimensions of the square arrow element in pixels.
+ */
+export declare function createArrowStyles(size?: number): MakeStylesStyleRule<Theme>;

package/lib/createArrowStyles.js

@@ -0,0 +1,75 @@
+/**
+ * Helper that creates a makeStyles rule for an arrow element.
+ * For runtime arrow size toggling simply create extra classnames to apply to the arrow element
+ *
+ * ```ts
+ *   makeStyles({
+ *     arrowWithSize: createArrowStyles(5),
+ *
+ *     arrowWithoutSize: createArrowStyles(),
+ *     mediumArrow: { aspectRatio: 1, width: '4px' }
+ *     smallArrow: { aspectRatio: 1, width: '2px' }
+ *   })
+ *   ...
+ *
+ *   state.arrowWithSize.clasName = styles.arrowWithSize
+ *   state.arrowWithoutSize.className = mergeClases(
+ *     styles.arrowWithoutSize,
+ *     state.smallArrow && styles.smallArrow,
+ *     state.mediumArrow && styles.mediumArrow,
+ *   )
+ * ```
+ *
+ * @param size - dimensions of the square arrow element in pixels.
+ */
+export function createArrowStyles(size) {
+    return theme => {
+        const arrowHCBorderStyle = `1px solid transparent`;
+        const arrowHCBorder = {
+            borderRight: arrowHCBorderStyle,
+            borderBottom: arrowHCBorderStyle,
+        };
+        return {
+            position: 'absolute',
+            background: 'inherit',
+            visibility: 'hidden',
+            zIndex: -1,
+            ...(size && {
+                aspectRatio: 1,
+                width: `${size}px`,
+            }),
+            ':before': {
+                content: '""',
+                borderRadius: '4px',
+                position: 'absolute',
+                width: 'inherit',
+                height: 'inherit',
+                background: 'inherit',
+                visibility: 'visible',
+                borderBottomRightRadius: theme.borderRadiusSmall,
+                transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',
+            },
+            ':global([data-popper-placement])': {
+                ':before': arrowHCBorder,
+            },
+            // Popper sets data-popper-placement on the root element, which is used to align the arrow
+            ':global([data-popper-placement^="top"])': {
+                bottom: 0,
+                '--angle': '0',
+            },
+            ':global([data-popper-placement^="right"])': {
+                left: 0,
+                '--angle': '90deg',
+            },
+            ':global([data-popper-placement^="bottom"])': {
+                top: 0,
+                '--angle': '180deg',
+            },
+            ':global([data-popper-placement^="left"])': {
+                right: 0,
+                '--angle': '270deg',
+            },
+        };
+    };
+}
+//# sourceMappingURL=createArrowStyles.js.map

package/lib/createArrowStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createArrowStyles.js","sourceRoot":"","sources":["../src/createArrowStyles.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,iBAAiB,CAAC,IAAa;IAC7C,OAAO,KAAK,CAAC,EAAE;QACb,MAAM,kBAAkB,GAAG,uBAAuB,CAAC;QACnD,MAAM,aAAa,GAAG;YACpB,WAAW,EAAE,kBAAkB;YAC/B,YAAY,EAAE,kBAAkB;SACjC,CAAC;QAEF,OAAO;YACL,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,QAAQ;YACpB,MAAM,EAAE,CAAC,CAAC;YAEV,GAAG,CAAC,IAAI,IAAI;gBACV,WAAW,EAAE,CAAC;gBACd,KAAK,EAAE,GAAG,IAAI,IAAI;aACnB,CAAC;YAEF,SAAS,EAAE;gBACT,OAAO,EAAE,IAAI;gBACb,YAAY,EAAE,KAAK;gBACnB,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,SAAS;gBACjB,UAAU,EAAE,SAAS;gBACrB,UAAU,EAAE,SAAS;gBACrB,uBAAuB,EAAE,KAAK,CAAC,iBAAiB;gBAChD,SAAS,EAAE,sDAAsD;aAClE;YAED,kCAAkC,EAAE;gBAClC,SAAS,EAAE,aAAa;aACzB;YAED,0FAA0F;YAC1F,yCAAyC,EAAE;gBACzC,MAAM,EAAE,CAAC;gBACT,SAAS,EAAE,GAAG;aACf;YAED,2CAA2C,EAAE;gBAC3C,IAAI,EAAE,CAAC;gBACP,SAAS,EAAE,OAAO;aACnB;YACD,4CAA4C,EAAE;gBAC5C,GAAG,EAAE,CAAC;gBACN,SAAS,EAAE,QAAQ;aACpB;YACD,0CAA0C,EAAE;gBAC1C,KAAK,EAAE,CAAC;gBACR,SAAS,EAAE,QAAQ;aACpB;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/lib/createVirtualElementFromClick.js

@@ -3,22 +3,22 @@
  * Can be used as a target for popper in scenarios such as context menus
  */
 export function createVirtualElementFromClick(nativeEvent) {
-    var left = nativeEvent.clientX;
-    var top = nativeEvent.clientY;
-    var right = left + 1;
-    var bottom = top + 1;
+    const left = nativeEvent.clientX;
+    const top = nativeEvent.clientY;
+    const right = left + 1;
+    const bottom = top + 1;
     function getBoundingClientRect() {
         return {
-            left: left,
-            top: top,
-            right: right,
-            bottom: bottom,
+            left,
+            top,
+            right,
+            bottom,
             height: 1,
             width: 1,
         };
     }
     return {
-        getBoundingClientRect: getBoundingClientRect,
+        getBoundingClientRect,
     };
 }
 //# sourceMappingURL=createVirtualElementFromClick.js.map

package/lib/createVirtualElementFromClick.js.map

@@ -1 +1 @@
-{"version":3,"file":"createVirtualElementFromClick.js","sourceRoot":"","sources":["../src/createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,UAAU,6BAA6B,CAAC,WAAuB;IACnE,IAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC;IACjC,IAAM,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC;IAChC,IAAM,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC;IACvB,IAAM,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;IAEvB,SAAS,qBAAqB;QAC5B,OAAO;YACL,IAAI,MAAA;YACJ,GAAG,KAAA;YACH,KAAK,OAAA;YACL,MAAM,QAAA;YAEN,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,CAAC;SACT,CAAC;IACJ,CAAC;IAED,OAAO;QACL,qBAAqB,uBAAA;KACtB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"createVirtualElementFromClick.js","sourceRoot":"","sources":["../src/createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,UAAU,6BAA6B,CAAC,WAAuB;IACnE,MAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC;IACjC,MAAM,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC;IAChC,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC;IACvB,MAAM,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;IAEvB,SAAS,qBAAqB;QAC5B,OAAO;YACL,IAAI;YACJ,GAAG;YACH,KAAK;YACL,MAAM;YAEN,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,CAAC;SACT,CAAC;IACJ,CAAC;IAED,OAAO;QACL,qBAAqB;KACtB,CAAC;AACJ,CAAC"}

package/lib/index.d.ts

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

package/lib/index.js

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

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC9E,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC9E,cAAc,SAAS,CAAC"}

package/lib/usePopper.js

@@ -13,7 +13,7 @@ import * as React from 'react';
 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' ||
+    const isAutoFocusableElement = node.nodeName === 'BUTTON' ||
         node.nodeName === 'INPUT' ||
         node.nodeName === 'SELECT' ||
         node.nodeName === 'TEXTAREA';
@@ -33,33 +33,30 @@ function hasAutofocusFilter(node) {
  * that can't be resolved properly during an initial rendering.
  */
 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;
+    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);
         }
     });
-    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) {
+    const offsetModifier = React.useMemo(() => offset
+        ? {
+            name: 'offset',
+            options: { offset: isRtl ? applyRtlToOffset(offset) : offset },
+        }
+        : null, [offset, isRtl]);
+    return React.useCallback((target, container, arrow) => {
         var _a;
-        var scrollParentElement = getScrollParent(container);
-        var hasScrollableElement = scrollParentElement
+        const scrollParentElement = getScrollParent(container);
+        const hasScrollableElement = scrollParentElement
             ? scrollParentElement !== ((_a = scrollParentElement.ownerDocument) === null || _a === void 0 ? void 0 : _a.body)
             : false;
-        var modifiers = [
+        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
@@ -69,15 +66,14 @@ function usePopperOptions(options, popperOriginalPositionRef) {
                 name: 'positionStyleFix',
                 enabled: true,
                 phase: 'afterWrite',
-                effect: function (_a) {
-                    var state = _a.state, instance = _a.instance;
+                effect: ({ state, instance }) => {
                     // ".isFirstRun" is a part of our patch, on a first evaluation it will "undefined"
                     // should be disabled for subsequent runs as it breaks positioning for them
                     if (instance.isFirstRun !== false) {
                         popperOriginalPositionRef.current = state.elements.popper.style.position;
                         state.elements.popper.style.position = 'fixed';
                     }
-                    return function () { return undefined; };
+                    return () => undefined;
                 },
                 requires: [],
             },
@@ -139,25 +135,24 @@ function usePopperOptions(options, popperOriginalPositionRef) {
                     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' ||
+                fn({ state, options: modifierOptions }) {
+                    const overflow = PopperJs.detectOverflow(state, modifierOptions);
+                    const { x, y } = state.modifiersData.preventOverflow || { x: 0, y: 0 };
+                    const { width, height } = state.rects.popper;
+                    const basePlacement = getBasePlacement(state.placement);
+                    const widthProp = basePlacement === 'left' ? 'left' : 'right';
+                    const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
+                    const applyMaxWidth = autoSize === 'always' ||
                         autoSize === 'width-always' ||
                         (overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width'));
-                    var applyMaxHeight = autoSize === 'always' ||
+                    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";
+                        state.styles.popper.maxWidth = `${width - overflow[widthProp] - x}px`;
                     }
                     if (applyMaxHeight) {
-                        state.styles.popper.maxHeight = height - overflow[heightProp] - y + "px";
+                        state.styles.popper.maxHeight = `${height - overflow[heightProp] - y}px`;
                     }
                 },
             },
@@ -178,9 +173,8 @@ function usePopperOptions(options, popperOriginalPositionRef) {
                 enabled: !!coverTarget,
                 phase: 'main',
                 requiresIfExists: ['offset', 'preventOverflow', 'flip'],
-                fn: function (_a) {
-                    var state = _a.state;
-                    var basePlacement = getBasePlacement(state.placement);
+                fn({ state }) {
+                    const basePlacement = getBasePlacement(state.placement);
                     switch (basePlacement) {
                         case 'bottom':
                             state.modifiersData.popperOffsets.y -= state.rects.reference.height;
@@ -198,11 +192,11 @@ function usePopperOptions(options, popperOriginalPositionRef) {
                 },
             },
         ].filter(Boolean); // filter boolean conditional spreading values
-        var popperOptions = {
-            modifiers: modifiers,
-            placement: placement,
-            strategy: strategy,
-            onFirstUpdate: function (state) { return handleStateUpdate({ state: state }); },
+        const popperOptions = {
+            modifiers,
+            placement,
+            strategy,
+            onFirstUpdate: state => handleStateUpdate({ state }),
         };
         return popperOptions;
     }, [
@@ -229,19 +223,18 @@ function usePopperOptions(options, popperOriginalPositionRef) {
  * - contains a specific to React fix related to initial positioning when containers have components with managed focus
  *   to avoid focus jumps
  */
-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 () {
+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;
-        var _b = options.target, target = _b === void 0 ? targetRef.current : _b;
-        var popperInstance = 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));
@@ -252,14 +245,14 @@ export function usePopper(options) {
              * 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;
+            const originalForceUpdate = popperInstance.forceUpdate;
             popperInstance.isFirstRun = true;
-            popperInstance.forceUpdate = function () {
+            popperInstance.forceUpdate = () => {
                 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;
@@ -284,24 +277,24 @@ export function usePopper(options) {
     //
     // 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 () {
+    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(function () {
+    }), []);
+    useIsomorphicLayoutEffect(() => {
         handlePopperUpdate();
-        return function () {
+        return () => {
             var _a;
             (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
             popperInstanceRef.current = null;
         };
     }, [handlePopperUpdate, options.enabled, options.target]);
-    useIsomorphicLayoutEffect(function () {
+    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));
@@ -316,15 +309,15 @@ export function usePopper(options) {
     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 () {
+        React.useEffect(() => {
             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, {
+                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()) {
-                    var node = treeWalker.currentNode;
+                    const node = treeWalker.currentNode;
                     // eslint-disable-next-line no-console
                     console.warn('<Popper>:', node);
                     // eslint-disable-next-line no-console
@@ -338,7 +331,7 @@ export function usePopper(options) {
                         '(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:",
+                        `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',
@@ -352,6 +345,6 @@ export function usePopper(options) {
             // eslint-disable-next-line react-hooks/exhaustive-deps
         }, []);
     }
-    return { targetRef: targetRef, containerRef: containerRef, arrowRef: arrowRef };
+    return { targetRef, containerRef, arrowRef };
 }
 //# sourceMappingURL=usePopper.js.map