@atlaskit/react-ufo 4.15.8 → 4.15.9

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 4.15.9
+
+### Patch Changes
+
+- [`1aacb45a2b77f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1aacb45a2b77f) -
+  exclude input name mutations for TTVC v4 due to React/Chromium bug
+
 ## 4.15.8
 
 ### Patch Changes

package/dist/cjs/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -32,6 +32,11 @@ var getConsideredEntryTypes = function getConsideredEntryTypes(include3p) {
   if ((0, _platformFeatureFlags.fg)('platform_ufo_enable_media_for_ttvc_v3')) {
     entryTypes.push('mutation:media');
   }
+
+  // Still included as part of TTVC v3
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_ttvc_v4_exclude_input_name_mutation')) {
+    entryTypes.push('mutation:attribute:non-visual-input-name');
+  }
   return entryTypes;
 };
 

package/dist/cjs/vc/vc-observer-new/metric-calculator/vcnext/index.js

@@ -30,6 +30,9 @@ var getConsideredEntryTypes = function getConsideredEntryTypes() {
 };
 var getExcludedEntryTypes = function getExcludedEntryTypes() {
   var excludedEntryTypes = ['layout-shift:same-rect'];
+  if ((0, _platformFeatureFlags.fg)('platform_ufo_ttvc_v4_exclude_input_name_mutation')) {
+    excludedEntryTypes.push('mutation:attribute:non-visual-input-name');
+  }
   return excludedEntryTypes;
 };
 

package/dist/cjs/vc/vc-observer-new/viewport-observer/index.js

@@ -23,6 +23,7 @@ var _checkWithinComponent3 = _interopRequireWildcard(require("./utils/check-with
 var _getMutatedElements = require("./utils/get-mutated-elements");
 var _isElementVisible = require("./utils/is-element-visible");
 var _isInVcIgnoreIfNoLayoutShiftMarker = _interopRequireDefault(require("./utils/is-in-vc-ignore-if-no-layout-shift-marker"));
+var _isInputNameMutation = require("./utils/is-input-name-mutation");
 var _isSameRectDimensions = require("./utils/is-same-rect-dimensions");
 var _isSameRectSize = require("./utils/is-same-rect-size");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -446,6 +447,21 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
             }
           };
         }
+        if ((0, _isInputNameMutation.isInputNameMutation)({
+          target: target,
+          attributeName: attributeName,
+          oldValue: oldValue,
+          newValue: newValue
+        })) {
+          return {
+            type: 'mutation:attribute:non-visual-input-name',
+            mutationData: {
+              attributeName: attributeName,
+              oldValue: oldValue,
+              newValue: newValue
+            }
+          };
+        }
         var isRLLPlaceholder = _rllPlaceholders.RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
         if (isRLLPlaceholder) {
           return {

package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/is-input-name-mutation.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isInputNameMutation = isInputNameMutation;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+// Detecting this is required due to a React/Chromium bug, where React itself triggers an attribute mutation for input elements
+// Reference: https://atlassian.slack.com/archives/C08EK6TCUP6/p1764129900970719
+function isInputNameMutation(_ref) {
+  var target = _ref.target,
+    attributeName = _ref.attributeName,
+    oldValue = _ref.oldValue,
+    newValue = _ref.newValue;
+  if (!(0, _platformFeatureFlags.fg)('platform_ufo_ttvc_v4_exclude_input_name_mutation')) {
+    return false;
+  }
+  return target instanceof HTMLInputElement && attributeName === 'name' && (oldValue === '' || newValue === '');
+}

package/dist/es2019/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -18,6 +18,11 @@ const getConsideredEntryTypes = include3p => {
   if (fg('platform_ufo_enable_media_for_ttvc_v3')) {
     entryTypes.push('mutation:media');
   }
+
+  // Still included as part of TTVC v3
+  if (fg('platform_ufo_ttvc_v4_exclude_input_name_mutation')) {
+    entryTypes.push('mutation:attribute:non-visual-input-name');
+  }
   return entryTypes;
 };
 

package/dist/es2019/vc/vc-observer-new/metric-calculator/vcnext/index.js

@@ -15,6 +15,9 @@ const getConsideredEntryTypes = () => {
 };
 const getExcludedEntryTypes = () => {
   const excludedEntryTypes = ['layout-shift:same-rect'];
+  if (fg('platform_ufo_ttvc_v4_exclude_input_name_mutation')) {
+    excludedEntryTypes.push('mutation:attribute:non-visual-input-name');
+  }
   return excludedEntryTypes;
 };
 

package/dist/es2019/vc/vc-observer-new/viewport-observer/index.js

@@ -11,6 +11,7 @@ import checkWithinComponent, { cleanupCaches } from './utils/check-within-compon
 import { getMutatedElements } from './utils/get-mutated-elements';
 import { isElementVisible } from './utils/is-element-visible';
 import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
+import { isInputNameMutation } from './utils/is-input-name-mutation';
 import { isSameRectDimensions } from './utils/is-same-rect-dimensions';
 import { isSameRectSize } from './utils/is-same-rect-size';
 const createElementMutationsWatcher = removedNodeRects => ({
@@ -317,6 +318,21 @@ export default class ViewportObserver {
             }
           };
         }
+        if (isInputNameMutation({
+          target,
+          attributeName,
+          oldValue,
+          newValue
+        })) {
+          return {
+            type: 'mutation:attribute:non-visual-input-name',
+            mutationData: {
+              attributeName,
+              oldValue,
+              newValue
+            }
+          };
+        }
         const isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
         if (isRLLPlaceholder) {
           return {

package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/is-input-name-mutation.js

@@ -0,0 +1,15 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
+// Detecting this is required due to a React/Chromium bug, where React itself triggers an attribute mutation for input elements
+// Reference: https://atlassian.slack.com/archives/C08EK6TCUP6/p1764129900970719
+export function isInputNameMutation({
+  target,
+  attributeName,
+  oldValue,
+  newValue
+}) {
+  if (!fg('platform_ufo_ttvc_v4_exclude_input_name_mutation')) {
+    return false;
+  }
+  return target instanceof HTMLInputElement && attributeName === 'name' && (oldValue === '' || newValue === '');
+}

package/dist/esm/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -25,6 +25,11 @@ var getConsideredEntryTypes = function getConsideredEntryTypes(include3p) {
   if (fg('platform_ufo_enable_media_for_ttvc_v3')) {
     entryTypes.push('mutation:media');
   }
+
+  // Still included as part of TTVC v3
+  if (fg('platform_ufo_ttvc_v4_exclude_input_name_mutation')) {
+    entryTypes.push('mutation:attribute:non-visual-input-name');
+  }
   return entryTypes;
 };
 

package/dist/esm/vc/vc-observer-new/metric-calculator/vcnext/index.js

@@ -24,6 +24,9 @@ var getConsideredEntryTypes = function getConsideredEntryTypes() {
 };
 var getExcludedEntryTypes = function getExcludedEntryTypes() {
   var excludedEntryTypes = ['layout-shift:same-rect'];
+  if (fg('platform_ufo_ttvc_v4_exclude_input_name_mutation')) {
+    excludedEntryTypes.push('mutation:attribute:non-visual-input-name');
+  }
   return excludedEntryTypes;
 };
 

package/dist/esm/vc/vc-observer-new/viewport-observer/index.js

@@ -18,6 +18,7 @@ import checkWithinComponent, { cleanupCaches } from './utils/check-within-compon
 import { getMutatedElements } from './utils/get-mutated-elements';
 import { isElementVisible } from './utils/is-element-visible';
 import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
+import { isInputNameMutation } from './utils/is-input-name-mutation';
 import { isSameRectDimensions } from './utils/is-same-rect-dimensions';
 import { isSameRectSize } from './utils/is-same-rect-size';
 var createElementMutationsWatcher = function createElementMutationsWatcher(removedNodeRects) {
@@ -437,6 +438,21 @@ var ViewportObserver = /*#__PURE__*/function () {
             }
           };
         }
+        if (isInputNameMutation({
+          target: target,
+          attributeName: attributeName,
+          oldValue: oldValue,
+          newValue: newValue
+        })) {
+          return {
+            type: 'mutation:attribute:non-visual-input-name',
+            mutationData: {
+              attributeName: attributeName,
+              oldValue: oldValue,
+              newValue: newValue
+            }
+          };
+        }
         var isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
         if (isRLLPlaceholder) {
           return {

package/dist/esm/vc/vc-observer-new/viewport-observer/utils/is-input-name-mutation.js

@@ -0,0 +1,14 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
+// Detecting this is required due to a React/Chromium bug, where React itself triggers an attribute mutation for input elements
+// Reference: https://atlassian.slack.com/archives/C08EK6TCUP6/p1764129900970719
+export function isInputNameMutation(_ref) {
+  var target = _ref.target,
+    attributeName = _ref.attributeName,
+    oldValue = _ref.oldValue,
+    newValue = _ref.newValue;
+  if (!fg('platform_ufo_ttvc_v4_exclude_input_name_mutation')) {
+    return false;
+  }
+  return target instanceof HTMLInputElement && attributeName === 'name' && (oldValue === '' || newValue === '');
+}

package/dist/types/vc/vc-observer-new/types.d.ts

@@ -1,6 +1,6 @@
 import type { AbortReasonType, InteractionType } from '../../common/common/types';
 import type { ObservedWindowEvent } from './window-event-observer';
-export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:display-contents-children-element' | 'mutation:display-contents-children-attribute' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute' | 'mutation:media' | 'mutation:rll-placeholder' | 'mutation:third-party-element' | 'mutation:third-party-attribute' | 'mutation:ssr-placeholder' | 'layout-shift' | 'layout-shift:same-rect' | 'window:event' | 'ssr-hydration' | 'unknown';
+export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:display-contents-children-element' | 'mutation:display-contents-children-attribute' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute:non-visual-input-name' | 'mutation:attribute' | 'mutation:media' | 'mutation:rll-placeholder' | 'mutation:third-party-element' | 'mutation:third-party-attribute' | 'mutation:ssr-placeholder' | 'layout-shift' | 'layout-shift:same-rect' | 'window:event' | 'ssr-hydration' | 'unknown';
 export type ViewportEntryData = {
     readonly type: VCObserverEntryType;
     readonly elementName: string;

package/dist/types/vc/vc-observer-new/viewport-observer/utils/is-input-name-mutation.d.ts

@@ -0,0 +1,6 @@
+export declare function isInputNameMutation({ target, attributeName, oldValue, newValue, }: {
+    target?: Node | null;
+    attributeName?: string | null;
+    oldValue?: string | undefined | null;
+    newValue?: string | undefined | null;
+}): boolean;

package/dist/types-ts4.5/vc/vc-observer-new/types.d.ts

@@ -1,6 +1,6 @@
 import type { AbortReasonType, InteractionType } from '../../common/common/types';
 import type { ObservedWindowEvent } from './window-event-observer';
-export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:display-contents-children-element' | 'mutation:display-contents-children-attribute' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute' | 'mutation:media' | 'mutation:rll-placeholder' | 'mutation:third-party-element' | 'mutation:third-party-attribute' | 'mutation:ssr-placeholder' | 'layout-shift' | 'layout-shift:same-rect' | 'window:event' | 'ssr-hydration' | 'unknown';
+export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:display-contents-children-element' | 'mutation:display-contents-children-attribute' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute:non-visual-input-name' | 'mutation:attribute' | 'mutation:media' | 'mutation:rll-placeholder' | 'mutation:third-party-element' | 'mutation:third-party-attribute' | 'mutation:ssr-placeholder' | 'layout-shift' | 'layout-shift:same-rect' | 'window:event' | 'ssr-hydration' | 'unknown';
 export type ViewportEntryData = {
     readonly type: VCObserverEntryType;
     readonly elementName: string;

package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/utils/is-input-name-mutation.d.ts

@@ -0,0 +1,6 @@
+export declare function isInputNameMutation({ target, attributeName, oldValue, newValue, }: {
+    target?: Node | null;
+    attributeName?: string | null;
+    oldValue?: string | undefined | null;
+    newValue?: string | undefined | null;
+}): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "4.15.8",
+	"version": "4.15.9",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -110,6 +110,9 @@
 		"platform_ufo_critical_metrics_payload": {
 			"type": "boolean"
 		},
+		"platform_ufo_ttvc_v4_exclude_input_name_mutation": {
+			"type": "boolean"
+		},
 		"platform_ufo_disable_vcnext_observations": {
 			"type": "boolean"
 		},