@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
53 lines (52 loc) • 2.75 kB
JavaScript
'use client';
import { autoUpdate, useFocus } from '@floating-ui/react';
import { twMerge } from '@vertisanpro/tailwind-merge';
import React, { useEffect, useRef, useState } from 'react';
import { useBaseFLoating, useFloatingInteractions } from '../../hooks/use-floating';
import { getArrowPlacement } from './helpers';
/**
* @see https://floating-ui.com/docs/react-dom-interactions
*/
export const Floating = ({ animation = 'duration-300', arrow = true, children, className, content, placement = 'top', style = 'dark', theme, trigger = 'hover', minWidth, ...props }) => {
const arrowRef = useRef(null);
const [open, setOpen] = useState(false);
const floatingProperties = useBaseFLoating({
open,
placement,
arrowRef,
setOpen,
});
const { context, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, refs, strategy, update, x, y, } = floatingProperties;
const focus = useFocus(context);
const { getFloatingProps, getReferenceProps } = useFloatingInteractions({
context,
role: 'tooltip',
trigger,
interactions: [focus],
});
useEffect(() => {
if (refs.reference.current && refs.floating.current && open) {
return autoUpdate(refs.reference.current, refs.floating.current, update);
}
}, [open, refs.floating, refs.reference, update]);
return (React.createElement(React.Fragment, null,
React.createElement("div", { ref: refs.setReference, className: theme.target, "data-testid": "flowbite-tooltip-target", ...getReferenceProps() }, children),
React.createElement("div", { ref: refs.setFloating, "data-testid": "flowbite-tooltip", ...getFloatingProps({
className: twMerge(theme.base, animation && `${theme.animation} ${animation}`, !open && theme.hidden, theme.style[style], className),
style: {
position: strategy,
top: y ?? ' ',
left: x ?? ' ',
minWidth,
},
...props,
}) },
React.createElement("div", { className: theme.content }, content),
arrow && (React.createElement("div", { className: twMerge(theme.arrow.base, style === 'dark' && theme.arrow.style.dark, style === 'light' && theme.arrow.style.light, style === 'auto' && theme.arrow.style.auto), "data-testid": "flowbite-tooltip-arrow", ref: arrowRef, style: {
top: arrowY ?? ' ',
left: arrowX ?? ' ',
right: ' ',
bottom: ' ',
[getArrowPlacement({ placement: floatingProperties.placement })]: theme.arrow.placement,
} }, "\u00A0")))));
};