723 lines
27 KiB
JavaScript
723 lines
27 KiB
JavaScript
"use client";
|
|
import {
|
|
DismissableLayer,
|
|
Portal
|
|
} from "./chunk-JV5O627A.js";
|
|
import {
|
|
Root
|
|
} from "./chunk-3GV3KT4M.js";
|
|
import {
|
|
Anchor,
|
|
Arrow,
|
|
Content,
|
|
Root2,
|
|
createPopperScope
|
|
} from "./chunk-6UE7W7QM.js";
|
|
import "./chunk-MR3TNHRB.js";
|
|
import "./chunk-J3JCCWF4.js";
|
|
import {
|
|
useId
|
|
} from "./chunk-5I6CIHEW.js";
|
|
import {
|
|
useControllableState
|
|
} from "./chunk-H4VE5LV5.js";
|
|
import {
|
|
composeEventHandlers,
|
|
useLayoutEffect2
|
|
} from "./chunk-SZRZRZSM.js";
|
|
import {
|
|
Primitive
|
|
} from "./chunk-H55D7VYG.js";
|
|
import "./chunk-R6S4VRB5.js";
|
|
import {
|
|
Slottable,
|
|
useComposedRefs
|
|
} from "./chunk-4WIT4MX7.js";
|
|
import {
|
|
require_jsx_runtime
|
|
} from "./chunk-S77I6LSE.js";
|
|
import {
|
|
require_react
|
|
} from "./chunk-3TFVT2CW.js";
|
|
import {
|
|
__toESM
|
|
} from "./chunk-4MBMRILA.js";
|
|
|
|
// node_modules/@radix-ui/react-tooltip/dist/index.mjs
|
|
var React4 = __toESM(require_react(), 1);
|
|
|
|
// node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-context/dist/index.mjs
|
|
var React = __toESM(require_react(), 1);
|
|
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
|
|
function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
let defaultContexts = [];
|
|
function createContext3(rootComponentName, defaultContext) {
|
|
const BaseContext = React.createContext(defaultContext);
|
|
const index = defaultContexts.length;
|
|
defaultContexts = [...defaultContexts, defaultContext];
|
|
const Provider2 = (props) => {
|
|
var _a;
|
|
const { scope, children, ...context } = props;
|
|
const Context = ((_a = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a[index]) || BaseContext;
|
|
const value = React.useMemo(() => context, Object.values(context));
|
|
return (0, import_jsx_runtime.jsx)(Context.Provider, { value, children });
|
|
};
|
|
Provider2.displayName = rootComponentName + "Provider";
|
|
function useContext2(consumerName, scope) {
|
|
var _a;
|
|
const Context = ((_a = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a[index]) || BaseContext;
|
|
const context = React.useContext(Context);
|
|
if (context) return context;
|
|
if (defaultContext !== void 0) return defaultContext;
|
|
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
|
|
}
|
|
return [Provider2, useContext2];
|
|
}
|
|
const createScope = () => {
|
|
const scopeContexts = defaultContexts.map((defaultContext) => {
|
|
return React.createContext(defaultContext);
|
|
});
|
|
return function useScope(scope) {
|
|
const contexts = (scope == null ? void 0 : scope[scopeName]) || scopeContexts;
|
|
return React.useMemo(
|
|
() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
|
|
[scope, contexts]
|
|
);
|
|
};
|
|
};
|
|
createScope.scopeName = scopeName;
|
|
return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
|
|
}
|
|
function composeContextScopes(...scopes) {
|
|
const baseScope = scopes[0];
|
|
if (scopes.length === 1) return baseScope;
|
|
const createScope = () => {
|
|
const scopeHooks = scopes.map((createScope2) => ({
|
|
useScope: createScope2(),
|
|
scopeName: createScope2.scopeName
|
|
}));
|
|
return function useComposedScopes(overrideScopes) {
|
|
const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
|
|
const scopeProps = useScope(overrideScopes);
|
|
const currentScope = scopeProps[`__scope${scopeName}`];
|
|
return { ...nextScopes2, ...currentScope };
|
|
}, {});
|
|
return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
|
|
};
|
|
};
|
|
createScope.scopeName = baseScope.scopeName;
|
|
return createScope;
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-presence/dist/index.mjs
|
|
var React2 = __toESM(require_react(), 1);
|
|
var React3 = __toESM(require_react(), 1);
|
|
function useStateMachine(initialState, machine) {
|
|
return React3.useReducer((state, event) => {
|
|
const nextState = machine[state][event];
|
|
return nextState ?? state;
|
|
}, initialState);
|
|
}
|
|
var Presence = (props) => {
|
|
const { present, children } = props;
|
|
const presence = usePresence(present);
|
|
const child = typeof children === "function" ? children({ present: presence.isPresent }) : React2.Children.only(children);
|
|
const ref = useComposedRefs(presence.ref, getElementRef(child));
|
|
const forceMount = typeof children === "function";
|
|
return forceMount || presence.isPresent ? React2.cloneElement(child, { ref }) : null;
|
|
};
|
|
Presence.displayName = "Presence";
|
|
function usePresence(present) {
|
|
const [node, setNode] = React2.useState();
|
|
const stylesRef = React2.useRef({});
|
|
const prevPresentRef = React2.useRef(present);
|
|
const prevAnimationNameRef = React2.useRef("none");
|
|
const initialState = present ? "mounted" : "unmounted";
|
|
const [state, send] = useStateMachine(initialState, {
|
|
mounted: {
|
|
UNMOUNT: "unmounted",
|
|
ANIMATION_OUT: "unmountSuspended"
|
|
},
|
|
unmountSuspended: {
|
|
MOUNT: "mounted",
|
|
ANIMATION_END: "unmounted"
|
|
},
|
|
unmounted: {
|
|
MOUNT: "mounted"
|
|
}
|
|
});
|
|
React2.useEffect(() => {
|
|
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
|
|
}, [state]);
|
|
useLayoutEffect2(() => {
|
|
const styles = stylesRef.current;
|
|
const wasPresent = prevPresentRef.current;
|
|
const hasPresentChanged = wasPresent !== present;
|
|
if (hasPresentChanged) {
|
|
const prevAnimationName = prevAnimationNameRef.current;
|
|
const currentAnimationName = getAnimationName(styles);
|
|
if (present) {
|
|
send("MOUNT");
|
|
} else if (currentAnimationName === "none" || (styles == null ? void 0 : styles.display) === "none") {
|
|
send("UNMOUNT");
|
|
} else {
|
|
const isAnimating = prevAnimationName !== currentAnimationName;
|
|
if (wasPresent && isAnimating) {
|
|
send("ANIMATION_OUT");
|
|
} else {
|
|
send("UNMOUNT");
|
|
}
|
|
}
|
|
prevPresentRef.current = present;
|
|
}
|
|
}, [present, send]);
|
|
useLayoutEffect2(() => {
|
|
if (node) {
|
|
let timeoutId;
|
|
const ownerWindow = node.ownerDocument.defaultView ?? window;
|
|
const handleAnimationEnd = (event) => {
|
|
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
const isCurrentAnimation = currentAnimationName.includes(event.animationName);
|
|
if (event.target === node && isCurrentAnimation) {
|
|
send("ANIMATION_END");
|
|
if (!prevPresentRef.current) {
|
|
const currentFillMode = node.style.animationFillMode;
|
|
node.style.animationFillMode = "forwards";
|
|
timeoutId = ownerWindow.setTimeout(() => {
|
|
if (node.style.animationFillMode === "forwards") {
|
|
node.style.animationFillMode = currentFillMode;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
const handleAnimationStart = (event) => {
|
|
if (event.target === node) {
|
|
prevAnimationNameRef.current = getAnimationName(stylesRef.current);
|
|
}
|
|
};
|
|
node.addEventListener("animationstart", handleAnimationStart);
|
|
node.addEventListener("animationcancel", handleAnimationEnd);
|
|
node.addEventListener("animationend", handleAnimationEnd);
|
|
return () => {
|
|
ownerWindow.clearTimeout(timeoutId);
|
|
node.removeEventListener("animationstart", handleAnimationStart);
|
|
node.removeEventListener("animationcancel", handleAnimationEnd);
|
|
node.removeEventListener("animationend", handleAnimationEnd);
|
|
};
|
|
} else {
|
|
send("ANIMATION_END");
|
|
}
|
|
}, [node, send]);
|
|
return {
|
|
isPresent: ["mounted", "unmountSuspended"].includes(state),
|
|
ref: React2.useCallback((node2) => {
|
|
if (node2) stylesRef.current = getComputedStyle(node2);
|
|
setNode(node2);
|
|
}, [])
|
|
};
|
|
}
|
|
function getAnimationName(styles) {
|
|
return (styles == null ? void 0 : styles.animationName) || "none";
|
|
}
|
|
function getElementRef(element) {
|
|
var _a, _b;
|
|
let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
|
|
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
if (mayWarn) {
|
|
return element.ref;
|
|
}
|
|
getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
|
|
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
if (mayWarn) {
|
|
return element.props.ref;
|
|
}
|
|
return element.props.ref || element.ref;
|
|
}
|
|
|
|
// node_modules/@radix-ui/react-tooltip/dist/index.mjs
|
|
var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
|
|
var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
|
|
createPopperScope
|
|
]);
|
|
var usePopperScope = createPopperScope();
|
|
var PROVIDER_NAME = "TooltipProvider";
|
|
var DEFAULT_DELAY_DURATION = 700;
|
|
var TOOLTIP_OPEN = "tooltip.open";
|
|
var [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME);
|
|
var TooltipProvider = (props) => {
|
|
const {
|
|
__scopeTooltip,
|
|
delayDuration = DEFAULT_DELAY_DURATION,
|
|
skipDelayDuration = 300,
|
|
disableHoverableContent = false,
|
|
children
|
|
} = props;
|
|
const [isOpenDelayed, setIsOpenDelayed] = React4.useState(true);
|
|
const isPointerInTransitRef = React4.useRef(false);
|
|
const skipDelayTimerRef = React4.useRef(0);
|
|
React4.useEffect(() => {
|
|
const skipDelayTimer = skipDelayTimerRef.current;
|
|
return () => window.clearTimeout(skipDelayTimer);
|
|
}, []);
|
|
return (0, import_jsx_runtime2.jsx)(
|
|
TooltipProviderContextProvider,
|
|
{
|
|
scope: __scopeTooltip,
|
|
isOpenDelayed,
|
|
delayDuration,
|
|
onOpen: React4.useCallback(() => {
|
|
window.clearTimeout(skipDelayTimerRef.current);
|
|
setIsOpenDelayed(false);
|
|
}, []),
|
|
onClose: React4.useCallback(() => {
|
|
window.clearTimeout(skipDelayTimerRef.current);
|
|
skipDelayTimerRef.current = window.setTimeout(
|
|
() => setIsOpenDelayed(true),
|
|
skipDelayDuration
|
|
);
|
|
}, [skipDelayDuration]),
|
|
isPointerInTransitRef,
|
|
onPointerInTransitChange: React4.useCallback((inTransit) => {
|
|
isPointerInTransitRef.current = inTransit;
|
|
}, []),
|
|
disableHoverableContent,
|
|
children
|
|
}
|
|
);
|
|
};
|
|
TooltipProvider.displayName = PROVIDER_NAME;
|
|
var TOOLTIP_NAME = "Tooltip";
|
|
var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
|
|
var Tooltip = (props) => {
|
|
const {
|
|
__scopeTooltip,
|
|
children,
|
|
open: openProp,
|
|
defaultOpen = false,
|
|
onOpenChange,
|
|
disableHoverableContent: disableHoverableContentProp,
|
|
delayDuration: delayDurationProp
|
|
} = props;
|
|
const providerContext = useTooltipProviderContext(TOOLTIP_NAME, props.__scopeTooltip);
|
|
const popperScope = usePopperScope(__scopeTooltip);
|
|
const [trigger, setTrigger] = React4.useState(null);
|
|
const contentId = useId();
|
|
const openTimerRef = React4.useRef(0);
|
|
const disableHoverableContent = disableHoverableContentProp ?? providerContext.disableHoverableContent;
|
|
const delayDuration = delayDurationProp ?? providerContext.delayDuration;
|
|
const wasOpenDelayedRef = React4.useRef(false);
|
|
const [open = false, setOpen] = useControllableState({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen,
|
|
onChange: (open2) => {
|
|
if (open2) {
|
|
providerContext.onOpen();
|
|
document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
|
|
} else {
|
|
providerContext.onClose();
|
|
}
|
|
onOpenChange == null ? void 0 : onOpenChange(open2);
|
|
}
|
|
});
|
|
const stateAttribute = React4.useMemo(() => {
|
|
return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
|
|
}, [open]);
|
|
const handleOpen = React4.useCallback(() => {
|
|
window.clearTimeout(openTimerRef.current);
|
|
openTimerRef.current = 0;
|
|
wasOpenDelayedRef.current = false;
|
|
setOpen(true);
|
|
}, [setOpen]);
|
|
const handleClose = React4.useCallback(() => {
|
|
window.clearTimeout(openTimerRef.current);
|
|
openTimerRef.current = 0;
|
|
setOpen(false);
|
|
}, [setOpen]);
|
|
const handleDelayedOpen = React4.useCallback(() => {
|
|
window.clearTimeout(openTimerRef.current);
|
|
openTimerRef.current = window.setTimeout(() => {
|
|
wasOpenDelayedRef.current = true;
|
|
setOpen(true);
|
|
openTimerRef.current = 0;
|
|
}, delayDuration);
|
|
}, [delayDuration, setOpen]);
|
|
React4.useEffect(() => {
|
|
return () => {
|
|
if (openTimerRef.current) {
|
|
window.clearTimeout(openTimerRef.current);
|
|
openTimerRef.current = 0;
|
|
}
|
|
};
|
|
}, []);
|
|
return (0, import_jsx_runtime2.jsx)(Root2, { ...popperScope, children: (0, import_jsx_runtime2.jsx)(
|
|
TooltipContextProvider,
|
|
{
|
|
scope: __scopeTooltip,
|
|
contentId,
|
|
open,
|
|
stateAttribute,
|
|
trigger,
|
|
onTriggerChange: setTrigger,
|
|
onTriggerEnter: React4.useCallback(() => {
|
|
if (providerContext.isOpenDelayed) handleDelayedOpen();
|
|
else handleOpen();
|
|
}, [providerContext.isOpenDelayed, handleDelayedOpen, handleOpen]),
|
|
onTriggerLeave: React4.useCallback(() => {
|
|
if (disableHoverableContent) {
|
|
handleClose();
|
|
} else {
|
|
window.clearTimeout(openTimerRef.current);
|
|
openTimerRef.current = 0;
|
|
}
|
|
}, [handleClose, disableHoverableContent]),
|
|
onOpen: handleOpen,
|
|
onClose: handleClose,
|
|
disableHoverableContent,
|
|
children
|
|
}
|
|
) });
|
|
};
|
|
Tooltip.displayName = TOOLTIP_NAME;
|
|
var TRIGGER_NAME = "TooltipTrigger";
|
|
var TooltipTrigger = React4.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeTooltip, ...triggerProps } = props;
|
|
const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
|
|
const providerContext = useTooltipProviderContext(TRIGGER_NAME, __scopeTooltip);
|
|
const popperScope = usePopperScope(__scopeTooltip);
|
|
const ref = React4.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref, context.onTriggerChange);
|
|
const isPointerDownRef = React4.useRef(false);
|
|
const hasPointerMoveOpenedRef = React4.useRef(false);
|
|
const handlePointerUp = React4.useCallback(() => isPointerDownRef.current = false, []);
|
|
React4.useEffect(() => {
|
|
return () => document.removeEventListener("pointerup", handlePointerUp);
|
|
}, [handlePointerUp]);
|
|
return (0, import_jsx_runtime2.jsx)(Anchor, { asChild: true, ...popperScope, children: (0, import_jsx_runtime2.jsx)(
|
|
Primitive.button,
|
|
{
|
|
"aria-describedby": context.open ? context.contentId : void 0,
|
|
"data-state": context.stateAttribute,
|
|
...triggerProps,
|
|
ref: composedRefs,
|
|
onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
|
|
if (event.pointerType === "touch") return;
|
|
if (!hasPointerMoveOpenedRef.current && !providerContext.isPointerInTransitRef.current) {
|
|
context.onTriggerEnter();
|
|
hasPointerMoveOpenedRef.current = true;
|
|
}
|
|
}),
|
|
onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
|
|
context.onTriggerLeave();
|
|
hasPointerMoveOpenedRef.current = false;
|
|
}),
|
|
onPointerDown: composeEventHandlers(props.onPointerDown, () => {
|
|
isPointerDownRef.current = true;
|
|
document.addEventListener("pointerup", handlePointerUp, { once: true });
|
|
}),
|
|
onFocus: composeEventHandlers(props.onFocus, () => {
|
|
if (!isPointerDownRef.current) context.onOpen();
|
|
}),
|
|
onBlur: composeEventHandlers(props.onBlur, context.onClose),
|
|
onClick: composeEventHandlers(props.onClick, context.onClose)
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
TooltipTrigger.displayName = TRIGGER_NAME;
|
|
var PORTAL_NAME = "TooltipPortal";
|
|
var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
|
|
forceMount: void 0
|
|
});
|
|
var TooltipPortal = (props) => {
|
|
const { __scopeTooltip, forceMount, children, container } = props;
|
|
const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
|
|
return (0, import_jsx_runtime2.jsx)(PortalProvider, { scope: __scopeTooltip, forceMount, children: (0, import_jsx_runtime2.jsx)(Presence, { present: forceMount || context.open, children: (0, import_jsx_runtime2.jsx)(Portal, { asChild: true, container, children }) }) });
|
|
};
|
|
TooltipPortal.displayName = PORTAL_NAME;
|
|
var CONTENT_NAME = "TooltipContent";
|
|
var TooltipContent = React4.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
|
|
const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
|
|
const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
|
|
return (0, import_jsx_runtime2.jsx)(Presence, { present: forceMount || context.open, children: context.disableHoverableContent ? (0, import_jsx_runtime2.jsx)(TooltipContentImpl, { side, ...contentProps, ref: forwardedRef }) : (0, import_jsx_runtime2.jsx)(TooltipContentHoverable, { side, ...contentProps, ref: forwardedRef }) });
|
|
}
|
|
);
|
|
var TooltipContentHoverable = React4.forwardRef((props, forwardedRef) => {
|
|
const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
|
|
const providerContext = useTooltipProviderContext(CONTENT_NAME, props.__scopeTooltip);
|
|
const ref = React4.useRef(null);
|
|
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
const [pointerGraceArea, setPointerGraceArea] = React4.useState(null);
|
|
const { trigger, onClose } = context;
|
|
const content = ref.current;
|
|
const { onPointerInTransitChange } = providerContext;
|
|
const handleRemoveGraceArea = React4.useCallback(() => {
|
|
setPointerGraceArea(null);
|
|
onPointerInTransitChange(false);
|
|
}, [onPointerInTransitChange]);
|
|
const handleCreateGraceArea = React4.useCallback(
|
|
(event, hoverTarget) => {
|
|
const currentTarget = event.currentTarget;
|
|
const exitPoint = { x: event.clientX, y: event.clientY };
|
|
const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
|
|
const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
|
|
const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
|
|
const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
|
|
setPointerGraceArea(graceArea);
|
|
onPointerInTransitChange(true);
|
|
},
|
|
[onPointerInTransitChange]
|
|
);
|
|
React4.useEffect(() => {
|
|
return () => handleRemoveGraceArea();
|
|
}, [handleRemoveGraceArea]);
|
|
React4.useEffect(() => {
|
|
if (trigger && content) {
|
|
const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
|
|
const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
|
|
trigger.addEventListener("pointerleave", handleTriggerLeave);
|
|
content.addEventListener("pointerleave", handleContentLeave);
|
|
return () => {
|
|
trigger.removeEventListener("pointerleave", handleTriggerLeave);
|
|
content.removeEventListener("pointerleave", handleContentLeave);
|
|
};
|
|
}
|
|
}, [trigger, content, handleCreateGraceArea, handleRemoveGraceArea]);
|
|
React4.useEffect(() => {
|
|
if (pointerGraceArea) {
|
|
const handleTrackPointerGrace = (event) => {
|
|
const target = event.target;
|
|
const pointerPosition = { x: event.clientX, y: event.clientY };
|
|
const hasEnteredTarget = (trigger == null ? void 0 : trigger.contains(target)) || (content == null ? void 0 : content.contains(target));
|
|
const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
|
|
if (hasEnteredTarget) {
|
|
handleRemoveGraceArea();
|
|
} else if (isPointerOutsideGraceArea) {
|
|
handleRemoveGraceArea();
|
|
onClose();
|
|
}
|
|
};
|
|
document.addEventListener("pointermove", handleTrackPointerGrace);
|
|
return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
|
|
}
|
|
}, [trigger, content, pointerGraceArea, onClose, handleRemoveGraceArea]);
|
|
return (0, import_jsx_runtime2.jsx)(TooltipContentImpl, { ...props, ref: composedRefs });
|
|
});
|
|
var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, { isInside: false });
|
|
var TooltipContentImpl = React4.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const {
|
|
__scopeTooltip,
|
|
children,
|
|
"aria-label": ariaLabel,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
...contentProps
|
|
} = props;
|
|
const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
|
|
const popperScope = usePopperScope(__scopeTooltip);
|
|
const { onClose } = context;
|
|
React4.useEffect(() => {
|
|
document.addEventListener(TOOLTIP_OPEN, onClose);
|
|
return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
|
|
}, [onClose]);
|
|
React4.useEffect(() => {
|
|
if (context.trigger) {
|
|
const handleScroll = (event) => {
|
|
const target = event.target;
|
|
if (target == null ? void 0 : target.contains(context.trigger)) onClose();
|
|
};
|
|
window.addEventListener("scroll", handleScroll, { capture: true });
|
|
return () => window.removeEventListener("scroll", handleScroll, { capture: true });
|
|
}
|
|
}, [context.trigger, onClose]);
|
|
return (0, import_jsx_runtime2.jsx)(
|
|
DismissableLayer,
|
|
{
|
|
asChild: true,
|
|
disableOutsidePointerEvents: false,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
onFocusOutside: (event) => event.preventDefault(),
|
|
onDismiss: onClose,
|
|
children: (0, import_jsx_runtime2.jsxs)(
|
|
Content,
|
|
{
|
|
"data-state": context.stateAttribute,
|
|
...popperScope,
|
|
...contentProps,
|
|
ref: forwardedRef,
|
|
style: {
|
|
...contentProps.style,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
},
|
|
children: [
|
|
(0, import_jsx_runtime2.jsx)(Slottable, { children }),
|
|
(0, import_jsx_runtime2.jsx)(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: (0, import_jsx_runtime2.jsx)(Root, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
|
|
]
|
|
}
|
|
)
|
|
}
|
|
);
|
|
}
|
|
);
|
|
TooltipContent.displayName = CONTENT_NAME;
|
|
var ARROW_NAME = "TooltipArrow";
|
|
var TooltipArrow = React4.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeTooltip, ...arrowProps } = props;
|
|
const popperScope = usePopperScope(__scopeTooltip);
|
|
const visuallyHiddenContentContext = useVisuallyHiddenContentContext(
|
|
ARROW_NAME,
|
|
__scopeTooltip
|
|
);
|
|
return visuallyHiddenContentContext.isInside ? null : (0, import_jsx_runtime2.jsx)(Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
TooltipArrow.displayName = ARROW_NAME;
|
|
function getExitSideFromRect(point, rect) {
|
|
const top = Math.abs(rect.top - point.y);
|
|
const bottom = Math.abs(rect.bottom - point.y);
|
|
const right = Math.abs(rect.right - point.x);
|
|
const left = Math.abs(rect.left - point.x);
|
|
switch (Math.min(top, bottom, right, left)) {
|
|
case left:
|
|
return "left";
|
|
case right:
|
|
return "right";
|
|
case top:
|
|
return "top";
|
|
case bottom:
|
|
return "bottom";
|
|
default:
|
|
throw new Error("unreachable");
|
|
}
|
|
}
|
|
function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
|
|
const paddedExitPoints = [];
|
|
switch (exitSide) {
|
|
case "top":
|
|
paddedExitPoints.push(
|
|
{ x: exitPoint.x - padding, y: exitPoint.y + padding },
|
|
{ x: exitPoint.x + padding, y: exitPoint.y + padding }
|
|
);
|
|
break;
|
|
case "bottom":
|
|
paddedExitPoints.push(
|
|
{ x: exitPoint.x - padding, y: exitPoint.y - padding },
|
|
{ x: exitPoint.x + padding, y: exitPoint.y - padding }
|
|
);
|
|
break;
|
|
case "left":
|
|
paddedExitPoints.push(
|
|
{ x: exitPoint.x + padding, y: exitPoint.y - padding },
|
|
{ x: exitPoint.x + padding, y: exitPoint.y + padding }
|
|
);
|
|
break;
|
|
case "right":
|
|
paddedExitPoints.push(
|
|
{ x: exitPoint.x - padding, y: exitPoint.y - padding },
|
|
{ x: exitPoint.x - padding, y: exitPoint.y + padding }
|
|
);
|
|
break;
|
|
}
|
|
return paddedExitPoints;
|
|
}
|
|
function getPointsFromRect(rect) {
|
|
const { top, right, bottom, left } = rect;
|
|
return [
|
|
{ x: left, y: top },
|
|
{ x: right, y: top },
|
|
{ x: right, y: bottom },
|
|
{ x: left, y: bottom }
|
|
];
|
|
}
|
|
function isPointInPolygon(point, polygon) {
|
|
const { x, y } = point;
|
|
let inside = false;
|
|
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
|
const xi = polygon[i].x;
|
|
const yi = polygon[i].y;
|
|
const xj = polygon[j].x;
|
|
const yj = polygon[j].y;
|
|
const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
|
|
if (intersect) inside = !inside;
|
|
}
|
|
return inside;
|
|
}
|
|
function getHull(points) {
|
|
const newPoints = points.slice();
|
|
newPoints.sort((a, b) => {
|
|
if (a.x < b.x) return -1;
|
|
else if (a.x > b.x) return 1;
|
|
else if (a.y < b.y) return -1;
|
|
else if (a.y > b.y) return 1;
|
|
else return 0;
|
|
});
|
|
return getHullPresorted(newPoints);
|
|
}
|
|
function getHullPresorted(points) {
|
|
if (points.length <= 1) return points.slice();
|
|
const upperHull = [];
|
|
for (let i = 0; i < points.length; i++) {
|
|
const p = points[i];
|
|
while (upperHull.length >= 2) {
|
|
const q = upperHull[upperHull.length - 1];
|
|
const r = upperHull[upperHull.length - 2];
|
|
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upperHull.pop();
|
|
else break;
|
|
}
|
|
upperHull.push(p);
|
|
}
|
|
upperHull.pop();
|
|
const lowerHull = [];
|
|
for (let i = points.length - 1; i >= 0; i--) {
|
|
const p = points[i];
|
|
while (lowerHull.length >= 2) {
|
|
const q = lowerHull[lowerHull.length - 1];
|
|
const r = lowerHull[lowerHull.length - 2];
|
|
if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lowerHull.pop();
|
|
else break;
|
|
}
|
|
lowerHull.push(p);
|
|
}
|
|
lowerHull.pop();
|
|
if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
|
|
return upperHull;
|
|
} else {
|
|
return upperHull.concat(lowerHull);
|
|
}
|
|
}
|
|
var Provider = TooltipProvider;
|
|
var Root3 = Tooltip;
|
|
var Trigger = TooltipTrigger;
|
|
var Portal2 = TooltipPortal;
|
|
var Content2 = TooltipContent;
|
|
var Arrow2 = TooltipArrow;
|
|
export {
|
|
Arrow2 as Arrow,
|
|
Content2 as Content,
|
|
Portal2 as Portal,
|
|
Provider,
|
|
Root3 as Root,
|
|
Tooltip,
|
|
TooltipArrow,
|
|
TooltipContent,
|
|
TooltipPortal,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
Trigger,
|
|
createTooltipScope
|
|
};
|
|
//# sourceMappingURL=@radix-ui_react-tooltip.js.map
|