@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
94 lines (93 loc) • 2.79 kB
JavaScript
"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) {
const inherited = getPropsFromTooltipProp(localProps);
const translation = context.getTranslation?.(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