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

Beans' product component library

import * as React from 'react';
import { useFloating, offset, shift, flip, inline, autoUpdate, useInteractions, useHover, useFocus, useRole, useDismiss } from '@floating-ui/react';

function useTooltip(settings) {
  const [uncontrolledOpened, setUncontrolledOpened] = React.useState(false);
  const opened = settings.opened ?? uncontrolledOpened;
  const setOpen = settings.onOpenChange ?? 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 === void 0 })
  ]);
  return {
    x,
    y,
    reference: refs.reference,
    floating: refs.floating,
    setFloating: refs.setFloating,
    setReference: refs.setReference,
    getFloatingProps,
    getReferenceProps,
    opened,
    placement
  };
}

export { useTooltip };
//# sourceMappingURL=useTooltip.js.map