@blueprintjs/core
Version:
Core styles & components
68 lines • 3.3 kB
JavaScript
;
/* !
* (c) Copyright 2026 Palantir Technologies Inc. All rights reserved.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.usePopover = usePopover;
const react_1 = require("@floating-ui/react");
const react_2 = require("react");
const popoverProps_1 = require("../popover/popoverProps");
function usePopover({ autoUpdateOptions, canEscapeKeyClose, disabled = false, hasBackdrop = false, interactionKind, isControlled = false, isOpen = false, middleware, placement, positioningStrategy = "absolute", onOpenChange, } = {}) {
const [isOpenState, setIsOpenState] = (0, react_2.useState)(isOpen);
(0, react_2.useEffect)(() => {
setIsOpenState(isOpen);
}, [isOpen]);
const handleOpenChange = (0, react_2.useCallback)((nextOpen, event) => {
// Only update internal state for uncontrolled components
if (!isControlled) {
setIsOpenState(nextOpen);
}
// Always call the external callback if provided
if (onOpenChange) {
onOpenChange(nextOpen, event);
}
}, [onOpenChange, isControlled]);
// Store options in a ref so the memoized callback always reads the latest
// values without changing its identity on every render.
const autoUpdateOptionsRef = (0, react_2.useRef)(autoUpdateOptions);
autoUpdateOptionsRef.current = autoUpdateOptions;
const whileElementsMounted = (0, react_2.useMemo)(() => autoUpdateOptions != null
? (reference, floating, update) => (0, react_1.autoUpdate)(reference, floating, update, autoUpdateOptionsRef.current)
: react_1.autoUpdate,
// Only change identity when toggling between with/without options;
// actual option values are read from the ref at call time.
// eslint-disable-next-line react-hooks/exhaustive-deps
[autoUpdateOptions != null]);
const data = (0, react_1.useFloating)({
middleware,
onOpenChange: handleOpenChange,
open: isOpenState,
placement,
strategy: positioningStrategy,
whileElementsMounted,
});
const { context } = data;
const click = (0, react_1.useClick)(context, {
enabled: !disabled,
});
const dismiss = (0, react_1.useDismiss)(context, {
escapeKey: canEscapeKeyClose,
// Disable Floating UI outside-press in two cases:
// 1. CLICK interactions: delegate to Overlay2's stack-aware handler
// (getThisOverlayAndDescendants) so clicks inside child overlays like Dialog
// don't incorrectly close the popover. useDismiss is not overlay-stack-aware
// and treats clicks in portaled child overlays as "outside" clicks.
// 2. hasBackdrop: Overlay2 handles backdrop clicks and outside-click detection.
outsidePress: interactionKind !== popoverProps_1.PopoverInteractionKind.CLICK_TARGET_ONLY &&
interactionKind !== popoverProps_1.PopoverInteractionKind.CLICK &&
!hasBackdrop,
});
const interactions = (0, react_1.useInteractions)([click, dismiss]);
return (0, react_2.useMemo)(() => ({
isOpen: isOpenState,
setIsOpen: setIsOpenState,
...interactions,
...data,
}), [data, interactions, isOpenState]);
}
//# sourceMappingURL=usePopover.js.map