@atlaskit/onboarding 10.2.2 → 10.2.6

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/onboarding
 
+## 10.2.6
+
+### Patch Changes
+
+- [`b85e7ce12cd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b85e7ce12cd) - Internal upgrade of memoize-one to 6.0.0
+
+## 10.2.5
+
+### Patch Changes
+
+- [`34282240102`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34282240102) - Adds explicit type to button usages components.
+
+## 10.2.4
+
+### Patch Changes
+
+- [`d77725f926f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d77725f926f) - Replaced usage of `styled-components` with `@emotion/core`.
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - Internal changes to remove `@atlaskit/theme/math` usage.
+- Updated dependencies
+
+## 10.2.3
+
+### Patch Changes
+
+- [`115c009e2ef`](https://bitbucket.org/atlassian/atlassian-frontend/commits/115c009e2ef) - Refactor to use new modal dialog API.
+- Updated dependencies
+
 ## 10.2.2
 
 ### Patch Changes

package/dist/cjs/components/{Animation.js → animation.js}

@@ -22,8 +22,15 @@ var duration = {
   exit: 100
 };
 
+/**
+ * __Fade__
+ *
+ * A fade in animation used for spotlights.
+ *
+ * @internal
+ */
 var Fade = function Fade(_ref) {
-  var hasEntered = _ref.in,
+  var hasEntered = _ref.hasEntered,
       children = _ref.children,
       onExited = _ref.onExited;
   return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.Transition, {

package/dist/cjs/components/card.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _typography = require("@atlaskit/theme/typography");
+
+var _dialog = require("../styled/dialog");
+
+/** @jsx jsx */
+var gridSize = (0, _constants.gridSize)(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var lightH600Styles = (0, _core.css)((0, _typography.h600)({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var darkH600Styles = (0, _core.css)((0, _typography.h600)({
+  theme: {
+    mode: 'dark'
+  }
+}));
+
+var Container = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      theme = _ref.theme,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["children", "theme"]);
+  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    (0, _core.jsx)("div", (0, _extends2.default)({
+      css: theme,
+      ref: ref
+    }, props), children)
+  );
+});
+
+var bodyStyles = (0, _core.css)({
+  display: 'flex',
+  padding: "".concat(gridSize * 2, "px ").concat(gridSize * 2.5, "px"),
+  flexDirection: 'column'
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+var headingStyles = (0, _core.css)({
+  color: 'inherit'
+});
+var defaultHeaderStyles = (0, _core.css)({
+  display: 'flex',
+  paddingBottom: "".concat(gridSize, "px"),
+  alignItems: 'baseline',
+  justifyContent: 'space-between'
+});
+
+var DefaultHeader = function DefaultHeader(_ref2) {
+  var children = _ref2.children;
+  return (0, _core.jsx)("div", {
+    css: defaultHeaderStyles
+  }, children);
+};
+
+var defaultFooterStyles = (0, _core.css)({
+  display: 'flex',
+  paddingTop: "".concat(gridSize, "px"),
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+
+var DefaultFooter = function DefaultFooter(_ref3) {
+  var children = _ref3.children;
+  return (0, _core.jsx)("div", {
+    css: defaultFooterStyles
+  }, children);
+};
+
+var Theme = (0, _components.createTheme)(function () {
+  return {
+    container: {
+      overflow: 'auto',
+      borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+      height: 'fit-content',
+      zIndex: "".concat(_constants.layers.spotlight() + 1)
+    }
+  };
+});
+/**
+ * __Card__
+ *
+ * A card base for the spotlight card. The external `SpotlightCard` wraps this component.
+ *
+ * @internal
+ */
+
+var Card = /*#__PURE__*/_react.default.forwardRef(function (_ref4, ref) {
+  var _ref4$actions = _ref4.actions,
+      actions = _ref4$actions === void 0 ? [] : _ref4$actions,
+      actionsBeforeElement = _ref4.actionsBeforeElement,
+      children = _ref4.children,
+      _ref4$components = _ref4.components,
+      components = _ref4$components === void 0 ? {} : _ref4$components,
+      image = _ref4.image,
+      heading = _ref4.heading,
+      headingAfterElement = _ref4.headingAfterElement,
+      theme = _ref4.theme,
+      testId = _ref4.testId;
+  var _components$Header = components.Header,
+      Header = _components$Header === void 0 ? DefaultHeader : _components$Header,
+      _components$Footer = components.Footer,
+      Footer = _components$Footer === void 0 ? DefaultFooter : _components$Footer;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
+
+  return (0, _core.jsx)(Theme.Provider, {
+    value: theme
+  }, (0, _core.jsx)(Theme.Consumer, null, function (_ref5) {
+    var container = _ref5.container;
+    return (// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+      (0, _core.jsx)(Container, {
+        theme: container,
+        ref: ref,
+        "data-testid": testId
+      }, typeof image === 'string' ? (0, _core.jsx)("img", {
+        src: image,
+        alt: ""
+      }) : image, (0, _core.jsx)("div", {
+        css: bodyStyles
+      }, heading || headingAfterElement ? (0, _core.jsx)(Header, null, (0, _core.jsx)("h4", {
+        css: [mode === 'light' ? lightH600Styles : darkH600Styles, headingStyles]
+      }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? (0, _core.jsx)(Footer, null, actionsBeforeElement || (0, _core.jsx)("span", null), (0, _core.jsx)(_dialog.DialogActionItemContainer, null, actions.map(function (_ref6, idx) {
+        var text = _ref6.text,
+            key = _ref6.key,
+            rest = (0, _objectWithoutProperties2.default)(_ref6, ["text", "key"]);
+        return (0, _core.jsx)(_dialog.DialogActionItem, {
+          key: key || (typeof text === 'string' ? text : "".concat(idx))
+        }, (0, _core.jsx)(_customThemeButton.default, rest, text));
+      }))) : null))
+    );
+  }));
+});
+
+var _default = Card;
+exports.default = _default;

package/dist/cjs/components/{Clone.js → clone.js}

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Target = require("../styled/Target");
+var _target = require("../styled/target");
 
 function cloneAndOverrideStyles(node) {
   var shouldCloneChildren = true;
@@ -21,6 +21,15 @@ function cloneAndOverrideStyles(node) {
   clonedNode.style.transform = 'translate(0, 0) translate3d(0, 0, 0)';
   return clonedNode;
 }
+/**
+ * __Clone__
+ *
+ * Used for cloning spotlight targets. The clone is positioned on top of the spotlight target with
+ * a pulsing animation.
+ *
+ * @internal
+ */
+
 
 var Clone = function Clone(props) {
   var pulse = props.pulse,
@@ -31,7 +40,7 @@ var Clone = function Clone(props) {
       targetNode = props.targetNode,
       targetRadius = props.targetRadius,
       testId = props.testId;
-  return /*#__PURE__*/_react.default.createElement(_Target.TargetInner, {
+  return /*#__PURE__*/_react.default.createElement(_target.TargetInner, {
     "data-testid": testId,
     pulse: pulse,
     bgColor: targetBgColor,
@@ -45,7 +54,7 @@ var Clone = function Clone(props) {
     style: {
       pointerEvents: 'none'
     }
-  }), /*#__PURE__*/_react.default.createElement(_Target.TargetOverlay, {
+  }), /*#__PURE__*/_react.default.createElement(_target.TargetOverlay, {
     onClick: targetOnClick ? function (event) {
       return targetOnClick({
         event: event,

package/dist/cjs/components/index.js

@@ -8,37 +8,37 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function get() {
-    return _Modal.default;
+    return _modal.default;
   }
 });
 Object.defineProperty(exports, "Spotlight", {
   enumerable: true,
   get: function get() {
-    return _Spotlight.default;
+    return _spotlight.default;
   }
 });
 Object.defineProperty(exports, "SpotlightCard", {
   enumerable: true,
   get: function get() {
-    return _SpotlightCard.default;
+    return _spotlightCard.default;
   }
 });
 Object.defineProperty(exports, "SpotlightManager", {
   enumerable: true,
   get: function get() {
-    return _SpotlightManager.default;
+    return _spotlightManager.default;
   }
 });
 Object.defineProperty(exports, "SpotlightTarget", {
   enumerable: true,
   get: function get() {
-    return _SpotlightTarget.default;
+    return _spotlightTarget.default;
   }
 });
 Object.defineProperty(exports, "SpotlightTransition", {
   enumerable: true,
   get: function get() {
-    return _SpotlightTransition.default;
+    return _spotlightTransition.default;
   }
 });
 Object.defineProperty(exports, "useSpotlight", {
@@ -60,18 +60,18 @@ Object.defineProperty(exports, "modalButtonTheme", {
   }
 });
 
-var _Modal = _interopRequireDefault(require("./Modal"));
+var _modal = _interopRequireDefault(require("./modal"));
 
-var _Spotlight = _interopRequireDefault(require("./Spotlight"));
+var _spotlight = _interopRequireDefault(require("./spotlight"));
 
-var _SpotlightCard = _interopRequireDefault(require("./SpotlightCard"));
+var _spotlightCard = _interopRequireDefault(require("./spotlight-card"));
 
-var _SpotlightManager = _interopRequireDefault(require("./SpotlightManager"));
+var _spotlightManager = _interopRequireDefault(require("./spotlight-manager"));
 
-var _SpotlightTarget = _interopRequireDefault(require("./SpotlightTarget"));
+var _spotlightTarget = _interopRequireDefault(require("./spotlight-target"));
 
-var _SpotlightTransition = _interopRequireDefault(require("./SpotlightTransition"));
+var _spotlightTransition = _interopRequireDefault(require("./spotlight-transition"));
 
-var _useSpotlight = _interopRequireDefault(require("./useSpotlight"));
+var _useSpotlight = _interopRequireDefault(require("./use-spotlight"));
 
 var _theme = require("./theme");

package/dist/cjs/components/{Modal.js → modal.js}

@@ -27,13 +27,15 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+
+var _core = require("@emotion/core");
 
 var _customThemeButton = _interopRequireWildcard(require("@atlaskit/button/custom-theme-button"));
 
-var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog"));
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 
-var _Modal = require("../styled/Modal");
+var _modal = require("../styled/modal");
 
 var _theme = require("./theme");
 
@@ -46,6 +48,15 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 function noop() {}
+/**
+ * __Onboarding modal__
+ *
+ * If the product change is large enough,
+ * this component can be used to outline the benefits of the change to the user.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+
 
 var OnboardingModal = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(OnboardingModal, _Component);
@@ -67,9 +78,9 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
           src = props.image;
 
       var ImageElement = function ImageElement() {
-        return /*#__PURE__*/_react.default.createElement(_Modal.Image, {
-          alt: "",
-          src: src
+        return (0, _core.jsx)(_modal.ModalImage, {
+          src: src,
+          alt: ""
         });
       };
 
@@ -82,18 +93,18 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
           experimental_shouldShowPrimaryButtonOnRight = _props$experimental_s === void 0 ? false : _props$experimental_s;
 
       var ActionsElement = function ActionsElement() {
-        return actionList ? /*#__PURE__*/_react.default.createElement(_customThemeButton.Theme.Provider, {
+        return actionList ? (0, _core.jsx)(_customThemeButton.Theme.Provider, {
           value: _theme.modalButtonTheme
-        }, /*#__PURE__*/_react.default.createElement(_Modal.Actions, {
+        }, (0, _core.jsx)(_modal.ModalActionContainer, {
           shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
         }, actionList.map(function (_ref, idx) {
           var text = _ref.text,
               key = _ref.key,
               rest = (0, _objectWithoutProperties2.default)(_ref, ["text", "key"]);
           var variant = idx ? 'subtle-link' : 'primary';
-          return /*#__PURE__*/_react.default.createElement(_Modal.ActionItem, {
+          return (0, _core.jsx)(_modal.ModalActionItem, {
             key: key || (typeof text === 'string' ? text : "".concat(idx))
-          }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, (0, _extends2.default)({
+          }, (0, _core.jsx)(_customThemeButton.default, (0, _extends2.default)({
             appearance: variant,
             autoFocus: !idx
           }, rest), text));
@@ -113,17 +124,15 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
           children = _this$props.children,
           heading = _this$props.heading,
           props = (0, _objectWithoutProperties2.default)(_this$props, ["actions", "children", "heading"]);
-      return /*#__PURE__*/_react.default.createElement(_modalDialog.default, (0, _extends2.default)({
+      var Header = this.headerComponent(this.props);
+      var Footer = this.footerComponent(this.props);
+      return (0, _core.jsx)(_modalDialog.default, (0, _extends2.default)({
         autoFocus: true,
-        components: {
-          Header: this.headerComponent(this.props),
-          Footer: this.footerComponent(this.props)
-        },
         onClose: noop,
-        scrollBehavior: "outside",
+        shouldScrollInViewport: true,
         shouldCloseOnOverlayClick: false,
         shouldCloseOnEscapePress: false
-      }, props), /*#__PURE__*/_react.default.createElement(_Modal.Body, null, heading && /*#__PURE__*/_react.default.createElement(_Modal.Heading, null, heading), children));
+      }, props), (0, _core.jsx)(Header, null), (0, _core.jsx)(_modalDialog.ModalBody, null, (0, _core.jsx)(_modal.ModalBody, null, heading && (0, _core.jsx)(_modal.ModalHeading, null, heading), children)), (0, _core.jsx)(Footer, null));
     }
   }]);
   return OnboardingModal;

package/dist/cjs/components/{SpotlightCard.js → spotlight-card.js}

@@ -29,7 +29,7 @@ var _customThemeButton = require("@atlaskit/button/custom-theme-button");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _Card = _interopRequireDefault(require("./Card"));
+var _card = _interopRequireDefault(require("./card"));
 
 var _theme2 = require("./theme");
 
@@ -69,7 +69,7 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
           testId = _this$props.testId;
       return /*#__PURE__*/_react.default.createElement(_customThemeButton.Theme.Provider, {
         value: _theme2.spotlightButtonTheme
-      }, /*#__PURE__*/_react.default.createElement(_Card.default, {
+      }, /*#__PURE__*/_react.default.createElement(_card.default, {
         testId: testId,
         ref: innerRef,
         heading: heading,
@@ -77,7 +77,8 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
         actions: actions,
         actionsBeforeElement: actionsBeforeElement,
         components: components,
-        image: image,
+        image: image // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+        ,
         theme: function theme(parent) {
           var _parent = parent({}),
               container = _parent.container,
@@ -99,6 +100,12 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
   }]);
   return SpotlightCard;
 }(_react.default.Component);
+/**
+ * __Spotlight card__
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+
 
 (0, _defineProperty2.default)(SpotlightCard, "defaultProps", {
   width: 400,

package/dist/cjs/components/{SpotlightDialog.js → spotlight-dialog.js}

@@ -33,11 +33,11 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _popper = require("@atlaskit/popper");
 
-var _Dialog = require("../styled/Dialog");
+var _dialog = require("../styled/dialog");
 
-var _SpotlightCard = _interopRequireDefault(require("./SpotlightCard"));
+var _spotlightCard = _interopRequireDefault(require("./spotlight-card"));
 
-var _ValueChanged = _interopRequireDefault(require("./ValueChanged"));
+var _valueChanged = _interopRequireDefault(require("./value-changed"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -52,7 +52,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.2.2";
+var packageVersion = "10.2.6";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
@@ -145,16 +145,17 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
         var ref = _ref.ref,
             style = _ref.style,
             update = _ref.update;
-        return /*#__PURE__*/_react.default.createElement(_ValueChanged.default, {
+        return /*#__PURE__*/_react.default.createElement(_valueChanged.default, {
           value: dialogWidth,
           onChange: update
         }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
           disabled: focusLockDisabled,
           returnFocus: false,
           autoFocus: true
-        }, /*#__PURE__*/_react.default.createElement(_SpotlightCard.default, {
+        }, /*#__PURE__*/_react.default.createElement(_spotlightCard.default, {
           ref: ref,
-          testId: testId,
+          testId: testId // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+          ,
           theme: function theme(parent) {
             var _parent = parent({}),
                 container = _parent.container,
@@ -167,7 +168,7 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           width: dialogWidth,
           actions: actions,
           actionsBeforeElement: actionsBeforeElement,
-          image: image && /*#__PURE__*/_react.default.createElement(_Dialog.Image, {
+          image: image && /*#__PURE__*/_react.default.createElement(_dialog.DialogImage, {
             alt: heading,
             src: image
           }),

package/dist/cjs/components/{SpotlightInner.js → spotlight-inner.js}

@@ -39,13 +39,13 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _useElementBox = require("../utils/use-element-box");
 
-var _Animation = require("./Animation");
+var _animation = require("./animation");
 
-var _Clone = _interopRequireDefault(require("./Clone"));
+var _clone = _interopRequireDefault(require("./clone"));
 
-var _SpotlightDialog = _interopRequireDefault(require("./SpotlightDialog"));
+var _spotlightDialog = _interopRequireDefault(require("./spotlight-dialog"));
 
-var _SpotlightTransition = require("./SpotlightTransition");
+var _spotlightTransition = require("./spotlight-transition");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -55,6 +55,13 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/**
+ * __Spotlight inner__
+ *
+ * Renders the spotlight target clone and dialog.
+ *
+ * @internal
+ */
 var SpotlightInner = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(SpotlightInner, _React$Component);
 
@@ -126,7 +133,7 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
           testId = _this$props.testId,
           TargetReplacement = _this$props.targetReplacement;
       var replacementElement = this.state.replacementElement;
-      return /*#__PURE__*/_react.default.createElement(_SpotlightTransition.SpotlightTransitionConsumer, null, function (_ref) {
+      return /*#__PURE__*/_react.default.createElement(_spotlightTransition.SpotlightTransitionConsumer, null, function (_ref) {
         var isOpen = _ref.isOpen,
             onExited = _ref.onExited;
         return /*#__PURE__*/_react.default.createElement(_portal.default, {
@@ -146,7 +153,7 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
         })) : /*#__PURE__*/_react.default.createElement(_useElementBox.ElementBox, {
           element: targetNode
         }, function (box) {
-          return /*#__PURE__*/_react.default.createElement(_Clone.default, {
+          return /*#__PURE__*/_react.default.createElement(_clone.default, {
             testId: "".concat(testId, "--target"),
             pulse: pulse,
             target: target,
@@ -156,11 +163,11 @@ var SpotlightInner = /*#__PURE__*/function (_React$Component) {
             targetOnClick: targetOnClick,
             targetRadius: targetRadius
           });
-        }), TargetReplacement && !replacementElement ? null : /*#__PURE__*/_react.default.createElement(_Animation.Fade, {
-          in: isOpen,
+        }), TargetReplacement && !replacementElement ? null : /*#__PURE__*/_react.default.createElement(_animation.Fade, {
+          hasEntered: isOpen,
           onExited: onExited
         }, function (animationStyles) {
-          return /*#__PURE__*/_react.default.createElement(_SpotlightDialog.default, {
+          return /*#__PURE__*/_react.default.createElement(_spotlightDialog.default, {
             testId: "".concat(testId, "--dialog"),
             actions: _this2.props.actions,
             actionsBeforeElement: _this2.props.actionsBeforeElement,

package/dist/cjs/components/{SpotlightManager.js → spotlight-manager.js}

@@ -31,9 +31,9 @@ var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _Blanket = _interopRequireDefault(require("../styled/Blanket"));
+var _blanket = _interopRequireDefault(require("../styled/blanket"));
 
-var _Animation = require("./Animation");
+var _animation = require("./animation");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -69,6 +69,14 @@ var Container = function Container(_ref) {
       children = _ref.children;
   return /*#__PURE__*/_react.default.createElement(Wrapper, null, children);
 };
+/**
+ * __Spotlight manager__
+ *
+ * Wraps usage of spotlight and manages progression through multiple spotlights.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+
 
 var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(SpotlightManager, _PureComponent);
@@ -145,12 +153,12 @@ var SpotlightManager = /*#__PURE__*/function (_PureComponent) {
         value: this.targetRef
       }, /*#__PURE__*/_react.default.createElement(Container, {
         component: Tag || _react.default.Fragment
-      }, /*#__PURE__*/_react.default.createElement(_Animation.Fade, {
-        in: this.state.spotlightCount > 0
+      }, /*#__PURE__*/_react.default.createElement(_animation.Fade, {
+        hasEntered: this.state.spotlightCount > 0
       }, function (animationStyles) {
         return /*#__PURE__*/_react.default.createElement(_portal.default, {
           zIndex: _constants.layers.spotlight()
-        }, /*#__PURE__*/_react.default.createElement(_Blanket.default, {
+        }, /*#__PURE__*/_react.default.createElement(_blanket.default, {
           style: animationStyles,
           isTinted: blanketIsTinted
         }));

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
+
+var _spotlightManager = require("./spotlight-manager");
+
+/**
+ * __Spotlight target__
+ *
+ * Wraps an element, allowing it to be targeted by a spotlight.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+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)
+    }, children) : children;
+  });
+};
+
+var _default = SpotlightTarget;
+exports.default = _default;