@atlaskit/onboarding/dist/es2019/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';
const computedStyleAttributesToClone = ['fontSize', 'fontWeight', 'lineHeight', 'padding', 'color', 'textOverflow'];
function cloneAndOverrideStyles(node) {
  const shouldCloneChildren = true;
  const clonedNode = node.cloneNode(shouldCloneChildren);
  const computedStyles = getComputedStyle(node);
  computedStyleAttributesToClone.forEach(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
 */
const Clone = props => {
  const {
    pulse,
    style,
    shouldWatch,
    target,
    targetBgColor,
    targetOnClick,
    targetNode,
    targetRadius,
    testId
  } = props;
  const contentVersion = useElementObserver(targetNode, {
    disableWatch: !shouldWatch
  });
  const contentHTML = useMemo(() => 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 ? event => targetOnClick({
      event,
      target
    }) : undefined
  }));
};
export default Clone;