@atlaskit/onboarding 10.4.0 → 10.5.0

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

@@ -28,11 +28,13 @@ export declare const TargetInner: React.FC<TargetProps>;
  */
 export declare const TargetOverlay: React.FC<React.HTMLAttributes<HTMLDivElement>>;
 /**
- * __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 Pulse: React.FC<TargetProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.4.0",
+  "version": "10.5.0",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -20,12 +20,15 @@
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Onboarding (spotlight)"
+      "name": "Onboarding (spotlight)",
+      "category": "Components"
     }
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.3.0",
+    "@atlaskit/ds-lib": "^2.1.0",
+    "@atlaskit/heading": "^0.1.12",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.0.0",
@@ -33,6 +36,7 @@
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
+    "bind-event-listener": "^2.1.1",
     "exenv": "^1.2.2",
     "memoize-one": "^6.0.0",
     "react-focus-lock": "^2.5.2",
@@ -50,7 +54,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/progress-indicator": "^9.2.0",
-    "@atlaskit/select": "^15.3.0",
+    "@atlaskit/select": "^15.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -67,6 +71,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "analytics": "analytics-next",
       "theming": "tokens",
       "styling": [

package/report.api.md

@@ -0,0 +1,406 @@
+## API Report File for "@atlaskit/onboarding"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { Component } from 'react';
+import { ComponentType } from 'react';
+import { CustomThemeButtonProps } from '@atlaskit/button/types';
+import { ElementType } from 'react';
+import { MemoizedFn } from 'memoize-one';
+import { ModalFooterProps } from '@atlaskit/modal-dialog';
+import { ModalHeaderProps } from '@atlaskit/modal-dialog';
+import { default as ModalTransition } from '@atlaskit/modal-dialog/modal-transition';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { PureComponent } from 'react';
+import { default as React_2 } from 'react';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import { ThemeProp } from '@atlaskit/theme/components';
+
+declare interface Action extends Omit<CustomThemeButtonProps, 'children'> {
+  key?: string;
+  text?: ReactNode;
+}
+
+declare type Actions = Action[];
+
+declare type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
+  bgColor?: string;
+  radius?: number;
+  className?: string;
+  testId?: string;
+};
+
+declare interface CardTokens {
+  container: Record<string, string | undefined>;
+}
+
+/**
+ * __Onboarding modal__
+ *
+ * If the product change is large enough,
+ * this component can be used to outline the benefits of the change to the user.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+export declare class Modal extends Component<ModalProps> {
+  headerComponent: (
+    props: ModalProps,
+  ) => ElementType<ModalHeaderProps> | (() => JSX.Element);
+  footerComponent: (
+    props: ModalProps,
+  ) => ElementType<ModalFooterProps> | (() => JSX.Element | null);
+  render(): JSX.Element;
+}
+
+export declare const modalButtonTheme: (
+  current: any,
+  themeProps: Record<string, any>,
+) => any;
+
+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<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__
+ *
+ * A spotlight gives visual focus to an element and is paired with a dialog.
+ *
+ * Spotlights are used for onboarding and can be connected to create a tour.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+export declare const Spotlight: React_2.FC<SpotlightProps>;
+
+export declare const spotlightButtonTheme: (
+  current: any,
+  themeProps: Record<string, any>,
+) => any;
+
+export declare const SpotlightCard: React_2.ForwardRefExoticComponent<
+  SpotlightCardProps & React_2.RefAttributes<HTMLElement>
+>;
+
+declare 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;
+  /**
+   * The theme of the card
+   */
+  theme?: ThemeProp<CardTokens, {}>;
+  /**
+   * Width of the card in pixels
+   */
+  width?: number;
+  innerRef?: Ref<HTMLElement> | 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__
+ *
+ * Wraps usage of spotlight and manages progression through multiple spotlights.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+export declare 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: MemoizedFn<
+    (
+      this: any,
+      targets: any,
+    ) => {
+      opened: () => void;
+      closed: () => void;
+      targets: any;
+    }
+  >;
+  render(): JSX.Element;
+}
+
+declare interface SpotlightManagerProps {
+  /**
+   * Boolean prop for toggling blanket transparency
+   */
+  blanketIsTinted?: boolean;
+  /**
+   * Typically the app, or a section of the app
+   */
+  children: ReactNode;
+  /**
+   * @deprecated
+   * Replaces the wrapping fragment with component
+   */
+  component?: ElementType;
+}
+
+declare 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_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;
+}
+
+/**
+ * __Pulse__
+ *
+ * Allows consumers to apply the spotlight pulse effect in a custom way.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+export declare const SpotlightPulse: React.FC<TargetProps>;
+
+/**
+ * __Spotlight target__
+ *
+ * Wraps an element, allowing it to be targeted by a spotlight.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+export declare const SpotlightTarget: React_2.FC<SpotlightTargetProps>;
+
+declare interface SpotlightTargetProps {
+  /**
+   * A single child
+   */
+  children: ReactNode;
+  /**
+   * The name to reference from Spotlight
+   */
+  name: string;
+}
+
+/**
+ * __Spotlight transition__
+ *
+ * Provides context used for fading animations.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+export declare class SpotlightTransition extends React_2.Component<
+  SpotlightTransitionProps,
+  State
+> {
+  static getDerivedStateFromProps(
+    props: SpotlightTransitionProps,
+    state: State,
+  ): {
+    currentChildren: React_2.ReactNode;
+  };
+  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.
+   */
+  children?: ReactNode;
+}
+
+declare interface State {
+  currentChildren: ReactNode;
+}
+
+declare type TargetProps = Omit<BaseProps, 'css'> & {
+  pulse?: boolean;
+  testId?: string;
+};
+
+/**
+ * Enables advanced usage of spotlights.
+ *
+ * Provides the following methods:
+ * - `isTargetRendered`
+ *
+ *    Checks if the given spotlight target is currently
+ *    being rendered.
+ */
+export declare function useSpotlight(): {
+  isTargetRendered: (target: string) => boolean;
+};
+
+export {};
+```

package/dist/cjs/components/card.js

@@ -1,160 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _core = require("@emotion/core");
-
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-
-var _components = require("@atlaskit/theme/components");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _typography = require("@atlaskit/theme/typography");
-
-var _dialog = require("../styled/dialog");
-
-var _excluded = ["children", "theme"],
-    _excluded2 = ["text", "key"];
-var gridSize = (0, _constants.gridSize)(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-var lightH600Styles = (0, _core.css)((0, _typography.h600)({
-  theme: {
-    mode: 'light'
-  }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-var darkH600Styles = (0, _core.css)((0, _typography.h600)({
-  theme: {
-    mode: 'dark'
-  }
-}));
-
-var Container = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      theme = _ref.theme,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _core.jsx)("div", (0, _extends2.default)({
-      css: theme,
-      ref: ref
-    }, props), children)
-  );
-});
-
-var bodyStyles = (0, _core.css)({
-  display: 'flex',
-  padding: "".concat(gridSize * 2, "px ").concat(gridSize * 2.5, "px"),
-  flexDirection: 'column'
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
-var headingStyles = (0, _core.css)({
-  color: 'inherit'
-});
-var defaultHeaderStyles = (0, _core.css)({
-  display: 'flex',
-  paddingBottom: "".concat(gridSize, "px"),
-  alignItems: 'baseline',
-  justifyContent: 'space-between'
-});
-
-var DefaultHeader = function DefaultHeader(_ref2) {
-  var children = _ref2.children;
-  return (0, _core.jsx)("div", {
-    css: defaultHeaderStyles
-  }, children);
-};
-
-var defaultFooterStyles = (0, _core.css)({
-  display: 'flex',
-  paddingTop: "".concat(gridSize, "px"),
-  alignItems: 'center',
-  justifyContent: 'space-between'
-});
-
-var DefaultFooter = function DefaultFooter(_ref3) {
-  var children = _ref3.children;
-  return (0, _core.jsx)("div", {
-    css: defaultFooterStyles
-  }, children);
-};
-
-var Theme = (0, _components.createTheme)(function () {
-  return {
-    container: {
-      overflow: 'auto',
-      borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-      height: 'fit-content',
-      zIndex: "".concat(_constants.layers.spotlight() + 1)
-    }
-  };
-});
-/**
- * __Card__
- *
- * A card base for the spotlight card. The external `SpotlightCard` wraps this component.
- *
- * @internal
- */
-
-var Card = /*#__PURE__*/_react.default.forwardRef(function (_ref4, ref) {
-  var _ref4$actions = _ref4.actions,
-      actions = _ref4$actions === void 0 ? [] : _ref4$actions,
-      actionsBeforeElement = _ref4.actionsBeforeElement,
-      children = _ref4.children,
-      _ref4$components = _ref4.components,
-      components = _ref4$components === void 0 ? {} : _ref4$components,
-      image = _ref4.image,
-      heading = _ref4.heading,
-      headingAfterElement = _ref4.headingAfterElement,
-      theme = _ref4.theme,
-      testId = _ref4.testId;
-  var _components$Header = components.Header,
-      Header = _components$Header === void 0 ? DefaultHeader : _components$Header,
-      _components$Footer = components.Footer,
-      Footer = _components$Footer === void 0 ? DefaultFooter : _components$Footer;
-
-  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-      mode = _useGlobalTheme.mode;
-
-  return (0, _core.jsx)(Theme.Provider, {
-    value: theme
-  }, (0, _core.jsx)(Theme.Consumer, null, function (_ref5) {
-    var container = _ref5.container;
-    return (// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-      (0, _core.jsx)(Container, {
-        theme: container,
-        ref: ref,
-        "data-testid": testId
-      }, typeof image === 'string' ? (0, _core.jsx)("img", {
-        src: image,
-        alt: ""
-      }) : image, (0, _core.jsx)("div", {
-        css: bodyStyles
-      }, heading || headingAfterElement ? (0, _core.jsx)(Header, null, (0, _core.jsx)("h4", {
-        css: [mode === 'light' ? lightH600Styles : darkH600Styles, headingStyles]
-      }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? (0, _core.jsx)(Footer, null, actionsBeforeElement || (0, _core.jsx)("span", null), (0, _core.jsx)(_dialog.DialogActionItemContainer, null, actions.map(function (_ref6, idx) {
-        var text = _ref6.text,
-            key = _ref6.key,
-            rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded2);
-        return (0, _core.jsx)(_dialog.DialogActionItem, {
-          key: key || (typeof text === 'string' ? text : "".concat(idx))
-        }, (0, _core.jsx)(_customThemeButton.default, rest, text));
-      }))) : null))
-    );
-  }));
-});
-
-var _default = Card;
-exports.default = _default;