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

Beans' product component library

import * as React from 'react';
import { useMergeRefs, FloatingPortal } from '@floating-ui/react';
import { useTooltip } from './useTooltip.js';

const Tooltip = React.forwardRef((props, ref) => {
  const {
    children,
    position,
    refProp = "ref",
    label,
    opened,
    offset = 5,
    width,
    events = { hover: true, focus: false, touch: false },
    zIndex,
    onClick,
    onMouseEnter,
    onMouseLeave,
    inline
  } = props;
  const tooltip = useTooltip({
    position,
    opened,
    events,
    offset,
    inline
  });
  const targetRef = useMergeRefs([tooltip.setReference, children.ref, ref]);
  return /* @__PURE__ */ React.createElement(React.Fragment, null, tooltip.opened && /* @__PURE__ */ React.createElement(FloatingPortal, null, /* @__PURE__ */ React.createElement(
    "sub",
    {
      ref: tooltip.setFloating,
      ...tooltip.getFloatingProps({
        // ref: tooltip.floating,
        className: "tooltip",
        style: {
          zIndex,
          width,
          display: "block",
          top: tooltip.y ?? 0,
          left: tooltip.x ?? 0
        }
      })
    },
    label
  )), React.cloneElement(
    children,
    tooltip.getReferenceProps({
      onClick,
      onMouseEnter,
      onMouseLeave,
      onMouseMove: props.onMouseMove,
      onPointerDown: props.onPointerDown,
      onPointerEnter: props.onPointerEnter,
      [refProp]: targetRef,
      className: children.props.className,
      ...children.props
    })
  ));
});
Tooltip.displayName = "Tooltip";

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