294 lines
12 KiB
JavaScript
294 lines
12 KiB
JavaScript
"use strict";
|
|
"use client";
|
|
var __create = Object.create;
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __getProtoOf = Object.getPrototypeOf;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
// file that has been converted to a CommonJS file using a Babel-
|
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
mod
|
|
));
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
|
|
// packages/react/hover-card/src/index.ts
|
|
var src_exports = {};
|
|
__export(src_exports, {
|
|
Arrow: () => Arrow2,
|
|
Content: () => Content2,
|
|
HoverCard: () => HoverCard,
|
|
HoverCardArrow: () => HoverCardArrow,
|
|
HoverCardContent: () => HoverCardContent,
|
|
HoverCardPortal: () => HoverCardPortal,
|
|
HoverCardTrigger: () => HoverCardTrigger,
|
|
Portal: () => Portal,
|
|
Root: () => Root2,
|
|
Trigger: () => Trigger,
|
|
createHoverCardScope: () => createHoverCardScope
|
|
});
|
|
module.exports = __toCommonJS(src_exports);
|
|
|
|
// packages/react/hover-card/src/HoverCard.tsx
|
|
var React = __toESM(require("react"));
|
|
var import_primitive = require("@radix-ui/primitive");
|
|
var import_react_context = require("@radix-ui/react-context");
|
|
var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
|
|
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
|
|
var PopperPrimitive = __toESM(require("@radix-ui/react-popper"));
|
|
var import_react_popper = require("@radix-ui/react-popper");
|
|
var import_react_portal = require("@radix-ui/react-portal");
|
|
var import_react_presence = require("@radix-ui/react-presence");
|
|
var import_react_primitive = require("@radix-ui/react-primitive");
|
|
var import_react_dismissable_layer = require("@radix-ui/react-dismissable-layer");
|
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
var originalBodyUserSelect;
|
|
var HOVERCARD_NAME = "HoverCard";
|
|
var [createHoverCardContext, createHoverCardScope] = (0, import_react_context.createContextScope)(HOVERCARD_NAME, [
|
|
import_react_popper.createPopperScope
|
|
]);
|
|
var usePopperScope = (0, import_react_popper.createPopperScope)();
|
|
var [HoverCardProvider, useHoverCardContext] = createHoverCardContext(HOVERCARD_NAME);
|
|
var HoverCard = (props) => {
|
|
const {
|
|
__scopeHoverCard,
|
|
children,
|
|
open: openProp,
|
|
defaultOpen,
|
|
onOpenChange,
|
|
openDelay = 700,
|
|
closeDelay = 300
|
|
} = props;
|
|
const popperScope = usePopperScope(__scopeHoverCard);
|
|
const openTimerRef = React.useRef(0);
|
|
const closeTimerRef = React.useRef(0);
|
|
const hasSelectionRef = React.useRef(false);
|
|
const isPointerDownOnContentRef = React.useRef(false);
|
|
const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
|
|
prop: openProp,
|
|
defaultProp: defaultOpen,
|
|
onChange: onOpenChange
|
|
});
|
|
const handleOpen = React.useCallback(() => {
|
|
clearTimeout(closeTimerRef.current);
|
|
openTimerRef.current = window.setTimeout(() => setOpen(true), openDelay);
|
|
}, [openDelay, setOpen]);
|
|
const handleClose = React.useCallback(() => {
|
|
clearTimeout(openTimerRef.current);
|
|
if (!hasSelectionRef.current && !isPointerDownOnContentRef.current) {
|
|
closeTimerRef.current = window.setTimeout(() => setOpen(false), closeDelay);
|
|
}
|
|
}, [closeDelay, setOpen]);
|
|
const handleDismiss = React.useCallback(() => setOpen(false), [setOpen]);
|
|
React.useEffect(() => {
|
|
return () => {
|
|
clearTimeout(openTimerRef.current);
|
|
clearTimeout(closeTimerRef.current);
|
|
};
|
|
}, []);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
HoverCardProvider,
|
|
{
|
|
scope: __scopeHoverCard,
|
|
open,
|
|
onOpenChange: setOpen,
|
|
onOpen: handleOpen,
|
|
onClose: handleClose,
|
|
onDismiss: handleDismiss,
|
|
hasSelectionRef,
|
|
isPointerDownOnContentRef,
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Root, { ...popperScope, children })
|
|
}
|
|
);
|
|
};
|
|
HoverCard.displayName = HOVERCARD_NAME;
|
|
var TRIGGER_NAME = "HoverCardTrigger";
|
|
var HoverCardTrigger = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeHoverCard, ...triggerProps } = props;
|
|
const context = useHoverCardContext(TRIGGER_NAME, __scopeHoverCard);
|
|
const popperScope = usePopperScope(__scopeHoverCard);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
import_react_primitive.Primitive.a,
|
|
{
|
|
"data-state": context.open ? "open" : "closed",
|
|
...triggerProps,
|
|
ref: forwardedRef,
|
|
onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, excludeTouch(context.onOpen)),
|
|
onPointerLeave: (0, import_primitive.composeEventHandlers)(props.onPointerLeave, excludeTouch(context.onClose)),
|
|
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, context.onOpen),
|
|
onBlur: (0, import_primitive.composeEventHandlers)(props.onBlur, context.onClose),
|
|
onTouchStart: (0, import_primitive.composeEventHandlers)(props.onTouchStart, (event) => event.preventDefault())
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
HoverCardTrigger.displayName = TRIGGER_NAME;
|
|
var PORTAL_NAME = "HoverCardPortal";
|
|
var [PortalProvider, usePortalContext] = createHoverCardContext(PORTAL_NAME, {
|
|
forceMount: void 0
|
|
});
|
|
var HoverCardPortal = (props) => {
|
|
const { __scopeHoverCard, forceMount, children, container } = props;
|
|
const context = useHoverCardContext(PORTAL_NAME, __scopeHoverCard);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalProvider, { scope: __scopeHoverCard, forceMount, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { asChild: true, container, children }) }) });
|
|
};
|
|
HoverCardPortal.displayName = PORTAL_NAME;
|
|
var CONTENT_NAME = "HoverCardContent";
|
|
var HoverCardContent = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeHoverCard);
|
|
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
const context = useHoverCardContext(CONTENT_NAME, props.__scopeHoverCard);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
HoverCardContentImpl,
|
|
{
|
|
"data-state": context.open ? "open" : "closed",
|
|
...contentProps,
|
|
onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, excludeTouch(context.onOpen)),
|
|
onPointerLeave: (0, import_primitive.composeEventHandlers)(props.onPointerLeave, excludeTouch(context.onClose)),
|
|
ref: forwardedRef
|
|
}
|
|
) });
|
|
}
|
|
);
|
|
HoverCardContent.displayName = CONTENT_NAME;
|
|
var HoverCardContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
const {
|
|
__scopeHoverCard,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
onFocusOutside,
|
|
onInteractOutside,
|
|
...contentProps
|
|
} = props;
|
|
const context = useHoverCardContext(CONTENT_NAME, __scopeHoverCard);
|
|
const popperScope = usePopperScope(__scopeHoverCard);
|
|
const ref = React.useRef(null);
|
|
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
|
|
const [containSelection, setContainSelection] = React.useState(false);
|
|
React.useEffect(() => {
|
|
if (containSelection) {
|
|
const body = document.body;
|
|
originalBodyUserSelect = body.style.userSelect || body.style.webkitUserSelect;
|
|
body.style.userSelect = "none";
|
|
body.style.webkitUserSelect = "none";
|
|
return () => {
|
|
body.style.userSelect = originalBodyUserSelect;
|
|
body.style.webkitUserSelect = originalBodyUserSelect;
|
|
};
|
|
}
|
|
}, [containSelection]);
|
|
React.useEffect(() => {
|
|
if (ref.current) {
|
|
const handlePointerUp = () => {
|
|
setContainSelection(false);
|
|
context.isPointerDownOnContentRef.current = false;
|
|
setTimeout(() => {
|
|
const hasSelection = document.getSelection()?.toString() !== "";
|
|
if (hasSelection) context.hasSelectionRef.current = true;
|
|
});
|
|
};
|
|
document.addEventListener("pointerup", handlePointerUp);
|
|
return () => {
|
|
document.removeEventListener("pointerup", handlePointerUp);
|
|
context.hasSelectionRef.current = false;
|
|
context.isPointerDownOnContentRef.current = false;
|
|
};
|
|
}
|
|
}, [context.isPointerDownOnContentRef, context.hasSelectionRef]);
|
|
React.useEffect(() => {
|
|
if (ref.current) {
|
|
const tabbables = getTabbableNodes(ref.current);
|
|
tabbables.forEach((tabbable) => tabbable.setAttribute("tabindex", "-1"));
|
|
}
|
|
});
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
import_react_dismissable_layer.DismissableLayer,
|
|
{
|
|
asChild: true,
|
|
disableOutsidePointerEvents: false,
|
|
onInteractOutside,
|
|
onEscapeKeyDown,
|
|
onPointerDownOutside,
|
|
onFocusOutside: (0, import_primitive.composeEventHandlers)(onFocusOutside, (event) => {
|
|
event.preventDefault();
|
|
}),
|
|
onDismiss: context.onDismiss,
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
PopperPrimitive.Content,
|
|
{
|
|
...popperScope,
|
|
...contentProps,
|
|
onPointerDown: (0, import_primitive.composeEventHandlers)(contentProps.onPointerDown, (event) => {
|
|
if (event.currentTarget.contains(event.target)) {
|
|
setContainSelection(true);
|
|
}
|
|
context.hasSelectionRef.current = false;
|
|
context.isPointerDownOnContentRef.current = true;
|
|
}),
|
|
ref: composedRefs,
|
|
style: {
|
|
...contentProps.style,
|
|
userSelect: containSelection ? "text" : void 0,
|
|
// Safari requires prefix
|
|
WebkitUserSelect: containSelection ? "text" : void 0,
|
|
// re-namespace exposed content custom properties
|
|
...{
|
|
"--radix-hover-card-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
"--radix-hover-card-content-available-width": "var(--radix-popper-available-width)",
|
|
"--radix-hover-card-content-available-height": "var(--radix-popper-available-height)",
|
|
"--radix-hover-card-trigger-width": "var(--radix-popper-anchor-width)",
|
|
"--radix-hover-card-trigger-height": "var(--radix-popper-anchor-height)"
|
|
}
|
|
}
|
|
}
|
|
)
|
|
}
|
|
);
|
|
});
|
|
var ARROW_NAME = "HoverCardArrow";
|
|
var HoverCardArrow = React.forwardRef(
|
|
(props, forwardedRef) => {
|
|
const { __scopeHoverCard, ...arrowProps } = props;
|
|
const popperScope = usePopperScope(__scopeHoverCard);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
|
|
}
|
|
);
|
|
HoverCardArrow.displayName = ARROW_NAME;
|
|
function excludeTouch(eventHandler) {
|
|
return (event) => event.pointerType === "touch" ? void 0 : eventHandler();
|
|
}
|
|
function getTabbableNodes(container) {
|
|
const nodes = [];
|
|
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
acceptNode: (node) => {
|
|
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
}
|
|
});
|
|
while (walker.nextNode()) nodes.push(walker.currentNode);
|
|
return nodes;
|
|
}
|
|
var Root2 = HoverCard;
|
|
var Trigger = HoverCardTrigger;
|
|
var Portal = HoverCardPortal;
|
|
var Content2 = HoverCardContent;
|
|
var Arrow2 = HoverCardArrow;
|
|
//# sourceMappingURL=index.js.map
|