@gravity-ui/uikit
Version:
Gravity UI base styling and components
73 lines (72 loc) • 3.43 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { autoUpdate, limitShift, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from '@floating-ui/react';
import { useControlledState, useForkRef } from "../../hooks/index.js";
import { OVERFLOW_PADDING } from "../Popup/constants.js";
import { getPlacementOptions } from "../Popup/utils.js";
import { Portal } from "../Portal/index.js";
import { block } from "../utils/cn.js";
import { filterDOMProps } from "../utils/filterDOMProps.js";
import { getElementRef } from "../utils/getElementRef.js";
import "./Tooltip.css";
const b = block('tooltip');
const DEFAULT_OPEN_DELAY = 1000;
const DEFAULT_CLOSE_DELAY = 0;
const DEFAULT_PLACEMENT = 'bottom';
const DEFAULT_OFFSET = 4;
export 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 } = getPlacementOptions(placementProp, false);
const [isOpen, setIsOpen] = useControlledState(open, false, onOpenChange);
const { refs, floatingStyles, context } = useFloating({
open: isOpen,
onOpenChange: setIsOpen,
strategy,
placement,
middleware: [
offset(offsetProp),
shift({
padding: OVERFLOW_PADDING,
limiter: limitShift(),
}),
placementMiddleware,
],
whileElementsMounted: autoUpdate,
elements: {
reference: anchorElement,
},
});
const hover = useHover(context, {
enabled: trigger !== 'focus',
delay: { open: openDelay, close: closeDelay },
move: false,
});
const focus = useFocus(context);
const role = useRole(context, {
role: roleProp,
});
const dismiss = useDismiss(context, {
outsidePress: false,
});
const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, role, dismiss]);
const anchorRef = useForkRef(setAnchorElement, React.isValidElement(children) ? 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 (_jsxs(React.Fragment, { children: [anchorNode, isOpen && !disabled ? (_jsx(Portal, { children: _jsx("div", { ref: refs.setFloating, style: {
position: 'absolute',
top: 0,
left: 0,
zIndex: 10000,
width: 'max-content',
...floatingStyles,
}, ...getFloatingProps(), children: _jsx("div", { className: b(null, className), style: style, "data-qa": qa, ...filterDOMProps(restProps, { labelable: true }), children: content }) }) })) : null] }));
}
//# sourceMappingURL=Tooltip.js.map