@gravity-ui/uikit
Version:
Gravity UI base styling and components
57 lines (56 loc) • 2.73 kB
JavaScript
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Popover = Popover;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("@floating-ui/react");
const hooks_1 = require("../../hooks/index.js");
const Popup_1 = require("../Popup/index.js");
const cn_1 = require("../utils/cn.js");
const getElementRef_1 = require("../utils/getElementRef.js");
const b = (0, cn_1.block)('popover');
const DEFAULT_OPEN_DELAY = 500;
const DEFAULT_CLOSE_DELAY = 250;
function Popover({ children, open, onOpenChange, disabled, content, trigger, openDelay = DEFAULT_OPEN_DELAY, closeDelay = DEFAULT_CLOSE_DELAY,
// Force enable to workaround https://github.com/floating-ui/floating-ui/issues/3261
// enableSafePolygon,
className, ...restProps }) {
const [anchorElement, setAnchorElement] = React.useState(null);
const [floatingElement, setFloatingElement] = React.useState(null);
const [isOpen, setIsOpen] = (0, hooks_1.useControlledState)(open, false, onOpenChange);
const context = (0, react_1.useFloatingRootContext)({
open: isOpen && !disabled,
onOpenChange: setIsOpen,
elements: {
reference: anchorElement,
floating: floatingElement,
},
});
const hover = (0, react_1.useHover)(context, {
enabled: trigger !== 'click',
delay: { open: openDelay, close: closeDelay },
move: false,
handleClose: (0, react_1.safePolygon)(),
});
const click = (0, react_1.useClick)(context);
const role = (0, react_1.useRole)(context, {
role: 'dialog',
});
const dismiss = (0, react_1.useDismiss)(context);
const interactions = [hover, click, role, dismiss];
const { getReferenceProps } = (0, react_1.useInteractions)(interactions);
const anchorRef = (0, hooks_1.useForkRef)(setAnchorElement, React.isValidElement(children) ? (0, getElementRef_1.getElementRef)(children) : undefined);
const anchorProps = React.isValidElement(children)
? getReferenceProps(children.props)
: getReferenceProps();
const anchorNode = React.isValidElement(children)
? React.cloneElement(children, {
...anchorProps,
ref: anchorRef,
})
: children(anchorProps, anchorRef);
return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [anchorNode, (0, jsx_runtime_1.jsx)(Popup_1.Popup, { ...restProps, open: context.open, floatingContext: context, floatingRef: setFloatingElement, floatingInteractions: interactions, className: b(null, className), children: content })] }));
}
//# sourceMappingURL=Popover.js.map