Return

All tests / Tooltip index.tsx

89.18% Statements 33/37
64% Branches 16/25
100% Functions 6/6
91.42% Lines 32/35

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 16012x                           12x 12x                               80x   80x 80x   80x                           80x   80x       80x     80x 80x   80x   80x 73x                       12x   12x 158x   158x       158x           80x       12x   80x 80x 80x     80x                                                 12x       78x 78x                                           12x 12x   134x  
import * as React from 'react';
import {
    useFloating,
    autoUpdate,
    offset,
    flip,
    shift,
    useHover,
    useFocus,
    useDismiss,
    useRole,
    useInteractions,
    useMergeRefs,
    FloatingPortal,
} from '@floating-ui/react';
import styles from './tooltip.module.css';
import type { Placement } from '@floating-ui/react';
 
interface TooltipOptions {
    initialOpen?: boolean;
    placement?: Placement;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
}
 
export function useTooltip({
    initialOpen = false,
    placement = 'top',
    open: controlledOpen,
    onOpenChange: setControlledOpen,
}: TooltipOptions = {}) {
    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
 
    const open = controlledOpen ?? uncontrolledOpen;
    const setOpen = setControlledOpen ?? setUncontrolledOpen;
 
    const data = useFloating({
        placement,
        open,
        onOpenChange: setOpen,
        whileElementsMounted: autoUpdate,
        middleware: [
            offset(5),
            flip({
                fallbackAxisSideDirection: 'start',
            }),
            shift({ padding: 5 }),
        ],
    });
 
    const context = data.context;
 
    const hover = useHover(context, {
        move: false,
        enabled: controlledOpen == null,
    });
    const focus = useFocus(context, {
        enabled: controlledOpen == null,
    });
    const dismiss = useDismiss(context);
    const role = useRole(context, { role: 'tooltip' });
 
    const interactions = useInteractions([hover, focus, dismiss, role]);
 
    return React.useMemo(
        () => ({
            open,
            setOpen,
            ...interactions,
            ...data,
        }),
        [open, setOpen, interactions, data]
    );
}
 
type ContextType = ReturnType<typeof useTooltip> | null;
 
const TooltipContext = React.createContext<ContextType>(null);
 
export const useTooltipContext = () => {
    const context = React.useContext(TooltipContext);
 
    Iif (context == null) {
        throw new Error('Tooltip components must be wrapped in <Tooltip />');
    }
 
    return context;
};
 
function Tooltip({ children, ...options }: { children: React.ReactNode } & TooltipOptions) {
    // This can accept any props as options, e.g. `placement`,
    // or other positioning options.
    const tooltip = useTooltip(options);
    return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
}
 
const TooltipTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & { asChild?: boolean }>(
    function TooltipTrigger({ children, asChild = false, ...props }, propRef) {
        const context = useTooltipContext();
        const childrenRef = (children as any).ref;
        const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
 
        // `asChild` allows the user to pass any element as the anchor
        Iif (asChild && React.isValidElement(children)) {
            return React.cloneElement(
                children,
                context.getReferenceProps({
                    ref,
                    ...props,
                    ...(children.props || {}),
                    'data-state': context.open ? 'open' : 'closed',
                } as React.HTMLProps<Element>)
            );
        }
 
        return (
            <span
                ref={ref}
                // The user can style the trigger based on the state
                data-state={context.open ? 'open' : 'closed'}
                {...context.getReferenceProps(props)}
            >
                {children}
            </span>
        );
    }
);
 
const TooltipContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(function TooltipContent(
    props,
    propRef
) {
    const context = useTooltipContext();
    const ref = useMergeRefs([context.refs.setFloating, propRef]);
 
    return (
        <FloatingPortal>
            {context.open && (
                <div
                    className={styles.tooltip}
                    ref={ref}
                    style={{
                        position: context.strategy,
                        top: context.y ?? 0,
                        left: context.x ?? 0,
                        visibility: context.x == null ? 'hidden' : 'visible',
                        ...props.style,
                    }}
                    {...context.getFloatingProps(props)}
                />
            )}
        </FloatingPortal>
    );
});
 
Tooltip.Trigger = TooltipTrigger;
Tooltip.Content = TooltipContent;
 
export default Tooltip;