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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
var _main = require("@atlaskit/popper/main");
var _compiled = require("@atlaskit/primitives/compiled");
var _dialog = require("../styled/dialog");
var _spotlightCard = _interopRequireDefault(require("./spotlight-card"));
var _valueChanged = _interopRequireDefault(require("./value-changed"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
/**
 * __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;
    (0, _classCallCheck2.default)(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));
    (0, _defineProperty2.default)(_this, "state", {
      focusLockDisabled: true
    });
    return _this;
  }
  (0, _inherits2.default)(SpotlightDialogComponent, _Component);
  return (0, _createClass2.default)(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.default.createElement(_main.Popper, {
        modifiers: modifiers,
        referenceElement: targetNode,
        placement: translatedPlacement
      }, function (_ref) {
        var ref = _ref.ref,
          style = _ref.style,
          update = _ref.update;
        return /*#__PURE__*/_react.default.createElement(_valueChanged.default, {
          value: dialogWidth,
          onChange: update
        }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
          disabled: focusLockDisabled,
          returnFocus: false,
          autoFocus: true
        }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
          style: style,
          ref: ref,
          "aria-modal": true,
          role: "dialog",
          "aria-label": dialogLabel,
          "aria-labelledby": dialogLabelledBy,
          testId: "".concat(testId, "-container")
        }, /*#__PURE__*/_react.default.createElement(_spotlightCard.default, {
          testId: testId,
          width: dialogWidth,
          actions: actions,
          actionsBeforeElement: actionsBeforeElement,
          image: image && /*#__PURE__*/_react.default.createElement(_dialog.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))));
      });
    }
  }]);
}(_react.Component); // eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = SpotlightDialogComponent;