@atlaskit/spotlight

Version:

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

24 lines • 679 B

JavaScript

/* 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 const PopoverTarget = ({
  children
}) => {
  const localRef = useRef(null);
  const {
    target
  } = useContext(SpotlightContext);
  useLayoutEffect(() => {
    target.setRef(localRef);
  }, [target]);
  return /*#__PURE__*/React.createElement("div", {
    ref: localRef
  }, children);
};