@atlaskit/onboarding 10.5.2 → 10.5.4

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/onboarding
 
+## 10.5.4
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
+## 10.5.3
+
+### Patch Changes
+
+- [`7ca0e5a0c31`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7ca0e5a0c31) - Update "subtle" action in Onboarding component to use correct tokens
+- [`0e5102ee5ab`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0e5102ee5ab) - Update "subtle-link" action in Onboarding component to use correct tokens
+
 ## 10.5.2
 
 ### Patch Changes

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

@@ -50,7 +50,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.5.2";
+var packageVersion = "10.5.4";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);

package/dist/cjs/components/theme.js

@@ -59,8 +59,8 @@ var spotlightTheme = {
   subtle: {
     background: {
       default: 'none',
-      hover: "var(--ds-background-neutral-hovered, ".concat(colors.P200, ")"),
-      active: "var(--ds-background-neutral-pressed, ".concat(colors.P500, ")"),
+      hover: "var(--ds-background-inverse-subtle-hovered, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.P500, ")"),
       disabled: 'none',
       selected: {
         light: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
@@ -88,7 +88,7 @@ var spotlightTheme = {
   },
   'subtle-link': {
     textDecoration: {
-      hover: "underline ".concat("var(--ds-text-discovery, ".concat(colors.P75, ")"))
+      hover: "underline ".concat("var(--ds-text-inverse, ".concat(colors.P75, ")"))
     },
     textDecorationLine: {
       active: 'none'

package/dist/cjs/version.json

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

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

@@ -7,7 +7,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "10.5.2";
+const packageVersion = "10.5.4";
 
 class SpotlightDialog extends Component {
   constructor(...args) {

package/dist/es2019/components/theme.js

@@ -30,8 +30,8 @@ const spotlightTheme = {
   subtle: {
     background: {
       default: 'none',
-      hover: `var(--ds-background-neutral-hovered, ${colors.P200})`,
-      active: `var(--ds-background-neutral-pressed, ${colors.P500})`,
+      hover: `var(--ds-background-inverse-subtle-hovered, ${colors.P200})`,
+      active: `var(--ds-background-inverse-subtle-pressed, ${colors.P500})`,
       disabled: 'none',
       selected: {
         light: `var(--ds-background-selected-hovered, ${colors.N700})`,
@@ -59,7 +59,7 @@ const spotlightTheme = {
   },
   'subtle-link': {
     textDecoration: {
-      hover: `underline ${`var(--ds-text-discovery, ${colors.P75})`}`
+      hover: `underline ${`var(--ds-text-inverse, ${colors.P75})`}`
     },
     textDecorationLine: {
       active: 'none'

package/dist/es2019/version.json

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

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

@@ -22,7 +22,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.5.2";
+var packageVersion = "10.5.4";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);

package/dist/esm/components/theme.js

@@ -40,8 +40,8 @@ var spotlightTheme = {
   subtle: {
     background: {
       default: 'none',
-      hover: "var(--ds-background-neutral-hovered, ".concat(colors.P200, ")"),
-      active: "var(--ds-background-neutral-pressed, ".concat(colors.P500, ")"),
+      hover: "var(--ds-background-inverse-subtle-hovered, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.P500, ")"),
       disabled: 'none',
       selected: {
         light: "var(--ds-background-selected-hovered, ".concat(colors.N700, ")"),
@@ -69,7 +69,7 @@ var spotlightTheme = {
   },
   'subtle-link': {
     textDecoration: {
-      hover: "underline ".concat("var(--ds-text-discovery, ".concat(colors.P75, ")"))
+      hover: "underline ".concat("var(--ds-text-inverse, ".concat(colors.P75, ")"))
     },
     textDecorationLine: {
       active: 'none'

package/dist/esm/version.json

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

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

@@ -57,5 +57,5 @@ export interface SpotlightDialogProps extends WithAnalyticsEventsProps {
      */
     testId?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<SpotlightDialogProps, keyof WithAnalyticsEventsProps> & 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>>;
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<SpotlightDialogProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "footer" | "header" | "image" | "testId" | "analyticsContext" | "key" | "actions" | "heading" | "targetNode" | "actionsBeforeElement" | "headingAfterElement" | "dialogPlacement" | "dialogWidth" | "animationStyles"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.0/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-ts4.0/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-ts4.0/components/index.d.ts

@@ -0,0 +1,9 @@
+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-ts4.0/components/modal.d.ts

@@ -0,0 +1,49 @@
+/** @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;
+};
+/**
+ * __Benefits modal__
+ *
+ * A benefits modal explains the benefits of a significant new feature or experience change.
+ *
+ * - [Examples](https://atlassian.design/components/onboarding/benefits-modal/examples)
+ * - [Code](https://atlassian.design/components/onboarding/benefits-modal/code)
+ * - [Usage](https://atlassian.design/components/onboarding/benefits-modal/usage)
+ */
+export default class BenefitsModal extends Component<ModalProps> {
+    headerComponent: (props: ModalProps) => ElementType<HeaderComponentProps> | (() => JSX.Element);
+    footerComponent: (props: ModalProps) => ElementType<FooterComponentProps> | (() => JSX.Element | null);
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,81 @@
+/** @jsx jsx */
+import React, { ComponentType, ReactNode, Ref } from 'react';
+import { ThemeProp } from '@atlaskit/theme/components';
+import { Actions } from '../types';
+/**
+ * @deprecated
+ */
+interface CardTokens {
+    /**
+     * @deprecated
+     */
+    container: Record<string, string | undefined>;
+}
+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;
+    /**
+     * @deprecated
+     * Theme prop is deprecated and will be removed in the future.
+     */
+    theme?: ThemeProp<CardTokens, {}>;
+    /**
+     * Width of the card in pixels.
+     */
+    width?: number;
+    /**
+     * @deprecated
+     * Use `ref` instead.
+     */
+    innerRef?: Ref<HTMLDivElement> | null;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+/**
+ * __Spotlight card__
+ *
+ * A spotlight card is for onboarding messages that need a more flexible layout, or don't require a dialog.
+ *
+ * - [Examples](https://atlassian.design/components/onboarding/spotlight-card/examples)
+ * - [Code](https://atlassian.design/components/onboarding/spotlight-card/code)
+ * - [Usage](https://atlassian.design/components/onboarding/spotlight-card/usage)
+ */
+declare const SpotlightCard: React.ForwardRefExoticComponent<SpotlightCardProps & React.RefAttributes<HTMLDivElement>>;
+export default SpotlightCard;

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

@@ -0,0 +1,61 @@
+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
+     */
+    actions?: Actions;
+    /**
+     * An optional element rendered beside the footer actions
+     */
+    actionsBeforeElement?: ReactNode;
+    /**
+     * The elements rendered in the modal
+     */
+    children?: ReactNode;
+    /**
+     * 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
+     */
+    dialogWidth: number;
+    /**
+     * Optional element rendered below the body
+     */
+    footer?: ComponentType<any>;
+    /**
+     * Optional element rendered above the body
+     */
+    header?: ComponentType<any>;
+    /**
+     * Heading text rendered above the body
+     */
+    heading?: string;
+    /**
+     * An optional element rendered to the right of the heading
+     */
+    headingAfterElement?: ReactNode;
+    /**
+     * Path to the  image
+     */
+    image?: string;
+    /**
+     * The spotlight target node
+     */
+    targetNode: HTMLElement;
+    /**
+     * js object containing the animation styles to apply to 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,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+}
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<SpotlightDialogProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "children" | "footer" | "header" | "image" | "testId" | "analyticsContext" | "key" | "actions" | "heading" | "targetNode" | "actionsBeforeElement" | "headingAfterElement" | "dialogPlacement" | "dialogWidth" | "animationStyles"> & React.RefAttributes<any>>;
+export default _default;

package/dist/types-ts4.0/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-ts4.0/components/spotlight-manager.d.ts

@@ -0,0 +1,66 @@
+import React, { ElementType, PureComponent, ReactNode } from 'react';
+declare const TargetConsumer: React.Consumer<any>;
+declare const SpotlightContext: React.Context<{
+    opened: () => void;
+    closed: () => void;
+    targets: {
+        [key: string]: HTMLElement | undefined;
+    };
+}>;
+declare const SpotlightStateConsumer: React.Consumer<{
+    opened: () => void;
+    closed: () => void;
+    targets: {
+        [key: string]: HTMLElement | undefined;
+    };
+}>;
+export { TargetConsumer };
+export { SpotlightContext, SpotlightStateConsumer as SpotlightConsumer };
+interface SpotlightManagerProps {
+    /**
+     * Boolean prop for toggling blanket transparency
+     */
+    blanketIsTinted?: boolean;
+    /**
+     * Typically the app, or a section of the app
+     */
+    children: ReactNode;
+    /**
+     * @deprecated
+     * Component is deprecated and will be removed in the future.
+     */
+    component?: ElementType;
+}
+/**
+ * __Spotlight manager__
+ *
+ * A spotlight manager manages the visibility of spotlights used to introduce new features to users through focused messages or multi-step tours.
+ *
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
+ */
+export default class SpotlightManager extends PureComponent<SpotlightManagerProps, {
+    spotlightCount: number;
+    targets: {
+        [key: string]: HTMLElement | void;
+    };
+}> {
+    static defaultProps: {
+        blanketIsTinted: boolean;
+    };
+    componentDidMount(): void;
+    state: {
+        spotlightCount: number;
+        targets: {};
+    };
+    targetRef: (name: string) => (element: HTMLElement | void) => void;
+    spotlightOpen: () => void;
+    spotlightClose: () => void;
+    getStateProviderValue: import("memoize-one").MemoizedFn<(this: any, targets: any) => {
+        opened: () => void;
+        closed: () => void;
+        targets: any;
+    }>;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+interface SpotlightTargetProps {
+    /**
+     * A single child
+     */
+    children: ReactNode;
+    /**
+     * The name to reference from Spotlight
+     */
+    name: string;
+}
+/**
+ * __Spotlight target__
+ *
+ * A spotlight target marks a component to be used for introducing new features to users through focused messages or multi-step tours.
+ *
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
+ */
+declare const SpotlightTarget: React.FC<SpotlightTargetProps>;
+export default SpotlightTarget;

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

@@ -0,0 +1,43 @@
+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__
+ *
+ * A spotlight transition holds onto spotlights so they can fade out when exiting the viewport.
+ *
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
+ */
+declare class SpotlightTransition extends React.Component<SpotlightTransitionProps, State> {
+    static getDerivedStateFromProps(props: SpotlightTransitionProps, state: State): {
+        currentChildren: React.ReactNode;
+    };
+    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;

package/dist/types-ts4.0/components/spotlight.d.ts

@@ -0,0 +1,96 @@
+import React, { ComponentType, MouseEvent, ReactNode } from 'react';
+import { Actions } from '../types';
+export interface SpotlightProps {
+    /**
+     * Buttons to render in the footer
+     */
+    actions?: Actions;
+    /**
+     * An optional node to be rendered beside the footer actions
+     */
+    actionsBeforeElement?: ReactNode;
+    /**
+     * The elements rendered in the modal
+     */
+    children?: ReactNode;
+    /**
+     * 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
+     */
+    dialogWidth?: number;
+    /**
+     * Optional element rendered below the body
+     */
+    footer?: ComponentType<any>;
+    /**
+     * Optional element rendered above the body
+     */
+    header?: ComponentType<any>;
+    /**
+     * Heading text rendered above the body
+     */
+    heading?: string;
+    /**
+     * An optional element rendered to the right of the heading
+     */
+    headingAfterElement?: ReactNode;
+    /**
+     * Path to the the your image
+     */
+    image?: string;
+    /**
+     * Whether or not to display a pulse animation around the spotlighted element
+     */
+    pulse?: boolean;
+    /**
+     * 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;
+    /**
+     * Alternative element to render than the wrapped target
+     */
+    targetReplacement?: ComponentType<any>;
+    /**
+      This prop is a unique string that appears as an attribute `data-testid` in the rendered HTML output serving as a hook for automated tests.
+      As this component is composed of multiple components we use this `testId` as a prefix:
+  
+      - `"${testId}--dialog"` to identify the spotlight dialog
+      - `"${testId}--target"` to identify the spotlight target clone
+  
+      Defaults to `"spotlight"`.
+     */
+    testId?: string;
+}
+/**
+ * __Spotlight__
+ *
+ * An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
+ *
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
+ */
+declare const Spotlight: React.FC<SpotlightProps>;
+export default Spotlight;

package/dist/types-ts4.0/components/theme.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
+export declare const spotlightButtonTheme: (current: any, themeProps: Record<string, any>) => any;
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
+export declare const modalButtonTheme: (current: any, themeProps: Record<string, any>) => any;

package/dist/types-ts4.0/components/use-spotlight.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Use spotlight hook returns information about available spotlight targets.
+ */
+export default function useSpotlight(): {
+    isTargetRendered: (target: string) => boolean;
+};

package/dist/types-ts4.0/components/value-changed.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+interface ValueChangedProps {
+    value: any;
+    onChange: Function;
+    children: ReactNode;
+}
+export default class ValueChanged extends React.Component<ValueChangedProps> {
+    componentDidUpdate(prevProps: ValueChangedProps): void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * We re-export this because products may have multiple versions of
+ * `@atlaskit/modal-dialog`.
+ *
+ * If a consumer uses the onboarding `Modal` with the `ModalTransition` from an
+ * incompatible version of `@atlaskit/modal-dialog`, then the modal can get
+ * stuck in an open state.
+ *
+ * See https://product-fabric.atlassian.net/browse/DSP-796 for more details
+ * and a reproduction.
+ */
+export { default as ModalTransition } from '@atlaskit/modal-dialog/modal-transition';
+export { Modal, Spotlight, SpotlightCard, SpotlightManager, SpotlightTarget, SpotlightTransition, modalButtonTheme, spotlightButtonTheme, useSpotlight, } from './components';
+export { Pulse as SpotlightPulse } from './styled/target';

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+declare type BlanketProps = {
+    isTinted?: boolean;
+    style?: React.CSSProperties;
+};
+/**
+ * __Blanket__
+ *
+ * A replacement for `@atlaskit/blanket`.
+ *
+ * We use this for spotlights instead of `@atlaskit/blanket`
+ * because spotlights must sit on top of other layered elements,
+ * such as modals, which have their own blankets.
+ *
+ * @internal
+ */
+declare const Blanket: React.FC<BlanketProps>;
+export default Blanket;

package/dist/types-ts4.0/styled/dialog.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+/**
+ * __Dialog image__
+ *
+ * An optional header image in spotlight dialogs.
+ *
+ * @internal
+ */
+export declare const DialogImage: React.FC<React.ImgHTMLAttributes<HTMLImageElement>>;
+/**
+ * __Dialog action item container__
+ *
+ * Flex wrapper around dialog action items.
+ *
+ * @internal
+ */
+export declare const DialogActionItemContainer: React.FC<{}>;
+/**
+ * __Dialog action item__
+ *
+ * Action items shown inside of the dialog.
+ *
+ * @internal
+ */
+export declare const DialogActionItem: React.FC<{}>;

package/dist/types-ts4.0/styled/modal.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+/**
+ * __Modal body__
+ *
+ * @internal
+ */
+export declare const ModalBody: React.FC<{}>;
+/**
+ * __Modal heading__
+ *
+ * @internal
+ */
+export declare const ModalHeading: React.FC<{}>;
+/**
+ * __Modal image__
+ *
+ * @internal
+ */
+export declare const ModalImage: React.FC<{
+    alt: string;
+    src?: string;
+}>;
+/**
+ * __Modal action container__
+ *
+ * @internal
+ */
+export declare const ModalActionContainer: React.FC<{
+    shouldReverseButtonOrder: boolean;
+}>;
+/**
+ * __Modal action item__
+ *
+ * @internal
+ */
+export declare const ModalActionItem: React.FC<{}>;

package/dist/types-ts4.0/styled/target.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+declare type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
+    bgColor?: string;
+    radius?: number;
+    className?: string;
+    testId?: string;
+};
+declare type TargetProps = Omit<BaseProps, 'css'> & {
+    pulse?: boolean;
+    testId?: string;
+};
+export declare const pulseKeyframesName: string;
+/**
+ * __Target inner__
+ *
+ * Used to apply spotlight border and pulse to spotlight targets.
+ *
+ * @internal
+ */
+export declare const TargetInner: React.FC<TargetProps>;
+/**
+ * __Target overlay__
+ *
+ * Overlays a spotlight target, allowing for custom click events that are intended
+ * only for onboarding.
+ *
+ * @internal
+ */
+export declare const TargetOverlay: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+/**
+ * __Spotlight pulse__
+ *
+ * A spotlight pulse draws attention to a new feature.
+ *
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
+ */
+export declare const Pulse: React.FC<TargetProps>;
+export {};

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { CustomThemeButtonProps } from '@atlaskit/button/types';
+interface Action extends Omit<CustomThemeButtonProps, 'children'> {
+    key?: string;
+    text?: ReactNode;
+}
+export declare type Actions = Action[];
+export {};

package/dist/types-ts4.0/utils/use-element-box.d.ts

@@ -0,0 +1,23 @@
+export interface ElementBoundingBox {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+}
+/**
+ * Will listen to the document resizing to see if an element has moved positions.
+ * Not using ResizeObserver because of IE11 support.
+ * @param element HTMLElement to watch when resizing.
+ */
+export declare const useElementBox: (element: HTMLElement) => ElementBoundingBox;
+/**
+ * __Element box__
+ *
+ * Allows consumption of `userElementBox` hook through render props.
+ *
+ * @internal
+ */
+export declare const ElementBox: (props: {
+    element: HTMLElement;
+    children: (box: ElementBoundingBox) => any;
+}) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.5.2",
+  "version": "10.5.4",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/onboarding/",
@@ -29,10 +36,10 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/heading": "^0.1.14",
-    "@atlaskit/modal-dialog": "^12.2.0",
+    "@atlaskit/modal-dialog": "^12.3.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.0.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
@@ -53,18 +60,18 @@
     "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/progress-indicator": "^9.2.0",
-    "@atlaskit/select": "^15.6.0",
+    "@atlaskit/progress-indicator": "^9.3.0",
+    "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/react": "^8.0.1",
-    "@testing-library/react-hooks": "^1.0.4",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "raf-stub": "^2.0.1",
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",
-    "typescript": "4.3.5"
+    "typescript": "4.5.5"
   },
   "techstack": {
     "@atlassian/frontend": {

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
   "sideEffects": false,
-  "types": "../dist/types/types.d.ts"
+  "types": "../dist/types/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/types.d.ts"
+      ]
+    }
+  }
 }