@atlaskit/onboarding 11.13.0 → 11.15.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/onboarding
 
+## 11.15.0
+
+### Minor Changes
+
+- [#144362](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144362)
+  [`73d292c184200`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/73d292c184200) -
+  [ux] Fix for bug DSP-21004. Update cloned content on mutation
+
+## 11.14.0
+
+### Minor Changes
+
+- [`2d1da097bd763`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2d1da097bd763) -
+  DSP-20687 removing usage of findDOMNode in react-transition-group behind ff
+
 ## 11.13.0
 
 ### Minor Changes

package/dist/cjs/components/animation.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Fade = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactTransitionGroup = require("react-transition-group");
+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; }
 var duration = {
@@ -25,13 +27,16 @@ var Fade = exports.Fade = function Fade(_ref) {
   var hasEntered = _ref.hasEntered,
     children = _ref.children,
     onExited = _ref.onExited;
-  return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {
+  var nodeRef = _react.default.useRef(null);
+  return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, (0, _extends2.default)({
     in: hasEntered,
     timeout: duration,
     onExited: onExited,
     unmountOnExit: true,
     appear: true
-  }, function (status) {
+  }, (0, _platformFeatureFlags.fg)('platform-design-system-dsp-20687-transition-group') && {
+    nodeRef: nodeRef
+  }), function (status) {
     var base = {
       transition: "opacity ".concat(duration.exit, "ms"),
       opacity: 0

package/dist/cjs/components/clone.js

@@ -1,12 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _target = require("../styled/target");
+var _useElementObserver = require("../utils/use-element-observer");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var computedStyleAttributesToClone = ['fontSize', 'fontWeight', 'lineHeight', 'padding', 'color', 'textOverflow'];
 function cloneAndOverrideStyles(node) {
   var shouldCloneChildren = true;
@@ -34,12 +37,21 @@ function cloneAndOverrideStyles(node) {
 var Clone = function Clone(props) {
   var pulse = props.pulse,
     style = props.style,
+    shouldWatch = props.shouldWatch,
     target = props.target,
     targetBgColor = props.targetBgColor,
     targetOnClick = props.targetOnClick,
     targetNode = props.targetNode,
     targetRadius = props.targetRadius,
     testId = props.testId;
+  var contentVersion = (0, _useElementObserver.useElementObserver)(targetNode, {
+    disableWatch: !shouldWatch
+  });
+  var contentHTML = (0, _react.useMemo)(function () {
+    return cloneAndOverrideStyles(targetNode).outerHTML;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to update when the content changes
+  [contentVersion, targetNode]);
   return /*#__PURE__*/_react.default.createElement(_target.TargetInner, {
     "data-testid": testId,
     pulse: pulse,
@@ -51,7 +63,7 @@ var Clone = function Clone(props) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
-      __html: cloneAndOverrideStyles(targetNode).outerHTML
+      __html: contentHTML
     }
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,

package/dist/cjs/components/modal.js

@@ -24,8 +24,8 @@ var _theme = require("./theme");
 var _excluded = ["text", "key"],
   _excluded2 = ["actions", "children", "heading"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
  * @jsx jsx

package/dist/cjs/components/node-resolver-spotlight-inner.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * A wrapper component that conditionally applies a NodeResolver to its children.
  *

package/dist/cjs/components/node-resolver-spotlight-target.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * A wrapper component that conditionally applies a NodeResolver to its children.
  *

package/dist/cjs/components/spotlight-card.js

@@ -21,7 +21,7 @@ var _excluded = ["text", "key"];
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var bodyStyles = (0, _react2.css)({
   display: 'flex',
   padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-250, 20px)"),

package/dist/cjs/components/spotlight-dialog.js

@@ -20,10 +20,10 @@ var _dialog = require("../styled/dialog");
 var _spotlightCard = _interopRequireDefault(require("./spotlight-card"));
 var _valueChanged = _interopRequireDefault(require("./value-changed"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * __Spotlight dialog__

package/dist/cjs/components/spotlight-inner.js

@@ -28,7 +28,7 @@ var _spotlightDialog = _interopRequireDefault(require("./spotlight-dialog"));
 var _spotlightTransition = require("./spotlight-transition");
 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; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * __Spotlight inner__

package/dist/cjs/components/spotlight-manager.js

@@ -21,10 +21,10 @@ var _constants = require("@atlaskit/theme/constants");
 var _blanket = _interopRequireDefault(require("../styled/blanket"));
 var _animation = require("./animation");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var _createContext = /*#__PURE__*/(0, _react.createContext)(undefined),
   TargetConsumer = exports.TargetConsumer = _createContext.Consumer,

package/dist/cjs/components/spotlight-transition.js

@@ -16,8 +16,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var SpotlightTransitionContext = /*#__PURE__*/(0, _react.createContext)({
   isOpen: true,

package/dist/cjs/components/theme.js

@@ -13,7 +13,7 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _excluded = ["buttonStyles"],
   _excluded2 = ["buttonStyles"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
 var spotlightTheme = {

package/dist/cjs/components/value-changed.js

@@ -11,7 +11,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _react = _interopRequireDefault(require("react"));
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // This component was born from the pain of using render props in lifecycle methods.
 // On update, it checks whether the current value prop is equal to the previous value prop.

package/dist/cjs/utils/use-element-observer.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ElementObserver = ElementObserver;
+exports.useElementObserver = useElementObserver;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+/**
+ * A hook that watches for changes to a node and forces a re-render when it changes.
+ *
+ * @param element The node to watch for changes.
+ * @param opts Options for the hook.
+ * @param [opts.disableWatch=false] Whether to watch for changes or not.
+ * @param [opts.onChange] A callback that is called when the node changes.
+ *
+ * @returns A version number that is incremented when the node changes to force a re-render.
+ *
+ * @internal
+ */
+function useElementObserver(element) {
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var onChange = opts.onChange,
+    _opts$disableWatch = opts.disableWatch,
+    disableWatch = _opts$disableWatch === void 0 ? false : _opts$disableWatch;
+
+  // This state is used to force a re-render when the target changes
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    targetContentVersion = _useState2[0],
+    setTargetContentVersion = _useState2[1];
+  var mutationObserver = (0, _react.useRef)(undefined);
+  var cancelIdleCallback = (0, _react.useRef)(undefined);
+  var disposer = (0, _react.useCallback)(function () {
+    var _cancelIdleCallback$c, _mutationObserver$cur;
+    (_cancelIdleCallback$c = cancelIdleCallback.current) === null || _cancelIdleCallback$c === void 0 || _cancelIdleCallback$c.call(cancelIdleCallback);
+    cancelIdleCallback.current = undefined;
+    (_mutationObserver$cur = mutationObserver.current) === null || _mutationObserver$cur === void 0 || _mutationObserver$cur.disconnect();
+    mutationObserver.current = undefined;
+  }, []);
+  var onMutation = (0, _react.useCallback)(function () {
+    var _cancelIdleCallback$c2;
+    // MutationObserver can make multiple calls to the callback in quick succession so debounce when idle
+    (_cancelIdleCallback$c2 = cancelIdleCallback.current) === null || _cancelIdleCallback$c2 === void 0 || _cancelIdleCallback$c2.call(cancelIdleCallback);
+    cancelIdleCallback.current = callWhenIdle(function () {
+      return setTargetContentVersion(function (v) {
+        var version = v + 1;
+        onChange === null || onChange === void 0 || onChange(version);
+        return version;
+      });
+    });
+  }, [onChange]);
+  (0, _react.useEffect)(function () {
+    // Clean up any existing observer in the case that the target node has changed
+    disposer();
+    if (!disableWatch && element) {
+      mutationObserver.current = new MutationObserver(onMutation);
+      mutationObserver.current.observe(element, {
+        attributes: true,
+        childList: true,
+        subtree: true
+      });
+    }
+    return disposer;
+  }, [disableWatch, disposer, element, onMutation]);
+  return targetContentVersion;
+}
+
+/**
+ * A component that watches for changes to a node and forces a re-render when it changes.
+ *
+ * @param props
+ * @param props.element The node to watch for changes.
+ * @param props.children The children to render.
+ * @param [props.disableWatch=false] Whether to watch for changes or not.
+ * @param [props.onChange] A callback that is called when the node changes.
+ *
+ * @component
+ * @internal
+ */
+function ElementObserver(_ref) {
+  var element = _ref.element,
+    children = _ref.children,
+    onChange = _ref.onChange,
+    disableWatch = _ref.disableWatch;
+  useElementObserver(element, {
+    disableWatch: disableWatch,
+    onChange: onChange
+  });
+  return {
+    children: children
+  };
+}
+
+/**
+ * When the browser is idle call the callback.
+ *
+ * This function will use `requestIdleCallback` if available, otherwise it will fallback to `setTimeout`.
+ *
+ * @param callback The function to call when the browser is idle.
+ * @param [opts] Options for the idle callback.
+ * @param [opts.timeout=100] The maximum time to wait for the browser to be idle.
+ *
+ * @returns A function that can be called to cancel the idle callback.
+ *
+ * @internal
+ */
+function callWhenIdle(callback) {
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _opts$timeout = opts.timeout,
+    timeout = _opts$timeout === void 0 ? 100 : _opts$timeout;
+
+  // eslint-disable-next-line compat/compat
+  if (typeof window.requestIdleCallback === 'function') {
+    // eslint-disable-next-line compat/compat
+    var idleHandle = window.requestIdleCallback(callback, {
+      timeout: timeout
+    });
+    return function () {
+      return cancelIdleCallback(idleHandle);
+    };
+  }
+
+  // Fallback to setTimeout if requestIdleCallback is not available
+  var timeoutHandle = setTimeout(callback, timeout);
+  return function () {
+    return clearTimeout(timeoutHandle);
+  };
+}

package/dist/es2019/components/animation.js

@@ -1,5 +1,7 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { Transition } from 'react-transition-group';
+import { fg } from '@atlaskit/platform-feature-flags';
 const duration = {
   enter: 0,
   exit: 100
@@ -15,28 +17,33 @@ export const Fade = ({
   hasEntered,
   children,
   onExited
-}) => /*#__PURE__*/React.createElement(Transition, {
-  in: hasEntered,
-  timeout: duration,
-  onExited: onExited,
-  unmountOnExit: true,
-  appear: true
-}, status => {
-  const base = {
-    transition: `opacity ${duration.exit}ms`,
-    opacity: 0
-  };
-  const anim = {
-    entered: {
-      opacity: 1
-    },
-    exiting: {
+}) => {
+  const nodeRef = React.useRef(null);
+  return /*#__PURE__*/React.createElement(Transition, _extends({
+    in: hasEntered,
+    timeout: duration,
+    onExited: onExited,
+    unmountOnExit: true,
+    appear: true
+  }, fg('platform-design-system-dsp-20687-transition-group') && {
+    nodeRef
+  }), status => {
+    const base = {
+      transition: `opacity ${duration.exit}ms`,
       opacity: 0
-    }
-  };
-  const style = {
-    ...base,
-    ...anim[status]
-  };
-  return children(style);
-});
+    };
+    const anim = {
+      entered: {
+        opacity: 1
+      },
+      exiting: {
+        opacity: 0
+      }
+    };
+    const style = {
+      ...base,
+      ...anim[status]
+    };
+    return children(style);
+  });
+};

package/dist/es2019/components/clone.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { TargetInner, TargetOverlay } from '../styled/target';
+import { useElementObserver } from '../utils/use-element-observer';
 const computedStyleAttributesToClone = ['fontSize', 'fontWeight', 'lineHeight', 'padding', 'color', 'textOverflow'];
 function cloneAndOverrideStyles(node) {
   const shouldCloneChildren = true;
@@ -28,6 +29,7 @@ const Clone = props => {
   const {
     pulse,
     style,
+    shouldWatch,
     target,
     targetBgColor,
     targetOnClick,
@@ -35,6 +37,12 @@ const Clone = props => {
     targetRadius,
     testId
   } = props;
+  const contentVersion = useElementObserver(targetNode, {
+    disableWatch: !shouldWatch
+  });
+  const contentHTML = useMemo(() => cloneAndOverrideStyles(targetNode).outerHTML,
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to update when the content changes
+  [contentVersion, targetNode]);
   return /*#__PURE__*/React.createElement(TargetInner, {
     "data-testid": testId,
     pulse: pulse,
@@ -46,7 +54,7 @@ const Clone = props => {
   }, /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
-      __html: cloneAndOverrideStyles(targetNode).outerHTML
+      __html: contentHTML
     }
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,

package/dist/es2019/utils/use-element-observer.js

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * A hook that watches for changes to a node and forces a re-render when it changes.
+ *
+ * @param element The node to watch for changes.
+ * @param opts Options for the hook.
+ * @param [opts.disableWatch=false] Whether to watch for changes or not.
+ * @param [opts.onChange] A callback that is called when the node changes.
+ *
+ * @returns A version number that is incremented when the node changes to force a re-render.
+ *
+ * @internal
+ */
+export function useElementObserver(element, opts = {}) {
+  const {
+    onChange,
+    disableWatch = false
+  } = opts;
+
+  // This state is used to force a re-render when the target changes
+  const [targetContentVersion, setTargetContentVersion] = useState(0);
+  const mutationObserver = useRef(undefined);
+  const cancelIdleCallback = useRef(undefined);
+  const disposer = useCallback(() => {
+    var _cancelIdleCallback$c, _mutationObserver$cur;
+    (_cancelIdleCallback$c = cancelIdleCallback.current) === null || _cancelIdleCallback$c === void 0 ? void 0 : _cancelIdleCallback$c.call(cancelIdleCallback);
+    cancelIdleCallback.current = undefined;
+    (_mutationObserver$cur = mutationObserver.current) === null || _mutationObserver$cur === void 0 ? void 0 : _mutationObserver$cur.disconnect();
+    mutationObserver.current = undefined;
+  }, []);
+  const onMutation = useCallback(() => {
+    var _cancelIdleCallback$c2;
+    // MutationObserver can make multiple calls to the callback in quick succession so debounce when idle
+    (_cancelIdleCallback$c2 = cancelIdleCallback.current) === null || _cancelIdleCallback$c2 === void 0 ? void 0 : _cancelIdleCallback$c2.call(cancelIdleCallback);
+    cancelIdleCallback.current = callWhenIdle(() => setTargetContentVersion(v => {
+      const version = v + 1;
+      onChange === null || onChange === void 0 ? void 0 : onChange(version);
+      return version;
+    }));
+  }, [onChange]);
+  useEffect(() => {
+    // Clean up any existing observer in the case that the target node has changed
+    disposer();
+    if (!disableWatch && element) {
+      mutationObserver.current = new MutationObserver(onMutation);
+      mutationObserver.current.observe(element, {
+        attributes: true,
+        childList: true,
+        subtree: true
+      });
+    }
+    return disposer;
+  }, [disableWatch, disposer, element, onMutation]);
+  return targetContentVersion;
+}
+
+/**
+ * A component that watches for changes to a node and forces a re-render when it changes.
+ *
+ * @param props
+ * @param props.element The node to watch for changes.
+ * @param props.children The children to render.
+ * @param [props.disableWatch=false] Whether to watch for changes or not.
+ * @param [props.onChange] A callback that is called when the node changes.
+ *
+ * @component
+ * @internal
+ */
+export function ElementObserver({
+  element,
+  children,
+  onChange,
+  disableWatch
+}) {
+  useElementObserver(element, {
+    disableWatch,
+    onChange
+  });
+  return {
+    children
+  };
+}
+
+/**
+ * When the browser is idle call the callback.
+ *
+ * This function will use `requestIdleCallback` if available, otherwise it will fallback to `setTimeout`.
+ *
+ * @param callback The function to call when the browser is idle.
+ * @param [opts] Options for the idle callback.
+ * @param [opts.timeout=100] The maximum time to wait for the browser to be idle.
+ *
+ * @returns A function that can be called to cancel the idle callback.
+ *
+ * @internal
+ */
+function callWhenIdle(callback, opts = {}) {
+  const {
+    timeout = 100
+  } = opts;
+
+  // eslint-disable-next-line compat/compat
+  if (typeof window.requestIdleCallback === 'function') {
+    // eslint-disable-next-line compat/compat
+    const idleHandle = window.requestIdleCallback(callback, {
+      timeout
+    });
+    return () => cancelIdleCallback(idleHandle);
+  }
+
+  // Fallback to setTimeout if requestIdleCallback is not available
+  const timeoutHandle = setTimeout(callback, timeout);
+  return () => clearTimeout(timeoutHandle);
+}

package/dist/esm/components/animation.js

@@ -1,8 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 React from 'react';
 import { Transition } from 'react-transition-group';
+import { fg } from '@atlaskit/platform-feature-flags';
 var duration = {
   enter: 0,
   exit: 100
@@ -18,13 +20,16 @@ export var Fade = function Fade(_ref) {
   var hasEntered = _ref.hasEntered,
     children = _ref.children,
     onExited = _ref.onExited;
-  return /*#__PURE__*/React.createElement(Transition, {
+  var nodeRef = React.useRef(null);
+  return /*#__PURE__*/React.createElement(Transition, _extends({
     in: hasEntered,
     timeout: duration,
     onExited: onExited,
     unmountOnExit: true,
     appear: true
-  }, function (status) {
+  }, fg('platform-design-system-dsp-20687-transition-group') && {
+    nodeRef: nodeRef
+  }), function (status) {
     var base = {
       transition: "opacity ".concat(duration.exit, "ms"),
       opacity: 0

package/dist/esm/components/clone.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { TargetInner, TargetOverlay } from '../styled/target';
+import { useElementObserver } from '../utils/use-element-observer';
 var computedStyleAttributesToClone = ['fontSize', 'fontWeight', 'lineHeight', 'padding', 'color', 'textOverflow'];
 function cloneAndOverrideStyles(node) {
   var shouldCloneChildren = true;
@@ -27,12 +28,21 @@ function cloneAndOverrideStyles(node) {
 var Clone = function Clone(props) {
   var pulse = props.pulse,
     style = props.style,
+    shouldWatch = props.shouldWatch,
     target = props.target,
     targetBgColor = props.targetBgColor,
     targetOnClick = props.targetOnClick,
     targetNode = props.targetNode,
     targetRadius = props.targetRadius,
     testId = props.testId;
+  var contentVersion = useElementObserver(targetNode, {
+    disableWatch: !shouldWatch
+  });
+  var contentHTML = useMemo(function () {
+    return cloneAndOverrideStyles(targetNode).outerHTML;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to update when the content changes
+  [contentVersion, targetNode]);
   return /*#__PURE__*/React.createElement(TargetInner, {
     "data-testid": testId,
     pulse: pulse,
@@ -44,7 +54,7 @@ var Clone = function Clone(props) {
   }, /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML: {
-      __html: cloneAndOverrideStyles(targetNode).outerHTML
+      __html: contentHTML
     }
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,

package/dist/esm/components/modal.js

@@ -9,7 +9,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["text", "key"],
   _excluded2 = ["actions", "children", "heading"];
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * @jsxRuntime classic

package/dist/esm/components/spotlight-dialog.js

@@ -7,7 +7,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
 import FocusLock from 'react-focus-lock';

package/dist/esm/components/spotlight-inner.js

@@ -8,7 +8,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { canUseDOM } from 'exenv';

package/dist/esm/components/spotlight-manager.js

@@ -7,7 +7,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { createContext, PureComponent } from 'react';
 import memoizeOne from 'memoize-one';

package/dist/esm/components/spotlight-transition.js

@@ -5,7 +5,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { createContext } from 'react';
 import noop from '@atlaskit/ds-lib/noop';

package/dist/esm/components/value-changed.js

@@ -3,7 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 // This component was born from the pain of using render props in lifecycle methods.

package/dist/esm/utils/use-element-observer.js

@@ -0,0 +1,123 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * A hook that watches for changes to a node and forces a re-render when it changes.
+ *
+ * @param element The node to watch for changes.
+ * @param opts Options for the hook.
+ * @param [opts.disableWatch=false] Whether to watch for changes or not.
+ * @param [opts.onChange] A callback that is called when the node changes.
+ *
+ * @returns A version number that is incremented when the node changes to force a re-render.
+ *
+ * @internal
+ */
+export function useElementObserver(element) {
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var onChange = opts.onChange,
+    _opts$disableWatch = opts.disableWatch,
+    disableWatch = _opts$disableWatch === void 0 ? false : _opts$disableWatch;
+
+  // This state is used to force a re-render when the target changes
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    targetContentVersion = _useState2[0],
+    setTargetContentVersion = _useState2[1];
+  var mutationObserver = useRef(undefined);
+  var cancelIdleCallback = useRef(undefined);
+  var disposer = useCallback(function () {
+    var _cancelIdleCallback$c, _mutationObserver$cur;
+    (_cancelIdleCallback$c = cancelIdleCallback.current) === null || _cancelIdleCallback$c === void 0 || _cancelIdleCallback$c.call(cancelIdleCallback);
+    cancelIdleCallback.current = undefined;
+    (_mutationObserver$cur = mutationObserver.current) === null || _mutationObserver$cur === void 0 || _mutationObserver$cur.disconnect();
+    mutationObserver.current = undefined;
+  }, []);
+  var onMutation = useCallback(function () {
+    var _cancelIdleCallback$c2;
+    // MutationObserver can make multiple calls to the callback in quick succession so debounce when idle
+    (_cancelIdleCallback$c2 = cancelIdleCallback.current) === null || _cancelIdleCallback$c2 === void 0 || _cancelIdleCallback$c2.call(cancelIdleCallback);
+    cancelIdleCallback.current = callWhenIdle(function () {
+      return setTargetContentVersion(function (v) {
+        var version = v + 1;
+        onChange === null || onChange === void 0 || onChange(version);
+        return version;
+      });
+    });
+  }, [onChange]);
+  useEffect(function () {
+    // Clean up any existing observer in the case that the target node has changed
+    disposer();
+    if (!disableWatch && element) {
+      mutationObserver.current = new MutationObserver(onMutation);
+      mutationObserver.current.observe(element, {
+        attributes: true,
+        childList: true,
+        subtree: true
+      });
+    }
+    return disposer;
+  }, [disableWatch, disposer, element, onMutation]);
+  return targetContentVersion;
+}
+
+/**
+ * A component that watches for changes to a node and forces a re-render when it changes.
+ *
+ * @param props
+ * @param props.element The node to watch for changes.
+ * @param props.children The children to render.
+ * @param [props.disableWatch=false] Whether to watch for changes or not.
+ * @param [props.onChange] A callback that is called when the node changes.
+ *
+ * @component
+ * @internal
+ */
+export function ElementObserver(_ref) {
+  var element = _ref.element,
+    children = _ref.children,
+    onChange = _ref.onChange,
+    disableWatch = _ref.disableWatch;
+  useElementObserver(element, {
+    disableWatch: disableWatch,
+    onChange: onChange
+  });
+  return {
+    children: children
+  };
+}
+
+/**
+ * When the browser is idle call the callback.
+ *
+ * This function will use `requestIdleCallback` if available, otherwise it will fallback to `setTimeout`.
+ *
+ * @param callback The function to call when the browser is idle.
+ * @param [opts] Options for the idle callback.
+ * @param [opts.timeout=100] The maximum time to wait for the browser to be idle.
+ *
+ * @returns A function that can be called to cancel the idle callback.
+ *
+ * @internal
+ */
+function callWhenIdle(callback) {
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _opts$timeout = opts.timeout,
+    timeout = _opts$timeout === void 0 ? 100 : _opts$timeout;
+
+  // eslint-disable-next-line compat/compat
+  if (typeof window.requestIdleCallback === 'function') {
+    // eslint-disable-next-line compat/compat
+    var idleHandle = window.requestIdleCallback(callback, {
+      timeout: timeout
+    });
+    return function () {
+      return cancelIdleCallback(idleHandle);
+    };
+  }
+
+  // Fallback to setTimeout if requestIdleCallback is not available
+  var timeoutHandle = setTimeout(callback, timeout);
+  return function () {
+    return clearTimeout(timeoutHandle);
+  };
+}

package/dist/types/components/clone.d.ts

@@ -1,7 +1,7 @@
 import { type MouseEvent } from 'react';
 export interface CloneProps {
     /**
-     * Whether or not to display a pulse animation around the spotlighted element.
+     * Whether to display a pulse animation around the spotlighted element.
      */
     pulse: boolean;
     /**
@@ -37,6 +37,10 @@ export interface CloneProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Whether to watch for html content changes on the target
+     */
+    shouldWatch?: boolean;
 }
 /**
  * __Clone__

package/dist/types/components/spotlight-inner.d.ts

@@ -15,7 +15,7 @@ export interface SpotlightInnerProps extends SpotlightProps {
      */
     onClosed: () => any;
     /**
-     * Whether or not to display a pulse animation around the spotlighted element.
+     * Whether to display a pulse animation around the spotlighted element.
      *
      * Same as `SpotlightProps` but required instead of optional.
      */

package/dist/types/utils/use-element-observer.d.ts

@@ -0,0 +1,36 @@
+/**
+ * A hook that watches for changes to a node and forces a re-render when it changes.
+ *
+ * @param element The node to watch for changes.
+ * @param opts Options for the hook.
+ * @param [opts.disableWatch=false] Whether to watch for changes or not.
+ * @param [opts.onChange] A callback that is called when the node changes.
+ *
+ * @returns A version number that is incremented when the node changes to force a re-render.
+ *
+ * @internal
+ */
+export declare function useElementObserver(element: Node, opts?: {
+    disableWatch?: boolean;
+    onChange?: (version: number) => void;
+}): number;
+/**
+ * A component that watches for changes to a node and forces a re-render when it changes.
+ *
+ * @param props
+ * @param props.element The node to watch for changes.
+ * @param props.children The children to render.
+ * @param [props.disableWatch=false] Whether to watch for changes or not.
+ * @param [props.onChange] A callback that is called when the node changes.
+ *
+ * @component
+ * @internal
+ */
+export declare function ElementObserver({ element, children, onChange, disableWatch, }: {
+    element: HTMLElement;
+    children: any;
+    onChange?: (version: number) => void;
+    disableWatch?: boolean;
+}): {
+    children: any;
+};

package/dist/types-ts4.5/components/clone.d.ts

@@ -1,7 +1,7 @@
 import { type MouseEvent } from 'react';
 export interface CloneProps {
     /**
-     * Whether or not to display a pulse animation around the spotlighted element.
+     * Whether to display a pulse animation around the spotlighted element.
      */
     pulse: boolean;
     /**
@@ -37,6 +37,10 @@ export interface CloneProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Whether to watch for html content changes on the target
+     */
+    shouldWatch?: boolean;
 }
 /**
  * __Clone__

package/dist/types-ts4.5/components/spotlight-inner.d.ts

@@ -15,7 +15,7 @@ export interface SpotlightInnerProps extends SpotlightProps {
      */
     onClosed: () => any;
     /**
-     * Whether or not to display a pulse animation around the spotlighted element.
+     * Whether to display a pulse animation around the spotlighted element.
      *
      * Same as `SpotlightProps` but required instead of optional.
      */

package/dist/types-ts4.5/utils/use-element-observer.d.ts

@@ -0,0 +1,36 @@
+/**
+ * A hook that watches for changes to a node and forces a re-render when it changes.
+ *
+ * @param element The node to watch for changes.
+ * @param opts Options for the hook.
+ * @param [opts.disableWatch=false] Whether to watch for changes or not.
+ * @param [opts.onChange] A callback that is called when the node changes.
+ *
+ * @returns A version number that is incremented when the node changes to force a re-render.
+ *
+ * @internal
+ */
+export declare function useElementObserver(element: Node, opts?: {
+    disableWatch?: boolean;
+    onChange?: (version: number) => void;
+}): number;
+/**
+ * A component that watches for changes to a node and forces a re-render when it changes.
+ *
+ * @param props
+ * @param props.element The node to watch for changes.
+ * @param props.children The children to render.
+ * @param [props.disableWatch=false] Whether to watch for changes or not.
+ * @param [props.onChange] A callback that is called when the node changes.
+ *
+ * @component
+ * @internal
+ */
+export declare function ElementObserver({ element, children, onChange, disableWatch, }: {
+    element: HTMLElement;
+    children: any;
+    onChange?: (version: number) => void;
+    disableWatch?: boolean;
+}): {
+    children: any;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "11.13.0",
+	"version": "11.15.0",
 	"description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,10 +29,6 @@
 	"homepage": "https://atlassian.design/components/onboarding/",
 	"atlassian": {
 		"team": "Design System Team",
-		"releaseModel": "continuous",
-		"productPushConsumption": [
-			"jira"
-		],
 		"website": {
 			"name": "Onboarding (spotlight)",
 			"category": "Components"
@@ -41,16 +37,16 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/ds-lib": "^2.5.0",
+		"@atlaskit/ds-lib": "^2.6.0",
 		"@atlaskit/heading": "^2.4.0",
-		"@atlaskit/modal-dialog": "^12.15.0",
+		"@atlaskit/modal-dialog": "^12.16.0",
 		"@atlaskit/motion": "^1.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/popper": "^6.2.0",
+		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/portal": "^4.9.0",
-		"@atlaskit/primitives": "^12.0.0",
+		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.59.0",
+		"@atlaskit/tokens": "^1.61.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -91,6 +87,9 @@
 		},
 		"platform-design-system-dsp-20262-spotlight-target": {
 			"type": "boolean"
+		},
+		"platform-design-system-dsp-20687-transition-group": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {