@atlaskit/onboarding 10.5.3 → 10.6.0

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.3",
+  "version": "10.6.0",
   "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,13 +36,13 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/heading": "^0.1.14",
-    "@atlaskit/modal-dialog": "^12.3.0",
+    "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
     "exenv": "^1.2.2",
     "memoize-one": "^6.0.0",
@@ -50,9 +57,9 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^21.0.0",
+    "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/progress-indicator": "^9.3.0",
     "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
@@ -60,11 +67,11 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^1.1.0",
+    "@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/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/onboarding"
+## API Report File for "@atlaskit/onboarding".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
@@ -9,6 +11,7 @@ import { Component } from 'react';
 import { ComponentType } from 'react';
 import { CustomThemeButtonProps } from '@atlaskit/button/types';
 import { ElementType } from 'react';
+import { jsx } from '@emotion/react';
 import { MemoizedFn } from 'memoize-one';
 import { ModalFooterProps } from '@atlaskit/modal-dialog';
 import { ModalHeaderProps } from '@atlaskit/modal-dialog';
@@ -34,28 +37,39 @@ declare type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
   testId?: string;
 };
 
+/**
+ * @deprecated
+ */
 declare interface CardTokens {
+  /**
+   * @deprecated
+   */
   container: Record<string, string | undefined>;
 }
 
 /**
- * __Onboarding modal__
+ * __Benefits modal__
  *
- * If the product change is large enough,
- * this component can be used to outline the benefits of the change to the user.
+ * A benefits modal explains the benefits of a significant new feature or experience change.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [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.Element);
+  ) => ElementType<ModalHeaderProps> | (() => jsx.JSX.Element);
   footerComponent: (
     props: ModalProps,
-  ) => ElementType<ModalFooterProps> | (() => JSX.Element | null);
-  render(): JSX.Element;
+  ) => ElementType<ModalFooterProps> | (() => jsx.JSX.Element | null);
+  render(): jsx.JSX.Element;
 }
 
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
 export declare const modalButtonTheme: (
   current: any,
   themeProps: Record<string, any>,
@@ -97,21 +111,34 @@ export { ModalTransition };
 /**
  * __Spotlight__
  *
- * A spotlight gives visual focus to an element and is paired with a dialog.
+ * An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
  *
- * Spotlights are used for onboarding and can be connected to create a tour.
- *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [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>;
 
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
 export declare 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<
-  SpotlightCardProps & React_2.RefAttributes<HTMLElement>
+  SpotlightCardProps & React_2.RefAttributes<HTMLDivElement>
 >;
 
 declare interface SpotlightCardProps {
@@ -151,14 +178,19 @@ declare interface SpotlightCardProps {
    */
   isFlat?: boolean;
   /**
-   * The theme of the card
+   * @deprecated
+   * Theme prop is deprecated and will be removed in the future.
    */
   theme?: ThemeProp<CardTokens, {}>;
   /**
-   * Width of the card in pixels
+   * Width of the card in pixels.
    */
   width?: number;
-  innerRef?: Ref<HTMLElement> | null;
+  /**
+   * @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,
@@ -170,9 +202,11 @@ declare interface SpotlightCardProps {
 /**
  * __Spotlight manager__
  *
- * Wraps usage of spotlight and manages progression through multiple spotlights.
+ * A spotlight manager manages the visibility of spotlights used to introduce new features to users through focused messages or multi-step tours.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [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<
   SpotlightManagerProps,
@@ -218,7 +252,7 @@ declare interface SpotlightManagerProps {
   children: ReactNode;
   /**
    * @deprecated
-   * Replaces the wrapping fragment with component
+   * Component is deprecated and will be removed in the future.
    */
   component?: ElementType;
 }
@@ -320,20 +354,24 @@ declare interface SpotlightProps {
 }
 
 /**
- * __Pulse__
+ * __Spotlight pulse__
  *
- * Allows consumers to apply the spotlight pulse effect in a custom way.
+ * A spotlight pulse draws attention to a new feature.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [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>;
 
 /**
  * __Spotlight target__
  *
- * Wraps an element, allowing it to be targeted by a spotlight.
+ * A spotlight target marks a component to be used for introducing new features to users through focused messages or multi-step tours.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [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>;
 
@@ -351,9 +389,11 @@ declare interface SpotlightTargetProps {
 /**
  * __Spotlight transition__
  *
- * Provides context used for fading animations.
+ * A spotlight transition holds onto spotlights so they can fade out when exiting the viewport.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [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<
   SpotlightTransitionProps,
@@ -390,13 +430,7 @@ declare type TargetProps = Omit<BaseProps, 'css'> & {
 };
 
 /**
- * Enables advanced usage of spotlights.
- *
- * Provides the following methods:
- * - `isTargetRendered`
- *
- *    Checks if the given spotlight target is currently
- *    being rendered.
+ * Use spotlight hook returns information about available spotlight targets.
  */
 export declare function useSpotlight(): {
   isTargetRendered: (target: string) => boolean;

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"
+      ]
+    }
+  }
 }