@atlaskit/react-ufo 3.4.12 → 3.4.14

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.4.14
+
+### Patch Changes
+
+- [#136647](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/136647)
+  [`9d50aee5de4c6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d50aee5de4c6) -
+  Fix bug on ufo:vc:dom that would include element selector that is ignored
+
+## 3.4.13
+
+### Patch Changes
+
+- [#136326](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/136326)
+  [`df5ce1960f52f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/df5ce1960f52f) -
+  add null check for vc90 result
+
 ## 3.4.12
 
 ### Patch Changes

package/dist/cjs/create-payload/utils/get-vc-metrics.js

@@ -23,7 +23,7 @@ function getVCMetrics(_x) {
 function _getVCMetrics() {
   _getVCMetrics = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(interaction) {
     var _config$vc, _config$vc$ssrWhiteli, _interaction$apdex, _config$experimentalI;
-    var config, interactionStatus, pageVisibilityUpToTTAI, isSSREnabled, ssr, tti, prefix, result, ttvcV2Revision, VC;
+    var config, interactionStatus, pageVisibilityUpToTTAI, isSSREnabled, ssr, tti, prefix, result, _result$ufoVcRev, ttvcV2Revision, VC;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -74,7 +74,7 @@ function _getVCMetrics() {
             _context.next = 26;
             break;
           }
-          ttvcV2Revision = (result === null || result === void 0 ? void 0 : result['ufo:vc:rev']).find(function (_ref) {
+          ttvcV2Revision = result === null || result === void 0 || (_result$ufoVcRev = result['ufo:vc:rev']) === null || _result$ufoVcRev === void 0 ? void 0 : _result$ufoVcRev.find(function (_ref) {
             var revision = _ref.revision;
             return revision === 'fy25.02';
           });

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

@@ -663,6 +663,7 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
 
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       var isCalcSpeedIndexEnabled = (0, _platformFeatureFlags.fg)('ufo-calc-speed-index');
+      var isFilterIgnoredItemsEnabled = (0, _platformFeatureFlags.fg)('platform_ufo_vc_filter_ignored_items');
       entries.reduce(function () {
         var acc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
         var v = arguments.length > 1 ? arguments[1] : undefined;
@@ -677,9 +678,13 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         VCObserver.VCParts.forEach(function (key) {
           var value = parseInt(key, 10);
           if ((VC[key] === null || VC[key] === undefined) && VCRatio >= value / 100) {
-            var _componentsLog$time;
+            var _componentsLog$time, _componentsLog$time2;
             VC[key] = time;
-            VCBox[key] = (0, _toConsumableArray2.default)(new Set((_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.map(function (v) {
+            VCBox[key] = isFilterIgnoredItemsEnabled ? (0, _toConsumableArray2.default)(new Set((_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.filter(function (v) {
+              return !v.ignoreReason;
+            }).map(function (v) {
+              return v.targetName;
+            }))) : (0, _toConsumableArray2.default)(new Set((_componentsLog$time2 = componentsLog[time]) === null || _componentsLog$time2 === void 0 ? void 0 : _componentsLog$time2.map(function (v) {
               return v.targetName;
             })));
           }
@@ -687,13 +692,17 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
         return VCRatio;
       }, 0);
       var VCEntries = entries.reduce(function (acc, _ref16, i) {
-        var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
+        var _acc$abs, _componentsLog$timest, _componentsLog$timest2, _acc$rel$vc, _acc$rel;
         var _ref17 = (0, _slicedToArray2.default)(_ref16, 2),
           timestamp = _ref17[0],
           entryPainted = _ref17[1];
         var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
         var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
-        var logEntry = (0, _toConsumableArray2.default)(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
+        var logEntry = isFilterIgnoredItemsEnabled ? (0, _toConsumableArray2.default)(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.filter(function (v) {
+          return !v.ignoreReason;
+        }).map(function (v) {
+          return v.targetName;
+        }))) : (0, _toConsumableArray2.default)(new Set((_componentsLog$timest2 = componentsLog[timestamp]) === null || _componentsLog$timest2 === void 0 ? void 0 : _componentsLog$timest2.map(function (v) {
           return v.targetName;
         })));
         var ratioDelta = (currentlyPaintedRatio - ((_acc$rel$vc = (_acc$rel = acc.rel[i - 1]) === null || _acc$rel === void 0 ? void 0 : _acc$rel.vc) !== null && _acc$rel$vc !== void 0 ? _acc$rel$vc : 0)) / 100;

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

@@ -12,6 +12,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _config = require("../../../config");
 var _vcUtils = require("../media-wrapper/vc-utils");
 var _editorLnv = require("./editor-lnv");
+var _isNonVisualStyleMutation = _interopRequireDefault(require("./non-visual-styles/is-non-visual-style-mutation"));
 var _ssrPlaceholders = require("./ssr-placeholders");
 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; }
@@ -224,9 +225,15 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
                 var oldValue = (_mutation$oldValue = mutation.oldValue) !== null && _mutation$oldValue !== void 0 ? _mutation$oldValue : undefined;
                 var newValue = mutation.attributeName ? mutation.target.getAttribute(mutation.attributeName) : undefined;
                 if (oldValue !== newValue) {
+                  if ((0, _isNonVisualStyleMutation.default)(mutation)) {
+                    ignoreReason = 'non-visual-style';
+                  }
                   _this2.observeElement(mutation.target, mutation, 'attr', ignoreReason);
                 }
               } else {
+                if ((0, _isNonVisualStyleMutation.default)(mutation)) {
+                  ignoreReason = 'non-visual-style';
+                }
                 _this2.observeElement(mutation.target, mutation, 'attr', ignoreReason);
               }
             }

package/dist/cjs/vc/vc-observer/observers/non-visual-styles/is-non-visual-style-mutation.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isNonVisualStyleMutation;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/**
+ * Checks if a mutation record represents a non-visual style change
+ * @param mutation - The mutation record to check
+ * @returns boolean indicating if this is a non-visual style mutation
+ *
+ * A mutation is considered non-visual if:
+ * - The target has data-	vc-nvs="true" attribute
+ * - The changed attribute is either 'class' or 'style'
+ */
+
+function isNonVisualStyleMutation(_ref) {
+  var target = _ref.target,
+    attributeName = _ref.attributeName;
+  var isNonVisualStyleMutationEnabled = (0, _platformFeatureFlags.fg)('platform_ufo_non_visual_style_mutation');
+  if (!isNonVisualStyleMutationEnabled) {
+    return false;
+  }
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  if (attributeName !== 'class' && attributeName !== 'style') {
+    return false;
+  }
+  if (target.getAttribute('data-vc-nvs') !== 'true') {
+    return false;
+  }
+  return true;
+}

package/dist/cjs/vc/vc-observer/revisions/fy25_02.js

@@ -27,7 +27,7 @@ var FY25_02Classifier = exports.FY25_02Classifier = /*#__PURE__*/function (_FY25
       filter: function filter(_ref) {
         var type = _ref.type,
           ignoreReason = _ref.ignoreReason;
-        return !(ignoreReason !== null && ignoreReason !== void 0 && ignoreReason.includes('not-visible'));
+        return !(ignoreReason !== null && ignoreReason !== void 0 && ignoreReason.includes('not-visible')) && ignoreReason !== 'non-visual-style';
       }
     }]);
     (0, _defineProperty2.default)(_this, "removedFilters", []);

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _vcUtils = require("../../vc-observer/media-wrapper/vc-utils");
+var _isNonVisualStyleMutation = _interopRequireDefault(require("../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation"));
 var _intersectionObserver = require("./intersection-observer");
 var _mutationObserver = _interopRequireDefault(require("./mutation-observer"));
 var _performanceObserver = _interopRequireDefault(require("./performance-observer"));
@@ -127,6 +128,18 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
               }
             };
           }
+          if ((0, _isNonVisualStyleMutation.default)({
+            target: target,
+            attributeName: attributeName,
+            type: 'attributes'
+          })) {
+            return {
+              type: 'mutation:attribute:non-visual-style',
+              mutationData: {
+                attributeName: attributeName
+              }
+            };
+          }
           var lastElementRect = _this.mapVisibleNodeRects.get(target);
           if (lastElementRect && sameRectSize(rect, lastElementRect)) {
             return {

package/dist/es2019/create-payload/utils/get-vc-metrics.js

@@ -40,7 +40,8 @@ export default async function getVCMetrics(interaction) {
   }
   postInteractionLog.setLastInteractionFinishVCResult(result);
   if (fg('platform_ufo_disable_ttvc_v1')) {
-    const ttvcV2Revision = (result === null || result === void 0 ? void 0 : result['ufo:vc:rev']).find(({
+    var _result$ufoVcRev;
+    const ttvcV2Revision = result === null || result === void 0 ? void 0 : (_result$ufoVcRev = result['ufo:vc:rev']) === null || _result$ufoVcRev === void 0 ? void 0 : _result$ufoVcRev.find(({
       revision
     }) => revision === 'fy25.02');
     if (!(ttvcV2Revision !== null && ttvcV2Revision !== void 0 && ttvcV2Revision.clean)) {

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

@@ -563,6 +563,7 @@ export class VCObserver {
 
     // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
     const isCalcSpeedIndexEnabled = fg('ufo-calc-speed-index');
+    const isFilterIgnoredItemsEnabled = fg('platform_ufo_vc_filter_ignored_items');
     entries.reduce((acc = 0, v) => {
       const currRatio = v[1] / totalPainted;
       let VCRatio = currRatio + acc;
@@ -575,18 +576,18 @@ export class VCObserver {
       VCObserver.VCParts.forEach(key => {
         const value = parseInt(key, 10);
         if ((VC[key] === null || VC[key] === undefined) && VCRatio >= value / 100) {
-          var _componentsLog$time;
+          var _componentsLog$time, _componentsLog$time2;
           VC[key] = time;
-          VCBox[key] = [...new Set((_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.map(v => v.targetName))];
+          VCBox[key] = isFilterIgnoredItemsEnabled ? [...new Set((_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.filter(v => !v.ignoreReason).map(v => v.targetName))] : [...new Set((_componentsLog$time2 = componentsLog[time]) === null || _componentsLog$time2 === void 0 ? void 0 : _componentsLog$time2.map(v => v.targetName))];
         }
       });
       return VCRatio;
     }, 0);
     const VCEntries = entries.reduce((acc, [timestamp, entryPainted], i) => {
-      var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
+      var _acc$abs, _componentsLog$timest, _componentsLog$timest2, _acc$rel$vc, _acc$rel;
       const currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
       const currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
-      const logEntry = [...new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(v => v.targetName))];
+      const logEntry = isFilterIgnoredItemsEnabled ? [...new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.filter(v => !v.ignoreReason).map(v => v.targetName))] : [...new Set((_componentsLog$timest2 = componentsLog[timestamp]) === null || _componentsLog$timest2 === void 0 ? void 0 : _componentsLog$timest2.map(v => v.targetName))];
       const ratioDelta = (currentlyPaintedRatio - ((_acc$rel$vc = (_acc$rel = acc.rel[i - 1]) === null || _acc$rel === void 0 ? void 0 : _acc$rel.vc) !== null && _acc$rel$vc !== void 0 ? _acc$rel$vc : 0)) / 100;
       if (isCalcSpeedIndexEnabled) {
         const speedIndex = timestamp * ratioDelta;

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

@@ -3,6 +3,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { shouldHandleEditorLnv } from '../../../config';
 import { isContainedWithinMediaWrapper } from '../media-wrapper/vc-utils';
 import { EditorLnvHandler } from './editor-lnv';
+import isNonVisualStyleMutation from './non-visual-styles/is-non-visual-style-mutation';
 import { SSRPlaceholderHandlers } from './ssr-placeholders';
 const state = {
   normal: 1,
@@ -196,9 +197,15 @@ export class Observers {
               const oldValue = (_mutation$oldValue = mutation.oldValue) !== null && _mutation$oldValue !== void 0 ? _mutation$oldValue : undefined;
               const newValue = mutation.attributeName ? mutation.target.getAttribute(mutation.attributeName) : undefined;
               if (oldValue !== newValue) {
+                if (isNonVisualStyleMutation(mutation)) {
+                  ignoreReason = 'non-visual-style';
+                }
                 this.observeElement(mutation.target, mutation, 'attr', ignoreReason);
               }
             } else {
+              if (isNonVisualStyleMutation(mutation)) {
+                ignoreReason = 'non-visual-style';
+              }
               this.observeElement(mutation.target, mutation, 'attr', ignoreReason);
             }
           }

package/dist/es2019/vc/vc-observer/observers/non-visual-styles/is-non-visual-style-mutation.js

@@ -0,0 +1,31 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
+/**
+ * Checks if a mutation record represents a non-visual style change
+ * @param mutation - The mutation record to check
+ * @returns boolean indicating if this is a non-visual style mutation
+ *
+ * A mutation is considered non-visual if:
+ * - The target has data-	vc-nvs="true" attribute
+ * - The changed attribute is either 'class' or 'style'
+ */
+
+export default function isNonVisualStyleMutation({
+  target,
+  attributeName
+}) {
+  const isNonVisualStyleMutationEnabled = fg('platform_ufo_non_visual_style_mutation');
+  if (!isNonVisualStyleMutationEnabled) {
+    return false;
+  }
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  if (attributeName !== 'class' && attributeName !== 'style') {
+    return false;
+  }
+  if (target.getAttribute('data-vc-nvs') !== 'true') {
+    return false;
+  }
+  return true;
+}

package/dist/es2019/vc/vc-observer/revisions/fy25_02.js

@@ -25,7 +25,7 @@ export class FY25_02Classifier extends FY25_01Classifier {
         type,
         ignoreReason
       }) => {
-        return !(ignoreReason !== null && ignoreReason !== void 0 && ignoreReason.includes('not-visible'));
+        return !(ignoreReason !== null && ignoreReason !== void 0 && ignoreReason.includes('not-visible')) && ignoreReason !== 'non-visual-style';
       }
     }]);
     _defineProperty(this, "removedFilters", []);

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

@@ -1,4 +1,5 @@
 import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
+import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
 import { createIntersectionObserver } from './intersection-observer';
 import createMutationObserver from './mutation-observer';
 import createPerformanceObserver from './performance-observer';
@@ -113,6 +114,18 @@ export default class ViewportObserver {
               }
             };
           }
+          if (isNonVisualStyleMutation({
+            target,
+            attributeName,
+            type: 'attributes'
+          })) {
+            return {
+              type: 'mutation:attribute:non-visual-style',
+              mutationData: {
+                attributeName
+              }
+            };
+          }
           const lastElementRect = this.mapVisibleNodeRects.get(target);
           if (lastElementRect && sameRectSize(rect, lastElementRect)) {
             return {

package/dist/esm/create-payload/utils/get-vc-metrics.js

@@ -16,7 +16,7 @@ export default function getVCMetrics(_x) {
 function _getVCMetrics() {
   _getVCMetrics = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(interaction) {
     var _config$vc, _config$vc$ssrWhiteli, _interaction$apdex, _config$experimentalI;
-    var config, interactionStatus, pageVisibilityUpToTTAI, isSSREnabled, ssr, tti, prefix, result, ttvcV2Revision, VC;
+    var config, interactionStatus, pageVisibilityUpToTTAI, isSSREnabled, ssr, tti, prefix, result, _result$ufoVcRev, ttvcV2Revision, VC;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -67,7 +67,7 @@ function _getVCMetrics() {
             _context.next = 26;
             break;
           }
-          ttvcV2Revision = (result === null || result === void 0 ? void 0 : result['ufo:vc:rev']).find(function (_ref) {
+          ttvcV2Revision = result === null || result === void 0 || (_result$ufoVcRev = result['ufo:vc:rev']) === null || _result$ufoVcRev === void 0 ? void 0 : _result$ufoVcRev.find(function (_ref) {
             var revision = _ref.revision;
             return revision === 'fy25.02';
           });

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

@@ -656,6 +656,7 @@ export var VCObserver = /*#__PURE__*/function () {
 
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       var isCalcSpeedIndexEnabled = fg('ufo-calc-speed-index');
+      var isFilterIgnoredItemsEnabled = fg('platform_ufo_vc_filter_ignored_items');
       entries.reduce(function () {
         var acc = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
         var v = arguments.length > 1 ? arguments[1] : undefined;
@@ -670,9 +671,13 @@ export var VCObserver = /*#__PURE__*/function () {
         VCObserver.VCParts.forEach(function (key) {
           var value = parseInt(key, 10);
           if ((VC[key] === null || VC[key] === undefined) && VCRatio >= value / 100) {
-            var _componentsLog$time;
+            var _componentsLog$time, _componentsLog$time2;
             VC[key] = time;
-            VCBox[key] = _toConsumableArray(new Set((_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.map(function (v) {
+            VCBox[key] = isFilterIgnoredItemsEnabled ? _toConsumableArray(new Set((_componentsLog$time = componentsLog[time]) === null || _componentsLog$time === void 0 ? void 0 : _componentsLog$time.filter(function (v) {
+              return !v.ignoreReason;
+            }).map(function (v) {
+              return v.targetName;
+            }))) : _toConsumableArray(new Set((_componentsLog$time2 = componentsLog[time]) === null || _componentsLog$time2 === void 0 ? void 0 : _componentsLog$time2.map(function (v) {
               return v.targetName;
             })));
           }
@@ -680,13 +685,17 @@ export var VCObserver = /*#__PURE__*/function () {
         return VCRatio;
       }, 0);
       var VCEntries = entries.reduce(function (acc, _ref16, i) {
-        var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
+        var _acc$abs, _componentsLog$timest, _componentsLog$timest2, _acc$rel$vc, _acc$rel;
         var _ref17 = _slicedToArray(_ref16, 2),
           timestamp = _ref17[0],
           entryPainted = _ref17[1];
         var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
         var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
-        var logEntry = _toConsumableArray(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.map(function (v) {
+        var logEntry = isFilterIgnoredItemsEnabled ? _toConsumableArray(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.filter(function (v) {
+          return !v.ignoreReason;
+        }).map(function (v) {
+          return v.targetName;
+        }))) : _toConsumableArray(new Set((_componentsLog$timest2 = componentsLog[timestamp]) === null || _componentsLog$timest2 === void 0 ? void 0 : _componentsLog$timest2.map(function (v) {
           return v.targetName;
         })));
         var ratioDelta = (currentlyPaintedRatio - ((_acc$rel$vc = (_acc$rel = acc.rel[i - 1]) === null || _acc$rel === void 0 ? void 0 : _acc$rel.vc) !== null && _acc$rel$vc !== void 0 ? _acc$rel$vc : 0)) / 100;

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

@@ -7,6 +7,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { shouldHandleEditorLnv } from '../../../config';
 import { isContainedWithinMediaWrapper } from '../media-wrapper/vc-utils';
 import { EditorLnvHandler } from './editor-lnv';
+import isNonVisualStyleMutation from './non-visual-styles/is-non-visual-style-mutation';
 import { SSRPlaceholderHandlers } from './ssr-placeholders';
 var state = {
   normal: 1,
@@ -217,9 +218,15 @@ export var Observers = /*#__PURE__*/function () {
                 var oldValue = (_mutation$oldValue = mutation.oldValue) !== null && _mutation$oldValue !== void 0 ? _mutation$oldValue : undefined;
                 var newValue = mutation.attributeName ? mutation.target.getAttribute(mutation.attributeName) : undefined;
                 if (oldValue !== newValue) {
+                  if (isNonVisualStyleMutation(mutation)) {
+                    ignoreReason = 'non-visual-style';
+                  }
                   _this2.observeElement(mutation.target, mutation, 'attr', ignoreReason);
                 }
               } else {
+                if (isNonVisualStyleMutation(mutation)) {
+                  ignoreReason = 'non-visual-style';
+                }
                 _this2.observeElement(mutation.target, mutation, 'attr', ignoreReason);
               }
             }

package/dist/esm/vc/vc-observer/observers/non-visual-styles/is-non-visual-style-mutation.js

@@ -0,0 +1,30 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+
+/**
+ * Checks if a mutation record represents a non-visual style change
+ * @param mutation - The mutation record to check
+ * @returns boolean indicating if this is a non-visual style mutation
+ *
+ * A mutation is considered non-visual if:
+ * - The target has data-	vc-nvs="true" attribute
+ * - The changed attribute is either 'class' or 'style'
+ */
+
+export default function isNonVisualStyleMutation(_ref) {
+  var target = _ref.target,
+    attributeName = _ref.attributeName;
+  var isNonVisualStyleMutationEnabled = fg('platform_ufo_non_visual_style_mutation');
+  if (!isNonVisualStyleMutationEnabled) {
+    return false;
+  }
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  if (attributeName !== 'class' && attributeName !== 'style') {
+    return false;
+  }
+  if (target.getAttribute('data-vc-nvs') !== 'true') {
+    return false;
+  }
+  return true;
+}

package/dist/esm/vc/vc-observer/revisions/fy25_02.js

@@ -20,7 +20,7 @@ export var FY25_02Classifier = /*#__PURE__*/function (_FY25_01Classifier) {
       filter: function filter(_ref) {
         var type = _ref.type,
           ignoreReason = _ref.ignoreReason;
-        return !(ignoreReason !== null && ignoreReason !== void 0 && ignoreReason.includes('not-visible'));
+        return !(ignoreReason !== null && ignoreReason !== void 0 && ignoreReason.includes('not-visible')) && ignoreReason !== 'non-visual-style';
       }
     }]);
     _defineProperty(_this, "removedFilters", []);

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

@@ -4,6 +4,7 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
+import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
 import { createIntersectionObserver } from './intersection-observer';
 import createMutationObserver from './mutation-observer';
 import createPerformanceObserver from './performance-observer';
@@ -120,6 +121,18 @@ var ViewportObserver = /*#__PURE__*/function () {
               }
             };
           }
+          if (isNonVisualStyleMutation({
+            target: target,
+            attributeName: attributeName,
+            type: 'attributes'
+          })) {
+            return {
+              type: 'mutation:attribute:non-visual-style',
+              mutationData: {
+                attributeName: attributeName
+              }
+            };
+          }
           var lastElementRect = _this.mapVisibleNodeRects.get(target);
           if (lastElementRect && sameRectSize(rect, lastElementRect)) {
             return {

package/dist/types/common/vc/types.d.ts

@@ -37,7 +37,7 @@ export type VCEntryType = {
     vc: number;
     elements: string[];
 };
-export type VCIgnoreReason = 'image' | 'ssr-hydration' | 'editor-lazy-node-view' | 'not-visible' | 'editor-container-mutation' | '';
+export type VCIgnoreReason = 'image' | 'ssr-hydration' | 'editor-lazy-node-view' | 'not-visible' | 'editor-container-mutation' | 'non-visual-style' | '';
 export type ComponentsLogEntry = {
     targetName: string;
     __debug__element: WeakRef<Element> | null;

package/dist/types/vc/vc-observer/observers/non-visual-styles/is-non-visual-style-mutation.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Checks if a mutation record represents a non-visual style change
+ * @param mutation - The mutation record to check
+ * @returns boolean indicating if this is a non-visual style mutation
+ *
+ * A mutation is considered non-visual if:
+ * - The target has data-	vc-nvs="true" attribute
+ * - The changed attribute is either 'class' or 'style'
+ */
+export default function isNonVisualStyleMutation({ target, attributeName, }: {
+    type: string;
+    target?: Node | null;
+    attributeName?: string | null;
+}): boolean;

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

@@ -1,5 +1,5 @@
 import type { ObservedWindowEvent } from './window-event-observer';
-export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute' | 'mutation:media' | 'layout-shift' | 'window:event' | 'unknown';
+export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute' | 'mutation:media' | 'layout-shift' | 'window:event' | 'unknown';
 export type ViewportEntryData = {
     readonly elementName: string;
     readonly rect: DOMRect;

package/dist/types-ts4.5/common/vc/types.d.ts

@@ -37,7 +37,7 @@ export type VCEntryType = {
     vc: number;
     elements: string[];
 };
-export type VCIgnoreReason = 'image' | 'ssr-hydration' | 'editor-lazy-node-view' | 'not-visible' | 'editor-container-mutation' | '';
+export type VCIgnoreReason = 'image' | 'ssr-hydration' | 'editor-lazy-node-view' | 'not-visible' | 'editor-container-mutation' | 'non-visual-style' | '';
 export type ComponentsLogEntry = {
     targetName: string;
     __debug__element: WeakRef<Element> | null;

package/dist/types-ts4.5/vc/vc-observer/observers/non-visual-styles/is-non-visual-style-mutation.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Checks if a mutation record represents a non-visual style change
+ * @param mutation - The mutation record to check
+ * @returns boolean indicating if this is a non-visual style mutation
+ *
+ * A mutation is considered non-visual if:
+ * - The target has data-	vc-nvs="true" attribute
+ * - The changed attribute is either 'class' or 'style'
+ */
+export default function isNonVisualStyleMutation({ target, attributeName, }: {
+    type: string;
+    target?: Node | null;
+    attributeName?: string | null;
+}): boolean;

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

@@ -1,5 +1,5 @@
 import type { ObservedWindowEvent } from './window-event-observer';
-export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute' | 'mutation:media' | 'layout-shift' | 'window:event' | 'unknown';
+export type VCObserverEntryType = 'mutation:child-element' | 'mutation:remount' | 'mutation:element' | 'mutation:element-replacement' | 'mutation:attribute:no-layout-shift' | 'mutation:attribute:non-visual-style' | 'mutation:attribute' | 'mutation:media' | 'layout-shift' | 'window:event' | 'unknown';
 export type ViewportEntryData = {
     readonly elementName: string;
     readonly rect: DOMRect;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "3.4.12",
+	"version": "3.4.14",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -183,6 +183,12 @@
 		},
 		"platform_ufo_disable_ttvc_v1": {
 			"type": "boolean"
+		},
+		"platform_ufo_non_visual_style_mutation": {
+			"type": "boolean"
+		},
+		"platform_ufo_vc_filter_ignored_items": {
+			"type": "boolean"
 		}
 	}
 }