@activecollab/components/dist/esm/components/Tooltip/Tooltip.js

ActiveCollab Components

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
const _excluded = ["children"];
import React, { useState, forwardRef } from "react";
import classnames from "classnames";
import { StyledTooltip } from "./Styles";
import { Portal, useLayerContext } from "../../helpers";
import { layers } from "../../utils";
import useForkRef from "../../utils/useForkRef";
import { Popper } from "../Popper";
import { FromElement } from "../Transitions/FromElement";
const TooltipAnimation = _ref => {
  let children = _ref.children,
    props = _objectWithoutPropertiesLoose(_ref, _excluded);
  return /*#__PURE__*/React.createElement(FromElement, _extends({
    timeout: 0
  }, props), children);
};
export const Tooltip = /*#__PURE__*/forwardRef((_ref2, ref) => {
  let children = _ref2.children,
    title = _ref2.title,
    className = _ref2.className,
    style = _ref2.style,
    _ref2$isLight = _ref2.isLight,
    isLight = _ref2$isLight === void 0 ? false : _ref2$isLight,
    _ref2$placement = _ref2.placement,
    placement = _ref2$placement === void 0 ? "top" : _ref2$placement,
    _ref2$TransitionCompo = _ref2.TransitionComponent,
    TransitionComponent = _ref2$TransitionCompo === void 0 ? TooltipAnimation : _ref2$TransitionCompo,
    popperTooltipStyle = _ref2.popperTooltipStyle,
    popperTooltipClassName = _ref2.popperTooltipClassName,
    disable = _ref2.disable;
  const _useLayerContext = useLayerContext(),
    _useLayerContext$zInd = _useLayerContext.zIndex,
    zIndex = _useLayerContext$zInd === void 0 ? layers.skyscraper : _useLayerContext$zInd;
  const _useState = useState(false),
    open = _useState[0],
    setOpen = _useState[1];
  const _useState2 = useState(),
    childNode = _useState2[0],
    setChildNode = _useState2[1];
  const handleEnter = event => {
    const childrenProps = children.props;
    if (event.type === "mouseover" && childrenProps.onMouseOver) {
      childrenProps.onMouseOver(event);
    }
    childNode && childNode.removeAttribute("title");
    setOpen(true);
  };
  const handleLeave = event => {
    const childrenProps = children.props;
    if (event.type === "mouseleave" && childrenProps.onMouseLeave && event.currentTarget === childNode) {
      childrenProps.onMouseLeave(event);
    }
    setOpen(false);
  };
  const handleOwnRef = useForkRef(children.ref, ref);
  const handleRef = useForkRef(setChildNode, handleOwnRef);
  const childrenProps = {
    onMouseOver: handleEnter,
    onMouseLeave: handleLeave,
    ref: handleRef
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, childrenProps), !disable && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
    anchorEl: childNode,
    open: childNode ? open : false,
    placement: placement,
    transition: true,
    className: popperTooltipClassName,
    style: _extends({
      zIndex
    }, popperTooltipStyle),
    role: "tooltip"
  }, _ref3 => {
    let _ref3$transitionProps = _ref3.transitionProps,
      transitionProps = _ref3$transitionProps === void 0 ? {} : _ref3$transitionProps;
    return (
      /*#__PURE__*/
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore - due to @node/types making ts more strict
      React.createElement(TransitionComponent, _extends({}, transitionProps, {
        style: style
      }), /*#__PURE__*/React.createElement(StyledTooltip, {
        className: classnames("c-tooltip-ds", className),
        $isLight: isLight
      }, title))
    );
  })));
});
Tooltip.displayName = "Tooltip";
//# sourceMappingURL=Tooltip.js.map