@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
34 lines • 1.52 kB
JavaScript
import { STYLE } from '../Popover.constants';
/**
* Due to @react-aria's event abstraction layer, we add an invisible backdrop for all popovers
* to not interfere with any components built with the hooks from @react-aria.
*
* This will make sure that popovers are closed on clickoutside and no longer
* be stuck open in case the even target was a @react-aria button.
*/
export var addBackdropPlugin = {
name: 'addBackdropPlugin',
fn: function (instance) {
return {
onMount: function () {
var _a, _b;
if (!instance.props.trigger.includes('mouseenter')) {
var backdrop = document.createElement('div');
backdrop.addEventListener('click', function (e) {
e.stopPropagation();
e.preventDefault();
instance.hide();
});
backdrop.classList.add(STYLE.backdrop);
backdrop.setAttribute('aria-hidden', 'true');
(_b = (_a = document.querySelector('[data-tippy-root]')) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.append(backdrop);
}
},
onHide: function () {
var _a;
(_a = document.querySelector(".".concat(STYLE.backdrop))) === null || _a === void 0 ? void 0 : _a.remove();
},
};
},
};
//# sourceMappingURL=backdropPlugin.js.map