Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 | 20x 20x 20x 299x 299x 299x 299x 299x 299x 299x 299x 299x 299x 299x 258x 20x 20x 591x 591x 591x 299x 20x 299x 299x 299x 299x 20x 292x 292x 20x 20x 679x | import * as React from 'react';
import {
useFloating,
autoUpdate,
offset,
flip,
shift,
useHover,
useFocus,
useDismiss,
useRole,
useInteractions,
useMergeRefs,
FloatingPortal,
} from '@floating-ui/react';
import styles from './tooltip.module.css';
import type { Placement } from '@floating-ui/react';
interface TooltipOptions {
initialOpen?: boolean;
placement?: Placement;
open?: boolean;
onOpenChange?: (open: boolean) => void;
}
function useTooltip({
initialOpen = false,
placement = 'top',
open: controlledOpen,
onOpenChange: setControlledOpen,
}: TooltipOptions = {}) {
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
const open = controlledOpen ?? uncontrolledOpen;
const setOpen = setControlledOpen ?? setUncontrolledOpen;
const data = useFloating({
placement,
open,
onOpenChange: setOpen,
whileElementsMounted: autoUpdate,
middleware: [
offset(5),
flip({
fallbackAxisSideDirection: 'start',
}),
shift({ padding: 5 }),
],
});
const context = data.context;
const hover = useHover(context, {
move: false,
// == null: uncontrolled usage passes undefined, and strict === null kept these disabled
enabled: controlledOpen == null,
});
const focus = useFocus(context, {
enabled: controlledOpen == null,
});
const dismiss = useDismiss(context);
const role = useRole(context, { role: 'tooltip' });
const interactions = useInteractions([hover, focus, dismiss, role]);
return React.useMemo(
() => ({
open,
setOpen,
...interactions,
...data,
}),
[open, setOpen, interactions, data],
);
}
type ContextType = ReturnType<typeof useTooltip> | null;
const TooltipContext = React.createContext<ContextType>(null);
const useTooltipContext = () => {
const context = React.useContext(TooltipContext);
Iif (context === null) {
throw new Error('Tooltip components must be wrapped in <Tooltip />');
}
return context;
};
function Tooltip({ children, ...options }: { children: React.ReactNode } & TooltipOptions) {
// This can accept any props as options, e.g. `placement`,
// or other positioning options.
const tooltip = useTooltip(options);
return <TooltipContext.Provider value={tooltip}>{children}</TooltipContext.Provider>;
}
const TooltipTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & { asChild?: boolean }>(
function TooltipTrigger({ children, asChild = false, ...props }, propRef) {
// React Compiler 1.0.0 cannot compile this component: the `asChild` branch passes the
// merged ref to a function during render, which it treats as reading the ref. That branch
// is the pattern Floating UI documents. Passing the ref to `cloneElement` directly instead
// of through `getReferenceProps` was tried: the compiler in eslint-plugin-react-hooks
// 7.1.1 accepts it, but 1.0.0, the one that builds the site, still skips the component.
// So the opt-out is explicit here, and `refs` is disabled on the one line it reports.
'use no memo';
const context = useTooltipContext();
// SDD-L11-T10. This line used to cast `children` to bypass the type system and read
// `.ref` off it — the last such cast in src/ — and it was hiding a real deprecation rather
// than merely a missing type. React 19 removed `element.ref` and logs "Accessing
// element.ref was removed in React 19. ref is now a regular prop" every time this runs;
// `@types/react@19` dropped `ref` from `ReactElement` for the same reason, which is what
// made the cast necessary. Verified under react@19.1.0 that the element and the prop hold
// the same ref today, so reading it where it now lives keeps the merge below working and
// stops the warning. `null` rather than `undefined`: `useMergeRefs` takes `React.Ref`,
// which includes the first and not the second.
const childrenRef = React.isValidElement<{ ref?: React.Ref<HTMLElement> }>(children)
? (children.props.ref ?? null)
: null;
const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
// `asChild` allows the user to pass any element as the anchor
Iif (asChild && React.isValidElement(children)) {
return React.cloneElement(
children,
// eslint-disable-next-line react-hooks/refs -- compiler opt-out above, `use no memo`
context.getReferenceProps({
ref,
...props,
...(children.props || {}),
'data-state': context.open ? 'open' : 'closed',
} as React.HTMLProps<Element>),
);
}
return (
<span
ref={ref}
// The user can style the trigger based on the state
data-state={context.open ? 'open' : 'closed'}
{...context.getReferenceProps(props)}
>
{children}
</span>
);
},
);
const TooltipContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement>>(
function TooltipContent(props, propRef) {
const context = useTooltipContext();
const ref = useMergeRefs([context.refs.setFloating, propRef]);
return (
<FloatingPortal>
{context.open && (
<div
className={styles.tooltip}
ref={ref}
style={{
position: context.strategy,
top: context.y ?? 0,
left: context.x ?? 0,
visibility: context.x === null ? 'hidden' : 'visible',
...props.style,
}}
{...context.getFloatingProps(props)}
/>
)}
</FloatingPortal>
);
},
);
Tooltip.Trigger = TooltipTrigger;
Tooltip.Content = TooltipContent;
export default Tooltip;
|