@atlaskit/editor-plugin-mentions
Version:
Mentions plugin for @atlaskit/editor-core
34 lines • 1.24 kB
JavaScript
import React, { useCallback } from 'react';
import { Popup } from '@atlaskit/popup/popup';
/**
* A `<Popup>` anchored to an externally-supplied DOM node. Unlike `PopupTrigger`, it has no
* clickable trigger of its own — it opens whenever `isOpen` becomes true, so callers can drive
* it from any external signal.
*/
export function AnchoredPopup(_ref) {
var anchorElement = _ref.anchorElement,
content = _ref.content,
isOpen = _ref.isOpen,
onClose = _ref.onClose;
var renderContent = useCallback(function () {
return isOpen ? content : null;
}, [isOpen, content]);
var renderTrigger = useCallback(function (triggerProps) {
if (anchorElement && typeof triggerProps.ref === 'function') {
triggerProps.ref(anchorElement);
}
return null;
}, [anchorElement]);
return /*#__PURE__*/React.createElement(Popup, {
isOpen: isOpen,
onClose: onClose,
placement: "bottom-start",
content: renderContent,
trigger: renderTrigger
// Drops this popup's own `overflow: auto`, which otherwise clips the role picker's
// menu — it renders as a normal DOM child here (not a body portal) so it stays inside
// this popup's focus trap.
,
shouldRenderToParent: true
});
}