@fluentui/react-positioning 9.5.14 → 9.7.0

package/CHANGELOG.json

@@ -2,7 +2,83 @@
   "name": "@fluentui/react-positioning",
   "entries": [
     {
-      "date": "Thu, 25 May 2023 09:57:45 GMT",
+      "date": "Tue, 20 Jun 2023 12:34:45 GMT",
+      "tag": "@fluentui/react-positioning_v9.7.0",
+      "version": "9.7.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "cf6b94ba6559236150bc1f1814b023607edaeb20",
+            "comment": "chore: migrate to ts 4.7 which wont emit undefined anymore for optional arguments"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "cbdfdd61ae2ea8954fad2eb53d62c2b036416101",
+            "comment": "fix: cleanup assignment of initial styles"
+          }
+        ],
+        "minor": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "71fcadc8347a9c547066b631eb7f3ec527ca9775",
+            "comment": "feat: Implement shared styles for slide animations"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.5.1",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-theme to v9.1.9",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-utilities to v9.9.3",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 31 May 2023 06:46:17 GMT",
+      "tag": "@fluentui/react-positioning_v9.6.0",
+      "version": "9.6.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "yiliu9@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "e1ca88c0a92d07dced9c668dd11585c0c4866919",
+            "comment": "Add new optional useTransform parameter to allow disabling transform for positioning"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-utilities to v9.9.2",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          }
+        ],
+        "patch": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
+            "comment": "chore: Update Griffel to v1.5.7."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 25 May 2023 10:00:48 GMT",
       "tag": "@fluentui/react-positioning_v9.5.14",
       "version": "9.5.14",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,43 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Thu, 25 May 2023 09:57:45 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Jun 2023 12:34:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.7.0)
+
+Tue, 20 Jun 2023 12:34:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.6.0..@fluentui/react-positioning_v9.7.0)
+
+### Minor changes
+
+- feat: Implement shared styles for slide animations ([PR #28119](https://github.com/microsoft/fluentui/pull/28119) by lingfangao@hotmail.com)
+- Bump @fluentui/react-shared-contexts to v9.5.1 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-theme to v9.1.9 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-utilities to v9.9.3 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+
+### Patches
+
+- chore: migrate to ts 4.7 which wont emit undefined anymore for optional arguments ([PR #28067](https://github.com/microsoft/fluentui/pull/28067) by martinhochel@microsoft.com)
+- fix: cleanup assignment of initial styles ([PR #28109](https://github.com/microsoft/fluentui/pull/28109) by olfedias@microsoft.com)
+
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.6.0)
+
+Wed, 31 May 2023 06:46:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.5.14..@fluentui/react-positioning_v9.6.0)
+
+### Minor changes
+
+- Add new optional useTransform parameter to allow disabling transform for positioning ([PR #27929](https://github.com/microsoft/fluentui/pull/27929) by yiliu9@microsoft.com)
+- Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+
+### Patches
+
+- chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
+
 ## [9.5.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.5.14)
 
-Thu, 25 May 2023 09:57:45 GMT 
+Thu, 25 May 2023 10:00:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.5.13..@fluentui/react-positioning_v9.5.14)
 
 ### Patches

package/dist/index.d.ts

@@ -76,6 +76,13 @@ export declare type CreateArrowStylesOptions = {
     borderColor?: GriffelStyle['borderBottomColor'];
 };
 
+/**
+ * Creates animation styles so that positioned elements slide in from the main axis
+ * @param mainAxis - distance than the element sides for
+ * @returns Griffel styles to spread to a slot
+ */
+export declare function createSlideStyles(mainAxis: number): GriffelStyle;
+
 /**
  * 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
@@ -193,9 +200,14 @@ declare interface PositioningOptions {
      * its boundaries, use a specified fallback positions.
      */
     fallbackPositions?: PositioningShorthandValue[];
+    /**
+     * Modifies whether popover is positioned using transform.
+     * @default true
+     */
+    useTransform?: boolean;
 }
 
-export declare interface PositioningProps extends Pick<PositioningOptions, 'align' | 'flipBoundary' | 'overflowBoundary' | 'overflowBoundaryPadding' | 'position' | 'offset' | 'arrowPadding' | 'autoSize' | 'coverTarget' | 'pinned'> {
+export declare interface PositioningProps extends Pick<PositioningOptions, 'align' | 'flipBoundary' | 'overflowBoundary' | 'overflowBoundaryPadding' | 'position' | 'offset' | 'arrowPadding' | 'autoSize' | 'coverTarget' | 'pinned' | 'useTransform'> {
     /** An imperative handle to Popper methods. */
     positioningRef?: React_2.Ref<PositioningImperativeRef>;
     /**
@@ -249,7 +261,7 @@ export declare function usePositioning(options: UsePositioningOptions): UsePosit
  * @param initialState - initializes a user provided state similare to useState
  * @returns state and dispatcher for a Popper virtual element that uses native/synthetic mouse events
  */
-export declare const usePositioningMouseTarget: (initialState?: PositioningVirtualElement | (() => PositioningVirtualElement) | undefined) => readonly [PositioningVirtualElement | undefined, SetVirtualMouseTarget];
+export declare const usePositioningMouseTarget: (initialState?: PositioningVirtualElement | (() => PositioningVirtualElement)) => readonly [PositioningVirtualElement | undefined, SetVirtualMouseTarget];
 
 declare interface UsePositioningOptions extends PositioningProps, Pick<PositioningOptions, 'fallbackPositions' | 'pinned'> {
     /**

package/lib/constants.js

@@ -2,4 +2,3 @@ export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';
 export const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';
 export const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';
 export const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';
-//# sourceMappingURL=constants.js.map

package/lib/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT"],"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';\nexport const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';\nexport const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';\nexport const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';\n"],"mappings":"AAAA,OAAO,MAAMA,6BAAA,GAAgC;AAC7C,OAAO,MAAMC,wBAAA,GAA2B;AACxC,OAAO,MAAMC,uBAAA,GAA0B;AACvC,OAAO,MAAMC,0BAAA,GAA6B"}
+{"version":3,"sources":["constants.ts"],"sourcesContent":["export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';\nexport const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';\nexport const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';\nexport const DATA_POSITIONING_PLACEMENT = 'data-popper-placement';\n"],"names":["DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT"],"mappings":"AAAA,OAAO,MAAMA,gCAAgC,8BAA8B;AAC3E,OAAO,MAAMC,2BAA2B,sBAAsB;AAC9D,OAAO,MAAMC,0BAA0B,+BAA+B;AACtE,OAAO,MAAMC,6BAA6B,wBAAwB"}

package/lib/createArrowStyles.js

@@ -22,51 +22,45 @@ import { tokens } from '@fluentui/react-theme';
  *     state.mediumArrow && styles.mediumArrow,
  *   )
  * ```
- */
-export function createArrowStyles(options) {
-  const {
-    arrowHeight,
-    borderWidth = '1px',
-    borderStyle = 'solid',
-    borderColor = tokens.colorTransparentStroke
-  } = options;
-  return {
-    position: 'absolute',
-    backgroundColor: 'inherit',
-    visibility: 'hidden',
-    zIndex: -1,
-    ...(arrowHeight && createArrowHeightStyles(arrowHeight)),
-    '::before': {
-      content: '""',
-      visibility: 'visible',
-      position: 'absolute',
-      boxSizing: 'border-box',
-      width: 'inherit',
-      height: 'inherit',
-      backgroundColor: 'inherit',
-      ...shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
-      ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
-      borderBottomRightRadius: tokens.borderRadiusSmall,
-      transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
-    },
-    // Popper sets data-popper-placement on the root element, which is used to align the arrow
-    ':global([data-popper-placement^="top"])': {
-      bottom: `-${borderWidth}`,
-      '--angle': '0'
-    },
-    ':global([data-popper-placement^="right"])': {
-      left: `-${borderWidth} /* @noflip */`,
-      '--angle': '90deg'
-    },
-    ':global([data-popper-placement^="bottom"])': {
-      top: `-${borderWidth}`,
-      '--angle': '180deg'
-    },
-    ':global([data-popper-placement^="left"])': {
-      right: `-${borderWidth} /* @noflip */`,
-      '--angle': '270deg'
-    }
-  };
+ */ export function createArrowStyles(options) {
+    const { arrowHeight , borderWidth ='1px' , borderStyle ='solid' , borderColor =tokens.colorTransparentStroke  } = options;
+    return {
+        position: 'absolute',
+        backgroundColor: 'inherit',
+        visibility: 'hidden',
+        zIndex: -1,
+        ...arrowHeight && createArrowHeightStyles(arrowHeight),
+        '::before': {
+            content: '""',
+            visibility: 'visible',
+            position: 'absolute',
+            boxSizing: 'border-box',
+            width: 'inherit',
+            height: 'inherit',
+            backgroundColor: 'inherit',
+            ...shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
+            ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),
+            borderBottomRightRadius: tokens.borderRadiusSmall,
+            transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)'
+        },
+        // Popper sets data-popper-placement on the root element, which is used to align the arrow
+        ':global([data-popper-placement^="top"])': {
+            bottom: `-${borderWidth}`,
+            '--angle': '0'
+        },
+        ':global([data-popper-placement^="right"])': {
+            left: `-${borderWidth} /* @noflip */`,
+            '--angle': '90deg'
+        },
+        ':global([data-popper-placement^="bottom"])': {
+            top: `-${borderWidth}`,
+            '--angle': '180deg'
+        },
+        ':global([data-popper-placement^="left"])': {
+            right: `-${borderWidth} /* @noflip */`,
+            '--angle': '270deg'
+        }
+    };
 }
 /**
  * @internal
@@ -74,14 +68,12 @@ export function createArrowStyles(options) {
  *
  * Use this when you need to create classes for several different arrow sizes. If you only need a
  * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.
- */
-export function createArrowHeightStyles(arrowHeight) {
-  // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
-  // Multiply the triangle's height by sqrt(2) to get length of its edges.
-  const edgeLength = `${1.414 * arrowHeight}px`;
-  return {
-    width: edgeLength,
-    height: edgeLength
-  };
+ */ export function createArrowHeightStyles(arrowHeight) {
+    // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.
+    // Multiply the triangle's height by sqrt(2) to get length of its edges.
+    const edgeLength = `${1.414 * arrowHeight}px`;
+    return {
+        width: edgeLength,
+        height: edgeLength
+    };
 }
-//# sourceMappingURL=createArrowStyles.js.map

package/lib/createArrowStyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["shorthands","tokens","createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","colorTransparentStroke","position","backgroundColor","visibility","zIndex","createArrowHeightStyles","content","boxSizing","width","height","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","edgeLength"],"sources":["../src/createArrowStyles.ts"],"sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n  /**\n   * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n   *\n   * This can be undefined to leave out the arrow size styles. You must then add styles created by\n   * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n   */\n  arrowHeight: number | undefined;\n\n  /**\n   * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n   *\n   * @defaultvalue 1px\n   */\n  borderWidth?: GriffelStyle['borderBottomWidth'];\n\n  /**\n   * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n   *\n   * @defaultvalue solid\n   */\n  borderStyle?: GriffelStyle['borderBottomStyle'];\n\n  /**\n   * The borderColor of the arrow. Should be the same borderColor as the parent element.\n   *\n   * @defaultvalue tokens.colorTransparentStroke\n   */\n  borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n *   makeStyles({\n *     arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n *     arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n *     mediumArrow: createArrowHeightStyles(4),\n *     smallArrow: createArrowHeightStyles(2),\n *   })\n *   ...\n *\n *   state.arrowWithSize.className = styles.arrowWithSize;\n *   state.arrowWithoutSize.className = mergeClasses(\n *     styles.arrowWithoutSize,\n *     state.smallArrow && styles.smallArrow,\n *     state.mediumArrow && styles.mediumArrow,\n *   )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n  const {\n    arrowHeight,\n    borderWidth = '1px',\n    borderStyle = 'solid',\n    borderColor = tokens.colorTransparentStroke,\n  } = options;\n\n  return {\n    position: 'absolute',\n    backgroundColor: 'inherit',\n    visibility: 'hidden',\n    zIndex: -1,\n\n    ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n    '::before': {\n      content: '\"\"',\n      visibility: 'visible',\n      position: 'absolute',\n      boxSizing: 'border-box',\n      width: 'inherit',\n      height: 'inherit',\n      backgroundColor: 'inherit',\n      ...shorthands.borderRight(\n        `${borderWidth} /* @noflip */`,\n        `${borderStyle} /* @noflip */`,\n        `${borderColor} /* @noflip */`,\n      ),\n      ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n      borderBottomRightRadius: tokens.borderRadiusSmall,\n      transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n    },\n\n    // Popper sets data-popper-placement on the root element, which is used to align the arrow\n    ':global([data-popper-placement^=\"top\"])': {\n      bottom: `-${borderWidth}`,\n      '--angle': '0',\n    },\n    ':global([data-popper-placement^=\"right\"])': {\n      left: `-${borderWidth} /* @noflip */`,\n      '--angle': '90deg',\n    },\n    ':global([data-popper-placement^=\"bottom\"])': {\n      top: `-${borderWidth}`,\n      '--angle': '180deg',\n    },\n    ':global([data-popper-placement^=\"left\"])': {\n      right: `-${borderWidth} /* @noflip */`,\n      '--angle': '270deg',\n    },\n  };\n}\n\n/**\n * @internal\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n  // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n  // Multiply the triangle's height by sqrt(2) to get length of its edges.\n  const edgeLength = `${1.414 * arrowHeight}px`;\n  return { width: edgeLength, height: edgeLength };\n}\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ;AAC3B,SAASC,MAAM,QAAQ;AAsCvB;;;;;;;;;;;;;;;;;;;;;;;AAuBA,OAAO,SAASC,kBAAkBC,OAAiC,EAAgB;EACjF,MAAM;IACJC,WAAA;IACAC,WAAA,GAAc;IACdC,WAAA,GAAc;IACdC,WAAA,GAAcN,MAAA,CAAOO;EAAsB,CAC5C,GAAGL,OAAA;EAEJ,OAAO;IACLM,QAAA,EAAU;IACVC,eAAA,EAAiB;IACjBC,UAAA,EAAY;IACZC,MAAA,EAAQ,CAAC;IAET,IAAIR,WAAA,IAAeS,uBAAA,CAAwBT,WAAA,CAAY;IAEvD,YAAY;MACVU,OAAA,EAAS;MACTH,UAAA,EAAY;MACZF,QAAA,EAAU;MACVM,SAAA,EAAW;MACXC,KAAA,EAAO;MACPC,MAAA,EAAQ;MACRP,eAAA,EAAiB;MACjB,GAAGV,UAAA,CAAWkB,WAAW,CACtB,GAAEb,WAAY,gBAAe,EAC7B,GAAEC,WAAY,gBAAe,EAC7B,GAAEC,WAAY,gBAAe,CAC/B;MACD,GAAGP,UAAA,CAAWmB,YAAY,CAACd,WAAA,EAAaC,WAAA,EAAaC,WAAA,CAAY;MACjEa,uBAAA,EAAyBnB,MAAA,CAAOoB,iBAAiB;MACjDC,SAAA,EAAW;IACb;IAEA;IACA,2CAA2C;MACzCC,MAAA,EAAS,IAAGlB,WAAY,EAAC;MACzB,WAAW;IACb;IACA,6CAA6C;MAC3CmB,IAAA,EAAO,IAAGnB,WAAY,gBAAe;MACrC,WAAW;IACb;IACA,8CAA8C;MAC5CoB,GAAA,EAAM,IAAGpB,WAAY,EAAC;MACtB,WAAW;IACb;IACA,4CAA4C;MAC1CqB,KAAA,EAAQ,IAAGrB,WAAY,gBAAe;MACtC,WAAW;IACb;EACF;AACF;AAEA;;;;;;;AAOA,OAAO,SAASQ,wBAAwBT,WAAmB,EAAE;EAC3D;EACA;EACA,MAAMuB,UAAA,GAAc,GAAE,QAAQvB,WAAY,IAAG;EAC7C,OAAO;IAAEY,KAAA,EAAOW,UAAA;IAAYV,MAAA,EAAQU;EAAW;AACjD"}
+{"version":3,"sources":["createArrowStyles.ts"],"sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * @internal\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n  /**\n   * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n   *\n   * This can be undefined to leave out the arrow size styles. You must then add styles created by\n   * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n   */\n  arrowHeight: number | undefined;\n\n  /**\n   * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n   *\n   * @defaultvalue 1px\n   */\n  borderWidth?: GriffelStyle['borderBottomWidth'];\n\n  /**\n   * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n   *\n   * @defaultvalue solid\n   */\n  borderStyle?: GriffelStyle['borderBottomStyle'];\n\n  /**\n   * The borderColor of the arrow. Should be the same borderColor as the parent element.\n   *\n   * @defaultvalue tokens.colorTransparentStroke\n   */\n  borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * @internal\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n *   makeStyles({\n *     arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n *     arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n *     mediumArrow: createArrowHeightStyles(4),\n *     smallArrow: createArrowHeightStyles(2),\n *   })\n *   ...\n *\n *   state.arrowWithSize.className = styles.arrowWithSize;\n *   state.arrowWithoutSize.className = mergeClasses(\n *     styles.arrowWithoutSize,\n *     state.smallArrow && styles.smallArrow,\n *     state.mediumArrow && styles.mediumArrow,\n *   )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n  const {\n    arrowHeight,\n    borderWidth = '1px',\n    borderStyle = 'solid',\n    borderColor = tokens.colorTransparentStroke,\n  } = options;\n\n  return {\n    position: 'absolute',\n    backgroundColor: 'inherit',\n    visibility: 'hidden',\n    zIndex: -1,\n\n    ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n    '::before': {\n      content: '\"\"',\n      visibility: 'visible',\n      position: 'absolute',\n      boxSizing: 'border-box',\n      width: 'inherit',\n      height: 'inherit',\n      backgroundColor: 'inherit',\n      ...shorthands.borderRight(\n        `${borderWidth} /* @noflip */`,\n        `${borderStyle} /* @noflip */`,\n        `${borderColor} /* @noflip */`,\n      ),\n      ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n      borderBottomRightRadius: tokens.borderRadiusSmall,\n      transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n    },\n\n    // Popper sets data-popper-placement on the root element, which is used to align the arrow\n    ':global([data-popper-placement^=\"top\"])': {\n      bottom: `-${borderWidth}`,\n      '--angle': '0',\n    },\n    ':global([data-popper-placement^=\"right\"])': {\n      left: `-${borderWidth} /* @noflip */`,\n      '--angle': '90deg',\n    },\n    ':global([data-popper-placement^=\"bottom\"])': {\n      top: `-${borderWidth}`,\n      '--angle': '180deg',\n    },\n    ':global([data-popper-placement^=\"left\"])': {\n      right: `-${borderWidth} /* @noflip */`,\n      '--angle': '270deg',\n    },\n  };\n}\n\n/**\n * @internal\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n  // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n  // Multiply the triangle's height by sqrt(2) to get length of its edges.\n  const edgeLength = `${1.414 * arrowHeight}px`;\n  return { width: edgeLength, height: edgeLength };\n}\n"],"names":["shorthands","tokens","createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","colorTransparentStroke","position","backgroundColor","visibility","zIndex","createArrowHeightStyles","content","boxSizing","width","height","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","edgeLength"],"mappings":"AAAA,SAASA,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,MAAM,QAAQ,wBAAwB;AAsC/C;;;;;;;;;;;;;;;;;;;;;;CAsBC,GACD,OAAO,SAASC,kBAAkBC,OAAiC,EAAgB;IACjF,MAAM,EACJC,YAAW,EACXC,aAAc,MAAK,EACnBC,aAAc,QAAO,EACrBC,aAAcN,OAAOO,sBAAsB,CAAA,EAC5C,GAAGL;IAEJ,OAAO;QACLM,UAAU;QACVC,iBAAiB;QACjBC,YAAY;QACZC,QAAQ,CAAC;QAET,GAAIR,eAAeS,wBAAwBT,YAAY;QAEvD,YAAY;YACVU,SAAS;YACTH,YAAY;YACZF,UAAU;YACVM,WAAW;YACXC,OAAO;YACPC,QAAQ;YACRP,iBAAiB;YACjB,GAAGV,WAAWkB,WAAW,CACvB,CAAC,EAAEb,YAAY,cAAc,CAAC,EAC9B,CAAC,EAAEC,YAAY,cAAc,CAAC,EAC9B,CAAC,EAAEC,YAAY,cAAc,CAAC,CAC/B;YACD,GAAGP,WAAWmB,YAAY,CAACd,aAAaC,aAAaC,YAAY;YACjEa,yBAAyBnB,OAAOoB,iBAAiB;YACjDC,WAAW;QACb;QAEA,0FAA0F;QAC1F,2CAA2C;YACzCC,QAAQ,CAAC,CAAC,EAAElB,YAAY,CAAC;YACzB,WAAW;QACb;QACA,6CAA6C;YAC3CmB,MAAM,CAAC,CAAC,EAAEnB,YAAY,cAAc,CAAC;YACrC,WAAW;QACb;QACA,8CAA8C;YAC5CoB,KAAK,CAAC,CAAC,EAAEpB,YAAY,CAAC;YACtB,WAAW;QACb;QACA,4CAA4C;YAC1CqB,OAAO,CAAC,CAAC,EAAErB,YAAY,cAAc,CAAC;YACtC,WAAW;QACb;IACF;AACF,CAAC;AAED;;;;;;CAMC,GACD,OAAO,SAASQ,wBAAwBT,WAAmB,EAAE;IAC3D,qGAAqG;IACrG,wEAAwE;IACxE,MAAMuB,aAAa,CAAC,EAAE,QAAQvB,YAAY,EAAE,CAAC;IAC7C,OAAO;QAAEY,OAAOW;QAAYV,QAAQU;IAAW;AACjD,CAAC"}

package/lib/createPositionManager.js

@@ -4,117 +4,104 @@ import { isHTMLElement } from '@fluentui/react-utilities';
 /**
  * @internal
  * @returns manager that handles positioning out of the react lifecycle
- */
-export function createPositionManager(options) {
-  const {
-    container,
-    target,
-    arrow,
-    strategy,
-    middleware,
-    placement
-  } = options;
-  let isDestroyed = false;
-  if (!target || !container) {
-    return {
-      updatePosition: () => undefined,
-      dispose: () => undefined
-    };
-  }
-  let isFirstUpdate = true;
-  const scrollParents = new Set();
-  const targetWindow = container.ownerDocument.defaultView;
-  // When the container is first resolved, set position `fixed` to avoid scroll jumps.
-  // Without this scroll jumps can occur when the element is rendered initially and receives focus
-  Object.assign(container.style, {
-    position: 'fixed',
-    left: 0,
-    top: 0,
-    margin: 0
-  });
-  const forceUpdate = () => {
-    // debounced update can still occur afterwards
-    // early return to avoid memory leaks
-    if (isDestroyed) {
-      return;
-    }
-    if (isFirstUpdate) {
-      scrollParents.add(getScrollParent(container));
-      if (isHTMLElement(target)) {
-        scrollParents.add(getScrollParent(target));
-      }
-      scrollParents.forEach(scrollParent => {
-        scrollParent.addEventListener('scroll', updatePosition);
-      });
-      isFirstUpdate = false;
+ */ export function createPositionManager(options) {
+    const { container , target , arrow , strategy , middleware , placement , useTransform =true  } = options;
+    let isDestroyed = false;
+    if (!target || !container) {
+        return {
+            updatePosition: ()=>undefined,
+            dispose: ()=>undefined
+        };
     }
+    let isFirstUpdate = true;
+    const scrollParents = new Set();
+    const targetWindow = container.ownerDocument.defaultView;
+    // When the container is first resolved, set position `fixed` to avoid scroll jumps.
+    // Without this scroll jumps can occur when the element is rendered initially and receives focus
     Object.assign(container.style, {
-      position: strategy
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        margin: 0
     });
-    computePosition(target, container, {
-      placement,
-      middleware,
-      strategy
-    }).then(({
-      x,
-      y,
-      middlewareData,
-      placement: computedPlacement
-    }) => {
-      // Promise can still resolve after destruction
-      // early return to avoid applying outdated position
-      if (isDestroyed) {
-        return;
-      }
-      writeArrowUpdates({
-        arrow,
-        middlewareData
-      });
-      writeContainerUpdates({
-        container,
-        middlewareData,
-        placement: computedPlacement,
-        coordinates: {
-          x,
-          y
-        },
-        lowPPI: ((targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.devicePixelRatio) || 1) <= 1,
-        strategy
-      });
-    }).catch(err => {
-      // https://github.com/floating-ui/floating-ui/issues/1845
-      // FIXME for node > 14
-      // node 15 introduces promise rejection which means that any components
-      // tests need to be `it('', async () => {})` otherwise there can be race conditions with
-      // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist
-      // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing
-      // will actually be counter productive
-      if (process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.error('[usePositioning]: Failed to calculate position', err);
-      }
-    });
-  };
-  const updatePosition = debounce(() => forceUpdate());
-  const dispose = () => {
-    isDestroyed = true;
+    const forceUpdate = ()=>{
+        // debounced update can still occur afterwards
+        // early return to avoid memory leaks
+        if (isDestroyed) {
+            return;
+        }
+        if (isFirstUpdate) {
+            scrollParents.add(getScrollParent(container));
+            if (isHTMLElement(target)) {
+                scrollParents.add(getScrollParent(target));
+            }
+            scrollParents.forEach((scrollParent)=>{
+                scrollParent.addEventListener('scroll', updatePosition);
+            });
+            isFirstUpdate = false;
+        }
+        Object.assign(container.style, {
+            position: strategy
+        });
+        computePosition(target, container, {
+            placement,
+            middleware,
+            strategy
+        }).then(({ x , y , middlewareData , placement: computedPlacement  })=>{
+            // Promise can still resolve after destruction
+            // early return to avoid applying outdated position
+            if (isDestroyed) {
+                return;
+            }
+            writeArrowUpdates({
+                arrow,
+                middlewareData
+            });
+            writeContainerUpdates({
+                container,
+                middlewareData,
+                placement: computedPlacement,
+                coordinates: {
+                    x,
+                    y
+                },
+                lowPPI: ((targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.devicePixelRatio) || 1) <= 1,
+                strategy,
+                useTransform
+            });
+        }).catch((err)=>{
+            // https://github.com/floating-ui/floating-ui/issues/1845
+            // FIXME for node > 14
+            // node 15 introduces promise rejection which means that any components
+            // tests need to be `it('', async () => {})` otherwise there can be race conditions with
+            // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist
+            // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing
+            // will actually be counter productive
+            if (process.env.NODE_ENV === 'development') {
+                // eslint-disable-next-line no-console
+                console.error('[usePositioning]: Failed to calculate position', err);
+            }
+        });
+    };
+    const updatePosition = debounce(()=>forceUpdate());
+    const dispose = ()=>{
+        isDestroyed = true;
+        if (targetWindow) {
+            targetWindow.removeEventListener('scroll', updatePosition);
+            targetWindow.removeEventListener('resize', updatePosition);
+        }
+        scrollParents.forEach((scrollParent)=>{
+            scrollParent.removeEventListener('scroll', updatePosition);
+        });
+    };
     if (targetWindow) {
-      targetWindow.removeEventListener('scroll', updatePosition);
-      targetWindow.removeEventListener('resize', updatePosition);
+        targetWindow.addEventListener('scroll', updatePosition);
+        targetWindow.addEventListener('resize', updatePosition);
     }
-    scrollParents.forEach(scrollParent => {
-      scrollParent.removeEventListener('scroll', updatePosition);
-    });
-  };
-  if (targetWindow) {
-    targetWindow.addEventListener('scroll', updatePosition);
-    targetWindow.addEventListener('resize', updatePosition);
-  }
-  // Update the position on initialization
-  updatePosition();
-  return {
-    updatePosition,
-    dispose
-  };
+    // Update the position on initialization
+    updatePosition();
+    return {
+        updatePosition,
+        dispose
+    };
 }
-//# sourceMappingURL=createPositionManager.js.map

package/lib/createPositionManager.js.map

@@ -1 +1 @@
-{"version":3,"names":["computePosition","debounce","writeArrowUpdates","writeContainerUpdates","getScrollParent","isHTMLElement","createPositionManager","options","container","target","arrow","strategy","middleware","placement","isDestroyed","updatePosition","undefined","dispose","isFirstUpdate","scrollParents","Set","targetWindow","ownerDocument","defaultView","Object","assign","style","position","left","top","margin","forceUpdate","add","forEach","scrollParent","addEventListener","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","removeEventListener"],"sources":["../src/createPositionManager.ts"],"sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport type { PositionManager, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\ninterface PositionManagerOptions {\n  /**\n   * The positioned element\n   */\n  container: HTMLElement;\n  /**\n   * Element that the container will be anchored to\n   */\n  target: TargetElement;\n  /**\n   * Arrow that points from the container to the target\n   */\n  arrow: HTMLElement | null;\n  /**\n   * The value of the css `position` property\n   * @default absolute\n   */\n  strategy: Strategy;\n  /**\n   * [Floating UI middleware](https://floating-ui.com/docs/middleware)\n   */\n  middleware: Middleware[];\n  /**\n   * [Floating UI placement](https://floating-ui.com/docs/computePosition#placement)\n   */\n  placement?: Placement;\n}\n\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n  const { container, target, arrow, strategy, middleware, placement } = options;\n  let isDestroyed = false;\n  if (!target || !container) {\n    return {\n      updatePosition: () => undefined,\n      dispose: () => undefined,\n    };\n  }\n\n  let isFirstUpdate = true;\n  const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\n  const targetWindow = container.ownerDocument.defaultView;\n\n  // When the container is first resolved, set position `fixed` to avoid scroll jumps.\n  // Without this scroll jumps can occur when the element is rendered initially and receives focus\n  Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });\n\n  const forceUpdate = () => {\n    // debounced update can still occur afterwards\n    // early return to avoid memory leaks\n    if (isDestroyed) {\n      return;\n    }\n\n    if (isFirstUpdate) {\n      scrollParents.add(getScrollParent(container));\n      if (isHTMLElement(target)) {\n        scrollParents.add(getScrollParent(target));\n      }\n\n      scrollParents.forEach(scrollParent => {\n        scrollParent.addEventListener('scroll', updatePosition);\n      });\n\n      isFirstUpdate = false;\n    }\n\n    Object.assign(container.style, { position: strategy });\n    computePosition(target, container, { placement, middleware, strategy })\n      .then(({ x, y, middlewareData, placement: computedPlacement }) => {\n        // Promise can still resolve after destruction\n        // early return to avoid applying outdated position\n        if (isDestroyed) {\n          return;\n        }\n\n        writeArrowUpdates({ arrow, middlewareData });\n        writeContainerUpdates({\n          container,\n          middlewareData,\n          placement: computedPlacement,\n          coordinates: { x, y },\n          lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n          strategy,\n        });\n      })\n      .catch(err => {\n        // https://github.com/floating-ui/floating-ui/issues/1845\n        // FIXME for node > 14\n        // node 15 introduces promise rejection which means that any components\n        // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n        // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n        // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n        // will actually be counter productive\n        if (process.env.NODE_ENV === 'development') {\n          // eslint-disable-next-line no-console\n          console.error('[usePositioning]: Failed to calculate position', err);\n        }\n      });\n  };\n\n  const updatePosition = debounce(() => forceUpdate());\n\n  const dispose = () => {\n    isDestroyed = true;\n\n    if (targetWindow) {\n      targetWindow.removeEventListener('scroll', updatePosition);\n      targetWindow.removeEventListener('resize', updatePosition);\n    }\n\n    scrollParents.forEach(scrollParent => {\n      scrollParent.removeEventListener('scroll', updatePosition);\n    });\n  };\n\n  if (targetWindow) {\n    targetWindow.addEventListener('scroll', updatePosition);\n    targetWindow.addEventListener('resize', updatePosition);\n  }\n\n  // Update the position on initialization\n  updatePosition();\n\n  return {\n    updatePosition,\n    dispose,\n  };\n}\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ;AAGhC,SAASC,QAAQ,EAAEC,iBAAiB,EAAEC,qBAAqB,EAAEC,eAAe,QAAQ;AACpF,SAASC,aAAa,QAAQ;AA8B9B;;;;AAIA,OAAO,SAASC,sBAAsBC,OAA+B,EAAmB;EACtF,MAAM;IAAEC,SAAA;IAAWC,MAAA;IAAQC,KAAA;IAAOC,QAAA;IAAUC,UAAA;IAAYC;EAAS,CAAE,GAAGN,OAAA;EACtE,IAAIO,WAAA,GAAc,KAAK;EACvB,IAAI,CAACL,MAAA,IAAU,CAACD,SAAA,EAAW;IACzB,OAAO;MACLO,cAAA,EAAgBA,CAAA,KAAMC,SAAA;MACtBC,OAAA,EAASA,CAAA,KAAMD;IACjB;EACF;EAEA,IAAIE,aAAA,GAAgB,IAAI;EACxB,MAAMC,aAAA,GAAkC,IAAIC,GAAA;EAC5C,MAAMC,YAAA,GAAeb,SAAA,CAAUc,aAAa,CAACC,WAAW;EAExD;EACA;EACAC,MAAA,CAAOC,MAAM,CAACjB,SAAA,CAAUkB,KAAK,EAAE;IAAEC,QAAA,EAAU;IAASC,IAAA,EAAM;IAAGC,GAAA,EAAK;IAAGC,MAAA,EAAQ;EAAE;EAE/E,MAAMC,WAAA,GAAcA,CAAA,KAAM;IACxB;IACA;IACA,IAAIjB,WAAA,EAAa;MACf;IACF;IAEA,IAAII,aAAA,EAAe;MACjBC,aAAA,CAAca,GAAG,CAAC5B,eAAA,CAAgBI,SAAA;MAClC,IAAIH,aAAA,CAAcI,MAAA,GAAS;QACzBU,aAAA,CAAca,GAAG,CAAC5B,eAAA,CAAgBK,MAAA;MACpC;MAEAU,aAAA,CAAcc,OAAO,CAACC,YAAA,IAAgB;QACpCA,YAAA,CAAaC,gBAAgB,CAAC,UAAUpB,cAAA;MAC1C;MAEAG,aAAA,GAAgB,KAAK;IACvB;IAEAM,MAAA,CAAOC,MAAM,CAACjB,SAAA,CAAUkB,KAAK,EAAE;MAAEC,QAAA,EAAUhB;IAAS;IACpDX,eAAA,CAAgBS,MAAA,EAAQD,SAAA,EAAW;MAAEK,SAAA;MAAWD,UAAA;MAAYD;IAAS,GAClEyB,IAAI,CAAC,CAAC;MAAEC,CAAA;MAAGC,CAAA;MAAGC,cAAA;MAAgB1B,SAAA,EAAW2B;IAAiB,CAAE,KAAK;MAChE;MACA;MACA,IAAI1B,WAAA,EAAa;QACf;MACF;MAEAZ,iBAAA,CAAkB;QAAEQ,KAAA;QAAO6B;MAAe;MAC1CpC,qBAAA,CAAsB;QACpBK,SAAA;QACA+B,cAAA;QACA1B,SAAA,EAAW2B,iBAAA;QACXC,WAAA,EAAa;UAAEJ,CAAA;UAAGC;QAAE;QACpBI,MAAA,EAAQ,CAAC,CAAArB,YAAA,aAAAA,YAAA,uBAAAA,YAAA,CAAcsB,gBAAgB,KAAI,MAAM;QACjDhC;MACF;IACF,GACCiC,KAAK,CAACC,GAAA,IAAO;MACZ;MACA;MACA;MACA;MACA;MACA;MACA;MACA,IAAIC,OAAA,CAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C;QACAC,OAAA,CAAQC,KAAK,CAAC,kDAAkDL,GAAA;MAClE;IACF;EACJ;EAEA,MAAM9B,cAAA,GAAiBd,QAAA,CAAS,MAAM8B,WAAA;EAEtC,MAAMd,OAAA,GAAUA,CAAA,KAAM;IACpBH,WAAA,GAAc,IAAI;IAElB,IAAIO,YAAA,EAAc;MAChBA,YAAA,CAAa8B,mBAAmB,CAAC,UAAUpC,cAAA;MAC3CM,YAAA,CAAa8B,mBAAmB,CAAC,UAAUpC,cAAA;IAC7C;IAEAI,aAAA,CAAcc,OAAO,CAACC,YAAA,IAAgB;MACpCA,YAAA,CAAaiB,mBAAmB,CAAC,UAAUpC,cAAA;IAC7C;EACF;EAEA,IAAIM,YAAA,EAAc;IAChBA,YAAA,CAAac,gBAAgB,CAAC,UAAUpB,cAAA;IACxCM,YAAA,CAAac,gBAAgB,CAAC,UAAUpB,cAAA;EAC1C;EAEA;EACAA,cAAA;EAEA,OAAO;IACLA,cAAA;IACAE;EACF;AACF"}
+{"version":3,"sources":["createPositionManager.ts"],"sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport type { PositionManager, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\ninterface PositionManagerOptions {\n  /**\n   * The positioned element\n   */\n  container: HTMLElement;\n  /**\n   * Element that the container will be anchored to\n   */\n  target: TargetElement;\n  /**\n   * Arrow that points from the container to the target\n   */\n  arrow: HTMLElement | null;\n  /**\n   * The value of the css `position` property\n   * @default absolute\n   */\n  strategy: Strategy;\n  /**\n   * [Floating UI middleware](https://floating-ui.com/docs/middleware)\n   */\n  middleware: Middleware[];\n  /**\n   * [Floating UI placement](https://floating-ui.com/docs/computePosition#placement)\n   */\n  placement?: Placement;\n  /**\n   * Modifies whether popover is positioned using transform.\n   * @default true\n   */\n  useTransform?: boolean;\n}\n\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n  const { container, target, arrow, strategy, middleware, placement, useTransform = true } = options;\n  let isDestroyed = false;\n  if (!target || !container) {\n    return {\n      updatePosition: () => undefined,\n      dispose: () => undefined,\n    };\n  }\n\n  let isFirstUpdate = true;\n  const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\n  const targetWindow = container.ownerDocument.defaultView;\n\n  // When the container is first resolved, set position `fixed` to avoid scroll jumps.\n  // Without this scroll jumps can occur when the element is rendered initially and receives focus\n  Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });\n\n  const forceUpdate = () => {\n    // debounced update can still occur afterwards\n    // early return to avoid memory leaks\n    if (isDestroyed) {\n      return;\n    }\n\n    if (isFirstUpdate) {\n      scrollParents.add(getScrollParent(container));\n      if (isHTMLElement(target)) {\n        scrollParents.add(getScrollParent(target));\n      }\n\n      scrollParents.forEach(scrollParent => {\n        scrollParent.addEventListener('scroll', updatePosition);\n      });\n\n      isFirstUpdate = false;\n    }\n\n    Object.assign(container.style, { position: strategy });\n    computePosition(target, container, { placement, middleware, strategy })\n      .then(({ x, y, middlewareData, placement: computedPlacement }) => {\n        // Promise can still resolve after destruction\n        // early return to avoid applying outdated position\n        if (isDestroyed) {\n          return;\n        }\n\n        writeArrowUpdates({ arrow, middlewareData });\n        writeContainerUpdates({\n          container,\n          middlewareData,\n          placement: computedPlacement,\n          coordinates: { x, y },\n          lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n          strategy,\n          useTransform,\n        });\n      })\n      .catch(err => {\n        // https://github.com/floating-ui/floating-ui/issues/1845\n        // FIXME for node > 14\n        // node 15 introduces promise rejection which means that any components\n        // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n        // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n        // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n        // will actually be counter productive\n        if (process.env.NODE_ENV === 'development') {\n          // eslint-disable-next-line no-console\n          console.error('[usePositioning]: Failed to calculate position', err);\n        }\n      });\n  };\n\n  const updatePosition = debounce(() => forceUpdate());\n\n  const dispose = () => {\n    isDestroyed = true;\n\n    if (targetWindow) {\n      targetWindow.removeEventListener('scroll', updatePosition);\n      targetWindow.removeEventListener('resize', updatePosition);\n    }\n\n    scrollParents.forEach(scrollParent => {\n      scrollParent.removeEventListener('scroll', updatePosition);\n    });\n  };\n\n  if (targetWindow) {\n    targetWindow.addEventListener('scroll', updatePosition);\n    targetWindow.addEventListener('resize', updatePosition);\n  }\n\n  // Update the position on initialization\n  updatePosition();\n\n  return {\n    updatePosition,\n    dispose,\n  };\n}\n"],"names":["computePosition","debounce","writeArrowUpdates","writeContainerUpdates","getScrollParent","isHTMLElement","createPositionManager","options","container","target","arrow","strategy","middleware","placement","useTransform","isDestroyed","updatePosition","undefined","dispose","isFirstUpdate","scrollParents","Set","targetWindow","ownerDocument","defaultView","Object","assign","style","position","left","top","margin","forceUpdate","add","forEach","scrollParent","addEventListener","then","x","y","middlewareData","computedPlacement","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","removeEventListener"],"mappings":"AAAA,SAASA,eAAe,QAAQ,mBAAmB;AAGnD,SAASC,QAAQ,EAAEC,iBAAiB,EAAEC,qBAAqB,EAAEC,eAAe,QAAQ,UAAU;AAC9F,SAASC,aAAa,QAAQ,4BAA4B;AAmC1D;;;CAGC,GACD,OAAO,SAASC,sBAAsBC,OAA+B,EAAmB;IACtF,MAAM,EAAEC,UAAS,EAAEC,OAAM,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,WAAU,EAAEC,UAAS,EAAEC,cAAe,IAAI,CAAA,EAAE,GAAGP;IAC3F,IAAIQ,cAAc,KAAK;IACvB,IAAI,CAACN,UAAU,CAACD,WAAW;QACzB,OAAO;YACLQ,gBAAgB,IAAMC;YACtBC,SAAS,IAAMD;QACjB;IACF,CAAC;IAED,IAAIE,gBAAgB,IAAI;IACxB,MAAMC,gBAAkC,IAAIC;IAC5C,MAAMC,eAAed,UAAUe,aAAa,CAACC,WAAW;IAExD,oFAAoF;IACpF,gGAAgG;IAChGC,OAAOC,MAAM,CAAClB,UAAUmB,KAAK,EAAE;QAAEC,UAAU;QAASC,MAAM;QAAGC,KAAK;QAAGC,QAAQ;IAAE;IAE/E,MAAMC,cAAc,IAAM;QACxB,8CAA8C;QAC9C,qCAAqC;QACrC,IAAIjB,aAAa;YACf;QACF,CAAC;QAED,IAAII,eAAe;YACjBC,cAAca,GAAG,CAAC7B,gBAAgBI;YAClC,IAAIH,cAAcI,SAAS;gBACzBW,cAAca,GAAG,CAAC7B,gBAAgBK;YACpC,CAAC;YAEDW,cAAcc,OAAO,CAACC,CAAAA,eAAgB;gBACpCA,aAAaC,gBAAgB,CAAC,UAAUpB;YAC1C;YAEAG,gBAAgB,KAAK;QACvB,CAAC;QAEDM,OAAOC,MAAM,CAAClB,UAAUmB,KAAK,EAAE;YAAEC,UAAUjB;QAAS;QACpDX,gBAAgBS,QAAQD,WAAW;YAAEK;YAAWD;YAAYD;QAAS,GAClE0B,IAAI,CAAC,CAAC,EAAEC,EAAC,EAAEC,EAAC,EAAEC,eAAc,EAAE3B,WAAW4B,kBAAiB,EAAE,GAAK;YAChE,8CAA8C;YAC9C,mDAAmD;YACnD,IAAI1B,aAAa;gBACf;YACF,CAAC;YAEDb,kBAAkB;gBAAEQ;gBAAO8B;YAAe;YAC1CrC,sBAAsB;gBACpBK;gBACAgC;gBACA3B,WAAW4B;gBACXC,aAAa;oBAAEJ;oBAAGC;gBAAE;gBACpBI,QAAQ,AAACrB,CAAAA,CAAAA,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAcsB,gBAAgB,AAAD,KAAK,CAAA,KAAM;gBACjDjC;gBACAG;YACF;QACF,GACC+B,KAAK,CAACC,CAAAA,MAAO;YACZ,yDAAyD;YACzD,sBAAsB;YACtB,uEAAuE;YACvE,wFAAwF;YACxF,4GAA4G;YAC5G,0GAA0G;YAC1G,sCAAsC;YACtC,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;gBAC1C,sCAAsC;gBACtCC,QAAQC,KAAK,CAAC,kDAAkDL;YAClE,CAAC;QACH;IACJ;IAEA,MAAM9B,iBAAiBf,SAAS,IAAM+B;IAEtC,MAAMd,UAAU,IAAM;QACpBH,cAAc,IAAI;QAElB,IAAIO,cAAc;YAChBA,aAAa8B,mBAAmB,CAAC,UAAUpC;YAC3CM,aAAa8B,mBAAmB,CAAC,UAAUpC;QAC7C,CAAC;QAEDI,cAAcc,OAAO,CAACC,CAAAA,eAAgB;YACpCA,aAAaiB,mBAAmB,CAAC,UAAUpC;QAC7C;IACF;IAEA,IAAIM,cAAc;QAChBA,aAAac,gBAAgB,CAAC,UAAUpB;QACxCM,aAAac,gBAAgB,CAAC,UAAUpB;IAC1C,CAAC;IAED,wCAAwC;IACxCA;IAEA,OAAO;QACLA;QACAE;IACF;AACF,CAAC"}