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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React, { useContext, useEffect, useState } from 'react';
import classnames from 'classnames';
import Context from "../../shared/Context.js";
import { validateDOMAttributes } from "../../shared/component-helper.js";
import { convertSnakeCaseProps } from "../../shared/helpers/withSnakeCaseProps.js";
import useId from "../../shared/helpers/useId.js";
import { createSpacingClasses } from "../space/SpacingHelper.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";
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,
    active,
    position,
    arrow,
    align,
    portalRootClass,
    omitDescribedBy,
    contentRef,
    triggerOffset,
    forceActive,
    ...attributeProps
  } = props;
  const targetSource = targetElement || targetSelector;
  const target = useTooltipTarget(targetElement, targetSelector);
  const internalId = useId(id);
  const [isControlled] = useState(() => typeof active === 'boolean');
  if (targetSource && !target) {
    return null;
  }
  const classes = buildClassNames(size, className, props);
  const attributes = createAttributes(classes, attributeProps);
  validateDOMAttributes(localProps, attributes);
  return React.createElement(TooltipContext.Provider, {
    value: {
      isControlled,
      internalId,
      props
    }
  }, React.createElement(TooltipWithEvents, _extends({
    target: target,
    attributes: attributes,
    forceActive: forceActive
  }, props), 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 convertSnakeCaseProps({
    ...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;
}
function buildClassNames(size, className, props) {
  return classnames('dnb-tooltip', createSpacingClasses(props), className, size === 'large' && 'dnb-tooltip--large');
}
function createAttributes(className, attributeProps) {
  return {
    className,
    ...attributeProps
  };
}
Tooltip.isTooltipComponent = true;
export { injectTooltipSemantic };
export default Tooltip;
//# sourceMappingURL=Tooltip.js.map