@atlaskit/onboarding/dist/esm/components/spotlight-dialog.js

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

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React, { Component } from 'react';
import FocusLock from 'react-focus-lock';
import { Popper } from '@atlaskit/popper/main';
import { Box } from '@atlaskit/primitives/compiled';
import { DialogImage } from '../styled/dialog';
import SpotlightCard from './spotlight-card';
import ValueChanged from './value-changed';
/**
 * __Spotlight dialog__
 *
 * 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)
 */
// eslint-disable-next-line @repo/internal/react/no-class-components
var SpotlightDialogComponent = /*#__PURE__*/function (_Component) {
  function SpotlightDialogComponent() {
    var _this;
    _classCallCheck(this, SpotlightDialogComponent);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, SpotlightDialogComponent, [].concat(args));
    _defineProperty(_this, "state", {
      focusLockDisabled: true
    });
    return _this;
  }
  _inherits(SpotlightDialogComponent, _Component);
  return _createClass(SpotlightDialogComponent, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;
      this.focusLockTimeoutId = window.setTimeout(function () {
        // we delay the enabling of the focus lock to avoid the scroll position
        // jumping around in some situations
        _this2.setState({
          focusLockDisabled: false
        });
      }, 200);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.clearTimeout(this.focusLockTimeoutId);
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
        actions = _this$props.actions,
        actionsBeforeElement = _this$props.actionsBeforeElement,
        children = _this$props.children,
        dialogPlacement = _this$props.dialogPlacement,
        dialogWidth = _this$props.dialogWidth,
        footer = _this$props.footer,
        header = _this$props.header,
        heading = _this$props.heading,
        headingAfterElement = _this$props.headingAfterElement,
        image = _this$props.image,
        _this$props$label = _this$props.label,
        label = _this$props$label === void 0 ? 'Introducing new feature' : _this$props$label,
        titleId = _this$props.titleId,
        targetNode = _this$props.targetNode,
        testId = _this$props.testId;
      var focusLockDisabled = this.state.focusLockDisabled;
      var dialogLabel = !heading && !titleId ? label : undefined;
      var dialogLabelledBy = titleId || (heading ? 'spotlight-dialog-label' : undefined);
      var translatedPlacement = dialogPlacement ? {
        'top left': 'top-start',
        'top center': 'top',
        'top right': 'top-end',
        'right top': 'right-start',
        'right middle': 'right',
        'right bottom': 'right-end',
        'bottom left': 'bottom-start',
        'bottom center': 'bottom',
        'bottom right': 'bottom-end',
        'left top': 'left-start',
        'left middle': 'left',
        'left bottom': 'left-end'
      }[dialogPlacement] : undefined;

      // If there's no room on either side of the popper, it will extend off-screen.
      //  This looks buggy when scroll-lock and focus is placed on the dialog, so we
      //  customise popper so it overflows the spotlight instead with altAxis=true.
      var modifiers = [{
        name: 'preventOverflow',
        options: {
          padding: 5,
          rootBoundary: 'document',
          altAxis: true,
          tether: false
        }
      }];
      return /*#__PURE__*/React.createElement(Popper, {
        modifiers: modifiers,
        referenceElement: targetNode,
        placement: translatedPlacement
      }, function (_ref) {
        var ref = _ref.ref,
          style = _ref.style,
          update = _ref.update;
        return /*#__PURE__*/React.createElement(ValueChanged, {
          value: dialogWidth,
          onChange: update
        }, /*#__PURE__*/React.createElement(FocusLock, {
          disabled: focusLockDisabled,
          returnFocus: false,
          autoFocus: true
        }, /*#__PURE__*/React.createElement(Box, {
          style: style,
          ref: ref,
          "aria-modal": true,
          role: "dialog",
          "aria-label": dialogLabel,
          "aria-labelledby": dialogLabelledBy,
          testId: "".concat(testId, "-container")
        }, /*#__PURE__*/React.createElement(SpotlightCard, {
          testId: testId,
          width: dialogWidth,
          actions: actions,
          actionsBeforeElement: actionsBeforeElement,
          image: image && /*#__PURE__*/React.createElement(DialogImage, {
            alt: heading,
            src: image
          }),
          components: {
            Header: header,
            Footer: footer
          },
          heading: heading,
          headingId: "spotlight-dialog-label",
          headingAfterElement: headingAfterElement
          // This should be heading level 1 since this is technically a modal, including a focus lock on the modal window.
          // But because it is not a _true_ modal, we are setting it to `2` until that is fixed.
          ,
          headingLevel: 2
        }, children))));
      });
    }
  }]);
}(Component); // eslint-disable-next-line @repo/internal/react/require-jsdoc
export default SpotlightDialogComponent;