@blueprintjs/core
Version:
Core styles & components
75 lines • 5.57 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopoverPopup = PopoverPopup;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
/* !
* (c) Copyright 2026 Palantir Technologies Inc. All rights reserved.
*/
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_1 = require("react");
const common_1 = require("../../common");
const overlay2_1 = require("../overlay2/overlay2");
const popoverArrow_1 = require("../popover/popoverArrow");
const popoverProps_1 = require("../popover/popoverProps");
const popperUtils_1 = require("../popover/popperUtils");
function PopoverPopup(props) {
const { animation = popoverProps_1.PopoverAnimation.SCALE, arrow = true, arrowRef, autoFocus = true, backdropProps, canEscapeKeyClose, captureDismiss = false, content, enforceFocus = true, floatingData, handleMouseEnter, handleMouseLeave, handleOverlayClose, handlePopoverClick, hasBackdrop = false, hasDarkParent, inheritDarkTheme = true, interactionKind = popoverProps_1.PopoverInteractionKind.CLICK, isClosingViaEscapeKeypress, isHoverInteractionKind, lazy = false, matchTargetWidth = false, onClosed, onClosing, onOpened, onOpening, popoverClassName, portalClassName, portalContainer, transitionDuration = 300, usePortal = true, } = props;
const transitionContainerElement = (0, react_1.useRef)(null);
const arrowStyle = {
left: floatingData.middlewareData.arrow?.x,
position: "absolute",
top: floatingData.middlewareData.arrow?.y,
};
const isReferenceHidden = floatingData.context.middlewareData.hide?.referenceHidden ?? false;
const hasPopperEscaped = floatingData.context.middlewareData.hide?.escaped ?? false;
const transformOrigin = (0, popperUtils_1.getTransformOrigin)(floatingData.placement, arrow
? {
left: cssPropertyToString(arrowStyle.left),
top: cssPropertyToString(arrowStyle.top),
}
: undefined);
const popoverHandlers = {
// always check popover clicks for dismiss class
onClick: handlePopoverClick,
// treat ENTER/SPACE keys the same as a click for accessibility
onKeyDown: event => common_1.Utils.isKeyboardClick(event) && handlePopoverClick(event),
};
if (interactionKind === popoverProps_1.PopoverInteractionKind.HOVER ||
(!usePortal && interactionKind === popoverProps_1.PopoverInteractionKind.HOVER_TARGET_ONLY)) {
popoverHandlers.onMouseEnter = handleMouseEnter;
popoverHandlers.onMouseLeave = handleMouseLeave;
}
const basePlacement = (0, popperUtils_1.getBasePlacement)(floatingData.placement);
const popoverClasses = (0, classnames_1.default)(common_1.Classes.POPOVER, {
[common_1.Classes.DARK]: inheritDarkTheme && hasDarkParent,
[common_1.Classes.POPOVER_MINIMAL_ANIMATION]: animation === popoverProps_1.PopoverAnimation.MINIMAL,
[common_1.Classes.POPOVER_CAPTURING_DISMISS]: captureDismiss,
[common_1.Classes.POPOVER_MATCH_TARGET_WIDTH]: matchTargetWidth,
[common_1.Classes.POPOVER_REFERENCE_HIDDEN]: isReferenceHidden,
[common_1.Classes.POPOVER_POPPER_ESCAPED]: hasPopperEscaped,
}, `${common_1.Classes.POPOVER_CONTENT_PLACEMENT}-${basePlacement}`, popoverClassName);
const defaultAutoFocus = isHoverInteractionKind ? false : undefined;
// Override shouldReturnFocusOnClose based on interaction type:
// - Hover interactions: always false (focus should stay on trigger per WCAG)
// - ESC keypress: always true (keyboard users need focus returned)
// - Otherwise: use prop value (defaults to true)
const shouldReturnFocusOnClose = isHoverInteractionKind
? false
: isClosingViaEscapeKeypress || props.shouldReturnFocusOnClose;
return ((0, jsx_runtime_1.jsx)(overlay2_1.Overlay2
// eslint-disable-next-line jsx-a11y/no-autofocus
, {
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus: autoFocus ?? defaultAutoFocus, backdropClassName: common_1.Classes.POPOVER_BACKDROP, backdropProps: backdropProps, canEscapeKeyClose: canEscapeKeyClose, canOutsideClickClose: interactionKind === popoverProps_1.PopoverInteractionKind.CLICK, childRef: transitionContainerElement, enforceFocus: enforceFocus, hasBackdrop: hasBackdrop, isOpen: floatingData.isOpen, lazy: lazy, onClose: handleOverlayClose, onClosed: onClosed, onClosing: onClosing, onOpened: onOpened, onOpening: onOpening, portalClassName: portalClassName, portalContainer: portalContainer, shouldReturnFocusOnClose: shouldReturnFocusOnClose, transitionDuration: transitionDuration, transitionName: common_1.Classes.POPOVER, usePortal: usePortal, children: (0, jsx_runtime_1.jsx)("div", { className: common_1.Classes.POPOVER_TRANSITION_CONTAINER, style: floatingData.floatingStyles, ref: (0, common_1.mergeRefs)(floatingData.refs.setFloating, transitionContainerElement), ...popoverHandlers, children: (0, jsx_runtime_1.jsxs)("div", { className: popoverClasses, style: { transformOrigin }, children: [arrow && ((0, jsx_runtime_1.jsx)(popoverArrow_1.PopoverArrow, { arrowProps: { ref: arrowRef, style: arrowStyle }, placement: floatingData.placement })), (0, jsx_runtime_1.jsx)("div", { className: common_1.Classes.POPOVER_CONTENT, children: content })] }) }) }));
}
function cssPropertyToString(value) {
if (value === "") {
return value;
}
if (value == null || isNaN(Number(value))) {
return "";
}
return `${value}px`;
}
//# sourceMappingURL=popoverPopup.js.map