@atlaskit/react-ufo 2.8.1 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 2.9.0
+
+### Minor Changes
+
+- [#101686](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101686)
+  [`e26a94f833e02`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e26a94f833e02) -
+  Add fallback error handling for check element visibility VC calculation logic
+
+## 2.8.2
+
+### Patch Changes
+
+- [#101605](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101605)
+  [`26580d858329c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/26580d858329c) -
+  Adjust logic on when to apply getBoundingClientRect check for target rect - handle dummy rect
+
 ## 2.8.1
 
 ### Patch Changes

package/dist/cjs/vc/vc-observer/observers/index.js

@@ -19,6 +19,17 @@ var state = {
   waitingForFirstRender: 2,
   ignoring: 3
 };
+function isElementVisible(target) {
+  if (!target || typeof target.checkVisibility !== 'function') {
+    return true;
+  }
+  var isVisible = target.checkVisibility({
+    contentVisibilityAuto: true,
+    opacityProperty: true,
+    visibilityProperty: true
+  });
+  return isVisible;
+}
 function isInsideEditorContainer(target) {
   if (!target || typeof target.closest !== 'function') {
     return false;
@@ -255,12 +266,7 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
               return;
             }
             if ((0, _platformFeatureFlags.fg)('platform-ufo-invisible-element-vc-calculations')) {
-              var isVisible = target.checkVisibility({
-                contentVisibilityAuto: true,
-                opacityProperty: true,
-                visibilityProperty: true
-              });
-              if (!isVisible) {
+              if (!isElementVisible(target)) {
                 data.ignoreReason = 'not-visible';
               }
             }

package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -38,7 +38,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
           var rect = _this.staticPlaceholders.get(staticKey);
           if ((0, _platformFeatureFlags.fg)('platform_ufo_ssr_ttvc_use_target_rect')) {
             var hasSameSizePosition = _this.hasSameSizePosition(rect, boundingClientRect);
-            if (hasSameSizePosition) {
+            if (hasSameSizePosition || _this.isDummyRect(rect)) {
               _resolve(hasSameSizePosition);
             } else {
               requestAnimationFrame(function () {
@@ -62,7 +62,7 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
         var _rect = _this.staticPlaceholders.get(key);
         if ((0, _platformFeatureFlags.fg)('platform_ufo_ssr_ttvc_use_target_rect')) {
           var _hasSameSizePosition2 = _this.hasSameSizePosition(_rect, boundingClientRect);
-          if (_hasSameSizePosition2) {
+          if (_hasSameSizePosition2 || _this.isDummyRect(_rect)) {
             _resolve2(_hasSameSizePosition2);
           } else {
             requestAnimationFrame(function () {
@@ -203,5 +203,10 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
     value: function hasSameSizePosition(rect, boundingClientRect) {
       return rect && Math.abs(rect.x - boundingClientRect.x) < EQUALITY_THRESHOLD && Math.abs(rect.y - boundingClientRect.y) < EQUALITY_THRESHOLD && Math.abs(rect.width - boundingClientRect.width) < EQUALITY_THRESHOLD && Math.abs(rect.height - boundingClientRect.height) < EQUALITY_THRESHOLD || false;
     }
+  }, {
+    key: "isDummyRect",
+    value: function isDummyRect(rect) {
+      return rect && rect.width < 0 && rect.height < 0 || false;
+    }
   }]);
 }();

package/dist/es2019/vc/vc-observer/observers/index.js

@@ -8,6 +8,17 @@ const state = {
   waitingForFirstRender: 2,
   ignoring: 3
 };
+function isElementVisible(target) {
+  if (!target || typeof target.checkVisibility !== 'function') {
+    return true;
+  }
+  const isVisible = target.checkVisibility({
+    contentVisibilityAuto: true,
+    opacityProperty: true,
+    visibilityProperty: true
+  });
+  return isVisible;
+}
 function isInsideEditorContainer(target) {
   if (!target || typeof target.closest !== 'function') {
     return false;
@@ -223,12 +234,7 @@ export class Observers {
             return;
           }
           if (fg('platform-ufo-invisible-element-vc-calculations')) {
-            const isVisible = target.checkVisibility({
-              contentVisibilityAuto: true,
-              opacityProperty: true,
-              visibilityProperty: true
-            });
-            if (!isVisible) {
+            if (!isElementVisible(target)) {
               data.ignoreReason = 'not-visible';
             }
           }

package/dist/es2019/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -28,7 +28,7 @@ export class SSRPlaceholderHandlers {
           const rect = this.staticPlaceholders.get(staticKey);
           if (fg('platform_ufo_ssr_ttvc_use_target_rect')) {
             const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
-            if (hasSameSizePosition) {
+            if (hasSameSizePosition || this.isDummyRect(rect)) {
               resolve(hasSameSizePosition);
             } else {
               requestAnimationFrame(() => {
@@ -52,7 +52,7 @@ export class SSRPlaceholderHandlers {
         const rect = this.staticPlaceholders.get(key);
         if (fg('platform_ufo_ssr_ttvc_use_target_rect')) {
           const hasSameSizePosition = this.hasSameSizePosition(rect, boundingClientRect);
-          if (hasSameSizePosition) {
+          if (hasSameSizePosition || this.isDummyRect(rect)) {
             resolve(hasSameSizePosition);
           } else {
             requestAnimationFrame(() => {
@@ -168,4 +168,7 @@ export class SSRPlaceholderHandlers {
   hasSameSizePosition(rect, boundingClientRect) {
     return rect && Math.abs(rect.x - boundingClientRect.x) < EQUALITY_THRESHOLD && Math.abs(rect.y - boundingClientRect.y) < EQUALITY_THRESHOLD && Math.abs(rect.width - boundingClientRect.width) < EQUALITY_THRESHOLD && Math.abs(rect.height - boundingClientRect.height) < EQUALITY_THRESHOLD || false;
   }
+  isDummyRect(rect) {
+    return rect && rect.width < 0 && rect.height < 0 || false;
+  }
 }

package/dist/esm/vc/vc-observer/observers/index.js

@@ -12,6 +12,17 @@ var state = {
   waitingForFirstRender: 2,
   ignoring: 3
 };
+function isElementVisible(target) {
+  if (!target || typeof target.checkVisibility !== 'function') {
+    return true;
+  }
+  var isVisible = target.checkVisibility({
+    contentVisibilityAuto: true,
+    opacityProperty: true,
+    visibilityProperty: true
+  });
+  return isVisible;
+}
 function isInsideEditorContainer(target) {
   if (!target || typeof target.closest !== 'function') {
     return false;
@@ -248,12 +259,7 @@ export var Observers = /*#__PURE__*/function () {
               return;
             }
             if (fg('platform-ufo-invisible-element-vc-calculations')) {
-              var isVisible = target.checkVisibility({
-                contentVisibilityAuto: true,
-                opacityProperty: true,
-                visibilityProperty: true
-              });
-              if (!isVisible) {
+              if (!isElementVisible(target)) {
                 data.ignoreReason = 'not-visible';
               }
             }

package/dist/esm/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -31,7 +31,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
           var rect = _this.staticPlaceholders.get(staticKey);
           if (fg('platform_ufo_ssr_ttvc_use_target_rect')) {
             var hasSameSizePosition = _this.hasSameSizePosition(rect, boundingClientRect);
-            if (hasSameSizePosition) {
+            if (hasSameSizePosition || _this.isDummyRect(rect)) {
               _resolve(hasSameSizePosition);
             } else {
               requestAnimationFrame(function () {
@@ -55,7 +55,7 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
         var _rect = _this.staticPlaceholders.get(key);
         if (fg('platform_ufo_ssr_ttvc_use_target_rect')) {
           var _hasSameSizePosition2 = _this.hasSameSizePosition(_rect, boundingClientRect);
-          if (_hasSameSizePosition2) {
+          if (_hasSameSizePosition2 || _this.isDummyRect(_rect)) {
             _resolve2(_hasSameSizePosition2);
           } else {
             requestAnimationFrame(function () {
@@ -196,5 +196,10 @@ export var SSRPlaceholderHandlers = /*#__PURE__*/function () {
     value: function hasSameSizePosition(rect, boundingClientRect) {
       return rect && Math.abs(rect.x - boundingClientRect.x) < EQUALITY_THRESHOLD && Math.abs(rect.y - boundingClientRect.y) < EQUALITY_THRESHOLD && Math.abs(rect.width - boundingClientRect.width) < EQUALITY_THRESHOLD && Math.abs(rect.height - boundingClientRect.height) < EQUALITY_THRESHOLD || false;
     }
+  }, {
+    key: "isDummyRect",
+    value: function isDummyRect(rect) {
+      return rect && rect.width < 0 && rect.height < 0 || false;
+    }
   }]);
 }();

package/dist/types/vc/vc-observer/observers/ssr-placeholders/index.d.ts

@@ -20,6 +20,7 @@ export declare class SSRPlaceholderHandlers {
     getSize(el: HTMLElement): Promise<Rect>;
     validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
     hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;
+    isDummyRect(rect: Rect | undefined): boolean;
     intersectionObserverCallback: ({ target, boundingClientRect }: IntersectionObserverEntry) => void;
 }
 export {};

package/dist/types-ts4.5/vc/vc-observer/observers/ssr-placeholders/index.d.ts

@@ -20,6 +20,7 @@ export declare class SSRPlaceholderHandlers {
     getSize(el: HTMLElement): Promise<Rect>;
     validateReactComponentMatchToPlaceholder(el: HTMLElement): Promise<unknown>;
     hasSameSizePosition(rect: Rect | undefined, boundingClientRect: DOMRectReadOnly): boolean;
+    isDummyRect(rect: Rect | undefined): boolean;
     intersectionObserverCallback: ({ target, boundingClientRect }: IntersectionObserverEntry) => void;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "2.8.1",
+	"version": "2.9.0",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",