@atlaskit/onboarding/dist/es2019/components/spotlight-manager.js

An onboarding spotlight introduces new features to users through focused messages or multi-step tours.

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { createContext, PureComponent, startTransition } from 'react';
import memoizeOne from 'memoize-one';
import noop from '@atlaskit/ds-lib/noop';
import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
import FadeIn from '@atlaskit/motion/fade-in';
import Portal from '@atlaskit/portal/portal';
import Blanket from '../styled/blanket';
const dest = /*#__PURE__*/createContext(undefined);
const TargetConsumer = dest.Consumer;
const TargetProvider = dest.Provider;
const SpotlightContext = /*#__PURE__*/createContext({
  opened: noop,
  closed: noop,
  targets: {}
});
const SpotlightStateConsumer = SpotlightContext.Consumer;
const SpotlightStateProvider = SpotlightContext.Provider;
export { TargetConsumer };

// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
export { SpotlightContext, SpotlightStateConsumer as SpotlightConsumer };
const Container = ({
  component: Wrapper,
  children
}) => /*#__PURE__*/React.createElement(Wrapper, null, children);

/**
 * __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)
 *
 * @deprecated Use `@atlaskit/spotlight` instead.
 */
// eslint-disable-next-line @repo/internal/react/no-class-components, @atlaskit/volt-strict-mode/no-multiple-exports
export default class SpotlightManager extends PureComponent {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "state", {
      spotlightCount: 0,
      targets: {}
    });
    /*
     * When enabling React Streaming in Confluence, a
     * "This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering"
     * error happens.
     * This is to fix this error by wrapping the state update in startTransition as suggested by React: https://react.dev/errors/421?invariant=421
     */
    _defineProperty(this, "getTargetRef", name => element => {
      startTransition(() => {
        this.setState(state => ({
          targets: {
            ...state.targets,
            [name]: element || undefined
          }
        }));
      });
    });
    _defineProperty(this, "spotlightOpen", () => {
      this.setState(state => ({
        spotlightCount: state.spotlightCount + 1
      }));
    });
    _defineProperty(this, "spotlightClose", () => {
      this.setState(state => ({
        spotlightCount: state.spotlightCount - 1
      }));
    });
    _defineProperty(this, "getStateProviderValue", memoizeOne(targets => ({
      opened: this.spotlightOpen,
      closed: this.spotlightClose,
      targets
    })));
  }
  componentDidMount() {
    if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
      if (this.props.component) {
        // eslint-disable-next-line no-console
        console.warn(`Atlaskit: The SpotlightManager 'component' prop is deprecated. Please wrap the SpotlightManager in the component instead.`);
      }
    }
  }
  render() {
    const {
      blanketIsTinted,
      children,
      component: Tag,
      onBlanketClicked
    } = this.props;
    const isActive = this.state.spotlightCount > 0;
    return /*#__PURE__*/React.createElement(SpotlightStateProvider, {
      value: this.getStateProviderValue(this.state.targets)
    }, /*#__PURE__*/React.createElement(TargetProvider, {
      value: this.getTargetRef
    }, /*#__PURE__*/React.createElement(Container, {
      component: Tag || React.Fragment
    }, /*#__PURE__*/React.createElement(ExitingPersistence, null, isActive && /*#__PURE__*/React.createElement(FadeIn, {
      duration: "medium"
    }, ({
      ref,
      className,
      style
    }) => /*#__PURE__*/React.createElement(Portal, {
      zIndex: 700
    }, /*#__PURE__*/React.createElement(Blanket, {
      ref: ref
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
      ,
      className: className,
      style: style,
      isTinted: blanketIsTinted,
      onBlanketClicked: onBlanketClicked
    })))), children)));
  }
}
_defineProperty(SpotlightManager, "defaultProps", {
  blanketIsTinted: true
});