@blockstack/ui/dist/tooltip/index.esm.js

Blockstack UI components built using React and styled-components with styled-system.

import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
import { Children, cloneElement, createElement, Fragment } from 'react';
import { Box } from '../box/index.esm.js';
import { VisuallyHidden } from '../visually-hidden/index.esm.js';
import { isString, omit, pick } from '../utils/index.esm.js';
import { Portal } from '../portal/index.esm.js';
import { useTooltip } from './hooks.esm.js';

function Tooltip(props) {
  var children = props.children,
      label = props.label,
      shouldWrapChildren = props.shouldWrapChildren,
      ariaLabel = props['aria-label'],
      hasArrow = props.hasArrow,
      rest = _objectWithoutPropertiesLoose(props, ["children", "label", "shouldWrapChildren", "aria-label", "hasArrow"]);

  if (!label || label === '') {
    var child = Children.only(children);
    return cloneElement(child, _objectSpread2({}, child.props, {}, rest));
  }

  var _useTooltip = useTooltip(props),
      isOpen = _useTooltip.isOpen,
      getTriggerProps = _useTooltip.getTriggerProps,
      getTooltipProps = _useTooltip.getTooltipProps,
      getArrowProps = _useTooltip.getArrowProps;

  var trigger;

  if (isString(children) || shouldWrapChildren) {
    trigger = createElement(Box, Object.assign({
      as: "span",
      tabIndex: 0
    }, getTriggerProps()), children);
  } else {
    var _child = Children.only(children);

    trigger = cloneElement(_child, getTriggerProps(_child.props));
  }

  var hasAriaLabel = Boolean(ariaLabel);
  var baseTooltipProps = getTooltipProps(rest);

  var _ref = hasAriaLabel ? omit(baseTooltipProps, ['role', 'id']) : baseTooltipProps,
      style = _ref.style,
      tooltipProps = _objectWithoutPropertiesLoose(_ref, ["style"]);

  var hiddenProps = pick(baseTooltipProps, ['role', 'id']);
  return createElement(Fragment, null, trigger, isOpen && createElement(Portal, null, createElement(Box, Object.assign({
    paddingX: "8px",
    paddingY: "tight",
    bg: "ink",
    color: "white",
    borderRadius: "6px",
    textStyle: "caption.medium",
    maxWidth: "320px"
  }, tooltipProps, {
    style: _objectSpread2({}, style, {
      useSelect: 'none'
    })
  }), label, hasAriaLabel && createElement(VisuallyHidden, Object.assign({}, hiddenProps), ariaLabel), hasArrow && createElement(Box, Object.assign({
    "data-arrow": "",
    bg: "inherit"
  }, getArrowProps())))));
}

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