Socket
Socket
Sign inDemoInstall

@radix-ui/react-hover-card

Package Overview
Dependencies
Maintainers
6
Versions
214
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@radix-ui/react-hover-card - npm Package Compare versions

Comparing version 1.0.8-rc.9 to 1.1.0-rc.1

68

dist/index.d.ts

@@ -1,9 +0,21 @@

import * as React from "react";
import * as PopperPrimitive from "@radix-ui/react-popper";
import { Portal as _Portal1 } from "@radix-ui/react-portal";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
export const createHoverCardScope: import("@radix-ui/react-context").CreateScope;
export interface HoverCardProps {
import * as React from 'react';
import * as PopperPrimitive from '@radix-ui/react-popper';
import { Portal as Portal$1 } from '@radix-ui/react-portal';
import * as Radix from '@radix-ui/react-primitive';
import { Primitive } from '@radix-ui/react-primitive';
import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
declare type Scope<C = any> = {
[scopeName: string]: React.Context<C>[];
} | undefined;
declare type ScopeHook = (scope: Scope) => {
[__scopeProp: string]: Scope;
};
interface CreateScope {
scopeName: string;
(): ScopeHook;
}
declare const createHoverCardScope: CreateScope;
interface HoverCardProps {
children?: React.ReactNode;

@@ -16,9 +28,9 @@ open?: boolean;

}
export const HoverCard: React.FC<HoverCardProps>;
type PrimitiveLinkProps = Radix.ComponentPropsWithoutRef<typeof Primitive.a>;
export interface HoverCardTriggerProps extends PrimitiveLinkProps {
declare const HoverCard: React.FC<HoverCardProps>;
declare type PrimitiveLinkProps = Radix.ComponentPropsWithoutRef<typeof Primitive.a>;
interface HoverCardTriggerProps extends PrimitiveLinkProps {
}
export const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
type PortalProps = React.ComponentPropsWithoutRef<typeof _Portal1>;
export interface HoverCardPortalProps {
declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
declare type PortalProps = React.ComponentPropsWithoutRef<typeof Portal$1>;
interface HoverCardPortalProps {
children?: React.ReactNode;

@@ -35,4 +47,4 @@ /**

}
export const HoverCardPortal: React.FC<HoverCardPortalProps>;
export interface HoverCardContentProps extends HoverCardContentImplProps {
declare const HoverCardPortal: React.FC<HoverCardPortalProps>;
interface HoverCardContentProps extends HoverCardContentImplProps {
/**

@@ -44,5 +56,5 @@ * Used to force mounting when more control is needed. Useful when

}
export const HoverCardContent: React.ForwardRefExoticComponent<HoverCardContentProps & React.RefAttributes<HTMLDivElement>>;
type DismissableLayerProps = Radix.ComponentPropsWithoutRef<typeof DismissableLayer>;
type PopperContentProps = Radix.ComponentPropsWithoutRef<typeof PopperPrimitive.Content>;
declare const HoverCardContent: React.ForwardRefExoticComponent<HoverCardContentProps & React.RefAttributes<HTMLDivElement>>;
declare type DismissableLayerProps = Radix.ComponentPropsWithoutRef<typeof DismissableLayer>;
declare type PopperContentProps = Radix.ComponentPropsWithoutRef<typeof PopperPrimitive.Content>;
interface HoverCardContentImplProps extends Omit<PopperContentProps, 'onPlaced'> {

@@ -71,12 +83,12 @@ /**

}
type PopperArrowProps = Radix.ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>;
export interface HoverCardArrowProps extends PopperArrowProps {
declare type PopperArrowProps = Radix.ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>;
interface HoverCardArrowProps extends PopperArrowProps {
}
export const HoverCardArrow: React.ForwardRefExoticComponent<HoverCardArrowProps & React.RefAttributes<SVGSVGElement>>;
export const Root: React.FC<HoverCardProps>;
export const Trigger: React.ForwardRefExoticComponent<HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
export const Portal: React.FC<HoverCardPortalProps>;
export const Content: React.ForwardRefExoticComponent<HoverCardContentProps & React.RefAttributes<HTMLDivElement>>;
export const Arrow: React.ForwardRefExoticComponent<HoverCardArrowProps & React.RefAttributes<SVGSVGElement>>;
declare const HoverCardArrow: React.ForwardRefExoticComponent<HoverCardArrowProps & React.RefAttributes<SVGSVGElement>>;
declare const Root: React.FC<HoverCardProps>;
declare const Trigger: React.ForwardRefExoticComponent<HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
declare const Portal: React.FC<HoverCardPortalProps>;
declare const Content: React.ForwardRefExoticComponent<HoverCardContentProps & React.RefAttributes<HTMLDivElement>>;
declare const Arrow: React.ForwardRefExoticComponent<HoverCardArrowProps & React.RefAttributes<SVGSVGElement>>;
//# sourceMappingURL=index.d.ts.map
export { Arrow, Content, HoverCard, HoverCardArrow, type HoverCardArrowProps, HoverCardContent, type HoverCardContentProps, HoverCardPortal, type HoverCardPortalProps, type HoverCardProps, HoverCardTrigger, type HoverCardTriggerProps, Portal, Root, Trigger, createHoverCardScope };

532

dist/index.js

@@ -1,93 +0,94 @@

var $eFX7w$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
var $eFX7w$react = require("react");
var $eFX7w$radixuiprimitive = require("@radix-ui/primitive");
var $eFX7w$radixuireactcontext = require("@radix-ui/react-context");
var $eFX7w$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
var $eFX7w$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
var $eFX7w$radixuireactpopper = require("@radix-ui/react-popper");
var $eFX7w$radixuireactportal = require("@radix-ui/react-portal");
var $eFX7w$radixuireactpresence = require("@radix-ui/react-presence");
var $eFX7w$radixuireactprimitive = require("@radix-ui/react-primitive");
var $eFX7w$radixuireactdismissablelayer = require("@radix-ui/react-dismissable-layer");
"use strict";
(() => {
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 __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
}) : x)(function(x) {
if (typeof require !== "undefined") return require.apply(this, arguments);
throw Error('Dynamic require of "' + x + '" is not supported');
});
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
));
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
$parcel$export(module.exports, "createHoverCardScope", () => $e5715e9205c1e1fe$export$47b6998a836b7260);
$parcel$export(module.exports, "HoverCard", () => $e5715e9205c1e1fe$export$57a077cc9fbe653e);
$parcel$export(module.exports, "HoverCardTrigger", () => $e5715e9205c1e1fe$export$ef9f7fd8e4ba882f);
$parcel$export(module.exports, "HoverCardPortal", () => $e5715e9205c1e1fe$export$b384c6e0a789f88b);
$parcel$export(module.exports, "HoverCardContent", () => $e5715e9205c1e1fe$export$aa4724a5938c586);
$parcel$export(module.exports, "HoverCardArrow", () => $e5715e9205c1e1fe$export$b9744d3e7456d806);
$parcel$export(module.exports, "Root", () => $e5715e9205c1e1fe$export$be92b6f5f03c0fe9);
$parcel$export(module.exports, "Trigger", () => $e5715e9205c1e1fe$export$41fb9f06171c75f4);
$parcel$export(module.exports, "Portal", () => $e5715e9205c1e1fe$export$602eac185826482c);
$parcel$export(module.exports, "Content", () => $e5715e9205c1e1fe$export$7c6e2c02157bb7d2);
$parcel$export(module.exports, "Arrow", () => $e5715e9205c1e1fe$export$21b07c8f274aebd5);
/* -------------------------------------------------------------------------------------------------
* HoverCard
* -----------------------------------------------------------------------------------------------*/ let $e5715e9205c1e1fe$var$originalBodyUserSelect;
const $e5715e9205c1e1fe$var$HOVERCARD_NAME = 'HoverCard';
const [$e5715e9205c1e1fe$var$createHoverCardContext, $e5715e9205c1e1fe$export$47b6998a836b7260] = $eFX7w$radixuireactcontext.createContextScope($e5715e9205c1e1fe$var$HOVERCARD_NAME, [
$eFX7w$radixuireactpopper.createPopperScope
]);
const $e5715e9205c1e1fe$var$usePopperScope = $eFX7w$radixuireactpopper.createPopperScope();
const [$e5715e9205c1e1fe$var$HoverCardProvider, $e5715e9205c1e1fe$var$useHoverCardContext] = $e5715e9205c1e1fe$var$createHoverCardContext($e5715e9205c1e1fe$var$HOVERCARD_NAME);
const $e5715e9205c1e1fe$export$57a077cc9fbe653e = (props)=>{
const { __scopeHoverCard: __scopeHoverCard , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , openDelay: openDelay = 700 , closeDelay: closeDelay = 300 } = props;
const popperScope = $e5715e9205c1e1fe$var$usePopperScope(__scopeHoverCard);
const openTimerRef = $eFX7w$react.useRef(0);
const closeTimerRef = $eFX7w$react.useRef(0);
const hasSelectionRef = $eFX7w$react.useRef(false);
const isPointerDownOnContentRef = $eFX7w$react.useRef(false);
const [open = false, setOpen] = $eFX7w$radixuireactusecontrollablestate.useControllableState({
prop: openProp,
defaultProp: defaultOpen,
onChange: onOpenChange
// 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 = $eFX7w$react.useCallback(()=>{
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);
openTimerRef.current = window.setTimeout(()=>setOpen(true)
, openDelay);
}, [
openDelay,
setOpen
]);
const handleClose = $eFX7w$react.useCallback(()=>{
clearTimeout(openTimerRef.current);
if (!hasSelectionRef.current && !isPointerDownOnContentRef.current) closeTimerRef.current = window.setTimeout(()=>setOpen(false)
, closeDelay);
}, [
closeDelay,
setOpen
]);
const handleDismiss = $eFX7w$react.useCallback(()=>setOpen(false)
, [
setOpen
]); // cleanup any queued state updates on unmount
$eFX7w$react.useEffect(()=>{
return ()=>{
clearTimeout(openTimerRef.current);
clearTimeout(closeTimerRef.current);
};
};
}, []);
return /*#__PURE__*/ $eFX7w$react.createElement($e5715e9205c1e1fe$var$HoverCardProvider, {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
HoverCardProvider,
{
scope: __scopeHoverCard,
open: open,
open,
onOpenChange: setOpen,

@@ -97,199 +98,182 @@ onOpen: handleOpen,

onDismiss: handleDismiss,
hasSelectionRef: hasSelectionRef,
isPointerDownOnContentRef: isPointerDownOnContentRef
}, /*#__PURE__*/ $eFX7w$react.createElement($eFX7w$radixuireactpopper.Root, popperScope, children));
};
/*#__PURE__*/ Object.assign($e5715e9205c1e1fe$export$57a077cc9fbe653e, {
displayName: $e5715e9205c1e1fe$var$HOVERCARD_NAME
});
/* -------------------------------------------------------------------------------------------------
* HoverCardTrigger
* -----------------------------------------------------------------------------------------------*/ const $e5715e9205c1e1fe$var$TRIGGER_NAME = 'HoverCardTrigger';
const $e5715e9205c1e1fe$export$ef9f7fd8e4ba882f = /*#__PURE__*/ $eFX7w$react.forwardRef((props, forwardedRef)=>{
const { __scopeHoverCard: __scopeHoverCard , ...triggerProps } = props;
const context = $e5715e9205c1e1fe$var$useHoverCardContext($e5715e9205c1e1fe$var$TRIGGER_NAME, __scopeHoverCard);
const popperScope = $e5715e9205c1e1fe$var$usePopperScope(__scopeHoverCard);
return /*#__PURE__*/ $eFX7w$react.createElement($eFX7w$radixuireactpopper.Anchor, ($parcel$interopDefault($eFX7w$babelruntimehelpersextends))({
asChild: true
}, popperScope), /*#__PURE__*/ $eFX7w$react.createElement($eFX7w$radixuireactprimitive.Primitive.a, ($parcel$interopDefault($eFX7w$babelruntimehelpersextends))({
"data-state": context.open ? 'open' : 'closed'
}, triggerProps, {
ref: forwardedRef,
onPointerEnter: $eFX7w$radixuiprimitive.composeEventHandlers(props.onPointerEnter, $e5715e9205c1e1fe$var$excludeTouch(context.onOpen)),
onPointerLeave: $eFX7w$radixuiprimitive.composeEventHandlers(props.onPointerLeave, $e5715e9205c1e1fe$var$excludeTouch(context.onClose)),
onFocus: $eFX7w$radixuiprimitive.composeEventHandlers(props.onFocus, context.onOpen),
onBlur: $eFX7w$radixuiprimitive.composeEventHandlers(props.onBlur, context.onClose) // prevent focus event on touch devices
,
onTouchStart: $eFX7w$radixuiprimitive.composeEventHandlers(props.onTouchStart, (event)=>event.preventDefault()
)
})));
});
/*#__PURE__*/ Object.assign($e5715e9205c1e1fe$export$ef9f7fd8e4ba882f, {
displayName: $e5715e9205c1e1fe$var$TRIGGER_NAME
});
/* -------------------------------------------------------------------------------------------------
* HoverCardPortal
* -----------------------------------------------------------------------------------------------*/ const $e5715e9205c1e1fe$var$PORTAL_NAME = 'HoverCardPortal';
const [$e5715e9205c1e1fe$var$PortalProvider, $e5715e9205c1e1fe$var$usePortalContext] = $e5715e9205c1e1fe$var$createHoverCardContext($e5715e9205c1e1fe$var$PORTAL_NAME, {
forceMount: undefined
});
const $e5715e9205c1e1fe$export$b384c6e0a789f88b = (props)=>{
const { __scopeHoverCard: __scopeHoverCard , forceMount: forceMount , children: children , container: container } = props;
const context = $e5715e9205c1e1fe$var$useHoverCardContext($e5715e9205c1e1fe$var$PORTAL_NAME, __scopeHoverCard);
return /*#__PURE__*/ $eFX7w$react.createElement($e5715e9205c1e1fe$var$PortalProvider, {
scope: __scopeHoverCard,
forceMount: forceMount
}, /*#__PURE__*/ $eFX7w$react.createElement($eFX7w$radixuireactpresence.Presence, {
present: forceMount || context.open
}, /*#__PURE__*/ $eFX7w$react.createElement($eFX7w$radixuireactportal.Portal, {
asChild: true,
container: container
}, children)));
};
/*#__PURE__*/ Object.assign($e5715e9205c1e1fe$export$b384c6e0a789f88b, {
displayName: $e5715e9205c1e1fe$var$PORTAL_NAME
});
/* -------------------------------------------------------------------------------------------------
* HoverCardContent
* -----------------------------------------------------------------------------------------------*/ const $e5715e9205c1e1fe$var$CONTENT_NAME = 'HoverCardContent';
const $e5715e9205c1e1fe$export$aa4724a5938c586 = /*#__PURE__*/ $eFX7w$react.forwardRef((props, forwardedRef)=>{
const portalContext = $e5715e9205c1e1fe$var$usePortalContext($e5715e9205c1e1fe$var$CONTENT_NAME, props.__scopeHoverCard);
const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
const context = $e5715e9205c1e1fe$var$useHoverCardContext($e5715e9205c1e1fe$var$CONTENT_NAME, props.__scopeHoverCard);
return /*#__PURE__*/ $eFX7w$react.createElement($eFX7w$radixuireactpresence.Presence, {
present: forceMount || context.open
}, /*#__PURE__*/ $eFX7w$react.createElement($e5715e9205c1e1fe$var$HoverCardContentImpl, ($parcel$interopDefault($eFX7w$babelruntimehelpersextends))({
"data-state": context.open ? 'open' : 'closed'
}, contentProps, {
onPointerEnter: $eFX7w$radixuiprimitive.composeEventHandlers(props.onPointerEnter, $e5715e9205c1e1fe$var$excludeTouch(context.onOpen)),
onPointerLeave: $eFX7w$radixuiprimitive.composeEventHandlers(props.onPointerLeave, $e5715e9205c1e1fe$var$excludeTouch(context.onClose)),
ref: forwardedRef
})));
});
/*#__PURE__*/ Object.assign($e5715e9205c1e1fe$export$aa4724a5938c586, {
displayName: $e5715e9205c1e1fe$var$CONTENT_NAME
});
/* ---------------------------------------------------------------------------------------------- */ const $e5715e9205c1e1fe$var$HoverCardContentImpl = /*#__PURE__*/ $eFX7w$react.forwardRef((props, forwardedRef)=>{
const { __scopeHoverCard: __scopeHoverCard , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , ...contentProps } = props;
const context = $e5715e9205c1e1fe$var$useHoverCardContext($e5715e9205c1e1fe$var$CONTENT_NAME, __scopeHoverCard);
const popperScope = $e5715e9205c1e1fe$var$usePopperScope(__scopeHoverCard);
const ref = $eFX7w$react.useRef(null);
const composedRefs = $eFX7w$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
const [containSelection, setContainSelection] = $eFX7w$react.useState(false);
$eFX7w$react.useEffect(()=>{
if (containSelection) {
const body = document.body; // Safari requires prefix
$e5715e9205c1e1fe$var$originalBodyUserSelect = body.style.userSelect || body.style.webkitUserSelect;
body.style.userSelect = 'none';
body.style.webkitUserSelect = 'none';
return ()=>{
body.style.userSelect = $e5715e9205c1e1fe$var$originalBodyUserSelect;
body.style.webkitUserSelect = $e5715e9205c1e1fe$var$originalBodyUserSelect;
};
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())
}
}, [
containSelection
]);
$eFX7w$react.useEffect(()=>{
if (ref.current) {
const handlePointerUp = ()=>{
setContainSelection(false);
context.isPointerDownOnContentRef.current = false; // Delay a frame to ensure we always access the latest selection
setTimeout(()=>{
var _document$getSelectio;
const hasSelection = ((_document$getSelectio = document.getSelection()) === null || _document$getSelectio === void 0 ? void 0 : _document$getSelectio.toString()) !== '';
if (hasSelection) context.hasSelectionRef.current = true;
});
};
document.addEventListener('pointerup', handlePointerUp);
return ()=>{
document.removeEventListener('pointerup', handlePointerUp);
context.hasSelectionRef.current = false;
context.isPointerDownOnContentRef.current = false;
};
) });
}
);
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
}
}, [
context.isPointerDownOnContentRef,
context.hasSelectionRef
]);
$eFX7w$react.useEffect(()=>{
if (ref.current) {
const tabbables = $e5715e9205c1e1fe$var$getTabbableNodes(ref.current);
tabbables.forEach((tabbable)=>tabbable.setAttribute('tabindex', '-1')
);
}
) });
}
);
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__*/ $eFX7w$react.createElement($eFX7w$radixuireactdismissablelayer.DismissableLayer, {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_dismissable_layer.DismissableLayer,
{
asChild: true,
disableOutsidePointerEvents: false,
onInteractOutside: onInteractOutside,
onEscapeKeyDown: onEscapeKeyDown,
onPointerDownOutside: onPointerDownOutside,
onFocusOutside: $eFX7w$radixuiprimitive.composeEventHandlers(onFocusOutside, (event)=>{
event.preventDefault();
onInteractOutside,
onEscapeKeyDown,
onPointerDownOutside,
onFocusOutside: (0, import_primitive.composeEventHandlers)(onFocusOutside, (event) => {
event.preventDefault();
}),
onDismiss: context.onDismiss
}, /*#__PURE__*/ $eFX7w$react.createElement($eFX7w$radixuireactpopper.Content, ($parcel$interopDefault($eFX7w$babelruntimehelpersextends))({}, popperScope, contentProps, {
onPointerDown: $eFX7w$radixuiprimitive.composeEventHandlers(contentProps.onPointerDown, (event)=>{
// Contain selection to current layer
if (event.currentTarget.contains(event.target)) setContainSelection(true);
context.hasSelectionRef.current = false;
context.isPointerDownOnContentRef.current = true;
}),
ref: composedRefs,
style: {
...contentProps.style,
userSelect: containSelection ? 'text' : undefined,
// Safari requires prefix
WebkitUserSelect: containSelection ? 'text' : undefined,
'--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)'
}
})));
});
/* -------------------------------------------------------------------------------------------------
* HoverCardArrow
* -----------------------------------------------------------------------------------------------*/ const $e5715e9205c1e1fe$var$ARROW_NAME = 'HoverCardArrow';
const $e5715e9205c1e1fe$export$b9744d3e7456d806 = /*#__PURE__*/ $eFX7w$react.forwardRef((props, forwardedRef)=>{
const { __scopeHoverCard: __scopeHoverCard , ...arrowProps } = props;
const popperScope = $e5715e9205c1e1fe$var$usePopperScope(__scopeHoverCard);
return /*#__PURE__*/ $eFX7w$react.createElement($eFX7w$radixuireactpopper.Arrow, ($parcel$interopDefault($eFX7w$babelruntimehelpersextends))({}, popperScope, arrowProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($e5715e9205c1e1fe$export$b9744d3e7456d806, {
displayName: $e5715e9205c1e1fe$var$ARROW_NAME
});
/* -----------------------------------------------------------------------------------------------*/ function $e5715e9205c1e1fe$var$excludeTouch(eventHandler) {
return (event)=>event.pointerType === 'touch' ? undefined : eventHandler()
;
}
/**
* Returns a list of nodes that can be in the tab sequence.
* @see: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
*/ function $e5715e9205c1e1fe$var$getTabbableNodes(container) {
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)=>{
// `.tabIndex` is not the same as the `tabindex` attribute. It works on the
// runtime's understanding of tabbability, so this automatically accounts
// for any kind of element that could be tabbed to.
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
acceptNode: (node) => {
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
});
while(walker.nextNode())nodes.push(walker.currentNode);
while (walker.nextNode()) nodes.push(walker.currentNode);
return nodes;
}
const $e5715e9205c1e1fe$export$be92b6f5f03c0fe9 = $e5715e9205c1e1fe$export$57a077cc9fbe653e;
const $e5715e9205c1e1fe$export$41fb9f06171c75f4 = $e5715e9205c1e1fe$export$ef9f7fd8e4ba882f;
const $e5715e9205c1e1fe$export$602eac185826482c = $e5715e9205c1e1fe$export$b384c6e0a789f88b;
const $e5715e9205c1e1fe$export$7c6e2c02157bb7d2 = $e5715e9205c1e1fe$export$aa4724a5938c586;
const $e5715e9205c1e1fe$export$21b07c8f274aebd5 = $e5715e9205c1e1fe$export$b9744d3e7456d806;
}
var Root2 = HoverCard;
var Trigger = HoverCardTrigger;
var Portal = HoverCardPortal;
var Content2 = HoverCardContent;
var Arrow2 = HoverCardArrow;
})();
//# sourceMappingURL=index.js.map

21

package.json
{
"name": "@radix-ui/react-hover-card",
"version": "1.0.8-rc.9",
"version": "1.1.0-rc.1",
"license": "MIT",

@@ -31,12 +31,11 @@ "exports": {

"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-dismissable-layer": "1.0.6-rc.6",
"@radix-ui/react-popper": "1.1.4-rc.9",
"@radix-ui/react-portal": "1.0.4",
"@radix-ui/react-presence": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-use-controllable-state": "1.0.1"
"@radix-ui/primitive": "1.1.0-rc.1",
"@radix-ui/react-compose-refs": "1.1.0-rc.1",
"@radix-ui/react-context": "1.1.0-rc.1",
"@radix-ui/react-dismissable-layer": "1.1.0-rc.1",
"@radix-ui/react-popper": "1.2.0-rc.1",
"@radix-ui/react-portal": "1.1.0-rc.1",
"@radix-ui/react-presence": "1.1.0-rc.1",
"@radix-ui/react-primitive": "1.1.0-rc.1",
"@radix-ui/react-use-controllable-state": "1.1.0-rc.1"
},

@@ -43,0 +42,0 @@ "peerDependencies": {

dist/index.d.ts.map
dist/index.d.mts

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc