@atlaskit/onboarding 10.6.1 → 10.6.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/onboarding
 
+## 10.6.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.6.1
 
 ### 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.6.1";
+var packageVersion = "10.6.2";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.6.1",
+	"version": "10.6.2",
 	"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.6.1";
+const packageVersion = "10.6.2";
 
 class SpotlightDialog extends Component {
   constructor(...args) {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.6.1",
+	"version": "10.6.2",
 	"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.6.1";
+var packageVersion = "10.6.2";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.6.1",
+  "version": "10.6.2",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "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/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/onboarding/",
@@ -35,9 +27,9 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/heading": "^0.1.14",
+    "@atlaskit/heading": "^1.0.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.0.0",

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/onboarding".
+## API Report File for "@atlaskit/onboarding"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+<!--
+	Generated API Report version: 2.0
+-->
 
 [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
@@ -23,192 +27,101 @@ import { ReactNode } from 'react';
 import { Ref } from 'react';
 import { ThemeProp } from '@atlaskit/theme/components';
 
-declare interface Action extends Omit<CustomThemeButtonProps, 'children'> {
+// @public (undocumented)
+interface Action extends Omit<CustomThemeButtonProps, 'children'> {
+  // (undocumented)
   key?: string;
+  // (undocumented)
   text?: ReactNode;
 }
 
-declare type Actions = Action[];
+// @public (undocumented)
+type Actions = Action[];
 
-declare type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
+// @public (undocumented)
+type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
   bgColor?: string;
   radius?: number;
   className?: string;
   testId?: string;
 };
 
-/**
- * @deprecated
- */
-declare interface CardTokens {
-  /**
-   * @deprecated
-   */
+// @public @deprecated (undocumented)
+interface CardTokens {
+  // @deprecated (undocumented)
   container: Record<string, string | undefined>;
 }
 
-/**
- * __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 declare class Modal extends Component<ModalProps> {
-  headerComponent: (
-    props: ModalProps,
-  ) => ElementType<ModalHeaderProps> | (() => jsx.JSX.Element);
+// @public
+export class Modal extends Component<ModalProps> {
+  // (undocumented)
   footerComponent: (
     props: ModalProps,
   ) => ElementType<ModalFooterProps> | (() => jsx.JSX.Element | null);
+  // (undocumented)
+  headerComponent: (
+    props: ModalProps,
+  ) => ElementType<ModalHeaderProps> | (() => jsx.JSX.Element);
+  // (undocumented)
   render(): jsx.JSX.Element;
 }
 
-/**
- * @deprecated
- * Custom button themes are deprecated and will be removed in the future.
- */
-export declare const modalButtonTheme: (
+// @public @deprecated (undocumented)
+export const modalButtonTheme: (
   current: any,
   themeProps: Record<string, any>,
 ) => any;
 
-declare type ModalProps = {
-  /**
-   * Buttons to render in the footer
-   */
+// @public (undocumented)
+type ModalProps = {
   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<ModalHeaderProps>;
-  /**
-   * Optional element rendered below the body
-   */
   footer?: ElementType<ModalFooterProps>;
-  /**
-   * 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;
 };
 
 export { ModalTransition };
 
-/**
- * __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)
- */
-export declare const Spotlight: React_2.FC<SpotlightProps>;
+// @public
+export const Spotlight: React_2.FC<SpotlightProps>;
 
-/**
- * @deprecated
- * Custom button themes are deprecated and will be removed in the future.
- */
-export declare const spotlightButtonTheme: (
+// @public @deprecated (undocumented)
+export const spotlightButtonTheme: (
   current: any,
   themeProps: Record<string, any>,
 ) => any;
 
-/**
- * __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)
- */
-export declare const SpotlightCard: React_2.ForwardRefExoticComponent<
+// @public
+export const SpotlightCard: React_2.ForwardRefExoticComponent<
   SpotlightCardProps & React_2.RefAttributes<HTMLDivElement>
 >;
 
-declare interface SpotlightCardProps {
-  /**
-   * Buttons to render in the footer
-   */
+// @public (undocumented)
+interface SpotlightCardProps {
   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
-   */
+  // @deprecated (undocumented)
+  innerRef?: Ref<HTMLDivElement> | null;
   isFlat?: boolean;
-  /**
-   * @deprecated
-   * Theme prop is deprecated and will be removed in the future.
-   */
+  testId?: string;
+  // @deprecated (undocumented)
   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 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 declare class SpotlightManager extends PureComponent<
+// @public
+export class SpotlightManager extends PureComponent<
   SpotlightManagerProps,
   {
     spotlightCount: number;
@@ -217,17 +130,13 @@ export declare class SpotlightManager extends PureComponent<
     };
   }
 > {
+  // (undocumented)
+  componentDidMount(): void;
+  // (undocumented)
   static defaultProps: {
     blanketIsTinted: boolean;
   };
-  componentDidMount(): void;
-  state: {
-    spotlightCount: number;
-    targets: {};
-  };
-  targetRef: (name: string) => (element: HTMLElement | void) => void;
-  spotlightOpen: () => void;
-  spotlightClose: () => void;
+  // (undocumented)
   getStateProviderValue: MemoizedFn<
     (
       this: any,
@@ -238,41 +147,34 @@ export declare class SpotlightManager extends PureComponent<
       targets: any;
     }
   >;
+  // (undocumented)
   render(): JSX.Element;
+  // (undocumented)
+  spotlightClose: () => void;
+  // (undocumented)
+  spotlightOpen: () => void;
+  // (undocumented)
+  state: {
+    spotlightCount: number;
+    targets: {};
+  };
+  // (undocumented)
+  targetRef: (name: string) => (element: HTMLElement | void) => void;
 }
 
-declare interface SpotlightManagerProps {
-  /**
-   * Boolean prop for toggling blanket transparency
-   */
+// @public (undocumented)
+interface SpotlightManagerProps {
   blanketIsTinted?: boolean;
-  /**
-   * Typically the app, or a section of the app
-   */
   children: ReactNode;
-  /**
-   * @deprecated
-   * Component is deprecated and will be removed in the future.
-   */
+  // @deprecated (undocumented)
   component?: ElementType;
 }
 
-declare interface SpotlightProps {
-  /**
-   * Buttons to render in the footer
-   */
+// @public (undocumented)
+interface SpotlightProps {
   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'
@@ -286,155 +188,80 @@ declare interface SpotlightProps {
     | '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
-   */
+  targetNode?: HTMLElement;
   targetOnClick?: (eventData: {
     event: MouseEvent_2<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 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 SpotlightPulse: React.FC<TargetProps>;
+// @public
+export const SpotlightPulse: React.FC<TargetProps>;
 
-/**
- * __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)
- */
-export declare const SpotlightTarget: React_2.FC<SpotlightTargetProps>;
+// @public
+export const SpotlightTarget: React_2.FC<SpotlightTargetProps>;
 
-declare interface SpotlightTargetProps {
-  /**
-   * A single child
-   */
+// @public (undocumented)
+interface SpotlightTargetProps {
   children: ReactNode;
-  /**
-   * The name to reference from Spotlight
-   */
   name: string;
 }
 
-/**
- * __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)
- */
-export declare class SpotlightTransition extends React_2.Component<
+// @public
+export class SpotlightTransition extends React_2.Component<
   SpotlightTransitionProps,
   State
 > {
+  // (undocumented)
   static getDerivedStateFromProps(
     props: SpotlightTransitionProps,
     state: State,
   ): {
     currentChildren: React_2.ReactNode;
   };
+  // (undocumented)
+  onExited: () => void;
+  // (undocumented)
+  render(): JSX.Element;
+  // (undocumented)
   state: {
     currentChildren: undefined;
   };
-  onExited: () => void;
-  render(): JSX.Element;
 }
 
-declare interface SpotlightTransitionProps {
-  /**
-   * Children that are conditionally rendered. The transition happens based
-   * on the existence or non-existence of children.
-   */
+// @public (undocumented)
+interface SpotlightTransitionProps {
   children?: ReactNode;
 }
 
-declare interface State {
+// @public (undocumented)
+interface State {
+  // (undocumented)
   currentChildren: ReactNode;
 }
 
-declare type TargetProps = Omit<BaseProps, 'css'> & {
+// @public (undocumented)
+type TargetProps = Omit<BaseProps, 'css'> & {
   pulse?: boolean;
   testId?: string;
 };
 
-/**
- * Use spotlight hook returns information about available spotlight targets.
- */
-export declare function useSpotlight(): {
+// @public
+export function useSpotlight(): {
   isTargetRendered: (target: string) => boolean;
 };
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```

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

@@ -1,15 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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, };