import React from 'react';
// eslint-disable-next-line @atlaskit/design-system/use-spotlight-package
import { SpotlightCard } from '@atlaskit/onboarding';
import { Popper } from '@atlaskit/popper';
/*
 * ButtonSpotlightCard is an editor custom spotlight that renders next to a floating toolbar button.
 * It is built on top of the SpotlightCard component from @atlaskit/onboarding.
 * It avoids the issue of the native atlaskit Spotlight component rendering outside the editor bounds and takes focus away from the editor.
 */
export const ButtonSpotlightCard = props => {
  const {
    referenceElement,
    placement = 'top-start',
    ...spotlightCardProps
  } = props;
  return /*#__PURE__*/React.createElement(Popper, {
    referenceElement: referenceElement,
    placement: placement,
    strategy: "absolute"
  }, ({
    ref,
    style
  }) =>
  /*#__PURE__*/
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
  React.createElement("div", {
    ref: ref,
    style: style
  }, /*#__PURE__*/React.createElement(SpotlightCard
  // Ignored via go/ees005
  // eslint-disable-next-line react/jsx-props-no-spreading
  , spotlightCardProps)));
};