@dnb/eufemia/cjs/components/tooltip/TooltipPortal.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _componentHelper = require("../../shared/component-helper");
var _useMountEffect = _interopRequireDefault(require("../../shared/helpers/useMountEffect"));
var _TooltipContainer = _interopRequireDefault(require("./TooltipContainer"));
var _shared = require("../../shared");
var _Theme = require("../../shared/Theme");
var _PortalRoot = _interopRequireDefault(require("../PortalRoot"));
var _ModalContext = _interopRequireDefault(require("../modal/ModalContext"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
let tooltipPortal;
if (typeof globalThis !== 'undefined') {
  globalThis.tooltipPortal = globalThis.tooltipPortal || {};
  tooltipPortal = globalThis.tooltipPortal;
} else {
  tooltipPortal = {};
}
function TooltipPortal(props) {
  const {
    active,
    targetElement,
    hideDelay,
    keepInDOM,
    noAnimation,
    children
  } = props;
  const modalContext = (0, _react.useContext)(_ModalContext.default);
  const [isMounted, setIsMounted] = (0, _react.useState)(false);
  const [isActive, setIsActive] = (0, _react.useState)(active);
  const [id] = (0, _react.useState)(() => (0, _componentHelper.makeUniqueId)());
  const isInDOM = (0, _react.useRef)(false);
  const theme = (0, _shared.useTheme)();
  const makeTooltip = (0, _react.useCallback)(() => {
    if (!tooltipPortal[id]) {
      tooltipPortal[id] = {
        count: 0
      };
    }
  }, [id]);
  const clearTimers = (0, _react.useCallback)(() => {
    var _tooltipPortal$id, _tooltipPortal$id2;
    clearTimeout((_tooltipPortal$id = tooltipPortal[id]) === null || _tooltipPortal$id === void 0 ? void 0 : _tooltipPortal$id.delayTimeout);
    clearTimeout((_tooltipPortal$id2 = tooltipPortal[id]) === null || _tooltipPortal$id2 === void 0 ? void 0 : _tooltipPortal$id2.hiddenTimeout);
  }, [id]);
  (0, _react.useEffect)(() => {
    setIsMounted(true);
    clearTimers();
    if (active) {
      makeTooltip();
      setIsActive(true);
      isInDOM.current = true;
      if (!isMounted) {
        tooltipPortal[id].count++;
      }
    } else if (!active && isMounted) {
      const delayRender = () => {
        setIsActive(false);
      };
      const delayHidden = () => {
        isInDOM.current = false;
      };
      if (noAnimation || globalThis.IS_TEST) {
        delayRender();
        delayHidden();
      } else if (tooltipPortal[id]) {
        const delay = parseFloat(String(hideDelay));
        tooltipPortal[id].delayTimeout = setTimeout(delayRender, delay);
        tooltipPortal[id].hiddenTimeout = setTimeout(delayHidden, delay + 300);
      }
    }
    return clearTimers;
  }, [active, clearTimers, hideDelay, id, isMounted, makeTooltip, noAnimation]);
  (0, _useMountEffect.default)(() => {
    if (keepInDOM) {
      makeTooltip();
    }
  });
  if (isInDOM.current || keepInDOM) {
    return _react.default.createElement(_PortalRoot.default, null, _react.default.createElement("div", {
      className: (0, _classnames.default)('dnb-tooltip__portal', theme && (0, _Theme.getThemeClasses)(theme), (modalContext === null || modalContext === void 0 ? void 0 : modalContext.id) && 'dnb-tooltip--inside-modal')
    }, _react.default.createElement(_TooltipContainer.default, _extends({}, props, {
      targetElement: targetElement,
      active: isActive
    }), children)));
  }
  return null;
}
var _default = exports.default = TooltipPortal;
//# sourceMappingURL=TooltipPortal.js.map