@atlaskit/onboarding/dist/esm/components/clone.js

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

import React, { useMemo } from 'react';
import { TargetInner, TargetOverlay } from '../styled/target';
import { useElementObserver } from '../utils/use-element-observer';
var computedStyleAttributesToClone = ['fontSize', 'fontWeight', 'lineHeight', 'padding', 'color', 'textOverflow'];
function cloneAndOverrideStyles(node) {
  var shouldCloneChildren = true;
  var clonedNode = node.cloneNode(shouldCloneChildren);
  var computedStyles = getComputedStyle(node);
  computedStyleAttributesToClone.forEach(function (attribute) {
    clonedNode.style[attribute] = computedStyles[attribute];
  });
  clonedNode.style.margin = '0';
  clonedNode.style.position = 'static';
  // The target may have other transforms applied. Avoid unintended side effects
  // by zeroing out "translate" rather than applying a value of "none".
  clonedNode.style.transform = 'translate(0, 0) translate3d(0, 0, 0)';
  return clonedNode;
}

/**
 * __Clone__
 *
 * Used for cloning spotlight targets. The clone is positioned on top of the spotlight target with
 * a pulsing animation.
 *
 * @internal
 */
var Clone = function Clone(props) {
  var pulse = props.pulse,
    style = props.style,
    shouldWatch = props.shouldWatch,
    target = props.target,
    targetBgColor = props.targetBgColor,
    targetOnClick = props.targetOnClick,
    targetNode = props.targetNode,
    targetRadius = props.targetRadius,
    testId = props.testId;
  var contentVersion = useElementObserver(targetNode, {
    disableWatch: !shouldWatch
  });
  var contentHTML = useMemo(function () {
    return cloneAndOverrideStyles(targetNode).outerHTML;
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to update when the content changes
  [contentVersion, targetNode]);
  return /*#__PURE__*/React.createElement(TargetInner, {
    "data-testid": testId,
    pulse: pulse,
    bgColor: targetBgColor,
    radius: targetRadius,
    style: style
  }, /*#__PURE__*/React.createElement("div", {
    dangerouslySetInnerHTML: {
      __html: contentHTML
    }
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: {
      height: '100%',
      pointerEvents: 'none'
    }
  }), /*#__PURE__*/React.createElement(TargetOverlay, {
    onClick: targetOnClick ? function (event) {
      return targetOnClick({
        event: event,
        target: target
      });
    } : undefined
  }));
};
export default Clone;