@atlaskit/editor-plugin-mentions
Version:
Mentions plugin for @atlaskit/editor-core
33 lines • 1.14 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({
anchorElement,
content,
isOpen,
onClose
}) {
const renderContent = useCallback(() => isOpen ? content : null, [isOpen, content]);
const renderTrigger = useCallback(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
});
}