@atlaskit/editor-common/dist/cjs/ui/FloatingToolbar/ButtonSpotlightCard.js

A package that contains common classes and components for editor and renderer

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ButtonSpotlightCard = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _onboarding = require("@atlaskit/onboarding");
var _popper = require("@atlaskit/popper");
var _excluded = ["referenceElement", "placement"];
/*
 * 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.
 */
var ButtonSpotlightCard = exports.ButtonSpotlightCard = function ButtonSpotlightCard(props) {
  var referenceElement = props.referenceElement,
    _props$placement = props.placement,
    placement = _props$placement === void 0 ? 'top-start' : _props$placement,
    spotlightCardProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  return /*#__PURE__*/_react.default.createElement(_popper.Popper, {
    referenceElement: referenceElement,
    placement: placement,
    strategy: "absolute"
  }, function (_ref) {
    var ref = _ref.ref,
      style = _ref.style;
    return (
      /*#__PURE__*/
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
      _react.default.createElement("div", {
        ref: ref,
        style: style
      }, /*#__PURE__*/_react.default.createElement(_onboarding.SpotlightCard
      // Ignored via go/ees005
      // eslint-disable-next-line react/jsx-props-no-spreading
      , spotlightCardProps))
    );
  });
};