ivt
Version:
Ivt Components Library
276 lines (272 loc) • 11.7 kB
JavaScript
import * as React from 'react';
import React__default from 'react';
import { c as composeEventHandlers } from './index-Bl-WJHvp.mjs';
import { c as createContextScope } from './index-DT8WgpCS.mjs';
import { u as useControllableState } from './index-D4FMFHi9.mjs';
import { u as useComposedRefs } from './index-1tQVI0Jh.mjs';
import { c as createPopperScope, R as Root2$1, A as Anchor, C as Content, a as Arrow } from './index-aLIsJMgt.mjs';
import { P as Portal$1 } from './index-BTe1rv5Z.mjs';
import { P as Presence } from './index-C6s8KI_8.mjs';
import { P as Primitive } from './index-DgKlJYZP.mjs';
import { D as DismissableLayer } from './index-DUpRrJTH.mjs';
import { jsx } from 'react/jsx-runtime';
import { c as cn } from './utils-05LlW3Cl.mjs';
var originalBodyUserSelect;
var HOVERCARD_NAME = "HoverCard";
var [createHoverCardContext] = createContextScope(HOVERCARD_NAME, [
createPopperScope
]);
var usePopperScope = createPopperScope();
var [HoverCardProvider, useHoverCardContext] = createHoverCardContext(HOVERCARD_NAME);
var HoverCard$1 = (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, setOpen] = useControllableState({
prop: openProp,
defaultProp: defaultOpen ?? false,
onChange: onOpenChange,
caller: HOVERCARD_NAME
});
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__ */ jsx(HoverCardProvider, {
scope: __scopeHoverCard,
open,
onOpenChange: setOpen,
onOpen: handleOpen,
onClose: handleClose,
onDismiss: handleDismiss,
hasSelectionRef,
isPointerDownOnContentRef,
children: /* @__PURE__ */ jsx(Root2$1, {
...popperScope,
children
})
});
};
HoverCard$1.displayName = HOVERCARD_NAME;
var TRIGGER_NAME = "HoverCardTrigger";
var HoverCardTrigger$1 = React.forwardRef((props, forwardedRef)=>{
const { __scopeHoverCard, ...triggerProps } = props;
const context = useHoverCardContext(TRIGGER_NAME, __scopeHoverCard);
const popperScope = usePopperScope(__scopeHoverCard);
return /* @__PURE__ */ jsx(Anchor, {
asChild: true,
...popperScope,
children: /* @__PURE__ */ jsx(Primitive.a, {
"data-state": context.open ? "open" : "closed",
...triggerProps,
ref: forwardedRef,
onPointerEnter: composeEventHandlers(props.onPointerEnter, excludeTouch(context.onOpen)),
onPointerLeave: composeEventHandlers(props.onPointerLeave, excludeTouch(context.onClose)),
onFocus: composeEventHandlers(props.onFocus, context.onOpen),
onBlur: composeEventHandlers(props.onBlur, context.onClose),
onTouchStart: composeEventHandlers(props.onTouchStart, (event)=>event.preventDefault())
})
});
});
HoverCardTrigger$1.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__ */ jsx(PortalProvider, {
scope: __scopeHoverCard,
forceMount,
children: /* @__PURE__ */ jsx(Presence, {
present: forceMount || context.open,
children: /* @__PURE__ */ jsx(Portal$1, {
asChild: true,
container,
children
})
})
});
};
HoverCardPortal.displayName = PORTAL_NAME;
var CONTENT_NAME = "HoverCardContent";
var HoverCardContent$1 = 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__ */ jsx(Presence, {
present: forceMount || context.open,
children: /* @__PURE__ */ jsx(HoverCardContentImpl, {
"data-state": context.open ? "open" : "closed",
...contentProps,
onPointerEnter: composeEventHandlers(props.onPointerEnter, excludeTouch(context.onOpen)),
onPointerLeave: composeEventHandlers(props.onPointerLeave, excludeTouch(context.onClose)),
ref: forwardedRef
})
});
});
HoverCardContent$1.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 = 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__ */ jsx(DismissableLayer, {
asChild: true,
disableOutsidePointerEvents: false,
onInteractOutside,
onEscapeKeyDown,
onPointerDownOutside,
onFocusOutside: composeEventHandlers(onFocusOutside, (event)=>{
event.preventDefault();
}),
onDismiss: context.onDismiss,
children: /* @__PURE__ */ jsx(Content, {
...popperScope,
...contentProps,
onPointerDown: 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__ */ jsx(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$1;
var Trigger = HoverCardTrigger$1;
var Portal = HoverCardPortal;
var Content2 = HoverCardContent$1;
function HoverCard({ ...props }) {
return /*#__PURE__*/ React__default.createElement(Root2, {
"data-slot": "hover-card",
...props
});
}
function HoverCardTrigger({ ...props }) {
return /*#__PURE__*/ React__default.createElement(Trigger, {
"data-slot": "hover-card-trigger",
...props
});
}
function HoverCardContent({ className, align = "center", sideOffset = 4, ...props }) {
return /*#__PURE__*/ React__default.createElement(Portal, {
"data-slot": "hover-card-portal"
}, /*#__PURE__*/ React__default.createElement(Content2, {
"data-slot": "hover-card-content",
align: align,
sideOffset: sideOffset,
className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden", className),
...props
}));
}
export { HoverCard as H, HoverCardTrigger as a, HoverCardContent as b };
//# sourceMappingURL=hover-card-CodWi0dK.mjs.map