@nex-ui/react
Version:
🎉 A beautiful, modern, and reliable React component library.
133 lines (130 loc) • 4.07 kB
JavaScript
"use client";
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useId, useMemo } from 'react';
import { useDefaultProps } from '../utils/useDefaultProps.mjs';
import { Popper } from '../popper/Popper.mjs';
import { useStyles } from '../utils/useStyles.mjs';
import { tooltipRecipe } from '../../theme/recipes/tooltip.mjs';
import { useSlotClasses } from '../utils/useSlotClasses.mjs';
import { useSlot } from '../utils/useSlot.mjs';
import { PopperRoot } from '../popper/PopperRoot.mjs';
import { PopperContent } from '../popper/PopperContent.mjs';
import { PopperTrigger } from '../popper/PopperTrigger.mjs';
import { usePopper } from '../popper/PopperContext.mjs';
const slots = [
'root',
'content'
];
const useSlotAriaProps = (ownerState)=>{
const id = useId();
const rootId = ownerState.id ?? `nui-tooltip-${id}`;
const { open } = usePopper();
const { role = 'tooltip' } = ownerState;
return useMemo(()=>{
return {
root: {
role,
id: rootId
},
trigger: {
'aria-describedby': open ? rootId : undefined
}
};
}, [
open,
rootId,
role
]);
};
const TooltipRoot = (props)=>{
const { children, content, classNames, slotProps, motionProps, interactive, closeOnClick, maxHeight, maxWidth = 360, color = 'default', size = 'md', radius = 'md', ...remainingProps } = props;
const ownerState = {
...props,
size,
radius,
color,
interactive,
closeOnClick
};
const slotAriaProps = useSlotAriaProps(ownerState);
const styles = useStyles({
ownerState,
name: 'Tooltip',
recipe: tooltipRecipe
});
const slotClasses = useSlotClasses({
name: 'Tooltip',
slots,
classNames
});
const [TooltipRootRoot, getTooltipRootRootProps] = useSlot({
style: styles.root,
elementType: PopperRoot,
classNames: slotClasses.root,
shouldForwardComponent: false,
externalForwardedProps: {
...remainingProps,
...motionProps
},
dataAttrs: {
color,
size,
radius
},
a11y: slotAriaProps.root
});
const [TooltipRootContent, getTooltipRootContentProps] = useSlot({
style: styles.content,
elementType: PopperContent,
classNames: slotClasses.content,
shouldForwardComponent: false,
externalSlotProps: slotProps?.content,
externalForwardedProps: {
maxWidth,
maxHeight
}
});
return /*#__PURE__*/ jsxs(Fragment, {
children: [
/*#__PURE__*/ jsx(PopperTrigger, {
interactive: interactive,
closeOnClick: closeOnClick,
action: "hover",
elementProps: slotAriaProps.trigger,
children: children
}),
/*#__PURE__*/ jsx(TooltipRootRoot, {
...getTooltipRootRootProps(),
children: /*#__PURE__*/ jsx(TooltipRootContent, {
...getTooltipRootContentProps(),
children: content
})
})
]
});
};
const Tooltip = (inProps)=>{
const props = useDefaultProps({
name: 'Tooltip',
props: inProps
});
const { children, content, open, onOpenChange, openDelay, closeDelay, defaultOpen, ...remainingProps } = props;
if (content == null || content === '') {
return children;
}
return /*#__PURE__*/ jsx(Popper, {
open: open,
onOpenChange: onOpenChange,
openDelay: openDelay,
closeDelay: closeDelay,
defaultOpen: defaultOpen,
children: /*#__PURE__*/ jsx(TooltipRoot, {
content: content,
...remainingProps,
children: children
})
});
};
Tooltip.displayName = 'Tooltip';
TooltipRoot.displayName = 'TooltipRoot';
export { Tooltip };