@atlaskit/onboarding/dist/cjs/components/spotlight-inner.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");
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 _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 = _interopRequireDefault(require("react"));
var _exenv = require("exenv");
var _reactScrolllock = _interopRequireDefault(require("react-scrolllock"));
var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
var _layering = require("@atlaskit/layering/layering");
var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _portal = _interopRequireDefault(require("@atlaskit/portal/portal"));
var _useElementBox = require("../utils/use-element-box");
var _clone = _interopRequireDefault(require("./clone"));
var _nodeResolverSpotlightInner = _interopRequireDefault(require("./node-resolver-spotlight-inner"));
var _spotlightDialog = _interopRequireDefault(require("./spotlight-dialog"));
var _spotlightTransition = require("./spotlight-transition");
var _excluded = ["height", "left", "top", "width"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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 inner__
 *
 * Renders the spotlight target clone and dialog.
 *
 * @internal
 */
// eslint-disable-next-line @repo/internal/react/no-class-components
var SpotlightInner = /*#__PURE__*/function (_React$Component) {
  function SpotlightInner() {
    var _this;
    (0, _classCallCheck2.default)(this, SpotlightInner);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, SpotlightInner, [].concat(args));
    (0, _defineProperty2.default)(_this, "state", {
      // This is only used when targetReplacement is specified.
      // In this case, we have to render the targetReplacement component,
      // get a dom reference from that component, then render again passing
      // that reference into SpotlightDialog (Popper).
      replacementElement: null
    });
    (0, _defineProperty2.default)(_this, "getTargetNodeStyle", function (box) {
      if (!_exenv.canUseDOM) {
        return {};
      }
      var height = box.height,
        left = box.left,
        top = box.top,
        width = box.width,
        rest = (0, _objectWithoutProperties2.default)(box, _excluded);
      return _objectSpread(_objectSpread({}, rest), {}, {
        height: height,
        left: left,
        top: top,
        width: width,
        position: 'fixed'
      }, width === 0 && (0, _fg.fg)('scroll-lock-replacement') && {
        visibility: 'hidden'
      });
    });
    return _this;
  }
  (0, _inherits2.default)(SpotlightInner, _React$Component);
  return (0, _createClass2.default)(SpotlightInner, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (prevProps.targetNode !== this.props.targetNode) {
        (0, _scrollIntoViewIfNeeded.default)(this.props.targetNode, {
          scrollMode: 'if-needed',
          block: this.props.scrollPositionBlock
        });
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      (0, _scrollIntoViewIfNeeded.default)(this.props.targetNode, {
        scrollMode: 'if-needed',
        block: this.props.scrollPositionBlock
      });
      this.props.onOpened();
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.props.onClosed();
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;
      var _this$props = this.props,
        pulse = _this$props.pulse,
        shouldWatchTarget = _this$props.shouldWatchTarget,
        target = _this$props.target,
        targetNode = _this$props.targetNode,
        targetBgColor = _this$props.targetBgColor,
        targetOnClick = _this$props.targetOnClick,
        targetRadius = _this$props.targetRadius,
        testId = _this$props.testId,
        TargetReplacement = _this$props.targetReplacement;
      var replacementElement = this.state.replacementElement;
      return /*#__PURE__*/_react.default.createElement(_spotlightTransition.SpotlightTransitionConsumer, null, function (_ref) {
        var isOpen = _ref.isOpen,
          onExited = _ref.onExited;
        return /*#__PURE__*/_react.default.createElement(_portal.default, {
          zIndex: 701
        }, TargetReplacement ? /*#__PURE__*/_react.default.createElement(_nodeResolverSpotlightInner.default, {
          hasNodeResolver: !(0, _fg.fg)('platform_design_system_team_onboarding_noderesolve'),
          innerRef: function innerRef(elem) {
            return _this2.setState({
              replacementElement: elem
            });
          }
        }, /*#__PURE__*/_react.default.createElement(_useElementBox.ElementBox, {
          element: targetNode,
          resizeUpdateMethod: shouldWatchTarget ? 'polling' : undefined
        }, function (box) {
          return /*#__PURE__*/_react.default.createElement(TargetReplacement, (0, _extends2.default)({
            "data-testid": "".concat(testId, "--target")
          }, _this2.getTargetNodeStyle(box)));
        })) : /*#__PURE__*/_react.default.createElement(_useElementBox.ElementBox, {
          element: targetNode,
          resizeUpdateMethod: shouldWatchTarget ? 'polling' : undefined
        }, function (box) {
          return /*#__PURE__*/_react.default.createElement(_clone.default, {
            shouldWatch: shouldWatchTarget,
            testId: "".concat(testId, "--target"),
            pulse: pulse,
            target: target
            // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
            ,
            style: _this2.getTargetNodeStyle(box),
            targetBgColor: targetBgColor,
            targetNode: targetNode,
            targetOnClick: targetOnClick,
            targetRadius: targetRadius
          });
        }), TargetReplacement && !replacementElement ? null : /*#__PURE__*/_react.default.createElement(_layering.Layering, {
          isDisabled: false
        }, /*#__PURE__*/_react.default.createElement(_exitingPersistence.default, {
          appear: true
        }, isOpen && /*#__PURE__*/_react.default.createElement(_fadeIn.default, {
          onFinish: function onFinish(state) {
            state === 'exiting' && onExited();
          },
          duration: "medium"
        }, function (_ref2) {
          var ref = _ref2.ref,
            className = _ref2.className,
            style = _ref2.style;
          return /*#__PURE__*/_react.default.createElement("div", {
            ref: ref
            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
            ,
            className: className,
            style: style
          }, /*#__PURE__*/_react.default.createElement(_spotlightDialog.default, {
            testId: "".concat(testId, "--dialog"),
            actions: _this2.props.actions,
            actionsBeforeElement: _this2.props.actionsBeforeElement,
            children: _this2.props.children,
            dialogPlacement: _this2.props.dialogPlacement,
            dialogWidth: _this2.props.dialogWidth,
            footer: _this2.props.footer,
            header: _this2.props.header,
            heading: _this2.props.heading,
            titleId: _this2.props.titleId,
            label: _this2.props.label,
            headingAfterElement: _this2.props.headingAfterElement,
            image: _this2.props.image,
            targetNode: replacementElement || targetNode
          }));
        }))), /*#__PURE__*/_react.default.createElement(_reactScrolllock.default, null));
      });
    }
  }]);
}(_react.default.Component); // eslint-disable-next-line @repo/internal/react/require-jsdoc
(0, _defineProperty2.default)(SpotlightInner, "defaultProps", {
  dialogWidth: 400,
  pulse: true
});
var _default = exports.default = SpotlightInner;