@atlaskit/onboarding 14.2.6 → 14.3.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/onboarding
 
+## 14.3.0
+
+### Minor Changes
+
+- [#187608](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/187608)
+  [`b447e727a9968`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b447e727a9968) -
+  Cleans up the `platform_dst_onboarding_react_transition_group` feature gate. Animations are now
+  done using `@atlaskit/motion`, and `react-transition-group` has been removed.
+
 ## 14.2.6
 
 ### Patch Changes

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

@@ -20,8 +20,6 @@ var _dialog = require("../styled/dialog");
 var _spotlightCard = _interopRequireDefault(require("./spotlight-card"));
 var _valueChanged = _interopRequireDefault(require("./value-changed"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
@@ -71,7 +69,6 @@ var SpotlightDialogComponent = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         actions = _this$props.actions,
         actionsBeforeElement = _this$props.actionsBeforeElement,
-        animationStyles = _this$props.animationStyles,
         children = _this$props.children,
         dialogPlacement = _this$props.dialogPlacement,
         dialogWidth = _this$props.dialogWidth,
@@ -133,7 +130,7 @@ var SpotlightDialogComponent = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/_react.default.createElement(_compiled.Box
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         , {
-          style: _objectSpread(_objectSpread({}, style), animationStyles),
+          style: style,
           ref: ref,
           "aria-modal": true,
           role: "dialog",

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

@@ -22,7 +22,6 @@ 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");
-var _animation = require("./animation");
 var _clone = _interopRequireDefault(require("./clone"));
 var _nodeResolverSpotlightInner = _interopRequireDefault(require("./node-resolver-spotlight-inner"));
 var _spotlightDialog = _interopRequireDefault(require("./spotlight-dialog"));
@@ -100,56 +99,24 @@ 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$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 _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 replacementElement = this.state.replacementElement;
-      return /*#__PURE__*/_react.default.createElement(_spotlightTransition.SpotlightTransitionConsumer, null, function (_ref2) {
-        var isOpen = _ref2.isOpen,
-          onExited = _ref2.onExited;
+      return /*#__PURE__*/_react.default.createElement(_spotlightTransition.SpotlightTransitionConsumer, null, function (_ref) {
+        var isOpen = _ref.isOpen,
+          onExited = _ref.onExited;
         return /*#__PURE__*/_react.default.createElement(_portal.default, {
           zIndex: 701
         }, TargetReplacement ? /*#__PURE__*/_react.default.createElement(_nodeResolverSpotlightInner.default, {
@@ -185,17 +152,17 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
           });
         }), 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, {
+        }, /*#__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;
+        }, function (_ref2) {
+          var ref = _ref2.ref,
+            className = _ref2.className,
+            style = _ref2.style;
           return /*#__PURE__*/_react.default.createElement("div", {
             ref: ref
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -204,17 +171,23 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
             ,
             style: style
-          }, _this2.renderSpotlightDialog({
-            animationStyles: {}
+          }, /*#__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
           }));
-        })) : /*#__PURE__*/_react.default.createElement(_animation.Fade, {
-          hasEntered: isOpen,
-          onExited: onExited
-        }, function (animationStyles) {
-          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

@@ -19,7 +19,6 @@ var _motion = require("@atlaskit/motion");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _blanket = _interopRequireDefault(require("../styled/blanket"));
-var _animation = require("./animation");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -137,7 +136,7 @@ var SpotlightManager = exports.default = /*#__PURE__*/function (_PureComponent)
         value: this.getTargetRef
       }, /*#__PURE__*/_react.default.createElement(Container, {
         component: Tag || _react.default.Fragment
-      }, (0, _platformFeatureFlags.fg)('platform_dst_onboarding_react_transition_group') ? /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, null, isActive && /*#__PURE__*/_react.default.createElement(_motion.FadeIn, {
+      }, /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, null, isActive && /*#__PURE__*/_react.default.createElement(_motion.FadeIn, {
         duration: "medium"
       }, function (_ref2) {
         var ref = _ref2.ref,
@@ -155,18 +154,7 @@ var SpotlightManager = exports.default = /*#__PURE__*/function (_PureComponent)
           isTinted: blanketIsTinted,
           onBlanketClicked: onBlanketClicked
         }));
-      })) : /*#__PURE__*/_react.default.createElement(_animation.Fade, {
-        hasEntered: isActive
-      }, function (animationStyles) {
-        return /*#__PURE__*/_react.default.createElement(_portal.default, {
-          zIndex: 700
-        }, /*#__PURE__*/_react.default.createElement(_blanket.default
-        /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */, {
-          style: animationStyles,
-          isTinted: blanketIsTinted,
-          onBlanketClicked: onBlanketClicked
-        }));
-      }), children)));
+      })), children)));
     }
   }]);
 }(_react.PureComponent);

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

@@ -39,7 +39,6 @@ class SpotlightDialogComponent extends Component {
     const {
       actions,
       actionsBeforeElement,
-      animationStyles,
       children,
       dialogPlacement,
       dialogWidth,
@@ -103,10 +102,7 @@ class SpotlightDialogComponent extends Component {
     }, /*#__PURE__*/React.createElement(Box
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     , {
-      style: {
-        ...style,
-        ...animationStyles
-      },
+      style: style,
       ref: ref,
       "aria-modal": true,
       role: "dialog",

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

@@ -9,7 +9,6 @@ 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';
-import { Fade } from './animation';
 import Clone from './clone';
 import NodeResolverSpotlightInner from './node-resolver-spotlight-inner';
 import SpotlightDialog from './spotlight-dialog';
@@ -76,39 +75,6 @@ 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,
@@ -156,7 +122,7 @@ class SpotlightInner extends React.Component {
       targetRadius: targetRadius
     })), TargetReplacement && !replacementElement ? null : /*#__PURE__*/React.createElement(Layering, {
       isDisabled: false
-    }, fg('platform_dst_onboarding_react_transition_group') ? /*#__PURE__*/React.createElement(ExitingPersistence, {
+    }, /*#__PURE__*/React.createElement(ExitingPersistence, {
       appear: true
     }, isOpen && /*#__PURE__*/React.createElement(FadeIn, {
       onFinish: state => {
@@ -175,14 +141,22 @@ class SpotlightInner extends React.Component {
       // 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 => this.renderSpotlightDialog({
-      animationStyles
-    }))), /*#__PURE__*/React.createElement(ScrollLock, null)));
+    }, /*#__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
+    }))))), /*#__PURE__*/React.createElement(ScrollLock, null)));
   }
 }
 _defineProperty(SpotlightInner, "defaultProps", {

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

@@ -6,7 +6,6 @@ import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import Blanket from '../styled/blanket';
-import { Fade } from './animation';
 const {
   Consumer: TargetConsumer,
   Provider: TargetProvider
@@ -105,7 +104,7 @@ export default class SpotlightManager extends PureComponent {
       value: this.getTargetRef
     }, /*#__PURE__*/React.createElement(Container, {
       component: Tag || React.Fragment
-    }, fg('platform_dst_onboarding_react_transition_group') ? /*#__PURE__*/React.createElement(ExitingPersistence, null, isActive && /*#__PURE__*/React.createElement(FadeIn, {
+    }, /*#__PURE__*/React.createElement(ExitingPersistence, null, isActive && /*#__PURE__*/React.createElement(FadeIn, {
       duration: "medium"
     }, ({
       ref,
@@ -122,16 +121,7 @@ export default class SpotlightManager extends PureComponent {
       style: style,
       isTinted: blanketIsTinted,
       onBlanketClicked: onBlanketClicked
-    })))) : /*#__PURE__*/React.createElement(Fade, {
-      hasEntered: isActive
-    }, animationStyles => /*#__PURE__*/React.createElement(Portal, {
-      zIndex: 700
-    }, /*#__PURE__*/React.createElement(Blanket
-    /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */, {
-      style: animationStyles,
-      isTinted: blanketIsTinted,
-      onBlanketClicked: onBlanketClicked
-    }))), children)));
+    })))), children)));
   }
 }
 _defineProperty(SpotlightManager, "defaultProps", {

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

@@ -4,8 +4,6 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, 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';
@@ -62,7 +60,6 @@ var SpotlightDialogComponent = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         actions = _this$props.actions,
         actionsBeforeElement = _this$props.actionsBeforeElement,
-        animationStyles = _this$props.animationStyles,
         children = _this$props.children,
         dialogPlacement = _this$props.dialogPlacement,
         dialogWidth = _this$props.dialogWidth,
@@ -124,7 +121,7 @@ var SpotlightDialogComponent = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/React.createElement(Box
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         , {
-          style: _objectSpread(_objectSpread({}, style), animationStyles),
+          style: style,
           ref: ref,
           "aria-modal": true,
           role: "dialog",

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

@@ -20,7 +20,6 @@ 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';
-import { Fade } from './animation';
 import Clone from './clone';
 import NodeResolverSpotlightInner from './node-resolver-spotlight-inner';
 import SpotlightDialog from './spotlight-dialog';
@@ -93,56 +92,24 @@ 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$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 _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 replacementElement = this.state.replacementElement;
-      return /*#__PURE__*/React.createElement(SpotlightTransitionConsumer, null, function (_ref2) {
-        var isOpen = _ref2.isOpen,
-          onExited = _ref2.onExited;
+      return /*#__PURE__*/React.createElement(SpotlightTransitionConsumer, null, function (_ref) {
+        var isOpen = _ref.isOpen,
+          onExited = _ref.onExited;
         return /*#__PURE__*/React.createElement(Portal, {
           zIndex: 701
         }, TargetReplacement ? /*#__PURE__*/React.createElement(NodeResolverSpotlightInner, {
@@ -178,17 +145,17 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
           });
         }), TargetReplacement && !replacementElement ? null : /*#__PURE__*/React.createElement(Layering, {
           isDisabled: false
-        }, fg('platform_dst_onboarding_react_transition_group') ? /*#__PURE__*/React.createElement(ExitingPersistence, {
+        }, /*#__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;
+        }, function (_ref2) {
+          var ref = _ref2.ref,
+            className = _ref2.className,
+            style = _ref2.style;
           return /*#__PURE__*/React.createElement("div", {
             ref: ref
             // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -197,17 +164,23 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
             // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
             ,
             style: style
-          }, _this2.renderSpotlightDialog({
-            animationStyles: {}
+          }, /*#__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
           }));
-        })) : /*#__PURE__*/React.createElement(Fade, {
-          hasEntered: isOpen,
-          onExited: onExited
-        }, function (animationStyles) {
-          return _this2.renderSpotlightDialog({
-            animationStyles: animationStyles
-          });
-        })), /*#__PURE__*/React.createElement(ScrollLock, null));
+        }))), /*#__PURE__*/React.createElement(ScrollLock, null));
       });
     }
   }]);

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

@@ -15,7 +15,6 @@ import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import Blanket from '../styled/blanket';
-import { Fade } from './animation';
 var _createContext = /*#__PURE__*/createContext(undefined),
   TargetConsumer = _createContext.Consumer,
   TargetProvider = _createContext.Provider;
@@ -130,7 +129,7 @@ var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
         value: this.getTargetRef
       }, /*#__PURE__*/React.createElement(Container, {
         component: Tag || React.Fragment
-      }, fg('platform_dst_onboarding_react_transition_group') ? /*#__PURE__*/React.createElement(ExitingPersistence, null, isActive && /*#__PURE__*/React.createElement(FadeIn, {
+      }, /*#__PURE__*/React.createElement(ExitingPersistence, null, isActive && /*#__PURE__*/React.createElement(FadeIn, {
         duration: "medium"
       }, function (_ref2) {
         var ref = _ref2.ref,
@@ -148,18 +147,7 @@ var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
           isTinted: blanketIsTinted,
           onBlanketClicked: onBlanketClicked
         }));
-      })) : /*#__PURE__*/React.createElement(Fade, {
-        hasEntered: isActive
-      }, function (animationStyles) {
-        return /*#__PURE__*/React.createElement(Portal, {
-          zIndex: 700
-        }, /*#__PURE__*/React.createElement(Blanket
-        /* eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */, {
-          style: animationStyles,
-          isTinted: blanketIsTinted,
-          onBlanketClicked: onBlanketClicked
-        }));
-      }), children)));
+      })), children)));
     }
   }]);
 }(PureComponent);

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

@@ -45,10 +45,6 @@ interface SpotlightDialogProps {
      * The spotlight target node.
      */
     targetNode: HTMLElement;
-    /**
-     * Contains the animation styles to apply to the component.
-     */
-    animationStyles: Object;
     /**
      * 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,

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

@@ -53,14 +53,6 @@ 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/components/spotlight-dialog.d.ts

@@ -45,10 +45,6 @@ interface SpotlightDialogProps {
      * The spotlight target node.
      */
     targetNode: HTMLElement;
-    /**
-     * Contains the animation styles to apply to the component.
-     */
-    animationStyles: Object;
     /**
      * 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,

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

@@ -53,14 +53,6 @@ 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "14.2.6",
+	"version": "14.3.0",
 	"description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -49,7 +49,7 @@
 	"dependencies": {
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/css": "^0.12.0",
-		"@atlaskit/ds-lib": "^4.0.0",
+		"@atlaskit/ds-lib": "^4.1.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/modal-dialog": "^14.2.0",
@@ -67,7 +67,6 @@
 		"react-focus-lock": "^2.9.5",
 		"react-node-resolver": "^1.0.1",
 		"react-scrolllock": "^5.0.1",
-		"react-transition-group": "^4.4.1",
 		"scroll-into-view-if-needed": "^2.2.20"
 	},
 	"peerDependencies": {
@@ -85,7 +84,6 @@
 		"@testing-library/user-event": "^14.4.3",
 		"@types/exenv": "^1.2.0",
 		"@types/react-node-resolver": "^2.0.0",
-		"@types/react-transition-group": "^2.0.6",
 		"raf-stub": "^2.0.1",
 		"react-dom": "^18.2.0",
 		"react-lorem-component": "^0.13.0",
@@ -104,9 +102,6 @@
 		},
 		"platform_fix_component_state_update_for_suspense": {
 			"type": "boolean"
-		},
-		"platform_dst_onboarding_react_transition_group": {
-			"type": "boolean"
 		}
 	},
 	"techstack": {

package/dist/cjs/components/animation.js

@@ -1,53 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-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 = {
-  enter: 0,
-  exit: 100
-};
-/**
- * __Fade__
- *
- * A fade in animation used for spotlights.
- *
- * @internal
- */
-var Fade = exports.Fade = function Fade(_ref) {
-  var hasEntered = _ref.hasEntered,
-    children = _ref.children,
-    onExited = _ref.onExited;
-  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
-  }, (0, _platformFeatureFlags.fg)('platform_design_system_team_transition_group_r18') && {
-    nodeRef: nodeRef
-  }), function (status) {
-    var anim = {
-      entered: {
-        opacity: 1
-      },
-      exiting: {
-        opacity: 0
-      }
-    };
-    return children(_objectSpread({
-      transition: "opacity ".concat(duration.exit, "ms"),
-      opacity: 0
-    }, status in anim ? anim[status] : {}));
-  });
-};

package/dist/es2019/components/animation.js

@@ -1,45 +0,0 @@
-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
-};
-/**
- * __Fade__
- *
- * A fade in animation used for spotlights.
- *
- * @internal
- */
-export const Fade = ({
-  hasEntered,
-  children,
-  onExited
-}) => {
-  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_team_transition_group_r18') && {
-    nodeRef
-  }), status => {
-    const anim = {
-      entered: {
-        opacity: 1
-      },
-      exiting: {
-        opacity: 0
-      }
-    };
-    return children({
-      transition: `opacity ${duration.exit}ms`,
-      opacity: 0,
-      ...(status in anim ? anim[status] : {})
-    });
-  });
-};

package/dist/esm/components/animation.js

@@ -1,46 +0,0 @@
-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
-};
-/**
- * __Fade__
- *
- * A fade in animation used for spotlights.
- *
- * @internal
- */
-export var Fade = function Fade(_ref) {
-  var hasEntered = _ref.hasEntered,
-    children = _ref.children,
-    onExited = _ref.onExited;
-  var nodeRef = React.useRef(null);
-  return /*#__PURE__*/React.createElement(Transition, _extends({
-    in: hasEntered,
-    timeout: duration,
-    onExited: onExited,
-    unmountOnExit: true,
-    appear: true
-  }, fg('platform_design_system_team_transition_group_r18') && {
-    nodeRef: nodeRef
-  }), function (status) {
-    var anim = {
-      entered: {
-        opacity: 1
-      },
-      exiting: {
-        opacity: 0
-      }
-    };
-    return children(_objectSpread({
-      transition: "opacity ".concat(duration.exit, "ms"),
-      opacity: 0
-    }, status in anim ? anim[status] : {}));
-  });
-};

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

@@ -1,15 +0,0 @@
-import React, { type ReactNode } from 'react';
-interface FadeProps {
-    hasEntered: boolean;
-    children: (animationStyles: Record<string, any>) => ReactNode;
-    onExited?: () => any;
-}
-/**
- * __Fade__
- *
- * A fade in animation used for spotlights.
- *
- * @internal
- */
-export declare const Fade: ({ hasEntered, children, onExited }: FadeProps) => React.JSX.Element;
-export {};

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

@@ -1,15 +0,0 @@
-import React, { type ReactNode } from 'react';
-interface FadeProps {
-    hasEntered: boolean;
-    children: (animationStyles: Record<string, any>) => ReactNode;
-    onExited?: () => any;
-}
-/**
- * __Fade__
- *
- * A fade in animation used for spotlights.
- *
- * @internal
- */
-export declare const Fade: ({ hasEntered, children, onExited }: FadeProps) => React.JSX.Element;
-export {};