@atlaskit/react-ufo 3.14.12 → 3.14.13

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.14.13
+
+### Patch Changes
+
+- [#184565](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/184565)
+  [`c08127cbd5494`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c08127cbd5494) -
+  Fix the third party elements excluded from metric logic for non-react rendered components
+
 ## 3.14.12
 
 ### Patch Changes

package/dist/cjs/trace-interaction/index.js

@@ -13,6 +13,12 @@ Object.defineProperty(exports, "UNSAFE__DO_NOT_USE_traceUFOInteraction", {
 exports.default = void 0;
 var _mapToInteractionType = _interopRequireDefault(require("./internal/map-to-interaction-type"));
 var _traceUfoInteraction = _interopRequireDefault(require("./internal/trace-ufo-interaction"));
+/**
+ * *Warning* Currently this only supports the events with the following types
+ * ```ts
+ * 'click' | 'dblclick' | 'mousedown' | 'mouseenter' | 'mouseover'
+ * ```
+ */
 function traceUFOInteraction(name, event) {
   if (!event || !event.isTrusted) {
     return;

package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/get-component-name-and-child-props.js

@@ -9,21 +9,35 @@ exports.checkWithinComponentAndExtractChildProps = checkWithinComponentAndExtrac
 exports.createMutationTypeWithIgnoredReason = createMutationTypeWithIgnoredReason;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Helper function to find React fiber on an element
+var findReactFiber = function findReactFiber(element) {
+  var key = Object.keys(element).find(function (key) {
+    return key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$');
+  });
+  return key ? element[key] : null;
+};
+
 // Using the React Fiber tree to traverse up the DOM and check if a node is within a specific component
 // and extract child component props if needed.
 function checkWithinComponentAndExtractChildProps(node, targetComponentName, childComponentConfig) {
-  // Get the React fiber from the DOM node
-  var key = Object.keys(node).find(function (key) {
-    return key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$');
-  });
-  if (!key) {
-    return {
-      isWithin: false
-    };
+  var fiber = null;
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_handle_non_react_element_for_3p')) {
+    // Walk up the DOM tree to find React fiber (handles non-React-rendered elements)
+    var currentElement = node;
+    while (currentElement && !fiber) {
+      fiber = findReactFiber(currentElement);
+      if (!fiber) {
+        currentElement = currentElement.parentElement;
+      }
+    }
+  } else {
+    fiber = findReactFiber(node);
   }
-  var fiber = node[key];
+
+  // If no React fiber found, return false
   if (!fiber) {
     return {
       isWithin: false

package/dist/es2019/trace-interaction/index.js

@@ -1,6 +1,12 @@
 import mapToInteractionType from './internal/map-to-interaction-type';
 import internal_traceUFOInteraction from './internal/trace-ufo-interaction';
 export { default as UNSAFE__DO_NOT_USE_traceUFOInteraction } from './internal/trace-ufo-interaction';
+/**
+ * *Warning* Currently this only supports the events with the following types
+ * ```ts
+ * 'click' | 'dblclick' | 'mousedown' | 'mouseenter' | 'mouseover'
+ * ```
+ */
 function traceUFOInteraction(name, event) {
   if (!event || !event.isTrusted) {
     return;

package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/get-component-name-and-child-props.js

@@ -1,14 +1,28 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+// Helper function to find React fiber on an element
+const findReactFiber = element => {
+  const key = Object.keys(element).find(key => key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$'));
+  return key ? element[key] : null;
+};
+
 // Using the React Fiber tree to traverse up the DOM and check if a node is within a specific component
 // and extract child component props if needed.
 export function checkWithinComponentAndExtractChildProps(node, targetComponentName, childComponentConfig) {
-  // Get the React fiber from the DOM node
-  const key = Object.keys(node).find(key => key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$'));
-  if (!key) {
-    return {
-      isWithin: false
-    };
+  let fiber = null;
+  if (fg('platform_ufo_handle_non_react_element_for_3p')) {
+    // Walk up the DOM tree to find React fiber (handles non-React-rendered elements)
+    let currentElement = node;
+    while (currentElement && !fiber) {
+      fiber = findReactFiber(currentElement);
+      if (!fiber) {
+        currentElement = currentElement.parentElement;
+      }
+    }
+  } else {
+    fiber = findReactFiber(node);
   }
-  const fiber = node[key];
+
+  // If no React fiber found, return false
   if (!fiber) {
     return {
       isWithin: false

package/dist/esm/trace-interaction/index.js

@@ -1,6 +1,12 @@
 import mapToInteractionType from './internal/map-to-interaction-type';
 import internal_traceUFOInteraction from './internal/trace-ufo-interaction';
 export { default as UNSAFE__DO_NOT_USE_traceUFOInteraction } from './internal/trace-ufo-interaction';
+/**
+ * *Warning* Currently this only supports the events with the following types
+ * ```ts
+ * 'click' | 'dblclick' | 'mousedown' | 'mouseenter' | 'mouseover'
+ * ```
+ */
 function traceUFOInteraction(name, event) {
   if (!event || !event.isTrusted) {
     return;

package/dist/esm/vc/vc-observer-new/viewport-observer/utils/get-component-name-and-child-props.js

@@ -2,19 +2,33 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { fg } from '@atlaskit/platform-feature-flags';
+// Helper function to find React fiber on an element
+var findReactFiber = function findReactFiber(element) {
+  var key = Object.keys(element).find(function (key) {
+    return key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$');
+  });
+  return key ? element[key] : null;
+};
+
 // Using the React Fiber tree to traverse up the DOM and check if a node is within a specific component
 // and extract child component props if needed.
 export function checkWithinComponentAndExtractChildProps(node, targetComponentName, childComponentConfig) {
-  // Get the React fiber from the DOM node
-  var key = Object.keys(node).find(function (key) {
-    return key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$');
-  });
-  if (!key) {
-    return {
-      isWithin: false
-    };
+  var fiber = null;
+  if (fg('platform_ufo_handle_non_react_element_for_3p')) {
+    // Walk up the DOM tree to find React fiber (handles non-React-rendered elements)
+    var currentElement = node;
+    while (currentElement && !fiber) {
+      fiber = findReactFiber(currentElement);
+      if (!fiber) {
+        currentElement = currentElement.parentElement;
+      }
+    }
+  } else {
+    fiber = findReactFiber(node);
   }
-  var fiber = node[key];
+
+  // If no React fiber found, return false
   if (!fiber) {
     return {
       isWithin: false

package/dist/types/trace-interaction/index.d.ts

@@ -1,4 +1,10 @@
 import type { UIEvent } from 'react';
 export { default as UNSAFE__DO_NOT_USE_traceUFOInteraction } from './internal/trace-ufo-interaction';
-declare function traceUFOInteraction(name: string, event: UIEvent): void;
+/**
+ * *Warning* Currently this only supports the events with the following types
+ * ```ts
+ * 'click' | 'dblclick' | 'mousedown' | 'mouseenter' | 'mouseover'
+ * ```
+ */
+declare function traceUFOInteraction(name: string, event: Event | UIEvent): void;
 export default traceUFOInteraction;

package/dist/types-ts4.5/trace-interaction/index.d.ts

@@ -1,4 +1,10 @@
 import type { UIEvent } from 'react';
 export { default as UNSAFE__DO_NOT_USE_traceUFOInteraction } from './internal/trace-ufo-interaction';
-declare function traceUFOInteraction(name: string, event: UIEvent): void;
+/**
+ * *Warning* Currently this only supports the events with the following types
+ * ```ts
+ * 'click' | 'dblclick' | 'mousedown' | 'mouseenter' | 'mouseover'
+ * ```
+ */
+declare function traceUFOInteraction(name: string, event: Event | UIEvent): void;
 export default traceUFOInteraction;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "3.14.12",
+	"version": "3.14.13",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -213,6 +213,9 @@
 		},
 		"platform_ufo_abort_measurement_fix": {
 			"type": "boolean"
+		},
+		"platform_ufo_handle_non_react_element_for_3p": {
+			"type": "boolean"
 		}
 	}
 }