@atlaskit/react-ufo 3.14.5 → 3.14.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.14.6
+
+### Patch Changes
+
+- [#179156](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179156)
+  [`81f5605b925fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/81f5605b925fc) -
+  AFO-4081 ufo vc ignore if no layout shift marker
+
 ## 3.14.5
 
 ### Patch Changes

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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 _rllPlaceholders = require("../../vc-observer/observers/rll-placeholders");
@@ -15,6 +16,7 @@ var _intersectionObserver = require("./intersection-observer");
 var _mutationObserver = _interopRequireDefault(require("./mutation-observer"));
 var _performanceObserver = _interopRequireDefault(require("./performance-observer"));
 var _getComponentNameAndChildProps = require("./utils/get-component-name-and-child-props");
+var _isInVcIgnoreIfNoLayoutShiftMarker = _interopRequireDefault(require("./utils/is-in-vc-ignore-if-no-layout-shift-marker"));
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 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; }
@@ -49,15 +51,23 @@ function sameRectDimensions(a, b) {
 }
 var createElementMutationsWatcher = function createElementMutationsWatcher(removedNodeRects) {
   return function (_ref) {
-    var rect = _ref.rect;
+    var target = _ref.target,
+      rect = _ref.rect;
+    var isNoLsMarkerEnabled = (0, _platformFeatureFlags.fg)('platform_vc_ignore_no_ls_mutation_marker');
+    var isInIgnoreLsMarker = (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(target);
+    if (!isInIgnoreLsMarker && isNoLsMarkerEnabled) {
+      return 'mutation:element';
+    }
     var isRLLPlaceholder = _rllPlaceholders.RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
-    if (isRLLPlaceholder) {
+    if (isRLLPlaceholder && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
       return 'mutation:rll-placeholder';
     }
     var wasDeleted = removedNodeRects.some(function (nr) {
       return sameRectDimensions(nr, rect);
     });
-    if (wasDeleted) {
+    // When fg('platform_vc_ignore_no_ls_mutation_marker') is not enabled,
+    // no layout shift mutation is excluded as per existing fy25.03 logic
+    if (wasDeleted && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
       return 'mutation:element-replacement';
     }
     return 'mutation:element';
@@ -113,7 +123,12 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
           }
           return n.isEqualNode(addedNode);
         });
-        if (sameDeletedNode) {
+        var isInIgnoreLsMarker = (0, _isInVcIgnoreIfNoLayoutShiftMarker.default)(addedNode);
+        var isNoLsMarkerEnabled = (0, _platformFeatureFlags.fg)('platform_vc_ignore_no_ls_mutation_marker');
+
+        // When fg('platform_vc_ignore_no_ls_mutation_marker') is not enabled,
+        // no layout shift mutation is excluded as per existing fy25.03 logic
+        if (sameDeletedNode && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
           var _this$intersectionObs;
           (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(addedNode, 'mutation:remount');
           return;

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 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; }
@@ -17,16 +18,17 @@ function createMutationObserver(_ref) {
   var mutationObserverCallback = function mutationObserverCallback(mutations) {
     var addedNodes = [];
     var removedNodes = [];
+    var attributeMutations = [];
     var targets = [];
     var _iterator = _createForOfIteratorHelper(mutations),
       _step;
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var mut = _step.value;
-        if (!(mut.target instanceof HTMLElement)) {
+        var _mut = _step.value;
+        if (!(_mut.target instanceof HTMLElement)) {
           continue;
         }
-        if (mut.type === 'attributes') {
+        if (_mut.type === 'attributes') {
           var _mut$oldValue;
           /*
           			"MutationObserver was explicitly designed to work that way, but I can't now recall the reasoning.
@@ -36,32 +38,42 @@ function createMutationObserver(_ref) {
           			And Custom elements should work the same way as MutationObserver."
           			https://github.com/whatwg/dom/issues/520#issuecomment-336574796
           		*/
-          var oldValue = (_mut$oldValue = mut.oldValue) !== null && _mut$oldValue !== void 0 ? _mut$oldValue : undefined;
-          var newValue = mut.attributeName ? mut.target.getAttribute(mut.attributeName) : undefined;
+          var oldValue = (_mut$oldValue = _mut.oldValue) !== null && _mut$oldValue !== void 0 ? _mut$oldValue : undefined;
+          var newValue = _mut.attributeName ? _mut.target.getAttribute(_mut.attributeName) : undefined;
           if (oldValue !== newValue) {
-            var _mut$attributeName;
-            onAttributeMutation({
-              target: mut.target,
-              attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
-              oldValue: oldValue,
-              newValue: newValue
-            });
+            if ((0, _platformFeatureFlags.fg)('platform_vc_ignore_no_ls_mutation_marker')) {
+              var _mut$attributeName;
+              attributeMutations.push({
+                target: new WeakRef(_mut.target),
+                attributeName: (_mut$attributeName = _mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
+                oldValue: oldValue,
+                newValue: newValue
+              });
+            } else {
+              var _mut$attributeName2;
+              onAttributeMutation({
+                target: _mut.target,
+                attributeName: (_mut$attributeName2 = _mut.attributeName) !== null && _mut$attributeName2 !== void 0 ? _mut$attributeName2 : 'unknown',
+                oldValue: oldValue,
+                newValue: newValue
+              });
+            }
           }
           continue;
-        } else if (mut.type === 'childList') {
+        } else if (_mut.type === 'childList') {
           var _mut$addedNodes, _mut$removedNodes;
-          ((_mut$addedNodes = mut.addedNodes) !== null && _mut$addedNodes !== void 0 ? _mut$addedNodes : []).forEach(function (node) {
+          ((_mut$addedNodes = _mut.addedNodes) !== null && _mut$addedNodes !== void 0 ? _mut$addedNodes : []).forEach(function (node) {
             if (node instanceof HTMLElement) {
               addedNodes.push(new WeakRef(node));
             }
           });
-          ((_mut$removedNodes = mut.removedNodes) !== null && _mut$removedNodes !== void 0 ? _mut$removedNodes : []).forEach(function (node) {
+          ((_mut$removedNodes = _mut.removedNodes) !== null && _mut$removedNodes !== void 0 ? _mut$removedNodes : []).forEach(function (node) {
             if (node instanceof HTMLElement) {
               removedNodes.push(new WeakRef(node));
             }
           });
         }
-        targets.push(mut.target);
+        targets.push(_mut.target);
       }
     } catch (err) {
       _iterator.e(err);
@@ -72,6 +84,15 @@ function createMutationObserver(_ref) {
       addedNodes: addedNodes,
       removedNodes: removedNodes
     });
+    for (var _i = 0, _attributeMutations = attributeMutations; _i < _attributeMutations.length; _i++) {
+      var mut = _attributeMutations[_i];
+      onAttributeMutation({
+        target: mut.target.deref(),
+        attributeName: mut.attributeName,
+        oldValue: mut.oldValue,
+        newValue: mut.newValue
+      });
+    }
     onMutationFinished === null || onMutationFinished === void 0 || onMutationFinished({
       targets: targets
     });

package/dist/cjs/vc/vc-observer-new/viewport-observer/utils/is-in-vc-ignore-if-no-layout-shift-marker.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isInVCIgnoreIfNoLayoutShiftMarker;
+/**
+ * Check if the element is in the VC ignore if no layout shift marker.
+ * @param element - The element to check.
+ * @returns True if the element has the data-vc-ignore-if-no-layout-shift attribute == 'true or its parent has it, false otherwise.
+ */
+function isInVCIgnoreIfNoLayoutShiftMarker(element) {
+  if (!element) {
+    return false;
+  }
+  return element.getAttribute('data-vc-ignore-if-no-layout-shift') === 'true' || isInVCIgnoreIfNoLayoutShiftMarker(element.parentElement);
+}

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
 import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
 import { RLLPlaceholderHandlers } from '../../vc-observer/observers/rll-placeholders';
@@ -6,6 +7,7 @@ import { createIntersectionObserver } from './intersection-observer';
 import createMutationObserver from './mutation-observer';
 import createPerformanceObserver from './performance-observer';
 import { checkThirdPartySegmentWithIgnoreReason, createMutationTypeWithIgnoredReason } from './utils/get-component-name-and-child-props';
+import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
 function isElementVisible(element) {
   if (!(element instanceof HTMLElement)) {
     return true;
@@ -36,14 +38,22 @@ function sameRectDimensions(a, b) {
   return a.width === b.width && a.height === b.height && a.x === b.x && a.y === b.y;
 }
 const createElementMutationsWatcher = removedNodeRects => ({
+  target,
   rect
 }) => {
+  const isNoLsMarkerEnabled = fg('platform_vc_ignore_no_ls_mutation_marker');
+  const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(target);
+  if (!isInIgnoreLsMarker && isNoLsMarkerEnabled) {
+    return 'mutation:element';
+  }
   const isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
-  if (isRLLPlaceholder) {
+  if (isRLLPlaceholder && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
     return 'mutation:rll-placeholder';
   }
   const wasDeleted = removedNodeRects.some(nr => sameRectDimensions(nr, rect));
-  if (wasDeleted) {
+  // When fg('platform_vc_ignore_no_ls_mutation_marker') is not enabled,
+  // no layout shift mutation is excluded as per existing fy25.03 logic
+  if (wasDeleted && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
     return 'mutation:element-replacement';
   }
   return 'mutation:element';
@@ -99,7 +109,12 @@ export default class ViewportObserver {
           }
           return n.isEqualNode(addedNode);
         });
-        if (sameDeletedNode) {
+        const isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
+        const isNoLsMarkerEnabled = fg('platform_vc_ignore_no_ls_mutation_marker');
+
+        // When fg('platform_vc_ignore_no_ls_mutation_marker') is not enabled,
+        // no layout shift mutation is excluded as per existing fy25.03 logic
+        if (sameDeletedNode && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
           var _this$intersectionObs;
           (_this$intersectionObs = this.intersectionObserver) === null || _this$intersectionObs === void 0 ? void 0 : _this$intersectionObs.watchAndTag(addedNode, 'mutation:remount');
           return;

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

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 function createMutationObserver({
   onAttributeMutation,
   onChildListMutation,
@@ -9,6 +10,7 @@ function createMutationObserver({
   const mutationObserverCallback = mutations => {
     const addedNodes = [];
     const removedNodes = [];
+    const attributeMutations = [];
     const targets = [];
     for (const mut of mutations) {
       if (!(mut.target instanceof HTMLElement)) {
@@ -27,13 +29,23 @@ function createMutationObserver({
         const oldValue = (_mut$oldValue = mut.oldValue) !== null && _mut$oldValue !== void 0 ? _mut$oldValue : undefined;
         const newValue = mut.attributeName ? mut.target.getAttribute(mut.attributeName) : undefined;
         if (oldValue !== newValue) {
-          var _mut$attributeName;
-          onAttributeMutation({
-            target: mut.target,
-            attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
-            oldValue,
-            newValue
-          });
+          if (fg('platform_vc_ignore_no_ls_mutation_marker')) {
+            var _mut$attributeName;
+            attributeMutations.push({
+              target: new WeakRef(mut.target),
+              attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
+              oldValue,
+              newValue
+            });
+          } else {
+            var _mut$attributeName2;
+            onAttributeMutation({
+              target: mut.target,
+              attributeName: (_mut$attributeName2 = mut.attributeName) !== null && _mut$attributeName2 !== void 0 ? _mut$attributeName2 : 'unknown',
+              oldValue,
+              newValue
+            });
+          }
         }
         continue;
       } else if (mut.type === 'childList') {
@@ -55,6 +67,14 @@ function createMutationObserver({
       addedNodes,
       removedNodes
     });
+    for (const mut of attributeMutations) {
+      onAttributeMutation({
+        target: mut.target.deref(),
+        attributeName: mut.attributeName,
+        oldValue: mut.oldValue,
+        newValue: mut.newValue
+      });
+    }
     onMutationFinished === null || onMutationFinished === void 0 ? void 0 : onMutationFinished({
       targets
     });

package/dist/es2019/vc/vc-observer-new/viewport-observer/utils/is-in-vc-ignore-if-no-layout-shift-marker.js

@@ -0,0 +1,11 @@
+/**
+ * Check if the element is in the VC ignore if no layout shift marker.
+ * @param element - The element to check.
+ * @returns True if the element has the data-vc-ignore-if-no-layout-shift attribute == 'true or its parent has it, false otherwise.
+ */
+export default function isInVCIgnoreIfNoLayoutShiftMarker(element) {
+  if (!element) {
+    return false;
+  }
+  return element.getAttribute('data-vc-ignore-if-no-layout-shift') === 'true' || isInVCIgnoreIfNoLayoutShiftMarker(element.parentElement);
+}

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

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 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 { fg } from '@atlaskit/platform-feature-flags';
 import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
 import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
 import { RLLPlaceholderHandlers } from '../../vc-observer/observers/rll-placeholders';
@@ -11,6 +12,7 @@ import { createIntersectionObserver } from './intersection-observer';
 import createMutationObserver from './mutation-observer';
 import createPerformanceObserver from './performance-observer';
 import { checkThirdPartySegmentWithIgnoreReason, createMutationTypeWithIgnoredReason } from './utils/get-component-name-and-child-props';
+import isInVCIgnoreIfNoLayoutShiftMarker from './utils/is-in-vc-ignore-if-no-layout-shift-marker';
 function isElementVisible(element) {
   if (!(element instanceof HTMLElement)) {
     return true;
@@ -42,15 +44,23 @@ function sameRectDimensions(a, b) {
 }
 var createElementMutationsWatcher = function createElementMutationsWatcher(removedNodeRects) {
   return function (_ref) {
-    var rect = _ref.rect;
+    var target = _ref.target,
+      rect = _ref.rect;
+    var isNoLsMarkerEnabled = fg('platform_vc_ignore_no_ls_mutation_marker');
+    var isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(target);
+    if (!isInIgnoreLsMarker && isNoLsMarkerEnabled) {
+      return 'mutation:element';
+    }
     var isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
-    if (isRLLPlaceholder) {
+    if (isRLLPlaceholder && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
       return 'mutation:rll-placeholder';
     }
     var wasDeleted = removedNodeRects.some(function (nr) {
       return sameRectDimensions(nr, rect);
     });
-    if (wasDeleted) {
+    // When fg('platform_vc_ignore_no_ls_mutation_marker') is not enabled,
+    // no layout shift mutation is excluded as per existing fy25.03 logic
+    if (wasDeleted && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
       return 'mutation:element-replacement';
     }
     return 'mutation:element';
@@ -106,7 +116,12 @@ var ViewportObserver = /*#__PURE__*/function () {
           }
           return n.isEqualNode(addedNode);
         });
-        if (sameDeletedNode) {
+        var isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(addedNode);
+        var isNoLsMarkerEnabled = fg('platform_vc_ignore_no_ls_mutation_marker');
+
+        // When fg('platform_vc_ignore_no_ls_mutation_marker') is not enabled,
+        // no layout shift mutation is excluded as per existing fy25.03 logic
+        if (sameDeletedNode && (!isNoLsMarkerEnabled || isInIgnoreLsMarker)) {
           var _this$intersectionObs;
           (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(addedNode, 'mutation:remount');
           return;

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

@@ -1,6 +1,7 @@
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 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 { fg } from '@atlaskit/platform-feature-flags';
 function createMutationObserver(_ref) {
   var onAttributeMutation = _ref.onAttributeMutation,
     onChildListMutation = _ref.onChildListMutation,
@@ -11,16 +12,17 @@ function createMutationObserver(_ref) {
   var mutationObserverCallback = function mutationObserverCallback(mutations) {
     var addedNodes = [];
     var removedNodes = [];
+    var attributeMutations = [];
     var targets = [];
     var _iterator = _createForOfIteratorHelper(mutations),
       _step;
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var mut = _step.value;
-        if (!(mut.target instanceof HTMLElement)) {
+        var _mut = _step.value;
+        if (!(_mut.target instanceof HTMLElement)) {
           continue;
         }
-        if (mut.type === 'attributes') {
+        if (_mut.type === 'attributes') {
           var _mut$oldValue;
           /*
           			"MutationObserver was explicitly designed to work that way, but I can't now recall the reasoning.
@@ -30,32 +32,42 @@ function createMutationObserver(_ref) {
           			And Custom elements should work the same way as MutationObserver."
           			https://github.com/whatwg/dom/issues/520#issuecomment-336574796
           		*/
-          var oldValue = (_mut$oldValue = mut.oldValue) !== null && _mut$oldValue !== void 0 ? _mut$oldValue : undefined;
-          var newValue = mut.attributeName ? mut.target.getAttribute(mut.attributeName) : undefined;
+          var oldValue = (_mut$oldValue = _mut.oldValue) !== null && _mut$oldValue !== void 0 ? _mut$oldValue : undefined;
+          var newValue = _mut.attributeName ? _mut.target.getAttribute(_mut.attributeName) : undefined;
           if (oldValue !== newValue) {
-            var _mut$attributeName;
-            onAttributeMutation({
-              target: mut.target,
-              attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
-              oldValue: oldValue,
-              newValue: newValue
-            });
+            if (fg('platform_vc_ignore_no_ls_mutation_marker')) {
+              var _mut$attributeName;
+              attributeMutations.push({
+                target: new WeakRef(_mut.target),
+                attributeName: (_mut$attributeName = _mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
+                oldValue: oldValue,
+                newValue: newValue
+              });
+            } else {
+              var _mut$attributeName2;
+              onAttributeMutation({
+                target: _mut.target,
+                attributeName: (_mut$attributeName2 = _mut.attributeName) !== null && _mut$attributeName2 !== void 0 ? _mut$attributeName2 : 'unknown',
+                oldValue: oldValue,
+                newValue: newValue
+              });
+            }
           }
           continue;
-        } else if (mut.type === 'childList') {
+        } else if (_mut.type === 'childList') {
           var _mut$addedNodes, _mut$removedNodes;
-          ((_mut$addedNodes = mut.addedNodes) !== null && _mut$addedNodes !== void 0 ? _mut$addedNodes : []).forEach(function (node) {
+          ((_mut$addedNodes = _mut.addedNodes) !== null && _mut$addedNodes !== void 0 ? _mut$addedNodes : []).forEach(function (node) {
             if (node instanceof HTMLElement) {
               addedNodes.push(new WeakRef(node));
             }
           });
-          ((_mut$removedNodes = mut.removedNodes) !== null && _mut$removedNodes !== void 0 ? _mut$removedNodes : []).forEach(function (node) {
+          ((_mut$removedNodes = _mut.removedNodes) !== null && _mut$removedNodes !== void 0 ? _mut$removedNodes : []).forEach(function (node) {
             if (node instanceof HTMLElement) {
               removedNodes.push(new WeakRef(node));
             }
           });
         }
-        targets.push(mut.target);
+        targets.push(_mut.target);
       }
     } catch (err) {
       _iterator.e(err);
@@ -66,6 +78,15 @@ function createMutationObserver(_ref) {
       addedNodes: addedNodes,
       removedNodes: removedNodes
     });
+    for (var _i = 0, _attributeMutations = attributeMutations; _i < _attributeMutations.length; _i++) {
+      var mut = _attributeMutations[_i];
+      onAttributeMutation({
+        target: mut.target.deref(),
+        attributeName: mut.attributeName,
+        oldValue: mut.oldValue,
+        newValue: mut.newValue
+      });
+    }
     onMutationFinished === null || onMutationFinished === void 0 || onMutationFinished({
       targets: targets
     });

package/dist/esm/vc/vc-observer-new/viewport-observer/utils/is-in-vc-ignore-if-no-layout-shift-marker.js

@@ -0,0 +1,11 @@
+/**
+ * Check if the element is in the VC ignore if no layout shift marker.
+ * @param element - The element to check.
+ * @returns True if the element has the data-vc-ignore-if-no-layout-shift attribute == 'true or its parent has it, false otherwise.
+ */
+export default function isInVCIgnoreIfNoLayoutShiftMarker(element) {
+  if (!element) {
+    return false;
+  }
+  return element.getAttribute('data-vc-ignore-if-no-layout-shift') === 'true' || isInVCIgnoreIfNoLayoutShiftMarker(element.parentElement);
+}

package/dist/types/vc/vc-observer-new/viewport-observer/utils/is-in-vc-ignore-if-no-layout-shift-marker.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Check if the element is in the VC ignore if no layout shift marker.
+ * @param element - The element to check.
+ * @returns True if the element has the data-vc-ignore-if-no-layout-shift attribute == 'true or its parent has it, false otherwise.
+ */
+export default function isInVCIgnoreIfNoLayoutShiftMarker(element: HTMLElement | null | undefined): boolean;

package/dist/types-ts4.5/vc/vc-observer-new/viewport-observer/utils/is-in-vc-ignore-if-no-layout-shift-marker.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Check if the element is in the VC ignore if no layout shift marker.
+ * @param element - The element to check.
+ * @returns True if the element has the data-vc-ignore-if-no-layout-shift attribute == 'true or its parent has it, false otherwise.
+ */
+export default function isInVCIgnoreIfNoLayoutShiftMarker(element: HTMLElement | null | undefined): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-ufo",
-	"version": "3.14.5",
+	"version": "3.14.6",
 	"description": "Parts of React UFO that are publicly available",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -205,6 +205,9 @@
 		},
 		"platform_ufo_add_type_for_3p_segments": {
 			"type": "boolean"
+		},
+		"platform_vc_ignore_no_ls_mutation_marker": {
+			"type": "boolean"
 		}
 	}
 }