@navinc/base-react-components
Version:
Nav's Pattern Library
105 lines • 5.46 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { useState } from 'react';
import { Icon } from '../icon/icon.js';
import { cn } from '../../cn.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
import { addClassNameTo } from '../../add-classname-to.js';
export const TooltipInternal = {
Provider: styledBackwardsCompatibility(TooltipPrimitive.Provider),
Root: styledBackwardsCompatibility(TooltipPrimitive.Root),
Trigger: styledBackwardsCompatibility(TooltipPrimitive.Trigger),
Content: addClassNameTo(TooltipPrimitive.Content,
/* cn */ 'max-w-[300px] p-100 rounded-100 bg-inverseSurface text-inverseOnSurface shadow-elevation3'),
Arrow: styledBackwardsCompatibility(TooltipPrimitive.Arrow),
Portal: styledBackwardsCompatibility(TooltipPrimitive.Portal),
};
/** Wayfinder Tooltip
*
* Tooltip component that can be used to show additional information when hovering over an element.
* You can pass in a string as a
* Note that you will need to make sure the tooltip is inside a `TooltipInternal.Provider` to work correctly.
*
* @description The Tooltip component is used to show additional information when hovering over an element.
*
* @returns {ReactNode} Tooltip component
*
* if you want to use a tooltip with a Copy component inside:
* @example
*
* ```tsx
* <Tooltip content="This is inside a tooltip!" label="Hover over the me to see the tooltip" />
* ```
*
* if you want to use a tooltip with an Icon component inside:
* @example
*
* ```tsx
* <Tooltip content="This is inside a tooltip!">
* <Icon name="actions/download" />
* </Tooltip>
* ```
*
* if you pass in nothing, then the default icon will be an info icon:
* @example
*
* ```tsx
* <Tooltip content="This is inside a tooltip!" />
* ```
*
*/
export const Tooltip = styledBackwardsCompatibility((_a) => {
var { content, label, children, defaultOpen = false, side = 'bottom', delayDuration = 250, sideOffset = 6, onOpenChange, withUnderline, tooltipTriggerClassName, container } = _a, props = __rest(_a, ["content", "label", "children", "defaultOpen", "side", "delayDuration", "sideOffset", "onOpenChange", "withUnderline", "tooltipTriggerClassName", "container"]);
const [openTooltip, setOpenTooltip] = useState(defaultOpen);
const [wasClickTriggered, setWasClickTriggered] = useState(false);
const handleOpenChange = (open) => {
// Only allow the tooltip to close if it wasn't opened by a click
// or if we're explicitly closing it with another click
if (!open && wasClickTriggered) {
return;
}
setOpenTooltip(open);
if (onOpenChange) {
onOpenChange(open);
}
};
const renderChildren = (label, children) => {
if (label) {
return (_jsx("span", { className: "body2 text-onSurface underline underline-offset-[3px] decoration-dashed decoration-onSurfaceVariant decoration-[1px]", children: label }));
}
if (children) {
return children;
}
return _jsx(Icon, { name: "info" });
};
return (_jsxs(TooltipInternal.Root, { delayDuration: delayDuration, open: openTooltip, onOpenChange: handleOpenChange, children: [_jsx(TooltipInternal.Trigger, { onClick: (e) => {
e.stopPropagation();
setWasClickTriggered(true);
setOpenTooltip((prev) => !prev);
}, onMouseEnter: () => setWasClickTriggered(false), onFocus: () => setTimeout(() => setOpenTooltip(true), 0), asChild: true, children: _jsx("span", {
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- We need to have this so we can make the tooltip work
tabIndex: 0, className: cn('inline-block', {
'underline decoration-current decoration-dashed decoration-1 underline-offset-[3px]': withUnderline,
}, tooltipTriggerClassName), children: renderChildren(label, children) }) }), _jsx(TooltipInternal.Portal, { container: container, children: _jsx(TooltipInternal.Content, Object.assign({ collisionPadding: 10, sideOffset: sideOffset, side: side }, props, { onPointerDownOutside: (e) => {
var _a;
// Don't close if clicking a link
if (!(e.target instanceof HTMLAnchorElement)) {
setOpenTooltip(false);
setWasClickTriggered(false);
}
// Call the original handler if provided
(_a = props.onPointerDownOutside) === null || _a === void 0 ? void 0 : _a.call(props, e);
}, children: _jsx("span", { className: "body2 text-inverseOnSurface", children: content }) })) })] }));
});
//# sourceMappingURL=tooltip.js.map