@fluentui/react-positioning 9.4.0 → 9.4.2

package/CHANGELOG.json

@@ -2,7 +2,37 @@
   "name": "@fluentui/react-positioning",
   "entries": [
     {
-      "date": "Fri, 10 Feb 2023 08:46:44 GMT",
+      "date": "Mon, 13 Feb 2023 23:40:50 GMT",
+      "tag": "@fluentui/react-positioning_v9.4.2",
+      "version": "9.4.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-utilities to v9.5.3",
+            "commit": "29e62b13706c2845b21d665d43cdacf1ef1b1513"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 13 Feb 2023 09:35:47 GMT",
+      "tag": "@fluentui/react-positioning_v9.4.1",
+      "version": "9.4.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "behowell@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "0565ec044c06af355f951e158c0e68611a1d8861",
+            "comment": "fix: Coordinates should be rounded to device pixels to prevent blurriness"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 10 Feb 2023 08:49:59 GMT",
       "tag": "@fluentui/react-positioning_v9.4.0",
       "version": "9.4.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Fri, 10 Feb 2023 08:46:44 GMT and should not be manually modified.
+This log was last generated on Mon, 13 Feb 2023 23:40:50 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.4.2)
+
+Mon, 13 Feb 2023 23:40:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.4.1..@fluentui/react-positioning_v9.4.2)
+
+### Patches
+
+- Bump @fluentui/react-utilities to v9.5.3 ([PR #26814](https://github.com/microsoft/fluentui/pull/26814) by beachball)
+
+## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.4.1)
+
+Mon, 13 Feb 2023 09:35:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.4.0..@fluentui/react-positioning_v9.4.1)
+
+### Patches
+
+- fix: Coordinates should be rounded to device pixels to prevent blurriness ([PR #26766](https://github.com/microsoft/fluentui/pull/26766) by behowell@microsoft.com)
+
 ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.4.0)
 
-Fri, 10 Feb 2023 08:46:44 GMT 
+Fri, 10 Feb 2023 08:49:59 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.3.11..@fluentui/react-positioning_v9.4.0)
 
 ### Minor changes

package/lib/utils/writeContainerupdates.js

@@ -3,7 +3,7 @@ import { DATA_POSITIONING_ESCAPED, DATA_POSITIONING_HIDDEN, DATA_POSITIONING_INT
  * Writes all container element position updates after the position is computed
  */
 export function writeContainerUpdates(options) {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     container,
     placement,
@@ -28,8 +28,13 @@ export function writeContainerUpdates(options) {
   if ((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) {
     container.setAttribute(DATA_POSITIONING_HIDDEN, '');
   }
-  const x = Math.round(coordinates.x);
-  const y = Math.round(coordinates.y);
+  // 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 x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;
+  const y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;
   Object.assign(container.style, {
     transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,
     position: strategy

package/lib/utils/writeContainerupdates.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SACEA,wBAAwB,EACxBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB,cAAc;AAErB;;;AAGA,OAAM,SAAUC,qBAAqB,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,oBAAc,CAACgB,IAAI,0CAAEC,OAAO,EAAE;IAChCX,SAAS,CAACM,YAAY,CAACZ,wBAAwB,EAAE,EAAE,CAAC;;EAGtDM,SAAS,CAACO,eAAe,CAACZ,uBAAuB,CAAC;EAClD,IAAI,oBAAc,CAACe,IAAI,0CAAEE,eAAe,EAAE;IACxCZ,SAAS,CAACM,YAAY,CAACX,uBAAuB,EAAE,EAAE,CAAC;;EAGrD,MAAMkB,CAAC,GAAGC,IAAI,CAACC,KAAK,CAACV,WAAW,CAACQ,CAAC,CAAC;EACnC,MAAMG,CAAC,GAAGF,IAAI,CAACC,KAAK,CAACV,WAAW,CAACW,CAAC,CAAC;EAEnCC,MAAM,CAACC,MAAM,CAAClB,SAAS,CAACmB,KAAK,EAAE;IAC7BC,SAAS,EAAEhB,MAAM,GAAG,aAAaS,CAAC,OAAOG,CAAC,KAAK,GAAG,eAAeH,CAAC,OAAOG,CAAC,QAAQ;IAClFK,QAAQ,EAAElB;GACX,CAAC;AACJ","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","x","Math","round","y","Object","assign","style","transform","position"],"sourceRoot":"../src/","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  const x = Math.round(coordinates.x);\n  const y = Math.round(coordinates.y);\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"]}
+{"version":3,"mappings":"AACA,SACEA,wBAAwB,EACxBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB,cAAc;AAErB;;;AAGA,OAAM,SAAUC,qBAAqB,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,oBAAc,CAACgB,IAAI,0CAAEC,OAAO,EAAE;IAChCX,SAAS,CAACM,YAAY,CAACZ,wBAAwB,EAAE,EAAE,CAAC;;EAGtDM,SAAS,CAACO,eAAe,CAACZ,uBAAuB,CAAC;EAClD,IAAI,oBAAc,CAACe,IAAI,0CAAEE,eAAe,EAAE;IACxCZ,SAAS,CAACM,YAAY,CAACX,uBAAuB,EAAE,EAAE,CAAC;;EAGrD;EACA;EACA;EACA;EACA,MAAMkB,gBAAgB,GAAG,gBAAS,CAACC,aAAa,CAACC,WAAW,0CAAEF,gBAAgB,KAAI,CAAC;EACnF,MAAMG,CAAC,GAAGC,IAAI,CAACC,KAAK,CAACb,WAAW,CAACW,CAAC,GAAGH,gBAAgB,CAAC,GAAGA,gBAAgB;EACzE,MAAMM,CAAC,GAAGF,IAAI,CAACC,KAAK,CAACb,WAAW,CAACc,CAAC,GAAGN,gBAAgB,CAAC,GAAGA,gBAAgB;EAEzEO,MAAM,CAACC,MAAM,CAACrB,SAAS,CAACsB,KAAK,EAAE;IAC7BC,SAAS,EAAEnB,MAAM,GAAG,aAAaY,CAAC,OAAOG,CAAC,KAAK,GAAG,eAAeH,CAAC,OAAOG,CAAC,QAAQ;IAClFK,QAAQ,EAAErB;GACX,CAAC;AACJ","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"],"sourceRoot":"../src/","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"]}

package/lib-amd/utils/writeContainerupdates.js

@@ -6,7 +6,7 @@ define(["require", "exports", "../constants"], function (require, exports, const
      * Writes all container element position updates after the position is computed
      */
     function writeContainerUpdates(options) {
-        var _a, _b;
+        var _a, _b, _c;
         var container = options.container, placement = options.placement, middlewareData = options.middlewareData, strategy = options.strategy, lowPPI = options.lowPPI, coordinates = options.coordinates;
         if (!container) {
             return;
@@ -24,8 +24,13 @@ define(["require", "exports", "../constants"], function (require, exports, const
         if ((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) {
             container.setAttribute(constants_1.DATA_POSITIONING_HIDDEN, '');
         }
-        var x = Math.round(coordinates.x);
-        var y = Math.round(coordinates.y);
+        // 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.
+        var devicePixelRatio = ((_c = container.ownerDocument.defaultView) === null || _c === void 0 ? void 0 : _c.devicePixelRatio) || 1;
+        var x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;
+        var y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;
         Object.assign(container.style, {
             transform: lowPPI ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)",
             position: strategy,

package/lib-amd/utils/writeContainerupdates.js.map

@@ -1 +1 @@
-{"version":3,"file":"writeContainerupdates.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/utils/writeContainerupdates.ts"],"names":[],"mappings":";;;;IAQA;;OAEG;IACH,SAAgB,qBAAqB,CAAC,OAYrC;;QACS,IAAA,SAAS,GAA+D,OAAO,UAAtE,EAAE,SAAS,GAAoD,OAAO,UAA3D,EAAE,cAAc,GAAoC,OAAO,eAA3C,EAAE,QAAQ,GAA0B,OAAO,SAAjC,EAAE,MAAM,GAAkB,OAAO,OAAzB,EAAE,WAAW,GAAK,OAAO,YAAZ,CAAa;QACxF,IAAI,CAAC,SAAS,EAAE;YACd,OAAO;SACR;QACD,SAAS,CAAC,YAAY,CAAC,sCAA0B,EAAE,SAAS,CAAC,CAAC;QAC9D,SAAS,CAAC,eAAe,CAAC,yCAA6B,CAAC,CAAC;QACzD,IAAI,cAAc,CAAC,oBAAoB,CAAC,YAAY,EAAE;YACpD,SAAS,CAAC,YAAY,CAAC,yCAA6B,EAAE,EAAE,CAAC,CAAC;SAC3D;QAED,SAAS,CAAC,eAAe,CAAC,oCAAwB,CAAC,CAAC;QACpD,IAAI,MAAA,cAAc,CAAC,IAAI,0CAAE,OAAO,EAAE;YAChC,SAAS,CAAC,YAAY,CAAC,oCAAwB,EAAE,EAAE,CAAC,CAAC;SACtD;QAED,SAAS,CAAC,eAAe,CAAC,mCAAuB,CAAC,CAAC;QACnD,IAAI,MAAA,cAAc,CAAC,IAAI,0CAAE,eAAe,EAAE;YACxC,SAAS,CAAC,YAAY,CAAC,mCAAuB,EAAE,EAAE,CAAC,CAAC;SACrD;QAED,IAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QACpC,IAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAEpC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE;YAC7B,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,eAAa,CAAC,YAAO,CAAC,QAAK,CAAC,CAAC,CAAC,iBAAe,CAAC,YAAO,CAAC,WAAQ;YAClF,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC;IAxCD,sDAwCC","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  const x = Math.round(coordinates.x);\n  const y = Math.round(coordinates.y);\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"]}
+{"version":3,"file":"writeContainerupdates.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-positioning/src/utils/writeContainerupdates.ts"],"names":[],"mappings":";;;;IAQA;;OAEG;IACH,SAAgB,qBAAqB,CAAC,OAYrC;;QACS,IAAA,SAAS,GAA+D,OAAO,UAAtE,EAAE,SAAS,GAAoD,OAAO,UAA3D,EAAE,cAAc,GAAoC,OAAO,eAA3C,EAAE,QAAQ,GAA0B,OAAO,SAAjC,EAAE,MAAM,GAAkB,OAAO,OAAzB,EAAE,WAAW,GAAK,OAAO,YAAZ,CAAa;QACxF,IAAI,CAAC,SAAS,EAAE;YACd,OAAO;SACR;QACD,SAAS,CAAC,YAAY,CAAC,sCAA0B,EAAE,SAAS,CAAC,CAAC;QAC9D,SAAS,CAAC,eAAe,CAAC,yCAA6B,CAAC,CAAC;QACzD,IAAI,cAAc,CAAC,oBAAoB,CAAC,YAAY,EAAE;YACpD,SAAS,CAAC,YAAY,CAAC,yCAA6B,EAAE,EAAE,CAAC,CAAC;SAC3D;QAED,SAAS,CAAC,eAAe,CAAC,oCAAwB,CAAC,CAAC;QACpD,IAAI,MAAA,cAAc,CAAC,IAAI,0CAAE,OAAO,EAAE;YAChC,SAAS,CAAC,YAAY,CAAC,oCAAwB,EAAE,EAAE,CAAC,CAAC;SACtD;QAED,SAAS,CAAC,eAAe,CAAC,mCAAuB,CAAC,CAAC;QACnD,IAAI,MAAA,cAAc,CAAC,IAAI,0CAAE,eAAe,EAAE;YACxC,SAAS,CAAC,YAAY,CAAC,mCAAuB,EAAE,EAAE,CAAC,CAAC;SACrD;QAED,uDAAuD;QACvD,oHAAoH;QACpH,wFAAwF;QACxF,wEAAwE;QACxE,IAAM,gBAAgB,GAAG,CAAA,MAAA,SAAS,CAAC,aAAa,CAAC,WAAW,0CAAE,gBAAgB,KAAI,CAAC,CAAC;QACpF,IAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,GAAG,gBAAgB,CAAC,GAAG,gBAAgB,CAAC;QAC1E,IAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,GAAG,gBAAgB,CAAC,GAAG,gBAAgB,CAAC;QAE1E,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE;YAC7B,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,eAAa,CAAC,YAAO,CAAC,QAAK,CAAC,CAAC,CAAC,iBAAe,CAAC,YAAO,CAAC,WAAQ;YAClF,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;IACL,CAAC;IA7CD,sDA6CC","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"]}

package/lib-commonjs/utils/writeContainerupdates.js

@@ -9,7 +9,7 @@ const constants_1 = /*#__PURE__*/require("../constants");
  * Writes all container element position updates after the position is computed
  */
 function writeContainerUpdates(options) {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     container,
     placement,
@@ -34,8 +34,13 @@ function writeContainerUpdates(options) {
   if ((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) {
     container.setAttribute(constants_1.DATA_POSITIONING_HIDDEN, '');
   }
-  const x = Math.round(coordinates.x);
-  const y = Math.round(coordinates.y);
+  // 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 x = Math.round(coordinates.x * devicePixelRatio) / devicePixelRatio;
+  const y = Math.round(coordinates.y * devicePixelRatio) / devicePixelRatio;
   Object.assign(container.style, {
     transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,
     position: strategy

package/lib-commonjs/utils/writeContainerupdates.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AACA;AAOA;;;AAGA,SAAgBA,qBAAqB,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,CAACC,sCAA0B,EAAEN,SAAS,CAAC;EAC7DD,SAAS,CAACQ,eAAe,CAACD,yCAA6B,CAAC;EACxD,IAAIL,cAAc,CAACO,oBAAoB,CAACC,YAAY,EAAE;IACpDV,SAAS,CAACM,YAAY,CAACC,yCAA6B,EAAE,EAAE,CAAC;;EAG3DP,SAAS,CAACQ,eAAe,CAACD,oCAAwB,CAAC;EACnD,IAAI,oBAAc,CAACI,IAAI,0CAAEC,OAAO,EAAE;IAChCZ,SAAS,CAACM,YAAY,CAACC,oCAAwB,EAAE,EAAE,CAAC;;EAGtDP,SAAS,CAACQ,eAAe,CAACD,mCAAuB,CAAC;EAClD,IAAI,oBAAc,CAACI,IAAI,0CAAEE,eAAe,EAAE;IACxCb,SAAS,CAACM,YAAY,CAACC,mCAAuB,EAAE,EAAE,CAAC;;EAGrD,MAAMO,CAAC,GAAGC,IAAI,CAACC,KAAK,CAACX,WAAW,CAACS,CAAC,CAAC;EACnC,MAAMG,CAAC,GAAGF,IAAI,CAACC,KAAK,CAACX,WAAW,CAACY,CAAC,CAAC;EAEnCC,MAAM,CAACC,MAAM,CAACnB,SAAS,CAACoB,KAAK,EAAE;IAC7BC,SAAS,EAAEjB,MAAM,GAAG,aAAaU,CAAC,OAAOG,CAAC,KAAK,GAAG,eAAeH,CAAC,OAAOG,CAAC,QAAQ;IAClFK,QAAQ,EAAEnB;GACX,CAAC;AACJ;AAxCAoB","names":["writeContainerUpdates","options","container","placement","middlewareData","strategy","lowPPI","coordinates","setAttribute","constants_1","removeAttribute","intersectionObserver","intersecting","hide","escaped","referenceHidden","x","Math","round","y","Object","assign","style","transform","position","exports"],"sourceRoot":"../src/","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  const x = Math.round(coordinates.x);\n  const y = Math.round(coordinates.y);\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"]}
+{"version":3,"mappings":";;;;;;AACA;AAOA;;;AAGA,SAAgBA,qBAAqB,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,CAACC,sCAA0B,EAAEN,SAAS,CAAC;EAC7DD,SAAS,CAACQ,eAAe,CAACD,yCAA6B,CAAC;EACxD,IAAIL,cAAc,CAACO,oBAAoB,CAACC,YAAY,EAAE;IACpDV,SAAS,CAACM,YAAY,CAACC,yCAA6B,EAAE,EAAE,CAAC;;EAG3DP,SAAS,CAACQ,eAAe,CAACD,oCAAwB,CAAC;EACnD,IAAI,oBAAc,CAACI,IAAI,0CAAEC,OAAO,EAAE;IAChCZ,SAAS,CAACM,YAAY,CAACC,oCAAwB,EAAE,EAAE,CAAC;;EAGtDP,SAAS,CAACQ,eAAe,CAACD,mCAAuB,CAAC;EAClD,IAAI,oBAAc,CAACI,IAAI,0CAAEE,eAAe,EAAE;IACxCb,SAAS,CAACM,YAAY,CAACC,mCAAuB,EAAE,EAAE,CAAC;;EAGrD;EACA;EACA;EACA;EACA,MAAMO,gBAAgB,GAAG,gBAAS,CAACC,aAAa,CAACC,WAAW,0CAAEF,gBAAgB,KAAI,CAAC;EACnF,MAAMG,CAAC,GAAGC,IAAI,CAACC,KAAK,CAACd,WAAW,CAACY,CAAC,GAAGH,gBAAgB,CAAC,GAAGA,gBAAgB;EACzE,MAAMM,CAAC,GAAGF,IAAI,CAACC,KAAK,CAACd,WAAW,CAACe,CAAC,GAAGN,gBAAgB,CAAC,GAAGA,gBAAgB;EAEzEO,MAAM,CAACC,MAAM,CAACtB,SAAS,CAACuB,KAAK,EAAE;IAC7BC,SAAS,EAAEpB,MAAM,GAAG,aAAaa,CAAC,OAAOG,CAAC,KAAK,GAAG,eAAeH,CAAC,OAAOG,CAAC,QAAQ;IAClFK,QAAQ,EAAEtB;GACX,CAAC;AACJ;AA7CAuB","names":["writeContainerUpdates","options","container","placement","middlewareData","strategy","lowPPI","coordinates","setAttribute","constants_1","removeAttribute","intersectionObserver","intersecting","hide","escaped","referenceHidden","devicePixelRatio","ownerDocument","defaultView","x","Math","round","y","Object","assign","style","transform","position","exports"],"sourceRoot":"../src/","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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-positioning",
-  "version": "9.4.0",
+  "version": "9.4.2",
   "description": "A react wrapper around Popper.js for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -31,7 +31,7 @@
     "@floating-ui/dom": "^1.2.0",
     "@fluentui/react-shared-contexts": "^9.2.0",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.5.2",
+    "@fluentui/react-utilities": "^9.5.3",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },