@radix-ui/react-hover-card 1.0.8-rc.9 → 1.1.0-rc.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +40 -28
- package/dist/index.d.ts +40 -28
- package/dist/index.js +259 -274
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +245 -261
- package/dist/index.mjs.map +7 -1
- package/package.json +10 -11
- package/dist/index.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,294 +1,279 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
(() => {
|
|
4
|
+
var __create = Object.create;
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
11
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
12
|
+
}) : x)(function(x) {
|
|
13
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
14
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
15
|
+
});
|
|
16
|
+
var __copyProps = (to, from, except, desc) => {
|
|
17
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
18
|
+
for (let key of __getOwnPropNames(from))
|
|
19
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
20
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
21
|
+
}
|
|
22
|
+
return to;
|
|
23
|
+
};
|
|
24
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
25
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
26
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
27
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
28
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
29
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
30
|
+
mod
|
|
31
|
+
));
|
|
12
32
|
|
|
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
|
-
const
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
const $e5715e9205c1e1fe$export$57a077cc9fbe653e = (props)=>{
|
|
53
|
-
const { __scopeHoverCard: __scopeHoverCard , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , openDelay: openDelay = 700 , closeDelay: closeDelay = 300 } = props;
|
|
54
|
-
const popperScope = $e5715e9205c1e1fe$var$usePopperScope(__scopeHoverCard);
|
|
55
|
-
const openTimerRef = $eFX7w$react.useRef(0);
|
|
56
|
-
const closeTimerRef = $eFX7w$react.useRef(0);
|
|
57
|
-
const hasSelectionRef = $eFX7w$react.useRef(false);
|
|
58
|
-
const isPointerDownOnContentRef = $eFX7w$react.useRef(false);
|
|
59
|
-
const [open = false, setOpen] = $eFX7w$radixuireactusecontrollablestate.useControllableState({
|
|
60
|
-
prop: openProp,
|
|
61
|
-
defaultProp: defaultOpen,
|
|
62
|
-
onChange: onOpenChange
|
|
33
|
+
// packages/react/hover-card/src/HoverCard.tsx
|
|
34
|
+
var React = __toESM(__require("react"));
|
|
35
|
+
var import_primitive = __require("@radix-ui/primitive");
|
|
36
|
+
var import_react_context = __require("@radix-ui/react-context");
|
|
37
|
+
var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state");
|
|
38
|
+
var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
|
|
39
|
+
var PopperPrimitive = __toESM(__require("@radix-ui/react-popper"));
|
|
40
|
+
var import_react_popper = __require("@radix-ui/react-popper");
|
|
41
|
+
var import_react_portal = __require("@radix-ui/react-portal");
|
|
42
|
+
var import_react_presence = __require("@radix-ui/react-presence");
|
|
43
|
+
var import_react_primitive = __require("@radix-ui/react-primitive");
|
|
44
|
+
var import_react_dismissable_layer = __require("@radix-ui/react-dismissable-layer");
|
|
45
|
+
var import_jsx_runtime = __require("react/jsx-runtime");
|
|
46
|
+
var originalBodyUserSelect;
|
|
47
|
+
var HOVERCARD_NAME = "HoverCard";
|
|
48
|
+
var [createHoverCardContext, createHoverCardScope] = (0, import_react_context.createContextScope)(HOVERCARD_NAME, [
|
|
49
|
+
import_react_popper.createPopperScope
|
|
50
|
+
]);
|
|
51
|
+
var usePopperScope = (0, import_react_popper.createPopperScope)();
|
|
52
|
+
var [HoverCardProvider, useHoverCardContext] = createHoverCardContext(HOVERCARD_NAME);
|
|
53
|
+
var HoverCard = (props) => {
|
|
54
|
+
const {
|
|
55
|
+
__scopeHoverCard,
|
|
56
|
+
children,
|
|
57
|
+
open: openProp,
|
|
58
|
+
defaultOpen,
|
|
59
|
+
onOpenChange,
|
|
60
|
+
openDelay = 700,
|
|
61
|
+
closeDelay = 300
|
|
62
|
+
} = props;
|
|
63
|
+
const popperScope = usePopperScope(__scopeHoverCard);
|
|
64
|
+
const openTimerRef = React.useRef(0);
|
|
65
|
+
const closeTimerRef = React.useRef(0);
|
|
66
|
+
const hasSelectionRef = React.useRef(false);
|
|
67
|
+
const isPointerDownOnContentRef = React.useRef(false);
|
|
68
|
+
const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
|
|
69
|
+
prop: openProp,
|
|
70
|
+
defaultProp: defaultOpen,
|
|
71
|
+
onChange: onOpenChange
|
|
63
72
|
});
|
|
64
|
-
const handleOpen =
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
+
const handleOpen = React.useCallback(() => {
|
|
74
|
+
clearTimeout(closeTimerRef.current);
|
|
75
|
+
openTimerRef.current = window.setTimeout(() => setOpen(true), openDelay);
|
|
76
|
+
}, [openDelay, setOpen]);
|
|
77
|
+
const handleClose = React.useCallback(() => {
|
|
78
|
+
clearTimeout(openTimerRef.current);
|
|
79
|
+
if (!hasSelectionRef.current && !isPointerDownOnContentRef.current) {
|
|
80
|
+
closeTimerRef.current = window.setTimeout(() => setOpen(false), closeDelay);
|
|
81
|
+
}
|
|
82
|
+
}, [closeDelay, setOpen]);
|
|
83
|
+
const handleDismiss = React.useCallback(() => setOpen(false), [setOpen]);
|
|
84
|
+
React.useEffect(() => {
|
|
85
|
+
return () => {
|
|
73
86
|
clearTimeout(openTimerRef.current);
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}, [
|
|
77
|
-
closeDelay,
|
|
78
|
-
setOpen
|
|
79
|
-
]);
|
|
80
|
-
const handleDismiss = $eFX7w$react.useCallback(()=>setOpen(false)
|
|
81
|
-
, [
|
|
82
|
-
setOpen
|
|
83
|
-
]); // cleanup any queued state updates on unmount
|
|
84
|
-
$eFX7w$react.useEffect(()=>{
|
|
85
|
-
return ()=>{
|
|
86
|
-
clearTimeout(openTimerRef.current);
|
|
87
|
-
clearTimeout(closeTimerRef.current);
|
|
88
|
-
};
|
|
87
|
+
clearTimeout(closeTimerRef.current);
|
|
88
|
+
};
|
|
89
89
|
}, []);
|
|
90
|
-
return
|
|
90
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
91
|
+
HoverCardProvider,
|
|
92
|
+
{
|
|
91
93
|
scope: __scopeHoverCard,
|
|
92
|
-
open
|
|
94
|
+
open,
|
|
93
95
|
onOpenChange: setOpen,
|
|
94
96
|
onOpen: handleOpen,
|
|
95
97
|
onClose: handleClose,
|
|
96
98
|
onDismiss: handleDismiss,
|
|
97
|
-
hasSelectionRef
|
|
98
|
-
isPointerDownOnContentRef
|
|
99
|
-
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
const
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
,
|
|
122
|
-
onTouchStart: $eFX7w$radixuiprimitive.composeEventHandlers(props.onTouchStart, (event)=>event.preventDefault()
|
|
123
|
-
)
|
|
124
|
-
})));
|
|
125
|
-
});
|
|
126
|
-
/*#__PURE__*/ Object.assign($e5715e9205c1e1fe$export$ef9f7fd8e4ba882f, {
|
|
127
|
-
displayName: $e5715e9205c1e1fe$var$TRIGGER_NAME
|
|
128
|
-
});
|
|
129
|
-
/* -------------------------------------------------------------------------------------------------
|
|
130
|
-
* HoverCardPortal
|
|
131
|
-
* -----------------------------------------------------------------------------------------------*/ const $e5715e9205c1e1fe$var$PORTAL_NAME = 'HoverCardPortal';
|
|
132
|
-
const [$e5715e9205c1e1fe$var$PortalProvider, $e5715e9205c1e1fe$var$usePortalContext] = $e5715e9205c1e1fe$var$createHoverCardContext($e5715e9205c1e1fe$var$PORTAL_NAME, {
|
|
133
|
-
forceMount: undefined
|
|
134
|
-
});
|
|
135
|
-
const $e5715e9205c1e1fe$export$b384c6e0a789f88b = (props)=>{
|
|
136
|
-
const { __scopeHoverCard: __scopeHoverCard , forceMount: forceMount , children: children , container: container } = props;
|
|
137
|
-
const context = $e5715e9205c1e1fe$var$useHoverCardContext($e5715e9205c1e1fe$var$PORTAL_NAME, __scopeHoverCard);
|
|
138
|
-
return /*#__PURE__*/ $eFX7w$react.createElement($e5715e9205c1e1fe$var$PortalProvider, {
|
|
139
|
-
scope: __scopeHoverCard,
|
|
140
|
-
forceMount: forceMount
|
|
141
|
-
}, /*#__PURE__*/ $eFX7w$react.createElement($eFX7w$radixuireactpresence.Presence, {
|
|
142
|
-
present: forceMount || context.open
|
|
143
|
-
}, /*#__PURE__*/ $eFX7w$react.createElement($eFX7w$radixuireactportal.Portal, {
|
|
144
|
-
asChild: true,
|
|
145
|
-
container: container
|
|
146
|
-
}, children)));
|
|
147
|
-
};
|
|
148
|
-
/*#__PURE__*/ Object.assign($e5715e9205c1e1fe$export$b384c6e0a789f88b, {
|
|
149
|
-
displayName: $e5715e9205c1e1fe$var$PORTAL_NAME
|
|
150
|
-
});
|
|
151
|
-
/* -------------------------------------------------------------------------------------------------
|
|
152
|
-
* HoverCardContent
|
|
153
|
-
* -----------------------------------------------------------------------------------------------*/ const $e5715e9205c1e1fe$var$CONTENT_NAME = 'HoverCardContent';
|
|
154
|
-
const $e5715e9205c1e1fe$export$aa4724a5938c586 = /*#__PURE__*/ $eFX7w$react.forwardRef((props, forwardedRef)=>{
|
|
155
|
-
const portalContext = $e5715e9205c1e1fe$var$usePortalContext($e5715e9205c1e1fe$var$CONTENT_NAME, props.__scopeHoverCard);
|
|
156
|
-
const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
|
|
157
|
-
const context = $e5715e9205c1e1fe$var$useHoverCardContext($e5715e9205c1e1fe$var$CONTENT_NAME, props.__scopeHoverCard);
|
|
158
|
-
return /*#__PURE__*/ $eFX7w$react.createElement($eFX7w$radixuireactpresence.Presence, {
|
|
159
|
-
present: forceMount || context.open
|
|
160
|
-
}, /*#__PURE__*/ $eFX7w$react.createElement($e5715e9205c1e1fe$var$HoverCardContentImpl, ($parcel$interopDefault($eFX7w$babelruntimehelpersextends))({
|
|
161
|
-
"data-state": context.open ? 'open' : 'closed'
|
|
162
|
-
}, contentProps, {
|
|
163
|
-
onPointerEnter: $eFX7w$radixuiprimitive.composeEventHandlers(props.onPointerEnter, $e5715e9205c1e1fe$var$excludeTouch(context.onOpen)),
|
|
164
|
-
onPointerLeave: $eFX7w$radixuiprimitive.composeEventHandlers(props.onPointerLeave, $e5715e9205c1e1fe$var$excludeTouch(context.onClose)),
|
|
165
|
-
ref: forwardedRef
|
|
166
|
-
})));
|
|
167
|
-
});
|
|
168
|
-
/*#__PURE__*/ Object.assign($e5715e9205c1e1fe$export$aa4724a5938c586, {
|
|
169
|
-
displayName: $e5715e9205c1e1fe$var$CONTENT_NAME
|
|
170
|
-
});
|
|
171
|
-
/* ---------------------------------------------------------------------------------------------- */ const $e5715e9205c1e1fe$var$HoverCardContentImpl = /*#__PURE__*/ $eFX7w$react.forwardRef((props, forwardedRef)=>{
|
|
172
|
-
const { __scopeHoverCard: __scopeHoverCard , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , ...contentProps } = props;
|
|
173
|
-
const context = $e5715e9205c1e1fe$var$useHoverCardContext($e5715e9205c1e1fe$var$CONTENT_NAME, __scopeHoverCard);
|
|
174
|
-
const popperScope = $e5715e9205c1e1fe$var$usePopperScope(__scopeHoverCard);
|
|
175
|
-
const ref = $eFX7w$react.useRef(null);
|
|
176
|
-
const composedRefs = $eFX7w$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
|
|
177
|
-
const [containSelection, setContainSelection] = $eFX7w$react.useState(false);
|
|
178
|
-
$eFX7w$react.useEffect(()=>{
|
|
179
|
-
if (containSelection) {
|
|
180
|
-
const body = document.body; // Safari requires prefix
|
|
181
|
-
$e5715e9205c1e1fe$var$originalBodyUserSelect = body.style.userSelect || body.style.webkitUserSelect;
|
|
182
|
-
body.style.userSelect = 'none';
|
|
183
|
-
body.style.webkitUserSelect = 'none';
|
|
184
|
-
return ()=>{
|
|
185
|
-
body.style.userSelect = $e5715e9205c1e1fe$var$originalBodyUserSelect;
|
|
186
|
-
body.style.webkitUserSelect = $e5715e9205c1e1fe$var$originalBodyUserSelect;
|
|
187
|
-
};
|
|
188
|
-
}
|
|
189
|
-
}, [
|
|
190
|
-
containSelection
|
|
191
|
-
]);
|
|
192
|
-
$eFX7w$react.useEffect(()=>{
|
|
193
|
-
if (ref.current) {
|
|
194
|
-
const handlePointerUp = ()=>{
|
|
195
|
-
setContainSelection(false);
|
|
196
|
-
context.isPointerDownOnContentRef.current = false; // Delay a frame to ensure we always access the latest selection
|
|
197
|
-
setTimeout(()=>{
|
|
198
|
-
var _document$getSelectio;
|
|
199
|
-
const hasSelection = ((_document$getSelectio = document.getSelection()) === null || _document$getSelectio === void 0 ? void 0 : _document$getSelectio.toString()) !== '';
|
|
200
|
-
if (hasSelection) context.hasSelectionRef.current = true;
|
|
201
|
-
});
|
|
202
|
-
};
|
|
203
|
-
document.addEventListener('pointerup', handlePointerUp);
|
|
204
|
-
return ()=>{
|
|
205
|
-
document.removeEventListener('pointerup', handlePointerUp);
|
|
206
|
-
context.hasSelectionRef.current = false;
|
|
207
|
-
context.isPointerDownOnContentRef.current = false;
|
|
208
|
-
};
|
|
99
|
+
hasSelectionRef,
|
|
100
|
+
isPointerDownOnContentRef,
|
|
101
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Root, { ...popperScope, children })
|
|
102
|
+
}
|
|
103
|
+
);
|
|
104
|
+
};
|
|
105
|
+
HoverCard.displayName = HOVERCARD_NAME;
|
|
106
|
+
var TRIGGER_NAME = "HoverCardTrigger";
|
|
107
|
+
var HoverCardTrigger = React.forwardRef(
|
|
108
|
+
(props, forwardedRef) => {
|
|
109
|
+
const { __scopeHoverCard, ...triggerProps } = props;
|
|
110
|
+
const context = useHoverCardContext(TRIGGER_NAME, __scopeHoverCard);
|
|
111
|
+
const popperScope = usePopperScope(__scopeHoverCard);
|
|
112
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
113
|
+
import_react_primitive.Primitive.a,
|
|
114
|
+
{
|
|
115
|
+
"data-state": context.open ? "open" : "closed",
|
|
116
|
+
...triggerProps,
|
|
117
|
+
ref: forwardedRef,
|
|
118
|
+
onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, excludeTouch(context.onOpen)),
|
|
119
|
+
onPointerLeave: (0, import_primitive.composeEventHandlers)(props.onPointerLeave, excludeTouch(context.onClose)),
|
|
120
|
+
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, context.onOpen),
|
|
121
|
+
onBlur: (0, import_primitive.composeEventHandlers)(props.onBlur, context.onClose),
|
|
122
|
+
onTouchStart: (0, import_primitive.composeEventHandlers)(props.onTouchStart, (event) => event.preventDefault())
|
|
209
123
|
}
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
124
|
+
) });
|
|
125
|
+
}
|
|
126
|
+
);
|
|
127
|
+
HoverCardTrigger.displayName = TRIGGER_NAME;
|
|
128
|
+
var PORTAL_NAME = "HoverCardPortal";
|
|
129
|
+
var [PortalProvider, usePortalContext] = createHoverCardContext(PORTAL_NAME, {
|
|
130
|
+
forceMount: void 0
|
|
131
|
+
});
|
|
132
|
+
var HoverCardPortal = (props) => {
|
|
133
|
+
const { __scopeHoverCard, forceMount, children, container } = props;
|
|
134
|
+
const context = useHoverCardContext(PORTAL_NAME, __scopeHoverCard);
|
|
135
|
+
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 }) }) });
|
|
136
|
+
};
|
|
137
|
+
HoverCardPortal.displayName = PORTAL_NAME;
|
|
138
|
+
var CONTENT_NAME = "HoverCardContent";
|
|
139
|
+
var HoverCardContent = React.forwardRef(
|
|
140
|
+
(props, forwardedRef) => {
|
|
141
|
+
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeHoverCard);
|
|
142
|
+
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
143
|
+
const context = useHoverCardContext(CONTENT_NAME, props.__scopeHoverCard);
|
|
144
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
145
|
+
HoverCardContentImpl,
|
|
146
|
+
{
|
|
147
|
+
"data-state": context.open ? "open" : "closed",
|
|
148
|
+
...contentProps,
|
|
149
|
+
onPointerEnter: (0, import_primitive.composeEventHandlers)(props.onPointerEnter, excludeTouch(context.onOpen)),
|
|
150
|
+
onPointerLeave: (0, import_primitive.composeEventHandlers)(props.onPointerLeave, excludeTouch(context.onClose)),
|
|
151
|
+
ref: forwardedRef
|
|
219
152
|
}
|
|
153
|
+
) });
|
|
154
|
+
}
|
|
155
|
+
);
|
|
156
|
+
HoverCardContent.displayName = CONTENT_NAME;
|
|
157
|
+
var HoverCardContentImpl = React.forwardRef((props, forwardedRef) => {
|
|
158
|
+
const {
|
|
159
|
+
__scopeHoverCard,
|
|
160
|
+
onEscapeKeyDown,
|
|
161
|
+
onPointerDownOutside,
|
|
162
|
+
onFocusOutside,
|
|
163
|
+
onInteractOutside,
|
|
164
|
+
...contentProps
|
|
165
|
+
} = props;
|
|
166
|
+
const context = useHoverCardContext(CONTENT_NAME, __scopeHoverCard);
|
|
167
|
+
const popperScope = usePopperScope(__scopeHoverCard);
|
|
168
|
+
const ref = React.useRef(null);
|
|
169
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
|
|
170
|
+
const [containSelection, setContainSelection] = React.useState(false);
|
|
171
|
+
React.useEffect(() => {
|
|
172
|
+
if (containSelection) {
|
|
173
|
+
const body = document.body;
|
|
174
|
+
originalBodyUserSelect = body.style.userSelect || body.style.webkitUserSelect;
|
|
175
|
+
body.style.userSelect = "none";
|
|
176
|
+
body.style.webkitUserSelect = "none";
|
|
177
|
+
return () => {
|
|
178
|
+
body.style.userSelect = originalBodyUserSelect;
|
|
179
|
+
body.style.webkitUserSelect = originalBodyUserSelect;
|
|
180
|
+
};
|
|
181
|
+
}
|
|
182
|
+
}, [containSelection]);
|
|
183
|
+
React.useEffect(() => {
|
|
184
|
+
if (ref.current) {
|
|
185
|
+
const handlePointerUp = () => {
|
|
186
|
+
setContainSelection(false);
|
|
187
|
+
context.isPointerDownOnContentRef.current = false;
|
|
188
|
+
setTimeout(() => {
|
|
189
|
+
const hasSelection = document.getSelection()?.toString() !== "";
|
|
190
|
+
if (hasSelection) context.hasSelectionRef.current = true;
|
|
191
|
+
});
|
|
192
|
+
};
|
|
193
|
+
document.addEventListener("pointerup", handlePointerUp);
|
|
194
|
+
return () => {
|
|
195
|
+
document.removeEventListener("pointerup", handlePointerUp);
|
|
196
|
+
context.hasSelectionRef.current = false;
|
|
197
|
+
context.isPointerDownOnContentRef.current = false;
|
|
198
|
+
};
|
|
199
|
+
}
|
|
200
|
+
}, [context.isPointerDownOnContentRef, context.hasSelectionRef]);
|
|
201
|
+
React.useEffect(() => {
|
|
202
|
+
if (ref.current) {
|
|
203
|
+
const tabbables = getTabbableNodes(ref.current);
|
|
204
|
+
tabbables.forEach((tabbable) => tabbable.setAttribute("tabindex", "-1"));
|
|
205
|
+
}
|
|
220
206
|
});
|
|
221
|
-
return
|
|
207
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
208
|
+
import_react_dismissable_layer.DismissableLayer,
|
|
209
|
+
{
|
|
222
210
|
asChild: true,
|
|
223
211
|
disableOutsidePointerEvents: false,
|
|
224
|
-
onInteractOutside
|
|
225
|
-
onEscapeKeyDown
|
|
226
|
-
onPointerDownOutside
|
|
227
|
-
onFocusOutside:
|
|
228
|
-
|
|
229
|
-
}),
|
|
230
|
-
onDismiss: context.onDismiss
|
|
231
|
-
}, /*#__PURE__*/ $eFX7w$react.createElement($eFX7w$radixuireactpopper.Content, ($parcel$interopDefault($eFX7w$babelruntimehelpersextends))({}, popperScope, contentProps, {
|
|
232
|
-
onPointerDown: $eFX7w$radixuiprimitive.composeEventHandlers(contentProps.onPointerDown, (event)=>{
|
|
233
|
-
// Contain selection to current layer
|
|
234
|
-
if (event.currentTarget.contains(event.target)) setContainSelection(true);
|
|
235
|
-
context.hasSelectionRef.current = false;
|
|
236
|
-
context.isPointerDownOnContentRef.current = true;
|
|
212
|
+
onInteractOutside,
|
|
213
|
+
onEscapeKeyDown,
|
|
214
|
+
onPointerDownOutside,
|
|
215
|
+
onFocusOutside: (0, import_primitive.composeEventHandlers)(onFocusOutside, (event) => {
|
|
216
|
+
event.preventDefault();
|
|
237
217
|
}),
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
218
|
+
onDismiss: context.onDismiss,
|
|
219
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
220
|
+
PopperPrimitive.Content,
|
|
221
|
+
{
|
|
222
|
+
...popperScope,
|
|
223
|
+
...contentProps,
|
|
224
|
+
onPointerDown: (0, import_primitive.composeEventHandlers)(contentProps.onPointerDown, (event) => {
|
|
225
|
+
if (event.currentTarget.contains(event.target)) {
|
|
226
|
+
setContainSelection(true);
|
|
227
|
+
}
|
|
228
|
+
context.hasSelectionRef.current = false;
|
|
229
|
+
context.isPointerDownOnContentRef.current = true;
|
|
230
|
+
}),
|
|
231
|
+
ref: composedRefs,
|
|
232
|
+
style: {
|
|
233
|
+
...contentProps.style,
|
|
234
|
+
userSelect: containSelection ? "text" : void 0,
|
|
235
|
+
// Safari requires prefix
|
|
236
|
+
WebkitUserSelect: containSelection ? "text" : void 0,
|
|
237
|
+
// re-namespace exposed content custom properties
|
|
238
|
+
...{
|
|
239
|
+
"--radix-hover-card-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
240
|
+
"--radix-hover-card-content-available-width": "var(--radix-popper-available-width)",
|
|
241
|
+
"--radix-hover-card-content-available-height": "var(--radix-popper-available-height)",
|
|
242
|
+
"--radix-hover-card-trigger-width": "var(--radix-popper-anchor-width)",
|
|
243
|
+
"--radix-hover-card-trigger-height": "var(--radix-popper-anchor-height)"
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
)
|
|
248
|
+
}
|
|
249
|
+
);
|
|
250
|
+
});
|
|
251
|
+
var ARROW_NAME = "HoverCardArrow";
|
|
252
|
+
var HoverCardArrow = React.forwardRef(
|
|
253
|
+
(props, forwardedRef) => {
|
|
254
|
+
const { __scopeHoverCard, ...arrowProps } = props;
|
|
255
|
+
const popperScope = usePopperScope(__scopeHoverCard);
|
|
256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
|
|
257
|
+
}
|
|
258
|
+
);
|
|
259
|
+
HoverCardArrow.displayName = ARROW_NAME;
|
|
260
|
+
function excludeTouch(eventHandler) {
|
|
261
|
+
return (event) => event.pointerType === "touch" ? void 0 : eventHandler();
|
|
262
|
+
}
|
|
263
|
+
function getTabbableNodes(container) {
|
|
273
264
|
const nodes = [];
|
|
274
265
|
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
// for any kind of element that could be tabbed to.
|
|
279
|
-
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
280
|
-
}
|
|
266
|
+
acceptNode: (node) => {
|
|
267
|
+
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
268
|
+
}
|
|
281
269
|
});
|
|
282
|
-
while(walker.nextNode())nodes.push(walker.currentNode);
|
|
270
|
+
while (walker.nextNode()) nodes.push(walker.currentNode);
|
|
283
271
|
return nodes;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
272
|
+
}
|
|
273
|
+
var Root2 = HoverCard;
|
|
274
|
+
var Trigger = HoverCardTrigger;
|
|
275
|
+
var Portal = HoverCardPortal;
|
|
276
|
+
var Content2 = HoverCardContent;
|
|
277
|
+
var Arrow2 = HoverCardArrow;
|
|
278
|
+
})();
|
|
294
279
|
//# sourceMappingURL=index.js.map
|