@gravity-ui/uikit
Version:
Gravity UI base styling and components
77 lines (76 loc) • 3.75 kB
JavaScript
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = Tooltip;
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 constants_1 = require("../Popup/constants.js");
const utils_1 = require("../Popup/utils.js");
const Portal_1 = require("../Portal/index.js");
const cn_1 = require("../utils/cn.js");
const filterDOMProps_1 = require("../utils/filterDOMProps.js");
const getElementRef_1 = require("../utils/getElementRef.js");
require("./Tooltip.css");
const b = (0, cn_1.block)('tooltip');
const DEFAULT_OPEN_DELAY = 1000;
const DEFAULT_CLOSE_DELAY = 0;
const DEFAULT_PLACEMENT = 'bottom';
const DEFAULT_OFFSET = 4;
function Tooltip({ children, open, onOpenChange, strategy, placement: placementProp = DEFAULT_PLACEMENT, offset: offsetProp = DEFAULT_OFFSET, disabled, content, trigger, role: roleProp = 'tooltip', openDelay = DEFAULT_OPEN_DELAY, closeDelay = DEFAULT_CLOSE_DELAY, className, style, qa, ...restProps }) {
const [anchorElement, setAnchorElement] = React.useState(null);
const { placement, middleware: placementMiddleware } = (0, utils_1.getPlacementOptions)(placementProp, false);
const [isOpen, setIsOpen] = (0, hooks_1.useControlledState)(open, false, onOpenChange);
const { refs, floatingStyles, context } = (0, react_1.useFloating)({
open: isOpen,
onOpenChange: setIsOpen,
strategy,
placement,
middleware: [
(0, react_1.offset)(offsetProp),
(0, react_1.shift)({
padding: constants_1.OVERFLOW_PADDING,
limiter: (0, react_1.limitShift)(),
}),
placementMiddleware,
],
whileElementsMounted: react_1.autoUpdate,
elements: {
reference: anchorElement,
},
});
const hover = (0, react_1.useHover)(context, {
enabled: trigger !== 'focus',
delay: { open: openDelay, close: closeDelay },
move: false,
});
const focus = (0, react_1.useFocus)(context);
const role = (0, react_1.useRole)(context, {
role: roleProp,
});
const dismiss = (0, react_1.useDismiss)(context, {
outsidePress: false,
});
const { getReferenceProps, getFloatingProps } = (0, react_1.useInteractions)([hover, focus, role, dismiss]);
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, isOpen && !disabled ? ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: refs.setFloating, style: {
position: 'absolute',
top: 0,
left: 0,
zIndex: 10000,
width: 'max-content',
...floatingStyles,
}, ...getFloatingProps(), children: (0, jsx_runtime_1.jsx)("div", { className: b(null, className), style: style, "data-qa": qa, ...(0, filterDOMProps_1.filterDOMProps)(restProps, { labelable: true }), children: content }) }) })) : null] }));
}
//# sourceMappingURL=Tooltip.js.map