@fluentui/react-positioning 0.0.0-nightly-20230316-0427.1 → 0.0.0-nightly-20230317-1454.1

package/lib/utils/writeContainerupdates.js

@@ -1,9 +1,8 @@
-import { DATA_POSITIONING_ESCAPED, DATA_POSITIONING_HIDDEN, DATA_POSITIONING_INTERSECTING, DATA_POSITIONING_PLACEMENT } from '../constants';
+import { DATA_POSITIONING_ESCAPED, DATA_POSITIONING_HIDDEN, DATA_POSITIONING_INTERSECTING, DATA_POSITIONING_PLACEMENT } from "../constants";
 /**
  * Writes all container element position updates after the position is computed
  */
 export function writeContainerUpdates(options) {
-  var _a, _b, _c;
   const {
     container,
     placement,
@@ -18,21 +17,21 @@ export function writeContainerUpdates(options) {
   container.setAttribute(DATA_POSITIONING_PLACEMENT, placement);
   container.removeAttribute(DATA_POSITIONING_INTERSECTING);
   if (middlewareData.intersectionObserver.intersecting) {
-    container.setAttribute(DATA_POSITIONING_INTERSECTING, '');
+    container.setAttribute(DATA_POSITIONING_INTERSECTING, "");
   }
   container.removeAttribute(DATA_POSITIONING_ESCAPED);
-  if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.escaped) {
-    container.setAttribute(DATA_POSITIONING_ESCAPED, '');
+  if (middlewareData.hide?.escaped) {
+    container.setAttribute(DATA_POSITIONING_ESCAPED, "");
   }
   container.removeAttribute(DATA_POSITIONING_HIDDEN);
-  if ((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) {
-    container.setAttribute(DATA_POSITIONING_HIDDEN, '');
+  if (middlewareData.hide?.referenceHidden) {
+    container.setAttribute(DATA_POSITIONING_HIDDEN, "");
   }
   // Round so that the coordinates land on device pixels.
   // This prevents blurriness in cases where the browser doesn't apply pixel snapping, such as when other effects like
   // `backdrop-filter: blur()` are applied to the container, and the browser is zoomed in.
   // See https://github.com/microsoft/fluentui/issues/26764 for more info.
-  const devicePixelRatio = ((_c = container.ownerDocument.defaultView) === null || _c === void 0 ? void 0 : _c.devicePixelRatio) || 1;
+  const devicePixelRatio = container.ownerDocument.defaultView?.devicePixelRatio || 1;
   const x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;
   const y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;
   Object.assign(container.style, {

package/lib/utils/writeContainerupdates.js.map

@@ -1 +1 @@
-{"version":3,"names":["DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_PLACEMENT","writeContainerUpdates","options","container","placement","middlewareData","strategy","lowPPI","coordinates","setAttribute","removeAttribute","intersectionObserver","intersecting","_a","hide","escaped","_b","referenceHidden","devicePixelRatio","_c","ownerDocument","defaultView","x","Math","round","y","Object","assign","style","transform","position"],"sources":["../../../../../../../../packages/react-components/react-positioning/src/utils/writeContainerupdates.ts"],"sourcesContent":["import type { Placement, MiddlewareData, Strategy, Coords } from '@floating-ui/dom';\nimport {\n  DATA_POSITIONING_ESCAPED,\n  DATA_POSITIONING_HIDDEN,\n  DATA_POSITIONING_INTERSECTING,\n  DATA_POSITIONING_PLACEMENT,\n} from '../constants';\n\n/**\n * Writes all container element position updates after the position is computed\n */\nexport function writeContainerUpdates(options: {\n  container: HTMLElement | null;\n  placement: Placement;\n  middlewareData: MiddlewareData;\n  /**\n   * Layer acceleration can disable subpixel rendering which causes slightly\n   * blurry text on low PPI displays, so we want to use 2D transforms\n   * instead\n   */\n  lowPPI: boolean;\n  strategy: Strategy;\n  coordinates: Coords;\n}) {\n  const { container, placement, middlewareData, strategy, lowPPI, coordinates } = options;\n  if (!container) {\n    return;\n  }\n  container.setAttribute(DATA_POSITIONING_PLACEMENT, placement);\n  container.removeAttribute(DATA_POSITIONING_INTERSECTING);\n  if (middlewareData.intersectionObserver.intersecting) {\n    container.setAttribute(DATA_POSITIONING_INTERSECTING, '');\n  }\n\n  container.removeAttribute(DATA_POSITIONING_ESCAPED);\n  if (middlewareData.hide?.escaped) {\n    container.setAttribute(DATA_POSITIONING_ESCAPED, '');\n  }\n\n  container.removeAttribute(DATA_POSITIONING_HIDDEN);\n  if (middlewareData.hide?.referenceHidden) {\n    container.setAttribute(DATA_POSITIONING_HIDDEN, '');\n  }\n\n  // Round so that the coordinates land on device pixels.\n  // This prevents blurriness in cases where the browser doesn't apply pixel snapping, such as when other effects like\n  // `backdrop-filter: blur()` are applied to the container, and the browser is zoomed in.\n  // See https://github.com/microsoft/fluentui/issues/26764 for more info.\n  const devicePixelRatio = container.ownerDocument.defaultView?.devicePixelRatio || 1;\n  const x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;\n  const y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;\n\n  Object.assign(container.style, {\n    transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,\n    position: strategy,\n  });\n}\n"],"mappings":"AACA,SACEA,wBAAwB,EACxBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB,cAAc;AAErB;;;AAGA,OAAM,SAAUC,qBAAqBA,CAACC,OAYrC;;EACC,MAAM;IAAEC,SAAS;IAAEC,SAAS;IAAEC,cAAc;IAAEC,QAAQ;IAAEC,MAAM;IAAEC;EAAW,CAAE,GAAGN,OAAO;EACvF,IAAI,CAACC,SAAS,EAAE;IACd;;EAEFA,SAAS,CAACM,YAAY,CAACT,0BAA0B,EAAEI,SAAS,CAAC;EAC7DD,SAAS,CAACO,eAAe,CAACX,6BAA6B,CAAC;EACxD,IAAIM,cAAc,CAACM,oBAAoB,CAACC,YAAY,EAAE;IACpDT,SAAS,CAACM,YAAY,CAACV,6BAA6B,EAAE,EAAE,CAAC;;EAG3DI,SAAS,CAACO,eAAe,CAACb,wBAAwB,CAAC;EACnD,IAAI,CAAAgB,EAAA,GAAAR,cAAc,CAACS,IAAI,cAAAD,EAAA,uBAAAA,EAAA,CAAEE,OAAO,EAAE;IAChCZ,SAAS,CAACM,YAAY,CAACZ,wBAAwB,EAAE,EAAE,CAAC;;EAGtDM,SAAS,CAACO,eAAe,CAACZ,uBAAuB,CAAC;EAClD,IAAI,CAAAkB,EAAA,GAAAX,cAAc,CAACS,IAAI,cAAAE,EAAA,uBAAAA,EAAA,CAAEC,eAAe,EAAE;IACxCd,SAAS,CAACM,YAAY,CAACX,uBAAuB,EAAE,EAAE,CAAC;;EAGrD;EACA;EACA;EACA;EACA,MAAMoB,gBAAgB,GAAG,EAAAC,EAAA,GAAAhB,SAAS,CAACiB,aAAa,CAACC,WAAW,cAAAF,EAAA,uBAAAA,EAAA,CAAED,gBAAgB,KAAI,CAAC;EACnF,MAAMI,CAAC,GAAGC,IAAI,CAACC,KAAK,CAAChB,WAAW,CAACc,CAAC,GAAGJ,gBAAgB,CAAC,GAAGA,gBAAgB;EACzE,MAAMO,CAAC,GAAGF,IAAI,CAACC,KAAK,CAAChB,WAAW,CAACiB,CAAC,GAAGP,gBAAgB,CAAC,GAAGA,gBAAgB;EAEzEQ,MAAM,CAACC,MAAM,CAACxB,SAAS,CAACyB,KAAK,EAAE;IAC7BC,SAAS,EAAEtB,MAAM,GAAG,aAAae,CAAC,OAAOG,CAAC,KAAK,GAAG,eAAeH,CAAC,OAAOG,CAAC,QAAQ;IAClFK,QAAQ,EAAExB;GACX,CAAC;AACJ"}
+{"version":3,"names":["DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_PLACEMENT","writeContainerUpdates","options","container","placement","middlewareData","strategy","lowPPI","coordinates","setAttribute","removeAttribute","intersectionObserver","intersecting","hide","escaped","referenceHidden","devicePixelRatio","ownerDocument","defaultView","x","Math","round","y","Object","assign","style","transform","position"],"sources":["../../src/utils/writeContainerupdates.ts"],"sourcesContent":["import type { Placement, MiddlewareData, Strategy, Coords } from '@floating-ui/dom';\nimport {\n  DATA_POSITIONING_ESCAPED,\n  DATA_POSITIONING_HIDDEN,\n  DATA_POSITIONING_INTERSECTING,\n  DATA_POSITIONING_PLACEMENT,\n} from '../constants';\n\n/**\n * Writes all container element position updates after the position is computed\n */\nexport function writeContainerUpdates(options: {\n  container: HTMLElement | null;\n  placement: Placement;\n  middlewareData: MiddlewareData;\n  /**\n   * Layer acceleration can disable subpixel rendering which causes slightly\n   * blurry text on low PPI displays, so we want to use 2D transforms\n   * instead\n   */\n  lowPPI: boolean;\n  strategy: Strategy;\n  coordinates: Coords;\n}) {\n  const { container, placement, middlewareData, strategy, lowPPI, coordinates } = options;\n  if (!container) {\n    return;\n  }\n  container.setAttribute(DATA_POSITIONING_PLACEMENT, placement);\n  container.removeAttribute(DATA_POSITIONING_INTERSECTING);\n  if (middlewareData.intersectionObserver.intersecting) {\n    container.setAttribute(DATA_POSITIONING_INTERSECTING, '');\n  }\n\n  container.removeAttribute(DATA_POSITIONING_ESCAPED);\n  if (middlewareData.hide?.escaped) {\n    container.setAttribute(DATA_POSITIONING_ESCAPED, '');\n  }\n\n  container.removeAttribute(DATA_POSITIONING_HIDDEN);\n  if (middlewareData.hide?.referenceHidden) {\n    container.setAttribute(DATA_POSITIONING_HIDDEN, '');\n  }\n\n  // Round so that the coordinates land on device pixels.\n  // This prevents blurriness in cases where the browser doesn't apply pixel snapping, such as when other effects like\n  // `backdrop-filter: blur()` are applied to the container, and the browser is zoomed in.\n  // See https://github.com/microsoft/fluentui/issues/26764 for more info.\n  const devicePixelRatio = container.ownerDocument.defaultView?.devicePixelRatio || 1;\n  const x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;\n  const y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;\n\n  Object.assign(container.style, {\n    transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,\n    position: strategy,\n  });\n}\n"],"mappings":"AACA,SACEA,wBAAwB,EACxBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB;AAEP;;;AAGA,OAAO,SAASC,sBAAsBC,OAYrC,EAAE;EACD,MAAM;IAAEC,SAAA;IAAWC,SAAA;IAAWC,cAAA;IAAgBC,QAAA;IAAUC,MAAA;IAAQC;EAAW,CAAE,GAAGN,OAAA;EAChF,IAAI,CAACC,SAAA,EAAW;IACd;EACF;EACAA,SAAA,CAAUM,YAAY,CAACT,0BAAA,EAA4BI,SAAA;EACnDD,SAAA,CAAUO,eAAe,CAACX,6BAAA;EAC1B,IAAIM,cAAA,CAAeM,oBAAoB,CAACC,YAAY,EAAE;IACpDT,SAAA,CAAUM,YAAY,CAACV,6BAAA,EAA+B;EACxD;EAEAI,SAAA,CAAUO,eAAe,CAACb,wBAAA;EAC1B,IAAIQ,cAAA,CAAeQ,IAAI,EAAEC,OAAA,EAAS;IAChCX,SAAA,CAAUM,YAAY,CAACZ,wBAAA,EAA0B;EACnD;EAEAM,SAAA,CAAUO,eAAe,CAACZ,uBAAA;EAC1B,IAAIO,cAAA,CAAeQ,IAAI,EAAEE,eAAA,EAAiB;IACxCZ,SAAA,CAAUM,YAAY,CAACX,uBAAA,EAAyB;EAClD;EAEA;EACA;EACA;EACA;EACA,MAAMkB,gBAAA,GAAmBb,SAAA,CAAUc,aAAa,CAACC,WAAW,EAAEF,gBAAA,IAAoB;EAClF,MAAMG,CAAA,GAAIC,IAAA,CAAKC,KAAK,CAACb,WAAA,CAAYW,CAAC,GAAGH,gBAAA,IAAoBA,gBAAA;EACzD,MAAMM,CAAA,GAAIF,IAAA,CAAKC,KAAK,CAACb,WAAA,CAAYc,CAAC,GAAGN,gBAAA,IAAoBA,gBAAA;EAEzDO,MAAA,CAAOC,MAAM,CAACrB,SAAA,CAAUsB,KAAK,EAAE;IAC7BC,SAAA,EAAWnB,MAAA,GAAU,aAAYY,CAAE,OAAMG,CAAE,KAAI,GAAI,eAAcH,CAAE,OAAMG,CAAE,QAAO;IAClFK,QAAA,EAAUrB;EACZ;AACF"}

package/lib-commonjs/constants.js

@@ -1,11 +1,22 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DATA_POSITIONING_INTERSECTING: ()=>DATA_POSITIONING_INTERSECTING,
+    DATA_POSITIONING_ESCAPED: ()=>DATA_POSITIONING_ESCAPED,
+    DATA_POSITIONING_HIDDEN: ()=>DATA_POSITIONING_HIDDEN,
+    DATA_POSITIONING_PLACEMENT: ()=>DATA_POSITIONING_PLACEMENT
 });
-exports.DATA_POSITIONING_PLACEMENT = exports.DATA_POSITIONING_HIDDEN = exports.DATA_POSITIONING_ESCAPED = exports.DATA_POSITIONING_INTERSECTING = void 0;
-exports.DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';
-exports.DATA_POSITIONING_ESCAPED = 'data-popper-escaped';
-exports.DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';
-exports.DATA_POSITIONING_PLACEMENT = 'data-popper-placement';
+const DATA_POSITIONING_INTERSECTING = "data-popper-is-intersecting";
+const DATA_POSITIONING_ESCAPED = "data-popper-escaped";
+const DATA_POSITIONING_HIDDEN = "data-popper-reference-hidden";
+const DATA_POSITIONING_PLACEMENT = "data-popper-placement"; //# sourceMappingURL=constants.js.map
+
 //# sourceMappingURL=constants.js.map

package/lib-commonjs/constants.js.map

@@ -1 +1 @@
-{"version":3,"names":["exports","DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT"],"sources":["../../../../../../../packages/react-components/react-positioning/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":";;;;;;AAAaA,OAAA,CAAAC,6BAA6B,GAAG,6BAA6B;AAC7DD,OAAA,CAAAE,wBAAwB,GAAG,qBAAqB;AAChDF,OAAA,CAAAG,uBAAuB,GAAG,8BAA8B;AACxDH,OAAA,CAAAI,0BAA0B,GAAG,uBAAuB"}
+{"version":3,"sources":["../lib/constants.js"],"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//# sourceMappingURL=constants.js.map"],"names":["DATA_POSITIONING_INTERSECTING","DATA_POSITIONING_ESCAPED","DATA_POSITIONING_HIDDEN","DATA_POSITIONING_PLACEMENT"],"mappings":";;;;;;;;;;;IAAaA,6BAA6B,MAA7BA;IACAC,wBAAwB,MAAxBA;IACAC,uBAAuB,MAAvBA;IACAC,0BAA0B,MAA1BA;;AAHN,MAAMH,gCAAgC;AACtC,MAAMC,2BAA2B;AACjC,MAAMC,0BAA0B;AAChC,MAAMC,6BAA6B,yBAC1C,qCAAqC"}

package/lib-commonjs/createArrowStyles.js

@@ -1,95 +1,67 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    createArrowStyles: ()=>createArrowStyles,
+    createArrowHeightStyles: ()=>createArrowHeightStyles
 });
-exports.createArrowHeightStyles = exports.createArrowStyles = void 0;
-const react_1 = /*#__PURE__*/require("@griffel/react");
-const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-/**
- * @internal
- * 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({ arrowHeight: 6 }),
- *
- *     arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),
- *     mediumArrow: createArrowHeightStyles(4),
- *     smallArrow: createArrowHeightStyles(2),
- *   })
- *   ...
- *
- *   state.arrowWithSize.className = styles.arrowWithSize;
- *   state.arrowWithoutSize.className = mergeClasses(
- *     styles.arrowWithoutSize,
- *     state.smallArrow && styles.smallArrow,
- *     state.mediumArrow && styles.mediumArrow,
- *   )
- * ```
- */
+const _react = require("@griffel/react");
+const _reactTheme = require("@fluentui/react-theme");
 function createArrowStyles(options) {
-  const {
-    arrowHeight,
-    borderWidth = '1px',
-    borderStyle = 'solid',
-    borderColor = react_theme_1.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',
-      ...react_1.shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
-      ...react_1.shorthands.borderBottom(borderWidth, borderStyle, borderColor),
-      borderBottomRightRadius: react_theme_1.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'
-    }
-  };
+    const { arrowHeight , borderWidth ="1px" , borderStyle ="solid" , borderColor =_reactTheme.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",
+            ..._react.shorthands.borderRight(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),
+            ..._react.shorthands.borderBottom(borderWidth, borderStyle, borderColor),
+            borderBottomRightRadius: _reactTheme.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"
+        }
+    };
 }
-exports.createArrowStyles = createArrowStyles;
-/**
- * @internal
- * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
- *
- * 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.
- */
 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
-  };
-}
-exports.createArrowHeightStyles = createArrowHeightStyles;
+    // 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
+
 //# sourceMappingURL=createArrowStyles.js.map

package/lib-commonjs/createArrowStyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["react_1","require","react_theme_1","createArrowStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","tokens","colorTransparentStroke","position","backgroundColor","visibility","zIndex","createArrowHeightStyles","content","boxSizing","width","height","shorthands","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","exports","edgeLength"],"sources":["../../../../../../../packages/react-components/react-positioning/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,MAAAA,OAAA,gBAAAC,OAAA;AACA,MAAAC,aAAA,gBAAAD,OAAA;AAsCA;;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAgBE,iBAAiBA,CAACC,OAAiC;EACjE,MAAM;IACJC,WAAW;IACXC,WAAW,GAAG,KAAK;IACnBC,WAAW,GAAG,OAAO;IACrBC,WAAW,GAAGN,aAAA,CAAAO,MAAM,CAACC;EAAsB,CAC5C,GAAGN,OAAO;EAEX,OAAO;IACLO,QAAQ,EAAE,UAAU;IACpBC,eAAe,EAAE,SAAS;IAC1BC,UAAU,EAAE,QAAQ;IACpBC,MAAM,EAAE,CAAC,CAAC;IAEV,IAAIT,WAAW,IAAIU,uBAAuB,CAACV,WAAW,CAAC,CAAC;IAExD,UAAU,EAAE;MACVW,OAAO,EAAE,IAAI;MACbH,UAAU,EAAE,SAAS;MACrBF,QAAQ,EAAE,UAAU;MACpBM,SAAS,EAAE,YAAY;MACvBC,KAAK,EAAE,SAAS;MAChBC,MAAM,EAAE,SAAS;MACjBP,eAAe,EAAE,SAAS;MAC1B,GAAGZ,OAAA,CAAAoB,UAAU,CAACC,WAAW,CACvB,GAAGf,WAAW,gBAAgB,EAC9B,GAAGC,WAAW,gBAAgB,EAC9B,GAAGC,WAAW,gBAAgB,CAC/B;MACD,GAAGR,OAAA,CAAAoB,UAAU,CAACE,YAAY,CAAChB,WAAW,EAAEC,WAAW,EAAEC,WAAW,CAAC;MACjEe,uBAAuB,EAAErB,aAAA,CAAAO,MAAM,CAACe,iBAAiB;MACjDC,SAAS,EAAE;KACZ;IAED;IACA,yCAAyC,EAAE;MACzCC,MAAM,EAAE,IAAIpB,WAAW,EAAE;MACzB,SAAS,EAAE;KACZ;IACD,2CAA2C,EAAE;MAC3CqB,IAAI,EAAE,IAAIrB,WAAW,gBAAgB;MACrC,SAAS,EAAE;KACZ;IACD,4CAA4C,EAAE;MAC5CsB,GAAG,EAAE,IAAItB,WAAW,EAAE;MACtB,SAAS,EAAE;KACZ;IACD,0CAA0C,EAAE;MAC1CuB,KAAK,EAAE,IAAIvB,WAAW,gBAAgB;MACtC,SAAS,EAAE;;GAEd;AACH;AApDAwB,OAAA,CAAA3B,iBAAA,GAAAA,iBAAA;AAsDA;;;;;;;AAOA,SAAgBY,uBAAuBA,CAACV,WAAmB;EACzD;EACA;EACA,MAAM0B,UAAU,GAAG,GAAG,KAAK,GAAG1B,WAAW,IAAI;EAC7C,OAAO;IAAEa,KAAK,EAAEa,UAAU;IAAEZ,MAAM,EAAEY;EAAU,CAAE;AAClD;AALAD,OAAA,CAAAf,uBAAA,GAAAA,uBAAA"}
+{"version":3,"sources":["../lib/createArrowStyles.js"],"sourcesContent":["import { shorthands } from \"@griffel/react\";\nimport { tokens } from \"@fluentui/react-theme\";\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) {\n  const {\n    arrowHeight,\n    borderWidth = \"1px\",\n    borderStyle = \"solid\",\n    borderColor = tokens.colorTransparentStroke\n  } = options;\n  return {\n    position: \"absolute\",\n    backgroundColor: \"inherit\",\n    visibility: \"hidden\",\n    zIndex: -1,\n    ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\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(`${borderWidth} /* @noflip */`, `${borderStyle} /* @noflip */`, `${borderColor} /* @noflip */`),\n      ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n      borderBottomRightRadius: tokens.borderRadiusSmall,\n      transform: \"rotate(var(--angle)) translate(0, 50%) rotate(45deg)\"\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 * @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) {\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 {\n    width: edgeLength,\n    height: edgeLength\n  };\n}\n//# sourceMappingURL=createArrowStyles.js.map"],"names":["createArrowStyles","createArrowHeightStyles","options","arrowHeight","borderWidth","borderStyle","borderColor","tokens","colorTransparentStroke","position","backgroundColor","visibility","zIndex","content","boxSizing","width","height","shorthands","borderRight","borderBottom","borderBottomRightRadius","borderRadiusSmall","transform","bottom","left","top","right","edgeLength"],"mappings":";;;;;;;;;;;IAyBgBA,iBAAiB,MAAjBA;IAoDAC,uBAAuB,MAAvBA;;uBA7EW;4BACJ;AAwBhB,SAASD,kBAAkBE,OAAO,EAAE;IACzC,MAAM,EACJC,YAAW,EACXC,aAAc,MAAK,EACnBC,aAAc,QAAO,EACrBC,aAAcC,kBAAM,CAACC,sBAAsB,CAAA,EAC5C,GAAGN;IACJ,OAAO;QACLO,UAAU;QACVC,iBAAiB;QACjBC,YAAY;QACZC,QAAQ,CAAC;QACT,GAAIT,eAAeF,wBAAwBE,YAAY;QACvD,YAAY;YACVU,SAAS;YACTF,YAAY;YACZF,UAAU;YACVK,WAAW;YACXC,OAAO;YACPC,QAAQ;YACRN,iBAAiB;YACjB,GAAGO,iBAAU,CAACC,WAAW,CAAC,CAAC,EAAEd,YAAY,cAAc,CAAC,EAAE,CAAC,EAAEC,YAAY,cAAc,CAAC,EAAE,CAAC,EAAEC,YAAY,cAAc,CAAC,CAAC;YACzH,GAAGW,iBAAU,CAACE,YAAY,CAACf,aAAaC,aAAaC,YAAY;YACjEc,yBAAyBb,kBAAM,CAACc,iBAAiB;YACjDC,WAAW;QACb;QACA,0FAA0F;QAC1F,2CAA2C;YACzCC,QAAQ,CAAC,CAAC,EAAEnB,YAAY,CAAC;YACzB,WAAW;QACb;QACA,6CAA6C;YAC3CoB,MAAM,CAAC,CAAC,EAAEpB,YAAY,cAAc,CAAC;YACrC,WAAW;QACb;QACA,8CAA8C;YAC5CqB,KAAK,CAAC,CAAC,EAAErB,YAAY,CAAC;YACtB,WAAW;QACb;QACA,4CAA4C;YAC1CsB,OAAO,CAAC,CAAC,EAAEtB,YAAY,cAAc,CAAC;YACtC,WAAW;QACb;IACF;AACF;AAQO,SAASH,wBAAwBE,WAAW,EAAE;IACnD,qGAAqG;IACrG,wEAAwE;IACxE,MAAMwB,aAAa,CAAC,EAAE,QAAQxB,YAAY,EAAE,CAAC;IAC7C,OAAO;QACLY,OAAOY;QACPX,QAAQW;IACV;AACF,EACA,6CAA6C"}

package/lib-commonjs/createPositionManager.js

@@ -1,127 +1,113 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "createPositionManager", {
+    enumerable: true,
+    get: ()=>createPositionManager
 });
-exports.createPositionManager = void 0;
-const dom_1 = /*#__PURE__*/require("@floating-ui/dom");
-const utils_1 = /*#__PURE__*/require("./utils");
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-/**
- * @internal
- * @returns manager that handles positioning out of the react lifecycle
- */
+const _dom = require("@floating-ui/dom");
+const _utils = require("./utils");
+const _reactUtilities = require("@fluentui/react-utilities");
 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(utils_1.getScrollParent(container));
-      if (react_utilities_1.isHTMLElement(target)) {
-        scrollParents.add(utils_1.getScrollParent(target));
-      }
-      scrollParents.forEach(scrollParent => {
-        scrollParent.addEventListener('scroll', updatePosition);
-      });
-      isFirstUpdate = false;
+    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: strategy
-    });
-    dom_1.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;
-      }
-      utils_1.writeArrowUpdates({
-        arrow,
-        middlewareData
-      });
-      utils_1.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);
-      }
+        position: "fixed",
+        left: 0,
+        top: 0,
+        margin: 0
     });
-  };
-  const updatePosition = utils_1.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((0, _utils.getScrollParent)(container));
+            if ((0, _reactUtilities.isHTMLElement)(target)) {
+                scrollParents.add((0, _utils.getScrollParent)(target));
+            }
+            scrollParents.forEach((scrollParent)=>{
+                scrollParent.addEventListener("scroll", updatePosition);
+            });
+            isFirstUpdate = false;
+        }
+        Object.assign(container.style, {
+            position: strategy
+        });
+        (0, _dom.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;
+            }
+            (0, _utils.writeArrowUpdates)({
+                arrow,
+                middlewareData
+            });
+            (0, _utils.writeContainerUpdates)({
+                container,
+                middlewareData,
+                placement: computedPlacement,
+                coordinates: {
+                    x,
+                    y
+                },
+                lowPPI: (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 = (0, _utils.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
-  };
-}
-exports.createPositionManager = createPositionManager;
+    // Update the position on initialization
+    updatePosition();
+    return {
+        updatePosition,
+        dispose
+    };
+} //# sourceMappingURL=createPositionManager.js.map
+
 //# sourceMappingURL=createPositionManager.js.map

package/lib-commonjs/createPositionManager.js.map

@@ -1 +1 @@
-{"version":3,"names":["dom_1","require","utils_1","react_utilities_1","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","getScrollParent","isHTMLElement","forEach","scrollParent","addEventListener","computePosition","then","x","y","middlewareData","computedPlacement","writeArrowUpdates","writeContainerUpdates","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","debounce","removeEventListener","exports"],"sources":["../../../../../../../packages/react-components/react-positioning/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":"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"}
+{"version":3,"sources":["../lib/createPositionManager.js"],"sourcesContent":["import { computePosition } from \"@floating-ui/dom\";\nimport { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from \"./utils\";\nimport { isHTMLElement } from \"@fluentui/react-utilities\";\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options) {\n  const {\n    container,\n    target,\n    arrow,\n    strategy,\n    middleware,\n    placement\n  } = options;\n  let isDestroyed = false;\n  if (!target || !container) {\n    return {\n      updatePosition: () => undefined,\n      dispose: () => undefined\n    };\n  }\n  let isFirstUpdate = true;\n  const scrollParents = new Set();\n  const targetWindow = container.ownerDocument.defaultView;\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, {\n    position: \"fixed\",\n    left: 0,\n    top: 0,\n    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    if (isFirstUpdate) {\n      scrollParents.add(getScrollParent(container));\n      if (isHTMLElement(target)) {\n        scrollParents.add(getScrollParent(target));\n      }\n      scrollParents.forEach(scrollParent => {\n        scrollParent.addEventListener(\"scroll\", updatePosition);\n      });\n      isFirstUpdate = false;\n    }\n    Object.assign(container.style, {\n      position: strategy\n    });\n    computePosition(target, container, {\n      placement,\n      middleware,\n      strategy\n    }).then(({\n      x,\n      y,\n      middlewareData,\n      placement: computedPlacement\n    }) => {\n      // Promise can still resolve after destruction\n      // early return to avoid applying outdated position\n      if (isDestroyed) {\n        return;\n      }\n      writeArrowUpdates({\n        arrow,\n        middlewareData\n      });\n      writeContainerUpdates({\n        container,\n        middlewareData,\n        placement: computedPlacement,\n        coordinates: {\n          x,\n          y\n        },\n        lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n        strategy\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  const updatePosition = debounce(() => forceUpdate());\n  const dispose = () => {\n    isDestroyed = true;\n    if (targetWindow) {\n      targetWindow.removeEventListener(\"scroll\", updatePosition);\n      targetWindow.removeEventListener(\"resize\", updatePosition);\n    }\n    scrollParents.forEach(scrollParent => {\n      scrollParent.removeEventListener(\"scroll\", updatePosition);\n    });\n  };\n  if (targetWindow) {\n    targetWindow.addEventListener(\"scroll\", updatePosition);\n    targetWindow.addEventListener(\"resize\", updatePosition);\n  }\n  // Update the position on initialization\n  updatePosition();\n  return {\n    updatePosition,\n    dispose\n  };\n}\n//# sourceMappingURL=createPositionManager.js.map"],"names":["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","getScrollParent","isHTMLElement","forEach","scrollParent","addEventListener","computePosition","then","x","y","middlewareData","computedPlacement","writeArrowUpdates","writeContainerUpdates","coordinates","lowPPI","devicePixelRatio","catch","err","process","env","NODE_ENV","console","error","debounce","removeEventListener"],"mappings":";;;;+BAOgBA;;aAAAA;;qBAPgB;uBACoD;gCACtD;AAKvB,SAASA,sBAAsBC,OAAO,EAAE;IAC7C,MAAM,EACJC,UAAS,EACTC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRC,WAAU,EACVC,UAAS,EACV,GAAGN;IACJ,IAAIO,cAAc,KAAK;IACvB,IAAI,CAACL,UAAU,CAACD,WAAW;QACzB,OAAO;YACLO,gBAAgB,IAAMC;YACtBC,SAAS,IAAMD;QACjB;IACF,CAAC;IACD,IAAIE,gBAAgB,IAAI;IACxB,MAAMC,gBAAgB,IAAIC;IAC1B,MAAMC,eAAeb,UAAUc,aAAa,CAACC,WAAW;IACxD,oFAAoF;IACpF,gGAAgG;IAChGC,OAAOC,MAAM,CAACjB,UAAUkB,KAAK,EAAE;QAC7BC,UAAU;QACVC,MAAM;QACNC,KAAK;QACLC,QAAQ;IACV;IACA,MAAMC,cAAc,IAAM;QACxB,8CAA8C;QAC9C,qCAAqC;QACrC,IAAIjB,aAAa;YACf;QACF,CAAC;QACD,IAAII,eAAe;YACjBC,cAAca,GAAG,CAACC,IAAAA,sBAAe,EAACzB;YAClC,IAAI0B,IAAAA,6BAAa,EAACzB,SAAS;gBACzBU,cAAca,GAAG,CAACC,IAAAA,sBAAe,EAACxB;YACpC,CAAC;YACDU,cAAcgB,OAAO,CAACC,CAAAA,eAAgB;gBACpCA,aAAaC,gBAAgB,CAAC,UAAUtB;YAC1C;YACAG,gBAAgB,KAAK;QACvB,CAAC;QACDM,OAAOC,MAAM,CAACjB,UAAUkB,KAAK,EAAE;YAC7BC,UAAUhB;QACZ;QACA2B,IAAAA,oBAAe,EAAC7B,QAAQD,WAAW;YACjCK;YACAD;YACAD;QACF,GAAG4B,IAAI,CAAC,CAAC,EACPC,EAAC,EACDC,EAAC,EACDC,eAAc,EACd7B,WAAW8B,kBAAiB,EAC7B,GAAK;YACJ,8CAA8C;YAC9C,mDAAmD;YACnD,IAAI7B,aAAa;gBACf;YACF,CAAC;YACD8B,IAAAA,wBAAiB,EAAC;gBAChBlC;gBACAgC;YACF;YACAG,IAAAA,4BAAqB,EAAC;gBACpBrC;gBACAkC;gBACA7B,WAAW8B;gBACXG,aAAa;oBACXN;oBACAC;gBACF;gBACAM,QAAQ,AAAC1B,CAAAA,cAAc2B,oBAAoB,CAAA,KAAM;gBACjDrC;YACF;QACF,GAAGsC,KAAK,CAACC,CAAAA,MAAO;YACd,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;IACF;IACA,MAAMnC,iBAAiByC,IAAAA,eAAQ,EAAC,IAAMzB;IACtC,MAAMd,UAAU,IAAM;QACpBH,cAAc,IAAI;QAClB,IAAIO,cAAc;YAChBA,aAAaoC,mBAAmB,CAAC,UAAU1C;YAC3CM,aAAaoC,mBAAmB,CAAC,UAAU1C;QAC7C,CAAC;QACDI,cAAcgB,OAAO,CAACC,CAAAA,eAAgB;YACpCA,aAAaqB,mBAAmB,CAAC,UAAU1C;QAC7C;IACF;IACA,IAAIM,cAAc;QAChBA,aAAagB,gBAAgB,CAAC,UAAUtB;QACxCM,aAAagB,gBAAgB,CAAC,UAAUtB;IAC1C,CAAC;IACD,wCAAwC;IACxCA;IACA,OAAO;QACLA;QACAE;IACF;AACF,EACA,iDAAiD"}