@atlaskit/onboarding 10.5.3 → 10.6.0

package/dist/esm/version.json

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

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

@@ -1,5 +1,6 @@
 /** @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';
 declare type ModalProps = {
@@ -42,8 +43,8 @@ declare type ModalProps = {
  * - [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;
+    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/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" | "key" | "testId" | "analyticsContext" | "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,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';
+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.JSX.Element);
+    footerComponent: (props: ModalProps) => ElementType<FooterComponentProps> | (() => jsx.JSX.Element | null);
+    render(): jsx.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" | "key" | "testId" | "analyticsContext" | "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;