@atlaskit/onboarding 14.1.0 → 14.2.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/onboarding
 
+## 14.2.0
+
+### Minor Changes
+
+- [#161229](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/161229)
+  [`37873d53dbc22`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/37873d53dbc22) -
+  Adds `platform_dst_onboarding_react_transition_group` feature gate. When enabled
+  `@atlaskit/motion` will be used for transitions instead of `react-transition-group`.
+
+### Patch Changes
+
+- [#155802](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/155802)
+  [`08019848e3eab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/08019848e3eab) -
+  Refreshed "issue" terminology.
+- Updated dependencies
+
+## 14.1.1
+
+### Patch Changes
+
+- [#153897](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/153897)
+  [`86e45dd6e3502`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/86e45dd6e3502) -
+  Export SpotlightCard prop types
+
 ## 14.1.0
 
 ### Minor Changes

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

@@ -45,6 +45,7 @@ var containerStyles = {
 var containerShadowStyles = {
   root: "_16qszucj"
 };
+
 /**
  * __Spotlight card__
  *

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

@@ -18,6 +18,7 @@ var _exenv = require("exenv");
 var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
 var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
 var _layering = require("@atlaskit/layering");
+var _motion = require("@atlaskit/motion");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _useElementBox = require("../utils/use-element-box");
@@ -99,24 +100,56 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
     value: function componentWillUnmount() {
       this.props.onClosed();
     }
+  }, {
+    key: "renderSpotlightDialog",
+    value:
+    /**
+     * Only exists to avoid duplication with the `platform_dst_onboarding_react_transition_group` flag.
+     *
+     * TODO: Make this inline in `render` when cleaning up `platform_dst_onboarding_react_transition_group`.
+     */
+    function renderSpotlightDialog(_ref) {
+      var animationStyles = _ref.animationStyles;
+      var _this$props = this.props,
+        targetNode = _this$props.targetNode,
+        testId = _this$props.testId;
+      var replacementElement = this.state.replacementElement;
+      return /*#__PURE__*/_react.default.createElement(_spotlightDialog.default, {
+        testId: "".concat(testId, "--dialog"),
+        actions: this.props.actions,
+        actionsBeforeElement: this.props.actionsBeforeElement,
+        children: this.props.children,
+        dialogPlacement: this.props.dialogPlacement,
+        dialogWidth: this.props.dialogWidth,
+        footer: this.props.footer,
+        header: this.props.header,
+        heading: this.props.heading,
+        titleId: this.props.titleId,
+        label: this.props.label,
+        headingAfterElement: this.props.headingAfterElement,
+        image: this.props.image,
+        targetNode: replacementElement || targetNode,
+        animationStyles: animationStyles
+      });
+    }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props = this.props,
-        pulse = _this$props.pulse,
-        shouldWatchTarget = _this$props.shouldWatchTarget,
-        target = _this$props.target,
-        targetNode = _this$props.targetNode,
-        targetBgColor = _this$props.targetBgColor,
-        targetOnClick = _this$props.targetOnClick,
-        targetRadius = _this$props.targetRadius,
-        testId = _this$props.testId,
-        TargetReplacement = _this$props.targetReplacement;
+      var _this$props2 = this.props,
+        pulse = _this$props2.pulse,
+        shouldWatchTarget = _this$props2.shouldWatchTarget,
+        target = _this$props2.target,
+        targetNode = _this$props2.targetNode,
+        targetBgColor = _this$props2.targetBgColor,
+        targetOnClick = _this$props2.targetOnClick,
+        targetRadius = _this$props2.targetRadius,
+        testId = _this$props2.testId,
+        TargetReplacement = _this$props2.targetReplacement;
       var replacementElement = this.state.replacementElement;
-      return /*#__PURE__*/_react.default.createElement(_spotlightTransition.SpotlightTransitionConsumer, null, function (_ref) {
-        var isOpen = _ref.isOpen,
-          onExited = _ref.onExited;
+      return /*#__PURE__*/_react.default.createElement(_spotlightTransition.SpotlightTransitionConsumer, null, function (_ref2) {
+        var isOpen = _ref2.isOpen,
+          onExited = _ref2.onExited;
         return /*#__PURE__*/_react.default.createElement(_portal.default, {
           zIndex: 701
         }, TargetReplacement ? /*#__PURE__*/_react.default.createElement(_nodeResolverSpotlightInner.default, {
@@ -150,30 +183,38 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
             targetOnClick: targetOnClick,
             targetRadius: targetRadius
           });
-        }), TargetReplacement && !replacementElement ? null : /*#__PURE__*/_react.default.createElement(_animation.Fade, {
+        }), TargetReplacement && !replacementElement ? null : /*#__PURE__*/_react.default.createElement(_layering.Layering, {
+          isDisabled: false
+        }, (0, _platformFeatureFlags.fg)('platform_dst_onboarding_react_transition_group') ? /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, {
+          appear: true
+        }, isOpen && /*#__PURE__*/_react.default.createElement(_motion.FadeIn, {
+          onFinish: function onFinish(state) {
+            state === 'exiting' && onExited();
+          },
+          duration: "medium"
+        }, function (_ref3) {
+          var ref = _ref3.ref,
+            className = _ref3.className,
+            style = _ref3.style;
+          return /*#__PURE__*/_react.default.createElement("div", {
+            ref: ref
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+            ,
+            className: className
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+            ,
+            style: style
+          }, _this2.renderSpotlightDialog({
+            animationStyles: {}
+          }));
+        })) : /*#__PURE__*/_react.default.createElement(_animation.Fade, {
           hasEntered: isOpen,
           onExited: onExited
         }, function (animationStyles) {
-          return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
-            isDisabled: false
-          }, /*#__PURE__*/_react.default.createElement(_spotlightDialog.default, {
-            testId: "".concat(testId, "--dialog"),
-            actions: _this2.props.actions,
-            actionsBeforeElement: _this2.props.actionsBeforeElement,
-            children: _this2.props.children,
-            dialogPlacement: _this2.props.dialogPlacement,
-            dialogWidth: _this2.props.dialogWidth,
-            footer: _this2.props.footer,
-            header: _this2.props.header,
-            heading: _this2.props.heading,
-            titleId: _this2.props.titleId,
-            label: _this2.props.label,
-            headingAfterElement: _this2.props.headingAfterElement,
-            image: _this2.props.image,
-            targetNode: replacementElement || targetNode,
+          return _this2.renderSpotlightDialog({
             animationStyles: animationStyles
-          }));
-        }), /*#__PURE__*/_react.default.createElement(_reactScrolllock.default, null));
+          });
+        })), /*#__PURE__*/_react.default.createElement(_reactScrolllock.default, null));
       });
     }
   }]);

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

@@ -15,6 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _motion = require("@atlaskit/motion");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _blanket = _interopRequireDefault(require("../styled/blanket"));
@@ -130,14 +131,33 @@ var SpotlightManager = exports.default = /*#__PURE__*/function (_PureComponent)
         children = _this$props.children,
         Tag = _this$props.component,
         onBlanketClicked = _this$props.onBlanketClicked;
+      var isActive = this.state.spotlightCount > 0;
       return /*#__PURE__*/_react.default.createElement(SpotlightStateProvider, {
         value: this.getStateProviderValue(this.state.targets)
       }, /*#__PURE__*/_react.default.createElement(TargetProvider, {
         value: this.getTargetRef
       }, /*#__PURE__*/_react.default.createElement(Container, {
         component: Tag || _react.default.Fragment
-      }, /*#__PURE__*/_react.default.createElement(_animation.Fade, {
-        hasEntered: this.state.spotlightCount > 0
+      }, (0, _platformFeatureFlags.fg)('platform_dst_onboarding_react_transition_group') ? /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, null, isActive && /*#__PURE__*/_react.default.createElement(_motion.FadeIn, {
+        duration: "medium"
+      }, function (_ref2) {
+        var ref = _ref2.ref,
+          className = _ref2.className,
+          style = _ref2.style;
+        return /*#__PURE__*/_react.default.createElement(_portal.default, {
+          zIndex: 700
+        }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
+          ref: ref
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+          ,
+          className: className
+          /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */,
+          style: style,
+          isTinted: blanketIsTinted,
+          onBlanketClicked: onBlanketClicked
+        }));
+      })) : /*#__PURE__*/_react.default.createElement(_animation.Fade, {
+        hasEntered: isActive
       }, function (animationStyles) {
         return /*#__PURE__*/_react.default.createElement(_portal.default, {
           zIndex: 700

package/dist/cjs/styled/blanket.js

@@ -8,7 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("./blanket.compiled.css");
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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); }
@@ -29,17 +30,21 @@ var blanketStyles = null;
  *
  * @internal
  */
-var Blanket = function Blanket(_ref) {
+var Blanket = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var isTinted = _ref.isTinted,
     onBlanketClicked = _ref.onBlanketClicked,
-    style = _ref.style;
+    style = _ref.style,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    role: "presentation",
+    ref: ref,
+    role: "presentation"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: (0, _runtime.ax)(["_1r04idpf _v56414ka _kqsw1n9t _1pby1fw0", className]),
     style: _objectSpread(_objectSpread({}, style), {}, {
       backgroundColor: isTinted ? "var(--ds-blanket, #091E427D)" : 'transparent'
     }),
-    onClick: onBlanketClicked,
-    className: (0, _runtime.ax)(["_1r04idpf _v56414ka _kqsw1n9t _1pby1fw0"])
+    onClick: onBlanketClicked
   });
-};
+});
 var _default = exports.default = Blanket;

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

@@ -31,6 +31,7 @@ const containerStyles = {
 const containerShadowStyles = {
   root: "_16qszucj"
 };
+
 /**
  * __Spotlight card__
  *

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

@@ -5,6 +5,7 @@ import { canUseDOM } from 'exenv';
 import ScrollLock from 'react-scrolllock';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { Layering } from '@atlaskit/layering';
+import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { ElementBox } from '../utils/use-element-box';
@@ -75,6 +76,39 @@ class SpotlightInner extends React.Component {
   componentWillUnmount() {
     this.props.onClosed();
   }
+  /**
+   * Only exists to avoid duplication with the `platform_dst_onboarding_react_transition_group` flag.
+   *
+   * TODO: Make this inline in `render` when cleaning up `platform_dst_onboarding_react_transition_group`.
+   */
+  renderSpotlightDialog({
+    animationStyles
+  }) {
+    const {
+      targetNode,
+      testId
+    } = this.props;
+    const {
+      replacementElement
+    } = this.state;
+    return /*#__PURE__*/React.createElement(SpotlightDialog, {
+      testId: `${testId}--dialog`,
+      actions: this.props.actions,
+      actionsBeforeElement: this.props.actionsBeforeElement,
+      children: this.props.children,
+      dialogPlacement: this.props.dialogPlacement,
+      dialogWidth: this.props.dialogWidth,
+      footer: this.props.footer,
+      header: this.props.header,
+      heading: this.props.heading,
+      titleId: this.props.titleId,
+      label: this.props.label,
+      headingAfterElement: this.props.headingAfterElement,
+      image: this.props.image,
+      targetNode: replacementElement || targetNode,
+      animationStyles: animationStyles
+    });
+  }
   render() {
     const {
       pulse,
@@ -120,27 +154,34 @@ class SpotlightInner extends React.Component {
       targetNode: targetNode,
       targetOnClick: targetOnClick,
       targetRadius: targetRadius
-    })), TargetReplacement && !replacementElement ? null : /*#__PURE__*/React.createElement(Fade, {
+    })), TargetReplacement && !replacementElement ? null : /*#__PURE__*/React.createElement(Layering, {
+      isDisabled: false
+    }, fg('platform_dst_onboarding_react_transition_group') ? /*#__PURE__*/React.createElement(ExitingPersistence, {
+      appear: true
+    }, isOpen && /*#__PURE__*/React.createElement(FadeIn, {
+      onFinish: state => {
+        state === 'exiting' && onExited();
+      },
+      duration: "medium"
+    }, ({
+      ref,
+      className,
+      style
+    }) => /*#__PURE__*/React.createElement("div", {
+      ref: ref
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      className: className
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      ,
+      style: style
+    }, this.renderSpotlightDialog({
+      animationStyles: {}
+    })))) : /*#__PURE__*/React.createElement(Fade, {
       hasEntered: isOpen,
       onExited: onExited
-    }, animationStyles => /*#__PURE__*/React.createElement(Layering, {
-      isDisabled: false
-    }, /*#__PURE__*/React.createElement(SpotlightDialog, {
-      testId: `${testId}--dialog`,
-      actions: this.props.actions,
-      actionsBeforeElement: this.props.actionsBeforeElement,
-      children: this.props.children,
-      dialogPlacement: this.props.dialogPlacement,
-      dialogWidth: this.props.dialogWidth,
-      footer: this.props.footer,
-      header: this.props.header,
-      heading: this.props.heading,
-      titleId: this.props.titleId,
-      label: this.props.label,
-      headingAfterElement: this.props.headingAfterElement,
-      image: this.props.image,
-      targetNode: replacementElement || targetNode,
-      animationStyles: animationStyles
+    }, animationStyles => this.renderSpotlightDialog({
+      animationStyles
     }))), /*#__PURE__*/React.createElement(ScrollLock, null)));
   }
 }

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

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { createContext, PureComponent, startTransition } from 'react';
 import memoizeOne from 'memoize-one';
 import noop from '@atlaskit/ds-lib/noop';
+import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import Blanket from '../styled/blanket';
@@ -97,14 +98,32 @@ export default class SpotlightManager extends PureComponent {
       component: Tag,
       onBlanketClicked
     } = this.props;
+    const isActive = this.state.spotlightCount > 0;
     return /*#__PURE__*/React.createElement(SpotlightStateProvider, {
       value: this.getStateProviderValue(this.state.targets)
     }, /*#__PURE__*/React.createElement(TargetProvider, {
       value: this.getTargetRef
     }, /*#__PURE__*/React.createElement(Container, {
       component: Tag || React.Fragment
-    }, /*#__PURE__*/React.createElement(Fade, {
-      hasEntered: this.state.spotlightCount > 0
+    }, fg('platform_dst_onboarding_react_transition_group') ? /*#__PURE__*/React.createElement(ExitingPersistence, null, isActive && /*#__PURE__*/React.createElement(FadeIn, {
+      duration: "medium"
+    }, ({
+      ref,
+      className,
+      style
+    }) => /*#__PURE__*/React.createElement(Portal, {
+      zIndex: 700
+    }, /*#__PURE__*/React.createElement(Blanket, {
+      ref: ref
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      className: className
+      /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */,
+      style: style,
+      isTinted: blanketIsTinted,
+      onBlanketClicked: onBlanketClicked
+    })))) : /*#__PURE__*/React.createElement(Fade, {
+      hasEntered: isActive
     }, animationStyles => /*#__PURE__*/React.createElement(Portal, {
       zIndex: 700
     }, /*#__PURE__*/React.createElement(Blanket

package/dist/es2019/styled/blanket.js

@@ -1,9 +1,10 @@
 /* blanket.tsx generated by @compiled/babel-plugin v0.36.1 */
-// IE11 and Edge: z-index needed because fixed position calculates z-index relative
-// to body instead of nearest stacking context (Portal in our case).
 import "./blanket.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+// IE11 and Edge: z-index needed because fixed position calculates z-index relative
+// to body instead of nearest stacking context (Portal in our case).
 const blanketStyles = null;
 /**
  * __Blanket__
@@ -16,20 +17,24 @@ const blanketStyles = null;
  *
  * @internal
  */
-const Blanket = ({
+const Blanket = /*#__PURE__*/forwardRef(({
   isTinted,
   onBlanketClicked,
-  style
-}) => {
+  style,
+  className
+}, ref) => {
   return /*#__PURE__*/React.createElement("div", {
-    role: "presentation",
+    ref: ref,
+    role: "presentation"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_1r04idpf _v56414ka _kqsw1n9t _1pby1fw0", className]),
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Pass-through style props are not allowed
       ...style,
       backgroundColor: isTinted ? "var(--ds-blanket, #091E427D)" : 'transparent'
     },
-    onClick: onBlanketClicked,
-    className: ax(["_1r04idpf _v56414ka _kqsw1n9t _1pby1fw0"])
+    onClick: onBlanketClicked
   });
-};
+});
 export default Blanket;

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

@@ -35,6 +35,7 @@ var containerStyles = {
 var containerShadowStyles = {
   root: "_16qszucj"
 };
+
 /**
  * __Spotlight card__
  *

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

@@ -16,6 +16,7 @@ import { canUseDOM } from 'exenv';
 import ScrollLock from 'react-scrolllock';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { Layering } from '@atlaskit/layering';
+import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { ElementBox } from '../utils/use-element-box';
@@ -92,24 +93,56 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
     value: function componentWillUnmount() {
       this.props.onClosed();
     }
+  }, {
+    key: "renderSpotlightDialog",
+    value:
+    /**
+     * Only exists to avoid duplication with the `platform_dst_onboarding_react_transition_group` flag.
+     *
+     * TODO: Make this inline in `render` when cleaning up `platform_dst_onboarding_react_transition_group`.
+     */
+    function renderSpotlightDialog(_ref) {
+      var animationStyles = _ref.animationStyles;
+      var _this$props = this.props,
+        targetNode = _this$props.targetNode,
+        testId = _this$props.testId;
+      var replacementElement = this.state.replacementElement;
+      return /*#__PURE__*/React.createElement(SpotlightDialog, {
+        testId: "".concat(testId, "--dialog"),
+        actions: this.props.actions,
+        actionsBeforeElement: this.props.actionsBeforeElement,
+        children: this.props.children,
+        dialogPlacement: this.props.dialogPlacement,
+        dialogWidth: this.props.dialogWidth,
+        footer: this.props.footer,
+        header: this.props.header,
+        heading: this.props.heading,
+        titleId: this.props.titleId,
+        label: this.props.label,
+        headingAfterElement: this.props.headingAfterElement,
+        image: this.props.image,
+        targetNode: replacementElement || targetNode,
+        animationStyles: animationStyles
+      });
+    }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props = this.props,
-        pulse = _this$props.pulse,
-        shouldWatchTarget = _this$props.shouldWatchTarget,
-        target = _this$props.target,
-        targetNode = _this$props.targetNode,
-        targetBgColor = _this$props.targetBgColor,
-        targetOnClick = _this$props.targetOnClick,
-        targetRadius = _this$props.targetRadius,
-        testId = _this$props.testId,
-        TargetReplacement = _this$props.targetReplacement;
+      var _this$props2 = this.props,
+        pulse = _this$props2.pulse,
+        shouldWatchTarget = _this$props2.shouldWatchTarget,
+        target = _this$props2.target,
+        targetNode = _this$props2.targetNode,
+        targetBgColor = _this$props2.targetBgColor,
+        targetOnClick = _this$props2.targetOnClick,
+        targetRadius = _this$props2.targetRadius,
+        testId = _this$props2.testId,
+        TargetReplacement = _this$props2.targetReplacement;
       var replacementElement = this.state.replacementElement;
-      return /*#__PURE__*/React.createElement(SpotlightTransitionConsumer, null, function (_ref) {
-        var isOpen = _ref.isOpen,
-          onExited = _ref.onExited;
+      return /*#__PURE__*/React.createElement(SpotlightTransitionConsumer, null, function (_ref2) {
+        var isOpen = _ref2.isOpen,
+          onExited = _ref2.onExited;
         return /*#__PURE__*/React.createElement(Portal, {
           zIndex: 701
         }, TargetReplacement ? /*#__PURE__*/React.createElement(NodeResolverSpotlightInner, {
@@ -143,30 +176,38 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
             targetOnClick: targetOnClick,
             targetRadius: targetRadius
           });
-        }), TargetReplacement && !replacementElement ? null : /*#__PURE__*/React.createElement(Fade, {
+        }), TargetReplacement && !replacementElement ? null : /*#__PURE__*/React.createElement(Layering, {
+          isDisabled: false
+        }, fg('platform_dst_onboarding_react_transition_group') ? /*#__PURE__*/React.createElement(ExitingPersistence, {
+          appear: true
+        }, isOpen && /*#__PURE__*/React.createElement(FadeIn, {
+          onFinish: function onFinish(state) {
+            state === 'exiting' && onExited();
+          },
+          duration: "medium"
+        }, function (_ref3) {
+          var ref = _ref3.ref,
+            className = _ref3.className,
+            style = _ref3.style;
+          return /*#__PURE__*/React.createElement("div", {
+            ref: ref
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+            ,
+            className: className
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+            ,
+            style: style
+          }, _this2.renderSpotlightDialog({
+            animationStyles: {}
+          }));
+        })) : /*#__PURE__*/React.createElement(Fade, {
           hasEntered: isOpen,
           onExited: onExited
         }, function (animationStyles) {
-          return /*#__PURE__*/React.createElement(Layering, {
-            isDisabled: false
-          }, /*#__PURE__*/React.createElement(SpotlightDialog, {
-            testId: "".concat(testId, "--dialog"),
-            actions: _this2.props.actions,
-            actionsBeforeElement: _this2.props.actionsBeforeElement,
-            children: _this2.props.children,
-            dialogPlacement: _this2.props.dialogPlacement,
-            dialogWidth: _this2.props.dialogWidth,
-            footer: _this2.props.footer,
-            header: _this2.props.header,
-            heading: _this2.props.heading,
-            titleId: _this2.props.titleId,
-            label: _this2.props.label,
-            headingAfterElement: _this2.props.headingAfterElement,
-            image: _this2.props.image,
-            targetNode: replacementElement || targetNode,
+          return _this2.renderSpotlightDialog({
             animationStyles: animationStyles
-          }));
-        }), /*#__PURE__*/React.createElement(ScrollLock, null));
+          });
+        })), /*#__PURE__*/React.createElement(ScrollLock, null));
       });
     }
   }]);

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

@@ -11,6 +11,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React, { createContext, PureComponent, startTransition } from 'react';
 import memoizeOne from 'memoize-one';
 import noop from '@atlaskit/ds-lib/noop';
+import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import Blanket from '../styled/blanket';
@@ -122,14 +123,33 @@ var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
         children = _this$props.children,
         Tag = _this$props.component,
         onBlanketClicked = _this$props.onBlanketClicked;
+      var isActive = this.state.spotlightCount > 0;
       return /*#__PURE__*/React.createElement(SpotlightStateProvider, {
         value: this.getStateProviderValue(this.state.targets)
       }, /*#__PURE__*/React.createElement(TargetProvider, {
         value: this.getTargetRef
       }, /*#__PURE__*/React.createElement(Container, {
         component: Tag || React.Fragment
-      }, /*#__PURE__*/React.createElement(Fade, {
-        hasEntered: this.state.spotlightCount > 0
+      }, fg('platform_dst_onboarding_react_transition_group') ? /*#__PURE__*/React.createElement(ExitingPersistence, null, isActive && /*#__PURE__*/React.createElement(FadeIn, {
+        duration: "medium"
+      }, function (_ref2) {
+        var ref = _ref2.ref,
+          className = _ref2.className,
+          style = _ref2.style;
+        return /*#__PURE__*/React.createElement(Portal, {
+          zIndex: 700
+        }, /*#__PURE__*/React.createElement(Blanket, {
+          ref: ref
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+          ,
+          className: className
+          /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */,
+          style: style,
+          isTinted: blanketIsTinted,
+          onBlanketClicked: onBlanketClicked
+        }));
+      })) : /*#__PURE__*/React.createElement(Fade, {
+        hasEntered: isActive
       }, function (animationStyles) {
         return /*#__PURE__*/React.createElement(Portal, {
           zIndex: 700

package/dist/esm/styled/blanket.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 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 { forwardRef } from 'react';
 // IE11 and Edge: z-index needed because fixed position calculates z-index relative
 // to body instead of nearest stacking context (Portal in our case).
 var blanketStyles = null;
@@ -19,17 +20,21 @@ var blanketStyles = null;
  *
  * @internal
  */
-var Blanket = function Blanket(_ref) {
+var Blanket = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isTinted = _ref.isTinted,
     onBlanketClicked = _ref.onBlanketClicked,
-    style = _ref.style;
+    style = _ref.style,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    role: "presentation",
+    ref: ref,
+    role: "presentation"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_1r04idpf _v56414ka _kqsw1n9t _1pby1fw0", className]),
     style: _objectSpread(_objectSpread({}, style), {}, {
       backgroundColor: isTinted ? "var(--ds-blanket, #091E427D)" : 'transparent'
     }),
-    onClick: onBlanketClicked,
-    className: ax(["_1r04idpf _v56414ka _kqsw1n9t _1pby1fw0"])
+    onClick: onBlanketClicked
   });
-};
+});
 export default Blanket;

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

@@ -1,73 +1,5 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ComponentType, type ReactNode, type Ref } from 'react';
-import { type Actions } from '../types';
-interface SpotlightCardProps {
-    /**
-     * Buttons to render in the footer.
-     */
-    actions?: Actions;
-    /**
-     * An optional element rendered to the left of the footer actions.
-     */
-    actionsBeforeElement?: ReactNode;
-    /**
-     * The content of the card.
-     */
-    children?: ReactNode;
-    /**
-     * The container elements rendered by the component.
-     */
-    components?: {
-        Header?: ComponentType<any>;
-        Footer?: ComponentType<any>;
-    };
-    /**
-     * The heading to be rendered above the body content.
-     */
-    heading?: ReactNode;
-    /**
-     * Specifies the heading level in the document structure.
-     * If not specified, level 4 will be applied by default.
-     */
-    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
-    /**
-     * An optional element rendered to the right of the heading, usually used to number steps in a multi-step flow.
-     */
-    headingAfterElement?: ReactNode;
-    /**
-     * The image src to render above the heading.
-     */
-    image?: string | ReactNode;
-    /**
-     * Removes elevation styles if set.
-     */
-    isFlat?: boolean;
-    /**
-     * Specifies the width of the card component. Accepts either a number or the string '100%'.
-     * When a number is provided, the width is set in pixels. When '100%' is provided, the width
-     * is set to occupy 100% of the parent container's width. Regardless of whether `width` is set,
-     * the width is constrained to a minimum width of 160px and a maximum width of 600px.
-     */
-    width?: number | '100%';
-    /**
-     * @deprecated
-     * Use `ref` instead.
-     */
-    innerRef?: Ref<HTMLDivElement> | null;
-    /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-    /**
-     * The ID of heading.
-     */
-    headingId?: string;
-}
+/// <reference types="react" />
+import { type SpotlightCardProps } from '../types';
 /**
  * __Spotlight card__
  *

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

@@ -53,6 +53,14 @@ declare class SpotlightInner extends React.Component<SpotlightInnerProps, State>
     componentDidMount(): void;
     componentWillUnmount(): void;
     getTargetNodeStyle: (box: ElementBoundingBox) => {};
+    /**
+     * Only exists to avoid duplication with the `platform_dst_onboarding_react_transition_group` flag.
+     *
+     * TODO: Make this inline in `render` when cleaning up `platform_dst_onboarding_react_transition_group`.
+     */
+    renderSpotlightDialog({ animationStyles }: {
+        animationStyles: React.CSSProperties;
+    }): React.JSX.Element;
     render(): React.JSX.Element;
 }
 export default SpotlightInner;

package/dist/types/styled/blanket.d.ts

@@ -3,6 +3,7 @@ type BlanketProps = {
     isTinted?: boolean;
     style?: React.CSSProperties;
     onBlanketClicked?: () => void;
+    className?: string;
 };
 /**
  * __Blanket__
@@ -15,5 +16,5 @@ type BlanketProps = {
  *
  * @internal
  */
-declare const Blanket: ({ isTinted, onBlanketClicked, style }: BlanketProps) => JSX.Element;
+declare const Blanket: import("react").ForwardRefExoticComponent<BlanketProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Blanket;

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType, type MouseEvent, type ReactNode } from 'react';
+import { type ComponentType, type MouseEvent, type ReactNode, type Ref } from 'react';
 import { type CustomThemeButtonProps } from '@atlaskit/button/types';
 interface Action extends Omit<CustomThemeButtonProps, 'children'> {
     key?: string;
@@ -106,3 +106,67 @@ export interface SpotlightProps {
      */
     titleId?: string;
 }
+export interface SpotlightCardProps {
+    /**
+     * Buttons to render in the footer.
+     */
+    actions?: Actions;
+    /**
+     * An optional element rendered to the left of the footer actions.
+     */
+    actionsBeforeElement?: ReactNode;
+    /**
+     * The content of the card.
+     */
+    children?: ReactNode;
+    /**
+     * The container elements rendered by the component.
+     */
+    components?: {
+        Header?: ComponentType<any>;
+        Footer?: ComponentType<any>;
+    };
+    /**
+     * The heading to be rendered above the body content.
+     */
+    heading?: ReactNode;
+    /**
+     * Specifies the heading level in the document structure.
+     * If not specified, level 4 will be applied by default.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * An optional element rendered to the right of the heading, usually used to number steps in a multi-step flow.
+     */
+    headingAfterElement?: ReactNode;
+    /**
+     * The image src to render above the heading.
+     */
+    image?: string | ReactNode;
+    /**
+     * Removes elevation styles if set.
+     */
+    isFlat?: boolean;
+    /**
+     * Specifies the width of the card component. Accepts either a number or the string '100%'.
+     * When a number is provided, the width is set in pixels. When '100%' is provided, the width
+     * is set to occupy 100% of the parent container's width. Regardless of whether `width` is set,
+     * the width is constrained to a minimum width of 160px and a maximum width of 600px.
+     */
+    width?: number | '100%';
+    /**
+     * @deprecated
+     * Use `ref` instead.
+     */
+    innerRef?: Ref<HTMLDivElement> | null;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * The ID of heading.
+     */
+    headingId?: string;
+}

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

@@ -1,73 +1,5 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type ComponentType, type ReactNode, type Ref } from 'react';
-import { type Actions } from '../types';
-interface SpotlightCardProps {
-    /**
-     * Buttons to render in the footer.
-     */
-    actions?: Actions;
-    /**
-     * An optional element rendered to the left of the footer actions.
-     */
-    actionsBeforeElement?: ReactNode;
-    /**
-     * The content of the card.
-     */
-    children?: ReactNode;
-    /**
-     * The container elements rendered by the component.
-     */
-    components?: {
-        Header?: ComponentType<any>;
-        Footer?: ComponentType<any>;
-    };
-    /**
-     * The heading to be rendered above the body content.
-     */
-    heading?: ReactNode;
-    /**
-     * Specifies the heading level in the document structure.
-     * If not specified, level 4 will be applied by default.
-     */
-    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
-    /**
-     * An optional element rendered to the right of the heading, usually used to number steps in a multi-step flow.
-     */
-    headingAfterElement?: ReactNode;
-    /**
-     * The image src to render above the heading.
-     */
-    image?: string | ReactNode;
-    /**
-     * Removes elevation styles if set.
-     */
-    isFlat?: boolean;
-    /**
-     * Specifies the width of the card component. Accepts either a number or the string '100%'.
-     * When a number is provided, the width is set in pixels. When '100%' is provided, the width
-     * is set to occupy 100% of the parent container's width. Regardless of whether `width` is set,
-     * the width is constrained to a minimum width of 160px and a maximum width of 600px.
-     */
-    width?: number | '100%';
-    /**
-     * @deprecated
-     * Use `ref` instead.
-     */
-    innerRef?: Ref<HTMLDivElement> | null;
-    /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-    /**
-     * The ID of heading.
-     */
-    headingId?: string;
-}
+/// <reference types="react" />
+import { type SpotlightCardProps } from '../types';
 /**
  * __Spotlight card__
  *

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

@@ -53,6 +53,14 @@ declare class SpotlightInner extends React.Component<SpotlightInnerProps, State>
     componentDidMount(): void;
     componentWillUnmount(): void;
     getTargetNodeStyle: (box: ElementBoundingBox) => {};
+    /**
+     * Only exists to avoid duplication with the `platform_dst_onboarding_react_transition_group` flag.
+     *
+     * TODO: Make this inline in `render` when cleaning up `platform_dst_onboarding_react_transition_group`.
+     */
+    renderSpotlightDialog({ animationStyles }: {
+        animationStyles: React.CSSProperties;
+    }): React.JSX.Element;
     render(): React.JSX.Element;
 }
 export default SpotlightInner;

package/dist/types-ts4.5/styled/blanket.d.ts

@@ -3,6 +3,7 @@ type BlanketProps = {
     isTinted?: boolean;
     style?: React.CSSProperties;
     onBlanketClicked?: () => void;
+    className?: string;
 };
 /**
  * __Blanket__
@@ -15,5 +16,5 @@ type BlanketProps = {
  *
  * @internal
  */
-declare const Blanket: ({ isTinted, onBlanketClicked, style }: BlanketProps) => JSX.Element;
+declare const Blanket: import("react").ForwardRefExoticComponent<BlanketProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Blanket;

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

@@ -1,4 +1,4 @@
-import { type ComponentType, type MouseEvent, type ReactNode } from 'react';
+import { type ComponentType, type MouseEvent, type ReactNode, type Ref } from 'react';
 import { type CustomThemeButtonProps } from '@atlaskit/button/types';
 interface Action extends Omit<CustomThemeButtonProps, 'children'> {
     key?: string;
@@ -106,3 +106,67 @@ export interface SpotlightProps {
      */
     titleId?: string;
 }
+export interface SpotlightCardProps {
+    /**
+     * Buttons to render in the footer.
+     */
+    actions?: Actions;
+    /**
+     * An optional element rendered to the left of the footer actions.
+     */
+    actionsBeforeElement?: ReactNode;
+    /**
+     * The content of the card.
+     */
+    children?: ReactNode;
+    /**
+     * The container elements rendered by the component.
+     */
+    components?: {
+        Header?: ComponentType<any>;
+        Footer?: ComponentType<any>;
+    };
+    /**
+     * The heading to be rendered above the body content.
+     */
+    heading?: ReactNode;
+    /**
+     * Specifies the heading level in the document structure.
+     * If not specified, level 4 will be applied by default.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * An optional element rendered to the right of the heading, usually used to number steps in a multi-step flow.
+     */
+    headingAfterElement?: ReactNode;
+    /**
+     * The image src to render above the heading.
+     */
+    image?: string | ReactNode;
+    /**
+     * Removes elevation styles if set.
+     */
+    isFlat?: boolean;
+    /**
+     * Specifies the width of the card component. Accepts either a number or the string '100%'.
+     * When a number is provided, the width is set in pixels. When '100%' is provided, the width
+     * is set to occupy 100% of the parent container's width. Regardless of whether `width` is set,
+     * the width is constrained to a minimum width of 160px and a maximum width of 600px.
+     */
+    width?: number | '100%';
+    /**
+     * @deprecated
+     * Use `ref` instead.
+     */
+    innerRef?: Ref<HTMLDivElement> | null;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * The ID of heading.
+     */
+    headingId?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "14.1.0",
+	"version": "14.2.0",
 	"description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/button": "^23.0.0",
+		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/heading": "^5.2.0",
@@ -48,8 +48,8 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/portal": "^5.1.0",
-		"@atlaskit/primitives": "^14.7.0",
-		"@atlaskit/tokens": "^4.8.0",
+		"@atlaskit/primitives": "^14.8.0",
+		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
 		"bind-event-listener": "^3.0.0",
@@ -96,6 +96,9 @@
 		},
 		"platform_fix_component_state_update_for_suspense": {
 			"type": "boolean"
+		},
+		"platform_dst_onboarding_react_transition_group": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {