@atlaskit/onboarding 11.12.3 → 11.14.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/onboarding
 
+## 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
+
+- [#135285](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/135285)
+  [`5129525d797c8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5129525d797c8) -
+  DSP-20262 react-node-resolver removal behind ff
+
 ## 11.12.3
 
 ### Patch 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/node-resolver-spotlight-inner.js

@@ -0,0 +1,44 @@
+"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 = _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; }
+/**
+ * A wrapper component that conditionally applies a NodeResolver to its children.
+ *
+ * Note: NodeResolver should not be used in React 18 concurrent mode. This component
+ * is intended to be removed once the feature flag  is removed.
+ * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
+ * @param {ReactElement} props.children - The child elements to be wrapped.
+ * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
+ * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
+ */
+var NodeResolverSpotlightInner = function NodeResolverSpotlightInner(_ref) {
+  var hasNodeResolver = _ref.hasNodeResolver,
+    children = _ref.children,
+    innerRef = _ref.innerRef;
+  var divRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!hasNodeResolver) {
+      var _divRef$current;
+      innerRef((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.firstElementChild);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasNodeResolver]);
+  if (hasNodeResolver) {
+    return /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
+      innerRef: innerRef
+    }, children);
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: divRef
+  }, children);
+};
+var _default = exports.default = NodeResolverSpotlightInner;

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

@@ -0,0 +1,48 @@
+"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 = _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; }
+/**
+ * A wrapper component that conditionally applies a NodeResolver to its children.
+ *
+ * Note: NodeResolver should not be used in React 18 concurrent mode. This component
+ * is intended to be removed once the feature flag  is removed.
+ * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
+ * @param {ReactElement} props.children - The child elements to be wrapped.
+ * @param {string} props.name - The name to reference from Spotlight.
+ * @param {ReactElement} props.targetRef - Setting up Target Node in Spotlight Manager.
+ * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
+ */
+var NodeResolverSpotlightTarget = function NodeResolverSpotlightTarget(_ref) {
+  var hasNodeResolver = _ref.hasNodeResolver,
+    children = _ref.children,
+    targetRef = _ref.targetRef,
+    name = _ref.name;
+  var divRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!hasNodeResolver) {
+      var _divRef$current;
+      targetRef(name)((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.firstElementChild);
+    }
+    return function () {
+      !hasNodeResolver && targetRef(name)(undefined);
+    };
+  }, [hasNodeResolver, name, targetRef]);
+  if (hasNodeResolver) {
+    return /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
+      innerRef: targetRef(name)
+    }, children);
+  }
+  return /*#__PURE__*/_react.default.createElement("span", {
+    ref: divRef
+  }, children);
+};
+var _default = exports.default = NodeResolverSpotlightTarget;

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

@@ -15,14 +15,15 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _exenv = require("exenv");
-var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
 var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
 var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
 var _useElementBox = require("../utils/use-element-box");
 var _animation = require("./animation");
 var _clone = _interopRequireDefault(require("./clone"));
+var _nodeResolverSpotlightInner = _interopRequireDefault(require("./node-resolver-spotlight-inner"));
 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; }
@@ -106,7 +107,8 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
           onExited = _ref.onExited;
         return /*#__PURE__*/_react.default.createElement(_portal.default, {
           zIndex: _constants.layers.spotlight() + 1
-        }, TargetReplacement ? /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
+        }, TargetReplacement ? /*#__PURE__*/_react.default.createElement(_nodeResolverSpotlightInner.default, {
+          hasNodeResolver: !(0, _platformFeatureFlags.fg)('platform-design-system-dsp-20262-spotlight-inner'),
           innerRef: function innerRef(elem) {
             return _this2.setState({
               replacementElement: elem

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

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _nodeResolverSpotlightTarget = _interopRequireDefault(require("./node-resolver-spotlight-target"));
 var _spotlightManager = require("./spotlight-manager");
 /**
  * __Spotlight target__
@@ -21,8 +22,10 @@ var SpotlightTarget = function SpotlightTarget(_ref) {
   var children = _ref.children,
     name = _ref.name;
   return /*#__PURE__*/_react.default.createElement(_spotlightManager.TargetConsumer, null, function (targetRef) {
-    return targetRef ? /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
-      innerRef: targetRef(name)
+    return targetRef ? /*#__PURE__*/_react.default.createElement(_nodeResolverSpotlightTarget.default, {
+      name: name,
+      hasNodeResolver: !(0, _platformFeatureFlags.fg)('platform-design-system-dsp-20262-spotlight-target'),
+      targetRef: targetRef
     }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children)) : children;
   });
 };

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/node-resolver-spotlight-inner.js

@@ -0,0 +1,35 @@
+import React, { useEffect, useRef } from 'react';
+import NodeResolver from 'react-node-resolver';
+/**
+ * A wrapper component that conditionally applies a NodeResolver to its children.
+ *
+ * Note: NodeResolver should not be used in React 18 concurrent mode. This component
+ * is intended to be removed once the feature flag  is removed.
+ * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
+ * @param {ReactElement} props.children - The child elements to be wrapped.
+ * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
+ * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
+ */
+const NodeResolverSpotlightInner = ({
+  hasNodeResolver,
+  children,
+  innerRef
+}) => {
+  const divRef = useRef(null);
+  useEffect(() => {
+    if (!hasNodeResolver) {
+      var _divRef$current;
+      innerRef((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.firstElementChild);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasNodeResolver]);
+  if (hasNodeResolver) {
+    return /*#__PURE__*/React.createElement(NodeResolver, {
+      innerRef: innerRef
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: divRef
+  }, children);
+};
+export default NodeResolverSpotlightInner;

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

@@ -0,0 +1,39 @@
+import React, { useEffect, useRef } from 'react';
+import NodeResolver from 'react-node-resolver';
+/**
+ * A wrapper component that conditionally applies a NodeResolver to its children.
+ *
+ * Note: NodeResolver should not be used in React 18 concurrent mode. This component
+ * is intended to be removed once the feature flag  is removed.
+ * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
+ * @param {ReactElement} props.children - The child elements to be wrapped.
+ * @param {string} props.name - The name to reference from Spotlight.
+ * @param {ReactElement} props.targetRef - Setting up Target Node in Spotlight Manager.
+ * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
+ */
+const NodeResolverSpotlightTarget = ({
+  hasNodeResolver,
+  children,
+  targetRef,
+  name
+}) => {
+  const divRef = useRef(null);
+  useEffect(() => {
+    if (!hasNodeResolver) {
+      var _divRef$current;
+      targetRef(name)((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.firstElementChild);
+    }
+    return () => {
+      !hasNodeResolver && targetRef(name)(undefined);
+    };
+  }, [hasNodeResolver, name, targetRef]);
+  if (hasNodeResolver) {
+    return /*#__PURE__*/React.createElement(NodeResolver, {
+      innerRef: targetRef(name)
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    ref: divRef
+  }, children);
+};
+export default NodeResolverSpotlightTarget;

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

@@ -2,14 +2,15 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { canUseDOM } from 'exenv';
-import NodeResovler from 'react-node-resolver';
 import ScrollLock from 'react-scrolllock';
 import scrollIntoView from 'scroll-into-view-if-needed';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import { ElementBox } from '../utils/use-element-box';
 import { Fade } from './animation';
 import Clone from './clone';
+import NodeResolverSpotlightInner from './node-resolver-spotlight-inner';
 import SpotlightDialog from './spotlight-dialog';
 import { SpotlightTransitionConsumer } from './spotlight-transition';
 /**
@@ -76,7 +77,8 @@ class SpotlightInner extends React.Component {
       onExited
     }) => /*#__PURE__*/React.createElement(Portal, {
       zIndex: layers.spotlight() + 1
-    }, TargetReplacement ? /*#__PURE__*/React.createElement(NodeResovler, {
+    }, TargetReplacement ? /*#__PURE__*/React.createElement(NodeResolverSpotlightInner, {
+      hasNodeResolver: !fg('platform-design-system-dsp-20262-spotlight-inner'),
       innerRef: elem => this.setState({
         replacementElement: elem
       })

package/dist/es2019/components/spotlight-target.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import NodeResolver from 'react-node-resolver';
+import { fg } from '@atlaskit/platform-feature-flags';
+import NodeResolverSpotlightTarget from './node-resolver-spotlight-target';
 import { TargetConsumer } from './spotlight-manager';
 /**
  * __Spotlight target__
@@ -13,7 +14,9 @@ import { TargetConsumer } from './spotlight-manager';
 const SpotlightTarget = ({
   children,
   name
-}) => /*#__PURE__*/React.createElement(TargetConsumer, null, targetRef => targetRef ? /*#__PURE__*/React.createElement(NodeResolver, {
-  innerRef: targetRef(name)
+}) => /*#__PURE__*/React.createElement(TargetConsumer, null, targetRef => targetRef ? /*#__PURE__*/React.createElement(NodeResolverSpotlightTarget, {
+  name: name,
+  hasNodeResolver: !fg('platform-design-system-dsp-20262-spotlight-target'),
+  targetRef: targetRef
 }, /*#__PURE__*/React.createElement(React.Fragment, null, children)) : children);
 export default SpotlightTarget;

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/node-resolver-spotlight-inner.js

@@ -0,0 +1,34 @@
+import React, { useEffect, useRef } from 'react';
+import NodeResolver from 'react-node-resolver';
+/**
+ * A wrapper component that conditionally applies a NodeResolver to its children.
+ *
+ * Note: NodeResolver should not be used in React 18 concurrent mode. This component
+ * is intended to be removed once the feature flag  is removed.
+ * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
+ * @param {ReactElement} props.children - The child elements to be wrapped.
+ * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
+ * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
+ */
+var NodeResolverSpotlightInner = function NodeResolverSpotlightInner(_ref) {
+  var hasNodeResolver = _ref.hasNodeResolver,
+    children = _ref.children,
+    innerRef = _ref.innerRef;
+  var divRef = useRef(null);
+  useEffect(function () {
+    if (!hasNodeResolver) {
+      var _divRef$current;
+      innerRef((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.firstElementChild);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasNodeResolver]);
+  if (hasNodeResolver) {
+    return /*#__PURE__*/React.createElement(NodeResolver, {
+      innerRef: innerRef
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    ref: divRef
+  }, children);
+};
+export default NodeResolverSpotlightInner;

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

@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from 'react';
+import NodeResolver from 'react-node-resolver';
+/**
+ * A wrapper component that conditionally applies a NodeResolver to its children.
+ *
+ * Note: NodeResolver should not be used in React 18 concurrent mode. This component
+ * is intended to be removed once the feature flag  is removed.
+ * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
+ * @param {ReactElement} props.children - The child elements to be wrapped.
+ * @param {string} props.name - The name to reference from Spotlight.
+ * @param {ReactElement} props.targetRef - Setting up Target Node in Spotlight Manager.
+ * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
+ */
+var NodeResolverSpotlightTarget = function NodeResolverSpotlightTarget(_ref) {
+  var hasNodeResolver = _ref.hasNodeResolver,
+    children = _ref.children,
+    targetRef = _ref.targetRef,
+    name = _ref.name;
+  var divRef = useRef(null);
+  useEffect(function () {
+    if (!hasNodeResolver) {
+      var _divRef$current;
+      targetRef(name)((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.firstElementChild);
+    }
+    return function () {
+      !hasNodeResolver && targetRef(name)(undefined);
+    };
+  }, [hasNodeResolver, name, targetRef]);
+  if (hasNodeResolver) {
+    return /*#__PURE__*/React.createElement(NodeResolver, {
+      innerRef: targetRef(name)
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    ref: divRef
+  }, children);
+};
+export default NodeResolverSpotlightTarget;

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

@@ -12,14 +12,15 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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';
-import NodeResovler from 'react-node-resolver';
 import ScrollLock from 'react-scrolllock';
 import scrollIntoView from 'scroll-into-view-if-needed';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import { ElementBox } from '../utils/use-element-box';
 import { Fade } from './animation';
 import Clone from './clone';
+import NodeResolverSpotlightInner from './node-resolver-spotlight-inner';
 import SpotlightDialog from './spotlight-dialog';
 import { SpotlightTransitionConsumer } from './spotlight-transition';
 /**
@@ -99,7 +100,8 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
           onExited = _ref.onExited;
         return /*#__PURE__*/React.createElement(Portal, {
           zIndex: layers.spotlight() + 1
-        }, TargetReplacement ? /*#__PURE__*/React.createElement(NodeResovler, {
+        }, TargetReplacement ? /*#__PURE__*/React.createElement(NodeResolverSpotlightInner, {
+          hasNodeResolver: !fg('platform-design-system-dsp-20262-spotlight-inner'),
           innerRef: function innerRef(elem) {
             return _this2.setState({
               replacementElement: elem

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import NodeResolver from 'react-node-resolver';
+import { fg } from '@atlaskit/platform-feature-flags';
+import NodeResolverSpotlightTarget from './node-resolver-spotlight-target';
 import { TargetConsumer } from './spotlight-manager';
 /**
  * __Spotlight target__
@@ -14,8 +15,10 @@ var SpotlightTarget = function SpotlightTarget(_ref) {
   var children = _ref.children,
     name = _ref.name;
   return /*#__PURE__*/React.createElement(TargetConsumer, null, function (targetRef) {
-    return targetRef ? /*#__PURE__*/React.createElement(NodeResolver, {
-      innerRef: targetRef(name)
+    return targetRef ? /*#__PURE__*/React.createElement(NodeResolverSpotlightTarget, {
+      name: name,
+      hasNodeResolver: !fg('platform-design-system-dsp-20262-spotlight-target'),
+      targetRef: targetRef
     }, /*#__PURE__*/React.createElement(React.Fragment, null, children)) : children;
   });
 };

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

@@ -0,0 +1,18 @@
+import { type ReactElement } from 'react';
+interface NodeResolverSpotlightInnerProps {
+    hasNodeResolver: boolean;
+    innerRef: (element: HTMLElement | null) => void;
+    children: ReactElement;
+}
+/**
+ * A wrapper component that conditionally applies a NodeResolver to its children.
+ *
+ * Note: NodeResolver should not be used in React 18 concurrent mode. This component
+ * is intended to be removed once the feature flag  is removed.
+ * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
+ * @param {ReactElement} props.children - The child elements to be wrapped.
+ * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
+ * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
+ */
+declare const NodeResolverSpotlightInner: ({ hasNodeResolver, children, innerRef, }: NodeResolverSpotlightInnerProps) => JSX.Element;
+export default NodeResolverSpotlightInner;

package/dist/types/components/node-resolver-spotlight-target.d.ts

@@ -0,0 +1,20 @@
+import { type ReactElement } from 'react';
+interface NodeResolverSpotlightTargetProps {
+    hasNodeResolver: boolean;
+    children: ReactElement;
+    targetRef: (name: string) => (element: Element | null | undefined) => void;
+    name: string;
+}
+/**
+ * A wrapper component that conditionally applies a NodeResolver to its children.
+ *
+ * Note: NodeResolver should not be used in React 18 concurrent mode. This component
+ * is intended to be removed once the feature flag  is removed.
+ * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
+ * @param {ReactElement} props.children - The child elements to be wrapped.
+ * @param {string} props.name - The name to reference from Spotlight.
+ * @param {ReactElement} props.targetRef - Setting up Target Node in Spotlight Manager.
+ * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
+ */
+declare const NodeResolverSpotlightTarget: ({ hasNodeResolver, children, targetRef, name, }: NodeResolverSpotlightTargetProps) => JSX.Element;
+export default NodeResolverSpotlightTarget;

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

@@ -0,0 +1,18 @@
+import { type ReactElement } from 'react';
+interface NodeResolverSpotlightInnerProps {
+    hasNodeResolver: boolean;
+    innerRef: (element: HTMLElement | null) => void;
+    children: ReactElement;
+}
+/**
+ * A wrapper component that conditionally applies a NodeResolver to its children.
+ *
+ * Note: NodeResolver should not be used in React 18 concurrent mode. This component
+ * is intended to be removed once the feature flag  is removed.
+ * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
+ * @param {ReactElement} props.children - The child elements to be wrapped.
+ * @param {(instance: HTMLDivElement) => void} props.innerRef - A ref callback to get the instance of the HTMLDivElement.
+ * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
+ */
+declare const NodeResolverSpotlightInner: ({ hasNodeResolver, children, innerRef, }: NodeResolverSpotlightInnerProps) => JSX.Element;
+export default NodeResolverSpotlightInner;

package/dist/types-ts4.5/components/node-resolver-spotlight-target.d.ts

@@ -0,0 +1,20 @@
+import { type ReactElement } from 'react';
+interface NodeResolverSpotlightTargetProps {
+    hasNodeResolver: boolean;
+    children: ReactElement;
+    targetRef: (name: string) => (element: Element | null | undefined) => void;
+    name: string;
+}
+/**
+ * A wrapper component that conditionally applies a NodeResolver to its children.
+ *
+ * Note: NodeResolver should not be used in React 18 concurrent mode. This component
+ * is intended to be removed once the feature flag  is removed.
+ * @param {boolean} props.hasNodeResolver - Determines whether to apply the NodeResolver.
+ * @param {ReactElement} props.children - The child elements to be wrapped.
+ * @param {string} props.name - The name to reference from Spotlight.
+ * @param {ReactElement} props.targetRef - Setting up Target Node in Spotlight Manager.
+ * @returns {ReactElement} The children wrapped with NodeResolver if hasNodeResolver is true, wrape the children in a div setting innerRef with ref to the div.
+ */
+declare const NodeResolverSpotlightTarget: ({ hasNodeResolver, children, targetRef, name, }: NodeResolverSpotlightTargetProps) => JSX.Element;
+export default NodeResolverSpotlightTarget;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "11.12.3",
+	"version": "11.14.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"
@@ -46,9 +42,9 @@
 		"@atlaskit/modal-dialog": "^12.15.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.1.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^1.59.0",
 		"@babel/runtime": "^7.0.0",
@@ -85,6 +81,15 @@
 	"platform-feature-flags": {
 		"platform.design-system.refresh-spotlight-on-interval": {
 			"type": "boolean"
+		},
+		"platform-design-system-dsp-20262-spotlight-inner": {
+			"type": "boolean"
+		},
+		"platform-design-system-dsp-20262-spotlight-target": {
+			"type": "boolean"
+		},
+		"platform-design-system-dsp-20687-transition-group": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {