@atlaskit/spotlight/dist/esm/ui/popover-target/top-layer.js

A spotlight introduces users to points of interest, from focused messages to multi-step tours.

/* top-layer.tsx generated by @compiled/babel-plugin v3.0.2 */
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useContext, useLayoutEffect, useRef } from 'react';
import { SpotlightContext } from '../../controllers/context';
/**
 * __Target__
 *
 * A target is the element that the popover content will be positioned in relation to.
 */
export var PopoverTarget = function PopoverTarget(_ref) {
  var children = _ref.children;
  var localRef = useRef(null);
  var _useContext = useContext(SpotlightContext),
    target = _useContext.target;
  useLayoutEffect(function () {
    target.setRef(localRef);
  }, [target]);
  return /*#__PURE__*/React.createElement("div", {
    ref: localRef
  }, children);
};