@atlaskit/onboarding 10.8.1 → 10.8.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/onboarding
 
+## 10.8.3
+
+### Patch Changes
+
+- [`e7ea6832ad2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7ea6832ad2) - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.
+
+## 10.8.2
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
 ## 10.8.1
 
 ### Patch Changes

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _react2 = require("@emotion/react");
 var _customThemeButton = _interopRequireWildcard(require("@atlaskit/button/custom-theme-button"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));

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

@@ -27,7 +27,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 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.8.1";
+var packageVersion = "10.8.3";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/cjs/styled/dialog.js

@@ -35,10 +35,13 @@ var actionItemStyles = (0, _react.css)({
 var DialogImage = function DialogImage(_ref) {
   var alt = _ref.alt,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)("img", (0, _extends2.default)({
-    css: imageStyles,
-    alt: alt
-  }, props));
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _react.jsx)("img", (0, _extends2.default)({
+      css: imageStyles,
+      alt: alt
+    }, props))
+  );
 };
 
 /**

package/dist/cjs/version.json

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

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Heading from '@atlaskit/heading';

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.8.1";
+const packageVersion = "10.8.3";
 class SpotlightDialog extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/styled/dialog.js

@@ -27,7 +27,9 @@ const actionItemStyles = css({
 export const DialogImage = ({
   alt,
   ...props
-}) => jsx("img", _extends({
+}) =>
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx("img", _extends({
   css: imageStyles,
   alt: alt
 }, props));

package/dist/es2019/version.json

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

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

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["text", "key"];
 /** @jsx jsx */
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Heading from '@atlaskit/heading';

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

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

package/dist/esm/styled/dialog.js

@@ -29,10 +29,13 @@ var actionItemStyles = css({
 export var DialogImage = function DialogImage(_ref) {
   var alt = _ref.alt,
     props = _objectWithoutProperties(_ref, _excluded);
-  return jsx("img", _extends({
-    css: imageStyles,
-    alt: alt
-  }, props));
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx("img", _extends({
+      css: imageStyles,
+      alt: alt
+    }, props))
+  );
 };
 
 /**

package/dist/esm/version.json

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

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { ComponentType, ReactNode, Ref } from 'react';
+import { ComponentType, ReactNode, Ref } from 'react';
 import { ThemeProp } from '@atlaskit/theme/components';
 import { Actions } from '../types';
 /**
@@ -77,5 +77,5 @@ interface SpotlightCardProps {
  * - [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>>;
+declare const SpotlightCard: import("react").ForwardRefExoticComponent<SpotlightCardProps & import("react").RefAttributes<HTMLDivElement>>;
 export default SpotlightCard;

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 interface SpotlightTargetProps {
     /**
      * A single child
@@ -18,5 +18,5 @@ interface SpotlightTargetProps {
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-declare const SpotlightTarget: React.FC<SpotlightTargetProps>;
+declare const SpotlightTarget: ({ children, name }: SpotlightTargetProps) => JSX.Element;
 export default SpotlightTarget;

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

@@ -1,4 +1,4 @@
-import React, { ComponentType, MouseEvent, ReactNode } from 'react';
+import { ComponentType, MouseEvent, ReactNode } from 'react';
 import { Actions } from '../types';
 export interface SpotlightProps {
     /**
@@ -92,5 +92,5 @@ export interface SpotlightProps {
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-declare const Spotlight: React.FC<SpotlightProps>;
+declare const Spotlight: ({ dialogWidth, pulse, testId, targetNode, target, ...rest }: SpotlightProps) => JSX.Element;
 export default Spotlight;

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

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 type BlanketProps = {
     isTinted?: boolean;
     style?: React.CSSProperties;
@@ -14,5 +16,5 @@ type BlanketProps = {
  *
  * @internal
  */
-declare const Blanket: React.FC<BlanketProps>;
+declare const Blanket: (props: BlanketProps) => jsx.JSX.Element;
 export default Blanket;

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 /**
  * __Dialog image__
  *
@@ -7,7 +8,7 @@ import { ReactNode } from 'react';
  *
  * @internal
  */
-export declare const DialogImage: React.FC<React.ImgHTMLAttributes<HTMLImageElement>>;
+export declare const DialogImage: ({ alt, ...props }: ImgHTMLAttributes<HTMLImageElement>) => jsx.JSX.Element;
 /**
  * __Dialog action item container__
  *
@@ -15,9 +16,9 @@ export declare const DialogImage: React.FC<React.ImgHTMLAttributes<HTMLImageElem
  *
  * @internal
  */
-export declare const DialogActionItemContainer: React.FC<{
+export declare const DialogActionItemContainer: ({ children, }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 /**
  * __Dialog action item__
  *
@@ -25,6 +26,6 @@ export declare const DialogActionItemContainer: React.FC<{
  *
  * @internal
  */
-export declare const DialogActionItem: React.FC<{
+export declare const DialogActionItem: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;

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

@@ -1,44 +1,48 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+type ModalImageProps = {
+    alt: string;
+    src?: string;
+};
+type ModalActionContainerProps = {
+    shouldReverseButtonOrder: boolean;
+    children: ReactNode;
+};
 /**
  * __Modal body__
  *
  * @internal
  */
-export declare const ModalBody: React.FC<{
+export declare const ModalBody: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
 /**
  * __Modal heading__
  *
  * @internal
  */
-export declare const ModalHeading: React.FC<{
-    children: string;
-}>;
+export declare const ModalHeading: ({ children }: {
+    children: ReactNode;
+}) => jsx.JSX.Element;
 /**
  * __Modal image__
  *
  * @internal
  */
-export declare const ModalImage: React.FC<{
-    alt: string;
-    src?: string;
-}>;
+export declare const ModalImage: ({ alt, src }: ModalImageProps) => jsx.JSX.Element;
 /**
  * __Modal action container__
  *
  * @internal
  */
-export declare const ModalActionContainer: React.FC<{
-    shouldReverseButtonOrder: boolean;
-    children: ReactNode;
-}>;
+export declare const ModalActionContainer: ({ children, shouldReverseButtonOrder, }: ModalActionContainerProps) => jsx.JSX.Element;
 /**
  * __Modal action item__
  *
  * @internal
  */
-export declare const ModalActionItem: React.FC<{
+export declare const ModalActionItem: ({ children }: {
     children: ReactNode;
-}>;
+}) => jsx.JSX.Element;
+export {};

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
 type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
     bgColor?: string;
     radius?: number;
@@ -19,7 +20,7 @@ export declare const pulseKeyframesName: string;
  *
  * @internal
  */
-export declare const TargetInner: React.FC<TargetProps>;
+export declare const TargetInner: ({ children, pulse, ...props }: TargetProps) => jsx.JSX.Element;
 /**
  * __Target overlay__
  *
@@ -28,7 +29,7 @@ export declare const TargetInner: React.FC<TargetProps>;
  *
  * @internal
  */
-export declare const TargetOverlay: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export declare const TargetOverlay: (props: HTMLAttributes<HTMLDivElement>) => jsx.JSX.Element;
 /**
  * __Spotlight pulse__
  *
@@ -38,5 +39,5 @@ export declare const TargetOverlay: React.FC<React.HTMLAttributes<HTMLDivElement
  * - [Code](https://atlassian.design/components/onboarding/code)
  * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
-export declare const Pulse: React.FC<TargetProps>;
+export declare const Pulse: ({ children, pulse, testId, ...props }: TargetProps) => jsx.JSX.Element;
 export {};

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

@@ -0,0 +1,50 @@
+/** @jsx jsx */
+import { Component, ElementType, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+import { ModalFooterProps as FooterComponentProps, ModalHeaderProps as HeaderComponentProps } from '@atlaskit/modal-dialog';
+import { Actions } from '../types';
+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.JSX.Element);
+    footerComponent: (props: ModalProps) => ElementType<FooterComponentProps> | (() => jsx.JSX.Element | null);
+    render(): jsx.JSX.Element;
+}
+export {};

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

@@ -0,0 +1,81 @@
+/** @jsx jsx */
+import { 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: import("react").ForwardRefExoticComponent<SpotlightCardProps & import("react").RefAttributes<HTMLDivElement>>;
+export default SpotlightCard;

package/dist/types-ts4.5/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" | "key" | "testId" | "analyticsContext" | "actions" | "heading" | "targetNode" | "actionsBeforeElement" | "headingAfterElement" | "dialogPlacement" | "dialogWidth" | "animationStyles"> & React.RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,22 @@
+import { 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: ({ children, name }: SpotlightTargetProps) => JSX.Element;
+export default SpotlightTarget;

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

@@ -0,0 +1,96 @@
+import { 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: ({ dialogWidth, pulse, testId, targetNode, target, ...rest }: SpotlightProps) => JSX.Element;
+export default Spotlight;

package/dist/types-ts4.5/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.5/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.5/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.5/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.5/styled/blanket.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+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: (props: BlanketProps) => jsx.JSX.Element;
+export default Blanket;

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

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+/**
+ * __Dialog image__
+ *
+ * An optional header image in spotlight dialogs.
+ *
+ * @internal
+ */
+export declare const DialogImage: ({ alt, ...props }: ImgHTMLAttributes<HTMLImageElement>) => jsx.JSX.Element;
+/**
+ * __Dialog action item container__
+ *
+ * Flex wrapper around dialog action items.
+ *
+ * @internal
+ */
+export declare const DialogActionItemContainer: ({ children, }: {
+    children: ReactNode;
+}) => jsx.JSX.Element;
+/**
+ * __Dialog action item__
+ *
+ * Action items shown inside of the dialog.
+ *
+ * @internal
+ */
+export declare const DialogActionItem: ({ children }: {
+    children: ReactNode;
+}) => jsx.JSX.Element;

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

@@ -0,0 +1,48 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+type ModalImageProps = {
+    alt: string;
+    src?: string;
+};
+type ModalActionContainerProps = {
+    shouldReverseButtonOrder: boolean;
+    children: ReactNode;
+};
+/**
+ * __Modal body__
+ *
+ * @internal
+ */
+export declare const ModalBody: ({ children }: {
+    children: ReactNode;
+}) => jsx.JSX.Element;
+/**
+ * __Modal heading__
+ *
+ * @internal
+ */
+export declare const ModalHeading: ({ children }: {
+    children: ReactNode;
+}) => jsx.JSX.Element;
+/**
+ * __Modal image__
+ *
+ * @internal
+ */
+export declare const ModalImage: ({ alt, src }: ModalImageProps) => jsx.JSX.Element;
+/**
+ * __Modal action container__
+ *
+ * @internal
+ */
+export declare const ModalActionContainer: ({ children, shouldReverseButtonOrder, }: ModalActionContainerProps) => jsx.JSX.Element;
+/**
+ * __Modal action item__
+ *
+ * @internal
+ */
+export declare const ModalActionItem: ({ children }: {
+    children: ReactNode;
+}) => jsx.JSX.Element;
+export {};

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

@@ -0,0 +1,43 @@
+/** @jsx jsx */
+import { HTMLAttributes, ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
+    bgColor?: string;
+    radius?: number;
+    className?: string;
+    testId?: string;
+    children?: ReactNode;
+};
+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: ({ children, pulse, ...props }: TargetProps) => jsx.JSX.Element;
+/**
+ * __Target overlay__
+ *
+ * Overlays a spotlight target, allowing for custom click events that are intended
+ * only for onboarding.
+ *
+ * @internal
+ */
+export declare const TargetOverlay: (props: HTMLAttributes<HTMLDivElement>) => jsx.JSX.Element;
+/**
+ * __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: ({ children, pulse, testId, ...props }: TargetProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/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 type Actions = Action[];
+export {};

package/dist/types-ts4.5/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.8.1",
+  "version": "10.8.3",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.3.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -62,7 +62,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/progress-indicator": "^9.5.0",
-    "@atlaskit/select": "^16.2.0",
+    "@atlaskit/select": "^16.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",