@trellixio/roaster-coffee/lib/components/Tooltip/useTooltip.js

Beans' product component library

import * as React from 'react';
import { useFloating, flip, offset, shift, useInteractions, autoUpdate, useHover, useFocus, useRole, useDismiss, inline, } from '@floating-ui/react';
export function useTooltip(settings) {
    var _a, _b;
    const [uncontrolledOpened, setUncontrolledOpened] = React.useState(false);
    const opened = (_a = settings.opened) !== null && _a !== void 0 ? _a : uncontrolledOpened;
    const setOpen = (_b = settings.onOpenChange) !== null && _b !== void 0 ? _b : setUncontrolledOpened;
    const { x, y, refs, context, placement } = useFloating({
        placement: settings.position,
        open: opened,
        whileElementsMounted: autoUpdate,
        onOpenChange: setOpen,
        middleware: [
            offset(settings.offset),
            shift({ padding: 8 }),
            flip({
                fallbackAxisSideDirection: 'start',
            }),
            ...(settings.inline ? [inline()] : []),
        ],
    });
    const { getReferenceProps, getFloatingProps } = useInteractions([
        useHover(context, {
            enabled: settings.events.hover,
            mouseOnly: !settings.events.touch,
        }),
        useFocus(context, { enabled: settings.events.focus }),
        useRole(context, { role: 'tooltip' }),
        useDismiss(context, { enabled: typeof settings.opened === undefined }),
    ]);
    return {
        x,
        y,
        reference: refs.reference,
        floating: refs.floating,
        setFloating: refs.setFloating,
        setReference: refs.setReference,
        getFloatingProps,
        getReferenceProps,
        opened,
        placement,
    };
}