@dnb/eufemia/components/tooltip/Tooltip.js

DNB Eufemia Design System UI Library

"use client";

import React, { useContext, useEffect, useState } from 'react';
import clsx from 'clsx';
import Context from "../../shared/Context.js";
import { validateDOMAttributes } from "../../shared/component-helper.js";
import useId from "../../shared/helpers/useId.js";
import { applySpacing } from "../space/SpacingUtils.js";
import TooltipWithEvents from "./TooltipWithEvents.js";
import { defaultProps, getPropsFromTooltipProp, getTargetElement, injectTooltipSemantic } from "./TooltipHelpers.js";
import { TooltipContext } from "./TooltipContext.js";
import getRefElement from "../../shared/internal/getRefElement.js";
import { jsx as _jsx } from "react/jsx-runtime";
function Tooltip(localProps) {
  const context = useContext(Context);
  const props = resolveProps(localProps, context);
  const {
    targetElement,
    targetSelector,
    className,
    id,
    size,
    children,
    tooltip,
    fixedPosition,
    skipPortal,
    noAnimation,
    showDelay,
    hideDelay,
    open,
    placement,
    arrow,
    align,
    portalRootClass,
    omitDescribedBy,
    contentRef,
    triggerOffset,
    ...attributeProps
  } = props;
  const targetSource = targetElement || targetSelector;
  const target = useTooltipTarget(targetElement, targetSelector);
  const internalId = useId(id);
  const isControlled = typeof open === 'boolean';
  if (targetSource && !target) {
    return null;
  }
  const attributes = applySpacing(props, {
    ...attributeProps,
    className: clsx('dnb-tooltip', className, size === 'large' && 'dnb-tooltip--large')
  });
  validateDOMAttributes(localProps, attributes);
  return _jsx(TooltipContext, {
    value: {
      isControlled,
      internalId,
      props
    },
    children: _jsx(TooltipWithEvents, {
      target: target,
      attributes: attributes,
      ...props,
      children: children
    })
  });
}
function resolveProps(localProps, context) {
  var _context$getTranslati;
  const inherited = getPropsFromTooltipProp(localProps);
  const translation = ((_context$getTranslati = context.getTranslation) === null || _context$getTranslati === void 0 ? void 0 : _context$getTranslati.call(context, localProps)) || {};
  const tooltipTranslation = translation['Tooltip'] || {};
  return {
    ...defaultProps,
    ...localProps,
    ...inherited,
    ...tooltipTranslation,
    ...context.Tooltip
  };
}
function useTooltipTarget(targetElement, targetSelector) {
  const [target, setTarget] = useState(null);
  const source = targetElement || targetSelector;
  useEffect(() => {
    if (!source) {
      setTarget(null);
      return;
    }
    const resolved = getTargetElement(typeof source === 'string' ? source : getRefElement(source)) || (typeof source === 'string' ? null : source);
    setTarget(resolved);
  }, [source]);
  return target;
}
Tooltip.isTooltipComponent = true;
export { injectTooltipSemantic };
export default Tooltip;
//# sourceMappingURL=Tooltip.js.map