@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
49 lines (48 loc) • 2.41 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useFocusWithin, useKeyPress } from 'ahooks';
import { Children, cloneElement, isValidElement, useRef, useState, } from 'react';
import { createPortal } from 'react-dom';
import { usePopperTooltip } from 'react-popper-tooltip';
import { useUIDSeed } from 'react-uid';
import { Elevator } from '../..';
import { isBrowser } from '../../utils/browser';
import * as styles from './tooltip.module.css';
export const Tooltip = ({ children, trigger, placement = 'bottom-start', open, style, maxWidth = '40ch', fill = false, interactive = false, delay = 500, root, }) => {
const [isOpen, setIsOpen] = useState(false);
const seedID = useUIDSeed();
const id = seedID('tooltip-content');
const tooltipContainerRef = useRef(null);
useKeyPress('esc', () => setIsOpen(false));
const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef,
/* eslint-disable @typescript-eslint/naming-convention */
visible, } = usePopperTooltip({
delayShow: delay,
delayHide: 300,
trigger: ['hover'],
visible: open ?? isOpen,
closeOnTriggerHidden: true,
interactive,
onVisibleChange: setIsOpen,
placement,
offset: [0, 16],
}, {
strategy: 'fixed',
});
const isFocusWithin = useFocusWithin(tooltipContainerRef, {
onFocus: () => {
setIsOpen(true);
},
onBlur: (e) => {
if (e.currentTarget?.parentElement !== tooltipContainerRef.current)
setIsOpen(false);
},
});
const dynamycStyle = {
'--max-w': maxWidth,
};
return (_jsxs("div", { "data-tooltip-fill": fill, className: styles.Tooltip, ref: tooltipContainerRef, "data-tooltip-has-focus-within": isFocusWithin, style: { ...style }, children: [Children.map(trigger, child => isValidElement(child) && cloneElement(child, {
ref: setTriggerRef,
tabIndex: 0,
'aria-describedby': id,
})), isBrowser() && visible && createPortal(_jsx(Elevator, { resting: 1, children: _jsxs("div", { ref: setTooltipRef, role: "tooltip", id: id, "data-theme": "dark", ...getTooltipProps({ className: styles.Balloon, style: dynamycStyle }), children: [children, _jsx("div", { ...getArrowProps({ className: styles.Arrow }) })] }) }), root ?? document.body)] }));
};