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

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

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
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";
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) { _defineProperty(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 = _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 from 'react';
import { canUseDOM } from 'exenv';
import ScrollLock from 'react-scrolllock';
import scrollIntoView from 'scroll-into-view-if-needed';
import { Layering } from '@atlaskit/layering/layering';
import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
import FadeIn from '@atlaskit/motion/fade-in';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import Portal from '@atlaskit/portal/portal';
import { ElementBox } from '../utils/use-element-box';
import Clone from './clone';
import NodeResolverSpotlightInner from './node-resolver-spotlight-inner';
import SpotlightDialog from './spotlight-dialog';
import { SpotlightTransitionConsumer } from './spotlight-transition';
/**
 * __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;
    _classCallCheck(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));
    _defineProperty(_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
    });
    _defineProperty(_this, "getTargetNodeStyle", function (box) {
      if (!canUseDOM) {
        return {};
      }
      var height = box.height,
        left = box.left,
        top = box.top,
        width = box.width,
        rest = _objectWithoutProperties(box, _excluded);
      return _objectSpread(_objectSpread({}, rest), {}, {
        height: height,
        left: left,
        top: top,
        width: width,
        position: 'fixed'
      }, width === 0 && fg('scroll-lock-replacement') && {
        visibility: 'hidden'
      });
    });
    return _this;
  }
  _inherits(SpotlightInner, _React$Component);
  return _createClass(SpotlightInner, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      if (prevProps.targetNode !== this.props.targetNode) {
        scrollIntoView(this.props.targetNode, {
          scrollMode: 'if-needed',
          block: this.props.scrollPositionBlock
        });
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      scrollIntoView(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.createElement(SpotlightTransitionConsumer, null, function (_ref) {
        var isOpen = _ref.isOpen,
          onExited = _ref.onExited;
        return /*#__PURE__*/React.createElement(Portal, {
          zIndex: 701
        }, TargetReplacement ? /*#__PURE__*/React.createElement(NodeResolverSpotlightInner, {
          hasNodeResolver: !fg('platform_design_system_team_onboarding_noderesolve'),
          innerRef: function innerRef(elem) {
            return _this2.setState({
              replacementElement: elem
            });
          }
        }, /*#__PURE__*/React.createElement(ElementBox, {
          element: targetNode,
          resizeUpdateMethod: shouldWatchTarget ? 'polling' : undefined
        }, function (box) {
          return /*#__PURE__*/React.createElement(TargetReplacement, _extends({
            "data-testid": "".concat(testId, "--target")
          }, _this2.getTargetNodeStyle(box)));
        })) : /*#__PURE__*/React.createElement(ElementBox, {
          element: targetNode,
          resizeUpdateMethod: shouldWatchTarget ? 'polling' : undefined
        }, function (box) {
          return /*#__PURE__*/React.createElement(Clone, {
            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.createElement(Layering, {
          isDisabled: false
        }, /*#__PURE__*/React.createElement(ExitingPersistence, {
          appear: true
        }, isOpen && /*#__PURE__*/React.createElement(FadeIn, {
          onFinish: function onFinish(state) {
            state === 'exiting' && onExited();
          },
          duration: "medium"
        }, function (_ref2) {
          var ref = _ref2.ref,
            className = _ref2.className,
            style = _ref2.style;
          return /*#__PURE__*/React.createElement("div", {
            ref: ref
            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
            ,
            className: className,
            style: style
          }, /*#__PURE__*/React.createElement(SpotlightDialog, {
            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.createElement(ScrollLock, null));
      });
    }
  }]);
}(React.Component); // eslint-disable-next-line @repo/internal/react/require-jsdoc
_defineProperty(SpotlightInner, "defaultProps", {
  dialogWidth: 400,
  pulse: true
});
export default SpotlightInner;