@atlaskit/onboarding 10.2.3 → 10.3.0

package/dist/esm/styled/target.js

@@ -0,0 +1,107 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/** @jsx jsx */
+import { css, jsx, keyframes } from '@emotion/core';
+import { P300 } from '@atlaskit/theme/colors';
+import { layers } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+// NOTE:
+// Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
+var baseShadow = token('shadow.overlay', "0 0 0 2px ".concat(P300));
+var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
+var pulseKeyframes = keyframes({
+  '0%, 33%': {
+    boxShadow: "".concat(baseShadow, ", 0 0 0 rgba(101, 84, 192, 1)")
+  },
+  '66%, 100%': {
+    boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")
+  }
+});
+var animationStyles = css({
+  animation: "".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite")
+}); // 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 baseStyles = css({
+  zIndex: layers.spotlight() + 1
+});
+
+var Base = function Base(_ref) {
+  var children = _ref.children,
+      bgColor = _ref.bgColor,
+      radius = _ref.radius,
+      style = _ref.style,
+      props = _objectWithoutProperties(_ref, ["children", "bgColor", "radius", "style"]);
+
+  return jsx("div", _extends({
+    css: baseStyles,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      backgroundColor: bgColor,
+      borderRadius: radius ? "".concat(radius, "px") : undefined
+    })
+  }, props), children);
+};
+/**
+ * __Target inner__
+ *
+ * Used to apply spotlight border and pulse to spotlight targets.
+ *
+ * @internal
+ */
+
+
+export var TargetInner = function TargetInner(_ref2) {
+  var children = _ref2.children,
+      pulse = _ref2.pulse,
+      props = _objectWithoutProperties(_ref2, ["children", "pulse"]);
+
+  return jsx(Base, _extends({}, props, {
+    css: [pulse && animationStyles]
+  }), children);
+};
+var targetOverlayStyles = css({
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  top: 0,
+  left: 0
+});
+/**
+ * __Target overlay__
+ *
+ * Overlays a spotlight target, allowing for custom click events that are intended
+ * only for onboarding.
+ *
+ * @internal
+ */
+
+export var TargetOverlay = function TargetOverlay(props) {
+  return jsx("div", _extends({}, props, {
+    css: targetOverlayStyles,
+    style: {
+      cursor: props.onClick ? 'pointer' : 'auto'
+    }
+  }));
+};
+/**
+ * __Pulse__
+ *
+ * Allows consumers to apply the spotlight pulse effect in a custom way.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+
+export var Pulse = function Pulse(_ref3) {
+  var children = _ref3.children,
+      props = _objectWithoutProperties(_ref3, ["children"]);
+
+  return jsx(Base, _extends({}, props, {
+    css: animationStyles
+  }), children);
+};

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

@@ -50,6 +50,14 @@ export var useElementBox = function useElementBox(element) {
   }, [element]);
   return box;
 };
+/**
+ * __Element box__
+ *
+ * Allows consumption of `userElementBox` hook through render props.
+ *
+ * @internal
+ */
+
 export var ElementBox = function ElementBox(props) {
   var box = useElementBox(props.element);
   return props.children(box);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.2.3",
+	"version": "10.3.0",
 	"sideEffects": false
 }

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

@@ -0,0 +1,15 @@
+import { 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) => JSX.Element;
+export {};

package/dist/types/components/{Card.d.ts → card.d.ts}

@@ -1,30 +1,46 @@
+/** @jsx jsx */
 import React, { ComponentType, ReactNode } from 'react';
 import { ThemeProp } from '@atlaskit/theme/components';
 import { Actions } from '../types';
 export interface CardTokens {
     container: Record<string, string | undefined>;
 }
-interface Props {
-    /** Buttons to render in the footer */
+interface CardProps {
+    /**
+     * Buttons to render in the footer
+     */
     actions?: Actions;
-    /** An optional element rendered to the left of the footer actions */
+    /**
+     * An optional element rendered to the left of the footer actions
+     */
     actionsBeforeElement?: ReactNode;
-    /** The content of the card */
+    /**
+     * The content of the card
+     */
     children?: ReactNode;
-    /** The container elements rendered by the component */
+    /**
+     * The container elements rendered by the component
+     */
     components?: {
         Header?: ComponentType<any>;
         Footer?: ComponentType<any>;
     };
-    /** The heading to be rendered above the body */
+    /**
+     * The heading to be rendered above the body
+     */
     heading?: ReactNode;
-    /** An optional element rendered to the right of the heading */
+    /**
+     * An optional element rendered to the right of the heading
+     */
     headingAfterElement?: ReactNode;
-    /** The image to render above the heading. Can be a url or a Node. */
+    /**
+     * The image to render above the heading. Can be a url or a Node.
+     */
     image?: string | ReactNode;
-    /** the theme of the card */
+    /**
+     * The theme of the card
+     */
     theme?: ThemeProp<CardTokens, {}>;
-    innerRef?: React.Ref<HTMLElement>;
     /**
      * 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,
@@ -32,5 +48,12 @@ interface Props {
      */
     testId?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
-export default _default;
+/**
+ * __Card__
+ *
+ * A card base for the spotlight card. The external `SpotlightCard` wraps this component.
+ *
+ * @internal
+ */
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;
+export default Card;

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

@@ -0,0 +1,50 @@
+import { MouseEvent } from 'react';
+export interface CloneProps {
+    /**
+     * Whether or not to display a pulse animation around the spotlighted element
+     */
+    pulse: boolean;
+    /**
+     * An object containing the information used for positioning clone
+     */
+    style: Record<string, any>;
+    /**
+     * The name of the SpotlightTarget
+     */
+    target?: string;
+    /**
+     * The spotlight target node
+     */
+    targetNode: HTMLElement;
+    /**
+     * The background color of the element being highlighted
+     */
+    targetBgColor?: string;
+    /**
+     * Function to fire when a user clicks on the cloned target
+     */
+    targetOnClick?: (eventData: {
+        event: MouseEvent<HTMLElement>;
+        target?: string;
+    }) => void;
+    /**
+     * The border-radius of the element being highlighted
+     */
+    targetRadius?: number;
+    /**
+     * 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;
+}
+/**
+ * __Clone__
+ *
+ * Used for cloning spotlight targets. The clone is positioned on top of the spotlight target with
+ * a pulsing animation.
+ *
+ * @internal
+ */
+declare const Clone: (props: CloneProps) => JSX.Element;
+export default Clone;

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

@@ -1,9 +1,9 @@
-import Modal from './Modal';
-import Spotlight from './Spotlight';
-import SpotlightCard from './SpotlightCard';
-import SpotlightManager from './SpotlightManager';
-import SpotlightTarget from './SpotlightTarget';
-import SpotlightTransition from './SpotlightTransition';
-import useSpotlight from './useSpotlight';
+import Modal from './modal';
+import Spotlight from './spotlight';
+import SpotlightCard from './spotlight-card';
+import SpotlightManager from './spotlight-manager';
+import SpotlightTarget from './spotlight-target';
+import SpotlightTransition from './spotlight-transition';
+import useSpotlight from './use-spotlight';
 export { spotlightButtonTheme, modalButtonTheme } from './theme';
 export { Modal, Spotlight, SpotlightCard, SpotlightManager, SpotlightTarget, SpotlightTransition, useSpotlight, };

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

@@ -0,0 +1,48 @@
+/** @jsx jsx */
+import { Component, ElementType, ReactNode } from 'react';
+import { ModalFooterProps as FooterComponentProps, ModalHeaderProps as HeaderComponentProps } from '@atlaskit/modal-dialog';
+import { Actions } from '../types';
+declare type ModalProps = {
+    /**
+     * Buttons to render in the footer
+     */
+    actions?: Actions;
+    /**
+     * The elements rendered in the modal
+     */
+    children: ReactNode;
+    /**
+     * Path to the the your image
+     */
+    image?: string;
+    /**
+     * Optional element rendered above the body
+     */
+    header?: ElementType<HeaderComponentProps>;
+    /**
+     * Optional element rendered below the body
+     */
+    footer?: ElementType<FooterComponentProps>;
+    /**
+     * Heading text rendered above the body
+     */
+    heading?: string;
+    /**
+     * Boolean prop to confirm if primary button in the footer should be shown on the right
+     */
+    experimental_shouldShowPrimaryButtonOnRight?: boolean;
+};
+/**
+ * __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)
+ */
+export default class OnboardingModal extends Component<ModalProps> {
+    headerComponent: (props: ModalProps) => "symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "small" | "ruby" | "table" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "template" | import("react").ComponentClass<HeaderComponentProps, any> | import("react").FunctionComponent<HeaderComponentProps> | (() => JSX.Element);
+    footerComponent: (props: ModalProps) => "symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "small" | "ruby" | "table" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "template" | import("react").ComponentClass<FooterComponentProps, any> | import("react").FunctionComponent<FooterComponentProps> | (() => JSX.Element | null);
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,63 @@
+import React, { ComponentType, ReactNode, Ref } from 'react';
+import { ThemeProp } from '@atlaskit/theme/components';
+import { Actions } from '../types';
+import { CardTokens } from './card';
+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
+     */
+    heading?: ReactNode;
+    /**
+     * An optional element rendered to the right of the heading
+     */
+    headingAfterElement?: ReactNode;
+    /**
+     * The image src to render above the heading
+     */
+    image?: string | ReactNode;
+    /**
+     * Removes elevation styles if set
+     */
+    isFlat?: boolean;
+    /**
+     * The theme of the card
+     */
+    theme?: ThemeProp<CardTokens, {}>;
+    /**
+     * Width of the card in pixels
+     */
+    width?: number;
+    innerRef?: Ref<HTMLElement> | 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;
+}
+declare const _default: React.ForwardRefExoticComponent<SpotlightCardProps & React.RefAttributes<HTMLElement>>;
+/**
+ * __Spotlight card__
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+export default _default;

package/dist/types/components/{SpotlightDialog.d.ts → spotlight-dialog.d.ts}

@@ -2,29 +2,53 @@ import React, { ComponentType, ReactNode } from 'react';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 import { Actions } from '../types';
 export interface SpotlightDialogProps extends WithAnalyticsEventsProps {
-    /** Buttons to render in the footer */
+    /**
+     * Buttons to render in the footer
+     */
     actions?: Actions;
-    /** An optional element rendered beside the footer actions */
+    /**
+     * An optional element rendered beside the footer actions
+     */
     actionsBeforeElement?: ReactNode;
-    /** The elements rendered in the modal */
+    /**
+     * The elements rendered in the modal
+     */
     children?: ReactNode;
-    /** Where the dialog should appear, relative to the contents of the children. */
+    /**
+     * Where the dialog should appear, relative to the contents of the children.
+     */
     dialogPlacement?: 'top left' | 'top center' | 'top right' | 'right top' | 'right middle' | 'right bottom' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left middle' | 'left bottom';
-    /** The width of the dialog in pixels. Min 160 - Max 600 */
+    /**
+     * The width of the dialog in pixels. Min 160 - Max 600
+     */
     dialogWidth: number;
-    /** Optional element rendered below the body */
+    /**
+     * Optional element rendered below the body
+     */
     footer?: ComponentType<any>;
-    /** Optional element rendered above the body */
+    /**
+     * Optional element rendered above the body
+     */
     header?: ComponentType<any>;
-    /** Heading text rendered above the body */
+    /**
+     * Heading text rendered above the body
+     */
     heading?: string;
-    /** An optional element rendered to the right of the heading */
+    /**
+     * An optional element rendered to the right of the heading
+     */
     headingAfterElement?: ReactNode;
-    /** Path to the the your image */
+    /**
+     * Path to the  image
+     */
     image?: string;
-    /** The spotlight target node */
+    /**
+     * The spotlight target node
+     */
     targetNode: HTMLElement;
-    /** js object containing the animation styles to apply to component */
+    /**
+     * js object containing the animation styles to apply to component
+     */
     animationStyles: Object;
     /**
      * A `testId` prop is provided for specified elements,
@@ -33,5 +57,5 @@ export interface SpotlightDialogProps extends WithAnalyticsEventsProps {
      */
     testId?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<SpotlightDialogProps, "footer" | "header" | "image" | "children" | "testId" | "actions" | "heading" | "targetNode" | "actionsBeforeElement" | "headingAfterElement" | "dialogPlacement" | "dialogWidth" | "animationStyles"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "footer" | "header" | "image" | "children" | "testId" | "analyticsContext" | "actions" | "heading" | "key" | "targetNode" | "actionsBeforeElement" | "headingAfterElement" | "dialogPlacement" | "dialogWidth" | "animationStyles"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<SpotlightDialogProps, "children" | "footer" | "header" | "image" | "testId" | "actions" | "heading" | "targetNode" | "actionsBeforeElement" | "headingAfterElement" | "dialogPlacement" | "dialogWidth" | "animationStyles"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "footer" | "header" | "image" | "testId" | "analyticsContext" | "actions" | "heading" | "key" | "targetNode" | "actionsBeforeElement" | "headingAfterElement" | "dialogPlacement" | "dialogWidth" | "animationStyles"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { ElementBoundingBox } from '../utils/use-element-box';
+import { SpotlightProps } from './spotlight';
+export interface SpotlightInnerProps extends SpotlightProps {
+    /**
+     * The spotlight target dom element
+     */
+    targetNode: HTMLElement;
+    /**
+     * Called when the component has been mounted
+     */
+    onOpened: () => any;
+    /**
+     * Called when the component has been unmounted
+     */
+    onClosed: () => any;
+    /**
+     * Whether or not to display a pulse animation around the spotlighted element.
+     *
+     * Same as `SpotlightProps` but required instead of optional.
+     */
+    pulse: boolean;
+    /**
+     * The width of the dialog in pixels. Min 160 - Max 600.
+     *
+     * Same as `SpotlightProps` but required instead of optional.
+     */
+    dialogWidth: number;
+}
+interface State {
+    replacementElement: HTMLElement | null;
+}
+/**
+ * __Spotlight inner__
+ *
+ * Renders the spotlight target clone and dialog.
+ *
+ * @internal
+ */
+declare class SpotlightInner extends React.Component<SpotlightInnerProps, State> {
+    static defaultProps: {
+        dialogWidth: number;
+        pulse: boolean;
+    };
+    state: {
+        replacementElement: null;
+    };
+    componentDidUpdate(prevProps: SpotlightInnerProps): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    getTargetNodeStyle: (box: ElementBoundingBox) => {};
+    render(): JSX.Element;
+}
+export default SpotlightInner;

package/dist/types/components/{SpotlightManager.d.ts → spotlight-manager.d.ts}

@@ -16,13 +16,29 @@ declare const SpotlightStateConsumer: React.Consumer<{
 }>;
 export { TargetConsumer };
 export { SpotlightContext, SpotlightStateConsumer as SpotlightConsumer };
-interface Props {
-    /** Boolean prop for toggling blanket transparency  */
+interface SpotlightManagerProps {
+    /**
+     * Boolean prop for toggling blanket transparency
+     */
     blanketIsTinted?: boolean;
+    /**
+     * Typically the app, or a section of the app
+     */
     children: ReactNode;
+    /**
+     * @deprecated
+     * Replaces the wrapping fragment with component
+     */
     component?: ElementType;
 }
-export default class SpotlightManager extends PureComponent<Props, {
+/**
+ * __Spotlight manager__
+ *
+ * Wraps usage of spotlight and manages progression through multiple spotlights.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+export default class SpotlightManager extends PureComponent<SpotlightManagerProps, {
     spotlightCount: number;
     targets: {
         [key: string]: HTMLElement | void;
@@ -39,10 +55,10 @@ export default class SpotlightManager extends PureComponent<Props, {
     targetRef: (name: string) => (element: HTMLElement | void) => void;
     spotlightOpen: () => void;
     spotlightClose: () => void;
-    getStateProviderValue: (this: any, targets: any) => {
+    getStateProviderValue: import("memoize-one").MemoizedFn<(this: any, targets: any) => {
         opened: () => void;
         closed: () => void;
         targets: any;
-    };
+    }>;
     render(): JSX.Element;
 }

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

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+interface SpotlightTargetProps {
+    /**
+     * A single child
+     */
+    children: ReactNode;
+    /**
+     * The name to reference from Spotlight
+     */
+    name: string;
+}
+/**
+ * __Spotlight target__
+ *
+ * Wraps an element, allowing it to be targeted by a spotlight.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+declare const SpotlightTarget: React.FC<SpotlightTargetProps>;
+export default SpotlightTarget;

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

@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react';
+interface SpotlightTransitionProps {
+    /**
+     * Children that are conditionally rendered. The transition happens based
+     * on the existence or non-existence of children.
+     */
+    children?: ReactNode;
+}
+interface State {
+    currentChildren: ReactNode;
+}
+interface SpotlightTransitionContextModel {
+    isOpen: boolean;
+    onExited: () => void;
+}
+/**
+ * __Spotlight transition__
+ *
+ * Provides context used for fading animations.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+declare class SpotlightTransition extends React.Component<SpotlightTransitionProps, State> {
+    static getDerivedStateFromProps(props: SpotlightTransitionProps, state: State): {
+        currentChildren: {} | null | undefined;
+    };
+    state: {
+        currentChildren: undefined;
+    };
+    onExited: () => void;
+    render(): JSX.Element;
+}
+/**
+ * __Spotlight transition consumer__
+ *
+ * Used to consume the spotlight transition context through render props.
+ *
+ * @internal
+ */
+export declare const SpotlightTransitionConsumer: React.Consumer<SpotlightTransitionContextModel>;
+export default SpotlightTransition;